:root {
  color-scheme: dark;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cyan: #37cdf7;
  --pink: #ff3868;
  --yellow: #ffd51e;
  --mint: #4ff0bf;
  --ink: #17103d;

  /*
   * Arcade cabinet, not frosted glass. Surfaces are opaque and sit on a hard
   * offset shadow with no blur, so panels read as printed panels under a screen
   * rather than as translucent sheets. The only blur in the app is the menu
   * scrim, which is a background effect rather than a surface treatment.
   */
  --panel: #241a5e;
  --panel-edge: rgba(255,255,255,.17);
  --well: rgba(8,5,36,.42);
  --paper: #fdf6e6;
  --paper-ink: #2c1a5c;
  --drop: rgba(6,3,26,.55);
  --hold-mark: rgba(255,255,255,.34);
  --r-panel: 26px;
  --r-card: 18px;
  --r-chip: 12px;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #17114c;
}

button { font: inherit; }

#game-shell {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(125% 85% at 50% -12%, #3c1c74 0%, transparent 62%),
    linear-gradient(180deg, #1d1254 0%, #150d3d 58%, #0e0829 100%);
}

#game-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#skeleton-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
}

.motion-navigation {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  pointer-events: none;
}

.motion-nav-cursor {
  --motion-color: var(--cyan);
  --motion-progress: 0deg;
  position: absolute;
  left: 0;
  top: 0;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  transition: opacity .12s ease, transform .12s ease;
}

.motion-nav-cursor.right-cursor { --motion-color: var(--pink); }
.motion-nav-cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.motion-nav-cursor > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--motion-color) var(--motion-progress), rgba(255,255,255,.28) 0);
  box-shadow: 0 8px 25px rgba(18,7,56,.36), 0 0 25px color-mix(in srgb, var(--motion-color) 60%, transparent);
}
.motion-nav-cursor > i::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #1b1149;
  border: 3px solid rgba(255,255,255,.9);
}
.motion-nav-cursor > span { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; color: white; }
.motion-nav-cursor > small {
  position: absolute;
  z-index: 2;
  top: 72px;
  padding: 5px 9px;
  border-radius: 6px;
  color: var(--ink);
  background: var(--yellow);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s;
}
.motion-nav-cursor.is-holding > small { opacity: 1; }

/*
 * Pairing is deliberately its own first-run screen. The explicit edge values,
 * percentage sizes, flex centering, and fixed pixel fallbacks are for TV
 * browsers that predate `inset`, `clamp`, CSS grid, and viewport min/max.
 */
.connection-gate {
  position: absolute;
  z-index: 30;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  color: white;
  background: #100a30;
  background:
    radial-gradient(circle at 50% 24%, rgba(75,207,255,.24), transparent 36%),
    #100a30;
}

.connection-gate-card {
  width: 90%;
  max-width: 920px;
  max-height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
  margin: auto 0;
  padding: 42px;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 26px;
  text-align: center;
  background: #2e2277;
  background: linear-gradient(180deg, #2e2277, #21175b);
  box-shadow: 14px 14px 0 rgba(6,3,26,.55);
}

.connection-gate-eyebrow {
  margin: 0;
  color: #ffd51e;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.connection-gate-card h1 {
  margin: 10px 0 16px;
  color: white;
  font-size: 64px;
  font-size: clamp(46px, 6vw, 72px);
  line-height: .95;
  letter-spacing: -.045em;
}

.connection-gate-card h1 span { color: #ffd51e; }
.connection-gate-card > p:not(.connection-gate-eyebrow) {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,.74);
  font-size: 20px;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
}

.connection-waiting {
  max-width: 620px;
  margin: 28px auto 0;
  padding: 22px;
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(8,5,34,.28);
}

.connection-waiting i {
  width: 34px;
  height: 34px;
  margin-bottom: 5px;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: #37cdf7;
  border-radius: 50%;
  animation: connection-spin .9s linear infinite;
}

.connection-waiting strong { font-size: 17px; }
.connection-waiting span { color: rgba(255,255,255,.56); font-size: 12px; }
.connection-new-code {
  margin: 20px auto 0;
  padding: 13px 24px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font: 750 18px/1.25 system-ui, sans-serif;
  cursor: pointer;
}
.connection-new-code:hover,
.connection-new-code:focus {
  border-color: #37cdf7;
  background: rgba(55,205,247,.15);
  outline: 3px solid rgba(55,205,247,.4);
  outline-offset: 3px;
}
.connection-demo {
  margin-top: 18px;
  border: 0;
  color: rgba(255,255,255,.4);
  background: transparent;
  font: 750 10px/1 ui-monospace, monospace;
  cursor: pointer;
}
@keyframes connection-spin { to { transform: rotate(360deg); } }

body.calibration-active .diagnostics { display: none; }
button.is-remote-selected, [data-motion-select].is-remote-selected {
  outline: 5px solid #fff0a3; outline-offset: 5px; box-shadow: 0 0 0 9px #071628;
}

.hosted-pairing {
  width: 100%;
  max-width: 820px;
  margin: 22px auto 4px;
  padding: 16px;
  padding: clamp(16px, 2vw, 24px);
  border: 3px solid rgba(255, 213, 30, .72);
  border-radius: var(--r-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  text-align: center;
  background: rgba(11, 7, 42, .55);
  box-shadow: 8px 8px 0 rgba(5, 3, 24, .35);
}

.hosted-pairing-options {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, .82fr) minmax(300px, 1.18fr);
  align-items: stretch;
  gap: clamp(14px, 2vw, 24px);
}
.hosted-pairing-qr-option,
.hosted-pairing-code-option {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  background: rgba(255,255,255,.045);
}
.hosted-pairing-qr-option { background: rgba(55,205,247,.08); }
.hosted-pairing small {
  color: rgba(255,255,255,.58);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hosted-pairing-code-option strong {
  color: var(--yellow);
  font: 950 56px/.95 ui-monospace, "SFMono-Regular", monospace;
  font: 950 clamp(42px, 6vw, 68px)/.95 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .11em;
  text-shadow: 0 0 24px rgba(255, 213, 30, .28);
  white-space: nowrap;
}
.hosted-pairing-qr-frame {
  width: 190px;
  height: 190px;
  width: clamp(138px, 16vw, 190px);
  height: clamp(138px, 16vw, 190px);
  aspect-ratio: 1;
  padding: 7px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: white;
  box-shadow: 0 9px 24px rgba(0,0,0,.28);
}
.hosted-pairing-qr-frame canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated;
}
.hosted-pairing-qr-option b {
  color: white;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 950;
}
.hosted-pairing-expiry {
  min-width: 172px;
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.07);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
}
.hosted-pairing-expiry.is-expiring {
  border-color: rgba(255, 213, 30, .52);
  color: #fff3a3;
  background: rgba(255, 213, 30, .12);
}
.hosted-pairing-expiry.is-refreshing { animation: pairing-refresh-pulse .8s ease-in-out infinite alternate; }
@keyframes pairing-refresh-pulse { to { opacity: .55; } }
.hosted-pairing p {
  max-width: 650px;
  margin: 0 auto;
  color: white;
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.35;
}
.hosted-pairing > span {
  color: rgba(255,255,255,.48);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}
/*
 * Every control a hand can hold wears the same corner ticks. Without this the
 * plain text actions ("Back to setup") looked identical to static copy, so from
 * couch distance there was no way to tell what a hand could act on.
 */
[data-motion-select] {
  position: relative;
}

[data-motion-select]::before,
[data-motion-select]::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid var(--hold-mark);
  pointer-events: none;
  transition: border-color .16s ease, opacity .16s ease;
}

[data-motion-select]::before {
  top: 5px;
  left: 5px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 5px 0 0 0;
}

[data-motion-select]::after {
  right: 5px;
  bottom: 5px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 5px 0;
}

.game-card::before, .game-card::after { top: 14px; left: 14px; }
.game-card::after { top: auto; left: auto; right: 14px; bottom: 14px; }

[data-motion-select].is-motion-targeted {
  outline: 4px solid var(--yellow);
  outline-offset: 4px;
  filter: brightness(1.06);
}

[data-motion-select].is-motion-targeted::before,
[data-motion-select].is-motion-targeted::after {
  border-color: var(--yellow);
}

[data-motion-select]:disabled::before,
[data-motion-select]:disabled::after {
  opacity: .25;
}

/*
 * Halftone dots plus faint scanlines. This sits behind the game canvas, so it
 * only shows on the library screen; every game paints its own opaque scene.
 */
.ambient-dots {
  position: absolute;
  inset: 0;
  opacity: .5;
  z-index: 0;
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,.14) 0 1.4px, transparent 1.9px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  background-size: 26px 26px, 100% 3px;
}

/*
 * Menus sit in front of a live game canvas. The panels each carry their own
 * backdrop blur, but the background stayed legible around their edges, so this
 * layer softens the whole scene while a menu is open. It is active only on menu
 * screens, never during play, so the full-screen filter costs nothing while a
 * round is running.
 */
.menu-scrim {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Blur carries the effect. Heavy darkening was tried and reverted: the panels
     are translucent, so dimming the backdrop dimmed their interiors and cost
     body-copy contrast on the Air Draw sheet. */
  background: rgba(9, 6, 38, .18);
  backdrop-filter: blur(26px) saturate(1.02);
  -webkit-backdrop-filter: blur(26px) saturate(1.02);
  transition: opacity .3s ease, visibility 0s linear .3s;
}

.menu-scrim.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .menu-scrim { transition: none; }
}

.glass-panel {
  background: linear-gradient(180deg, #2b2071 0%, var(--panel) 62%, #1c1350 100%);
  border: 2px solid var(--panel-edge);
  box-shadow: 14px 14px 0 var(--drop);
}

.library-panel {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  inset: 50% auto auto 50%;
  width: calc(100% - 72px);
  max-width: 1280px;
  width: min(1280px, calc(100vw - 72px));
  transform: translate(-50%, -50%);
}

.library-header {
  margin: 0 6px clamp(24px, 4vh, 42px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.library-header,
.library-footer { width: clamp(620px, 46vw, 1200px); max-width: calc(100vw - 40px); margin-left: auto; margin-right: auto; }
.library-header-actions { display: grid; justify-items: end; gap: 9px; }
.settings-open-button {
  width: 100%;
  min-height: 54px;
  padding: 12px 18px;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: var(--r-chip);
  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.07);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.settings-open-button:hover { color: white; background: rgba(255,255,255,.14); }

h1.library-title {
  font-size: clamp(52px, 7.2vw, 98px);
  line-height: .86;
  color: white;
  background: none;
  text-shadow: 6px 6px 0 rgba(8,4,32,.42);
}

h1.library-title span {
  color: var(--yellow);
}

.library-lede {
  margin: 20px 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 800;
}

/* One tracker-status chip, on every screen that can act on the tracker --
   including both results screens, which previously gave no hint that the phone
   had dropped until Play again did nothing. */
.connection-chip {
  min-width: 245px;
  padding: 13px 16px;
  border-radius: var(--r-chip);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--well);
  border: 2px solid rgba(255,255,255,.12);
}

.connection-chip > div { display: grid; gap: 2px; }
.connection-chip small { color: rgba(255,255,255,.5); font-size: 9px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.connection-chip strong { font-size: 15px; }
.results .connection-chip { margin-top: 26px; max-width: 300px; }

.library-action-stack {
  width: clamp(620px, 46vw, 1200px);
  max-width: calc(100vw - 40px);
  margin: 0 auto;
  gap: 13px;
}

.game-library {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}

.game-card {
  position: relative;
  min-height: clamp(128px, 18vh, 190px);
  overflow: hidden;
  padding: 0;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 22px;
  display: grid;
  grid-template-rows: 1fr;
  text-align: left;
  color: white;
  box-shadow: 12px 12px 0 var(--drop);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.game-card:hover { transform: translate(-3px, -3px); box-shadow: 17px 17px 0 var(--drop); }
.game-card:active { transform: translate(4px, 4px); box-shadow: 6px 6px 0 var(--drop); }
.balloon-card { background: linear-gradient(145deg, #ff4373, #8239d8 68%, #4023a8); }
.shape-card { background: linear-gradient(145deg, #18b8d5, #1768c8 60%, #3130a1); }
.draw-card { background: linear-gradient(145deg, #ffad42, #e95f86 56%, #7a45d6); }

.game-card-art {
  position: absolute;
  inset: 0 0 0 54%;
  overflow: hidden;
}

.game-card-art::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% 30%;
  height: 70%;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
}

.card-balloon { position: absolute; width: 108px; height: 132px; border-radius: 50%; box-shadow: inset 18px 10px 0 rgba(255,255,255,.22), 0 22px 40px rgba(27,8,67,.25); }
.card-balloon::after { content: ""; position: absolute; left: 51px; top: 128px; width: 3px; height: 90px; background: rgba(255,255,255,.55); transform: rotate(8deg); }
.card-balloon.one { left: 11%; top: 14%; transform: rotate(-8deg); background: linear-gradient(145deg, #ffe43e, #ff761e); }
.card-balloon.two { right: 14%; top: 3%; transform: scale(.74) rotate(9deg); background: linear-gradient(145deg, #45e6ff, #2365ef); }
.game-card .card-hand { position: absolute; left: 46%; top: 33%; width: 92px; height: 92px; color: #fff1d8; fill: rgba(255,196,132,.5); stroke-width: 1.9; transform: rotate(-14deg); filter: drop-shadow(0 12px 14px rgba(20,6,58,.42)); }

.shape-wall-mini {
  position: absolute;
  width: 68%;
  height: 76%;
  left: 16%;
  top: 7%;
  border: 12px solid rgba(152,247,255,.82);
  border-radius: 26px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 12px, rgba(255,255,255,.04) 12px 24px);
  box-shadow: 0 0 35px rgba(98,235,255,.46), inset 0 0 35px rgba(47,231,255,.2);
  transform: perspective(500px) rotateX(5deg);
}

.shape-person-mini {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 43%;
  width: 122px;
  height: 122px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #142a74;
  background: #fff24a;
  border: 9px solid white;
  box-shadow: 0 0 35px rgba(255,242,74,.7);
  font-style: normal;
  font-size: 62px;
  font-weight: 1000;
}

.draw-paper-mini {
  position: absolute;
  left: 15%;
  top: 9%;
  width: 66%;
  height: 69%;
  border-radius: 18px;
  background: #fffdf5;
  box-shadow: 0 20px 45px rgba(34,10,69,.28);
  transform: rotate(-4deg);
}

.draw-paper-mini::before,
.draw-paper-mini::after,
.draw-paper-mini span {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  height: 11px;
  border-radius: 999px;
  background: #45c8f4;
  transform-origin: left center;
}

.draw-paper-mini::before { top: 28%; transform: rotate(19deg); background: #ff526f; }
.draw-paper-mini::after { top: 50%; transform: rotate(-13deg); background: #ffd03c; }
.draw-paper-mini span { top: 69%; transform: rotate(8deg); background: #45d69a; }
.game-card .draw-pencil-mini { position: absolute; z-index: 2; right: 1%; top: 4%; width: 138px; height: 138px; color: #fff5a8; fill: rgba(255,225,74,.62); stroke-width: 1.6; transform: rotate(-16deg); filter: drop-shadow(0 12px 14px rgba(20,6,58,.42)); }

.game-card-copy {
  position: relative;
  z-index: 2;
  width: 68%;
  height: 100%;
  align-self: stretch;
  align-content: center;
  padding: 20px 112px 20px 28px;
  display: grid;
  background: linear-gradient(90deg, rgba(8,4,50,.9) 0 72%, transparent 100%);
}

.game-card-copy small { margin-bottom: 5px; text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.6); font-size: 9px; font-weight: 950; }
.game-card-copy strong { font-size: clamp(27px, 3vw, 42px); line-height: 1; }
.game-card-copy span { margin-top: 8px; color: rgba(255,255,255,.72); font-size: 14px; font-weight: 700; }
.game-card > b { position: absolute; z-index: 3; right: 25px; bottom: 28px; display: flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.game-card > b i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--yellow); font-style: normal; }

.library-footer {
  margin: 20px 7px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 720;
}

.library-footer b { margin-right: 8px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .11em; font-size: 9px; }

.settings-panel {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  inset: 50% auto auto 50%;
  width: calc(100% - 60px);
  max-width: 720px;
  padding: 48px;
  width: min(720px, calc(100vw - 60px));
  padding: clamp(32px, 5vw, 58px);
  transform: translate(-50%, -50%);
  border-radius: var(--r-panel);
}
.settings-panel header > p:last-child { margin: 15px 0 0; color: rgba(255,255,255,.66); font-size: 17px; line-height: 1.4; font-weight: 720; }
.settings-panel h1 { font-size: clamp(48px, 7vw, 78px); }
.settings-hand-card { margin: 30px 0 24px; padding: 20px; border: 2px solid rgba(255,255,255,.12); border-radius: var(--r-card); display: grid; gap: 14px; background: var(--well); }
.settings-hand-card > small { color: rgba(255,255,255,.5); font-size: 9px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.settings-hand-choice { width: min(520px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 10px; }
.settings-hand-choice button { min-height: 76px; padding: 14px 20px; border: 2px solid rgba(255,255,255,.15); border-radius: var(--r-card); display: grid; grid-template-columns: auto 1fr auto; place-items: center start; align-content: center; gap: 12px; color: rgba(255,255,255,.65); background: rgba(255,255,255,.05); cursor: pointer; }
.settings-hand-choice button > span { font-size: 29px; }
.settings-hand-choice button > b { font-size: 17px; }
.settings-hand-choice button > small { color: inherit; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.settings-hand-choice button.is-selected { color: var(--ink); background: var(--mint); border-color: white; box-shadow: 5px 5px 0 rgba(7,4,39,.42); }
.settings-hand-card > strong { color: rgba(255,255,255,.74); font-size: 13px; }
.settings-back-button { width: 100%; margin: 0; }

.setup-panel {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  inset: 50% auto auto 50%;
  z-index: 4;
  width: calc(100% - 80px);
  max-width: 900px;
  min-height: 0;
  padding: 50px;
  width: min(900px, calc(100vw - 80px));
  max-height: calc(100vh - 42px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border-radius: var(--r-panel);
  padding: clamp(30px, 4vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding-bottom: clamp(96px, 11vh, 120px);
}

.setup-back-button {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 22px;
  bottom: 18px;
  left: 22px;
  width: auto;
  min-height: 54px;
  padding: 8px 14px;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--r-chip);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.08);
  cursor: pointer;
  font: 900 12px/1 system-ui, sans-serif;
}
.setup-back-button span { font-size: 19px; line-height: .7; }
.setup-back-button small { position: absolute; right: 18px; color: rgba(255,255,255,.48); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.setup-back-button:hover { color: white; background: rgba(255,255,255,.15); }
.setup-copy { padding-top: 0; }

.balloon-mode-grid {
  width: min(620px, 100%);
  margin: 18px auto 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.balloon-mode-card {
  min-height: 66px;
  padding: 10px 16px;
  border: 2px solid rgba(255,255,255,.14);
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.055);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.balloon-mode-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.32); }
.balloon-mode-card.is-selected { color: var(--ink); background: var(--yellow); border-color: white; box-shadow: 4px 4px 0 rgba(7,4,39,.42); }
.balloon-mode-card > b { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: white; font-size: 17px; }
.balloon-mode-card > span { min-width: 0; display: grid; gap: 3px; }
.balloon-mode-card strong { font-size: 14px; }
.balloon-mode-card small { color: inherit; opacity: .68; font-size: 8px; line-height: 1.2; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }

.shape-title { font-size: clamp(58px, 7.5vw, 104px); }
.shape-title span { color: #67efff; }
.shape-setup-panel { background: linear-gradient(180deg, #1c3b7f 0%, #1a2470 58%, #141a52 100%); }

/*
 * Air Draw's sheet is opaque paper with dark ink. It used to be a translucent
 * wash whose dark body copy was only readable because the bright canvas behind
 * it happened to show through; on any darker scene that text disappeared.
 */
.draw-setup-panel {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  inset: 50% auto auto 50%;
  width: calc(100% - 70px);
  max-width: 900px;
  min-height: 0;
  padding: 48px;
  width: min(900px, calc(100vw - 70px));
  max-height: calc(100vh - 42px);
  overflow-y: auto;
  padding: clamp(28px, 4vw, 54px);
  border-radius: var(--r-panel);
  transform: translate(-50%, -50%);
  color: var(--paper-ink);
  background:
    radial-gradient(circle at center, rgba(44,26,92,.055) 0 1.2px, transparent 1.7px),
    linear-gradient(180deg, #fffaf0 0%, var(--paper) 100%);
  background-size: 22px 22px, 100% 100%;
  border: 2px solid #16103f;
  box-shadow: 14px 14px 0 var(--drop);
  padding-bottom: clamp(96px, 11vh, 120px);
}

.draw-setup-panel [data-motion-select] { --hold-mark: rgba(44,26,92,.3); }
.draw-setup-panel [data-motion-select].is-motion-targeted { outline-color: #ff7a3d; }
.draw-setup-panel [data-motion-select].is-motion-targeted::before,
.draw-setup-panel [data-motion-select].is-motion-targeted::after { border-color: #ff7a3d; }

.draw-setup-panel .setup-back-button {
  color: rgba(44,26,92,.82);
  background: rgba(44,26,92,.06);
  border-color: rgba(44,26,92,.24);
}
.draw-setup-panel .setup-back-button:hover { color: var(--paper-ink); background: rgba(44,26,92,.12); }
.draw-setup-panel .setup-back-button small { color: rgba(44,26,92,.5); }

.draw-setup-header { padding-top: 0; display: flex; align-items: start; justify-content: space-between; gap: 32px; }
.draw-setup-header .lede { margin: 20px 0 0; max-width: 720px; color: rgba(44,26,92,.8); font-size: clamp(17px, 1.8vw, 23px); }
.draw-setup-header > div:first-child > .eyebrow { color: rgba(44,26,92,.6); }
.draw-title { font-size: clamp(55px, 6.8vw, 92px); color: var(--paper-ink); text-shadow: 4px 4px 0 rgba(44,26,92,.16); }
.draw-title span { color: #f4643c; }
.draw-setup-panel .connection-chip { color: var(--paper-ink); background: rgba(44,26,92,.07); border-color: rgba(44,26,92,.18); }
.draw-setup-panel .connection-chip small { color: rgba(44,26,92,.55); }
.draw-hand-choice > small { color: rgba(44,26,92,.55); font-size: 9px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }

.draw-mode-grid { width: min(620px, 100%); margin: 20px auto; display: grid; grid-template-columns: 1fr; gap: 10px; }
.draw-mode-card { min-height: 84px; padding: 13px 17px; border: 2px solid var(--paper-ink); border-radius: var(--r-card); display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; align-content: center; gap: 3px 13px; text-align: left; color: var(--paper-ink); background: #fffdf7; box-shadow: 6px 6px 0 rgba(44,26,92,.18); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.draw-mode-card:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 rgba(44,26,92,.22); }
.draw-mode-card.is-selected { background: #ffe9a8; box-shadow: 6px 6px 0 #f4643c; }
.draw-mode-card b { grid-row: 1 / 3; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: var(--paper-ink); background: var(--yellow); border: 2px solid var(--paper-ink); font-size: 18px; }
.draw-mode-card.is-selected b { background: #f4643c; color: #fff8e8; }
.draw-mode-card strong { font-size: 19px; }
.draw-mode-card span { color: rgba(44,26,92,.62); font-size: 12px; line-height: 1.35; font-weight: 700; }

.draw-setup-footer { width: min(620px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 10px; }
.draw-hand-choice { padding: 10px; border-radius: var(--r-card); display: grid; grid-template-columns: 1fr; gap: 7px; align-content: center; background: rgba(44,26,92,.06); border: 2px solid rgba(44,26,92,.14); }
.draw-hand-choice > small { padding: 0 4px 3px; }
.draw-hand-choice button { min-width: 72px; min-height: 44px; padding: 10px 13px; border: 2px solid rgba(44,26,92,.2); border-radius: var(--r-chip); color: rgba(44,26,92,.7); background: #fffdf7; cursor: pointer; font-size: 12px; font-weight: 900; }
.draw-hand-choice button.is-selected { color: var(--paper-ink); background: var(--mint); border-color: var(--paper-ink); }
.draw-start-actions { display: grid; align-content: center; }
.draw-setup-panel .primary-button:disabled { opacity: 1; color: rgba(44,26,92,.42); background: #ece0c4; box-shadow: 0 6px 0 rgba(44,26,92,.16); }
.draw-setup-panel .dev-button { flex-wrap: wrap; justify-content: center; }
.draw-start-actions .primary-button { margin: 0; }
.draw-start-actions .text-button { color: rgba(44,26,92,.7); }
.draw-start-actions .subtle-button { color: rgba(44,26,92,.5); }

.draw-toolbar {
  position: absolute;
  z-index: 5;
  left: 20%;
  right: 2.5%;
  /* The toolbar clears the tool rail, which follows the helper hand's side. */
  top: 1.7%;
  min-height: 62px;
  padding: 10px 14px 10px 20px;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  color: white;
  background: #1b1149;
  box-shadow: 7px 7px 0 var(--drop);
}
body.draw-rail-right .draw-toolbar { left: 2.5%; right: 20%; padding: 10px 20px 10px 14px; }
.draw-toolbar > div:first-child { min-width: 0; display: grid; }
.draw-toolbar small { color: #ffdf4b; font-size: 8px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.draw-toolbar strong { font-size: 19px; }
.draw-toolbar > div:first-child span { overflow: hidden; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.pose-preview-strip { margin: 0 0 19px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pose-preview-strip > span { min-height: 57px; border-radius: var(--r-chip); display: grid; place-items: center; align-content: center; gap: 2px; color: var(--yellow); background: var(--well); border: 2px solid rgba(255,255,255,.1); font-size: 21px; font-weight: 950; }
.pose-preview-strip small { color: rgba(255,255,255,.55); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.subtle-button { margin-top: 3px; color: rgba(255,255,255,.46); font-size: 11px; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: .18em;
  color: rgba(255,255,255,.62);
}

.eyebrow.gold { color: var(--yellow); }

h1 {
  margin: 0;
  font-size: clamp(58px, 8vw, 112px);
  line-height: .82;
  letter-spacing: -.065em;
  font-weight: 1000;
}

/* Flat marquee lettering with a hard offset shadow. The gradient-filled text
   it replaces was the loudest generic tell in the whole layout. */
h1 {
  color: white;
  text-shadow: 5px 5px 0 rgba(8,4,32,.45);
}

h1 span { color: var(--yellow); }

.lede {
  max-width: 610px;
  margin: 28px 0 32px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
  font-weight: 760;
  color: rgba(255,255,255,.82);
}

.steps {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 26px;
  list-style: none;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 190px;
  font-size: 14px;
  font-weight: 760;
  color: rgba(255,255,255,.75);
}

.steps b {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ink);
  background: white;
  font-size: 13px;
}

.connection-card {
  border-radius: var(--r-panel);
  padding: 26px;
  background: rgba(9, 6, 38, .5);
  border: 2px solid rgba(255,255,255,.12);
}

.connection-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.connection-heading div { display: grid; gap: 2px; }
.connection-heading small { color: rgba(255,255,255,.55); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.connection-heading strong { font-size: 20px; }

.status-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffbd2e;
  box-shadow: 0 0 12px currentColor;
}

.status-dot.connected { color: #2ce77d; background: currentColor; }
.status-dot.searching { color: #ffbd2e; background: currentColor; }
.status-dot.failed { color: #ff406b; background: currentColor; }

/*
 * One readiness widget for every game. Balloon Pop and Air Draw light two hand
 * slots; Shape Shift fills a fifteen-segment body track. Same label, same
 * message line, same ready state, so a player learns it once.
 */
.readiness {
  margin: 26px 0 20px;
  padding: 15px 16px 14px;
  border-radius: var(--r-card);
  display: grid;
  gap: 11px;
  background: var(--well);
  border: 2px solid rgba(255,255,255,.1);
  transition: border-color .2s ease, background .2s ease;
}

.readiness.is-ready { border-color: rgba(79,240,191,.55); background: rgba(40,205,164,.15); }
.readiness-label { color: rgba(255,255,255,.5); font-size: 9px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.readiness-label b { color: white; letter-spacing: .06em; font-size: 11px; }
.readiness-message { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.3; font-weight: 780; }

.readiness-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.readiness-slot {
  min-height: 62px;
  border-radius: var(--r-chip);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(255,255,255,.1);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.readiness-slot small { font-size: 9px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.readiness-slot .mark-hand { width: 26px; height: 26px; }
.readiness-slot.is-ready { color: var(--ink); border-color: rgba(255,255,255,.75); }
.readiness-slot.cyan.is-ready { background: var(--cyan); }
.readiness-slot.pink.is-ready { background: var(--pink); }
.readiness-slot.mint.is-ready { background: var(--mint); }

.mark-hand { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.readiness-track { display: flex; gap: 3px; }
.readiness-track i {
  flex: 1;
  height: 20px;
  border-radius: 3px;
  background: rgba(255,255,255,.09);
  transition: background .18s ease, box-shadow .18s ease;
}
.readiness-track i.is-lit { background: var(--cyan); }
.readiness.is-ready .readiness-track i.is-lit { background: var(--mint); }

/* On the Air Draw paper sheet the same component switches to ink on cream. */
.readiness.on-paper { background: rgba(44,26,92,.06); border-color: rgba(44,26,92,.14); }
.readiness.on-paper.is-ready { border-color: #1fa87f; background: rgba(79,240,191,.28); }
.readiness.on-paper .readiness-label { color: rgba(44,26,92,.55); }
.readiness.on-paper .readiness-message { color: rgba(44,26,92,.78); }
.readiness.on-paper .readiness-slot { color: rgba(44,26,92,.42); background: #fffdf7; border-color: rgba(44,26,92,.2); }
.readiness.on-paper .readiness-slot.is-ready { color: var(--paper-ink); border-color: var(--paper-ink); }
.readiness.on-paper .readiness-slot.cyan.is-ready { background: var(--cyan); }
.readiness.on-paper .readiness-slot.pink.is-ready { background: var(--pink); }
.readiness.on-paper .readiness-slot.mint.is-ready { background: var(--mint); }

.rule-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rule-strip > span {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--r-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: rgba(255,255,255,.86);
  background: rgba(38,215,255,.09);
  border: 1px solid rgba(79,222,255,.18);
  font-size: 11px;
  font-weight: 850;
}
.rule-strip b { color: var(--yellow); }
.rule-strip .danger { background: rgba(255,55,62,.11); border-color: rgba(255,88,75,.28); }
.rule-strip .danger b { color: #ff9b6e; }
.rule-balloon { width: 16px; height: 20px; border-radius: 50%; background: linear-gradient(145deg, var(--cyan), #2764ff); box-shadow: 0 0 10px rgba(56,211,255,.6); }
.rule-spike {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff3a3;
  background: #d72848;
  clip-path: polygon(50% 0,61% 28%,85% 15%,72% 39%,100% 50%,72% 61%,85% 85%,61% 72%,50% 100%,39% 72%,15% 85%,28% 61%,0 50%,28% 39%,15% 15%,39% 28%);
  font-style: normal;
  font-weight: 950;
}

.connection-detail {
  min-height: 44px;
  margin: 0 0 20px;
  text-align: center;
  color: rgba(255,255,255,.58);
  font-size: 13px;
  line-height: 1.4;
}

/* Menu screens share one TV-safe composition: a centred heading, passive
   information at the sides, every selectable action in one body-centred lane,
   and a full-width escape rail at the bottom. Gameplay remains purpose-built. */
.tv-action-screen:not(.tv-action-screen-compact) {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 28px);
  overflow: hidden;
  padding: 28px 30px 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.tv-action-screen .tv-action-header { text-align: center; }
.tv-action-screen .tv-action-header .eyebrow { margin-bottom: 9px; }
.tv-action-screen .tv-action-header h1 { font-size: clamp(54px, 6.5vw, 84px); }
.tv-action-screen .tv-action-header .lede {
  max-width: none;
  margin: 13px 0 0;
  font-size: clamp(17px, 1.8vw, 22px);
}

.tv-action-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(460px, 2.25fr) minmax(210px, 1fr);
  align-items: stretch;
  gap: 16px;
}

.tv-action-lane {
  width: min(620px, 100%);
  justify-self: center;
  align-self: start;
  display: grid;
  gap: 14px;
}
.tv-action-lane > .primary-button { width: 100%; margin: 0; }
.tv-action-lane > .dev-button { margin-top: 0; }

.tv-info-panel {
  min-width: 0;
  padding: 17px;
  border: 2px solid rgba(255,255,255,.12);
  border-radius: var(--r-card);
  background: rgba(9, 6, 38, .42);
}
.tv-side-title {
  color: rgba(255,255,255,.55);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tv-status-panel { display: grid; align-content: start; }
.tv-info-panel .steps { display: grid; align-content: start; gap: 13px; }
.tv-info-panel .steps li { max-width: none; font-size: 12px; line-height: 1.2; }
.tv-info-panel .steps b { flex-basis: 25px; width: 25px; height: 25px; }

.tv-action-screen-compact {
  width: min(720px, calc(100vw - 60px));
  max-width: 720px;
  max-height: calc(100vh - 28px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.tv-action-screen-compact .tv-action-lane { width: 100%; }

.balloon-setup-actions .balloon-mode-grid { width: 100%; margin: 0; }
.balloon-how-to { display: grid; grid-template-rows: auto 1fr auto; gap: 15px; }
.balloon-how-to .rule-strip { grid-template-columns: minmax(0, 1fr); }
.balloon-how-to .rule-strip > span { padding: 7px 8px; font-size: 10px; }

.balloon-tracker-status .connection-heading strong { font-size: 16px; }
#setup-panel .readiness { grid-template-columns: minmax(0, 1fr); }
#setup-panel .readiness-slots { grid-column: auto; }
#setup-panel .readiness-message { grid-column: auto; }
.balloon-tracker-status .readiness { margin: 17px 0 14px; padding: 12px; }
.balloon-tracker-status .readiness-slot { min-height: 54px; }
.balloon-tracker-status .connection-detail { min-height: 0; margin: 0; font-size: 11px; }

.shape-instructions { display: grid; grid-template-rows: auto 1fr auto; gap: 15px; }
.shape-instructions .pose-preview-strip { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shape-session-card {
  min-height: 154px;
  padding: 20px;
  border: 2px solid rgba(255,255,255,.14);
  border-radius: var(--r-card);
  display: grid;
  place-items: center;
  align-content: center;
  color: white;
  background: rgba(9, 6, 38, .38);
}
.shape-session-card b { color: var(--yellow); font-size: clamp(58px, 6vw, 82px); line-height: .8; text-shadow: 4px 4px 0 rgba(8,4,32,.42); }
.shape-session-card span { margin-top: 9px; font-size: 15px; font-weight: 950; text-transform: uppercase; letter-spacing: .12em; }
.shape-session-card small { margin-top: 8px; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 800; }
.shape-tracker-status .connection-heading strong { font-size: 16px; }
.shape-tracker-status .readiness { margin: 17px 0 0; padding: 12px; }

.draw-setup-panel.tv-action-screen {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 28px);
  overflow: hidden;
  padding: 28px 30px 92px;
}
.draw-setup-header.tv-action-header { display: block; text-align: center; }
.draw-setup-header.tv-action-header .eyebrow { color: rgba(44,26,92,.6); }
.draw-setup-header.tv-action-header .lede { color: rgba(44,26,92,.8); }
.draw-setup-actions .draw-mode-grid { width: 100%; margin: 0; }
.draw-setup-actions .draw-hand-choice { width: 100%; }
.draw-start-actions { gap: 10px; }
.draw-start-actions .primary-button { width: 100%; }
.draw-start-actions .dev-button { margin-top: 0; }
.draw-instructions {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 15px;
  color: var(--paper-ink);
  background: rgba(255,253,247,.76);
  border-color: rgba(44,26,92,.2);
}
.draw-instructions .tv-side-title,
.draw-instructions .steps li { color: rgba(44,26,92,.72); }
.draw-instructions .steps b { color: #fffaf0; background: var(--paper-ink); }
.draw-tracker-status {
  color: var(--paper-ink);
  background: rgba(255,253,247,.76);
  border-color: rgba(44,26,92,.2);
}
.draw-tracker-status .connection-heading small { color: rgba(44,26,92,.55); }
.draw-tracker-status .connection-heading strong { font-size: 16px; }
.draw-tracker-status .readiness { margin: 17px 0 0; padding: 12px; }

.setup-panel .connection-card > .primary-button {
  display: block;
  width: min(620px, 100%);
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}

/* Buttons are keys: flat colour with a hard bottom edge that presses down. */
.primary-button {
  width: 100%;
  border: 0;
  border-radius: var(--r-card);
  padding: 17px 22px;
  color: var(--ink);
  background: var(--yellow);
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 6px 0 #c08600;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, opacity .14s ease;
}

.primary-button:hover:not(:disabled) { background: #ffe45c; }
.primary-button:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #c08600; }
.primary-button:disabled { opacity: .34; cursor: not-allowed; box-shadow: 0 6px 0 rgba(0,0,0,.25); }

.text-button {
  display: block;
  margin: 12px auto 0;
  border: 0;
  padding: 9px 14px;
  border-radius: var(--r-chip);
  color: rgba(255,255,255,.76);
  background: transparent;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.text-button:hover { color: white; background: rgba(255,255,255,.07); }

/*
 * The demo button is the one control on these screens a hand cannot reach: it
 * is a development affordance, so it is styled as a pointer-only chip rather
 * than as a peer of the hands-free actions.
 */
.dev-button {
  justify-self: center;
  margin: 12px auto 0;
  padding: 7px 12px;
  border: 1px dashed rgba(255,255,255,.28);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.5);
  background: transparent;
  cursor: pointer;
  font: 800 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .04em;
}

.dev-button i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.34); }
.dev-button small { color: rgba(255,255,255,.34); font-size: 9px; font-weight: 700; }
.dev-button, .dev-button small { white-space: nowrap; }
.dev-button:hover { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.45); }
.dev-button.is-active { color: var(--mint); border-color: rgba(79,240,191,.5); border-style: solid; }
.dev-button.is-active i { background: var(--mint); }
.draw-setup-panel .dev-button { color: rgba(44,26,92,.55); border-color: rgba(44,26,92,.3); }
.draw-setup-panel .dev-button i { background: rgba(44,26,92,.3); }
.draw-setup-panel .dev-button small { color: rgba(44,26,92,.42); }

.hud {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 28px;
  left: 28px;
  inset: 20px 28px auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.balloon-hud-status {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(440px, 42vw);
  min-height: 64px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.pressure-status,
.active-power,
.balloon-hearts {
  min-height: 52px;
  padding: 8px 12px;
  border: 2px solid rgba(255,255,255,.14);
  border-radius: var(--r-chip);
  color: white;
  background: rgba(27,17,73,.94);
  box-shadow: 4px 4px 0 var(--drop);
}

.pressure-status { display: grid; gap: 5px; }
.pressure-status > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pressure-status small,
.active-power small { color: rgba(255,255,255,.52); font-size: 8px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.pressure-status strong { color: var(--yellow); font-size: 12px; }
.pressure-meter { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.pressure-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--yellow)); box-shadow: 0 0 12px rgba(255,213,30,.6); transition: width .16s ease; }
.pressure-status.is-ready { animation: pressure-ready .65s ease-in-out infinite alternate; border-color: var(--yellow); }
@keyframes pressure-ready { to { transform: scale(1.035); box-shadow: 0 0 26px rgba(255,213,30,.45); } }

.balloon-hearts { display: flex; align-items: center; gap: 4px; color: var(--pink); font-size: 18px; }
.balloon-hearts i { font-style: normal; filter: drop-shadow(0 0 7px rgba(255,56,104,.65)); }
.active-power { display: flex; align-items: center; gap: 8px; }
.active-power > b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--power-color, var(--yellow)); font-size: 20px; }
.active-power > span { max-width: 115px; display: grid; }
.active-power strong { overflow: hidden; color: white; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.hud-pill {
  min-width: 142px;
  height: 64px;
  border-radius: var(--r-card);
  padding: 0 21px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1b1149;
  border: 2px solid rgba(255,255,255,.16);
  box-shadow: 6px 6px 0 var(--drop);
}

.hud-pill > span:last-child { display: grid; }
.hud-pill small { color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; font-weight: 950; }
.hud-pill strong { font-size: 30px; line-height: .95; }
.hud-icon { font-size: 30px; }
.score-icon { color: var(--yellow); }
.time-icon { color: var(--cyan); }

.game-exit-button {
  position: absolute;
  z-index: 6;
  top: auto;
  bottom: 18px;
  left: 30px;
  right: 30px;
  width: auto;
  min-height: 52px;
  padding: 10px 15px;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--r-chip);
  color: rgba(255,255,255,.86);
  background: #1b1149;
  box-shadow: 5px 5px 0 var(--drop);
  cursor: pointer;
  font: 900 13px/1 system-ui, sans-serif;
  letter-spacing: .02em;
}

.game-exit-button span { margin-right: 4px; font-size: 16px; }
.game-exit-button small { position: absolute; right: 18px; margin-left: 4px; color: rgba(255,255,255,.48); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }
.game-exit-button:hover { color: white; background: rgba(35,25,93,.76); }

.shape-status {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 20px;
  min-width: min(440px, 40vw);
  transform: translateX(-50%);
  padding: 12px 22px 13px;
  border-radius: var(--r-card);
  display: grid;
  justify-items: center;
  color: white;
  background: #150d3e;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 6px 6px 0 var(--drop);
}

.shape-status > small { color: rgba(255,255,255,.56); text-transform: uppercase; letter-spacing: .14em; font-size: 8px; font-weight: 950; }
.shape-status > strong { margin: 2px 0 7px; font-size: 22px; }
.shape-status > strong span:first-child { color: var(--yellow); }
.shape-status > span:last-child { margin-top: 5px; color: rgba(255,255,255,.66); font-size: 10px; font-weight: 800; }
.shape-status.is-matching > span:last-child { color: #7dffca; }
.match-meter { width: 100%; height: 8px; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.12); }
.match-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38d5ff, #77ffc0); box-shadow: 0 0 14px rgba(84,239,222,.7); transition: width .08s linear; }

.tracking-warning {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 166px;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 30px;
  background: rgba(255, 138, 33, .94);
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  width: max-content;
  max-width: calc(100% - 36px);
  text-align: center;
}
.tracking-warning button { padding: 9px 16px; border: 2px solid white; border-radius: 18px; background: #241b48; color: white; font: inherit; cursor: pointer; }
.tracking-warning button:focus-visible { outline: 4px solid #fff5a3; outline-offset: 3px; }
.tracking-warning small { flex-basis: 100%; font-size: 11px; }

.bystander-warning {
  position: absolute;
  z-index: 9;
  left: 18px;
  bottom: 18px;
  width: min(310px, calc(100vw - 36px));
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  color: #2c1a5c;
  text-align: left;
  background: #ffd84d;
  box-shadow: 0 4px 16px rgba(8,4,32,.3);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.bystander-warning.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.bystander-warning b { font-size: 12px; }
.bystander-warning span { font-size: 11px; line-height: 1.3; font-weight: 600; }

.calibration-help-prompt {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  min-width: min(620px, calc(100vw - 48px));
  padding: 13px 54px 13px 20px;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: white;
  background: rgba(24,15,75,.94);
  box-shadow: 7px 7px 0 var(--drop);
  cursor: pointer;
  font: 900 13px/1.25 system-ui, sans-serif;
}

.calibration-help-prompt i {
  --help-progress: 0deg;
  position: absolute;
  right: 9px;
  top: 50%;
  width: 31px;
  height: 31px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: conic-gradient(var(--mint) var(--help-progress), rgba(255,255,255,.14) 0);
}

.calibration-help-prompt i::after {
  content: "?";
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #24175f;
  font-weight: 1000;
}

.system-help {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 34px;
  background: rgba(7,4,35,.70);
  backdrop-filter: blur(14px);
}

.system-help-card {
  width: calc(100% - 54px);
  max-width: 720px;
  padding: 48px;
  width: min(720px, calc(100vw - 54px));
  padding: clamp(30px, 5vw, 54px);
  border: 3px solid rgba(255,255,255,.18);
  border-radius: var(--r-panel);
  color: white;
  text-align: center;
  background: #171044;
  box-shadow: 14px 14px 0 rgba(8,4,32,.62);
}

.system-help-card h2 { margin: 5px 0 12px; font-size: clamp(48px, 7vw, 76px); line-height: .95; }
.system-help-card > p:not(.eyebrow) { margin: 0 auto 22px; max-width: 570px; color: rgba(255,255,255,.72); font-size: 18px; font-weight: 750; }
.system-help-actions { width: min(520px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 11px; }
.system-help-actions .text-button { width: 100%; min-height: 52px; margin-top: 0; }
.help-action-button {
  min-height: 64px;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: var(--r-chip);
  color: white;
  background: #4c2ba5;
  cursor: pointer;
  font: 950 16px/1 system-ui, sans-serif;
  box-shadow: 5px 5px 0 var(--drop);
}
.system-help-progress { margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 900; }
.system-help-progress i {
  --recalibrate-progress: 0deg;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: conic-gradient(var(--yellow) var(--recalibrate-progress), rgba(255,255,255,.12) 0);
  box-shadow: inset 0 0 0 7px #171044;
}
.system-help-fallback { display: block; margin-top: 18px; color: rgba(255,255,255,.42); font-weight: 750; }
.system-help.is-recalibrating .system-help-actions { display: none; }
.system-help.is-recalibrating .system-help-progress i { animation: help-pulse .8s ease-in-out infinite alternate; background: var(--cyan); }
@keyframes help-pulse { to { transform: scale(1.18); box-shadow: 0 0 28px rgba(55,205,247,.7); } }

.results {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(4, 2, 28, .46);
}

.results-card {
  position: relative;
  z-index: 2;
  width: calc(100% - 80px);
  max-width: 850px;
  padding: 52px;
  width: min(850px, calc(100vw - 80px));
  border-radius: var(--r-panel);
  padding: clamp(34px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 24px;
}

.results h2 { margin: 0; font-size: clamp(50px, 7vw, 92px); line-height: .9; letter-spacing: -.055em; text-shadow: 5px 5px 0 rgba(8,4,32,.45); }
.results-actions { width: min(620px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 11px; }
.wide-navigation-button { width: 100%; min-height: 52px; margin-top: 0; border: 2px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
.result-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.result-metrics > div { padding: 20px; text-align: center; border-radius: var(--r-card); background: var(--well); border: 2px solid rgba(255,255,255,.09); }
.result-metrics small { display: block; text-transform: uppercase; font-weight: 950; letter-spacing: .15em; color: rgba(255,255,255,.52); font-size: 10px; }
.result-metrics strong { font-size: 52px; color: var(--yellow); }
.result-metrics .pop-result strong { color: var(--pink); }
.result-metrics .avoid-result strong { color: #55f0a0; }
.result-metrics .ouch-result strong { color: #ff725e; }
.result-metrics .combo-result strong { color: #42d7ff; }
.result-metrics .power-result strong { color: #d48cff; }
.shape-result-metrics { grid-template-columns: repeat(3, 1fr); }
.shape-result-metrics .pass-result strong { color: #61f0c0; }
.shape-result-metrics .streak-result strong { color: #42d7ff; }

.confetti-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: hidden; }
.confetti-layer i { position: absolute; top: -20px; width: 10px; height: 6px; border-radius: 2px; animation: confetti-fall var(--speed) linear infinite; animation-delay: var(--delay); }
@keyframes confetti-fall { to { transform: translate(var(--drift), calc(100vh + 60px)) rotate(720deg); } }

.diagnostics {
  position: absolute;
  z-index: 8;
  left: 18px;
  bottom: 18px;
  width: 290px;
  max-height: calc(100vh - 36px);
  border-radius: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  color: rgba(255,255,255,.9);
  background: rgba(4, 3, 24, .66);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
}

/* Air Draw reserves the helper-hand edge from top to bottom. Keep developer
   telemetry on the opposite edge so it cannot cover the ink pad or Exit. */
body.draw-active:not(.draw-rail-right) .diagnostics { left: auto; right: 18px; }
body.draw-active.draw-rail-right .diagnostics { left: 18px; right: auto; }

.diagnostics button {
  width: 100%;
  min-height: 46px;
  border: 0;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: 12px ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.diagnostics button b { text-transform: uppercase; letter-spacing: .09em; }
#debug-chevron { margin-left: auto; }
.diagnostics dl { margin: 0; padding: 0 13px 13px; font: 10px ui-monospace, "SFMono-Regular", Menlo, monospace; }
.diagnostics dl div { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.diagnostics dt { color: rgba(255,255,255,.5); }
.diagnostics dd { margin: 0; }

.debug-control {
  margin: 0 12px 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  font: 10px ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.debug-control.experimental-control {
  border-color: rgba(255,202,79,.22);
  background: rgba(255,190,54,.07);
}

.diagnostics .trace-button {
  width: calc(100% - 24px);
  min-height: 38px;
  margin: 0 12px 12px;
  border: 1px solid rgba(105,239,208,.24);
  border-radius: 10px;
  justify-content: center;
  color: #aefce8;
  background: rgba(45,208,170,.08);
  font-size: 10px;
  font-weight: 900;
}

.debug-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 18px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  transition: background .15s;
}

.switch-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transition: transform .15s;
}

.debug-control input:checked + .switch-track { background: #31d890; }
.debug-control input:checked + .switch-track i { transform: translateX(14px); }
.debug-control > span:last-child { display: grid; gap: 2px; }
.debug-control b { text-transform: uppercase; letter-spacing: .05em; }
.debug-control small { color: rgba(255,255,255,.48); }
.debug-control small i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 2px 0 4px; }
.debug-control .legend-left { background: var(--cyan); }
.debug-control .legend-right { background: var(--pink); }

.debug-select {
  margin: 0 12px 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font: 10px ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.debug-select > span { display: grid; gap: 2px; }
.debug-select b { text-transform: uppercase; letter-spacing: .05em; }
.debug-select small { color: rgba(255,255,255,.48); }
.debug-select select { max-width: 130px; color: white; background: #17103d; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; padding: 6px; }

/* Hands-free alternatives share one body-centered vertical lane. Full-width
   bars are reserved for deliberate escape controls that advertise that the
   player may hold anywhere on the bar. */
.motion-choice-stack { grid-template-columns: minmax(0, 1fr); }

.is-hidden { display: none !important; }

@media (max-width: 850px), (max-height: 580px) {
  .library-panel { width: calc(100vw - 38px); }
  .library-header { margin-bottom: 18px; }
  .library-lede { margin-top: 12px; font-size: 16px; }
  .game-card { min-height: 118px; border-radius: 22px; }
  .game-card-copy { padding: 22px 95px 21px 22px; }
  .library-footer { display: none; }
  .setup-panel { width: calc(100vw - 36px); min-height: auto; padding: 25px 25px 82px; grid-template-columns: 1fr; gap: 16px; border-radius: 28px; }
  .steps { display: none; }
  h1 { font-size: clamp(52px, 9vw, 78px); }
  .lede { margin: 18px 0 0; font-size: 18px; }
  .connection-card { padding: 18px; }
  .readiness { margin: 17px 0 13px; padding: 12px; gap: 8px; }
  .readiness-slot { min-height: 50px; }
  .readiness-track i { height: 16px; }
  .results-card { width: calc(100vw - 44px); padding: 30px; }
  .draw-setup-panel { width: calc(100vw - 36px); min-height: auto; max-height: calc(100vh - 28px); overflow-y: auto; padding: 25px 25px 82px; border-radius: 28px; }
  .draw-setup-header .lede { display: none; }
  .draw-mode-grid { margin: 20px 0; }
  .draw-mode-card { min-height: 135px; padding: 16px; }
  .draw-mode-card b { width: 44px; height: 44px; }
  .draw-setup-footer { grid-template-columns: 1fr; }
  .draw-start-actions { grid-column: auto; grid-template-columns: 1fr; gap: 8px; }
  .draw-toolbar { left: 19%; }
  body.draw-rail-right .draw-toolbar { left: 2.5%; right: 19%; }
  .tv-action-screen:not(.tv-action-screen-compact),
  .draw-setup-panel.tv-action-screen { width: calc(100vw - 36px); overflow: hidden; }
  .tv-action-grid { grid-template-columns: minmax(0, 620px); justify-content: center; }
  .tv-info-panel, .tv-action-screen .tv-action-header .lede { display: none; }
}

@media (max-width: 700px) {
  .setup-back-button small, .game-exit-button small { display: none; }
}

@media (max-width: 700px) {
  .library-panel { max-height: calc(100vh - 30px); overflow-y: auto; }
  .library-header { align-items: start; }
  .library-header .connection-chip { display: none; }
  .game-library { grid-template-columns: 1fr; }
  .setup-panel { grid-template-columns: 1fr; overflow-y: auto; max-height: calc(100vh - 30px); }
  .setup-copy { display: none; }
  .results-card { grid-template-columns: 1fr; gap: 25px; }
  .draw-setup-status { display: none; }
  .draw-mode-grid { grid-template-columns: 1fr; }
  .draw-setup-footer { grid-template-columns: 1fr; }
  .draw-start-actions { grid-column: auto; grid-template-columns: 1fr; }
  .draw-toolbar { left: 18%; right: 2%; padding-left: 12px; }
  body.draw-rail-right .draw-toolbar { left: 2%; right: 18%; padding-left: 12px; padding-right: 12px; }
  .draw-toolbar > div:first-child span { display: none; }
  .tv-action-screen:not(.tv-action-screen-compact),
  .draw-setup-panel.tv-action-screen { overflow: hidden; }
}

@media (max-height: 800px) {
  .library-header { margin-bottom: 14px; }
  .library-lede { margin-top: 10px; font-size: 15px; }
  .library-footer { display: none; }
  .game-card { min-height: 112px; }
  .game-card-copy { padding-top: 13px; padding-bottom: 13px; }
  .setup-panel, .draw-setup-panel { padding-top: 24px; }
  .setup-copy .lede, .steps, .connection-detail, .draw-setup-header .lede { display: none; }
  .setup-panel .connection-card { padding: 12px 16px; }
  .setup-panel .connection-heading { min-height: 32px; }
  .setup-panel .readiness { margin: 7px 0 9px; padding: 6px 8px; grid-template-columns: 166px 1fr; align-items: center; gap: 9px; }
  .setup-panel .readiness-label { display: none; }
  .setup-panel .readiness-slots { grid-column: 1; gap: 5px; }
  .setup-panel .readiness-slot { min-height: 40px; }
  .setup-panel .readiness-message { grid-column: 2; }
  .setup-panel .rule-strip, .setup-panel .pose-preview-strip, .setup-panel .dev-button { display: none; }
  .readiness { margin-top: 10px; margin-bottom: 10px; }
  .draw-mode-grid { margin-top: 12px; margin-bottom: 12px; }
  .draw-title { font-size: 54px; }
  .draw-setup-header .eyebrow { margin-bottom: 7px; }
  .draw-mode-grid { gap: 6px; margin-top: 8px; margin-bottom: 8px; }
  .draw-mode-card { min-height: 52px; padding: 6px 12px; grid-template-columns: 42px 1fr; }
  .draw-mode-card b { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
  .draw-mode-card strong { font-size: 16px; }
  .draw-mode-card span { display: none; }
  .draw-setup-footer { gap: 6px; }
  .draw-hand-choice { padding: 6px; gap: 4px; }
  .draw-hand-choice > small { padding-bottom: 0; font-size: 7px; }
  .draw-hand-choice button { min-height: 34px; padding: 6px 10px; }
  #draw-ready-card { margin: 0; padding: 8px 10px; gap: 4px; }
  #draw-ready-card .readiness-slots { display: none; }
  .draw-start-actions .dev-button { display: none; }
  .draw-setup-status, .results .connection-chip { display: none; }
  .results-card { max-height: calc(100vh - 28px); overflow-y: auto; padding: 26px; }
  .tv-action-screen:not(.tv-action-screen-compact),
  .draw-setup-panel.tv-action-screen { padding-top: 20px; }
  .tv-action-screen .tv-action-header .lede { display: none; }
  .tv-info-panel .steps { display: grid; }
  .tv-status-panel .readiness { grid-template-columns: minmax(0, 1fr); }
  .tv-status-panel .readiness-label { display: block; }
  .tv-status-panel .readiness-slots,
  .tv-status-panel .readiness-message { grid-column: auto; }
  .draw-setup-actions .draw-mode-grid { margin: 0; }
  #setup-panel .rule-strip { display: grid; }
}
body.reduced-effects .glass-panel,
body.reduced-effects .player-setup-card,
body.reduced-effects .diagnostics,
body.reduced-effects .system-help-card,
body.reduced-effects .system-help,
body.reduced-effects .menu-scrim {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep crisp raster output independent of decorative compositing costs. */
body.reduced-effects .menu-scrim { transition: none; }
body.reduced-effects .motion-nav-cursor > i { box-shadow: 0 4px 0 rgba(18,7,56,.36); }
body.reduced-effects [data-motion-select].is-motion-targeted { filter: none; }
body.reduced-effects .system-help.is-recalibrating .system-help-progress i,
body.reduced-effects .hosted-pairing-expiry.is-refreshing,
body.reduced-effects .pressure-status.is-ready { animation: none; }
body.reduced-effects .confetti-layer { display: none; }
body.reduced-effects .connection-demo { display: none; }
body.reduced-effects .connection-gate-card,
body.reduced-effects .player-setup-card,
body.reduced-effects .system-help-card,
body.reduced-effects .settings-panel,
body.reduced-effects .results-card,
body.reduced-effects #adventure-results {
  box-shadow: 0 6px 0 #0b172e88, inset 0 1px 0 #fff4d41a;
}
body.reduced-effects .game-card,
body.reduced-effects .game-card:hover { box-shadow: 0 4px 0 #0b17254d; transition: none; }
body.reduced-effects .painted-adventure-card img,
body.reduced-effects .balloon-card-art img,
body.reduced-effects .game-card .card-hand,
body.reduced-effects .game-card .draw-pencil-mini { filter: none; }

@media (max-height: 780px) {
  .connection-gate { padding: 16px; }
  .connection-gate-card { padding: 24px; }
  .connection-gate-card h1 { font-size: 44px; }
  .connection-gate-card > p:not(.connection-gate-eyebrow) { font-size: 18px; }
  .hosted-pairing { margin: 14px auto 4px; padding: 14px; }
  .hosted-pairing-qr-frame { width: 160px; height: 160px; }
  .hosted-pairing p { font-size: 16px; }
  .connection-new-code { margin-top: 14px; }
}

/* Let the gate own scrolling on phones, so a tall card stays reachable from
   its heading through New code without a second, clipped scroll surface. */
@media (max-width: 760px) {
  .connection-gate {
    padding: 16px 12px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    align-items: flex-start;
  }
  .connection-gate-card {
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 24px 18px;
  }
  .connection-gate-card .connection-gate-eyebrow { font-size: 14px; }
  .connection-gate-card h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.05; }
  .connection-gate-card > p:not(.connection-gate-eyebrow) { font-size: 16px; }
  .hosted-pairing { margin-top: 18px; padding: 12px; gap: 16px; }
  .hosted-pairing-options { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hosted-pairing-qr-option, .hosted-pairing-code-option { padding: 12px; }
  .hosted-pairing-qr-frame { width: 160px; height: 160px; }
  .hosted-pairing-qr-option b { font-size: 14px; }
  .hosted-pairing-code-option strong { font-size: clamp(32px, 10vw, 44px); letter-spacing: .08em; line-height: 1.1; }
  .hosted-pairing-expiry { min-width: 0; max-width: 100%; }
  .hosted-pairing p { font-size: 16px; }
}

/* Tracking-only workspace uses the full calibrated field; controls overlay it. */
.motion-lab { position: fixed; inset: 0; z-index: 20; pointer-events: none; color: #ecf4ff; }
.motion-lab header { display: flex; align-items: start; justify-content: space-between; padding: 24px 28px; gap: 16px; }
.motion-lab h1 { margin: 0 0 6px; font: 800 30px system-ui; }
.motion-lab p { margin: 0; font: 14px/1.5 system-ui; color: #bccddd; }
.motion-lab button, .motion-lab select, .motion-lab input { pointer-events: auto; }
.motion-lab button, .motion-lab select { color: #f4f8ff; background: #263a52; border: 1px solid #56708d; border-radius: 9px; padding: 12px; font: 600 14px system-ui; }
.motion-lab button { cursor: pointer; }
.lab-controls { position: absolute; left: 24px; top: 112px; width: 330px; max-height: calc(100vh - 190px); overflow-y: auto; padding: 18px; border-radius: 14px; background: rgba(16,27,42,.92); border: 1px solid #3a506b; pointer-events: auto; }
.lab-controls label { display: block; margin-bottom: 16px; font: 600 14px/1.5 system-ui; }
.lab-controls select, .lab-controls input[type=range] { display: block; width: 100%; margin-top: 8px; }
.lab-controls input:disabled { opacity: .3; }
.lab-controls output { float: right; color: #94d9ff; }
.lab-controls .lab-check { display: flex; align-items: center; gap: 9px; }
.lab-controls p { margin-top: 15px; font-size: 12px; }
.motion-lab footer { position: absolute; bottom: 18px; left: 24px; padding: 10px 14px; background: #101b2a; border-radius: 8px; font: 13px system-ui; }
.motion-lab-active .diagnostics, .motion-lab-active #diagnostics { display: none; }
@media(max-width: 650px) { .motion-lab header { padding: 16px; } .motion-lab h1 { font-size: 24px; } .motion-lab header p { max-width: 200px; font-size: 12px; } .lab-controls { left: 12px; width: 225px; top: 115px; padding: 12px; } .motion-lab footer { left: 12px; right: 12px; font-size: 11px; } }

.lab-header-actions { display: flex; gap: 10px; }

.lab-controls .lab-confidence { margin: 0 0 16px; color: #b7e5ff; font-variant-numeric: tabular-nums; }

.replay-controls { border-bottom: 1px solid #3a506b; margin-bottom: 16px; padding-bottom: 14px; }
.replay-controls summary { cursor: pointer; font: 700 15px system-ui; margin-bottom: 14px; }
.replay-controls input[type=file] { max-width: 100%; font: 12px system-ui; display: block; margin-top: 7px; }
.replay-buttons { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.replay-buttons label { margin: 0; flex: 1; }
.replay-controls p { margin: 10px 0 14px; }
.replay-controls button:disabled { opacity: .4; }

.calibration-report { border-bottom: 1px solid #3a506b; padding-bottom: 14px; margin-bottom: 16px; }
.calibration-report summary { cursor: pointer; font: 700 15px system-ui; }
.calibration-report button { margin-top: 10px; }
#lab-calibration-report { white-space: pre-line; }
/* Calibration uses TV-safe edges and one instruction; normal setup never scrolls. */
.player-setup-gate { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 5vh 5vw; background: #080d20; }
.player-setup-card { width: 100%; height: 90vh; min-height: 0; display: flex; flex-direction: column; padding: 3vh 3vw; border: 1px solid #586887; border-radius: 24px; background: #121d35; box-shadow: 0 20px 70px #0008; }
.player-setup-card .eyebrow { margin: 0 0 2vh; font-size: 1.8vw; line-height: 1.2; }
.player-setup-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: center; grid-gap: 4vw; }
.player-setup-picture { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center; border: 0; border-radius: 20px; background: #0b1428; padding: 2vh 1vw; }
.player-setup-picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.player-setup-picture img[hidden], .player-setup-picture.is-help-open > img { display: none; }
.player-setup-reach { display:none; width:100%; height:100%; }
.player-setup-picture[data-pose="reach"] .player-setup-reach { display:block; }
.player-setup-picture.is-help-open .player-setup-reach { display:none; }
.player-setup-reach .reach-body { fill:none; stroke:var(--sh-ink, #dce9ec); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.player-setup-reach [data-reach-region] { fill:var(--sh-muted, #9aadb8); opacity:.15; }
.player-setup-reach [data-reach-region] circle { opacity:.8; }
.player-setup-reach [data-reach-region].is-active { fill:var(--sh-teal, #3dd9b0); opacity:.35; }
.player-setup-reach [data-reach-hand] { fill:var(--sh-ink, #dce9ec); }
.player-setup-reach [data-reach-hand].is-active { fill:var(--sh-teal, #3dd9b0); }
.player-setup-hold { display: none; width: 80%; height: 80%; fill: none; stroke: #126660; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.player-setup-picture[data-pose="chest"] .player-setup-hold { display: block; }
.player-setup-picture.is-help-open .player-setup-hold { display: none; }
.player-setup-copy { min-width: 0; }
.player-setup-copy h1 { font-size: 4vw; line-height: 1.2; margin: 0 0 2.5vh; }
.player-setup-copy > p { font-size: 2.2vw; line-height: 1.3; margin: 0 0 2.5vh; }
.player-setup-progress { display: flex; align-items: center; margin: 3vh 0; }
.player-setup-progress[hidden] { display: none; }
.player-setup-progress strong { min-width: 3em; margin-left: 1.5vw; font-size: 2.2vw; font-variant-numeric: tabular-nums; }
.player-setup-copy .player-setup-progress-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.player-setup-track { flex: 1; height: 2.2vh; background: #33415b; border-radius: 20px; overflow: hidden; }
.player-setup-track i { display: block; height: 100%; width: 0; background: #55e6c1; }
.player-setup-copy .player-setup-hint { margin-bottom: 0; font-size: 1.8vw; line-height: 1.35; color: #c6d5e9; }
.player-setup-hint:empty { display: none; }
.player-setup-sequence { display: none; }
.player-setup-hero.is-ready-sequence { display: flex; align-items: center; justify-content: center; }
.player-setup-hero.is-ready-sequence > .player-setup-picture { display: none; }
.player-setup-hero.is-ready-sequence > .player-setup-copy { width: 100%; text-align: center; }
.is-ready-sequence .player-setup-copy h1 { font-size: 4vw; margin-bottom: 1vh; }
.is-ready-sequence .player-setup-copy > p { margin-bottom: 1.5vh; }
.is-ready-sequence .player-setup-sequence { display: flex; align-items: center; justify-content: center; color: #264a35; }
.player-setup-sequence > [data-ready-pose] { width: 26vw; padding: 1.5vh 2vw; border: 4px solid transparent; border-radius: 24px; background: #e5ecd6; opacity: .7; }
.player-setup-sequence > .is-current { border-color: #d4a244; background: #fffbea; opacity: 1; }
.player-setup-sequence svg { display: block; width: 100%; height: 23vh; fill: currentColor; }
.player-setup-sequence path { fill: none; stroke: currentColor; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.player-setup-sequence strong, .player-setup-sequence span { display: block; }
.player-setup-sequence strong { font-size: 2.3vw; margin: 1vh 0 .5vh; }
.player-setup-sequence span { font-size: 1.7vw; }
.player-setup-arrow { font-size: 4vw; margin: 0 3vw; }
.is-ready-sequence .player-setup-progress { max-width: 68vw; margin: 1.5vh auto; }
.is-ready-sequence .player-setup-copy .player-setup-hint { margin-top: 1vh; }
.player-setup-actions { display: flex; align-items: center; flex-wrap: wrap; margin-top: 3vh; }
.player-setup-actions button { margin: 0 1.5vw 0 0; min-height: 7vh; font-size: 1.9vw; padding: 1.2vh 1.8vw; }
.player-setup-actions button:last-child { margin-right: 0; }
.player-setup-actions #player-setup-details { margin-left: auto; }
.player-setup-help { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.player-setup-help h2 { font-size: 2vw; line-height: 1.2; margin: 0 0 1.3vh; }
.player-setup-help canvas { flex: 1; min-height: 0; width: 100%; margin-bottom: 1.3vh; object-fit: contain; }
.player-setup-help button { flex: none; margin: 0 0 1.3vh; min-height: 7vh; padding: 1vh .8vw; font-size: 1.7vw; }
.player-setup-help button:last-child { margin-bottom: 0; }
.player-setup-status[hidden] { display: none; }
.player-setup-help-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.player-setup-help-actions button { min-height: 52px; font-size: 19px; padding: 12px 22px; }
@media (max-aspect-ratio: 4/3) {
  .player-setup-hero { grid-template-columns: 30% minmax(0, 1fr); grid-gap: 3vw; }
  .player-setup-copy h1 { font-size: 4.5vw; }
  .player-setup-copy > p { font-size: 2.6vw; }
  .player-setup-copy .player-setup-hint, .player-setup-actions button { font-size: 2.2vw; }
}
@media (max-width: 680px) {
  .player-setup-gate { padding: 4vh 5vw; }
  .player-setup-card { height: 92vh; padding: 3vh 4vw; }
  .player-setup-card .eyebrow { font-size: 18px; }
  .player-setup-hero { display: flex; flex-direction: column; justify-content: center; gap: 2vh; }
  .player-setup-picture { width: 100%; height: 30vh; flex: none; padding: 1vh; }
  .player-setup-picture.is-help-open { height: 36vh; }
  .player-setup-copy h1 { font-size: 30px; }
  .player-setup-copy > p { font-size: 20px; }
  .player-setup-copy .player-setup-hint { font-size: 17px; }
  .player-setup-progress strong, .player-setup-actions button { font-size: 18px; }
  .player-setup-help { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; }
  .player-setup-help h2 { width: 100%; font-size: 20px; }
  .player-setup-help canvas { width: 100%; height: 14vh; flex-basis: 100%; }
  .player-setup-help button { min-height: 44px; font-size: 16px; padding: 8px; }
}

/* Adventure Run: storybook-medieval chrome — midnight iron, gilded trim, crimson heraldry. */
.adventure-card { background: linear-gradient(120deg,#231b44,#5b2147 62%,#a8452f); }
.adventure-card-art { overflow: hidden; }
.adventure-card-art svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.adventure-panel {
  --adv-gold: #e8b852; --adv-gold-deep: #9a6b22; --adv-ink: #120f22; --adv-parchment: #f6ead0;
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%,-50%);
  color: var(--adv-parchment);
  background: radial-gradient(120% 80% at 50% 0%, #2f2752 0%, #1b1734 55%, #120f22 100%);
  border: 2px solid var(--adv-gold); border-radius: 22px;
  box-shadow: 0 0 0 5px var(--adv-ink), 0 0 0 6px #6e5a2e, 12px 16px 0 6px rgba(8,6,18,.82), 0 30px 80px rgba(0,0,0,.5);
}
.adventure-panel .eyebrow { color: var(--adv-gold); letter-spacing: .2em; }
.adventure-panel h1 { margin: 0; font-family: "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 3px 0 var(--adv-ink), 0 0 30px rgba(232,184,82,.18); }
.adventure-panel h1 em { color: #f2c35b; font-style: italic; }
.adventure-panel .lede { color: #d9cfe6; }
.adventure-panel .tv-action-header .lede { display: block; }
.adventure-panel .tv-info-panel { background: rgba(10,8,22,.5); border-color: #4e4470; }
.adventure-panel .tv-side-title { color: #e9dcbf; font-family: "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; }
.adventure-instructions dl { margin: 15px 0; }
.adventure-instructions dt { margin-top: 9px; color: var(--adv-gold); font-weight: 800; font-size: 14px; }
.adventure-instructions dd { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: #d6cde3; }
.adventure-instructions p,.adventure-camera-note { margin: 16px 0 0; color: #b4a9c8; font-size: 12px; line-height: 1.5; }
.adventure-panel .primary-button { background: linear-gradient(#ffe39a,#e7b04a); color: #2a1a0e; box-shadow: 0 6px 0 var(--adv-gold-deep), 0 10px 24px rgba(232,184,82,.25); }
.adventure-panel .primary-button:hover:not(:disabled) { background: linear-gradient(#fff0bf,#f0c063); }
.adventure-secondary { padding: 14px 20px; min-height: 48px; color: #efe6d4; background: #2a2444; border: 1px solid #8d7a4a; border-radius: 12px; font-weight: 750; cursor: pointer; }
.adventure-secondary:hover { background: #3a3260; }
.adventure-secondary small { display: block; margin-top: 3px; font-size: 11px; color: #c9bfd9; font-weight: 500; }
.adventure-key-legend { text-align: center; font-size: 12px; line-height: 1.5; color: #b9aecd; margin: 0; }
#adventure-joint-track { display: flex; gap: 3px; height: 12px; }
#adventure-joint-track i { flex: 1; background: #3c3560; border-radius: 2px; }
#adventure-joint-track i.is-lit { background: var(--adv-gold); }
.adventure-panel .readiness { background: #231d3e; }
.adventure-panel .readiness-message { color: #ddd3ea; }
.adventure-panel .setup-back-button { color: #ece3d2; background: #1b1734; }

.adventure-hud { position: absolute; z-index: 3; inset: 0; pointer-events: none; color: #fff3d6; }
.adventure-topline { position: absolute; left: 4%; right: 4%; top: 4%; display: flex; justify-content: space-between; align-items: start; text-shadow: 0 2px 0 rgba(10,6,20,.6), 0 2px 12px rgba(10,6,20,.7); }
.adventure-topline small { display: block; font-size: 10px; font-weight: 850; letter-spacing: .22em; margin-bottom: 6px; color: #f2d48a; }
.adventure-topline strong { font-family: "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; font-size: clamp(20px,2.6vw,34px); }
.adventure-score { text-align: right; }
.adventure-score strong { display: inline-flex; align-items: center; gap: .3em; font-family: inherit; font-size: clamp(24px,3.5vw,44px); font-variant-numeric: tabular-nums; }
.adventure-score strong::before { content: ""; width: .62em; height: .62em; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff3b8,#f2c14e 55%,#a8741d); box-shadow: 0 0 0 2px #7a4f12, 0 0 14px rgba(255,210,100,.55); }
.adventure-score small { margin-top: 5px; }
.adventure-route { position: absolute; top: 14%; left: 4%; right: 4%; height: 6px; border-radius: 3px; background: linear-gradient(90deg,transparent calc(33.3% - 1px),rgba(242,212,138,.7) calc(33.3% - 1px),rgba(242,212,138,.7) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent calc(66.6% - 1px),rgba(242,212,138,.7) calc(66.6% - 1px),rgba(242,212,138,.7) calc(66.6% + 1px),transparent calc(66.6% + 1px)), rgba(12,8,24,.55); box-shadow: inset 0 0 0 1px rgba(242,212,138,.35); }
.adventure-route i { position: relative; display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg,#c8892a,#ffe39a); box-shadow: 0 0 10px rgba(255,214,120,.6); }
.adventure-route i::after { content: ""; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); background: #ffe9a8; border: 2px solid #7a4f12; box-shadow: 0 0 12px rgba(255,220,130,.9); }
.adventure-cue {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%;
  display: flex; gap: 14px; align-items: center; padding: 12px 22px 12px 14px; border-radius: 14px;
  background: linear-gradient(#2c2548,#1a1530); border: 2px solid #d8ac52;
  box-shadow: inset 0 0 0 3px #1a1530, inset 0 0 0 4px rgba(216,172,82,.35), 0 6px 0 rgba(10,8,20,.85), 0 14px 30px rgba(0,0,0,.4);
}
.adventure-cue b {
  display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 52px; padding-bottom: 6px; box-sizing: border-box;
  color: #3a1208; background: linear-gradient(#ffe7a3,#e2a83e); font-size: 28px;
  -webkit-clip-path: polygon(0 0,100% 0,100% 58%,50% 100%,0 58%); clip-path: polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);
}
.adventure-cue strong { display: block; color: #ffe2a3; font-family: "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; font-size: clamp(20px,2.5vw,30px); letter-spacing: .05em; }
.adventure-cue span { display: block; font-size: 13px; margin-top: 3px; color: #ddd3ea; }
.adventure-cue[hidden] { display: none; }
.adventure-defeat-controls { position:absolute; top:34%; left:50%; transform:translateX(-50%); display:flex; flex-wrap:wrap; justify-content:center; gap:18px; width:max-content; max-width:90%; pointer-events:auto; }
.adventure-defeat-controls[hidden] { display:none; }
.adventure-defeat-controls button { width:auto; min-height:56px; padding:12px 22px; font-size:20px; white-space:nowrap; }
.adventure-defeat-controls .primary-button { color:#2a1a0e; background:#ffe39a; box-shadow:0 5px 0 #9a6b22; }
.adventure-defeat-controls .is-remote-selected { outline:5px solid #fff0a3; outline-offset:5px; }
.adventure-defeat-status { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
/* Approach meter: fills as the hazard nears and turns into a pulsing NOW. */
.adventure-cue-meter { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 4px; border-radius: 2px; background: rgba(216,172,82,.18); overflow: hidden; }
.adventure-cue-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#8a6420,#e8b852); transition: width .1s linear; }
.adventure-cue.is-now { border-color: #fff0b0; animation: adventure-now .36s ease-in-out infinite alternate; box-shadow: inset 0 0 0 3px #1a1530, inset 0 0 0 4px rgba(255,236,170,.6), 0 6px 0 rgba(10,8,20,.85), 0 0 34px rgba(255,214,110,.75); }
.adventure-cue.is-now b { background: linear-gradient(#fffbe0,#ffd25a); }
.adventure-cue.is-now strong { color: #fff6cf; }
.adventure-cue.is-now .adventure-cue-meter i { background: linear-gradient(90deg,#ffe39a,#fffbe0); }
@keyframes adventure-now { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.06); } }
.adventure-feedback { position: absolute; bottom: 21%; left: 0; right: 0; text-align: center; font-family: "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; font-weight: 800; font-size: clamp(22px,3vw,36px); letter-spacing: .04em; color: #ffe9a8; text-shadow: 0 3px 0 #3a1a0a, 0 0 18px rgba(255,190,80,.6); }
.adventure-input-source { position: absolute; bottom: 11%; left: 4%; font-size: 12px; padding: 7px 10px; border-radius: 8px; color: #efe6d4; background: rgba(18,15,34,.82); border: 1px solid rgba(216,172,82,.5); }
.adventure-pause { position: absolute; bottom: 11%; right: 4%; min-height: 36px; padding: 7px 12px; border: 1px solid #d8ac52; border-radius: 8px; background: rgba(18,15,34,.86); color: #f2e6cc; pointer-events: auto; cursor: pointer; }
body.adventure-active .game-exit-button { background: #1b1734; color: #efe6d4; border-color: #8d7a4a; }
body.adventure-active .diagnostics { opacity: .65; }
.adventure-result-stats { display: flex; justify-content: center; gap: 42px; margin: 8px 0 18px; }
.adventure-result-stats div { text-align: center; }
.adventure-result-stats strong { display: block; color: #f2c35b; font-family: "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; font-size: clamp(24px,3.5vw,42px); font-variant-numeric: tabular-nums; }
.adventure-result-stats small { color: #cfc4df; }
.adventure-results.tv-action-screen { padding-bottom: 30px; }
@media (max-height: 650px) {
  .adventure-panel.tv-action-screen { gap: 10px; padding-top: 16px; padding-bottom: 68px; }
  .adventure-panel .tv-action-header h1 { font-size: 44px; }
  .adventure-panel .tv-action-header .lede { display: block; font-size: 14px; margin-top: 6px; }
  .adventure-instructions dt { margin-top: 4px; }
  .adventure-instructions p,.adventure-camera-note { display: none; }
  .adventure-panel .tv-info-panel { padding: 12px; }
  .adventure-setup-actions { gap: 10px; }
  .adventure-results.tv-action-screen { padding-bottom: 20px; }
}
@media (max-width: 760px) {
  .adventure-panel.tv-action-screen { width: calc(100vw - 24px); padding: 20px 18px 76px; gap: 14px; }
  .adventure-panel .tv-action-header h1 { font-size: 43px; }
  .adventure-panel .tv-action-grid { grid-template-columns: minmax(0,1fr); }
  .adventure-panel .tv-info-panel { display: none; }
  .adventure-panel .tv-action-header .lede { display: block; font-size: 15px; }
  .adventure-cue { padding: 10px 14px 10px 10px; gap: 10px; }
  .adventure-cue span { font-size: 11px; }
  .adventure-cue b { width: 34px; height: 40px; font-size: 21px; }
  .adventure-topline small { font-size: 8px; }
  body.adventure-active .diagnostics { top: 30%; bottom: auto; left: auto; right: 12px; width: 230px; max-height: 50vh; }
  .adventure-input-source { left: 3%; max-width: 68%; font-size: 10px; }
  .adventure-result-stats { gap: 20px; }
  .adventure-results.tv-action-screen { padding-bottom: 24px; }
}

.adventure-hearts { align-self: center; color: #ff94a6; font-weight: 850; font-size: clamp(14px,2.4vw,28px); letter-spacing: .06em; text-align: center; }
.adventure-boss-status { position: absolute; top: 16%; left: 4%; padding: 6px 16px; border: 1px solid #d8ac52; border-radius: 8px; background: rgba(18,15,34,.92); color: #ffd5bf; font-size: clamp(12px,1.5vw,18px); font-weight: 750; white-space: nowrap; }
.adventure-boss-status[hidden] { display: none; }
.adventure-move-guide { position: absolute; right: 3%; top: 34%; width: clamp(112px,20vh,160px); height: clamp(144px,29vh,208px); padding-top: 12px; box-sizing: border-box; text-align: center; font: 800 10px system-ui,sans-serif; letter-spacing: .12em; color: #f5dfaa; }
.adventure-move-guide[hidden] { display: none; }
.adventure-guide-direction { position: absolute; bottom: 9px; left: 0; right: 0; font-size: 21px; letter-spacing: .03em; color: #ffe39a; }
.adventure-boss-reward { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 82%; padding: 17px 26px; box-sizing: border-box; text-align: center; color: #fff4d3; background: linear-gradient(#302640f2,#171326f5); border: 2px solid #f0c76e; border-radius: 15px; box-shadow: 0 5px 0 #171022,0 0 30px #e8b85244; animation: adventure-reward-arrive .28s ease-out both; }
.adventure-boss-reward[hidden] { display: none; }
.adventure-reward-kicker { display: block; font: 800 10px system-ui,sans-serif; letter-spacing: .22em; color: #e4c988; }
.adventure-reward-title { display: block; margin-top: 6px; font: 700 clamp(18px,2.5vw,28px) Georgia,serif; }
.adventure-reward-total { display: block; margin: 7px 0; font: 850 clamp(30px,4vw,46px) system-ui,sans-serif; color: #ffe08a; text-shadow: 0 2px 0 #725026; }
.adventure-reward-breakdown { display: block; font: 500 clamp(11px,1.2vw,14px)/1.4 system-ui,sans-serif; color: #e4d7b9; }
@keyframes adventure-reward-arrive { from { transform: translate(-50%,12px) scale(.96); } to { transform: translate(-50%,0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .adventure-boss-reward { animation: none; } }
.adventure-cue.is-boss { top: auto; bottom: 3%; max-width: 78%; padding-top: 8px; padding-bottom: 10px; }
.adventure-cue.is-boss strong { font-size: clamp(16px,2vw,25px); }
.adventure-cue.is-boss b { width: 36px; height: 40px; font-size: 24px; }
.adventure-cue.is-boss span { font-size: clamp(14px,1.3vw,19px); line-height: 1.35; }
.adventure-cue[data-phase="opening"],.adventure-cue[data-phase="mount"] { border-color: #fff5c5; background: linear-gradient(#334335,#15281e); }
.adventure-cue[data-phase="opening"] strong,.adventure-cue[data-phase="mount"] strong { color: #fff8cd; }
.adventure-cue[data-phase="opening"] .adventure-cue-meter i,.adventure-cue[data-phase="mount"] .adventure-cue-meter i { background: #a7ecc1; }
.adventure-cue[data-phase="windup"],.adventure-cue[data-phase="impact"],.adventure-cue[data-phase="block"] { border-color: #f2a06e; }
.adventure-cue[data-phase="hit"] { border-color: #a7ecc1; }
body.prepared-adventure-active .adventure-cue.is-now { animation: none; }
.adventure-time { position: absolute; bottom: 5%; right: 4%; padding: 5px 9px; border-radius: 7px; background: rgba(18,15,34,.72); color: #e5d8ba; font-variant-numeric: tabular-nums; font-size: 14px; }
.adventure-result-stats { flex-wrap: wrap; row-gap: 12px; }
.adventure-heart-icon { display: inline-block; vertical-align: middle; width: clamp(24px,3vw,40px); height: clamp(24px,3vw,40px); object-fit: contain; margin-left: 6px; filter: drop-shadow(0 2px 2px #190d20); }
.adventure-heart-icon.is-empty { filter: grayscale(1) brightness(.6); opacity: .45; }
.adventure-topline:has(.adventure-hearts[aria-label^="Learning"]) .adventure-hearts { font-size: clamp(12px,1.4vw,17px); color: #ffe3a0; }
.adventure-route { background: repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(242,212,138,.7) calc(25% - 1px),rgba(242,212,138,.7) 25%),rgba(12,8,24,.55); }
@media (max-width: 760px) { .adventure-hearts { position: absolute; top: 50px; left: 0; right: 0; font-size: 19px; } }

/* The low-TV path keeps gold borders, NOW colors, meters and health opacity;
   decoration must not add blur passes or an endless HUD animation. */
body[data-render-quality="low"] .adventure-panel {
  box-shadow: 0 0 0 5px var(--adv-ink), 0 0 0 6px #6e5a2e, 8px 10px 0 rgba(8,6,18,.82);
}
body[data-render-quality="low"] .adventure-panel h1,
body[data-render-quality="low"] .adventure-topline { text-shadow: 0 2px 0 rgba(10,6,20,.8); }
body[data-render-quality="low"] .adventure-panel .primary-button { box-shadow: 0 6px 0 var(--adv-gold-deep); }
body[data-render-quality="low"] .adventure-score strong::before { box-shadow: 0 0 0 2px #7a4f12; }
body[data-render-quality="low"] .adventure-route i,
body[data-render-quality="low"] .adventure-route i::after { box-shadow: none; }
body[data-render-quality="low"] .adventure-cue,
body[data-render-quality="low"] .adventure-cue.is-now {
  animation: none;
  box-shadow: inset 0 0 0 3px #1a1530, 0 6px 0 rgba(10,8,20,.85);
}
body[data-render-quality="low"] .adventure-cue-meter i { transition: none; }
body[data-render-quality="low"] .adventure-feedback { text-shadow: 0 2px 0 #3a1a0a; }
body[data-render-quality="low"] .adventure-heart-icon { filter: none; }

.balloon-card {
  background: linear-gradient(115deg, #374069, #643f70 62%, #a65d65);
}
.balloon-card-art { background: url("/movie-game/ui-cc3ad9e719ddbd654c72f54e.jpg") center 60% / cover; }
.balloon-card-art img { position: absolute; width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 5px 5px #211e4e66); }
.balloon-card-coral { left: 3%; top: 2%; transform: rotate(-13deg); }
.balloon-card-star { left: 35%; top: -14%; transform: rotate(9deg); }
.balloon-card-sky { right: 0; top: 15%; transform: rotate(13deg); }
body.balloon-active .ambient-dots { display: none; }
body.balloon-active .menu-scrim.is-active { background: rgba(12,17,42,.28); backdrop-filter: none; -webkit-backdrop-filter: none; }

#setup-panel {
  background: linear-gradient(135deg, rgba(28,36,67,.96), rgba(43,30,63,.96));
  border-color: #e6c08966;
  box-shadow: 0 20px 70px #11172e88, inset 0 1px 0 #fff0ca22;
  border-radius: 24px;
}
#setup-panel .eyebrow { color: #e8c7a0; letter-spacing: .22em; }
#setup-panel h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 800; letter-spacing: -.065em; color: #fff4dd; text-shadow: 0 3px 0 #131a3e; }
#setup-panel h1 > span { color: #ffdfa0; }
#setup-panel .tv-action-header .lede { display: block; margin-top: 8px; color: #decbd0; font-size: clamp(13px, 1.4vw, 18px); }
#setup-panel .tv-info-panel { background: #181f3caa; border: 1px solid #edc89533; box-shadow: none; border-radius: 15px; }
#setup-panel .tv-side-title { color: #f3d5a8; letter-spacing: .12em; }
#setup-panel .steps { margin: 0; gap: 13px; }
#setup-panel .steps li { color: #e9dfdc; font-size: 12px; }
#setup-panel .steps b { background: #f3d5a8; color: #282a47; }
#setup-panel .balloon-how-to { display: flex; flex-direction: column; gap: 14px; }
.balloon-postcard { height: 90px; flex-shrink: 0; position: relative; border-radius: 10px; overflow: hidden; background: url("/movie-game/ui-cc3ad9e719ddbd654c72f54e.jpg") center 65% / cover; }
.balloon-postcard img { position: absolute; width: 110px; height: 110px; top: 0; object-fit: contain; }
.balloon-postcard img:nth-child(1) { left: -8px; transform: rotate(-13deg); }
.balloon-postcard img:nth-child(2) { left: calc(50% - 55px); top: -12px; }
.balloon-postcard img:nth-child(3) { right: -8px; transform: rotate(13deg); }
#setup-panel .rule-strip { margin-top: auto; gap: 7px; }
#setup-panel .rule-strip > span { background: #242b4966; border-color: #f3d5a82b; }
#setup-panel .rule-strip b { color: #ffe0a1; }
#setup-panel .balloon-mode-card { min-height: 70px; background: #eef1ff0b; border: 1px solid #dbc9a840; border-radius: 13px; padding: 14px 17px; }
#setup-panel .balloon-mode-card strong { font-size: 19px; letter-spacing: -.025em; }
#setup-panel .balloon-mode-card small { font-size: 10px; letter-spacing: .045em; }
#setup-panel .balloon-mode-card > b { background: #ddc3a51a; color: #f3d5a8; width: 42px; height: 42px; flex-basis: 42px; border: 1px solid #f3d5a833; font-size: 23px; }
#setup-panel .balloon-mode-card.is-selected { background: linear-gradient(105deg, #f8d89e, #ffedc6); color: #2c2944; border-color: #ffefce; box-shadow: 0 4px 0 #b68a54; }
#setup-panel .balloon-mode-card.is-selected > b { color: #47354b; background: #fff7df88; border-color: #ac7c5144; }
#setup-panel .primary-button { background: #86e1cf; color: #182c3c; box-shadow: 0 6px 0 #3b8c83; border: 1px solid #b2ffeb; border-radius: 13px; font-size: 19px; }
#setup-panel .primary-button:disabled { background: #506475; color: #c1cbd2; border-color: #748395; box-shadow: 0 6px 0 #303c54; }
#setup-panel .dev-button { width: 100%; min-height: 38px; justify-content: center; }
#setup-panel .setup-back-button { background: #ece5d810; border: 1px solid #e5c49b40; border-radius: 12px; }
#setup-panel .readiness { background: #77d8c80a; border-color: #77d8c833; }
#setup-panel .readiness.is-ready { border-color: #77d8c877; }
#setup-panel .readiness-glove { width: 32px; height: 32px; object-fit: contain; }
#setup-panel .readiness-slot.cyan.is-ready { background: #84d7cc; color: #20374a; }
#setup-panel .readiness-slot.pink.is-ready { background: #e5a6aa; color: #20374a; }
.balloon-power-tip { display: flex; align-items: center; gap: 8px; margin: 15px 0 0; padding-top: 12px; border-top: 1px solid #edc89533; color: #e4d8cc; font-size: 11px; line-height: 1.45; }
.balloon-power-tip img { width: 48px; height: 55px; object-fit: contain; flex-shrink: 0; }
.balloon-power-tip strong { display: block; color: #ffe1a6; font-size: 12px; margin-bottom: 3px; }

.balloon-hud { inset: 22px 32px auto; color: #fff4dd; }
.balloon-hud .hud-pill { background: #172139e8; border: 1px solid #e5c49b55; border-radius: 14px; box-shadow: 0 5px 18px #131b3655; min-width: 145px; height: 66px; }
.balloon-hud .hud-pill strong { font-family: Georgia, serif; font-size: 34px; font-variant-numeric: tabular-nums; }
.balloon-hud .score-icon, .balloon-hud .time-icon { color: #ffdda0; }
.balloon-hud .balloon-hud-status { width: min(500px, 46vw); grid-template-columns: auto minmax(140px, 1fr) auto; gap: 8px; }
.balloon-chapter { grid-column: 1 / -1; display: grid; justify-items: center; gap: 3px; text-shadow: 0 2px 8px #101a3e; }
.balloon-chapter > small { color: #f8ddb5; font-size: 9px; letter-spacing: .22em; font-weight: 750; text-transform: uppercase; }
.balloon-chapter > strong { font-family: Georgia, serif; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; }
.balloon-chapter > span { color: #e2d9e5; font-size: 11px; }
.balloon-hud .pressure-status, .balloon-hud .active-power, .balloon-hud .balloon-hearts { min-height: 37px; padding: 6px 10px; background: #172139e8; border: 1px solid #e5c49b44; border-radius: 9px; box-shadow: none; }
.balloon-hud .pressure-status { grid-column: 2; min-width: 145px; }
.balloon-hud .pressure-status small { font-size: 8px; }
.balloon-hud .pressure-status strong { color: #ffdfa0; font-size: 11px; }
.balloon-hud .pressure-meter { height: 4px; }
.balloon-hud .pressure-meter i { background: linear-gradient(90deg, #8fe5dc, #ffe2a4); box-shadow: none; }
.balloon-hud .pressure-status.is-ready { animation: none; border-color: #ffe2a4; }
.balloon-hud .active-power > b { width: 24px; height: 24px; font-size: 16px; }
.balloon-hud .active-power small { display: none; }
.balloon-hud .active-power > span { max-width: 175px; }
.balloon-hud .active-power[data-power="giant"] > b { color: transparent; background: url("/movie-game/ui-62e6dc9b0a29016c0bac56d6.png") center / contain no-repeat; width: 32px; height: 32px; }
.balloon-route { position: absolute; top: 114px; left: 24%; right: 24%; height: 3px; background: #f0d4af22; border-radius: 8px; overflow: hidden; }
.balloon-route > i { display: block; height: 100%; width: 0; background: #ebc48f; }
.balloon-combo { position: absolute; top: 78px; left: 0; display: flex; align-items: center; gap: 10px; padding: 7px 13px; background: #172139c9; border-radius: 11px; border: 1px solid #e5c49b33; }
.balloon-combo > b { font-size: 25px; font-family: Georgia, serif; color: #ffdfa0; }
.balloon-combo strong { font-size: 11px; font-weight: 700; }
.balloon-combo-meter { width: 80px; height: 3px; margin-top: 5px; border-radius: 5px; overflow: hidden; background: #ffffff20; }
.balloon-combo-meter i { display: block; height: 100%; width: 0; background: #89e5d0; }
.balloon-hud.is-fever .balloon-chapter > strong { color: #ffe3a4; }
.balloon-hud.is-fever .balloon-combo { border-color: #ffe3a4aa; background: #504039ee; }
.balloon-input-source { position: fixed; bottom: 70px; left: 32px; color: #ffe8c3aa; font-size: 9px; letter-spacing: .15em; text-shadow: 0 1px 4px #171b37; }
.balloon-hud .pressure-status.is-precision { border-color: #9bffe388; min-width: 190px; }
.balloon-hud .pressure-status.is-precision .pressure-meter { display: none; }
body.balloon-precision #setup-panel .balloon-power-tip,
body.balloon-precision #setup-panel .steps:not(.balloon-precision-instructions),
body.balloon-precision #setup-panel .rule-strip > span:first-child { display: none; }
.balloon-precision-instructions { display: none; }
body.balloon-precision #setup-panel .balloon-precision-instructions { display: grid; }
body.balloon-precision .balloon-chapter > strong { color: #b4ffe8; }
body.balloon-active .game-exit-button { color: #f9e6c8; background: #172139db; border: 1px solid #e5c49b44; border-radius: 10px; box-shadow: none; }
body.balloon-active .diagnostics { opacity: .6; }
#results-panel .results-card { background: linear-gradient(130deg, #25324bf5, #422f52f5); border-color: #e5c49b77; box-shadow: 0 20px 80px #111a3a88; }
#results-panel h2 { font-family: Georgia, serif; color: #ffe1ac; letter-spacing: -.055em; }
#results-panel .eyebrow { color: #ffe1ac; }
#results-panel .result-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#results-panel .score-result { grid-column: 1 / -1; }
#results-panel .gold-result strong, #results-panel .fever-result strong { color: #ffe1ac; }
.balloon-result-source { color: #dfced3; font-size: 10px; text-align: center; margin: 0; }
@media (max-height: 650px) {
  .balloon-postcard { height: 58px; }
  #setup-panel .balloon-mode-card { min-height: 59px; padding: 9px 14px; }
  #setup-panel .balloon-how-to { gap: 10px; }
  .balloon-chapter > span { display: none; }
  .balloon-route { top: 100px; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  #setup-panel .balloon-setup-layout { grid-template-columns: minmax(140px, 1fr) minmax(320px, 2.25fr) minmax(150px, 1fr); gap: 12px; }
  #setup-panel .tv-info-panel { padding: 14px; min-width: 0; }
  #setup-panel .connection-heading strong { font-size: 13px; overflow-wrap: anywhere; }
  #setup-panel .balloon-tracker-status .readiness { padding: 7px; }
  #setup-panel .readiness-message { font-size: 10px; }
  #setup-panel .steps li { font-size: 11px; }
  #setup-panel .balloon-mode-card small { font-size: 9px; }
}
@media (max-width: 850px) {
  #setup-panel .balloon-mode-card strong { font-size: 16px; }
  #setup-panel .balloon-mode-card small { font-size: 9px; }
  .balloon-hud { inset: 14px 16px auto; }
  .balloon-hud .hud-pill { min-width: 98px; padding: 0 10px; gap: 7px; height: 57px; }
  .balloon-hud .hud-pill strong { font-size: 26px; }
  .balloon-hud .hud-icon { font-size: 22px; }
  .balloon-chapter > small, .balloon-chapter > span { display: none; }
  .balloon-hud .balloon-hud-status { width: 42vw; grid-template-columns: auto 1fr; }
  .balloon-hud .active-power { grid-column: 1 / -1; justify-content: center; }
  .balloon-route { top: 107px; }
  .balloon-combo { top: 67px; padding: 5px 9px; }
  .balloon-input-source { left: 16px; }
}
@media (max-width: 560px) {
  .balloon-chapter > strong { font-size: 18px; }
  .balloon-hud .hud-pill { min-width: 75px; }
  .balloon-hud .hud-icon { display: none; }
  .balloon-hud .pressure-status { min-width: 0; grid-column: 1 / -1; }
  .balloon-hud .balloon-hearts { grid-column: 1 / -1; justify-content: center; }
  .balloon-combo { gap: 6px; }
  .balloon-combo-meter { width: 48px; }
  #results-panel .result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  #setup-panel .balloon-mode-card, .balloon-hud .pressure-meter i { transition: none; }
}

/* Family controls share the painted TV palette and one central hand-action lane. */
.family-player-button {
  width: 100%; min-height: 58px; padding: 8px 22px; display: flex; align-items: center; gap: 14px;
  background: #21364b; color: #fff0d7; border: 1px solid #ebcda278; border-radius: 12px;
  cursor: pointer; text-align: left; box-shadow: 0 4px 0 #0f2030;
}
.family-player-button > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.family-player-button small { color: #dfcba9; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.family-player-button strong { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-player-button > b { margin-left: auto; font-size: 12px; font-weight: 700; color: #eee3cf; white-space: nowrap; }
.family-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; }
.family-avatar > .family-avatar { width: 100%; height: 100%; }
.family-avatar svg { display: block; width: 100%; height: 100%; }
.family-library-status { margin: 10px auto 0; width: min(820px, calc(100vw - 48px)); color: #ede0c6; font-size: 10px; text-align: center; }

.family-overlay { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 18px; background: #12283a; color: #fff0d7; }
.family-panel { width: min(760px, calc(100vw - 48px)); max-height: calc(100vh - 36px); padding: 24px 32px; display: grid; gap: 12px; background: #26384d; border: 1px solid #e7ca9b; border-radius: 20px; box-shadow: 0 7px 0 #0d2134; }
.family-heading { text-align: center; }
.family-heading .eyebrow { margin: 0 0 6px; color: #ebcda2; font-size: 10px; letter-spacing: .17em; }
.family-heading h2 { margin: 0; font: 700 43px/1.08 Georgia, serif; letter-spacing: -.045em; color: #ffe1ac; }
.family-heading p:last-child { margin: 9px 0 0; color: #ece0cc; font-size: 14px; }
.family-player-list, .family-pagination, .family-board-controls, .family-result-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.family-player-choice { min-height: 66px; width: 100%; display: flex; align-items: center; gap: 15px; padding: 7px 20px; background: #203047; border: 1px solid #e8ce9d57; border-radius: 11px; color: #fff0d7; text-align: left; cursor: pointer; }
.family-player-choice.is-selected { background: #9cdbca; color: #24394a; border-color: #e1ffed; box-shadow: 0 3px 0 #4b827a; }
.family-player-copy { display: grid; min-width: 0; gap: 3px; }
.family-player-copy strong { font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-player-copy small { font-size: 11px; opacity: .8; }
.family-player-choice > b { margin-left: auto; font-size: 23px; }
.family-player-choice:disabled { cursor: default; opacity: .6; }
.family-secondary { min-height: 48px; width: 100%; padding: 9px 18px; border: 1px solid #ddc99d65; border-radius: 10px; color: #eee2d1; background: #1b2d43; font: 700 14px/1.25 system-ui, sans-serif; cursor: pointer; }
.family-secondary:hover:not(:disabled), .family-player-button:hover, .family-player-choice:hover:not(:disabled) { border-color: #ffe6b6; }
.family-close { background: #3b485a; }
.family-note, .family-phone-hint { margin: 0; text-align: center; color: #eadac0; font-size: 12px; line-height: 1.4; }
.family-note:empty { display: none; }
.family-phone-hint { color: #d9cfbf; font-size: 11px; }
.family-board-rows { display: grid; gap: 7px; }
.family-score-row { min-height: 61px; padding: 8px 20px; display: flex; align-items: center; gap: 14px; background: #203047; border: 1px solid #e8ce9d2e; border-radius: 10px; }
.family-score-row.is-selected { border-color: #b3e8d5; background: #354e56; }
.family-rank { width: 40px; color: #ffdca4; font-size: 19px; font-variant-numeric: tabular-nums; }
.family-score-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; }
.family-score-value { margin-left: auto; font: 700 27px/1 Georgia, serif; font-variant-numeric: tabular-nums; color: #ffe1ac; }
.family-board-empty { min-height: 160px; margin: 0; display: flex; align-items: center; justify-content: center; padding: 30px; border: 1px dashed #e8ce9d57; border-radius: 12px; text-align: center; color: #e7dac4; font-size: 16px; line-height: 1.5; }

.family-result-summary { width: min(760px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 2fr); align-items: center; gap: 12px; padding: 8px 14px; background: #16273b; border: 1px solid #e8ce9d4d; border-radius: 10px; text-align: left; }
.family-result-player { display: flex; gap: 9px; align-items: center; min-width: 0; }
.family-result-player > .family-avatar { width: 30px; height: 30px; flex-basis: 30px; }
.family-result-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.family-result-ranks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; gap: 7px; }
.family-result-ranks small { display: block; color: #e9d9bf; font-size: 9px; }
.family-result-ranks strong { display: block; margin-top: 3px; color: #ffe1ac; font-size: 20px; font-variant-numeric: tabular-nums; }
.family-result-note { margin: 0; color: #eadac0; font-size: 11px; line-height: 1.4; }
.family-result-summary > .family-result-note:last-child:not(:nth-child(2)) { grid-column: 1 / -1; text-align: center; }
#adventure-results .family-result-actions { gap: 8px; }
#adventure-results .family-result-actions > button { min-height: 44px; }
body.family-overlay-open .library-panel, body.family-overlay-open #setup-panel, body.family-overlay-open #shape-setup-panel,
body.family-overlay-open #draw-setup-panel, body.family-overlay-open #adventure-setup, body.family-overlay-open #adventure-results,
body.family-overlay-open #results-panel, body.family-overlay-open #shape-results-panel, body.family-overlay-open #settings-panel,
body.family-overlay-open #system-help, body.family-overlay-open #diagnostics { visibility: hidden; pointer-events: none; }

/* Five game cards and family controls fit a 720p TV without a scrolling choice. */
@media (max-height: 800px) {
  .library-header { margin-bottom: 12px; }
  h1.library-title { font-size: 50px; }
  .library-header .eyebrow { font-size: 8px; margin-bottom: 4px; }
  .library-lede { margin-top: 7px; font-size: 11px; }
  .library-action-stack, .game-library { gap: 7px; }
  .game-card { min-height: 72px; }
  .game-card-copy { padding-top: 8px; padding-bottom: 8px; }
  .game-card-copy strong { font-size: 27px; }
  .game-card-copy span { margin-top: 3px; font-size: 10px; }
  .game-card-copy small { font-size: 7px; }
  .family-player-button { min-height: 45px; padding-top: 5px; padding-bottom: 5px; }
  .family-player-button .family-avatar { width: 30px; height: 30px; flex-basis: 30px; }
  .family-player-button strong { font-size: 16px; }
  .settings-open-button { min-height: 36px; padding-top: 7px; padding-bottom: 7px; font-size: 11px; }
  .family-library-status { margin-top: 8px; font-size: 9px; }
  .library-footer { margin-top: 8px; }
  .family-panel { padding: 19px 28px; gap: 10px; }
  .family-heading h2 { font-size: 37px; }
  .family-heading p:last-child { font-size: 12px; }
  .family-player-choice { min-height: 58px; }
  .family-player-copy strong { font-size: 19px; }
  .family-score-row { min-height: 54px; }
  .family-secondary { min-height: 43px; font-size: 13px; }
  .results-card { padding: 18px 26px; gap: 11px; }
  .results h2, #results-panel h2 { font-size: 40px; }
  .results-actions { gap: 7px; }
  .results-actions > button { min-height: 41px; }
  .results-actions .primary-button { min-height: 49px; }
  .result-metrics > div { padding: 7px; }
  .result-metrics strong { font-size: 27px; }
  .result-metrics .score-result strong { font-size: 34px; }
  #adventure-results { gap: 10px; padding-top: 18px; padding-bottom: 20px; }
  #adventure-results .tv-action-header { min-height: 95px; }
  #adventure-results .tv-action-header::before { width: 95px; height: 95px; }
  #adventure-results .tv-action-header h1 { font-size: 49px; }
  #adventure-results .adventure-result-stats { margin: 0; }
  #adventure-results .tv-action-lane > button { min-height: 44px; }
}
@media (min-width: 900px) and (max-height: 800px) { #results-panel .result-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .family-panel { width: calc(100vw - 28px); padding: 17px; }
  .family-heading h2 { font-size: 32px; }
  .family-score-row { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .family-score-name { font-size: 16px; }
  .family-result-summary { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .family-result-player { justify-content: center; }
  .family-result-note { text-align: center; }
  .family-player-button > b { font-size: 10px; }
}

/* The TV carries one noninteractive handoff message while the phone chooses. */
.phone-control-guidance {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: #142b3e; background: linear-gradient(#142b3eed, #142b3ef5), url("/movie-game/ui-59ed9d285f4d13f7f89fa545.jpg") center / cover;
  color: #fff0d7; pointer-events: auto;
}
.phone-control-card { width: min(980px, calc(100vw - 48px)); padding: 32px; display: grid; gap: 26px; background: #24394b; border: 1px solid #e8c999; border-radius: 23px; box-shadow: 0 7px 0 #0d2133; }
.phone-control-heading { text-align: center; }
.phone-control-heading .eyebrow { margin: 0 0 9px; color: #e8c999; font-size: 12px; letter-spacing: .17em; }
.phone-control-heading h1 { margin: 0; color: #ffe1ac; font: 700 48px/1.1 Georgia, serif; letter-spacing: -.04em; }
.phone-control-heading > p:last-child { margin: 12px 0 0; font-size: 19px; color: #e9dfce; }
.phone-control-selection { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.phone-control-selection > div { min-width: 0; padding: 15px 20px; display: grid; gap: 6px; text-align: center; background: #183043; border: 1px solid #e8c9993d; border-radius: 12px; }
.phone-control-selection small { color: #e7cfa8; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.phone-control-selection strong { color: #fff0d7; font-size: 23px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-control-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.phone-control-steps > li { padding: 18px 16px; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; border: 1px solid #e8c99957; border-radius: 13px; background: #2c4354; }
.phone-control-steps b { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #edd2a0; color: #25394a; font-size: 21px; }
.phone-control-steps strong { font-size: 19px; line-height: 1.3; color: #fff0d7; }
.phone-control-steps span { font-size: 15px; line-height: 1.4; color: #e1d9cb; }
.phone-control-status { margin: 0; color: #b8e8d4; text-align: center; font-size: 17px; line-height: 1.4; }

/* Hidden screens cannot receive pointer or keyboard focus during handoff.
   Calibration and the connection gate retain their own higher-layer recovery. */
body.phone-control-guidance-active #library-panel,
body.phone-control-guidance-active #setup-panel,
body.phone-control-guidance-active #shape-setup-panel,
body.phone-control-guidance-active #draw-setup-panel,
body.phone-control-guidance-active #adventure-setup,
body.phone-control-guidance-active #results-panel,
body.phone-control-guidance-active #shape-results-panel,
body.phone-control-guidance-active #adventure-results,
body.phone-control-guidance-active #settings-panel,
body.phone-control-guidance-active #family-picker,
body.phone-control-guidance-active #family-leaderboard,
body.phone-control-guidance-active #system-help,
body.phone-control-guidance-active #motion-lab,
body.phone-control-guidance-active #diagnostics,
body.phone-control-guidance-active #game-exit-button,
body.phone-control-guidance-active #adventure-pause { visibility: hidden; pointer-events: none; }

@media (max-height: 650px) {
  .phone-control-guidance { padding: 18px; }
  .phone-control-card { padding: 24px; gap: 18px; }
  .phone-control-heading h1 { font-size: 38px; }
  .phone-control-heading > p:last-child { font-size: 16px; }
  .phone-control-steps > li { padding: 14px; }
  .phone-control-steps strong { font-size: 16px; }
  .phone-control-steps span { font-size: 13px; }
  .phone-control-selection strong { font-size: 21px; }
}
@media (max-width: 700px) {
  .phone-control-card { padding: 20px; gap: 16px; }
  .phone-control-heading h1 { font-size: 34px; }
  .phone-control-heading > p:last-child { font-size: 16px; }
  .phone-control-selection strong { font-size: 17px; }
  .phone-control-steps { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .phone-control-steps > li { grid-template-columns: 32px minmax(0, 1fr); gap: 5px 10px; text-align: left; justify-items: start; padding: 11px 14px; }
  .phone-control-steps b { grid-row: 1 / 3; width: 30px; height: 30px; font-size: 18px; align-self: center; }
  .phone-control-steps strong { font-size: 16px; }
  .phone-control-steps span { font-size: 13px; }
  .phone-control-status { font-size: 14px; }
}

/* sockhop.games: a shared all-ages interface. Game renderers own their worlds. */
@font-face { font-family: Figtree; src: url("/movie-game/ui-4ba7d3d096695818fe0686be.woff2") format('woff2'); font-style: normal; font-weight:500; font-weight:500 900; font-display: swap; }
:root { --sh-paper:#f7f1e6; --sh-surface:#fffdf7; --sh-ink:#1f2357; --sh-muted:#555874; --sh-edge:#d6d0c7; --sh-hop:#d94827; --sh-adventure:#126660; --sh-balloon:#b52c56; --sh-shape:#f4b23e; --sh-draw:#6547b7; }
html, body { background:var(--sh-paper); font-family:Figtree,system-ui,sans-serif; }
:root { color-scheme:light; }
button, select, input { font-family:inherit; }
#game-shell, .menu-scrim.is-active { background:var(--sh-paper); }
#game-shell::before { content:''; position:absolute; width:38vw; height:22vw; left:-17vw; bottom:-20vw; border:2px solid #e6dfd1; border-radius:50%; pointer-events:none; }
.menu-scrim.is-active { backdrop-filter:none; -webkit-backdrop-filter:none; }
.ambient-dots { display:none; }
body.adventure-active #game-shell { background:#080d20; }
body.adventure-results-active #menu-scrim.is-active { background:rgba(16,24,39,.08); }
body.adventure-results-active #game-shell::before { display:none; }
button.is-remote-selected, [data-motion-select].is-remote-selected,
[data-motion-select].is-motion-targeted { outline:5px solid var(--sh-ink); outline-offset:5px; }
[data-motion-select]::before { display:none; }
[data-motion-select]::after { border:0; top:auto; left:16px; right:16px; bottom:4px; width:auto; height:3px; border-radius:0; background:var(--sh-hop); transform:scaleX(var(--hold-progress,0)); transform-origin:left; }
[data-motion-select].is-motion-targeted::before, [data-motion-select].is-motion-targeted::after { border-color:var(--sh-hop); }
.library-panel { top:28px; right:48px; bottom:28px; left:48px; inset:28px 48px; width:auto; max-width:none; height:calc(100vh - 56px); transform:none; color:var(--sh-ink); overflow:visible; }
.library-header { width:100%; max-width:none; margin:0 0 8px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; grid-gap:28px; }
h1.library-title { margin:0; color:var(--sh-ink); font:900 44px/1 Figtree,system-ui,sans-serif; font:900 clamp(34px,3.2vw,58px)/1 Figtree,system-ui,sans-serif; letter-spacing:-.055em; text-shadow:none; white-space:nowrap; }
.library-title .brand-domain { color:var(--sh-ink); font-weight:500; }
.brand-domain i { color:var(--sh-hop); font-style:normal; font-weight:900; }
.library-header h2 { margin:0; padding-left:24px; border-left:1px solid #b8b3b3; font-size:30px; font-size:clamp(24px,2.2vw,38px); font-weight:650; letter-spacing:-.035em; }
.library-header-actions { position:static; display:block; }
.library-header .connection-chip { min-width:0; border:0; border-radius:40px; padding:12px 18px; background:#dce9de; color:var(--sh-ink); }
.library-header .connection-chip small { display:none; }
.library-header .connection-chip strong { font-size:20px; font-size:clamp(17px,1.4vw,24px); }
.library-lede { min-height:28px; margin:8px 0 16px; color:var(--sh-muted); font-size:20px; font-size:clamp(17px,1.45vw,23px); font-weight:500; line-height:1.3; text-align:center; text-shadow:none; }
.library-action-stack { width:100%; max-width:none; grid-gap:16px; margin:0; }
.game-library { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); grid-gap:18px; height:calc(100vh - 300px); min-height:300px; }
.game-card { --game-band:var(--sh-adventure); min-height:0; border:0; border-radius:20px; background:var(--game-band); overflow:hidden; box-shadow:0 4px 0 #d4cec5; transform:none; display:block; transition:none; }
.game-card:hover, .game-card:active { transform:none; box-shadow:0 4px 0 #b8b2aa; }
.game-card.is-remote-selected, .game-card.is-motion-targeted { outline-color:var(--sh-ink); outline-offset:5px; box-shadow:0 0 0 3px var(--sh-paper),0 8px 0 #c8c2ba; }
.game-card::before, .game-card::after { display:none; }
.game-card .sockhop-game-art { display:block; width:100%; height:calc(100% - 66px); object-fit:cover; object-position:center 52%; }
.game-card-copy { position:static; display:flex; align-items:center; height:66px; min-height:0; padding:0 24px 5px; background:var(--game-band); }
.game-card-copy strong { color:#fffdf7; font:800 38px/1.08 Figtree,system-ui,sans-serif; font:800 clamp(29px,2.7vw,46px)/1.08 Figtree,system-ui,sans-serif; letter-spacing:-.025em; text-shadow:none; }
.game-card-copy > span { display:none; }
.game-card.balloon-card { --game-band:var(--sh-balloon); }
.game-card.shape-card { --game-band:var(--sh-shape); }
.game-card.draw-card { --game-band:var(--sh-draw); }
.shape-card .game-card-copy strong { color:var(--sh-ink); }
.sockhop-hold-stripe { position:absolute; bottom:8px; left:0; right:0; height:3px; background:#ffffffd9; box-shadow:0 6px 0 #ffffffd9; }
.sockhop-hold-stripe::after { content:''; position:absolute; inset:0; background:var(--sh-hop); transform:scaleX(var(--hold-progress,0)); transform-origin:left; }
.library-utilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-gap:18px; margin-top:18px; }
.library-utilities > button { width:100%; min-height:54px; padding:8px 20px; color:var(--sh-ink); background:#eeeadf; border:1px solid #ded8cc; border-radius:30px; box-shadow:none; font-size:22px; font-weight:650; }
.library-utilities .family-player-button { grid-gap:10px; }
.library-utilities .family-player-button small { display:none; }
.library-utilities .family-player-button strong { font-size:20px; }
.library-utilities .family-player-button > b { color:var(--sh-ink); font-size:20px; }
.library-utilities .family-avatar { width:30px; height:30px; flex-basis:30px; }
.library-tools { display:flex; align-items:center; justify-content:center; margin-top:12px; }
.library-tools .text-button { min-height:36px; padding:4px 18px; margin:0 14px 0 0; border:0; border-radius:8px; color:var(--sh-muted); background:transparent; font-size:17px; }
.library-tools > span { font-size:17px; color:var(--sh-muted); }
.family-library-status { color:var(--sh-muted); font-size:17px; margin:5px auto 0; width:100%; }
.connection-gate, .player-setup-gate { background:var(--sh-paper); color:var(--sh-ink); }
.connection-gate-card, .player-setup-card, .system-help-card, .settings-panel, .family-panel, .phone-control-card { background:var(--sh-surface); color:var(--sh-ink); border:1px solid var(--sh-edge); border-radius:24px; box-shadow:0 6px 0 #d8d1c4; }
.connection-gate-card h1, .player-setup-copy h1, .system-help-card h2, .settings-panel h1, .family-heading h2 { color:var(--sh-ink); font-family:Figtree,system-ui,sans-serif; font-weight:800; letter-spacing:-.035em; text-shadow:none; }
.connection-gate-card h1 span { color:var(--sh-hop); }
.connection-gate-eyebrow, .connection-gate-card .eyebrow, .player-setup-card .eyebrow, .system-help-card .eyebrow, .settings-panel .eyebrow, .family-heading .eyebrow { color:var(--sh-muted); font-size:18px; letter-spacing:0; text-transform:none; }
.connection-gate-card p, .connection-gate-card > span, .player-setup-copy > p, .player-setup-copy .player-setup-hint, .player-setup-note, .settings-panel p, .system-help-card p { color:var(--sh-muted); }
.player-setup-picture { background:#f1eddf; border-color:var(--sh-edge); }
.player-setup-card > .eyebrow { font-size:1.8vw; }
.player-setup-help h2 { color:var(--sh-ink); }
.player-setup-help .text-button { color:var(--sh-ink); background:#fffdf7; border:1px solid var(--sh-edge); box-shadow:none; }
.player-setup-picture span, .player-setup-copy .player-setup-progress-label { color:var(--sh-muted); }
.player-setup-track { background:#dedbd0; }
.player-setup-track i { background:var(--sh-adventure); }
.player-setup-status, .player-setup-status.is-warning { color:var(--sh-ink); background:#e7efe6; border-color:#b8cbb8; }
.player-setup-status.is-warning { background:#fff0ca; border-color:#d1b676; }
.player-setup-status strong { color:var(--sh-ink); }
.connection-demo, .connection-new-code, .player-setup-actions .text-button, .player-setup-help-actions button, .settings-hand-choice button { color:var(--sh-ink); background:#eeeadf; border:1px solid var(--sh-edge); box-shadow:none; }
.connection-waiting, .connection-waiting strong, .connection-waiting span, .hosted-pairing > p, .hosted-pairing > span, .hosted-pairing-options small, .hosted-pairing-options b { color:var(--sh-muted); }
#hosted-pairing-code { color:var(--sh-ink); }
.hosted-pairing-code-option, .hosted-pairing-qr-option { background:transparent; border-color:var(--sh-edge); }
.system-help, .family-overlay { background:rgba(247,241,230,.97); color:var(--sh-ink); }
.system-help-actions { width:100%; max-width:720px; }
.system-help-actions button, .settings-hand-choice button { min-height:58px; font-size:21px; }
.primary-button, .system-help-actions .primary-button { color:#fffdf7; background:var(--sh-ink); box-shadow:0 4px 0 #b4afbf; }
.primary-button:hover:not(:disabled), .system-help-actions .primary-button:hover { color:#fff; background:#303777; }
.text-button, .setup-back-button { color:var(--sh-ink); }
.settings-hand-card { background:#f1ede4; border-color:var(--sh-edge); }
.settings-hand-choice button.is-selected { color:#fff; background:var(--sh-adventure); border-color:var(--sh-adventure); }
.family-panel { grid-gap:12px; }
.family-heading p:last-child, .family-note, .family-phone-hint, .family-player-copy small { color:var(--sh-muted); font-size:18px; }
.family-player-choice, .family-secondary, .family-score-row, .family-board-empty, .family-result-summary { color:var(--sh-ink); background:#f0ece3; border-color:var(--sh-edge); }
.family-player-choice.is-selected { background:#dce9de; color:var(--sh-ink); box-shadow:none; }
.family-secondary { font-family:inherit; font-size:20px; }
.family-rank, .family-score-value, .family-result-ranks strong { color:var(--sh-ink); font-family:inherit; }
.family-result-ranks small, .family-result-note { color:var(--sh-muted); font-size:15px; }
.family-score-row.is-selected { background:#e2e4f1; border-color:#8f94b6; }
.family-result-summary { grid-gap:8px; padding:8px 12px; }
.family-result-player strong { font-size:18px; }
.family-result-ranks strong { font-size:23px; }
.family-board-controls button, .family-pagination button { font-size:18px; }
#adventure-setup, #shape-setup-panel, #draw-setup-panel, #setup-panel, .results-card { background:var(--sh-surface); color:var(--sh-ink); border:1px solid var(--sh-edge); box-shadow:0 5px 0 #d8d1c4; }
#adventure-setup h1, #shape-setup-panel h1, #draw-setup-panel h1, #setup-panel h1, .results h2, #results-panel h2 { font-family:Figtree,system-ui,sans-serif; color:var(--sh-ink); text-shadow:none; letter-spacing:-.035em; }
#adventure-setup h1 em { color:var(--sh-adventure); }
#adventure-setup .eyebrow, #adventure-setup .lede, #shape-setup-panel .lede, #draw-setup-panel .lede, #setup-panel .lede { color:var(--sh-muted); }
.tv-info-panel, #adventure-setup .tv-info-panel { background:#efebe2; border-color:var(--sh-edge); color:var(--sh-ink); }
#adventure-setup .tv-side-title, #adventure-setup .adventure-instructions dt, #adventure-setup .adventure-instructions dd, #adventure-setup .adventure-instructions p, #adventure-setup .adventure-camera-note, #adventure-setup .adventure-key-legend { color:var(--sh-muted); font-family:inherit; }
#adventure-setup .primary-button { background:var(--sh-adventure); color:#fff; box-shadow:0 4px 0 #b8c9bf; }
#adventure-setup .adventure-secondary, .setup-back-button { background:#eeeadf; color:var(--sh-ink); border-color:var(--sh-edge); box-shadow:none; }
/* Common setup components use paper surfaces in every game. */
body.balloon-active .menu-scrim.is-active { background:var(--sh-paper); }
.tv-action-screen .eyebrow, .tv-action-screen .tv-side-title,
.tv-action-screen .connection-heading small, .tv-action-screen .steps li,
.tv-action-screen .readiness-label, .tv-action-screen .readiness-label b,
.tv-action-screen .readiness-message, .tv-action-screen .connection-detail,
.tv-action-screen .setup-back-button small { color:var(--sh-muted); }
.tv-action-screen .steps b { background:var(--sh-ink); color:#fffdf7; }
.tv-action-screen .readiness { background:#dce9de; border-color:#b4c8ba; }
.tv-action-screen .readiness-slot { background:var(--sh-surface); color:var(--sh-muted); border-color:#b4c8ba; }
.tv-action-screen .readiness-slot.is-ready { color:var(--sh-ink); }
.tv-action-screen .pose-preview-strip > span { color:var(--sh-ink); background:#e2e5ef; border-color:#c5c8d8; }
.tv-action-screen .pose-preview-strip small { color:var(--sh-muted); }
.tv-action-screen .shape-session-card { color:var(--sh-ink); background:#e2e5ef; border-color:#c5c8d8; }
.tv-action-screen .shape-session-card b { color:var(--sh-ink); text-shadow:none; }
.tv-action-screen .shape-session-card small { color:var(--sh-muted); }
.tv-action-screen .dev-button, .tv-action-screen .dev-button small { color:var(--sh-muted); border-color:var(--sh-edge); }
.tv-action-screen .dev-button i { background:var(--sh-muted); }
#shape-setup-panel h1 span { color:var(--sh-adventure); }
#setup-panel h1 > span { color:var(--sh-balloon); }
#setup-panel .eyebrow, #setup-panel .tv-action-header .lede { color:var(--sh-muted); }
#setup-panel .tv-info-panel { background:#efebe2; border-color:var(--sh-edge); }
#setup-panel .tv-side-title, #setup-panel .steps li, #setup-panel .rule-strip b,
#setup-panel .rule-strip > span, #setup-panel .balloon-power-tip, #setup-panel .balloon-power-tip strong { color:var(--sh-ink); }
#setup-panel .steps b { background:var(--sh-ink); color:#fffdf7; }
#setup-panel .rule-strip > span { background:#e0dccf; border-color:var(--sh-edge); }
#setup-panel .balloon-mode-card { color:var(--sh-ink); background:var(--sh-surface); border-color:var(--sh-edge); box-shadow:none; }
#setup-panel .balloon-mode-card > b { color:var(--sh-balloon); background:#f5e5e7; border-color:#e1bfc7; }
#setup-panel .balloon-mode-card.is-selected { color:var(--sh-ink); background:#f5e5e7; border-color:var(--sh-balloon); box-shadow:0 3px 0 #ccb4bc; }
#setup-panel .primary-button { color:#fffdf7; background:var(--sh-ink); border-color:var(--sh-ink); box-shadow:0 4px 0 #b4afbf; }
#setup-panel .setup-back-button { background:#eeeadf; border-color:var(--sh-edge); }
.hosted-pairing-expiry { color:var(--sh-muted); border-color:var(--sh-edge); background:#eeeadf; }
.results { background:var(--sh-paper); }
.results-card { width:calc(100vw - 48px); width:min(1040px,calc(100vw - 48px)); max-width:1040px; }
.results-card .eyebrow, .result-metrics small, .results-card .result-source { color:var(--sh-muted); }
.result-metrics > div { background:#efebe2; border-color:var(--sh-edge); }
.result-metrics strong, .result-metrics .score-result strong { color:var(--sh-ink); font-family:inherit; }
.results-actions .text-button { color:var(--sh-ink); border:1px solid var(--sh-edge); background:#eeeadf; }
.phone-control-screen, .phone-control-guidance { background:var(--sh-paper); color:var(--sh-ink); }
.phone-control-card h1, .phone-control-card .eyebrow, .phone-control-card p { color:var(--sh-ink); }
.phone-control-card { width:980px; max-width:calc(100vw - 48px); }
.phone-control-heading h1 { font:800 42px/1.1 Figtree,system-ui,sans-serif; text-shadow:none; }
.phone-control-card .phone-control-heading > p:last-child { color:var(--sh-muted); }
.phone-control-selection > div, .phone-control-steps > li { background:#eeeadf; color:var(--sh-ink); border-color:var(--sh-edge); }
.phone-control-selection small, .phone-control-selection strong, .phone-control-steps strong, .phone-control-steps span { color:var(--sh-ink); }
.phone-control-steps b { background:#dce9de; color:var(--sh-adventure); }
.settings-panel .settings-subtitle, .settings-hand-card, .settings-hand-card h2, .settings-hand-card p { color:var(--sh-ink); }
.settings-panel header > p:last-child, .settings-hand-card > small, .settings-hand-card > strong { color:var(--sh-muted); font-size:18px; }
@media (max-height:800px) {
}
@media (max-width:1100px) {
  .library-panel { top:24px; right:32px; bottom:24px; left:32px; inset:24px 32px; height:calc(100vh - 48px); }
  .library-header { grid-gap:18px; }
  .library-header h2 { padding-left:16px; }
  .library-header .connection-chip { padding:10px 14px; }
  .library-utilities .family-player-button > b { font-size:18px; }
}
@media (max-width:760px) {
  .hosted-pairing { background:var(--sh-paper); border-color:var(--sh-edge); box-shadow:none; }
  .library-panel { top:20px; right:20px; bottom:20px; left:20px; inset:20px; height:calc(100vh - 40px); overflow-y:auto; padding:5px; }
  .library-header { grid-template-columns:1fr auto; }
  .library-header h2 { grid-column:1 / -1; border:0; padding:0; font-size:26px; }
  .library-title { font-size:34px; }
  .library-header .connection-chip strong { font-size:15px; }
  .library-lede { font-size:17px; }
  .game-library { height:auto; grid-template-columns:1fr; grid-template-rows:none; min-height:0; }
  .game-card { height:190px; }
  .game-card-copy { height:54px; padding-left:18px; }
  .game-card .sockhop-game-art { height:136px; }
  .game-card-copy strong { font-size:28px; }
  .library-utilities { grid-template-columns:1fr; grid-gap:12px; }
  .library-tools { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { .game-card { transition:none; } }

/* Adventure's ending belongs to its world. The Sockhop shell owns the library,
   connection and setup; this screen keeps the quest's green-and-gold character. */
#adventure-results {
  --victory-gold:#ffdc83; --victory-paper:#fff3d5; --victory-green:#102e27;
  position:fixed; z-index:8; top:0; right:0; bottom:0; left:0; inset:0;
  transform:none; width:100%; max-width:none; height:100%; max-height:none;
  margin:0; padding:4vh 5vw; border:0; border-radius:0; box-shadow:none;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);
  align-content:center; align-items:center; grid-gap:12px 0;
  background:transparent; color:var(--victory-paper); overflow-y:auto;
}
#adventure-results::before {
  content:''; position:absolute; z-index:0; top:0; right:0; bottom:0; left:31%;
  background:linear-gradient(90deg,rgba(16,46,39,0),rgba(16,46,39,.96) 18%,rgba(16,46,39,.97) 90%,rgba(16,46,39,.7));
  pointer-events:none;
}
#adventure-results > * { position:relative; z-index:1; grid-column:2; min-width:0; }
#adventure-results .adventure-result-knight {
  grid-column:auto; grid-row:auto;
  position:absolute; z-index:1; left:2.5vw; bottom:1vh; width:38vw; height:94vh;
  pointer-events:none;
}
.adventure-result-knight img { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
#adventure-results .tv-action-header { padding:0; min-height:0; }
#adventure-results .tv-action-header::before, #adventure-results .prepared-result-trophy { display:none!important; }
#adventure-results .tv-action-header .eyebrow {
  margin:0 0 6px; color:var(--victory-paper); font:650 18px/1.2 Figtree,system-ui,sans-serif;
  letter-spacing:.04em; text-transform:none;
}
#adventure-results .tv-action-header h1 {
  position:relative; margin:0; padding:12px 42px 16px;
  color:var(--victory-gold); font:700 54px/1.08 Georgia,'Palatino Linotype',serif;
  font-size:clamp(38px,3.8vw,70px); letter-spacing:-.025em;
  border-top:4px solid #d2aa51; border-bottom:4px solid #b48a3b;
  border-radius:50% / 18%; background:linear-gradient(180deg,#234d35,#153d2d 70%,#102f25);
  box-shadow:0 4px 0 #10221d; text-shadow:0 2px 0 #70461b,1px 3px 2px #071d17;
}
#adventure-results .tv-action-header h1::before, #adventure-results .tv-action-header h1::after {
  content:''; position:absolute; top:50%; width:12px; height:12px;
  transform:translateY(-50%) rotate(45deg); border:2px solid #ddb963;
}
#adventure-results .tv-action-header h1::before { left:12px; }
#adventure-results .tv-action-header h1::after { right:12px; }
#adventure-results .tv-action-header h1 em { color:inherit; font-style:normal; }
#adventure-results .tv-action-header .lede {
  display:block; max-width:none; margin:10px auto 0; color:var(--victory-paper);
  font:500 19px/1.3 Figtree,system-ui,sans-serif;
}
.adventure-total-score { text-align:center; }
#adventure-results .adventure-total-score strong {
  display:block; color:var(--victory-gold); font:700 112px/.95 Georgia,'Palatino Linotype',serif;
  font-size:clamp(76px,13vh,154px); letter-spacing:-.055em; font-variant-numeric:tabular-nums;
  text-shadow:0 2px 0 #754319,0 4px 0 #34260f;
}
#adventure-results .adventure-total-score small {
  display:block; margin-top:8px; color:var(--victory-paper); font:700 20px/1 Figtree,system-ui,sans-serif;
  text-transform:uppercase; letter-spacing:.15em;
}
#adventure-results .adventure-result-stats {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-gap:8px;
  margin:0; padding:14px 0; border-top:1px solid #b8a263; border-bottom:1px solid #b8a263;
}
#adventure-results .adventure-result-stats > div + div { border-left:1px solid #7e7951; }
#adventure-results .adventure-result-stats strong {
  display:block; color:var(--victory-gold); font:700 36px/1.1 Georgia,serif;
  font-size:clamp(28px,3.5vh,42px); font-variant-numeric:tabular-nums;
}
#adventure-results .adventure-result-stats small { display:block; margin-top:4px; color:var(--victory-paper); font-size:18px; line-height:1.2; }
#adventure-results .tv-action-lane { width:100%; max-width:none; grid-gap:12px; }
#adventure-results .tv-action-lane > button {
  width:100%; margin:0; padding:12px 22px; min-height:48px; border-radius:14px;
  font:750 24px/1.2 Figtree,system-ui,sans-serif;
}
#adventure-results .tv-action-lane .primary-button {
  min-height:64px; color:#352409; background:linear-gradient(180deg,#ffe49a,#ffc745);
  border:3px double #fff2b4; box-shadow:0 4px 0 #896127,0 0 0 2px #c99229;
}
#adventure-results .tv-action-lane .primary-button:hover { background:#ffe49a; }
#adventure-results .tv-action-lane .primary-button::after { background:#66431b; height:4px; bottom:5px; }
#adventure-results .tv-action-lane .adventure-secondary, #adventure-results .family-result-actions > button {
  color:var(--victory-paper); background:#142c35; border:1px solid #b3a574; box-shadow:none;
}
#adventure-results .family-result-actions { display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); grid-gap:12px; }
#adventure-results .family-result-actions > button { min-height:46px; padding:10px 14px; font:650 20px/1.2 Figtree,system-ui,sans-serif; }
#adventure-results .family-result-summary { width:100%; background:#102923; color:var(--victory-paper); border-color:#a69766; }
#adventure-results .family-result-ranks strong { color:var(--victory-gold); }
#adventure-results .family-result-ranks small, #adventure-results .family-result-note { color:var(--victory-paper); }
#adventure-results .family-result-note { font-size:15px; }
#adventure-results .is-remote-selected, #adventure-results .is-motion-targeted { outline-color:#fff1ad; outline-width:4px; outline-offset:5px; }
#adventure-results [data-motion-select]::after { background:var(--victory-gold); }
#adventure-result-source, #adventure-special-token-results { margin:0; text-align:center; color:var(--victory-paper); font-size:16px; line-height:1.3; }
#adventure-results [hidden] { display:none; }
/* A failed attempt must never display the celebratory character. */
#adventure-results[data-outcome=failed] .adventure-result-knight { display:none; }
#adventure-results[data-outcome=failed] { grid-template-columns:minmax(0,1fr); padding-left:18vw; padding-right:18vw; }
#adventure-results[data-outcome=failed] > * { grid-column:1; }
#adventure-results[data-outcome=failed]::before { left:0; background:rgba(16,46,39,.96); }
@media (max-height:800px) {
  #adventure-results { padding:24px 5vw; grid-row-gap:9px; }
  #adventure-results .tv-action-header .eyebrow { margin-bottom:4px; font-size:16px; }
  #adventure-results .tv-action-header h1 { padding-top:8px; padding-bottom:10px; font-size:54px; }
  #adventure-results .tv-action-header .lede { margin-top:7px; font-size:18px; }
  #adventure-results .adventure-total-score strong { font-size:104px; }
  #adventure-results .adventure-total-score small { margin-top:4px; font-size:18px; }
  #adventure-results .adventure-result-stats { padding:9px 0; }
  #adventure-results .adventure-result-stats strong { font-size:30px; }
  #adventure-results .adventure-result-stats small { font-size:17px; }
  #adventure-results .tv-action-lane { grid-gap:10px; }
  #adventure-results .tv-action-lane > button { min-height:44px; padding:10px 18px; font-size:22px; }
  #adventure-results .tv-action-lane .primary-button { min-height:54px; }
  #adventure-results .family-result-actions > button { min-height:42px; padding:8px 12px; font-size:19px; }
  #adventure-result-source { font-size:14px; }
}
@media (max-width:1050px) {
  #adventure-results { grid-template-columns:minmax(0,.8fr) minmax(0,1.8fr); padding-left:3vw; padding-right:3vw; }
  #adventure-results .adventure-result-knight { width:32vw; left:0; }
  #adventure-results .tv-action-header h1 { font-size:38px; }
}
@media (max-width:700px) {
  #adventure-results, #adventure-results[data-outcome=failed] { display:block; padding:24px; background:var(--victory-green); }
  #adventure-results .adventure-result-knight { display:none; }
  #adventure-results > * { margin-bottom:18px; }
  #adventure-results .tv-action-header h1 { font-size:34px; }
  #adventure-results .adventure-result-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #adventure-results .adventure-result-stats > div { border:0; }
}

/* One presentation owner for launch, chapter travel, retry and countdown.
   No images, canvas, timers or extra work in the game's preparation pipeline. */
.session-transition {
  position:fixed; top:0; right:0; bottom:0; left:0;
  display:flex; align-items:center; justify-content:center;
  padding:28px 48px; overflow:auto;
  background:var(--sh-paper, #f7f1e6); color:var(--sh-ink, #1f2357);
  font-family:Figtree,system-ui,sans-serif; text-align:center;
}
.session-transition.is-hidden { display:none; }
.prepared-game-loading { z-index:100; }
.countdown.session-transition {
  z-index:8; width:auto; min-width:0; transform:none;
  border:0; border-radius:0; box-shadow:none; text-shadow:none;
}
.transition-card { width:760px; max-width:100%; margin:auto; }
.transition-hop {
  position:relative; width:116px; height:106px; margin:0 auto 24px;
  color:var(--sh-ink, #1f2357);
}
.transition-hop::before {
  content:''; position:absolute; left:42px; top:8px;
  width:32px; height:32px; border-radius:50%; background:var(--sh-hop, #d94827);
  animation:sockhop-warmup 1.6s ease-in-out infinite;
}
.transition-hop::after {
  content:''; position:absolute; bottom:12px; left:8px; right:8px; height:8px;
  background:currentColor; box-shadow:0 14px 0 currentColor;
  transform:rotate(-8deg);
}
.session-transition .transition-eyebrow {
  display:block; margin:0 0 14px; color:var(--sh-muted, #555874);
  font-size:22px; line-height:1.2; font-weight:650; letter-spacing:0; text-transform:none;
}
.session-transition h1 {
  margin:0 0 22px; font:800 44px/1.12 Figtree,system-ui,sans-serif;
  font-size:clamp(32px,3.2vw,58px); letter-spacing:-.035em;
  color:var(--sh-ink, #1f2357); text-shadow:none;
}
.transition-message {
  margin:0 auto 24px; max-width:700px; color:var(--sh-ink, #1f2357);
  font-size:23px; line-height:1.4;
}
.transition-progress-heading {
  display:flex; justify-content:space-between; align-items:center;
  margin:30px 0 12px; font-size:22px; line-height:1.3;
}
.transition-progress-heading strong { color:var(--sh-adventure, #126660); font-variant-numeric:tabular-nums; }
.session-transition progress {
  display:block; width:100%; height:12px; border:0; border-radius:6px;
  appearance:none; -webkit-appearance:none; overflow:hidden;
  background:#dedbd0; color:var(--sh-adventure, #126660); accent-color:var(--sh-adventure, #126660);
}
.session-transition progress::-webkit-progress-bar { background:#dedbd0; border-radius:6px; }
.session-transition progress::-webkit-progress-value { background:var(--sh-adventure, #126660); border-radius:6px; }
.session-transition progress::-moz-progress-bar { background:var(--sh-adventure, #126660); border-radius:6px; }
.transition-detail { margin:14px 0 0; color:var(--sh-muted, #555874); font-size:20px; line-height:1.35; }
.transition-tip { margin:30px auto 0; padding:18px 24px; background:#eeeadf; border-radius:16px; }
.transition-tip strong { font-size:18px; font-weight:750; color:var(--sh-adventure, #126660); }
.transition-tip p { margin:6px 0 0; color:var(--sh-ink, #1f2357); font-size:22px; line-height:1.35; }
.transition-actions { display:flex; justify-content:center; flex-wrap:wrap; margin:24px 0 0; }
.transition-actions button {
  min-width:200px; min-height:56px; margin:8px 12px; padding:12px 24px;
  border-radius:14px; font:700 22px/1.2 Figtree,system-ui,sans-serif;
}
.transition-actions .adventure-secondary { color:var(--sh-ink, #1f2357); background:#eeeadf; border:1px solid var(--sh-edge, #d6d0c7); box-shadow:none; }
.session-transition [hidden] { display:none; }
.prepared-game-loading[data-status=failed] .transition-hop::before { animation:none; }
/* Game-specific countdown rules must not reintroduce the former dark palette. */
.countdown.session-transition #countdown-value {
  display:block; margin:6px 0 22px; color:var(--sh-ink, #1f2357);
  font:800 180px/1 Figtree,system-ui,sans-serif; font-size:clamp(120px,22vh,240px);
  letter-spacing:-.065em; text-shadow:none; font-variant-numeric:tabular-nums;
}
.countdown.session-transition #countdown-hint { display:block; color:var(--sh-ink, #1f2357); font-size:26px; line-height:1.4; font-weight:600; }
.countdown .transition-hop::before { animation:none; }
/* Connection/reconnection uses the same hopping dot without extra assets. */
#connection-gate-message, #connection-waiting-title, #connection-waiting-detail {
  color:var(--sh-muted, #555874);
}
.connection-waiting i { width:22px; height:22px; border:0; background:var(--sh-hop, #d94827); animation:sockhop-warmup 1.6s ease-in-out infinite; }
@keyframes sockhop-warmup { 0%,100% { transform:translateY(0); } 45% { transform:translateY(-12px); } }
@media (max-height:800px) {
  .session-transition { padding:24px 48px; }
  .transition-hop { width:96px; height:76px; margin-bottom:18px; }
  .transition-hop::before { left:34px; width:28px; height:28px; top:0; }
  .transition-hop::after { height:6px; box-shadow:0 11px 0 currentColor; }
  .session-transition h1 { margin-bottom:16px; }
  .transition-progress-heading { margin-top:22px; }
  .transition-tip { margin-top:24px; padding:14px 20px; }
  .transition-actions { margin-top:16px; }
}
@media (max-width:700px) {
  .session-transition { padding:24px; }
  .session-transition h1 { font-size:32px; }
  .transition-message, .transition-tip p, .transition-progress-heading { font-size:20px; }
  .countdown.session-transition #countdown-hint { font-size:22px; }
}
@media (prefers-reduced-motion:reduce) {
  .transition-hop::before, .connection-waiting i { animation:none; }
}
.reduced-effects .transition-hop::before, .reduced-effects .connection-waiting i { animation:none; }

/* Shape Shift animal round. Static backdrop and DOM card only: everything that
   moves per frame is on the canvases. Avoid `inset`, gap-in-flex and other
   features the Tizen 5 browser lacks. */
body.shape-active #game-shell { background-color: #9fd486; background-image: linear-gradient(#bfe6ff, #9fd486); background-position: center; background-size: cover; background-repeat: no-repeat; }
body.shape-active #game-shell::before { display: none; }

.shape-status {
  left: 28px;
  top: 104px;
  width: 300px;
  min-width: 0;
  transform: none;
  padding: 14px 16px 16px;
  display: block;
  color: #1f2357;
  background: rgba(255, 253, 247, .94);
  border: 3px solid var(--shape-animal-color, #f4b23e);
  border-radius: 22px;
  box-shadow: 0 6px 0 rgba(31, 35, 87, .22);
}
.shape-animal-card {
  position: relative;
  height: 230px;
  margin: -4px -4px 8px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 60%, #ffffff 0, #fdf3dc 70%);
}
.shape-animal-card img { max-width: 100%; max-height: 100%; }
.shape-animal-card img[hidden] { display: none; }
#shape-icon { font-size: 130px; line-height: 1; }
.shape-status-copy { display: block; text-align: left; }
.shape-status-copy > small {
  display: block;
  color: #555874;
  font: 900 11px/1 Figtree, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.shape-status[data-mode="rapid"] .shape-status-copy > small { color: #d94827; }
.shape-status[data-mode="rapid"] { animation: shape-rapid-pulse .5s ease-in-out infinite alternate; }
@keyframes shape-rapid-pulse { to { box-shadow: 0 6px 0 rgba(31,35,87,.22), 0 0 0 6px rgba(244,178,62,.45); } }
.shape-status-copy > strong { display: block; margin: 4px 0 2px; color: #1f2357; font: 900 36px/1.05 Figtree, system-ui, sans-serif; letter-spacing: -.02em; }
#shape-cue { display: block; min-height: 38px; color: #3f4266; font: 700 16px/1.2 Figtree, system-ui, sans-serif; }
.shape-timer { height: 6px; margin: 10px 0 8px; overflow: hidden; border-radius: 6px; background: #e6e1d5; }
.shape-timer i { display: block; width: 100%; height: 100%; background: var(--shape-animal-color, #f4b23e); transform-origin: left center; }
.shape-status .match-meter { position: relative; height: 16px; border-radius: 9px; background: #e2e5ef; }
.shape-status .match-meter i { background: linear-gradient(90deg, #8fd8ff, #71f2c0 70%, #ffd84a); box-shadow: none; transition: width .12s linear; }
.shape-status .match-meter b { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(31,35,87,.35); }
.shape-status .match-meter .tier-good { left: 55%; }
.shape-status .match-meter .tier-great { left: 70%; }
.shape-status .match-meter .tier-perfect { left: 85%; }
.shape-status #shape-match-message { display: block; margin-top: 8px; color: #555874; font: 800 16px/1.2 Figtree, system-ui, sans-serif; }
.shape-status.is-matching #shape-match-message { color: #126660; }
.shape-status[data-tier="perfect"] { border-color: #ffc93a; }
.shape-status[data-tier="perfect"] #shape-match-message { color: #b07800; }

.shape-animal-strip span { font-size: 34px; }
.shape-result-metrics { grid-template-columns: repeat(4, 1fr); }
.shape-result-metrics .perfect-result strong { color: #f4b23e; }

/* Move like it! finale: the card animal bops along while frames swap per swing. */
.shape-status[data-mode="moves"] .shape-status-copy > small { color: #6547b7; }
.shape-status[data-mode="moves"] .shape-animal-card img { animation: shape-bop .42s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.shape-status[data-move="frog-hops"] .shape-animal-card img { animation-name: shape-hop; }
.shape-status[data-move="penguin-waddle"] .shape-animal-card img { animation-name: shape-waddle; }
@keyframes shape-bop { from { transform: scale(1, 1); } to { transform: scale(1.06, .94); } }
@keyframes shape-hop { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes shape-waddle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* Shape uses only the score and time pills from the shared HUD. */
body.shape-active .balloon-hud-status, body.shape-active .balloon-route,
body.shape-active .balloon-combo, body.shape-active .balloon-input-source { display: none; }

/* Picnic Panic. The park and blanket are one static CSS image; the basket and
   foods are DOM images above the avatar. Everything that moves per frame is on
   the canvases. Avoid `inset`, gap-in-flex and other features the Tizen 5
   browser lacks. */
:root { --sh-picnic: #e0662f; }
.game-card.picnic-card { --game-band: var(--sh-picnic); }
/* Five games: three across, two rows, on the TV layout. */
@media (min-width: 761px) {
  .game-library { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.picnic-active #game-shell { background-color: #8fd06a; background-image: linear-gradient(#9fd9ff, #8fd06a); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
body.picnic-active #game-shell::before { display: none; }

.picnic-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; pointer-events: none; }
.picnic-basket { position: absolute; display: block; height: auto; }
.picnic-foods img { position: absolute; display: block; height: auto; transform: translateY(-50%); transition: opacity .35s ease, transform .35s ease; }
.picnic-foods img.is-bitten { animation: picnic-chomp .35s ease-out; }
.picnic-foods img.is-gone { opacity: 0; transform: translateY(-50%) scale(.3); }
@keyframes picnic-chomp { 0% { transform: translateY(-50%) scale(1.25) rotate(-8deg); } 100% { transform: translateY(-50%) scale(1); } }

.picnic-hud { position: absolute; z-index: 10; top: 22px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.picnic-hud.is-hidden { display: none; }
.picnic-hud-pill { display: flex; align-items: center; padding: 8px 18px; color: #1f2357; background: rgba(255, 253, 247, .94); border: 3px solid #1f2357; border-radius: 999px; box-shadow: 0 5px 0 rgba(31, 35, 87, .22); }
.picnic-hud-pill small { margin-right: 10px; color: #555874; font: 900 13px/1 Figtree, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.picnic-hud-pill strong { font: 900 38px/1 Figtree, system-ui, sans-serif; letter-spacing: -.02em; }
.picnic-combo { margin-left: 14px; padding: 5px 12px; color: #fff; background: #e0662f; border-radius: 999px; font: 900 16px/1 Figtree, system-ui, sans-serif; }
.picnic-swat strong { margin-left: 16px; min-width: 46px; text-align: right; }
.picnic-swat-meter { width: 200px; height: 14px; overflow: hidden; border-radius: 8px; background: #e2e5ef; }
.picnic-swat-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ffb35c, #ffd84a); transition: width .2s linear; }
.picnic-hud.is-swat-ready .picnic-swat { border-color: #ffb800; animation: picnic-ready .45s ease-in-out infinite alternate; }
.picnic-hud.is-swat-ready .picnic-swat small { color: #b05a00; }
@keyframes picnic-ready { to { box-shadow: 0 5px 0 rgba(31, 35, 87, .22), 0 0 0 7px rgba(255, 200, 60, .55); } }
.picnic-lives img { display: block; height: 46px; margin: 0 4px; transition: opacity .3s ease; }
.picnic-lives img.is-gone { opacity: .2; }

.picnic-preview-strip span { font-size: 34px; }
.picnic-result-metrics { grid-template-columns: repeat(5, 1fr); }
.picnic-result-metrics .perfect-result strong { color: #e0662f; }
.picnic-stars { margin: 14px 0 10px; }
.picnic-stars i { display: inline-block; margin-right: 6px; color: #d6d0c7; font: normal 58px/1 system-ui, sans-serif; }
.picnic-stars i::before { content: "★"; }
.picnic-stars[data-stars="1"] i:nth-child(1), .picnic-stars[data-stars="2"] i:nth-child(-n+2), .picnic-stars[data-stars="3"] i { color: #ffc93a; animation: picnic-star .5s ease-out both; }
.picnic-stars i:nth-child(2) { animation-delay: .2s; }
.picnic-stars i:nth-child(3) { animation-delay: .4s; }
@keyframes picnic-star { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
.picnic-tally { margin: 0 0 16px; white-space: nowrap; }
.picnic-tally span { display: inline-block; width: 74px; margin-right: 6px; text-align: center; animation: picnic-tally .4s ease-out both; }
.picnic-tally img { display: block; height: 54px; margin: 0 auto 4px; }
.picnic-tally b { color: #126660; font: 900 15px/1 Figtree, system-ui, sans-serif; }
.picnic-tally .is-eaten img { opacity: .35; }
.picnic-tally .is-eaten b { color: #b52c56; }
@keyframes picnic-tally { 0% { transform: translateY(16px); opacity: 0; } 100% { transform: none; opacity: 1; } }

.workout-panel{position:absolute;inset:0;z-index:5;background:#f7efd8;color:#241936;display:grid;grid-template-rows:auto 1fr auto auto auto;gap:1vh;padding:3vh 5vw;font-family:inherit;text-align:center}.workout-panel.is-hidden{display:none}.workout-kicker{font-size:1.2vw;font-weight:900;letter-spacing:.22em;color:#6750a4}.workout-heading h1{font-size:3.2vw;margin:.2em}.workout-subtitle{margin:0;font-size:1.5vw}.workout-people{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:3vw;max-width:1100px;width:100%;justify-self:center}.workout-person{display:flex;flex-direction:column;align-items:center;min-height:0;border-radius:24px;background:#ebe1f2;padding:.5vh}.workout-person>span{font-size:1.5vw;font-weight:800}.workout-person svg{height:100%;min-height:0;width:100%;overflow:visible}.workout-person line{stroke:#685098;stroke-width:.23;stroke-linecap:round}.workout-head{fill:#685098}.workout-shadow{fill:#241936;opacity:.1}.workout-person+ .workout-person{background:#e5eed9}.workout-person+ .workout-person line{stroke:#3e6b4d}.workout-person+ .workout-person .workout-head{fill:#3e6b4d}.workout-person.is-waiting svg{opacity:.25}.workout-person.is-matching{box-shadow:inset 0 0 0 5px #4a8055}.workout-count{font-size:3.5vw;font-weight:900}.workout-message{font-size:1.8vw;margin:.25em;min-height:1.2em}.workout-next{font-size:1.2vw}.workout-progress{height:.6vh;background:#dfd3bf;border-radius:99px;overflow:hidden}.workout-progress i{display:block;width:0;height:100%;background:#685098}.workout-actions{display:flex;justify-content:center;gap:1.5vw}.workout-actions button{font:inherit;font-weight:800;border:2px solid #241936;border-radius:12px;background:#fffaf0;color:#241936;padding:1vh 3vw;font-size:1.2vw;min-height:48px}.workout-actions button[hidden]{display:none}.workout-actions button:disabled{opacity:.4}

.workout-panel .workout-heading h1{color:#241936;text-shadow:none;-webkit-text-stroke:0;letter-spacing:-.025em;line-height:1.1;transform:none;font-size:2.8vw}