/* ==========================================================================
   OyeRobot · SILABOS — estilos
   ========================================================================== */
:root{
  --bg:#0A0A12; --surface:rgba(255,255,255,0.05); --modal:#12121E;
  --txt:#EDEDF5; --txt2:#C4C4D6; --txt3:#9A9AB0;
  --fuxia:#FF2DA6; --morado:#A855F7; --cian:#00C8FF; --amarillo:#FACC15;
  --verde:#39FF14; --rojo:#FF4D6D; --naranja:#FF8A3D; --blanco:#F4F4FF;
  --fh:'Orbitron',sans-serif; --fb:'DM Sans','Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{font-family:var(--fb); margin:0; background:var(--bg); color:var(--txt); line-height:1.5; min-height:100vh;}
button{font-family:var(--fb)}

/* ---------- marca ---------- */
.badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--fh); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--txt2); font-weight:700;}
.badge.sm{font-size:9px; letter-spacing:2px; gap:6px;}
.badge img{filter:drop-shadow(0 0 6px rgba(168,85,247,0.5));}
.oye{color:var(--fuxia); text-shadow:0 0 16px rgba(255,45,166,0.55);}
.robot{color:var(--cian); text-shadow:0 0 16px rgba(0,200,255,0.55);}

/* ---------- menú ---------- */
.menu-overlay{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:18px; overflow:auto;
  background:radial-gradient(ellipse at 30% 20%, rgba(168,85,247,0.16), transparent 60%),
             radial-gradient(ellipse at 70% 85%, rgba(0,200,255,0.10), transparent 60%), var(--bg);}
.menu-card{max-width:470px; width:100%; background:var(--modal); border:1px solid rgba(168,85,247,0.5); border-radius:16px; padding:28px 34px; text-align:center; box-shadow:0 0 44px rgba(168,85,247,0.18); position:relative; overflow:hidden;}
.menu-card::before{content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(168,85,247,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,0.05) 1px,transparent 1px);
  background-size:26px 26px; mask-image:radial-gradient(ellipse at top,#000 30%,transparent 75%);}
.menu-card>*{position:relative}
.robot-hero{width:96px; height:96px; margin:8px auto 6px; display:block; filter:drop-shadow(0 0 18px rgba(0,200,255,0.5)); animation:bob 3s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.menu-card h1{font-family:var(--fh); font-size:2em; margin:0 0 4px; letter-spacing:1px;}
.menu-card .tag{color:var(--txt2); margin:0 0 22px; font-size:.93em;}
.mbtn{display:flex; flex-direction:column; gap:3px; text-align:left; width:100%; background:var(--surface); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:14px 18px; margin-bottom:11px; cursor:pointer; color:var(--txt); font-weight:700; font-size:1em; transition:all .25s;}
.mbtn small{font-weight:400; font-size:.82em; color:var(--txt3);}
.mbtn:hover{border-color:var(--fuxia); background:rgba(255,45,166,0.08); box-shadow:0 0 20px rgba(255,45,166,0.28); transform:translateY(-2px);}
.mbtn.play{background:linear-gradient(120deg,rgba(0,200,255,0.16),rgba(255,45,166,0.16)); border-color:rgba(0,200,255,0.6);}
.menu-foot{border-top:1px solid rgba(255,255,255,0.1); padding-top:12px; margin-top:4px; display:flex; justify-content:center;}

/* ---------- cabecera de juego ---------- */
.ghead{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:7px 14px;
  background:linear-gradient(120deg,rgba(168,85,247,0.18),rgba(255,45,166,0.18)); border-bottom:1px solid rgba(168,85,247,0.3);}
.ghead .hl{display:flex; align-items:center; gap:9px;}
.gtitle{font-family:var(--fh); font-size:.92em; letter-spacing:1px; font-weight:700;}
.hud{display:flex; gap:9px; align-items:center; flex-wrap:wrap;}
.pill{font-family:var(--fh); font-size:.68em; padding:5px 11px; border-radius:14px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.12); white-space:nowrap;}
.pill b{color:var(--amarillo); text-shadow:0 0 10px rgba(250,204,21,0.5);}
.pill.streak b{color:var(--txt3); text-shadow:none;}
.pill.streak.on b{color:var(--verde); text-shadow:0 0 10px rgba(57,255,20,0.55);}
.mini{background:transparent; border:1px solid var(--cian); color:var(--cian); border-radius:9px; padding:5px 11px; font-weight:700; font-size:.74em; cursor:pointer; transition:all .2s;}
.mini:hover{background:rgba(0,200,255,0.1); box-shadow:0 0 12px rgba(0,200,255,0.3);}

/* ---------- misión ---------- */
.mision{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:8px 14px; background:rgba(250,204,21,0.07); border-bottom:1px solid rgba(250,204,21,0.25);}
.mision .mt{font-family:var(--fh); font-size:.68em; letter-spacing:2px; color:var(--amarillo);}
.mision .mx{font-size:.96em; color:var(--txt);}
.mision .mx b{color:var(--fuxia);}
.mision .mx u{color:var(--cian); text-decoration:none; font-weight:700;}

/* ---------- barra de voz ---------- */
.voicebar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 14px; background:var(--surface); border-bottom:1px solid rgba(255,255,255,0.08);}
#btnVoz{background:var(--cian); color:#0A0A12; border:none; border-radius:10px; padding:9px 16px; font-weight:700; font-size:.88em; cursor:pointer; box-shadow:0 0 14px rgba(0,200,255,0.4); white-space:nowrap; transition:all .25s;}
#btnVoz:hover{transform:translateY(-1px); box-shadow:0 0 22px rgba(0,200,255,0.6);}
#btnVoz.escuchando{background:var(--fuxia); box-shadow:0 0 18px rgba(255,45,166,0.6); animation:pulso 1.2s ease-in-out infinite;}
@keyframes pulso{0%,100%{box-shadow:0 0 12px rgba(255,45,166,0.45)}50%{box-shadow:0 0 26px rgba(255,45,166,0.8)}}
#btnVoz:disabled{opacity:.45; cursor:not-allowed;}
.txtform{display:flex; gap:6px;}
.txtform input{background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.15); color:var(--txt); border-radius:9px; padding:8px 11px; font-family:var(--fb); font-size:.85em; width:215px; max-width:48vw;}
.txtform input:focus{outline:2px solid var(--cian); outline-offset:1px; border-color:transparent;}
.txtform button{background:var(--surface); border:1px solid rgba(0,200,255,0.4); color:var(--cian); border-radius:9px; padding:8px 12px; cursor:pointer; font-weight:700;}
.vstatus{flex:1; min-width:230px; font-size:.8em; color:var(--txt2); background:rgba(0,200,255,0.06); border:1px solid rgba(0,200,255,0.25); border-radius:9px; padding:6px 11px; display:flex; gap:14px; flex-wrap:wrap;}
.vstatus b{color:var(--cian)}
.vstatus .vu{color:var(--txt3)}

/* ---------- aviso de navegador ---------- */
.aviso{display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 16px;
  background:rgba(250,204,21,0.09); border-bottom:1px solid rgba(250,204,21,0.35);
  font-size:.83em; color:var(--txt2);}
.aviso b{color:var(--amarillo);}
.aviso button{background:transparent; border:none; color:var(--txt3); font-size:1em; cursor:pointer; padding:2px 8px; border-radius:6px;}
.aviso button:hover{color:var(--txt); background:rgba(255,255,255,0.08);}

/* ---------- escena ---------- */
.scene-wrap{padding:14px; display:flex; gap:16px; justify-content:center; align-items:flex-start; flex-wrap:wrap;}
.escena{position:relative; width:600px; max-width:100%; aspect-ratio:var(--cols, 8) / var(--rows, 6);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168,85,247,0.10), transparent 60%),
    linear-gradient(rgba(168,85,247,0.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,200,255,0.14) 1px,transparent 1px),
    #0D0D18;
  background-size:auto, calc(100% / var(--cols, 8)) calc(100% / var(--rows, 6)), calc(100% / var(--cols, 8)) calc(100% / var(--rows, 6)), auto;
  border:2px solid rgba(168,85,247,0.55); border-radius:12px;
  box-shadow:0 0 30px rgba(168,85,247,0.2), inset 0 0 40px rgba(0,0,0,0.5); overflow:hidden;}
.celda{position:absolute; width:calc(100% / var(--cols, 8)); height:calc(100% / var(--rows, 6));
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; pointer-events:none;}
.celda .emo{font-size:clamp(22px, 5.2vw, 36px);}
.celda .nom{font-family:var(--fh); font-size:8px; letter-spacing:1px; color:var(--txt2); margin-top:2px; text-align:center;}
.robot{filter:drop-shadow(0 0 12px rgba(0,200,255,0.8)); z-index:10; transition:left .22s ease, top .22s ease;}
.robot::after{content:''; position:absolute; inset:8%; border:2px solid var(--cian); border-radius:12px; opacity:.55; animation:anillo 1.6s ease-in-out infinite;}
@keyframes anillo{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:.2}}
.robot .carga{position:absolute; top:-9%; right:6%; font-size:.55em; filter:drop-shadow(0 0 8px rgba(250,204,21,0.7)); animation:bob 1.4s ease-in-out infinite;}
.objeto{filter:drop-shadow(0 0 8px rgba(250,204,21,0.55));}
.persona .nom{color:var(--fuxia);}
.persona.celebra .emo{animation:salto .45s ease infinite alternate;}
@keyframes salto{from{transform:translateY(0) scale(1)}to{transform:translateY(-9px) scale(1.15)}}
.baul{filter:drop-shadow(0 0 8px rgba(255,45,166,0.45));}
.baul .nom{color:var(--txt3); font-size:7px;}
.baul.brilla .emo{animation:brillo .5s ease infinite alternate;}
@keyframes brillo{from{filter:drop-shadow(0 0 6px rgba(250,204,21,0.6)); transform:scale(1)}to{filter:drop-shadow(0 0 22px rgba(250,204,21,1)); transform:scale(1.2)}}
.mueble{opacity:.92; filter:drop-shadow(0 0 6px rgba(168,85,247,0.45));}
.mueble .nom{color:var(--morado);}

/* ---------- chips de comandos ---------- */
.cmdchips{display:flex; flex-wrap:wrap; gap:7px; max-width:300px; align-content:flex-start;}
.cmdchips .t{width:100%; font-family:var(--fh); font-size:.65em; letter-spacing:2px; color:var(--morado); margin-bottom:2px;}
.chip{font-size:.78em; background:var(--surface); border:1px solid rgba(255,255,255,0.12); color:var(--txt2); border-radius:14px; padding:4px 11px;}
.chip.hi{border-color:rgba(255,45,166,0.5); color:var(--txt);}
.chip.hi b{color:var(--fuxia)}
.chip b{color:var(--cian); font-weight:700;}
.pts{margin-left:5px; color:var(--amarillo); font-family:var(--fh); font-size:.82em;}

/* ---------- efectos ---------- */
.scorepop{position:absolute; z-index:50; width:calc(100% / var(--cols,8)); text-align:center; font-family:var(--fh); font-weight:900; font-size:1.05em; pointer-events:none; animation:subir 1.35s ease-out forwards; white-space:nowrap;}
.scorepop.verde{color:var(--verde); text-shadow:0 0 14px rgba(57,255,20,0.8);}
@keyframes subir{0%{opacity:0; transform:translateY(8px) scale(.8)}18%{opacity:1; transform:translateY(-6px) scale(1.12)}100%{opacity:0; transform:translateY(-46px) scale(1)}}
.confeti{position:absolute; top:-12px; width:8px; height:8px; border-radius:2px; z-index:40; pointer-events:none; animation:caer linear forwards;}
@keyframes caer{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(120vh) rotate(560deg); opacity:.4}}
.escena .confeti{animation-name:caerEsc;}
@keyframes caerEsc{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(480px) rotate(560deg); opacity:.3}}
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%, 16px); background:var(--modal); border:1px solid rgba(250,204,21,0.5); color:var(--amarillo); font-family:var(--fh); font-size:.8em; letter-spacing:1px; border-radius:12px; padding:10px 18px; opacity:0; pointer-events:none; transition:all .3s; z-index:200; box-shadow:0 0 22px rgba(250,204,21,0.25);}
.toast.on{opacity:1; transform:translate(-50%, 0);}

/* ---------- modal nivel superado ---------- */
.lvl-overlay{position:fixed; inset:0; z-index:150; background:rgba(0,0,0,0.82); display:flex; align-items:center; justify-content:center; padding:16px;}
.lvl-card{max-width:430px; width:100%; background:var(--modal); border:1px solid rgba(168,85,247,0.5); border-radius:16px; padding:26px 30px; text-align:center; box-shadow:0 0 50px rgba(168,85,247,0.25);}
.lvl-card h2{font-family:var(--fh); color:var(--verde); font-size:1.35em; margin:10px 0 2px; text-shadow:0 0 16px rgba(57,255,20,0.5);}
.stars{font-size:2em; letter-spacing:6px; margin:4px 0; filter:drop-shadow(0 0 10px rgba(250,204,21,0.6));}
.lvlstats{background:var(--surface); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:14px; margin:12px 0; font-size:.9em; color:var(--txt2);}
.lvlstats b{color:var(--cian)}
.next{background:var(--fuxia); color:#0A0A12; border:none; border-radius:12px; padding:13px; width:100%; font-family:var(--fh); font-weight:700; font-size:.88em; cursor:pointer; box-shadow:0 0 18px rgba(255,45,166,0.5); margin-bottom:9px; transition:all .25s;}
.next:hover{transform:translateY(-2px); box-shadow:0 0 26px rgba(255,45,166,0.7);}
.ghostb{background:transparent; color:var(--cian); border:1px solid var(--cian); border-radius:10px; padding:10px; width:100%; font-weight:700; font-size:.82em; cursor:pointer; margin-bottom:8px; transition:all .2s;}
.ghostb:hover{background:rgba(0,200,255,0.1);}

/* ---------- páginas ayuda / progreso ---------- */
.panel-page{min-height:100vh; padding:24px 16px; display:flex; justify-content:center; align-items:flex-start;}
.panel-card{max-width:680px; width:100%; background:var(--modal); border:1px solid rgba(168,85,247,0.35); border-radius:14px; padding:28px 34px;}
.panel-card h2{font-family:var(--fh); font-size:1.35em; margin:10px 0 4px;}
.panel-card h3{color:var(--morado); font-size:1em; margin:20px 0 6px; padding-bottom:5px; border-bottom:1px solid rgba(168,85,247,0.25); font-family:var(--fh);}
.panel-card p{color:var(--txt2); margin:6px 0;}
.panel-card strong{color:var(--txt);}
.panel-card .ghostb{width:auto; padding:11px 26px; margin-top:18px;}
.panel-card.centrado{text-align:center;}
.prog-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0;}
.prog-cell{background:var(--surface); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:18px 10px;}
.prog-cell .num{font-family:var(--fh); font-size:2em; font-weight:900; color:var(--amarillo); text-shadow:0 0 16px rgba(250,204,21,0.5);}
.prog-cell .lbl2{font-size:.8em; color:var(--txt3); margin-top:4px;}
.nota{font-size:.85em; color:var(--txt3); font-style:italic;}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .cmdchips{max-width:100%;}
  .txtform input{width:150px;}
  .vstatus{min-width:100%;}
  .ghead{justify-content:center;}
  .celda .nom{font-size:7px;}
}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}
button:focus-visible, input:focus-visible{outline:2px solid var(--amarillo); outline-offset:2px;}