/* Trivia Konexa · lado del jugador (public/trivia-player.js): sala de invitados (.gr2) y público del webinar (.audience).
   Solo tokens de la sala (style.css / guest-room.css): tema claro por defecto y oscuro con el botón de la sala; --acc es el
   color de marca del evento. Colores de las respuestas = la consola del moderador (trivia-studio.css --kx-tv-a…d, de
   poll-palette.json), iguales en los dos temas, con LETRA (nunca figuras geométricas ni el esquema de otros juegos). */
.guest-room{--tk-a:#6235DD;--tk-b:#397C93;--tk-c:#BE4967;--tk-d:#8D623F}
.tk{--tk-ok-soft:color-mix(in srgb,var(--ok) 14%,var(--card));--tk-ok-text:color-mix(in srgb,var(--ok) 65%,var(--ink));--tk-warn:var(--warn,#f5b82e);--tk-warn-soft:color-mix(in srgb,var(--tk-warn) 18%,var(--card));--tk-warn-text:color-mix(in srgb,var(--tk-warn) 45%,var(--ink));--tk-live-soft:color-mix(in srgb,var(--live) 10%,var(--card));--tk-live-text:color-mix(in srgb,var(--live) 60%,var(--ink));
 display:flex;flex-direction:column;gap:12px;min-height:100%;font-family:var(--font,Geist,system-ui,sans-serif);color:var(--ink);font-size:14px;line-height:1.4}
.tk .tk-body{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.tk p{margin:0}
.tk .tk-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.tk .tk-mut{color:var(--mut);font-size:13px}
.tk .tk-h{margin:0;font-family:var(--font,Geist,system-ui,sans-serif);font-size:20px;font-weight:700;letter-spacing:-.2px;line-height:1.25;color:var(--ink)}
.tk .tk-h:focus,.tk .tk-qtext:focus{outline:none}
.tk .tk-h:focus-visible,.tk .tk-qtext:focus-visible{outline:3px solid var(--focus-ring,#bcaeff);outline-offset:3px;border-radius:6px}
.tk-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--acc-ink,var(--acc))}
.tk .tk-note{padding:8px 12px;border-radius:var(--r-card,12px);background:var(--tint);color:var(--ink);font-size:13px}
.tk .tk-onair{padding:8px 12px;border-radius:var(--r-card,12px);background:var(--tk-live-soft);color:var(--tk-live-text);font-size:12.5px;font-weight:600}
.tk-band{padding:8px 12px;border-radius:10px;background:var(--tk-warn-soft);color:var(--tk-warn-text);font-size:12.5px;font-weight:600;min-height:36px;display:flex;align-items:center}
.tk-band[hidden]{display:none}
/* buttons (touch targets ≥ 44 px; 48 px for the primary one) */
.tk-btn{min-height:44px;padding:0 18px;border:0;border-radius:var(--r-btn,10px);font:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.tk-btn-p{min-height:48px;background:var(--acc);color:var(--acc-on,#fff);box-shadow:var(--sh-btn-p,none)}
.tk-btn-g{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.tk-btn-g:hover{background:var(--surf)}
.tk-btn-danger{background:var(--live);color:#fff}
.tk-act{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.tk-act .tk-btn-p{flex:1}
.tk .tk-center .tk-act{justify-content:center}
.tk-link{background:none;border:0;min-height:44px;padding:0 10px;color:var(--mut);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
:is(.tk,.tk-invite,.tk-chip-join,.tk-strip,.tk-audtabs,.tk-vidtap) :focus-visible,.tk-chip-join:focus-visible,.tk-vidtap:focus-visible{outline:3px solid var(--focus-ring,#bcaeff);outline-offset:2px}
/* invitation: a card among the room's cards; a bottom sheet over the webinar player (the video keeps playing) */
.tk-invite{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-pop,0 14px 40px rgba(0,0,0,.18));font-family:var(--font,Geist,system-ui,sans-serif);text-align:left}
.tk-invite .tk-h{margin:0;font-size:17px;font-weight:700;line-height:1.3}
.tk-invite p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink)}
.tk-invite.tk-sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tk-bar,84px) + 8px);z-index:60;width:calc(100% - 16px);max-width:420px;animation:tkIn .22s ease-out}
.tk-chip-join{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;white-space:nowrap;flex:none;border-radius:var(--r-pill,999px);border:1px solid var(--acc-border,var(--acc));background:var(--card);color:var(--acc-ink,var(--acc));font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(15,12,35,.14);justify-self:start}
.tk-chip-join .tk-ico{width:16px;height:16px}
.guest-stage>.tk-chip-join{align-self:center;box-shadow:none}
@keyframes tkIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.gr2 .gr-cards>.tk-chip-join{box-shadow:0 8px 20px rgba(15,12,35,.14)}
/* the audience panel: «Trivia · Chat» */
.tk-audtabs{display:flex;gap:2px;padding:3px;margin:8px 0 2px;background:var(--surf);border-radius:10px}
.tk-audtabs button{flex:1;min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--mut);font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tk-audtabs button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(15,12,35,.12)}
.tk-dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.tk-dot[hidden]{display:none}
.guest-room.audience[data-tk-panel=trivia] .aud-chatbar{display:none!important}
/* a question arrives while you are writing: the focus stays in the chat, this strip offers «Responder» */
.tk-strip{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0 0 6px;border-radius:12px;background:var(--tint);color:var(--ink);font-size:13px;flex:none}
.tk-strip>span{flex:1}
.tk-strip .tk-btn{min-height:44px}
.tk-strip-t{font-family:var(--font-mono,monospace);font-variant-numeric:tabular-nums}
/* question header: «Pregunta 3 de 10» · ×2 · ring on the server's clock */
.tk-qhead{display:flex;align-items:center;gap:8px;min-height:44px}
.tk-qn{font-size:13px;font-weight:600;color:var(--mut)}
.tk-sp{flex:1}
.tk-x2{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill,999px);background:var(--tk-warn-soft);color:var(--tk-warn-text);font-size:12px;font-weight:700;white-space:nowrap}
.tk-timer{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center}
.tk-timer svg{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
.tk-timer circle{fill:none;stroke-width:4}
.tk-ring-t{stroke:var(--line)}
.tk-ring-p{stroke:var(--acc);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.tk-timer b{position:relative;font-family:var(--font-mono,monospace);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.tk-timer.warn .tk-ring-p{stroke:var(--tk-warn)}
.tk-timer.warn b{color:var(--tk-warn-text)}
.tk-tbar{display:none}
.tk .tk-qtext{margin:0;font-family:var(--font,Geist,system-ui,sans-serif);font-size:clamp(18px,5vw,22px);line-height:1.3;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.tk-imgbox{border-radius:12px;background:var(--surf);overflow:hidden;display:grid;place-items:center}
.tk-imgbox[hidden]{display:none}
.tk-img{display:block;width:100%;aspect-ratio:16/9;max-height:28dvh;object-fit:contain}
/* answers: letter chip + text + colour, the same order for everyone */
.tk-answers{container-type:inline-size}
.tk-opts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@container (min-width:320px){.tk-opts[data-layout=grid]{grid-template-columns:repeat(2,minmax(0,1fr))}.tk-opts[data-layout=grid] .tk-opt{min-height:88px}}
@container (min-width:280px){.tk-opts[data-layout=tf]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tk-opt{--c:var(--tk-a);position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border:0;border-radius:var(--r-card,12px);background:var(--c);color:#fff;font:inherit;font-size:17px;line-height:1.3;font-weight:600;text-align:left;cursor:pointer;transition:transform .08s ease,opacity .15s ease,filter .15s ease;-webkit-tap-highlight-color:transparent}
.tk-opts[data-layout=tf] .tk-opt{min-height:120px;flex-direction:column;justify-content:center;text-align:center;gap:8px}
.tk-opt:active:not([aria-disabled=true]){transform:scale(.97)}
.tk-opt[aria-disabled=true]{cursor:default}
.tk-ca,.tk-opt.tk-ca{--c:var(--tk-a)}.tk-cb,.tk-opt.tk-cb{--c:var(--tk-b)}.tk-cc,.tk-opt.tk-cc{--c:var(--tk-c)}.tk-cd,.tk-opt.tk-cd{--c:var(--tk-d)}
.tk-let{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.2);color:#fff;font-family:var(--font-mono,monospace);font-size:16px;font-weight:700}
.tk-opts[data-layout=tf] .tk-let{width:48px;height:48px;border-radius:12px}
.tk-let .tk-ico{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.tk-otx{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tk-opts[data-layout=tf] .tk-otx{flex:none}
.tk-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-pill,999px);background:rgba(255,255,255,.22);font-size:11.5px;font-weight:700;white-space:nowrap}
.tk-tag .tk-ico{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tk-opt.is-dim{opacity:.35;filter:saturate(.4)}
.tk-opt.is-picked{box-shadow:inset 0 0 0 3px #fff}
.tk-opt.is-correct{box-shadow:inset 0 0 0 3px #fff}
.tk-opt.is-mine{outline:2px dashed #fff;outline-offset:-5px}
.guest-room[data-theme=dark] .tk-let{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.guest-room[data-theme=dark] .tk-opt{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.guest-room[data-theme=dark] .tk-opt:is(.is-picked,.is-correct){box-shadow:inset 0 0 0 3px #fff}
/* lobby */
.tk-logo{width:40px;height:40px;border-radius:10px;object-fit:contain;align-self:center}
.tk-av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--acc-on,#fff);font-size:22px;font-weight:700}
.tk .tk-count{font-size:14px;color:var(--mut)}
.tk .tk-count b{font-family:var(--font-mono,monospace);font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.tk-names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tk-names li{padding:4px 10px;border-radius:var(--r-pill,999px);background:var(--surf);font-size:12.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-names li.is-me{background:var(--tint);color:var(--acc-ink,var(--acc));box-shadow:inset 0 0 0 1px var(--acc-border,var(--acc))}
.tk-names li.tk-more{background:transparent;color:var(--mut)}
.tk-confirm{width:100%;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--line2);background:var(--card);text-align:left}
/* «Prepárate» */
.tk-intro .tk-bigq{font-size:28px;font-weight:800;letter-spacing:-.4px}
.tk-intro b{font-family:var(--font-mono,monospace);font-variant-numeric:tabular-nums}
/* sent / time over / result */
.tk-let.tk-big{width:64px;height:64px;border-radius:16px;font-size:28px;background:var(--c)}
.tk-let.tk-big .tk-ico{width:36px;height:36px}
.tk-sent{padding:18px 8px}
.tk-panelbox{padding:22px 14px;border-radius:14px;background:var(--surf)}
.tk-bigico{width:48px;height:48px;fill:none;stroke:var(--mut);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tk-result{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px 14px;border-radius:14px;background:var(--surf)}
.tk-result.is-ok{background:var(--tk-ok-soft)}
.tk-result.is-bad{background:var(--tk-live-soft)}
.tk-rico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--mut);color:#fff}
.tk-result.is-ok .tk-rico{background:var(--ok)}
.tk-result.is-bad .tk-rico{background:var(--live)}
.tk-rico .tk-ico{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tk-result .tk-h{font-size:28px;font-weight:800}
.tk-result.is-ok .tk-h{color:var(--tk-ok-text)}
.tk-result.is-bad .tk-h{color:var(--tk-live-text)}
.tk .tk-pts{font-family:var(--font-mono,monospace);font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.tk-streak{display:inline-flex;padding:4px 12px;border-radius:var(--r-pill,999px);background:var(--tk-warn-soft);color:var(--tk-warn-text);font-size:13px;font-weight:700}
.tk .tk-pos{font-size:14px;font-weight:600}
/* leaderboard (top 5) */
.tk-board{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tk-row{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 12px;border-radius:12px;background:var(--surf)}
.tk-row.is-me{background:var(--tint);box-shadow:inset 0 0 0 2px var(--acc)}
.tk-rk{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:var(--card);color:var(--ink);border:1px solid var(--line2)}
.tk-rk.rk1{background:var(--tk-warn);color:var(--warn-ink,#2b2100);border-color:transparent}
.tk-rk.rk2{background:var(--line2);border-color:transparent}
.tk-rk.rk3{background:#B87333;color:#fff;border-color:transparent}
.tk-nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-nm em{font-style:normal;color:var(--acc-ink,var(--acc))}
.tk-mv{font-size:12px;font-weight:700;color:var(--tk-ok-text)}
.tk-sc{font-family:var(--font-mono,monospace);font-weight:700;font-variant-numeric:tabular-nums}
.tk-sep{text-align:center;color:var(--mut);letter-spacing:.3em}
/* podium: 2.º · 1.º · 3.º */
.tk-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;padding-top:8px}
.tk-step{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center}
.tk-pn{font-size:15px;font-weight:700;line-height:1.25;max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-ps{font-family:var(--font-mono,monospace);font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums;min-height:1.2em}
.tk-ped{width:100%;border-radius:12px 12px 0 0;display:grid;place-items:start center;padding-top:8px;background:var(--surf);border:1px solid var(--line2);border-bottom:0;font-size:18px;font-weight:800}
.tk-step.s1 .tk-ped{height:96px;background:var(--acc);color:var(--acc-on,#fff);border-color:transparent}
.tk-step.s2 .tk-ped{height:72px}
.tk-step.s3 .tk-ped{height:56px}
.tk-step.empty .tk-ped{opacity:.55}
.tk-step.is-me .tk-pn{color:var(--acc-ink,var(--acc))}
.tk-podium.tk-anim .tk-step{animation:tkRise .45s ease-out both}
.tk-podium.tk-anim .tk-step.s3{animation-delay:0s}.tk-podium.tk-anim .tk-step.s2{animation-delay:1.2s}.tk-podium.tk-anim .tk-step.s1{animation-delay:2.4s}
@keyframes tkRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tk .tk-poscard{padding:10px 12px;border-radius:12px;background:var(--tint);text-align:center;font-weight:600}
/* end */
.tk-mine{border:1px solid var(--line);border-radius:12px;background:var(--card)}
.tk-mine summary{min-height:44px;display:flex;align-items:center;padding:0 14px;font-weight:600;cursor:pointer}
.tk-mine ol{list-style:none;margin:0;padding:0 12px 12px;display:grid;gap:8px}
.tk-mine li{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.tk-mi{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;background:var(--surf);color:var(--mut)}
.tk-mine li.is-ok .tk-mi{background:var(--ok);color:#fff}
.tk-mine li.is-bad .tk-mi{background:var(--live);color:#fff}
.tk-snd{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--mut);align-self:flex-start;cursor:pointer}
.tk-snd input{width:18px;height:18px;accent-color:var(--acc)}
/* confetti: only on your own screen when you are in the top 3; never with reduced motion */
.tk{position:relative}
.tk-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.tk-confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;background:var(--acc);animation:tkFall 2.6s ease-in forwards}
.tk-confetti i:nth-child(4n+1){background:var(--tk-b)}.tk-confetti i:nth-child(4n+2){background:var(--tk-c)}.tk-confetti i:nth-child(4n+3){background:var(--tk-warn)}
.tk-confetti i:nth-child(12n+1){left:4%}.tk-confetti i:nth-child(12n+2){left:12%;animation-delay:.2s}.tk-confetti i:nth-child(12n+3){left:20%;animation-delay:.5s}.tk-confetti i:nth-child(12n+4){left:28%;animation-delay:.1s}.tk-confetti i:nth-child(12n+5){left:36%;animation-delay:.4s}.tk-confetti i:nth-child(12n+6){left:44%;animation-delay:.7s}.tk-confetti i:nth-child(12n+7){left:52%;animation-delay:.3s}.tk-confetti i:nth-child(12n+8){left:60%;animation-delay:.6s}.tk-confetti i:nth-child(12n+9){left:68%;animation-delay:.15s}.tk-confetti i:nth-child(12n+10){left:76%;animation-delay:.45s}.tk-confetti i:nth-child(12n+11){left:84%;animation-delay:.25s}.tk-confetti i:nth-child(12n){left:92%;animation-delay:.55s}
.tk-confetti i:nth-child(n+13){top:-40px}.tk-confetti i:nth-child(n+25){top:-70px}
@keyframes tkFall{to{transform:translateY(520px) rotate(540deg);opacity:0}}
/* guest room, phones and tablets upright: the cameras strip steps aside during a question (the program stays 16:9);
   new vote cards and the first-visit camera card wait until the question is over (they never cover the answers) */
@media (max-width:1023px) and (orientation:portrait){.gr2[data-trivia=q] :is(#stage-grid,.gr-striphead){display:none}}
.gr2[data-trivia=q] #gr-cards :is(.kxg-card,.gr-coach){display:none}
/* webinar audience, phones upright: a compact video next to the game during the question and the result */
.tk-vidtap{display:none}
@media (max-width:599px),(max-width:999px) and (orientation:portrait){
 .guest-room.audience.tk-compact .guest-stage{flex-direction:row;align-items:center;justify-content:flex-start;padding:6px 10px}
 .guest-room.audience.tk-compact .aud-frame{width:44%;max-width:200px;border-radius:10px}
 .guest-room.audience.tk-compact .aud-frame .aud-unmute,.guest-room.audience.tk-compact .aud-rotate{display:none}
 .guest-room.audience.tk-compact .tk-vidtap{display:block;position:absolute;inset:0;z-index:4;width:100%;height:100%;border:0;background:transparent;cursor:zoom-in}
 .guest-room.audience[data-tk-panel=trivia] .guest-main.with-panel .guest-side{padding-top:6px}
}
/* phones in landscape: the game is a side sheet at the right of the video */
@media (orientation:landscape) and (max-height:520px){.guest-room.audience[data-tk-panel=trivia] .guest-main.with-panel{grid-template-columns:minmax(0,1fr) max(320px,44vw)}}
@media (prefers-reduced-motion:reduce){
 .tk-opt,.tk-ring-p{transition:none}.tk-opt:active:not([aria-disabled=true]){transform:none}
 .tk-invite.tk-sheet{animation:none}.tk-podium .tk-step{animation:none!important}.tk-confetti{display:none}
 .tk-timer svg{display:none}.tk-timer{width:auto;min-width:44px;display:flex;flex-direction:column;gap:4px}
 .tk-tbar{display:block;width:44px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}.tk-tbar i{display:block;height:100%;background:var(--acc)}.tk-timer.warn .tk-tbar i{background:var(--tk-warn)}
}