/* PIXARTE ARCADE · estilos de la portada de juegos y de la pantalla de juego */
:root{--bg:#0b0618;--bg2:#140a2e;--card:#1a1036;--card2:#24164a;--line:#ffffff1f;--line2:#ffffff33;--txt:#f6f2ff;--mut:#b9aee0;
  --pink:#ff3df2;--cyan:#2ef2ff;--lime:#b6ff45;--gold:#ffd23a;--vio:#8b5cf6;--red:#ff5d7a;--r:22px;
  --font:"Fredoka","Baloo 2",ui-rounded,"Nunito","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--txt);font:16px/1.5 var(--font);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 520px at 85% -10%,#5b21b655 0,transparent 60%),radial-gradient(800px 500px at -10% 40%,#0e7490 0,transparent 55%),
  radial-gradient(700px 400px at 50% 110%,#be185d44 0,transparent 60%),var(--bg);opacity:.9}
a{color:inherit}button,input,select{font:inherit;color:inherit}button{cursor:pointer}
.wrap{width:min(1200px,100% - 32px);margin:0 auto}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- barra superior ---------- */
.abar{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);background:#0b0618d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.abar .wrap{display:flex;align-items:center;gap:14px;min-height:62px}
.alogo{display:flex;align-items:baseline;gap:7px;text-decoration:none;font-weight:900;letter-spacing:.04em;font-size:19px;white-space:nowrap}
.alogo span{background:linear-gradient(90deg,var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.alogo b{font-size:12.5px;letter-spacing:.24em;color:var(--lime);font-weight:900}
.anav{display:flex;gap:4px;margin-left:6px}.anav a{text-decoration:none;padding:8px 12px;border-radius:999px;font-weight:700;color:var(--mut);white-space:nowrap}
.anav a:hover{color:var(--txt);background:#ffffff10}.anav a.on{color:#14082b;background:var(--lime)}
.awallet{margin-left:auto;display:flex;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#ffffff12;border:1px solid var(--line);font-weight:800;white-space:nowrap;text-decoration:none;line-height:1.2}
button.chip{cursor:pointer}.chip b{font-weight:900}.chip.coins b{color:var(--gold)}.chip.fire b{color:#ff9d3a}.chip.who{background:#b6ff4518;border-color:#b6ff4560}
.chip .av{font-style:normal;font-size:18px;line-height:1}
.ahome{display:none;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;background:#ffffff12;border:1px solid var(--line);text-decoration:none;color:var(--txt);font-weight:800;font-size:14px;white-space:nowrap;flex:none}
.ahome:hover,.ahome:focus-visible{background:#ffffff22;outline:none}
@media (max-width:820px){.anav{display:none}.ahome{display:inline-flex}}
@media (max-width:520px){.abar .ghome{display:none}.ahome{width:38px;padding:0;justify-content:center;font-size:17px}.ahome span{display:none}}
@media (max-width:520px){.chip{padding:6px 10px;font-size:14px}.chip.who span{display:none}.alogo{font-size:17px}}

/* ---------- portada: cabecera ---------- */
.ahero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);min-height:min(56vw,520px);display:flex;align-items:flex-end}
.ahero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2;animation:heroZoom 30s ease-in-out infinite alternate}
.ahero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b061800 0,#0b061833 40%,#0b0618e6 82%,var(--bg) 100%),linear-gradient(90deg,#0b0618cc 0,#0b061800 60%)}
@keyframes heroZoom{to{transform:scale(1.07)}}
.ahero-in{padding:40px 0 34px;position:relative}
.kick{display:inline-flex;gap:8px;align-items:center;font-weight:900;font-size:12.5px;letter-spacing:.18em;color:var(--cyan);background:#2ef2ff14;border:1px solid #2ef2ff44;padding:6px 12px;border-radius:999px}
.ahero h1{margin:14px 0 8px;font-size:clamp(40px,7.6vw,88px);line-height:.92;font-weight:900;letter-spacing:-.01em;text-shadow:0 6px 30px #000a}
.ahero h1 span{display:block;background:linear-gradient(92deg,#fff 10%,#ffd6fb 40%,var(--pink) 70%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px #ff3df266)}
.ahero h1 em{font-style:normal;color:var(--lime);filter:drop-shadow(0 0 18px #b6ff4588)}
.ahero p{max-width:560px;font-size:clamp(16px,2vw,19px);color:#ece6ff;margin:0 0 20px;text-shadow:0 2px 12px #000c}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.acta{display:inline-flex;align-items:center;gap:9px;padding:15px 24px;border-radius:999px;border:0;background:linear-gradient(100deg,var(--lime),#7dffb0);color:#0d1a05;font-weight:900;font-size:17px;text-decoration:none;box-shadow:0 12px 34px #b6ff4544,inset 0 -3px 0 #0002;transition:transform .15s,box-shadow .15s}
.acta:hover{transform:translateY(-2px);box-shadow:0 16px 40px #b6ff4566}.acta:active{transform:translateY(1px)}
.acta.ghost{background:#ffffff14;color:var(--txt);border:1px solid var(--line2);box-shadow:none;backdrop-filter:blur(6px)}
.acta.pink{background:linear-gradient(100deg,var(--pink),#a855f7);color:#fff;box-shadow:0 12px 34px #ff3df244}
.astats{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.astat{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:#0b0618b3;border:1px solid var(--line);backdrop-filter:blur(8px)}
.astat i{font-style:normal;font-size:24px}.astat b{display:block;font-size:19px;line-height:1.1}.astat small{color:var(--mut);font-size:12.5px}

/* ---------- reto diario y racha ---------- */
.aday{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:22px}
.dcard{position:relative;overflow:hidden;border-radius:var(--r);padding:20px;border:1px solid var(--line2);background:linear-gradient(135deg,#2a1260,#151034 60%)}
.dcard h3{margin:0;font-size:13px;letter-spacing:.16em;color:var(--cyan)}.dcard h4{margin:6px 0 4px;font-size:24px;line-height:1.15}
.dcard p{margin:0;color:#ddd5ff}
.dcard.reto{background:radial-gradient(400px 200px at 100% 0,#ff3df240,transparent 70%),linear-gradient(135deg,#311268,#140d36 65%)}
.dcard.reto .big{position:absolute;right:16px;top:12px;font-size:64px;filter:drop-shadow(0 8px 20px #0008);animation:bob 3s ease-in-out infinite}
.dcard .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.prize{display:inline-flex;align-items:center;gap:6px;font-weight:900;color:var(--gold);background:#ffd23a17;border:1px solid #ffd23a55;border-radius:999px;padding:6px 12px}
.done{display:inline-flex;align-items:center;gap:6px;font-weight:900;color:var(--lime);background:#b6ff4517;border:1px solid #b6ff4566;border-radius:999px;padding:6px 12px}
.dcard.racha{background:radial-gradient(300px 200px at 0 0,#ff8a3a33,transparent 70%),linear-gradient(135deg,#3a1630,#170c2c 65%)}
.flame{font-size:44px;line-height:1;filter:drop-shadow(0 0 14px #ff8a3a99);animation:flick 1.6s ease-in-out infinite}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.week i{font-style:normal;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;background:#ffffff0d;border:1px solid var(--line);font-size:12px;font-weight:900;color:var(--mut)}
.week i.on{background:linear-gradient(160deg,#ff9d3a,#ff3d6e);border-color:#ffb27a;color:#fff;box-shadow:0 6px 18px #ff6a3a44}
.week i.today{outline:2px dashed #ffffff66;outline-offset:2px}
@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}@keyframes flick{50%{transform:scale(1.08) rotate(3deg)}}
@media (max-width:820px){.aday{grid-template-columns:1fr}}

/* ---------- secciones y rejilla de juegos ---------- */
.asec{margin:34px auto 0}
.ahead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ahead h2{margin:0;font-size:clamp(24px,3.4vw,34px);line-height:1.1}.ahead p{margin:4px 0 0;color:var(--mut)}
.atabs{display:flex;gap:6px;flex-wrap:wrap}
.atabs button{border:1px solid var(--line);background:#ffffff0a;border-radius:999px;padding:8px 14px;font-weight:800;color:var(--mut)}
.atabs button.on{background:var(--txt);color:#14082b;border-color:var(--txt)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.gcard{--c1:#7c3aed;--c2:#22d3ee;position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;text-decoration:none;background:var(--card);border:1px solid var(--line);
  box-shadow:0 14px 40px #0006;transition:transform .2s cubic-bezier(.2,.8,.2,1.2),box-shadow .2s,border-color .2s;isolation:isolate}
.gcard:hover,.gcard:focus-visible{transform:translateY(-5px) scale(1.015);box-shadow:0 22px 50px #0009,0 0 0 2px var(--c2),0 0 40px -6px var(--c1);outline:none}
.gart{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 10%,color-mix(in srgb,var(--c1) 85%,#fff) 0,var(--c1) 35%,color-mix(in srgb,var(--c1) 40%,#0b0618) 100%)}
.gart:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 20%,color-mix(in srgb,var(--c2) 45%,transparent) 25%,transparent 32% 70%,color-mix(in srgb,var(--c2) 35%,transparent) 75%,transparent 82%);animation:spin 18s linear infinite;opacity:.55}
.gart:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff2e 1.2px,transparent 1.4px);background-size:16px 16px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.gart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .4s}
.gcard:hover .gart img{transform:scale(1.06)}
.gemo{position:relative;z-index:1;font-style:normal;font-size:clamp(64px,9vw,84px);line-height:1;filter:drop-shadow(0 10px 18px #0009) drop-shadow(0 0 26px color-mix(in srgb,var(--c2) 70%,transparent));transition:transform .3s cubic-bezier(.2,.8,.2,1.4)}
.gcard:hover .gemo{transform:scale(1.14) rotate(-6deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.gtxt{display:block;padding:14px 16px 4px}.gtxt b{display:block;font-size:20px;line-height:1.15}.gtxt small{display:block;color:var(--mut);font-size:14px;line-height:1.35;margin-top:3px}
.gmeta{display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px 16px;margin-top:auto;font-size:12.5px;font-weight:800}
.gmeta span{padding:3px 9px;border-radius:999px;background:#ffffff10;border:1px solid var(--line);white-space:nowrap}
.gmeta .lead{color:var(--gold)}.gmeta .mine{color:var(--lime)}
.gtag{position:absolute;z-index:2;top:10px;left:10px;font-size:11.5px;font-weight:900;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:#0b0618cc;border:1px solid var(--line2);backdrop-filter:blur(6px)}
.gtag.new{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 4px 16px #ff3df266}
.gtag.today{left:auto;right:10px;background:var(--gold);border-color:var(--gold);color:#3a2a00}
.gplay{position:absolute;z-index:2;right:12px;top:calc(62.5% - 22px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#0d1a05;font-size:18px;box-shadow:0 8px 20px #0008;transform:scale(.6);opacity:0;transition:.2s}
.gcard:hover .gplay{transform:scale(1);opacity:1}
.gcard.feat{grid-column:span 2}.gcard.feat .gart{aspect-ratio:21/10}.gcard.feat .gemo{font-size:clamp(84px,12vw,120px)}
@media (max-width:540px){.gcard.feat{grid-column:auto}.gcard.feat .gart{aspect-ratio:16/10}}
.agrid.soon{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.agrid.soon .gcard{pointer-events:none;filter:saturate(.35);opacity:.78;box-shadow:none}
.agrid.soon .gart{aspect-ratio:16/9}.agrid.soon .gemo{font-size:46px}.agrid.soon .gtxt{padding:10px 12px 12px}.agrid.soon .gtxt b{font-size:15.5px}.agrid.soon .gtxt small{display:none}
.agrid.soon .gcard:before{content:"🔒";position:absolute;z-index:3;right:8px;top:8px;font-size:16px}
@media (max-width:480px){.agrid{grid-template-columns:1fr 1fr;gap:10px}.gtxt{padding:10px 12px 2px}.gtxt b{font-size:16.5px}.gtxt small{font-size:12.5px}.gmeta{padding:6px 12px 12px}.gemo{font-size:54px}.gcard.feat{grid-column:span 2}}

/* ---------- logros ---------- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bdg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 10px;border-radius:18px;background:#ffffff08;border:1px solid var(--line)}
.bdg i{font-style:normal;font-size:34px;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#ffffff0c;filter:grayscale(1);opacity:.45}
.bdg b{font-size:14.5px;line-height:1.2}.bdg small{font-size:12px;color:var(--mut);line-height:1.3}.bdg em{font-style:normal;font-size:12px;font-weight:900;color:var(--gold)}
.bdg.got{background:linear-gradient(160deg,#3b1a6e,#1c1240);border-color:#c08bff66}
.bdg.got i{filter:none;opacity:1;background:radial-gradient(circle at 50% 35%,#ffe58a,#ff9d3a 70%);box-shadow:0 0 22px #ffb23a66}
.prog{height:10px;border-radius:999px;background:#ffffff14;overflow:hidden;margin:8px 0 2px}.prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),#ff9d3a)}

.how{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.how div{padding:16px;border-radius:18px;background:#ffffff08;border:1px solid var(--line)}.how i{font-style:normal;font-size:30px}.how b{display:block;margin:6px 0 2px}.how p{margin:0;color:var(--mut);font-size:14px}
@media (max-width:820px){.how{grid-template-columns:1fr 1fr}}

.abanner{position:relative;margin:30px auto 0;padding:18px 12px 10px;border-radius:18px;background:#ffffff08;border:1px solid var(--line);text-align:center}
.abanner small{position:absolute;left:12px;top:4px;font-size:10px;font-weight:700;color:var(--mut)}.abanner img{max-width:100%;max-height:140px;border-radius:10px;cursor:pointer}

.afoot{margin-top:50px;border-top:1px solid var(--line);padding:22px 0 30px;color:var(--mut);font-size:14px}
.afoot .wrap{display:flex;gap:12px 20px;flex-wrap:wrap;justify-content:space-between}.afoot nav{display:flex;gap:14px;flex-wrap:wrap}.afoot a{text-decoration:none;color:var(--lime);font-weight:700}

/* ---------- pantalla de juego ---------- */
body.play{height:100vh;height:100dvh;height:var(--app-h,100dvh);min-height:0;overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none;touch-action:manipulation}
body.play .abar{position:relative;flex:none}
body.play .abar .wrap{min-height:54px;width:min(1200px,100% - 20px)}
.gtitle{display:flex;align-items:center;gap:8px;font-weight:900;font-size:18px;min-width:0}.gtitle span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ffffff12;border:1px solid var(--line);text-decoration:none;font-size:18px;flex:none}
.ibtn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ffffff12;border:1px solid var(--line);font-size:17px;flex:none;padding:0}
.ibtn[aria-pressed=false]{opacity:.5}
.ibtn[hidden]{display:none}#bFull[aria-pressed=false]{opacity:1}
.arena{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))}
.stage{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px #ffffff26,0 20px 60px #000a,0 0 80px -20px var(--gc,#8b5cf6);background:#07030f;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stage canvas{display:block;width:100%;height:100%}
.ov{position:absolute;inset:0;z-index:5;display:flex;align-items:safe center;justify-content:center;padding:18px;background:radial-gradient(circle at 50% 30%,#2a1260e6,#0b0618f2 75%);overflow:auto;animation:fade .25s}
.ov.clear{background:#0b061899;backdrop-filter:blur(3px)}
.stage.hasimg .ov:not(.clear){background:linear-gradient(180deg,#0b061866 0,#0b0618d9 34%,#0b0618f5 70%),var(--gimg) center top/cover no-repeat}
.stage.hasimg .ov:not(.clear) .gi{filter:drop-shadow(0 4px 14px #000c)}
.ovb{width:min(380px,100%);text-align:center}
.ovb .gi{font-size:68px;line-height:1;filter:drop-shadow(0 0 24px var(--gc,#8b5cf6));animation:bob 3s ease-in-out infinite}
.ovb h2{margin:8px 0 4px;font-size:34px;line-height:1.05}.ovb p{margin:6px 0;color:#ddd5ff}
.ovb .help{font-size:14.5px;color:var(--mut);background:#ffffff0a;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:12px 0}
.ovb .help b{color:var(--txt)}
.ovb .btns{display:flex;flex-direction:column;gap:9px;margin-top:14px}.ovb .btns .acta{justify-content:center}
.ovb .mini{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.ovb .mini button,.ovb .mini a{border:1px solid var(--line2);background:#ffffff10;border-radius:999px;padding:8px 14px;font-weight:800;font-size:14px;text-decoration:none}
.bigscore{font-size:56px;font-weight:900;line-height:1;margin:4px 0;background:linear-gradient(180deg,#fff,#d8c8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.newbest{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.1em;color:#3a2a00;background:var(--gold);padding:4px 12px;border-radius:999px;animation:pulse 1s ease-in-out infinite}
.res{display:flex;flex-direction:column;gap:6px;margin:12px 0;text-align:left}
.res div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#ffffff0b;border:1px solid var(--line);font-weight:700;animation:slidein .35s backwards}
.res div b{color:var(--gold);white-space:nowrap}.res div.rk b{color:var(--cyan)}.res div.bd{background:linear-gradient(90deg,#4a1d8a,#2a1260);border-color:#c08bff77}
.res div:nth-child(2){animation-delay:.12s}.res div:nth-child(3){animation-delay:.24s}.res div:nth-child(4){animation-delay:.36s}.res div:nth-child(5){animation-delay:.48s}.res div:nth-child(6){animation-delay:.6s}
.guest{font-size:14px;padding:10px 12px;border-radius:14px;background:#b6ff4512;border:1px solid #b6ff4544;margin:10px 0;color:#e8ffd0}
.guest button{background:none;border:0;padding:0;color:var(--lime);font-weight:900;text-decoration:underline;cursor:pointer}
@keyframes fade{from{opacity:0}}@keyframes pulse{50%{transform:scale(1.07)}}@keyframes slidein{from{opacity:0;transform:translateX(-12px)}}

/* mandos táctiles */
.tpad{display:none;width:100%;max-width:520px;gap:10px;justify-content:space-between;align-items:center;flex:none;touch-action:none;user-select:none;-webkit-user-select:none}
body.touch .tpad.on{display:flex}
.tpad .grp{display:flex;gap:10px;align-items:center}
.tpad button{width:62px;height:62px;border-radius:20px;border:1px solid #ffffff30;background:linear-gradient(180deg,#ffffff1f,#ffffff08);font-size:24px;font-weight:900;color:#fff;box-shadow:0 6px 0 #00000055,inset 0 1px 0 #ffffff30;-webkit-tap-highlight-color:transparent;touch-action:none;display:grid;place-items:center;padding:0}
.tpad button.dn{transform:translateY(4px);box-shadow:0 2px 0 #00000055;background:linear-gradient(180deg,#ffffff38,#ffffff14)}
.tpad button.big{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--gc,#8b5cf6) 70%,#fff),var(--gc,#8b5cf6))}
.tpad button.sm{width:52px;height:52px;font-size:18px;border-radius:16px}
.tpad .dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,52px);gap:4px}
.tpad .dpad button{width:58px;height:52px;border-radius:14px}
@media (max-width:420px){.tpad{gap:6px}.tpad .grp{gap:6px}.tpad button{width:50px;height:50px;border-radius:16px;font-size:21px}.tpad button.big{width:60px;height:60px}.tpad button.sm{width:44px;height:44px;font-size:17px}}
.tpad.solo{justify-content:center}
body.play .awallet .chip.fire{display:none}
@media (max-height:640px){.tpad button{width:54px;height:54px}.tpad button.big{width:64px;height:64px}.tpad .dpad{grid-template-rows:repeat(3,44px)}.tpad .dpad button{height:44px}}


/* pantallas en horizontal (móvil girado y tablet): mandos a los lados del juego */
body.play.land .arena{flex-direction:row;gap:16px}
body.play.land .tpad.on{display:contents}
body.play.land .tpad>:first-child{order:-1}
body.play.land .tpad>:last-child:not(:first-child){order:1}
body.play.land .arena{position:relative}
body.play.land .tpad.solo>:first-child{position:absolute;left:max(16px,env(safe-area-inset-left));top:50%;transform:translateY(-50%)}
body.play.land .tpad .grp{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px;max-width:140px}
@media (max-width:380px){.tpad,.tpad .grp{gap:5px}.tpad button{width:46px;height:46px;font-size:19px;border-radius:14px}.tpad button.big{width:56px;height:56px}.tpad button.sm{width:40px;height:40px;font-size:16px}.tpad .dpad{grid-template-columns:repeat(3,52px)}.tpad .dpad button{width:52px}}
@media (max-height:500px){body.play .abar .wrap{min-height:40px}body.play .back,body.play .ibtn{width:32px;height:32px;font-size:15px;border-radius:10px}
  body.play .chip{padding:3px 8px;font-size:13px}body.play .gtitle{font-size:15px}.arena{padding:6px 8px}
  body.play.land .tpad button{width:52px;height:52px}body.play.land .tpad button.big{width:62px;height:62px}body.play.land .tpad .dpad{grid-template-rows:repeat(3,46px)}body.play.land .tpad .dpad button{height:46px}}

/* móvil girado: la barra de arriba se convierte en botones flotantes en las esquinas y el juego usa toda la altura */
@media (max-height:560px){
  body.play.land .abar{position:absolute;top:0;left:0;right:0;z-index:40;padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
  body.play.land .abar .wrap{width:100%;min-height:0;padding:max(8px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));gap:6px;box-sizing:border-box}
  body.play.land .abar .wrap>*{pointer-events:auto}
  body.play.land .gtitle{display:none}
  body.play.land .awallet{display:none}
  body.play.land #bMus{margin-left:auto}body.play.land #bMus[hidden]+#bSnd{margin-left:auto}
  body.play.land .back,body.play.land .ibtn{background:#0b0618b3;width:34px;height:34px;font-size:15px;border-radius:10px}
  body.play.land .abar .ghome{display:grid}
  body.play.land .arena{padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left))}
  body.play.land .tpad>:first-child,body.play.land .tpad>:last-child:not(:first-child){margin-top:30px}
}

/* ---------- ventanas (perfil, PIN, ranking) ---------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:safe center;justify-content:center;padding:16px;background:#05020dcc;backdrop-filter:blur(5px);overflow:auto;animation:fade .2s}
.mbox{position:relative;width:min(520px,100%);background:linear-gradient(180deg,#2a1260,#140d36);border:1px solid var(--line2);border-radius:24px;padding:22px;box-shadow:0 40px 100px #000b;animation:pop .22s ease-out}
.mbox h2{margin:0 0 6px;font-size:24px}.mbox p{color:#ddd5ff}
.mx{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;border:0;background:#ffffff18;font-size:18px}
@keyframes pop{from{opacity:0;transform:scale(.94)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid var(--line);background:#ffffff12;font-weight:900;text-decoration:none}
.btn.main{background:var(--lime);color:#0d1a05;border-color:var(--lime)}.btn.wide{width:100%}.btn:disabled{opacity:.5}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1}
.err{color:#ffb4bd;font-weight:700;min-height:1.2em;margin:8px 0 0}
.pin{display:flex;gap:10px;justify-content:center;margin:14px 0}.pin i{width:18px;height:18px;border-radius:50%;border:2px solid #ffffff66}.pin i.f{background:var(--lime);border-color:var(--lime)}
.pin.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.mbox .pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:0 auto}
.mbox .pad button{width:auto;height:58px;border-radius:16px;border:1px solid var(--line);background:#ffffff12;font-size:22px;box-shadow:none}
.who-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.who-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:18px;background:#ffffff0b;border:2px solid var(--line);text-align:center}
.who-card:hover{border-color:var(--lime)}.who-card .big{font-size:46px;line-height:1}.who-card small{color:var(--mut)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;padding:13px 20px;border-radius:999px;background:#24164a;border:1px solid #b6ff4588;font-weight:800;box-shadow:0 20px 50px #000a;animation:pop .25s;max-width:calc(100% - 32px);text-align:center}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:95}
.rank{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:min(60vh,520px);overflow:auto}
.rank li{display:grid;grid-template-columns:38px 30px 1fr auto;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:#ffffff0a;border:1px solid var(--line);font-weight:700}
.rank li .p{font-weight:900;text-align:center;color:var(--mut)}.rank li .e{font-size:20px}.rank li b{color:var(--gold)}.rank li.me{background:#b6ff451c;border-color:#b6ff4577}
.rank li:nth-child(1) .p,.rank li:nth-child(2) .p,.rank li:nth-child(3) .p{font-size:20px}
.pop-badge{position:fixed;left:50%;top:18%;z-index:96;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:20px;background:linear-gradient(120deg,#5b21b6,#be185d);border:2px solid #ffd23a;box-shadow:0 20px 60px #000b,0 0 40px #ffd23a55;animation:badgeIn .5s cubic-bezier(.2,.8,.2,1.3)}
.pop-badge i{font-style:normal;font-size:30px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 35%,#ffe58a,#ff9d3a 70%)}
.pop-badge small{display:block;font-size:11px;letter-spacing:.14em;font-weight:900;color:#ffe58a}.pop-badge b{font-size:17px}
@keyframes badgeIn{from{opacity:0;transform:translate(-50%,-30px) scale(.8)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}