/* ============================================================
   QuizLive CLEI — tema de juego (v2)
   Paleta: los 4 colores de opción son identidad fija (A–D) y van
   siempre acompañados de forma + letra, nunca solo color.
   Los gráficos de magnitud usan un solo tono (oro = puntos,
   cian = precisión), nunca arcoíris.
   ============================================================ */
:root{
  /* superficies */
  --bg1:#200746; --bg2:#4c1a9e; --bg3:#7a3ce0;
  --surf:rgba(255,255,255,.10); --surf2:rgba(255,255,255,.16);
  --surf-solid:#241552; --surf-solid2:#2e1a6b;
  --line:rgba(255,255,255,.14);
  /* tinta */
  --txt:#ffffff; --mut:rgba(255,255,255,.74); --dim:rgba(255,255,255,.46);
  /* identidad de las 4 opciones (+ formas y letras como refuerzo) */
  --red:#e21b3c; --blue:#1368ce; --yel:#ffc400; --grn:#1e9e4b;
  --red2:#ff4d6d; --blue2:#2f8cff; --yel2:#ffd54d; --grn2:#2dd36f;
  /* acentos y series de magnitud */
  --acc:#ff3d81; --acc2:#ff7ab0;
  --gold:#ffd23f; --gold-d:#c98a00;          /* magnitud: puntos */
  --cyan:#22d3ee; --cyan-d:#0e7490;          /* magnitud: precisión */
  --ok:#2dd36f; --bad:#ff5b6e; --warn:#ffb020;
  --silver:#dfe3f2; --bronze:#e09a5a;
  --shadow:0 8px 0 rgba(0,0,0,.28);
  --shadow-soft:0 14px 40px rgba(0,0,0,.35);
  --radius:16px; --radius-lg:22px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:'Baloo 2','Fredoka','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--txt); min-height:100vh;
  background:
    radial-gradient(1100px 760px at 12% -8%, rgba(255,61,129,.30), transparent 60%),
    radial-gradient(900px 700px at 92% 8%, rgba(34,211,238,.22), transparent 62%),
    radial-gradient(1000px 800px at 50% 110%, rgba(255,210,63,.16), transparent 60%),
    linear-gradient(165deg,var(--bg1),var(--bg2) 55%,var(--bg3));
  background-attachment:fixed; overflow-x:hidden;
}

/* ---------- figuras flotantes del fondo ---------- */
.bg-decor{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.bg-decor span{position:absolute; display:block; opacity:.15; animation:floaty 14s ease-in-out infinite;}
.bg-decor .c1{width:130px; height:130px; border-radius:50%; background:#ff5b8f; top:8%; left:5%;}
.bg-decor .c2{width:74px; height:74px; border-radius:50%; background:#4de0ff; top:15%; right:9%; animation-delay:-2s;}
.bg-decor .t1{width:0; height:0; border-left:58px solid transparent; border-right:58px solid transparent; border-bottom:98px solid #ffe14d; top:60%; left:3%; animation-delay:-4s;}
.bg-decor .s1{width:90px; height:90px; background:#6bffa0; border-radius:20px; transform:rotate(18deg); bottom:11%; right:6%; animation-delay:-6s;}
.bg-decor .r1{width:124px; height:52px; background:#ff8ad0; border-radius:26px; transform:rotate(-24deg); top:43%; right:23%; animation-delay:-3s;}
.bg-decor .c3{width:46px; height:46px; border-radius:50%; background:#b18cff; bottom:29%; left:21%; animation-delay:-8s;}
.bg-decor .t2{width:0; height:0; border-left:36px solid transparent; border-right:36px solid transparent; border-bottom:60px solid #4de0ff; top:70%; right:2%; animation-delay:-5s;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-36px) rotate(14deg);}}

.wrap{position:relative; z-index:1; max-width:980px; margin:0 auto; padding:18px 16px 90px;}

/* ---------- logo ---------- */
.logo{text-align:center; font-weight:800; font-size:2.1rem; margin:6px 0 4px; letter-spacing:.5px;
  text-shadow:0 3px 0 rgba(0,0,0,.25);}
.logo-sub{font-weight:600; color:var(--gold);}
.logo .bolt{display:inline-block; animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{50%{transform:translateY(-4px) rotate(-6deg);}}

h1,h2,h3,h4{font-weight:800; line-height:1.2;}
h3{margin:2px 0 10px;}
.mut{color:var(--mut);} .dim{color:var(--dim);}
.note{font-size:.92rem; color:var(--mut);}
.center{text-align:center;}
.hr{height:1px; background:var(--line); margin:16px 0;}

/* ---------- tarjetas ---------- */
.card{background:var(--surf); border:1px solid var(--line); backdrop-filter:blur(10px);
  border-radius:var(--radius); padding:20px; margin:14px 0; box-shadow:var(--shadow);}
.card.tight{padding:14px;}
.card h3 .mut{font-weight:600; font-size:.9rem;}

/* ---------- botones ---------- */
button{font:inherit; cursor:pointer; border:0; border-radius:12px; padding:13px 20px; font-weight:700;
  letter-spacing:.2px; transition:transform .08s ease, filter .15s ease, box-shadow .08s ease;}
button:active{transform:translateY(3px);}
.btn{background:linear-gradient(180deg,var(--acc2),var(--acc)); color:#fff; box-shadow:0 5px 0 #b31d57;}
.btn:hover{filter:brightness(1.08);}
.btn.ghost{background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.35); color:var(--txt); box-shadow:none;}
.btn.ghost:hover{background:rgba(255,255,255,.2);}
.btn.big{font-size:1.25rem; padding:17px 38px; border-radius:14px;}
.btn.gold{background:linear-gradient(180deg,#ffe14d,#ffb300); color:#4a2a00; box-shadow:0 5px 0 #b57a00;}
.btn.cyan{background:linear-gradient(180deg,#67e8f9,#06b6d4); color:#06323c; box-shadow:0 5px 0 #0b6d80;}
.btn.sm{padding:9px 14px; font-size:.92rem; border-radius:10px;}
.btn:disabled{opacity:.45; cursor:default; transform:none;}
.btn .k{font-size:.72rem; opacity:.75; font-weight:700; margin-left:6px;}

/* ---------- inputs ---------- */
input,select,textarea{font:inherit; width:100%; padding:13px 14px; border-radius:12px;
  border:2px solid rgba(255,255,255,.22); background:rgba(0,0,0,.22); color:var(--txt); margin:7px 0;}
input::placeholder,textarea::placeholder{color:var(--dim);}
input:focus,select:focus,textarea:focus{outline:none; border-color:#fff; background:rgba(0,0,0,.3);}
textarea{resize:vertical; min-height:68px;}
select option{color:#111;}
:focus-visible{outline:3px solid var(--cyan); outline-offset:2px;}

/* ---------- pantallas ---------- */
.screen{display:none;}
.screen.on{display:block; animation:pop .3s cubic-bezier(.2,.8,.2,1);}
@keyframes pop{from{transform:scale(.96) translateY(8px); opacity:0;} to{transform:none; opacity:1;}}

/* ---------- PIN ---------- */
.pinbox{background:rgba(0,0,0,.25); border-radius:var(--radius-lg); padding:28px; text-align:center;}
.pin{font-size:4.2rem; letter-spacing:.55rem; text-align:center; font-weight:800; color:#fff;
  text-shadow:0 4px 0 rgba(0,0,0,.3);}
.pin-input{font-size:2.4rem; text-align:center; letter-spacing:.4rem; font-weight:800;}

/* ---------- roster ---------- */
.roster-list{max-height:270px; overflow:auto; border:2px solid rgba(255,255,255,.2); border-radius:12px; margin-top:8px;}
.roster-list div{padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; font-weight:600;}
.roster-list div:hover{background:rgba(255,255,255,.16);}
.roster-list div.sel{background:var(--acc);}

/* ---------- personalización del muñeco ---------- */
.picker{display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:start;}
.picker .preview{background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:14px; text-align:center;}
.picker .preview .mune{width:150px; height:auto; animation:bob2 2.8s ease-in-out infinite;}
.picker .rows{display:grid; gap:12px;}
.prow .plab{font-size:.84rem; font-weight:700; color:var(--mut); text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:5px;}
.swatches{display:flex; flex-wrap:wrap; gap:7px;}
.sw{width:38px; height:38px; border-radius:11px; border:2px solid rgba(255,255,255,.25);
  cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); font-size:1.05rem; box-shadow:none; overflow:hidden;}
.sw:hover{border-color:#fff;}
.sw.on{border-color:#fff; box-shadow:0 0 0 3px rgba(34,211,238,.55); transform:translateY(-2px);}
.sw.on:active{transform:translateY(0);}
.sw svg{width:100%; height:100%; display:block;}

/* ---------- lobby ---------- */
.lobbydot{display:inline-block; width:12px; height:12px; border-radius:50%; background:#2dff7a; margin-right:9px;
  animation:blink 1.2s infinite; box-shadow:0 0 12px #2dff7a;}
@keyframes blink{50%{opacity:.3;}}
.pill{display:inline-block; background:rgba(0,0,0,.3); border-radius:22px; padding:7px 14px; margin:4px;
  font-weight:700; animation:pop .35s ease;}
.pill b{color:var(--gold);}
.pill.me{background:var(--acc);}
.pill .mini-ava{margin-right:7px;}

/* ---------- pregunta / cronómetro ---------- */
.qtop{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 2px;}
.qnum{font-weight:800; color:var(--gold); font-size:1.1rem;}
.tnum{font-size:2.4rem; font-weight:800; text-align:center; line-height:1; transition:color .2s;
  font-variant-numeric:tabular-nums;}
.tnum.low{color:#ff5b5b; animation:pulse .5s infinite;}
@keyframes pulse{50%{transform:scale(1.18);}}
.tbar{height:16px; background:rgba(0,0,0,.35); border-radius:10px; overflow:hidden; margin:8px 0;}
.tbar>div{height:100%; background:linear-gradient(90deg,#2dd36f,#ffd54d,#ff4d6d); width:100%;
  border-radius:10px; transition:width .15s linear; box-shadow:0 0 12px rgba(45,211,111,.6);}
.tbar>div.low{box-shadow:0 0 14px rgba(255,77,109,.8);}
.tbar.paused>div{filter:grayscale(.75) brightness(.8);}

.qtext{font-size:1.55rem; font-weight:800; background:#fff; color:#241552; border-radius:14px; padding:20px;
  margin:12px 0; box-shadow:var(--shadow); line-height:1.35;}
.qimg{max-width:100%; max-height:300px; border-radius:12px; margin:14px auto 0; display:block;}

/* ---------- opciones (identidad: forma + letra + color) ---------- */
.opts{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
.opt{position:relative; display:flex; align-items:center; gap:12px; min-height:96px; font-size:1.08rem;
  color:#fff; border-radius:14px; font-weight:800; text-align:left; padding:16px; box-shadow:var(--shadow);
  transition:transform .08s ease, opacity .3s ease, filter .2s ease; line-height:1.25; border:0;}
.opt .oshape{flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center;}
.opt .oshape svg{width:34px; height:34px; fill:#fff; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));}
.opt .oletter{position:absolute; top:7px; right:11px; font-size:.8rem; opacity:.75; font-weight:800;}
.opt .otext{flex:1;}
.opt.o0{background:linear-gradient(180deg,var(--red2),var(--red));}
.opt.o1{background:linear-gradient(180deg,var(--blue2),var(--blue));}
.opt.o2{background:linear-gradient(180deg,var(--yel2),var(--yel)); color:#4a2a00;}
.opt.o2 .oshape svg{fill:#4a2a00;}
.opt.o3{background:linear-gradient(180deg,var(--grn2),var(--grn));}
.opt:active{transform:translateY(4px);}
.opt.sel{outline:4px solid #fff; transform:scale(1.02);}
.opt.right{outline:5px solid #2dff7a; filter:brightness(1.12); animation:rightpop .5s ease;}
.opt.wrong{outline:5px solid #ff5b5b;}
.opt.dim{opacity:.35; filter:grayscale(.4);}
.opt .omark{position:absolute; bottom:7px; right:11px; font-size:1.2rem;}
@keyframes rightpop{40%{transform:scale(1.05);}}

/* ---------- feedback inmediato ---------- */
.feedback{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  flex-direction:column; text-align:center; pointer-events:none; padding:20px;}
.feedback.on{display:flex;}
.feedback .fb-ava{width:132px; margin-bottom:4px;}
.feedback .fb-ava .mune{width:132px; height:auto;}
.feedback .fb-ico{font-size:4.4rem; animation:bounce .5s ease;}
.feedback .fb-msg{font-size:2.2rem; font-weight:800; text-shadow:0 3px 0 rgba(0,0,0,.3);}
.feedback .fb-sub{font-size:1.15rem; color:#fff; opacity:.92; margin-top:6px;}
.feedback.good{background:rgba(31,150,66,.94);}
.feedback.bad{background:rgba(205,34,66,.95);}
@keyframes bounce{0%{transform:scale(0);} 60%{transform:scale(1.25);} 100%{transform:scale(1);}}

/* ---------- pausa ---------- */
.pauseveil{position:fixed; inset:0; z-index:55; display:none; align-items:center; justify-content:center;
  flex-direction:column; background:rgba(12,4,32,.82); backdrop-filter:blur(4px); text-align:center;}
.pauseveil.on{display:flex;}
.pauseveil .pi{font-size:4.6rem; animation:bob 1.6s ease-in-out infinite;}
.pauseveil h2{font-size:2rem; margin:6px 0;}

/* ---------- racha ---------- */
.streak{display:none; align-items:center; gap:8px; justify-content:center; margin-top:14px;
  font-weight:800; font-size:1.1rem; color:var(--gold);}
.streak.on{display:flex; animation:pop .4s ease;}
.streak .flame{font-size:1.5rem;}
.streak .fuel{width:120px; height:10px; border-radius:6px; background:rgba(0,0,0,.35); overflow:hidden;}
.streak .fuel i{display:block; height:100%; background:linear-gradient(90deg,#ffb020,#ff5b6e); width:0;
  transition:width .5s cubic-bezier(.2,.8,.2,1);}

/* ---------- tablas ---------- */
table{width:100%; border-collapse:collapse;}
th,td{padding:11px 9px; text-align:left; border-bottom:1px solid rgba(255,255,255,.12);}
th{color:var(--dim); font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; font-weight:700;}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;}
tr.me td{color:var(--gold); font-weight:800;}
tr.top td{background:rgba(255,210,63,.12);}
tr.clickable{cursor:pointer;}
tr.clickable:hover td{background:rgba(255,255,255,.12);}
.tablewrap{overflow:auto; max-height:460px; border-radius:12px;}

/* ---------- fichas de estadística (números protagonistas) ---------- */
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:12px; margin:4px 0 2px;}
.stat{background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:14px; padding:14px;}
.stat .sv{font-size:1.9rem; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums;}
.stat .sl{font-size:.82rem; color:var(--mut); text-transform:uppercase; letter-spacing:.6px; font-weight:700;}
.stat .si{font-size:1.1rem; opacity:.9;}
.stat.gold .sv{color:var(--gold);} .stat.cyan .sv{color:var(--cyan);}
.stat.ok .sv{color:var(--ok);} .stat.bad .sv{color:var(--bad);}

/* ---------- barras de distribución de opciones (host) ---------- */
.countbar{display:flex; align-items:center; gap:10px; margin:9px 0;}
.countbar .lbl{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; flex:0 0 auto;}
.countbar .lbl svg{width:17px; height:17px; fill:#fff;}
.countbar .lbl.b0{background:var(--red);} .countbar .lbl.b1{background:var(--blue);}
.countbar .lbl.b2{background:var(--yel); color:#4a2a00;} .countbar .lbl.b2 svg{fill:#4a2a00;}
.countbar .lbl.b3{background:var(--grn);}
.countbar .ltx{flex:0 0 auto; width:19px; font-weight:800; color:var(--mut); font-size:.88rem;}
.countbar .bar{height:32px; border-radius:9px; background:rgba(0,0,0,.3); position:relative; overflow:hidden; flex:1;}
.countbar .bar>i{position:absolute; inset:2px auto 2px 0; width:0; border-radius:8px;
  transition:width .45s cubic-bezier(.2,.8,.2,1);}
.countbar.b0 .bar>i{background:var(--red);} .countbar.b1 .bar>i{background:var(--blue);}
.countbar.b2 .bar>i{background:var(--yel);} .countbar.b3 .bar>i{background:var(--grn);}
.countbar .bar>span{position:absolute; inset:0 10px 0 auto; display:flex; align-items:center;
  font-size:.86rem; font-weight:800; color:var(--txt);}
.countbar b{width:34px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums;}
.countbar .txt{flex:1; font-size:.9rem; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.countbar.correct .lbl{box-shadow:0 0 0 3px #2dff7a;}
.countbar.correct .bar{outline:2px solid #2dff7a; outline-offset:-1px;}
.countbar .ok{color:var(--ok); font-weight:800;}

/* ---------- barras de precisión por pregunta (informe) · un solo tono ---------- */
.qbars{display:grid; gap:9px;}
.qbar{display:grid; grid-template-columns:34px 1fr 54px; gap:10px; align-items:center;}
.qbar .qn{font-weight:800; color:var(--mut); font-size:.9rem;}
.qbar .track{height:26px; border-radius:8px; background:rgba(0,0,0,.3); position:relative; overflow:hidden;}
.qbar .fill{position:absolute; inset:2px auto 2px 0; width:0; border-radius:7px;
  background:linear-gradient(90deg,var(--cyan-d),var(--cyan)); transition:width .9s cubic-bezier(.2,.8,.2,1);}
.qbar .pc{text-align:right; font-weight:800; color:var(--cyan); font-variant-numeric:tabular-nums;}
.qbar.hard .fill{background:linear-gradient(90deg,#8c2b3c,var(--bad));}
.qbar.hard .pc{color:var(--bad);}
.qbar .qtx{position:absolute; inset:0 10px; display:flex; align-items:center; font-size:.85rem;
  color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;}

/* ---------- editor de preguntas ---------- */
.qcard{background:var(--surf-solid2); border-radius:14px; padding:16px; margin:12px 0; border:1px solid var(--line);}
.qcard .row{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.qcard h4{margin:4px 0 10px; color:var(--gold); display:flex; align-items:center; gap:8px;}
.qcard h4 .grip{cursor:grab; opacity:.6;}
.qcard .qimgbox{margin:8px 0;}
.qcard .oin{display:flex; align-items:center; gap:8px;}
.qcard .oin .tag{flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:.85rem; color:#fff;}
.qcard .oin .tag.t0{background:var(--red);} .qcard .oin .tag.t1{background:var(--blue);}
.qcard .oin .tag.t2{background:var(--yel); color:#4a2a00;} .qcard .oin .tag.t3{background:var(--grn);}
.qfile{margin:4px 0; padding:10px; background:rgba(0,0,0,.2); border-radius:10px; font-size:.9rem;}

/* ---------- PIN grande + QR (host) ---------- */
.bigpin{background:rgba(0,0,0,.3); border-radius:var(--radius-lg); padding:22px; margin:16px 0;
  border:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;}
.bigpin .pin{font-size:5.2rem; line-height:1;}
.bigpin .qrbox{background:#fff; padding:10px; border-radius:16px; width:168px; text-align:center;
  box-shadow:var(--shadow-soft);}
.bigpin .qrbox .qrsvg{width:148px; height:148px; display:block;}
.bigpin .qrbox .qrcap{color:#241552; font-size:.72rem; font-weight:800; margin-top:4px;}
.kbd{background:rgba(0,0,0,.35); padding:3px 10px; border-radius:8px; font-family:ui-monospace,monospace;
  font-weight:700; letter-spacing:1px;}
.live-count{font-size:1.15rem; font-weight:800; color:var(--gold);}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; align-items:center;}
.toolbar.center{justify-content:center;}
.toolbar.sticky{position:sticky; bottom:0; z-index:30; background:rgba(20,6,48,.9); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); margin:14px -16px 0; padding:12px 16px; border-radius:16px 16px 0 0;}

/* ---------- avatares ---------- */
.mune{display:block;}
.avatar-map{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:14px;}
.avatar-card{background:rgba(255,255,255,.09); border:1px solid var(--line); border-radius:18px;
  padding:14px 8px; text-align:center; animation:joinpop .5s cubic-bezier(.2,.8,.2,1) both;}
.avatar-card .ava-stage{width:112px; height:112px; border-radius:50%; margin:0 auto 10px;
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.3), inset 0 -6px 0 rgba(0,0,0,.08);}
.avatar-card .ava-stage .mune{width:92px; height:auto; filter:drop-shadow(0 3px 3px rgba(0,0,0,.18));}
.avatar-card .ava-name{font-weight:800; font-size:1.02rem; line-height:1.15; word-break:break-word;}
.avatar-card .ava-last{color:var(--mut); font-weight:600; font-size:.88rem; word-break:break-word;}
.avatar-card.answered{box-shadow:0 0 0 3px var(--ok); background:rgba(45,211,111,.14);}
.avatar-card .ava-tick{color:var(--ok); font-weight:800; font-size:.85rem; min-height:1.1em;}
@keyframes joinpop{from{transform:scale(.5) translateY(14px); opacity:0;} to{transform:none; opacity:1;}}
.mini-ava{display:inline-flex; width:30px; height:30px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  align-items:flex-end; justify-content:center; box-shadow:0 0 0 2px rgba(255,255,255,.22);}
.mini-ava .mune{width:26px; height:auto;}
.mini-ava.xs{width:22px; height:22px;} .mini-ava.xs .mune{width:19px;}

/* muñeco propio del jugador */
.myavatar{display:flex; justify-content:center; align-items:center; margin:8px auto 4px;}
.myavatar .mune{width:132px; height:auto; filter:drop-shadow(0 5px 5px rgba(0,0,0,.22));
  animation:bob2 2.8s ease-in-out infinite;}
@keyframes bob2{50%{transform:translateY(-6px);}}

/* bandeja de quienes ya respondieron (host) */
.tray{display:flex; flex-wrap:wrap; gap:8px; min-height:44px; align-items:center;}
.tray .tchip{display:flex; align-items:center; gap:7px; background:rgba(45,211,111,.16);
  border:1px solid rgba(45,211,111,.45); border-radius:999px; padding:4px 11px 4px 5px; font-weight:700;
  font-size:.92rem; animation:joinpop .35s cubic-bezier(.2,.8,.2,1) both;}
.tray .tchip .nth{color:var(--ok); font-weight:800; font-size:.8rem;}
.tray .empty{color:var(--dim);}

/* ---------- podio ---------- */
#live-final,#end-final,#res-final{position:relative; overflow:hidden;}
.podium3{display:flex; align-items:flex-end; justify-content:center; gap:14px; margin:22px 0 6px;
  position:relative;}
.podcol{text-align:center; width:31%; max-width:210px; animation:rise .85s cubic-bezier(.2,.8,.2,1) both;}
.podcol .medal{font-size:2.3rem; display:block; line-height:1;}
.podcol .pava{width:104px; height:104px; margin:2px auto 4px; border-radius:50%; position:relative;
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.4);}
.podcol .pava .mune{width:88px; height:auto;}
.podcol.p1 .pava{width:124px; height:124px; box-shadow:0 0 0 4px var(--gold), 0 8px 28px rgba(255,210,63,.4);}
.podcol.p1 .pava .mune{width:106px;}
.podcol.p2 .pava{box-shadow:0 0 0 4px var(--silver), 0 6px 20px rgba(0,0,0,.4);}
.podcol.p3 .pava{box-shadow:0 0 0 4px var(--bronze), 0 6px 20px rgba(0,0,0,.4);}
.podcol .who{font-weight:800; font-size:1.05rem; margin:4px 0 2px; word-break:break-word;}
.podcol .pts{color:var(--gold); font-weight:800; margin-bottom:8px; font-variant-numeric:tabular-nums;}
.podcol .blk{position:relative; border-radius:14px 14px 0 0; display:flex; align-items:flex-start;
  justify-content:center; padding-top:12px; font-size:1.7rem; font-weight:800; color:#241552;
  box-shadow:0 6px 20px rgba(0,0,0,.4); overflow:hidden;}
.podcol .blk::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shine 3.4s ease-in-out 1.2s infinite;}
.podcol.p1 .blk{height:170px; background:linear-gradient(180deg,#ffe57a,var(--gold));}
.podcol.p2 .blk{height:118px; background:linear-gradient(180deg,#f2f4ff,#b8bcd4);}
.podcol.p3 .blk{height:86px; background:linear-gradient(180deg,#ffbe8a,#c97a3a);}
.podcol .crown{position:absolute; top:-6px; left:50%; transform:translateX(-50%); font-size:1.9rem;
  animation:bob 1.8s ease-in-out infinite;}
.podcol .bdg{display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:6px;}
@keyframes rise{from{transform:translateY(34px); opacity:0;} to{transform:none; opacity:1;}}
@keyframes shine{0%{left:-60%;} 55%,100%{left:120%;}}
.spot{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(560px,96%); height:260px; pointer-events:none; z-index:-1;
  background:radial-gradient(60% 80% at 50% 100%, rgba(255,210,63,.3), transparent 70%);}

/* insignias / premios */
.badge{display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.14);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px; font-size:.78rem; font-weight:700;}
.badge .bi{font-size:.95rem;}
.badge.gold{background:rgba(255,210,63,.2); border-color:rgba(255,210,63,.5); color:#ffe9a8;}

/* ---------- comparativo (magnitud: un solo tono, oro = puntos) ---------- */
.crow{display:flex; align-items:center; gap:10px; margin:8px 0;}
.crow .rk{width:28px; text-align:right; font-weight:800; color:var(--mut); font-variant-numeric:tabular-nums;}
.crow .nm{width:30%; max-width:230px; font-weight:700; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; display:flex; align-items:center; gap:8px;}
.crow .track{flex:1; background:rgba(0,0,0,.3); border-radius:9px; height:30px; overflow:hidden; position:relative;}
.crow .fill{height:100%; border-radius:9px; background:linear-gradient(90deg,var(--gold-d),var(--gold));
  width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1); display:flex; align-items:center;
  justify-content:flex-end; padding-right:8px; font-size:.78rem; color:#3d2a00; font-weight:800; min-width:26px;}
.crow.me .fill{background:linear-gradient(90deg,#b3246b,var(--acc));  color:#fff;}
.crow .sc{width:74px; font-weight:800; text-align:right; color:var(--gold); font-variant-numeric:tabular-nums;}
.crow.me .nm{color:var(--gold);}
.crow .dl{width:34px; font-size:.8rem; font-weight:800; text-align:right;}
.dl.up{color:var(--ok);} .dl.down{color:var(--bad);} .dl.same{color:var(--dim);}

/* ---------- tablero en vivo con avatares y cambios de puesto ---------- */
.lb{display:grid; gap:7px;}
.lbrow{display:grid; grid-template-columns:38px 34px 1fr auto auto; gap:10px; align-items:center;
  background:rgba(0,0,0,.2); border:1px solid var(--line); border-radius:12px; padding:7px 12px;
  animation:pop .35s ease both;}
.lbrow .rk{font-weight:800; color:var(--mut); font-variant-numeric:tabular-nums;}
.lbrow .nm{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lbrow .sc{font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums;}
.lbrow .dl{font-size:.82rem; font-weight:800; width:40px; text-align:right;}
.lbrow.r1{background:linear-gradient(90deg,rgba(255,210,63,.22),rgba(0,0,0,.2)); border-color:rgba(255,210,63,.45);}
.lbrow.r2{background:linear-gradient(90deg,rgba(223,227,242,.16),rgba(0,0,0,.2));}
.lbrow.r3{background:linear-gradient(90deg,rgba(224,154,90,.18),rgba(0,0,0,.2));}
.lbrow.me{outline:2px solid var(--acc);}

/* ---------- dona de precisión personal ---------- */
.donut{width:132px; height:132px; border-radius:50%; margin:0 auto; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--cyan) calc(var(--p) * 1%), rgba(255,255,255,.14) 0);}
.donut::after{content:""; position:absolute; inset:13px; border-radius:50%; background:#2a1157;}
.donut .dv{position:relative; z-index:1; font-size:1.7rem; font-weight:800; color:var(--cyan);}
.donut .dl2{position:relative; z-index:1;}

/* ---------- confeti ---------- */
.confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5;}
.confetti span{position:absolute; top:-8%; font-size:1.5rem; opacity:0; animation:confall 3.6s ease-in forwards;}
@keyframes confall{12%{opacity:1;} to{transform:translateY(52vh) rotate(320deg); opacity:0;}}

/* ---------- host en vivo ---------- */
.host-opt{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
.hostbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.chip{display:inline-flex; align-items:center; gap:6px; background:rgba(0,0,0,.28);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-weight:700; font-size:.92rem;}
.chip.ok{border-color:rgba(45,211,111,.5); color:#bdf5d4;}
.chip.warn{border-color:rgba(255,176,32,.5); color:#ffe0a8;}

/* ---------- modo proyector ---------- */
body.proj .wrap{max-width:1500px;}
body.proj .logo{font-size:1.5rem; opacity:.75;}
body.proj .bigpin .pin{font-size:8rem;}
body.proj .bigpin .qrbox{width:250px;} body.proj .bigpin .qrbox .qrsvg{width:230px; height:230px;}
body.proj .qtext{font-size:2.6rem; padding:28px;}
body.proj .opt{min-height:132px; font-size:1.7rem;}
body.proj .opt .oshape{width:58px; height:58px;} body.proj .opt .oshape svg{width:46px; height:46px;}
body.proj .tnum{font-size:4rem;}
body.proj .avatar-map{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));}
body.proj .avatar-card .ava-stage{width:146px; height:146px;}
body.proj .avatar-card .ava-stage .mune{width:122px;}
body.proj .avatar-card .ava-name{font-size:1.25rem;}
body.proj .live-count,body.proj .chip{font-size:1.3rem;}
body.proj .podcol{max-width:300px;}
body.proj .podcol.p1 .blk{height:230px;} body.proj .podcol.p2 .blk{height:160px;} body.proj .podcol.p3 .blk{height:116px;}
body.proj .podcol .pava{width:140px; height:140px;} body.proj .podcol .pava .mune{width:118px;}
body.proj .podcol.p1 .pava{width:168px; height:168px;} body.proj .podcol.p1 .pava .mune{width:142px;}
body.proj .podcol .who{font-size:1.5rem;} body.proj .podcol .pts{font-size:1.3rem;}
body.proj .hide-proj{display:none !important;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .bigpin{grid-template-columns:1fr; text-align:center; justify-items:center;}
  .bigpin .qrbox{margin:0 auto;}
  .picker{grid-template-columns:1fr;}
  .picker .preview{max-width:230px; margin:0 auto;}
}
@media (max-width:640px){
  .opts,.host-opt,.qcard .row{grid-template-columns:1fr;}
  .avatar-map{grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px;}
  .avatar-card .ava-stage{width:92px; height:92px;} .avatar-card .ava-stage .mune{width:76px;}
  .opt{min-height:74px; font-size:1rem;}
  .qtext{font-size:1.2rem; padding:16px;}
  .pin{font-size:3rem; letter-spacing:.35rem;}
  .bigpin .pin{font-size:3.4rem;}
  .podcol{width:32%;}
  .podcol .pava{width:76px; height:76px;} .podcol .pava .mune{width:64px;}
  .podcol.p1 .pava{width:90px; height:90px;} .podcol.p1 .pava .mune{width:76px;}
  .crow .nm{width:40%;}
  .lbrow{grid-template-columns:30px 30px 1fr auto auto; padding:6px 9px; gap:7px;}
  .statrow{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));}
  .stat .sv{font-size:1.5rem;}
}

/* ---------- detalle personal por pregunta (final del juego) ---------- */
.drow{background:#171431; border-left:6px solid #3a3270; border-radius:10px; padding:12px 14px; margin:10px 0; text-align:left;}
.drow.ok{border-left-color:#2dff7a;}
.drow.bad{border-left-color:#ff5b5b;}
.drow.none{border-left-color:#57516e; opacity:.85;}
.dhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.dq{font-weight:800; background:#0d0b1e; border-radius:8px; padding:2px 9px;}
.dst{font-weight:800;}
.dst.ok{color:#2dff7a;} .dst.bad{color:#ff8080;} .dst.none{color:var(--mut);}
.dtime{color:var(--mut); font-weight:700;}
.dpts{margin-left:auto; font-weight:800; color:#ffd94d;}
.dbar{height:10px; background:#0d0b1e; border-radius:6px; overflow:hidden; margin:8px 0;}
.dfill{height:100%; border-radius:6px;}
.dfill.ok{background:linear-gradient(90deg,#26890c,#2dff7a);}
.dfill.bad{background:linear-gradient(90deg,#8c2b2b,#ff5b5b);}
.dtext{font-weight:700; margin:2px 0;}
.dans{color:var(--mut); font-size:.92rem;}

/* ---------- menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important;}
}