/* GELCEN DA UI — dark-fantasy arena: fighting-game HUD + MMO unit frames / hotbar / roster */
:root{
  --gold:#d9a441;--gold-hi:#fff0b0;--gold-lo:#6e4c16;--blood:#c4161c;--ink:#0b0506;
  --fd:'Cinzel','Trajan Pro','Palatino Linotype',Georgia,serif;
  --fu:'Rajdhani','Segoe UI',system-ui,sans-serif;
  --plate:linear-gradient(#241010,#0a0404);
}
.gold-text{color:transparent;background:linear-gradient(#fff6c8,#e0a93a 55%,#8a5a14);-webkit-background-clip:text;background-clip:text}

/* ---------------------------------------------------------------- HUD: unit frames */
.bars{position:absolute;top:1.8vh;left:2vw;right:2vw;display:flex;align-items:flex-start;gap:1.2vw}
.unit{flex:1;min-width:0;display:flex;align-items:center;gap:.9vw}
.unit.r{flex-direction:row-reverse}
.uinfo{flex:1;min-width:0}
.portrait{position:relative;flex:0 0 auto;width:min(9.4vh,6.6vw);aspect-ratio:1;border-radius:50%;border:3px solid var(--gold);background:radial-gradient(circle at 50% 85%,var(--pc,#c00),#120505 78%);box-shadow:0 0 0 2px #000,0 0 20px var(--pc,#c00),inset 0 0 14px #000}
.portrait::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--gold-lo);opacity:.7}
.ph{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.ph img{position:absolute;width:260%;left:-80%;top:-6%;filter:drop-shadow(0 0 6px #000)}
.elem{position:absolute;right:-.5vw;bottom:-.5vh;width:min(3.6vh,2.5vw);aspect-ratio:1;border-radius:50%;background:#140808;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:min(2.2vh,1.5vw);line-height:1;z-index:2;box-shadow:0 0 8px #000}
.unit.r .elem{right:auto;left:-.5vw}
.uhead{display:flex;align-items:baseline;gap:.8vw;margin-bottom:.5vh;white-space:nowrap}
.unit.r .uhead{flex-direction:row-reverse}
.name{font:900 min(2.7vh,1.9vw)/1 var(--fd);letter-spacing:.14em;color:#fff;text-shadow:0 2px 0 #000,0 0 12px #000}
.cls{font:700 min(1.9vh,1.3vw)/1 var(--fu);letter-spacing:.2em;color:var(--gold);text-shadow:0 1px 0 #000}
.unit.you .uhead::after{content:"SEN";order:3;font:700 min(1.5vh,1vw)/1 var(--fu);letter-spacing:.15em;padding:.25em .6em;color:#1a0d00;background:linear-gradient(#ffe590,#d9a441);border-radius:2px}
.hp{position:relative;height:min(3.7vh,2.5vw);background:#0e0505;border:2px solid var(--gold-lo);box-shadow:0 0 0 2px #000,0 4px 12px #000b,inset 0 0 10px #000;transform:skewX(-14deg);overflow:hidden}
.unit.r .hp{transform:skewX(14deg)}
.hp::after{content:"";position:absolute;inset:0;z-index:3;background:repeating-linear-gradient(90deg,transparent 0 9.6%,#000a 9.6% 10%),linear-gradient(#fff4,transparent 48%,#0004)}
.hp b,.hp u{position:absolute;top:0;bottom:0;left:0;display:block;text-decoration:none}
.hp u{background:linear-gradient(#ffe590,#e0a020);z-index:1}
.hp b{z-index:2;background:linear-gradient(#ff5a4a,#c4161c 55%,#6a0a0a);}
.unit.r .hp b,.unit.r .hp u{left:auto;right:0}
.unit.r .hp b{background:linear-gradient(#6ab6ff,#1f66d6 55%,#0a2a70);}
.hv{position:absolute;z-index:4;top:50%;left:.9em;transform:translateY(-50%) skewX(14deg);font:700 min(2vh,1.4vw)/1 var(--fu);letter-spacing:.08em;color:#fff;text-shadow:0 1px 2px #000,0 0 6px #000}
.unit.r .hv{left:auto;right:.9em;transform:translateY(-50%) skewX(-14deg)}
.hp.low{animation:lowhp .7s ease-in-out infinite}
@keyframes lowhp{50%{box-shadow:0 0 0 2px #000,0 0 22px #f00,inset 0 0 10px #000;border-color:#f44}}
.pips{display:flex;gap:.7vw;margin-top:.9vh}
.unit.r .pips{justify-content:flex-end}
.pips i{width:min(1.9vh,1.3vw);aspect-ratio:1;transform:rotate(45deg);border:2px solid var(--gold-lo);background:#120707;display:block}
.pips i.on{background:radial-gradient(circle,#fff6c8,#e0a020);border-color:var(--gold-hi);box-shadow:0 0 12px #ffb020}

/* ---------------------------------------------------------------- HUD: timer medallion */
#clock{position:relative;flex:0 0 auto;width:min(12.4vh,8.6vw);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#2e0e0e,#060202 72%);border:3px solid var(--gold);box-shadow:0 0 0 2px #000,0 0 26px #a006,inset 0 0 18px #000;margin-top:-.2vh}
#clock::before{content:"";position:absolute;inset:5px;border-radius:50%;background:conic-gradient(from 0deg,var(--gold-hi) calc(var(--t,1)*360deg),#2a1a1a 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
#clock.urgent{animation:urg .5s steps(2) infinite}
@keyframes urg{50%{box-shadow:0 0 0 2px #000,0 0 36px #f00,inset 0 0 18px #500}}
#timer{width:auto;margin:0;font:400 min(6.2vh,4.4vw)/1 Impact,'Arial Black',sans-serif;text-shadow:0 0 14px #f00,2px 2px 0 #000}
#clock.urgent #timer{color:#ff4a3a}
#rnd{position:absolute;left:50%;bottom:-1.7vh;transform:translateX(-50%);white-space:nowrap;padding:.3em 1.1em;font:800 min(1.5vh,1.05vw)/1 var(--fd);letter-spacing:.2em;color:#1a0d00;background:linear-gradient(#ffe590,#c78a22);border:1px solid #000;box-shadow:0 2px 6px #000b;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}

/* ---------------------------------------------------------------- HUD: world nameplates */
.np{position:absolute;left:0;top:0;text-align:center;opacity:0;transition:opacity .25s;will-change:transform;--npc:#5aa8ff}
.np.me{--npc:#ff5a4a}
.np.on{opacity:1}
.np span{display:block;font:800 min(1.7vh,13px)/1 var(--fd);letter-spacing:.16em;color:#fff;text-shadow:0 0 6px #000,0 1px 0 #000,0 0 3px #000;white-space:nowrap}
.np i{display:block;width:min(10vh,92px);height:6px;margin:4px auto 0;background:#000b;border:1px solid #000;box-shadow:0 0 0 1px var(--npc),0 0 8px var(--npc)}
.np i b{display:block;height:100%;background:var(--npc)}
.np.me::after{content:"▼";display:block;margin-top:2px;font-size:min(1.6vh,12px);line-height:1;color:var(--npc);text-shadow:0 0 6px #000}

/* ---------------------------------------------------------------- HUD: help keycaps */
#help{position:absolute;bottom:1.2vh;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4vh 1.1vw;padding:0 3vw;font:600 min(1.5vh,.95vw)/1 var(--fu);letter-spacing:.08em;color:#fff9;text-shadow:0 1px 3px #000}
#help span{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
#help kbd{font:700 .95em/1 var(--fu);padding:.28em .55em;color:var(--gold-hi);background:#1c0c0cd0;border:1px solid var(--gold-lo);border-bottom-width:2px;border-radius:3px;letter-spacing:.06em}

/* ---------------------------------------------------------------- HUD: hotbar */
body #skills{inset:auto;left:50%;right:auto;top:auto;bottom:max(4.6vh,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;height:auto;padding:.9vh 1.2vw;gap:min(.8vw,8px);justify-content:center;background:linear-gradient(#1c0b0bb0,#050202d8);border:2px solid #5a3a14;border-radius:14px;box-shadow:0 6px 24px #000c,inset 0 0 0 1px #000,inset 0 0 22px #000}
body #skills .slot{width:min(10vh,70px);pointer-events:none}
#skills::before,#skills::after{content:"◆";position:absolute;top:50%;transform:translateY(-50%);font-size:min(1.8vh,12px);color:var(--gold-lo)}
#skills::before{left:.45vw}#skills::after{right:.45vw}
.slot{position:relative;aspect-ratio:1;border-radius:10px;background:linear-gradient(160deg,#2e1414,#090303);border:2px solid var(--gold-lo);box-shadow:0 3px 10px #000a,inset 0 0 0 2px #000,inset 0 0 14px #000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:8px;background:linear-gradient(#fff2,transparent 38%)}
.slot .ic{position:relative;z-index:1;font-size:min(5.4vh,34px);font-style:normal;line-height:1}
.slot .ic img{display:block;width:min(7vh,48px);height:min(7vh,48px);object-fit:contain}
.pp .sks em img{display:block;width:2em;height:2em;object-fit:contain}
.slot .cd{position:absolute;inset:0;z-index:2;background:conic-gradient(from 0deg,transparent calc((1 - var(--cd,0))*360deg),#000c 0)}
.slot .cdt{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;font:700 min(3.2vh,22px)/1 var(--fu);color:#fff;text-shadow:0 0 6px #000,0 0 3px #000}
.slot .key{position:absolute;z-index:4;left:4px;top:2px;font:700 min(1.7vh,12px) var(--fu);color:var(--gold-hi);text-shadow:0 0 3px #000,0 0 3px #000}
.slot.ready{border-color:var(--c);box-shadow:0 0 16px var(--c),inset 0 0 0 2px #000,inset 0 0 14px #0008}
.slot.ready:not(.down){animation:rdy 1.6s ease-in-out infinite}
@keyframes rdy{50%{box-shadow:0 0 6px var(--c),inset 0 0 0 2px #000,inset 0 0 14px #0008}}
.slot.lock{opacity:.4;border-style:dashed}.slot.lock .ic{filter:none;font-size:min(3vh,18px);opacity:.6}

/* ---------------------------------------------------------------- Select / roster */
#select{position:fixed;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 36%,rgba(96,12,12,.5),rgba(6,2,3,.95) 72%),repeating-linear-gradient(45deg,#ffffff05 0 2px,transparent 2px 7px)}
#select.on{display:flex}
#select.frozen #cards,#select.frozen #custom{pointer-events:none}
#select.frozen .card{cursor:default}
#sel-prompt{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:8vw;text-align:center;background:radial-gradient(ellipse,#240707f2,#050202e8);font:900 clamp(28px,5.5vw,88px)/1.2 var(--fd);letter-spacing:.06em;color:var(--gold-hi);text-shadow:0 4px 0 #000,0 0 36px #c4161c;opacity:0;visibility:hidden;pointer-events:none}
#sel-prompt.show{opacity:1;visibility:visible;pointer-events:auto;animation:sel-announce 1.7s ease both}
@keyframes sel-announce{0%{opacity:0;transform:scale(1.12)}15%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){#sel-prompt.show{animation:none}}
#sel-h{font:900 min(4.4vw,7.4vh)/1 var(--fd);letter-spacing:.16em;display:flex;align-items:center;gap:1.6vw}
#sel-h::before,#sel-h::after{content:"";width:min(14vw,200px);height:3px;background:linear-gradient(90deg,transparent,var(--gold));box-shadow:0 0 10px var(--gold)}
#sel-h::after{transform:scaleX(-1)}
#sel-h span{color:transparent;background:linear-gradient(#fff6c8,#e0a93a 55%,#8a5a14);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 16px #a00)}
#sel-p{margin:.5vh 0 1.4vh;font:700 min(1.7vh,1.15vw)/1 var(--fu);letter-spacing:.3em;color:#e9d8bccc;text-transform:uppercase}
#sel-main{display:flex;align-items:center;justify-content:center;gap:1.8vw;width:100%;padding:0 2vw}
.pp{position:relative;width:min(28vw,48vh);align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;padding:1vh 1.2vw 1.4vh;border:1px solid var(--gold-lo);background:linear-gradient(#170909d0,#060203f0);box-shadow:inset 0 0 50px #000,0 10px 40px #000a}
.pp::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 72%,var(--g,#c00) 0,transparent 66%);opacity:.4}
.pp::after,#cards::after{content:"";position:absolute;inset:-5px;pointer-events:none;background:
  linear-gradient(var(--gold),var(--gold)) top left/22px 3px,linear-gradient(var(--gold),var(--gold)) top left/3px 22px,
  linear-gradient(var(--gold),var(--gold)) top right/22px 3px,linear-gradient(var(--gold),var(--gold)) top right/3px 22px,
  linear-gradient(var(--gold),var(--gold)) bottom left/22px 3px,linear-gradient(var(--gold),var(--gold)) bottom left/3px 22px,
  linear-gradient(var(--gold),var(--gold)) bottom right/22px 3px,linear-gradient(var(--gold),var(--gold)) bottom right/3px 22px;background-repeat:no-repeat}
.pp>*{position:relative}
#pr.idle{filter:grayscale(1) brightness(.5)}
.pp .pt{position:absolute;top:1vh;font:800 min(1.6vh,1.1vw)/1 var(--fd);letter-spacing:.24em;padding:.5em 1em;border:1px solid #000;z-index:3;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
#pl .pt{left:-1px;color:#1a0d00;background:linear-gradient(#ffe590,#c78a22)}
#pr .pt{right:-1px;color:#fff;background:linear-gradient(#ff5a4a,#8a0c0c);clip-path:polygon(8px 0,100% 0,100% 100%,0 100%)}
.pp .view{position:relative;height:min(50vh,29vw);display:flex;align-items:flex-end;justify-content:center}
.pp img{position:relative;z-index:1;max-height:100%;max-width:100%;object-fit:contain;}
.pp .view::after{content:"";position:absolute;left:4%;right:4%;bottom:-1vh;height:7vh;border-radius:50%;background:radial-gradient(ellipse,var(--g,#c00) 0,rgba(0,0,0,.6) 40%,transparent 70%);opacity:.75;filter:blur(3px)}
.pp .view::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6vh;border-radius:50%;border:.5vh solid var(--g,#fff);opacity:0}
.pp b{display:block;margin-top:1vh;padding:.15em 0;background:linear-gradient(90deg,transparent,#c8902055,transparent);font:900 min(4.2vh,3vw)/1.1 var(--fd);font-weight:900;letter-spacing:.14em;color:#fff;text-shadow:0 2px 0 #000,0 0 16px var(--g,#f00)}
.pp i{display:block;font:700 min(2.5vh,1.7vw)/1.2 var(--fu);font-style:normal;color:var(--g,#ffd34a);letter-spacing:.34em;text-shadow:0 1px 0 #000}
.pp small{display:block;font:600 min(1.9vh,1.2vw)/1.3 var(--fu);color:#fffc;margin:.5vh 0;letter-spacing:.06em;min-height:2.6em}
.pp u{display:block;text-decoration:none;font:700 min(1.7vh,1.1vw)/1 var(--fu);color:var(--gold);letter-spacing:.14em;padding-top:.8vh;border-top:1px solid var(--gold-lo)}

#cards{position:relative;display:grid;grid-template-columns:repeat(4,min(8.4vw,14.4vh));gap:.8vw;padding:1.4vh 1.1vw;border:1px solid var(--gold-lo);background:linear-gradient(#120808d8,#050202ee);box-shadow:inset 0 0 40px #000,0 10px 40px #000a}
.card{position:relative;aspect-ratio:3/4;background:linear-gradient(#2c0d0d,#0c0303);border:2px solid #4a2a14;cursor:pointer;overflow:hidden;transition:transform .12s,border-color .12s,box-shadow .12s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 75%,var(--g) 0,transparent 70%);opacity:.5}
.card img{position:absolute;left:0;right:0;bottom:15%;width:100%;height:78%;object-fit:contain;}
.card span{position:absolute;left:0;right:0;bottom:0;padding:.35em 0;background:linear-gradient(transparent,#000d 35%);font:800 min(1.5vh,.9vw)/1 var(--fd);letter-spacing:.1em;color:#fffe;text-align:center}
.card em{position:absolute;left:.3vw;top:.2vh;font:700 min(1.7vh,1vw) var(--fu);font-style:normal;color:var(--gold-hi);text-shadow:0 0 3px #000,0 0 3px #000;z-index:2}
.card.cur{transform:scale(1.1);z-index:2;border-color:var(--gold-hi);box-shadow:0 0 22px var(--g),0 0 0 2px var(--g)}
.card.lock{filter:brightness(.4);cursor:default}.card.lock::before{opacity:.1}.card.lock img{display:none}.card.lock span{font-size:min(3vh,2vw);top:0;display:flex;align-items:center;justify-content:center;background:none}
.card.p1{border-color:var(--gold)}
.card.p1::after,.card.cur.opp::after{position:absolute;top:0;right:0;font:800 min(1.5vh,.9vw) var(--fd);padding:.2em .55em;letter-spacing:.12em}
.card.p1::after{content:"1P";background:var(--gold);color:#000}
.card.cur.opp::after{content:"CPU";background:#e00;color:#fff}
#quip{margin-top:2.2vh;min-height:3vh;font:700 italic min(2.6vh,1.7vw)/1.2 var(--fu);letter-spacing:.06em;color:var(--gold-hi);text-shadow:0 0 12px #a00}
#custom{display:grid;grid-template-columns:repeat(3,1fr);gap:.7vh 2.2vw;margin-top:1.2vh;width:min(94vw,940px);box-sizing:border-box;padding:1vh 1.4vw;border:1px solid var(--gold-lo);background:#0009;font:700 min(1.8vh,1.2vw) var(--fu);letter-spacing:.12em;color:#fffc}
#custom label{display:flex;align-items:center;gap:.7vw}
#custom span{flex:0 0 8em;color:var(--gold)}
#custom b{flex:0 0 3.2em;text-align:right;font-weight:700}
#custom input{flex:1;min-width:0;cursor:pointer;-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;border:1px solid #000;background:linear-gradient(90deg,var(--gold) var(--v,50%),#2a1a1a var(--v,50%))}
#custom input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;transform:rotate(45deg);background:var(--gold-hi);border:2px solid #000;box-shadow:0 0 8px var(--gold)}
#custom input::-moz-range-thumb{width:13px;height:13px;border-radius:0;background:var(--gold-hi);border:2px solid #000}

@keyframes slam{0%{transform:translateY(-110vh) scale(1.6);opacity:0;filter:brightness(4) blur(6px)}50%{transform:translateY(0) scale(1.12);opacity:1;filter:brightness(2.6)}62%{transform:translateY(-2.5vh) scale(.97)}78%{transform:translateY(0) scale(1.02)}100%{transform:none}}
@keyframes ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes nm{0%{transform:scaleX(.2);opacity:0;letter-spacing:.6em}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes jolt{0%,100%{transform:none}25%{transform:translate(-.5vw,.6vh)}50%{transform:translate(.5vw,-.4vh)}75%{transform:translate(-.3vw,.3vh)}}
@keyframes flash{0%{opacity:1}100%{opacity:.4}}
.pp.slam img{animation:slam .5s cubic-bezier(.2,.8,.3,1) both}
.pp.slam .view::before{animation:ring .6s .22s ease-out both}
.pp.slam b,.pp.slam i{animation:nm .45s .2s both}
.pp.slam::before{animation:flash .5s ease-out}
#sel-main.hit{animation:jolt .25s .22s}

@media (pointer:coarse){#help{display:none!important}.pp small,.pp u{font-size:max(9px,1.5vh)}}

/* ult bar, ult banner, skill list */
.uinfo .ult{height:5px;margin-top:3px;background:#0008;border:1px solid #fff3;overflow:hidden;position:relative}
.uinfo .ult b{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a5cff,#ff5ad0);transition:width .15s}
.uinfo .ult.full{border-color:#ffd34a;animation:ultp .5s infinite alternate}.uinfo .ult.full b{background:linear-gradient(90deg,#ffd34a,#ff5a3a)}
@keyframes ultp{to{box-shadow:0 0 10px #ffd34a}}
.slot.ult{border-color:#ff5a3a}.slot.ult.ready{animation:ultp .5s infinite alternate}
#ultb{position:fixed;left:5%;right:5%;top:18%;text-align:center;font:900 clamp(22px,5vh,44px)/1.05 var(--fu);color:var(--c,#ffd34a);text-shadow:0 3px 0 #000;letter-spacing:.04em;pointer-events:none;opacity:0;z-index:30}
#ultb small{display:block;font-size:.3em;color:#fff;letter-spacing:.2em;margin-top:.3em}
#ultb.show{animation:ultin .9s ease-out}
@keyframes ultin{0%{opacity:0;transform:scale(2.2)}12%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(.95)}}
.pp .view{height:min(21vh,14vw)}.pp small{min-height:0}.pp b{font-size:min(3.4vh,2.4vw)}
.pp .sks{margin-top:.6vh;text-align:left;font:600 min(1.45vh,1vw)/1.2 var(--fu)}
.pp .sks>div{display:flex;gap:.5vw;align-items:center;margin:2px 0;padding:2px 5px;background:#0007;border-left:2px solid #ffd34a}
.pp .sks>div.ult{border-color:#ff5a3a;background:#3a0a0a88}
.pp .sks em{font-style:normal;font-size:2em;line-height:1;letter-spacing:0;color:inherit}
.pp .sks b{margin:0;padding:0;background:none;font:800 1.1em/1.1 var(--fu);letter-spacing:.05em;text-shadow:none;color:#fff}
.pp .sks span{display:block;opacity:.75;font-weight:500}
.pp .sks p{margin:3px 0 0;opacity:.85;font-style:italic;text-align:center}
.pp small{display:none}.pp .sks p{font-size:.95em}
.pp .view{height:min(18vh,12vw)}.pp .sks>div{margin:1px 0;padding:1px 5px}.pp .sks em{font-size:1.7em;flex:none}.pp b{margin-top:.3vh}
.pp .sks,.pp .sks>div{flex:none}.pp .view{flex:0 1 auto;min-height:0}
/* Online lobby stays above title/selection and works with keyboard or touch. */
#online-host button,#online-join button,#online-badge button{font:700 16px Rajdhani,Arial,sans-serif;color:#ffe8bd;background:#35130b;border:1px solid #ba6e35;border-radius:6px;padding:10px 14px;cursor:pointer;min-height:44px}
#online-host,#online-join{position:fixed;top:50%;transform:translateY(-50%);z-index:60;width:min(250px,22vw);padding:16px;display:flex;flex-direction:column;gap:10px;background:#21100bef;border:1px solid #854326;border-radius:12px;box-shadow:0 10px 60px #000;font-family:Rajdhani,Arial,sans-serif;color:#ead8c6}
#online-host{right:1.5vw}#online-join{left:1.5vw}
#online-host[hidden],#online-join[hidden],#online-badge[hidden],#online-toast[hidden]{display:none}
#online-host h2,#online-join h2{margin:0;font-size:15px;letter-spacing:.12em;color:#ffd08a}
#online-host .code{font:700 34px monospace;letter-spacing:.2em;text-align:center;color:#fff}
#online-host .row{display:flex;flex-direction:column;gap:8px}
#online-host .info,#online-join .info{margin:0;min-height:1.2em;font-size:13px;line-height:1.3}
#online-join input{width:100%;box-sizing:border-box;padding:10px;font:15px monospace;background:#0c0605;color:#fff;border:1px solid #854326;border-radius:6px}
#online-toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:80;max-width:90vw;padding:10px 16px;background:#160a07f2;border:1px solid #854326;border-radius:8px;font:700 15px Rajdhani,Arial,sans-serif;color:#ffe8bd}
#online-badge{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;background:#160a07ec;border:1px solid #854326;border-radius:8px;padding:6px 10px;font:14px Rajdhani,Arial,sans-serif;max-width:95vw}#online-badge button{font-size:12px;padding:6px 10px;white-space:nowrap}#online-badge span{min-width:0}
.card .badge{position:absolute;left:5%;bottom:18%;width:30%;aspect-ratio:1;background-size:contain;background-repeat:no-repeat;pointer-events:none}
@media (max-height:650px){.pp .view{height:min(13vh,9vw)}}
@keyframes ultfade{0%,100%{opacity:0}12%,75%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pp.slam img,.pp.slam b,.pp.slam i,#sel-main.hit{animation:none}#ultb.show{animation:ultfade .9s linear}.slot.ult.ready,.uinfo .ult.full{animation:none}}


#online-end{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:10px;padding:16px 22px;background:#21100bef;border:1px solid #854326;border-radius:12px;font-family:Rajdhani,Arial,sans-serif;color:#ead8c6;text-align:center}
#online-end[hidden],#pause-menu[hidden],#menubtn[hidden]{display:none}
#online-end h2{margin:0;color:#ffd08a;font-size:18px;letter-spacing:.14em}#online-end .row{display:flex;gap:10px}#online-end .info{margin:0;min-height:1.2em;font-size:14px}
#online-end button,#pause-menu button,#menubtn,#sel-back{font:700 16px Rajdhani,Arial,sans-serif;color:#ffe8bd;background:#35130b;border:1px solid #ba6e35;border-radius:6px;padding:10px 16px;cursor:pointer;min-height:44px}
#pause-menu{position:fixed;inset:0;z-index:75;display:grid;place-items:center;background:#050202cc}
.pm-card{display:flex;flex-direction:column;gap:10px;min-width:min(320px,90vw);padding:24px;background:#21100b;border:1px solid #854326;border-radius:14px;box-shadow:0 16px 90px #000}
.pm-card h2{margin:0 0 6px;text-align:center;color:#ffd08a;font:700 22px Rajdhani,Arial,sans-serif;letter-spacing:.2em}.pm-card button[hidden]{display:none}
#menubtn{position:fixed;right:calc(1.2vw + 46px);top:1.2vh;z-index:30;width:36px;min-height:36px;padding:0;font-size:18px;opacity:.7}#menubtn:hover{opacity:1}
#sel-back{position:absolute;left:1.5vw;top:1.5vh;z-index:20}

#skills .locked{filter:grayscale(1) brightness(.55);pointer-events:none}

#tab-block{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000;text-align:center;font-family:Rajdhani,Arial,sans-serif;color:#ead8c6}
#tab-block[hidden]{display:none}#tab-block div{display:flex;flex-direction:column;gap:16px;align-items:center;padding:24px}
#tab-block h2{margin:0;color:#ffd08a;font-size:clamp(20px,4vw,34px);letter-spacing:.12em}#tab-block p{margin:0;font-size:clamp(16px,2.4vw,22px)}
#tab-block button{font:700 18px Rajdhani,Arial,sans-serif;color:#ffe8bd;background:#35130b;border:1px solid #ba6e35;border-radius:6px;padding:12px 22px;cursor:pointer;min-height:48px}