/* ============ SALA DE JOGOS — estilos das partidas ============ */
body.in-game { min-height: 100vh; }
body.in-game::before { opacity: .0; }
body.theme-naval { background: radial-gradient(circle at 70% 0%, #0E4A6E 0%, #061B30 55%, #030D1B 100%); background-attachment: fixed; background-color: #0F0A26; }
body.theme-missao { background: radial-gradient(circle at 80% 0%, #4A1410 0%, #170606 55%, #0A0303 100%); background-attachment: fixed; background-color: #0F0A26; }
body.theme-arena { background: radial-gradient(ellipse at 50% 0%, #1E3A2B 0%, #0B1F14 50%, #06120B 100%); background-attachment: fixed; background-color: #0F0A26; }
body.theme-milhao { background: radial-gradient(circle at 50% -10%, #23328A 0%, #0B1342 50%, #050A24 100%); background-attachment: fixed; background-color: #0F0A26; }
body.theme-erra { background: radial-gradient(circle at 50% -10%, #5B1A8A 0%, #23104A 50%, #12082A 100%); background-attachment: fixed; background-color: #0F0A26; }

.game { width: min(1240px, 100%); margin: 0 auto; padding: 12px 16px 30px; }
.no-anim *, .no-anim *::before, .no-anim *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
.no-anim .fresh, .no-anim .fresh::after { animation-duration: .9s !important; }
.no-anim .pulse { animation-duration: 1.4s !important; }

/* topo da partida */
.g-top { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; backdrop-filter: blur(8px); }
.g-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.g-title b { font-family: var(--font-d); font-size: 1.2rem; font-weight: 600; }
.g-title span { color: var(--muted); font-size: .85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmr { flex: 1; display: flex; align-items: center; gap: 10px; max-width: 420px; margin-left: auto; }
.tmr-n { font-family: var(--font-d); font-weight: 700; font-size: 1.6rem; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.tmr-bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.tmr-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #22D3EE, #22C55E); transition: width .1s linear; }
.tmr.low .tmr-n { color: #FCA5A5; animation: pulse .5s infinite; } .tmr.low .tmr-bar i { background: linear-gradient(90deg, #EF4444, #F97316); }
.g-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; padding: 8px 12px; font-weight: 800; }
.g-btn:hover { background: rgba(255,255,255,.15); }

/* contagem regressiva */
.countdown { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(5,3,18,.75); backdrop-filter: blur(4px); text-align: center; }
.count-n { font-family: var(--font-d); font-size: 9rem; font-weight: 700; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: pop .5s infinite alternate; }
.count-lbl { font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }

/* painel de pergunta */
.qpanel { margin: 14px 0; }
.q-text { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 18px 22px; font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 800; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.3); animation: qin .4s ease-out; }
@keyframes qin { from { transform: translateY(10px); opacity: 0 } }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.opts.n3 { grid-template-columns: repeat(3, 1fr); } .opts.n2 { grid-template-columns: 1fr 1fr; }
.opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; border: 2px solid rgba(255,255,255,.14); background: rgba(10,6,30,.55); text-align: left; font-weight: 800; font-size: 1rem; transition: transform .12s, background .12s, border-color .12s; animation: qin .4s ease-out backwards; }
.opt:nth-child(2) { animation-delay: .06s } .opt:nth-child(3) { animation-delay: .12s } .opt:nth-child(4) { animation-delay: .18s }
.opt:not(:disabled):hover { transform: translateY(-2px); border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
.opt:disabled { cursor: default; }
.opt-l { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.12); font-family: var(--font-d); font-size: 1.05rem; }
.opt.picked { border-color: var(--yellow); background: rgba(250,204,21,.16); }
.opt.picked .opt-l { background: var(--yellow); color: #3B2A00; }
.opt.correct { border-color: var(--green); background: rgba(34,197,94,.28); animation: blink .5s 3; }
.opt.correct .opt-l { background: var(--green); }
.opt.wrong { border-color: var(--red); background: rgba(239,68,68,.25); }
.opt.wrong .opt-l { background: var(--red); }
.opt.off { opacity: .18; text-decoration: line-through; }
.qpanel .opt.picked { border-color: var(--yellow); background: rgba(250,204,21,.18); }
.qpanel .opt.picked .opt-l { background: var(--yellow); color: #3B2A00; }
.qpanel .opt.correct { border-color: var(--green); background: rgba(34,197,94,.30); }
.qpanel .opt.correct .opt-l { background: var(--green); color: #fff; }
.qpanel .opt.wrong { border-color: var(--red); background: rgba(239,68,68,.28); }
.qpanel .opt.wrong .opt-l { background: var(--red); color: #fff; }
@keyframes blink { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.35); } }
.q-status { min-height: 30px; margin-top: 10px; text-align: center; font-weight: 800; }
.qs-ok { color: #86EFAC; font-size: 1.15rem; } .qs-bad { color: #FCA5A5; font-size: 1.15rem; } .qs-wait { color: var(--yellow); } .qs-info, .qs-watch { color: var(--muted); }
.banner-msg { margin: 10px auto; text-align: center; padding: 10px 16px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); font-weight: 800; max-width: 680px; animation: pop .35s; }

/* ---------- QUEM ERRA CAI ---------- */
.erra-stage { position: relative; border-radius: 26px; padding: 18px 16px 16px; background: radial-gradient(ellipse at 50% 120%, rgba(236,72,153,.5), transparent 60%), radial-gradient(ellipse at 50% -20%, rgba(255,255,255,.18), transparent 50%); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.erra-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.erra-logo { font-family: var(--font-d); font-weight: 700; font-size: 1.7rem; letter-spacing: 1px; text-shadow: 0 4px 0 #6B21A8, 0 8px 18px rgba(0,0,0,.4); }
.erra-logo em { font-style: normal; color: #FB7185; }
.pods { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding-bottom: 0; }
.pp { position: relative; width: 120px; display: flex; flex-direction: column; align-items: center; }
.pp-av { position: relative; z-index: 2; margin-bottom: -6px; transition: transform .3s; }
.pp-box { position: relative; z-index: 1; width: 100%; background: linear-gradient(180deg, #F3E8FF, #C4B5FD); color: #2E1065; border-radius: 14px 14px 4px 4px; padding: 10px 6px 8px; text-align: center; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15); }
.pp-score { display: inline-block; background: #1E1B4B; color: #FDE68A; font-family: var(--font-d); font-weight: 700; padding: 2px 10px; border-radius: 8px; font-size: 1.1rem; letter-spacing: 2px; }
.pp-name { font-weight: 900; font-size: .9rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 108px; }
.pp-st { font-size: .76rem; font-weight: 800; color: #5B21B6; min-height: 1.2em; }
.st-ok { color: #15803D; } .st-bad, .st-down { color: #DC2626; }
.pp-trap { width: 100%; height: 12px; background: #111; border-radius: 0 0 8px 8px; transform-origin: left; }
.pp.me .pp-box { background: linear-gradient(180deg, #FEF3C7, #FCD34D); }
.pp.down .pp-av { opacity: 0; } .pp.down .pp-box { filter: grayscale(.9) brightness(.6); }
.pp.down .pp-trap { background: radial-gradient(ellipse at 50% 0%, #000 40%, #1f1033); box-shadow: inset 0 6px 10px #000; }
.pp.falling .pp-av { animation: fallav 1.4s ease-in forwards; opacity: 1; }
.pp.falling .pp-trap { animation: trap .5s backwards; }
@keyframes fallav { 0% { transform: translateY(0); opacity: 1 } 25% { transform: translateY(-14px) } 100% { transform: translateY(150px) rotate(140deg); opacity: 0 } }
@keyframes trap { from { transform: scaleY(.2); background: #111; } }

/* ---------- RUMO AO MILHÃO ---------- */
.mil-layout { display: grid; grid-template-columns: 1fr 270px; gap: 18px; align-items: start; }
.mil-prize { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.mil-prize div { background: linear-gradient(180deg, #1E3A8A, #0F1D5C); border: 2px solid #FACC15; border-radius: 99px; padding: 6px 22px; text-align: center; box-shadow: 0 0 24px rgba(250,204,21,.25); }
.mil-prize span { display: block; font-size: .72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #FDE68A; }
.mil-prize b { font-family: var(--font-d); font-size: 1.3rem; }
.q-milhao .q-text { border: 2px solid #60A5FA; background: linear-gradient(180deg, #1E3A8A, #0B1A52); border-radius: 22px; box-shadow: 0 0 30px rgba(96,165,250,.35); }
.q-milhao .opt { border-color: #60A5FA; background: linear-gradient(180deg, #172F7A, #0B1A52); border-radius: 99px; }
.q-milhao .opt-l { color: #FACC15; background: transparent; }
.q-milhao .opt.picked { border-color: #FACC15; background: linear-gradient(180deg, #A16207, #713F12); }
.q-milhao .opt.correct { border-color: #4ADE80; background: linear-gradient(180deg, #15803D, #14532D); }
.q-milhao .opt.wrong { border-color: #F87171; background: linear-gradient(180deg, #B91C1C, #7F1D1D); }
.lls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ll { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; border: 2px solid #FACC15; background: rgba(250,204,21,.12); font-weight: 900; }
.ll-i { font-size: 1.1rem; } .ll.used { opacity: .3; text-decoration: line-through; } .ll:disabled { cursor: default; }
.ll:not(:disabled):hover { background: rgba(250,204,21,.25); }
.poll { display: flex; align-items: flex-end; gap: 14px; justify-content: center; margin: 16px auto 0; padding: 14px 18px; border-radius: 16px; background: rgba(0,0,0,.3); width: fit-content; }
.poll-t { font-weight: 800; color: var(--muted); align-self: center; margin-right: 6px; }
.poll-c { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .85rem; }
.poll-bar { width: 30px; height: 90px; background: rgba(255,255,255,.08); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.poll-bar i { display: block; width: 100%; background: linear-gradient(180deg, #FACC15, #CA8A04); animation: grow .8s ease-out; }
@keyframes grow { from { height: 0 !important } }
.ladder { background: linear-gradient(180deg, rgba(15,29,92,.85), rgba(5,10,36,.85)); border: 2px solid rgba(96,165,250,.5); border-radius: 20px; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.lad { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 99px; font-weight: 800; font-size: .9rem; color: #FDE68A; min-height: 30px; }
.lad.safe { color: #fff; } .lad.done { color: #86EFAC; }
.lad.cur { background: linear-gradient(90deg, #F59E0B, #FACC15); color: #3B2A00; animation: pulse 1.2s infinite; }
.lad-n { opacity: .7; font-size: .8rem; } .lad-p { display: flex; } .lad-p .av { width: 22px; height: 22px; font-size: .55rem; margin-left: -6px; }
.mil-players, .mis-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.mp { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); font-weight: 800; font-size: .88rem; position: relative; }
.mp b { color: #FDE68A; } .mp.me { border-color: var(--yellow); } .mp.out { opacity: .45; }
.mp .ans { font-style: normal; background: var(--green); border-radius: 99px; padding: 0 7px; font-size: .75rem; }

/* ---------- ARENA DOS CAMPEÕES ---------- */
.arena-boards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sb { display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; background: #0B1220; border: 2px solid rgba(255,255,255,.12); min-width: 200px; }
.sb.me { border-color: var(--yellow); box-shadow: 0 0 18px rgba(250,204,21,.35); }
.sb-goals { display: grid; place-items: center; min-width: 58px; font-family: var(--font-d); font-weight: 700; font-size: 2.3rem; background: linear-gradient(180deg, var(--c1), color-mix(in srgb, var(--c1) 70%, #000)); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.sb-info { padding: 6px 12px; display: flex; flex-direction: column; justify-content: center; }
.sb-info b { font-family: var(--font-d); font-weight: 600; letter-spacing: 1px; border-bottom: 3px solid var(--c2); padding-bottom: 1px; width: fit-content; }
.sb-info span { font-size: .8rem; color: var(--muted); font-weight: 700; }
.sb-k { display: flex; gap: 3px; flex-wrap: wrap; max-width: 220px; } .k { font-style: normal; font-size: .8rem; color: rgba(255,255,255,.3); } .k.gol { color: #4ADE80; } .k.miss { color: #F87171; }
.pitch { position: relative; margin: 14px auto 0; max-width: 720px; height: 250px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(ellipse at 50% -40%, rgba(255,255,255,.35), transparent 55%), repeating-linear-gradient(90deg, #15803D 0 60px, #16A34A 60px 120px); border: 1px solid rgba(255,255,255,.15); }
.goal { position: absolute; left: 50%; top: 22px; width: 76%; height: 160px; transform: translateX(-50%); border: 7px solid #F8FAFC; border-bottom: 0; border-radius: 6px 6px 0 0; }
.net { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 14px 14px; background-color: rgba(0,0,0,.18); }
.keeper { position: absolute; left: 50%; bottom: -6px; width: 70px; height: 92px; transform: translateX(-50%); transition: transform .5s; }
.keeper svg { width: 100%; height: 100%; }
.keeper.dive-0 { animation: dive0 .6s .55s forwards; } .keeper.dive-1 { animation: dive1 .6s .55s forwards; } .keeper.dive-2 { animation: dive2 .6s .55s forwards; }
@keyframes dive0 { to { transform: translateX(-190%) translateY(-24px) rotate(-60deg); } }
@keyframes dive1 { to { transform: translateX(-50%) translateY(-34px); } }
@keyframes dive2 { to { transform: translateX(90%) translateY(-24px) rotate(60deg); } }
.ball { position: absolute; left: 50%; bottom: -78px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #fff 0 30%, #E5E7EB 55%, #9CA3AF 100%); box-shadow: 0 6px 10px rgba(0,0,0,.35); }
.ball::after { content: ''; position: absolute; inset: 9px; background: #111827; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.ball.shot-0.in { animation: b0in .7s .5s forwards; } .ball.shot-1.in { animation: b1in .7s .5s forwards; } .ball.shot-2.in { animation: b2in .7s .5s forwards; }
.ball.shot-0.saved { animation: b0s .9s .5s forwards; } .ball.shot-1.saved { animation: b1s .9s .5s forwards; } .ball.shot-2.saved { animation: b2s .9s .5s forwards; }
@keyframes b0in { to { transform: translate(-200px, -150px) scale(.6) rotate(-540deg); } }
@keyframes b1in { to { transform: translate(0, -160px) scale(.6) rotate(540deg); } }
@keyframes b2in { to { transform: translate(200px, -150px) scale(.6) rotate(540deg); } }
@keyframes b0s { 60% { transform: translate(-170px, -120px) scale(.65); } 100% { transform: translate(-260px, -40px) scale(.7); } }
@keyframes b1s { 60% { transform: translate(0, -120px) scale(.65); } 100% { transform: translate(60px, -10px) scale(.75); } }
@keyframes b2s { 60% { transform: translate(170px, -120px) scale(.65); } 100% { transform: translate(260px, -40px) scale(.7); } }
.arena-banner { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: var(--font-d); font-weight: 700; font-size: clamp(2.4rem, 7vw, 4.2rem); z-index: 5; letter-spacing: 2px; animation: bigpop .5s 1.1s backwards; }
.arena-banner.gol { color: #FACC15; text-shadow: 0 5px 0 #15803D, 0 10px 26px rgba(0,0,0,.6); }
.arena-banner.def { color: #fff; text-shadow: 0 5px 0 #B91C1C, 0 10px 26px rgba(0,0,0,.6); }
@keyframes bigpop { from { transform: scale(.2); opacity: 0 } }
.q-arena .q-text { background: linear-gradient(180deg, #1E40AF, #1E3A8A); border-color: #60A5FA; }
.q-arena .opt { background: linear-gradient(180deg, #FDE047, #FACC15); color: #1C1917; border-color: #FEF08A; }
.q-arena .opt-l { background: #1E3A8A; color: #fff; }
.q-arena .opt.picked { border-color: #fff; box-shadow: 0 0 0 3px #fff; }
.q-arena .opt.correct { background: linear-gradient(180deg, #4ADE80, #16A34A); color: #052e16; }
.q-arena .opt.wrong { background: linear-gradient(180deg, #F87171, #DC2626); color: #fff; }

/* ---------- MISSÃO SECRETA ---------- */
.mis-layout { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
.board { position: relative; aspect-ratio: 16 / 7.4; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 85% 15%, rgba(249,115,22,.35), transparent 40%), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px, #140A0A; }
.board-stamp { position: absolute; right: 18px; bottom: 6px; transform: rotate(-8deg); color: rgba(239,68,68,.28); border: 3px solid rgba(239,68,68,.28); border-radius: 8px; padding: 0 10px; font-family: var(--font-d); font-weight: 700; letter-spacing: 4px; font-size: 1.1rem; }
.board-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.board-path polyline { fill: none; stroke: rgba(253,186,116,.45); stroke-width: 1.2; stroke-dasharray: 2 1.5; vector-effect: non-scaling-stroke; stroke-width: 4px; }
.cell { position: absolute; width: 7.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: clamp(.6rem, 1.4vw, 1rem);
  background: radial-gradient(circle at 35% 30%, #FED7AA, #FB923C); color: #431407; box-shadow: 0 4px 0 #9A3412, 0 6px 14px rgba(0,0,0,.45); }
.cell.start { background: radial-gradient(circle at 35% 30%, #BBF7D0, #22C55E); color: #052E16; box-shadow: 0 4px 0 #166534, 0 6px 14px rgba(0,0,0,.45); font-size: clamp(.5rem, 1vw, .75rem); }
.cell.end { width: 9%; background: radial-gradient(circle at 35% 30%, #FECACA, #EF4444); color: #fff; box-shadow: 0 4px 0 #7F1D1D, 0 0 26px rgba(239,68,68,.7); animation: pulse 1.6s infinite; }
.token { position: absolute; z-index: 4; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.token .av { width: clamp(24px, 3vw, 34px); height: clamp(24px, 3vw, 34px); border: 2px solid #fff; }
.token.me { z-index: 5; } .token.me .av { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(250,204,21,.45); }
.token.moving { animation: tokmove 1.6s 2.6s cubic-bezier(.4,1.5,.5,1) backwards; }
@keyframes tokmove { from { left: var(--px); top: var(--py); } }
.mis-side { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px; }
.mis-side h4 { margin-bottom: 8px; letter-spacing: 2px; text-transform: uppercase; font-size: .85rem; color: #FDBA74; }
.mis-list { flex-direction: column; align-items: stretch; margin-top: 0; }
.mis-list .mp { justify-content: flex-start; } .mis-list .mp b { margin-left: auto; color: #FDBA74; }
.wheel-box { margin-top: 14px; text-align: center; position: relative; }
.wheel-ptr { color: #FACC15; font-size: 1.3rem; line-height: 1; position: relative; z-index: 2; margin-bottom: -6px; }
.wheel { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; position: relative; border: 5px solid #fff; box-shadow: 0 8px 22px rgba(0,0,0,.5);
  background: conic-gradient(#EC4899 0 120deg, #FACC15 120deg 240deg, #22D3EE 240deg 360deg); animation: spinw 2.4s cubic-bezier(.15,.6,.2,1) forwards; }
.wheel span { position: absolute; left: 50%; top: 50%; font-family: var(--font-d); font-weight: 700; font-size: 1.8rem; color: #1C1917; transform: rotate(var(--a)) translateY(-44px) rotate(calc(-1 * var(--a))); margin: -.6em 0 0 -.3em; }
@keyframes spinw { from { transform: rotate(0) } to { transform: rotate(var(--rot)) } }
.wheel-res { margin-top: 10px; font-family: var(--font-d); font-size: 1.3rem; color: #FACC15; animation: bigpop .4s 2.4s backwards; }
.mis-stop { padding: 18px; border-radius: 14px; background: rgba(239,68,68,.15); color: #FCA5A5; font-weight: 800; }
.q-missao .q-text { background: linear-gradient(180deg, rgba(127,29,29,.6), rgba(20,8,8,.8)); border-color: rgba(249,115,22,.5); }
.q-missao .opt { background: rgba(20,8,8,.75); border-color: rgba(249,115,22,.35); }
.q-missao .opt-l { background: #EA580C; }

/* ---------- BATALHA NAVAL ---------- */
.nv-layout { display: flex; flex-direction: column; gap: 6px; }
.nv-maps { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.nv-card { background: rgba(3,20,38,.75); border: 2px solid rgba(34,211,238,.25); border-radius: 18px; padding: 12px; box-shadow: 0 0 30px rgba(34,211,238,.08) inset; }
.nv-card.mine { border-color: rgba(34,197,94,.45); }
.nv-card.target { border-color: #F97316; box-shadow: 0 0 26px rgba(249,115,22,.35); animation: glow 1.2s infinite alternate; }
.nv-card.dead { opacity: .5; }
@keyframes glow { to { box-shadow: 0 0 40px rgba(249,115,22,.6); } }
.nv-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.nv-h span { font-size: .8rem; color: #A5F3FC; font-weight: 800; width: 100%; }
.ngrid { display: grid; grid-template-columns: 18px repeat(6, 1fr); gap: 3px; width: min(270px, 80vw); }
.ngrid .lbl { display: grid; place-items: center; font-size: .7rem; font-weight: 900; color: #67E8F9; }
.nc { aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(34,211,238,.22); background: rgba(14,116,144,.25); position: relative; display: block; padding: 0; }
.nc.ship { background: linear-gradient(180deg, #94A3B8, #475569); border-color: #CBD5E1; }
.nc.sunk { background: linear-gradient(180deg, #7F1D1D, #450A0A); border-color: #F87171; }
.nc.hit::after { content: '✹'; position: absolute; inset: 0; display: grid; place-items: center; color: #FDBA74; font-size: 1.2rem; text-shadow: 0 0 8px #F97316; }
.nc.miss::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(186,230,253,.75); }
.nc.fresh.hit::after { animation: boom .9s ease-out; } .nc.fresh.miss::after { animation: splash .9s ease-out; }
@keyframes boom { 0% { transform: scale(3); opacity: 0; color: #fff } 30% { opacity: 1 } }
@keyframes splash { 0% { width: 140%; height: 140%; opacity: 0 } 40% { opacity: 1 } }
.ngrid.armed button.nc { cursor: crosshair; }
.ngrid.armed button.nc:hover { background: rgba(249,115,22,.5); border-color: #FDBA74; }
.nc.aim { background: #F97316 !important; }
.fire-panel { text-align: center; padding: 16px; border-radius: 18px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.fire-panel.armed { border-color: #F97316; background: rgba(124,45,18,.35); }
.fire-panel b { font-family: var(--font-d); font-size: 1.4rem; font-weight: 600; } .fire-panel span { color: var(--muted); font-weight: 700; }
.missiles i { font-style: normal; font-size: 1.8rem; display: inline-block; animation: floaty 1.6s ease-in-out infinite; }
.missiles i:nth-child(2) { animation-delay: -.3s } .missiles i:nth-child(3) { animation-delay: -.6s } .missiles i:nth-child(4) { animation-delay: -.9s } .missiles i:nth-child(5) { animation-delay: -1.2s }
.q-naval .q-text { background: linear-gradient(180deg, rgba(8,51,68,.9), rgba(3,20,38,.9)); border-color: rgba(34,211,238,.45); }
.q-naval .opt { background: rgba(3,20,38,.8); border-color: rgba(34,211,238,.3); }
.q-naval .opt-l { background: #0891B2; }

/* ---------- tela final ---------- */
.final-screen { min-height: 100vh; display: grid; place-items: center; padding: 30px 16px; position: relative; overflow: hidden; }
.final-card { width: min(780px, 100%); text-align: center; position: relative; z-index: 2; }
.final-card h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 12px 0 4px; }
.final-card .tbl { text-align: left; }
.confetti i { position: fixed; top: -20px; left: var(--x); width: 10px; height: 16px; background: var(--c); border-radius: 2px; animation: conf var(--d) var(--dl) linear infinite; z-index: 1; }
@keyframes conf { to { transform: translateY(110vh) rotate(720deg); } }

@media (max-width: 900px) {
  .mil-layout, .mis-layout { grid-template-columns: 1fr; }
  .ladder { order: -1; flex-direction: row; overflow-x: auto; padding: 6px; }
  .ladder .lad { flex: none; grid-template-columns: auto; padding: 4px 10px; font-size: .78rem; }
  .ladder .lad-n, .ladder .lad-p { display: none; }
  .ladder { flex-direction: row-reverse; }
}
@media (max-width: 640px) {
  .g-top { flex-wrap: wrap; } .tmr { order: 3; max-width: none; width: 100%; flex-basis: 100%; }
  .opts, .opts.n3 { grid-template-columns: 1fr; }
  .pp { width: 96px; } .pitch { height: 210px; } .goal { height: 130px; }
  .ngrid { width: min(240px, 86vw); }
  .count-n { font-size: 6rem; }
}
.q-disc { display: table; margin: -4px auto 8px; padding: 3px 12px; border-radius: 99px; font-size: .78rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.opt-n { margin-left: auto; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; background: rgba(0,0,0,.35); font-family: var(--font-d); font-size: 1rem; }
.mis-moves { display: flex; flex-direction: column; gap: 6px; text-align: left; } .mis-moves div { display: flex; align-items: center; gap: 8px; font-weight: 800; } .mis-moves b { margin-left: auto; color: #FDBA74; }

/* ===================== AJUSTES DE LEGIBILIDADE (v1.9) ===================== */
.q-text { font-size: clamp(1.1rem, 1.9vw, 1.55rem); line-height: 1.4; padding: 20px 24px; }
.opt { font-size: clamp(1rem, 1.25vw, 1.18rem); min-height: 60px; line-height: 1.3; }
.opt-l { width: 38px; height: 38px; }
.q-status { font-size: 1.05rem; }
.g-title b { font-size: 1.3rem; }
.g-title span { font-size: .9rem; }
.q-arena .opt:not(:disabled):hover { background: linear-gradient(180deg, #FEF08A, #FDE047); color: #1C1917; }
.q-milhao .opt:not(:disabled):hover { background: linear-gradient(180deg, #1E40AF, #172F7A); }
.lls .ll { white-space: nowrap; font-size: .95rem; }
.mil-prize span { font-size: .78rem; }
.ladder .lad { font-size: .95rem; }
/* Quem Erra Cai: pódios mais largos, nome legível */
.pp { width: 138px; }
.pp-name { font-size: .95rem; max-width: 126px; }
.pp-st { font-size: .82rem; }
/* Arena: placares legíveis */
.sb { min-width: 220px; }
.sb-info b { font-size: 1.05rem; }
.sb-info span { font-size: .88rem; color: #E2E8F0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k { font-size: .95rem; }
/* Missão */
.mis-list .mp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mis-list .mp b { flex: none; }
.board.mobile { aspect-ratio: 4 / 5.2; }
.board.mobile .cell { width: 13%; font-size: .95rem; }
.board.mobile .cell.end { width: 15%; }
.board.mobile .cell.start { font-size: .7rem; }
/* Batalha Naval */
.ngrid { width: min(300px, 84vw); }
.ngrid .lbl { font-size: .8rem; }
.nv-h b { font-size: 1.02rem; }
.nv-h span { font-size: .85rem; }
.fire-panel span { font-size: 1rem; }
@media (max-width: 640px) {
  .pp { width: 104px; } .pp-name { max-width: 96px; font-size: .85rem; }
  .sb { min-width: 0; flex: 1 1 150px; } .sb-goals { min-width: 46px; font-size: 1.9rem; }
  .opt { min-height: 54px; }
  .g-top { gap: 8px; } .g-title b { font-size: 1.1rem; }
}
.arena-sum { max-width: 720px; margin: 12px auto 0; display: flex; flex-direction: column; gap: 6px; text-align: center; font-weight: 800; font-size: 1.1rem; animation: pop .35s; }
.arena-sum > div { padding: 8px 14px; border-radius: 12px; }
.as-gol { background: rgba(34,197,94,.18); border: 1px solid rgba(34,197,94,.45); color: #BBF7D0; }
.as-def { background: rgba(239,68,68,.16); border: 1px solid rgba(239,68,68,.4); color: #FECACA; }

/* ===================== NOVOS JOGOS (v2.1) ===================== */
body.theme-corrida { background: radial-gradient(circle at 50% -20%, #3B3B4F 0%, #17171F 55%, #0B0B10 100%); background-attachment: fixed; background-color: #0F0A26; }
body.theme-batata { background: radial-gradient(circle at 30% 20%, #5A1A0A 0%, #2A0B05 55%, #120402 100%); background-attachment: fixed; background-color: #0F0A26; }
body.theme-torre { background: linear-gradient(180deg, #0E3A5C 0%, #0B2340 55%, #081628 100%); background-attachment: fixed; background-color: #0F0A26; }
body.theme-tesouro { background: radial-gradient(circle at 30% 0%, #6B4A1A 0%, #3A270C 55%, #1C1306 100%); background-attachment: fixed; background-color: #0F0A26; }
body.theme-bingo { background: radial-gradient(circle at 50% -10%, #0F5B57 0%, #073331 55%, #031A19 100%); background-attachment: fixed; background-color: #0F0A26; }
body.theme-cabo { background: linear-gradient(180deg, #1A3D7A 0%, #132B57 60%, #0B1A36 100%); background-attachment: fixed; background-color: #0F0A26; }
.mp .ans.off { background: rgba(239,68,68,.6); } .mp .ans.dig { background: #A16207; }
.lbl-sm { display: block; font-size: .75rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* ---------- CORRIDA MALUCA ---------- */
.track { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px; border-radius: 20px; background: #2A2A33; border: 3px solid #4B4B57; box-shadow: inset 0 0 0 2px #1C1C22, 0 14px 40px rgba(0,0,0,.4); }
.track-marks { position: absolute; inset: 10px 10px; pointer-events: none; }
.track-marks i { position: absolute; top: 0; bottom: 0; left: calc(var(--f) * (100% - 78px) + 62px); border-left: 1px dashed rgba(255,255,255,.08); }
.finish { position: absolute; z-index: 1; right: 12px; top: 8px; bottom: 8px; width: 16px; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 12px 12px; border-radius: 3px; box-shadow: 0 0 12px rgba(255,255,255,.25); }
.lane { position: relative; height: 46px; border-radius: 10px; background: repeating-linear-gradient(90deg, #3A3A45 0 44px, #34343E 44px 88px); border-bottom: 2px dashed rgba(255,255,255,.18); }
.lane.me { box-shadow: inset 0 0 0 2px var(--yellow); }
.lane.left { opacity: .4; }
.lane-n { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-weight: 900; font-size: .85rem; color: rgba(255,255,255,.55); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.lane-c { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); font-family: var(--font-d); font-size: .95rem; color: rgba(255,255,255,.4); }
.lane.done .lane-c { color: var(--yellow); }
.car { --cw: 64px; position: absolute; z-index: 2; top: 50%; left: calc(var(--f) * (100% - var(--cw) - 30px) + 6px); width: var(--cw); transform: translateY(-50%); transition: left .9s cubic-bezier(.3,.8,.3,1); }
.car.moving { animation: drive 1.3s cubic-bezier(.3,.8,.3,1) backwards; }
@keyframes drive { from { left: calc(var(--f0) * (100% - var(--cw) - 30px) + 6px); } }
.car.spin .car-svg { animation: spin .9s ease-out; }
@keyframes spin { 30% { transform: rotate(160deg); } 70% { transform: rotate(330deg); } to { transform: rotate(360deg); } }
.car-svg { display: block; width: 100%; height: auto; aspect-ratio: 64 / 30; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.cr-tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px); white-space: nowrap; font-weight: 900; font-size: .8rem; padding: 1px 8px; border-radius: 99px; background: #16A34A; color: #fff; animation: pop .35s; z-index: 3; }
.cr-tag.turbo { background: linear-gradient(90deg, #F59E0B, #FACC15); color: #3B2A00; }
.cr-tag.spin { background: #DC2626; }
.cr-tag.ans { background: rgba(34,211,238,.85); color: #062A33; }
.track.many .lane { height: 32px; } .track.many .car { --cw: 46px; }
.track.many .cr-tag { font-size: .7rem; bottom: auto; top: 50%; left: auto; right: 100%; transform: translate(-4px, -50%); }
.q-corrida .opt { background: rgba(20,20,28,.85); border-color: rgba(250,204,21,.3); } .q-corrida .opt-l { background: #CA8A04; }

/* ---------- BATATA QUENTE ---------- */
.bt-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.bt-circle { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.bt-ring { position: absolute; inset: 10%; border-radius: 50%; border: 3px dashed rgba(249,115,22,.35); background: radial-gradient(circle, rgba(249,115,22,.18), transparent 65%); }
.seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; text-align: center; transition: opacity .3s; z-index: 2; }
.seat b { font-size: .85rem; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .av { border: 3px solid rgba(255,255,255,.25); }
.seat.me b { color: var(--yellow); }
.seat.hot .av { border-color: #F97316; box-shadow: 0 0 0 4px rgba(249,115,22,.45), 0 0 26px rgba(249,115,22,.9); animation: hot .6s infinite alternate; }
@keyframes hot { to { transform: scale(1.08); } }
.seat.out { opacity: .32; filter: grayscale(1); }
.seat.elig .av { border-color: #22D3EE; box-shadow: 0 0 0 4px rgba(34,211,238,.35); }
.hearts { display: flex; gap: 1px; font-size: .85rem; line-height: 1; } .hearts i { font-style: normal; color: rgba(255,255,255,.22); } .hearts i.on { color: #F43F5E; text-shadow: 0 0 6px rgba(244,63,94,.6); }
.bt-st { position: absolute; top: -4px; right: 14px; font-style: normal; font-weight: 900; font-size: .75rem; min-width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; background: var(--green); }
.bt-st.bad { background: var(--red); }
.bomb { position: absolute; width: 92px; height: 92px; transform: translate(-50%, -50%); z-index: 3; filter: drop-shadow(0 0 16px rgba(249,115,22,.85)); transition: left .7s, top .7s; }
.bomb svg { width: 100%; height: 100%; }
.bomb.tick svg { animation: shake .35s infinite; }
@keyframes shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.bomb .spark { animation: spark .25s infinite alternate; transform-origin: 56px 8px; }
@keyframes spark { to { transform: scale(1.4); opacity: .7; } }
.bomb.fly { animation: fly .8s cubic-bezier(.4,0,.2,1) backwards; }
@keyframes fly { from { left: var(--fx); top: var(--fy); } 50% { transform: translate(-50%, -90%) scale(1.25); } }
.kaboom { position: absolute; transform: translate(-50%, -50%); font-size: 5rem; z-index: 4; animation: kaboom .9s ease-out forwards; pointer-events: none; }
@keyframes kaboom { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 60% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.bt-side { min-width: 0; }
.bt-head { padding: 12px 16px; border-radius: 16px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); font-weight: 800; font-size: 1.05rem; line-height: 1.4; animation: pop .3s; }
.bt-head.hot { background: rgba(249,115,22,.22); border-color: rgba(249,115,22,.6); }
.bt-head.boom { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.6); }
.pass-box { margin-top: 12px; }
.pass-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.pass-btn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 2px solid rgba(34,211,238,.5); background: rgba(34,211,238,.12); font-weight: 800; text-align: left; min-width: 0; }
.pass-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-btn:hover:not(:disabled) { background: rgba(34,211,238,.25); transform: translateY(-2px); }
.pass-btn.picked { border-color: var(--yellow); background: rgba(250,204,21,.2); }
.q-batata .opt { background: rgba(30,8,4,.8); border-color: rgba(249,115,22,.35); } .q-batata .opt-l { background: #EA580C; }
.q-batata .opts { grid-template-columns: 1fr 1fr; }

/* ---------- TORRE DE BLOCOS ---------- */
.torre-stage { position: relative; border-radius: 24px; padding: 16px 12px 0; background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.18), transparent 25%), linear-gradient(180deg, rgba(56,189,248,.18), rgba(14,58,92,.1)); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.towers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; min-height: 300px; max-width: calc(var(--n) * 150px); margin: 0 auto; }
.tw { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 100%; }
.tw-top { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; min-height: 24px; }
.tw-h { font-family: var(--font-d); font-size: 1.25rem; font-weight: 700; }
.tw-st { font-style: normal; font-size: .72rem; font-weight: 900; padding: 1px 7px; border-radius: 99px; background: var(--green); white-space: nowrap; animation: pop .3s; }
.tw-st.bad { background: var(--red); }
.tw-stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; width: 100%; transform-origin: bottom center; }
.tw.risk .tw-stack { animation: wobble 1.6s ease-in-out infinite; }
@keyframes wobble { 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
.blk { display: block; height: var(--bh); border-radius: 4px; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.25); }
.blk.w0 { width: 58%; } .blk.w1 { width: 76%; } .blk.w2 { width: 96%; }
.blk.new { animation: drop .6s cubic-bezier(.5,0,.5,1.4) backwards; }
@keyframes drop { from { transform: translateY(-140px); opacity: 0; } }
.tw-stack { position: relative; }
.blk.falling { position: absolute; bottom: 100%; left: 12%; animation: fallout 1.2s ease-in forwards; }
@keyframes fallout { 40% { transform: translateX(14px) rotate(12deg); } to { transform: translate(60px, 160px) rotate(80deg); opacity: 0; } }
.tw-n { margin-top: 6px; padding-bottom: 8px; font-weight: 900; font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw.me .tw-n { color: var(--yellow); } .tw.left { opacity: .4; }
.ground { height: 14px; margin: 0 -12px; background: linear-gradient(180deg, #4D7C3F, #2F5228); }
.q-torre .opt { background: rgba(8,22,40,.85); border-color: rgba(56,189,248,.35); } .q-torre .opt-l { background: #0284C7; }

/* ---------- CAÇA AO TESOURO ---------- */
.tes-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 12px; }
.tmap-wrap { display: flex; justify-content: center; }
.tmap { display: grid; grid-template-columns: 22px repeat(var(--n), minmax(0, 1fr)); gap: 4px; width: min(100%, 560px, 74vh); padding: 12px; border-radius: 20px; background: radial-gradient(circle at 30% 30%, #E2C38A, #C9A56B 60%, #A9844A); box-shadow: inset 0 0 40px rgba(90,55,10,.55), 0 14px 40px rgba(0,0,0,.4); }
.tmap .lbl { display: grid; place-items: center; font-weight: 900; font-size: .8rem; color: #5B3A12; }
.tmap .lbl.hint { color: #B91C1C; background: rgba(255,255,255,.45); border-radius: 6px; }
.tc { aspect-ratio: 1; border-radius: 8px; border: 2px solid rgba(90,55,10,.35); background: #B89156; display: grid; place-items: center; font-size: clamp(.9rem, 2.6vw, 1.6rem); padding: 0; min-width: 0; }
.tc.hint { background: #CDA86A; box-shadow: inset 0 0 0 2px rgba(185,28,28,.45); }
.tc.dug { background: #7A5A2C; border-color: var(--c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); }
.tc.dug.mine { box-shadow: inset 0 0 0 2px var(--yellow); }
.tc.fresh { animation: pop .5s; }
.tc.chest { background: #FACC15; } .tc.chest.lost { opacity: .7; outline: 3px dashed #B91C1C; }
.tmap.armed button.tc { cursor: pointer; transition: transform .1s, background .1s; }
.tmap.armed button.tc:hover { background: #E2C38A; transform: scale(1.08); }
.tmap.armed button.tc.aim { background: var(--yellow); }
.tes-side { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px; }
.tes-side h4 { margin-bottom: 8px; letter-spacing: 2px; text-transform: uppercase; font-size: .85rem; color: #FDE68A; }
.tes-side .mis-list .mp b { color: #FDE68A; }
.tes-hints { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .tes-hints div { padding: 8px 12px; border-radius: 12px; background: rgba(250,204,21,.16); border: 1px solid rgba(250,204,21,.45); font-weight: 800; }
.tes-legend { margin-top: 12px; font-size: .85rem; font-weight: 700; color: var(--muted); line-height: 1.6; }
.tes-ban { font-size: 1.1rem; max-width: 760px; } .tes-ban.gold { background: rgba(250,204,21,.25); border-color: rgba(250,204,21,.6); }
.q-tesouro .opt { background: rgba(40,26,8,.85); border-color: rgba(250,204,21,.3); } .q-tesouro .opt-l { background: #A16207; }

/* ---------- BINGO DO SABER ---------- */
.bg-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bg-card-wrap { background: #FFF7E6; color: #3B2A12; border-radius: 22px; padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.4); max-width: 560px; width: 100%; margin: 0 auto; }
.bg-title { text-align: center; font-family: var(--font-d); font-weight: 700; font-size: 1.5rem; letter-spacing: 3px; color: #D9480F; margin-bottom: 10px; }
.opts.bcard { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 7px; margin: 0; }
.bc { position: relative; min-height: 74px; border-radius: 12px; border: 0; background: #FDE9C4; color: #3B2A12; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: clamp(.78rem, 1.3vw, 1rem); line-height: 1.15; padding: 6px 5px; overflow: hidden; overflow-wrap: break-word; hyphens: auto; animation: qin .35s backwards; }
.bc.long { font-size: clamp(.7rem, 1.05vw, .88rem); }
.bcard.n3 .bc { min-height: 92px; font-size: clamp(.85rem, 1.5vw, 1.1rem); }
button.bc { cursor: pointer; box-shadow: 0 3px 0 #E4C48E; transition: transform .1s; }
button.bc:hover { transform: translateY(-2px); background: #FFE2A8; }
.bc.free { background: #FACC15; font-size: 1.6rem; }
.bc.mk { background: #FBCFE8; color: #831843; box-shadow: inset 0 0 0 3px #DB2777; }
.bc.mk::after { content: '✓'; position: absolute; right: 6px; top: 2px; font-size: .95rem; color: #DB2777; }
.bc.line { background: #BBF7D0; color: #14532D; box-shadow: inset 0 0 0 3px #16A34A; animation: blink .5s 4; }
.bc.line::after { color: #16A34A; }
.bc.picked { background: #FEF08A; box-shadow: inset 0 0 0 3px #CA8A04; }
.bc.wrong { background: #FECACA; box-shadow: inset 0 0 0 3px #DC2626; }
.bg-need { text-align: center; margin-top: 10px; font-weight: 900; color: #7C2D12; }
.bg-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bg-side h4 { margin: 6px 0 0; letter-spacing: 2px; text-transform: uppercase; font-size: .85rem; color: #99F6E4; }
.ball-card { display: flex; gap: 12px; align-items: stretch; }
.ball-card .q-text { flex: 1; text-align: left; margin: 0; }
.ball-n { flex: none; width: 76px; border-radius: 50%; aspect-ratio: 1; align-self: center; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #fff, #FDE68A 40%, #F59E0B); color: #3B2A00; box-shadow: 0 8px 20px rgba(0,0,0,.4); animation: roll .6s ease-out; }
.ball-n span { font-size: .6rem; font-weight: 900; letter-spacing: 1px; } .ball-n b { font-family: var(--font-d); font-size: 1.7rem; line-height: 1; }
@keyframes roll { from { transform: translateX(-60px) rotate(-200deg); opacity: 0; } }
.ball-ans { margin-top: 4px; padding: 10px 14px; border-radius: 14px; background: rgba(34,197,94,.2); border: 1px solid rgba(34,197,94,.55); font-weight: 800; font-size: 1.1rem; animation: pop .35s; }
.bg-layout .ball-card { flex-wrap: wrap; } .bg-layout .ball-ans { flex-basis: 100%; }
.nope { white-space: normal; min-height: 54px; }
.nope.picked { border-color: var(--yellow); background: rgba(250,204,21,.18); }
.calls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.calls span:not(.lbl-sm) { padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .82rem; font-weight: 800; }
.calls span.new { background: rgba(34,197,94,.3); }
.calls .lbl-sm { flex-basis: 100%; margin: 0; }
.bg-layout .mis-list .mp b { color: #99F6E4; } .mp.bingo { border-color: var(--green); background: rgba(34,197,94,.2); }
.bg-layout.spec { grid-template-columns: 1fr; } .bg-layout.spec .ball-n { width: 110px; } .bg-layout.spec .ball-n b { font-size: 2.4rem; }
.bg-layout.spec .q-text { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.bg-layout.spec .ball-ans { font-size: 1.5rem; text-align: center; }
.bg-layout.spec .mis-list { flex-direction: row; flex-wrap: wrap; }

/* ---------- CABO DE GUERRA ---------- */
.cabo-stage { border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, #2B5BA8 0%, #1A3D7A 52%, #3F6B3A 52%, #2E5229 100%); padding: 12px 14px 10px; }
.cb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cb-tn { font-family: var(--font-d); font-weight: 700; font-size: 1.1rem; padding: 4px 14px; border-radius: 99px; white-space: nowrap; }
.cb-tn.t0 { background: #DC2626; } .cb-tn.t1 { background: #2563EB; }
.cb-you { font-weight: 900; font-size: .9rem; padding: 4px 12px; border-radius: 99px; background: rgba(0,0,0,.35); border: 2px solid; white-space: nowrap; }
.cb-you.t0 { border-color: #F87171; } .cb-you.t1 { border-color: #60A5FA; }
.cb-field { position: relative; height: 170px; margin-top: 6px; overflow: hidden; }
.cb-zone { position: absolute; top: 18px; bottom: 18px; width: 5px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.6); }
.cb-zone.z0 { left: 20%; } .cb-zone.z1 { left: 80%; }
.cb-mid { position: absolute; left: 50%; top: 28px; bottom: 28px; border-left: 3px dashed rgba(255,255,255,.5); }
.cb-rope { position: absolute; inset: 0; transform: translateX(var(--x)); transition: transform .9s cubic-bezier(.3,.8,.3,1); }
.cb-rope.pulled { animation: tug 1.1s cubic-bezier(.3,.8,.3,1) backwards; }
@keyframes tug { from { transform: translateX(var(--x0)); } 25% { transform: translateX(calc(var(--x0) + (var(--x) - var(--x0)) * -.15)); } }
.cb-line { position: absolute; left: -10%; right: -10%; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; background: repeating-linear-gradient(45deg, #D6AE73 0 8px, #9C7445 8px 16px); box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.cb-flag { position: absolute; left: 50%; top: 50%; width: 8px; height: 56px; margin: -28px 0 0 -4px; border-radius: 4px; background: #FACC15; box-shadow: 0 0 14px #FACC15; }
.cb-team { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 30%; }
.cb-team.t0 { right: 56%; justify-content: flex-end; } .cb-team.t1 { left: 56%; }
.cb-team .av { border: 3px solid rgba(255,255,255,.4); }
.cb-team.t0 .av { border-color: #F87171; } .cb-team.t1 .av { border-color: #60A5FA; }
.cb-p { position: relative; display: inline-flex; }
.cb-p.me .av { box-shadow: 0 0 0 3px var(--yellow); }
.cb-p.ans::after, .cb-p.ok::after, .cb-p.bad::after { position: absolute; right: -4px; top: -4px; width: 17px; height: 17px; border-radius: 99px; font-size: .62rem; font-weight: 900; display: grid; place-items: center; }
.cb-p.ans::after { content: '✓'; background: #22D3EE; color: #062A33; } .cb-p.ok::after { content: '✔'; background: var(--green); } .cb-p.bad::after { content: '✘'; background: var(--red); }
.cb-more { font-weight: 900; padding: 4px 8px; border-radius: 99px; background: rgba(0,0,0,.35); }
.cb-meter { display: flex; justify-content: center; gap: 5px; margin-top: 4px; }
.cb-meter i { width: 26px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.18); }
.cb-meter i.w0 { background: rgba(239,68,68,.6); } .cb-meter i.w1 { background: rgba(59,130,246,.7); }
.cb-meter i.on { background: #FACC15; box-shadow: 0 0 8px #FACC15; }
.cb-msg.t0 { border-color: rgba(239,68,68,.6); background: rgba(239,68,68,.22); } .cb-msg.t1 { border-color: rgba(59,130,246,.6); background: rgba(59,130,246,.25); }
.q-cabo .opt { background: rgba(10,20,45,.85); border-color: rgba(147,197,253,.35); } .q-cabo .opt-l { background: #2563EB; }

@media (max-width: 900px) {
  .bt-layout, .tes-layout, .bg-layout { grid-template-columns: 1fr; }
  .bt-circle { width: min(100%, 420px); }
  .torre-stage .towers { min-height: 230px; }
}
@media (max-width: 640px) {
  .lane { height: 40px; } .car { --cw: 54px; }
  .lane-c { display: none; } .lane-n { font-size: .75rem; }
  .seat { width: 70px; } .seat b { font-size: .75rem; max-width: 70px; } .seat .av.lg { width: 42px; height: 42px; font-size: .9rem; }
  .bomb { width: 54px; height: 54px; } .kaboom { font-size: 3.5rem; }
  .q-batata .opts { grid-template-columns: 1fr; }
  .bc { min-height: 62px; font-size: .74rem; padding: 4px 2px; } .bc.long { font-size: .66rem; } .opts.bcard { gap: 5px; }
  .cb-you { order: 3; flex-basis: 100%; text-align: center; } .bcard.n3 .bc { min-height: 76px; font-size: .9rem; }
  .bg-card-wrap { padding: 10px; } .bg-title { font-size: 1.2rem; }
  .ball-n { width: 60px; } .ball-n b { font-size: 1.3rem; }
  .cb-field { height: 140px; } .cb-tn { font-size: .9rem; padding: 3px 10px; } .cb-meter i { width: 16px; }
  .cb-team .av { width: 30px; height: 30px; font-size: .65rem; }
  .tes-side { padding: 10px; }
}
@media (min-width: 1100px) { .lane { height: 54px; } .car { --cw: 82px; } .track.many .lane { height: 36px; } .track.many .car { --cw: 54px; } .lane-n { font-size: .95rem; } }
.tes-spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tes-spec .qpanel { margin-top: 0; } .tes-spec .opts { grid-template-columns: 1fr; }
.tes-spec .tmap { width: min(100%, 76vh); }
@media (max-width: 1000px) { .tes-spec { grid-template-columns: 1fr; } }
.bg-layout.play { grid-template-areas: "card ball" "card act" "card list"; grid-template-rows: auto auto 1fr; gap: 12px 18px; }
.bg-layout.play .bg-ball { grid-area: ball; } .bg-layout.play .bg-card-wrap { grid-area: card; } .bg-layout.play .bg-act { grid-area: act; } .bg-layout.play .bg-side { grid-area: list; }
.bg-act .q-status { margin-top: 8px; }
@media (max-width: 900px) { .bg-layout.play { grid-template-columns: 1fr; grid-template-areas: "ball" "card" "act" "list"; grid-template-rows: auto; } }

/* ===================== v2.2: suspense, nomes nas alternativas, resultado grande ===================== */
.qs-drum { color: var(--yellow); font-size: 1.15rem; }
.opt.has-pk { flex-wrap: wrap; row-gap: 8px; }
.opt-pk { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 5px; padding-left: 50px; }
.pk-chip { font-style: normal; font-size: .82rem; font-weight: 900; padding: 3px 10px; border-radius: 99px; background: var(--c); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); animation: pop .3s; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pk-chip.more { background: rgba(255,255,255,.18); }
.q-arena .opt-pk .pk-chip { color: #fff; }