*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#02050a;
    color:#dffcff;
    font-family:'Orbitron',Arial,sans-serif;
    user-select:none;
}

body{
    position:relative;
    touch-action:none;
}

canvas{
    position:fixed;
    inset:0;
    display:block;
    width:100vw!important;
    height:100vh!important;
    z-index:0;
    touch-action:none;
}


/* =================================================
   BOTÓN MENÚ
================================================= */

.menu-toggle{
    position:fixed;
    top:16px;
    left:18px;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(0,246,255,.45);
    background:linear-gradient(
        135deg,
        rgba(9,24,32,.96),
        rgba(2,8,13,.96)
    );
    color:#00f6ff;
    font:700 22px/1 'Orbitron',sans-serif;
    cursor:pointer;
    z-index:150;
    box-shadow:
        0 0 22px rgba(0,246,255,.17),
        inset 0 0 14px rgba(0,246,255,.04);
    backdrop-filter:blur(12px);
}

.menu-toggle:hover{
    border-color:#00f6ff;
    box-shadow:
        0 0 26px rgba(0,246,255,.30);
}


/* =================================================
   PANEL
================================================= */

.control-panel{
    position:fixed;
    top:74px;
    left:18px;
    width:340px;
    max-height:calc(100dvh - 92px);
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px;
    z-index:140;
    background:linear-gradient(
        145deg,
        rgba(8,20,28,.95),
        rgba(2,8,13,.93)
    );
    border:1px solid rgba(0,246,255,.25);
    box-shadow:
        0 0 38px rgba(0,0,0,.60),
        inset 0 0 28px rgba(0,246,255,.025);
    backdrop-filter:blur(18px);
    clip-path:polygon(
        0 12px,
        12px 0,
        100% 0,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0 100%
    );
    transition:
        transform .32s ease,
        opacity .28s ease;
}

.control-panel.panel-hidden{
    transform:translateX(calc(-100% - 50px));
    opacity:0;
    pointer-events:none;
}

.control-panel::-webkit-scrollbar{
    width:4px;
}

.control-panel::-webkit-scrollbar-thumb{
    background:rgba(0,246,255,.30);
}


/* =================================================
   CABECERA
================================================= */

.menu-brand{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:14px;
    margin-bottom:16px;
    border-bottom:1px solid rgba(0,246,255,.12);
}

.brand-main{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.brand-dot{
    width:9px;
    height:9px;
    flex:0 0 auto;
    border-radius:50%;
    background:#00f6ff;
    box-shadow:
        0 0 8px #00f6ff,
        0 0 20px #00f6ff;
    animation:pulse 1.5s infinite;
}

.brand-text{
    min-width:0;
}

.brand-text strong{
    display:block;
    color:#fff;
    font-size:19px;
    letter-spacing:2px;
    white-space:nowrap;
}

.brand-text small{
    display:block;
    margin-top:4px;
    color:#52777c;
    font-size:6px;
    letter-spacing:1.7px;
    white-space:nowrap;
}

.home-link{
    flex:0 0 auto;
    color:#00f6ff;
    text-decoration:none;
    font-size:8px;
    letter-spacing:1px;
    white-space:nowrap;
}

.home-link:hover{
    text-shadow:0 0 10px #00f6ff;
}


/* =================================================
   ESTADO
================================================= */

.panel-status{
    display:flex;
    align-items:center;
    gap:5px;
    margin-bottom:16px;
    color:#40ff9c;
    font-size:6px;
    letter-spacing:1px;
}

.status-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#40ff9c;
    box-shadow:0 0 10px #40ff9c;
    animation:pulse 1.5s infinite;
}


/* =================================================
   TÍTULOS
================================================= */

.section-title{
    margin:14px 0 7px;
    color:#5f858a;
    font-size:7px;
    letter-spacing:2px;
}


/* =================================================
   MISIÓN
================================================= */

.mission-box{
    padding:11px;
    border:1px solid rgba(0,246,255,.10);
    background:rgba(255,255,255,.015);
    color:#779ca1;
    font-size:8px;
    line-height:1.7;
}

.mission-box strong{
    color:#00f6ff;
}


/* =================================================
   BOTONES
================================================= */

.menu-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}

.menu-button{
    min-height:60px;
    padding:9px 8px;
    border:1px solid rgba(0,246,255,.16);
    background:linear-gradient(
        135deg,
        rgba(13,31,39,.82),
        rgba(4,12,17,.94)
    );
    color:#dffcff;
    font:600 8px/1.25 'Orbitron',sans-serif;
    letter-spacing:.7px;
    cursor:pointer;
    text-align:left;
    transition:.18s ease;
}

.menu-button span{
    display:block;
    margin-bottom:4px;
    color:#00f6ff;
    font-size:16px;
}

.menu-button small{
    display:block;
    margin-top:4px;
    color:#52777c;
    font-size:6px;
    letter-spacing:.7px;
}

.menu-button:hover{
    border-color:#00f6ff;
    background:linear-gradient(
        135deg,
        rgba(0,246,255,.13),
        rgba(4,12,17,.96)
    );
    box-shadow:
        0 0 18px rgba(0,246,255,.12);
}

.menu-button.active{
    border-color:rgba(64,255,156,.42);
}

.menu-button.active span{
    color:#40ff9c;
}

.menu-button.active small{
    color:#40ff9c;
}

.menu-button.danger span{
    color:#ff526d;
}


/* =================================================
   CONTROLES
================================================= */

.controls-list{
    display:grid;
    gap:6px;
    color:#668b90;
    font-size:7px;
    letter-spacing:.8px;
    line-height:1.5;
}

.controls-list b{
    color:#dffcff;
    font-weight:600;
}


/* =================================================
   HUD
================================================= */

.hud{
    position:fixed;
    top:16px;
    right:18px;
    display:flex;
    gap:8px;
    z-index:100;
    pointer-events:none;
}

.hud-box{
    min-width:92px;
    padding:9px 11px;
    border:1px solid rgba(0,246,255,.24);
    background:rgba(2,8,13,.74);
    backdrop-filter:blur(10px);
}

.hud-box small{
    display:block;
    color:#52777c;
    font-size:6px;
    letter-spacing:1.4px;
}

.hud-box strong{
    display:block;
    margin-top:4px;
    color:#00f6ff;
    font-size:14px;
    letter-spacing:1px;
}

.hud-box.score strong{
    color:#40ff9c;
}


/* =================================================
   MENSAJE CENTRAL
================================================= */

.journey-message{
    position:fixed;
    left:50%;
    top:50%;
    width:min(660px,calc(100vw - 40px));
    transform:translate(-50%,-50%);
    padding:30px 24px;
    z-index:90;
    text-align:center;
    background:radial-gradient(
        circle at center,
        rgba(0,246,255,.10),
        rgba(2,8,13,.72) 62%,
        rgba(2,8,13,.18)
    );
    pointer-events:none;
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.journey-message.hidden{
    opacity:0;
    visibility:hidden;
    transform:
        translate(-50%,-47%)
        scale(.98);
}

.journey-message .kicker{
    color:#00f6ff;
    font-size:8px;
    letter-spacing:4px;
}

.journey-message h1{
    margin:10px 0 8px;
    color:#fff;
    font-size:clamp(28px,5vw,56px);
    letter-spacing:5px;
    text-shadow:
        0 0 24px rgba(0,246,255,.45);
}

.journey-message p{
    margin:0;
    color:#8bb5ba;
    font-size:9px;
    line-height:1.8;
    letter-spacing:1px;
}


/* =================================================
   LOGROS
================================================= */

.achievement-banner{
    position:fixed;
    left:50%;
    top:16%;
    min-width:300px;
    max-width:calc(100vw - 30px);
    transform:translateX(-50%);
    padding:14px 22px;
    z-index:180;
    text-align:center;
    background:linear-gradient(
        135deg,
        rgba(6,25,29,.95),
        rgba(2,9,14,.96)
    );
    border:1px solid rgba(64,255,156,.55);
    box-shadow:
        0 0 35px rgba(64,255,156,.16),
        inset 0 0 20px rgba(64,255,156,.04);
    pointer-events:none;
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.achievement-banner.hidden{
    opacity:0;
    visibility:hidden;
    transform:
        translateX(-50%)
        translateY(-15px)
        scale(.96);
}

.achievement-banner small{
    display:block;
    color:#638e81;
    font-size:6px;
    letter-spacing:3px;
}

.achievement-banner strong{
    display:block;
    margin-top:6px;
    color:#40ff9c;
    font-size:16px;
    letter-spacing:2px;
    text-shadow:
        0 0 14px rgba(64,255,156,.55);
}

.achievement-banner span{
    display:block;
    margin-top:6px;
    color:#a8cfc4;
    font-size:8px;
    letter-spacing:1px;
}


/* =================================================
   PREGUNTA
================================================= */

.question-modal{
    position:fixed;
    inset:0;
    z-index:300;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(8px);
}

.question-modal.hidden{
    display:none;
}

.question-box{
    position:relative;
    width:min(720px,100%);
    padding:22px;
    overflow:hidden;
    background:linear-gradient(
        145deg,
        rgba(8,20,28,.97),
        rgba(2,8,13,.97)
    );
    border:1px solid rgba(0,246,255,.32);
    box-shadow:
        0 0 45px rgba(0,0,0,.75),
        0 0 25px rgba(0,246,255,.12),
        inset 0 0 30px rgba(0,246,255,.025);
    clip-path:polygon(
        0 16px,
        16px 0,
        100% 0,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        0 100%
    );
}

.question-scanline{
    position:absolute;
    left:0;
    right:0;
    height:1px;
    top:-10%;
    background:rgba(0,246,255,.65);
    box-shadow:0 0 14px #00f6ff;
    animation:scan 3s linear infinite;
    pointer-events:none;
}

.question-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding-bottom:15px;
    border-bottom:1px solid rgba(0,246,255,.14);
}

.question-header small{
    color:#52777c;
    font-size:7px;
    letter-spacing:2px;
}

.question-header h3{
    margin:6px 0 0;
    color:#fff;
    font-size:18px;
    letter-spacing:2px;
}

.question-counter{
    display:flex;
    align-items:baseline;
    gap:4px;
}

.question-counter span{
    color:#00f6ff;
    font-size:30px;
}

.question-counter small{
    color:#52777c;
    font-size:8px;
}

.question-body{
    padding-top:20px;
}

.signal-label{
    margin-bottom:9px;
    color:#40ff9c;
    font-size:7px;
    letter-spacing:2px;
}

#question-text{
    margin:0 0 22px;
    color:#e7fdff;
    font-size:clamp(14px,2.6vw,22px);
    line-height:1.55;
    letter-spacing:.7px;
}

.answer-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.answer-btn{
    min-height:62px;
    border:1px solid rgba(0,246,255,.18);
    background:rgba(255,255,255,.025);
    color:#dffcff;
    font:700 11px/1 'Orbitron',sans-serif;
    letter-spacing:1.5px;
    cursor:pointer;
    transition:.18s ease;
}

.true-btn:hover{
    border-color:#40ff9c;
    color:#40ff9c;
    box-shadow:
        0 0 18px rgba(64,255,156,.12);
}

.false-btn:hover{
    border-color:#ff526d;
    color:#ff526d;
    box-shadow:
        0 0 18px rgba(255,82,109,.12);
}

.answer-btn:disabled{
    opacity:.45;
    cursor:default;
}

.answer-feedback{
    min-height:26px;
    padding-top:14px;
    text-align:center;
    font-size:9px;
    letter-spacing:1.2px;
}

.answer-feedback.correct{
    color:#40ff9c;
}

.answer-feedback.wrong{
    color:#ff526d;
}


/* =================================================
   INSTRUCCIONES
================================================= */

.instructions-modal{
    position:fixed;
    inset:0;
    z-index:320;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}

.instructions-modal.hidden{
    display:none;
}

.instructions-box{
    width:min(680px,100%);
    max-height:85vh;
    overflow-y:auto;
    padding:22px;
    background:linear-gradient(
        145deg,
        rgba(8,20,28,.96),
        rgba(2,8,13,.96)
    );
    border:1px solid rgba(0,246,255,.28);
    box-shadow:
        0 0 40px rgba(0,0,0,.65),
        0 0 24px rgba(0,246,255,.08);
    clip-path:polygon(
        0 14px,
        14px 0,
        100% 0,
        100% calc(100% - 14px),
        calc(100% - 14px) 100%,
        0 100%
    );
}

.instructions-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:18px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(0,246,255,.14);
}

.instructions-header h3{
    margin:0;
    color:#fff;
    font-size:18px;
    letter-spacing:2px;
}

.close-instructions{
    width:38px;
    height:38px;
    border:1px solid rgba(0,246,255,.26);
    background:rgba(0,246,255,.06);
    color:#00f6ff;
    font:700 16px/1 'Orbitron',sans-serif;
    cursor:pointer;
}

.instructions-content{
    color:#b7d7db;
    font-size:12px;
    line-height:1.8;
}

.instructions-section{
    margin-bottom:18px;
    padding:14px;
    border:1px solid rgba(0,246,255,.10);
    background:rgba(255,255,255,.02);
}

.instructions-section h4{
    margin:0 0 10px;
    color:#00f6ff;
    font-size:11px;
    letter-spacing:2px;
}

.instructions-section p,
.instructions-section ul{
    margin:0;
}

.instructions-section ul{
    padding-left:18px;
}


/* =================================================
   TOUCH
================================================= */

.touch-controls{
    display:none;
    position:fixed;
    inset:auto 0 18px 0;
    z-index:110;
    pointer-events:none;
}

.dpad{
    position:absolute;
    left:18px;
    bottom:0;
    width:132px;
    height:132px;
}

.touch-btn{
    position:absolute;
    width:44px;
    height:44px;
    border:1px solid rgba(0,246,255,.38);
    background:rgba(2,8,13,.72);
    color:#00f6ff;
    font:700 18px/1 'Orbitron',sans-serif;
    pointer-events:auto;
    touch-action:none;
}

.touch-up{
    left:44px;
    top:0;
}

.touch-left{
    left:0;
    top:44px;
}

.touch-right{
    right:0;
    top:44px;
}

.touch-down{
    left:44px;
    bottom:0;
}


/* =================================================
   ANIMACIONES
================================================= */

@keyframes pulse{

    0%,
    100%{
        opacity:1;
    }

    50%{
        opacity:.38;
    }
}

@keyframes scan{

    from{
        top:-5%;
    }

    to{
        top:105%;
    }
}


/* =================================================
   CELULAR
================================================= */

@media(max-width:700px){

    .menu-toggle{
        top:8px;
        left:8px;
        width:42px;
        height:42px;
    }

    .control-panel{
        top:58px;
        left:8px;
        width:min(
            340px,
            calc(100vw - 16px)
        );
        max-height:
            calc(100dvh - 66px);
        padding:16px;
    }

    .brand-text strong{
        font-size:16px;
    }

    .brand-text small{
        font-size:5px;
        letter-spacing:1px;
    }

    .home-link{
        font-size:6px;
    }

    .hud{
        top:8px;
        right:8px;
        gap:3px;
    }

    .hud-box{
        min-width:64px;
        padding:6px;
    }

    .hud-box small{
        font-size:5px;
    }

    .hud-box strong{
        font-size:9px;
    }

    .touch-controls{
        display:block;
    }

    .journey-message{
        top:42%;
    }

    .answer-buttons{
        grid-template-columns:1fr;
    }

    .question-header h3{
        font-size:14px;
    }

    .achievement-banner{
        top:11%;
        min-width:260px;
        padding:11px 14px;
    }

    .achievement-banner strong{
        font-size:12px;
    }

    .achievement-banner span{
        font-size:7px;
    }
}


/* =================================================
   TOUCH
================================================= */

@media(hover:none),(pointer:coarse){

    .touch-controls{
        display:block;
    }
}