/* SUN · estilos compartidos de la plataforma (consola, editor, salas) */
:root{--bg:#0b0618;--bg2:#140b2c;--bg3:#1e1240;--linea:#2e1c5c;--linea2:#4a3388;--txt:#f4f0ff;--txt2:#c9beea;--txt3:#a99ccf;
  --sol:#ffd23f;--naranja:#ff8a3d;--cian:#8be9f7;--verde:#3ddc84;--rosa:#ff355e;--lila:#ce93d8;
  --px:'Press Start 2P',monospace;--body:'Chakra Petch',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--bg);color:var(--txt);font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:hidden}
body.estrellas::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 80% 12%,#fff6,transparent),radial-gradient(1.5px 1.5px at 65% 70%,#fff5,transparent),radial-gradient(1px 1px at 30% 85%,#fff6,transparent),radial-gradient(1.5px 1.5px at 90% 55%,#fff7,transparent),radial-gradient(1px 1px at 45% 35%,#fff5,transparent)}
a{color:var(--sol)}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid var(--cian);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

/* barra */
.top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 24px;max-width:1240px;margin:0 auto;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--px);font-size:14px;letter-spacing:2px;color:var(--txt);text-decoration:none}
.logo small{font-size:9px;color:var(--sol);letter-spacing:2px}
.top nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.yo{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:3px 14px 3px 3px;border-radius:14px;border:2px solid var(--sol);background:var(--bg3);color:var(--txt);text-decoration:none;font-weight:700}
.yo .av{flex:none;border-radius:10px;overflow:hidden;line-height:0}
.yo .av svg{width:38px;height:38px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;border:0;text-decoration:none;transition:transform .1s;white-space:nowrap}
.btn:active{transform:translateY(2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-sol{background:var(--sol);color:#1c0f3a;box-shadow:0 5px 0 #b8860b}
.btn-borde{background:transparent;color:var(--txt);border:2px solid var(--linea2)}
.btn-borde:hover{border-color:var(--cian)}
.btn-peligro{background:var(--rosa);color:#fff;box-shadow:0 5px 0 #8a1030}
.btn-chico{min-height:40px;padding:0 12px;font-size:14px;border-radius:11px}
.ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--linea2);background:var(--bg3);color:var(--txt);cursor:pointer;font-size:17px;padding:0}
.ico:hover{border-color:var(--cian)}
.ico:disabled{opacity:.35;cursor:not-allowed}

main{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:6px 24px 70px}
.kicker{font-family:var(--px);font-size:11px;letter-spacing:3px;color:var(--cian);margin:0 0 12px}
h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin:0 0 10px}
.sub{color:var(--txt2);margin:0 0 24px;font-size:18px;max-width:640px}
.caja{padding:22px;border-radius:22px;background:var(--bg2);border:1px solid var(--linea)}
.aviso{font-size:14px;color:var(--txt3);margin:0}
.error{color:#ff8fa8;font-size:15px;margin:0;min-height:20px}

/* formularios */
label.etq{display:block;font-size:14px;font-weight:700;color:var(--txt2);margin:0 0 6px}
.campo{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:2px solid var(--linea2);background:#0b0618;color:var(--txt);font-size:17px}
textarea.campo{min-height:88px;resize:vertical;line-height:1.4}
.campo:focus{border-color:var(--sol);outline:none}
.ayuda{font-size:13px;color:var(--txt3);margin:6px 0 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chipb{min-height:42px;padding:0 14px;border-radius:12px;border:2px solid var(--linea2);background:transparent;color:var(--txt2);font-size:15px;font-weight:700;cursor:pointer}
.chipb[aria-pressed="true"]{background:var(--sol);color:#1c0f3a;border-color:var(--sol)}

/* capas (diálogos) */
.capa{position:fixed;inset:0;z-index:80;background:#05030ccc;display:grid;place-items:center;padding:18px}
.hoja{width:min(680px,100%);max-height:92vh;overflow:auto;padding:24px;border-radius:24px;background:var(--bg2);border:2px solid var(--sol);display:flex;flex-direction:column;gap:16px}
.hoja h2{margin:0;font-size:26px}
.hoja h3{margin:0 0 8px;font-size:15px;color:var(--txt3)}
.fila{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;z-index:90;padding:12px 20px;border-radius:14px;background:var(--verde);color:#0b2a1a;font-weight:700;transition:all .3s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast.mal{background:#ff8fa8;color:#3a0a14}
.cargando{min-height:50vh;display:grid;place-items:center;color:var(--txt3)}
.pixel-sol{width:56px;height:56px;border-radius:50%;background:linear-gradient(#fff7c2,#ffd23f 40%,#ff8a3d 70%,#ff355e);-webkit-mask:linear-gradient(#000 55%,transparent 55% 61%,#000 61% 70%,transparent 70% 75%,#000 75%);mask:linear-gradient(#000 55%,transparent 55% 61%,#000 61% 70%,transparent 70% 75%,#000 75%);animation:latido 1.6s ease-in-out infinite}
@keyframes latido{50%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}