:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --muted: #9aa6bd;
  --panel: #171d35;
  --blue: #5cd7ff;
  --yellow: #ffe45d;
  --pink: #ff5f86;
  --green: #65f0a4;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, #263258 0, transparent 45%),
    linear-gradient(180deg, #0d1121, #090c17);
  color: var(--ink);
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button, a { -webkit-tap-highlight-color: transparent; }

.app {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) 24px;
  place-items: center;
  padding: 0 10px;
}

.topbar {
  width: min(100%, 430px);
  height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 40px;
  align-items: center;
  gap: 10px;
}

.brand {
  color: var(--ink);
  text-decoration: none;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .06em;
  white-space: nowrap;
}

.brand b { color: var(--pink); }
.brand-mark { color: var(--yellow); margin-right: 4px; }

.hud { display: flex; gap: 5px; }

.hud > div {
  min-width: 54px;
  padding: 5px 7px 4px;
  border: 1px solid #323b5c;
  border-radius: 9px;
  background: rgba(19, 25, 47, .92);
  text-align: center;
}

.hud span {
  display: block;
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.hud strong { font-size: 15px; line-height: 1; }
.hud .army-hud { border-color: #d4bc45; color: var(--yellow); }

.icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid #3a4466;
  border-radius: 10px;
  background: #1b2240;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.stage {
  position: relative;
  height: 100%;
  max-height: calc(100dvh - 82px);
  aspect-ratio: 360 / 640;
  max-width: calc(100vw - 20px);
  overflow: hidden;
  border: 2px solid #354062;
  border-radius: 18px;
  background: #171d30;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(255,255,255,.04);
  touch-action: none;
}

canvas { display: block; width: 100%; height: 100%; }

.power-tray {
  position: absolute;
  z-index: 3;
  top: 6.5%;
  left: 50%;
  translate: -50% 0;
  width: 88%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.power-button {
  position: relative;
  min-width: 0;
  height: 39px;
  padding: 5px 23px 4px 6px;
  border: 1px solid #465270;
  border-radius: 9px;
  background: rgba(10, 15, 29, .84);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
  color: #b4bfd4;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, border-color .12s ease;
}

.power-button span,
.power-button small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.power-button span { font-size: 8px; font-weight: 1000; letter-spacing: .04em; }
.power-button small { margin-top: 2px; color: #78859f; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.power-button strong {
  position: absolute;
  top: 50%;
  right: 6px;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #29334d;
  color: #fff;
  font-size: 10px;
}
.power-button:disabled { cursor: default; opacity: .38; }
.power-button:not(:disabled):active { transform: translateY(2px) scale(.98); }
.power-button.ready { animation: power-ready 1.15s ease-in-out infinite alternate; }
.power-button.freeze.ready, .power-button.freeze.active { border-color: #69ddff; color: #8be8ff; }
.power-button.tenx.ready, .power-button.tenx.active { border-color: #ffe45d; color: #ffe45d; }
.power-button.bomb.ready { border-color: #ff6c8f; color: #ff8aa5; }
.power-button.active { opacity: 1; box-shadow: 0 0 18px currentColor; }
@keyframes power-ready { to { box-shadow: 0 0 14px currentColor; } }

.lane-readout {
  position: absolute;
  left: 50%;
  top: 76%;
  translate: -50% 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(7, 11, 23, .66);
  color: #b7c2d8;
  font-size: clamp(7px, 1.6vh, 9px);
  font-weight: 950;
  letter-spacing: .13em;
  pointer-events: none;
}

.announcement {
  position: absolute;
  top: 24%;
  left: 10%;
  right: 10%;
  text-align: center;
  color: var(--yellow);
  font-size: clamp(18px, 4vh, 28px);
  font-weight: 1000;
  letter-spacing: .04em;
  text-shadow: 0 4px 18px #000;
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
}

.announcement.show { animation: announce .95s cubic-bezier(.2,.8,.2,1); }
@keyframes announce { 0% {opacity:0;transform:scale(.65)} 18%,70% {opacity:1;transform:scale(1)} 100% {opacity:0;transform:scale(1.08)} }

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(9,13,26,.7), rgba(7,9,18,.94));
  backdrop-filter: blur(4px);
  z-index: 4;
}

.overlay[hidden], .pause-card[hidden], .results[hidden], .how-to[hidden] { display: none; }

.card {
  width: 100%;
  padding: 26px 20px 20px;
  border: 1px solid #465173;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(33,42,73,.98), rgba(18,23,42,.98));
  box-shadow: 0 22px 55px rgba(0,0,0,.5);
  text-align: center;
}

.eyebrow { margin: 0 0 8px; color: var(--yellow); font-size: 10px; font-weight: 950; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(42px, 8vh, 58px); line-height: .95; letter-spacing: -.06em; text-shadow: 0 5px 0 #76314a; }
.lede { margin: 18px auto; max-width: 280px; color: #d9deeb; font-size: 14px; line-height: 1.4; }

.how-to { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 20px 0; }
.how-to div { display: grid; gap: 7px; justify-items: center; color: #aeb8ce; font-size: 9px; line-height: 1.2; }
.how-to i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-style: normal; font-weight: 1000; }
.gate-icon { background:#1686ba; border:3px solid #63d7ff; }
.plus-icon { background:#267c53; border:3px solid #65f0a4; color:#eafff3; }
.enemy-icon { background:#7d2841; border:3px solid #ff6c8f; font-size:22px; }
.controls { display:flex; justify-content:center; gap:10px; color:#7f8ba5; font-size:9px; font-weight:900; letter-spacing:.08em; }
.controls span { padding:5px 8px; border:1px solid #394260; border-radius:6px; }

.primary-button {
  width: 100%;
  min-height: 50px;
  margin-top: 10px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffe978, #f6c93b);
  box-shadow: 0 5px 0 #a06d17, 0 9px 22px rgba(255,211,63,.2);
  color: #172039;
  font: 1000 15px/1 system-ui, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}
.primary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #a06d17; }

.results { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:18px 0 8px; }
.results div { padding:9px 4px; background:#10162a; border-radius:9px; }
.results span { display:block; color:#8490aa; font-size:7px; font-weight:900; letter-spacing:.1em; }
.results strong { display:block; margin-top:3px; font-size:17px; }

.pause-card {
  position:absolute;
  z-index:5;
  inset:0;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:6px;
  padding:70px;
  background:rgba(7,10,20,.88);
  text-align:center;
}
.pause-card strong { font-size:32px; }
.pause-card span { color:var(--muted); font-size:12px; white-space:nowrap; }

.desktop-hint { margin:0; align-self:start; color:#5f6b83; font-size:9px; letter-spacing:.08em; }

@media (max-width: 430px) {
  .app { grid-template-rows: 54px minmax(0, 1fr) 8px; padding:0 6px; }
  .topbar { height:54px; grid-template-columns: 70px minmax(0, 1fr) 36px; gap:6px; }
  .stage { max-height:calc(100dvh - 62px); max-width:calc(100vw - 12px); border-radius:14px; }
  .brand { font-size:11px; }
  .brand-mark { display:none; }
  .hud { gap:3px; }
  .hud > div { min-width:44px; padding-inline:4px; }
  .icon-button { width:36px; }
  h1 { font-size:46px; }
  .desktop-hint { display:none; }
}

@media (max-height: 620px) {
  .card { padding:17px 17px 15px; }
  .how-to { margin:12px 0; }
  .lede { margin:12px auto; }
  h1 { font-size:38px; }
}