/* Arena iframe mode — hide wallet-specific UI */
.arena-mode .wallet-ui,
.arena-mode .wallet-connect-prompt { display: none !important; }

/* iOS WebContent crash mitigation 5/10 — only the GPU-expensive hero FX
   layers were causing the crash (blur(8px) hero-sweep, 14 ember particles,
   rim breath, aberration). Those are removed from the DOM above on landing.
   The remaining animations (Ken Burns hero, ON AIR pulse, logo glow, clock
   blink, arrow nudge, programme shimmer) are cheap (single-element transform/
   opacity) and tested OK. Keep filter:none on hero img mobile-only — the
   saturate/contrast/brightness layer combined with Ken Burns scale was an
   amplifier on iOS 3x DPR. */
@media (max-width: 600px) {
    /* iOS WebContent crash mitigation — mobile gets a static landing.
       The cumulative cost of the animation stack (Ken Burns hero,
       hero-sweep blur(8px), 14 ember particles, hero-rim breath, hero-
       aberration, ON AIR pulse, logo glow, clock blink, arrow nudge,
       shimmer) exceeds iOS Safari's per-tab WebContent budget at 3x
       DPR. Tested cd0ad03 (full kill) = stable, f9b50fb / 2222506
       (partial kill, small anims kept) = still loops. The threshold
       sits below the cost of even the small animations.
       Desktop is unaffected — no such limit on full WebContent. */
    #landing-page .hero-aberration,
    #landing-page .hero-rim,
    #landing-page .hero-sweep,
    #landing-page .hero-embers,
    #landing-page .hero-embers .ember,
    #landing-page .crt-scanlines,
    #landing-page .crt-vignette,
    #landing-page .crt-glitch { display: none !important; }

    #landing-page *,
    #landing-page *::before,
    #landing-page *::after {
        animation: none !important;
    }
    #landing-page .hero-fallback,
    #landing-page img.hero-fallback {
        filter: none !important;
    }
    /* Exceptions: a small set of user-selected motion accents that have
       been tested as cheap enough to coexist with the iOS WebContent
       budget. Each is a single small DOM element animating a single
       cheap property (transform translate or box-shadow). */
    #landing-page .cta-arrow {
        /* Play arrow ▶ on JOIN THE BROADCAST — 6px translate, 1.2s. */
        animation: arrowNudge 1.2s ease-in-out infinite !important;
    }
    #landing-page .on-air {
        /* ON AIR pill — box-shadow pulse, 2s. Reinforces the "tuning in
           to a live broadcast" thematic conceit. */
        animation: onAirPulse 2s ease-in-out infinite !important;
    }
    /* Ken Burns — subtle scale on the hero img. Selector matches the
       desktop rule's specificity (#landing-page .hero-media img.hero-
       fallback) so the !important wins against both the original
       Ken Burns rule and the blanket animation:none kill above.
       Filter stays off (saturate/contrast/brightness was the
       amplifier — verified mobile-stable at 63360ad with the bumped-
       speed test; here back to the subtle 30s / 1.06 production
       timing matching the desktop look). */
    #landing-page .hero-media img.hero-fallback {
        animation: landingKenBurns 30s ease-in-out infinite alternate !important;
    }
}

/* ============================================================================
   LANDING PAGE — TUNE-IN BROADCAST CHANNEL
   Replaces the parked parallax-gate scene. Single primary CTA (JOIN THE
   BROADCAST), demoted identity row (CONNECT WALLET / USE PASSKEY).
   All rules scoped under #landing-page so they don't bleed into the rest
   of the app. Two amber tones (#ffb347 text, #8a6f4a border) inlined as
   literals — see CLAUDE.md "no new tokens in :root" rule.
   ============================================================================ */
#landing-page {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: #000;
    color: #f0e3c8;
    font-family: var(--font-mono);
    overflow: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#landing-page.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ----- Hero media (static cast key art with ken-burns + filter) ----- */
#landing-page .hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #000;
    overflow: hidden;
}
#landing-page .hero-media img.hero-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    filter: saturate(1.08) contrast(1.05) brightness(0.95);
    animation: landingKenBurns 30s ease-in-out infinite alternate;
    transform-origin: center 30%;
}
@keyframes landingKenBurns {
    from { transform: scale(1.0) translateX(0); }
    to   { transform: scale(1.06) translateX(-1.5%); }
}

/* Cinematic gradients over hero */
#landing-page .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.25) 80%, rgba(0,0,0,0.65) 100%),
        linear-gradient(180deg, rgba(10,6,6,0.55) 0%, rgba(10,6,6,0.1) 30%, rgba(10,6,6,0.18) 60%, rgba(10,6,6,0.75) 100%);
    pointer-events: none;
}
/* Color separation / chromatic aberration */
#landing-page .hero-aberration {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,45,85,0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 50%, rgba(0,255,200,0.05) 0%, transparent 40%);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* ----- Cursed-energy embers — 14 floating particles drift upward ----- */
#landing-page .hero-embers {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
#landing-page .ember {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffb347;
    box-shadow: 0 0 6px #ffb347, 0 0 12px rgba(255,179,71,0.5);
    opacity: 0;
    animation: emberDrift linear infinite;
}
@keyframes emberDrift {
    0%   { transform: translate(0, 0)        scale(0.8); opacity: 0; }
    10%  {                                              opacity: 0.9; }
    50%  { transform: translate(20px, -50vh) scale(1);   opacity: 0.7; }
    90%  {                                              opacity: 0.4; }
    100% { transform: translate(-15px, -110vh) scale(0.5); opacity: 0; }
}
#landing-page .ember:nth-child(1)  { left:  6%; animation-duration: 18s; animation-delay:  0s;   background: #ff2d55; box-shadow: 0 0 6px #ff2d55, 0 0 14px rgba(255,45,85,0.5); width: 4px; height: 4px; }
#landing-page .ember:nth-child(2)  { left: 14%; animation-duration: 22s; animation-delay: -3s; }
#landing-page .ember:nth-child(3)  { left: 22%; animation-duration: 16s; animation-delay: -8s; }
#landing-page .ember:nth-child(4)  { left: 30%; animation-duration: 24s; animation-delay: -12s; background: #ff2d55; box-shadow: 0 0 6px #ff2d55, 0 0 14px rgba(255,45,85,0.5); }
#landing-page .ember:nth-child(5)  { left: 38%; animation-duration: 19s; animation-delay: -5s; }
#landing-page .ember:nth-child(6)  { left: 46%; animation-duration: 21s; animation-delay: -10s; width: 2px; height: 2px; }
#landing-page .ember:nth-child(7)  { left: 54%; animation-duration: 17s; animation-delay: -2s; }
#landing-page .ember:nth-child(8)  { left: 62%; animation-duration: 23s; animation-delay: -14s; background: #ff2d55; box-shadow: 0 0 6px #ff2d55, 0 0 14px rgba(255,45,85,0.5); }
#landing-page .ember:nth-child(9)  { left: 70%; animation-duration: 20s; animation-delay: -7s; }
#landing-page .ember:nth-child(10) { left: 78%; animation-duration: 18s; animation-delay: -1s; width: 2px; height: 2px; }
#landing-page .ember:nth-child(11) { left: 86%; animation-duration: 25s; animation-delay: -11s; background: #ff2d55; box-shadow: 0 0 6px #ff2d55, 0 0 14px rgba(255,45,85,0.5); width: 4px; height: 4px; }
#landing-page .ember:nth-child(12) { left: 94%; animation-duration: 19s; animation-delay: -6s; }
#landing-page .ember:nth-child(13) { left: 50%; animation-duration: 26s; animation-delay: -15s; width: 5px; height: 5px; }
#landing-page .ember:nth-child(14) { left: 18%; animation-duration: 28s; animation-delay: -9s; }

/* Stadium light sweep — phantom horizontal flare crosses every 9s */
#landing-page .hero-sweep {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
#landing-page .hero-sweep::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -25%;
    width: 18%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255,179,71,0.04) 20%,
        rgba(255,215,0,0.18) 50%,
        rgba(255,179,71,0.04) 80%,
        transparent 100%
    );
    filter: blur(8px);
    transform: skewX(-12deg);
    animation: heroSweep 9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes heroSweep {
    0%, 12% { left: -25%; opacity: 0; }
    18%     { opacity: 1; }
    60%     { opacity: 1; }
    82%     { left: 130%; opacity: 0; }
    100%    { left: 130%; opacity: 0; }
}

/* Rim pulse — edges of hero breathe red on a slow cycle */
#landing-page .hero-rim {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    box-shadow:
        inset 0 0 80px rgba(255,45,85,0.15),
        inset 0 0 160px rgba(255,45,85,0.08);
    animation: rimBreath 5s ease-in-out infinite;
}
@keyframes rimBreath {
    0%, 100% { box-shadow: inset 0 0 60px rgba(255,45,85,0.10), inset 0 0 140px rgba(255,45,85,0.04); }
    50%      { box-shadow: inset 0 0 100px rgba(255,45,85,0.22), inset 0 0 200px rgba(255,45,85,0.12); }
}

/* CRT signal-loss glitch — fires every 14s for ~0.4s */
#landing-page .crt-glitch {
    position: absolute;
    inset: 0;
    z-index: 51;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(0deg, transparent 49.6%, rgba(255,45,85,0.4) 50%, transparent 50.4%),
        linear-gradient(0deg, transparent 65%, rgba(0,255,200,0.25) 66%, transparent 66.5%),
        linear-gradient(0deg, transparent 30%, rgba(255,179,71,0.2) 30.5%, transparent 31%);
    mix-blend-mode: screen;
    animation: crtGlitch 14s steps(1, end) infinite;
}
@keyframes crtGlitch {
    0%, 96%   { opacity: 0; transform: translateX(0); }
    96.5%     { opacity: 0.8; transform: translateX(-3px); }
    97%       { opacity: 0.6; transform: translateX(2px); }
    97.5%     { opacity: 0.9; transform: translateX(-1px); }
    98%       { opacity: 0.4; transform: translateX(0); }
    100%      { opacity: 0; transform: translateX(0); }
}

/* Scanlines + vignette */
#landing-page .crt-scanlines {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: repeating-linear-gradient(
        0deg,
        rgba(255,179,71,0.05) 0px,
        rgba(255,179,71,0.05) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    mix-blend-mode: overlay;
}
#landing-page .crt-vignette {
    position: absolute;
    inset: 0;
    z-index: 49;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}

/* CRT power-on flicker (plays once on load) */
#landing-page .crt-warmup {
    position: absolute;
    inset: 0;
    z-index: 999;
    background: #fff;
    pointer-events: none;
    animation: crtWarmup 1.4s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
@keyframes crtWarmup {
    0%   { opacity: 0; transform: scaleY(0.001); }
    6%   { opacity: 0.9; transform: scaleY(0.05); }
    12%  { opacity: 0.6; transform: scaleY(0.4); }
    20%  { opacity: 0.2; transform: scaleY(1); }
    35%  { opacity: 0.05; }
    60%  { opacity: 0.02; }
    100% { opacity: 0; transform: scaleY(1); }
}

/* Corner viewfinder brackets */
#landing-page .bracket {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid #ff2d55;
    z-index: 60;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(255,45,85,0.6));
}
#landing-page .bracket.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
#landing-page .bracket.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
#landing-page .bracket.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
#landing-page .bracket.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* Stage wrapper — three rows: status / center / footer */
#landing-page .stage {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ----- STATUS BAR (top): clock · programme · ON AIR ----- */
#landing-page .status-bar {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    background: linear-gradient(180deg, rgba(10,6,6,0.85) 0%, rgba(10,6,6,0.35) 100%);
    border-bottom: 1px solid rgba(255,179,71,0.2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffb347;
    backdrop-filter: blur(4px);
}
#landing-page .clock {
    font-family: 'VT323', monospace;
    font-size: 18px;
    letter-spacing: 1px;
    color: #ffb347;
    display: flex;
    align-items: center;
    gap: 8px;
}
#landing-page .clock .clock-dot {
    width: 5px; height: 5px;
    background: #ffb347;
    box-shadow: 0 0 6px #ffb347;
    animation: landingBlink 1s step-end infinite;
}
@keyframes landingBlink { 50% { opacity: 0.2; } }
#landing-page .programme {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: #f0e3c8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-shadow: 0 0 8px rgba(0,0,0,0.6);
}
#landing-page .programme b { color: #ffb347; font-weight: 700; }
#landing-page .programme .sep { color: #6b5e52; }
#landing-page .on-air {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border: 1.5px solid #ff2d55;
    background: rgba(255,45,85,0.12);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 3px;
    color: #ff2d55;
    animation: onAirPulse 2s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(255,45,85,0.5);
}
#landing-page .on-air .on-air-dot {
    width: 7px; height: 7px;
    background: #ff2d55;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff2d55;
}
@keyframes onAirPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,45,85,0); }
    50% { box-shadow: 0 0 20px rgba(255,45,85,0.5); }
}

/* ----- CENTER STACK ----- */
#landing-page .center {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 20px;
    text-align: center;
    min-height: 0;
}
#landing-page .logo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: contentReveal 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) 0.6s both;
}
#landing-page .logo-mark { position: relative; display: inline-block; }
#landing-page .logo-mark img {
    height: 420px;
    width: auto;
    max-width: 90vw;
    filter:
        drop-shadow(0 0 32px rgba(255,45,85,0.5))
        drop-shadow(0 0 80px rgba(255,45,85,0.25))
        drop-shadow(0 6px 18px rgba(0,0,0,0.85));
    animation: logoGlow 4s ease-in-out infinite;
}
@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 0 32px rgba(255,45,85,0.5))  drop-shadow(0 0 80px rgba(255,45,85,0.25)) drop-shadow(0 6px 18px rgba(0,0,0,0.85)); }
    50%      { filter: drop-shadow(0 0 44px rgba(255,45,85,0.75)) drop-shadow(0 0 120px rgba(255,45,85,0.4)) drop-shadow(0 6px 18px rgba(0,0,0,0.85)); }
}
#landing-page .tagline {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    max-width: 460px;
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    animation: contentReveal 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) 0.9s both;
}
@keyframes contentReveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Primary CTA — JOIN THE BROADCAST */
#landing-page .primary-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    background: linear-gradient(180deg, #ffd700 0%, #d4a300 100%);
    color: #0a0606;
    border: 0;
    padding: 0 56px;
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 6px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.4),
        inset 0 -3px 0 rgba(0,0,0,0.3),
        0 0 40px rgba(255,215,0,0.5),
        0 0 90px rgba(255,215,0,0.2),
        0 6px 0 rgba(0,0,0,0.5);
    transition: transform 0.12s, box-shadow 0.2s;
    overflow: hidden;
    animation: contentReveal 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) 1.2s both,
               ctaPulse 3.5s ease-in-out 2.8s infinite;
    -webkit-tap-highlight-color: transparent;
}
#landing-page .primary-cta::after {
    content: '';
    position: absolute;
    top: -50%; left: -60%;
    width: 40%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    animation: shimmer 3.5s linear infinite;
    pointer-events: none;
}
@keyframes shimmer {
    0%   { left: -60%; }
    60%  { left: 130%; }
    100% { left: 130%; }
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -3px 0 rgba(0,0,0,0.3), 0 0 40px rgba(255,215,0,0.5), 0 0 90px rgba(255,215,0,0.2), 0 6px 0 rgba(0,0,0,0.5); }
    50%      { box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(0,0,0,0.3), 0 0 60px rgba(255,215,0,0.75), 0 0 130px rgba(255,215,0,0.4), 0 6px 0 rgba(0,0,0,0.5); }
}
#landing-page .primary-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.5),
        inset 0 -3px 0 rgba(0,0,0,0.3),
        0 0 70px rgba(255,215,0,0.85),
        0 0 150px rgba(255,215,0,0.5),
        0 8px 0 rgba(0,0,0,0.5);
}
#landing-page .primary-cta:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        inset 0 -1px 0 rgba(255,255,255,0.2),
        0 0 30px rgba(255,215,0,0.4),
        0 1px 0 rgba(0,0,0,0.5);
}
#landing-page .cta-arrow {
    display: inline-block;
    margin-left: 12px;
    font-family: 'VT323', monospace;
    font-size: 32px;
    vertical-align: middle;
    animation: arrowNudge 1.2s ease-in-out infinite;
}
@keyframes arrowNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}
#landing-page .cta-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 3px;
    color: #ffb347;
    text-transform: uppercase;
    margin-top: -4px;
    text-shadow: 0 0 8px rgba(0,0,0,0.7);
    animation: contentReveal 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) 1.5s both;
}
#landing-page .cta-sub .sub-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #5dff8a;
    box-shadow: 0 0 6px #5dff8a;
    margin-right: 6px;
    vertical-align: middle;
    animation: landingBlink 1s step-end infinite;
}

/* Identity row — secondary CONNECT WALLET / USE PASSKEY buttons */
#landing-page .identity-row {
    display: flex;
    gap: 12px;
    align-items: center;
    animation: contentReveal 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) 1.7s both;
}
#landing-page .id-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid #8a6f4a;
    color: #ffb347;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
#landing-page .id-btn:hover {
    border-color: #ffb347;
    background: rgba(255,179,71,0.08);
    color: #f0e3c8;
    text-shadow: 0 0 8px rgba(255,179,71,0.4);
}
#landing-page .id-btn .id-icon {
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1;
}
/* Optional kicker prefix on a 2-token label (e.g. "NO WALLET? SIGN IN WITH COINBASE").
   Smaller + dimmer so the question reads as supporting context, not as
   loud as the action verb. Keeps the longer label from feeling shouty. */
#landing-page .id-btn .id-kicker {
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(240,227,200,0.55);
    margin-right: 8px;
    padding-right: 8px;
    border-right: 1px solid rgba(138,111,74,0.5);
}
#landing-page #landing-passkey-btn { letter-spacing: 2px; }

/* ----- FOOTER chip bar ----- */
#landing-page .footer {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(10,6,6,0.85) 0%, rgba(10,6,6,0.2) 100%);
    border-top: 1px solid rgba(255,179,71,0.15);
    flex-wrap: wrap;
}
#landing-page .footer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid #8a6f4a;
    background: rgba(10,6,6,0.6);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: #ffb347;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}
#landing-page .footer-chip:hover {
    border-color: #ffb347;
    background: rgba(255,179,71,0.08);
    color: #f0e3c8;
}
#landing-page .footer-chip svg { width: 12px; height: 12px; flex-shrink: 0; fill: currentColor; }
#landing-page .footer-chip.season {
    border-color: rgba(255,45,85,0.4);
    color: #ff2d55;
}
#landing-page .footer-chip.season .season-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #ff2d55;
    box-shadow: 0 0 4px #ff2d55;
}
#landing-page .footer-chip.footer-legal {
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.55);
    font-size: 9px;
    letter-spacing: 2px;
}
#landing-page .footer-chip.footer-legal:hover {
    border-color: rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.04);
}

/* Mobile */
@media (max-width: 600px) {
    #landing-page .status-bar { padding: 8px 12px; gap: 8px; font-size: 10px; }
    #landing-page .clock { font-size: 14px; }
    #landing-page .programme { font-size: 9px; gap: 6px; }
    #landing-page .programme .sep { display: none; }
    #landing-page .on-air { font-size: 11px; padding: 3px 7px; letter-spacing: 2px; }

    #landing-page .center { gap: 14px; padding: 20px 14px; }
    #landing-page .logo-mark img { height: 240px; }
    /* Mobile hero is portrait-oriented (~9:20). Phones are typically
       9:17–9:19.5, so the image is slightly TOO TALL for the viewport
       and cover crops top+bottom. Anchor at 25% so the dragon's head
       (and its glowing red eye — the strongest visual element) lands
       below the programme strip instead of getting cropped above it.
       Trades some of the warrior's silhouette at the bottom, which is
       already mostly obscured by the CTA stack anyway. */
    #landing-page .hero-media img.hero-fallback { object-position: center 25%; }
    #landing-page .tagline { font-size: 14px; max-width: 320px; }
    #landing-page .primary-cta { font-size: 22px; padding: 0 36px; letter-spacing: 4px; min-height: 60px; }
    #landing-page .cta-arrow { font-size: 26px; }
    #landing-page .cta-sub { font-size: 10px; letter-spacing: 2px; }
    #landing-page .identity-row { flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
    #landing-page .id-btn { width: 100%; justify-content: center; padding: 10px 14px; font-size: 13px; }
    #landing-page .footer { padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
    #landing-page .footer-chip { font-size: 9px; padding: 4px 8px; letter-spacing: 1.5px; }

    #landing-page .bracket { width: 18px; height: 18px; }
}

@media (max-height: 700px) and (min-width: 600px) {
    /* Short laptop screens — compress vertical rhythm */
    #landing-page .center { gap: 12px; padding: 14px; }
    #landing-page .logo-mark img { height: 320px; }
    #landing-page .primary-cta { padding: 0 44px; font-size: 24px; min-height: 68px; }
}

/* Skip landing in Arena iframe */
.arena-mode #landing-page { display: none !important; }

/* ============================================================================
   CSS VARIABLES — THE BROADCAST BRAND
   ============================================================================ */
:root {
    /* Backgrounds — warm black with blood undertone + rift-pulse texture */
    --bg: #0c0a0a;
    --bg-surface: #161212;
    --bg-card: #1e1818;
    --bg-elevated: #2a2222;
    --rift-pulse: radial-gradient(ellipse at 30% 50%, rgba(255,45,85,0.04) 0%, transparent 65%);

    /* Primary — Hot crimson (stakes, branding, highlights) */
    --gold: #ff2d55;
    --gold-dim: #cc1a3e;
    --gold-glow: rgba(255, 45, 85, 0.15);

    /* Secondary — Pale silver-white (info, zones, UI) */
    --blue: #c8c8d0;
    --blue-glow: rgba(200, 200, 208, 0.1);

    /* Action types — saturated neons on dark */
    --strike: #ff4757;
    --strike-glow: rgba(255, 71, 87, 0.2);
    --guard: #3b82f6;
    --guard-glow: rgba(59, 130, 246, 0.2);
    --bluff: #a855f7;
    --bluff-glow: rgba(168, 85, 247, 0.2);

    /* Text */
    --text: #f0eded;
    --text-dim: #948c8c;
    --text-dark: #3d3535;

    /* Semantic */
    --danger: #ff4757;
    --success: #10b981;

    /* Accent gold (achievements, ranks, currency display) */
    --accent-gold: #ffd700;
    --accent-gold-glow: rgba(255, 215, 0, 0.15);

    /* Rarity palette — global so cards, shop, locker, stable stay in sync */
    --rarity-common:    #8a8a8a;
    --rarity-uncommon:  #22c55e;
    --rarity-rare:      #3b82f6;
    --rarity-epic:      #a855f7;
    --rarity-legendary: #ffd700;
    --rarity-ultra:     #ff2d55;

    /* Chase/disengage */
    --chase: #ff9500;

    /* Typography */
    --font-display: 'Bebas Neue', 'Impact', sans-serif;
    --font-host: 'Playfair Display', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-body: 'Rajdhani', sans-serif;
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Focus styles for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

/* ============================================================================
   APP SHELL
   ============================================================================ */
#app {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(255, 45, 85, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 0%, rgba(255, 45, 85, 0.03) 0%, transparent 40%);
}

.screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
    /* Desktop: use full width, max 1400px for ultrawide */
    max-width: 1400px;
    margin: 0 auto;
    left: 0; right: 0;
    border-left: 1px solid rgba(255,255,255,0.03);
    border-right: 1px solid rgba(255,255,255,0.03);
    padding-bottom: 80px;
}
@media (max-width: 600px) {
    .screen { border-left: none; border-right: none; }
}
.screen.active { display: flex; opacity: 1; animation: screenFadeIn 0.3s ease forwards; }
@keyframes screenFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar */
.screen::-webkit-scrollbar { width: 4px; }
.screen::-webkit-scrollbar-track { background: transparent; }
.screen::-webkit-scrollbar-thumb { background: var(--text-dark); border-radius: 2px; }

/* ============================================================================
   SHARED COMPONENTS
   ============================================================================ */

/* Top Bar */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255,45,85,0.08) 0%, rgba(12,10,10,0.95) 100%);
    border-bottom: 1px solid rgba(255,45,85,0.15);
    flex-shrink: 0;
    min-height: 44px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.top-bar .logo {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255,45,85,0.3);
}
.top-bar .info {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
}
.top-bar .wager {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold);
    font-weight: 700;
}

/* HP Bar */
.hp-bar-container {
    width: 100%;
    height: 14px;
    background: rgba(255,255,255,0.08);
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.06);
}
.hp-bar {
    height: 100%;
    border-radius: 7px;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    box-shadow: 0 0 8px rgba(255,45,85,0.3);
}
.hp-bar.p1 { background: linear-gradient(90deg, var(--gold), #ff6b8a); }
.hp-bar.p2 { background: linear-gradient(90deg, var(--strike), #ff6b6b); }
.hp-bar.low { background: linear-gradient(90deg, var(--danger), #ff6b6b); animation: hp-pulse 1s infinite; }
.f-hp-num {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}
.f-hp-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-dark);
    text-transform: uppercase;
    margin-bottom: 1px;
}

@keyframes hp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Host Commentary */
/* Round History — compact dots */
.round-history {
    display: flex;
    gap: 5px;
    padding: 4px 14px;
    justify-content: center;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.round-history::-webkit-scrollbar { display: none; }
.round-history:empty { display: none; }
.arena-banner {
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    animation: arenaBannerIn 0.5s ease-out;
}
@keyframes arenaBannerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rh-entry {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.rh-entry.win { border-color: rgba(16,185,129,0.5); color: var(--success); background: rgba(16,185,129,0.1); }
.rh-entry.lose { border-color: rgba(255,71,87,0.5); color: var(--strike); background: rgba(255,71,87,0.1); }
.rh-entry.draw { border-color: rgba(255,255,255,0.2); color: var(--text-dim); }
.rh-round { display: none; }
.rh-you { display: none; }
.rh-opp { display: none; }
.rh-result { font-size: 10px; font-weight: 700; }
.rh-result.win { color: var(--success); }
.rh-result.lose { color: var(--strike); }
.rh-result.draw { color: var(--text-dim); }
#fight-screen > .host-bar {
    margin-top: auto;
    padding: 6px 14px;
    max-height: 52px;
    overflow: hidden;
}
.host-bar {
    padding: 10px 14px 10px 18px;
    background: linear-gradient(90deg, rgba(255,45,85,0.08) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.75) 100%);
    border-top: 1px solid rgba(255,45,85,0.2);
    border-left: 3px solid var(--gold);
    flex-shrink: 0;
    animation: hostTick 0.5s ease-out;
}
@keyframes hostTick {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}
.host-text {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 13px;
    color: rgba(255,255,255,0.92);
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.host-text .host-name {
    color: var(--gold);
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
}

/* Buttons */
.btn {
    font-family: var(--font-display);
    letter-spacing: 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.btn:active { transform: scale(0.96); }
.btn-gold {
    background: linear-gradient(180deg, var(--gold), var(--gold-dim));
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(255,45,85,0.3);
    position: relative;
    overflow: hidden;
}

/* ---- Shared utilities: disabled buttons + loading skeletons ---- */
.btn-disabled,
button[disabled].btn-gold,
button[disabled].btn-secondary,
.btn-gold:disabled,
button.is-disabled {
    opacity: 0.5 !important;
    background: rgba(60,55,55,0.4) !important;
    color: var(--text-dim, #7a7272) !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
.btn-disabled::after,
.btn-gold:disabled::after { display: none !important; }

.skeleton {
    position: relative;
    background: linear-gradient(90deg, rgba(30,26,26,0.6) 0%, rgba(45,40,40,0.9) 50%, rgba(30,26,26,0.6) 100%);
    background-size: 1200px 100%;
    animation: skeletonShimmer 1.6s linear infinite;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    color: transparent;
    user-select: none;
}
.skeleton.skeleton-text { height: 12px; width: 80%; }
.skeleton.skeleton-card { height: 180px; width: 100%; }
.skeleton.skeleton-portrait { aspect-ratio: 3/4; width: 100%; }
@keyframes skeletonShimmer {
    0% { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.btn-gold::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.btn-gold:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.btn-gold:disabled::after { display: none; }
.btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text);
    padding: 10px 20px;
    font-size: 14px;
}
.btn-danger {
    background: linear-gradient(180deg, var(--danger), #cc2020);
    color: white;
    padding: 12px 24px;
    font-size: 14px;
}
.btn-raise {
    background: linear-gradient(180deg, var(--gold), var(--gold-dim));
    color: var(--bg);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    animation: raise-pulse 2s infinite;
    box-shadow: 0 2px 15px rgba(255,45,85,0.3);
}
@keyframes raise-pulse {
    0%, 100% { box-shadow: 0 2px 15px rgba(255,45,85,0.3); }
    50% { box-shadow: 0 2px 25px rgba(255,45,85,0.6); }
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
}
.badge-poison { background: rgba(0,255,136,0.15); color: #10b981; }
.badge-chill { background: rgba(68,136,255,0.15); color: var(--guard); }
.badge-powered { background: rgba(255,45,85,0.15); color: var(--gold); }

/* Card type colors */
.type-strike { --card-color: var(--strike); --card-glow: var(--strike-glow); }
.type-guard { --card-color: var(--guard); --card-glow: var(--guard-glow); }
.type-bluff { --card-color: var(--bluff); --card-glow: var(--bluff-glow); }

/* ============================================================================
   SCREEN 1: PRE-FIGHT
   ============================================================================ */
#pre-fight {
    align-items: center;
    /* `justify-content: center` clips the bottom (START FIGHT button) on
       screens shorter than the content — flex centering blocks scroll-to-
       overflow. Stack from top so the screen scrolls naturally; visual
       centering when content fits is fine to lose. */
    justify-content: flex-start;
    padding: 20px 20px 80px;
    text-align: center;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(168,85,247,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 40%, rgba(255,45,85,0.06) 0%, transparent 50%),
        var(--bg);
}
.prefight-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 5vw, 36px);
    letter-spacing: 6px;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(255,45,85,0.4);
    margin-bottom: 4px;
}
.prefight-subtitle {
    font-family: var(--font-display);
    font-size: clamp(12px, 3vw, 18px);
    letter-spacing: 4px;
    color: var(--text-dim);
    margin-bottom: 20px;
}
.vs-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.fighter-card-pre {
    text-align: center;
    width: 240px;
    min-width: 0;
}
.fighter-portrait {
    width: 264px;
    height: 360px;
    border-radius: 12px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    position: relative;
    overflow: hidden;
}
.fighter-portrait.p1-portrait {
    background: linear-gradient(135deg, var(--bg-card), rgba(255,45,85,0.15));
    border: 2px solid rgba(255,45,85,0.4);
    box-shadow: 0 0 30px rgba(255,45,85,0.2), 0 8px 32px rgba(0,0,0,0.5);
    animation: portraitEntrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fighter-portrait.p2-portrait {
    background: linear-gradient(135deg, var(--bg-card), rgba(255,59,59,0.15));
    border: 2px solid rgba(255,59,59,0.4);
    box-shadow: 0 0 30px rgba(255,59,59,0.2), 0 8px 32px rgba(0,0,0,0.5);
    animation: portraitEntrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
@keyframes portraitEntrance {
    from { opacity: 0; transform: scale(0.85) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.fighter-name {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--text);
}
.fighter-meta {
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--font-mono);
}
.vs-text {
    font-family: var(--font-display);
    font-size: clamp(28px, 7vw, 48px);
    color: var(--gold);
    text-shadow: 0 0 40px rgba(255,45,85,0.6), 0 0 80px rgba(255,45,85,0.2);
    letter-spacing: 6px;
    animation: vsPulse 2s ease-in-out infinite;
}
@keyframes vsPulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 40px rgba(255,45,85,0.6); }
    50% { transform: scale(1.1); text-shadow: 0 0 60px rgba(255,45,85,0.8), 0 0 100px rgba(255,45,85,0.3); }
}
.arena-info {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--blue);
    margin-bottom: 12px;
    padding: 6px 12px;
    background: var(--blue-glow);
    border: 1px solid rgba(200,200,208,0.15);
    border-radius: 4px;
    display: inline-block;
}
.wager-info {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 16px;
}
.host-intro {
    max-width: 400px;
    margin: 0 auto 20px;
    padding: 12px 16px;
    background: rgba(255,45,85,0.04);
    border-left: 3px solid var(--gold);
    border-radius: 0 4px 4px 0;
    text-align: left;
}

/* ============================================================================
   SCREEN 2: FIGHT (Main Gameplay)
   ============================================================================ */
#fight-screen {
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow-y: hidden;
    background: url('../assets/arena/kingzli__24_Default_Arena__dark_gladiatorial_arena_interior_f_5f7f858b-36c9-469e-a6d5-ed812f1bb381_2.png') center 60%/cover no-repeat;
    background-color: var(--bg);
}
#fight-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, 0.75);
    z-index: 0;
}
#fight-screen > * {
    position: relative;
    z-index: 1;
}

/* Fight Layout — fighters flank the card area on desktop */
.fight-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-height: 0;
}
.fight-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    min-height: 0;
}
/* Desktop: fighters flank the cards */
@media (min-width: 800px) {
    .fight-layout {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 8px 16px;
    }
    .fight-center {
        flex: 0 1 auto;
    }
    .fighter-panel-left,
    .fighter-panel-right {
        flex-shrink: 0;
    }
}
/* Mobile: fighters as compact row above cards */
@media (max-width: 799px) {
    .fight-layout {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .fight-layout > .fighter-panel-left,
    .fight-layout > .fighter-panel-right {
        order: -1;
    }
    .fight-center {
        order: 0;
        width: 100%;
    }
}
.fighter-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-radius: 10px;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.04);
}
.fighter-panel .portrait-small {
    width: 100px;
    height: 135px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* Fighter portrait reactions */
.fighter-panel.winner .portrait-small {
    box-shadow: 0 0 20px rgba(255,45,85,0.6), 0 0 40px rgba(255,45,85,0.3);
    border: 2px solid var(--gold);
}
.fighter-panel.winner {
    background: rgba(255,45,85,0.08);
}
@keyframes portrait-winner-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.fighter-panel.winner .portrait-small {
    animation: portrait-winner-pulse 0.8s ease-in-out 2;
}

.fighter-panel.loser .portrait-small {
    filter: brightness(0.4) saturate(0.3);
    animation: portrait-hit 0.3s ease-out;
}
.fighter-panel.loser {
    background: rgba(255,71,87,0.05);
}
@keyframes portrait-hit {
    0% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* HP bar damage flash */
.hp-bar.flash-damage {
    animation: hp-flash 0.4s ease-out;
}
@keyframes hp-flash {
    0% { filter: brightness(3); }
    30% { filter: brightness(2); }
    100% { filter: brightness(1); }
}

/* HP number tick animation */
.hp-ticking {
    animation: hp-tick-color 0.6s ease-out;
}
@keyframes hp-tick-color {
    0% { color: white; transform: scale(1.4); }
    50% { color: var(--danger); transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* KO Cinematic Overlay */
.ko-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ko-overlay.active { display: flex; }

.ko-bg {
    position: absolute;
    inset: 0;
    background: #0c0a0a;
    animation: ko-bg-fade 2.5s ease-out forwards;
}
@keyframes ko-bg-fade {
    0% { opacity: 0; }
    15% { opacity: 1; }
    100% { opacity: 1; }
}

.ko-flash {
    position: absolute;
    inset: 0;
    background: white;
    animation: ko-white-flash 0.4s ease-out forwards;
}
@keyframes ko-white-flash {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

.ko-card-art {
    width: 240px;
    height: 320px;
    object-fit: cover;
    border-radius: 14px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 80px rgba(255,45,85,0.6), 0 0 160px rgba(255,45,85,0.2), 0 20px 60px rgba(0,0,0,0.8);
    position: relative;
    z-index: 2;
    animation: ko-card-zoom 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes ko-card-zoom {
    0% { transform: scale(0.3) rotate(-5deg); opacity: 0; filter: blur(10px); }
    60% { transform: scale(1.05) rotate(1deg); opacity: 1; filter: blur(0); }
    100% { transform: scale(1) rotate(0deg); }
}

.ko-text {
    font-family: var(--font-display);
    font-size: clamp(48px, 12vw, 80px);
    letter-spacing: 12px;
    color: var(--gold);
    position: relative;
    z-index: 3;
    margin-top: 20px;
    animation: ko-text-slam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}
@keyframes ko-text-slam {
    0% { transform: scale(4); opacity: 0; }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.ko-subtitle {
    font-family: var(--font-display);
    font-size: clamp(18px, 4vw, 26px);
    color: var(--gold);
    letter-spacing: 6px;
    text-shadow: 0 0 18px rgba(255,45,85,0.55), 0 2px 4px rgba(0,0,0,0.9);
    position: relative;
    z-index: 3;
    margin-top: 10px;
    text-transform: uppercase;
    animation: ko-fade-in 0.5s ease-out 1.2s both;
}
.ko-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
    animation: ko-fade-in 0.6s ease-out 0.2s both;
    z-index: 1;
}
@keyframes ko-fade-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Boss KO — bigger, more dramatic */
.ko-overlay.boss-ko .ko-card-art {
    width: 280px;
    height: 380px;
    border-color: #ffd700;
    box-shadow: 0 0 100px rgba(255,215,0,0.6), 0 0 200px rgba(255,215,0,0.2), 0 20px 60px rgba(0,0,0,0.8);
}
.ko-overlay.boss-ko .ko-text {
    font-size: clamp(40px, 10vw, 68px);
    color: #ffd700;
    text-shadow: 0 0 40px rgba(255,215,0,0.6), 0 0 80px rgba(255,215,0,0.2);
}
.ko-overlay.boss-ko .ko-subtitle {
    font-size: 16px;
    color: rgba(255,215,0,0.7);
    letter-spacing: 5px;
}
@keyframes bossKOShake {
    0%, 100% { transform: translate(0); }
    10% { transform: translate(-6px, 3px); }
    20% { transform: translate(5px, -4px); }
    30% { transform: translate(-4px, 5px); }
    40% { transform: translate(6px, -2px); }
    50% { transform: translate(-3px, 4px); }
    60% { transform: translate(4px, -3px); }
    70% { transform: translate(-5px, 2px); }
    80% { transform: translate(3px, -4px); }
    90% { transform: translate(-2px, 3px); }
}
body.boss-ko-shake { animation: bossKOShake 0.6s ease-out; }

.ko-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(255,45,85,0.15) 70%, rgba(12,10,10,0.9) 100%);
    z-index: 1;
    animation: ko-vignette-pulse 2s ease-in-out infinite 1s;
}
@keyframes ko-vignette-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.fighter-panel .f-name {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
}
.fighter-panel .f-passive {
    /* In-fight passive readout. Accent vars set inline per-archetype via JS. */
    --passive-accent: #c9a961;
    --passive-accent-bg: rgba(201,169,97,0.10);
    display: none;
    align-items: center;
    gap: 5px;
    margin: 3px 0 6px;
    padding: 3px 7px 3px 6px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--passive-accent);
    background: var(--passive-accent-bg);
    border-left: 2px solid var(--passive-accent);
    border-radius: 0 3px 3px 0;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fighter-panel .f-passive.active {
    display: inline-flex;
    /* Override the chip's overflow:hidden so the [data-tooltip] pseudo can
       escape upward. Names fit without ellipsis (Bladework / Resonance /
       Six-Shooter / Rift Walker are all short enough). */
    overflow: visible;
}

/* Reusable hover tooltip — applied via [data-tooltip="..."] on any element.
   Currently used on the passive chip + status badges to explain mechanics
   that would otherwise require players to remember the glossary. Defined
   globally so future surfaces can opt in with one attribute. */
[data-tooltip] {
    position: relative;
    cursor: help;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 7px 10px;
    background: rgba(14, 12, 12, 0.97);
    border: 1px solid rgba(255, 209, 102, 0.45);
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.4px;
    text-transform: none;
    line-height: 1.4;
    color: #f0eded;
    white-space: normal;
    text-align: center;
    width: max-content;
    max-width: 220px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,209,102,0.08);
}
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(255, 209, 102, 0.45);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease;
    z-index: 1001;
}
@media (hover: hover) {
    [data-tooltip]:hover::after,
    [data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    [data-tooltip]:hover::before,
    [data-tooltip]:focus-visible::before { opacity: 1; }
}
/* Touch fallback — tap-and-hold via :active. iOS lacks hover but :active
   fires on long-press. Keyboard users get focus-visible above. */
@media (hover: none) {
    [data-tooltip]:active::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    [data-tooltip]:active::before { opacity: 1; }
}
/* Click-toggle tooltip (works on touch + keyboard). shared.ts adds the
   .tooltip-open class on tap; clicking elsewhere clears it. Keeps the
   tooltip visible until the user taps away — no press-and-hold needed. */
[data-tooltip].tooltip-open::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-tooltip].tooltip-open::before { opacity: 1; }
.fighter-panel .f-passive-name {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.8px;
    color: var(--text);
}
.fighter-panel .f-hp {
    font-family: var(--font-mono);
    font-size: 10px;
    width: 100%;
}
.fighter-panel .f-hp-num {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}
.fighter-panel .f-hand-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
}
.fighter-panel .f-action-tally {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    opacity: 0.7;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1px 0;
    min-height: 0;
}
.f-action-tally .tally-item { white-space: nowrap; }
.f-action-tally .tally-strike { color: var(--strike); }
.f-action-tally .tally-guard { color: var(--guard); }
.f-action-tally .tally-bluff { color: var(--bluff); }
.f-action-tally .tally-disengage { color: var(--text-dim); }
.f-action-tally .tally-chase { color: var(--gold); }
.fighter-panel .status-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 16px;
}

/* Stance Selection */
/* Stance Area — compact toggle */
.stance-area {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    flex-shrink: 0;
    justify-content: center;
}
.stance-btn {
    flex: 1;
    max-width: 160px;
    padding: 10px 10px 8px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 3px;
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.stance-label { display: block; }
.stance-hint {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.5;
    text-transform: uppercase;
}
.stance-btn.selected-engage {
    border-color: var(--strike);
    background: var(--strike-glow);
    color: var(--strike);
    box-shadow: 0 0 20px rgba(255,59,59,0.2);
    transform: scale(1.03);
}
.stance-btn.selected-disengage {
    border-color: var(--guard);
    background: var(--guard-glow);
    color: var(--guard);
    box-shadow: 0 0 20px rgba(68,136,255,0.2);
    transform: scale(1.03);
}
.stance-btn.selected-chase {
    border-color: #ff9500;
    background: rgba(255,149,0,0.1);
    color: #ff9500;
    box-shadow: 0 0 20px rgba(255,149,0,0.25);
    transform: scale(1.03);
}
.stance-btn.chase-opportunity {
    border-color: rgba(255,149,0,0.3);
}
.stance-btn.chase-opportunity .stance-hint {
    color: #ff9500;
    opacity: 0.8;
}
.res-stance-card.chase {
    background: rgba(255,149,0,0.1);
    border: 2px solid #ff9500;
    color: #ff9500;
}

/* Hand — the hero of the fight screen. Fixed dock at the bottom of
   fight-center so cards never push portraits off-screen. */
.hand-area {
    display: flex;
    gap: 10px;
    padding: 20px 16px 12px;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    overflow-x: visible;
    overflow-y: visible;
    min-height: 200px;
    flex-shrink: 0;
    perspective: 1200px;
    position: relative; /* anchor for .hand-peek */
}
/* Fanning: when the hand is crowded, cards overlap. Focus fans them out. */
.hand-area[data-handsize="5"] .card { margin-left: -14px; }
.hand-area[data-handsize="5"] .card:first-child { margin-left: 0; }
.hand-area[data-handsize="6"] .card { margin-left: -28px; }
.hand-area[data-handsize="6"] .card:first-child { margin-left: 0; }
.hand-area[data-handsize="7"] .card,
.hand-area[data-handsize="8"] .card { margin-left: -40px; }
.hand-area[data-handsize="7"] .card:first-child,
.hand-area[data-handsize="8"] .card:first-child { margin-left: 0; }
/* Hover/select lifts the focused card and fans siblings outward. */
.hand-area .card:hover {
    transform: translateY(-14px) scale(1.06);
    z-index: 40;
    box-shadow:
        0 0 0 1.5px rgba(255,255,255,0.25),
        0 18px 32px rgba(0,0,0,0.6);
}
.hand-area .card:hover ~ .card { transform: translateX(18px); }
/* Keep the selected card's lift dominant even when hovering a sibling */
.hand-area .card.selected:hover {
    transform: translateY(-22px) scale(1.1);
}
.hand-area:empty::after {
    content: 'NO CARDS — DISENGAGE TO HEAL';
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-dark);
}
/* Trading-card poster: art bleeds to every edge, info rides a gradient scrim.
   Outer .card keeps overflow: visible so tooltips/floating labels can escape.
   Inner .card-inner clips the art to rounded corners. */
.card {
    width: 94px;
    min-width: 94px;
    height: 180px;
    max-height: 180px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                margin 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: visible;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5));
    isolation: isolate;
}
/* Inner layer — clips art, renders the card frame and scrim */
.card .card-inner {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: var(--bg-card);
    border: 1.5px solid var(--card-color, rgba(255,255,255,0.12));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    z-index: 0;
}
/* Top accent strip — type color bleed */
.card .card-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--card-color, rgba(255,255,255,0.3));
    box-shadow: 0 0 12px var(--card-color, rgba(255,255,255,0.4));
    z-index: 3;
}
.card.selected {
    transform: translateY(-18px) scale(1.08);
    z-index: 50;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(255,45,85,0.55));
}
.card.selected .card-inner {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1.5px rgba(255,45,85,0.4);
}
.card.selected .card-inner::before {
    background: var(--gold);
    box-shadow: 0 0 18px var(--gold);
    height: 3px;
}
.card.disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.5);
}
/* Art: fills the entire card */
.card .card-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}
/* Gradient scrim so text over art stays legible */
.card .card-inner::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 58%;
    background: linear-gradient(
        to top,
        rgba(8,6,6,0.95) 0%,
        rgba(8,6,6,0.85) 30%,
        rgba(8,6,6,0.4) 70%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}
/* Card body — overlaid on lower portion */
.card .card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 6px 7px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    z-index: 2;
}
.card .card-name {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card .card-power {
    font-family: var(--font-display);
    font-size: 44px;
    color: var(--card-color, #fff);
    letter-spacing: 1px;
    text-shadow:
        0 2px 0 rgba(0,0,0,0.95),
        0 0 22px var(--card-color, rgba(0,0,0,0.8)),
        0 4px 14px rgba(0,0,0,0.8);
    line-height: 0.85;
    margin-top: 2px;
}
/* Guard cards (power===99): render a dimmed em-dash instead of "ALL",
   which collided with the "ALL-IN" Strike framing. Preserves slot height
   for layout consistency with damage-bearing cards. */
.card .card-power.card-power-block {
    opacity: 0.55;
    letter-spacing: 0;
}
/* Per-card data container (hidden; fuels the shared peek panel via JS) */
.card .card-effect { display: none; }
/* Shared peek panel — single location above the hand, no edge clipping */
.hand-peek {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 6px);
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    max-width: min(360px, calc(100vw - 24px));
    padding: 10px 14px;
    background: rgba(8,6,6,0.96);
    border: 1px solid var(--peek-color, rgba(255,255,255,0.15));
    border-radius: 8px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.8), 0 0 18px var(--peek-color, transparent);
    color: #e0d8d8;
    text-align: center;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 200;
    white-space: normal;
    backdrop-filter: blur(6px);
}
.hand-peek.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.hand-peek .peek-name {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--peek-color, #fff);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}
.hand-peek .peek-effect {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #d4cccc;
    letter-spacing: 0.3px;
}
/* ------------------------------------------------------------------
   Mobile inspect strip — Phase 1 fight-HUD redesign.
   Replaces the floating .hand-peek on phones with a fixed bar between
   hand and action-bar. Eliminates the tooltip-occludes-stance bug.
   Desktop keeps the existing floating peek (hover-driven, no overlap
   issue). Both elements get the same content writes; CSS picks one.
------------------------------------------------------------------ */
.inspect-strip { display: none; }
@media (max-width: 799px) {
    .hand-peek { display: none !important; }
    .inspect-strip {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 6px 10px 0;
        padding: 7px 10px;
        background: rgba(0, 0, 0, 0.55);
        border-left: 2px solid var(--inspect-color, var(--gold, #ff2d55));
        border-radius: 2px;
        min-height: 32px;
        transition: opacity 0.2s ease, border-color 0.2s ease;
    }
    .inspect-strip.empty { opacity: 0; pointer-events: none; }
    .inspect-strip .inspect-icon {
        flex: 0 0 auto;
        color: var(--inspect-color, var(--gold, #ff2d55));
        font-size: 12px;
        line-height: 1;
        transition: color 0.2s ease;
    }
    .inspect-strip .inspect-name {
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: 1.5px;
        color: var(--text, #f0eded);
        text-transform: uppercase;
        font-weight: 700;
        white-space: nowrap;
    }
    .inspect-strip .inspect-effect {
        font-family: var(--font-mono);
        font-size: 10px;
        line-height: 1.3;
        color: #d4cccc;
        flex: 1 1 auto;
        letter-spacing: 0.2px;
    }
}

/* ------------------------------------------------------------------
   Phase 2: broadcast HUD strip + slim wager bar (mobile only).
   Default state on desktop: new elements hidden. Mobile media query
   below restyles .top-bar into a compact grid and surfaces:
     - LIVE indicator with pulsing red dot
     - Round counter (R 1/8 instead of ROUND 1/8 — JS still writes
       "ROUND 1/8", CSS uppercases and tightens)
     - Arena condition chip (#hud-arena-chip, mirrored from
       #arena-banner content by fight.js)
     - Energy badge
   Wager moves out of the top-bar visually and into the slim
   .wager-mobile-bar below it. Calm gray when 0, lights up gold
   when an actual wager is on the table.
------------------------------------------------------------------ */
.hud-live,
.hud-arena-chip,
.wager-mobile-bar { display: none; }

@media (max-width: 799px) {
    /* The HUD strip — grid layout so order, gaps, and alignment all
       come from CSS without DOM moves. */
    body:not(.arena-mode) #fight-screen .top-bar {
        display: grid;
        grid-template-columns: auto auto 1fr auto auto;
        align-items: center;
        gap: 10px;
        padding: 8px 12px 7px;
        min-height: 40px;
        background: linear-gradient(180deg, rgba(255,45,85,0.06), rgba(12,10,10,0.96));
        border-bottom: 1px solid rgba(255,45,85,0.18);
    }
    /* The .rps-hint-toggle "? RULES" button gets injected at runtime by
       rps-hint.js into .top-bar. Strip the RULES label on mobile and
       shrink to a single ? circle so the HUD grid stays balanced. */
    body:not(.arena-mode) #fight-screen .top-bar .rps-hint-toggle {
        padding: 0;
        width: 26px;
        height: 26px;
        min-width: 0;
        border-radius: 50%;
        font-size: 12px;
        gap: 0;
    }
    body:not(.arena-mode) #fight-screen .top-bar .rps-hint-toggle > span:not(.rps-q) {
        display: none;
    }

    /* --- Stance buttons (Phase 6 polish) --------------------------
       Drop emoji icons (chunky lockup), keep the hint subtext — it
       carries dynamic info like the chase hint that updates per
       opponent. Three equal columns spanning the full row, tight
       padding, single-line label + slim hint underneath. */
    body:not(.arena-mode) #fight-screen .stance-area {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        padding: 8px 12px 6px;
        width: 100%;
    }
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn {
        padding: 8px 4px;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn .stance-icon { display: none; }
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn .stance-label {
        font-family: var(--font-display);
        font-size: 13px;
        letter-spacing: 2px;
        line-height: 1;
    }
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn .stance-hint {
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: 0.4px;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.6);
        opacity: 1;
        text-transform: uppercase;
        text-align: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Selected-stance hint picks up the type-color tint at a stronger
       opacity so it visually belongs to the active button. */
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn.selected-engage .stance-hint,
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn.selected-disengage .stance-hint,
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn.selected-chase .stance-hint {
        color: currentColor;
        opacity: 0.85;
    }
    /* Active stance scan-line — sweeps the top edge of the button.
       Applies to whichever stance is currently selected. */
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn.selected-engage,
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn.selected-disengage,
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn.selected-chase {
        position: relative;
        overflow: hidden;
    }
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn.selected-engage::after,
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn.selected-disengage::after,
    body:not(.arena-mode) #fight-screen .stance-area .stance-btn.selected-chase::after {
        content: "";
        position: absolute;
        top: 0; left: 0;
        height: 1px;
        width: 60%;
        background: currentColor;
        opacity: 0.7;
        animation: stance-scan 2.4s linear infinite;
    }
    @keyframes stance-scan {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(266%); }
    }
    body:not(.arena-mode) #fight-screen .top-bar .logo,
    body:not(.arena-mode) #fight-screen .top-bar .wager-cap {
        display: none;
    }
    /* Hide the loud desktop WAGER text from the top-bar on mobile —
       the slim .wager-mobile-bar carries it instead. */
    body:not(.arena-mode) #fight-screen .top-bar .wager { display: none; }
    body:not(.arena-mode) #fight-screen .top-bar .fight-topbar-right {
        display: contents;
    }
    body:not(.arena-mode) #fight-screen .top-bar .info#round-display {
        font-family: var(--font-display);
        font-size: 14px;
        letter-spacing: 2px;
        color: var(--text);
        line-height: 1;
    }
    body:not(.arena-mode) #fight-screen .top-bar #fight-balance {
        font-family: var(--font-display);
        font-size: 16px;
        letter-spacing: 1px;
        color: var(--energy, #ffd700);
        text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
        padding: 0;
        background: none;
        border: none;
    }
    /* LIVE indicator — pulsing red dot + "LIVE" label */
    body:not(.arena-mode) .hud-live {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-display);
        font-size: 11px;
        letter-spacing: 1.8px;
        color: var(--gold, #ff2d55);
        line-height: 1;
    }
    body:not(.arena-mode) .hud-live::before {
        content: "";
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--gold, #ff2d55);
        box-shadow: 0 0 6px rgba(255, 45, 85, 0.55);
        animation: hud-live-pulse 1.4s ease-in-out infinite;
    }
    @keyframes hud-live-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.35; transform: scale(0.85); }
    }
    /* Arena chip in HUD removed — the existing #arena-banner below the
       wager bar already carries the full "BLOOD PIT — MUTUAL DISENGAGE
       COSTS 1 HP" text. Chip in the HUD was redundant + truncated. */
    body:not(.arena-mode) .hud-arena-chip { display: none; }
    /* Slim wager bar — calm gray when no skin in the game */
    body:not(.arena-mode) .wager-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 5px 12px 6px;
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: 1.8px;
        color: var(--text-faint, #4a4444);
        background: rgba(0, 0, 0, 0.25);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        text-transform: uppercase;
    }
    body:not(.arena-mode) .wager-mobile-bar.has-stake {
        color: var(--energy, #ffd700);
        text-shadow: 0 0 6px rgba(255, 215, 0, 0.35);
        background: rgba(255, 215, 0, 0.04);
        border-bottom-color: rgba(255, 215, 0, 0.15);
    }
    body:not(.arena-mode) .wager-mobile-bar.has-loss-warning {
        color: #ff6a6a;
        text-shadow: 0 0 6px rgba(255, 106, 106, 0.35);
        background: rgba(255, 59, 59, 0.06);
        border-bottom-color: rgba(255, 59, 59, 0.2);
    }
    body:not(.arena-mode) .wager-mobile-bar:empty {
        display: none;
    }
}

/* ------------------------------------------------------------------
   Phase 3: mirrored versus row + HP overhaul (mobile only).
   .fight-layout becomes a CSS grid on narrow viewports:
       [ left ] [ VS ] [ right ]
       [    fight-center (full)    ]
   Both portraits become circular halos (gold for P1, blue for P2)
   with the JJK art object-positioned to the face. HP bars run
   left-to-right for P1 and right-to-left for P2 via scaleX(-1).
   Hand-count surfaces as a chip beside the HP number via
   .f-hp::after { content: '×' attr(data-hand); } — fight.js writes
   the data-hand attribute alongside #f-p1-hand / #f-p2-hand.
   Status badges stay visible; tally / boost / face-down opp-cards
   are mobile clutter and hide.
------------------------------------------------------------------ */
.vs-divider { display: none; }

@media (max-width: 799px) {
    /* Safety net: the desktop fight screen is a fixed-height, non-scrolling
       broadcast frame (overflow-y: hidden + justify-content: space-between).
       On phones, mid-match content that grows the top row — status badges,
       the "READS" tendency bar, longer Buffster commentary — combined with
       iOS Safari's collapsing address bar can push the action bar (LOCK IN)
       below the fold with no way to scroll to it. Let the screen scroll
       vertically and stack from the top so LOCK IN is always reachable. */
    body:not(.arena-mode) #fight-screen {
        overflow-y: auto;
        justify-content: flex-start;
        padding-bottom: 16px;
    }
    body:not(.arena-mode) #fight-screen .fight-layout {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "left   divider right"
            "center center  center";
        align-items: start;
        gap: 4px 6px;
        padding: 12px 12px 6px;
        flex-wrap: initial;
    }
    body:not(.arena-mode) #fight-screen .fight-layout > .fighter-panel-left {
        grid-area: left; order: 0; width: auto;
    }
    body:not(.arena-mode) #fight-screen .fight-layout > .vs-divider { grid-area: divider; order: 0; }
    body:not(.arena-mode) #fight-screen .fight-layout > .fighter-panel-right {
        grid-area: right; order: 0; width: auto;
    }
    body:not(.arena-mode) #fight-screen .fight-layout > .fight-center { grid-area: center; order: 0; width: auto; }

    body:not(.arena-mode) #fight-screen .fighter-panel {
        /* Explicit flex-direction: column to override the legacy
           @media (max-width: 480px) small-phones rule at L4621 which
           sets flex-direction: row. Without this, on iPhones below
           480px the portrait + HP render side-by-side instead of
           stacked, making HP bars look like they cross the portraits. */
        display: flex;
        flex-direction: column;
        padding: 0;
        background: transparent;
        border: none;
        gap: 6px;
        min-width: 0;
        align-items: center;
    }

    /* Circular portrait halo — gold for P1, blue for P2, JJK face anchored top */
    body:not(.arena-mode) #fight-screen .fighter-panel .portrait-small {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        border: 2px solid var(--gold, #ff2d55);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.5),
            0 0 16px rgba(255, 45, 85, 0.35),
            inset 0 0 22px rgba(0, 0, 0, 0.55);
        overflow: hidden;
    }
    body:not(.arena-mode) #fight-screen .fighter-panel-right .portrait-small {
        border-color: var(--guard, #5cb3ff);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.5),
            0 0 16px rgba(92, 179, 255, 0.4),
            inset 0 0 22px rgba(0, 0, 0, 0.55);
    }
    body:not(.arena-mode) #fight-screen .fighter-panel .portrait-small img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 15%;
        filter: contrast(1.05) saturate(1.08);
    }

    body:not(.arena-mode) #fight-screen .fighter-panel .f-name {
        font-family: var(--font-display);
        font-size: 16px;
        letter-spacing: 2px;
        color: var(--text);
        line-height: 1;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body:not(.arena-mode) #fight-screen .fighter-panel .f-title { display: none; }
    body:not(.arena-mode) #fight-screen .fighter-panel .f-passive {
        font-size: 9px;
        letter-spacing: 1.2px;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* HP block: bar + number + hand-count chip in a single horizontal row.
       Mirrored for P2 so the bar fills toward the centerline.
       Width is fixed (not flex-grown) to guarantee bar visibility on
       narrow grid cells — flex 1 1 0 was collapsing the bar to ~5px. */
    body:not(.arena-mode) #fight-screen .fighter-panel .f-hp {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: 140px;
        max-width: 100%;
        flex-wrap: nowrap;
        margin-top: 2px;
    }
    body:not(.arena-mode) #fight-screen .fighter-panel-right .f-hp {
        flex-direction: row-reverse;
    }
    body:not(.arena-mode) #fight-screen .fighter-panel .f-hp-label { display: none; }
    body:not(.arena-mode) #fight-screen .fighter-panel .f-hp-num {
        font-family: var(--font-display);
        font-size: 14px;
        color: var(--text);
        min-width: 22px;
        letter-spacing: 1px;
        line-height: 1;
        margin: 0;
        flex: 0 0 auto;
    }
    body:not(.arena-mode) #fight-screen .fighter-panel .f-hp-num .hp-max { display: none; }
    body:not(.arena-mode) #fight-screen .fighter-panel .hp-bar-container {
        flex: 1 1 auto;
        width: auto;
        min-width: 56px;
        height: 6px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 3px;
        border: none;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
        overflow: hidden;
    }
    body:not(.arena-mode) #fight-screen .fighter-panel .hp-bar {
        height: 6px;
        background: linear-gradient(90deg, #4ade80, #86efac) !important;
        box-shadow: 0 0 6px rgba(74, 222, 128, 0.55);
        border-radius: 3px;
        animation: none;
    }
    body:not(.arena-mode) #fight-screen .fighter-panel .hp-bar.low {
        background: linear-gradient(90deg, #ef4444, #f87171) !important;
        box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
    }
    body:not(.arena-mode) #fight-screen .fighter-panel-right .hp-bar {
        transform: scaleX(-1);
        transform-origin: center;
    }

    /* Hand-count chip via data-hand attr (fight.js mirrors here). Falls
       to the end of the HP row on P1, baseline-flips for P2. */
    body:not(.arena-mode) #fight-screen .fighter-panel .f-hp::after {
        content: '×' attr(data-hand);
        font-family: var(--font-mono);
        font-size: 9px;
        color: var(--text-dim);
        padding: 1px 5px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        letter-spacing: 1px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    body:not(.arena-mode) #fight-screen .fighter-panel .f-hp:not([data-hand])::after { display: none; }

    body:not(.arena-mode) #fight-screen .fighter-panel .f-hand-count,
    body:not(.arena-mode) #fight-screen .fighter-panel .f-action-tally,
    body:not(.arena-mode) #fight-screen .fighter-panel .f-boost,
    body:not(.arena-mode) #fight-screen .fighter-panel .opp-hand { display: none; }

    body:not(.arena-mode) #fight-screen .fighter-panel .status-badges {
        gap: 3px;
        justify-content: center;
        min-height: 0;
    }
    body:not(.arena-mode) #fight-screen .fighter-panel .status-badge {
        font-size: 9px;
        padding: 1px 4px;
    }

    /* VS divider — gold throb between the two portraits. */
    body:not(.arena-mode) #fight-screen .vs-divider {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 0 2px;
        align-self: center;
    }
    body:not(.arena-mode) #fight-screen .vs-divider .vs-label {
        font-family: var(--font-display);
        font-size: 30px;
        letter-spacing: 2px;
        color: var(--gold, #ff2d55);
        text-shadow:
            0 0 10px rgba(255, 45, 85, 0.55),
            0 0 22px rgba(255, 45, 85, 0.35);
        line-height: 1;
        animation: vs-throb 2.6s ease-in-out infinite;
    }
    @keyframes vs-throb {
        0%, 100% {
            text-shadow: 0 0 10px rgba(255, 45, 85, 0.55), 0 0 22px rgba(255, 45, 85, 0.35);
        }
        50% {
            text-shadow: 0 0 14px rgba(255, 45, 85, 0.8), 0 0 30px rgba(255, 45, 85, 0.5);
        }
    }
    body:not(.arena-mode) #fight-screen .vs-divider .vs-spark {
        width: 1px;
        height: 34px;
        background: linear-gradient(180deg, transparent, rgba(255, 45, 85, 0.4), transparent);
    }
}

/* ------------------------------------------------------------------
   Phase 4: Bruce Buffster chyron + floating-button slotting (mobile).
   The existing host-bar already does most of the work — Playfair italic
   narration, gold accent. Polish to a true broadcast lower-third:
     - Top-edge gold rule (broadcast chyron signature)
     - Bebas Neue caps name with "· LIVE COMMENTARY" suffix
     - Bigger circular avatar with gold ring
     - Right-side padding reserves a button cluster zone
   The three pre-existing floating circles (#audio-controls dialogue +
   audio-toggle, plus the .ew-trigger emote wheel FAB) get repositioned
   onto the chyron's right edge instead of floating above narration —
   .ew-trigger overrides require !important because emote-wheel.js
   injects its CSS at runtime after main.css.
------------------------------------------------------------------ */
@media (max-width: 799px) {
    body:not(.arena-mode) #fight-screen .host-bar {
        position: relative;
        padding: 14px 122px 14px 14px;
        background:
            linear-gradient(180deg, transparent, rgba(255, 45, 85, 0.06)),
            linear-gradient(90deg, rgba(255, 45, 85, 0.1), transparent 40%);
        border-top: 1px solid rgba(255, 45, 85, 0.28);
        border-left: none;
        min-height: 60px;
        overflow: visible;
    }
    body:not(.arena-mode) #fight-screen .host-bar::before {
        content: "";
        position: absolute;
        top: -1px; left: 0;
        width: 38%;
        height: 2px;
        background: linear-gradient(90deg, var(--gold, #ff2d55), transparent);
        pointer-events: none;
    }
    body:not(.arena-mode) #fight-screen .host-bar .buffster-avatar {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 2px solid var(--gold, #ff2d55);
        box-shadow: 0 0 10px rgba(255, 45, 85, 0.3);
        object-fit: cover;
    }
    body:not(.arena-mode) #fight-screen .host-bar .host-text {
        font-family: var(--font-host);
        font-style: italic;
        font-size: 12.5px;
        line-height: 1.3;
        color: rgba(255, 255, 255, 0.92);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    }
    body:not(.arena-mode) #fight-screen .host-bar .host-name {
        font-family: var(--font-display);
        font-size: 11px;
        letter-spacing: 2.5px;
        color: var(--gold, #ff2d55);
        font-weight: 400;
        margin-bottom: 3px;
        display: block;
        font-style: normal;
        line-height: 1.4;
    }
    body:not(.arena-mode) #fight-screen .host-bar .host-name::after {
        content: ' · LIVE COMMENTARY';
        font-family: var(--font-mono);
        font-size: 8px;
        letter-spacing: 1.5px;
        color: rgba(255, 255, 255, 0.32);
        font-weight: 400;
    }

    /* Slot the floating button cluster onto the chyron's right edge.
       audio-controls is fixed-positioned on body; we just push it down
       so it lands inside the chyron's reserved padding zone, not above
       it. iPhone Safari's bottom safe-area is honored by env(). */
    body:not(.arena-mode) #audio-controls {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        gap: 5px;
        z-index: 60;
    }
    body:not(.arena-mode) #audio-controls button {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    /* Emote-wheel trigger — emote-wheel.js injects its own runtime CSS
       so we need higher specificity + !important to override the
       FAB position values. Sits left of the audio-controls cluster
       and lines up vertically with them along the chyron edge. */
    body:not(.arena-mode) .ew-trigger {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        right: 88px !important;
        width: 34px !important;
        height: 34px !important;
    }
    body:not(.arena-mode) .ew-trigger > svg {
        width: 16px;
        height: 16px;
    }
}

/* ------------------------------------------------------------------
   Phase 5: card polish (mobile only).
   Three moves:
   1. Hand becomes a horizontal scroll-snap rail on phones — fanning
      negative margins are zeroed out, edge mask fades the left/right
      6% so cropped cards read as "swipe for more" instead of clipped.
   2. Selected card gets a pulsing gold halo via filter animation —
      strictly enhances the existing .card.selected drop-shadow so
      hover/selected-hover state transitions remain intact.
   3. When any card is selected, siblings dim to 45% opacity and
      desaturate slightly so the player's pick visually owns the row.
      Uses :has() — graceful fallback on browsers without support
      (cards just stay full-bright; selected halo still works).
------------------------------------------------------------------ */
@media (max-width: 799px) {
    /* Hand-area on phones: horizontal scroll-snap rail with edge mask
       fades so cropped cards read as "swipe for more". Both axes get
       overflow:auto due to CSS spec (when overflow-x is auto, y becomes
       auto too). Reserve top padding so the selected card lift never
       hits the vertical scrollbar — see card.selected override below. */
    body:not(.arena-mode) #fight-screen .hand-area {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 0 28px;
        padding: 28px 28px 12px;
        gap: 8px;
        justify-content: flex-start;
        min-height: 200px;
        mask-image: linear-gradient(
            90deg,
            transparent 0,
            black 7%,
            black 93%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0,
            black 7%,
            black 93%,
            transparent 100%
        );
    }
    body:not(.arena-mode) #fight-screen .hand-area::-webkit-scrollbar { display: none; }

    /* Scroll handles overflow — kill fanning negative margins. */
    body:not(.arena-mode) #fight-screen .hand-area[data-handsize] .card,
    body:not(.arena-mode) #fight-screen .hand-area[data-handsize] .card:first-child {
        margin-left: 0;
    }
    body:not(.arena-mode) #fight-screen .hand-area .card {
        flex: 0 0 auto;
        scroll-snap-align: center;
    }
    /* Hover sibling-fan transforms are desktop affordances that fight
       scroll-snap on touch — neutralize. */
    body:not(.arena-mode) #fight-screen .hand-area .card:hover ~ .card {
        transform: none;
    }

    /* Dim non-selected siblings when one card is selected. :has() works
       on Safari 15.4+ / Chrome 105+; older devices stay full-bright. */
    body:not(.arena-mode) #fight-screen .hand-area:has(.card.selected) .card:not(.selected):not(.disabled) {
        opacity: 0.45;
        filter: saturate(0.65);
        transition: opacity 0.22s ease, filter 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Selected card on mobile: scale-only lift (no translateY) because
       overflow-y: hidden would clip an upward translation. The pulsing
       halo carries the visual weight instead. Matches static filter
       at 0%/100% so hover/select state transitions stay smooth. */
    body:not(.arena-mode) #fight-screen .hand-area .card.selected {
        transform: scale(1.08);
        animation: card-halo-pulse 1.8s ease-in-out infinite;
    }
    body:not(.arena-mode) #fight-screen .hand-area .card.selected:hover {
        transform: scale(1.1);
    }
    @keyframes card-halo-pulse {
        0%, 100% {
            filter:
                drop-shadow(0 8px 22px rgba(0, 0, 0, 0.6))
                drop-shadow(0 0 16px rgba(255, 45, 85, 0.5));
        }
        50% {
            filter:
                drop-shadow(0 8px 22px rgba(0, 0, 0, 0.6))
                drop-shadow(0 0 32px rgba(255, 45, 85, 0.85));
        }
    }
}
.card .card-type-label {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 2px 6px;
    background: rgba(8,6,6,0.75);
    color: var(--card-color, #fff);
    border: 1px solid var(--card-color, rgba(255,255,255,0.3));
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(6px);
    z-index: 4;
    text-shadow: 0 0 8px var(--card-color, rgba(0,0,0,0.5));
}

/* Action Bar */
.action-bar {
    display: flex;
    gap: 10px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    flex-shrink: 0;
}
.action-bar .btn-gold { font-size: 16px; padding: 14px 32px; flex: 1; max-width: 220px; min-height: 48px; }
.action-bar .btn-raise { font-size: 12px; padding: 10px 14px; min-height: 44px; }

/* ============================================================================
   SCREEN 3: ROUND RESOLUTION
   ============================================================================ */
.resolution-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,10,20,0.97);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
    text-align: center;
    overflow: hidden;
}
.resolution-overlay.active { display: flex; }

/* Screen shake on hit */
@keyframes screen-shake {
    0%, 100% { transform: translate(0); }
    10% { transform: translate(-6px, 3px); }
    20% { transform: translate(5px, -4px); }
    30% { transform: translate(-4px, 2px); }
    40% { transform: translate(3px, -2px); }
    50% { transform: translate(-2px, 1px); }
}
.resolution-overlay.shake { animation: screen-shake 0.4s ease-out; }

/* Impact flash */
.resolution-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 200;
    transition: opacity 0.1s;
}
.resolution-overlay.flash::after {
    animation: impact-flash 0.3s ease-out;
}
@keyframes impact-flash {
    0% { opacity: 0.6; }
    100% { opacity: 0; }
}

.res-round {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 6px;
    color: var(--text-dim);
    margin-bottom: 12px;
}
.res-stances {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 16px;
}
.res-stance-card {
    padding: 10px 18px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 3px;
}
.res-stance-card.engage { background: var(--strike-glow); border: 2px solid var(--strike); color: var(--strike); }
.res-stance-card.disengage { background: var(--guard-glow); border: 2px solid var(--guard); color: var(--guard); }

.res-cards {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}
.res-card-reveal {
    width: 155px;
    background: var(--bg-card);
    border: 3px solid var(--card-color, rgba(255,255,255,0.2));
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
    animation: card-slam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 20px var(--card-glow, transparent);
}
@keyframes card-slam {
    0% { transform: scale(0.3) rotateY(90deg); opacity: 0; }
    50% { transform: scale(1.1) rotateY(0deg); opacity: 1; }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}
.res-card-reveal .rcr-art {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}
.res-card-reveal .rcr-body {
    padding: 8px 10px 10px;
}
.res-card-reveal .rcr-type { font-size: 20px; display: none; }
.res-card-reveal .rcr-name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
    font-weight: 700;
}
.res-card-reveal .rcr-power {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--card-color, var(--text));
    line-height: 1;
}

.res-vs {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--gold);
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(255,45,85,0.4);
    animation: vs-pulse 1s ease-in-out infinite;
}
@keyframes vs-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.res-result {
    font-family: var(--font-display);
    font-size: clamp(28px, 7vw, 48px);
    letter-spacing: 5px;
    margin-bottom: 10px;
    padding: 12px 28px;
    border-radius: 8px;
    animation: result-slam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
@keyframes result-slam {
    0% { transform: scale(0) rotate(-3deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(1deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.res-result.win { color: #22c55e; background: rgba(34,197,94,0.12); border: 2px solid rgba(34,197,94,0.4); box-shadow: 0 0 30px rgba(34,197,94,0.2); }
.res-result.lose { color: var(--danger); background: rgba(255,71,87,0.12); border: 2px solid rgba(255,71,87,0.4); box-shadow: 0 0 30px rgba(255,71,87,0.2); }
.res-result.draw { color: var(--text-dim); background: rgba(255,255,255,0.05); }
.res-result.no-clash { color: var(--blue); background: var(--blue-glow); }

/* Full-screen flash on big damage */
.screen-flash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    animation: screenFlash 0.4s ease-out forwards;
}
.screen-flash.win { background: rgba(255,45,85,0.15); }
.screen-flash.lose { background: rgba(255,71,87,0.2); }
@keyframes screenFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.res-damage {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.dmg-num {
    color: var(--danger);
    font-weight: 700;
    font-size: 32px;
    animation: dmg-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}
@keyframes dmg-pop {
    0% { transform: scale(3); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
.heal-num { color: var(--success); font-weight: 700; font-size: 22px; }

.res-effects {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 14px;
}

/* ============================================================================
   SCREEN 4: RAISE/FOLD MODAL
   ============================================================================ */
.raise-modal {
    position: fixed;
    inset: 0;
    background: rgba(10,10,20,0.95);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
    text-align: center;
}
.raise-modal.active { display: flex; }

.raise-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 6vw, 40px);
    letter-spacing: 4px;
    color: var(--gold);
    text-shadow: 0 0 40px rgba(255,45,85,0.5);
    animation: raise-shake 0.5s ease-out;
    margin-bottom: 16px;
}
@keyframes raise-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.raise-amounts {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: 28px;
}
.raise-old { color: var(--text-dim); text-decoration: line-through; }
.raise-arrow { color: var(--gold); font-size: 24px; }
.raise-new { color: var(--gold); text-shadow: 0 0 20px rgba(255,45,85,0.3); }

.raise-state {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 16px;
    padding: 8px 16px;
    background: var(--bg-surface);
    border-radius: 4px;
}
.raise-buttons {
    display: flex;
    gap: 12px;
}
.raise-buttons .btn { min-width: 120px; }

/* ============================================================================
   SCREEN 5: MATCH RESULT
   ============================================================================ */
#result-screen {
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(255,45,85,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(168,85,247,0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 70%, rgba(255,45,85,0.06) 0%, transparent 40%),
        var(--bg);
}
.result-label {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 6px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.result-winner {
    font-family: var(--font-display);
    font-size: clamp(28px, 8vw, 52px);
    letter-spacing: 4px;
    color: var(--gold);
    text-shadow: 0 0 40px rgba(255,45,85,0.4);
    margin-bottom: 4px;
    animation: winner-glow 2s infinite;
}
@keyframes winner-glow {
    0%, 100% { text-shadow: 0 0 40px rgba(255,45,85,0.4); }
    50% { text-shadow: 0 0 60px rgba(255,45,85,0.7); }
}
.result-condition {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--blue);
    margin-bottom: 16px;
}
.result-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 300px;
    margin: 0 auto 16px;
}
.result-stat {
    background: var(--bg-surface);
    padding: 8px;
    border-radius: 4px;
}
.result-stat .rs-label {
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.result-stat .rs-value {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text);
}
.result-buttons { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }

/* ============================================================================
   SCREEN 6: LOBBY
   ============================================================================ */
#lobby-screen {
    flex-direction: column;
    overflow-y: hidden;
}
.lobby-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Overlay panels (shop/locker/gauntlet/tournament/leaders) use z-index:5
       and position:absolute, so without this they'd sit ON TOP of the tab
       bar — tab clicks silently hit the overlay instead. Keep the tabs
       above the overlays so you can always switch tabs. */
    position: relative;
    z-index: 10;
    background: linear-gradient(180deg, rgba(12,10,10,0.6) 0%, rgba(12,10,10,0.95) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
}
.lobby-tabs::-webkit-scrollbar { display: none; }
/* Overlay tab panels fill #lobby-screen with position:absolute. Without this
   their top edge hides behind the tab bar (z-index:10). Push them below it.
   FIGHTER-hub panels (locker/stable) want a full-bleed immersive layout
   anchored by their own sticky pill-bar, so they're intentionally excluded. */
#leaders-panel, #shop-panel, #gauntlet-panel, #tournament-panel {
    top: 44px !important;
}
.lobby-tab {
    flex: 0 0 auto;
    padding: 12px 14px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.25s ease;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    white-space: nowrap;
    position: relative;
}
.lobby-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
    text-shadow: 0 0 16px rgba(255,45,85,0.4);
}
.lobby-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(255,45,85,0.6), 0 0 20px rgba(255,45,85,0.3);
    border-radius: 1px;
}
@media (min-width: 700px) {
    .lobby-tab { flex: 1; }
}

.lobby-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    padding-bottom: 80px;
    -webkit-overflow-scrolling: touch;
}

/* Challenge Cards */
.challenge-card {
    background: var(--rift-pulse), var(--bg-surface);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    gap: 10px;
}
.challenge-info { flex: 1; }
.challenge-info .ch-name {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1px;
}
.challenge-info .ch-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
}
.challenge-info .ch-quote {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}
.challenge-wager {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 1px;
    margin-right: 10px;
}
.challenge-join {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    padding: 6px 14px;
    background: var(--gold-glow);
    border: 1px solid var(--gold);
    color: var(--gold);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.section-title {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 3px;
    color: var(--text-dim);
    margin: 16px 0 8px;
}
.section-title:first-child { margin-top: 0; }

/* Replay Cards */
.replay-card {
    background: var(--bg-surface);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.2s;
}
.replay-card .rc-title {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
}
.replay-card .rc-highlight {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 11px;
    color: var(--gold);
}
.replay-card .rc-play {
    color: var(--blue);
    font-size: 18px;
}

/* Tournament Banner */
.tournament-banner {
    background: linear-gradient(135deg, rgba(255,45,85,0.08), rgba(168,85,247,0.08));
    border: 1px solid rgba(255,45,85,0.2);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    margin-top: 12px;
}
.tournament-banner .tb-title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 3px;
    color: var(--gold);
}
.tournament-banner .tb-info {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    margin: 4px 0 8px;
}

/* Tab Panels — see TAB TRANSITIONS section for animated styles */

/* Tournament Cards */
.tourney-card {
    background: var(--bg-surface);
    border: 1px solid rgba(255,45,85,0.15);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    padding: 14px 14px 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.3s;
    position: relative;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,215,170,0.04);
}
.tourney-card::after {
    content: '';
    position: absolute; right: 10px; top: 10px;
    width: 22px; height: 22px;
    background: radial-gradient(circle, rgba(255,45,85,0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.tc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.tc-type {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(255,45,85,0.15);
    color: var(--gold);
}
.tc-type.tc-ironman { background: rgba(255,71,87,0.15); color: var(--danger); }
.tc-type.tc-draft { background: rgba(168,85,247,0.15); color: var(--bluff); }
.tc-type.tc-championship-badge {
    background: linear-gradient(135deg, rgba(255,45,85,0.25), rgba(168,85,247,0.25));
    color: var(--gold);
    border: 1px solid rgba(255,45,85,0.3);
}
.tc-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
}
.tc-name {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 6px;
}
.tc-details {
    display: flex;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.tc-prize-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.tc-prize-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dark);
    font-weight: 700;
}
.tc-prize-val {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
    font-weight: 700;
    margin-right: 8px;
}
.tc-registered {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
}
.tc-special {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--bluff);
    padding: 4px 8px;
    background: rgba(168,85,247,0.08);
    border-radius: 4px;
    margin-bottom: 6px;
}
.tc-championship {
    border-color: rgba(255,45,85,0.3);
    background: linear-gradient(135deg, rgba(255,45,85,0.05), rgba(168,85,247,0.05));
}
.tc-qualification {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--success);
    font-weight: 700;
    margin-top: 6px;
}
.tc-completed { opacity: 0.6; }
.tc-result-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
}

/* Live badge */
.tb-live-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 3px 10px;
    background: var(--danger);
    color: white;
    border-radius: 3px;
    margin-bottom: 8px;
    animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.tb-prize {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
}

/* Campaign Chapters */
.campaign-chapter {
    background: var(--bg-surface);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    position: relative;
    overflow: hidden;
}
.campaign-chapter::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,45,85,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.campaign-chapter.current {
    border-color: rgba(255,45,85,0.25);
    box-shadow: 0 0 20px rgba(255,45,85,0.08), inset 0 0 40px rgba(255,45,85,0.03);
}
.campaign-chapter.current::before { opacity: 1; }
.campaign-chapter.locked { opacity: 0.35; filter: grayscale(0.3); }
.ch-header {
    display: flex;
    gap: 14px;
    align-items: center;
}
.ch-art {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 12px rgba(255,45,85,0.1);
    border: 1px solid rgba(255,255,255,0.06);
}
.ch-info { flex: 1; }
.ch-number {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 2px;
    font-weight: 700;
}
.ch-title-text {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--text);
}
.ch-progress {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}
.ch-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.ch-progress-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Post Challenge */
.post-challenge {
    background: linear-gradient(135deg, rgba(255,45,85,0.04), rgba(168,85,247,0.04));
    border: 2px dashed rgba(255,45,85,0.25);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    margin-bottom: 10px;
}
.post-challenge .pc-text {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--gold);
}

/* ============================================================================
   SCREEN 7: FIGHTER PROFILE
   ============================================================================ */
#profile-screen {
    flex-direction: column;
}
.profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255,45,85,0.05) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.profile-portrait {
    width: 110px;
    height: 140px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: linear-gradient(135deg, var(--bg-card), rgba(170,68,255,0.15));
    border: 2px solid rgba(170,68,255,0.3);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 20px rgba(170,68,255,0.1);
}
.profile-info { flex: 1; }
.profile-info .pi-name {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 2px;
}
.profile-info .pi-archetype {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--bluff);
}
.profile-info .pi-record {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
}
.profile-info .pi-signature {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 11px;
    color: var(--gold);
    margin-top: 2px;
}

.profile-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}
.profile-section {
    margin-bottom: 16px;
}
.profile-section .ps-title {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--text-dim);
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 4px;
}
.ability-slots {
    display: flex;
    gap: 8px;
}
.ability-slot {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}
.ability-slot .as-name {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
}
.ability-slot .as-desc {
    font-size: 10px;
    color: var(--text-dim);
}

.scar-item, .rival-item, .history-item {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
}
.scar-item .scar-desc { color: var(--text-dim); }
.scar-item .scar-from { color: var(--strike); font-family: var(--font-mono); font-size: 10px; }
.rival-item { display: flex; justify-content: space-between; }
.rival-item .rival-name { color: var(--text); font-weight: 700; }
.rival-item .rival-record { color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; }
.history-item { display: flex; justify-content: space-between; align-items: center; }
.history-item .hi-result { font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.history-item .hi-result.win { color: var(--gold); }
.history-item .hi-result.loss { color: var(--danger); }
.history-item .hi-opponent { font-size: 11px; }
.history-item .hi-method { font-size: 10px; color: var(--text-dim); }

/* ============================================================================
   NAVIGATION
   ============================================================================ */
.nav-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: linear-gradient(180deg, rgba(22,18,18,0.92), rgba(12,10,10,0.98));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,45,85,0.1);
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
    max-width: 1400px;
    margin: 0 auto;
}
.nav-btn {
    flex: 1;
    padding: 10px 4px 8px;
    text-align: center;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-dim);
    transition: color 0.2s, transform 0.15s;
    position: relative;
}
.nav-btn:active { transform: scale(0.92); }
.nav-btn.active { color: var(--gold); }
.nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--gold);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 8px rgba(255,45,85,0.5);
}
.nav-btn .nav-icon { font-size: 20px; display: block; line-height: 1.2; }
.nav-btn .nav-label { font-size: 10px; font-family: var(--font-mono); letter-spacing: 1px; margin-top: 3px; display: block; }

/* Nav notification dot — fires when the player has new abilities unlocked
   that aren't yet equipped, drawing the eye to the FIGHTER hub where the
   loadout editor lives. Cleared the moment the player visits the loadout. */
.nav-btn { position: relative; }
.nav-btn .nav-dot {
    position: absolute;
    top: 4px;
    right: calc(50% - 16px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold, #c9a961);
    box-shadow: 0 0 8px rgba(201,169,97,0.85), 0 0 0 1.5px rgba(0,0,0,0.5);
    animation: nav-dot-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes nav-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.7; }
}

/* Bottom padding for nav */
.screen { padding-bottom: 80px; }
#pre-fight, #fight-screen, #result-screen { padding-bottom: 20px; }

/* ============================================================================
   EXTRACTED INLINE STYLES — previously hardcoded in HTML style="" attributes
   ============================================================================ */

/* Guest wallet connect button */
#guest-wallet-btn {
    display: none;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 400;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 2px;
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid rgba(255,215,0,0.55);
    background: rgba(255,215,0,0.14);
    color: #ffd700;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s;
    box-shadow: 0 0 0 0 rgba(255,215,0,0.5);
    animation: guest-wallet-pulse 2.4s ease-in-out infinite;
}
#guest-wallet-btn:hover {
    background: rgba(255,215,0,0.22);
    border-color: rgba(255,215,0,0.85);
    transform: translateY(-1px);
}
/* The SAVE PROGRESS pill is fixed top-right and overlaps the fight-screen
   top-bar wager/balance row on mobile. Hide it during fights — players
   can't act on it mid-match anyway. (Campaign screen keeps the pill —
   audio controls shift left to clear it; see CLAUDE.md.) */
body:has(#fight-screen.active) #guest-wallet-btn { display: none !important; }
@keyframes guest-wallet-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.45); }
    50%      { box-shadow: 0 0 0 8px rgba(255,215,0,0); }
}

/* Audio toggle floating pill */
#audio-controls {
    position: fixed;
    bottom: 70px;
    right: 12px;
    z-index: 60;
    display: flex;
    gap: 6px;
    align-items: center;
}
#audio-controls button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(22,18,18,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, opacity 0.2s, border-color 0.2s;
}
#dialogue-toggle-btn {
    font-size: 18px;
    opacity: 0.35;
    filter: grayscale(1);
    display: none;
}
#dialogue-toggle-btn.vo-on {
    opacity: 1;
    filter: none;
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(255,215,0,0.4);
}
#audio-controls button {
    position: relative;
}
#audio-controls button::after {
    content: attr(aria-label);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: 6px 10px;
    background: rgba(12,10,10,0.95);
    border: 1px solid rgba(255,215,0,0.35);
    border-radius: 4px;
    color: var(--gold);
    font-family: var(--font-display, sans-serif);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    z-index: 70;
}
#audio-controls button:hover::after,
#audio-controls button:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
@media (hover: none) {
    #audio-controls button::after { display: none; }
}

/* Portrait images inside fighter containers */
.fighter-portrait img,
.portrait-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fighter-portrait img { border-radius: 6px; }
.portrait-small img { border-radius: 4px; }

/* Enhance panel (pre-fight Rift Boost) */
.enhance-panel {
    display: none;
    margin: 14px auto;
    max-width: 440px;
    padding: 14px 16px 12px;
    background: linear-gradient(135deg, rgba(255,45,85,0.08) 0%, rgba(255,215,0,0.04) 100%);
    border: 2px solid rgba(255,45,85,0.35);
    border-radius: 12px;
    position: relative;
    box-shadow: inset 0 0 20px rgba(255,45,85,0.06), 0 0 16px rgba(255,45,85,0.08);
}
.enhance-panel::before {
    content: '\26A1 RIFT SURGE';
    position: absolute; top: -9px; left: 14px;
    padding: 2px 8px;
    background: var(--bg, #0c0a0a);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(255,45,85,0.6);
}
.enhance-panel-title {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin-bottom: 10px;
    text-align: center;
}
.enhance-panel-title span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.6;
}
.enhance-btn-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.enhance-btn {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.enhance-btn[data-type="strike"] {
    border: 1px solid rgba(255,45,85,0.3);
    background: rgba(255,45,85,0.06);
    color: var(--text);
}
.enhance-btn[data-type="guard"] {
    border: 1px solid rgba(100,200,255,0.3);
    background: rgba(100,200,255,0.06);
    color: var(--text);
}
.enhance-btn[data-type="bluff"] {
    border: 1px solid rgba(168,85,247,0.3);
    background: rgba(168,85,247,0.06);
    color: var(--text);
}
.enhance-balance {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 6px;
    opacity: 0.7;
}

/* Buffster avatar (reusable across host bars) */
.buffster-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    border: 2px solid var(--gold);
    flex-shrink: 0;
}
.buffster-avatar-lg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    border: 2px solid var(--gold);
    flex-shrink: 0;
}

/* Host bar with avatar layout */
.host-bar-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Host bar variant inside resolution/raise modals */
.host-bar-inset {
    max-width: 400px;
    width: 100%;
    border-radius: 6px;
    background: var(--bg-surface);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: none;
}
.host-bar-inset.raise-host {
    max-width: 380px;
    margin-bottom: 12px;
}

/* Fighter title (below name) */
.f-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--gold);
    margin: -2px 0 2px;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Fight screen balance display */
.fight-balance {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-gold);
    letter-spacing: 1px;
    margin-top: 3px;
    padding: 3px 8px;
    background: var(--accent-gold-glow);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 4px;
    transition: all 0.3s;
}

/* Wager cap label */
.wager-cap {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dark);
    letter-spacing: 1px;
}

/* Fight top-bar right column */
.fight-topbar-right {
    text-align: right;
}

/* Boost badge on fighter panel */
.f-boost {
    display: none;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--accent-gold);
    padding: 2px 6px;
    margin-top: 2px;
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 4px;
    text-align: center;
}

/* HP max denominator dim color */
.hp-max { color: var(--text-dark); }

/* Season strip in lobby */
.lobby-season-strip {
    position: relative;
    height: 48px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(255,45,85,0.06) 0%, rgba(12,10,10,0.95) 40%, rgba(168,85,247,0.06) 100%);
    border-bottom: 1px solid rgba(255,45,85,0.08);
}
.lobby-season-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 200px,
        rgba(255,45,85,0.03) 200px,
        rgba(255,45,85,0.03) 201px
    );
    pointer-events: none;
    animation: seasonScanlines 20s linear infinite;
}
@keyframes seasonScanlines {
    from { transform: translateX(0); }
    to { transform: translateX(-201px); }
}
/* Season 2 teaser card — lightweight anticipation slot in lobby */
.lobby-s2-teaser {
    position: relative;
    display: block;
    width: 100%;
    margin: 14px 0 6px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(16,8,20,0.95) 0%, rgba(40,8,20,0.9) 60%, rgba(80,10,30,0.85) 100%);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 8px;
    overflow: hidden;
    cursor: default;
    box-shadow: 0 4px 20px rgba(168,85,247,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}
.lobby-s2-teaser::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/shop/s2_teaser_silhouette_1.png');
    background-size: cover;
    background-position: right center;
    opacity: 0.18;
    filter: saturate(1.1) contrast(1.1);
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
    -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
}
.lobby-s2-teaser-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lobby-s2-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 3px;
    color: #a855f7;
    text-transform: uppercase;
    opacity: 0.85;
}
.lobby-s2-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 0 18px rgba(168,85,247,0.5), 0 2px 0 rgba(0,0,0,0.4);
    line-height: 1;
}
.lobby-s2-desc {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 12px;
    color: #e0d0f0;
    max-width: 80%;
    line-height: 1.4;
}
.lobby-s2-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: #b890d0;
}
.lobby-s2-meta .s2-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #a855f7;
    box-shadow: 0 0 8px rgba(168,85,247,0.8);
    animation: s2Pulse 2s ease-in-out infinite;
}
@keyframes s2Pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.lobby-season-strip img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    filter: saturate(1.2);
}
.lobby-season-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 100%;
}
.lobby-season-title {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 5px;
    color: var(--gold);
    text-shadow: 0 0 16px rgba(255,45,85,0.4), 0 0 40px rgba(255,45,85,0.15);
}
.lobby-season-quote {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-shadow: 0 0 12px rgba(255,255,255,0.1);
}

/* Result screen portrait */
.result-portrait-wrap {
    position: relative;
    margin-bottom: 12px;
}
.result-portrait {
    width: 120px;
    height: 160px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid var(--gold);
    box-shadow: 0 0 40px rgba(255,45,85,0.3), 0 8px 32px rgba(0,0,0,0.6);
}
#result-screen.winner-screen .result-portrait {
    animation: resultPortraitVictory 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
    box-shadow: 0 0 60px rgba(255,215,0,0.6), 0 0 120px rgba(255,45,85,0.35), 0 8px 32px rgba(0,0,0,0.7);
}
@keyframes resultPortraitVictory {
    0%   { opacity: 0; transform: scale(0.5) rotate(-4deg); filter: blur(8px); }
    60%  { opacity: 1; transform: scale(1.1) rotate(2deg); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
#result-screen.loser-screen .result-portrait {
    filter: grayscale(0.6) brightness(0.7);
    border-color: rgba(255,59,59,0.7);
    box-shadow: 0 0 30px rgba(255,59,59,0.25), 0 8px 32px rgba(0,0,0,0.8);
}

/* Result kill name */
.result-kill-name {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 3px;
    color: var(--bluff);
    margin-bottom: 12px;
    display: none;
}

/* Result stat color overrides */
.rs-value-danger { color: var(--danger); }
.rs-value-gold { color: var(--gold); }

/* Referral banner on landing */
.referral-banner {
    display: none;
    margin-top: 12px;
    padding: 10px 18px;
    background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 8px;
    max-width: 400px;
    animation: btnFadeIn 1.5s ease 1.4s both;
}
.referral-quote {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

/* Profile standalone wrapper (aka FIGHTER hub) */
.profile-standalone {
    padding: 20px 20px 32px;
    text-align: center;
}
.fighter-hub-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    background: rgba(18,14,14,0.6);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Sticky pill-bar that rides above scrolling locker/stable content so the
   user never loses the FIGHTER hub context while scrolling through their
   cosmetics or roster. Profile-screen keeps its full editorial header
   (eyebrow + title + pills) — this is the slim variant. */
.fighter-hub-subnav {
    position: sticky;
    top: 0;
    z-index: 6;
    padding: 14px 16px 12px;
    text-align: center;
    background: linear-gradient(180deg, rgba(12,10,10,0.96) 0%, rgba(12,10,10,0.88) 60%, rgba(12,10,10,0) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.fighter-hub-subnav::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 60%;
    max-width: 420px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,45,85,0.25) 50%, transparent 100%);
}
.fighter-hub-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    min-height: 38px;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--text-dim, #8a8683);
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, transform 0.15s;
    text-transform: uppercase;
}
.fighter-hub-tab .fhub-icon {
    font-size: 13px;
    opacity: 0.75;
    line-height: 1;
}
@media (hover: hover) {
    .fighter-hub-tab:hover {
        color: #f5f5f5;
        background: rgba(255,255,255,0.04);
    }
    .fighter-hub-tab:hover .fhub-icon { opacity: 1; }
}
.fighter-hub-tab:active { transform: scale(0.96); }
.fighter-hub-tab.active {
    color: #0c0a0a;
    background: linear-gradient(180deg, #ffd166 0%, #ff2d55 120%);
    box-shadow: 0 4px 14px rgba(255,45,85,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.fighter-hub-tab.active .fhub-icon { opacity: 1; }
.profile-back-btn {
    margin-top: 20px;
}
.profile-footer-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.profile-footer-actions .profile-back-btn { margin-top: 20px; }
.profile-logout-btn {
    margin-top: 20px;
    color: rgba(255,255,255,0.65);
    border-color: rgba(255,255,255,0.2);
}
.profile-logout-btn:hover {
    color: #ff4d6d;
    border-color: #ff4d6d;
    background: rgba(255,77,109,0.08);
}
@media (max-width: 480px) {
    .profile-standalone { padding: 16px 12px 28px; }
    .fighter-hub-tab { padding: 8px 12px; font-size: 12px; letter-spacing: 1.5px; }
    .fighter-hub-tab .fhub-icon { font-size: 11px; }
}

/* Logo variants */
.logo { cursor: pointer; }
.fight-logo { height: 48px; }
.lobby-logo {
    height: 68px;
    position: relative;
    z-index: 2;
    margin: -8px 0;
    filter: drop-shadow(0 4px 18px rgba(255,45,85,0.3));
}
.lobby-credits-btn { cursor: pointer; }

/* Lobby top-bar grouping for the right-side controls (SEASON pill + credits). */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* SEASON pill — opens the Season Track modal. Compact, sits next to the
   credits button in the lobby top-bar so it's discoverable but not loud. */
.lobby-season-pill {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--gold);
    background: rgba(255,45,85,0.08);
    border: 1px solid rgba(255,45,85,0.35);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.lobby-season-pill:hover {
    background: rgba(255,45,85,0.18);
    border-color: rgba(255,45,85,0.6);
}
.lobby-season-pill:active { transform: scale(0.97); }

/* Season Track modal — backdrop + centered frame. */
.season-track-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.season-track-modal[hidden] { display: none; }
.season-track-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.season-track-modal-frame {
    position: relative;
    max-width: min(1100px, 95vw);
    max-height: 90vh;
    width: 100%;
    overflow: auto;
    padding: 12px;
}
.season-track-modal-close {
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 1;
    background: rgba(20,20,20,0.85);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}
.season-track-modal-close:hover { background: rgba(255,45,85,0.25); border-color: rgba(255,45,85,0.6); }

@media (max-width: 600px) {
    .lobby-logo { height: 56px; margin: -6px 0; }
    .fight-logo { height: 36px; }
}
@media (max-width: 480px) {
    .lobby-logo { height: 46px; margin: -4px 0; }
    .fight-logo { height: 32px; }
}

/* Opponent face-down cards */
.opp-hand {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin-top: 4px;
}
.opp-card-back {
    width: 22px;
    height: 32px;
    border-radius: 4px;
    background: var(--bg-elevated);
    border: 1px solid rgba(255,255,255,0.1);
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.opp-card-back.card-played {
    animation: cardPlayedOut 0.4s ease forwards;
}
@keyframes cardPlayedOut {
    to { opacity: 0; transform: scale(0.5) translateY(-8px); }
}
@media (min-width: 800px) {
    .opp-card-back { width: 28px; height: 40px; border-radius: 5px; }
}
@media (min-width: 1200px) {
    .opp-card-back { width: 34px; height: 48px; border-radius: 6px; }
}

/* Challenge card portrait */
.challenge-portrait {
    width: 64px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    flex-shrink: 0;
}

/* Raise portrait */
.raise-portrait {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    border: 2px solid var(--gold);
    flex-shrink: 0;
}

/* ============================================================================
   RESULT SCREEN — STAGGER ANIMATIONS
   ============================================================================ */
#result-screen .result-portrait-wrap {
    animation: resultSlideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
#result-screen .result-label {
    animation: resultFadeIn 0.4s ease 0.25s both;
}
#result-screen .result-winner {
    animation: resultSlam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}
#result-screen .result-condition {
    animation: resultFadeIn 0.4s ease 0.6s both;
}
#result-screen .result-kill-name {
    animation: resultFadeIn 0.5s ease 0.75s both;
}
#result-screen .result-summary {
    animation: resultCascade 0.5s ease 0.85s both;
}
#result-screen .host-intro {
    animation: resultFadeIn 0.5s ease 1.0s both;
}
#result-screen .result-buttons {
    animation: resultSlideUp 0.4s ease 1.15s both;
}
@keyframes resultSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes resultFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes resultSlam {
    0% { opacity: 0; transform: scale(2.5); }
    60% { opacity: 1; transform: scale(0.9); }
    100% { transform: scale(1); }
}
@keyframes resultCascade {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================================
   TAB TRANSITIONS — crossfade between lobby tab panels
   ============================================================================ */
.tab-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.tab-panel.active {
    display: block;
    animation: tabFadeIn 0.25s ease forwards;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   LOADING SKELETONS — shimmer placeholders for async content
   ============================================================================ */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-surface) 25%,
        var(--bg-elevated) 50%,
        var(--bg-surface) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-card {
    height: 72px;
    margin-bottom: 10px;
    border-radius: 10px;
}
.skeleton-line {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
    width: 60%;
}
.skeleton-line.short { width: 35%; }
.skeleton-line.full { width: 100%; }

/* Empty state component */
.empty-state {
    padding: 40px 20px;
    text-align: center;
    position: relative;
}
.empty-state::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,45,85,0.04) 0%, transparent 70%);
    pointer-events: none;
}
.empty-state-icon {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.35;
    filter: grayscale(0.5);
}
.empty-state-text {
    font-family: var(--font-host);
    font-style: italic;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
}

/* ============================================================================
   HOVER — only on pointer devices (prevents sticky hover on touch)
   ============================================================================ */
/* Global tactile :active feedback on touch devices — applies regardless of hover capability */
button:not([disabled]):active,
.btn-gold:not([disabled]):active,
.btn-outline:not([disabled]):active,
.stance-btn:active,
.challenge-join:active,
.lobby-secondary-btn:active {
    transform: scale(0.96);
    transition: transform 0.08s ease-out;
}
.card:not(.disabled):active { transform: translateY(-4px) scale(0.98); }

@media (hover: hover) {
    .card:not(.selected):hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 12px 28px rgba(0,0,0,0.6), 0 0 12px var(--card-glow, transparent); }
    .btn-gold:hover::after { left: 130%; }
    .btn-gold:hover { box-shadow: 0 6px 36px rgba(255,45,85,0.5); }
    .btn-outline:hover { border-color: var(--gold); color: var(--gold); }
    .stance-btn:hover { border-color: rgba(255,255,255,0.25); }
    .challenge-card:hover { border-color: rgba(255,45,85,0.3); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
    .challenge-join:hover { background: var(--gold); color: var(--bg); }
    .replay-card:hover { border-color: rgba(200,200,208,0.2); }
    .tourney-card:hover { border-color: rgba(255,45,85,0.2); }
    .tc-completed:hover { opacity: 0.8; }
    .post-challenge:hover { border-color: var(--gold); background: var(--gold-glow); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(255,45,85,0.15); }
    .nav-btn:hover { color: var(--text); }
    .lobby-tab:hover { color: var(--text); text-shadow: 0 0 8px rgba(255,255,255,0.15); }
    .campaign-chapter:not(.locked):hover { border-color: rgba(255,45,85,0.35); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 0 16px rgba(255,45,85,0.1); }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (min-width: 800px) {
    .fighters-area { padding: 12px 24px; }
    .fighter-panel .portrait-small { width: 170px; height: 230px; font-size: 32px; }
    .hand-area { gap: 16px; min-height: 260px; padding: 28px 24px 16px; }
    .card { width: 160px; min-width: 160px; height: 230px; max-height: 230px; }
    .card .card-name { font-size: 11px; }
    .card .card-power { font-size: 38px; margin-top: 4px; }
    .card .card-effect { font-size: 11px; width: 220px; padding: 10px 12px; }
    /* More aggressive overlap at desktop sizes */
    .hand-area[data-handsize="5"] .card { margin-left: -28px; }
    .hand-area[data-handsize="6"] .card { margin-left: -52px; }
    .hand-area[data-handsize="7"] .card,
    .hand-area[data-handsize="8"] .card { margin-left: -70px; }
    .res-card-reveal { width: 200px; }
    .res-card-reveal .rcr-art { height: 150px; }
    .res-card-reveal .rcr-power { font-size: 36px; }
    .host-text { font-size: 15px; }
    .fighter-portrait { width: 240px; height: 320px; font-size: 48px; }
    .ko-card-art { width: 280px; height: 380px; }
    .profile-portrait { width: 130px; height: 170px; }
}

/* ============================================================================
   DESKTOP LOBBY — two-column layout
   ============================================================================ */
@media (min-width: 800px) {
    .lobby-content {
        display: grid;
        grid-template-columns: 1fr;
    }
    /* Arena tab gets two columns */
    #tab-arena {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 16px 24px;
        align-items: start;
    }
    #tab-arena.active {
        display: grid !important;
    }
    /* Section titles span full width */
    #tab-arena .section-title {
        grid-column: 1 / -1;
    }
    /* Hero fight button spans full width */
    #tab-arena .lobby-hero-fight,
    #tab-arena .lobby-cta-row,
    #tab-arena .lobby-player-line,
    #tab-arena .lobby-live-strip,
    #tab-arena .lobby-pvp-section {
        grid-column: 1 / -1;
    }
    /* Post challenge + challenges list side by side */
    #tab-arena .post-challenge {
        grid-column: 1;
    }
    /* Challenge cards fill both columns */
    #tab-arena .challenge-card {
        break-inside: avoid;
    }
    /* Campaign tab: wider chapter cards */
    #tab-campaign .campaign-chapter {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Tournament cards in grid */
    #tab-tournaments {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 12px;
    }
    #tab-tournaments.active {
        display: grid !important;
    }
    /* Result screen wider layout */
    .result-summary {
        max-width: 500px;
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================================
   LARGE DESKTOP (1200px+)
   ============================================================================ */
@media (min-width: 1200px) {
    .screen { padding: 24px 40px; }

    /* Lobby */
    .lobby-cta-card { min-height: 220px; }
    .lobby-cta-card h3 { font-size: 28px; }
    .lobby-cta-card p { font-size: 14px; }
    .lobby-player-row { font-size: 16px; padding: 14px 20px; }
    .lobby-live-strip { font-size: 14px; padding: 10px 20px; }

    /* Fight screen */
    .top-bar { font-size: 14px; padding: 10px 20px; }
    .fighter-panel .f-name { font-size: 14px; }
    .fighter-panel .f-hp-label { font-size: 12px; }
    .fighter-panel .f-hand-count { font-size: 11px; }
    .fighter-panel .portrait-small { width: 160px; height: 220px; }
    .hand-area { gap: 16px; padding: 28px 20px 16px; overflow-x: visible; flex-wrap: nowrap; min-height: 280px; }
    .card { width: 180px; min-width: 160px; height: 250px; max-height: 250px; flex-shrink: 1; }
    .card .card-name { font-size: 12px; }
    .card .card-power { font-size: 42px; margin-top: 4px; }
    .card .card-effect { font-size: 12px; width: 240px; padding: 10px 14px; }
    .stance-btn { font-size: 14px; padding: 12px 18px; }
    #btn-lockin { font-size: 18px; padding: 16px 32px; }
    .action-bar .btn { font-size: 14px; padding: 12px 18px; }
    .action-bar .btn-raise { font-size: 13px; }
    .arena-banner { font-size: 13px; padding: 8px 16px; }
    .host-text { font-size: 16px; }
    .round-history { font-size: 12px; }

    /* Pre-fight */
    .fighter-portrait { width: 280px; height: 380px; font-size: 56px; }
    .vs-text { font-size: 48px; }

    /* Resolution overlay */
    .res-card-reveal { width: 240px; }
    .res-card-reveal .rcr-art { height: 170px; }
    .res-card-reveal .rcr-name { font-size: 16px; }
    .res-card-reveal .rcr-power { font-size: 40px; }

    /* Nav */
    .nav-bottom { height: 68px; }
    .nav-btn { font-size: 12px; }
    .nav-icon { font-size: 24px; }

    /* Profile */
    .profile-portrait { width: 160px; height: 210px; }

    /* General text */
    .section-title { font-size: 14px; }
}

/* ============================================================================
   SMALL PHONES
   ============================================================================ */
@media (max-width: 480px) {
    /* Fight screen — cards stay tall so art reads; fanning keeps them in frame */
    .hand-area { gap: 6px; padding: 16px 8px 10px; flex-wrap: nowrap; overflow-x: visible; min-height: 170px; }
    .card { width: 86px; min-width: 0; height: 160px; max-height: 160px; flex-shrink: 1; }
    /* Allow 2-line wrap so "SHADOW GUARD" / "BASIC GUARD" don't ellipsis-truncate */
    .card .card-name { font-size: 10px; white-space: normal; line-height: 1.05; max-height: 2.2em; overflow: hidden; }
    .card .card-power { font-size: 32px; margin-top: 1px; }
    .card .card-effect { font-size: 10px; width: 160px; padding: 6px 8px; }
    .card .card-type-label { font-size: 10px; padding: 2px 4px; }
    /* Tighter fan on small phones */
    .hand-area[data-handsize="5"] .card { margin-left: -18px; }
    .hand-area[data-handsize="6"] .card { margin-left: -30px; }
    .hand-area[data-handsize="7"] .card,
    .hand-area[data-handsize="8"] .card { margin-left: -42px; }
    .hand-area .card:hover ~ .card,
    .hand-area .card.selected ~ .card { transform: translateX(14px); }

    /* Fighter panels — compact horizontal bar, hide portraits */
    .fighter-panel { flex-direction: row; align-items: center; padding: 6px 10px; gap: 8px; border-radius: 8px; }
    .fighter-panel .portrait-small { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; }
    .fighter-panel .portrait-small img { width: 48px; height: 48px; object-fit: cover; object-position: center 20%; }
    .fighter-panel .f-name { font-size: 11px; white-space: nowrap; }
    /* HP block: stack label-free num + bar in a column so it doesn't fight
       with the hand-count sibling. The "/13" suffix already conveys the cap. */
    .fighter-panel .f-hp { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .fighter-panel .f-hp-label { display: none; }
    .fighter-panel .f-hp-num { justify-content: flex-start; gap: 3px; line-height: 1; align-items: baseline; margin-bottom: 0; }
    .fighter-panel .f-hp-num .hp-max { font-size: 9px; color: var(--text-dim); }
    /* Sit hand-count at the top of the row so it baseline-aligns with the
       HP num row, not below it where the hp-bar lives. Force one line via
       max-content basis so flex parents can't squeeze it to wrap. */
    .fighter-panel .f-hand-count {
        font-size: 10px; white-space: nowrap;
        flex: 0 0 max-content; align-self: flex-start;
        line-height: 1.2; margin-top: 1px;
        color: var(--text-dim);
    }
    .fighter-panel .f-hand-count > span { display: inline; color: #fff; font-weight: 700; }
    /* Action tally and boost are mid-fight clutter on a tiny panel — hide. */
    .fighter-panel .f-action-tally,
    .fighter-panel .f-boost { display: none; }
    .fighter-panel .status-badges { min-height: 0; gap: 3px; justify-content: flex-start; }
    .fighter-panel .status-badge { font-size: 10px; padding: 1px 4px; }
    /* Opponent card-backs: shrink so they fit in the half-width row. */
    .fighter-panel .opp-hand { flex-shrink: 1; gap: 2px; margin-top: 0; }
    .fighter-panel .opp-card-back { width: 14px; height: 20px; border-radius: 3px; }
    .fight-layout > .fighter-panel-left,
    .fight-layout > .fighter-panel-right { width: calc(50% - 4px); }

    /* Lock In — full width, big target */
    .action-bar { padding: 6px 8px; gap: 6px; }
    .action-bar .btn-gold { font-size: 16px; padding: 14px 16px; flex: 1; max-width: none; min-height: 48px; }
    .action-bar .btn-raise { font-size: 11px; padding: 10px 12px; min-height: 44px; }

    /* Stance buttons */
    .stance-btn { font-size: 12px; padding: 10px 8px; min-height: 44px; }

    /* Top bar */
    .top-bar { font-size: 11px; padding: 6px 10px; }

    /* Round history & arena */
    .round-history { font-size: 10px; padding: 3px 8px; }
    .rh-entry { width: 20px; height: 20px; }
    .arena-banner { font-size: 10px; padding: 3px 8px; height: 22px; }

    /* Pre-fight */
    .fighter-portrait { width: 130px; height: 170px; }
    .vs-text { font-size: 28px; }
    .vs-container { gap: 8px; }
    .fighter-card-pre { width: 130px; }

    /* Lobby CTAs */
    .lobby-cta { height: 120px; }
    .lobby-cta-label { font-size: 16px; letter-spacing: 3px; }

    /* Resolution overlay */
    .res-card-reveal { width: 140px; }
    .res-card-reveal .rcr-art { height: 100px; }
    .res-card-reveal .rcr-power { font-size: 24px; }
    .res-card-reveal .rcr-name { font-size: 10px; }
    .res-cards { gap: 12px; }
    .res-stances { gap: 14px; }
    .res-stance-card { padding: 10px 14px; font-size: 13px; }

    /* General */
    .screen { padding: 8px; }
    .nav-bottom { height: 52px; }
    .nav-btn { font-size: 10px; }
    .nav-btn .nav-icon { font-size: 18px; }
    .nav-btn .nav-label { font-size: 10px; }
}

/* ============================================================================
   LANDSCAPE ORIENTATION ON MOBILE
   ============================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    /* Fight screen — maximize combat area */
    .top-bar { padding: 2px 10px; font-size: 10px; }
    .fighter-panel { padding: 4px; }
    .portrait-small { width: 40px; height: 50px; }
    .portrait-small img { width: 40px; height: 50px; }
    .f-hp-bar { height: 6px; }
    .hand-area { padding: 10px 4px 6px; min-height: 130px; }
    .card { width: 72px; height: 120px; max-height: 120px; }
    .card .card-power { font-size: 18px; }
    .card .card-name { font-size: 7px; }
    .action-bar { padding: 4px 8px; }
    .round-history { display: none; }
    .host-bar { display: none; }
    .arena-banner { font-size: 10px; height: 22px; }
    #btn-lockin { padding: 8px; font-size: 12px; }

    /* Hide nav in landscape fight */
    .nav-bottom { height: 40px; }
    .nav-label { display: none; }
}

/* ============================================================================
   ARENA IFRAME MODE — Broadcast-feed layout for arena.social embed
   ----------------------------------------------------------------------------
   Arena embeds us in a narrow portrait iframe (~400-500px wide, ~700-900px tall)
   that falls in the awkward gap between phone and desktop media queries. These
   rules scope a purpose-built vertical broadcast layout under .arena-mode so
   the standalone site is unchanged.

   Design intent: a pocket-sized UFC pay-per-view. Opponent anchored at the
   top as the "threat on stage." Hand and action rail pinned to the bottom
   within thumb reach. Arena atmosphere, HP bars, round counter all readable
   at a glance. No vertical scroll to find controls.
   ============================================================================ */
.arena-mode {
    --arena-header-h: 46px;
    --arena-strip-h: 24px;
    --arena-foot-h: 108px;
    --arena-accent: var(--gold, #ff2d55);
}
.arena-mode body,
.arena-mode .screen { background: var(--bg, #0c0a0a); }
.arena-mode .screen { padding: 0; max-width: none; border: none; }

/* ---- FIGHT SCREEN (arena iframe) ---- */
@keyframes arenaPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px #ff2d55, 0 0 2px #fff inset; }
    50% { opacity: 0.55; box-shadow: 0 0 4px #ff2d55, 0 0 2px #fff inset; }
}

.arena-mode {
    --arena-header-h: 34px;
    --arena-strip-h: 20px;
}

.arena-mode #fight-screen {
    padding: 0 !important; /* override #fight-screen { padding-bottom: 20px } */
    overflow: hidden;
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
    background: url('../assets/arena/kingzli__24_Default_Arena__dark_gladiatorial_arena_interior_f_5f7f858b-36c9-469e-a6d5-ed812f1bb381_2.png') center 30%/cover no-repeat,
                var(--bg);
}
/* Lighter overlay — let the arena breathe through */
.arena-mode #fight-screen::before {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(255,45,85,0.1), transparent 50%),
        linear-gradient(180deg, rgba(6,4,8,0.5) 0%, rgba(6,4,8,0.65) 40%, rgba(6,4,8,0.88) 100%);
}

/* Compact header — just the essentials */
.arena-mode #fight-screen .top-bar {
    z-index: 4;
    height: var(--arena-header-h);
    padding: 2px 10px;
    gap: 6px;
    background: rgba(0,0,0,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.arena-mode #fight-screen .top-bar .logo { display: none; }
.arena-mode #fight-screen .top-bar .info {
    font-family: var(--font-display, 'Bebas Neue');
    font-size: 12px; letter-spacing: 2.5px; color: var(--gold, #ffc857);
    position: relative; padding-left: 12px;
}
.arena-mode #fight-screen .top-bar .info::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    background: #ff2d55; transform: translateY(-50%);
    box-shadow: 0 0 8px #ff2d55;
    animation: arenaPulse 1.4s ease-in-out infinite;
}
.arena-mode #fight-screen .fight-topbar-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.arena-mode #fight-screen .wager,
.arena-mode #fight-screen .fight-balance {
    font-family: var(--font-mono, 'JetBrains Mono');
    font-size: 9px; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}
.arena-mode #fight-screen .wager { background: rgba(255,180,0,0.1); color: #ffc857; border: 1px solid rgba(255,180,0,0.25); }
.arena-mode #fight-screen .fight-balance { background: rgba(0,0,0,0.4); color: #9bffcf; border: 1px solid rgba(155,255,207,0.15); }
.arena-mode #fight-screen .wager-cap { display: none; }

/* Arena condition strip */
.arena-mode #fight-screen .arena-banner {
    height: var(--arena-strip-h);
    align-items: center; justify-content: center;
    font-family: var(--font-mono, 'JetBrains Mono');
    font-size: 10px; letter-spacing: 2px; padding: 0 10px;
    border-top: 1px solid rgba(255,45,85,0.08);
    border-bottom: 1px solid rgba(255,45,85,0.08);
    color: #ffd27a; text-transform: uppercase; flex-shrink: 0;
}

/* Fight body — 2-column grid: scoreboard row, cards center, controls bottom */
.arena-mode #fight-screen .fight-layout {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
        "you    opp"
        "hand   hand"
        "stance stance"
        "action action";
    gap: 4px 6px;
    padding: 6px 8px 6px;
    position: relative;
    z-index: 3;
    overflow: hidden;
}
.arena-mode #fight-screen .fighter-panel-left  { grid-area: you; }
.arena-mode #fight-screen .fighter-panel-right { grid-area: opp; }
.arena-mode #fight-screen .fight-center { grid-column: 1 / -1; display: contents; }

/* Shared fighter-panel base — compact scoreboard cards, side by side */
.arena-mode #fight-screen .fighter-panel {
    display: grid;
    grid-template-columns: clamp(60px, 12vw, 84px) 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px; row-gap: 2px;
    align-items: center;
    padding: 6px 10px 6px 6px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.06);
}
.arena-mode #fight-screen .fighter-panel .portrait-small {
    grid-row: 1 / span 2; align-self: center;
    width: 100%; height: clamp(74px, 15vh, 108px); border-radius: 7px; overflow: hidden;
}
.arena-mode #fight-screen .fighter-panel .portrait-small img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block;
}
.arena-mode #fight-screen .fighter-panel .f-name {
    font-family: var(--font-display); color: #fff;
    font-size: clamp(12px, 2.5vw, 16px); letter-spacing: 1.5px;
    line-height: 1; text-shadow: 0 1px 0 rgba(0,0,0,0.8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    align-self: end;
}
.arena-mode #fight-screen .fighter-panel .f-title { display: none; }
.arena-mode #fight-screen .fighter-panel .f-hp {
    grid-column: 2; align-self: start;
    display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center;
    margin: 0; padding: 0;
}
.arena-mode #fight-screen .fighter-panel .f-hp-label { display: none; }
.arena-mode #fight-screen .fighter-panel .hp-bar-container {
    height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08);
    overflow: hidden; min-width: 0;
}
.arena-mode #fight-screen .fighter-panel .hp-bar {
    height: 100%; border-radius: 3px; transition: width 0.3s ease;
}
.arena-mode #fight-screen .fighter-panel .f-hp-num {
    font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
}
.arena-mode #fight-screen .fighter-panel .f-hp-num .hp-max { color: #666; font-weight: 400; font-size: 9px; }
.arena-mode #fight-screen .fighter-panel .f-hand-count,
.arena-mode #fight-screen .fighter-panel .f-action-tally,
.arena-mode #fight-screen .fighter-panel .opp-hand,
.arena-mode #fight-screen .fighter-panel #f-p1-boost { display: none; }
.arena-mode #fight-screen .fighter-panel .status-badges {
    grid-column: 1 / -1; min-height: 0; gap: 3px;
    justify-content: flex-start; margin: 0; padding: 0;
}
.arena-mode #fight-screen .fighter-panel .status-badge { font-size: 8px; padding: 1px 4px; border-radius: 3px; }

/* ---- YOU (left scoreboard card) ---- */
.arena-mode #fight-screen .fighter-panel-left {
    border-left: 3px solid #4dd4ff;
    background: linear-gradient(135deg, rgba(8,22,32,0.85), rgba(10,10,14,0.6));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(77,212,255,0.08);
}
.arena-mode #fight-screen .fighter-panel-left .portrait-small {
    box-shadow: 0 0 0 1.5px rgba(77,212,255,0.35), 0 4px 12px rgba(0,0,0,0.7);
}
.arena-mode #fight-screen .fighter-panel-left .hp-bar {
    background: linear-gradient(90deg, #4dd4ff, #8fe8ff);
    box-shadow: 0 0 8px rgba(77,212,255,0.6);
}

/* ---- OPPONENT (right scoreboard card) ---- */
.arena-mode #fight-screen .fighter-panel-right {
    border-left: 3px solid #ff2d55;
    background: linear-gradient(135deg, rgba(50,10,22,0.85), rgba(18,8,12,0.6));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,45,85,0.08);
}
.arena-mode #fight-screen .fighter-panel-right .portrait-small {
    box-shadow: 0 0 0 1.5px rgba(255,45,85,0.4), 0 4px 12px rgba(0,0,0,0.7);
}
.arena-mode #fight-screen .fighter-panel-right .hp-bar {
    background: linear-gradient(90deg, #ff2d55, #ff7a8e);
    box-shadow: 0 0 10px rgba(255,45,85,0.6);
}

/* Hand area — horizontal scroll, 3 cards visible + peek of next */
.arena-mode #fight-screen .hand-area {
    grid-area: hand; grid-column: 1 / -1;
    min-height: 0; position: relative;
    padding: 8px 0 6px 10px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    align-items: stretch; justify-content: flex-start;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 10px;
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(ellipse at 50% 55%, rgba(255,200,87,0.04), transparent 55%);
    scrollbar-width: none; /* Firefox */
}
/* Spacer after last card so it can scroll fully into view */
.arena-mode #fight-screen .hand-area::after {
    content: '';
    min-width: 10px;
    flex-shrink: 0;
}
/* Scroll arrow buttons — positioned in fight-layout, over the hand area */
.arena-hand-arrow {
    position: absolute;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,200,87,0.4);
    background: rgba(10,8,12,0.85);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: var(--gold, #ffc857);
    font-size: 16px; line-height: 30px; text-align: center;
    cursor: pointer;
    z-index: 12;
    transition: opacity 0.2s ease, background 0.15s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    user-select: none; -webkit-user-select: none;
    pointer-events: auto;
}
.arena-hand-arrow:active { background: rgba(40,28,10,0.95); }
.arena-hand-arrow.left { left: 4px; }
.arena-hand-arrow.right { right: 4px; }
.arena-hand-arrow.hidden { opacity: 0.25; }
.arena-mode #fight-screen .hand-area::-webkit-scrollbar { display: none; }
.arena-mode #fight-screen .hand-area .card {
    /* Show 3 cards + peek of 4th to signal scroll.
       Height: viewport minus fixed chrome (header 34 + panels ~120×2 + stance 36 +
       action 42 + gaps ~40 ≈ 390px). Cards fill the remainder. */
    width: calc(31% - 6px);
    min-width: calc(31% - 6px);
    flex: 0 0 auto;
    height: calc(100dvh - 400px);
    min-height: 120px;
    max-height: 300px;
    border-radius: 10px;
    scroll-snap-align: start;
}
.arena-mode #fight-screen .hand-area .card .card-inner { border-radius: inherit; }
.arena-mode #fight-screen .hand-area .card .card-name { font-size: 12px; letter-spacing: 0.5px; }
.arena-mode #fight-screen .hand-area .card .card-power { font-size: clamp(32px, 7vh, 56px); margin-top: 0; line-height: 1; }
.arena-mode #fight-screen .hand-area .card .card-type-label { font-size: 10px; padding: 3px 7px; letter-spacing: 1.5px; }
.arena-mode #fight-screen .hand-area .card .card-effect { width: 220px; font-size: 11px; padding: 7px 10px; }
/* No fan overlap — cards scroll freely */
.arena-mode #fight-screen .hand-area[data-handsize="5"] .card,
.arena-mode #fight-screen .hand-area[data-handsize="6"] .card,
.arena-mode #fight-screen .hand-area[data-handsize="7"] .card,
.arena-mode #fight-screen .hand-area[data-handsize="8"] .card { margin-left: 0; }
/* Cards: type-colored underglow */
.arena-mode #fight-screen .hand-area .card {
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
    transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), filter 0.2s ease, box-shadow 0.2s ease;
}
.arena-mode #fight-screen .hand-area .card.type-red {
    filter: drop-shadow(0 4px 14px rgba(255,60,60,0.3));
}
.arena-mode #fight-screen .hand-area .card.type-cyan {
    filter: drop-shadow(0 4px 14px rgba(77,212,255,0.25));
}
.arena-mode #fight-screen .hand-area .card.type-purple {
    filter: drop-shadow(0 4px 14px rgba(168,85,247,0.3));
}
.arena-mode #fight-screen .hand-area .card:hover,
.arena-mode #fight-screen .hand-area .card:active {
    transform: scale(1.04); z-index: 40;
    filter: drop-shadow(0 8px 24px rgba(255,200,87,0.3)) brightness(1.08);
}
.arena-mode #fight-screen .hand-area .card.selected {
    transform: scale(1.06); z-index: 50;
    box-shadow: 0 0 0 3px var(--gold, #ffc857), 0 0 32px rgba(255,200,87,0.5), 0 8px 24px rgba(0,0,0,0.7);
    filter: drop-shadow(0 0 14px rgba(255,200,87,0.5)) brightness(1.1);
}
.arena-mode #fight-screen .hand-area:empty::after { font-size: 11px; letter-spacing: 1.5px; }
/* Disable sibling shift — no overlap in scroll mode */
.arena-mode #fight-screen .hand-area .card:hover ~ .card,
.arena-mode #fight-screen .hand-area .card.selected ~ .card { transform: none; }
.arena-mode #fight-screen .hand-peek { top: -6px; bottom: auto; font-size: 10px; padding: 5px 9px; border-radius: 6px; background: rgba(8,6,10,0.95); border: 1px solid rgba(255,255,255,0.15); max-width: 260px; white-space: normal; }

/* Stance + action — grid rows at the bottom, not absolute */
.arena-mode #fight-screen .stance-area {
    grid-area: stance; grid-column: 1 / -1;
    display: flex; gap: 4px; padding: 0;
}
.arena-mode #fight-screen .stance-btn {
    flex: 1; padding: 4px 2px; min-height: 0; height: 32px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(16,12,16,0.92);
    display: flex; align-items: center; justify-content: center; gap: 0;
    transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.arena-mode #fight-screen .stance-btn .stance-label {
    font-family: var(--font-display); font-size: 11px; letter-spacing: 1.5px; color: #ccc;
}
.arena-mode #fight-screen .stance-btn .stance-hint { display: none; }
.arena-mode #fight-screen .stance-btn:active { transform: scale(0.96); }
.arena-mode #fight-screen .stance-btn.selected-engage,
.arena-mode #fight-screen .stance-btn.selected-disengage,
.arena-mode #fight-screen .stance-btn.selected-chase {
    border-color: var(--gold, #ffc857);
    box-shadow: 0 0 0 1px var(--gold, #ffc857), 0 0 12px rgba(255,200,87,0.35);
    background: linear-gradient(180deg, rgba(40,28,10,0.95), rgba(20,14,6,0.95));
}
.arena-mode #fight-screen .stance-btn.selected-engage .stance-label,
.arena-mode #fight-screen .stance-btn.selected-disengage .stance-label,
.arena-mode #fight-screen .stance-btn.selected-chase .stance-label { color: var(--gold, #ffc857); }

/* Action bar: LOCK IN as the full-width hero, RAISE tucked small */
.arena-mode #fight-screen .action-bar {
    grid-area: action; grid-column: 1 / -1;
    display: flex; gap: 5px; padding: 0;
}
.arena-mode #fight-screen .action-bar .btn-raise {
    font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px;
    padding: 0 10px; height: 36px; min-height: 0;
    border-radius: 5px; background: rgba(30,14,8,0.9);
    border: 1px solid rgba(255,140,60,0.3); color: #ffb347; white-space: nowrap;
    flex: 0 0 auto;
}
.arena-mode #fight-screen .action-bar .btn-gold,
.arena-mode #fight-screen .action-bar #btn-lockin {
    font-family: var(--font-display); font-size: 15px; letter-spacing: 3px;
    height: 38px; min-height: 0;
    border-radius: 6px; flex: 1; max-width: none;
    background: linear-gradient(180deg, #ffe08a 0%, #ffc847 30%, #d9982a 70%, #b87a1e 100%);
    color: #1a0e04; border: 1px solid rgba(255,215,120,0.7);
    box-shadow: 0 6px 20px rgba(255,200,87,0.5), 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.4) inset;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.arena-mode #fight-screen .action-bar #btn-lockin:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 3px 12px rgba(255,200,87,0.4), 0 0 0 1px rgba(0,0,0,0.3) inset;
}
.arena-mode #fight-screen .action-bar #btn-lockin:disabled {
    background: rgba(50,40,26,0.7);
    color: rgba(200,180,150,0.4);
    border-color: rgba(255,215,120,0.15);
    box-shadow: none; text-shadow: none;
}

/* Round history + host bar */
.arena-mode #fight-screen .round-history {
    display: flex; justify-content: center; gap: 3px; padding: 2px 10px 0;
    background: transparent; font-size: 9px; min-height: 0;
    position: absolute; top: calc(var(--arena-header-h) + var(--arena-strip-h) + 4px);
    left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none;
}
.arena-mode #fight-screen .round-history .rh-entry { width: 14px; height: 14px; font-size: 8px; }
.arena-mode #fight-screen .host-bar,
.arena-mode #fight-screen .host-bar-flex { display: none; }
/* Tutorial hints eat vertical space in the iframe — hide them */
.arena-mode .th-hint { display: none !important; }
/* Nav already hidden during fights/campaign by showScreen() JS (line 5163).
   No CSS override needed — nav shows in lobby, hides in fight/campaign. */
/* Emote wheel overlaps action rail in tight iframe — hide */
.arena-mode .emote-toggle,
.arena-mode .emote-wheel-container { display: none !important; }
/* Gauntlet wave badge — tighten */
.arena-mode #gauntlet-wave-display { font-size: 11px !important; padding: 1px 6px !important; }

/* ---- PRE-FIGHT SCREEN (arena iframe) ---- */
.arena-mode #pre-fight {
    padding: 14px 14px 18px;
    gap: 10px;
    overflow-y: auto;
    background: radial-gradient(circle at 50% 20%, rgba(255,45,85,0.12), transparent 55%),
                var(--bg);
}
.arena-mode #pre-fight .prefight-title {
    font-size: 28px;
    letter-spacing: 6px;
    margin: 8px 0 0;
}
.arena-mode #pre-fight .prefight-subtitle {
    font-size: 10px;
    letter-spacing: 4px;
    margin-bottom: 6px;
}
.arena-mode #pre-fight .vs-container {
    gap: 8px;
    padding: 4px 0;
    flex-wrap: nowrap;
}
.arena-mode #pre-fight .fighter-card-pre {
    width: 42%;
    min-width: 0;
    flex: 1 1 42%;
}
.arena-mode #pre-fight .fighter-portrait {
    width: 100%;
    height: 0;
    padding-bottom: 130%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.arena-mode #pre-fight .fighter-portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}
.arena-mode #pre-fight .fighter-name {
    font-size: 14px;
    letter-spacing: 1.5px;
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arena-mode #pre-fight .fighter-meta { font-size: 10px; letter-spacing: 0.5px; }
.arena-mode #pre-fight .vs-text {
    font-size: 32px;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(255,45,85,0.6);
    flex: 0 0 auto;
}
.arena-mode #pre-fight .arena-info {
    font-size: 10px;
    padding: 8px 10px;
    letter-spacing: 1px;
}
.arena-mode #pre-fight .wager-info {
    font-size: 13px;
    padding: 10px;
    letter-spacing: 2px;
}
.arena-mode #pre-fight .enhance-panel { padding: 10px; gap: 6px; }
.arena-mode #pre-fight .enhance-panel-title { font-size: 10px; line-height: 1.35; }
.arena-mode #pre-fight .enhance-btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
}
.arena-mode #pre-fight .enhance-btn {
    font-size: 10px;
    padding: 8px 4px;
    min-height: 40px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.arena-mode #pre-fight .enhance-balance { font-size: 10px; }
.arena-mode #pre-fight .host-intro {
    padding: 8px 10px;
    gap: 8px;
}
.arena-mode #pre-fight .host-intro .buffster-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}
.arena-mode #pre-fight .host-intro .host-text { font-size: 11px; line-height: 1.4; }
.arena-mode #pre-fight .host-intro .host-name { font-size: 10px; }
.arena-mode #pre-fight > .btn-gold {
    font-size: 17px;
    padding: 14px;
    letter-spacing: 3px;
    margin-top: auto;
    min-height: 52px;
    box-shadow: 0 6px 20px rgba(255,45,85,0.45);
}

/* ---- LOBBY SCREEN (arena iframe) ---- */
.arena-mode #lobby-screen { padding: 0; }
.arena-mode .lobby-logo { height: 48px; margin: -6px 0; }
.arena-mode .lobby-season-strip {
    padding: 4px 12px;
    height: 32px;
    min-height: 0;
    flex-shrink: 0;
}
.arena-mode .lobby-season-title { font-size: 12px; letter-spacing: 2.5px; }
.arena-mode .lobby-season-quote { font-size: 10px; }
.arena-mode .lobby-tabs {
    padding: 0 8px;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg, var(--bg), rgba(12,10,10,0.9));
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.arena-mode .lobby-tabs::after { display: none; }
.arena-mode .lobby-tab {
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 10px 8px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}
.arena-mode .lobby-content { padding: 10px; }
.arena-mode .lobby-cta-card {
    min-height: 140px !important;
    padding: 14px !important;
}
.arena-mode .lobby-cta-card h3 { font-size: 20px; letter-spacing: 2px; }
.arena-mode .lobby-cta-card p { font-size: 11px; }

/* Buy Energy floating button — reposition so it doesn't eat the tab bar */
.arena-mode .buy-energy-btn,
.arena-mode #guest-wallet-btn { top: auto; bottom: 10px; right: 10px; width: auto; height: auto; font-size: 11px; padding: 8px 12px; }

/* Hide top-nav / wallet chrome — Arena already shows wallet info */
.arena-mode .top-bar .wallet-ui { display: none !important; }

/* ---- RESULT / POST-FIGHT (arena iframe) ---- */
.arena-mode #result-screen { padding: 16px; overflow-y: auto; }
.arena-mode #result-screen .result-title { font-size: 40px; letter-spacing: 4px; }
.arena-mode #result-screen .result-subtitle { font-size: 12px; letter-spacing: 2px; }

/* ---- FIGHT SCREEN — tall iframe (>860h) ---- */
@media (min-height: 860px) {
    .arena-mode #fight-screen .hand-area .card { width: 100px; }
    .arena-mode #fight-screen .hand-area .card .card-power { font-size: 38px; }
    .arena-mode #fight-screen .fighter-panel .portrait-small { width: 56px; height: 68px; }
}
/* ---- FIGHT SCREEN — short iframe (<640h) ---- */
@media (max-height: 640px) {
    .arena-mode { --arena-header-h: 30px; }
    .arena-mode #fight-screen .fighter-panel { padding: 4px 6px 4px 4px; column-gap: 6px; }
    .arena-mode #fight-screen .fighter-panel .portrait-small { width: 40px; height: 48px; }
    .arena-mode #fight-screen .fighter-panel .f-name { font-size: 11px; }
    .arena-mode #fight-screen .fighter-panel .f-hp-num { font-size: 10px; }
    .arena-mode #fight-screen .hand-area .card { width: 76px; min-height: 100px; }
    .arena-mode #fight-screen .hand-area .card .card-power { font-size: 26px; }
    .arena-mode #fight-screen .stance-btn { height: 28px; }
    .arena-mode #fight-screen .stance-btn .stance-label { font-size: 10px; }
}
/* ---- FIGHT SCREEN — narrow iframe (<420w) ---- */
@media (max-width: 420px) {
    .arena-mode #fight-screen .fighter-panel { column-gap: 6px; padding: 4px 5px 4px 4px; }
    .arena-mode #fight-screen .fighter-panel .f-hp-num { font-size: 10px; }
}