:root{
  --bg:#141126; --card:#1f1b3a; --card2:#272150; --txt:#f2efff; --mut:#a79fd6;
  --red:#e21b3c; --blue:#1368ce; --yel:#d89e00; --grn:#26890c; --acc:#7c5cff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{margin:0; font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif; background:var(--bg); color:var(--txt); min-height:100vh;}
.wrap{max-width:860px; margin:0 auto; padding:20px 16px 60px;}
h1,h2{margin:.4em 0;}
.mut{color:var(--mut);}
.card{background:var(--card); border-radius:14px; padding:18px; margin:12px 0; box-shadow:0 4px 18px rgba(0,0,0,.35);}
button{font:inherit; cursor:pointer; border:0; border-radius:10px; padding:12px 18px; font-weight:700;}
.btn{background:var(--acc); color:#fff;}
.btn.ghost{background:transparent; border:2px solid var(--acc); color:var(--txt);}
.btn.big{font-size:1.25rem; padding:16px 34px;}
.btn:disabled{opacity:.45; cursor:default;}
input,select,textarea{font:inherit; width:100%; padding:12px; border-radius:10px; border:2px solid #3a3270; background:#171431; color:var(--txt); margin:6px 0;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--acc);}
textarea{resize:vertical; min-height:64px;}
.pin{font-size:4rem; letter-spacing:.5rem; text-align:center; font-weight:800; color:#fff;}
.screen{display:none;}
.screen.on{display:block; animation:pop .25s ease;}
@keyframes pop{from{transform:scale(.97); opacity:.4;} to{transform:scale(1); opacity:1;}}
/* opciones del jugador */
.opts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.opt{min-height:96px; font-size:1.05rem; color:#fff; border-radius:12px; font-weight:700; box-shadow:0 4px 0 rgba(0,0,0,.35);}
.opt:nth-child(1){background:var(--red);} .opt:nth-child(2){background:var(--blue);}
.opt:nth-child(3){background:var(--yel);} .opt:nth-child(4){background:var(--grn);}
.opt.sel{outline:4px solid #fff;}
.opt.right{outline:5px solid #2dff7a;}
.opt.dim{opacity:.35;}
.qtext{font-size:1.5rem; font-weight:800; background:#fff; color:#1b1b2f; border-radius:12px; padding:18px; margin:10px 0;}
.qimg{max-width:100%; max-height:280px; border-radius:10px; margin-top:12px; display:block; margin-left:auto; margin-right:auto;}
.qimgbox{margin:8px 0;}
.qfile{margin:4px 0;}
.tbar{height:14px; background:#0d0b1e; border-radius:8px; overflow:hidden; margin:8px 0;}
.tbar>div{height:100%; background:linear-gradient(90deg,#2dff7a,#ffe14d,#ff5b5b); width:100%; transition:width .2s linear;}
.tnum{font-size:2rem; font-weight:800; text-align:center;}
/* tablero */
table{width:100%; border-collapse:collapse;}
th,td{padding:10px 8px; text-align:left; border-bottom:1px solid #35306b;}
th{color:var(--mut); font-size:.85rem; text-transform:uppercase;}
tr.me td{color:#ffe14d; font-weight:800;}
.medal{font-size:1.3rem;}
.countbar{display:flex; align-items:center; gap:10px; margin:6px 0;}
.countbar .lbl{width:26px; font-weight:800;}
.countbar .bar{height:22px; border-radius:6px; background:var(--acc); min-width:4px;}
.qcard{background:var(--card2); border-radius:12px; padding:14px; margin:10px 0;}
.qcard .row{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.pill{display:inline-block; background:#0d0b1e; border-radius:20px; padding:6px 14px; margin:3px; font-weight:600;}
.bigpin{background:#0d0b1e; border-radius:18px; padding:24px; text-align:center; margin:14px 0;}
.bigpin .pin{font-size:5rem;}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0;}
.roster-list{max-height:260px; overflow:auto; border:2px solid #3a3270; border-radius:10px; margin-top:6px;}
.roster-list div{padding:11px 12px; border-bottom:1px solid #2c2760; cursor:pointer;}
.roster-list div:hover{background:var(--card2);}
.center{text-align:center;}
.lobbydot{display:inline-block; width:10px; height:10px; border-radius:50%; background:#2dff7a; margin-right:8px; animation:blink 1.2s infinite;}
@keyframes blink{50%{opacity:.25;}}
.note{font-size:.9rem; color:var(--mut);}
.kbd{background:#0d0b1e; padding:2px 8px; border-radius:6px; font-family:monospace;}