/* Neon identity across the entire arcade, including selection and settings. */
:root { --cyan:#00f0ff; --mag:#ff2bd6; --yel:#ffe14d; --panel:#110a2a; --line:#4d2b69; }
.show-shop .screen,.show-stages .screen,.show-settings .screen,.show-daily .screen,.show-vssetup .screen,.show-help .screen {
 background:radial-gradient(ellipse at 10% 0,#25104a 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#052b3d 0,transparent 50%),#080415fa;
}
.bar h2 { color:#ecfaff; text-shadow:0 0 24px #00f0ff55; font-style:italic; letter-spacing:-.03em; }
.card,.pick,.dcard { background:linear-gradient(140deg,#201036ed,#0a1124f2); border-color:#69478977; box-shadow:inset 0 1px #b76bff22,0 12px 28px #0004; }
.btn { border-color:#8052a27a; background:linear-gradient(120deg,#221035ed,#10182eec); border-radius:5px; }
.btn:hover,.btn:focus-visible { background:#163146; border-color:#00f0ff; box-shadow:0 0 22px #00f0ff35; }
.btn.primary { background:linear-gradient(110deg,#741b70,#321559); color:#fff3fd; border-color:#ff2bd6; box-shadow:0 0 22px #ff2bd63b,inset 0 0 22px #ff2bd612; }
.btn.primary:hover,.btn.primary:focus-visible { background:#88217c; color:#fff; border-color:#ff96ee; }
.btn.primary small { color:#ffd3f6; }
.tab.on { color:#00f0ff; text-shadow:0 0 12px #00f0ff88; }
.screen.title { column-gap:5vw; background:radial-gradient(ellipse at 10% 40%,#1d0a3c 0,transparent 60%),linear-gradient(115deg,#060319,#0e0523 62%,#0a1224); }
.title .cover-art { position:relative; width:100%; height:clamp(130px,28vh,295px); margin:12px 0; overflow:hidden; border:1px solid #793d9a77; border-radius:6px; box-shadow:0 0 35px #ad21ff15; }
.cover-art img { width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block; }
.cover-art::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#09051ed9,transparent 40%); pointer-events:none; }
.cover-caption { position:absolute; z-index:1; left:15px; bottom:11px; color:#ccfaff; font:750 9px system-ui; letter-spacing:.2em; }
.title .hero-copy { margin-top:14px; }
.title .hero-meta { gap:10px; font-size:9px; }
.title .hero-neon { font-size:clamp(60px,8.3vw,135px); }
.title .hero-brawl { font-size:clamp(25px,3.7vw,59px); }
.title .menu-utilities { flex-wrap:wrap; gap:8px; }
.title .menu-utilities .btn { flex:1; white-space:nowrap; font-size:10px; padding:10px; }
.title .menu-utilities .btn:last-child { flex:0 0 38px; }
.arena-intro { color:#b8accc; font-size:13px; margin:0 0 20px; }
.stagegrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.card.stage { display:flex; flex-direction:column; text-align:left; padding:0 0 14px; border-radius:9px; overflow:hidden; transition:border-color .2s,transform .2s,box-shadow .2s; }
.card.stage:hover { border-color:var(--c); transform:translateY(-3px); box-shadow:0 0 25px color-mix(in srgb,var(--c) 20%,transparent); }
.card.stage .sprev { width:100%; height:auto; aspect-ratio:16/9; margin:0 0 12px; border:0; border-bottom:1px solid #a16dff33; border-radius:0; }
.card.stage > b,.card.stage > span,.card.stage > small,.card.stage > button { margin-left:15px; margin-right:15px; }
.card.stage > b { font-size:13px; font-style:italic; color:#f0edff; line-height:1.5; }
.stage-motion { color:var(--c2); font:550 11px system-ui; padding:7px 0; display:flex; align-items:center; gap:7px; }
.stage-motion i { width:5px; height:5px; background:var(--c2); border-radius:50%; box-shadow:0 0 8px var(--c2); }
.stage-props { color:#aa9cbe; font:400 10px/1.7 system-ui; margin-bottom:14px; text-transform:capitalize; }
.card.stage .btn { margin-top:auto; font-size:11px; padding:10px; }
.show-stages .hint { font-size:11px; color:#b6a9cd; line-height:1.7; margin:14px 0 0; }
#touch.prop-ready .t-weapon { color:#fff1fc; border-color:#ff83e8; background:#6a185eb3; box-shadow:0 0 18px #ff2bd655; }
#touch.prop-ready .t-weapon span { font-size:10px; }
@media(min-width:1500px) { .stagegrid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:850px) { .stagegrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
@media(max-height:600px) {
 .title .cover-art { height:clamp(88px,23vh,145px); margin:7px 0; }
 .title .hero-neon { font-size:clamp(46px,7vw,88px); }
 .title .hero-brawl { font-size:clamp(22px,3.2vw,43px); }
 .title .hero-copy { margin-top:8px; font-size:11px; line-height:1.55; }
 .cover-caption { font-size:8px; bottom:8px; }
 .arena-intro { margin-bottom:10px; font-size:11px; }
 .card.stage > b { font-size:11px; }
}
@media(max-width:600px) and (min-height:500px) {
 .stagegrid { grid-template-columns:1fr; }
 .title .cover-art { height:220px; }
 .title .hero-neon { font-size:80px; }
 .title .hero-brawl { font-size:34px; }
}
@media(prefers-reduced-motion:reduce) { .card.stage { transition:none; } }
/* Galería de arenas: cada tarjeta mide lo que mide su contenido y la lista se desplaza. Con overflow:hidden y filas "auto" en una
   rejilla de alto fijo, las filas se repartían ese alto a partes iguales y recortaban nombre y botón (26–112 px según la pantalla). */
.stagegrid { grid-auto-rows:max-content; }
.card.stage .btn { min-height:40px; }
/* Móvil apaisado (poca altura): miniatura a la izquierda e información a la derecha, para ver varias arenas a la vez */
@media(max-height:600px) {
 .stagegrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-bottom:14px; }
 .card.stage { display:grid; grid-template-columns:minmax(0,43%) minmax(0,1fr); grid-template-rows:auto auto auto 1fr; column-gap:12px; padding:0 12px 0 0; align-items:start; }
 .card.stage .sprev { grid-row:1 / span 4; width:100%; height:100%; min-height:96px; aspect-ratio:auto; object-fit:cover; margin:0; border-bottom:0; border-right:1px solid #a16dff33; }
 .card.stage > b,.card.stage > span,.card.stage > small,.card.stage > button { grid-column:2; margin-left:0; margin-right:0; }
 .card.stage > b { margin-top:9px; font-size:11px; line-height:1.3; }
 .stage-motion { padding:3px 0; font-size:10px; }
 .stage-props { margin-bottom:6px; font-size:9px; line-height:1.4; }
 .card.stage .btn { align-self:end; margin:0 0 9px; padding:5px 8px; min-height:34px; font-size:10px; }
}
@media(max-height:430px) { .stage-props { display:none; } }
/* App de Android: ya es inmersiva y apaisada, no hace falta el botón de pantalla completa */
.native-app [data-act="fullscreen"] { display:none; }