/* DELUX Arena V29 — responsive mobile lobby */
:root{--dlx-gold:#e8c37a;--dlx-glass:rgba(10,12,18,.78)}
html{min-height:100%;background:#050608}
body{background:radial-gradient(ellipse at 50% 8%,#18212b 0,#090b10 42%,#030405 100%);min-height:100dvh}
header{position:sticky;top:0;z-index:20;background:rgba(4,5,8,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(232,195,122,.2);padding:12px max(16px,env(safe-area-inset-left))}
header h1{font-size:clamp(20px,5vw,26px);letter-spacing:.02em}
header a{font-size:12px;text-decoration:none}
main{width:min(100%,980px);padding:clamp(10px,2.8vw,24px)}
#s-lobby{position:relative}
#s-lobby .hero{max-width:760px;width:100%;border:1px solid rgba(232,195,122,.35);border-radius:clamp(14px,3vw,24px);box-shadow:0 24px 70px #000b,0 0 35px #e8c37a12;isolation:isolate}
#s-lobby .hero:after{content:"";position:absolute;inset:45% 0 0;pointer-events:none;background:linear-gradient(transparent,#050608b8)}
#s-lobby .hero canvas{width:100%;aspect-ratio:16/9;min-height:0;object-fit:cover}
#s-lobby .ht{justify-content:center;padding:0;background:linear-gradient(180deg,#0002 10%,#0005 65%,#000b)}
#s-lobby .ht h2{font-size:clamp(58px,14vw,120px);letter-spacing:.025em}
#s-lobby .ht h3{font-size:clamp(17px,4vw,28px);letter-spacing:.55em}
#s-lobby .k2{text-align:left;margin:18px 4px 4px;color:#eee;font-size:15px}
#s-lobby #dlx-pais{margin:4px 4px 14px;color:#a9aeb9;font-size:12px}
#s-lobby .menu{gap:10px;margin:14px 0 18px}
#s-lobby .big{min-height:58px;border-radius:13px;font-size:clamp(14px,3.5vw,17px);font-weight:800;letter-spacing:.015em;box-shadow:0 7px 20px #0006;transition:transform .16s,filter .16s}
#s-lobby .big:active{transform:scale(.975);filter:brightness(1.15)}
#s-lobby .big:not(.sec){background:linear-gradient(135deg,#fff0bd,#e8c37a 55%,#bd8739);border-color:#f5d99d;color:#17110a}
#s-lobby .big.sec{background:linear-gradient(145deg,#1a1d24,#0b0d12);border-color:#75603c;color:#f0d49a}
#s-lobby .pl{display:block;padding:12px 14px;margin:10px 0;border:1px solid #ffffff18;border-radius:13px;background:var(--dlx-glass);color:#b9bdc7}
#s-lobby select{width:100%;margin-top:7px;min-height:46px;background:#080a0e;border-color:#76603b}
#s-lobby details.card{border-color:#ffffff20;background:var(--dlx-glass);border-radius:14px}
#s-lobby details summary{font-size:16px}
#s-lobby .tiny{line-height:1.65;color:#aeb3bd}
#s-login .hero{max-width:760px}
#s-login .hero canvas{aspect-ratio:16/9;min-height:0}
.card{background:linear-gradient(145deg,rgba(20,23,30,.96),rgba(8,10,14,.96));border-color:#ffffff20;box-shadow:0 14px 40px #0005}
button,select,input{touch-action:manipulation}
button{min-height:44px}
#s-tienda .ovh,#s-cfg .ovh{background:rgba(5,7,11,.94);backdrop-filter:blur(16px)}
@media(max-width:600px){
 header{padding:10px 14px}
 main{padding:10px 12px 28px}
 #s-lobby .hero{border-radius:15px}
 #s-lobby .hero canvas{aspect-ratio:4/3}
 #s-lobby .ht h2{font-size:clamp(54px,17vw,88px)}
 #s-lobby .menu{gap:8px;margin:12px 0}
 #s-lobby .big{min-height:54px;padding:12px 8px;font-size:14px}
 #s-lobby .card{padding:15px}
 #s-login .hero canvas{aspect-ratio:4/3}
}
@media(min-width:760px){
 #s-lobby .menu{grid-template-columns:repeat(4,minmax(0,1fr))}
 #s-lobby .big{min-height:64px}
}
@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){
 body.playing .ctl{right:8px;bottom:8px;width:220px;padding:7px}
 body.playing #joy{width:112px;height:112px;left:12px;bottom:10px}
 body.playing #stick{width:48px;height:48px;margin:-24px 0 0 -24px}
}