:root {
  color-scheme: light;
  --paper: #f2efe7;
  --paper-strong: #e9e4d9;
  --ink: #0a0d11;
  --muted: #66665f;
  --film: #06080b;
  --film-soft: #10141a;
  --white: #f8f7f2;
  --blue: #0b5ed7;
  --sky: #77ceff;
  --line: rgba(10, 13, 17, 0.18);
  --line-dark: rgba(255, 255, 255, 0.2);
  --hand-left: #77ceff;
  --hand-right: #f2c94c;
  --success: #2f9665;
  --danger: #d94848;
  --font-ui: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-editorial: Georgia, "Times New Roman", serif;
  --radius-control: 3px;
  --radius-media: 8px;
  --tv-safe-x: clamp(48px, 5vw, 96px);
  --tv-safe-y: clamp(32px, 4.5vh, 56px);
  --topbar-height: 82px;
  --pairing-width: clamp(520px, 40vw, 720px);
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

/*
 * Smart-TV baseline. Older embedded Chromium engines understand flexbox but
 * may discard custom properties, grid, clamp(), aspect-ratio and inset. These
 * concrete values come first; modern declarations below replace them.
 */
html,
body,
.display-app {
  background: #f2efe7;
  color: #0a0d11;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.display-app { min-height: 100vh; }

.topbar {
  height: 82px;
  flex: 0 0 82px;
  padding: 0 64px;
  border-bottom: 1px solid rgba(10, 13, 17, 0.18);
  background: #f2efe7;
}

.topbar::before {
  width: 520px;
  background: #06080b;
}

.topbar-actions {
  height: 100%;
  background: #06080b;
}

.brand { color: #0a0d11; }
.brand small { color: #66665f; }
.brand-mark { background: #0b5ed7; }
.brand-mark i { background: #f8f7f2; }
.controller-entry { background: #06080b; color: #f8f7f2; }
.controller-entry span { color: #77ceff; }
.connection-pill { background: #f2efe7; color: #0a0d11; }
.display-main { min-height: calc(100vh - 82px); }

.lobby {
  display: flex;
  min-height: calc(100vh - 82px);
  background: #f2efe7;
}

.lobby-copy {
  flex: 1 1 auto;
  padding: 40px 64px;
}

.lobby h1 { color: #0a0d11; font-size: 64px; }
.eyebrow,
h1 em { color: #0b5ed7; }
.steps { display: flex; }
.steps li { flex: 1 1 0; }

.pairing-panel {
  flex: 0 0 520px;
  padding: 40px;
  background: #06080b;
  color: #f8f7f2;
}

.pairing-heading,
.scan-label { color: #f8f7f2; }

.qr-frame {
  display: flex;
  width: 350px;
  height: 350px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 8px solid #f2efe7;
  border-radius: 8px;
  background: #fff;
}

.qr-code,
.qr-code img,
.qr-code svg {
  width: 100%;
  height: 100%;
}

.manual-code {
  width: 370px;
  background: #f2efe7;
  color: #0a0d11;
}

.arena-section {
  min-height: calc(100vh - 82px);
  padding: 20px 64px 24px;
  background: #06080b;
  color: #f8f7f2;
}

.arena-shell {
  width: 100%;
  height: calc(100vh - 106px);
  background: #10141a;
}

.arena-shell.forest-impact {
  animation: forestImpact 360ms ease-out both;
}

/* Continuous games own their cinematic HUD inside the Canvas. Hiding the
   generic diagnostics prevents a duplicated title/score layer and keeps the
   experience focused on the current movement. */
.display-app[data-game-mode="night-forest"] .arena-hud,
.display-app[data-game-mode="wall-dodge"] .arena-hud,
.display-app[data-game-mode="stay-in-light"] .arena-hud,
.display-app[data-game-mode="last-on-floor"] .arena-hud,
.display-app[data-game-mode="gummy-night-shift"] .arena-hud,
.display-app[data-game-mode="circle-munch"] .arena-hud,
.display-app[data-game-mode="night-forest"] .legend,
.display-app[data-game-mode="wall-dodge"] .legend,
.display-app[data-game-mode="stay-in-light"] .legend,
.display-app[data-game-mode="last-on-floor"] .legend,
.display-app[data-game-mode="gummy-night-shift"] .legend,
.display-app[data-game-mode="circle-munch"] .legend,
.display-app[data-game-mode="night-forest"] .video-status,
.display-app[data-game-mode="wall-dodge"] .video-status,
.display-app[data-game-mode="stay-in-light"] .video-status,
.display-app[data-game-mode="last-on-floor"] .video-status,
.display-app[data-game-mode="gummy-night-shift"] .video-status,
.display-app[data-game-mode="circle-munch"] .video-status {
  display: none;
}

.display-app[data-game-mode="circle-munch"] .arena-shell {
  background: #f4f1e9 url("/ruch/assets/game/glowtail/glowtail-flowfield-v2.webp") center / cover no-repeat;
}

.display-app[data-game-mode="circle-munch"] #arenaCanvas {
  background: #f4f1e9 url("/ruch/assets/game/glowtail/glowtail-flowfield-v2.jpg") center / cover no-repeat;
}

.display-app[data-game-mode="circle-munch"][data-view="game"] .arena-section,
.display-app[data-game-mode="circle-munch"][data-view="game"] .arena-shell {
  background-color: #f4f1e9;
}

.display-app[data-game-mode="circle-munch"][data-view="game"] #remoteVideo,
.display-app[data-game-mode="circle-munch"][data-view="game"] #compatPreview,
.display-app[data-game-mode="circle-munch"][data-view="game"] .camera-scrim {
  visibility: hidden;
}

.glowtail-hud {
  display: none;
}

.display-app[data-game-mode="circle-munch"][data-view="game"] .glowtail-hud {
  position: absolute;
  z-index: 10;
  top: max(20px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  max-width: calc(100% - 48px);
  overflow: hidden;
  border: 1px solid rgba(221, 246, 242, 0.38);
  border-radius: 999px 38px 999px 42px;
  background:
    linear-gradient(101deg, rgba(19, 34, 51, 0.9), rgba(32, 36, 63, 0.84) 48%, rgba(22, 50, 57, 0.88));
  color: #f8fbf5;
  box-shadow: 0 18px 48px rgba(39, 62, 73, 0.2), inset 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(1.18);
  pointer-events: none;
  transform: translateX(-50%);
}

.glowtail-hud > span {
  display: grid;
  min-width: clamp(112px, 10.5vw, 176px);
  gap: 5px;
  padding: 11px 18px 12px;
  text-align: center;
}

.glowtail-hud > span + span {
  border-left: 1px solid rgba(222, 247, 241, 0.16);
}

.glowtail-hud > span[hidden] {
  display: none;
}

.glowtail-hud small {
  color: rgba(228, 243, 241, 0.68);
  font-size: clamp(9px, 0.7vw, 12px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.glowtail-hud strong {
  color: #f8fbf5;
  font-size: clamp(22px, 1.8vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.16);
  white-space: nowrap;
}

.glowtail-hud [data-metric="banked"] strong { color: #ffd983; }
.glowtail-hud [data-metric="risk"] strong { color: #ff9cbf; }
.glowtail-hud [data-metric="tail"] strong { color: #9ff6e5; }
.glowtail-hud [data-metric="flow"] strong { color: #d8c4ff; }
.glowtail-hud [data-metric="best"] strong { color: #f8fbf5; }

.glowtail-hud[data-tail-state="full"] [data-metric="tail"] {
  background: linear-gradient(135deg, rgba(89, 221, 197, 0.16), rgba(189, 150, 247, 0.18));
  box-shadow: inset 0 0 28px rgba(145, 245, 228, 0.08);
}

.glowtail-hud[data-tail-state="full"] [data-metric="tail"] strong {
  color: #c5fff2;
  text-shadow: 0 0 16px rgba(133, 244, 224, 0.26);
}

.glowtail-hud[data-risk-state="high"] [data-metric="risk"] {
  background: rgba(211, 72, 129, 0.16);
  animation: glowtailRiskPulse 900ms ease-in-out infinite;
}

.glowtail-hud[data-flow-state="high"] [data-metric="flow"] {
  background: linear-gradient(135deg, rgba(146, 236, 218, 0.16), rgba(199, 163, 255, 0.2));
  box-shadow: inset 0 0 28px rgba(202, 180, 255, 0.1);
  animation: glowtailFlowBreathe 1.8s ease-in-out infinite;
}

.glowtail-feedback {
  position: absolute;
  z-index: 12;
  top: 27%;
  left: 50%;
  min-width: min(360px, 68vw);
  padding: 12px 24px 14px;
  border: 1px solid rgba(242, 254, 248, 0.42);
  border-radius: 999px;
  background: rgba(22, 40, 55, 0.86);
  color: #e5fff8;
  box-shadow: 0 14px 38px rgba(57, 91, 107, 0.2), inset 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: glowtailFeedback 720ms ease-out both;
}

.glowtail-feedback[hidden] { display: none; }

.glowtail-feedback strong {
  font-size: clamp(28px, 3.5vw, 58px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(155, 246, 226, 0.24);
}

.glowtail-feedback[data-feedback="bank"] {
  border-color: rgba(255, 222, 139, 0.52);
  background: rgba(64, 50, 40, 0.88);
  color: #ffe7a8;
}

.glowtail-feedback[data-feedback="mote"],
.glowtail-feedback[data-feedback="flow"] {
  border-color: rgba(166, 244, 229, 0.5);
  background: rgba(24, 52, 59, 0.84);
  color: #baffed;
}

.glowtail-feedback[data-feedback="branch"],
.glowtail-feedback[data-feedback="branch-risk"] {
  border-color: rgba(221, 186, 255, 0.52);
  background: rgba(47, 35, 65, 0.87);
  color: #e5cfff;
  box-shadow: 0 14px 40px rgba(86, 61, 111, 0.22);
}

.glowtail-feedback[data-feedback="tail-hit"],
.glowtail-feedback[data-feedback="trace-miss"] {
  border-color: rgba(241, 153, 176, 0.46);
  background: rgba(61, 37, 50, 0.88);
  color: #ffc1d1;
}

@keyframes glowtailFeedback {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.015); }
  76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(0.98); }
}

@keyframes glowtailRiskPulse {
  50% { background: rgba(211, 72, 129, 0.28); }
}

@keyframes glowtailFlowBreathe {
  50% { box-shadow: inset 0 0 34px rgba(202, 180, 255, 0.22); }
}

@media (prefers-reduced-motion: reduce) {
  .glowtail-feedback,
  .glowtail-hud[data-risk-state="high"] [data-metric="risk"],
  .glowtail-hud[data-flow-state="high"] [data-metric="flow"] { animation: none; }
}

/* The WebGL scene deliberately has no second GUI texture. Reuse the host HUD
   for the two simulation facts that must stay readable on a TV. */
.display-app[data-game-mode="gummy-night-shift"][data-runner-engine="3d"][data-view="game"] .arena-hud {
  display: flex;
}

.display-app[data-game-mode="gummy-night-shift"][data-runner-engine="3d"] .scoreboard span:nth-child(n + 3) {
  display: none;
}

.display-app[data-game-mode="gummy-night-shift"][data-runner-engine="3d"] .arena-name,
.display-app[data-game-mode="gummy-night-shift"][data-runner-engine="3d"] .scoreboard {
  border-color: rgba(192, 141, 255, 0.28);
  background: rgba(9, 5, 19, 0.72);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
}

/* The Gummy engine keeps its cinematic world warm while the host owns setup
   and countdown.  Use the same factory plate as a static backdrop in those
   views so the engine's ready prompt/player cannot bleed through the host
   coach as a second, competing instruction layer. */
.display-app[data-game-mode="gummy-night-shift"] .arena-shell {
  background:
    linear-gradient(rgba(6, 3, 15, 0.36), rgba(6, 3, 15, 0.52)),
    url("/ruch/assets/game/gummy/gummy-factory-horizon-v2.webp") center / cover no-repeat,
    #08040f;
}

.display-app[data-game-mode="gummy-night-shift"][data-view="calibration"] #arenaCanvas,
.display-app[data-game-mode="gummy-night-shift"][data-view="ready"] #arenaCanvas,
.display-app[data-game-mode="gummy-night-shift"][data-view="countdown"] #arenaCanvas,
.display-app[data-game-mode="gummy-night-shift"][data-view="game-over"] #arenaCanvas,
.display-app[data-game-mode="gummy-night-shift"][data-runner-engine="probing"] #arenaCanvas {
  visibility: hidden;
}

/* Gummy reuses the one optional WebGL surface already owned by Trzy Tory.
   Canvas remains the live startup/fatal fallback and disappears only after
   the shared renderer passes its on-device benchmark. */
.display-app[data-game-mode="gummy-night-shift"][data-view="game"][data-runner-engine="3d"] #arenaCanvas {
  visibility: hidden;
}

.display-app[data-game-mode="gummy-night-shift"][data-view="game"][data-runner-engine="3d"] .arena-shell::before {
  position: absolute;
  z-index: 4;
  top: max(5%, 38px);
  left: 50%;
  min-width: min(310px, 46vw);
  padding: 10px 24px;
  border: 1px solid rgba(114, 243, 207, 0.64);
  border-radius: 999px;
  background: rgba(5, 17, 21, 0.7);
  box-shadow: 0 0 32px rgba(114, 243, 207, 0.18);
  color: #72f3cf;
  content: "RUN";
  font: 900 clamp(14px, 1.2vw, 24px)/1 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: 0.16em;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.display-app[data-game-mode="gummy-night-shift"][data-view="game"][data-runner-engine="3d"][data-gummy-eyes="amber"] .arena-shell::before {
  border-color: rgba(255, 194, 78, 0.84);
  background: rgba(28, 18, 3, 0.78);
  box-shadow: 0 0 38px rgba(255, 194, 78, 0.26);
  color: #ffc24e;
  content: "GET READY";
  animation: gummyCoachReady 850ms ease-in-out infinite;
}

.display-app[data-game-mode="gummy-night-shift"][data-view="game"][data-runner-engine="3d"][data-gummy-eyes="red"] .arena-shell::before {
  border-color: rgba(255, 69, 111, 0.92);
  background: rgba(31, 3, 15, 0.86);
  box-shadow: 0 0 46px rgba(255, 69, 111, 0.34);
  color: #ff547b;
  content: "FREEZE!";
  animation: gummyCoachFreeze 620ms ease-in-out infinite;
}

html[lang="pl"] .display-app[data-game-mode="gummy-night-shift"][data-view="game"][data-runner-engine="3d"] .arena-shell::before { content: "BIEGNIJ"; }
html[lang="pl"] .display-app[data-game-mode="gummy-night-shift"][data-view="game"][data-runner-engine="3d"][data-gummy-eyes="amber"] .arena-shell::before { content: "PRZYGOTUJ SIĘ"; }
html[lang="pl"] .display-app[data-game-mode="gummy-night-shift"][data-view="game"][data-runner-engine="3d"][data-gummy-eyes="red"] .arena-shell::before { content: "ZASTYŃ!"; }

@keyframes gummyCoachReady {
  0%, 100% { opacity: 0.72; transform: translateX(-50%) scale(0.98); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.02); }
}

@keyframes gummyCoachFreeze {
  0%, 100% { opacity: 0.78; transform: translateX(-50%) scale(0.97); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .display-app[data-game-mode="gummy-night-shift"][data-view="game"][data-runner-engine="3d"] .arena-shell::before,
  .gummy-motion-guide[data-motion-state="jump"] {
    animation: none;
    transition: none;
  }

  /* Reduced motion freezes the demonstrated pose instead of returning both
     arms to neutral. Direction remains unambiguous without animation. */
  .display-app[data-game-mode="three-tracks"][data-runner-tutorial-pose="right"] .arena-message[data-stage="tutorial"] .coach-arm-left,
  .display-app[data-game-mode="three-tracks"][data-runner-tutorial-pose="right"] .arena-message[data-stage="tutorial"] .coach-arm-right {
    transform: rotate(-80deg) !important;
  }

  .display-app[data-game-mode="three-tracks"][data-runner-tutorial-pose="left"] .arena-message[data-stage="tutorial"] .coach-arm-left,
  .display-app[data-game-mode="three-tracks"][data-runner-tutorial-pose="left"] .arena-message[data-stage="tutorial"] .coach-arm-right {
    transform: rotate(80deg) !important;
  }
}

@keyframes forestImpact {
  0% { transform: translateX(0); }
  22% { transform: translateX(-5px) rotate(-0.12deg); }
  48% { transform: translateX(4px) rotate(0.1deg); }
  72% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.display-app.is-arena,
.display-app[data-view]:not([data-view="lobby"]) { background: #06080b; }

.display-app.is-arena .display-main,
.display-app[data-view]:not([data-view="lobby"]) .display-main,
.display-app.is-arena .arena-section,
.display-app[data-view]:not([data-view="lobby"]) .arena-section,
.display-app.is-arena .arena-shell,
.display-app[data-view]:not([data-view="lobby"]) .arena-shell,
#compatPreview,
#remoteVideo,
.camera-scrim,
#runner3dCanvas,
#arenaCanvas,
.arena-message {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.display-app.is-arena .arena-hud,
.display-app[data-view]:not([data-view="lobby"]) .arena-hud {
  top: 36px;
  right: 48px;
  left: 48px;
}

.legend,
.video-status { bottom: 36px; }
.legend { left: 48px; }
.video-status { right: 48px; }

.sound-toggle {
  position: absolute;
  z-index: 12;
  right: 48px;
  bottom: 84px;
  display: flex;
  min-width: 132px;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(6, 8, 11, 0.9);
  color: #f8f7f2;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.display-app[data-game-mode="air-hockey"] .sound-toggle,
.display-app[data-game-mode="say-bam"] .sound-toggle {
  bottom: calc(max(48px, 5vh) + 48px);
}

.sound-toggle:focus-visible {
  outline: 3px solid #77ceff;
  outline-offset: 3px;
}

.sound-toggle > span:last-child {
  display: grid;
  gap: 1px;
}

.sound-toggle small {
  color: #a5acb6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.sound-toggle strong {
  color: #f8f7f2;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.sound-toggle-icon {
  display: flex;
  width: 24px;
  height: 22px;
  align-items: end;
  justify-content: center;
  gap: 3px;
}

.sound-toggle-icon i {
  display: block;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: #77ceff;
}

.sound-toggle-icon i:nth-child(2) { height: 16px; }
.sound-toggle-icon i:nth-child(3) { height: 11px; }
.sound-toggle[data-state="on"] .sound-toggle-icon i { animation: sound-bar 0.8s ease-in-out infinite alternate; }
.sound-toggle[data-state="on"] .sound-toggle-icon i:nth-child(2) { animation-delay: -0.32s; }
.sound-toggle[data-state="on"] .sound-toggle-icon i:nth-child(3) { animation-delay: -0.56s; }
.sound-toggle[data-state="off"] .sound-toggle-icon i,
.sound-toggle[data-state="unsupported"] .sound-toggle-icon i { height: 3px; background: #777d86; animation: none; }

.sound-toggle[disabled] {
  cursor: default;
  opacity: 0.62;
}

@keyframes sound-bar {
  from { transform: scaleY(0.45); }
  to { transform: scaleY(1); }
}

.arena-hud h1,
.scoreboard strong,
.arena-message,
.arena-message h2,
.tv-setup-steps span,
.setup-feedback { color: #f8f7f2; }

.message-index,
.tv-setup-steps b { color: #77ceff; }
.setup-feedback { background: #06080b; }

.arena-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tv-setup-steps { display: flex; }
.tv-setup-steps li { flex: 1 1 0; }

* {
  box-sizing: border-box;
}

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

body {
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

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

button {
  color: inherit;
}

a {
  color: inherit;
}

img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

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

[hidden] {
  display: none !important;
}

::selection {
  background: var(--blue);
  color: var(--white);
}

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}

.ambient {
  display: none;
}

/* Shared brand and connection chrome */

.topbar,
.mobile-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.topbar {
  height: var(--topbar-height);
  flex: 0 0 var(--topbar-height);
  padding: 0 var(--tv-safe-x);
  isolation: isolate;
}

.topbar::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: max(480px, 34vw);
  height: 100%;
  content: "";
  background: var(--blue);
}

.mobile-header {
  min-height: 72px;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  background: var(--paper-strong);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand strong {
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.brand small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.brand-mark {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--radius-media);
  background: var(--blue);
}

.brand-mark i {
  width: 4px;
  border-radius: 1px;
  background: var(--white);
}

.brand-mark i:nth-child(1) { height: 12px; }
.brand-mark i:nth-child(2) { height: 24px; }
.brand-mark i:nth-child(3) { height: 17px; }

.brand.compact .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 7px;
}

.brand.compact strong {
  font-size: 16px;
}

.brand.compact small {
  font-size: 8px;
}

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

.connection-pill,
.change-mode-link,
.controller-entry {
  min-height: 44px;
  border: 1px solid rgba(10, 13, 17, 0.42);
  border-radius: var(--radius-control);
  font-size: 13px;
  font-weight: 750;
}

.connection-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  background: var(--paper);
  color: var(--ink);
}

.connection-pill.small {
  min-height: 38px;
  padding: 0 11px;
  border-color: var(--line);
  background: var(--white);
  font-size: 11px;
}

.language-switch.connection-pill {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 3px;
  gap: 2px;
  border-color: rgba(119, 206, 255, 0.46);
  background: rgba(255, 255, 255, 0.1);
}

.language-switch button {
  min-width: 40px;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #aeb8c5;
  cursor: pointer;
  font: 850 10px/1 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: 0.12em;
}

.language-switch button[aria-pressed="true"] {
  background: var(--sky);
  color: #06121d;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28) inset;
}

.mobile-header .language-switch.connection-pill {
  margin-left: auto;
  border-color: var(--line);
  background: var(--white);
}

.mobile-header .language-switch button {
  color: var(--muted);
}

.mobile-header .language-switch button[aria-pressed="true"] {
  color: #06121d;
}

.status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8f908b;
}

.connection-pill[data-state="online"] .status-dot {
  background: var(--success);
}

.connection-pill[data-state="online"] {
  border-color: var(--success);
}

.connection-pill[data-state="error"] .status-dot {
  background: var(--danger);
}

.connection-pill[data-state="error"] {
  border-color: var(--danger);
}

.change-mode-link,
.controller-entry {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--film);
  color: var(--white);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.change-mode-link:hover,
.controller-entry:hover {
  background: var(--white);
  color: var(--ink);
}

.controller-entry span {
  color: var(--sky);
}

.controller-entry b {
  font-size: 18px;
}

.mobile-controller-switch {
  display: none;
}

/* Display: lobby */

.display-app {
  min-height: 100dvh;
  background: var(--paper);
}

.display-main {
  position: relative;
  min-height: calc(100dvh - var(--topbar-height));
}

.lobby {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 34vw);
  min-height: calc(100dvh - var(--topbar-height));
  background: var(--paper);
}

.lobby-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: var(--tv-safe-y) clamp(40px, 4vw, 72px) var(--tv-safe-y) var(--tv-safe-x);
}

.eyebrow,
.section-index,
.arena-name > span,
.message-index {
  margin: 0;
  color: var(--blue);
  font-size: clamp(13px, 0.9vw, 17px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(16px, 2.3vh, 26px);
}

.eyebrow span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.eyebrow span::after {
  width: 36px;
  height: 1px;
  content: "";
  background: currentColor;
}

.lobby h1,
.controller-main h1,
.arena-hud h1 {
  color: var(--ink);
  font-weight: 850;
  letter-spacing: -0.065em;
}

.lobby h1 {
  max-width: 940px;
  margin-bottom: clamp(20px, 2.8vh, 32px);
  font-size: clamp(56px, min(5vw, 8vh), 94px);
  line-height: 0.93;
}

h1 em {
  color: var(--blue);
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.055em;
}

.lead {
  max-width: 780px;
  margin-bottom: 0;
  color: #3f423f;
  font-size: clamp(18px, min(1.35vw, 2.6vh), 25px);
  line-height: 1.48;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
  margin: clamp(28px, 4vh, 48px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  min-width: 0;
  gap: 10px;
  padding: 0 20px;
}

.steps li:first-child {
  padding-left: 0;
}

.steps li + li {
  border-left: 1px solid var(--line);
}

.steps li > span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.steps p {
  display: grid;
  min-width: 0;
  gap: 6px;
  margin: 0;
}

.steps strong {
  font-size: clamp(14px, 1vw, 18px);
}

.steps small {
  color: var(--muted);
  font-size: clamp(11px, 0.75vw, 14px);
  line-height: 1.35;
}

.pairing-panel,
.pairing-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vh, 52px) clamp(38px, 4vw, 76px);
  background: var(--blue);
  color: var(--white);
}

.pairing-heading,
.pairing-card-top {
  display: flex;
  width: min(100%, 370px);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(14px, 2vh, 22px);
  color: var(--white);
  font-size: clamp(11px, 0.8vw, 15px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pairing-heading span:last-child,
.timer-label {
  opacity: 0.72;
  font-size: 0.82em;
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: none;
}

.live-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
}

.qr-frame {
  position: relative;
  display: grid;
  width: clamp(236px, 34vh, 350px);
  height: clamp(236px, 34vh, 350px);
  max-width: 100%;
  aspect-ratio: 1;
  place-items: center;
  padding: 16px;
  border: 8px solid var(--paper);
  border-radius: var(--radius-media);
  background: var(--white);
}

.qr-code,
.qr-code svg,
.qr-code img {
  display: block;
  width: 100%;
  height: 100%;
}

.qr-code img {
  object-fit: contain;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.qr-loading {
  display: flex;
  gap: 8px;
}

.qr-loading span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  animation: qr-pulse 900ms infinite alternate ease-in-out;
}

.qr-loading span:nth-child(2) { animation-delay: 120ms; }
.qr-loading span:nth-child(3) { animation-delay: 240ms; }

@keyframes qr-pulse {
  from { opacity: 0.32; }
  to { opacity: 1; }
}

.scan-label {
  margin: clamp(13px, 1.8vh, 20px) 0 12px;
  color: var(--white);
  font-size: clamp(14px, 0.9vw, 17px);
  font-weight: 700;
  text-align: center;
}

.manual-code {
  display: flex;
  width: min(100%, 370px);
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 15px;
  border: 1px solid rgba(10, 13, 17, 0.65);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
}

.manual-code span {
  color: var(--muted);
  font-size: clamp(11px, 0.75vw, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.manual-code strong {
  font-size: clamp(22px, 1.8vw, 34px);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.pairing-error,
.form-error,
.camera-error {
  color: #a81717;
  font-size: 13px;
  line-height: 1.45;
}

.pairing-error {
  width: min(100%, 370px);
  margin: 12px 0 0;
  padding: 10px;
  background: var(--white);
  text-align: center;
}

/* Display: active arena */

.arena-section {
  min-height: calc(100dvh - var(--topbar-height));
  padding: 20px var(--tv-safe-x) 24px;
  overflow: hidden;
  background: var(--film);
  color: var(--white);
}

.arena-hud {
  display: flex;
  min-height: 70px;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 14px;
}

.arena-name > span,
.arena-hud .eyebrow {
  margin-bottom: 7px;
  color: var(--sky);
  font-size: clamp(11px, 0.75vw, 14px);
}

.arena-hud h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(36px, 3vw, 56px);
  line-height: 0.96;
}

.scoreboard {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--line-dark);
}

.scoreboard span {
  display: grid;
  min-width: 118px;
  gap: 3px;
  padding: 10px 16px 0;
  color: #a5acb6;
  font-size: clamp(10px, 0.7vw, 13px);
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.scoreboard span:first-child {
  padding-left: 0;
}

.scoreboard span + span {
  border-left: 1px solid var(--line-dark);
}

.scoreboard strong {
  color: var(--white);
  font-size: clamp(20px, 1.6vw, 30px);
  letter-spacing: 0;
  text-transform: none;
}

.scoreboard span:nth-last-child(-n + 2) strong {
  font-size: clamp(13px, 1vw, 18px);
}

.arena-shell {
  position: relative;
  width: min(100%, 134dvh);
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-control);
  background: var(--film-soft);
}

#remoteVideo,
.arena-shell > video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.camera-scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(6, 8, 11, 0.17);
  pointer-events: none;
}

#runner3dCanvas,
#arenaCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#runner3dCanvas {
  z-index: 2;
  background: #06080b;
  visibility: hidden;
}

#arenaCanvas {
  z-index: 3;
}

.display-app[data-manual-mode="true"][data-game-state="ready"][data-runner-renderer-preference]:not([data-runner-renderer-preference="canvas"]):not([data-runner-engine="3d"]):not([data-runner-engine="failed"]) #arenaCanvas {
  visibility: hidden;
}

/* Keep the previous Canvas world out of sight for the entire WebGL warm-up.
   The countdown can finish before a slower TV completes its benchmark, so
   limiting this rule to setup views caused the old scene to flash in-game. */
.display-app[data-game-mode="three-tracks"][data-runner-engine="probing"] #arenaCanvas {
  visibility: hidden;
}

.display-app[data-game-mode="three-tracks"][data-runner-engine="probing"] .arena-message:not(.is-hidden) {
  background: #071722;
}

.display-app[data-game-mode="three-tracks"][data-runner-engine="probing"] .arena-shell::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  background: #071722;
  color: #77ceff;
  content: "PREPARING 3D GRAPHICS";
  font: 800 clamp(14px, 1.1vw, 22px)/1.2 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: 0.12em;
  text-align: center;
}

html[lang="pl"] .display-app[data-game-mode="three-tracks"][data-runner-engine="probing"] .arena-shell::after {
  content: "PRZYGOTOWUJĘ GRAFIKĘ 3D";
}

.display-app[data-runner-engine="3d"] #runner3dCanvas {
  visibility: visible;
}

.arena-message {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 40px;
  background: rgba(6, 8, 11, 0.88);
  color: var(--white);
  text-align: center;
  transition: opacity 240ms ease;
}

.arena-message.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.message-index {
  margin-bottom: 20px;
  color: var(--sky);
}

.message-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border: 1px solid var(--sky);
  border-radius: 50%;
  place-items: center;
  color: var(--sky);
  font-size: 28px;
}

.arena-message h2 {
  margin-bottom: 12px;
  color: var(--white);
  font-size: clamp(34px, 3.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.arena-message p {
  max-width: 700px;
  margin-bottom: 0;
  color: #b8bec6;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.5;
}

.display-app[data-game-mode="night-forest"] .arena-message[data-stage="setup"] h2,
.display-app[data-game-mode="wall-dodge"] .arena-message[data-stage="setup"] h2,
.display-app[data-game-mode="stay-in-light"] .arena-message[data-stage="setup"] h2,
.display-app[data-game-mode="last-on-floor"] .arena-message[data-stage="setup"] h2,
.display-app[data-game-mode="gummy-night-shift"] .arena-message[data-stage="setup"] h2,
.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="setup"] h2,
.display-app[data-game-mode="three-tracks"] .arena-message[data-stage="tutorial"] h2 {
  padding: 18px 30px;
  border: 2px solid rgba(119, 206, 255, 0.7);
  border-radius: 18px;
  background: rgba(7, 23, 34, 0.86);
  box-shadow: 0 0 0 8px rgba(119, 206, 255, 0.1), 0 20px 70px rgba(0, 0, 0, 0.38);
  animation: motionInstructionPulse 1.15s ease-in-out infinite;
}

.gesture-coach {
  --coach-accent: #77ceff;
  position: relative;
  width: 88px;
  height: 104px;
  flex: 0 0 auto;
  border: 1px solid rgba(119, 206, 255, 0.34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(119, 206, 255, 0.2), transparent 54%),
    rgba(7, 23, 34, 0.72);
  box-shadow: inset 0 0 28px rgba(119, 206, 255, 0.08), 0 0 24px rgba(119, 206, 255, 0.1);
  overflow: hidden;
}

.gesture-coach-tv {
  display: none;
  width: clamp(136px, 10vw, 176px);
  height: clamp(152px, 12vw, 196px);
  margin: 8px 0 16px;
  border-width: 2px;
  border-radius: 32px;
}

.arena-message[data-stage="tutorial"] .gesture-coach-tv {
  display: block;
}

.display-app[data-game-mode="three-tracks"] .arena-message[data-stage="tutorial"] h2 {
  /* Animating this very large bordered panel forces repaints on older TVs.
     The coach arms and arrow carry the motion cue more clearly and cheaply. */
  animation: none;
  border-color: rgba(119, 206, 255, 0.9);
}

.display-app[data-game-mode="three-tracks"] .arena-message[data-stage="tutorial"] .coach-arm {
  width: 14%;
  box-shadow: 0 0 14px rgba(119, 206, 255, 0.82);
}

.display-app[data-game-mode="three-tracks"] .arena-message[data-stage="tutorial"] .coach-arm b {
  right: -38%;
  left: -38%;
  box-shadow: 0 0 13px rgba(119, 206, 255, 0.95);
}

.display-app[data-game-mode="gummy-night-shift"] .arena-message[data-stage="setup"] .gesture-coach-tv,
.display-app[data-game-mode="gummy-night-shift"] .arena-message[data-stage="ready"] .gesture-coach-tv,
.display-app[data-game-mode="gummy-night-shift"] .arena-message[data-stage="gummy-tracking-lost"] .gesture-coach-tv {
  --coach-accent: #ff8fc8;
  display: block;
  box-shadow: inset 0 0 34px rgba(255, 106, 184, 0.12), 0 0 34px rgba(255, 106, 184, 0.18);
}

.display-app[data-game-mode="gummy-night-shift"] .arena-message[data-stage="gummy-tracking-lost"] {
  border-color: rgba(255, 112, 154, 0.82);
  background: rgba(18, 5, 22, 0.94);
  box-shadow: 0 0 0 9px rgba(255, 112, 154, 0.1), 0 24px 90px rgba(0, 0, 0, 0.56);
}

.display-app[data-game-mode="gummy-night-shift"] .arena-message[data-stage="gummy-tracking-lost"] h2 {
  color: #fff;
  animation: motionInstructionPulse 1.15s ease-in-out infinite;
}

.gesture-coach-person {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 54%;
  height: 84%;
  transform: translateX(-50%);
  transform-origin: 50% 62%;
  animation: coachBreathe 1.1s ease-in-out infinite;
}

.coach-head,
.coach-torso,
.coach-arm,
.coach-leg {
  position: absolute;
  display: block;
  background: linear-gradient(180deg, #f5fbff, var(--coach-accent));
  box-shadow: 0 0 9px rgba(119, 206, 255, 0.58);
}

.coach-head {
  top: 0;
  left: 50%;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
}

.coach-torso {
  top: 22%;
  left: 50%;
  width: 34%;
  height: 38%;
  border-radius: 48% 48% 34% 34%;
  transform: translateX(-50%);
}

.coach-arm {
  top: 25%;
  width: 10%;
  height: 36%;
  border-radius: 999px;
  transform-origin: 50% 8%;
}

.coach-arm b {
  position: absolute;
  right: -24%;
  bottom: -10%;
  left: -24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f5fbff;
  box-shadow: 0 0 8px rgba(119, 206, 255, 0.68);
}

.coach-arm-left { left: 23%; transform: rotate(13deg); }
.coach-arm-right { right: 23%; transform: rotate(-13deg); }

.coach-leg {
  top: 57%;
  width: 11%;
  height: 39%;
  border-radius: 999px;
  transform-origin: 50% 5%;
}

.coach-leg-left { left: 36%; transform: rotate(5deg); }
.coach-leg-right { right: 36%; transform: rotate(-5deg); }

.gesture-coach-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 7%;
  color: #fff;
  font-size: clamp(18px, 2.4vw, 34px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 14px var(--coach-accent);
  transform: translateY(-50%);
}

.motion-tutorial[data-gesture="neutral"] .gesture-coach-arrow::before,
.motion-tutorial[data-gesture="calibrating"] .gesture-coach-arrow::before,
body[data-runner-tutorial-pose="neutral"] .arena-message[data-stage="tutorial"] .gesture-coach-arrow::before,
body[data-runner-tutorial-pose="calibrating"] .arena-message[data-stage="tutorial"] .gesture-coach-arrow::before {
  content: "◎";
}

.motion-tutorial[data-gesture="right"] .gesture-coach-arrow::before,
body[data-runner-tutorial-pose="right"] .arena-message[data-stage="tutorial"] .gesture-coach-arrow::before { content: "→"; }
.motion-tutorial[data-gesture="left"] .gesture-coach-arrow::before,
body[data-runner-tutorial-pose="left"] .arena-message[data-stage="tutorial"] .gesture-coach-arrow::before { content: "←"; }
.motion-tutorial[data-gesture="jump"] .gesture-coach-arrow::before,
body[data-runner-tutorial-pose="jump"] .arena-message[data-stage="tutorial"] .gesture-coach-arrow::before { content: "↑"; }
.motion-tutorial[data-gesture="squat"] .gesture-coach-arrow::before,
body[data-runner-tutorial-pose="squat"] .arena-message[data-stage="tutorial"] .gesture-coach-arrow::before { content: "↓"; }

.motion-tutorial[data-gesture="right"] .gesture-coach-person,
body[data-runner-tutorial-pose="right"] .arena-message[data-stage="tutorial"] .gesture-coach-person {
  animation-name: coachMoveRight;
}
.motion-tutorial[data-gesture="left"] .gesture-coach-person,
body[data-runner-tutorial-pose="left"] .arena-message[data-stage="tutorial"] .gesture-coach-person {
  animation-name: coachMoveLeft;
}
.motion-tutorial[data-gesture="right"] .coach-arm,
body[data-runner-tutorial-pose="right"] .arena-message[data-stage="tutorial"] .coach-arm {
  animation: coachArmsRight 1.1s ease-in-out infinite;
}
.motion-tutorial[data-gesture="left"] .coach-arm,
body[data-runner-tutorial-pose="left"] .arena-message[data-stage="tutorial"] .coach-arm {
  animation: coachArmsLeft 1.1s ease-in-out infinite;
}
.motion-tutorial[data-gesture="jump"] .gesture-coach-person,
body[data-runner-tutorial-pose="jump"] .arena-message[data-stage="tutorial"] .gesture-coach-person {
  animation-name: coachJump;
}
.motion-tutorial[data-gesture="jump"] .coach-arm-left,
body[data-runner-tutorial-pose="jump"] .arena-message[data-stage="tutorial"] .coach-arm-left {
  transform: rotate(158deg);
}
.motion-tutorial[data-gesture="jump"] .coach-arm-right,
body[data-runner-tutorial-pose="jump"] .arena-message[data-stage="tutorial"] .coach-arm-right {
  transform: rotate(-158deg);
}
.motion-tutorial[data-gesture="squat"] .gesture-coach-person,
body[data-runner-tutorial-pose="squat"] .arena-message[data-stage="tutorial"] .gesture-coach-person {
  animation-name: coachSquat;
}
.motion-tutorial[data-gesture="squat"] .coach-leg-left,
body[data-runner-tutorial-pose="squat"] .arena-message[data-stage="tutorial"] .coach-leg-left { transform: rotate(28deg); }
.motion-tutorial[data-gesture="squat"] .coach-leg-right,
body[data-runner-tutorial-pose="squat"] .arena-message[data-stage="tutorial"] .coach-leg-right { transform: rotate(-28deg); }

/* Three Tracks is deliberately hands-only. Keep the coach's torso planted so
   the animated instruction demonstrates the exact control that the game reads. */
.controller-app[data-game-mode="three-tracks"] .motion-tutorial[data-gesture="left"] .gesture-coach-person,
.controller-app[data-game-mode="three-tracks"] .motion-tutorial[data-gesture="right"] .gesture-coach-person,
.controller-app[data-game-mode="three-tracks"] .motion-tutorial[data-gesture="jump"] .gesture-coach-person,
.controller-app[data-game-mode="three-tracks"] .motion-tutorial[data-gesture="squat"] .gesture-coach-person,
.display-app[data-game-mode="three-tracks"] .arena-message[data-stage="tutorial"] .gesture-coach-person {
  animation-name: coachBreathe;
}

.controller-app[data-game-mode="three-tracks"] .motion-tutorial[data-gesture="squat"] .coach-arm-left,
.display-app[data-game-mode="three-tracks"][data-runner-tutorial-pose="squat"] .arena-message[data-stage="tutorial"] .coach-arm-left {
  transform: rotate(-18deg);
}

.controller-app[data-game-mode="three-tracks"] .motion-tutorial[data-gesture="squat"] .coach-arm-right,
.display-app[data-game-mode="three-tracks"][data-runner-tutorial-pose="squat"] .arena-message[data-stage="tutorial"] .coach-arm-right {
  transform: rotate(18deg);
}

.controller-app[data-game-mode="three-tracks"] .motion-tutorial[data-gesture="squat"] .coach-leg-left,
.display-app[data-game-mode="three-tracks"][data-runner-tutorial-pose="squat"] .arena-message[data-stage="tutorial"] .coach-leg-left {
  transform: rotate(5deg);
}

.controller-app[data-game-mode="three-tracks"] .motion-tutorial[data-gesture="squat"] .coach-leg-right,
.display-app[data-game-mode="three-tracks"][data-runner-tutorial-pose="squat"] .arena-message[data-stage="tutorial"] .coach-leg-right {
  transform: rotate(-5deg);
}

.controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial[data-step="moving"] .gesture-coach-person,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="move"] .arena-message .gesture-coach-person,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="right"] .arena-message .gesture-coach-person {
  animation-name: coachMoveRight;
}

.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="left"] .arena-message .gesture-coach-person {
  animation-name: coachMoveLeft;
}

.controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial[data-step="squat"] .gesture-coach-person,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="squat"] .arena-message .gesture-coach-person {
  animation-name: coachSquat;
}

.controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial[data-step="squat"] .coach-leg-left,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="squat"] .arena-message .coach-leg-left {
  transform: rotate(28deg);
}

.controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial[data-step="squat"] .coach-leg-right,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="squat"] .arena-message .coach-leg-right {
  transform: rotate(-28deg);
}

.controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial[data-step="still"] .gesture-coach-person,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="freeze"] .arena-message .gesture-coach-person {
  animation: none;
  transform: translateX(-50%);
}

.controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial[data-step="still"] .gesture-coach::after,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="freeze"] .arena-message .gesture-coach-tv::after {
  position: absolute;
  inset: 8%;
  border: 3px solid rgba(126, 244, 202, 0.88);
  border-radius: 20px;
  box-shadow: 0 0 24px rgba(126, 244, 202, 0.58), inset 0 0 18px rgba(126, 244, 202, 0.18);
  content: "";
  animation: gummyFreezeRing 900ms ease-in-out infinite;
}

.controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial[data-step="still"] .gesture-coach-arrow::before,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="freeze"] .arena-message .gesture-coach-arrow::before {
  content: "◉";
}

.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="left"] .arena-message .gesture-coach-arrow::before { content: "←"; }
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="right"] .arena-message .gesture-coach-arrow::before,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="move"] .arena-message .gesture-coach-arrow::before { content: "→"; }
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="squat"] .arena-message .gesture-coach-arrow::before { content: "↓"; }
.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="jump"] .arena-message .gesture-coach-arrow::before { content: "↑"; }

.display-app[data-game-mode="gummy-night-shift"][data-gummy-coach="jump"] .arena-message .gesture-coach-person,
.controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial[data-step="jump"] .gesture-coach-person {
  animation-name: coachJump;
}

/* Foreman traffic-light language: green/dim means run, amber prepares the
   player, red demands stillness. The same tokens drive screenshots/E2E. */
.display-app[data-game-mode="gummy-night-shift"][data-gummy-eyes="off"] .gesture-coach-tv,
.display-app[data-game-mode="gummy-night-shift"][data-gummy-eyes="dim"] .gesture-coach-tv {
  --coach-accent: #72f3cf;
}

.display-app[data-game-mode="gummy-night-shift"][data-gummy-eyes="amber"] .gesture-coach-tv {
  --coach-accent: #ffc24e;
  border-color: rgba(255, 194, 78, 0.78);
}

.display-app[data-game-mode="gummy-night-shift"][data-gummy-eyes="red"] .gesture-coach-tv {
  --coach-accent: #ff456f;
  border-color: rgba(255, 69, 111, 0.88);
  box-shadow: inset 0 0 34px rgba(255, 69, 111, 0.18), 0 0 34px rgba(255, 69, 111, 0.28);
}

@keyframes gummyFreezeRing {
  0%, 100% { opacity: 0.48; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes coachBreathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.035); }
}

@keyframes coachMoveRight {
  0%, 100% { transform: translateX(-58%) rotate(0deg); }
  50% { transform: translateX(-34%) rotate(5deg); }
}

@keyframes coachMoveLeft {
  0%, 100% { transform: translateX(-42%) rotate(0deg); }
  50% { transform: translateX(-66%) rotate(-5deg); }
}

@keyframes coachArmsRight {
  0%, 100% { transform: rotate(-68deg); }
  50% { transform: rotate(-88deg); }
}

@keyframes coachArmsLeft {
  0%, 100% { transform: rotate(68deg); }
  50% { transform: rotate(88deg); }
}

@keyframes coachJump {
  0%, 100% { transform: translate(-50%, 5%) scaleY(0.97); }
  50% { transform: translate(-50%, -8%) scaleY(1.04); }
}

@keyframes coachSquat {
  0%, 100% { transform: translate(-50%, 3%) scaleY(0.9); }
  50% { transform: translate(-50%, 17%) scaleY(0.68); }
}

.display-app[data-continuous-calibration="left"] .arena-message[data-stage="setup"] h2::before,
.display-app[data-continuous-calibration="right"] .arena-message[data-stage="setup"] h2::after {
  display: inline-block;
  margin: 0 18px;
  color: #77ceff;
  font-size: 1.25em;
  line-height: 0;
  animation: motionInstructionArrow 700ms ease-in-out infinite alternate;
}

.display-app[data-continuous-calibration="left"] .arena-message[data-stage="setup"] h2::before { content: "←"; }
.display-app[data-continuous-calibration="right"] .arena-message[data-stage="setup"] h2::after { content: "→"; }

@keyframes motionInstructionPulse {
  0%, 100% { border-color: rgba(119, 206, 255, 0.5); transform: scale(1); }
  50% { border-color: rgba(255, 255, 255, 0.95); transform: scale(1.025); }
}

@keyframes motionInstructionArrow {
  from { transform: translateX(-4px); opacity: 0.65; }
  to { transform: translateX(8px); opacity: 1; }
}

.controller-app[data-game-mode="night-forest"] .motion-tutorial,
.controller-app[data-game-mode="wall-dodge"] .motion-tutorial,
.controller-app[data-game-mode="stay-in-light"] .motion-tutorial,
.controller-app[data-game-mode="last-on-floor"] .motion-tutorial,
.controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial,
.controller-app[data-game-mode="circle-munch"] .motion-tutorial {
  border-color: rgba(119, 206, 255, 0.9);
  box-shadow: 0 0 0 6px rgba(119, 206, 255, 0.12), 0 18px 56px rgba(0,0,0,.4);
  animation: motionInstructionPulse 1.3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .display-app .arena-message[data-stage="setup"] h2,
  .display-app .arena-message[data-stage="setup"] h2::before,
  .display-app .arena-message[data-stage="setup"] h2::after,
  .display-app .arena-message[data-stage="gummy-tracking-lost"] h2,
  .controller-app .motion-tutorial,
  .gesture-coach-person,
  .gesture-coach .coach-arm {
    animation: none !important;
    transition: none !important;
  }

  .controller-app[data-game-mode="gummy-night-shift"] .motion-tutorial .gesture-coach::after,
  .display-app[data-game-mode="gummy-night-shift"] .arena-message .gesture-coach-tv::after {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .controller-app[data-game-mode="circle-munch"] .motion-tutorial .coach-arm-left,
  .display-app[data-game-mode="circle-munch"] .arena-message .coach-arm-left {
    transform: rotate(145deg) !important;
  }

  .controller-app[data-game-mode="circle-munch"] .motion-tutorial .coach-arm-right,
  .display-app[data-game-mode="circle-munch"] .arena-message .coach-arm-right {
    transform: rotate(-95deg) !important;
  }
}

.legend,
.video-status {
  position: absolute;
  z-index: 5;
  bottom: clamp(32px, 5vh, 54px);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-control);
  background: var(--film);
}

.legend {
  left: clamp(32px, 4vw, 72px);
  display: flex;
  gap: 16px;
  padding: 10px 12px;
}

.legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c3c8ce;
  font-size: clamp(12px, 0.8vw, 14px);
}

.legend i {
  width: 10px;
  height: 10px;
  border: 1px solid var(--white);
  border-radius: 50%;
}

.legend .blue { background: var(--hand-left); }
.legend .yellow { background: var(--hand-right); }
.legend .red { background: var(--danger); }

.video-status {
  right: clamp(32px, 4vw, 72px);
  padding: 10px 12px;
  color: #c3c8ce;
  font-size: clamp(10px, 0.72vw, 13px);
}

.display-footer {
  position: fixed;
  z-index: 8;
  right: var(--tv-safe-x);
  bottom: 8px;
  left: var(--tv-safe-x);
  display: flex;
  justify-content: space-between;
  color: #8e928e;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.privacy-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--success);
}

/* Controller: light, mobile-first */

.controller-app {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
}

.controller-main {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 36px 20px calc(48px + env(safe-area-inset-bottom));
}

.join-panel {
  padding-top: min(4vh, 34px);
}

.control-panel {
  width: 100%;
}

.controller-main h1 {
  margin-bottom: 20px;
  font-size: clamp(44px, 11vw, 74px);
  line-height: 0.94;
}

.controller-main .lead {
  color: var(--muted);
}

.small-lead {
  font-size: clamp(16px, 4.4vw, 20px);
}

.join-actions {
  margin-top: 30px;
}

.scan-button {
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-control);
  background: var(--blue);
  color: var(--white);
  cursor: pointer;
  text-align: left;
  transition: background 180ms ease, color 180ms ease;
}

.scan-button:hover,
.scan-button:focus-visible {
  background: var(--film);
}

.scan-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.scan-button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.scan-button strong {
  font-size: 16px;
}

.scan-button small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.scan-button > b {
  margin-left: auto;
  font-size: 22px;
}

.scan-button-icon {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  place-items: center;
}

.scan-button-icon i {
  width: 21px;
  height: 21px;
  border: 2px solid currentColor;
}

.scan-button-icon::before,
.scan-button-icon::after {
  position: absolute;
  width: 8px;
  height: 8px;
  content: "";
}

.scan-button-icon::before {
  top: 7px;
  left: 7px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.scan-button-icon::after {
  right: 7px;
  bottom: 7px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.scanner-panel {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-media);
  background: var(--film);
}

.scanner-viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}

.scanner-viewport video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scanner-overlay {
  position: absolute;
  z-index: 2;
  inset: 16%;
  border: 2px solid var(--sky);
  pointer-events: none;
}

.scanner-overlay::before,
.scanner-overlay::after {
  position: absolute;
  width: 34px;
  height: 34px;
  content: "";
}

.scanner-overlay::before {
  top: -3px;
  left: -3px;
  border-top: 5px solid var(--white);
  border-left: 5px solid var(--white);
}

.scanner-overlay::after {
  right: -3px;
  bottom: -3px;
  border-right: 5px solid var(--white);
  border-bottom: 5px solid var(--white);
}

.scanner-close {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  display: grid;
  width: 42px;
  height: 42px;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: var(--film);
  color: var(--white);
  cursor: pointer;
  place-items: center;
  font-size: 25px;
  line-height: 1;
}

.scanner-status {
  margin: 10px 4px 2px;
  color: #c3c8ce;
  font-size: 12px;
  line-height: 1.45;
}

.scanner-panel[data-state="error"] .scanner-status {
  color: #ff9999;
}

.scanner-panel[data-state="success"] .scanner-status {
  color: #8ee0b4;
}

.join-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.join-divider::before,
.join-divider::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--line);
}

.join-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper-strong);
}

.join-progress p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.join-progress small {
  color: var(--muted);
  font-size: 12px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.code-form {
  margin-top: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--ink);
}

.code-form label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

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

.code-form input {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  outline: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.code-form input:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(11, 94, 215, 0.16);
}

.primary-button,
.secondary-button,
.icon-button {
  min-height: 52px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-weight: 800;
  transition: background 180ms ease, color 180ms ease;
}

.primary-button {
  padding: 14px 20px;
  background: var(--ink);
  color: var(--white);
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
}

.secondary-button {
  padding: 11px 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
}

.icon-button {
  width: 54px;
  flex: 0 0 auto;
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
}

.back-to-roles {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.mobile-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.mobile-title-row h1 {
  font-size: clamp(42px, 10vw, 68px);
}

.session-chip,
.tracking-chip,
.prototype-badge {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper-strong);
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.session-chip {
  padding: 9px 10px;
}

.motion-card,
.camera-card,
.touch-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-media);
  background: var(--white);
}

.motion-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.motion-card-head > div {
  display: grid;
  gap: 6px;
}

.motion-card-head strong {
  font-size: 19px;
  letter-spacing: -0.025em;
}

.section-index {
  font-size: 10px;
}

.tracking-chip {
  padding: 7px 9px;
}

.tracking-chip[data-state="ready"] {
  border-color: var(--success);
  color: var(--success);
}

.tracking-chip[data-state="searching"],
.tracking-chip[data-state="loading"] {
  border-color: var(--blue);
  color: var(--blue);
}

.tracking-chip[data-state="error"] {
  border-color: var(--danger);
  color: var(--danger);
}

.camera-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--film);
}

.camera-preview video,
.camera-preview canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-preview video {
  transform: scaleX(-1);
}

.camera-preview canvas {
  z-index: 2;
  transform: none;
}

.camera-safe {
  position: absolute;
  z-index: 3;
  inset: 8%;
  display: grid;
  align-items: end;
  justify-items: center;
  border: 1px dashed var(--sky);
  pointer-events: none;
}

.camera-safe span {
  display: none;
}

.camera-safe p {
  max-width: calc(100% - 20px);
  margin: 0 0 10px;
  padding: 7px 9px;
  background: var(--film);
  color: var(--white);
  font-size: 10px;
  text-align: center;
}

.motion-instructions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.motion-instructions span {
  display: grid;
  gap: 7px;
  padding: 14px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.motion-instructions span:first-child {
  padding-left: 0;
}

.motion-instructions span + span {
  border-left: 1px solid var(--line);
}

.motion-instructions b {
  color: var(--blue);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.video-share-toggle {
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  cursor: pointer;
}

.video-share-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.video-share-toggle > span {
  display: grid;
  gap: 4px;
}

.video-share-toggle strong {
  font-size: 14px;
}

.video-share-toggle small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.video-share-toggle i {
  position: relative;
  width: 48px;
  height: 28px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--paper-strong);
}

.video-share-toggle i::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  content: "";
  border-radius: 1px;
  background: var(--ink);
  transition: transform 180ms ease;
}

.video-share-toggle input:checked + span + i {
  border-color: var(--blue);
  background: var(--blue);
}

.video-share-toggle input:checked + span + i::after {
  background: var(--white);
  transform: translateX(20px);
}

.motion-button {
  width: 100%;
  margin-top: 18px;
}

.tracking-status {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.camera-error,
.form-error {
  margin: 10px 0 0;
}

.touch-fallback {
  margin-top: 16px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.touch-fallback > summary {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

.touch-fallback > summary::-webkit-details-marker {
  display: none;
}

.touch-fallback > summary::after {
  content: "+";
  color: var(--blue);
  font-size: 22px;
}

.touch-fallback[open] > summary::after {
  content: "−";
}

.touch-fallback > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.touch-fallback .touch-card {
  margin: 0 0 16px;
}

.touch-card-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.touch-card-heading div {
  display: grid;
  gap: 4px;
}

.touch-card-heading small {
  color: var(--muted);
  font-size: 11px;
}

.touchpad {
  position: relative;
  height: clamp(260px, 42vh, 390px);
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--paper-strong);
  touch-action: none;
  user-select: none;
}

.pad-grid {
  display: none;
}

.touchpad::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed rgba(10, 13, 17, 0.34);
  content: "";
}

.pad-half {
  position: absolute;
  top: 11px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.pad-left { left: 12px; }
.pad-right { right: 12px; }

.hand-marker {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 50px;
  height: 50px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  place-items: center;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.hand-marker.left {
  left: 28%;
  top: 56%;
  background: var(--hand-left);
}

.hand-marker.right {
  left: 72%;
  top: 56%;
  background: var(--hand-right);
}

.game-controls {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.wide {
  flex: 1;
}

.privacy-note {
  margin: 18px 2px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.privacy-note span {
  color: var(--blue);
}

/* Display scaling */

@media (min-width: 901px) {
  .display-app {
    height: 100dvh;
    overflow: hidden;
  }

  .display-main {
    height: calc(100dvh - var(--topbar-height));
    overflow: hidden;
  }

  .lobby {
    height: 100%;
    min-height: 0;
  }

  .arena-section {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  :root {
    --tv-safe-x: 38px;
  }

  .lobby {
    grid-template-columns: minmax(0, 1fr) 440px;
  }

  .topbar::before {
    width: 440px;
  }

  .lobby-copy {
    padding-right: 36px;
  }

  .steps li {
    padding-right: 12px;
    padding-left: 12px;
  }

  .scoreboard span {
    min-width: 96px;
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (max-width: 900px) {
  :root {
    --topbar-height: 72px;
  }

  .display-app {
    overflow-x: hidden;
  }

  .topbar {
    height: var(--topbar-height);
    padding: 0 18px;
    background: var(--paper);
  }

  .topbar::before {
    display: none;
  }

  .display-app .brand small {
    display: none;
  }

  .display-app .brand-mark {
    width: 38px;
    height: 38px;
  }

  .controller-entry,
  .change-mode-link {
    display: none;
  }

  .connection-pill {
    max-width: 155px;
    min-height: 38px;
    padding: 0 10px;
    border-color: var(--line);
    font-size: 11px;
  }

  .connection-pill span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-controller-switch {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 3px solid var(--ink);
    background: var(--blue);
    color: var(--white);
    text-decoration: none;
  }

  .mobile-controller-switch > span {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 5px;
  }

  .mobile-controller-switch strong {
    font-size: 18px;
    line-height: 1.12;
  }

  .mobile-controller-switch small {
    color: var(--white);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.11em;
    line-height: 1;
  }

  .mobile-controller-switch b {
    display: grid;
    min-width: 88px;
    min-height: 48px;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 1px solid var(--ink);
    background: var(--white);
    color: var(--blue);
    place-items: center;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .mobile-controller-switch:hover b,
  .mobile-controller-switch:focus-visible b {
    background: var(--film);
    color: var(--white);
  }

  .display-main {
    min-height: auto;
  }

  .lobby {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .lobby .pairing-panel {
    order: -1;
  }

  .lobby-copy {
    padding: 44px 20px 48px;
  }

  .lobby h1 {
    font-size: clamp(48px, 12.5vw, 72px);
  }

  .lead {
    font-size: 17px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 30px;
    padding-top: 0;
  }

  .steps li,
  .steps li:first-child {
    grid-template-columns: 40px 1fr;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .steps li + li {
    border-left: 0;
  }

  .pairing-panel,
  .pairing-card {
    min-height: auto;
    padding: 22px 18px 26px;
  }

  .qr-frame {
    width: clamp(260px, 72vw, 300px);
    height: clamp(260px, 72vw, 300px);
    padding: 12px;
    border-width: 6px;
  }

  .pairing-heading {
    width: min(100%, 300px);
    margin-bottom: 12px;
  }

  .scan-label {
    margin: 11px 0 9px;
  }

  .manual-code {
    width: min(100%, 300px);
    min-height: 58px;
  }

  .manual-code strong {
    font-size: clamp(20px, 6vw, 27px);
  }

  .arena-section {
    min-height: calc(100dvh - var(--topbar-height));
    padding: 22px 18px 30px;
    overflow: visible;
  }

  .arena-hud {
    align-items: start;
    flex-direction: column;
    gap: 18px;
  }

  .scoreboard {
    width: 100%;
    overflow-x: auto;
  }

  .scoreboard span {
    min-width: 96px;
    flex: 1;
  }

  .arena-shell {
    width: 100%;
  }

  .legend {
    gap: 9px;
  }

  .video-status {
    display: none;
  }

  .display-footer {
    display: none;
  }
}

@media (max-width: 560px) {
  .controller-main {
    padding-right: 16px;
    padding-left: 16px;
  }

  .controller-app .brand small {
    display: none;
  }

  .connection-pill.small {
    max-width: 140px;
  }

  .code-form > div {
    flex-direction: column;
  }

  .code-form .primary-button {
    width: 100%;
  }

  .mobile-title-row {
    display: block;
  }

  .session-chip {
    display: inline-block;
    margin-bottom: 12px;
  }

  .motion-instructions {
    grid-template-columns: 1fr;
  }

  .motion-instructions span,
  .motion-instructions span:first-child {
    grid-template-columns: 30px 1fr;
    gap: 8px;
    padding: 12px 0;
  }

  .motion-instructions span + span {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .video-share-toggle {
    grid-template-columns: 1fr 48px;
  }

  .touch-fallback > summary small {
    display: none;
  }

  .game-controls .primary-button {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 390px) {
  .mobile-controller-switch {
    padding-right: 12px;
    padding-left: 12px;
  }

  .mobile-controller-switch strong {
    font-size: 17px;
  }

  .mobile-controller-switch b {
    min-width: 82px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .motion-card,
  .camera-card,
  .touch-card {
    padding: 14px;
  }

  .motion-card-head {
    gap: 10px;
  }
}

@media (max-width: 340px) {
  .mobile-controller-switch {
    gap: 9px;
  }

  .mobile-controller-switch strong {
    font-size: 16px;
  }

  .mobile-controller-switch small {
    font-size: 9px;
  }

  .mobile-controller-switch b {
    min-width: 76px;
    min-height: 44px;
    font-size: 12px;
  }
}

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

/* v0.4 — jeden pełny kadr na każdym urządzeniu */

@media (min-width: 901px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pairing-width);
    padding: 0;
  }

  .topbar::before {
    width: var(--pairing-width);
    background: var(--film);
  }

  .topbar > .brand {
    margin-left: var(--tv-safe-x);
  }

  .topbar-actions {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 clamp(20px, 2.6vw, 48px);
    background: var(--film);
  }

  .controller-entry {
    flex: 0 1 auto;
    white-space: nowrap;
  }

  .topbar-actions .connection-pill {
    min-width: 0;
  }

  .lobby {
    grid-template-columns: minmax(0, 1fr) var(--pairing-width);
  }

  .pairing-panel {
    background: var(--film);
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  :root {
    --pairing-width: clamp(450px, 42vw, 500px);
  }

  .topbar-actions {
    gap: 8px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .controller-entry,
  .topbar-actions .connection-pill {
    min-height: 40px;
    padding-right: 11px;
    padding-left: 11px;
    font-size: 11px;
  }
}

/* TV: po sparowaniu kalibracja i gra zajmują cały viewport. */

.display-app.is-arena,
.display-app[data-view]:not([data-view="lobby"]) {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--film);
}

.display-app.is-arena .topbar,
.display-app.is-arena .mobile-controller-switch,
.display-app[data-view]:not([data-view="lobby"]) .topbar,
.display-app[data-view]:not([data-view="lobby"]) .mobile-controller-switch {
  display: none;
}

.display-app.is-arena .display-main,
.display-app[data-view]:not([data-view="lobby"]) .display-main {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.display-app.is-arena .arena-section,
.display-app[data-view]:not([data-view="lobby"]) .arena-section {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.display-app.is-arena .arena-shell,
.display-app[data-view]:not([data-view="lobby"]) .arena-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
}

#compatPreview {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  transform: scaleX(-1);
}

.display-app.is-arena #remoteVideo,
.display-app[data-view]:not([data-view="lobby"]) #remoteVideo {
  object-fit: contain;
  background: #000;
}

.display-app[data-view="game"] #remoteVideo,
.display-app[data-view="playing"] #remoteVideo,
.display-app[data-view="game"] #compatPreview,
.display-app[data-view="playing"] #compatPreview,
.display-app.is-playing #remoteVideo,
.display-app.is-playing #compatPreview {
  object-fit: cover;
}

.display-app.is-arena .arena-hud,
.display-app[data-view]:not([data-view="lobby"]) .arena-hud {
  position: absolute;
  z-index: 8;
  top: max(clamp(32px, 5vh, 54px), env(safe-area-inset-top));
  right: clamp(32px, 4vw, 72px);
  left: clamp(32px, 4vw, 72px);
  min-height: 0;
  align-items: start;
  margin: 0;
  pointer-events: none;
}

.display-app.is-arena .arena-name,
.display-app[data-view]:not([data-view="lobby"]) .arena-name {
  padding: 10px 13px;
  border: 1px solid var(--line-dark);
  background: rgba(6, 8, 11, 0.9);
}

.display-app.is-arena .arena-name h1,
.display-app[data-view]:not([data-view="lobby"]) .arena-name h1 {
  font-size: clamp(24px, 2.2vw, 42px);
}

.display-app.is-arena .scoreboard,
.display-app[data-view]:not([data-view="lobby"]) .scoreboard {
  border: 1px solid var(--line-dark);
  background: rgba(6, 8, 11, 0.9);
}

.display-app.is-arena .scoreboard span,
.display-app[data-view]:not([data-view="lobby"]) .scoreboard span {
  min-width: clamp(92px, 7.7vw, 138px);
  padding: 9px 13px;
}

.display-app.is-arena .arena-message,
.display-app[data-view]:not([data-view="lobby"]) .arena-message {
  padding: clamp(112px, 15vh, 170px) var(--tv-safe-x) clamp(82px, 11vh, 120px);
  background: rgba(6, 8, 11, 0.72);
}

.arena-message[data-stage="countdown"] h2,
.display-app[data-view="countdown"] .arena-message h2 {
  font-family: var(--font-ui);
  font-size: clamp(132px, 25vw, 360px);
  font-style: normal;
  font-weight: 900;
  line-height: 0.8;
}

.tv-setup-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1040px, 88vw);
  margin: clamp(28px, 4vh, 48px) 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  list-style: none;
  text-align: left;
}

.tv-setup-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  padding: clamp(16px, 2vh, 24px);
}

.tv-setup-steps li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.tv-setup-steps b {
  color: var(--sky);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.tv-setup-steps span {
  display: grid;
  gap: 7px;
  color: var(--white);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 800;
}

.tv-setup-steps strong {
  color: #b8bec6;
  font-size: clamp(13px, 0.82vw, 16px);
  font-weight: 600;
  line-height: 1.4;
}

.setup-feedback {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: clamp(20px, 3vh, 34px);
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: var(--film);
  color: var(--white);
  font-size: clamp(13px, 0.9vw, 16px);
  font-weight: 750;
}

.setup-feedback i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sky);
}

.setup-feedback[data-state="ready"] i {
  background: #62d393;
}

.display-app.is-arena .legend,
.display-app.is-arena .video-status,
.display-app[data-view]:not([data-view="lobby"]) .legend,
.display-app[data-view]:not([data-view="lobby"]) .video-status {
  bottom: max(18px, env(safe-area-inset-bottom));
}

/* Telefon: po sparowaniu ekran jest wizjerem, sterowanie mieszka w szufladzie. */

.controller-app.is-paired {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--film);
  color: var(--white);
}

.controller-app.is-paired .mobile-header,
.controller-app.is-paired .join-panel {
  display: none;
}

.controller-app.is-paired .controller-main,
.controller-app.is-paired .control-panel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.immersive-camera,
.controller-app.is-paired .camera-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  background: #000;
}

.immersive-camera video,
.immersive-camera canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.immersive-camera video {
  transform: scaleX(-1);
}

.immersive-camera canvas {
  transform: none;
}

.motion-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.controller-app.camera-active[data-game-mode="three-tracks"] .motion-field {
  display: block;
}

.controller-app.camera-active[data-game-mode="night-forest"] .motion-field,
.controller-app.camera-active[data-game-mode="wall-dodge"] .motion-field,
.controller-app.camera-active[data-game-mode="stay-in-light"] .motion-field,
.controller-app.camera-active[data-game-mode="last-on-floor"] .motion-field,
.controller-app.camera-active[data-game-mode="gummy-night-shift"] .motion-field,
.controller-app.camera-active[data-game-mode="circle-munch"] .motion-field {
  display: block;
}

.continuous-steer-guide {
  position: absolute;
  z-index: 5;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 78px));
  left: max(22px, env(safe-area-inset-left));
  display: none;
  height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 30px;
  background: rgba(3, 12, 20, 0.82);
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.continuous-steer-guide::before {
  position: absolute;
  top: 50%;
  right: 64px;
  left: 64px;
  height: 2px;
  background: linear-gradient(90deg, #77ceff, rgba(255,255,255,.32) 50%, #f2c94c);
  content: "";
  transform: translateY(-50%);
}

.continuous-steer-guide i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(50% + var(--steer-offset, 0%));
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #62d393;
  box-shadow: 0 0 0 7px rgba(98, 211, 147, 0.18), 0 6px 22px rgba(0, 0, 0, 0.36);
  transform: translate(-50%, -50%);
  transition: left 80ms linear;
}

.controller-app.camera-active[data-game-mode="night-forest"] .continuous-steer-guide,
.controller-app.camera-active[data-game-mode="wall-dodge"] .continuous-steer-guide,
.controller-app.camera-active[data-game-mode="stay-in-light"] .continuous-steer-guide,
.controller-app.camera-active[data-game-mode="last-on-floor"] .continuous-steer-guide,
.controller-app.camera-active[data-game-mode="gummy-night-shift"] .continuous-steer-guide {
  display: flex;
}

.gummy-motion-guide {
  --gummy-motion-energy: 1;
  position: absolute;
  z-index: 6;
  top: max(154px, calc(env(safe-area-inset-top) + 146px));
  left: max(18px, env(safe-area-inset-left));
  display: none;
  width: min(250px, calc(100% - 36px));
  padding: 13px 15px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background: rgba(8, 12, 18, 0.84);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.36);
  color: #f8f7f2;
}

.controller-app.camera-active[data-game-mode="gummy-night-shift"] .gummy-motion-guide {
  display: grid;
  gap: 5px;
}

.gummy-motion-guide > span {
  color: #ffcc76;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.gummy-motion-guide > strong {
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.025em;
}

.gummy-motion-guide > i {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
}

.gummy-motion-guide > i > b {
  display: block;
  width: calc(var(--gummy-motion-energy) * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #83e6b8, #ffd36e 55%, #ff6d61);
  transition: width 90ms linear;
}

.gummy-motion-guide > small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  line-height: 1.35;
}

.gummy-motion-guide[data-motion-state="still"] {
  border-color: rgba(131, 230, 184, 0.92);
  box-shadow: 0 0 0 5px rgba(131, 230, 184, 0.12), 0 14px 42px rgba(0, 0, 0, 0.36);
}

.gummy-motion-guide[data-motion-state="squat"] {
  border-color: rgba(255, 204, 118, 0.92);
}

.gummy-motion-guide[data-motion-state="jump"] {
  border-color: rgba(101, 225, 255, 0.96);
  box-shadow: 0 0 0 5px rgba(101, 225, 255, 0.12), 0 14px 42px rgba(0, 0, 0, 0.36);
  transform: translateY(-3px);
}

.gummy-motion-guide[data-motion-state="lost"] {
  border-color: rgba(255, 109, 97, 0.9);
}

.circle-speed-guide {
  --circle-speed: 0.65;
  --circle-aperture: 0.2;
  position: absolute;
  z-index: 6;
  top: max(92px, calc(env(safe-area-inset-top) + 84px));
  left: max(12px, env(safe-area-inset-left));
  display: none;
  width: min(214px, 56vw);
  min-height: 174px;
  padding: 12px;
  border: 1px solid rgba(119, 206, 255, 0.68);
  border-radius: 18px;
  background: rgba(5, 11, 32, 0.82);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.34);
  color: #fff;
  pointer-events: none;
}

.controller-app.camera-active[data-game-mode="circle-munch"][data-circle-right-hand="ready"] .circle-speed-guide {
  display: grid;
  align-content: start;
  gap: 8px;
}

.circle-speed-guide > span {
  color: #77ceff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.circle-control-values {
  display: flex;
  gap: 7px;
}

.circle-control-values > strong {
  display: grid;
  flex: 1;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}

.circle-control-values small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.circle-control-values b {
  color: #fff19a;
  font-size: 16px;
  line-height: 1;
}

.circle-aperture-meter,
.circle-speed-meter {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 5px;
}

.circle-aperture-meter > span,
.circle-speed-meter > span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.circle-aperture-meter > span:last-child,
.circle-speed-meter > span:last-child { text-align: right; }

.circle-aperture-meter > i,
.circle-speed-meter > i {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.circle-aperture-meter > i > b,
.circle-speed-meter > i > b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  transition: width 90ms linear;
}

.circle-aperture-meter > i > b {
  width: calc(var(--circle-aperture) * 100%);
  background: linear-gradient(90deg, #ff7b8f, #ffe565 50%, #62e7ff);
}

.circle-speed-meter > i > b {
  width: calc(var(--circle-speed) * 100%);
  background: linear-gradient(90deg, #62e7ff, #ffe565 58%, #ff6fcf);
}

.circle-aperture-state {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(119, 206, 255, 0.14);
  color: #b8f4ff;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.circle-speed-guide[data-aperture-state="open"] .circle-aperture-state {
  background: rgba(255, 229, 101, 0.18);
  color: #fff19a;
}

.circle-speed-guide > small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 8px;
  line-height: 1.35;
}

.controller-app[data-game-mode="circle-munch"][data-circle-left-hand="lost"] .circle-speed-guide {
  border-color: rgba(255, 109, 97, 0.84);
  opacity: 0.74;
}

.controller-app[data-game-mode="night-forest"] .lane-zone,
.controller-app[data-game-mode="night-forest"] .vertical-trigger,
.controller-app[data-game-mode="night-forest"] .gesture-vertical-symbol,
.controller-app[data-game-mode="night-forest"] .neutral-target,
.controller-app[data-game-mode="wall-dodge"] .lane-zone,
.controller-app[data-game-mode="wall-dodge"] .vertical-trigger,
.controller-app[data-game-mode="wall-dodge"] .gesture-vertical-symbol,
.controller-app[data-game-mode="wall-dodge"] .neutral-target,
.controller-app[data-game-mode="stay-in-light"] .lane-zone,
.controller-app[data-game-mode="stay-in-light"] .vertical-trigger,
.controller-app[data-game-mode="stay-in-light"] .gesture-vertical-symbol,
.controller-app[data-game-mode="stay-in-light"] .neutral-target,
.controller-app[data-game-mode="last-on-floor"] .lane-zone,
.controller-app[data-game-mode="last-on-floor"] .vertical-trigger,
.controller-app[data-game-mode="last-on-floor"] .gesture-vertical-symbol,
.controller-app[data-game-mode="last-on-floor"] .neutral-target,
.controller-app[data-game-mode="gummy-night-shift"] .lane-zone,
.controller-app[data-game-mode="gummy-night-shift"] .vertical-trigger,
.controller-app[data-game-mode="gummy-night-shift"] .gesture-vertical-symbol,
.controller-app[data-game-mode="gummy-night-shift"] .neutral-target,
.controller-app[data-game-mode="circle-munch"] .lane-zone,
.controller-app[data-game-mode="circle-munch"] .vertical-trigger,
.controller-app[data-game-mode="circle-munch"] .gesture-vertical-symbol,
.controller-app[data-game-mode="circle-munch"] .neutral-target,
.controller-app[data-game-mode="night-forest"] .tracked-hand,
.controller-app[data-game-mode="wall-dodge"] .tracked-hand,
.controller-app[data-game-mode="stay-in-light"] .tracked-hand,
.controller-app[data-game-mode="last-on-floor"] .tracked-hand,
.controller-app[data-game-mode="gummy-night-shift"] .tracked-hand {
  display: none;
}

.controller-app[data-game-mode="circle-munch"] .tracked-hand-left {
  border-color: #b8f4ff;
  background: #62e7ff;
}

.controller-app[data-game-mode="circle-munch"] .tracked-hand-right {
  border-color: #fffbd6;
  background: #ffe565;
  box-shadow: 0 0 0 8px rgba(255, 229, 101, 0.22), 0 8px 30px rgba(0, 0, 0, 0.35);
}

.controller-app[data-game-mode="circle-munch"] .tracked-hand {
  z-index: 14;
}

.controller-app.camera-active[data-game-mode="circle-munch"][data-circle-right-hand="ready"] .motion-tutorial {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

.motion-field::before,
.motion-field::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.motion-field::before {
  z-index: 3;
  top: max(72px, calc(env(safe-area-inset-top) + 68px));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left));
  border: 4px solid #f2a93b;
  content: "";
  box-shadow: inset 0 0 0 2px rgba(6, 8, 11, 0.62);
}

.motion-field::after {
  z-index: 4;
  top: max(150px, calc(env(safe-area-inset-top) + 142px));
  left: 50%;
  width: min(330px, calc(100% - 40px));
  padding: 12px 16px;
  border: 2px solid #f2a93b;
  background: rgba(35, 24, 4, 0.94);
  color: #ffd47c;
  content: "I CAN'T SEE YOU\A STEP BACK INTO FRAME";
  font-size: clamp(12px, 3.5vw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  transform: translateX(-50%);
}

html[lang="pl"] .motion-field::after {
  content: "NIE WIDZĘ CIĘ\A WRÓĆ DO KADRU";
}

.motion-field[data-gesture="lost"]::before,
.motion-field[data-gesture="lost"]::after {
  opacity: 1;
}

.lane-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(6, 8, 11, 0.08);
  transition: background 150ms ease, border-color 150ms ease;
}

.lane-zone-right {
  border-right: 0;
}

.lane-zone-symbol,
.lane-center-label {
  position: absolute;
  top: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(6, 8, 11, 0.58);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 900;
  transform: translateY(-50%);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.lane-zone-symbol {
  display: grid;
  min-width: clamp(78px, 26vw, 132px);
  min-height: 54px;
  padding: 7px 9px;
  place-items: center;
  font-size: clamp(25px, 8.4vw, 44px);
  letter-spacing: -0.15em;
  line-height: 1;
  opacity: 0.3;
  white-space: nowrap;
}

.lane-zone-left .lane-zone-symbol {
  left: max(7px, env(safe-area-inset-left));
}

.lane-zone-right .lane-zone-symbol {
  right: max(7px, env(safe-area-inset-right));
}

.lane-center-label {
  left: 50%;
  padding: 4px 7px;
  font-size: 8px;
  letter-spacing: 0.12em;
  opacity: 0.32;
  transform: translate(-50%, 58px);
}

.motion-field[data-gesture="left"] .lane-zone-left,
.motion-field[data-gesture="neutral"] .lane-zone-center,
.motion-field[data-gesture="right"] .lane-zone-right {
  border-color: rgba(119, 206, 255, 0.88);
  background: rgba(20, 128, 255, 0.18);
  box-shadow: inset 0 0 0 2px rgba(119, 206, 255, 0.42);
}

.motion-field[data-gesture="left"] .lane-zone-left .lane-zone-symbol,
.motion-field[data-gesture="right"] .lane-zone-right .lane-zone-symbol {
  border-color: var(--white);
  background: var(--white);
  color: var(--blue);
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(119, 206, 255, 0.32), 0 8px 30px rgba(0, 0, 0, 0.34);
  transform: translateY(-50%) scale(1.06);
}

.vertical-trigger {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 1px;
  border-top: 1px dashed rgba(255, 255, 255, 0.44);
  opacity: 0.62;
  transition: border-color 150ms ease, opacity 150ms ease;
}

.gesture-vertical-symbol {
  position: absolute;
  z-index: 3;
  left: 50%;
  display: grid;
  width: min(52vw, 220px);
  min-width: 142px;
  min-height: 46px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(6, 8, 11, 0.62);
  color: rgba(255, 255, 255, 0.66);
  place-items: center;
  font-size: clamp(18px, 5.4vw, 31px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.32;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.gesture-vertical-jump {
  top: max(150px, 18vh);
}

.gesture-vertical-squat {
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 20px));
}

.motion-field[data-gesture="jump"] .vertical-trigger-jump,
.motion-field[data-gesture="squat"] .vertical-trigger-squat {
  border-color: var(--hand-right);
  opacity: 1;
}

.motion-field[data-gesture="jump"] .gesture-vertical-jump,
.motion-field[data-gesture="squat"] .gesture-vertical-squat {
  border-color: var(--hand-right);
  background: var(--hand-right);
  color: var(--ink);
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.28), 0 8px 30px rgba(0, 0, 0, 0.34);
  transform: translateX(-50%) scale(1.06);
}

.neutral-target {
  position: absolute;
  z-index: 2;
  display: grid;
  min-width: 92px;
  min-height: 82px;
  align-content: center;
  justify-items: center;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(6, 8, 11, 0.16);
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  transform: translate(-50%, -50%);
  transition: opacity 150ms ease, border-color 150ms ease;
}

.neutral-target i {
  width: 5px;
  height: 5px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--sky);
}

.neutral-target span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.neutral-target small {
  margin-top: 3px;
  font-size: 8px;
}

.motion-field[data-gesture="neutral"] .neutral-target {
  border: 3px solid #62d393;
  background: rgba(6, 35, 22, 0.72);
  color: var(--white);
  opacity: 1;
  box-shadow: 0 0 0 7px rgba(98, 211, 147, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.motion-field[data-gesture="neutral"] .neutral-target i {
  background: #83f5ba;
  box-shadow: 0 0 0 4px rgba(98, 211, 147, 0.2);
}

.motion-field:not([data-gesture="neutral"]):not([data-gesture="calibrating"]) .neutral-target {
  opacity: 0.24;
}

.motion-field[data-gesture="lost"] .lane-zone-symbol,
.motion-field[data-gesture="lost"] .lane-center-label,
.motion-field[data-gesture="lost"] .gesture-vertical-symbol {
  opacity: 0.12;
}

.controller-app.drawer-open .motion-field {
  opacity: 0;
}

.tracked-hand {
  position: absolute;
  z-index: 6;
  display: grid;
  width: clamp(48px, 14vw, 72px);
  height: clamp(48px, 14vw, 72px);
  align-content: center;
  justify-items: center;
  border: 3px solid var(--white);
  border-radius: 50%;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 100ms ease, transform 120ms ease;
}

.tracked-hand.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.tracked-hand-left {
  background: var(--sky);
  box-shadow: 0 0 0 7px rgba(119, 206, 255, 0.22), 0 8px 30px rgba(0, 0, 0, 0.35);
}

.tracked-hand-right {
  background: var(--hand-right);
  box-shadow: 0 0 0 7px rgba(242, 201, 76, 0.22), 0 8px 30px rgba(0, 0, 0, 0.35);
}

.tracked-hand b {
  font-size: clamp(17px, 5vw, 25px);
  line-height: 0.9;
}

.tracked-hand span {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.camera-safe {
  inset: clamp(64px, 11vh, 110px) clamp(28px, 9vw, 110px) clamp(78px, 13vh, 130px);
  border-color: rgba(119, 206, 255, 0.75);
}

.camera-safe::before {
  width: min(34vw, 190px);
  height: min(60vh, 470px);
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 48% 48% 34% 34%;
  content: "";
}

.camera-safe p {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(6, 8, 11, 0.82);
}

.controller-app.camera-active .camera-safe p {
  display: none;
}

.live-topbar {
  position: absolute;
  z-index: 12;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
  pointer-events: none;
}

.live-topbar > * {
  pointer-events: auto;
}

.live-brand {
  display: block;
  width: 44px;
  text-decoration: none;
}

.live-brand .brand-mark {
  width: 44px;
  height: 44px;
  background: rgba(6, 8, 11, 0.9);
}

.live-state {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(6, 8, 11, 0.86);
  color: var(--white);
  font-size: 12px;
  font-weight: 750;
}

.live-state .status-dot {
  background: var(--success);
}

.menu-button {
  display: grid;
  width: 52px;
  height: 52px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-control);
  background: rgba(6, 8, 11, 0.9);
  cursor: pointer;
  place-content: center;
  gap: 5px;
}

.menu-button i {
  display: block;
  width: 21px;
  height: 2px;
  background: var(--white);
}

.live-guidance {
  position: absolute;
  z-index: 10;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 78px);
  left: max(16px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}

.live-command {
  position: absolute;
  z-index: 11;
  top: max(78px, calc(env(safe-area-inset-top) + 70px));
  left: 50%;
  display: none;
  min-width: 154px;
  justify-items: center;
  padding: 7px 12px 8px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(6, 8, 11, 0.84);
  color: var(--white);
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
}

.controller-app.camera-active[data-game-mode="three-tracks"] .live-command {
  display: grid;
}

.live-command > span {
  color: var(--sky);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.live-command strong {
  margin-top: 2px;
  font-size: clamp(19px, 5vw, 27px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.live-command small {
  margin-top: 3px;
  color: #d8dde4;
  font-size: 9px;
}

.live-command[data-lane="left"],
.live-command[data-lane="right"],
.live-command[data-gesture="jump"],
.live-command[data-gesture="squat"] {
  border-color: var(--sky);
}

.gesture-hud {
  position: absolute;
  z-index: 11;
  top: max(78px, calc(env(safe-area-inset-top) + 68px));
  right: max(14px, env(safe-area-inset-right));
  left: max(14px, env(safe-area-inset-left));
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(720px, calc(100% - 28px));
  margin: 0 auto;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.controller-app.camera-active[data-game-mode="three-tracks"] .gesture-hud {
  display: none;
  opacity: 0;
}

.gesture-hud span {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(6, 8, 11, 0.78);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  opacity: 0.58;
}

.gesture-hud b {
  color: var(--sky);
  font-size: 20px;
  line-height: 1;
}

.controller-app[data-body-gesture="left"] .gesture-hud [data-gesture="left"],
.controller-app[data-body-gesture="right"] .gesture-hud [data-gesture="right"],
.controller-app[data-body-gesture="jump"] .gesture-hud [data-gesture="jump"],
.controller-app[data-body-gesture="neutral"] .gesture-hud [data-gesture="neutral"],
.controller-app[data-body-gesture="squat"] .gesture-hud [data-gesture="squat"] {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
  opacity: 1;
}

.controller-app[data-body-gesture="left"] .gesture-hud [data-gesture="left"] b,
.controller-app[data-body-gesture="right"] .gesture-hud [data-gesture="right"] b,
.controller-app[data-body-gesture="jump"] .gesture-hud [data-gesture="jump"] b,
.controller-app[data-body-gesture="neutral"] .gesture-hud [data-gesture="neutral"] b,
.controller-app[data-body-gesture="squat"] .gesture-hud [data-gesture="squat"] b {
  color: var(--blue);
}

.controller-game-dock {
  position: absolute;
  z-index: 13;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  display: none;
  grid-template-columns: minmax(112px, 1.45fr) minmax(76px, 1fr) minmax(72px, 1fr);
  width: min(520px, calc(100% - 28px));
  margin: 0 auto;
  padding: 7px;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-control);
  background: rgba(6, 8, 11, 0.92);
  transition: opacity 150ms ease;
}

.controller-app.camera-active .controller-game-dock,
.controller-app.touch-active .controller-game-dock {
  display: grid;
}

.controller-game-dock .primary-button,
.controller-game-dock .icon-button {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0 10px;
  border-radius: 1px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.controller-game-dock .primary-button {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.controller-game-dock .icon-button {
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--white);
}

.controller-game-dock button:active {
  background: var(--sky);
  color: var(--ink);
}

.controller-game-dock button:disabled {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}

.controller-app.drawer-open .controller-game-dock {
  opacity: 0;
  pointer-events: none;
}

.controller-app.drawer-open .gesture-hud {
  opacity: 0;
}

.live-guidance .tracking-chip {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(6, 8, 11, 0.9);
  color: var(--white);
}

.live-guidance .tracking-status {
  max-width: min(620px, 72vw);
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(6, 8, 11, 0.86);
  color: var(--white);
}

.motion-tutorial {
  position: absolute;
  z-index: 12;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  display: none;
  width: min(620px, calc(100% - 28px));
  margin: 0 auto;
  padding: 13px 15px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(6, 8, 11, 0.9);
  color: var(--white);
  pointer-events: none;
}

.controller-app.camera-active[data-game-mode="three-tracks"] .motion-tutorial {
  display: block;
}

.controller-app.camera-active[data-game-mode="gummy-night-shift"] .motion-tutorial {
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 86px));
  display: block;
}

.controller-app.camera-active[data-game-mode="three-tracks"] .motion-tutorial[data-phase="calibrating"],
.controller-app.camera-active[data-game-mode="three-tracks"] .motion-tutorial[data-phase="target"] {
  border-color: rgba(119, 206, 255, 0.9);
  box-shadow: 0 0 0 6px rgba(119, 206, 255, 0.12), 0 18px 56px rgba(0, 0, 0, 0.42);
  animation: motionInstructionPulse 1.15s ease-in-out infinite;
}

.controller-app.camera-active .live-guidance {
  display: none;
}

.controller-app[data-body-gesture="squat"] .motion-tutorial {
  top: max(178px, 23vh);
  bottom: auto;
}

.motion-tutorial-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--sky);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.motion-tutorial-content {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-top: 7px;
}

.motion-tutorial-copy {
  min-width: 0;
}

.motion-tutorial-copy > strong,
.motion-tutorial > strong {
  display: block;
  font-size: clamp(16px, 4.6vw, 23px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.motion-tutorial-copy > p,
.motion-tutorial > p {
  margin: 5px 0 0;
  color: #c5cbd3;
  font-size: 10px;
  line-height: 1.35;
}

.motion-tutorial-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.motion-tutorial-steps span {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 2px;
  padding: 7px 2px 0;
  color: #858c95;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.motion-tutorial-steps i {
  display: grid;
  width: 22px;
  height: 22px;
  border: 1px solid #68707a;
  border-radius: 50%;
  place-items: center;
  font-style: normal;
  font-size: 12px;
}

.motion-tutorial-steps .is-active {
  color: var(--white);
}

.motion-tutorial-steps .is-active i {
  border-color: var(--sky);
  background: var(--sky);
  color: var(--ink);
}

.motion-tutorial-steps .is-complete {
  color: #83f5ba;
}

.motion-tutorial-steps .is-complete i {
  border-color: #62d393;
  background: #62d393;
  color: var(--ink);
}

.motion-tutorial[data-step="ready"] {
  border-color: rgba(98, 211, 147, 0.8);
  background: rgba(6, 24, 17, 0.92);
}

.motion-tutorial[data-step="ready"] .motion-tutorial-heading {
  color: #83f5ba;
}

.motion-tutorial[data-step="ready"] .motion-tutorial-steps {
  display: none;
}

.motion-tutorial[data-step="ready"] .gesture-coach {
  --coach-accent: #83f5ba;
}

@media (prefers-reduced-motion: reduce) {
  .controller-app .motion-tutorial,
  .gesture-coach-person,
  .gesture-coach .coach-arm,
  .gesture-coach-arrow {
    animation: none !important;
    transition: none !important;
  }
}

/* The tutorial overlay must never survive visually into gameplay. Keep this
   final, id-specific rule stronger than arena layout variants defined later. */
.display-app #arenaMessage.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Final party-screen override: this intentionally sits after every legacy
   game-specific rule so Hockey and BAM cannot fall back to a dark grid. */
.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) {
  padding: max(150px, 21vh) clamp(24px, 7vw, 54px) max(42px, 7vh) !important;
  background:
    radial-gradient(circle at 10% 13%, rgba(53,220,238,.68) 0 4%, transparent 4.4%),
    radial-gradient(circle at 88% 17%, rgba(255,85,117,.72) 0 3.2%, transparent 3.6%),
    radial-gradient(circle at 78% 83%, rgba(255,214,70,.58) 0 4.5%, transparent 4.9%),
    linear-gradient(180deg, #061431 0 31%, #f7f0e4 31.2% 100%) !important;
  color: #07142d !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"])::before {
  content: "↻" !important;
  top: max(24px, 4vh) !important;
  width: clamp(132px, 41vw, 210px) !important;
  height: clamp(72px, 23vw, 114px) !important;
  border: 4px solid #fff !important;
  border-radius: clamp(20px, 5vw, 31px) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 25% 50%, #47deea 0 7%, transparent 7.6%),
    radial-gradient(circle at 75% 50%, #ff5575 0 7%, transparent 7.6%),
    linear-gradient(135deg, #5547ff, #7a38ed) !important;
  box-shadow: 0 0 0 9px rgba(255,255,255,.1), 0 24px 54px rgba(0,0,0,.35) !important;
  opacity: 1 !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"])::after {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 16% 43%, rgba(85,71,255,.16) 0 5%, transparent 5.4%),
    radial-gradient(circle at 91% 54%, rgba(255,85,117,.15) 0 7%, transparent 7.4%),
    radial-gradient(circle at 7% 90%, rgba(71,222,234,.18) 0 6%, transparent 6.4%) !important;
  background-size: auto !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) > span {
  border-color: rgba(85,71,255,.25) !important;
  background: rgba(85,71,255,.1) !important;
  color: #5547ff !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) h1 {
  color: #07142d !important;
  text-shadow: none !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) h1 em {
  color: #5547ff !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) p {
  color: #26334d !important;
  text-shadow: none !important;
}

/* Party camera setup uses one Color Chomp language everywhere: navy header,
   warm paper, bright orbiting colour forms. Never use a calibration grid on
   the rotate/error screens — it reads like a developer tool on a phone. */
.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) {
  padding: max(150px, 21vh) clamp(24px, 7vw, 54px) max(42px, 7vh) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 10% 13%, rgba(53, 220, 238, .68) 0 4%, transparent 4.4%),
    radial-gradient(circle at 88% 17%, rgba(255, 85, 117, .72) 0 3.2%, transparent 3.6%),
    radial-gradient(circle at 78% 83%, rgba(255, 214, 70, .58) 0 4.5%, transparent 4.9%),
    linear-gradient(180deg, #061431 0 31%, #f7f0e4 31.2% 100%) !important;
  color: #07142d !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"])::before {
  content: "↻" !important;
  top: max(24px, 4vh) !important;
  width: clamp(132px, 41vw, 210px) !important;
  height: clamp(72px, 23vw, 114px) !important;
  border: 4px solid #fff !important;
  border-radius: clamp(20px, 5vw, 31px) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 25% 50%, #47deea 0 7%, transparent 7.6%),
    radial-gradient(circle at 75% 50%, #ff5575 0 7%, transparent 7.6%),
    linear-gradient(135deg, #5447ff, #7a38ed) !important;
  box-shadow: 0 0 0 9px rgba(255,255,255,.1), 0 24px 54px rgba(0,0,0,.35) !important;
  opacity: 1 !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"])::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 16% 43%, rgba(85,71,255,.16) 0 5%, transparent 5.4%),
    radial-gradient(circle at 91% 54%, rgba(255,85,117,.15) 0 7%, transparent 7.4%),
    radial-gradient(circle at 7% 90%, rgba(71,222,234,.18) 0 6%, transparent 6.4%);
  -webkit-mask-image: none;
  mask-image: none;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) > span {
  padding: 7px 13px !important;
  border: 1px solid rgba(84,71,255,.25) !important;
  border-radius: 999px !important;
  background: rgba(84,71,255,.1) !important;
  color: #5547ff !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) h1 {
  max-width: 10em !important;
  color: #07142d !important;
  text-shadow: none !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) h1 em {
  color: #5547ff !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) p {
  color: #26334d !important;
  text-shadow: none !important;
}

/* BAM keeps a single compositor-driven reticle above the throttled world
   canvas. Both alternating shots use this exact position for hit testing. */
.bam-reticle {
  --bam-color: #36e6f1;
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 42%;
  width: clamp(58px, 5.4vw, 96px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 160ms ease;
  will-change: left, top, transform;
  filter: drop-shadow(0 7px 12px rgba(25, 25, 74, .28));
}

.display-app[data-game-mode="say-bam"]:is([data-view="game"], [data-view="countdown"]) .bam-reticle[data-ready="true"] {
  opacity: 1;
}

.display-app[data-game-mode="say-bam"]:is([data-view="calibration"], [data-view="ready"])
  .bam-reticle[data-ready="true"] {
  z-index: 12;
  opacity: 0.96;
}

.display-app[data-game-mode="say-bam"]:is([data-view="calibration"], [data-view="ready"])
  .bam-reticle[data-ready="true"]::after {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 6px 10px;
  transform: translateX(-50%);
  border: 2px solid #151741;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #151741;
  content: "YOUR HAND";
  font: 900 clamp(10px, 0.75vw, 14px)/1 Arial, sans-serif;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

html[lang="pl"] .display-app[data-game-mode="say-bam"]:is([data-view="calibration"], [data-view="ready"])
  .bam-reticle[data-ready="true"]::after {
  content: "TWOJA RĘKA";
}

.bam-reticle[data-weapon="right"] { --bam-color: #ff5f9f; }

.bam-reticle > i,
.bam-reticle > b {
  position: absolute;
  inset: 10%;
  border: clamp(3px, .28vw, 6px) solid #151741;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 24px rgba(54,230,241,.62);
}

.bam-reticle[data-weapon="right"] > i,
.bam-reticle[data-weapon="right"] > b {
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 24px rgba(255,95,159,.62);
}

.bam-reticle > i::before,
.bam-reticle > i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--bam-color);
  border: 2px solid #151741;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.bam-reticle > i::before { width: 146%; height: 8px; }
.bam-reticle > i::after { width: 8px; height: 146%; }
.bam-reticle > b {
  inset: 27%;
  z-index: 2;
  border-color: var(--bam-color);
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 4px rgba(21,23,65,.92);
}

.bam-reticle > span {
  position: absolute;
  z-index: 3;
  right: -4px;
  bottom: -2px;
  display: grid;
  width: clamp(24px, 1.9vw, 34px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #151741;
  border-radius: 50%;
  background: var(--bam-color);
  color: #151741;
  font-size: clamp(10px, .8vw, 14px);
  font-weight: 1000;
}

.bam-reticle.is-shot { animation: bam-reticle-shot 300ms ease-out; }
.bam-reticle.is-charged > i { box-shadow: 0 0 0 5px #ffe45f, 0 0 38px rgba(255,228,95,.9); }

@keyframes bam-reticle-shot {
  0% { transform: translate3d(-50%, -50%, 0) scale(1); }
  34% { transform: translate3d(-50%, -50%, 0) scale(1.28); }
  100% { transform: translate3d(-50%, -50%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bam-reticle { transition: none !important; }
  .bam-reticle.is-shot { animation: none !important; }
}

/* ICE HOCKEY broadcast frame. The rink is the only interactive surface;
   title, score, controls and transport status live outside it. */
.display-app[data-game-mode="air-hockey"][data-view]:not([data-view="lobby"]):not([data-view="game-picker"]) .arena-section {
  display: grid;
  grid-template-rows: minmax(58px, auto) minmax(0, 1fr) 64px;
  gap: clamp(9px, 1.35vh, 15px);
  padding: clamp(13px, 1.9vh, 22px) clamp(24px, 3vw, 58px) clamp(10px, 1.5vh, 17px);
  background:
    linear-gradient(180deg, rgba(3, 13, 29, 0.17), rgba(3, 10, 24, 0.58)),
    url("/ruch/assets/game/hockey/ice-arena-v1.webp") center / cover no-repeat,
    #06152a;
}

.display-app[data-game-mode="air-hockey"][data-view]:not([data-view="lobby"]):not([data-view="game-picker"]) .arena-hud {
  position: relative !important;
  z-index: 8;
  inset: auto !important;
  grid-row: 1;
  width: min(100%, 1500px);
  min-height: 0;
  align-items: center;
  align-self: center;
  gap: 18px;
  margin: 0 auto;
  transform: none !important;
}

.display-app[data-game-mode="air-hockey"] .arena-name {
  display: flex;
  min-width: 270px;
  align-items: center;
  gap: 14px;
  padding: 9px 15px !important;
  border: 1px solid rgba(148, 225, 255, 0.42) !important;
  border-radius: 16px;
  background: rgba(4, 18, 37, 0.78) !important;
  box-shadow: 0 12px 38px rgba(0, 5, 18, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(1.18);
  transform: none !important;
}

.display-app[data-game-mode="air-hockey"] .arena-name > span {
  margin: 0;
  padding-right: 13px;
  border-right: 1px solid rgba(148, 225, 255, 0.28);
  color: #9bdfff;
  font-size: clamp(10px, 0.7vw, 13px);
  line-height: 1.15;
  white-space: nowrap;
}

.display-app[data-game-mode="air-hockey"] .arena-name h1 {
  color: #f5fbff;
  font-size: clamp(22px, 1.7vw, 31px) !important;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.display-app[data-game-mode="air-hockey"] .scoreboard {
  overflow: hidden;
  border: 1px solid rgba(148, 225, 255, 0.36) !important;
  border-radius: 16px;
  background: rgba(4, 18, 37, 0.82) !important;
  box-shadow: 0 12px 38px rgba(0, 5, 18, 0.3), inset 0 1px rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(16px) saturate(1.18);
  transform: none !important;
}

.display-app[data-game-mode="air-hockey"] .scoreboard span {
  min-width: clamp(122px, 9.5vw, 170px) !important;
  padding: 8px 17px 9px !important;
  color: #a9c9dc;
}

.display-app[data-game-mode="air-hockey"] .scoreboard span:nth-child(n + 3) {
  display: none;
}

.display-app[data-game-mode="air-hockey"] .scoreboard span:first-child strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2em;
  background: none;
  color: #f9fdff;
  font-size: clamp(25px, 2vw, 37px);
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.display-app[data-game-mode="air-hockey"] #scoreValue [data-hockey-score] {
  min-width: 0.72em;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.display-app[data-game-mode="air-hockey"] #scoreValue [data-hockey-score="left"] {
  color: #5ce7ff;
  -webkit-text-fill-color: #5ce7ff;
  text-shadow: 0 0 16px rgba(57, 218, 255, 0.52), 0 2px 8px rgba(0, 8, 22, 0.8);
}

.display-app[data-game-mode="air-hockey"] #scoreValue [data-hockey-score="right"] {
  color: #ff77aa;
  -webkit-text-fill-color: #ff77aa;
  text-shadow: 0 0 16px rgba(255, 78, 145, 0.5), 0 2px 8px rgba(0, 8, 22, 0.8);
}

.display-app[data-game-mode="air-hockey"] #scoreValue b {
  color: #fff;
  -webkit-text-fill-color: #fff;
  font: inherit;
}

.display-app[data-game-mode="air-hockey"] .scoreboard span:nth-child(2) strong {
  color: #fff4b6;
  font-size: clamp(20px, 1.45vw, 29px);
}

.display-app[data-game-mode="air-hockey"][data-view]:not([data-view="lobby"]):not([data-view="game-picker"]) .arena-shell {
  position: relative !important;
  inset: auto !important;
  grid-row: 2;
  width: auto !important;
  max-width: 100%;
  height: 100% !important;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  align-self: center;
  justify-self: center;
  overflow: visible;
  border: 2px solid rgba(185, 235, 255, 0.72) !important;
  border-radius: clamp(18px, 1.5vw, 27px) !important;
  background: #dff7ff;
  box-shadow:
    0 0 0 7px rgba(7, 30, 56, 0.72),
    0 25px 70px rgba(0, 4, 18, 0.58),
    -22px 0 62px rgba(53, 204, 255, 0.13),
    22px 0 62px rgba(255, 71, 119, 0.13);
}

.display-app[data-game-mode="air-hockey"] .arena-shell > video,
.display-app[data-game-mode="air-hockey"] .arena-shell > img,
.display-app[data-game-mode="air-hockey"] .arena-shell > canvas,
.display-app[data-game-mode="air-hockey"] .camera-scrim {
  border-radius: inherit;
}

.hockey-power-rails {
  display: none;
}

.display-app[data-game-mode="air-hockey"][data-view="game"] .hockey-power-rails,
.display-app[data-game-mode="air-hockey"][data-view="countdown"] .hockey-power-rails {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.hockey-power-rail {
  position: absolute;
  top: 23%;
  display: grid;
  width: clamp(42px, 3.6vw, 62px);
  height: 54%;
  justify-items: center;
  color: #eafaff;
  filter: drop-shadow(0 12px 24px rgba(0, 4, 18, .48));
  transition: opacity 160ms ease, filter 160ms ease;
}

.hockey-power-rail-left {
  left: clamp(-72px, -4.8vw, -52px);
}

.hockey-power-rail-right {
  right: clamp(-72px, -4.8vw, -52px);
}

.hockey-power-rail > span,
.hockey-power-rail > strong {
  position: absolute;
  left: 50%;
  min-width: 3.2em;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(3, 13, 29, .9);
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: .1em;
  text-align: center;
  transform: translateX(-50%);
}

.hockey-power-rail > span { top: -27px; }
.hockey-power-rail > strong { bottom: -27px; color: rgba(232,247,255,.82); }

.hockey-power-rail > i {
  position: relative;
  display: block;
  width: clamp(15px, 1.2vw, 22px);
  height: 100%;
  overflow: visible;
  border: 2px solid rgba(232, 248, 255, .78);
  border-radius: 999px;
  background: rgba(2, 12, 28, .86);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.07), 0 0 24px rgba(86,211,255,.12);
}

.hockey-power-rail > i::after {
  content: "";
  position: absolute;
  inset: 5px 3px;
  z-index: 2;
  border-radius: inherit;
  opacity: .28;
  background: repeating-linear-gradient(to top, transparent 0 12%, rgba(255,255,255,.55) 12% 13%, transparent 13% 25%);
  pointer-events: none;
}

.hockey-power-rail > i > b {
  position: absolute;
  inset: 4px 3px;
  z-index: 1;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  will-change: transform;
}

.hockey-power-rail-left > i > b {
  background: linear-gradient(to top, #148ec9 0%, #40e2ff 65%, #edfdff 100%);
  box-shadow: 0 0 20px rgba(56, 221, 255, .72);
}

.hockey-power-rail-right > i > b {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.2) 0 4px, transparent 4px 8px),
    linear-gradient(to top, #b11f62 0%, #ff5eab 65%, #fff0f8 100%);
  box-shadow: 0 0 20px rgba(255, 79, 159, .68);
}

.hockey-power-rail > i > em {
  position: absolute;
  z-index: 4;
  left: 50%;
  width: calc(100% + 12px);
  height: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  opacity: .85;
  transform: translate(-50%, 50%);
  transition: bottom 80ms linear;
}

.display-app[data-game-mode="air-hockey"][data-party-tracking-paused="true"] .hockey-power-rail,
.hockey-power-rail[data-active="false"] {
  opacity: .32;
  filter: grayscale(.35) drop-shadow(0 8px 16px rgba(0, 4, 18, .32));
}

.hockey-power-rail.is-impact > i {
  animation: hockey-power-impact 300ms ease-out;
}

@keyframes hockey-power-impact {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.18, 1.035); filter: brightness(1.85); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 1360px), (max-height: 760px) {
  .hockey-power-rail-left { left: -50px; }
  .hockey-power-rail-right { right: -50px; }
  .hockey-power-rail { width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .hockey-power-rail,
  .hockey-power-rail > i > em,
  .hockey-power-rail.is-impact > i {
    animation: none !important;
    transition: none !important;
  }
}

.display-app[data-game-mode="air-hockey"] .arena-message {
  border-radius: inherit;
}

.display-app[data-game-mode="air-hockey"][data-view="calibration"] #arenaCanvas,
.display-app[data-game-mode="air-hockey"][data-view="ready"] #arenaCanvas,
.display-app[data-game-mode="air-hockey"][data-view="countdown"] #arenaCanvas,
.display-app[data-game-mode="air-hockey"][data-view="calibration"] #remoteVideo,
.display-app[data-game-mode="air-hockey"][data-view="ready"] #remoteVideo,
.display-app[data-game-mode="air-hockey"][data-view="countdown"] #remoteVideo,
.display-app[data-game-mode="air-hockey"][data-view="calibration"] #compatPreview,
.display-app[data-game-mode="air-hockey"][data-view="ready"] #compatPreview,
.display-app[data-game-mode="air-hockey"][data-view="countdown"] #compatPreview {
  filter: blur(4px) brightness(0.64) saturate(0.82);
  transform: scale(1.015);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"],
.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-tracking-lost"] {
  padding: clamp(24px, 4vh, 52px) clamp(30px, 4vw, 70px);
  background: rgba(3, 13, 29, 0.62);
  backdrop-filter: blur(7px) saturate(0.9);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .message-index,
.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-tracking-lost"] .message-index {
  margin-bottom: clamp(8px, 1.2vh, 14px);
  padding: 6px 11px;
  border: 1px solid rgba(166, 225, 255, 0.35);
  border-radius: 999px;
  background: rgba(5, 25, 48, 0.68);
  color: #b8eaff;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-one"] .arena-message[data-stage="hockey-onboarding"] .gesture-coach-tv,
.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-two"] .arena-message[data-stage="hockey-onboarding"] .gesture-coach-tv {
  display: block;
  width: clamp(104px, 8.4vw, 142px);
  height: clamp(116px, 9.4vw, 158px);
  margin: 5px 0 10px;
  border-color: rgba(97, 229, 255, 0.74);
  border-radius: 25px;
  background:
    linear-gradient(90deg, rgba(40, 213, 255, 0.2) 0 49%, rgba(255,255,255,.04) 49% 51%, rgba(255, 78, 148, 0.12) 51%),
    rgba(3, 15, 33, 0.82);
  box-shadow: inset 0 0 30px rgba(78, 221, 255, 0.12), 0 12px 32px rgba(0, 5, 18, 0.36);
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-two"] .arena-message[data-stage="hockey-onboarding"] .gesture-coach-tv {
  --coach-accent: #ff79a9;
  border-color: rgba(255, 108, 158, 0.8);
  background:
    linear-gradient(90deg, rgba(40, 213, 255, 0.1) 0 49%, rgba(255,255,255,.04) 49% 51%, rgba(255, 78, 148, 0.22) 51%),
    rgba(3, 15, 33, 0.82);
  box-shadow: inset 0 0 30px rgba(255, 78, 148, 0.13), 0 12px 32px rgba(0, 5, 18, 0.36);
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-one"] .arena-message[data-stage="hockey-onboarding"] .gesture-coach-arrow {
  right: auto;
  left: 5%;
  color: #72eaff;
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-one"] .arena-message[data-stage="hockey-onboarding"] .gesture-coach-arrow::before {
  content: "←";
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-two"] .arena-message[data-stage="hockey-onboarding"] .gesture-coach-arrow {
  right: 5%;
  color: #ff8db1;
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-two"] .arena-message[data-stage="hockey-onboarding"] .gesture-coach-arrow::before {
  content: "→";
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-one"] .arena-message[data-stage="hockey-onboarding"] .coach-arm-left,
.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-two"] .arena-message[data-stage="hockey-onboarding"] .coach-arm-left {
  animation: hockey-choose-left-hand 2.2s ease-in-out infinite;
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-one"] .arena-message[data-stage="hockey-onboarding"] .coach-arm-right,
.display-app[data-game-mode="air-hockey"][data-hockey-onboarding="player-two"] .arena-message[data-stage="hockey-onboarding"] .coach-arm-right {
  animation: hockey-choose-right-hand 2.2s ease-in-out infinite;
}

@keyframes hockey-choose-left-hand {
  0%, 42% { transform: rotate(145deg); filter: brightness(1.25); }
  55%, 100% { transform: rotate(13deg); filter: brightness(.7); }
}

@keyframes hockey-choose-right-hand {
  0%, 42% { transform: rotate(-13deg); filter: brightness(.7); }
  55%, 100% { transform: rotate(-145deg); filter: brightness(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .coach-arm-left {
    animation: none;
    transform: rotate(145deg);
  }

  .display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .coach-arm-right {
    animation: none;
    transform: rotate(-13deg);
  }
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] h2,
.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-tracking-lost"] h2 {
  max-width: 19ch;
  margin: 0 0 10px;
  padding: 13px 24px;
  border: 1px solid rgba(185, 235, 255, 0.62);
  border-radius: 16px;
  background: rgba(4, 18, 37, 0.9);
  color: #f7fbff;
  box-shadow: 0 13px 45px rgba(0, 7, 20, 0.38), inset 0 1px rgba(255, 255, 255, 0.1);
  font-size: clamp(31px, 3.1vw, 57px);
  line-height: 0.94;
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding^="player-one"] .arena-message[data-stage="hockey-onboarding"] h2 {
  border-color: rgba(83, 224, 255, 0.82);
  color: #72eaff;
}

.display-app[data-game-mode="air-hockey"][data-hockey-onboarding^="player-two"] .arena-message[data-stage="hockey-onboarding"] h2 {
  border-color: rgba(255, 104, 151, 0.84);
  color: #ff8db1;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] > p,
.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-tracking-lost"] > p {
  max-width: 820px;
  margin: 0;
  color: #eef8ff;
  font-size: clamp(15px, 1.15vw, 22px);
  font-weight: 650;
  line-height: 1.38;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .tv-setup-steps {
  width: min(100%, 980px);
  margin-top: clamp(13px, 2vh, 23px);
  border: 0;
  gap: 10px;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .tv-setup-steps li {
  min-height: 68px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid rgba(183, 226, 247, 0.24);
  border-radius: 14px;
  background: rgba(4, 18, 37, 0.72);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .tv-setup-steps li + li {
  border-left: 1px solid rgba(183, 226, 247, 0.24);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .setup-feedback {
  margin-top: clamp(12px, 1.7vh, 20px);
  border-color: rgba(255, 232, 112, 0.54);
  border-radius: 999px;
  background: rgba(13, 25, 41, 0.9);
  box-shadow: 0 10px 35px rgba(0, 5, 18, 0.3);
  color: #fff3a4;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.display-app[data-game-mode="air-hockey"] .legend,
.display-app[data-game-mode="air-hockey"] .video-status,
.display-app[data-game-mode="air-hockey"] .sound-toggle {
  top: calc(100% + clamp(9px, 1.3vh, 14px)) !important;
  bottom: auto !important;
  min-height: 45px;
  border: 1px solid rgba(166, 225, 255, 0.34);
  border-radius: 14px;
  background: rgba(4, 18, 37, 0.84);
  box-shadow: 0 10px 34px rgba(0, 4, 18, 0.3), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(1.15);
  transform: none !important;
}

.display-app[data-game-mode="air-hockey"] .legend {
  right: auto !important;
  left: 0 !important;
  gap: 10px;
  padding: 7px 10px;
}

.display-app[data-game-mode="air-hockey"] .legend span {
  display: grid;
  min-width: 120px;
  grid-template-columns: 11px auto;
  column-gap: 7px;
  row-gap: 1px;
  color: #d8e9f3;
}

.display-app[data-game-mode="air-hockey"] .legend span i {
  grid-row: 1 / span 2;
  align-self: center;
}

.display-app[data-game-mode="air-hockey"] .legend span b,
.display-app[data-game-mode="air-hockey"] .legend span em {
  font-style: normal;
  line-height: 1.1;
}

.display-app[data-game-mode="air-hockey"] .legend span b {
  color: #f5fbff;
  font-size: clamp(9px, 0.68vw, 12px);
  letter-spacing: 0.03em;
}

.display-app[data-game-mode="air-hockey"] .legend span em {
  color: #9fb9ca;
  font-size: clamp(8px, 0.55vw, 10px);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.display-app[data-game-mode="air-hockey"] .video-status {
  right: 0 !important;
  left: auto !important;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 8px 12px;
  color: #c6dce8;
  font-size: clamp(8px, 0.58vw, 11px);
  font-weight: 850;
  letter-spacing: 0.035em;
  line-height: 1.1;
  text-transform: uppercase;
}

.display-app[data-game-mode="air-hockey"] .video-status::before {
  content: "VIDEO";
  color: #75ddff;
  font-size: clamp(7px, 0.48vw, 9px);
  font-weight: 950;
  letter-spacing: 0.14em;
}

.display-app[data-game-mode="air-hockey"] .sound-toggle {
  right: clamp(225px, 19vw, 310px) !important;
  left: auto !important;
  padding: 7px 12px;
  color: #eef9ff;
}

.display-app[data-game-mode="air-hockey"] .legend [data-hockey-bonus] {
  min-width: 150px;
}

.display-app[data-game-mode="air-hockey"] .legend i.bonus {
  border-radius: 4px;
  background: linear-gradient(135deg, #ff8c42, #ffe56b 35%, #69efff 68%, #ff67b9);
  box-shadow: 0 0 12px rgba(255, 211, 90, 0.55);
}

.display-app[data-game-mode="air-hockey"][data-hockey-bonus="fire"] .legend [data-hockey-bonus] {
  border-color: rgba(255, 146, 62, 0.58);
}

.display-app[data-game-mode="air-hockey"][data-hockey-bonus="shield"] .legend [data-hockey-bonus] {
  border-color: rgba(104, 240, 255, 0.62);
}

.display-app[data-game-mode="air-hockey"][data-hockey-bonus="power-size"] .legend [data-hockey-bonus] {
  border-color: rgba(255, 104, 185, 0.62);
}

/* End-of-match flow stays on the TV. The frozen rink remains visible as
   context, but the result and the three hand-controlled decisions win the
   visual hierarchy at living-room distance. */
.display-app[data-game-mode="air-hockey"][data-view="game-over"] #arenaCanvas,
.display-app[data-game-mode="air-hockey"][data-view="game-over"] #remoteVideo,
.display-app[data-game-mode="air-hockey"][data-view="game-over"] #compatPreview {
  filter: blur(7px) brightness(0.38) saturate(0.82);
  transform: scale(1.025);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] {
  padding: clamp(24px, 4vh, 50px) clamp(28px, 4vw, 68px);
  background:
    radial-gradient(circle at 18% 18%, rgba(62, 220, 255, 0.17), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(255, 78, 165, 0.18), transparent 36%),
    rgba(2, 9, 23, 0.82);
  color: #fff;
  backdrop-filter: blur(12px) saturate(1.15);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .message-index {
  margin-bottom: 9px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(2, 12, 28, 0.76);
  color: #dff8ff;
  font-size: clamp(10px, 0.8vw, 14px);
  font-weight: 900;
  letter-spacing: 0.13em;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] h2 {
  max-width: 18ch;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #70eaff;
  font-size: clamp(38px, 4.6vw, 80px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-shadow: 0 0 34px rgba(70, 222, 255, 0.32), 0 8px 30px rgba(0, 0, 0, 0.45);
}

.display-app[data-game-mode="air-hockey"][data-hockey-winner="right"] .arena-message[data-stage="hockey-game-over"] h2 {
  color: #ff79ba;
  text-shadow: 0 0 34px rgba(255, 74, 165, 0.34), 0 8px 30px rgba(0, 0, 0, 0.45);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] > p {
  max-width: 1040px;
  margin: 0;
  color: #fff;
  font-size: clamp(15px, 1.15vw, 22px);
  font-weight: 720;
  line-height: 1.36;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1120px, 100%);
  margin-top: clamp(16px, 2.4vh, 26px);
  gap: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li {
  position: relative;
  min-height: clamp(104px, 14vh, 154px);
  align-items: center;
  overflow: hidden;
  padding: clamp(15px, 2vh, 23px);
  border: 2px solid rgba(183, 226, 247, 0.24);
  border-radius: 20px;
  background: rgba(5, 19, 39, 0.84);
  color: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.33), inset 0 1px rgba(255, 255, 255, 0.08);
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  opacity: 0.96 !important;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li + li {
  border-left-width: 2px;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li.is-active {
  border-color: #70eaff;
  background: rgba(10, 52, 76, 0.94);
  box-shadow: 0 0 0 5px rgba(80, 224, 255, 0.13), 0 20px 55px rgba(0, 0, 0, 0.42);
  transform: translateY(-4px);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li b {
  display: grid;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(112, 234, 255, 0.14);
  color: #70eaff;
  place-items: center;
  font-size: 26px;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li[data-hockey-end-choice="new-players"] b {
  background: rgba(255, 104, 185, 0.14);
  color: #ff83c4;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li[data-hockey-end-choice="choose-game"] b {
  background: rgba(255, 228, 111, 0.14);
  color: #ffe477;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li span {
  color: #fff;
  font-size: clamp(18px, 1.45vw, 28px);
  line-height: 1;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li:not(.is-active) span {
  color: #f1f8ff !important;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li strong {
  color: #b9cfdd;
  font-size: clamp(10px, 0.72vw, 13px);
  line-height: 1.25;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li:not(.is-active) strong {
  color: #bad0df !important;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li span i {
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .tv-setup-steps li span i::before {
  display: block;
  width: var(--hockey-choice-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54e5ff, #fff27b);
  box-shadow: 0 0 16px rgba(93, 232, 255, 0.62);
  content: "";
  transition: width 90ms linear;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-game-over"] .setup-feedback {
  margin-top: 13px;
  border-color: rgba(255, 241, 135, 0.5);
  background: rgba(255, 231, 92, 0.13);
  color: #fff5a8;
}

/* During the result screen the camera remains full-screen, but the hamburger
   becomes a deliberate escape hatch for changing players/game on the phone. */
.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .live-topbar {
  position: fixed !important;
  z-index: 24 !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  left: auto !important;
  display: block !important;
  width: 94px !important;
  height: 52px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"].drawer-open .live-topbar {
  z-index: 18 !important;
  pointer-events: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .live-brand,
.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .live-state {
  display: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .menu-button {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  width: 94px !important;
  height: 52px !important;
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 16px !important;
  background: rgba(3, 12, 27, 0.88) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  grid-template-columns: 21px auto;
  grid-template-rows: repeat(3, 2px);
  place-content: center;
  gap: 5px 7px;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .menu-button::after {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  color: #fff;
  content: "MENU";
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.controller-app.is-paired[data-game-mode="air-hockey"].drawer-open .control-drawer .controller-game-dock {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.controller-app.is-paired[data-game-mode="air-hockey"] .control-drawer #startButton,
.controller-app.is-paired[data-game-mode="air-hockey"] .control-drawer #pauseButton {
  display: none !important;
}

.controller-app.is-paired[data-game-mode="air-hockey"] .control-drawer #resetButton {
  display: flex !important;
  grid-column: 1 / -1;
  min-height: 54px;
  justify-content: center;
  border-color: rgba(87, 226, 255, 0.5);
  background: rgba(54, 203, 236, 0.13);
}

/* Game chooser: keep the atmospheric background, but make both choices read
   as premium, distinct product cards instead of generic setup rows. */
.display-app[data-view="game-picker"] .arena-message[data-stage="game-picker"] {
  background:
    radial-gradient(circle at 22% 22%, rgba(65, 212, 255, 0.18), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(255, 73, 157, 0.2), transparent 36%),
    rgba(3, 8, 20, 0.7);
  backdrop-filter: blur(7px) saturate(1.1);
}

.display-app[data-view="game-picker"] .arena-message[data-stage="game-picker"] h2 {
  max-width: 20ch;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.42);
}

.display-app[data-view="game-picker"] .arena-message[data-stage="game-picker"] .tv-setup-steps li {
  position: relative;
  overflow: hidden;
  min-height: clamp(112px, 15vh, 160px);
  padding: clamp(18px, 2.4vh, 28px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.15);
}

.display-app[data-view="game-picker"] .arena-message[data-stage="game-picker"] .tv-setup-steps li[data-party-tv-game="hockey"] {
  background:
    radial-gradient(circle at 88% 18%, rgba(164, 241, 255, 0.32), transparent 26%),
    linear-gradient(135deg, rgba(4, 47, 82, 0.96), rgba(8, 24, 48, 0.93));
}

.display-app[data-view="game-picker"] .arena-message[data-stage="game-picker"] .tv-setup-steps li[data-party-tv-game="bam"] {
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 171, 220, 0.26), transparent 26%),
    linear-gradient(135deg, rgba(84, 17, 79, 0.96), rgba(31, 11, 50, 0.94));
}

.display-app[data-view="game-picker"] .arena-message[data-stage="game-picker"] .tv-setup-steps li b {
  display: grid;
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  place-items: center;
  font-size: 16px;
}

.display-app[data-view="game-picker"] .arena-message[data-stage="game-picker"] .tv-setup-steps li span {
  gap: 9px;
  font-size: clamp(23px, 2vw, 36px);
  letter-spacing: -0.025em;
}

.display-app[data-view="game-picker"] .arena-message[data-stage="game-picker"] .tv-setup-steps li strong {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  color: #cbd8e8;
  font-size: clamp(12px, 0.9vw, 16px);
  letter-spacing: 0.01em;
}

@media (max-height: 800px) and (min-width: 901px) {
  .display-app[data-game-mode="air-hockey"][data-view]:not([data-view="lobby"]):not([data-view="game-picker"]) .arena-section {
    grid-template-rows: 55px minmax(0, 1fr) 56px;
    gap: 8px;
    padding-top: 9px;
    padding-bottom: 8px;
  }

  .display-app[data-game-mode="air-hockey"] .arena-name {
    min-width: 235px;
    padding: 6px 11px !important;
  }

  .display-app[data-game-mode="air-hockey"] .arena-name h1 {
    font-size: 22px !important;
  }

  .display-app[data-game-mode="air-hockey"] .scoreboard span {
    min-width: 108px !important;
    padding: 6px 12px !important;
  }

  .display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] {
    padding: 18px 28px;
  }

  .display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] h2 {
    margin-bottom: 6px;
    padding: 10px 18px;
    font-size: clamp(28px, 3vw, 42px);
  }

  .display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] > p {
    font-size: 14px;
  }

  .display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .tv-setup-steps {
    margin-top: 10px;
  }

  .display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .tv-setup-steps li {
    min-height: 55px;
    padding: 8px 10px;
  }

  .display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] .setup-feedback {
    min-height: 36px;
    margin-top: 9px;
    padding: 8px 13px;
  }

  .display-app[data-game-mode="air-hockey"] .legend span {
    min-width: 105px;
  }
}

.display-app[data-manual-mode="true"][data-game-mode="circle-munch"] #arenaCanvas,
.display-app[data-manual-mode="true"][data-game-mode="say-bam"] #arenaCanvas {
  cursor: crosshair;
  pointer-events: auto;
}

/* GLOWTAIL is player-facing even though the compatibility mode id remains
   circle-munch. Keep its TV coach and its camera surface deliberately small:
   the instructions live on the TV, the phone is only a mirrored viewfinder. */
.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="setup"] .gesture-coach-tv,
.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="ready"] .gesture-coach-tv,
.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="glowtail-hand-lost"] .gesture-coach-tv {
  --coach-accent: #47bfd0;
  display: block;
  border-color: rgba(71, 191, 208, 0.42);
  background:
    radial-gradient(circle at 50% 45%, rgba(207, 190, 246, 0.42), transparent 56%),
    rgba(255, 253, 247, 0.78);
  box-shadow: inset 0 0 34px rgba(132, 225, 210, 0.18), 0 16px 42px rgba(73, 108, 128, 0.14);
}

.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="setup"] .coach-arm-left {
  animation: glowtailChooseLeft 1.8s ease-in-out infinite;
}

.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="setup"] .coach-arm-right {
  animation: glowtailChooseRight 1.8s ease-in-out infinite;
}

.display-app[data-game-mode="circle-munch"][data-glowtail-hand="left"] .arena-message .coach-arm-left,
.display-app[data-game-mode="circle-munch"][data-glowtail-hand="right"] .arena-message .coach-arm-right {
  opacity: 1;
  filter: drop-shadow(0 2px 7px rgba(41, 137, 153, 0.42));
  animation: glowtailTraceHand 1.1s ease-in-out infinite alternate;
}

.display-app[data-game-mode="circle-munch"][data-glowtail-hand="left"] .arena-message .coach-arm-right,
.display-app[data-game-mode="circle-munch"][data-glowtail-hand="right"] .arena-message .coach-arm-left {
  opacity: 0.18;
  animation: none;
}

.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="glowtail-hand-lost"] {
  border-color: rgba(210, 99, 112, 0.34);
  background: rgba(255, 247, 241, 0.9);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 24px 72px rgba(92, 83, 104, 0.18);
}

.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="glowtail-hand-lost"] h2 {
  color: #9f4856;
  text-shadow: 0 1px rgba(255, 255, 255, 0.85);
  animation: glowtailSoftPulse 1.45s ease-in-out infinite;
}

.arena-shell.glowtail-impact {
  animation: glowtailImpact 340ms ease-out both;
}

@keyframes glowtailChooseLeft {
  0%, 44%, 100% { transform: rotate(34deg) translateY(8px); }
  18%, 30% { transform: rotate(118deg) translateY(-7px); }
}

@keyframes glowtailChooseRight {
  0%, 44%, 100% { transform: rotate(-34deg) translateY(8px); }
  62%, 76% { transform: rotate(-118deg) translateY(-7px); }
}

@keyframes glowtailTraceHand {
  from { transform: rotate(88deg) translateY(9px); }
  to { transform: rotate(88deg) translateY(-12px); }
}

@keyframes glowtailImpact {
  0%, 100% { transform: translateY(0); filter: saturate(1); }
  32% { transform: translateY(2px); filter: saturate(1.08) brightness(1.02); }
  66% { transform: translateY(-1px); }
}

@keyframes glowtailSoftPulse {
  50% { transform: scale(1.012); color: #b25464; }
}

/* GLOWTAIL is presented as an interactive watercolor: the current field stays
   visible through a light wash while instructions sit on quiet ivory plates. */
.display-app[data-game-mode="circle-munch"],
.display-app[data-game-mode="circle-munch"].is-arena,
.display-app[data-game-mode="circle-munch"][data-view]:not([data-view="lobby"]),
.display-app[data-game-mode="circle-munch"] .arena-section {
  background-color: #f4f1e9;
  color: #20334a;
}

.display-app[data-game-mode="circle-munch"] .arena-message,
.display-app[data-game-mode="circle-munch"].is-arena .arena-message,
.display-app[data-game-mode="circle-munch"][data-view]:not([data-view="lobby"]) .arena-message {
  border: 0;
  background:
    linear-gradient(115deg, rgba(239, 250, 246, 0.46), rgba(247, 240, 255, 0.28) 48%, rgba(255, 246, 230, 0.34));
  color: #20334a;
  text-shadow: none;
}

.display-app[data-game-mode="circle-munch"] .arena-message .message-index {
  margin-bottom: 12px;
  color: #287c89;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.display-app[data-game-mode="circle-munch"] .arena-message h2,
.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="setup"] h2,
.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="ready"] h2 {
  margin-bottom: 8px;
  padding: 12px 26px;
  border: 1px solid rgba(46, 117, 130, 0.22);
  border-radius: 20px;
  background: rgba(255, 253, 247, 0.84);
  color: #20334a;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.95), 0 14px 38px rgba(71, 103, 122, 0.14);
  text-shadow: 0 1px rgba(255, 255, 255, 0.9);
  animation: none;
}

.display-app[data-game-mode="circle-munch"] .arena-message p {
  color: #415a6d;
  font-weight: 750;
  letter-spacing: 0.025em;
}

.display-app[data-game-mode="circle-munch"] .tv-setup-steps {
  overflow: hidden;
  border: 1px solid rgba(48, 93, 111, 0.18);
  border-radius: 22px;
  background: rgba(255, 253, 247, 0.78);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.94), 0 16px 44px rgba(76, 103, 118, 0.13);
  backdrop-filter: blur(12px);
}

.display-app[data-game-mode="circle-munch"] .tv-setup-steps li + li {
  border-left-color: rgba(48, 93, 111, 0.14);
}

.display-app[data-game-mode="circle-munch"] .tv-setup-steps b {
  color: #258797;
}

.display-app[data-game-mode="circle-munch"] .tv-setup-steps span {
  color: #263c52;
}

.display-app[data-game-mode="circle-munch"] .tv-setup-steps strong {
  color: #607284;
}

.display-app[data-game-mode="circle-munch"] .setup-feedback {
  border: 1px solid rgba(46, 117, 130, 0.22);
  border-radius: 999px;
  background: rgba(235, 251, 245, 0.9);
  color: #225b66;
  box-shadow: 0 10px 28px rgba(71, 103, 122, 0.12);
}

.display-app[data-game-mode="circle-munch"] .setup-feedback i {
  background: #49bba8;
  box-shadow: 0 0 0 5px rgba(73, 187, 168, 0.13);
}

.display-app[data-game-mode="circle-munch"] .sound-toggle {
  border-color: rgba(42, 90, 108, 0.2);
  background: rgba(255, 253, 247, 0.84);
  color: #20334a;
  box-shadow: 0 10px 30px rgba(64, 91, 108, 0.14);
  backdrop-filter: blur(10px);
}

.display-app[data-game-mode="circle-munch"] .sound-toggle small { color: #66788a; }
.display-app[data-game-mode="circle-munch"] .sound-toggle strong { color: #263c52; }
.display-app[data-game-mode="circle-munch"] .sound-toggle-icon i { background: #48adba; }

.display-app[data-game-mode="circle-munch"] .arena-message[data-stage="countdown"] h2,
.display-app[data-game-mode="circle-munch"][data-view="countdown"] .arena-message h2 {
  border: 0;
  background: rgba(255, 253, 247, 0.72);
  color: #276f7c;
  box-shadow: 0 20px 62px rgba(72, 103, 119, 0.15);
}

/* The selected wrist is the only visible phone overlay. Text, guides and the
   non-selected wrist stay absent in portrait and landscape. */
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .tracked-hand {
  display: none !important;
  width: clamp(42px, 12vw, 68px) !important;
  height: clamp(42px, 12vw, 68px) !important;
  border: 3px solid #8af3eb !important;
  background: rgba(26, 74, 84, 0.24) !important;
  box-shadow: 0 0 0 7px rgba(138, 243, 235, 0.2), 0 0 28px rgba(206, 181, 255, 0.34) !important;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"][data-glowtail-hand="left"][data-glowtail-tracking="ready"] .tracked-hand-left.is-visible:not([hidden]),
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"][data-glowtail-hand="right"][data-glowtail-tracking="ready"] .tracked-hand-right.is-visible:not([hidden]) {
  display: grid !important;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .tracked-hand b,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .tracked-hand span {
  display: none !important;
}

/* The recovery drawer is transport/camera recovery, never a multi-game
   launcher on the public GLOWTAIL path. */
.controller-app[data-game-mode="circle-munch"] .game-select-section,
.controller-app[data-game-mode="circle-munch"] .game-choice,
.controller-app[data-game-mode="circle-munch"] .game-choice-help {
  display: none !important;
}

@media (max-width: 1280px) {
  .display-app[data-game-mode="circle-munch"][data-view="game"] .glowtail-hud {
    top: 14px;
    max-width: calc(100% - 28px);
  }

  .glowtail-hud > span {
    min-width: 104px;
    padding: 9px 13px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .display-app[data-game-mode="circle-munch"] .arena-message .coach-arm,
  .display-app[data-game-mode="circle-munch"] .arena-message[data-stage="glowtail-hand-lost"] h2,
  .arena-shell.glowtail-impact {
    animation: none !important;
  }
}

/* GLOWTAIL phone contract: the active front camera is the entire UI.
   These deliberately specific !important rules also win over the public
   legacy controller wrapper stylesheet, which loads after this application CSS. */
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .control-panel,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .camera-preview {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  display: block !important;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .camera-preview {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .camera-preview::after {
  display: none !important;
  content: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] #cameraVideo,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] #poseCanvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] #cameraVideo {
  transform: scaleX(-1) !important;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] #poseCanvas {
  z-index: 2 !important;
  transform: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .tracked-hand {
  z-index: 14 !important;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .tracked-hand span {
  display: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .camera-start-overlay,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .camera-safe,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .motion-field,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .live-topbar,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .live-brand,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .live-state,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .menu-button,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .live-guidance,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .live-command,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .motion-tutorial,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .circle-speed-guide,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .continuous-steer-guide,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .gummy-motion-guide,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"] .gesture-hud,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"]:not(.drawer-open) .controller-game-dock,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"]:not(.drawer-open) .control-drawer,
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"]:not(.drawer-open) .drawer-backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ICE HOCKEY phone contract: orientation is stated plainly on the phone
   before camera permission. Once landscape, the phone is camera + markers
   and the TV owns the player-by-player hand setup. */
.controller-app.is-paired[data-game-mode="air-hockey"] .live-topbar,
.controller-app.is-paired[data-game-mode="air-hockey"] .live-guidance,
.controller-app.is-paired[data-game-mode="air-hockey"] .live-command,
.controller-app.is-paired[data-game-mode="air-hockey"] .motion-tutorial,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-safe,
.controller-app.is-paired[data-game-mode="air-hockey"] .motion-field,
.controller-app.is-paired[data-game-mode="air-hockey"] .circle-speed-guide,
.controller-app.is-paired[data-game-mode="air-hockey"] .continuous-steer-guide,
.controller-app.is-paired[data-game-mode="air-hockey"] .gummy-motion-guide,
.controller-app.is-paired[data-game-mode="air-hockey"] .gesture-hud,
.controller-app.is-paired[data-game-mode="air-hockey"] .controller-game-dock,
.controller-app.is-paired[data-game-mode="air-hockey"]:not(.drawer-open) .control-drawer,
.controller-app.is-paired[data-game-mode="air-hockey"]:not(.drawer-open) .drawer-backdrop,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay:not([data-state="blocked"]):not([data-state="camera-portrait"]):not([data-state="rotate"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="blocked"],
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="camera-portrait"],
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"] {
  position: fixed !important;
  z-index: 30 !important;
  inset: 0 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  padding: max(132px, 19vh) clamp(22px, 7vw, 46px) max(54px, 8vh) !important;
  overflow: hidden !important;
  background-color: #071b35 !important;
  background-image:
    radial-gradient(circle at 15% 18%, rgba(36, 218, 255, 0.38), transparent 35%),
    radial-gradient(circle at 87% 78%, rgba(255, 72, 151, 0.35), transparent 38%),
    linear-gradient(135deg, #06162d 0%, #0c3150 48%, #241331 100%) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="camera-portrait"]::before,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"]::before {
  content: "↻";
  position: absolute;
  top: max(34px, 6vh);
  left: 50%;
  display: grid;
  width: clamp(126px, 42vw, 188px);
  height: clamp(68px, 22vw, 102px);
  border: 3px solid rgba(255,255,255,.88);
  border-radius: clamp(18px, 5vw, 29px);
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 28% 50%, rgba(28,220,255,.72) 0 7%, transparent 8%),
    radial-gradient(circle at 72% 50%, rgba(255,78,150,.72) 0 7%, transparent 8%),
    rgba(7,20,43,.52);
  box-shadow: 0 20px 60px rgba(0,0,0,.32), 0 0 34px rgba(53,211,255,.28), inset 0 0 0 1px rgba(255,255,255,.18);
  font-size: clamp(34px, 10vw, 52px);
  font-weight: 900;
  line-height: 1;
  transform: translateX(-50%) rotate(-4deg);
  animation: hockey-phone-turn 1.8s ease-in-out infinite;
}

.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="blocked"]::after,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="camera-portrait"]::after,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(132,225,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132,225,255,.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 78%, transparent);
}

.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="blocked"] > *,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="camera-portrait"] > *,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"] > * {
  position: relative;
  z-index: 1;
}

.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="camera-portrait"] > span,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"] > span {
  margin-bottom: 13px !important;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: #79e8ff !important;
  background: rgba(4,14,34,.46);
}

.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="camera-portrait"] h1,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"] h1 {
  max-width: 8.5em;
  margin: 0 auto 15px !important;
  color: #fff !important;
  font-size: clamp(38px, 11vw, 64px) !important;
  line-height: .94;
  letter-spacing: -.045em;
  text-shadow: 0 8px 28px rgba(0,0,0,.38);
}

.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="camera-portrait"] h1 em,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"] h1 em {
  color: #ffd85f;
  font-style: normal;
}

.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="camera-portrait"] p,
.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"] p {
  max-width: 31em;
  margin-right: auto;
  margin-left: auto;
  color: #e8f6ff !important;
  font-weight: 720;
  line-height: 1.42;
}

@keyframes hockey-phone-turn {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  50% { transform: translateX(-50%) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="camera-portrait"]::before,
  .controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"]::before {
    animation: none;
  }
}

.controller-app.is-paired[data-game-mode="air-hockey"] .camera-start-overlay[data-state="rotate"] > * {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  text-align: center !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .control-panel,
.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .camera-preview {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .camera-preview::after,
.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] #poseCanvas {
  display: none !important;
  content: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] #cameraVideo {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: scaleX(-1) !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .tracked-hand {
  z-index: 14 !important;
  display: grid !important;
  width: clamp(46px, 9vh, 70px) !important;
  height: clamp(46px, 9vh, 70px) !important;
  color: #061019 !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .tracked-hand-left {
  border-color: #dffaff !important;
  background: #44e2ff !important;
  box-shadow: 0 0 0 8px rgba(68, 226, 255, 0.22), 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .tracked-hand-right {
  border-color: #ffe8f6 !important;
  background: #ff53b8 !important;
  box-shadow: 0 0 0 8px rgba(255, 83, 184, 0.22), 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"][data-hockey-opponent="bot"] .tracked-hand-right {
  display: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .tracked-hand span {
  display: none !important;
}

.hockey-phone-status {
  display: none;
}

.hockey-calibration-map {
  display: none;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .hockey-calibration-map:not([hidden]) {
  position: fixed;
  z-index: 17;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: grid;
  width: clamp(148px, 26vw, 206px);
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(220, 247, 255, .72);
  border-radius: 14px;
  background: rgba(3, 10, 20, .91);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42), 0 0 24px rgba(68, 226, 255, .12);
  color: #f4fbff;
  pointer-events: none;
}

.hockey-calibration-map-label {
  font-size: clamp(8px, 1.5vw, 10px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: .12em;
}

.hockey-calibration-map-rink {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid rgba(238, 251, 255, .9);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(255,255,255,.8) 15.5% 16.5%, transparent 17%),
    linear-gradient(90deg, rgba(68,226,255,.18) 0 49.6%, rgba(255,255,255,.88) 49.7% 50.3%, rgba(255,83,184,.18) 50.4% 100%),
    #15324b;
}

.hockey-calibration-map-rink::before,
.hockey-calibration-map-rink::after {
  content: "";
  position: absolute;
  top: 31%;
  width: 7%;
  height: 38%;
  border: 2px solid rgba(255,255,255,.7);
}

.hockey-calibration-map-rink::before {
  left: -2px;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.hockey-calibration-map-rink::after {
  right: -2px;
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.hockey-calibration-map-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hockey-calibration-map-dot,
.hockey-calibration-map-bot {
  position: absolute;
  z-index: 2;
  display: grid;
  width: clamp(22px, 4vw, 30px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: clamp(8px, 1.55vw, 10px);
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  color: #06101d;
  transform: translate(-50%, -50%);
  transition: left 80ms linear, top 80ms linear, opacity 120ms ease;
}

.hockey-calibration-map-dot-left {
  background: #44e2ff;
  box-shadow: 0 0 0 5px rgba(68,226,255,.18), 0 0 17px rgba(68,226,255,.72);
}

.hockey-calibration-map-dot-right {
  background: #ff53b8;
  box-shadow: 0 0 0 5px rgba(255,83,184,.18), 0 0 17px rgba(255,83,184,.72);
}

.hockey-calibration-map-bot {
  top: 50%;
  left: 76%;
  width: auto;
  min-width: 34px;
  padding: 0 6px;
  aspect-ratio: auto;
  background: #ff53b8;
  color: #fff;
  transform: translate(-50%, -50%);
}

.hockey-calibration-map [hidden] {
  display: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .hockey-phone-status {
  position: fixed;
  z-index: 18;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 16px;
  align-items: end;
  padding: 12px 15px;
  border: 2px solid #44e2ff;
  border-radius: 15px;
  background: rgba(3, 10, 18, 0.95);
  color: #eaffff;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.48), 0 0 28px rgba(68, 226, 255, 0.18);
  pointer-events: none;
}

@media (max-width: 900px) and (orientation: landscape) {
  .controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .hockey-calibration-map:not([hidden]) {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    width: clamp(138px, 22vw, 176px);
  }
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .hockey-phone-status[hidden] {
  display: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="air-hockey"] .hockey-phone-status[data-phase^="player-two"] {
  border-color: #ff53b8;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.48), 0 0 28px rgba(255, 83, 184, 0.2);
}

.hockey-phone-status > span,
.hockey-phone-status > small {
  color: rgba(234, 255, 255, 0.72);
  font-size: clamp(8px, 1.8vw, 11px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hockey-phone-status > strong {
  grid-column: 1 / -1;
  font-size: clamp(15px, 3.5vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.hockey-phone-status > small {
  justify-self: end;
  max-width: 46vw;
  text-align: right;
  letter-spacing: 0.035em;
  text-transform: none;
}

.hockey-phone-status-meter {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.hockey-phone-status-meter b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #44e2ff;
  box-shadow: 0 0 15px #44e2ff;
  transition: width 90ms linear;
}

.hockey-phone-status[data-phase^="player-two"] .hockey-phone-status-meter b {
  background: #ff53b8;
  box-shadow: 0 0 15px #ff53b8;
}

/* POINT. SAY BAM. uses the same full-screen landscape camera contract. The
   only phone overlays left are the two role markers and the physical BAM
   fallback button; every setup sentence lives on the TV. */
.controller-app.is-paired[data-game-mode="say-bam"] .live-topbar,
.controller-app.is-paired[data-game-mode="say-bam"] .live-guidance,
.controller-app.is-paired[data-game-mode="say-bam"] .live-command,
.controller-app.is-paired[data-game-mode="say-bam"] .motion-tutorial,
.controller-app.is-paired[data-game-mode="say-bam"] .camera-safe,
.controller-app.is-paired[data-game-mode="say-bam"] .motion-field,
.controller-app.is-paired[data-game-mode="say-bam"] .circle-speed-guide,
.controller-app.is-paired[data-game-mode="say-bam"] .continuous-steer-guide,
.controller-app.is-paired[data-game-mode="say-bam"] .gummy-motion-guide,
.controller-app.is-paired[data-game-mode="say-bam"] .gesture-hud,
.controller-app.is-paired[data-game-mode="say-bam"] .controller-game-dock,
.controller-app.is-paired[data-game-mode="say-bam"]:not(.drawer-open) .control-drawer,
.controller-app.is-paired[data-game-mode="say-bam"]:not(.drawer-open) .drawer-backdrop,
.controller-app.is-paired[data-game-mode="say-bam"] .camera-start-overlay:not([data-state="blocked"]):not([data-state="rotate"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.controller-app.is-paired[data-game-mode="say-bam"] .camera-start-overlay[data-state="blocked"],
.controller-app.is-paired[data-game-mode="say-bam"] .camera-start-overlay[data-state="rotate"] {
  position: fixed !important;
  z-index: 95 !important;
  inset: 0 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(68, 226, 255, 0.28), transparent 36%),
    radial-gradient(circle at 82% 80%, rgba(255, 83, 184, 0.28), transparent 38%),
    linear-gradient(145deg, #061832, #1b0a31 58%, #080614) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.controller-app.is-paired[data-game-mode="say-bam"] .camera-start-overlay[data-state="rotate"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8%;
  left: 50%;
  width: min(42vw, 300px);
  aspect-ratio: 16 / 9;
  border: 5px solid #f7fbff;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(68,226,255,.36), rgba(255,83,184,.36)),
    #0a1027;
  box-shadow: 0 0 0 10px rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.45);
  transform: translateX(-50%) rotate(-2deg);
  opacity: .78;
}

.controller-app.is-paired[data-game-mode="say-bam"] .camera-start-overlay[data-state="rotate"] > * {
  position: relative;
  z-index: 1;
}

.controller-app.is-paired[data-game-mode="say-bam"] .camera-start-overlay[data-state="rotate"] h1 {
  max-width: 9em;
  color: #fff !important;
  font-size: clamp(38px, 10vw, 62px) !important;
  line-height: .94;
  letter-spacing: -.045em;
  text-shadow: 0 8px 28px rgba(0,0,0,.4);
}

.controller-app.is-paired[data-game-mode="say-bam"] .camera-start-overlay[data-state="rotate"] p {
  max-width: 31em;
  color: #edf8ff !important;
  font-weight: 760;
  line-height: 1.42;
}

.controller-app.is-paired[data-game-mode="say-bam"] .camera-start-overlay[data-state="rotate"] > * {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  text-align: center !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .control-panel,
.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .camera-preview {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(68, 226, 255, 0.23), transparent 32%),
    radial-gradient(circle at 82% 72%, rgba(255, 83, 184, 0.25), transparent 35%),
    linear-gradient(145deg, #07152d, #180a2c 58%, #060813) !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .camera-preview::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: var(--camera-content-y, 0) var(--camera-content-x, 0);
  width: var(--camera-content-width, 100%);
  height: var(--camera-content-height, 100%);
  border: 2px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 8% 50%, rgba(68,226,255,.22), transparent 26%),
    radial-gradient(circle at 92% 50%, rgba(255,83,184,.22), transparent 26%);
  box-shadow: inset 0 0 80px rgba(5, 3, 18, 0.42);
  pointer-events: none;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .camera-preview::after,
.controller-app.is-paired.camera-active[data-game-mode="say-bam"] #poseCanvas {
  display: none !important;
  content: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] #cameraVideo {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: scaleX(-1) !important;
  filter: saturate(0.82) contrast(1.06) brightness(0.82) !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .tracked-hand {
  z-index: 14 !important;
  display: grid !important;
  width: clamp(48px, 10vh, 76px) !important;
  height: clamp(48px, 10vh, 76px) !important;
  color: #061019 !important;
  border-width: 4px !important;
  font-size: clamp(17px, 4vh, 28px) !important;
  font-weight: 950 !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .tracked-hand-left {
  border-color: #e7fbff !important;
  background: #44e2ff !important;
  box-shadow: 0 0 0 8px rgba(68, 226, 255, 0.25), 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .tracked-hand-right {
  border-color: #fff0fa !important;
  border-radius: 18% !important;
  background: #ff53b8 !important;
  box-shadow: 0 0 0 8px rgba(255, 83, 184, 0.25), 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"][data-bam-players="1"] .tracked-hand-right {
  display: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .tracked-hand span {
  display: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .hockey-phone-status {
  position: fixed;
  z-index: 18;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  bottom: auto;
  display: grid;
  width: min(52vw, 430px);
  grid-template-columns: 1fr auto;
  gap: 5px 14px;
  padding: 11px 14px;
  border: 2px solid #44e2ff;
  border-radius: 15px;
  background: rgba(5, 7, 22, 0.94);
  color: #f4fbff;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.46), -6px 0 24px rgba(68, 226, 255, 0.18), 6px 0 24px rgba(255, 83, 184, 0.16);
  pointer-events: none;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .hockey-phone-status[hidden] {
  display: none !important;
}

.controller-app.is-paired.camera-active[data-game-mode="say-bam"] .hockey-phone-status[data-phase^="player-two"] {
  border-color: #ff53b8;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-onboarding"] h2,
.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-tracking-lost"] h2 {
  padding: 16px 28px;
  border: 2px solid rgba(68, 226, 255, 0.76);
  border-radius: 18px;
  background: rgba(5, 15, 29, 0.9);
  box-shadow: 0 0 0 8px rgba(68, 226, 255, 0.1), 0 20px 70px rgba(0, 0, 0, 0.42);
}

.display-app[data-game-mode="say-bam"] .arena-message[data-stage="bam-onboarding"] h2,
.display-app[data-game-mode="say-bam"] .arena-message[data-stage="bam-tracking-lost"] h2 {
  padding: 16px 28px;
  border: 2px solid rgba(68, 226, 255, 0.78);
  border-radius: 18px;
  background: rgba(12, 7, 31, 0.92);
  box-shadow: -9px 0 0 rgba(68, 226, 255, 0.18), 9px 0 0 rgba(255, 83, 184, 0.18), 0 20px 70px rgba(0, 0, 0, 0.46);
}

.display-app[data-game-mode="say-bam"] .tv-setup-steps li {
  opacity: 0.48;
  transition: background 160ms ease, opacity 160ms ease;
}

.display-app[data-game-mode="say-bam"][data-bam-players="1"] .tv-setup-steps li {
  flex-basis: 50%;
}

.display-app[data-game-mode="say-bam"] .tv-setup-steps li.is-active {
  background: rgba(68, 226, 255, 0.11);
  opacity: 1;
}

.display-app[data-game-mode="say-bam"] .tv-setup-steps li.is-complete {
  background: rgba(255, 83, 184, 0.1);
  opacity: 0.9;
}

.display-app[data-game-mode="say-bam"] .tv-setup-steps li.is-complete b,
.display-app[data-game-mode="say-bam"] .tv-setup-steps li.is-complete span {
  color: #ff9bd7;
}

.display-app[data-game-mode="say-bam"] .arena-message[data-stage="bam-tracking-lost"] {
  background: rgba(17, 4, 25, 0.92);
}

.display-app[data-game-mode="say-bam"] .arena-message[data-stage="bam-tracking-lost"] h2 {
  border-color: rgba(255, 83, 184, 0.88);
}

.display-app[data-game-mode="air-hockey"] .tv-setup-steps li {
  opacity: 0.48;
  transition: background 160ms ease, opacity 160ms ease;
}

.display-app[data-game-mode="air-hockey"][data-hockey-opponent="bot"] .tv-setup-steps li {
  flex-basis: 50%;
}

.display-app[data-game-mode="air-hockey"] .tv-setup-steps li.is-active {
  background: rgba(68, 226, 255, 0.11);
  opacity: 1;
}

.display-app[data-game-mode="air-hockey"] .tv-setup-steps li.is-complete {
  background: rgba(98, 211, 147, 0.09);
  opacity: 0.84;
}

.display-app[data-game-mode="air-hockey"] .tv-setup-steps li.is-complete b,
.display-app[data-game-mode="air-hockey"] .tv-setup-steps li.is-complete span {
  color: #83f5ba;
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-tracking-lost"] {
  background: rgba(15, 5, 14, 0.9);
}

.display-app[data-game-mode="air-hockey"] .arena-message[data-stage="hockey-tracking-lost"] h2 {
  border-color: rgba(255, 83, 184, 0.86);
  box-shadow: 0 0 0 8px rgba(255, 83, 184, 0.1), 0 20px 70px rgba(0, 0, 0, 0.46);
}

/* Final mobile camera contract. The guide follows the real contained video
   rectangle published by controller.js, so it never suggests that cropped or
   letterboxed pixels are part of the tracking frame. */
.controller-app.is-paired .camera-safe {
  top: calc(var(--camera-content-y, 0px) + 16px);
  right: auto;
  bottom: auto;
  left: calc(var(--camera-content-x, 0px) + 16px);
  width: max(0px, calc(var(--camera-content-width, 100%) - 32px));
  height: max(0px, calc(var(--camera-content-height, 100%) - 32px));
}

.controller-app.is-paired .camera-safe::before {
  width: min(42%, 190px);
  height: min(72%, 470px);
}

/* During calibration one strong instruction is easier to understand than a
   stack of status panels. The live status returns as soon as controls are
   ready. */
.controller-app.is-paired[data-game-mode="three-tracks"]:not([data-motion-tutorial="ready"]) .live-command {
  display: none;
}

.controller-app.is-paired[data-game-mode="three-tracks"] .lane-zone {
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
}

.controller-app.is-paired[data-game-mode="three-tracks"] .vertical-trigger {
  opacity: 0.28;
}

@media (orientation: portrait) and (max-width: 680px) {
  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial,
  .controller-app.is-paired[data-game-mode="three-tracks"][data-body-gesture="squat"] .motion-tutorial {
    top: auto;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 72px));
    left: max(10px, env(safe-area-inset-left));
    width: min(470px, calc(100% - 20px));
    height: 170px;
    margin: 0 auto;
    padding: 9px 10px 10px;
    overflow: hidden;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-content {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    margin-top: 4px;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial .gesture-coach {
    width: 64px;
    height: 74px;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-copy > strong {
    font-size: 16px;
    line-height: 1.08;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-copy > p {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    color: #d8dde4;
    font-size: 12px;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-steps {
    display: grid;
    margin-top: 6px;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-steps span {
    padding-top: 5px;
    font-size: 9px;
    letter-spacing: 0;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-steps i {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial,
  .controller-app.is-paired[data-game-mode="circle-munch"][data-body-gesture="squat"] .motion-tutorial {
    top: auto;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: auto;
    width: 300px;
    height: 158px;
    margin: 0;
    padding: 9px 10px 10px;
    overflow: hidden;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial-content {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px;
    margin-top: 4px;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial .gesture-coach {
    width: 62px;
    height: 70px;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial-copy > strong {
    font-size: 17px;
    line-height: 1.08;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial-copy > p {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial-steps {
    display: none;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .circle-speed-guide {
    top: max(92px, calc(env(safe-area-inset-top) + 84px));
    right: auto;
    bottom: auto;
    left: max(14px, env(safe-area-inset-left));
    width: min(208px, 54vw);
    min-height: 174px;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .controller-app.is-paired .live-command {
    top: max(76px, calc(env(safe-area-inset-top) + 68px));
    width: min(230px, 28vw);
    min-height: 42px;
    max-height: 42px;
    padding: 3px 8px 4px;
  }

  .controller-app.is-paired .live-command strong {
    margin-top: 1px;
    font-size: 18px;
  }

  .controller-app.is-paired .live-command small {
    display: none;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial,
  .controller-app.is-paired[data-game-mode="three-tracks"][data-body-gesture="squat"] .motion-tutorial {
    top: auto;
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    width: 300px;
    height: 158px;
    margin: 0;
    padding: 9px 10px 10px;
    overflow: hidden;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial[data-gesture="left"] {
    right: max(14px, env(safe-area-inset-right));
    left: auto;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-content {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px;
    margin-top: 3px;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial .gesture-coach {
    width: 62px;
    height: 70px;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-copy > strong {
    margin-top: 0;
    font-size: 17px;
    line-height: 1.05;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-copy > p {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.34;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-steps {
    display: grid;
    margin-top: 5px;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-steps span {
    padding-top: 4px;
    font-size: 9px;
    letter-spacing: 0;
  }

  .controller-app.is-paired[data-game-mode="three-tracks"] .motion-tutorial-steps i {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial,
  .controller-app.is-paired[data-game-mode="circle-munch"][data-body-gesture="squat"] .motion-tutorial {
    top: auto;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: auto;
    width: 300px;
    height: 158px;
    margin: 0;
    padding: 9px 10px 10px;
    overflow: hidden;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial-content {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px;
    margin-top: 4px;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial .gesture-coach {
    width: 62px;
    height: 70px;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial-copy > strong {
    font-size: 17px;
    line-height: 1.08;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial-copy > p {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .motion-tutorial-steps {
    display: none;
  }

  .controller-app.is-paired[data-game-mode="circle-munch"] .circle-speed-guide {
    top: auto;
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    width: min(214px, 27vw);
    min-height: 174px;
  }
}

/* Keep the live hand marker and its coach on opposite vertical edges.
   The controller publishes this with hysteresis so the card never jitters
   while the player traces vertically. These final selectors
   intentionally override the portrait/landscape defaults above. */
.controller-app.is-paired.camera-active[data-game-mode="circle-munch"][data-circle-guide-edge="bottom"] .circle-speed-guide {
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
}

.controller-app.is-paired.camera-active[data-game-mode="circle-munch"][data-circle-guide-edge="top"] .circle-speed-guide {
  top: max(92px, calc(env(safe-area-inset-top) + 84px));
  bottom: auto;
}

/* Mobile controller density pass: the join flow and the live camera must fit
   into one useful viewport instead of looking like a desktop page stacked
   vertically. */
@media (max-width: 680px) {
  .controller-app:not(.is-paired) .mobile-header {
    min-height: 58px;
    padding: max(8px, env(safe-area-inset-top)) 14px 8px;
  }

  .controller-app:not(.is-paired) .brand {
    gap: 9px;
  }

  .controller-app:not(.is-paired) .brand-mark {
    width: 38px;
    height: 38px;
  }

  .controller-app:not(.is-paired) .controller-main {
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  }

  .controller-app:not(.is-paired) .join-panel {
    padding-top: 0;
  }

  .controller-app:not(.is-paired) .eyebrow {
    margin-bottom: 11px;
    gap: 9px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .controller-app:not(.is-paired) .eyebrow span {
    gap: 9px;
  }

  .controller-app:not(.is-paired) .eyebrow span::after {
    width: 22px;
  }

  .controller-app:not(.is-paired) .controller-main h1 {
    margin-bottom: 12px;
    font-size: clamp(36px, 10.5vw, 46px);
    line-height: 0.98;
  }

  .controller-app:not(.is-paired) .small-lead {
    font-size: 14px;
    line-height: 1.4;
  }

  .controller-app:not(.is-paired) .join-actions {
    margin-top: 18px;
  }

  .controller-app:not(.is-paired) .scan-button {
    min-height: 62px;
    gap: 11px;
    padding: 9px 11px;
  }

  .controller-app:not(.is-paired) .scan-button-icon {
    width: 38px;
    height: 38px;
  }

  .controller-app:not(.is-paired) .join-divider {
    margin: 15px 0;
  }

  .controller-app:not(.is-paired) .code-form {
    padding-top: 12px;
  }

  .controller-app:not(.is-paired) .code-form label {
    margin-bottom: 6px;
    font-size: 11px;
  }

  .controller-app:not(.is-paired) .code-form > div {
    flex-direction: row;
  }

  .controller-app:not(.is-paired) .code-form input,
  .controller-app:not(.is-paired) .code-form .primary-button {
    min-height: 48px;
  }

  .controller-app:not(.is-paired) .code-form input {
    padding: 11px 12px;
    font-size: 16px;
  }

  .controller-app:not(.is-paired) .code-form .primary-button {
    width: auto;
    padding: 10px 16px;
  }

  .controller-app:not(.is-paired) .back-to-roles {
    margin-top: 15px;
  }

  .controller-app.scanner-open:not(.is-paired) .controller-main {
    padding-top: 10px;
  }

  .controller-app.scanner-open:not(.is-paired) .join-panel > .eyebrow,
  .controller-app.scanner-open:not(.is-paired) .join-panel > h1,
  .controller-app.scanner-open:not(.is-paired) .join-panel > .lead,
  .controller-app.scanner-open:not(.is-paired) .scan-button,
  .controller-app.scanner-open:not(.is-paired) .back-to-roles {
    display: none;
  }

  .controller-app.scanner-open:not(.is-paired) .join-actions {
    margin-top: 0;
  }

  .controller-app.scanner-open:not(.is-paired) .scanner-panel {
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 8px;
  }

  .controller-app.scanner-open:not(.is-paired) .scanner-viewport {
    aspect-ratio: 1;
  }

  .controller-app.scanner-open:not(.is-paired) .scanner-status {
    margin: 7px 3px 1px;
    line-height: 1.3;
  }

  .controller-app.is-paired .live-topbar {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  }

  .controller-app.is-paired .live-brand,
  .controller-app.is-paired .live-brand .brand-mark {
    width: 38px;
    height: 38px;
  }

  .controller-app.is-paired .live-state {
    min-height: 34px;
    padding: 0 9px;
    font-size: 10px;
  }

  .controller-app.is-paired .menu-button {
    width: 44px;
    height: 44px;
    padding: 11px;
  }

  .controller-app.is-paired .live-command {
    top: max(60px, calc(env(safe-area-inset-top) + 54px));
    min-width: 126px;
    padding: 5px 9px 6px;
  }

  .controller-app.is-paired .live-command strong {
    font-size: 18px;
  }

  .controller-app.is-paired .live-command small {
    display: none;
  }

  .controller-app.is-paired .motion-tutorial {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(9px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    width: min(470px, calc(100% - 20px));
    padding: 9px 10px 10px;
    border-radius: 18px;
    background: rgba(4, 12, 19, 0.92);
  }

  .controller-app.is-paired[data-body-gesture="squat"] .motion-tutorial {
    top: auto;
    bottom: max(9px, env(safe-area-inset-bottom));
  }

  .controller-app.is-paired .motion-tutorial-content {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 9px;
    margin-top: 4px;
  }

  .controller-app.is-paired .motion-tutorial .gesture-coach {
    width: 62px;
    height: 72px;
    border-radius: 17px;
  }

  .controller-app.is-paired .motion-tutorial-copy > strong {
    font-size: 15px;
    line-height: 1.08;
  }

  .controller-app.is-paired .motion-tutorial-copy > p {
    display: none;
  }

  .controller-app.is-paired .motion-tutorial-steps {
    margin-top: 6px;
  }

  .controller-app.is-paired .motion-tutorial-steps span {
    padding-top: 5px;
    font-size: 0;
  }

  .controller-app.is-paired .motion-tutorial-steps i {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .controller-app:not(.is-paired) .connection-pill.small {
    min-width: 0;
    max-width: 126px;
    flex: 0 1 126px;
    gap: 7px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .controller-app:not(.is-paired) #mobileConnectionLabel {
    min-width: 0;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .controller-app.scanner-open:not(.is-paired) .mobile-header,
  .controller-app.scanner-open:not(.is-paired) .join-panel > .eyebrow,
  .controller-app.scanner-open:not(.is-paired) .join-panel > h1,
  .controller-app.scanner-open:not(.is-paired) .join-panel > .lead,
  .controller-app.scanner-open:not(.is-paired) .scan-button,
  .controller-app.scanner-open:not(.is-paired) .back-to-roles,
  .controller-app.scanner-open:not(.is-paired) .join-divider,
  .controller-app.scanner-open:not(.is-paired) .code-form {
    display: none;
  }

  .controller-app.scanner-open:not(.is-paired) .controller-main {
    position: fixed;
    inset: 0;
    padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  }

  .controller-app.scanner-open:not(.is-paired) .join-panel {
    position: fixed;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
    place-items: center;
  }

  .controller-app.scanner-open:not(.is-paired) .join-actions {
    width: min(100%, calc(100dvh - 50px));
    height: auto;
    margin: 0;
  }

  .controller-app.scanner-open:not(.is-paired) .scanner-panel {
    width: 100%;
    height: auto;
  }

  .controller-app.scanner-open:not(.is-paired) .scanner-viewport {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
  }
}

.camera-start-overlay {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: max(92px, 12vh) 24px max(72px, 10vh);
  background: var(--film);
  color: var(--white);
  text-align: center;
}

.camera-start-overlay > span {
  margin-bottom: 18px;
  color: var(--sky);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.camera-start-overlay h1 {
  margin-bottom: 18px;
  color: var(--white);
  font-size: clamp(42px, 10vw, 82px);
}

.camera-start-overlay p {
  max-width: 540px;
  color: #b8bec6;
  font-size: clamp(14px, 3.8vw, 18px);
  line-height: 1.5;
}

.camera-start-overlay .motion-button {
  width: min(100%, 380px);
  margin-top: 14px;
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.camera-start-overlay .motion-button:hover,
.camera-start-overlay .motion-button:focus-visible {
  border-color: var(--sky);
  background: var(--sky);
}

.drawer-backdrop {
  position: fixed;
  z-index: 19;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(6, 8, 11, 0.64);
  cursor: pointer;
}

.control-drawer {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  width: min(430px, 92vw);
  height: 100vh;
  height: 100dvh;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  transform: translateX(102%);
  transition: transform 220ms var(--ease-out);
  overscroll-behavior: contain;
}

.control-drawer[aria-hidden="false"],
.controller-app.drawer-open .control-drawer {
  transform: translateX(0);
}

.control-drawer > header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: max(12px, env(safe-area-inset-top)) 0 12px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}

.control-drawer > header > div {
  display: grid;
  gap: 5px;
}

.control-drawer > header span,
.drawer-label {
  color: var(--blue);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.control-drawer > header strong {
  font-size: 20px;
  letter-spacing: 0.1em;
}

.drawer-close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  place-items: center;
  font-size: 27px;
}

.drawer-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.camera-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.game-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.game-choice button {
  display: grid;
  min-width: 0;
  min-height: 72px;
  align-content: center;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.game-choice button[data-game="night-forest"] {
  grid-column: 1 / -1;
  border-color: #1f5f50;
  background: linear-gradient(135deg, rgba(8, 38, 41, 0.08), rgba(24, 67, 51, 0.18));
}

.game-choice button[data-game="night-forest"][aria-pressed="true"] {
  border-color: #67d6a2;
  background: linear-gradient(135deg, #092b35, #1f5f50);
}

.game-choice button[data-game="gummy-night-shift"] {
  grid-column: 1 / -1;
  min-height: 84px;
  border-color: #7c315e;
  background: linear-gradient(135deg, rgba(67, 25, 59, 0.08), rgba(113, 42, 79, 0.2));
}

.game-choice button[data-game="gummy-night-shift"][aria-pressed="true"] {
  border-color: #ff9fcf;
  background: linear-gradient(135deg, #35142f, #7c315e);
}

.game-choice button[data-game="circle-munch"] {
  grid-column: 1 / -1;
  min-height: 84px;
  border-color: #6554b6;
  background: linear-gradient(135deg, rgba(31, 34, 93, 0.08), rgba(98, 80, 190, 0.2));
}

.game-choice button[data-game="circle-munch"][aria-pressed="true"] {
  border-color: #ffe565;
  background: linear-gradient(135deg, #152d58, #654eb6 58%, #a74191);
}

.game-choice button[data-game="wall-dodge"],
.game-choice button[data-game="stay-in-light"],
.game-choice button[data-game="last-on-floor"] {
  min-height: 82px;
}

.game-choice button[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.game-choice strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.15;
}

.game-choice small {
  color: inherit;
  font-size: 10px;
  line-height: 1.3;
  opacity: 0.78;
}

.game-choice-help {
  margin-top: 10px;
}

/* Party Duels: the paired phone chooses one of the two physical games before
   any camera permission is requested. */
.party-game-picker[hidden],
.hockey-mode-picker[hidden],
.bam-player-picker[hidden],
.bam-mobile-control[hidden] {
  display: none !important;
}

.hockey-mode-picker,
.bam-player-picker {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  gap: 14px;
  background: #050914;
}

.hockey-mode-picker button,
.bam-player-picker button {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: clamp(20px, 5vw, 52px);
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20, 57, 82, 0.96), rgba(7, 19, 37, 0.98));
  color: #f7fbff;
  cursor: pointer;
  text-align: center;
}

.hockey-mode-picker button + button,
.bam-player-picker button + button {
  background: linear-gradient(145deg, rgba(83, 24, 69, 0.96), rgba(27, 10, 34, 0.98));
}

.hockey-mode-picker button:focus-visible,
.hockey-mode-picker button:active,
.bam-player-picker button:focus-visible,
.bam-player-picker button:active {
  border-color: #fff;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.12);
}

.hockey-mode-picker strong,
.bam-player-picker strong {
  max-width: 12ch;
  font-size: clamp(30px, 6vw, 68px);
  font-weight: 950;
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.bam-player-picker small {
  max-width: 24ch;
  color: rgba(247, 251, 255, 0.72);
  font-size: clamp(11px, 1.8vw, 18px);
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

@media (orientation: portrait) {
  .hockey-mode-picker,
  .bam-player-picker {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .hockey-mode-picker strong,
  .bam-player-picker strong {
    font-size: clamp(34px, 10vw, 58px);
  }
}

.party-game-picker {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  overflow: auto;
  background:
    radial-gradient(circle at 12% 5%, rgba(72, 226, 255, 0.2), transparent 34%),
    radial-gradient(circle at 88% 92%, rgba(255, 69, 166, 0.2), transparent 38%),
    #050914;
  color: #f7fbff;
  place-items: center;
}

.party-game-picker-card {
  width: min(760px, 100%);
}

.party-game-picker .eyebrow,
.party-game-picker .lead {
  color: rgba(247, 251, 255, 0.72);
}

.party-game-picker h1 {
  margin: 8px 0 12px;
  color: #fff;
  font-size: clamp(38px, 10vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.party-game-picker h1 em {
  color: #77ebff;
  font-style: normal;
}

.party-game-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.party-game-option {
  position: relative;
  display: grid;
  min-height: 285px;
  align-content: start;
  gap: 10px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  background: rgba(11, 23, 43, 0.82);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.party-game-option:hover,
.party-game-option:focus-visible {
  border-color: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46), 0 0 0 3px rgba(119, 235, 255, 0.18);
  outline: none;
  transform: translateY(-4px);
}

.party-game-option-hockey {
  background: linear-gradient(150deg, rgba(10, 69, 111, 0.95), rgba(5, 20, 44, 0.98));
}

.party-game-option-bam {
  background: linear-gradient(150deg, rgba(103, 22, 82, 0.96), rgba(31, 10, 49, 0.98));
}

.party-game-number {
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.party-game-art {
  display: flex;
  min-height: 80px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px -4px 6px;
  font-size: 34px;
}

.party-game-option-hockey .party-game-art i {
  width: 54px;
  height: 54px;
  border: 8px solid #dffaff;
  border-radius: 50%;
  background: #28bde7;
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.32);
}

.party-game-option-hockey .party-game-art i:last-child {
  background: #ff4b9d;
}

.party-game-option-hockey .party-game-art b {
  color: #f7fbff;
  font-size: 27px;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.36);
}

.party-game-option-bam .party-game-art b {
  display: grid;
  width: min(100%, 240px);
  min-height: 82px;
  padding: 8px 12px;
  place-items: end center;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(17,11,50,.04), rgba(17,11,50,.48)),
    url("/ruch/assets/game/bam/bam-creatures-v2.webp") 0 0 / 300% 200% no-repeat,
    #fff1c9;
  box-shadow: 0 12px 28px rgba(16,7,42,.34), inset 0 0 0 3px rgba(255,255,255,.3);
  color: #fff;
  font-size: 17px;
  text-shadow: 0 2px 4px #151741;
  transform: rotate(-1deg);
}

.party-game-option > strong {
  font-size: clamp(22px, 5vw, 34px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.party-game-option > small {
  min-height: 48px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.4;
}

.party-game-option > em {
  align-self: end;
  margin-top: auto;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.party-game-privacy {
  margin: 16px 4px 0;
  color: rgba(247, 251, 255, 0.54);
  font-size: 10px;
  line-height: 1.5;
}

.party-drawer-choice button[data-game="air-hockey"] {
  border-color: #2284b3;
}

.party-drawer-choice button[data-game="say-bam"] {
  border-color: #b52b76;
}

.party-drawer-choice button[aria-pressed="true"] {
  border-color: var(--blue);
}

.bam-mobile-control {
  position: fixed;
  z-index: 28;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 8px;
}

.bam-mobile-control > button {
  display: grid;
  width: 116px;
  height: 116px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffdd49, #ff3d86 72%);
  box-shadow: 0 12px 0 #62173f, 0 22px 36px rgba(0, 0, 0, 0.42);
  color: #170822;
  cursor: pointer;
  place-content: center;
  touch-action: manipulation;
}

.bam-mobile-control > button:active,
.bam-mobile-control.is-firing > button {
  box-shadow: 0 4px 0 #62173f, 0 10px 24px rgba(0, 0, 0, 0.36);
  transform: translateY(8px) scale(0.98);
}

.bam-mobile-control.is-charging > button {
  border-color: #fff1a8;
  box-shadow: 0 8px 0 #62173f, 0 0 0 8px rgba(255, 221, 73, 0.2), 0 20px 42px rgba(255, 61, 134, 0.44);
  transform: translateY(4px) scale(1.04);
}

.bam-mobile-control > button strong {
  font-size: 30px;
  line-height: 1;
}

.bam-mobile-control > button small {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.bam-mic-state {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(3, 7, 16, 0.78);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(10px);
}

.bam-mic-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8c97a9;
}

.bam-mic-state[data-state="ready"] i { background: #55efad; }
.bam-mic-state[data-state="listening"] i,
.bam-mic-state[data-state="fired"] i {
  background: #ffdd49;
  box-shadow: 0 0 0 6px rgba(255, 221, 73, 0.2);
}
.bam-mic-state[data-state="fallback"] i { background: #ff668e; }

.display-app[data-game-mode="air-hockey"] .arena-shell {
  background: #071b31;
}

.display-app[data-game-mode="say-bam"] .arena-shell {
  border-color: rgba(142, 107, 255, 0.58);
  background:
    radial-gradient(circle at 20% 15%, rgba(68, 226, 255, 0.18), transparent 35%),
    radial-gradient(circle at 80% 68%, rgba(255, 83, 184, 0.18), transparent 38%),
    #09061c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 90px rgba(5, 2, 18, 0.48);
}

.display-app[data-game-mode="say-bam"] .arena-shell.bam-charged-shot {
  box-shadow: inset 0 0 90px rgba(255, 221, 73, 0.34);
}

.display-app[data-game-mode="air-hockey"] .arena-name h1 { color: #55dfff; }
.display-app[data-game-mode="say-bam"] .arena-name h1 {
  color: #ff85d0;
  text-shadow: 0 0 26px rgba(255, 83, 184, 0.42);
}

.display-app[data-game-mode="say-bam"] .arena-hud .arena-name,
.display-app[data-game-mode="say-bam"] .scoreboard {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(5, 7, 22, 0.9);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(68, 226, 255, 0.08);
}

.display-app[data-game-mode="say-bam"] .scoreboard span:nth-child(1) strong {
  color: #ff85d0;
}

.display-app[data-game-mode="say-bam"] .scoreboard span:nth-child(2) strong {
  color: #ffe86d;
}

/* The TV never falls into a technical empty arena after pairing. It mirrors
   the two bold phone cards while keeping the action on the phone obvious. */
.display-app[data-game-mode][data-view="game-picker"] .arena-shell {
  border-color: rgba(255, 255, 255, 0.36);
  background:
    radial-gradient(circle at 15% 30%, rgba(68, 226, 255, 0.25), transparent 34%),
    radial-gradient(circle at 85% 70%, rgba(255, 83, 184, 0.24), transparent 36%),
    linear-gradient(135deg, #071a2e 0 49.8%, #26102f 50.2% 100%);
}

.display-app[data-game-mode][data-view="game-picker"] .arena-message[data-stage="game-picker"] {
  padding: clamp(34px, 6vh, 76px) clamp(48px, 6vw, 108px);
  background: rgba(4, 7, 17, 0.82);
  color: #fff;
  text-shadow: none;
}

.display-app[data-game-mode][data-view="game-picker"] .arena-message[data-stage="game-picker"] h2 {
  max-width: 18ch;
  margin-bottom: 10px;
  border: 2px solid rgba(255, 255, 255, 0.48);
  background: rgba(3, 12, 25, 0.9);
  color: #fff;
  font-size: clamp(42px, 5vw, 86px);
  line-height: 0.9;
  text-shadow: 0 7px 35px rgba(0, 0, 0, 0.5);
}

.display-app[data-game-mode][data-view="game-picker"] .arena-message[data-stage="game-picker"] > p {
  max-width: 860px;
  color: #eef7ff;
}

.display-app[data-game-mode][data-view="game-picker"] .tv-setup-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(1000px, 82vw);
  margin-top: clamp(18px, 3vh, 34px);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  gap: 16px;
}

.display-app[data-game-mode][data-view="game-picker"] .tv-setup-steps li {
  min-height: clamp(90px, 13vh, 142px);
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-radius: 20px;
  background: rgba(5, 18, 37, 0.84);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
}

.display-app[data-game-mode][data-view="game-picker"] .tv-setup-steps li span {
  color: #fff;
}

.display-app[data-game-mode][data-view="game-picker"] .tv-setup-steps li strong {
  color: #cbd8e8;
}

.display-app[data-game-mode][data-view="game-picker"] .tv-setup-steps li[data-party-tv-game="bam"] {
  background: rgba(42, 11, 52, 0.86);
}

.display-app[data-game-mode][data-view="game-picker"] .tv-setup-steps li[data-party-tv-game="hockey"] b {
  color: #44e2ff;
}

.display-app[data-game-mode][data-view="game-picker"] .tv-setup-steps li[data-party-tv-game="bam"] b {
  color: #ff70c6;
}

.display-app[data-game-mode][data-view="game-picker"] .setup-feedback {
  border-color: rgba(255, 221, 73, 0.5);
  background: rgba(255, 221, 73, 0.12);
  color: #fff4a3;
}

@media (max-width: 620px) {
  .party-game-picker {
    place-items: start center;
  }

  .party-game-options {
    grid-template-columns: 1fr;
  }

  .party-game-option {
    min-height: 220px;
  }

  .party-game-art {
    min-height: 54px;
  }

  .bam-mobile-control > button {
    width: 98px;
    height: 98px;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .hockey-mode-picker,
  .bam-player-picker {
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    gap: 10px;
  }

  .hockey-mode-picker button,
  .bam-player-picker button {
    padding: 12px;
  }

  .hockey-mode-picker strong,
  .bam-player-picker strong {
    max-width: 100%;
    font-size: clamp(26px, 4.6vw, 44px);
  }

  .party-game-picker {
    padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    place-items: start center;
  }

  .party-game-picker-card {
    width: min(800px, 100%);
  }

  .party-game-picker .eyebrow {
    margin: 0;
    font-size: 9px;
  }

  .party-game-picker h1 {
    margin: 2px 0 3px;
    font-size: clamp(26px, 7vh, 34px);
    line-height: 1;
  }

  .party-game-picker h1 br {
    display: none;
  }

  .party-game-picker h1 em {
    margin-left: 0.2em;
  }

  .party-game-picker .lead {
    margin: 0;
    font-size: 10px;
    line-height: 1.25;
  }

  .party-game-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
  }

  .party-game-option {
    min-height: 205px;
    gap: 5px;
    padding: 11px 14px;
    border-radius: 18px;
  }

  .party-game-art {
    min-height: 43px;
    margin: 0;
    font-size: 25px;
  }

  .party-game-option-hockey .party-game-art i {
    width: 38px;
    height: 38px;
    border-width: 5px;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.32);
  }

  .party-game-option-hockey .party-game-art b {
    font-size: 20px;
  }

  .party-game-option-bam .party-game-art b {
    padding: 4px 7px;
    font-size: 16px;
  }

  .party-game-option > strong {
    font-size: 19px;
  }

  .party-game-option > small {
    min-height: 28px;
    font-size: 10px;
    line-height: 1.25;
  }

  .party-game-option > em {
    font-size: 10px;
  }

  .party-game-privacy {
    margin: 6px 2px 0;
    font-size: 8px;
    line-height: 1.25;
  }
}

.camera-choice button {
  display: grid;
  min-height: 64px;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.camera-choice button[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.camera-choice small {
  color: inherit;
  font-size: 10px;
  opacity: 0.72;
}

.drawer-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.control-drawer .video-share-toggle {
  margin: 0;
}

.video-share-explainer {
  color: var(--ink) !important;
}

#shareVideoInput:not(:checked) + span #videoShareStatus {
  display: none;
}

.setup-mini ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: #43443f;
  font-size: 12px;
  line-height: 1.45;
}

.setup-mini li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
}

.setup-mini b {
  color: var(--blue);
  font-size: 10px;
}

.stop-camera-button {
  width: 100%;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .display-app.is-arena .arena-hud,
  .display-app[data-view]:not([data-view="lobby"]) .arena-hud {
    right: 14px;
    left: 14px;
    flex-direction: row;
    align-items: start;
    gap: 10px;
  }

  .display-app.is-arena .arena-name,
  .display-app[data-view]:not([data-view="lobby"]) .arena-name {
    display: none;
  }

  .display-app.is-arena .scoreboard,
  .display-app[data-view]:not([data-view="lobby"]) .scoreboard {
    width: 100%;
    overflow: hidden;
  }

  .display-app.is-arena .scoreboard span,
  .display-app[data-view]:not([data-view="lobby"]) .scoreboard span {
    min-width: 0;
    padding: 7px 8px;
  }

  .display-app.is-arena .arena-message,
  .display-app[data-view]:not([data-view="lobby"]) .arena-message {
    padding: 82px 20px 70px;
  }

  .tv-setup-steps {
    width: min(100%, 680px);
  }
}

@media (max-width: 680px) {
  .tv-setup-steps {
    grid-template-columns: 1fr;
    max-height: 38vh;
    overflow: auto;
  }

  .tv-setup-steps li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-left: 0;
  }

  .legend {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .gesture-hud {
    top: max(64px, calc(env(safe-area-inset-top) + 56px));
    width: min(560px, calc(100% - 180px));
  }

  .gesture-hud span {
    min-height: 34px;
    padding: 3px 5px;
    font-size: 9px;
  }

  .gesture-hud b {
    font-size: 17px;
  }

  .lane-zone-symbol {
    min-width: 76px;
    min-height: 44px;
    padding: 5px 8px;
    font-size: clamp(23px, 4.8vw, 38px);
  }

  .lane-center-label {
    transform: translate(-50%, 48px);
  }

  .gesture-vertical-symbol {
    width: min(30vw, 190px);
    min-width: 126px;
    min-height: 40px;
    padding: 6px 10px;
    font-size: clamp(16px, 3.2vw, 24px);
  }

  .gesture-vertical-jump {
    top: max(126px, calc(env(safe-area-inset-top) + 118px));
  }

  .motion-field::after {
    top: max(126px, calc(env(safe-area-inset-top) + 118px));
    width: min(320px, 44vw);
    padding: 9px 12px;
    font-size: clamp(11px, 1.9vw, 14px);
  }

  .live-command {
    top: max(68px, calc(env(safe-area-inset-top) + 58px));
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(230px, 32vw);
    min-width: 0;
    transform: translateX(-50%);
  }

  .live-command strong {
    font-size: clamp(20px, 4vw, 28px);
  }

  .motion-tutorial {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    width: min(620px, calc(100% - 28px));
    margin: 0 auto;
    padding: 10px 12px 11px;
  }

  .motion-tutorial-content {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 9px;
    margin-top: 4px;
  }

  .motion-tutorial .gesture-coach {
    width: 68px;
    height: 78px;
    border-radius: 18px;
  }

  .motion-tutorial-copy > strong,
  .motion-tutorial > strong {
    margin-top: 4px;
    font-size: clamp(14px, 2.6vw, 19px);
  }

  .motion-tutorial-copy > p,
  .motion-tutorial > p {
    margin-top: 3px;
    font-size: 9px;
  }

  .motion-tutorial-steps {
    margin-top: 7px;
  }

  .motion-tutorial-steps span {
    padding-top: 5px;
  }

  .motion-tutorial-steps i {
    width: 19px;
    height: 19px;
    font-size: 10px;
  }

  .controller-app.camera-active .live-guidance {
    display: none;
  }

  .controller-app[data-body-gesture="squat"] .motion-tutorial {
    top: max(150px, 38vh);
    bottom: auto;
  }

  .live-guidance {
    right: max(82px, calc(env(safe-area-inset-right) + 70px));
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 68px);
    left: max(82px, calc(env(safe-area-inset-left) + 70px));
  }

  .camera-safe {
    inset: 62px 16% 58px;
  }

  .camera-safe::before {
    width: min(18vw, 130px);
    height: min(56vh, 280px);
  }

  .camera-start-overlay {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
    column-gap: 36px;
    padding: 72px 7vw 48px;
    text-align: left;
  }

  .camera-start-overlay > span,
  .camera-start-overlay h1,
  .camera-start-overlay p {
    grid-column: 1;
    justify-self: start;
  }

  .camera-start-overlay .motion-button,
  .camera-start-overlay .camera-error {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
  }
}

/* Transport jest awaryjny: przy sterowaniu sylwetką nie zasłania wizjera. */
.control-drawer .controller-game-dock {
  position: static;
  display: grid;
  width: 100%;
  margin: 10px 0 0;
  padding: 7px;
  border-color: var(--ink);
  background: var(--film);
  opacity: 1;
  pointer-events: auto;
}

.controller-app.drawer-open .control-drawer .controller-game-dock {
  opacity: 1;
  pointer-events: auto;
}

.control-drawer .controller-game-dock .primary-button,
.control-drawer .controller-game-dock .icon-button {
  min-height: 48px;
}

/* Keep the party orientation screen aligned with the Color Chomp landing
   page. This final override must remain below legacy per-game themes. */
.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) {
  padding: max(150px, 21vh) clamp(24px, 7vw, 54px) max(42px, 7vh) !important;
  background:
    radial-gradient(circle at 10% 13%, rgba(53,220,238,.68) 0 4%, transparent 4.4%),
    radial-gradient(circle at 88% 17%, rgba(255,85,117,.72) 0 3.2%, transparent 3.6%),
    radial-gradient(circle at 78% 83%, rgba(255,214,70,.58) 0 4.5%, transparent 4.9%),
    linear-gradient(180deg, #061431 0 31%, #f7f0e4 31.2% 100%) !important;
  color: #07142d !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"])::before {
  content: "↻" !important;
  top: max(24px, 4vh) !important;
  width: clamp(132px, 41vw, 210px) !important;
  height: clamp(72px, 23vw, 114px) !important;
  border: 4px solid #fff !important;
  border-radius: clamp(20px, 5vw, 31px) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 25% 50%, #47deea 0 7%, transparent 7.6%),
    radial-gradient(circle at 75% 50%, #ff5575 0 7%, transparent 7.6%),
    linear-gradient(135deg, #5547ff, #7a38ed) !important;
  box-shadow: 0 0 0 9px rgba(255,255,255,.1), 0 24px 54px rgba(0,0,0,.35) !important;
  opacity: 1 !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"])::after {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 16% 43%, rgba(85,71,255,.16) 0 5%, transparent 5.4%),
    radial-gradient(circle at 91% 54%, rgba(255,85,117,.15) 0 7%, transparent 7.4%),
    radial-gradient(circle at 7% 90%, rgba(71,222,234,.18) 0 6%, transparent 6.4%) !important;
  background-size: auto !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) > span {
  border-color: rgba(85,71,255,.25) !important;
  background: rgba(85,71,255,.1) !important;
  color: #5547ff !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) h1 {
  color: #07142d !important;
  text-shadow: none !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) h1 em {
  color: #5547ff !important;
}

.controller-app.is-paired:is([data-game-mode="air-hockey"], [data-game-mode="say-bam"])
  .camera-start-overlay:is([data-state="rotate"], [data-state="camera-portrait"], [data-state="blocked"]) p {
  color: #26334d !important;
  text-shadow: none !important;
}

.display-app #arenaMessage.is-hidden {
  opacity: 0;
  pointer-events: none;
}