/* FAVOR — Melee cinematic CSS (Skylar's Arena/Forge/Clash/Podium coronation).
   Split out of testrealm's style.css when the GAME was reset to testrealm2's
   build (2026-07-10). testrealm2 ships its own older .ms-* melee splash that
   shares 5 class names (.ms-hint/.ms-name/.ms-portrait/.ms-power/.ms-prestige),
   so it can't just be folded back in. tools/melee-preview.html loads this AFTER
   style.css so Skylar's melee.js gets its full styling. Fold into the game CSS
   when the melee system is merged in. Self-contained (all @keyframes below). */

/* ═══ MELEE — the end-of-act coronation cinematic ══════════════════════
   A staged reveal: banner slam → the field clashes (portraits land, Power
   bars charge) → the three who earned Prestige ascend a rising podium, the
   champion crowned in gold. Tap skips to the result; tap again to continue.
   Everything animates on transform/opacity so it stays smooth on phones.   */

#meleeSplash {
    position: fixed;
    inset: 0;
    z-index: 10600; /* the act's big moment — nothing sits on top of the Melee */
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 120% 80% at 50% 118%, rgba(139,26,26,0.28), transparent 60%),
        radial-gradient(ellipse at center, rgba(34,16,7,0.90), rgba(6,3,1,0.985));
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#meleeSplash.active { display: flex; animation: msFade 0.35s ease; }

/* Vignette + a faint heraldic light from above the throne */
#meleeSplash::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 55% at 50% -8%, rgba(201,168,76,0.16), transparent 55%);
    pointer-events: none;
}

.ms-stage {
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.2dvh, 22px);
    /* top padding reserves the herald + banner zone — the podium (with its
       crown and rays) is fenced BELOW it on every screen height */
    padding: clamp(100px, 24dvh, 150px) 3vw 2dvh;
}

/* ── Embers drifting up through the whole scene ─────────────────────── */
.ms-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.ms-ember {
    position: absolute;
    bottom: -12px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffdf9e, rgba(201,168,76,0.15));
    box-shadow: 0 0 6px rgba(255,201,110,0.8);
    opacity: 0;
    animation: msEmber linear infinite;
}

/* ── Full-screen flash (fires on the champion reveal) ───────────────── */
.ms-flash {
    position: absolute; inset: 0; z-index: 40;
    background: radial-gradient(circle at 50% 42%, rgba(255,240,200,0.9), rgba(255,210,120,0.25) 40%, transparent 70%);
    opacity: 0; pointer-events: none;
}
.ms-flash.go { animation: msFlash 0.66s ease-out; }

/* ── The banner: slams center, then perches at the top ──────────────── */
.ms-title {
    position: absolute; left: 0; right: 0; top: 38%; z-index: 20;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    transition: top 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
    transform: translateY(-50%) scale(1.18);
    pointer-events: none;
}
/* Perched: pinned near the very top, out of the podium's flow entirely —
   the champion's crown can never collide with the banner again. */
.ms-title.perched { top: clamp(20px, 5dvh, 36px); transform: translateY(0) scale(0.6); opacity: 0.96; }
.ms-title-main {
    font-family: 'Cinzel', serif; font-weight: 900;
    letter-spacing: 0.18em;
    font-size: clamp(26px, 8.5dvh, 58px);
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff4d2 0%, #e8d48b 34%, #c9a84c 62%, #8b6914 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7)) drop-shadow(0 0 26px rgba(201,168,76,0.5));
    display: flex; align-items: center; gap: 0.4em;
    animation: msBannerIn 0.62s cubic-bezier(0.15,1.5,0.35,1);
}
.ms-title-main .ms-sword { color: #d9b85e; -webkit-text-fill-color: #d9b85e; filter: drop-shadow(0 0 10px rgba(201,168,76,0.6)); }
.ms-title-act {
    font-family: 'Cinzel', serif; font-weight: 700;
    letter-spacing: 0.5em; text-indent: 0.5em;
    font-size: clamp(10px, 1.9dvh, 14px);
    color: var(--gold-dark);
    text-transform: uppercase;
    opacity: 0; animation: msFadeUp 0.6s ease 0.28s forwards;
}
/* Shock-ring behind the banner slam */
.ms-shockwave {
    position: absolute; top: 42%; left: 50%; z-index: 15;
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border: 2px solid rgba(201,168,76,0.8);
    border-radius: 50%;
    opacity: 0; pointer-events: none;
    animation: msShock 0.7s ease-out 0.05s;
}

/* ── The podium ─────────────────────────────────────────────────────── */
.ms-podium {
    position: relative; z-index: 10;
    display: flex; align-items: flex-end; justify-content: center;
    /* wide enough that 2nd/3rd boards never clip the champion's laurels */
    gap: clamp(30px, 5vw, 62px);
}
/* Warm arena-floor glow beneath the plinths */
.ms-podium::after {
    content: ''; position: absolute; left: 50%; bottom: -6px;
    width: 118%; height: 46px; transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(201,168,76,0.30), transparent 70%);
    filter: blur(3px); pointer-events: none; z-index: -1;
}

.ms-tier {
    display: flex; flex-direction: column; align-items: center;
    opacity: 0; transform: translateY(46px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1.05,0.3,1);
    width: clamp(88px, 15vw, 132px);
}
.ms-tier.show { opacity: 1; transform: none; }

/* Fighters standing on a tier (usually one; ties stack side-by-side) */
.ms-fighters { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 8px; }

/* A tie: the tier (and its plinth, width:100%) GROWS to seat every member
   at full size instead of cramming them into a one-board column. If the
   grown row overflows the stage, fitPodium() scales the whole podium. */
.ms-tier.multi, .ms-tier.champ.multi { width: auto; }
.ms-tier.multi .ms-fighters { gap: 10px; }
.ms-tier.multi .ms-fighter { width: auto; }
.ms-tier.multi .ms-name { max-width: clamp(84px, 14vw, 128px); }
.ms-tier.champ.multi .ms-name { max-width: clamp(110px, 20vw, 168px); }

.ms-fighter { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; }

.ms-portrait-wrap { position: relative; }
.ms-portrait {
    display: block; position: relative; z-index: 1;
    width: clamp(84px, 14vw, 128px); aspect-ratio: 800 / 504; height: auto;
    border-radius: 8px; object-fit: cover;
    border: 2px solid rgba(201,168,76,0.5);
    box-shadow: 0 6px 16px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.4);
    background: #1a0f07;
}
/* Champion portrait: bigger, gold-rimmed, radiant */
.ms-tier.champ { width: clamp(96px, 17vw, 158px); }
.ms-tier.champ .ms-portrait {
    width: clamp(110px, 20vw, 168px); aspect-ratio: 800 / 504; height: auto;
    border-color: #ffe9ad;
    box-shadow: 0 0 0 2px rgba(255,233,173,0.5), 0 0 34px rgba(201,168,76,0.75), 0 8px 22px rgba(0,0,0,0.65);
}
/* A light sweep across the champion portrait */
.ms-tier.champ .ms-portrait-wrap::after {
    content: ''; position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 62%);
    background-size: 260% 100%; background-position: 180% 0;
    pointer-events: none;
}
.ms-tier.champ.lit .ms-portrait-wrap::after { animation: msSweep 1s ease-out 0.15s; }
/* Champion portrait pops as the crown lands */
.ms-tier.champ.lit .ms-portrait { animation: msChampPunch 0.5s cubic-bezier(0.2,1.5,0.35,1) 0.1s; }
@keyframes msChampPunch { 0% { transform: scale(0.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Radiant light-rays fanning out behind the champion */
.ms-rays {
    position: absolute; left: 50%; top: 50%;
    width: 215%; height: 215%; transform: translate(-50%, -50%);
    z-index: 0; pointer-events: none; opacity: 0;
    transition: opacity 0.6s ease;
    background: repeating-conic-gradient(from 0deg,
        rgba(255,233,173,0.55) 0deg 5deg, transparent 5deg 17deg);
    -webkit-mask: radial-gradient(circle, #000 26%, rgba(0,0,0,0.35) 46%, transparent 64%);
            mask: radial-gradient(circle, #000 26%, rgba(0,0,0,0.35) 46%, transparent 64%);
    animation: msRaysSpin 18s linear infinite;
}
.ms-tier.champ.lit .ms-rays { opacity: 0.8; }
@keyframes msRaysSpin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }

/* "CHAMPION" tag under the champion's name */
.ms-champ-label {
    font-family: 'Cinzel', serif; font-weight: 900;
    letter-spacing: 0.22em; text-indent: 0.22em;
    font-size: clamp(9px, 1.5dvh, 12px); text-transform: uppercase;
    background: linear-gradient(180deg, #fff4d2, #e8d48b 55%, #c9a84c);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 8px rgba(201,168,76,0.6));
    opacity: 0; transform: translateY(-4px) scale(0.9); margin-top: -1px;
}
.ms-tier.champ.lit .ms-champ-label { animation: msFadeUp 0.5s ease 0.25s forwards; }

/* Crown descends onto the champion */
.ms-crown {
    position: absolute; left: 50%; top: -18px; transform: translate(-50%, -12px) scale(0.6);
    width: clamp(40px, 6vw, 60px); height: auto;
    opacity: 0; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(255,206,110,0.7));
    z-index: 3;
}
.ms-tier.champ.lit .ms-crown { animation: msCrown 0.6s cubic-bezier(0.2,1.6,0.35,1) 0.2s forwards; }

/* Laurels flanking the champion */
.ms-laurel {
    position: absolute; top: 50%; transform: translateY(-50%) scale(0.5);
    width: clamp(22px, 3.4vw, 34px); height: auto; opacity: 0;
    filter: drop-shadow(0 0 6px rgba(201,168,76,0.5));
}
.ms-laurel.left  { right: 100%; margin-right: 2px; }
.ms-laurel.right { left: 100%;  margin-left: 2px; transform: translateY(-50%) scale(-0.5, 0.5); }
.ms-tier.champ.lit .ms-laurel.left  { animation: msLaurelL 0.5s ease-out 0.35s forwards; }
.ms-tier.champ.lit .ms-laurel.right { animation: msLaurelR 0.5s ease-out 0.35s forwards; }

.ms-name {
    font-family: 'Cinzel', serif; font-weight: 700;
    font-size: clamp(11px, 1.7dvh, 14px);
    color: var(--gold); text-align: center;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-tier.champ .ms-name { color: #ffe9ad; font-size: clamp(13px, 2.1dvh, 17px); text-shadow: 0 0 12px rgba(201,168,76,0.55); }

/* Power readout + charging bar */
.ms-power { display: flex; align-items: center; gap: 4px; }
.ms-power img { width: clamp(13px, 1.9dvh, 17px); height: clamp(13px, 1.9dvh, 17px); }
.ms-power b {
    font-family: 'Cinzel', serif; font-weight: 900;
    font-size: clamp(14px, 2.1dvh, 18px);
    color: #ffd97a; min-width: 1.4em; text-align: left;
    font-variant-numeric: tabular-nums;
}
/* champion keeps a size floor; the MATERIAL comes from the power tier —
   tiers never change size, only substance */
.ms-tier.champ .ms-power b { font-size: clamp(17px, 2.7dvh, 22px); }
/* (meter bars removed — the power number and the badged card row carry the count) */

/* Prestige stamp — the reward for a podium finish */
.ms-prestige {
    margin-top: 5px;
    font-family: 'Cinzel', serif; font-weight: 700;
    font-size: clamp(9px, 1.5dvh, 12px);
    letter-spacing: 0.06em;
    color: #ffcf6b;
    padding: 2px 9px; border-radius: 11px;
    border: 1px solid rgba(201,168,76,0.45);
    background: rgba(201,168,76,0.10);
    opacity: 0; transform: scale(0.7);
}
.ms-tier.show .ms-prestige { animation: msStamp 0.42s cubic-bezier(0.2,1.6,0.35,1) 0.45s forwards; }
.ms-tier.champ .ms-prestige { color: #fff1c4; font-size: clamp(11px, 1.8dvh, 14px); border-color: #ffe9ad; background: rgba(232,212,139,0.16); }

/* The plinth each tier stands on — numeral carved in the face */
.ms-plinth {
    position: relative; width: 100%;
    border-radius: 5px 5px 3px 3px;
    background: linear-gradient(180deg, #4a2f18, #2a1a10);
    box-shadow: inset 0 2px 0 rgba(201,168,76,0.28), inset 0 0 22px rgba(0,0,0,0.55), 0 5px 14px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
}
.ms-plinth::before {
    content: ''; position: absolute; inset: 3px; border-radius: 3px;
    border: 1px solid rgba(201,168,76,0.18); pointer-events: none;
}
.ms-numeral {
    font-family: 'Cinzel', serif; font-weight: 900;
    font-size: clamp(20px, 4dvh, 34px);
    color: rgba(201,168,76,0.45);
    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
/* Medal metals: GOLD champion, SILVER second, BRONZE third */
.ms-tier.p-center .ms-plinth {
    height: clamp(50px, 12dvh, 116px);
    background: linear-gradient(180deg, #a87f24 0%, #7a5c16 40%, #4a3408 100%);
    box-shadow: inset 0 2px 0 rgba(255,238,180,0.65), inset 0 0 26px rgba(0,0,0,0.45), 0 6px 20px rgba(0,0,0,0.55), 0 0 18px rgba(201,168,76,0.3);
}
.ms-tier.p-center .ms-plinth::before { border-color: rgba(255,233,173,0.35); }
.ms-tier.p-center .ms-numeral { color: #ffe9ad; text-shadow: 0 0 14px rgba(201,168,76,0.8); }
.ms-tier.p-left .ms-plinth {
    height: clamp(38px, 9dvh, 86px);
    background: linear-gradient(180deg, #9aa2ad 0%, #666e79 40%, #363c44 100%);
    box-shadow: inset 0 2px 0 rgba(235,240,246,0.6), inset 0 0 22px rgba(0,0,0,0.45), 0 5px 14px rgba(0,0,0,0.5);
}
.ms-tier.p-left .ms-plinth::before { border-color: rgba(226,232,240,0.3); }
.ms-tier.p-left .ms-numeral { color: #e6ebf2; text-shadow: 0 0 10px rgba(180,195,210,0.6); }
.ms-tier.p-right .ms-plinth {
    height: clamp(28px, 6.5dvh, 62px);
    background: linear-gradient(180deg, #9c6234 0%, #6e4220 40%, #3a2210 100%);
    box-shadow: inset 0 2px 0 rgba(240,190,140,0.55), inset 0 0 20px rgba(0,0,0,0.45), 0 5px 14px rgba(0,0,0,0.5);
}
.ms-tier.p-right .ms-plinth::before { border-color: rgba(224,168,120,0.3); }
.ms-tier.p-right .ms-numeral { color: #eab687; text-shadow: 0 0 10px rgba(200,130,70,0.6); }

/* ── Also-rans: 4th/5th stand at the RIGHT side of the throne room —
   keeping the bottom clear so the podium, herald and banner never crowd
   each other on short screens. ─────────────────────────────────────── */
.ms-alsoran {
    position: absolute; right: 12px; /* runtime-centered in the right gutter */ top: 50%;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(8px, 2.2dvh, 18px);
    z-index: 10;
    opacity: 0; transform: translateY(-50%) translateX(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.ms-alsoran.show { opacity: 0.82; transform: translateY(-50%); }
.ms-ar {
    display: flex; flex-direction: column; align-items: center; gap: 3px; width: clamp(52px, 8vw, 68px);
}
/* board + slider-ring share a positioned wrap sized to the board itself,
   so the ring's %-track geometry stays true (the board is wider than .ms-ar) */
.ms-ar-wrap { position: relative; width: clamp(70px, 11vw, 100px); filter: saturate(0.7) brightness(0.82); }
.ms-ar-wrap img:not(.ms-ring) {
    display: block; width: 100%; aspect-ratio: 800 / 504; height: auto;
    border-radius: 6px; object-fit: cover;
    border: 1px solid rgba(201,168,76,0.3);
}
.ms-ar-place { font-family: 'Cinzel', serif; font-size: 10px; color: var(--gold-dark); letter-spacing: 0.05em; }
.ms-ar-name { font-family: 'Cinzel', serif; font-size: 11px; color: rgba(201,168,76,0.8); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-ar-power { display: flex; align-items: center; gap: 3px; }
.ms-ar-power img { width: 12px; height: 12px; border: 0; border-radius: 0; filter: none; }
.ms-ar-power b { font-family: 'Cinzel', serif; font-size: 12px; color: #d9b85e; }

.ms-hint {
    /* In the flow (not pinned) so it never collides with the also-ran row on
       short landscape phones — it simply trails the podium. */
    margin-top: clamp(2px, 1.4dvh, 12px);
    text-align: center; z-index: 30;
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold-dark); opacity: 0;
}
.ms-hint.show { animation: msHint 2.2s ease-in-out infinite; }

/* ── ARENA · FORGE · CLASH (the battle before the podium) ───────────── */
/* An absolute overlay so it shares the stage with the podium underneath;
   at the Clash it fades out and the podium rises in its place. */
.ms-arena {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(8px, 2vw, 26px);
    padding-top: clamp(46px, 12dvh, 96px);   /* clear the perched banner */
    transition: opacity 0.45s ease;
}
.ms-arena.gone { opacity: 0; pointer-events: none; }

.ms-combatant {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    width: clamp(90px, 15.3vw, 140px);
    opacity: 0; transform: translateY(22px) scale(0.9);
    transition: transform 0.5s cubic-bezier(0.16,1.05,0.3,1), opacity 0.4s ease, filter 0.4s ease;
}
.ms-combatant.in { opacity: 1; transform: none; }
/* One fighter forges at a time — the stage lights them, rests the others.
   Locked fighters keep a readable afterglow so their totals stay legible. */
.ms-arena.spot .ms-combatant.in { opacity: 0.35; filter: saturate(0.5) brightness(0.62); }
/* Finished fighters keep a readable afterglow — dimmer than the star, but
   their locked totals stay bright gold for comparison (rule below). */
.ms-arena.spot .ms-combatant.in.locked { opacity: 0.85; filter: saturate(0.9) brightness(0.95); }
.ms-arena.spot .ms-combatant.in.locked .ms-cb-power b {
    color: #ffe9ad; text-shadow: 0 0 10px rgba(201,168,76,0.65);
}
/* The active fighter is LIT and RAISED — stage lights on. */
.ms-arena.spot .ms-combatant.in.active {
    opacity: 1; filter: none;
    transform: translateY(-9px) scale(1.12);
    z-index: 3;
}
.ms-arena.spot .ms-combatant.in.active .ms-cb-portrait {
    border-color: #ffe9ad;
    box-shadow: 0 0 26px rgba(232,212,139,0.55), 0 8px 20px rgba(0,0,0,0.65);
}
/* Pool of warm stage-light at the active fighter's feet */
.ms-arena.spot .ms-combatant.in.active::before {
    content: ''; position: absolute; left: 50%; bottom: -10px; z-index: -1;
    width: 165%; height: 34px; transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(232,212,139,0.4), transparent 70%);
    filter: blur(3px); pointer-events: none;
}
/* The hit-punch lives on the portrait, NOT the fighter — animating the
   fighter's transform would stomp the active raise on every meter bump. */
.ms-combatant.hit .ms-cb-portrait-wrap { animation: msCbHit 0.3s ease; }
.ms-combatant.charge {
    transform: translateX(var(--chx, 0)) scale(1.14); opacity: 0;
    transition: transform 0.5s cubic-bezier(0.5,0,0.85,0.4), opacity 0.5s ease 0.12s;
}
.ms-cb-portrait-wrap {
    position: relative; border-radius: 10px;
    box-shadow: 0 5px 14px rgba(0,0,0,0.55);
    transition: box-shadow 0.3s ease;
}
.ms-combatant.locked .ms-cb-portrait-wrap {
    box-shadow: 0 0 0 2px rgba(232,212,139,0.5), 0 0 20px rgba(201,168,76,0.5);
}
.ms-cb-portrait {
    display: block;
    /* the character board art is landscape 800x504 — show ALL of it */
    width: 100%; aspect-ratio: 800 / 504; height: auto;
    border-radius: 8px; object-fit: cover;
    border: 2px solid rgba(201,168,76,0.45); background: #1a0f07;
    transition: border-color 0.3s ease;
}
/* Slider ring riding the board's skill track (game's own geometry) */
.ms-ring {
    position: absolute; width: 13%; aspect-ratio: 1; height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65));
}
.ms-combatant.forging .ms-cb-portrait { border-color: #e8d48b; }
.ms-cb-name {
    font-family: 'Cinzel', serif; font-weight: 700;
    font-size: clamp(10px, 1.6dvh, 13px); color: var(--gold);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-cb-power { display: flex; align-items: center; gap: 4px; }
.ms-cb-power img { width: clamp(12px,1.7dvh,16px); height: clamp(12px,1.7dvh,16px); }
.ms-cb-power b {
    font-family: 'Cinzel', serif; font-weight: 900;
    font-size: clamp(14px,2.1dvh,18px); color: #ffd97a;
    font-variant-numeric: tabular-nums;
}
/* Wounded scores read red — negatives are real mid-battle */
.ms-cb-power.neg b { color: #ff8a7a !important; -webkit-text-fill-color: #ff8a7a !important; background: none !important; }
/* A struck fighter flashes red for a beat */
.ms-combatant.struck .ms-cb-portrait { animation: msStruck 0.5s ease; }
@keyframes msStruck {
    0%, 100% { border-color: rgba(201,168,76,0.45); box-shadow: none; }
    30% { border-color: #ff6a5a; box-shadow: 0 0 18px rgba(255,80,60,0.65); }
}

/* ── POWER TIERS: RARITY COLORS — same size everywhere, the COLOR carries
   the weight class. ≤5 gray · 6-10 green · 11-15 blue · 16-20 purple ·
   21+ orange. Purple and orange wear a little sparkle. ─────────────── */
.ms-cb-power b, .ms-power b { position: relative; z-index: 0; transition: color 0.25s ease; }

/* gray — an unremarkable showing, but readable */
.pw-gray b { color: #9a958a; text-shadow: none; }
.pw-gray img { filter: grayscale(0.6) brightness(0.75); }

/* green — a solid tally */
.pw-green b {
    background: linear-gradient(180deg, #c8f0a8 0%, #7ec95c 55%, #43913a 95%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 5px rgba(110,200,90,0.4));
}

/* blue — a strong tally */
.pw-blue b {
    background: linear-gradient(180deg, #c2e2ff 0%, #6fb1f0 55%, #2f6fc4 95%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 6px rgba(90,160,235,0.5));
}

/* purple — an epic tally: glow and a little sparkle */
.pw-purple b {
    background: linear-gradient(180deg, #ecd2ff 0%, #b573ea 55%, #7a37c4 95%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 8px rgba(175,105,230,0.6));
}
.pw-purple b::after {
    content: '✦'; position: absolute; top: -0.5em; right: -0.7em;
    font-size: 0.5em; color: #ecd2ff; -webkit-text-fill-color: #ecd2ff;
    animation: pwTwinkle 1.3s ease-in-out infinite;
}

/* orange — legendary: fire-bright glow, a little sparkle on both shoulders */
.pw-orange b {
    background: linear-gradient(180deg, #ffe3b0 0%, #ffa63e 55%, #e06a10 95%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 9px rgba(255,150,50,0.7));
}
.pw-orange b::before {
    content: '✦'; position: absolute; top: -0.48em; left: -0.7em;
    font-size: 0.45em; color: #ffe3b0; -webkit-text-fill-color: #ffe3b0;
    animation: pwTwinkle 1.5s ease-in-out 0.5s infinite;
}
.pw-orange b::after {
    content: '✦'; position: absolute; top: -0.52em; right: -0.72em;
    font-size: 0.52em; color: #fff0d8; -webkit-text-fill-color: #fff0d8;
    animation: pwTwinkle 1s ease-in-out infinite;
}

/* tier sparks match their rarity */
.ms-spark.purple { background: #e3c2ff; box-shadow: 0 0 9px rgba(190,120,240,0.95); }
.ms-spark.orange { background: #ffd9a0; box-shadow: 0 0 9px rgba(255,160,60,0.95); }

/* the purple-tier rumble shakes just that fighter */
.ms-combatant.pw-rumbling { animation: pwRumble 0.45s ease; }
@keyframes pwRumble {
    10%, 90% { transform: translate(-1px, 0); }
    30%, 70% { transform: translate(2px, -1px) rotate(0.4deg); }
    50% { transform: translate(-2px, 1px) rotate(-0.4deg); }
}
@keyframes pwTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
/* (forge meter bars removed — the badged row IS the meter) */
/* Combat-hit callouts float up over the fighter */
.ms-cb-callout { position: absolute; bottom: 100%; left: 50%; width: 0; height: 0; z-index: 8; }
.ms-callout {
    position: absolute; left: 50%; bottom: 0;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
    font-family: 'Cinzel', serif; white-space: nowrap; opacity: 0;
}
.ms-callout.go { animation: msCallout 1.1s ease-out forwards; }
.ms-callout b { font-weight: 900; font-size: clamp(16px, 2.6dvh, 24px); }
.ms-callout span { font-size: 9px; letter-spacing: 0.06em; color: rgba(240,230,211,0.72); margin-top: 1px; text-transform: uppercase; }
.ms-callout.bonus b, .ms-callout.coin b { color: #8fe6a0; text-shadow: 0 0 10px rgba(120,230,150,0.6); }
.ms-callout.debuff b { color: #ff8a7a; text-shadow: 0 0 10px rgba(255,120,100,0.6); }
.ms-callout.mult b { color: #ffe08a; text-shadow: 0 0 14px rgba(255,210,110,0.85); font-size: clamp(20px,3.2dvh,30px); }
.ms-callout.miss b { color: #b9aa88; text-shadow: 0 0 8px rgba(120,110,90,0.5); }
@keyframes msCbHit { 0%,100% { transform: none; } 40% { transform: scale(1.07); } }
@keyframes msCallout {
    0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); }
    22% { opacity: 1; transform: translate(-50%, -4px) scale(1.06); }
    100% { opacity: 0; transform: translate(-50%, -32px) scale(1); }
}

/* Coin flip (Liquid Courage) — a long, tense toss: up, hang, spin slowing,
   land with a bounce on its real face. ~1.6s of held breath. */
.ms-coin {
    /* launches low, overlapping the board's top edge, so the full toss arc
       (peak −46px) stays inside the banner padding on 390px-tall phones */
    position: absolute; left: 50%; bottom: -40px; margin-left: -22px;
    width: 44px; height: 44px; z-index: 9;
    transform-style: preserve-3d;
}
.ms-coin-face {
    position: absolute; inset: 0; border-radius: 50%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    background-size: cover; background-position: center;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
}
/* painted coin art: radiant crown = heads (+4), ashen shattered crown = tails (0) */
.ms-coin-face.heads { background-image: url('../assets/ui/coin-heads.png'); }
.ms-coin-face.tails { background-image: url('../assets/ui/coin-tails.png'); transform: rotateY(180deg); }
.ms-coin.flip-heads { animation: msCoinH 1.6s linear forwards; }
.ms-coin.flip-tails { animation: msCoinT 1.6s linear forwards; }
/* Coin verdict — floats up from the landed coin: power token +N on heads,
   the token crossed out in red on tails. */
.ms-coinres {
    position: absolute; left: 50%; bottom: -12px; z-index: 12;
    display: flex; align-items: center; gap: 5px;
    font-family: 'Cinzel', serif; font-weight: 900;
    font-size: clamp(20px, 3.2dvh, 28px);
    color: #8fe6a0; text-shadow: 0 0 12px rgba(120,230,150,0.65), 0 2px 4px rgba(0,0,0,0.9);
    opacity: 0; pointer-events: none; white-space: nowrap;
}
.ms-coinres img { width: clamp(22px, 3.6dvh, 30px); height: auto; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6)); }
.ms-coinres-tok { position: relative; display: block; }
.ms-coinres-tok i {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-style: normal; color: #ff5f4d; font-size: 1.25em;
    text-shadow: 0 0 10px rgba(255,90,70,0.8), 0 2px 4px rgba(0,0,0,0.9);
}
.ms-coinres.go { animation: msCoinRes 2.2s ease-out forwards; }
@keyframes msCoinRes {
    0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
    14%  { opacity: 1; transform: translate(-50%, -8px) scale(1.15); }
    26%  { transform: translate(-50%, -14px) scale(1); }
    80%  { opacity: 1; transform: translate(-50%, -46px); }
    100% { opacity: 0; transform: translate(-50%, -78px); }
}
/* over the featured card: rise from the coin (coinslot anchor is 0×0) */
.ms-feature .ms-coinres { bottom: auto; top: -34px; }
/* Fast spin on the way up, hang at the top, decelerating spin down, bounce.
   Heads ends at a multiple of 360°; tails at +180°. */
@keyframes msCoinH {
    0%   { transform: rotateY(0)       translateY(4px)   scale(0.7); }
    22%  { transform: rotateY(1080deg) translateY(-30px) scale(1.18); }
    50%  { transform: rotateY(1980deg) translateY(-36px) scale(1.18); }
    82%  { transform: rotateY(2760deg) translateY(2px)   scale(1); }
    90%  { transform: rotateY(2836deg) translateY(-7px)  scale(1.04); }
    100% { transform: rotateY(2880deg) translateY(0)     scale(1); }
}
@keyframes msCoinT {
    0%   { transform: rotateY(0)       translateY(4px)   scale(0.7); }
    22%  { transform: rotateY(1080deg) translateY(-30px) scale(1.18); }
    50%  { transform: rotateY(1980deg) translateY(-36px) scale(1.18); }
    82%  { transform: rotateY(2940deg) translateY(2px)   scale(1); }
    90%  { transform: rotateY(3016deg) translateY(-7px)  scale(1.04); }
    100% { transform: rotateY(3060deg) translateY(0)     scale(1); }
}

/* Sap projectile — a bolt streaking from caster to victim */
.ms-sap {
    position: absolute; height: 3px; transform-origin: left center; z-index: 7;
    background: linear-gradient(90deg, rgba(255,120,100,0) 0%, rgba(255,120,100,0.15) 40%, #ff6a7a 92%, #ffd0c8 100%);
    border-radius: 3px; opacity: 0;
    -webkit-mask: linear-gradient(90deg, transparent, #000 60%, #000);
            mask: linear-gradient(90deg, transparent, #000 60%, #000);
}
.ms-sap.go { animation: msSap 0.42s ease-in forwards; }
/* Heavy bolts fired from a FEATURED card — thicker, brighter, above the
   feature veil, and SLOW: one beam at a time, readable */
.ms-sap.thick {
    height: 8px; border-radius: 8px; z-index: 46;
    background: linear-gradient(90deg, rgba(255,120,100,0) 0%, rgba(255,110,90,0.4) 35%, #ff5a6a 88%, #ffe0d8 100%);
    box-shadow: 0 0 14px rgba(255,90,90,0.75);
}
.ms-sap.thick.go { animation: msSap 1.35s ease-in-out forwards; }

/* The damage rides the beam: power token + −N at the beam's midpoint */
.ms-sapamt {
    position: absolute; z-index: 47; pointer-events: none;
    display: flex; align-items: center; gap: 3px;
    transform: translate(-50%, -120%);
    font-family: 'Cinzel', serif; font-weight: 900;
    font-size: clamp(15px, 2.6dvh, 20px);
    color: #ff8a7a; text-shadow: 0 0 10px rgba(255,90,90,0.65), 0 2px 4px rgba(0,0,0,0.9);
    opacity: 0;
}
.ms-sapamt img { width: clamp(15px, 2.4dvh, 19px); height: auto; }
.ms-sapamt.go { animation: msSapAmt 1.55s ease-out forwards; }
@keyframes msSapAmt {
    0% { opacity: 0; transform: translate(-50%, -90%) scale(0.7); }
    15% { opacity: 1; transform: translate(-50%, -120%) scale(1.08); }
    80% { opacity: 1; transform: translate(-50%, -120%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}
@keyframes msSap {
    0% { opacity: 0; clip-path: inset(0 100% 0 0); }
    25% { opacity: 1; }
    70% { opacity: 1; clip-path: inset(0 0 0 0); }
    100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

/* ── FEATURE: a card takes center stage over a darkened arena ─────────
   (Fuzzy Head's strike, Shot of Courage's coin). Everyone reads the card,
   then its effect fires FROM the card, then it joins the queue. */
.ms-feature {
    position: absolute; inset: 0; z-index: 44;
    opacity: 0; transition: opacity 0.35s ease;
    pointer-events: none;
}
.ms-feature.go { opacity: 1; }
.ms-feature.bye { opacity: 0; }
.ms-feature-veil { position: absolute; inset: 0; background: rgba(8, 5, 2, 0.68); }
.ms-feature-inner {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(6px, 1.6dvh, 12px);
}
.ms-feature-card {
    display: block; height: clamp(170px, 58dvh, 300px); width: auto;
    border-radius: 10px;
    border: 2px solid rgba(255,233,173,0.65);
    box-shadow: 0 0 44px rgba(201,168,76,0.5), 0 16px 44px rgba(0,0,0,0.75);
    background: #1a0f07;
}
.ms-feature.go .ms-feature-card { animation: msFeatureIn 0.5s cubic-bezier(0.2,1.4,0.35,1); }
@keyframes msFeatureIn {
    0% { opacity: 0; transform: translateY(26px) scale(0.6); }
    100% { opacity: 1; transform: none; }
}
.ms-feature-cap {
    font-family: 'Cinzel', serif; font-weight: 700;
    font-size: clamp(11px, 2dvh, 15px); letter-spacing: 0.08em;
    color: #ffe9ad; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
/* The featured coin flips big, over the face of the card itself — it can
   never clip a screen edge, and the toss reads as part of the card's story */
.ms-feature-coinslot { position: absolute; left: 50%; top: 58%; width: 0; height: 0; }
.ms-feature .ms-coin {
    left: -28px; top: -28px; bottom: auto; margin-left: 0;
    width: 56px; height: 56px;
}

/* ── The card row — a fighter's power contributors laid on the table ──
   Cards (and power missions) deal in one at a time and STAY, readable, until
   the player dismisses the row (Continue ▸ / tap). Sized off viewport WIDTH,
   not dvh — dvh collapsed to thumbnails on landscape phones. */
.ms-cardrow {
    position: absolute; left: 0; right: 0; bottom: clamp(52px, 12dvh, 84px);
    display: flex; align-items: center;
    gap: clamp(8px, 1.6vw, 16px);
    /* Swipeable when the hand is bigger than the screen. Top padding keeps
       the +N badges (which poke above the cards) inside the scroll box. */
    overflow-x: auto;
    padding: 14px clamp(12px, 3vw, 28px) 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 12; pointer-events: auto;
    transition: opacity 0.3s ease;
}
.ms-cardrow::-webkit-scrollbar { display: none; }
/* Centered when it fits, scrolls from the true start when it doesn't
   (justify-content:center would clip the left edge under overflow). */
.ms-cardrow > :first-child { margin-left: auto; }
.ms-cardrow > :last-child { margin-right: auto; }
.ms-cardrow.out { opacity: 0; }
/* A row item: card / mission / character-board tile, each wearing a +N badge
   so the row reads as the literal sum of the fighter's Power. */
.ms-rowitem {
    position: relative;
    flex: 0 0 auto;              /* never squish — overflow scrolls instead */
    width: clamp(76px, 10.5vw, 132px);
    opacity: 0; transform: translateY(20px) scale(0.6);
}
.ms-rowitem img:not(.ms-ring) {
    display: block; width: 100%; aspect-ratio: 5 / 7; height: auto;
    border-radius: 7px; object-fit: cover;
    border: 2px solid rgba(232,212,139,0.8);
    box-shadow: 0 8px 22px rgba(0,0,0,0.7), 0 0 18px rgba(201,168,76,0.35);
    background: #1a0f07;
}
.ms-rowitem.go { animation: msRowCardIn 0.55s cubic-bezier(0.2,1.3,0.35,1) forwards; }
@keyframes msRowCardIn { to { opacity: 1; transform: none; } }
/* The +N badge — the amount this item feeds the meter */
.ms-rowamt {
    position: absolute; top: -9px; right: -9px; z-index: 2;
    min-width: 26px; height: 26px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif; font-weight: 900; font-size: 14px;
    color: #2a1a0e;
    background: radial-gradient(circle at 34% 30%, #fff4d2, #c9a84c 70%);
    border: 1px solid #8b6914; border-radius: 14px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.6), 0 0 10px rgba(201,168,76,0.45);
}
/* A modifier that HURT this fighter (sap): red badge; a lost coin: grey 0 */
.ms-rowamt.neg {
    color: #fff0ec;
    background: radial-gradient(circle at 34% 30%, #e2604e, #8b1a1a 72%);
    border-color: #5c0f0f;
    box-shadow: 0 2px 7px rgba(0,0,0,0.6), 0 0 10px rgba(200,60,50,0.5);
}
.ms-rowamt.zero {
    color: #e8e2d4;
    background: radial-gradient(circle at 34% 30%, #9a948a, #55504a 72%);
    border-color: #3a3630;
    box-shadow: 0 2px 7px rgba(0,0,0,0.6);
}
/* Modifier source cards read slightly cooler than base contributors */
.ms-rowitem.mod img:not(.ms-ring) { border-color: rgba(201,168,76,0.5); }
/* Dismissed rows TUCK beside the fighter — a mini overlapped strip so each
   player's played evidence stays visible through the rest of the battle.
   Absolutely positioned: never reflows the arena. Rides along (and fades)
   with the fighter through the clash. */
.ms-tuck {
    position: absolute; top: calc(100% + 4px); left: 50%;
    transform: translateX(-50%);
    display: flex; justify-content: center;
    z-index: 2; pointer-events: none;
}
.ms-tuckcard {
    width: clamp(22px, 3.2vw, 32px); aspect-ratio: 5 / 7; height: auto;
    border-radius: 3px; object-fit: cover;
    border: 1px solid rgba(201,168,76,0.55);
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    margin-left: -9px;
    opacity: 0; transform: translateY(8px) scale(0.55);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2,1.2,0.35,1);
}
.ms-tuckcard.board { width: clamp(36px, 5.4vw, 52px); aspect-ratio: 800 / 504; }
.ms-tuckcard:first-child { margin-left: 0; }
.ms-tuckcard:nth-child(odd) { rotate: -3deg; }
.ms-tuckcard:nth-child(even) { rotate: 2.5deg; }
.ms-tuckcard.go { opacity: 1; transform: none; }

/* The character-board tile leads the row with a caption */
.ms-rowitem.board { width: auto; }
.ms-rowitem.board img:not(.ms-ring) {
    /* full landscape board as the played 'card' — height matches the hand */
    height: clamp(94px, 12.6vw, 158px); width: auto; aspect-ratio: 800 / 504;
    border-color: rgba(201,168,76,0.55); filter: saturate(0.92);
}
.ms-rowcap {
    /* corner chip — the bottom edge belongs to the slot track + ring */
    position: absolute; left: 6px; top: 6px; transform: none;
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #ffe9ad; text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    background: rgba(20,10,4,0.72); border: 1px solid rgba(201,168,76,0.4);
    border-radius: 9px; padding: 2px 8px; white-space: nowrap;
}
/* While the row is on the table, the arena lifts so meters stay visible */
.ms-arena { transition: padding 0.45s ease, opacity 0.45s ease; }
.ms-arena.spot {
    align-items: flex-start;
    /* clears the perched banner AND leaves headroom for the coin-toss arc */
    padding-top: clamp(84px, 20dvh, 118px);
    padding-bottom: clamp(96px, 26dvh, 190px);
}

.ms-continue {
    position: absolute; left: 50%; transform: translateX(-50%) translateY(8px);
    bottom: clamp(8px, 2.2dvh, 20px); z-index: 14;
    pointer-events: auto;
    font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.08em;
    font-size: clamp(11px, 1.9dvh, 14px);
    color: #2a1a0e;
    background: linear-gradient(180deg, #f4e2a4, #c9a84c);
    border: 1px solid #8b6914; border-radius: 20px;
    padding: 9px 18px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 16px rgba(201,168,76,0.35);
    opacity: 0;
}
.ms-continue.show { animation: msContinueIn 0.4s ease 0.15s forwards; }
@keyframes msContinueIn { to { opacity: 1; transform: translateX(-50%); } }
.ms-continue:hover { background: linear-gradient(180deg, #fff4d2, #d9b85e); }

.ms-skip {
    position: absolute; top: max(8px, 2dvh); right: 12px; z-index: 30;
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(201,168,76,0.75);
    border: 1px solid rgba(201,168,76,0.4); border-radius: 14px;
    padding: 4px 11px; cursor: pointer;
    background: rgba(0,0,0,0.35);
}
.ms-skip:hover { color: #ffe9ad; border-color: #ffe9ad; }

/* Prestige paid in the physical token art (round gold/blue tokens) */
.ms-prestige.tokens {
    display: flex; align-items: center; gap: 3px;
    background: none; border: none; padding: 2px 0;
}
.ms-ptoken-plus {
    font-family: 'Cinzel', serif; font-weight: 900;
    font-size: clamp(13px, 2.1dvh, 17px); color: #ffe9ad;
    text-shadow: 0 0 8px rgba(201,168,76,0.6); margin-right: 1px;
}
.ms-ptoken {
    width: clamp(22px, 3.8dvh, 34px); height: clamp(22px, 3.8dvh, 34px);
    border-radius: 50%; object-fit: cover;
    box-shadow: 0 2px 7px rgba(0,0,0,0.55), 0 0 10px rgba(201,168,76,0.35);
}
.ms-tier.champ .ms-ptoken { width: clamp(26px, 4.6dvh, 40px); height: clamp(26px, 4.6dvh, 40px); }

/* Herald / announcer line — pinned under the perched banner, where it can
   never collide with the lifted arena or the card row. */
.ms-herald {
    position: absolute; left: 0; right: 0; top: clamp(5px, 1.4dvh, 11px);
    min-height: 1.2em; text-align: center; z-index: 13;
    font-family: 'Cinzel', serif; font-style: italic; font-weight: 700;
    font-size: clamp(11px, 1.9dvh, 15px); letter-spacing: 0.04em;
    color: #e8d48b; text-shadow: 0 0 12px rgba(201,168,76,0.4), 0 2px 3px rgba(0,0,0,0.7);
    opacity: 0;
}
.ms-herald.show { animation: msHerald 0.5s ease forwards; }
@keyframes msHerald { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 0.95; transform: none; } }

/* ── Keyframes ──────────────────────────────────────────────────────── */
@keyframes msFade { from { opacity: 0; } }
@keyframes msBannerIn { 0% { opacity: 0; transform: scale(1.6); letter-spacing: 0.5em; } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); letter-spacing: 0.18em; } }
@keyframes msFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes msShock { 0% { opacity: 0.9; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-width: 3px; } 100% { opacity: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-width: 0.5px; } }
@keyframes msEmber { 0% { opacity: 0; transform: translateY(0) translateX(0); } 12% { opacity: 0.9; } 88% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-102dvh) translateX(var(--drift, 12px)); } }
@keyframes msFlash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
@keyframes msSweep { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@keyframes msCrown { 0% { opacity: 0; transform: translate(-50%, -22px) scale(0.6) rotate(-8deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -12px) scale(1) rotate(0deg); } }
@keyframes msLaurelL { to { opacity: 0.9; transform: translateY(-50%) scale(1); } }
@keyframes msLaurelR { to { opacity: 0.9; transform: translateY(-50%) scale(-1, 1); } }
@keyframes msStamp { 0% { opacity: 0; transform: scale(0.5) rotate(-5deg); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes msHint { 0%,100% { opacity: 0.35; } 50% { opacity: 0.85; } }
@keyframes msShake { 10%,90% { transform: translate(-1px,0); } 30%,70% { transform: translate(2px,-1px); } 50% { transform: translate(-2px,1px); } }
.ms-stage.shake { animation: msShake 0.4s ease; }

/* Spark burst when a fighter lands on the podium */
.ms-spark { position: absolute; left: 50%; top: 40%; width: 6px; height: 6px; border-radius: 50%; background: #ffe9ad; box-shadow: 0 0 8px #ffd97a; opacity: 0; pointer-events: none; z-index: 4; }
.ms-spark.go { animation: msSparkFly 0.55s ease-out forwards; }
@keyframes msSparkFly { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--sx,0), var(--sy,0)) scale(0.3); } }

/* Short landscape (phones held sideways) — trim the vertical footprint so the
   banner, podium, also-rans and hint all fit without overlap or scroll. */
@media (max-height: 470px) {
    .ms-stage { gap: 5px; padding: clamp(94px, 26dvh, 126px) 3vw 1dvh; }
    .ms-prestige { margin-top: 3px; }
    .ms-fighters { margin-bottom: 5px; }
    .ms-alsoran { gap: 10px; }
    .ms-crown { top: -13px; }
}