/* The court keeps its space through picks, combat and results. */
.arena-mode>main{padding:0 6px 6px!important}
.arena-mode .topbar{padding-block:7px!important}
.arena-mode .game-heading{padding:5px 5px;min-height:32px}
.arena-mode .play-layout{position:relative;display:flex;flex-direction:column;gap:0}
.arena-mode .arena-panel{flex:1;min-height:0;border-radius:14px}
.arena-mode .battle-hud{padding:7px 10px;gap:9px}
.arena-mode .arena-topline{padding:7px 10px 0}
.arena-mode .court-wrap{flex:1;min-height:0;margin:0 5px;overflow:hidden;display:grid;place-items:center}
.arena-mode .arena-footer{padding:6px 8px;font-size:7px}
.arena-mode .fighter-title strong{font-size:13px}
.arena-mode .scoreboard{font-size:25px;min-width:58px}
.arena-mode .draft-panel{position:relative;z-index:5;grid-area:1/1;width:calc(100% - 22px);max-width:420px;max-height:calc(100% - 24px);overflow:auto;overscroll-behavior:contain;padding:15px 12px;border:2px solid #f4cd73;border-radius:16px;background:linear-gradient(145deg,#335b92f5,#142e59fa 70%);box-shadow:0 0 0 4px #08172bd9,0 15px 45px #000a,inset 0 1px #c7e2ff;animation:fade-up .2s ease}
.arena-mode .court-wrap:has(.draft-panel:not([hidden])):after{content:'';position:absolute;inset:0;z-index:4;background:#07112666;pointer-events:none}
.arena-mode .draft-title{margin-bottom:12px}
.arena-mode .draft-title h2{font-size:25px;margin:0}
.arena-mode .draft-options{gap:7px}
.arena-mode .fighter-option{min-height:110px;padding:8px 3px 12px}
.arena-mode .fighter-option .ball-art{height:66px;width:100%;min-height:0}
.arena-mode .option-name{font-size:17px}
.arena-mode .selection-ability{margin:13px 0 0;font-size:10px;text-align:center;line-height:1.5;color:#ffe7a8}
.arena-mode .draft-bottom{padding-top:9px}
.arena-mode .wager-note{font-size:8px;gap:8px}
.arena-mode .draft-panel:has(.battle-end-stats) h2{font-size:29px}
.arena-mode .draft-panel:has(.battle-end-stats) .draft-copy{display:block;font-size:11px}
.arena-mode .draft-panel:has(.battle-end-stats) .primary-button{font-size:20px;min-height:48px}
.arena-mode .arena-status{font-size:5px}
@media(max-height:650px){
  .arena-mode .game-heading{display:none}
  .arena-mode .draft-panel{padding:11px}
  .arena-mode .draft-title h2{font-size:21px}
  .arena-mode .fighter-option{min-height:90px;padding-block:4px 9px}
  .arena-mode .fighter-option .ball-art{height:53px}
  .arena-mode .selection-ability{font-size:9px;margin-top:8px}
  .arena-mode .battle-end-stats{display:none}
}
@media(orientation:landscape) and (max-height:560px){
  .arena-mode .topbar{display:none}
  .arena-mode .battle-hud{padding:4px 10px}
  .arena-mode .arena-topline,.arena-mode .arena-footer{display:none}
  .arena-mode .draft-panel{width:min(420px,85%)}
  .arena-mode .draft-title{margin-bottom:5px}
  .arena-mode .wager-note{display:none}
}

/* Showdown HUD: rival on red, player on blue, the score between them. */
.arena-mode>main{padding:0 0 max(5px,env(safe-area-inset-bottom))!important}
.arena-mode>#champion-nav.image-navigation{display:none!important}
.arena-mode .game-heading{padding:7px 8px 8px;min-height:35px;gap:7px;background:linear-gradient(#1b3659b8,#0b1c35b8);border-bottom:1px solid #7593bc44}
.arena-mode .game-heading>div:first-child{min-width:0;flex:1;gap:5px}
.arena-mode .game-heading h1{font-size:clamp(10px,2.8vw,14px);white-space:nowrap;letter-spacing:0}
.arena-mode .game-heading .heading-crown{width:23px;height:21px;flex-shrink:0}
.arena-mode .game-heading .round-label{flex:none;font:400 11px 'Lilita One',sans-serif;letter-spacing:0;color:#fff0b5}
.arena-mode .game-heading .text-button{min-width:23px;min-height:23px}
.arena-mode .arena-panel{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.arena-mode .battle-hud{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);align-items:stretch;gap:3px;padding:3px 3px 5px;position:relative;z-index:1;background:#08162bd9}
.arena-mode .fighter-hud{display:flex;align-items:center;gap:6px;min-width:0;padding:4px;border:2px solid #51baff;border-radius:12px;background:linear-gradient(125deg,#073975,#061b42);box-shadow:inset 0 1px #b3eeff8c,inset 0 -3px #05204b,0 2px #020d25}
.arena-mode .opponent-hud{border-color:#fa6579;background:linear-gradient(125deg,#49243a,#281526);box-shadow:inset 0 1px #ffd0db88,inset 0 -3px #32142b,0 2px #020d25}
.hud-vitals{flex:1;min-width:0;text-align:center}
.arena-mode .fighter-title{justify-content:center;min-width:0}
.arena-mode .fighter-title strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(9px,2.3vw,12px);letter-spacing:.2px;line-height:1.25;color:#fff4e8;text-shadow:0 2px #120b21}
.arena-mode .player-hud .fighter-title{justify-content:flex-start;padding-left:3px}
.arena-mode .player-hud .fighter-title strong{font-size:15px;color:#5ae4ff;text-shadow:0 2px #003566}
.arena-mode .health-track{height:15px;border-radius:9px;border:1px solid #020d24;box-shadow:0 0 0 1px #aaf6ff88,inset 0 2px #0008;margin-top:5px;overflow:hidden}
.arena-mode .opponent-hud .health-track{box-shadow:0 0 0 1px #ff9da788,inset 0 2px #0008}
.arena-mode .health-fill{border-radius:8px;box-shadow:inset 0 2px #caffb8}
.arena-mode .health-fill.enemy{box-shadow:inset 0 2px #ffbfbd}
.arena-mode .hp-text,.arena-mode .opponent-hud .hp-text{font:700 10px/1.1 'DM Sans',sans-serif;text-align:center;color:#f2f5ff;margin:5px 0 0;text-shadow:0 1px #03091a}
.hud-portrait{position:relative;flex:0 0 43px;width:43px;height:58px;border:2px solid #7ddfff;border-radius:9px;background:radial-gradient(ellipse at 50% 65%,var(--portrait-color,#23466d),#091a32 85%);box-shadow:inset 0 1px #ddfaffaa,inset 0 0 0 2px #09152e,0 0 0 1px #00122c;overflow:hidden}
.opponent-hud .hud-portrait{border-color:#ff7186;box-shadow:inset 0 1px #ffd9bbaa,inset 0 0 0 2px #361327,0 0 0 1px #250a21}

.arena-mode .scoreboard{align-self:end;min-width:0;width:70px;min-height:56px;grid-template-columns:1fr 9px 1fr;padding:7px 4px 5px;margin:11px 0 0;border:2px solid #9b762f;border-radius:11px;background:linear-gradient(#285a8b,#0b2548 75%);box-shadow:inset 0 1px #94c9ef88,0 2px #030d24;font-size:29px}
.arena-mode .scoreboard small{font-size:6px;font-weight:900;margin-top:4px;letter-spacing:.1px;color:#d6e7ff}
.arena-mode .court-wrap{margin:0;border:0;border-radius:0;box-shadow:none;background:#27283b}
.arena-mode .court-corner{display:none}
.arena-mode .arena-footer{padding:5px 9px;font-size:7px;background:#0a1b32}
.arena-mode .draft-panel{width:calc(100% - 30px);max-width:450px;padding:20px 15px 17px;border:2px solid #ffe599;border-radius:23px;background:linear-gradient(145deg,#22588f,#15375e 65%,#102849);box-shadow:0 0 0 4px #08264d,0 0 0 6px #4c95ca,0 12px 35px #0008,inset 0 1px #b2e1ff99;overflow:auto}
.arena-mode .court-wrap:has(.draft-panel:not([hidden])):after{background:#07142624}
.arena-mode .draft-title{gap:5px;margin-bottom:17px}
.arena-mode .draft-title h2{font-size:clamp(23px,6vw,31px);letter-spacing:0;color:#fff6df;text-shadow:0 2px #785326,0 4px #071c35}
.arena-mode .round-badge{padding:5px 9px;font:400 11px 'Lilita One',sans-serif;color:#62400b;border-radius:7px;box-shadow:inset 0 1px #fff9be,0 2px #091b34}
.arena-mode .draft-options{gap:8px;padding:3px 0}
.arena-mode .fighter-option{padding:10px 3px 13px;border-radius:15px;min-height:147px;background:linear-gradient(145deg,#397fc3,#1a467c 80%);border:2px solid #071d3d;box-shadow:inset 0 1px #b6deff,0 0 0 1px #61a8e5,inset 0 -4px #16335a,0 4px #07152d}
.arena-mode .fighter-option.selected{border-color:#ffe075;background:linear-gradient(145deg,#926e26,#5a4024 65%,#352c29);box-shadow:inset 0 1px #fff7c0,0 0 0 1px #b77c27,0 0 13px #ffc63380,inset 0 -4px #513824,0 4px #07152d}
.arena-mode .fighter-option .ball-art{height:84px;width:100%;max-width:120px;margin:0 0 7px}
.arena-mode .option-name{font-size:21px;letter-spacing:0;text-shadow:0 2px #142c4b}
.arena-mode .selection-radio{width:18px;height:18px;top:6px;right:6px}
.arena-mode .selected .selection-radio:after{left:5px;top:3px;width:5px;height:8px}
.arena-mode .selection-ability{font:400 13px/1.4 'Lilita One',sans-serif;color:#ffe38b;margin:15px 0 0;text-shadow:0 2px #122644}
.arena-mode .draft-bottom{padding-top:10px}
@media(max-width:380px){.arena-mode .battle-hud{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);gap:2px}.arena-mode .scoreboard{width:58px;font-size:25px;min-height:53px}.hud-portrait{flex-basis:36px;width:36px;height:53px}.arena-mode .fighter-hud{gap:4px;padding:3px}.arena-mode .fighter-title strong{font-size:9px}.arena-mode .player-hud .fighter-title strong{font-size:13px}.arena-mode .hp-text,.arena-mode .opponent-hud .hp-text{font-size:9px}.arena-mode .fighter-option .ball-art{height:73px}.arena-mode .option-name{font-size:18px}.arena-mode .draft-title h2{font-size:24px}}
@media(max-height:650px){.arena-mode .game-heading{display:flex;min-height:28px;padding-block:4px}.arena-mode .draft-panel{padding:13px 11px;border-radius:18px}.arena-mode .draft-title{margin-bottom:10px}.arena-mode .draft-title h2{font-size:24px}.arena-mode .fighter-option{min-height:114px;padding:5px 3px 9px}.arena-mode .fighter-option .ball-art{height:62px;margin-bottom:3px}.arena-mode .option-name{font-size:18px}.arena-mode .selection-ability{font-size:11px;margin-top:10px}.arena-mode .wager-note{font-size:7px}}
@media(orientation:landscape) and (max-height:560px){.arena-mode .game-heading{display:none}.arena-mode .battle-hud{position:absolute;inset:0 0 auto;z-index:1;max-width:500px;margin:auto;background:none}.arena-mode .hud-portrait{height:42px}.arena-mode .fighter-hud{padding-block:2px}.arena-mode .scoreboard{margin-top:6px;min-height:45px;font-size:24px}.arena-mode .court-wrap{margin-top:66px}.arena-mode .draft-panel{width:min(430px,80%)}.arena-mode .fighter-option{min-height:85px}.arena-mode .fighter-option .ball-art{height:40px}.arena-mode .selection-ability{font-size:10px;margin-top:7px}.arena-mode .draft-bottom{display:none}}
/* Hit feedback: a delayed pale bar shows each chunk of lost health, and the struck fighter's card jolts. */
.health-track{position:relative}
.health-fill{position:relative;z-index:1}
.health-ghost{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:2px;background:#ffffffd9;transition:width .38s cubic-bezier(.2,.6,.3,1)}
.health-ghost.enemy{left:auto;right:0}
.fighter-hud.hud-hit{animation:hud-hit .26s ease-out}
.fighter-hud.hud-hit-big{animation:hud-hit-big .38s ease-out}
@keyframes hud-hit{0%{filter:brightness(1.6) drop-shadow(0 0 8px #ff4d4d)}30%{transform:translateX(-3px)}60%{transform:translateX(2px)}100%{transform:none;filter:none}}
@keyframes hud-hit-big{0%{filter:brightness(1.9) drop-shadow(0 0 14px #ff3b3b);transform:scale(1.04)}25%{transform:translateX(-5px) scale(1.02)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:none;filter:none}}
.reduce-motion .fighter-hud.hud-hit,.reduce-motion .fighter-hud.hud-hit-big{animation:none}
/* Readable battle text: nothing below 10px on a phone. */
.arena-mode .hp-text{font-size:11px;font-weight:800;color:#e3ecfa;margin-top:3px;font-variant-numeric:tabular-nums}
.arena-mode .scoreboard small{font-size:8.5px;letter-spacing:.2px;white-space:nowrap}
.arena-mode .arena-status{font-size:10px;padding:5px 8px}
.arena-mode .arena-footer{font-size:11px}
/* The round clock: a tag at the court's top right, beside the round strip (owner's pick, 2026-11-01: the emote button
   took its place in the footer). */
.battle-clock{position:absolute;top:8px;right:10px;z-index:3;font:400 14px/1 'Lilita One',sans-serif;color:#fff0b8;background:#0b1631cc;border:1px solid #d9b25a88;border-radius:999px;padding:4px 9px 5px;min-width:50px;text-align:center;letter-spacing:.5px;font-variant-numeric:tabular-nums;box-shadow:0 2px 6px #0008;pointer-events:none}
.arena-mode #battle-clock.urgent{color:#fff;background:#b3242e;border-color:#ff8a7a;box-shadow:0 0 10px #ff4b4b88}
/* Sudden death banner: slams in over the arena when it starts closing. */
.sudden-death-banner{position:absolute;left:50%;top:18%;transform:translateX(-50%);z-index:6;display:grid;justify-items:center;gap:2px;padding:10px 22px 11px;border-radius:14px;background:linear-gradient(180deg,#c22e35,#7d1122);border:2px solid #ffd27a;box-shadow:0 0 0 2px #4b0a14,0 8px 22px #000a;pointer-events:none;white-space:nowrap;text-align:center}
.sudden-death-banner strong{font:400 30px 'Lilita One',sans-serif;color:#fff3c4;letter-spacing:.8px;text-shadow:0 3px #4b0a14}
.sudden-death-banner span{font-size:12px;font-weight:800;color:#ffd9cf;letter-spacing:.3px}
.sudden-death-banner.show{animation:sudden-death 1.9s ease-out both}
@keyframes sudden-death{0%{opacity:0;transform:translateX(-50%) scale(1.6)}12%{opacity:1;transform:translateX(-50%) scale(.95)}20%{transform:translateX(-50%) scale(1)}82%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1)}}
.reduce-motion .sudden-death-banner.show{animation:none}
/* Arena surroundings: a clean dark navy (the HUD's colour) so the court reads as a crisp board, not blurry bands. */
.arena-mode .court-wrap:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 60% at 50% 50%,#1b2a55,#0e1631 70%,#0a1024);pointer-events:none}
.arena-mode .game-heading .round-label{display:none}
/* Round tracker in the space above the court. */
.round-strip{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:9px;padding:4px 12px 5px;border-radius:999px;background:#0b1631cc;border:1px solid #d9b25a88;box-shadow:0 2px 6px #0008;pointer-events:none;white-space:nowrap}
.round-strip span{font:400 14px 'Lilita One',sans-serif;color:#ffe7a1;letter-spacing:.5px}
.round-strip b{display:flex;gap:5px}
.round-strip i{width:11px;height:11px;border-radius:50%;background:#2a3a63;border:1.5px solid #6c7fae}
.round-strip i.won{background:#3ab4ff;border-color:#bfe9ff;box-shadow:0 0 6px #3ab4ffaa}
.round-strip i.lost{background:#ff4d4d;border-color:#ffc2b8;box-shadow:0 0 6px #ff4d4daa}
.round-strip i.current{background:#ffd23f;border-color:#fff3c4;animation:round-pulse 1.2s ease-in-out infinite}
@keyframes round-pulse{50%{box-shadow:0 0 8px #ffd23f}}
.reduce-motion .round-strip i.current{animation:none}
/* Footer: the match clock in the middle (ability-button.css lays it out again around the tap-to-fire button for online
   fights). The phase ("IN PLAY", "MATCH COMPLETE") and the hint text stay for
   screen readers only. */
.arena-mode .arena-footer{display:flex;align-items:center;justify-content:center;gap:10px}
.arena-mode .arena-footer .arena-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;box-shadow:none}
/* The round tracker steps aside while the WIN/DEFEAT emblem and fighter picker are showing. */
.arena-mode .court-wrap:has(#pick-stage:not([hidden])) .round-strip{display:none}
/* Health follows the fight every frame, so the bar itself never animates behind it. */
.arena-mode .health-fill{transition:none}
/* Countdown: the arena and both fighters stay visible under a light veil, and each number pops in. */
.arena-mode .result-overlay.countdown-overlay{background:radial-gradient(ellipse at 50% 50%,#0a142e33,#0a142e8c 80%);backdrop-filter:none;padding:0}
.arena-mode .result-overlay.countdown-overlay:before{display:none}
.arena-mode .countdown-overlay .countdown{background:none;font-size:110px;-webkit-text-stroke:3px #6d350b;text-shadow:0 4px #bc740d,0 8px #23172b,0 12px 24px #000a}
.arena-mode .countdown.pop{animation:count-pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes count-pop{0%{opacity:0;transform:scale(1.8)}60%{opacity:1;transform:scale(.94)}100%{transform:scale(1)}}
.reduce-motion .arena-mode .countdown.pop{animation:none}
/* Surrender confirmation: the DEFEAT plaque's red and gold, with the costs spelled out. */
#info-dialog.surrender-mode{width:min(360px,calc(100vw - 32px));padding:34px 22px 20px;overflow:visible;background:linear-gradient(180deg,#b92a36,#7d1424 55%,#5a0f1d);border:3px solid #ffd76a;box-shadow:0 0 0 3px #1d0710,0 0 0 5px #c9922d,0 20px 60px #000c}
#info-dialog.surrender-mode::backdrop{background:#05091acc}
#info-dialog.surrender-mode>.dialog-close{display:none}
.surrender-dialog{display:grid;justify-items:center;gap:10px;text-align:center}
.surrender-crown{position:absolute;top:-28px;left:50%;width:56px;height:45px;transform:translateX(-50%);filter:grayscale(.85) brightness(.85) drop-shadow(0 3px 0 #2a1a10) drop-shadow(0 4px 6px #0008)}
.surrender-dialog h2{margin:0;font:400 40px/1 'Lilita One','Arial Black',sans-serif;letter-spacing:1px;color:#fff1d0;-webkit-text-stroke:2px #4a0b14;paint-order:stroke fill;text-shadow:0 2px 0 #8a1f2b,0 4px 0 #4a0b14,0 6px 0 #2a050b}
.surrender-dialog>p{margin:0;font-size:14px;font-weight:700;color:#ffd9cf}
.surrender-costs{list-style:none;margin:4px 0 6px;padding:0;width:100%;display:grid;gap:8px}
.surrender-costs li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#2a0710aa;border:1px solid #ffb4a855;text-align:left}
.surrender-costs svg{width:32px;height:32px;flex:none}
.surrender-costs span{display:grid;gap:1px}
.surrender-costs strong{font:400 18px 'Lilita One',sans-serif;color:#fff1d0;letter-spacing:.3px}
.surrender-costs small{font-size:12px;font-weight:700;color:#ffc9bf}
.surrender-confirm,.surrender-cancel{width:100%;min-height:50px;border-radius:14px;font:400 21px 'Lilita One',sans-serif;letter-spacing:.8px;cursor:pointer}
.surrender-confirm{color:#fff1d0;background:linear-gradient(180deg,#5a5f6e,#363a48);border:2px solid #b8bfd0;box-shadow:0 4px 0 #1b1d26;-webkit-text-stroke:1px #1b1d26;paint-order:stroke fill}
.surrender-cancel{color:#3a1d05;background:linear-gradient(180deg,#fff39a,#ffcf1f 50%,#ffad00);border:2px solid #fff6b0;box-shadow:0 0 0 2px #c06f05,0 5px 0 2px #6b3508}
.surrender-confirm:focus-visible,.surrender-cancel:focus-visible{outline:3px solid #fff;outline-offset:3px}
.surrender-confirm:active,.surrender-cancel:active{transform:translateY(3px)}
/* Match end: the result plaque plays over the frozen arena before the result screen fades in. The veil is dark enough
   that the frozen fighters and their YOU / RIVAL tags don't show through the buttons and links. */
.match-end{position:absolute;inset:0;z-index:7;display:grid;place-items:center;align-content:center;gap:18px;background:radial-gradient(ellipse at 50% 45%,#0a142eb3,#0a142ee6 85%);cursor:pointer;animation:match-end-veil .35s ease-out both;transition:opacity .35s ease}
.match-end.round-defeat{background:radial-gradient(ellipse at 50% 45%,#2a0710b3,#1d0710e6 85%)}
.match-end-skip{font:400 13px 'Lilita One',sans-serif;letter-spacing:1.5px;color:#ffe7a1cc;animation:match-end-hint 1.2s ease-in-out .8s infinite alternate}
.match-end.leaving{opacity:0}
@keyframes match-end-veil{from{opacity:0}to{opacity:1}}
@keyframes match-end-hint{from{opacity:.35}to{opacity:1}}
.reduce-motion .match-end,.reduce-motion .match-end-skip{animation:none}.reduce-motion .match-end{transition:none}
.arena-mode .court-wrap:has(#match-end:not([hidden])) .round-strip{display:none}
/* Final result in the arena: plaque, rewards and next steps. */
.match-end{gap:12px;cursor:default;overflow-y:auto;padding:24px 16px 16px;transition:none;align-content:safe center}
.match-end .round-plate{height:128px}
.match-end .round-plate small{font-size:13cqh;letter-spacing:.06em}
.match-plate-sub{margin:-6px 0 0;font:400 15px 'Lilita One',sans-serif;letter-spacing:1.5px;color:#ffe7a1;text-align:center;animation:match-end-rise .45s ease-out .3s both}
.match-end.round-defeat .match-plate-sub{color:#ffd2c9}
/* The x2 WATCH AD sticker sits above the rewards box's top right, so the line under the shield moves clear of it. */
.match-end:has(.ad-double) .match-plate-sub{margin-bottom:20px}
.reduce-motion .match-plate-sub{animation:none}
.arena-result-rewards,.arena-result-perfects,.arena-result-note,.arena-result-actions,.arena-result-xp{animation:match-end-rise .45s ease-out .35s both}
.arena-result-rewards{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(300px,100%);border-radius:14px;background:#0b1631eb;border:2px solid #d9b25a;box-shadow:0 0 0 2px #0b1631,0 6px 14px #0009}
.match-end.round-defeat .arena-result-rewards{background:#2a0710eb;border-color:#d9a05a}
.arena-result-rewards>div{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;column-gap:8px;padding:10px 6px 9px}
.arena-result-rewards>div+div{border-left:1px solid #d9b25a55}
.arena-result-rewards svg{grid-row:span 2;width:32px;height:32px}
.arena-result-rewards strong{font:400 30px/1 'Lilita One',sans-serif;color:#e8eefc;font-variant-numeric:tabular-nums}
.arena-result-rewards .up strong{color:#ffd23f}
.arena-result-rewards .down strong{color:#ff6a5e}
.arena-result-rewards small{font-size:10px;font-weight:800;letter-spacing:1px;color:#b9cbef}
.arena-result-note{margin:0;font:400 13px 'Lilita One',sans-serif;letter-spacing:1.2px;color:#ffe7a1}
.match-end.round-defeat .arena-result-note{color:#ffd2c9}
/* The match's PERFECT count (owner's pick A, 2026-10-31), shown only when there was at least one, above the note; on
   short phones beside it, so the result still fits with the FIRST WIN OF THE DAY ribbon. */
.arena-result-extra{display:flex;flex-direction:column;align-items:center;gap:12px}
.arena-result-perfects{display:flex;align-items:center;gap:8px;margin:0;padding:6px 16px 6px 10px;border-radius:999px;background:#4a2206;border:2px solid #ffd21f;box-shadow:0 0 0 2px #2a1203,0 4px 10px #0008;font:400 20px 'Lilita One',sans-serif;letter-spacing:.8px;color:#fff27a;-webkit-text-stroke:1px #4a2206;paint-order:stroke fill}
.arena-result-perfects svg{width:22px;height:26px}
@media(max-height:740px){.match-end:has(.arena-result-extra){gap:7px}.arena-result-extra{flex-flow:row wrap;justify-content:center;gap:4px 10px}.arena-result-perfects{gap:5px;padding:2px 11px 2px 7px;font-size:15px;box-shadow:0 0 0 2px #2a1203}.arena-result-perfects svg{width:14px;height:17px}}
/* The Wood chest a win earned (app.js showWinChest): the three little chests are today's free ones, lit when won. */
.win-chest{display:flex;align-items:center;gap:10px;width:min(330px,100%);padding:6px 12px 6px 6px;border-radius:14px;background:linear-gradient(#6b4423,#4a2c14);border:2px solid #e2a84a;box-shadow:0 4px 0 #2a1708,0 0 18px #f3b45e55;animation:match-end-rise .45s ease-out .45s both}
.win-chest-art{width:60px;height:60px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 3px #0008)}
.win-chest b{display:block;white-space:nowrap;font:400 18px 'Lilita One',sans-serif;letter-spacing:.5px;color:#ffe7a8;text-shadow:0 2px 0 #2a1708}
.win-chest-pips,.win-chest-pips>span{display:flex;align-items:center;gap:6px}.win-chest-pips{margin-top:4px}
.win-chest-pips img{width:34px;height:34px;padding:2px;object-fit:contain;border-radius:8px;background:#0004;filter:grayscale(1) brightness(.85);opacity:.5}
.win-chest-pips img.on{background:#ffd36e33;outline:2px solid #ffd36e;outline-offset:-2px;filter:drop-shadow(0 0 6px #ffd36e);opacity:1}
.win-chest-pips em{margin-left:4px;font:400 16px 'Lilita One',sans-serif;font-style:normal;color:#ffd36e;text-shadow:0 2px 0 #2a1708}
@media(max-height:740px){.win-chest{padding:3px 10px 3px 4px}.win-chest-art{width:44px;height:44px}.win-chest b{font-size:16px}.win-chest-pips{margin-top:2px}.win-chest-pips img{width:26px;height:26px}.win-chest-pips em{font-size:14px}}
.reduce-motion .win-chest{animation:none}
.arena-result-actions{display:grid;gap:9px;width:min(300px,100%)}
.arena-result-play,.arena-result-home{min-height:50px;border-radius:15px;font:400 22px 'Lilita One',sans-serif;letter-spacing:.8px;cursor:pointer}
.arena-result-play{color:#fff1d0;background:linear-gradient(180deg,#fff39a,#ffcf1f 45%,#ffad00);border:2px solid #fff6b0;box-shadow:0 0 0 2px #c06f05,0 5px 0 2px #6b3508;-webkit-text-stroke:1.5px #753414;paint-order:stroke fill;text-shadow:0 2px 0 #b9661c,0 3px 0 #74300f}
.arena-result-home{min-height:44px;font-size:18px;color:#e8eefc;background:linear-gradient(180deg,#2a457e,#152954);border:2px solid #6c87c4;box-shadow:0 3px 0 #071331}
.arena-result-xp{background:none;border:0;padding:4px;font-size:12px;font-weight:800;letter-spacing:.8px;color:#b9cbef;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.arena-result-play:active,.arena-result-home:active{transform:translateY(3px)}
.match-end button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes match-end-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-height:740px){.match-end{gap:9px;padding-top:16px}.match-end .round-plate{height:108px}.match-end:has(.ad-double) .round-plate{height:96px}.arena-result-play{min-height:46px}.arena-result-home{min-height:40px}}
.reduce-motion .arena-result-rewards,.reduce-motion .arena-result-perfects,.reduce-motion .arena-result-note,.reduce-motion .arena-result-actions,.reduce-motion .arena-result-xp{animation:none}
/* Health bars: a chunky gold-rimmed tube with a glossy fill, 10% notches and the health number inside. The bar
   turns amber and pulses at 30% health or less; the white ghost shows the chunk just lost. */
.arena-mode .battle-hud .health-track{position:relative;height:21px;margin-top:4px;border-radius:8px;border:2px solid #050c1f;background:linear-gradient(#0b1733,#13254a);box-shadow:0 0 0 1.5px #e2b553,0 2px 0 1.5px #6a4511,inset 0 3px 4px #000a;overflow:hidden}
.arena-mode .battle-hud .opponent-hud .health-track{box-shadow:0 0 0 1.5px #e2b553,0 2px 0 1.5px #6a4511,inset 0 3px 4px #000a}
.arena-mode .battle-hud .health-fill{height:100%;border-radius:6px 3px 3px 6px;background:linear-gradient(#c8ff86 0,#7ae641 30%,#3fbf2c 58%,#24952a 100%);box-shadow:inset 0 -2px #1a6f22,inset -2px 0 #e9ffd0}
.arena-mode .battle-hud .health-fill.enemy{margin-left:auto;border-radius:3px 6px 6px 3px;background:linear-gradient(#ffc0a0 0,#ff6a52 30%,#e23a3a 58%,#a91e2c 100%);box-shadow:inset 0 -2px #7a1420,inset 2px 0 #ffe2d6}
.arena-mode .battle-hud .health-fill:before{content:'';position:absolute;left:4px;right:4px;top:2px;height:5px;border-radius:4px;background:linear-gradient(#ffffffb0,#ffffff30)}
.arena-mode .battle-hud .health-fill:after{display:none}
.arena-mode .battle-hud .health-track:after{content:'';position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1.5px),#00000038 calc(10% - 1.5px) 10%);pointer-events:none}
.arena-mode .battle-hud .health-ghost{border-radius:6px;background:linear-gradient(#fff8dc,#ffd98a)}
.arena-mode .battle-hud .is-low .health-fill:not(.enemy){background:linear-gradient(#fff2a0 0,#ffc93a 30%,#f59a1c 58%,#c46a12 100%);box-shadow:inset 0 -2px #7a3f0a,inset -2px 0 #fff3c8;animation:hp-low-pulse .8s ease-in-out infinite alternate}
.arena-mode .battle-hud .is-low .health-fill.enemy{animation:hp-low-pulse .8s ease-in-out infinite alternate}
.arena-mode .battle-hud .hp-text,.arena-mode .battle-hud .opponent-hud .hp-text{position:absolute;inset:0;z-index:2;display:grid;place-items:center;margin:0;font:400 12px/1 'Lilita One',sans-serif;letter-spacing:.3px;color:#fff;-webkit-text-stroke:2.5px #07142e;paint-order:stroke fill;text-shadow:0 1px 0 #07142e;font-variant-numeric:tabular-nums;pointer-events:none}
@keyframes hp-low-pulse{from{filter:brightness(1)}to{filter:brightness(1.35)}}
.reduce-motion .arena-mode .battle-hud .is-low .health-fill{animation:none}
@media(max-width:380px){.arena-mode .battle-hud .health-track{height:19px}.arena-mode .battle-hud .hp-text{font-size:11px}}
/* While players pick, neither fighter is known yet, so the health bars stay hidden (the space is kept, so nothing jumps). */
.arena-mode #arena-view:not(.is-playing) .battle-hud .health-track{visibility:hidden}

/* Trophy badge on the bottom edge of each fight portrait (outside the picture, which clips its art). */
.hud-portrait-wrap{position:relative;flex:0 0 auto;display:flex}
.hud-trophies{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:3px;padding:2px 7px 2px 4px;border-radius:999px;background:linear-gradient(#2a1d55,#140d33);border:1.5px solid #ffd76a;box-shadow:0 2px 0 #6b3508,0 0 6px #ffb21e88;font:400 12px/1 'Lilita One',sans-serif;color:#fff1d0;-webkit-text-stroke:.6px #3a1a05;paint-order:stroke fill;white-space:nowrap;pointer-events:none}
@media(max-width:380px){.hud-trophies{font-size:10.5px;padding:2px 5px 2px 3px;gap:2px}}

/* "VS" screen when a match starts, "Card Duel" (owner's pick, 2026-11-03): each player is a gold-framed card over the
   Royal Courtyard at dusk, the rival's red card from the top left, yours in blue from the bottom right. They fly in,
   knock together as the VS badge slams down (0.7 s, with the shake, a flash and a ring), then a shine sweeps across
   them; at the end they fly back out sideways. The cards are laid out on a 360x640 board that showVersusIntro scales
   to the screen (--vs-s), so the layout is the same on every phone. It covers the game's column (the whole screen
   when the game does, in short landscape). */
.versus-intro{position:fixed;inset:0;max-width:500px;margin:0 auto;z-index:40;overflow:hidden;font-family:'Lilita One',sans-serif;cursor:pointer;background:#080e21;--vs-s:1}
.vs-backdrop{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;animation:vs-fade .3s both}
.versus-intro:before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,#1d244c44,#040818ef 85%);animation:vs-fade .3s both}
.vs-layout{position:absolute;z-index:2;left:50%;top:50%;width:360px;height:640px;transform:translate(-50%,-50%) scale(var(--vs-s))}
.vs-card{position:absolute;left:18px;top:18px;width:214px;height:287px;padding:4px;border:4px solid #ffda71;border-radius:19px;overflow:hidden;background:linear-gradient(135deg,#f9df8a,#a26316 40%,#ffe89f 62%,#a86b20);box-shadow:0 7px 0 #543216,0 15px 24px #000a;transform-origin:50% 90%;--vs-sign:-1;animation:vs-card-in 1.05s cubic-bezier(.2,.8,.3,1) both}
.vs-card-you{left:128px;top:317px;height:279px;transform-origin:50% 10%;--vs-sign:1;animation-delay:.07s}
.vs-card-face{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:2px solid #f4c457;border-radius:11px;overflow:hidden;background:radial-gradient(ellipse at 50% 28%,#e54f52,#5e0d2e 65%,#260b21)}
.vs-card-you .vs-card-face{background:radial-gradient(ellipse at 50% 28%,#43bbf7,#123a86 65%,#061b49)}
.vs-eyebrow{margin:9px 0 3px;font-size:9px;letter-spacing:3px;color:#ffe5a4}
/* The league medal (assets/leagues) in each card's top-left corner (fighters' weapons point up-right): it drops in spinning like a flipped coin as the VS lands,
   bounces, then rocks gently (owner's ask, 2026-11-07). */
.vs-league{position:absolute;z-index:3;top:7px;left:7px;height:62px;width:auto;max-width:54px;object-fit:contain;filter:drop-shadow(0 3px 0 #0006) drop-shadow(0 5px 6px #0008);animation:vs-league-in .75s .85s cubic-bezier(.2,.9,.3,1.2) both,vs-league-rock 2.4s 1.6s ease-in-out infinite}
/* your card's top corners are under the VS badge and the weapon, so your medal sits lower down on the left */
.vs-card-you .vs-league{top:66px;height:62px;animation-delay:.95s,1.7s}
@keyframes vs-league-in{0%{opacity:0;transform:translateY(-46px) scale(.3) rotateY(0)}55%{opacity:1;transform:translateY(5px) scale(1.18) rotateY(720deg)}75%{transform:translateY(-2px) scale(.94) rotateY(720deg)}100%{transform:rotateY(720deg)}}
@keyframes vs-league-rock{0%,100%{rotate:-6deg}50%{rotate:6deg}}
.vs-fighter{position:relative;z-index:1;width:111px;height:108px;filter:drop-shadow(0 7px 5px #0006)}
.vs-card-you .vs-fighter{width:127px;height:122px;margin-top:21px}
.vs-fighter .ball-art{width:100%;height:100%;display:block;overflow:visible}
.vs-crown{position:absolute;z-index:2;left:31%;top:0;width:38%;transform:rotate(-10deg);filter:drop-shadow(0 3px 0 #6b3508) drop-shadow(0 4px 6px #0008)}
/* A title other than the starter one sits above the name: gold for an earned title, purple for a Shop one. */
.vs-title{height:13px;font-size:9px;line-height:13px;letter-spacing:1px;color:#ffdc64}
.vs-title.is-shop{color:#e4b4ff}
.vs-name{display:block;width:184px;padding:0 6px;font-size:24px;line-height:29px;text-align:center;white-space:nowrap;overflow:hidden;color:#fff;background:linear-gradient(#de4651,#7a102d);border-block:1px solid #f7cb65;-webkit-text-stroke:2.5px #180d2a;paint-order:stroke fill;text-shadow:0 3px #100c2c}
.vs-card-you .vs-name{background:linear-gradient(#258cde,#153d8d)}
.vs-stats{display:flex;align-items:center;justify-content:center;gap:7px;width:170px;height:25px;margin-top:4px;border-radius:9px;background:#100c2c77;font-size:16px;color:#fff}
.vs-stats img{width:20px;height:19px;object-fit:contain}
.vs-stats b{font-weight:400}
.vs-stats small{padding-left:8px;border-left:1px solid #8d94aa;font-size:9px;letter-spacing:1px;color:#d1ddf6}
.vs-power{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:4px;font-size:15px;color:#ffecb6}
.vs-power .pw-icon{width:19px;height:19px}
.vs-power small{font-size:8px;letter-spacing:1px;color:#e9d2ba}
/* The rival's whole squad along the bottom of their card, the fighter on the card first. */
.vs-squad{display:flex;gap:9px;margin-top:5px}
.vs-squad span{width:29px;height:29px;border:2px solid #fbd66b;border-radius:50%;background:linear-gradient(#941e37,#320b25);box-shadow:0 3px #180818}
.vs-squad .ball-art{width:100%;height:100%;display:block}
.vs-shine{position:absolute;top:-30%;bottom:-30%;left:0;width:55px;background:linear-gradient(90deg,transparent,#fff9,transparent);opacity:.6;pointer-events:none;transform:translateX(-120px) rotate(25deg);animation:vs-shine 1.55s .95s linear both}
.vs-badge{position:absolute;z-index:3;left:120px;top:268px;width:120px;height:100px;object-fit:contain;filter:drop-shadow(0 6px 4px #09081f99);animation:vs-slam .47s .49s linear both}
.vs-ring{position:absolute;z-index:2;left:115px;top:255px;width:130px;height:130px;border:4px solid #fff1b0;border-radius:50%;box-shadow:0 0 15px #ffb329,inset 0 0 15px #ffb329;opacity:0;animation:vs-ring .48s .7s ease-out}
.vs-foot{position:absolute;left:0;top:607px;width:360px;text-align:center;animation:vs-name .25s .9s ease-out both}
.vs-foot strong{display:block;font-weight:400;font-size:11px;letter-spacing:1.6px;color:#ffe3a4}
.vs-foot small{display:block;margin-top:2px;font-size:10px;letter-spacing:3px;color:#bddfff}
.vs-flash{position:absolute;inset:0;z-index:3;background:#fff0bf;opacity:0;pointer-events:none;animation:vs-flash .12s .7s linear}
.versus-intro.is-shaking{animation:vs-shake .3s linear}
.versus-intro.is-leaving{background:transparent;transition:background .4s;pointer-events:none}
.versus-intro.is-leaving .vs-backdrop,.versus-intro.is-leaving:before,.versus-intro.is-leaving .vs-foot{animation:vs-fade-out .4s ease-in both}
.versus-intro.is-leaving .vs-card{animation:vs-card-out .4s ease-in both}
.versus-intro.is-leaving .vs-badge{animation:vs-badge-out .3s ease-in both}
@media(orientation:landscape) and (max-height:560px){.versus-intro{max-width:none}}
/* The card flies in from its side, tilted, lands at a slight angle, knocks back on the VS hit and settles. */
@keyframes vs-card-in{0%{transform:translate(calc(var(--vs-sign)*470px),calc(var(--vs-sign)*80px)) rotate(calc(var(--vs-sign)*24deg))}66%{transform:translate(0,0) rotate(calc(var(--vs-sign)*4deg))}83%{transform:translate(0,0) rotate(calc(var(--vs-sign)*8deg))}100%{transform:translate(0,0) rotate(calc(var(--vs-sign)*4deg))}}
@keyframes vs-card-out{from{transform:translate(0,0) rotate(calc(var(--vs-sign)*4deg))}to{opacity:0;transform:translateX(calc(var(--vs-sign)*430px)) rotate(calc(var(--vs-sign)*4deg))}}
@keyframes vs-shine{to{transform:translateX(350px) rotate(25deg)}}
@keyframes vs-slam{0%{opacity:0;transform:scale(2.6) rotate(-13deg);animation-timing-function:cubic-bezier(.3,0,.7,1)}45%{opacity:1;transform:none}72%{transform:scale(.88)}100%{transform:none}}
@keyframes vs-ring{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(3.2)}}
@keyframes vs-flash{from{opacity:.45}to{opacity:0}}
@keyframes vs-badge-out{to{opacity:0;transform:scale(.4) rotate(10deg)}}
@keyframes vs-name{from{opacity:0;transform:translateY(12px)}}
@keyframes vs-shake{20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
@keyframes vs-fade{from{opacity:0}}
@keyframes vs-fade-out{to{opacity:0}}
/* With Animations off: a simple fade in and out (no ring or flash). */
.reduce-motion .versus-intro *{animation:vs-fade .25s both!important}
.reduce-motion .versus-intro :is(.vs-ring,.vs-flash,.vs-shine){display:none}
.reduce-motion .versus-intro .vs-card{transform:rotate(calc(var(--vs-sign)*4deg))}
.reduce-motion .versus-intro.is-leaving{opacity:0;transition:opacity .25s}

/* In-match player cards and scoreboard (owner art in assets/hud): rival in red on the left, you in blue on the
   right, the gold scoreboard between them. Everything is sized from one height, --hud-h. The cards are drawn as
   three slices: the portrait end and the tip keep their shape, and only the bar section in the middle stretches
   or squeezes, so the portrait stays a circle at any width. --u is one pixel of the card art (202 px tall for the
   red card, 210 for the blue one). The #arena-view prefix wins over the older HUD rules above. */
#arena-view .battle-hud{--hud-h:clamp(48px,15.4vw,68px);display:grid;grid-template-columns:minmax(0,1fr) calc(var(--hud-h)*1.5) minmax(0,1fr);align-items:center;gap:0;padding:4px 3px 6px;background:none}
#arena-view .fighter-hud{--u:calc(var(--hud-h)/202);position:relative;display:block;height:var(--hud-h);min-width:0;padding:0;border:0 solid;border-radius:0;box-shadow:none;background:none;border-image:url('/assets/hud/card-red.webp') 0 50 0 205 fill/0 calc(var(--u)*50) 0 calc(var(--u)*205) stretch}
#arena-view .player-hud{--u:calc(var(--hud-h)/210);border-image:url('/assets/hud/card-blue.webp') 0 205 0 45 fill/0 calc(var(--u)*205) 0 calc(var(--u)*45) stretch}
#arena-view .fighter-hud .hud-portrait-wrap,#arena-view .fighter-hud .hud-vitals{position:static;display:block}
/* The picture box matches the painted gold opening (measured on card-red/card-blue.webp in their own pixels, which
   are --u units), and its bottom is cut flat where the painted trophy plate starts. */
#arena-view .fighter-hud .hud-portrait{position:absolute;left:calc(var(--u)*26);top:calc(var(--u)*21);width:calc(var(--u)*143);height:calc(var(--u)*143);clip-path:inset(-16% -16% 7.5% -16%);flex:none;border:0;border-radius:50%;background:radial-gradient(circle at 50% 62%,var(--portrait-color,#23466d),#0a1a3a 78%);box-shadow:inset 0 3px 6px #000a}
#arena-view .player-hud .hud-portrait{left:auto;right:calc(var(--u)*29);top:calc(var(--u)*23);width:calc(var(--u)*150);height:calc(var(--u)*150);clip-path:inset(-16% -16% 12% -16%)}
/* The trophy plate: a gold-rimmed navy hexagon like the one in the card art, drawn on top of it so it can grow
   for bigger numbers (1,000 or 12,345) instead of letting them spill over the edge. */
#arena-view .fighter-hud .hud-trophies{left:calc(var(--u)*95.5);top:calc(var(--u)*175.5);bottom:auto;transform:translate(-50%,-50%);--cut:calc(var(--u)*15);display:flex;align-items:center;justify-content:center;gap:2px;min-width:calc(var(--u)*116);height:calc(var(--u)*52);padding:0 calc(var(--cut) + 1px);border:0;border-radius:0;box-shadow:none;background:linear-gradient(#fff0b0,#f2b630 45%,#b9761a);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% 50%,calc(100% - var(--cut)) 100%,var(--cut) 100%,0 50%);font-size:max(10px,calc(var(--hud-h)*.18));-webkit-text-stroke:2px #07142e;text-shadow:0 1px 0 #07142e}
#arena-view .fighter-hud .hud-trophies:before{content:'';position:absolute;inset:calc(var(--u)*5);z-index:-1;background:linear-gradient(#123067,#0a1a42);clip-path:polygon(calc(var(--cut) - var(--u)*3) 0,calc(100% - var(--cut) + var(--u)*3) 0,100% 50%,calc(100% - var(--cut) + var(--u)*3) 100%,calc(var(--cut) - var(--u)*3) 100%,0 50%)}
#arena-view .player-hud .hud-trophies{left:auto;right:calc(var(--u)*105.5);transform:translate(50%,-50%);top:calc(var(--u)*182);height:calc(var(--u)*55)}
#arena-view .fighter-hud .hud-trophies img{width:1.05em;height:auto}
#arena-view .fighter-hud .fighter-title{position:absolute;left:calc(var(--u)*192);right:calc(var(--u)*52);top:calc(var(--u)*46);height:calc(var(--u)*50);display:flex;align-items:center;justify-content:flex-start;padding:0}
#arena-view .player-hud .fighter-title{left:calc(var(--u)*42);right:calc(var(--u)*204);top:calc(var(--u)*48);justify-content:flex-end;padding:0}
#arena-view .fighter-hud .fighter-title strong{font-size:calc(var(--hud-h)*.19);line-height:1;color:#fff;letter-spacing:0;-webkit-text-stroke:2px #1a0610;paint-order:stroke fill;text-shadow:0 2px 0 #1a0610}
#arena-view .player-hud .fighter-title strong{font-size:calc(var(--hud-h)*.23);color:#3fe0ff;-webkit-text-stroke:2px #04163d;text-shadow:0 2px 0 #04163d}
/* The health bar fills the art's dark slot, cut to its pointed ends (the older 10% notch marks above still draw
   on it, like the segment marks in the owner's concept). */
#arena-view .fighter-hud .health-track{position:absolute;left:calc(var(--u)*197);right:calc(var(--u)*30);top:calc(var(--u)*105);height:calc(var(--u)*33);margin:0;border:0;border-radius:0;background:#071233;box-shadow:inset 0 2px 3px #000a;clip-path:polygon(calc(var(--u)*14) 0,calc(100% - var(--u)*14) 0,100% 50%,calc(100% - var(--u)*14) 100%,calc(var(--u)*14) 100%,0 50%)}
#arena-view .player-hud .health-track{left:calc(var(--u)*27);right:calc(var(--u)*208);top:calc(var(--u)*109)}
#arena-view .fighter-hud .health-fill,#arena-view .fighter-hud .health-ghost{border-radius:0}
#arena-view .fighter-hud .hp-text{font-size:max(10px,calc(var(--hud-h)*.19));-webkit-text-stroke:2.5px #07142e;overflow:visible}
/* The scoreboard: gold digits in the red and blue boxes, two round pips under each, BEST OF 3 below. */
#arena-view .scoreboard{position:relative;z-index:2;display:block;align-self:center;width:auto;min-width:0;min-height:0;aspect-ratio:400/250;margin:0 calc(var(--hud-h)*-.12);padding:0;border:0;border-radius:0;box-shadow:none;background:url('/assets/hud/scoreboard.webp') center/100% 100% no-repeat;filter:drop-shadow(0 3px 4px #0009);font-size:0;text-shadow:none}
#arena-view .score-digit{position:absolute;top:46.5%;width:20%;height:35%;transform:translate(-50%,-50%);display:grid;place-items:center;font:400 calc(var(--hud-h)*.42)/1 'Lilita One',sans-serif;color:#ffe08a;text-shadow:0 2px #6c3e1c;background:center/contain no-repeat}
#arena-view #opponent-score{left:31.75%}
#arena-view #player-score{left:68%}
#arena-view .score-digit:is([data-score="0"],[data-score="1"],[data-score="2"],[data-score="3"]){color:transparent;text-shadow:none}
#arena-view .score-digit[data-score="0"]{background-image:url('/assets/hud/digit-0.webp')}
#arena-view .score-digit[data-score="1"]{background-image:url('/assets/hud/digit-1.webp')}
#arena-view .score-digit[data-score="2"]{background-image:url('/assets/hud/digit-2.webp')}
#arena-view .score-digit[data-score="3"]{background-image:url('/assets/hud/digit-3.webp')}
#arena-view .score-pips{position:absolute;top:70.8%;left:0;right:0;height:0}
#arena-view .score-pips i{position:absolute;width:5.2%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;transition:opacity .25s,transform .25s}
#arena-view .score-pips-rival i{background:radial-gradient(circle at 40% 35%,#ffd0c0,#ff4040 55%,#a0101c);box-shadow:0 0 6px #ff3b3b}
#arena-view .score-pips-you i{background:radial-gradient(circle at 40% 35%,#d0f4ff,#2fb4ff 55%,#0b4fa8);box-shadow:0 0 6px #3fc0ff}
#arena-view .score-pips i.is-won{opacity:1;transform:translate(-50%,-50%)}
#arena-view .score-pips-rival i:nth-child(1){left:22.75%}#arena-view .score-pips-rival i:nth-child(2){left:31.25%}#arena-view .score-pips-rival i:nth-child(3){left:39.5%}
#arena-view .score-pips-you i:nth-child(1){left:60.25%}#arena-view .score-pips-you i:nth-child(2){left:68.75%}#arena-view .score-pips-you i:nth-child(3){left:77.25%}
#arena-view .scoreboard small{position:absolute;left:28%;width:44.5%;top:84%;height:10.4%;margin:0;display:grid;place-items:center;font:400 max(9px,calc(var(--hud-h)*.15))/1 'Lilita One',sans-serif;letter-spacing:.3px;color:#cfe3ff;text-shadow:0 1px 0 #050e25;white-space:nowrap}
/* The heading: the arena's name on a dark plate with gold lines running out to both sides. */
#arena-view .game-heading{position:relative;justify-content:center;background:none;border:0}
#arena-view .game-heading>div:first-child{flex:none;position:relative;gap:6px;padding:3px 18px 4px;background:linear-gradient(#0f2350,#0a1838);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,12px 100%);box-shadow:inset 0 -2px #e2b553}
#arena-view .game-heading:before{content:'';position:absolute;left:8%;right:8%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#e2b553 20%,#ffe9a0 50%,#e2b553 80%,transparent);pointer-events:none}
#arena-view .game-heading h1{font:400 clamp(12px,3.6vw,16px)/1 'Lilita One',sans-serif;letter-spacing:.5px;color:#fff1d0;text-shadow:0 2px 0 #050e25}
#arena-view .game-heading .heading-crown{width:auto;height:clamp(16px,4.8vw,22px);filter:drop-shadow(0 2px 0 #050e25)}
#arena-view .game-heading .text-button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;min-width:0;border:2px solid #8fd0ff;border-radius:50%;color:#cfeaff}
/* Short landscape screens lay the cards over the top of the court, which starts 66px down. */
@media(orientation:landscape) and (max-height:560px){#arena-view .battle-hud{--hud-h:54px;padding-top:3px}#arena-view .hud-crown{top:calc(var(--u)*-12)}}
/* Profile looks in a match (each player's own picture, ring, crown and title, sent by the server): the crown sits
   on the picture (on the VS screen it rides on the fighter on the card; .vs-crown and .vs-title are with the VS
   screen above). */
#arena-view .hud-crown{position:absolute;z-index:3;width:calc(var(--u)*72);top:calc(var(--u)*-26);left:calc(var(--u)*62);transform:rotate(-10deg);filter:drop-shadow(0 2px 0 #6b3508);pointer-events:none}
#arena-view .player-hud .hud-crown{left:auto;right:calc(var(--u)*69);transform:rotate(10deg)}
.arena-result-rewards .result-trophy{grid-row:span 2;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 0 #0008)}
.surrender-costs .surrender-trophy{width:30px;height:30px;flex:none;object-fit:contain}
/* The fight bar's pictures: the face fills the painted circle, and the player's own ring (silver, or gold once
   unlocked and chosen) covers the painted gold band. The ring is drawn larger than the box, so the box lets it out
   on three sides and only cuts the bottom at the trophy plate. */
#arena-view .fighter-hud .hud-portrait{overflow:visible}
#arena-view .fighter-hud .hud-portrait .avatar-ring{inset:auto;left:-9.44%;top:-9.44%;width:118.9%;height:118.9%}
#arena-view .player-hud .hud-portrait .avatar-ring{left:-10.67%;top:-10.67%;width:121.3%;height:121.3%}
#arena-view .fighter-hud .hud-portrait .avatar-face{left:0;top:0;width:100%;height:100%}
/* The x2 on a win that paid coins: watching an ad pays the coins again (ad-service.js). */
.arena-result-rewards:has(.ad-double){margin-top:16px}
.ad-double{position:absolute;right:-8px;top:-33px;z-index:2;display:flex;align-items:center;gap:5px;padding:4px 11px 5px 5px;border-radius:20px;border:2px solid #0d3a12;background:linear-gradient(180deg,#8cf05a,#3fbf2c 55%,#24952a);box-shadow:0 0 0 2px #fff39a,0 3px 0 #0b2a0e,inset 0 2px 0 #c8ff86;transform:rotate(7deg);color:#fff;font:400 17px/1 'Lilita One',sans-serif;letter-spacing:.4px;-webkit-text-stroke:1px #0d3a12;paint-order:stroke fill;text-shadow:0 2px 0 #0d3a12;cursor:pointer;animation:ad-double-bob 1.1s ease-in-out infinite alternate}
.ad-double i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 0 #0d3a12}
.ad-double i:before{content:'';margin-left:3px;border-left:9px solid #24952a;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ad-double:disabled{cursor:progress;animation:none;filter:saturate(.6)}
.ad-double.done{background:linear-gradient(180deg,#2a457e,#152954);border-color:#052039;box-shadow:0 0 0 2px #f6b923,0 3px 0 #080b25;animation:none;filter:none;cursor:default}
.ad-double.done i{background:#ffd23f}
.ad-double.done i:before{margin:0;border:0;width:9px;height:5px;border-left:3px solid #152954;border-bottom:3px solid #152954;transform:rotate(-45deg) translate(1px,-1px)}
@keyframes ad-double-bob{from{transform:rotate(7deg) scale(1)}to{transform:rotate(7deg) scale(1.07)}}
.reduce-motion .ad-double{animation:none}
.test-ad{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:14px;padding:16px;background:#05091a;color:#e8eefc;text-align:center;font:700 14px system-ui,sans-serif}
.test-ad strong{font:400 34px 'Lilita One',sans-serif;letter-spacing:1px;color:#fff1d0}
.test-ad-box{width:min(260px,100%);height:150px;border-radius:14px;border:2px dashed #6c87c4;display:grid;place-items:center;padding:0 16px;color:#b9cbef;font:400 18px 'Lilita One',sans-serif;letter-spacing:1px}
.test-ad-count{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;padding:6px 12px;border-radius:16px;background:#ffffff1f;font-size:13px}
.test-ad-close{position:absolute;top:max(14px,env(safe-area-inset-top));left:14px;width:36px;height:36px;border-radius:50%;border:0;background:#ffffff1a;color:#e8eefc;font-size:16px;cursor:pointer}
.test-ad-bar{width:min(260px,100%);height:8px;border-radius:4px;background:#ffffff22;overflow:hidden}
.test-ad-bar b{display:block;height:100%;width:0;background:#ffd23f;transition:width .2s linear}
/* The last stand (moments.js): under 15% health the court's edges glow red, beating with the heartbeat (800 ms). */
.court-wrap.last-stand:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 40px 12px #e2002aa6;animation:last-stand .8s ease-out infinite}
@keyframes last-stand{0%,100%{opacity:.55}10%{opacity:1}26%{opacity:.7}36%{opacity:.95}}
.reduce-motion .court-wrap.last-stand:after{animation:none;opacity:.8}
/* Royal Courtyard look (owner's ChatGPT mockup, 2026-11-02; pieces cut by scripts/arena-art/cut.mjs into
   assets/hud/courtyard). Positions are in the pieces' own pixels: --u is one pixel of the 340px-tall player panels. */
.app-shell.arena-mode{background:#071438 url('/assets/hud/courtyard/background.webp') center/cover}
.app-shell.arena-mode .topbar,#arena-view .game-heading,#arena-view .battle-hud,.arena-mode .arena-footer{background:none;border:0;box-shadow:none}
/* In a match the top bar keeps only the way back and the sound, as round gold buttons, and the arena's banner and
   the help button are pulled up into it (the heading is the same height and lets taps through to the bar). */
.arena-mode .topbar :is(.coin-balance,#top-profile,#fullscreen-toggle,.battle-wordmark){display:none}
.app-shell.arena-mode .topbar{height:calc(54px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0!important;align-items:center}
.app-shell.arena-mode>main{overflow:visible}
.arena-mode .court-wrap{background:none}.arena-mode .court-wrap:before{display:none}
#arena-view .game-heading{position:relative;z-index:2;height:54px;min-height:0;margin-top:-54px;padding:0;pointer-events:none}
#arena-view .game-heading .text-button{right:56px;pointer-events:auto}
.arena-mode .topbar :is(.battle-back,#sound-toggle),#arena-view .game-heading .text-button{border:0;border-radius:50%;background:url('/assets/hud/courtyard/round-button.webp') center/100% 100%;box-shadow:none;color:#fff}
.arena-mode .topbar :is(.battle-back,#sound-toggle){width:36px;height:36px}
/* The arena's name on the gold banner (its crown is painted, so the small one goes). */
#arena-view .game-heading>div:first-child{height:52px;aspect-ratio:900/267;padding:21px 0 0;justify-content:center;background:url('/assets/hud/courtyard/title-banner.webp') center/100% 100%;clip-path:none;box-shadow:none}
#arena-view .game-heading:before,#arena-view .game-heading .heading-crown{display:none}
#arena-view .game-heading h1{font-size:11px;-webkit-text-stroke:2px #050e25;paint-order:stroke fill}
#arena-view .game-heading .text-button{width:32px;height:32px}
/* Very narrow phones: a smaller banner, so its laurels stay clear of the help button. */
@media(max-width:340px){#arena-view .game-heading>div:first-child{height:44px;padding-top:18px}#arena-view .game-heading h1{font-size:9.5px}}
/* Player panels: the ring end and the tip keep their shape, only the plate between them stretches. */
#arena-view .fighter-hud{--u:calc(var(--hud-h)/340);border-image:url('/assets/hud/courtyard/panel-red.webp') 0 147 0 362 fill/0 calc(var(--u)*147) 0 calc(var(--u)*362) stretch}
#arena-view .player-hud{--u:calc(var(--hud-h)/340);border-image:url('/assets/hud/courtyard/panel-blue.webp') 0 360 0 156 fill/0 calc(var(--u)*360) 0 calc(var(--u)*156) stretch}
#arena-view .fighter-hud .hud-portrait{left:calc(var(--u)*44);top:calc(var(--u)*50);width:calc(var(--u)*230);height:calc(var(--u)*234);clip-path:none}
#arena-view .player-hud .hud-portrait{left:auto;right:calc(var(--u)*48);top:calc(var(--u)*50);width:calc(var(--u)*227);height:calc(var(--u)*234);clip-path:none}
#arena-view .fighter-hud .fighter-title{left:calc(var(--u)*322);right:calc(var(--u)*110);top:calc(var(--u)*40);height:calc(var(--u)*80)}
#arena-view .player-hud .fighter-title{left:calc(var(--u)*110);right:calc(var(--u)*322);top:calc(var(--u)*40)}
#arena-view .fighter-hud .health-track{left:calc(var(--u)*322);right:calc(var(--u)*104);top:calc(var(--u)*214);height:calc(var(--u)*54);clip-path:none;border-radius:calc(var(--u)*27);overflow:hidden}
#arena-view .player-hud .health-track{left:calc(var(--u)*104);right:calc(var(--u)*322);top:calc(var(--u)*214)}
/* Trophies under the name, as in the mockup, instead of on a plate under the picture. */
#arena-view .fighter-hud .hud-trophies{left:calc(var(--u)*322);top:calc(var(--u)*120);height:calc(var(--u)*80);min-width:0;padding:0;transform:none;justify-content:flex-start;background:none;clip-path:none;color:#fff}
#arena-view .fighter-hud .hud-trophies:before{display:none}
#arena-view .player-hud .hud-trophies{left:auto;right:calc(var(--u)*322);top:calc(var(--u)*120);height:calc(var(--u)*80);transform:none;justify-content:flex-end}
/* A crowned portrait's crown sits centred on top of the ring. */
#arena-view .hud-crown{width:calc(var(--u)*115);top:calc(var(--u)*-26);left:calc(var(--u)*101.5)}
#arena-view .player-hud .hud-crown{left:auto;right:calc(var(--u)*104)}
@media(orientation:landscape) and (max-height:560px){#arena-view .hud-crown{top:calc(var(--u)*-3)}}
/* The score: gold digits either side of a colon in the badge's dark middle, BEST OF 3 on the ribbon. The round
   pips under the digits go (the digits say the same). */
#arena-view .battle-hud{grid-template-columns:minmax(0,1fr) calc(var(--hud-h)*1.45) minmax(0,1fr)}
#arena-view .scoreboard{aspect-ratio:600/465;margin:0 calc(var(--hud-h)*-.1);background-image:url('/assets/hud/courtyard/score-badge.webp')}
#arena-view .scoreboard:before{content:':';position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font:400 calc(var(--hud-h)*.4)/1 'Lilita One',sans-serif;color:#ffd84a;text-shadow:0 2px #6c3e1c}
#arena-view .score-digit{top:52%;width:22%;height:32%}
#arena-view #opponent-score{left:34%}
#arena-view #player-score{left:66%}
#arena-view .score-pips{display:none}
#arena-view .scoreboard small{left:22%;width:56%;top:74%;height:15%}
/* The ability button sits in the gold winged ring; the ring's hole is the charge track's outer edge. */
.ability-button .ability-bezel{inset:auto;left:calc(var(--k)*-19.3);top:calc(var(--k)*-4.7);width:calc(var(--k)*160);height:calc(var(--k)*136.8);border-radius:0;background:url('/assets/hud/courtyard/button-ring.webp') center/100% 100% no-repeat;box-shadow:none;z-index:1}
.ability-button .ability-stud{display:none}
/* Short landscape screens keep their own corner layout (the bar and the bottom bar are for portrait phones). */
@media not ((orientation:landscape) and (max-height:560px)){
  /* The round and the clock share one gold-edged bar across the top of the court. */
  .arena-mode .round-strip{left:3%;right:3%;transform:none;height:clamp(30px,8.6vw,38px);padding:0 0 0 6%;justify-content:flex-start;border:0;border-radius:0;box-shadow:none;background:url('/assets/hud/courtyard/round-bar.webp') center/100% 100%}
  .arena-mode #battle-clock{top:calc(8px + clamp(30px,8.6vw,38px)/2);right:calc(3% + 5%);transform:translateY(-50%);display:flex;align-items:center;gap:5px;padding:0 0 0 12px;min-width:0;border:0;border-left:2px solid #e2b55366;border-radius:0;background:none;box-shadow:none}
  .arena-mode #battle-clock:before{content:'';width:15px;height:15px;border-radius:50%;border:2.5px solid #ffd23f;box-sizing:border-box;background:conic-gradient(#ffd23f 0 25%,transparent 0)}
  .arena-mode #battle-clock.urgent{background:none;border-color:#e2b55366;box-shadow:none;color:#ff6b6b}
  /* While the bar is away (picks, match end) the clock is a pill of its own again. */
  .arena-mode .court-wrap:is(:has(#pick-stage:not([hidden])),:has(#match-end:not([hidden]))) #battle-clock{top:8px;right:10px;transform:none;padding:4px 9px 5px 8px;border:1px solid #d9b25a88;border-radius:999px;background:#0b1631e6}
  /* The curved bottom bar behind the emote button and the ability button. */
  .arena-mode .arena-footer{background:url('/assets/hud/courtyard/bottom-bar.webp') center bottom/100% min(100%,120px) no-repeat}
}
/* Eddy's hidden custom match setup (app.js showCustomSetup, /?custom). */
.custom-setup .custom-side{width:100%;margin:0;padding:8px 10px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border:2px solid #b8bfd0;border-radius:12px}
.custom-setup legend{padding:0 6px;font:400 18px 'Lilita One',sans-serif;color:#fff1d0}
.custom-setup label{display:grid;gap:3px;font-size:12px;font-weight:800;color:#ffd9cf;text-align:left}
.custom-setup select{width:100%;min-height:38px;border-radius:8px;font-size:14px}