/* style.css — an RTS command layer on a 390px screen.
 *
 * The map is the whole canvas. The chrome lives in two thin bands: resources at the top,
 * command at the bottom, nothing in the middle where the fighting is. Every tap target is
 * at least 44px tall because this is played with a thumb, in a hurry, while something is
 * attacking.
 */
:root { --ink:#f2e4d2; --dim:#b49c82; --amber:#e9a63f; --green:#96f0aa; --pad:8px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin:0; padding:0; height:100%; overflow:hidden;
  background:#0a0705; color:var(--ink);
  font:15px/1.45 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;
  overscroll-behavior:none; touch-action:none; user-select:none;
  -webkit-user-select:none; -webkit-touch-callout:none;
}
#cv { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#loading {
  position:fixed; inset:0; display:grid; place-items:center; z-index:40;
  background:#0a0705; color:var(--dim); letter-spacing:.08em; font-size:14px;
}

/* ── resources ───────────────────────────────────────────────────────────────────── */
#hud {
  position:fixed; z-index:10; top:env(safe-area-inset-top,0); left:0; right:0;
  padding:var(--pad) calc(var(--pad) + env(safe-area-inset-left,0)) 14px;
  display:flex; flex-direction:column; gap:5px;
  background:linear-gradient(#0a0705ee 50%,#0a070500); pointer-events:none;
}
#hud .row { display:flex; align-items:center; gap:7px; }
.res {
  display:inline-flex; align-items:baseline; gap:4px;
  background:#ffffff12; border-radius:999px; padding:4px 11px;
}
.res b { font-size:15px; font-weight:700; color:var(--amber); }
.res span { font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); }
.chip {
  font-size:11px; letter-spacing:.04em; color:var(--dim); white-space:nowrap;
  background:#ffffff0f; border-radius:999px; padding:3px 9px;
  display:inline-flex; align-items:center; gap:5px;
}
.chip b { color:var(--ink); font-weight:600; }
.chip.dim { color:#8a7259; background:none; padding-left:0; }
.track { width:46px; height:5px; border-radius:999px; background:#ffffff1a; overflow:hidden; display:block; }
.track i { display:block; height:100%; background:linear-gradient(90deg,#8d2f23,#d8604a); transition:width .2s; }
body.low .track i { animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.4; } }
#bPause {
  pointer-events:auto; cursor:pointer; margin-left:auto; flex:none;
  width:34px; height:34px; border-radius:999px; border:0;
  background:#ffffff14; color:var(--ink); font:600 13px/1 inherit;
}

/* ── narration ───────────────────────────────────────────────────────────────────── */
#ticker {
  position:fixed; z-index:10; left:0; right:0;
  top:calc(96px + env(safe-area-inset-top,0));
  padding:0 calc(16px + env(safe-area-inset-left,0));
  pointer-events:none; text-align:center;
}
/* Solid pills, never backdrop-filter: blurring a backdrop over a canvas that repaints
 * every frame makes the compositor re-blur it every frame too, and that alone took an
 * earlier build from 20fps to under 4. */
#ticker p {
  display:inline-block; margin:3px auto; max-width:30em;
  font-size:12.5px; line-height:1.35; padding:4px 11px; border-radius:11px;
  background:rgba(10,7,5,.78);
}
#ticker p.reeed { font-style:italic; color:#e8cfa8; }

/* ── camera jumps ────────────────────────────────────────────────────────────────── */
#jumps {
  position:fixed; z-index:12; right:calc(var(--pad) + env(safe-area-inset-right,0));
  top:calc(150px + env(safe-area-inset-top,0));
  display:flex; flex-direction:column; gap:6px;
}
#jumps button {
  pointer-events:auto; cursor:pointer; min-width:62px; height:32px; padding:0 10px;
  border:1px solid #ffffff1f; border-radius:9px; background:#1a120cdd;
  color:var(--dim); font:600 11px/1 inherit; letter-spacing:.05em;
}

/* ── command layer ───────────────────────────────────────────────────────────────── */
#bottom {
  position:fixed; z-index:12; left:0; right:0;
  bottom:calc(var(--pad) + env(safe-area-inset-bottom,0));
  padding:0 calc(6px + env(safe-area-inset-left,0));
  display:flex; flex-direction:column; gap:5px;
}

#selbar {
  display:flex; align-items:center; gap:6px; margin:0 2px 1px;
  background:#14361fdd; border:1px solid #96f0aa44; border-radius:11px;
  padding:5px 6px 5px 11px;
}
#selText { flex:1; min-width:0; font-size:12px; color:var(--green); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#selbar button {
  pointer-events:auto; cursor:pointer; flex:none; height:32px; padding:0 12px;
  border:0; border-radius:8px; background:#ffffff18; color:var(--ink);
  font:600 12px/1 inherit;
}

#groups { display:flex; gap:5px; }
#groups button {
  pointer-events:auto; cursor:pointer; flex:1; height:38px;
  border:1px solid #ffffff1a; border-radius:10px; background:#15100bdd;
  color:var(--dim); font:600 11px/1 inherit; letter-spacing:.03em;
}
#groups .g_forager { color:#f0a93c; }
#groups .g_soldier { color:#e4553a; }
#groups .g_spitter { color:#b9e04a; }

/* Five production buttons will not fit side by side at 375px, so this scrolls sideways.
 * pan-x is the one gesture the page lets through — everywhere else touch is the game's. */
#build {
  display:flex; gap:5px; overflow-x:auto; overflow-y:hidden;
  touch-action:pan-x; -webkit-overflow-scrolling:touch; padding-bottom:2px;
}
#build::-webkit-scrollbar { display:none; }
#build button {
  pointer-events:auto; cursor:pointer; flex:none; min-width:76px; height:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:1px solid #ffffff1f; border-radius:11px; background:#1a120cdd;
  color:var(--ink); font:inherit;
}
#build button b { font-size:11.5px; font-weight:700; letter-spacing:.02em; }
#build button i { font-style:normal; font-size:10.5px; color:var(--amber); }
#build button.off { opacity:.36; }
#build button.arm { background:#4a3209; border-color:var(--amber); }
#build .sep { flex:none; width:1px; background:#ffffff1f; margin:6px 3px; }

#hint {
  position:fixed; z-index:10; left:0; right:0;
  bottom:calc(152px + env(safe-area-inset-bottom,0));
  margin:0; text-align:center; font-size:10px; letter-spacing:.04em;
  color:#9d8569; pointer-events:none; text-shadow:0 1px 6px #000,0 0 3px #000;
}

/* ── overlays ────────────────────────────────────────────────────────────────────── */
#paused, #end {
  position:fixed; inset:0; z-index:30; display:grid; place-items:center;
  background:#06040380; backdrop-filter:blur(3px);
}
#paused { cursor:pointer; }
#paused p { letter-spacing:.3em; text-transform:uppercase; color:var(--dim); }
#paused p::after { content:'\A tap to resume'; white-space:pre; font-size:11px;
  letter-spacing:.14em; opacity:.6; }
#end { background:#060403f2; }
#end .card { max-width:23em; padding:0 28px; text-align:center; }
#end h1 { font-size:25px; margin:0 0 10px; font-weight:700; }
#end .cause { color:var(--dim); font-size:15px; margin:0 0 18px; }
#end .stats { color:var(--amber); font-size:13px; margin:0 0 26px; }
#end button {
  min-height:50px; padding:0 34px; border:0; border-radius:14px;
  background:var(--amber); color:#2a1a05; font:700 15px/1 inherit; cursor:pointer;
}

@media (orientation:landscape) and (max-height:460px) {
  #hud { padding-bottom:6px; }
  #hud .small { display:none; }
  #ticker { top:calc(58px + env(safe-area-inset-top,0)); }
  #ticker p:not(:last-child) { display:none; }
  #hint { display:none; }
  #jumps { flex-direction:row; top:auto; bottom:calc(104px + env(safe-area-inset-bottom,0)); }
  #build button { height:42px; }
}