:root {
  color-scheme: dark;
  --ink: #f9f5e8;
  --muted: #a7b8ae;
  --deep: #071713;
  --panel: #0c211c;
  --court: #287c5e;
  --court-dark: #123c31;
  --cream: #f8efcf;
  --yellow: #ffd84b;
  --orange: #ff8534;
  --red: #ff4055;
  --mint: #5ee0ad;
}

* { box-sizing: border-box; }

html,
body { width: 100%; min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #06130f;
  color: var(--ink);
  font-family: "Arial Narrow", "Roboto Condensed", "Franklin Gothic Medium", ui-sans-serif, system-ui, sans-serif;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; }

.app {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
  background:
    radial-gradient(circle at 50% 31%, #1c4f3e 0, #0b251d 36%, #06130f 73%),
    #06130f;
}

.topbar {
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(12px, 3vw, 30px);
  border-bottom: 1px solid rgb(235 255 242 / 10%);
  background: rgb(5 18 14 / 84%);
  backdrop-filter: blur(12px);
}

.back-link {
  justify-self: start;
  color: #92aa9f;
  text-decoration: none;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.back-link:hover { color: var(--cream); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(.73rem, 2vw, .92rem);
  font-weight: 950;
  letter-spacing: .07em;
  white-space: nowrap;
}

.wordmark b { color: var(--yellow); }

.wordmark-bomb {
  position: relative;
  width: 17px;
  height: 17px;
  display: block;
  border-radius: 50%;
  background: #dce4df;
  box-shadow: inset -4px -4px #53625c;
}

.wordmark-bomb::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 7px;
  left: 11px;
  top: -5px;
  border-top: 2px solid var(--orange);
  border-radius: 50%;
  transform: rotate(-34deg);
}

.wordmark-bomb::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  left: 19px;
  top: -7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px var(--orange);
}

.sound-button {
  justify-self: end;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid rgb(232 255 240 / 14%);
  border-radius: 50%;
  background: rgb(255 255 255 / 4%);
  cursor: pointer;
}

.sound-button:hover { border-color: #f8efcf77; background: rgb(255 255 255 / 8%); }
.sound-button svg { width: 19px; fill: var(--cream); }
.sound-button path:not(:first-child) { fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; }
.sound-slash { display: none; }
.sound-button[aria-pressed="true"] .sound-waves { display: none; }
.sound-button[aria-pressed="true"] .sound-slash { display: block; }

.game-layout {
  min-height: 0;
  width: min(100%, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.5vh, 15px);
  padding: clamp(9px, 1.8vh, 17px) clamp(8px, 2vw, 22px) clamp(7px, 1.5vh, 14px);
}

.scoreboard {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(74px, 1fr) minmax(210px, 3.1fr) minmax(74px, 1fr);
  align-items: stretch;
  gap: clamp(7px, 1.4vw, 14px);
}

.score,
.timer-panel {
  min-height: 80px;
  border: 1px solid rgb(231 255 240 / 13%);
  border-radius: 13px;
  background: linear-gradient(180deg, rgb(16 48 39 / 94%), rgb(7 27 21 / 94%));
  box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 10px 35px rgb(0 0 0 / 18%);
}

.score {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 9px clamp(10px, 2vw, 18px);
  transition: 180ms ease;
}

.score span,
.timer-copy span {
  color: var(--muted);
  font-size: clamp(.51rem, 1.4vw, .63rem);
  font-weight: 900;
  letter-spacing: .16em;
}

.score strong {
  font-size: clamp(1.15rem, 4vw, 2rem);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1;
}

.opponent-score { text-align: right; }
.opponent-score strong { color: #ffbd8b; }
.player-score strong { color: var(--mint); }
.score.bump { animation: score-bump 520ms cubic-bezier(.2, .85, .3, 1); }

.timer-panel {
  --timer-color: var(--mint);
  position: relative;
  min-width: 0;
  padding: 9px clamp(12px, 2.2vw, 21px) 11px;
  border-color: color-mix(in srgb, var(--timer-color) 32%, transparent);
  transition: border-color 150ms ease, background 150ms ease;
}

.timer-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.timer-copy span { color: color-mix(in srgb, var(--timer-color) 75%, white); }

.timer-copy strong {
  min-width: 2.8em;
  color: var(--timer-color);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.35rem, 4.2vw, 2.3rem);
  font-weight: 950;
  line-height: 1;
  text-align: right;
  letter-spacing: -.05em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--timer-color) 36%, transparent);
}

.armed-status {
  margin-left: auto;
  padding: 3px 7px;
  border: 1px solid #ff9b8f;
  border-radius: 999px;
  background: #ff4055;
  color: white;
  font-size: clamp(.5rem, 1.4vw, .64rem);
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .12em;
  line-height: 1;
  box-shadow: 0 0 14px #ff405599;
}

.armed-status[hidden] { display: none; }

.timer-track {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #04130f;
  box-shadow: inset 0 1px 3px #000b;
}

.timer-fill {
  width: 100%;
  height: 100%;
  transform-origin: left;
  border-radius: inherit;
  background: var(--timer-color);
  box-shadow: 0 0 14px var(--timer-color);
  will-change: transform;
}

.danger-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25%;
  width: 2px;
  background: #ffffff66;
}

.timer-panel.danger {
  animation: timer-pulse 420ms ease-in-out infinite alternate;
  background: linear-gradient(180deg, rgb(74 27 26 / 95%), rgb(30 10 13 / 95%));
}

.timer-panel.armed {
  border-color: #ff4055;
  background: linear-gradient(180deg, rgb(96 22 28 / 98%), rgb(37 7 12 / 98%));
  animation: armed-panel 240ms steps(2) infinite;
}

.timer-panel.fuse-hit { animation: fuse-panel-hit 300ms ease-out; }

.fuse-change {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 25%;
  padding: 2px 5px;
  border-radius: 5px;
  background: #120c07cc;
  color: var(--yellow);
  font-size: clamp(.65rem, 2vw, .88rem);
  font-weight: 1000;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

.fuse-change.show { animation: fuse-number 560ms cubic-bezier(.18, .78, .3, 1); }

.game-stage {
  position: relative;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1000 / 560;
  align-self: center;
  overflow: hidden;
  border: 1px solid rgb(242 255 247 / 18%);
  border-radius: clamp(12px, 2vw, 22px);
  background: #0b2a21;
  box-shadow: 0 22px 70px #0008, inset 0 1px #ffffff12;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#court { width: 100%; height: 100%; display: block; touch-action: none; }

.stage-ground { fill: #0a231c; }
.left-buffer,
.right-buffer { fill: #0b2b22; }
.left-buffer { stroke: #3c8d7255; }
.right-buffer { stroke: #3c8d7255; }
.court-surface { fill: var(--court); }

.left-buffer,
.right-buffer {
  stroke-width: 2;
  stroke-dasharray: 9 10;
}

.court-lines { fill: none; stroke: #f8efcf; stroke-width: 4; opacity: .87; }
.court-lines .center-line { stroke-width: 5; opacity: .92; }
.court-lines .service-line { stroke-width: 2; opacity: .34; }
.court-lines .dash-line { stroke-width: 2; stroke-dasharray: 11 12; opacity: .36; }

.zone-copy text {
  fill: #76aa96;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 4px;
  text-anchor: middle;
}

.paddle-shadow { fill: #02110c; opacity: .34; transform: translate(4px, 7px); }
.player-paddle .paddle-body { fill: #efffe9; }
.player-paddle .paddle-edge { fill: var(--mint); }
.opponent-paddle .paddle-body { fill: #fff0de; }
.opponent-paddle .paddle-edge { fill: var(--orange); }
.paddle.hit .paddle-body,
.paddle.hit .paddle-edge {
  transform-box: fill-box;
  transform-origin: center;
  animation: paddle-hit 160ms ease-out;
}

.bomb-trail { opacity: .24; }
.bomb-trail circle { fill: #ffd85a; }
.bomb-trail .trail-2 { opacity: .58; }
.bomb-trail .trail-3 { opacity: .3; }
.bomb-shadow { fill: #000; opacity: .46; }
.bomb-body { stroke: #080c0e; stroke-width: 3; }
.bomb-highlight { fill: none; stroke: #dce6e2; stroke-width: 3; stroke-linecap: round; opacity: .42; }
.bomb-cap { fill: #141719; stroke: #656c6e; stroke-width: 2; }
.fuse { fill: none; stroke: #e2b267; stroke-width: 5; stroke-linecap: round; }
.spark path { stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; }
.spark circle { fill: #fff2a5; filter: drop-shadow(0 0 5px var(--orange)); }
.bomb-seam { fill: none; stroke: #ffffff; stroke-width: 1; opacity: .09; }
.bomb.danger .spark { animation: spark-panic 180ms steps(2) infinite; transform-box: fill-box; transform-origin: center; }
.bomb.danger .bomb-body { stroke: var(--red); filter: drop-shadow(0 0 10px #ff405588); }
.bomb.armed .spark { animation-duration: 80ms; }
.bomb.armed .bomb-body { animation: bomb-armed-pulse 180ms steps(2) infinite; }

.particle { pointer-events: none; }

.center-message {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 92%;
  pointer-events: none;
  color: white;
  font-size: clamp(1.9rem, 7vw, 5rem);
  font-weight: 1000;
  letter-spacing: -.06em;
  line-height: .94;
  text-align: center;
  text-shadow: 0 5px 0 #15171455, 0 0 28px #000a;
  opacity: 0;
  transform: scale(.78) rotate(-2deg);
}

.center-message.show { animation: message-pop 760ms cubic-bezier(.16, .82, .32, 1); }
.center-message.safe { color: #caffea; }
.center-message.player { color: var(--yellow); }
.center-message.opponent { color: #ffc3a0; }
.center-message.armed { color: #ffdd50; text-shadow: 0 0 18px #ff4055, 0 5px 0 #361015; }

.overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 24px);
  background: rgb(3 15 11 / 62%);
  backdrop-filter: blur(6px);
  transition: opacity 180ms ease;
}

.overlay.hidden { opacity: 0; pointer-events: none; }

.game-card {
  position: relative;
  width: min(100%, 470px);
  padding: clamp(18px, 4.2vw, 34px);
  border: 1px solid #d9ffe933;
  border-radius: clamp(16px, 3vw, 26px);
  background: linear-gradient(150deg, rgb(20 62 49 / 97%), rgb(7 28 21 / 98%));
  box-shadow: 0 26px 80px #000a, inset 0 1px #ffffff13;
  text-align: center;
}

.card-bomb {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  border: 2px solid #030504;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #647068, #111714 58%, #050706);
  box-shadow: 0 8px 0 #03100c55;
}

.mini-fuse {
  position: absolute;
  left: 30px;
  top: -18px;
  width: 25px;
  height: 22px;
  border-top: 4px solid #d4a55f;
  border-radius: 50%;
  transform: rotate(-25deg);
}

.mini-spark {
  position: absolute;
  left: 48px;
  top: -25px;
  color: var(--yellow);
  font-size: 22px;
  text-shadow: 0 0 7px var(--orange);
  animation: mini-spark 460ms steps(2) infinite;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--yellow);
  font-size: clamp(.57rem, 1.7vw, .7rem);
  font-weight: 950;
  letter-spacing: .2em;
}

.game-card h1 {
  margin: 0;
  font-size: clamp(2rem, 7.7vw, 4.2rem);
  font-weight: 1000;
  letter-spacing: -.075em;
  line-height: .8;
  text-transform: uppercase;
}

.game-card h1 span { color: var(--mint); }

.game-card > p:not(.eyebrow) {
  max-width: 400px;
  margin: clamp(12px, 2.4vw, 20px) auto 0;
  color: #c3d1c9;
  font-size: clamp(.72rem, 1.8vw, .9rem);
  line-height: 1.48;
}

.rule-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin-top: clamp(12px, 2.4vw, 19px);
  color: #92aa9f;
  font-size: clamp(.56rem, 1.5vw, .68rem);
  letter-spacing: .04em;
}

.rule-row b { color: var(--cream); }

.primary-button {
  width: 100%;
  margin-top: clamp(13px, 2.6vw, 21px);
  padding: clamp(10px, 2vw, 14px) 18px;
  border: 0;
  border-radius: 11px;
  background: var(--yellow);
  color: #122018;
  box-shadow: 0 7px 0 #b07313, 0 13px 30px #0005;
  font-size: clamp(.78rem, 2vw, .98rem);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 100ms ease;
}

.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary-button:active { transform: translateY(5px); box-shadow: 0 2px 0 #b07313; }
.primary-button:focus-visible,
.sound-button:focus-visible,
.back-link:focus-visible { outline: 3px solid white; outline-offset: 3px; }

.touch-hint {
  position: absolute;
  z-index: 2;
  left: 15%;
  bottom: 8%;
  display: none;
  color: #ffffff80;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .13em;
  pointer-events: none;
  animation: touch-nudge 1.5s ease-in-out infinite;
}

.game-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px clamp(13px, 4vw, 36px);
  color: #7f9b8e;
  font-size: clamp(.53rem, 1.4vw, .64rem);
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
}

.legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
}

.rally-dot { background: var(--court); }
.safe-dot { background: #184436; border: 1px dashed #78ab98; }

.app.shake .game-stage { animation: screen-shake 320ms linear; }

.app.armed-flash::after {
  content: "";
  position: fixed;
  z-index: 20;
  inset: 0;
  background: #ff405544;
  pointer-events: none;
  animation: armed-screen-flash 260ms ease-out forwards;
}

@keyframes score-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.1); border-color: currentColor; filter: brightness(1.35); }
  100% { transform: scale(1); }
}

@keyframes timer-pulse {
  from { box-shadow: inset 0 1px #ffffff0a, 0 0 0 #ff405500; }
  to { box-shadow: inset 0 1px #ffffff0a, 0 0 24px #ff40553b; }
}

@keyframes fuse-panel-hit {
  0% { transform: scale(1); filter: brightness(1); }
  36% { transform: scale(1.018); filter: brightness(1.65); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes fuse-number {
  0% { opacity: 0; transform: translateY(7px) scale(.75); }
  20%, 58% { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 0; transform: translateY(-12px) scale(.9); }
}

@keyframes armed-panel {
  from { box-shadow: inset 0 1px #ffffff18, 0 0 8px #ff405555; }
  to { box-shadow: inset 0 1px #ffffff18, 0 0 28px #ff4055bb; }
}

@keyframes bomb-armed-pulse {
  from { stroke: #ff4055; filter: drop-shadow(0 0 5px #ff4055); }
  to { stroke: #fff2a5; filter: drop-shadow(0 0 17px #ff4055); }
}

@keyframes armed-screen-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes paddle-hit {
  0% { filter: brightness(1); transform: scale(1); }
  40% { filter: brightness(2); transform: scale(.78, 1.16); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes spark-panic {
  from { scale: .75; rotate: -12deg; }
  to { scale: 1.38; rotate: 12deg; }
}

@keyframes mini-spark {
  50% { transform: scale(1.35) rotate(20deg); }
}

@keyframes message-pop {
  0% { opacity: 0; transform: scale(.7) rotate(-3deg); }
  17%, 66% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0); }
  12% { transform: translate(-7px, 3px) rotate(-.25deg); }
  26% { transform: translate(8px, -4px) rotate(.3deg); }
  42% { transform: translate(-5px, -2px); }
  58% { transform: translate(5px, 3px); }
  76% { transform: translate(-2px, 1px); }
}

@keyframes touch-nudge {
  0%, 100% { translate: 0 0; opacity: .45; }
  50% { translate: 0 -8px; opacity: .9; }
}

@media (pointer: coarse) {
  .touch-hint { display: block; }
  .back-link { font-size: 0; }
  .back-link::before { content: "←"; font-size: 1.15rem; }
}

@media (max-width: 620px) {
  .app { grid-template-rows: 45px minmax(0, 1fr); }
  .topbar { padding-inline: 10px; }
  .sound-button { width: 32px; height: 32px; padding: 7px; }
  .game-layout { gap: 7px; padding: 7px 5px 6px; }
  .scoreboard { grid-template-columns: 72px minmax(0, 1fr) 72px; gap: 4px; }
  .score, .timer-panel { min-height: 61px; border-radius: 9px; }
  .score { padding: 7px; }
  .timer-panel { padding: 7px 8px 8px; }
  .timer-copy { gap: 4px; margin-bottom: 5px; }
  .timer-copy span { max-width: 74px; line-height: 1.05; }
  .armed-status { padding: 2px 4px; letter-spacing: .06em; }
  .fuse-change { top: 6px; right: 27%; }
  .timer-track { height: 7px; }
  .game-footer { gap: 3px 12px; }
  .game-card { padding: 9px 14px 12px; border-radius: 14px; }
  .card-bomb { display: none; }
  .game-card h1 { font-size: clamp(1.55rem, 8vw, 2rem); line-height: .84; }
  .eyebrow { margin-bottom: 3px; }
  .game-card > p:not(.eyebrow) { margin-top: 6px; font-size: .6rem; line-height: 1.3; }
  .rule-row { gap: 3px 10px; margin-top: 6px; font-size: .5rem; }
  .primary-button { margin-top: 8px; padding: 7px 14px; font-size: .68rem; box-shadow: 0 4px 0 #b07313, 0 8px 18px #0005; }
}

@media (max-width: 360px) {
  .rule-row { display: none; }
  .game-card > p:not(.eyebrow) { max-width: 270px; }
  .armed-status { position: absolute; top: 4px; left: 50%; translate: -50% 0; font-size: .42rem; }
}

@media (max-height: 650px) and (min-width: 650px) {
  .app { grid-template-rows: 42px minmax(0, 1fr); }
  .game-layout { gap: 6px; padding-block: 6px; }
  .score, .timer-panel { min-height: 58px; }
  .timer-panel { padding-block: 6px 8px; }
  .score { padding-block: 5px; }
  .game-footer { display: none; }
  .card-bomb { width: 35px; height: 35px; margin-bottom: 4px; }
  .game-card { padding: 14px 24px 18px; }
  .game-card > p:not(.eyebrow) { margin-top: 10px; }
  .rule-row { margin-top: 9px; }
  .primary-button { margin-top: 10px; padding-block: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}