/* ZZBox -- shared stylesheet for the big screen and for phones.
   Host layouts live under .host-*, device layouts under .dev-*. */

:root {
  --ink: #f4f0ff;
  --ink-dim: #b6aad6;
  --bg: #150c28;
  --bg-2: #1e1138;
  --card: rgba(255, 255, 255, .07);
  --card-solid: #251643;
  --line: rgba(255, 255, 255, .14);
  --coral: #ff6b6b;
  --gold: #ffd43b;
  --amber: #ffb84d;
  --teal: #4ecdc4;
  --violet: #b197fc;
  --green: #51cf66;
  /* Spectators / viewers — distinct from player gold selection. */
  --spectator: #38d9a9;
  --spectator-deep: #0b3d36;
  --radius: 20px;
  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* Off-screen for SEO / a11y — takes no layout space, not display:none. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  /* Solid fill behind the OS status bar / notch; body paints the game atop it. */
  background: #000;
  color-scheme: dark;
  /* min-height: 100% alone does not fill the viewport (body % then fails too),
     so short join/game screens showed bare html black under the gradient. */
  min-height: 100%;
  min-height: 100dvh;
}

html, body {
  margin: 0;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background:
    radial-gradient(1100px 700px at 12% -10%, #3a1f5d 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #123a4d 0%, transparent 55%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  background-color: var(--bg);
  overflow-x: hidden;
}

/* Ballpark gets its own room: same dark, saturated feel, but a deep teal-and-sea
   palette instead of the purple one, so the two games never look interchangeable
   on the big screen. Set as a body attribute when a game is in progress. */
body[data-game="ballpark"] {
  --bg: #071d26;
  --bg-2: #0d2b3a;
  --card-solid: #10333f;
  background:
    radial-gradient(1100px 700px at 12% -10%, #10495a 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #16456b 0%, transparent 55%),
    linear-gradient(160deg, #071d26 0%, #0d2b3a 100%);
  background-attachment: fixed;
}
body[data-game="ballpark"] .bg-blobs span:nth-child(1) { background: #2f9e8f; }
body[data-game="ballpark"] .bg-blobs span:nth-child(2) { background: #3d7fb8; }
body[data-game="ballpark"] .bg-blobs span:nth-child(3) { background: #d9a441; }

/* Slow drifting colour, kept low-contrast so it never fights the content. */
.bg-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-blobs span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .25;
  animation: drift 26s ease-in-out infinite;
}
.bg-blobs span:nth-child(1) { width: 46vmax; height: 46vmax; left: -14vmax; top: -12vmax; background: var(--coral); }
.bg-blobs span:nth-child(2) { width: 38vmax; height: 38vmax; right: -12vmax; top: 18vmax; background: var(--teal); animation-delay: -9s; }
.bg-blobs span:nth-child(3) { width: 34vmax; height: 34vmax; left: 28vmax; bottom: -16vmax; background: var(--violet); animation-delay: -17s; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vmax, 3vmax, 0) scale(1.12); }
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  /* No stacking context here — messages overlay brand/title/code, while the
     hamburger (below) keeps its own high z-index so it stays tappable. */
  position: relative;
  overflow: visible;
  --topbar-gap: 12px;
  display: flex; align-items: center; gap: var(--topbar-gap);
  /* Extend into the notch / status-bar inset so time/battery sit on solid dark,
     not on the lighter body gradient (which looked different host vs player). */
  padding: max(8px, env(safe-area-inset-top, 0px)) 14px 8px;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  /* Solid black behind the status bar / controls, then a soft fade — no seam line. */
  background: linear-gradient(
    180deg,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, .45) 82%,
    transparent 100%
  );
  border-bottom: none;
  box-shadow: none;
}
.topbar > * { position: relative; z-index: 1; }
body:has(.host-head) .topbar { padding-bottom: 4px; }

/* Zen Store: pin the hamburger bar (fixed — body overflow-x:hidden breaks sticky). */
body.zen-store-screen {
  padding-top: calc(56px + env(safe-area-inset-top, 0px));
}
body.zen-store-screen .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: #000;
  background-image: none;
}

.brand { display: block; color: var(--ink); text-decoration: none; line-height: 0; flex: 0 0 auto; }
.join-screen .brand { visibility: hidden; }
.brand .zz-mark { height: 40px; width: auto; max-width: min(42vw, 190px); display: block; object-fit: contain; }

.hamburger {
  /* Above msg toast/thread AND the drawer scrim so the menu always toggles. */
  z-index: 170;
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; align-content: center; gap: 5px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 13px; cursor: pointer; padding: 0 11px;
  /* 30% tighter to the wordmark than the default topbar gap. */
  margin-right: calc(var(--topbar-gap) * -0.3);
}
.hamburger span { display: block; height: 3px; border-radius: 3px; background: var(--ink); transition: transform .2s, opacity .2s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Game title sits between the Zenafox mark and the room code. */
.topbar-title {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2.4px 0 4px;
  /* Sit closer to the Zen chip / right cluster. */
  margin-right: calc(var(--topbar-gap) * -0.85);
}
.topbar-title[hidden] { display: none; }
/* Live typographic game titles (topbar) — not cropped card art. */
.zz-game-title-mark {
  --gt-ink: #f4f1ff;
  --gt-accent: #ffd43b;
  --gt-mid: #7ff0e4;
  --gt-stroke: rgba(8, 4, 18, .92);
  --gt-glow: rgba(255, 212, 59, .35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: min(100%, 340px);
  max-height: 52px;
  line-height: .88;
  font-family: "Baloo 2", "Nunito", "Trebuchet MS", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(.7rem, 2.15vw, .92rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.zz-gt-line {
  display: block;
  color: var(--gt-ink);
  paint-order: stroke fill;
  -webkit-text-stroke: 2.4px var(--gt-stroke);
  text-shadow:
    0 1px 0 var(--gt-stroke),
    0 0 10px var(--gt-glow);
}
.zz-gt-l2 { font-size: .72em; letter-spacing: .08em; }
.zz-gt-l3 { font-size: 1.18em; color: var(--gt-accent); }

/* Per-game accents — echo cover titles without copying the crops. */
.zz-gt-ytkm { --gt-mid: #ffd43b; --gt-accent: #ffd43b; --gt-glow: rgba(255, 212, 59, .45); }
.zz-gt-ytkm .zz-gt-l1 { color: #f4f1ff; font-size: .95em; }
.zz-gt-ytkm .zz-gt-l2 { color: var(--gt-accent); font-size: 1.28em; letter-spacing: .04em; }

.zz-gt-btb { --gt-mid: #5ce1ff; --gt-accent: #ffd166; --gt-glow: rgba(255, 209, 102, .42); }
.zz-gt-btb .zz-gt-l2 { color: var(--gt-mid); }
.zz-gt-btb .zz-gt-l3 { font-size: 1.28em; }

.zz-gt-fitf { --gt-accent: #ff8a3d; --gt-mid: #9ad0ff; --gt-glow: rgba(255, 138, 61, .38); }
.zz-gt-fitf .zz-gt-l1 { color: var(--gt-accent); font-size: 1.2em; }
.zz-gt-fitf .zz-gt-l2 { color: #fff; font-size: .62em; letter-spacing: .14em; }
.zz-gt-fitf .zz-gt-l3 { color: var(--gt-mid); font-size: 1.2em; }

.zz-gt-ttc { --gt-mid: #ff8fab; --gt-accent: #ffe066; --gt-glow: rgba(78, 205, 196, .4); }
.zz-gt-ttc .zz-gt-l1 { color: #4ecdc4; font-size: 1.1em; }
.zz-gt-ttc .zz-gt-l2 { color: var(--gt-accent); font-size: 1.25em; letter-spacing: .04em; }

.zz-gt-mayhem {
  --gt-ink: #fff;
  --gt-glow: rgba(255, 176, 32, .55);
  font-style: italic;
  letter-spacing: .05em;
  transform: rotate(-4deg);
}
.zz-gt-mayhem .zz-gt-l1,
.zz-gt-mayhem .zz-gt-l2 {
  color: #fff;
  font-size: 1.12em;
  text-shadow:
    0 0 0 #1a0a00,
    0 0 8px #ffb020,
    0 0 14px rgba(255, 176, 32, .7);
  -webkit-text-stroke: 2.6px #140800;
}
.zz-gt-mayhem .zz-gt-l2 { font-size: 1.2em; }

.zz-gt-aq { --gt-accent: #7dffa0; --gt-glow: rgba(125, 255, 160, .35); }
.zz-gt-aq .zz-gt-l1 { color: #e8ffe8; font-size: .95em; }
.zz-gt-aq .zz-gt-l2 { color: var(--gt-accent); font-size: 1.25em; letter-spacing: .06em; }

.zz-gt-pp {
  --gt-accent: #ff9ad5;
  --gt-mid: #ffd43b;
  --gt-glow: rgba(255, 154, 213, .55);
}
.zz-gt-pp .zz-gt-l1 {
  color: #fff6d0;
  font-size: 1.02em;
  letter-spacing: .09em;
}
.zz-gt-pp .zz-gt-l2 {
  color: var(--gt-accent);
  font-size: 1.36em;
  letter-spacing: .07em;
  text-shadow:
    0 1px 0 var(--gt-stroke),
    0 0 12px var(--gt-glow),
    0 0 22px rgba(196, 92, 255, .35);
}

.zz-gt-rtr { --gt-accent: #ffb84d; --gt-glow: rgba(123, 75, 196, .45); }
.zz-gt-rtr .zz-gt-l1 { color: #f3e9ff; font-size: .92em; }
.zz-gt-rtr .zz-gt-l2 { color: var(--gt-accent); font-size: 1.35em; letter-spacing: .04em; }

.zz-gt-eliminated {
  --gt-glow: rgba(120, 150, 255, .45);
}
.zz-gt-eliminated .zz-gt-l1 {
  color: #f0f4ff;
  font-size: .95em;
  text-shadow:
    0 0 10px rgba(90, 140, 255, .55),
    0 0 16px rgba(180, 90, 255, .35);
}
.zz-gt-eliminated .zz-gt-l2 {
  color: #c5d4ff;
  font-size: 1.2em;
  letter-spacing: .05em;
}

.zz-gt-pof { --gt-accent: #e8c35a; --gt-glow: rgba(232, 195, 90, .42); }
.zz-gt-pof .zz-gt-l1 { color: #f4f0e8; font-size: .95em; }
.zz-gt-pof .zz-gt-l2 { color: var(--gt-accent); font-size: 1.28em; letter-spacing: .04em; }

.zz-gt-eoe { --gt-accent: #4da3ff; --gt-glow: rgba(77, 163, 255, .45); }
.zz-gt-eoe .zz-gt-l1 { color: #ffe9a0; font-size: .92em; }
.zz-gt-eoe .zz-gt-l2 { color: var(--gt-accent); font-size: 1.28em; letter-spacing: .06em; }

.zz-gt-flf { --gt-accent: #4da3ff; --gt-glow: rgba(77, 163, 255, .45); }
.zz-gt-flf .zz-gt-l1 { color: #e8f6ff; font-size: .95em; }
.zz-gt-flf .zz-gt-l2 { color: #ff7a2a; font-size: 1.28em; letter-spacing: .06em; }

.zz-gt-ballpark {
  --gt-glow: rgba(78, 205, 196, .35);
  font-size: clamp(.82rem, 2.5vw, 1.12rem);
  letter-spacing: .05em;
}
.zz-gt-ballpark .zz-gt-l1 {
  background: linear-gradient(90deg, #4ecdc4 0%, #ffe066 48%, #ff6b9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  /* Stroke via shadow so the gradient face stays visible. */
  filter: drop-shadow(0 0 1px #0a0618) drop-shadow(0 1px 0 #0a0618);
  text-shadow: none;
  font-weight: 800;
}

.zz-gt-ttf { --gt-accent: #ffd166; --gt-glow: rgba(232, 168, 56, .45); }
.zz-gt-ttf .zz-gt-l1 { color: #fff; font-size: .95em; }
.zz-gt-ttf .zz-gt-l2 {
  color: var(--gt-accent);
  font-size: 1.4em;
  letter-spacing: .02em;
  text-transform: none;
}
.zz-gt-ttf .zz-gt-i {
  font-size: .92em;
  font-weight: 800;
}

.zz-gt-cw { --gt-accent: #e8c35a; --gt-glow: rgba(232, 195, 90, .4); }
.zz-gt-cw .zz-gt-l1 { color: #f6e7b8; font-size: .95em; }
.zz-gt-cw .zz-gt-l2 { color: var(--gt-accent); font-size: 1.3em; letter-spacing: .08em; }

.zz-gt-bb { --gt-accent: #ffd459; --gt-glow: rgba(61, 184, 168, .4); }
.zz-gt-bb .zz-gt-l1 { color: #b8dceb; font-size: .95em; }
.zz-gt-bb .zz-gt-l2 { color: var(--gt-accent); font-size: 1.3em; letter-spacing: .06em; }

.zz-gt-ff { --gt-accent: #f0c14a; --gt-glow: rgba(232, 93, 93, .35); }
.zz-gt-ff .zz-gt-l1 { color: #ffe29a; font-size: .95em; }
.zz-gt-ff .zz-gt-l2 { color: #ff6b6b; font-size: 1.28em; letter-spacing: .05em; }

/* Build or Bust — stacked like BTB / FITF: gold BUILD, small OR, red BUST. */
.zz-gt-bob { --gt-accent: #ff6b6b; --gt-mid: #ffe566; --gt-glow: rgba(255, 209, 102, .42); }
.zz-gt-bob .zz-gt-l1 { color: var(--gt-mid); font-size: 1.2em; }
.zz-gt-bob .zz-gt-l2 { color: #f4f1ff; font-size: .62em; letter-spacing: .14em; }
.zz-gt-bob .zz-gt-l3 { color: var(--gt-accent); font-size: 1.2em; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; overflow: visible; }
.topbar-right:has(.viewing-chip),
.topbar-right:has(.zen-chip) { gap: 5px; }
.zen-chip {
  /* Pill look lives on ::before — not on the <button> — because WebKit/Blink
     clip <img> children to the button's own border-radius (overflow:visible
     does not stop that). */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  flex: 0 0 auto;
  max-width: 7.5rem;
  line-height: 1;
  overflow: visible;
  font-family: inherit;
}
.zen-chip::before {
  content: "";
  position: absolute;
  /* Keep the pill behind the gem; minimal inset so facets are not covered. */
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
  pointer-events: none;
}
.zen-chip-gem-wrap {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: none;
  margin: -1px 0;
}
.zen-chip-gem {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  overflow: visible;
}
.zen-chip-amt {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: visible;
  text-overflow: ellipsis;
  transform-origin: center bottom;
  transition: color .2s ease, transform .2s ease;
}
.zen-chip-bump .zen-chip-amt {
  color: #b8f5c8;
  transform: scale(1.45);
  font-weight: 900;
}
.zen-account-math {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  align-self: stretch;
}
.zen-account-math > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}
.zen-account-math span {
  color: var(--ink-dim);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zen-account-math b {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.zen-mile-overlay {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.zen-mile-overlay.in {
  opacity: 1;
  pointer-events: auto;
}
.zen-mile-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(40, 18, 72, .55), rgba(0, 0, 0, .82));
}
.zen-mile-stage {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 20px 28px;
  max-width: min(92vw, 420px);
}
.zen-mile-kicker {
  margin: 0 0 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .78rem;
  color: #b8f5c8;
}
.zen-mile-spin {
  position: relative;
  width: min(58vw, 240px);
  height: min(58vw, 240px);
  margin: 0 auto 14px;
  perspective: 700px;
}
.zen-mile-gem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .45));
}
.zen-mile-from {
  animation: zenMileOut 1.35s ease-in forwards;
}
.zen-mile-to {
  opacity: 0;
  transform: rotateY(-90deg) scale(.55);
  animation: zenMileIn 1.55s .55s cubic-bezier(.2, .9, .2, 1.15) forwards;
}
.zen-mile-title {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: .04em;
}
.zen-mile-sub {
  margin: 0;
  color: var(--ink-dim);
  font-weight: 700;
}
@keyframes zenMileOut {
  0% { transform: rotateY(0deg) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotateY(95deg) scale(.7); opacity: 0; }
}
@keyframes zenMileIn {
  0% { transform: rotateY(-100deg) scale(.5); opacity: 0; }
  55% { opacity: 1; }
  78% { transform: rotateY(12deg) scale(1.12); opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.topbar.has-zen-chip .brand,
.topbar:has(.zen-chip) .brand {
  flex: 0 2 auto;
  min-width: 0;
  max-width: min(28vw, 130px);
}
.topbar.has-zen-chip .topbar-title,
.topbar:has(.zen-chip) .topbar-title {
  justify-content: flex-end;
  padding-right: 0;
  margin-right: -8px;
}
.topbar.has-viewing-chip.has-zen-chip .brand,
.topbar:has(.viewing-chip):has(.zen-chip) .brand {
  max-width: min(22vw, 100px);
}
/* In-game, nobody watching: keep the wordmark and let it shrink to fit. */
.topbar.has-game-title:not(.has-viewing-chip) .brand {
  flex: 0 2 auto;
  min-width: 0;
  max-width: min(42vw, 190px);
}
.topbar.has-game-title:not(.has-viewing-chip) .brand .zz-mark {
  width: auto;
  height: auto;
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.topbar.topbar-hide-brand .brand {
  display: none;
}
.topbar.topbar-hide-brand .topbar-title {
  justify-content: center;
  margin-right: 0;
}
.zen-about-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 12px;
}
.zen-about-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
}
.zen-about-panel {
  position: relative;
  z-index: 1;
  width: min(440px, 96vw);
  max-height: min(92vh, 980px);
  overflow: auto;
  padding: 8px 8px 10px;
  background: #050308;
  border: 1px solid rgba(177, 151, 252, .28);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.zen-about-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.45rem;
  cursor: pointer;
  line-height: 1;
}
.zen-about-sheet {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #000;
}
.zen-about-cta {
  margin: 8px 4px 2px;
  text-align: center;
}
.btn.zen-about-store {
  width: calc(100% - 8px);
  margin: 8px 4px 2px;
}
.zen-account-head {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.zen-account-gem {
  width: 108px;
  height: 108px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-sizing: content-box;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
  display: block;
  overflow: visible;
  background: transparent;
}
.zen-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  max-width: 100%;
  min-width: 0;
}
.zen-history-head .profile-aliases-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.pick-look-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pick-look-head h2 { margin: 0; flex: 1 1 auto; }
.pick-zen-toggle {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}
.pick-zen-toggle.active {
  background: rgba(167, 112, 255, .28);
  border-color: rgba(167, 112, 255, .55);
}
.zen-avatar-empty {
  padding: 18px 8px 8px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.btb-die-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.btb-die-opt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 52px;
  padding: 8px 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: var(--ink);
  font-weight: 800;
  font-size: .78rem;
  cursor: pointer;
}
.btb-die-opt small {
  font-size: .62rem;
  font-weight: 700;
  opacity: .75;
}
.btb-die-opt.selected {
  border-color: rgba(120, 220, 180, .7);
  background: rgba(60, 160, 120, .22);
}
.btb-die-opt.locked {
  opacity: .72;
}
.btb-die-lock { font-size: .7rem; line-height: 1; }
.zen-store-card { max-width: 640px; margin: 0 auto; }
.zen-store-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.zen-store-bal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  min-width: 72px;
}
.zen-store-bal img { width: 48px; height: 48px; object-fit: contain; }
.zen-store-bal b { font-size: 1.1rem; }
.zen-store-bal span { font-size: .7rem; opacity: .75; font-weight: 700; }
.zen-store-sec { margin-top: 18px; }
.zen-store-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.zen-store-sec-head:focus-visible {
  outline: 2px solid rgba(255, 212, 59, .55);
  outline-offset: 3px;
  border-radius: 8px;
}
.zen-store-pm {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}
.zen-store-sec-head h2 {
  margin: 0;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.zen-store-sec:not(.open) .zen-store-sec-head { margin-bottom: 0; }
.zen-store-sec:not(.open) .zen-store-sec-body { display: none; }
.zen-store-group {
  margin: 2px 0 8px;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
}
.zen-store-sec-body .zen-store-group:first-child { margin-top: 0; }
.zen-store-soon {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px dashed rgba(255,255,255,.14);
}
.zen-store-grid {
  display: grid;
  gap: 5px;
}
.zen-store-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.1);
}
.zen-store-item.owned { opacity: .92; }
.zen-store-item.playable { cursor: pointer; }
.zen-store-item.playable:hover,
.zen-store-item.playable:focus-visible {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
.zen-store-face .avatar,
.zen-store-face { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; }
.zen-store-face img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.zen-store-face.celeb {
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  background: rgba(255,255,255,.06);
}
.zen-store-die {
  width: 48px; height: 48px;
  position: relative;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.zen-store-die .btb-die-shape {
  position: absolute;
  inset: 4px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.zen-store-item-body h3 {
  margin: 0;
  font-size: .95rem;
}
.zen-store-item-body p { margin: 2px 0 0; font-size: .78rem; }
.btn.zen-store-buy {
  width: auto;
  min-width: 0;
  padding: 5px 10px;
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1.15;
  white-space: nowrap;
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}
.btn.zen-store-buy:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .28);
}
.btn.ghost.zen-store-buy {
  padding: 5px 10px;
  box-shadow: none;
}
.zen-store-owned {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
}
.zen-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-height: 240px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.zen-ledger-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .08);
}
.zen-ledger-delta {
  font-weight: 800;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  min-width: 2.8em;
}
.zen-ledger-delta.spend { color: var(--coral); }
.zen-ledger-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: .92rem;
}
.zen-ledger-reason {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zen-ledger-when {
  flex: 0 0 auto;
  color: var(--ink-dim);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Viewing chip present: reclaim horizontal room. If the game title still
   clips, JS hides the Zenafox logo (.topbar-hide-brand). */
.topbar.has-viewing-chip,
.topbar:has(.viewing-chip) { --topbar-gap: 6px; gap: 6px; }
.topbar.has-viewing-chip .brand,
.topbar:has(.viewing-chip) .brand {
  flex: 0 2 auto;
  min-width: 0;
  max-width: min(26vw, 118px);
  margin-left: -8px;
}
.topbar.has-viewing-chip .brand .zz-mark,
.topbar:has(.viewing-chip) .brand .zz-mark {
  height: 30px;
  max-width: 100%;
}
.topbar.has-viewing-chip .topbar-title,
.topbar:has(.viewing-chip) .topbar-title {
  padding: 0;
}
.topbar.has-viewing-chip .zz-game-title-mark,
.topbar:has(.viewing-chip) .zz-game-title-mark {
  width: auto;
  max-width: 100%;
  max-height: 64px;
  font-size: clamp(.9rem, 3.43vw, 1.25rem);
  letter-spacing: .02em;
  -webkit-text-stroke-width: 2px;
}
.topbar.has-viewing-chip.topbar-hide-brand .topbar-title,
.topbar:has(.viewing-chip).topbar-hide-brand .topbar-title {
  overflow: hidden;
}
.topbar.has-viewing-chip .viewing-chip,
.topbar:has(.viewing-chip) .viewing-chip {
  padding: 6px 8px;
  font-size: .74rem;
}
.topbar.has-viewing-chip .code-chip,
.topbar:has(.viewing-chip) .code-chip {
  padding: 4px 8px;
  font-size: 1.1rem;
}

.code-chip {
  font-weight: 800; letter-spacing: .14em; font-size: 1.2rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px;
  color: inherit; font-family: inherit; line-height: 1;
  cursor: pointer;
}
.code-chip:hover {
  border-color: var(--gold, #ffd166);
  background: rgba(255, 209, 102, .12);
}
.viewing-chip {
  font-weight: 800; font-size: .82rem; letter-spacing: .04em;
  color: var(--spectator);
  background: rgba(56, 217, 169, .14);
  border: 1px solid rgba(56, 217, 169, .45);
  border-radius: 999px; padding: 7px 12px;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.viewing-chip:hover {
  background: rgba(56, 217, 169, .22);
  border-color: var(--spectator);
}
.viewing-popup-backdrop,
.seat-menu-backdrop,
.invite-watch-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 12, 20, .55);
  display: grid; place-items: center;
  padding: 20px;
}
.viewing-popup,
.seat-menu,
.invite-watch-popup {
  width: min(360px, 100%);
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 18px 16px;
}
.invite-watch-popup {
  width: min(400px, 100%);
  text-align: center;
  position: relative;
}
.invite-watch-head {
  display: flex;
  justify-content: flex-end;
  margin: -4px -4px 0 0;
}
.invite-watch-close { width: 36px; height: 36px; font-size: 1.4rem; }
.invite-watch-msg {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--spectator, #38d9a9);
}
.invite-watch-popup .invite-watch-code {
  font-size: clamp(2.8rem, 12vw, 4.5rem);
  margin: 4px 0 16px;
}
.invite-watch-popup .share-row {
  justify-content: center;
}
.invite-watch-popup .share-url {
  margin-top: 10px;
  word-break: break-all;
  font-size: .82rem;
  opacity: .85;
}
.host-exit-backdrop {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(8, 12, 20, .6);
  display: grid; place-items: center;
  padding: 20px;
}
.host-exit-popup {
  width: min(400px, 100%);
  text-align: center;
  padding: 22px 18px 18px;
}
.host-exit-popup h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}
.host-exit-msg {
  margin: 0 0 18px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-dim);
}
.host-exit-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.host-exit-actions .btn { width: 100%; }
.save-stats-backdrop .host-exit-popup { width: min(420px, 100%); }
.save-stats-backdrop .btn-account-cta { width: 100%; }
.viewing-popup-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.viewing-popup-head h3 { margin: 0; font-size: 1.1rem; }
.viewing-popup-close { width: 36px; height: 36px; font-size: 1.4rem; }
.viewing-list { display: grid; gap: 8px; }
.viewing-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(56, 217, 169, .08);
  border: 1px solid rgba(56, 217, 169, .28);
  border-radius: 14px;
}
.viewing-row.offline { opacity: .5; }
.viewing-row .name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewing-kick {
  flex: 0 0 auto;
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 107, 107, .55);
  background: rgba(255, 107, 107, .14);
  color: var(--coral, #ff6b6b);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.viewing-kick:hover {
  background: rgba(255, 107, 107, .28);
  border-color: var(--coral, #ff6b6b);
}
.viewing-kick:active { transform: scale(.94); }
.viewing-kick:disabled { opacity: .45; cursor: default; }
.seat-menu-name {
  margin: 0; font-weight: 800; font-size: 1.15rem; text-align: center;
}
.seat-menu-sub { margin: 4px 0 14px; text-align: center; font-size: .88rem; }
.seat-menu-actions { display: grid; gap: 8px; }
.seat-menu-remove { color: var(--coral); border-color: rgba(255, 107, 107, .45); }
.lobby-watching {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(56, 217, 169, .35);
}
.lobby-watching-label {
  margin: 0 0 10px;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--spectator);
  font-weight: 800;
}
.lobby-watching-roster .roster-item.is-watcher,
.shared-chip.is-watcher {
  border-color: rgba(56, 217, 169, .45);
  background: rgba(56, 217, 169, .08);
}
.roster-item.is-watcher.host-kickable:hover,
.shared-chip.is-watcher.host-kickable:hover {
  border-color: var(--spectator);
  background: rgba(56, 217, 169, .16);
}
.lobby-participants { margin: 0 0 4px; }
.lobby-participants-label {
  margin: 0 0 8px;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold, #ffd166);
  font-weight: 800;
  text-align: center;
}
.spectator-lobby-note { color: var(--spectator); font-weight: 700; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
}
.icon-btn[aria-pressed="false"] { opacity: .45; }

/* ------------------------------------------------------------------ drawer */

/* Dropdown under the hamburger — not a full-height side sheet. */
.drawer {
  /* Above messages / topbar chrome; hamburger stays higher so it can close. */
  position: fixed; inset: 0; z-index: 160;
  pointer-events: none;
}
.drawer-scrim {
  position: absolute; inset: 0; pointer-events: auto;
  background: rgba(8, 4, 18, .35);
  animation: fade .15s ease;
}
.drawer-panel {
  position: absolute;
  top: calc(max(8px, env(safe-area-inset-top, 0px)) + 50px);
  left: 14px;
  bottom: auto;
  width: min(300px, calc(100vw - 28px));
  max-height: min(72vh, calc(100dvh - max(8px, env(safe-area-inset-top, 0px)) - 66px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  background: linear-gradient(170deg, #2a1750, #1a1030);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px 12px;
  z-index: 1;
  animation: menuDrop .2s cubic-bezier(.2, 1.1, .3, 1);
  display: flex; flex-direction: column; gap: 8px;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 2px; min-height: 28px;
}
.drawer-panel h2,
.drawer-head h2 {
  margin: 0; font-size: .9rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim);
}
.drawer-account-btn {
  flex: 0 0 auto; margin: 0; cursor: pointer; font: inherit;
  font-size: .68rem; font-weight: 900; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--green);
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(81, 207, 102, .55);
  background: rgba(81, 207, 102, .18);
}
.drawer-account-btn:hover,
.drawer-account-btn:focus-visible {
  background: rgba(81, 207, 102, .28);
  outline: none;
}
.drawer-account-btn:active { transform: scale(.97); }
.drawer-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  width: 100%; box-sizing: border-box;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  border-radius: 14px; padding: 11px 12px; cursor: pointer; font: inherit;
  text-decoration: none;
}
.drawer-item[hidden] { display: none; }
a.drawer-item:hover { color: var(--ink); }
.drawer-item:hover { background: rgba(255, 255, 255, .13); }
.drawer-item strong { display: block; font-size: 1rem; }
.drawer-item small { display: block; color: var(--ink-dim); font-size: .8rem; margin-top: 2px; }
.drawer-icon { font-size: 1.2rem; width: 30px; text-align: center; flex: 0 0 auto; }
.drawer-room-actions {
  display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid var(--line); margin: 0 0 8px; padding: 0 0 8px;
  width: 100%;
}
.drawer-item.danger { border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .10); }
.drawer-item.danger .drawer-icon,
.drawer-item.danger strong { color: var(--coral); }
.drawer-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px; padding: 10px 6px 2px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim); font-size: .75rem;
}
.drawer-legal-link {
  border: 0; background: none; padding: 0; margin: 0;
  color: var(--ink-dim); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.drawer-legal-link:hover { color: var(--teal); }
.drawer-refresh-btn {
  appearance: none;
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid rgba(125, 255, 160, .45);
  background: rgba(125, 255, 160, .08);
  color: #b8f5c8;
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit; font-weight: 800; font-size: .78rem;
  letter-spacing: .02em; cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.drawer-refresh-btn:hover {
  border-color: rgba(125, 255, 160, .7);
  background: rgba(125, 255, 160, .16);
  color: #d6ffe0;
}
.drawer-refresh-btn.refresh-flash,
.drawer-refresh-btn:active {
  color: #0b3d2a;
  background: #9ef0b5;
  border-color: #9ef0b5;
  box-shadow: 0 0 0 2px rgba(158, 240, 181, .35);
}

@keyframes menuDrop {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------- app / cards */

.app { position: relative; z-index: 2; padding: 4px 16px calc(28px + var(--safe-b)); }
/* Host Pause / Continue: ~half the gap under the topbar, matched below the row. */
.app:has(.host-head) { padding-top: 2px; }

.wrap { max-width: 460px; margin: 0 auto; }
.wrap-wide { max-width: 1500px; margin: 0 auto; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

h1 { font-size: 1.9rem; margin: 0 0 6px; letter-spacing: -.5px; }
h2 { font-size: 1.25rem; margin: 0 0 8px; }
p.lede { color: var(--ink-dim); margin: 0 0 18px; line-height: 1.5; }

label.field { display: block; margin-bottom: 14px; }
label.field[hidden] { display: none; }
label.field span {
  display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 6px; font-weight: 700;
}
.field.fixed-length {
  margin: 20px 0 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 14px; background: rgba(0, 0, 0, .18);
}
.field.fixed-length span {
  display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 4px; font-weight: 700;
}
.field.fixed-length b { display: block; color: var(--ink); }

/* Include input:not([type]) — bare <input> defaults to text in the DOM, but
   CSS [type="text"] only matches when the attribute is actually present.
   textarea is listed here too — game clue/feedback boxes are not always
   wrapped in label.field, and unstyled textareas default to white. */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
label.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
label.field textarea,
textarea,
select {
  width: 100%; font: inherit; color: var(--ink);
  background: rgba(0, 0, 0, .28); border: 2px solid var(--line);
  border-radius: 14px; padding: 14px 16px; font-size: 1.05rem;
  /* Tells the browser to draw its own widgets (dropdown list, autofill, date
     pickers) dark. Without it the native option list is white with our pale
     text on it, which is unreadable. */
  color-scheme: dark;
  box-sizing: border-box;
}
input:not([type]):focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
label.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
label.field textarea:focus,
textarea:focus,
select:focus { outline: none; border-color: var(--teal); }

/* Belt and braces for the dropdown: some browsers render <option> with the OS
   palette regardless of color-scheme, so set both explicitly. Literal colours,
   not variables -- option rendering does not reliably resolve custom properties. */
select option,
select optgroup {
  background-color: #251643;
  color: #f4f0ff;
}

::placeholder { color: #9c8fc0; opacity: 1; }

/* Chrome's autofill forces a near-white background; this keeps it dark. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f0ff;
  -webkit-box-shadow: 0 0 0 1000px #1d1136 inset;
  caret-color: #f4f0ff;
}

/* "taken" sat as pale text straight on the artwork; give it something to sit on. */
.avatar-pick[disabled]::after {
  background: rgba(10, 6, 20, .8);
  padding: 2px 0;
}
input.code-input { text-transform: uppercase; letter-spacing: .5em; font-weight: 800; font-size: 1.7rem; text-align: center; padding-left: .5em; }

.btn {
  display: block; width: 100%; font: inherit; font-weight: 800; font-size: 1.1rem;
  color: #1a1226; background: linear-gradient(135deg, var(--gold), var(--coral));
  border: none; border-radius: 16px; padding: 16px; cursor: pointer;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .28); transition: transform .08s, box-shadow .08s;
  text-align: center; text-decoration: none; box-sizing: border-box;
}
.btn:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0, 0, 0, .28); }
/* display:block above outranks the UA [hidden] rule, so el.hidden = true did
   nothing on buttons. */
.btn[hidden] { display: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-size: 1rem; }
.btn.ghost { background: transparent; color: var(--ink-dim); border: 1px dashed var(--line); box-shadow: none; font-size: .95rem; padding: 12px; }
.btn.ghost.copied,
.btn.secondary.copied {
  border-style: solid; border-color: var(--green); color: var(--green);
  background: rgba(81, 207, 102, .12);
}
.btn.inline { display: inline-block; width: auto; padding: 12px 22px; }
/* Header buttons size to their label instead of eating the title column. */
.host-head .btn { flex: 0 0 auto; width: auto; }
/* Subtitles under the main label — without this, "STORY CARD" + small
   collapses into one unbroken line (STORY CARDOne picture…). */
.btn small {
  display: block; font-weight: 700; font-size: .76rem; opacity: .75; margin-top: 2px;
}
.btn.inline small,
.host-head .btn small,
#sharedSkip small {
  font-size: .72rem; opacity: .8;
}

.want-skip-btn { width: 100%; margin-top: 10px; }
.solo-host-skip { margin-top: 5px; margin-bottom: 5px; }
.want-skip-btn.notified {
  opacity: .72; cursor: default;
  background: rgba(255,255,255,.12);
  box-shadow: none;
}

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

.muted { color: var(--ink-dim); }
.center { text-align: center; }

.toast {
  position: fixed;
  left: 12px; right: 12px; bottom: calc(22px + var(--safe-b));
  top: auto;
  width: fit-content; max-width: calc(100vw - 24px);
  margin: 0 auto; box-sizing: border-box;
  background: #2b1444; color: var(--ink); border: 1px solid var(--gold);
  padding: 12px 22px; border-radius: 14px; z-index: 120;
  box-shadow: var(--shadow); font-weight: 600; text-align: center;
  overflow-wrap: anywhere; white-space: normal;
  animation: fade .15s ease;
  transform: none;
}
.toast.toast-center {
  top: 50%;
  bottom: auto;
  left: 50%;
  right: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  max-width: min(520px, calc(100vw - 32px));
  padding: 18px 26px;
}
.toast.toast-grand {
  border-width: 2px;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: min(320px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 24px));
}
.toast-grand-title {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
.toast-grand-sub {
  font-size: 0.98rem;
  line-height: 1.35;
  font-weight: 650;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* ----------------------------------------------------------- room messages */

.msg-toast {
  position: fixed;
  /* Align with the hamburger row; clear the icon on the left. */
  top: max(8px, env(safe-area-inset-top, 0px));
  left: calc(14px + 44px + 10px);
  right: 14px;
  bottom: auto;
  width: fit-content;
  max-width: calc(100vw - 14px - 44px - 10px - 14px);
  margin: 0;
  box-sizing: border-box;
  background: #1a2e22; color: var(--ink); border: 2px solid var(--green);
  padding: 8px 12px; border-radius: 14px;
  /* Above brand / game title / code; below hamburger (170). */
  z-index: 100;
  box-shadow: var(--shadow); animation: fade .15s ease;
  pointer-events: none;
}
.msg-toast-host {
  top: calc(max(8px, env(safe-area-inset-top, 0px)) + 72px);
  background: #2a2210;
  border-color: var(--gold);
}
.msg-toast-host .msg-toast-body b { color: var(--gold); }
body:has(#msgToast) .msg-toast-host {
  top: calc(max(8px, env(safe-area-inset-top, 0px)) + 72px);
}
body:not(:has(#msgToast)) .msg-toast-host {
  top: max(8px, env(safe-area-inset-top, 0px));
}
.msg-toast-inner {
  display: flex; align-items: center; gap: 10px; text-align: left;
  pointer-events: none;
}
.msg-toast-body { display: grid; gap: 2px; min-width: 0; }
.msg-toast-body b { font-size: .82rem; color: var(--green); }
.msg-toast-body span {
  font-weight: 700; font-size: .95rem; overflow-wrap: anywhere;
}

.msg-compose {
  position: fixed; left: 12px; right: 12px; z-index: 150;
  margin: 0 auto; width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}
.msg-compose-dock { bottom: calc(18px + var(--safe-b)); }
.msg-compose-pause {
  /* Sit just above the docked pause card / centered hold card. */
  bottom: calc(168px + var(--safe-b));
}
.hold-over:not(.hold-over-dock) ~ .msg-compose-pause,
body:has(.hold-over:not(.hold-over-dock)) .msg-compose-pause {
  bottom: calc(42vh);
}
.msg-compose-card {
  pointer-events: auto;
  background: linear-gradient(170deg, #2a1750, #1a1030);
  border: 2px solid var(--line); border-radius: 18px;
  padding: 14px 14px 12px; box-shadow: var(--shadow);
  animation: pop .28s cubic-bezier(.2, 1.3, .4, 1) both;
}
.msg-compose-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.msg-compose-head strong {
  font-size: .95rem; flex: 0 1 auto; min-width: 0;
  white-space: nowrap;
}
.msg-compose-close {
  appearance: none; border: 0; background: rgba(255,255,255,.08);
  color: var(--ink); width: 32px; height: 32px; border-radius: 10px;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  flex: 0 0 auto; margin-left: auto;
}
.msg-compose-to {
  display: flex; flex-wrap: nowrap; gap: 6px; flex: 1 1 auto;
  justify-content: flex-end; min-width: 0;
}
.msg-to-btn {
  appearance: none; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  color: var(--ink); border-radius: 999px; padding: 5px 10px;
  font: inherit; font-weight: 800; font-size: .78rem; cursor: pointer;
  white-space: nowrap;
}
.msg-to-btn.on {
  border-color: var(--teal); background: rgba(78, 205, 196, .16); color: var(--teal);
}
.msg-compose-pick { margin: 0 0 8px; max-height: 140px; overflow: auto; }
.msg-pick-list { display: grid; gap: 6px; }
.msg-pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  appearance: none; border: 1px solid var(--line); background: rgba(255,255,255,.05);
  color: var(--ink); border-radius: 12px; padding: 8px 10px;
  font: inherit; font-weight: 700; cursor: pointer; text-align: left;
}
.msg-pick-row.on { border-color: var(--teal); background: rgba(78, 205, 196, .14); }
.msg-compose-field {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(0,0,0,.25);
  padding: 8px 10px; margin: 0 0 8px;
  box-sizing: border-box;
}
.msg-compose-field:focus-within { border-color: var(--teal); }
.msg-compose-emoji-preview {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35em; min-height: 1.35em;
  margin-top: 2px; color: var(--ink);
  font-size: 1.25rem; line-height: 1;
}
.msg-compose-emoji-preview[hidden] { display: none !important; }
.msg-compose-emoji-preview .msg-emoji-svg {
  width: 1.3em; height: 1.3em; display: block;
}
.msg-compose-text {
  flex: 1 1 auto; width: auto; min-width: 0; resize: none; box-sizing: border-box;
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; font-weight: 600; padding: 2px 0; margin: 0;
}
.msg-compose-text:focus { outline: none; border-color: transparent; }
.msg-compose-emojis {
  display: flex; justify-content: space-between; gap: 6px; margin: 0 0 10px;
}
.msg-emoji-btn {
  flex: 1; appearance: none; border: 1px solid var(--line);
  background: rgba(255,255,255,.06); border-radius: 12px;
  font-size: 1.35rem; line-height: 1; padding: 5px 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.msg-emoji-btn .msg-emoji-svg {
  width: 1.35em; height: 1.35em; display: block;
}
.msg-emoji-inline {
  display: inline-flex; align-items: center; vertical-align: -0.15em;
  margin-right: 0.15em;
}
.msg-emoji-inline .msg-emoji-svg {
  width: 1.15em; height: 1.15em; display: block;
}
/* Fixed asset — do not filter system emoji (mobile/desktop disagree). */
.msg-emoji-gotta {
  width: 1.45em; height: 1.45em; display: block;
  object-fit: contain; flex: 0 0 auto;
}
.msg-emoji-btn .msg-emoji-gotta {
  width: 1.65em; height: 1.65em;
}
.msg-compose-emoji-preview .msg-emoji-gotta {
  width: 1.55em; height: 1.55em;
}
.msg-toast-text { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.msg-bubble-text .msg-emoji-inline,
.msg-toast-text .msg-emoji-inline { color: inherit; }
.msg-emoji-btn.on {
  border-color: var(--gold); background: rgba(255, 212, 59, .14);
  box-shadow: 0 0 0 1px rgba(255, 212, 59, .35);
}
.msg-compose-send { width: 100%; }

.msg-pause-thread {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  margin: 0;
  width: auto;
  max-width: none;
  max-height: min(36vh, 300px);
  display: flex; flex-direction: column;
  background: rgba(18, 10, 34, .92); border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 10px 8px;
  box-shadow: var(--shadow);
  /* Above brand / game title / code; below hamburger (170). */
  z-index: 100; pointer-events: auto;
}
.msg-pause-stack {
  position: fixed;
  left: 12px;
  right: 12px;
  top: calc(10px + env(safe-area-inset-top, 0px));
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.msg-pause-stack > .msg-pause-thread { pointer-events: auto; }
.msg-host-thread {
  background: rgba(36, 28, 12, .94);
  border-color: rgba(255, 212, 59, .55);
}
.msg-host-thread .msg-pause-title { color: var(--gold); }
.msg-bubble-tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; opacity: .8; margin-bottom: 2px;
  color: var(--gold);
}
.msg-pause-thread.collapsed {
  max-height: none;
  padding: 6px 10px;
}
.msg-pause-head {
  display: flex; align-items: center; gap: 8px;
  /* Keep title controls clear of the hamburger; bubbles below go edge-to-edge. */
  margin: 0 0 8px;
  padding: 0 2px 0 calc(44px + 2px);
  font-weight: 900; font-size: .9rem; letter-spacing: .02em;
  min-width: 0;
}
.msg-pause-thread.collapsed .msg-pause-head {
  margin-bottom: 0;
}
.msg-pause-toggle {
  flex: 0 0 auto;
  width: 28px; height: 28px; padding: 0;
  appearance: none; border: 1px solid var(--line);
  background: rgba(255,255,255,.08); color: var(--ink);
  border-radius: 8px; font: inherit; font-size: 1.15rem; font-weight: 900;
  line-height: 1; cursor: pointer;
}
.msg-pause-toggle:hover { background: rgba(255,255,255,.14); }
.msg-pause-title { flex: 0 0 auto; }
.msg-pause-preview-wrap {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
}
.msg-pause-preview-wrap .avatar.sm {
  width: 24px; height: 24px; flex: 0 0 24px;
}
.msg-pause-preview {
  flex: 1 1 auto; min-width: 0;
  font-weight: 700; font-size: .88rem; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.msg-pause-preview .msg-emoji-inline { flex: 0 0 auto; color: var(--ink); }
.msg-pause-reply {
  appearance: none; border: 1px solid var(--teal);
  background: rgba(78, 205, 196, .14); color: var(--teal);
  border-radius: 999px; padding: 5px 12px;
  font: inherit; font-weight: 800; font-size: .82rem; cursor: pointer;
  flex: 0 0 auto; margin-left: auto;
}
.msg-pause-list {
  overflow: auto; display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
  /* Use the full panel width (header alone stays indented for the menu). */
  margin: 0 -10px;
  padding: 0 10px 2px;
}
.msg-bubble-row {
  display: flex; align-items: flex-end; gap: 8px;
  /* Wide bubbles wrap less and use less vertical space. */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.msg-bubble-row.mine { align-self: stretch; flex-direction: row; justify-content: flex-end; }
.msg-bubble-row.theirs { align-self: stretch; justify-content: flex-start; }
.msg-bubble {
  border-radius: 14px; padding: 8px 11px;
  max-width: calc(100% - 36px);
  flex: 1 1 auto;
  min-width: 0;
}
.msg-bubble-row.mine .msg-bubble { flex: 0 1 auto; }
.msg-bubble-row.theirs .msg-bubble { flex: 0 1 auto; }
.msg-bubble-row.mine .msg-bubble {
  background: #1a5c32; color: #fff;
  border-bottom-right-radius: 5px;
}
.msg-bubble-row.theirs .msg-bubble {
  background: #3a3a44; color: #fff;
  border-bottom-left-radius: 5px;
}
.msg-bubble-name {
  font-size: .72rem; font-weight: 800; opacity: .85; margin-bottom: 2px;
}
.msg-bubble-text {
  font-weight: 700; font-size: .92rem; line-height: 1.35;
  overflow-wrap: anywhere;
}
.msg-pause-thread .avatar.sm,
.msg-toast .avatar.sm,
.msg-pick-row .avatar.sm {
  width: 28px; height: 28px; flex: 0 0 28px;
}

/* ------------------------------------------------------------------ timers */

/* Device: a hairline under the header. Costs almost no screen height. */
.timer-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.timer-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width .25s linear; }
.timer-bar.warn i { background: linear-gradient(90deg, var(--gold), var(--coral)); }
.timer-bar.crit i { background: var(--coral); animation: pulse .55s ease-in-out infinite; }

.timer-inline { display: flex; align-items: center; gap: 8px; }
.timer-inline b { font-variant-numeric: tabular-nums; font-size: .95rem; min-width: 2.2em; text-align: right; }
.timer-inline .timer-bar { flex: 1; }
/* Invisible twin — reserves height so BTB layout does not jump when the bar mounts. */
.timer-inline.timer-slot-empty { visibility: hidden; pointer-events: none; }

.timer-wrap { position: relative; min-width: 0; overflow: visible; }
.timer-extend-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.timer-wrap:has(.timer-slot-empty) .timer-extend-layer { display: none; }
.timer-extend-msg {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .75);
  white-space: nowrap;
  pointer-events: none;
}
.timer-extend-msg:not([hidden]) {
  display: block;
  background: rgba(8, 6, 18, .92);
  border: 1px solid rgba(81, 207, 102, .45);
  border-radius: 999px;
  padding: 5px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.timer-extend-msg.is-on { animation: timerExtendFade 3s ease forwards; }
@keyframes timerExtendFade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}
.timer-extend-btn {
  pointer-events: auto;
  position: absolute;
  right: calc(2.2em + 8px);
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  padding: 3px 9px;
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1a1028;
  background: var(--gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.timer-extend-btn.ok {
  background: var(--green);
  color: #06210f;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Host: a ring, readable from across a conference room. */
.timer-ring { position: relative; width: 96px; height: 96px; flex: 0 0 96px; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.timer-ring .track { stroke: rgba(255, 255, 255, .12); }
.timer-ring .value { stroke: var(--teal); transition: stroke-dashoffset .25s linear, stroke .3s; }
.timer-ring.warn .value { stroke: var(--gold); }
.timer-ring.crit .value { stroke: var(--coral); }
.timer-ring b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.timer-ring.crit b { animation: pulse .55s ease-in-out infinite; }

/* ----------------------------------------------------------------- avatars */

/* Sprite sheet. --avatar-cols / --avatar-rows come from catalog via art.js.
   Percent background-position is (container - image) * pct — so for an N-wide
   sheet the Nth cell is at 100%, not at -(N-1)*100%. */
.zz-avatar-face {
  display: block; width: 100%; height: 100%;
  background-image: url(img/avatars/cast.png?v=20260812zen2);
  background-repeat: no-repeat;
  background-size:
    calc(var(--avatar-cols, 5) * 100%)
    calc(var(--avatar-rows, 7) * 100%);
  background-position:
    calc(var(--col, 0) * 100% / max(var(--avatar-cols, 5) - 1, 1))
    calc(var(--row, 0) * 100% / max(var(--avatar-rows, 7) - 1, 1));
}
.avatar {
  width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  background: rgba(0, 0, 0, .25); flex: 0 0 auto;
}
.avatar.sm { width: 40px; height: 40px; border-radius: 10px; }
.avatar.lg { width: 108px; height: 108px; border-radius: 20px; }
.avatar.spectator {
  box-shadow: 0 0 0 3px var(--spectator), 0 0 0 6px rgba(56, 217, 169, .22);
  background: linear-gradient(165deg, rgba(56, 217, 169, .28), rgba(11, 61, 54, .55));
}
.avatar.spectator.sm {
  box-shadow: 0 0 0 2px var(--spectator), 0 0 0 4px rgba(56, 217, 169, .2);
}

.avatar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.avatar-season-label {
  grid-column: 1 / -1; margin: 8px 0 2px; font-size: .82rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--amber);
  text-align: center;
}
.avatar-pick {
  padding: 0; border: 3px solid transparent; background: rgba(255, 255, 255, .06);
  border-radius: 14px; cursor: pointer; aspect-ratio: 1; overflow: hidden; position: relative;
}
.avatar-pick.selected { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 212, 59, .22); }
.avatar-pick[disabled] { opacity: .22; cursor: not-allowed; }
.avatar-pick[disabled]::after {
  content: "taken"; position: absolute; inset: auto 0 6px; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}

.pick-card.spectator-pick {
  border-color: rgba(56, 217, 169, .55);
  background: linear-gradient(170deg, #12352f, #0d1f2a 55%, #1a1030);
  box-shadow: 0 0 0 1px rgba(56, 217, 169, .2), var(--shadow);
}
.spectator-pick-kicker {
  margin: 0 0 4px; text-align: center;
  font-size: .78rem; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; color: var(--spectator);
}
.spectator-pick-note { margin: 0 0 12px; }
.pick-card.spectator-pick .avatar-pick.selected {
  border-color: var(--spectator);
  box-shadow: 0 0 0 4px rgba(56, 217, 169, .28);
}
.pick-card.spectator-pick h2 { color: #e6fff6; }
.dev-avatar-edit.spectator {
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--spectator);
}
.spectator-watching-badge {
  display: inline-flex; align-items: center;
  font-size: .68rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(56, 217, 169, .18); color: var(--spectator);
  border: 1px solid rgba(56, 217, 169, .4);
  border-radius: 999px; padding: 4px 9px;
}

/* ------------------------------------------------------------- join screen */

.hero { text-align: center; padding: 14.4px 0 8px; }
.hero .zz-logo { height: 76px; width: auto; margin: 0 auto; display: block; }
/* Visible SEO H1 under the wordmark — keep the logo as the visual hero. */
.hero h1 {
  color: var(--ink);
  margin: 12px 0 0;
  font-size: 1.035rem;
  font-weight: 800;
  letter-spacing: normal;
  line-height: 1.3;
}
.join-seo-blurb {
  color: var(--ink-dim);
  margin: 12px 0 0;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.45;
  text-align: center;
}
.join-how-link {
  display: block;
  margin: 4px 0 0;
  text-align: center;
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
}
.join-how-link:hover { text-decoration: underline; }
.join-screen #hostLink,
.join-screen .join-host-btn {
  background: rgba(124, 108, 240, .22);
  color: var(--ink);
  border: 1px solid rgba(124, 108, 240, .48);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .92rem;
}
.join-screen #hostLink:hover,
.join-screen .join-host-btn:hover {
  background: rgba(124, 108, 240, .3);
  color: var(--ink);
}
.join-screen .wrap > .card {
  padding-bottom: 10px;
}
.host-custom-code-hint {
  margin: 12px 0 0;
  font-size: .92rem;
}
.join-game-index {
  margin-top: 28px;
}
.join-game-index > h2 {
  font-size: 1.05rem;
  text-align: center;
  margin: 0 0 12px;
}
.join-game-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}
.join-game-carousel .games-hub-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  width: 100%;
  will-change: transform;
}
.join-game-carousel .games-hub-item {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 40px;
}
.join-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(21, 12, 40, .72);
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.join-carousel-btn:hover,
.join-carousel-btn:focus-visible {
  border-color: rgba(212, 175, 55, .55);
  background: rgba(21, 12, 40, .9);
}
.join-carousel-prev { left: 0; }
.join-carousel-next { right: 0; }
@media (prefers-reduced-motion: reduce) {
  .join-game-carousel .games-hub-list {
    transition: none !important;
  }
}
.picker-game-pages {
  margin: 28px 0 8px;
  text-align: center;
}
.picker-game-pages h2 {
  font-size: 1.05rem;
  margin: 0 0 12px;
}
.picker-game-page-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.picker-game-page-links a {
  color: var(--gold);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
}
.picker-game-page-links a:hover { text-decoration: underline; }

.pill-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 16px 0 4px; }
.pill { font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-dim); }

/* --------------------------------------------------------------- host: menu */

/* Always two across so the picker stays a compact board, not a tall scroll
   of full-width tiles. Cards shrink with the viewport; minmax(0, 1fr) lets
   the art and text compress instead of overflowing the row. */
.game-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 16px); align-items: stretch;
}
.game-card {
  position: relative;
  display: flex; flex-direction: column;
  text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  min-width: 0; background: var(--card-solid); border: 1px solid var(--line);
  border-radius: clamp(14px, 3vw, 20px); color: var(--ink); box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
.game-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0, 0, 0, .45); }
.game-card.disabled,
.game-card[aria-disabled="true"] {
  opacity: .55; cursor: default;
}
.game-card.disabled:hover,
.game-card[aria-disabled="true"]:hover {
  transform: none; box-shadow: var(--shadow);
}
.game-card .zz-game-art {
  display: block; width: 100%; height: auto;
  /* Full art, never cropped -- square sources stay square. */
  object-fit: contain; background: #0d0a14;
}
.zz-game-art-wrap {
  position: relative;
  display: block;
  width: 100%;
  background: #0d0a14;
}
.zz-game-art-wrap .zz-game-art {
  display: block; width: 100%; height: auto;
  object-fit: contain;
}
.zz-game-art-title {
  position: absolute;
  left: 0; right: 0;
  top: 2.8%;
  z-index: 1;
  display: flex;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.zz-game-art-title .zz-game-title-mark {
  max-width: 92%;
  max-height: none;
  font-size: clamp(1.15rem, 6.2vw, 2.55rem);
  gap: 0;
  filter: drop-shadow(0 3px 0 rgba(10, 4, 24, .85));
}
.zz-game-art-title .zz-gt-line {
  -webkit-text-stroke: 3.2px rgba(12, 6, 28, .95);
}
/* Prize Party JPEG has no baked title — card overlay uses cover-style gradients. */
.zz-game-art-title .zz-game-title-mark.zz-gt-pp {
  font-size: clamp(1.45rem, 8.4vw, 3.35rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: .04em;
  transform: rotate(-2.5deg);
  filter:
    drop-shadow(0 4px 0 rgba(10, 4, 24, .92))
    drop-shadow(0 0 16px rgba(255, 154, 213, .42))
    drop-shadow(0 0 28px rgba(127, 240, 228, .22));
}
.zz-game-art-title .zz-gt-pp .zz-gt-l1 {
  background: linear-gradient(180deg, #fffef0 0%, #ffe08a 42%, #ffd43b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  font-size: 1.02em;
  letter-spacing: .12em;
  text-shadow: none;
  filter: drop-shadow(0 0 1px #140820) drop-shadow(0 2px 0 #140820);
}
.zz-game-art-title .zz-gt-pp .zz-gt-l2 {
  background: linear-gradient(180deg, #ffe8f8 0%, #ff9ad5 38%, #e060ff 78%, #c45cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  font-size: 1.42em;
  letter-spacing: .08em;
  text-shadow: none;
  filter: drop-shadow(0 0 1px #140820) drop-shadow(0 3px 0 #140820);
}
.game-card-art {
  position: relative;
  display: block;
  width: 100%;
  background: #0d0a14;
}
.game-uc-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(8, 10, 16, .52);
  pointer-events: none;
  text-align: center;
}
.game-uc-cone {
  width: clamp(42px, 22%, 72px);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
}
.game-uc-label {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(232, 89, 12, .92);
  border: 1px solid rgba(255, 214, 165, .55);
  color: #fff8f1;
  font-size: clamp(.68rem, 2.8vw, .82rem);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.game-card-body {
  position: relative; flex: 1 1 auto;
  padding: clamp(8px, 2vw, 14px) clamp(8px, 2vw, 14px) clamp(10px, 2.2vw, 16px);
}
.game-card h3 {
  margin: 0 0 2px; font-size: clamp(.88rem, 3.4vw, 1.15rem);
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.game-card p {
  margin: 0 0 8px; color: var(--ink-dim);
  font-size: clamp(.72rem, 2.8vw, .88rem); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.game-card .pill {
  font-size: clamp(.62rem, 2.4vw, .74rem); padding: 4px 8px;
}
.game-card-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px; margin-top: 2px;
}
.game-card-foot .game-meta { flex: 1 1 auto; min-width: 0; }
.game-card-details {
  appearance: none; flex: 0 0 auto; margin-left: auto;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(8, 4, 18, .72);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit; font-weight: 800; font-size: clamp(.66rem, 2.5vw, .78rem);
  letter-spacing: .02em; cursor: pointer;
  backdrop-filter: blur(4px);
}
.game-card-details:hover {
  border-color: var(--teal); color: var(--teal);
  background: rgba(78, 205, 196, .12);
}

.game-detail-modal {
  position: fixed;
  /* Sit under the hamburger topbar; leave that row fully usable. */
  top: calc(56px + env(safe-area-inset-top, 0px));
  left: 0; right: 0; bottom: 0;
  z-index: 130;
  display: flex; align-items: stretch; justify-content: center;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(8, 4, 18, .82);
  backdrop-filter: blur(5px);
}
.game-detail-panel {
  width: min(720px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  background: #1a102e;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.game-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}
.game-detail-head h2 {
  margin: 0; font-size: 1.15rem; line-height: 1.25; min-width: 0;
}
.game-detail-tagline {
  margin: 4px 0 0; color: var(--ink-dim); font-size: .9rem; line-height: 1.35;
}
.game-detail-close {
  appearance: none; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: var(--ink);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.game-detail-close:hover { background: rgba(255,255,255,.12); }
.game-detail-body {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 14px 16px 18px;
  -webkit-overflow-scrolling: touch;
}
.game-detail-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px;
}
.game-detail-copy { display: grid; gap: 12px; margin: 0 0 18px; }
.game-detail-copy section { display: grid; gap: 4px; }
.game-detail-copy p {
  margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.5;
}
.game-detail-copy h2,
.game-detail-copy strong {
  display: block; margin: 0 0 4px;
  color: var(--gold); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 800;
}
.game-detail-shots-label {
  margin: 0 0 8px; font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
}
.game-detail-shots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.game-detail-shot {
  margin: 0; min-width: 0;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; overflow: hidden;
}
.game-detail-shot img {
  display: block; width: 100%; height: auto; background: #0d0a14;
}
.game-detail-shot figcaption {
  padding: 8px 10px; font-size: .78rem; font-weight: 700;
  color: var(--ink-dim); line-height: 1.3;
}
@media (max-width: 520px) {
  .game-detail-shots { grid-template-columns: 1fr; }
}
.game-detail-art {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}
.game-detail-art img,
.game-detail-art svg {
  display: block;
  width: min(100%, 280px);
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0d0a14;
}
.game-detail-play {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}
.game-detail-play .btn {
  min-width: 11rem;
  font-weight: 800;
  letter-spacing: .06em;
}

/* Public SEO game landing pages (game-landing.php) */
.game-landing-page {
  min-height: 100vh;
  color: var(--ink, #f4f0e8);
}
.game-landing-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,6,14,.82);
  backdrop-filter: blur(10px);
}
.game-landing-brand {
  color: inherit;
  text-decoration: none;
  line-height: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.game-landing-brand .zz-mark {
  height: 40px;
  width: auto;
  max-width: min(48vw, 190px);
  display: block;
  object-fit: contain;
}
.game-landing-play-top {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 8px 14px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
}
.game-landing-wrap {
  width: min(720px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 48px;
}
.game-landing-card {
  padding: 22px 20px 28px;
}
.game-landing-art {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}
.game-landing-art img {
  display: block;
  width: min(100%, 320px);
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0d0a14;
}
.game-landing-main h1 {
  margin: 0 0 8px;
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.15;
}
.game-landing-main .game-detail-tagline {
  text-align: center;
}
.game-landing-main .game-detail-meta {
  justify-content: center;
}
.game-landing-main .game-detail-copy {
  margin-top: 18px;
}
.game-landing-more {
  margin-top: 22px;
  text-align: center;
}
.game-landing-more a { color: var(--gold, #d4af37); }
.game-landing-related {
  margin-top: 28px;
}
.game-landing-related > h2,
.game-landing-wrap .join-game-index > h2 {
  text-align: center;
  font-size: 1.1rem;
  margin: 0 0 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 800;
}
.how-cta { margin: 22px 0 0; }
.how-page .lede { text-align: center; }

.games-hub-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.games-hub-item { margin: 0; }
.games-hub-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.22);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.games-hub-link:hover,
.games-hub-link:focus-visible {
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.08);
}
.games-hub-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #0d0a14;
}
.games-hub-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.games-hub-text strong {
  font-size: 1.05rem;
  line-height: 1.2;
}
.games-hub-text small {
  color: rgba(244,240,232,.72);
  line-height: 1.35;
}
.games-hub-text em {
  font-style: normal;
  font-size: .8rem;
}

.game-detail-page-link {
  margin: 0 0 14px;
  text-align: center;
  font-size: .88rem;
}
.game-detail-page-link a {
  color: var(--gold, #d4af37);
}

/* -------------------------------------------------------------- host: lobby */

.lobby { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 26px; align-items: start; }
.join-panel { text-align: center; }
.join-code {
  font-size: clamp(3.6rem, 11vw, 7rem); font-weight: 900; letter-spacing: .12em;
  line-height: 1; margin: 6px 0 4px;
  background: linear-gradient(135deg, var(--gold), var(--coral) 55%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.join-url { font-size: 1.05rem; font-weight: 700; color: var(--teal); word-break: break-all; }
.step { display: flex; gap: 10px; align-items: baseline; text-align: left; margin-top: 12px; color: var(--ink-dim); }
.step b { color: var(--gold); }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.roster-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 12px 8px; animation: pop .32s cubic-bezier(.2, 1.4, .4, 1);
}
.roster-item .name { font-weight: 800; font-size: .92rem; text-align: center; word-break: break-word; line-height: 1.2; }
.roster-item .sub { font-size: .74rem; color: var(--ink-dim); }
.roster-item.offline { opacity: .45; }
.roster-item.host-kickable,
.mm-team-member.host-kickable,
.shared-chip.host-kickable {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.shared-chip.host-kickable { border-radius: 999px; }
.roster-item.host-kickable:hover,
.mm-team-member.host-kickable:hover,
.shared-chip.host-kickable:hover {
  border-color: var(--coral);
  background: rgba(255, 107, 107, .12);
}
.roster-item.host-kickable:active,
.mm-team-member.host-kickable:active,
.shared-chip.host-kickable:active { transform: scale(.97); }
.roster-empty { color: var(--ink-dim); padding: 30px 0; text-align: center; grid-column: 1 / -1; }

@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.count-badge { font-size: 1rem; color: var(--ink-dim); font-weight: 700; }

/* ------------------------------------------------------- host: question view */

.host-stage { max-width: 1400px; margin: 0 auto; }
.host-head {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 8px;
}
.host-head .grow { flex: 1; min-width: 0; }
.host-head .btn.inline {
  padding-top: 12px; padding-bottom: 12px;
}
.round-tag { font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.host-prompt { font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.15; margin: 2px 0 0; }
.host-prompt .subject { color: var(--gold); }

.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.option {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 2px solid var(--line); border-radius: 18px;
  padding: 16px 18px; font-size: clamp(1.05rem, 1.5vw, 1.5rem); font-weight: 700;
  animation: pop .3s cubic-bezier(.2, 1.4, .4, 1) both;
}
.option .tag {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); font-weight: 900; font-size: 1rem;
}
.option .text { flex: 1; min-width: 0; }
.option.truth { border-color: var(--green); background: rgba(81, 207, 102, .16); }
.option.dud { opacity: .55; }
.option-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: .85rem; font-weight: 700; color: var(--ink-dim); }
.option-meta .avatar { width: 30px; height: 30px; border-radius: 9px; }
.voters { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.badge-truth { color: var(--green); }
.badge-auto { color: var(--ink-dim); font-weight: 600; font-size: .8rem; }

.tally { display: flex; align-items: center; gap: 10px; font-weight: 800; }

/* ------------------------------------------------- host: reveal walk-through */

/* The board stays put and dims; the answer under the spotlight is cloned into a
   fixed overlay that zooms out of its own grid position (a FLIP transition), so
   nothing reflows behind it. */
.options.dimmed { filter: blur(3px) brightness(.42) saturate(.7); transition: filter .35s; }
.options { transition: filter .35s; }
.option.is-focus { outline: 3px solid var(--gold); outline-offset: 3px; }

.reveal-spot {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 3vh 3vw;
  pointer-events: none;
  background: rgba(8, 4, 18, .55);
}
/* Between answers the overlay is empty -- don't scrim the board for nothing. */
.reveal-spot:empty { background: none; }

.spot-card {
  width: min(1080px, 94vw);
  min-height: min(72vh, 640px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  background: linear-gradient(165deg, #2c1a52, #1a1030);
  border: 3px solid var(--line); border-radius: 28px;
  padding: clamp(22px, 4vh, 40px) clamp(22px, 4vw, 44px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
  will-change: transform, opacity;
  text-align: center;
}
.spot-card.truth { border-color: var(--green); background: linear-gradient(165deg, #143a24, #10261a); }
.spot-card.truth .spot-text { color: #e6ffe9; }

.spot-truth-banner {
  font-size: clamp(1.4rem, 4vw, 2.4rem); font-weight: 1000;
  letter-spacing: .22em; text-transform: uppercase; color: var(--green);
  text-shadow: 0 0 24px rgba(81, 207, 102, .35);
}
.spot-author {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  font-size: 1.15rem;
}
.spot-author-label {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-dim);
}
.spot-author .who {
  display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.25rem;
}
.spot-author .avatar { width: 52px; height: 52px; border-radius: 16px; }
/* Same wordmark as the top-bar brand when Zenafox wrote the lie. */
.spot-author .spot-zenafox .zz-mark,
.option-meta .spot-zenafox .zz-mark {
  height: 40px; width: auto; max-width: min(42vw, 190px);
  display: block; object-fit: contain;
}
.option-meta .spot-zenafox { display: inline-flex; align-items: center; }
.option-meta .spot-zenafox .zz-mark { height: 22px; max-width: 110px; }

.spot-text {
  font-size: clamp(2rem, 5.5vw, 3.8rem); font-weight: 1000; line-height: 1.1;
  margin: 8px 0; flex: 1 1 auto; display: grid; place-items: center;
}

.spot-payoff { display: grid; gap: 4px; justify-items: center; }
.spot-payoff .pts {
  font-weight: 1000; font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--gold); line-height: 1;
}
.spot-payoff small {
  font-size: .9rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim);
}

.spot-voters {
  display: grid; gap: 10px; justify-items: center;
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1);
}
.spot-voters-label {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-dim);
}
.spot-people {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.spot-person {
  display: flex; align-items: center; gap: 8px; font-weight: 800;
  background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 6px 14px 6px 6px;
  opacity: 0; font-size: 1.05rem;
}
.spot-person .avatar { width: 36px; height: 36px; border-radius: 11px; }
.spot-card.truth .spot-person,
.spot-voters.stage.in .spot-person { animation: pop .38s cubic-bezier(.2, 1.4, .4, 1) both; }
.spot-person .pop { color: var(--green); font-variant-numeric: tabular-nums; font-weight: 900; }
.spot-card.truth .spot-person .pop {
  font-size: 1.35rem; font-weight: 1000; margin-left: 2px;
}
.spot-none { color: var(--ink-dim); font-weight: 700; }

/* Staged fills: author, voters, payoff rise in on their beat. */
.spot-author.stage,
.spot-voters.stage,
.spot-payoff.stage,
.spot-truth-banner.stage {
  opacity: 0; transform: translateY(16px) scale(.97);
}
.spot-author.stage.in,
.spot-voters.stage.in,
.spot-payoff.stage.in,
.spot-truth-banner.stage.in {
  opacity: 1; transform: none;
  transition: opacity .38s ease, transform .46s cubic-bezier(.2, 1.25, .35, 1);
}

/* Legacy row styles still used by Ballpark / other spotlights. */
.spot-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.spot-head .tag {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); font-weight: 900; font-size: 1.3rem; flex: 0 0 auto;
}
.spot-kicker { font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--ink-dim); }
.spot-card.truth .spot-kicker { color: var(--green); }
.spot-rows { display: grid; gap: 12px; }
.spot-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(0, 0, 0, .26); border-radius: 16px; padding: 12px 16px;
}
.spot-row .label { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--ink-dim); }
.spot-row .who { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; }
.spot-row .pts { margin-left: auto; font-weight: 900; font-variant-numeric: tabular-nums; font-size: 1.5rem; color: var(--gold); }
.spot-card.truth .spot-row .pts { color: var(--green); }
.spot-row .pts small { display: block; font-size: .7rem; color: var(--ink-dim); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.spot-row.stage { opacity: 0; transform: translateY(16px) scale(.97); }
.spot-row.stage.in {
  opacity: 1; transform: none;
  transition: opacity .38s ease, transform .46s cubic-bezier(.2, 1.25, .35, 1);
}
.spot-row.stage.in .spot-person { animation: pop .38s cubic-bezier(.2, 1.4, .4, 1) both; }

/* Above unlock celeb (80), toast/hold (90), legal overlays — pointer-events none
   so AWESOME / buttons still work underneath. */
/* Above account / terms / drawer popups (130–200). pointer-events: none so taps still hit UI. */
.zz-confetti { position: fixed; inset: 0; z-index: 210; width: 100vw; height: 100vh; pointer-events: none; }

/* ------------------------------------------------------ host: scores / final */

.score-list { display: grid; gap: 10px; max-width: 900px; margin: 0 auto; }
.score-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px;
  font-size: 1.2rem; font-weight: 700;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}
.score-row .rank { width: 42px; font-size: 1.4rem; font-weight: 900; color: var(--ink-dim); }
.score-row .name { flex: 1; min-width: 0; }
.score-row .pts { font-variant-numeric: tabular-nums; color: var(--gold); font-size: 1.35rem; }
.score-row .delta { color: var(--green); font-size: .95rem; min-width: 4.5em; text-align: right; }
.score-row.top { border-color: var(--gold); background: rgba(255, 212, 59, .12); }

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin: 24px 0 32px; flex-wrap: wrap; }
.plinth { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.plinth .block {
  position: relative;
  width: min(30vw, 220px); border-radius: 20px 20px 0 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px;
  font-size: 2.4rem; font-weight: 900; color: #1a1226; padding: 8px 8px 4px;
  font-variant-numeric: tabular-nums;
  overflow: visible;
  /* Lit top edge and a shadow under the lip so the block reads as a solid
     pedestal rather than a flat colour swatch. */
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 -3px 12px rgba(0,0,0,.28);
  transform-origin: bottom center;
  animation: plinthRise .45s cubic-bezier(.2, 1.2, .3, 1) both;
}
.plinth-place { line-height: 1; position: relative; z-index: 1; }
.plinth.p1 .block { height: 138px; background: linear-gradient(180deg, var(--gold), #e0a800); }
.plinth.p2 .block { height: 94px; background: linear-gradient(180deg, #dee2e6, #adb5bd); }
.plinth.p3 .block { height: 64px; background: linear-gradient(180deg, #ffa94d, #d9822b); }
.podium.has-zen .plinth .block { padding-bottom: 22px; }
.podium.has-zen .plinth.p2 .block { height: 99px; padding-bottom: 20px; }
.podium.has-zen .plinth.p3 .block { height: 70px; padding-bottom: 18px; }
.plinth.p1 .block { animation-delay: .1s; }
.plinth.p3 .block { animation-delay: .05s; }
.plinth .who {
  font-size: 1.2rem; font-weight: 800; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes plinthRise {
  from { transform: scaleY(.15); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* Shared sizing for the two end screens: each plinth takes an equal share of
   its container, so three of them always fit the credits sidebar or a handset. */
.podium.mini .plinth,
.podium.phone .plinth { flex: 1 1 0; max-width: 118px; }
.podium.mini .plinth .block,
.podium.phone .plinth .block { width: 100%; }

.podium.phone { gap: 8px; margin: 6px 0 16px; }
.podium.phone .plinth { gap: 6px; }
.podium.phone .avatar { width: 52px; height: 52px; border-radius: 15px; }
.podium.phone .plinth.p1 .avatar {
  width: 64px; height: 64px; border-radius: 18px;
  border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(255,212,59,.22);
}
.podium.phone .plinth .block { font-size: 1.55rem; padding: 5px 4px 3px; }
.podium.phone .plinth.p1 .block { height: 70px; }
.podium.phone .plinth.p2 .block { height: 49px; }
.podium.phone .plinth.p3 .block { height: 35px; }
.podium.phone.has-zen .plinth .block { padding-bottom: 18px; }
.podium.phone.has-zen .plinth.p1 .block { height: 78px; }
.podium.phone.has-zen .plinth.p2 .block { height: 59px; padding-bottom: 16px; }
.podium.phone.has-zen .plinth.p3 .block { height: 48px; padding-bottom: 14px; }
.podium.phone .plinth-zen { font-size: .66rem; }
.podium.phone .zen-inline-gem-plinth { width: 12px; height: 12px; }
.podium.phone .plinth .who { font-size: .86rem; }

/* ------------------------------------------------ no-screen (solo) mode */

.mode-slider-row {
  display: flex; align-items: center; gap: 10px;
}
.mode-slider {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line);
}
.mode-opt {
  appearance: none; border: 0; background: transparent; color: var(--ink-dim);
  font: inherit; font-weight: 800; font-size: .95rem; padding: 12px 10px;
  border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.mode-opt.active {
  background: linear-gradient(135deg, var(--teal), #3bb8b0);
  color: #0b2430; box-shadow: 0 8px 18px rgba(78, 205, 196, .28);
}
.mode-help {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-weight: 900; font-size: 1.05rem; cursor: pointer;
  line-height: 1; padding: 0;
}
.mode-help:hover, .mode-help.open {
  border-color: var(--teal); color: var(--teal); background: rgba(78, 205, 196, .12);
}
.mode-help-pop {
  margin-top: 12px; padding: 14px 16px; border-radius: 16px;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line);
  font-size: .92rem; line-height: 1.45; color: var(--ink-dim);
}
.mode-help-pop p { margin: 0 0 10px; }
.mode-help-pop p:last-child { margin-bottom: 0; }
.mode-help-pop strong { color: var(--ink); }

.share-row { display: flex; gap: 10px; margin-top: 12px; }
.share-row .btn { margin: 0; }
.share-row .btn.ghost { flex: 0 0 34%; }
.share-url {
  font-size: .78rem; color: var(--ink-dim); word-break: break-all; text-align: center;
  margin: 8px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.share-code {
  font-size: clamp(2.6rem, 16vw, 4rem); font-weight: 900; letter-spacing: .14em;
  line-height: 1; text-align: center; margin: 4px 0 2px;
  background: linear-gradient(135deg, var(--gold), var(--coral) 55%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* The shared panel: the big screen, squeezed onto a phone. */
.shared {
  background: rgba(0, 0, 0, .26); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px; margin: 12px 0 16px;
}
.shared-tag {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 800; color: var(--gold); margin-bottom: 8px;
}
.shared-lobby-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.shared-lobby-top .shared-tag {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.btn.lobby-start-top {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: .78rem;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.host-head .btn.lobby-start-top {
  padding: 7px 12px;
  font-size: .78rem;
}
.shared-prompt { font-size: 1.15rem; font-weight: 800; line-height: 1.3; margin: 0 0 10px; }
.shared-note { margin: 10px 0 0; color: var(--ink-dim); font-size: .9rem; text-align: center; }
.shared-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
.shared-answer {
  text-align: center; font-size: 3rem; font-weight: 900; line-height: 1;
  color: var(--green); margin: 10px 0 0; font-variant-numeric: tabular-nums;
}
.shared-rules { margin: 0; padding-left: 20px; color: var(--ink-dim); line-height: 1.6; }
.shared-rules li { margin-bottom: 4px; }
.pof-score-rules {
  margin: 8px 0 0; padding-left: 1.15em;
  color: var(--ink-dim); font-size: .92em; line-height: 1.45;
  list-style: disc;
}
.pof-score-rules li { margin: 2px 0; }
.option .text .pof-score-rules { color: inherit; opacity: .92; }
.shared-roster { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.shared-chip {
  display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem;
  background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 4px 12px 4px 4px;
}
.shared-chip .avatar { width: 26px; height: 26px; border-radius: 8px; }
.shared-options { display: grid; gap: 8px; }
.shared-option {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 11px; font-size: .95rem; font-weight: 600;
}
.shared-option.truth { border-color: var(--green); background: rgba(81, 207, 102, .16); }
.shared-option .tag {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); font-weight: 900; font-size: .75rem; flex: 0 0 auto;
}
.shared-option .text { flex: 1; min-width: 0; }
.shared-option .voters { display: flex; gap: 3px; }
.shared-option .voters .avatar { width: 22px; height: 22px; border-radius: 7px; }
.shared-scores { display: grid; gap: 6px; }
.shared-scores .score-row { font-size: 1rem; padding: 8px 11px; }
.shared-scores .rank { width: 26px; font-size: 1rem; }
.host-strip { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }

/* Percent Perfect on a phone: the thing you have to tap goes first, and the board
   that explains it goes underneath. Reordering with flex rather than moving the
   markup keeps `devHead()` producing the same string for every screen. */
.wrap.solo-flip { display: flex; flex-direction: column; }
.wrap.solo-flip .dev-head { order: 0; }
.wrap.solo-flip .timer-inline { order: 1; }
.wrap.solo-flip .timer-wrap { order: 1; }
.wrap.solo-flip .role-card { order: 1; }
.wrap.solo-flip > .card { order: 2; margin-top: 12px; }
.wrap.solo-flip .shared { order: 3; margin: 14px 0 0; }

/* Everything a notch tighter so slider + button clear the fold on a small phone. */
.card.tight { padding: 14px 16px; }
.card.tight .write-prompt { margin-bottom: 10px; line-height: 1.25; }
.card.tight .write-kind { margin-bottom: 8px; }
.card.tight .bp-readout { font-size: 2.8rem; margin: 2px 0 0; }
.card.tight .bp-readout.huge { font-size: clamp(4.2rem, 16vw, 6.4rem); margin: 2px 0 4px; }
.card.tight .bp-slider { height: 40px; }
.card.tight .bp-scale { margin-bottom: 12px; }
.card.tight .bp-call .btn { font-size: 1.15rem; padding: 16px; }
.card.tight .bp-call { gap: 10px; }

.bp-summary {
  margin: 0 0 12px; color: var(--ink-dim); font-size: .95rem; line-height: 1.5;
}
.bp-summary b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Category splash before each Percent Perfect question. */
.bp-cat-stage .bp-cat-splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: min(52vh, 420px); text-align: center; padding: 24px 16px;
}
.bp-cat-label {
  font-size: clamp(.75rem, 1.6vw, .95rem); font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 12px;
  animation: bpCatIn .45s ease both;
}
.bp-cat-name {
  margin: 0; font-weight: 900; line-height: 1.05; letter-spacing: -.03em;
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  color: var(--gold);
  animation: bpCatIn .55s .08s ease both;
}
.bp-cat-card {
  text-align: center; padding: 36px 20px 28px;
}
.bp-cat-card .bp-cat-name {
  font-size: clamp(2rem, 10vw, 3.2rem); margin: 0 0 14px;
}
@keyframes bpCatIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Locked-in guess board on the question phone screen. */
.bp-guesses {
  margin: 14px 0 0;
  padding: 12px 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
}
.bp-guesses-label {
  margin: 0 0 10px;
  font-size: .72rem; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.bp-guesses-grid {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: flex-start;
  gap: 8px 10px;
}
.bp-guess-seat {
  display: inline-flex; flex-direction: row;
  align-items: center; gap: 6px;
  flex: 0 0 auto;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}
.bp-guess-seat .avatar.sm {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
}
.bp-guess-pct {
  font-size: .88rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1; color: var(--ink);
  min-width: 2.4em;
}
.bp-guess-pct.bp-guess-wait {
  color: var(--ink-dim); font-weight: 800;
}
.bp-guess-seat.out {
  opacity: .55;
}
.bp-guess-seat.me {
  border-color: #51cf66;
  background: rgba(81, 207, 102, .16);
  box-shadow: 0 0 0 1px rgba(81, 207, 102, .2);
}
.bp-guess-seat.me .bp-guess-pct { color: #b8f5c2; }
.wrap.solo-flip > .bp-guesses { order: 3; margin-top: 12px; }

/* Thumbs rating — sits under the timer once the guess is locked. */
.bp-q-rate {
  margin: 10px 0 4px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .2);
  text-align: center;
}
.bp-q-rate-label {
  margin: 0 0 8px;
  font-size: .72rem; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.bp-q-rate-btns {
  display: flex; justify-content: center; align-items: center; gap: 16px;
}
.bp-q-rate-btn {
  width: 64px; height: 64px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.bp-q-rate-btn:active { transform: scale(.94); }
.bp-q-rate-btn.chosen {
  border-color: var(--green, #51cf66);
  background: rgba(81, 207, 102, .28);
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .4);
}
.bp-q-rate-btn:disabled { opacity: .6; cursor: default; }
.bp-q-rate-btn.chosen:disabled { opacity: 1; }
.bp-q-rate.thanks {
  border-color: rgba(81, 207, 102, .35);
  background: rgba(81, 207, 102, .1);
}
.bp-q-rate-thanks {
  margin: 0;
  font-size: .82rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  color: #b8f5c2;
}
.wrap.solo-flip > .bp-q-rate { order: 2; }

/* Minigame thumbs — under LETS GO on results. */
.mm-mini-rate {
  margin: 10px auto 6px;
  max-width: 280px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .2);
  text-align: center;
}
.mm-mini-rate-label {
  margin: 0 0 8px;
  font-size: .72rem; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.mm-mini-rate-btns {
  display: flex; justify-content: center; align-items: center; gap: 16px;
}
.mm-mini-rate-btn {
  width: 56px; height: 56px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1.7rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.mm-mini-rate-btn:active { transform: scale(.94); }
.mm-mini-rate-btn.chosen {
  border-color: var(--green, #51cf66);
  background: rgba(81, 207, 102, .28);
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .4);
}
.mm-mini-rate-btn:disabled { opacity: .6; cursor: default; }
.mm-mini-rate-btn.chosen:disabled { opacity: 1; }
.mm-mini-rate.thanks {
  border-color: rgba(81, 207, 102, .35);
  background: rgba(81, 207, 102, .1);
}
.mm-mini-rate-thanks {
  margin: 0;
  font-size: .82rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  color: #b8f5c2;
}
.mm-lets-go + .mm-mini-rate { margin-top: 12px; }

/* Percent Perfect strip + shared panel tighten on a phone. */
@media (max-width: 620px) {
  .shared .bp-strip {
    margin: 14px 0 8px; gap: 4px var(--bp-gap-x, 3px); min-height: 72px;
    padding-top: var(--bp-pad-top, 48px);
    overflow: visible;
  }
  .shared .bp-col { min-width: var(--bp-face, 26px); }
  .shared .bp-col .avatar {
    width: var(--bp-face, 26px); height: var(--bp-face, 26px);
    border-radius: var(--bp-face-r, 8px);
  }
  .shared .bp-col b {
    font-size: var(--bp-chip-fs, .64rem); padding: var(--bp-chip-pad, 0 5px);
  }
  .shared .bp-face-pile { gap: 1px; }
  .shared .bp-col-stack { gap: 1px; }
  .shared .bp-avg-flag,
  .shared .bp-ans-flag { font-size: .64rem; padding: 2px 6px; }
  .shared .bp-marker-slot,
  .shared .bp-avg-slot,
  .shared .bp-ans-slot { width: 8px; }
  .shared .bp-answer-stamp { min-height: 3.2rem; margin: 4px auto 8px; }
  .shared .bp-answer-stamp .bp-answer-mark,
  .result-card .bp-ans-pct-mark,
  .host-stage .bp-ans-pct-mark { font-size: 1.32rem; padding: 3px 8px; }
  .shared .bp-call-side { padding: 6px 5px 8px; }
  .shared .bp-call-side-label { font-size: .68rem; letter-spacing: .03em; }
  .shared .bp-call-side-badge { font-size: .62rem; padding: 2px 5px; }
  .shared { padding: 12px; margin: 10px 0 14px; }
  .shared-tag { margin-bottom: 6px; }
  .shared-note { margin-top: 6px; font-size: .85rem; }
  .shared-answer { font-size: 2.4rem; }
  .bp-score-head { display: none; }
  .bp-chip { font-size: .72rem; padding: 2px 6px; }
  .result-card .bp-strip { margin-left: 0; margin-right: 0; }
}

/* ------------------------------------------------------------ Ballpark */

.bp-waiting { text-align: center; padding: 8vh 10px 0; }
.bp-waiting .eyes { font-size: 4rem; }
.bp-waiting h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 10px 0 4px; }

/* Shared-screen lock progress (who is in — never what they answered). */
.lock-faces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 18px auto 0;
  max-width: 920px;
  padding: 0 8px;
}
.lock-faces.host-lock-faces { margin-top: 22px; }
.lock-faces.compact {
  gap: 6px 8px;
  margin: 10px 0 0;
  justify-content: flex-start;
  max-width: none;
}
.lock-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  max-width: 96px;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: opacity .2s ease, border-color .2s ease, background .2s ease;
}
.lock-faces.compact .lock-face {
  flex-direction: row;
  min-width: 0;
  max-width: none;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  gap: 6px;
}
.lock-face .name {
  font-weight: 800;
  font-size: .82rem;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}
.lock-faces.compact .lock-face .name {
  font-size: .78rem;
  text-align: left;
}
.lock-face .sub {
  font-size: .7rem;
  color: var(--ink-dim);
  text-transform: lowercase;
}
.lock-faces.compact .lock-face .sub { display: none; }
.lock-face.is-waiting { opacity: .48; }
.lock-face.is-locked {
  opacity: 1;
  border-color: rgba(120, 220, 160, .45);
  background: rgba(80, 180, 120, .12);
}
.lock-face.is-locked .sub { color: #7dcea0; }

/* ---------- Percent Perfect Final Round ---------- */
/* How-to: Pause / LETS GO alone on the top row; copy never shares that line. */
.bp-finale-intro .bp-finale-intro-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
}
.bp-finale-intro .bp-finale-intro-controls .btn {
  flex: 0 0 auto;
  width: auto;
}
.bp-finale-intro .bp-finale-intro-timer {
  width: 100%;
  max-width: 320px;
  margin: 0 0 14px;
}
.bp-finale-intro .bp-finale-intro-timer .timer-inline {
  width: 100%;
  max-width: none;
}
.bp-finale-intro .bp-finale-intro-body {
  width: 100%;
  clear: both;
}
.bp-finale-intro .round-tag { margin-bottom: 6px; }
.bp-finale-intro .host-prompt {
  margin: 0 0 16px;
  max-width: none;
  width: 100%;
}
.bp-finale-intro .bp-finale-intro-steps {
  grid-template-columns: 1fr;
  max-width: 720px;
}
.bp-finale-hint { margin: 4px 0 10px; font-size: .92rem; }
.bp-finale-tap-msg {
  flex: 1;
  text-align: center;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
  line-height: 1.2;
}
.bp-finale-left {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 10px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255, 180, 70, .14); border: 1px solid rgba(255, 180, 70, .35);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.bp-finale-left.ready {
  background: rgba(90, 214, 122, .14); border-color: rgba(90, 214, 122, .4);
}
.bp-finale-left.over {
  background: rgba(255, 107, 107, .16); border-color: rgba(255, 107, 107, .45);
}
.bp-finale-left-lab { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.bp-finale-left b { font-size: 1.15rem; }
.bp-finale-sliders { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 6px; }
.bp-finale-slider-row label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 700; margin-bottom: 4px; gap: 8px;
}
.bp-finale-slider-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-weight: 700; margin-bottom: 6px;
}
.bp-finale-cat { min-width: 0; }
.bp-finale-stepper {
  display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center;
}
.bp-finale-stepper input[type=range] { width: 100%; height: 48px; }
.bp-finale-step {
  appearance: none; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: inherit;
  width: 44px; height: 44px; border-radius: 12px;
  font: inherit; font-size: 1.45rem; font-weight: 900; line-height: 1; cursor: pointer;
}
.bp-finale-step:disabled { opacity: .35; cursor: default; }
.bp-finale-step:not(:disabled):active { transform: scale(.96); }
.bp-finale-place {
  appearance: none; margin-top: 8px; width: 100%;
  border: 1px dashed rgba(255, 180, 70, .55);
  background: rgba(255, 180, 70, .12); color: inherit;
  border-radius: 12px; padding: 8px 12px;
  font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer;
}
.bp-finale-place:disabled {
  opacity: .35; cursor: default;
  border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04);
}
.bp-finale-place:not(:disabled):active { transform: scale(.99); }
/* These were bare range inputs, so the drag target was whatever the browser
   drew — roughly half the knob of the game's own .bp-slider. Same treatment
   here so the thumb is an easy grab on a phone. */
.bp-finale-slider-row input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 48px;
  background: transparent;
}
.bp-finale-slider-row input[type=range]::-webkit-slider-runnable-track {
  height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--coral));
}
.bp-finale-slider-row input[type=range]::-moz-range-track {
  height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--coral));
}
/* -13px centres a 40px thumb on the 14px track. */
.bp-finale-slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 4px solid var(--ink);
  margin-top: -13px;
  box-shadow: 0 4px 12px rgba(0,0,0,.45); cursor: grab;
}
.bp-finale-slider-row input[type=range]::-moz-range-thumb {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 4px solid var(--ink);
  box-shadow: 0 4px 12px rgba(0,0,0,.45); cursor: grab;
}
.bp-finale-slider-row input[type=range]:disabled { opacity: .5; }
.bp-finale-val { font-variant-numeric: tabular-nums; color: var(--accent, #5ad67a); }
.bp-finale-total {
  text-align: center; font-weight: 800; margin: 6px 0 12px;
  font-variant-numeric: tabular-nums;
}
.bp-finale-picks { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.bp-finale-pick-slot {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.28); border-radius: 12px; padding: 10px 12px;
  cursor: pointer; user-select: none;
}
.bp-finale-pick-slot .rank {
  font-weight: 900; font-variant-numeric: tabular-nums; min-width: 2.2em;
  color: var(--accent, #5ad67a);
}
.bp-finale-pick-slot .lab { flex: 1; font-weight: 700; }
.bp-finale-pick-clear {
  border: 0; background: rgba(255,255,255,.12); color: inherit;
  width: 28px; height: 28px; border-radius: 999px; font-size: 1.1rem; cursor: pointer;
}
.bp-finale-pool {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; justify-content: center;
}
.bp-finale-pool-btn {
  border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25);
  color: inherit; border-radius: 999px; padding: 8px 14px; font-weight: 700;
  font-size: 1.0695em; cursor: pointer;
}
.bp-finale-pool-btn.on {
  background: var(--green, #3ecf6a); color: #10261a; border-color: transparent;
}
.bp-finale-triple { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 12px; }
.bp-finale-triple-row .write-prompt { font-size: 1rem; margin: 0 0 4px; }
.bp-finale-triple-row .bp-readout.sm { font-size: 2rem; margin: 0; }

.bp-finale-bars { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 10px; }
.bp-finale-bars.phone { gap: 8px; margin: 10px 0; }
.bp-finale-bar-row {
  display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr auto;
  gap: 8px 12px; align-items: center; opacity: .35; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.bp-finale-bar-row.in { opacity: 1; transform: none; }
.bp-finale-bar-label { font-weight: 800; line-height: 1.2; }
.bp-finale-bar-track {
  height: 18px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden;
}
.bp-finale-bar-track i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #3ecf6a, #8af0a8);
  transition: width .55s cubic-bezier(.2, 1.1, .3, 1);
}
.bp-finale-bar-pct {
  font-weight: 900; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right;
}
.bp-finale-bar-pins {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px;
}
.bp-finale-pin {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.35); border-radius: 999px; padding: 2px 8px 2px 2px;
  font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 2px solid transparent;
}
.bp-finale-pin .avatar.sm { width: 22px; height: 22px; }
.bp-finale-pin.closest {
  border-color: rgba(90, 214, 122, .85);
  background: rgba(90, 214, 122, .18);
  box-shadow: 0 0 0 1px rgba(90, 214, 122, .35);
}
/* The ring is an inset shadow on the row's own box, and the row had no padding,
   so it was drawn hard against the 40px avatar and the score. Pad every row —
   not just the highlighted one — so the outline clears both and the unhighlighted
   rows stay aligned with it. */
.bp-finale-scores .bp-score-row {
  padding: 7px 12px;
  border-radius: 12px;
}
.bp-finale-scores {
  gap: 6px;
}
.bp-finale-scores .bp-score-row.closest {
  box-shadow: inset 0 0 0 2px rgba(90, 214, 122, .75);
  background: rgba(90, 214, 122, .12);
}

.bp-finale-feud { display: flex; flex-direction: column; gap: 6px; margin: 10px auto 8px; max-width: 720px; }
.bp-finale-feud.phone { gap: 5px; margin: 6px 0; }
.bp-finale-feud-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(0,0,0,.32); border-radius: 12px; padding: 10px 12px;
  opacity: .3; transform: scale(.98); transition: .35s ease;
}
.bp-finale-feud-row.in { opacity: 1; transform: none; }
.bp-finale-feud-row.current.in {
  box-shadow: 0 0 0 2px rgba(255, 213, 106, .55);
}
.bp-finale-feud-rank {
  font-size: 1.15rem; font-weight: 900; min-width: 2em; padding-top: 2px;
  color: #ffd56a; font-variant-numeric: tabular-nums;
}
.bp-finale-feud-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.bp-finale-feud-label { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.bp-finale-feud-faces {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 28px;
}
.bp-finale-feud-faces.empty { min-height: 0; }
.bp-finale-feud-faces.empty .muted { font-size: .78rem; opacity: .7; }
.bp-finale-feud-face {
  position: relative; display: inline-flex; line-height: 0;
  animation: pop .34s cubic-bezier(.2, 1.4, .4, 1) both;
}
.bp-finale-feud-face .avatar.sm {
  width: 28px; height: 28px; border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, .55);
}
.bp-finale-feud-face.pick .avatar.sm {
  box-shadow: 0 0 0 2px rgba(94, 184, 255, .75);
}
.bp-finale-feud-face.exact .avatar.sm {
  box-shadow: 0 0 0 2px rgba(62, 207, 106, .95);
}
.bp-finale-feud-mark {
  position: absolute; right: -3px; bottom: -3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #3ecf6a; color: #06210f;
  font-size: 9px; font-style: normal; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.bp-finale-tf-legend {
  margin: 8px 2px 0; font-size: .78rem; text-align: center;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
  align-items: center;
}
.bp-finale-tf-key {
  display: inline-block; width: 12px; height: 12px; border-radius: 4px;
  vertical-align: -1px; margin-right: 4px;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, .55);
}
.bp-finale-tf-key.exact { box-shadow: 0 0 0 2px rgba(62, 207, 106, .95); background: rgba(62, 207, 106, .25); }
.bp-finale-tf-key.pick { box-shadow: 0 0 0 2px rgba(94, 184, 255, .75); background: rgba(94, 184, 255, .2); }
.bp-finale-hitters {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin-left: auto; flex-shrink: 0;
}
.bp-finale-hitter {
  display: inline-flex; line-height: 0;
  animation: pop .34s cubic-bezier(.2, 1.4, .4, 1) both;
}
.bp-finale-hitter .avatar.sm {
  width: 28px; height: 28px; border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(62, 207, 106, .85);
}

.bp-finale-tf-foot {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 8px auto 0; max-width: 720px;
}
.bp-finale-tf-scores-lab {
  font-size: .78rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; opacity: .75; margin-top: 4px;
}
.bp-finale-scores.tf { width: 100%; max-width: 420px; }
.bp-finale-tf-pts {
  font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,.35);
  transition: color .25s ease, transform .25s ease;
}
.bp-finale-tf-pts.on {
  color: var(--green, #3ecf6a);
  transform: scale(1.04);
}

.bp-finale-triple-reveal { text-align: center; padding: 12px 0 4px; }
.bp-finale-triple-q { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 800; margin: 0 0 8px; }
.bp-finale-slam { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.bp-finale-combo {
  margin-top: 14px; font-weight: 900; letter-spacing: .04em;
  color: #ffd56a; animation: pop .4s ease both;
}
.bp-finale-scores { margin-top: 16px; }
.bp-finale-you {
  text-align: center; font-size: 1.6rem; font-weight: 900; margin: 12px 0 4px;
  color: var(--green, #3ecf6a);
}

@media (max-width: 640px) {
  .bp-finale-bar-row {
    grid-template-columns: 1fr auto;
  }
  .bp-finale-bar-track { grid-column: 1 / -1; }
  .bp-finale-bar-pct { grid-column: 2; grid-row: 1; }
}

/* Reveal strip: one horizontal row of unique-% columns. Same-% ties stack
   upward in a single pile; height grows with the tie. Face size comes from
   --bp-face (set in JS from player count). */
.bp-strip {
  display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: center;
  gap: var(--bp-gap-y, 8px) var(--bp-gap-x, 4px);
  margin: 28px 0 14px; min-height: 110px;
  padding-top: var(--bp-pad-top, 56px);
  padding-left: 0; padding-right: 0;
  /* overflow-x:auto forces overflow-y to auto in browsers and clips the Avg
     bubble that sits above the strip — keep both visible. */
  overflow: visible;
  --bp-face: 40px;
  --bp-face-r: 10px;
  --bp-chip-fs: .85rem;
  --bp-chip-pad: 2px 8px;
  --bp-gap-x: 4px;
  --bp-gap-y: 8px;
  --bp-pad-top: 56px;
}
.bp-strip.compact {
  gap: 6px var(--bp-gap-x, 3px); margin: 18px 0 10px; min-height: 88px;
  padding-top: var(--bp-pad-top, 48px);
}
.bp-col {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: pop .34s cubic-bezier(.2, 1.4, .4, 1) both;
  min-width: var(--bp-face, 40px);
  flex: 0 0 auto;
  overflow: visible;
}
.bp-strip.compact .bp-col { min-width: var(--bp-face, 32px); gap: 3px; }
.bp-col .avatar {
  width: var(--bp-face, 40px); height: var(--bp-face, 40px);
  border-radius: var(--bp-face-r, 10px);
}
.bp-col-stack {
  position: relative; z-index: 2;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end;
  justify-content: center; gap: 2px;
}
.bp-face-pile {
  display: flex; flex-direction: column-reverse; align-items: center;
  gap: 2px;
}
.bp-face-pile .bp-face { display: block; line-height: 0; }
.bp-face.auto { opacity: .45; }
.bp-face.closest .avatar,
.bp-col.closest .avatar { box-shadow: 0 0 0 3px var(--green); }
.bp-col b {
  position: relative; z-index: 2;
  font-size: var(--bp-chip-fs, .85rem); font-variant-numeric: tabular-nums; font-weight: 800;
  background: rgba(0,0,0,.45); border-radius: 999px; padding: var(--bp-chip-pad, 2px 8px);
}
.bp-col.closest b { background: var(--green); color: #10261a; }

/* Between-column markers — thin bar only; bubble floats above so columns
   can sit closer. Hidden until .in. */
.bp-marker-slot,
.bp-avg-slot,
.bp-ans-slot,
.bp-col-marker,
.bp-stage {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.bp-marker-slot,
.bp-avg-slot,
.bp-ans-slot {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  align-self: stretch; gap: 0; width: 10px; margin: 0 -1px;
  transform: translateY(4px);
}
.bp-marker-slot.in,
.bp-avg-slot.in,
.bp-ans-slot.in,
.bp-col-marker.in,
.bp-stage.in {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility 0s linear 0s;
}
.bp-marker-slot.in,
.bp-avg-slot.in,
.bp-ans-slot.in {
  transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, 1.25, .35, 1),
    visibility 0s linear 0s;
}
.bp-marker-bar,
.bp-avg-bar,
.bp-ans-bar {
  flex: 1 1 auto; width: 3px; min-height: 52px; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(20, 16, 40, .35);
}
.bp-avg-bar { background: var(--violet); }
.bp-ans-bar { background: #69db7c; box-shadow: 0 0 0 1px rgba(16, 40, 24, .35); }
.bp-strip.compact .bp-marker-bar,
.bp-strip.compact .bp-avg-bar,
.bp-strip.compact .bp-ans-bar { min-height: 40px; }
/* Answer % sits below the avatar row (under the guess chip, or under a
   between-column slot). Green bar stays through the faces only.
   The bubble stamps in when .in lands (see .bp-ans-pct-mark). */
.bp-ans-pct {
  position: relative; z-index: 3;
  display: inline-block;
  white-space: nowrap;
  /* Stamp handles opacity on the mark — don't fade the shell. */
  opacity: 1 !important;
  transition: visibility 0s linear 0s !important;
}
.bp-ans-pct:not(.in) {
  visibility: hidden;
  pointer-events: none;
}
.bp-ans-pct.in {
  visibility: visible;
}
.bp-ans-pct-mark {
  position: relative; z-index: 1;
  display: inline-block;
  /* 40% smaller than the prior clamp(2.6rem, 9vw, 4.2rem). */
  font-size: clamp(1.56rem, 5.4vw, 2.52rem); font-weight: 900; line-height: 1;
  color: #b8f0c2; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 999px;
  border: 2px solid #69db7c;
  background: rgba(16, 40, 24, .88);
  box-shadow: 0 0 0 3px rgba(105, 219, 124, .22), 0 0 16px rgba(105, 219, 124, .35);
  text-shadow: 0 0 12px rgba(105, 219, 124, .4);
  opacity: 0;
  transform: scale(1.8) rotate(-8deg);
}
.bp-ans-pct-burst {
  position: absolute; inset: -18% -12%; border-radius: 50%;
  border: 2px solid rgba(255, 212, 59, .65); pointer-events: none; opacity: 0;
  z-index: 0;
}
.bp-ans-pct.in .bp-ans-pct-mark {
  animation: mm-stamp-slam 0.95s cubic-bezier(.12, 1.35, .28, 1) both;
}
.bp-ans-pct.in .bp-ans-pct-burst {
  animation: mm-stamp-burst 0.95s ease both;
}
.bp-col > .bp-ans-pct {
  margin-top: 2px;
}
.bp-ans-slot .bp-ans-pct {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  z-index: 3;
}
.bp-ans-slot,
.bp-col-marker-ans {
  align-items: center;
}
.bp-avg-flag,
.bp-ans-flag,
.bp-flag {
  white-space: nowrap; font-weight: 900; font-size: .78rem; padding: 3px 8px;
  border-radius: 999px; background: var(--card-solid); font-variant-numeric: tabular-nums;
}
.bp-avg-flag,
.bp-flag.bp-avg-flag {
  border: 1px solid var(--violet); color: var(--violet);
}
.bp-ans-flag {
  border: 1px solid #69db7c; color: #b8f5c2;
}
.bp-flag small,
.bp-avg-flag small,
.bp-ans-flag small {
  display: block; font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 800; opacity: .75; line-height: 1.1;
}
/* Bubbles sit above the strip so they never widen the column gap. */
.bp-marker-slot > .bp-flag,
.bp-avg-slot > .bp-flag,
.bp-ans-slot > .bp-flag {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

/* Exact match: thin Avg/Ans bar runs BEHIND the face pile; the Avg bubble
   sits above the stack (outside the avatar bounds), so it stays readable. */
.bp-col-markers {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: visible;
}
.bp-col-marker {
  position: absolute; top: -6px; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 10px;
  overflow: visible;
}
.bp-col.has-avg.has-ans .bp-col-marker-avg { transform: translateX(calc(-50% - 6px)); }
.bp-col.has-avg.has-ans .bp-col-marker-ans { transform: translateX(calc(-50% + 6px)); }
.bp-col-marker.in {
  transition: opacity .45s ease, visibility 0s linear 0s;
}
.bp-col-marker .bp-flag {
  position: absolute; bottom: calc(100% + 8px); top: auto; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}
.bp-col-marker .bp-marker-bar {
  position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  flex: none; width: 3px; min-height: 0; height: auto;
  border-radius: 999px;
  z-index: 0;
  opacity: .9;
}
.bp-col-marker-ans .bp-marker-bar {
  /* Through the face pile only — % bubble is below the column. */
  bottom: 0; height: auto;
}

.bp-streak {
  font-weight: 800; font-size: .85em; letter-spacing: 0;
  text-transform: none; color: #ffd459; margin-left: 6px;
}
.bp-bucket.call {
  container-type: inline-size;
  container-name: bp-call;
}
.bp-streak-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 100%;
  box-sizing: border-box;
  padding: 4px 8px; border-radius: 999px;
  font-weight: 900; font-size: .7rem;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
  color: #1a1226;
  background: linear-gradient(135deg, #ffe066, #ff922b);
  border: 1px solid rgba(255, 212, 59, .85);
  box-shadow: 0 0 10px rgba(255, 209, 102, .45);
  line-height: 1.15;
}
.bp-streak-bubble .bp-streak-text {
  white-space: nowrap; overflow: hidden;
  flex: 0 1 auto; min-width: 0;
}
.bp-streak-bubble .bp-streak-mult {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  flex: 0 0 auto;
}
.bp-streak-bubble.bp-streak-s2 {
  font-size: .7rem; padding: 4px 8px;
}
.bp-streak-bubble.bp-streak-s3 {
  font-size: .76rem; padding: 5px 9px;
  box-shadow: 0 0 14px rgba(255, 209, 102, .55);
}
.bp-streak-bubble.bp-streak-s5 {
  font-size: .84rem; padding: 5px 10px; letter-spacing: .06em;
  background: linear-gradient(135deg, #ffe066, #ff922b 55%, #ff6b6b);
  border-color: rgba(255, 146, 43, .95);
  box-shadow: 0 0 16px rgba(255, 146, 43, .55);
}
.bp-streak-bubble.bp-streak-s7 {
  font-size: .92rem; padding: 6px 11px; letter-spacing: .08em;
  background: linear-gradient(135deg, #fff3bf, #ffe066 35%, #ff922b 70%, #ff6b6b);
  border: 2px solid #ffe066;
  box-shadow:
    0 0 0 2px rgba(255, 212, 59, .3),
    0 0 20px rgba(255, 146, 43, .7);
  animation: bp-streak-pulse 1.2s ease-in-out infinite alternate;
}
.bp-streak-bubble.bp-streak-s5 .bp-streak-mult,
.bp-streak-bubble.bp-streak-s7 .bp-streak-mult {
  color: #7a1f00;
  text-shadow: 0 0 6px rgba(255, 255, 255, .35);
}
@keyframes bp-streak-pulse {
  from {
    box-shadow:
      0 0 0 2px rgba(255, 212, 59, .25),
      0 0 14px rgba(255, 146, 43, .5);
    transform: scale(1);
  }
  to {
    box-shadow:
      0 0 0 3px rgba(255, 212, 59, .45),
      0 0 26px rgba(255, 107, 107, .65);
    transform: scale(1.04);
  }
}
/* Under the Higher/Lower score — shrink to fit the bucket, never wrap. */
.bp-bucket .bp-streak-bubble {
  margin: 0;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(.55rem, 11cqi, .78rem);
  padding: 3px 7px;
  letter-spacing: .03em;
}
.bp-bucket .bp-streak-bubble.bp-streak-s5 {
  font-size: clamp(.58rem, 12cqi, .84rem);
}
.bp-bucket .bp-streak-bubble.bp-streak-s7 {
  font-size: clamp(.6rem, 13cqi, .9rem);
  padding: 4px 8px;
}
.q-card-head.has-streak {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.q-card-head.has-streak .write-kind { justify-self: start; margin-bottom: 0; }
.q-card-head.has-streak .bp-streak-bubble { justify-self: center; }
.q-card-head.has-streak .q-year { justify-self: end; }

/* Answer stamp — kept for non-strip uses; reveal now uses .bp-ans-pct. */
.bp-answer-stamp {
  position: relative; display: grid; place-items: center; gap: 2px;
  margin: 4px auto 8px; min-height: 3.4rem; text-align: center;
}
.bp-answer-stamp .bp-answer-mark {
  position: relative; z-index: 1;
  font-size: clamp(2.6rem, 9vw, 4.2rem); font-weight: 900; line-height: 1;
  color: #b8f0c2; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(1.8) rotate(-8deg);
  text-shadow: 0 0 18px rgba(105, 219, 124, .45);
}
.bp-answer-stamp .bp-stamp-burst {
  position: absolute; inset: 18% 28%; border-radius: 50%;
  border: 2px solid rgba(255,212,59,.65); pointer-events: none; opacity: 0;
}
.bp-answer-stamp.in .bp-answer-mark {
  animation: mm-stamp-slam 0.95s cubic-bezier(.12, 1.35, .28, 1) both;
}
.bp-answer-stamp.in .bp-stamp-burst {
  animation: mm-stamp-burst 0.95s ease both;
}

.bp-answer-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 0 0 4px; padding: 0 2px;
}
.bp-answer-title {
  margin: 0; font-size: .82rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.bp-answer-meta {
  flex: 0 1 auto; min-width: 0; text-align: right;
  font-size: .72rem; font-weight: 700; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 58%;
}

.bp-off-by {
  margin: 0; font-weight: 800;
  letter-spacing: .02em;
  font-size: .94rem; line-height: 1.2; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bp-off-by.bp-off-close { color: #9ef0b0; }
.bp-off-by.bp-off-mid { color: #9ecfff; }
.bp-off-by.bp-off-far { color: #ffb0b0; }

.bp-score-buckets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 8px 0 14px; text-align: left;
}
.bp-bucket {
  border-radius: 14px; padding: 12px 12px 14px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .22);
  display: grid; gap: 4px; justify-items: stretch;
}
.bp-bucket.close {
  border-color: rgba(78, 205, 196, .55);
  background: rgba(78, 205, 196, .12);
}
.bp-bucket.call.ok {
  border-color: rgba(105, 219, 124, .65);
  background: rgba(47, 172, 71, .16);
}
.bp-bucket.call.miss {
  border-color: rgba(255, 107, 107, .45);
  background: rgba(255, 107, 107, .1);
}
.bp-bucket.call.has-streak {
  padding-top: 6px;
  padding-bottom: 7px;
}
.bp-bucket-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 6px; min-width: 0; box-sizing: border-box;
}
.bp-bucket-label {
  font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim);
  flex: 0 1 auto; min-width: 0;
}
.bp-bucket-pts {
  font-size: 1.55rem; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--ink); line-height: 1.1;
}
.bp-bucket.call.ok .bp-bucket-pts { color: #b8f5c2; }
.bp-bucket.call.miss .bp-bucket-pts { color: #ffb4b4; }
.bp-bucket.close .bp-bucket-pts { color: #9ee8e1; }

.result-card .bp-answer-title-row { margin-bottom: 6px; }
.result-card .bp-total-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 4px 0 0; flex-wrap: wrap;
}
.result-card .bp-total-top { margin: 0; }
.result-card .bp-most-accurate-badge {
  flex: 0 1 auto; max-width: 10.5rem;
  font-size: .58rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.15; text-align: center;
  color: #10261a;
  padding: 5px 8px; border-radius: 8px;
  background: linear-gradient(135deg, #b8f5c2, #69db7c);
  border: 1px solid rgba(105, 219, 124, .85);
  box-shadow: 0 0 12px rgba(105, 219, 124, .35);
}
.result-card .bp-most-accurate-badge.bp-acc-tier-precision {
  color: #2b2208;
  background: linear-gradient(135deg, #ffe8a3, #ffd43b);
  border-color: rgba(255, 212, 59, .9);
  box-shadow: 0 0 12px rgba(255, 212, 59, .4);
}
.result-card .bp-most-accurate-badge.bp-acc-tier-bullseye {
  max-width: 11rem;
  font-size: .72rem; letter-spacing: .12em;
  color: #1a1200;
  padding: 7px 12px; border-radius: 10px;
  background: linear-gradient(135deg, #fff3bf, #ffd43b 45%, #ffa94d);
  border: 2px solid #ffe066;
  box-shadow:
    0 0 0 2px rgba(255, 212, 59, .35),
    0 0 18px rgba(255, 212, 59, .75),
    0 0 36px rgba(255, 146, 43, .45);
  animation: bp-bullseye-glow 1.4s ease-in-out infinite alternate;
}
.result-card .bp-total-label {
  margin: 0 0 2px; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
}
.result-card .bp-call-verdict { margin: 4px 0 0; }
.result-card .bp-strip { margin-bottom: 8px; }
.result-card .bp-strip.has-answer { margin-bottom: 18px; padding-bottom: 2.8rem; }

.bp-most-accurate {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: nowrap;
  margin: 10px 0 0; padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(105, 219, 124, .45);
  background: rgba(47, 172, 71, .12);
  min-width: 0;
}
.bp-most-accurate-label {
  flex: 0 0 auto;
  font-size: .68rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: #b8f5c2; white-space: nowrap;
}
.bp-most-accurate.bp-acc-tier-precision {
  border-color: rgba(255, 212, 59, .55);
  background: rgba(255, 212, 59, .12);
}
.bp-most-accurate.bp-acc-tier-precision .bp-most-accurate-label {
  color: #ffe066;
}
.bp-most-accurate.bp-acc-tier-bullseye {
  padding: 8px 12px;
  border: 2px solid rgba(255, 212, 59, .85);
  background: linear-gradient(90deg, rgba(255, 146, 43, .18), rgba(255, 212, 59, .22));
  box-shadow:
    0 0 0 2px rgba(255, 212, 59, .2),
    0 0 20px rgba(255, 212, 59, .45);
  animation: bp-bullseye-glow 1.4s ease-in-out infinite alternate;
}
.bp-most-accurate.bp-acc-tier-bullseye .bp-most-accurate-label {
  font-size: .82rem; letter-spacing: .14em;
  color: #ffe066;
  text-shadow: 0 0 12px rgba(255, 212, 59, .85);
}
@keyframes bp-bullseye-glow {
  from {
    box-shadow:
      0 0 0 2px rgba(255, 212, 59, .25),
      0 0 14px rgba(255, 212, 59, .4),
      0 0 28px rgba(255, 146, 43, .25);
  }
  to {
    box-shadow:
      0 0 0 3px rgba(255, 212, 59, .45),
      0 0 24px rgba(255, 212, 59, .75),
      0 0 42px rgba(255, 146, 43, .5);
  }
}
.bp-most-accurate-people {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-width: 0; justify-content: flex-start;
}
.bp-most-accurate-person {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
}
.bp-most-accurate-person .avatar {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
}
.bp-most-accurate-name {
  font-size: .88rem; font-weight: 800; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 9rem;
}
.host-stage .bp-most-accurate { margin-top: 12px; }

.bp-room-avg { text-align: center; margin: 10px 0 0; }
.bp-call-prompt { font-size: 1.35rem; margin: 8px 0 0; }
.bp-caption {
  text-align: center; margin: 6px 0 0; font-size: 1.15rem; font-weight: 700; line-height: 1.35;
}
.bp-caption.stage,
.bp-verdict .stage { opacity: 0; transform: translateY(10px); }
.bp-caption.stage.in,
.bp-verdict .stage.in { opacity: 1; transform: none;
  transition: opacity .35s ease, transform .4s cubic-bezier(.2, 1.25, .35, 1); }
.bp-caption b { font-size: 1.45rem; color: var(--green); font-variant-numeric: tabular-nums; }
.bp-caption-sub { font-size: .95rem; font-weight: 600; color: var(--ink-dim); }
.bp-src { font-size: .8rem; font-weight: 600; color: var(--ink-dim); margin-left: 6px; }
.bp-shared-cap { text-align: center; }
.bp-shared-cap b { color: var(--green); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.bp-call-sides {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0;
}
.bp-call-side {
  border-radius: 16px; padding: 8px 6px 10px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .22);
  min-width: 0;
}
.bp-call-side.high.win {
  border-color: rgba(105, 219, 124, .65); background: rgba(47, 172, 71, .16);
}
.bp-call-side.low.win {
  border-color: rgba(116, 192, 252, .65); background: rgba(74, 127, 212, .18);
}
.bp-call-side.lose { opacity: .72; }
.bp-call-side-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 3px; margin-bottom: 6px; min-width: 0; flex-wrap: nowrap;
}
.bp-call-side-label {
  font-size: .72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.bp-call-side.high .bp-call-side-label { color: #8fe39d; }
.bp-call-side.low .bp-call-side-label { color: #9ecfff; }
.bp-call-side-badge {
  flex: 0 0 auto;
  font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line);
}
.bp-call-side-badge.ok {
  color: #b8f5c2; border-color: rgba(105, 219, 124, .55); background: rgba(47, 172, 71, .2);
}
.bp-call-side-badge.miss {
  color: #ffb4b4; border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .12);
}
.bp-call-side-badge.tie {
  color: var(--gold); border-color: rgba(255, 212, 59, .45); background: rgba(255, 212, 59, .12);
}
.bp-call-faces {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; min-height: 36px;
}
.bp-call-face {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; max-width: 56px;
}
.bp-call-face.miss { opacity: .55; filter: grayscale(.35); }
.bp-call-face-name {
  font-size: .62rem; font-weight: 800; line-height: 1.15; text-align: center;
  color: var(--ink-dim); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-call-face-mark {
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 900; line-height: 1;
  background: #163222; color: #b8f5c2; border: 1px solid rgba(105, 219, 124, .55);
}
.bp-call-face.miss .bp-call-face-mark {
  background: #3a1518; color: #ffb4b4; border-color: rgba(255, 107, 107, .5);
}
.bp-call-empty {
  font-size: .78rem; font-weight: 700; color: var(--ink-dim); padding: 6px 2px;
}
  .shared .bp-call-sides { margin-top: 10px; }
  .shared .bp-call-side { padding: 6px 5px 8px; }
.shared .bp-call-face-name { display: none; }

.bp-verdict { display: grid; gap: 10px; margin-top: 16px; }
.bp-scoreboard { display: block !important; padding: 12px 14px !important; }
.bp-score-head {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  margin: 0 0 8px 92px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-dim); text-align: center;
}
.bp-score-list { display: grid; gap: 8px; }
.bp-score-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  animation: pop .38s cubic-bezier(.2, 1.4, .4, 1) both;
}
.bp-score-name { font-weight: 800; min-width: 72px; flex: 1 1 72px; }
.bp-split { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap;
  justify-content: flex-end; }
.bp-chip {
  font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28); color: var(--ink-dim);
}
.bp-chip.close { border-color: rgba(78, 205, 196, .55); color: #9ee8e1; }
.bp-chip.call { border-color: rgba(116, 192, 252, .55); color: #a5d4ff; }
.bp-chip.call.ok { border-color: rgba(105, 219, 124, .55); color: #b8f5c2; }
.bp-chip.call.miss { border-color: rgba(255, 107, 107, .45); color: #ffb4b4; }
.bp-chip.total { border-color: rgba(255, 212, 59, .55); color: var(--gold); font-size: .9rem; }

.bp-you-vs { margin: 0 0 4px; font-size: 1.05rem; }
.bp-you-vs .bp-ans { color: var(--green); }
.bp-avg-line { margin: 0 0 8px !important; }
.bp-call-verdict {
  margin: 0 0 10px; font-size: .95rem; font-weight: 800;
  color: var(--ink-dim);
}
.bp-call-verdict.ok { color: #b8f5c2; }
.bp-call-verdict.miss { color: #ffb4b4; }
.bp-result-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px;
}
.bp-result-col {
  background: rgba(0, 0, 0, .28); border-radius: 14px; padding: 10px 8px;
  border: 1px solid var(--line);
}
.bp-result-col.ok { border-color: rgba(105, 219, 124, .55); }
.bp-result-col.miss { border-color: rgba(255, 107, 107, .45); }
.bp-result-label {
  display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-dim); margin-bottom: 4px;
}
.bp-result-col b {
  font-size: 1.45rem; font-variant-numeric: tabular-nums; color: var(--gold);
}
.bp-why { list-style: none; padding: 0; margin: 10px 0 0; color: var(--ink-dim); font-size: .9rem; }
.bp-why li { padding: 2px 0; }

/* Device: slider */
.bp-readout { text-align: center; font-size: 3.6rem; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; margin: 6px 0 4px; color: var(--gold); }
.bp-readout span { font-size: 1.4rem; color: var(--ink-dim); }
.bp-readout.big { font-size: 4.2rem; color: var(--violet); }
/* Twice the old call-screen average (was .big at 4.2rem). */
.bp-readout.huge {
  font-size: clamp(5.2rem, 18vw, 8.4rem); color: var(--violet); margin: 4px 0 6px;
}
.bp-readout.huge span { font-size: clamp(1.6rem, 5vw, 2.4rem); }

.bp-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 46px;
  background: transparent; margin: 4px 0 0; }
.bp-slider::-webkit-slider-runnable-track { height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--coral)); }
.bp-slider::-moz-range-track { height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--coral)); }
.bp-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px;
  border-radius: 50%; background: #fff; border: 4px solid var(--ink); margin-top: -13px;
  box-shadow: 0 4px 12px rgba(0,0,0,.45); cursor: grab; }
.bp-slider::-moz-range-thumb { width: 40px; height: 40px; border-radius: 50%; background: #fff;
  border: 4px solid var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.45); cursor: grab; }
.bp-slider:disabled { opacity: .5; }
.bp-scale { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700;
  color: var(--ink-dim); margin: -4px 0 16px; }

.bp-call { display: grid; gap: 12px; }
.bp-call .btn { font-size: 1.3rem; padding: 20px; }
.bp-high { background: linear-gradient(135deg, #69db7c, #2fac47); }
.bp-low { background: linear-gradient(135deg, #74c0fc, #4a7fd4); }
.bp-call .btn.chosen { outline: 4px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------- host: credits */

/* Credits on the left, podium and controls stacked down the right. */
.credits-wrap { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 30px; align-items: start; }
.credits-side {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  height: calc(100vh - 150px); min-height: 420px;
}
/* Tall enough to read as pedestals across a room, short enough to leave the
   PLAY AGAIN stack room in the sidebar. */
.podium.mini { margin: 0; gap: 12px; align-items: flex-end; }
.podium.mini .plinth { gap: 8px; }
.podium.mini .plinth .block { padding: 6px 6px 3px; font-size: 1.7rem; }
.podium.mini .plinth.p1 .block { height: 108px; }
.podium.mini .plinth.p2 .block { height: 74px; }
.podium.mini .plinth.p3 .block { height: 53px; }
.podium.mini.has-zen .plinth .block { padding-bottom: 20px; }
.podium.mini.has-zen .plinth.p1 .block { height: 116px; }
.podium.mini.has-zen .plinth.p2 .block { height: 85px; padding-bottom: 18px; }
.podium.mini.has-zen .plinth.p3 .block { height: 62px; padding-bottom: 16px; }
.podium.mini .plinth-zen { font-size: .66rem; }
.podium.mini .zen-inline-gem-plinth { width: 13px; height: 13px; }
.podium.mini .plinth .who { font-size: .95rem; }
.podium.mini .avatar { width: 52px; height: 52px; border-radius: 15px; }
.podium.mini .plinth.p1 .avatar { width: 62px; height: 62px; border-radius: 18px; }

/* The roll is one tall column translated past a fixed window. Duration is set
   in JS from the measured height so the speed is the same for a 6-card game and
   a 12-card one. */
.credits-stage {
  position: relative; overflow: hidden;
  height: calc(100vh - 150px); min-height: 420px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}
.credits-roll {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; gap: 26px; padding: 0 8px;
  animation: credits-roll linear infinite;
}
.credits-copy { display: grid; gap: 26px; }
/* Fallbacks matter: if the measuring pass never runs, the roll still scrolls
   rather than sitting frozen with an invalid transform. */
@keyframes credits-roll {
  from { transform: translateY(var(--from, 100%)); }
  to   { transform: translateY(var(--to, -100%)); }
}

.credit { text-align: center; }
.credit-icon { font-size: 3.2rem; line-height: 1; }
.credit-kicker { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 800; color: var(--gold); }
.credit-title { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 900; margin: 4px 0 2px; }
.credit-blurb {
  color: var(--ink-dim); font-size: 1.05rem; margin: 0;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  min-width: 0;
}
.credit-blurb-text {
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.credit-award-zen {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 800; color: #b8f5c8; white-space: nowrap;
  font-size: .85em;
}
.credit-who { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 6px; font-size: 1.4rem; font-weight: 800; }
.credit.big .credit-title { font-size: clamp(2.2rem, 5vw, 3.6rem); background: linear-gradient(135deg, var(--gold), var(--coral) 60%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.credit-quote {
  font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 800; font-style: italic;
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--gold);
  border-radius: 16px; padding: 18px 22px; margin: 12px auto; max-width: 820px; text-align: left;
}
.credit-stats { display: grid; gap: 8px; max-width: 520px; margin: 12px auto 0; }
.credit-stat { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding: 8px 4px; font-weight: 700; }
.credit-stat b { color: var(--gold); font-variant-numeric: tabular-nums; }
.credit-standings { display: grid; gap: 6px; max-width: 620px; margin: 12px auto 0; }
.credit-rule { height: 2px; background: var(--line); max-width: 220px; margin: 6px auto; }

.credits-actions { display: grid; gap: 12px; position: sticky; top: 16px; }
.credits-actions h3 { margin: 0 0 2px; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.credits-actions .btn { font-size: 1rem; padding: 15px 14px; }
/* Match join-screen PLAY / WATCH button size (default .btn / .btn.secondary). */
.credits-actions .final-replay-btn {
  font-size: 1.1rem;
  text-align: center;
  padding: 16px;
}
.credits-actions .final-replay-btn.secondary { font-size: 1rem; }
.credits-actions .final-replay-btn small {
  text-align: center;
  font-size: .78rem;
  letter-spacing: 0;
}

/* ----------------------------------------------------- Tournament Results */
.tourney-section {
  position: relative;
  margin: 14px 0 18px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 209, 102, .35);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 209, 102, .18), transparent 55%),
    rgba(0, 0, 0, .28);
  text-align: left;
}
.tourney-section.phone .tourney-champ .avatar.lg {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}
.tourney-section-toggle {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  width: 32px;
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 209, 102, .45);
  background: rgba(0, 0, 0, .28);
  color: var(--gold, #ffd166);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.tourney-section-toggle:active {
  transform: scale(.94);
  background: rgba(255, 209, 102, .22);
}
.tourney-section-compact {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding-left: 36px;
}
.tourney-section.collapsed {
  padding: 8px 10px;
}
.tourney-section.collapsed .tourney-section-compact {
  display: flex;
}
.tourney-section.collapsed .tourney-section-full {
  display: none;
}
.tourney-section-compact-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--gold, #ffd166);
}
.tourney-section-compact-who {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
  text-align: right;
}
.tourney-section-compact-name {
  font-weight: 900;
  font-size: .95rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9rem;
}
.tourney-label {
  margin: 0 0 10px;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold, #ffd166);
  text-align: center;
  padding-left: 28px;
  padding-right: 28px;
}
.tourney-champ {
  position: relative;
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 209, 102, .22), rgba(255, 107, 74, .12));
  border: 1px solid rgba(255, 209, 102, .45);
  box-shadow: 0 0 24px rgba(255, 209, 102, .15);
}
.tourney-champ-kicker {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold, #ffd166);
  text-align: center;
  margin-bottom: 8px;
}
.tourney-champ-who {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.tourney-champ-meta { min-width: 0; text-align: left; }
.tourney-champ-name {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .01em;
}
.tourney-champ-wins {
  font-weight: 800;
  color: var(--ink-dim, #c8c0d4);
  font-size: .95rem;
  margin-top: 2px;
}
.tourney-champ-reason {
  font-size: .78rem;
  opacity: .75;
  margin-top: 2px;
}
.tourney-matches { display: grid; gap: 8px; }
.tourney-match {
  display: grid;
  gap: 6px;
  padding: 10px 10px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
.tourney-match-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
}
.tourney-match-num {
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  background: rgba(255, 209, 102, .2);
  color: var(--gold, #ffd166);
}
.tourney-match-title { font-size: .95rem; min-width: 0; }
.tourney-game-n {
  color: var(--gold, #ffd166);
  font-weight: 900;
  letter-spacing: .04em;
}
.tourney-match-winners { display: grid; gap: 4px; padding-left: calc(1.5em + 8px); }
.tourney-winner, .tourney-member {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tourney-winner .name, .tourney-member .name {
  flex: 1 1 auto;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tourney-winner .pts {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--gold, #ffd166);
}
.tourney-team-label {
  display: inline-block;
  font-weight: 900;
  color: var(--coral, #ff6b4a);
  margin-bottom: 4px;
}
.tourney-members { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.credits-side .tourney-section { max-width: none; }

.want-again-btn { width: 100%; margin-top: 14px; }
.want-again-btn.notified {
  opacity: .72; cursor: default;
  background: rgba(255,255,255,.12);
  box-shadow: none;
}
.want-change-btn { margin-top: 10px; }
.want-change-wrap { margin-top: 10px; }
.want-change-wrap .want-change-btn { margin-top: 0; }
.want-change-menu {
  margin-top: 8px;
  max-height: min(52vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, .35);
  padding: 6px;
  display: grid;
  gap: 4px;
}
.want-change-menu[hidden] { display: none; }
.want-change-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.want-change-option:active,
.want-change-option:hover {
  background: rgba(255, 255, 255, .1);
}
.want-change-loading { margin: 10px 8px; }
.final-replay-btn .change-pick-line {
  display: block;
  font-size: .78rem;
  letter-spacing: 0;
  opacity: .88;
  margin-top: 3px;
}
.final-replay-btn .change-pick-line + .change-pick-line { margin-top: 1px; }

/* Podium panel: PLAY AGAIN overlays 3rd-place (right plinth), vertically
   level with the 1st-place avatar, without shifting the pedestals. */
.final-podium-wrap {
  position: relative;
  display: block;
  margin: 0 0 6px;
  padding: 6px 8px 2px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
}
.final-podium-wrap.mini {
  margin: 0 0 8px;
  padding: 6px 8px 4px;
  border-radius: 16px;
}
.final-podium-topbar {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  top: 6px;
  width: auto;
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  min-height: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.final-podium-topbar > * {
  pointer-events: auto;
  width: calc((100% - 6px) / 3);
  max-width: 118px;
  flex: 0 0 auto;
}
.final-podium-topbar .final-zen-summary {
  order: 0;
}
.final-podium-topbar .final-again-menu-wrap,
.final-podium-topbar > .final-podium-again {
  order: 2;
  margin-left: auto;
}
.final-zen-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.final-zen-summary[hidden] { display: none !important; }
.final-podium-again.final-zen-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #5eead4, #7c6cf0);
  color: #1a1226;
  white-space: nowrap;
  overflow: visible;
}
.final-podium-again.final-zen-total .zen-inline-gem-final-total {
  width: 22px;
  height: 22px;
  transform: scale(1.35);
  transform-origin: center center;
  vertical-align: middle;
  /* Bigger gem without growing the pill — negative margin eats the overflow. */
  margin: -4px -2px -4px 0;
}
.final-zen-total small {
  display: block;
  width: 100%;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .85;
}
.final-podium-again.final-zen-total small {
  margin-top: 0;
}
.final-zen-lines {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 8;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: min(260px, 72vw);
  max-width: none;
  padding: 10px 12px;
  border-radius: 14px;
  background: #251643;
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: .81rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.final-zen-summary.open .final-zen-lines { display: flex; }
.final-zen-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  white-space: normal;
  max-width: none;
  overflow: visible;
}
.plinth-zen {
  /* Pin to the shared pedestal baseline so 1st/2nd/3rd Zen rows share one Y. */
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 3px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 0;
  min-height: 1.1em;
  /* +7% vs prior .72rem so podium Zen reads clearer on the shorter blocks. */
  font-size: .77rem;
  font-weight: 800;
  color: #111;
  line-height: 1.1;
  white-space: nowrap;
}
.plinth-zen.is-empty {
  visibility: hidden;
}
.podium.mini .plinth-zen,
.podium.phone .plinth-zen {
  font-size: .66rem;
  bottom: 2px;
}
.zen-inline-gem {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -3px;
  flex: 0 0 auto;
  display: inline-block;
}
.zen-inline-gem-sm { width: 12px; height: 12px; vertical-align: -2px; }
.zen-inline-gem-plinth { width: 14px; height: 14px; vertical-align: -2px; }
.final-podium-body {
  min-width: 0;
}
.final-podium-again {
  pointer-events: auto;
  width: auto; max-width: 100%; margin: 0;
  /* ~15% larger than prior compact size; still clipped to the topbar slot. */
  padding: 7px 9px; font-size: .78rem; line-height: 1.15;
  white-space: normal; flex: 0 0 auto;
  text-align: center;
  box-sizing: border-box;
  /* Soft cover so the avatar still reads underneath. */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.final-podium-again.want-again-btn { margin-top: 0; width: auto; }
.final-podium-again.final-replay-btn { width: auto; }
.final-podium-again small {
  display: block; font-size: .63rem; font-weight: 700;
  letter-spacing: .04em; opacity: .85; margin-top: 1px;
}
.final-podium-wrap,
.final-podium-topbar { overflow: visible; }
.final-again-menu-wrap {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
/* Same as .btn[hidden]: display:flex above beats the UA [hidden] rule. */
.final-again-menu-wrap[hidden] { display: none !important; }
.final-again-menu-wrap .final-podium-again { width: auto; max-width: 100%; }
.final-again-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  min-width: 148px;
  z-index: 8;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #1a1028;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.final-again-menu[hidden] { display: none; }
.final-again-option {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}
.final-again-option:hover,
.final-again-option:active {
  background: rgba(255, 255, 255, .1);
}
/* Same stamp/drop feel as end-screen awards when PLAY AGAIN finally appears. */
.final-podium-again.final-again-drop,
.final-again-menu-wrap.final-again-drop,
.final-zen-summary.final-again-drop {
  animation: final-again-drop 0.85s cubic-bezier(.12, 1.35, .28, 1) both;
}
@keyframes final-again-drop {
  0% { opacity: 0; transform: translateY(-22px) scale(1.28) rotate(-6deg); }
  55% { opacity: 1; transform: translateY(2px) scale(1.06) rotate(2deg); }
  75% { transform: translateY(-1px) scale(.97) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
.final-podium-wrap .podium { margin-top: 0; margin-bottom: 0; }
.final-podium-wrap .podium.phone {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.final-podium-wrap .podium.mini { margin: 0; }
.final-podium-wrap .aq-champs,
.final-podium-wrap .mm-champs { margin: 0; }

/* ----------------------------------------------------- end-of-game feedback */

.feedback-card {
  position: relative;
  margin-top: 20px; padding: 8px 10px 14px; text-align: left;
  border-radius: 18px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
}
.feedback-card.done { text-align: center; padding: 18px 16px; }
.feedback-toggle {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  width: 32px;
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 209, 102, .45);
  background: rgba(0, 0, 0, .28);
  color: var(--gold, #ffd166);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.feedback-toggle:active {
  transform: scale(.94);
  background: rgba(255, 209, 102, .22);
}
/* Same compact head whether open or closed — RATE GAME + stars on one row. */
.feedback-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding-left: 36px;
}
.feedback-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 800; margin: 0;
}
.feedback-thanks { font-weight: 800; font-size: 1.15rem; }
.star-row {
  display: flex; gap: 3px; margin: 0 0 0 auto; flex: 0 0 auto;
}
.star-btn {
  appearance: none; border: 0; background: transparent; padding: 2px 2px;
  font-size: 2.22rem; line-height: 1; color: rgba(255, 255, 255, .22);
  cursor: pointer; transition: color .12s, transform .12s;
}
.star-btn:hover, .star-btn:focus-visible { color: rgba(255, 212, 59, .55); transform: scale(1.08); }
.star-btn.on { color: var(--gold, #ffd43b); }
.feedback-more { margin-top: 10px; padding-left: 36px; }
.feedback-field { margin: 0 0 12px; }
.feedback-field textarea {
  resize: none; overflow: hidden;
  margin-top: 6px; line-height: 1.35; padding: 12px 14px;
  /* One readable line + padding — growComment must not shrink below this
     when the field was measured while the card was collapsed (display:none). */
  min-height: 3.4rem;
  box-sizing: border-box;
}
.feedback-note { margin: 10px 0 0; color: var(--coral); font-size: .9rem; }
.feedback-card .btn { width: 100%; }
.feedback-card.collapsed {
  padding: 8px 10px;
}
.feedback-card.collapsed .feedback-more { display: none; }

.my-awards { display: grid; gap: 10px; margin: 16px 0 0; }
.my-award {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255, 212, 59, .12); border: 1px solid var(--gold);
  border-radius: 16px; padding: 12px 14px;
  animation: pop .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
.my-award .ic { font-size: 1.9rem; }
.my-award b { display: block; font-size: 1rem; }
.my-award small { color: var(--ink-dim); }

/* Compact phone final — all games */
.final-result-card {
  display: grid; gap: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 14px; margin: 0 0 10px;
}
.final-result-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.final-kicker {
  font-size: .72rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.final-won {
  font-size: .72rem; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: #1a1226;
  background: var(--gold); border-radius: 999px; padding: 3px 10px;
}
.final-result-main {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.final-result-main b {
  font-size: clamp(1.6rem, 7vw, 2.1rem); font-weight: 1000; line-height: 1;
}
.final-result-main b small {
  font-size: .45em; font-weight: 800; color: var(--ink-dim); margin-left: .2em;
}
.final-result-main > span {
  font-size: 1.15rem; font-weight: 900; color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* The phone final's own podium markup is gone -- both end screens now build the
   colored plinths from podiumPlinths(). Panel surround lives on .final-podium-wrap
   so PLAY AGAIN and the pedestals share one frame. */
.podium.phone {
  padding: 6px 6px 0;
}

.final-awards-section { margin: 0 0 12px; }
.final-awards-label,
.final-standings-label {
  margin: 0 0 6px; font-size: .72rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
}
.final-awards { display: grid; gap: 4px; }
.final-award {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 36px;
  align-items: start; gap: 8px;
  background: rgba(255, 212, 59, .1); border: 1px solid rgba(255, 212, 59, .35);
  border-radius: 12px; padding: 6px 8px;
  animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.final-award .avatar.sm { width: 28px; height: 28px; border-radius: 8px; }
.final-award-body { min-width: 0; }
.final-award-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  min-width: 0;
}
.final-award-name {
  min-width: 0; flex: 1 1 auto;
  font-size: .9rem; font-weight: 900;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.final-award-title {
  flex: 0 1 auto; max-width: 55%;
  font-size: .86rem; font-weight: 800; color: var(--gold);
  text-align: right; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.final-award-blurb {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  color: var(--ink-dim); font-size: .7rem; font-weight: 600;
  line-height: 1.25; margin-top: 1px; min-width: 0;
}
.final-award-blurb-text {
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.final-award-zen {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 2px;
  font-weight: 800; color: #b8f5c8; white-space: nowrap;
}
.final-award-ic {
  font-size: 1.62rem; text-align: center; line-height: 1;
  padding-top: 1px; align-self: start;
}

.final-standings-section { margin: 0 0 8px; }
.final-standings { display: grid; gap: 2px; }
.final-stand-row {
  display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto;
  align-items: center; gap: 6px;
  padding: 2px 6px; min-height: 34px;
  border-radius: 8px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 800; font-size: .92rem;
}
.final-stand-row .avatar.sm { width: 28px; height: 28px; border-radius: 8px; }
.final-stand-row .rank { color: var(--ink-dim); font-weight: 900; text-align: center; }
.final-stand-row .name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.final-stand-row .pts {
  font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 1000;
}
.final-award.me {
  border: 2px solid #51cf66;
  background: rgba(81, 207, 102, .18);
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .22), 0 0 14px rgba(81, 207, 102, .28);
}
.final-stand-row.top { border-color: rgba(255, 212, 59, .45); background: rgba(255, 212, 59, .12); }
.final-stand-row.me {
  border: 2px solid #51cf66;
  background: rgba(81, 207, 102, .16);
  box-shadow: 0 0 0 1px rgba(81, 207, 102, .2);
}
.final-stand-row.top.me {
  border-color: #51cf66;
  background: rgba(81, 207, 102, .18);
}

/* Stamp / celebrate entrance for your awards and top-3 finish. */
.final-award.final-stamp .final-award-ic {
  display: inline-block;
  animation: mm-stamp-slam 0.95s cubic-bezier(.12, 1.35, .28, 1) both;
  transform-origin: center;
}
.final-award.final-stamp {
  animation: final-award-slam 0.85s cubic-bezier(.12, 1.35, .28, 1) both;
}
.final-stand-row.final-stamp {
  animation: final-award-slam 0.75s cubic-bezier(.12, 1.35, .28, 1) both;
}
.plinth.me .avatar {
  outline: 2px solid #51cf66;
  outline-offset: 3px;
}
.plinth.final-stamp {
  animation: final-award-slam 0.9s cubic-bezier(.12, 1.35, .28, 1) both;
}
.wrap.final-celebrate .final-awards-label {
  color: #b8f5c2;
}
@keyframes final-award-slam {
  0% { opacity: 0; transform: scale(1.35) rotate(-6deg); }
  55% { opacity: 1; transform: scale(1.06) rotate(2deg); }
  75% { transform: scale(.97) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}

.final-mm-minis-section { margin: 10px 0 8px; }
.final-mm-minis, .credit-mm-minis { display: grid; gap: 4px; }
.final-mm-mini-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  padding: 6px 8px; min-height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 800; font-size: .9rem;
}
.final-mm-mini-row .mm-mini-icon.final {
  width: 28px; height: 28px; color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
}
.final-mm-mini-row .mm-mini-icon.final svg { width: 22px; height: 22px; }
.final-mm-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.final-mm-label small {
  color: var(--ink-dim); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; font-size: .68rem; margin-left: 4px;
}
.final-mm-winner {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  justify-content: flex-end;
}
.final-mm-winner .avatar.sm { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; }
.final-mm-winner .name {
  max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 800; font-size: .86rem;
}
.final-mm-team {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 1000; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.final-mm-team-x {
  border: 1px solid rgba(255,107,107,.65);
  background: rgba(255,107,107,.16); color: #ff6b6b;
}
.final-mm-team-o {
  border: 1px solid rgba(116,192,252,.65);
  background: rgba(116,192,252,.16); color: #74c0fc;
}
.credit-mm-minis .final-mm-mini-row {
  background: rgba(255,255,255,.04);
}

@media (max-width: 900px) {
  .credits-wrap { grid-template-columns: 1fr; }
  .credits-stage { height: 60vh; }
  .credits-actions { position: static; }
}

.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 900px; margin: 0 auto; }
.award { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.award b { display: block; font-size: 1.05rem; }
.award small { color: var(--ink-dim); }

.host-q-wrap { position: relative; padding-right: 2.6em; }
.q-year {
  font-size: .7rem;
  font-weight: 700;
  color: var(--ink-dim);
  letter-spacing: .03em;
  line-height: 1.1;
  opacity: .9;
  white-space: nowrap;
}
.host-q-wrap .q-year {
  position: absolute;
  top: 2px;
  right: 0;
}
.q-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.q-card-head .write-kind { margin-bottom: 0; }
.q-card-head .q-year { flex: 0 0 auto; }

/* ------------------------------------------------------------ device screens */

.dev-head {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 7px;
}
/* Mini title / TEAM / CAPTAIN / WATCHING live in their own column between
   name+round and score+rank. Two rows match the name/round stack, so the
   head does not grow. */
.dev-head.has-mm-mid {
  display: grid;
  grid-template-columns: auto minmax(4.2rem, 1fr) minmax(0, 1.35fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
}
.dev-head.has-mm-mid > .avatar,
.dev-head.has-mm-mid > .dev-avatar-edit {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.dev-head.has-mm-mid > .who-name {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.dev-head.has-mm-mid > .who-name b {
  font-size: 1.05rem;
  line-height: 1.1;
}
.dev-head.has-mm-mid > .who-sub {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  color: var(--ink-dim);
  font-size: .8rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-head.has-mm-mid > .who-sub small { font-size: inherit; color: inherit; }
.dev-head.has-mm-mid > .mm-mini-title-bar {
  grid-column: 3;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 2px 8px;
  font-size: .62rem;
}
.dev-head.has-mm-mid > .dev-head-badges {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
}
.dev-head.has-mm-mid.has-mm-title:not(.has-mm-badges) > .mm-mini-title-bar {
  grid-row: 1 / span 2;
}
.dev-head.has-mm-mid.has-mm-badges:not(.has-mm-title) > .dev-head-badges {
  grid-row: 1 / span 2;
  align-self: center;
}
.dev-head.has-mm-mid > .pts {
  grid-column: 4;
  grid-row: 1 / span 2;
  margin-left: 0;
}
.dev-head-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.dev-head-badges .mm-captain-badge,
.dev-head-badges .mm-team-badge,
.dev-head-badges .spectator-watching-badge,
.dev-head-badges .aq-team-badge {
  margin: 0;
  padding: 1px 6px;
  font-size: .62rem;
  line-height: 1.15;
}
.dev-head .mm-mini-title-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: min(60vw, 14rem);
  min-width: 0;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--gold);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  box-sizing: border-box;
}
.dev-head .mm-mini-title-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.dev-head .mm-mini-title-bar .mm-mini-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--gold);
}
.dev-head .dev-avatar-edit {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; background: transparent;
  border-radius: 12px; cursor: pointer; color: inherit;
}
.dev-head .dev-name-edit {
  display: inline; margin: 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; border-radius: 6px;
}
.dev-head.can-edit-profile .dev-avatar-edit:hover,
.dev-head.can-edit-profile .dev-name-edit:hover { background: rgba(255,255,255,.06); }
.dev-head.can-edit-profile .dev-avatar-edit:focus-visible,
.dev-head.can-edit-profile .dev-name-edit:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.dev-head .who { flex: 1; min-width: 0; }
.dev-head .who b { display: block; font-size: 1.05rem; line-height: 1.1; }
.dev-head .who-name {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dev-head .who-name b { display: inline; min-width: 0; }
.dev-head .who-name .dev-name-edit {
  display: inline; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dev-head .who small { color: var(--ink-dim); font-size: .8rem; }
.dev-head .pts {
  flex: 0 0 auto; text-align: right; font-weight: 800;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.dev-head .pts small {
  display: block; color: var(--ink-dim); font-weight: 600;
  font-size: .7rem; line-height: 1.2; padding-top: 2px;
}
/* Top-3 place: bigger type, same row height via tighter padding/line-height. */
.dev-head .pts.rank-1 small,
.dev-head .pts.rank-2 small,
.dev-head .pts.rank-3 small {
  font-size: .84rem; font-weight: 800; line-height: 1;
  padding-top: 0; letter-spacing: .02em;
}
.dev-head .pts.rank-1 small {
  color: var(--gold);
  text-shadow:
    0 0 6px rgba(255, 212, 59, .95),
    0 0 14px rgba(255, 212, 59, .55);
  animation: place-glow-gold 1.8s ease-in-out infinite;
}
.dev-head .pts.rank-2 small {
  color: #dee2e6;
  text-shadow:
    0 0 6px rgba(222, 226, 230, .9),
    0 0 14px rgba(173, 181, 189, .5);
  animation: place-glow-silver 1.8s ease-in-out infinite;
}
.dev-head .pts.rank-3 small {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255, 255, 255, .85),
    0 0 14px rgba(255, 255, 255, .4);
  animation: place-glow-white 1.8s ease-in-out infinite;
}
@keyframes place-glow-gold {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 212, 59, .75), 0 0 10px rgba(255, 212, 59, .35);
  }
  50% {
    text-shadow: 0 0 8px rgba(255, 212, 59, 1), 0 0 18px rgba(255, 212, 59, .7);
  }
}
@keyframes place-glow-silver {
  0%, 100% {
    text-shadow: 0 0 5px rgba(222, 226, 230, .7), 0 0 10px rgba(173, 181, 189, .3);
  }
  50% {
    text-shadow: 0 0 8px rgba(222, 226, 230, 1), 0 0 18px rgba(173, 181, 189, .65);
  }
}
@keyframes place-glow-white {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 255, 255, .65), 0 0 10px rgba(255, 255, 255, .25);
  }
  50% {
    text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 18px rgba(255, 255, 255, .55);
  }
}
.mm-captain-badge {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(255,212,59,.65);
  background: rgba(255,212,59,.16); color: var(--gold);
  font-size: .68rem; font-weight: 1000; letter-spacing: .06em;
  line-height: 1.1; text-transform: uppercase; white-space: nowrap;
}
.mm-team-badge {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  margin-right: 4px; padding: 3px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 1000; letter-spacing: .06em;
  line-height: 1.1; text-transform: uppercase; white-space: nowrap;
}
.mm-team-badge-x {
  border: 1px solid rgba(255,107,107,.65);
  background: rgba(255,107,107,.16); color: #ff6b6b;
}
.mm-team-badge-o {
  border: 1px solid rgba(116,192,252,.65);
  background: rgba(116,192,252,.16); color: #74c0fc;
}
.dev-head.has-team-badge .pts { margin-left: 0; }

/* End-game: "Results — Saved…" sits to the right of the name, wraps onto a
   second line, and stays left of the score / ranking column. */
.dev-head.has-account-saved {
  align-items: flex-start;
}
.dev-head.has-account-saved .who {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px;
}
.dev-head.has-account-saved .who-name {
  flex: 0 1 auto; max-width: 100%;
}
.dev-head.has-account-saved .who b {
  display: inline; flex: 0 1 auto; max-width: 100%;
}
/* Keeps the green container it had as a standalone banner. Casing is set in
   the copy (SAVED / ACCOUNT), so no text-transform here. */
.dev-head .account-saved-inline {
  flex: 1 1 10em; min-width: 0; max-width: 16.8em;
  font-size: .74rem; font-weight: 900; line-height: 1.2;
  letter-spacing: .04em;
  color: var(--green);
  padding: 4px 9px; border-radius: 10px;
  border: 1px solid rgba(81, 207, 102, .55);
  background: rgba(81, 207, 102, .14);
}
button.account-saved-inline,
button.account-signed-inline {
  font: inherit;
  cursor: pointer;
  text-align: inherit;
}
button.account-saved-inline:hover,
button.account-signed-inline:hover,
button.account-saved-inline:focus-visible,
button.account-signed-inline:focus-visible {
  background: rgba(81, 207, 102, .28);
  outline: none;
}
button.account-saved-inline:active,
button.account-signed-inline:active {
  transform: scale(.97);
}
.dev-head .account-signed-inline,
.topbar-right .account-signed-inline {
  flex: 0 0 auto;
  font-size: .68rem; font-weight: 900; line-height: 1.2;
  letter-spacing: .06em;
  color: var(--green);
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(81, 207, 102, .55);
  background: rgba(81, 207, 102, .18);
}
/* Guest lobby CTA — same yellow treatment as the old body sign-in panel. */
.dev-head .account-guest-inline,
.topbar-right .account-guest-inline {
  flex: 1 1 auto; min-width: 0; max-width: 17.7em;
  margin: 0; cursor: pointer; font: inherit;
  font-size: .68rem; font-weight: 900; line-height: 1.25;
  letter-spacing: .03em; text-align: center;
  color: var(--ink);
  padding: 5px 8px; border-radius: 10px;
  border: 2px solid rgba(255, 212, 59, .5);
  background: linear-gradient(165deg, rgba(255, 212, 59, .14), rgba(255, 107, 107, .07));
  /* Wrap only at the <wbr> after "/", not mid-phrase. */
  overflow-wrap: normal; word-break: normal;
}
.dev-head .account-guest-inline:active,
.topbar-right .account-guest-inline:active {
  transform: scale(.97);
  background: linear-gradient(165deg, rgba(255, 212, 59, .22), rgba(255, 107, 107, .1));
}
.topbar-right .account-guest-inline {
  flex: 0 1 auto;
}
.dev-head.has-account-saved .pts {
  align-self: center; padding-top: 1px;
}

.dev-idle { text-align: center; padding: 16vh 10px 0; }
.dev-idle .eyes { font-size: 3.4rem; animation: bob 2.4s ease-in-out infinite; }
.dev-idle h2 { margin: 14px 0 6px; font-size: 1.5rem; }
.dev-idle p { color: var(--ink-dim); margin: 0; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.stack-progress { display: flex; gap: 6px; margin-bottom: 12px; }
.stack-progress i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.stack-progress i.done { background: var(--green); }
.stack-progress i.active { background: var(--gold); }

.write-kind {
  display: inline-block; font-size: calc(.72rem * 1.15); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; padding: 5px 11px; border-radius: 999px; margin-bottom: 10px;
}
.write-kind.truth { background: rgba(81, 207, 102, .22); color: var(--green); }
.write-kind.lie { background: rgba(255, 107, 107, .22); color: var(--coral); }
.write-kind.pof-pick { font-size: calc(.72rem * 1.15 * 1.15); }
.write-prompt { font-size: 1.35rem; font-weight: 800; line-height: 1.25; margin: 0 0 14px; }
input.answer-caps { text-transform: uppercase; }
.char-count { font-size: .78rem; color: var(--ink-dim); text-align: right; margin-top: -8px; margin-bottom: 12px; }

.ballot { display: grid; gap: 10px; }
.ballot button {
  display: flex; align-items: center; gap: 12px; text-align: left; font: inherit;
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  padding: 15px 16px; cursor: pointer; width: 100%;
}
.ballot button .tag { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-weight: 900; font-size: .85rem; }
.ballot button .ballot-text { flex: 1; min-width: 0; }
.ballot button .ballot-tally {
  flex: 0 0 auto; margin-left: auto; text-align: right;
  font-size: 1.7rem; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; color: #8ce99a;
  min-width: 1.4em;
}
.ballot.ballot-subject button[disabled] { opacity: 1; cursor: default; }
.ballot button:active { transform: scale(.985); }
.ballot button.chosen { border-color: var(--gold); background: rgba(255, 212, 59, .18); }
.ballot button[disabled] { opacity: .35; cursor: not-allowed; }
.ballot button[disabled].mine { opacity: .5; border-style: dashed; }
.ballot.ballot-subject button[disabled].mine { opacity: 1; border-style: dashed; }

.result-card { text-align: center; padding: 28px 20px; }
.result-card .big { font-size: 3.2rem; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.result-card .big.zero { color: var(--ink-dim); }
.result-card ul { list-style: none; padding: 0; margin: 10px 0 0; color: var(--ink-dim); }
.result-card li { padding: 3px 0; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .lobby { grid-template-columns: 1fr; }
  .options { grid-template-columns: 1fr; }
}

@media (min-width: 1000px) {
  .app { padding: 6px 30px 40px; }
  .app:has(.host-head) { padding-top: 3px; }
  .topbar { padding: 10px 26px; }
  body:has(.host-head) .topbar { padding-bottom: 5px; }
  .brand .zz-mark { height: 44px; max-width: 230px; }
  .zz-game-title-mark { max-height: 56px; font-size: clamp(.78rem, 1.6vw, 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------- pause and check-in */

/* Check-in stays full-cover. Pause docks at the bottom in a shorter card so
   the game (and instruction copy) stay visible above — but the full overlay
   still captures pointer events so nobody can tap buttons or type while held. */
.hold-over {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 4, 18, .82); backdrop-filter: blur(6px);
  animation: fade .2s ease;
}
.hold-over.hold-over-dock {
  place-items: end center;
  align-content: end;
  padding: 8px 14px calc(10px + var(--safe-b, 0px));
  background: linear-gradient(
    to top,
    rgba(8, 4, 18, .96) 0%,
    rgba(8, 4, 18, .72) 28%,
    rgba(8, 4, 18, .28) 52%,
    rgba(8, 4, 18, .06) 72%,
    transparent 100%
  );
  backdrop-filter: none;
}
.hold-over.hold-over-dock .hold-card {
  padding: 12px 16px 10px;
  border-radius: 18px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .35);
}
/* Belt-and-suspenders: game UI under the overlay cannot take focus or clicks. */
body.is-held #app {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.hold-over.hold-over-dock .hold-icon { font-size: 1.35rem; }
.hold-over.hold-over-dock .hold-title {
  min-height: 0;
  margin: 0 0 1px;
}
.hold-over.hold-over-dock .hold-card h2 {
  /* +20% vs prior dock title (was clamp(1.05rem, 2.8vw, 1.3rem)) */
  font-size: clamp(1.26rem, 3.36vw, 1.56rem);
}
.hold-over.hold-over-dock .hold-card p { margin: 2px 0 4px; font-size: .86rem; }
.hold-over.hold-over-dock .hold-clock {
  font-size: clamp(1.45rem, 5vw, 1.9rem); margin-bottom: 0;
}
.hold-over.hold-over-dock .hold-actions { margin-top: 8px; gap: 6px; }
.hold-over.hold-over-dock .hold-actions .btn {
  padding-top: 10px; padding-bottom: 10px; font-size: .95rem;
}
.hold-card {
  width: min(520px, 100%); text-align: center;
  background: linear-gradient(170deg, #2a1750, #1a1030);
  border: 2px solid var(--line); border-radius: 24px;
  padding: 30px 26px; box-shadow: var(--shadow);
  animation: pop .34s cubic-bezier(.2, 1.3, .4, 1) both;
}
.hold-over.checkin .hold-card { border-color: var(--gold); }
.hold-over.ending .hold-card { border-color: var(--coral); }

.hold-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No min-height — it ate the margin cut under GAME PAUSED. */
  margin: 0 0 3px;
}
.hold-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.85rem;
  line-height: 1;
}
.hold-card h2 {
  /* +20% vs prior title (was clamp(1.25rem, 3.6vw, 1.7rem)) */
  font-size: clamp(1.5rem, 4.32vw, 2.04rem);
  margin: 0;
  line-height: 1.15;
  text-align: center;
  width: 100%;
}
.hold-card p { color: var(--ink-dim); margin: 2px 0 14px; line-height: 1.5; }
.hold-clock {
  font-size: clamp(2.4rem, 9vw, 3.4rem); font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--teal); margin-bottom: 6px;
}
.hold-over.checkin .hold-clock { color: var(--gold); }
.hold-over.ending .hold-clock { color: var(--coral); animation: pulse .8s ease-in-out infinite; }

.hold-actions { display: grid; gap: 10px; margin-top: 16px; }
.hold-actions .btn { width: 100%; }
.hold-actions .btn.notified {
  opacity: .72; cursor: default;
  background: rgba(255,255,255,.12);
  box-shadow: none;
}
.game-instructions-over {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center; padding: 16px;
  background: rgba(8, 4, 18, .72);
  animation: fade .15s ease;
}
.game-instructions-card {
  width: min(520px, 100%);
  max-height: min(84vh, 720px);
  overflow: auto;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, #2a1840 0%, #14101f 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  color: var(--ink, #e8eef5);
}
.game-instructions-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.game-instructions-head h2 {
  margin: 0; font-size: 1.05rem; line-height: 1.2; font-weight: 900;
}
.game-instructions-head .zz-game-title-mark { font-size: .95em; }
.game-instructions-close {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.08); color: inherit; font-size: 1.4rem; cursor: pointer;
}
.game-instructions-close:hover { background: rgba(255,255,255,.14); }
.game-instructions-tag {
  margin: 0 0 8px; font-size: .78rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; opacity: .7;
}
.game-instructions-body { margin-bottom: 14px; }
.game-instructions-body .shared-rules { margin: 0; padding-left: 1.2em; }
.game-instructions-body .shared-rules li { margin: 0 0 8px; }
.game-instructions-mini {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.game-instructions-card > .btn { width: 100%; }
.hold-actions .btn.hold-send-msg {
  background: rgba(255, 255, 255, .10);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: none;
  font-size: .95rem;
  padding: 12px;
}
.hold-actions .btn.hold-send-msg:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .38);
}

/* ------------------------------------------------------------ notice banner */

/* Set in the Admin site. Sits at the very top of the join screen and the game
   picker, above everything else, so it is read before anyone starts. */
.notice-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255, 212, 59, .12); border: 1px solid var(--gold);
  border-radius: 14px; padding: 12px 14px; margin: 0 0 16px;
  font-weight: 700; font-size: .95rem; line-height: 1.45;
  animation: pop .3s cubic-bezier(.2, 1.3, .4, 1) both;
}
.notice-banner span:first-child { font-size: 1.1rem; line-height: 1.35; }

/* ---------------------------------------------------------- Fib Factory */

/* The question is the hero on the big screen, with the missing bit called out
   so the room knows exactly what they are inventing. */
.pof-question {
  font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.3;
  text-align: center; max-width: 1100px; margin: 26px auto 0;
}
.pof-blank {
  display: inline-block; min-width: 3.5em; text-align: center;
  border-bottom: 5px solid var(--gold); color: var(--gold);
  border-radius: 3px; margin: 0 .12em;
}
body[data-game="pof"] {
  --bg: #1a120c;
  --bg-2: #2a1a10;
  --card-solid: #2e2014;
  background:
    radial-gradient(1100px 700px at 12% -10%, #6a3a12 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #3a2410 0%, transparent 55%),
    linear-gradient(160deg, #1a120c 0%, #2a1a10 100%);
  background-attachment: fixed;
}
body[data-game="pof"] .bg-blobs span:nth-child(1) { background: #e8c35a; }
body[data-game="pof"] .bg-blobs span:nth-child(2) { background: #c06028; }
body[data-game="pof"] .bg-blobs span:nth-child(3) { background: #8a6a3a; }

/* ------------------------------------------------------------- Eliminated */

body[data-game="eliminated"] {
  --bg: #080c18;
  --bg-2: #101a2e;
  --card-solid: #131d33;
  background:
    radial-gradient(1100px 700px at 12% -10%, #1b2f52 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #2a1c46 0%, transparent 55%),
    linear-gradient(160deg, #080c18 0%, #101a2e 100%);
  background-attachment: fixed;
}
body[data-game="eliminated"] .bg-blobs span:nth-child(1) { background: #2b4a7a; }
body[data-game="eliminated"] .bg-blobs span:nth-child(2) { background: #4a3378; }
body[data-game="eliminated"] .bg-blobs span:nth-child(3) { background: #1f6b6b; }

/* The table. Everyone visible at once, so the room can point at each other. */
.seats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px; margin: 22px auto 0; max-width: 1040px;
}
.seat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 12px 8px; animation: pop .3s cubic-bezier(.2, 1.4, .4, 1) both;
}
.seat .name { font-weight: 800; font-size: .92rem; text-align: center; line-height: 1.2; word-break: break-word; }
.seat.out { opacity: .42; }
.seat.out .avatar { filter: grayscale(1); }
.seat-role {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--coral);
}
.seat-votes {
  position: absolute; top: -8px; right: -6px; min-width: 26px; height: 26px;
  border-radius: 999px; background: var(--gold); color: #1a1226;
  display: grid; place-items: center; font-weight: 900; font-size: .85rem;
  border: 2px solid var(--bg);
}

.elim-events { text-align: center; margin: 20px auto 0; max-width: 900px; }
.elim-events p {
  font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 700; line-height: 1.4;
  margin: 0 0 8px; animation: pop .4s cubic-bezier(.2, 1.3, .4, 1) both;
}

/* Your role, on your device only. Loud enough that nobody mistakes whose it is. */
.role-card {
  background: linear-gradient(165deg, #1d2b4a, #131d33);
  border: 2px solid var(--line); border-radius: 18px;
  padding: 14px 16px; margin: 12px 0 14px;
}
.role-card .role-name {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -.5px; margin-bottom: 2px;
}
.role-card p { margin: 0; color: var(--ink-dim); font-size: .9rem; line-height: 1.45; }
.role-card .role-out { color: var(--coral); font-weight: 700; margin-top: 8px; }
.role-mates { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.role-mates > span:first-child { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); font-weight: 800; }
.role-eliminator { border-color: var(--coral); }
.role-eliminator .role-name { color: var(--coral); }
.role-angel { border-color: var(--teal); }
.role-angel .role-name { color: var(--teal); }
.role-trickster, .role-maniac { border-color: var(--violet); }
.role-trickster .role-name, .role-maniac .role-name { color: var(--violet); }
.role-tough { border-color: var(--gold); }
.role-tough .role-name { color: var(--gold); }
.role-civilian .role-name { color: var(--ink); }

.ballot button .avatar { flex: 0 0 auto; }

/* Solo mode: the whole table has to fit above the fold, alongside the player's
   own ballot, so seats shrink rather than push the buttons off screen. */
.seats.compact { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 12px; }
.seats.compact .seat { padding: 8px 4px; border-radius: 14px; gap: 4px; }
.seats.compact .seat .name { font-size: .72rem; }
.seats.compact .seat-role { font-size: .58rem; }
.seats.compact .seat-votes { min-width: 20px; height: 20px; font-size: .72rem; top: -6px; right: -4px; }

@media (max-width: 640px) {
  .seats { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .role-card .role-name { font-size: 1.25rem; }
}

/* ------------------------------------------- join flow: fit on one screen */

/* The avatar picker is the first thing a player sees after typing their name.
   Five columns keeps the cast large enough to read while still fitting most of
   the grid on common phones; the card itself is tightened below. */
@media (max-width: 640px) {
  .avatar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .avatar-pick { border-width: 2px; border-radius: 16px; }
  /* The word "taken" is still small, so the state is carried by
     grayscale plus a corner mark instead of a label. */
  .avatar-pick[disabled]::after { content: "\00d7"; font-size: .85rem; line-height: 1;
    inset: auto 3px 1px auto; background: none; padding: 0; color: var(--coral); font-weight: 900; }
  .avatar-pick[disabled] { opacity: .3; filter: grayscale(1); }
  /* The picker card carries the tallest content on the phone, so it gets the
     tighter padding rather than every card getting it. */
  .card.pick-card { padding: 14px; }
  .card.pick-card h2 { font-size: 1.25rem; margin-bottom: 2px; }
}

/* The no-screen lobby is the densest screen on the site: room code, share
   buttons, the whole roster, the length picker and START GAME, all on a phone.
   Left at desktop proportions the start button fell off the bottom. */
.lobby-swap { max-width: 280px; margin: 0 auto; }

@media (max-width: 640px) and (max-height: 780px) {
  .shared { padding: 12px; margin: 10px 0 12px; }
  .share-code { font-size: clamp(2.1rem, 12vw, 3rem); letter-spacing: .1em; margin: 0 0 2px; }
  /* Wrap chips onto new rows so nobody scrolls sideways off-screen. */
  .shared-roster {
    gap: 5px; margin-top: 10px; flex-wrap: wrap; overflow-x: visible;
    padding-bottom: 2px; max-width: 100%;
  }
  .shared-chip { flex: 0 1 auto; max-width: 100%; font-size: .78rem; padding: 3px 10px 3px 3px; gap: 5px; }
  .shared-chip .name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 9em;
  }
  .shared-chip .avatar { width: 22px; height: 22px; border-radius: 7px; }
  .host-strip { margin-top: 10px; padding-top: 10px; }
  .host-strip label.field { margin-bottom: 8px; }
  .host-strip select { padding: 10px 12px; font-size: 1rem; }
  .host-strip .btn { padding: 13px; }
  .btn.lobby-start-top { padding: 7px 12px; font-size: .78rem; }
  .app { padding-bottom: calc(12px + var(--safe-b)); }
  .lobby-swap { padding: 11px; font-size: .95rem; }
  .cap-help-line { gap: 5px; font-size: .74rem; margin: 4px 0 8px; }
  .cap-help-btn { width: 22px; height: 22px; font-size: .78rem; }
  .cap-account-link { font-size: .64rem; padding: 5px 7px; }

  /* Near-one-screen game beats (intro, choice, call, team pick, role): reclaim
     up to ~20% vertical chrome only. Lobby density rules above stay tighter. */
  .app { padding-top: 3px; }
  .dev-head {
    padding-top: 5px; padding-bottom: 8px; margin-bottom: 6px;
  }
  .card:not(.pick-card) {
    padding-top: 16px; padding-bottom: 16px;
  }
  .card.tight {
    padding-top: 11px; padding-bottom: 11px;
  }
  .btn {
    padding-top: 13px; padding-bottom: 13px;
  }
  .btn.lobby-start-top { padding: 7px 12px; font-size: .78rem; }
  .btn.ghost {
    padding-top: 10px; padding-bottom: 10px;
  }
  .ballot { gap: 8px; }
  .ballot button {
    padding-top: 12px; padding-bottom: 12px;
  }
  .write-prompt { margin-bottom: 11px; }
  .want-skip-btn { margin-top: 8px; }
  .role-card {
    padding-top: 11px; padding-bottom: 11px;
    margin-top: 10px; margin-bottom: 11px;
  }
  .option {
    padding-top: 13px; padding-bottom: 13px;
  }
  .options { gap: 11px; }
  .dev-idle { padding-top: 13vh; }
  .dev-idle h2 { margin-top: 11px; }
  .bp-call .btn { padding-top: 16px; padding-bottom: 16px; }
  .bp-waiting { padding-top: 6.4vh; }
  .mm-instr { padding-top: 19px; padding-bottom: 19px; }
  .mm-pick-head { margin-top: 6px; margin-bottom: 8px; }
  .mm-pick-reminder {
    padding-top: 7px; padding-bottom: 7px;
  }
  .mm-captain-line { margin-top: 11px; margin-bottom: 5px; }
  .result-card { padding-top: 22px; padding-bottom: 22px; }
  p.lede { margin-bottom: 14px; }
}

/* 360x640 Androids and the 375x667 iPhone SE are the tightest things anyone
   actually plays on, and the no-screen lobby is the screen that runs out of
   room first. Measured: without this it overflows by 6px on the SE. */
@media (max-width: 640px) and (max-height: 700px) {
  .shared { margin-bottom: 8px; }
  .app { padding-bottom: calc(8px + var(--safe-b)); }
  .dev-head { padding-top: 5px; padding-bottom: 8px; margin-bottom: 5px; }
  .avatar-grid { gap: 6px; }
  .brand .zz-mark { height: 34px; max-width: 120px; }
  .zz-game-title-mark { max-height: 40px; font-size: clamp(.58rem, 2.8vw, .78rem); max-width: min(100%, 200px); }
  .topbar { min-height: 54px; padding-top: 7px; padding-bottom: 7px; }
  .dev-idle { padding-top: 12.8vh; }
}

/* --------------------------------------------------------- Read the Room */

/* Deep violet and amber. Distinct from the purple of Friend Frenzy,
   the teal of Percent Perfect, the ember of Fib Factory and the indigo of
   Eliminated, while staying in the same family. */
body[data-game="rtr"] {
  --bg: #1a0f2e;
  --bg-2: #241540;
  --card-solid: #2c1a4d;
  --amber: #ffb84d;
  background:
    radial-gradient(1100px 700px at 12% -10%, #4b2a7a 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #6b3fa0 0%, transparent 55%),
    linear-gradient(160deg, #1a0f2e 0%, #241540 100%);
  background-attachment: fixed;
}
body[data-game="rtr"] .bg-blobs span:nth-child(1) { background: #7b4bc4; }
body[data-game="rtr"] .bg-blobs span:nth-child(2) { background: #ffb84d; }
body[data-game="rtr"] .bg-blobs span:nth-child(3) { background: #4a2f8a; }

/* ------------------------------------------------------ Fox in the Fold */

body[data-game="fitf"] {
  --bg: #101b3d;
  --bg-2: #1b1235;
  --card-solid: #211847;
  --fitf-amber: #ffd166;
  --fitf-lav: #cdb4ff;
  --fitf-fox: #ff8a3d;
  background:
    radial-gradient(900px 620px at 8% -8%, #3d3a7a 0%, transparent 58%),
    radial-gradient(760px 540px at 108% 10%, #7b2f54 0%, transparent 55%),
    linear-gradient(155deg, #101b3d 0%, #1b1235 58%, #351936 100%);
  background-attachment: fixed;
}
body[data-game="fitf"] .bg-blobs span:nth-child(1) { background: #cdb4ff; }
body[data-game="fitf"] .bg-blobs span:nth-child(2) { background: #ffd166; }
body[data-game="fitf"] .bg-blobs span:nth-child(3) { background: #ff8a3d; }

/* Pause / Continue ride in the head row. The head's bottom margin collapses
   against the top margin of whatever follows, so the two together were still
   only 18px and the buttons sat on the panel below. Padding does not collapse,
   so this gap always holds. */
.fitf-stage .host-head {
  margin-bottom: 8px;
  padding-bottom: 24px;
}

.fitf-stats {
  display: grid;
  /* Fox column ~half of a former equal third; that width goes to Category.
     Round then gives ~10% of its own width back to Fox. */
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 0.6fr) minmax(0, 0.9fr);
  gap: 10px;
  max-width: 860px; margin: 12px auto 16px;
}
.fitf-stats .fitf-stat,
.fitf-stats > div {
  text-align: center; background: rgba(255,255,255,.075); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px;
  min-width: 0;
  overflow: hidden;
}
.fitf-stat-cat {
  container-type: inline-size;
  container-name: fitf-cat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
}
.fitf-stats span {
  display: block; color: var(--ink-dim); font-weight: 900; letter-spacing: .13em;
  text-transform: uppercase; font-size: .72rem;
}
.fitf-stats b { display: block; color: var(--fitf-amber); font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.05; }
.fitf-stats b.fitf-cat {
  /* Scale with the category cell so long names shrink, short ones fill the box. */
  font-size: clamp(1.15rem, 11cqi, 2.45rem);
  line-height: 1.12;
  margin: 2px 0 0;
  padding: 0 4px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
@supports not (font-size: 1cqi) {
  .fitf-stats b.fitf-cat {
    font-size: clamp(1.15rem, 3.6vw, 2.2rem);
  }
}

.fitf-ask-board { max-width: 920px; margin: 12px auto; text-align: center; }
.fitf-ask-progress {
  color: var(--ink-dim); font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; font-size: .78rem; margin-bottom: 10px;
}
.fitf-ask-pair {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.fitf-ask-person { display: grid; gap: 6px; justify-items: center; min-width: 100px; }
/* Questions board: 30% smaller than prior 86px asker/answerer faces. */
.fitf-ask-board .fitf-ask-person .avatar,
.fitf-ask-board .fitf-ask-person .avatar.lg,
.avatar.fitf-ask {
  width: 60px;
  height: 60px;
  border-radius: 11px;
}
.fitf-ask-person b { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
.fitf-ask-person span { color: var(--ink-dim); font-weight: 800; text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; }
.fitf-ask-arrow { font-size: 2rem; color: var(--fitf-amber); font-weight: 1000; }
.fitf-ask-q {
  font-size: clamp(1.4rem, 3.5vw, 2.4rem); line-height: 1.2; margin: 8px auto 14px;
  max-width: 28ch; color: #fff;
}
.fitf-ask-answer {
  display: inline-grid; gap: 4px; background: rgba(255,209,102,.14);
  border: 1px solid rgba(255,209,102,.45); border-radius: 16px; padding: 14px 22px;
}
.fitf-ask-answer span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); font-weight: 900; }
.fitf-ask-answer b { font-size: clamp(1.3rem, 3vw, 2rem); color: var(--fitf-amber); text-transform: uppercase; }
.fitf-ask-answer b.fitf-verbal-ans,
.fitf-qa-a b.fitf-verbal-ans { text-transform: none; }
.fitf-answer-card textarea,
.fitf-answer-input {
  text-transform: uppercase;
}
.fitf-qa-a b { text-transform: uppercase; }
.fitf-answer-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}
.fitf-answer-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(.78rem, 2.8vw, .95rem);
  padding-left: 10px;
  padding-right: 10px;
}
.fitf-yn-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 14px;
}
.fitf-yn-row .btn {
  flex: 1 1 0;
  min-width: 0;
}

.fitf-qa-recap {
  display: grid; gap: 10px; max-width: 920px; margin: 12px auto;
  max-height: min(52vh, 520px); overflow: auto; padding-right: 4px;
}
.fitf-qa-row {
  background: rgba(255,255,255,.08); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; text-align: left;
}
.fitf-qa-row.auto { opacity: .72; }
.fitf-qa-who {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-weight: 900; margin-bottom: 6px;
}
.fitf-qa-who em { color: var(--ink-dim); font-style: normal; font-weight: 800; font-size: .85rem; }
.fitf-qa-q { margin: 0 0 4px; color: var(--ink-dim); font-weight: 800; }
.fitf-qa-a { margin: 0; font-size: 1.15rem; }

.fitf-guess-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  max-width: 720px; margin: 16px auto;
}
.fitf-guess-tile {
  min-height: 72px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,.1); color: var(--ink); font: inherit; font-weight: 950;
  font-size: clamp(1rem, 2.2vw, 1.35rem); padding: 12px; cursor: pointer;
  display: grid; place-items: center; text-align: center;
}
button.fitf-guess-tile:active { transform: scale(.98); }
.fitf-guess-tile.correct {
  border-color: rgba(78,205,196,.75); background: rgba(78,205,196,.22);
  color: #8ff5ea; box-shadow: 0 0 0 2px rgba(78,205,196,.35);
}
.fitf-guess-tile.wrong { opacity: .45; filter: grayscale(.4); }
.fitf-guess-tile.picked {
  border-color: var(--fitf-amber);
  background: rgba(255,209,102,.22);
  box-shadow: 0 0 0 2px rgba(255,209,102,.4);
  transform: scale(1.04);
}
.fitf-guess-locked {
  text-align: center; margin: 14px 0 0; font-size: 1.15rem; font-weight: 900;
}
.fitf-guess-locked b { color: var(--fitf-amber); }

.fitf-guess-show {
  max-width: 520px; margin: 8px auto 0; text-align: center;
}
.fitf-guess-show-who {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 900; margin-bottom: 12px; color: var(--ink-dim);
}
.fitf-reveal-block {
  margin: 0 0 18px;
  transition: filter .35s ease, opacity .35s ease;
}
.fitf-reveal-label {
  letter-spacing: .16em; font-weight: 1000; font-size: .78rem;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px;
}
.fitf-reel {
  border-radius: 18px; border: 2px solid var(--line);
  background: rgba(0,0,0,.28); padding: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.fitf-reel-window {
  height: 76px; overflow: hidden; position: relative;
  border-radius: 14px;
}
.fitf-reel-window::before,
.fitf-reel-window::after {
  content: ''; position: absolute; left: 0; right: 0; height: 18px; z-index: 2;
  pointer-events: none;
}
.fitf-reel-window::before {
  top: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
}
.fitf-reel-window::after {
  bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.fitf-reel-strip { will-change: transform; }
.fitf-reel-item {
  height: 76px; display: grid; place-items: center;
  font-weight: 1000; font-size: clamp(1.35rem, 4vw, 2rem);
  padding: 0 12px; text-align: center; line-height: 1.15;
}
.fitf-reel-item.is-blank {
  color: transparent;
  user-select: none;
}
.fitf-reveal-block.is-locked .fitf-reel {
  animation: fitfReelSettle .45s ease;
}
.fitf-reveal-block.hit .fitf-reel {
  border-color: rgba(80, 220, 140, .85);
  background: rgba(60, 180, 110, .22);
  box-shadow: 0 0 0 3px rgba(80, 220, 140, .35), 0 12px 40px rgba(40, 160, 90, .25);
}
.fitf-reveal-block.hit .fitf-reveal-label { color: #7dcea0; }
.fitf-reveal-block.miss .fitf-reel {
  border-color: rgba(255, 100, 100, .8);
  background: rgba(200, 60, 60, .2);
  box-shadow: 0 0 0 3px rgba(255, 100, 100, .3), 0 12px 40px rgba(180, 40, 40, .22);
}
.fitf-reveal-block.miss .fitf-reveal-label { color: #f0a0a0; }
.fitf-reveal-verdict {
  margin: 8px 0 4px; font-weight: 1000; letter-spacing: .14em;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
}
.fitf-reveal-verdict.hit { color: #7dcea0; }
.fitf-reveal-verdict.miss { color: #f0a0a0; }
.fitf-reveal-others {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px;
}
.fitf-reveal-others span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: .85rem;
  background: rgba(255,255,255,.08); border: 1px solid var(--line);
}
.fitf-reveal-others span.ok { border-color: rgba(80,220,140,.5); color: #7dcea0; }
.fitf-reveal-others span.miss { opacity: .75; }

.fitf-fox-show {
  max-width: 560px; margin: 8px auto 0; text-align: center;
}
.fitf-fox-got-away {
  min-height: 220px;
  display: grid; place-items: center;
  padding: 28px 12px;
}
.fitf-fox-got-away-title {
  margin: 0;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  font-weight: 1000; letter-spacing: .1em;
  color: var(--fitf-fox);
  text-shadow: 0 0 28px rgba(255, 138, 61, .45);
  animation: fitfSlamIn .65s cubic-bezier(.2,1.4,.3,1) both;
}
.fitf-fox-show-title {
  margin: 0 0 16px;
  font-size: clamp(1.35rem, 4.5vw, 2.1rem);
  font-weight: 1000; letter-spacing: .14em;
  color: var(--fitf-amber);
}
.fitf-fox-caught-panel {
  margin: 0 auto 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(200, 40, 50, .14);
  border: 1px solid rgba(255, 80, 90, .45);
  max-width: 520px;
}
.fitf-fox-caught-label {
  font-size: .72rem; font-weight: 1000; letter-spacing: .16em;
  color: #ff6b6b; margin-bottom: 10px;
}
.fitf-fox-caught-list {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.fitf-fox-caught-card {
  display: grid; justify-items: center; gap: 4px;
  min-width: 88px; opacity: .92;
}
.fitf-fox-caught-card .avatar,
.avatar.fitf-fox-caught {
  width: 64px; height: 64px; border-radius: 14px;
  filter: grayscale(.35) brightness(.9);
  box-shadow: 0 0 0 2px rgba(255, 60, 70, .55);
}
.fitf-fox-caught-name {
  font-weight: 900; font-size: .92rem; line-height: 1.1;
}
.fitf-fox-caught-stamp {
  font-size: .62rem; font-weight: 1000; letter-spacing: .14em;
  color: #ff5a4a;
}
.fitf-fox-reels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: start;
}
.fitf-fox-reel {
  padding: 8px;
  overflow: hidden;
}
.fitf-fox-window {
  height: 148px;
  overflow: hidden;
  position: relative;
}
.fitf-fox-strip {
  will-change: transform;
}
.fitf-fox-card {
  height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.fitf-fox-card .avatar,
.avatar.fitf-fox-card {
  width: 88px; height: 88px; border-radius: 18px;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 138, 61, .35) 0%, transparent 60%),
    #12182f;
}
.fitf-fox-card-face {
  width: 88px; height: 88px; border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 2px dashed rgba(255,255,255,.18);
  flex: 0 0 auto;
}
.fitf-fox-card-name {
  font-weight: 1000;
  font-size: clamp(1.05rem, 3.2vw, 1.45rem);
  line-height: 1.1;
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fitf-fox-card.is-blank .fitf-fox-card-name {
  color: var(--ink-dim); letter-spacing: .2em;
}
.fitf-fox-landed {
  margin-top: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.fitf-fox-landed-badge {
  animation: fitfSlamIn .55s cubic-bezier(.2,1.4,.3,1) both;
}
.fitf-reveal-block.hit .fitf-fox-reel {
  border-color: rgba(255, 138, 61, .85);
  background: rgba(255, 138, 61, .16);
  box-shadow: 0 0 0 3px rgba(255, 138, 61, .28), 0 12px 40px rgba(255, 100, 40, .22);
}

@keyframes fitfReelSettle {
  0% { transform: scale(1.04); }
  60% { transform: scale(.98); }
  100% { transform: scale(1); }
}

.fitf-suspects, .fitf-vote-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; max-width: 920px; margin: 16px auto; }
.fitf-suspects span, .fitf-vote {
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; color: var(--ink);
  font: inherit; font-weight: 900; text-align: left;
}
.fitf-vote { cursor: pointer; min-height: 60px; }
.fitf-vote.chosen, .fitf-vote:active { border-color: var(--fitf-amber); background: rgba(255,209,102,.16); }
.fitf-story {
  max-width: 720px; margin: 18px auto; text-align: center; background: rgba(255,255,255,.08);
  border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 850;
}
.fitf-result {
  max-width: 720px; margin: 18px auto;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  background: transparent; border: 0; padding: 10px 8px;
  text-align: left;
}
.fitf-result.tied {
  justify-content: center; text-align: center;
}
.fitf-result.tied .fitf-result-copy { align-items: center; }
.fitf-result.tied .fitf-result-msg { text-align: center; }
.fitf-result-avatar {
  flex: 0 0 auto;
  width: clamp(118px, 22vw, 168px);
  height: clamp(118px, 22vw, 168px);
  border-radius: 22px;
  padding: 3px;
  background: linear-gradient(135deg, #9b6bff 0%, #5b7cff 42%, #ff8a3d 100%);
  box-shadow:
    0 0 0 1px rgba(255, 138, 61, .18),
    0 10px 28px rgba(0, 0, 0, .35),
    0 0 32px rgba(255, 138, 61, .22);
}
.fitf-result.caught .fitf-result-avatar {
  background: linear-gradient(135deg, #3de0ff 0%, #c44bff 42%, #ff3b4a 100%);
  box-shadow:
    0 0 0 1px rgba(255, 60, 80, .35),
    0 10px 28px rgba(0, 0, 0, .45),
    0 0 36px rgba(255, 40, 60, .35);
}
.fitf-result.caught .fitf-result-avatar .avatar,
.fitf-result.caught .avatar.fitf-reveal {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 60, 70, .35) 0%, transparent 58%),
    #12182f;
}
.fitf-result.caught .fitf-result-copy {
  position: relative;
  isolation: isolate;
  gap: 8px;
}
.fitf-result.caught .fitf-result-copy::before {
  content: '';
  position: absolute;
  left: -18%; right: -28%; top: -12%; bottom: -28%;
  background:
    radial-gradient(ellipse at 42% 48%, rgba(220, 24, 40, .62) 0%, rgba(120, 10, 20, .2) 42%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.fitf-result.caught .fitf-result-copy > * { position: relative; z-index: 1; }
.fitf-result.caught .fitf-result-embers { z-index: 0; }
.fitf-result-embers {
  position: absolute; inset: -8% -4% -18% 8%;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.fitf-result-embers i {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 1px;
  background: #ff5a3a;
  box-shadow: 0 0 8px rgba(255, 80, 40, .9);
  opacity: .85;
  animation: fitfEmberFloat 2.8s ease-in-out infinite;
}
.fitf-result-embers i:nth-child(1) { left: 18%; top: 22%; width: 4px; height: 4px; animation-delay: 0s; }
.fitf-result-embers i:nth-child(2) { left: 62%; top: 18%; width: 6px; height: 6px; background: #ff9a3c; animation-delay: .35s; }
.fitf-result-embers i:nth-child(3) { left: 78%; top: 36%; width: 3px; height: 3px; animation-delay: .7s; }
.fitf-result-embers i:nth-child(4) { left: 48%; top: 58%; width: 5px; height: 5px; background: #ff3b4a; animation-delay: 1.1s; }
.fitf-result-embers i:nth-child(5) { left: 88%; top: 62%; width: 4px; height: 4px; animation-delay: .2s; }
.fitf-result-embers i:nth-child(6) { left: 28%; top: 72%; width: 3px; height: 3px; background: #ffb347; animation-delay: 1.5s; }
.fitf-result-embers i:nth-child(7) { left: 70%; top: 78%; width: 5px; height: 5px; animation-delay: .9s; }
.fitf-result-embers i:nth-child(8) { left: 12%; top: 48%; width: 4px; height: 4px; background: #ff6b4a; animation-delay: 1.8s; }
@keyframes fitfEmberFloat {
  0%, 100% { transform: translateY(0) rotate(12deg); opacity: .35; }
  40% { transform: translateY(-14px) rotate(-8deg); opacity: .95; }
  70% { transform: translateY(-6px) rotate(18deg); opacity: .7; }
}
.fitf-result-caught-stamp {
  margin: 2px 0 4px;
  font-size: clamp(2.35rem, 8vw, 4.4rem);
  font-weight: 1000;
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  transform: rotate(-5deg);
  transform-origin: left center;
  text-shadow:
    0 3px 0 rgba(40, 0, 0, .45),
    0 0 18px rgba(255, 40, 50, .55),
    0 0 40px rgba(220, 20, 40, .4);
  /* Rough “stamped” edges without an extra font file. */
  filter: contrast(1.08) drop-shadow(0 1px 0 rgba(0,0,0,.35));
  animation: fitfCaughtStamp .7s cubic-bezier(.2,1.5,.3,1) both;
}
@keyframes fitfCaughtStamp {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.35); }
  60% { opacity: 1; transform: rotate(-3deg) scale(.96); }
  100% { opacity: 1; transform: rotate(-5deg) scale(1); }
}
.fitf-result-avatar .avatar,
.avatar.fitf-reveal {
  width: 100%; height: 100%; border-radius: 19px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 138, 61, .45) 0%, transparent 58%),
    #12182f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.fitf-result-copy {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.fitf-result-name {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 1000; line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #ffe08a 0%, #ff9a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .fitf-result-name {
    color: #ffb347;
    -webkit-text-fill-color: #ffb347;
    background: none;
  }
}
.fitf-result-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 16px;
  border-radius: 999px;
  background: #ff8a3d;
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 138, 61, .35);
}
.fitf-result.caught .fitf-result-badge {
  background: linear-gradient(90deg, #c9182b 0%, #ff3b4a 55%, #ff6a3d 100%);
  box-shadow: 0 6px 18px rgba(220, 30, 50, .45);
}
.fitf-result.caught .fitf-result-badge-ico {
  background: rgba(12, 8, 16, .72);
  color: #fff;
}
.fitf-result-role {
  font-weight: 1000; letter-spacing: .14em; font-size: .95rem;
  text-transform: uppercase; line-height: 1;
}
.fitf-result-badge-ico {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12, 18, 40, .55);
  color: #fff; flex: 0 0 auto;
}
.fitf-result-badge-svg { width: 19px; height: 19px; display: block; }
/* Standalone fox pill: same red as the caught badge, but it does not need a
   .fitf-result.caught ancestor, so every reveal screen can drop it in. */
.fitf-fox-badge {
  background: linear-gradient(90deg, #c9182b 0%, #ff3b4a 55%, #ff6a3d 100%);
  box-shadow: 0 6px 18px rgba(220, 30, 50, .45);
}
.fitf-fox-badge .fitf-result-badge-ico {
  background: rgba(12, 8, 16, .72);
  color: #fff;
}
.fitf-fox-badge-sm {
  padding: 4px 5px 4px 11px; gap: 7px;
  box-shadow: 0 4px 12px rgba(220, 30, 50, .38);
}
.fitf-fox-badge-sm .fitf-result-role { font-size: .68rem; letter-spacing: .12em; }
.fitf-fox-badge-sm .fitf-result-badge-ico { width: 20px; height: 20px; }
.fitf-fox-badge-sm .fitf-result-badge-svg { width: 14px; height: 14px; }
.fitf-result-rule {
  width: min(100%, 280px); height: 2px; margin: 2px 0 0;
  background: linear-gradient(90deg, transparent, #ff9a3c 12%, #ff9a3c 88%, transparent);
  position: relative;
}
.fitf-result-rule::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #ffb347;
  box-shadow: 0 0 8px rgba(255, 179, 71, .55);
}
.fitf-result.caught .fitf-result-rule {
  background: linear-gradient(90deg, transparent, #ff3b4a 12%, #ff3b4a 88%, transparent);
}
.fitf-result.caught .fitf-result-rule::after {
  background: #ff5a4a;
  box-shadow: 0 0 10px rgba(255, 60, 70, .7);
}
.fitf-result-msg {
  margin: 0; display: grid; gap: 2px;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-weight: 900; line-height: 1.25;
}
.fitf-result-msg-lead { color: #fff; }
.fitf-result-msg-tail { color: #ff8a3d; }
.fitf-result.caught .fitf-result-msg { display: block; }
.fitf-result.caught .fitf-result-msg-tail { color: #ff3b4a; }
.fitf-role h1 { margin: 8px 0 12px; font-size: clamp(2rem, 9vw, 4rem); color: var(--fitf-amber); }
.fitf-role.fox h1 { color: var(--fitf-fox); }
.fitf-phone .btb-cheer-bar { margin-top: 12px; }
.fitf-phone .dev-head { position: relative; }
.fitf-ask-person .btb-cheers {
  justify-content: center; min-height: 1.25em;
  font-size: clamp(1.15rem, 3.2vw, 1.55rem);
}

@keyframes fitfSlamIn {
  0% { transform: scale(1.35); opacity: 0; }
  60% { transform: scale(.96); opacity: 1; }
  100% { transform: scale(1); }
}
.slam-in { animation: fitfSlamIn .55s cubic-bezier(.2,1.4,.3,1) both; }

@media (max-width: 640px) {
  .fitf-stats { gap: 6px; grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.65fr) minmax(0, 0.9fr); }
  .fitf-stats .fitf-stat,
  .fitf-stats > div { padding: 8px 4px; }
  .fitf-stats span { font-size: .58rem; letter-spacing: .08em; }
  .fitf-stats b { font-size: 1.35rem; }
  .fitf-stats b.fitf-cat { font-size: clamp(1rem, 9cqi, 1.55rem); }
  @supports not (font-size: 1cqi) {
    .fitf-stats b.fitf-cat { font-size: clamp(1rem, 4.2vw, 1.45rem); }
  }
  .fitf-guess-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fitf-ask-pair { gap: 10px; }
  .fitf-result {
    flex-direction: column; text-align: center; gap: 14px;
  }
  .fitf-result-copy { align-items: center; }
  .fitf-result-msg { text-align: center; }
  .fitf-result.caught .fitf-result-caught-stamp {
    transform-origin: center center;
  }
}

/* --------------------------------------------- Hint Hustle */
body[data-game="ttc"] {
  --ttc-teal: #4ecdc4;
  --ttc-rose: #ff8fab;
  --ttc-gold: #ffe066;
  --ttc-plum: #cdb4db;
  background:
    radial-gradient(760px 520px at 0% -8%, #14645f 0%, transparent 58%),
    radial-gradient(780px 560px at 106% 0%, #7c3150 0%, transparent 56%),
    linear-gradient(150deg, #091f2b 0%, #1d2947 46%, #3a1b46 100%);
  background-attachment: fixed;
}
body[data-game="ttc"] .bg-blobs span:nth-child(1) { background: #4ecdc4; }
body[data-game="ttc"] .bg-blobs span:nth-child(2) { background: #ff8fab; }
body[data-game="ttc"] .bg-blobs span:nth-child(3) { background: #ffe066; }

.ttc-stage { padding-bottom: 12px; }
.ttc-score-strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; max-width: 920px; margin: 6px auto 10px;
}
.ttc-score {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  background: rgba(255,255,255,.075); display: flex; align-items: center;
  justify-content: space-between; gap: 10px; box-shadow: var(--shadow-soft);
}
.ttc-score.left { border-color: rgba(78,205,196,.38); }
.ttc-score.right { border-color: rgba(255,143,171,.38); }
.ttc-score span {
  color: var(--ink-dim); font-weight: 1000; text-transform: uppercase;
  letter-spacing: .08em; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ttc-score b {
  color: var(--ttc-gold); font-size: clamp(1.5rem, 3.7vw, 2.8rem);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.ttc-note {
  text-align: center; color: var(--ink-dim); font-weight: 900;
  margin: 4px auto 10px;
}
.ttc-note b { color: var(--ttc-gold); }
.ttc-roster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; max-width: 1040px; margin: 8px auto 0;
}
.ttc-team-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  background: rgba(255,255,255,.07);
}
.ttc-team-card.left { border-color: rgba(78,205,196,.35); }
.ttc-team-card.right { border-color: rgba(255,143,171,.35); }
.ttc-team-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.ttc-team-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttc-team-head span {
  display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px;
  background: rgba(255,224,102,.14); color: var(--ttc-gold); font-weight: 1000;
}
.ttc-team-members { display: flex; flex-wrap: wrap; gap: 6px; }
.ttc-team-members span {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 3px 7px 3px 3px;
  color: var(--ink-dim); font-weight: 850; max-width: 100%;
}
.ttc-team-members .avatar { width: 26px; height: 26px; border-radius: 8px; }
.ttc-current {
  max-width: 960px; margin: 8px auto 0; text-align: center;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  background: rgba(255,255,255,.065); padding: 14px;
}
.ttc-category span, .ttc-answer span {
  display: block; color: var(--ink-dim); font-weight: 1000;
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem;
}
.ttc-category b {
  display: block; margin-top: 2px; font-size: clamp(1.6rem, 4vw, 3.1rem);
  color: var(--ttc-gold); line-height: 1.05;
}
.ttc-current h2 { font-size: clamp(1.2rem, 2.6vw, 2rem); margin: 8px 0 2px; }
.ttc-byline, .ttc-writer-silent { color: var(--ink-dim); font-weight: 850; margin: 3px 0 10px; }
.ttc-hints {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin: 10px 0;
}
.ttc-hint, .ttc-hint-choice {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  background: rgba(255,255,255,.065); color: var(--ink); text-align: left;
  min-height: 82px; font: inherit;
}
.ttc-hint.open { border-color: rgba(255,224,102,.45); background: rgba(255,224,102,.1); }
.ttc-hint.closed { opacity: .58; }
.ttc-hint span, .ttc-hint-choice span {
  display: block; color: var(--ink-dim); font-weight: 1000;
  text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; margin-bottom: 4px;
}
.ttc-hint b, .ttc-hint-choice b { display: block; font-size: 1rem; line-height: 1.25; }
.ttc-hint-choice { cursor: pointer; }
.ttc-hint-choice:active, .ttc-hint-choice.chosen {
  border-color: var(--ttc-gold); background: rgba(255,224,102,.16);
}
.ttc-answer {
  display: grid; gap: 3px; justify-items: center; max-width: 460px; margin: 10px auto 0;
  border: 1px solid rgba(255,224,102,.38); border-radius: 8px;
  background: rgba(255,224,102,.1); padding: 10px;
}
.ttc-answer b { color: var(--ttc-gold); font-size: 1.45rem; }
.ttc-answer small { color: var(--ink-dim); font-weight: 850; }
.ttc-answer strong { color: var(--green); font-size: 1.55rem; }
.ttc-card { padding: 14px; }
.ttc-team-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 14px; }
.ttc-side, .ttc-name-choice {
  border: 2px solid var(--line); border-radius: 12px; padding: 16px 12px;
  background: rgba(255,255,255,.06); color: var(--ink); font: inherit;
  font-weight: 1000; cursor: pointer;
}
.ttc-side.left.chosen { border-color: var(--ttc-teal); background: rgba(78,205,196,.16); }
.ttc-side.right.chosen { border-color: var(--ttc-rose); background: rgba(255,143,171,.16); }
.ttc-name-votes { display: grid; gap: 8px; margin-top: 10px; }
.ttc-name-choice.chosen, .ttc-name-choice:active {
  border-color: var(--ttc-gold); background: rgba(255,224,102,.16);
}

@media (max-width: 640px) {
  .ttc-score-strip { gap: 5px; margin-bottom: 7px; }
  .ttc-score { padding: 6px 7px; }
  .ttc-score span { font-size: .58rem; letter-spacing: .06em; }
  .ttc-score b { font-size: 1.35rem; }
  .ttc-roster, .ttc-hints { grid-template-columns: 1fr; gap: 7px; }
  .ttc-current { padding: 10px; }
  .ttc-hint, .ttc-hint-choice { min-height: 58px; padding: 8px 9px; }
  .ttc-card { padding: 12px; }
}

/* ------------------------------------------------------- Break the Bank */

body[data-game="btb"] {
  --bg: #081f28;
  --bg-2: #102f36;
  --card-solid: #123943;
  --bank-gold: #ffd166;
  --bank-mint: #4ecdc4;
  background:
    radial-gradient(900px 620px at 8% -8%, #1a6a64 0%, transparent 58%),
    radial-gradient(760px 540px at 108% 10%, #6d375f 0%, transparent 55%),
    linear-gradient(155deg, #081f28 0%, #102f36 58%, #24172d 100%);
  background-attachment: fixed;
}
body[data-game="btb"] .bg-blobs span:nth-child(1) { background: #4ecdc4; }
body[data-game="btb"] .bg-blobs span:nth-child(2) { background: #ffd166; }
body[data-game="btb"] .bg-blobs span:nth-child(3) { background: #b56576; }

body[data-game="ttf"] {
  --bg: #1a1028;
  --bg-2: #24153a;
  --card-solid: #2e1c48;
  background:
    radial-gradient(1000px 680px at 10% -12%, #5a3d1a 0%, transparent 58%),
    radial-gradient(860px 560px at 108% 8%, #1f5a6e 0%, transparent 55%),
    linear-gradient(158deg, #1a1028 0%, #24153a 55%, #102432 100%);
  background-attachment: fixed;
}
body[data-game="ttf"] .bg-blobs span:nth-child(1) { background: #e8a838; }
body[data-game="ttf"] .bg-blobs span:nth-child(2) { background: #3db8a8; }
body[data-game="ttf"] .bg-blobs span:nth-child(3) { background: #c45c8a; }

body[data-game="cw"] {
  --bg: #0b1220;
  --bg-2: #101a2e;
  --card-solid: #162238;
  --cw-gold: #e8c35a;
  --cw-ember: #ff6b4a;
  --cw-panel: rgba(8, 14, 28, .82);
  --cw-line: rgba(120, 170, 255, .22);
  background:
    radial-gradient(900px 620px at 12% -10%, #1a3a5c 0%, transparent 58%),
    radial-gradient(760px 540px at 108% 12%, #2a1848 0%, transparent 55%),
    linear-gradient(158deg, #0b1220 0%, #101a2e 55%, #0c1828 100%);
  background-attachment: fixed;
}
body[data-game="cw"] .bg-blobs span:nth-child(1) { background: #4da3ff; }
body[data-game="cw"] .bg-blobs span:nth-child(2) { background: #9b6bff; }
body[data-game="cw"] .bg-blobs span:nth-child(3) { background: #e8c35a; }

/* (game title styles live with .zz-game-title-mark near the topbar) */

.wrap.cw-play {
  display: flex;
  flex-direction: column;
  max-width: min(1180px, 100%);
}
.wrap.cw-play > .timer-wrap,
.wrap.cw-play > .timer-inline { order: 1; }
.wrap.cw-play > .want-skip-btn,
.wrap.cw-play > .solo-host-skip { order: 2; }
.wrap.cw-play > .cw-stage { order: 3; }
.wrap.cw-play > .shared { order: 4; }
.cw-stage {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 1180px; margin: 0 auto;
}
.cw-host .cw-stage { max-width: 1400px; }
.cw-panel {
  background: var(--cw-panel);
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 0;
}
.cw-kicker {
  font-size: .68rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: #b197fc; margin: 0 0 6px;
}
.cw-msg-slot {
  height: 2.4rem;
  min-height: 2.4rem;
  margin: 0 0 8px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
}
.cw-board-block > .cw-msg-slot {
  max-width: min(92vw, 520px);
  margin-left: auto;
  margin-right: auto;
}
.cw-msg-copy {
  margin: 0;
  max-width: 100%;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.25;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-map {
  background:
    radial-gradient(circle at 20% 30%, rgba(40, 80, 120, .35), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(60, 40, 90, .3), transparent 45%),
    rgba(6, 12, 24, .55);
  border: 1px solid var(--cw-line);
  border-radius: 18px;
  padding: 12px 10px 14px;
}
.cw-board-wrap {
  position: relative;
  margin: 0 auto;
  max-width: min(92vw, 520px);
}
.cw-board {
  display: grid;
  gap: 12px;
  margin: 0;
  max-width: none;
}
.cw-board[data-side="2"] { grid-template-columns: repeat(2, 1fr); }
.cw-board[data-side="3"] { grid-template-columns: repeat(3, 1fr); }
.cw-board[data-side="4"] { grid-template-columns: repeat(4, 1fr); }
.cw-board[data-side="5"] { grid-template-columns: repeat(5, 1fr); }
.cw-move-arrows {
  position: absolute; inset: 0;
  display: grid; gap: 12px;
  pointer-events: none; z-index: 6;
}
.cw-move-arrows[data-side="2"] {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.cw-move-arrows[data-side="3"] {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.cw-move-arrows[data-side="4"] {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.cw-move-arrows[data-side="5"] {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}
.cw-move-arr {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
}
.cw-move-svg {
  width: 28px; height: 28px;
  fill: #e8c35a;
  filter: drop-shadow(0 0 2px #0b1220) drop-shadow(0 1px 2px #0b1220) drop-shadow(0 0 8px rgba(232, 195, 90, .75));
}
.cw-move-arr.dir-e .cw-move-svg { transform: rotate(0deg); }
.cw-move-arr.dir-s .cw-move-svg { transform: rotate(90deg); }
.cw-move-arr.dir-w .cw-move-svg { transform: rotate(180deg); }
.cw-move-arr.dir-n .cw-move-svg { transform: rotate(-90deg); }
.cw-move-arrows[data-side="4"] .cw-move-svg,
.cw-move-arrows[data-side="5"] .cw-move-svg { width: 20px; height: 20px; }
.cw-cell {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(18, 32, 52, .9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  padding: 6px 5px 7px;
  min-height: 0;
  position: relative;
  border: 2px solid rgba(255, 255, 255, .14);
}
.cw-cell::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
  z-index: 1; pointer-events: none;
}
.cw-cell.is-empty {
  opacity: .28;
  background: rgba(20, 40, 60, .55);
}
.cw-cell.is-empty::after { display: none; }
.cw-cell.tone-purple { background: linear-gradient(180deg, #5a3aa8, #2a1858); }
.cw-cell.tone-red { background: linear-gradient(180deg, #b04050, #5a1824); }
.cw-cell.tone-blue { background: linear-gradient(180deg, #2f6fbf, #16365e); }
.cw-cell.tone-green { background: linear-gradient(180deg, #2f8f58, #16482c); }
.cw-cell.tone-gold { background: linear-gradient(180deg, #b08a28, #5a4210); }
.cw-cell.tone-orange { background: linear-gradient(180deg, #c06028, #5a2c10); }
.cw-cell.is-king { box-shadow: inset 0 0 0 3px rgba(232, 195, 90, .85); }
.cw-cell.has-ball {
  border-color: var(--cw-ember);
  box-shadow: inset 0 0 0 3px var(--cw-ember), 0 0 18px rgba(255, 107, 74, .55);
}
.cw-cell.is-king.has-ball {
  box-shadow:
    inset 0 0 0 3px var(--cw-ember),
    0 0 0 3px rgba(232, 195, 90, .7),
    0 0 18px rgba(255, 107, 74, .55);
}
.cw-cell-role {
  position: relative; z-index: 2;
  display: inline-block;
  font-size: 1.36rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 900; color: #fff;
  background: rgba(0, 0, 0, .55);
  border-radius: 999px; padding: 4px 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.cw-cell .avatar.cw {
  position: absolute; top: 6%; left: 15%; z-index: 0;
  width: 70%; height: 70%;
  max-width: none; max-height: none;
  border-radius: 12px; flex: none;
  overflow: hidden;
}
.cw-cell .avatar.cw .zz-avatar-face {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.cw-ch-pip {
  position: absolute; right: 6px; top: 6px; z-index: 3;
  min-width: 4.8rem; height: 4.8rem; padding: 0 10px;
  border-radius: 999px; background: #fff; color: #111;
  font-size: 2.4rem; font-weight: 900; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.cw-ch-pip.is-ch-9 {
  background: #b8f5c8; color: #0d3d1a;
}
.cw-ch-pip.is-ch-18 {
  background: #dcc8f8; color: #3b1d6e;
}
.cw-cell .cw-name {
  position: relative; z-index: 2;
  font-size: 1.36rem; font-weight: 800; text-align: center; color: #fff;
  line-height: 1.1; max-width: 94%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .7);
}
.cw-ch-sub {
  position: relative; z-index: 2;
  font-size: 1.04rem; font-weight: 800; color: var(--cw-gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}
.cw-ball-dot {
  position: absolute; top: 6px; left: 6px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 14px 6px 10px;
  border-radius: 999px; background: var(--cw-ember); color: #fff;
  font-size: 1.24rem; font-weight: 900; letter-spacing: .08em;
  line-height: 1; box-shadow: 0 0 12px var(--cw-ember), 0 0 0 2px rgba(255, 255, 255, .4);
  pointer-events: none;
}
.cw-ball-dot::before {
  content: '';
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff6e8;
  box-shadow: 0 0 6px #fff, 0 0 8px rgba(255, 255, 255, .8);
  flex: 0 0 auto;
}
.cw-line-table { margin-top: 2px; }
.cw-line-table > .cw-kicker { margin-bottom: 8px; }

.cw-roster {
  display: grid; gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cw-seat {
  display: flex; align-items: center; gap: 8px;
  background: var(--cw-panel);
  border: 1px solid var(--cw-line);
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 0; position: relative;
}
.cw-seat.tone-purple { border-color: rgba(155, 107, 255, .45); }
.cw-seat.tone-red { border-color: rgba(255, 90, 106, .45); }
.cw-seat.tone-blue { border-color: rgba(77, 163, 255, .45); }
.cw-seat.tone-green { border-color: rgba(61, 207, 122, .45); }
.cw-seat.tone-gold { border-color: rgba(232, 195, 90, .5); }
.cw-seat.tone-orange { border-color: rgba(255, 138, 61, .45); }
.cw-seat.has-ball { box-shadow: 0 0 0 1px rgba(255, 107, 74, .45); }
.cw-seat-rank {
  position: absolute; top: 4px; left: 6px;
  font-size: .62rem; font-weight: 900; color: var(--ink-dim);
}
.cw-seat .avatar.cw-seat {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
}
.cw-seat-meta { min-width: 0; flex: 1; }
.cw-seat-name {
  display: block; font-size: .82rem; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-seat-crown { color: var(--cw-ember); margin-left: 4px; }
.cw-seat-stats {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: .58rem; letter-spacing: .06em; color: var(--ink-dim); font-weight: 800;
}
.cw-seat-stats b { color: var(--ink); }

.cw-actions-block { margin-top: 2px; }
.cw-actions-kicker {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: .78rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); margin: 4px 0 10px;
}
.cw-actions-kicker::before,
.cw-actions-kicker::after {
  content: "▸"; color: #74c0fc; font-size: .9rem;
}
.cw-actions-kicker::before { transform: scaleX(-1); display: inline-block; }
.cw-actions {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}
.cw-card-btn.cw-act {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px; text-align: center;
  min-height: 118px; padding: 10px 8px 12px;
  border-radius: 14px; border: 1px solid var(--cw-line);
  background: rgba(8, 14, 28, .88); color: inherit; font: inherit;
  position: relative; cursor: pointer;
}
.cw-card-btn.cw-act:disabled { opacity: .4; cursor: default; }
.cw-act-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.35rem; font-weight: 900;
  background: rgba(255, 255, 255, .08);
}
.cw-act.tone-pass .cw-act-icon { background: rgba(140, 150, 170, .25); }
.cw-act.tone-rest .cw-act-icon { background: rgba(61, 207, 122, .22); color: #8ef0b0; }
.cw-act.tone-tech .cw-act-icon { background: rgba(116, 192, 252, .22); color: #b7dbff; }
.cw-act.tone-attack .cw-act-icon { background: rgba(255, 90, 106, .22); color: #ffb4bc; }
.cw-act.tone-special .cw-act-icon { background: rgba(155, 107, 255, .22); color: #d0b8ff; }
.cw-act.tone-king .cw-act-icon { background: rgba(232, 195, 90, .22); color: var(--cw-gold); }
.cw-act-name { font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.cw-act-blurb {
  font-size: .62rem; font-weight: 700; color: var(--ink-dim); line-height: 1.25;
}
.cw-card-btn.cw-act .cw-n {
  position: absolute; top: 6px; right: 6px;
  min-width: 1.4rem; text-align: center; border-radius: 999px;
  background: rgba(255, 255, 255, .12); padding: 1px 6px; font-size: .68rem; font-weight: 900;
}
.cw-locked, .cw-focus-copy {
  text-align: center; font-weight: 700; color: var(--ink-dim); margin: 8px 0;
}
.cw-king-switch { text-align: center; margin: 4px 0 8px; }
.cw-king-switch-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cw-act-slot:empty { display: none; }
.cw-focus-panel { margin-top: 8px; }

.cw-foot { margin-top: 2px; }
.cw-status-stats {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: .72rem; letter-spacing: .06em; font-weight: 800; color: var(--ink-dim);
}
.cw-status-stats b { color: var(--ink); }
.cw-pmmg {
  margin: 10px 0; padding: 12px; border-radius: 14px;
  border: 1px solid var(--cw-line); background: rgba(0, 0, 0, .28);
}
.cw-pmmg-track {
  position: relative; height: 28px; border-radius: 999px;
  background: linear-gradient(90deg, #5a2030, #e8c35a 50%, #5a2030);
  overflow: hidden; margin: 8px 0 12px;
}
.cw-pmmg-zones {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr);
}
.cw-pmmg-zones span { border-right: 1px solid rgba(0, 0, 0, .25); }
.cw-pmmg-zones span:last-child { border-right: 0; }
.cw-pmmg-bar {
  position: absolute; top: 2px; bottom: 2px; width: 8px; margin-left: -4px;
  border-radius: 4px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .6);
  left: 50%;
}
.cw-pmmg-hint { text-align: center; font-size: .82rem; opacity: .8; margin: 0 0 8px; }
.cw-ulti-pick { display: grid; gap: 10px; margin-top: 12px; }
.cw-target-list { display: grid; gap: 6px; margin: 8px 0; }
.cw-target-list button {
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cw-line);
  background: rgba(0, 0, 0, .3); color: inherit; font-weight: 700; text-align: left;
}
.cw-target-list button.is-on { border-color: var(--cw-ember); background: rgba(255, 107, 74, .15); }

@media (min-width: 760px) {
  .cw-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cw-board-wrap { max-width: min(70vw, 640px); }
  .cw-board-block > .cw-msg-slot { max-width: min(70vw, 640px); }
}
@media (max-width: 640px) {
  .cw-ch-sub { display: none; }
  .cw-ball-dot { min-height: 40px; padding: 4px 12px 4px 8px; font-size: 1.16rem; }
  .cw-ch-pip { min-width: 4rem; height: 4rem; font-size: 2.1rem; }
  .cw-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cw-card-btn.cw-act { min-height: 108px; }
}

.ttf-hint { margin: 6px 0 0; opacity: .78; font-size: 1.05rem; }
.ttf-hint-sm { margin: -4px 0 8px; opacity: .72; font-size: .88rem; text-align: center; }
.ttf-note { margin: 6px 0 0; font-size: .82rem; }
.ttf-waiting { text-align: center; padding: 12px 8px 8px; }
.ttf-waiting .eyes { font-size: 2.6rem; margin-bottom: 6px; }
.ttf-preview {
  max-width: 520px; margin: 18px auto 0; text-align: left;
  display: grid; gap: 6px;
}
.ttf-preview-row, .ttf-reveal-row, .ttf-item, .ttf-my-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}
.ttf-tag, .ttf-medal, .ttf-pos {
  flex: 0 0 auto; min-width: 2.8rem; text-align: center;
  font-weight: 800; letter-spacing: .04em; font-size: .74rem;
  color: #ffd166;
}
/* Reveal: question spans the stage; Pause/Continue are omitted in JS. */
.ttf-reveal-head {
  display: block;
  margin-bottom: 14px;
}
.ttf-reveal-head .grow.host-q-wrap {
  width: 100%;
  max-width: none;
  padding-right: 0;
}
.ttf-reveal-head .host-prompt {
  width: 100%;
  max-width: none;
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
}
.ttf-reveal-list { max-width: 640px; margin: 10px auto 18px; display: grid; gap: 8px; }
.ttf-reveal-row {
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
}
.ttf-reveal-row.in { opacity: 1; transform: none; }
.ttf-reveal-row[data-stage="1"] { background: rgba(255, 209, 102, .16); border-color: rgba(255, 209, 102, .35); }
.ttf-reveal-row:last-child { background: rgba(196, 92, 138, .14); border-color: rgba(196, 92, 138, .3); }
.ttf-label { font-size: 1.35rem; font-weight: 700; }
.ttf-list { display: grid; gap: 5px; margin: 4px 0 10px; }
.ttf-item-label { flex: 1; font-weight: 650; font-size: .98rem; line-height: 1.2; }
.ttf-move { display: flex; flex-direction: row; align-items: center; gap: 4px; flex: 0 0 auto; }
.ttf-up, .ttf-down {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff;
  font-size: 0.78rem; line-height: 1; cursor: pointer;
}
.ttf-up:disabled, .ttf-down:disabled { opacity: .35; cursor: default; }
.ttf-my-order { display: grid; gap: 5px; margin: 8px 0; text-align: left; }
.ttf-my-row.ok,
.ttf-my-row.pick-correct,
.ttf-reveal-row.pick-correct {
  border-color: #51cf66 !important;
  background: rgba(81, 207, 102, .22) !important;
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .25);
}
.ttf-my-row.near { border-color: rgba(255, 209, 102, .4); background: rgba(255, 209, 102, .1); }
.ttf-my-row.miss { opacity: .78; }
.ttf-verdict { margin-top: 8px; }
.ttf-rank-card .write-kind { margin-bottom: 6px; }
.ttf-rank-card .write-prompt { margin-bottom: 8px; }

/* Rank list: reclaim vertical space so five options + lock fit on phones. */
@media (max-width: 640px) {
  body[data-game="ttf"] .ttf-rank-card {
    padding: 10px 12px;
  }
  body[data-game="ttf"] .ttf-rank-card .write-prompt {
    font-size: 1.12rem; margin-bottom: 6px; line-height: 1.2;
  }
  body[data-game="ttf"] .ttf-hint-sm { margin: -2px 0 5px; font-size: .8rem; }
  body[data-game="ttf"] .ttf-list { gap: 4px; margin: 2px 0 8px; }
  body[data-game="ttf"] .ttf-item,
  body[data-game="ttf"] .ttf-my-row {
    padding: 6px 9px; gap: 8px; border-radius: 10px;
  }
  body[data-game="ttf"] .ttf-item-label { font-size: .92rem; line-height: 1.18; }
  body[data-game="ttf"] .ttf-pos { min-width: 2.4rem; font-size: .68rem; }
  body[data-game="ttf"] .ttf-up,
  body[data-game="ttf"] .ttf-down {
    width: 34px; height: 34px; border-radius: 7px; font-size: .72rem;
  }
  body[data-game="ttf"] .ttf-move { gap: 3px; }
  body[data-game="ttf"] .ttf-rank-card .btn {
    padding-top: 11px; padding-bottom: 11px;
  }
  body[data-game="ttf"] .ttf-note { margin-top: 5px; font-size: .76rem; }
}
@media (max-width: 640px) and (max-height: 780px) {
  body[data-game="ttf"] .ttf-rank-card { padding: 8px 10px; }
  body[data-game="ttf"] .ttf-item,
  body[data-game="ttf"] .ttf-my-row { padding: 5px 8px; }
  body[data-game="ttf"] .ttf-list { gap: 3px; margin: 0 0 6px; }
  body[data-game="ttf"] .ttf-rank-card .write-prompt {
    font-size: 1.05rem; margin-bottom: 4px;
  }
}

.btb-stage { padding-bottom: 8px; }
.btb-stage .host-head { margin-bottom: 4px; }
.btb-phone .round-tag { display: none; }
.btb-phone .dev-head { margin-bottom: 2px; }
.btb-incoming-cheer {
  align-self: stretch; min-width: 58px; padding: 0 8px;
  display: grid; place-items: center; flex: 0 0 auto;
  border-left: 1px solid rgba(255,209,102,.25);
  border-right: 1px solid rgba(255,209,102,.25);
  border-radius: 12px;
  background: rgba(255,209,102,.12);
  font-size: clamp(2rem, 10vw, 3.15rem); line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255,209,102,.55));
  animation: btbIncomingCheer 3.6s ease both;
}
@keyframes btbIncomingCheer {
  0% { opacity: 0; transform: scale(.55) rotate(-8deg); }
  8%, 88% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(.88); }
}

.btb-pot-bar {
  text-align: center; font-weight: 1000; color: var(--bank-gold);
  letter-spacing: .06em; margin: 0 auto 6px;
  font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1;
}
.btb-pot-bar b {
  display: inline-block; margin-left: 6px;
  font-size: inherit; font-variant-numeric: tabular-nums;
  color: #ffe08a; line-height: 1;
}

.btb-shield-bar {
  max-width: 560px; margin: 0 auto 8px; text-align: center;
  padding: 8px 10px 7px;
  border-radius: 14px;
  background: rgba(120, 180, 255, .1);
  border: 1px solid rgba(140, 190, 255, .35);
}
.btb-shield-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  min-height: 2.25rem; align-items: center;
}
/* Fixed box + SVG glyph — same art on every device (emoji fonts do not match). */
.btb-shield {
  position: relative;
  display: inline-grid; place-items: center;
  width: 2.15rem; height: 2.15rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(120, 190, 255, .55));
  transition: transform .2s, filter .2s, opacity .2s;
}
.btb-shield-glyph {
  display: block;
  width: 100%; height: 100%;
  overflow: visible;
}
.btb-shield.live {
  animation: btbShieldPulse 1.8s ease-in-out infinite;
}
.btb-shield.broken {
  filter: none;
  transform: scale(.92);
  animation: none;
}
.btb-shield.broken .btb-shield-glyph {
  opacity: .5;
  filter: grayscale(1) brightness(.7);
}
/* Red X over every broken shield — clearer than a thin crack alone. */
.btb-shield.broken::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 1.15rem; height: 1.15rem;
  transform: translate(-50%, -50%) rotate(45deg);
  background:
    linear-gradient(#ff1f1f, #ff1f1f) center / 100% 0.22rem no-repeat,
    linear-gradient(#ff1f1f, #ff1f1f) center / 0.22rem 100% no-repeat;
  border-radius: 1px;
  box-shadow:
    0 0 1px #fff,
    0 0 8px rgba(255, 40, 40, .85);
  pointer-events: none;
  z-index: 1;
}
/* One-turn highlight after doubles restore a shield. */
.btb-shield.repaired {
  animation: btbShieldRepaired 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(81, 207, 102, .95))
    drop-shadow(0 0 14px rgba(81, 207, 102, .85));
  outline: 3px solid rgba(81, 207, 102, .95);
  outline-offset: 3px;
  border-radius: 10px;
}
.btb-shield-meta {
  margin-top: 5px; font-size: .78rem; font-weight: 800;
  color: #b8d7ff; letter-spacing: .02em;
}
.btb-new-rule {
  display: inline-block; margin-right: 6px; padding: 2px 8px;
  border-radius: 999px; font-size: .72rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  color: #14243f; background: linear-gradient(135deg, #ffe08a, #ffb84d);
  vertical-align: .1em;
}
.btb-die-rules {
  list-style: none;
  margin: 8px 0 10px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.btb-die-rules li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  font-weight: 700;
  line-height: 1.35;
}
.btb-die-tag {
  flex: 0 0 2.4em;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--gold, #ffd166);
  font-variant-numeric: tabular-nums;
}
.option .btb-die-rules,
.shared-rules .btb-die-rules { max-width: 28rem; }
@keyframes btbShieldPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes btbShieldRepaired {
  0%, 100% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 4px rgba(81, 207, 102, .95))
      drop-shadow(0 0 12px rgba(81, 207, 102, .7));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 8px rgba(81, 207, 102, 1))
      drop-shadow(0 0 20px rgba(120, 255, 160, .95));
  }
}

.btb-asks {
  display: flex; justify-content: center; align-items: stretch; gap: 10px;
  max-width: 520px; margin: 0 auto 4px; min-height: 72px;
}
.btb-asks.solo { max-width: 280px; }
.btb-asks.fade-in { animation: btbFadeIn .35s ease both; }
.btb-ask {
  position: relative; flex: 1; height: 72px; min-height: 72px; max-height: 72px;
  border-radius: 14px; border: 3px solid rgba(255,255,255,.22); color: #fff;
  cursor: default; font: inherit; display: grid; place-items: center; overflow: hidden;
  background: rgba(255,255,255,.08); box-shadow: 0 6px 0 rgba(0,0,0,.22);
  padding: 8px 12px; box-sizing: border-box;
}
button.btb-ask { cursor: pointer; }
.btb-ask span {
  position: relative; z-index: 1;
  /* ~20% larger than prior 1.45 / 5vw / 2.1 — button box stays 72px. */
  font-size: clamp(1.74rem, 6vw, 2.52rem); font-weight: 1000;
  letter-spacing: .04em; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.btb-ask.roll { background: linear-gradient(160deg, #3dd6c6, #1f8f84); border-color: #7ff0e4; }
.btb-ask.bank {
  background:
    linear-gradient(160deg, rgba(20, 28, 40, .55), rgba(20, 28, 40, .72)),
    radial-gradient(circle at 50% 40%, #ffd166 0%, #c4891a 42%, #5a3a12 78%);
  border-color: #ffd166; color: #fff8e1;
}
.btb-vault {
  position: absolute; inset: 0; z-index: 0; opacity: .55;
  background:
    radial-gradient(circle at 50% 46%, #ffe08a 0 16%, transparent 17%),
    radial-gradient(circle at 50% 46%, transparent 0 28%, rgba(0,0,0,.45) 29% 34%, transparent 35%),
    linear-gradient(145deg, #f6d56a, #b8860b 55%, #6b4210);
}
.btb-ask.chosen {
  outline: 4px solid #fff; outline-offset: 2px;
  transform: translateY(2px) scale(1.02);
  box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 0 24px rgba(255,255,255,.45);
  animation: btbChosenGlow 1.7s ease-in-out infinite;
}
/* The option that was not taken. Stays visibly out of play for the whole turn
   instead of springing back to full colour on the next poll. */
.btb-ask.passed,
.btb-ask[disabled]:not(.chosen) {
  opacity: .3; filter: grayscale(1) brightness(.75);
  box-shadow: none; cursor: default;
}
@keyframes btbChosenGlow {
  0%, 100% { box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 0 18px rgba(255,255,255,.35); }
  50% { box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 0 30px rgba(255,255,255,.65); }
}

.btb-flash {
  display: grid; place-items: center; min-height: 72px; margin: 0 auto 4px;
  max-width: 520px; border-radius: 14px; font-weight: 1000;
  font-size: clamp(1.5rem, 5vw, 2.2rem); letter-spacing: .04em;
  animation: btbPulse .55s ease-in-out 1;
}
.btb-flash-seq {
  min-height: 72px; margin: 0 auto 4px; max-width: 520px;
}
.btb-flash-seq .btb-flash { margin: 0; }
.btb-flash-seq .btb-flash[hidden] { display: none !important; }
.btb-flash.add {
  background: rgba(78,205,196,.16); color: var(--bank-mint);
  border: 2px solid rgba(78,205,196,.45);
}
.btb-flash.doubles {
  background: rgba(255,209,102,.24); color: #ffe08a;
  border: 3px solid #ffd166;
}
.btb-flash.shield {
  background: rgba(120, 180, 255, .22); color: #c8e0ff;
  border: 3px solid #8ec0ff;
}
.btb-flash.bust {
  background: rgba(255,80,80,.2); color: #ff8e8e;
  border: 3px solid var(--coral);
  animation: btbShake .5s ease-in-out;
}

.btb-dice {
  display: flex; justify-content: center; align-items: center; gap: clamp(12px, 3.5vw, 22px);
  /* Tray height stays put — dice themselves shrink ~10%. */
  margin: 2px auto 6px; min-height: clamp(100px, 26vw, 150px);
}
.btb-dice-watch {
  position: relative;
  max-width: 560px;
  margin: 2px auto 6px;
}
.btb-dice-watch .btb-dice { margin: 0 auto; }
.btb-dice-watch .btb-banked-banner { margin: 0 auto; }
.btb-dice-watch-who {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  max-width: 46%;
  padding: 5px 8px 5px 6px;
  border-radius: 12px;
  background: rgba(8, 12, 20, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  pointer-events: none;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: right;
  margin: 0;
}
.btb-dice-watch-who.pickable {
  pointer-events: auto;
  cursor: pointer;
}
.btb-dice-watch-who.pickable:hover,
.btb-dice-watch-who.pickable:focus-visible {
  background: rgba(8, 12, 20, .9);
  border-color: rgba(255, 209, 102, .55);
  outline: none;
}
.btb-dice-watch-who.pickable:active {
  transform: scale(.97);
}
.btb-dice-watch-who.locked .btb-dice-watch-label {
  color: #fff;
}
.btb-dice-watch-label {
  font-size: .74rem; /* ~20% larger than .62rem */
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.btb-dice-watch-person {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.btb-dice-watch-who .avatar.sm {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.btb-dice-watch-who .name {
  font-weight: 900;
  font-size: .88rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btb-watch-picker {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  width: min(220px, 72vw);
  max-height: min(260px, 50vh);
  overflow: auto;
  padding: 8px;
  border-radius: 14px;
  background: rgba(10, 14, 24, .96);
  border: 1px solid rgba(255, 209, 102, .4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  text-align: left;
}
.btb-watch-picker-label {
  margin: 0 0 8px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold, #ffd166);
}
.btb-watch-picker-list {
  display: grid;
  gap: 4px;
}
.btb-watch-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.btb-watch-picker-btn .avatar.sm {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.btb-watch-picker-btn .name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btb-watch-picker-btn.chosen,
.btb-watch-picker-btn:hover,
.btb-watch-picker-btn:focus-visible {
  border-color: rgba(255, 209, 102, .55);
  background: rgba(255, 209, 102, .14);
  outline: none;
}
.btb-die {
  --die: clamp(86px, 23.4vw, 133px);
  width: var(--die); height: var(--die); display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  /* Small margin only — pips fill the face. */
  gap: 5%; padding: 8%; border-radius: 20px;
  background: linear-gradient(155deg, #ffffff 0%, #f4f6fa 55%, #dfe5ef 100%);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow:
    inset 0 -10px 18px rgba(23,35,49,.12),
    inset 0 2px 0 rgba(255,255,255,.9),
    0 14px 28px rgba(0,0,0,.32);
  transform: rotate(-4deg);
  position: relative;
}
/* Non-d6: shaded SVG polyhedra with the number drawn on the face. */
.btb-die.btb-die-d4,
.btb-die.btb-die-d8,
.btb-die.btb-die-d10,
.btb-die.btb-die-d12,
.btb-die.btb-die-d20 {
  display: grid; place-items: center;
  grid-template-columns: 1fr; grid-template-rows: 1fr;
  gap: 0; padding: 0;
  background: transparent; border: 0; box-shadow: none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.34));
}
.btb-die-shape {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.btb-die-face-num {
  font-family: var(--font);
  letter-spacing: -0.04em;
  paint-order: stroke fill;
  stroke: rgba(255,255,255,.55);
  stroke-width: 2.2px;
}
.btb-shield-warn {
  margin: -2px 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 193, 71, .45);
  background: rgba(255, 193, 71, .12);
  color: #ffe8a8;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.35;
}
.btb-die:nth-child(2) { transform: rotate(5deg); }
.btb-die.btb-die-blank { opacity: .35; }
/* Opening bust-total — scoring, not a bust. */
.btb-dice.seven-good .btb-die {
  border-color: #3dd68c;
  box-shadow:
    inset 0 -10px 18px rgba(23,35,49,.12),
    inset 0 2px 0 rgba(255,255,255,.9),
    0 0 0 3px rgba(61, 214, 140, .95),
    0 0 18px rgba(61, 214, 140, .7),
    0 14px 28px rgba(0,0,0,.32);
}
.btb-dice.seven-good .btb-die.btb-die-d4,
.btb-dice.seven-good .btb-die.btb-die-d8,
.btb-dice.seven-good .btb-die.btb-die-d10,
.btb-dice.seven-good .btb-die.btb-die-d12,
.btb-dice.seven-good .btb-die.btb-die-d20 {
  border: 0; box-shadow: none; background: transparent;
  filter:
    drop-shadow(0 0 7px rgba(61, 214, 140, .95))
    drop-shadow(0 12px 18px rgba(0,0,0,.34));
}
/* Bust-total absorbed by a shield. */
.btb-dice.seven-shield .btb-die {
  border-color: #5aa8ff;
  box-shadow:
    inset 0 -10px 18px rgba(23,35,49,.12),
    inset 0 2px 0 rgba(255,255,255,.9),
    0 0 0 3px rgba(90, 168, 255, .95),
    0 0 18px rgba(90, 168, 255, .7),
    0 14px 28px rgba(0,0,0,.32);
}
.btb-dice.seven-shield .btb-die.btb-die-d4,
.btb-dice.seven-shield .btb-die.btb-die-d8,
.btb-dice.seven-shield .btb-die.btb-die-d10,
.btb-dice.seven-shield .btb-die.btb-die-d12,
.btb-dice.seven-shield .btb-die.btb-die-d20 {
  border: 0; box-shadow: none; background: transparent;
  filter:
    drop-shadow(0 0 7px rgba(90, 168, 255, .95))
    drop-shadow(0 12px 18px rgba(0,0,0,.34));
}
/* Busting total — red. */
.btb-dice.seven-bust .btb-die,
.btb-dice.seven .btb-die {
  border-color: #ff3b3b;
  box-shadow:
    inset 0 -10px 18px rgba(23,35,49,.12),
    inset 0 2px 0 rgba(255,255,255,.9),
    0 0 0 3px rgba(255, 59, 59, .95),
    0 0 18px rgba(255, 70, 70, .7),
    0 14px 28px rgba(0,0,0,.32);
}
.btb-dice.seven-bust .btb-die.btb-die-d4,
.btb-dice.seven-bust .btb-die.btb-die-d8,
.btb-dice.seven-bust .btb-die.btb-die-d10,
.btb-dice.seven-bust .btb-die.btb-die-d12,
.btb-dice.seven-bust .btb-die.btb-die-d20,
.btb-dice.seven .btb-die.btb-die-d4,
.btb-dice.seven .btb-die.btb-die-d8,
.btb-dice.seven .btb-die.btb-die-d10,
.btb-dice.seven .btb-die.btb-die-d12,
.btb-dice.seven .btb-die.btb-die-d20 {
  border: 0; box-shadow: none; background: transparent;
  filter:
    drop-shadow(0 0 7px rgba(255, 59, 59, .95))
    drop-shadow(0 12px 18px rgba(0,0,0,.34));
}
/* Doubles on turn 2+ — rainbow outline. */
.btb-dice.doubles-rainbow .btb-die {
  border: 3px solid transparent;
  background-image:
    linear-gradient(155deg, #ffffff 0%, #f4f6fa 55%, #dfe5ef 100%),
    conic-gradient(
      from var(--btb-rainbow-angle, 0deg),
      #ff004c, #ff7a00, #ffee00, #00e676, #00b0ff, #d500f9, #ff004c
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 -10px 18px rgba(23,35,49,.12),
    inset 0 2px 0 rgba(255,255,255,.9),
    0 0 16px rgba(255, 120, 200, .55),
    0 14px 28px rgba(0,0,0,.32);
  animation: btbRainbowSpin 1.4s linear infinite;
}
.btb-dice.doubles-rainbow .btb-die.btb-die-d4,
.btb-dice.doubles-rainbow .btb-die.btb-die-d8,
.btb-dice.doubles-rainbow .btb-die.btb-die-d10,
.btb-dice.doubles-rainbow .btb-die.btb-die-d12,
.btb-dice.doubles-rainbow .btb-die.btb-die-d20 {
  border: 0; background: transparent; background-image: none;
  box-shadow: none;
  filter:
    drop-shadow(0 0 8px rgba(255, 120, 200, .75))
    drop-shadow(0 0 14px rgba(0, 176, 255, .45))
    drop-shadow(0 12px 18px rgba(0,0,0,.34));
  animation: btbPolyPulse 1.4s ease-in-out infinite;
}
@keyframes btbPolyPulse {
  50% { filter:
    drop-shadow(0 0 12px rgba(255, 238, 0, .8))
    drop-shadow(0 0 16px rgba(213, 0, 249, .55))
    drop-shadow(0 12px 18px rgba(0,0,0,.34)); }
}
@keyframes btbRainbowSpin {
  to { --btb-rainbow-angle: 360deg; }
}
@property --btb-rainbow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.btb-die .pip, .btb-die .empty {
  display: block; width: 100%; height: 100%; border-radius: 50%;
}
.btb-die .empty { background: transparent; }
.btb-die .pip {
  background: radial-gradient(circle at 35% 30%, #2c3a4c, #0e141c 70%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.35);
}
.btb-dice.rolling .btb-die { animation: btbRoll .45s cubic-bezier(.2, 1.35, .35, 1) both; }
.btb-dice.rolling .btb-die:nth-child(2) { animation-delay: .05s; }
.btb-dice.settled .btb-die { animation: none; }
.btb-dice.settled .btb-die:nth-child(1) { transform: rotate(-4deg); }
.btb-dice.settled .btb-die:nth-child(2) { transform: rotate(5deg); }

.btb-banners {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0 auto 4px; max-width: 720px;
}
.btb-banner {
  text-align: center; font-weight: 1000; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 10px; width: fit-content; max-width: 100%;
}
.btb-banner.round {
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  background: rgba(78,205,196,.18); color: var(--bank-mint);
  border: 2px solid rgba(78,205,196,.45);
}
.btb-banner.approach {
  font-size: clamp(.9rem, 2.4vw, 1.15rem);
  background: rgba(255,209,102,.18); color: var(--bank-gold);
  border: 2px solid rgba(255,209,102,.5);
}
.btb-seven-note {
  text-align: center; margin: 0 0 8px; font-size: 1.05rem; font-weight: 800;
  color: #3dd68c; letter-spacing: .02em;
}
.btb-seven-note b { color: #7dffb0; }

.btb-tally, .btb-locked {
  text-align: center; color: var(--ink-dim); margin: 0 auto 4px;
  font-weight: 800; font-size: .85rem;
}
.btb-tally b { color: var(--bank-gold); }
.btb-group-status {
  text-align: center; margin: 4px auto 8px; max-width: 560px;
  font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 800; line-height: 1.35;
  color: var(--ink);
}
.btb-group-status b { color: var(--bank-gold); }
.btb-stage .btb-board { max-width: 720px; }

.btb-board { max-width: 560px; margin: 4px auto 0; display: grid; gap: 6px; }
/* Fixed TOTAL / ROLL tracks so every row lines up. TOTAL fits through 9,999;
   .big-total widens it once anyone clears 10,000. ROLL is sized for "BUST". */
.btb-board {
  --btb-total-col: 5.75ch;
  --btb-roll-col: 4.6ch;
}
.btb-board.big-total { --btb-total-col: 7.75ch; }
.btb-board-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 62px var(--btb-total-col) var(--btb-roll-col);
  column-gap: 10px; padding: 0 8px;
  margin: 0; min-height: 0; line-height: 1.1;
  font-size: .72rem; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-dim);
}
.btb-board-head span:nth-child(4) {
  justify-self: center;
  text-align: center;
  padding: 0;
}
.btb-board-head span:nth-child(5) {
  justify-self: stretch; text-align: center; padding: 0;
}
.btb-board-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 62px var(--btb-total-col) var(--btb-roll-col);
  align-items: center; column-gap: 10px;
  padding: 5px 8px; min-height: 40px;
  border-radius: 10px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.btb-tb-title {
  margin: 8px 0 4px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.02em;
}
.btb-tb-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px auto 0;
  max-width: 560px;
}
.btb-tb-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 56px 64px;
  align-items: center;
  column-gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}
.btb-tb-row.win {
  border-color: rgba(255, 214, 102, .55);
  box-shadow: 0 0 0 1px rgba(255, 214, 102, .25);
}
.btb-tb-dice { justify-self: end; transform: scale(0.72); transform-origin: right center; }
.btb-tb-total, .btb-tb-score {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.btb-tb-total { color: var(--accent, #f0c14a); }
.btb-tiebreak-phone .btb-asks { margin: 12px 0; }
.btb-tiebreak-phone #btbTbRoll { width: 100%; min-height: 52px; font-size: 1.15rem; }
/* Titles sit flush above the first player row; gap only between players. */
.btb-board-head + .btb-board-row { margin-top: -4px; }
.btb-board-row[data-cheer] {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,209,102,.28);
}
.btb-board-row[data-cheer]:active,
.btb-board-row.cheer-pick {
  background: rgba(255,209,102,.16);
  box-shadow: inset 0 0 0 2px rgba(255,209,102,.55);
}
.btb-board-row .avatar.sm { width: 32px; height: 32px; border-radius: 9px; }
.btb-who {
  min-width: 0; display: flex; align-items: center; gap: 4px;
  overflow: hidden;
}
.btb-name {
  min-width: 0; overflow: hidden;
  /* Prefer wrapping the name so TOTAL / ROLL never truncate. */
  white-space: normal; overflow-wrap: anywhere; line-height: 1.15;
  font-weight: 800; font-size: 1.01rem;
}
.btb-cheers { display: inline-flex; gap: 1px; flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
.btb-cheer-chip { filter: drop-shadow(0 0 3px rgba(255,209,102,.45)); }
/* 💯 is dark-red on dark UI — light halo so it reads in chips, picker, and fly-ins. */
.btb-cheer-100 {
  display: inline-block;
  line-height: 1;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,1))
    drop-shadow(0 0 4px rgba(255,255,255,.9))
    drop-shadow(0 0 10px rgba(255,245,220,.7))
    drop-shadow(0 0 16px rgba(255,209,102,.45));
}
.btb-cheer-btn.btb-cheer-100-btn {
  background: rgba(255,255,255,.14);
}
.btb-cheer-btn.btb-cheer-100-btn .btb-cheer-100 {
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 6px rgba(255,255,255,.95))
    drop-shadow(0 0 14px rgba(255,245,220,.8))
    drop-shadow(0 0 22px rgba(255,209,102,.5));
}
.btb-incoming-cheer.btb-cheer-100-wrap .btb-cheer-100 {
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 8px rgba(255,255,255,.95))
    drop-shadow(0 0 16px rgba(255,245,220,.85))
    drop-shadow(0 0 24px rgba(255,209,102,.55));
}
.btb-state {
  justify-self: center; font-size: .72rem; font-weight: 900;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bank-mint);
  white-space: nowrap;
}
.btb-state.banked { color: var(--bank-gold); }
.btb-state.busted { color: var(--coral); }
.btb-state.waiting { color: var(--ink-dim); }
.btb-board-row.waiting { opacity: .92; }
.btb-score {
  justify-self: center; text-align: center;
  font-size: 1.1rem; font-weight: 1000;
  font-variant-numeric: tabular-nums; color: var(--bank-gold);
  padding: 0; white-space: nowrap;
}
.btb-roll {
  justify-self: stretch; text-align: center;
  font-size: 1.05rem; font-weight: 900;
  font-variant-numeric: tabular-nums; color: var(--bank-mint);
  padding: 0; white-space: nowrap;
}
.btb-glow-x2 {
  background: linear-gradient(90deg, #ff4d6d, #ffb703, #8ac926, #1982c4, #6a4c93, #ff4d6d);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(255,209,102,.85));
  animation: btbGlowPulse .9s ease-in-out infinite, btbRainbowText 1.6s linear infinite;
}
@keyframes btbRainbowText {
  to { background-position: 200% 0; }
}
.btb-glow-seven {
  animation: btbGlowPulse .9s ease-in-out infinite;
}
.btb-glow-seven.good {
  color: #3dd68c;
  text-shadow: 0 0 6px rgba(61,214,140,.95), 0 0 14px rgba(40,200,120,.7);
}
.btb-glow-seven.shield {
  color: #5aa8ff;
  text-shadow: 0 0 6px rgba(90,168,255,.95), 0 0 14px rgba(70,150,255,.7);
}
.btb-glow-seven.bust,
.btb-glow-seven:not(.good):not(.shield) {
  color: #ff3b3b;
  text-shadow: 0 0 6px rgba(255,60,60,.95), 0 0 14px rgba(255,40,40,.7);
}
.btb-glow-bust {
  color: #ff6b6b;
  text-shadow: 0 0 6px rgba(255,107,107,.95), 0 0 14px rgba(255,70,70,.7);
  animation: btbGlowPulse .85s ease-in-out infinite;
}
@keyframes btbGlowPulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.25); transform: scale(1.08); }
}
.btb-board-row.busted { border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.07); }
.btb-board-row.banked { border-color: rgba(255,209,102,.28); }
.btb-board-row.me {
  border: 2px solid rgba(81, 207, 102, .75);
  background: rgba(81, 207, 102, .16);
}

.btb-banked-banner {
  display: grid; place-items: center;
  min-height: clamp(120px, 28vw, 160px);
  margin: 4px auto 6px; max-width: 560px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,209,102,.22), rgba(255,209,102,.08));
  border: 2px solid rgba(255,209,102,.55);
  font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 1000;
  letter-spacing: .04em; color: var(--bank-gold);
  animation: btbFadeIn .35s ease both;
}
.btb-banked-banner b {
  margin-left: .2em; color: #fff8d6;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255,209,102,.55);
}

.btb-cheer-bar {
  max-width: 560px; margin: 6px auto 8px;
  background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.4);
  border-radius: 14px; padding: 10px 12px; text-align: center;
  position: relative;
}
.btb-cheer-bar.idle {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);
}
.btb-cheer-bar.collapsed .btb-cheer-label {
  font-size: .74rem;
}
.btb-cheer-head {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
}
.btb-cheer-title {
  margin: 0; font-size: .92rem; font-weight: 900;
  color: var(--bank-gold); letter-spacing: .02em;
  flex: 0 0 auto;
}
.btb-cheer-label {
  margin: 0 0 0 auto;
  font-size: .78rem; font-weight: 800; color: var(--bank-gold);
  text-align: right; line-height: 1.25;
  min-width: 0; flex: 1 1 auto;
}
.btb-cheer-label b { color: var(--ink); }
.btb-cheer-body { margin-top: 8px; }
.btb-cheer-body[hidden] { display: none; }
.btb-cheer-targets {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 8px;
}
.btb-cheer-target {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.22);
  color: var(--ink); font: inherit; font-size: .82rem; font-weight: 800;
}
.btb-cheer-target .avatar.sm { width: 26px; height: 26px; border-radius: 8px; }
.btb-cheer-target.chosen {
  border-color: var(--bank-gold); background: rgba(255,209,102,.2);
}
.btb-cheer-collapse {
  flex: 0 0 auto;
  width: 36px; min-height: 36px;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.08); color: var(--ink);
  font: inherit; font-size: 1.35rem; font-weight: 900;
  line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.btb-cheer-collapse:active { transform: scale(.94); background: rgba(255,209,102,.2); }
.btb-cheer-emojis {
  width: 100%;
  display: grid; grid-template-columns: repeat(5, 1fr);
  justify-content: center; gap: 6px;
  max-width: 330px; min-width: 0; margin: 0 auto;
}
.btb-cheer-btn {
  width: 100%; aspect-ratio: 1 / 1; min-height: 44px;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.08); cursor: pointer;
  /* Glyph fills the tile: centred on its own line box with a little padding,
     so a tall emoji has room instead of being cropped by the border radius. */
  display: grid; place-items: center; padding: 4px;
  /* Without this a <button> keeps the browser's default UI font, which resolves
     emoji through a different (coarser) face than the received cheer -- same
     glyph, visibly worse. Inherit first, then re-set the size. */
  font: inherit;
  font-size: clamp(1.8rem, 8.5vw, 2.2rem); line-height: 1;
}
.btb-cheer-btn:active { transform: scale(.94); background: rgba(255,209,102,.2); }
.btb-cheer-btn.chosen {
  border-color: var(--bank-gold);
  background: rgba(255, 209, 102, .28);
  box-shadow: 0 0 0 3px rgba(255, 209, 102, .45), 0 0 18px rgba(255, 209, 102, .35);
  transform: scale(1.06);
}

@keyframes btbRoll {
  0% { transform: rotate(-32deg) scale(.72); filter: blur(2px); }
  45% { transform: rotate(16deg) scale(1.1); filter: blur(0); }
  100% { transform: rotate(var(--end, -4deg)) scale(1); }
}
.btb-dice.rolling .btb-die:nth-child(1) { --end: -4deg; }
.btb-dice.rolling .btb-die:nth-child(2) { --end: 5deg; }
@keyframes btbPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes btbShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
@keyframes btbFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .btb-asks { gap: 8px; min-height: 68px; }
  .btb-ask, .btb-flash { height: 68px; min-height: 68px; max-height: 68px; }
  .btb-ask span { font-size: clamp(1.62rem, 7.8vw, 2.1rem); }
  .btb-die { --die: clamp(94px, 28.8vw, 115px); border-radius: 18px; padding: 7%; gap: 4%; }
  .btb-die.btb-die-d4,
  .btb-die.btb-die-d8,
  .btb-die.btb-die-d10,
  .btb-die.btb-die-d12,
  .btb-die.btb-die-d20 { padding: 0; }
  .btb-board { gap: 5px; }
  .btb-board-head,
  .btb-board-row {
    grid-template-columns: 32px minmax(0, 1fr) 58px var(--btb-total-col) var(--btb-roll-col);
    column-gap: 8px;
  }
  .btb-board-head { min-height: 0; padding: 0 6px; line-height: 1; }
  .btb-board-head + .btb-board-row { margin-top: -3px; }
  .btb-board-row { padding: 4px 6px; min-height: 38px; }
  .btb-board-row .avatar.sm { width: 30px; height: 30px; border-radius: 8px; }
  .btb-name { font-size: .95rem; }
  .btb-state { font-size: .66rem; }
  .btb-score { font-size: 1.02rem; }
  .btb-roll { font-size: .98rem; }
}

.rtr-question { color: var(--ink-dim); font-size: 1.05rem; margin: 4px 0 0; }
.rtr-ask { font-size: .95rem; color: var(--ink-dim); margin: 0 0 12px; }
.rtr-tally { margin-top: 18px; }

/* Options, read-only, on the shared screen */
.rtr-options { display: grid; gap: 10px; margin-top: 18px; }
.rtr-options.compact { gap: 6px; }
.rtr-option {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 18px;
  font-size: clamp(1rem, 2.1vw, 1.5rem); font-weight: 700;
}
.rtr-option .tag {
  flex: 0 0 auto; min-width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .1); display: grid; place-items: center;
  font-weight: 900; font-size: .95rem; letter-spacing: .04em;
}
.rtr-option .text { flex: 1; }
.rtr-option.win { border-color: var(--amber); background: rgba(255, 184, 77, .12); }
.rtr-option.dim { opacity: .45; }
.rtr-count {
  min-width: 32px; height: 32px; border-radius: 999px; background: var(--amber);
  color: #21123d; display: grid; place-items: center; font-weight: 900;
}

/* Options, tappable, on a phone */
.rtr-choices { display: grid; gap: 10px; }
.rtr-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--line);
  border-radius: 16px; padding: 14px 16px; min-height: 56px;
}
.rtr-choice .tag {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255, 255, 255, .1); display: grid; place-items: center;
  font-weight: 900; font-size: .9rem;
}
.rtr-choice.chosen { border-color: var(--amber); background: rgba(255, 184, 77, .16); }
.rtr-choice.chosen .tag { background: var(--amber); color: #21123d; }
.rtr-choice[disabled] { cursor: default; }
.rtr-choice[disabled]:not(.chosen) { opacity: .4; }

/* Confidence dial */
.rtr-conf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.rtr-conf {
  font: inherit; color: var(--ink); cursor: pointer; padding: 10px 6px;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--line);
  border-radius: 14px; display: grid; gap: 2px; text-align: center;
}
.rtr-conf b { font-size: .95rem; }
.rtr-conf small { color: var(--ink-dim); font-size: .72rem; }
.rtr-conf.chosen { border-color: var(--amber); background: rgba(255, 184, 77, .16); }
.rtr-conf-row.need-pick {
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--gold);
  animation: rtrConfNudge 1.15s ease-in-out infinite;
}
@keyframes rtrConfNudge {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 0 3px rgba(255, 212, 59, .4); }
  50% { box-shadow: 0 0 0 3px #ffe98a, 0 0 0 10px rgba(255, 212, 59, .22); }
}
.rtr-conf-note { font-size: .78rem; margin: 8px 0 0; }

/* The private Fox strip, on one phone only */
.rtr-fox {
  background: linear-gradient(165deg, #3a2260, #2a1748);
  border: 2px solid var(--amber); border-radius: 18px;
  padding: 12px 16px; margin: 12px 0 14px;
}
.rtr-fox-tag {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 900; color: var(--amber); margin-bottom: 4px;
}
.rtr-fox p { margin: 0; font-size: .92rem; line-height: 1.45; }

/* Declarations, grouped under what they claimed. Grouping rather than listing
   each player is what keeps thirty people readable on one screen. */
.rtr-board {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-top: 18px;
}
.rtr-column {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px;
}
.rtr-column.empty { opacity: .4; }
.rtr-column.win { border-color: var(--amber); background: rgba(255, 184, 77, .1); }
.rtr-column-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rtr-column-head .tag {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 255, 255, .12); display: grid; place-items: center;
  font-weight: 900; font-size: .8rem;
}
.rtr-column-head .text { flex: 1; font-weight: 800; font-size: .92rem; line-height: 1.2; }
.rtr-faces { display: flex; flex-wrap: wrap; gap: 5px; }
.rtr-faces.center { justify-content: center; margin-top: 12px; }
.rtr-face .avatar { width: 30px; height: 30px; border-radius: 9px; }

/* The reveal */
.rtr-stage { min-height: 42vh; margin-top: 18px; }
.rtr-beat { animation: pop .32s cubic-bezier(.2, 1.3, .4, 1) both; }
.rtr-beat-label {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 900; color: var(--amber); margin-bottom: 12px; text-align: center;
}
.rtr-combo {
  display: flex; flex-direction: column; gap: 22px;
  max-width: 920px; margin: 0 auto;
}
.rtr-combo-block {
  padding: 12px 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.16);
}
.rtr-combo-block .rtr-beat-label { margin-bottom: 12px; }
.rtr-combo-block .rtr-bars { gap: 8px; }
.rtr-combo-block .rtr-board { margin-top: 4px; }
.rtr-combo-block .rtr-results { gap: 6px; }
.rtr-combo-block .rtr-story { margin: 4px 0 0; font-size: 1.15rem; }
.rtr-big { font-size: clamp(1.3rem, 3.2vw, 2.2rem); font-weight: 900; text-align: center; margin: 0 0 6px; }
.rtr-sub { text-align: center; color: var(--ink-dim); margin: 0 0 4px; font-size: 1rem; }
.rtr-story {
  font-size: clamp(1.15rem, 2.8vw, 1.9rem); font-weight: 800; line-height: 1.4;
  text-align: center; margin: 6vh auto 0; max-width: 900px;
}

.rtr-bars { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.rtr-bar { display: flex; align-items: center; gap: 10px; }
.rtr-bar .tag {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, .1); display: grid; place-items: center;
  font-weight: 900; font-size: .82rem;
}
.rtr-bar-label { flex: 0 0 26%; font-weight: 700; font-size: .95rem; }
.rtr-bar-track { flex: 1; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rtr-bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7b4bc4, #b07fe8);
  transition: width .6s cubic-bezier(.2, .9, .3, 1);
}
.rtr-bar.win .rtr-bar-fill { background: linear-gradient(90deg, var(--amber), #ffd98a); }
.rtr-bar-n { flex: 0 0 auto; min-width: 28px; text-align: right; font-weight: 900; }

.rtr-results { display: grid; gap: 7px; max-width: 900px; margin: 0 auto; }
.rtr-result {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px 12px;
}
.rtr-name { font-weight: 800; min-width: 96px; }
.rtr-whys { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.rtr-why {
  font-size: .74rem; background: rgba(255, 255, 255, .08);
  border-radius: 999px; padding: 2px 9px; color: var(--ink-dim);
}
.rtr-why b { color: var(--green); }
.rtr-why.bad b { color: var(--coral); }
.rtr-points { font-weight: 900; font-size: 1.1rem; color: var(--green); min-width: 42px; text-align: right; }
.rtr-points.bad { color: var(--coral); }

.rtr-bluffs { display: grid; gap: 7px; max-width: 700px; margin: 14px auto 0; }
.rtr-bluff {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px 12px;
}
.rtr-said { color: var(--ink-dim); font-size: .85rem; margin-left: auto; }

.rtr-fox-reveal { text-align: center; }
.rtr-fox-reveal .avatar { width: 92px; height: 92px; border-radius: 24px; margin: 0 auto 12px; }
.rtr-foxbonus { font-size: 2rem; font-weight: 900; color: var(--amber); margin: 10px 0 0; }

@media (max-width: 640px) {
  .rtr-board { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
  .rtr-column { padding: 9px; }
  .rtr-bar-label { flex: 0 0 34%; font-size: .82rem; }
  .rtr-result { flex-wrap: wrap; }
  .rtr-whys { order: 3; width: 100%; }
  .rtr-name { min-width: 0; flex: 1; }
  .rtr-stage { min-height: 0; }
  .rtr-choice { min-height: 52px; padding: 12px 14px; }
}

/* The prediction screen is the tallest thing in Read the Room: question, four
   options and a three-way confidence dial. Measured at 375x667 it ran 56px
   over, putting the dial under the fold -- which is exactly the bar the README
   sets for anything a player has to tap. */
@media (max-width: 640px) and (max-height: 780px) {
  .rtr-choice { min-height: 44px; padding: 9px 13px; }
  .rtr-choices { gap: 8px; }
  .rtr-choice .tag { width: 26px; height: 26px; }
  .rtr-ask { margin-bottom: 8px; font-size: .88rem; }
  .rtr-conf { padding: 8px 6px; }
  .rtr-conf-row { margin-top: 10px; }
  .rtr-conf-note { font-size: .72rem; margin-top: 6px; }
  .rtr-fox { padding: 8px 13px; margin: 8px 0; }
  .rtr-fox p { font-size: .82rem; line-height: 1.35; }
  .rtr-fox-tag { font-size: .66rem; margin-bottom: 2px; }
  /* Scoped: the shared prompt style is sized for one-line questions, and
     these run to two. */
  body[data-game="rtr"] .write-prompt { font-size: 1.02rem; line-height: 1.3; }
  body[data-game="rtr"] .card { padding: 14px; }
}

.rtr-conf-locked {
  text-align: center; margin: 12px 0 0; font-weight: 800; font-size: .9rem;
  color: var(--amber); letter-spacing: .02em;
}

/* ------------------------------- Read the Room: options, reactions, card */

/* Advanced switches, collapsed by default so the lobby stays one decision. */
.rtr-adv { margin: 10px 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rtr-adv summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ink-dim);
  list-style: none;
  background: rgba(255, 255, 255, .04);
  min-height: 0;
}
.rtr-adv summary::-webkit-details-marker { display: none; }
.rtr-adv summary::before {
  content: "+";
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
  width: 1em;
  text-align: center;
}
.rtr-adv[open] summary::before { content: "\2212"; }
.rtr-adv-sum-label {
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.rtr-adv-peek {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
}
.rtr-adv-peek select {
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  font-size: .92rem;
  font-weight: 700;
  min-height: 0;
  line-height: 1.15;
}
.rtr-adv[open].has-peek .rtr-adv-peek { display: none; }
.rtr-adv-body { padding: 4px 12px 12px; }
.rtr-adv-body > .field { margin: 8px 0; }
.rtr-adv-body > .field:first-child { margin-top: 4px; }
.rtr-adv-body > .btb-shield-warn { margin: 4px 0 0; }
.rtr-adv-body [data-options-peek-slot] { display: block; }
.rtr-adv-body [data-options-peek-slot] select { width: 100%; }
.rtr-adv-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 2px;
  border-top: 1px solid var(--line); cursor: pointer; text-align: left;
}
.rtr-adv-body > .rtr-adv-row:first-child { border-top: 0; padding-top: 6px; }
.rtr-adv-row input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--amber); }
.rtr-adv-row b { display: block; font-size: .9rem; }
.rtr-adv-row small { display: block; color: var(--ink-dim); font-size: .76rem; line-height: 1.35; margin-top: 2px; }

.npc-row .npc-avatar-btn {
  flex: 0 0 auto;
  padding: 0; margin: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}
.npc-row .npc-avatar-btn:hover,
.npc-row .npc-avatar-btn:focus-visible {
  border-color: var(--gold);
  outline: none;
}
.npc-row .npc-avatar-btn .avatar.sm { width: 40px; height: 40px; border-radius: 10px; }
.npc-panel .npc-count {
  float: none; margin-left: 8px; font-size: .78rem; font-weight: 800;
  color: var(--ink-dim); letter-spacing: .04em;
}
.npc-panel .npc-help,
.npc-panel .npc-locked-note {
  margin: 8px 12px 10px; font-size: .8rem; color: var(--ink-dim); line-height: 1.4;
}
.npc-list { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 10px; }
.npc-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  box-sizing: border-box; max-width: 100%;
}
.npc-row .npc-name {
  flex: 1 1 5em; font-weight: 800; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.npc-row .npc-diff,
.npc-add-row .npc-diff {
  flex: 1 1 7.5em;
  min-width: 0;
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
  font: inherit;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .02em;
  color: #f4f0ff;
  background: #1a1030;
  border: 2px solid rgba(255, 212, 59, .45);
  border-radius: 12px;
  padding: 10px 12px;
  color-scheme: dark;
  cursor: pointer;
}
.npc-row .npc-diff:focus,
.npc-add-row .npc-diff:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(78, 205, 196, .22);
}
.npc-panel select.npc-diff option {
  background: #1a1030;
  color: #f4f0ff;
  font-weight: 700;
}
.npc-row .npc-remove {
  flex: 0 0 auto; width: 36px; padding: 6px 0; min-height: 0;
}
.npc-add-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 0 12px 12px; box-sizing: border-box; max-width: 100%;
}
.npc-add-row .npc-diff { flex: 1 1 8em; }
.npc-add-row .btn {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  display: inline-block;
  padding: 10px 14px;
  font-size: .9rem;
  white-space: nowrap;
  box-sizing: border-box;
}
.npc-badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px;
  font-size: .65rem; font-weight: 900; letter-spacing: .06em;
  background: rgba(180, 200, 255, .2); color: #c8d8ff; vertical-align: middle;
}
.roster-item.is-npc { border-color: rgba(160, 180, 255, .35); }

/* Reaction counts under each declared option. Counts only, never names. */
.rtr-react-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rtr-react-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: .78rem;
  background: rgba(255, 255, 255, .09); border-radius: 999px; padding: 2px 8px;
}
.rtr-react-badge b { color: var(--amber); font-size: .8rem; }

.rtr-react-pick { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rtr-react-pick summary {
  cursor: pointer; padding: 9px 13px; font-weight: 800; font-size: .84rem;
  color: var(--ink-dim); list-style: none; background: rgba(255, 255, 255, .04);
}
.rtr-react-pick summary::-webkit-details-marker { display: none; }
.rtr-react-grid { padding: 8px 10px; display: grid; gap: 6px; }
.rtr-react-line { display: flex; align-items: center; gap: 6px; }
.rtr-react-line .tag {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  background: rgba(255, 255, 255, .1); display: grid; place-items: center;
  font-weight: 900; font-size: .76rem;
}
.rtr-react-btn {
  flex: 1; font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 7px 0;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink); min-height: 36px;
}
.rtr-react-btn.chosen { border-color: var(--amber); background: rgba(255, 184, 77, .18); }

/* The shareable story card: tall, self-contained, built to be screenshotted. */
.rtr-card-over {
  position: fixed; inset: 0; z-index: 60; overflow: auto;
  background: rgba(8, 4, 18, .82); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 16px calc(28px + var(--safe-b));
}
.rtr-card {
  width: min(360px, 92vw); border-radius: 26px; padding: 26px 22px 20px;
  background:
    radial-gradient(600px 300px at 20% -10%, #6b3fa0 0%, transparent 60%),
    linear-gradient(165deg, #2c1a4d 0%, #150c28 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  text-align: center; color: var(--ink);
}
.rtr-card-kicker {
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 900; color: var(--amber); margin-bottom: 16px;
}
.rtr-card-winner .avatar { width: 84px; height: 84px; border-radius: 24px; margin: 0 auto 10px; }
.rtr-card-name { font-size: 1.6rem; font-weight: 900; letter-spacing: -.4px; }
.rtr-card-score { color: var(--ink-dim); font-size: .9rem; margin-top: 2px; }
.rtr-card-runners { display: flex; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rtr-card-runner {
  display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700;
  background: rgba(255, 255, 255, .07); border-radius: 999px; padding: 3px 10px 3px 6px;
}
.rtr-card-runner b { color: var(--amber); }
.rtr-card-runner .avatar { width: 20px; height: 20px; border-radius: 6px; }
.rtr-card-stat {
  margin: 20px 0 0; padding: 14px 12px; border-radius: 16px;
  background: rgba(255, 184, 77, .13); border: 1px solid rgba(255, 184, 77, .3);
  font-size: 1.05rem; font-weight: 800; line-height: 1.35;
}
.rtr-card-award { margin-top: 16px; }
.rtr-card-label {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 900; color: var(--amber);
}
.rtr-card-awardee { font-size: 1.05rem; font-weight: 800; margin-top: 2px; }
.rtr-card-award p { margin: 4px 0 0; color: var(--ink-dim); font-size: .84rem; line-height: 1.4; }
.rtr-card-story {
  margin: 18px 0 0; font-size: .92rem; line-height: 1.5; color: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 16px;
}
.rtr-card-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; color: var(--ink-dim); font-size: .78rem; letter-spacing: .1em;
}
.rtr-card-fox { color: var(--amber); font-size: 1rem; }
.rtr-card-brand { font-weight: 800; text-transform: uppercase; }
.rtr-card-close { max-width: 200px; }
.rtr-card-hint { color: var(--ink-dim); font-size: .8rem; margin: 0; }

/* ------------------------------------------------ accounts / unlocks */

.account-card h1 { margin-bottom: 6px; }
.account-page-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}
.account-page-head h1 {
  margin: 0;
  line-height: 1.15;
  /* Never squeeze beside Back — that wrapped "Sign In / Create Account"
     into a one-word-per-line column. */
  min-width: 0;
  width: 100%;
}
.account-page-back {
  align-self: flex-start;
  padding: 8px 14px;
}
.account-home-head {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-bottom: 6px;
}
.account-home-head h1 { margin: 0; flex: 1 1 auto; min-width: 0; }

/* Account popup sits under the hamburger topbar (same pattern as game details). */
.account-modal {
  position: fixed;
  top: calc(56px + env(safe-area-inset-top, 0px));
  left: 0; right: 0; bottom: 0;
  z-index: 130;
  display: flex; align-items: stretch; justify-content: center;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(8, 4, 18, .82);
  backdrop-filter: blur(5px);
}
.account-modal-panel {
  width: min(560px, 100%);
  height: 100%;
  max-height: 100%;
  display: flex; flex-direction: column;
  background: #1a102e;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.account-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}
.account-modal-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  justify-self: start;
  min-width: 0;
}
.account-modal-head-spacer { display: block; }
.account-modal-head .account-start-btn {
  justify-self: center;
  grid-column: 2;
}
.account-modal-close {
  justify-self: end;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.account-modal-close:hover { background: rgba(255,255,255,.12); }
.account-modal-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.account-modal-body .account-card { margin: 0; padding: 0; border: 0; background: transparent; }
body.account-modal-open { overflow: hidden; }

.account-sec {
  display: block;
  margin: 11px 0 3px;
  min-width: 0;
  max-width: 100%;
}
.account-sec[data-sec="zen"] .account-sec-body {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.account-sec-head {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px 10px;
  align-items: center;
}
.account-sec.has-extra .account-sec-head {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}
.account-sec-extra {
  justify-self: end;
  min-width: 0;
}
.account-sec-toggle {
  width: 36px; height: 36px; margin-top: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: var(--ink);
  font: inherit; font-size: 1.35rem; font-weight: 800; line-height: 1;
  cursor: pointer; flex: 0 0 auto;
}
.account-sec-toggle:hover { background: rgba(255,255,255,.12); }
.account-sec.open .account-sec-toggle {
  border-color: rgba(255,212,59,.4);
  background: rgba(255,212,59,.12);
}
.account-sec .account-section-title { margin: 0; min-width: 0; }
.account-profile {
  display: grid;
  gap: 12px;
}
.account-profile-save-row {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
}
.account-profile-save-row .btn[hidden] { display: none !important; }
.profile-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}
.profile-field-main { min-width: 0; }
.profile-field-label {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.profile-field-value {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.profile-field-value[hidden],
.profile-field-input[hidden],
.profile-pw-change[hidden] {
  display: none !important;
}
.profile-field-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
}
.profile-edit-btn,
.profile-password-actions .btn {
  padding: 8px 12px;
  font-size: .78rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.profile-password-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-password-dots {
  letter-spacing: .18em;
  font-size: 1.05rem;
}
.profile-pw-change {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.profile-pw-change-actions {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.profile-aliases-block {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.profile-room-code-block {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}
/* One row: [code] [SAVE CODE] [REMOVE] — never stack under the field. */
.profile-room-code-row {
  display: grid;
  grid-template-columns: 7.5rem auto auto;
  align-items: center;
  justify-content: start;
  column-gap: 8px;
  row-gap: 0;
  margin-top: 8px;
}
.account-card .profile-room-code-row > #profRoomCode,
.profile-room-code-row > .profile-room-code-input {
  width: 7.5rem !important;
  max-width: 7.5rem !important;
  min-width: 0;
  box-sizing: border-box;
  letter-spacing: .18em;
  font-weight: 800;
  text-transform: uppercase;
  justify-self: start;
}
.account-card .profile-room-code-row > #profRoomCodeSave,
.profile-room-code-row > .profile-room-code-save {
  display: inline-block !important;
  width: auto !important;
  max-width: none;
  margin: 0;
  padding: 8px 14px;
  font-size: .78rem;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .28);
  justify-self: start;
}
.account-card .profile-room-code-row > #profRoomCodeRemove,
.profile-room-code-row > .profile-room-code-remove {
  display: inline-block !important;
  width: auto !important;
  margin: 0;
  padding: 8px 12px;
  font-size: .78rem;
  white-space: nowrap;
  justify-self: start;
}
.profile-aliases-title {
  margin: 0 0 8px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.account-profile-leave { z-index: 160; }
.account-sec-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  font-size: .85em;
  font-weight: 800;
}
.account-award-game-group { margin: 0 0 12px; }
.account-award-game-group:last-child { margin-bottom: 0; }
.account-award-game-title {
  margin: 0 0 6px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.account-award-x {
  display: inline-block;
  margin-left: 4px;
  color: var(--gold);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.account-start-btn {
  flex: 0 0 auto;
  width: auto;
  padding: 8px 14px;
  font-size: .78rem;
  letter-spacing: .06em;
  white-space: nowrap;
}
.btn.zen-account-store {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 4px 10px;
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1.15;
  white-space: nowrap;
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}
.btn.zen-account-store:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .28);
}
.btn.ghost.zen-account-about {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: max-content;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 8px;
  font-size: .7rem;
  letter-spacing: .02em;
  line-height: 1.15;
  white-space: nowrap;
}
.account-card label.field { margin-bottom: 16px; }
.account-card label.field span {
  font-size: .82rem; letter-spacing: .14em; margin-bottom: 8px;
}
.account-card label.field input:not([type="checkbox"]),
.account-card input:not([type]),
.account-card input[type="text"],
.account-card input[type="email"],
.account-card input[type="password"],
.account-card .password-wrap input {
  padding: 16px 18px; font-size: 1.15rem; border-radius: 16px;
  background: rgba(0, 0, 0, .34); border-width: 2px; min-height: 3.25rem;
  box-sizing: border-box;
}
.account-card input[readonly] {
  opacity: .92;
  color: var(--ink);
  cursor: default;
  /* Keep selectable so users can copy; managers still read the value. */
}
.password-wrap {
  position: relative;
  display: block;
}
.password-wrap input {
  width: 100%;
  padding-right: 4.6rem !important;
}
.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--amber);
  font: inherit;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 6px;
  line-height: 1;
}
.password-toggle:hover { color: var(--gold); }
.password-toggle[aria-pressed="true"] { color: var(--ink); }
.caps-lock-warn {
  display: block; margin: 6px 2px 0;
  font-size: .82rem; font-weight: 800; letter-spacing: .02em;
  color: var(--coral);
}
.caps-lock-warn[hidden] { display: none; }
.account-alt-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
}
.account-welcome-hero {
  display: flex; align-items: center; gap: 14px;
  margin: 6px 0 18px;
}
.account-welcome-fox {
  flex: 0 0 auto;
  width: clamp(96px, 26vw, 128px);
  height: auto;
  display: block;
  object-fit: contain;
  /* Soft lift so the mascot reads on the deep violet card. */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
.account-welcome-copy {
  flex: 1 1 auto; min-width: 0;
  margin: 6px 0 16px;
}
.account-welcome {
  margin: 0 0 6px;
  font-size: clamp(1.55rem, 5.5vw, 2.35rem);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.05;
  color: var(--gold);
  text-align: left;
}
.account-welcome-sub {
  margin: 0;
  text-align: left;
  color: var(--ink-dim);
  line-height: 1.45;
  font-size: .98rem;
}
.account-welcome-back {
  margin: 0 0 14px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--gold);
}
@media (max-width: 380px) {
  .account-welcome-hero { gap: 10px; }
  .account-welcome-fox { width: 84px; }
  .account-welcome-sub { font-size: .9rem; }
}
.roster-item.signing-in .sub,
.roster-item.customizing .sub { color: var(--gold); }
.mm-seat-busy { color: var(--gold); font-weight: 700; }
.wrap .lobby-swap { display: block; width: 100%; max-width: 320px; margin: 0 auto 8px; }
.wrap .lobby-dropout { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
.lobby-actions {
  max-width: 320px; margin: 22px auto 0;
  display: flex; flex-direction: column; gap: 8px;
}
.lobby-actions .lobby-swap,
.lobby-actions .lobby-dropout { margin: 0; max-width: none; }
.account-cta p {
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.4;
  font-size: .95rem;
}
.account-cta p b { color: var(--gold); }
.account-cta .btn { width: 100%; }
.account-cta-actions {
  display: grid; gap: 10px;
}
.account-cta.host-final { text-align: left; }
.account-cta.host-final .btn { width: 100%; }
.btn.btn-account-cta {
  background: linear-gradient(135deg, var(--gold) 0%, #ffb020 42%, var(--coral) 100%);
  color: #1a1226;
  border: 2px solid rgba(255, 255, 255, .28);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .34), 0 0 22px rgba(255, 212, 59, .42);
  /* Match .btn / PLAY AGAIN height: 2px border eats into padding (border-box). */
  font-size: 1.1rem;
  letter-spacing: .04em;
  padding: 14px 16px;
}
.btn.btn-account-cta:active {
  box-shadow: 0 4px 0 rgba(0, 0, 0, .34), 0 0 14px rgba(255, 212, 59, .32);
}
.credits-actions .btn.btn-account-cta {
  font-size: 1.15rem;
  padding: 16px 16px;
}
.verify-resend-confirm {
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 212, 59, .28);
  background: rgba(255, 212, 59, .08);
  text-align: left;
}
.verify-resend-ask {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}
.verify-resend-hint { margin: 0 0 12px; font-size: .9rem; }
.verify-resend-confirm .btn { width: 100%; }
.check {
  display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 18px;
  font-size: 1rem; line-height: 1.4; color: var(--ink);
}
.check input {
  width: 1.25rem; height: 1.25rem; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--amber); color-scheme: dark;
}
.legal-agree {
  margin: 12px 0 0;
  text-align: center;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-dim);
}
.legal-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--teal);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.legal-link:hover { color: var(--gold); }
.lobby-name-modal {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background: rgba(8, 4, 18, .78);
  backdrop-filter: blur(4px);
}
.lobby-name-panel {
  width: min(420px, 100%);
  padding: 22px 20px 18px;
  background: #1a102e;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.lobby-name-panel h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  letter-spacing: .03em;
}
.lobby-name-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 16px;
}
.terms-modal {
  position: fixed; inset: 0; z-index: 125;
  display: flex; align-items: stretch; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(8, 4, 18, .78);
  backdrop-filter: blur(4px);
}
.terms-modal-panel {
  width: min(760px, 100%);
  display: flex; flex-direction: column;
  background: #1a102e;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.terms-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}
.terms-modal-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.terms-modal-close {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.terms-modal-close:hover { background: rgba(255,255,255,.12); }
.terms-modal-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: min(70vh, 640px);
  border: 0;
  background: #150c28;
}
.terms-modal-panel.cap-help-panel {
  width: min(420px, 100%);
  align-self: center;
  max-height: min(80vh, 480px);
}
.terms-modal-panel.cap-help-panel .account-cap-list {
  margin: 0;
  padding: 16px 18px 18px 2rem;
  overflow: auto;
}
.invite-url {
  width: 100%; margin: 8px 0; font: inherit; font-size: 1rem; padding: 14px 16px;
  border-radius: 14px; border: 2px solid var(--line); background: rgba(0, 0, 0, .28);
  color: var(--ink); color-scheme: dark; box-sizing: border-box;
}
.account-invite-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px 0 10px;
}
.account-invite-stat {
  text-align: center; background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 8px;
}
.account-invite-stat b { display: block; font-size: 1.25rem; }
.account-invite-stat span {
  display: block; margin-top: 4px; font-size: .72rem; line-height: 1.25;
  color: var(--ink-dim); font-weight: 700;
}
.account-invite-progress { margin: 0 0 8px; font-size: .88rem; }
.account-invite-credit {
  margin: 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(81, 207, 102, .4);
  background: rgba(81, 207, 102, .1);
  font-size: .9rem; font-weight: 700;
}

/* ------------------------------------------------------------- friends */
.friend-add-row {
  display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px;
}
.friend-email {
  width: 100%; min-width: 0; font: inherit; font-size: .95rem; padding: 10px 12px;
  border-radius: 12px; border: 2px solid var(--line); background: rgba(0, 0, 0, .28);
  color: var(--ink); color-scheme: dark; box-sizing: border-box;
}
.friend-add-row #friendInviteBtn {
  width: 100%;
}
.friend-inbox { margin: 0 0 12px; }
.friend-inbox-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px;
}
.friend-inbox-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08);
}
.friend-inbox-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-pending-pill {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(143, 239, 154, .95);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(143, 239, 154, .35);
  background: rgba(143, 239, 154, .08);
}
.friend-outbox-row .friend-inbox-name { opacity: .95; }
.friend-inbox-btn {
  padding: 6px 10px !important; font-size: .78rem !important;
  min-height: 0 !important;
}
.friend-table-wrap {
  overflow-x: auto; margin-top: 4px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.08);
}
.friend-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: .82rem;
}
.friend-table th,
.friend-table td {
  padding: 8px 6px; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.friend-table th {
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 800;
}
.friend-table th:nth-child(1),
.friend-table td:nth-child(1) { width: 34%; }
.friend-table th:nth-child(2),
.friend-table td:nth-child(2) { width: 22%; }
.friend-table th:nth-child(3),
.friend-table td:nth-child(3),
.friend-table th:nth-child(4),
.friend-table td:nth-child(4),
.friend-table th:nth-child(5),
.friend-table td:nth-child(5) { width: 14.5%; text-align: right; }
.friend-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.friend-row { cursor: pointer; }
.friend-row:hover { background: rgba(255,255,255,.05); }
.friend-row:focus { outline: 2px solid var(--accent, #7fb2ff); outline-offset: -2px; }
.friend-name { font-weight: 700; }
.friend-level { color: var(--ink-dim); font-weight: 700; }
.account-friend-view #friendBackBtn { margin-bottom: 4px; }

.friend-req-backdrop {
  position: fixed; inset: 0; z-index: 145;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8, 10, 16, .72);
}
.friend-req-popup {
  width: min(360px, 100%); text-align: center; padding: 22px 18px 18px;
}
.friend-req-title { margin: 0 0 8px; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.friend-req-ask { margin: 0 0 16px; font-size: 1.05rem; font-weight: 700; }
.friend-req-actions { display: grid; gap: 8px; margin-bottom: 12px; }
.friend-req-note { margin: 0; font-size: .82rem; line-height: 1.35; }
.friend-room-invite-name {
  margin-top: 0; text-align: left;
}
.friend-room-invite-name[hidden],
.friend-req-actions[hidden] {
  display: none !important;
}
.friend-room-invite-name .field { margin-bottom: 12px; }
.friend-room-invite-name .field span {
  display: block; margin-bottom: 6px; font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.friend-room-invite-name input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  font: inherit; font-weight: 700; text-align: center;
}

.final-friend-wrap { margin-top: 10px; text-align: left; }
.final-friend-btn.final-friend-open {
  outline: 2px solid #8fef9a;
  outline-offset: 2px;
  border-color: #8fef9a;
  box-shadow: 0 0 0 1px rgba(143, 239, 154, .35);
}
.final-friend-hint {
  margin: 10px 0 6px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}
.final-friend-hint[hidden],
.final-friend-menu[hidden] {
  display: none !important;
}
.final-friend-menu {
  margin-top: 4px; display: grid; gap: 6px;
  padding: 8px; border-radius: 14px;
  border: 1px solid rgba(143, 239, 154, .35);
  background: rgba(0,0,0,.22);
}
.final-friend-opt {
  appearance: none; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; font: inherit; font-weight: 700;
  color: var(--ink); background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.final-friend-opt:hover { background: rgba(255,255,255,.12); }
.final-friend-opt:disabled { opacity: .55; cursor: default; }
.final-friend-opt.final-friend-opt-sent,
.final-friend-opt.final-friend-opt-sent:hover,
.final-friend-opt.final-friend-opt-sent:disabled {
  opacity: 1;
  background: rgba(143, 239, 154, .28);
  border-color: #8fef9a;
  box-shadow: 0 0 0 1px rgba(143, 239, 154, .35);
  cursor: default;
}

.account-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 18px;
}
.account-stats.account-stats-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.account-stats div,
.account-stats .account-stat {
  text-align: center; background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 6px;
  min-width: 0;
}
.account-stats.account-stats-5 .account-stat {
  padding: 8px 3px;
}
.account-stats b { display: block; font-size: 1.38rem; }
.account-stats.account-stats-5 b { font-size: 1.12rem; line-height: 1.15; }
.account-stats span { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.account-stats.account-stats-5 span {
  font-size: .58rem; letter-spacing: .04em;
}
.account-stat-wins.top100-wins-glow {
  border: 1px solid rgba(255, 212, 59, .55);
  background: linear-gradient(165deg, rgba(255,212,59,.18), rgba(255,255,255,.05));
  box-shadow: 0 0 0 1px rgba(255,212,59,.12), 0 0 18px rgba(255, 180, 40, .35);
}
.account-stat-rank.rank-tier-bronze b {
  color: #d4a574;
  text-shadow: 0 0 10px rgba(212, 140, 70, .35);
}
.account-stat-rank.rank-tier-silver b {
  color: #c5d4ef;
  text-shadow: 0 0 10px rgba(120, 170, 255, .4);
}
.account-stat-rank.rank-tier-gold b {
  color: #ffd45a;
  text-shadow: 0 0 12px rgba(255, 200, 60, .55);
}
.account-stat-rank.rank-tier-rainbow b {
  background: linear-gradient(90deg, #ff5c7a, #ffb020, #5ce1a0, #5ab0ff, #c77dff, #ff5c7a);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: top100-rainbow 2.8s linear infinite;
}
@keyframes top100-rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
@media (max-width: 420px) {
  .account-stats.account-stats-5 { gap: 4px; margin: 12px 0 14px; }
  .account-stats.account-stats-5 .account-stat { padding: 7px 2px; border-radius: 10px; }
  .account-stats.account-stats-5 b { font-size: .98rem; }
  .account-stats.account-stats-5 span { font-size: .52rem; letter-spacing: .02em; }
}

.top100-award-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 12px;
  margin: 0 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 212, 59, .4);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,212,59,.16), transparent 55%),
    linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,180,40,.08));
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.top100-award-icon { flex: 0 0 auto; filter: drop-shadow(0 6px 12px rgba(255,180,40,.35)); }
.top100-award-body { min-width: 0; flex: 1 1 auto; }
.top100-award-title {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 800;
}
.top100-award-rank {
  margin: 4px 0 8px; font-size: 1.7rem; font-weight: 900; line-height: 1.1;
}
.top100-award-rank.rank-tier-bronze,
.top100-celeb-rank.rank-tier-bronze { color: #d4a574; }
.top100-award-rank.rank-tier-silver,
.top100-celeb-rank.rank-tier-silver { color: #c5d4ef; }
.top100-award-rank.rank-tier-gold,
.top100-celeb-rank.rank-tier-gold { color: #ffd45a; }
.top100-award-rank.rank-tier-rainbow,
.top100-celeb-rank.rank-tier-rainbow {
  background: linear-gradient(90deg, #ff5c7a, #ffb020, #5ce1a0, #5ab0ff, #c77dff, #ff5c7a);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: top100-rainbow 2.8s linear infinite;
}
.top100-award-meta {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  font-size: .82rem; color: var(--ink-dim);
}
.top100-award-meta b { color: var(--ink); font-weight: 800; }
.top100-award-note { margin: 10px 0 0; font-size: .82rem; }

.top100-celeb {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6, 4, 16, .78); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease;
}
.top100-celeb.in { opacity: 1; }
.top100-celeb-card {
  width: min(420px, 100%);
  text-align: center;
  padding: 26px 18px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,212,59,.42);
  background: linear-gradient(165deg, #24163a, #160e28 55%, #1a1230);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 40px rgba(255,180,40,.18);
}
.top100-celeb-badge {
  width: 132px; height: 132px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 50%;
  transform: scale(2.4);
  filter: blur(8px) brightness(1.35);
  opacity: .55;
  transition: transform .55s cubic-bezier(.2,1.4,.3,1), filter .55s ease, opacity .45s ease, box-shadow .55s ease;
  box-shadow: 0 0 0 rgba(255,200,60,0);
}
.top100-celeb.in .top100-celeb-badge {
  transform: scale(1);
  filter: blur(0) brightness(1);
  opacity: 1;
  box-shadow: 0 0 28px rgba(255,200,60,.55), 0 0 60px rgba(255,140,40,.28);
}
.top100-celeb.reduce-motion .top100-celeb-badge,
.top100-celeb.reduce-motion.in .top100-celeb-badge {
  transform: none; filter: none; opacity: 1; transition: none;
}
.top100-celeb-card h2 {
  margin: 0 0 8px; font-size: 1.28rem; line-height: 1.25;
}
.top100-celeb-rank {
  font-size: 2.4rem; font-weight: 900; margin: 0 0 6px; line-height: 1;
}
.top100-celeb-card .muted { margin: 0 0 16px; }
@media (prefers-reduced-motion: reduce) {
  .account-stat-rank.rank-tier-rainbow b,
  .top100-award-rank.rank-tier-rainbow,
  .top100-celeb-rank.rank-tier-rainbow { animation: none; }
}

.account-cap-list {
  margin: 0 0 14px;
  padding: 0 0 0 1.15rem;
  color: var(--ink-dim);
  line-height: 1.45;
  font-size: .95rem;
}
.account-cap-list li { margin: 0 0 6px; }
.account-cap-list li:last-child { margin-bottom: 0; }

.account-identity {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px;
}
.account-identity-main { min-width: 0; flex: 1 1 auto; }
.account-identity-email {
  font-size: 1.05rem; font-weight: 900; word-break: break-all; line-height: 1.25;
}
.account-identity-meta {
  margin-top: 4px; font-size: .82rem; color: var(--ink-dim); font-weight: 700;
}
.account-level-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 6px 10px 6px 6px;
  border-radius: 999px; cursor: pointer; font: inherit;
  border: 2px solid rgba(255, 212, 59, .45);
  background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,212,59,.1));
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.account-level-chip.level-bronze {
  border-color: rgba(205, 127, 50, .55);
  background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(205,127,50,.18));
}
.account-level-chip.level-silver {
  border-color: rgba(192, 199, 209, .6);
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(160,170,185,.2));
}
.account-level-chip.level-gold {
  border-color: rgba(255, 212, 59, .55);
  background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,212,59,.16));
}
.account-level-chip.level-platinum {
  border-color: rgba(200, 220, 255, .55);
  background: linear-gradient(165deg, rgba(255,255,255,.14), rgba(140,170,210,.2));
}
.account-level-chip.level-diamond {
  border-color: rgba(126, 240, 255, .65);
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(59,141,255,.22));
  box-shadow: 0 8px 22px rgba(59, 141, 255, .28);
}
.account-level-chip:active { transform: scale(.97); }
.account-level-chip .zz-level-badge { display: block; flex: 0 0 auto; }
.account-level-chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.account-level-chip-label {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 800;
}
.account-level-chip-title {
  font-size: 1rem; font-weight: 900; letter-spacing: .02em;
}
.account-level-progress {
  margin: 0 0 16px; padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.account-level-progress-head {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 800; margin: 0 0 10px;
}
.account-level-progress-done {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 12px;
  background: rgba(81,207,102,.12); border: 1px solid rgba(81,207,102,.35);
  color: var(--green); font-weight: 800; font-size: .9rem;
}
.account-level-progress-row {
  display: flex; gap: 10px; align-items: center; margin: 0 0 10px;
}
.account-level-progress-row:last-child { margin-bottom: 0; }
.account-level-progress-ic { flex: 0 0 auto; }
.account-level-progress-body { flex: 1 1 auto; min-width: 0; }
.account-level-progress-title { font-weight: 800; font-size: .92rem; margin-bottom: 4px; }
.account-level-progress-bar,
.account-level-card .account-level-progress-bar {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden;
}
.account-level-progress-bar i,
.account-level-card .account-level-progress-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #ffd43b, #fff3c4);
}
.account-level-progress-body small,
.account-level-card small {
  display: block; margin-top: 4px; color: var(--ink-dim); font-size: .78rem;
}

.account-levels-modal {
  position: fixed;
  top: calc(56px + env(safe-area-inset-top, 0px));
  left: 0; right: 0; bottom: 0;
  z-index: 135;
  display: flex; align-items: stretch; justify-content: center;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(6, 8, 14, .72);
  backdrop-filter: blur(6px);
}
.account-levels-panel {
  width: min(560px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  background: #1a102e;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.account-levels-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}
.account-levels-head h2 {
  margin: 0; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
}
.account-levels-body {
  flex: 1 1 auto; overflow: auto; padding: 14px;
}
.account-levels-intro { margin: 0 0 14px; }
.account-level-card {
  margin: 0 0 12px; padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.account-level-card.is-current {
  border-color: rgba(255,212,59,.55);
  background: rgba(255,212,59,.08);
}
.account-level-card.is-earned:not(.is-current) {
  border-color: rgba(81,207,102,.4);
}
.account-level-card-top {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px;
}
.account-level-card h3 {
  margin: 0 0 4px; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.account-level-card h3 .pill {
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(255,212,59,.5); color: var(--gold); font-weight: 800;
}
.account-level-card h3 .pill.earned {
  border-color: rgba(81,207,102,.5); color: var(--green);
}
.account-level-card p { margin: 0; color: var(--ink-dim); font-size: .9rem; }
.account-level-card ul {
  margin: 8px 0; padding: 0 0 0 1.1rem; color: var(--ink); font-size: .9rem;
}
.account-level-card li { margin: 0 0 4px; }
.account-level-card-how {
  margin: 0 0 8px; font-size: .85rem; color: var(--ink-dim);
}
.account-section-title {
  margin: 20px 0 10px;
  font-size: .90rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.account-sec .account-section-title { margin: 0; }
.account-empty { margin: 0 0 4px; font-size: .92rem; }
.account-aliases-hint { margin: 0 0 10px; font-size: .88rem; }
.account-aliases {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.account-alias-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 8px 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  font-weight: 700; font-size: .9rem;
}
.account-alias-remove {
  appearance: none; border: 0; margin: 0; padding: 0;
  width: 24px; height: 24px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 1.05rem; line-height: 1; font-weight: 900;
  color: var(--ink-dim); background: rgba(0,0,0,.22);
}
.account-alias-remove:hover { color: var(--ink); background: rgba(255,80,80,.28); }
.account-alias-remove:disabled { opacity: .5; cursor: wait; }
.celeb-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
@media (min-width: 520px) {
  .celeb-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .celeb-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .celeb-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.celeb-pick {
  appearance: none; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: inherit;
  border-radius: 14px; padding: 10px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: inherit; font-weight: 700; font-size: .82rem; line-height: 1.2;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.celeb-pick:hover { background: rgba(255,255,255,.09); }
.celeb-pick:active { transform: scale(.97); }
.celeb-pick.selected {
  border-color: rgba(255, 212, 59, .55);
  background: rgba(255, 212, 59, .12);
  box-shadow: 0 0 0 1px rgba(255, 212, 59, .18);
}
.celeb-pick-ic { font-size: 1.45rem; line-height: 1; }
.celeb-pick-label { text-align: center; }
.celeb-pick.locked {
  opacity: .58;
  position: relative;
}
.celeb-pick.locked:hover { opacity: .88; background: rgba(255,255,255,.09); }
.celeb-pick-lock { font-size: .9rem; line-height: 1; }
.celeb-pick-price {
  font-size: .68rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .02em;
}
.account-awards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.account-award {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: rgba(255, 212, 59, .08); border: 1px solid rgba(255, 212, 59, .28);
  border-radius: 14px;
}
.account-award-face {
  width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex: 0 0 auto;
}
.account-award-face .zz-avatar-face { width: 100%; height: 100%; }
.account-award-ic {
  width: 48px; height: 48px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; line-height: 1;
  background: rgba(255,255,255,.08); border-radius: 12px;
}
.account-award-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-award-body b { font-size: .98rem; line-height: 1.25; }
.account-award-body span { font-size: .78rem; text-transform: none; }
.account-games {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px;
}
.account-game-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; background: rgba(255,255,255,.05); border-radius: 12px;
}
.account-game-title { font-weight: 700; font-size: .95rem; min-width: 0; }
.account-game-plays {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--gold); font-size: 1.05rem;
}
.mile-list { display: flex; flex-direction: column; gap: 10px; }
.mile-row {
  display: flex; gap: 10px; align-items: center; padding: 10px;
  background: rgba(255,255,255,.04); border-radius: 14px;
}
.mile-row.earned { border: 1px solid rgba(255,212,59,.35); }
.mile-face { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; position: relative; }
.mile-face .zz-avatar-face { width: 100%; height: 100%; }
.mile-face-locked { display: block; width: 100%; height: 100%; position: relative; }
.mile-face-locked .zz-avatar-face { opacity: .42; filter: grayscale(.35); }
.mile-face-locked .avatar-lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; background: rgba(0,0,0,.28);
}
/* Takes the rest of the row so every bar is the same length, whatever the
   title and label above it happen to say. */
.mile-body { flex: 1 1 auto; min-width: 0; }
.mile-title { font-weight: 800; text-transform: capitalize; }
.mile-label { font-size: .82rem; color: var(--ink-dim); margin: 2px 0 6px; }
.mile-bar {
  display: block; width: 100%; box-sizing: border-box;
  height: 8px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
}
.mile-bar i {
  display: block; height: 100%; min-width: 0; border-radius: 99px;
  /* Fall back if a theme omits --amber (account screen has no data-game). */
  background: linear-gradient(90deg, var(--amber, var(--gold)), #ffd98a);
  box-shadow: 0 0 8px rgba(255,193,71,.5);
  transition: width .35s ease;
}
.mile-row.earned .mile-bar i { background: linear-gradient(90deg, #ffd43b, #fff3c4); }
.avatar-pick.locked {
  cursor: pointer; background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.avatar-pick.locked:hover { border-color: rgba(255,255,255,.18); }
.avatar-locked-slot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; box-sizing: border-box; padding: 18%;
  background: rgba(255,255,255,.06);
}
.avatar-locked-slot .avatar-locked-icon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: clamp(1.1rem, 6vw, 1.85rem);
  line-height: 1; opacity: .72; filter: grayscale(1);
}
.avatar-locked-slot.mile {
  padding: 14%; background: rgba(255,255,255,.08); border-radius: 12px;
}
.avatar-locked-slot.mile .avatar-locked-icon { font-size: 1.2rem; }
.pick-hint { font-size: .82rem; margin: 0 0 10px; }
.pick-hint a { color: var(--amber); }
.cap-help-controls {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 0; vertical-align: middle;
  flex: 0 0 auto;
}
.cap-help-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  color: var(--ink); font-weight: 900; cursor: pointer; flex: 0 0 auto;
}
.cap-account-link {
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
  color: var(--amber); font-weight: 800; font-size: .78rem; line-height: 1.1;
  border-radius: 999px; padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.cap-account-link:hover { background: rgba(255,212,59,.12); }
.cap-help-line {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 8px; margin: 6px 0 12px; font-size: .86rem; white-space: nowrap;
  min-width: 0;
}
.cap-help-line .cap-help-text { flex: 0 1 auto; min-width: 0; }
.cap-help-line .cap-help-controls { margin-left: 0; }
.unlock-celeb {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8,4,18,.72); backdrop-filter: blur(4px);
}
.unlock-celeb-card {
  width: min(440px, 100%); background: #1c1230; border: 1px solid rgba(255,212,59,.35);
  border-radius: 22px; padding: 22px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.unlock-celeb-card h2 { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.25; }
.unlock-celeb-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px;
  margin: 16px 0 18px;
}
.unlock-celeb-face { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .78rem; }
.unlock-celeb-face .zz-avatar-face, .unlock-celeb-face .avatar {
  width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
}
.warn { color: #ffb4a8; }

/* ---------------------------------------------------------- Matrix Mayhem */
body[data-game="mayhem"] {
  --bg: #070b18;
  --bg-2: #12182c;
  --card-solid: #1a2238;
  --mm-cyan: #3de0ff;
  --mm-magenta: #ff4fd8;
  --mm-amber: #ffc14a;
  background:
    radial-gradient(920px 640px at 6% -10%, #1a4a6e 0%, transparent 56%),
    radial-gradient(780px 560px at 104% 4%, #6a1a58 0%, transparent 54%),
    radial-gradient(640px 480px at 50% 110%, #3a2a10 0%, transparent 52%),
    linear-gradient(152deg, #070b18 0%, #12182c 42%, #1a1030 72%, #0c1824 100%);
  background-attachment: fixed;
}
body[data-game="mayhem"] .bg-blobs span:nth-child(1) { background: #3de0ff; }
body[data-game="mayhem"] .bg-blobs span:nth-child(2) { background: #ff4fd8; }
body[data-game="mayhem"] .bg-blobs span:nth-child(3) { background: #ffc14a; }

.mm-lobby-teams {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px;
}
.mm-team-col {
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px;
}
.mm-team-x { border-color: rgba(255, 99, 99, .35); }
.mm-team-o { border-color: rgba(90, 180, 255, .35); }
.mm-team-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 900; margin-bottom: 8px; letter-spacing: .02em;
  gap: 8px;
}
.mm-team-head .mm-team-badge {
  margin-right: 0;
}
.mm-team-count {
  font-size: .8rem; opacity: .75; background: rgba(255,255,255,.08);
  border-radius: 999px; padding: 2px 8px;
}
.mm-team-member {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-weight: 700;
}
.mm-seat-row {
  display: grid; align-items: center; gap: 8px; width: 100%;
}
.mm-team-x .mm-seat-row {
  grid-template-columns: auto minmax(0, 1fr) 34px;
}
.mm-team-o .mm-seat-row {
  grid-template-columns: 34px auto minmax(0, 1fr);
}
.mm-seat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-seat-btn {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,.08); color: var(--ink);
  font-size: 1.15rem; font-weight: 900; line-height: 1; cursor: pointer;
  justify-self: center;
}
.mm-seat-btn:hover {
  border-color: rgba(255,212,59,.55); background: rgba(255,212,59,.14); color: var(--gold);
}
.mm-seat-btn:disabled { opacity: .45; cursor: default; }
.mm-team-empty { color: var(--ink-dim); font-size: .9rem; padding: 6px 0; }
.mm-lobby-hint { grid-column: 1 / -1; margin: 4px 0 0; font-size: .9rem; }
.mm-confirm-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px;
}
.mm-player-team { margin: 12px 0; }
.mm-switch-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mm-board {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  max-width: 520px; margin: 12px auto;
}
.mm-cell {
  aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,.05); color: var(--ink);
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
  padding: 8px; cursor: default; font: inherit; overflow: hidden;
}
.mm-board.interactive .mm-cell.pickable {
  cursor: pointer; border-color: rgba(255,212,59,.45);
  background: rgba(255,212,59,.08);
}
.mm-board.interactive .mm-cell.pickable:hover { background: rgba(255,212,59,.16); }
.mm-board.interactive .mm-cell.requested-by-me {
  border-color: rgba(81, 207, 102, .8);
  background: rgba(81, 207, 102, .14);
  box-shadow: inset 0 0 0 1px rgba(81, 207, 102, .22);
}
.mm-cell-label {
  font-size: clamp(.83rem, 2.76vw, 1.09rem); font-weight: 800;
  text-align: center; line-height: 1.15;
}
.mm-mini-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; color: var(--gold);
}
.mm-mini-icon svg { width: 100%; height: 100%; display: block; }
.mm-mini-icon.on-cell { width: clamp(22px, 6.5vw, 38px); height: clamp(22px, 6.5vw, 38px); }
.mm-board.interactive .mm-cell.requested-by-me .mm-mini-icon { color: #8ce99a; }
.mm-cell.mm-win .mm-mini-icon { color: #b2f2bb; }
.mm-round-tag {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mm-round-tag .mm-mini-icon { width: 26px; height: 26px; }
.mm-mini-icon.on-title {
  width: 1em; height: 1em; margin-right: .32em;
  vertical-align: -.12em;
}
.mm-request-faces {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 3px; max-width: 100%; margin-top: 1px;
}
.avatar.mm-req {
  width: clamp(18px, 5vw, 26px); height: clamp(18px, 5vw, 26px);
  border-radius: 7px; flex: 0 0 auto;
  border: 1.5px solid rgba(255,212,59,.7);
  box-shadow: 0 0 0 1px rgba(0,0,0,.28);
}
.mm-fp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.mm-fp-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: inherit;
  font: inherit;
  cursor: default;
  text-align: center;
}
.mm-fp-list.host-pick .mm-fp-item,
.mm-fp-item:not([disabled]) {
  cursor: pointer;
}
.mm-fp-list.host-pick .mm-fp-item:hover,
.mm-fp-item.mine {
  border-color: rgba(255,212,59,.55);
  background: rgba(255,212,59,.08);
}
.mm-fp-name { font-weight: 800; font-size: .92rem; line-height: 1.2; }
.mm-fp-type {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-dim);
}
.mm-fp-faces { margin-top: 2px; }
.mm-board.interactive .mm-cell.requested-by-me .avatar.mm-req {
  border-color: rgba(81, 207, 102, .9);
}
.mm-mark { font-size: clamp(2.8rem, 11.2vw, 4.76rem); font-weight: 1000; line-height: 1; }
.mm-own-x .mm-mark { color: #ff6b6b; }
.mm-own-o .mm-mark { color: #74c0fc; }
.mm-cell.mm-win {
  position: relative;
  border: 4px solid #51cf66;
  box-shadow:
    0 0 0 2px rgba(81, 207, 102, .55),
    0 0 18px rgba(81, 207, 102, .55),
    inset 0 0 0 1px rgba(81, 207, 102, .35);
  background: rgba(81, 207, 102, .16);
  z-index: 1;
  animation: mm-win-reveal 0.55s ease both;
}
@keyframes mm-win-reveal {
  0% { transform: scale(.92); filter: brightness(.85); box-shadow: none; }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); filter: brightness(1); }
}
.mm-cell.mm-stamping {
  position: relative;
  z-index: 2;
  overflow: visible;
  animation: mm-stamp-cell 0.95s ease both;
}
.mm-cell.mm-stamping .mm-stamp-fx {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  animation: mm-stamp-fx 0.95s ease both;
}
.mm-cell.mm-stamping .mm-stamp-fx .mm-mini-icon {
  width: clamp(34px, 10vw, 56px); height: clamp(34px, 10vw, 56px);
  filter: drop-shadow(0 0 12px rgba(255,212,59,.55));
}
.mm-cell.mm-stamping .mm-stamp-burst {
  position: absolute; inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(255,212,59,.65);
  pointer-events: none;
  animation: mm-stamp-burst 0.95s ease both;
}
.mm-cell.mm-stamping .mm-mark {
  position: relative; z-index: 1;
  animation: mm-stamp-slam 0.95s cubic-bezier(.12, 1.35, .28, 1) both;
}
.mm-cell.mm-stamp-flag .mm-mark { animation-name: mm-stamp-flag; }
.mm-cell.mm-stamp-shell .mm-mark { animation-name: mm-stamp-shell; }
.mm-cell.mm-stamp-swat .mm-mark { animation-name: mm-stamp-swat; }
.mm-cell.mm-stamp-vault .mm-mark { animation-name: mm-stamp-vault; }
.mm-cell.mm-stamp-sync .mm-mark { animation-name: mm-stamp-sync; }
.mm-cell.mm-stamp-memory .mm-mark { animation-name: mm-stamp-memory; }
.mm-cell.mm-stamp-trace .mm-mark { animation-name: mm-stamp-trace; }
.mm-cell.mm-stamp-scramble .mm-mark { animation-name: mm-stamp-scramble; }
.mm-cell.mm-stamp-clash .mm-mark { animation-name: mm-stamp-clash; }
.mm-cell.mm-stamp-math .mm-mark,
.mm-cell.mm-stamp-count .mm-mark,
.mm-cell.mm-stamp-total .mm-mark { animation-name: mm-stamp-calc; }
.mm-cell.mm-stamp-pads .mm-mark,
.mm-cell.mm-stamp-majority .mm-mark,
.mm-cell.mm-stamp-odd .mm-mark,
.mm-cell.mm-stamp-shift .mm-mark,
.mm-cell.mm-stamp-order .mm-mark,
.mm-cell.mm-stamp-split .mm-mark,
.mm-cell.mm-stamp-mirror .mm-mark { animation-name: mm-stamp-pop; }
.mm-cell.mm-stamp-needle .mm-mark,
.mm-cell.mm-stamp-cash .mm-mark,
.mm-cell.mm-stamp-tower .mm-mark { animation-name: mm-stamp-calc; }
.mm-cell.mm-stamp-beat .mm-mark,
.mm-cell.mm-stamp-pulse .mm-mark { animation-name: mm-stamp-sync; }
.mm-cell.mm-stamp-lane .mm-mark { animation-name: mm-stamp-trace; }
@keyframes mm-stamp-cell {
  0% { transform: scale(.92); filter: brightness(.7); }
  18% { transform: scale(1.06); filter: brightness(1.25); box-shadow: 0 0 0 3px rgba(255,212,59,.55); }
  45% { transform: scale(1.02); filter: brightness(1.1); }
  100% { transform: scale(1); filter: none; }
}
@keyframes mm-stamp-fx {
  0%, 12% { opacity: 1; transform: scale(.7); }
  38% { opacity: 1; transform: scale(1.25); }
  58% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes mm-stamp-burst {
  0%, 35% { opacity: 0; transform: scale(.2); }
  48% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes mm-stamp-slam {
  0%, 40% { opacity: 0; transform: translateY(-120%) scale(.4) rotate(-18deg); }
  58% { opacity: 1; transform: translateY(8%) scale(1.28) rotate(4deg); }
  72% { transform: translateY(-4%) scale(.94) rotate(-2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes mm-stamp-flag {
  0%, 36% { opacity: 0; transform: translateX(-130%) rotate(-25deg) scale(.5); }
  55% { opacity: 1; transform: translateX(6%) rotate(8deg) scale(1.3); }
  70% { transform: translateX(-3%) rotate(-4deg) scale(.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes mm-stamp-shell {
  0%, 30% { opacity: 0; transform: scale(.2) translateY(40%); }
  42% { opacity: 1; transform: scale(1.35) translateY(-18%); }
  54% { transform: scale(.9) translateY(10%); }
  66% { transform: scale(1.12) translateY(-6%); }
  100% { opacity: 1; transform: none; }
}
@keyframes mm-stamp-swat {
  0%, 38% { opacity: 0; transform: scale(2.4) rotate(-40deg); filter: blur(2px); }
  52% { opacity: 1; transform: scale(.85) rotate(8deg); filter: none; }
  68% { transform: scale(1.15) rotate(-3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes mm-stamp-vault {
  0%, 34% { opacity: 0; transform: scale(.3) rotate(-180deg); }
  58% { opacity: 1; transform: scale(1.25) rotate(12deg); }
  78% { transform: scale(.95) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes mm-stamp-sync {
  0%, 32% { opacity: 0; transform: scale(.2); }
  44% { opacity: 1; transform: scale(1.4); }
  56% { opacity: .35; transform: scale(.75); }
  68% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: none; }
}
@keyframes mm-stamp-memory {
  0%, 34% { opacity: 0; transform: rotateY(90deg) scale(.6); }
  58% { opacity: 1; transform: rotateY(-12deg) scale(1.2); }
  78% { transform: rotateY(6deg) scale(.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes mm-stamp-trace {
  0%, 30% { opacity: 0; transform: translateX(-80%) scale(.45); filter: brightness(2); }
  48% { opacity: 1; transform: translateX(18%) scale(1.35); filter: brightness(1.8); }
  66% { transform: translateX(-8%) scale(.92); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes mm-stamp-scramble {
  0%, 32% { opacity: 0; transform: translate(40%, -50%) rotate(40deg) scale(.4); letter-spacing: .4em; }
  55% { opacity: 1; transform: translate(-8%, 10%) rotate(-10deg) scale(1.25); letter-spacing: .05em; }
  100% { opacity: 1; transform: none; letter-spacing: normal; }
}
@keyframes mm-stamp-clash {
  0%, 36% { opacity: 0; transform: scale(.4); filter: hue-rotate(90deg); }
  50% { opacity: 1; transform: scale(1.3); filter: hue-rotate(-40deg); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes mm-stamp-calc {
  0%, 38% { opacity: 0; transform: scale(.2) translateY(30%); }
  52% { opacity: 1; transform: scale(1.35); }
  68% { transform: scale(.92); }
  100% { opacity: 1; transform: none; }
}
@keyframes mm-stamp-pop {
  0%, 40% { opacity: 0; transform: scale(0) rotate(-20deg); }
  58% { opacity: 1; transform: scale(1.35) rotate(8deg); }
  100% { opacity: 1; transform: none; }
}
.mm-champs {
  text-align: center;
  margin: 8px 0 18px;
  padding: 16px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,212,59,.35);
  background: rgba(255,212,59,.08);
}
.mm-champs-x {
  border-color: rgba(255, 107, 107, .45);
  background: rgba(255, 107, 107, .1);
}
.mm-champs-o {
  border-color: rgba(116, 192, 252, .45);
  background: rgba(116, 192, 252, .1);
}
.mm-champs-title {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 1000;
  letter-spacing: .08em;
  line-height: 1.05;
  color: var(--gold);
}
.mm-champs-x .mm-champs-title { color: #ff8e8e; }
.mm-champs-o .mm-champs-title { color: #74c0fc; }
.mm-champs-sub {
  margin: 6px 0 12px;
  color: var(--ink-dim);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mm-champs-roster {
  display: grid; gap: 8px; justify-items: stretch;
}
.mm-champs-member {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  background: rgba(0,0,0,.18); border: 1px solid var(--line);
  text-align: left;
}
.mm-champs-member .name {
  font-weight: 800; font-size: 1rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-champs.mini { margin: 0 0 14px; }
.mm-champs.phone { margin: 6px 0 16px; }
.mm-captain-line, .mm-note {
  text-align: center; margin: 8px 0 4px; color: var(--ink-dim);
}
.mm-captain-line {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 12px; margin: 14px auto 6px; max-width: 520px; width: fit-content;
  text-align: left;
}
.mm-captain-line .avatar {
  flex: 0 0 auto;
}
.mm-captain-msg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-width: 0; font-size: clamp(.95rem, 2.6vw, 1.1rem); line-height: 1.25;
}
.mm-captain-msg b { color: var(--ink); font-weight: 800; }
.mm-captain-for { color: var(--ink-dim); }
.mm-pick-head {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 8px 10px; margin: 8px auto 10px;
  max-width: calc(100% - 16px);
}
.mm-pick-reminder {
  width: fit-content; max-width: min(100%, 22rem);
  margin: 0; padding: 8px 16px;
  border: 2px solid rgba(255,212,59,.65); border-radius: 999px;
  background: rgba(255,212,59,.14); color: var(--gold);
  /* ~15% smaller than prior clamp(1.05rem, 3vw, 1.35rem) */
  font-size: clamp(.89rem, 2.55vw, 1.15rem); font-weight: 1000;
  letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  animation: mm-pick-pulse 1.6s ease-in-out infinite;
}
.mm-pick-waiting { gap: 8px; }
.mm-pick-cheers {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; flex: 0 0 auto; order: 0;
  font-size: 1.45rem; line-height: 1;
  letter-spacing: 0; text-transform: none;
  filter: drop-shadow(0 0 4px rgba(255,209,102,.45));
}
.mm-pick-cheer {
  display: inline-block;
  animation: mmPickCheerIn .35s ease both;
}
@keyframes mmPickCheerIn {
  0% { opacity: 0; transform: scale(.55) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mm-pick-label { flex: 0 1 auto; min-width: 0; }
.mm-emoji-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  order: 2;
}
.mm-pick-head .mm-pick-reminder { order: 1; }
.mm-emoji-toggle {
  width: auto; min-height: 28px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.12); color: var(--ink);
  font: inherit; font-size: .68rem; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; line-height: 1.1;
}
.mm-emoji-toggle:active { transform: scale(.96); }
.mm-emoji-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 6;
  width: min(280px, 72vw);
  padding: 8px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card-solid);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.mm-emoji-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.mm-emoji-btn {
  width: 100%; aspect-ratio: 1 / 1; min-height: 44px;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.08); cursor: pointer;
  display: grid; place-items: center; padding: 4px;
  font: inherit;
  font-size: clamp(1.5rem, 7vw, 1.9rem); line-height: 1;
}
.mm-emoji-btn:active { transform: scale(.94); background: rgba(255,209,102,.2); }
.mm-picking-line {
  display: inline-flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .28em .35em; vertical-align: middle;
}
.mm-picking-team {
  font-size: 1em; font-weight: 1000; letter-spacing: .06em;
  line-height: 1;
}
.mm-picking-team-x { color: #ff6b6b; }
.mm-picking-team-o { color: #74c0fc; }
.mm-picking-rest {
  font-size: .8em; font-weight: 900; letter-spacing: .08em;
  line-height: 1; opacity: .92;
}
.host-prompt .mm-picking-line {
  display: flex; width: 100%;
}
@keyframes mm-pick-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,212,59,0); }
  50% { transform: scale(1.035); box-shadow: 0 0 22px rgba(255,212,59,.2); }
}
.mm-answers {
  max-width: 560px; margin: 12px auto 0;
  display: grid; gap: 12px;
}
.mm-ans-card {
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  animation: mm-ans-in .45s ease both;
}
.mm-ans-card:nth-child(2) { animation-delay: .06s; }
.mm-ans-card:nth-child(3) { animation-delay: .12s; }
.mm-ans-card:nth-child(4) { animation-delay: .18s; }
.mm-ans-card:nth-child(5) { animation-delay: .24s; }
@keyframes mm-ans-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.mm-ans-prompt {
  margin: 0 0 8px; font-weight: 800; line-height: 1.35;
}
.mm-ans-name {
  font-size: .78rem; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px;
}
.mm-ans-answer {
  font-size: 1.25rem; font-weight: 1000; color: var(--gold);
}
.mm-ans-opts { display: grid; gap: 6px; }
.mm-ans-opt {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
  align-items: center; padding: 8px 10px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid transparent;
}
.mm-ans-opt.majority {
  border-color: rgba(81, 207, 102, .75);
  background: rgba(81, 207, 102, .16);
}
.mm-ans-label { font-weight: 800; min-width: 0; }
.mm-ans-count { font-weight: 1000; color: var(--ink-dim); }
.mm-ans-opt.majority .mm-ans-count { color: #51cf66; }
.mm-ans-badge {
  font-size: .68rem; font-weight: 1000; letter-spacing: .06em;
  color: #51cf66; border: 1px solid rgba(81, 207, 102, .55);
  border-radius: 999px; padding: 2px 7px;
}
.mm-ans-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mm-ans-word {
  font-size: 1.35rem; font-weight: 1000; color: var(--gold);
  padding: 6px 12px; border-radius: 12px;
  background: rgba(255, 212, 59, .1); border: 1px solid rgba(255, 212, 59, .35);
}
.mm-ans-big {
  font-size: clamp(2.4rem, 10vw, 3.6rem); font-weight: 1000;
  text-align: center; color: var(--gold); line-height: 1.1;
}
.mm-ans-glyph { font-size: .7em; }
.mm-results { max-width: 520px; margin: 12px auto 0; display: grid; gap: 12px; }
.mm-results-team {
  display: grid; gap: 6px;
  padding: 10px; border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.mm-results-x {
  border-color: rgba(255, 107, 107, .4);
  background: rgba(255, 107, 107, .08);
}
.mm-results-o {
  border-color: rgba(116, 192, 252, .4);
  background: rgba(116, 192, 252, .08);
}
.mm-results-team.won {
  box-shadow: inset 0 0 0 1px rgba(81, 207, 102, .35);
}
.mm-results-team-head {
  font-size: .78rem; font-weight: 1000; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim); padding: 0 2px 2px;
}
.mm-results-x .mm-results-team-head { color: #ff8e8e; }
.mm-results-o .mm-results-team-head { color: #74c0fc; }
.mm-result-row {
  display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) minmax(4.6rem, max-content) auto; gap: 8px;
  align-items: center; padding: 8px 10px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid transparent;
}
.mm-result-row.me {
  border-color: rgba(81, 207, 102, .75);
  background: rgba(81, 207, 102, .16);
}
.mm-result-row .place { font-weight: 900; color: var(--ink-dim); text-align: center; }
.mm-result-row .detail { color: var(--gold); font-weight: 800; font-size: .9rem; }
.mm-result-row .name { min-width: 0; }

/* >6 players: tighten vertical rhythm; avatars at most −30% (40→28). */
.mm-results.crowded {
  margin-top: 6px; gap: 7px;
}
.mm-results.crowded .mm-results-team {
  padding: 5px 8px; gap: 2px; border-radius: 12px;
}
.mm-results.crowded .mm-results-team-head {
  font-size: .7rem; padding: 0 2px 1px; letter-spacing: .06em;
}
.mm-results.crowded .mm-result-row {
  padding: 3px 8px; gap: 6px; border-radius: 9px;
  grid-template-columns: 22px 28px minmax(0, 1fr) minmax(4.2rem, max-content) auto;
}
.mm-results.crowded .mm-result-row .avatar.sm {
  width: 28px; height: 28px; border-radius: 8px;
}
.mm-results.crowded .mm-result-row .detail { font-size: .8rem; }
.mm-results.crowded .mm-result-row .name { font-size: .92rem; }
.mm-results.crowded .mm-tie-time {
  font-size: .74rem; min-height: 1.2em; padding: 0 5px;
}
.mm-results-crowded .host-prompt { font-size: clamp(1.35rem, 3.2vw, 2rem); margin-bottom: 0; }
.mm-results-crowded .mm-note { margin: 4px 0 0; }
.mm-results-crowded h2.center { margin: 6px 0 4px; font-size: 1.25rem; }
.mm-tie-time {
  justify-self: end; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.35em; padding: 1px 7px;
  border-radius: 999px; border: 1px solid rgba(255,212,59,.45);
  background: rgba(255,212,59,.12); color: var(--gold);
  /* ~15% larger than prior .72rem */
  font-size: .83rem; font-weight: 900; letter-spacing: .04em;
  white-space: nowrap; line-height: 1;
}
.mm-tie-time:empty {
  border-color: transparent; background: transparent; padding: 0;
}
.mm-lets-go {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin: 4px 0 12px;
}
.mm-lets-go-btn {
  min-width: min(280px, 92vw);
  font-size: 1.05rem; font-weight: 1000; letter-spacing: .06em;
}
.mm-lets-go-btn.notified {
  opacity: .85; border-color: rgba(81, 207, 102, .55);
  background: rgba(81, 207, 102, .16); color: var(--green);
}
.mm-lets-go-btn small {
  display: block; font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; opacity: .85; margin-top: 2px;
}
.mm-instr { text-align: center; padding: 24px 8px; }
.mm-go {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42vh;
  text-align: center;
  padding: 24px 12px;
}
.mm-go-label {
  margin: 0;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.mm-go-num {
  margin: 0;
  font-size: clamp(5.5rem, 28vw, 9rem);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--gold);
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
  transform: scale(1);
}
.mm-go.pop .mm-go-num {
  animation: mm-go-pop .42s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes mm-go-pop {
  0% { transform: scale(.55); opacity: .35; }
  55% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.host-stage .mm-go { min-height: 36vh; }
.mm-instr-demo {
  margin: 16px auto 8px;
  max-width: 420px;
  padding: 10px 12px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.mm-instr-demo-tag {
  margin: 0 0 12px;
  text-align: center;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 1000;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  opacity: 1;
}
.mm-instr-demo .btn,
.mm-instr-demo button,
.mm-instr-demo input {
  pointer-events: none;
  cursor: default;
}
/* Illustration chips — not the live Lock / Submit chrome. */
.mm-instr-demo .mm-instr-chip.btn,
.mm-instr-demo button.mm-instr-chip {
  box-shadow: none;
  font-weight: 700;
  border-style: dashed;
  background: rgba(255,255,255,.06);
}
.mm-instr-demo-sample {
  font-size: 1.05em;
}
.mm-instr-demo-hint {
  margin: 8px 0 0;
  font-size: .78rem;
  letter-spacing: .02em;
}
.mm-instr-demo .mm-instr-count-grid {
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.mm-instr-demo .mm-instr-mem {
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.mm-instr-demo .mm-mirror-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 180px;
  margin: 6px auto;
}
.mm-instr-demo .mm-mirror-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  width: auto;
  height: auto;
  padding: 0;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: default;
}
.mm-instr-demo .mm-mirror-cell.on {
  background: rgba(255, 212, 59, .35);
  border-color: rgba(255, 212, 59, .55);
}
.mm-instr-demo .mm-mirror-grid.play .mm-mirror-cell.on {
  background: rgba(116,192,252,.25);
  border-color: rgba(116,192,252,.7);
}
.mm-instr-demo .mm-mirror-cell.pick-correct {
  border-color: #51cf66 !important;
  background: rgba(81, 207, 102, .28) !important;
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .28);
}
.mm-instr-demo .mm-mirror-cell.pick-wrong {
  border-color: #ff6b6b !important;
  background: rgba(255, 107, 107, .28) !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, .28);
}
.mm-instr-scale {
  transform: scale(0.92);
  transform-origin: top center;
}
.host-stage .mm-instr-demo { max-width: 520px; }
.host-stage .mm-instr-scale { transform: scale(0.85); }
.mm-instr-demo-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, #ffe8a3 0 18%, transparent 19%),
    radial-gradient(circle at 65% 32%, #ffe8a3 0 18%, transparent 19%),
    radial-gradient(circle at 50% 58%, #3b2a1a 0 12%, transparent 13%),
    linear-gradient(160deg, #ff922b, #e8590c);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.12);
}
.mm-instr-tap.mm-instr-press,
.mm-instr-press {
  transform: scale(0.94);
  filter: brightness(1.25);
  box-shadow: 0 0 0 3px rgba(255, 212, 59, .55);
}
.mm-instr-cue {
  box-shadow: 0 0 0 3px rgba(255, 212, 59, .7) !important;
  filter: brightness(1.2);
}
.mm-instr-demo-caption {
  margin: 0 0 4px;
  font-size: .95rem;
}
.mm-lane-player.mm-instr-hit {
  animation: mmInstrShake .45s ease;
}
.mm-lane-haz.mm-instr-hit {
  background: #ff6b6b !important;
}
@keyframes mmInstrShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
.mm-cup.mm-instr-swap-a .mm-cup-body {
  transition: transform .38s ease;
  transform: translateX(42px);
}
.mm-cup.mm-instr-swap-b .mm-cup-body {
  transition: transform .38s ease;
  transform: translateX(-42px);
}
.mm-instr-phone {
  margin: 0 auto;
  max-width: 220px;
  padding: 14px 12px 18px;
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
}
.mm-instr-phone-bar {
  height: 6px; width: 36%; margin: 0 auto 14px;
  border-radius: 99px; background: rgba(255,255,255,.2);
}
.mm-instr-phone-btns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.mm-instr-phone-btns span {
  display: block; height: 28px; border-radius: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
}
.mm-instr-phone-btns span:last-child { grid-column: 1 / -1; }
.mm-instr-demo .mm-trace-board {
  position: relative; height: 180px; margin: 8px auto; max-width: 280px;
}
.mm-instr-demo .mm-trace-svg { width: 100%; height: 100%; display: block; }
.mm-instr-demo .mm-trace-label {
  position: absolute; font-size: .68rem; font-weight: 900;
  letter-spacing: .12em; color: var(--ink-dim);
}
.mm-instr-demo .mm-trace-label.start { left: 4%; bottom: 8%; }
.mm-instr-demo .mm-trace-label.finish { right: 2%; bottom: 8%; }
.mm-instr-demo .mm-swat-q {
  font-size: 1.05rem; font-weight: 800; margin: 8px 12px 14px;
}
.mm-instr-demo .mm-swat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mm-instr-demo .mm-vault-d.pick-correct,
.mm-instr-demo .mm-vault-d.ok {
  border-color: #51cf66 !important;
  background: rgba(81, 207, 102, .2) !important;
}
.mm-opt-grid,
.mm-sync-pad {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 8px 0 14px; padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.mm-flag-opt.picked, .mm-swat-btn.picked, .mm-maj-pick.picked,
.mm-odd-opt.picked, .mm-clash-opt.picked, .mm-math-opt.picked,
.mm-pads-opt.picked, .mm-split-opt.picked, .mm-count-opt.picked,
.mm-sync-pad .btn.picked, .mm-scramble-letters.picked {
  border-color: rgba(255,212,59,.55); background: rgba(255,212,59,.14);
}
/* Post-lock review: green = correct answer, red = your wrong pick. */
.mm-flag-opt.pick-correct, .mm-swat-btn.pick-correct, .mm-odd-opt.pick-correct,
.mm-clash-opt.pick-correct, .mm-math-opt.pick-correct, .mm-pads-opt.pick-correct,
.mm-split-opt.pick-correct, .mm-shift-cell.pick-correct,
.mm-order-opt.pick-correct, .mm-maj-pick.pick-correct,
.mm-count-opt.pick-correct, .mm-sync-pad .btn.pick-correct,
.mm-scramble-letters.pick-correct, .mm-mem-card.pick-correct {
  border-color: #51cf66 !important;
  background: rgba(81, 207, 102, .22) !important;
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .25);
  color: inherit;
}
.mm-flag-opt.pick-wrong, .mm-swat-btn.pick-wrong, .mm-odd-opt.pick-wrong,
.mm-clash-opt.pick-wrong, .mm-math-opt.pick-wrong, .mm-pads-opt.pick-wrong,
.mm-split-opt.pick-wrong, .mm-shift-cell.pick-wrong,
.mm-order-opt.pick-wrong, .mm-maj-pick.pick-wrong,
.mm-count-opt.pick-wrong, .mm-sync-pad .btn.pick-wrong {
  border-color: #ff6b6b !important;
  background: rgba(255, 107, 107, .22) !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, .25);
}
.mm-instr-demo .mm-scramble-letters {
  text-align: center;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .18em;
  padding: 12px 10px;
  margin: 8px 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  transition: background .2s ease, border-color .2s ease;
}
.mm-lock-wait { margin-top: 14px; }
.mm-lock-verdict {
  text-align: center; font-weight: 900; font-size: 1.35rem;
  padding: 12px 14px; border-radius: 14px; margin: 8px 0 14px;
  border: 1px solid var(--line);
}
.mm-lock-verdict.ok {
  border-color: #51cf66; background: rgba(81, 207, 102, .18); color: #b2f2bb;
}
.mm-lock-verdict.bad {
  border-color: #ff6b6b; background: rgba(255, 107, 107, .16); color: #ffc9c9;
}
.mm-lock-verdict .mm-lock-ans {
  display: block; margin-top: 4px; font-size: .9rem; font-weight: 700; opacity: .9;
}
.mm-lock-digit {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 54px; border-radius: 12px; border: 1px solid var(--line);
  font-weight: 900; font-size: 1.3rem;
}
.mm-lock-digit.ok {
  border-color: #51cf66; background: rgba(81, 207, 102, .2); color: #b2f2bb;
}
.mm-lock-digit.bad {
  border-color: #ff6b6b; background: rgba(255, 107, 107, .18); color: #ffc9c9;
}
.mm-lock-digit i {
  font-style: normal; font-size: .75rem; opacity: .85; font-weight: 700;
}
.mm-shift-review-round { margin-bottom: 14px; }
.mm-lock-review .btn[disabled],
.mm-lock-review button[disabled] {
  opacity: 1; cursor: default;
}
.mm-count-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 6px; max-width: 360px; margin: 10px auto 16px;
}
/* The glyph lives in a child element on purpose: container query units read
   the nearest ANCESTOR container, so a cq font-size on the container itself
   silently falls back to viewport size and blows the grid apart. */
.mm-count-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(255,255,255,.06);
  padding: 4px; box-sizing: border-box; overflow: hidden;
  container-type: size; line-height: 1; font-weight: 900;
}
.mm-count-cell.mark { background: rgba(255,212,59,.18); color: var(--gold); }
.mm-count-cell.mark.numbered {
  background: rgba(81, 207, 102, .16);
  color: #51cf66;
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .35);
}
.mm-count-cell.mark.numbered .mm-glyph {
  font-variant-numeric: tabular-nums;
  animation: mm-count-num-pop .28s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes mm-count-num-pop {
  0% { transform: scale(.55); opacity: .4; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.mm-cups {
  display: flex; gap: 4px; justify-content: center;
  margin: 8px 0 14px; align-items: flex-end;
  width: 100%; box-sizing: border-box;
  /* Raised/lifted cups use translateY(-46px); pad so they clear the copy above. */
  padding-top: 52px;
}
.mm-cup {
  flex: 1 1 0; min-width: 0; max-width: 78px;
  width: auto; height: auto; aspect-ratio: 78 / 96;
  padding: 0; margin: 0;
  border: 0; background: transparent; color: var(--ink);
  position: relative; cursor: pointer; overflow: visible;
  font: inherit;
}
.mm-cup-prize {
  position: absolute; bottom: 10px; left: 50%;
  width: 22px; height: 22px; margin-left: -11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #f0d060 0%, #c9a227 55%, #8a6a12 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.35),
    0 2px 5px rgba(0,0,0,.45);
  opacity: 0; z-index: 0;
  pointer-events: none;
  /* No fade on hide — the opaque cup already covered it. */
  transition: none;
}
.mm-cup.show-prize .mm-cup-prize { opacity: 1; }
.mm-cup-body {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  transition: transform .55s cubic-bezier(.2, .85, .3, 1), filter .3s ease;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.mm-cup-svg {
  width: 100%; height: 100%; display: block;
  /* Solid shells — never see through while covering the ball. */
  pointer-events: none;
}
.mm-cup.raised .mm-cup-body,
.mm-cup.lifted .mm-cup-body { transform: translateY(-46px); }
.mm-cup.correct-reveal .mm-cup-body,
.mm-cup.pick-correct .mm-cup-body {
  filter:
    drop-shadow(0 0 10px rgba(81, 207, 102, 1))
    drop-shadow(0 0 10px rgba(120, 255, 150, 1))
    drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.mm-cup.pick-wrong .mm-cup-body {
  filter:
    drop-shadow(0 0 10px rgba(255, 82, 82, 1))
    drop-shadow(0 0 20px rgba(255, 60, 60, .95))
    drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
/* Chosen cup: keep terracotta opaque, lift it with a soft white ring. */
.mm-cup.picked .mm-cup-body {
  filter:
    brightness(1.22)
    saturate(0.9)
    drop-shadow(0 0 0 2px rgba(255, 255, 255, .65))
    drop-shadow(0 0 10px rgba(255, 255, 255, .32))
    drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.mm-cup.picked .mm-cup-svg path[stroke] {
  stroke: rgba(255, 255, 255, .4);
}
.mm-cup.picked.pick-correct .mm-cup-body,
.mm-cup.picked.correct-reveal .mm-cup-body {
  filter:
    drop-shadow(0 0 10px rgba(81, 207, 102, 1))
    drop-shadow(0 0 10px rgba(120, 255, 150, 1))
    drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.mm-cup.picked.pick-wrong .mm-cup-body {
  filter:
    drop-shadow(0 0 10px rgba(255, 82, 82, 1))
    drop-shadow(0 0 20px rgba(255, 60, 60, .95))
    drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.mm-cup.chosen .mm-cup-body {
  filter:
    drop-shadow(0 0 12px rgba(255, 212, 59, .95))
    drop-shadow(0 0 22px rgba(255, 212, 59, .55))
    drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.mm-shell-msg {
  min-height: 1.45em;
  margin-bottom: 0;
}
.mm-shell-wait {
  min-height: 1.35em;
  margin: 0 0 4px;
}
.mm-cup.shuffle .mm-cup-body { transform: translateY(-4px); }
.mm-cup.swapping { z-index: 2; }
.mm-cup.swapping .mm-cup-body {
  filter:
    drop-shadow(0 0 8px rgba(255,212,59,.75))
    drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.mm-shell-reveal { margin: 6px auto 10px; max-width: 360px; }
.mm-trace { max-width: 560px; margin: 0 auto; }
.mm-trace .lede { margin-bottom: 10px; }
.mm-trace-board {
  position: relative; width: 100%; aspect-ratio: 1000 / 650;
  overflow: hidden; border-radius: 18px;
  border: 2px solid rgba(116,192,252,.34);
  background:
    radial-gradient(circle at 50% 50%, rgba(116,192,252,.1), transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.025) 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.025) 32px),
    rgba(5, 10, 25, .84);
  box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}
.mm-trace-board svg {
  display: block; width: 100%; height: 100%;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.mm-trace-rail, .mm-trace-wire, .mm-trace-trail {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.mm-trace-rail { stroke: rgba(0,0,0,.72); stroke-width: 62; }
.mm-trace-wire {
  stroke: #74c0fc; stroke-width: 31;
  filter: drop-shadow(0 0 10px rgba(116,192,252,.68));
}
.mm-trace-trail {
  stroke: #ffd43b; stroke-width: 19;
  filter: drop-shadow(0 0 9px rgba(255,212,59,.9));
}
.mm-trace-gate {
  fill: none;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 10;
  stroke-linecap: round;
  pointer-events: none;
}
.mm-trace-gate.cleared {
  stroke: #ffd43b;
  filter: drop-shadow(0 0 6px rgba(255,212,59,.85));
}
.mm-trace-start {
  fill: #51cf66; stroke: #d3f9d8; stroke-width: 9;
  filter: drop-shadow(0 0 12px rgba(81,207,102,.8));
}
.mm-trace-finish {
  fill: #ff6b6b; stroke: #ffe3e3; stroke-width: 9;
  filter: drop-shadow(0 0 12px rgba(255,107,107,.72));
}
.mm-trace-label {
  fill: #fff; font-size: 40px; font-weight: 1000;
  text-anchor: middle; paint-order: stroke;
  stroke: rgba(0,0,0,.75); stroke-width: 8px; stroke-linejoin: round;
  pointer-events: none;
}
.mm-trace-spark {
  fill: #ffd43b; stroke: #fff3bf; stroke-width: 8;
  filter: drop-shadow(0 0 14px rgba(255,212,59,1));
  pointer-events: none;
}
.mm-trace-spark.running { animation: mmTraceSpark .42s ease-in-out infinite alternate; }
.mm-trace-spark.finished { fill: #51cf66; stroke: #d3f9d8; }
@keyframes mmTraceSpark {
  from { r: 22px; opacity: .85; }
  to { r: 30px; opacity: 1; }
}
.mm-trace-status {
  min-height: 1.3em; margin: 9px 0 2px;
  color: var(--gold); font-weight: 900;
}
.mm-trace-status + p { margin: 0; }
.mm-memory {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0;
}
.mm-mem-card {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,.07); color: var(--ink);
  font-weight: 900; cursor: pointer; padding: 6px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  container-type: size; line-height: 1;
}
.mm-mem-card > span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 72cqmin;
  line-height: 1;
}
.mm-mem-card.open, .mm-mem-card.matched {
  background: rgba(255,212,59,.14); border-color: rgba(255,212,59,.4);
}
.mm-mem-card.matched { opacity: .7; }
.mm-pads { display: grid; gap: 14px; margin-top: 8px; }
.mm-pads-round {
  padding: 10px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
}
.mm-pads-cue {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 2px solid var(--pad);
}
.mm-pads-cue-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--pad); box-shadow: 0 0 12px var(--pad);
}
.mm-pads-cue-label { font-weight: 1000; letter-spacing: .08em; }
.mm-pads-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mm-pads-opt {
  min-height: 64px; border-radius: 16px !important;
  border: 2px solid var(--pad) !important;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(255,255,255,.28), transparent 55%),
    var(--pad) !important;
  color: #fff !important; font-weight: 1000;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.22);
}
.mm-pads-opt.picked {
  outline: 3px solid #fff;
  transform: translateY(1px);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), 0 0 0 2px var(--pad);
}
.mm-pads-cap { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.mm-sync-seq {
  display: grid; grid-template-columns: repeat(6, minmax(0, 52px));
  gap: 8px; justify-content: center; margin: 10px 0 14px;
}
.mm-sync-cue {
  width: 100%; aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.08); font-weight: 900;
  padding: 5px; box-sizing: border-box; overflow: hidden;
  container-type: size; line-height: 1;
  border: 2px solid rgba(255,255,255,.14);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.mm-sync-cue.showing {
  border-color: rgba(255,212,59,.48);
  background: rgba(255,212,59,.12);
}
.mm-sync-cue.correct {
  border-color: #51cf66;
  background: rgba(81,207,102,.22);
  box-shadow: 0 0 0 2px rgba(81,207,102,.2);
}
.mm-sync-cue.wrong {
  border-color: #ff6b6b;
  background: rgba(255,107,107,.22);
  box-shadow: 0 0 0 2px rgba(255,107,107,.2);
}
.mm-sync-countdown { min-height: 1.4em; margin: 4px 0; }
.mm-sync-pad.waiting { opacity: .42; }
/* ~30% shorter than square; glyph size stays width-based so shapes don't shrink. */
.mm-sync-btn {
  aspect-ratio: 10 / 7; min-height: 0; padding: 4px 8px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; container-type: size; line-height: 1;
  touch-action: manipulation;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.mm-sync-btn.tap-flash {
  border-color: var(--gold);
  background: rgba(255,212,59,.2);
  box-shadow: 0 0 0 3px rgba(255,212,59,.28);
}
/* Sized against the square it sits in, never the viewport. */
.mm-count-cell .mm-glyph,
.mm-sync-cue .mm-glyph,
.mm-sync-btn .mm-glyph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: 1;
}
.mm-count-cell .mm-glyph { font-size: 68cqmin; }
.mm-sync-cue .mm-glyph { font-size: 66cqmin; }
.mm-sync-btn .mm-glyph { font-size: 52cqw; }
@supports not (font-size: 1cqmin) {
  .mm-count-cell .mm-glyph { font-size: 1.1rem; }
  .mm-sync-cue .mm-glyph { font-size: 1.6rem; }
  .mm-sync-btn .mm-glyph { font-size: 1.8rem; }
  .mm-mem-card > span { font-size: 1.8rem; }
}
.mm-sync-wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 52px);
  box-sizing: border-box;
}
.mm-play-wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 52px);
  box-sizing: border-box;
}
.mm-sync-wrap .mm-sync { flex: 1 1 auto; }
.mm-play-wrap .mm-instr,
.mm-play-wrap .mm-shell,
.mm-play-wrap .mm-lock-review,
.mm-play-wrap .dev-idle {
  flex: 1 1 auto;
}
.mm-sync-status,
.mm-lock-tally-foot {
  margin-top: auto;
  padding: 10px 4px max(14px, env(safe-area-inset-bottom));
  text-align: center;
}
.mm-sync-lock-tally,
.mm-lock-tally {
  margin: 0;
  color: var(--ink-dim);
  font-size: .95rem;
}
.mm-sync-lock-tally b,
.mm-lock-tally b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mm-sync-host,
.mm-host-mini {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 24px);
}
.mm-host-mini .mm-lock-tally-foot {
  margin-top: auto;
  padding: 16px 8px 20px;
}
.mm-sync-host-foot {
  margin-top: auto;
  padding: 16px 8px 20px;
  text-align: center;
}
.mm-sync-host-foot .mm-note { margin: 8px 0 0; }
.mm-vault { width: 100%; }
.mm-vault-code { font-size: 1.4rem; letter-spacing: .12em; }
.mm-vault-slots {
  display: flex; gap: 6px; justify-content: center; align-items: stretch;
  margin: 14px 0; width: 100%; max-width: 100%;
  flex-wrap: nowrap; box-sizing: border-box;
}
/* Beat the global input:not([type]) width/padding rules — seven single digits. */
.mm-vault-slots input.mm-vault-d {
  flex: 1 1 0;
  width: auto; min-width: 0; max-width: 3.1rem;
  height: 54px;
  text-align: center; font-size: clamp(1.15rem, 5.2vw, 1.45rem); font-weight: 900;
  border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.25);
  color: var(--ink); padding: 0; margin: 0; box-sizing: border-box;
  -moz-appearance: textfield; appearance: textfield;
}
.mm-vault-slots input.mm-vault-d:focus {
  outline: none; border-color: var(--teal);
}
.mm-vault-slots input.mm-vault-d.ok {
  border-color: #51cf66 !important;
  background: rgba(81, 207, 102, .14);
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .35);
  color: var(--ink);
}
.mm-vault-slots input.mm-vault-d.bad {
  border-color: #ff6b6b !important;
  background: rgba(255, 107, 107, .14);
  box-shadow: 0 0 0 2px rgba(255, 107, 107, .35);
  color: var(--ink);
}
.mm-odd-round, .mm-math-round, .mm-flag-round,
.mm-maj-q, .mm-swat-item {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.mm-odd-round .mm-opt-grid,
.mm-math-round .mm-opt-grid,
.mm-flag-round .mm-opt-grid,
.mm-maj-q .mm-opt-grid {
  margin-bottom: 0;
}
.mm-maj-prompt {
  margin: 0 0 10px;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.15em;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
}
.mm-maj-q .mm-maj-pick {
  /* Default .btn padding is 16px; trim vertical by 20% to reduce scroll. */
  padding-top: 12.8px;
  padding-bottom: 12.8px;
}
.mm-swat-item p { margin: 0 0 10px; }

/* Color Clash: centered prompt above a full-bleed 4-button row. */
.mm-clash-lede { margin: 0 0 8px !important; font-size: .9rem; line-height: 1.3; }
.mm-clash {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Break out of .app side padding (16px) so the button row hits screen edges. */
  width: calc(100% + 32px);
  max-width: none;
  margin-left: -16px;
  margin-right: -16px;
  box-sizing: border-box;
  padding: 0 6px;
}
.mm-clash-round {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin: 0;
  padding: 6px 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  width: 100%;
}
.mm-clash-word {
  /* ~20% over compact-row baseline clamp(1rem, 4.2vw, 1.3rem) */
  font-size: clamp(1.2rem, 5.04vw, 1.56rem);
  font-weight: 1000;
  text-align: center;
  letter-spacing: .05em;
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  width: 100%;
  box-sizing: border-box;
  padding: 0 4px;
}
.mm-clash-opts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}
.mm-clash-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 11px 2px;
  margin: 0;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.07);
  color: var(--ink);
  font: inherit;
  /* +20% over prior clamp(.74rem, 3.12vw, .94rem) */
  font-size: clamp(.89rem, 3.74vw, 1.13rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  white-space: normal;
}
.mm-clash-opt[data-color="red"] { color: #ff8a8a; }
.mm-clash-opt[data-color="blue"] { color: #8ecfff; }
.mm-clash-opt[data-color="green"] { color: #6dde80; }
.mm-clash-opt[data-color="yellow"] { color: #ffe066; }
.mm-clash-lock {
  margin-top: 8px;
  min-height: 44px;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 380px) {
  .mm-clash-opt {
    min-height: 58px;
    padding: 12px 1px;
    font-size: clamp(.84rem, 4.08vw, 1.06rem);
  }
}
.mm-math-expr {
  font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 1000;
  text-align: center; margin: 4px 0 8px; letter-spacing: .04em;
}
.mm-scramble-built {
  min-height: 2.2rem; margin: 8px auto 14px; max-width: 320px;
  padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line);
  background: rgba(255,255,255,.04); text-align: center;
  font-size: 1.5rem; font-weight: 1000; letter-spacing: .18em;
}
.mm-scramble-letters {
  display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin-bottom: 12px;
}
/* .btn is display:block/width:100%, which made every tile claim its own row.
   These have to sit side by side and wrap. */
.mm-scramble-tile {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: auto;
  min-width: 56px; min-height: 56px; padding: 10px 22px;
  font-size: 1.44rem; font-weight: 1000; line-height: 1;
  touch-action: manipulation;
}
.mm-scramble-tile.used { opacity: .35; }
.mm-mem-card, .mm-cup { touch-action: manipulation; }

@media (max-width: 420px) {
  .mm-sync-seq {
    grid-template-columns: repeat(3, minmax(0, 58px));
  }
}
.mm-total-num {
  width: 96px; height: 96px; margin: 8px auto 14px;
  border-radius: 22px; border: 2px solid rgba(255,212,59,.55);
  background: rgba(255,212,59,.12); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem; font-weight: 1000;
}

/* —— newer minis —— */
.mm-needle-gauge {
  position: relative; height: 28px; margin: 18px auto; max-width: 320px;
  border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line);
}
.mm-needle-gauge i {
  position: absolute; top: 2px; bottom: 2px; border-radius: 999px;
  background: rgba(255,212,59,.45); border: 1px solid var(--gold);
  transition: left .12s ease, width .12s ease, background .15s ease, border-color .15s ease;
}
.mm-needle-gauge i.hit {
  background: rgba(109, 222, 128, .55); border-color: #6dde80;
}
.mm-needle-gauge i.miss {
  background: rgba(255, 120, 120, .45); border-color: #ff8a8a;
}
.mm-needle-gauge b {
  position: absolute; top: -6px; width: 4px; height: 40px; margin-left: -2px;
  background: var(--coral); border-radius: 2px; left: 0;
  will-change: left;
}
.mm-needle-gauge.stopped b {
  box-shadow: 0 0 0 3px rgba(255,212,59,.45);
}
#mmNeedleStop { touch-action: manipulation; }
.mm-needle-score, .mm-cash-score, .mm-cash-run, .mm-lane-score,
.mm-tower-score, .mm-pulse-score, .mm-beat-prog, .mm-shift-prog {
  text-align: center; font-weight: 800; color: var(--gold); margin: 8px 0;
}
.mm-cash-score { font-size: 2.6rem; font-weight: 1000; }
.mm-cash .btn { margin: 6px 0; }
#mmCashOut.mm-cash-out-go,
.mm-cash-out-go {
  background: linear-gradient(180deg, #6dde80 0%, #2f9e44 100%);
  color: #06240f;
  border: 1px solid #51cf66;
  box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 0 14px rgba(81, 207, 102, .35);
  font-weight: 900;
}
#mmCashOut.mm-cash-out-go:disabled {
  opacity: .55;
  box-shadow: none;
}
.mm-order-round {
  margin-bottom: 22px;
}
.mm-order-round:last-of-type {
  margin-bottom: 14px;
}
.mm-order-panel {
  padding: 14px 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.mm-order-prompt {
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.25em;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.3;
  margin: 0 0 8px;
}
.mm-order-built {
  margin: 0 0 12px;
}
.mm-mirror-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.mm-order-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}
.mm-order-opts .mm-order-opt {
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 10px;
  font-size: clamp(1.48rem, 6.4vw, 2.08rem);
  line-height: 1.1;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mm-order-opts .mm-order-opt.picked { outline: 3px solid var(--gold); }
.mm-shift { width: 100%; }
#mmShiftMsg {
  color: #fff;
  font-size: 1.2em;
}
.mm-shift-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2.2vw, 14px);
  width: 100%;
  margin: 12px 0;
  container-type: inline-size;
  container-name: mm-shift;
}
.mm-shift-cell {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
  border-radius: clamp(10px, 3cqi, 18px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  font-size: clamp(1.85rem, 24cqi, 3.75rem);
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
  padding: 0;
}
.mm-shift-cell.mm-shift-face {
  font-size: 0;
  padding: clamp(4px, 1.8cqi, 8px);
}
.mm-shift-cell .avatar.mm-shift-av {
  width: 100%;
  height: 100%;
  border-radius: clamp(8px, 2.5cqi, 14px);
}
.mm-shift-cell .avatar.mm-shift-av .zz-avatar-face {
  width: 100%;
  height: 100%;
}
.mm-mirror-grid {
  display: grid; grid-template-columns: repeat(3, 64px); gap: 8px;
  justify-content: center; margin: 12px auto;
}
.mm-mirror-cell {
  width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.06); font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
}
.mm-mirror-cell.on { background: rgba(116,192,252,.25); border-color: rgba(116,192,252,.7); }
.mm-mirror-grid.play .mm-mirror-cell { border-style: dashed; }
.mm-mirror-cell.pick-correct {
  border-color: #51cf66 !important;
  background: rgba(81, 207, 102, .28) !important;
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .28);
}
.mm-mirror-cell.pick-wrong {
  border-color: #ff6b6b !important;
  background: rgba(255, 107, 107, .28) !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, .28);
}
.mm-mirror-divider {
  width: min(220px, 72%);
  height: 2px;
  margin: 6px auto 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.18) 12%,
    rgba(255,212,59,.75) 50%,
    rgba(255,255,255,.18) 88%,
    transparent);
  box-shadow: 0 0 10px rgba(255,212,59,.25);
}
.mm-beat-msg {
  font-size: 1.2em;
  color: #fff;
  font-weight: 800;
}
.mm-beat-pads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: min(280px, 78vw);
  margin: 16px auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.mm-beat-pad {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 16px;
  border: 3px solid transparent;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: filter .08s ease, transform .08s ease, box-shadow .08s ease;
}
.mm-beat-pad[data-pad="0"] {
  background: rgba(255, 107, 107, .28);
  border-color: rgba(255, 107, 107, .7);
}
.mm-beat-pad[data-pad="1"] {
  background: rgba(116, 192, 252, .28);
  border-color: rgba(116, 192, 252, .7);
}
.mm-beat-pad[data-pad="2"] {
  background: rgba(81, 207, 102, .28);
  border-color: rgba(81, 207, 102, .7);
}
.mm-beat-pad[data-pad="3"] {
  background: rgba(255, 212, 59, .28);
  border-color: rgba(255, 212, 59, .7);
}
.mm-beat-pad:disabled {
  cursor: default;
  opacity: .9;
}
.mm-beat-pad.flash {
  filter: brightness(1.45);
  transform: scale(1.04);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}
.mm-beat-pad.pick-correct {
  background: rgba(81, 207, 102, .4) !important;
  border-color: #51cf66 !important;
  box-shadow: 0 0 0 2px rgba(81, 207, 102, .35);
}
.mm-beat-pad[data-pad="0"].flash { background: #ff6b6b; border-color: #fff; }
.mm-beat-pad[data-pad="1"].flash { background: #74c0fc; border-color: #fff; }
.mm-beat-pad[data-pad="2"].flash { background: #51cf66; border-color: #fff; }
.mm-beat-pad[data-pad="3"].flash { background: #ffd43b; border-color: #fff; }
.mm-lane-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  max-width: 360px;
  margin: 12px auto;
  box-sizing: border-box;
}
.mm-lane-side {
  flex: 0 0 52px;
  align-self: flex-end;
  width: 52px;
  min-height: 72px;
  margin: 0 0 14px;
  padding: 0;
  font-size: 1.35rem;
  font-weight: 900;
  touch-action: manipulation;
}
.mm-lane-board {
  position: relative; height: 280px; flex: 1 1 auto;
  width: 100%; max-width: 240px; margin: 0;
  border-radius: 16px; border: 2px solid rgba(116,192,252,.35);
  background: rgba(0,0,0,.25); overflow: hidden;
}
.mm-lane-col {
  position: absolute; top: 0; bottom: 0; width: 33.333%;
  border-right: 1px dashed rgba(255,255,255,.12);
}
.mm-lane-col[data-l="1"] { left: 33.333%; }
.mm-lane-col[data-l="2"] { left: 66.666%; border-right: 0; }
.mm-lane-player {
  position: absolute; bottom: 14px; width: 40px; height: 40px; margin-left: -20px;
  border-radius: 12px;
  background: transparent;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.35),
    0 0 14px rgba(81,207,102,.45);
  transition: left .12s ease;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.mm-lane-player .avatar,
.mm-lane-player .avatar.mm-lane-face {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  margin: 0;
}
.mm-lane-player .zz-avatar-face {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}
.mm-lane-haz {
  position: absolute; width: 26px; height: 26px; margin-left: -13px;
  border-radius: 6px; background: var(--coral); top: 0;
}
.mm-tower-stage {
  position: relative; height: 260px; max-width: 280px; margin: 12px auto;
  border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
  background: rgba(255,255,255,.04);
  cursor: pointer; touch-action: manipulation;
}
.mm-tower-world {
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  transform: scale(var(--mm-tower-scale, 1));
  will-change: transform;
}
.mm-tower-slider {
  position: absolute; top: 12px; width: 56px; height: 18px; margin-left: -28px;
  border-radius: 4px; background: var(--gold); left: 50%;
  pointer-events: none;
  box-sizing: border-box;
}
.mm-tower-stack {
  position: absolute; left: 0; right: 0; bottom: 8px; display: flex;
  flex-direction: column-reverse; align-items: center; gap: 3px;
  pointer-events: none;
}
.mm-tower-block {
  position: relative; width: 56px; height: 18px; border-radius: 4px;
  flex: 0 0 auto;
  box-sizing: border-box;
  background: linear-gradient(90deg, #74c0fc, #51cf66);
  /* transform is set per-block for horizontal rest position — do not animate width */
}
.mm-tower-falling {
  position: absolute;
  top: 12px;
  width: 56px; height: 18px; margin-left: -28px;
  z-index: 2; pointer-events: none; flex: none;
  box-sizing: border-box;
  border-radius: 4px;
  animation: mm-tower-fall .28s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes mm-tower-fall {
  from { transform: translateX(var(--fall-x, 0px)) translateY(0); }
  to { transform: translateX(var(--fall-x, 0px)) translateY(var(--fall-dy, 180px)); }
}
.mm-tower-stack.crash { animation: mm-stamp-swat .5s ease; }
.mm-pulse-dial {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 14px auto 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 28%, transparent 29%),
    rgba(0,0,0,.35);
  border: 3px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 10px rgba(0,0,0,.25), 0 8px 20px rgba(0,0,0,.28);
}
.mm-pulse-track {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.16);
  pointer-events: none;
}
.mm-pulse-pin,
.mm-pulse-arm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: 0;
  transform-origin: center center;
  will-change: transform;
}
.mm-pulse-pin::after {
  content: '';
  position: absolute;
  left: calc(var(--mm-pulse-pin-w, 14px) / -2);
  top: -72px;
  width: var(--mm-pulse-pin-w, 14px);
  height: 22px;
  border-radius: 4px 4px 3px 3px;
  background: var(--gold);
  border: 1px solid #ffe066;
  box-shadow: 0 0 10px rgba(255, 212, 59, .35);
}
.mm-pulse-pin.hit::after {
  background: #6dde80;
  border-color: #b2f2bb;
  box-shadow: 0 0 12px rgba(81, 207, 102, .45);
}
.mm-pulse-pin.miss::after {
  background: #ff6b6b;
  border-color: #ffa8a8;
  box-shadow: 0 0 12px rgba(255, 107, 107, .4);
}
.mm-pulse-arm::after {
  content: '';
  position: absolute;
  left: -6px;
  top: -70px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral);
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(255, 107, 107, .55);
}
.mm-pulse-dial.stopped .mm-pulse-arm::after {
  box-shadow: 0 0 0 3px rgba(255, 212, 59, .45), 0 0 12px rgba(255, 107, 107, .45);
}
.mm-pulse-dial.hit {
  border-color: rgba(81, 207, 102, .55);
}
.mm-pulse-dial.miss {
  border-color: rgba(255, 107, 107, .55);
}
.mm-pulse-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  font-size: 1.25rem;
  color: #fff;
  background: rgba(0,0,0,.45);
  border: 2px solid rgba(255,255,255,.2);
}
#mmPulseTap { touch-action: manipulation; }
.mm-pulse .btn.hit {
  background: var(--gold); color: #1a1226;
}
.mm-instr-demo .mm-pulse-dial {
  width: 140px;
  height: 140px;
}
.mm-instr-demo .mm-pulse-pin::after { top: -60px; }
.mm-instr-demo .mm-pulse-arm::after { top: -58px; }
.mm-split-clue {
  font-size: 2rem; font-weight: 1000; text-align: center; color: var(--gold); margin: 12px 0;
}
.mm-split-clues { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.mm-split-chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,212,59,.45);
  background: rgba(255,212,59,.12); font-weight: 800;
}
.mm-split-opt.picked { outline: 3px solid var(--gold); }

@media (max-width: 520px) {
  .mm-lobby-teams { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mm-cell-label { font-size: .78rem; }
}

/* ------------------------------------------------------------------ Treasure Trek */
body[data-game=aq] {
  --aq-a: #e85d5d;
  --aq-b: #5aa8ff;
  --aq-c: #f0c14a;
  --aq-d: #b07cff;
  --bg: #0e1a14;
  --bg-2: #1a2e24;
  --card-solid: #1c3228;
  background:
    radial-gradient(900px 620px at 10% -8%, #2a6a48 0%, transparent 58%),
    radial-gradient(760px 540px at 108% 10%, #1a4060 0%, transparent 55%),
    linear-gradient(158deg, #0e1a14 0%, #1a2e24 55%, #122038 100%);
  background-attachment: fixed;
}
body[data-game=aq] .bg-blobs span:nth-child(1) { background: #7dffa0; }
body[data-game=aq] .bg-blobs span:nth-child(2) { background: #f0c14a; }
body[data-game=aq] .bg-blobs span:nth-child(3) { background: #5aa8ff; }
.aq-stage .host-prompt { letter-spacing: -.02em; }
.aq-lobby-teams.aq-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aq-lobby-teams.aq-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .aq-lobby-teams.aq-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.aq-team-col.aq-team-a { border-color: rgba(232, 93, 93, .4); }
.aq-team-col.aq-team-b { border-color: rgba(90, 168, 255, .4); }
.aq-team-col.aq-team-c { border-color: rgba(240, 193, 74, .4); }
.aq-team-col.aq-team-d { border-color: rgba(176, 124, 255, .4); }
.aq-team-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800;
  letter-spacing: .02em;
}
.aq-team-badge-a { background: rgba(232, 93, 93, .2); color: #ffb4b4; }
.aq-team-badge-b { background: rgba(90, 168, 255, .2); color: #b7dbff; }
.aq-team-badge-c { background: rgba(240, 193, 74, .2); color: #ffe29a; }
.aq-team-badge-d { background: rgba(176, 124, 255, .2); color: #e0c8ff; }
.aq-seat-moves { display: inline-flex; gap: 4px; margin-left: auto; }
.aq-seat-btn { min-width: 28px; padding: 4px 6px; font-size: .75rem; font-weight: 800; }
.aq-map {
  display: flex; flex-direction: column; gap: 14px; margin-top: 12px;
}
.aq-layer {
  display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: start;
}
.aq-layer-label {
  font-size: .78rem; font-weight: 800; color: var(--ink-dim); padding-top: 18px;
}
.aq-layer-nodes {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.aq-node {
  min-width: 110px; max-width: 160px; flex: 1 1 110px;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  text-align: center;
}
.aq-node.occupied { border-color: rgba(255,212,59,.35); background: rgba(255,212,59,.08); }
.aq-node.mover { box-shadow: 0 0 0 2px rgba(255,212,59,.45); }
.aq-node-icon { font-size: 1.35rem; line-height: 1.2; }
.aq-node-label { font-size: .82rem; font-weight: 700; margin-top: 4px; }
.aq-node-teams { display: flex; justify-content: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.aq-pawn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: .7rem; font-weight: 900;
  color: #111;
}
.aq-pawn-a { background: var(--aq-a); }
.aq-pawn-b { background: var(--aq-b); }
.aq-pawn-c { background: var(--aq-c); }
.aq-pawn-d { background: var(--aq-d); }
.aq-pawn[data-mover="1"] { outline: 2px solid #fff; }
.aq-team-strip {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px;
}
.aq-team-chip {
  padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18); min-width: 140px;
}
.aq-team-chip b { display: block; font-size: .9rem; }
.aq-team-chip span { font-size: .78rem; color: var(--ink-dim); }
.aq-team-chip.spark { border-color: rgba(255,212,59,.55); }
.aq-team-chip.sitting { opacity: .72; }
.aq-team-chip.aq-team-a { border-left: 4px solid var(--aq-a); }
.aq-team-chip.aq-team-b { border-left: 4px solid var(--aq-b); }
.aq-team-chip.aq-team-c { border-left: 4px solid var(--aq-c); }
.aq-team-chip.aq-team-d { border-left: 4px solid var(--aq-d); }
.aq-board-actions { margin: 12px 0; }
.aq-quest-hud {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.18);
}
.aq-quest-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 800; }
.aq-quest-step { opacity: .55; font-size: .9rem; }
.aq-quest-step.done { opacity: 1; color: #ffe29a; }
.aq-quest-arrow { opacity: .4; font-size: .85rem; }
.aq-quest-round { font-size: .8rem; font-weight: 700; color: var(--ink-dim); }
.aq-node.aq-reachable { border-color: rgba(126, 200, 163, .55); background: rgba(126, 200, 163, .1); }
.aq-node.aq-locked { opacity: .55; border-style: dashed; }
.aq-node-lock { font-size: .68rem; color: var(--ink-dim); margin-top: 4px; line-height: 1.2; }
.aq-choose-list {
  display: grid; gap: 10px; margin-top: 14px;
}
.aq-choose-btn {
  display: flex; align-items: center; gap: 12px; text-align: left;
  width: 100%; padding: 14px 16px;
}
.aq-choose-btn.selected { outline: 2px solid var(--gold); }
.aq-choose-btn.aq-retreat { border-style: dashed; }
.aq-choose-icon { font-size: 1.5rem; }
.aq-choose-label { flex: 1; font-weight: 800; display: flex; flex-direction: column; gap: 2px; }
.aq-choose-hint { font-weight: 600; font-size: .78rem; opacity: .75; }
.aq-choose-meta { font-size: .78rem; opacity: .75; }
.aq-double-toggle {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 4px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,212,59,.35);
  background: rgba(255,212,59,.08); font-weight: 700; cursor: pointer;
}
.aq-double-toggle input { width: 18px; height: 18px; }
.aq-double-hint { margin-top: 8px; }
.aq-locked-list {
  margin-top: 14px; padding: 10px 12px; border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.12);
}
.aq-locked-title { font-size: .78rem; font-weight: 800; opacity: .7; margin-bottom: 8px; }
.aq-locked-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: .9rem; opacity: .85;
}
.aq-champs {
  padding: 14px; border-radius: 16px; border: 1px solid rgba(255,212,59,.35);
  background: rgba(255,212,59,.08); margin-bottom: 12px;
}
.aq-champs-title { font-size: 1.15rem; font-weight: 900; }
.aq-champs-sub { margin: 4px 0 10px; color: var(--ink-dim); font-size: .9rem; }
.aq-champs-roster { display: flex; flex-wrap: wrap; gap: 8px; }
.aq-champs-member {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.2);
}
.aq-node-vault { border-color: rgba(255,212,59,.45); }
.aq-node-finish { border-color: rgba(126, 200, 163, .5); }
.aq-node-key { border-color: rgba(240, 193, 74, .45); }
@media (max-width: 620px) {
  .aq-layer { grid-template-columns: 1fr; }
  .aq-layer-label { padding-top: 0; }
  .aq-lobby-teams.aq-cols-3,
  .aq-lobby-teams.aq-cols-4 { grid-template-columns: 1fr 1fr; }
}

/* ---- Border Battle ---- */
body[data-game="bb"] {
  --bg: #061428;
  --bg-2: #0c2438;
  --card-solid: #122838;
  --bb-sea: #0a1e34;
  --bb-sand: #c4a574;
  --bb-teal: #3db8a8;
  --bb-gold: #ffd459;
  background:
    radial-gradient(900px 620px at 10% -8%, #1a4a5c 0%, transparent 55%),
    radial-gradient(780px 560px at 105% 8%, #1e3050 0%, transparent 52%),
    linear-gradient(158deg, #061428 0%, #0c2438 55%, #102030 100%);
  background-attachment: fixed;
}
body[data-game="bb"] .bg-blobs span:nth-child(1) { background: #3db8a8; }
body[data-game="bb"] .bg-blobs span:nth-child(2) { background: #ffd459; }
body[data-game="bb"] .bg-blobs span:nth-child(3) { background: #4a7ab0; }

.bb-stage .host-prompt { letter-spacing: -.02em; }
.bb-map {
  margin: 8px auto 12px;
  max-width: min(96vw, 920px);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(61,184,168,.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(8,28,48,.9), rgba(6,20,40,.95));
  border: 1px solid rgba(200, 180, 140, .22);
  border-radius: 16px;
  padding: 8px;
  overflow: hidden;
}
.bb-map-svg { width: 100%; height: auto; display: block; }
.bb-map-svg.compact { max-height: 280px; }
.bb-region-label {
  fill: rgba(200, 180, 140, .55);
  font-size: 13px;
  font-weight: 800;
  text-anchor: middle;
  font-family: Nunito, sans-serif;
  letter-spacing: .04em;
  pointer-events: none;
}
.bb-edge {
  stroke: rgba(180, 200, 220, .18);
  stroke-width: 2;
  pointer-events: none;
}
.bb-prov { cursor: default; }
.bb-prov.pickable { cursor: pointer; }
.bb-prov.pickable circle {
  stroke: #ffd459;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 6px rgba(255, 212, 89, .55));
}
.bb-prov.mine circle { stroke: #fff; stroke-width: 2.5; }
.bb-prov.hi circle {
  stroke: #3db8a8;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 8px rgba(61, 184, 168, .6));
}
.bb-prov.flash circle {
  animation: bb-flash .7s ease;
}
@keyframes bb-flash {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.55) drop-shadow(0 0 10px #ffd459); }
}
.bb-prov-code {
  fill: #fff;
  font-size: 11px;
  font-weight: 900;
  text-anchor: middle;
  font-family: Nunito, sans-serif;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0,0,0,.45);
  stroke-width: 2.5;
}
.bb-prov-armies {
  fill: #ffd459;
  font-size: 12px;
  font-weight: 900;
  text-anchor: middle;
  font-family: Nunito, sans-serif;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0,0,0,.5);
  stroke-width: 2.5;
}
.bb-objective {
  text-align: center;
  margin: 4px 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 212, 89, .3);
  background: rgba(255, 212, 89, .08);
  font-weight: 700;
  font-size: .92rem;
}
.bb-obj-tag {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .08em;
  font-weight: 900;
  color: #ffd459;
  margin-right: 6px;
}
.bb-income {
  text-align: center;
  margin: 4px 0 8px;
  font-weight: 700;
}
.bb-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 6px;
}
.bb-act { font-weight: 900; letter-spacing: .02em; min-height: 48px; }
.bb-ticker {
  text-align: center;
  font-weight: 900;
  font-size: 1.05rem;
  color: #ffd459;
  min-height: 1.4em;
  margin: 8px 0 4px;
  letter-spacing: .02em;
}
.bb-army-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px 0;
}
.bb-army-n {
  font-size: 1.6rem;
  font-weight: 900;
  min-width: 2ch;
  text-align: center;
  color: #ffd459;
}
.bb-hand {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.bb-card-btn { font-weight: 800; }
.bb-card .lede { margin-top: 8px; }
@media (max-width: 520px) {
  .bb-actions { grid-template-columns: 1fr; }
  .bb-map-svg.compact { max-height: 220px; }
}

/* ---- Fortune Frenzy ---- */
body[data-game="ff"] {
  --bg: #120a14;
  --bg-2: #1c1020;
  --card-solid: #261828;
  --ff-ruby: #e85d5d;
  --ff-sapphire: #5aa8ff;
  --ff-emerald: #3db887;
  --ff-onyx: #8b8099;
  --ff-diamond: #e8f0ff;
  --ff-gold: #f0c14a;
  background:
    radial-gradient(900px 620px at 8% -8%, #5a2030 0%, transparent 55%),
    radial-gradient(780px 540px at 105% 10%, #2a4060 0%, transparent 52%),
    linear-gradient(158deg, #120a14 0%, #1c1020 55%, #141820 100%);
  background-attachment: fixed;
}
body[data-game="ff"] .bg-blobs span:nth-child(1) { background: #e85d5d; }
body[data-game="ff"] .bg-blobs span:nth-child(2) { background: #f0c14a; }
body[data-game="ff"] .bg-blobs span:nth-child(3) { background: #5aa8ff; }

.ff-stage .host-prompt { letter-spacing: -.02em; }
.ff-bank, .ff-my-gems {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 8px 0 12px;
}
.ff-gem {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12);
  font-weight: 800; font-size: .9rem;
}
.ff-gem i {
  width: 12px; height: 12px; border-radius: 3px;
  transform: rotate(45deg); display: inline-block;
}
.ff-gem-ruby i, .ff-disc.ff-gem-ruby, .ff-cost.ff-gem-ruby { background: var(--ff-ruby); color: #fff; }
.ff-gem-sapphire i, .ff-disc.ff-gem-sapphire, .ff-cost.ff-gem-sapphire { background: var(--ff-sapphire); color: #041018; }
.ff-gem-emerald i, .ff-disc.ff-gem-emerald, .ff-cost.ff-gem-emerald { background: var(--ff-emerald); color: #041018; }
.ff-gem-onyx i, .ff-disc.ff-gem-onyx, .ff-cost.ff-gem-onyx { background: var(--ff-onyx); color: #fff; }
.ff-gem-diamond i, .ff-disc.ff-gem-diamond, .ff-cost.ff-gem-diamond { background: var(--ff-diamond); color: #1a1020; }
.ff-gem-gold i { background: var(--ff-gold); }
.ff-gem-ruby i { background: var(--ff-ruby); }
.ff-gem-sapphire i { background: var(--ff-sapphire); }
.ff-gem-emerald i { background: var(--ff-emerald); }
.ff-gem-onyx i { background: var(--ff-onyx); }
.ff-gem-diamond i { background: var(--ff-diamond); }

.ff-market { margin: 8px auto 12px; max-width: min(96vw, 920px); }
.ff-market.compact .ff-card { min-width: 72px; padding: 6px; }
.ff-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ff-row-label {
  flex: 0 0 58px; font-size: .72rem; font-weight: 900; letter-spacing: .06em;
  opacity: .7; text-transform: uppercase;
}
.ff-row-cards { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.ff-card {
  position: relative;
  min-width: 88px; min-height: 96px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.32); color: inherit;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; text-align: left; cursor: default;
}
.ff-card.tier-2 { border-color: rgba(90,168,255,.4); }
.ff-card.tier-3 { border-color: rgba(240,193,74,.5); box-shadow: 0 0 0 1px rgba(240,193,74,.2); }
.ff-card.empty { opacity: .35; align-items: center; justify-content: center; }
.ff-card.pickable {
  cursor: pointer; outline: 2px solid var(--ff-gold);
  filter: drop-shadow(0 0 6px rgba(240,193,74,.45));
}
.ff-card-top { display: flex; justify-content: space-between; align-items: center; }
.ff-disc {
  width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg);
  display: inline-block;
}
.ff-prest { font-weight: 900; color: var(--ff-gold); font-size: .85rem; }
.ff-card-label { font-size: .72rem; font-weight: 800; opacity: .9; }
.ff-card-cost { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.ff-cost {
  font-size: .68rem; font-weight: 900; padding: 1px 5px; border-radius: 6px;
  background: rgba(255,255,255,.12);
}
.ff-copies {
  position: absolute; top: 4px; right: 6px;
  font-size: .68rem; font-weight: 900; opacity: .75;
}
.ff-board {
  max-width: 420px; margin: 8px auto; display: grid; gap: 4px;
}
.ff-board-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 10px; background: rgba(0,0,0,.2);
  font-weight: 700; font-size: .9rem;
}
.ff-place { width: 1.4em; opacity: .6; font-weight: 900; }
.ff-score { margin-left: auto; color: var(--ff-gold); font-weight: 900; }
.ff-objective {
  text-align: center; margin: 4px 0 10px; padding: 8px 12px;
  border-radius: 12px; border: 1px solid rgba(240,193,74,.3);
  background: rgba(240,193,74,.08); font-weight: 700; font-size: .92rem;
}
.ff-obj-tag {
  display: inline-block; font-size: .68rem; letter-spacing: .08em;
  font-weight: 900; color: var(--ff-gold); margin-right: 6px;
}
.ff-income { text-align: center; margin: 4px 0 8px; font-weight: 700; }
.ff-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px;
}
.ff-act { font-weight: 900; min-height: 48px; }
.ff-act.picked { outline: 2px solid var(--ff-gold); }
.ff-ticker {
  text-align: center; font-weight: 900; font-size: 1.05rem;
  color: var(--ff-gold); min-height: 1.4em; margin: 8px 0 4px;
}
.ff-pick-gems { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0; }
.ff-gem-pick {
  padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.28); font-weight: 800; color: inherit; cursor: pointer;
}
.ff-gem-pick.on { outline: 2px solid var(--ff-gold); }
.ff-gem-pick.empty { opacity: .35; }
.ff-reserve { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.ff-card-panel .lede { margin-top: 8px; }
@media (max-width: 520px) {
  .ff-actions { grid-template-columns: 1fr; }
  .ff-row { flex-direction: column; align-items: stretch; }
  .ff-row-label { flex: none; }
}

/* —— Color Clash —— */
body[data-game="cc"] {
  --cc-ruby: #dc3448;
  --cc-amber: #f0a828;
  --cc-jade: #28b478;
  --cc-cobalt: #3078dc;
  --cc-violet: #a050dc;
  --cc-ink: #12081f;
}
body[data-game="cc"] .bg-blobs span:nth-child(1) { background: #a050dc; }
body[data-game="cc"] .bg-blobs span:nth-child(2) { background: #3078dc; }
body[data-game="cc"] .bg-blobs span:nth-child(3) { background: #dc3448; }

.cc-crystal {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-width: 72px; min-height: 88px; padding: 10px 8px;
  border-radius: 18px; border: 2px solid rgba(255,255,255,.35);
  font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  transition: transform .12s ease, outline-color .12s ease, opacity .12s ease;
}
.cc-crystal:active { transform: scale(.96); }
.cc-crystal.legal { outline: 3px solid rgba(255,255,255,.85); }
.cc-crystal.locked-pick { outline: 3px solid #ffd166; transform: scale(1.04); }
.cc-crystal.dim { opacity: .38; pointer-events: none; }
.cc-crystal .cc-sym {
  font-size: 1.55rem; line-height: 1;
  width: 1.7em; height: 1.7em; display: grid; place-items: center;
  border-radius: 50%; background: rgba(0,0,0,.22);
}
.cc-crystal .cc-lab { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; opacity: .95; }
.cc-crystal .cc-pwr {
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 999px;
}
.cc-c-ruby { background: linear-gradient(160deg, #ff6a7a, var(--cc-ruby)); }
.cc-c-amber { background: linear-gradient(160deg, #ffd166, var(--cc-amber)); color: #2a1800; text-shadow: none; }
.cc-c-jade { background: linear-gradient(160deg, #6dffb0, var(--cc-jade)); }
.cc-c-cobalt { background: linear-gradient(160deg, #7ab0ff, var(--cc-cobalt)); }
.cc-c-violet { background: linear-gradient(160deg, #d090ff, var(--cc-violet)); }

.cc-center-wrap { display: flex; justify-content: center; margin: 10px 0 14px; }
.cc-center .cc-crystal { min-width: 110px; min-height: 130px; font-size: 1.05rem; cursor: default; }
.cc-hand {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0 12px;
}
.cc-tip {
  text-align: center; font-weight: 800; margin: 0 0 8px;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(255,209,102,.14); border: 1px solid rgba(255,209,102,.3);
}
.cc-rule-splash {
  text-align: center; max-width: 520px; margin: 24px auto;
  padding: 22px 18px; border-radius: 20px;
  background: rgba(122,92,255,.16); border: 1px solid rgba(255,255,255,.18);
}
.cc-rule-splash .cc-rule-icon { font-size: 2.6rem; margin-bottom: 6px; }
.cc-rule-splash h2 { margin: 0 0 8px; font-size: 1.7rem; }
.cc-predict-prompt { text-align: center; font-size: 1.25rem; font-weight: 800; margin: 12px 0; }
.cc-predict-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; margin: 0 auto; }
.cc-groups { display: grid; gap: 10px; max-width: 720px; margin: 12px auto; }
.cc-group {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
}
.cc-group.solo {
  border-color: rgba(255,209,102,.55); background: rgba(255,209,102,.12);
  animation: ccSoloPulse 1.1s ease-in-out 2;
}
.cc-group-label { font-weight: 900; min-width: 4.5rem; }
.cc-solo-banner {
  text-align: center; font-size: 1.8rem; font-weight: 900; color: #ffd166;
  letter-spacing: .06em; margin: 8px 0;
}
.cc-delta-list { display: grid; gap: 6px; max-width: 560px; margin: 12px auto 0; }
.cc-delta-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 12px; background: rgba(0,0,0,.2);
}
.cc-delta-row .pts { margin-left: auto; font-weight: 900; color: #ffd166; }
.cc-delta-row.solo { outline: 1px solid rgba(255,209,102,.45); }
.cc-jinx-pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0; }
.cc-jinx-pick button {
  min-height: 44px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.28);
  color: inherit; font-weight: 800; cursor: pointer;
}
.cc-jinx-pick button.on { outline: 2px solid #ffd166; }
.cc-waiting { text-align: center; padding: 16px 8px; opacity: .85; }
.cc-share-card {
  max-width: 360px; margin: 12px auto; padding: 14px; border-radius: 16px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); text-align: center;
}
@keyframes ccSoloPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-crystal, .cc-group.solo { transition: none; animation: none; }
}

/* —— Build or Bust —— */
body[data-game="bob"] {
  --bob-roll: #2f6bff;
  --bob-bank: #1f9d55;
  --bob-challenge: #7b4dff;
  --bob-twist: #d4a017;
  --bob-bust: #e23d3d;
}
body[data-game="bob"] .bg-blobs span:nth-child(1) { background: #2f6bff; }
body[data-game="bob"] .bg-blobs span:nth-child(2) { background: #d4a017; }
body[data-game="bob"] .bg-blobs span:nth-child(3) { background: #1f9d55; }

.bob-play {
  padding-bottom: 8px;
  background: linear-gradient(180deg, rgba(2,16,27,.96), rgba(1,11,20,.98));
  border-color: rgba(93,132,160,.35);
}
.bob-actions-top,
.bob-asks {
  display: flex; justify-content: center; align-items: stretch; gap: 10px;
  margin: 0 0 12px; width: 100%;
  min-height: clamp(56px, 15.2vw, 66px);
}
.bob-asks.solo .bob-ask {
  flex: 0 1 280px; max-width: 280px; width: 100%;
}
.bob-asks.dual .bob-ask { flex: 1; min-width: 0; }
.bob-ask {
  position: relative; height: clamp(56px, 15.2vw, 66px);
  min-height: clamp(56px, 15.2vw, 66px); max-height: clamp(56px, 15.2vw, 66px);
  border-radius: 14px; border: 3px solid rgba(255,255,255,.22); color: #fff;
  cursor: pointer; font: inherit; display: grid; place-items: center; overflow: hidden;
  background: rgba(255,255,255,.08); box-shadow: 0 6px 0 rgba(0,0,0,.22);
  padding: 6px 10px; box-sizing: border-box;
}
.bob-ask span {
  position: relative; z-index: 1;
  font-size: clamp(1.74rem, 6vw, 2.52rem); font-weight: 1000;
  letter-spacing: .04em; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.35);
  white-space: nowrap;
}
.bob-ask.roll {
  background: linear-gradient(160deg, #3dd6c6, #1f8f84) !important;
  border-color: #7ff0e4 !important; color: #fff !important;
}
.bob-ask.bank {
  background:
    linear-gradient(160deg, rgba(20, 28, 40, .55), rgba(20, 28, 40, .72)),
    radial-gradient(circle at 50% 40%, #ffd166 0%, #c4891a 42%, #5a3a12 78%) !important;
  border-color: #ffd166 !important; color: #fff8e1 !important;
}
.bob-ask.bank.build-until span {
  font-size: clamp(.62rem, 2.6vw, .82rem);
  letter-spacing: .03em;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  max-width: 100%;
  padding: 0 2px;
}
.bob-ask .btb-vault {
  position: absolute; inset: 0; z-index: 0; opacity: .55;
  background:
    radial-gradient(circle at 50% 46%, #ffe08a 0 16%, transparent 17%),
    radial-gradient(circle at 50% 46%, transparent 0 28%, rgba(0,0,0,.45) 29% 34%, transparent 35%),
    linear-gradient(145deg, #f6d56a, #b8860b 55%, #6b4210);
}
.bob-ask[disabled],
.bob-ask[disabled]:hover {
  opacity: .3; filter: grayscale(1) brightness(.75);
  box-shadow: none; cursor: default; transform: none;
}
.bob-play.bob-held .bob-asks {
  opacity: .55;
  pointer-events: none;
}
.bob-actions-slot { margin-bottom: 12px; }
.bob-status-slot {
  margin: 12px 0 0;
}
.bob-status-slot + .bob-status-slot {
  margin-top: 8px;
}
.bob-bust-banner {
  display: grid; gap: 2px; text-align: center;
  margin: 0; padding: 10px 14px;
  border-radius: 12px; border: 2px solid #ff4d4d;
  background: linear-gradient(135deg, rgba(120,12,18,.95), rgba(48,4,10,.96));
  color: #fff;
  min-height: clamp(56px, 15.2vw, 66px);
  align-content: center;
}
.bob-bust-banner.bob-actions-slot { margin-bottom: 12px; }
.bob-banked-banner.bob-actions-slot {
  min-height: clamp(56px, 15.2vw, 66px); align-content: center;
}
.bob-bust-banner strong {
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  letter-spacing: .06em; font-weight: 1000;
}
.bob-bust-banner span { font-weight: 800; color: #ffc9c9; }
.bob-bust-banner em { font-style: normal; font-size: .82rem; color: rgba(255,255,255,.7); }
.bob-banked-banner {
  display: grid; gap: 2px; text-align: center;
  margin: 0; padding: 10px 14px;
  border-radius: 12px; border: 2px solid #3dd68c;
  background: linear-gradient(135deg, rgba(8,72,40,.95), rgba(4,36,22,.96));
  color: #fff;
}
.bob-banked-banner strong {
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  letter-spacing: .06em; font-weight: 1000; color: #8dffb0;
}
.bob-banked-banner span { font-weight: 800; color: #c8f5d8; }
.bob-banked-banner em { font-style: normal; font-size: .82rem; color: rgba(255,255,255,.7); }
.bob-dice-watch {
  margin: 0 0 10px;
}
/* BTB pins the “Viewing” chip over the dice. Here it has to sit in normal
   flow above ROLL/SAVED or taps to change player miss the chip. */
.bob-play.bob-watching .bob-dice-watch.btb-dice-watch {
  max-width: none;
  margin: 0 0 10px;
}
.bob-play.bob-watching .btb-dice-watch-who {
  position: static;
  max-width: none;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 10px;
}
.bob-play.bob-watching .btb-dice-watch-person { max-width: none; }
.bob-play.bob-watching .btb-watch-picker {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
}
.bob-dice-stage { position: relative; }
.bob-spec-intro {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; gap: 8px;
  padding: 18px 16px; text-align: center;
  border-radius: 12px;
  background: rgba(4, 14, 28, .88);
  border: 2px solid rgba(56, 217, 169, .55);
  box-shadow: inset 0 0 28px rgba(56, 217, 169, .12);
  pointer-events: none;
  animation: bobSpecIntroIn .35s ease both;
}
.bob-spec-intro strong {
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  font-weight: 1000; letter-spacing: .04em;
  color: #8ff0d0;
}
.bob-spec-intro span {
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  font-weight: 800; color: #e7fff6;
}
@keyframes bobSpecIntroIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}
.bob-score-current.banked b { color: #8dffb0; }
.bob-score-current.busted b { color: #ff9a9a; }
.bob-play.bob-watching .bob-asks { opacity: .4; pointer-events: none; }
.bob-phone .btb-cheer-bar { margin-top: 10px; }
.bob-fill-banner {
  display: grid; gap: 2px; text-align: center;
  margin: 0; padding: 12px 14px;
  border-radius: 12px; border: 2px solid #3dd68c;
  background: linear-gradient(135deg, rgba(8,72,40,.95), rgba(4,36,22,.96));
  color: #fff;
}
.bob-fill-banner strong {
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  letter-spacing: .06em; font-weight: 1000; color: #8dffb0;
}
.bob-fill-banner span { font-weight: 800; color: #c8f5d8; font-size: .92rem; }
.bob-free-bust-banner {
  display: grid; gap: 2px; text-align: center;
  margin: 0; padding: 12px 14px;
  border-radius: 12px; border: 2px solid #ffc423;
  background: linear-gradient(135deg, rgba(90, 55, 8, .95), rgba(42, 24, 4, .96));
  color: #fff;
}
.bob-free-bust-banner strong {
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  letter-spacing: .06em; font-weight: 1000; color: #ffd166;
}
.bob-free-bust-banner span { font-weight: 800; color: #ffe6a8; font-size: .92rem; }
.bob-card.bob-twist.used .bob-card-sub { color: #ffb4b4; }
.bob-challenge-banner {
  display: grid; gap: 2px; text-align: center;
  margin: 0; padding: 12px 14px;
  border-radius: 12px; border: 2px solid #a644ed;
  background: linear-gradient(135deg, rgba(55,10,90,.95), rgba(22,4,42,.96));
  color: #fff;
}
.bob-challenge-banner strong {
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  letter-spacing: .06em; font-weight: 1000; color: #e0b3ff;
}
.bob-challenge-banner span { font-weight: 800; color: #f0d7ff; font-size: .92rem; }
.bob-challenge-banner span b { color: #ffd166; font-weight: 900; }
.bob-challenge-banner em {
  font-style: normal;
  font-size: .88rem;
  color: #ffd166;
  font-weight: 800;
  letter-spacing: .03em;
  margin-top: 2px;
}
.bob-play.bob-filled .bob-saved-area {
  border-color: #3dd68c;
  box-shadow: inset 0 0 22px rgba(61,214,140,.16);
}
.bob-play.bob-busted .bob-roll-area {
  border-color: #e23d3d;
  box-shadow: inset 0 0 22px rgba(226,61,61,.14);
}
.bob-score-board b {
  display: block; color: #62df39;
  font-size: 1.725rem; /* 1.5rem × 1.15 */
  font-weight: 900;
  line-height: 1.1; margin-top: 2px;
}
.bob-area {
  border: 2px solid rgba(255,255,255,.22); border-radius: 12px;
  padding: 10px 12px 9px; margin: 12px 0;
  background: rgba(0,12,23,.72);
}
.bob-roll-area {
  border-color: #008ee6;
  box-shadow: inset 0 0 18px rgba(0,142,230,.08);
}
.bob-saved-area {
  border-color: #18a819;
  box-shadow: inset 0 0 18px rgba(24,168,25,.08);
}
.bob-area-label {
  font-size: .78rem; font-weight: 900; letter-spacing: .05em;
  text-align: center; margin-bottom: 8px;
}
.bob-roll-area .bob-area-label { color: #1caeff; }
.bob-saved-area .bob-area-label { color: #35d22f; }
.bob-score-board {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid rgba(31,190,43,.42);
  text-align: center;
}
.bob-score-board.bob-score-watching {
  grid-template-columns: auto 1fr 1fr;
  align-items: stretch;
}
.bob-score-board > span + span { border-left: 1px solid rgba(31,190,43,.42); }
.bob-score-viewing {
  display: grid;
  gap: 3px;
  place-content: center;
  justify-items: center;
  padding: 0 10px 0 2px;
  line-height: 1;
  white-space: nowrap;
  max-width: 7.5rem;
  border-left: 0 !important;
}
.bob-score-viewing strong {
  font-size: .74rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.bob-score-viewing em {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
  font-size: .72rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: .02em;
}
.bob-score-board small {
  display: block; color: #45cf36; font-size: .67rem;
  font-weight: 900; letter-spacing: .035em;
}
/* Six BTB-style cubes fill the tray — a touch smaller than Break the Bank. */
.bob-dice-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(5px, 1.6vw, 10px); width: 100%; max-width: 100%;
  align-items: center; justify-items: center;
  min-height: clamp(64px, 18vw, 84px);
  padding: 3px 0 5px;
}
.bob-die {
  /* Square face: width drives size; aspect-ratio keeps height matched. */
  --die: clamp(52px, 14.8vw, 74px);
  width: min(100%, var(--die));
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  /* Match BTB face margins so pip diameter looks the same relative to the cube. */
  gap: 5%; padding: 8%;
  border-radius: clamp(10px, 2.4vw, 14px);
  background: linear-gradient(155deg, #ffffff 0%, #f4f6fa 55%, #dfe5ef 100%);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow:
    inset 0 -8px 14px rgba(23,35,49,.12),
    inset 0 2px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(0,0,0,.3);
  transform: none;
  position: relative;
  min-width: 0; color: #111;
}
.bob-die > .pip,
.bob-die > .pip-off {
  display: block; width: 78%; height: 78%; min-width: 0; min-height: 0;
  border-radius: 50%; place-self: center;
  /* Crisp edges — avoid soft shadows/gradients that read as fuzzy. */
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.bob-die > .pip-off { background: transparent; }
.bob-die > .pip {
  background: #121820;
  box-shadow: none;
}
.bob-die.saved {
  border-color: #3dd68c;
  box-shadow:
    inset 0 -8px 14px rgba(23,35,49,.12),
    inset 0 2px 0 rgba(255,255,255,.9),
    0 0 0 2px rgba(61,214,140,.85),
    0 10px 20px rgba(0,0,0,.28);
}
.bob-die.saved > .pip {
  background: #121820;
}
/* Bust wipe: every pip goes red — except Build Until Bust (points kept). */
.bob-play.bob-busted:not(.bob-bust-kept) .bob-die:not(.bob-die-blank) > .pip {
  background: #c62828;
}
.bob-die.hi {
  outline: 2px solid #ffd166;
  box-shadow:
    inset 0 -8px 14px rgba(23,35,49,.12),
    inset 0 2px 0 rgba(255,255,255,.9),
    0 0 0 2px rgba(255,209,102,.9),
    0 0 14px rgba(255,209,102,.45),
    0 10px 20px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
.bob-die.bob-die-blank {
  background: transparent;
  border: 2px dashed rgba(255,255,255,.22);
  box-shadow: none;
  transform: none;
  gap: 0; padding: 0;
}
.bob-roll-area .bob-die.bob-die-blank { border-color: rgba(0,142,230,.45); }
.bob-saved-area .bob-die.bob-die-blank { border-color: rgba(24,168,25,.45); }
.bob-die.tap { cursor: pointer; }
.bob-die.saved.tap { cursor: pointer; }
.bob-die.saved.tap:hover {
  outline: 2px solid rgba(255,255,255,.45);
}
body.bob-acting .bob-die.tap,
body.bob-rolling .bob-die.tap {
  pointer-events: none;
}
.bob-dice-row.rolling .bob-die:not(.bob-die-blank) {
  animation: bobRoll .42s cubic-bezier(.2, 1.35, .35, 1) both;
}
.bob-dice-row.rolling .bob-die:nth-child(1) { animation-delay: 0s; }
.bob-dice-row.rolling .bob-die:nth-child(2) { animation-delay: .1s; }
.bob-dice-row.rolling .bob-die:nth-child(3) { animation-delay: .2s; }
.bob-dice-row.rolling .bob-die:nth-child(4) { animation-delay: .3s; }
.bob-dice-row.rolling .bob-die:nth-child(5) { animation-delay: .4s; }
.bob-dice-row.rolling .bob-die:nth-child(6) { animation-delay: .5s; }
.bob-die.bob-die-landed {
  animation: bobDieLand .28s cubic-bezier(.2, 1.4, .35, 1) both;
}
.bob-dice-row.settled .bob-die:not(.bob-die-blank) { animation: none; transform: none; }
@keyframes bobRoll {
  0% { transform: translateY(-6px) scale(.86); }
  55% { transform: translateY(2px) scale(1.04); }
  100% { transform: none; }
}
@keyframes bobDieLand {
  0% { transform: scale(1.08); }
  100% { transform: none; }
}
.bob-keep-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 12px 0; padding: 12px;
  border: 2px solid #7b19d7; border-radius: 12px;
  background: linear-gradient(135deg, rgba(45,7,77,.88), rgba(28,4,55,.94));
}
.bob-keep-label { font-weight: 800; min-width: 0; color: #fff; line-height: 1.35; }
.bob-keep-label .bob-keep-hint-pts { color: #ffd166; font-weight: 900; }
.bob-keep-note {
  flex: 0 0 auto; margin-left: auto; text-align: right;
  font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.72);
}
.bob-keep {
  font-weight: 900; white-space: nowrap; color: #fff !important;
  background: linear-gradient(180deg, #7920c7, #4f0b91) !important;
  border-color: #a644ed !important;
}
.bob-side-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 12px 0;
}
.bob-card {
  border-radius: 12px; padding: 8px; border: 2px solid rgba(255,255,255,.16);
  background: rgba(0,9,18,.9); min-height: 101px; height: auto;
  text-align: center; min-width: 0;
}
.bob-challenge {
  border-color: #8b20dc;
  background: linear-gradient(145deg, rgba(35,7,66,.92), rgba(4,14,28,.95));
}
.bob-twist {
  border-color: #d39800;
  background: linear-gradient(145deg, rgba(67,40,0,.9), rgba(24,17,3,.95));
}
.bob-card-tag {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: .68rem; letter-spacing: .025em; font-weight: 900;
  white-space: nowrap;
}
.bob-card-icon { font-size: 1rem; line-height: 1; }
.bob-card-rule {
  height: 1px; margin: 7px 0 8px;
  background: currentColor; opacity: .46;
}
.bob-challenge .bob-card-tag, .bob-challenge .bob-card-rule { color: #d7b3ff; }
.bob-twist .bob-card-tag, .bob-twist .bob-card-rule { color: #ffe16a; }
.bob-card-kicker, .bob-card-sub { font-size: .72rem; opacity: .88; }
.bob-card-label {
  font-weight: 900; line-height: 1.15; text-transform: none;
  overflow-wrap: anywhere; margin-top: 3px;
}
.bob-challenge .bob-card-label { text-transform: uppercase; }
.bob-card-points {
  color: #20adff; font-size: 1.25rem; line-height: 1.1;
  font-weight: 900; margin-top: 3px;
}
.bob-twist .bob-card-label b, .bob-twist .bob-card-label strong { color: #ffd326; }
.bob-card-blurb { font-size: .85rem; opacity: .85; margin-top: 4px; }
.bob-card-won { margin-top: 6px; color: #ffd166; font-weight: 800; font-size: .85rem; }
.bob-tally-foot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px; padding: 10px 0; text-align: center;
  border: 2px solid #263a49; border-radius: 12px;
  background: rgba(0,11,21,.9);
}
.bob-stat { min-width: 0; padding: 0 4px; }
.bob-stat + .bob-stat { border-left: 1px solid #304454; }
.bob-stat b { display: block; font-size: 1.65rem; line-height: 1.1; font-weight: 900; }
.bob-stat small {
  display: block; font-weight: 900; letter-spacing: .025em;
  text-transform: uppercase; font-size: .67rem; white-space: nowrap;
}
.bob-stat small i { font-style: normal; }
.bob-stat:nth-child(1) small, .bob-stat:nth-child(1) b { color: #38d638; }
.bob-stat:nth-child(2) small, .bob-stat:nth-child(2) b { color: #ffc423; }
.bob-stat:nth-child(3) small, .bob-stat:nth-child(3) b { color: #ff3434; }
.bob-banner {
  text-align: center; font-weight: 900; padding: 10px; margin: 8px 0;
  border-radius: 12px; background: rgba(123,77,255,.28); color: #ffd166;
}
.bob-steal-banner {
  display: grid;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto 14px;
}
.bob-steal-notice {
  text-align: center;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.35;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 52, 52, .14);
  border: 1px solid rgba(255, 52, 52, .35);
  color: var(--ink, #e8eef5);
}
.bob-steal-notice b { color: #ff8a8a; font-variant-numeric: tabular-nums; }
.bob-results-screen .bob-steal-banner { margin-top: 4px; }
.bob-card-panel > .bob-steal-banner { margin: 4px 0 12px; }
.bob-host-cards { display: grid; gap: 12px; max-width: 640px; margin: 16px auto; }
.bob-card-panel { overflow: hidden; }
.bob-card-panel:has(.bob-results) { overflow: visible; }
.bob-card-panel > .bob-card { margin: 10px 0; }

/* Pre-round + results: keep Pause / Continue clear of content below. */
.bob-stage.bob-pre-round .host-head,
.bob-stage.bob-results-screen .host-head {
  margin-bottom: 72px;
  padding-bottom: 20px;
}
.bob-stage.bob-pre-round .bob-host-cards {
  margin-top: 12px;
}
.bob-pre-round > .solo-host-skip,
.bob-pre-round > .want-skip-btn,
.bob-results-screen > .solo-host-skip,
.bob-results-screen > .want-skip-btn {
  margin-bottom: 20px;
}
.bob-pre-round > .card.bob-card-panel,
.bob-results-screen > .card.bob-card-panel {
  margin-top: 6px;
}

/* Intro: how-to steps + scoring reference side by side on wide screens. */
.bob-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}
.bob-intro-layout .options {
  grid-template-columns: 1fr;
  margin: 0;
}
.bob-score-guide {
  background: rgba(8, 14, 28, .72);
  border: 1px solid rgba(255, 209, 102, .28);
  border-radius: 16px;
  padding: 12px 14px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.bob-score-guide-title {
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffd166;
  margin: 0 0 8px;
  text-align: center;
}
.bob-score-guide-grid {
  display: grid;
  gap: 0;
}
.bob-score-guide-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: .88rem;
  line-height: 1.25;
}
.bob-score-guide-row:last-child { border-bottom: 0; }
.bob-score-guide-label {
  font-weight: 700;
  color: rgba(244, 241, 255, .88);
}
.bob-score-guide-pts {
  font-weight: 900;
  color: #ffd166;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.bob-score-guide.compact {
  margin-top: 14px;
  padding: 10px 12px 8px;
  border-radius: 14px;
}
.bob-score-guide.compact .bob-score-guide-title { font-size: .8rem; margin-bottom: 6px; }
.bob-score-guide.compact .bob-score-guide-row {
  padding: 4px 2px;
  font-size: .8rem;
}
@media (max-width: 820px) {
  .bob-intro-layout {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}
/* Keep Pause / Continue clear of the results board underneath. */
.bob-stage .host-head {
  margin-bottom: 56px;
  padding-bottom: 16px;
  gap: 28px;
}
.bob-results-title {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 900;
  margin: 4px 0 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bob-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 14px;
  padding: 3px;
  border-radius: 14px;
  background: rgba(4, 8, 18, .72);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.bob-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 8px;
  border-radius: 11px;
  font-weight: 900;
  font-size: .92rem; /* ~18% larger than .78rem; keep 48px tab height */
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(210, 218, 232, .58);
  line-height: 1;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bob-tab-ico {
  /* Match design mockup: icon ~same height as (or slightly taller than) label caps. */
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  opacity: .75;
}
.bob-tab.on {
  background: linear-gradient(180deg, #3d74ff 0%, #1f4fd6 55%, #183db8 100%);
  border-color: #6aa6ff;
  box-shadow:
    0 0 0 1px rgba(106, 166, 255, .55),
    0 0 16px rgba(47, 107, 255, .42),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff;
}
.bob-tab.on .bob-tab-ico { opacity: 1; }
.bob-results { display: grid; gap: 0; margin-top: 4px; }
.bob-results-head, .bob-results-row {
  display: grid; grid-template-columns: 44px 1fr 72px 72px 52px;
  gap: 6px; align-items: center; padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bob-results.totals .bob-results-head,
.bob-results.totals .bob-results-row {
  grid-template-columns: 44px 1fr 64px 88px;
}
.bob-results-head { font-size: .72rem; font-weight: 900; letter-spacing: .06em; opacity: .7; text-transform: uppercase; }
.bob-results-head .bob-col-this-round {
  white-space: normal;
  line-height: 1.15;
  max-width: 4.2em;
  margin: 0 auto;
  letter-spacing: .04em;
}
/* Keep numeric column titles centered over the values under them. */
.bob-results-head > span:nth-child(n+3),
.bob-bonus,
.bob-round-pts,
.bob-total,
.bob-fills {
  text-align: center;
}
.bob-results-row.medal-1 .bob-rank { color: #ffd166; }
.bob-results-row.medal-2 .bob-rank { color: #c0c7d1; }
.bob-results-row.medal-3 .bob-rank { color: #cd7f32; }
.bob-results-row.me {
  border: 2px solid rgba(81, 207, 102, .8);
  border-radius: 10px;
  background: rgba(81, 207, 102, .16);
  box-shadow: 0 0 0 1px rgba(81, 207, 102, .28);
  padding-left: 6px;
  padding-right: 6px;
  margin: 3px 0;
}
.bob-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bob-who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.bob-bonus { color: #8dffb0; font-weight: 800; }
.bob-round-pts { color: #7ec8ff; font-weight: 900; }
.bob-total { color: #ffd166; font-weight: 900; }
.bob-fills { color: #ffd166; font-weight: 800; }
.bob-rank { font-weight: 900; text-align: center; }
@media (max-width: 420px) {
  .bob-results-head, .bob-results-row {
    grid-template-columns: 32px 1fr 58px 58px 34px; font-size: .85rem;
  }
  .bob-results.totals .bob-results-head,
  .bob-results.totals .bob-results-row { grid-template-columns: 32px 1fr 52px 72px; }
  .bob-dice-row { gap: 4px; }
  .bob-area { padding: 7px 6px 5px; }
  .bob-card { padding: 6px 5px; min-height: 94px; height: auto; }
  .bob-card-tag { font-size: clamp(.52rem, 2.7vw, .68rem); }
  .bob-card-label { font-size: clamp(.78rem, 3.7vw, 1rem); }
  .bob-card-blurb, .bob-card-won { font-size: .7rem; }
  .bob-keep { padding-left: 9px; padding-right: 9px; font-size: .76rem; }
  .bob-keep-label { font-size: .78rem; }
  .bob-ask span { font-size: clamp(1.62rem, 7.8vw, 2.1rem); }
  .bob-ask.bank.build-until span {
    font-size: clamp(.58rem, 2.8vw, .78rem);
  }
  .bob-stat small { font-size: clamp(.52rem, 2.5vw, .67rem); }
}
@media (prefers-reduced-motion: reduce) {
  .bob-die.hi { transform: none; }
  .bob-dice-row.rolling .bob-die:not(.bob-die-blank),
  .bob-die.bob-die-landed { animation: none; }
}

/* —— Edge of Energy —— */
body[data-game="eoe"] {
  --bg: #07101c;
  --bg-2: #0c1830;
  --card-solid: #122238;
  --eoe-ice: #4da3ff;
  --eoe-gold: #ffe066;
  --eoe-panel: rgba(8, 16, 32, .82);
  --eoe-line: rgba(77, 163, 255, .28);
  background:
    radial-gradient(900px 620px at 18% -8%, #1a3a6c 0%, transparent 58%),
    radial-gradient(760px 540px at 108% 18%, #3a1860 0%, transparent 55%),
    linear-gradient(158deg, #07101c 0%, #0c1830 55%, #0a1020 100%);
  background-attachment: fixed;
}
body[data-game="eoe"] .bg-blobs span:nth-child(1) { background: #4da3ff; }
body[data-game="eoe"] .bg-blobs span:nth-child(2) { background: #ff6b6b; }
body[data-game="eoe"] .bg-blobs span:nth-child(3) { background: #ffe066; }

.wrap.eoe-play {
  display: flex;
  flex-direction: column;
  max-width: none;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}
.wrap.eoe-play > .dev-head { order: 0; }
.wrap.eoe-play > .timer-wrap,
.wrap.eoe-play > .timer-inline { order: 1; }
.wrap.eoe-play > .want-skip-btn,
.wrap.eoe-play > .solo-host-skip { order: 2; }
.wrap.eoe-play > .eoe-stage { order: 3; }
.wrap.eoe-play > .shared { order: 4; }
@media (min-width: 1000px) {
  .wrap.eoe-play {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
.eoe-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0;
}
.wrap-wide.eoe-host,
.host-stage.eoe-host {
  max-width: none;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}
.eoe-host .eoe-stage { max-width: none; width: 100%; }
.eoe-lock {
  text-align: center; font-weight: 800; color: var(--ink-dim); font-size: .9rem;
  margin: 2px 0 0;
}
.eoe-lock b { color: #fff; }
.eoe-down-banner {
  text-align: center; font-weight: 900; letter-spacing: .04em;
  color: #ffb4bc; background: rgba(180, 30, 50, .22);
  border: 1px solid rgba(255, 90, 106, .4); border-radius: 12px; padding: 6px 10px;
}

.eoe-roster {
  background: rgba(4, 12, 28, .88);
  border: 1.5px solid rgba(77, 163, 255, .45);
  box-shadow: 0 0 14px rgba(77, 163, 255, .22);
  border-radius: 14px;
  overflow: hidden;
  padding: 6px 0 2px;
}
.eoe-roster.is-picking {
  box-shadow: 0 0 0 1px rgba(255, 224, 102, .45), 0 0 16px rgba(255, 224, 102, .2);
  padding-bottom: 6px;
}
.eoe-roster-head,
.eoe-roster-row {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1.7fr) 4.4rem 3.6rem 4.4rem;
  column-gap: 3px;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
.eoe-roster-head {
  min-height: 0; margin: 0 0 2px; line-height: 1.1;
  font-size: .68rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: #8ec5ff;
}
.eoe-roster-head span:nth-child(2) { text-align: left; }
.eoe-roster-head span:nth-child(3),
.eoe-roster-head span:nth-child(4),
.eoe-roster-head span:nth-child(5) { text-align: center; }
.eoe-roster-row {
  width: 100%; margin: 0; min-height: 56px; padding: 8px 10px;
  border: 0; border-top: 1px solid rgba(77, 163, 255, .2);
  border-radius: 0; background: transparent; color: inherit;
  text-align: left; font: inherit;
}
button.eoe-roster-row {
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
.eoe-roster-row.is-you {
  background: rgba(81, 207, 102, .16);
  box-shadow: inset 0 0 0 2px #51cf66;
  border-top-color: transparent;
}
.eoe-roster-row.is-leader { background: rgba(255, 210, 74, .08); }
.eoe-roster-row.is-you.is-leader {
  background: rgba(81, 207, 102, .18);
  box-shadow: inset 0 0 0 2px #51cf66;
}
.eoe-roster-row.is-down { opacity: .55; }
.eoe-roster-row.is-pick:active,
.eoe-roster.is-picking .eoe-roster-row.is-pick { background: rgba(255, 224, 102, .12); }
.eoe-roster.is-picking .eoe-roster-row {
  margin: 3px 6px;
  border-radius: 10px;
  border-top-color: transparent;
  box-shadow: inset 0 0 0 2px #ffe066;
}
.eoe-roster.is-picking .eoe-roster-row.is-you {
  opacity: .42;
  filter: grayscale(.65);
  background: rgba(70, 78, 90, .35);
  box-shadow: inset 0 0 0 2px #ffe066;
  pointer-events: none;
}
.eoe-roster.is-picking .eoe-roster-row.is-you.is-leader {
  background: rgba(70, 78, 90, .35);
}
.eoe-player-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eoe-rank-badge {
  justify-self: center;
  font-size: .78rem; font-weight: 900; color: #fff;
  line-height: 1;
}
.eoe-roster-row.tone-purple { --eoe-rank: #c084fc; }
.eoe-roster-row.tone-red { --eoe-rank: #fb7185; }
.eoe-roster-row.tone-blue { --eoe-rank: #60a5fa; }
.eoe-roster-row.tone-green { --eoe-rank: #4ade80; }
.eoe-roster-row.tone-gold { --eoe-rank: #fbbf24; }
.eoe-roster-row.tone-orange { --eoe-rank: #fb923c; }
.eoe-roster-row.tone-cyan { --eoe-rank: #22d3ee; }
.eoe-roster-row.tone-pink { --eoe-rank: #f472b6; }
.eoe-roster .avatar.eoe-av {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  overflow: hidden;
}
.eoe-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.eoe-name {
  font-weight: 800; font-size: 1rem; color: #fff; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eoe-roster-row.has-sub {
  grid-template-rows: auto auto;
  row-gap: 3px;
  align-items: center;
  min-height: 64px;
}
.eoe-roster-row.has-sub .eoe-rank-badge { grid-row: 1; }
.eoe-row-sub {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  min-width: 0; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .78rem; font-weight: 800; line-height: 1.2;
}
.eoe-row-act { font-size: inherit; font-weight: 800; letter-spacing: .03em; }
.eoe-row-act.tone-attack { color: #ffb4bc; }
.eoe-row-act.tone-steal { color: #ffe066; }
.eoe-row-act.tone-defend { color: #9ec5ff; }
.eoe-row-act.tone-scavenge { color: #d0b8ff; }
.eoe-row-act.tone-convert { color: #7dffc4; }
.eoe-row-delta {
  display: inline-flex; gap: 8px; flex: 0 0 auto;
  font-size: inherit; font-weight: 900;
}
.eoe-row-delta .pos { color: #51cf66; }
.eoe-row-delta .neg { color: #ff6b6b; }
.eoe-health-cell { display: flex; justify-content: center; }
.eoe-hearts { display: inline-flex; gap: 3px; align-items: center; flex-wrap: wrap; justify-content: center; }
.eoe-heart { width: 16px; height: 16px; display: block; }
.eoe-heart.is-on { filter: drop-shadow(0 0 4px rgba(255, 58, 74, .7)); }
.eoe-hearts.is-many .eoe-heart { width: 13px; height: 13px; }
.eoe-energy-cell, .eoe-score-cell {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.eoe-energy-cell b { font-weight: 900; color: #fff; font-size: 1rem; }
.eoe-bolt { width: 14px; height: 14px; filter: drop-shadow(0 0 4px rgba(255, 224, 102, .8)); }
.eoe-score-cell b { font-weight: 900; color: #fff; font-size: 1rem; }
.eoe-score-cell.is-leader b { color: #ffd24a; }
.eoe-crown { width: 16px; height: 16px; filter: drop-shadow(0 0 4px rgba(255, 210, 74, .8)); }

.eoe-actions {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.eoe-act {
  --eoe-line: #4da3ff;
  --eoe-glow: rgba(77, 163, 255, .55);
  appearance: none; -webkit-appearance: none;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px;
  min-height: 78px; padding: 12px 16px; text-align: left;
  border-radius: 16px; border: 3px solid var(--eoe-line);
  background: rgba(4, 10, 22, .96); color: var(--eoe-line);
  font-family: inherit; font-size: inherit; font-weight: 900; line-height: 1.1;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  box-shadow:
    0 0 16px var(--eoe-glow),
    inset 0 0 0 3px rgba(4, 10, 22, .96),
    inset 0 0 0 6px var(--eoe-line);
}
.eoe-act.tone-attack { --eoe-line: #ff3a4a; --eoe-glow: rgba(255, 58, 74, .55); }
.eoe-act.tone-steal { --eoe-line: #ffc02a; --eoe-glow: rgba(255, 192, 42, .55); }
.eoe-act.tone-defend { --eoe-line: #3da8ff; --eoe-glow: rgba(61, 168, 255, .55); }
.eoe-act.tone-scavenge { --eoe-line: #b56bff; --eoe-glow: rgba(181, 107, 255, .55); }
.eoe-act.tone-convert { --eoe-line: #3ee0a0; --eoe-glow: rgba(62, 224, 160, .55); }
.eoe-actions.has-convert .eoe-act-convert {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 16.5rem);
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
  padding: 10px 14px;
}
.eoe-act-cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1;
}
.eoe-act-cost b {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: .92rem;
}
.eoe-act-cost .eoe-bolt { width: 16px; height: 16px; }
.eoe-act-cost .eoe-heart { width: 16px; height: 16px; }
.eoe-act-eq { font-weight: 900; color: #fff; font-size: .92rem; }
.eoe-act:disabled { opacity: .38; cursor: default; box-shadow: none; }
.eoe-act.is-on {
  background: rgba(255, 255, 255, .05);
  box-shadow:
    0 0 0 3px #ffe066,
    0 0 18px rgba(255, 224, 102, .7),
    inset 0 0 0 3px rgba(4, 10, 22, .92),
    inset 0 0 0 6px var(--eoe-line);
}
.eoe-act.is-choose {
  gap: 0; text-align: center; padding: 8px 6px;
}
.eoe-act.is-choose .eoe-act-name {
  font-size: .84rem; letter-spacing: .03em; line-height: 1.12;
  white-space: normal; min-width: 0; max-width: 100%; flex: 1 1 auto;
}
.eoe-act-icon {
  width: 42px; height: 42px; border-radius: 0; background: transparent;
  display: grid; place-items: center; flex: 0 0 auto;
}
.eoe-act-svg { width: 40px; height: 40px; display: block; filter: drop-shadow(0 0 6px currentColor); }
.eoe-act-name {
  color: #fff; font-size: 1rem; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase;
}

.eoe-dice-wrap { text-align: center; margin: 2px 0 8px; }
.eoe-dice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(196px, 58vw);
  gap: clamp(10px, 2.8vw, 17px);
  margin: 6px auto 4px;
  align-items: center;
  justify-items: center;
}
.eoe-die {
  --die: clamp(53px, 17vw, 77px);
  width: min(100%, var(--die));
  height: auto;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5%;
  padding: 8%;
  border-radius: clamp(7px, 1.7vw, 11px);
  background: linear-gradient(155deg, #ffffff 0%, #f4f6fa 55%, #dfe5ef 100%);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow:
    inset 0 -8px 14px rgba(23,35,49,.12),
    inset 0 2px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(0,0,0,.3);
  color: #111;
  min-width: 0;
}
.eoe-die > .pip,
.eoe-die > .pip-off {
  display: block; width: 78%; height: 78%; min-width: 0; min-height: 0;
  border-radius: 50%; place-self: center;
}
.eoe-die > .pip-off { background: transparent; }
.eoe-die > .pip { background: #121820; box-shadow: none; }
.eoe-die.eoe-die-blank {
  background: transparent;
  border: 2px dashed rgba(255,255,255,.22);
  box-shadow: none;
}
.eoe-die.eoe-die-num {
  display: grid; place-items: center;
  grid-template-columns: 1fr; grid-template-rows: 1fr;
  gap: 0; padding: 0;
}
.eoe-die.eoe-die-num b {
  font-size: clamp(1.25rem, 4.9vw, 1.82rem);
  font-weight: 900; color: #121820; line-height: 1;
}
.eoe-dice-row.rolling .eoe-die:not(.eoe-die-blank) {
  animation: eoeDieToss .42s cubic-bezier(.2, 1.35, .35, 1) both;
}
.eoe-dice-row.rolling .eoe-die:nth-child(2) { animation-delay: .1s; }
.eoe-die.eoe-die-landed {
  animation: eoeDieLand .28s cubic-bezier(.2, 1.4, .35, 1) both;
}
.eoe-dice-row.settled .eoe-die:not(.eoe-die-blank) { animation: none; transform: none; }
@keyframes eoeDieToss {
  0% { transform: translateY(-6px) scale(.86); }
  55% { transform: translateY(2px) scale(1.04); }
  100% { transform: none; }
}
@keyframes eoeDieLand {
  0% { transform: scale(1.08); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eoe-dice-row.rolling .eoe-die:not(.eoe-die-blank),
  .eoe-die.eoe-die-landed { animation: none; }
}
.eoe-dice-gain { margin-top: 6px; font-weight: 900; color: var(--eoe-gold); letter-spacing: .04em; }
.eoe-dice-gain.is-heart {
  color: #ff6b8a;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.eoe-dice-gain.is-heart .eoe-heart { width: 13px; height: 13px; display: inline-block; }

.eoe-wait-note { text-align: center; font-weight: 700; color: var(--ink-dim); margin: 2px 0 4px; }
.eoe-my-reveal { text-align: center; margin: 2px 0 6px; }
.eoe-my-act { font-weight: 900; font-size: 1.05rem; margin-bottom: 4px; }
.eoe-my-act.tone-attack { color: #ffb4bc; }
.eoe-my-act.tone-steal { color: #ffe066; }
.eoe-my-act.tone-defend { color: #9ec5ff; }
.eoe-my-act.tone-scavenge { color: #d0b8ff; }
.eoe-my-act.tone-convert { color: #7dffc4; }
.eoe-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; font-weight: 700; }
.eoe-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 110;
  pointer-events: none;
  width: min(92vw, 28rem);
  max-width: calc(100vw - 24px);
  padding: 14px 18px 16px;
  border-radius: 16px;
  text-align: center;
  background: rgba(4, 12, 28, .94);
  border: 2px solid rgba(77, 163, 255, .55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 22px rgba(77, 163, 255, .22);
  animation: eoeToastIn .22s ease-out;
}
.eoe-toast.is-steady { animation: none; }
.eoe-toast.is-out { animation: eoeToastOut .35s ease-in forwards; }
@keyframes eoeToastIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes eoeToastOut {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}
.eoe-toast-act {
  display: block;
  font-weight: 900;
  font-size: 1.12rem;
  letter-spacing: .04em;
  margin-bottom: 8px;
  color: #fff;
}
.eoe-toast-act.tone-attack { color: #ffb4bc; }
.eoe-toast-act.tone-steal { color: #ffe066; }
.eoe-toast-act.tone-defend { color: #9ec5ff; }
.eoe-toast-act.tone-scavenge { color: #d0b8ff; }
.eoe-toast-act.tone-convert { color: #7dffc4; }
.eoe-toast-notes {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 4px;
  font-weight: 700; font-size: .95rem; line-height: 1.35;
  color: #e8f0ff;
}
.eoe-win-note {
  text-align: center; margin: 2px 0 0; font-size: .78rem; font-weight: 700; color: var(--ink-dim);
}
@media (max-width: 640px) {
  .eoe-roster-head, .eoe-roster-row {
    grid-template-columns: 1.05rem minmax(0, 1.55fr) 4rem 3.2rem 4rem;
    column-gap: 2px; padding-left: 8px; padding-right: 8px;
  }
  .eoe-roster-row { min-height: 54px; padding-top: 7px; padding-bottom: 7px; }
  .eoe-name { font-size: .92rem; }
  .eoe-act { min-height: 68px; padding: 10px 12px; gap: 10px; }
  .eoe-act-icon { width: 36px; height: 36px; }
  .eoe-act-svg { width: 34px; height: 34px; }
  .eoe-act-name { font-size: .88rem; letter-spacing: .12em; }
  .eoe-act.is-choose .eoe-act-name { font-size: .74rem; letter-spacing: .02em; line-height: 1.12; }
  .eoe-actions.has-convert .eoe-act-convert { width: min(100%, 14.5rem); min-height: 64px; padding: 8px 12px; }
  .eoe-act-cost { font-size: .72rem; }
  .eoe-act-cost b, .eoe-act-eq { font-size: .84rem; }
}

/* —— Fleet Fury —— */
body[data-game="flf"] {
  --bg: #041428;
  --bg-2: #0a2048;
  --card-solid: #0e2748;
  --bank-gold: #ffd166;
  --flf-ice: #7ec8ff;
  --flf-fire: #ff7a2a;
  --flf-panel: rgba(6, 18, 40, .88);
  --flf-line: rgba(62, 168, 255, .32);
  background:
    radial-gradient(900px 620px at 12% -10%, #123a78 0%, transparent 58%),
    radial-gradient(760px 540px at 110% 20%, #3a1860 0%, transparent 55%),
    linear-gradient(158deg, #041428 0%, #0a2048 55%, #071018 100%);
  background-attachment: fixed;
}
body[data-game="flf"] .bg-blobs span:nth-child(1) { background: #3ea8ff; }
body[data-game="flf"] .bg-blobs span:nth-child(2) { background: #ff7a2a; }
body[data-game="flf"] .bg-blobs span:nth-child(3) { background: #9b6bff; }

.wrap.flf-play {
  max-width: none;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}
@media (min-width: 1000px) {
  .wrap.flf-play {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
    padding-left: 12px;
    padding-right: 12px;
  }
}
.flf-host { max-width: 1200px; margin: 0 auto; }
.flf-team-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: rgba(61, 184, 120, .22); color: #8ef0b8;
  font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.flf-toast {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  z-index: 8;
  pointer-events: none;
  min-width: 48%;
  max-width: 86%;
  padding: 10px 18px 12px;
  border-radius: 16px;
  text-align: center;
  background: rgba(6, 16, 36, .86);
  border: 2px solid #2ad4ff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  animation: flfToastIn .22s ease-out;
}
.flf-toast b {
  display: block;
  font-size: 1.7rem;
  letter-spacing: .1em;
  color: #e8f6ff;
}
.flf-toast span {
  display: block;
  margin-top: 2px;
  color: #ffd08a;
  font-weight: 800;
  font-size: .92rem;
}
.flf-toast.is-hit { border-color: #ff7a2a; }
.flf-toast.is-hit b { color: #ffb090; }
.flf-toast.is-miss { border-color: #5ee8ff; }
.flf-toast.is-miss b { color: #b8f4ff; }
.flf-toast.is-sonar { border-color: #3ad0ff; }
.flf-toast.is-sonar b { color: #c8f4ff; }
.flf-toast.is-supply,
.flf-toast.flf-supply-banner {
  top: 12%;
  min-width: 58%;
  max-width: 92%;
  border-color: #ffd166;
  background: rgba(36, 22, 6, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 28px rgba(255, 196, 60, .38);
}
.flf-toast.flf-supply-banner b {
  font-size: 1.9rem;
  letter-spacing: .12em;
  color: #ffe9a0;
}
.flf-toast.is-supply b { color: #ffe9a0; }
.flf-toast.is-supply span,
.flf-toast.flf-supply-banner span { color: #ffd08a; }
.flf-toast.is-cf {
  border-color: #c9a0ff;
  background: rgba(28, 10, 48, .88);
}
.flf-toast.is-cf b { color: #f0e8ff; }
.flf-toast.flf-sink-banner {
  top: 10%;
  min-width: 58%;
  max-width: 92%;
  padding: 12px 14px 14px;
  border-color: #ff7a2a;
  background: rgba(28, 10, 8, .9);
}
.flf-toast.flf-sink-banner b {
  font-size: 2.05rem;
  letter-spacing: .14em;
  color: #ffb090;
}
.flf-toast.flf-hit-banner {
  top: 10%;
  min-width: 58%;
  max-width: 92%;
  padding: 12px 14px 14px;
}
.flf-toast.flf-hit-banner b { font-size: 1.85rem; }
.flf-sink-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  text-align: left;
}
.flf-sink-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.flf-sink-row .avatar {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
}
.flf-sink-row.is-taken .flf-sink-ship { color: #ffb4a0; }
.flf-toast.flf-hit-banner.has-taken {
  max-height: min(70vh, 420px);
  overflow: auto;
}
.flf-sink-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.flf-sink-who {
  font-size: .82rem;
  font-weight: 800;
  color: #ffe8dc;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flf-sink-ship {
  font-size: 1.12rem;
  font-weight: 1000;
  letter-spacing: .08em;
  color: #ffd166;
  line-height: 1.15;
}
.flf-toast.is-steady { animation: none; }
.flf-toast.is-out {
  animation: flfToastOut .35s ease-in forwards;
}
@keyframes flfToastIn {
  from { opacity: 0; transform: translateX(-50%) scale(.92); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes flfToastOut {
  to { opacity: 0; transform: translateX(-50%) scale(.96); }
}
.flf-roster {
  --flf-av: 32px;
  --flf-delta-col: 3.8rem;
  --flf-score-col: 3.5rem;
  --flf-ships-col: 3.1rem;
  --flf-gutter: 8px;
  --flf-pad-x: 10px;
  margin: 10px 0 4px;
  padding: 6px 8px 6px;
  background: rgba(6, 18, 40, .78);
  border: 1px solid rgba(62, 168, 255, .28);
  border-radius: 14px;
  overflow: hidden;
}
.flf-board-head,
.flf-board-row {
  display: grid;
  grid-template-columns:
    var(--flf-av)
    minmax(0, 1fr)
    var(--flf-delta-col)
    var(--flf-score-col)
    var(--flf-ships-col);
  column-gap: var(--flf-gutter);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0 var(--flf-pad-x);
  border: 0;
  border-left: 6px solid transparent;
  box-sizing: border-box;
}
.flf-board-head {
  min-height: 0; margin: 0 0 2px; line-height: 1.1;
  font-size: .62rem; font-weight: 900; letter-spacing: 0;
  text-transform: uppercase; color: var(--ink-dim);
}
.flf-col-av {
  width: var(--flf-av); min-width: 0; max-width: var(--flf-av);
  justify-self: center; display: flex; align-items: center; justify-content: center;
}
.flf-col-who { min-width: 0; }
.flf-col-delta,
.flf-col-score,
.flf-col-ships {
  display: flex; align-items: center; justify-content: center;
  justify-self: stretch; width: 100%; min-width: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.flf-board-head .flf-col-delta,
.flf-board-head .flf-col-score,
.flf-board-head .flf-col-ships {
  letter-spacing: .04em;
}
.flf-board-row {
  min-height: 46px; padding: 7px var(--flf-pad-x);
  border-top: 1px solid rgba(62, 168, 255, .16);
  border-left-color: var(--flf-tone, transparent);
  border-radius: 0; background: transparent; color: inherit;
  text-align: left; font: inherit;
}
button.flf-board-row {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit; background: transparent;
  overflow: visible;
}
.flf-board-row .avatar.sm {
  width: var(--flf-av); height: var(--flf-av); border-radius: 9px; margin: 0;
}
.flf-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
}
.flf-who-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0;
}
.flf-who-top .flf-cheers { flex: 0 0 auto; }
.wrap.flf-play .btb-cheer-bar,
.flf-host .btb-cheer-bar {
  margin: 0 auto 8px;
  max-width: none;
}
.flf-board-row.cheer-pick {
  box-shadow: inset 0 0 0 2px #ffd166;
}
.flf-board-row.me.cheer-pick {
  outline: 2px solid #b8f5c8;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px #ffd166;
}
.flf-play .btb-incoming-cheer,
.flf-host .btb-incoming-cheer {
  min-width: 52px;
}
.flf-name {
  font-weight: 800; font-size: 1.01rem; color: #fff; line-height: 1.15;
  overflow-wrap: anywhere;
}
.flf-team-mini {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  background: rgba(61, 184, 120, .22); color: #8ef0b8;
  font-size: .62rem; font-weight: 900; letter-spacing: .06em;
}
.flf-state {
  font-size: .68rem; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; color: #9ecfff;
}
.flf-state.sunk { color: #ff8a8a; }
.flf-state.placed, .flf-state.locked, .flf-state.afloat { color: #8ef0b8; }
.flf-state.placing,
.flf-state.placing-ships,
.flf-state.aiming { color: var(--ink-dim); }
.flf-who .flf-sils { width: 100%; justify-content: flex-start; margin: 0; gap: 4px; }
.flf-delta { font-weight: 900; color: #7dffa8; }
.flf-delta.up { color: #7dffa8; }
.flf-delta.down { color: #ff8a8a; }
.flf-score-n { font-size: 1.1rem; font-weight: 1000; color: #ffd166; }
.flf-ships-n { font-weight: 900; color: #7ec8ff; }
.flf-board-row.me {
  position: relative;
  z-index: 1;
  background: rgba(62, 224, 144, .12);
  border-top-color: transparent;
  border-left-color: #3ee090;
  border-radius: 10px;
  outline: 2px solid #b8f5c8;
  outline-offset: -2px;
}
.flf-board-row.is-on {
  background: rgba(255, 204, 0, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 204, 0, .45);
}
.flf-board-row.me.is-on {
  border-left-color: #3ee090;
  outline: 2px solid #b8f5c8;
  outline-offset: -2px;
  box-shadow: none;
}
.flf-board-row.is-sunk { opacity: .58; }
.flf-board-row.is-pick:active { background: rgba(255, 204, 0, .18); }
.flf-watch-name { text-align: center; font-weight: 800; margin: 0 0 6px; color: #9ecfff; }
.flf-sils { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.flf-sil {
  display: inline-block; height: 8px; width: calc(var(--n, 3) * 7px);
  border-radius: 4px; background: #7ec8ff; opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.flf-sil.is-sunk {
  background: #14181f;
  box-shadow: inset 0 0 0 2px var(--flf-tone, #ff5a5a);
}
.flf-board {
  --flf-n: 10;
  --flf-r: 8;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 4px;
  row-gap: 4px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  border: 0;
  align-items: stretch;
}
.flf-host .flf-board { max-width: min(100%, 72vh); margin-left: auto; margin-right: auto; }
.flf-corner { grid-column: 1; grid-row: 1; }
.flf-cols {
  grid-column: 2; grid-row: 1;
  display: grid; grid-template-columns: repeat(var(--flf-n), minmax(0, 1fr));
  align-items: end;
}
.flf-rlabs {
  grid-column: 1; grid-row: 2;
  display: grid; grid-template-rows: repeat(var(--flf-r), minmax(0, 1fr));
  align-items: stretch;
}
.flf-cols span, .flf-rlab {
  font-size: .62rem; font-weight: 800; color: #7eb8e8; text-align: center;
  line-height: 1;
}
.flf-rlab { display: flex; align-items: center; justify-content: center; }
.flf-radar-wrap {
  grid-column: 2; grid-row: 2;
  position: relative;
  width: 100%;
  aspect-ratio: var(--flf-n) / var(--flf-r);
  border-radius: 8px;
  overflow: hidden;
  background-color: #00051a;
  background-image:
    radial-gradient(ellipse 90% 72% at 48% 40%, rgba(16, 52, 120, .55) 0%, rgba(0, 8, 28, .25) 58%, transparent 78%),
    linear-gradient(rgba(42, 212, 255, .58) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 212, 255, .58) 1px, transparent 1px);
  background-size: 100% 100%, 100% calc(100% / var(--flf-r)), calc(100% / var(--flf-n)) 100%;
  box-shadow:
    0 0 0 2.5px #2ad4ff,
    0 0 6px rgba(42, 212, 255, .75),
    0 0 20px rgba(0, 180, 255, .38),
    inset 0 0 30px rgba(0, 24, 64, .55);
}
.flf-radar-wrap.has-pop {
  overflow: visible;
  z-index: 12;
}
.flf-radar {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--flf-n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--flf-r), minmax(0, 1fr));
  grid-auto-flow: row;
  width: auto; height: auto;
  margin: 0; padding: 0; border: 0;
  background: transparent;
}
.flf-confirm-pop {
  position: absolute;
  z-index: 9;
  transform: translate(-50%, 5px);
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flf-confirm-pop.is-above { transform: translate(-50%, calc(-100% - 5px)); }
.flf-confirm-pop.is-left { transform: translate(0, 5px); }
.flf-confirm-pop.is-left.is-above { transform: translate(0, calc(-100% - 5px)); }
.flf-confirm-pop.is-right { transform: translate(-100%, 5px); }
.flf-confirm-pop.is-right.is-above { transform: translate(-100%, calc(-100% - 5px)); }
.flf-confirm-btn {
  pointer-events: auto;
  display: inline-block;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 6px 10px;
  border-radius: 9px;
  border: 2px solid #ffe066;
  background: #ffcc00;
  color: #1a1200;
  font: inherit;
  font-size: .79rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .55);
  white-space: nowrap;
}
.flf-confirm-btn:disabled { opacity: .65; cursor: wait; }
.flf-mega-rot-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 9px;
  border: 2px solid #ffe066;
  background: #ffcc00;
  color: #1a1200;
  cursor: pointer;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .55);
}
.flf-mega-rot-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}
.flf-hit-pop {
  position: absolute;
  z-index: 20;
  transform: translate(-50%, 5px);
  pointer-events: none;
  min-width: 0;
  max-width: 100vw;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 10px;
  border: 2px solid #ff9a4a;
  background: rgba(28, 12, 6, .94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
  color: #ffe8d2;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .04em;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
}
.flf-hit-pop.is-above { transform: translate(-50%, calc(-100% - 5px)); }
.flf-hit-pop-line + .flf-hit-pop-line { margin-top: 4px; }
.flf-cell.is-peek {
  background: rgba(255, 140, 60, .22);
  box-shadow: inset 0 0 0 2px #ff9a4a;
}
.flf-board:not(.show-mine) .flf-cell.is-hit,
.flf-board:not(.show-mine) .flf-cell.is-sunk { cursor: pointer; }
.flf-board.show-mine .flf-radar-wrap {
  background-color: #0a2468;
  background-image:
    radial-gradient(ellipse 90% 72% at 48% 40%, rgba(48, 110, 200, .68) 0%, rgba(12, 40, 96, .32) 58%, transparent 78%),
    linear-gradient(rgba(90, 220, 255, .62) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 220, 255, .62) 1px, transparent 1px);
  box-shadow:
    0 0 0 2.5px rgba(255, 122, 42, .9),
    0 0 16px rgba(255, 122, 42, .35),
    inset 0 0 28px rgba(20, 60, 120, .28);
}
.flf-cell {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  min-width: 0; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: inherit;
}
button.flf-cell {
  cursor: pointer; appearance: none; -webkit-appearance: none; font: inherit;
}
.flf-cell.is-ship { background: transparent; }
.flf-cell.is-haze { background: rgba(90, 70, 200, .18); }
.flf-hit-faces {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 4;
}
.flf-hit-faces.is-n2,
.flf-hit-faces.is-n3,
.flf-hit-faces.is-n4 {
  padding: 5%;
  gap: 3%;
  place-items: center;
}
.flf-hit-faces.is-n2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.flf-hit-faces.is-n3,
.flf-hit-faces.is-n4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.flf-hit-faces.is-many { place-items: center; }
.flf-board .avatar.flf-hit-av,
.flf-board.show-mine .avatar.flf-hit-av {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  align-self: center;
  justify-self: center;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  border-radius: 22%;
}
.avatar.flf-hit-av .zz-avatar-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.flf-hit-faces.is-n1 .avatar.flf-hit-av {
  width: 70%;
  max-width: 70%;
  max-height: 70%;
}
.flf-hit-faces.is-n2 .avatar.flf-hit-av,
.flf-hit-faces.is-n3 .avatar.flf-hit-av,
.flf-hit-faces.is-n4 .avatar.flf-hit-av {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}
.flf-hit-faces.is-n3 .avatar.flf-hit-av:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  width: calc((100% - 3%) / 2);
  max-width: calc((100% - 3%) / 2);
}
.flf-hit-plus {
  color: #ff3b3b;
  font-weight: 1000;
  font-size: clamp(.72rem, 4.8cqmin, 1.2rem);
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 40, 40, .7);
}
.flf-outline-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  --flf-cell: calc(100% / var(--flf-n));
  --flf-outline-step: 4px;
}
.flf-ship-outline {
  position: absolute;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 3px var(--flf-outline, #ff5a5a),
    inset 0 0 0 4px rgba(0, 0, 0, .35);
}
.flf-ship-outline.is-sunk {
  box-shadow:
    inset 0 0 0 3.5px var(--flf-outline, #ff5a5a),
    inset 0 0 10px rgba(255, 90, 90, .28),
    inset 0 0 0 5px rgba(0, 0, 0, .4);
}
.flf-sonar-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.flf-sonar-ping {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid rgba(90, 220, 255, .45);
  background:
    radial-gradient(circle, rgba(90, 210, 255, .16) 0%, rgba(40, 140, 220, .08) 52%, transparent 72%);
  box-shadow:
    0 0 10px rgba(80, 200, 255, .28),
    inset 0 0 14px rgba(80, 220, 255, .14);
}
.flf-sonar-ping.is-multi {
  border-width: 2.5px;
  border-color: rgba(110, 230, 255, .58);
  background:
    radial-gradient(circle, rgba(90, 210, 255, .2) 0%, rgba(40, 140, 220, .1) 56%, transparent 74%);
}
.flf-cell.is-preview { background: rgba(255, 204, 0, .16); }
.flf-cell.is-sel {
  background: rgba(255, 204, 0, .2);
  box-shadow: inset 0 0 0 2px #ffcc00;
}
.flf-cell.is-locked-shot {
  background: rgba(62, 224, 144, .28);
  box-shadow: inset 0 0 0 2.5px #3ee090;
}
.flf-cell.is-locked-area {
  background: rgba(62, 224, 144, .16);
  box-shadow: inset 0 0 0 2px rgba(62, 224, 144, .7);
}
.flf-fleet-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.flf-board.show-edit .flf-radar-wrap { overflow: visible; }
.flf-board.show-edit .flf-radar { z-index: 1; }
.flf-board.show-edit .flf-fleet-layer { z-index: 3; }
.flf-edit-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.flf-hull-tools {
  position: absolute;
  z-index: 21;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(6, 14, 36, .88);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(255, 255, 255, .22);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.flf-hull-tools.dir-v {
  flex-direction: column;
  padding: 6px 4px;
}
.flf-hull-tools.is-moving { background: rgba(16, 48, 90, .92); }
.flf-hull-btn {
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.flf-hull-btn svg { width: 62%; height: 62%; display: block; }
.flf-hull-rot {
  background: #ffc078;
  color: #5a2200;
  border-color: #ff9a3c;
}
.flf-hull-rot:hover,
.flf-hull-rot:active {
  background: #ff9a40;
  color: #3a1400;
}
.flf-hull-move {
  background: #8fd4ff;
  color: #06304a;
  border-color: #4eb8f0;
}
.flf-hull-move:hover,
.flf-hull-move.is-on {
  background: #4ec2ff;
  color: #021828;
  border-color: #ffe066;
  box-shadow: 0 0 0 2px rgba(255, 224, 102, .85), 0 2px 8px rgba(0,0,0,.5);
}
.flf-hull.is-moving svg {
  filter: drop-shadow(0 0 3px rgba(255, 224, 102, .95)) drop-shadow(0 0 10px rgba(255, 200, 40, .55));
}
.flf-hull {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  transform-origin: top left;
}
.flf-hull.dir-v { transform: rotate(90deg); }
.flf-hull svg {
  width: 96%; height: 82%; display: block;
  filter: drop-shadow(0 0 3px rgba(90, 210, 255, .85)) drop-shadow(0 0 8px rgba(40, 140, 220, .45));
}
.flf-hull.is-preview svg {
  filter: drop-shadow(0 0 3px rgba(255, 224, 102, .95)) drop-shadow(0 0 10px rgba(255, 200, 40, .55));
}
.flf-hull.is-sub svg {
  filter: drop-shadow(0 0 3px rgba(80, 160, 200, .8)) drop-shadow(0 0 8px rgba(18, 50, 90, .55));
}
.flf-hull.is-sub.is-preview svg {
  filter: drop-shadow(0 0 3px rgba(255, 224, 102, .95)) drop-shadow(0 0 10px rgba(255, 200, 40, .55));
}
.flf-lobby-teams.flf-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flf-lobby-teams.flf-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .flf-lobby-teams.flf-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .flf-lobby-teams.flf-cols-3,
  .flf-lobby-teams.flf-cols-4 { grid-template-columns: 1fr 1fr; }
}
.flf-team-col.flf-team-1 { border-color: rgba(255, 99, 99, .4); }
.flf-team-col.flf-team-2 { border-color: rgba(90, 180, 255, .4); }
.flf-team-col.flf-team-3 { border-color: rgba(255, 209, 74, .4); }
.flf-team-col.flf-team-4 { border-color: rgba(176, 124, 255, .4); }
.flf-team-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800;
  letter-spacing: .02em;
}
.flf-team-badge-1 { background: rgba(255, 99, 99, .2); color: #ffb4b4; }
.flf-team-badge-2 { background: rgba(90, 180, 255, .2); color: #b7dbff; }
.flf-team-badge-3 { background: rgba(255, 209, 74, .2); color: #ffe29a; }
.flf-team-badge-4 { background: rgba(176, 124, 255, .2); color: #e0c8ff; }
.flf-lobby-teams .mm-seat-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.flf-seat-btn { min-width: 28px; padding: 4px 6px; font-size: .75rem; font-weight: 800; }
.flf-cell.is-cf { box-shadow: inset 0 0 0 2px rgba(201, 160, 255, .75); }
.flf-mark {
  width: 68%; height: 68%; display: block; pointer-events: none;
  position: relative; z-index: 2;
}
.flf-miss {
  filter: drop-shadow(0 0 2px #5ee8ff) drop-shadow(0 0 7px rgba(0, 204, 255, .85));
}
.flf-supply-mark {
  width: 78%; height: 78%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.flf-cell.is-supply {
  background: rgba(255, 196, 60, .16);
}
.flf-hit {
  filter: drop-shadow(0 0 2px #ff6a30) drop-shadow(0 0 8px #ff4500)
    drop-shadow(0 0 16px rgba(255, 69, 0, .55));
}
.flf-hit.is-sunk {
  filter: drop-shadow(0 0 3px #ffd166) drop-shadow(0 0 10px #ff4500);
}
.flf-sel {
  position: absolute;
  left: 50%; top: 50%;
  width: 86%; height: 86%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 3px #ffcc00) drop-shadow(0 0 9px rgba(255, 204, 0, .8));
}
.flf-sel.is-locked {
  filter: drop-shadow(0 0 3px #3ee090) drop-shadow(0 0 9px rgba(62, 224, 144, .85));
}
.flf-place-bar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 8px 0 4px;
}
.flf-place-bar .btn { min-height: 46px; width: 100%; }
.flf-grid-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  margin: 0 0 8px;
  min-height: 48px;
}
.flf-tool {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding: 8px 8px;
  border-radius: 14px;
  border: 1.5px solid var(--flf-line);
  background: rgba(8, 20, 48, .75);
  color: #cfe8ff;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
}
.flf-tool-slot {
  min-width: 0;
  min-height: 48px;
}
.flf-show-mine {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 18px;
  border: 2.5px solid #ff9a4a;
  color: #fff4e8;
  background:
    radial-gradient(ellipse 78% 90% at 48% 38%, #7a3a18 0%, #2a1408 58%, #120804 100%);
  box-shadow:
    0 0 0 1px #a05018,
    inset 0 1px 0 rgba(255, 210, 160, .6),
    inset 0 -3px 6px rgba(40, 12, 0, .7),
    0 0 12px rgba(255, 140, 50, .4);
}
.flf-show-mine.is-on {
  border-color: #ffd08a;
  background:
    radial-gradient(ellipse 78% 90% at 48% 38%, #a04a20 0%, #3a1808 58%, #1a0c04 100%);
  box-shadow:
    0 0 0 2px #ffe8c4,
    0 0 0 4px #ff9a4a,
    inset 0 1px 0 rgba(255, 220, 180, .85),
    0 0 16px rgba(255, 150, 60, .7);
}
.flf-fleet-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: block;
  filter: drop-shadow(0 0 3px rgba(255, 160, 70, .7));
}
.flf-fleet-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff4e8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.flf-fleet-copy b { font: inherit; font-size: .78rem; }
.flf-mega-btn {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  border-radius: 18px;
  border: 2.5px solid #f5d76a;
  color: #fff5e1;
  background:
    radial-gradient(ellipse 78% 90% at 48% 38%, #6a4318 0%, #2a1608 58%, #120a04 100%);
  box-shadow:
    0 0 0 1px #8a5a10,
    inset 0 1px 0 rgba(255, 236, 170, .7),
    inset 0 -3px 6px rgba(40, 18, 0, .72),
    0 0 12px rgba(255, 200, 60, .4);
}
.flf-mega-btn.is-on {
  border-color: #ffe9a0;
  background:
    radial-gradient(ellipse 78% 90% at 48% 38%, #8a5820 0%, #3a1c08 58%, #1a0c04 100%);
  box-shadow:
    0 0 0 2px #fff4c4,
    0 0 0 4px #f0c44a,
    inset 0 1px 0 rgba(255, 236, 170, .85),
    0 0 16px rgba(255, 210, 80, .7);
}
.flf-mega-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.flf-mega-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff5e1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.flf-mega-copy b { font: inherit; font-size: .78rem; }
.flf-mega-badge {
  position: absolute;
  top: -9px; right: -8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #0a0e1a;
  border: 2px solid #f0c44a;
  color: #e8f4ff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.flf-sonar-btn {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  border-radius: 18px;
  border: 2.5px solid #4ec8ff;
  color: #fff;
  background:
    radial-gradient(ellipse 78% 90% at 48% 38%, #1a4a88 0%, #0a1c40 58%, #040a18 100%);
  box-shadow:
    0 0 0 1px #1a6aaa,
    inset 0 1px 0 rgba(180, 230, 255, .55),
    inset 0 -3px 6px rgba(0, 20, 50, .7),
    0 0 12px rgba(60, 180, 255, .45);
}
.flf-sonar-btn.is-on {
  border-color: #a8ecff;
  background:
    radial-gradient(ellipse 78% 90% at 48% 38%, #2a6ab0 0%, #0c2848 58%, #061020 100%);
  box-shadow:
    0 0 0 2px #d8f6ff,
    0 0 0 4px #3eb8ff,
    inset 0 1px 0 rgba(200, 240, 255, .8),
    0 0 16px rgba(80, 200, 255, .7);
}
.flf-sonar-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: block;
  filter: drop-shadow(0 0 3px rgba(80, 210, 255, .9));
}
.flf-sonar-copy {
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  font-size: .92rem;
  text-shadow: 0 0 6px rgba(120, 210, 255, .55), 0 1px 0 rgba(0, 0, 0, .4);
}
.flf-next, .flf-wait-note {
  text-align: center; margin: 0 0 8px; font-weight: 800; color: #cfe8ff;
  min-height: 1.35em;
}
.flf-msg-slot {
  position: relative;
  height: 2.5rem;
  min-height: 2.5rem;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.flf-msg-copy {
  margin: 0;
  width: 100%;
  text-align: center;
  font-weight: 800;
  color: #cfe8ff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flf-msg-timer {
  display: none;
  width: 100%;
}
.flf-msg-slot.is-timer .flf-msg-copy {
  visibility: hidden;
  position: absolute;
  inset: 0;
}
.flf-msg-slot.is-timer .flf-msg-timer { display: block; }
.flf-grid-tools-slot { pointer-events: none; }
.flf-notes { margin: 0 8px 8px; padding-left: 1.2rem; color: #cfe8ff; font-weight: 700; }
.flf-notes li { margin: 2px 0; }

@media (max-width: 520px) {
  .flf-roster {
    --flf-delta-col: 3.4rem;
    --flf-score-col: 3.25rem;
    --flf-ships-col: 2.9rem;
    --flf-gutter: 6px;
    --flf-pad-x: 8px;
    padding: 6px 6px 4px;
  }
  .flf-board-head, .flf-board-row { padding-left: var(--flf-pad-x); padding-right: var(--flf-pad-x); }
  .flf-board-row { min-height: 42px; padding-top: 6px; padding-bottom: 6px; }
  .flf-name { font-size: .95rem; }
  .flf-score-n { font-size: 1.02rem; }
  .flf-toast b { font-size: 1.35rem; }
  .flf-toast.flf-sink-banner b { font-size: 1.55rem; }
  .flf-sink-ship { font-size: .98rem; }
  .flf-sink-row .avatar { width: 36px; height: 36px; border-radius: 10px; }
}

/* ---- Prize Party ---- */
body[data-game="pp"] {
  --pp-gold: #e8b84a;
  --pp-violet: #8b6cff;
  --pp-ink: #1a1430;
  --pp-teal: #22d6c8;
  --pp-pink: #ff61b8;
}
body[data-game="pp"] .bg-blobs span:nth-child(1) { background: #e8b84a; }
body[data-game="pp"] .bg-blobs span:nth-child(2) { background: #8b6cff; }
body[data-game="pp"] .bg-blobs span:nth-child(3) { background: #ff6b9a; }

.pp-stage { padding-bottom: 18px; }
.pp-team-badge {
  display: inline-block; font-weight: 800; font-size: .78rem;
  letter-spacing: .04em; padding: 2px 8px; border-radius: 999px;
}
.pp-team-badge-gold { background: #e8b84a; color: #2a1c00; }
.pp-team-badge-violet { background: #8b6cff; color: #fff; }
.pp-team-col.pp-team-gold { border-color: #e8b84a; }
.pp-team-col.pp-team-violet { border-color: #8b6cff; }
.pp-hud {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  margin: 8px 12px 10px; font-weight: 700;
}
.pp-hud-stat { display: flex; flex-direction: column; min-width: 4.5rem; }
.pp-hud-k { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.pp-hud-stat b { font-size: 1.15rem; }
.pp-hud-val {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 1.15rem; line-height: 1;
}
.pp-ico {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -0.15em;
  flex: 0 0 auto;
}
.pp-ico.pp-hud-ico { width: 1.35rem; height: 1.35rem; }
.pp-ico.pp-hud-ico.sm { width: 1.05rem; height: 1.05rem; }
.pp-ico.pp-prompt-ico {
  width: 1.25rem; height: 1.25rem; vertical-align: -0.28em; margin: 0 2px;
}
.pp-prompt .lede { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.pp-hud-team { padding: 3px 10px; border-radius: 999px; font-size: .8rem; }
.pp-hud-team.pp-team-gold { background: #e8b84a; color: #2a1c00; }
.pp-hud-team.pp-team-violet { background: #8b6cff; color: #fff; }

/* Phone play chrome — mockup layout */
.pp-phone-play {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(90, 50, 160, .35), transparent 55%),
    linear-gradient(180deg, #12081f 0%, #1a0f32 40%, #0c1024 100%);
  padding-bottom: 12px;
}
.pp-phone-top { margin: 4px 10px 8px; }
.pp-top-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  padding: 8px 8px 6px;
  border-radius: 14px;
  background: rgba(10, 6, 24, .72);
  border: 1px solid rgba(255,255,255,.08);
}
.pp-top-stat {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.pp-top-stat-txt {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.05;
}
.pp-top-k {
  font-size: .58rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; opacity: .72; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pp-top-stat-txt b {
  font-size: 1.15rem; font-weight: 900; color: #fff;
}
.pp-top-dist .pp-top-stat-txt b { font-size: .95rem; color: #b9dfff; }
.pp-ico.pp-top-ico { width: 1.55rem; height: 1.55rem; }
.pp-ico.pp-top-ico.sm { width: 1.3rem; height: 1.3rem; }

.pp-phone-dock {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px;
  margin: 4px 10px 8px;
}
.pp-dock-card {
  background: rgba(18, 12, 36, .88);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 8px;
  min-height: 92px;
}
.pp-dock-k {
  font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; opacity: .75; margin-bottom: 6px;
}
.pp-dock-items .pp-slots {
  display: flex; gap: 8px; justify-content: stretch; width: 100%;
}
.pp-dock-items .pp-slot {
  flex: 1 1 0;
  width: auto; min-width: 0; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 900;
}
.pp-slot.empty {
  border: 1.5px dashed rgba(255,255,255,.35);
  color: rgba(255,255,255,.45);
}
.pp-slot.filled {
  background: rgba(232,184,74,.22);
  border: 1px solid rgba(232,184,74,.55);
  font-size: .62rem; padding: 4px 6px; text-align: center; line-height: 1.1;
  overflow: hidden;
}
.pp-dock-empty {
  margin: 6px 0 0; text-align: center; font-size: .72rem;
  opacity: .65; font-weight: 700;
}
.pp-stand-row {
  display: grid;
  grid-template-columns: 14px 22px minmax(0, 1fr) auto;
  gap: 4px; align-items: center;
  padding: 3px 4px; border-radius: 8px;
  font-size: .68rem; font-weight: 700;
}
.pp-stand-row.me {
  background: rgba(139, 108, 255, .28);
  outline: 1px solid rgba(180, 150, 255, .45);
}
.pp-stand-rank { opacity: .7; text-align: center; }
.pp-stand-row .avatar.sm { width: 20px; height: 20px; }
.pp-stand-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-stand-stats {
  display: inline-flex; align-items: center; gap: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pp-ico.pp-stand-ico { width: .85rem; height: .85rem; }

.pp-crystal-fanfare {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px;
  background: rgba(8, 4, 20, .72);
  backdrop-filter: blur(3px);
  animation: ppFanfareIn .35s ease-out both;
  pointer-events: none;
}
.pp-crystal-fanfare-inner {
  width: min(100%, 420px);
  text-align: center;
  padding: 22px 18px 24px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 224, 138, .35), transparent 55%),
    linear-gradient(165deg, #4a2a88 0%, #1a0f38 55%, #100820 100%);
  border: 2px solid rgba(255, 246, 208, .55);
  box-shadow: 0 0 40px rgba(255, 210, 80, .45), 0 18px 40px rgba(0,0,0,.45);
  animation: ppFanfarePop .55s cubic-bezier(.2, 1.2, .35, 1) both;
}
.pp-crystal-fanfare.steal .pp-crystal-fanfare-inner {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 120, 160, .32), transparent 55%),
    linear-gradient(165deg, #6a2048 0%, #2a0f28 55%, #100820 100%);
  border-color: rgba(255, 170, 200, .55);
  box-shadow: 0 0 40px rgba(255, 100, 150, .4), 0 18px 40px rgba(0,0,0,.45);
}
.pp-crystal-fanfare.host .pp-crystal-fanfare-inner {
  width: min(92vw, 720px); padding: 36px 28px 40px;
}
.pp-crystal-fanfare-kicker {
  font-size: .75rem; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; color: #ffe08a; opacity: .9;
}
.pp-crystal-fanfare.steal .pp-crystal-fanfare-kicker { color: #ffb0c8; }
.pp-ico.pp-crystal-fanfare-gem {
  width: 72px; height: 72px; margin: 10px auto 6px; display: block;
  filter: drop-shadow(0 0 16px rgba(255, 210, 80, .75));
}
.pp-crystal-fanfare.host .pp-ico.pp-crystal-fanfare-gem {
  width: 110px; height: 110px;
}
.pp-crystal-fanfare-title {
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 900; letter-spacing: .04em; color: #fff6d0;
  text-shadow: 0 0 22px rgba(255, 210, 80, .55);
  line-height: 1.05;
}
.pp-crystal-fanfare.host .pp-crystal-fanfare-title {
  font-size: clamp(2.8rem, 7vw, 4.4rem);
}
.pp-crystal-fanfare.steal .pp-crystal-fanfare-title { color: #ffe0ea; }
.pp-crystal-fanfare-who {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; font-size: 1.2rem; font-weight: 900;
}
.pp-crystal-fanfare-who .avatar.sm {
  width: 48px; height: 48px; border-radius: 12px;
}
.pp-crystal-fanfare-sub {
  margin: 10px 0 0; font-size: 1rem; font-weight: 700;
  color: rgba(255,246,208,.92);
}
.pp-crystal-fanfare.host .pp-crystal-fanfare-sub { font-size: 1.35rem; }
@keyframes ppFanfareIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ppFanfarePop {
  0% { transform: scale(.78); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-crystal-fanfare,
  .pp-crystal-fanfare-inner { animation: none; }
}

.pp-banner {
  margin: 0 12px 10px; padding: 8px 12px; border-radius: 12px;
  background: rgba(255,255,255,.12); font-weight: 700;
  min-height: 3.4rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center; box-sizing: border-box;
}
.pp-banner.pp-banner-empty {
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: none;
}
.pp-banner.pp-good {
  background: rgba(80,200,120,.28);
  border: 1px solid rgba(120,255,170,.45);
  box-shadow: 0 0 18px rgba(80,200,120,.25);
  animation: ppBannerPop .45s ease-out both;
}
.pp-banner.pp-crystal {
  background: rgba(232,184,74,.3);
  animation: ppBannerPop .45s ease-out both;
}
.pp-banner.pp-bad { background: rgba(220,80,80,.28); }
@keyframes ppBannerPop {
  0% { transform: scale(.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pp-minigame-stage {
  display: flex; flex-direction: column; min-height: min(70vh, 640px);
}
.pp-minigame-splash {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px;
  padding: 24px 16px 40px; text-align: center;
}
.pp-minigame-word {
  font-size: clamp(2.8rem, 14vw, 6.5rem);
  font-weight: 900; letter-spacing: .08em; line-height: .95;
  color: #fff6d0;
  text-shadow: 0 0 28px rgba(255, 210, 80, .55), 0 4px 0 rgba(40, 20, 0, .45);
  animation: ppMinigamePop .55s ease-out both;
}
.pp-minigame-splash.host .pp-minigame-word {
  font-size: clamp(4.5rem, 12vw, 9rem);
  letter-spacing: .12em;
}
.pp-mini-reveal {
  width: min(100%, 440px);
}
.pp-mini-reel-window {
  height: 92px;
}
.pp-mini-reel-window .fitf-reel-item {
  height: 92px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: clamp(1.05rem, 3.8vw, 1.55rem);
  padding: 0 14px;
}
.pp-minigame-splash.host .pp-mini-reel-window,
.pp-minigame-splash.host .pp-mini-reel-window .fitf-reel-item {
  height: 108px;
}
.pp-minigame-splash.host .pp-mini-reel-window .fitf-reel-item {
  font-size: clamp(1.25rem, 2.8vw, 1.85rem);
}
.pp-mini-reveal.is-locked.hit .pp-mini-reel {
  border-color: rgba(127, 240, 228, .75);
  box-shadow: 0 0 22px rgba(127, 240, 228, .25);
}
.pp-minigame-head { justify-content: center; }
.pp-minigame-head .grow { text-align: center; }
@keyframes ppMinigamePop {
  0% { transform: scale(.72); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-minigame-word { animation: none; }
}
.pp-dice-wall {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 0 8px 14px;
}
.pp-dice-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 64px;
}
.pp-dice-cell.waiting { opacity: .55; }
.pp-dice-cell.rolling { opacity: 1; }
.pp-dice-name { font-size: .72rem; font-weight: 700; max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-stage .pp-dice-cell .bob-die { --die: 62px; width: 62px; }
.pp-stage .pp-dice-cell .pp-poly { width: 62px; height: 62px; }
.pp-poly {
  position: relative;
  width: 48px; height: 48px;
  display: block;
  flex: 0 0 auto;
}
.pp-poly .btb-die-shape {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.pp-poly.empty { opacity: .4; }
.pp-roll-prompt { text-align: left; margin: 4px 12px 6px; padding: 10px 12px 12px; }
.pp-roll-hit {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  width: 100%; border: 0; background: transparent; color: inherit;
  cursor: pointer; padding: 4px 4px 2px; text-align: left;
}
.pp-roll-hit:disabled { cursor: default; }
.pp-roll-die {
  width: 84px; flex: 0 0 auto; display: flex; justify-content: center;
  filter: drop-shadow(0 0 14px rgba(160, 110, 255, .5));
}
.pp-roll-die .bob-die { --die: 84px; width: 84px; }
.pp-roll-die .pp-poly { width: 84px; height: 84px; }
.pp-roll-side {
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: 6px; flex: 1; min-width: 0;
}
.pp-roll-cta {
  display: block; width: 100%; margin: 0;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, #6fe08a 0%, #2faf55 100%);
  color: #0c2a14; font-weight: 900; font-size: .95rem;
  letter-spacing: .03em; text-transform: uppercase;
  box-shadow: 0 4px 0 #1d7a38, 0 8px 18px rgba(0,0,0,.35);
  text-align: center;
}
.pp-roll-hit.settled .pp-roll-cta {
  background: linear-gradient(180deg, #9aa3b8, #6b7388);
  color: #10141c; box-shadow: 0 3px 0 #4a5160;
  text-transform: none; letter-spacing: 0;
}
.pp-roll-dash { display: block; font-weight: 700; opacity: .85; }
.pp-roll-wait {
  margin: 0; opacity: .85; font-weight: 800; font-size: .88rem;
  text-align: center;
}
.pp-roll-prompt .pp-inv { justify-content: flex-start; margin: 10px 0 0; }
.pp-board-wrap {
  position: relative; width: min(100%, 1180px); margin: 0 auto;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(164, 86, 255, .46), transparent 42%),
    radial-gradient(ellipse at 16% 18%, rgba(255, 92, 196, .22), transparent 30%),
    linear-gradient(180deg, #16072a 0%, #170930 48%, #090416 100%);
  border-radius: 26px; overflow: hidden;
  border: 2px solid rgba(210, 180, 255, .5);
  box-shadow:
    inset 0 0 90px rgba(3, 3, 18, .7),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 18px 42px rgba(0,0,0,.56);
  --pp-pan-x: 0%; --pp-pan-y: 0%;
}
.pp-board-wrap.pp-board-art {
  --pp-art-scale: 1.12;
  --pp-art-focus-scale: 1.52;
  background:
    linear-gradient(180deg, rgba(10, 4, 22, .04), rgba(10, 4, 22, .08)),
    url("img/prize-party-board-art-large.jpg?v=20260814pp69") center / cover no-repeat,
    #12081f;
  border-width: 0;
  box-shadow:
    inset 0 0 42px rgba(3, 3, 18, .32),
    0 12px 30px rgba(0,0,0,.38);
}
.pp-board-art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.pp-board-art .pp-board-art-img,
.pp-board-art-ready .pp-board-art-img {
  opacity: 1;
}
.pp-board-art .pp-board-fx {
  display: none;
}
.pp-board-art .pp-decor > :not(defs):not(.pp-brand):not(.pp-route-guides),
.pp-board-art-ready .pp-decor > :not(defs):not(.pp-brand):not(.pp-route-guides) {
  display: none;
}
.pp-board-art-missing .pp-board-art-img {
  display: none;
}
.pp-board-fx {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 16% 18%, rgba(255,246,208,.4) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 78% 14%, rgba(180,230,255,.3) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 64% 78%, rgba(255,154,213,.25) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 28% 84%, rgba(255,224,138,.22) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 90% 48%, rgba(200,170,255,.22) 0 1.1px, transparent 2.2px);
  background-size: 48px 48px, 62px 62px, 40px 40px, 54px 54px, 70px 70px;
  opacity: .9;
}
.pp-board-layer {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  isolation: isolate;
}
.pp-board-wrap.pp-board-art:not(.pp-focus) .pp-board-layer {
  transform: scale(var(--pp-art-scale));
}
.pp-decor {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; max-width: none; max-height: none;
  aspect-ratio: auto;
  z-index: 0; pointer-events: none; overflow: visible;
}
.pp-track {
  opacity: .82;
  filter:
    drop-shadow(0 2.2px 0 rgba(28, 8, 46, .7))
    drop-shadow(0 9px 12px rgba(0,0,0,.48));
}
.pp-floor-grid {
  stroke: rgba(255,255,255,.1);
  stroke-width: .35;
  opacity: .45;
}
.pp-props {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.pp-brand {
  filter:
    drop-shadow(0 3px 0 rgba(42, 12, 70, .9))
    drop-shadow(0 12px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 18px rgba(255, 215, 96, .18));
}
.pp-route-guides {
  opacity: .76;
  pointer-events: none;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.42));
}
.pp-route-shadow,
.pp-route-band,
.pp-route-glint {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-route-shadow {
  stroke: rgba(7, 5, 18, .78);
  stroke-width: 7.2;
}
.pp-route-band {
  stroke: rgba(255, 220, 92, .76);
  stroke-width: 4.25;
}
.pp-route-glint {
  stroke: rgba(255, 255, 230, .36);
  stroke-width: .9;
  transform: translate(-.15px, -.55px);
}
.pp-route-pink .pp-route-band { stroke: rgba(255, 92, 186, .82); }
.pp-route-teal .pp-route-band { stroke: rgba(31, 214, 200, .86); }
.pp-route-purple .pp-route-band { stroke: rgba(154, 112, 255, .82); }
.pp-route-joint {
  fill: #fff4c4;
  stroke: rgba(45, 18, 74, .78);
  stroke-width: .48;
  opacity: .88;
}
.pp-svg-tiles {
  filter: drop-shadow(.35px 1.1px .1px rgba(255,255,255,.14))
    drop-shadow(0 5px 3px rgba(0,0,0,.34))
    drop-shadow(0 12px 12px rgba(0,0,0,.32));
}
.pp-svg-tile {
  transform-box: fill-box;
  transform-origin: center;
}
.pp-svg-tile-shadow { fill: rgba(5, 3, 14, .52); }
.pp-svg-tile-side { fill: #17111f; }
.pp-svg-tile-face {
  fill: url(#ppTileDark);
  stroke: rgba(235,225,255,.62);
  stroke-width: .42;
}
.pp-svg-tile-highlight {
  fill: none;
  stroke: rgba(255,255,255,.72);
  stroke-width: .55;
  stroke-linecap: round;
  opacity: .72;
}
.pp-svg-kind-coin .pp-svg-tile-face { fill: url(#ppTileCoin); stroke: #fff0a0; }
.pp-svg-kind-coin .pp-svg-tile-side { fill: #8f4f07; }
.pp-svg-kind-event .pp-svg-tile-face { fill: url(#ppTileEvent); stroke: #ead0ff; }
.pp-svg-kind-event .pp-svg-tile-side { fill: #3f167d; }
.pp-svg-kind-loss .pp-svg-tile-face { fill: url(#ppTileLoss); stroke: #ffc2b8; }
.pp-svg-kind-loss .pp-svg-tile-side { fill: #671016; }
.pp-svg-kind-store .pp-svg-tile-face { fill: url(#ppTileStore); stroke: #bbffd0; }
.pp-svg-kind-store .pp-svg-tile-side { fill: #064b2b; }
.pp-svg-kind-warp .pp-svg-tile-face { fill: url(#ppTileWarp); stroke: #bdefff; }
.pp-svg-kind-warp .pp-svg-tile-side { fill: #072f60; }
.pp-svg-kind-steal .pp-svg-tile-face { fill: url(#ppTileSteal); stroke: #ffc0d0; }
.pp-svg-kind-steal .pp-svg-tile-side { fill: #4a0c25; }
.pp-svg-kind-crystal .pp-svg-tile-face { fill: url(#ppTileCrystal); stroke: #fff4ff; }
.pp-svg-kind-crystal .pp-svg-tile-side { fill: #32177a; }
.pp-svg-kind-start .pp-svg-tile-face { fill: url(#ppTileStart); stroke: #e0d2ff; }
.pp-svg-kind-start .pp-svg-tile-side { fill: #251064; }
.pp-svg-kind-fork .pp-svg-tile-face,
.pp-svg-kind-plain .pp-svg-tile-face { fill: url(#ppTileDark); stroke: #7b879c; }
.pp-svg-kind-fork .pp-svg-tile-side,
.pp-svg-kind-plain .pp-svg-tile-side { fill: #090c16; }
.pp-svg-trail .pp-svg-tile-face {
  stroke: #fff4c4;
  stroke-width: .7;
}
.pp-svg-trail-me .pp-svg-tile-face {
  stroke: #b8f5c8;
  stroke-width: .85;
}
.pp-svg-tile-copy {
  font-family: Nunito, system-ui, sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.pp-svg-value {
  font-size: 3.55px;
  font-weight: 900;
  fill: #fff9e8;
  stroke: rgba(42,16,0,.58);
  stroke-width: .42;
  paint-order: stroke fill;
}
.pp-svg-value.pp-svg-dark {
  fill: #2b1703;
  stroke: rgba(255,246,208,.55);
  stroke-width: .24;
}
.pp-svg-label {
  font-size: 1.68px;
  font-weight: 900;
  letter-spacing: .02em;
  fill: #fff;
  stroke: rgba(27,10,52,.66);
  stroke-width: .34;
  paint-order: stroke fill;
}
.pp-svg-label-big {
  font-size: 2.12px;
}
.pp-svg-label-small {
  font-size: 1.43px;
}
.pp-svg-zcoin circle {
  fill: #f2b51f;
  stroke: #fff1a3;
  stroke-width: .25;
}
.pp-svg-zcoin text {
  font-size: 1.38px;
  font-weight: 900;
  fill: #744006;
  stroke: none;
}
.pp-svg-star {
  fill: #ffe760;
  stroke: #fff7c0;
  stroke-width: .32;
}
.pp-svg-cart,
.pp-svg-warp,
.pp-svg-arrow {
  fill: none;
  stroke: #f8fdff;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-svg-cart circle { fill: #f8fdff; stroke: none; }
.pp-svg-mask { fill: #24101e; }
.pp-svg-gem path:first-child {
  fill: #a575ff;
  stroke: #fff4ff;
  stroke-width: 1.15;
  stroke-linejoin: round;
}
.pp-svg-gem path:nth-child(2) {
  fill: #fff;
  opacity: .38;
  stroke: none;
}
.pp-svg-gem circle { fill: #261443; }
.pp-svg-has-crystal .pp-svg-tile-face {
  filter: drop-shadow(0 0 4px rgba(210,170,255,.75));
}
.pp-board-redraw .pp-node {
  opacity: 0;
}
.pp-piece-depth,
.pp-piece-rim,
.pp-piece,
.pp-piece-shine {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}
.pp-piece-depth {
  stroke: rgba(14, 7, 32, .92);
  stroke-width: 9.8;
  opacity: .78;
  transform: translate(.45px, 1.85px);
}
.pp-piece-rim {
  stroke: url(#ppTrackGold);
  stroke-width: 7.6;
  opacity: .72;
}
.pp-piece {
  stroke-width: 4.45;
  opacity: .5;
}
.pp-piece-shine {
  stroke: rgba(255, 250, 205, .62);
  stroke-width: .9;
  opacity: .26;
  transform: translate(-.2px, -.75px);
  mix-blend-mode: screen;
}
.pp-rim-pink { stroke: #f070b8; }
.pp-rim-teal { stroke: #3ad4bc; }
.pp-rim-purple { stroke: #9a7cff; }
.pp-spine,
.pp-piece-inner {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-spine-pink { stroke: #e070a8; }
.pp-spine-teal { stroke: #2bb8a4; }
.pp-spine-purple { stroke: #7a68e8; }
.pp-piece-coin { stroke: #f2c448; }
.pp-piece-loss { stroke: #e04030; }
.pp-piece-event { stroke: #8a52e0; }
.pp-piece-store { stroke: #28b868; }
.pp-piece-steal { stroke: #d03860; }
.pp-piece-warp { stroke: #2e82d0; }
.pp-piece-crystal { stroke: #8a58ff; }
.pp-piece-start { stroke: #6a40c8; }
.pp-piece-fork { stroke: #3c3a52; }
.pp-piece-plain { stroke: #2c243c; }
.pp-piece-rim.pp-piece-lit { stroke: #fff4c4; }
.pp-piece-rim.pp-piece-lit-me { stroke: #ffe27a; }
.pp-piece.pp-gem-on {
  animation: ppPieceGem 1.6s ease-in-out infinite;
}
@keyframes ppPieceGem {
  0%, 100% { stroke: #8a58ff; }
  50% { stroke: #e8d0ff; }
}
.pp-board-wrap.pp-focus .pp-board-layer {
  transform: translate(var(--pp-pan-x), var(--pp-pan-y)) scale(1.35);
}
.pp-board-wrap.pp-overview .pp-board-layer {
  transform: none;
}
.pp-board-wrap.pp-board-art.pp-focus .pp-board-layer {
  transform: translate(var(--pp-pan-x), var(--pp-pan-y)) scale(var(--pp-art-focus-scale));
}
.pp-board-wrap.pp-board-art.pp-overview .pp-board-layer {
  transform: scale(var(--pp-art-scale));
}
.pp-node {
  position: absolute;
  padding: 0;
  --pp-face: linear-gradient(145deg, #3d354e 0%, #272337 62%, #141520 100%);
  --pp-side: #0d0d18;
  --pp-rim: rgba(255,255,255,.34);
  --pp-glow: rgba(255,255,255,.12);
  background: var(--pp-face);
  border: 2px solid var(--pp-rim);
  border-radius: 11px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.56),
    inset 0 -6px 0 rgba(0,0,0,.24),
    0 2px 0 rgba(255,255,255,.08),
    0 7px 0 rgba(20, 8, 36, .68),
    0 13px 18px rgba(0,0,0,.38),
    0 0 20px var(--pp-glow);
  display: block;
  z-index: 12;
  overflow: visible;
  box-sizing: border-box;
  pointer-events: none;
  container-type: size;
  transform-origin: center center;
  transform: rotate(var(--pp-rot, 0deg));
}
.pp-node::before,
.pp-node::after {
  content: "";
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
}
.pp-node::before {
  inset: 13% 3% -24% 3%;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 20%),
    var(--pp-side);
  transform: translateY(11%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.38);
  z-index: -1;
}
.pp-node::after {
  inset: 5% 6% auto 6%;
  height: 34%;
  border-radius: 8px 8px 18px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.16) 46%, transparent);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48);
  opacity: .8;
  z-index: 1;
}
.pp-node.pp-inner { z-index: 11; }
.pp-node.pp-ring { z-index: 12; }
.pp-node.pp-shrine { z-index: 14; }
.pp-node.pp-trail {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.62),
    inset 0 -6px 0 rgba(0,0,0,.2),
    0 7px 0 rgba(20, 8, 36, .68),
    0 0 0 3px rgba(255,246,208,.5),
    0 0 26px rgba(255, 235, 120, .42);
}
.pp-node.pp-trail-me {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.62),
    inset 0 -6px 0 rgba(0,0,0,.2),
    0 7px 0 rgba(20, 8, 36, .68),
    0 0 0 3px rgba(184,245,200,.8),
    0 0 28px rgba(127, 240, 228, .62);
}
.pp-kind-coin {
  --pp-face: linear-gradient(145deg, #fff19a 0%, #ffc447 50%, #d88a18 100%);
  --pp-side: linear-gradient(180deg, #b86c10, #7a3b06);
  --pp-rim: #ffe682;
  --pp-glow: rgba(255, 214, 82, .32);
}
.pp-kind-event {
  --pp-face: linear-gradient(145deg, #bf65ff 0%, #7d39db 58%, #4b209a 100%);
  --pp-side: linear-gradient(180deg, #5e22aa, #2f115f);
  --pp-rim: #e0c6ff;
  --pp-glow: rgba(184, 110, 255, .38);
}
.pp-kind-loss {
  --pp-face: linear-gradient(145deg, #ff7968 0%, #dd332c 58%, #851b1f 100%);
  --pp-side: linear-gradient(180deg, #9a191d, #4d0d15);
  --pp-rim: #ffb5a8;
  --pp-glow: rgba(255, 82, 82, .32);
}
.pp-kind-store {
  --pp-face: linear-gradient(145deg, #52e78a 0%, #18a957 55%, #086a38 100%);
  --pp-side: linear-gradient(180deg, #0e7f42, #064426);
  --pp-rim: #baf8ce;
  --pp-glow: rgba(72, 235, 133, .34);
}
.pp-kind-steal {
  --pp-face: linear-gradient(145deg, #ff5e7f 0%, #c52555 58%, #661234 100%);
  --pp-side: linear-gradient(180deg, #7d1738, #33091c);
  --pp-rim: #ffb7ca;
  --pp-glow: rgba(255, 77, 128, .34);
}
.pp-kind-warp {
  --pp-face: linear-gradient(145deg, #42d6ff 0%, #1c86d9 58%, #0c3f7f 100%);
  --pp-side: linear-gradient(180deg, #0f5ca0, #082c58);
  --pp-rim: #b8efff;
  --pp-glow: rgba(55, 195, 255, .38);
}
.pp-kind-crystal {
  --pp-face: linear-gradient(145deg, #e7d6ff 0%, #a278ff 55%, #5e35c8 100%);
  --pp-side: linear-gradient(180deg, #6b42d8, #2e1968);
  --pp-rim: #fff4ff;
  --pp-glow: rgba(188, 120, 255, .42);
}
.pp-start {
  --pp-face: linear-gradient(145deg, #9b78ff 0%, #6a42d8 56%, #371a8a 100%);
  --pp-side: linear-gradient(180deg, #4824a0, #24104c);
  --pp-rim: #ddd0ff;
  --pp-glow: rgba(150, 116, 255, .35);
}
.pp-fork {
  --pp-face: linear-gradient(145deg, #39465c 0%, #22293a 58%, #111521 100%);
  --pp-side: linear-gradient(180deg, #171c2c, #090b14);
  --pp-rim: #657891;
  --pp-glow: rgba(76, 177, 255, .22);
}
.pp-node-face {
  position: absolute;
  inset: 3% 6% 15% 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  padding: 1% 2%;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
  transform-origin: center;
}
.pp-mark {
  width: 48%;
  height: 48%;
  max-width: 54%;
  max-height: 50%;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
.pp-mark-coin { width: 36%; height: 36%; max-width: 40%; max-height: 38%; flex-shrink: 0; margin-top: -3%; }
.pp-mark-fork { width: 78%; height: 78%; max-width: 84%; max-height: 84%; }
.pp-mark-mystery { width: 70%; height: 70%; }
.pp-mark-plain { width: 28%; height: 28%; }
.pp-mark-marble { width: 50%; height: 50%; }
.pp-kind-crystal .pp-node-face { padding: 0; inset: 4% 5% 14%; }
.pp-tag-crystal {
  width: 100%;
  height: 100%;
  max-height: none;
}
.pp-val-svg {
  display: block;
  width: 100%;
  height: 60%;
  max-height: 62%;
  margin-bottom: -5%;
  overflow: hidden;
  pointer-events: none;
  flex-shrink: 1;
}
.pp-val-svg text {
  fill: #fff;
  paint-order: stroke fill;
  stroke: rgba(0,0,0,.35);
  stroke-width: .55;
}
.pp-kind-coin .pp-val-svg text {
  fill: #2c1704;
  stroke: rgba(255,246,208,.5);
  stroke-width: .4;
}
.pp-kind-loss .pp-val-svg text { fill: #fff8f0; }
.pp-tag-svg {
  display: block;
  width: 100%;
  height: 38%;
  max-height: 42%;
  overflow: hidden;
  pointer-events: none;
  flex-shrink: 0;
}
.pp-tag-2 { height: 46%; max-height: 50%; }
.pp-kind-crystal .pp-tag-svg { width: 100%; height: 100%; max-height: none; }
.pp-start .pp-tag-svg {
  width: 96%;
  height: 78%;
  max-height: 82%;
}
.pp-tag-svg text {
  fill: #fff;
  paint-order: stroke fill;
  stroke: rgba(0,0,0,.52);
  stroke-width: .58;
}
.pp-node-val,
.pp-node-tag { display: none; }
.pp-node-caption { display: none; }
.pp-node-label { display: none; }
.pp-node-ic { font-size: .7rem; color: #fff; pointer-events: none; }
.pp-svg-tiles { display: none; }
.pp-board-redraw .pp-node { opacity: 1; }
.pp-track {
  opacity: 1;
  filter:
    drop-shadow(0 2px 0 rgba(45, 18, 74, .72))
    drop-shadow(0 7px 10px rgba(0,0,0,.42));
}
.pp-piece-depth {
  stroke-width: 9.4;
  opacity: .86;
  transform: translate(.35px, 1.45px);
}
.pp-piece-rim {
  stroke-width: 8.75;
  opacity: 1;
}
.pp-piece {
  stroke-width: 6.55;
  opacity: 1;
}
.pp-piece-shine {
  opacity: .42;
}
.pp-node {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 8;
  overflow: hidden;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.48));
}
.pp-node::before,
.pp-node::after {
  content: none;
  display: none;
}
.pp-node.pp-inner { z-index: 7; }
.pp-node.pp-ring { z-index: 8; }
.pp-node.pp-shrine { z-index: 10; }
.pp-node.pp-trail { filter: drop-shadow(0 0 5px rgba(255, 235, 120, .8)); }
.pp-node.pp-trail-me { filter: drop-shadow(0 0 6px rgba(127, 240, 228, .9)); }
.pp-node-face {
  inset: 0;
  padding: 2% 3%;
  z-index: 2;
}
.pp-mark {
  width: 44%;
  height: 44%;
  max-width: 50%;
  max-height: 46%;
}
.pp-mark-coin {
  width: 34%;
  height: 34%;
  max-width: 38%;
  max-height: 36%;
}
.pp-val-svg {
  width: 96%;
  height: 56%;
  max-height: 58%;
  margin-bottom: -3%;
}
.pp-tag-svg {
  width: 98%;
  height: 40%;
  max-height: 44%;
}
.pp-pawns-layer {
  position: absolute; inset: 0;
  z-index: 200;
  pointer-events: none;
}
.pp-pawn-spot {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
}
.pp-stack {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: flex; gap: 2px; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  z-index: 3; pointer-events: auto;
}
.pp-pawn { display: block; width: 20px; height: 20px; border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.45); overflow: hidden; }
.pp-pawn .avatar { width: 20px; height: 20px; }
.pp-pawn.me { box-shadow: 0 0 0 3px #b8f5c8, 0 0 0 5px #e8b84a; }
.pp-pawn-gold { box-shadow: 0 0 0 2px #e8b84a; }
.pp-pawn-violet { box-shadow: 0 0 0 2px #8b6cff; }
.pp-stack-more {
  font-size: .7rem; font-weight: 800; background: #fff; color: #1a1430;
  border-radius: 999px; padding: 1px 5px;
}
.pp-stack.open { flex-wrap: wrap; width: 88px; background: rgba(20,16,40,.9);
  padding: 4px; border-radius: 10px; }
.pp-phone-board {
  position: relative;
  width: calc(100% + 32px);
  max-width: 100vw;
  margin: 0 -16px 6px;
  overflow: hidden;
}
.pp-phone-board .pp-board-wrap.pp-board-art {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}
.pp-stage > .pp-board-wrap.pp-board-art {
  width: min(100%, 1500px);
}
.pp-phone.pp-rolling .pp-phone-board {
  max-height: min(38vh, 300px); overflow: hidden;
}
.pp-phone.pp-rolling .pp-board-wrap { max-height: min(42vh, 340px); }
.pp-mini-btn {
  position: absolute; right: 8px; top: 8px; z-index: 30;
  border: 0; border-radius: 999px; padding: 6px 10px;
  font-weight: 800; font-size: .75rem;
  background: rgba(12, 18, 28, .82); color: #e8fff8;
  border: 1px solid rgba(180, 230, 210, .28);
  display: inline-flex; align-items: center; gap: 4px;
}
.pp-zoom-ico { font-size: .95rem; line-height: 1; }
.pp-prompt {
  margin: 8px 12px 16px; padding: 12px; border-radius: 16px;
  background: rgba(255,255,255,.1);
}
.pp-choices {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
}
.pp-choices .btn {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}
.pp-steal-list, .pp-store-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0;
}
.pp-store-head { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pp-store-note {
  margin: -4px 0 8px; text-align: center;
  font-size: .82rem; font-weight: 700; opacity: .75;
}
.pp-store-receipt {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 0 0 10px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(80,210,130,.35), rgba(40,120,70,.28));
  border: 2px solid rgba(180,255,210,.55);
  box-shadow: 0 0 22px rgba(80,200,120,.35);
  animation: ppStoreReceipt .5s ease-out both;
}
.pp-store-receipt-k {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .85; font-weight: 800;
}
.pp-store-receipt b { font-size: 1.35rem; color: #e8ffe8; }
@keyframes ppStoreReceipt {
  0% { transform: scale(.85); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.pp-store-bag {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 12px;
  background: rgba(0,0,0,.18);
}
.pp-store-bag-k {
  display: block; font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .7; font-weight: 800; margin-bottom: 4px;
}
.pp-store-bag .pp-inv { margin: 0; }
.pp-store-grid .pp-buy, .pp-item-btn, .pp-steal-btn {
  position: relative;
  flex: 1 1 140px; text-align: left; border-radius: 12px; padding: 10px 12px;
  border: 0; background: rgba(255,255,255,.14); color: inherit; font-weight: 700;
  overflow: hidden;
}
.pp-buy.dim { opacity: .45; }
.pp-buy.pp-buying {
  outline: 2px solid rgba(255,246,208,.7);
  background: rgba(232,184,74,.28);
}
.pp-buy.just-bought {
  background: linear-gradient(160deg, rgba(90,220,140,.45), rgba(40,130,80,.35));
  outline: 2px solid #b8ffd0;
  box-shadow: 0 0 16px rgba(80,200,120,.4);
  animation: ppBuyPop .45s ease-out both;
}
@keyframes ppBuyPop {
  0% { transform: scale(.94); }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.pp-buy-got {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,40,28,.55); font-size: 1.15rem; font-weight: 900;
  letter-spacing: .06em; color: #e8ffe8;
  animation: ppBuyGot .4s ease-out both;
}
@keyframes ppBuyGot {
  0% { opacity: 0; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}
.pp-buy-price {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 2px; font-weight: 800; color: #ffe08a;
}
.pp-ico.pp-buy-coin { width: .95rem; height: .95rem; }
.pp-buy small, .pp-steal-btn small { display: block; font-weight: 500; opacity: .75; }
.pp-inv { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px 12px; }
.pp-item-chip, .pp-item-btn {
  border-radius: 999px; padding: 6px 10px; font-size: .85rem; font-weight: 700;
  background: rgba(232,184,74,.2); border: 0; color: inherit;
}
.pp-item-chip.pp-item-new, .pp-item-btn.pp-item-new {
  background: rgba(90,220,140,.4);
  box-shadow: 0 0 0 2px #b8ffd0, 0 0 14px rgba(80,200,120,.45);
  animation: ppItemNew 1.1s ease-in-out 2;
}
@keyframes ppItemNew {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.pp-inv-empty { margin: 0 12px 12px; }
.pp-champs { text-align: center; padding: 8px; }
.pp-champs-title { font-size: 1.3rem; font-weight: 900; }
.pp-champs-gold .pp-champs-title { color: #e8b84a; }
.pp-champs-violet .pp-champs-title { color: #b9a6ff; }
.pp-champs-roster { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.pp-champs-member { display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-weight: 700; font-size: .85rem; }

@media (max-width: 520px) {
  .pp-pawn, .pp-pawn .avatar { width: 18px; height: 18px; }
  .pp-board-wrap { aspect-ratio: 3 / 2; border-radius: 18px; }
  .pp-board-wrap.pp-board-art {
    --pp-art-scale: 1.15;
    --pp-art-focus-scale: 1.58;
  }
  .pp-phone-board .pp-board-wrap.pp-board-art { border-radius: 0; }
  .pp-node {
    border-width: 1.5px;
    border-radius: 8px;
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,.55),
      inset 0 -4px 0 rgba(0,0,0,.23),
      0 5px 0 rgba(20, 8, 36, .68),
      0 9px 13px rgba(0,0,0,.34),
      0 0 14px var(--pp-glow);
  }
  .pp-node-face { inset: 3% 6% 15%; }
  .pp-phone-dock { grid-template-columns: 1.2fr 1fr; }
  .pp-top-k { font-size: .52rem; }
  .pp-top-stat-txt b { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-piece.pp-gem-on { animation: none; }
  .pp-banner.pp-good,
  .pp-banner.pp-crystal,
  .pp-store-receipt,
  .pp-buy.just-bought,
  .pp-buy-got,
  .pp-item-chip.pp-item-new,
  .pp-item-btn.pp-item-new { animation: none; }
}