:root{--bg:#04080c;--bg2:#0a1220;--cyan:#00b7ff;--green:#39ff14;--orange:#ff7b00;--pink:#ff0064;--purple:#cc00ff;--text:#c8d8e8;--dim:#4a5568;--border:rgba(0,183,255,0.15)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Chakra Petch',monospace;min-height:100vh;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);pointer-events:none;z-index:9999}

.logo-header{text-align:center;padding:10px 0 4px}
.logo-header img{width:100%;max-width:700px;height:auto;display:block;margin:0 auto}

/* SELECTOR */
#pantalla-selector{max-width:900px;margin:0 auto;padding:20px 16px}
.selector-titulo{text-align:center;font-size:.7rem;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-bottom:20px}
.grid-puzzles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.card-puzzle{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:18px 16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.card-puzzle::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--card-color,var(--cyan));box-shadow:0 0 10px var(--card-color,var(--cyan))}
.card-puzzle:hover{border-color:var(--card-color,var(--cyan));transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.card-num{font-family:'Orbitron',sans-serif;font-size:1.8rem;font-weight:900;color:var(--card-color,var(--cyan));opacity:.3;position:absolute;top:10px;right:14px;line-height:1}
.card-titulo{font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:8px}
.card-dificultad{font-size:.6rem;letter-spacing:2px;padding:2px 8px;border-radius:3px;border:1px solid var(--card-color,var(--cyan));color:var(--card-color,var(--cyan));display:inline-block;margin-bottom:10px}
.card-estado{font-size:.6rem;color:var(--dim);letter-spacing:1px}
.card-estado.completado{color:var(--green)}
.card-puzzle.completado-card{border-color:rgba(57,255,20,.3)}

/* JUEGO */
#pantalla-juego{display:none;max-width:1100px;margin:0 auto;padding:6px 10px 30px}

/* Header compacto */
.juego-header{
  display:flex;align-items:center;gap:8px;
  background:rgba(5,10,14,.85);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
  margin-bottom:10px;
}
.btn-volver{background:transparent;border:1px solid var(--border);color:var(--dim);padding:4px 10px;border-radius:6px;font-family:'Chakra Petch',monospace;font-size:.6rem;letter-spacing:1px;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.btn-volver:hover{border-color:var(--cyan);color:var(--cyan)}
.juego-titulo-header{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:2px;color:var(--cyan);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.juego-stats{display:flex;gap:10px;font-size:.6rem;letter-spacing:1px;flex-shrink:0}
.stat-item{color:var(--dim)}
.stat-item span{color:var(--orange);font-weight:700}
.stat-item.errores span{color:var(--pink)}
.stat-item.timer span{color:var(--green)}

/* Layout tipo periódico: grilla | H | V */
.juego-layout{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  gap:16px;
  align-items:start;
}
@media(max-width:800px){
  .juego-layout{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .col-grilla{grid-column:1 / -1;order:-1}
  .col-pistas-H{order:1}
  .col-pistas-V{order:2}
}
@media(max-width:500px){
  .juego-layout{grid-template-columns:1fr}
  .col-grilla{grid-column:1;order:-1}
  .col-pistas-H{order:1}
  .col-pistas-V{order:2}
}

/* GRILLA */
.col-grilla{}
.puzzle-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
.puzzle-grid{display:inline-grid;gap:3px;background:#000;border:2px solid rgba(57,255,20,.3);border-radius:8px;padding:6px}

.celda{width:38px;height:38px;position:relative;background:transparent}
@media(max-width:480px){.celda{width:30px;height:30px}}
.celda.negra{background:#010305;border-radius:2px}
.celda input{
  width:100%;height:100%;
  background:rgba(5,15,25,.95);
  border:2px solid rgba(57,255,20,.5);
  border-radius:3px;
  color:var(--green);
  font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:700;
  text-align:center;text-transform:uppercase;
  cursor:pointer;transition:all .15s;outline:none;caret-color:transparent;
  box-shadow:inset 0 0 6px rgba(57,255,20,.08);
}
.celda input:hover{border-color:rgba(57,255,20,.8)}
.celda.activa input{border-color:var(--orange)!important;box-shadow:0 0 12px rgba(255,123,0,.5)!important;color:#fff!important}
.celda.resaltada input{background:rgba(57,255,20,.07)!important;border-color:rgba(57,255,20,.8)!important}
.celda.correcta input{background:rgba(57,255,20,.12)!important;border-color:var(--green)!important;color:var(--green)!important;box-shadow:0 0 8px rgba(57,255,20,.3)!important}
.celda.error-cel input{background:rgba(255,0,100,.1)!important;border-color:var(--pink)!important;color:var(--pink)!important}
.num-celda{position:absolute;top:1px;left:2px;font-size:.38rem;font-family:'Chakra Petch',monospace;color:rgba(57,255,20,.6);pointer-events:none;z-index:2;line-height:1}

/* Controles */
.juego-controles{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.btn-control{padding:6px 12px;border-radius:6px;font-family:'Chakra Petch',monospace;font-size:.58rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s;border:none}
.btn-verificar{background:linear-gradient(135deg,var(--cyan),#0066ff);color:#fff;box-shadow:0 4px 12px rgba(0,183,255,.2)}
.btn-verificar:hover{filter:brightness(1.15);transform:translateY(-1px)}
.btn-pista{background:transparent;border:1px solid var(--orange)!important;color:var(--orange)}
.btn-pista:hover{background:rgba(255,123,0,.1)}
.btn-reset{background:transparent;border:1px solid var(--dim)!important;color:var(--dim)}
.btn-reset:hover{border-color:var(--pink)!important;color:var(--pink)}
.msg-pista{background:rgba(255,123,0,.1);border:1px solid rgba(255,123,0,.3);border-radius:6px;padding:6px 10px;font-size:.6rem;color:var(--orange);margin-top:6px;display:none;letter-spacing:1px}

/* Columnas de definiciones estilo periódico */
.col-pistas-H, .col-pistas-V{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.pistas-titulo{
  font-family:'Orbitron',sans-serif;
  font-size:.6rem;letter-spacing:2px;
  color:var(--cyan);
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  background:rgba(0,183,255,.05);
  text-transform:uppercase;
}
.pistas-lista{padding:6px;max-height:400px;overflow-y:auto}
.pista-item{padding:5px 8px;border-radius:5px;cursor:pointer;transition:all .15s;border:1px solid transparent;margin-bottom:2px}
.pista-item:hover{background:rgba(0,183,255,.06);border-color:rgba(0,183,255,.2)}
.pista-item.activa{background:rgba(255,123,0,.08);border-color:rgba(255,123,0,.3)}
.pista-item.resuelta{opacity:.35}
.pista-num{font-size:.55rem;color:var(--orange);font-weight:700;margin-bottom:1px}
.pista-texto{font-size:.6rem;color:var(--text);line-height:1.35}

/* Modal victoria */
#modal-victoria{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;align-items:center;justify-content:center;padding:20px}
.victoria-inner{background:linear-gradient(180deg,#0b1828,#04080c);border:1px solid rgba(57,255,20,.4);border-radius:16px;padding:36px 28px;max-width:360px;width:100%;text-align:center;box-shadow:0 0 60px rgba(57,255,20,.15)}
.victoria-emoji{font-size:3rem;margin-bottom:12px}
.victoria-titulo{font-family:'Orbitron',sans-serif;font-size:1.4rem;font-weight:900;letter-spacing:4px;color:var(--green);text-shadow:0 0 20px rgba(57,255,20,.5);margin-bottom:8px}
.victoria-stats{font-size:.75rem;color:var(--dim);margin:16px 0;line-height:2}
.victoria-stats span{color:var(--cyan);font-weight:700}
.victoria-btns{display:flex;gap:10px;margin-top:20px}
.btn-victoria{flex:1;padding:12px;border-radius:8px;font-family:'Orbitron',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:1px;cursor:pointer;border:none}
.btn-siguiente{background:var(--green);color:#050a0e}
.btn-menu-v{background:transparent;border:1px solid var(--border)!important;color:var(--dim)}

/* PANTALLA COMPLETA */
.btn-fullscreen{
  background:transparent;border:1px solid var(--border);color:var(--cyan);
  padding:4px 8px;border-radius:6px;font-size:.9rem;cursor:pointer;
  flex-shrink:0;transition:all .2s;
}
.btn-fullscreen:hover{background:rgba(0,183,255,.1)}

#pantalla-juego:fullscreen,
#pantalla-juego:-webkit-full-screen{
  background:var(--bg);
  width:100vw;height:100vh;
  overflow-y:auto;
  padding:6px 10px 20px;
  box-sizing:border-box;
}
#pantalla-juego:fullscreen .juego-layout,
#pantalla-juego:-webkit-full-screen .juego-layout{
  grid-template-columns:auto 1fr 1fr !important;
}
@media(max-width:800px){
  #pantalla-juego:fullscreen .juego-layout,
  #pantalla-juego:-webkit-full-screen .juego-layout{
    grid-template-columns:auto 1fr 1fr !important;
    display:grid !important;
  }
  #pantalla-juego:fullscreen .col-grilla,
  #pantalla-juego:-webkit-full-screen .col-grilla{ order:0 !important; grid-column:1 !important; }
  #pantalla-juego:fullscreen .col-pistas-H,
  #pantalla-juego:-webkit-full-screen .col-pistas-H{ order:0 !important; }
  #pantalla-juego:fullscreen .col-pistas-V,
  #pantalla-juego:-webkit-full-screen .col-pistas-V{ order:0 !important; }
  #pantalla-juego:fullscreen .celda,
  #pantalla-juego:-webkit-full-screen .celda{ width:28px !important; height:28px !important; }
}

/* Fullscreen horizontal forzado */
#pantalla-juego:fullscreen,
#pantalla-juego:-webkit-full-screen {
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  overflow-y:auto;
  padding:8px;
}
#pantalla-juego:fullscreen .juego-header,
#pantalla-juego:-webkit-full-screen .juego-header {
  display:none;
}
#pantalla-juego:fullscreen .juego-layout,
#pantalla-juego:-webkit-full-screen .juego-layout {
  grid-template-columns:auto 1fr 1fr !important;
  display:grid !important;
  width:100%;
}