*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:"Trebuchet MS",system-ui,sans-serif;color:#fff;min-height:100dvh;background:#1a0b2e;touch-action:manipulation}
/* Fundo animado: bobines / filamento a escorrer (SVG + CSS) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 10%,#46178f88,transparent 50%),
    radial-gradient(ellipse at 80% 90%,#1368ce66,transparent 45%),
    linear-gradient(160deg,#0d0618 0%,#1a0b2e 40%,#0a1628 100%);
  background-size:100% 100%}
.filament-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.45}
.filament-bg svg{position:absolute;width:100%;height:100%}
.filament-bg .spool{animation:spin 28s linear infinite;transform-origin:center}
.filament-bg .flow{stroke-dasharray:8 14;animation:flow 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flow{to{stroke-dashoffset:-88}}
.wrap{position:relative;z-index:1;max-width:1100px;margin:auto;padding:12px;text-align:center;height:100%;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:16px;margin:10px 0;backdrop-filter:blur(8px)}
h1{font-size:clamp(1.6rem,5vw,2.6rem);margin:.3em 0;text-shadow:0 2px 12px #0008}
h2{font-size:clamp(1.2rem,3.5vw,1.8rem)}
.logo{font-size:2.6em;animation:wob 2s ease-in-out infinite;display:inline-block}
@keyframes wob{50%{transform:rotate(-8deg) scale(1.1)}}
input,select{font-size:max(20px,1.15em);padding:14px;border-radius:14px;border:2px solid #fff3;width:100%;margin:6px 0;text-align:center;background:#fff;color:#1a0b2e}
button{font-size:max(18px,1.1em);font-weight:bold;padding:14px 20px;border:0;border-radius:14px;cursor:pointer;color:#fff;background:#333;box-shadow:0 5px 0 #0006;margin:6px;transition:transform .1s;touch-action:manipulation}
button:active{transform:translateY(4px);box-shadow:0 1px 0 #0006}button:disabled{opacity:.4}
.go{background:#26890c}.warn{background:#d89e00;color:#1a0b2e}.bad{background:#e21b3c}.blue{background:#1368ce}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{min-height:110px;font-size:max(20px,1.2em);border-radius:16px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;animation:pop .25s ease-out both;border:3px solid transparent;color:#fff;font-weight:800;line-height:1.2;text-align:center}
.opt .shape{font-size:1.35em;filter:drop-shadow(0 2px 0 #0005)}
.o0{background:#e21b3c;border-color:#ff6b81}.o1{background:#1368ce;border-color:#5dade2}
.o2{background:#d89e00;border-color:#f7dc6f;color:#1a0b2e}.o3{background:#26890c;border-color:#58d68d}
.opt.dim{opacity:1;background:#2a2d3d;color:#eceef5;border-color:#555;transform:none;box-shadow:inset 8px 0 0 #fff3}
.opt.right{outline:4px solid #fff;box-shadow:0 0 0 6px #fff3,0 0 28px #fff6;z-index:2;transform:none}
@keyframes pop{from{transform:scale(.7);opacity:.6}}
.code{font-size:clamp(3rem,12vw,6rem);letter-spacing:.12em;font-weight:900;background:#fff;color:#1a0b2e;border-radius:18px;padding:6px 18px;display:inline-block;box-shadow:0 8px 0 #0004}
.qr{background:#fff;border-radius:16px;padding:10px;width:min(280px,70vw);image-rendering:auto}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:3em}
.chips span,.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#1a0b2e;border-radius:999px;padding:10px 16px;font-weight:bold;font-size:max(16px,1em);animation:bubble .45s cubic-bezier(.2,1.4,.4,1) both;border:3px solid transparent;box-shadow:0 4px 0 #0003}
@keyframes bubble{from{transform:scale(0) translateY(20px);opacity:0}}
.timer{font-size:2.6em;font-weight:900;width:100px;height:100px;line-height:100px;border-radius:50%;background:#fff;color:#1a0b2e;margin:8px auto;box-shadow:0 0 0 6px #fff3}
.timer.low{animation:pulse .5s infinite;color:#e21b3c;background:#ffe8ec}
@keyframes pulse{50%{transform:scale(1.12)}}
.timebar{height:18px;background:#fff2;border-radius:999px;overflow:hidden;margin:10px 0;border:2px solid #fff4}
.timebar>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#26890c,#d89e00,#e21b3c);transform-origin:left;transition:width .95s linear}
.timebar.low>i{background:#e21b3c;animation:barflash .4s infinite}
.timebar.done>i{background:linear-gradient(90deg,#1e7a1e,#58d68d)!important;animation:none;opacity:1}
.timebar{position:relative}
.timebar.ended{background:#5a1020;border-color:#e21b3c}
.timebar.ended>i{background:repeating-linear-gradient(45deg,#6b6f80 0 10px,#555a6b 10px 20px)!important;animation:none;opacity:.9}
.timebar.done::after,.timebar.ended::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,1.3vh,14px);font-weight:900;color:#fff;text-shadow:0 1px 2px #000;line-height:1}
.host .timebar.done,.host .timebar.ended{height:clamp(16px,2.6vh,24px)}
@keyframes barflash{50%{opacity:.55}}
.q{font-size:clamp(1.3rem,4vw,2.2rem);font-weight:bold;background:#fff;color:#1a0b2e;border-radius:16px;padding:16px;line-height:1.25}
.qemoji{font-size:clamp(2.5rem,8vw,5rem);line-height:1;margin:4px 0;filter:drop-shadow(0 4px 8px #0005)}
.big{font-size:4.5em;animation:pop .3s ease-out both}.ok{background:#1e7a1e!important;border-color:#58d68d}.ko{background:#a5122a!important;border-color:#ff6b81}
.rank{padding:0;margin:0}.rank li{list-style:none;background:#fff;color:#1a0b2e;margin:6px auto;max-width:700px;padding:10px 16px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:bold;font-size:max(18px,1.05em);animation:slide .35s ease-out both}
@keyframes slide{from{transform:translateX(-50px);opacity:0}}
.rank .up{color:#26890c;margin-left:6px}.rank .down{color:#e21b3c;margin-left:6px}.rank .same{opacity:.4;margin-left:6px}
.streak{display:inline-flex;align-items:center;gap:4px;background:#ff6b0022;border:2px solid #ff8c00;color:#ffd4a3;border-radius:999px;padding:4px 12px;font-weight:900}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin-top:24px;min-height:280px}
.pod{width:160px;border-radius:14px 14px 0 0;display:flex;flex-direction:column;justify-content:flex-start;padding-top:10px;font-weight:bold;transform-origin:bottom;opacity:0;transform:scaleY(.2);color:#1a0b2e}
.pod.show{animation:rise .7s cubic-bezier(.2,1.5,.4,1) forwards}
.p1{background:linear-gradient(#ffe566,gold);height:260px}.p2{background:linear-gradient(#eee,silver);height:190px}.p3{background:linear-gradient(#e8a86a,#cd7f32);height:140px}
@keyframes rise{to{opacity:1;transform:scaleY(1)}}
.pod .n{font-size:1.25em;padding:6px}.pod .medal{font-size:2.8em}
.humor{font-size:clamp(1.1rem,2.5vw,1.6rem);font-style:italic;background:#0005;border-radius:12px;padding:12px;margin-top:10px;border-left:5px solid #d89e00}
.bar{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:180px;margin-top:8px}
.bar div{width:70px;border-radius:10px 10px 0 0;min-height:8px;font-weight:bold;font-size:1.2em;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;transition:height 1s cubic-bezier(.2,1.2,.4,1);color:#fff;text-shadow:0 1px 2px #0008}
.confetti{position:fixed;top:-20px;width:12px;height:18px;animation:fall linear forwards;z-index:99;border-radius:2px}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.small{opacity:.9;font-size:.95em}.hide{display:none!important}.left{text-align:left}
.hud{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:max(18px,1em);font-weight:bold;margin:6px 0}
.hud .pill{background:#0005;border-radius:999px;padding:6px 12px;font-size:max(16px,1em)}
.som{position:fixed;bottom:10px;right:10px;font-size:1em;padding:10px 14px;z-index:50}
.cmd{position:fixed;bottom:10px;left:10px;z-index:50;background:#000a;border:1px solid #fff3;border-radius:12px;padding:8px 12px;font-size:13px;line-height:1.45;text-align:left;opacity:.85;max-width:260px}
.cmd kbd{background:#fff2;border-radius:4px;padding:1px 5px;font-family:inherit}
.fsbtn{position:fixed;top:10px;right:10px;z-index:50;padding:10px 14px}
.avatar-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0}
.avatar-pick button{font-size:1.6em;padding:8px;margin:0;min-width:48px;min-height:48px;background:#fff2;border:2px solid transparent;border-radius:12px}
.avatar-pick button.on{border-color:#fff;background:#fff3;transform:scale(1.1)}
.flash{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;animation:pop .25s ease-out}
.flash.ok{background:#1e7a1eee}.flash.ko{background:#a5122aee}.flash.wait{background:#1a0b2eee}
.nick-row{display:flex;gap:6px;align-items:stretch} .nick-row input{flex:1} .nick-row button{margin:6px 0;white-space:nowrap}

/* —— JOGADOR: usa a largura disponível (até 720 px) —— */
.player{overflow:hidden;overflow-x:hidden}
.player .wrap{max-width:min(720px,100%);width:100%;padding:10px;height:100dvh;overflow:hidden;overflow-x:hidden;display:flex;flex-direction:column;margin:0 auto}
.player .card{flex-shrink:0}
.player .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:0;align-content:stretch}
.player .opt{font-size:max(20px,clamp(20px,4.2vw,28px));min-height:max(96px,18vh);height:100%;border-radius:18px;padding:14px;overflow-wrap:anywhere;word-break:normal;hyphens:auto;line-height:1.25}
.player .opt .range,.player .opt .nowrap{white-space:nowrap}
.player .q{font-size:max(20px,clamp(20px,3.8vw,28px));padding:14px}
.player #qn{font-size:max(18px,1em)}
.player .timer{width:72px;height:72px;line-height:72px;font-size:1.8em}
.player #sQ{display:flex;flex-direction:column;height:100%;gap:8px;min-height:0}
.player #sQ.hide{display:none!important}
.player .waitbox .big{font-size:3.5em}
.player .flash{padding:16px;overflow:auto}
.player .flash .explain,.player .flash p,.player .bonus-line{font-size:max(16px,1.05em);line-height:1.35;max-width:36em}
.player .hud .pill{font-size:max(16px,1em)}
@media(max-width:380px){
  .player .opt{min-height:88px;font-size:max(18px,clamp(18px,4.8vw,22px))}
}

/* —— ANFITRIÃO / palco projetado (16:9 sem scroll) —— */
.host{background:#0a0614;overflow-x:hidden}
.host.stage{overflow:hidden;overflow-x:hidden}
.host .wrap{max-width:min(1700px,100vw);width:100%;height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;padding:clamp(4px,1vh,12px) clamp(8px,1.5vw,18px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(4px,.8vh,10px);min-height:0}
.host #sPin,.host #sSetup,.host #sLobby,.host #sPod{overflow:auto;overflow-x:hidden;min-height:0}
.host h1{font-size:clamp(1.6rem,3.6vw,3.6rem);margin:.15em 0}
.host h2{font-size:clamp(1.1rem,2.2vw,2.2rem);margin:.2em 0}
.host #qn{font-size:clamp(1rem,1.8vw,1.8rem);font-weight:bold;margin:0}
.host .q{font-size:clamp(1.05rem,2.2vw,2.4rem);padding:clamp(8px,1.2vh,14px);min-height:0}
.host .opt{font-size:clamp(1rem,1.9vw,2.2rem);min-height:0;height:100%;padding:clamp(6px,1vh,12px);overflow-wrap:anywhere}
.host .opts{gap:clamp(6px,1vw,12px);min-height:0;flex:1;grid-template-columns:1fr 1fr;align-content:stretch}
.host .timer{font-size:clamp(1.4rem,2.8vw,3rem);width:clamp(64px,6.5vw,110px);height:clamp(64px,6.5vw,110px);line-height:clamp(64px,6.5vw,110px);margin:0;flex-shrink:0}
.host #prog{font-size:clamp(.95rem,1.5vw,1.6rem)!important;width:auto;min-width:clamp(72px,7vw,120px);border-radius:14px;padding:0 8px;line-height:1.15;display:flex;align-items:center;justify-content:center;height:auto;min-height:clamp(56px,6vw,100px);flex-shrink:0}
.host .prog-label{font-size:.55em;opacity:.85;text-transform:none}
.host .lobbytxt{font-size:clamp(1.1rem,2vw,2.2rem)}
.host .code{font-size:clamp(2.8rem,7vw,7rem);letter-spacing:.16em}
.host .qr{width:clamp(180px,22vw,400px)}
.host .chips span,.host .chip{font-size:clamp(1rem,1.5vw,1.6rem);padding:8px 14px}
.host .rank li{max-width:100%;font-size:clamp(.95rem,1.5vw,1.6rem);padding:6px 10px;margin:4px 0}
.host .humor,.host .stage-explain{font-size:clamp(1rem,1.7vw,1.8rem);padding:clamp(6px,1vh,12px);margin:0;flex-shrink:0}
.host .bar{height:clamp(56px,10vh,120px);margin-top:4px;gap:8px}.host .bar div{width:clamp(40px,6vw,90px);font-size:clamp(.9rem,1.4vw,1.5rem)}
.host .pod{width:clamp(120px,16vw,260px)}.host .pod .n{font-size:clamp(1.1rem,2vw,2.2rem)}.host .pod .medal{font-size:clamp(2.2rem,4vw,4.5rem)}
.host .p1{height:clamp(180px,28vh,360px)}.host .p2{height:clamp(140px,20vh,260px)}.host .p3{height:clamp(100px,14vh,190px)}
.host .timebar{height:clamp(10px,1.6vh,20px);margin:4px 0;flex-shrink:0}
.host .qemoji{font-size:clamp(1.6rem,4vw,3.2rem);margin:0}
.lobby-grid{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}
.lobby-code-block{display:flex;flex-direction:column;align-items:center;gap:8px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .filament-bg{display:none}
  body::before{animation:none}
}

/* Badge de streak legível em fundo claro (top 5, pódio, ranking final) */
.streak-badge{display:inline-flex;align-items:center;gap:3px;background:#c2410c;color:#fff;border:2px solid #7c2d12;border-radius:999px;padding:2px 10px;font-weight:900;font-size:.9em;line-height:1.3;white-space:nowrap;text-shadow:0 1px 1px #0006;box-shadow:0 2px 0 #0003}
.fb-avatar{font-size:1.2em}
/* ===== ANFITRIÃO: barra própria + palco em grelha (sem sobreposições) =====
   Nada com position:fixed/absolute por cima do conteúdo: F11, Som e comandos vivem
   na .host-bar (1.ª linha da grelha da .wrap). */
:root{--hb-h:clamp(28px,4.6vh,44px);--exp-max:14vh;--ctl-h:clamp(36px,6.5vh,56px);--gap:clamp(3px,.8vh,10px)}
.host .host-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--hb-h);min-height:0;min-width:0;overflow:hidden}
.host .host-bar .cmd{position:static;flex:1 1 auto;min-width:0;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 10px;font-size:clamp(10px,1.6vh,13px);line-height:1.4;border-radius:8px;background:#0006}
.host .host-bar .cmd br{display:none}
.host .host-bar .cmd b{margin-right:6px}
.host .host-bar .bar-btns{display:flex;gap:6px;flex-shrink:0}
.host .host-bar button{position:static;margin:0;padding:0 12px;height:calc(var(--hb-h) - 4px);font-size:clamp(12px,2vh,16px);box-shadow:0 3px 0 #0006}
/* Pergunta / revelação */
.host #sQ.stage-q{display:grid;min-height:0;min-width:0;overflow:hidden;gap:var(--gap);
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  grid-template-areas:"head" "qrow" "opts" "explain" "ctl"}
.host #sQ.stage-q.hide{display:none!important}
body.revealing #sQ.stage-q{grid-template-columns:minmax(0,1.45fr) minmax(190px,.75fr);
  grid-template-areas:"head side" "qrow side" "opts side" "explain explain" "ctl ctl"}
.host .sq-head{grid-area:head;min-width:0;display:flex;flex-direction:column;gap:2px}
.host .sq-head .timebar{margin:2px 0}
.host .stage-qrow{grid-area:qrow;display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0;min-height:0}
.host .stage-qrow .q{flex:1;margin:0;min-width:0;max-height:22vh;overflow:auto}
.host #opts{grid-area:opts;min-height:0;min-width:0;overflow:hidden;grid-auto-rows:minmax(0,1fr)}
.host .opt{overflow:hidden}
.host .stage-right{grid-area:side;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;text-align:left;background:rgba(0,0,0,.25);border-radius:14px;padding:clamp(6px,1vh,12px);border:1px solid #fff2}
.host .stage-right h2{text-align:center;margin:0 0 6px;flex-shrink:0}
.host .stage-right .rank{flex:1 1 auto;min-height:0;overflow:auto}
.host .stage-explain{grid-area:explain;max-height:var(--exp-max);overflow:auto;line-height:1.3;font-size:clamp(.9rem,min(1.7vw,2.6vh),1.7rem)}
.host .stage-controls{grid-area:ctl;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px;height:var(--ctl-h);min-height:0}
.host .stage-controls button{margin:0;height:calc(var(--ctl-h) - 6px);padding:0 16px;font-size:clamp(.85rem,min(1.5vw,2.4vh),1.25rem);white-space:nowrap}
/* Revelação: cartões compactos com barra horizontal integrada (contagem + ✔) */
body.revealing.host .qemoji{display:none}
body.revealing.host .stage-qrow .q{font-size:clamp(.95rem,min(1.8vw,3vh),2rem);padding:clamp(4px,.8vh,10px) 10px;max-height:16vh}
body.revealing.host .timer{width:clamp(44px,min(5vw,8vh),90px);height:clamp(44px,min(5vw,8vh),90px);line-height:clamp(44px,min(5vw,8vh),90px);font-size:clamp(1.1rem,3.6vh,2.2rem)}
body.revealing.host #prog{min-height:clamp(44px,min(5vw,8vh),90px)}
body.revealing.host #opts{align-content:center;grid-auto-rows:minmax(0,max-content)}
body.revealing.host .opt{flex-direction:column;align-items:stretch;justify-content:center;gap:clamp(2px,.6vh,6px);height:auto;max-height:15vh;min-height:0;padding:clamp(4px,.8vh,10px) clamp(6px,1vw,12px);font-size:clamp(.85rem,min(1.5vw,2.6vh),1.6rem);animation:none}
.host .opt .otxt{display:flex;align-items:center;justify-content:center;gap:8px;min-height:0;overflow:hidden;line-height:1.15}
.host .obar{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:clamp(16px,3.4vh,34px);min-height:16px}
.host .obar .track{flex:1;height:100%;background:#0005;border-radius:999px;overflow:hidden;border:1px solid #fff5}
.host .obar .track i{display:block;height:100%;width:0;background:#fff;border-radius:999px;transition:width 1s cubic-bezier(.2,1.2,.4,1)}
.host .opt.dim .obar .track i{background:#9aa0b8}
.host .obar b{flex-shrink:0;min-width:3.2em;text-align:right;font-weight:900;font-size:clamp(.85rem,2.6vh,1.5rem);line-height:1}
@media(max-height:620px){.host .qemoji{display:none}.host .stage-qrow .q{font-size:clamp(.9rem,2.8vh,1.6rem);padding:6px 10px}.host .timer{width:50px;height:50px;line-height:50px;font-size:1.2rem}.host #prog{min-height:46px}}
@media(max-width:1100px),(max-height:700px){.host .qemoji{display:none}.host .opt{font-size:clamp(.9rem,1.6vw,1.5rem)}}
@media(max-width:1100px){body.revealing #sQ.stage-q{grid-template-columns:minmax(0,1.3fr) minmax(170px,.7fr)}}
@media(max-width:760px){.host .host-bar .cmd{display:none}}