:root{--bg:#0b0614;--pan:#160c28;--neon:#a3e635;--pink:#f472b6;--vio:#7c3aed;--cy:#22d3ee;--txt:#eee}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Rajdhani,system-ui,sans-serif;font-size:17px;color:var(--txt);min-height:100vh;min-height:100dvh;overflow-x:hidden;
 background:linear-gradient(#7c3aed14 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,#7c3aed14 1px,transparent 1px) 0 0/32px 32px,radial-gradient(circle at top,#2a0f4a,var(--bg) 65%);background-color:var(--bg)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000001f 2px 3px)}
img{max-width:100%}
header{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;background:#0b0614e6;backdrop-filter:blur(6px);border-bottom:2px solid var(--vio);box-shadow:0 0 18px #7c3aed88}
.brand{font-family:"Press Start 2P",monospace;font-size:.85rem;color:var(--neon);text-decoration:none;text-shadow:0 0 8px #a3e63599;white-space:nowrap}.brand i{color:var(--pink);font-style:normal}
nav{display:flex;gap:6px;flex-wrap:wrap}nav a{color:#ddd;text-decoration:none;font-weight:700;padding:8px 10px;border-radius:8px}nav a:hover{background:#ffffff14;color:var(--neon)}
#authbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.who{font-size:.9rem;opacity:.8;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{max-width:1100px;margin:auto;padding:16px}.sub{opacity:.8}
h1,h2{line-height:1.3}.neon{font-family:"Press Start 2P",monospace;font-size:clamp(1rem,4.5vw,1.9rem);color:#fff;text-shadow:0 0 6px var(--pink),0 0 18px var(--vio)}.neon.sm{font-size:clamp(.8rem,3.5vw,1.2rem);margin:0}
.section-title{font-family:"Press Start 2P",monospace;font-size:.85rem;color:var(--cy);margin:28px 0 14px;letter-spacing:1px}
.btn{background:linear-gradient(90deg,var(--vio),#ec4899);color:#fff;border:0;border-radius:10px;padding:11px 16px;min-height:44px;font:700 1rem Rajdhani,sans-serif;letter-spacing:.5px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 12px #ec489966;transition:.15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 20px #ec4899aa}.btn:active{transform:scale(.97)}
.btn.ghost{background:#ffffff10;border:1px solid var(--vio);box-shadow:none}.btn.ghost:hover{border-color:var(--neon);color:var(--neon)}
.hero{text-align:center;padding:28px 14px;margin:6px 0 10px;border:2px solid var(--vio);border-radius:18px;background:linear-gradient(135deg,#7c3aed33,#ec489922 50%,#22d3ee22);box-shadow:0 0 30px #7c3aed55,inset 0 0 40px #0008}
.tag{font-family:"Press Start 2P",monospace;font-size:.65rem;color:var(--neon);animation:blink 1.2s steps(2) infinite;margin:0}
@keyframes blink{50%{opacity:.2}}.hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media(min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}}
.card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--pan);border:1px solid #7c3aed66;color:#fff;text-decoration:none;transition:.2s}
.card:hover{transform:translateY(-4px);border-color:var(--neon);box-shadow:0 0 22px #a3e63566,0 0 40px #7c3aed55}
.card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}.card b{font-size:1.1rem}
.cover{position:relative;aspect-ratio:16/10;width:100%;overflow:hidden;background:#000}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-fb{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#fff3,transparent 50%),linear-gradient(135deg,var(--c),#0b0614)}
.cover-fb span{font-family:"Press Start 2P",monospace;font-size:clamp(1.6rem,7vw,2.6rem);color:#fff;text-shadow:0 0 12px #fff8}
.card:hover .cover img{transform:scale(1.05);transition:.3s}
.badges{display:flex;gap:6px;flex-wrap:wrap}.badge{font-size:.8rem;font-weight:700;padding:4px 8px;border-radius:999px;border:1px solid}
.badge.play{color:var(--neon);border-color:var(--neon);background:#a3e6351a}.badge.rk{color:var(--pink);border-color:var(--pink);background:#f472b61a}
/* Play page */
.playmain{max-width:1200px;padding:10px}
.playbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}.playactions{display:flex;gap:8px;flex-wrap:wrap}
.status{margin:6px 0}.rotate{display:none;font-size:.9rem;color:var(--cy);margin:4px 0}
@media(max-width:700px) and (orientation:portrait){.rotate{display:block}}
.stage{position:relative;z-index:1;width:100%;height:calc(100vh - 170px);height:calc(100dvh - 170px);min-height:320px;background:#000;border:2px solid var(--vio);border-radius:12px;overflow:hidden;box-shadow:0 0 24px #7c3aed88}
.stage iframe{display:block;width:100%;height:100%;border:0;background:#fff;pointer-events:auto;touch-action:manipulation}
.stage:fullscreen{border:0;border-radius:0;height:100%}
@media(max-width:700px){.stage{height:calc(100dvh - 200px);border-radius:8px}.playmain{padding:6px}}
@media(orientation:landscape) and (max-height:500px){header{position:static}.stage{height:calc(100dvh - 20px)}.status,.rotate{display:none}}
/* Ranking */
.picker{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.pick{flex:0 0 130px;scroll-snap-align:start;padding:0;border:2px solid #7c3aed55;border-radius:12px;overflow:hidden;background:var(--pan);color:#fff;font:700 .95rem Rajdhani,sans-serif;cursor:pointer;text-align:left}
.pick span{display:block;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pick.on,.pick:hover{border-color:var(--neon);box-shadow:0 0 14px #a3e63577}
.tablewrap{overflow-x:auto;border:1px solid #7c3aed66;border-radius:12px;background:#160c28cc}
table{width:100%;border-collapse:collapse}td,th{padding:10px;border-bottom:1px solid #ffffff1a;text-align:left}th{color:var(--cy);font-family:"Press Start 2P",monospace;font-size:.6rem}
tr.top td{font-weight:700}.pts{color:var(--neon);font-weight:700}
/* Forms / admin */
select,input,textarea{width:100%;padding:10px;min-height:44px;border-radius:8px;border:1px solid var(--vio);background:#120a20;color:#eee;font:inherit;font-size:16px}textarea{font-family:monospace;font-size:14px}
input[type=color]{padding:4px}label{display:block;margin:10px 0;font-weight:700}.chk input{width:auto;min-height:0}
.panel{background:var(--pan);border:1px solid #7c3aed66;border-radius:14px;padding:14px;margin-top:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.coverprev{display:flex;gap:12px;align-items:center}.coverprev .cover{width:160px;border-radius:10px;flex:none}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.list{list-style:none;padding:0}.list li{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #ffffff22}
.li-t{display:flex;align-items:center;gap:10px;min-width:0}.li-t .cover{width:64px;border-radius:6px;flex:none}.li-t .cover-fb span{font-size:1rem}
footer{text-align:center;opacity:.6;padding:24px 10px;font-size:.9rem}
@media(max-width:480px){.brand{font-size:.7rem}header{justify-content:center}.who{display:none}}

/* Ocultar badge de Netlify */
iframe[src*="netlify"],a[href*="netlify.com"][style*="position"],#netlify-badge,.netlify-badge{display:none!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;opacity:0!important}

/* Fullscreen */
.stage:fullscreen,.stage:-webkit-full-screen,.stage.is-fs{width:100vw;height:100vh;height:100dvh;max-width:none;border:0;border-radius:0;margin:0}
.fsx{display:none;position:absolute;top:8px;right:8px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:#000a;color:#fff;font-size:20px;cursor:pointer}
.stage:fullscreen .fsx,.stage.is-fs .fsx,.pseudo-fs .fsx{display:block}
body.pseudo-fs{overflow:hidden}
body.pseudo-fs .stage{position:fixed;inset:0;z-index:9999;width:100vw;height:100vh;height:100dvh;min-height:0;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}
/* Nombre de usuario editable */
.uchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:.9rem}
.uchip b{white-space:nowrap}
.btn.sm{padding:4px 8px;font-size:.8rem;min-height:0}
.uin{width:9.5em;padding:5px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:inherit;font:inherit;font-size:.85rem}
@media (max-width:480px){.uchip{font-size:.8rem;gap:4px}.uin{width:7.5em}}

.rk-cta{color:var(--neon);text-decoration:underline;font-weight:700}