/* Multiplayer usa o mesmo palco e os mesmos componentes visuais de play.php. */
[hidden]{display:none!important}
.multiplayer-stage{padding-bottom:20px}
.multiplayer-roombar{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px;padding:12px 16px
}
.multiplayer-roombar form{margin:0}
.host-next-question{display:grid;gap:6px;margin-top:14px;text-align:center}.host-next-question small{color:#cbd5e1;font-size:.78rem}.host-next-question .btn{min-height:46px;font-weight:950;letter-spacing:.025em;box-shadow:0 12px 28px rgba(34,197,94,.25)}
.multiplayer-code-banner .prize-amount{letter-spacing:.16em}
.multiplayer-join-box{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;
  padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.035)
}
.multiplayer-qr{
  width:190px;height:190px;display:grid;place-items:center;padding:9px;border-radius:14px;
  background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.32)
}
.multiplayer-qr img,.multiplayer-qr canvas{max-width:100%;height:auto!important}
.multiplayer-join-url{display:block;color:#e5e7eb;word-break:break-all}
/* QR menor e persistente: continua no canto da tela durante a pergunta/revelação,
   pra quem chegar depois ainda conseguir entrar (se o professor permitir). */
.host-mini-qr{position:fixed;z-index:900;right:14px;bottom:14px;display:flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;border-radius:14px;background:rgba(15,23,42,.92);border:1px solid rgba(250,204,21,.35);box-shadow:0 14px 34px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.host-mini-qr__code{width:74px;height:74px;display:grid;place-items:center;padding:5px;border-radius:9px;background:#fff}
.host-mini-qr__code img,.host-mini-qr__code canvas{max-width:100%;height:auto!important}
.host-mini-qr__info{display:grid;gap:1px;max-width:150px}
.host-mini-qr__info small{color:#fbbf24;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.host-mini-qr__info strong{color:#e5e7eb;font-size:.7rem;font-weight:700;word-break:break-all;line-height:1.25}
.host-late-join-blocked{position:fixed;z-index:900;right:14px;bottom:14px;padding:9px 14px;border-radius:14px;background:rgba(69,10,10,.92);border:1px solid rgba(248,113,113,.4);color:#fecaca;font-size:.76rem;font-weight:800;box-shadow:0 14px 34px rgba(0,0,0,.5)}
@media(max-width:767.98px){
  .host-mini-qr{gap:7px;padding:6px 10px 6px 6px}
  .host-mini-qr__code{width:56px;height:56px}
  .host-mini-qr__info{display:none}
}
.multiplayer-feedback{margin-top:12px;margin-bottom:0}
.multiplayer-finish-portrait{max-width:220px}
/* Alternativas em grade 2x2 (duas em cima, duas embaixo) — telão do professor e tela do jogador. */
#host-options,#player-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .7rem}
#host-options .option-btn,#player-options .option-btn{width:100%;margin:0!important}
.option-btn.multiplayer-selected{border-color:rgba(96,165,250,.8);box-shadow:0 0 0 3px rgba(96,165,250,.2)}
.option-btn.multiplayer-correct{border-color:rgba(16,185,129,.9)!important;box-shadow:0 0 0 3px rgba(16,185,129,.22),0 0 22px rgba(16,185,129,.2)!important}
.steps-wrap:empty::after{content:"Aguardando participantes…";display:block;padding:14px 4px;color:#94a3b8;font-size:.86rem}
.step__value{white-space:nowrap}
/* Placar ao vivo do host (modo acompanhado): destaca quem ainda não respondeu a rodada atual. */
.step--pending{border-color:rgba(250,204,21,.55)!important;background:linear-gradient(90deg,rgba(250,204,21,.1),transparent 65%),#0f172a!important;animation:mpPendingPulse 1.6s ease-in-out infinite}
.step__pending-flag{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:.68rem;font-weight:800;white-space:nowrap;background:rgba(250,204,21,.16);color:#fde68a;border:1px solid rgba(250,204,21,.45)}
@keyframes mpPendingPulse{0%,100%{box-shadow:0 0 0 0 rgba(250,204,21,.28)}50%{box-shadow:0 0 0 4px rgba(250,204,21,.12)}}

/* Entrada multiplayer: mesma composição de palco, cartão e escada do jogo. */
.multiplayer-entry-title{margin:2px 0 12px;font-size:clamp(1.45rem,3vw,2.25rem);font-weight:900}
.multiplayer-entry-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.multiplayer-entry-form{padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.035)}
.multiplayer-entry-form h2{font-size:1.05rem;margin:0 0 11px;color:#fef08a}
.multiplayer-entry-form label{display:block;margin:9px 0;color:#cbd5e1;font-size:.86rem;font-weight:700}
.multiplayer-entry-form input,.multiplayer-entry-form select{
  width:100%;margin-top:5px;padding:10px 11px;border:1px solid rgba(255,255,255,.13);
  border-radius:10px;color:#e5e7eb;background:#0f172a;outline:none
}
.multiplayer-entry-form input:focus,.multiplayer-entry-form select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.16)}
.multiplayer-code-input{text-transform:uppercase;letter-spacing:.15em;font-weight:900}
.multiplayer-style-picker{margin:10px 0;padding:0;border:0}
.multiplayer-style-picker legend{margin-bottom:7px;color:#cbd5e1;font-size:.86rem;font-weight:700}
.multiplayer-style-option{display:flex!important;align-items:flex-start;gap:9px;margin:7px 0!important;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:11px;cursor:pointer}
.multiplayer-style-option:has(input:checked){border-color:#60a5fa;background:rgba(96,165,250,.1);box-shadow:0 0 0 2px rgba(96,165,250,.1)}
.multiplayer-style-option input{width:auto!important;margin:3px 0 0!important;accent-color:#60a5fa}
.multiplayer-style-option span{display:grid;gap:2px}.multiplayer-style-option small{color:#94a3b8;font-weight:400;line-height:1.3}

/* Telão do professor no modo independente. */
.independent-dashboard{display:grid;gap:16px}
.dashboard-hero{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:22px;background:linear-gradient(115deg,rgba(30,64,175,.56),rgba(17,24,39,.8) 55%,rgba(180,83,9,.38))}
.dashboard-kicker,.dashboard-section-title small{color:#fbbf24;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.dashboard-hero h1{margin:3px 0;font-size:clamp(1.75rem,4vw,3.1rem);font-weight:950}.dashboard-hero p{margin:0;color:#cbd5e1}
.dashboard-stat{min-width:118px;padding:13px 15px;text-align:center;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(0,0,0,.2)}
.dashboard-stat strong{display:block;color:#fef08a;font-size:2rem;line-height:1}.dashboard-stat span{color:#cbd5e1;font-size:.78rem}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:16px}
.dashboard-podium-card,.dashboard-feed-card,.dashboard-race-card{padding:18px}
.dashboard-section-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}.dashboard-section-title>span{font-size:1.65rem}.dashboard-section-title h2{margin:0;font-size:1.25rem;font-weight:900}
.dashboard-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;min-height:185px}
.podium-player{display:grid;justify-items:center;gap:4px;padding:15px 8px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.045);text-align:center}
.podium-player--1{order:2;min-height:178px;background:linear-gradient(180deg,rgba(245,158,11,.22),rgba(255,255,255,.04));border-color:rgba(245,158,11,.45)}
.podium-player--2{order:1;min-height:145px}.podium-player--3{order:3;min-height:125px}.podium-medal{font-size:2rem}.podium-player strong{font-size:1.05rem}.podium-player b{color:#fef08a}.podium-player small{color:#94a3b8}
.dashboard-activity{display:grid;gap:8px}.activity-message{padding:11px 12px;border-left:4px solid #60a5fa;border-radius:9px;background:rgba(96,165,250,.08);font-weight:700}.activity-message.is-positive{border-color:#10b981;background:rgba(16,185,129,.09)}.activity-message.is-encouragement{border-color:#f59e0b;background:rgba(245,158,11,.09)}
.dashboard-progress{display:grid;gap:10px}.race-player{display:grid;grid-template-columns:38px minmax(100px,170px) minmax(140px,1fr) 62px;align-items:center;gap:10px}.race-place{color:#fbbf24;font-weight:900}.race-track{height:13px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09)}.race-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#22c55e,#facc15);transition:width .5s ease}.race-progress{text-align:right;color:#cbd5e1;font-size:.8rem;font-weight:800}

@media(max-width:992px){
  .multiplayer-join-box{grid-template-columns:1fr;text-align:center}
  .multiplayer-qr{margin:auto}
  .dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .multiplayer-roombar{align-items:flex-start;flex-direction:column}
  .multiplayer-roombar>div:last-child{width:100%;justify-content:space-between}
  .multiplayer-entry-tabs{grid-template-columns:1fr}
  .multiplayer-qr{width:170px;height:170px}
  .multiplayer-stage{overflow:visible!important;contain:layout!important}
  .dashboard-hero{grid-template-columns:repeat(2,minmax(0,1fr));padding:15px}.dashboard-hero>div:first-child{grid-column:1/-1}.dashboard-stat{min-width:0}
  .dashboard-podium{gap:5px}.podium-player{padding:10px 4px}.podium-player strong{font-size:.85rem}.podium-player b,.podium-player small{font-size:.68rem}
  .race-player{grid-template-columns:30px minmax(75px,110px) minmax(80px,1fr) 48px;gap:6px;font-size:.78rem}
}

/* Avatares agronômicos: cada avatar traz sua própria imagem (folhas cadastradas via admin/avatares.php). */
.agro-avatar{display:inline-block;flex:0 0 auto;width:48px;height:48px;border:2px solid rgba(250,204,21,.62);border-radius:50%;background-color:#172554;background-repeat:no-repeat;background-position:center;background-size:cover;box-shadow:0 5px 16px rgba(0,0,0,.34);vertical-align:middle}
.avatar-picker{margin:12px 0;padding:0;border:0}.avatar-picker legend{margin-bottom:8px;color:#cbd5e1;font-size:.86rem;font-weight:800}
.avatar-hive{display:block}
.avatar-hive__viewport{position:relative;height:230px;overflow:hidden;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);touch-action:none;cursor:grab;-webkit-mask-image:radial-gradient(circle at center,#000 52%,transparent 88%);mask-image:radial-gradient(circle at center,#000 52%,transparent 88%)}
.avatar-hive__viewport:active{cursor:grabbing}
.avatar-hive__viewport:focus-visible{outline:2px solid #facc15;outline-offset:2px}
.avatar-hive__world{position:absolute;left:50%;top:50%;will-change:transform;transition:transform .5s cubic-bezier(.22,1.28,.36,1)}
.avatar-hive__world.no-transition{transition:none}
.avatar-hive__cell{position:absolute;left:0;top:0;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;opacity:var(--o,.4);transition:transform .16s ease-out,opacity .16s ease-out}
.avatar-hive__world.no-transition .avatar-hive__cell{transition:none}
.avatar-hive__cell .agro-avatar{width:60px;height:60px;transition:box-shadow .3s;transform:scale(var(--s,.6))}
.avatar-hive__cell.is-focused .agro-avatar{box-shadow:0 0 0 3px #facc15,0 10px 24px rgba(0,0,0,.45)}
.avatar-hive__label{margin:8px 0 0;color:#facc15;font-size:.82rem;font-weight:800;text-align:center}
.multiplayer-entry-tabs.is-qr-entry{grid-template-columns:minmax(0,680px);justify-content:center}.multiplayer-entry-lead{margin:0 0 12px;color:#cbd5e1}.app-inline-message{display:flex;align-items:center;gap:9px;margin:10px 0;padding:11px 13px;border-radius:12px;font-size:.86rem}.app-inline-message>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:950}.app-inline-message.is-error{border:1px solid rgba(248,113,113,.5);background:rgba(127,29,29,.3);color:#fecaca}.app-inline-message.is-error>span{background:#dc2626;color:#fff}
.player-identity{display:flex;align-items:center;gap:8px}.player-identity .agro-avatar{width:36px;height:36px}.multiplayer-stage .ladder .step{grid-template-columns:28px 32px minmax(0,1fr) auto}.step__avatar{width:30px;height:30px}.multiplayer-stage .ladder .step__value{grid-column:auto}.podium-avatar-art{width:58px;height:58px}.podium-player .podium-avatar-art+.podium-medal{margin-top:-15px;margin-left:38px;font-size:1.25rem}

/* Sala de espera "arena": cada avatar é uma bolinha com posição e
   velocidade próprias — quica nas bordas e nos outros avatares, estilo
   Breakout/Arkanoid (ver bindLobbyArenaDrag/stepPhysics em multiplayer.js).
   O JS aplica transform:translate(x,y) a cada quadro; o CSS só cuida do
   visual (tamanho, sombra, cutucada de colisão, popup de entrada). */
.lobby-arena-wrap{margin-top:16px}
.lobby-arena-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.lobby-arena-badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#fde68a}
.lobby-arena-count{display:inline-flex;align-items:center;padding:2px 11px;border-radius:999px;font-size:.76rem;font-weight:800;background:rgba(37,99,235,.18);border:1px solid rgba(96,165,250,.4);color:#dbeafe}
.lobby-arena-hint{display:block;margin:0 0 8px;color:#94a3b8;font-size:.72rem}
.lobby-arena{position:relative;height:220px;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 115%,rgba(250,204,21,.16),transparent 62%),radial-gradient(circle at 50% 45%,rgba(37,99,235,.1),transparent 70%),#0b1220;border:1px solid rgba(255,255,255,.08)}
.lobby-arena::before{content:"";position:absolute;left:8%;right:8%;bottom:16px;height:34%;border-radius:50%;border:2px dashed rgba(250,204,21,.22);pointer-events:none}
.lobby-arena:empty::after{content:"Aguardando os primeiros competidores…";position:absolute;inset:0;display:grid;place-items:center;color:#94a3b8;font-size:.86rem;text-align:center;padding:0 16px}
.lobby-fighter{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:3px;will-change:transform}
.lobby-fighter__avatar{width:58px;height:58px;box-shadow:0 10px 22px rgba(0,0,0,.4),0 0 0 3px rgba(250,204,21,.18);cursor:grab;touch-action:none}
.lobby-fighter strong{max-width:84px;overflow:hidden;color:#e5e7eb;font-size:.72rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.lobby-fighter.is-entering .lobby-fighter__avatar{animation:lobbySpawnPop .5s cubic-bezier(.22,1.6,.4,1)}
.lobby-fighter.is-bumped .lobby-fighter__avatar{animation:lobbyBump .42s ease}
.lobby-fighter__spark{position:absolute;top:-6px;right:-4px;font-size:1.1rem;animation:lobbySpark .55s ease-out forwards;pointer-events:none}
/* Arrastar e lançar: enquanto arrasta, o avatar segue o ponteiro (a posição
   já vem calculada pelo próprio laço de física); ao soltar, a velocidade do
   gesto vira a nova velocidade da bolinha — lançou de verdade. */
.lobby-fighter.is-dragging{z-index:5}
.lobby-fighter.is-dragging .lobby-fighter__avatar{cursor:grabbing;transform:scale(1.14);box-shadow:0 18px 34px rgba(0,0,0,.5),0 0 0 3px rgba(250,204,21,.45)}
@keyframes lobbySpawnPop{0%{transform:scale(.25);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes lobbyBump{0%{transform:translateX(0)}35%{transform:translateX(var(--bump,9px)) rotate(8deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes lobbySpark{0%{transform:scale(.4) rotate(-10deg);opacity:0}30%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(.9) rotate(0);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .lobby-fighter.is-entering .lobby-fighter__avatar,.lobby-fighter.is-bumped .lobby-fighter__avatar,.lobby-fighter__spark{animation:none!important}
}

/* Contagem sincronizada em todas as telas. */
.mp-countdown{position:fixed;inset:0;z-index:11000;display:grid;place-content:center;justify-items:center;gap:18px;background:radial-gradient(circle at center,rgba(37,99,235,.28),rgba(2,6,23,.95) 54%);backdrop-filter:blur(8px)}.mp-countdown[hidden]{display:none!important}.mp-countdown__orb{display:grid;place-items:center;width:clamp(150px,34vw,260px);height:clamp(150px,34vw,260px);border:7px solid #facc15;border-radius:50%;background:radial-gradient(circle,#2563eb,#172554 68%);color:#fff;font-size:clamp(5rem,18vw,10rem);font-weight:1000;line-height:1;text-shadow:0 0 34px #93c5fd;box-shadow:0 0 0 12px rgba(250,204,21,.12),0 0 90px rgba(59,130,246,.72)}.mp-countdown__orb.is-ticking{animation:mpCountdownTick .72s cubic-bezier(.2,1.4,.4,1)}.mp-countdown>strong{color:#fef08a;font-size:clamp(1.3rem,4vw,2.2rem);letter-spacing:.09em;text-transform:uppercase;text-shadow:0 0 22px rgba(250,204,21,.55)}@keyframes mpCountdownTick{0%{transform:scale(.55);opacity:.2}55%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}

/* Feedback de resposta em primeiro plano, sem alerts de Bootstrap. */
.multiplayer-feedback{display:flex;align-items:center;gap:12px;padding:13px 15px;border:2px solid;border-radius:16px;background:#0f172a;color:#fff;box-shadow:0 18px 55px rgba(0,0,0,.62)}.multiplayer-feedback>span{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:50%;font-size:1.5rem;font-weight:950}.multiplayer-feedback strong,.multiplayer-feedback small{display:block}.multiplayer-feedback strong{font-size:1.1rem}.multiplayer-feedback small{margin-top:2px;color:#dbeafe}.multiplayer-feedback.is-info{border-color:#60a5fa;background:linear-gradient(120deg,#172554,#1e3a8a)}.multiplayer-feedback.is-info>span{background:#2563eb}.multiplayer-feedback.is-success{border-color:#86efac;background:linear-gradient(120deg,#052e16,#15803d)}.multiplayer-feedback.is-success>span{background:#22c55e}.multiplayer-feedback.is-error{border-color:#fca5a5;background:linear-gradient(120deg,#450a0a,#b91c1c)}.multiplayer-feedback.is-error>span{background:#ef4444}
body.mp-answer-cinematic::before{content:"";position:fixed;inset:0;z-index:10400;background:rgba(0,3,12,.9);backdrop-filter:blur(4px)}body.mp-answer-cinematic #player-options{position:relative;z-index:10410}body.mp-answer-cinematic #player-options .option-btn{opacity:.18;filter:saturate(.3)}body.mp-answer-cinematic #player-options .mp-correct-four,body.mp-answer-cinematic #player-options .mp-correct-blue-three,body.mp-answer-cinematic #player-options .mp-wrong-lock{opacity:1;filter:none}.mp-wrong-lock{border-color:#ff394f!important;background:linear-gradient(100deg,#7f1d1d,#dc2626)!important;color:#fff!important;box-shadow:0 0 0 5px rgba(239,68,68,.28),0 0 42px rgba(239,68,68,.8)!important}.mp-correct-four{border-color:#86efac!important;background:linear-gradient(100deg,#14532d,#22c55e)!important;color:#fff!important;animation:mpCorrectFour .38s ease-in-out 4!important}.mp-correct-blue-three{border-color:#93c5fd!important;background:linear-gradient(100deg,#172554,#2563eb)!important;color:#fff!important;animation:mpBlueThree .42s ease-in-out 3!important}body.mp-answer-cinematic .multiplayer-feedback.is-visible{position:fixed;z-index:10420;left:50%;top:50%;width:min(520px,calc(100vw - 24px));transform:translate(-50%,-50%);animation:mpFeedbackGlow .7s ease-in-out infinite alternate}body.mp-answer-cinematic .multiplayer-feedback strong{font-size:clamp(1.5rem,6vw,2.5rem);text-shadow:0 0 18px currentColor}@keyframes mpCorrectFour{0%,100%{transform:scale(1)}50%{transform:scale(1.045);box-shadow:0 0 0 6px rgba(134,239,172,.35),0 0 58px rgba(34,197,94,.95)}}@keyframes mpBlueThree{0%,100%{transform:scale(1)}50%{transform:scale(1.04);box-shadow:0 0 0 6px rgba(147,197,253,.38),0 0 58px rgba(59,130,246,.98)}}@keyframes mpFeedbackGlow{from{filter:brightness(1)}to{filter:brightness(1.3);box-shadow:0 0 70px currentColor,0 24px 80px rgba(0,0,0,.8)}}
.app-state-card{padding:22px;border:2px solid rgba(255,255,255,.12);border-radius:21px;background:linear-gradient(145deg,#172554,#0f172a);text-align:center;box-shadow:0 20px 65px rgba(0,0,0,.58)}.app-state-card__icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 10px;border-radius:50%;background:#166534;font-size:2rem}.app-state-card small{color:#fca5a5;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.app-state-card h2{margin:5px 0;color:#fff}.app-state-card p{color:#cbd5e1}.app-state-card.is-danger{border-color:rgba(248,113,113,.45);background:radial-gradient(circle at top,rgba(220,38,38,.18),transparent 42%),linear-gradient(145deg,#172554,#0f172a)}

/* Estados e avisos da sala. */
.mp-missing-room{display:grid;justify-items:center;width:min(620px,calc(100% - 24px));margin:clamp(30px,10vh,90px) auto;padding:clamp(24px,6vw,48px);border:2px solid rgba(250,204,21,.4);border-radius:26px;background:radial-gradient(circle at 50% 0,rgba(245,158,11,.2),transparent 42%),linear-gradient(145deg,#172554,#0f172a);text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.62)}.mp-missing-room__art{display:grid;place-items:center;width:86px;height:86px;margin-bottom:12px;border:4px solid #fef3c7;border-radius:50%;background:linear-gradient(145deg,#65a30d,#166534);font-size:2.7rem;box-shadow:0 12px 35px rgba(34,197,94,.3)}.mp-missing-room__eyebrow{color:#fbbf24;font-size:.76rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.mp-missing-room h1{margin:7px 0 9px;color:#fff;font-size:clamp(1.65rem,5vw,2.65rem);font-weight:950}.mp-missing-room p{max-width:470px;margin:0 0 21px;color:#cbd5e1;line-height:1.55}.mp-missing-room p strong{color:#fef08a;letter-spacing:.1em}.room-style-lock{display:flex;align-items:center;gap:10px;margin:10px 0;padding:10px 12px;border:1px solid rgba(96,165,250,.35);border-radius:13px;background:rgba(30,64,175,.16)}.room-style-lock>span{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#1d4ed8}.room-style-lock div{display:grid;gap:2px}.room-style-lock strong{color:#dbeafe}.room-style-lock small{color:#94a3b8}

/* Ferramentas do jogador na corrida independente. */
.mp-tool-deck{display:grid;gap:6px;margin-top:6px}.mp-primary-actions,.mp-help-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mp-tool-deck .btn{min-width:0;margin:0!important;border-radius:12px;font-size:.78rem;font-weight:900}.mp-help-actions .badge-help{display:flex;align-items:center;justify-content:center;gap:5px;min-height:42px;border:1px solid rgba(96,165,250,.42);color:#dbeafe;background:rgba(30,64,175,.16)}.mp-help-actions .badge-help span{font-size:1.05rem}.mp-tool-deck .btn:disabled{opacity:.35;filter:grayscale(1)}.mp-tool-deck.is-double-active .btn-double-bet{opacity:1!important;border-color:#fef08a;box-shadow:0 0 0 3px rgba(250,204,21,.22),0 0 26px rgba(245,158,11,.35)}.option-btn.mp-option-eliminated{border-color:#64748b!important;background:linear-gradient(100deg,#334155,#475569)!important;color:#94a3b8!important;text-decoration:line-through!important;text-decoration-thickness:3px!important;box-shadow:none!important;filter:grayscale(1)!important;opacity:.62!important}
/* Mural de "quem está no jogo": avatares minúsculos dos jogadores online, sem
   nome, abaixo dos botões de ajuda — reaproveita os mesmos dados do placar já
   buscados a cada segundo (nenhuma requisição nova ao servidor). Um acerto de
   qualquer jogador dá um pulinho no avatar dele na tela de todo mundo, lido do
   mesmo feed de atividade recente que o host já usava. */
.mp-online-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.mp-online-strip:empty{display:none}
.mp-online-avatar{width:26px;height:26px;border-width:1px;opacity:.88;animation:onlinePulse 4s ease-in-out infinite}
.mp-online-avatar:nth-child(3n+1){animation-delay:-1.3s}
.mp-online-avatar:nth-child(3n+2){animation-delay:-2.6s}
.mp-online-avatar.is-jumping{animation:onlineJump .5s ease}
@keyframes onlinePulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes onlineJump{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-9px) scale(1.15)}55%{transform:translateY(0) scale(.96)}75%{transform:translateY(-3px) scale(1.05)}}
@media (prefers-reduced-motion: reduce){
  .mp-online-avatar{animation:none!important}
}
.mp-help-popup{position:fixed;inset:0;z-index:11200;display:grid;place-items:center;padding:14px;background:rgba(2,6,23,.9);backdrop-filter:blur(7px)}.mp-help-popup[hidden]{display:none!important}.mp-help-popup__card{position:relative;width:min(470px,100%);padding:25px;border:2px solid rgba(250,204,21,.45);border-radius:23px;background:radial-gradient(circle at 50% 0,rgba(37,99,235,.23),transparent 45%),linear-gradient(145deg,#172554,#0f172a);color:#e5e7eb;text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.78);animation:noticePop .4s cubic-bezier(.2,1.5,.45,1)}.mp-help-popup__close{position:absolute;top:9px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;font-size:1.35rem}.mp-help-popup__icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 9px;border-radius:50%;background:linear-gradient(145deg,#65a30d,#166534);font-size:2rem;box-shadow:0 9px 28px rgba(34,197,94,.28)}.mp-help-popup h2{margin:4px 0 8px;color:#fff;font-weight:950}.mp-help-popup p{color:#cbd5e1}.mp-help-chart{display:grid;gap:9px;margin:17px 0}.mp-help-chart__row{display:grid;grid-template-columns:30px minmax(0,1fr) 46px;align-items:center;gap:8px}.mp-help-chart__row>strong{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1d4ed8}.mp-help-chart__row>span{height:13px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.1)}.mp-help-chart__row i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#22c55e,#facc15)}.mp-help-chart__row b{color:#fef08a;text-align:right}
.mp-audience-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:14px 0}.mp-audience-sign{display:grid;place-items:center;aspect-ratio:1;border:2px solid rgba(255,255,255,.55);border-radius:7px;color:#fff;font-size:clamp(.75rem,3.5vw,1.05rem);font-weight:950;box-shadow:0 5px 12px rgba(0,0,0,.28);transform:rotate(-2deg)}.mp-audience-sign:nth-child(2n){transform:rotate(2deg)}.mp-audience-sign.is-0{background:#dc2626}.mp-audience-sign.is-1{background:#2563eb}.mp-audience-sign.is-2{background:#16a34a}.mp-audience-sign.is-3{background:#ca8a04}
.mp-ranking-divider{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);color:#fbbf24;font-size:.76rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.multiplayer-stage #mp-ladder-list{max-height:42vh;overflow:hidden}.mp-ladder-popup{position:fixed;inset:0;z-index:11150;display:grid;place-items:center;padding:12px;background:rgba(2,6,23,.9);backdrop-filter:blur(7px)}.mp-ladder-popup[hidden]{display:none!important}.mp-ladder-popup__card{position:relative;width:min(470px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;padding:20px;border:2px solid rgba(250,204,21,.44);border-radius:22px;background:linear-gradient(145deg,#172554,#0f172a);box-shadow:0 25px 80px rgba(0,0,0,.7)}.mp-ladder-popup__card h2{color:#fff;text-align:center}.mp-ladder-popup .steps-wrap{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:10px}.mp-ladder-popup .step{min-height:0;padding:5px;grid-template-columns:25px minmax(0,1fr);font-size:.68rem}.mp-ladder-popup .step__value{grid-column:1/-1;text-align:center;font-size:.65rem}

/* O jogo multiplayer adota a mesma composição mobile do single player.
   Alcance mais largo que o breakpoint xs do Bootstrap (575.98px): celulares
   grandes/phablets em pé passam disso e, sem essa faixa própria aqui,
   ficavam com a largura cheia mas a altura sobrando (o "chão" da tela cheia
   do play.css só liga abaixo de 575.98px). As regras abaixo repetem, só que
   presas a body.multiplayer-player-body, o mesmo "chão" que o play.css já
   estabelece pra body[data-game-id] — redundante nos primeiros 575px, mas é
   o que garante a tela cheia de verdade até quase o breakpoint de tablet. */
@media(max-width:767.98px){
  html:has(body.multiplayer-player-body){height:100%;overflow:hidden!important}
  body.multiplayer-player-body{height:100dvh!important;min-height:0!important;overflow:hidden!important}
  body.multiplayer-player-body>main.container{width:100%!important;max-width:none!important;height:100dvh;margin:0!important;padding:0!important}
  body.multiplayer-player-body .zoom-viewport,
  body.multiplayer-player-body #zoomRoot,
  body.multiplayer-player-body #zoomRoot>.row,
  body.multiplayer-player-body #zoomRoot>.row>.col-lg-8{width:100%;height:100%;min-height:0;margin:0!important;padding:0!important;overflow:hidden}
  body.multiplayer-player-body #zoomRoot{max-width:none;transform:none!important;contain:layout}
  body.multiplayer-player-body #zoomRoot>.row>.col-lg-4{display:none!important}
  .avatar-hive__viewport{height:190px}.avatar-hive__cell .agro-avatar{width:52px;height:52px}
  body.multiplayer-player-body #zoomRoot>.multiplayer-roombar{display:none!important}
  body.multiplayer-player-body #zoomRoot>section.row{height:100%;min-height:0;margin:0!important;padding:0!important;overflow:hidden}
  body.multiplayer-player-body #zoomRoot>section.row>.col-lg-8{height:100%;min-height:0;margin:0!important;padding:0!important;overflow:hidden}
  body.multiplayer-player-body #player-game .card-quiz{height:100%;padding:5px!important;border:0;border-radius:0}
  body.multiplayer-player-body #player-game .quiz-flex{height:100%;display:block}
  body.multiplayer-player-body #player-game .quiz-flex>div:last-child{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  body.multiplayer-player-body #player-game .quiz-flex>.portrait-frame{position:absolute;z-index:6;top:41px;right:6px;display:block!important;width:96px;height:104px;pointer-events:none}
  body.multiplayer-player-body #player-game h2.enunciado{flex:0 0 auto;min-height:104px;max-height:none;margin:0 0 4px!important;padding:4px 106px 4px 0;overflow:hidden;font-size:clamp(.94rem,3.9vw,1.08rem)!important;line-height:1.18}
  body.multiplayer-player-body #player-options{flex:0 0 auto;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,clamp(104px,21vh,140px));gap:5px 7px;margin-bottom:5px;overflow:hidden}
  body.multiplayer-player-body #player-options .option-btn{width:100%;height:100%;min-height:0;margin:0!important;padding:6px 7px;font-size:clamp(.72rem,2.9vw,.86rem);line-height:1.15}
  body.multiplayer-player-body #answer-feedback.is-info{position:fixed;z-index:10020;left:8px;right:8px;bottom:8px;margin:0;padding:8px;font-size:.75rem}
  /* Sala de espera realmente em tela cheia — mesmo tratamento "sem card" do
     #player-game, mas com o conteúdo empilhado para a arena esticar e ocupar
     todo o espaço que sobrar. */
  body.multiplayer-player-body #player-lobby{height:100%}
  body.multiplayer-player-body #player-lobby .col-lg-8{height:100%;min-height:0}
  body.multiplayer-player-body #player-lobby .card-quiz{height:100%;min-height:0;padding:10px!important;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
  body.multiplayer-player-body #player-lobby .quiz-flex{height:100%;min-height:0;display:flex;flex-direction:column}
  body.multiplayer-player-body #player-lobby .quiz-flex>.portrait-frame{display:none!important}
  body.multiplayer-player-body #player-lobby .quiz-flex>div:last-child{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
  body.multiplayer-player-body #player-lobby .title-bar{flex:0 0 auto}
  /* O banner "Você entrou na sala" some aqui: em celulares estreitos de
     verdade o texto quebra linha e consome altura que a arena precisa —
     essa informação já está duplicada no topo (nome + avatar do jogador). */
  body.multiplayer-player-body #player-lobby .prize-banner{display:none!important}
  body.multiplayer-player-body #player-lobby h2.enunciado{flex:0 0 auto;display:block!important;width:auto!important;min-width:0!important;min-height:0!important;max-height:none!important;margin:6px 0!important;padding:0!important;overflow:visible!important;font-size:clamp(.92rem,3.7vw,1.08rem)!important;line-height:1.22!important;word-break:normal!important;overflow-wrap:break-word!important;writing-mode:horizontal-tb!important}
  body.multiplayer-player-body #player-lobby .lobby-arena-wrap{flex:1;min-height:150px;display:flex;flex-direction:column;margin-top:6px}
  body.multiplayer-player-body #player-lobby .lobby-arena{flex:1;min-height:150px;max-height:none}
  .lobby-fighter strong{max-width:66px}
  .lobby-fighter__avatar{width:54px;height:54px}
  body.multiplayer-player-body #player-game:has(#mp-player-tools) #player-options{grid-template-rows:repeat(2,clamp(84px,15.4vh,114px))}
  body.multiplayer-player-body .mp-tool-deck{flex:0 0 auto;margin-top:2px;gap:4px}body.multiplayer-player-body .mp-primary-actions,body.multiplayer-player-body .mp-help-actions{gap:4px}body.multiplayer-player-body .mp-tool-deck .btn{min-height:34px;padding:4px 3px;font-size:clamp(.62rem,2.55vw,.75rem)}body.multiplayer-player-body .mp-help-actions .badge-help{min-height:38px;flex-direction:row}body.multiplayer-player-body .mp-help-actions .badge-help span{font-size:.9rem}
  body.multiplayer-player-body .mp-online-strip{margin-top:5px;padding-top:5px;gap:4px}body.multiplayer-player-body .mp-online-avatar{width:20px;height:20px}
  body.multiplayer-player-body #player-game .life-rules-strip{display:none!important}body.multiplayer-player-body #mp-double-alert{flex:0 0 auto;margin:2px 0;padding:5px 7px;font-size:.67rem}body.multiplayer-player-body #player-game .report-link{padding:3px 5px;font-size:.62rem}
  /* Sala de espera ocupa a tela toda no celular — o rodapé só atrapalha ali. */
  body.multiplayer-player-body:has(#player-lobby:not([hidden])) footer{display:none!important}
}
/* Entrada multiplayer: a decisão inicial e os dois formulários vivem em páginas separadas. */
body:has(.mp-entry-choice)>nav.navbar,body:has(.mp-entry-choice) footer{display:none!important}
body:has(.mp-entry-choice)>main.container{max-width:none;margin:0!important;padding:0!important}
.mp-entry-choice{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:center;gap:28px;width:min(860px,calc(100% - 24px));margin:clamp(35px,9vh,90px) auto;padding:clamp(22px,5vw,44px)}
.mp-entry-choice__solano{width:230px;height:315px;margin:0}
.mp-entry-choice__content h1,.mp-entry-page__content h1{margin:10px 0 8px;color:#fff;font-size:clamp(1.75rem,4vw,3rem);font-weight:950}
.mp-entry-choice__content>p,.mp-entry-page__content>p{max-width:620px;color:#cbd5e1}
.mp-entry-choice__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:25px}
.mp-entry-choice__actions .btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:72px;border-radius:17px;font-size:1.05rem}
.mp-entry-choice__actions .btn span{font-size:1.45rem}
.mp-entry-page{display:grid;grid-template-columns:190px minmax(0,640px);justify-content:center;align-items:start;gap:26px;width:min(940px,calc(100% - 24px));margin:22px auto;padding:clamp(18px,4vw,34px)}
.mp-entry-page>.portrait-frame{width:190px;height:265px;margin:20px 0 0}
.mp-entry-page__content{min-width:0}
.mp-entry-page__actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.mp-entry-page__actions .btn{min-width:145px}
@media(max-width:700px){.mp-entry-choice{grid-template-columns:1fr;gap:8px;text-align:center}.mp-entry-choice__solano{width:128px;height:155px;margin:auto}.mp-entry-choice__actions{grid-template-columns:1fr}.mp-entry-page{grid-template-columns:1fr;margin:8px auto;padding:14px}.mp-entry-page>.portrait-frame{width:105px;height:125px;margin:0 auto}.mp-entry-page__content>p{text-align:center}.mp-entry-page__content>h1{text-align:center}.mp-entry-page__content>.badge{display:table;margin:auto}.mp-entry-page__actions{display:grid;grid-template-columns:1fr 1.5fr}.mp-entry-page__actions .btn{min-width:0}}
