/* ===========================================================================
   Arcane Tourneys — design tokens and shared chrome
   ---------------------------------------------------------------------------
   Visual direction: field equipment. Olive-biased gunmetal and flat dark
   earth, stencilled lettering, hazard chevrons, data plates with lot numbers,
   restrained rust accents and a clearly visible generated battlefield plate.

   Genre conventions are used deliberately. What is NOT used: any publisher's
   artwork, typeface, logo, key art, screenshots, rank emblems, map art,
   skull/insignia imagery, or their palette. The battlefield footage is an
   original generated asset; no publisher or stock artwork is used.

   Typefaces: Big Shoulders Stencil Display (headings), Oswald (UI labels),
   Space Mono (instrument readouts), Inter (body) — all open source under the
   SIL Open Font License, none belonging to any game.

   Built mobile-first: base rules are the phone layout; wider breakpoints add
   the sidebar and extra columns.
   =========================================================================== */

:root {
    /* Ground: churned earth and ash. Warmer and dirtier than painted steel. */
    --ink-900:   #080907;
    --ink-850:   #0E100D;
    --ink-800:   #151713;
    --surface:   rgba(24, 25, 20, 0.92);
    --surface-2: rgba(31, 32, 26, 0.94);
    --raised:    rgba(39, 38, 30, 0.96);

    /* Molten — firelight and hazard marking. The only loud colour. */
    --molten:    #963E20;
    --ember:     #C6753D;
    --ember-lt:  #D9A873;

    /* Weathered earth — sun-bleached webbing and dust */
    --tan:       #96896D;
    --tan-lt:    #C2B596;

    /* Rust — oxidised metal, used sparingly on worn edges */
    --rust:      #713624;

    /* Cold steel counterpoint, knocked back so it reads as gunmetal not neon */
    --teal:      #6E8792;
    --teal-dim:  #36474F;

    --line:      rgba(211, 205, 190, 0.19);
    --line-heavy:rgba(226, 218, 199, 0.38);
    --line-soft: rgba(211, 205, 190, 0.09);

    /* Semantic, kept distinct from brand signals */
    --ok:        #4ADE80;
    --warn:      #FBBF24;
    --danger:    #DC2626;

    /* Text: bone and dust, never pure white */
    --text:      #F4EFE5;
    --muted:     #BEB7A9;
    --faint:     #969185;

    --font-stencil: 'Oswald', 'Arial Narrow', sans-serif;
    --font-display: 'Oswald', 'Arial Narrow', ui-sans-serif, sans-serif;
    --font-body:    'Roboto Condensed', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius:    0;
    --radius-sm: 0;
    --gutter:    clamp(14px, 3vw, 40px);
    --sidebar:   clamp(232px, 20vw, 288px);
    --focus:     0 0 0 2px var(--ink-900), 0 0 0 4px var(--ember);

    background: var(--ink-900);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100%;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --------------------------------------------------------------- backdrop
   Layers, back to front:
     .bg-video  original generated footage, muted loop
     .backdrop  molten/teal wash + a scrim heavy enough that panel contrast
                is unaffected by whatever the footage is doing
     .vignette  edge falloff
     .film-grain ash

   The video carries NO CSS filter: filtering a fullscreen video re-processes
   every decoded frame on the main thread, which is what made the previous
   background stutter. Grading is done with the static layers above it. */
.bg-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -4;
    pointer-events: none;
    /* Own compositor layer: keeps frame blits off the main thread */
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Anyone who asked for less motion gets the still plate instead */
@media (prefers-reduced-motion: reduce) { .bg-video { display: none; } }

.backdrop {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 8, 6, 0.76) 0%, rgba(7, 8, 6, 0.55) 34%, rgba(7, 8, 6, 0.47) 68%, rgba(7, 8, 6, 0.62) 100%),
        radial-gradient(100vw 55vh at 50% 118%, rgba(115, 48, 23, 0.12), transparent 68%),
        radial-gradient(70vw 45vh at 76% -14%, rgba(110, 130, 136, 0.06), transparent 66%),
        /* Scrim: this is what keeps text and panels at full contrast over
           moving footage. Without it the video would wash the UI out. */
        rgba(7, 8, 6, 0.18);
}
/* Smoke and soot.
   Two layers: an even falloff, plus warm haze low down where the fire is and
   heavier soot in the upper corners. Irregular on purpose — a plain circular
   vignette reads as a photo filter, this reads as air full of smoke. */
.vignette {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(70% 55% at 22% 8%, rgba(0,0,0,0.46), transparent 62%),
        radial-gradient(64% 52% at 84% 4%, rgba(0,0,0,0.42), transparent 60%),
        radial-gradient(110% 70% at 50% 116%, rgba(49, 29, 16, 0.22), transparent 68%),
        radial-gradient(circle at 50% 42%, transparent 38%, rgba(0,0,0,0.58) 100%);
}

/* Grime: fractal noise, so it never tiles into a visible pattern.
   This is the layer that stops flat panels looking freshly printed. */
.grime {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.085;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

/* Scorch: soot creeping in from the edges of the viewport. */
.scorch {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background:
        radial-gradient(38% 26% at 2% 18%, rgba(0,0,0,0.85), transparent 70%),
        radial-gradient(34% 22% at 99% 42%, rgba(0,0,0,0.8), transparent 70%),
        radial-gradient(44% 20% at 50% 101%, rgba(0,0,0,0.7), transparent 72%);
}
/* ------------------------------------------------------------- typography */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    text-wrap: balance;
    margin: 0 0 0.5em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
/* The big headings are cut stencil, the way kit and crates are marked.
   Reserved for display sizes - stencil is hard work at body size. */
h1, .detail-title, .featured-label, .status-title h1 {
    font-family: var(--font-stencil);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.75);
}
h1 { font-size: clamp(32px, 7.4vw, 56px); }
h2 { font-size: clamp(20px, 3.4vw, 27px); }
h3 { font-size: clamp(16px, 2.2vw, 19px); }

p { margin: 0 0 1em; }
a { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tan-lt); }
:focus-visible { outline: none; box-shadow: var(--focus); }

.num { font-variant-numeric: tabular-nums; }
.molten-glow { text-shadow: none; }

/* Section marker: a small block plus stencil label */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}
.eyebrow::before {
    content: "";
    width: 18px; height: 2px;
    background: var(--faint);
    flex: none;
}
/* Only a marker that leads the primary action carries the accent */
.eyebrow.is-primary { color: var(--ember); }
.eyebrow.is-primary::before { background: var(--molten); }

/* Instrument readout */
.telemetry {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--faint);
}
.telemetry b { color: var(--text); font-weight: 700; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--molten);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.skip-link:focus { left: 8px; }

/* ----------------------------------------------------------------- brand */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: var(--text);
    min-height: 44px;
}
.brand-lockup .wordmark {
    font-family: var(--font-display);
    font-size: clamp(18px, 4.6vw, 26px);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.brand-lockup .wordmark span { color: var(--molten); }

/* --------------------------------------------------------------- buttons */
.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 26px;
    border: 1px solid transparent;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.btn-primary {
    background: linear-gradient(180deg, #A84B2B, #79311F);
    border-color: rgba(217, 168, 115, 0.32);
    color: #F3EDE1;
    box-shadow: inset 0 1px rgba(255,255,255,0.08), inset 0 -2px rgba(0,0,0,0.35);
}
.btn-primary:hover { background: linear-gradient(180deg, #B95A35, #843722); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,0.1); }
.btn-accent { background: var(--teal); color: #04201C; }
.btn-accent:hover { background: #5EEAD4; color: #04201C; }
.btn-ghost { background: transparent; border-color: var(--line-heavy); color: var(--text); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.07); color: var(--text); }
/* Tertiary: a link that keeps button hit area without button weight */
.btn-quiet { background: none; border-color: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.btn-link {
    background: none; border: 0; cursor: pointer; padding: 14px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
    min-height: 44px; border-bottom: 1px solid transparent;
}
.btn-link:hover { color: var(--text); border-bottom-color: var(--text); }

/* ------------------------------------------------------------------ chips */
.chip {
    display: inline-block;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.chip-violet { background: var(--molten); color: #fff; }                                   /* primary */
.chip-cyan   { background: rgba(45,212,191,0.14); color: var(--teal); border: 1px solid rgba(45,212,191,0.4); }
.chip-ok     { background: rgba(74,222,128,0.14); color: var(--ok);   border: 1px solid rgba(74,222,128,0.4); }
.chip-muted  { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--line); }
.chip-tan    { background: rgba(251,146,60,0.14); color: var(--ember); border: 1px solid rgba(251,146,60,0.4); }

/* ----------------------------------------------------------------- panels
   Brutalist HUD panel: hard edges, deep shadow, a molten accent when it is
   the primary object on screen. */
.panel {
    position: relative;
    background:
        linear-gradient(112deg, rgba(255,255,255,0.025), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.12)),
        var(--surface);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px rgba(255,255,255,0.025), 0 10px 30px rgba(0,0,0,0.28);
}
/* Wear on the panel itself: dirt settling into the corners and a rubbed
   highlight along the top edge, as if the paint has been scuffed thin.
   Soft gradients only — nothing repeating. */
.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(52% 40% at 0% 0%, rgba(0,0,0,0.42), transparent 66%),
        radial-gradient(48% 38% at 100% 100%, rgba(0,0,0,0.38), transparent 64%),
        linear-gradient(180deg, rgba(240, 232, 214, 0.045) 0 1px, transparent 2px);
}
/* Anything drawn inside a panel sits above the wear layer. */
.panel > * { position: relative; z-index: 1; }
/* The one elevated surface in a view. Used sparingly. */
.panel.is-raised {
    background: var(--raised);
    border-color: var(--line-heavy);
    box-shadow: 0 10px 34px rgba(0,0,0,0.6);
}
.panel.accent-molten { border-left: 4px solid var(--molten); }
.panel.accent-teal   { border-left: 4px solid var(--teal); }

/* ------------------------------------------------------- site header/footer */
.site-header {
    position: relative;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px var(--gutter);
}

.site-footer {
    position: relative;
    z-index: 30;
    margin-top: 48px;
    padding: 30px var(--gutter) calc(30px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    color: var(--muted);
}
.site-footer .footer-grid {
    display: grid;
    gap: 22px 40px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    max-width: 1180px;
    margin: 0 auto;
}
.site-footer h2 {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 8px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* Comfortable tap targets on phones */
.site-footer a { color: var(--muted); text-decoration: none; display: block; padding: 9px 0; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); text-decoration: underline; }

/* Disclaimer stays normal body size and contrast, never small print */
.footer-legal {
    max-width: 1180px;
    margin: 24px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    display: grid;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
}
.footer-legal strong { color: var(--text); font-weight: 600; }

/* Non-affiliation notice */
.affiliation-notice {
    border: 1px solid var(--line);
    border-left: 4px solid var(--molten);
    background: rgba(234, 88, 12, 0.07);
    padding: 15px 17px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}
.affiliation-notice strong { color: var(--text); }

/* Credential warning */
.credential-warning {
    position: relative;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.08);
    padding: 18px 17px 15px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #F5E6C8;
}
/* A solid rule, not a stripe pattern */
.credential-warning::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--warn);
}
.credential-warning strong { color: #FFF3D6; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: #27272A; }
::-webkit-scrollbar-thumb:hover { background: #3F3F46; }

/* Visually hidden but available to screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* A compact disclaimer that rides alongside a named game title. Kept at
   readable body size and contrast — it is a notice, not fine print. */
.inline-notice {
    margin: 14px 0 0;
    padding-left: 12px;
    border-left: 2px solid var(--line-heavy);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}
.inline-notice a { color: var(--ember); }

/* Specification list for a format whose details are not yet settled */
.spec {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0 0;
    text-align: left;
}
@media (min-width: 640px) { .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec > div { background: var(--surface); border: 1px solid var(--line-soft); padding: 14px 16px; }
.spec dt {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}
.spec dd {
    margin: 5px 0 0;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Compact footer: used on the hub so legal links stay one tap away without
   taking a third of the page. The disclaimer keeps full body size. */
.site-footer.is-compact { margin-top: 32px; padding-top: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.site-footer.is-compact p { max-width: 1180px; margin: 0 auto 8px; }
.site-footer.is-compact p:last-child { margin-bottom: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-links a {
    display: inline-block;
    padding: 6px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--text); text-decoration: underline; }

/* Watch party embeds are built only from allowlisted streaming-platform URLs. */
.watch-party-layout { display: grid; gap: 16px; }
.stream-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line-heavy);
}
.stream-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stream-external {
    display: grid;
    place-content: center;
    justify-items: center;
    min-height: 320px;
    padding: 32px;
    border: 1px solid var(--line-heavy);
    background: radial-gradient(circle at 50% 30%, rgba(167, 139, 250, 0.12), transparent 55%), #050505;
    text-align: center;
}
.stream-external strong { margin-top: 8px; font-family: var(--font-display); font-size: clamp(28px, 5vw, 48px); text-transform: uppercase; }
.stream-external p { max-width: 56ch; margin: 10px 0 20px; color: var(--muted); }
.stream-now-playing { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.stream-now-playing div { display: grid; gap: 3px; min-width: 0; }
.stream-now-playing strong { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; }
.stream-now-playing small { color: var(--muted); overflow-wrap: anywhere; }
.stream-list { display: grid; align-content: start; gap: 8px; }
.stream-choice {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.stream-choice:hover, .stream-choice:focus-visible { border-color: var(--line-heavy); }
.stream-choice.is-active { border-color: var(--ember); box-shadow: inset 3px 0 0 var(--ember); }
.stream-choice span { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; }
.stream-choice small { color: var(--muted); }
@media (min-width: 900px) {
    .watch-party-layout { grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); }
}
@media (max-width: 560px) {
    .stream-now-playing { align-items: stretch; flex-direction: column; }
    .stream-now-playing .btn { text-align: center; }
}