@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Press+Start+2P&display=swap');
:root{
    --bg:#0f1724;
  --card:#0b1220;
  --accent:#00d1ff;
  --muted:#98a0b3;
  --glass: rgba(255,255,255,0.04);
  --success:#6abf3b;
  --danger:#d9534f;
}
*{box-sizing:border-box;font-family:Inter,Helvetica,Arial,sans-serif;color:#e6eef6}
body{margin:0;padding:0;background:linear-gradient(180deg,#061023 0%, #071428 60%);min-height:100vh;overflow-x:hidden}

/* Sistema de páginas */
/* Permitir scroll vertical; cada página controla su altura */
#pages{position:relative;width:100%;min-height:100vh;overflow:visible}

/* Sistema de páginas y transiciones */
.page{
    position:relative;
    display:none;
    width:100%;
    opacity:0;
    transform:translateX(20px);
    transition:transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
}

.slide-in{animation:slideIn .35s ease forwards}
.slide-out{animation:slideOut .35s ease forwards}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideOut{from{transform:none;opacity:1}to{transform:translateX(-20px);opacity:0}}
.page.active{
    display:block;
    opacity:1;
    transform:translateX(0);
}

/* Nota: la visibilidad inicial se controla mediante la clase .active en .page */

/* Página de bienvenida */
.welcome-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
.welcome-screen{max-width:400px;width:100%;margin:auto;text-align:center;background:rgba(255,255,255,0.02);backdrop-filter:blur(10px)}
.welcome-screen h1{font-family:'Press Start 2P',monospace;font-size:1.4rem;margin:0 0 1.8rem;color:var(--accent);text-shadow:0 0 10px rgba(0,209,255,0.3);line-height:1.4}

/* Página del juego */
#game-page{background:linear-gradient(180deg,#061023 0%, #071428 60%)}
#game-page header{position:relative;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:1rem;text-align:center;border-bottom:1px solid rgba(255,255,255,0.03)}
#game-page header h2{font-family:'Press Start 2P',monospace;font-size:1.2rem;margin:0;color:var(--accent)}
#game-page #playerInfo{color:var(--muted);margin-top:0.5rem}

.game-layout{max-width:900px;margin:1rem auto;padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
@media(max-width:900px){.game-layout{padding:1rem}}

section{background:linear-gradient(180deg,var(--card), #071226);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 24px rgba(2,6,23,0.6)}
.card{background:transparent;padding:1rem;border-radius:12px}
.msg{margin-top:.5rem;color:var(--danger)}
/* Overlay de mensaje del juego */
#game-section{position:relative}
#gameMsg{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.96);
    z-index:1000;
    background:rgba(9,18,35,0.9);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:1rem 1.25rem;
    box-shadow:0 12px 30px rgba(2,6,23,0.6), inset 0 0 40px rgba(0,0,0,0.4);
    color:#e6eef6;
    font-weight:700;
    letter-spacing:.3px;
    text-align:center;
    max-width:90%;
    display:none;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease, transform .28s ease;
}
#gameMsg.show{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)}
#gameMsg.success{border-color:rgba(106,191,59,.6)}
#gameMsg.danger{border-color:rgba(217,83,79,.6)}

/* Welcome screen */
.welcome-screen{text-align:center;max-width:400px;margin:4rem auto}
.welcome-screen h2{font-family:'Press Start 2P',monospace;font-size:1.2rem;margin:0 0 1rem;color:var(--accent)}
.welcome-screen p{color:var(--muted);margin-bottom:2rem}
.welcome-screen form{max-width:300px;margin:0 auto}
.age-notice{font-size:0.8rem;color:var(--muted);margin-top:1rem}

/* Botón de ayuda */
.welcome-actions{margin-top:1rem}
.help-button{background:linear-gradient(180deg,#0ea5a4,#028787);color:#fff;border:0;padding:.6rem 1rem;border-radius:10px;cursor:pointer;font-weight:700;box-shadow:0 4px 12px rgba(2,8,23,0.25);display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;min-width:150px;height:40px}
.help-button:hover{filter:brightness(1.05)}
.help-button:focus{outline:3px solid rgba(14,165,164,0.25)}

/* Controles y formularios */
.form-group{margin-bottom:1.5rem;text-align:left}
form label{display:block;margin-bottom:0.5rem;color:var(--muted);font-size:0.9rem}
input[type=text],
input[type=date]{
    width:100%;
    padding:.8rem;
    border-radius:12px;
    border:2px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.03);
    color:inherit;
    font-size:1.1rem;
    text-align:center;
    transition:all .2s;
    cursor:pointer
}
input[type=text]:focus,
input[type=date]:focus{
    border-color:var(--accent);
    outline:none;
    box-shadow:0 0 0 3px rgba(0,209,255,0.1)
}
/* Estilos específicos para input date */
input[type=date]{
    appearance:none;
    -webkit-appearance:none;
    position:relative;
    background:rgba(255,255,255,0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat 95% center;
}
input[type=date]::-webkit-calendar-picker-indicator {
    opacity:0;
    cursor:pointer;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0
}
button{cursor:pointer;padding:.8rem 2rem;border-radius:12px;border:none;background:linear-gradient(90deg,var(--accent),#3bd0ff);color:#022;box-shadow:0 6px 18px rgba(0,209,255,0.08);font-weight:700;font-size:1rem;transition:all .2s}
button:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,209,255,0.12)}
button:focus{outline:3px solid rgba(0,209,255,0.12);outline-offset:2px}
button.secondary{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);box-shadow:none}

/* Ajustes de maquetación */
/* Colocar el HUD encima del lienzo y centrar */
#tetrisContainer{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center}
/* Dejar que JS fije tamaño exacto del canvas (HiDPI); aquí solo estilo visual */
#tetris{background:#070812;border-radius:12px;border:6px solid rgba(255,255,255,0.03);box-shadow:inset 0 0 30px rgba(0,0,0,0.6), 0 10px 30px rgba(2,6,23,0.6);display:block;max-width:360px;width:100%}
/* El HUD va encima del canvas y coincide su ancho */
#hud{width:100%;max-width:360px;padding:1rem;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.hud-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.hud-row small{color:var(--muted)}
.hud-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.6rem}
.hud-stat{background:var(--glass);padding:.6rem;border-radius:8px;text-align:center}
.hud-stat strong{display:block;font-size:1.2rem;color:#e6f9ff}
.hint{font-size:.9rem;color:var(--muted)}

/* Ayudas de accesibilidad */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Tabla de puntuaciones */
#leaderboard-section{width:100%;max-width:760px;margin:0 auto}
#leaderboard{max-height:260px;overflow-y:auto;padding-right:8px}
#leaderboard table{width:100%;border-collapse:collapse;background:transparent}
#leaderboard th,#leaderboard td{padding:.6rem;text-align:left;border-bottom:1px dashed rgba(255,255,255,0.03);color:var(--muted)}
#leaderboard tr:nth-child(odd) td{background:rgba(255,255,255,0.01)}

/* Modal de ayuda */
.help-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:1200;padding:24px}
.help-modal[aria-hidden="false"]{display:flex}
.help-dialog{background:linear-gradient(180deg,#0f172a,#071029);color:#e6eef9;border-radius:12px;max-width:760px;width:100%;max-height:80vh;overflow:auto;box-shadow:0 12px 40px rgba(2,8,23,0.6);padding:18px}
.help-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.help-header h2{margin:0;font-size:1.2rem}
.help-close{background:transparent;border:0;font-size:1.6rem;color:#cfeffd;cursor:pointer;line-height:1}
.help-content{font-size:.95rem;line-height:1.5;color:#d5e9f0;padding-right:6px}
.help-content h3{margin-top:12px;margin-bottom:6px;font-size:1rem;color:#fff}
.help-footer{display:flex;justify-content:flex-end;margin-top:12px}
.help-close-cta{background:#064e54;color:#fff;border:0;padding:.6rem 1rem;border-radius:10px;cursor:pointer}
.help-close-cta:focus{outline:3px solid rgba(2,8,23,0.25)}

/* Botones del HUD */
.controls{display:flex;gap:.5rem;margin-top:.5rem;justify-content:center}
.controls button{padding:.5rem .8rem;border-radius:8px}

/* Tamaño de celdas (solo visual); BLOCK se controla en JS */
 .tile{width:28px;height:28px}

/* Animaciones pequeñas */
@keyframes pop { from { transform:scale(.95); opacity:0 } to { transform:scale(1); opacity:1 } }
.level-up{animation:pop .25s ease-out}

/* Adaptativo */
@media(max-width:900px){#tetris{width:200px;height:330px}#hud{min-width:unset;}}
@media(max-width:480px){.help-button{min-width:120px;height:38px;font-size:.95rem}}