@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('assets/fonts/barlowcond-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('assets/fonts/barlowcond-800.woff2') format('woff2'); }

:root {
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --bg: #06080f; --ink: #f4f1ea; --dim: #9aa3b8; --glass: rgba(10, 14, 26, .84); --line: rgba(255, 255, 255, .12);
  --c0: #e3262f; --c0d: #7c141c; --c1: #f5c518; --c1d: #6b5600;
  --atk: #ff5a3c; --deb: #b072ff; --def: #43a6ff; --pro: #38d67f; --fin: #ffd23f;
  --hudH: 15vh; --handH: 27vh;
  --sw: min(34vw, 66vh);
  --font: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
svg { display: block; }

#app { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }

/* ================= ESTÚDIO ================= */
#studio { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 60%; will-change: transform; }
#wall, #beams { position: absolute; inset: 0; }
#wall svg, #beams svg { width: 100%; height: 100%; }
#beams { pointer-events: none; mix-blend-mode: screen; opacity: .75; }
#mediator { position: absolute; left: 50%; bottom: calc(var(--handH) + 13vh); width: min(13vw, 21vh); aspect-ratio: 400 / 330; transform: translateX(-50%); filter: brightness(.82) saturate(.9); }
#mediator svg { width: 100%; height: 100%; }
.slot { position: absolute; bottom: calc(var(--handH) - 2vh); width: min(34vw, 66vh); height: calc(100vh - var(--hudH) - var(--handH) + 4vh); pointer-events: none; }
#slot0 { left: max(1vw, calc(50vw - 47vh - 26vw)); }
#slot1 { right: max(1vw, calc(50vw - 47vh - 26vw)); }
.cw { position: absolute; left: 50%; bottom: 23%; height: 86%; aspect-ratio: 400 / 540; transform: translateX(-50%); transform-origin: 50% 100%; }
.cw svg.cand { width: 100%; height: 100%; overflow: visible; }
#slot1 .cw svg.cand { transform: scaleX(-1); }
.podium { position: absolute; left: 50%; bottom: 0; width: 82%; height: 34%; transform: translateX(-50%); }
.podium svg { width: 100%; height: 100%; overflow: visible; }
#crowd { position: absolute; left: -2%; right: -2%; bottom: calc(var(--handH) - 6vh); height: 14vh; pointer-events: none; }
#crowd svg { width: 100%; height: 100%; }

/* rig do personagem */
.cand .rig { transform-box: view-box; transform-origin: 200px 540px; animation: breathe 3.2s ease-in-out infinite; }
.cand .head { transform-box: view-box; transform-origin: 210px 300px; }
.cand .arm { transform-box: view-box; transform-origin: 306px 388px; transform: rotate(52deg) translate(-30px, 60px); opacity: 0; transition: transform .16s cubic-bezier(.3, 1.6, .5, 1), opacity .08s; }
.cand.point .arm, .cand.palm .arm { transform: rotate(-6deg); opacity: 1; }
.cand .hp-palm { display: none; }
.cand.palm .hp-palm { display: inline; }
.cand.palm .hp-point { display: none; }
.cw.lula { height: min(80%, calc(var(--sw) * 1.2)); }
.cw.flavio { height: min(90%, calc(var(--sw) * 1.32)); }
body.t-title { --handH: 13vh; }
body.t-title #wframe { opacity: .12; }
#wframe { transition: opacity .6s; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .992); } }
.cw.talk .head { animation: nod .32s ease-in-out infinite alternate; }
@keyframes nod { from { transform: rotate(-1.5deg); } to { transform: rotate(2deg) translateY(2px); } }
.cw.shake .rig { animation: wobble .09s linear infinite; }
@keyframes wobble { 0% { transform: translate(-3px, 0) } 50% { transform: translate(3px, 1px) } 100% { transform: translate(-2px, -1px) } }
.cw.ko .rig { transform: rotate(-9deg) translate(-10px, 26px); transition: transform .5s cubic-bezier(.5, 0, .3, 1.4); animation: none; }
.cw .sweat { position: absolute; width: 10%; aspect-ratio: 1 / 1.4; background: radial-gradient(circle at 40% 60%, #fff 0 18%, #9bd6ff 22% 60%, #3f8fd8 70%); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; border: 2px solid #18120f; opacity: 0; }

/* ================= TELAS ================= */
.screen { position: absolute; inset: 0; display: none; }
.screen.on { display: block; }

/* título */
#title { padding: calc(var(--st) + 2vh) 3vw calc(var(--sb) + 2vh); }
#title::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(3, 5, 10, .75) 85%); pointer-events: none; }
#logo { position: absolute; left: 50%; top: calc(var(--st) + 3vh); transform: translateX(-50%) rotate(-3deg); text-align: center; line-height: .82; z-index: 2; filter: drop-shadow(0 .6vh 0 rgba(0, 0, 0, .7)); pointer-events: none; }
#logo span { display: block; font-weight: 800; font-style: italic; letter-spacing: -.02em; }
#logo .l1 { font-size: min(9vw, 13vh); color: var(--ink); -webkit-text-stroke: .35vh #0b0d14; }
#logo .l2 { font-size: min(14vw, 21vh); background: linear-gradient(90deg, var(--c0) 0 50%, var(--c1) 50% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .4vh #0b0d14; }
#logo .l3 { margin-top: 1.4vh; font-size: min(2.6vw, 3.4vh); font-weight: 600; font-style: normal; letter-spacing: .32em; text-transform: uppercase; color: #cfd5e2; }
#pick { position: absolute; inset: 0; pointer-events: none; }
.pk { position: absolute; bottom: var(--handH); width: min(34vw, 66vh); height: calc(100vh - var(--hudH) - var(--handH)); pointer-events: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 1vh; }
#pkFlavio { left: max(1vw, calc(50vw - 47vh - 26vw)); }
#pkLula { right: max(1vw, calc(50vw - 47vh - 26vw)); }
.pk .pkn { font-size: min(5vw, 7vh); font-weight: 800; font-style: italic; letter-spacing: .02em; padding: .2vh 2.4vh; transform: skewX(-8deg); background: var(--c0); box-shadow: .6vh .6vh 0 #0b0d14; }
.pk .pkp { margin-top: .8vh; font-size: min(2.4vw, 3.2vh); font-weight: 800; letter-spacing: .25em; color: #0b0d14; background: var(--ink); padding: 0 1.2vh; }
#pkFlavio .pkn { background: var(--c1); color: #15120a; }
.pk:hover .pkn, .pk:focus-visible .pkn { transform: skewX(-8deg) scale(1.08); }
.pk { transition: transform .15s; }
.pk:active { transform: scale(.97); }
#pickt { position: absolute; left: 50%; top: calc(var(--st) + min(31vw, 46vh)); transform: translateX(-50%); z-index: 3; white-space: nowrap; font-size: min(3.4vw, 4.6vh); font-weight: 800; letter-spacing: .14em; padding: .6vh 2.4vh; background: #f4f1ea; color: #0b0d14; box-shadow: .6vh .6vh 0 rgba(0,0,0,.6); animation: pickt 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes pickt { 50% { transform: translateX(-50%) scale(1.06); } }
.pk .pkf { position: absolute; inset: 4% 8% 1vh; border: .5vh solid var(--pc, #fff); border-radius: 2vh; box-shadow: 0 0 3vh var(--pc, #fff), inset 0 0 3vh color-mix(in srgb, var(--pc, #fff) 30%, transparent); opacity: .55; animation: pkf 1.3s ease-in-out infinite; pointer-events: none; }
#pkLula { --pc: #e3262f; } #pkFlavio { --pc: #f5c518; }
#pkFlavio .pkf { animation-delay: -.65s; }
@keyframes pkf { 50% { opacity: 1; transform: scale(1.015); } }
.pk:hover .pkf, .pk:focus-visible .pkf { opacity: 1; border-width: .8vh; animation: none; }
.pk .pkc { position: relative; margin-top: 1vh; display: inline-flex; align-items: center; gap: .8vh; font-size: min(2.8vw, 3.8vh); font-weight: 800; letter-spacing: .16em; padding: .5vh 2.6vh; border-radius: 999px; background: #fff; color: #0b0d14; box-shadow: 0 .6vh 0 #7d869a; }
.pk .pkc::before { content: ''; width: 0; height: 0; border-left: 1.4vh solid #0b0d14; border-top: .9vh solid transparent; border-bottom: .9vh solid transparent; }
.pk:hover .pkc { background: var(--pc); }
#vs { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%) rotate(-6deg); font-size: min(9vw, 13vh); font-weight: 800; font-style: italic; color: var(--ink); -webkit-text-stroke: .4vh #0b0d14; text-shadow: 0 0 4vh rgba(255, 255, 255, .35); pointer-events: none; animation: vsPulse 1.4s ease-in-out infinite; }
@keyframes vsPulse { 50% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.08); } }
#tbar { position: absolute; left: 0; right: 0; bottom: calc(var(--sb) + 3vh); display: flex; justify-content: center; gap: 1.4vh; z-index: 3; }
.tb { white-space: nowrap; height: min(7vh, 54px); min-width: min(7vh, 54px); padding: 0 2.2vh; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: min(2.6vw, 3vh); font-weight: 800; letter-spacing: .1em; display: inline-flex; align-items: center; justify-content: center; gap: 1vh; }
.tb.ic { padding: 0; }
.tb svg { width: 50%; height: 50%; }
.tb:active { transform: scale(.95); }
#disc { position: absolute; left: 0; right: 0; bottom: calc(var(--sb) + .6vh); text-align: center; font-size: min(1.8vw, 2vh); color: #7d869a; letter-spacing: .06em; z-index: 3; }

/* ================= BATALHA ================= */
#hud { position: absolute; top: 0; left: 0; right: 0; height: var(--hudH); padding: calc(var(--st) + 1.4vh) calc(var(--sr) + 2vw) 0 calc(var(--sl) + 2vw); display: grid; grid-template-columns: 1fr auto 1fr; gap: 2vw; align-items: start; z-index: 5; pointer-events: none; }
#hud .side { display: flex; flex-direction: column; gap: .6vh; min-width: 0; }
#hud .s1 { align-items: flex-end; }
#hud .nm { display: flex; align-items: baseline; gap: 1vh; font-weight: 800; font-style: italic; }
#hud .s1 .nm { flex-direction: row-reverse; }
#hud .nm b { font-size: min(3.6vw, 4.6vh); letter-spacing: .02em; text-shadow: 0 .3vh 0 rgba(0, 0, 0, .6); }
#hud .nm i { font-size: min(2vw, 2.6vh); padding: 0 .8vh; background: var(--c0); color: #fff; font-style: normal; transform: skewX(-8deg); }
#hud .s1 .nm i { background: var(--c1); color: #15120a; }
#hud .hp { position: relative; width: 100%; height: min(3.4vh, 3vw); background: rgba(0, 0, 0, .6); border: .3vh solid #0b0d14; outline: 1px solid rgba(255, 255, 255, .25); transform: skewX(-14deg); overflow: hidden; }
#hud .s1 .hp { transform: skewX(14deg) scaleX(-1); }
#hud .hp .fill, #hud .hp .ghost { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; }
#hud .hp .ghost { background: #fff; transition: transform .6s cubic-bezier(.6, 0, .4, 1) .35s; }
#hud .hp .fill { background: linear-gradient(180deg, #ff6a6f, var(--c0) 55%, var(--c0d)); transition: transform .18s ease-out; }
#hud .s1 .hp .fill { background: linear-gradient(180deg, #ffe466, var(--c1) 55%, var(--c1d)); }
#hud .hp.low .fill { animation: lowhp .5s steps(2) infinite; }
@keyframes lowhp { 50% { filter: brightness(1.6); } }
#hud .mt { width: 70%; height: min(1.3vh, 1.2vw); background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .18); transform: skewX(-14deg); overflow: hidden; }
#hud .s1 .mt { transform: skewX(14deg) scaleX(-1); }
#hud .mt .fill { height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #ff9d00, var(--fin)); transition: transform .3s; }
#hud .mt.full .fill { animation: meterFull .4s ease-in-out infinite alternate; }
@keyframes meterFull { to { filter: brightness(1.8) drop-shadow(0 0 6px #ffd23f); } }
#hud .st { display: flex; gap: .6vh; min-height: 2.4vh; }
#hud .st span { font-size: min(1.6vw, 2vh); font-weight: 800; letter-spacing: .08em; padding: 0 .7vh; border-radius: .4vh; background: rgba(0, 0, 0, .55); border: 1px solid currentColor; }
#mid { display: flex; flex-direction: column; align-items: center; gap: .6vh; }
#clock { min-width: min(9vw, 12vh); padding: 0 1.4vh; text-align: center; font-size: min(4.6vw, 6vh); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; background: #0b0d14; border: .3vh solid #2a3044; border-radius: .8vh; color: #fff; box-shadow: inset 0 0 2vh rgba(255, 255, 255, .06); }
#clock.warn { color: #ff4b4b; animation: clk .5s steps(2) infinite; }
@keyframes clk { 50% { color: #fff; } }
#blocos { display: flex; gap: .9vh; }
#blocos i { width: 1.6vh; height: 1.6vh; transform: rotate(45deg); background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .4); }
#blocos i.w0 { background: var(--c0); border-color: #fff; }
#blocos i.w1 { background: var(--c1); border-color: #fff; }
#blocos i.now { box-shadow: 0 0 1vh #fff; }
#tema { display: flex; align-items: center; gap: .7vh; padding: .3vh 1.2vh .3vh .6vh; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); opacity: 0; transform: translateY(-1vh); transition: opacity .3s, transform .3s; }
#tema.on { opacity: 1; transform: none; }
#tema .ti { width: min(2.6vw, 3vh); height: min(2.6vw, 3vh); }
#tema .ti svg { width: 100%; height: 100%; }
#tema .tn { font-size: min(1.9vw, 2.4vh); font-weight: 800; letter-spacing: .12em; }
#live { position: absolute; left: calc(var(--sl) + 2vw); top: calc(var(--hudH) + .4vh); display: flex; align-items: center; gap: .8vh; font-size: min(1.6vw, 2vh); font-weight: 800; letter-spacing: .16em; padding: .2vh 1vh; background: rgba(0, 0, 0, .55); border-left: .5vh solid #e3262f; z-index: 4; pointer-events: none; }
#live i { width: 1.1vh; height: 1.1vh; border-radius: 50%; background: #ff2a2a; animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: .15; } }
#bPause { position: absolute; right: calc(var(--sr) + 1.6vw); top: calc(var(--hudH) + .2vh); width: min(5.6vh, 44px); height: min(5.6vh, 44px); border-radius: 50%; background: var(--glass); border: 1px solid var(--line); z-index: 6; display: flex; align-items: center; justify-content: center; }
#bPause svg { width: 46%; height: 46%; }

/* balão de fala */
#bubble { position: absolute; z-index: 7; max-width: min(46vw, 640px); min-width: 22vw; padding: 1.6vh 2.4vh 1.8vh; background: #fbf8f1; color: #16110e; border: .45vh solid #16110e; border-radius: 2.4vh; box-shadow: .8vh .9vh 0 rgba(0, 0, 0, .55); opacity: 0; transform: scale(.4); transform-origin: var(--ox, 0%) 100%; pointer-events: none; }
#bubble::after { content: ''; position: absolute; bottom: -3.2vh; left: var(--tail, 18%); width: 4vh; height: 3.4vh; background: #fbf8f1; border-right: .45vh solid #16110e; border-bottom: .45vh solid #16110e; clip-path: polygon(0 0, 100% 0, 100% 100%); transform: skewX(var(--tsk, 20deg)); }
#bubble.on { opacity: 1; transform: scale(1); transition: transform .22s cubic-bezier(.2, 1.6, .4, 1), opacity .1s; }
#bubble.out { opacity: 0; transform: scale(.7) translateY(-2vh); transition: transform .18s, opacity .18s; }
#bubble .bt { font-size: min(2.9vw, 3.9vh); font-weight: 800; line-height: 1.08; letter-spacing: .005em; }
#bubble .bt .w { display: inline-block; opacity: 0; transform: translateY(.8vh) scale(.6); }
#bubble .bt .w.in { opacity: 1; transform: none; transition: transform .16s cubic-bezier(.2, 2, .4, 1), opacity .05s; }
#bubble .bt .w.k { color: var(--kc, #c8102e); }
#bubble.big .bt { font-size: min(3.6vw, 4.8vh); }
#bubble .q { font-size: 1.3em; line-height: 0; vertical-align: -.25em; color: #9b958a; }

/* GC (legenda de TV) */
#gc { position: absolute; left: calc(var(--sl) + 2vw); bottom: calc(var(--handH) + 1.4vh); z-index: 6; transform: translateX(-120%); transition: transform .3s cubic-bezier(.3, 1.2, .5, 1); pointer-events: none; max-width: 60vw; }
#gc.on { transform: none; }
#gc.r { left: auto; right: calc(var(--sr) + 2vw); transform: translateX(120%); text-align: right; }
#gc.r.on { transform: none; }
#gc.r .gct { border-left: 0; border-right: .7vh solid var(--gcc, var(--c0)); }
#gc .gcn { display: inline-block; font-size: min(1.9vw, 2.5vh); font-weight: 800; letter-spacing: .1em; padding: .3vh 1.4vh; background: var(--gcc, var(--c0)); color: #fff; }
#gc.p1 .gcn { color: #15120a; }
#gc .gct { font-size: min(2.6vw, 3.4vh); font-weight: 800; padding: .3vh 1.6vh; background: #f4f1ea; color: #121010; border-left: .7vh solid var(--gcc, var(--c0)); }

/* mão de cartas */
#hand { position: absolute; left: 0; right: 0; bottom: 0; height: var(--handH); padding: 1.6vh calc(var(--sr) + 2vw) calc(var(--sb) + 1.8vh) calc(var(--sl) + 2vw); display: flex; justify-content: center; align-items: stretch; gap: 1.4vw; z-index: 6; background: linear-gradient(180deg, transparent, rgba(4, 6, 12, .92) 26%); }
#hand.hide .card { transform: translateY(130%); pointer-events: none; }
.card { position: relative; flex: 0 1 min(22vw, 300px); min-width: 0; display: flex; flex-direction: column; text-align: left; padding: 1.1vh 1.3vh 1vh; border-radius: 1.2vh; background: linear-gradient(170deg, rgba(36, 42, 62, .97), rgba(14, 17, 28, .97)); border: 1px solid rgba(255, 255, 255, .14); border-top: .6vh solid var(--tc); box-shadow: 0 1vh 2.4vh rgba(0, 0, 0, .55); transition: transform .32s cubic-bezier(.3, 1.3, .5, 1), box-shadow .2s, filter .2s; overflow: hidden; }
.card:nth-child(2) { transition-delay: .03s; } .card:nth-child(3) { transition-delay: .06s; } .card:nth-child(4) { transition-delay: .09s; }
.card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 55%); pointer-events: none; }
.card .top { display: flex; align-items: center; gap: .7vh; position: relative; }
.card .ty { width: min(3.4vh, 2.6vw); height: min(3.4vh, 2.6vw); flex: none; color: var(--tc); }
.card .ty svg, .card .tm svg { width: 100%; height: 100%; }
.card .tm { width: min(3vh, 2.3vw); height: min(3vh, 2.3vw); margin-left: auto; flex: none; opacity: .55; }
.card .tn { font-size: min(1.4vw, 1.8vh); font-weight: 800; letter-spacing: .14em; color: var(--tc); }
.card .ef { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5vh .7vh; margin-top: .5vh; }
.card .ef b { font-size: min(3.4vw, 4.4vh); font-weight: 800; line-height: .9; color: var(--tc); display: inline-flex; }
.card .ef b svg { width: min(3.4vw, 4.2vh); height: min(3.4vw, 4.2vh); }
.card .ef span { font-size: min(1.4vw, 1.8vh); font-weight: 800; letter-spacing: .1em; color: #e8ebf3; margin-right: .3vh; }
.card .ef .c { font-style: normal; font-size: min(1.15vw, 1.5vh); font-weight: 800; letter-spacing: .06em; padding: .1vh .6vh; border-radius: .4vh; border: 1.5px solid currentColor; white-space: nowrap; }
.card .ef .deb { color: #c89bff; } .card .ef .def { color: #7cc0ff; } .card .ef .fin { color: #ffd23f; }
.card .ef .ok { color: #38d67f; } .card .ef .risco { color: #ff6b6b; } .card .ef .tema { color: var(--cc); background: color-mix(in srgb, var(--cc) 18%, transparent); }
.card .pw { display: flex; gap: .4vh; }
.card .pw i { width: 1vh; height: 1vh; transform: rotate(45deg); background: var(--tc); }
.card .nm { position: relative; margin-top: .5vh; font-size: min(2.25vw, 3.1vh); font-weight: 800; line-height: .98; text-transform: uppercase; letter-spacing: .01em; }
.card .qt { position: relative; margin-top: .6vh; font-size: min(1.55vw, 2.15vh); font-weight: 600; line-height: 1.1; color: #b9c0d0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .chk { position: absolute; right: .6vh; bottom: .7vh; font-size: min(1.25vw, 1.6vh); font-weight: 800; letter-spacing: .08em; padding: .1vh .6vh; border: 2px solid #ff4b4b; color: #ff4b4b; transform: rotate(-8deg); border-radius: .3vh; background: rgba(20, 0, 0, .5); }
.card .chk.ok { border-color: #38d67f; color: #38d67f; background: rgba(0, 20, 8, .5); }
.card:hover { transform: translateY(-1.4vh); box-shadow: 0 1.8vh 3vh rgba(0, 0, 0, .7); }
.card:active { transform: translateY(-.6vh) scale(.98); }
.card.match { box-shadow: 0 0 0 .3vh var(--tmc), 0 0 2.6vh var(--tmc); }
.card.match .tm { opacity: 1; animation: tmPulse .8s ease-in-out infinite alternate; }
@keyframes tmPulse { to { transform: scale(1.25); } }
.card.used { transform: translateY(-50vh) scale(1.2) rotate(-4deg) !important; opacity: 0; transition: transform .35s cubic-bezier(.5, 0, .7, .4), opacity .35s; }
.card.fin { --tc: var(--fin); background: linear-gradient(170deg, #3a2a05, #140d02); border: .3vh solid var(--fin); animation: finGlow 1s ease-in-out infinite alternate; }
.card.fin .nm { color: var(--fin); }
@keyframes finGlow { from { box-shadow: 0 0 1vh rgba(255, 210, 63, .4); } to { box-shadow: 0 0 4vh rgba(255, 210, 63, .9); } }
.card.wait { filter: grayscale(.8) brightness(.6); pointer-events: none; }

/* barra de tempo da lacração */
#timing { position: absolute; left: 50%; bottom: calc(var(--handH) + 3vh); width: min(56vw, 720px); transform: translateX(-50%) scale(.6); opacity: 0; z-index: 8; pointer-events: none; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), opacity .15s; }
#timing.on { opacity: 1; transform: translateX(-50%) scale(1); }
#timing .tbar { position: relative; height: min(6vh, 52px); border-radius: 999px; background: #3a0d12; border: .4vh solid #0b0d14; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 1vh 3vh rgba(0, 0, 0, .6); overflow: hidden; }
#timing .zg { position: absolute; top: 0; bottom: 0; left: 30%; width: 40%; background: linear-gradient(180deg, #ffb22e, #c77d00); }
#timing .zp { position: absolute; top: 0; bottom: 0; left: 43%; width: 14%; background: linear-gradient(180deg, #7dffb2, #19b45c); box-shadow: 0 0 2vh #38d67f; }
#timing .needle { position: absolute; top: -10%; bottom: -10%; width: 1vh; margin-left: -.5vh; background: #fff; box-shadow: 0 0 1.2vh #fff, 0 0 0 .3vh #0b0d14; border-radius: .5vh; left: 0; }

/* anel de defesa */
#guard { position: absolute; width: 18vh; height: 18vh; margin: -9vh 0 0 -9vh; z-index: 8; pointer-events: none; opacity: 0; }
#guard.on { opacity: 1; }
#guard .ring, #guard .core { position: absolute; inset: 0; border-radius: 50%; }
#guard .core { inset: 30%; border: .6vh solid rgba(67, 166, 255, .9); box-shadow: 0 0 2vh #43a6ff, inset 0 0 1.6vh #43a6ff; }
#guard .ring { border: .5vh solid #fff; box-shadow: 0 0 1.4vh #fff; }
#guard.ok .core { border-color: #7dffb2; box-shadow: 0 0 4vh #38d67f, inset 0 0 2vh #38d67f; }

/* camadas de efeito */
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 10; mix-blend-mode: screen; }
#pops { position: absolute; inset: 0; pointer-events: none; z-index: 11; }
.pop { position: absolute; font-weight: 800; font-style: italic; white-space: nowrap; transform: translate(-50%, -50%); -webkit-text-stroke: .35vh #0b0d14; paint-order: stroke fill; text-shadow: 0 .5vh 0 rgba(0, 0, 0, .6); }
#banner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 12; pointer-events: none; opacity: 0; }
#banner .bn { display: inline-block; font-size: min(10vw, 15vh); font-weight: 800; font-style: italic; line-height: .9; padding: 1vh 5vw; color: #fff; -webkit-text-stroke: .45vh #0b0d14; paint-order: stroke fill; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .75) 15%, rgba(0, 0, 0, .75) 85%, transparent); text-shadow: .8vh .8vh 0 rgba(0, 0, 0, .5); }
#banner .bs { margin-top: 1vh; font-size: min(3vw, 4vh); font-weight: 800; letter-spacing: .3em; color: #ffd23f; text-shadow: 0 .3vh 0 #000; }
#cutin { position: absolute; inset: 0; z-index: 12; pointer-events: none; opacity: 0; }
#cutin .ci-bg { position: absolute; left: -10%; right: -10%; top: 28%; height: 44%; transform: skewY(-7deg); background: repeating-linear-gradient(90deg, var(--cic) 0 2vw, color-mix(in srgb, var(--cic) 70%, #000) 2vw 4vw); box-shadow: 0 0 0 1vh #0b0d14, 0 0 0 1.6vh #fff; }
#cutin .ci-face { position: absolute; top: 18%; height: 64%; aspect-ratio: 400 / 330; overflow: hidden; }
#cutin .ci-face svg { width: 100%; height: 164%; }
#cutin .ci-t { position: absolute; top: 42%; font-size: min(9vw, 13vh); font-weight: 800; font-style: italic; color: #fff; -webkit-text-stroke: .5vh #0b0d14; paint-order: stroke fill; transform: skewX(-10deg); white-space: nowrap; }
#stamp { position: absolute; z-index: 12; pointer-events: none; opacity: 0; text-align: center; transform: translate(-50%, -50%); }
#stamp .sb { display: inline-block; padding: .4vh 2.4vh; font-size: min(8vw, 11vh); font-weight: 800; letter-spacing: .06em; color: #e01b24; border: 1.2vh double #e01b24; border-radius: 1.4vh; background: rgba(255, 240, 235, .1); mix-blend-mode: normal; text-shadow: none; filter: url(#rough); }
#stamp.ok .sb { color: #1ea65a; border-color: #1ea65a; }
#stamp .sa { margin-top: .8vh; font-size: min(2vw, 2.6vh); font-weight: 800; letter-spacing: .2em; color: #fff; text-shadow: 0 .3vh 0 #000; }
#pointer { position: absolute; width: 9vh; height: 9vh; z-index: 13; pointer-events: none; opacity: 0; transition: opacity .2s; margin: -1vh 0 0 -2.2vh; }
#pointer.on { opacity: 1; }
#pointer svg { width: 100%; height: 100%; filter: drop-shadow(0 .6vh .6vh rgba(0, 0, 0, .6)); }
#pointer.tap svg { animation: tap .7s ease-in-out infinite; }
@keyframes tap { 0%, 100% { transform: translate(0, 0) } 40% { transform: translate(-.8vh, -1.6vh) } 55% { transform: translate(0, 0) scale(.88) } }
#ov { position: absolute; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; background: rgba(3, 5, 10, .72); backdrop-filter: blur(4px); }
#ov.on { display: flex; }
.panel { width: min(92vw, 560px); max-height: 86vh; display: flex; flex-direction: column; gap: 1.4vh; padding: 2.4vh; border-radius: 1.6vh; background: #0e1220; border: 1px solid var(--line); box-shadow: 0 2vh 6vh rgba(0, 0, 0, .7); }
.panel h2 { margin: 0; font-size: min(5vw, 4.4vh); font-style: italic; }
.panel .list { overflow: auto; display: flex; flex-direction: column; gap: 1vh; font-size: min(3.6vw, 2.2vh); font-weight: 600; color: #c9cfdc; padding-right: .6vh; }
.panel .list a { color: #8fc2ff; word-break: break-all; }
.panel .row { display: flex; gap: 1vh; justify-content: center; flex-wrap: wrap; }
.btn { min-height: min(7vh, 56px); padding: 0 3vh; border-radius: 999px; font-size: min(4vw, 3.2vh); font-weight: 800; letter-spacing: .08em; background: var(--glass); border: 1px solid rgba(255, 255, 255, .25); display: inline-flex; align-items: center; justify-content: center; gap: 1vh; }
.btn.pri { background: linear-gradient(180deg, #fff, #d9dde8); color: #0b0d14; box-shadow: 0 .6vh 0 #7d869a; }
.btn:active { transform: translateY(.3vh); }
.btn svg { width: 3vh; height: 3vh; }

/* apuração: capa de jornal */
#result { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 2.4vh; background: rgba(3, 5, 10, .55); padding: calc(var(--st) + 2vh) 3vw calc(var(--sb) + 2vh); }
#result.on { display: flex; }
#paper { width: min(64vw, 98vh); max-height: 76vh; padding: 2.2vh 3vh 2.4vh; background: #f2ecdf; color: #141210; font-family: Georgia, 'Times New Roman', serif; box-shadow: 0 2vh 6vh rgba(0, 0, 0, .7); transform: rotate(-1.6deg) scale(.2); opacity: 0; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 2.4vh; overflow: hidden; }
#paper.in { transform: rotate(-1.6deg); opacity: 1; transition: transform .7s cubic-bezier(.2, 1.4, .4, 1), opacity .2s; }
#paper .mast { grid-column: 1 / -1; text-align: center; font-size: min(5vw, 6vh); font-weight: 700; letter-spacing: .04em; border-bottom: .5vh double #141210; line-height: 1.1; }
#paper .date { grid-column: 1 / -1; text-align: center; font-size: min(1.6vw, 1.9vh); font-style: italic; padding: .4vh 0 1vh; border-bottom: 1px solid #141210; margin-bottom: 1.4vh; }
#paper h1 { grid-column: 1; margin: 0; font-size: min(4.4vw, 5.6vh); line-height: 1.02; font-weight: 900; letter-spacing: -.01em; }
#paper #deck { grid-column: 1; margin-top: 1.2vh; font-size: min(1.9vw, 2.4vh); line-height: 1.25; font-style: italic; }
#paper #pfig { grid-column: 2; grid-row: 3 / 5; align-self: stretch; background: #d9d1bf; border: 1px solid #141210; position: relative; overflow: hidden; min-height: 26vh; filter: grayscale(1) contrast(1.15); }
#paper #pfig .pf { position: absolute; bottom: -8%; aspect-ratio: 400 / 540; transform-origin: 50% 100%; }
#paper #pfig .pf svg { width: 100%; height: 100%; overflow: visible; }
#paper #pfig .gota { position: absolute; width: 7%; aspect-ratio: 1 / 1.4; background: #fff; border: 2px solid #141210; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; }
#paper #pfig .pprop { position: absolute; z-index: 4; font-family: var(--font); font-weight: 800; }
#paper #pfig .placar { right: 5%; top: 6%; font-size: min(4vw, 6vh); padding: 0 1.4vh; border: .6vh double #141210; transform: rotate(-10deg); background: rgba(242,236,223,.85); }
#paper #pfig .relogio { right: 6%; top: 6%; font-size: min(3.4vw, 5vh); padding: .2vh 1.2vh; background: #141210; color: #f2ecdf; border-radius: .6vh; }
#paper #pfig .ingresso { left: 6%; bottom: 8%; display: flex; flex-direction: column; align-items: center; padding: .6vh 1.6vh; background: #f2ecdf; border: 2px dashed #141210; transform: rotate(8deg); line-height: 1; }
#paper #pfig .ingresso b { font-size: min(2.6vw, 3.6vh); letter-spacing: .1em; } #paper #pfig .ingresso span { font-size: min(1.3vw, 1.8vh); letter-spacing: .2em; }
#paper #pleg { grid-column: 2; font-size: min(1.4vw, 1.7vh); font-style: italic; margin-top: .5vh; }
#paper #stats { grid-column: 1; margin-top: 1.6vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vh; font-family: var(--font); }
#paper #stats div { border-top: .4vh solid #141210; padding-top: .5vh; }
#paper #stats b { display: block; font-size: min(3.6vw, 4.6vh); font-weight: 800; line-height: 1; }
#paper #stats span { font-size: min(1.5vw, 1.9vh); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
#rbtn { display: flex; gap: 1.4vh; flex-wrap: wrap; justify-content: center; opacity: 0; transition: opacity .4s .5s; }
#result.on #rbtn { opacity: 1; }

/* ================= RETRATO (celular em pé) ================= */
@media (max-aspect-ratio: 1/1) {
  :root { --hudH: 13vh; --handH: 39vh; --sw: 50vw; }
  body.t-title { --handH: 22vh; }
  #logo { top: calc(var(--st) + 2vh); }
  #hud { grid-template-columns: 1fr auto 1fr; gap: 2.4vw; padding-top: calc(var(--st) + 1vh); }
  #hud .nm b { font-size: 5.6vw; }
  #hud .nm i { font-size: 3.4vw; }
  #hud .hp { height: 2.4vh; }
  #hud .mt { height: 1vh; width: 80%; }
  #hud .st span { font-size: 2.8vw; }
  #clock { font-size: 7.4vw; min-width: 14vw; }
  #tema .tn { font-size: 3vw; }
  #tema .ti { width: 4vw; height: 4vw; }
  #live { font-size: 2.6vw; }
  .slot { width: 50vw; height: calc(100vh - var(--hudH) - var(--handH) + 3vh); bottom: calc(var(--handH) - 1vh); }
  #slot0 { left: -1vw; } #slot1 { right: -1vw; }
  .pk { width: 50vw; }
  #pkFlavio { left: -1vw; } #pkLula { right: -1vw; }
  .pk .pkn { font-size: 8vw; }
  .pk .pkp { font-size: 4vw; }
  #mediator { width: 22vw; bottom: calc(var(--handH) + 12vh); }
  #crowd { height: 8vh; bottom: calc(var(--handH) - 3vh); }
  #hand { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.2vh 2.4vw; padding: 1.4vh 3vw calc(var(--sb) + 1.6vh); }
  .card { padding: 1vh 1.2vh; }
  .card .ty { width: 6vw; height: 6vw; }
  .card .tm { width: 5vw; height: 5vw; }
  .card .nm { font-size: 4.6vw; }
  .card .qt { font-size: 3.1vw; -webkit-line-clamp: 2; }
  .card .tn { font-size: 2.8vw; }
  .card .ef b { font-size: 7vw; } .card .ef b svg { width: 6.4vw; height: 6.4vw; }
  .card .ef span { font-size: 2.8vw; } .card .ef .c { font-size: 2.4vw; }
  .card .chk { font-size: 2.6vw; }
  .card .pw i { width: 1.6vw; height: 1.6vw; }
  #bubble { max-width: 94vw; min-width: 60vw; left: 3vw !important; right: auto; }
  #bubble .bt { font-size: 5.2vw; }
  #bubble.big .bt { font-size: 6.2vw; }
  #gc { max-width: 94vw; left: 3vw; }
  #gc .gcn { font-size: 3.2vw; } #gc .gct { font-size: 4.4vw; }
  #timing { width: 88vw; }
  #logo .l1 { font-size: 14vw; } #logo .l2 { font-size: 22vw; } #logo .l3 { font-size: 3.4vw; letter-spacing: .18em; white-space: nowrap; }
  #vs { font-size: 14vw; top: 56%; }
  #pickt { font-size: 5vw; top: calc(var(--st) + 27vh); }
  .pk .pkc { font-size: 4.6vw; }
  .tb { font-size: 4vw; }
  #disc { font-size: 3vw; }
  #paper { width: 94vw; grid-template-columns: 1fr; max-height: 70vh; }
  #paper #pfig { grid-column: 1; grid-row: auto; min-height: 18vh; }
  #paper #pleg { grid-column: 1; font-size: 2.8vw; }
  #paper .mast { font-size: 7.4vw; } #paper .date { font-size: 3vw; }
  #paper h1 { font-size: 7.6vw; } #paper #deck { font-size: 3.6vw; }
  #paper #stats b { font-size: 6.4vw; } #paper #stats span { font-size: 2.6vw; }
  #banner .bn { font-size: 15vw; } #banner .bs { font-size: 4.6vw; }
  #cutin .ci-t { font-size: 12vw; }
  #stamp .sb { font-size: 13vw; }
  #stamp .sa { font-size: 3.4vw; }
  .btn { font-size: 4.4vw; }
}
/* celular deitado (altura curta): HUD e mão mais enxutos */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  :root { --hudH: 17vh; --handH: 30vh; }
  .card .qt { -webkit-line-clamp: 2; }
}

/* ================= RODADA 3 (20/10) ================= */
/* seletor de blocos */
.seg { display: inline-flex; height: min(7vh, 54px); border-radius: 999px; background: var(--glass); border: 1px solid var(--line); padding: .5vh; gap: .5vh; }
.seg button { padding: 0 2.2vh; border-radius: 999px; font-size: min(2.4vw, 2.8vh); font-weight: 800; letter-spacing: .1em; color: #9aa3b8; display: inline-flex; align-items: center; gap: .8vh; white-space: nowrap; }
.seg button.on { background: #f4f1ea; color: #0b0d14; }
.seg button.lock { opacity: .55; }
.seg button svg { width: 2.4vh; height: 2.4vh; }

/* barra de acerto: faixas 10 / 20 / 35% */
#timing .zg { left: 18%; width: 64%; }
#timing .zp { left: 37%; width: 26%; }
#timing .lb { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: min(2.6vw, 3.2vh); font-weight: 800; color: #fff; text-shadow: 0 .2vh 0 rgba(0,0,0,.7); pointer-events: none; z-index: 1; }
#timing .l1 { left: 9%; } #timing .l2 { left: 27.5%; } #timing .l3 { left: 50%; color: #063d1d; text-shadow: none; } #timing .l4 { left: 72.5%; } #timing .l5 { left: 91%; }
#timing .needle { z-index: 2; }

/* cartas: faixas de dano */
.card .ef .z { font-style: normal; font-size: min(1.5vw, 1.9vh); font-weight: 800; padding: .15vh .7vh; border-radius: .4vh; color: #0b0d14; }
.card .ef .z.r { background: #ff8a8a; } .card .ef .z.b { background: #ffc95c; } .card .ef .z.p { background: #6dffa8; }
.card .tm { display: none; }

/* ================= TELA FINAL ================= */
#result { justify-content: center; gap: 1.6vh; }
#rtop { order: -1; text-align: center; transform: rotate(-2deg); }
#rtop b { display: inline-block; font-size: min(5.4vw, 7vh); font-weight: 800; font-style: italic; line-height: 1; padding: .4vh 3vh; background: var(--rc); color: #fff; -webkit-text-stroke: .2vh #0b0d14; paint-order: stroke fill; box-shadow: .8vh .8vh 0 rgba(0,0,0,.6); }
#rtop.lost b { background: #2a3044; }
#rtop span { display: block; margin-top: .6vh; font-size: min(2.2vw, 2.8vh); font-weight: 800; letter-spacing: .3em; color: #cfd5e2; }
#paper { max-height: 62vh; }
#paper #pchal { grid-column: 1 / -1; margin-top: 1.2vh; padding-top: .8vh; border-top: 1px solid #141210; font-family: var(--font); font-size: min(1.8vw, 2.3vh); font-weight: 600; letter-spacing: .04em; text-align: center; }
#paper #pchal b { font-weight: 800; }
#share { display: flex; gap: 1vh; flex-wrap: wrap; justify-content: center; align-items: center; opacity: 0; transition: opacity .4s .4s; }
#result.on #share { opacity: 1; }
.sh { width: min(7.4vh, 56px); height: min(7.4vh, 56px); border-radius: 50%; background: var(--glass); border: 1px solid rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; }
.sh svg { width: 48%; height: 48%; }
.sh.big { width: auto; padding: 0 3.4vh; border-radius: 999px; gap: 1.2vh; font-size: min(3.2vw, 3.6vh); font-weight: 800; letter-spacing: .1em; background: linear-gradient(180deg, #ffe066, #f5b800); color: #15120a; border: 0; box-shadow: 0 .6vh 0 #8a6a00; animation: shPulse 1.4s ease-in-out infinite; }
.sh.big svg { width: 3.2vh; height: 3.2vh; }
@keyframes shPulse { 50% { transform: scale(1.05); } }
/* (cores dos ícones das redes agora vêm da rodada 10) */
.sh:active { transform: translateY(.3vh); }

@media (max-aspect-ratio: 1/1) {
  .seg button { font-size: 3.8vw; padding: 0 3.4vw; }
  #timing .lb { font-size: 3.6vw; }
  .card .ef .z { font-size: 3vw; }
  #result { gap: 1.2vh; padding-top: calc(var(--st) + 1.4vh); }
  #rtop b { font-size: 8.6vw; } #rtop span { font-size: 3.2vw; }
  #paper { max-height: 60vh; padding: 1.6vh 2.4vh 1.8vh; }
  #paper #pfig { min-height: 20vh; }
  #paper #pchal { font-size: 3.2vw; }
  .sh { width: 11vw; height: 11vw; max-width: 52px; max-height: 52px; }
  .sh.big { width: 100%; max-width: none; height: 6.4vh; max-height: none; font-size: 5vw; order: -1; }
  #share { padding: 0 3vw; }
}

/* fala como legenda na faixa de baixo */
#bubble.up { max-width: none; min-width: 0; transform-origin: var(--ox, 50%) 0%; padding: 1.4vh 2.6vh 1.6vh; }
#bubble.up::after { bottom: auto; top: -3.3vh; transform: skewX(var(--tsk, 20deg)) rotate(180deg); }
#bubble.up .bt { font-size: min(3vw, 4.2vh); line-height: 1.12; }
#bubble.up.big .bt { font-size: min(3.6vw, 5vh); }
#gc { z-index: 8; }

@media (max-aspect-ratio: 1/1) {
  #bubble.up .bt { font-size: min(5.6vw, 3.6vh); }
  #bubble.up.big .bt { font-size: min(6.4vw, 4.2vh); }
  /* tablet e celular grande: fonte das cartas limitada pela altura */
  .card .nm { font-size: min(4.6vw, 3vh); }
  .card .qt { font-size: min(3.1vw, 2vh); }
  .card .tn { font-size: min(2.8vw, 1.8vh); }
  .card .ty { width: min(6vw, 3.6vh); height: min(6vw, 3.6vh); }
  .card .ef .z { font-size: min(3vw, 1.9vh); }
  #hud .nm b { font-size: min(5.6vw, 3.8vh); }
  #clock { font-size: min(7.4vw, 5vh); }
  .pk .pkn { font-size: min(8vw, 5.4vh); }
  .pk .pkc { font-size: min(4.6vw, 3vh); }
  #pickt { font-size: min(5vw, 3.4vh); }
  #logo .l1 { font-size: min(14vw, 9vh); } #logo .l2 { font-size: min(22vw, 14vh); } #logo .l3 { font-size: min(3.4vw, 2.2vh); }
  #vs { font-size: min(14vw, 9vh); }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  #bubble.up .bt { font-size: min(3vw, 5.4vh); }
}
#hand.hide { opacity: 0; pointer-events: none; transition: opacity .18s; }
#hand { transition: opacity .2s; }
#gc { bottom: calc(var(--handH) + 5.5vh); }
@media (max-aspect-ratio: 1/1) { #gc { bottom: calc(var(--handH) + 4.5vh); } }

/* rodada 4: carimbo da palavra do golpe na foto, botão de rebater, carta forte */
#paper #pfig .palavra { right: 4%; top: 7%; max-width: 70%; font-size: min(3vw, 4.4vh); line-height: 1; padding: .4vh 1.2vh; border: .6vh double #b3121a; color: #b3121a; transform: rotate(-9deg); background: rgba(242,236,223,.85); text-align: center; }
#rebate { position: absolute; left: 50%; top: calc(100vh - var(--handH) / 2); width: min(22vh, 34vw); height: min(22vh, 34vw); transform: translate(-50%, -50%); z-index: 9; display: none; }
#rebate.on { display: block; }
#rebate .rb-btn { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #7cc0ff, #1f6fd6 70%); border: .7vh solid #0b0d14; box-shadow: 0 0 0 .4vh #fff, 0 0 4vh #43a6ff; display: flex; align-items: center; justify-content: center; }
#rebate .rb-btn b { font-size: min(3.6vh, 5.4vw); font-weight: 800; letter-spacing: .06em; color: #fff; -webkit-text-stroke: .15vh #0b0d14; paint-order: stroke fill; }
#rebate .rb-ring { position: absolute; inset: -2%; border-radius: 50%; border: .8vh solid #fff; box-shadow: 0 0 2vh #fff; pointer-events: none; }
#rebate.ok .rb-btn { background: radial-gradient(circle at 40% 35%, #b5ffd2, #19b45c 70%); transform: scale(1.12); transition: transform .12s; }
#rebate.miss .rb-btn { filter: grayscale(1) brightness(.7); }
.card.forte { box-shadow: 0 0 0 .3vh #ff5a3c, 0 0 2.4vh rgba(255,90,60,.6); }
.card .ef b { font-size: min(3vw, 4vh); }

/* barra e cartas só com as cores (sem número) */
.card .ef .z { width: min(3.4vw, 4.4vh); height: min(1.3vw, 1.8vh); padding: 0; border-radius: .5vh; }
#timing .lb { display: none; }
@media (max-aspect-ratio: 1/1) { .card .ef .z { width: 7vw; height: 2.6vw; } }

/* ================= RODADA 5: barra de impacto da conclusão ================= */
#hud .mt { display: none; }
#mash { position: absolute; left: 50%; top: calc(100vh - var(--handH) * .55); transform: translate(-50%, -50%); z-index: 9; display: none; align-items: center; gap: 3vh; }
#mash.on { display: flex; }
#mash .ms-bar { position: relative; width: min(7vh, 11vw); height: min(30vh, 46vw); border-radius: 1.4vh; background: rgba(0,0,0,.6); border: .5vh solid #0b0d14; box-shadow: 0 0 0 .3vh #fff; overflow: hidden; }
#mash .ms-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: 50% 100%; background: linear-gradient(0deg, color-mix(in srgb, var(--mc) 60%, #000), var(--mc)); box-shadow: 0 0 3vh var(--mc); }
#mash .ms-pct { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); font-size: min(3.6vh, 5vw); font-weight: 800; color: #fff; -webkit-text-stroke: .15vh #0b0d14; paint-order: stroke fill; white-space: nowrap; }
#mash .ms-btn { width: min(22vh, 34vw); height: min(22vh, 34vw); border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--mc) 55%, #fff), var(--mc) 70%); border: .7vh solid #0b0d14; box-shadow: 0 0 0 .4vh #fff, 0 0 4vh var(--mc); display: flex; align-items: center; justify-content: center; animation: msPulse .5s ease-in-out infinite alternate; }
#mash .ms-btn b { font-size: min(3.6vh, 5.2vw); font-weight: 800; color: #fff; -webkit-text-stroke: .18vh #0b0d14; paint-order: stroke fill; text-align: center; line-height: 1; }
#mash.atk .ms-btn b { color: #0b0d14; -webkit-text-stroke: 0; }
#mash.cheio .ms-bar { box-shadow: 0 0 0 .3vh #ffd23f, 0 0 4vh #ffd23f; }
@keyframes msPulse { to { box-shadow: 0 0 0 .6vh #fff, 0 0 6vh var(--mc); } }
#tema .tn { letter-spacing: .14em; }

/* placar do Brasil no menu */
#placar { position: absolute; left: 50%; bottom: calc(var(--sb) + 3vh + min(7vh, 54px) + 1.6vh); transform: translateX(-50%); z-index: 3; display: none; flex-direction: column; align-items: center; gap: .5vh; padding: .8vh 2vh 1vh; border-radius: 1.2vh; background: rgba(6,8,15,.82); border: 1px solid var(--line); min-width: min(46vw, 460px); }
#placar.on { display: flex; }
#placar .pl-t { font-size: min(1.6vw, 1.7vh); font-weight: 800; letter-spacing: .22em; color: #9aa3b8; }
#placar .pl-row { display: flex; align-items: center; gap: 1.2vh; width: 100%; }
#placar .pl-l, #placar .pl-f { display: flex; align-items: baseline; gap: .8vh; font-weight: 800; white-space: nowrap; }
#placar i { font-style: normal; font-size: min(1.8vw, 2vh); letter-spacing: .1em; }
#placar b { font-size: min(3.4vw, 3.8vh); font-style: italic; }
#placar .pl-l b { color: #ff6a6f; } #placar .pl-f b { color: var(--c1); }
#placar .pl-bar { flex: 1; height: 1vh; border-radius: 1vh; background: var(--c1); overflow: hidden; min-width: 8vh; }
#placar .pl-bar span { display: block; height: 100%; width: var(--pl, 50%); background: var(--c0); transition: width .8s; }
@media (max-aspect-ratio: 1/1) { #placar { min-width: 86vw; } #placar .pl-t { font-size: 2.6vw; } #placar i { font-size: 3vw; } #placar b { font-size: 5.6vw; } }

/* rodada 8: plateia fica atrás dos púlpitos e mais baixa; barra de impacto no meio da tela */
.slot { z-index: 1; }
#crowd { z-index: 0; bottom: calc(var(--handH) - 10vh); height: 11vh; opacity: .8; }
#mash { top: 48%; }
@media (max-aspect-ratio: 1/1) { #crowd { bottom: calc(var(--handH) - 6vh); height: 7vh; } #mash { top: 46%; } }

/* ================= RODADA 9: placar do Brasil em destaque ================= */
#vs { top: 52%; font-size: min(7vw, 10vh); }
#placar { bottom: auto; top: 62%; min-width: 0; width: min(34vw, 470px); padding: 1.2vh 2vh 1.3vh; gap: .8vh; border-radius: 1.6vh; background: linear-gradient(180deg, rgba(14,18,32,.96), rgba(6,8,15,.96)); border: .3vh solid rgba(255,255,255,.18); box-shadow: 0 1.4vh 4vh rgba(0,0,0,.6), 0 0 0 .2vh rgba(255,255,255,.05) inset; animation: plIn .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes plIn { from { transform: translateX(-50%) scale(.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
#placar .pl-t { display: flex; align-items: center; gap: 1vh; width: 100%; font-size: min(1.8vw, 2.2vh); letter-spacing: .3em; color: #fff; }
#placar .pl-t i { flex: 1; height: .25vh; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); }
#placar .pl-t i:last-child { transform: scaleX(-1); }
#placar .pl-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.4vh; width: 100%; }
#placar .pl-f, #placar .pl-l { display: flex; flex-direction: column; align-items: center; line-height: 1; }
#placar .pl-f b, #placar .pl-l b { display: block; font-size: min(5.4vw, 7.4vh); font-weight: 800; font-style: italic; -webkit-text-stroke: .2vh #0b0d14; paint-order: stroke fill; }
#placar .pl-f b { color: var(--c1); } #placar .pl-l b { color: #ff4a52; }
#placar .pl-f span, #placar .pl-l span { margin-top: .4vh; font-size: min(1.2vw, 1.5vh); font-weight: 800; letter-spacing: .14em; color: #9aa3b8; text-align: center; }
#placar .pl-x { font-size: min(2.6vw, 3.4vh); font-weight: 800; font-style: italic; color: #5d6680; }
#placar .pl-bar { width: 100%; height: 1.4vh; border-radius: 1vh; background: #e3262f; overflow: hidden; box-shadow: 0 0 0 .2vh #0b0d14; }
#placar .pl-bar span { display: block; height: 100%; width: var(--pf, 50%); background: linear-gradient(180deg, #ffe466, #f5c518); transition: width 1s cubic-bezier(.3,1.2,.5,1); }
#placar .pl-s { font-size: min(1.2vw, 1.5vh); font-weight: 800; letter-spacing: .2em; color: #ffd23f; animation: plPisca 1.6s ease-in-out infinite; }
@keyframes plPisca { 50% { opacity: .45; } }
#placar.vf .pl-f b, #placar.vl .pl-l b { text-shadow: 0 0 2.4vh currentColor; }
#rtop .rpl { display: block; margin-top: .8vh; font-style: normal; font-size: min(1.9vw, 2.4vh); font-weight: 800; letter-spacing: .14em; color: #cfd5e2; }
#rtop .rpl b { font-weight: 800; } #rtop .rpl .f { color: var(--c1); } #rtop .rpl .l { color: #ff6a6f; }
#rtop .rpl:empty { display: none; }
@media (max-aspect-ratio: 1/1) {
  #placar { top: auto; bottom: calc(var(--sb) + 3vh + min(7vh, 54px) + 1.8vh); width: 92vw; }
  #placar .pl-t { font-size: 3.4vw; } #placar .pl-f b, #placar .pl-l b { font-size: 11vw; } #placar .pl-f span, #placar .pl-l span { font-size: 2.6vw; }
  #placar .pl-x { font-size: 6vw; } #placar .pl-s { font-size: 2.6vw; }
  #rtop .rpl { font-size: 3.2vw; }
}
#vs { display: none; }
#placar .pl-bar { flex: none; min-width: 0; }
@media (max-aspect-ratio: 1/1) { body.t-title { --handH: 31vh; } #placar { padding: .9vh 2vh 1vh; gap: .5vh; } #placar .pl-f b, #placar .pl-l b { font-size: min(10vw, 5.6vh); } }

/* ================= RODADA 10: botões das redes ================= */
.sh.rede { border: 0; color: #fff; box-shadow: 0 .5vh 0 rgba(0,0,0,.45); }
#shWa { background: #25d366; } #shFb { background: #1877f2; } #shX { background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 .5vh 0 rgba(0,0,0,.45); }
#shIg { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 65%, #285aeb 100%); }
.sh.rede, .sh.rede svg { color: #fff !important; stroke: #fff; opacity: 1; }
@media (max-aspect-ratio: 1/1) {
  #paper { max-height: none; }
  #paper #pfig { min-height: 15vh; }
}

/* ================= RODADA 11: Lula na esquerda, Flávio na direita ================= */
#pkLula { left: max(1vw, calc(50vw - 47vh - 26vw)); right: auto; }
#pkFlavio { right: max(1vw, calc(50vw - 47vh - 26vw)); left: auto; }
#pkFlavio .pkf { animation-delay: 0s; } #pkLula .pkf { animation-delay: -.65s; }
#placar .pl-bar { background: linear-gradient(180deg, #ffe466, #f5c518); }
#placar .pl-bar span { background: linear-gradient(180deg, #ff6a6f, #e3262f); }
@media (max-aspect-ratio: 1/1) {
  #pkLula { left: -1vw; right: auto; } #pkFlavio { right: -1vw; left: auto; }
}
#rtop .rpl b, #rtop.lost .rpl b { display: inline; font-size: inherit; font-style: normal; padding: 0; background: none; -webkit-text-stroke: 0; box-shadow: none; }