/* ════════════════════════════════════════════════════════════════════════ MAJLIS — Design Tokens ════════════════════════════════════════════════════════════════════════ Single source of truth for color, type, spacing, radius, shadow, motion. Consumed by both host.html and player.html. Per-mode theme overrides (faker / khallat) are at the bottom — they re-bind --primary, the surface tints, and the primary shadow to the active mode color. Aesthetic: warm playful (Jackbox / Among Us / Gartic / Kalak family). Cream surface, burnt-orange brand, hand-drawn friendly tone. ──────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand color ───────────────────────────────────────────────────── */ --color-primary: #FF7A00; --color-primary-dark: #E66A00; --color-primary-soft: #FFEFE0; /* ── Surfaces ──────────────────────────────────────────────────────── */ --color-bg: #FAF8F5; /* cream page background */ --color-card: #FFFFFF; /* raised surface */ --color-surface-2: #F4EFE8; /* recessed input / chip */ --color-overlay-dim: rgba(20, 12, 5, 0.72); /* ── Ink / text ────────────────────────────────────────────────────── */ --color-text: #2D2D34; --color-text-soft: #5C5762; --color-muted: #8A8590; /* ── Accents (semantic) ────────────────────────────────────────────── */ --color-accent-pink: #FF6B6B; /* danger / accused */ --color-accent-yellow: #FFD166; /* highlight / winner */ --color-accent-teal: #06D6A0; /* success / done */ /* ── Per-mode primaries (referenced by mode-tinted UI) ─────────────── */ --color-mode-shathaat: #FF7A00; --color-mode-faker: #9B3D15; --color-mode-khallat: #0B8A5E; /* ── Functional / UI hardware ──────────────────────────────────────── */ --color-on-primary: #FFFFFF; /* text/icon on top of --color-primary */ --color-on-dark: #FFFFFF; /* text on dark overlays */ --color-toggle-off: #C8C2CC; /* settings switch when off */ --color-knob: #FFFFFF; /* settings switch knob */ --color-primary-grad-end: #FF9D00; /* warm gradient companion to primary */ --color-input-text: var(--color-text); --color-input-placeholder: var(--color-muted); --color-tile-shathaat-hover: #FFF6EC; --color-tile-faker-hover: #F5EDE5; --color-tile-khallat-hover: #EAF9F4; /* Decorative wash + emboss colors used by the player join hero and the lobby room-code display. Kept here so the brand controls them. */ --color-hero-glow-warm: rgba(255, 209, 102, 0.35); --color-hero-glow-deep: rgba(230, 106, 0, 0.45); --color-text-shadow-strong: rgba(0, 0, 0, 0.25); --color-text-shadow-soft: rgba(0, 0, 0, 0.18); --color-text-shadow-faint: rgba(0, 0, 0, 0.06); --color-overlay-faint: rgba(0, 0, 0, 0.05); --color-code-emboss: rgba(255, 122, 0, 0.08); --color-disabled-overlay: rgba(255, 255, 255, 0.6); /* badge tint */ --color-border-subtle: rgba(0, 0, 0, 0.07); /* hairline */ /* ── Typography ────────────────────────────────────────────────────── */ /* Cairo first, then platform emoji fonts so 🫙 / 📱 / ⏱ render. */ --font-sans: 'Cairo', "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, -apple-system, sans-serif; /* Fluid type scale — clamp(min, preferred, max) */ --fs-xs: 0.85rem; --fs-sm: 1rem; --fs-base: 1.15rem; --fs-md: clamp(1.2rem, 1.6vw, 1.5rem); --fs-lg: clamp(1.5rem, 2.4vw, 2rem); --fs-xl: clamp(2rem, 3.4vw, 3rem); --fs-display: clamp(2.5rem, 4.5vw, 4rem); --fs-mega: clamp(3.5rem, 9vw, 7rem); /* room code hero */ /* ── Spacing (8px grid) ────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── Radius ───────────────────────────────────────────────────────── */ --rad-sm: 8px; --rad-md: 14px; --rad-lg: 22px; --rad-xl: 32px; --rad-pill: 999px; /* ── Shadows (warm, peach-tinted) ─────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow: 0 8px 24px rgba(210, 190, 170, 0.40); --shadow-lg: 0 14px 36px rgba(210, 190, 170, 0.55); --shadow-primary: 0 8px 22px rgba(255, 122, 0, 0.38); /* ── Motion ─────────────────────────────────────────────────────── */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-soft: cubic-bezier(0.4, 0, 1, 1); --ease-spring-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-bounce: var(--ease-spring-pop); --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-instant: 0s; --dur-fast: 0.15s; --dur-base: 0.25s; --dur-slow: 0.45s; --dur-medium: 0.55s; --dur-cinematic: 0.7s; --dur-cinematic-long: 0.9s; /* Legacy alias used widely in inline styles */ --bounce: all var(--dur-base) var(--ease-spring-pop); /* Spotlight reveal — overwritten dynamically per round (see host) */ --duration: 5s; /* ── Safe-area insets (for player on iOS notched devices) ─────────── */ --safe-top: env(safe-area-inset-top, 0px); --safe-bot: env(safe-area-inset-bottom, 0px); /* ── In-game polish tokens (winner / verdict / overlays / decoration) ─ */ --color-winner-soft: #FFFBEB; --color-winner-warm: #FFF3CD; --color-winner-glow: rgba(255, 209, 102, 0.55); --shadow-winner: 0 12px 32px rgba(255, 209, 102, 0.55); --shadow-winner-lg: 0 16px 48px rgba(255, 209, 102, 0.50); --color-result-faker-bg: #FFFBEB; --color-result-accused-bg: #FFF1F1; --shadow-result-faker: 0 12px 32px rgba(255, 209, 102, 0.55); --shadow-result-accused: 0 12px 32px rgba(255, 107, 107, 0.40); --color-spotlight-prompt-bg: rgba(0, 0, 0, 0.04); --color-progress-track: rgba(0, 0, 0, 0.10); --color-timer-urgent: #DC2626; --color-delta-positive: #22C55E; --color-tie-left-start: #FF7A00; --color-tie-left-end: #FF9F45; --color-tie-right-start: #7C3AED; --color-tie-right-end: #A855F7; --color-overlay-pause-soft: rgba(20, 12, 5, 0.72); --color-overlay-pause-deep: rgba(20, 12, 5, 0.82); --color-overlay-glass: rgba(255, 255, 255, 0.92); --color-overlay-glass-border: rgba(0, 0, 0, 0.08); --color-overlay-tie-glass: rgba(255, 255, 255, 0.45); --color-overlay-on-dark-soft: rgba(255, 255, 255, 0.08); --color-overlay-on-dark-mid: rgba(255, 255, 255, 0.25); --color-overlay-on-dark-strong:rgba(255, 255, 255, 0.95); --color-overlay-input: rgba(255, 255, 255, 0.05); --color-faker-identity-start: #1a0a0a; --color-faker-identity-end: #3d0b0b; --color-faker-identity-accent: #FF4D4D; --color-faker-identity-border: rgba(220, 60, 60, 0.40); --color-faker-identity-divider:rgba(220, 60, 60, 0.30); --shadow-faker-identity: 0 16px 48px rgba(180, 30, 30, 0.55); --color-info-warn-bg: #FFF1F1; --color-pill-border: rgba(0, 0, 0, 0.08); --shadow-rank-icon: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-vs-badge: 0 4px 24px rgba(0, 0, 0, 0.25); /* Confetti palette — used by the final-leaderboard champion burst */ --color-confetti-1: #FF7A00; --color-confetti-2: #FFD166; --color-confetti-3: #06D6A0; --color-confetti-4: #FF6B6B; --color-confetti-5: #7C3AED; /* ── In-game extension tokens (Phase 2: gameplay surfaces) ──────────── */ /* Warm secondary — gradient companion to --color-primary, used for duel side-A chrome, sweep banners, and judge progress accents. */ --color-primary-warm: #ff8c42; --color-primary-ring: rgba(232,102,26,0.18); --shadow-primary-warm: 0 8px 20px rgba(232,102,26,0.45); /* Duel side B (teal accent paired with primary-warm). */ --color-duel-b: #2cb1b1; --color-duel-b-end: #5dd2c8; --shadow-duel-b: 0 8px 20px rgba(44,177,177,0.45); /* Peach shimmer for duel placeholder (the "behind the curtain" card). */ --color-placeholder-peach-1: #ffeacf; --color-placeholder-peach-2: #ffe2bb; --color-placeholder-ink: rgba(43,24,16,0.32); /* Warm peach-tinted ink shadows (replaces ad-hoc rgba(43,24,16,...)) */ --shadow-warm-ink-soft: rgba(43,24,16,0.06); --shadow-warm-ink-mid: rgba(43,24,16,0.10); --shadow-warm-ink-strong: rgba(43,24,16,0.14); --shadow-warm-ink-inset: rgba(43,24,16,0.04); --shadow-warm-ink-line: rgba(43,24,16,0.07); --shadow-warm-ink-line-soft: rgba(43,24,16,0.08); --shadow-warm-ink-line-mid: rgba(43,24,16,0.10); --shadow-duel-card: 0 18px 44px var(--shadow-warm-ink-strong), 0 2px 0 var(--shadow-warm-ink-inset) inset; /* Sweep banner (شطحات sweep callout). */ --color-sweep-ink: #2b1810; --shadow-sweep: 0 10px 28px rgba(255,140,66,0.45); --shadow-sweep-pulse: 0 14px 40px rgba(255,140,66,0.85), 0 0 0 6px rgba(255,209,102,0.35); /* Winner card chrome (duel winner state + final-answer winner). */ --color-winner-grad-1: #fff8d6; --color-winner-grad-2: #ffe9a3; --color-winner-rail-1: #ffb732; --color-winner-rail-2: #ffd166; --shadow-winner-card: 0 22px 48px rgba(255,192,79,0.55), 0 0 0 4px rgba(255,209,102,0.5); /* VS centerpiece (duel arena). */ --shadow-vs: 0 14px 36px rgba(232,102,26,0.55), 0 0 0 6px rgba(255,255,255,0.85); --color-vs-halo: rgba(255,209,102,0.55); --color-vs-flash: rgba(255,255,255,0.85); --color-vs-flash-clear: rgba(255,255,255,0); /* Podium metal gradients (1st/2nd/3rd/rest). */ --color-podium-gold-1: #FFD700; --color-podium-gold-2: #FFA500; --color-podium-silver-1: #D8D8D8; --color-podium-silver-2: #A8A8A8; --color-podium-bronze-1: #CD7F32; --color-podium-bronze-2: #A0522D; --color-podium-neutral-1: #C0B8D8; --color-podium-neutral-2: #9490B8; --color-podium-text-shadow: rgba(0,0,0,0.3); /* Tie banner glow keyframe colours. */ --color-tie-glow-clear: rgba(255,209,102,0); --color-tie-glow-bright: rgba(255,209,102,0.8); /* Faker verdict frame backgrounds (caught vs escaped). */ --color-verdict-caught-bg-1: rgba(6,214,160,0.12); --color-verdict-caught-bg-2: rgba(6,214,160,0.04); --color-verdict-escaped-bg-1: rgba(255,107,107,0.12); --color-verdict-escaped-bg-2: rgba(255,107,107,0.04); /* Faker identity reveal — title halo. */ --shadow-faker-title-halo: rgba(255,77,77,0.5); /* Faker theme cinematic glows (countdown/text-shadow). */ --shadow-faker-glow-soft: rgba(155,61,21,0.25); --shadow-faker-glow-faint: rgba(155,61,21,0.12); --shadow-faker-glow-mid: rgba(155,61,21,0.40); --shadow-faker-glow-deep: rgba(155,61,21,0.20); --shadow-duel-side-mobile: rgba(155,61,21,0.35); /* Pause / exit / rotate overlay chrome. */ --color-overlay-rotate: rgba(20,12,5,0.95); --color-overlay-on-dark-text: rgba(255,255,255,0.7); --color-overlay-on-dark-text-faint: rgba(255,255,255,0.55); --color-overlay-pause-mobile: rgba(15,15,20,0.92); --shadow-floating-btn: 0 4px 14px rgba(0,0,0,0.18); --color-pause-btn: rgba(45,45,52,0.85); --color-exit-btn: rgba(255,107,107,0.9); --shadow-exit-confirm: 0 6px 16px rgba(255,107,107,0.4); /* Mobile soft card shadow (pill chrome). */ --shadow-soft-card: 0 2px 10px rgba(0,0,0,0.06); /* Mobile final-vote minus button (subtract action). */ --color-final-vote-minus: #e94560; /* خلاط word bank — paper-card pills + dashed answer area. */ --color-word-pill-bg: #FFFFFF; --color-word-pill-text: #333333; --color-word-pill-border: rgba(0,0,0,0.08); --shadow-word-pill: 0 2px 4px rgba(0,0,0,0.06); --shadow-word-pill-active: 0 1px 2px rgba(0,0,0,0.05); --color-answer-area-bg: #FFFFFF; --color-answer-area-border: rgba(0,0,0,0.15); --color-answer-word-text: #000; --color-answer-word-underline: #ccc; --color-answer-word-active-bg: rgba(255,0,0,0.08); /* Mint (accent-teal) glow — done card, voted banner, vote-selected. */ --shadow-teal-card: 0 10px 28px rgba(6,214,160,0.45); --shadow-teal-card-soft: 0 6px 18px rgba(6,214,160,0.38); --shadow-teal-card-faint: 0 8px 22px rgba(6,214,160,0.28); --shadow-teal-vote: 0 8px 24px rgba(6,214,160,0.45); /* ── Legacy aliases ── kept so existing rules referencing the old single-letter names (--bg, --card, --text, --primary, --muted, --accent-*) continue to work without sweeping every selector. */ --bg: var(--color-bg); --card: var(--color-card); --input-bg: var(--color-surface-2); --text: var(--color-text); --muted: var(--color-muted); --primary: var(--color-primary); --primary-dark: var(--color-primary-dark); --accent-pink: var(--color-accent-pink); --accent-yellow: var(--color-accent-yellow); --accent-teal: var(--color-accent-teal); } /* ════════════════════════════════════════════════════════════════════════ Per-mode theming — re-binds primary + surfaces to the mode's hue. The body sets data-theme="faker" or "khallat" once a mode is picked. ════════════════════════════════════════════════════════════════════════ */ body[data-theme="faker"] { --color-bg: #F0E8DF; --color-card: #FFF6EE; --color-surface-2: #E8DDD4; --color-primary: #9B3D15; --color-primary-dark: #7A2E0E; --color-primary-soft: #F2D9C8; --shadow: 0 8px 24px rgba(155, 61, 21, 0.18); --shadow-lg: 0 14px 36px rgba(155, 61, 21, 0.28); --shadow-primary: 0 8px 20px rgba(155, 61, 21, 0.30); /* re-bind legacy aliases */ --bg: var(--color-bg); --card: var(--color-card); --input-bg: var(--color-surface-2); --primary: var(--color-primary); --primary-dark: var(--color-primary-dark); } body[data-theme="khallat"] { --color-bg: #EEF9F5; --color-card: #FFFFFF; --color-surface-2: #DFF5EE; --color-primary: #0B8A5E; --color-primary-dark: #076B49; --color-primary-soft: #C8EFE2; --shadow: 0 8px 24px rgba(11, 138, 94, 0.15); --shadow-lg: 0 14px 36px rgba(11, 138, 94, 0.22); --shadow-primary: 0 8px 20px rgba(11, 138, 94, 0.35); --bg: var(--color-bg); --card: var(--color-card); --input-bg: var(--color-surface-2); --primary: var(--color-primary); --primary-dark: var(--color-primary-dark); } /* ════════════════════════════════════════════════════════════════════════ Base reset — applied to both host & player so the typography behaves consistently and emojis render via the shared font stack. ════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); transition: background var(--dur-slow) var(--ease-out-soft); } /* ════════════════════════════════════════════════════════════════════════ Reduced motion — honor the OS setting. We collapse durations to ~0, strip iteration counts off looping ambient animations (so the final frame stays put), and turn fancy easings into linear. Functional feedback (toggle knob slide, button press) still works because the "after" state is reached instantly rather than removed. ════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: var(--dur-instant); --dur-base: var(--dur-instant); --dur-slow: var(--dur-instant); --dur-cinematic: var(--dur-instant); --ease-out-soft: linear; --ease-in-soft: linear; --ease-spring-pop: linear; --ease-bounce: linear; --ease-out: linear; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }