/* arena.css — page-specific styles for The BLAZE Arena (arena.html).
 *
 * MUST NOT contain navbar rules. Those live in nav.css, linked by all six+
 * pages — see nav.css's own header for why a per-page copy is exactly the bug
 * that got fixed in commit 7d08a29. This file carries no navbar selector.
 *
 * This page deliberately commits to the single dark carnival look (no light
 * theme — a site-wide choice, per the design spec). Comic Sans stack, the
 * BlazeitBG backdrop, dark translucent panels with an orange glow, gold
 * headings/scores — same visual language as nftviewer.css / headblazed.css.
 *
 * This page has NO global box-sizing reset (nftviewer.css does not either),
 * so every rule below that combines width/min-height with padding sets
 * box-sizing: border-box explicitly.
 */

/* Brand colour tokens — copied verbatim from nftviewer.css/style.css so the
 * navbar (which CONSUMES these from nav.css's fallback, but prefers the
 * page's own :root) renders colour-identical to every other page. See
 * nav.css's own comment block for why this is required, not decorative. */
:root {
    --c-orange: orange;
    --c-orange-dark: darkorange;
    --c-red: #ff4500;
    --c-gold: #ffcf48;
    --c-text: #ffffff;
    --navbar-bg: rgba(0, 0, 0, 0.95);
    --glow: 0 0 10px rgba(255, 69, 0, 0.7);
    /* --nav-h and --touch come from nav.css. Do not redefine them here. */
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body, "Comic Sans MS", system-ui, sans-serif);
    background: url('images/BlazeitBG.png') no-repeat center center;
    background-size: 100% auto;
    background-attachment: fixed;
    background-color: #b0e8f7;
    color: var(--c-text);
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-top: calc(var(--nav-h) + 24px);
    /* Sticky footer — same flex-column pattern as every other page
       (nftviewer.css, style.css, about.css, bf.css, headblazed.css,
       distribution.css). tests/footer.spec.js's mechanism check is the
       reason this must match exactly, not just look right. */
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
    width: 100%;
    /* Narrower than the 1400px other pages use — a scoreboard reads best at
       a tighter column even on a huge screen (design brief: "~1100px,
       centered" at 4K). */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 40px;
    box-sizing: border-box;
}

.arena-panel {
    background: rgba(0, 0, 0, .82);
    border: 2px solid #ff7a18;
    box-shadow: 0 0 12px rgba(255, 69, 0, .6);
    border-radius: 20px;
    padding: 24px;
    box-sizing: border-box;
}

.arena-panel h1 {
    margin: 0 0 12px;
    color: var(--c-gold);
    text-shadow: 0 0 6px #ff8c00, 0 0 10px #ff4500;
    text-align: center;
    overflow-wrap: anywhere;
}

/* "how the Arena bangs" button — same shape as every other page's info
 * trigger. Copied from nftviewer.css since this page does not link it. */
.viewer-info-btn {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    margin: 0 auto 12px;
    padding: 6px 14px;
    min-height: var(--touch);
    border-radius: 999px;
    border: 1px solid rgba(255, 207, 72, .6);
    background: rgba(0, 0, 0, .45);
    color: var(--c-gold);
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .2s ease, border-color .2s ease;
}

.viewer-info-btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .viewer-info-btn { transition: none; }
}

/* Centered block: info button sits above the taunt/stamp/status stack. */
.arena-panel { text-align: center; }

.arena-taunt {
    /* The house line is the room's voice — give it a little marquee presence
       rather than letting it read as a caption (owner request, 2026-08-14:
       more game-fi/casino-fi, same BLAZE voice). */
    margin: 6px 0 4px;
    font-size: 17px;
    font-style: italic;
    font-weight: bold;
    color: #ffb347;
    text-shadow: 0 0 14px rgba(255, 140, 0, 0.35);
    overflow-wrap: anywhere;
}

.arena-stamp {
    /* Deliberately quieter than the chips below it. This is provenance — the
       block it was built from — not headline news, and at full weight it
       competed with the live numbers for attention. */
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: 0.02em;
    /* Opaque and still quiet: the translucent .45 white measured 4.19:1 (AA is
       4.5). #a9a397 is 5.8:1 on the panel and still sits below the chips. */
    color: #a9a397;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.arena-status {
    margin: 0 0 16px;
    min-height: 1.3em;   /* reserve the line so status text never shifts layout */
    color: var(--c-gold);
    overflow-wrap: anywhere;
}

/* Live ticker strip — [hidden] by default in the markup, revealed by
 * arena.js only once a chain read actually resolves. No reserved min-height
 * (unlike .arena-status): staying absent must not leave a visible gap, since
 * a dead RPC is an expected, common state for this strip, not an error. */
/* ---- the live floor: a casino board, not a sentence (2026-08-14) ----
   Owner asked for more game-fi/casino-fi while staying in BLAZE's voice. The
   strip used to be one long run-on line that wrapped into a paragraph; it now
   reads as a pulsing LIVE badge plus one chip per game, which is scannable at
   a glance. Same facts, same order — only the shape changed. */
.arena-live-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
}
/* The strip's pulsing LIVE light. Named `-pill` rather than `-badge` because
 * `.arena-live-badge` further down styles a completely different thing (a row's
 * "+3 spins" annotation) and, sitting later in the file, was overriding this
 * one's colour — a red light rendering orange. */
.arena-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: #ff6b6b;
    background: rgba(255, 60, 60, 0.12);
    border: 1px solid rgba(255, 90, 90, 0.55);
}
.arena-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 6px #ff4d4d;
    animation: arena-live-pulse 1.6s ease-in-out infinite;
}
@keyframes arena-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.arena-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.arena-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 207, 72, 0.35);
    box-shadow: inset 0 0 12px rgba(255, 165, 0, 0.07);
}
.arena-chip-icon { font-size: 12px; }
.arena-chip-n {
    font-size: 14px;
    font-weight: bold;
    color: var(--c-gold, #ffcf48);
    font-variant-numeric: tabular-nums;
}
.arena-chip-label { font-size: 11px; color: rgba(255, 255, 255, 0.55); }

.arena-live-narration {
    display: block;
    flex-basis: 100%;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
}
.arena-live-strip[hidden] { display: none; }
.arena-live-delta {
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    font-style: italic;
}

/* ---- the standings ---- */
.arena-standings {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.arena-row {
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 122, 24, .35);
    border-radius: 14px;
    padding: 14px 16px;
    box-sizing: border-box;
}

/* The crown row gets extra presence — gold border + the site's glow, so the
 * leader reads as the leader before anyone parses a single digit. */
.arena-row-tribe[data-rank="0"] {
    border-color: var(--c-gold);
    box-shadow: var(--glow);
}

/* Unaffiliated + House are explicitly outside the medal count — the design
 * brief calls for desaturated/smoky styling that reads as "not competing"
 * at a glance, before anyone reads the label. */
.arena-row-unaffiliated {
    border-style: dashed;
    opacity: .82;
    filter: saturate(.55);
}
.arena-row-house {
    border-style: dashed;
    border-color: rgba(255, 255, 255, .25);
    opacity: .68;
    filter: saturate(.35);
}

.arena-row-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;   /* survives 360px: score drops under the name instead of clipping */
    gap: 4px 10px;
}

.arena-medal {
    flex: 0 0 auto;
    min-width: 30px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: var(--c-gold);
}
/* Unaffiliated/House carry an empty badge cell so the name column still
 * lines up with every tribe row above it — deliberately blank, not a
 * missing medal. */
.arena-medal-none { min-width: 0; }

.arena-name {
    flex: 1 1 160px;
    min-width: 0;
    font-weight: bold;
    font-size: 17px;
    color: var(--c-gold);
    text-decoration: none;
    overflow-wrap: anywhere;
}
a.arena-name:hover { text-decoration: underline; color: var(--c-orange); }
a.arena-name:focus-visible,
.arena-name:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 2px;
}

/* The score is the loudest number on the row. tabular-nums so a column of
 * rows (1,204 / 88,412 / 3,004,112) lines up digit to digit instead of
 * jittering as the digit count changes row to row. */
.arena-score {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 18px;
    font-weight: bold;
    color: var(--c-gold);
    text-shadow: 0 0 6px rgba(255, 140, 0, .6);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- the flame bar ---- */
.arena-flame-track {
    position: relative;
    height: 14px;
    margin: 10px 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    box-sizing: border-box;
}

/* Width is set inline per row (proportional to the leader's score) at build
 * time — that is the real, immediately-correct layout width. The grow-in is
 * a pure paint effect layered on top via transform, so it never changes what
 * a measurement of the bar's box actually reports. */
.arena-flame-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff4500, var(--c-gold));
    transform-origin: left center;
    animation: arenaFlameGrow .6s ease-out both;
}

@keyframes arenaFlameGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* The one orchestrated motion moment on the page (staggered per-row via an
 * inline animation-delay set in arena.js) — then the page is still. No
 * looping animation anywhere on this page. */
@media (prefers-reduced-motion: reduce) {
    .arena-flame-fill { animation: none; }
}

.arena-row-sub {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    overflow-wrap: anywhere;
}

/* 🔴 live — the part of a row that is NEWER than the snapshot stamp above the
 * standings. Deliberately brighter than the rest of the sub-line: a merged
 * number must never read as though it came out of the shipped index. No
 * animation, so there is nothing for prefers-reduced-motion to switch off. */
.arena-live-badge {
    color: #ffb347;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- share button + footnote ---- */
.arena-share-wrap {
    margin: 20px 0 6px;
    text-align: center;
}

.arena-share-status {
    margin: 6px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
    min-height: 1.2em;
}

.arena-footnote {
    margin: 10px 0 0;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    color: rgba(255, 255, 255, .6);
    overflow-wrap: anywhere;
}

/* ---- shared button base (copied from nftviewer.css — this page does not
   link it, and the share/"aight bet" buttons both use it) ---- */
.viewer-btn {
    font-family: inherit;
    font-weight: bold;
    font-size: 16px;
    min-height: var(--touch);
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: orange;
    color: #000;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .2s ease;
}
.viewer-btn:hover { background: darkorange; }
.viewer-btn:disabled { opacity: .5; cursor: not-allowed; }
.viewer-btn:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .viewer-btn { transition: none; }
}

/* ---- footer — copied verbatim from nftviewer.css so this page matches the
   other five/six. ---- */
.footer {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: var(--panel, rgba(0, 0, 0, 0.8));
    color: var(--c-text, #fff);
    position: relative;
    font-size: 14px;
    margin-top: 20px;
    box-sizing: border-box;
}
.footer p { margin: 0; }

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 12px;
    margin-top: 6px;
    padding: 0 12px;
    font-size: 12px;
    color: #ded6c6; /* opaque: translucent text over a translucent panel has no contrast ratio (READABILITY rule) */
}
.trust-strip a {
    color: var(--c-gold, #ffcf48);
    text-decoration: none;
}
.trust-strip a:hover,
.trust-strip a:focus-visible {
    color: var(--c-orange, orange);
    text-decoration: underline;
}
.trust-sep { opacity: 0.5; }

/* Off-screen until focused, so keyboard users can jump the navbar. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #000;
    color: #ffcf48;
    padding: 10px 14px;
    border-radius: 0 0 8px 0;
    z-index: 2000;
}
.skip-link:focus { left: 8px; top: 8px; }
.skip-link:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 2px;
}

/* ---- "how the Arena bangs" modal (copied from nftviewer.css's
   .viewer-modal-* / .viewer-rap-* block, same as every other page's info
   modal — headblazed.css, bf.css and about.css each carry their own copy
   too). Reused as-is by id: #arenaInfoModal / #arenaInfoClose / etc. ---- */
.viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}


.viewer-modal-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 26px 24px 24px;
    border-radius: 16px;
    border: 2px solid #ff7a18;
    background: rgba(10, 6, 2, .97);
    color: var(--c-text, #fff);
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, .8), var(--glow, 0 0 10px rgba(255, 69, 0, .7));
    animation: arenaModalIn .22s ease;
    text-align: center;
}
@keyframes arenaModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}


.viewer-modal-close:focus-visible { outline: 3px solid var(--c-gold, #ffcf48); outline-offset: 2px; }

#arenaInfoTitle {
    margin: 0 0 4px;
    font-size: 20px;
    color: var(--c-gold, #ffcf48);
    text-shadow: 0 0 6px #ff8c00, 0 0 10px #ff4500;
    text-wrap: balance;
}


.viewer-rap-mode {
    margin: 0 0 6px;
    font-weight: bold;
    color: var(--c-gold, #ffcf48);
    font-size: 15px;
}
.viewer-rap-mode span { color: rgba(255, 255, 255, .6); font-weight: normal; font-size: 12px; }
.viewer-rap { margin: 0; font-size: 14px; line-height: 1.7; color: #fff; }


@media (prefers-reduced-motion: reduce) {
    .viewer-modal-card { animation: none; }
}

@media screen and (max-width: 768px) {
    .arena-panel { padding: 16px; }
    .arena-panel h1 { font-size: 24px; }
    .arena-score { font-size: 16px; }
    .arena-row { padding: 12px; }
    .viewer-modal-card { padding: 22px 16px 18px; }
    .viewer-modal-done { width: 100%; }
    .arena-share-wrap .viewer-btn { width: 100%; }
}