/* Lingua Mixta — Mercado / Tropicál design system. Light/dark via [data-theme] on . Tokens follow the design handoff (design_handoff/README.md). Old --bg/--fg/etc. names kept for backwards compatibility with components written before the redesign. */ :root { --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-sans: var(--font-body); /* legacy alias */ --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --radius: 8px; --radius-sm: 6px; --radius-card: 12px; --radius-pill: 999px; /* Diamond motif palette — same across light/dark */ --diamond-1: #E55A2B; --diamond-2: #FFC230; --diamond-3: #0F7A4A; /* Activity tile gradients — same across light/dark */ --tile-primary-from: #E55A2B; --tile-primary-to: #B03E18; --tile-secondary-from:#FFC230; --tile-secondary-to: #C99A22; --tile-tertiary-from: #0F7A4A; --tile-tertiary-to: #0A5836; /* Felt: cantonese-pack jade billiard surface — matches the in-game backdrop on the Tile Solitaire screens. */ --tile-felt-from: #0E5340; --tile-felt-to: #073527; } /* Tropicál — Light */ html[data-theme="light"] { --bg: #FFF6E8; --card-bg: #FFFCF4; --band-bg: #FBE7CB; --bg-elev: var(--card-bg); /* legacy aliases */ --bg-elev-2: var(--band-bg); --ink: #2A1A04; --ink-soft: #7A5C2A; --fg: var(--ink); --fg-muted: var(--ink-soft); --line: #F0DBB0; --border: var(--line); --accent: #E55A2B; --accent-fg: #FFFCF4; --brand-accent: #0F7A4A; --nav-bg: rgba(255, 246, 232, 0.92); --motif-opacity: 0.28; --success: #0F7A4A; --danger: #C8392B; --hover: #FBE7CB; } /* Tropicál — Dark */ html[data-theme="dark"] { --bg: #1B0F03; --card-bg: #241606; --band-bg: #1F1304; --bg-elev: var(--card-bg); --bg-elev-2: var(--band-bg); --ink: #FCE6C2; --ink-soft: #B08850; --fg: var(--ink); --fg-muted: var(--ink-soft); --line: #3A2410; --border: var(--line); --accent: #FF7B45; --accent-fg: #1B0F03; --brand-accent: #3FB075; --nav-bg: rgba(27, 15, 3, 0.92); --motif-opacity: 0.22; --success: #3FB075; --danger: #E85645; --hover: #1F1304; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.02em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ----- Diamond motif band (full-bleed, top of pages) ----- */ .diamond-band { width: 100%; height: 14px; display: block; opacity: var(--motif-opacity); } .diamond-band svg { display: block; width: 100%; height: 100%; } /* ----- Site header / navbar ----- */ .site-header { background: var(--nav-bg); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; } .nav { max-width: 1180px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } @media (max-width: 640px) { .nav { padding: 12px 20px; } } .brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); } .brand:hover { text-decoration: none; } .brand-mark { height: 32px; width: auto; display: block; } .brand-text .mixta { font-style: italic; font-weight: 700; color: var(--brand-accent); } /* Legacy aliases — old templates still reference .brand-logo */ .brand-logo { height: 32px; width: auto; display: block; } .brand-logo-mono { color: var(--ink); } .hero-logo { max-width: 720px; width: 100%; height: auto; display: block; margin: 0 auto 1.5rem; } .auth-logo { max-width: 360px; width: 100%; height: auto; display: block; margin: 0 auto 1rem; } .hero { text-align: center; } /* Hero/auth-card legacy hero logos baked dark text into the SVG — keep the invert trick so they remain legible in dark mode. The new mark-tropical SVG is gradient-only (no dark text) so this filter doesn't apply to it. */ html[data-theme="dark"] .hero-logo, html[data-theme="dark"] .auth-logo { filter: invert(1) hue-rotate(180deg); } .nav-links { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; } .nav-links a, .nav-links .link-button { font-family: var(--font-body); font-size: 14px; font-weight: 450; color: var(--ink-soft); letter-spacing: 0.01em; position: relative; padding: 6px 0; transition: color 0.12s; } .nav-links a:hover, .nav-links .link-button:hover { color: var(--ink); text-decoration: none; } .nav-links a.active { color: var(--accent); font-weight: 600; } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); border-radius: 2px; } .nav-divider { display: inline-block; width: 1px; height: 16px; background: var(--line); } .logout-form { display: inline; margin: 0; padding: 0; } .link-button { background: none; border: none; color: var(--fg-muted); cursor: pointer; font: inherit; padding: 0; } /* Global sound toggle in the navbar. Inherits the nav-link ink-soft color so it sits quietly next to the link list. Muted state turns it dark red and swaps the sound waves for a slash. The shake animation fires when an app calls linguaCanPlaySound() and gets blocked — visual reminder that audio is off. */ .nav-sound { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink-soft); border-radius: 4px; transition: color 0.12s, background 0.12s; } .nav-sound:hover { color: var(--ink); background: rgba(0, 0, 0, 0.05); } .nav-sound .nav-sound-slash { display: none; } .nav-sound-muted { color: #8B0000; } /* dark red — clearly "off" */ .nav-sound-muted:hover { color: #B30000; background: rgba(139, 0, 0, 0.08); } .nav-sound-muted .nav-sound-wave { display: none; } .nav-sound-muted .nav-sound-slash { display: inline; } @keyframes nav-sound-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px) rotate(-3deg); } 40% { transform: translateX(4px) rotate(3deg); } 60% { transform: translateX(-3px) rotate(-2deg); } 80% { transform: translateX(3px) rotate(2deg); } } .nav-sound-shaking { animation: nav-sound-shake 0.55s ease-in-out; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .link-button:hover { color: var(--fg); } .container { max-width: 1180px; margin: 0 auto; padding: 32px; } @media (max-width: 640px) { .container { padding: 24px 20px; } } /* ===== Hero ===== */ .hero-stage { text-align: center; padding: 64px 32px 40px; } .hero-stage .hero-row { display: inline-flex; align-items: center; gap: 28px; margin-bottom: 24px; } @media (max-width: 640px) { .hero-stage { padding: 40px 16px 24px; } .hero-stage .hero-row { flex-direction: column; gap: 12px; } } .hero-mark { height: 132px; width: auto; display: block; } .hero-text { text-align: left; } .hero-text h1 { font-family: var(--font-display); font-size: 88px; font-weight: 600; letter-spacing: -0.035em; line-height: 0.95; margin: 0; color: var(--ink); } .hero-text h1 .mixta { font-style: italic; font-weight: 700; color: var(--brand-accent); } @media (max-width: 720px) { .hero-text h1 { font-size: 56px; } .hero-text { text-align: center; } } .hero-tagline { margin-top: 12px; font-family: var(--font-display); font-size: 18px; font-style: italic; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-soft); } .hero-welcome { font-size: 17px; color: var(--ink-soft); max-width: 520px; margin: 28px auto 0; line-height: 1.5; } .hero-welcome strong { color: var(--accent); font-weight: 600; } /* Old hero (used by core/home.html legacy template) */ .hero h1 { font-size: 2rem; margin-bottom: 0.25rem; } .lede { color: var(--fg-muted); font-size: 1.05rem; } /* ===== Generic page header — used by every non-activities page ===== */ .page-header { margin: 16px 0 32px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; } .page-header h1 { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -0.025em; margin: 0; color: var(--ink); } .page-header .page-eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 6px; } .page-header .page-desc { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; flex-basis: 100%; } .page-header-actions { display: flex; gap: 12px; align-items: center; } .page-header-actions a { color: var(--accent); font-size: 14px; } /* ===== Voice settings (account settings page) ===== */ .voice-section { border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; padding: 14px 16px; margin: 14px 0; } .voice-section legend { font-family: 'Inter Tight', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent, #D14B2C); font-weight: 700; padding: 0 6px; } .voice-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin: 14px 0 18px; } .voice-bucket h3 { font-size: 13px; letter-spacing: 0.06em; margin: 0 0 6px; } .voice-bucket-list { display: flex; flex-direction: column; gap: 6px; } .voice-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; background: rgba(0,0,0,0.03); border-radius: 4px; font-size: 13px; } .voice-row-name { min-width: 0; word-break: break-word; } .voice-row-guess { display: inline-block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, #D14B2C); margin-left: 6px; } .voice-row-radios { display: flex; gap: 6px; } .voice-radio { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; cursor: pointer; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); } .voice-radio:has(input:checked) { background: var(--accent, #D14B2C); color: #fff; border-color: var(--accent, #D14B2C); } .voice-radio input { margin: 0; } .voice-audition-btn { background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.18); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-weight: 600; white-space: nowrap; } .voice-audition-btn:hover { background: rgba(0,0,0,0.12); } .voice-routing { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(0,0,0,0.15); } .voice-routing h3 { font-size: 13px; letter-spacing: 0.06em; margin: 0 0 6px; } .voice-routing-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; } .voice-routing-row > span { flex: 1; } .voice-routing select { padding: 4px 8px; border: 1px solid rgba(0,0,0,0.18); border-radius: 4px; font-size: 13px; } /* ===== Activity grid (Activities landing) ===== */ .activity-section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 24px; max-width: 980px; margin-left: auto; margin-right: auto; } .activity-section-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin: 0; letter-spacing: -0.01em; color: var(--ink); } .activity-section-head .pair-label { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.02em; } .activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; } @media (max-width: 800px) { .activity-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .activity-grid { grid-template-columns: 1fr; } } .activity-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); transition: transform 0.15s ease, border-color 0.15s ease; overflow: hidden; } .activity-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); text-decoration: none; } .activity-card.is-soon { opacity: 0.78; cursor: default; } .activity-card.is-soon:hover { transform: none; border-color: var(--line); } .activity-tile { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .activity-tile.tone-primary { background: linear-gradient(180deg, var(--tile-primary-from) 0%, var(--tile-primary-to) 100%); } .activity-tile.tone-secondary{ background: linear-gradient(180deg, var(--tile-secondary-from) 0%, var(--tile-secondary-to) 100%); } .activity-tile.tone-tertiary { background: linear-gradient(180deg, var(--tile-tertiary-from) 0%, var(--tile-tertiary-to) 100%); } .activity-tile.tone-felt { /* Bigger fibers + higher contrast than the in-game felt — this is a thumbnail-scale felt, so the texture has to read at a glance. Fiber stripes ~3px on a ~10px pitch give the eye something pickup-able. */ background: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 10px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 11px), radial-gradient(120% 80% at 50% 30%, var(--tile-felt-from) 0%, var(--tile-felt-to) 100%); position: relative; /* Double-line brass frame (carved-stone-trim feel). Three stacked inset rings: 2px brass / 2px deep gap / 2px brass = 6px total, same recipe as the cantonese pack's edge palette. */ box-shadow: inset 0 0 0 2px #C2A858, inset 0 0 0 4px rgba(0,0,0,0.55), inset 0 0 0 6px #C2A858; } /* Inset gap for the SVG so the framing rings don't get clipped by the tile-img object-fit. Felt shows through the gap as a small margin around the carved tile. The filter brightens the sandstone (the SVG itself is rendered with darker pre-baked shadows for the in-game scale; at thumbnail size it reads dull, so we lift it). */ .activity-tile.tone-felt .activity-tile-img { width: calc(100% - 12px); height: calc(100% - 12px); margin: 6px; filter: brightness(1.14) saturate(1.06) contrast(1.03); } .activity-tile.tile-cartouche { background: #000; padding: 0; } .activity-tile .cartouche-img { width: 100%; height: 100%; object-fit: cover; display: block; } .activity-tile .activity-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; } .activity-tile svg { display: block; width: 100%; height: 100%; } .activity-tile-emoji { font-size: 56px; line-height: 1; color: rgba(255, 248, 235, 0.96); } .activity-card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .activity-card-meta h3 { font-family: var(--font-display); font-size: 18px; font-weight: 550; margin: 0; letter-spacing: -0.01em; color: var(--ink); } .activity-card-stat { font-family: var(--font-body); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.05em; white-space: nowrap; } .activity-card-soon { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); padding: 3px 7px; background: var(--line); border-radius: var(--radius-pill); } .activity-card-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 6px 0 0; } /* ===== Vocabulary band (on activities landing) ===== */ .vocab-band { margin-top: 40px; max-width: 980px; margin-left: auto; margin-right: auto; padding: 24px 28px; background: var(--band-bg); border: 1px solid var(--line); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .vocab-band-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .vocab-band-stats { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .vocab-band-count { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); } .vocab-band-detail { font-size: 14px; color: var(--ink-soft); } .vocab-band-detail strong { color: var(--accent); font-weight: 600; } .vocab-band .btn-primary { white-space: nowrap; } /* ===== Phrase of the day card (the "mixta moment") ===== */ .phrase-card { position: relative; margin-top: 32px; max-width: 980px; margin-left: auto; margin-right: auto; padding: 32px 56px; border: 1px dashed var(--line); border-radius: var(--radius-card); } .phrase-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; } .phrase-card-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .phrase-card-date-wrap { position: relative; } .phrase-card-date { font-family: var(--font-display, inherit); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap; transition: color 120ms, border-color 120ms; } .phrase-card-date:hover, .phrase-card-date:focus-visible { color: var(--ink); border-color: var(--ink-soft); } /* Native date input lives off-screen but stays interactive — we open it via showPicker() (or fallback click) when the user taps the visible date pill. Hidden via opacity/size, NOT display:none, so showPicker remains valid in browsers that require visibility. */ .phrase-card-date-picker { position: absolute; top: 0; right: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; } .phrase-card-empty { font-style: italic; color: var(--ink-soft); font-size: 18px !important; } .phrase-card-empty a { color: var(--accent); text-decoration: underline; } /* Prev/next nav arrows. Sit at the card edges. Fade in on hover for pointing devices; always visible on touch (no hover affordance). */ .phrase-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; user-select: none; transition: opacity 120ms, color 120ms, border-color 120ms; } .phrase-arrow:hover { color: var(--ink); border-color: var(--ink-soft); } .phrase-arrow-prev { left: 12px; } .phrase-arrow-next { right: 12px; } .phrase-arrow-disabled { opacity: 0.25; cursor: not-allowed; } @media (hover: hover) { .phrase-arrow { opacity: 0; } .phrase-card:hover .phrase-arrow, .phrase-arrow:focus-visible { opacity: 1; } .phrase-card:hover .phrase-arrow-disabled { opacity: 0.25; } } .phrase-card-body { font-family: var(--font-display); font-size: 28px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 450; margin: 0; color: var(--ink); } .phrase-card-body .target { color: var(--accent); font-style: italic; } .phrase-card-glosses { margin-top: 14px; font-size: 14px; color: var(--ink-soft); } .phrase-card-glosses strong { color: var(--accent); font-weight: 600; } /* Legacy .cards / .card classes used by core/home.html — kept for now */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; } .card { display: block; padding: 1.25rem; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--ink); } .card:hover { background: var(--hover); text-decoration: none; } .card h2 { margin: 0 0 0.5rem; font-size: 1.15rem; } .card p { margin: 0; color: var(--ink-soft); } .card-muted { opacity: 0.55; pointer-events: none; } /* App-tile grid (Activities landing) — phone-home-screen style. */ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.5rem 1rem; margin-top: 2rem; } .app-tile { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--fg); transition: transform 0.12s ease; } .app-tile:hover { text-decoration: none; transform: translateY(-2px); } .app-tile:hover .app-icon { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } .app-icon { width: 100%; aspect-ratio: 1; max-width: 160px; border-radius: 24%; overflow: hidden; background: var(--bg-elev-2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; transition: box-shadow 0.15s ease; } .app-icon img { display: block; width: 100%; height: 100%; object-fit: cover; } .app-icon-emoji { font-size: 3.5rem; line-height: 1; } .app-name { font-size: 0.95rem; font-weight: 600; text-align: center; color: var(--fg); line-height: 1.2; } .app-status { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.5px; } .app-tile-muted { cursor: default; } .app-tile-muted .app-icon { opacity: 0.5; } .app-tile-muted .app-name { color: var(--fg-muted); } .quick-links { margin-top: 2rem; display: flex; gap: 1.25rem; flex-wrap: wrap; } .auth-card { max-width: 420px; margin: 64px auto; padding: 32px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); text-align: center; } .auth-card h1 { margin: 16px 0 8px; font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.025em; } .auth-card form { text-align: left; margin-top: 24px; } .auth-card .auth-tagline { color: var(--ink-soft); font-style: italic; font-family: var(--font-display); font-size: 16px; margin: 0 0 4px; } .stack { display: flex; flex-direction: column; gap: 1rem; } .stack label { display: flex; flex-direction: column; gap: 0.35rem; } .stack label > span { font-weight: 500; color: var(--fg); } input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea { width: 100%; padding: 10px 12px; background: var(--card-bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-family: var(--font-body); transition: border-color 0.12s, box-shadow 0.12s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .btn-primary { padding: 12px 20px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; display: inline-block; transition: filter 0.12s, transform 0.05s; } .btn-primary:hover { filter: brightness(1.08); text-decoration: none; } .btn-primary:active { transform: translateY(1px); } .btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; filter: none; } .check-label { flex-direction: row !important; align-items: flex-start !important; gap: 0.65rem !important; } .check-label input[type="checkbox"] { width: auto; margin-top: 0.3rem; } .check-label small { display: block; color: var(--fg-muted); font-weight: 400; } .messages { list-style: none; padding: 0; margin: 1rem auto; max-width: 1100px; } .message { padding: 0.7rem 1rem; margin: 0.5rem 1.25rem; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); } .message-success { border-color: var(--success); } .message-error { border-color: var(--danger); } .muted { color: var(--fg-muted); } .form-errors { color: var(--danger); } .site-footer { margin-top: 64px; border-top: 1px solid var(--line); } .site-footer .site-footer-inner { max-width: 1180px; margin: 0 auto; padding: 32px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-soft); text-align: center; } .site-footer-inner p { margin: 0; } .site-footer-inner a { color: var(--accent); } /* While the chunked auto-translate is in flight on a field/form. */ .auto-translating { outline: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px; transition: outline-color 0.15s; } form.auto-translating .btn-primary { opacity: 0.6; cursor: progress; } /* Toast notifications (used by auto-translate when it's force-disabled). */ #lingua-toast-host { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 1000; pointer-events: none; } .lingua-toast { pointer-events: auto; max-width: 380px; padding: 0.8rem 1rem; background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: var(--radius); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); font-size: 0.9rem; transition: opacity 0.3s, transform 0.3s; } .lingua-toast-fade { opacity: 0; transform: translateY(8px); } /* ===== Gilded trivia stage (Million Dollar Trivia in-game screens) ===== Wraps question / feedback / result content in a Newport-drawing-room oxblood-and-gold framing that echoes the cartouche tile artwork. The class scopes its own gold variables so it doesn't have to mutate the site-wide palette. */ .trivia-stage-gilded { --gold: #E8C56A; --gold-light: #F8E8A8; --gold-deep: #8E6620; --gold-grad: linear-gradient(180deg, #F8E8A8, #E8C56A 35%, #C99A3E 55%, #8E6620 80%, #6A4A14); --field: #240509; --field-mid: #3A0F12; position: relative; margin: 8px 0; padding: 40px 36px; border-radius: var(--radius-card); background: radial-gradient(ellipse at 50% 22%, #5C1A1A 0%, var(--field-mid) 55%, var(--field) 100%); color: var(--gold-light); font-family: var(--font-body); } @media (max-width: 640px) { .trivia-stage-gilded { padding: 24px 16px; } } .trivia-stage-gilded::before, .trivia-stage-gilded::after { content: ""; position: absolute; border-radius: 8px; pointer-events: none; } .trivia-stage-gilded::before { inset: 8px; border: 1px solid rgba(232, 197, 106, 0.55); } .trivia-stage-gilded::after { inset: 13px; border: 1px solid rgba(232, 197, 106, 0.28); } .trivia-stage-gilded > * { position: relative; z-index: 1; } /* Bead-and-reel decorative band (rendered inline in the templates) */ .gilded-band { display: flex; justify-content: center; align-items: center; gap: 6px; margin: -6px 0 16px; } .gilded-band > span { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; opacity: 0.85; } .gilded-band > .gilded-bead-sm { width: 3px; height: 3px; opacity: 0.7; } .gilded-band > .gilded-rule { flex: 0 0 auto; width: 80px; height: 1px; background: var(--gold); opacity: 0.55; border-radius: 1px; } /* Money ladder, gilded */ .trivia-stage-gilded .money-ladder { background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(232, 197, 106, 0.4); border-radius: var(--radius-card); padding: 14px 10px; } .trivia-stage-gilded .money-ladder h3 { color: var(--gold); letter-spacing: 0.12em; border-bottom: 1px solid rgba(232, 197, 106, 0.3); padding-bottom: 8px; margin-bottom: 8px; } .trivia-stage-gilded .money-ladder li { color: rgba(248, 232, 168, 0.55); font-family: var(--font-display); letter-spacing: -0.01em; } .trivia-stage-gilded .money-ladder li.won { color: rgba(248, 232, 168, 0.88); } .trivia-stage-gilded .money-ladder li.current { background: linear-gradient(90deg, rgba(232,197,106,0.28), rgba(232,197,106,0.06)); color: #FFFCE5; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(232, 197, 106, 0.6); } .trivia-stage-gilded .money-ladder li.safe-haven { color: rgba(232, 197, 106, 0.95); font-weight: 600; } .trivia-stage-gilded .rung-badge { background: var(--gold-grad); color: var(--field); } /* Stage header & prompt */ .trivia-stage-gilded .trivia-stage-header { color: rgba(248, 232, 168, 0.75); } .trivia-stage-gilded .trivia-stage-header .muted { color: rgba(248, 232, 168, 0.7); } .trivia-stage-gilded .trivia-stage-header strong { color: var(--gold-light); } .trivia-stage-gilded .trivia-prompt { color: var(--gold-light); font-family: var(--font-display); font-size: 28px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); letter-spacing: -0.005em; margin: 16px 0 28px; } @media (max-width: 640px) { .trivia-stage-gilded .trivia-prompt { font-size: 20px; margin: 12px 0 20px; } } /* Options as gilded panels with embossed gold letter */ .trivia-stage-gilded .trivia-options { margin: 16px 0 28px; } .trivia-stage-gilded .trivia-option { background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(232, 197, 106, 0.4); color: var(--gold-light); font-family: var(--font-display); font-size: 16px; letter-spacing: 0.01em; padding: 14px 16px; transition: background 0.12s, border-color 0.12s, transform 0.06s; border-radius: var(--radius); } .trivia-stage-gilded .trivia-option:hover { background: rgba(232, 197, 106, 0.13); border-color: rgba(232, 197, 106, 0.85); transform: translateY(-1px); } .trivia-stage-gilded .trivia-option:active { transform: translateY(1px); } .trivia-stage-gilded .trivia-option-letter { background: var(--gold-grad); border: 1px solid rgba(232, 197, 106, 0.85); color: var(--field); text-shadow: 0 1px 0 rgba(248, 232, 168, 0.4); font-family: var(--font-display); font-weight: 700; width: 2.1rem; height: 2.1rem; } .trivia-stage-gilded .trivia-option-eliminated { opacity: 0.32; } .trivia-stage-gilded .trivia-option-eliminated .trivia-option-letter { background: rgba(232,197,106,0.18); color: rgba(248,232,168,0.4); } /* Actions row */ .trivia-stage-gilded .trivia-actions { border-top: 1px solid rgba(232, 197, 106, 0.3); padding-top: 18px; margin-top: 8px; } .trivia-stage-gilded .lifeline-btn { background: rgba(0, 0, 0, 0.3); color: var(--gold-light); border: 1px solid rgba(232, 197, 106, 0.4); padding: 9px 14px; font-family: var(--font-display); letter-spacing: 0.02em; } .trivia-stage-gilded .lifeline-btn:hover:not([disabled]) { background: rgba(232, 197, 106, 0.16); border-color: rgba(232, 197, 106, 0.85); } .trivia-stage-gilded .lifeline-btn[disabled] { text-decoration: line-through; color: rgba(248, 232, 168, 0.35); } .trivia-stage-gilded .walk-away-btn { background: transparent; color: rgba(248, 232, 168, 0.7); border: 1px solid rgba(232, 197, 106, 0.35); } .trivia-stage-gilded .walk-away-btn:hover { background: rgba(232, 197, 106, 0.1); color: var(--gold-light); border-color: rgba(232, 197, 106, 0.7); } /* Stakes & complain */ .trivia-stage-gilded .trivia-stakes { color: rgba(248, 232, 168, 0.65); text-align: center; margin-top: 14px; } .trivia-stage-gilded .trivia-stakes strong { color: var(--gold-light); } .trivia-stage-gilded .complain-btn { background: transparent; color: rgba(248, 232, 168, 0.55); border: 1px dashed rgba(232, 197, 106, 0.4); } .trivia-stage-gilded .complain-btn:hover:not([disabled]) { color: var(--gold-light); border-color: rgba(232, 197, 106, 0.85); } /* Lifeline result panels */ .trivia-stage-gilded .lifeline-result { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(232, 197, 106, 0.35); border-left: 3px solid var(--gold); color: var(--gold-light); } .trivia-stage-gilded .lifeline-result h4 { color: var(--gold); } .trivia-stage-gilded .audience-bar { background: rgba(0, 0, 0, 0.5); } .trivia-stage-gilded .audience-bar > span { background: var(--gold-grad); } .trivia-stage-gilded .audience-pct { color: rgba(248, 232, 168, 0.75); } .trivia-stage-gilded .audience-letter { color: var(--gold); } /* Feedback (Correct! / Not quite.) inside the gilded stage */ .trivia-stage-gilded .trivia-feedback { background: transparent; border: none; border-radius: 0; padding: 0; text-align: center; margin: 0; } .trivia-stage-gilded .trivia-feedback h1 { font-family: var(--font-display); font-size: 56px; font-weight: 600; letter-spacing: -0.03em; margin: 8px 0 12px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .trivia-stage-gilded .feedback-wrong-bg h1 { background: linear-gradient(180deg, #FFB7A8, #E8755C 50%, #A23A28 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .trivia-stage-gilded .trivia-prompt-recap { color: var(--gold-light); font-family: var(--font-display); font-size: 18px; margin-bottom: 16px; } .trivia-stage-gilded .trivia-correct-line { color: rgba(248, 232, 168, 0.88); font-size: 16px; } .trivia-stage-gilded .trivia-correct-line strong { color: var(--gold); } .trivia-stage-gilded .feedback-money { color: var(--gold-light); font-size: 18px; margin: 24px 0 32px; } .trivia-stage-gilded .feedback-money strong { color: var(--gold); font-family: var(--font-display); font-size: 28px; font-weight: 600; } .trivia-stage-gilded .btn-primary { background: var(--gold-grad); color: var(--field); font-weight: 700; letter-spacing: 0.03em; border: 1px solid rgba(232, 197, 106, 0.85); } .trivia-stage-gilded .btn-primary:hover { filter: brightness(1.08); } /* Result hero — celebratory gilded amount */ .trivia-stage-gilded .trivia-result-hero { background: transparent; border: none; padding: 0; text-align: center; } .trivia-stage-gilded .trivia-result-hero h1 { color: var(--gold-light); font-family: var(--font-display); margin: 8px 0; } .trivia-stage-gilded .result-headline { color: var(--gold); letter-spacing: 0.12em; } .trivia-stage-gilded .result-amount { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-display); font-size: 88px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 16px 0 12px; } @media (max-width: 640px) { .trivia-stage-gilded .result-amount { font-size: 56px; } .trivia-stage-gilded .trivia-feedback h1 { font-size: 36px; } } .trivia-stage-gilded .muted { color: rgba(248, 232, 168, 0.6); } .trivia-stage-gilded a { color: var(--gold-light); } .trivia-stage-gilded a:hover { color: var(--gold); } /* ===== Gilded page variant (settings, etc.) ===== Same backdrop / palette tokens as .trivia-stage-gilded but tuned for non-game pages: tighter top padding, optional inner section dividers, and styling for .page-header + cartouche-grid living inside. The .trivia-stage-page modifier just relaxes the in-game-only sizing so longer content (lists, forms) breathes. */ .trivia-stage-gilded.trivia-stage-page { padding: 32px 36px 36px; } /* page-header inside the gilded stage — flip text colours so they're readable on the dark backdrop. Ivory variant is handled separately below since its backdrop is cream. */ .trivia-stage-gilded .page-header h1 { color: var(--gold-light); } .trivia-stage-gilded .page-header .page-eyebrow { color: var(--gold); } .trivia-stage-gilded .page-header .page-desc { color: rgba(248, 232, 168, 0.75); } .trivia-stage-gilded .page-header-actions a { color: var(--gold-light); } .trivia-stage-gilded .page-header-actions a:hover { color: var(--gold); } /* Optional section divider inside the stage */ .gilded-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(232, 197, 106, 0.3); } .gilded-section h2 { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin: 0 0 4px; color: var(--gold-light); } .trivia-stage-gilded .muted { color: rgba(248, 232, 168, 0.7); } /* Cartouche options sitting on the gilded backdrop */ .trivia-stage-gilded .cartouche-option { background: rgba(0, 0, 0, 0.32); border-color: rgba(232, 197, 106, 0.3); } .trivia-stage-gilded .cartouche-option:hover { border-color: var(--gold); } .trivia-stage-gilded .cartouche-option.is-selected, .trivia-stage-gilded .cartouche-option:has(input[type="radio"]:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); } .trivia-stage-gilded .cartouche-name { color: var(--gold-light); } .trivia-stage-gilded .cartouche-sub { color: rgba(248, 232, 168, 0.65); } /* ---- Trivia sub-nav (Home / In-Play / History / Settings) ---- */ .trivia-nav { display: flex; justify-content: center; align-items: center; gap: 28px; margin: 0 -8px 24px; padding: 0 0 14px; border-bottom: 1px solid rgba(232, 197, 106, 0.28); flex-wrap: wrap; } .trivia-nav a, .trivia-nav-disabled { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(248, 232, 168, 0.65); padding: 6px 2px; position: relative; transition: color 0.12s; } .trivia-nav a:hover { color: var(--gold-light); text-decoration: none; } .trivia-nav a.active { color: var(--gold); } .trivia-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--gold); border-radius: 2px; } .trivia-nav-disabled { opacity: 0.4; cursor: not-allowed; } /* Ivory variant — light field, dark gold ink */ .trivia-stage-gilded.gilded-ivory .trivia-nav { border-bottom-color: rgba(142, 102, 32, 0.4); } .trivia-stage-gilded.gilded-ivory .trivia-nav a, .trivia-stage-gilded.gilded-ivory .trivia-nav-disabled { color: rgba(90, 61, 14, 0.65); } .trivia-stage-gilded.gilded-ivory .trivia-nav a:hover { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .trivia-nav a.active { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .trivia-nav a.active::after { background: #8E6620; } /* ---- Dashboard / topics / history components on the gilded backdrop ---- */ .trivia-stage-gilded .trivia-dashboard { max-width: none; } .trivia-stage-gilded .resume-banner { background: rgba(0, 0, 0, 0.32); border-color: rgba(232, 197, 106, 0.55); } .trivia-stage-gilded .resume-banner h2 { color: var(--gold-light); } .trivia-stage-gilded .resume-label { color: var(--gold); } .trivia-stage-gilded .resume-banner p { color: rgba(248, 232, 168, 0.78); } .trivia-stage-gilded .resume-banner p strong { color: var(--gold-light); } .trivia-stage-gilded .stat-card { background: rgba(0, 0, 0, 0.28); border-color: rgba(232, 197, 106, 0.32); } .trivia-stage-gilded .stat-label { color: var(--gold); letter-spacing: 0.12em; } .trivia-stage-gilded .stat-value { color: var(--gold-light); } .trivia-stage-gilded .stat-sub { color: rgba(248, 232, 168, 0.65); } .trivia-stage-gilded .play-row small { color: rgba(248, 232, 168, 0.7); } .trivia-stage-gilded .recent-section h2 { color: var(--gold); letter-spacing: 0.06em; } .trivia-stage-gilded .recent-section-head a { color: var(--gold-light); } .trivia-stage-gilded .recent-rounds li { border-bottom-color: rgba(232, 197, 106, 0.22); color: rgba(248, 232, 168, 0.85); } .trivia-stage-gilded .recent-rounds li a { color: var(--gold-light); } .trivia-stage-gilded .recent-rounds li a:hover { color: var(--gold); } .trivia-stage-gilded .recent-rounds li strong { color: var(--gold); } .trivia-stage-gilded .topics-panel { background: rgba(0, 0, 0, 0.30); border-color: rgba(232, 197, 106, 0.35); } .trivia-stage-gilded .topics-panel-header h2 { color: var(--gold-light); } .trivia-stage-gilded .chip { background: rgba(232, 197, 106, 0.18); color: var(--gold-light); border-color: rgba(232, 197, 106, 0.45); } .trivia-stage-gilded .chip:hover { background: rgba(232, 197, 106, 0.28); } .trivia-stage-gilded .chip-x { color: rgba(248, 232, 168, 0.7); } .trivia-stage-gilded .chip-x:hover { background: var(--danger); color: var(--gold-light); } .trivia-stage-gilded .chip-available { background: rgba(0, 0, 0, 0.28); border-color: rgba(232, 197, 106, 0.3); } .trivia-stage-gilded .chip-available:hover { background: rgba(232, 197, 106, 0.18); border-color: var(--gold); } .trivia-stage-gilded .chip-add { color: var(--gold-light); } .trivia-stage-gilded .chip-meta { color: rgba(248, 232, 168, 0.55); } .trivia-stage-gilded .topic-add-summary { color: var(--gold); } .trivia-stage-gilded .topic-add-panel { border-top-color: rgba(232, 197, 106, 0.25); } /* Topics page list (alternate layout — older topics.html) */ .trivia-stage-gilded .topic-list li { border-bottom-color: rgba(232, 197, 106, 0.22); color: var(--gold-light); } .trivia-stage-gilded .topic-list a, .trivia-stage-gilded .topic-list .link-button { color: var(--gold-light); } .trivia-stage-gilded .topic-list .link-button:hover { color: var(--gold); } /* History data-table on gilded backdrop */ .trivia-stage-gilded .data-table { background: rgba(0, 0, 0, 0.30); border-color: rgba(232, 197, 106, 0.35); color: var(--gold-light); } .trivia-stage-gilded .data-table th { background: rgba(0, 0, 0, 0.42); color: var(--gold); border-bottom-color: rgba(232, 197, 106, 0.25); } .trivia-stage-gilded .data-table td { border-bottom-color: rgba(232, 197, 106, 0.18); } .trivia-stage-gilded .data-table a { color: var(--gold-light); } .trivia-stage-gilded .data-table a:hover { color: var(--gold); } .trivia-stage-gilded .data-table small { color: rgba(248, 232, 168, 0.6); } .trivia-stage-gilded .data-table .pill-replay { background: rgba(232, 197, 106, 0.22); color: var(--gold); } /* Form inputs sitting on the gilded backdrop */ .trivia-stage-gilded input[type="text"], .trivia-stage-gilded input[type="number"], .trivia-stage-gilded select, .trivia-stage-gilded textarea { background: rgba(0, 0, 0, 0.30); border-color: rgba(232, 197, 106, 0.4); color: var(--gold-light); } .trivia-stage-gilded input::placeholder { color: rgba(248, 232, 168, 0.45); } .trivia-stage-gilded input:focus, .trivia-stage-gilded select:focus, .trivia-stage-gilded textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); } .trivia-stage-gilded label > span { color: var(--gold-light); } /* Ivory parallels for the new components */ .trivia-stage-gilded.gilded-ivory .resume-banner { background: rgba(255, 252, 244, 0.55); border-color: rgba(142, 102, 32, 0.55); } .trivia-stage-gilded.gilded-ivory .resume-banner h2, .trivia-stage-gilded.gilded-ivory .resume-banner p strong { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .resume-banner p { color: rgba(90, 61, 14, 0.85); } .trivia-stage-gilded.gilded-ivory .resume-label { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .stat-card { background: rgba(255, 252, 244, 0.5); border-color: rgba(142, 102, 32, 0.4); } .trivia-stage-gilded.gilded-ivory .stat-label { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .stat-value { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .stat-sub { color: rgba(90, 61, 14, 0.7); } .trivia-stage-gilded.gilded-ivory .recent-section h2 { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .recent-section-head a { color: #5A3D0E; } .trivia-stage-gilded.gilded-ivory .recent-rounds li { border-bottom-color: rgba(142, 102, 32, 0.22); color: rgba(90, 61, 14, 0.85); } .trivia-stage-gilded.gilded-ivory .recent-rounds li a { color: #5A3D0E; } .trivia-stage-gilded.gilded-ivory .recent-rounds li a:hover { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .recent-rounds li strong { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .topics-panel { background: rgba(255, 252, 244, 0.5); border-color: rgba(142, 102, 32, 0.4); } .trivia-stage-gilded.gilded-ivory .topics-panel-header h2 { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .chip { background: rgba(232, 197, 106, 0.32); color: #2A1A04; border-color: rgba(142, 102, 32, 0.5); } .trivia-stage-gilded.gilded-ivory .chip-available { background: rgba(255, 252, 244, 0.55); border-color: rgba(142, 102, 32, 0.35); } .trivia-stage-gilded.gilded-ivory .chip-add { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .chip-meta { color: rgba(90, 61, 14, 0.6); } .trivia-stage-gilded.gilded-ivory .topic-add-summary { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .data-table { background: rgba(255, 252, 244, 0.5); border-color: rgba(142, 102, 32, 0.4); color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .data-table th { background: rgba(232, 197, 106, 0.25); color: #8E6620; border-bottom-color: rgba(142, 102, 32, 0.3); } .trivia-stage-gilded.gilded-ivory .data-table td { border-bottom-color: rgba(142, 102, 32, 0.18); } .trivia-stage-gilded.gilded-ivory .data-table a { color: #5A3D0E; } .trivia-stage-gilded.gilded-ivory .data-table small { color: rgba(90, 61, 14, 0.6); } .trivia-stage-gilded.gilded-ivory input[type="text"], .trivia-stage-gilded.gilded-ivory input[type="number"], .trivia-stage-gilded.gilded-ivory select, .trivia-stage-gilded.gilded-ivory textarea { background: rgba(255, 252, 244, 0.7); border-color: rgba(142, 102, 32, 0.4); color: #2A1A04; } .trivia-stage-gilded.gilded-ivory input:focus, .trivia-stage-gilded.gilded-ivory select:focus, .trivia-stage-gilded.gilded-ivory textarea:focus { border-color: #8E6620; box-shadow: 0 0 0 3px rgba(142, 102, 32, 0.28); } .trivia-stage-gilded.gilded-ivory label > span { color: #2A1A04; } /* Ivory page-page overrides — light field needs dark text */ .trivia-stage-gilded.gilded-ivory .page-header h1, .trivia-stage-gilded.gilded-ivory .gilded-section h2 { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .page-header .page-eyebrow { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .page-header .page-desc { color: rgba(90, 61, 14, 0.75); } .trivia-stage-gilded.gilded-ivory .page-header-actions a { color: #5A3D0E; } .trivia-stage-gilded.gilded-ivory .page-header-actions a:hover { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .gilded-section { border-top-color: rgba(142, 102, 32, 0.3); } .trivia-stage-gilded.gilded-ivory .cartouche-option { background: rgba(255, 252, 244, 0.55); border-color: rgba(142, 102, 32, 0.4); } .trivia-stage-gilded.gilded-ivory .cartouche-name { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .cartouche-sub { color: rgba(90, 61, 14, 0.7); } /* ----- Per-cartouche gilded variant overrides ----- The defaults above are the oxblood palette. Each variant class adjusts the field-gradient backdrop and gold ramp to match the cartouche the user picked under /trivia/settings/. Field stops are pulled directly from each cartouche SVG so the in-game stage and the activity-tile art share a palette. */ .trivia-stage-gilded.gilded-forest { --gold-grad: linear-gradient(180deg, #F8E8A8, #E8C56A 35%, #C99A3E 55%, #8E6620 80%, #6A4A14); background: radial-gradient(ellipse at 50% 22%, #2A6740 0%, #1F4A2E 55%, #061509 100%); } .trivia-stage-gilded.gilded-midnight { --gold-grad: linear-gradient(180deg, #F8E8A8, #E8C56A 35%, #C99A3E 55%, #8E6620 80%, #6A4A14); background: radial-gradient(ellipse at 50% 22%, #2D3A78 0%, #1B2750 55%, #050818 100%); } .trivia-stage-gilded.gilded-aubergine { --gold: #B89858; --gold-light: #FBEFC8; --gold-deep: #7A5E26; --gold-grad: linear-gradient(180deg, #FBEFC8, #EBD8A0 35%, #B89858 65%, #7A5E26 100%); background: radial-gradient(ellipse at 50% 22%, #6A2D78 0%, #4A2050 55%, #170620 100%); } .trivia-stage-gilded.gilded-onyx { --gold: #F0C84A; --gold-light: #FFE89A; --gold-deep: #5A3D0E; --gold-grad: linear-gradient(180deg, #FFE89A, #F0C84A 35%, #C99A3E 55%, #8E6620 80%, #5A3D0E); background: radial-gradient(ellipse at 50% 22%, #2A2A2A 0%, #1A1A1A 55%, #000000 100%); } /* Ivory is the only LIGHT field — needs different ink colours. */ .trivia-stage-gilded.gilded-ivory { --gold: #C99A3E; --gold-light: #5A3D0E; /* "light" = the high-contrast ink on cream */ --gold-deep: #5A3D0E; --gold-grad: linear-gradient(180deg, #E8C56A, #C99A3E 35%, #8E6620 65%, #5A3D0E 100%); --field: #5A3D0E; --field-mid: #8E6620; background: radial-gradient(ellipse at 50% 22%, #FBF3DE 0%, #F2E5C2 55%, #E5D2A4 100%); color: #5A3D0E; } .trivia-stage-gilded.gilded-ivory::before { border-color: rgba(90, 61, 14, 0.55); } .trivia-stage-gilded.gilded-ivory::after { border-color: rgba(90, 61, 14, 0.28); } .trivia-stage-gilded.gilded-ivory .gilded-band > span { background: #C99A3E; } .trivia-stage-gilded.gilded-ivory .gilded-band > .gilded-rule { background: #C99A3E; } .trivia-stage-gilded.gilded-ivory .money-ladder { background: rgba(255, 252, 244, 0.6); border-color: rgba(90, 61, 14, 0.4); } .trivia-stage-gilded.gilded-ivory .money-ladder h3 { color: #8E6620; border-color: rgba(90, 61, 14, 0.3); } .trivia-stage-gilded.gilded-ivory .money-ladder li { color: rgba(90, 61, 14, 0.55); } .trivia-stage-gilded.gilded-ivory .money-ladder li.won { color: #5A3D0E; } .trivia-stage-gilded.gilded-ivory .money-ladder li.current { background: linear-gradient(90deg, rgba(201, 154, 62, 0.30), rgba(201, 154, 62, 0.06)); color: #2A1A04; box-shadow: inset 0 0 0 1px rgba(142, 102, 32, 0.6); } .trivia-stage-gilded.gilded-ivory .money-ladder li.safe-haven { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .trivia-stage-header { color: rgba(90, 61, 14, 0.7); } .trivia-stage-gilded.gilded-ivory .trivia-stage-header strong { color: #5A3D0E; } .trivia-stage-gilded.gilded-ivory .trivia-stage-header .muted { color: rgba(90, 61, 14, 0.65); } .trivia-stage-gilded.gilded-ivory .trivia-prompt { color: #2A1A04; text-shadow: none; } .trivia-stage-gilded.gilded-ivory .trivia-option { background: rgba(255, 252, 244, 0.65); border-color: rgba(142, 102, 32, 0.5); color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .trivia-option:hover { background: rgba(232, 197, 106, 0.25); border-color: rgba(142, 102, 32, 0.9); } .trivia-stage-gilded.gilded-ivory .trivia-option-letter { border: 1px solid rgba(90, 61, 14, 0.85); color: #FBF3DE; } .trivia-stage-gilded.gilded-ivory .trivia-actions { border-top-color: rgba(142, 102, 32, 0.35); } .trivia-stage-gilded.gilded-ivory .lifeline-btn { background: rgba(255, 252, 244, 0.6); border-color: rgba(142, 102, 32, 0.5); color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .lifeline-btn:hover:not([disabled]) { background: rgba(232, 197, 106, 0.25); border-color: rgba(142, 102, 32, 0.9); } .trivia-stage-gilded.gilded-ivory .walk-away-btn { color: rgba(90, 61, 14, 0.75); border-color: rgba(142, 102, 32, 0.4); } .trivia-stage-gilded.gilded-ivory .walk-away-btn:hover { background: rgba(232, 197, 106, 0.18); color: #2A1A04; border-color: rgba(142, 102, 32, 0.8); } .trivia-stage-gilded.gilded-ivory .trivia-stakes { color: rgba(90, 61, 14, 0.7); } .trivia-stage-gilded.gilded-ivory .trivia-stakes strong { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .complain-btn { color: rgba(90, 61, 14, 0.6); border-color: rgba(142, 102, 32, 0.4); } .trivia-stage-gilded.gilded-ivory .complain-btn:hover:not([disabled]) { color: #2A1A04; border-color: rgba(142, 102, 32, 0.85); } .trivia-stage-gilded.gilded-ivory .lifeline-result { background: rgba(255, 252, 244, 0.6); border-color: rgba(142, 102, 32, 0.4); border-left-color: #C99A3E; color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .lifeline-result h4 { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .audience-letter { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .audience-pct { color: rgba(90, 61, 14, 0.7); } .trivia-stage-gilded.gilded-ivory .audience-bar { background: rgba(90, 61, 14, 0.15); } .trivia-stage-gilded.gilded-ivory .trivia-feedback h1, .trivia-stage-gilded.gilded-ivory .trivia-result-hero h1 { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .trivia-prompt-recap { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .trivia-correct-line { color: rgba(90, 61, 14, 0.85); } .trivia-stage-gilded.gilded-ivory .trivia-correct-line strong { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .feedback-money { color: #2A1A04; } .trivia-stage-gilded.gilded-ivory .feedback-money strong { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .result-headline { color: #8E6620; } .trivia-stage-gilded.gilded-ivory .muted { color: rgba(90, 61, 14, 0.65); } .trivia-stage-gilded.gilded-ivory a { color: #5A3D0E; } .trivia-stage-gilded.gilded-ivory a:hover { color: #8E6620; } /* Trivia — game stage (WWtbam-style) */ .trivia-game { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; } @media (max-width: 720px) { .trivia-game { grid-template-columns: 1fr; } } .money-ladder { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.5rem; } .money-ladder h3 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-muted); padding: 0 0.5rem; } .money-ladder ol { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; } .money-ladder li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--fg-muted); } .money-ladder li.won { color: var(--fg); } .money-ladder li.current { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--fg); font-weight: 600; } .money-ladder li.safe-haven { color: var(--success); font-weight: 600; } .money-ladder li.safe-haven.current { color: var(--fg); } .rung-num { width: 1.6rem; text-align: right; font-size: 0.8rem; opacity: 0.7; } .rung-amount { flex: 1; } .rung-badge { font-size: 0.65rem; background: var(--success); color: var(--accent-fg); padding: 0.05rem 0.35rem; border-radius: 999px; font-weight: 700; letter-spacing: 0.5px; } .trivia-stage-header { display: flex; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; font-size: 0.9rem; } .trivia-prompt { font-size: 1.4rem; line-height: 1.45; margin: 0.5rem 0 1.25rem; } .trivia-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0 1.5rem; } @media (max-width: 540px) { .trivia-options { grid-template-columns: 1fr; } } .trivia-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.05s; } .trivia-option:hover { background: var(--hover); border-color: var(--accent); } .trivia-option:active { transform: translateY(1px); } .trivia-option-letter { width: 2rem; height: 2rem; border-radius: 50%; background: var(--bg-elev-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .trivia-option-eliminated { opacity: 0.35; cursor: not-allowed; } .trivia-option-eliminated:hover { background: var(--bg-elev); border-color: var(--border); } .trivia-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 1rem; } .lifelines { display: flex; gap: 0.5rem; } .lifeline-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 0.95rem; cursor: pointer; } .lifeline-btn:hover:not([disabled]) { background: var(--hover); border-color: var(--accent); } .lifeline-btn[disabled] { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; } .lifeline-icon { font-weight: 700; } .walk-away-btn { background: transparent; color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.85rem; font: inherit; font-size: 0.9rem; cursor: pointer; } .walk-away-btn:hover { background: var(--hover); color: var(--fg); } .trivia-complain-row { margin-top: 0.75rem; text-align: right; } .complain-btn { background: transparent; color: var(--fg-muted); border: 1px dashed var(--border); border-radius: var(--radius); padding: 0.4rem 0.75rem; font: inherit; font-size: 0.85rem; cursor: pointer; } .complain-btn:hover:not([disabled]) { color: var(--fg); border-color: var(--accent); } .complain-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .trivia-complain-row form { display: inline; margin: 0; padding: 0; } .complaint-disagreed { border-left-color: var(--fg-muted) !important; } .trivia-stakes { margin-top: 0.75rem; font-size: 0.85rem; } .lifeline-result { background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 0.85rem 1rem; margin-bottom: 1rem; } .lifeline-result h4 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-muted); } .lifeline-result p { margin: 0; } .audience-bars { list-style: none; padding: 0; margin: 0; } .audience-bars li { display: grid; grid-template-columns: 1.4rem 1fr 3rem; gap: 0.6rem; align-items: center; padding: 0.18rem 0; font-variant-numeric: tabular-nums; } .audience-letter { font-weight: 700; text-align: center; } .audience-bar { height: 0.65rem; background: var(--bg-elev-2); border-radius: 999px; overflow: hidden; } .audience-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--success))); } .audience-pct { text-align: right; font-size: 0.9rem; color: var(--fg-muted); } .trivia-feedback { max-width: 640px; margin: 1.5rem auto; padding: 1.75rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; } .feedback-correct-bg { border-left: 4px solid var(--success); } .feedback-wrong-bg { border-left: 4px solid var(--danger); } .trivia-prompt-recap { font-size: 1.05rem; line-height: 1.45; margin: 0.5rem 0 1rem; } .trivia-correct-line { margin: 0.5rem 0; } .feedback-money { font-size: 1.1rem; margin: 1rem 0 1.5rem; } .trivia-result-hero { text-align: center; padding: 40px 24px 32px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); } .trivia-result-hero h1 { font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 8px; } .result-headline { color: var(--ink-soft); margin: 0; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; } .result-amount { font-family: var(--font-display); font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 12px 0 16px; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--accent), var(--brand-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .recap-options { list-style: none; padding: 0.5rem 0 0; margin: 0; } .recap-options li { padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.95rem; } .recap-correct { background: color-mix(in srgb, var(--success) 18%, transparent); } .recap-chosen-wrong { background: color-mix(in srgb, var(--danger) 18%, transparent); text-decoration: line-through; } .result-item { border-bottom: 1px solid var(--border); padding: 1rem 0; } .result-item:last-child { border-bottom: none; } /* Trivia — cartouche picker (user_settings.html) */ .cartouche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; } .cartouche-option { display: block; cursor: pointer; border: 2px solid var(--line); border-radius: var(--radius-card); padding: 8px; background: var(--card-bg); transition: border-color 0.12s, transform 0.08s; position: relative; /* containing block for the abs-positioned radio */ } .cartouche-option:hover { border-color: var(--accent); } /* The is-selected class is server-rendered (matches the saved choice). The :has() rule fires immediately when you click a different radio so the selection ring tracks your click before you Save. */ .cartouche-option.is-selected, .cartouche-option:has(input[type="radio"]:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } /* Hide the radio visually but keep it interactive — pointer-events:none would have stopped some browsers from activating the radio through the wrapping