/* 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); }
}


/* ---- doors: the five newest games ---- */
.door-herd { background: #f2f7ec; color: #2b2e26; position: relative; overflow: hidden; }
.door-herd::after {
  content: ''; position: absolute; top: 10px; right: 12px; width: 64px; height: 40px; border: none;
  background:
    radial-gradient(ellipse 17px 11px at 30% 30%, #2b2e26 98%, transparent) no-repeat,
    radial-gradient(ellipse 13px 15px at 75% 70%, #2b2e26 98%, transparent) no-repeat;
  opacity: .85;
}
.door-herd .game-title { font-family: 'Titan One', cursive; color: #a83f2e; text-transform: none; }
.door-herd .game-desc { color: #6b7261; font-weight: 700; }

.door-words { background: #efe9dc; color: #14181c; position: relative; overflow: hidden; }
.door-words::before {
  content: ''; position: absolute; top: 14px; right: 46px; width: 20px; height: 20px;
  background: #c8322b; clip-path: polygon(50% 0, 100% 100%, 0 100%); border: none;
}
.door-words::after {
  content: ''; position: absolute; top: 14px; right: 16px; width: 20px; height: 20px;
  background: #2456c8; border-radius: 50%; border: none;
}
.door-words .game-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; }
.door-words .game-desc { color: #7a7466; font-weight: 700; }

.door-impostor { background: #101216; color: #e8e4da; }
.door-impostor .game-title { font-family: 'Space Mono', monospace; color: #f5a623; letter-spacing: .1em; font-size: 1.4rem; }
.door-impostor .game-desc { color: #6b6f78; font-family: 'Space Mono', monospace; font-size: .72rem; }

.door-know { background: #2b1c0e; color: #f6edd9; position: relative; overflow: hidden; }
.door-know::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px; border: none;
  background-image: radial-gradient(circle at 8px 6px, #ffd98a 2.6px, rgba(255,217,138,.2) 3.4px, transparent 4.2px);
  background-size: 19px 12px;
}
.door-know .game-title { font-family: 'Alfa Slab One', serif; color: #ffd98a; text-shadow: 2px 2px 0 #d92b2b; text-transform: none; font-size: 1.4rem; padding-top: 8px; }
.door-know .game-desc { color: #c9a86a; font-weight: 700; }

.door-story {
  background: #1d130c; color: #f8f2e4;
  background-image: radial-gradient(ellipse 120% 80% at 50% 120%, rgba(224,122,42,.45), transparent 70%);
}
.door-story .game-title { font-family: 'Playfair Display', serif; font-weight: 700; color: #f0c98a; text-transform: none; }
.door-story .game-desc { font-style: italic; color: #a08b6e; font-family: Georgia, serif; }

/* ============ THE HERD - county fair ============ */
.world-herd {
  background: #f2f7ec; color: #2b2e26; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
}
.world-herd .topbar h1 { font-family: 'Titan One', cursive; color: #a83f2e; text-transform: none; letter-spacing: .01em; }
.world-herd .btn-back { background: #fff; border-color: #2b2e26; border-radius: 10px; box-shadow: none; }
.world-herd .badge-round { background: #fff; color: #2b2e26; border: 2px solid #2b2e26; border-radius: 999px; box-shadow: none; transform: none; }
.world-herd .card { border-radius: 12px; border: 3px solid #2b2e26; box-shadow: none; background: #fff; }
.world-herd .input { border-radius: 12px; border: 3px solid #2b2e26; box-shadow: none; }
.world-herd .btn { border-radius: 12px; }
.world-herd .btn-primary { background: #3d8b37; color: #fff; border: none; font-family: 'Titan One', cursive; box-shadow: 0 4px 0 #245c20; }
.world-herd .btn-secondary { background: #fff; border: 3px solid #2b2e26; box-shadow: none; }
.world-herd .hint { color: #6b7261; }
.herd-prompt-card { background: #a83f2e; border-radius: 14px; padding: 4px; box-shadow: 0 4px 0 #6e2417; margin: 10px 0; }
.herd-prompt-inner { border: 2px dashed rgba(255,255,255,.55); border-radius: 10px; padding: 18px 14px; text-align: center; }
.herd-kicker { font-size: .62rem; font-weight: 900; letter-spacing: .26em; color: #f2c9b8; }
.herd-prompt { font-family: 'Titan One', cursive; font-size: 1.5rem; color: #fff; line-height: 1.15; margin-top: 6px; }
.herd-cow-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #ffd9ec; border: 3px solid #e26ba8; border-radius: 12px; padding: 10px 14px;
  font-weight: 900; font-size: .7rem; color: #a83a6e; margin: 12px 0;
}
.herd-cow-tag { background: #e26ba8; color: #fff; font-family: 'Titan One', cursive; font-size: .58rem; padding: 4px 9px; border-radius: 999px; transform: rotate(4deg); white-space: nowrap; }
.herd-scores {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  background: #fff; border: 3px solid #2b2e26; border-radius: 12px; padding: 10px 14px;
  font-weight: 900; font-size: .72rem; margin: 12px 0;
}
.herd-score.has-cow { color: #c07ba0; }
.herd-reveal-head { margin: 8px 0; }
.herd-reveal-head .herd-kicker { color: #6b7261; }
.herd-reveal-prompt { font-family: 'Titan One', cursive; font-size: 1.25rem; color: #a83f2e; margin-top: 2px; }
.herd-group { background: #fff; border: 3px solid #2b2e26; border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.herd-group-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.herd-group-answer { font-family: 'Titan One', cursive; font-size: 1.05rem; }
.herd-group-pts { background: #fff; color: #245c20; font-family: 'Titan One', cursive; font-size: .7rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.herd-group-pts.muted { background: none; color: #9aa08e; font-weight: 900; font-family: var(--ui); }
.herd-group-names { font-size: .72rem; font-weight: 700; color: #6b7261; }
.herd-group.scored { background: #3d8b37; border: none; color: #fff; box-shadow: 0 4px 0 #245c20; padding: 12px 14px; }
.herd-group.scored .herd-group-names { color: #cde8c4; margin-top: 4px; }
.herd-group.cow { background: #ffd9ec; border: 3px solid #e26ba8; transform: rotate(-.6deg); position: relative; margin-top: 18px; }
.herd-group.cow .herd-group-answer { color: #a83a6e; font-size: .95rem; }
.herd-group.cow .herd-group-names { color: #c07ba0; }
.herd-cow-sticker {
  position: absolute; top: -12px; right: 10px; background: #e26ba8; color: #fff;
  font-family: 'Titan One', cursive; font-size: .56rem; padding: 4px 10px;
  border-radius: 999px; transform: rotate(5deg);
}

/* ============ SECRET WORDS - spy poster ============ */
.world-words {
  background: #efe9dc; color: #14181c; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
}
.world-words .topbar h1 { font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: 1.7rem; text-transform: none; }
.world-words .btn-back { background: transparent; border-color: #14181c; box-shadow: none; }
.words-scorebar { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.words-left { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: .04em; padding: 2px 14px; opacity: .5; color: #efe9dc; }
.words-left.team-a { background: #c8322b; }
.words-left.team-b { background: #2456c8; }
.words-left.active { opacity: 1; }
.words-status { font-family: var(--ui); font-size: .66rem; font-weight: 700; color: #7a7466; text-align: center; letter-spacing: .08em; margin: 8px 0; }
.words-clue-banner {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: .1em; margin: 8px 0;
}
.words-clue { background: #14181c; color: #efe9dc; padding: 2px 16px; }
.words-guesses-left { font-family: var(--ui); font-size: .6rem; font-weight: 700; color: #7a7466; letter-spacing: .04em; }
.words-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; }
.words-tile {
  background: #fdfaf2; border: 2px solid #c9c2b0; border-radius: 0; padding: 12px 2px;
  font-family: 'Bebas Neue', sans-serif; font-size: .85rem; letter-spacing: .04em;
  text-align: center; color: #14181c; overflow-wrap: break-word; box-shadow: none; cursor: default;
}
.words-tile.tappable { cursor: pointer; }
.words-tile:disabled { opacity: 1; }
.words-tile.revealed.tile-a { background: #c8322b; color: #efe9dc; opacity: .85; border-color: #c8322b; }
.words-tile.revealed.tile-b { background: #2456c8; color: #efe9dc; opacity: .85; border-color: #2456c8; }
.words-tile.revealed.tile-neutral { background: #d9d2c0; color: #8a8272; border-color: #d9d2c0; }
.words-tile.revealed.tile-trap { background: #14181c; color: #e05a52; border-color: #14181c; }
.words-tile.key-a { border-bottom: 5px solid #c8322b; }
.words-tile.key-b { border-bottom: 5px solid #2456c8; }
.words-tile.key-trap { outline: 2px solid #e05a52; outline-offset: -4px; }
.words-key-hint, .words-me-line { font-family: var(--ui); font-size: .6rem; font-weight: 700; color: #7a7466; text-align: center; margin: 6px 0; letter-spacing: .05em; }
.words-clue-row { display: flex; gap: 8px; margin: 10px 0; }
.words-clue-input { flex: 1.6; text-transform: uppercase; }
.words-num-input { flex: .5; min-width: 54px; text-align: center; }
.world-words .input { background: #fdfaf2; border: 2px solid #c9c2b0; box-shadow: none; font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: 1.05rem; }
.world-words .btn { font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: 1.05rem; }
.world-words .btn-primary { background: #c8322b; color: #efe9dc; border-color: #14181c; }
.world-words .btn-secondary { background: transparent; border: 2px solid #14181c; box-shadow: none; }
.world-words .card { background: #fdfaf2; border: 2px solid #c9c2b0; box-shadow: none; }

/* ============ THE IMPOSTOR - departures board ============ */
.world-impostor {
  background: #101216; color: #e8e4da; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  font-family: 'Space Mono', monospace;
}
.world-impostor .topbar h1 { font-family: 'Space Mono', monospace; letter-spacing: .14em; color: #f5a623; font-size: 1.05rem; }
.world-impostor .btn-back { background: transparent; color: #e8e4da; border-color: #3a3f48; box-shadow: none; }
.world-impostor .badge-round { background: transparent; border: 1px solid #3a3f48; color: #6b6f78; box-shadow: none; transform: none; font-family: 'Space Mono', monospace; }
.imp-lead { font-size: .66rem; color: #6b6f78; letter-spacing: .14em; text-align: center; margin: 10px 0; }
.imp-word-card {
  background: #000; border: 1px solid #262a32; border-radius: 6px; padding: 16px 12px;
  display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 10px 0;
}
.imp-word-label { font-size: .6rem; color: #6b6f78; letter-spacing: .22em; }
.imp-flap-box { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.imp-flap-row { display: flex; gap: 3px; justify-content: center; }
.imp-flap-char {
  background: linear-gradient(#23262d 48%, #000 48% 52%, #1a1d23 52%);
  color: #f5a623; font-weight: 700; font-size: 1.25rem; padding: 6px 4px;
  border-radius: 3px; min-width: 1.15em; text-align: center;
}
.imp-mystery { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.imp-you-are { color: #e05a52; font-weight: 700; font-size: .72rem; letter-spacing: .14em; }
.imp-brief {
  border: 1px dashed #3a3f48; border-radius: 6px; padding: 10px 14px;
  font-size: .68rem; color: #9aa0aa; line-height: 1.7; text-align: center; margin: 10px 0;
}
.imp-alert { color: #e05a52; } .imp-amber { color: #f5a623; }
.imp-timer-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #000; border: 1px solid #262a32; border-radius: 6px; padding: 10px 14px; margin: 10px 0;
}
.imp-timer-label { font-size: .66rem; color: #6b6f78; letter-spacing: .14em; }
.imp-clock { font-weight: 700; font-size: 1.4rem; color: #f5a623; }
.world-impostor .btn { border-radius: 6px; font-family: 'Space Mono', monospace; letter-spacing: .08em; }
.world-impostor .btn-primary { background: #f5a623; color: #101216; border: none; box-shadow: none; font-weight: 700; }
.world-impostor .btn-secondary { background: transparent; color: #e8e4da; border: 1px solid #3a3f48; box-shadow: none; }
.world-impostor .card { background: #1a1d23; border: 1px solid #262a32; box-shadow: none; color: #e8e4da; border-radius: 6px; }
.world-impostor .card h3 { color: #9aa0aa; font-family: 'Space Mono', monospace; font-size: .85rem; letter-spacing: .08em; }
.world-impostor .hint { color: #9aa0aa; }
.world-impostor .input { background: #1e242b; border: 1px solid #3a3f48; color: #e8e4da; box-shadow: none; border-radius: 6px; font-family: 'Space Mono', monospace; }
.imp-pass { display: flex; background: #e8e4da; color: #101216; border-radius: 6px; overflow: hidden; margin: 8px 0; }
.imp-pass.picked { outline: 3px solid #e05a52; outline-offset: -1px; }
.imp-pass.self { background: #1a1d23; color: #6b6f78; border: 1px solid #262a32; }
.imp-pass-main { padding: 11px 14px; flex: 1; }
.imp-pass-name { font-weight: 700; font-size: .9rem; }
.imp-pass-sub { font-size: .62rem; color: #6b6f78; }
.imp-pass-stub {
  border-left: 2px dashed #9aa0aa; padding: 11px 12px; display: flex; align-items: center;
  font-size: .6rem; letter-spacing: .1em; color: #6b6f78; font-weight: 700;
}
.imp-pass.picked .imp-pass-stub { color: #e05a52; }
.imp-cta { margin-top: 4px; }
.world-impostor .winner-card { background: #1a1d23; border-color: #f5a623; }

/* ============ HOW WELL DO YOU KNOW... - retro game show ============ */
.world-know {
  background: #f6edd9; color: #2b1c0e; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
}
.world-know .topbar h1 { font-family: 'Alfa Slab One', serif; font-size: 1rem; text-transform: none; }
.world-know .btn-back { background: #fff; border-color: #2b1c0e; box-shadow: none; border-radius: 10px; }
.know-marquee { background: #2b1c0e; margin: 0 -16px 14px; padding: 0 0 2px; }
.know-bulbs {
  height: 12px;
  background-image: radial-gradient(circle at 8px 6px, #ffd98a 2.6px, rgba(255,217,138,.2) 3.4px, transparent 4.2px);
  background-size: 19px 12px;
}
.know-marquee-inner { text-align: center; padding: 10px 16px 12px; }
.know-kicker { font-size: .56rem; font-weight: 900; letter-spacing: .3em; color: #c9a86a; }
.know-contestant { font-family: 'Alfa Slab One', serif; font-size: 1.5rem; color: #ffd98a; line-height: 1; text-shadow: 2px 2px 0 #d92b2b; margin-top: 4px; }
.know-q-card { background: #fff; border-radius: 14px; padding: 4px; box-shadow: 0 4px 0 #d8c69e; margin: 12px 0; }
.know-q-inner { border: 2px dashed #b59a6b; border-radius: 11px; padding: 18px 14px; text-align: center; }
.know-q-inner .know-kicker { color: #8a6c39; letter-spacing: .22em; }
.know-question { font-family: 'Alfa Slab One', serif; font-size: 1.15rem; line-height: 1.3; margin-top: 6px; }
.know-live-strip {
  background: #d92b2b; color: #fff; border-radius: 12px; padding: 10px 14px;
  font-weight: 900; font-size: .66rem; letter-spacing: .07em; box-shadow: 0 3px 0 #8f1d1d; margin: 12px 0;
}
.world-know .input { border-radius: 12px; border: 3px solid #2b1c0e; box-shadow: none; }
.world-know .btn { border-radius: 12px; }
.world-know .btn-primary { background: #0f5c46; color: #fff; border: none; font-family: 'Alfa Slab One', serif; box-shadow: 0 4px 0 #073527; }
.world-know .btn-secondary { background: #fff; border: 3px solid #2b1c0e; box-shadow: none; }
.world-know .card { border-radius: 12px; border: 3px solid #2b1c0e; box-shadow: none; background: #fff; }
.world-know .hint { color: #8a6c39; }
.know-answer-panel { background: #2b1c0e; border-radius: 16px; padding: 10px; text-align: center; position: relative; margin: 16px 0 14px; }
.know-answer-sticker {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  background: #d92b2b; color: #fff; font-size: .55rem; font-weight: 900; letter-spacing: .16em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.know-answer-text {
  border: 2px solid #6b4d1e; border-radius: 12px; padding: 16px 12px;
  font-family: 'Alfa Slab One', serif; font-size: 1.35rem; color: #ffd98a; line-height: 1.15;
  text-shadow: 2px 2px 0 #d92b2b; overflow-wrap: break-word;
}
.know-guess-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  background: #fff; border: 2px solid #0f5c46; border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 3px 0 #d8c69e; margin: 8px 0; font-family: var(--ui); text-align: left;
}
button.know-guess-row { cursor: pointer; }
.know-guess-row.missed { background: #efe6d0; border-color: transparent; opacity: .75; box-shadow: none; }
.know-guess-text { font-weight: 900; font-size: .8rem; overflow-wrap: break-word; min-width: 0; }
.know-match-pill { background: #d8c69e; color: #fff; font-family: 'Alfa Slab One', serif; font-size: .6rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.know-guess-row.matched { border-color: #0f5c46; }
.know-guess-row.matched .know-match-pill, .know-match-pill.on { background: #0f5c46; }
.know-nomatch { font-weight: 900; font-size: .6rem; color: #8a6c39; white-space: nowrap; }

/* ============ STORY CHAIN - campfire manuscript ============ */
.world-story {
  background-color: #1d130c; color: #f8f2e4; margin: -14px -16px; min-height: 100dvh;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  font-family: Georgia, 'Times New Roman', serif;
  background-image: radial-gradient(ellipse 120% 60% at 50% 115%, rgba(224,122,42,.4), rgba(224,122,42,.08) 55%, transparent 75%);
  background-attachment: fixed;
}
.world-story .topbar h1 { font-family: 'Playfair Display', serif; font-weight: 700; color: #f0c98a; text-transform: none; font-size: 1.4rem; }
.world-story .btn-back { background: transparent; color: #f8f2e4; border-color: #6b5638; box-shadow: none; }
.story-meta { font-size: .72rem; font-style: italic; color: #a08b6e; margin: 6px 0; }
.story-scrap { filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); margin: 12px 0; }
.story-folded {
  background: #d9cdb2; padding: 10px 18px 16px; display: flex; flex-direction: column; gap: 6px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 96% 100%, 88% calc(100% - 7px), 80% 100%,
    72% calc(100% - 8px), 64% 100%, 56% calc(100% - 6px), 48% 100%, 40% calc(100% - 8px),
    32% 100%, 24% calc(100% - 7px), 16% 100%, 8% calc(100% - 8px), 0 100%);
}
.story-redacted { height: 8px; background: #b3a483; border-radius: 2px; opacity: .5; }
.story-folded-note { text-align: center; font-size: .62rem; font-style: italic; color: #8a7a5c; letter-spacing: .12em; }
.story-visible { background: #f8f2e4; color: #2e2415; padding: 16px 18px; margin-top: -2px; }
.story-kicker { font-size: .6rem; font-weight: 700; letter-spacing: .22em; color: #a08b6e; font-family: var(--ui); }
.story-prev-line { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.1rem; line-height: 1.45; margin-top: 6px; }
.world-story .input, .story-input {
  background: #f8f2e4; color: #2e2415; border: none; border-radius: 4px; box-shadow: none;
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 1rem;
}
.story-input { resize: vertical; }
.world-story .input::placeholder { color: #8a7a5c; }
.world-story .btn { border-radius: 4px; }
.world-story .btn-primary {
  background: #e07a2a; color: #1d130c; border: none; font-family: var(--ui); font-weight: 900;
  letter-spacing: .12em; box-shadow: 0 0 22px rgba(224,122,42,.5);
}
.world-story .btn-secondary { background: transparent; border: 1px dashed #6b5638; color: #a08b6e; box-shadow: none; }
.world-story .card { background: rgba(248,242,228,.06); border: 1px solid #6b5638; box-shadow: none; color: #f8f2e4; }
.world-story .card h3 { color: #f0c98a; font-family: 'Playfair Display', serif; }
.world-story .hint { color: #a08b6e; font-style: italic; }
.world-story .winner-card { background: rgba(248,242,228,.06); border-color: #e07a2a; }
.story-unfold-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.5rem; color: #f0c98a; }
.story-page { background: #f8f2e4; color: #2e2415; padding: 18px 20px; box-shadow: 0 8px 20px rgba(0,0,0,.5); margin: 12px 0; }
.story-line { font-family: 'Playfair Display', serif; font-size: .95rem; line-height: 1.55; font-weight: 500; margin-top: 10px; }
.story-line.story-first { display: flex; gap: 12px; margin-top: 0; }
.story-dropcap { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.6rem; line-height: .9; color: #b3452e; }
.story-line.just-read { font-style: italic; font-weight: 700; background: rgba(224,122,42,.18); padding: 2px 4px; }
.story-author { color: #a08b6e; font-size: .58rem; font-family: var(--ui); font-weight: 700; letter-spacing: .08em; font-style: normal; }
.story-author.hot { color: #b3452e; }
.story-page .story-folded { clip-path: none; background: transparent; border-top: 1px solid #d9cdb2; margin-top: 12px; padding: 10px 0 0; }
.story-page .story-redacted { background: #d9cdb2; opacity: 1; }

/* lobby tints for the new worlds */
.lobby-head-herd { background: #a83f2e; } .lobby-head-herd .hint { color: #f2c9b8; }
.lobby-head-words { background: #efe9dc; }
.lobby-head-impostor { background: #101216; } .lobby-head-impostor .hint { color: #9aa0aa; }
.lobby-head-know { background: #2b1c0e; } .lobby-head-know .hint { color: #c9a86a; }
.lobby-head-story { background: #1d130c; } .lobby-head-story .hint { color: #a08b6e; }

/* 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; }
  .door-impostor .game-title { font-size: 1.05rem; }
  .door-know .game-title { font-size: 1.15rem; }
  .door-words .game-title { font-size: 1.5rem; }
}