:root{
  --c0:#e21b3c; --c1:#1368ce; --c2:#d89e00; --c3:#26890c;
  --bg:#46178f; --bg2:#2d0f5c; --ink:#1f1235; --card:#fff;
  --shadow:0 4px 0 rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; color:var(--ink);
  /* Es una interfaz de toques: sin seleccion de texto accidental,
     sin resalte azul al pulsar y sin el retardo del doble toque. */
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(160deg,var(--bg) 0%,var(--bg2) 100%);
  display:flex; flex-direction:column; align-items:center;
}
.wrap{width:100%; max-width:1100px; padding:16px; flex:1; display:flex; flex-direction:column}
.center{justify-content:center; align-items:center; text-align:center}
section.center{display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1}
h1,h2{margin:0 0 12px}
.brand{color:#fff; font-size:2rem; font-weight:800; letter-spacing:-.5px; margin:18px 0 6px; text-shadow:var(--shadow)}
.brand small{display:block; font-size:.9rem; font-weight:600; opacity:.75; letter-spacing:2px}
.card{background:var(--card); border-radius:12px; padding:22px; box-shadow:0 10px 25px rgba(0,0,0,.25); width:100%}
.card.narrow{max-width:420px; margin:0 auto}
input,select{
  width:100%; padding:14px; font-size:1.1rem; font-weight:700; text-align:center;
  border:3px solid #e0e0e0; border-radius:6px; outline:none; font-family:inherit;
}
input:focus,select:focus{border-color:#888}
button{
  font-family:inherit; font-weight:800; font-size:1.05rem; color:#fff; cursor:pointer;
  background:#333; border:none; border-radius:6px; padding:14px 20px;
  box-shadow:var(--shadow); transition:transform .06s;
}
button:active{transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.25)}
button:disabled{opacity:.45; cursor:not-allowed}
button.primary{background:#26890c; width:100%; margin-top:12px}
.row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.msg{color:#e21b3c; font-weight:700; min-height:22px; margin-top:10px}
.hint{color:#fff; opacity:.8; margin-top:14px; font-size:.9rem}

/* ---------- PIN y lobby ---------- */
.pinbox{background:#fff; border-radius:12px; padding:14px 26px; text-align:center; box-shadow:var(--shadow)}
.pinbox .label{font-size:.85rem; font-weight:700; color:#666; letter-spacing:1px}
.pin{font-size:3.4rem; font-weight:900; letter-spacing:8px; line-height:1.1}
.players{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:22px 0}
.chip{background:#fff; color:var(--ink); font-weight:800; padding:10px 16px; border-radius:8px; box-shadow:var(--shadow); animation:pop .25s}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.count{color:#fff; font-size:1.2rem; font-weight:800}

/* ---------- pregunta ---------- */
.qhead{display:flex; justify-content:space-between; align-items:center; gap:12px; color:#fff; font-weight:800; margin-bottom:8px}
.qtext{background:#fff; border-radius:10px; padding:26px; font-size:1.8rem; font-weight:800; text-align:center; box-shadow:var(--shadow)}
.timer{width:64px; height:64px; border-radius:50%; background:#fff; color:var(--ink);
  display:grid; place-items:center; font-size:1.6rem; font-weight:900; flex:0 0 auto}
.bar{height:10px; background:rgba(255,255,255,.25); border-radius:6px; overflow:hidden; margin:12px 0}
.bar > i{display:block; height:100%; background:#fff; width:100%; transition:width 1s linear}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.opt{
  display:flex; align-items:center; gap:14px; padding:20px; border-radius:8px;
  color:#fff; font-size:1.25rem; font-weight:800; text-align:left; box-shadow:var(--shadow);
  border:none; width:100%; min-height:96px;
}
.opt[data-c="0"]{background:var(--c0)} .opt[data-c="1"]{background:var(--c1)}
.opt[data-c="2"]{background:var(--c2)} .opt[data-c="3"]{background:var(--c3)}
.opt.dim{opacity:.35}
.opt .cnt{margin-left:auto; background:rgba(0,0,0,.25); padding:4px 12px; border-radius:20px; font-size:1rem}
.shape{width:30px; height:30px; background:#fff; flex:0 0 auto}
.shape.s0{clip-path:polygon(50% 0,100% 100%,0 100%)}
.shape.s1{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.shape.s2{border-radius:50%}
.shape.s3{border-radius:3px}

/* ---------- resultados ---------- */
.verdict{font-size:2.2rem; font-weight:900; color:#fff; margin:10px 0}
.explain{background:#fff; border-radius:10px; padding:16px; margin-top:14px; font-weight:600; line-height:1.5}
.board{list-style:none; padding:0; margin:16px 0 0; width:100%; max-width:520px}
.board li{display:flex; gap:12px; background:#fff; border-radius:8px; padding:12px 16px; margin-bottom:8px; font-weight:800; box-shadow:var(--shadow)}
.board li .pts{margin-left:auto}
.podium{display:flex; align-items:flex-end; justify-content:center; gap:14px; margin:24px 0}
.podium div{background:#fff; border-radius:10px 10px 0 0; padding:14px; min-width:130px; text-align:center; font-weight:900; box-shadow:var(--shadow)}
.podium .p1{height:190px; background:#ffd400} .podium .p2{height:150px} .podium .p3{height:120px}
.big{font-size:1.6rem}
[hidden]{display:none!important}
@media(max-width:640px){
  .qtext{font-size:1.25rem; padding:16px}
  .opt{font-size:1rem; padding:14px; min-height:76px}
  .pin{font-size:2.6rem; letter-spacing:5px}
}

/* El mando debe llenar la pantalla del movil, no quedar flotando en el centro */


input{-webkit-user-select:text; user-select:text}

/* ---------- opciones pulsables del jugador ---------- */
button.opt{
  font-family:inherit; cursor:pointer; text-align:left;
  transition:transform .06s, opacity .15s, outline-color .15s;
}
button.opt:hover{filter:brightness(1.08)}
.opt.sel{outline:5px solid #fff; outline-offset:-5px; transform:scale(.98)}
.opt.off{opacity:.3}
.opt.ok{outline:5px solid #fff; outline-offset:-5px}     /* la correcta */
.opt.bad{outline:5px solid #1f1235; outline-offset:-5px} /* la que marco el jugador */
#v-pad, #v-fb{width:100%}
#fb-opts{margin-top:10px}
.verdict{margin:14px 0 4px}