@font-face{font-family:Rajdhani;src:url('assets/fonts/Rajdhani-Medium.ttf') format('truetype');font-weight:400 600;font-display:swap}
@font-face{font-family:Rajdhani;src:url('assets/fonts/Rajdhani-Bold.ttf') format('truetype');font-weight:700 900;font-display:swap}
:root{font-family:Rajdhani,'Arial Narrow',sans-serif;color:#fff8e8;background:#111e27;--gold:#e6c78f;--teal:#67e4dd;--orange:#ed9879}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #fff3d4;outline-offset:4px}#game-shell{width:100%;height:100%;position:relative;isolation:isolate;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,#051724a6,transparent 28%,transparent 70%,#081924d9)}
.combat-header{position:absolute;top:25px;left:30px;right:30px;display:grid;grid-template-columns:minmax(0,1fr) 134px minmax(0,1fr);align-items:start;gap:12px;z-index:2;pointer-events:none;filter:drop-shadow(0 3px 3px #05132066)}
.fighter{display:flex;align-items:flex-start;min-width:0;gap:12px}.fighter-fields{flex:1;min-width:0;padding-top:3px}.portrait-frame{width:92px;height:102px;flex-shrink:0;position:relative;background:#11232b;clip-path:polygon(0 0,84% 0,100% 16%,100% 100%,0 100%);border:2px solid var(--gold)}.portrait-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b1a22b0,transparent 45%);border-bottom:4px solid var(--teal)}.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center 33%;display:block}.player-tag{position:absolute;bottom:4px;left:7px;z-index:1;font-size:14px;letter-spacing:2px;text-shadow:1px 1px 2px #000}.name-row{display:flex;align-items:center;gap:12px;height:38px;margin-bottom:5px}.name-row h1,.name-row h2{font-size:34px;font-weight:700;font-style:italic;letter-spacing:1px;line-height:1;margin:0;text-shadow:2px 2px 0 #13232c}.class-tag{font-size:10px;font-weight:700;letter-spacing:2px;color:#d7e8e8;margin-top:6px}
.life-frame{height:24px;padding:3px;background:#0d1b25;border:1px solid #c0bbb18c;transform:skewX(-15deg);box-shadow:0 3px 0 #07162199,inset 0 1px 0 #fff4}.life-track{height:100%;width:100%;background:#3e4141;position:relative;overflow:hidden}.life-track:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#061a2336 calc(10% - 1px),#061a2336 10%)}.life-fill{height:100%;width:100%;background:linear-gradient(180deg,#dbfff0 0,#b3f2d4 25%,#49c6b9 28%,#51bdaa);box-shadow:inset 0 2px 0 #fff7;transition:width .16s ease-out}.bar-caption{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:1.4px;margin:7px 2px 0;color:#e6ece5;text-shadow:1px 1px 2px #051923}.fighter-mark{display:flex;align-items:center;gap:6px;margin:8px 3px 0;color:#bbd1cf;font-size:9px;letter-spacing:1.7px;font-weight:700}.fighter-mark i{width:7px;height:7px;background:#a7e4d0;transform:rotate(45deg);border:1px solid #fff8}.fighter-mark span{margin-left:5px}.fighter-two .name-row,.fighter-two .fighter-mark{justify-content:flex-end}.fighter-two .fighter-mark span{margin:0 6px 0 0}.fighter-two .portrait-frame{clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,0 16%)}.fighter-two .portrait-frame:after{border-color:var(--orange)}.fighter-two .player-tag{left:auto;right:7px}.fighter-two .life-fill{background:linear-gradient(180deg,#ffe6b2 0,#ffce93 25%,#eaa070 28%,#d87c59);margin-left:auto}.fighter-two .life-frame{transform:skewX(15deg)}.fighter-two .fighter-mark i{background:#dfae87}
.match-center{text-align:center;position:relative;padding-top:1px}.mode-kicker{font-size:10px;letter-spacing:2.2px;font-weight:700;color:#f5dec0;white-space:nowrap}.match-clock{height:57px;font-size:80px;font-weight:700;line-height:.77;letter-spacing:-6px;padding-right:6px;text-shadow:2px 3px 0 #0e2734,0 0 20px #091a30}.match-rule{display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;color:var(--gold);letter-spacing:2px;font-weight:700;margin-top:6px}.match-rule i{width:28px;height:1px;background:linear-gradient(90deg,transparent,#e6c78f)}.match-rule i:last-child{transform:scaleX(-1)}.match-actions{position:absolute;top:123px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}.match-actions button{width:29px;height:27px;border:1px solid #a0b5bd59;background:#1026339c;font-size:17px;line-height:1;padding:4px;display:grid;place-items:center;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}.match-actions button:hover{background:#315263}.match-actions svg{width:16px;height:16px;stroke:#e9dcc6;fill:none;stroke-width:1.5}
.bottom-hud{position:absolute;bottom:25px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:flex-end;z-index:2;gap:25px}.skill-deck{width:350px}.deck-heading{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:11px;letter-spacing:1.8px;font-weight:700;color:var(--gold)}.deck-heading i{height:1px;background:#a4c6cc55;flex:1}.deck-heading b{font-size:9px;color:#becfd3;font-weight:500}.skill-bar{display:flex;gap:10px}.skill-card{border:0;background:none;padding:0;display:flex;align-items:center;flex-direction:column;width:80px;flex-shrink:0;transition:transform .12s}.skill-art{position:relative;display:block;width:67px;height:67px;background:#12212b;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);border:1px solid #89adb0;overflow:hidden}.skill-art:after{content:'';position:absolute;inset:3px;border:1px solid #c2dbdb36;pointer-events:none}.skill-art img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .15s,opacity .15s}.skill-card kbd{position:absolute;right:0;top:0;min-width:19px;padding:1px 4px;font-family:inherit;font-size:12px;line-height:15px;font-weight:700;background:#ecddbb;color:#102731}.skill-card.basic kbd{font-size:9px}.skill-name{font-size:10px;letter-spacing:.6px;font-weight:700;margin-top:6px;line-height:1.1;text-shadow:1px 2px 2px #061a28;white-space:nowrap}.skill-card:hover .skill-art{border-color:#fff3d3}.skill-card.active{transform:translateY(-3px)}.skill-card.active .skill-art{border-color:#ffeab7}.skill-card.on-cooldown img{filter:grayscale(.9);opacity:.38}.skill-card.on-cooldown .skill-art{border-color:#5e747b}.skill-card.on-cooldown .skill-name{color:#84979d}.skill-card.ultimate .skill-art{border-color:#e6bd7b}.skill-card.ultimate kbd{background:#eac188}.skill-card.ultimate .skill-name{color:#f2c883}.combo-dots{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;gap:4px}.combo-dots i{display:block;width:10px;height:3px;background:#365961}.combo-dots i.lit{background:#fff0c9}
.stage-sign{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);text-align:center;color:#ccddd7;text-shadow:0 2px 3px #122b34;pointer-events:none}.stage-sign>span{font-size:17px;font-weight:700;letter-spacing:5px}.stage-sign small{display:block;font-size:9px;letter-spacing:4px;margin-top:1px}.stage-sign i{display:block;width:90px;height:1px;background:linear-gradient(90deg,transparent,#cbb68b,transparent);margin:9px auto 0}.training-data{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;text-align:right;min-width:205px;border-top:1px solid #c9d3c85c;padding-top:9px}.training-data>div>span{display:block;font-size:10px;letter-spacing:1.6px;color:#c5d5d4;font-weight:700}.training-data strong{display:block;font-size:39px;line-height:1.1;font-weight:700}.training-data strong small{font-size:10px;font-weight:500;color:#bacece}.reset-hint{grid-column:1/-1;margin-top:8px;color:#bccbc8;font-size:10px;letter-spacing:1px}.reset-hint span{margin-left:15px}
.combo-counter{position:absolute;right:42px;top:34%;display:flex;align-items:center;gap:9px;z-index:2;opacity:0;transform:translateX(20px) skewX(-10deg);transition:opacity .15s,transform .15s;pointer-events:none;text-shadow:2px 3px 0 #142430,0 3px 15px #122a42}.combo-counter.visible{opacity:1;transform:skewX(-10deg)}.combo-counter>span{font-size:104px;font-weight:700;line-height:.85}.combo-counter strong{font-size:29px;line-height:1;font-weight:700}.combo-counter small{display:block;font-size:13px;font-weight:700;letter-spacing:1px;color:#f0d6a8}.announcement{position:absolute;left:50%;top:26%;transform:translate(-50%,-8px) skewX(-8deg);z-index:3;font-size:39px;font-weight:700;letter-spacing:5px;text-align:center;white-space:nowrap;opacity:0;transition:opacity .15s,transform .15s;text-shadow:2px 3px 0 #112634,0 3px 12px #0d2039;pointer-events:none}.announcement.visible{opacity:1;transform:translate(-50%,0) skewX(-8deg)}
.load-state{position:absolute;inset:0;z-index:5;background:#0e202c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.load-state.hidden{display:none}.loading-glyph{font-size:50px;color:var(--gold)}.load-state strong{font-size:36px;font-weight:700;letter-spacing:6px}.load-state>span:last-child{font-size:16px;color:#b5c9ce}.load-state.error>span:last-child{max-width:430px;text-align:center;padding:15px;color:#f3bdaa}
dialog{margin:auto;background:linear-gradient(140deg,#1c303d,#101e2b);color:#f9f0dc;border:1px solid #b9c2c44f;border-top:3px solid var(--gold);padding:30px;width:440px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;box-shadow:0 20px 90px #07131cbb}dialog::backdrop{background:#031423ac;backdrop-filter:blur(5px)}.dialog-kicker{color:var(--gold);font-size:12px;letter-spacing:2px;font-weight:700}dialog h2{font-size:34px;font-weight:700;margin:8px 0;line-height:1}dialog p{font-size:16px;line-height:1.5;color:#b9cbd0;margin:10px 0 16px}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #98abb72e;font-size:17px;font-weight:700}.setting-row small{display:block;font-size:13px;font-weight:500;color:#91a7b0}.setting-row input{accent-color:#8fe3d0;width:18px;height:18px}.volume-row{display:flex;align-items:center;gap:12px;font-size:15px;padding:16px 0}.volume-row input{flex:1;min-width:0;accent-color:#84d9c6}.volume-row output{min-width:35px}.dialog-buttons{display:flex;gap:8px}.dialog-buttons button{flex:1;border:1px solid #8da8b153;background:#274352;padding:8px;font-size:15px;font-weight:700}.controls-help{font-size:15px;margin:13px 0;color:#bdd0d3}.controls-help summary{cursor:pointer}.controls-help p{font-size:14px}.primary-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:var(--gold);color:#132b37;padding:12px 15px;font-size:18px;font-weight:700}.primary-button:hover{background:#fae0b4}.text-button{display:block;margin:15px auto 0;border:0;background:none;color:#bccecf;font-size:15px;padding:5px}
@media(min-width:1600px){.combat-header{top:32px;left:45px;right:45px;grid-template-columns:1fr 160px 1fr}.portrait-frame{width:112px;height:120px}.name-row{height:42px}.name-row h1,.name-row h2{font-size:40px}.life-frame{height:27px}.match-actions{top:137px}.bottom-hud{left:45px;right:45px;bottom:32px}.skill-art{width:75px;height:75px}.skill-deck{width:382px}.skill-card{width:88px}}
@media(max-width:950px){.combat-header{left:20px;right:20px;top:20px;gap:8px;grid-template-columns:1fr 100px 1fr}.portrait-frame{width:66px;height:80px}.fighter{gap:8px}.fighter-fields{padding-top:0}.name-row{height:28px;margin-bottom:4px;gap:7px}.name-row h1,.name-row h2{font-size:26px}.class-tag{font-size:8px;letter-spacing:1px}.life-frame{height:19px}.bar-caption{font-size:8px;letter-spacing:.6px;margin-top:5px}.fighter-mark{font-size:8px;letter-spacing:.7px;margin-top:6px;gap:4px}.fighter-mark i{width:5px;height:5px}.mode-kicker{font-size:8px;letter-spacing:1px}.match-clock{font-size:65px;height:45px}.match-rule{margin-top:3px;font-size:10px}.match-actions{top:104px}.bottom-hud{left:23px;right:23px;bottom:20px}.skill-deck{width:298px}.skill-bar{gap:8px}.skill-card{width:68px}.skill-art{width:57px;height:57px}.skill-name{font-size:8px}.training-data{min-width:175px;gap:0 15px}.stage-sign{display:none}.combo-counter>span{font-size:85px}.announcement{font-size:30px}}
@media(max-width:620px){.combat-header{top:14px;left:12px;right:12px;grid-template-columns:1fr 66px 1fr;gap:4px}.fighter{gap:5px}.portrait-frame{position:absolute;top:60px;width:48px;height:54px}.fighter-two .portrait-frame{right:0}.fighter-fields{width:100%}.name-row h1,.name-row h2{font-size:23px}.class-tag{display:none}.name-row{height:26px}.life-frame{height:16px}.bar-caption{font-size:7px;letter-spacing:.1px}.bar-caption span:first-child{display:none}.fighter-two .bar-caption span:first-child{display:inline}.fighter-two .bar-caption span:last-child{display:none}.fighter-mark{margin-left:54px;justify-content:flex-end}.fighter-two .fighter-mark{margin-left:0;margin-right:54px;justify-content:flex-start}.fighter-mark i{display:none}.fighter-mark span{font-size:7px;letter-spacing:0;white-space:nowrap;margin:0}.mode-kicker{font-size:6px;letter-spacing:.6px}.match-clock{font-size:50px;height:34px}.match-rule{font-size:8px;gap:4px}.match-rule i{width:13px}.match-actions{top:85px}.match-actions button{width:25px;height:24px}.bottom-hud{left:16px;right:16px;bottom:19px;justify-content:center}.skill-deck{width:320px}.skill-bar{gap:8px;justify-content:center}.skill-card{width:73px}.skill-art{width:60px;height:60px}.skill-name{font-size:9px}.training-data{display:none}.combo-counter{right:19px;top:27%}.combo-counter>span{font-size:68px}.combo-counter strong{font-size:22px}.combo-counter small{font-size:11px}.announcement{font-size:25px;letter-spacing:2px;top:27%}}
@media(max-height:500px) and (min-width:620px){.combat-header{top:12px;left:19px;right:19px;grid-template-columns:1fr 95px 1fr}.portrait-frame{width:56px;height:66px}.name-row{height:25px}.name-row h1,.name-row h2{font-size:24px}.fighter-mark{display:none}.life-frame{height:16px}.bar-caption{font-size:8px}.match-clock{font-size:57px;height:40px}.match-actions{top:85px}.bottom-hud{bottom:12px;left:20px;right:20px}.skill-art{width:46px;height:46px}.skill-card{width:65px}.skill-deck{width:284px}.deck-heading{margin-bottom:5px;font-size:10px}.skill-name{font-size:8px}.training-data strong{font-size:29px}.combo-counter{top:30%}.announcement{font-size:29px}dialog{padding:20px}}


/* Cooldown is a clockwise transparent-black pie sweep over the actual skill art. */
.cooldown-wipe{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.on-cooldown .cooldown-wipe{opacity:1}
.skill-card.on-cooldown img{filter:saturate(.9);opacity:1}
.skill-card kbd{z-index:3}.skill-art:after{z-index:4}
.skill-card.ultimate .skill-name{font-size:9px;letter-spacing:.2px}
/* Original ARCO cut-in: tilted cyan/gold command strip, art and live HTML title. */
.ultimate-cutin{position:absolute;left:-4%;top:26%;width:108%;height:clamp(145px,27vh,220px);z-index:5;pointer-events:none;visibility:hidden;overflow:hidden;isolation:isolate;background:linear-gradient(100deg,#0b2230,#163e49 42%,#0c1b2d 74%);border-top:3px solid #f2d296;border-bottom:3px solid #f2d296;box-shadow:0 -3px 0 #173e4c,0 -5px 0 #8debd8,0 4px 0 #50b7b2,0 17px 45px #000b}
.ultimate-cutin.visible{visibility:visible}
.cutin-circuit{position:absolute;inset:0;background:linear-gradient(115deg,transparent 44%,#66ead323 44.2%,transparent 44.5%),repeating-linear-gradient(0deg,transparent 0 18px,#65d9d50d 18px 19px),repeating-linear-gradient(90deg,transparent 0 45px,#65d9d50a 45px 46px)}
.cutin-art{position:absolute;left:0;top:0;width:73%;height:100%;object-fit:cover;object-position:27% 42%;mask-image:linear-gradient(90deg,#000 0%,#000 60%,transparent 98%)}
.cutin-caption{position:absolute;left:51%;top:12%;right:6%;bottom:8%;display:flex;flex-direction:column;justify-content:center;text-shadow:3px 4px 0 #071323}
.cutin-kicker{font-size:clamp(8px,1vw,12px);font-weight:700;letter-spacing:3px;color:#78f2db;margin-bottom:5px}
.cutin-caption strong{font-size:clamp(32px,5.1vw,68px);font-weight:700;font-style:italic;line-height:.84;letter-spacing:1px;color:#fff5d7}
.cutin-caption em{font-style:italic;color:#f1c580}
.cutin-detail{display:flex;gap:12px;align-items:center;margin-top:12px;font-size:clamp(8px,.9vw,11px);letter-spacing:2px;font-weight:700;color:#d3f5ed}
.cutin-units{display:flex;gap:5px}.cutin-units i{display:block;width:6px;height:6px;background:#8ef1de;transform:rotate(45deg)}
.cutin-edge{position:absolute;inset:5px 0;border-top:1px solid #7bdedc66;border-bottom:1px solid #7bdedc55;pointer-events:none}
@media(max-width:620px){.ultimate-cutin{top:28%;height:155px}.cutin-art{width:88%;object-position:28% 45%}.cutin-caption{left:48%;right:4%}.cutin-caption strong{font-size:33px;letter-spacing:0}.cutin-kicker{font-size:7px;letter-spacing:1px}.cutin-detail{font-size:7px;letter-spacing:.4px;gap:6px}.cutin-units{gap:3px}.cutin-units i{width:4px;height:4px}.skill-card.ultimate .skill-name{font-size:8px}}

.skill-card.recharged .skill-art{border-color:#b0fff0;box-shadow:inset 0 0 0 2px #88efd1}
.skill-card.recharged .skill-name{color:#bbfff0}
/* One physical bar, two real HP layers; reserve is revealed beneath the first. */
.life-fill{position:absolute;left:0;top:0;z-index:2;transition:width .08s linear}
.life-track:after{z-index:3}
.life-fill.reserve-fill{z-index:1;background:linear-gradient(180deg,#a2dfed,#69b8d2 35%,#3884a3)}
.fighter-two .life-fill{left:auto;right:0;margin:0}
.fighter-two .life-fill.reserve-fill{background:linear-gradient(180deg,#ffd1b2,#d58969 35%,#a65446)}
/* Avatar contract: every source faces RIGHT. Mirror image only for the enemy slot. */
.portrait-image{--portrait-direction:1;transform:scaleX(var(--portrait-direction));transform-origin:center}
.portrait-image[data-portrait-side="enemy"]{--portrait-direction:-1}
.form-timers{position:absolute;top:140px;left:4%;right:4%;display:flex;justify-content:space-between;pointer-events:none;z-index:3}
.form-timer{position:relative;min-width:120px;padding:7px 13px 10px;background:#17291de8;color:#ffe0a5;border:1px solid #a67e43;font:700 16px Rajdhani;letter-spacing:1.4px;box-shadow:0 3px 14px #0004}
.form-timer:after{content:'';position:absolute;left:0;bottom:0;width:calc(var(--remaining,1)*100%);height:3px;background:#e7bd76}.form-timer[hidden]{visibility:hidden;display:block}
#enemy-form-timer{margin-left:auto}.fenr-cutin{background:linear-gradient(100deg,#202e1b,#584326 60%,#202b1d);border-color:#e6c186}.fenr-cutin .cutin-kicker{color:#d5e7a5}.fenr-cutin .cutin-caption em{color:#e9aa71}.mira-cutin{background:linear-gradient(100deg,#2a1640,#5a2f6d 58%,#24153a);border-color:#ffd978}.mira-cutin .cutin-kicker{color:#ffc4ec}.mira-cutin .cutin-caption em{color:#ffd978}.cora-cutin{background:linear-gradient(100deg,#150f26,#3b2758 58%,#120d20);border-color:#f0b35a}.cora-cutin .cutin-kicker{color:#cdb6ff}.cora-cutin .cutin-caption em{color:#f0b35a}.naja-cutin{background:linear-gradient(100deg,#0d2a33,#1f4652 55%,#2b2350);border-color:#e3bf78}.naja-cutin .cutin-kicker{color:#f2d9a0}.naja-cutin .cutin-caption em{color:#e3bf78}.nib-cutin{background:linear-gradient(100deg,#0e1e2a,#2a5674 58%,#0b1720);border-color:#8fd4ff}.nib-cutin .cutin-kicker{color:#e8f6ff}.nib-cutin .cutin-caption em{color:#e8c48a}.edda-cutin{background:linear-gradient(100deg,#15231a,#3f6a4c 58%,#1a2016);border-color:#8fe3b4}.edda-cutin .cutin-kicker{color:#e9f7df}.edda-cutin .cutin-caption em{color:#e0c07a}.solan-cutin{background:linear-gradient(100deg,#261707,#684210 58%,#1a1005);border-color:#f2b632}.solan-cutin .cutin-kicker{color:#ffe3a0}.solan-cutin .cutin-caption em{color:#f2b632}.browo-cutin{background:linear-gradient(100deg,#1c2410,#5b5a2b 58%,#141a0b);border-color:#c9b87a}.browo-cutin .cutin-kicker{color:#e6e0b2}.browo-cutin .cutin-caption em{color:#c9b87a}.rhea-cutin{background:linear-gradient(100deg,#231015,#562231 58%,#1a0b0f);border-color:#e8c07a}.rhea-cutin .cutin-kicker{color:#f5e6c8}.rhea-cutin .cutin-caption em{color:#e8c07a}.isolde-cutin{background:linear-gradient(100deg,#171d25,#34465a 58%,#12171e);border-color:#bfe3ff}.isolde-cutin .cutin-kicker{color:#e6f4ff}.isolde-cutin .cutin-caption em{color:#8fd0ff}.zanni-cutin{background:linear-gradient(100deg,#141611,#2e3318 58%,#11120d);border-color:#d8e24a}.zanni-cutin .cutin-kicker{color:#eef39a}.zanni-cutin .cutin-caption em{color:#d8e24a}.haldor-cutin{background:linear-gradient(100deg,#1c1411,#4a2616 58%,#16100d);border-color:#ff9a3c}.haldor-cutin .cutin-kicker{color:#ffc58a}.haldor-cutin .cutin-caption em{color:#ff9a3c}
.setting-row select{max-width:180px;background:#172b30;color:#f5edd9;border:1px solid #778a7c;padding:8px;font:700 15px Rajdhani}
@media(max-width:620px){.form-timers{top:137px}.form-timer{font-size:12px;min-width:86px;padding:4px 7px 7px}.setting-row select{max-width:145px}}
@media(max-height:500px) and (min-width:620px){.form-timers{top:97px}.form-timer{font-size:12px;padding:4px 8px 7px}}

/* Touch controls (html.touch, set by the detector in index.html; see touch.js). */
#touch-controls{display:none}
html.touch body{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html.touch body:not(.in-menu) #touch-controls{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
html.touch .skill-deck,html.touch .training-data,html.touch .reset-hint{display:none}
html.touch .bottom-hud{justify-content:center}
html.touch .vignette{background:linear-gradient(180deg,#051724a6,transparent 28%)}
.dpad{position:absolute;left:calc(22px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,var(--key));grid-template-rows:repeat(2,var(--key));gap:7px;pointer-events:auto;touch-action:none;--key:54px}
.dbtn{position:relative;padding:0;border-radius:12px;pointer-events:auto;touch-action:none;cursor:pointer;border:2px solid #d8efe96b;background:#0e1d26c7;box-shadow:0 5px 14px #0007,inset 0 0 0 3px #ffffff0d;transition:transform .06s,filter .06s,background .06s}
.dbtn-up{grid-column:2;grid-row:1}.dbtn-left{grid-column:1;grid-row:2}.dbtn-down{grid-column:2;grid-row:2}.dbtn-right{grid-column:3;grid-row:2}
.dbtn i{position:absolute;left:50%;top:50%;width:0;height:0;border:11px solid transparent;pointer-events:none}
.dbtn-up i{border-bottom:15px solid #e9fbf6;transform:translate(-50%,-72%)}
.dbtn-down i{border-top:15px solid #e9fbf6;transform:translate(-50%,-28%)}
.dbtn-left i{border-right:15px solid #e9fbf6;transform:translate(-72%,-50%)}
.dbtn-right i{border-left:15px solid #e9fbf6;transform:translate(-28%,-50%)}
.dbtn.pressed{transform:scale(.92);background:#1c3a45e6;filter:drop-shadow(0 0 7px #7dfbe0)}
.action-pad{position:absolute;right:calc(22px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:190px;height:190px;pointer-events:none;--big:96px;--small:58px;--r:100px}
.tbtn{position:absolute;padding:0;border-radius:50%;overflow:hidden;pointer-events:auto;touch-action:none;cursor:pointer;border:2px solid #f2e2b9b0;background:#0e1d26d0;box-shadow:0 5px 14px #0008,inset 0 0 0 3px #00000040;transition:transform .06s,filter .06s}
.tbtn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95;pointer-events:none}
.tbtn .cooldown-wipe{position:absolute;inset:0;z-index:2;pointer-events:none}
.tbtn .cooldown-num{position:absolute;inset:0;z-index:3;display:grid;place-items:center;font:700 22px/1 Rajdhani,system-ui,sans-serif;font-style:normal;color:#fff;text-shadow:0 2px 3px #000;pointer-events:none}
.tbtn.pressed{transform:scale(.9);filter:brightness(1.25)}
.tbtn.active{border-color:#ffe39a;box-shadow:0 0 16px #ffd76acc}
.tbtn.recharged{box-shadow:0 0 18px #9dffe8}
.tbtn.on-cooldown img{filter:grayscale(.55) brightness(.7)}
/* Basic attack in the corner, the three skills on a quarter circle around it (left, up-left, up). */
.tbtn-attack{width:var(--big);height:var(--big);right:0;bottom:0;border-width:3px;border-color:#fff1c9d9}
.tbtn-skill{width:var(--small);height:var(--small)}
.tbtn-s1{right:calc(var(--big)/2 + var(--r) - var(--small)/2);bottom:calc(var(--big)/2 - var(--small)/2)}
.tbtn-s2{right:calc(var(--big)/2 + var(--r)*.7071 - var(--small)/2);bottom:calc(var(--big)/2 + var(--r)*.7071 - var(--small)/2)}
.tbtn-ult{right:calc(var(--big)/2 - var(--small)/2);bottom:calc(var(--big)/2 + var(--r) - var(--small)/2);border-color:#ffc86be6}
@media(max-height:360px){.action-pad{--big:82px;--small:50px;--r:86px}.dpad{--key:48px}}
@media(min-height:560px){.action-pad{--big:112px;--small:66px;--r:118px;width:230px;height:230px}.dpad{--key:64px}}

/* First-visit loading screen (preload.js): covers menu and arena until every runtime file is cached. */
#boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 42%,#173547,#0b1b25 68%);color:#f6eedb;font-family:Rajdhani,Arial,sans-serif;transition:opacity .45s ease}
#boot.done{opacity:0;pointer-events:none}
.boot-card{width:min(420px,78vw);text-align:center}
.boot-logo{display:block;font-size:clamp(44px,9vmin,76px);font-style:italic;font-weight:700;line-height:.8;letter-spacing:-2px;text-shadow:4px 5px 0 #05151e7a}
.boot-logo em{font-style:italic;color:#ecd7a6;letter-spacing:6px}
.boot-bar{height:6px;margin:clamp(18px,5vmin,34px) 0 12px;background:#ffffff1a;border:1px solid #e8d4a340;overflow:hidden}
.boot-bar i{display:block;height:100%;background:linear-gradient(90deg,#86d9c4,#e0bf85);transform:scaleX(0);transform-origin:0 50%;transition:transform .15s linear}
.boot-status{font-size:13px;letter-spacing:1.5px;color:#a9c7c9}