:root {
  color-scheme: light;
  --ink: #09090a;
  --blue: #3478be;
  --blue-deep: #2463a8;
  --paper: #f7f0dd;
  --cream: #fff6db;
  --capy: #c98d50;
  --capy-light: #e3b06c;
  --capy-dark: #7f5838;
  --orange: #f17a2f;
  --yellow: #ffe34d;
  --green: #85d96b;
  --red: #ee4a3b;
  --muted: #4e5f73;
  --line: rgba(9, 9, 10, 0.16);
  --shadow-hard: 7px 7px 0 var(--ink);
  --shadow-soft: 0 22px 55px rgba(9, 9, 10, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-width: 320px;
  overflow: hidden;
  background: var(--blue);
}

body {
  min-width: 320px;
  height: 100%;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family:
    ui-rounded, "Nunito", "Arial Rounded MT Bold", Inter, ui-sans-serif,
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(115deg, rgba(255, 246, 219, 0.08), transparent 44%),
    linear-gradient(0deg, rgba(9, 9, 10, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 9, 10, 0.06) 1px, transparent 1px),
    var(--blue);
  background-size: auto, 42px 42px, 42px 42px, auto;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.28;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(22deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(103deg, rgba(9, 9, 10, 0.11) 0 1px, transparent 1px 9px);
  mix-blend-mode: soft-light;
}

button,
a {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

[hidden] {
  display: none !important;
}

.app-shell {
  width: min(1520px, calc(100% - 32px));
  height: 100dvh;
  margin: 0 auto;
  padding: clamp(10px, 1.5vh, 18px) 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.top-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 104px;
  padding: 14px 18px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--cream);
  box-shadow: var(--shadow-hard);
}

.brand-lockup {
  flex: 1 1 auto;
  min-width: 0;
}

.eyebrow,
.panel-kicker {
  margin: 0 0 6px;
  color: var(--red);
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin-bottom: 0;
  max-width: 920px;
  font-size: clamp(2.1rem, 4.4vw, 3.55rem);
  font-weight: 1000;
  line-height: 0.96;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.35rem, 2.2vw, 2.35rem);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
}

.hud-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-status,
.rep-pill,
.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 1000;
  white-space: nowrap;
}

.status-dot,
.live-dot {
  width: 13px;
  height: 13px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
}

.status-dot[data-kind="live"],
.live-dot {
  background: var(--green);
}

.status-dot[data-kind="idle"] {
  background: var(--yellow);
}

.status-dot[data-kind="loading"] {
  background: var(--orange);
}

.status-dot[data-kind="error"] {
  background: var(--red);
}

.primary-action,
.music-action,
.community-action,
.leaderboard-action {
  min-height: 44px;
  padding: 0 18px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  font-weight: 1000;
  text-transform: lowercase;
}

.primary-action {
  background: var(--yellow);
}

.community-action {
  background: var(--green);
}

.music-action,
.leaderboard-action {
  background: #fff;
}

.music-action[aria-pressed="true"] {
  background: var(--green);
}

.primary-action:active,
.music-action:active,
.community-action:active,
.leaderboard-action:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.primary-action:disabled,
.music-action:disabled,
.community-action:disabled,
.leaderboard-action:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.game-arena {
  min-height: 0;
  margin-top: 0;
}

.rep-pill {
  color: var(--ink);
  text-shadow: none;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
}

.capybara-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 48%),
    var(--blue);
  box-shadow:
    0 34px 90px rgba(6, 25, 52, 0.36),
    0 2px 0 rgba(255, 255, 255, 0.24) inset;
  isolation: isolate;
}

.paper-grain,
.court-lines,
.court-lines span,
.action-burst,
.floor-shadow,
.cable-machine,
.capybara,
.score-badge,
.reward-feedback,
.countdown-overlay,
.live-panel {
  position: absolute;
}

.paper-grain {
  inset: 0;
  z-index: 0;
  opacity: 0.33;
  background-image:
    repeating-linear-gradient(7deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(96deg, rgba(9, 9, 10, 0.13) 0 1px, transparent 1px 13px);
  mix-blend-mode: soft-light;
}

.court-lines {
  inset: 8% 6% 12%;
  z-index: 1;
  border: 4px solid rgba(255, 246, 219, 0.55);
  border-left: 0;
  border-radius: 50% 0 0 50%;
  transform: skewX(-7deg);
}

.court-lines span {
  left: 0;
  right: 8%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 246, 219, 0.38);
}

.court-lines span:nth-child(1) {
  top: 25%;
}

.court-lines span:nth-child(2) {
  top: 52%;
}

.court-lines span:nth-child(3) {
  top: 78%;
}

.action-burst {
  z-index: 2;
  width: clamp(90px, 12vw, 170px);
  height: clamp(90px, 12vw, 170px);
  border: 5px solid var(--ink);
  background: var(--yellow);
  clip-path: polygon(50% 0, 60% 34%, 98% 24%, 68% 50%, 98% 76%, 60% 66%, 50% 100%, 40% 66%, 2% 76%, 32% 50%, 2% 24%, 40% 34%);
  filter: drop-shadow(5px 5px 0 rgba(9, 9, 10, 0.65));
}

.burst-a {
  top: 14%;
  left: 8%;
  transform: rotate(-15deg);
}

.burst-b {
  right: 18%;
  bottom: 21%;
  width: clamp(70px, 9vw, 124px);
  height: clamp(70px, 9vw, 124px);
  background: var(--orange);
  transform: rotate(18deg);
}

.cable-machine {
  inset: 7% 22% auto;
  z-index: 3;
  height: 50%;
}

.machine-top,
.pull-bar {
  position: absolute;
  left: 50%;
  border: 5px solid var(--ink);
  transform: translateX(-50%);
}

.machine-top {
  top: 0;
  width: min(78%, 620px);
  height: 24px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 4px 5px 0 rgba(9, 9, 10, 0.45);
}

.pull-bar {
  top: 34%;
  width: min(66%, 520px);
  height: 18px;
  border-radius: 999px;
  background: var(--yellow);
  transition: top 180ms ease;
}

.machine-line {
  position: absolute;
  top: 22px;
  width: 5px;
  height: 42%;
  border-radius: 999px;
  background: var(--ink);
}

.machine-line.left {
  left: 29%;
}

.machine-line.right {
  right: 29%;
}

.capybara-stage[data-phase="pull"] .pull-bar {
  top: 42%;
}

.capybara-stage[data-phase="squeeze"] .pull-bar {
  top: 50%;
}

.capybara-stage::after {
  position: absolute;
  inset: 0;
  z-index: 9;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 227, 77, 0.38), transparent 28%),
    radial-gradient(circle at 50% 55%, rgba(133, 217, 107, 0.26), transparent 34%);
}

.capybara-stage[data-reward-pulse]::after {
  opacity: 1;
  animation: stagePulse 520ms ease-out both;
}

.floor-shadow {
  left: 50%;
  bottom: 8%;
  z-index: 3;
  width: min(48vw, 620px);
  height: 56px;
  border-radius: 50%;
  background: rgba(5, 45, 91, 0.4);
  transform: translateX(-50%) skewX(-14deg);
}

.capybara {
  left: 50%;
  bottom: 9%;
  z-index: 5;
  width: clamp(280px, 34vw, 520px);
  height: clamp(330px, 39vw, 580px);
  transform: translateX(-50%) rotate(-1deg);
  transition: transform 180ms ease;
}

.capybara span {
  position: absolute;
  display: block;
}

.body,
.belly,
.head,
.snout,
.ear,
.arm,
.paw,
.leg,
.lat-spark {
  border: 5px solid var(--ink);
}

.body {
  left: 17%;
  bottom: 8%;
  width: 66%;
  height: 62%;
  border-radius: 46% 42% 34% 36%;
  background:
    repeating-radial-gradient(ellipse at 62% 38%, rgba(255, 246, 219, 0.16) 0 2px, transparent 2px 9px),
    var(--capy);
  box-shadow: inset -16px -18px 0 rgba(127, 88, 56, 0.22);
}

.belly {
  left: 34%;
  bottom: 16%;
  width: 36%;
  height: 34%;
  border-width: 4px;
  border-radius: 48%;
  background:
    repeating-radial-gradient(ellipse at 54% 46%, rgba(255, 246, 219, 0.2) 0 2px, transparent 2px 8px),
    var(--capy-light);
}

.head {
  left: 29%;
  top: 11%;
  width: 47%;
  height: 36%;
  border-radius: 47% 50% 42% 44%;
  background:
    repeating-radial-gradient(ellipse at 55% 48%, rgba(255, 246, 219, 0.18) 0 2px, transparent 2px 8px),
    var(--capy);
  box-shadow: inset -12px -11px 0 rgba(127, 88, 56, 0.18);
}

.snout {
  left: 43%;
  top: 26%;
  width: 25%;
  height: 17%;
  border-width: 0;
  border-radius: 48%;
  background: rgba(127, 88, 56, 0.38);
}

.snout::before,
.snout::after {
  position: absolute;
  content: "";
  background: var(--ink);
}

.snout::before {
  left: 26%;
  top: 33%;
  width: 14%;
  height: 8%;
  border-radius: 999px;
  transform: rotate(18deg);
}

.snout::after {
  right: 22%;
  top: 29%;
  width: 14%;
  height: 8%;
  border-radius: 999px;
  transform: rotate(-17deg);
}

.ear {
  top: 8%;
  width: 13%;
  height: 12%;
  border-radius: 50%;
  background: var(--capy-dark);
}

.ear.left {
  left: 28%;
}

.ear.right {
  right: 20%;
}

.eye {
  top: 20%;
  width: 17%;
  height: 18%;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}

.eye::after {
  position: absolute;
  left: 48%;
  top: 47%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: var(--ink);
  content: "";
}

.eye.left {
  left: 32%;
  transform: rotate(-8deg);
}

.eye.right {
  right: 18%;
  transform: rotate(8deg);
}

.arm {
  z-index: -1;
  width: 15%;
  height: 55%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(96deg, rgba(255, 246, 219, 0.15) 0 2px, transparent 2px 8px),
    var(--capy);
  transform-origin: 50% 92%;
  transition: transform 180ms ease, top 180ms ease, height 180ms ease;
}

.arm.left {
  left: 15%;
  top: 1%;
  transform: rotate(-38deg);
}

.arm.right {
  right: 11%;
  top: 1%;
  transform: rotate(38deg);
}

.paw {
  top: -2%;
  z-index: 7;
  width: 16%;
  height: 12%;
  border-radius: 48% 48% 42% 42%;
  background: var(--capy-dark);
  transition: top 180ms ease, left 180ms ease, right 180ms ease;
}

.paw.left {
  left: 4%;
}

.paw.right {
  right: 1%;
}

.leg {
  bottom: 0;
  width: 25%;
  height: 13%;
  border-radius: 999px;
  background: var(--capy-dark);
}

.leg.left {
  left: 20%;
}

.leg.right {
  right: 17%;
}

.lat-spark {
  top: 52%;
  z-index: 8;
  width: 12%;
  height: 22%;
  background: var(--yellow);
  opacity: 0.3;
  transform: skewY(-18deg);
}

.lat-spark.left {
  left: 20%;
}

.lat-spark.right {
  right: 17%;
  transform: skewY(18deg);
}

.capybara[data-phase="pull"] {
  transform: translateX(-50%) translateY(3%) rotate(1deg) scaleX(1.04);
}

.capybara[data-phase="pull"] .arm.left {
  top: 8%;
  transform: rotate(-62deg);
}

.capybara[data-phase="pull"] .arm.right {
  top: 8%;
  transform: rotate(62deg);
}

.capybara[data-phase="pull"] .paw.left {
  top: 19%;
  left: 10%;
}

.capybara[data-phase="pull"] .paw.right {
  top: 19%;
  right: 7%;
}

.capybara[data-phase="squeeze"] {
  transform: translateX(-50%) translateY(6%) rotate(0deg) scaleX(1.1);
}

.capybara[data-phase="squeeze"] .arm {
  height: 42%;
}

.capybara[data-phase="squeeze"] .arm.left {
  top: 21%;
  transform: rotate(-88deg);
}

.capybara[data-phase="squeeze"] .arm.right {
  top: 21%;
  transform: rotate(88deg);
}

.capybara[data-phase="squeeze"] .paw.left {
  top: 36%;
  left: 14%;
}

.capybara[data-phase="squeeze"] .paw.right {
  top: 36%;
  right: 11%;
}

.capybara[data-phase="squeeze"] .lat-spark {
  opacity: 1;
  animation: spark 0.42s infinite alternate;
}

.reward-feedback {
  left: var(--reward-x, 82%);
  top: var(--reward-y, 30%);
  z-index: 14;
  display: grid;
  place-items: center;
  width: clamp(130px, 12vw, 220px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.82) rotate(-4deg);
  transform-origin: center;
}

.reward-feedback.hidden {
  display: none;
}

.reward-feedback img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(7px 8px 0 rgba(9, 9, 10, 0.86))
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.3));
}

.reward-feedback b {
  position: absolute;
  right: 3%;
  bottom: 14%;
  display: grid;
  place-items: center;
  min-width: 92px;
  min-height: 58px;
  padding: 8px 12px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  line-height: 0.9;
}

.reward-feedback.is-showing {
  animation: rewardPop var(--reward-duration-ms, 1180ms) cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-feedback[data-reward="lat-hit"],
.reward-feedback[data-reward="combo"] {
  width: clamp(160px, 16vw, 260px);
}

.reward-feedback[data-reward="hold-flash"] {
  width: clamp(120px, 10vw, 190px);
}

.countdown-overlay {
  left: 50%;
  top: 50%;
  z-index: 20;
  display: grid;
  place-items: center;
  width: min(50vw, 520px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.countdown-overlay.hidden {
  display: none;
}

.countdown-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(10px 12px 0 rgba(9, 9, 10, 0.86))
    drop-shadow(0 28px 54px rgba(0, 0, 0, 0.34));
}

.countdown-overlay strong {
  display: grid;
  place-items: center;
  min-width: min(420px, 78vw);
  min-height: 150px;
  padding: 18px 34px;
  border: 5px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 10px 10px 0 var(--ink);
  font-size: clamp(3.2rem, 9vw, 7.4rem);
  font-weight: 1000;
  line-height: 0.9;
  text-align: center;
}

.countdown-overlay.is-showing {
  animation: countdownPop 860ms cubic-bezier(0.18, 0.92, 0.16, 1) both;
}

.countdown-overlay[data-step="start"].is-showing {
  animation-duration: 520ms;
}

.countdown-overlay[data-mode="final"] {
  top: 47%;
  z-index: 22;
  width: min(68vw, 680px);
}

.countdown-overlay[data-mode="final"] img {
  filter:
    drop-shadow(14px 16px 0 rgba(9, 9, 10, 0.92))
    drop-shadow(0 34px 66px rgba(238, 74, 59, 0.42));
}

.countdown-overlay[data-mode="final"].is-showing {
  animation: finalCountdownPanic 920ms cubic-bezier(0.16, 0.95, 0.18, 1) both;
}

.score-badge {
  top: 22px;
  right: 22px;
  z-index: 8;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 100px;
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--ink);
}

.score-badge span,
.metric-card span,
.signal-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.score-badge strong {
  font-size: 2.55rem;
  line-height: 0.9;
}

.live-panel {
  right: 24px;
  bottom: 24px;
  z-index: 15;
  width: clamp(360px, 30vw, 560px);
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 30px;
  background: rgba(250, 250, 252, 0.72);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  backdrop-filter: blur(22px) saturate(1.35);
}

.live-head {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.48);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
  font-weight: 850;
  text-transform: lowercase;
  backdrop-filter: blur(14px);
}

.camera-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 24px;
  background: #111820;
}

#webcam,
#poseCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#webcam {
  z-index: 0;
  transform: scaleX(-1);
}

#poseCanvas {
  z-index: 1;
  background: transparent;
}

.camera-empty {
  position: absolute;
  inset: auto 12px 12px 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 18px;
  color: #fff;
  background: rgba(0, 0, 0, 0.48);
  font-size: 0.86rem;
  font-weight: 850;
  backdrop-filter: blur(14px);
}

.camera-empty span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  font-size: 0.72rem;
}

.camera-empty.hidden {
  display: none;
}

.live-head .live-dot {
  width: 10px;
  height: 10px;
  border: 0;
  box-shadow: 0 0 0 3px rgba(133, 217, 107, 0.2);
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.signal-grid div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}

.signal-grid span {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 0.7rem;
}

meter {
  width: 100%;
  height: 12px;
}

meter::-webkit-meter-bar {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
}

meter::-webkit-meter-optimum-value {
  border-radius: 999px;
  background: var(--green);
}

.phase-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.phase-chip {
  min-width: 0;
  min-height: 72px;
  padding: 12px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--cream);
  box-shadow: 5px 5px 0 rgba(9, 9, 10, 0.8);
  cursor: pointer;
  text-align: left;
}

.phase-chip span {
  display: block;
  color: var(--red);
  font-size: 0.76rem;
  font-weight: 1000;
}

.phase-chip strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.05;
}

.phase-chip.active {
  background: var(--yellow);
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}

.coach-dock {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 14px;
  margin-top: 16px;
}

.metric-card {
  min-width: 0;
  min-height: 142px;
  padding: 16px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
}

.metric-card span {
  margin-bottom: 8px;
}

.metric-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(1.45rem, 2.5vw, 2.6rem);
  font-weight: 1000;
  line-height: 0.98;
}

.metric-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.45;
}

.phase-card {
  background: #fff;
}

.research-card {
  background: var(--cream);
}

@keyframes spark {
  from {
    transform: translateY(0) skewY(-18deg);
  }

  to {
    transform: translateY(-8px) skewY(18deg);
  }
}

@keyframes rewardPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42) rotate(-12deg);
  }

  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14) rotate(4deg);
  }

  34% {
    transform: translate(-50%, -50%) scale(0.98) rotate(-2deg);
  }

  76% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -66%) scale(0.9) rotate(7deg);
  }
}

@keyframes stagePulse {
  from {
    filter: saturate(1.45) contrast(1.08);
  }

  to {
    filter: saturate(1) contrast(1);
  }
}

@keyframes readyPulse {
  from {
    box-shadow: 4px 4px 0 var(--ink);
    transform: translateY(0);
  }

  to {
    box-shadow: 7px 7px 0 var(--ink);
    transform: translateY(-2px);
  }
}

@keyframes readyClickPulse {
  0%,
  100% {
    box-shadow: 5px 5px 0 var(--ink);
    transform: translate(0, 0) scale(1);
  }

  42% {
    box-shadow: 8px 8px 0 var(--ink);
    transform: translate(-2px, -2px) scale(1.025);
  }

  58% {
    box-shadow: 4px 4px 0 var(--ink);
    transform: translate(1px, 1px) scale(0.995);
  }
}

@keyframes countdownPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42) rotate(-10deg);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.16) rotate(3deg);
  }

  54% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72) rotate(8deg);
  }
}

@keyframes finalCountdownPanic {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.32) rotate(-13deg);
  }

  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.22) rotate(5deg);
  }

  36% {
    transform: translate(calc(-50% - 8px), calc(-50% + 4px)) scale(1.02) rotate(-3deg);
  }

  58% {
    transform: translate(calc(-50% + 8px), calc(-50% - 3px)) scale(1.04) rotate(3deg);
  }

  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.98) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.76) rotate(9deg);
  }
}

@keyframes timerAlarm {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(2px, -2px);
  }
}

@keyframes replaySpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1080px) {
  .top-hud {
    align-items: flex-start;
    flex-direction: column;
  }

  .hud-actions {
    justify-content: space-between;
    width: 100%;
  }

  .capybara-stage {
    min-height: 0;
  }

  .cable-machine {
    inset-inline: 12%;
  }

  .score-badge {
    left: 18px;
    right: auto;
  }

  .live-panel {
    width: clamp(340px, 46vw, 500px);
  }

  .coach-dock {
    grid-template-columns: 1fr 1fr;
  }

  .research-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 20px, 1520px);
    padding-top: 10px;
  }

  .top-hud {
    min-height: 0;
    padding: 12px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .hud-actions,
  .hero-status,
  .music-action,
  .community-action,
  .leaderboard-action,
  .primary-action {
    width: 100%;
  }

  .hero-status {
    white-space: normal;
  }

  .primary-action {
    justify-content: center;
  }

  .capybara-stage {
    min-height: 0;
  }

  .cable-machine {
    inset: 8% 3% auto;
  }

  .capybara {
    bottom: 28%;
    width: min(82vw, 360px);
    height: min(96vw, 420px);
  }

  .floor-shadow {
    bottom: 27%;
    width: 78vw;
  }

  .score-badge {
    top: 14px;
    left: 14px;
    min-width: 88px;
  }

  .reward-feedback,
  .reward-feedback[data-reward="lat-hit"],
  .reward-feedback[data-reward="combo"] {
    width: min(44vw, 210px);
  }

  .reward-feedback b {
    min-width: 72px;
    min-height: 46px;
    border-width: 3px;
    font-size: 1.25rem;
  }

  .countdown-overlay {
    width: min(74vw, 330px);
  }

  .countdown-overlay strong {
    min-width: min(300px, 74vw);
    min-height: 104px;
    padding: 12px 22px;
  }

  .score-badge strong {
    font-size: 2rem;
  }

  .live-panel {
    right: 12px;
    bottom: 12px;
    left: auto;
    width: min(420px, calc(100% - 24px));
    padding: 8px;
  }

  .phase-strip,
  .coach-dock {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 120px;
  }
}

@media (max-width: 430px) {
  h1 {
    font-size: 2rem;
  }

  .capybara-stage {
    min-height: 0;
  }

  .signal-grid {
    gap: 6px;
  }

  .signal-grid div {
    padding: 6px;
  }
}

.hud-stat {
  display: grid;
  gap: 1px;
  min-width: 82px;
  min-height: 52px;
  padding: 7px 11px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
}

.hud-stat span {
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.hud-stat strong {
  font-size: 1.55rem;
  font-weight: 1000;
  line-height: 1;
}

.timer-stat {
  background: var(--yellow);
}

.app-shell[data-final-countdown="true"] .timer-stat {
  color: #fff;
  background: var(--red);
  box-shadow: 6px 6px 0 var(--ink);
  animation: timerAlarm 420ms steps(2, end) infinite;
}

.app-shell[data-final-countdown="true"] .timer-stat span {
  color: var(--yellow);
}

.start-action {
  position: relative;
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 158px;
  min-height: 54px;
  overflow: hidden;
  border-radius: 16px;
  font-size: 1.04rem;
  line-height: 1;
  text-align: center;
  text-transform: none;
}

.start-action::before {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 0;
  content: "";
  pointer-events: none;
  background: var(--green);
  transition: width 260ms ease;
}

.start-action > * {
  position: relative;
  z-index: 1;
}

.start-action-main,
.start-action-sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-action-sub {
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.05;
  opacity: 0.78;
}

.coach-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  background: var(--blue-deep);
}

.capybara-stage::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 9, 10, 0.38), rgba(9, 9, 10, 0.04) 42%, rgba(9, 9, 10, 0.08)),
    linear-gradient(0deg, rgba(9, 9, 10, 0.3), transparent 34%);
}

.capybara-stage .paper-grain {
  z-index: 4;
  opacity: 0.2;
}

.capybara-stage .court-lines,
.capybara-stage .cable-machine,
.capybara-stage .capybara,
.capybara-stage .floor-shadow {
  display: none;
}

.capybara-stage .action-burst {
  z-index: 5;
}

.challenge-copy {
  position: absolute;
  left: clamp(18px, 4vw, 54px);
  bottom: clamp(210px, 20vw, 250px);
  z-index: 7;
  max-width: min(540px, 50vw);
  color: #fff;
  text-shadow: 4px 4px 0 var(--ink);
}

.challenge-copy p {
  margin-bottom: 7px;
  color: var(--yellow);
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  font-weight: 1000;
  line-height: 1;
}

.challenge-copy strong {
  display: block;
  max-width: 11ch;
  font-size: clamp(2.9rem, 7vw, 7.6rem);
  font-weight: 1000;
  line-height: 0.88;
}

.challenge-copy span {
  display: block;
  max-width: 460px;
  margin-top: 16px;
  color: var(--cream);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 900;
  line-height: 1.25;
}

.cue-badge {
  position: absolute;
  left: 50%;
  top: 24px;
  z-index: 8;
  min-width: 180px;
  max-width: min(520px, calc(100% - 48px));
  padding: 12px 18px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--yellow);
  box-shadow: 6px 6px 0 var(--ink);
  font-size: clamp(1rem, 2vw, 1.65rem);
  font-weight: 1000;
  text-align: center;
  transform: translateX(-50%);
}

.capybara-stage .phase-strip {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 11;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(520px, calc(100% - 640px));
  margin-top: 0;
}

.capybara-stage .phase-chip {
  min-height: 62px;
  padding: 10px;
  background: rgba(255, 246, 219, 0.94);
}

.capybara-stage .phase-chip strong {
  font-size: clamp(0.92rem, 1.2vw, 1.1rem);
}

.start-overlay,
.result-overlay {
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  top: 28px;
  z-index: 12;
  display: grid;
  gap: 12px;
  width: min(430px, calc(100% - 36px));
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 26px;
  background: rgba(255, 250, 235, 0.86);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(22px) saturate(1.25);
}

.result-overlay {
  top: 50%;
  left: 50%;
  right: auto;
  width: min(460px, calc(100% - 34px));
  text-align: center;
  transform: translate(-50%, -50%);
}

.start-overlay p,
.result-overlay p {
  margin-bottom: 0;
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.start-overlay strong,
.result-overlay strong {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  font-weight: 1000;
  line-height: 0.98;
  word-break: keep-all;
}

.start-overlay span,
.result-overlay span {
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.38;
}

.start-overlay .start-action,
.result-overlay .start-action {
  width: 100%;
}

.start-overlay[data-mode="idle"] .start-action {
  background: var(--green);
}

.start-overlay[data-mode="idle"] .start-action:not(:disabled) {
  animation: readyClickPulse 1120ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.start-overlay[data-mode="resources"] .start-action {
  background: var(--yellow);
}

.start-overlay[data-mode="resources"] .start-action::before {
  width: var(--resource-progress-width, 0%);
}

.start-overlay[data-mode="resources"] .start-action:disabled {
  opacity: 1;
}

.start-overlay[data-mode="ready"],
.start-overlay[data-mode="locked"] {
  border-color: rgba(24, 183, 160, 0.72);
  background: rgba(244, 255, 248, 0.9);
}

.start-overlay[data-mode="ready"] .start-action,
.start-overlay[data-mode="locked"] .start-action {
  color: #fff;
  background: var(--red);
}

.start-overlay[data-mode="ready"] .start-action {
  animation: readyPulse 980ms ease-in-out infinite alternate;
}

.start-controls {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.start-controls .start-action {
  flex: 1 1 auto;
  width: auto;
}

.start-controls .sound-toggle {
  flex: 0 0 122px;
  min-height: 54px;
  padding: 0 12px;
  text-transform: none;
}

.hidden {
  display: none !important;
}

.app-shell[data-game-state="playing"] .start-overlay,
.app-shell[data-game-state="playing"] .challenge-copy,
.app-shell[data-game-state="countdown"] .start-overlay,
.app-shell[data-game-state="countdown"] .challenge-copy {
  display: none;
}

.app-shell[data-game-state="playing"] .cue-badge {
  top: 18px;
}

.app-shell[data-game-state="playing"] .live-panel,
.app-shell[data-game-state="ready"] .live-panel,
.app-shell[data-game-state="countdown"] .live-panel {
  width: clamp(360px, 28vw, 520px);
}

.app-shell:not([data-game-state="playing"]):not([data-game-state="ready"]):not([data-game-state="countdown"]) .signal-grid {
  display: none;
}

.app-shell[data-game-state="ended"] .challenge-copy {
  opacity: 0.45;
}

@media (max-width: 1080px) {
  .hud-stat {
    flex: 1 1 86px;
  }

  .challenge-copy {
    max-width: 58vw;
  }
}

@media (max-width: 760px) {
  .hud-stat,
  .hero-status,
  .community-action,
  .leaderboard-action,
  .music-action {
    flex: 1 1 calc(50% - 8px);
    width: auto;
  }

  .start-action {
    width: 100%;
  }

  .start-controls {
    flex-direction: column;
  }

  .start-controls .sound-toggle {
    flex-basis: auto;
    width: 100%;
  }

  .capybara-stage {
    min-height: 0;
  }

  .coach-video {
    height: 100%;
    object-position: center 32%;
  }

  .capybara-stage::after {
    background:
      linear-gradient(180deg, rgba(9, 9, 10, 0.04), rgba(9, 9, 10, 0.18) 45%, rgba(9, 9, 10, 0.72)),
      linear-gradient(90deg, rgba(9, 9, 10, 0.3), transparent 48%);
  }

  .challenge-copy {
    left: 18px;
    right: 18px;
    bottom: 410px;
    max-width: none;
  }

  .challenge-copy strong {
    max-width: 9ch;
    font-size: 3rem;
  }

  .challenge-copy span {
    max-width: 300px;
  }

  .cue-badge {
    top: 12px;
    min-width: 150px;
    padding: 9px 13px;
  }

  .start-overlay {
    top: 12px;
    right: 12px;
    bottom: auto;
    left: 12px;
    width: auto;
    max-height: calc(100% - 24px);
    gap: 8px;
    overflow: auto;
    padding: 12px;
  }

  .capybara-stage .phase-strip {
    display: none;
  }

  .capybara-stage .phase-chip {
    min-height: 52px;
    padding: 8px;
  }

  .capybara-stage .phase-chip strong {
    font-size: 0.86rem;
  }

  .live-panel,
  .app-shell[data-game-state="playing"] .live-panel,
  .app-shell[data-game-state="ready"] .live-panel,
  .app-shell[data-game-state="countdown"] .live-panel {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    border-radius: 26px;
  }

  .app-shell:not([data-game-state="playing"]):not([data-game-state="ready"]):not([data-game-state="countdown"]) .live-panel {
    display: none;
  }
}

@media (max-width: 430px) {
  .hud-actions {
    gap: 8px;
  }

  .hud-stat strong {
    font-size: 1.32rem;
  }

  .start-overlay strong,
  .result-overlay strong {
    font-size: 1.55rem;
  }
}

.leaderboard-form {
  display: grid;
  gap: 8px;
  text-align: left;
}

.score-rules {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.score-rules b {
  font-size: 0.95rem;
  font-weight: 1000;
  line-height: 1.1;
}

.score-rules span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.28;
}

.leaderboard-form label {
  color: var(--red);
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.leaderboard-form div {
  display: flex;
  gap: 8px;
}

.leaderboard-form input {
  min-width: 0;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 900;
}

.leaderboard-form .primary-action {
  min-width: 88px;
  min-height: 46px;
  padding-inline: 12px;
}

.result-overlay .leaderboard-form {
  gap: 10px;
}

.result-overlay .leaderboard-form div {
  align-items: stretch;
  gap: 10px;
}

.result-overlay .leaderboard-form input {
  min-height: 58px;
  font-size: 1.02rem;
}

.result-overlay .leaderboard-submit {
  min-width: 124px;
  min-height: 58px;
  padding-inline: 18px;
  color: #fff;
  background: var(--red);
  box-shadow: 7px 7px 0 var(--ink);
  font-size: 1.16rem;
  text-transform: none;
}

.result-overlay .replay-action {
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 10px;
  min-height: 66px;
  color: var(--ink);
  background: var(--green);
  box-shadow: 7px 7px 0 var(--ink);
  font-size: 1.22rem;
}

.replay-arrow {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  line-height: 1;
  animation: replaySpin 1.3s linear infinite;
}

.leaderboard-modal,
.community-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 20, 42, 0.48);
  backdrop-filter: blur(16px);
}

.leaderboard-panel,
.community-panel {
  display: grid;
  gap: 16px;
  width: min(1040px, 100%);
  max-height: min(720px, calc(100dvh - 48px));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 28px;
  background: rgba(255, 250, 235, 0.92);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.35);
}

.leaderboard-panel-head,
.community-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.leaderboard-panel h2,
.community-panel h2 {
  font-size: clamp(1.4rem, 2.5vw, 2.8rem);
}

.leaderboard-close,
.community-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 1000;
  line-height: 1;
}

.community-panel {
  width: min(560px, 100%);
  justify-items: stretch;
}

.community-qr {
  display: block;
  width: min(100%, 430px);
  max-height: min(68dvh, 620px);
  justify-self: center;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  box-shadow: 7px 7px 0 var(--ink);
}

.leaderboard-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard-list li {
  display: grid;
  grid-template-columns: auto 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 76px;
  padding: 8px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
}

.leaderboard-list img,
.leaderboard-shot {
  width: 64px;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink);
  border-radius: 6px;
  object-fit: cover;
  background: #111820;
}

.leaderboard-shot {
  display: grid;
  place-items: center;
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 1000;
}

.leaderboard-rank {
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 1000;
}

.leaderboard-list strong,
.leaderboard-list span,
.leaderboard-list b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.leaderboard-list strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 1000;
  line-height: 1.05;
}

.leaderboard-list div span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.leaderboard-list b {
  font-size: 1.45rem;
  font-weight: 1000;
}

.leaderboard-empty {
  grid-column: 1 / -1;
  justify-content: center;
  color: var(--muted);
  font-weight: 1000;
  text-align: center;
}

@media (max-width: 1080px) {
  .leaderboard-panel,
  .community-panel {
    grid-template-columns: 1fr;
  }

  .leaderboard-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .community-modal {
    padding: 14px;
  }

  .community-panel {
    max-height: calc(100dvh - 28px);
    padding: 14px;
  }

  .community-qr {
    width: min(100%, 360px);
    max-height: 62dvh;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .leaderboard-list {
    grid-template-columns: 1fr;
  }

  .leaderboard-list li {
    grid-template-columns: auto 58px minmax(0, 1fr) auto;
  }

  .leaderboard-list img,
  .leaderboard-shot {
    width: 58px;
  }
}

@media (max-width: 430px) {
  .leaderboard-form div {
    display: grid;
  }

  .leaderboard-form .primary-action {
    width: 100%;
  }

  .leaderboard-list li {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .leaderboard-list img,
  .leaderboard-shot {
    display: none;
  }
}