/* Milka Mineradores - protótipo. Folha própria: não importa nada da landing nem do /tools.
   Mesma paleta da landing, copiada por valor, mas com os cantos arredondados (pedido do dono:
   "menos quadrado"); o pixel fica nas imagens e na mina. Molduras de 2px, sombra dura embaixo,
   bitmap só nos títulos. As cores das raridades são do pacote de arte. */
:root {
  --bg: #15111f; --bg-2: #1b1529; --surface: #201a30; --card: #29203d; --card-2: #322747; --ink: #0c0912;
  --border: #4c3b73; --border-lit: #6f57ab;
  --text: #f7eedd; --muted: #c2b0e2; --muted-2: #9382ba;
  --gold: #f5c95a; --gold-lit: #ffe9a8; --gold-dim: #b8801f;
  --purple: #cbb8f2; --purple-dim: #8f76cc; --good: #a9e6a4; --bad: #f2a9a0;
  --r0: #a3a9b0; --r1: #4fbf55; --r2: #3f8cff; --r3: #a866f2; --r4: #f7a516;
  --vidro: rgba(18, 13, 31, .86);
  --rd: 12px; --rd-sm: 8px; --rd-xs: 4px;
  --display: "Press Start 2P", ui-monospace, "Courier New", monospace;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.5; }
h1 { font-size: 15px; } h2 { font-size: 11px; color: var(--gold-lit); margin-bottom: 12px; }
h3 { font-size: 12px; margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .05em; color: var(--purple); }
a { color: var(--purple); }
p { margin: 0 0 8px; }
.muted { color: var(--muted); } .fino { color: var(--muted-2); font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.bom { color: var(--good); } .mau { color: var(--bad); } .ouro { color: var(--gold); }
.linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.entre { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.g2 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .g2 { grid-template-columns: 1fr; } }
.aviso { border: 2px dashed var(--gold-dim); background: var(--surface); padding: 8px 10px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.aviso b { color: var(--gold-lit); }
.card { background: var(--card); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--ink); padding: 14px; margin-bottom: 14px; min-width: 0; }

/* ---------------------------------------------------------------- botões e campos */
.btn, button.btn { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--body); background: var(--card-2); color: var(--text); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); padding: 6px 10px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--border); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn.pri { background: var(--gold); color: var(--ink); text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 3px 0 var(--gold-dim), 0 3px 0 2px var(--ink); }
.btn.pri:hover { background: var(--gold-lit); }
.btn.roxo { background: var(--purple); color: var(--ink); }
.btn.perigo { background: transparent; color: var(--bad); border-color: var(--bad); box-shadow: none; }
.btn.sm { padding: 3px 7px; font-size: 12px; box-shadow: 0 2px 0 var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .custo { font-weight: 400; opacity: .85; }
input[type="number"], input[type="text"], input[type="search"], select, textarea { font: 14px var(--body); background: var(--bg-2); color: var(--text); border: 2px solid var(--border); padding: 5px 7px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-lit); }
input[type="number"] { width: 110px; }
input[type="checkbox"] { accent-color: var(--gold); }
label.campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- tabelas */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--purple); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--border); padding: 5px 6px; }
td { border-bottom: 1px solid var(--border); padding: 5px 6px; vertical-align: top; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr:hover td { background: var(--surface); }
.rolar { overflow-x: auto; }

/* ---------------------------------------------------------------- raridade e miúdos */
.pill { display: inline-block; font: 700 10px var(--body); text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; color: var(--ink); border: 1px solid var(--ink); vertical-align: middle; }
.t0 { --rc: var(--r0); } .t1 { --rc: var(--r1); } .t2 { --rc: var(--r2); } .t3 { --rc: var(--r3); } .t4 { --rc: var(--r4); }
/* a aura de raridade: quanto da cor da raridade acende atrás do retrato */
.t1 { --aura: 40%; } .t2 { --aura: 55%; } .t3 { --aura: 68%; } .t4 { --aura: 85%; }
.pill[class*="t"] { background: var(--rc); }
.nm { font-weight: 700; color: var(--rc, var(--text)); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--surface); border: 2px solid var(--border); color: var(--muted); padding: 3px 8px; font: 700 12px var(--body); cursor: pointer; }
.chip.on { border-color: var(--gold); color: var(--gold-lit); }
.barra { height: 14px; background: var(--bg-2); border: 2px solid var(--ink); position: relative; overflow: hidden; }
.barra > i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.barra.cheia > i { background: var(--bad); }
.barrinha { height: 6px; background: var(--bg-2); border: 1px solid var(--ink); margin-top: 3px; }
.barrinha > i { display: block; height: 100%; background: var(--rc); }

/* ================================================================ a tela do jogo
   No computador: uma página com o topo, o menu de imagens à esquerda e o quadro do
   jogo, grande, ocupando o resto da altura da janela (a página não rola).
   No celular (até 760px): o quadro ocupa a tela inteira e o menu vira a barra de baixo. */
body.tela-jogo { overflow: hidden; height: 100vh; height: 100dvh; background: var(--bg); }
.jogo { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; max-width: 1380px; height: 100vh; height: 100dvh; margin: 0 auto; padding: 12px 16px 16px; }

.topo-jogo { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; background: var(--bg-2); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); padding: 8px 12px; min-width: 0; }
.topo-jogo .marca .nome { white-space: nowrap; }
.moedas { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.moeda { position: relative; display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink), inset 0 0 0 1px var(--border); padding: 3px 10px 3px 5px; font: 700 16px var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.moeda img { width: 32px; height: 32px; image-rendering: pixelated; }
.moeda small { font-size: 11px; color: var(--muted-2); font-weight: 700; }
.moeda .mais { background: var(--purple); color: var(--ink); border: 1px solid var(--ink); font: 700 13px var(--body); padding: 0 6px; cursor: pointer; margin-left: 2px; }
.moeda[data-dica]:hover::after { content: attr(data-dica); position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; background: var(--bg-2); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--border); padding: 4px 8px; font: 400 12px var(--body); color: var(--text); white-space: nowrap; pointer-events: none; }
.hud-dir { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.relogio-mini { display: flex; align-items: center; gap: 4px; background: #1d1220; border: 2px dashed var(--bad); padding: 2px 4px 2px 8px; }
.relogio-mini span { font: 9px var(--display); color: var(--gold-lit); margin-right: 4px; white-space: nowrap; }
.bt-mini { background: var(--card-2); color: var(--text); border: 1px solid var(--ink); font: 700 11px var(--body); padding: 2px 6px; cursor: pointer; white-space: nowrap; }
.bt-mini:hover { background: var(--border); }
/* o som, no canto de cima à direita: o alto-falante (em pixels de 16, desenhado em 2x; 1x no celular)
   e, colada nele, a setinha que abre o volume da música e o dos efeitos */
.som { position: relative; flex: none; display: flex; }
.som[hidden] { display: none; }
.bt-som, .bt-vol { display: grid; place-items: center; height: 44px; padding: 0; background: var(--surface); color: var(--gold-lit); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink), inset 0 0 0 1px var(--border); cursor: pointer; }
.bt-som { width: 44px; border-radius: var(--rd-sm) 0 0 var(--rd-sm); }
.bt-vol { width: 20px; margin-left: -2px; border-radius: 0 var(--rd-sm) var(--rd-sm) 0; color: var(--muted); }
.bt-vol svg { width: 8px; height: 8px; fill: currentColor; shape-rendering: crispEdges; }
.bt-som:hover, .bt-vol:hover, .bt-vol[aria-expanded="true"] { background: var(--card-2); }
.vol-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; display: flex; flex-direction: column; gap: 8px; width: 210px; padding: 10px 12px; background: var(--bg-2); border: 2px solid var(--ink); border-radius: var(--rd-sm); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--border); }
.vol-pop[hidden] { display: none; }
.vol-pop label { display: grid; grid-template-columns: 52px 1fr 34px; align-items: center; gap: 8px; font: 700 12px var(--body); color: var(--muted); }
.vol-pop input[type="range"] { width: 100%; margin: 0; accent-color: var(--gold); cursor: pointer; }
.vol-pop output { font: 700 11px var(--body); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.bt-som svg { width: 32px; height: 32px; fill: currentColor; shape-rendering: crispEdges; }
.bt-som .xis { display: none; }
.bt-som.mudo { color: var(--muted-2); }
.bt-som.mudo .ondas { display: none; }
.bt-som.mudo .xis { display: inline; }

/* o menu: cada item é uma imagem; o nome aparece ao lado ao passar o mouse */
.menu { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mi { position: relative; display: flex; align-items: center; justify-content: center; width: 92px; height: 70px; background: var(--card); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
/* as imagens do menu são de 32x32 e são desenhadas em escala inteira (2x aqui, 1x no celular), para o pixel não borrar */
.mi img { width: 64px; height: 64px; image-rendering: pixelated; transition: transform .12s; }
@media (hover: hover) { .mi:hover img { transform: translateY(-2px) scale(1.06); } .mi:hover { background: var(--card-2); box-shadow: 0 3px 0 var(--gold-dim), inset 0 0 0 2px var(--gold); } }
.mi:focus-visible img { transform: translateY(-2px) scale(1.06); }
.mi:focus-visible, .mi.on { background: var(--card-2); box-shadow: 0 3px 0 var(--gold-dim), inset 0 0 0 2px var(--gold); outline: none; }
.mi > span { display: none; }
.mi[data-nome]:hover::after, .mi[data-nome]:focus-visible::after { content: attr(data-nome); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 40; background: var(--bg-2); border: 2px solid var(--gold); box-shadow: 0 2px 0 var(--ink); padding: 5px 10px; font: 700 13px var(--body); color: var(--gold-lit); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; pointer-events: none; }
.mi-sm { height: 48px; }
/* janela baixa: os ícones em 1x, para os 9 caberem sem rolar a página */
/* com dez menus (a Profunda e o Museu entraram), a coluna cheia só cabe em janelas altas: abaixo
   de 1000px os tiles encolhem, e abaixo de 720px encolhem de novo, para a página nunca rolar */
@media (min-width: 761px) and (max-height: 1000px) { .mi { height: 54px; } .mi img { width: 32px; height: 32px; } .mi-sm { height: 42px; } .menu { gap: 6px; } }
@media (min-width: 761px) and (max-height: 720px) { .mi { height: 44px; } .mi-sm { height: 34px; } .menu { gap: 4px; } }
.mi-sm img { width: 32px; height: 32px; }
.mi.teste { border-style: dashed; border-color: var(--bad); }
/* o botão Menu, o fundo e o cabeçalho da gaveta só existem no celular (ver o bloco de 760 px) */
.bt-menu, .menu-fundo, .menu-cab { display: none; }
.menu-sep { flex: 1; }
/* o Museu no topo: as relíquias que você tem, de quantas existem */
.moeda.museu-pill { cursor: pointer; }
.moeda.museu-pill:hover, .moeda.museu-pill.on { border-color: var(--gold); }
/* o VIP no topo, sempre à vista; apagado quando não é VIP */
.moeda.vip-pill { position: relative; }
.moeda.vip-pill.off { color: var(--muted); border-color: var(--border); }
.moeda.vip-pill.off img { filter: grayscale(.7) brightness(.85); }
.moeda.vip-pill.on { border-color: var(--gold); }
.moeda.vip-pill .bolinha { top: -5px; right: -5px; width: 12px; height: 12px; }
.bolinha { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; background: var(--bad); border: 2px solid var(--ink); display: none; }
.bolinha.on { display: block; }

/* o quadro do jogo */
.quadro { position: relative; overflow: hidden; min-height: 0; background: #241d2e; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--border); }
.palco { position: absolute; inset: 0; overflow: hidden; }
.palco canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.ritmo { position: absolute; top: 10px; left: 10px; z-index: 10; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); }
.ritmo .r { display: inline-flex; align-items: center; gap: 6px; background: var(--vidro); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); padding: 3px 9px 3px 4px; font: 700 13px var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ritmo .r img { width: 32px; height: 32px; margin: -5px 0; image-rendering: pixelated; }
.ritmo .r.ativo { border-color: var(--gold); color: var(--gold-lit); }
.ritmo .r.passivo { color: var(--muted); }
.ritmo .r small { font-weight: 400; color: var(--muted-2); }
/* a barra do objetivo (🎯), sempre à vista no ritmo: abre as missões */
.ritmo .r.renda { cursor: pointer; color: var(--text); }
.ritmo .r.renda:hover { border-color: var(--gold-dim); }
.ritmo .r .info { font: 700 10px/14px var(--body); font-style: normal; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--muted-2); color: var(--muted); text-align: center; }
.ritmo .r.obj { cursor: pointer; color: var(--text); border-color: var(--gold-dim); padding-left: 8px; }
.ritmo .r.obj:hover { border-color: var(--gold); }
.ritmo .r.obj span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.obj-barra { display: block; width: 54px; height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.obj-barra u { display: block; height: 100%; background: var(--gold); }
.ritmo .r.obj em { font-style: normal; font-size: 11px; color: var(--muted); border-left: 1px solid var(--border); padding-left: 6px; }
.ritmo .r.obj em.ok { color: var(--good); }
.ritmo .r.obj img { width: 16px; height: 16px; margin: 0; }
/* o painel de missões: uma lista com o ✓, o texto, o progresso e o prêmio */
.missoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.missoes li { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); padding: 6px 10px; font-size: 13px; }
.missoes li.feito { opacity: .55; }
.ms-ok { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gold-dim); display: grid; place-items: center; font: 700 11px var(--body); color: var(--ink); }
.missoes li.feito .ms-ok { background: var(--good); border-color: var(--good); }
.ms-txt { flex: 1; min-width: 0; }
.ms-txt small { color: var(--muted-2); margin-left: 4px; }
.ms-pr { flex: none; font-size: 12px; color: var(--gold); }
.hud-baixo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px 12px; pointer-events: none; }
.hud-baixo > * { pointer-events: auto; }
.proximo { max-width: min(620px, 100%); display: flex; gap: 10px; align-items: center; background: var(--vidro); border: 2px solid var(--gold); box-shadow: 0 3px 0 var(--ink); padding: 7px 10px; font-size: 14px; }
.proximo:empty { display: none; }
.proximo .outra { background: none; border: 0; color: var(--muted-2); font: 700 15px var(--body); cursor: pointer; padding: 0 2px; }
.coleta { display: flex; align-items: center; gap: 12px; width: min(620px, 100%); background: var(--vidro); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); padding: 8px 10px; }
.coleta-info { flex: 1; min-width: 0; }
.coleta-info span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.coletar { font-size: 16px; padding: 10px 22px; }
.btn.coletar.pronto { animation: pulsa 1s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: translateY(-3px); } }

/* o painel abre por cima do quadro, com a mina rodando atrás */
/* inset + margin auto + height fit-content: a janela fica no centro do quadro e cresce até a borda */
.painel-fundo { position: absolute; inset: 0; z-index: 19; background: rgba(12, 9, 18, .5); }
.painel-fundo[hidden] { display: none; }
.painel { position: absolute; inset: 20px; margin: auto; z-index: 20; width: min(720px, calc(100% - 40px)); height: fit-content; max-height: calc(100% - 40px); display: flex; flex-direction: column; overflow: hidden; background: rgba(32, 26, 48, .98); border: 2px solid var(--ink); border-radius: var(--rd); box-shadow: 0 4px 0 var(--ink), 0 0 0 2px var(--border-lit), 0 18px 44px rgba(0, 0, 0, .5); animation: surge .16s ease-out; }
.painel.largo { inset: 12px; width: min(1240px, calc(100% - 24px)); max-height: calc(100% - 24px); }
.painel[hidden] { display: none; }
@keyframes surge { from { transform: translateY(8px) scale(.97); opacity: 0; } }
.painel-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 2px solid var(--border); }
.painel-cab h2 { margin: 0; }
.painel-cab .x, .modal-box .x { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; }
.painel-corpo { overflow-y: auto; padding: 14px 16px 18px; flex: 0 1 auto; min-height: 0; overscroll-behavior: contain; }
.painel-corpo > h3:first-child { margin-top: 0; }
.quadro.com-painel-largo .hud-baixo, .quadro.com-painel-largo .ritmo { visibility: hidden; }

@media (max-width: 1100px) { .topo-jogo .marca { display: none; } }
@media (max-width: 760px) {
  .jogo { display: block; padding: 0; max-width: none; }
  .quadro { position: fixed; inset: 0; border: 0; box-shadow: none; }
  .topo-jogo { position: fixed; top: 0; left: 0; right: 0; z-index: 15; gap: 6px; padding: 6px 8px; background: linear-gradient(rgba(18, 13, 31, .92), rgba(18, 13, 31, .55)); border: 0; box-shadow: none; flex-wrap: wrap; }
  .moedas { gap: 4px; }
  .moeda { font-size: 13px; padding: 1px 7px 1px 3px; gap: 4px; }
  .moeda img { width: 22px; height: 22px; }
  .moeda[data-dica]:hover::after { display: none; }
  /* o relógio de teste em duas linhas, para as moedas e o som caberem na mesma faixa */
  .relogio-mini { flex-wrap: wrap; justify-content: center; max-width: 104px; padding: 2px 3px; gap: 3px; }
  .relogio-mini span { font-size: 7px; width: 100%; text-align: center; margin: 0; }
  .bt-mini { font-size: 10px; padding: 1px 4px; }
  .bt-som, .bt-vol { height: 30px; }
  .bt-som { width: 30px; }
  .bt-vol { width: 18px; }
  .bt-som svg { width: 16px; height: 16px; }
  /* o menu é uma gaveta: fica fora da tela, à esquerda, e o botão Menu (embaixo, à esquerda) a traz por cima de
     tudo menos das janelas; cada item é uma linha larga, com a imagem e o nome, fácil de tocar */
  .menu { position: fixed; top: 0; bottom: 0; left: 0; z-index: 46; width: min(280px, 84vw); flex-direction: column; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)); background: #1a1428; border-right: 2px solid var(--ink); box-shadow: 3px 0 0 var(--ink), 10px 0 30px rgba(0, 0, 0, .55); overflow-y: auto; transform: translateX(calc(-100% - 16px)); visibility: hidden; transition: transform .18s ease-out, visibility 0s .18s; }
  body.menu-aberto .menu { transform: none; visibility: visible; transition: transform .18s ease-out; }
  .menu-cab { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 0 0 4px 4px; }
  .menu-cab b { font: 13px var(--display); color: var(--gold-lit); }
  .menu-cab .x { position: static; }
  .mi, .mi-sm { flex: none; width: 100%; height: 56px; justify-content: flex-start; gap: 14px; padding: 0 14px; }
  .mi img, .mi-sm img { width: 32px; height: 32px; }
  .mi > span { display: block; font: 700 15px var(--body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mi .bolinha { top: 50%; right: 14px; margin-top: -7px; }
  .mi[data-nome]:hover::after, .mi[data-nome]:focus-visible::after { display: none; }
  .menu-sep { display: block; flex: none; height: 2px; margin: 4px 2px; background: var(--border); }
  body.menu-aberto .menu-fundo { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(8, 6, 14, .62); }
  .bt-menu { display: flex; position: fixed; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 31; width: 58px; height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; background: var(--card); color: var(--gold-lit); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 1px var(--border); border-radius: var(--rd); cursor: pointer; }
  .bt-menu svg { width: 24px; height: 24px; fill: currentColor; shape-rendering: crispEdges; }
  .bt-menu span { font: 700 9px var(--body); text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
  .bt-menu .bolinha { top: -5px; right: -5px; }
  .ritmo { position: fixed; top: calc(var(--topo-h, 76px) + 4px); left: 8px; }
  .ritmo .r { font-size: 11px; padding: 2px 7px 2px 3px; }
  .ritmo .r img { width: 24px; height: 24px; margin: -4px 0; }
  .hud-baixo { bottom: env(safe-area-inset-bottom); padding: 0 8px 8px 74px; }
  .painel-fundo { position: fixed; z-index: 29; }
  .painel, .painel.largo { position: fixed; inset: calc(var(--topo-h, 76px) + 6px) 8px calc(70px + env(safe-area-inset-bottom)) 8px; margin: auto; width: auto; height: fit-content; max-height: calc(100vh - var(--topo-h, 76px) - 80px); max-height: calc(100dvh - var(--topo-h, 76px) - 80px - env(safe-area-inset-bottom)); z-index: 30; }
  .quadro.com-painel .hud-baixo, .quadro.com-painel .ritmo { visibility: hidden; }
  .painel { background: #201a30; }
  .btn.coletar { font-size: 14px; padding: 9px 14px; }
  .proximo { font-size: 13px; }
}
@media (max-width: 480px) {
  /* no celular estreito, o topo fica com o que muda a cada visita; ferramentas e equipe estão nos menus */
  .moeda.so-largo { display: none; }
  .moeda { padding: 1px 5px 1px 2px; gap: 3px; }
  .moeda.vip-pill b { display: none; } /* só a coroa: o VIP cabe na mesma faixa */
  .moeda .mais { padding: 0 5px; }
}

/* cantos: arredondados num lugar só, para afinar de uma vez */
.card, .quadro, .modal-box, .topo-jogo, .mi, .coleta, .proximo, .tile, .graf, .aviso, .relogio-teste, .cartao, .pz, .ficha .mini { border-radius: var(--rd); }
.btn, .moeda, .ritmo .r, .chip, .passos li, .toast, .relogio-mini, .dica, .barra, .progresso,
input[type="number"], input[type="text"], input[type="search"], select, textarea { border-radius: var(--rd-sm); }
.bt-mini, .moeda .mais, .pz button, .barrinha, .barrinha > i { border-radius: var(--rd-xs); }
.pill { border-radius: 999px; padding: 1px 8px; }
.bolinha { border-radius: 50%; }
.barra > i { border-radius: inherit; }
@media (max-width: 760px) { .quadro, .topo-jogo { border-radius: 0; } }

/* o baú do pacote de arte abrindo antes de mostrar quem saiu (6 quadros de 32, em 4x) */
/* o de madeira (prata, fragmentos e grátis) é menor, em 3x; o de ouro (premium) é maior, em 5x */
.bau-anim { width: 96px; height: 96px; margin: 2px auto 8px; background: url(/jogo/img/bau_abrindo.png) 0 0 / 576px 96px no-repeat; image-rendering: pixelated; cursor: pointer; }
.bau-anim.premium { width: 160px; height: 160px; background-image: url(/jogo/img/bau_premium.png); background-size: 960px 160px; }
/* fechado ele treme a cada clique e brilha mais perto de abrir; aberto, brilha na cor da melhor raridade */
.bau-anim { outline: none; filter: drop-shadow(0 0 calc(var(--brilho, 0) * 16px) rgba(255, 220, 120, calc(var(--brilho, 0) * .9))); user-select: none; }
.bau-anim:focus-visible { box-shadow: 0 0 0 2px var(--gold); border-radius: var(--rd-sm); }
.bau-anim.treme { animation: treme .18s linear; }
@keyframes treme { 25% { transform: translateX(-5px) rotate(-4deg); } 75% { transform: translateX(5px) rotate(4deg); } }
.bau-anim.aberto { animation: abre .6s ease-out 1; filter: drop-shadow(0 0 20px var(--cor, #ffe08a)); }
@keyframes abre { 40% { transform: scale(1.18); } }
.bau-dica { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 6px; min-height: 18px; }
.delta-taxa { text-align: center; margin: 8px 0 4px; font-size: 13px; }
.delta-aviso { margin: 4px 0 10px; font-size: 12.5px; text-align: center; }
.delta-aviso .btn { margin-top: 6px; }
/* a entrada: cobre tudo até haver uma sessão do Discord */
.login { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 50% 30%, #2b2140, var(--bg) 70%); }
.login[hidden] { display: none; }
.login.falha { z-index: 101; }
.falha-msg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.login-box { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 360px; }
.login-box img { width: 96px; height: 96px; image-rendering: pixelated; }
.login-box h1 { font-family: "Press Start 2P", monospace; font-size: 22px; line-height: 1.4; margin: 0; color: var(--text); }
.login-box h1 b { color: var(--gold); font-weight: 400; }
.login-bt { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 15px; }
.login-bt svg { width: 22px; height: 22px; }
/* online, o relógio de teste e o painel de teste são só do administrador */
body.online:not(.admin) .relogio-mini, body.online:not(.admin) .mi.teste, body.online .relogio-teste { display: none; }
.bau-pontos { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.bau-pontos[hidden], .revela[hidden] { display: none; }
.bau-pontos i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gold-dim); transition: background .1s; }
.bau-pontos i.on { background: var(--gold); border-color: var(--gold); }
/* as chances do baú e da bigorna: uma linha miúda; aberto, só a raridade que saiu fica acesa */
.odds { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; margin: 0 0 10px; font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.odds b { color: var(--rc); font-weight: 700; }
.odds > span { transition: opacity .3s; }
.odds.revelado > span { opacity: .3; }
.odds.revelado > span.saiu { opacity: 1; }
/* a bigorna da fusão: os 5 em arco por cima; cada batida leva um para dentro dela (palco de 300x190) */
.fz-anim { position: relative; width: 300px; height: 190px; margin: 0 auto 4px; cursor: pointer; outline: none; user-select: none; }
.fz-anim:focus-visible { box-shadow: 0 0 0 2px var(--gold); border-radius: var(--rd-sm); }
.fz-bigorna { position: absolute; left: 102px; top: 86px; width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 0 calc(var(--brilho, 0) * 16px) rgba(255, 220, 120, calc(var(--brilho, 0) * .9))); }
.fz-bigorna.treme { animation: bate .16s ease-out; }
@keyframes bate { 35% { transform: translateY(5px) scale(1.04, .9); } }
.fz-anim.aberto .fz-bigorna { filter: drop-shadow(0 0 20px var(--cor, #ffe08a)); animation: abre .6s ease-out; }
.fz-m { position: absolute; width: 45px; height: 60px; image-rendering: pixelated; border-radius: var(--rd-xs); background: #1d1825; box-shadow: inset 0 -3px 0 var(--rc); transition: transform .35s ease-in, opacity .35s ease-in; }
.fz-m.vai { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(25deg); opacity: 0; }
.fz-faisca { position: absolute; left: 148px; top: 116px; width: 4px; height: 4px; background: var(--gold-lit); box-shadow: 0 0 4px var(--gold); pointer-events: none; animation: faisca .45s ease-out forwards; }
@keyframes faisca { to { transform: translate(var(--sx), var(--sy)); opacity: 0; } }
.fz-novo { position: absolute; left: 120px; top: 18px; width: 60px; height: 80px; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 0 10px var(--cor, #ffe08a)); animation: nasce .5s ease-out; }
@keyframes nasce { from { transform: translateY(24px) scale(.3); opacity: 0; } 60% { transform: translateY(-6px) scale(1.08); opacity: 1; } }
.opcao { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin: 2px 0 10px; cursor: pointer; }

/* ---------------------------------------------------------------- conteúdo dos painéis */
.passos { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.passos li { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--surface); border: 2px solid var(--border); padding: 7px 9px; font-size: 13px; }
/* o Novo: um tipo de baú por linha, com os botões de 1, 10 e 100 e o preço do lote */
.mint-linhas { display: flex; flex-direction: column; gap: 8px; }
.mint-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); padding: 8px 10px; }
.mint-linha > img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.mint-nome { display: flex; flex-direction: column; flex: 1; min-width: 110px; line-height: 1.25; }
.mint-nome small { color: var(--muted-2); font-size: 11px; }
.mint-qs { display: flex; gap: 6px; }
.btn.mint-q { flex-direction: column; align-items: center; gap: 1px; min-width: 76px; padding: 4px 8px; }
.btn.mint-q b { font-size: 13px; }
.btn.mint-q span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.btn.mint-q img { width: 16px; height: 16px; image-rendering: pixelated; }
.btn.mint-q s { opacity: .6; margin-right: 2px; } /* rodada 75: o preço cheio riscado do 10x com desconto */
.odds-tab { display: grid; gap: 2px; }
/* a escolha do baú pelo desenho, e embaixo as chances e as formas de pagar do escolhido */
.bau-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bau-op { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 10px 8px 8px; min-height: 150px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); color: var(--text); font: inherit; cursor: pointer; }
.bau-op small { color: var(--muted-2); font-size: 11px; }
.bau-op:hover { border-color: var(--gold-dim); }
.bau-op.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(245, 201, 90, .25); }
.bau-op.premium.on { border-color: #b88cff; box-shadow: 0 0 0 1px #b88cff, 0 0 18px rgba(184, 140, 255, .35); }
.bau-fig { display: block; width: 64px; height: 64px; background: 0 0 / 600% 100% no-repeat; image-rendering: pixelated; margin-bottom: 4px; }
.bau-op.premium .bau-fig { width: 96px; height: 96px; filter: drop-shadow(0 0 8px rgba(255, 214, 90, .45)); }
.bau-op:not(.on) .bau-fig { opacity: .7; }
.bau-detalhe { background: var(--surface); border: 2px solid var(--gold-dim); border-radius: var(--rd-sm); padding: 8px 10px 10px; }
.bau-detalhe.premium { border-color: #8c63d6; }
.bau-detalhe h3 { margin-top: 0; }
/* a sorte do baú de madeira: a barra enche a cada baú sem Raro; a marca é onde a chance extra começa */
.sorte { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; margin: 0 0 10px; }
.sorte-tit { font-size: 13px; }
.sorte-barra { position: relative; height: 8px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; }
.sorte-barra u { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #5fbf6a, #a9e6a4); }
.sorte-barra em { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); }
.sorte .fino { grid-column: 1 / -1; margin: 0; }
.sorte-deu { text-align: center; color: #a9e6a4; font-weight: 700; margin: 6px 0; }
.bau-detalhe .odds { justify-content: flex-start; margin-bottom: 8px; }
.bau-detalhe .mint-linha { background: transparent; }
.odds-tab .odds { justify-content: flex-start; margin-bottom: 6px; }
/* a revelação de um lote grande: quantos de cada raridade, e só os cartões dos melhores */
.lote { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 4px 0 8px; }
.lote > span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.chances { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.chances > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pacotes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.btn.pac { flex-direction: column; gap: 2px; padding: 10px 6px; justify-content: center; }
.btn.pac img { width: 32px; height: 32px; image-rendering: pixelated; }
.btn.pac b { font-size: 16px; } .btn.pac span { font-weight: 400; font-size: 12px; }

/* cartões de minerador: retrato, nome, raridade e os quatro atributos em barras */
.cartoes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.mc { position: relative; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); padding: 8px 10px; color: var(--text); min-width: 0; }
/* do Raro para cima o cartão brilha por fora, e o Lendário pulsa (o selecionado fica com o dourado) */
.mc.t2 { box-shadow: 0 0 10px -3px var(--rc); }
.mc.t3 { box-shadow: 0 0 14px -3px var(--rc); border-color: color-mix(in srgb, var(--rc) 45%, var(--border)); }
.mc.t4 { border-color: color-mix(in srgb, var(--rc) 65%, var(--border)); animation: aura 2.4s ease-in-out infinite; }
@keyframes aura { 0%, 100% { box-shadow: 0 0 10px -3px var(--rc); } 50% { box-shadow: 0 0 20px 0 var(--rc); } }
.mc[data-act] { cursor: pointer; }
.mc[data-act]:hover, .mc[data-act]:focus-visible { border-color: var(--rc); outline: none; background: var(--card-2); }
.mc.sel { animation: none; border-color: var(--gold); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 2px rgba(245, 201, 90, .22); }
.mc-ok { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); font: 700 12px/18px var(--body); text-align: center; }
.mc-img { width: 45px; height: 60px; image-rendering: pixelated; flex: none; border-radius: var(--rd-xs); background: #1d1825; box-shadow: inset 0 -3px 0 var(--rc); }
.mc-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 120px; }
.mc-nome { font-weight: 700; font-size: 13px; line-height: 1.25; color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
.mc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 3px; }
.mc-stats > span { display: grid; grid-template-columns: 24px 1fr 18px; align-items: center; gap: 4px; font-size: 10px; line-height: 1.3; }
.mc-stats b { color: var(--muted-2); font-weight: 700; }
.mc-stats i, .atrs i { display: block; height: 5px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.mc-stats u, .atrs u { display: block; height: 100%; background: var(--rc); border-radius: 3px; }
.mc-stats em { font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
.mc > .btn { flex: none; margin-left: auto; }
.ico-f { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.ico-g { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -3px; margin-right: 3px; }
/* os ícones que eram emoji: pixel de 16 x 16 mostrados a 16 (ou 32, .x2) e a estrelinha de 8, sempre em múltiplo inteiro */
.ico16 { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -3px; flex: none; }
.ico16.x2 { width: 32px; height: 32px; vertical-align: -7px; }
.ico8 { width: 8px; height: 8px; image-rendering: pixelated; vertical-align: 0; margin-right: 1px; flex: none; }
.pt-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-right: 6px; vertical-align: 1px; }
.pt-on.off { background: none; box-shadow: inset 0 0 0 2px var(--muted-2); }
.ico-pausa { display: inline-block; width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.ico-play { display: inline-block; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
#bv-som-bt svg { width: 16px; height: 16px; fill: currentColor; shape-rendering: crispEdges; }
#bv-som-bt .xis, #bv-som-bt.mudo .ondas { display: none; }
#bv-som-bt.mudo .xis { display: inline; }
.mini-s { width: 30px; height: 40px; image-rendering: pixelated; flex: none; }

/* ferramentas */
.fcs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
/* o cartão tem sempre a mesma forma, qualquer que seja o texto: o ícone e as duas linhas (nome e bônus, sem quebrar,
   com reticências) em cima, e o que vem depois (os botões, o prazo) numa linha inteira embaixo */
.fc { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; position: relative; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); padding: 8px 10px; }
.fc > .fc-info ~ * { grid-column: 1 / -1; justify-self: start; }
.fc > .fc-acoes { justify-self: stretch; }
.fc-info { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.fc-info > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* equipar: "Equipar em…" ocupa a linha ao lado de "Vender" e abre uma janela larga com os heróis da mina nos cartões de sempre */
.fc-acoes > .btn.eq-abrir { flex: 1 1 auto; justify-content: center; }
.fc-acoes > .fino { flex: 1; min-width: 0; }
.modal.modal-equipar .modal-box { max-width: 720px; }
.eq-qual { grid-template-columns: minmax(0, 360px); margin: 4px 0 12px; }
.bancada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.btn.ferr { flex-direction: column; gap: 2px; padding: 8px 4px; justify-content: center; }
.btn.ferr small { font-weight: 400; font-size: 11px; color: var(--muted); }

/* fusão: os 5 escolhidos na mesa e o que pode sair */
.fz-mesa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--bg-2); border: 2px solid var(--border); border-radius: var(--rd); padding: 12px 14px; margin: 10px 0; }
.fz-slots { display: flex; gap: 6px; }
.fz-slot { width: 54px; height: 68px; border-radius: var(--rd-sm); border: 2px solid var(--rc, var(--border)); background: #1d1825; display: grid; place-items: center; padding: 0; cursor: pointer; }
.fz-slot img { width: 45px; height: 60px; image-rendering: pixelated; }
.fz-slot.vazio { border-style: dashed; color: var(--muted-2); font: 700 13px var(--body); cursor: default; }
.fz-seta { font-size: 22px; color: var(--gold); }
.fz-saida { display: flex; flex-direction: column; gap: 4px; }
.fz-ch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.fz-acoes { justify-content: space-between; }
.chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rc); margin-right: 6px; vertical-align: 0; }
.chip.on[class*=" t"] { border-color: var(--rc); color: var(--text); }
.abas { margin-bottom: 4px; }
.atrs { display: grid; gap: 6px; margin-top: 4px; }
.atrs > div { display: grid; grid-template-columns: 96px 1fr 56px; align-items: center; gap: 10px; font-size: 13px; }
.atrs b { text-align: right; font-variant-numeric: tabular-nums; }
.atrs i { height: 7px; }
.ficha-prod { margin: 2px 0; }
.qualidade { display: grid; grid-template-columns: 96px 1fr 56px; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; margin: 2px 0 10px; cursor: help; }
.qualidade i { display: block; height: 10px; background: var(--bg-2); border-radius: 5px; overflow: hidden; }
.qualidade u { display: block; height: 100%; background: linear-gradient(90deg, var(--rc), var(--gold)); border-radius: 5px; }
.qualidade b { text-align: right; font-variant-numeric: tabular-nums; }
.mc-sub .q { font-weight: 700; color: var(--text); }
.equipe-ferr { justify-content: space-between; margin: 8px 0 10px; }

/* pescaria */
.pesca-preco { margin-bottom: 8px; align-items: center; }
.pesca-quadro { position: relative; }
/* as placas de madeira, fincadas acima de cada ponto do lago: clicar lança ali */
.placas { position: absolute; inset: 0; pointer-events: none; line-height: 1.2; }
.placas.lancando { visibility: hidden; }
.placa { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0; pointer-events: auto; cursor: pointer; font: inherit; color: #fff4dc; }
.placa-tabua { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 4px 7px 5px; background: linear-gradient(#a8743f, #8a5a2e); border: 2px solid #3d2716; border-radius: 4px; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 0 #2a1a0e; transition: transform .12s; }
.placa-tabua b { font-size: 12px; text-shadow: 0 1px 0 #3d2716; white-space: nowrap; }
.placa-preco { display: inline-flex; align-items: center; gap: 3px; font: 700 12px var(--body); color: #ffe9a8; background: rgba(42, 26, 14, .55); border-radius: 3px; padding: 0 5px; font-variant-numeric: tabular-nums; }
.placa-preco img { width: 14px; height: 14px; image-rendering: pixelated; }
.placa.gratis .placa-preco { color: #c8f5c4; }
.placa-barra { display: flex; width: 100%; height: 5px; background: #2a1a0e; border-radius: 2px; overflow: hidden; }
.placa-barra u { display: block; height: 100%; background: var(--rc); }
.placa small { font-size: 9px; letter-spacing: 1px; color: #ffd45c; line-height: 1; }
.placa-poste { width: 4px; height: 14px; background: #5a3a20; border-left: 1px solid #7a5230; }
.placa:hover:not([disabled]) .placa-tabua, .placa:focus-visible .placa-tabua { transform: translateY(-2px); border-color: var(--gold); }
.placa.gratis .placa-tabua { border-color: #4fbf55; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 0 #2a1a0e, 0 0 10px rgba(79,191,85,.55); }
.placa[disabled] { cursor: not-allowed; }
.placa[disabled] .placa-tabua { filter: grayscale(.7) brightness(.75); }
.veio-quadro canvas { cursor: crosshair; }
.veio-fim { margin-top: 8px; align-items: center; gap: 8px; flex-wrap: wrap; }
.pesca-tab th, .pesca-tab td { padding: 4px 6px; white-space: nowrap; }
.pesca-quadro { border: 2px solid var(--ink); border-radius: var(--rd); overflow: hidden; box-shadow: 0 3px 0 var(--ink); line-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.pesca-quadro canvas { display: block; width: 100%; height: auto; cursor: pointer; image-rendering: pixelated; }
/* o controle da pescaria: Fisgar; na briga, Recolher (segurado) */
.pesca-ctl { display: flex; gap: 6px; margin-top: 6px; min-height: 40px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pesca-ctl:empty { display: none; }
.pesca-ctl .btn { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pesca-ctl .btn .fino { font-size: 10px; opacity: .75; font-weight: 400; }
.pesca-ctl .pesca-rec.on { filter: brightness(1.15); transform: translateY(2px); box-shadow: none; }
.pesca-dicas { margin: 0; padding-left: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .pesca-dicas { grid-template-columns: 1fr; } .pesca-ctl .btn .fino { display: none; } }
#pesca-msg { margin-top: 8px; min-height: 24px; }
#pesca-msg p { margin: 0 0 4px; }
.pesca-premio { margin-top: 6px; }
.pesca-peixes { margin-top: 10px; }
.pesca-peixes td { padding: 4px 6px; }
.chance { display: inline-flex; gap: 4px; align-items: center; margin-right: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .placa-tabua { min-width: 0; padding: 2px 4px 3px; gap: 1px; }
  .placa-tabua b { font-size: 10px; }
  .placa-preco { font-size: 10px; padding: 0 3px; }
  .placa-preco img { width: 11px; height: 11px; }
  .placa small { display: none; }
  .placa-poste { height: 8px; }
}

/* VIP */
.vip-topo { display: flex; gap: 12px; align-items: center; background: var(--bg-2); border: 2px solid var(--border); border-radius: var(--rd); padding: 10px 14px; }
.vip-topo.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 201, 90, .22); }
.vip-topo img { width: 64px; height: 64px; image-rendering: pixelated; flex: none; }
.vip-topo b { display: block; font-size: 16px; }
.vip-preco { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.vip-preco s { color: var(--muted-2); }
.vip-preco b { display: inline; font-size: 18px; color: var(--gold-lit); }
.pill.off { background: var(--good); }
.cambio-vip { display: flex; gap: 12px; align-items: center; }
.cambio-vip img { width: 40px; height: 40px; image-rendering: pixelated; }
.cambio-vip b { display: block; margin-bottom: 6px; }
.vantagens { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.vantagens li { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); padding: 8px 12px; }
.vantagens img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.vantagens li > span { display: flex; flex-direction: column; }
.vantagens .ps-bau { flex: none; }
/* rodada 71: a janela da coroa é a do passe premium + VIP: duas listas, o VIP e o que a trilha premium soma */
.pp-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 2px solid var(--gold); border-radius: var(--rd); background: linear-gradient(135deg, #7a4f2b, #3a2414 55%, #5a3820); box-shadow: 0 3px 0 var(--ink), 0 0 18px rgba(245, 201, 90, .25), inset 0 0 0 2px rgba(255, 233, 168, .1); }
.pp-topo > img { width: 64px; height: 64px; image-rendering: pixelated; flex: none; filter: drop-shadow(0 0 8px rgba(245, 201, 90, .6)); }
.pp-txt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 190px; min-width: 0; }
.pp-txt small { font-size: 12px; color: var(--muted); }
.pp-txt b { font: 400 15px/1.35 var(--display); color: var(--gold-lit); text-shadow: 0 2px 0 var(--ink); }
.pp-soma { font-size: 12.5px; }
.pp-preco { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pp-preco > b { display: inline-flex; align-items: center; gap: 5px; font-size: 24px; color: var(--gold-lit); text-shadow: 0 2px 0 var(--ink); }
.pp-preco > b img { width: 24px; height: 24px; }
.pp-preco > small { margin-left: -6px; font-size: 12px; color: var(--muted); }
.pp-falta { margin-top: 8px; }
.vantagens.duas { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.vant-tit { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; color: var(--gold-lit); }
.vant-tit img { width: 20px; height: 20px; image-rendering: pixelated; }
.btn.pp-comprar { font-size: 15px; padding: 10px 16px; }
/* rodada 72: as vantagens do Premium + VIP na tela do passe */
.ps-vant { margin: 12px 0 4px; padding: 10px 14px; border: 2px solid var(--gold); border-radius: var(--rd); background: linear-gradient(135deg, rgba(122, 79, 43, .55), rgba(58, 36, 20, .85)); box-shadow: 0 3px 0 var(--ink), 0 0 14px rgba(245, 201, 90, .18); }
.ps-vant.on { border-color: var(--gold-dim); box-shadow: 0 3px 0 var(--ink); }
.ps-vant summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; font-weight: 700; color: var(--gold-lit); font-size: 15px; text-shadow: 0 2px 0 var(--ink); }
.ps-vant summary img { width: 22px; height: 22px; image-rendering: pixelated; }
.ps-vant summary .ico-g { width: 18px; height: 18px; }
.ps-vant summary small { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); }
.ps-vant h4 { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); }
.ps-vant h4 img { width: 16px; height: 16px; image-rendering: pixelated; }
.ps-vant ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.ps-vant li { display: flex; align-items: center; gap: 9px; padding: 6px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rd-sm); }
.ps-vant li > img, .ps-vant li > .ps-bau { width: 28px; height: 28px; image-rendering: pixelated; flex: none; background-size: 168px 28px; }
.ps-vant li > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ps-vant li b { font-size: 13px; }
.ps-vant li small { font-size: 11px; color: var(--muted); }
.ps-vant .linha { margin-top: 10px; align-items: center; }
.lnk { background: none; border: 0; padding: 0; color: var(--gold-lit); font: inherit; text-decoration: underline; cursor: pointer; }
.moeda.vip-pill { color: var(--gold-lit); border-color: var(--gold-dim); cursor: pointer; font: 700 16px var(--body); }
.moeda[hidden] { display: none; }
.ficha { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ficha .mini { width: 75px; height: 100px; image-rendering: pixelated; background: #1d1825; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--rc) inset; flex: none; }
.relatorio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.relatorio .blk { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.blkico { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: middle; }

/* ---------------------------------------------------------------- escavação */
.pz { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; width: 100%; max-width: 440px; aspect-ratio: 1; background: var(--ink); border: 2px solid var(--ink); padding: 3px; }
.pz button { border: 0; padding: 0; font: 700 12px var(--body); color: var(--ink); cursor: pointer; position: relative; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
.pz button.h1 { --c: #8a6a4a; } .pz button.h2 { --c: #7b7280; } .pz button.h3 { --c: #4f4858; }
.pz button.pepita { box-shadow: inset 0 0 0 3px #b8801f, inset 0 -3px 0 rgba(0,0,0,.35); color: #ffe9a8; }
.pz button.barril { --c: #b5463a; }
.pz button.tesouro { --c: #6a3f8a; box-shadow: inset 0 0 0 3px #c86bfa; }
.pz button.aberto { background: #15111f; box-shadow: none; color: var(--gold); cursor: default; }
.pz button.pode { outline: 2px dashed var(--text); outline-offset: -5px; }
.pz button.boom { animation: boom .35s ease-out; }
@keyframes boom { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.pz button span { position: absolute; right: 3px; bottom: 1px; font-size: 10px; color: rgba(255,255,255,.75); }
.cartao { white-space: pre; font: 13px/1.3 ui-monospace, Consolas, monospace; background: var(--bg-2); border: 2px solid var(--border); padding: 8px; overflow-x: auto; }

/* ---------------------------------------------------------------- painel de teste */
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 14px; }
.tile { background: var(--surface); border: 2px solid var(--border); padding: 8px 10px; }
.tile .l { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }
.tile .v { font-size: 20px; font-weight: 700; }
.tile .d { font-size: 12px; color: var(--muted); }
.st { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st.ok { color: var(--good); } .st.alerta { color: var(--bad); } .st.atencao { color: var(--gold); } .st.na { color: var(--muted-2); }
.relogio-teste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 2px dashed var(--bad); background: #1d1220; padding: 8px 10px; margin-bottom: 12px; }
.relogio-teste label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; }
.relogio-teste .hora-g { font: 10px var(--display); color: var(--gold-lit); margin-right: 6px; }
.graficos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.graf { background: var(--surface); border: 2px solid var(--border); padding: 10px; position: relative; min-width: 0; }
.graf .tit { font-weight: 700; font-size: 13px; }
.graf .sub { font-size: 12px; color: var(--muted-2); margin-bottom: 4px; }
.graf svg { display: block; width: 100%; overflow: visible; }
.graf .leg { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.graf .leg i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 4px; }
.dica { position: absolute; pointer-events: none; background: var(--bg-2); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--border); padding: 6px 8px; font-size: 12px; z-index: 5; white-space: nowrap; }
.dica .dl { color: var(--muted-2); }
.dica .dv { font-weight: 700; font-variant-numeric: tabular-nums; }
.dica i { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 4px; }
.params td input { width: 100%; min-width: 80px; }
.progresso { height: 10px; background: var(--bg-2); border: 2px solid var(--ink); margin-top: 8px; }
.progresso > i { display: block; height: 100%; background: var(--purple); width: 0; }
.log li { padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; list-style: none; }
.log { margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.log .q { color: var(--muted-2); font-variant-numeric: tabular-nums; margin-right: 6px; }
details > summary { cursor: pointer; color: var(--purple); font-weight: 700; }

/* ---------------------------------------------------------------- janela e avisos */
.modal { position: fixed; inset: 0; background: rgba(12, 9, 18, .6); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-box { background: var(--card); border: 2px solid var(--gold); box-shadow: 0 4px 0 var(--ink); max-width: 560px; width: 100%; max-height: 88vh; overflow: auto; padding: 16px; position: relative; }
.modal-box .x { position: absolute; top: 8px; right: 8px; }
.revela { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 10px 0; }
.revela > div { animation: entra .4s ease-out backwards; }
/* o retrato acende na cor da raridade, de baixo para cima, como o halo da mina */
.mc-img, .fz-m, .ficha .mini, .fz-slot img { background: radial-gradient(ellipse 72% 64% at 50% 64%, color-mix(in srgb, var(--rc) var(--aura, 0%), transparent), transparent 72%), #1d1825; }
@media (prefers-reduced-motion: reduce) { .mc.t4 { animation: none; box-shadow: 0 0 16px -2px var(--rc); } }
/* a confirmação de Gemas e a fusão em massa */
.gasto-g { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 2px; font-size: 28px; font-weight: 700; }
.gasto-g img { width: 32px; height: 32px; image-rendering: pixelated; }
.fz-massa { margin-top: 10px; }
/* prata por hora: a conta */
.renda-topo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.renda-topo > div { display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); padding: 8px 10px; }
.renda-topo b { font-size: 22px; font-variant-numeric: tabular-nums; }
.renda-topo small { color: var(--muted-2); font-size: 11px; }
table.mec td { vertical-align: top; font-size: 12.5px; }
table.mec td:first-child { white-space: nowrap; }
table.mec td table { margin-top: 4px; }
table.tab-contas th, table.tab-contas td { white-space: nowrap; padding: 3px 6px; text-align: left; }
table.tab-contas .n { text-align: right; font-variant-numeric: tabular-nums; }
table.tab-contas tr.total td { border-top: 1px solid var(--border); }
.tab-contas th[title], table.divisao th[title], .previa-f th[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
/* painel de teste: a divisão da prata do dia, a explicação de cada parâmetro e a prévia do f */
.divisao-frase { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
table.divisao td { vertical-align: top; }
table.divisao td .fino { font-size: 11px; max-width: 340px; white-space: normal; }
table.divisao td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.params .ajuda { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 3px 0; max-width: 520px; }
/* rodada 88: o nome do parâmetro em destaque, a chave apagada, a unidade embaixo do campo, a linha mudada marcada */
.params .p-nome { font-size: 13px; color: var(--text); }
.params .p-chave { opacity: 0.6; font-size: 10.5px; }
.params .p-un { margin-top: 3px; font-size: 11px; opacity: 0.8; }
.params tr.p-mudou > td:first-child { box-shadow: inset 3px 0 0 var(--gold); padding-left: 8px; }
.params .p-liga { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.params .p-liga input { width: auto; min-width: 0; }
.previa-f { border: 1px dashed var(--border); border-radius: var(--rd-sm); padding: 8px 10px; margin-bottom: 10px; }
.previa-f table { margin-top: 6px; }
.fc-acoes { display: flex; gap: 6px; align-items: center; }
.fc-acoes > .btn { flex: none; }
.ico-p { width: 14px; height: 14px; image-rendering: pixelated; vertical-align: -2px; margin-left: 3px; }
.renda-lista { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
tr.apagado td { opacity: .45; }
.fz-massa .mint-qs { flex-wrap: wrap; }
@keyframes entra { from { transform: translateY(8px) scale(.96); opacity: 0; } }
/* os avisos aparecem no canto de cima, à direita, por cima do céu: não cobrem a mina nem o alojamento */
/* o tutorial do novato: o recorte escurece o resto; as faixas seguram o clique fora dele */
/* a janela de boas-vindas: o som antes do tutorial */
.bv-som { display: grid; gap: 10px; margin-top: 8px; }
.bv-som label { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 8px; font: 700 13px var(--body); color: var(--muted); }
/* o baú e a bigorna abrindo: o fundo borrado (sem spoiler da prata/h) e sem X até abrir */
.modal.revelando { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); background: rgba(12, 9, 18, .55); }
.modal.travado .modal-box > .x { display: none; }
/* a faixa de missão concluída, no alto do meio da tela */
#faixas { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 58; pointer-events: none; }
.faixa { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 260px; max-width: calc(100vw - 32px); padding: 10px 22px; background: linear-gradient(#3a2c12, #241a0c); border: 2px solid var(--gold); border-radius: var(--rd); box-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(245, 201, 90, .35); text-align: center; animation: faixa-entra .3s ease-out; transition: opacity .35s, transform .35s; }
.faixa small { font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.faixa b { font: 700 16px var(--body); color: var(--text); }
.faixa span { font: 700 14px var(--body); color: var(--gold-lit, #ffe08a); }
.faixa.sai { opacity: 0; transform: translateY(-10px); }
@keyframes faixa-entra { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@media (max-width: 760px) { #faixas { top: calc(var(--topo-h, 76px) + 50px); } }
@media (prefers-reduced-motion: reduce) { .faixa { animation: none; transition: none; } }
.tut { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.tut[hidden], .tut [hidden] { display: none; }
.tut-b { position: fixed; pointer-events: auto; }
.tut-furo { position: fixed; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(8, 6, 14, .64); transition: left .15s, top .15s, width .15s, height .15s; }
.tut.leve .tut-furo { box-shadow: 0 0 0 9999px rgba(8, 6, 14, .22); }
.tut-furo::after { content: ""; position: absolute; inset: -3px; border: 3px solid var(--gold); border-radius: 12px; animation: tut-pulsa 1.1s ease-in-out infinite; }
@keyframes tut-pulsa { 50% { inset: -8px; opacity: .45; } }
/* o balão é o Tião, o capataz, falando: o rosto à esquerda, o nome em cima, a frase */
.tut-balao { position: fixed; display: flex; align-items: flex-start; width: max-content; max-width: min(420px, calc(100vw - 24px)); min-height: 72px; background: var(--card); border: 2px solid var(--gold); box-shadow: 0 3px 0 var(--ink); padding: 10px 14px 10px 82px; font: 700 15px/1.4 var(--body); color: var(--text); border-radius: var(--rd-sm); pointer-events: none; }
.tut-balao.pop { animation: tut-pop .22s ease-out; }
@keyframes tut-pop { from { transform: translateY(6px) scale(.97); opacity: .3; } }
/* o Tião de corpo inteiro, de pé na beirada esquerda do balão e saindo por cima dele */
.tut-npc { position: absolute; left: 6px; bottom: 4px; width: 66px; height: 101px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 0 1px var(--ink)); }
.tut-fala { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tut-nome { font: 700 11px var(--body); color: var(--gold-lit, #ffe08a); text-transform: uppercase; letter-spacing: .06em; }
.tut-seg { display: none; margin-top: 4px; align-self: flex-end; font: 700 11px var(--body); color: var(--muted); animation: tut-pisca 1.2s ease-in-out infinite; }
@keyframes tut-pisca { 50% { opacity: .35; } }
/* numa fala o toque em qualquer lugar passa para a próxima (e o recorte não deixa clicar no que está embaixo) */
.tut.fala .tut-furo, .tut.fala .tut-balao { pointer-events: auto; cursor: pointer; }
.tut.fala .tut-b { cursor: pointer; }
.tut.fala .tut-seg { display: block; }
.tut.fala .tut-furo::after { animation: none; border-style: dashed; opacity: .7; }
/* a seta que aponta o que clicar, pulando */
.tut-seta { position: fixed; width: 32px; height: 32px; pointer-events: none; background: var(--gold); clip-path: polygon(30% 0, 70% 0, 70% 50%, 100% 50%, 50% 100%, 0 50%, 30% 50%); filter: drop-shadow(0 2px 0 var(--ink)); animation: tut-seta-b .7s ease-in-out infinite alternate; }
.tut-seta.cima { animation-name: tut-seta-c; transform: rotate(180deg); }
.tut-seta.esq { animation-name: tut-seta-e; transform: rotate(90deg); }
@keyframes tut-seta-b { to { translate: 0 -8px; } }
@keyframes tut-seta-c { to { translate: 0 8px; } }
@keyframes tut-seta-e { to { translate: 8px 0; } }
/* o menu que o Tião ainda não apresentou: apagado e com cadeado; quando ele libera, acende */
.menu .mi.tranc { cursor: default; }
.menu .mi.tranc img { filter: grayscale(1) brightness(.6); opacity: .22; }
.menu .mi.tranc span { opacity: .4; }
.menu .mi.tranc::before { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); background: url(/jogo/img/cadeado.png) center / 32px 32px no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 0 var(--ink)); pointer-events: none; }
.menu .mi.tranc .bolinha { display: none; }
.menu .mi.libera { animation: tut-libera 1.4s ease-out; z-index: 2; }
@keyframes tut-libera { 20% { transform: scale(1.18); filter: brightness(1.7) drop-shadow(0 0 6px var(--gold)); } 100% { transform: scale(1); filter: none; } }
body.tut-tranca .museu-pill, body.tut-tranca .vip-pill { opacity: .35; filter: grayscale(1); }
/* as faixas de missão, no tutorial: num canto à direita, fora do caminho do Tião e do recorte */
html body.tut-on #faixas { top: auto; bottom: 130px; left: auto; right: max(28px, calc((100vw - 1380px) / 2 + 28px)); transform: none; }
body.tut-on .faixa { min-width: 0; padding: 8px 16px; }
@media (max-width: 760px) {
  html body.tut-on #faixas { top: calc(var(--topo-h, 76px) + 6px); bottom: auto; right: 8px; }
  body.tut-on .faixa { padding: 6px 12px; }
  body.tut-on .faixa b { font-size: 13px; }
  .tut-balao { font-size: 14px; min-height: 62px; padding-left: 64px; }
  .tut-npc { left: 4px; width: 50px; height: 77px; }
  .menu .mi.tranc::before { left: 34px; }
}
@media (prefers-reduced-motion: reduce) { .tut-furo::after, .tut-seta, .tut-balao.pop, .tut-seg, .menu .mi.libera { animation: none; } .tut-furo { transition: none; } }
#toasts { position: fixed; right: max(28px, calc((100vw - 1380px) / 2 + 28px)); top: 150px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: min(380px, calc(100vw - 24px)); pointer-events: none; }
@media (max-width: 760px) { #toasts { right: auto; left: 50%; transform: translateX(-50%); align-items: center; top: calc(var(--topo-h, 76px) + 64px); } }
/* o sino, no canto de cima à direita da mina, e a lista de avisos que abre embaixo dele */
.sino { position: absolute; top: 10px; right: 10px; z-index: 12; display: flex; flex-direction: column; align-items: flex-end; }
.bt-sino { position: relative; width: 40px; height: 40px; display: grid; place-items: center; background: var(--vidro); border: 2px solid var(--border); border-radius: var(--rd-sm); box-shadow: 0 3px 0 var(--ink); color: var(--gold); cursor: pointer; }
.bt-sino:hover, .sino.aberto .bt-sino { border-color: var(--gold); }
.bt-sino svg { width: 24px; height: 24px; fill: currentColor; shape-rendering: crispEdges; }
.bt-sino .bolinha { top: -5px; right: -5px; width: 12px; height: 12px; }
.bt-sino .bolinha.on { animation: sino-pulsa 1.4s ease-in-out infinite; }
@keyframes sino-pulsa { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .bt-sino .bolinha.on { animation: none; } }
.sino-pop { margin-top: 8px; width: min(360px, calc(100vw - 24px)); max-height: min(60vh, 420px); overflow-y: auto; background: var(--card); border: 2px solid var(--gold); border-radius: var(--rd); box-shadow: 0 6px 0 var(--ink), 0 10px 30px rgba(0, 0, 0, .45); padding: 8px; }
.sino-pop[hidden] { display: none; }
.sino-tit { font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 2px 4px 6px; }
.aviso-l { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.3; }
.aviso-l:first-child { border-top: 0; }
.aviso-l span { flex: 1; }
.aviso-l.forte span { color: var(--gold-lit); }
.aviso-l .btn { flex: none; }
@media (max-width: 760px) { .sino { position: fixed; top: calc(var(--topo-h, 76px) + 4px); right: 8px; } .quadro.com-painel .sino { visibility: hidden; } }
.quadro.com-painel-largo .sino { visibility: hidden; }
/* com a lista aberta, os avisos rápidos vão para o lado dela (no celular, para baixo) */
body.sino-aberto #toasts { right: calc(max(28px, calc((100vw - 1380px) / 2 + 28px)) + 376px); top: 100px; }
@media (max-width: 760px) { body.sino-aberto #toasts { right: auto; top: auto; bottom: calc(170px + env(safe-area-inset-bottom)); flex-direction: column-reverse; } }
/* no celular, com uma janela aberta, os avisos descem para cima do menu e não cobrem a janela */
@media (max-width: 760px) { .jogo:has(#painel:not([hidden])) ~ #toasts { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); flex-direction: column-reverse; } }
.toast { background: var(--bg-2); border: 2px solid var(--border-lit); box-shadow: 0 3px 0 var(--ink); padding: 8px 10px; font-size: 13px; animation: entra .25s ease-out; }
.toast.mau { border-color: var(--bad); }
.toast.ouro { border-color: var(--gold); }
.guia ol { padding-left: 22px; margin: 8px 0 12px; }
.guia li { margin-bottom: 8px; }
.raridades { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 12px; }

/* ================================================================ whitepaper (página de texto) */
.topo { position: sticky; top: 0; z-index: 20; background: var(--bg-2); border-bottom: 2px solid var(--ink); box-shadow: 0 2px 0 var(--border); }
.topo-in { max-width: 1180px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.marca { display: flex; align-items: center; gap: 8px; }
.marca img { width: 24px; height: 24px; image-rendering: pixelated; }
.marca .nome { font-family: var(--display); font-size: 11px; }
.marca .nome b { color: var(--gold); font-weight: 400; }
.links { display: flex; gap: 6px; }
.doc { max-width: 840px; margin: 0 auto; padding: 18px 16px 60px; }
.doc h1 { font-size: 18px; margin: 18px 0 6px; color: var(--gold-lit); }
.doc h2 { font-size: 12px; margin: 34px 0 10px; }
.doc p, .doc li { font-size: 15px; line-height: 1.7; }
.doc ul, .doc ol { padding-left: 22px; }
.doc table { margin: 8px 0 16px; }
.doc .lead { font-size: 17px; color: var(--muted); }
.doc .sumario { columns: 2; column-gap: 24px; font-size: 14px; }
.doc .sumario a { color: var(--purple); text-decoration: none; }
.doc .sumario a:hover { text-decoration: underline; }
@media (max-width: 620px) { .doc .sumario { columns: 1; } }
.formula { font: 14px/1.5 ui-monospace, Consolas, monospace; background: var(--bg-2); border: 2px solid var(--border); padding: 8px 10px; overflow-x: auto; }

/* ---------------------------------------------------------------- Masmorra e Museu */
/* a faixa de cima da descida: a vida, o fôlego, a mochila e os itens */
.mp-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; font-size: 13px; }
.mp-vida { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mp-vida small { color: var(--muted); font-size: 12px; }
.mp-barra { display: inline-block; width: 92px; height: 9px; background: var(--bg-2); border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; }
.mp-barra b { display: block; height: 100%; background: #6fd36a; transition: width .15s; }
.mp-barra b.baixa { background: #e0402a; }
.mp-folego { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-size: 14px; }
.mp-folego small { color: var(--muted); font-size: 11px; }
.mp-nivel { font-size: 13px; }
.mp-nivel b { color: var(--gold-lit); font-size: 15px; }
.mp-sacola { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; color: var(--gold-lit); font-weight: 700; }
.mp-sacola img { width: 16px; height: 16px; image-rendering: pixelated; }
.mp-sup { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rd-xs); padding: 1px 6px; font-size: 11px; color: var(--muted); }
/* o palco, centrado e contido: os botões têm de caber na tela junto com ele */
.mp-quadro { max-width: 540px; margin: 0 auto; }
.mp-quadro canvas { cursor: default; }
/* rodada 88: as setas da Masmorra nas beiradas do palco, grandes e longe umas das outras (toque ou tela estreita) */
.mp-setas { display: none; }
@media (pointer: coarse), (max-width: 760px) {
  .mp-setas { display: block; position: absolute; inset: 0; pointer-events: none; line-height: 1; }
  .mp-seta { position: absolute; pointer-events: auto; width: 58px; height: 58px; padding: 0; border-radius: 50%; border: 2px solid var(--ink); background: rgba(20, 12, 8, 0.45); color: rgba(255, 255, 255, 0.25); font-size: 24px; display: grid; place-items: center; touch-action: none; -webkit-tap-highlight-color: transparent; }
  .mp-seta.aberta { background: rgba(245, 201, 90, 0.88); color: #2a1a10; box-shadow: 0 3px 0 var(--ink), 0 0 12px rgba(245, 201, 90, 0.55); }
  .mp-seta.aberta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
  .mp-seta:disabled { opacity: 0.35; }
  .mp-seta.aberta:disabled { opacity: 0.6; }
  .mp-seta:not(.aberta) { opacity: 0.18; }
  .mp-seta.s0 { top: 6px; left: 50%; margin-left: -29px; }
  .mp-seta.s2 { bottom: 6px; left: 50%; margin-left: -29px; }
  .mp-seta.s3 { left: 6px; top: 50%; margin-top: -29px; }
  .mp-seta.s1 { right: 6px; top: 50%; margin-top: -29px; }
}
/* os ícones de pixel falam no lugar das palavras */
.mp-ico { image-rendering: pixelated; vertical-align: -5px; flex: none; }
.mp-sacola .mp-ico, .mp-sup .mp-ico, .mp-folego .mp-ico { vertical-align: -3px; }
/* os botões embaixo do palco: grandes, com ícone */
#mp-acao { margin-top: 8px; min-height: 52px; }
/* rodada 92: duas linhas fixas de mensagem (a anterior apagada, a nova cheia), sempre com a mesma altura */
#mp-msg { height: 44px; margin-top: 6px; font-size: 13px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; overflow: hidden; }
.mp-msg-l { display: flex; align-items: center; gap: 7px; color: var(--muted); line-height: 20px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-msg-l.velha { opacity: 0.55; }
/* rodada 135: uma frase sozinha pode ocupar as duas linhas (no celular a do ermitão era cortada) */
.mp-msg-l:only-child { white-space: normal; line-height: 18px; }
/* rodada 92: a janela da Masmorra fica presa no alto, não no meio: crescer embaixo (o mercador, os botões) não move o palco */
.painel.mp-j { margin-top: 0; margin-bottom: auto; }
#mp-acao { min-height: 60px; }
.mp-grande { padding: 8px 12px; }
.mp-grande > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: left; }
.mp-grande small { font-weight: 400; font-size: 11px; opacity: .85; text-transform: none; letter-spacing: 0; }
.mp-loja { align-items: center; padding: 6px 8px; margin-bottom: 6px; border: 1px dashed var(--gold-dim); border-radius: var(--rd-sm); background: rgba(245, 201, 90, .06); }
.mp-loja-tit { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gold); }
/* rodada 133: o ermitão: a fala dele e a resposta, acima dos botões */
.mp-erm-l { align-items: center; padding: 6px 8px; margin-bottom: 6px; border: 1px dashed rgba(203, 184, 242, .55); border-radius: var(--rd-sm); background: rgba(203, 184, 242, .07); }
.mp-erm-tit, .mp-erm-resp { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #cbb8f2; }
.mp-erm-resp { color: var(--text); }
.mp-vel { align-self: center; min-width: 44px; }
/* rodada 71: a barra de cima explica cada número numa dica; o "?" repete o guia */
.mp-info [data-mpdica] { cursor: help; border-radius: var(--rd-xs); outline: none; }
.mp-info [data-mpdica]:hover, .mp-info [data-mpdica]:focus-visible { background: rgba(245, 201, 90, .1); box-shadow: 0 0 0 3px rgba(245, 201, 90, .1); }
.mp-ajuda { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 2px solid var(--gold-dim); background: var(--surface); color: var(--gold-lit); font: 700 13px/1 var(--body); cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.mp-ajuda:hover { border-color: var(--gold); }
.mp-dica-flut { position: fixed; z-index: 49; max-width: min(280px, calc(100vw - 12px)); padding: 6px 9px; background: var(--bg-2); border: 2px solid var(--gold-dim); border-radius: var(--rd-sm); box-shadow: 0 3px 0 var(--ink); font: 400 12.5px/1.4 var(--body); color: var(--text); pointer-events: none; }
.mp-dica-flut[hidden] { display: none; }
/* o guia da primeira vez: um balão perto do que ele explica, e o que ele explica pulsando em dourado */
.mp-guia { position: fixed; z-index: 49; width: min(330px, calc(100vw - 16px)); padding: 10px 12px; background: var(--bg-2); border: 2px solid var(--gold); border-radius: var(--rd); box-shadow: 0 4px 0 var(--ink), 0 10px 30px rgba(0, 0, 0, .55); font-size: 13.5px; line-height: 1.45; color: var(--text); }
.mp-guia[hidden] { display: none; }
.mp-guia::before { content: ""; position: absolute; left: var(--seta, 50%); width: 12px; height: 12px; margin-left: -7px; background: var(--bg-2); border: 2px solid var(--gold); transform: rotate(45deg); }
.mp-guia[data-lado="baixo"]::before { top: -8px; border-right: 0; border-bottom: 0; }
.mp-guia[data-lado="cima"]::before { bottom: -8px; border-left: 0; border-top: 0; }
.mp-guia[data-lado="dentro"]::before { display: none; }
.mp-guia-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mp-guia-tit img { width: 24px; height: 24px; image-rendering: pixelated; }
.mp-guia-tit b { color: var(--gold-lit); font-size: 14.5px; }
.mp-guia-tit small { margin-left: auto; color: var(--muted); }
.mp-guia p { margin: 0 0 8px; }
.mp-guia p b { color: var(--gold-lit); }
.mp-guia-bts { display: flex; justify-content: flex-end; gap: 6px; }
.mp-guia-alvo { outline: 2px solid var(--gold); outline-offset: 3px; animation: mp-guia-pulsa 1.1s ease-in-out infinite; }
@keyframes mp-guia-pulsa { 50% { outline-color: rgba(245, 201, 90, .25); } }
@media (prefers-reduced-motion: reduce) { .mp-guia-alvo { animation: none; } }
/* o saguão da Masmorra: o topo fica preso enquanto a lista de mineradores rola */
.mp-largada { position: sticky; top: -14px; z-index: 4; margin: -14px -16px 10px; padding: 12px 16px 10px; background: rgba(32, 26, 48, .99); border-bottom: 2px solid var(--border); display: grid; gap: 8px; }
.mp-lg-lin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mp-lg-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 64px; }
.mp-lg-chefe { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.mp-lg-sel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mp-lg-sel img, .mp-lin img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.mp-lg-sel small { display: block; font-size: 11.5px; color: var(--muted); }
/* os números de quem desce, só ícones: vida, fôlego, dano, agilidade (o ventinho anda) e crítico */
.mp-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.mp-st { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: help; }
.mp-st b { color: var(--text); font-variant-numeric: tabular-nums; }
.mp-lg-sel .mp-st img { width: 16px; height: 16px; }
.mp-vento { display: inline-block; width: 16px; height: 16px; flex: none; background-size: 48px 16px; background-repeat: no-repeat; image-rendering: pixelated; animation: mp-sopro .7s steps(3) infinite; }
@keyframes mp-sopro { to { background-position: -48px 0; } }
@media (prefers-reduced-motion: reduce) { .mp-vento { animation: none; } }
.mp-rank-bt { margin-left: auto; }
.mp-como { margin: 0 0 10px; font-size: 13px; }
.mp-como summary { cursor: pointer; color: var(--gold-lit); font-weight: 700; }
.mp-como ul { margin: 6px 0; padding-left: 18px; line-height: 1.45; }
.mp-como-atr { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.mp-como-atr b { color: var(--text); margin-right: 4px; }
.mp-lista-tit { margin: 4px 0 6px; }
.mp-lista { display: grid; gap: 4px; }
.mp-lin { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 4px 8px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); color: var(--text); cursor: pointer; }
.mp-lin:hover { border-color: var(--border-lit); }
.mp-lin.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.mp-lin-n { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mp-lin-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-lin-a { display: flex; gap: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-lin-a b { color: var(--text); }
@media (max-width: 480px) { .mp-lin { grid-template-columns: 32px 1fr; } .mp-lin-a { grid-column: 2; } .mp-rank-bt { margin-left: 0; } }
/* o ranking */
.mp-rank-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .mp-rank-duas { grid-template-columns: 1fr; } }
/* a tabela do ranking: era table.mp-rank, e o escudo da rodada 106 (.mp-rank) passou a valer nela também
   (filhos absolutos, altura fixa, escala no celular), o que sobrepunha as linhas */
.mp-rank-duas > div { min-width: 0; }
table.mp-rk-tab { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
table.mp-rk-tab th, table.mp-rk-tab td { padding: 3px 6px; border-bottom: 1px solid var(--border); text-align: left; }
table.mp-rk-tab th:first-child { width: 2.2em; }
table.mp-rk-tab th:nth-child(3) { width: 4.6em; }
table.mp-rk-tab th:nth-child(4) { width: 5.4em; }
table.mp-rk-tab td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.mp-rk-tab .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.mp-rk-tab tr.eu td { color: var(--gold-lit); font-weight: 700; }
.dica-temp { cursor: help; text-decoration: underline dotted rgba(255, 255, 255, .35); text-underline-offset: 3px; }
/* o "i" de informação: a frase aparece no hover, no foco e no toque */
.dica-i { position: relative; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 3px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font: italic 700 10px/1 Georgia, serif; vertical-align: 1px; cursor: help; }
.dica-i:hover, .dica-i:focus { color: var(--gold-lit); border-color: var(--gold); outline: none; }
.dica-i:hover::after, .dica-i:focus::after { content: attr(data-dica); position: absolute; left: -8px; bottom: calc(100% + 6px); z-index: 30; width: max-content; max-width: 220px; background: var(--bg-2); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--border); padding: 4px 8px; font: 400 12px/1.35 var(--body); font-style: normal; color: var(--text); white-space: normal; pointer-events: none; }
/* o nível de começo, entre os já desbloqueados */
.mp-niveis { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-nv { min-width: 40px; height: 36px; border: 2px solid var(--border); border-radius: var(--rd-sm); background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; }
.mp-nv.on { border-color: var(--gold); color: var(--gold-lit); box-shadow: 0 0 0 1px var(--gold) inset; }
.mp-vel.on { border-color: var(--gold); color: var(--gold-lit); }
.mp-fim { border: 2px solid var(--border); border-radius: var(--rd-sm); background: var(--surface); padding: 8px 10px; font-size: 13px; margin-bottom: 10px; }
.mp-fim.bom-b { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.mp-fim.mau-b { border-color: color-mix(in srgb, var(--bad) 55%, var(--border)); }
/* o Museu: uma estante por coleção; a peça que falta é uma silhueta escura */
.museu-set { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: 8px; }
.rel { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); padding: 8px 6px 6px; text-align: center; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--rc) 45%, transparent); }
.rel img { width: 48px; height: 48px; image-rendering: pixelated; }
.rel-nome { font-size: 11px; line-height: 1.2; color: var(--text); min-height: 26px; }
.rel.falta { box-shadow: none; }
.rel.falta .rel-nome { color: var(--muted-2); }
.rel.t3:not(.falta) { border-color: color-mix(in srgb, var(--rc) 45%, var(--border)); }
.rel.t4:not(.falta) { border-color: color-mix(in srgb, var(--rc) 65%, var(--border)); animation: aura 2.4s ease-in-out infinite; }
.rel-n { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 10px; color: var(--muted); }
.museu-placa { color: var(--gold); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

/* rodada 61: o nível do herói (no cartão, na ficha, no saguão da Masmorra e na faixa) e o painel de admin */
.mc-ret { position: relative; flex: none; display: block; line-height: 0; }
.mc-nv { position: absolute; left: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--ink); border: 2px solid var(--rc); color: var(--text); font: 700 10px/14px var(--body); text-align: center; }
.mc-nv.max { border-color: var(--gold); color: #ffe08a; }
.mc-xp { display: block; width: 45px; height: 4px; margin-top: 3px; background: var(--bg-2); border-radius: 2px; overflow: hidden; }
.mc-xp u, .nh-barra u { display: block; height: 100%; background: linear-gradient(90deg, #8f7bd9, #cbb8f2); }
.nivel-h { margin: 0 0 12px; padding: 8px 10px; background: var(--bg-2); border-radius: var(--rd-sm); }
.nh-topo { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.nh-topo > b { font-size: 15px; }
.nh-barra { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 6px 0; }
.nh-barra i { display: block; height: 10px; background: var(--surface); border-radius: 5px; overflow: hidden; }
.nh-barra u { border-radius: 5px; }
.nh-barra small { font: 700 12px var(--body); font-variant-numeric: tabular-nums; color: var(--muted); }
.nh-niveis { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin: 4px 0 6px; }
.nh-niveis span { display: flex; flex-direction: column; align-items: center; padding: 3px 0; border-radius: var(--rd-xs); background: var(--surface); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nh-niveis span b { font-size: 12px; color: var(--text); }
.nh-niveis .ja { color: var(--text); }
.nh-niveis .on { background: #3a2f5c; box-shadow: inset 0 0 0 2px #cbb8f2; color: #ffe08a; }
.nh-mp { margin: 0 0 6px; }
.nh-mp img { width: 32px; height: 32px; margin: -8px -2px -8px -4px; image-rendering: pixelated; }
.xp-t { color: #cbb8f2; }
.mp-lin-nv { font: 700 10px var(--body); color: #cbb8f2; margin-left: 6px; white-space: nowrap; }
/* rodada 81: o bônus das ferramentas na Masmorra (saguão, lista e a barra da descida) */
.fc-info > .fc-mp { color: #9cc4ff; }
.mp-ferrs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; cursor: help; }
.mp-ferr { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; border: 1px solid var(--border); border-radius: var(--rd-xs); background: rgba(0,0,0,.25); font: 700 11.5px var(--body); color: var(--good, #a9e6a4); white-space: nowrap; }
.mp-lg-sel .mp-ferr img, .mp-lin .mp-lin-f img, .mp-ferrs-hud img { width: 16px; height: 16px; }
.mp-lin-f { display: inline-flex; gap: 1px; margin-left: 6px; vertical-align: middle; }
.mp-lin-a b.bom { color: #a9e6a4; }
.mp-ferrs-hud { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border: 1px solid #a9e6a4; border-radius: var(--rd-xs); background: rgba(169,230,164,.12); cursor: help; }
.mp-ferrs-hud i { display: inline-flex; }
.faixa.faixa-nivel { border-color: #cbb8f2; background: linear-gradient(#2e2547, #1d1730); box-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(203, 184, 242, .35); }
.faixa.faixa-nivel small { color: #cbb8f2; }
details.params.grupo > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; cursor: pointer; list-style: none; }
details.params.grupo > summary::-webkit-details-marker { display: none; }
details.params.grupo > summary::before { content: "▸"; color: var(--muted); width: 12px; flex: none; }
details.params.grupo[open] > summary::before { content: "▾"; }
details.params.grupo > summary h2 { margin: 0; }
details.params.grupo[open] > summary { margin-bottom: 8px; }
.params-grupos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.params-grupos > .card { margin: 0; }
.temp-ops { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.temp-ops label { display: flex; gap: 6px; align-items: center; }
/* rodada 62: o medidor de desempenho na tela e a linha da temporada */
#medidor { position: fixed; right: 8px; bottom: 8px; z-index: 90; padding: 4px 8px; background: rgba(12, 9, 18, .88); border: 1px solid var(--border); border-radius: var(--rd-xs); color: var(--text); font: 600 11px/1.3 ui-monospace, Consolas, monospace; pointer-events: none; }
#medidor.ruim { border-color: #f2a9a0; color: #f2a9a0; }
.med-liga { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-top: 8px; }
tr.destaque td { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.temp-linha { margin: 0 0 6px; }

/* ------------------------------------------------------------ rodada 63: o passe de batalha */
/* a miniatura no ritmo, ao lado das missões: o nível de agora, o pontilhado da XP e o próximo */
.ritmo .r.passe-pill { cursor: pointer; color: var(--text); border-color: var(--purple-dim); padding: 3px 9px 3px 4px; gap: 6px; }
.ritmo .r.passe-pill:hover { border-color: var(--purple); }
.ritmo .r.passe-pill.prem { border-color: var(--gold-dim); }
.ritmo .r.passe-pill small { font-weight: 700; color: var(--muted-2); }
.ps-mn { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--purple-dim); color: var(--ink); font: 400 9px/1 var(--display); box-shadow: 0 2px 0 var(--ink); }
.passe-pill.prem .ps-mn { background: var(--gold); }
.ps-md { display: inline-flex; align-items: center; gap: 3px; }
.ps-md i { width: 3px; height: 3px; border-radius: 50%; background: var(--border-lit); }
.ps-md i.on { background: var(--gold); box-shadow: 0 0 4px var(--gold); }
.ps-md.grande { gap: 5px; } .ps-md.grande i { width: 7px; height: 7px; }
/* a janela: larga, por cima do jogo */
@media (min-width: 761px) { .painel.passe-j { inset: 12px; width: min(1080px, calc(100% - 24px)); max-height: calc(100% - 24px); } }
.ps-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--bg-2); border: 2px solid var(--border); border-radius: var(--rd); padding: 10px 14px; }
.ps-nvbig { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: var(--rd-sm); background: linear-gradient(#3b2d5c, #241b38); border: 2px solid var(--purple-dim); box-shadow: 0 3px 0 var(--ink); }
.ps-nvbig.prem { border-color: var(--gold); background: linear-gradient(#4a3714, #2a1e0b); }
.ps-nvbig small { font: 700 9px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ps-nvbig b { font: 400 18px/1.3 var(--display); color: var(--gold-lit); }
.ps-meio { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 6px; }
.ps-xp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ps-premio { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 300px; }
.ps-premio small { font-size: 11px; color: var(--muted-2); text-align: right; }
.ps-prem-on { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--body); color: var(--gold); text-transform: uppercase; letter-spacing: .05em; }
.ps-prem-on img { width: 28px; height: 28px; image-rendering: pixelated; }
/* a trilha: uma caverna reta que rola para os lados; o corredor com trilhos, uma sala por nível */
.ps-trilha-caixa { position: relative; margin-top: 10px; }
.ps-trilha { overflow-x: auto; overflow-y: hidden; border: 2px solid var(--ink); border-radius: var(--rd); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--border); background: #120d1a; scrollbar-color: var(--border-lit) transparent; overscroll-behavior-x: contain; }
.ps-tunel { position: relative; height: 296px; background-repeat: repeat; background-size: 256px 256px; image-rendering: pixelated; }
.ps-corredor { position: absolute; left: 0; right: 0; top: 124px; height: 46px; background: linear-gradient(#251b17, #3a2b21 45%, #2a1f18); box-shadow: 0 -4px 0 rgba(0, 0, 0, .45), 0 4px 0 rgba(0, 0, 0, .45); }
.ps-corredor::before, .ps-corredor::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #6b5a4a; box-shadow: 0 1px 0 #2a1f18; }
.ps-corredor::before { top: 34px; } .ps-corredor::after { top: 40px; }
.ps-corredor { background-image: repeating-linear-gradient(90deg, transparent 0 10px, #4a3322 10px 15px), linear-gradient(#251b17, #3a2b21 45%, #2a1f18); background-size: 100% 12px, 100% 100%; background-position: 0 32px, 0 0; background-repeat: no-repeat; }
/* um lampião no teto do corredor a cada 5 níveis; aceso depois que o minerador passa */
.ps-lamp { position: absolute; top: 124px; width: 8px; height: 9px; margin-left: -4px; border-radius: 0 0 3px 3px; background: #5d4a2a; box-shadow: 0 -3px 0 -1px #3a2b21; pointer-events: none; z-index: 1; }
.ps-lamp.acesa { background: #ffd56b; box-shadow: 0 0 8px 3px rgba(255, 196, 80, .6), 0 0 34px 16px rgba(255, 170, 60, .2); animation: ps-chama 1.6s ease-in-out infinite; }
@keyframes ps-chama { 50% { opacity: .82; } }
.ps-seg { position: absolute; top: 144px; height: 6px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.ps-seg i { width: 4px; height: 4px; border-radius: 50%; background: #5b4a7a; }
.ps-seg i.on { background: var(--gold); box-shadow: 0 0 5px var(--gold); }
.ps-col { position: absolute; top: 0; bottom: 0; width: 94px; transform: translateX(-50%); }
.ps-no { position: absolute; top: 132px; left: 50%; width: 30px; height: 30px; margin-left: -15px; display: grid; place-items: center; border-radius: 8px; background: #2a2038; border: 2px solid #5b4a7a; color: var(--muted); font: 400 8px/1 var(--display); box-shadow: 0 2px 0 var(--ink); z-index: 2; }
.ps-col.alc .ps-no { background: var(--gold); border-color: var(--gold-lit); color: var(--ink); }
.ps-col.prox .ps-no { border-color: var(--gold); color: var(--gold-lit); }
.ps-col.fim .ps-no { width: 36px; height: 36px; margin-left: -18px; top: 129px; border-color: var(--gold); }
.ps-no.ini { background: #3a2b21; border-color: #6b5a4a; font: 16px/1 var(--body); color: var(--gold-lit); }
.ps-no.ini img { width: 16px; height: 16px; image-rendering: pixelated; }
.ps-inicio { position: absolute; top: 0; bottom: 0; width: 40px; transform: translateX(-50%); }
.ps-rec { position: absolute; left: 0; right: 0; height: 104px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px 6px; padding: 6px 4px; border-radius: var(--rd-sm); border: 2px solid var(--border); background: rgba(28, 21, 41, .93); box-shadow: 0 2px 0 var(--ink); }
.ps-rec.prem { top: 12px; border-color: var(--gold-dim); background: linear-gradient(rgba(72, 54, 20, .94), rgba(36, 27, 12, .94)); }
.ps-rec.livre { top: 180px; }
.ps-rec.vazio { background: transparent; border: 2px dashed rgba(111, 87, 171, .22); box-shadow: none; }
.ps-rec.prem.vazio { border-color: rgba(184, 128, 31, .2); }
.ps-rec.ok { border-color: var(--good); }
.ps-rec.tranca > .ps-it { opacity: .5; filter: saturate(.55); }
.ps-ok, .ps-cad { position: absolute; top: -9px; right: -7px; font-style: normal; z-index: 1; }
.ps-ok { width: 20px; height: 20px; border-radius: 50%; background: var(--good); color: var(--ink); font: 700 12px/20px var(--body); text-align: center; box-shadow: 0 2px 0 var(--ink); }
.ps-cad { font-size: 14px; filter: drop-shadow(0 1px 0 var(--ink)); }
.ps-cad img { display: block; width: 16px; height: 16px; image-rendering: pixelated; }
.ps-prox { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 700 9px var(--body); font-style: normal; color: var(--muted); }
.ps-it { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 30px; }
.ps-it img { width: 32px; height: 32px; image-rendering: pixelated; }
.ps-it small { font: 700 10px/1.15 var(--body); color: var(--text); white-space: nowrap; }
.ps-it small.t0, .ps-it small.t1, .ps-it small.t2, .ps-it small.t3, .ps-it small.t4 { color: var(--rc); }
.ps-bau { display: block; width: 32px; height: 32px; image-rendering: pixelated; background: url(/jogo/img/bau_abrindo.png) 0 0 / 192px 32px no-repeat; }
.ps-bau.ouro { background-image: url(/jogo/img/bau_premium.png); filter: drop-shadow(0 0 4px rgba(245, 201, 90, .55)); }
.ps-ferr { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; border: 2px solid var(--rc, var(--border)); background: #1d1825; box-shadow: 0 0 6px -2px var(--rc); }
.ps-ferr img { width: 16px; height: 16px; }
.ps-ferr b { position: absolute; right: -5px; bottom: -6px; font: 700 11px var(--body); color: var(--gold-lit); text-shadow: 0 1px 0 var(--ink), 0 0 2px var(--ink); }
/* adiante do minerador, a caverna escurece; ele leva a luz */
.ps-escuro { position: absolute; top: 0; bottom: 0; right: 0; background: linear-gradient(90deg, rgba(6, 4, 12, 0), rgba(6, 4, 12, .36) 140px); pointer-events: none; z-index: 3; }
.ps-eu { position: absolute; top: 116px; width: 36px; height: 48px; margin-left: -18px; z-index: 4; pointer-events: none; }
.ps-eu img { position: relative; width: 36px; height: 48px; image-rendering: pixelated; z-index: 1; animation: ps-anda 1.1s ease-in-out infinite; filter: drop-shadow(0 2px 0 var(--ink)); }
.ps-luz { position: absolute; left: 50%; top: 40%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; background: radial-gradient(rgba(255, 200, 110, .2), rgba(255, 200, 110, 0) 65%); }
@keyframes ps-anda { 50% { transform: translateY(-3px); } }
.ps-rot { position: absolute; left: 4px; z-index: 5; padding: 2px 6px; border-radius: var(--rd-xs); font: 700 9px var(--body); text-transform: uppercase; letter-spacing: .08em; pointer-events: none; }
.ps-rot.prem { top: 6px; background: var(--gold); color: var(--ink); }
.ps-rot.livre { top: 174px; background: var(--purple-dim); color: var(--ink); }
.ps-pe { margin-top: 10px; align-items: center; }
.ps-pe .fino { display: inline-flex; align-items: center; gap: 6px; }
/* o baú de ouro do passe, no Abrir baú */
.btn.ouro-g { width: 100%; justify-content: center; margin-bottom: 10px; padding: 10px; background: linear-gradient(#f5c95a, #c99a2e); color: var(--ink); text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 3px 0 #7a5a12, 0 3px 0 2px var(--ink), 0 0 14px rgba(245, 201, 90, .45); }
/* a faixa do passe que sobe de nível */
.faixa.faixa-passe { background: linear-gradient(#3a2a52, #1f1630); border-color: var(--purple); box-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(203, 184, 242, .35); }
.faixa.faixa-passe small { color: var(--purple); }
@media (prefers-reduced-motion: reduce) { .ps-eu img, .ps-lamp.acesa { animation: none; } }
@media (max-width: 760px) {
  .ps-premio { align-items: stretch; max-width: none; width: 100%; }
  .ps-premio small { text-align: left; }
  .ritmo .r.passe-pill { padding: 2px 7px 2px 3px; gap: 4px; }
  .ps-md { gap: 2px; }
}

/* ------------------------------------------------------------ rodada 64: coletar a recompensa do passe */
.ritmo .r.passe-pill { position: relative; }
.ritmo .r.passe-pill.tem { border-color: var(--gold); box-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(245, 201, 90, .55); animation: ps-pulsa 1.4s ease-in-out infinite; }
.ps-tem { position: absolute; top: -8px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--bad); color: var(--ink); font: 700 12px/18px var(--body); font-style: normal; text-align: center; box-shadow: 0 2px 0 var(--ink); z-index: 2; }
@keyframes ps-pulsa { 50% { box-shadow: 0 2px 0 var(--ink), 0 0 20px rgba(245, 201, 90, .9); } }
.ps-rec.pend { border-color: var(--gold); box-shadow: 0 2px 0 var(--ink), 0 0 14px rgba(245, 201, 90, .6); animation: ps-pulsa 1.4s ease-in-out infinite; }
.btn.ps-coletar { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 14px; background: linear-gradient(#ffe08a, #f5c95a 45%, #c99a2e); color: var(--ink); text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 3px 0 #7a5a12, 0 3px 0 2px var(--ink), 0 0 18px rgba(245, 201, 90, .55); animation: ps-pulsa 1.4s ease-in-out infinite; }
.btn.ps-coletar b { font: 700 15px var(--body); }
.btn.ps-coletar small { font: 700 11px var(--body); opacity: .75; text-transform: none; }
.btn.ps-coletar .ps-bau { flex: none; }
/* a janela: raios girando atrás, o título que salta e as recompensas entrando uma a uma */
.modal.modal-passe .modal-box { border-color: var(--purple); background: radial-gradient(circle at 50% 30%, #3b2a5e, #1d1530 70%); overflow: hidden; }
.ps-coleta { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 4px 2px; }
.ps-raios { position: absolute; left: 50%; top: 46px; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: repeating-conic-gradient(rgba(245, 201, 90, .16) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); animation: ps-gira 14s linear infinite; pointer-events: none; }
@keyframes ps-gira { to { transform: rotate(360deg); } }
.ps-col-sup { position: relative; font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--purple); }
.ps-col-tit { position: relative; margin: 6px 0 14px; font-size: 16px; color: var(--gold-lit); text-shadow: 0 2px 0 var(--ink), 0 0 16px rgba(245, 201, 90, .6); animation: ps-salta .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ps-salta { from { transform: scale(.3); opacity: 0; } }
.ps-cis { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
.ps-ci { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; padding: 10px 6px 8px; border-radius: var(--rd-sm); border: 2px solid var(--border-lit); background: linear-gradient(#2c2245, #1d1630); box-shadow: 0 3px 0 var(--ink); animation: ps-entra .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.ps-ci.prem { border-color: var(--gold); background: linear-gradient(#4a3714, #241a0b); box-shadow: 0 3px 0 var(--ink), 0 0 14px rgba(245, 201, 90, .4); }
@keyframes ps-entra { from { transform: translateY(18px) scale(.4); opacity: 0; } }
.ps-ci-ico { display: grid; place-items: center; width: 56px; height: 56px; }
.ps-ci-ico img { width: 48px; height: 48px; image-rendering: pixelated; }
.ps-ci-ico .ps-bau { width: 48px; height: 48px; background-size: 288px 48px; }
.ps-ci-ico .ps-ferr { width: 46px; height: 46px; }
.ps-ci-ico .ps-ferr img { width: 24px; height: 24px; }
.ps-ci b { font: 700 12px var(--body); color: var(--text); }
.ps-ci small { font: 700 12px var(--body); color: var(--gold-lit); }
.ps-ci small .t0, .ps-ci small .t1, .ps-ci small .t2, .ps-ci small .t3, .ps-ci small .t4 { color: var(--rc); }
.ps-ci-coroa { position: absolute; top: -10px; right: -8px; font-style: normal; }
.ps-ci-coroa img { width: 22px; height: 22px; image-rendering: pixelated; filter: drop-shadow(0 1px 0 var(--ink)); }
.ps-col-bts { position: relative; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .ps-raios, .ps-ci, .ps-col-tit, .btn.ps-coletar, .ps-rec.pend, .ritmo .r.passe-pill.tem { animation: none; } }
/* durante o tutorial, a faixa de missão concluída desce para não cobrir o alvo nem o balão (o passe fica no alto) */
body.tut-on #faixas { top: 58%; }

/* ------------------------------------------------------------ rodada 65: a miniatura do passe, chamativa */
.ritmo .r.passe-pill { overflow: hidden; gap: 7px; padding: 3px 11px 3px 4px; background: linear-gradient(#4b3473, #2a1d45); border-color: var(--gold); color: var(--text); box-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(203, 184, 242, .4); }
.ritmo .r.passe-pill:hover { border-color: var(--gold-lit); box-shadow: 0 2px 0 var(--ink), 0 0 16px rgba(245, 201, 90, .55); }
.ritmo .r.passe-pill::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: -40px; width: 26px; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent); animation: ps-reluz 4s ease-in-out infinite; pointer-events: none; }
@keyframes ps-reluz { 0%, 65% { left: -40px; } 100% { left: calc(100% + 20px); } }
.ritmo .r.passe-pill .ps-ico { width: 32px; height: 32px; margin: -6px -3px; image-rendering: pixelated; filter: drop-shadow(0 1px 0 var(--ink)); animation: ps-balanca 2.6s ease-in-out infinite; }
@keyframes ps-balanca { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-1px); } }
.ps-rot-p { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.ps-rot-p > b { font: 400 8px/1.3 var(--display); color: var(--gold-lit); letter-spacing: .04em; text-transform: uppercase; }
.ps-rot-p > small { font: 700 11px var(--body); color: var(--text); }
.ritmo .r.passe-pill .ps-mn { display: inline; min-width: 0; height: auto; padding: 0; background: none; box-shadow: none; font: 700 12px var(--body); color: var(--gold-lit); }
.ritmo .r.passe-pill .ps-md i { width: 4px; height: 4px; }
.ritmo .r.passe-pill .ps-prox-n { font-weight: 700; color: var(--muted); }
.ps-coletar-txt { font: 700 13px var(--body); color: var(--gold-lit); text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 0 8px rgba(245, 201, 90, .8); animation: ps-pisca 1s ease-in-out infinite; }
@keyframes ps-pisca { 50% { opacity: .55; } }
.ritmo .r.passe-pill.tem { background: linear-gradient(#6b4a12, #3a2708); }
.ritmo .r.passe-pill .ps-tem { top: 1px; right: 1px; width: 15px; height: 15px; font-size: 10px; line-height: 15px; }
.btn.ps-coletar.ant { background: linear-gradient(#e6d6ff, #cbb8f2 45%, #8f76cc); box-shadow: 0 3px 0 #4c3b73, 0 3px 0 2px var(--ink), 0 0 14px rgba(203, 184, 242, .5); }
@media (max-width: 760px) {
  .ritmo .r.passe-pill { gap: 5px; padding: 2px 8px 2px 3px; }
  .ritmo .r.passe-pill .ps-ico { width: 24px; height: 24px; margin: -4px -2px; }
  .ritmo .r.passe-pill .ps-md { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ritmo .r.passe-pill::after, .ritmo .r.passe-pill .ps-ico, .ps-coletar-txt { animation: none; } }
/* rodada 65: a faixa de missão concluída desce para baixo da faixa do ritmo (cobria a miniatura do passe a cada missão) */
#faixas { top: 152px; }
@media (max-width: 760px) { #faixas { top: calc(var(--topo-h, 76px) + 118px); } }
body.tut-on #faixas { top: 58%; }
/* no celular a miniatura do passe sobe para a primeira linha, ao lado da prata/h (a barra das missões vai para baixo):
   na terceira linha ela ficava debaixo da lista do sino */
@media (max-width: 760px) { .ritmo .r.obj { order: 1; } }

/* ------------------------------------------------------------ rodadas 67-69: o jogo em cor de terra, cravejado de gemas
   A rodada 67 testou na janela do passe; a 68 levou a todas as janelas; na 69 o dono pediu "em tudo, tudo mesmo", para
   ver como fica. Então a paleta de terra está aqui, no :root, por cima da roxa lá do começo da folha: apagar este
   :root (e o bloco da rodada 69, no fim) devolve o roxo. O chão das janelas e do topo é terra num marrom mais claro;
   os cartões, as placas, as tabelas, os campos e as pílulas são terra escura, porque o texto e as cores das raridades
   (o roxo do Épico, o azul do Raro) só têm contraste em fundo escuro; e o retrato dos mineradores continua no fundo
   roxo escuro com a aura da raridade, que é onde o boneco aparece bem (.mc-img, .ficha .mini e .fz-m não mudaram;
   na mina, o mesmo vale para o vão escuro das galerias). As imagens (--gm-*, --gp-*, --tx-*) são desenhadas uma vez
   por psTema() em ui.js, ao montar a tela; o whitepaper não carrega o ui.js e fica só com as cores. */
:root {
  --bg: #24170d; --bg-2: #2e1d10; --surface: rgba(44, 27, 14, .9); --card: #3f2817; --card-2: #573821; --ink: #170d06;
  --border: #9a6a3e; --border-lit: #d9a868;
  --text: #fff3de; --muted: #f8e6c6; --muted-2: #f0d8ae;
  --purple: #ffe2ab; --purple-dim: #d9a868;
  --vidro: rgba(34, 21, 11, .88);
}
.painel { background: #7d593a var(--tx-terra) 0 0 / 192px 192px; border-color: var(--ink); box-shadow: 0 4px 0 var(--ink), 0 0 0 2px #c9913f, 0 0 0 4px var(--ink), 0 18px 44px rgba(0, 0, 0, .55); }
.painel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 8; background: var(--tx-cravos) 8px 0 / 192px 14px repeat-x; pointer-events: none; }
.painel-cab { position: relative; padding-bottom: 26px; border-bottom: 0; background: linear-gradient(#5e3c22, #44291a); }
.painel-cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--tx-cravos) 8px 0 / 192px 14px repeat-x; pointer-events: none; }
.painel-cab h2 { display: flex; align-items: center; gap: 10px; color: var(--gold-lit); text-shadow: 0 2px 0 var(--ink); }
.painel-cab h2::before { content: ""; flex: none; width: 22px; height: 22px; background: var(--gm-rubi) 0 0 / 22px 22px; image-rendering: pixelated; }
.painel-corpo { padding-bottom: 30px; }
/* as janelas por cima: o mesmo chão, a faixa cravejada em cima e embaixo, a moldura de ouro */
.modal-box { padding: 26px 18px 24px; border-color: #c9913f; box-shadow: 0 4px 0 var(--ink), 0 0 0 2px var(--ink), 0 18px 44px rgba(0, 0, 0, .5);
  background: var(--tx-cravos) 0 0 / 192px 14px repeat-x, var(--tx-cravos) 0 100% / 192px 14px repeat-x, #7d593a var(--tx-terra) 0 0 / 192px 192px; background-attachment: local; }
/* local: numa janela que rola, a faixa de baixo fica no fim do conteúdo, e não por cima do último cartão */
.modal-box .x { top: 18px; right: 10px; }
.sino-pop { background: #7d593a var(--tx-terra) 0 0 / 192px 192px; border-color: #c9913f; }
/* texto direto sobre a terra: uma sombra escura para ler bem */
.painel h2, .painel h3, .modal-box h2, .modal-box h3 { text-shadow: 0 2px 0 var(--ink); }
.painel h3, .modal-box h3 { color: var(--purple); }
.painel .fino, .modal-box .fino, .sino-pop .fino, .painel .muted, .modal-box .muted { text-shadow: 0 1px 0 rgba(30, 18, 9, .75); }
.painel th, .modal-box th { text-shadow: 0 1px 0 rgba(30, 18, 9, .6); }
.painel .rolar, .modal-box .rolar { background: rgba(44, 27, 14, .55); border-radius: var(--rd-xs); }
/* as chances do baú sobre uma placa escura (as cores das raridades e as apagadas depois de abrir somem na terra) */
.painel .odds, .modal-box .odds { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 3px 10px; border-radius: var(--rd-xs); background: rgba(30, 18, 9, .62); }
.painel .bau-detalhe .odds, .painel .odds-tab .odds { margin-left: 0; background: none; padding: 0; }
.modal-box .odds.revelado > span { opacity: .45; }
.modal-box .odds.revelado > span.saiu { opacity: 1; }
/* o relógio de teste do admin (era roxo) */
.painel .relogio-teste { background: #2b170c; }
/* a lista fixa do saguão da Masmorra (era roxa) */
.painel .mp-largada { background: linear-gradient(rgba(70, 45, 25, .99), rgba(58, 37, 21, .99)); }
/* a janela da coleta do passe: o mesmo chão com um brilho no meio, e os cartões em terra escura */
.modal.modal-passe .modal-box { border-color: #c9913f;
  background: var(--tx-cravos) 0 0 / 192px 14px repeat-x, var(--tx-cravos) 0 100% / 192px 14px repeat-x, radial-gradient(circle at 50% 30%, rgba(255, 214, 140, .28), rgba(255, 214, 140, 0) 60%), #7d593a var(--tx-terra) 0 0 / 192px 192px; }
.ps-ci { background: linear-gradient(#55361f, #36220f); border-color: var(--border-lit); }

/* missões concluídas: sem o apagado (a opacidade de .55 deixava o texto cinza); a linha fica verde, o texto inteiro */
.missoes li.feito { opacity: 1; border-color: rgba(169, 230, 164, .7); background: linear-gradient(rgba(36, 56, 26, .92), rgba(28, 44, 20, .92)); }
.missoes li.feito .ms-ok { color: var(--ink); }
.missoes li.feito .ms-pr { color: var(--good); }

/* ---- o passe (rodada 67, revisto na 68) */
/* o topo: uma placa de terra escura com duas gemas cravadas nos cantos */
.painel.passe-j .ps-topo { position: relative; padding: 12px 20px; background: linear-gradient(#563620, #3d2616); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px rgba(217, 168, 104, .35); }
.painel.passe-j .ps-topo::before, .painel.passe-j .ps-topo::after { content: ""; position: absolute; top: 4px; width: 14px; height: 14px; background: var(--gp-rubi) 0 0 / 14px 14px; image-rendering: pixelated; }
.painel.passe-j .ps-topo::before { left: 4px; }
.painel.passe-j .ps-topo::after { right: 4px; background-image: var(--gp-esm); }
/* o nível: uma gema lapidada num aro de ouro (topázio; rubi com o premium) */
.painel.passe-j .ps-nvbig { position: relative; width: 70px; height: 70px; background: none; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)); }
.painel.passe-j .ps-nvbig::before, .painel.passe-j .ps-nvbig::after { content: ""; position: absolute; clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); }
.painel.passe-j .ps-nvbig::before { inset: 0; background: linear-gradient(135deg, #fff0b8, #e0a83a 45%, #8a5a14); }
.painel.passe-j .ps-nvbig::after { inset: 4px;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95) 0 2px, rgba(255, 255, 255, 0) 4px),
    linear-gradient(#f9d070, #e9ac44) center / 56% 56% no-repeat,
    conic-gradient(from -22.5deg, #ffe7a0 0 45deg, #f2bd52 0 90deg, #df9e36 0 135deg, #b8741c 0 180deg, #96580f 0 225deg, #b8741c 0 270deg, #ebb04a 0 315deg, #fff0b8 0); }
.painel.passe-j .ps-nvbig.prem::after {
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95) 0 2px, rgba(255, 255, 255, 0) 4px),
    linear-gradient(#ea5c74, #d4425c) center / 56% 56% no-repeat,
    conic-gradient(from -22.5deg, #ff9aac 0 45deg, #f0607a 0 90deg, #d8405a 0 135deg, #a8243e 0 180deg, #7d1830 0 225deg, #a8243e 0 270deg, #e0506a 0 315deg, #ffb8c4 0); }
.painel.passe-j .ps-nvbig > * { position: relative; z-index: 1; }
.painel.passe-j .ps-nvbig small { color: #4a2a0c; text-shadow: none; }
.painel.passe-j .ps-nvbig b { color: #2a1608; text-shadow: 0 1px 0 rgba(255, 236, 190, .6); }
.painel.passe-j .ps-nvbig.prem small { color: #ffe2e8; }
.painel.passe-j .ps-nvbig.prem b { color: #fff3de; text-shadow: 0 2px 0 #4a0c1a; }
/* a XP: ametistas (a cor da XP no jogo), apagadas no encaixe até acender */
.painel.passe-j .ps-md.grande { gap: 7px; padding-left: 2px; }
.painel.passe-j .ps-md.grande i { width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); background: #2a170b; box-shadow: 0 0 0 1px #7a5030; }
.painel.passe-j .ps-md.grande i.on { background: linear-gradient(135deg, #f4e2ff 0 24%, #c58cff 25% 58%, #7a3fc0 59%); box-shadow: 0 0 0 1px var(--ink), 0 0 6px rgba(197, 140, 255, .75); }
/* a caverna: rocha de terra com gemas (o ladrilho), o corredor escavado, os trilhos */
.painel.passe-j .ps-trilha { background: #2a1a0e; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px #c9913f; scrollbar-color: #c9913f #3a2414; }
.painel.passe-j .ps-corredor { background-image: repeating-linear-gradient(90deg, transparent 0 10px, #5e3a1e 10px 15px), linear-gradient(#2e1c10, #4a2f1a 45%, #331f12); box-shadow: 0 -3px 0 rgba(30, 18, 9, .65), 0 3px 0 rgba(30, 18, 9, .65), 0 -7px 0 rgba(30, 18, 9, .2), 0 7px 0 rgba(30, 18, 9, .2); }
.painel.passe-j .ps-corredor::before, .painel.passe-j .ps-corredor::after { background: #b8a088; box-shadow: 0 1px 0 #2a1a0e; }
.painel.passe-j .ps-seg i { width: 4px; height: 4px; border-radius: 0; transform: rotate(45deg); background: #6a4424; }
.painel.passe-j .ps-seg i.on { background: #d7a8ff; box-shadow: 0 0 0 1px #5a2a90, 0 0 6px rgba(197, 140, 255, .9); }
.painel.passe-j .ps-no { background: #3a2416; border-color: #a0703f; color: var(--muted); }
.painel.passe-j .ps-col.prox .ps-no { border-color: var(--gold); color: var(--gold-lit); }
.painel.passe-j .ps-col.alc .ps-no { background: linear-gradient(135deg, #fff0b8, #f2b33a 50%, #b8741c); border-color: #ffe08a; color: var(--ink); }
.painel.passe-j .ps-no.ini { background: #4a2e18; border-color: #a0703f; }
/* o escuro adiante cobre a rocha e o corredor, mas não as salas nem as placas: as recompensas que ainda vão chegar
   ficam tão legíveis quanto as já alcançadas (rodada 68: o dono achou as não coletadas ofuscadas) */
.painel.passe-j .ps-escuro { z-index: 2; background: linear-gradient(90deg, rgba(26, 14, 6, 0), rgba(26, 14, 6, .45) 140px); }
/* as recompensas: placas de terra escura, um pouco mais claras que o chão escuro; as do premium em ouro, com um rubi
   cravado no meio da borda de cima */
.painel.passe-j .ps-col { z-index: 3; } /* a coluna inteira (o .ps-col tem transform, é a camada que conta) */
.painel.passe-j .ps-rec { border-color: #b07c48; background: linear-gradient(rgba(80, 51, 29, .96), rgba(56, 35, 19, .96)); box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 220, 170, .16); }
.painel.passe-j .ps-rec.prem { border-color: #e6b04a; background: linear-gradient(rgba(118, 66, 30, .97), rgba(74, 39, 17, .97)); }
.painel.passe-j .ps-rec.prem:not(.vazio)::before { content: ""; position: absolute; top: -8px; left: 50%; margin-left: -7px; width: 14px; height: 14px; z-index: 1; background: var(--gp-rubi) 0 0 / 14px 14px; image-rendering: pixelated; }
.painel.passe-j .ps-rec.ok { border-color: var(--good); }
.painel.passe-j .ps-rec.pend { border-color: var(--gold); }
.painel.passe-j .ps-rec.vazio { background: rgba(46, 28, 15, .2); border-color: rgba(58, 34, 16, .5); box-shadow: none; }
.painel.passe-j .ps-rec.prem.vazio { border-color: rgba(122, 72, 20, .5); }
.painel.passe-j .ps-rec.tranca > .ps-it { opacity: .85; filter: saturate(.85); }
.painel.passe-j .ps-it small { text-shadow: 0 1px 0 var(--ink); }
.painel.passe-j .ps-ferr { background: #2a1a0e; }

/* ------------------------------------------------------------ rodada 69: o resto da tela em terra
   O que não é janela: o fundo da página, o topo, o menu de imagens (e a gaveta no celular), a moldura da mina, as
   pílulas do ritmo, os fundos escuros atrás das janelas e do tutorial, as faixas, a entrada com Discord e o medidor.
   Os roxos fixos que restavam viraram terra; o lilás da XP (barras, a faixa de nível) ficou, que é a cor da XP. */
body.tela-jogo { background: #24170d radial-gradient(ellipse at 50% 0%, #3a2616, #24170d 70%) fixed; }
@media (min-width: 761px) {
  .topo-jogo { padding-bottom: 22px; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px #c9913f, 0 0 0 4px var(--ink);
    background: var(--tx-cravos) 0 100% / 192px 14px repeat-x, #7d593a var(--tx-terra) 0 0 / 192px 192px; }
  .topo-jogo .marca .nome { text-shadow: 0 2px 0 var(--ink); }
}
.mi { background: linear-gradient(#5a3a21, #3a2414); }
.mi:focus-visible, .mi.on { background: linear-gradient(#7a5030, #4e321d); }
@media (hover: hover) { .mi:hover { background: linear-gradient(#7a5030, #4e321d); } }
.quadro { background: #1e130b; box-shadow: 0 3px 0 var(--ink), 0 0 0 2px #c9913f, 0 0 0 4px var(--ink); }
.relogio-mini, .painel .relogio-teste { background: #2b170c; }
.painel-fundo { background: rgba(20, 11, 4, .5); }
.modal { background: rgba(20, 11, 4, .6); }
.modal.revelando { background: rgba(20, 11, 4, .55); }
.tut-furo { box-shadow: 0 0 0 9999px rgba(18, 10, 4, .64); }
.tut.leve .tut-furo { box-shadow: 0 0 0 9999px rgba(18, 10, 4, .22); }
.login { background: radial-gradient(ellipse at 50% 30%, #5a3c22, var(--bg) 70%); }
#medidor { background: rgba(24, 14, 6, .9); }
/* a miniatura do passe: terra com moldura de ouro, no lugar do roxo */
.ritmo .r.passe-pill { background: linear-gradient(#6e4627, #3e2715); box-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(245, 201, 90, .3); }
/* as faixas: terra escura; a do passe com o ouro, a de nível com o lilás da XP */
.faixa.faixa-passe { background: linear-gradient(#5a3a21, #2e1d10); border-color: var(--gold); box-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(245, 201, 90, .3); }
.faixa.faixa-passe small { color: var(--gold); }
.faixa.faixa-nivel { background: linear-gradient(#4a3020, #2a1a0e); }
.nh-niveis .on { background: #3a2416; }
@media (max-width: 760px) {
  .topo-jogo { background: linear-gradient(rgba(36, 22, 11, .94), rgba(36, 22, 11, .55)); }
  .menu { background: #7d593a var(--tx-terra) 0 0 / 192px 192px; border-right-color: var(--ink); box-shadow: 3px 0 0 var(--ink), 5px 0 0 #c9913f; }
  .menu-cab b { text-shadow: 0 2px 0 var(--ink); }
  body.menu-aberto .menu-fundo { background: rgba(20, 11, 4, .62); }
}

/* rodada 87: o câmbio entre ofertas */
.cb-of .linha { gap: 6px; flex-wrap: nowrap; }
/* rodada 90: busca e ordem nas listas de compra do mercado */
.merc-busca { gap: 8px; margin: 0 0 10px; flex-wrap: nowrap; }
.merc-busca input[type="search"] { flex: 1; min-width: 0; }
.merc-busca select { flex: 0 0 auto; }
.cb-k { width: 76px; }

/* rodada 94/96: o vale de herói, o ingresso do passe (14x10) na cor da raridade */
img.vale-ico, .vale-mini { image-rendering: pixelated; }
.mint-linha > img.vale-ico { width: 42px; height: 30px; }
.vale-linha { border-color: var(--rc, var(--border)); }
.mint-linhas.vales { margin-bottom: 10px; }
.ps-it img.vale-ico { width: 34px; height: 24px; margin: 4px 0 5px; }
.ps-ci-ico img.vale-ico { width: 49px; height: 35px; }
.vantagens img.vale-ico { width: 34px; height: 24px; object-fit: contain; }
/* abrindo: treme a cada clique; no fim o canhoto (à direita, depois do picote) rasga e cai, e o corpo brilha */
.vale-anim { position: relative; display: flex; width: 140px; height: 100px; margin: 12px auto 10px; cursor: pointer; outline: none; user-select: none; filter: drop-shadow(0 0 calc(var(--brilho, 0) * 16px) rgba(255, 220, 120, calc(var(--brilho, 0) * .9))); }
.vale-anim:focus-visible { box-shadow: 0 0 0 2px var(--gold); border-radius: var(--rd-sm); }
.vale-anim img { display: block; height: 100px; image-rendering: pixelated; }
.vale-corpo { width: 100px; }
.vale-canhoto { width: 40px; transform-origin: 0 50%; transition: transform .45s ease-in, opacity .45s ease-in; }
.vale-anim.rasga .vale-canhoto { transform: translate(5px, 3px) rotate(10deg); }
.vale-anim.aberto { filter: drop-shadow(0 0 20px var(--cor, #ffe08a)); }
.vale-anim.aberto .vale-canhoto { transform: translate(40px, 60px) rotate(75deg); opacity: 0; }
/* a fusão que mantém a raridade: os vales sobem da bigorna */
.fz-vales { position: absolute; left: 0; right: 0; top: 30px; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.fz-vales img { width: 56px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 0 8px var(--cor, #ffe08a)); animation: nasce .5s ease-out both; }
.vales-rev { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0; }
.vales-rev img { width: 84px; height: 60px; animation: nasce .5s ease-out both; }
.vales-txt { text-align: center; margin: 4px 0 8px; }
/* rodada 95: a saída da fusão alinhada: a chance numa coluna à esquerda, depois a raridade (e "x2" com o vale) */
.fz-ch > b { min-width: 3.2em; text-align: right; }
.fz-ch > em { font-style: normal; font-weight: 700; color: var(--text); margin-left: -2px; }
/* o vale um pouco inclinado, em todo lugar; na mesa da fusão, pequeno */
img.vale-ico, .vale-mini, .vale-anim, .fz-vales img { transform: rotate(-12deg); }
.vale-mini { width: 21px; height: 15px; margin-left: -2px; }
.vale-anim.treme { animation: treme-vale .18s linear; }
@keyframes treme-vale { 0%, 100% { transform: rotate(-12deg); } 25% { transform: translateX(-5px) rotate(-16deg); } 75% { transform: translateX(5px) rotate(-8deg); } }
.vale-anim.aberto { animation: abre-vale .6s ease-out 1; }
@keyframes abre-vale { 0%, 100% { transform: rotate(-12deg); } 40% { transform: rotate(-12deg) scale(1.18); } }
/* rodada 96: o balão da dica no toque, acima das janelas */
.dica-toque { z-index: 130; }
/* rodada 99: a sacola misteriosa. Abre com 3 cliques, como o baú, e gira uma roleta que freia no que saiu */
.sac-anim { position: relative; width: 112px; height: 120px; margin: 10px auto 6px; cursor: pointer; outline: none; user-select: none; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 calc(8px + var(--brilho, 0) * 18px) rgba(200, 107, 250, calc(.35 + var(--brilho, 0) * .5))); }
.sac-anim img { width: 98px; height: 105px; image-rendering: pixelated; }
.sac-anim:focus-visible { box-shadow: 0 0 0 2px var(--gold); border-radius: var(--rd-sm); }
.sac-anim.treme { animation: treme .18s linear; }
.sac-anim[hidden], .sac-roleta[hidden] { display: none; }
.sac-roleta { position: relative; height: 92px; margin: 10px 0 12px; overflow: hidden; border-radius: var(--rd-sm); background: #15111d; box-shadow: inset 0 0 0 2px var(--border), inset 0 0 24px #000;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.sac-trilho { position: absolute; left: 0; top: 10px; display: flex; will-change: transform; }
.sac-it { flex: none; width: 66px; height: 72px; margin-right: 6px; border-radius: var(--rd-xs); background: #221c2c; box-shadow: inset 0 -3px 0 var(--rc, #6a5a80), inset 0 0 0 2px #2e2638;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sac-it img { width: 32px; height: 32px; image-rendering: pixelated; }
.sac-it small { font-size: 10px; font-weight: 700; color: var(--rc, var(--muted)); white-space: nowrap; }
.sac-it.t1, .sac-it.t2, .sac-it.t3, .sac-it.t4 { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 30%, transparent), #221c2c 70%); }
.sac-it.sac-bau { --rc: #c79a5a; }
.sac-it.sac-fr { --rc: #9fd0e8; }
.sac-it.vence { box-shadow: inset 0 -3px 0 var(--rc), 0 0 0 2px var(--gold), 0 0 18px var(--rc, var(--gold)); animation: sac-vence .6s ease-out; }
@keyframes sac-vence { 40% { transform: scale(1.12); } }
.sac-marca { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.sac-marca::before, .sac-marca::after { content: ""; position: absolute; left: -5px; border: 6px solid transparent; }
.sac-marca::before { top: 0; border-top-color: var(--gold); }
.sac-marca::after { bottom: 0; border-bottom-color: var(--gold); }
.sac-ch { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin: 0 0 10px; font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums;
  padding: 6px 8px; border-radius: var(--rd-xs); background: rgba(12, 9, 18, .45); }
.sac-ch > span { transition: opacity .3s; white-space: nowrap; }
.sac-ch b { color: var(--rc, var(--text)); }
.sac-ch .bau { --rc: #c79a5a; } .sac-ch .fr { --rc: #9fd0e8; }
.sac-ch.revelado > span { opacity: .3; }
.sac-ch.revelado > span.saiu { opacity: 1; }
.sac-res { text-align: center; margin: 0 0 10px; }
.sac-res .fc { text-align: left; }
#sac-depois { text-align: center; }
#sac-depois[hidden] { display: none; }
#sac-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mint-linha > img.sac-ico { width: 28px; height: 30px; }
/* rodada 100: o nível no saguão da Masmorra cabe numa linha: ◀ [lista] ▶ e "Mais fundo" */
.mp-nvsel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-nvsel select { height: 36px; min-width: 150px; padding: 0 8px; border: 2px solid var(--gold); border-radius: var(--rd-sm); background: var(--surface); color: var(--gold-lit); font-weight: 700; font-size: 14px; }
.mp-nvsel .mp-nv[disabled] { opacity: .35; cursor: default; }
@media (max-width: 760px) {
  .mp-largada { gap: 6px; padding: 10px 12px 8px; }
  .mp-lg-rot { min-width: 0; }
  .mp-lg-chefe { font-size: 12px; flex-basis: 100%; }
  .mp-nvsel select { flex: 1; min-width: 0; }
}
/* rodada 101: a faixa de atualização, no alto, por cima de tudo menos as janelas de login */
.att { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 20px);
  padding: 10px 14px; border-radius: var(--rd-sm); background: #2b1d10; border: 2px solid var(--gold); box-shadow: 0 6px 24px rgba(0, 0, 0, .6); color: var(--text); font-size: 13px; }
.att small { color: var(--muted); }
@media (max-width: 760px) { .att { top: auto; bottom: 74px; flex-wrap: wrap; justify-content: center; text-align: center; } }

/* rodada 105: o Tião no balão das janelas (Masmorra, Fusão, Mercado) e o botão que o chama de novo */
.mp-guia-tit .guia-npc { width: 30px; height: 46px; image-rendering: pixelated; flex: none; filter: drop-shadow(0 2px 0 var(--ink)); }
.mp-guia-tit > span { display: flex; flex-direction: column; min-width: 0; }
.mp-guia-tit .tut-nome { font-size: 10px; }
.tiao-bt { white-space: nowrap; flex: none; }
.merc-topo { align-items: flex-start; gap: 8px; }
/* rodada 106: o rank da Masmorra, um escudo lapidado à direita do topo do saguão (a gema do nível do passe em
   forma de escudo), e a lista de mineradores mais enxuta */
.mp-largada { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.mp-largada > .mp-lg-lin { grid-column: 1; }
.mp-rank { grid-column: 2; grid-row: 1 / span 3; align-self: center; position: relative; width: 80px; height: 94px; cursor: help; flex: none; }
.mp-rank, .rk-mini {
  --rka: #f0c49a; --rkb: #b8733c; --rkc: #6a3a18; --rp1: #d48a4c; --rp2: #b8703a;
  --f1: #ffd2a6; --f2: #e09a5e; --f3: #c87e42; --f4: #9a5a26; --f5: #7a4218; --f6: #9a5a26; --f7: #cc8448; --f8: #f6c08c; --rn: #f0b47e; }
.mp-rank > * { position: absolute; }
.mp-rank .rk-esc, .mp-rank .rk-asa, .mp-rank .rk-coroa { filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)); }
.mp-rank .rk-esc { left: 12px; top: 12px; width: 56px; height: 64px; z-index: 2; display: grid; place-content: center; justify-items: center; padding-bottom: 6px; line-height: 1; }
.rk-esc::before, .rk-esc::after, .rk-mini::before, .rk-mini::after { content: ""; position: absolute; clip-path: polygon(50% 0, 100% 12%, 100% 54%, 84% 80%, 50% 100%, 16% 80%, 0 54%, 0 12%); }
.rk-esc::before, .rk-mini::before { inset: 0; background: linear-gradient(135deg, var(--rka), var(--rkb) 45%, var(--rkc)); }
.rk-esc::after, .rk-mini::after { inset: 4px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .95) 0 2px, rgba(255, 255, 255, 0) 4px),
    linear-gradient(var(--rp1), var(--rp2)) 50% 44% / 50% 46% no-repeat,
    conic-gradient(from -22.5deg at 50% 44%, var(--f1) 0 45deg, var(--f2) 0 90deg, var(--f3) 0 135deg, var(--f4) 0 180deg, var(--f5) 0 225deg, var(--f6) 0 270deg, var(--f7) 0 315deg, var(--f8) 0); }
.rk-esc > * { position: relative; z-index: 1; color: #fff; text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 0 2px 0 var(--ink); }
.rk-esc small { font: 700 8px var(--body); text-transform: uppercase; letter-spacing: .08em; }
.rk-esc b { font: 400 16px/1.25 var(--display); margin-top: 2px; }
.rk-esc b.l3 { font-size: 11px; }
.mp-rank .rk-nome { left: -6px; right: -6px; top: 78px; text-align: center; font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--rn); white-space: nowrap; z-index: 3;
  text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 0 2px 0 var(--ink); }
.mp-rank .rk-g { width: 7px; height: 7px; background-size: 7px 7px; image-rendering: pixelated; z-index: 4; }
.mp-rank .rk-g.g { width: 14px; height: 14px; background-size: 14px 14px; }
/* as asas (Platina para cima) e a coroa (Diamante para cima), atrás e em cima do escudo */
.mp-rank .rk-asa { top: 22px; width: 16px; height: 40px; z-index: 1; }
.mp-rank .rk-asa.e { left: 0; }
.mp-rank .rk-asa.d { right: 0; transform: scaleX(-1); }
.rk-asa::before, .rk-coroa::before { content: ""; position: absolute; inset: 0; }
.rk-asa::before { background: linear-gradient(160deg, var(--rka), var(--rkb) 50%, var(--rkc));
  clip-path: polygon(100% 0, 100% 100%, 70% 88%, 40% 96%, 46% 76%, 8% 80%, 24% 60%, 0 54%, 22% 38%, 4% 26%, 34% 18%, 30% 4%); }
.mp-rank .rk-coroa { left: 24px; top: 0; width: 32px; height: 15px; z-index: 3; }
.rk-coroa::before { background: linear-gradient(var(--rka), var(--rkb) 55%, var(--rkc)); clip-path: polygon(0 100%, 0 18%, 25% 58%, 50% 0, 75% 58%, 100% 18%, 100% 100%); }
.mp-rank .rk-brilho { left: -4px; top: 2px; width: 88px; height: 84px; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, var(--rg, rgba(120, 200, 255, .55)), transparent); animation: rk-pulsa 2.2s ease-in-out infinite; }
@keyframes rk-pulsa { 50% { opacity: .45; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .mp-rank .rk-brilho { animation: none; } }
/* cada rank: o aro de metal (ra, rb, rc), as facetas (f1..f8), o miolo (rp1, rp2) e a cor do nome */
.mp-rank.t0, .rk-mini.t0 { --rka: #b8b0a4; --rkb: #6e665c; --rkc: #3a342e; --rp1: #7a7268; --rp2: #625a50; --f1: #a8a096; --f2: #8a8278; --f3: #7a7268; --f4: #5e564e; --f5: #4a443c; --f6: #5e564e; --f7: #847c72; --f8: #9a9288; --rn: #b8b0a4; }
.mp-rank.t0 { opacity: .8; }
.mp-rank.t2, .rk-mini.t2 { --rka: #ffffff; --rkb: #b8c0cc; --rkc: #5c6470; --rp1: #d8dee8; --rp2: #b0b8c4; --f1: #ffffff; --f2: #d8e0ea; --f3: #bcc4d0; --f4: #8a94a2; --f5: #6a7280; --f6: #8a94a2; --f7: #c4ccd8; --f8: #f4f8ff; --rn: #e4ebf4; }
.mp-rank.t3, .rk-mini.t3 { --rka: #fff0b8; --rkb: #e0a83a; --rkc: #8a5a14; --rp1: #f9d070; --rp2: #e9ac44; --f1: #ffe7a0; --f2: #f2bd52; --f3: #df9e36; --f4: #b8741c; --f5: #96580f; --f6: #b8741c; --f7: #ebb04a; --f8: #fff0b8; --rn: #ffd76a; }
.mp-rank.t4, .rk-mini.t4 { --rka: #ffffff; --rkb: #a8d8dc; --rkc: #3e6a72; --rp1: #d4f2f2; --rp2: #a4d6da; --f1: #f4ffff; --f2: #c8ecec; --f3: #a6d8dc; --f4: #7cb4bc; --f5: #5a8e98; --f6: #7cb4bc; --f7: #b8e4e6; --f8: #ffffff; --rn: #c8f0f0; }
.mp-rank.t5, .rk-mini.t5 { --rka: #ffffff; --rkb: #cfe4ff; --rkc: #4a6aa8; --rp1: #a8dcff; --rp2: #6cbcf6; --f1: #f2fbff; --f2: #9fd8ff; --f3: #6cbcf6; --f4: #3f8ee0; --f5: #2a64b8; --f6: #3f8ee0; --f7: #86ccff; --f8: #e8f6ff; --rn: #9fd8ff; --rg: rgba(120, 200, 255, .55); }
.mp-rank.t6, .rk-mini.t6 { --rka: #fff0b8; --rkb: #e0a83a; --rkc: #8a5a14; --rp1: #e23a32; --rp2: #b81e1a; --f1: #ff9c88; --f2: #ec4a3c; --f3: #cc2a22; --f4: #961410; --f5: #6a0a08; --f6: #961410; --f7: #d8342a; --f8: #ff7a66; --rn: #ffd76a; --rg: rgba(255, 90, 90, .6); }
/* o Herói: asas e coroa de ouro, e o nome numa fita vermelha */
.mp-rank.t6 .rk-asa::before { background: linear-gradient(160deg, #ff8a74, #cc2a22 45%, #6a0a08); }
.mp-rank.t6 .rk-nome { left: 2px; right: 2px; top: 77px; padding: 1px 0 2px; background: linear-gradient(#d8342a, #961410); border: 2px solid #e0a83a; border-radius: 3px; box-shadow: 0 2px 0 var(--ink); }
/* o escudinho do ranking */
.rk-mini { position: relative; display: inline-block; width: 14px; height: 16px; margin-right: 5px; vertical-align: -3px; filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)); }
.rk-mini::after { inset: 2px; }
@media (max-width: 760px) {
  /* no celular o escudo fica ao lado do nível e de quem vai; o botão de descer ocupa a largura toda */
  .mp-largada > .mp-lg-lin:nth-child(3) { grid-column: 1 / -1; }
  .mp-rank { grid-row: 1 / span 2; transform: scale(.8); margin: -9px -8px; }
}
/* a lista de mineradores, mais enxuta: retrato de 21 × 28 (o 30 × 40 da miniatura em 0,7), linha de ~34 px */
.mp-lista-tit { margin: 2px 0 4px; font-size: 12px; }
.mp-lista { gap: 3px; }
.mp-lin { padding: 1px 8px; gap: 8px; grid-template-columns: 21px 1fr auto; font-size: 13px; }
.mp-lin img { width: 21px; height: 28px; }
.mp-lin .pill { font-size: 9px; padding: 1px 5px; }
.mp-lin-a { gap: 7px; font-size: 11px; }
@media (max-width: 480px) { .mp-lin { grid-template-columns: 21px 1fr; gap: 0 8px; padding: 2px 8px; } }

/* rodada 106: pular o tutorial (no balão do Tião) e o aviso */
.tut-pular { pointer-events: auto; align-self: flex-start; margin-top: 6px; padding: 2px 8px; font: 700 11px var(--body); color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: var(--rd-xs); cursor: pointer; }
.tut-pular:hover, .tut-pular:focus-visible { color: var(--text); border-color: var(--gold); }
.aviso-pular { border: 2px solid var(--bad-text, #f2a9a0); background: rgba(242, 169, 160, .1); border-radius: var(--rd-sm); padding: 10px 12px; }
.aviso-pular > b { color: var(--bad-text, #f2a9a0); }
.aviso-pular ul { margin: 6px 0 0; padding-left: 18px; }
.aviso-pular li { margin: 3px 0; }
.tut.sem-pular .tut-pular { display: none; }

/* rodada 116: o topo do celular em duas faixas (pedido do dono, só no celular). O Museu sai do topo e vai para o
   menu lateral; a prata/h sai da faixa e vira a etiqueta "+N/h" embaixo do saldo de prata (tocar no saldo abre o
   painel da renda); o passe perde a palavra "Passe" (o bilhete diz) e o objetivo perde o texto (fica o alvo, a
   barrinha, o n/meta e o "hoje n/3"). No computador nada muda: a etiqueta e o item do menu ficam escondidos. */
.moeda .m-h, .menu .mi.so-cel { display: none; }
@media (max-width: 760px) {
  .menu .mi.so-cel { display: flex; }
  .moeda.museu-pill, .ritmo .r.renda { display: none; }
  .moeda.m-prata-p { cursor: pointer; }
  .moeda .m-h { display: block; position: absolute; left: 22px; bottom: -11px; z-index: 1; font: 700 10px/13px var(--body); color: var(--good); background: var(--surface); border: 1px solid var(--ink); border-radius: 3px; padding: 0 4px; white-space: nowrap; pointer-events: none; }
  .moeda .m-h.cheio { color: var(--gold-lit); }
  .topo-jogo { padding-bottom: 10px; }
  .ritmo { max-width: calc(100% - 66px); }
  .ritmo .r.obj span { display: none; }
  .ritmo .r.obj .obj-barra { width: 34px; }
  .ritmo .r.passe-pill .ps-rot-p > b { display: none; }
}

/* rodada 118: Minhas ofertas: quantos anúncios no ar e as vendas recentes (as novas em destaque) */
.merc-lim { margin: 10px 0 0; }
.chip .merc-novas { display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 4px; border-radius: 8px; background: var(--red, #e2463c); color: #fff; font: 700 10px/16px var(--body); font-style: normal; text-align: center; }
.merc-vendas { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.merc-vendas li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--rd-sm, 6px); }
.merc-vendas li.novo { border-color: var(--gold); box-shadow: 0 0 8px rgba(245, 201, 90, .35); }
.merc-vendas .ico-f, .merc-vendas .mv-ico { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
.merc-vendas .mv-ico svg, .merc-vendas .mv-ico img, .merc-vendas .mv-ico canvas { width: 24px; height: 24px; }
.merc-vendas .mv-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.merc-vendas .mv-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merc-vendas .mv-txt small { color: var(--muted); font-size: 11px; }
.merc-vendas .mv-txt em { color: var(--gold-lit); font-style: normal; font-weight: 700; }
.merc-vendas .mv-p { display: inline-flex; align-items: center; gap: 3px; color: var(--good); white-space: nowrap; }
.merc-vendas .mv-p .ico-p { width: 16px; height: 16px; }

/* rodada 121: durante o Veio ou um lance, toque em qualquer lugar conta: sem zoom de toque duplo, sem rolar, sem menu de
   toque longo (a janela e o fundo também, porque o corpo da janela é um contêiner de rolagem) */
body.jogo-toque, body.jogo-toque .painel-corpo, body.jogo-toque #painel-fundo { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* rodada 121: a Masmorra com o celular deitado. Numa tela baixa, a descida ocupa a tela inteira: o mapa à direita, na
   altura toda (4:3), e a barra, as mensagens e os botões numa coluna à esquerda. O saguão fica como sempre (só a janela
   com o mapa, :has(#mp-cv), muda) */
@media (max-height: 500px) and (orientation: landscape) {
  .painel.mp-j:has(#mp-cv) { position: fixed; inset: 0; margin: 0; width: auto; height: 100vh; height: 100dvh; max-height: none; z-index: 44; border-radius: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .painel.mp-j:has(#mp-cv) .painel-cab { padding: 4px 10px; }
  .painel.mp-j:has(#mp-cv) .painel-cab::after { display: none; }
  .painel.mp-j:has(#mp-cv) .painel-cab h2 { font-size: 12px; }
  .painel.mp-j:has(#mp-cv) .painel-corpo { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 10px; padding: 6px 10px; overflow: hidden; }
  .painel.mp-j:has(#mp-cv) .mp-quadro { grid-column: 2; grid-row: 1 / span 3; margin: 0; max-width: none; height: calc(100dvh - 54px); aspect-ratio: 4 / 3; width: auto; align-self: start; }
  .painel.mp-j:has(#mp-cv) .mp-quadro canvas { width: 100%; height: 100%; }
  .painel.mp-j:has(#mp-cv) #mp-info { grid-column: 1; grid-row: 1; margin-bottom: 4px; gap: 4px 10px; }
  .painel.mp-j:has(#mp-cv) #mp-msg { grid-column: 1; grid-row: 2; height: auto; max-height: 60px; margin-top: 0; }
  .painel.mp-j:has(#mp-cv) #mp-acao { grid-column: 1; grid-row: 3; margin-top: 6px; min-height: 0; overflow-y: auto; align-self: start; max-height: 100%; }
  .painel.mp-j:has(#mp-cv) #mp-acao .mp-grande { width: 100%; }
  /* no layout de celular a janela mora dentro do quadro da mina, debaixo do topo e do botão Menu: com a descida na tela, eles saem */
  body:has(.painel.mp-j:not([hidden]) #mp-cv) .topo-jogo, body:has(.painel.mp-j:not([hidden]) #mp-cv) .bt-menu, body:has(.painel.mp-j:not([hidden]) #mp-cv) #medidor { display: none; }
}

/* rodada 122: a Trupe. No item do menu, quantos da trupe estão online (verde, só quando há alguém); na janela, o
   convite, entrar ou criar, e o ranking simples */
.mi .mi-on { position: absolute; top: 4px; left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #5fd35f; color: #0b1a0b; border: 1px solid var(--ink); font: 700 10px/14px var(--body); font-style: normal; text-align: center; pointer-events: none; }
@media (max-width: 760px) { .mi .mi-on { top: 50%; left: auto; right: 36px; margin-top: -8px; } }
.tp-convite { margin-bottom: 14px; }
.tp-convite .linha { margin-top: 8px; }
.tp-bloco { margin-bottom: 16px; }
.tp-bloco h3 { margin: 0 0 6px; }
.tp-bloco .linha { flex-wrap: nowrap; }
.tp-bloco .linha input { flex: 1; min-width: 0; }
.tp-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-tit b { display: block; font-size: 17px; color: var(--gold-lit); }
.tp-tit small { color: var(--muted); }
.tp-conv { display: flex; align-items: center; gap: 6px; }
.tp-cod { font: 700 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; background: var(--surface); color: var(--gold-lit); border: 2px dashed var(--gold-dim); border-radius: var(--rd-xs); padding: 4px 8px; cursor: pointer; }
.tp-tab { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.tp-tab th, .tp-tab td { padding: 5px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.tp-tab th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tp-tab th:first-child { width: 2.2em; }
.tp-tab th.n { width: 5.2em; }
.tp-tab th:last-child:empty { width: 2.6em; }
.tp-tab .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-ord { cursor: pointer; user-select: none; -webkit-user-select: none; }
.tp-ord.on { color: var(--gold-lit); }
.tp-tab tr.eu td { background: rgba(245, 201, 90, .1); }
.tp-pos { color: var(--muted); }
.tp-quem { overflow: hidden; white-space: nowrap; }
.tp-nm { display: inline-flex; flex-direction: column; vertical-align: middle; max-width: calc(100% - 16px); }
.tp-nm b { overflow: hidden; text-overflow: ellipsis; }
.tp-nm small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.tp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6b5a48; border: 1px solid var(--ink); margin-right: 6px; vertical-align: middle; }
.tp-dot.on { background: #5fd35f; box-shadow: 0 0 6px #5fd35f; }
.tp-tirar { padding: 1px 7px; }
.tp-pe { margin-top: 12px; }
.tp-tab .tp-ct { display: none; }
@media (max-width: 480px) { .tp-tab { font-size: 12px; } .tp-tab th, .tp-tab td { padding: 5px 3px; } .tp-tab th.n { width: 4.6em; } .tp-tab th { font-size: 10px; letter-spacing: 0; } .tp-tab .tp-lg { display: none; } .tp-tab .tp-ct { display: inline; } }
/* rodada 134: o chat da trupe. O balão fica no pé da janela (pregado ao rolar); a conversa troca o ranking */
.tp-bolha-pe { position: sticky; bottom: 0; display: flex; justify-content: flex-end; pointer-events: none; margin-top: 10px; }
.tp-bolha { pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; background: var(--gold); color: var(--ink); font: 700 13px system-ui, sans-serif; text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 3px 0 var(--gold-dim), 0 3px 0 2px var(--ink); cursor: pointer; }
.tp-bolha:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-dim), 0 1px 0 2px var(--ink); }
.tp-bolha img { width: 32px; height: 32px; image-rendering: pixelated; }
.tp-bolha-n { position: absolute; top: -9px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #d9413a; color: #fff; border: 2px solid var(--ink); font: 700 11px/16px system-ui, sans-serif; font-style: normal; text-align: center; }
.tp-chat-lista { height: min(calc(100vh - 420px), 430px); min-height: 180px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: rgba(0, 0, 0, .28); border: 2px solid var(--border); border-radius: var(--rd-sm); }
.tp-chat-vazio { margin: auto; text-align: center; }
.tp-msg { display: flex; }
.tp-msg.meu { justify-content: flex-end; }
.tp-msg-b { max-width: 82%; padding: 5px 9px 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px 10px 10px 2px; font-size: 13px; overflow-wrap: anywhere; }
.tp-msg.meu .tp-msg-b { background: rgba(245, 201, 90, .16); border-color: var(--gold-dim); border-radius: 10px 10px 2px 10px; }
.tp-msg-b b { display: block; font-size: 12px; }
.tp-msg-t { color: var(--text); white-space: pre-wrap; }
.tp-msg-b small { display: flex; justify-content: flex-end; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; margin-top: 1px; }
.tp-msg-x { background: none; border: 0; color: var(--muted); font-size: 11px; padding: 0 2px; cursor: pointer; opacity: .55; }
.tp-msg-x:hover, .tp-msg-x:focus-visible { opacity: 1; color: var(--bad-text, #f2a9a0); }
.tp-msg.sis { justify-content: center; align-items: baseline; gap: 5px; text-align: center; font-size: 11px; color: var(--muted); font-style: italic; }
.tp-msg.sis small { font-style: normal; opacity: .8; }
.tp-chat-envia { display: flex; gap: 6px; margin-top: 8px; }
.tp-chat-envia input { flex: 1; min-width: 0; }
/* no botão da Trupe: um balãozinho de fala com o número de mensagens não lidas */
.mi .mi-chat { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 17px; padding: 0 5px; border-radius: 9px 9px 9px 2px; background: #f7eedd; color: var(--ink); border: 2px solid var(--ink); font: 700 10px/13px var(--body); font-style: normal; text-align: center; pointer-events: none; z-index: 1; animation: entra .25s ease-out; }
.mi .mi-chat::after { content: ""; position: absolute; left: 1px; bottom: -6px; border: 3px solid transparent; border-top-color: var(--ink); border-left-color: var(--ink); }
.mi .mi-chat[hidden] { display: none; }
@media (max-width: 760px) { .mi .mi-chat { top: 50%; right: 62px; margin-top: -11px; } }
/* rodada 136: no celular a conversa ocupa a janela inteira, a lista estica e o campo fica sempre embaixo, à vista.
   Com o teclado aberto (body.teclado, medido pelo visualViewport em ui.js) a janela encolhe para a parte da tela
   que sobra acima do teclado, cobrindo o topo do jogo: antes o teclado tampava o campo de digitar */
.tp-chat-envia input { border: 2px solid var(--gold-dim); background: rgba(20, 12, 6, .85); }
.tp-chat-envia input:focus { border-color: var(--gold); outline: none; }
@media (max-width: 760px) {
  .tp-chat-envia input { font-size: 16px; }
  .painel:has(#tp-chat-lista) { height: auto; max-height: none; margin: 0; }
  .painel:has(#tp-chat-lista) .painel-corpo { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; padding: 8px 10px 22px; }
  .painel:has(#tp-chat-lista) .tp-topo, .painel:has(#tp-chat-lista) .tp-abas-l, .painel:has(#tp-chat-lista) .tp-convite { flex: none; }
  .painel:has(#tp-chat-lista) .tp-abas-l { margin: 6px 0 8px; }
  .painel:has(#tp-chat-lista) .tp-chat-lista { flex: 1 1 auto; height: auto; min-height: 60px; }
  .painel:has(#tp-chat-lista) .tp-chat-envia { flex: none; }
  body.teclado .painel:has(#tp-chat-lista) { top: calc(var(--vvt, 0px) + 4px); bottom: auto; height: calc(var(--vvh, 100dvh) - 8px); z-index: 70; animation: none; }
  body.teclado .painel:has(#tp-chat-lista) .painel-cab { display: none; }
  body.teclado:has(#tp-chat-lista) .topo-jogo, body.teclado:has(#tp-chat-lista) #bt-menu { visibility: hidden; }
  body.teclado .painel:has(#tp-chat-lista) .painel-corpo { padding-top: 6px; }
  body.teclado .painel:has(#tp-chat-lista) .tp-topo, body.teclado .painel:has(#tp-chat-lista) .tp-convite { display: none; }
  body.teclado .painel:has(#tp-chat-lista) .tp-abas-l { margin-top: 0; }
}
/* rodada 124: o pacote de iniciante, na janela de coleta do passe */
.ps-coleta .pc-ini { position: relative; margin: -6px 0 12px; font-size: 13px; color: var(--text); text-shadow: 0 1px 0 var(--ink); }

/* ---------------------------------------------------------------- rodada 137: as expedições da trupe e a trupe aberta */
.tp-abas { margin: 10px 0 12px; }
.tp-aba-n { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #d9413a; color: #fff; font: 700 11px/18px system-ui, sans-serif; font-style: normal; text-align: center; }
.ex-topo { margin-bottom: 6px; }
.ex-lista { display: grid; gap: 10px; }
.ex-card { padding: 10px 12px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-sm); }
.ex-card.minha { border-color: var(--gold-dim); }
.ex-card.resgatar { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 201, 90, .25); }
.ex-card.ex-cancelada { opacity: .65; }
.ex-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ex-cab > b { font-size: 15px; }
.ex-cab > :last-child { margin-left: auto; }
.ex-barra { display: block; height: 6px; margin: 6px 0 2px; background: rgba(0, 0, 0, .35); border-radius: 3px; overflow: hidden; }
.ex-barra u { display: block; height: 100%; background: var(--gold); }
.ex-vagas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin: 8px 0; }
.ex-vaga { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 7px; background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: var(--rd-xs); }
.ex-vaga.vazia { border-style: dashed; }
.ex-vaga.eu { border-color: var(--gold-dim); }
.ex-vaga .ico16 { width: 14px; height: 14px; vertical-align: -2px; }
/* rodada 145: a raridade dos heróis nas telas da expedição. O retrato vai no soquete escuro com a aura da raridade
   (o mesmo dos cartões da Equipe); a vaga ocupada, a linha de escolha e o cartão do time levam a cor na borda e no nome */
.ex-retr { flex: none; display: inline-flex; align-items: flex-end; justify-content: center; width: 30px; height: 40px; border-radius: 4px; overflow: hidden;
  background: radial-gradient(ellipse 72% 64% at 50% 64%, color-mix(in srgb, var(--rc, #6a5a50) var(--aura, 0%), transparent), transparent 72%), #1d1825; }
.ex-retr img { width: 30px; height: 40px; image-rendering: pixelated; }
.ex-vaga.cheia { border-color: color-mix(in srgb, var(--rc) 70%, var(--border)); border-left: 4px solid var(--rc); }
.ex-vaga.cheia .ex-hn, .ex-h .ex-vq > b, .ex-tm > b { color: var(--rc, var(--text)); }
.ex-vaga.eu { box-shadow: 0 0 0 1px var(--gold-dim) inset; }
.ex-rar { color: var(--rc); font-weight: 700; }
.ex-h[class*=" t"] { border-left: 5px solid var(--rc); }
.ex-h.sel { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, var(--surface)); box-shadow: 0 0 0 1px var(--rc), 0 0 12px -2px var(--rc); }
.ex-h.sel .ex-vq > b::after { content: " ✓"; }
.ex-h.t3, .ex-h.t4 { box-shadow: 0 0 8px -4px var(--rc); }
.ex-time { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 168px)); gap: 6px; margin: 6px 0 10px; }
.ex-tm { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 4px; text-align: center; background: rgba(0, 0, 0, .25); border: 2px solid color-mix(in srgb, var(--rc, var(--border)) 75%, var(--border)); border-radius: var(--rd-xs); }
.ex-tm.t2 { box-shadow: 0 0 8px -3px var(--rc); } .ex-tm.t3 { box-shadow: 0 0 12px -3px var(--rc); } .ex-tm.t4 { box-shadow: 0 0 14px -2px var(--rc); }
.ex-tm.eu { outline: 2px solid var(--gold-dim); outline-offset: 1px; }
.ex-tm.vazia { border-style: dashed; border-color: var(--border); }
.ex-tm.vazia > b { color: var(--muted); font-weight: 600; }
.ex-tm.alvo { border-color: var(--gold); border-style: solid; background: rgba(245, 201, 90, .1); }
.ex-tm.alvo > b { color: var(--gold); }
.ex-tm > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ex-tm small { color: var(--muted); font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-tm .ex-retr { width: 36px; height: 48px; } .ex-tm .ex-retr img { width: 36px; height: 48px; }
@media (max-width: 520px) { .ex-time { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); } }
.ex-vq { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ex-vq b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ex-vq small { color: var(--muted); font-size: 11px; }
.ex-atr { flex: none; display: inline-block; min-width: 30px; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--ink); font: 700 10px/14px system-ui, sans-serif; text-align: center; color: #1a1020; }
.ex-atr.ex-F { background: #f2a9a0; } .ex-atr.ex-S { background: #a9e6a4; } .ex-atr.ex-A { background: #9fd0ff; } .ex-atr.ex-I { background: #e0b0ff; }
.ex-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.ex-ch b { color: var(--gold); }
.ex-pac { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
.ex-pac span { display: inline-flex; align-items: center; gap: 3px; }
.ex-xp { color: #c8b6ff; }
.ex-acoes { margin-top: 8px; }
.ex-niveis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.ex-nv { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 9px; text-align: left; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-xs); color: var(--text); cursor: pointer; font: inherit; }
.ex-nv.sel { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 201, 90, .25); }
.ex-nv small { color: var(--muted); font-size: 11px; }
.ex-nv > span:not(.ex-pac) { display: flex; gap: 3px; }
.ex-hs { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; padding-right: 2px; }
.ex-h { display: flex; align-items: center; gap: 8px; padding: 4px 8px; text-align: left; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-xs); color: var(--text); cursor: pointer; font: inherit; }
.ex-h.sel { border-color: var(--gold); }
.ex-h.nao { opacity: .45; cursor: not-allowed; }
.ex-h > b { font-size: 15px; min-width: 28px; text-align: right; }
.ex-chx { color: var(--gold); font-weight: 700; min-width: 38px; text-align: right; }
.ex-reqs { display: grid; gap: 6px; }
.ex-req { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.ex-req input { width: 70px; }
.ex-prev { margin: 10px 0; }
.ex-res { text-align: center; }
.ex-res.bom h2 { color: var(--good-text, #a9e6a4); }
.ex-res.mau h2 { color: var(--bad-text, #f2a9a0); }
.ex-itens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 10px 0; font-size: 16px; font-weight: 700; }
.ex-itens span { display: inline-flex; align-items: center; gap: 5px; }
.ex-chat { min-width: 200px; }
.ex-chat-t { display: block; font-weight: 700; color: var(--gold); }
.ex-chat-v { display: flex; align-items: center; gap: 4px; margin: 3px 0; }
.ex-chat-v i { font: 700 10px/14px system-ui, sans-serif; font-style: normal; padding: 0 4px; border: 1px dashed var(--border); border-radius: 4px; color: var(--muted); }
.ex-chat-v i.on { border-style: solid; color: var(--text); background: rgba(245, 201, 90, .18); }
.ex-chat small .btn { margin-left: auto; }
.tp-busca { display: grid; gap: 6px; }
.tp-bx { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rd-xs); }
/* rodada 138: o valor do herói na vaga (atributo × eficiência) e os ícones de ferramenta no pacote */
.ex-conta { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ex-pac .ico-f, .ex-itens .ico-f { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: middle; }
.ex-itens .ico-f { width: 32px; height: 32px; }
@media (max-width: 760px) { .ex-conta { font-size: 10px; } .ex-h { gap: 6px; padding: 4px 6px; } }
.tp-abas-l { margin: 10px 0 12px; gap: 8px; }
.tp-abas-l .tp-abas { margin: 0; }
.ex-conta-m { display: none; }
@media (max-width: 520px) { .ex-h .ex-conta { display: none; } .ex-h .ex-conta-m { display: block; color: var(--muted); } }
/* rodada 139: a expedição mais simples */
.ex-nvs { margin-bottom: 6px; }
.ex-nv-info { padding: 8px 10px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-xs); }
.ex-nv-info > b { margin-right: 6px; }
.ex-nv-info .ex-atr { margin-right: 3px; }
.ex-nv-info small { display: block; margin-top: 3px; color: var(--muted); }
.ex-se { margin-top: 5px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ex-min { margin-top: 10px; }
.ex-min summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--muted); }
.ex-min .ex-reqs { margin-top: 6px; }
.ex-pub { margin-top: 12px; align-items: center; }
.ex-pub > span { margin-right: auto; font-size: 15px; }
.ex-hs-cab { display: flex; justify-content: flex-end; gap: 22px; padding: 0 14px 2px; font-size: 11px; color: var(--muted); }
.ex-cfg { display: grid; gap: 10px; }
.ex-chk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: pointer; }
.ex-chk input { width: 18px; height: 18px; margin: 0; }
.ex-campo { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 8px; }
.ex-campo input { width: 100%; }
@media (max-width: 520px) { .ex-campo { grid-template-columns: 1fr; gap: 3px; } }
/* rodada 141: o painel de parâmetros. Uma linha por parâmetro (texto à esquerda, editor à direita; listas e tabelas
   embaixo, na largura toda), pesquisa e filtros no alto, rascunho marcado em roxo, erro em vermelho no próprio campo */
.p-busca-bar { position: sticky; top: -14px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.p-busca-bar input[type=search] { width: 100%; font-size: 14px; padding: 8px 10px; }
.p-busca-bar .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.p-pend { min-height: 24px; align-items: center; gap: 8px; flex-wrap: wrap; }
.params .prs { display: flex; flex-direction: column; }
.params .pr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 34%); gap: 6px 14px; padding: 8px 0 8px 8px; border-top: 1px solid var(--border); }
.params .pr:first-child { border-top: 0; }
.params .pr.largo { grid-template-columns: minmax(0, 1fr); }
.params .pr[hidden], .params[hidden] { display: none; }
.params .pr.p-mudou { box-shadow: inset 3px 0 0 var(--gold); }
.params .pr.p-rasc { box-shadow: inset 3px 0 0 var(--purple); background: rgba(185, 163, 255, 0.06); }
.params .pr.p-erro-l { box-shadow: inset 3px 0 0 var(--bad); }
.params .pr .p-erro { color: var(--bad); font-size: 12px; }
.params .pr .p-erro:empty, .params .pr .p-acoes:empty { display: none; }
.params .pr .p-acoes { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.params .pr-ed input[type=number], .params .pr-ed input[type=text], .params .pr-ed input[type=date], .params .pr-ed select { width: 100%; min-width: 0; }
.pe-n { display: inline-flex; align-items: center; gap: 3px; width: 100%; }
.pe-n.pct i { font-style: normal; color: var(--muted); font-size: 12px; }
.pe-lista { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.pe-c { display: flex; flex-direction: column; gap: 2px; width: 104px; font-size: 11.5px; color: var(--muted); }
.pe-c > span:first-child { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 11px; }
.pe-x:hover { color: var(--bad); }
.pe-soma { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; }
.pe-grade { border-collapse: collapse; }
.pe-grade th, .pe-grade td { padding: 2px 4px; font-size: 12px; text-align: left; }
.pe-grade td input { width: 90px; min-width: 70px; }
.pe-grade td.pe-somal { font-variant-numeric: tabular-nums; color: var(--muted); }
.pe-grade td.pe-somal.mau { color: var(--bad); font-weight: 700; }
.pe-marcar { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pe-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.pe-chk input { width: auto; min-width: 0; }
.pe-trilha { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 10px; max-height: 360px; overflow: auto; padding-right: 4px; }
.pe-tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) 88px 18px; gap: 4px; align-items: center; font-size: 12px; }
.pe-tr > span { color: var(--muted); font-weight: 700; }
.pe-tr.vazio { opacity: 0.6; }
.pe-tr select, .pe-tr input { width: 100%; min-width: 0; }
.p-revisao { max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.p-rev { border-left: 3px solid var(--gold); padding: 2px 0 2px 8px; font-size: 13px; line-height: 1.5; }
@media (max-width: 760px) {
  .params .pr { grid-template-columns: minmax(0, 1fr); }
  .pe-c { width: calc(33% - 4px); min-width: 88px; }
  .pe-trilha { grid-template-columns: minmax(0, 1fr); }
  .p-busca-bar { position: static; }
}

/* rodada 142: o editor dos níveis de expedição no admin, e a prévia deles */
.pe-exp { display: flex; flex-direction: column; gap: 8px; }
.pe-exp-n { border: 1px solid var(--border); border-radius: var(--rd-sm, 6px); padding: 8px; display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, 0.12); }
.pe-exp-cab { display: flex; align-items: center; gap: 6px; }
.pe-exp-cab input[type=text] { flex: 1; min-width: 0; }
.pe-exp-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.pe-exp-l label, .pe-pr label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.pe-exp-l .pe-n, .pe-pr .pe-n { width: 84px; }
.pe-vaga { display: inline-flex; align-items: center; }
.pe-vaga select { width: auto; }
.pe-exp-prs { display: flex; flex-direction: column; gap: 4px; }
.pe-pr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 0; border-top: 1px dashed var(--border); }
.pe-pr > select { width: auto; }
.pe-pr label select { width: auto; }
table.ex-previa td, table.ex-previa th { padding: 3px 6px; font-size: 12px; }
table.ex-previa td.fino { max-width: 160px; }
.params .pr-ed .pe-pr > select, .params .pr-ed .pe-pr label select, .params .pr-ed .pe-vaga select { width: auto; }
.pe-exp-prs > .btn, .pe-exp > .pe-mais { align-self: flex-start; }

/* rodada 144: a viagem da expedição */
.modal-viagem .modal-box { max-width: 680px; }
.evx-quadro { margin: 6px 0 8px; }
.evx-quadro canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; border-radius: var(--rd-sm, 6px); border: 2px solid var(--border); }
.evx-topo { margin: 2px 0 8px; gap: 8px; flex-wrap: wrap; }
/* rodada 147: a parte de cada um, com os dois caminhos de cada etapa */
.evx-parte { border: 2px solid var(--gold, #f5c95a); border-radius: var(--rd-sm, 6px); padding: 8px 10px; margin: 8px 0; background: rgba(245, 201, 90, .07); }
.evx-parte.feita { border-color: var(--border); background: var(--surface); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.evx-parte p { margin: 4px 0 8px; }
.evx-pts { display: inline-flex; gap: 4px; } .evx-pts i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); }
.evx-pts i.ok { background: var(--good-text, #a9e6a4); border-color: var(--good-text, #a9e6a4); } .evx-pts i.agora { border-color: var(--gold, #f5c95a); }
.evx-hist { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12px; }
.evx-h { font-weight: 700; font-size: 12px; }
.evx-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evx-op { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px; text-align: left; font: inherit; color: var(--text); cursor: pointer; background: var(--surface); border: 2px solid var(--border); border-radius: var(--rd-xs, 4px); }
.evx-op:hover { border-color: var(--gold, #f5c95a); }
.evx-op.dif1 { border-color: color-mix(in srgb, var(--bad-text, #f2a9a0) 60%, var(--border)); }
.evx-op > b { font-size: 14px; }
.evx-op small { color: var(--muted); font-size: 11px; }
.evx-op small.bom { color: var(--good-text, #a9e6a4); }
.evx-dif { font-size: 12px; font-weight: 700; }
.evx-op.dif0 .evx-dif { color: var(--good-text, #a9e6a4); } .evx-op.dif1 .evx-dif { color: var(--bad-text, #f2a9a0); }
.evx-ganho { font-size: 16px; font-weight: 800; color: var(--gold, #f5c95a); }
.ex-tm .ex-prog { color: var(--text); font-weight: 600; }
/* rodada 149: o jogo da sua vaga, e os dois caminhos só de dificuldade */
.evx-jogo { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; }
.evx-jogo > span:last-child { display: flex; flex-direction: column; }
.evx-jogo small { color: var(--muted); font-size: 11px; }
.evx-op { align-items: center; text-align: center; }
.evx-op .evx-dif { font-size: 15px; }
#evx-cv.tr-I { cursor: pointer; }
@media (max-width: 520px) { .evx-ops { grid-template-columns: 1fr; } }

/* rodada 152 e 156: as seções da trupe (a aba Geral) */
.tp-g-sec { margin: 10px 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rd-sm, 6px); }
.tp-g-tit { margin-bottom: 6px; gap: 6px; }
.tp-g-tit h3 { margin: 0; display: flex; align-items: center; gap: 6px; }
.tp-g-tit .linha { gap: 6px; margin: 0; }
.tp-g-vazio, .tp-g-mais { margin: 4px 0; }
.tp-rank .tp-tab { margin-top: 4px; }