.arena-mode .pick-stage{grid-area:1/1;z-index:5;position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:calc(100% - 16px);max-width:476px;max-height:calc(100% - 16px);padding:8px 9px 11px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.pick-stage::-webkit-scrollbar{display:none}
.arena-mode .pick-stage:has(.round-outcome:not([hidden])){align-self:start;margin-top:5px}
.arena-mode .pick-stage .draft-panel{width:100%;max-width:none;max-height:none;flex-shrink:0;margin:0;animation:picker-arrive .35s ease-out both;padding:17px 13px 18px}
.arena-mode .pick-stage .draft-title{gap:7px;margin-bottom:14px;align-items:center}
.arena-mode .pick-stage .draft-title h2{font-size:clamp(23px,5.6vw,29px);margin:0;flex:1;min-width:0;letter-spacing:0}
.pick-title-meta{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;min-width:48px}
.arena-mode .pick-title-meta .round-badge{font-size:9px;line-height:1;padding:4px 6px;border-radius:5px}
.pick-countdown{min-width:42px;min-height:24px;display:grid;place-items:center;padding:3px 6px;border-radius:7px;border:1px solid #80cfff88;background:linear-gradient(#193e66,#0c2545);box-shadow:inset 0 1px #a8e1ff44,0 2px #05152b;font:400 17px/1 'Lilita One',sans-serif;color:#e4f6ff;font-variant-numeric:tabular-nums}
.pick-countdown.is-urgent{color:#ffe9a1;border-color:#ffc75f;background:linear-gradient(#853b28,#5b201d)}
/* Opponent status pill from Eddy's pictures (2026-11-06): navy + gold rim with a gold hourglass while the rival picks,
   dark green + mint rim with a cream tick once they are ready. Lettering in cream Lilita One like the rest of the HUD. */
.opponent-pick-status{display:flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;max-width:100%;min-height:38px;padding:6px 22px 7px 18px;border:2.5px solid #f2c13a;border-radius:999px;background:linear-gradient(180deg,#14266b,#0b1a52 55%,#0a1748);box-shadow:0 0 0 1.5px #7a4f0a,inset 0 0 0 1.5px #050d33,inset 0 2px 0 #3a52a466,0 4px 9px #0007;font:400 17px/1 'Lilita One',sans-serif;letter-spacing:.3px;color:#fbeccb;text-shadow:0 2px 0 #050b26,0 0 1px #050b26;white-space:nowrap}
.opponent-pick-status:before{content:'';display:block;flex:none;width:17px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 42'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23b8740f'/%3E%3Cstop offset='.45' stop-color='%23ffe27a'/%3E%3Cstop offset='1' stop-color='%23c0800f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 5h18c0 9-6 12-7 16 1 4 7 7 7 16H6c0-9 6-12 7-16-1-4-7-7-7-16z' fill='%23fdf4d8' fill-opacity='.35' stroke='%23e9b640' stroke-width='1.6'/%3E%3Cpath d='M9.5 11h11c-1 4-4.5 6-5.5 9-1-3-4.5-5-5.5-9z' fill='%23f3c64a'/%3E%3Cpath d='M15 22v8' stroke='%23f3c64a' stroke-width='1.4'/%3E%3Cpath d='M8.5 36c1.5-4 4-5 6.5-6 2.5 1 5 2 6.5 6z' fill='%23f3c64a'/%3E%3Crect x='2' y='1' width='26' height='5' rx='2' fill='url(%23g)' stroke='%237a4f0a' stroke-width='1'/%3E%3Crect x='2' y='36' width='26' height='5' rx='2' fill='url(%23g)' stroke='%237a4f0a' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 2px 0 #050b26);transform-origin:50% 50%;animation:opponent-picking 2.4s ease-in-out infinite}
.opponent-pick-status.is-ready{background:linear-gradient(180deg,#0b4024,#06341c 55%,#052c17);border-color:#4fe08f;box-shadow:0 0 0 1.5px #13603a,inset 0 0 0 1.5px #021a0d,inset 0 2px 0 #3fa26a55,0 4px 12px #2bff8a26;text-shadow:0 2px 0 #02180c,0 0 1px #02180c}
.opponent-pick-status.is-ready:before{width:19px;height:17px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 34'%3E%3Cpath d='M5 18l9 9L33 6' fill='none' stroke='%23fbeccb' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 2px 0 #02180c);animation:opponent-ready .45s cubic-bezier(.2,1.6,.4,1) both}
.round-outcome{position:relative;flex-shrink:0;height:clamp(76px,15dvh,128px);min-height:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;isolation:isolate}
.round-outcome:before{content:'';position:absolute;width:55%;height:55%;border-radius:50%;background:#ffc6442b;filter:blur(21px);z-index:-1;animation:outcome-glow .9s ease-out both}
.round-outcome.round-defeat:before{background:#ff51342b}
.round-outcome img{display:block}
.round-outcome span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.arena-mode .pick-stage .fighter-option:disabled:not(.selected){opacity:.53;filter:saturate(.65)}
.arena-mode .pick-stage .fighter-option:disabled{cursor:default}
.arena-mode .pick-stage .selection-ability{font-size:12px;line-height:1.45;margin:14px 0 0;min-height:0;color:#ffe4a1}
.match-end-title{text-align:center;font:400 17px 'Lilita One',sans-serif;color:#e8f3ff;letter-spacing:1px}
.match-end-score{display:flex;justify-content:center;align-items:center;gap:15px;margin:15px 0;font:700 10px 'DM Sans',sans-serif;color:#b7d9ef}
.match-end-score span{display:flex;align-items:center;gap:8px}.match-end-score b{font:400 37px 'Lilita One',sans-serif;color:#ffe787}.match-end-score i{font:400 24px 'Lilita One',sans-serif;color:#9ab7d5;font-style:normal}
.match-end-prize{text-align:center;font-size:10px;color:#d7e7f5;line-height:1.5;margin:0 0 18px}
.match-end-actions{display:flex;justify-content:center;gap:30px;margin-top:17px}.match-end-actions button{font-size:10px;font-weight:800;letter-spacing:.6px;background:none;color:#bdd9f1;min-height:30px;padding:4px 10px}
@keyframes round-emblem-arrive{0%{opacity:0;transform:translateY(-25px) scale(.78);filter:drop-shadow(0 2px 3px #0003)}55%{opacity:1;transform:translateY(2px) scale(1.025)}100%{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 4px 5px #0008)}}
@keyframes outcome-glow{0%{opacity:0;transform:scale(.65)}100%{opacity:1;transform:scale(1)}}
@keyframes picker-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes opponent-picking{0%,38%{transform:rotate(0)}50%,88%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes opponent-ready{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes round-emblem-fade{from{opacity:0}to{opacity:1}}
@media(max-height:680px){.round-outcome{height:72px}.arena-mode .pick-stage{gap:7px;padding-top:5px}.arena-mode .pick-stage .draft-panel{padding:12px 10px 13px}.arena-mode .pick-stage .draft-title{margin-bottom:8px}.arena-mode .pick-stage .draft-title h2{font-size:23px}.arena-mode .pick-stage .fighter-option{min-height:108px;padding:5px 3px 9px}.arena-mode .pick-stage .fighter-option .ball-art{height:59px}.arena-mode .pick-stage .selection-ability{font-size:10px;margin-top:10px}.opponent-pick-status{font-size:15px;min-height:33px;padding:5px 18px 6px 15px}}
@media(orientation:landscape) and (max-height:560px){.arena-mode .pick-stage{max-width:450px;gap:5px}.round-outcome{height:48px}.arena-mode .pick-stage .draft-panel{padding:8px 11px}.arena-mode .pick-stage .draft-title h2{font-size:20px}.pick-title-meta{flex-direction:row}.arena-mode .pick-stage .fighter-option{min-height:65px;padding:1px 3px 4px}.arena-mode .pick-stage .fighter-option .ball-art{height:33px;margin:0}.arena-mode .pick-stage .option-name{font-size:15px}.opponent-pick-status{min-height:27px;font-size:13px;padding:3px 15px 4px 12px}.arena-mode .pick-stage .selection-ability{margin-top:6px}}
.reduce-motion .round-outcome:before,.reduce-motion .arena-mode .pick-stage .draft-panel,.reduce-motion .opponent-pick-status:before{animation:none}
.round-outcome{height:auto}
/* After a round the WIN/DEFEAT plate sits above the picker, so both shrink a little to fit without scrolling. */
.arena-mode .pick-stage:has(.round-outcome:not([hidden])){gap:6px;padding-top:2px}
.pick-stage:has(.round-outcome:not([hidden])) .round-outcome{padding-top:2px}
/* The round's WIN!/DEFEAT plate: Codex's painted Royal shield (Eddy's pick A, 2026-11-06). The word is painted in; the
   round number sits on the picture's blank tab (88.7% down, about a quarter of its width), sized to the picture. The
   match-end screen uses it too: VICTORY! (is-victory, a wider picture) or the same DEFEAT, with the score on the tab. */
.round-plate{position:relative;height:104px;aspect-ratio:722/300;container-type:size;transform-origin:50% 65%;animation:round-emblem-arrive .85s cubic-bezier(.17,.8,.25,1) both}
.round-plate.is-victory{aspect-ratio:790/300}
.round-plate img{display:block;width:100%;height:100%;object-fit:contain}
.round-plate small{position:absolute;left:0;right:0;top:88.7%;transform:translateY(-50%);text-align:center;font:400 11px/1 'Lilita One',sans-serif;font-size:11cqh;letter-spacing:.08em;color:#fff1d0;text-shadow:0 1px 0 #0a1a4a;white-space:nowrap}
.round-defeat .round-plate small{color:#ffe7d6;text-shadow:0 1px 0 #3a0610}
.reduce-motion .round-plate{animation:round-emblem-fade .45s ease-out both;transform:none}
@media(max-height:680px){.round-plate{height:86px}}
.arena-mode .pick-stage:has(.round-outcome:not([hidden])) .draft-panel{padding:12px 11px 12px}
.arena-mode .pick-stage:has(.round-outcome:not([hidden])) .draft-title{margin-bottom:9px}
.arena-mode .pick-stage:has(.round-outcome:not([hidden])) .draft-title h2{font-size:clamp(21px,5vw,25px)}
.arena-mode .pick-stage:has(.round-outcome:not([hidden])) .fighter-option{min-height:118px;padding:7px 3px 10px}
.arena-mode .pick-stage:has(.round-outcome:not([hidden])) .fighter-option .ball-art{height:62px;margin-bottom:4px}
.arena-mode .pick-stage:has(.round-outcome:not([hidden])) .selection-ability{margin-top:9px;font-size:11px}
/* Keep clear space between the WIN/DEFEAT plate (with its gold ring) and the opponent status pill. */
.pick-stage:has(.round-outcome:not([hidden])) .round-outcome{margin-bottom:9px}
/* The rival's squad under the pick panel (renderRivalSquad): a red strip, one tile per fighter, the one they sent last
   round tagged WON (gold) or LOST (grey). */
.rival-squad{display:flex;align-items:center;gap:8px;width:100%;flex-shrink:0;box-sizing:border-box;padding:7px 10px;border-radius:16px;background:linear-gradient(#8e1e2c,#5a0f1a);border:3px solid #f2c14e;box-shadow:0 6px 14px #0008,inset 0 2px 0 #ff8a9a55;animation:picker-arrive .35s .1s ease-out both}
.rival-squad[hidden]{display:none}
.rival-squad h3{margin:0;width:62px;flex-shrink:0;font:400 15px/1.05 'Lilita One',sans-serif;color:#ffe0e6;letter-spacing:.4px}
.rival-fighter{position:relative;flex:1;min-width:0;height:64px;border-radius:12px;background:#2a0710;box-shadow:inset 0 2px 4px #0008;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rival-fighter .ball-art{width:44px;height:44px;margin-top:-4px}
.rival-fighter span{font:400 11px 'Lilita One',sans-serif;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rival-fighter em{position:absolute;top:-9px;right:-4px;font:normal 400 10px 'Lilita One',sans-serif;padding:2px 5px;border-radius:6px;white-space:nowrap}
.rival-fighter em.won{background:linear-gradient(#ffe27a,#f2b51e);color:#3a2200}
.rival-fighter em.lost{background:#3b4660;color:#cfd8ea}
/* Short phones: a slimmer strip (pictures only) so it fits under the panel with the round's WIN/DEFEAT plate. */
@media (max-height:720px){
  .arena-mode .pick-stage:has(.rival-squad:not([hidden])){gap:6px;padding-bottom:4px}
  .arena-mode .pick-stage:has(.rival-squad:not([hidden])) .draft-panel{padding:11px 12px 12px}
  .arena-mode .pick-stage:has(.rival-squad:not([hidden])) .draft-title{margin-bottom:9px}
  .pick-stage:has(.rival-squad:not([hidden])) .round-plate{height:86px}
  .pick-stage:has(.rival-squad:not([hidden])) .round-outcome{padding-top:2px}
  .rival-squad{padding:4px 8px;border-width:2px;border-radius:13px}
  .rival-squad h3{font-size:12px;width:50px}
  .rival-fighter{height:32px;border-radius:9px}
  .rival-fighter .ball-art{width:30px;height:30px;margin:0}
  .rival-fighter span{display:none}
  .rival-fighter em{top:-7px;right:-2px}
}
/* After the short-phone block, so landscape keeps the smallest plate even with the rival squad showing. */
@media(orientation:landscape) and (max-height:560px){.round-plate,.pick-stage:has(.rival-squad:not([hidden])) .round-plate{height:56px}}