@font-face {
    font-family: 'Grind Demolished';
    src: url('/brand/grind-demolished.woff2') format('woff2');
    font-display: swap;
}

:root {
    --ink: #f6f2ed;
    --muted: #b9b8bb;
    --gold: #f5b832;
    --ember: #f15b3b;
    --line: #44494e;
    --panel: #1d2228;
}

html { background: #101216; }
body {
    background:
        radial-gradient(circle at 84% 9%, #47251f 0, transparent 30rem),
        linear-gradient(135deg, transparent 0 48%, #ffffff04 49% 51%, transparent 52%) 0 0 / 60px 60px,
        #101216;
}
.site-shell { max-width: 840px; }
.topbar { background: #1d2025; border-bottom: 3px solid var(--ember); padding: 14px 18px; margin: 0 -18px; }
.brand { display: flex; align-items: center; gap: 10px; letter-spacing: .02em; }
.brand img { width: 58px; height: 58px; object-fit: contain; flex: none; }
.brand span { display: grid; gap: 2px; color: inherit; font-size: inherit; margin: 0; vertical-align: initial; }
.brand strong { font: 400 19px/.95 'Grind Demolished', Impact, sans-serif; }
.brand small { color: var(--gold); font: 700 10px/1.2 'DM Sans', sans-serif; letter-spacing: .2em; }
.event-tag { color: var(--gold); font-size: 11px; white-space: nowrap; }
.eyebrow { color: var(--gold); }
.hero { position: relative; padding: 70px 0 38px; border-bottom: 1px solid #ffffff24; }
.hero::before { content: '✦'; position: absolute; right: 0; top: 10px; color: #f15b3b17; font-size: clamp(10rem, 40vw, 20rem); line-height: 1; pointer-events: none; }
.hero > * { position: relative; }
.hero h1 { font: 400 clamp(3.8rem, 11vw, 6.8rem)/.88 'Grind Demolished', Impact, sans-serif; letter-spacing: .01em; margin: 19px 0 23px; }
.hero h1 em { color: var(--ember); }
.lead { color: #e5e0db; max-width: 640px; font-size: 1.2rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 29px; }
.hero-facts span { border: 1px solid #77746f; background: #1e2227; color: var(--gold); padding: 8px 11px; font-size: 11px; font-weight: 700; letter-spacing: .09em; }
.panel, .video-card { background: linear-gradient(145deg, #272c31, #1a1e23); border-color: var(--line); border-radius: 3px; }
.panel h2, .rules h2, .rewards h2, .scene-head h1 { font-family: 'Grind Demolished', Impact, sans-serif; font-weight: 400; letter-spacing: .015em; }
.panel h2, .rules h2, .rewards h2 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
.panel p { color: #ddd9d5; }
input { background: #111418; border-color: #696966; border-radius: 3px; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #f5b83235; }
.button { background: var(--ember); color: #fff; border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; }
.button:hover { background: #ff7353; }
.notice { background: #3d3830; }
.error { background: #5a302e; }
.progress-track { background: #414950; }
.progress-track span { background: var(--ember); }
.reward-card { border-color: #8e622f; }
.mirror-inscription { border-color: var(--gold); }
footer a { color: var(--gold); }

@media (max-width: 540px) {
    .topbar { margin: 0 -16px; padding: 12px 16px; }
    .brand img { width: 48px; height: 48px; }
    .brand strong { font-size: 16px; }
    .brand small { font-size: 9px; letter-spacing: .12em; }
    .event-tag { font-size: 9px; }
    .hero { padding-top: 48px; }
    .hero h1 { font-size: clamp(3.2rem, 15vw, 5rem); }
}

.rich-content { color: #ddd9d5; line-height: 1.6; overflow-wrap: anywhere; }
.rich-content p { margin: 0 0 .8em; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content ul, .rich-content ol { padding-left: 1.4em; margin: .6em 0; }
.rich-content li { margin: .3em 0; }
.rich-content strong { color: #fff; }
.rich-content a { color: var(--gold); text-decoration: underline; }
.challenge { font-size: 1.2rem; font-weight: 500; margin: 8px 0 18px; }
.story { font-size: 1.1rem; }

.progress-panel > .scanner-launch, .progress-panel > .qr-scanner { grid-column: 1 / -1; }
.qr-scanner { margin-top: 16px; padding: 14px; border: 1px solid var(--line); background: #111418; }
.qr-scanner[hidden], .scanner-launch[hidden] { display: none; }
.qr-scanner video { display: block; width: 100%; max-height: 60vh; aspect-ratio: 4 / 3; object-fit: cover; background: #090b0d; }
.qr-scanner p { margin: 12px 0; }