/* ============================================================
   INÍCIO — herói (kakejiku sobre a Praça viva)
   ============================================================ */
.heroi { position: relative; min-height: clamp(640px, calc(100vh - var(--topo-real, 90px)), 820px); background: #141018; overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.heroi #cena { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; }
.heroi::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 75% 85% at 62% 50%, transparent 52%, rgba(12, 9, 20, .62) 100%), linear-gradient(90deg, rgba(12, 9, 20, .45), transparent 40%); }
.heroi-in { position: relative; z-index: 2; width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 78px var(--gut) 56px; pointer-events: none; }
.heroi-in > * { pointer-events: auto; }
.cena-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--papel); color: var(--tinta); border: 2px solid var(--tinta); padding: 7px 11px; font: 700 12px/1.25 var(--sans); box-shadow: 3px 3px 0 var(--tinta); display: grid; gap: 2px; }
.cena-tip[hidden] { display: none; }
.cena-tip span { font-weight: 500; color: var(--tinta-3); }
.cena-cap { position: absolute; z-index: 3; right: var(--gut); bottom: 18px; margin: 0; padding: 8px 12px; background: rgba(21, 18, 27, .82); color: var(--luz-2); font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cena-cap b { color: #ff9a6a; }

/* o pergaminho de parede */
.kake { position: relative; width: min(392px, 100%); transform-origin: 50% -60px; filter: drop-shadow(9px 11px 0 rgba(10, 6, 14, .5)); animation: balanca 9s ease-in-out infinite alternate; will-change: transform; }
@keyframes balanca { from { transform: rotate(-.55deg); } to { transform: rotate(.55deg); } }
.kake-fio { position: absolute; left: 50%; top: -76px; width: 200px; height: 76px; transform: translateX(-50%); color: #0c0a0f; overflow: visible; }
.kake-haste { position: relative; height: 14px; margin: 0 -14px; background: var(--tinta); z-index: 2; }
.kake-haste::before, .kake-haste::after { content: ""; position: absolute; top: -4px; width: 14px; height: 22px; background: var(--selo-3); }
.kake-haste::before { left: -12px; } .kake-haste::after { right: -12px; }
.kake-haste.baixa { height: 18px; } .kake-haste.baixa::before, .kake-haste.baixa::after { top: -5px; height: 28px; width: 16px; }
.kake-tela { position: relative; background: #2b2233; padding: 18px 16px; margin: 0; }
.kake-tela::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; border-inline: 1px solid var(--ouro); opacity: .8; }
.kake-papel { position: relative; background: var(--papel) var(--grao); padding: 28px 22px 26px; text-align: center; color: var(--tinta); display: grid; justify-items: center; gap: 4px; }
.kake-papel::before { content: ""; position: absolute; inset: 6px; border: 2px solid var(--tinta); pointer-events: none; opacity: .9; }
.kake-etq { display: block; color: var(--tinta-3); margin-bottom: 8px; }
.kake .emb { width: 70px; height: 78px; color: var(--selo); margin: 2px 0 8px; }
.kake h1 { display: grid; gap: 8px; justify-items: center; line-height: 0; }
.kake h1 .pixsvg { max-width: 100%; height: auto; }
.kake h1 .l1 { color: var(--tinta); } .kake h1 .l2 { color: var(--selo); }
.kake-lema { font-size: 19px; font-style: italic; line-height: 1.4; margin: 18px 0 20px; color: var(--tinta-2); max-width: 24ch; }
.kake .btn-fila { width: 100%; }
.kake .btn { width: 100%; }
.kake-sub { font: 600 13px/1.4 var(--sans); color: var(--tinta-3); margin: 18px 0 0; }
.kake-sub b { color: var(--tinta); }
.kake-sub i { display: inline-block; width: 9px; height: 9px; background: #4aa860; margin-right: 6px; }
.kake-sub.off i { background: #9a8f78; }
@media (max-width: 900px) {
  .heroi { display: flex; flex-direction: column; align-items: stretch; min-height: 0; background: var(--noite); }
  .heroi-in { order: 1; padding: 72px var(--gut) 0; }
  .heroi #cena { position: relative; inset: auto; order: 2; height: clamp(320px, 62vw, 460px); margin-top: -46px; }
  .heroi::after { background: linear-gradient(180deg, transparent 60%, rgba(12, 9, 20, .55)); }
  .kake { margin-inline: auto; }
  .cena-cap { left: var(--gut); right: auto; bottom: 10px; }
}@media (max-width: 560px) {
  .kake-etq { display: none; }
  .kake .emb { width: 46px; height: 52px; margin: 0 0 6px; }
  .kake-papel { padding: 22px 16px 18px; }
  .kake-lema { margin: 14px 0 16px; font-size: 17px; }
  .kake-tela { padding: 14px 12px; }
  .heroi-in { padding-top: 66px; }
}
@media (prefers-reduced-motion: reduce) { .kake { animation: none; } }

/* ============================================================
   INÍCIO — placar, ticker
   ============================================================ */
.placar-sec { position: relative; padding-top: clamp(60px, 7vw, 92px); padding-bottom: 0; }
.rasgo-topo { position: absolute; left: 0; right: 0; top: -21px; height: 22px; pointer-events: none; z-index: 3; }
.rasgo-topo .rasgo { position: absolute; inset: 0; width: 100%; height: 22px; color: var(--papel); }
.placar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 3px solid var(--tinta); background: var(--papel-2); }
.placa { padding: 24px 24px 22px; border-left: 3px solid var(--tinta); display: grid; gap: 12px; align-content: start; min-width: 0; }
.placa:first-child { border-left: 0; }
.placa-rot { font: 800 11.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--selo-2); }
.placa-num { color: var(--tinta); min-height: 56px; display: flex; align-items: center; }
.placa-num .pixsvg { max-width: 100%; height: auto; }
.placa.fogo .placa-num { color: var(--selo); }
.placa-sub { font: 600 13.5px/1.4 var(--sans); color: var(--tinta-3); }
@media (max-width: 900px) { .placar { grid-template-columns: 1fr 1fr; } .placa:nth-child(3) { border-left: 0; } .placa:nth-child(n+3) { border-top: 3px solid var(--tinta); } .placa { padding: 18px 16px; } }
.ticker { display: flex; align-items: stretch; margin-top: 26px; background: var(--tinta); color: var(--luz); box-shadow: 5px 5px 0 rgba(27, 23, 18, .35); }
.ticker-rot { flex: none; padding: 12px 16px; background: var(--selo); font: 800 11px/1.25 var(--sans); letter-spacing: .16em; text-transform: uppercase; display: grid; place-items: center; text-align: center; }
.ticker-janela { overflow: hidden; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
.ticker-fila { display: flex; gap: 46px; list-style: none; margin: 0; padding: 15px 0 15px 24px; width: max-content; animation: tk 90s linear infinite; font: 600 14px var(--sans); }
.ticker-fila li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.ticker-fila em { font-style: normal; color: #a69cb2; }
.ticker:hover .ticker-fila, .ticker:focus-within .ticker-fila { animation-play-state: paused; }
.ticker-fila.parado { animation: none; width: auto; }
.ticker-janela:has(.parado) { overflow-x: auto; }
.tk-vazio { color: var(--luz-2); }
@keyframes tk { to { transform: translateX(-50%); } }

/* ============================================================
   INÍCIO — clãs (noren)
   ============================================================ */
.norens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 48px); margin-top: 60px; align-items: start; }
.noren { position: relative; padding-top: 6px; filter: drop-shadow(7px 9px 0 rgba(27, 23, 18, .88)); color: var(--tinta); transform-origin: 50% 0; animation: noren-sway 6s ease-in-out infinite alternate; }
.noren:nth-child(2) { animation-delay: -2s; animation-duration: 7s; } .noren:nth-child(3) { animation-delay: -4s; animation-duration: 5.5s; }
@keyframes noren-sway { from { transform: rotate(-.5deg); } to { transform: rotate(.5deg); } }
.noren.cla-mage { color: var(--luz); }
.noren-haste { position: absolute; left: -12px; right: -12px; top: 0; height: 18px; background: var(--tinta); z-index: 3; }
.noren-haste::before, .noren-haste::after { content: ""; position: absolute; top: -3px; width: 12px; height: 24px; background: var(--selo-3); }
.noren-haste::before { left: -8px; } .noren-haste::after { right: -8px; }
.noren-corpo { position: relative; z-index: 1; margin-top: 12px; background: var(--cla); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px)); padding: 36px 26px 84px; overflow: hidden; display: grid; gap: 10px; justify-items: center; text-align: center; }
.noren-corpo::before { content: ""; position: absolute; inset: 0; background: var(--grao); opacity: .5; mix-blend-mode: multiply; pointer-events: none; }
.noren-emb { position: absolute; right: -22px; top: 14px; color: var(--cla2); opacity: .3; pointer-events: none; }
.noren-emb svg { width: 150px; height: 150px; }
.noren-sol { position: absolute; left: 50%; top: 66px; width: 210px; height: 210px; margin-left: -105px; border-radius: 50%; background: var(--fundo); opacity: .75; }
.noren-sprite { position: relative; height: 262px; display: grid; place-items: end center; margin-top: 6px; }
.noren-sprite canvas { display: block; }
.noren h3 { font-size: clamp(34px, 3.6vw, 46px); }
.noren-tag { font: 800 11.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; margin: 0; }
.noren-desc { font-size: 16px; line-height: 1.5; margin: 0; max-width: 32ch; }
.noren-jutsus { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.noren-jutsus li { width: 42px; height: 42px; display: grid; place-items: center; background: rgba(27, 23, 18, .38); border: 2px solid rgba(27, 23, 18, .7); }
.noren-jutsus canvas { width: 32px; height: 32px; }
.noren .link-seta { color: inherit; border-color: currentColor; margin-top: 6px; }
.noren .link-seta:hover { color: inherit; opacity: .8; }
@media (max-width: 900px) { .norens { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ============================================================
   RADAR
   ============================================================ */
.radar { position: relative; }
.radar-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.radar-abas .tab em { font-style: normal; opacity: .75; margin-left: 4px; }
.radar-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.radar-mapa { position: relative; width: 100%; max-width: 680px; border: 6px solid var(--papel); box-shadow: 8px 8px 0 #000; background: #0e0b13; touch-action: manipulation; }
.radar-base { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; filter: saturate(.9) contrast(1.03); }
.radar-marcas, .radar-pontos { position: absolute; inset: 0; pointer-events: none; }
.radar-marcas > *, .radar-pontos > * { pointer-events: auto; }
.ponto { --c: #888; position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; background: none; cursor: pointer; transition: left 4.8s linear, top 4.8s linear; z-index: 3; }
.ponto.cla-warrior { --c: #f08a24; } .ponto.cla-mage { --c: #4a5db8; } .ponto.cla-elf { --c: #f08ab0; }
.ponto i { position: absolute; left: 7px; top: 7px; width: 14px; height: 14px; background: var(--c); border: 2px solid #14100c; box-shadow: 0 0 0 1.5px #fff; }
.ponto i.circulo { border-radius: 50%; } .ponto i.losango { transform: rotate(45deg); left: 8px; top: 8px; width: 12px; height: 12px; }
.ponto::after { content: ""; position: absolute; inset: 3px; border: 2px solid var(--c); border-radius: 50%; opacity: 0; animation: pulso 2.8s ease-out infinite; pointer-events: none; }
@keyframes pulso { 0% { transform: scale(.35); opacity: .95; } 100% { transform: scale(1.35); opacity: 0; } }
.ponto.destaque { z-index: 5; } .ponto.destaque i { outline: 3px solid var(--ouro); outline-offset: 2px; }
.rmarca { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; display: grid; place-items: center; }
.rmarca-portal i { display: block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid #7fe8ff; background: rgba(127, 232, 255, .25); box-shadow: 0 0 0 2px #14100c, inset 0 0 0 2px #14100c; animation: portal-gira 3s linear infinite; border-top-color: #fff; }
@keyframes portal-gira { to { transform: rotate(360deg); } }
.rmarca-chefe { background: #14100c; border: 2px solid var(--aura, #ff4040); border-radius: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; color: #f4e9cc; box-shadow: 0 0 0 2px #000; }
.rmarca-chefe svg { width: 14px; height: 14px; }
.radar-marcas.sem-chefes .rmarca-chefe { display: none; }
.radar-estado { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; gap: 6px; text-align: center; padding: 20px; background: rgba(14, 11, 19, .74); color: var(--luz); pointer-events: none; }
.radar-estado b { font: 900 clamp(22px, 3vw, 30px) var(--serif); } .radar-estado span { font: 500 14px/1.4 var(--sans); color: var(--luz-2); }
.radar-estado.suave { inset: auto 10px 10px 10px; padding: 10px 14px; text-align: left; place-content: start; background: rgba(14, 11, 19, .86); }
.radar-estado.suave b { font-size: 16px; }
.radar-rodape { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: 18px; max-width: 680px; }
.radar-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; font: 600 12.5px var(--sans); color: var(--luz-2); }
.radar-legenda li { display: flex; align-items: center; gap: 8px; }
.lg { display: block; width: 12px; height: 12px; background: var(--c); border: 2px solid #14100c; box-shadow: 0 0 0 1px #cdbfa0; } .lg.circulo { border-radius: 50%; } .lg.losango { transform: rotate(45deg); width: 10px; height: 10px; }
.lg.portal { border-radius: 50%; background: rgba(127, 232, 255, .3); border: 3px solid #7fe8ff; box-shadow: none; } .lg.chefe { background: var(--selo); border-radius: 50%; border-color: #14100c; }
.mini-tab { min-height: 36px; padding: 9px 13px; font-size: 11px; }
.radar-tip { position: absolute; z-index: 20; pointer-events: none; background: var(--papel); color: var(--tinta); border: 2px solid var(--tinta); padding: 7px 11px; font: 700 12.5px/1.3 var(--sans); box-shadow: 3px 3px 0 #000; display: grid; gap: 2px; white-space: nowrap; }
.radar-tip span { font-weight: 500; color: var(--tinta-3); }
.radar-lupa { position: absolute; z-index: 6; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; overflow: hidden; border: 5px solid var(--papel); box-shadow: 0 0 0 3px var(--tinta), 6px 6px 0 rgba(0, 0, 0, .55); pointer-events: none; background: #000; }
.radar-lupa[hidden] { display: none; }
.radar-lupa canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.radar-lupa span { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 800 9px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.radar-tit { font-size: clamp(24px, 3vw, 34px); }
.radar-sub { font: 500 14.5px/1.5 var(--sans); margin: 8px 0 0; }
.radar-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.radar-item { --c: #888; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 4px 14px 4px 6px; background: var(--noite-2); border-left: 5px solid var(--c); transition: background .12s; }
.radar-item.cla-warrior { --c: #f08a24; } .radar-item.cla-mage { --c: #5a6fd0; } .radar-item.cla-elf { --c: #f08ab0; }
.radar-item.destaque { background: var(--noite-3); }
.radar-item .ret { display: block; width: 56px; height: 56px; overflow: hidden; position: relative; }
.radar-item .ret canvas { position: absolute; left: -4px; top: -2px; }
.radar-item b { display: block; font: 800 15px var(--sans); color: #fff; } .radar-item span { font: 500 12.5px var(--sans); color: var(--luz-2); }
.radar-mais { margin: 12px 0 0; font: 600 13px var(--sans); }
@media (max-width: 900px) { .radar-cols { grid-template-columns: 1fr; } .radar-lupa { display: none; } }

/* ============================================================
   VONTADE DO FOGO
   ============================================================ */
.fogo-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.fogo-chama { display: grid; justify-items: center; gap: 14px; }
.fogo-chama canvas { max-width: 100%; height: auto !important; aspect-ratio: 112 / 124; width: 336px !important; }
.fogo-placa { color: #ffb060; }
.fogo-medidor { height: 28px; background: #0d0b12; border: 3px solid var(--luz-2); margin: 30px 0 12px; padding: 3px; }
.fogo-medidor i { display: block; height: 100%; width: 0; background: var(--selo); transition: width .9s steps(24); box-shadow: inset -6px 0 0 #ffb060; }
.fogo-txt-linha { font: 500 15.5px/1.5 var(--sans); color: var(--luz); margin: 0; }
.fogo-txt-linha b { color: #ffb060; }
.fogo-passos { list-style: none; counter-reset: p; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.fogo-passos li { counter-increment: p; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; font-size: 16.5px; line-height: 1.5; color: var(--luz-2); }
.fogo-passos li::before { content: counter(p); display: grid; place-items: center; width: 34px; height: 34px; background: var(--selo); color: var(--luz); font: 900 16px var(--sans); clip-path: var(--px-clip); --c: 4px; }
.fogo-passos b { color: #fff; }
.fogo-ultimo { display: flex; gap: 10px; align-items: center; margin: 24px 0 0; font: 600 13.5px var(--sans); color: var(--luz-2); min-height: 22px; }
.fogo-ultimo em { font-style: normal; color: #9d94aa; }
@media (max-width: 900px) { .fogo-grid { grid-template-columns: 1fr; } .fogo-chama canvas { width: 280px !important; } }

/* ============================================================
   ROTA
   ============================================================ */
.rota-host { margin-top: 54px; }
.rota { position: relative; }
.rota-fio { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.fio-sombra { fill: none; stroke: rgba(27, 23, 18, .12); stroke-width: 16; stroke-linecap: round; }
.fio-tinta { fill: none; stroke: var(--tinta); stroke-width: 4; stroke-dasharray: 1 13; stroke-linecap: round; }
.rota-nos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: start; }
.rota-no.baixo { margin-top: 70px; }
.rota-cartao { display: grid; justify-items: center; text-align: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.rota-cartao:hover { color: var(--tinta); }
.rota-cartao:hover .rota-med { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--tinta); }
.rota-med { position: relative; z-index: 1; width: 118px; height: 118px; border-radius: 50%; background: var(--tema); border: 4px solid var(--tinta); box-shadow: 5px 5px 0 var(--tinta); display: grid; place-items: end center; overflow: hidden; transition: transform .1s steps(2), box-shadow .1s steps(2); }
.rota-med canvas { max-width: 92%; max-height: 96%; margin-bottom: 4px; }
.rota-nv { color: var(--selo-2); }
.rota-cartao h3 { font-size: 21px; }
.rota-cartao p { font-size: 14.5px; line-height: 1.5; margin: 0; }
.rota-chefes b { color: var(--selo-2); } .rota-fauna { font: 500 12.5px/1.45 var(--sans) !important; }
@media (max-width: 900px) {
  .rota-nos { grid-template-columns: 1fr; gap: 34px; }
  .rota-no.baixo { margin-top: 0; }
  .rota-cartao { grid-template-columns: 118px 1fr; justify-items: start; text-align: left; column-gap: 20px; align-items: start; }
  .rota-cartao > .rota-med { grid-row: 1 / span 6; } .rota-cartao > :not(.rota-med) { grid-column: 2; }
}

/* ============================================================
   LIVRO BINGO
   ============================================================ */
.bingo-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.2vw, 46px); margin-top: 54px; align-items: end; }
.bingo-ficha { position: relative; background: #ead9ad var(--grao); border: 3px solid var(--tinta); padding: 16px 18px 18px; box-shadow: 7px 7px 0 var(--tinta); display: grid; gap: 11px; align-content: start; transform: rotate(var(--rot, 0deg)); transform-origin: 50% 100%; }
.bingo-3 > :nth-child(1) { --rot: -1.6deg; } .bingo-3 > :nth-child(2) { --rot: .7deg; } .bingo-3 > :nth-child(3) { --rot: -.8deg; }
.bingo-3 > .primeira { transform: rotate(var(--rot, 0deg)) scale(1.055) translateY(-12px); z-index: 2; }
.bingo-ficha.primeira { padding-bottom: 22px; border-color: var(--tinta); box-shadow: 9px 9px 0 var(--selo-3); }
.bf-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--selo-2); }
.bf-tit { color: var(--tinta); }
.bf-selo { position: absolute; right: -12px; top: 62px; z-index: 3; transform: rotate(11deg); border: 3px solid var(--selo); color: var(--selo); padding: 4px 9px; font: 900 13px var(--sans); letter-spacing: .14em; background: rgba(236, 223, 189, .6); mix-blend-mode: multiply; }
.bf-foto { position: relative; border: 3px solid var(--tinta); background: #000; line-height: 0; overflow: hidden; }
.bf-foto::before, .bf-foto::after { content: ""; position: absolute; top: -4px; width: 46px; height: 14px; background: rgba(214, 196, 150, .85); z-index: 2; transform: rotate(-8deg); }
.bf-foto::before { left: -10px; } .bf-foto::after { right: -10px; transform: rotate(8deg); }
.bf-foto canvas { width: 100%; height: auto; image-rendering: pixelated; }
.bf-sil { display: grid; place-items: center; min-height: 200px; background: var(--papel-3); color: var(--tinta-3); font: 900 96px var(--serif); line-height: 1; }
.bf-nome { font: 900 clamp(22px, 2.4vw, 30px)/1.05 var(--serif); word-break: break-word; }
.bf-sub { font: 800 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin: -4px 0 0; }
.bf-dados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.bf-dados div { border-top: 3px solid var(--tinta); padding-top: 6px; }
.bf-dados dt { font: 800 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.bf-dados dd { margin: 0; font: 900 clamp(17px, 1.7vw, 21px) var(--sans); font-variant-numeric: tabular-nums; }
.bf-dados .on dd { color: var(--selo-2); } .bf-dados .on { border-top-color: var(--selo); }
.bf-duelos { font: 600 13px var(--sans); margin: 0; color: var(--tinta-2); }
.bf-preco { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 4px double var(--tinta); padding-top: 10px; margin: 0; }
.bf-preco span { font: 800 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.bf-preco b { font: 900 clamp(16px, 1.6vw, 19px) var(--sans); color: var(--selo-2); font-variant-numeric: tabular-nums; }
.bingo-ficha.vazia { opacity: .8; border-style: dashed; }
@media (max-width: 860px) { .bingo-3 { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; } .bingo-3 > .primeira { order: -1; } .bingo-ficha, .bingo-3 > .primeira { transform: none; } }

/* ============================================================
   DIÁRIO (resumo) e CHAMADA FINAL
   ============================================================ */
.dr-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.dr-lista { list-style: none; margin: 0; padding: 0; border-left: 4px solid var(--tinta); }
.dr-lista li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px 0 16px 22px; border-bottom: 2px dashed var(--papel-4); position: relative; align-items: start; }
.dr-lista li::before { content: ""; position: absolute; left: -10px; top: 24px; width: 16px; height: 16px; background: var(--selo); border: 3px solid var(--papel-2); }
.dr-lista li > svg { margin-top: 4px; }
.dr-hora { font: 800 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.dr-lista p { margin: 3px 0 0; font-size: 17px; line-height: 1.45; }
.dr-vazio { padding: 22px 0 22px 22px !important; display: block !important; color: var(--tinta-3); font: 500 15px var(--sans); }
@media (max-width: 900px) { .dr-grid { grid-template-columns: 1fr; } }
.final { overflow: hidden; }
.final::after { content: ""; position: absolute; right: -4vw; bottom: -6vw; width: min(52vw, 560px); aspect-ratio: 100 / 112; background: url("/site/img/folha-marca.svg") center / contain no-repeat; opacity: .16; pointer-events: none; }
.final-in { position: relative; z-index: 1; }
.final-tit { font-size: clamp(64px, 13vw, 168px); line-height: .88; color: var(--luz); margin: 8px 0 26px; }
.final .lede { max-width: 38ch; }