/* =========================================================
   FIGHTDLE — HIGHER OR LOWER
   Only what this mode needs. Fonts, tokens, focus states and the
   backdrop come from /shared/brand.css; the shared page furniture
   (logo, mode bar, modals, footer) is styled here in the same idiom.
   ========================================================= */

/* Matches the other mode pages: a full-bleed centring column with no body
   padding, so the mode bar and panels sit exactly where they do elsewhere.
   Insetting the body here made every element 32px narrower than its
   counterpart on the other pages. */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--font-body);
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    color: var(--ink);
    text-align: center;
    overflow: auto;   /* matches the other mode pages */
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.78) 100%),
        url('/IMAGES/BACKGROUNDFINAL.png') center / cover no-repeat;
    /* backdrop fallback — sits in the same layer as the image, so it
       cannot end up painting over it the way a body background can */
    background-color: #101010;
}

/* Mirrors the other modes: the container hugs its content at desktop and
   only goes full-width on phones. `width: 100%` is media-scoped in the
   reference stylesheet — applying it unconditionally stretched the mode bar
   across the whole viewport on desktop. */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-bottom: 50px;
}

@media (max-width: 768px) {
    body { overflow-x: hidden; }

    .container {
        width: 100%;
        padding: 15px;
    }
}

/* .logo img is styled in /shared/layout.css so it matches every other page. */

/* === GAME === */
/* The board itself is chromeless — two big photographs are the interface, and
   a panel around them just competes. The interstitial and summary are result
   screens rather than the board, so they keep the panel. */
.hl-game {
    margin: 20px auto 0;
    width: 100%;
    max-width: 720px;
    padding: 0 4px;
}

.hl-summary,
.hl-interstitial {
    background: rgba(30, 30, 30, .88);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 24px 20px 28px;
    margin: 24px auto 0;
    width: 100%;
    max-width: 640px;
}

.hl-progress {
    margin: 0 0 6px;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* === TOPBAR (category + round chips) === */
.hl-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

/* Gold on a dark panel, the way every other framed element on the site is
   done — the white pill this started as came from the layout reference and
   sat outside the Fightdle palette. */
.hl-cat-pill {
    font-family: var(--font-display);
    font-size: clamp(15px, 3.8vw, 19px);
    letter-spacing: .03em;
    color: var(--gold);
    background: rgba(30, 30, 30, .88);
    border: 2px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 7px 15px;
    white-space: nowrap;
}

.hl-rounds { display: flex; gap: 6px; }

.hl-round-chip {
    font-family: var(--font-display);
    font-size: clamp(14px, 3.4vw, 17px);
    color: var(--ink-soft);
    background: rgba(30, 30, 30, .8);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-sm);
    min-width: 34px;
    padding: 7px 4px;
    text-align: center;
    line-height: 1;
}

/* The live round picks up the gold fill, matching the primary buttons. */
.hl-round-chip.is-current {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1a1a;
}

.hl-round-chip.is-done {
    background: rgba(30, 30, 30, .5);
    border-color: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .3);
}

.hl-category {
    font-family: var(--font-display);
    font-size: clamp(24px, 6vw, 34px);
    margin: 0 0 6px;
    letter-spacing: .03em;
}

.hl-blurb { margin: 0 0 20px; color: var(--ink-soft); font-size: 16px; }

.hl-instruction {
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--ink-soft);
}
.hl-instruction strong { color: var(--gold); }

/* The visible window. The track holds three cards — the two in play plus
   the next one waiting off-screen right — and slides left by exactly one
   card-plus-gap to advance. */
.hl-viewport {
    --hl-gap: 12px;
    overflow: hidden;
    /* the OR badge is positioned against this, not against the track, so it
       stays put while the cards slide underneath it */
    position: relative;
}

/* Sits on the seam between the two visible cards. */
.hl-or {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    font-family: var(--font-display);
    font-size: clamp(13px, 3.2vw, 16px);
    letter-spacing: .04em;
    color: #111;
    background: #fff;
    width: clamp(42px, 11vw, 54px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.hl-track {
    display: grid;
    grid-auto-flow: column;
    /* Percentages resolve against the track, which is the viewport's width,
       so two cards fill the window and the third overflows and is clipped. */
    grid-auto-columns: calc((100% - var(--hl-gap)) / 2);
    gap: var(--hl-gap);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.hl-track.is-sliding {
    transform: translateX(calc((100% + var(--hl-gap)) / -2));
}

/* A card is a photograph with the name riding on top of it. */
.hl-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--panel-2);
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    padding: 0;
    min-width: 0;
    /* These are real <button>s so they're keyboard-operable. */
    font: inherit;
    color: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.hl-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* The photos are busy and the chips are white — without this the label edge
   disappears into a light background like a white fight kit or a bright crowd. */
.hl-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, .55) 100%);
}

.hl-chips {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.hl-card[disabled] { cursor: default; }

@media (hover: hover) {
    .hl-card:not([disabled]):hover {
        border-color: var(--gold);
        transform: translateY(-3px);
    }
}

.hl-card.is-picked { border-color: var(--gold); }
.hl-card.is-correct { border-color: var(--correct); }
.hl-card.is-wrong { border-color: var(--wrong); }

.hl-name {
    font-family: var(--font-display);
    font-size: clamp(14px, 3.4vw, 20px);
    letter-spacing: .01em;
    line-height: 1.1;
    color: #111;
    background: #fff;
    border-radius: 9px;
    padding: 7px 11px;
    max-width: 100%;
    overflow-wrap: break-word;
}

.hl-value {
    font-family: var(--font-display);
    font-size: clamp(13px, 3.1vw, 17px);
    letter-spacing: .02em;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .62);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px;
    padding: 6px 10px;
    /* even-width digits, so a number ticking upward doesn't shimmer */
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* The chip pops as it flips from "?" to a number, then the count carries it
   the rest of the way. Short — the rise is the animation, this just marks
   the moment it starts. */
@keyframes hl-value-pop {
    0%   { transform: scale(.84); opacity: .5; }
    55%  { transform: scale(1.07); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.hl-value.revealed {
    animation: hl-value-pop .34s var(--ease) both;
}

.hl-value.known { color: #fff; }
.hl-value.revealed.correct { background: var(--correct); border-color: var(--correct); color: #10240f; }
.hl-value.revealed.wrong { background: var(--wrong); border-color: var(--wrong); color: #2a0b08; }

/* === CONTROLS === */
.hl-btn {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: .05em;
    color: var(--ink);
    background: var(--panel-3);
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: var(--radius-sm);
    padding: 13px 30px;
    min-width: 130px;
    cursor: pointer;
    transition: background-color .25s var(--ease),
                border-color .25s var(--ease),
                transform .25s var(--ease);
}

@media (hover: hover) {
    .hl-btn:hover { border-color: var(--gold); transform: translateY(-2px); }
}
.hl-btn:active { transform: translateY(0); }

.hl-btn--next { margin-top: 16px; background: var(--gold); color: #1a1a1a; border-color: var(--gold); }

.hl-feedback { min-height: 1.4em; margin: 14px 0 0; color: var(--ink-soft); font-size: 16px; }

/* The per-round result line is redundant: the card itself reveals the number
   and turns green or red. Kept in the DOM but visually hidden, because that
   reveal is colour-only — this is what a screen reader announces.
   Scoped to the id so the summary's share note (.hl-feedback) still shows. */
#hlFeedback {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.hl-scoreline {
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: .05em;
}

/* === SUMMARY === */
.hl-final-score {
    font-family: var(--font-display);
    font-size: clamp(36px, 11vw, 56px);
    color: var(--gold);
    margin: 10px 0 18px;
}

/* Sits under the score. Stays hidden unless Firestore actually answers, so
   an offline or blocked request leaves no empty gap behind. */
.hl-average {
    display: inline-block;
    margin: -2px 0 20px;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    background: rgba(30, 30, 30, .9);
    border: 2px solid var(--gold);
    font-family: var(--font-display);
    font-size: clamp(16px, 4.2vw, 21px);
    letter-spacing: .03em;
    color: var(--ink);
}

/* The number itself takes the gold, so the eye lands on it rather than on
   the label. */
.hl-average-value { color: var(--gold); }

/* `display: inline-block` above ties with the UA's `[hidden]` rule on
   specificity and wins on origin, so without this the hidden element still
   lays out — an empty pill under the score. */
.hl-average[hidden] { display: none; }

.hl-breakdown { max-width: 340px; margin: 0 auto 22px; }

.hl-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: 16px;
}

.hl-summary-row:last-child { border-bottom: none; }

/* Portraits get tight below ~420px; drop the VS divider rather than
   letting the cards squeeze into unreadable slivers. */
@media (max-width: 420px) {
    .hl-viewport { --hl-gap: 8px; }
    .hl-chips { left: 5px; right: 5px; bottom: 7px; gap: 4px; }
    .hl-name { padding: 6px 8px; border-radius: 8px; }
    .hl-value { padding: 5px 8px; }
    .hl-btn { min-width: 118px; padding: 12px 20px; }
}

/* === CATEGORY INTERSTITIAL === */
.hl-interstitial { animation: hl-fade-in .35s var(--ease) both; }

.hl-inter-score {
    font-family: var(--font-display);
    font-size: clamp(30px, 9vw, 46px);
    color: var(--gold);
    margin: 6px 0 0;
}

.hl-inter-divider {
    width: 60%;
    max-width: 220px;
    height: 1px;
    background: rgba(255, 255, 255, .2);
    margin: 22px auto;
}

@keyframes hl-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* The reset after a slide must not animate, or the track visibly runs
   back to the right before the next round appears. */
.hl-track.no-transition { transition: none; }

/* === LIFETIME STATS (summary screen) === */
.hl-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 360px;
    margin: 0 auto 22px;
}

.hl-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.hl-stat-value {
    font-family: var(--font-display);
    font-size: clamp(18px, 5vw, 26px);
    color: var(--gold);
    line-height: 1.1;
}

.hl-stat-label {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: 1.2;
}

/* Three short tiles still fit across a small phone; just tighten the gap. */
@media (max-width: 380px) {
    .hl-stats { gap: 6px; }
}