/*
| Archivo: styles-movil.css
| Versión: 2.2.1
| Descripción: Estilos para la pantalla pública adaptados para móvil.
*/

/* Estilos base */
body {
    margin:0;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Open Sans','Helvetica Neue',sans-serif;
    background:#0b0f1a url('imagenes/pantalla-bg.jpg') center/cover no-repeat fixed;
    overflow-x: hidden;
}
.wrap{max-width:1400px;margin:0 auto;padding:18px}
.top-score{display:flex;justify-content:center;align-items:center;margin-bottom:16px}
.top-pill{
    min-width:260px;text-align:center;font-weight:900;
    font-size: clamp(60px, 8vw, 128px);
    background:#181c2f;color:#fff;border-radius:16px;padding:12px 20px;
    box-shadow:0 6px 22px rgba(0,0,0,.4)
}
.question{
    background:#121526;border-radius:18px;padding:22px 24px;margin-bottom:16px;  
    border:3px solid #f2c230; box-shadow:0 0 0 3px rgba(0,0,0,.25) inset, 0 8px 28px rgba(0,0,0,.35);
    text-align:center; font-weight:900; letter-spacing:.6px; line-height:1.18;
    font-size: clamp(28px, 3.8vw, 56px);
}
.board{display:grid;grid-template-columns:300px 1fr 300px;gap:16px;align-items:start}
.team{
    --t-r: 50; --t-g: 90; --t-b: 200;
    background: rgba(8,10,20,.65);
    border-radius:16px; padding:14px 10px; position:relative;
    box-shadow:0 8px 24px rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.08);
    transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.team.active {
    background: linear-gradient(180deg, rgba(var(--t-r),var(--t-g),var(--t-b),.7), rgba(var(--t-r),var(--t-g),var(--t-b),.5));
    border-color: rgba(var(--t-r),var(--t-g),var(--t-b), .95);
    box-shadow: 0 0 30px rgba(var(--t-r),var(--t-g),var(--t-b), .6);
}
.team .name, .team .score{
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.team .name{
    font-weight:900;text-align:center;letter-spacing:1px;margin:6px 0 4px;
    font-size: clamp(32px, 3.6vw, 52px);
}
.team-logo{display:flex;justify-content:center;align-items:center;margin:6px 0 10px}
.team-logo img{max-width:320px;max-height:160px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.score{font-weight:900;font-size: clamp(64px, 8vw, 136px); text-align:center; line-height:1; margin:10px 0 4px}
.xtray{display:flex;gap:10px;justify-content:center;margin-top:6px}
.xbox{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:900;
        background:#333333;
        color:#0f1326;
        border:2px solid rgba(255,255,255,.12)}
:root{ --ac:#3b3d63; --ac-r:59; --ac-g:61; --ac-b:99; }
.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.answer-card{
    background: linear-gradient(0deg, rgba(var(--ac-r),var(--ac-g),var(--ac-b),0.18), rgba(var(--ac-r),var(--ac-g),var(--ac-b),0.18)),
              rgba(10,13,24,.75);
    border-radius:16px; padding:12px 14px;
    border:3px solid var(--ac);
    box-shadow:0 0 0 2px rgba(0,0,0,.25) inset, 0 6px 22px rgba(0,0,0,.35);
    display:grid; grid-template-columns:auto 110px; align-items:center; min-height:98px;
}
.txt{font-weight:600;font-size: clamp(20px, 2.4vw, 30px); letter-spacing:.4px; color: #F2C230;}
.hidden{opacity:.65;filter:saturate(.2)}
.pts{font-weight:900;text-align:right;font-size: clamp(50px, 5.2vw, 30px)}
.foot{display:flex;gap:10px;justify-content:center;margin-top:10px}
.chip{background:#171bd;border:1px solid rgba(255,255,255,.12);padding:6px 12px;border-radius:999px;font-size:12px;opacity:.85}

/* MEDIA QUERIES para adaptación a móviles */
@media (max-width: 768px) {
    .wrap { padding: 10px; }
    .top-pill {
        min-width: 150px; padding: 8px 16px;
        font-size: clamp(36px, 10vw, 80px);
    }
    .question {
        font-size: clamp(24px, 5vw, 40px);
        padding: 18px;
    }
    .board {
        grid-template-columns: 1fr; /* Apilamiento en una sola columna */
        gap: 20px;
    }
    .answers {
        grid-template-columns: 1fr; /* Respuestas en una sola columna */
        gap: 10px;
    }
    .team { padding: 12px; }
    .team .name { font-size: clamp(28px, 6vw, 48px); }
    .score { font-size: clamp(54px, 12vw, 100px); }
    .team-logo img { max-width: 200px; max-height: 100px; }
    .xbox { width: 36px; height: 36px; }
    .answer-card {
        padding: 10px 12px;
        min-height: 80px;
        grid-template-columns: auto 80px;
    }
    .txt { font-size: clamp(18px, 4vw, 26px); }
    .pts { font-size: clamp(28px, 6vw, 40px); }
    .foot {
        flex-wrap: wrap; justify-content: center; gap: 8px;
    }
    .chip { font-size: 10px; padding: 5px 10px; }
}