:root{
    --remote-bg-image:none;
    --remote-bg-color:#050505;
    --remote-display-bg:#050b38;
    --remote-display-text:#ffffff;
    --remote-display-border:#00d8ff;
    --remote-display-glow:#00d8ff;
    --remote-a-bg:#009b0b;
    --remote-a-text:#ffffff;
    --remote-a-border:#00ff18;
    --remote-a-bg-pressed:#005a08;
    --remote-b-bg:#b00000;
    --remote-b-text:#ffffff;
    --remote-b-border:#ff0000;
    --remote-b-bg-pressed:#630000;
    --remote-c-bg:#7c8500;
    --remote-c-text:#ffffff;
    --remote-c-border:#eaff00;
    --remote-c-bg-pressed:#444900;
    --remote-d-bg:#078b96;
    --remote-d-text:#ffffff;
    --remote-d-border:#00d8ff;
    --remote-d-bg-pressed:#044f56;
    --remote-number-bg:#02052b;
    --remote-number-bg-pressed:#000018;
    --remote-number-text:#ffffff;
    --remote-number-border:#00d8ff;
    --remote-number-border-pressed:#ff0099;
    --remote-x-bg:#8d0035;
    --remote-x-bg-pressed:#470018;
    --remote-x-text:#ffe600;
    --remote-x-border:#ff0099;
    --remote-ok-bg:#009db5;
    --remote-ok-bg-pressed:#005064;
    --remote-ok-text:#ffe600;
    --remote-ok-border:#00d8ff;
    --remote-action-bg:#7b22c8;
    --remote-action-bg-pressed:#2f0758;
    --remote-action-text:#ffffff;
    --remote-text-input-bg:#111111;
    --remote-text-input-text:#ffffff;
    --remote-text-input-border:#ff2bd6;
    --remote-text-input-placeholder:#bbbbbb;
}
*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}
html{
    touch-action: manipulation;
}

body{
    touch-action: manipulation;
}

.remote,
.remote *{
    touch-action: manipulation;
}

.btn{
    touch-action: manipulation;
    -webkit-user-select:none;
    user-select:none;
}
html,
body{
    margin:0;
    width:100%;
    height:100%;
    background:var(--remote-bg-color);
    font-family:Arial, Helvetica, sans-serif;
    color:white;
    text-align:center;
    overflow:hidden;
}

.remote-body{
    width:100%;
    height:100dvh;
    overflow:hidden;
    background-color:var(--remote-bg-color);
    background-image:var(--remote-bg-image);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.remote-page{
    width:100%;
    height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:4px;
    overflow:hidden;
}

.player-header{
    width:94vw;
    max-width:430px;
    height:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    opacity:.8;
    flex:0 0 auto;
}

#gameStatus{
    width:94vw;
    max-width:430px;
    height:28px;
    line-height:28px;
    padding:0 8px;
    font-size:16px;
    font-weight:bold;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:0 0 auto;
}

#display{
    width:90vw;
    max-width:400px;
    height:38px;
    line-height:38px;
    margin:2px auto;
    background:var(--remote-display-bg);
    color:var(--remote-display-text);
    border:3px solid var(--remote-display-border);
    box-shadow:0 0 16px var(--remote-display-glow), inset 0 0 18px rgba(0,0,0,.45);
    border-radius:10px;
    font-size:23px;
    font-weight:bold;
    letter-spacing:3px;
    flex:0 0 auto;
}

.idle-points{
    width:90vw;
    max-width:400px;
    min-height:20px;
    line-height:20px;
    margin:0 auto 1px;
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,.86);
    text-shadow:0 0 8px rgba(0,216,255,.45);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:0 0 auto;
}

#responseMessage{
    width:90vw;
    max-width:400px;
    height:24px;
    line-height:24px;
    font-size:15px;
    font-weight:bold;
    color:#00ff66;
    overflow:hidden;
    flex:0 0 auto;
}

.remote{
    width:min(92vw,430px);
    flex:1;
    min-height:0;
    margin:3px auto 0;
    padding:10px;
    border-radius:26px;
    background:rgba(0,0,25,.18);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.15),
        inset 0 -6px 12px rgba(0,0,0,.7),
        0 8px 22px rgba(0,0,0,.8);
    display:flex;
    flex-direction:column;
    gap:10px;
}

.abcd{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    flex:0 0 auto;
}

.numbers{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(4,1fr);
    gap:7px;
    flex:1;
    min-height:0;
}

.btn{
    border:none;
    cursor:pointer;
    font-weight:bold;
    user-select:none;
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.22),
        inset 0 -5px 8px rgba(0,0,0,.55),
        0 4px 6px rgba(0,0,0,.45);
}

.btn:active{
    transform:translateY(3px);
    box-shadow:
        inset 0 4px 9px rgba(0,0,0,.8);
}

.color-btn{
    height:min(11dvh,88px);
    min-height:48px;
    border-radius:999px;
    font-size:clamp(28px, 8vw, 52px);
    color:white;
    border:4px solid currentColor;
}

.green{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-a-bg) 88%, white 12%), var(--remote-a-bg));
    color:var(--remote-a-text);
    border-color:var(--remote-a-border);
}
.green:active{background:var(--remote-a-bg-pressed);}

.red{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-b-bg) 88%, white 12%), var(--remote-b-bg));
    color:var(--remote-b-text);
    border-color:var(--remote-b-border);
}
.red:active{background:var(--remote-b-bg-pressed);}

.yellow{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-c-bg) 88%, white 12%), var(--remote-c-bg));
    color:var(--remote-c-text);
    border-color:var(--remote-c-border);
}
.yellow:active{background:var(--remote-c-bg-pressed);}

.blue{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-d-bg) 88%, white 12%), var(--remote-d-bg));
    color:var(--remote-d-text);
    border-color:var(--remote-d-border);
}
.blue:active{background:var(--remote-d-bg-pressed);}

.purple{
    background:radial-gradient(circle at 35% 25%,#d28bff,#8a2be2 65%,#3b0b68);
}

.orange{
    background:radial-gradient(circle at 35% 25%,#ffc078,#ff8800 65%,#8a4300);
}

.vote-extra{display:none;}
body.vote-mode .vote-extra{display:block;}
body.vote-mode .abcd{grid-template-columns:1fr 1fr;}

.num{
    width:100%;
    height:100%;
    min-height:0;
    border-radius:12px;
    font-size:clamp(26px, 7.5vw, 44px);
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-number-bg) 82%, white 8%), var(--remote-number-bg));
    color:var(--remote-number-text);
    border:3px solid var(--remote-number-border);
    box-shadow:inset 0 2px 3px rgba(255,255,255,.10), inset 0 -8px 14px rgba(0,0,0,.55), 0 0 8px color-mix(in srgb, var(--remote-number-border) 75%, transparent);
}

.num:active{
    background:var(--remote-number-bg-pressed);
    border-color:var(--remote-number-border-pressed);
}

.action-delete{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-x-bg) 82%, white 10%), var(--remote-x-bg));
    color:var(--remote-x-text);
    border-color:var(--remote-x-border);
}
.action-delete:active{
    background:var(--remote-x-bg-pressed);
    border-color:var(--remote-x-border);
}

.action-ok{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-ok-bg) 82%, white 10%), var(--remote-ok-bg));
    color:var(--remote-ok-text);
    border-color:var(--remote-ok-border);
    font-size:clamp(20px, 6vw, 34px);
}
.action-ok:active{
    background:var(--remote-ok-bg-pressed);
    border-color:var(--remote-ok-border);
}

.btn.disabled,
.btn:disabled{
    opacity:.35;
    filter:grayscale(1);
    cursor:not-allowed;
    transform:none !important;
}

.login-box{
    width:90%;
    max-width:380px;
    margin:100px auto;
    background:#1b1b1b;
    padding:25px;
    border-radius:20px;
}

.login-box h1{
    margin-top:0;
}

.login-box input,
.login-box button{
    width:100%;
    padding:14px;
    margin:8px 0;
    font-size:18px;
    border-radius:10px;
    border:none;
}


.login-box input,
.login-box textarea,
input[type=text],
input[type=number],
input[type=password],
textarea{
    background:var(--remote-text-input-bg) !important;
    color:var(--remote-text-input-text) !important;
    border:2px solid var(--remote-text-input-border) !important;
    box-shadow:0 0 10px color-mix(in srgb, var(--remote-text-input-border) 60%, transparent);
}
.login-box input::placeholder,
textarea::placeholder{
    color:var(--remote-text-input-placeholder) !important;
    opacity:1;
}
.login-box input:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
textarea:focus{
    outline:none;
    box-shadow:0 0 16px var(--remote-text-input-border);
}

.login-box button{
    background:#00a651;
    color:white;
    font-weight:bold;
}

.error-box{
    background:#4a0000;
    color:white;
    padding:12px;
    border-radius:10px;
    margin-bottom:15px;
    font-weight:bold;
}

.session-code-box{
    background:#222;
    color:white;
    padding:15px;
    border-radius:10px;
    margin-bottom:15px;
    font-size:20px;
}

@media (max-height:680px){

    .player-header{
        height:17px;
        font-size:11px;
    }

    #gameStatus{
        height:24px;
        line-height:24px;
        font-size:14px;
    }

    #display{
        height:32px;
        line-height:32px;
        font-size:20px;
    }

    .idle-points{
    width:90vw;
    max-width:400px;
    min-height:20px;
    line-height:20px;
    margin:0 auto 1px;
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,.86);
    text-shadow:0 0 8px rgba(0,216,255,.45);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:0 0 auto;
}

#responseMessage{
        height:20px;
        line-height:20px;
        font-size:13px;
    }

    .remote{
        padding:8px;
        gap:8px;
        border-radius:22px;
    }

    .abcd{
        gap:8px;
    }

    .numbers{
        gap:6px;
    }

    .color-btn{
        height:min(10dvh,70px);
        min-height:42px;
        font-size:clamp(24px, 7vw, 40px);
        border-width:4px;
    }

    .num{
        font-size:clamp(23px, 7vw, 36px);
        border-radius:10px;
    }

    .action-ok{
        font-size:clamp(18px, 5vw, 28px);
    }
}

@media (max-height:580px){

    .player-header{
        display:none;
    }

    #gameStatus{
        height:22px;
        line-height:22px;
        font-size:13px;
    }

    #display{
        height:28px;
        line-height:28px;
        font-size:18px;
        margin:1px auto;
    }

    .idle-points{
    width:90vw;
    max-width:400px;
    min-height:20px;
    line-height:20px;
    margin:0 auto 1px;
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,.86);
    text-shadow:0 0 8px rgba(0,216,255,.45);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:0 0 auto;
}

#responseMessage{
        height:18px;
        line-height:18px;
        font-size:12px;
    }

    .remote{
        padding:7px;
        gap:6px;
        border-radius:18px;
    }

    .abcd{
        gap:6px;
    }

    .numbers{
        gap:5px;
    }

    .color-btn{
        height:42px;
        min-height:38px;
        font-size:28px;
        border-width:3px;
    }

    .num{
        font-size:25px;
        border-radius:8px;
    }

    .action-ok{
        font-size:20px;
    }
}
.selfie-login-box{
    margin:20px auto;
    max-width:430px;
}

.selfie-section{
    margin-top:12px;
}

.selfie-title{
    font-size:15px;
    font-weight:bold;
    margin-bottom:8px;
}

.selfie-camera-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    background:#050505;
    border-radius:18px;
    overflow:hidden;
    border:2px solid #333;
}

#selfieVideo,
#selfiePreview{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

#selfieVideo{
    transform:scaleX(-1);
}

#selfiePreview{
    display:none;
}

#selfieCanvas{
    display:none;
}

.selfie-oval{
    position:absolute;
    left:50%;
    top:50%;
    width:58%;
    height:74%;
    transform:translate(-50%, -50%);
    border:4px solid rgba(0,255,102,.95);
    border-radius:50%;
    box-shadow:
        0 0 0 999px rgba(0,0,0,.28),
        0 0 22px rgba(0,255,102,.75);
    pointer-events:none;
}

.selfie-help{
    position:absolute;
    left:0;
    right:0;
    bottom:10px;
    font-size:13px;
    font-weight:bold;
    text-shadow:0 2px 4px #000;
    pointer-events:none;
}

.selfie-actions{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.selfie-actions button,
#enterBtn{
    width:100%;
    padding:13px;
    margin:6px 0;
    font-size:17px;
    border-radius:10px;
    border:none;
    font-weight:bold;
}

#takeSelfieBtn{
    background:#0066ff;
    color:white;
}

#retakeSelfieBtn{
    background:#444;
    color:white;
}

#enterBtn{
    background:#00a651;
    color:white;
}

#enterBtn:disabled{
    background:#333;
    color:#777;
}
.login-logo{
    display:block;
    max-width:260px;
    max-height:120px;
    width:auto;
    height:auto;
    margin:0 auto 18px;
    object-fit:contain;
}
.login-box.selfie-login-box{
    margin:0 auto;
    min-height:100dvh;
    max-width:430px;
    padding:10px 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.login-logo{
    max-width:220px;
    max-height:80px;
    margin:0 auto 8px;
}

.session-code-box{
    padding:8px;
    margin-bottom:8px;
    font-size:16px;
}

.login-box input{
    padding:10px;
    margin:5px 0;
    font-size:16px;
}

.selfie-section{
    margin-top:6px;
}

.selfie-title{
    font-size:13px;
    margin-bottom:5px;
}

.selfie-camera-wrap{
    width:min(72vw,280px);
    height:min(72vw,280px);
    margin:0 auto;
}

.selfie-help{
    font-size:11px;
    bottom:6px;
}

.selfie-actions{
    margin-top:6px;
}

.selfie-actions button,
#enterBtn{
    padding:10px;
    margin:4px 0;
    font-size:15px;
}

@media (max-height:700px){
    .login-logo{
        max-height:60px;
        margin-bottom:5px;
    }

    .selfie-camera-wrap{
        width:min(62vw,230px);
        height:min(62vw,230px);
    }

    .session-code-box{
        padding:6px;
        font-size:14px;
    }

    .login-box input{
        padding:8px;
        font-size:14px;
    }

    .selfie-actions button,
    #enterBtn{
        padding:8px;
        font-size:14px;
    }
}
#breakOverlay{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,.94);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
}

.break-overlay-card{
    width:min(92vw,520px);
    padding:36px 24px;
    border-radius:28px;
    background:linear-gradient(180deg,#222,#050505);
    border:4px solid #ffd200;
    box-shadow:0 0 45px rgba(255,210,0,.35);
}

.break-overlay-message{
    font-size:clamp(32px, 9vw, 62px);
    font-weight:900;
    line-height:1.05;
    color:#ffffff;
    text-transform:uppercase;
    text-shadow:0 4px 12px rgba(0,0,0,.9);
}

.break-overlay-timer{
    margin-top:26px;
    font-size:clamp(60px, 20vw, 120px);
    font-weight:900;
    color:#ffd200;
    line-height:1;
    letter-spacing:2px;
    text-shadow:0 5px 16px rgba(0,0,0,.95);
}

#gameOverOverlay{
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,.96);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    overflow:auto;
}

.gameover-card{
    width:min(94vw,540px);
    max-height:96dvh;
    padding:26px 20px;
    border-radius:28px;
    background:linear-gradient(180deg,#202020,#050505);
    border:4px solid #ff2b2b;
    box-shadow:0 0 45px rgba(255,0,0,.35);
}

.gameover-logo{
    display:block;
    max-width:88%;
    max-height:120px;
    width:auto;
    height:auto;
    object-fit:contain;
    margin:0 auto 10px;
}

.gameover-title{
    font-size:clamp(42px, 13vw, 86px);
    font-weight:900;
    color:#ff2b2b;
    text-transform:uppercase;
    line-height:1;
    margin-bottom:18px;
    text-shadow:0 5px 14px rgba(0,0,0,.95);
}

.gameover-text{
    font-size:clamp(20px, 5.2vw, 32px);
    font-weight:800;
    line-height:1.2;
    color:#ffffff;
    margin:14px auto 22px;
    text-shadow:0 3px 10px rgba(0,0,0,.9);
}

.gameover-socials{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    margin:18px auto 22px;
    flex-wrap:wrap;
}

.gameover-social{
    width:84px;
    height:84px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
    border:2px solid #555;
    box-shadow:0 5px 12px rgba(0,0,0,.6);
}

.gameover-social img{
    max-width:68px;
    max-height:68px;
    width:auto;
    height:auto;
    object-fit:contain;
}

.gameover-social:active{
    transform:scale(.94);
}

.gameover-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    width:100%;
    max-width:420px;
    margin:0 auto;
}

.gameover-button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:86px;
    padding:10px;
    border-radius:20px;
    background:#111;
    border:2px solid #444;
    box-shadow:0 5px 12px rgba(0,0,0,.6);
}

.gameover-button img{
    max-width:100%;
    max-height:78px;
    width:auto;
    height:auto;
    object-fit:contain;
}

.gameover-button:active{
    transform:scale(.96);
}

@media (max-height:700px){
    .gameover-card{
        padding:18px 16px;
    }

    .gameover-logo{
        max-height:82px;
        margin-bottom:12px;
    }

    .gameover-text{
        margin:10px auto 14px;
        font-size:clamp(18px, 4.5vw, 26px);
    }

    .gameover-socials{
        gap:14px;
        margin:12px auto 14px;
    }

    .gameover-social{
        width:64px;
        height:64px;
    }

    .gameover-social img{
        max-width:50px;
        max-height:50px;
    }

    .gameover-buttons{
        gap:10px;
    }

    .gameover-button{
        min-height:68px;
        border-radius:16px;
    }

    .gameover-button img{
        max-height:60px;
    }
}
.gameover-main-title{
    font-size:clamp(34px, 9vw, 58px);
    font-weight:900;
    color:#ffd200;
    text-transform:uppercase;
    margin:12px 0 14px;
    line-height:1;
}
.quiz-selected{
    outline:5px solid #ffffff !important;
    transform:scale(1.05);
    opacity:1 !important;
}

.quiz-disabled{
    opacity:.25 !important;
    filter:grayscale(1);
}

/* Ajustes login v2 */
.selfie-info-text{
    text-align:center;
    margin:12px 0 18px;
    font-size:16px;
    font-weight:bold;
}

.camera-open-btn{
    width:100%;
    padding:14px;
    font-size:18px;
    font-weight:bold;
}

/* Header mando v2 */
.player-header-name{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:left;
    flex:1;
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    font-weight:800;
}
.player-header-number{
    color:#ffe600;
    font-weight:950;
    flex:0 0 auto;
}
.player-header-separator{
    color:rgba(255,255,255,.68);
    flex:0 0 auto;
}
.player-header-label{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    min-width:0;
}

.logout-btn{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#222;
    border:1px solid #555;
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
    line-height:1;
    opacity:.95;
    flex:0 0 auto;
}

.logout-btn:active{
    transform:scale(.92);
    background:#4a0000;
}

.btn.pressing{
    transform:translateY(3px);
    box-shadow:inset 0 4px 9px rgba(0,0,0,.8);
}




/* Login: centered when it fits, scrollable when error + manual code + selfie exceed viewport */
body.login-body{
    height:auto;
    min-height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:calc(10px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));
}

body.login-body .login-box.selfie-login-box{
    margin:auto;
    min-height:0;
    height:auto;
    width:90%;
    max-width:430px;
    justify-content:center;
    padding:14px 18px;
}

body.login-body #joinForm{
    width:100%;
}

@media (max-height:760px){
    body.login-body{
        align-items:flex-start;
    }

    body.login-body .login-box.selfie-login-box{
        margin:0 auto;
        justify-content:flex-start;
    }

    body.login-body .login-logo{
        max-height:54px;
        margin-bottom:4px;
    }

    body.login-body .error-box{
        padding:8px;
        margin-bottom:8px;
        font-size:13px;
    }

    body.login-body .selfie-title{
        font-size:12px;
        line-height:1.25;
    }

    body.login-body .selfie-camera-wrap{
        width:min(58vw,210px);
        height:min(58vw,210px);
    }

    body.login-body .login-box input,
    body.login-body .login-box button,
    body.login-body .selfie-actions button,
    body.login-body #enterBtn{
        padding:8px;
        margin:3px 0;
        font-size:14px;
    }
}

@media (max-height:620px){
    body.login-body .selfie-camera-wrap{
        width:min(50vw,170px);
        height:min(50vw,170px);
    }
}

/* BUZZER */
.buzzer-area{
    display:none;
    width:100%;
    flex:1;
    align-items:center;
    justify-content:center;
}

.buzzer-btn{
    width:min(72vw, 360px);
    height:min(72vw, 360px);
    border-radius:50%;
    background:radial-gradient(circle at 35% 25%,#ff8080,#e00000 62%,#630000);
    color:#fff;
    border:10px solid #260000;
    font-size:clamp(34px, 11vw, 70px);
    letter-spacing:1px;
    text-transform:uppercase;
    box-shadow:
        inset 0 10px 18px rgba(255,255,255,.25),
        inset 0 -18px 28px rgba(0,0,0,.55),
        0 12px 28px rgba(255,0,0,.45);
}

body.buzzer-mode .abcd,
body.buzzer-mode .numbers{
    display:none;
}

body.buzzer-mode .buzzer-area{
    display:flex;
}

body.buzzer-winner-screen{
    background:#00b84a !important;
}

body.buzzer-winner-screen .remote-page{
    background:#00b84a !important;
}

body.buzzer-winner-screen #gameStatus,
body.buzzer-winner-screen #responseMessage,
body.buzzer-winner-screen #display{
    color:#fff !important;
    text-shadow:0 3px 10px rgba(0,0,0,.35);
}
.vote-options-remote{
    display:none !important;
}


body.color-match-mode .remote{display:none;}
body.color-match-mode #display{display:none;}
body.color-match-mode .color-match-panel{display:flex;}
body.numeric-mode .color-match-panel{display:none !important;}
body.numeric-mode .numbers{display:grid;}
body.numeric-mode .abcd{display:none;}
body.numeric-mode .buzzer-area{display:none;}

.color-match-panel{
    display:none;
    width:min(92vw,430px);
    flex:1;
    min-height:0;
    margin:8px auto 0;
    padding:18px;
    border-radius:26px;
    background:linear-gradient(180deg,#3a3a3a,#181818);
    box-shadow:inset 0 2px 4px rgba(255,255,255,.15), inset 0 -6px 12px rgba(0,0,0,.7), 0 8px 22px rgba(0,0,0,.8);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
}
.color-match-label{font-size:clamp(22px,6vw,34px);font-weight:bold;}
.color-native-row{display:flex;align-items:center;justify-content:center;gap:12px;font-size:clamp(16px,4.5vw,22px);font-weight:800;}
.color-match-native{width:72px;height:52px;border:3px solid #fff;border-radius:14px;background:#111;padding:2px;}
.color-picker-wrap{width:min(82vw,360px);display:flex;flex-direction:column;align-items:center;gap:12px;}
.color-match-canvas{
    width:min(82vw,360px);
    height:min(42dvh,300px);
    border-radius:18px;
    border:3px solid rgba(255,255,255,.35);
    touch-action:none;
    box-shadow:0 8px 22px rgba(0,0,0,.55);
    background:#f00;
}
.color-match-hue{
    width:min(82vw,360px);
    height:34px;
    accent-color:#fff;
}
.color-match-preview-row{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;}
.color-match-preview{width:56px;height:56px;border-radius:16px;border:4px solid #fff;box-shadow:0 5px 14px rgba(0,0,0,.5);}
.color-match-hex{font-size:clamp(18px,5vw,26px);font-weight:900;letter-spacing:.06em;}
body.color-match-mode .color-match-panel[aria-disabled="true"]{opacity:.45;filter:grayscale(1);}
.color-match-send{
    width:min(78vw,340px);
    min-height:64px;
    border:none;
    border-radius:18px;
    background:linear-gradient(180deg,#1b5a2a,#08240f);
    color:#b7ffcb;
    font-size:clamp(22px,6vw,34px);
    font-weight:bold;
    box-shadow:inset 0 2px 2px rgba(255,255,255,.22), inset 0 -5px 8px rgba(0,0,0,.55), 0 4px 6px rgba(0,0,0,.45);
}
.color-match-send:disabled{opacity:.35;filter:grayscale(1);}

/* Numeric keypad visual update */
#display{
    border-color:var(--remote-display-border,#ff2bd6) !important;
    box-shadow:
        0 0 10px var(--remote-display-glow,#ff2bd6),
        0 0 22px color-mix(in srgb, var(--remote-display-glow,#ff2bd6) 45%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--remote-display-glow,#ff2bd6) 18%, transparent) !important;
}

.numbers .btn.num:not(.action-delete):not(.action-ok){
    background:var(--remote-number-bg,#36aeea) !important;
    color:var(--remote-number-text,#ffffff) !important;
    border:2px solid color-mix(in srgb, var(--remote-number-bg,#36aeea) 55%, #ffffff) !important;
    text-shadow:0 2px 3px rgba(0,0,0,.35);
}

.numbers .btn.num:not(.action-delete):not(.action-ok):active,
.numbers .btn.num:not(.action-delete):not(.action-ok).pressing{
    background:var(--remote-number-bg-pressed,#073d63) !important;
    color:var(--remote-number-text,#ffffff) !important;
}

.numbers .btn.action-delete,
.numbers .btn.action-ok{
    background:var(--remote-action-bg,#7b22c8) !important;
    color:var(--remote-action-text,#ffffff) !important;
    border:2px solid color-mix(in srgb, var(--remote-action-bg,#7b22c8) 45%, #ffffff) !important;
    text-shadow:0 2px 3px rgba(0,0,0,.35);
}

.numbers .btn.action-delete:active,
.numbers .btn.action-ok:active,
.numbers .btn.action-delete.pressing,
.numbers .btn.action-ok.pressing{
    background:var(--remote-action-bg-pressed,#2f0758) !important;
    color:var(--remote-action-text,#ffffff) !important;
}


/* Remote theme: text boxes / login inputs */
.login-box input,
.player-text-input,
input[type="text"],
input[type="number"]{
    background:var(--remote-text-input-bg,#111111) !important;
    color:var(--remote-text-input-text,#ffffff) !important;
    border:2px solid var(--remote-text-input-border,#ff2bd6) !important;
    box-shadow:0 0 10px color-mix(in srgb, var(--remote-text-input-border,#ff2bd6) 45%, transparent) !important;
}
.login-box input:focus,
.player-text-input:focus,
input[type="text"]:focus,
input[type="number"]:focus{
    outline:none !important;
    border-color:var(--remote-text-input-border,#ff2bd6) !important;
    box-shadow:0 0 16px color-mix(in srgb, var(--remote-text-input-border,#ff2bd6) 75%, transparent) !important;
}
.login-box input::placeholder,
.player-text-input::placeholder,
input[type="text"]::placeholder,
input[type="number"]::placeholder{
    color:var(--remote-text-input-placeholder,#bbbbbb) !important;
    opacity:1;
}

/* Numeric keypad visual update */
#display{
    background:var(--remote-display-bg,#050b38) !important;
    color:var(--remote-display-text,#ffffff) !important;
    border-color:var(--remote-display-border,#ff2bd6) !important;
    box-shadow:
        0 0 10px var(--remote-display-glow,#ff2bd6),
        0 0 22px color-mix(in srgb, var(--remote-display-glow,#ff2bd6) 45%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--remote-display-glow,#ff2bd6) 18%, transparent) !important;
}

.numbers .btn.num:not(.action-delete):not(.action-ok){
    background:var(--remote-number-bg,#36aeea) !important;
    color:var(--remote-number-text,#ffffff) !important;
    border:3px solid var(--remote-number-border,#00d8ff) !important;
    box-shadow:0 0 12px color-mix(in srgb, var(--remote-number-border,#00d8ff) 60%, transparent) !important;
}

.numbers .btn.num:not(.action-delete):not(.action-ok):active,
.numbers .btn.num:not(.action-delete):not(.action-ok).pressing{
    background:var(--remote-number-bg-pressed,#073d63) !important;
    color:var(--remote-number-text,#ffffff) !important;
    border-color:var(--remote-number-border-pressed,#ff0099) !important;
}

.numbers .btn.action-delete{
    background:var(--remote-x-bg,#b00012) !important;
    color:var(--remote-x-text,#ffe600) !important;
    border:3px solid var(--remote-x-border,#ff1a2d) !important;
    box-shadow:0 0 14px color-mix(in srgb, var(--remote-x-border,#ff1a2d) 60%, transparent) !important;
}

.numbers .btn.action-delete:active,
.numbers .btn.action-delete.pressing{
    background:var(--remote-x-bg-pressed,#5c0009) !important;
    color:var(--remote-x-text,#ffe600) !important;
    border-color:var(--remote-x-border,#ff1a2d) !important;
}

.numbers .btn.action-ok{
    background:var(--remote-ok-bg,#00a6c8) !important;
    color:var(--remote-ok-text,#ffe600) !important;
    border:3px solid var(--remote-ok-border,#00eaff) !important;
    box-shadow:0 0 14px color-mix(in srgb, var(--remote-ok-border,#00eaff) 60%, transparent) !important;
}

.numbers .btn.action-ok:active,
.numbers .btn.action-ok.pressing{
    background:var(--remote-ok-bg-pressed,#00596d) !important;
    color:var(--remote-ok-text,#ffe600) !important;
    border-color:var(--remote-ok-border,#00eaff) !important;
}


/* Remote buttons: squarer arcade style with automatic gradient */
.color-btn,
.numbers .btn.num{
    border-radius:12px !important;
    border-style:solid !important;
    border-width:3px !important;
    position:relative;
    overflow:hidden;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.38),
        inset 0 -7px 10px rgba(0,0,0,.48),
        0 4px 0 rgba(0,0,0,.45),
        0 0 12px rgba(255,255,255,.10) !important;
}

.color-btn::before,
.numbers .btn.num::before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:7%;
    height:32%;
    border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
    pointer-events:none;
}

.color-btn:active,
.color-btn.pressing,
.numbers .btn.num:active,
.numbers .btn.num.pressing{
    transform:translateY(3px) !important;
    box-shadow:
        inset 0 5px 11px rgba(0,0,0,.72),
        0 1px 0 rgba(0,0,0,.60),
        0 0 8px rgba(255,255,255,.08) !important;
}

.green{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-a-bg) 72%, #ffffff 28%) 0%, var(--remote-a-bg) 48%, color-mix(in srgb, var(--remote-a-bg) 64%, #000000 36%) 100%) !important;
    color:var(--remote-a-text) !important;
    border-color:var(--remote-a-border) !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.38), inset 0 -7px 10px rgba(0,0,0,.48), 0 4px 0 rgba(0,0,0,.45), 0 0 14px color-mix(in srgb, var(--remote-a-border) 50%, transparent) !important;
}
.green:active,.green.pressing{background:linear-gradient(180deg,var(--remote-a-bg-pressed),color-mix(in srgb,var(--remote-a-bg-pressed) 65%,#000000 35%)) !important;}
.red{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-b-bg) 72%, #ffffff 28%) 0%, var(--remote-b-bg) 48%, color-mix(in srgb, var(--remote-b-bg) 64%, #000000 36%) 100%) !important;
    color:var(--remote-b-text) !important;
    border-color:var(--remote-b-border) !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.38), inset 0 -7px 10px rgba(0,0,0,.48), 0 4px 0 rgba(0,0,0,.45), 0 0 14px color-mix(in srgb, var(--remote-b-border) 50%, transparent) !important;
}
.red:active,.red.pressing{background:linear-gradient(180deg,var(--remote-b-bg-pressed),color-mix(in srgb,var(--remote-b-bg-pressed) 65%,#000000 35%)) !important;}
.yellow{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-c-bg) 72%, #ffffff 28%) 0%, var(--remote-c-bg) 48%, color-mix(in srgb, var(--remote-c-bg) 64%, #000000 36%) 100%) !important;
    color:var(--remote-c-text) !important;
    border-color:var(--remote-c-border) !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.38), inset 0 -7px 10px rgba(0,0,0,.48), 0 4px 0 rgba(0,0,0,.45), 0 0 14px color-mix(in srgb, var(--remote-c-border) 50%, transparent) !important;
}
.yellow:active,.yellow.pressing{background:linear-gradient(180deg,var(--remote-c-bg-pressed),color-mix(in srgb,var(--remote-c-bg-pressed) 65%,#000000 35%)) !important;}
.blue{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-d-bg) 72%, #ffffff 28%) 0%, var(--remote-d-bg) 48%, color-mix(in srgb, var(--remote-d-bg) 64%, #000000 36%) 100%) !important;
    color:var(--remote-d-text) !important;
    border-color:var(--remote-d-border) !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.38), inset 0 -7px 10px rgba(0,0,0,.48), 0 4px 0 rgba(0,0,0,.45), 0 0 14px color-mix(in srgb, var(--remote-d-border) 50%, transparent) !important;
}
.blue:active,.blue.pressing{background:linear-gradient(180deg,var(--remote-d-bg-pressed),color-mix(in srgb,var(--remote-d-bg-pressed) 65%,#000000 35%)) !important;}

.numbers .btn.num:not(.action-delete):not(.action-ok){
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-number-bg) 68%, #ffffff 32%) 0%, var(--remote-number-bg) 48%, color-mix(in srgb, var(--remote-number-bg) 68%, #000000 32%) 100%) !important;
    border-color:var(--remote-number-border) !important;
    border-radius:11px !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.36), inset 0 -7px 10px rgba(0,0,0,.52), 0 4px 0 rgba(0,0,0,.45), 0 0 14px color-mix(in srgb, var(--remote-number-border) 55%, transparent) !important;
}
.numbers .btn.num:not(.action-delete):not(.action-ok):active,
.numbers .btn.num:not(.action-delete):not(.action-ok).pressing{
    background:linear-gradient(180deg,var(--remote-number-bg-pressed),color-mix(in srgb,var(--remote-number-bg-pressed) 60%,#000000 40%)) !important;
    border-color:var(--remote-number-border-pressed) !important;
}
.numbers .btn.action-delete{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-x-bg) 70%, #ffffff 30%) 0%, var(--remote-x-bg) 50%, color-mix(in srgb, var(--remote-x-bg) 65%, #000000 35%) 100%) !important;
    border-color:var(--remote-x-border) !important;
    border-radius:11px !important;
}
.numbers .btn.action-delete:active,
.numbers .btn.action-delete.pressing{
    background:linear-gradient(180deg,var(--remote-x-bg-pressed),color-mix(in srgb,var(--remote-x-bg-pressed) 60%,#000000 40%)) !important;
}
.numbers .btn.action-ok{
    background:linear-gradient(180deg, color-mix(in srgb, var(--remote-ok-bg) 70%, #ffffff 30%) 0%, var(--remote-ok-bg) 50%, color-mix(in srgb, var(--remote-ok-bg) 65%, #000000 35%) 100%) !important;
    border-color:var(--remote-ok-border) !important;
    border-radius:11px !important;
}
.numbers .btn.action-ok:active,
.numbers .btn.action-ok.pressing{
    background:linear-gradient(180deg,var(--remote-ok-bg-pressed),color-mix(in srgb,var(--remote-ok-bg-pressed) 60%,#000000 40%)) !important;
}


/* === 2026-06-18: mando estilo imagen referencia + respuesta táctil inmediata === */
.remote .btn,
.remote-preview .preview-key,
.remote-preview .preview-choice{
    -webkit-tap-highlight-color: transparent;
    user-select:none;
}

/* A/B/C/D: degradado marcado, menos redondo, similar al mando de referencia */
.color-btn{
    border-radius:16px !important;
    border-width:3px !important;
}
.green{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--remote-a-bg) 82%, #ffffff 18%) 0%,
        var(--remote-a-bg) 42%,
        color-mix(in srgb, var(--remote-a-bg) 58%, #000000 42%) 100%) !important;
}
.red{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--remote-b-bg) 82%, #ffffff 18%) 0%,
        var(--remote-b-bg) 42%,
        color-mix(in srgb, var(--remote-b-bg) 58%, #000000 42%) 100%) !important;
}
.yellow{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--remote-c-bg) 78%, #ffffff 22%) 0%,
        var(--remote-c-bg) 42%,
        color-mix(in srgb, var(--remote-c-bg) 55%, #000000 45%) 100%) !important;
}
.blue{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--remote-d-bg) 78%, #ffffff 22%) 0%,
        var(--remote-d-bg) 42%,
        color-mix(in srgb, var(--remote-d-bg) 55%, #000000 45%) 100%) !important;
}

/* Números: sin degradado, fondo oscuro plano y bordes alternos cian/rosa */
.numbers .btn.num:not(.action-delete):not(.action-ok){
    background:var(--remote-number-bg) !important;
    color:var(--remote-number-text) !important;
    border-width:3px !important;
    border-style:solid !important;
    border-color:var(--remote-number-border) !important;
    border-radius:15px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        inset 0 -14px 22px rgba(0,0,0,.32),
        0 0 10px color-mix(in srgb, var(--remote-number-border) 55%, transparent) !important;
}
.numbers .btn.num:nth-child(2),
.numbers .btn.num:nth-child(4),
.numbers .btn.num:nth-child(6),
.numbers .btn.num:nth-child(8){
    border-color:var(--remote-number-border-pressed) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        inset 0 -14px 22px rgba(0,0,0,.32),
        0 0 10px color-mix(in srgb, var(--remote-number-border-pressed) 55%, transparent) !important;
}
.numbers .btn.num:not(.action-delete):not(.action-ok):active,
.numbers .btn.num:not(.action-delete):not(.action-ok).pressing{
    background:var(--remote-number-bg-pressed) !important;
    transform:translateY(3px) scale(.985) !important;
    box-shadow:inset 0 6px 14px rgba(0,0,0,.75), 0 0 7px rgba(255,255,255,.08) !important;
}

/* X y OK: degradado suave, como en la referencia */
.numbers .btn.action-delete,
.numbers .btn.action-ok{
    border-width:3px !important;
    border-radius:15px !important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.20),
        inset 0 -15px 22px rgba(0,0,0,.38),
        0 0 10px color-mix(in srgb, currentColor 18%, transparent) !important;
}
.numbers .btn.action-delete{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--remote-x-bg) 78%, #ffffff 10%) 0%,
        var(--remote-x-bg) 48%,
        color-mix(in srgb, var(--remote-x-bg) 55%, #000000 45%) 100%) !important;
    color:var(--remote-x-text) !important;
    border-color:var(--remote-x-border) !important;
}
.numbers .btn.action-ok{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--remote-ok-bg) 78%, #ffffff 10%) 0%,
        var(--remote-ok-bg) 48%,
        color-mix(in srgb, var(--remote-ok-bg) 55%, #000000 45%) 100%) !important;
    color:var(--remote-ok-text) !important;
    border-color:var(--remote-ok-border) !important;
}
.numbers .btn.action-delete:active,
.numbers .btn.action-delete.pressing{
    background:linear-gradient(180deg,var(--remote-x-bg-pressed),color-mix(in srgb,var(--remote-x-bg-pressed) 56%,#000000 44%)) !important;
}
.numbers .btn.action-ok:active,
.numbers .btn.action-ok.pressing{
    background:linear-gradient(180deg,var(--remote-ok-bg-pressed),color-mix(in srgb,var(--remote-ok-bg-pressed) 56%,#000000 44%)) !important;
}

/* Feedback táctil instantáneo, visible también en taps cortos */
.btn.pressing{
    transform:translateY(3px) scale(.985) !important;
    filter:brightness(.82) saturate(1.08) !important;
}

/* === 2026-06-18: override definitivo mando referencia sin color-mix + cache v2 === */
.remote .btn{
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
    user-select:none !important;
    position:relative !important;
    overflow:hidden !important;
}
.remote .btn::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:transparent;
}
.remote .btn.pressing::after,
.remote .btn:active::after{
    background:rgba(0,0,0,.28);
}

/* A/B/C/D: degradado parecido a la imagen, esquinas más cuadradas */
.remote .color-btn{
    border-radius:16px !important;
    border-width:3px !important;
    border-style:solid !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.20),
        inset 0 -13px 18px rgba(0,0,0,.38),
        0 4px 0 rgba(0,0,0,.42) !important;
}
.remote .green{
    background-color:var(--remote-a-bg) !important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.42) 100%) !important;
    color:var(--remote-a-text) !important;
    border-color:var(--remote-a-border) !important;
}
.remote .red{
    background-color:var(--remote-b-bg) !important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.42) 100%) !important;
    color:var(--remote-b-text) !important;
    border-color:var(--remote-b-border) !important;
}
.remote .yellow{
    background-color:var(--remote-c-bg) !important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.46) 100%) !important;
    color:var(--remote-c-text) !important;
    border-color:var(--remote-c-border) !important;
}
.remote .blue{
    background-color:var(--remote-d-bg) !important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.42) 100%) !important;
    color:var(--remote-d-text) !important;
    border-color:var(--remote-d-border) !important;
}

/* Números: planos, oscuros, sin degradado */
.remote .numbers .btn.num:not(.action-delete):not(.action-ok){
    background-color:var(--remote-number-bg) !important;
    background-image:none !important;
    color:var(--remote-number-text) !important;
    border:3px solid var(--remote-number-border) !important;
    border-radius:15px !important;
    box-shadow:
        inset 0 -12px 18px rgba(0,0,0,.30),
        0 0 10px rgba(0,216,255,.42) !important;
}
.remote .numbers .btn.num:nth-child(2),
.remote .numbers .btn.num:nth-child(4),
.remote .numbers .btn.num:nth-child(6),
.remote .numbers .btn.num:nth-child(8){
    border-color:var(--remote-number-border-pressed) !important;
    box-shadow:
        inset 0 -12px 18px rgba(0,0,0,.30),
        0 0 10px rgba(255,0,153,.42) !important;
}
.remote .numbers .btn.num:not(.action-delete):not(.action-ok).pressing,
.remote .numbers .btn.num:not(.action-delete):not(.action-ok):active{
    background-color:var(--remote-number-bg-pressed) !important;
    background-image:none !important;
    transform:translateY(3px) scale(.985) !important;
}

/* X y OK: con degradado suave */
.remote .numbers .btn.action-delete,
.remote .numbers .btn.action-ok{
    border-width:3px !important;
    border-style:solid !important;
    border-radius:15px !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.20),
        inset 0 -15px 22px rgba(0,0,0,.42),
        0 4px 0 rgba(0,0,0,.42) !important;
}
.remote .numbers .btn.action-delete{
    background-color:var(--remote-x-bg) !important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 42%,rgba(0,0,0,.48) 100%) !important;
    color:var(--remote-x-text) !important;
    border-color:var(--remote-x-border) !important;
}
.remote .numbers .btn.action-ok{
    background-color:var(--remote-ok-bg) !important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 42%,rgba(0,0,0,.42) 100%) !important;
    color:var(--remote-ok-text) !important;
    border-color:var(--remote-ok-border) !important;
}
.remote .numbers .btn.action-delete.pressing,
.remote .numbers .btn.action-delete:active{
    background-color:var(--remote-x-bg-pressed) !important;
}
.remote .numbers .btn.action-ok.pressing,
.remote .numbers .btn.action-ok:active{
    background-color:var(--remote-ok-bg-pressed) !important;
}

.remote .btn.pressing,
.remote .btn:active{
    transform:translateY(3px) scale(.985) !important;
    filter:brightness(.88) saturate(1.08) !important;
}

/* === 2026-06-18: ajuste definitivo estilo mando referencia v3 ===
   - Números planos, sin brillo/degradado ni pseudo-reflejo.
   - Bordes alternos cian/rosa como en la referencia.
   - A/B/C/D con degradado más limpio y menos forzado.
   - Al pulsar cambia también el borde de forma visible. */
.remote .numbers .btn.num:not(.action-delete):not(.action-ok),
.remote-page .numbers .btn.num:not(.action-delete):not(.action-ok){
    background:var(--remote-number-bg,#02052b) !important;
    background-image:none !important;
    color:var(--remote-number-text,#ffffff) !important;
    border:3px solid var(--remote-number-border,#00d8ff) !important;
    border-radius:15px !important;
    box-shadow:0 0 10px rgba(0,216,255,.38), inset 0 0 0 1px rgba(255,255,255,.025) !important;
    filter:none !important;
}
.remote .numbers .btn.num:not(.action-delete):not(.action-ok)::before,
.remote-page .numbers .btn.num:not(.action-delete):not(.action-ok)::before{
    display:none !important;
    content:none !important;
    background:none !important;
}
.remote .numbers .btn.num:nth-child(2):not(.action-delete):not(.action-ok),
.remote .numbers .btn.num:nth-child(4):not(.action-delete):not(.action-ok),
.remote .numbers .btn.num:nth-child(6):not(.action-delete):not(.action-ok),
.remote .numbers .btn.num:nth-child(8):not(.action-delete):not(.action-ok),
.remote-page .numbers .btn.num:nth-child(2):not(.action-delete):not(.action-ok),
.remote-page .numbers .btn.num:nth-child(4):not(.action-delete):not(.action-ok),
.remote-page .numbers .btn.num:nth-child(6):not(.action-delete):not(.action-ok),
.remote-page .numbers .btn.num:nth-child(8):not(.action-delete):not(.action-ok){
    border-color:var(--remote-number-border-pressed,#ff0099) !important;
    box-shadow:0 0 10px rgba(255,0,153,.40), inset 0 0 0 1px rgba(255,255,255,.025) !important;
}
.remote .numbers .btn.num:not(.action-delete):not(.action-ok).pressing,
.remote .numbers .btn.num:not(.action-delete):not(.action-ok):active,
.remote-page .numbers .btn.num:not(.action-delete):not(.action-ok).pressing,
.remote-page .numbers .btn.num:not(.action-delete):not(.action-ok):active{
    background:var(--remote-number-bg-pressed,#000018) !important;
    background-image:none !important;
    border-color:var(--remote-number-border-pressed,#ff0099) !important;
    box-shadow:inset 0 5px 14px rgba(0,0,0,.75), 0 0 9px rgba(255,0,153,.45) !important;
    transform:translateY(3px) scale(.985) !important;
    filter:none !important;
}
.remote .numbers .btn.num:nth-child(2):not(.action-delete):not(.action-ok).pressing,
.remote .numbers .btn.num:nth-child(2):not(.action-delete):not(.action-ok):active,
.remote .numbers .btn.num:nth-child(4):not(.action-delete):not(.action-ok).pressing,
.remote .numbers .btn.num:nth-child(4):not(.action-delete):not(.action-ok):active,
.remote .numbers .btn.num:nth-child(6):not(.action-delete):not(.action-ok).pressing,
.remote .numbers .btn.num:nth-child(6):not(.action-delete):not(.action-ok):active,
.remote .numbers .btn.num:nth-child(8):not(.action-delete):not(.action-ok).pressing,
.remote .numbers .btn.num:nth-child(8):not(.action-delete):not(.action-ok):active,
.remote-page .numbers .btn.num:nth-child(2):not(.action-delete):not(.action-ok).pressing,
.remote-page .numbers .btn.num:nth-child(2):not(.action-delete):not(.action-ok):active,
.remote-page .numbers .btn.num:nth-child(4):not(.action-delete):not(.action-ok).pressing,
.remote-page .numbers .btn.num:nth-child(4):not(.action-delete):not(.action-ok):active,
.remote-page .numbers .btn.num:nth-child(6):not(.action-delete):not(.action-ok).pressing,
.remote-page .numbers .btn.num:nth-child(6):not(.action-delete):not(.action-ok):active,
.remote-page .numbers .btn.num:nth-child(8):not(.action-delete):not(.action-ok).pressing,
.remote-page .numbers .btn.num:nth-child(8):not(.action-delete):not(.action-ok):active{
    border-color:var(--remote-number-border,#00d8ff) !important;
    box-shadow:inset 0 5px 14px rgba(0,0,0,.75), 0 0 9px rgba(0,216,255,.45) !important;
}

.remote .color-btn,
.remote-page .color-btn{
    border-radius:16px !important;
    border-width:3px !important;
    border-style:solid !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset 0 -12px 18px rgba(0,0,0,.30), 0 3px 0 rgba(0,0,0,.36) !important;
    filter:none !important;
}
.remote .green,.remote-page .green{
    background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,.22) 100%), var(--remote-a-bg,#009b0b) !important;
    color:var(--remote-a-text,#ffffff) !important;
    border-color:var(--remote-a-border,#00ff18) !important;
}
.remote .red,.remote-page .red{
    background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,.22) 100%), var(--remote-b-bg,#b00000) !important;
    color:var(--remote-b-text,#ffffff) !important;
    border-color:var(--remote-b-border,#ff0000) !important;
}
.remote .yellow,.remote-page .yellow{
    background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,.28) 100%), var(--remote-c-bg,#7c8500) !important;
    color:var(--remote-c-text,#ffffff) !important;
    border-color:var(--remote-c-border,#eaff00) !important;
}
.remote .blue,.remote-page .blue{
    background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,.24) 100%), var(--remote-d-bg,#078b96) !important;
    color:var(--remote-d-text,#ffffff) !important;
    border-color:var(--remote-d-border,#00d8ff) !important;
}
.remote .color-btn.pressing,
.remote .color-btn:active,
.remote-page .color-btn.pressing,
.remote-page .color-btn:active{
    transform:translateY(3px) scale(.985) !important;
    filter:brightness(.86) !important;
    box-shadow:inset 0 5px 14px rgba(0,0,0,.68), 0 1px 0 rgba(0,0,0,.55) !important;
}

.remote .numbers .btn.action-delete,
.remote .numbers .btn.action-ok,
.remote-page .numbers .btn.action-delete,
.remote-page .numbers .btn.action-ok{
    border-radius:15px !important;
    border-width:3px !important;
    border-style:solid !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -14px 20px rgba(0,0,0,.38), 0 3px 0 rgba(0,0,0,.38) !important;
}
.remote .numbers .btn.action-delete,
.remote-page .numbers .btn.action-delete{
    background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.42) 100%), var(--remote-x-bg,#b00012) !important;
    color:var(--remote-x-text,#ffe600) !important;
    border-color:var(--remote-x-border,#ff1a2d) !important;
}
.remote .numbers .btn.action-ok,
.remote-page .numbers .btn.action-ok{
    background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.34) 100%), var(--remote-ok-bg,#00a6c8) !important;
    color:var(--remote-ok-text,#ffe600) !important;
    border-color:var(--remote-ok-border,#00eaff) !important;
}
.remote .numbers .btn.action-delete.pressing,
.remote .numbers .btn.action-delete:active,
.remote-page .numbers .btn.action-delete.pressing,
.remote-page .numbers .btn.action-delete:active{
    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.44)), var(--remote-x-bg-pressed,#5c0009) !important;
    border-color:var(--remote-number-border-pressed,#ff0099) !important;
}
.remote .numbers .btn.action-ok.pressing,
.remote .numbers .btn.action-ok:active,
.remote-page .numbers .btn.action-ok.pressing,
.remote-page .numbers .btn.action-ok:active{
    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.36)), var(--remote-ok-bg-pressed,#00596d) !important;
    border-color:var(--remote-number-border-pressed,#ff0099) !important;
}

/* BETTING GAME */
.betting-panel{
    width:min(94vw,520px);
    margin:10px auto 14px;
    padding:14px;
    border:2px solid var(--remote-display-border,#00d8ff);
    border-radius:18px;
    background:rgba(0,0,30,.72);
    box-shadow:0 0 14px rgba(0,216,255,.35);
    color:#fff;
}
.betting-title{font-size:clamp(20px,5vw,32px);font-weight:900;text-align:center;margin-bottom:12px;line-height:1.1;}
.betting-note,.betting-points{text-align:center;font-size:18px;margin:8px 0 12px;}
.betting-main-btn{width:100%;padding:16px;border-radius:16px;border:3px solid #ff2bd6;background:linear-gradient(180deg,#8b27ff,#501088);color:#fff;font-size:22px;font-weight:900;letter-spacing:.04em;}
.betting-candidates{display:flex;flex-direction:column;gap:10px;}
.betting-card{border:2px solid #00d8ff;border-radius:14px;padding:10px;background:rgba(5,10,50,.86);}
.betting-card-name{font-size:18px;font-weight:900;margin-bottom:8px;}
.betting-card-amount{font-size:20px;font-weight:900;color:#ffe600;margin-bottom:8px;}
.betting-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.betting-quick button,.betting-vote-btn{min-height:46px;border-radius:12px;border:2px solid #ff2bd6;background:#050b38;color:#fff;font-weight:900;font-size:16px;}
.betting-quick button:active,.betting-vote-btn:active,.betting-main-btn:active{transform:scale(.97);filter:brightness(.75);}
.betting-vote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.betting-vote-btn{min-height:76px;font-size:28px;}
.betting-vote-btn span{display:block;font-size:15px;margin-top:4px;}
.betting-mode .remote{display:none;}


/* === Fix fondo persistente y estado voluntario registrado === */
html,
body.remote-body,
body.login-body{
    background-color:var(--remote-bg-color) !important;
    background-image:var(--remote-bg-image) !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-attachment:fixed !important;
}
.remote-page{
    background:transparent !important;
}
.betting-registered{
    border:2px solid var(--remote-display-border,#00d8ff);
    background:rgba(0,0,0,.45);
    color:#00ff99;
    border-radius:16px;
    padding:18px;
    font-weight:900;
    box-shadow:0 0 18px rgba(0,216,255,.22);
}


/* Fixed footer branding on player remote */
#remoteFooterBrand{
    position: fixed;
    left: 0;
    right: 0;
    bottom: max(env(safe-area-inset-bottom), 6px);
    z-index: 2147483647;
    text-align: center;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .4px;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* MIS PUNTOS */
body.scoreboard-mode .keypad,
body.scoreboard-mode .button-grid,
body.scoreboard-mode .buttons,
body.scoreboard-mode #colorMatchPanel,
body.scoreboard-mode #bettingPanel{
    display:none !important;
}
body.scoreboard-mode #display{
    display:none !important;
}
.scoreboard-panel{
    display:none;
    position:fixed;
    inset:0;
    z-index:80;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:radial-gradient(circle at 50% 20%, rgba(0,216,255,.22), transparent 36%), linear-gradient(145deg,#050712,#10184a 55%,#26083b);
}
.scoreboard-card{
    width:min(92vw,520px);
    min-height:72vh;
    border-radius:32px;
    border:4px solid rgba(255,255,255,.25);
    background:rgba(5,8,22,.88);
    box-shadow:0 0 55px rgba(0,216,255,.32), inset 0 0 35px rgba(255,255,255,.06);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:26px 18px;
    gap:12px;
}
.scoreboard-photo{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    border:6px solid #00d8ff;
    box-shadow:0 0 30px rgba(0,216,255,.6);
    background:#111;
}
.scoreboard-photo-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:72px;
    font-weight:1000;
    color:#fff;
}
.scoreboard-name{
    font-size:clamp(34px,8vw,58px);
    font-weight:1000;
    line-height:1;
    text-transform:uppercase;
    text-shadow:0 0 18px rgba(255,255,255,.25);
    max-width:100%;
    overflow-wrap:anywhere;
}
.scoreboard-points{
    font-size:clamp(72px,18vw,128px);
    font-weight:1000;
    line-height:.88;
    color:#ffe600;
    text-shadow:0 0 24px rgba(255,230,0,.45);
}
.scoreboard-points-label{
    font-size:clamp(18px,4vw,28px);
    font-weight:900;
    letter-spacing:.18em;
    color:#fff;
    opacity:.9;
}
.scoreboard-arrow{
    font-size:clamp(70px,16vw,120px);
    font-weight:1000;
    line-height:.8;
}
.scoreboard-up .scoreboard-arrow{color:#00ff66;text-shadow:0 0 24px rgba(0,255,102,.65);}
.scoreboard-down .scoreboard-arrow{color:#ff3030;text-shadow:0 0 24px rgba(255,48,48,.65);}
.scoreboard-same .scoreboard-arrow{color:#00d8ff;text-shadow:0 0 24px rgba(0,216,255,.65);}
.scoreboard-variation{
    font-size:clamp(24px,6vw,42px);
    font-weight:1000;
}
.scoreboard-position{
    font-size:clamp(22px,5vw,34px);
    font-weight:900;
    color:#dceeff;
}


/* MIS PUNTOS - corrección visibilidad */
body.scoreboard-mode #scoreboardPanel,
.scoreboard-panel{
    opacity:1 !important;
    filter:none !important;
    pointer-events:auto !important;
}

body.scoreboard-mode .scoreboard-card,
body.scoreboard-mode .scoreboard-card *{
    opacity:1 !important;
    filter:none !important;
}

body.scoreboard-mode .scoreboard-panel{
    z-index:9999 !important;
}

body.scoreboard-mode #gameStatus,
body.scoreboard-mode .idle-points{
    width:90vw;
    max-width:400px;
    min-height:20px;
    line-height:20px;
    margin:0 auto 1px;
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,.86);
    text-shadow:0 0 8px rgba(0,216,255,.45);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:0 0 auto;
}

#responseMessage{
    display:none !important;
}


/* STORY_DECISION */
.story-decision-panel{display:none;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;padding:18px;pointer-events:none;}
.story-decision-panel .story-card{width:min(92vw,620px);max-height:58vh;overflow:auto;padding:18px;border-radius:18px;background:rgba(0,0,0,.72);border:2px solid rgba(255,255,255,.22);color:#fff;text-align:center;box-shadow:0 0 24px rgba(0,0,0,.45);}
.story-decision-panel .story-title{font-size:clamp(22px,5vw,34px);font-weight:900;margin-bottom:14px;}
.story-decision-panel .story-text{font-size:clamp(15px,3.5vw,20px);line-height:1.35;margin-bottom:14px;}
.story-decision-panel .story-small{font-size:clamp(13px,3vw,16px);opacity:.88;}
.story-decision-panel .story-wait{font-size:clamp(16px,4vw,22px);font-weight:800;color:#ffd85a;}
.story-decision-panel .story-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;font-size:clamp(14px,3.5vw,19px);}
.story-decision-panel .story-options div{border-radius:14px;padding:12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);}
.story-decision-panel .story-eliminated{border-color:rgba(255,70,70,.7);}
body.story-decision-mode #display{visibility:hidden;}

/* STORY_DECISION mando limpio: solo A/B visibles, sin texto ni display */
body.story-decision-mode #gameStatus,
body.story-decision-mode #responseMessage,
body.story-decision-mode #display,
body.story-decision-mode #storyDecisionPanel{
    display:none !important;
}
body.story-decision-mode .btn:not([data-key="A"]):not([data-key="B"]){
    display:none !important;
}
body.story-decision-mode .btn[data-key="A"],
body.story-decision-mode .btn[data-key="B"]{
    display:flex !important;
}


/* STORY_DECISION fix: mando limpio y botones A/B siempre visibles */
body.story-decision-mode .remote,
body.story-decision-mode .abcd{
    display:flex !important;
}
body.story-decision-mode .abcd{
    width:100% !important;
    flex:1 1 auto !important;
    align-items:stretch !important;
}
body.story-decision-mode .btn[data-key="A"],
body.story-decision-mode .btn[data-key="B"]{
    display:flex !important;
    visibility:visible !important;
}
body.story-decision-mode .btn[data-key="C"],
body.story-decision-mode .btn[data-key="D"],
body.story-decision-mode .btn[data-key="E"],
body.story-decision-mode .btn[data-key="F"],
body.story-decision-mode .buzzer-btn,
body.story-decision-mode .numbers{
    display:none !important;
}
body.story-decision-mode #gameStatus,
body.story-decision-mode #responseMessage,
body.story-decision-mode #display,
body.story-decision-mode #storyDecisionPanel{
    display:none !important;
}


/* Fix final STORY_DECISION: mando A/B limpio y visible */
body.story-decision-mode .remote,
body.story-decision-mode .abcd{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
}
body.story-decision-mode .abcd{
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
}
body.story-decision-mode .btn[data-key="A"],
body.story-decision-mode .btn[data-key="B"]{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
}
body.story-decision-mode .btn[data-key="C"],
body.story-decision-mode .btn[data-key="D"],
body.story-decision-mode .btn[data-key="E"],
body.story-decision-mode .btn[data-key="F"],
body.story-decision-mode .buzzer-area,
body.story-decision-mode .numbers,
body.story-decision-mode #gameStatus,
body.story-decision-mode #responseMessage,
body.story-decision-mode #display,
body.story-decision-mode #storyDecisionPanel{
    display:none !important;
}


/* === STORY_DECISION definitivo: usar A/B grandes estilo QUIZ y pulsables === */
body.story-decision-mode .remote-page{
    justify-content:center !important;
    padding:10px !important;
}
body.story-decision-mode .player-header,
body.story-decision-mode #gameStatus,
body.story-decision-mode #responseMessage,
body.story-decision-mode #display,
body.story-decision-mode #storyDecisionPanel,
body.story-decision-mode .numbers,
body.story-decision-mode .buzzer-area,
body.story-decision-mode .buzzer-btn,
body.story-decision-mode .vote-extra,
body.story-decision-mode .btn[data-key="C"],
body.story-decision-mode .btn[data-key="D"],
body.story-decision-mode .btn[data-key="E"],
body.story-decision-mode .btn[data-key="F"]{
    display:none !important;
}
body.story-decision-mode .remote,
body.story-decision-mode .abcd{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    max-width:430px !important;
    height:min(82dvh,680px) !important;
    min-height:360px !important;
    margin:auto !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:1fr !important;
    gap:14px !important;
    align-items:stretch !important;
    justify-content:center !important;
    pointer-events:auto !important;
}
body.story-decision-mode .btn[data-key="A"],
body.story-decision-mode .btn[data-key="B"]{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    height:100% !important;
    min-height:300px !important;
    border-radius:18px !important;
    font-size:clamp(64px,22vw,130px) !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:auto;
    touch-action:manipulation !important;
}
body.story-decision-mode .btn[data-key="A"]:not(:disabled),
body.story-decision-mode .btn[data-key="B"]:not(:disabled){
    opacity:1 !important;
    filter:none !important;
    cursor:pointer !important;
}
body.story-decision-mode .btn[data-key="A"].disabled,
body.story-decision-mode .btn[data-key="B"].disabled,
body.story-decision-mode .btn[data-key="A"]:disabled,
body.story-decision-mode .btn[data-key="B"]:disabled{
    opacity:.35 !important;
    filter:grayscale(1) !important;
    cursor:not-allowed !important;
}

/* === STORY_DECISION revisión: A/B con tamaño tipo QUIZ, no gigantes === */
body.story-decision-mode .player-header,
body.story-decision-mode #gameStatus,
body.story-decision-mode #responseMessage,
body.story-decision-mode #display,
body.story-decision-mode #storyDecisionPanel,
body.story-decision-mode .numbers,
body.story-decision-mode .buzzer-area,
body.story-decision-mode .buzzer-btn,
body.story-decision-mode .vote-extra,
body.story-decision-mode .btn[data-key="C"],
body.story-decision-mode .btn[data-key="D"],
body.story-decision-mode .btn[data-key="E"],
body.story-decision-mode .btn[data-key="F"]{
    display:none !important;
}
body.story-decision-mode .remote-page{
    justify-content:center !important;
    padding:4px !important;
}
body.story-decision-mode .remote{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    visibility:visible !important;
    opacity:1 !important;
    width:min(92vw,430px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:auto !important;
    padding:10px !important;
    pointer-events:auto !important;
}
body.story-decision-mode .abcd{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    gap:10px !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}
body.story-decision-mode .btn[data-key="A"],
body.story-decision-mode .btn[data-key="B"]{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:min(11dvh,88px) !important;
    min-height:48px !important;
    max-height:88px !important;
    border-radius:999px !important;
    font-size:clamp(28px, 8vw, 52px) !important;
    pointer-events:auto;
    touch-action:manipulation !important;
}
body.story-decision-mode .btn[data-key="A"]:not(:disabled),
body.story-decision-mode .btn[data-key="B"]:not(:disabled){
    opacity:1 !important;
    filter:none !important;
    cursor:pointer !important;
}
body.story-decision-mode .btn[data-key="A"].disabled,
body.story-decision-mode .btn[data-key="B"].disabled,
body.story-decision-mode .btn[data-key="A"]:disabled,
body.story-decision-mode .btn[data-key="B"]:disabled{
    opacity:.38 !important;
    filter:grayscale(1) !important;
    cursor:not-allowed !important;
}


/* === STORY_DECISION diseño mando: igual que QUIZ A/B, con cabecera/display visibles === */
body.story-decision-mode .remote-page{
    justify-content:flex-start !important;
    padding:4px !important;
}
body.story-decision-mode .player-header{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
}
body.story-decision-mode #gameStatus,
body.story-decision-mode #display,
body.story-decision-mode .idle-points{
    width:90vw;
    max-width:400px;
    min-height:20px;
    line-height:20px;
    margin:0 auto 1px;
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,.86);
    text-shadow:0 0 8px rgba(0,216,255,.45);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:0 0 auto;
}

#responseMessage{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
}
body.story-decision-mode #storyDecisionPanel,
body.story-decision-mode .numbers,
body.story-decision-mode .buzzer-area,
body.story-decision-mode .buzzer-btn,
body.story-decision-mode .vote-extra,
body.story-decision-mode .btn[data-key="C"],
body.story-decision-mode .btn[data-key="D"],
body.story-decision-mode .btn[data-key="E"],
body.story-decision-mode .btn[data-key="F"]{
    display:none !important;
}
body.story-decision-mode .remote{
    display:flex !important;
    flex-direction:column !important;
    visibility:visible !important;
    opacity:1 !important;
    width:min(92vw,430px) !important;
    flex:1 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    margin:3px auto 0 !important;
    padding:10px !important;
    justify-content:flex-start !important;
    pointer-events:auto !important;
}
body.story-decision-mode .abcd{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    gap:10px !important;
    width:100% !important;
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}
body.story-decision-mode .btn[data-key="A"],
body.story-decision-mode .btn[data-key="B"]{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:min(11dvh,88px) !important;
    min-height:48px !important;
    max-height:88px !important;
    border-radius:999px !important;
    font-size:clamp(28px, 8vw, 52px) !important;
    pointer-events:auto;
    touch-action:manipulation !important;
}
body.story-decision-mode .btn[data-key="A"]:not(:disabled),
body.story-decision-mode .btn[data-key="B"]:not(:disabled){
    opacity:1 !important;
    filter:none !important;
    cursor:pointer !important;
}
body.story-decision-mode .btn[data-key="A"].disabled,
body.story-decision-mode .btn[data-key="B"].disabled,
body.story-decision-mode .btn[data-key="A"]:disabled,
body.story-decision-mode .btn[data-key="B"]:disabled{
    opacity:.38 !important;
    filter:grayscale(1) brightness(.8) !important;
    cursor:not-allowed !important;
    pointer-events:none !important;
}


/* Aislamiento estricto de paneles por tipo de juego.
   Evita que STORY_DECISION deje restos visuales al pasar a CODES/PRICE/ADVIENTO. */
body.numeric-mode .abcd,
body.numeric-mode .abcd .btn,
body.numeric-mode .buzzer-area,
body.numeric-mode .story-decision-panel{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}
body.numeric-mode .numbers{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}
body.story-decision-mode .numbers,
body.story-decision-mode .buzzer-area{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}
body.story-decision-mode .abcd{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
}
body.story-decision-mode .abcd .btn[data-key="C"],
body.story-decision-mode .abcd .btn[data-key="D"]{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}


/* QUESTION_BET */
body.question-bet-mode .remote{display:none !important;}
.question-bet-panel{width:100%;box-sizing:border-box;}
body.question-bet-mode .betting-title{font-size:18px;line-height:1.1;margin:4px 0 3px;}
body.question-bet-mode .betting-points{font-size:14px;margin:2px 0 4px;}
.qbet-cards{display:flex;flex-direction:column;gap:7px;margin:6px 0;}
.qbet-card{background:rgba(0,0,0,.45);border:1px solid rgba(0,216,255,.55);border-radius:12px;padding:7px 8px;box-shadow:0 0 10px rgba(0,216,255,.16);}
.qbet-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;}
.qbet-card-head{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.1;min-width:0;flex:1;}
.qbet-card-head strong{display:flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#111;border:2px solid currentColor;font-size:18px;}
.qbet-card-head span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qbet-card-amount{flex:0 0 auto;font-size:19px;font-weight:900;text-align:right;margin:0;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.08);white-space:nowrap;}
.qbet-card .betting-quick{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:6px;}
.qbet-card .betting-quick button{min-height:30px;font-size:12px;border-radius:7px;padding:2px 3px;}
body.question-bet-mode .betting-main-btn{margin-top:6px;min-height:42px;font-size:15px;}
.qbet-presenter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px;width:min(1100px,90vw);}
.qbet-presenter-option{background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.28);border-radius:22px;padding:20px;text-align:center;}
.qbet-presenter-option.qbet-correct{border-color:#00ff66;box-shadow:0 0 30px rgba(0,255,102,.35);}
.qbet-key{font-size:52px;font-weight:900;line-height:1;}
.qbet-text{font-size:26px;margin-top:8px;}
.qbet-total{font-size:34px;font-weight:900;margin-top:14px;}
.qbet-players{font-size:18px;opacity:.85;}


.question-bet-panel.qbet-locked .qbet-card,
.question-bet-panel.qbet-locked .betting-main-btn{opacity:.45;filter:grayscale(1);}
.question-bet-panel.qbet-locked button{pointer-events:none;cursor:not-allowed;}

body.question-bet-mode .qbet-result-msg{
    margin:10px auto 0;
    padding:16px 14px;
    border-radius:16px;
    font-size:22px;
    font-weight:900;
    line-height:1.15;
    text-align:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.25);
}
body.question-bet-mode .qbet-result-win{border-color:rgba(0,255,102,.65);box-shadow:0 0 18px rgba(0,255,102,.20);}
body.question-bet-mode .qbet-result-loss{border-color:rgba(255,70,70,.65);box-shadow:0 0 18px rgba(255,70,70,.18);}
body.question-bet-mode .qbet-result-neutral{border-color:rgba(255,255,255,.35);}


/* ADVIENTO: debe mostrar únicamente el teclado numérico y limpiar cualquier resto visual de otros juegos. */
body.adviento-mode .abcd,
body.adviento-mode .buzzer-area,
body.adviento-mode .story-decision-panel,
body.adviento-mode .color-match-panel,
body.adviento-mode .question-bet-panel,
body.adviento-mode .betting-panel{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}
body.adviento-mode.numeric-mode .remote{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
}
body.adviento-mode.numeric-mode .numbers{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}
body.adviento-mode:not(.numeric-mode) .numbers{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* MIMICA */
body.mimica-mode .remote{ display:none !important; }
body.mimica-mode #gameStatus,
body.mimica-mode #display,
body.mimica-mode .idle-points{
    width:90vw;
    max-width:400px;
    min-height:20px;
    line-height:20px;
    margin:0 auto 1px;
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,.86);
    text-shadow:0 0 8px rgba(0,216,255,.45);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:0 0 auto;
}

#responseMessage{ display:none !important; }
.mimica-panel{ width:100%; max-width:520px; margin:0 auto; padding:10px; box-sizing:border-box; }
.mimica-title{ font-size:22px; font-weight:900; text-align:center; margin:8px 0 14px; line-height:1.15; }
.mimica-main-btn{ width:100%; min-height:150px; font-size:30px !important; font-weight:900; border-radius:24px; }
.mimica-main-btn.mimica-volunteered{ background:linear-gradient(160deg,#00c853,#009624) !important; color:#fff !important; opacity:1 !important; filter:none !important; }
.mimica-help{ margin-top:12px; text-align:center; font-size:18px; font-weight:800; color:rgba(255,255,255,.92); }
.mimica-selected{ min-height:58vh; border-radius:28px; background:linear-gradient(160deg,#00c853,#009624); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; box-shadow:0 18px 40px rgba(0,0,0,.28); }
.mimica-selected-title{ font-size:34px; font-weight:1000; line-height:1.05; }
.mimica-selected-sub{ font-size:22px; margin-top:12px; font-weight:800; }
.mimica-quiz-rows{ display:flex; flex-direction:column; gap:10px; }
.mimica-option-row{ border:0; border-radius:18px; min-height:76px; padding:10px 12px; display:flex; align-items:center; gap:14px; color:#fff; font-weight:900; box-shadow:0 8px 20px rgba(0,0,0,.22); }
.mimica-option-row:disabled{ opacity:.55; filter:grayscale(.35); }
.mimica-option-key{ width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:28px; flex:0 0 auto; }
.mimica-option-text{ font-size:20px; line-height:1.1; text-align:left; }
.mimica-a{ background:#16a34a; }
.mimica-b{ background:#dc2626; }
.mimica-c{ background:#d6a900; color:#1b1b1b; }
.mimica-c .mimica-option-key{ background:rgba(0,0,0,.12); }
.mimica-d{ background:#2563eb; }
.mimica-candidate-list{ display:flex; flex-direction:column; gap:10px; }
.mimica-candidate-row{ display:flex; align-items:center; gap:12px; border-radius:18px; padding:10px; background:rgba(255,255,255,.08); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.mimica-photo{ width:58px; height:58px; border-radius:16px; object-fit:cover; background:#333; flex:0 0 auto; }
.mimica-placeholder{ display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; color:#fff; }

/* MÍMICA: durante la votación reutiliza exactamente el mando A/B/C/D del QUIZ */
body.mimica-mode.mimica-voting-mode .remote{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
}
body.mimica-mode.mimica-voting-mode #gameStatus,
body.mimica-mode.mimica-voting-mode #display,
body.mimica-mode.mimica-voting-mode .idle-points{
    width:90vw;
    max-width:400px;
    min-height:20px;
    line-height:20px;
    margin:0 auto 1px;
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,.86);
    text-shadow:0 0 8px rgba(0,216,255,.45);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:0 0 auto;
}

#responseMessage{
    display:block !important;
}
body.mimica-mode.mimica-voting-mode #mimicaPanel{
    display:none !important;
}
body.mimica-mode.mimica-voting-mode .abcd{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
}
body.mimica-mode.mimica-voting-mode .numbers,
body.mimica-mode.mimica-voting-mode .buzzer-area{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
}

/* IMPOSTOR restore */
body.impostor-mode #impostorPanel{display:block;}
.impostor-panel .impostor-vote-btn{
    width:100%;
    text-align:left;
    border:0;
    cursor:pointer;
}
.impostor-panel .impostor-vote-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}


#welcomeMessage{
    display:none;
}

body.welcome-mode .remote-page{
    padding:4px 4px clamp(16px,5vh,54px);
}

body.welcome-mode #gameStatus,
body.welcome-mode #display,
body.welcome-mode #responseMessage,
body.welcome-mode #idlePoints,
body.welcome-mode .remote,
body.welcome-mode .betting-panel,
body.welcome-mode .color-match-panel,
body.welcome-mode .mimica-panel,
body.welcome-mode .impostor-panel{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
}

body.welcome-mode #welcomeMessage{
    width:min(92vw, 520px);
    min-height:clamp(360px,64vh,620px);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin:auto auto 0;
    padding:clamp(24px,6vw,44px) clamp(18px,5vw,36px);
    border-radius:34px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,0,180,.34), transparent 34%),
        radial-gradient(circle at 14% 100%, rgba(0,216,255,.24), transparent 40%),
        linear-gradient(160deg, rgba(18,5,45,.95), rgba(2,5,28,.96) 58%, rgba(42,0,63,.94));
    border:4px solid rgba(255,255,255,.28);
    box-shadow:
        0 0 0 2px rgba(255,0,190,.18),
        0 0 34px rgba(255,0,190,.34),
        0 24px 58px rgba(0,0,0,.62),
        inset 0 0 38px rgba(255,255,255,.08);
    color:#fff;
    overflow:hidden;
    position:relative;
}

body.welcome-mode #welcomeMessage::before{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:26px;
    border:2px solid rgba(0,216,255,.22);
    pointer-events:none;
}

body.welcome-mode .welcome-card-inner{
    width:100%;
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(18px,4vh,34px);
}

body.welcome-mode .welcome-title{
    max-width:100%;
    color:#ffffff;
    font-size:clamp(44px,12vw,84px);
    line-height:.92;
    font-weight:1000;
    letter-spacing:.01em;
    text-transform:uppercase;
    text-shadow:
        0 0 10px rgba(255,255,255,.38),
        0 0 22px rgba(255,0,190,.7),
        0 7px 0 rgba(0,0,0,.38);
    text-wrap:balance;
    overflow-wrap:break-word;
}

body.welcome-mode .welcome-body{
    max-width:92%;
    color:#eafcff;
    font-size:clamp(25px,6.5vw,43px);
    line-height:1.08;
    font-weight:900;
    text-shadow:0 0 14px rgba(0,216,255,.5), 0 4px 0 rgba(0,0,0,.35);
    text-wrap:balance;
    overflow-wrap:break-word;
}

body.welcome-mode .welcome-line + .welcome-line{
    margin-top:.35em;
}


/* Resultado personal al terminar un juego */
body.player-result-mode .remote,
body.player-result-mode .abcd,
body.player-result-mode .numbers,
body.player-result-mode .buzzer-area,
body.player-result-mode .color-match-panel,
body.player-result-mode .betting-panel,
body.player-result-mode .mimica-panel,
body.player-result-mode .impostor-panel{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
}
body.player-result-mode #gameStatus{
    font-size:clamp(18px,5vw,28px);
    line-height:1.15;
    white-space:normal;
    min-height:30px;
}
body.player-result-mode #display{
    min-height:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(42px,15vw,78px);
    font-weight:1000;
    border-radius:28px;
}
body.player-result-mode #responseMessage{
    display:block !important;
    height:auto;
    min-height:54px;
    line-height:1.18;
    white-space:normal;
    overflow:visible;
    font-size:clamp(18px,5vw,26px);
    color:#fff;
    text-shadow:0 0 12px rgba(0,216,255,.6);
}


/* QUIZ: tras enviar respuesta, desaparece el mando hasta cerrar la pregunta.
   Evita cambios de respuesta y no revela puntos/correcto hasta el cierre. */
body.quiz-submitted-mode .remote,
body.quiz-submitted-mode .abcd,
body.quiz-submitted-mode .numbers,
body.quiz-submitted-mode .buzzer-area{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
}
body.quiz-submitted-mode #display{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
}
body.quiz-submitted-mode #responseMessage{
    min-height:34px;
    font-size:clamp(20px,5vw,32px);
    font-weight:900;
}


/* Resultado personal tiene prioridad sobre el estado neutro de QUIZ enviado.
   Sin esto, al cerrar una pregunta el body podía tener ambas clases y el CSS
   de quiz-submitted-mode ocultaba el cuadro grande de puntos. */
body.player-result-mode.quiz-submitted-mode #display{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
}
body.player-result-mode.quiz-submitted-mode #responseMessage{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
}