/* ===================================================================== Guess the Flag — premium glass theme Single warm accent, dark + light themes, frosted-glass surfaces. Mobile-first; desktop just gets a centered max-width column. Theme switches by toggling [data-theme="dark|light"] on . ===================================================================== */ /* --- Tokens ---------------------------------------------------------- */ :root { /* Spacing / radii / motion are theme-independent. */ --radius: 20px; --radius-md: 14px; --radius-sm: 10px; --radius-pill: 999px; --tap: 52px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; /* Single warm accent reused everywhere — premium product, no rainbow. */ --accent: #f5c77e; --accent-soft: rgba(245, 199, 126, 0.18); --good: #7ce0b4; --good-soft: rgba(124, 224, 180, 0.16); --bad: #ec7986; --bad-soft: rgba(236, 121, 134, 0.16); } /* --- Dark theme (default) ------------------------------------------- */ :root, [data-theme="dark"] { --bg-base: #0a0d18; --bg-glow-1: rgba(245, 199, 126, 0.10); /* faint warm halo */ --bg-glow-2: rgba(120, 140, 200, 0.10); /* faint cool halo */ --surface: rgba(255, 255, 255, 0.045); --surface-strong: rgba(255, 255, 255, 0.075); --surface-hover: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #eef0f6; --text-dim: rgba(238, 240, 246, 0.62); --text-faint: rgba(238, 240, 246, 0.38); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30); } /* --- Light theme ----------------------------------------------------- */ [data-theme="light"] { --bg-base: #f3f4f8; --bg-glow-1: rgba(245, 199, 126, 0.18); --bg-glow-2: rgba(140, 160, 220, 0.16); --surface: rgba(255, 255, 255, 0.55); --surface-strong: rgba(255, 255, 255, 0.78); --surface-hover: rgba(255, 255, 255, 0.92); --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.14); --text: #0e1525; --text-dim: rgba(14, 21, 37, 0.62); --text-faint: rgba(14, 21, 37, 0.40); --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.10); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07); } /* --- Reset-ish ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input { font: inherit; color: inherit; } ul { list-style: none; padding: 0; margin: 0; } /* --- Page shell ------------------------------------------------------ */ html { color-scheme: dark; } [data-theme="light"] html, html[data-theme="light"] { color-scheme: light; } body { font-family: var(--font); color: var(--text); background: radial-gradient(ellipse 80% 50% at 20% 0%, var(--bg-glow-1) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 80% 100%, var(--bg-glow-2) 0%, transparent 60%), var(--bg-base); background-attachment: fixed; min-height: 100dvh; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; transition: background-color 320ms var(--ease), color 320ms var(--ease); } /* * Noise / grain overlay — a fixed, pointer-blocking layer that sits above * the body background and below all content. Keeps the page from looking * "too clean" on dark mode, very subtle on light. Inline SVG turbulence * filter via data URL — no external image required. * * Tuned by `opacity` per theme, since dark mode tolerates more grain. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.07; mix-blend-mode: overlay; } [data-theme="light"] body::before { opacity: 0.045; mix-blend-mode: multiply; } /* Make sure all real content sits above the noise layer. */ #app, #toast, .confetti-piece, .victory-burst, .topbar { position: relative; z-index: 1; } .topbar { z-index: 10; } #toast, .confetti-piece, .victory-burst { z-index: 9998; } #app { max-width: 520px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); min-height: 100dvh; display: flex; flex-direction: column; position: relative; } /* --- Glass primitive ------------------------------------------------- */ .glass { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: var(--shadow-md); } /* --- Top bar (theme toggle) ----------------------------------------- */ .topbar { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; display: flex; gap: 8px; z-index: 10; } .icon-btn { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text); transition: background 200ms var(--ease), transform 120ms var(--ease); } .icon-btn:hover { background: var(--surface-hover); } .icon-btn:active { transform: scale(0.94); } .theme-toggle .icon-light { display: none; } [data-theme="light"] .theme-toggle .icon-dark { display: none; } [data-theme="light"] .theme-toggle .icon-light { display: inline; } /* Sound toggle — same pattern as theme. The `data-muted` attr is set on by sound.js, so CSS-only icon swap. */ .sound-toggle .icon-off { display: none; color: var(--text-faint); } [data-muted] .sound-toggle .icon-on { display: none; } [data-muted] .sound-toggle .icon-off { display: inline; } .sound-toggle .icon-on { color: var(--accent); } /* --- Screen system --------------------------------------------------- */ .screen { display: none; flex: 1; flex-direction: column; gap: 16px; animation: fadeIn 260ms var(--ease); } .screen-active { display: flex; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* --- Buttons --------------------------------------------------------- */ .btn { min-height: var(--tap); padding: 14px 20px; border-radius: var(--radius); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform 100ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease); border: 1px solid transparent; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: #1a1206; font-weight: 700; box-shadow: 0 8px 28px var(--accent-soft); } .btn-primary:hover { filter: brightness(1.05); } .btn-secondary { background: var(--surface-strong); color: var(--text); border-color: var(--border-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .btn-secondary:hover { background: var(--surface-hover); } .btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--border); } .btn-ghost:hover { background: var(--surface); color: var(--text); } .btn-link { color: var(--accent); font-weight: 600; font-size: 14px; padding: 6px 8px; min-height: 0; } .btn-link:hover { text-decoration: underline; } .back { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 8px; width: 44px; height: 44px; font-size: 22px; color: var(--text-dim); border-radius: var(--radius-pill); } .back:hover { color: var(--text); background: var(--surface); } /* ===================================================================== MENU SCREEN ===================================================================== */ .hero { text-align: center; margin: 32px 0 8px; } .hero-flag { font-size: 56px; filter: drop-shadow(0 6px 24px rgba(245, 199, 126, 0.35)); display: inline-block; animation: floaty 4.5s ease-in-out infinite; } /* Make sure [hidden] wins against the .hero-flag display rule. */ .hero-flag[hidden] { display: none; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* 3D globe canvas. Sized fixed so the layout doesn't jump while Three.js is downloading. The radial glow underneath gives the globe a "presence" before the texture loads. */ .globe-canvas { width: 240px; height: 240px; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; } .globe-canvas::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle at center, var(--accent-soft) 0%, transparent 60%); filter: blur(20px); z-index: -1; pointer-events: none; } .globe-canvas canvas { display: block; border-radius: 50%; } @media (min-width: 600px) { .globe-canvas { width: 280px; height: 280px; } } .hero h1 { font-size: 34px; margin: 16px 0 6px; letter-spacing: -0.025em; font-weight: 700; } .tagline { margin: 0; color: var(--text-dim); font-size: 15px; letter-spacing: -0.005em; } .menu-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .menu-card { display: flex; align-items: center; gap: 14px; padding: 18px 18px; min-height: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); text-align: left; transition: background 200ms var(--ease), transform 120ms var(--ease), border-color 200ms var(--ease); } .menu-card:hover { background: var(--surface-hover); border-color: var(--border-strong); } .menu-card:active { transform: scale(0.99); } .menu-card .menu-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .menu-card .menu-text { display: flex; flex-direction: column; gap: 2px; flex: 1; } .menu-card .menu-label { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .menu-card .menu-sub { font-size: 13px; color: var(--text-dim); } .menu-card .menu-arrow { color: var(--text-faint); font-size: 18px; } .menu-footer { margin-top: auto; text-align: center; font-size: 12px; color: var(--text-faint); padding-top: 16px; letter-spacing: 0.02em; } /* The featured (daily) card pops a bit more so it's clearly the "most important thing today". Soft accent ring + slight tint. */ .menu-card-featured { border-color: var(--border-strong); background: linear-gradient(135deg, var(--accent-soft), var(--surface)); } .menu-card-featured .menu-icon { background: var(--accent); color: #1a1206; } .menu-card-featured[data-state="done"] { background: var(--surface); opacity: 0.85; } .menu-card-featured[data-state="done"] .menu-icon { background: var(--good-soft); color: var(--good); } /* Profile badge under the menu cards. Click → stats screen. */ .profile-badge { margin: 18px auto 0; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; align-self: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background 200ms var(--ease), color 200ms var(--ease); } .profile-badge:hover { background: var(--surface-hover); color: var(--text); } .profile-badge .profile-divider { color: var(--text-faint); } #profile-level { color: var(--accent); } /* ===================================================================== NICKNAME SCREEN ===================================================================== */ #screen-nickname { justify-content: center; } #screen-nickname h2 { text-align: center; margin: 56px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } #screen-nickname input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; font-size: 18px; text-align: center; outline: none; color: var(--text); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: border-color 200ms var(--ease), background 200ms var(--ease); } #screen-nickname input::placeholder { color: var(--text-faint); } #screen-nickname input:focus { border-color: var(--accent); background: var(--surface-strong); } #join-code-input { text-transform: uppercase; letter-spacing: 12px; font-weight: 700; font-size: 22px !important; font-feature-settings: "tnum"; } /* ===================================================================== LOBBY ===================================================================== */ #screen-lobby h2 { text-align: center; margin: 12px 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .room-code-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 18px; text-align: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .room-code-label { font-size: 11px; letter-spacing: 2.5px; color: var(--text-faint); text-transform: uppercase; font-weight: 600; } .room-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 44px; font-weight: 700; letter-spacing: 10px; color: var(--accent); margin: 8px 0 4px; font-feature-settings: "tnum"; } .player-list-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .player-list-header { font-size: 11px; letter-spacing: 2px; color: var(--text-faint); text-transform: uppercase; margin-bottom: 12px; font-weight: 600; } .player-list { display: flex; flex-direction: column; gap: 6px; } .player-list li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 15px; animation: slideIn 240ms var(--ease); } .player-list li.is-host::before { content: "★ "; color: var(--accent); margin-right: 4px; } .player-list li.is-me { border-color: var(--accent); background: var(--accent-soft); } .player-list .player-score { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; } @keyframes slideIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } } .muted { color: var(--text-faint); text-align: center; font-size: 13px; margin: 4px 0; } /* ===================================================================== GAME SCREEN ===================================================================== */ .game-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); /* Reserve room for the floating theme toggle in the top-right corner. */ margin-right: 64px; } .hud-cell { background: var(--surface); text-align: center; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .hud-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-faint); font-weight: 600; } .hud-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.02em; } .hud-value.is-accent { color: var(--accent); } .timer-wrap { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; } .timer-bar { height: 100%; width: 100%; background: var(--accent); transform-origin: left; } .flag-stage { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .flag-stage img { max-width: 88%; max-height: 88%; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); animation: popIn 320ms var(--ease); } @keyframes popIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .option { min-height: 64px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; font-weight: 500; font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 180ms var(--ease); } .option:hover { background: var(--surface-hover); border-color: var(--border-strong); } .option:active { transform: scale(0.98); } .option.is-correct { background: var(--good-soft); color: var(--good); border-color: var(--good); } .option.is-wrong { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); animation: shakeBad 320ms var(--ease); } .option.is-muted { opacity: 0.45; } @keyframes shakeBad { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } } .reaction { text-align: center; font-weight: 500; font-size: 15px; min-height: 22px; color: var(--text); } .reaction-fact { display: none; /* moved to the country detail panel */ } /* Subtle screen-shake on wrong */ .shake { animation: screenShake 320ms var(--ease); } @keyframes screenShake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 0); } } /* ===================================================================== COUNTRY DETAIL PANEL (the big reveal) ===================================================================== */ #country-panel { display: none; flex-direction: column; gap: 12px; animation: fadeIn 260ms var(--ease); /* These get overwritten per-country by colorExtractor.js — they default to the global amber accent so the panel always looks intentional even while extraction is in flight. */ --country-accent: var(--accent); --country-accent-soft: var(--accent-soft); /* Smooth transition when the per-country color swaps in. */ transition: --country-accent 400ms var(--ease); } #country-panel.is-visible { display: flex; } /* Subtle ambient halo around the panel that matches the country's color. */ #country-panel.is-visible::before { content: ""; position: absolute; left: -20px; right: -20px; top: -20px; bottom: -20px; background: radial-gradient(ellipse at top, var(--country-accent-soft, transparent) 0%, transparent 70%); filter: blur(28px); pointer-events: none; z-index: -1; opacity: 0.6; transition: background 400ms var(--ease); } .cp-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* When the cinematic hero is visible the mini-flag header is redundant (same name + region). Hide it; the hero is the title in that case. */ #country-panel:has(.cp-hero:not([hidden])) .cp-header { display: none; } .cp-flag { width: 56px; height: 38px; border-radius: 4px; flex-shrink: 0; object-fit: cover; background: var(--border); } .cp-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .cp-name { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-region { font-size: 13px; color: var(--text-dim); } /* Cinematic hero — full-bleed Wikipedia photo with a gradient scrim and the country name + region overlaid at the bottom-left. */ .cp-hero { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .cp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 400ms var(--ease); } .cp-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.78) 100%), radial-gradient(ellipse at top right, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 100%); pointer-events: none; } .cp-hero-overlay { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; z-index: 1; } .cp-hero-name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); } .cp-hero-region { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); } .cp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cp-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* Required so the value's text-overflow:ellipsis can clip — by default grid items size to content's intrinsic min-width and overflow the cell. */ min-width: 0; } .cp-stat-label { font-size: 10px; letter-spacing: 1.5px; color: var(--text-faint); text-transform: uppercase; font-weight: 600; } .cp-stat-value { font-size: 14px; font-weight: 600; margin-top: 2px; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-fact { background: var(--country-accent-soft, var(--accent-soft)); border: 1px solid var(--border); border-left: 3px solid var(--country-accent, var(--accent)); border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--text); font-style: italic; transition: background 400ms var(--ease), border-color 400ms var(--ease); } .cp-intro { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--text); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .cp-actions { display: flex; gap: 8px; margin-top: 4px; } .cp-actions .btn { flex: 1; } .cp-actions .btn-link { flex: 0 0 auto; align-self: center; } /* ===================================================================== ROUND-END (multiplayer between rounds) + RESULTS ===================================================================== */ #screen-round-end h2, #screen-results h2 { text-align: center; margin: 28px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .round-end-correct { text-align: center; font-size: 16px; margin: 4px 0; color: var(--text-dim); } .round-end-correct strong { color: var(--accent); font-weight: 600; } .round-end-fact { text-align: center; color: var(--text-dim); font-style: italic; font-size: 13px; margin: 0 0 12px; line-height: 1.5; } .results-score { text-align: center; font-size: 56px; font-weight: 700; color: var(--accent); margin: 12px 0; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .results-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } /* ===================================================================== STATS SCREEN ===================================================================== */ .stats-title { text-align: center; margin: 28px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .stats-hero { text-align: center; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .stats-hero-level { font-size: 44px; font-weight: 700; color: var(--accent); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stats-hero-xp { margin-top: 4px; font-size: 13px; color: var(--text-dim); letter-spacing: 0.02em; text-transform: uppercase; } .stats-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stats-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; min-width: 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .stats-tile-label { font-size: 10px; letter-spacing: 1.5px; color: var(--text-faint); text-transform: uppercase; font-weight: 600; } .stats-tile-value { font-size: 22px; font-weight: 700; margin-top: 2px; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; } .stats-section-title { margin-top: 16px; font-size: 11px; letter-spacing: 2px; color: var(--text-faint); text-transform: uppercase; font-weight: 600; } .stats-continents { display: flex; flex-direction: column; gap: 6px; } .stats-continent { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; position: relative; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Soft progress bar baked into the card via a pseudo-element. */ .stats-continent-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); pointer-events: none; z-index: 0; } .stats-continent-name, .stats-continent-value { position: relative; z-index: 1; } .stats-continent-value { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; } /* ===================================================================== SHARE CARD ===================================================================== */ .share-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin: 8px 0 4px; display: flex; flex-direction: column; gap: 10px; align-items: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .share-grid { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 26px; letter-spacing: 4px; line-height: 1; } .share-summary { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .share-btn { align-self: stretch; } /* ===================================================================== CONFETTI — restrained, fewer pieces, premium feel ===================================================================== */ .confetti-piece { position: fixed; top: -20px; --drift: 0vw; --spin: 540deg; pointer-events: none; z-index: 9999; animation: confettiFall linear forwards; opacity: 0.9; /* The per-piece transform is composed in the keyframe; using vars means each piece flies on its own arc with its own spin. */ will-change: transform, opacity; } .confetti-rect { width: 8px; height: 12px; border-radius: 1px; } .confetti-circle { width: 8px; height: 8px; border-radius: 50%; } .confetti-ribbon { width: 4px; height: 18px; border-radius: 2px; transform-origin: 50% 0; } @keyframes confettiFall { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 10% { opacity: 0.95; } 100% { transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)); opacity: 0; } } /* Victory sunburst — full-screen radial flash that scales in then out. */ .victory-burst { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 9998; animation: victoryFade 1500ms var(--ease) forwards; } .victory-burst svg { width: min(70vw, 420px); height: min(70vw, 420px); animation: victoryScale 1500ms var(--ease) forwards; filter: drop-shadow(0 0 60px rgba(245, 199, 126, 0.55)); } @keyframes victoryScale { 0% { transform: scale(0.2) rotate(0); opacity: 0; } 20% { transform: scale(1.05) rotate(90deg); opacity: 1; } 100% { transform: scale(1.4) rotate(220deg); opacity: 0; } } @keyframes victoryFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } /* ===================================================================== TOAST ===================================================================== */ #toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--surface-strong); color: var(--text); border: 1px solid var(--border-strong); padding: 10px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; pointer-events: none; opacity: 0; transition: opacity 200ms var(--ease), transform 200ms var(--ease); z-index: 10000; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } #toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(-4px); } /* ===================================================================== Larger screens ===================================================================== */ @media (min-width: 600px) { .hero h1 { font-size: 40px; } .options { gap: 12px; } .option { font-size: 16px; } }