:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ink: #f8f4ec;
  --muted: rgba(248, 244, 236, .68);
  --red: #d43a3a;
  --blue: #55a8ed;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: fixed;
  overscroll-behavior: none;
  background: #12100e;
  color: var(--ink);
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

button { font: inherit; }

#gameShell { position: fixed; inset: 0; overflow: hidden; background: #12100e; }

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.hidden { display: none !important; }

#hud {
  position: absolute;
  z-index: 5;
  top: calc(10px + var(--safe-top));
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: start;
  justify-items: center;
  gap: 4px;
  pointer-events: none;
}

#killCounter { text-align: center; }
#killCounter strong {
  display: block;
  font-size: 44px;
  line-height: 1;
  font-weight: 1000;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 18px rgba(212,58,58,.35);
}
#killCounter small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .22em;
  color: rgba(255,255,255,.75);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.hudSide { min-width: 70px; padding-top: 5px; text-align: center; }
.hudSide strong { display: block; font-size: 22px; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.hudSide small { color: rgba(255,255,255,.7); font-size: 9px; font-weight: 900; letter-spacing: .16em; }

#bestPill {
  grid-column: 1 / 4;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(18,16,14,.55);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
#bestPill b { color: #ffd45d; }

.overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom));
  background: radial-gradient(circle at 50% 12%, rgba(212,58,58,.16), transparent 45%), rgba(10,8,7,.58);
  backdrop-filter: blur(8px);
}

.panel {
  width: min(400px, 100%);
  max-height: 94vh;
  overflow: auto;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(44,32,28,.95), rgba(18,14,12,.97));
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.07);
  text-align: center;
}
.menuPanel { position:relative;width:min(420px,100%);border-color:rgba(232,84,84,.22);background:linear-gradient(155deg,rgba(48,34,29,.97),rgba(17,13,12,.98));box-shadow:0 26px 75px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.08); }
.menuPanel::before { content:"";position:absolute;left:18%;right:18%;top:0;height:3px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,transparent,#e85454 25% 75%,transparent);box-shadow:0 0 18px rgba(232,84,84,.45); }

.menuPanel h1 {
  margin: -4px 0 8px;
  font-size: clamp(42px, 12.5vw, 62px);
  line-height: .82;
  letter-spacing: -.05em;
  text-shadow: 0 5px 0 rgba(0,0,0,.25);
}
.menuPanel h1 span { color: var(--red); }
.logoBlade { font-size: 38px; line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.tagline { margin: 8px 0; color: var(--muted); font-size: 13px; }
.roster { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:10px 0 12px; }
.rosterChip { min-width:0; padding:7px 3px 6px; border:1px solid rgba(255,255,255,.11); border-radius:11px; background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(0,0,0,.24)); box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 10px rgba(0,0,0,.13); }
.rosterChip canvas { display:block; width:30px; height:30px; margin:-3px auto 1px; }
.rosterChip span { display:block; overflow:hidden; color:#f8f4ec; font-size:8px; font-weight:1000; letter-spacing:.04em; white-space:nowrap; text-overflow:ellipsis; }
.rosterChip small { display:block; margin-top:3px; color:var(--muted); font-size:7px; letter-spacing:.08em; }
.rosterChip.hero { border-color:rgba(85,168,237,.36); background:rgba(85,168,237,.08); }

.howList {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin: 9px 0;
  padding: 0;
  list-style:none;
  border-radius: 14px;
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}
.howList li { min-height:44px; padding:7px 8px; border:1px solid rgba(255,255,255,.055); border-radius:10px; background:rgba(0,0,0,.22); }
.howList li b { display:block; margin-bottom:2px; color:#ffd45d; font-size:8px; letter-spacing:.12em; }

.bestCard {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  margin: 9px 0;
  padding: 9px 13px;
  border-radius: 15px;
  background: rgba(0,0,0,.25);
  text-align: left;
}
.bestCard span { grid-row: 1 / 3; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.bestCard strong { color: #ffd45d; font-size: 24px; line-height: 1; text-align: right; }
.bestCard small { color: var(--muted); text-align: right; }

.primaryBtn, .secondaryBtn {
  width: 100%;
  min-height: 50px;
  margin-top: 9px;
  border-radius: 15px;
  font-weight: 1000;
  letter-spacing: .06em;
  cursor: pointer;
}

.primaryBtn {
  border: 0;
  background: linear-gradient(#e85454, #b52f2f);
  color: #fff4f0;
  box-shadow: 0 5px 0 #7c1d1d, 0 12px 26px rgba(0,0,0,.38),0 0 18px rgba(212,58,58,.12);
}
.primaryBtn:active { translate: 0 4px; box-shadow: 0 2px 0 #7c1d1d; }
.secondaryBtn { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #fff; }

.compactPanel h2 { margin: 4px 0 10px; font-size: 26px; letter-spacing: .04em; }
.resultIcon { font-size: 48px; }
.finalScore { margin: 10px 0; }
.finalScore small { display: block; font-size: 10px; font-weight: 900; letter-spacing: .18em; color: var(--muted); }
.finalScore strong { display: block; color: var(--red); font-size: 58px; line-height: 1; font-weight: 1000; }
.resultGrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.resultGrid > div { padding: 10px 4px; border-radius: 12px; background: rgba(0,0,0,.25); }
.resultGrid small { display: block; font-size: 9px; font-weight: 900; letter-spacing: .13em; color: var(--muted); }
.resultGrid strong { display: block; margin-top: 4px; font-size: 19px; }
.newBest { color: #ffd45d !important; font-weight: 1000; letter-spacing: .12em; animation: pulse .7s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.06); } }
.retryHint { margin: 14px 0 2px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; animation: pulse 1s ease-in-out infinite alternate; }

@media (max-height: 620px) {
  .panel { padding: 10px 16px; }
  .menuPanel h1 { margin:-2px 0 3px;font-size:38px; }
  .logoBlade { font-size:26px; }
  .tagline { margin:4px 0;font-size:11px; }
  .roster { margin:4px 0 5px; }.rosterChip{padding:3px 2px}.rosterChip canvas{width:22px;height:22px;margin:-3px auto 0}.rosterChip small{margin-top:1px}
  .howList{gap:4px;margin:5px 0}.howList li{min-height:34px;padding:5px 7px;font-size:10px}.howList li b{margin-bottom:1px}
  .bestCard{margin:5px 0;padding:6px 11px}.bestCard strong{font-size:20px}.primaryBtn{min-height:42px;margin-top:5px}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}