:root {
  --bg: #0d0b0a; --panel: rgba(24, 24, 24, 0.94); --line: rgba(200, 190, 170, 0.22);
  --cyan: #e8b64a; --amber: #e8b64a; --alien: #c2456e; --red: #e0442c; --text: #ece6da; --mute: #9a9285;
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden;
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* top status strip — sits below the Dynamic Island */
#top {
  padding: calc(var(--st) + 6px) 10px 6px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(#1c1b1a, rgba(22, 21, 20, 0.92)); border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; z-index: 2;
}
.stat { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.ic { font-size: 13px; }
.ic.min { color: #6cc4f0; } .ic.drone { color: var(--amber); } .ic.hq { color: var(--cyan); }
#s-hq.low b { color: var(--red); }
.ic.hq { color: #7bd34a; }
.wave {
  margin-left: auto; padding: 7px 12px; border-radius: 9px; font-weight: 700; font-size: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05);
}
.wave.ready { color: #1a1408; background: var(--cyan); border-color: var(--cyan); }
.wave.live { color: #f08aa8; border-color: rgba(194, 69, 110, 0.5); background: rgba(194, 69, 110, 0.12); }

#stage { flex: 1; position: relative; overflow: hidden; }
#cv { position: absolute; left: 0; top: 0; display: block; }
#toast {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); pointer-events: none;
  padding: 8px 14px; border-radius: 10px; background: rgba(10, 18, 28, 0.9); border: 1px solid var(--line);
  font-size: 14px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;
}
#toast.show { opacity: 1; }
#toast.bad { border-color: rgba(255, 59, 92, 0.6); color: #ffc2cc; }
#toast.big { font-size: 18px; font-weight: 700; bottom: 45%; color: #f08aa8; border-color: rgba(194, 69, 110, 0.6); }

/* bottom bar — thumb zone, above the home indicator */
#bottom { padding: 8px 8px calc(var(--sb) + 6px); background: var(--panel); border-top: 1px solid var(--line); z-index: 2; }
#build-bar, #sel-panel { display: flex; gap: 6px; align-items: stretch; min-height: 64px; }
.bld {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(#34322f, #232120);
}
.bld .glyph { font-size: 20px; line-height: 1; color: var(--cyan); }
.bld .glyph.drone { color: var(--amber); }
.bld .nm { font-size: 12px; color: var(--mute); }
.bld .cost { font-size: 13px; font-weight: 700; color: #6cc4f0; }
.bld.on { background: linear-gradient(#4a4232, #2e2a22); border-color: var(--amber); }
.bld.poor .cost { color: var(--red); }
.ctl { display: flex; flex-direction: column; gap: 6px; width: 48px; }
.sm { flex: 1; border-radius: 10px; border: 1px solid var(--line); font-weight: 700; font-size: 14px; }

.sel-info { flex: 1.6; display: flex; flex-direction: column; justify-content: center; padding: 0 4px; }
#sel-name { font-weight: 700; }
#sel-desc { font-size: 12px; color: var(--mute); }
.act { flex: 1; border-radius: 12px; border: 1px solid var(--line); font-weight: 700; font-size: 14px; padding: 0 6px; }
.act.warn { border-color: rgba(255, 179, 71, 0.4); color: var(--amber); }
.act.sm { flex: 0 0 48px; }
.act:disabled { opacity: 0.35; }

/* overlay screens */
.screen {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--st) + 20px) 28px calc(var(--sb) + 20px); text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(120, 40, 70, 0.3), transparent 60%), rgba(12, 10, 9, 0.95);
}
#title { background: radial-gradient(ellipse at 50% 5%, rgba(130, 40, 75, 0.45), transparent 55%),
  radial-gradient(ellipse at 50% 100%, rgba(150, 100, 50, 0.25), transparent 55%), #0d0b0a; }
h1 { margin: 0 0 6px; font-size: 46px; font-weight: 900; letter-spacing: 6px; line-height: 1; color: #d8d0c0; text-shadow: 0 3px 0 #000, 0 0 30px rgba(0, 0, 0, 0.8); }
h1 span { color: #c2456e; }
h2 { margin: 0 0 12px; font-size: 28px; letter-spacing: 2px; }
.sub { color: var(--mute); margin: 4px 0 26px; }
.menu { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 300px; }
.big { padding: 15px; border-radius: 10px; font-size: 17px; font-weight: 700; color: #1a1408; background: linear-gradient(#f0c35a, #c99428); box-shadow: 0 3px 0 #6b4e12; }
.big.ghost { color: var(--text); background: transparent; border: 1px solid var(--line); box-shadow: none; }
.tiny { font-size: 12px; color: var(--mute); margin-top: 22px; }
.ver { margin-top: 6px; opacity: 0.6; }
#help ol { text-align: left; padding-left: 22px; margin: 0 0 24px; max-width: 360px; }
#help li { margin-bottom: 10px; color: #bcd6e2; }
#end-stats { list-style: none; padding: 0; margin: 0 0 24px; font-variant-numeric: tabular-nums; color: #bcd6e2; }
#end-stats li { margin: 4px 0; }

#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 50; background: var(--bg); flex-direction: column;
    align-items: center; justify-content: center; font-size: 18px; }
  #rotate div { font-size: 56px; color: var(--cyan); }
}