/* ═══════════════════════════════════════════════════════════════════════ WORLD CUP PICKS 2026 — design system Ported verbatim from the Claude Design handoff ("Terrace Almanac" base + "Stadium Night / Floodlit" mood). Standalone, original visual language. Two moods coexist via attributes on : (default) → Daylight "Terrace Almanac" (light editorial) data-mood="floodlit" → Stadium Night (dark, cyan/gold, glowing nodes) Crest shape via data-crest="disc|shield|block". The production app ships in Stadium Night (set on in index.html), the look the user reviewed and approved. ═══════════════════════════════════════════════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap"); :root { /* ── Type families ── */ --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --wc-display: "Saira Condensed", "Hanken Grotesk", sans-serif; --font-mono: "Hanken Grotesk", ui-monospace, Menlo, monospace; /* ── Core palette ── */ --paper: #F1EADC; /* warm newsprint page */ --paper-2: #E7DECB; /* deeper paper */ --surface: #FCFAF3; /* card / sheet */ --surface-2: #F6F1E5; --ink: #16130D; /* near-black warm ink */ --ink-2: #514a3c; /* secondary text */ --ink-3: #8b8270; /* tertiary / caption */ /* ── Brand = vermilion (hero + conviction heat) ── */ --brand: #FF3B1F; --brand-deep: #D62A12; --brand-soft: #FFE2D9; --brand-glow: rgba(255,59,31,0.32); /* ── Cobalt = structure / advance / info ── */ --cobalt: #1B2BE0; --cobalt-deep: #1320A8; --cobalt-soft: #E2E3FF; /* ── Champion gold ── */ --gold: #F2B01E; --gold-deep: #B97E00; --gold-soft: #FCEFC8; /* ── Semantic state colors (always paired with icon + shape) ── */ --green: #0E9E5E; /* correct */ --green-deep: #0a774a; --green-soft: #DBF3E6; --amber: #E8A100; /* pending / time */ --amber-soft: #FBEDC9; /* "wrong / dead" = struck from the record (charcoal, NOT red) */ --dead: #6B6457; --dead-soft: #EAE4D6; /* legacy semantic refs used in JS */ --red-9: #E0231C; --red-10: #C81f19; --red-11: #B01914; /* true error only */ --red-soft: rgba(224,35,28,0.13); /* translucent → works on every theme bg */ --green-9: var(--green); --green-10: var(--green-deep); --green-11: var(--green-deep); --green-live: #2fb56e; --amber-9: var(--amber); --amber-11: var(--gold-deep); --cyan-9: var(--cobalt); --cyan-11: var(--cobalt-deep); --cyan-3: var(--cobalt-soft); --blue-10: var(--cobalt); --blue-11: var(--cobalt-deep); --gray-9: var(--ink-3); --gray-11: var(--ink-2); --gray-12: var(--ink); --gray-4: var(--paper-2); --gray-5: #d9cfbb; --gray-3: var(--surface-2); /* ── Backgrounds / surfaces ── */ --bg-page: var(--paper); --bg-surface: var(--surface); --fg-1: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --fg-accent: var(--brand-deep); /* ── Borders / rules ── */ --hair: rgba(22,19,13,0.16); --rule: rgba(22,19,13,0.88); --border-1: var(--hair); --border-2: var(--rule); /* ── Brand surfaces ── */ --wc-hero-grad: linear-gradient(150deg, #16130D 0%, #20180f 60%, #2a140c 100%); --wc-spark: var(--brand); --wc-spark-deep: var(--brand-deep); --wc-spark-soft: var(--brand-soft); --wc-spark-glow: var(--brand-glow); --wc-spark-grad: linear-gradient(135deg, #FF7A4D 0%, var(--brand) 55%, var(--brand-deep) 100%); --wc-pitch-line: rgba(255,255,255,0.10); /* ── PICK / TEAM STATE TOKENS ── */ --st-edit-bg: var(--surface); --st-edit-bd: var(--line); --st-edit-fg: var(--ink); --st-lock-bg: var(--amber-soft); --st-lock-bd: #E0C77B; --st-lock-fg: var(--gold-deep); --st-ok-bg: var(--green-soft); --st-ok-bd: #9bd9b8; --st-ok-fg: var(--green-deep); --st-ok-solid: var(--green); --st-no-bg: var(--dead-soft); --st-no-bd: #c9c1b0; --st-no-fg: var(--dead); --st-no-solid: var(--dead); --st-pend-bg: var(--surface-2); --st-pend-bd: var(--hair); --st-pend-fg: var(--ink-2); --st-adv: var(--cobalt); --st-adv-soft: var(--cobalt-soft); --st-adv-deep: var(--cobalt-deep); --st-conv: var(--brand); --st-conv-soft: var(--brand-soft); /* ── Type scale ── */ --fs-1: 12px; --lh-1: 16px; --fs-2: 13px; --lh-2: 18px; --fs-3: 15px; --lh-3: 22px; --fs-4: 17px; --lh-4: 25px; --fs-5: 20px; --lh-5: 27px; --fs-6: 24px; --lh-6: 30px; --fs-7: 30px; --lh-7: 34px; --fs-8: 40px; --lh-8: 42px; --fs-9: 64px; --lh-9: 60px; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* ── Spacing ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; /* ── Radius (editorial = tighter) ── */ --radius-1: 3px; --radius-2: 5px; --radius-3: 7px; --radius-4: 9px; --radius-5: 12px; --radius-6: 14px; --radius-card: 18px; --radius-full: 9999px; /* ── Shadows ── */ --shadow-1: 0 1px 2px rgba(22,19,13,0.07), 0 1px 1px rgba(22,19,13,0.05); --shadow-2: 0 2px 4px -2px rgba(22,19,13,0.10), 0 6px 16px -8px rgba(22,19,13,0.14); --shadow-3: 0 8px 24px -10px rgba(22,19,13,0.22); --shadow-4: 0 18px 48px -18px rgba(22,19,13,0.32); --shadow-event-card: 0 18px 48px -18px rgba(22,19,13,0.32); --shadow-pop: 3px 3px 0 var(--ink); /* signature poster offset */ --shadow-pop-brand: 3px 3px 0 var(--brand-deep); /* ── Motion ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 130ms; --t-med: 200ms; --t-slow: 280ms; } /* ── DARK = "stadium at night" (legacy light-dark toggle, kept for completeness) ── */ [data-theme="dark"] { --paper: #100E14; --paper-2: #17151d; --surface: #1a1822; --surface-2: #221f2b; --ink: #F3EEE2; --ink-2: #b8b2a4; --ink-3: #837c6e; --hair: rgba(243,238,226,0.14); --rule: rgba(243,238,226,0.82); --brand-soft: #3a160e; --cobalt-soft: #161a4a; --green-soft: #0e2a1d; --amber-soft: #2e2410; --dead: #8b8478; --dead-soft: #24222c; --gold-soft: #2c2410; --wc-hero-grad: linear-gradient(150deg, #0c0a10 0%, #161020 55%, #2a130c 100%); --st-edit-bd: #3a3647; --st-lock-bd: #6a5a2c; --shadow-pop: 3px 3px 0 rgba(0,0,0,0.6); --shadow-2: 0 2px 4px -2px rgba(0,0,0,0.4), 0 8px 22px -10px rgba(0,0,0,0.55); } /* ═══════════ Base element styles ═══════════ */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* never allow horizontal scroll / off-screen clipping */ } h1,h2,h3,h4,h5,h6 { margin: 0; } p { margin: 0; } a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 2px; } /* ── Display utility ── */ .wc-display { font-family: var(--wc-display); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.98; } .wc-tnum { font-variant-numeric: tabular-nums; } .kicker { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } /* ═══════════ TEAM CHIP — recurring atom ═══════════ */ .crest { --c: var(--cobalt); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--c); color: #fff; font-family: var(--wc-display); font-weight: 800; font-size: 13px; letter-spacing: 0.01em; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.30), 0 0 0 1.5px var(--line); position: relative; line-height: 1; padding-top: 1px; } .crest.sm { width: 26px; height: 26px; font-size: 10px; } .crest.lg { width: 44px; height: 44px; font-size: 16px; } .crest.xl { width: 62px; height: 62px; font-size: 22px; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.32), 0 0 0 2px var(--line); } /* Flag image variant — img element, circular crop */ .crest--flag { object-fit: cover; border-radius: 50%; background: var(--surface-2); display: inline-block; vertical-align: middle; flex: none; } .chip { display: flex; align-items: center; gap: 11px; background: var(--st-edit-bg); border: 1.5px solid var(--st-edit-bd); border-radius: 11px; padding: 8px 12px; font-family: var(--font-sans); color: var(--fg-1); min-height: 54px; transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .chip__name { font-weight: 700; font-size: 15.5px; line-height: 1.12; letter-spacing: -0.005em; } .chip__sub { font-size: 12px; color: var(--fg-2); line-height: 1.2; font-weight: 500; } .chip__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .chip__body .chip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip__spacer { flex: 0 0 0; } .chip__end { display: flex; align-items: center; gap: 9px; flex: none; } .chip.is-locked { background: var(--st-lock-bg); border-color: var(--st-lock-bd); } .chip.is-correct { background: var(--st-ok-bg); border-color: var(--st-ok-bd); } .chip.is-wrong { background: var(--st-no-bg); border-color: var(--st-no-bd); } .chip.is-pending { background: var(--st-pend-bg); border-color: var(--st-pend-bd); border-style: dashed; } .chip.is-advance { box-shadow: inset 5px 0 0 var(--st-adv); } /* rank badge */ .rankno { width: 28px; height: 28px; border-radius: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--wc-display); font-weight: 800; font-size: 17px; line-height: 1; padding-top: 1px; background: var(--paper-2); color: var(--fg-2); border: 1.5px solid var(--hair); } .rankno.adv { background: var(--st-adv); color: #fff; border-color: var(--line); } /* status marker */ .mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px var(--line); } .mark.ok { background: var(--st-ok-solid); color: #fff; } .mark.no { background: var(--red-9); color: #fff; } .mark.lock { background: var(--amber); color: #fff; } .mark.pend { background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1.5px var(--hair); } .dragdots { display: grid; grid-template-columns: repeat(2, 3px); gap: 3px 4px; opacity: 0.45; } .dragdots i { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-1); display: block; } /* ── Pills / tags ── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 9999px; font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface); border: 1.5px solid var(--line); white-space: nowrap; line-height: 1.3; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; } .pill.ghost { background: var(--surface-2); border-color: var(--hair); color: var(--fg-2); } /* ── Conviction badge default ── */ .conv { display: inline-flex; align-items: center; gap: 5px; font-family: var(--wc-display); font-weight: 800; font-size: 15px; color: var(--wc-spark-deep); } .conv .ring { width: 24px; height: 24px; flex: none; } .conv .x { letter-spacing: 0; } /* ── Buttons ── */ .btn { font-family: var(--font-sans); font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: 0.01em; border-radius: 9999px; padding: 13px 22px; border: 2px solid var(--line); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast); } .btn:active { transform: translate(1px,1px); } .btn--primary { background: var(--brand); color: #fff; } .btn--primary:hover { background: var(--brand-deep); } .btn--spark { background: var(--wc-spark-grad); color: #fff; box-shadow: var(--shadow-pop); } .btn--spark:hover { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px,2px); } .btn--ink { background: var(--ink); color: var(--paper); } .btn--cobalt { background: var(--cobalt); color: #fff; } .btn--cobalt:hover { background: var(--cobalt-deep); } .btn--ghost { background: transparent; color: var(--fg-1); border-color: transparent; } .btn--ghost:hover { background: rgba(22,19,13,0.06); } .btn--outline { background: var(--surface); color: var(--ink); } .btn--outline:hover { background: var(--surface-2); } .btn--white { background: var(--surface); color: var(--ink); } .btn--block { width: 100%; } .btn--lg { font-size: 16px; padding: 15px 26px; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Card ── */ .card { background: var(--bg-surface); border: 1.5px solid var(--line); border-radius: var(--radius-card); } .card--soft { border-color: var(--hair); box-shadow: var(--shadow-2); } /* progress track */ .track { height: 9px; border-radius: 9999px; background: var(--paper-2); overflow: hidden; border: 1.5px solid var(--line); } .track > i { display: block; height: 100%; background: var(--cobalt); transition: width var(--t-slow) var(--ease-out); } /* textures */ .pitchlines { background-image: linear-gradient(var(--wc-pitch-line) 1px, transparent 1px), linear-gradient(90deg, var(--wc-pitch-line) 1px, transparent 1px); background-size: 40px 40px; } .halftone { background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px); background-size: 7px 7px; } /* ── Keyframes ── */ @keyframes wcPop { 0% { transform: scale(.92); opacity: 0; } 60% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } } @keyframes wcSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes wcFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes wcStamp { 0% { transform: scale(1.6) rotate(-14deg); opacity: 0; } 60% { transform: scale(.94) rotate(-9deg); } 100% { transform: scale(1) rotate(-7deg); opacity: 1; } } @keyframes wcSpin { to { transform: rotate(360deg); } } .wc-spinner { width: 32px; height: 32px; border: 3px solid rgba(243,238,226,.15); border-top-color: var(--brand); border-radius: 50%; animation: wcSpin .75s linear infinite; } /* ── Splash screen (sign-in gate) — responsive layout ── */ .splash-content { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 28px; width: 100%; } .splash-brand-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .splash-tgt-block { display: flex; align-items: center; gap: 12px; } .splash-tgt-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #fff; flex-shrink: 0; } .splash-tgt-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: rgba(243,238,226,.55); text-transform: uppercase; } .splash-tgt-presents { font-size: 14px; font-weight: 700; color: rgba(243,238,226,.85); } .splash-heading { font-size: 68px; margin: 18px 0 0; line-height: .84; } .splash-tagline { font-size: 17px; line-height: 1.5; color: rgba(243,238,226,.84); margin-top: 18px; } .splash-buttons { position: relative; padding: 0 22px 40px; width: 100%; } @media (min-width: 768px) { .splash-content { padding: 0 40px; max-width: 900px; } .splash-brand-row { flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 28px; } .splash-tgt-logo { width: 72px; height: 72px; } .splash-tgt-block { gap: 14px; } .splash-tgt-label { font-size: 13px; } .splash-tgt-presents { font-size: 16px; } .splash-heading { font-size: 110px; } .splash-tagline { font-size: 20px; } .splash-buttons { max-width: 480px; padding: 0 0 40px; } } /* ── Scoring guide (How scoring works — sign-in carousel + in-app overlay) ── */ .sgw { height: 100dvh; display: flex; flex-direction: column; background: var(--wc-hero-grad); color: #F3EEE2; position: relative; overflow: hidden; } .sgw-header { display: flex; justify-content: space-between; align-items: center; padding: 52px 24px 16px; position: relative; flex-shrink: 0; } .sgw-slide { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 24px; overflow: hidden; } .sgw-dots { display: flex; gap: 6px; justify-content: center; margin-top: 20px; } .sgw-dot { height: 7px; width: 7px; border-radius: 99px; flex-shrink: 0; background: rgba(243,238,226,.22); transition: width .25s var(--ease-out), background .25s; } .sgw-dot.on { background: var(--brand); width: 22px; } .sgw-foot-m { padding: 12px 24px 36px; flex-shrink: 0; display: flex; gap: 12px; } .sgw-grid { display: none; } .sgw-foot-d { display: none; } .sgw-skip { border: 0; background: transparent; color: rgba(243,238,226,.6); font-weight: 700; font-size: 14px; cursor: pointer; font-family: var(--font-sans); padding: 8px 0; } @media (min-width: 768px) { .sgw-header { padding: 36px 40px 16px; } .sgw-slide { display: none; } .sgw-foot-m { display: none; } .sgw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; flex: 1; overflow-y: auto; align-content: start; padding: 0 40px 8px; } .sgw-foot-d { display: flex; justify-content: center; padding: 16px 40px 40px; flex-shrink: 0; } } /* ═══════════ Border token + glow (added) ═══════════ */ :root{ --line: var(--ink); --glow-cyan: 0 0 0 1px rgba(33,210,224,0.55), 0 0 16px rgba(33,210,224,0.40); --glow-gold: 0 0 0 1px rgba(240,194,74,0.60), 0 0 16px rgba(240,194,74,0.45); } /* ═══════════ MOOD: Floodlit — premium stadium-night ═══════════ */ [data-mood="floodlit"]{ --paper:#06090F; --paper-2:#0C111A; --surface:#10161F; --surface-2:#19212D; --ink:#EAF1F8; --ink-2:#8C9BAD; --ink-3:#566576; --hair:rgba(255,255,255,0.08); --rule:rgba(255,255,255,0.2); --line:rgba(255,255,255,0.10); --bg-page:#06090F; --bg-surface:#10161F; --green:#2FC07C; --green-deep:#7CE6B0; --green-soft:rgba(47,192,124,0.15); --amber:#F0B73A; --amber-soft:rgba(240,183,58,0.14); --gold-soft:rgba(240,194,74,0.15); --dead:#7C8898; --dead-soft:rgba(255,255,255,0.04); --st-edit-bd:var(--line); --st-lock-bd:rgba(240,183,58,0.4); --st-lock-fg:#F2C24E; --st-ok-bd:rgba(47,192,124,0.42); --st-ok-fg:#7CE6B0; --st-no-bd:rgba(255,255,255,0.1); --st-pend-bg:rgba(255,255,255,0.025); --wc-hero-grad: linear-gradient(160deg,#0c1a30 0%,#0a1626 48%,#070b13 100%); --wc-pitch-line: rgba(120,200,230,0.07); /* In Floodlit the cyan/gold dual-accent governs: cyan = everyday interactive (mapped onto --cobalt structural token), gold = significance. The vermilion brand stays as the conviction "heat" only. */ --cobalt:#21D2E0; --cobalt-deep:#5fe3ee; --cobalt-soft:rgba(33,210,224,0.14); --st-adv:#21D2E0; --st-adv-soft:rgba(33,210,224,0.14); --st-adv-deep:#5fe3ee; --gold:#F0C24A; --gold-deep:#F0C24A; --gold-soft:rgba(240,194,74,0.15); /* brand (vermilion) soft surfaces MUST be dark in Floodlit — without these the light-theme pink (#FFE2D9) leaks through and kills contrast (compare cards, "you" leaderboard row, conviction swatch). */ --brand-soft: rgba(255,59,31,0.16); --brand-glow: rgba(255,59,31,0.45); --st-conv-soft: rgba(255,59,31,0.16); } html[data-mood="floodlit"] .design-canvas{ background:#04060B !important; } /* — Stadium atmosphere: floodlight from top, pitch glow from bottom — */ [data-mood="floodlit"] .app-shell-root{ background: radial-gradient(125% 55% at 50% -10%, rgba(34,160,196,0.20), transparent 60%), radial-gradient(120% 45% at 50% 112%, rgba(34,120,90,0.16), transparent 62%), #06090F !important; } [data-mood="floodlit"] .app-header{ background: rgba(6,9,15,0.72) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.07) !important; } [data-mood="floodlit"] .app-tabbar{ background: rgba(7,11,18,0.82) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.08) !important; } /* — Premium glass cards — */ [data-mood="floodlit"] .card{ background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)), #10161F; border-color: rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 38px -20px rgba(0,0,0,0.9); } [data-mood="floodlit"] .pill{ background: rgba(255,255,255,0.04); } /* — Glowing accents (cyan everyday, gold significance) — */ [data-mood="floodlit"] .btn--primary{ background: transparent; color: var(--brand); border-color: color-mix(in srgb, var(--brand) 60%, transparent); box-shadow: 0 0 18px -3px var(--brand-glow), inset 0 0 0 9999px rgba(255,255,255,0); } [data-mood="floodlit"] .btn--primary:hover{ background: var(--brand-soft); } [data-mood="floodlit"] .btn--spark{ box-shadow: 0 0 22px -2px var(--wc-spark-glow); } [data-mood="floodlit"] .chip.is-advance{ box-shadow: inset 4px 0 0 var(--st-adv), 0 0 20px -8px var(--st-adv); } [data-mood="floodlit"] .track > i{ box-shadow: 0 0 12px -1px var(--brand-glow); } [data-mood="floodlit"] .mark.ok{ box-shadow: 0 0 0 1.5px var(--line), 0 0 12px -2px rgba(47,192,124,0.6); } /* ═══════════ CREST SHAPE variants ═══════════ */ [data-crest="shield"] .crest{ border-radius:0 !important; clip-path: polygon(50% 100%, 8% 78%, 0 30%, 0 0, 100% 0, 100% 30%, 92% 78%); box-shadow: inset 0 2px 0 rgba(255,255,255,0.30), inset 0 0 0 2px rgba(255,255,255,0.16) !important; padding-bottom:3px; } [data-crest="block"] .crest{ border-radius:7px !important; } /* team-colour glow turns every crest into a glowing node under Floodlit */ [data-mood="floodlit"] .crest{ filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); } /* ═══════════ App layout (ported from shell.jsx inline styles) ═══════════ */ .app-shell-root { height: 100dvh; display: flex; flex-direction: column; background: var(--bg-page); overflow: hidden; width: 100%; max-width: 480px; margin: 0 auto; position: relative; } .app-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* ── Custom scrollbars: slim rounded pill, theme-aware, brand on hover ───── Tokens (--ink-3 / --brand) are redefined per theme, so this auto-adapts to the light / dark / navy palettes. The transparent border + padding-box clip makes the visible thumb read as a thin inset pill with breathing room. */ * { scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; } /* Firefox */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 9999px; border: 2.5px solid transparent; background-clip: padding-box; transition: background-color .15s ease; } ::-webkit-scrollbar-thumb:hover { background: var(--brand); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } .app-header { position: sticky; top: 0; z-index: 8; background: var(--bg-page); border-bottom: 1.5px solid var(--line); padding: 52px 16px 12px; } .app-header__row { display: flex; align-items: center; gap: 10px; min-height: 38px; } .app-header__title { font-size: 30px; line-height: .92; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-tabbar { display: flex; border-top: 1.5px solid var(--line); background: var(--surface); padding-bottom: 22px; position: relative; z-index: 5; } .app-tab { flex: 1; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 4px; color: var(--ink-3); position: relative; } .app-tab.is-on { color: var(--brand-deep); } [data-mood="floodlit"] .app-tab.is-on { color: var(--cobalt); } .app-tab__ind { position: absolute; top: 0; width: 26px; height: 3px; border-radius: 99px; background: var(--brand); } [data-mood="floodlit"] .app-tab__ind { background: var(--cobalt); } .app-tab__label { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; } .app-tab.is-on .app-tab__label { font-weight: 800; } .sechead { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; } .sechead .kicker { color: var(--ink-3); } .sechead__rule { flex: 1; height: 1.5px; background: var(--hair); } /* ═══════════════════════════════════════════════════════════════════════ RESPONSIVE LAYOUT — mobile-first base above; tablet + desktop below. Breakpoints: mobile <600px (no overrides) · tablet 600–1023px · desktop ≥1024px. These blocks ONLY add wider-viewport behavior; mobile rendering is untouched. ═══════════════════════════════════════════════════════════════════════ */ /* base (mobile) hooks for elements that were inline-styled in JS — values match the previous inline styles so mobile is pixel-identical, and live here now so the media queries below can override them (inline styles can't be overridden). */ .group-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; } .completeness-chips { display: flex; gap: 6px; flex-wrap: wrap; } .board-list { display: grid; gap: 8px; margin-top: 14px; } /* Desktop top nav — hidden until ≥1024px (the bottom .app-tabbar serves mobile). */ .app-topnav { display: none; } .app-topnav__brand { font-size: 20px; letter-spacing: .03em; color: var(--ink); white-space: nowrap; flex: none; } .app-topnav__tabs { display: flex; align-items: center; gap: 4px; margin-left: auto; } .app-topnav__tab { border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: .01em; color: var(--ink-3); padding: 8px 15px; border-radius: 9999px; transition: color var(--t-fast), background var(--t-fast); } .app-topnav__tab:hover { color: var(--ink); } .app-topnav__tab.is-on { color: var(--brand-deep); background: var(--brand-soft); } [data-mood="floodlit"] .app-topnav__tab.is-on { color: var(--cobalt); background: var(--cobalt-soft); } /* Desktop bracket tree — hidden until ≥1024px; the round-tabs list serves mobile. */ .bracket-tree-wrap { display: none; } .bt-tree { --bt-gap: 30px; display: flex; gap: var(--bt-gap); min-width: 920px; align-items: stretch; } .bt-col { flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; } .bt-col__head { font-family: var(--wc-display); font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; color: var(--ink-3); text-align: center; padding-bottom: 10px; } .bt-round { flex: 1; display: flex; flex-direction: column; } .bt-cell { flex: 1; display: flex; align-items: center; position: relative; padding: 3px 0; } .bt-match { width: 100%; background: var(--bg-surface); border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; } .bt-team { display: flex; align-items: center; gap: 8px; padding: 6px 9px; min-height: 36px; } .bt-team + .bt-team { border-top: 1px solid var(--hair); } .bt-team__name { flex: 1; min-width: 0; font-weight: 700; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bt-team.is-tbd { opacity: .55; } .bt-team.is-tbd .bt-team__name { color: var(--ink-3); } .bt-team.is-win { background: var(--green-soft); } /* your CORRECT pick */ .bt-team.is-loss { background: var(--red-soft); } /* your WRONG pick — red tint, mirrors is-win */ .bt-team.is-pick { box-shadow: inset 3px 0 0 var(--cobalt); } .bt-team.is-sel { cursor: pointer; } .bt-team.is-sel:hover { background: var(--cobalt-soft); } /* connectors: feeder cells push a horizontal stub right to the gap midpoint; the receiving cell's .bt-in elbow draws the vertical bar joining its two feeders + a centre stub into the card. Equal-height flex cells make the geometry line up (a feeder centre sits at 25%/75% of its receiver cell — half a cell apart). */ .bt-col:not(:last-child) .bt-cell::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: calc(var(--bt-gap) / 2); height: 2px; background: var(--line); } .bt-in { position: absolute; right: 100%; top: 25%; height: 50%; width: calc(var(--bt-gap) / 2); border-left: 2px solid var(--line); pointer-events: none; } .bt-in::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: var(--line); } /* ── Tablet: content widens, bottom tabs stay ── */ @media (min-width: 600px) { .app-shell-root { max-width: 720px; } .app-header { padding-left: 24px; padding-right: 24px; } /* .group-grid stays 2-column here (its base) */ } /* ── Desktop: top nav, full width, multi-column ── */ @media (min-width: 1024px) { .app-shell-root { max-width: 1280px; } /* widen shell, drop the 480px cap */ .app-tabbar { display: none; } /* bottom tabs → top nav takes over */ .app-topnav { display: flex; align-items: center; gap: 24px; flex: none; height: 56px; padding: 0 28px; background: var(--surface-2); border-bottom: 1.5px solid var(--line); } /* content area sits below the in-flow top nav (no overlap); trim the mobile status-bar inset and widen gutters to match the wider shell. */ .app-header { padding-top: 22px; padding-left: 28px; padding-right: 28px; } .app-header__title { font-size: 36px; } /* ~+20% */ .app-header .kicker { font-size: 13px; } /* ~+20% */ .group-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .completeness-chips { flex-wrap: nowrap; } /* chips in one row, no wrapping */ .board-list { gap: 12px; } /* leaderboard rows roomier */ .board-row { min-height: 64px; } .bracket-mobile { display: none; } /* swap list view → tree */ .bracket-tree-wrap { display: block; overflow-x: auto; padding-bottom: 12px; } .app-topnav__theme { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--ink-2); margin-left: 8px; flex-shrink: 0; transition: color .15s, background .15s; } .app-topnav__theme:hover { color: var(--ink); background: var(--surface-2); } } [data-mood="floodlit"] .app-topnav { background: rgba(7,11,18,0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); }