/* SOLBORG — Festung der Dünen */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --sand: #d9b878;
  --sand-dark: #b58f4e;
  --ink: #2b1f14;
  --panel: rgba(30, 22, 14, 0.92);
  --panel-border: #6b5233;
  --accent: #e8a33d;
  --good: #7ec96f;
  --bad: #e0604f;
  --teal: #3fae9a;
}
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a130c; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #f0e6d2; }
#app { position: relative; width: 100%; height: 100%; }
#game { position: absolute; inset: 0; cursor: default; display: block; }
.hidden { display: none !important; }
kbd { background: #453522; border: 1px solid #6b5233; border-radius: 4px; padding: 0 5px; font-size: 12px; }

/* ── Top bar ─────────────────────────────── */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 44px;
  display: flex; align-items: center; gap: 14px; padding: 0 10px;
  background: var(--panel); border-bottom: 2px solid var(--panel-border);
  z-index: 20; user-select: none;
}
#resbar { display: flex; gap: 10px; flex-wrap: nowrap; }
.res { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; min-width: 62px; }
.res .dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.5); }
.res .sub { font-size: 10px; color: #bfa77f; font-weight: 400; }
.top-group { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.ticon { width: 18px; height: 18px; display: inline-block; }
#topbar button {
  background: #3a2c1c; color: #f0e6d2; border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; font-weight: 600;
}
#topbar button:hover { background: #4d3b25; }
#topbar button.on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
#taxbox button { padding: 2px 7px; font-size: 12px; }
#happyval.low { color: var(--bad); }
#waveval.soon { color: var(--bad); font-weight: 800; }

/* ── Build palette ───────────────────────── */
#palette {
  position: absolute; left: 0; top: 44px; bottom: 0; width: 172px;
  background: var(--panel); border-right: 2px solid var(--panel-border);
  overflow-y: auto; z-index: 15; padding: 8px; user-select: none;
}
#palette h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin: 10px 4px 4px; }
#palette h3:first-child { margin-top: 0; }
.pal-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #35281a; border: 1px solid #554026; border-radius: 8px;
  padding: 5px 7px; margin-bottom: 5px; cursor: pointer; color: #f0e6d2; text-align: left;
}
.pal-item:hover { background: #463521; }
.pal-item.active { border-color: var(--accent); background: #4d3b25; box-shadow: 0 0 0 1px var(--accent); }
.pal-item.disabled { opacity: .45; cursor: not-allowed; }
.pal-item .pic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 5px; background: #241a10; display: flex; align-items: center; justify-content: center; }
.pal-item .pic canvas { width: 28px; height: 28px; }
.pal-item .nm { font-size: 13px; font-weight: 600; line-height: 1.1; }
.pal-item .cost { font-size: 10px; color: #cbb488; line-height: 1.2; }

/* ── Selection panel ─────────────────────── */
#selpanel {
  position: absolute; left: 180px; bottom: 10px; min-width: 260px; max-width: 430px;
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: 10px;
  z-index: 15; padding: 10px 12px; user-select: none;
}
#selpanel h3 { font-size: 15px; margin-bottom: 4px; }
#selpanel .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; flex-wrap: wrap; }
#selpanel .muted { color: #bfa77f; font-size: 12px; }
#selpanel .hpbar { width: 160px; height: 8px; background: #241a10; border-radius: 4px; overflow: hidden; }
#selpanel .hpbar > div { height: 100%; background: var(--good); }
#selpanel button {
  background: #3a2c1c; color: #f0e6d2; border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; font-weight: 600;
}
#selpanel button:hover:not(:disabled) { background: #4d3b25; }
#selpanel button:disabled { opacity: .4; cursor: not-allowed; }
#selpanel .train { display: flex; align-items: center; gap: 6px; }
#selpanel .train canvas { width: 26px; height: 26px; }
#selpanel .warn { color: var(--bad); font-size: 12px; font-weight: 600; }

/* ── Messages ────────────────────────────── */
#messages { position: absolute; top: 54px; right: 10px; width: 300px; z-index: 15; pointer-events: none; }
.msg {
  background: var(--panel); border-left: 4px solid var(--accent); border-radius: 6px;
  padding: 7px 10px; margin-bottom: 6px; font-size: 13px;
  animation: msgin .25s ease-out; transition: opacity 1s;
}
.msg.bad { border-left-color: var(--bad); }
.msg.good { border-left-color: var(--good); }
@keyframes msgin { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Minimap ─────────────────────────────── */
#minimap {
  position: absolute; right: 10px; bottom: 10px; z-index: 15;
  border: 2px solid var(--panel-border); border-radius: 8px; cursor: pointer;
  background: #241a10;
}

/* ── Overlays ────────────────────────────── */
.overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(12, 8, 4, 0.78); display: flex; align-items: center; justify-content: center;
}
.panel {
  background: linear-gradient(160deg, #2e2214, #241a10);
  border: 2px solid var(--panel-border); border-radius: 14px;
  padding: 28px 34px; max-width: 720px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 12px 60px rgba(0,0,0,.6);
}
.panel h1 { font-size: 44px; letter-spacing: 6px; color: var(--accent); text-align: center; }
.panel h2 { font-size: 18px; letter-spacing: 3px; color: #cbb488; text-align: center; margin-bottom: 14px; font-weight: 600; }
.panel .lore { font-size: 14px; line-height: 1.5; margin-bottom: 14px; color: #e8dcc0; }
.howto { display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.45; margin-bottom: 18px; color: #d8c9a8; }
.howto b { color: #f0e6d2; }
button.big {
  display: block; margin: 0 auto; padding: 12px 34px; font-size: 17px; font-weight: 700;
  background: var(--accent); color: var(--ink); border: none; border-radius: 10px; cursor: pointer;
  letter-spacing: 1px;
}
button.big:hover { background: #f5b95e; }
#endtitle { font-size: 38px; }
#endstats { display: flex; gap: 18px; justify-content: center; margin: 14px 0 20px; flex-wrap: wrap; }
#endstats .stat { text-align: center; }
#endstats .stat b { display: block; font-size: 22px; color: var(--accent); }
#endstats .stat span { font-size: 12px; color: #bfa77f; }

/* Tooltip */
#tooltip {
  position: absolute; z-index: 60; pointer-events: none;
  background: rgba(20, 14, 8, .96); border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; max-width: 250px; line-height: 1.4; display: none;
}
#tooltip b { color: var(--accent); }