:root{
--bg:#DDEAE2; --paper:#FAFAF7; --ink:#0A0A0A; --muted:#555555; --line:#0A0A0A; --soft:#E6F8EF;
--accent:#00CE80; --accent-dark:#00A366; /* verdes de yuhu.mx */
--sol:#FFBC00; --estrella:#0096C7; --corazon:#AD3CC8; --luna:#00A957;
--ok:#00A957; --bad:#D6334A;
--display:"Alfa Slab One","Rockwell","Georgia",serif;
--body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif; /* tipografía de yuhu.mx */
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.45}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;letter-spacing:.01em}
.wrap{max-width:1280px;margin:0 auto;padding:1rem 1rem 2.5rem}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.top h1{font-size:clamp(1.6rem,3.6vw,2.3rem)}
.top p{margin:.1rem 0 0;color:var(--muted)}
.dev{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.9rem;border:2px dashed var(--muted);border-radius:8px;padding:.4rem .6rem;color:var(--muted)}
.dev select,.dev button{border:2px solid var(--line);border-radius:6px;background:var(--paper);padding:.2rem .5rem;font-size:.88rem}
.layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,24vw,340px);gap:1rem;align-items:start}
@media (max-width:960px){.layout{grid-template-columns:1fr}}
.card{background:var(--paper);border:3px solid var(--line);border-radius:8px;box-shadow:6px 6px 0 var(--line)}
.pad{padding:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:3px solid var(--line);background:var(--ink);color:var(--paper);font-weight:800;border-radius:8px;padding:.8rem 1.4rem;box-shadow:4px 4px 0 var(--accent);transition:transform .08s}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.center{justify-content:center;text-align:center}
.mt{margin-top:1.25rem}
.muted{color:var(--muted)}
/* lobby */
.hero{text-align:center;padding:2.5rem 1.5rem}
.hero h2{font-size:clamp(2.4rem,7vw,4.6rem)}
.hero p{max-width:36rem;margin:1rem auto 0;color:var(--muted)}
.join{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}
.join input{border:3px solid var(--line);border-radius:8px;padding:.75rem 1rem;background:var(--soft);font-weight:600;font-size:1.1rem;min-width:14rem;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.5rem;min-height:2.6rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;border:2px solid var(--line);border-radius:999px;padding:.25rem .8rem .25rem .3rem;background:var(--soft);font-weight:600;animation:pop .3s ease-out}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.av{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;color:#fff;font-weight:800;font-size:.8rem;border:2px solid var(--line);flex:none}
/* pregunta estilo carta de lotería */
.qcard{position:relative;text-align:center;padding:2.4rem 1.6rem 1.6rem;overflow:hidden;--pc:color-mix(in srgb,var(--acc) 17%,transparent);background-color:var(--paper)}
.qcard .timer>i{background:var(--acc)}
/* 6 patrones */
.pat-dots{background-image:radial-gradient(var(--pc) 1.8px,transparent 2.4px);background-size:18px 18px}
.pat-stripes{background-image:repeating-linear-gradient(45deg,var(--pc) 0 7px,transparent 7px 22px)}
.pat-grid{background-image:linear-gradient(var(--pc) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--pc) 1.5px,transparent 1.5px);background-size:24px 24px}
.pat-rays{background-image:repeating-conic-gradient(from 0deg at 50% 125%,var(--pc) 0deg 5deg,transparent 5deg 12deg)}
.pat-waves{background-image:radial-gradient(circle at 50% 100%,transparent 7px,var(--pc) 8px,var(--pc) 10px,transparent 11px);background-size:26px 13px}
.pat-picado{padding-top:3.2rem}
.pat-picado::before{content:"";position:absolute;left:0;right:0;top:0;height:24px;background:radial-gradient(circle at 13px 24px,transparent 9px,var(--acc) 10px) 0 0/26px 24px;border-bottom:0}
.lay-banda.pat-picado::before{top:auto;bottom:0;transform:rotate(180deg)}
.lay-banda.pat-picado{padding-bottom:2.6rem}
/* 5 acomodos */
.lay-banda .band{margin:-2.4rem -1.6rem 1.2rem;padding:.7rem 1rem;background:var(--acc);color:var(--acc-ink);font-family:var(--display);font-size:1.2rem;border-bottom:3px solid var(--line);position:relative;z-index:1}
.lay-banda.pat-picado .band{margin-top:-3.2rem}
.lay-banda .band span{font-family:var(--body);font-weight:600;font-size:.95rem;opacity:.85;margin-left:.4rem}
.lay-lateral{text-align:left}
.lat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:center}
.bignum{font-family:var(--display);font-size:clamp(4rem,10vw,7.5rem);line-height:.85;color:var(--acc);-webkit-text-stroke:3px var(--line);paint-order:stroke fill}
.lay-lateral .qtext{margin:0;max-width:none}
.lay-lateral .qask{text-align:left}
.lay-marco{padding-top:3.8rem}
.lay-marco .qcount{top:1.2rem;right:1.4rem}
.lay-marco.pat-picado .qcount{top:2rem}
.lay-marco::after{content:"";position:absolute;inset:10px;border:3px double var(--acc);border-radius:4px;pointer-events:none}
.badge{position:absolute;top:.8rem;left:50%;transform:translateX(-50%);width:2.8rem;height:2.8rem;border-radius:50%;background:var(--acc);color:var(--acc-ink);border:3px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:1.2rem;z-index:1}
.lay-sticker{transform:rotate(-.8deg)}
.stk{position:absolute;top:.9rem;left:-.3rem;background:var(--acc);color:var(--acc-ink);border:3px solid var(--line);font-family:var(--display);padding:.25rem .9rem;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--line);z-index:1}
.lay-sticker .qtext{margin-top:1.7rem}
@media (max-width:560px){.lat{grid-template-columns:1fr;text-align:center}.lay-lateral{text-align:center}.lay-lateral .qask{text-align:center}}
.qnum{position:absolute;top:.6rem;left:.9rem;font-family:var(--display);font-size:1.15rem}
.qcount{position:absolute;top:.75rem;right:.9rem;color:var(--muted);font-weight:600;font-size:.95rem}
.qtext{font-family:var(--display);font-size:clamp(1.3rem,2.9vw,2.1rem);max-width:30ch;margin:.6rem auto 0;text-wrap:balance;line-height:1.18}
.qask{margin-top:.8rem;color:var(--muted);font-weight:600}
.timerrow{display:flex;align-items:center;gap:.75rem;margin-top:1.1rem}
.timer{flex:1;height:12px;border:2px solid var(--line);border-radius:999px;overflow:hidden;background:var(--soft)}
.timer>i{display:block;height:100%;background:var(--accent);width:100%;transition:width .2s linear}
.secs{font-family:var(--display);font-size:1.3rem;min-width:2.6rem;text-align:right}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:1.1rem}
@media (max-width:560px){.opts{grid-template-columns:1fr}}
.opt{display:flex;align-items:center;gap:.9rem;text-align:left;border:3px solid var(--line);border-radius:8px;padding:1rem 1.1rem;color:#fff;font-weight:800;font-size:clamp(1.02rem,1.9vw,1.3rem);box-shadow:4px 4px 0 var(--line);min-height:4.6rem;width:100%}
.opt svg{flex:none;width:2.2rem;height:2.2rem}
.opt .tag{display:block;font-size:.75rem;font-weight:600;opacity:.9}
.o0{background:var(--sol);color:#0A0A0A}.o1{background:var(--estrella)}.o2{background:var(--corazon)}.o3{background:var(--luna)}
button.opt:hover{filter:brightness(1.06)}
button.opt:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
.opt.dim{opacity:.3}
.opt.win{outline:4px solid var(--ink);outline-offset:3px}
.opt.lost{position:relative}
.opt.lost::after{content:"✗";margin-left:auto;font-size:1.6rem}
.status{margin-top:1rem;text-align:center;font-weight:600;color:var(--muted);min-height:1.5em}
/* resultado */
.verdict{text-align:center;padding:2rem 1rem}
.verdict h2{font-size:clamp(1.8rem,5vw,3rem)}
.verdict.ok h2{color:var(--ok)}.verdict.bad h2{color:var(--bad)}
.verdict p{margin:.8rem 0 0}
.banner{animation:bannerin .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes bannerin{from{transform:scale(.4) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.hostbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.25rem;flex-wrap:wrap}
/* suspenso y final */
.suspense h2{font-size:clamp(2.4rem,7vw,4.6rem);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.drum{display:flex;gap:.6rem;justify-content:center;margin-top:1.5rem}
.drum span{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--corazon);animation:bounce .6s infinite alternate}
.drum span:nth-child(2){background:var(--sol);animation-delay:.15s}.drum span:nth-child(3){background:var(--estrella);animation-delay:.3s}.drum span:nth-child(4){background:var(--luna);animation-delay:.45s}
@keyframes bounce{to{transform:translateY(-14px)}}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;align-items:end;margin-top:1.75rem}
.step{border:3px solid var(--line);border-radius:8px 8px 0 0;text-align:center;padding:1rem .5rem;box-shadow:4px 4px 0 var(--line);color:#fff;animation:rise .7s cubic-bezier(.2,1.2,.4,1) both}
.step .big{font-family:var(--display);font-size:2.4rem}
.step .name{font-weight:800;font-size:1.1rem;overflow-wrap:anywhere}
.s1{background:var(--sol);color:#0A0A0A;min-height:15rem;animation-delay:.9s}.s2{background:var(--estrella);min-height:11rem;animation-delay:.45s}.s3{background:var(--corazon);min-height:8.5rem}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
/* lateral: tabla + chat */
.side{display:grid;gap:1.25rem}
.side h3{font-size:1.25rem;margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.board{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.board li{display:flex;align-items:center;gap:.6rem;border:2px solid var(--line);border-radius:8px;padding:.4rem .6rem;background:var(--soft);font-weight:600;transition:transform .3s}
.board li.me{background:var(--bg)}
.board .pos{font-family:var(--display);width:1.4rem}
.board .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .pts{font-family:var(--display)}
.board .plus{color:var(--ok);font-weight:800;font-size:.85rem;animation:pop .3s ease-out}
.chat{display:flex;flex-direction:column;height:520px;padding:1rem}
@media (max-width:960px){.chat{height:420px}}
.live::before{content:"";width:.65rem;height:.65rem;border-radius:50%;background:var(--accent);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.msgs{flex:1;overflow-y:auto;list-style:none;margin:0;padding:0 .2rem 0 0;display:flex;flex-direction:column;gap:.55rem}
.msg{display:flex;gap:.5rem;align-items:flex-start;animation:slidein .22s ease-out}
.msg .body{background:var(--soft);border:2px solid var(--line);border-radius:4px 10px 10px 10px;padding:.35rem .6rem;max-width:100%;overflow-wrap:anywhere}
.msg .who{font-weight:800;font-size:.85rem}
.msg .when{font-size:.75rem;color:var(--muted);margin-left:.35rem;font-weight:400}
.msg.mine{flex-direction:row-reverse}
.msg.mine .body{background:var(--ink);color:var(--paper);border-radius:10px 4px 10px 10px}
.msg.mine .when{color:inherit;opacity:.7}
.sys{align-self:center;text-align:center;font-size:.9rem;border:2px solid var(--line);border-radius:999px;padding:.25rem .8rem;background:var(--paper);animation:slidein .22s ease-out;max-width:100%}
.sys.miss s{opacity:.7}
.sys.hit{background:var(--ok);color:#fff;font-weight:700}
.sys.info{border-style:dashed;color:var(--muted)}
@keyframes slidein{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.react{display:flex;gap:.35rem;margin:.6rem 0 .5rem}
.react button{border:2px solid var(--line);border-radius:8px;background:var(--soft);padding:.15rem .5rem;font-size:1.05rem}
.compose{display:flex;gap:.5rem}
.compose input{flex:1;min-width:0;border:3px solid var(--line);border-radius:8px;padding:.55rem .7rem;background:var(--soft)}
.compose .btn{padding:.55rem .9rem;box-shadow:3px 3px 0 var(--accent)}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* selector de vista */
.seg{display:inline-flex;border:2px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--paper);padding:.3rem .7rem;font-weight:700;font-size:.88rem;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.rolebadge{display:inline-block;border:2px solid var(--line);border-radius:999px;padding:.1rem .6rem;font-size:.8rem;font-weight:800;background:var(--accent);color:#fff;margin-left:.5rem;vertical-align:middle}
.rolebadge.player{background:var(--estrella)}
/* pista */
.hint{margin-top:.9rem;font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.7rem);letter-spacing:.35em;color:var(--ink)}
.hint small{display:block;font-family:var(--body);letter-spacing:0;font-size:.85rem;color:var(--muted);font-weight:600;margin-top:.2rem}
/* respuesta del jugador */
.answer{display:flex;gap:.6rem;margin-top:1.1rem}
.answer input{flex:1;min-width:0;border:3px solid var(--line);border-radius:8px;padding:.9rem 1rem;background:var(--paper);font-weight:700;font-size:1.3rem;box-shadow:4px 4px 0 var(--line)}
.answer input:focus{outline:none;box-shadow:4px 4px 0 var(--accent)}
.answer .btn{font-size:1.1rem}
.feedback{margin-top:.8rem;text-align:center;font-weight:700;min-height:1.5em}
.feedback.close{color:var(--sol);text-shadow:0 0 0 var(--line)}
.feedback.close{color:#B37F00}
.feedback.miss{color:var(--bad)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* panel admin */
.admin{margin-top:1.1rem;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) auto;align-items:center}
@media (max-width:640px){.admin{grid-template-columns:1fr}}
.secret{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.secret .lbl{font-weight:700;color:var(--muted)}
.secret .val{font-family:var(--display);font-size:1.6rem;padding:.1rem .6rem;border:2px dashed var(--line);border-radius:6px;transition:filter .2s}
.secret .val.hidden{filter:blur(9px);user-select:none}
.secret .alt{font-size:.85rem;color:var(--muted);width:100%}
.stats{display:flex;gap:1.2rem;color:var(--muted);font-weight:600;flex-wrap:wrap}
.stats b{color:var(--ink);font-family:var(--display);font-weight:400;font-size:1.2rem}
.tiny{font-size:.85rem}
.msg.host .body{background:var(--sol);color:#0A0A0A}
.sys.close{border-style:dotted}
/* opciones */
.opt .cnt{margin-left:auto;font-family:var(--display);font-size:1.4rem}
.opt .obar{display:block;height:7px;background:rgba(255,255,255,.4);border-radius:4px;margin-top:.35rem}
.opt .obar i{display:block;height:100%;background:currentColor;border-radius:4px}
.opt.picked{outline:4px solid var(--ink);outline-offset:3px}
.opt.gone{opacity:.15;filter:grayscale(1);pointer-events:none}
.opt.gone .txt{text-decoration:line-through}
.winners{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}
.winners .chip{background:var(--soft)}
.winners .chip b{font-family:var(--display);font-weight:400;margin-left:.3rem;color:var(--ok)}
.winners .chip.first{background:var(--sol);color:#0A0A0A}
.dist{display:grid;gap:.45rem;margin-top:.8rem}
.dist .drow{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 2rem;gap:.6rem;align-items:center;font-weight:700;font-size:.92rem}
.dist .dbar{height:12px;border:2px solid var(--line);border-radius:999px;overflow:hidden;background:var(--soft)}
.dist .dbar i{display:block;height:100%}
.dist.hidden{filter:blur(7px);user-select:none}
.firstbox{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:1rem auto 0;padding:1.2rem 1rem 1.3rem;border:3px solid var(--line);border-radius:10px;background:var(--sol);color:#0A0A0A;box-shadow:5px 5px 0 var(--line);max-width:30rem}
.firstbox .medal{font-size:2.6rem;line-height:1}
.firstbox .av{width:4.2rem;height:4.2rem;font-size:1.5rem;border-width:3px}
.firstbox .fname{font-family:var(--display);font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.05;text-align:center;overflow-wrap:anywhere}
.firstbox .fmeta{font-weight:700}
.others{margin-top:1rem;color:var(--muted);font-weight:700}
.autonext{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.autonext .count{font-family:var(--display);font-size:1.3rem;color:var(--ink)}
.allin{display:inline-block;margin-top:.6rem;border:2px solid var(--line);border-radius:999px;padding:.15rem .8rem;font-weight:800;background:var(--soft)}
.cat{display:inline-block;border:2px solid var(--line);border-radius:999px;padding:.1rem .7rem;font-weight:800;font-size:.8rem;background:var(--paper);position:relative;z-index:1}
.cat-C{background:#E0F7FF}.cat-M{background:#F4E2FA}.cat-A{background:#E6F8EF}
.qtext.qsmall{font-size:clamp(1.1rem,2.2vw,1.4rem)}
.qemoji{font-size:clamp(3.4rem,9vw,5.5rem);line-height:1.1;margin-top:.4rem;letter-spacing:.1em}
.fact{max-width:40rem;margin:.8rem auto 0;background:var(--soft);border:2px dashed var(--line);border-radius:8px;padding:.6rem .9rem;text-align:left}
/* carrera */
.race{padding:.9rem 1rem 1rem;margin-bottom:1.25rem}
.racehead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.racehead h3{font-size:1.3rem}
.racegap{font-weight:800;font-size:.95rem}
.track{position:relative;overflow:hidden;border:3px solid var(--line);border-radius:8px;background:
repeating-linear-gradient(180deg,transparent 0 44px,rgba(10,10,10,.14) 44px 46px) 0 8px/100% 46px,#E9EEEB;height:60px;transition:height .4s}
.track::before{content:"";position:absolute;inset:8px 0 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 22px,transparent 22px 48px) 0 0/48px 46px;
-webkit-mask:repeating-linear-gradient(180deg,transparent 0 21px,#000 21px 25px,transparent 25px 46px);mask:repeating-linear-gradient(180deg,transparent 0 21px,#000 21px 25px,transparent 25px 46px);opacity:.9}
.track::before{animation:road .6s linear infinite}
.track.running::before{animation-duration:.3s}
@keyframes road{to{background-position:-48px 0}}
.finish{position:absolute;top:0;bottom:0;right:10px;width:16px;background:conic-gradient(#0A0A0A 25%,#fff 0 50%,#0A0A0A 0 75%,#fff 0) 0 0/10px 10px;border-left:2px solid var(--line);border-right:2px solid var(--line)}
.car{position:absolute;left:0;top:0;width:132px;height:38px;transition:transform 1.4s cubic-bezier(.34,1.35,.5,1);will-change:transform;z-index:2}
.carin{position:relative;width:100%;height:100%;animation:rumble .35s ease-in-out infinite alternate}
.track.running .carin{animation-name:rumblehard}
@keyframes rumble{to{transform:translateY(-1px)}}
@keyframes rumblehard{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(1px,-2px) rotate(-.6deg)}100%{transform:translate(-1px,0) rotate(.4deg)}}
.cbody{position:absolute;left:6px;right:0;top:3px;height:26px;background:var(--c);color:var(--ink);border:3px solid var(--line);border-radius:10px 22px 8px 8px;display:flex;align-items:center;gap:.3rem;padding:0 1.6rem 0 .3rem;box-shadow:2px 2px 0 var(--line)}
.cwin{position:absolute;right:9px;top:3px;width:14px;height:10px;background:#D9F2FF;border:2px solid var(--line);border-radius:3px 8px 2px 2px}
.crank{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;color:#0A0A0A;border:2px solid var(--line);font-family:var(--display);font-size:.7rem}
.cname{font-weight:800;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wheel{position:absolute;bottom:0;width:14px;height:14px;border-radius:50%;background:#0A0A0A;border:3px solid #0A0A0A;box-shadow:inset 0 0 0 2px #9aa;}
.wheel::after{content:"";position:absolute;inset:3px 1px;border-top:2px solid #cfd;border-bottom:2px solid #cfd}
.w1{left:18px}.w2{right:16px}
.track.running .wheel::after{animation:spin .3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.puff{position:absolute;left:-4px;top:16px;width:9px;height:9px;border-radius:50%;background:rgba(10,10,10,.18);opacity:0}
.track.running .puff{animation:puff .7s ease-out infinite}
.track.running .puff.p2{animation-delay:.35s}
@keyframes puff{0%{opacity:.8;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-22px,-6px) scale(1.8)}}
.car.me .cbody{outline:3px solid var(--ink);outline-offset:2px}
.car.me::before{content:"Tú";position:absolute;left:8px;top:-13px;z-index:3;font-weight:800;font-size:.8rem;background:var(--ink);color:var(--paper);border-radius:4px;padding:0 .3rem}
.car.lead .cbody::after{content:"👑";position:absolute;right:-6px;top:-14px;font-size:.95rem}
.carplus{position:absolute;right:-8px;top:-14px;font-family:var(--display);color:var(--ok);font-size:1rem;opacity:0;pointer-events:none;text-shadow:0 1px 0 #fff}
.carplus.show{animation:plusup 1.8s ease-out forwards}
@keyframes plusup{0%{opacity:0;transform:translateY(8px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.scenery{position:relative;height:120px;overflow:hidden;border:3px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;
background:linear-gradient(180deg,#D9F2FF 0%,#EAF7F0 70%,#E6F8EF 100%)}
.scenery .sun{position:absolute;right:48px;top:12px;width:34px;height:34px;border-radius:50%;background:#FFBC00;border:3px solid #0A0A0A;box-shadow:0 0 0 8px rgba(255,188,0,.25)}
.scenery .layer{position:absolute;left:0;right:0;background-repeat:repeat-x;animation:scroll linear infinite}
.scenery .clouds{top:4px;height:60px;background-image:url("data:image/svg+xml,");background-size:900px 60px;animation-duration:45s;--tile:-900px}
.scenery .far{bottom:10px;height:110px;background-image:url("data:image/svg+xml,");background-size:640px 110px;animation-duration:22s;--tile:-640px}
.scenery .near{bottom:0;height:110px;background-image:url("data:image/svg+xml,");background-size:720px 110px;animation-duration:9s;--tile:-720px}
.scenery .posts{bottom:0;height:40px;background-image:url("data:image/svg+xml,");background-size:260px 40px;animation-duration:1.6s;--tile:-260px}
@keyframes scroll{from{background-position:0 0}to{background-position:var(--tile) 0}}
.scenery.fast .near{animation-duration:4.5s}.scenery.fast .far{animation-duration:12s}.scenery.fast .posts{animation-duration:.8s}
.raceview .track{border-radius:0 0 8px 8px}
.track::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:
linear-gradient(90deg,transparent 0 30%,rgba(255,255,255,.9) 30% 34%,transparent 34%) 0 18%/260px 2px no-repeat,
linear-gradient(90deg,transparent 0 60%,rgba(255,255,255,.9) 60% 63%,transparent 63%) 0 52%/340px 2px no-repeat,
linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.9) 10% 14%,transparent 14%) 0 80%/300px 2px no-repeat}
.track.running::after{opacity:1;animation:streak .7s linear infinite}
@keyframes streak{from{background-position:110% 18%,120% 52%,105% 80%}to{background-position:-40% 18%,-60% 52%,-30% 80%}}
.emptytrack[hidden]{display:none}
.emptytrack{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:var(--muted)}
.car{width:118px;height:38px;transition:transform 1.6s cubic-bezier(.34,1.3,.5,1)}
.car.boost{transition:transform .9s cubic-bezier(.2,1.6,.4,1)}
.drift{width:100%;height:100%;animation:drift 2s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translateX(-5px)}100%{transform:translateX(6px)}}
.carin{animation:rumblehard .22s linear infinite}
@keyframes rumblehard{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(1px,-1.5px) rotate(-.5deg)}50%{transform:translate(0,.5px) rotate(.3deg)}75%{transform:translate(-1px,-1px) rotate(-.3deg)}100%{transform:translate(0,0) rotate(0)}}
.wheel{animation:spin .22s linear infinite;background:conic-gradient(#0A0A0A 0 25%,#C8D4CE 0 50%,#0A0A0A 0 75%,#C8D4CE 0);box-shadow:none}
.wheel::after{display:none}
.track.running .wheel{animation-duration:.12s}
.puff{animation:puff .6s ease-out infinite}.puff.p2{animation-delay:.3s}
.wind{position:absolute;left:-46px;top:4px;width:48px;height:28px;pointer-events:none;background:
linear-gradient(90deg,transparent,rgba(255,255,255,.95)) 0 3px/34px 2px no-repeat,
linear-gradient(90deg,transparent,rgba(255,255,255,.95)) 10px 13px/38px 2px no-repeat,
linear-gradient(90deg,transparent,rgba(255,255,255,.95)) 4px 23px/28px 2px no-repeat;animation:wind .35s linear infinite}
@keyframes wind{0%{transform:translateX(14px);opacity:0}30%{opacity:1}100%{transform:translateX(-18px);opacity:0}}
.track.running .wind{animation-duration:.2s}
.flame{position:absolute;left:-18px;top:9px;width:26px;height:14px;border-radius:50% 0 0 50%;background:radial-gradient(circle at 100% 50%,#FFF3CC 0 20%,#FFBC00 35%,#FF6B35 65%,transparent 72%);opacity:0;transform-origin:right center}
.car.boost .flame{opacity:1;animation:flame .08s linear infinite alternate}
@keyframes flame{from{transform:scaleX(.8)}to{transform:scaleX(1.5)}}
.car.boost .wind{left:-90px;width:92px;background-size:80px 3px,90px 3px,70px 3px;animation-duration:.12s}
.car.boost .carin{animation:boostshake .09s linear infinite}
@keyframes boostshake{0%{transform:translate(0,-1px) skewX(-8deg)}100%{transform:translate(1px,1px) skewX(-8deg)}}
.boosttag{position:absolute;left:10px;top:-16px;font-family:var(--display);font-size:.8rem;color:#0A0A0A;background:#FFBC00;border:2px solid var(--line);border-radius:4px;padding:0 .35rem;opacity:0;pointer-events:none;transform:rotate(-6deg)}
.car.boost .boosttag{animation:boosttag 2s ease-out forwards}
@keyframes boosttag{0%{opacity:0;transform:rotate(-6deg) scale(.5)}12%{opacity:1;transform:rotate(-6deg) scale(1.2)}75%{opacity:1}100%{opacity:0;transform:rotate(-6deg) translateY(-8px)}}
.car.me::before{left:auto;right:4px;top:-13px}
.finish{display:none}
.drift{animation:none;transition:transform 1.2s cubic-bezier(.45,.05,.35,1)}
.lap{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem;flex-wrap:wrap}
.laplbl{font-weight:800;font-size:.9rem}
.lapbar{position:relative;flex:1;min-width:160px;height:14px;border:2px solid var(--line);border-radius:999px;background:repeating-linear-gradient(90deg,var(--soft) 0 10px,#fff 10px 20px)}
.lapbar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:999px;transition:width 1.2s ease;width:0}
.lapcar{position:absolute;top:50%;left:0;transform:translate(-50%,-55%);font-size:1.25rem;transition:left 1.2s ease;filter:drop-shadow(1px 1px 0 #0A0A0A)}
.lapflag{font-size:1.2rem}
.lappct{font-family:var(--display);font-weight:400;font-size:1.35rem;min-width:3.2rem;text-align:right}
.lapsub{color:var(--muted);font-weight:600;font-size:.88rem}
.race{margin-bottom:1.25rem}
.car.offscreen{opacity:0}
.car{transition:transform 1.6s cubic-bezier(.34,1.3,.5,1),opacity .6s}
.car.boost{transition:transform .9s cubic-bezier(.2,1.6,.4,1),opacity .4s}
.behind{position:absolute;left:8px;bottom:8px;z-index:200;background:var(--ink);color:var(--paper);font-weight:800;font-size:.82rem;border-radius:999px;padding:.2rem .7rem;box-shadow:2px 2px 0 var(--accent)}
.behind[hidden]{display:none}
.narr{display:flex;gap:.45rem;align-items:flex-start;font-size:.95rem;line-height:1.35;animation:slidein .22s ease-out;padding:.35rem .5rem;border-left:4px solid var(--accent);background:var(--soft);border-radius:0 8px 8px 0}
.narr .mic{flex:none}
.narr.hot{border-left-color:var(--sol);background:#FFF6D6;font-weight:600}
.narr.big{border-left-color:var(--corazon);background:#F4E2FA;font-weight:800;font-size:1.05rem}
.narr.soft{color:var(--muted);font-style:italic;border-left-color:#B9CFC3}
.reacthint{margin:.2rem 0 0;font-size:.8rem;color:var(--muted);text-align:center}
.chat{height:560px}
/* estacionados en la salida hasta la primera pregunta */
.race.parked .layer,.race.parked .track::before,.race.parked .wheel,.race.parked .wind,.race.parked .puff{animation-play-state:paused}
.race.parked .wind,.race.parked .puff{opacity:0}
.race.parked .carin{animation-duration:.5s;animation-name:idle}
@keyframes idle{50%{transform:translateY(-.6px)}}
.race.launch .drift{animation:launch 1.2s cubic-bezier(.3,1.4,.5,1)}
@keyframes launch{0%{transform:translateX(0)}18%{transform:translateX(-6px)}100%{transform:translateX(0)}}
.readwrap{margin-top:.8rem;text-align:center;color:var(--muted);font-weight:600;font-size:.92rem}
.readtrack{height:8px;border:2px solid var(--line);border-radius:999px;background:var(--soft);overflow:hidden;margin-top:.35rem}
.readtrack i{display:block;height:100%;width:100%;background:var(--estrella);transition:width .2s linear}
.raceview{position:relative}
.raceview .scenery{z-index:1}
/* la pista deja salir hacia arriba las etiquetas (¡BOOST!, +puntos, corona, "Tú") sobre la ciudad; a los lados sigue recortando */
.track{overflow:visible;clip-path:inset(-70px 0 0 0);z-index:2}
/* contador de lectura */
.readring-row{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.readring{--p:360deg;position:relative;width:72px;height:72px;border-radius:50%;border:3px solid var(--line);background:conic-gradient(var(--estrella) var(--p),var(--soft) 0);box-shadow:3px 3px 0 var(--line);flex:none}
.readring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.readring b{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-family:var(--display);font-weight:400;font-size:1.9rem}
.readring.urgent{background:conic-gradient(var(--corazon) var(--p),var(--soft) 0);animation:tick 1s ease-in-out infinite}
@keyframes tick{50%{transform:scale(1.07)}}
.readtxt{display:flex;flex-direction:column;text-align:left;line-height:1.3}
.readtxt strong{font-family:var(--display);font-weight:400;font-size:1.2rem}
.readtxt span{color:var(--muted);font-weight:600}
/* más velocidad */
.track::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.98) 0 34px,transparent 34px 60px) 0 0/60px 46px;animation:road .3s linear infinite}
.track.running::before{animation-duration:.18s}
@keyframes road{to{background-position:-60px 0}}
.scenery .clouds{animation-duration:36s}
.scenery .far{animation-duration:16s}
.scenery .near{animation-duration:6s}
.scenery .posts{animation-duration:1.1s}
.scenery.fast .far{animation-duration:10s}
.scenery.fast .near{animation-duration:3.4s}
.scenery.fast .posts{animation-duration:.62s}
.scenery .posts{filter:blur(.3px)}
.scenery.fast .posts{filter:blur(.7px)}
.scenery::after{content:"";position:absolute;inset:0;pointer-events:none;background:
linear-gradient(90deg,transparent,rgba(255,255,255,.85) 40%,transparent) 0 30%/120px 2px no-repeat,
linear-gradient(90deg,transparent,rgba(255,255,255,.85) 40%,transparent) 0 62%/160px 2px no-repeat,
linear-gradient(90deg,transparent,rgba(255,255,255,.85) 40%,transparent) 0 85%/90px 2px no-repeat;animation:skywind .95s linear infinite;z-index:2}
@keyframes skywind{from{background-position:115% 30%,130% 62%,110% 85%}to{background-position:-20% 30%,-40% 62%,-15% 85%}}
.race.parked .scenery::after{animation-play-state:paused;opacity:0}
.track::after{opacity:.6;animation:streak .75s linear infinite}
.track.running::after{opacity:.9;animation-duration:.5s}
.race.parked .track::after{opacity:0;animation-play-state:paused}
.wind{animation-duration:.32s}
.track.running .wind{animation-duration:.22s}
.wheel{animation-duration:.2s}
.track.running .wheel{animation-duration:.13s}
/* alerta de resultado al frente */
.modalback{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:1rem;background:rgba(221,234,226,.3);animation:fadein .25s ease-out}
.modalback[hidden]{display:none}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.resultbox{width:min(560px,100%);max-height:calc(100vh - 2rem);overflow:auto;padding:1.5rem 1.4rem;box-shadow:8px 8px 0 var(--line)}
.resultbox h2{font-size:clamp(1.7rem,4.5vw,2.5rem)}
.resultbox .firstbox{padding:.9rem 1rem 1rem}
.resultbox .firstbox .av{width:3.4rem;height:3.4rem;font-size:1.2rem}
.resultbox .firstbox .fname{font-size:clamp(1.5rem,4vw,2.2rem)}
.resultbox .readring-row{margin-top:1.1rem;padding-top:1rem;border-top:2px dashed var(--line)}
.modalctl{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.confetti{z-index:60}
/* poderes */
.powers{margin-top:1rem;border:3px solid var(--line);border-radius:8px;background:var(--paper);padding:.7rem .8rem;box-shadow:4px 4px 0 var(--line)}
.powhead{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.powhead strong{font-family:var(--display);font-weight:400;font-size:1.15rem}
.mymult{font-weight:700;color:var(--muted)}.mymult b{font-family:var(--display);font-weight:400;color:var(--ink);font-size:1.2rem}
.powrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
@media (max-width:760px){.powrow{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pow{display:flex;flex-direction:column;align-items:center;gap:.1rem;border:2px solid var(--line);border-radius:8px;background:var(--soft);padding:.45rem .3rem;text-align:center;opacity:.5;filter:grayscale(.8);cursor:not-allowed}
.pow .pico{font-size:1.6rem;line-height:1}
.pow .pname{font-weight:800;font-size:.8rem;line-height:1.1}
.pow .pwhy{font-size:.7rem;color:var(--muted);line-height:1.15}
.pow.ready{opacity:1;filter:none;cursor:pointer;background:#FFF6D6;box-shadow:3px 3px 0 var(--line);animation:powglow 1.4s ease-in-out infinite}
.pow.ready:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.pow.used{opacity:.8;filter:none;background:var(--ink);color:var(--paper)}.pow.used .pwhy{color:var(--sol);font-weight:800}
@keyframes powglow{50%{box-shadow:3px 3px 0 var(--line),0 0 0 4px rgba(255,188,0,.45)}}
.powlog{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.8rem}
.powlog .lbl{font-weight:700;color:var(--muted)}
.powlog .chip{padding:.15rem .6rem}
/* chile en los ojos */
.salsa{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:
radial-gradient(circle at 20% 30%,#D6334A 0 60px,transparent 62px),radial-gradient(circle at 75% 25%,#E24A3B 0 80px,transparent 82px),
radial-gradient(circle at 55% 70%,#C8243A 0 95px,transparent 97px),radial-gradient(circle at 15% 80%,#E24A3B 0 55px,transparent 57px),
radial-gradient(circle at 90% 75%,#D6334A 0 70px,transparent 72px),rgba(214,51,74,.78);animation:salsa 6s linear forwards}
.salsa span{background:#fff;border:3px solid var(--line);border-radius:8px;padding:.3rem .8rem;font-weight:800;box-shadow:3px 3px 0 var(--line)}
@keyframes salsa{0%{opacity:0;transform:scale(1.1)}6%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
/* multiplicadores en el resultado */
.mt{font-style:normal;display:inline-block;margin-left:.3rem;border:2px solid var(--line);border-radius:6px;padding:0 .3rem;font-weight:800;font-size:.78rem;background:#fff;color:#0A0A0A}
.mt.up{background:#E6F8EF}.mt.down{background:#FDE3E6}.mt.luck{background:var(--sol);animation:tick .8s ease-in-out infinite}
.luckbanner{margin:-.4rem auto .8rem;max-width:30rem;background:repeating-linear-gradient(45deg,#FFBC00 0 14px,#FFD34D 14px 28px);border:3px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-family:var(--display);font-size:clamp(1.3rem,4vw,1.9rem);color:#0A0A0A;box-shadow:4px 4px 0 var(--line);animation:bannerin .6s cubic-bezier(.2,1.4,.4,1) both}
.luckbanner b{font-weight:400;color:#00753D}
/* efectos en la carrera */
.car.turbo .flame{opacity:1;animation:flame .1s linear infinite alternate}
.car.shield .cbody{box-shadow:0 0 0 4px rgba(0,195,255,.55),0 0 14px 4px rgba(0,195,255,.6),2px 2px 0 var(--line)}
.car.chiled .cbody::before{content:"🌶️";position:absolute;left:-12px;top:-14px;font-size:1rem}
.car.chiled .cwin{background:#D6334A}
.car.spin .carin{animation:carspin 1.2s cubic-bezier(.3,.7,.4,1) !important}
@keyframes carspin{0%{transform:rotate(0)}70%{transform:rotate(-700deg) translateX(-8px)}100%{transform:rotate(-720deg)}}
.car.spin::after{content:"🍌";position:absolute;left:128px;top:6px;font-size:1.3rem}
.car.lucky .boosttag{background:var(--corazon);color:#fff}
.car.lucky.boost .cbody{box-shadow:0 0 0 4px #FFBC00,0 0 18px 6px rgba(255,188,0,.8),2px 2px 0 var(--line)}
.powrow{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.powrow{grid-template-columns:1fr}}
.pow{align-items:stretch;text-align:left;gap:.3rem;padding:.6rem .7rem}
.ptop{display:flex;align-items:center;gap:.45rem}
.pow .pico{font-size:1.7rem}
.pow .pname{font-size:1.05rem;font-family:var(--display);font-weight:400}
.pdoes{font-size:.88rem;line-height:1.3;color:var(--ink)}
.pwhen{font-size:.76rem;line-height:1.25;color:var(--muted);font-weight:700;border-top:1px dashed var(--line);padding-top:.3rem}
.pow.ready .pwhen{color:#00753D}
.puse{align-self:flex-start;margin-top:.1rem;background:var(--ink);color:var(--paper);border-radius:6px;padding:.1rem .55rem;font-weight:800;font-size:.8rem}
.pow.used .pdoes{color:var(--paper)}
/* ---------- conexión / multijugador ---------- */
.conn{font-size:.8rem;font-weight:800;padding:.2rem .6rem;border-radius:999px;background:var(--paper);border:2px solid var(--line);opacity:.6}
.conn.ok{opacity:1;background:var(--soft);color:var(--accent-dark)}
.board li.offline .nm,.car.offline{opacity:.5}
.chip .kick{border:0;background:transparent;font-size:.8rem;padding:0 .1rem;margin-left:.2rem;color:var(--muted);line-height:1}
.chip .kick:hover{color:var(--bad)}
.sharelink{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.sharelink code{background:var(--paper);border:2px solid var(--line);border-radius:8px;padding:.3rem .6rem;font-size:.95rem;user-select:all}
.dev button.danger{border-color:var(--bad);color:var(--bad);font-weight:800}
.dev button.danger:hover{background:var(--bad);color:#fff}
.tiny.mt{margin-top:1rem}
/* ---------- pantallas chicas (jugador en celular) ---------- */
@media (max-width:600px){
body{font-size:.95rem;line-height:1.35}
.wrap{padding:.6rem .6rem 1.5rem}
.top{margin-bottom:.6rem;gap:.4rem}
.top h1{font-size:1.35rem}
.top p{display:none}
.rolebadge{font-size:.7rem;padding:.05rem .45rem}
.dev{padding:.25rem .45rem;font-size:.8rem;gap:.35rem}
.layout{gap:.8rem}
.card{border-width:2px;box-shadow:4px 4px 0 var(--line)}
.btn{padding:.55rem .9rem;font-size:.95rem;border-width:2px}
.hero{padding:1.3rem .9rem}
.hero h2{font-size:clamp(1.6rem,8vw,2.2rem)}
.hero p{margin-top:.6rem;font-size:.92rem}
.chips{margin-top:.8rem;gap:.35rem;min-height:0}
.chip{font-size:.85rem;padding:.15rem .6rem .15rem .2rem}
.qcard{padding:1.7rem .9rem 1rem}
.qtext{font-size:1.15rem;max-width:none;margin-top:.4rem}
.qtext.qsmall{font-size:1rem}
.qemoji{font-size:2.6rem}
.qask{font-size:.9rem}
.bignum{font-size:3rem}
.qnum{font-size:.95rem;top:.4rem;left:.6rem}
.qcount{font-size:.75rem}
.timerrow{margin-top:.7rem;gap:.5rem}
.secs{font-size:1.1rem;min-width:2rem}
.opts{gap:.5rem;margin-top:.7rem}
.opt{padding:.6rem .7rem;gap:.6rem;font-size:.95rem;border-width:2px}
.opt svg{width:1.6rem;height:1.6rem}
.opt .tag{font-size:.68rem}
.opt .cnt{font-size:1.1rem}
.opt.win,.opt.picked{outline-width:3px;outline-offset:2px}
.status{margin-top:.6rem;font-size:.88rem;min-height:0}
.powers{margin-top:.7rem;padding:.5rem .55rem;border-width:2px;box-shadow:3px 3px 0 var(--line)}
.powhead{font-size:.88rem}
.mymult{font-size:.8rem}
.powrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.pow{padding:.4rem .4rem;gap:.15rem;align-items:center;text-align:center}
.pow .pico{font-size:1.3rem}
.pow .pname{font-size:.85rem}
.pdoes{display:none}
.pwhen{font-size:.66rem;border-top:0;padding-top:0}
.puse{font-size:.7rem;align-self:center}
.race{padding:.5rem .6rem .6rem;margin-bottom:.8rem}
.racehead h3{font-size:1rem}
.racegap{font-size:.78rem}
.lap{gap:.4rem;margin-bottom:.4rem;font-size:.8rem}
.laplbl,.lapsub{font-size:.72rem}
.side{gap:.8rem}
.side h3{font-size:1.05rem;margin-bottom:.4rem}
.board{gap:.25rem}
.board li{padding:.25rem .45rem;gap:.4rem;font-size:.88rem}
.board .av{width:1.5rem;height:1.5rem;font-size:.65rem}
.chat{height:300px;padding:.6rem}
.msgs{gap:.4rem;font-size:.85rem}
.react button{padding:.1rem .4rem;font-size:.95rem}
.reacthint{font-size:.72rem}
.modalback{padding:.5rem}
.resultbox{padding:1rem .8rem;max-height:calc(100vh - 1rem);box-shadow:5px 5px 0 var(--line)}
.resultbox h2{font-size:1.5rem}
.resultbox p{font-size:.92rem;margin-top:.5rem}
.resultbox .fact{font-size:.85rem}
.resultbox .firstbox{padding:.6rem .7rem .7rem;margin-top:.7rem}
.resultbox .firstbox .av{width:2.6rem;height:2.6rem;font-size:1rem}
.resultbox .firstbox .fname{font-size:1.3rem}
.resultbox .firstbox .fmeta{font-size:.82rem}
.firstbox .medal{font-size:1.8rem}
.winners .chip{font-size:.8rem}
.readring{width:3rem;height:3rem;font-size:1rem}
.podium{gap:.4rem;margin-top:1rem}
.step{padding:.6rem .3rem;font-size:.85rem}
.step .big{font-size:1.6rem}
.step .name{font-size:.9rem}
.sharelink code{font-size:.8rem}
}
/* ---------- marca: Yuhu Kars (logo yuhu.mx + KARS estilo kart) ---------- */
.brand{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:inherit;line-height:1}
.brand-yuhu{height:1.8rem;width:auto;display:block;flex:none}
.brand-kars{font-family:var(--display);font-size:1.75rem;letter-spacing:.03em;color:var(--sol);-webkit-text-stroke:2px var(--line);paint-order:stroke fill;transform:skewX(-8deg);display:inline-block;position:relative;text-shadow:3px 3px 0 var(--line)}
.brand-kars span{display:inline-block;background:repeating-linear-gradient(45deg,var(--sol) 0 6px,#FFD75E 6px 12px);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px var(--line);paint-order:stroke fill}
.brand-kars::after{content:"";position:absolute;left:-.3rem;right:-.3rem;bottom:-.35rem;height:.32rem;background:repeating-linear-gradient(90deg,var(--ink) 0 .32rem,#fff .32rem .64rem);border:1px solid var(--ink);transform:skewX(8deg)}
.racehead{align-items:center}
.racehead .conn{margin-left:auto}
.racehead .racegap{flex:1 1 12rem;text-align:right}
.toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.88rem;margin-bottom:.7rem;padding:.35rem .6rem;border:2px dashed var(--muted);border-radius:8px;color:var(--muted)}
.toolbar select,.toolbar button{border:2px solid var(--line);border-radius:6px;background:var(--paper);padding:.2rem .5rem;font-size:.85rem}
.toolbar .rolebadge{margin:0}
.toolbar button.danger{border-color:var(--bad);color:var(--bad);font-weight:800;margin-left:auto}
.toolbar button.danger:hover{background:var(--bad);color:#fff}
/* ---------- laptops (MacBook 14": ~1512×830 útiles) — todo debe caber sin scroll durante la pregunta ---------- */
@media (min-width:961px) and (max-height:960px){
body{font-size:.95rem}
.wrap{padding:.6rem .9rem 1.2rem}
.card{box-shadow:4px 4px 0 var(--line)}
.race{padding:.5rem .8rem .7rem;margin-bottom:.8rem}
.brand-yuhu{height:1.5rem}.brand-kars{font-size:1.45rem}
.scenery{height:64px}
.scenery .far{bottom:-30px}.scenery .near{bottom:-36px}.scenery .clouds{top:-14px}.scenery .sun{top:4px;width:24px;height:24px;right:32px}
.lap{margin-bottom:.4rem;font-size:.85rem}
.lapbar{height:10px}
.hero{padding:1.4rem 1.2rem}
.hero h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.hero p{margin-top:.6rem}
.chips{margin-top:.8rem}
.qcard{padding:1.6rem 1.2rem 1rem}
.qtext{font-size:clamp(1.15rem,1.9vw,1.55rem);margin-top:.4rem}
.qtext.qsmall{font-size:1.05rem}
.qemoji{font-size:clamp(2.4rem,5vw,3.6rem)}
.qask{margin-top:.4rem;font-size:.9rem}
.bignum{font-size:clamp(3rem,6vw,4.5rem)}
.timerrow{margin-top:.6rem}
.opts{gap:.55rem;margin-top:.6rem}
.opt{padding:.6rem .8rem;font-size:1rem;gap:.6rem}
.opt svg{width:1.7rem;height:1.7rem}
.powers{margin-top:.6rem;padding:.5rem .6rem}
.powhead{margin-bottom:.3rem}.powhead strong{font-size:1rem}
.pow{padding:.4rem .55rem;gap:.15rem}
.pow .pico{font-size:1.3rem}.pow .pname{font-size:.95rem}
.pdoes{font-size:.8rem;line-height:1.2}.pwhen{font-size:.7rem;padding-top:.2rem}
.status{margin-top:.5rem;font-size:.88rem;min-height:0}
.side{gap:.8rem}
.side h3{font-size:1.05rem;margin-bottom:.4rem}
.board{gap:.3rem}
.board li{padding:.3rem .5rem;font-size:.9rem}
.board .av{width:1.6rem;height:1.6rem;font-size:.7rem}
.chat{height:clamp(220px,34vh,360px);padding:.7rem}
.msgs{gap:.4rem;font-size:.88rem}
.resultbox{padding:1.1rem 1.1rem;max-height:calc(100vh - 1.5rem)}
.resultbox h2{font-size:clamp(1.4rem,3vw,2rem)}
.resultbox .firstbox{padding:.6rem .8rem .7rem;margin-top:.6rem}
.resultbox .firstbox .fname{font-size:clamp(1.3rem,2.6vw,1.8rem)}
.readring{width:56px;height:56px}
}
@media (max-width:600px){
.brand-yuhu{height:1.2rem}.brand-kars{font-size:1.2rem;-webkit-text-stroke:1.5px var(--line);text-shadow:2px 2px 0 var(--line)}
.racehead{gap:.4rem}
.racehead .racegap{flex-basis:100%;text-align:left;order:3}
.toolbar{font-size:.78rem;gap:.3rem;padding:.3rem .4rem}
}
/* ---------- me aventaron un poder: banner arriba, no tapa la pregunta ---------- */
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,2px) rotate(-.4deg)}40%,60%{transform:translate(7px,-1px) rotate(.4deg)}}
@keyframes shakesoft{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
body.shake{animation:shake .8s cubic-bezier(.36,.07,.19,.97) both}
body.shake-soft{animation:shakesoft .35s ease-in-out 2}
@keyframes hitin{from{opacity:0;transform:translate(-50%,-120%)}to{opacity:1;transform:translate(-50%,0)}}
.hittoast{position:fixed;left:50%;top:.6rem;transform:translate(-50%,0);z-index:60;display:flex;align-items:center;gap:.7rem;width:min(560px,calc(100% - 1.2rem));padding:.55rem .9rem;border:3px solid var(--line);border-radius:12px;background:#FFD75E;color:var(--ink);box-shadow:5px 5px 0 var(--line);animation:hitin .35s cubic-bezier(.2,1.3,.4,1) both;transition:opacity .4s,transform .4s;pointer-events:none}
.hittoast.ok{background:#CFF3FF}
.hittoast.out{opacity:0;transform:translate(-50%,-120%)}
.hittoast .hicon{font-size:1.9rem;line-height:1;flex:none;filter:drop-shadow(1px 1px 0 var(--line))}
.hittoast strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1rem,2.2vw,1.25rem);line-height:1.1}
.hittoast p{margin:.15rem 0 0;font-weight:700;font-size:.85rem;line-height:1.25}
@media (max-width:600px){.hittoast{padding:.45rem .6rem;gap:.5rem}.hittoast .hicon{font-size:1.5rem}.hittoast strong{font-size:.95rem}.hittoast p{font-size:.78rem}}
/* ---------- sonido ---------- */
.soundbtn{border:2px solid var(--line);border-radius:999px;background:var(--paper);width:2rem;height:2rem;padding:0;font-size:1rem;line-height:1;flex:none}
.soundbtn.off{opacity:.55}
@keyframes sndpulse{50%{box-shadow:0 0 0 6px rgba(0,206,128,.35)}}
.soundbtn.pending{animation:sndpulse 1.2s ease-in-out infinite}
/* ---------- intro antes de entrar ---------- */
.intro{text-align:left}
.intro .cat{margin-bottom:.4rem}
.intro h2{font-size:clamp(1.7rem,4.5vw,2.8rem);text-align:left}
.intro p{margin:.6rem 0 0;max-width:none}
.nowrap{white-space:nowrap}
.how{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.how li{border:2px solid var(--line);border-radius:10px;padding:.5rem .8rem;background:var(--soft);font-weight:600;line-height:1.35}
.dots{display:flex;gap:.4rem;justify-content:center;margin-top:1rem}
.dots i{width:.6rem;height:.6rem;border-radius:50%;border:2px solid var(--line);background:var(--paper)}
.dots i.on{background:var(--accent)}
@media (max-width:600px){.intro h2{font-size:1.4rem}.how{gap:.35rem}.how li{padding:.4rem .6rem;font-size:.88rem}}
@media (min-width:961px) and (max-height:960px){.how{gap:.35rem}.how li{padding:.4rem .7rem;font-size:.9rem}}
/* alertas de suspenso/ganador comparten el estilo del resultado */
.resultbox .podium{margin-top:1rem}
.resultbox.suspense h2{color:var(--ink)}
.resultbox .drum{margin:.8rem auto 0}
/* ---------- tarjeta de sonido (abajo de la tabla) ---------- */
.soundcard{padding:.7rem .9rem}
.soundrow{display:flex;align-items:center;gap:.6rem}
.volwrap{flex:1;display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.85rem;color:var(--muted)}
.volwrap input{flex:1;accent-color:var(--accent);min-width:0}
.volpct{font-family:var(--display);font-weight:400;min-width:3.2rem;text-align:right;font-size:.9rem}
.soundhint{margin:.4rem 0 0;color:var(--accent-dark)}
.soundhint[hidden]{display:none}
/* ---------- pregunta a la izquierda, respuestas a la derecha (bajo la carrera) ---------- */
.qgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start}
.qgrid .qleft,.qgrid .qright{min-width:0}
.qgrid .opts{grid-template-columns:1fr;margin-top:0}
.qgrid .qcard{margin:0}
.qgrid .status{margin-top:.6rem}
@media (max-width:960px){.qgrid{grid-template-columns:1fr;gap:.7rem}.qgrid .opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.qgrid .opts{grid-template-columns:1fr}}
@media (min-width:961px) and (max-height:960px){.qgrid{gap:.7rem}.qgrid .opt{padding:.7rem .9rem}}
@media (max-width:600px){.powrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qgrid .powrow{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ---------- tabla de poderes compacta (columna derecha) ---------- */
.powerscard{padding:.7rem .9rem}
.powerscard h3{display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem;margin-bottom:.4rem}
.powerscard .mymult{font-size:.85rem}
.powlist{display:grid;gap:.3rem}
.pw{display:grid;grid-template-columns:1.6rem 1fr auto;align-items:center;gap:.5rem;border:2px solid var(--line);border-radius:8px;background:var(--soft);padding:.3rem .55rem;text-align:left;font:inherit;opacity:.55;filter:grayscale(.6);cursor:not-allowed}
.pw .pwico{font-size:1.15rem;line-height:1}
.pw .pwname{font-weight:800;font-size:.9rem;line-height:1.1}
.pw .pwname small{font-weight:600;color:var(--muted);font-size:.72rem}
.pw .pwstate{font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.pw.ready{opacity:1;filter:none;cursor:pointer;background:#FFF6D6;box-shadow:3px 3px 0 var(--line);animation:powglow 1.4s ease-in-out infinite}
.pw.ready .pwstate{color:#00753D}
.pw.ready:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.pw.used{opacity:.8;filter:none;background:var(--ink);color:var(--paper)}.pw.used .pwstate,.pw.used .pwname small{color:var(--sol)}
/* derrape: aviso dentro de la tarjeta, no tapa la pregunta */
.slipbar{margin-top:.7rem;border:2px dashed var(--line);border-radius:8px;padding:.35rem .7rem;background:#FFF6D6;font-weight:700;font-size:.9rem;text-align:center}
.slipbar b{font-family:var(--display);font-weight:400;font-size:1.1rem}
/* pregunta: tipografía más chica para textos largos */
.qtext{font-size:clamp(1.1rem,2.2vw,1.55rem);max-width:none;line-height:1.25}
.qtext.qsmall{font-size:clamp(1rem,1.8vw,1.2rem)}
@media (min-width:961px) and (max-height:960px){.qtext{font-size:clamp(1rem,1.6vw,1.3rem)}.qtext.qsmall{font-size:.95rem}}
@media (max-width:600px){.qtext{font-size:1.05rem}}
/* ---------- bomba global: toda la pantalla tiembla y se desenfoca ---------- */
@keyframes bombshake{0%{transform:translate(0,0) rotate(0)}20%{transform:translate(-6px,3px) rotate(-.6deg)}40%{transform:translate(5px,-4px) rotate(.5deg)}60%{transform:translate(-4px,-3px) rotate(-.4deg)}80%{transform:translate(6px,4px) rotate(.6deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes bombblur{0%,100%{filter:blur(1.2px) contrast(1.05)}50%{filter:blur(2.6px) contrast(1.15) saturate(1.3)}}
body.bombed .wrap{animation:bombshake .14s linear infinite,bombblur .5s ease-in-out infinite}
body.bombed .modalback{filter:blur(2px)}
.hittoast .hleft{margin-left:auto;font-family:var(--display);font-size:1.6rem;min-width:1.6rem;text-align:right}
/* ---------- notificaciones del presentador (abajo a la izquierda) ---------- */
.notes{position:fixed;left:.8rem;bottom:.8rem;z-index:55;display:grid;gap:.4rem;max-width:min(360px,calc(100% - 1.6rem))}
@keyframes notein{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
.note{border:2px solid var(--line);border-radius:10px;background:var(--paper);padding:.5rem .8rem;font-weight:700;font-size:.85rem;box-shadow:3px 3px 0 var(--line);animation:notein .3s ease-out both;transition:opacity .4s}
.note.warn{background:#FFF6D6}.note.ok{background:var(--soft)}
.note.out{opacity:0}
/* ---------- flama en la barra de recorrido: se aviva conforme avanza, estalla al 100 % ---------- */
.lapbar{--heat:0;overflow:visible}
.lapfill,#lapFill{background:linear-gradient(90deg,var(--accent) 0%,var(--accent) calc(100% - 40px),#FFBC00 100%)}
.lapfire{position:absolute;top:50%;left:0;width:44px;height:30px;transform:translate(-92%,-52%);pointer-events:none;transition:left 1.2s ease;opacity:calc(.2 + var(--heat) * .8);filter:drop-shadow(0 0 3px rgba(255,120,0,calc(var(--heat) * .8)))}
.lapfire i{position:absolute;bottom:4px;left:50%;width:14px;height:22px;border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 100%,#FFF6C2 0%,#FFBC00 32%,#FF6B35 62%,rgba(214,51,74,0) 100%);filter:blur(.8px);transform-origin:50% 100%;animation:flick .34s ease-in-out infinite alternate;mix-blend-mode:normal}
.lapfire i:nth-child(1){left:70%;height:14px;animation-duration:.22s}
.lapfire i:nth-child(2){left:52%;height:24px;animation-duration:.3s;animation-delay:.08s}
.lapfire i:nth-child(3){left:34%;height:18px;animation-duration:.26s;animation-delay:.14s}
.lapfire i:nth-child(4){left:18%;height:11px;animation-duration:.2s;animation-delay:.04s;opacity:.8}
@keyframes flick{from{transform:translateX(-50%) scale(calc(.55 + var(--heat) * .55),calc(.6 + var(--heat) * .7)) skewX(-10deg)}to{transform:translateX(-50%) scale(calc(.7 + var(--heat) * .6),calc(.8 + var(--heat) * .9)) skewX(10deg)}}
.lapbar.hot .lapfire i{animation-duration:.16s}
.lapbar.hot .lapfire{filter:drop-shadow(0 0 5px rgba(255,120,0,calc(.3 + var(--heat) * .7)))}
@keyframes burst{0%{transform:translate(-92%,-52%) scale(1)}40%{transform:translate(-92%,-52%) scale(1.9)}100%{transform:translate(-92%,-52%) scale(1.3)}}
.lapbar.done .lapfire{animation:burst .9s cubic-bezier(.2,1.4,.4,1) both;opacity:1}
.lapbar.done .lapfire i{animation-duration:.12s}
@keyframes flagwave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.lapbar.done ~ .lapflag{display:inline-block;animation:flagwave .5s ease-in-out infinite;transform-origin:bottom left}
@media (prefers-reduced-motion:reduce){.lapfire i,.lapbar.done .lapfire,.lapbar.done ~ .lapflag{animation:none!important}}
.btn.ghost.danger{border-color:var(--bad);color:var(--bad)}
.btn.ghost.danger:hover{background:var(--bad);color:#fff}
/* ---------- modalidad (admin, lobby) ---------- */
.modecard{margin-bottom:1rem}
.modehead{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.modehead strong{font-family:var(--display);font-weight:400;font-size:1.3rem}
.modehead select{margin-left:auto;border:2px solid var(--line);border-radius:6px;background:var(--paper);padding:.25rem .5rem;font:inherit;font-size:.9rem}
.modedesc{margin:.5rem 0 0;font-weight:600;line-height:1.4}
.modeall{margin-top:.5rem;font-size:.88rem;color:var(--muted)}
.modeall summary{cursor:pointer;font-weight:700}
.modeall p{margin:.4rem 0 0}