/* Every game gets a world. Scoped by .world-<type> on the room content
   (added at mount) and .door-<type> on home cards. Shell stays brutalist;
   these skins own fonts, color, and motifs per the casting board. */

/* ============ HOME DOORS ============ */
.game-card .game-title { font-size: 1.9rem; overflow-wrap: break-word; }
.door-celebrity { background: var(--pink); }
.door-celebrity .game-title { font-family: 'Archivo Black'; -webkit-text-stroke: 1px var(--ink); }
.door-things { background: var(--orange); }
.door-things .game-title { font-family: 'Anton', sans-serif; letter-spacing: .01em; }
.door-things .game-title::after { content: '?!'; color: var(--paper); }
.door-score { background: #060f08; color: #a3ff3d; border-color: var(--ink); }
.door-score .game-title { font-family: 'VT323', monospace; font-size: 2.4rem; text-shadow: 0 0 12px rgba(163,255,61,.7); letter-spacing: .04em; }
.door-score .game-desc { color: #d8ffd0; }
.door-trivia { background: #0a1230; color: #f5c542; }
.door-trivia .game-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-style: italic; transform: skewX(-5deg); }
.door-trivia .game-desc { color: #cdd6f5; }
.door-werewolf { background: #0e1420; color: #b3202a; position: relative; overflow: hidden; }
.door-werewolf .game-title { font-family: 'Pirata One', serif; font-size: 2.2rem; text-transform: none; }
.door-werewolf .game-desc { color: #9aa5bd; }
.door-werewolf::after {
  content: ''; position: absolute; top: 12px; right: 14px; width: 34px; height: 34px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7dd, #f2ead2 60%, #d9cfa8);
  box-shadow: 0 0 18px rgba(242,234,210,.5); border: none;
}
.door-doodle {
  background: #fbf7ee;
  background-image: linear-gradient(rgba(58,111,216,.18) 1px, transparent 1px);
  background-size: 100% 26px;
}
.door-doodle .game-title { font-family: 'Gochi Hand', cursive; color: #e0421f; text-transform: none; font-size: 2.1rem; }
.door-doodle .game-desc { font-family: 'Caveat', cursive; font-size: 1rem; color: #555; }
.door-charades { background: #141310; color: #f5f0e6; }
.door-charades .game-title { font-family: 'Limelight', serif; text-transform: none; font-size: 1.9rem; }
.door-charades .game-desc { color: #b9b2a2; font-family: Georgia, serif; font-style: italic; }
.door-ttal { background: #e8dfc8; color: #2e2718; }
.door-ttal .game-title { font-family: 'Special Elite', monospace; text-transform: uppercase; font-size: 1.35rem; }
.door-ttal .game-desc { font-family: 'Special Elite', monospace; font-size: .72rem; }
.door-telepathy { background: #1a0f2e; color: #fff; }
.door-telepathy .game-title {
  font-family: 'Monoton', cursive; text-transform: uppercase; font-size: 1.5rem;
  background: linear-gradient(90deg, #ff2d95, #8b4dff, #23e6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.door-telepathy .game-desc { color: #b9a6e8; font-family: 'Chakra Petch', sans-serif; }
.door-scatter { background: #f5efdd; color: #1c4587; }
.door-scatter .game-title { font-family: 'Rubik Mono One', monospace; font-size: 1.2rem; }
.door-scatter .game-desc { font-family: 'Special Elite', monospace; color: #4a4433; font-size: .74rem; }
.door-fib {
  background: #f3ede1; color: #1a1712;
  border-top: 3px solid var(--ink); box-shadow: var(--shadow-card);
}
.door-fib .game-title { font-family: 'Archivo Black'; font-size: 1.5rem; border-top: 4px double var(--ink); border-bottom: 4px double var(--ink); padding: 4px 0; }
.door-fib .game-desc { font-family: Georgia, serif; font-style: italic; }
.door-hunt { background: #fffdf6; color: #2b2620; position: relative; overflow: hidden; }
.door-hunt::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: linear-gradient(90deg,
    #e4572e 0 20%, #f5a623 20% 40%, #f2d43d 40% 60%, #17a398 60% 80%, #2f6bff 80% 100%);
}
.door-hunt .game-title { font-family: 'Bowlby One', cursive; color: #e4572e; padding-top: 6px; }
.door-hunt .game-desc { color: #8a8272; font-weight: 700; }

/* ============ CELEBRITY — neo-brutalist pink ============ */
.world-celebrity { background: var(--pink); background-image: var(--dots); background-size: 22px 22px; margin: -14px -16px; padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); min-height: 100dvh; }
.world-celebrity .topbar h1 { color: var(--ink); }
.world-celebrity .score-team { box-shadow: var(--shadow-row); }
.world-celebrity .score-team.active { background: var(--ink) !important; color: var(--lime); box-shadow: 4px 4px 0 var(--lime); }
.world-celebrity .name-card { position: relative; font-family: Georgia, serif; }
.world-celebrity .heard-sticker, .world-charades .heard-sticker {
  position: absolute; top: -12px; left: 10px; transform: rotate(-4deg);
  background: var(--lime); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--display); font-size: .62rem; padding: 2px 10px; text-transform: uppercase;
}
.world-celebrity .card, .world-celebrity .timer-panel { box-shadow: var(--shadow-card); }
.world-celebrity .up-next { border-color: var(--ink) !important; }
.world-celebrity .hint { color: rgba(0,0,0,.65); }
.world-things .hint { color: rgba(0,0,0,.6); }

/* ============ THINGS — brutalist sticker orange ============ */
.world-things { background: var(--paper); }
.world-things .theme-banner { background: var(--orange); position: relative; }
.world-things .theme-text { font-family: 'Anton', sans-serif; letter-spacing: .01em; font-size: 1.5rem; }
.world-things .badge-round { transform: rotate(3deg); }
.world-things .answer-num { background: var(--orange); color: var(--ink); border-right: 3px solid var(--ink); min-width: 34px; height: 34px; }
.world-things .answer-card.picked { border-color: var(--orange); box-shadow: 4px 4px 0 var(--orange); background: #fff; }
.world-things .target-zone { border: 3px dashed var(--ink); padding: 12px; }

/* ============ SCORE — arcade neon ============ */
.world-score {
  background: #060f08; color: #a3ff3d; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  font-family: 'VT323', monospace;
}
/* Standalone score screen: the world div carries its own bottom padding, so
   drop .screen's — otherwise a paper band shows below the dark background. */
.score-screen { padding-bottom: 0; }
.score-screen .world-score { margin-bottom: 0; }
.world-score .lead { color: #d8ffd0; }
.world-score h1, .world-score h2, .world-score h3 { font-family: 'VT323', monospace; color: #a3ff3d; text-shadow: 0 0 10px rgba(163,255,61,.6); letter-spacing: .04em; text-transform: uppercase; }
.world-score .topbar h1 { font-size: 1.6rem; }
.world-score .card, .world-score .score-player-card, .world-score .score-round-bar {
  background: #0a1a0e; border: 2px solid #a3ff3d; box-shadow: 0 0 14px rgba(163,255,61,.25);
  color: #d8ffd0;
}
.world-score .score-name { font-family: 'VT323', monospace; font-size: 1.4rem; color: #fff; }
.world-score .score-total { color: #a3ff3d; font-family: 'VT323', monospace; font-size: 2.2rem; text-shadow: 0 0 10px rgba(163,255,61,.6); }
.world-score .score-rank, .world-score .score-round-pts, .world-score .hint { color: #6fae62; }
.world-score .score-btn { border: 2px solid #a3ff3d; background: #0a1a0e; color: #a3ff3d; box-shadow: none; font-family: 'VT323', monospace; font-size: 1.8rem; }
.world-score .score-btn.plus { background: #a3ff3d; color: #060f08; box-shadow: 0 0 14px rgba(163,255,61,.5); }
.world-score .input { background: #0a1a0e; border: 2px solid #2c5c33; color: #d8ffd0; box-shadow: none; font-family: 'VT323', monospace; font-size: 1.2rem; }
.world-score .btn { font-family: 'VT323', monospace; font-size: 1.1rem; }
.world-score .btn:not(.btn-primary):not(.score-btn) { background: #0a1a0e; color: #d8ffd0; border: 2px solid #2c5c33; box-shadow: none; }
.world-score .btn-primary { background: #a3ff3d; color: #060f08; border-color: #a3ff3d; box-shadow: 0 0 18px rgba(163,255,61,.5); }
.world-score .badge { background: #ffd60a; border-color: #060f08; box-shadow: none; transform: none; font-family: 'VT323', monospace; }
.world-score .claim-chip .badge { color: #060f08; }
.world-score .name-reveal-row { border-bottom-color: #1c3a22; }
.world-score .winner-card { background: #0a1a0e; border-color: #a3ff3d; }
.world-score .winner-card::before { background: #ffd60a; border-color: #060f08; }
.world-score .rounds-table th, .world-score .rounds-table td { border-bottom-color: #1c3a22; }
.world-score .big-timer { color: #a3ff3d; font-family: 'VT323', monospace; text-shadow: 0 0 14px rgba(163,255,61,.6); }

/* ============ TRIVIA — primetime broadcast ============ */
.world-trivia {
  background: #0a1230; background-image: radial-gradient(ellipse at 50% 0%, #16224d 0%, #0a1230 60%);
  color: #fff; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
}
.world-trivia .topbar h1 { color: #f5c542; font-family: 'Big Shoulders Display'; font-weight: 900; font-style: italic; transform: skewX(-4deg); font-size: 1.5rem; }
.world-trivia .btn-back { background: #131c3f; color: #fff; border-color: #2e5cff; box-shadow: 3px 3px 0 #2e5cff; }
.world-trivia .badge-round { background: #f5c542; color: #0a1230; border-color: #0a1230; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: none; transform: none; padding: 3px 14px; }
.world-trivia .trivia-question { background: transparent; border: none; box-shadow: none; }
.world-trivia .trivia-question-text {
  font-family: 'Big Shoulders Display'; font-weight: 900; font-style: italic;
  font-size: 2rem; transform: skewX(-4deg); color: #fff; text-transform: uppercase;
  text-shadow: 3px 3px 0 rgba(0,0,0,.4);
}
.world-trivia .trivia-question .hint { color: #f5c542; text-transform: uppercase; letter-spacing: .15em; }
.world-trivia .trivia-choice {
  background: #131c3f; border: none; color: #fff; box-shadow: none;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  font-family: 'Space Grotesk'; padding-left: 20px;
}
.world-trivia .trivia-choice.picked { background: #2e5cff; outline: none; }
.world-trivia .trivia-choice.correct { background: #f5c542; color: #0a1230; }
.world-trivia .trivia-choice.wrong-pick { background: #43162a; color: #ff9db3; }
.world-trivia .trivia-choice-letter { background: transparent !important; color: #f5c542; font-family: 'Big Shoulders Display'; font-weight: 900; font-size: 1.3rem; }
.world-trivia .trivia-choice.correct .trivia-choice-letter { color: #0a1230; }
.world-trivia .timer-panel { background: #131c3f; border: none; box-shadow: none; }
.world-trivia .big-timer { color: #fff; font-size: 1.6rem; text-align: left; }
.world-trivia .timer-bar-track { border: none; background: #0a1230; height: 12px; border-radius: 999px; overflow: hidden; }
.world-trivia .timer-bar-fill { background: linear-gradient(90deg, #2e5cff, #f5c542); }
.world-trivia .card { background: #131c3f; border: none; box-shadow: none; color: #fff; }
.world-trivia .card h3 { color: #8fa2e8; letter-spacing: .14em; }
.world-trivia .name-reveal-row { border-bottom-color: #23306183; }
.world-trivia .hint { color: #8fa2e8; }
.world-trivia .chip { background: #0a1230; color: #fff; border-color: #2e5cff; box-shadow: none; }
.world-trivia .chip-done { background: #2e5cff; }
.world-trivia .chip-waiting { background: #131c3f; color: #5c6ca8; border-color: #29335c; }
.world-trivia .btn-primary { background: #2e5cff; color: #fff; border-color: #0a1230; box-shadow: 0 6px 0 #16224d; font-family: 'Big Shoulders Display'; font-weight: 900; font-size: 1.2rem; letter-spacing: .06em; }
.world-trivia .winner-card { background: #131c3f; border-color: #f5c542; color: #fff; }
.world-trivia .winner-card::before { background: #f5c542; color: #0a1230; border-color: #0a1230; }
.world-trivia .winner-card h2 { color: #f5c542; font-family: 'Big Shoulders Display'; font-weight: 900; font-style: italic; font-size: 2rem; }

/* ============ WEREWOLF — midnight woodcut ============ */
.world-werewolf {
  background: #0e1420;
  background-image: radial-gradient(circle at 82% 6%, rgba(242,234,210,.16) 0 42px, transparent 46px),
    linear-gradient(180deg, #0e1420 0%, #131b2b 100%);
  color: #f2ead2; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  font-family: Georgia, 'Times New Roman', serif;
}
.world-werewolf .topbar h1 { font-family: 'Pirata One', serif; color: #b3202a; font-size: 1.7rem; text-transform: none; letter-spacing: .02em; }
.world-werewolf .btn-back { background: #0e1420; color: #f2ead2; border-color: #f2ead2; box-shadow: none; }
.world-werewolf .badge-round { background: transparent; color: #f2ead2; border: 1px solid #6b6250; font-family: Georgia, serif; box-shadow: none; transform: none; letter-spacing: .2em; }
.world-werewolf .card { background: #131b2b; border: 1px solid #2a344d; box-shadow: none; color: #f2ead2; }
.world-werewolf .card h2, .world-werewolf .card h3 { color: #f2ead2; font-family: Georgia, serif; letter-spacing: .16em; }
.world-werewolf .night-card { background: #0a0f18; border: 1px solid #2a344d; }
.world-werewolf .night-card h2 { font-family: 'Pirata One', serif; font-size: 1.6rem; letter-spacing: .04em; }
.world-werewolf .night-card .big-emoji { display: none; }
.world-werewolf .wolf-card { background: #1a0d10; border: 2px solid #b3202a; }
.world-werewolf .wolf-card h2 { color: #b3202a; font-family: 'Pirata One', serif; font-size: 1.7rem; }
.world-werewolf .role-card { background: #131b2b; border: 1px solid #2a344d; }
.world-werewolf .role-details strong { font-family: 'Pirata One', serif; color: #b3202a; font-size: 1.4rem; }
.world-werewolf .target-btn { background: #131b2b; color: #f2ead2; border: 1px solid #3a4664; box-shadow: none; font-family: Georgia, serif; text-transform: none; font-weight: 700; }
.world-werewolf .target-btn.target-picked { border: 2px solid #b3202a; color: #b3202a; background: #1a0d10; position: relative; }
.world-werewolf .target-btn.target-picked::after {
  content: 'MARKED'; position: absolute; top: -9px; right: 8px; background: #b3202a; color: #f2ead2;
  font-family: var(--ui); font-size: .55rem; font-weight: 700; letter-spacing: .12em; padding: 1px 8px;
  border-radius: 3px;
}
.world-werewolf .btn { box-shadow: none; }
.world-werewolf .btn-primary { background: #b3202a; color: #f2ead2; border-color: #7a1219; font-family: Georgia, serif; letter-spacing: .12em; }
.world-werewolf .btn-secondary { background: #f2ead2; color: #1a1712; border-color: #f2ead2; }
.world-werewolf .btn-small, .world-werewolf .btn-ghost { background: transparent; color: #f2ead2; border-color: #6b6250; }
.world-werewolf .hint { color: #8a90a3; font-style: italic; }
.world-werewolf .chip { background: #131b2b; border: 1px solid #3a4664; color: #f2ead2; box-shadow: none; }
.world-werewolf .chip-dead { opacity: .45; text-decoration: line-through; }
.world-werewolf .ghost-card { background: #131b2b; color: #8a90a3; border: 1px dashed #3a4664; }
.world-werewolf .name-reveal-row { border-bottom-color: #2a344d; }
.world-werewolf .winner-card { background: #131b2b; border: 2px solid #b3202a; transform: none; box-shadow: none; }
.world-werewolf .winner-card::before { background: #b3202a; color: #f2ead2; border-color: #7a1219; }
.world-werewolf .winner-card h2 { font-family: 'Pirata One', serif; font-size: 1.8rem; }

/* ============ DOODLEPHONE — sketchbook ============ */
.world-doodle {
  background: #fbf7ee;
  background-image: linear-gradient(rgba(58,111,216,.14) 1px, transparent 1px);
  background-size: 100% 26px;
  margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
}
.world-doodle .topbar h1 { font-family: 'Gochi Hand', cursive; color: #e0421f; text-transform: none; font-size: 1.6rem; }
.world-doodle .card, .world-doodle .answer-card {
  border: 2px solid #2b2437; border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  box-shadow: 2px 3px 0 rgba(43,36,55,.25); background: #fff;
}
.world-doodle h2 { font-family: 'Gochi Hand', cursive; color: #e0421f; text-transform: none; font-size: 1.5rem; }
.world-doodle .hint { font-family: 'Caveat', cursive; font-size: 1.05rem; color: #666; }
.world-doodle .theme-banner {
  background: #fdf6c7; color: #2b2437; border: none; box-shadow: 2px 3px 6px rgba(0,0,0,.12);
  transform: rotate(-.5deg); position: relative;
}
.world-doodle .theme-banner::before {
  content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(1deg);
  width: 90px; height: 20px; background: rgba(222,210,170,.7);
}
.world-doodle .theme-text { font-family: 'Gochi Hand', cursive; text-transform: none; font-size: 1.5rem; }
.world-doodle .doodle-canvas { border: 2px solid #2b2437; border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; box-shadow: 2px 3px 0 rgba(43,36,55,.25); }
.world-doodle .btn { border-radius: 12px 4px 14px 4px / 4px 14px 4px 12px; box-shadow: 2px 2px 0 #2b2437; border-width: 2px; text-transform: lowercase; font-family: 'Gochi Hand', cursive; font-size: 1.15rem; }
.world-doodle .btn-primary { background: #e0421f; color: #fff; }
.world-doodle .doodle-phrase { font-family: 'Gochi Hand', cursive; font-size: 1.4rem; }
.world-doodle .doodle-entry .hint::before { content: ''; }
.world-doodle .doodle-entry { position: relative; }
.world-doodle .doodle-img { border: 2px solid #2b2437; border-radius: 18px 255px 18px 225px / 225px 18px 255px 18px; }
.world-doodle .input { border-width: 2px; border-radius: 10px 3px 12px 3px / 3px 12px 3px 10px; box-shadow: none; font-family: 'Caveat', cursive; font-size: 1.25rem; }
.world-doodle .winner-card { transform: rotate(-.8deg); box-shadow: 3px 4px 0 rgba(43,36,55,.3); }

/* ============ CHARADES — silent film ============ */
.world-charades {
  background: #141310; color: #f5f0e6; margin: -14px -16px; min-height: 100dvh;
  /* extra side padding keeps content clear of the fixed 14px film-strip edges */
  padding: 14px 30px calc(96px + env(safe-area-inset-bottom));
  font-family: Georgia, 'Times New Roman', serif; position: relative;
}
.world-charades::before, .world-charades::after {
  content: ''; position: fixed; top: 0; bottom: 0; width: 14px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #141310 4px, transparent 5px), #f5f0e6;
  background-size: 14px 22px; opacity: .85;
}
.world-charades::before { left: 0; }
.world-charades::after { right: 0; }
.world-charades .topbar h1 { font-family: 'Limelight', serif; text-transform: none; color: #f5f0e6; }
.world-charades .btn-back { background: transparent; color: #f5f0e6; border-color: #f5f0e6; box-shadow: none; }
.world-charades .badge-round { background: transparent; border: 1px solid #6b6250; color: #f5f0e6; font-family: Georgia, serif; box-shadow: none; transform: none; letter-spacing: .18em; }
.world-charades .name-card {
  background: #141310; color: #f5f0e6; border: 3px double #f5f0e6; outline: 1px solid #f5f0e6; outline-offset: 6px;
  box-shadow: none; font-family: Georgia, serif; position: relative; margin: 22px 4px;
}
.world-charades .name-card::before {
  content: '— ACT IT OUT —'; position: absolute; top: 14px; left: 0; right: 0;
  font-size: .65rem; letter-spacing: .3em; color: #b9b2a2; font-family: var(--ui); font-weight: 700;
}
.world-charades .heard-sticker { background: #f5f0e6; color: #141310; border-color: #141310; }
.world-charades .card { background: #1d1b16; border: 1px solid #6b6250; box-shadow: none; color: #f5f0e6; }
.world-charades .card h2, .world-charades .card h3 { color: #b9b2a2; font-family: Georgia, serif; letter-spacing: .2em; font-style: italic; }
.world-charades .score-team { border: 2px solid #f5f0e6; background: #141310 !important; color: #f5f0e6; box-shadow: none; }
.world-charades .score-team.active { background: #f5f0e6 !important; color: #141310; }
.world-charades .score-team-points { font-family: Georgia, serif; }
.world-charades .hint { color: #b9b2a2; font-style: italic; font-family: Georgia, serif; }
.world-charades .btn { box-shadow: none; font-family: Georgia, serif; }
.world-charades .btn-pass { background: transparent; color: #f5f0e6; border: 2px solid #6b6250; }
.world-charades .btn-heard { background: #f5f0e6; color: #141310; border-color: #f5f0e6; }
.world-charades .btn-primary, .world-charades .btn-giant { background: #f5f0e6; color: #141310; border-color: #f5f0e6; }
.world-charades .btn-secondary, .world-charades .btn-ghost, .world-charades .btn-small { background: transparent; color: #f5f0e6; border-color: #6b6250; }
.world-charades .big-timer { color: #f5f0e6; font-family: Georgia, serif; }
.world-charades .timer-panel { background: transparent; border: none; box-shadow: none; text-align: center; }
.world-charades .timer-bar-track { border-color: #f5f0e6; background: #141310; }
.world-charades .timer-bar-fill { background: repeating-linear-gradient(-45deg, #f5f0e6 0 10px, #141310 10px 12px); }
.world-charades .up-next { background: #141310; border: 2px double #f5f0e6 !important; color: #f5f0e6; }
.world-charades .up-next-name { font-family: 'Limelight', serif; text-transform: none; }
.world-charades .turn-strip { background: #1d1b16 !important; border: 1px solid #6b6250; box-shadow: none; }
.world-charades .winner-card { background: #1d1b16; border: 3px double #f5f0e6; transform: none; box-shadow: none; }
.world-charades .winner-card::before { background: #f5f0e6; color: #141310; border-color: #141310; }
.world-charades .winner-card h2 { font-family: 'Limelight', serif; text-transform: none; }
.world-charades .last-turn p { font-style: italic; }

/* ============ TWO TRUTHS — case-file noir ============ */
.world-ttal {
  background: #d8cba6; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  font-family: 'Special Elite', monospace; color: #2e2718;
}
.world-ttal .topbar h1 { font-family: 'Special Elite', monospace; font-size: 1.1rem; letter-spacing: .04em; }
.world-ttal .card { background: #e8dfc8; border: 2px solid #2e2718; box-shadow: 4px 4px 0 rgba(46,39,24,.35); }
.world-ttal h2, .world-ttal h3 { font-family: 'Special Elite', monospace; }
.world-ttal .spotlight-card h2 { font-size: 1.5rem; }
.world-ttal .answers-list { counter-reset: exhibit; }
.world-ttal .answer-card {
  background: #f7f2e2; border: 2px solid #2e2718; box-shadow: 3px 3px 0 rgba(46,39,24,.3);
  font-family: 'Special Elite', monospace; flex-wrap: wrap; position: relative; padding-top: 24px;
}
.world-ttal .answer-card::before {
  counter-increment: exhibit; content: 'EXHIBIT ' counter(exhibit, upper-alpha);
  position: absolute; top: 5px; left: 14px; font-size: .6rem; letter-spacing: .22em; color: #8a7d52;
}
.world-ttal .answer-card.picked { border: 2px solid #b3202a; background: #fdf3ee; box-shadow: 3px 3px 0 rgba(179,32,42,.4); }
.world-ttal .answer-card.picked::after {
  content: 'THE LIE?'; position: absolute; top: -10px; right: 10px; transform: rotate(6deg);
  border: 2px solid #b3202a; outline: 1px solid #b3202a; outline-offset: 2px;
  color: #b3202a; font-size: .62rem; letter-spacing: .14em; padding: 2px 8px; background: #fdf3ee;
}
.world-ttal .answer-card.ttal-lie { border: 2px solid #b3202a; background: #fdf3ee; }
.world-ttal .answer-card.ttal-lie::after {
  content: 'FABRICATION'; position: absolute; top: -12px; right: 8px; transform: rotate(5deg);
  border: 2px solid #b3202a; outline: 1px solid #b3202a; outline-offset: 2px;
  color: #b3202a; font-size: .62rem; letter-spacing: .14em; padding: 2px 8px; background: #fdf3ee;
}
.world-ttal .answer-card.ttal-lie .answer-text { text-decoration: line-through; text-decoration-color: #b3202a; }
.world-ttal .badge { font-family: 'Special Elite', monospace; transform: none; box-shadow: none; border-width: 1px; }
.world-ttal .btn { background: #2e2718; color: #e8dfc8; border-color: #2e2718; box-shadow: none; font-family: 'Special Elite', monospace; }
.world-ttal .btn-secondary, .world-ttal .btn-small { background: #e8dfc8; color: #2e2718; }
.world-ttal .input { font-family: 'Special Elite', monospace; border: 2px solid #2e2718; box-shadow: none; background: #f7f2e2; }
.world-ttal .input-lie { border-color: #b3202a; background: #fdf3ee; }
.world-ttal .hint { color: #6d6247; }
.world-ttal .chip { background: #f7f2e2; border-color: #2e2718; box-shadow: none; font-family: 'Special Elite', monospace; }
.world-ttal .chip-done { background: #cdc39b; }
.world-ttal .winner-card { background: #e8dfc8; border: 2px solid #2e2718; }
.world-ttal .winner-card::before { content: 'CASE CLOSED'; background: #b3202a; color: #f7f2e2; border-color: #7a1219; }

/* ============ TELEPATHY — hypnotic wavelength ============ */
.world-telepathy {
  background: #1a0f2e; background-image: radial-gradient(ellipse at 50% 0%, #2a1a4a 0%, #1a0f2e 65%);
  color: #fff; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  font-family: 'Chakra Petch', sans-serif;
}
.world-telepathy .topbar h1 { font-family: 'Monoton', cursive; font-size: 1.25rem; color: #c9b6ff; text-transform: uppercase; font-weight: 400; }
.world-telepathy .btn-back { background: transparent; color: #c9b6ff; border-color: #8b4dff; box-shadow: none; }
.world-telepathy .badge-round { background: transparent; border: 1px solid #8b4dff; color: #c9b6ff; box-shadow: none; transform: none; font-family: 'Chakra Petch'; letter-spacing: .18em; }
.world-telepathy .card { background: rgba(139,77,255,.08); border: 1px solid rgba(139,77,255,.45); box-shadow: none; color: #fff; border-radius: 14px; }
.world-telepathy .card h2, .world-telepathy .card h3 { color: #c9b6ff; font-family: 'Chakra Petch'; letter-spacing: .16em; }
.world-telepathy .clue-banner { background: rgba(139,77,255,.12); border: 1px solid rgba(139,77,255,.5); box-shadow: none; border-radius: 14px; }
.world-telepathy .clue-banner .hint { color: #b9a6e8; letter-spacing: .22em; }
.world-telepathy .theme-text { font-family: Georgia, serif; text-transform: none; font-weight: 700; }
.world-telepathy .hint { color: #b9a6e8; }
.world-telepathy .chip { background: rgba(139,77,255,.12); border: 1px solid rgba(139,77,255,.4); color: #fff; box-shadow: none; border-radius: 999px; }
.world-telepathy .chip-done { background: rgba(35,230,255,.2); border-color: #23e6ff; }
.world-telepathy .btn { border-radius: 12px; box-shadow: none; }
.world-telepathy .btn-primary {
  background: linear-gradient(90deg, #ff2d95, #8b4dff); color: #fff; border: none;
  box-shadow: 0 0 22px rgba(139,77,255,.5); font-family: 'Chakra Petch'; letter-spacing: .1em;
}
.world-telepathy .btn-secondary, .world-telepathy .btn-small, .world-telepathy .btn-ghost { background: transparent; color: #c9b6ff; border: 1px solid #8b4dff; }
.world-telepathy .name-reveal-row { border-bottom-color: rgba(139,77,255,.3); }
.world-telepathy .winner-card { background: rgba(139,77,255,.1); border: 1px solid #8b4dff; transform: none; box-shadow: 0 0 30px rgba(139,77,255,.35); }
.world-telepathy .winner-card::before { background: linear-gradient(90deg, #ff2d95, #8b4dff); color: #fff; border: none; }
.world-telepathy .spectrum-labels span:first-child { color: #ff2d95; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.world-telepathy .spectrum-labels span:last-child { color: #23e6ff; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/* the dial */
.dial-wrap { position: relative; width: min(320px, 84vw); margin: 10px auto; }
.dial-gauge { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
.dial-circle {
  position: absolute; left: 0; right: 0; bottom: calc(-100% - 0px); aspect-ratio: 1;
  border-radius: 50%; bottom: -100%;
}
.dial-track {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 270deg at 50% 50%, #ff2d95 0deg, #8b4dff 90deg, #23e6ff 180deg, transparent 180deg);
  filter: drop-shadow(0 0 18px rgba(139,77,255,.45));
}
.dial-hole {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62%; aspect-ratio: 1; border-radius: 50%; background: #1a0f2e;
}
.dial-needle {
  position: absolute; bottom: 0; left: 50%; width: 5px; height: 92%;
  transform-origin: bottom center; transform: translateX(-50%) rotate(0deg);
  background: #fff; border-radius: 4px; box-shadow: 0 0 12px rgba(255,255,255,.8);
  z-index: 3;
}
.dial-needle::after {
  content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.9);
}
.dial-needle.dial-guess-marker { width: 3px; box-shadow: none; opacity: .95; }
.dial-needle.dial-guess-marker::after { display: none; }
.dial-readout { text-align: center; font-family: 'Monoton', cursive; font-size: 2.6rem; color: #fff; line-height: 1.2; }
.dial-readout.dial-target { color: #ffd60a; text-shadow: 0 0 16px rgba(255,214,10,.6); }
.spectrum-slider { width: 100%; height: 46px; -webkit-appearance: none; appearance: none; background: transparent; }
.spectrum-slider::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: rgba(139,77,255,.3); }
.spectrum-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: none; box-shadow: 0 0 16px rgba(255,255,255,.8); margin-top: -14px; cursor: pointer;
}
.spectrum-slider::-moz-range-track { height: 12px; border-radius: 999px; background: rgba(139,77,255,.3); }
.spectrum-slider::-moz-range-thumb { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }
/* legacy linear bar (kept for non-dial fallbacks) */
.spectrum-box { margin: 16px 0; }
.spectrum-labels { display: flex; justify-content: space-between; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.spectrum-bar { position: relative; height: 46px; border-radius: 999px; background: linear-gradient(90deg, #ff2d95, #8b4dff, #23e6ff); }
.spectrum-marker { position: absolute; top: -14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.spectrum-marker::after { content: ''; width: 3px; height: 56px; background: rgba(255,255,255,.7); border-radius: 2px; }
.spectrum-marker.target { z-index: 3; }
.spectrum-marker.target::after { background: #ffd60a; width: 5px; }
.spectrum-marker-emoji { font-size: 1.5rem; line-height: 1; margin-bottom: -2px; }
.spectrum-readout { display: none; }

/* ============ SCATTERGORIES — letter-stamp sprint ============ */
.world-scatter {
  background: #f5efdd; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  color: #1c4587; font-family: 'Special Elite', monospace;
}
.world-scatter .topbar h1 { font-family: 'Rubik Mono One', monospace; font-size: .95rem; color: #1c4587; }
.world-scatter .scatter-letter-banner { background: transparent; border: none; box-shadow: none; }
.world-scatter .scatter-letter {
  font-family: 'Rubik Mono One', monospace; font-size: 2.6rem; color: #1c4587; background: transparent;
  border: 4px double #1c4587; outline: 1px solid #1c4587; outline-offset: 3px;
  padding: 6px 20px; transform: rotate(-4deg); display: inline-block;
}
.world-scatter .big-timer { color: #b3202a; font-family: 'Special Elite', monospace; }
.world-scatter .card { background: #fdf9ec; border: 2px solid #1c4587; box-shadow: 3px 3px 0 rgba(28,69,135,.3); }
.world-scatter h2, .world-scatter h3 { font-family: 'Special Elite', monospace; color: #1c4587; }
.world-scatter .scatter-cat { color: #8a7d52; text-transform: uppercase; font-size: .68rem; letter-spacing: .12em; }
.world-scatter .input {
  background: transparent; border: none; border-bottom: 2px solid #1c4587; box-shadow: none;
  font-family: 'Special Elite', monospace; color: #1c4587; padding: 6px 2px; font-size: 1.05rem;
}
.world-scatter .input:focus { background: #fdf6d8; box-shadow: none; }
.world-scatter .scatter-answer { border-bottom: 1px dashed #b8ad8a; font-family: 'Special Elite', monospace; }
.world-scatter .scatter-answer.struck { position: relative; }
.world-scatter .scatter-answer.struck .scatter-answer-text { text-decoration-color: #b3202a; text-decoration-thickness: 2px; }
.world-scatter .btn { font-family: 'Special Elite', monospace; box-shadow: none; }
.world-scatter .btn-primary { background: #1c4587; color: #fdf9ec; border-color: #1c4587; }
.world-scatter .btn-secondary, .world-scatter .btn-small { background: #fdf9ec; color: #1c4587; border: 2px solid #1c4587; }
.world-scatter .btn-danger { background: #fdf3ee; color: #b3202a; border: 2px solid #b3202a; }
.world-scatter .hint { color: #6d6247; }
.world-scatter .badge-warn {
  background: transparent; border: 2px solid #b3202a; outline: 1px solid #b3202a; outline-offset: 2px;
  color: #b3202a; transform: rotate(4deg); box-shadow: none; font-family: 'Special Elite', monospace;
}
.world-scatter .winner-card { background: #fdf9ec; border: 2px solid #1c4587; }
.world-scatter .winner-card::before { background: #1c4587; color: #fdf9ec; border-color: #12305e; }
.world-scatter .timer-panel { background: transparent; border: none; box-shadow: none; }
.world-scatter .timer-bar-track { border-color: #1c4587; background: #fdf9ec; }
.world-scatter .timer-bar-fill { background: repeating-linear-gradient(-45deg, #1c4587 0 10px, #f5efdd 10px 12px); }

/* ============ FIBBING FRIENDS — tabloid front page ============ */
.world-fib {
  background: #f3ede1; margin: -14px -16px; min-height: 100dvh;
  padding: 0 16px calc(96px + env(safe-area-inset-bottom));
  color: #1a1712; font-family: Georgia, 'Times New Roman', serif;
}
.world-fib .topbar { padding-top: 12px; }
.world-fib .fib-masthead {
  text-align: center; border-bottom: 4px double #1a1712; margin: 0 -16px 12px; padding: 6px 16px 8px;
}
.world-fib .fib-masthead-title { font-family: 'Archivo Black'; font-size: 1.9rem; letter-spacing: -.01em; }
.world-fib .fib-masthead-meta {
  display: flex; justify-content: space-between; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; border-top: 1px solid #1a1712; margin-top: 4px; padding-top: 4px;
  font-family: var(--ui); font-weight: 700;
}
.world-fib .theme-banner {
  background: transparent; border: none; box-shadow: none; text-align: center; position: relative;
  padding: 8px 4px 14px;
}
.world-fib .theme-banner .hint { font-style: italic; color: #555; text-transform: none; letter-spacing: 0; font-family: Georgia, serif; }
.world-fib .theme-text {
  font-family: Georgia, serif; font-weight: 700; font-size: 1.6rem; text-transform: uppercase;
  line-height: 1.15;
}
.world-fib .theme-banner::after {
  content: 'EXTRA!'; position: absolute; top: 0; right: 0; transform: rotate(8deg);
  background: #b3202a; color: #f3ede1; font-family: var(--ui); font-weight: 700; font-size: .62rem;
  letter-spacing: .12em; padding: 3px 9px;
}
.world-fib .answer-card { background: #faf6ec; border: 2px solid #1a1712; box-shadow: none; font-family: Georgia, serif; font-weight: 700; }
.world-fib .answer-card.tappable::after { content: 'VOTE'; font-family: var(--ui); font-size: .62rem; letter-spacing: .14em; color: #555; }
.world-fib .answer-card.picked { border: 3px solid #b3202a; background: #fdf3ee; }
.world-fib .answer-card.picked::after { content: 'YOUR PICK ✓'; color: #b3202a; }
.world-fib .answer-card.ttal-truth-highlight { border: 3px solid #1a1712; background: #fff; box-shadow: 4px 4px 0 #b3202a; position: relative; margin-top: 14px; }
.world-fib .answer-card.ttal-truth-highlight::before {
  content: 'THE TRUTH'; position: absolute; top: -12px; left: 12px; background: #b3202a; color: #f3ede1;
  font-family: var(--ui); font-weight: 700; font-size: .62rem; letter-spacing: .14em; padding: 2px 10px;
  transform: rotate(-2deg);
}
.world-fib .badge { font-family: var(--ui); box-shadow: none; transform: none; }
.world-fib .btn { background: #1a1712; color: #f3ede1; border-color: #1a1712; box-shadow: none; font-family: var(--ui); letter-spacing: .1em; }
.world-fib .btn-secondary, .world-fib .btn-small { background: #f3ede1; color: #1a1712; border: 2px solid #1a1712; }
.world-fib .card { background: #faf6ec; border: 2px solid #1a1712; box-shadow: none; }
.world-fib h3 { border-bottom: 2px solid #1a1712; padding-bottom: 3px; font-family: var(--ui); letter-spacing: .14em; }
.world-fib .hint { color: #555; font-style: italic; font-family: Georgia, serif; }
.world-fib .name-reveal-row { border-bottom: 1px solid #cfc6b2; }
.world-fib .winner-card { background: #faf6ec; border: 3px solid #1a1712; transform: none; box-shadow: 6px 6px 0 #b3202a; }
.world-fib .winner-card::before { content: 'LATE EDITION'; background: #1a1712; color: #f3ede1; border-color: #1a1712; }
.world-fib .chip { background: #faf6ec; border-color: #1a1712; box-shadow: none; }

/* ============ HUNT — instant-film safari (mock 8a) ============
   Cream paper, rainbow camera stripe, polaroid frames, Bowlby One display.
   Captions/labels are bold caps (no script font). */
.world-hunt {
  background: #fffdf6; color: #2b2620;
  margin: -14px -16px; padding: 0 0 calc(96px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  --ph-red: #e4572e; --ph-red-dark: #a23315;
  --ph-teal: #17a398; --ph-teal-dark: #0e6b64;
  --ph-yellow: #f2d43d; --ph-ink: #2b2620;
  --ph-muted: #8a8272; --ph-faint: #cfc6b0;
}
.world-hunt .topbar { padding: 12px 16px 8px; margin-bottom: 0; }
.world-hunt .topbar .btn-small { background: #fff; border-color: var(--ph-ink); box-shadow: 2px 2px 0 var(--ph-ink); }

.ph-stripe { display: flex; height: 10px; }
.ph-stripe span { flex: 1; }

.ph-body { padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 10px; }

.ph-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 6px; }
.ph-title { font-family: 'Bowlby One', cursive; font-size: 1.5rem; line-height: 1; color: var(--ph-red); }
.ph-center { text-align: center; }
.ph-sub { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ph-muted); margin-top: 3px; }

.ph-ring { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-ring-in { width: 40px; height: 40px; border-radius: 50%; background: #fffdf6; display: flex; align-items: center; justify-content: center; font-family: 'Bowlby One', cursive; font-size: .8rem; color: var(--ph-teal); }

/* checklist rows */
.ph-item { display: flex; align-items: center; gap: 12px; border-radius: 4px; padding: 8px 12px 8px 8px; }
.ph-item-done { background: #fff; box-shadow: 0 2px 8px rgba(43,38,32,.12); }
.ph-item-todo { border: 2px dashed var(--ph-faint); padding: 10px 12px; }
.ph-item-info { flex: 1; min-width: 0; }
.ph-item-text { font-weight: 900; font-size: .88rem; }
.ph-item-todo .ph-item-text { color: #6b6455; }
.ph-item-caption { font-size: .7rem; font-weight: 700; color: var(--ph-muted); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-item-hint { font-size: .7rem; font-weight: 700; color: #b5ac96; }
.ph-check { font-family: 'Bowlby One', cursive; color: var(--ph-teal); }
.ph-remove { flex-shrink: 0; }

.ph-thumb { width: 58px; height: 66px; flex-shrink: 0; }
.ph-empty-frame { width: 58px; height: 66px; border: 2px dashed var(--ph-faint); border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-cam { width: 22px; height: 16px; border: 3px solid var(--ph-faint); border-radius: 3px; position: relative; }
.ph-cam::after { content: ''; position: absolute; top: 2px; left: 6px; width: 6px; height: 6px; border: 2px solid var(--ph-faint); border-radius: 50%; }

.ph-snap { background: var(--ph-red); color: #fff; border: none; font-family: 'Bowlby One', cursive; font-size: .75rem; padding: 9px 14px; border-radius: 999px; box-shadow: 0 3px 0 var(--ph-red-dark); cursor: pointer; touch-action: manipulation; }
.ph-snap:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ph-red-dark); }
.ph-snap:disabled { opacity: .6; }

.ph-footer-strip { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--ph-ink); color: #fffdf6; border-radius: 4px; padding: 11px 14px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.ph-leader { font-weight: 900; color: var(--ph-yellow); letter-spacing: .04em; text-align: right; }

/* polaroids */
.ph-polaroid { background: #fff; box-shadow: 0 3px 10px rgba(43,38,32,.2); padding: 5px 5px 20px; position: relative; border: none; }
.ph-polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-thumb.ph-polaroid { padding: 4px 4px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

/* voting */
.ph-vote-head { text-align: center; padding: 6px 2px 2px; }
.ph-vote-title { font-family: 'Bowlby One', cursive; font-size: 1.15rem; line-height: 1.2; margin-top: 4px; }
.ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 2px; }
.ph-grid > * { min-width: 0; }
.ph-votable { cursor: pointer; padding: 7px 7px 26px; }
.ph-votable img { height: 110px; }
.ph-cap { display: block; text-align: center; font-size: .66rem; font-weight: 700; color: var(--ph-ink); padding-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-label { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #6b6455; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-own { background: #f3efe4; box-shadow: 0 2px 6px rgba(43,38,32,.12); cursor: default; }
.ph-own .ph-label { color: var(--ph-muted); }
.ph-picked { outline: 3px solid var(--ph-red); outline-offset: 2px; }
.ph-pick-badge { position: absolute; top: -11px; right: -8px; background: var(--ph-red); color: #fff; font-family: 'Bowlby One', cursive; font-size: .56rem; padding: 3px 8px; border-radius: 999px; transform: rotate(6deg); }
.ph-votes-in { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ph-muted); }
.ph-next { width: 100%; background: var(--ph-teal); color: #fff; border: none; border-radius: 999px; padding: 13px; font-family: 'Bowlby One', cursive; font-size: .88rem; box-shadow: 0 4px 0 var(--ph-teal-dark); cursor: pointer; touch-action: manipulation; }
.ph-next:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ph-teal-dark); }

/* results */
.ph-results { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ph-result-row { display: flex; justify-content: space-between; background: #fff; box-shadow: 0 2px 8px rgba(43,38,32,.12); border-radius: 4px; padding: 12px 14px; font-weight: 900; font-size: .9rem; }
.ph-result-row.ph-winner { background: var(--ph-yellow); }

/* stage + rail on tablets: checklist becomes two columns */
.ph-items { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 700px) {
  .world-hunt .ph-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .world-hunt .ph-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ WORLD-TINTED LOBBY HEADERS ============ */
.lobby-sticker {
  display: inline-block; background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); font-family: var(--display); font-size: 1.05rem;
  padding: 6px 16px; transform: rotate(-2deg); text-transform: uppercase;
  color: var(--ink); /* paper sticker: never inherit a world's light text color */
}
.lobby-head { border: 3px solid var(--ink); box-shadow: var(--shadow-card); padding: 16px 14px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lobby-head .hint { color: rgba(0,0,0,.6); font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; }
.lobby-head-celebrity { background: var(--pink); }
.lobby-head-things { background: var(--orange); }
.lobby-head-charades { background: #141310; } .lobby-head-charades .hint { color: #b9b2a2; }
.lobby-head-ttal { background: #e8dfc8; }
.lobby-head-trivia { background: #0a1230; } .lobby-head-trivia .hint { color: #8fa2e8; }
.lobby-head-fib { background: #f3ede1; }
.lobby-head-telepathy { background: #1a0f2e; } .lobby-head-telepathy .hint { color: #b9a6e8; }
.lobby-head-scatter { background: #f5efdd; }
.lobby-head-doodle { background: #fbf7ee; }
.lobby-head-werewolf { background: #0e1420; } .lobby-head-werewolf .hint { color: #8a90a3; }

/* ============ TV WORLD TINTS ============ */
.tv-screen.world-celebrity { background: var(--pink); background-image: var(--dots); background-size: 26px 26px; min-height: 100dvh; }
.tv-screen.world-things { background: var(--orange); min-height: 100dvh; }
.tv-screen.world-trivia { background: #0a1230; color: #fff; min-height: 100dvh; }
.tv-screen.world-trivia .tv-title, .tv-screen.world-trivia .tv-sub { color: #f5c542; }
.tv-screen.world-trivia .tv-answer { background: #131c3f; color: #fff; border: none; box-shadow: none; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.tv-screen.world-trivia .tv-theme { background: transparent; border: none; box-shadow: none; color: #fff; font-family: 'Big Shoulders Display'; font-weight: 900; font-style: italic; }
.tv-screen.world-werewolf { background: #0e1420; color: #f2ead2; min-height: 100dvh;
  background-image: radial-gradient(circle at 88% 8%, rgba(242,234,210,.2) 0 54px, transparent 60px); }
.tv-screen.world-werewolf .tv-title { font-family: 'Pirata One', serif; color: #b3202a; text-transform: none; }
.tv-screen.world-werewolf .tv-sub { color: #8a90a3; }
.tv-screen.world-werewolf .tv-score-row { background: #131b2b; color: #f2ead2; border: 1px solid #2a344d; box-shadow: none; font-family: Georgia, serif; }
.tv-screen.world-telepathy { background: #1a0f2e; color: #fff; min-height: 100dvh; }
.tv-screen.world-telepathy .tv-title { font-family: 'Monoton', cursive; color: #c9b6ff; font-weight: 400; }
.tv-screen.world-telepathy .tv-sub { color: #b9a6e8; }
.tv-screen.world-telepathy .tv-theme { background: rgba(139,77,255,.12); border: 1px solid #8b4dff; box-shadow: none; color: #fff; font-family: Georgia, serif; text-transform: none; }
.tv-screen.world-charades { background: #141310; color: #f5f0e6; min-height: 100dvh; }
.tv-screen.world-charades .tv-title { font-family: 'Limelight', serif; text-transform: none; color: #f5f0e6; }
.tv-screen.world-charades .tv-sub { color: #b9b2a2; font-style: italic; }
.tv-screen.world-charades .tv-team { background: #141310 !important; border: 3px double #f5f0e6; box-shadow: none; }
.tv-screen.world-score { background: #060f08; color: #a3ff3d; min-height: 100dvh; font-family: 'VT323', monospace; }
.tv-screen.world-score .tv-title { font-family: 'VT323', monospace; color: #a3ff3d; text-shadow: 0 0 14px rgba(163,255,61,.6); }
.tv-screen.world-score .tv-score-row { background: #0a1a0e; border: 2px solid #a3ff3d; color: #d8ffd0; box-shadow: 0 0 14px rgba(163,255,61,.2); font-family: 'VT323', monospace; }
.tv-screen.world-score .tv-score-row.leading { background: #14330f; transform: none; }
.tv-screen.world-score .tv-sub { color: #6fae62; }
.tv-screen.world-scatter { background: #f5efdd; color: #1c4587; min-height: 100dvh; font-family: 'Special Elite', monospace; }
.tv-screen.world-scatter .tv-title { font-family: 'Rubik Mono One', monospace; font-size: clamp(1.2rem, 3.5vw, 2.2rem); }
.tv-screen.world-doodle { background: #fbf7ee; min-height: 100dvh;
  background-image: linear-gradient(rgba(58,111,216,.14) 1px, transparent 1px); background-size: 100% 26px; }
.tv-screen.world-doodle .tv-title { font-family: 'Gochi Hand', cursive; color: #e0421f; text-transform: none; }
.tv-screen.world-fib { background: #f3ede1; color: #1a1712; min-height: 100dvh; font-family: Georgia, serif; }
.tv-screen.world-fib .tv-title { font-family: 'Archivo Black'; border-bottom: 4px double #1a1712; display: inline-block; padding: 0 20px 6px; }
.tv-screen.world-ttal { background: #d8cba6; color: #2e2718; min-height: 100dvh; font-family: 'Special Elite', monospace; }
.tv-screen.world-ttal .tv-title { font-family: 'Special Elite', monospace; }
.tv-screen.world-hunt {
  background: #fffdf6; color: #2b2620; min-height: 100dvh;
  /* undo the phone world's full-bleed margins — this element carries both classes */
  margin: 0 auto; padding: calc(3vh + 10px) 4vw 3vh; max-width: 1100px;
  --ph-red: #e4572e; --ph-red-dark: #a23315; --ph-teal: #17a398; --ph-teal-dark: #0e6b64;
  --ph-yellow: #f2d43d; --ph-ink: #2b2620; --ph-muted: #8a8272; --ph-faint: #cfc6b0;
}
.tv-screen.world-hunt .tv-title { font-family: 'Bowlby One', cursive; color: var(--ph-red); text-transform: uppercase; }
.tv-screen.world-hunt .ph-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
.tv-screen.world-hunt .ph-votable img { height: 180px; }
.tv-screen.world-hunt .ph-stripe { position: fixed; top: 0; left: 0; right: 0; z-index: 5; }

/* ============ STAGE + RAIL (tablet) world borders ============ */
@media (min-width: 700px) {
  .world-trivia .game-split, .world-telepathy .game-split, .world-werewolf .game-split, .world-charades .game-split {
    border: none; box-shadow: none; background: transparent;
  }
  .world-trivia .trivia-choices { grid-template-columns: 1fr 1fr; }
  .world-trivia .game-rail { border-right: none; border-left: 1px solid #29335c; order: 2; }
  .world-telepathy .game-rail { border-right: 1px solid rgba(139,77,255,.4); }
  .world-werewolf .game-rail { border-right: 1px solid #2a344d; }
  .world-charades .game-rail { border-right: 1px solid #6b6250; }
  .world-celebrity .game-split { background: transparent; border: none; box-shadow: none; }
  .world-celebrity .game-rail { border-right: 3px solid var(--ink); }
}

/* 3-column home grid: tracks are ~180px, so display titles must slim down or
   they wrap mid-word (CELEBRI/TY). Last in file so door font-sizes can't win. */
@media (min-width: 700px) {
  .game-card .game-title { font-size: 1.35rem; }
  .door-score .game-title { font-size: 1.8rem; }
  .door-werewolf .game-title { font-size: 1.7rem; }
  .door-doodle .game-title { font-size: 1.5rem; }
  .door-charades .game-title { font-size: 1.45rem; }
  .door-telepathy .game-title { font-size: 1.2rem; }
}