/* ========================================================================= ODD ONE OUT — DESIGN TOKENS ========================================================================= This file is the single source of truth for every visual decision in the game. Colors, type, spacing, radius, shadows, animation timing, audio, layering — it all lives here as CSS custom properties. How it works: - Every token is a CSS variable on :root (or scoped to a theme). - Game code references these variables via var(--token-name). - DaisyUI's theme variables are overridden below so existing Tailwind classes like `bg-primary` immediately use our values. - Change a value here, see it reflected everywhere on next refresh. - NOTHING here affects game logic. Only appearance and feel. For designers / Claude Design: - Tokens are grouped by purpose: COLORS, TYPE, SPACE, RADIUS, SHADOW, MOTION, AUDIO, Z-INDEX, SURFACE. - Each token has a plain-English comment for what it's for. - Dark-theme-first (luxury aesthetic). A future `data-theme="light"` or `data-theme="neon"` could override via the theme-scoping blocks. CONTRACT — do not change: - Token names (game code references them by these exact names). - DaisyUI override mechanism (only the values get changed, not the keys). ========================================================================= */ /* ------------------------------------------------------------------------- COLORS ------------------------------------------------------------------------- Organized by semantic role, not visual appearance. "primary" is the brand color; "accent" is the secondary brand; "warning / success / error" carry meaning. Surfaces (`base-100`, `base-200`, `base-300`) are the background layers — darkest (100) to lightest (300) in a dark theme. ------------------------------------------------------------------------- */ :root, [data-theme="luxury"] { /* --- Brand ------------------------------------------------------------ */ --game-color-primary: oklch(78% 0.13 70); /* hot gold — main brand */ --game-color-primary-fg: oklch(18% 0.01 70); /* text ON primary */ --game-color-secondary: oklch(46% 0.14 265); /* deep indigo — accents */ --game-color-secondary-fg: oklch(96% 0.01 265); --game-color-accent: oklch(70% 0.18 340); /* hot pink — celebration */ --game-color-accent-fg: oklch(15% 0.01 340); /* --- Status ----------------------------------------------------------- */ --game-color-success: oklch(72% 0.17 150); /* caught them */ --game-color-warning: oklch(80% 0.18 80); /* timer running out */ --game-color-error: oklch(62% 0.24 25); /* they got away, emergency */ --game-color-info: oklch(72% 0.13 240); /* neutral info */ /* --- Surfaces (dark luxury theme) ------------------------------------ */ --game-color-base-100: #0a0a0c; /* app background */ --game-color-base-200: #16161a; /* card background */ --game-color-base-300: #22232a; /* inset / input background */ --game-color-base-fg: oklch(95% 0.01 90); /* body text */ --game-color-base-fg-muted: oklch(65% 0.01 90); /* captions, secondary text */ /* --- Role accents (for badges, rings, player avatars) ---------------- */ --game-color-role-host: var(--game-color-primary); --game-color-role-odd: var(--game-color-error); --game-color-role-player: var(--game-color-secondary); --game-color-role-spectator: oklch(50% 0.02 270); --game-color-role-clue-agent: oklch(70% 0.15 180); /* --- Overlays / scrims ------------------------------------------------ */ --game-overlay-solid: #0a0a0c; /* blocking overlay, fully opaque */ --game-overlay-scrim: rgb(0 0 0 / 0.72); /* lighter overlay, content behind dimmed */ --game-overlay-backdrop: rgb(0 0 0 / 0.45); /* modal backdrop */ /* --- Glows (used behind avatars, reveal card, etc.) ------------------ */ --game-glow-primary: 0 0 80px oklch(78% 0.13 70 / 0.45); --game-glow-accent: 0 0 80px oklch(70% 0.18 340 / 0.40); --game-glow-error: 0 0 80px oklch(62% 0.24 25 / 0.50); --game-glow-success: 0 0 80px oklch(72% 0.17 150 / 0.45); } /* ------------------------------------------------------------------------- DAISYUI OVERRIDES (active as of Pass 11 — 2026-04-21) ------------------------------------------------------------------------- DaisyUI v5 exposes its theme as CSS variables. By overriding these we pipe every `bg-primary`, `text-accent`, `btn-warning` class in the codebase through OUR tokens above. No JS or HTML changes needed. Flipped on in Pass 11 after design passes 1–10 locked in the final paper-cutout palette across every scoped stage. Leaving this on means new DaisyUI class usage automatically adopts our tokens. ------------------------------------------------------------------------- */ [data-theme="luxury"] { --color-primary: var(--game-color-primary); --color-primary-content: var(--game-color-primary-fg); --color-secondary: var(--game-color-secondary); --color-secondary-content: var(--game-color-secondary-fg); --color-accent: var(--game-color-accent); --color-accent-content: var(--game-color-accent-fg); --color-success: var(--game-color-success); --color-warning: var(--game-color-warning); --color-error: var(--game-color-error); --color-info: var(--game-color-info); --color-base-100: var(--game-color-base-100); --color-base-200: var(--game-color-base-200); --color-base-300: var(--game-color-base-300); --color-base-content: var(--game-color-base-fg); } /* ------------------------------------------------------------------------- TYPOGRAPHY ------------------------------------------------------------------------- Two families: - DISPLAY (Fredoka One): headlines, reveal text, big moments. - BODY (Inter): everything else. Size scale is declarative — "hero / headline / title / body / caption / micro". Designers can swap the whole scale by changing the values. ------------------------------------------------------------------------- */ :root { --font-display: 'Fredoka One', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Sizes (clamp so the TV scales gracefully with viewport) */ --text-hero: clamp(3rem, 6vw, 6rem); /* reveal banners, slot machine result */ --text-headline: clamp(2.25rem, 4vw, 3.75rem); /* screen titles on TV */ --text-title: clamp(1.5rem, 2.5vw, 2.25rem); /* screen titles on phone, card headers */ --text-body: 1rem; --text-small: 0.875rem; --text-caption: 0.75rem; --text-micro: 0.625rem; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; } /* ------------------------------------------------------------------------- SPACING ------------------------------------------------------------------------- Standard 8-point scale. Tailwind's own spacing stays in use (p-4 etc.); these are for custom components that want to follow the same rhythm. ------------------------------------------------------------------------- */ :root { --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ } /* ------------------------------------------------------------------------- RADIUS ------------------------------------------------------------------------- Corner roundness scale. `radius-pill` is for fully-rounded buttons; `radius-full` is for circles (avatars). ------------------------------------------------------------------------- */ :root { --radius-sm: 0.375rem; /* 6px — tight inputs */ --radius-md: 0.625rem; /* 10px — standard buttons */ --radius-lg: 1rem; /* 16px — cards */ --radius-xl: 1.5rem; /* 24px — big cards, reveal panels */ --radius-pill: 9999px; --radius-full: 9999px; } /* ------------------------------------------------------------------------- SHADOWS & ELEVATION ------------------------------------------------------------------------- Four levels plus glow variants. "Elevation" is the standard material- style depth cues; "glow" is the dramatic colored halo for reveals and celebrations — signature luxury/Jackbox feel. ------------------------------------------------------------------------- */ :root { --elevation-sm: 0 1px 2px rgb(0 0 0 / 0.35); --elevation-md: 0 4px 12px rgb(0 0 0 / 0.40); --elevation-lg: 0 10px 30px rgb(0 0 0 / 0.55); --elevation-xl: 0 20px 60px rgb(0 0 0 / 0.65); --glow-primary: var(--game-glow-primary); --glow-accent: var(--game-glow-accent); --glow-error: var(--game-glow-error); --glow-success: var(--game-glow-success); /* Rings — used on avatars, selected cards */ --ring-width-sm: 2px; --ring-width-md: 4px; --ring-width-lg: 8px; } /* ------------------------------------------------------------------------- MOTION (DURATIONS + EASINGS) ------------------------------------------------------------------------- Every animation in the game pulls its duration and easing from here. This is how a designer re-tunes "feel" without touching code: - Make everything faster: reduce all durations. - Make reveals more dramatic: stretch `--dur-reveal-step`. - Softer UI: swap `--ease-snap` for `--ease-out`. ------------------------------------------------------------------------- */ :root { /* Durations */ --dur-instant: 0ms; --dur-quick: 120ms; /* button press feedback */ --dur-fast: 240ms; /* hover, small transitions */ --dur-normal: 400ms; /* screen fades, card appearances */ --dur-slow: 800ms; /* dramatic reveals */ --dur-dramatic: 1500ms; /* slot machine stops, reveal banner */ --dur-epic: 3000ms; /* full-screen celebrations */ /* Animation stage times — used by reveal timeline */ --dur-reveal-step: 700ms; --dur-testimonial-inter: 1500ms; /* pause between testimonial videos */ --dur-slot-stop: 2500ms; /* slot machine settles */ --dur-countdown-tick: 1000ms; /* Easings (pure CSS cubic-beziers; GSAP code uses named aliases) */ --ease-linear: linear; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* smooth stop */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* slow start */ --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1); /* dramatic */ --ease-snap: cubic-bezier(0.22, 1, 0.36, 1); /* quick punchy UI */ --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);/* playful overshoot */ --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); /* rubber band */ } /* ------------------------------------------------------------------------- AUDIO (CONCEPTUAL — informs AudioManager if we wire it up) ------------------------------------------------------------------------- We have sound files in /client/assets/sounds/. If a designer wants to re-balance audio globally, these variables act as the dial. Currently informational — AudioManager would need to read these to actually use them. ------------------------------------------------------------------------- */ :root { --audio-volume-default: 0.8; /* 0 to 1 */ --audio-volume-duck: 0.3; /* when video is playing */ --audio-fade-in: 200ms; --audio-fade-out: 400ms; } /* ------------------------------------------------------------------------- Z-INDEX LAYERING ------------------------------------------------------------------------- Every overlay / modal / floating element picks from this scale. Higher number wins. Keeping them declarative prevents arbitrary z-index wars. ------------------------------------------------------------------------- */ :root { --z-base: 1; --z-sticky: 20; --z-dropdown: 30; --z-overlay-scrim: 40; --z-modal: 50; --z-slot-machine: 60; /* host reveal takes over everything */ --z-between-countdown: 70; /* countdown wins over slot machine */ --z-toast: 80; --z-debug: 9999; } /* ------------------------------------------------------------------------- SURFACE RECIPES ------------------------------------------------------------------------- Pre-mixed backgrounds for commonly-styled surfaces. Reusing these keeps cards/modals/reveals visually consistent. ------------------------------------------------------------------------- */ :root { --surface-card: var(--game-color-base-200); --surface-card-hover: color-mix(in oklab, var(--game-color-base-200) 85%, var(--game-color-primary)); --surface-inset: var(--game-color-base-300); --surface-overlay: var(--game-overlay-solid); --surface-badge: color-mix(in oklab, var(--game-color-base-300) 80%, transparent); } /* ------------------------------------------------------------------------- GAME-SPECIFIC SEMANTIC UTILITY CLASSES ------------------------------------------------------------------------- Thin utility classes that make intent readable in HTML. These are NOT required — existing Tailwind classes still work — but as screens get cleaned up, replacing `class="bg-primary/20 text-primary font-display"` with `class="badge-host"` makes the HTML self-documenting and gives a designer ONE selector to restyle. Rule of thumb: add a semantic class here when the same visual treatment appears in 3+ places. ------------------------------------------------------------------------- */ .surface-overlay-solid { background: var(--surface-overlay); } .surface-overlay-scrim { background: var(--game-overlay-scrim); } .surface-overlay-backdrop { background: var(--game-overlay-backdrop); } .glow-primary { box-shadow: var(--glow-primary); } .glow-accent { box-shadow: var(--glow-accent); } .glow-error { box-shadow: var(--glow-error); } .glow-success { box-shadow: var(--glow-success); } /* Role accents — wrap an avatar / card to signal a player's role. */ .role-host { --role-accent: var(--game-color-role-host); } .role-odd { --role-accent: var(--game-color-role-odd); } .role-player { --role-accent: var(--game-color-role-player); } .role-spectator { --role-accent: var(--game-color-role-spectator); } .role-clue { --role-accent: var(--game-color-role-clue-agent); } .role-ring { box-shadow: 0 0 0 var(--ring-width-md) var(--role-accent, var(--game-color-primary)); } /* ------------------------------------------------------------------------- MOTION UTILITIES ------------------------------------------------------------------------- Drop these on any element to get tuned, consistent motion. They pair CSS `transition-duration` + `transition-timing-function` with our token values, so the "feel" stays coherent across the whole game. ------------------------------------------------------------------------- */ .motion-quick { transition: all var(--dur-quick) var(--ease-snap); } .motion-fast { transition: all var(--dur-fast) var(--ease-out); } .motion-normal { transition: all var(--dur-normal) var(--ease-in-out); } .motion-slow { transition: all var(--dur-slow) var(--ease-in-out); } .motion-bounce { transition: transform var(--dur-fast) var(--ease-bounce); } .motion-snap { transition: transform var(--dur-quick) var(--ease-snap); } /* Keyframe library — callable from either CSS `animation:` or JS. */ @keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(var(--glow-primary)); } } @keyframes tv-attention-pulse { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } @keyframes slide-up-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .anim-pulse-glow { animation: pulse-glow var(--dur-epic) var(--ease-in-out) infinite; } .anim-attention-pulse { animation: tv-attention-pulse var(--dur-dramatic) var(--ease-in-out) infinite; } .anim-shake { animation: shake var(--dur-fast) var(--ease-out); } .anim-slide-up-fade { animation: slide-up-fade var(--dur-normal) var(--ease-out) both; } .anim-fade-in { animation: fade-in var(--dur-normal) var(--ease-out) both; } /* ========================================================================= LOBBY / SKETCH THEME (cartoon / warm / paper-cutout) — shared primitives scoped to :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) ========================================================================= Adapted from Claude Design's "Sketch Lobby" direction (April 2026). These rules apply inside any container whose `data-stage` starts with `lobby` or `phone-` (lobby, phone-entry, phone-role-reveal, phone-round-active, phone-host-checklist, phone-gather, phone-voting, phone-spectator, phone-overlay). The rest of the game keeps the luxury-dark palette. When design lands on the global redesign, these can be promoted to :root. Lobby-decorative primitives (.wordmark, .room-ticket, .player-paper-card, .ready-counter, brick-wall background, #player-list hide) stay scoped to :is([data-stage^="lobby"], [data-stage="phone-entry"]) — they're specific to the pre-round screens. Contract: - No element IDs or data-slot names change. - Purely additive visual layer. Pre-existing Tailwind/DaisyUI classes on the lobby elements still resolve normally; these just override look. ========================================================================= */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) { /* Ink / line system */ --lobby-ink: #1A1613; --lobby-ink-soft: #3A2E24; /* Paper / surface cream */ --lobby-paper: #F4E9CE; --lobby-paper-warm: #FDF4DE; --lobby-paper-inset: #F6E8C6; /* Accents */ --lobby-mango: #FFC878; --lobby-coral: #E86B6B; --lobby-teal: #4FB3B3; /* CTA */ --lobby-teal-dark: #338B8B; --lobby-green: #8FCF82; /* ready / success */ /* Typography family defaults */ font-family: 'Nunito', var(--font-body); /* Hard-edged cartoon shadow recipes */ --lobby-shadow-md: 0 4px 0 0 var(--lobby-ink), 0 8px 16px rgb(26 22 19 / 0.18); --lobby-shadow-lg: 0 6px 0 0 var(--lobby-ink), 0 12px 24px rgb(26 22 19 / 0.22); --lobby-shadow-xl: 0 8px 0 0 var(--lobby-ink), 0 16px 32px rgb(26 22 19 / 0.26); --lobby-border-md: 3px solid var(--lobby-ink); --lobby-border-lg: 4px solid var(--lobby-ink); } /* ---- INK-STROKED DISPLAY TYPE ---- The signature chunky outlined cream display used for the wordmark, big headings, and button labels. */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ink-stroke { font-family: 'Fredoka One', cursive; color: var(--lobby-paper-warm); -webkit-text-stroke: 3px var(--lobby-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 rgba(26, 22, 19, 0.18), 0 5px 0 var(--lobby-ink); letter-spacing: 0.01em; line-height: 0.95; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ink-stroke-sm { font-family: 'Fredoka One', cursive; color: var(--lobby-paper-warm); -webkit-text-stroke: 2px var(--lobby-ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--lobby-ink); letter-spacing: 0.01em; line-height: 0.95; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ink-stroke-dark { color: var(--lobby-ink); -webkit-text-stroke: 1px var(--lobby-ink); paint-order: stroke fill; letter-spacing: 0.02em; line-height: 1; font-family: 'Fredoka One', cursive; } /* ---- PAPER CUTOUT CARD ---- Cream fill + thick ink border + hard ink drop shadow. */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .paper { background: var(--lobby-paper); border: var(--lobby-border-lg); border-radius: 24px; box-shadow: var(--lobby-shadow-lg); position: relative; color: var(--lobby-ink); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .paper-sm { background: var(--lobby-paper); border: var(--lobby-border-md); border-radius: 16px; box-shadow: var(--lobby-shadow-md); position: relative; color: var(--lobby-ink); } /* ---- CHUNKY 3D BUTTON (TEAL CTA) ---- Use as: Variants: .btn-chunky--ready (green when already readied). The :not(.hidden) is load-bearing: Tailwind's `.hidden` utility (display: none) loses the specificity fight against this compound selector, so buttons like #btn-start-game stayed visible on every phone. Surfaced by the Playwright suite. */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .btn-chunky:not(.hidden) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: 'Fredoka One', cursive; color: var(--lobby-paper-warm); -webkit-text-stroke: 2px var(--lobby-ink); paint-order: stroke fill; background: var(--lobby-teal); border: var(--lobby-border-lg); border-radius: 9999px; padding: 1rem 2rem; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: 0.02em; box-shadow: 0 8px 0 0 var(--lobby-ink), 0 14px 24px rgb(26 22 19 / 0.25); cursor: pointer; transition: transform 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap); user-select: none; text-transform: uppercase; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .btn-chunky:hover { transform: translateY(-2px); box-shadow: 0 10px 0 0 var(--lobby-ink), 0 18px 30px rgb(26 22 19 / 0.30); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .btn-chunky:active, :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .btn-chunky.is-pressed { transform: translateY(6px); box-shadow: 0 2px 0 0 var(--lobby-ink), 0 4px 8px rgb(26 22 19 / 0.20); } /* Variant selectors compound `.btn-chunky.btn-chunky--ready` so they match the `(0,3,0)` specificity of `.btn-chunky:not(.hidden)` above. Without the extra class, the teal rule out-specs the variant and every --ready / --amber button stayed teal when visible (hidden ones showed the variant color only because the `:not(.hidden)` rule didn't match them). Caught during Pass 2 while wiring the green NOTIFY PLAYERS button. */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .btn-chunky.btn-chunky--ready:not(.hidden) { background: var(--lobby-green); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .btn-chunky.btn-chunky--amber:not(.hidden) { background: var(--lobby-mango); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .btn-chunky[disabled], :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .btn-chunky.is-disabled { opacity: 0.65; cursor: not-allowed; transform: none; } /* ---- MARQUEE WORDMARK ("ODD ONE OUT") ---- Simplified marquee: amber panel with bulbs along edges + chunky outlined letters inside. No per-letter tiles (that's a v2 upgrade). */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .wordmark { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.5rem; background: linear-gradient(180deg, #D89A48 0%, #B57628 55%, #8F5615 100%); border: 3px solid var(--lobby-ink); border-radius: 1.5rem; box-shadow: 0 6px 0 0 rgba(26, 22, 19, 0.35), 0 12px 24px rgb(26 22 19 / 0.25); font-family: 'Fredoka One', cursive; white-space: nowrap; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .wordmark__text { position: relative; z-index: 2; color: var(--lobby-paper-warm); -webkit-text-stroke: 2.5px var(--lobby-ink); paint-order: stroke fill; letter-spacing: 0.04em; text-shadow: 3px 3px 0 rgba(26, 22, 19, 0.22), 0 4px 0 var(--lobby-ink); line-height: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .wordmark::before, :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .wordmark::after { content: ""; position: absolute; left: 8px; right: 8px; height: 10px; background-image: radial-gradient(circle at 50% 50%, #FFF4C7 0%, #FFD96B 35%, #C98A1A 75%, transparent 80%); background-size: 20px 10px; background-repeat: repeat-x; background-position: center; pointer-events: none; z-index: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .wordmark::before { top: -5px; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .wordmark::after { bottom: -5px; } /* ---- PAPER SIGN (used for "Waiting for players...") ---- */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .paper-sign { background: var(--lobby-paper); border: var(--lobby-border-md); border-radius: 12px; padding: 0.75rem 1.5rem; box-shadow: var(--lobby-shadow-md); font-family: 'Fredoka One', cursive; color: var(--lobby-ink); -webkit-text-stroke: 0.75px var(--lobby-ink); transform: rotate(-1.5deg); display: inline-block; letter-spacing: 0.02em; } /* ---- ROOM-CODE TICKET (two halves: URL + code) ---- */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .room-ticket { display: inline-flex; align-items: stretch; transform: rotate(-1deg); filter: drop-shadow(0 6px 0 rgba(26, 22, 19, 0.35)) drop-shadow(0 14px 24px rgb(0 0 0 / 0.35)); font-family: 'Fredoka One', cursive; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .room-ticket__label { background: var(--lobby-paper); border: var(--lobby-border-lg); border-right: none; border-radius: 14px 0 0 14px; padding: 0.6rem 1.25rem 0.6rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .room-ticket__label-sub { font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.25em; color: #5C4B3A; text-transform: uppercase; line-height: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .room-ticket__url { margin-top: 0.25rem; font-size: 1.5rem; color: var(--lobby-ink); -webkit-text-stroke: 1px var(--lobby-ink); line-height: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .room-ticket__code { background: var(--lobby-mango); border: var(--lobby-border-lg); border-radius: 0 14px 14px 0; padding: 0.5rem 1.75rem 0.5rem 1.25rem; display: flex; flex-direction: column; justify-content: center; position: relative; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .room-ticket__code-sub { font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.3em; color: var(--lobby-ink); text-transform: uppercase; line-height: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .room-ticket__code-value { margin-top: 0.125rem; font-size: 2.75rem; color: var(--lobby-ink); -webkit-text-stroke: 1.5px var(--lobby-ink); letter-spacing: 0.14em; line-height: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .room-ticket__tape { position: absolute; top: -10px; right: 10px; width: 48px; height: 16px; background: var(--lobby-green); border: 2px solid var(--lobby-ink); transform: rotate(8deg); } /* ---- PLAYER PAPER CARD (used in TV 4x2 grid + phone featured card) ---- */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card { background: var(--lobby-paper); border: var(--lobby-border-lg); border-radius: 20px; box-shadow: var(--lobby-shadow-lg); display: flex; flex-direction: column; align-items: center; padding: 10px 12px 12px; position: relative; color: var(--lobby-ink); transition: opacity 160ms ease; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card--me { border-width: 5px; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card--unready { opacity: 0.88; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card__photo { width: 110px; height: 110px; border-radius: 12px; overflow: hidden; background: var(--lobby-paper-inset); border: var(--lobby-border-md); display: flex; align-items: center; justify-content: center; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card__photo img { width: 100%; height: 100%; object-fit: cover; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card__name { margin-top: 6px; font-family: 'Fredoka One', cursive; font-size: 1.25rem; color: var(--lobby-ink); letter-spacing: 0.03em; -webkit-text-stroke: 1px var(--lobby-ink); text-transform: uppercase; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card__sub { font-family: 'Nunito', sans-serif; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 22, 19, 0.55); margin-top: 2px; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card__ready-badge { position: absolute; top: -14px; right: -14px; padding: 4px 10px; background: var(--lobby-green); border: 3px solid var(--lobby-ink); border-radius: 10px; font-family: 'Fredoka One', cursive; font-size: 0.875rem; transform: rotate(6deg); box-shadow: 0 3px 0 0 rgba(26, 22, 19, 0.35); color: var(--lobby-ink); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card--empty { background: rgba(244, 233, 206, 0.35); border: 3px dashed rgba(26, 22, 19, 0.4); border-radius: 20px; box-shadow: none; display: flex; align-items: center; justify-content: center; min-height: 196px; font-family: 'Fredoka One', cursive; font-size: 1.25rem; color: rgba(26, 22, 19, 0.5); letter-spacing: 0.1em; } /* ---- FEATURED (BIG) PLAYER CARD — phone self-card ---- */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card--featured { padding: 22px 20px; border-radius: 24px; width: 100%; max-width: 320px; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card--featured .player-paper-card__photo { width: 210px; height: 210px; border-radius: 18px; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .player-paper-card--featured .player-paper-card__name { margin-top: 10px; font-size: 3rem; -webkit-text-stroke: 2px var(--lobby-ink); } /* ---- READY COUNTER (tally + notches) — phone bottom ---- */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ready-counter { display: flex; flex-direction: column; align-items: center; gap: 10px; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ready-counter__card { position: relative; background: var(--lobby-paper); border: var(--lobby-border-lg); border-radius: 14px; padding: 10px 28px 12px; box-shadow: 0 5px 0 0 rgba(26, 22, 19, 0.4), 0 10px 18px rgb(26 22 19 / 0.22); transform: rotate(-1.2deg); display: flex; align-items: baseline; gap: 8px; font-family: 'Fredoka One', cursive; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ready-counter__num { font-size: 4rem; color: var(--lobby-ink); -webkit-text-stroke: 2px var(--lobby-ink); letter-spacing: 0.02em; line-height: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ready-counter__denom { font-size: 2.375rem; color: rgba(26, 22, 19, 0.55); letter-spacing: 0.04em; line-height: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ready-counter__label { margin-left: 10px; font-size: 1.375rem; color: var(--lobby-ink); letter-spacing: 0.12em; -webkit-text-stroke: 0.75px var(--lobby-ink); line-height: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ready-counter__tape { position: absolute; top: -10px; left: 18px; width: 54px; height: 16px; background: var(--lobby-green); border: 2px solid var(--lobby-ink); transform: rotate(-6deg); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ready-counter__notches { display: flex; gap: 5px; padding: 0 4px; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ready-counter__notch { width: 14px; height: 18px; border: 1.5px solid var(--lobby-ink); border-radius: 2px; background: transparent; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .ready-counter__notch.is-filled { background: var(--lobby-green); box-shadow: inset 0 -3px 0 rgba(26, 22, 19, 0.18); } /* ---- LOBBY STAGE CONTAINERS ---- Brick-wall backgrounds + neutralize default light-on-dark Tailwind colors on the text INSIDE the lobby so everything reads as near-black ink on cream paper. */ :is([data-stage^="lobby"], [data-stage="phone-entry"]) { background-image: url("/assets/images/brick-phone.webp"); background-size: cover; background-position: center; color: var(--lobby-ink); } :is([data-stage^="lobby"], [data-stage="phone-entry"])[data-stage-variant="tv"] { background-image: url("/assets/images/brick-tv.webp"); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) p, :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) span, :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) h1, :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) h2, :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) h3 { color: var(--lobby-ink); } /* ---- SPECIAL: hide player-list grid in the lobby (phone) ---- The legacy `#player-list` grid holds player DATA that other screens query (voting, DMs, etc.), so we can't delete it. But we don't want to render it on the lobby — the new design uses a featured self-card and a ready-counter tally instead. Keep the element in the DOM, hidden from view. */ :is([data-stage^="lobby"], [data-stage="phone-entry"]) #player-list { display: none !important; } /* ========================================================================= ENTRY FLOW — character picker + name-character stages ========================================================================= The three entry stages (lobby-entry, lobby-pick-character, lobby-name-character) share the lobby aesthetic via the `lobby-` prefix. This block adds the picker-specific chrome (the 20-tile grid) and some entry-screen layout fixes. ========================================================================= */ /* Make the entry + pick/name containers scroll when content overflows (20 tiles are tall on a short phone). */ [data-stage="phone-entry"][data-slot="pick-character"], [data-stage="phone-entry"][data-slot="name-character"] { padding-bottom: 8px; } /* Character tile — one per archetype in the picker grid. Paper-cutout card with emoji + label. Selected state gets an ink ring. */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .character-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px; background: var(--lobby-paper); border: 3px solid var(--lobby-ink); border-radius: 14px; box-shadow: 0 4px 0 0 var(--lobby-ink); color: var(--lobby-ink); font-family: 'Nunito', sans-serif; font-weight: 800; text-align: center; min-height: 88px; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease; transform: rotate(-0.5deg); -webkit-tap-highlight-color: transparent; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .character-tile:nth-child(even) { transform: rotate(0.6deg); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .character-tile:hover { transform: translateY(-2px) rotate(0deg); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .character-tile:active { transform: translateY(2px) rotate(0deg); box-shadow: 0 2px 0 0 var(--lobby-ink); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .character-tile--selected { background: var(--lobby-mango); border-width: 4px; transform: translateY(-2px) rotate(-1.2deg); box-shadow: 0 6px 0 0 var(--lobby-ink), 0 10px 18px rgb(26 22 19 / 0.28); } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .character-tile__emoji { font-size: 2.25rem; line-height: 1; } :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .character-tile__label { font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; } /* ========================================================================= PASS 1 — PHONE ENTRY PRIMITIVES ========================================================================= Paper-ticket text input. Used on every pre-lobby phone input (#input-room-code, #input-character-name, #input-player-name). Replaces the earlier id-targeted rules with a reusable class so every future entry-flow input inherits the same treatment. ========================================================================= */ [data-stage="phone-entry"] .input-paper-ticket { background: var(--lobby-paper); border: var(--lobby-border-lg); border-radius: 20px; box-shadow: 0 5px 0 0 var(--lobby-ink), 0 10px 20px rgb(26 22 19 / 0.22); font-family: 'Fredoka One', cursive; color: var(--lobby-ink); text-align: center; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.9rem 1.5rem; font-size: clamp(1.5rem, 4.5vw, 2.5rem); width: 100%; max-width: 22rem; } [data-stage="phone-entry"] .input-paper-ticket:focus { outline: none; background: var(--lobby-paper-warm); box-shadow: 0 5px 0 0 var(--lobby-ink), 0 10px 20px rgb(26 22 19 / 0.22), 0 0 0 3px var(--lobby-teal) inset; } /* Room-code input uses a monospace face for the 4-char code so the tile reads like a ticket stub. */ [data-stage="phone-entry"] #input-room-code.input-paper-ticket { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.3em; } /* ---- Tailwind `.hidden` override — keep display:none winning ---- Scoped rules like `.paper-chip { display: inline-flex }` and the stage-level `[data-stage="phone-role-reveal"] { display: flex }` blocks below match Tailwind's `.hidden { display: none }` on specificity but come later in the cascade, so without help they would out-paint the hide. Pin `.hidden` to wins both INSIDE a phone-* stage (children) and ON the stage element itself. */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]).hidden, :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .hidden { display: none !important; } /* ========================================================================= PASS 2 — PHONE IN-ROUND STAGES ========================================================================= Three stages covered here: - [data-stage="phone-role-reveal"] — dramatic "YOU ARE THE ODD ONE OUT" vs. "YOU ARE A PLAYER" moment. Two variant cards + corner stamp for the OOO task. - [data-stage="phone-round-active"] — mid-round HUD with timer ticket up top, optional task paper, big chunky SUS button. - [data-stage="phone-host-checklist"] — clipboard-style pre-round setup: pick a task, set a timer, notify. The shared primitives (.paper, .paper-sm, .btn-chunky, .ink-stroke, .ink-stroke-sm, .paper-sign, .character-tile, lobby ink / paper variables) are inherited via the `[data-stage^="phone-"]` broaden earlier in this file. ========================================================================= */ /* ---- Shared corner stamp ("YOUR JOB", "CAUGHT!", etc.) ---- Rotated paper-tag treatment reused across stages. Same transform idiom as .paper-sign, slightly tighter padding so it reads like a sticker. */ :is([data-stage^="phone-"]) .stamp { display: inline-block; background: var(--lobby-paper); border: var(--lobby-border-md); border-radius: 10px; padding: 0.35rem 0.85rem; box-shadow: 0 3px 0 0 var(--lobby-ink), 0 6px 12px rgb(26 22 19 / 0.20); font-family: 'Fredoka One', cursive; color: var(--lobby-ink); -webkit-text-stroke: 0.5px var(--lobby-ink); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-4deg); } :is([data-stage^="phone-"]) .stamp--ooo { background: var(--lobby-coral); color: var(--lobby-paper-warm); -webkit-text-stroke: 1px var(--lobby-ink); } :is([data-stage^="phone-"]) .stamp--mango { background: var(--lobby-mango); } /* ========================================================================= STAGE: phone-role-reveal ========================================================================= */ [data-stage="phone-role-reveal"] { background: radial-gradient(ellipse at top, #3A1414 0%, #2A0E0E 55%, #140606 100%); min-height: 100vh; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; } [data-stage="phone-role-reveal"][data-variant="player"] { background: radial-gradient(ellipse at top, #1B3A1F 0%, #112A14 55%, #061408 100%); } /* Reveal card shared shape — a big rotated paper hero. */ :is([data-stage="phone-role-reveal"]) .reveal-card { position: relative; width: 100%; max-width: 340px; border-radius: 28px; border: 5px solid var(--lobby-ink); padding: 2.25rem 1.5rem; text-align: center; box-shadow: 0 10px 0 0 var(--lobby-ink), 0 24px 36px rgb(0 0 0 / 0.55); animation: reveal-pop var(--dur-dramatic) var(--ease-bounce) both; } /* OOO variant — blood-red paper with heavy shake on entry. */ :is([data-stage="phone-role-reveal"]) .reveal-card-ooo { background: var(--lobby-coral); color: var(--lobby-paper-warm); animation: reveal-pop var(--dur-dramatic) var(--ease-bounce) both, shake var(--dur-slow) var(--ease-out) var(--dur-dramatic) 1; } :is([data-stage="phone-role-reveal"]) .reveal-card-ooo .reveal-card__title { font-family: 'Fredoka One', cursive; color: var(--lobby-paper-warm); -webkit-text-stroke: 3px var(--lobby-ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--lobby-ink), 4px 4px 0 rgba(0,0,0,0.35); font-size: clamp(2.5rem, 9vw, 3.75rem); letter-spacing: 0.02em; line-height: 0.9; margin: 0; } :is([data-stage="phone-role-reveal"]) .reveal-card-ooo .reveal-card__sub { margin-top: 1rem; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.95rem; color: var(--lobby-paper-warm); letter-spacing: 0.05em; text-transform: uppercase; } /* Player variant — green paper, softer entry. */ :is([data-stage="phone-role-reveal"]) .reveal-card-player { background: var(--lobby-green); color: var(--lobby-ink); } :is([data-stage="phone-role-reveal"]) .reveal-card-player .reveal-card__title { font-family: 'Fredoka One', cursive; color: var(--lobby-paper-warm); -webkit-text-stroke: 2.5px var(--lobby-ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--lobby-ink); font-size: clamp(2.25rem, 8vw, 3.25rem); line-height: 0.95; letter-spacing: 0.02em; margin: 0; } :is([data-stage="phone-role-reveal"]) .reveal-card-player .reveal-card__sub { margin-top: 1rem; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.95rem; color: var(--lobby-ink); letter-spacing: 0.05em; text-transform: uppercase; } /* Corner stamp floating off the top-right of the reveal card — used for the OOO's "YOUR JOB" task tag. */ :is([data-stage="phone-role-reveal"]) .reveal-card__stamp { position: absolute; top: -18px; right: -14px; max-width: 70%; font-size: 0.8rem; } :is([data-stage="phone-role-reveal"]) .reveal-card__stamp-label { display: block; font-size: 0.6rem; letter-spacing: 0.18em; opacity: 0.8; margin-bottom: 2px; } :is([data-stage="phone-role-reveal"]) .reveal-card__stamp-value { display: block; font-size: 0.95rem; line-height: 1.1; text-transform: none; letter-spacing: 0.02em; font-family: 'Nunito', sans-serif; font-weight: 800; } @keyframes reveal-pop { 0% { opacity: 0; transform: scale(0.8) rotate(-4deg); } 60% { opacity: 1; transform: scale(1.03) rotate(1deg); } 100% { opacity: 1; transform: scale(1) rotate(-1deg); } } /* ========================================================================= STAGE: phone-round-active ========================================================================= */ [data-stage="phone-round-active"] { background: linear-gradient(180deg, #231C15 0%, #16110C 100%); min-height: 100vh; display: flex; flex-direction: column; } /* Timer ticket — monospace digits on cream paper, pinned at the top. */ :is([data-stage="phone-round-active"]) .timer-paper { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; background: var(--lobby-paper-warm); border: var(--lobby-border-lg); border-radius: 16px; padding: 0.6rem 1.25rem; box-shadow: 0 5px 0 0 var(--lobby-ink), 0 10px 18px rgb(0 0 0 / 0.35); font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--lobby-ink); letter-spacing: 0.06em; line-height: 1; transform: rotate(-1deg); } :is([data-stage="phone-round-active"]) .timer-paper__label { font-family: 'Nunito', sans-serif; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-right: 0.25rem; } :is([data-stage="phone-round-active"]) .timer-paper__digits { font-size: 2rem; letter-spacing: 0.08em; } /* Timer urgency — pure-CSS variants picked up when phone.js (or a future pass) toggles `.text-warning` / `.text-error` on the timer wrapper. Base state stays cream. */ :is([data-stage="phone-round-active"]) .timer-paper.text-warning, :is([data-stage="phone-round-active"]) .timer-paper:has(.text-warning) { background: var(--lobby-mango); } :is([data-stage="phone-round-active"]) .timer-paper.text-error, :is([data-stage="phone-round-active"]) .timer-paper:has(.text-error) { background: var(--lobby-coral); color: var(--lobby-paper-warm); animation: pulse-glow var(--dur-dramatic) var(--ease-in-out) infinite; } /* Top strip containing timer + utility chips. Translucent inset, scrolls with content. */ :is([data-stage="phone-round-active"]) .round-top-strip { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1rem 0.5rem; } :is([data-stage="phone-round-active"]) .round-top-strip__chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; } /* Small paper chip for the connection pill + role pip + secondary actions in the top strip. Reuses the .paper-sign idiom but sized for a row of chips instead of a standalone sign. */ :is([data-stage^="phone-"]) .paper-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--lobby-paper); border: 2.5px solid var(--lobby-ink); border-radius: 9999px; padding: 0.25rem 0.75rem; box-shadow: 0 3px 0 0 var(--lobby-ink); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lobby-ink); } :is([data-stage^="phone-"]) .paper-chip--mango { background: var(--lobby-mango); } :is([data-stage^="phone-"]) .paper-chip--coral { background: var(--lobby-coral); color: var(--lobby-paper-warm); -webkit-text-stroke: 0.5px var(--lobby-ink); } :is([data-stage^="phone-"]) .paper-chip--teal { background: var(--lobby-teal); color: var(--lobby-paper-warm); -webkit-text-stroke: 0.5px var(--lobby-ink); } :is([data-stage^="phone-"]) .paper-chip--green { background: var(--lobby-green); } /* Task card — paper wrap around #my-task-display for host/OOO. */ :is([data-stage="phone-round-active"]) .task-paper { margin: 0.75rem 1rem 1.25rem; padding: 1.25rem; background: var(--lobby-paper); border: var(--lobby-border-lg); border-radius: 22px; box-shadow: var(--lobby-shadow-lg); color: var(--lobby-ink); position: relative; } :is([data-stage="phone-round-active"]) .task-paper__label { display: inline-block; font-family: 'Nunito', sans-serif; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase; color: var(--lobby-ink); opacity: 0.6; margin-bottom: 0.35rem; } :is([data-stage="phone-round-active"]) .task-paper__text { font-family: 'Fredoka One', cursive; font-size: 1.35rem; line-height: 1.2; color: var(--lobby-ink); letter-spacing: 0.01em; } /* SUS button — bigger, thumbable, coral by default. Composes with .btn-chunky so the chunky press animation applies. Selector needs to match `.btn-chunky:not(.hidden)`'s (0,3,0) specificity plus one more class to win the background assignment. */ :is([data-stage^="lobby"], [data-stage^="phone-"], [data-stage^="ipad-"], [data-stage="tv-entry"], [data-stage="tv-round-active"], [data-stage="tv-gather"], [data-stage="tv-emergency"], [data-stage="tv-reveal"], [data-stage="tv-testimonials"], [data-stage="tv-between-rounds"]) .btn-chunky.sus-button-chunky:not(.hidden) { background: var(--lobby-coral); font-size: clamp(1.75rem, 5vw, 2.25rem); padding: 1.25rem 2.5rem; letter-spacing: 0.08em; min-width: 16rem; } /* Main action column in round-active — centers the SUS button + any secondary action buttons so the thumb reaches them. */ :is([data-stage="phone-round-active"]) .round-action-column { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem; } /* Footer bar — connection + role chips aligned at the bottom. */ :is([data-stage="phone-round-active"]) .round-footer-bar { margin-top: auto; padding: 0.75rem 1rem 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } /* ========================================================================= STAGE: phone-host-checklist ========================================================================= */ [data-stage="phone-host-checklist"] { background: linear-gradient(180deg, #E6D5A8 0%, #C4B287 100%); min-height: 100vh; padding: 1.25rem 1rem 1.5rem; display: flex; flex-direction: column; align-items: center; } :is([data-stage="phone-host-checklist"]) .checklist-clipboard { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 1rem; } :is([data-stage="phone-host-checklist"]) .checklist-heading { text-align: center; font-size: clamp(1.75rem, 5.5vw, 2.25rem); margin: 0.5rem 0 0.25rem; } :is([data-stage="phone-host-checklist"]) .checklist-subhead { text-align: center; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--lobby-ink); opacity: 0.75; margin-bottom: 0.5rem; } :is([data-stage="phone-host-checklist"]) .checklist-card { background: var(--lobby-paper); border: var(--lobby-border-lg); border-radius: 20px; box-shadow: var(--lobby-shadow-lg); padding: 1rem 1.15rem 1.15rem; color: var(--lobby-ink); } :is([data-stage="phone-host-checklist"]) .checklist-card__step { display: flex; align-items: center; gap: 0.55rem; font-family: 'Fredoka One', cursive; font-size: 0.95rem; color: var(--lobby-ink); margin-bottom: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; } :is([data-stage="phone-host-checklist"]) .checklist-card__check { width: 1.65rem; height: 1.65rem; border: 2.5px solid var(--lobby-ink); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--lobby-paper-inset); font-size: 0.9rem; line-height: 1; } :is([data-stage="phone-host-checklist"]) .checklist-card__check.is-complete, :is([data-stage="phone-host-checklist"]) .checklist-card__check.bg-success { background: var(--lobby-green); color: var(--lobby-ink); } /* Task-option buttons (injected by renderChecklistTasks) use the shared .character-tile class — redeclare the layout defaults so the text reads LEFT-ALIGNED rather than centered like the archetype grid. */ :is([data-stage="phone-host-checklist"]) #checklist-task-options .character-tile { flex-direction: row; align-items: flex-start; justify-content: flex-start; text-align: left; min-height: auto; padding: 0.6rem 0.8rem; gap: 0.5rem; font-size: 0.8rem; line-height: 1.2; transform: rotate(-0.4deg); text-transform: none; letter-spacing: 0.01em; } :is([data-stage="phone-host-checklist"]) #checklist-task-options .character-tile:nth-child(even) { transform: rotate(0.5deg); } /* Shuffle + custom-task utility buttons live inside the task-picker card. Keep their Tailwind look; only soften to ink palette. */ :is([data-stage="phone-host-checklist"]) #checklist-task-options button:not(.character-tile), :is([data-stage="phone-host-checklist"]) #checklist-task-options textarea { background: var(--lobby-paper-inset); border: 2.5px solid var(--lobby-ink); border-radius: 14px; color: var(--lobby-ink); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.03em; padding: 0.55rem 0.8rem; box-shadow: 0 3px 0 0 var(--lobby-ink); margin-top: 0.4rem; width: 100%; text-align: center; cursor: pointer; } :is([data-stage="phone-host-checklist"]) #checklist-task-options textarea { text-align: left; resize: vertical; } :is([data-stage="phone-host-checklist"]) #checklist-task-options .divider { font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--lobby-ink); opacity: 0.55; margin: 0.5rem 0 0.35rem; } /* Timer picker chips — Tailwind .btn .btn-outline picks up a paper treatment; selected preset flashes amber. */ :is([data-stage="phone-host-checklist"]) .checklist-timer-preset { background: var(--lobby-paper-inset); border: 2.5px solid var(--lobby-ink); border-radius: 12px; color: var(--lobby-ink); font-family: 'Fredoka One', cursive; font-size: 0.95rem; padding: 0.45rem 0.2rem; box-shadow: 0 3px 0 0 var(--lobby-ink); letter-spacing: 0.03em; transition: transform 80ms var(--ease-snap), box-shadow 80ms var(--ease-snap); } :is([data-stage="phone-host-checklist"]) .checklist-timer-preset:hover { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--lobby-ink); } :is([data-stage="phone-host-checklist"]) .checklist-timer-preset.is-selected { background: var(--lobby-mango); transform: translateY(1px); box-shadow: 0 2px 0 0 var(--lobby-ink); } :is([data-stage="phone-host-checklist"]) #checklist-custom-mins { background: var(--lobby-paper-inset); border: 2.5px solid var(--lobby-ink); border-radius: 12px; color: var(--lobby-ink); font-family: 'JetBrains Mono', monospace; padding: 0.4rem 0.6rem; } :is([data-stage="phone-host-checklist"]) #btn-checklist-custom-timer { background: var(--lobby-teal); color: var(--lobby-paper-warm); -webkit-text-stroke: 1px var(--lobby-ink); border: 2.5px solid var(--lobby-ink); border-radius: 12px; font-family: 'Fredoka One', cursive; padding: 0.4rem 0.9rem; box-shadow: 0 3px 0 0 var(--lobby-ink); letter-spacing: 0.05em; } /* Selected-state panels — inline success indicator. */ :is([data-stage="phone-host-checklist"]) #checklist-task-selected, :is([data-stage="phone-host-checklist"]) #checklist-timer-selected { background: var(--lobby-green); border: 3px solid var(--lobby-ink); border-radius: 14px; padding: 0.75rem 0.9rem; color: var(--lobby-ink); margin-top: 0.75rem; box-shadow: 0 3px 0 0 var(--lobby-ink); } :is([data-stage="phone-host-checklist"]) #checklist-task-selected p, :is([data-stage="phone-host-checklist"]) #checklist-timer-selected p { color: var(--lobby-ink); } :is([data-stage="phone-host-checklist"]) #btn-checklist-change-task, :is([data-stage="phone-host-checklist"]) #btn-checklist-change-timer { background: transparent; border: none; color: var(--lobby-ink); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; padding: 0.35rem 0; margin-top: 0.2rem; cursor: pointer; } /* Notify-players CTA container pins to the bottom of the clipboard. */ :is([data-stage="phone-host-checklist"]) .checklist-notify-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-top: 0.5rem; } :is([data-stage="phone-host-checklist"]) .checklist-notify-wrap .btn-chunky { width: 100%; max-width: 22rem; } :is([data-stage="phone-host-checklist"]) .checklist-notify-hint { font-family: 'Nunito', sans-serif; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; color: var(--lobby-ink); opacity: 0.6; text-align: center; text-transform: uppercase; } /* ========================================================================= PASS 3 — PHONE GATHER / VOTING / WATCH-TV / SPECTATOR / BETWEEN-ROUNDS ========================================================================= Six screens that all show a grid of players + a single primary CTA. Unified behind the same brick-wall background + paper-cutout grid pattern. Stages covered: - [data-stage="phone-gather"][data-slot="normal"] — "head to the TV" - [data-stage="phone-gather"][data-slot="emergency"] — coral CTA variant - [data-stage="phone-voting"] — suspect picker grid - [data-stage="phone-watch-tv"] — passive "watch" - [data-stage="phone-spectator"] — spectator seat - [data-stage="phone-between-rounds"] — ready-up + start-next Primitives inherited via the broader [data-stage^="phone-"] scope: .paper, .paper-sm, .paper-sign, .btn-chunky (+ --amber / --ready), .ink-stroke, .ink-stroke-sm, .paper-chip, .character-tile (+ --selected), .stamp. New primitives added below. ========================================================================= */ /* ---- Shared: brick-wall background on all six stage containers. Same image the lobby + phone-entry uses, so the tonal handoff from lobby → round-active (dark) → gather (bricks again) feels intentional rather than jarring. */ [data-stage="phone-gather"], [data-stage="phone-voting"], [data-stage="phone-watch-tv"], [data-stage="phone-spectator"], [data-stage="phone-between-rounds"] { background: url('/assets/images/brick-phone.webp') center / cover no-repeat, var(--lobby-ink); min-height: 100vh; color: var(--lobby-ink); } /* ---- PAPER TILE (small grid cell) ---- Used in gather + vote grids. Fits 3-4 across on a 390px phone with 1rem gutters. Composable with