:root{--ink:#0f1d3a;--panel:rgba(13,26,56,.84);--line:rgba(255,255,255,.14);--blast:#ffc629;--fire:#ff6a1f;--sky:#3cc4ff;--lime:#7ee04a;--txt:#f4f7ff;--mut:#a9b6d3;
  --disp:'Lilita One','Arial Black',system-ui,sans-serif;--body:'Nunito',system-ui,sans-serif;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--txt);font:800 16px/1.35 var(--body);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#gl{touch-action:none}.panel{touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}button,select,input{touch-action:manipulation}
button,input,select{font:inherit;color:inherit}
#gl{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100dvh;display:block}
input,select,textarea{font-size:16px}
[hidden]{display:none!important}
.f:focus-visible{outline:4px solid var(--blast);outline-offset:3px}
/* Pantallas */
#ui{position:fixed;inset:0;pointer-events:none;z-index:5}
.scr{display:none;position:absolute;inset:0;padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:auto}
.scr.on{display:flex}
.panel{background:radial-gradient(120% 90% at 50% 0,rgba(15,29,58,.55),rgba(8,15,32,.92));overflow:auto;justify-content:flex-start}
.panel>*{width:min(760px,100%)}
.panel.small{justify-content:center;background:rgba(8,15,32,.7)}.panel.small>*{width:min(360px,100%)}
h2{font:400 clamp(26px,4vw,40px)/1.1 var(--disp);text-align:center;letter-spacing:.5px;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.note{color:var(--mut);font-size:14px;text-align:center}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* Logo */
.logo{display:flex;flex-direction:column;align-items:center;line-height:.86;transform:rotate(-3deg);filter:drop-shadow(0 8px 0 rgba(0,0,0,.35))}
.logo b,.logo em{font:400 clamp(52px,11vw,120px) var(--disp);font-style:normal;-webkit-text-stroke:10px #1a2340;paint-order:stroke fill;letter-spacing:1px}
.logo b{color:#fff}
.logo em{background:linear-gradient(#ffe45c 20%,#ff9d1c 60%,#ff5a14);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;filter:drop-shadow(0 0 0 #1a2340) drop-shadow(4px 4px 0 #1a2340) drop-shadow(-3px -3px 0 #1a2340) drop-shadow(3px -3px 0 #1a2340) drop-shadow(-3px 3px 0 #1a2340)}
.logo small{margin-top:14px;background:#15182a;color:#fff;font:400 clamp(14px,2.3vw,22px) var(--disp);padding:6px 18px;transform:skew(-8deg) rotate(1deg);border-radius:4px;box-shadow:0 4px 0 #000}
.tagline{font:400 20px var(--disp);color:#fff}
/* Botones */
.btn{border:0;cursor:pointer;padding:12px 22px;min-height:52px;border-radius:16px;background:linear-gradient(#35507f,#243a63);box-shadow:0 5px 0 #14223f,inset 0 2px 0 rgba(255,255,255,.18);font:400 20px var(--disp);letter-spacing:.3px;transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #14223f}
.btn.pri{background:linear-gradient(#ffcf3a,#ff8a1a);color:#3a1600;box-shadow:0 5px 0 #b44d06,inset 0 2px 0 rgba(255,255,255,.5)}
.btn.big{font-size:30px;min-height:70px;padding:12px 40px}
.btn:disabled{opacity:.45;pointer-events:none}
.menu{display:flex;flex-direction:column;gap:12px;align-items:stretch;width:min(420px,100%)}
#joinF{flex:1;flex-wrap:nowrap}
input,select{background:rgba(0,0,0,.35);border:2px solid var(--line);border-radius:12px;padding:10px 12px;min-height:48px;min-width:0}
#joinCode{width:110px;text-transform:uppercase;text-align:center;font:400 22px var(--disp);letter-spacing:3px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.05);padding:10px 14px;border-radius:12px}
/* Cartas y listas */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.card{background:var(--panel);border:3px solid transparent;border-radius:16px;padding:8px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.card img{width:100%;max-width:120px;aspect-ratio:1}.card b{font:400 16px var(--disp)}.card small{color:var(--mut);font-size:12px}
.card.sel{border-color:var(--blast);background:rgba(255,198,41,.12)}
.card.lock img{filter:grayscale(.8) brightness(.6)}
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.rar{font-size:11px;padding:1px 8px;border-radius:8px;color:#10131c}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.plist,.mlist{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.plist li,.mlist li{display:flex;align-items:center;gap:10px;background:var(--panel);padding:8px 12px;border-radius:14px}
.plist img{width:44px;height:44px}.plist li>span{flex:1}
.mlist .bar{flex:1;height:8px;background:rgba(255,255,255,.12);border-radius:6px}.mlist .bar i{display:block;height:100%;background:var(--blast);border-radius:6px}
.mlist .btn{min-height:40px;padding:6px 14px;font-size:16px}
.dot{width:12px;height:12px;border-radius:50%;background:#f59e0b}.dot.ok{background:var(--lime)}
.code{background:#fff;color:var(--ink);padding:0 12px;border-radius:10px;letter-spacing:3px}
.maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.map{border:3px solid transparent;border-radius:16px;padding:22px 10px;font:400 18px var(--disp);cursor:pointer;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.map.sel{border-color:var(--blast)}
.tbl{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:8px;text-align:left;border-bottom:1px solid var(--line)}th{color:var(--mut);font-weight:800}tr.me{background:rgba(255,198,41,.15)}
.rew{font:400 22px var(--disp);text-align:center;color:var(--blast)}
#toast{position:fixed;left:50%;bottom:calc(90px + var(--sab));transform:translateX(-50%);background:var(--panel);padding:10px 18px;border-radius:14px;opacity:0;transition:opacity .2s;z-index:20;pointer-events:none}
#toast.on{opacity:1}
/* Etiquetas sobre personajes */
#tags{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.tag{position:absolute;left:0;top:0;text-align:center;white-space:nowrap;will-change:transform}
.tag b{display:block;font:400 15px var(--disp);color:#fff;-webkit-text-stroke:3px #111a33;paint-order:stroke fill}
.tag i{font-style:normal;font-size:16px;letter-spacing:-1px;-webkit-text-stroke:2px #111a33;paint-order:stroke fill}
.tag s{position:absolute;left:50%;bottom:100%;font-size:34px;text-decoration:none;opacity:0;transform:translateX(-50%)}
.tag s.pop{animation:pop 1.6s ease-out}
@keyframes pop{0%{opacity:0;transform:translate(-50%,10px) scale(.3)}15%{opacity:1;transform:translate(-50%,0) scale(1.2)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}
@media (prefers-reduced-motion:reduce){#banner.show,.tag s.pop{animation-duration:.01s}}
/* iconos SVG */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.16em;flex:none;overflow:visible}
.ico.hrt{width:.95em;height:.95em;margin-right:-.08em;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.tag s{font-size:40px}.tag s .ico{filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
#emotes button{display:grid;place-items:center;font-size:30px}
.emo-big{font-size:56px;line-height:1}.ico.big{width:1.6em;height:1.6em}
#feed .ico{width:1.15em;height:1.15em;vertical-align:-.22em}
.rew .ico,.btn .ico{width:1.1em;height:1.1em}
[hidden]{display:none!important}
/* sala: nombre + personaje */
.lme{display:flex;flex-direction:column;gap:8px;width:min(560px,100%)}
.lme .opt input{flex:1;max-width:240px}
.lt{margin:4px 0 0;font:400 18px var(--disp);text-align:center}
.lchars{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.lc{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel);border:2px solid transparent;border-radius:14px;padding:6px 2px;cursor:pointer;min-width:0}
.lc img{width:100%;max-width:64px;aspect-ratio:1}.lc span{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lc.sel{border-color:var(--blast);background:rgba(255,198,41,.15)}.lc.sel span{color:#fff}
#lAb{margin:0}#lAb .ico{width:1.2em;height:1.2em}
@media (max-width:420px){.lchars{grid-template-columns:repeat(3,1fr)}}
/* permitir edición normal en campos de texto (el bloqueo de selección es solo para el resto de la app) */
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* ===================== ESTILO REFERENCIA: paneles de cristal navy con borde luminoso ===================== */
:root{--glass:linear-gradient(180deg,rgba(38,58,104,.92),rgba(16,27,56,.94));--edge:rgba(120,160,255,.35);--gold:#ffc629;--sh:0 6px 0 rgba(4,10,26,.55),0 10px 24px rgba(0,0,0,.35)}
.glass,.pcard,.pill,.hp,.chip,.hbtn,#hList li,.dock,.menu{background:var(--glass);border:2px solid var(--edge);box-shadow:var(--sh),inset 0 2px 0 rgba(255,255,255,.12)}
/* ---- tarjeta de perfil ---- */
.pbar{position:absolute;top:calc(14px + var(--sat));left:calc(16px + var(--sal));right:calc(16px + var(--sar));display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:auto}
.pcard{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:18px;min-width:min(330px,56vw)}
.pav{position:relative;flex:none;width:70px;height:70px;border-radius:14px;border:3px solid var(--gold);background:radial-gradient(circle at 50% 30%,#3a5fb0,#172a58);box-shadow:0 0 0 2px #111a33,0 4px 10px rgba(0,0,0,.4)}
.pav img{width:100%;height:100%;border-radius:11px;display:block}
.pav .crown{position:absolute;right:-12px;top:-14px;width:28px;height:28px;transform:rotate(18deg)}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pinfo>b{font:400 22px/1 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pinfo>span{font-size:14px;color:#c9d6f5}
.xp{position:relative;height:18px;border-radius:10px;background:#0b1430;border:2px solid rgba(255,255,255,.18);overflow:hidden;margin-top:3px}
.xp i{display:block;height:100%;background:linear-gradient(#ffd766,#f59e0b);border-radius:8px;box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}
.xp em{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:900 12px var(--body);font-style:normal;text-shadow:0 1px 2px #000}
/* ---- monedas / gemas ---- */
.cur{display:flex;gap:10px}
.pill{display:flex;align-items:center;gap:10px;border-radius:16px;padding:6px 6px 6px 10px;font:400 20px var(--disp);color:#fff;cursor:pointer;min-width:120px}
.pill>.ico:first-child{width:34px;height:34px}.pill b{flex:1;text-align:center;font-weight:400}.pill .pl{width:30px;height:30px}
/* ---- logo ---- */
.logo{position:relative;transform:rotate(-2deg);z-index:1}
.logo b,.logo em{font:400 clamp(44px,min(11.5vw,13vh),128px)/.84 var(--disp);-webkit-text-stroke:clamp(8px,1.4vh,13px) #1b2a63;letter-spacing:1px;filter:drop-shadow(0 7px 0 #0b1434)}
.logo b{color:#fff;paint-order:stroke fill}
.logo em{-webkit-text-stroke:0;filter:drop-shadow(0 0 0 #1b2a63) drop-shadow(5px 5px 0 #1b2a63) drop-shadow(-4px -4px 0 #1b2a63) drop-shadow(4px -4px 0 #1b2a63) drop-shadow(-4px 4px 0 #1b2a63) drop-shadow(0 8px 0 #0b1434)}
.lbomb{position:absolute;left:50%;top:0;width:clamp(90px,17vh,170px);height:clamp(90px,17vh,170px);transform:translate(-50%,-62%);z-index:-1}
.lbomb .ico{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.burst{position:absolute;inset:-35%;background:conic-gradient(from 0deg,transparent 0 6%,#ffd23f 6% 9%,transparent 9% 18%,#ff9d1c 18% 21%,transparent 21% 31%,#ffd23f 31% 34%,transparent 34% 45%,#ff9d1c 45% 48%,transparent 48% 60%,#ffd23f 60% 63%,transparent 63% 74%,#ff9d1c 74% 77%,transparent 77% 88%,#ffd23f 88% 91%,transparent 91%);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 32%,#000 55%,transparent 70%);mask:radial-gradient(circle,transparent 30%,#000 32%,#000 55%,transparent 70%);opacity:.9;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo small{margin-top:clamp(8px,1.6vh,16px);background:linear-gradient(#1f2f66,#141f45);border:2px solid #0b1434;color:#fff;font:400 clamp(14px,min(2.2vw,2.6vh),24px) var(--disp);padding:6px 22px;transform:skew(-6deg) rotate(1deg);border-radius:8px;box-shadow:0 5px 0 #0b1434}
.logo small u{text-decoration:none;color:#ffc629}
/* ---- panel de botones del menú ---- */
.menu{display:flex;flex-direction:column;gap:12px;width:min(700px,100%);padding:16px;border-radius:26px;border-color:rgba(255,170,60,.65);box-shadow:0 0 0 2px #0b1434,0 0 30px rgba(255,140,30,.45),var(--sh)}
.btn{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap}
.btn .ico{width:1.3em;height:1.3em;flex:none}
.btn.big{min-height:clamp(58px,10vh,86px);font-size:clamp(26px,4.4vh,40px);border-radius:20px;border:3px solid #ffe29a;background:linear-gradient(#ffd54a,#ffb21f 45%,#ff8a14);color:#221a4d;box-shadow:0 6px 0 #b64a05,0 0 24px rgba(255,160,40,.5),inset 0 3px 0 rgba(255,255,255,.55)}
.btn.big .pbtn{width:1.25em;height:1.25em}.btn.big .pbtn path{fill:#fff}
.btn.blue{background:linear-gradient(#3b82f6,#1d4ed8);border:2px solid #7fb0ff;box-shadow:0 5px 0 #0f2d7a,inset 0 2px 0 rgba(255,255,255,.35)}
.btn.dark{background:linear-gradient(#2b3f72,#1a2a55);border:2px solid rgba(140,170,255,.35);box-shadow:0 5px 0 #0b1434,inset 0 2px 0 rgba(255,255,255,.15)}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.row3 .btn{min-height:clamp(48px,7.5vh,62px);font-size:clamp(17px,2.8vh,24px);padding:8px 10px}
.codebox{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:16px;background:#101b3d;border:2px solid rgba(140,170,255,.3);box-shadow:inset 0 3px 0 rgba(0,0,0,.35)}
.codebox .ico{width:28px;height:28px;flex:none}
#joinCode{flex:1;width:100%;min-width:0;background:none;border:0;min-height:0;padding:0;color:#fff;text-transform:uppercase;font:400 clamp(17px,2.8vh,24px) var(--disp);letter-spacing:2px;text-align:left}
#joinCode::placeholder{color:#8ea0c8;letter-spacing:0}
.menu>.btn.dark{min-height:clamp(46px,7vh,58px);font-size:clamp(17px,2.8vh,24px)}
/* ---- dock ---- */
.dock{display:flex;border-radius:22px;padding:6px;gap:0;pointer-events:auto}
.dock button{flex:1;position:relative;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px clamp(10px,2vw,26px);font:400 15px var(--disp);color:#dce6ff;cursor:pointer;border-radius:14px}
.dock button+button::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(255,255,255,.15)}
.dock button .ico{width:36px;height:36px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.dock button.on::after{content:'';position:absolute;bottom:-1px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}
.dock button:hover{background:rgba(255,255,255,.07)}
/* ---- layout menú ---- */
#s-menu{justify-content:flex-end;gap:clamp(8px,2vh,20px);padding-top:calc(clamp(96px,16vh,150px) + var(--sat));padding-bottom:calc(14px + var(--sab));
  background:radial-gradient(ellipse 50% 60% at 50% 60%,rgba(8,15,32,.35),rgba(8,15,32,0) 70%)}
#s-menu .logo{margin-bottom:clamp(4px,1vh,10px)}
#s-menu .dock{width:min(740px,100%);margin-top:clamp(4px,1.5vh,14px)}
#s-menu #offline{margin:0}
/* ===================== HUD EN PARTIDA ===================== */
#hud{position:fixed;inset:0;z-index:4;pointer-events:none}
#hud>*{position:absolute}
.htl{top:calc(12px + var(--sat));left:calc(14px + var(--sal));display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hp{border-radius:18px;padding:8px 16px}
.hp.alive{display:flex;align-items:center;gap:12px;padding:8px 22px 8px 14px}
.hp.alive>.ico{width:46px;height:46px}.hp.alive small{display:block;font-size:15px;color:#e6edff}.hp.alive b{font:400 30px/1 var(--disp);color:var(--gold)}
#hProf{display:none}
.chips{display:flex;gap:8px}
.chip{display:flex;align-items:center;gap:6px;border-radius:14px;padding:5px 12px 5px 8px;font:400 22px var(--disp)}
.chip .ico{width:30px;height:30px}.chip.off{opacity:.45}
#feed{display:flex;flex-direction:column;gap:4px;font-size:14px}#feed div{background:rgba(0,0,0,.5);padding:3px 10px;border-radius:8px}#feed .ico{width:1.15em;height:1.15em;vertical-align:-.22em}
.hp.time{top:calc(10px + var(--sat));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:6px 26px 6px 18px;border-radius:24px;border:3px solid var(--gold);box-shadow:0 0 0 2px #0b1434,0 0 18px rgba(255,198,41,.35),var(--sh)}
.hp.time .ico{width:40px;height:40px}#hTime{font:400 44px/1 var(--disp);min-width:2.6ch;text-align:center}
.hp.time.hot{border-color:#ff5a3c}.hp.time.hot #hTime{color:#ff6b4a}
.htr{top:calc(10px + var(--sat));right:calc(14px + var(--sar));display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cur.mini{display:none}
.hbtns{display:flex;gap:10px;pointer-events:auto}
.hbtn{width:64px;height:64px;border-radius:50%;border:3px solid var(--gold);display:grid;place-items:center;font-size:30px;cursor:pointer;box-shadow:0 0 0 2px #0b1434,var(--sh)}
.hbtn .ico{width:1em;height:1em}
#hList{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;width:250px}
#hList li{display:flex;align-items:center;gap:10px;border-radius:16px;padding:6px 12px 6px 6px}
#hList li.me{border:3px solid var(--gold);box-shadow:0 0 0 2px #0b1434,0 0 14px rgba(255,198,41,.35),var(--sh)}#hList li.out{opacity:.4;filter:grayscale(.7)}
#hList img{width:52px;height:52px;border-radius:12px;background:radial-gradient(circle at 50% 30%,#3a5fb0,#172a58);border:2px solid rgba(255,255,255,.2)}
#hList span{flex:1;min-width:0;display:flex;flex-direction:column;font:400 19px/1.1 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hList i{font-style:normal;font-size:20px;margin-top:3px}
#hList em{align-self:flex-end;font:400 17px var(--disp);font-style:normal;display:flex;align-items:center;gap:3px}#hList em .ico{width:20px;height:20px}
#hBar{left:50%;bottom:calc(10px + var(--sab));transform:translateX(-50%);display:flex;gap:10px;padding:9px;border-radius:22px;background:var(--glass);border:2px solid var(--edge);box-shadow:var(--sh)}
.slot{position:relative;width:66px;height:66px;border-radius:14px;background:rgba(5,12,32,.55);border:2px solid rgba(255,255,255,.12);display:grid;place-items:center}
.slot .ico{width:42px;height:42px}.slot b{position:absolute;right:6px;bottom:2px;font:400 17px var(--disp);text-shadow:0 2px 0 #000}
.slot.sel{border:3px solid var(--gold);box-shadow:0 0 12px rgba(255,198,41,.4)}.slot.off .ico{opacity:.18;filter:grayscale(1)}
#banner{top:34%;left:50%;transform:translate(-50%,-50%);font:400 clamp(48px,10vw,110px) var(--disp);color:#fff;-webkit-text-stroke:8px #1a2340;paint-order:stroke fill;opacity:0;white-space:nowrap;text-align:center}
#banner.show{animation:ban 1.3s ease-out forwards}#banner.hot{color:#ff5a3c}#banner.win{color:var(--blast);animation-duration:2.6s}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
/* ---- controles táctiles ---- */
#joy,.act,#emotes{display:none}
body.touch #hBar{display:none}
body.touch #joy{display:block;pointer-events:auto;left:calc(18px + var(--sal));bottom:calc(20px + var(--sab));width:168px;height:168px;border-radius:50%;
  background:radial-gradient(circle,rgba(40,62,112,.75),rgba(16,27,56,.85));border:3px solid rgba(150,180,255,.45);box-shadow:var(--sh),inset 0 0 20px rgba(0,0,0,.4)}
#joy i{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#c9d6ff 45%,#6d86c9);border:3px solid #dfe8ff;box-shadow:0 6px 12px rgba(0,0,0,.45)}
#joy .ar{position:absolute;width:0;height:0;border:9px solid transparent;opacity:.7}
#joy .u{left:50%;top:10px;margin-left:-9px;border-bottom:12px solid #cfe0ff;border-top:0}#joy .d{left:50%;bottom:10px;margin-left:-9px;border-top:12px solid #cfe0ff;border-bottom:0}
#joy .l{top:50%;left:10px;margin-top:-9px;border-right:12px solid #cfe0ff;border-left:0}#joy .r{top:50%;right:10px;margin-top:-9px;border-left:12px solid #cfe0ff;border-right:0}
body.touch .act{display:grid;place-items:center;pointer-events:auto;border-radius:50%;cursor:pointer;touch-action:none;
  background:radial-gradient(circle at 50% 35%,#2e4a8a,#132250);border:4px solid #ffb21f;box-shadow:0 0 0 3px #0b1434,0 0 18px rgba(255,150,30,.45),var(--sh)}
body.touch .act .ico{width:62%;height:62%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
#bBomb{right:calc(18px + var(--sar));bottom:calc(26px + var(--sab));width:118px;height:118px}
#bAb{right:calc(150px + var(--sar));bottom:calc(14px + var(--sab));width:88px;height:88px;border-color:#7fb0ff!important;box-shadow:0 0 0 3px #0b1434,0 0 16px rgba(80,150,255,.45),var(--sh)!important;
  background:conic-gradient(rgba(0,0,0,.65) var(--cd,0deg),transparent 0),radial-gradient(circle at 50% 35%,#2e4a8a,#132250)!important}
#abIc{display:grid;place-items:center;width:100%;height:100%}#abIc .ico{width:60%;height:60%}
#bAb.ready{border-color:var(--gold)!important}
body.touch #bEm{right:calc(24px + var(--sar));bottom:calc(158px + var(--sab));width:52px;height:52px;border-width:3px;border-color:#7fb0ff}
body.touch #emotes.open{display:flex;flex-direction:column-reverse;gap:5px;right:calc(24px + var(--sar));bottom:calc(178px + var(--sab));pointer-events:auto;background:var(--glass);border:2px solid var(--edge);padding:5px;border-radius:16px;align-items:center}
#emotes button{width:38px;height:38px;border-radius:10px;border:0;background:rgba(5,12,32,.55);display:grid;place-items:center}#emotes button .ico{width:24px;height:24px}
/* ---- escala por tamaño de pantalla (PC) ---- */
@media (max-width:1300px),(max-height:760px){#hud{font-size:14px}.hp.alive>.ico{width:38px;height:38px}.hp.alive b{font-size:26px}#hTime{font-size:36px}.hp.time .ico{width:32px;height:32px}
  .hbtn{width:54px;height:54px;font-size:26px}#hList{width:220px}#hList img{width:44px;height:44px}#hList span{font-size:17px}#hList i{font-size:17px}.slot{width:56px;height:56px}.slot .ico{width:36px;height:36px}.chip{font-size:19px}.chip .ico{width:26px;height:26px}}
/* ===================== MÓVIL VERTICAL (referencia 3 y 4) ===================== */
@media (max-aspect-ratio:4/5){
  .pbar{left:calc(10px + var(--sal));right:calc(10px + var(--sar));top:calc(8px + var(--sat));gap:8px}
  .pcard{min-width:0;flex:1 1 auto;padding:6px 12px 6px 6px;gap:10px;border-radius:16px}.pav{width:56px;height:56px}.pav .crown{width:22px;height:22px;right:-9px;top:-11px}
  .pinfo>b{font-size:19px}.pinfo>span{font-size:12px}.xp{height:15px}.xp em{font-size:10px}
  .cur{flex-direction:column;gap:6px}.pill{min-width:0;font-size:17px;padding:4px 4px 4px 7px;gap:6px}.pill>.ico:first-child{width:26px;height:26px}.pill .pl{width:24px;height:24px}
  #s-menu{padding-top:calc(94px + var(--sat));gap:clamp(8px,1.6vh,16px);justify-content:space-between}
  #s-menu .logo{margin-top:auto}.lbomb{width:clamp(80px,13vh,130px);height:clamp(80px,13vh,130px)}
  .logo b,.logo em{font-size:clamp(46px,15vw,86px);-webkit-text-stroke-width:9px}
  .menu{padding:12px;gap:10px;border-radius:22px}
  .row3{gap:8px}.row3 .btn,.codebox{flex-direction:column;gap:4px;min-height:clamp(70px,11vh,96px);font-size:17px;border-radius:16px;padding:6px 4px;justify-content:center}
  .row3 .btn .ico,.codebox .ico{width:34px;height:34px}.codebox{align-items:center}#joinCode{text-align:center;font-size:17px;flex:none}
  #s-menu .dock{width:100%;margin-top:0}.dock button{padding:8px 2px;font-size:13px}.dock button .ico{width:34px;height:34px}
  /* HUD */
  .htl{left:calc(8px + var(--sal));top:calc(8px + var(--sat));gap:7px}.hp.alive{display:none}
  #hProf{display:flex;min-width:0;width:min(46vw,210px);padding:5px 10px 5px 5px;gap:8px;border-radius:16px}#hProf .pav{width:46px;height:46px;border-width:2px}#hProf .crown{width:18px;height:18px;right:-8px;top:-9px}
  #hProf .pinfo>b{font-size:16px}#hProf .pinfo>span{font-size:11px}#hProf .xp{height:12px}#hProf .xp em{font-size:9px;right:5px}
  .chips{gap:5px}.chip{font-size:16px;padding:3px 8px 3px 5px;border-radius:12px}.chip .ico{width:22px;height:22px}
  #feed{font-size:12px}
  .hp.time{top:calc(62px + var(--sat));left:calc(50% + 4px);padding:4px 16px 4px 10px;gap:8px;border-radius:18px}.hp.time .ico{width:28px;height:28px}#hTime{font-size:30px}
  .htr{right:calc(8px + var(--sar));top:calc(8px + var(--sat));gap:7px}
  .cur.mini{display:flex;flex-direction:row;gap:6px}.cur.mini .pill{font-size:15px;padding:3px 10px 3px 5px;border-radius:12px;min-width:0;cursor:default}.cur.mini .pill .ico{width:22px;height:22px}
  .hbtn{width:46px;height:46px;font-size:22px;border-width:2px}
  #hList{width:min(40vw,168px);gap:5px}#hList li{padding:3px 8px 3px 3px;gap:6px;border-radius:12px}#hList li.me{border-width:2px}
  #hList img{width:34px;height:34px;border-radius:9px}#hList span{font-size:14px}#hList i{font-size:13px;margin-top:1px}#hList em{font-size:13px}#hList em .ico{width:14px;height:14px}
  body.touch #joy{width:150px;height:150px}body.touch #joy i{width:66px;height:66px;margin:-33px}
  #bBomb{width:104px;height:104px}#bAb{width:78px;height:78px;right:calc(132px + var(--sar))}body.touch #bEm{width:42px;height:42px;right:calc(30px + var(--sar));bottom:calc(150px + var(--sab))}
  body.touch #emotes.open{right:calc(20px + var(--sar));bottom:calc(198px + var(--sab))}
  body.touch .tag b{font-size:12px;-webkit-text-stroke:2.5px #111a33}body.touch .tag i{font-size:14px}
}
/* ===================== MÓVIL HORIZONTAL / pantallas bajas ===================== */
@media (max-height:520px){
  .pav{width:48px;height:48px}.pcard{min-width:0;padding:4px 12px 4px 4px}.pinfo>b{font-size:17px}.xp{height:13px}.pill{font-size:16px;min-width:0}.pill>.ico:first-child{width:24px;height:24px}.pill .pl{width:22px;height:22px}
  #s-menu{padding-top:calc(66px + var(--sat));gap:6px}.lbomb{display:none}.logo small{display:none}.logo b,.logo em{font-size:clamp(30px,9.5vh,48px);-webkit-text-stroke-width:6px}
  .menu{padding:8px;gap:7px;width:min(560px,100%)}.btn.big{min-height:44px;font-size:22px}.row3 .btn,.codebox,.menu>.btn.dark{min-height:38px;font-size:16px}
  .dock button{padding:3px 10px;font-size:12px}.dock button .ico{width:24px;height:24px}
  .htl{gap:6px}.hp.alive{padding:4px 12px 4px 8px}.hp.alive small{display:none}.hp.alive>.ico{width:28px;height:28px}.hp.alive b{font-size:22px}
  .chip{font-size:15px}.chip .ico{width:20px;height:20px}.hp.time{padding:3px 14px 3px 8px}#hTime{font-size:26px}.hp.time .ico{width:24px;height:24px}
  .hbtn{width:42px;height:42px;font-size:20px;border-width:2px}#hList{width:170px;gap:4px}#hList li{padding:2px 8px 2px 2px}#hList img{width:30px;height:30px}#hList span{font-size:13px}#hList i{font-size:12px}#hList em{font-size:12px}
  body.touch #joy{width:128px;height:128px}#bBomb{width:92px;height:92px}#bAb{width:70px;height:70px;right:calc(120px + var(--sar))}body.touch #bEm{right:calc(22px + var(--sar));bottom:calc(74px + var(--sab));width:36px;height:36px}
  body.touch #emotes.open{right:calc(14px + var(--sar));bottom:calc(108px + var(--sab))}
}
@media (min-width:1700px){.pcard{min-width:380px}.pav{width:84px;height:84px}}

.ftxt{position:absolute;left:0;top:0;font:400 24px var(--disp);-webkit-text-stroke:4px #111a33;paint-order:stroke fill;white-space:nowrap;display:flex;align-items:center;gap:2px;pointer-events:none}.ftxt .ico{width:28px;height:28px}

/* tamaños de iconos dentro de envoltorios <i data-ic> */
[data-ic]{display:inline-grid;place-items:center;line-height:0}
.hp.alive>i{width:46px;height:46px}.pill>i:first-child{width:34px;height:34px}.pill .pl{width:30px;height:30px}.codebox>i{width:28px;height:28px;flex:none}
.pav .crown{display:block}.hp.time>i{width:40px;height:40px}.dock button>i{width:36px;height:36px}
[data-ic]>.ico,.pill>i .ico,.pav .crown .ico{width:100%;height:100%}
@media (max-width:1300px),(max-height:760px){.hp.alive>i{width:38px;height:38px}.hp.time>i{width:32px;height:32px}}
@media (max-aspect-ratio:4/5){
  .pill>i:first-child{width:26px;height:26px}.pill .pl{width:24px;height:24px}.row3 .codebox>i{width:34px;height:34px}.dock button>i{width:34px;height:34px}
  #hProf{width:37vw}
  .hp.time{top:calc(50px + var(--sat));left:calc(39vw + var(--sal));transform:none;padding:3px 12px 3px 7px;gap:6px}.hp.time>i{width:26px;height:26px}#hTime{font-size:28px}
  .htr{gap:6px}.hbtns{gap:6px}#hList{margin-top:2px}
  .chips{margin-top:2px}
}
@media (max-height:520px){.hp.alive>i{width:28px;height:28px}.hp.time>i{width:24px;height:24px}.dock button>i{width:24px;height:24px}}
.btn [data-ic]{width:1.3em;height:1.3em;flex:none}.btn.big [data-ic]{width:1.15em;height:1.15em}.row3 .btn [data-ic],.row3 .codebox>i{width:1.4em;height:1.4em}
@media (max-aspect-ratio:4/5){.chips{gap:4px}.chip{font-size:14px;padding:2px 6px 2px 3px;gap:3px;border-radius:10px}.chip .ico{width:18px;height:18px}
  .row3 .btn [data-ic],.row3 .codebox>i{width:34px;height:34px}}
body:not(.touch) .act,body:not(.touch) #joy,body:not(.touch) #emotes{display:none!important}

/* modal "muy pronto" */
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(5,10,25,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .18s}
.modal.on{opacity:1}.modal .mbox{position:relative;width:min(400px,100%);text-align:center;padding:78px 26px 24px;border-radius:26px;background:var(--glass);border:2px solid rgba(255,170,60,.65);
  box-shadow:0 0 0 2px #0b1434,0 0 40px rgba(255,140,30,.45),var(--sh);transform:scale(.85) translateY(20px);transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.modal.on .mbox{transform:none}
.mart{position:absolute;left:50%;top:-62px;transform:translateX(-50%);width:128px;height:128px;border-radius:28px;display:grid;place-items:center;border:4px solid var(--gold);
  background:radial-gradient(circle at 50% 30%,#3a5fb0,#172a58);box-shadow:0 0 0 3px #0b1434,0 0 26px rgba(255,198,41,.5)}
.mart img{width:110px;height:110px}.mart .emo{width:84px;height:84px}.mart .emo .ico{width:100%;height:100%}
.mprice{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);display:flex;gap:4px;align-items:center;background:#0b1434;border:2px solid var(--gold);border-radius:12px;padding:1px 10px;font:400 16px var(--disp);white-space:nowrap}
.mprice .ico{width:18px;height:18px}
.modal h3{font:400 34px var(--disp);color:var(--gold);text-shadow:0 3px 0 #0b1434;margin-bottom:8px}.modal p{color:#dbe5ff;font-size:16px;margin-bottom:20px}
.modal .btn.big{width:100%;min-height:58px;font-size:26px}
.credit{text-align:center;color:var(--mut);font-size:14px;margin-top:6px}.credit a{color:var(--gold);font-weight:900;text-decoration:none}.credit a:hover{text-decoration:underline}
.pill.lang{min-width:0;padding:6px 14px;font-size:18px;justify-content:center}
.pill.acct{min-width:0;padding:8px;justify-content:center}.pill.acct>i{width:26px;height:26px}
.pill.acct.in{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,198,41,.35),var(--sh),inset 0 2px 0 rgba(255,255,255,.12)}
.mclose{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(6,14,36,.6);border:2px solid rgba(140,170,255,.35);color:#fff;font-size:16px;display:grid;place-items:center;cursor:pointer;z-index:1}
@media (max-width:640px){.pill.acct{padding:6px}.pill.acct>i{width:22px;height:22px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== pantallas de configuración (Práctica / Crear sala) — estilo referencia ===== */
.panel.cfg{justify-content:center;background:rgba(6,12,30,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.panel.cfg>.cfgbox{width:min(840px,100%)}
.cfgbox{display:flex;flex-direction:column;gap:12px;padding:20px 26px 24px;border-radius:30px;background:linear-gradient(180deg,rgba(28,46,92,.94),rgba(12,22,50,.96));
  border:2px solid rgba(110,170,255,.55);box-shadow:0 0 0 2px #0b1434,0 0 34px rgba(60,140,255,.45),var(--sh),inset 0 2px 0 rgba(255,255,255,.12)}
.chead{display:flex;align-items:center;justify-content:center;gap:18px;text-align:center}
.chead>i{width:52px;height:52px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.chead h2{font-size:clamp(34px,5vw,54px);-webkit-text-stroke:6px #111a33;paint-order:stroke fill;line-height:1}
.chead p{color:#8fb6ff;font-weight:900;font-size:16px;margin-top:4px}
.csec,.crow{background:rgba(6,14,36,.55);border:1px solid rgba(140,170,255,.18);border-radius:18px;box-shadow:inset 0 2px 0 rgba(255,255,255,.04)}
.csec{padding:12px 14px 14px}.csec h4{display:flex;align-items:center;gap:10px;font:400 22px var(--disp);margin-bottom:10px}.csec h4 i{width:34px;height:34px}
.cfg .maps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cfg .map{position:relative;aspect-ratio:16/8.4;padding:0;border-radius:14px;border:2px solid rgba(160,190,255,.35);background-size:cover;background-position:center;overflow:hidden;
  display:flex;align-items:flex-end;box-shadow:0 4px 0 #0b1434;transition:transform .12s}
.cfg .map span{width:100%;padding:18px 6px 6px;font:400 clamp(14px,1.9vw,21px)/1 var(--disp);color:#fff;-webkit-text-stroke:4px #111a33;paint-order:stroke fill;
  background:linear-gradient(transparent,rgba(8,16,40,.85) 55%)}
.cfg .map .chk{position:absolute;top:6px;right:6px;width:34px;height:34px;display:none}.cfg .map .chk .ico{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.cfg .map:hover{transform:translateY(-2px)}
.cfg .map.sel{border:3px solid var(--gold);box-shadow:0 0 0 2px #0b1434,0 0 18px rgba(255,198,41,.6)}.cfg .map.sel .chk{display:block}
.crow{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:default}
.crow>i{width:46px;height:46px;flex:none}.crow>div{flex:1;min-width:0;display:flex;flex-direction:column}.crow b{font:400 22px var(--disp)}.crow small{color:#a9b9dd;font-size:14px}
.stepper{display:flex;align-items:center;border-radius:14px;background:#0b1434;border:2px solid rgba(110,170,255,.45);overflow:hidden}
.stepper button{width:52px;height:50px;border:0;background:linear-gradient(#3b82f6,#1d4ed8);color:#fff;font:400 30px var(--disp);cursor:pointer}
.stepper output{min-width:64px;text-align:center;font:400 26px var(--disp)}
.selw{position:relative}.selw select{appearance:none;-webkit-appearance:none;min-width:230px;height:54px;padding:0 44px 0 18px;border-radius:14px;background:#0b1434 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center/20px;
  border:2px solid rgba(110,170,255,.55);font:400 22px var(--disp);color:#fff}
.tgl{appearance:none;-webkit-appearance:none;width:62px;height:34px;min-height:0;border-radius:20px;background:#27355e;border:2px solid rgba(140,170,255,.35);position:relative;cursor:pointer;padding:0;flex:none}
.tgl::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#cbd5e1;transition:.18s}
.tgl:checked{background:#22c55e}.tgl:checked::after{left:31px;background:#fff}
.pbtns{display:flex;justify-content:center;gap:18px;margin-top:4px}
.pbtns .btn{min-width:min(240px,42%);min-height:62px;font-size:28px;border-radius:18px}.pbtns .btn.big{min-height:62px;font-size:30px}
.pbtns .btn [data-ic]{width:1.1em;height:1.1em}
@media (max-width:640px){.cfgbox{padding:14px 12px 16px;gap:10px;border-radius:24px}.chead>i{width:38px;height:38px}.chead p{font-size:13px}
  .cfg .maps{grid-template-columns:repeat(2,1fr);gap:8px}.crow{gap:10px;padding:10px 12px}.crow>i{width:36px;height:36px}.crow b{font-size:19px}.crow small{font-size:12px}
  .stepper button{width:42px;height:44px}.stepper output{min-width:44px;font-size:22px}.selw select{min-width:0;width:150px;height:46px;font-size:18px}
  .pbtns{gap:10px}.pbtns .btn,.pbtns .btn.big{min-height:54px;font-size:22px;flex:1}}
@media (max-height:560px){.cfgbox{padding:10px 16px;gap:8px}.chead h2{font-size:30px}.chead p{display:none}.chead>i{width:32px;height:32px}.cfg .maps{grid-template-columns:repeat(6,1fr);gap:6px}
  .cfg .map{aspect-ratio:4/3}.cfg .map span{font-size:12px;-webkit-text-stroke-width:3px}.crow{padding:6px 12px}.crow small{display:none}.pbtns .btn,.pbtns .btn.big{min-height:46px;font-size:21px}}
/* lienzo: ocupa toda la pantalla (sin franja negra en iOS al ocultar la barra) */
#gl{top:0;left:0;right:0;bottom:0;width:100%;height:100%}
/* ===== MÓVIL EN PARTIDA: HUD compacto para dejar sitio a la arena ===== */
@media (pointer:coarse) and (max-aspect-ratio:4/5){
  #hProf,.cur.mini{display:none!important}
  .htl{top:calc(8px + var(--sat));gap:6px}
  .hp.alive{display:flex!important;padding:4px 12px 4px 6px;gap:6px;border-radius:14px}.hp.alive small{display:none}.hp.alive>i{width:26px;height:26px}.hp.alive b{font-size:22px}
  .hp.time{top:calc(8px + var(--sat));left:50%;transform:translateX(-50%);padding:3px 14px 3px 8px;border-width:2px}.hp.time>i{width:24px;height:24px}#hTime{font-size:26px}
  .htr{top:calc(8px + var(--sat));gap:6px}.hbtn{width:42px;height:42px;font-size:20px}
  #hList{position:fixed;top:calc(58px + var(--sat));right:calc(8px + var(--sar));left:auto;width:auto;max-width:62vw;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:4px}
  #hList li{padding:2px 6px 2px 2px;gap:4px;border-radius:10px;border-width:1px}#hList li.me{border-width:2px}
  #hList img{width:26px;height:26px;border-radius:7px}#hList span{font-size:0;line-height:1}#hList i{font-size:12px;margin:0}#hList em{display:none}
  .chips{gap:4px}.chip{font-size:14px;padding:2px 6px 2px 3px}.chip .ico{width:18px;height:18px}
  body.touch #joy{width:136px;height:136px;left:calc(14px + var(--sal));bottom:calc(14px + var(--sab))}body.touch #joy i{width:60px;height:60px;margin:-30px}
  #bBomb{width:96px;height:96px;right:calc(14px + var(--sar));bottom:calc(18px + var(--sab))}#bAb{width:72px;height:72px;right:calc(120px + var(--sar));bottom:calc(10px + var(--sab))}
  body.touch #bEm{width:38px;height:38px;right:calc(26px + var(--sar));bottom:calc(130px + var(--sab))}
  body.touch #emotes.open{bottom:calc(174px + var(--sab));right:calc(20px + var(--sar))}
}
@media (pointer:coarse) and (max-height:520px){
  #hProf,.cur.mini{display:none!important}
  .htl{top:calc(6px + var(--sat));left:calc(10px + var(--sal));gap:5px}
  .hp.alive{padding:3px 10px 3px 5px;gap:5px;border-radius:12px}.hp.alive small{display:none}.hp.alive>i{width:22px;height:22px}.hp.alive b{font-size:19px}
  .chips{gap:4px}.chip{font-size:13px;padding:1px 6px 1px 3px}.chip .ico{width:16px;height:16px}#feed{display:none}
  .hp.time{top:calc(6px + var(--sat));padding:2px 12px 2px 6px;border-width:2px}.hp.time>i{width:20px;height:20px}#hTime{font-size:22px}
  .htr{top:calc(6px + var(--sat));right:calc(10px + var(--sar));gap:5px}.hbtn{width:38px;height:38px;font-size:18px}
  #hList{display:grid;grid-template-columns:repeat(2,auto);width:auto;gap:3px}
  #hList li{padding:1px 5px 1px 1px;gap:3px;border-radius:9px;border-width:1px}#hList li.me{border-width:2px}
  #hList img{width:22px;height:22px;border-radius:6px}#hList span{font-size:0;line-height:1}#hList i{font-size:10px;margin:0}#hList em{display:none}
  body.touch #joy{width:118px;height:118px;left:calc(12px + var(--sal));bottom:calc(10px + var(--sab))}body.touch #joy i{width:52px;height:52px;margin:-26px}#joy .ar{border-width:7px}
  #bBomb{width:82px;height:82px;right:calc(12px + var(--sar));bottom:calc(12px + var(--sab))}#bAb{width:60px;height:60px;right:calc(102px + var(--sar));bottom:calc(8px + var(--sab))}
  body.touch #bEm{width:32px;height:32px;right:calc(20px + var(--sar));bottom:calc(70px + var(--sab))}
  body.touch #emotes.open{right:calc(14px + var(--sar));bottom:calc(102px + var(--sab))}
  body.touch .tag b{font-size:11px;-webkit-text-stroke:2.5px #111a33}body.touch .tag i{font-size:11px}
}
.crow>.stepper,.crow>.selw{flex:none;flex-direction:row}
.panel.cfg{justify-content:flex-start}.panel.cfg>.cfgbox{margin:auto 0}
@media (max-height:780px) and (min-height:561px){.cfgbox{gap:9px;padding:14px 22px 18px}.chead h2{font-size:40px}.chead>i{width:40px;height:40px}.cfg .map{aspect-ratio:16/7}.crow{padding:8px 14px}.pbtns .btn,.pbtns .btn.big{min-height:52px;font-size:24px}}
@media (max-width:640px){.selw select{width:140px;font-size:16px;padding:0 34px 0 12px;background-position:right 8px center}.crow small{font-size:11px;line-height:1.2}}

.acc{margin-top:4px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}.acc h4{display:flex;align-items:center;gap:8px;font:400 20px var(--disp)}.acc h4 i{width:26px;height:26px}
.acc .row3{grid-template-columns:1fr auto}.acc input{min-height:44px;border-radius:12px;background:#0b1434;border:2px solid rgba(110,170,255,.4);color:#fff;padding:0 12px;font:800 15px var(--body)}
.acc .btn{min-height:44px;font-size:16px;padding:0 16px}
/* pantalla de carga con el logo oficial */
.loadwrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.loadlogo{width:min(62vw,300px);height:auto;filter:drop-shadow(0 10px 26px rgba(255,140,20,.35));animation:logoPulse 2.2s ease-in-out infinite}
@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.tagline{display:flex;align-items:center;gap:2px}
.dots{display:inline-flex;gap:4px;margin-left:2px}
.dots i{width:7px;height:7px;border-radius:50%;background:#ffc629;display:inline-block;animation:dotBounce 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dotBounce{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.loadlogo,.dots i{animation:none}}