/* Bold, toy-like arena lobby: play on the left, wizard and loot on the right. */
body.in-menu #lobby{grid-template-columns:minmax(290px,.9fr) minmax(340px,1.1fr);padding:18px 4%;gap:12px 34px;background:radial-gradient(ellipse at 70% 38%,#8861d699,transparent 48%),repeating-conic-gradient(from 8deg at 72% 40%,#ffffff03 0deg 12deg,transparent 12deg 24deg),linear-gradient(145deg,#201443,#37215d 55%,#123c50)}
#lobby .title-content{max-width:500px}#lobby .game-title h1{font-size:clamp(38px,5vw,68px);letter-spacing:-3px;filter:drop-shadow(0 5px #160c31)}#lobby .game-title>p{display:none}
#lobby .game-menu{max-width:none;gap:10px}#lobby .play-panel{padding:18px;border:2px solid #b99aea;border-radius:24px;background:linear-gradient(140deg,#74539b,#3b275c);box-shadow:0 7px #160e31}
#lobby .play-panel-heading{font-size:14px;color:white}#lobby .game-menu .mode-picker button{min-height:84px;border:2px solid #baa1df;border-bottom-width:6px;border-radius:16px;background:#34264f;font-size:14px}#lobby .game-menu .mode-picker button[aria-pressed=true]{background:linear-gradient(#66c5b6,#227e83);border-color:#fcdb80;transform:translateY(-3px)}#lobby .mode-picker strong{font-size:34px}#lobby .game-menu .play-big{font-size:clamp(24px,2.8vw,34px);padding:18px;border:2px solid #fde9b4;border-bottom:7px solid #9a8446;background:linear-gradient(#fcd77b,#eac458);color:#3a2f24;box-shadow:0 4px #192431;border-radius:16px;text-shadow:0 1px #fff8}#lobby .play-big:hover{filter:brightness(1.1);transform:translateY(-2px)}
#lobby .selected-mode-description,#lobby #next-bot,#lobby .queue-note,#lobby .online-preview,#lobby .solo-record{display:none}#lobby .selected-mode-title{font-size:16px}#lobby .menu-secondary{font-size:14px}#lobby .menu-secondary small{display:none}
#lobby .wizard-showcase{min-height:160px;border:0;background:radial-gradient(ellipse at 70% 80%,#b293ff44,transparent 70%);box-shadow:none;overflow:visible;margin-bottom:6px;padding:14px}.showcase-copy strong{font-size:27px}.showcase-tag{font-size:13px}#lobby .wizard-showcase .hero-art{zoom:1.25}
.chest-action{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:118px;padding:12px 18px;margin:0 0 16px;text-align:left;overflow:hidden;border:2px solid #e8cbff;border-bottom:7px solid #482975;border-radius:22px;background:linear-gradient(115deg,#7957af,#493479);color:#fff;box-shadow:0 5px #150c31;cursor:pointer;font:inherit}.chest-action img{width:116px;height:96px;object-fit:contain;filter:drop-shadow(0 4px 5px #160a4488)}.chest-copy{display:flex;flex:1;flex-direction:column;gap:5px}.chest-copy strong{font-size:clamp(22px,2.5vw,32px);font-weight:1000;line-height:1.1;text-shadow:0 2px #643818}.chest-copy small{font-size:14px;font-weight:700}.chest-copy progress{width:100%;height:9px;accent-color:#fcdb80}.chest-arrow{font-size:28px}.chest-spark{position:absolute;left:95px;top:8px;color:#fff3b0;font-size:25px}.chest-action.ready{background:linear-gradient(110deg,#ffe37e,#ffae46);border-color:#fff6bd;border-bottom-color:#c8752d;color:#492c1b}.chest-action.ready img{animation:loot-bob 2.5s ease-in-out infinite}.chest-action.ready .chest-copy progress{display:none}.chest-action.ready:hover{filter:brightness(1.08)}
#lobby .hub-nav{gap:10px}#lobby .menu-group{padding:0;border:0;background:none}#lobby .menu-group h2{display:none}#lobby .hub-nav button{min-height:46px;font-size:15px;border:2px solid #bc9bda;border-bottom:5px solid #35224f;background:linear-gradient(#785994,#51356a);border-radius:12px}#lobby #treasure-button{display:none}#lobby .journey-next{font-size:14px!important;margin:8px auto 0!important}#lobby #loadout-preview{display:none}#lobby .game-bottom{font-size:11px;opacity:.65}
.first-duel-hint{position:fixed;top:90px;left:50%;transform:translateX(-50%);z-index:8;display:grid;gap:6px;padding:13px 22px;border:2px solid #fcdc87;border-radius:16px;background:#231936e8;box-shadow:0 5px #11091f77;text-align:center;pointer-events:none;color:#fff;font-size:14px}.first-duel-hint strong{font-size:23px;color:#fcde8f}
@keyframes loot-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@media(min-width:751px) and (max-height:760px){body.in-menu #lobby{padding:10px 3%;gap:8px 24px}#lobby .game-title h1{font-size:40px}#lobby .rank-mini{height:45px}#lobby .rank-progress-box{margin-top:5px;padding:7px 10px}#lobby .rank-track{margin:5px 0 0}#lobby .wizard-showcase{min-height:105px;padding:8px}#lobby .wizard-showcase .hero-art{zoom:.85}#lobby .showcase-tag{display:none}#lobby .play-panel{padding:12px}#lobby .game-menu .mode-picker button{min-height:65px}#lobby .game-menu .play-big{padding:12px;font-size:25px}#lobby .selected-mode{display:none}.chest-action{min-height:98px;margin-bottom:10px;padding:8px 14px}.chest-action img{width:94px;height:76px}#lobby .hub-nav button{min-height:38px;padding:6px;font-size:13px}#lobby .journey-next{padding:6px 12px!important}}
@media(max-width:750px){body.in-menu #lobby{grid-template-columns:1fr;gap:8px;padding:12px}#lobby .wizard-showcase{min-height:90px}#lobby .game-menu .mode-picker button{min-height:55px}#lobby .game-menu .play-big{padding:10px;font-size:24px}.chest-action{min-height:88px}.chest-action img{width:80px;height:64px}#lobby .hub-nav button{font-size:13px}.first-duel-hint{width:85%;top:72px;box-sizing:border-box}}
@media(prefers-reduced-motion:reduce){.chest-action.ready img{animation:none}}
/* Collection hub: fixed game chrome, illustrated tiles, a horizontal league map. */
#hub-dialog{box-sizing:border-box;width:min(1240px,96vw);max-width:96vw;height:92svh;max-height:92svh;padding:0;border:3px solid #141733;border-radius:24px;background:radial-gradient(ellipse at 80% 0,#514595,transparent 55%),#202d57;box-shadow:0 12px #10152d,0 30px 100px #0009;overflow:hidden;color:#fff}
#hub-dialog[open]{display:flex;flex-direction:column}#hub-dialog .hub-heading{flex:none;padding:18px 24px;background:linear-gradient(110deg,#427dde,#6659cd);border-bottom:4px solid #17274d;transform:none}#hub-title{font-size:30px!important;font-weight:1000;letter-spacing:-1px;text-shadow:0 3px #263765}#hub-close{background:#e55e83;border:2px solid #ffb5c9;border-bottom:5px solid #873e69;color:white;font-size:18px;border-radius:12px;padding:9px 16px}#hub-tabs{flex:none;margin:0!important;padding:12px 18px;display:flex;flex-wrap:nowrap;gap:7px;background:#17213f;overflow-x:auto}#hub-tabs button{flex:1;white-space:nowrap;font-size:14px;font-weight:900;padding:12px 10px;border:2px solid #5c72ab;border-bottom:5px solid #10182f;border-radius:11px;background:#354771;color:#eaf2ff}#hub-tabs button[aria-pressed=true]{background:#ffe07c;border-color:#fff4c3;border-bottom-color:#b98336;color:#4a331e;transform:translateY(-2px)}#hub-content{padding:22px;overflow:auto;min-height:0;scrollbar-color:#7694ce #182344;scrollbar-width:thin}#hub-content h3{font-weight:900}#hub-content button{font-weight:900}#hub-content button:not(:disabled):hover{filter:brightness(1.12)}
.atlas-banner{display:flex;align-items:center;gap:22px;padding:18px 24px;border:2px solid #78a6e2;border-radius:18px;background:linear-gradient(115deg,#335ba2,#373769);box-shadow:0 5px #152344}.atlas-emblem img{width:88px;height:88px}.atlas-banner h2{margin:3px 0;font-size:32px}.atlas-banner b{color:#ffe892;font-size:24px}.atlas-banner b span{font-size:14px}.atlas-banner small{color:#cddffe}.atlas-progress{display:grid;gap:9px;margin-left:auto;min-width:220px}.atlas-progress progress{width:100%;height:15px;accent-color:#f7d575}.atlas-caption{display:flex;justify-content:space-between;gap:12px;padding:22px 4px 14px}.atlas-caption span{color:#b7c9e9;font-size:13px}.rank-atlas{display:flex;gap:24px;overflow-x:auto;padding:12px 4px 24px;scroll-snap-type:x proximity;position:relative;background:linear-gradient(transparent 44%,#6480b4 44%,#6480b4 46%,transparent 46%);scrollbar-color:#a6c9fc #142140;scrollbar-width:thin}.atlas-stop{position:relative;flex:0 0 205px;box-sizing:border-box;scroll-snap-align:center;display:flex;align-items:center;flex-direction:column;text-align:center;padding:14px 12px;border:2px solid #687daf;border-bottom:7px solid #111c3a;border-radius:20px;background:radial-gradient(circle at 50% 25%,#6677a0,#28385e 65%);min-height:315px}.atlas-stop.current{border-color:#fcde8b;background:radial-gradient(circle at 50% 20%,#438c9c,#274873 70%);box-shadow:0 0 24px #97ffe329}.atlas-marker{text-transform:uppercase;font-size:10px;font-weight:900;letter-spacing:1px;color:#cfdef9;background:#142441;padding:5px 10px;border-radius:7px}.current .atlas-marker{color:#413224;background:#fcdc86}.atlas-badge{height:106px;display:grid;place-items:center}.atlas-badge img{width:100px;height:100px;filter:drop-shadow(0 6px 3px #0b152b88)}.atlas-stop h3{font-size:21px;margin:4px 0}.atlas-elo{font-size:13px;color:#c8dcfb}.atlas-loot{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin:16px 0;flex:1;width:100%}.atlas-loot>span{display:flex;align-items:center;flex-direction:column;max-width:54px}.atlas-loot img{width:42px;height:42px;border-radius:9px}.atlas-loot small{font-size:9px;line-height:1.15;margin-top:4px;color:#e2edff}.atlas-coins{font-size:34px;color:#ffdc78}.atlas-status{font-size:11px;color:#ccdaf5}.atlas-claim{padding:10px;border:2px solid #fff3b2;border-bottom:4px solid #af7831;background:#ffd36b;border-radius:10px;color:#493216}.atlas-rules{margin-top:14px;color:#c2d1ec;font-size:13px}.atlas-rules summary{cursor:pointer}.atlas-rules p{line-height:1.6}
#hub-dialog .card-grid,#hub-dialog .wardrobe-cards,#hub-dialog .mastery-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:18px}#hub-dialog .spell-card,#hub-dialog .wardrobe-cards article,#hub-dialog .mastery-grid article,#hub-dialog .journey-stop{border:2px solid var(--rarity,#8098c9);border-bottom-width:7px;border-radius:18px;background:linear-gradient(155deg,#476092,#2a345c);box-shadow:0 5px #111b34;overflow:hidden}#hub-dialog .card-art,#hub-dialog .wardrobe-art{background:repeating-conic-gradient(from 15deg,#ffffff08 0deg 20deg,transparent 20deg 40deg),radial-gradient(circle,#a8c5ff44,transparent 70%);border-radius:12px}#hub-dialog .spell-card button:not(:disabled),#hub-dialog .wardrobe-cards button:not(:disabled),#hub-dialog .journey-stop button:not(:disabled){background:linear-gradient(#fce19a,#e8c669);color:#403326;border:2px solid #fdecc0;border-bottom:5px solid #8a7846;border-radius:10px;padding:11px}#hub-dialog .battle-deck{background:#121f3b;border:2px solid #637fae;border-radius:18px}#hub-dialog .deck-slot{background:linear-gradient(#526fa5,#2c416c);border-radius:12px}#hub-dialog .wardrobe-top,#hub-dialog .journey-hero{background:linear-gradient(110deg,#416cb0,#4a4788);border:2px solid #8fa8df;border-radius:16px;padding:18px}#hub-dialog .bind-grid label{background:#324773}#hub-dialog .rank-choice{background:#344977}#hub-dialog #open-chest{font-size:24px;padding:18px 32px;background:#ffdb70;color:#493115;border:3px solid #fff4c2;border-bottom:7px solid #ad793b;border-radius:16px}
@media(max-width:700px){#hub-dialog{width:100vw;max-width:100vw;height:100svh;max-height:100svh;border-radius:0}#hub-dialog .hub-heading{padding:12px}#hub-title{font-size:24px!important}#hub-content{padding:12px}#hub-tabs{padding:8px!important}#hub-tabs button{font-size:12px}.atlas-banner{gap:10px;padding:12px;flex-wrap:wrap}.atlas-emblem img{width:62px;height:62px}.atlas-banner h2{font-size:25px}.atlas-progress{min-width:160px;flex:1}.atlas-caption{flex-direction:column;gap:5px}.atlas-stop{flex-basis:185px}.atlas-loot small{font-size:10px}}
.atlas-caption button{background:#456bac;color:white;border:2px solid #9ec9ff;border-bottom:4px solid #142b51;border-radius:9px;font-size:19px;padding:2px 12px;margin-left:7px;cursor:pointer}.atlas-stop:nth-child(3n+2){background:radial-gradient(circle at 50% 20%,#587d9c,#273c60 75%)}.atlas-stop:nth-child(3n+3){background:radial-gradient(circle at 50% 20%,#746695,#343257 75%)}
@media(min-width:701px) and (max-height:800px){#hub-dialog .hub-heading{padding:12px 22px}#hub-content{padding:16px 22px}.atlas-banner{padding:10px 20px}.atlas-emblem img{width:62px;height:62px}.atlas-banner h2{font-size:27px}.atlas-caption{padding:12px 4px 6px}.atlas-stop{min-height:260px;padding:10px}.atlas-badge{height:78px}.atlas-badge img{width:76px;height:76px}.atlas-loot{margin:9px 0}.atlas-loot img{width:34px;height:34px}.atlas-stop h3{font-size:20px}.atlas-rules{margin-top:5px}}
#hub-dialog[data-tab=rewards] #hub-content{text-align:center;background:repeating-conic-gradient(from 15deg at 50% 26%,#ffffff03 0deg 15deg,transparent 15deg 30deg)}#hub-dialog[data-tab=rewards] .treasure-icon{margin:5px auto;filter:drop-shadow(0 12px 24px #b59cff55);width:230px;height:160px}#hub-dialog[data-tab=rewards] #hub-content>h3{font-size:25px;margin:10px}#hub-dialog[data-tab=rewards] details{text-align:left;background:#13203d66;border-radius:12px;padding:12px 18px;margin:12px 0;color:#d3e0f8;font-size:13px}#hub-dialog[data-tab=rewards] summary{cursor:pointer;font-weight:bold}#hub-dialog[data-tab=rewards] .rank-choice{border:2px solid #ffdc86}#hub-dialog[data-tab=rewards] .rank-choice button{padding:12px;background:#ffdf80;border-radius:10px;color:#493717}
body:where([data-hub-open]):not(#_h):not(._h){overflow:hidden}#hub-tabs{scrollbar-width:thin;scrollbar-color:#718cc8 #17213f}
@media(max-width:700px) and (max-height:750px){.atlas-stop{min-height:245px;padding:9px}.atlas-badge{height:72px}.atlas-badge img{width:68px;height:68px}.atlas-loot{margin:8px 0}.atlas-loot img{width:32px;height:32px}.atlas-stop h3{font-size:19px}.atlas-caption{padding:10px 0 4px}.atlas-banner{padding:9px}.atlas-banner h2{font-size:22px}.atlas-emblem img{width:48px;height:48px}.rank-atlas{padding-top:8px}}
/* Arena-first match layout, with a compact spell dock and an end-of-battle reward panel. */
body:not(.in-menu)>header{display:none}#match{max-width:none;width:100%;padding:8px 12px!important;height:100svh;position:relative;display:flex;flex-direction:column;gap:7px}#match[hidden]{display:none}#match .heading{margin:0;min-height:36px;flex:none;align-items:center}#match .heading h1{font-size:17px;margin:0}#match .heading .eyebrow,#match .sub,#match .footer,#match>.mobile{display:none}#match .settings button{font-size:12px;padding:7px 12px}#match .arena{flex:1;min-height:0;align-self:center;aspect-ratio:1100/610;width:auto;max-width:100%;border-radius:16px;box-shadow:none}#match canvas{height:100%;width:100%;object-fit:contain;aspect-ratio:1100/610}#match .hud{top:12px;left:18px;right:18px;gap:12px;grid-template-columns:1fr 130px 1fr}#match .fighter{background:#172442d9;padding:10px 12px;border:1px solid #98d5ff66;border-radius:12px;max-width:360px}#match .fighter.enemy{border-color:#ff91b566}#match .timer{background:#182140e8;border:2px solid #8582c4;border-bottom:5px solid #10152a;border-radius:13px;font-size:27px;padding:4px}#match .timer small{font-size:8px;letter-spacing:.3px}#match .health{height:9px;margin-top:6px}#match .bottom{flex:none;display:flex;justify-content:center;gap:8px;margin:0}#match .spell{flex:0 1 180px;min-height:60px;padding:8px;border:2px solid #7f82b5;border-bottom:5px solid #222840;background:linear-gradient(#4c507e,#303453);border-radius:14px}#match .spell .icon{width:39px;height:39px;flex:none}#match .spell strong{font-size:12px}#match .spell small{font-size:9px;max-width:130px}#match .spell kbd{background:#162039;color:#fff;font-size:10px;top:2px;right:4px}#match .notice{bottom:14px;text-shadow:0 2px 3px #000;font-weight:800}#match .team-roster{position:absolute;top:132px;left:22px;right:22px;z-index:3;pointer-events:none;gap:50%;margin:0}#match .team-roster[hidden]{display:none}#match .team-roster>section{padding:6px;background:#15223bad;border:0}#match .roster-member{font-size:10px;padding:3px 0}#match .roster-member small{font-size:9px}#match .roster-member b{white-space:nowrap}#match .team-roster section>strong{display:none}
#overlay[data-result]:not([data-result=""]){position:fixed;z-index:10;background:repeating-conic-gradient(from 12deg at 50% 35%,#ffffff05 0deg 15deg,transparent 15deg 30deg),radial-gradient(ellipse at top,#3c73bc,#1a2245 70%);overflow:auto}#overlay[data-result=defeat]{background:radial-gradient(ellipse at top,#80466e,#242340 70%)}#overlay[data-result]:not([data-result=""]) .modal{width:min(620px,94vw);max-width:620px;padding:22px}#overlay[data-result] .sigil{display:none}#overlay[data-result]:not([data-result=""]) .eyebrow{display:inline-block;font-size:20px;font-weight:1000;color:#26364b;background:#ffdf80;transform:rotate(-3deg);padding:9px 35px;border-radius:10px;border-bottom:5px solid #bd873b}#overlay[data-result]:not([data-result=""]) h2{font-size:clamp(32px,5vw,54px);text-shadow:0 4px #172447;margin:18px 0}#overlay[data-result] #description{margin:10px 0 18px}.result-stats{display:flex;justify-content:center;gap:10px}.result-stats>span{display:grid;flex:1;background:#101e3e88;border-radius:12px;padding:9px;font-size:11px;color:#c8dcff}.result-stats b{font-size:25px;color:white}.result-earnings{font-size:14px;color:#fde9b3;margin:12px 0}.result-chest{display:flex;align-items:center;text-align:left;gap:15px;border:2px solid #cab1ff;border-bottom:6px solid #34254f;border-radius:20px;background:linear-gradient(120deg,#77609b,#423f75);padding:10px 18px}.result-chest img{width:100px;height:85px}.result-chest>div{display:grid;flex:1;gap:3px}.result-chest strong{font-size:24px;color:#fff}.result-chest small{margin:0;color:#ffdf83;font-size:14px}.result-chest progress{width:100%;height:17px;accent-color:#fbd777;animation:reward-fill .7s ease-out}.result-chest span{font-size:11px;color:#e3dcff}#result-open-chest{width:100%;background:#ffdf75;color:#43341c;border-bottom-color:#af7b30;margin-top:12px}#overlay[data-result] #start{min-width:65%;font-size:20px}#overlay[data-result] #overlay-menu{width:auto;display:inline-block;margin-left:10px}#overlay[data-result] #hint{margin-top:10px}.result-practice{color:#b9cbed;font-size:13px}@keyframes reward-fill{from{opacity:.3;transform:scaleX(.85)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.result-chest progress{animation:none}}
@media(max-width:700px){#match{padding:5px!important}#match .heading{flex-direction:row;gap:5px}#match .heading h1{font-size:12px}#match .settings{gap:3px}#match .settings button{padding:6px;font-size:10px}#match .hud{left:6px;right:6px;top:6px;grid-template-columns:1fr 70px 1fr;gap:5px}#match .fighter{padding:5px}#match .timer{font-size:20px}#match .spell{padding:5px;min-height:55px;gap:5px}#match .spell .icon{width:30px;height:30px}#match .spell small{display:none}#match .spell strong{font-size:10px}#match .team-roster{top:117px;left:10px;right:10px;gap:30%}.result-chest strong{font-size:20px}}
#match .arena{flex:none;width:min(100%,calc((100svh - 125px)*1.80328));height:auto;aspect-ratio:1100/610;margin:auto}#match canvas{width:100%;height:auto;object-fit:fill}#match .team-roster{top:90px;left:12px;right:12px;gap:35%}.first-duel-hint{top:auto;bottom:95px;font-size:12px;padding:9px 16px}.first-duel-hint strong{font-size:19px}
#match .arena{flex:1;width:100%;height:auto;min-height:0;aspect-ratio:auto;margin:0}#match canvas{width:100%;height:100%;aspect-ratio:auto}
/* Edge-to-edge battlefield; HUD controls float over the world. */
body:not(.in-menu){overflow:hidden}#match{position:fixed;inset:0;width:100vw;height:100svh;padding:0!important;display:block}#match[hidden]{display:none}#match .arena{position:absolute;inset:0;width:100%;height:100%;max-width:none;border:0;border-radius:0;background:#261f3b}#match .heading{position:absolute;z-index:5;top:12px;left:18px;right:18px;pointer-events:none}#match .heading>div:first-child{background:#18203dcc;padding:7px 12px;border-radius:9px}#match .settings{pointer-events:auto}#match .settings button{background:#253459e8;border:2px solid #7684b1;border-bottom:4px solid #121c35;border-radius:10px;font-weight:800}#match .hud{top:58px;left:18px;right:18px}#match .bottom{position:absolute;z-index:5;right:18px;bottom:20px;display:grid;grid-template-columns:repeat(2,minmax(90px,125px));gap:7px;padding:0;pointer-events:none}#match .bottom .spell{pointer-events:auto;min-height:62px;background:linear-gradient(#4a548dee,#293358ee);box-shadow:0 4px 12px #080e2477}#match .bottom .spell[data-spell=ultimate]{grid-column:1/-1}#match .spell .icon{width:36px;height:36px}#match .spell small{display:none}#match .spell strong{font-size:11px}#match .notice{left:15px;right:290px;bottom:24px;text-align:left;font-size:11px}#match .team-roster{top:142px;left:18px;right:18px}.first-duel-hint{bottom:26px;left:20px;transform:none;width:auto;max-width:calc(100vw - 315px);text-align:left}.first-duel-hint span{font-size:11px}#match .timer{box-shadow:0 4px 12px #121a3888}
@media(max-width:700px){#match{padding:0!important}#match .heading{left:8px;right:8px;top:8px}#match .hud{top:48px;left:8px;right:8px}#match .bottom{right:10px;bottom:14px;grid-template-columns:repeat(2,100px)}#match .bottom .spell{min-height:54px}#match .notice{right:220px;bottom:16px;font-size:10px}#match .team-roster{top:125px;left:8px;right:8px}.first-duel-hint{left:10px;bottom:16px;max-width:calc(100vw - 235px);padding:9px}.first-duel-hint strong{font-size:16px}.first-duel-hint span{font-size:10px}}
#match .bottom .spell>span:nth-child(2){padding-top:10px}#match .bottom .spell kbd{top:3px;right:5px;padding:1px 3px}
/* Fixed competitive field of view. Resize only the display, never the camera. */
#match canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,180svh);height:min(100svh,55.5555556vw);aspect-ratio:9/5;object-fit:fill}#match .arena{background:#151126}
/* Centered fixed 16:9 camera; backing pixels are sized separately for crisp rendering. */
#match canvas{width:min(100vw,177.7777778svh);height:min(100svh,56.25vw);aspect-ratio:16/9}
/* Arcade-style fighter ribbons and a central match clock. */
#match .hud{align-items:start;grid-template-columns:1fr 108px 1fr;gap:18px}#match .fighter{position:relative;max-width:335px;padding:10px 14px 12px;background:linear-gradient(125deg,#244e72ed,#182d50ed);border:2px solid #7ddcfd;border-bottom:5px solid #112440;border-radius:8px 22px 15px 15px;box-shadow:0 4px 0 #090f2588,0 0 18px #5bbdff18;transform:rotate(-1deg)}#match .fighter.enemy{background:linear-gradient(235deg,#743f65ed,#382646ed);border-color:#f6a0bd;border-bottom-color:#36203d;border-radius:22px 8px 15px 15px;transform:rotate(1deg)}#match .name{align-items:center;font-size:13px;font-weight:900;letter-spacing:0;gap:10px;text-shadow:0 2px #13243b}#match #player-side,#match #botname{display:flex;align-items:center;gap:7px;min-width:0}#match .hud-rank img{width:28px;height:28px;vertical-align:middle;filter:drop-shadow(0 2px #152137)}#match #php,#match #bhp{font-size:16px;color:white;padding:3px 7px;background:#10213d80;border-radius:8px;white-space:nowrap}#match #php:before,#match #bhp:before{content:"";display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;background:url("art/ui-heart-glyph.svg") center/contain no-repeat;font-size:12px;color:#9cffdc}#match #bhp:before{color:#ffc1da}#match .health{position:relative;height:15px;margin-top:7px;border:2px solid #10203c;background:#10192a;border-radius:6px;box-shadow:0 1px #ffffff30;overflow:hidden}#match .health i{background:linear-gradient(#beffe8 0%,#56e5b4 52%,#2bb991 53%);box-shadow:inset 0 2px #ffffff99}#match .enemy .health i{background:linear-gradient(#ffd5e6,#fb82b5 52%,#cf528c 53%)}#match .health:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0%,transparent calc(10% - 1px),#11254250 calc(10% - 1px),#11254250 10%);pointer-events:none}#match #bot-rating{display:block;font-size:9px;color:#ffd3e8;letter-spacing:0;margin-top:3px;line-height:1.3}#match .timer{position:relative;background:linear-gradient(#ffe9a3,#ffcd66);border:3px solid #fff3c8;border-bottom:6px solid #b77a32;color:#413022;border-radius:12px 12px 25px 25px;box-shadow:0 5px #15152c80;transform:translateY(-4px);padding:7px 5px 9px;font-size:30px;text-shadow:0 1px #fff6}#match .timer:before{content:'MATCH TIME';display:block;font-size:8px;letter-spacing:1px;font-weight:900;margin-bottom:2px}#match .timer small{color:#624728;font-size:8px;font-weight:800;margin-top:3px}#match .timer.urgent{background:linear-gradient(#ffbd9d,#ff697a);border-color:#ffd7c2;border-bottom-color:#a33b54;color:#502332}#match .timer.urgent #time{animation:clock-pulse 1s ease-in-out infinite}#match .bottom .spell[data-spell=ultimate]{grid-column:1/-1;border-color:#ffe9a5;border-bottom-color:#926238;background:linear-gradient(115deg,#8860a4ee,#43366eee);min-height:57px;justify-content:center;box-shadow:0 0 15px #e7bd5922}#match .spell[data-spell=ultimate] strong{color:#ffe9a5;font-size:13px}#match .spell[data-spell=ultimate] strong:before{content:'ULTIMATE · ';font-size:10px}#match .spell[data-spell=ultimate][hidden]{display:none}#match .team-roster{top:166px}
@keyframes clock-pulse{50%{opacity:.65}}@media(prefers-reduced-motion:reduce){#match .timer.urgent #time{animation:none}}@media(max-width:700px){#match .hud{grid-template-columns:1fr 80px 1fr;gap:8px}#match .fighter{padding:6px 8px 8px}#match .name{font-size:10px;gap:4px}#match #php,#match #bhp{font-size:12px;padding:2px 4px}#match .hud-rank img{width:20px;height:20px}#match .timer{font-size:25px}#match .health{height:12px}#match .team-roster{top:148px}}
#match .team-roster{display:grid;grid-template-columns:minmax(0,210px) minmax(0,210px);justify-content:space-between;gap:12px;top:158px;left:18px;right:18px;width:auto;max-width:none;pointer-events:none}#match .team-roster[hidden]{display:none}#match .team-roster>section{min-width:0;padding:0;background:none;border:0;overflow:hidden}.battle-member{padding:8px 9px;margin-bottom:7px;background:#162945db;border:1px solid #72cef56b;border-radius:12px}.team-roster>section+section .battle-member{background:#38233fdb;border-color:#ed91b26b}.battle-name{display:flex;align-items:center;gap:5px;font-size:10px}.battle-name img{width:21px;height:21px;flex:none}.battle-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.battle-name>span{white-space:nowrap;font-weight:bold;color:#d9ffeb}.battle-member progress{display:block;width:100%;height:7px;margin:4px 0;accent-color:#65e5c1}.team-roster>section+section progress{accent-color:#f48ab5}.battle-spells{display:flex;align-items:center;gap:4px}.battle-spells img,.unknown-spell{width:21px;height:21px;border-radius:4px}.unknown-spell{display:grid;place-items:center;background:#ffffff15;font-size:12px;color:#cbc4e2}.battle-spells small{margin-left:auto;font-size:8px;color:#c5c8e3}.battle-member.out{opacity:.45}
@media(max-width:800px){#match .team-roster{grid-template-columns:minmax(0,150px) minmax(0,150px);left:8px;right:8px;top:140px}.battle-member{padding:5px}.battle-name{font-size:9px}.battle-name img{width:16px;height:16px}.battle-spells img,.unknown-spell{width:17px;height:17px}.battle-spells small{font-size:7px}}
/* The arena is a viewport layer, independent of all former page/grid sizing. */
body:not(.in-menu) #match:not([hidden]),body:not(.in-menu) #match:not([hidden]) .arena{position:fixed!important;inset:0!important;width:100vw!important;height:100svh!important;min-width:0!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;transform:none!important;border:0!important;border-radius:0!important;box-sizing:border-box}
body:not(.in-menu) #match canvas{position:absolute;left:50%;top:50%;right:auto;bottom:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;transform:translate(-50%,-50%);aspect-ratio:16/9}

.battle-spells>[hidden]{display:none!important}

.rank-keepsake{text-align:center;display:grid;justify-items:center;gap:8px;padding:14px;color:#ffe8b2}.rank-keepsake p{font-size:14px;line-height:1.5;margin:0;max-width:30ch;color:#cfc2e1}.rank-keepsake-art img,.rank-keepsake-art svg{width:100px;height:110px;object-fit:contain}.rank-keepsake small{color:#c7b8db}

.rank-keepsake{grid-column:1/-1;width:100%;box-sizing:border-box}.rank-keepsake-art{filter:drop-shadow(0 0 12px #b996dc44)}