/* Strata — shared styles: game HUD and landing page */
:root {
  --bg: #141228; --panel: rgba(24, 21, 46, 0.88); --line: #3a3560;
  --teal: #35e0c8; --amber: #ffd166; --red: #ff5f4a; --ink: #e8e6ff;
  --dim: #9d96c8;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif; }
body.game { overflow: hidden; }
#scene { position: fixed; inset: 0; }
#scene canvas { display: block; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud-top {
  position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 10px;
  flex-wrap: wrap; align-items: center;
}
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; font-size: 13px; color: var(--dim);
}
.stat b { color: var(--teal); font-variant-numeric: tabular-nums; margin-left: 4px; }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 99px;
  padding: 4px 12px; font-size: 12px; color: var(--amber); }
#hp-bars { position: absolute; top: 48px; left: 12px; display: flex; flex-direction: column; gap: 6px; }
.hprow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dim); }
.hprow span { width: 78px; text-align: right; }
.bar { width: 150px; height: 9px; background: #221f3e; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; transition: width .25s; }
.hprow.you .bar i { background: linear-gradient(90deg, #1c7a6e, var(--teal)); }
.hprow.foe .bar i { background: linear-gradient(90deg, #9c3427, var(--red)); }

#build { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end; max-width: 62%; pointer-events: auto; }
#build button, #zoom button {
  pointer-events: auto; cursor: pointer; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px;
}
#build button em { font-style: normal; color: var(--amber); font-size: 12px; }
#build button kbd, #zoom kbd { font-size: 10px; color: var(--dim); font-family: inherit; }
#build button:hover { border-color: var(--teal); }
#build button.cant { opacity: .45; }
#zoom { position: absolute; bottom: 12px; right: 12px; display: none; }

#stick {
  position: absolute; left: 16px; bottom: 16px; width: 104px; height: 104px;
  border-radius: 50%; background: rgba(34, 31, 62, .55); border: 1px solid var(--line);
  pointer-events: auto; touch-action: none; display: none;
}
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgba(53, 224, 200, .35); border: 1px solid var(--teal);
}
#toast {
  display: none; position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--teal); color: var(--ink);
  border-radius: 10px; padding: 8px 16px; font-size: 13px; max-width: 90%;
}
#pause-tag { display: none; position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);
  background: var(--panel); border: 1px solid var(--amber); padding: 12px 22px; border-radius: 12px; }

/* ---------- overlays ---------- */
#start-screen, #end-screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 9, 22, .72); z-index: 10; pointer-events: auto;
}
#end-screen { display: none; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 30px; max-width: min(560px, 92vw); max-height: 88vh; overflow: auto;
  text-align: center;
}
.panel h1 { margin: 0 0 4px; letter-spacing: .35em; color: var(--teal); font-size: clamp(28px, 7vw, 44px); }
.panel h2 { margin: 0 0 8px; font-size: 30px; }
.panel h2.win { color: var(--teal); }
.panel h2.lose { color: var(--red); }
.panel .tag { color: var(--dim); margin: 0 0 14px; }
.how { text-align: left; margin: 0 auto 18px; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.how b { color: var(--amber); }
#btn-start, #btn-restart {
  cursor: pointer; background: linear-gradient(135deg, #1c7a6e, #35e0c8);
  color: #08131a; font-weight: 700; font-size: 17px; border: 0; border-radius: 12px;
  padding: 12px 34px; letter-spacing: .06em;
}
#btn-start:hover, #btn-restart:hover { filter: brightness(1.15); }

@media (max-width: 760px) {
  #stick { display: block; }
  #zoom { display: flex; flex-direction: column; gap: 8px; bottom: 96px; }
  #build { max-width: 46%; }
  .hprow span { width: 56px; }
  .bar { width: 92px; }
  #hud-top .stat { font-size: 11px; padding: 4px 7px; }
}