/* Finger Fire site. Tokens from projects/fingerfire/DESIGN.md ("Main Event": night, panel, panel2,
   rule, text, text2, ice, ember, onEmber, hot; Bakbak One 400 + Barlow 600/700; 14 px cards, skewed
   lower-thirds, ember skew only for what is live or selected). The app is always dark, so the dark
   theme is the app palette and the light theme is the derived palette in
   projects/fingerfire/site-docs/SEO-BRIEF.md §0.8 (same hues, accents darkened to AA).
   .band-night keeps the app's night palette in both themes (hero, end band, footer) and resets
   every token inside it, focus ring included. */

@font-face {
    font-family: "Bakbak One";
    src: url("fonts/bakbak-one-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("fonts/barlow-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("fonts/barlow-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: light dark;
    --ground: #F7F5FF;
    --card: #ECE8FF;
    --label: #DCD4FF;
    --text: #100C2E;
    --text2: #463C7A;
    --accent: #8A4B00;
    --hot: #B3123F;
    --ice: #0B5F80;
    --rule: #463C7A;
    --focus: #8A4B00;
    --ember: #FFB21E;
    --on-ember: #1A0F00;
    --display: "Bakbak One", Impact, "Arial Narrow", sans-serif;
    --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root {
        --ground: #100C2E;
        --card: #1E1852;
        --label: #2A2270;
        --text: #F6F4FF;
        --text2: #BEB8EC;
        --accent: #FFB21E;
        --hot: #F42A5C;
        --ice: #9BE9FF;
        --rule: #463C9C;
        --focus: #FFB21E;
    }
}
.band-night {
    --ground: #100C2E;
    --card: #1E1852;
    --label: #2A2270;
    --text: #F6F4FF;
    --text2: #BEB8EC;
    --accent: #FFB21E;
    --hot: #F42A5C;
    --ice: #9BE9FF;
    --rule: #463C9C;
    --focus: #FFB21E;
    background: var(--ground);
    color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font: 600 1.0625rem/1.55 var(--body);
    overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 7vw, 4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
ul { padding-left: 1.25rem; }
li { margin-bottom: 0.4em; }
strong { font-weight: 700; }

.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -5rem; background: var(--ember); color: var(--on-ember); padding: 0.75rem 1rem; z-index: 10; font-weight: 700; }
.skip-link:focus { top: 1rem; }
.skip-link:focus-visible { outline-color: var(--text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar: the scorebug */
.topbar { background: var(--card); color: var(--text); border-bottom: 2px solid var(--rule); }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.4rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-height: 48px; }
.brand img { border-radius: 10px; }
.wordmark { font: 400 1.6rem/1 var(--display); text-transform: uppercase; color: var(--accent); }
.wordmark span { color: var(--hot); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 0.5rem; list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding-inline: 0.75rem; font: 700 0.95rem/1 var(--body); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text); text-decoration: none; z-index: 0; }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
/* Ember skew = selected (DESIGN.md skew-tab rule) */
.site-nav a[aria-current="page"] { color: var(--on-ember); }
.site-nav a[aria-current="page"]::before { content: ""; position: absolute; inset: 0.45rem 0; background: var(--ember); border-radius: 6px; transform: skewX(-8deg); z-index: -1; }
.site-nav a[aria-current="page"]:focus-visible { outline-color: var(--text); }

/* Lower-third label: a static skewed panel2 tab */
.kicker { display: inline-block; margin: 0 0 0.75rem; padding: 0.3rem 0.9rem; background: var(--label); color: var(--text); font: 700 0.8rem/1.4 var(--body); text-transform: uppercase; letter-spacing: 0.09em; border-radius: 6px; transform: skewX(-10deg); }
.kicker span { display: inline-block; transform: skewX(10deg); }

/* Hero: the night arena */
.hero { padding-block: 2.5rem 3rem; border-bottom: 2px solid var(--rule); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.hero-grid > *, .split > * { min-width: 0; }
@media (min-width: 48rem) { .hero-grid { grid-template-columns: minmax(0, 1fr) 20rem; } }
.hero h1 { color: var(--text); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .answer { font-size: 1.25rem; }
.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.badge-row p { margin: 0; color: var(--text2); }
.play-badge { display: inline-block; border-radius: 6px; }
.play-badge img { width: 188px; height: 56px; }

/* Framed store shots: 1 px rule border */
.shot { margin: 0; }
.shot img { border: 1px solid var(--rule); border-radius: 14px; background: #100C2E; }
.hero-shot img { max-width: min(100%, 20rem); margin-inline: auto; }
figcaption { font-size: 0.95rem; color: var(--text2); margin-top: 0.5rem; }

/* Sections */
.section { padding-block: 2.75rem; border-top: 2px solid var(--rule); }
.section:first-of-type { border-top: 0; }
.answer { font-size: 1.15rem; max-width: 44rem; }
.detail { color: var(--text2); max-width: 44rem; }
.split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 48rem) { .split { grid-template-columns: minmax(0, 1fr) 16rem; } }
.split .shot img { max-width: min(100%, 16rem); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.chips li { margin: 0; padding: 0.35rem 0.8rem; background: var(--card); color: var(--text); border-radius: 10px; font: 700 0.95rem/1.4 var(--body); }
.chips .ice { color: var(--ice); }

.facts { display: grid; gap: 0.5rem; margin: 0; }
.facts div { background: var(--card); color: var(--text); padding: 0.75rem 1rem; border-radius: 14px; }
.facts dt { font: 700 0.85rem/1.3 var(--body); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text2); }
.facts dd { margin: 0; font: 400 1.3rem/1.2 var(--display); color: var(--accent); }

.qlinks { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.5rem; }
.qlinks li { margin: 0; }
.qlinks a { display: flex; align-items: center; min-height: 48px; padding: 0.5rem 1rem; background: var(--card); color: var(--text); font-weight: 700; text-decoration: none; border-radius: 14px; border: 1px solid var(--rule); }
.qlinks a:hover { text-decoration: underline; }

/* Tables (stack into cards at 600 px and below) */
.table-wrap { max-width: 48rem; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
caption { display: block; text-align: left; font-weight: 700; color: var(--text2); margin-bottom: 0.5rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 700 0.85rem/1.3 var(--body); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text2); }
td.label { font-weight: 700; letter-spacing: 0.09em; color: var(--ice); }
@media (max-width: 37.5rem) {
    table, thead, tbody, tr, th, td { display: block; }
    thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    tr { background: var(--card); color: var(--text); border-radius: 14px; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
    td { border: 0; padding: 0.25rem 0; }
    td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--text2); }
    tbody th { padding: 0.25rem 0; border: 0; font: 400 1.2rem/1.2 var(--display); text-transform: none; letter-spacing: 0; color: var(--text); }
}

/* Inner pages */
.page-head { padding-block: 1.5rem 2rem; border-bottom: 2px solid var(--rule); }
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.95rem; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "\203A"; margin-inline: 0.5rem; color: var(--text2); }
.crumbs a { display: inline-block; padding-block: 0.75rem; }
.crumbs [aria-current] { color: var(--text2); }
.lede { font-size: 1.2rem; color: var(--text2); max-width: 44rem; }
.step-n { display: block; margin-bottom: 0.35rem; font: 700 0.85rem/1 var(--body); color: var(--accent); text-transform: uppercase; letter-spacing: 0.09em; }
.limits { max-width: 46rem; }
.limits li { margin-bottom: 0.75rem; }
.faq-list .section h2 { font-size: clamp(1.45rem, 3.5vw, 1.9rem); }
.end { padding-block: 2.5rem; }
.end .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.end h2 { margin: 0; }

/* Footer (always night) */
.footer { padding-block: 2rem; border-top: 2px solid var(--ember); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-top p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; padding: 0; margin: 1rem 0; }
.footer-links li { margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 48px; }
.fine { font-size: 0.9rem; color: var(--text2); }
.fine p { margin: 0 0 0.25rem; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }