:root {
  --bg:#F1F0EE; --sup:#FAFAF8; --sup2:#E9E7E3; --linha:#DCD9D3; --tinta:#0F0E0D; --tinta2:#55524D; --tinta3:#8A867F;
  --lula:#E3343B; --fla:#3E62DE; --neutro:#DEDAD3; --vazio:#E7E4DF;
  --elim:#B07A0E; --novo:#14895A; --bn:#7F62E6; --verde:#14895A;
  --serif: Faustina, Georgia, "Times New Roman", serif;
  --sans: Geist, "Helvetica Neue", Arial, sans-serif;
}
[data-tema="escuro"] {
  --bg:#121110; --sup:#1A1918; --sup2:#24221F; --linha:#2F2D2A; --tinta:#F3F1EC; --tinta2:#B8B3AA; --tinta3:#7F7A72;
  --lula:#F0545A; --fla:#6F8DF5; --neutro:#3A3733; --vazio:#2A2826; --verde:#3FBF86; --novo:#2FA872;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--tinta); font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* barra */
.bar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px 8px; max-width:1180px; margin:0 auto; }
.marca { font:600 26px/1 var(--serif); color:var(--tinta); text-decoration:none; letter-spacing:-.01em; }
.marca span { color:var(--lula); }
.acoes { display:flex; gap:8px; }
.ic { width:42px; height:42px; border-radius:50%; border:1px solid var(--linha); display:grid; place-items:center; background:var(--sup); }
.ic svg { width:20px; height:20px; }

/* placar */
.placar { max-width:1180px; margin:0 auto; padding:6px 16px 14px; border-bottom:1px solid var(--linha); }
h1 { font:500 clamp(26px,6.4vw,40px)/1.1 var(--serif); margin:0 0 12px; text-align:center; letter-spacing:-.01em; }
h1 .lula, .lula { color:var(--lula); }
.nomes { display:flex; justify-content:space-between; font-weight:600; font-size:15px; margin-bottom:6px; }
.nomes small { color:var(--tinta3); font-weight:500; margin-left:4px; }
.nomes span:last-child small { margin:0 4px 0 0; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 6px; vertical-align:0; }
.dot.l { background:var(--lula); } .dot.f { background:var(--fla); }
.cabo { position:relative; display:flex; height:46px; border-radius:12px; overflow:hidden; color:#fff; font-variant-numeric:tabular-nums; }
.cabo > div { display:flex; align-items:center; gap:8px; padding:0 12px; white-space:nowrap; }
.cabo .l { background:var(--lula); } .cabo .f { background:var(--fla); justify-content:flex-end; }
.cabo b { font:600 24px/1 var(--sans); letter-spacing:-.02em; } .cabo b small { font-size:14px; }
.cabo span { font-size:13px; opacity:.85; }
.cabo .meio { position:absolute; top:-4px; bottom:-4px; left:50%; width:2px; background:var(--tinta); padding:0; }
.cabo .t1 { position:absolute; top:0; bottom:0; width:0; border-left:2px dashed rgba(255,255,255,.9); padding:0; }
.cabo-nota { display:flex; justify-content:space-between; font-size:13px; color:var(--tinta2); margin-top:6px; gap:10px; }

/* abas */
.abas { position:fixed; z-index:40; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); background:var(--sup); border-top:1px solid var(--linha); padding:6px 0 calc(6px + env(safe-area-inset-bottom)); }
.abas a { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:12px; color:var(--tinta3); text-decoration:none; padding:4px 0; }
.abas a svg { width:24px; height:24px; }
.abas a.on { color:var(--tinta); font-weight:600; }
@media (min-width:900px) {
  .abas { position:static; max-width:1180px; margin:0 auto; display:flex; gap:4px; background:none; border:0; border-bottom:1px solid var(--linha); padding:8px 16px; }
  .abas a { flex-direction:row; gap:8px; font-size:14px; padding:8px 14px; border-radius:999px; }
  .abas a svg { width:18px; height:18px; } .abas a.on { background:var(--sup2); }
}
main { max-width:1180px; margin:0 auto; padding:0 0 96px; }
.pane { display:none; } .pane.on { display:block; }

/* ferramentas */
.ferramentas { padding:12px 16px 4px; display:flex; flex-direction:column; gap:10px; }
.pills { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.pills button { flex:none; padding:9px 15px; border-radius:999px; border:1px solid var(--linha); background:var(--sup); font-size:14px; color:var(--tinta2); }
.pills button.on { background:var(--tinta); border-color:var(--tinta); color:var(--bg); font-weight:600; }
.busca { position:relative; }
.busca svg { position:absolute; left:13px; top:12px; width:18px; height:18px; color:var(--tinta3); }
.busca input { width:100%; font:inherit; font-size:16px; padding:10px 12px 10px 40px; border-radius:12px; border:1px solid var(--linha); background:var(--sup); color:var(--tinta); }
.busca input:focus { outline:2px solid var(--tinta); outline-offset:1px; }
.sug { position:absolute; z-index:30; left:0; right:0; top:48px; background:var(--sup); border:1px solid var(--linha); border-radius:12px; overflow:hidden; display:none; box-shadow:0 10px 30px rgba(0,0,0,.08); }
.sug div { padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--linha); }
.sug div:hover { background:var(--sup2); } .sug small { color:var(--tinta3); margin-left:6px; }

/* palco */
.palco { display:grid; grid-template-columns:1fr; }
@media (min-width:900px) { .palco { grid-template-columns:1.4fr 1fr; gap:20px; padding:0 16px; } }
.mapa-wrap { position:relative; padding:4px 8px 0; }
.trilha { font-size:14px; color:var(--tinta2); padding:4px 8px 2px; min-height:28px; }
.trilha a { color:var(--tinta); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
#mapa { width:100%; height:auto; display:block; max-height:72vh; }
#mapa path.uf, #mapa path.mu { stroke:var(--bg); stroke-width:.8; vector-effect:non-scaling-stroke; cursor:pointer; }
#mapa path.mu { stroke-width:.35; }
#mapa path:hover { filter:brightness(.92); }
#mapa path.sel { stroke:var(--tinta); stroke-width:2.2; }
#mapa text { font:600 22px var(--sans); fill:var(--tinta); pointer-events:none; paint-order:stroke; stroke:var(--bg); stroke-width:5px; stroke-opacity:.75; }
#mapa line { stroke:var(--tinta3); stroke-width:1; vector-effect:non-scaling-stroke; }
#mapa .pill rect { cursor:pointer; } #mapa .pill text { fill:#fff; stroke:none; font-size:22px; }
.legenda { margin:4px 12px 10px; padding:10px 14px; border:1px solid var(--linha); border-radius:14px; background:var(--sup); font-size:13px; color:var(--tinta2); display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.legenda b { width:100%; color:var(--tinta); font-weight:600; }
.legenda .rampa { flex:1; min-width:80px; height:10px; border-radius:5px; }
.legenda .q { width:12px; height:12px; border-radius:3px; display:inline-block; vertical-align:-1px; margin-right:4px; }
.tip { position:absolute; pointer-events:none; background:var(--tinta); color:var(--bg); border-radius:10px; padding:8px 11px; font-size:13px; display:none; z-index:10; max-width:240px; line-height:1.4; }

/* folha (bottom sheet no celular) */
.folha { background:var(--sup); border-top:1px solid var(--linha); }
.alca { display:none; }
@media (max-width:899px) {
  .folha { position:fixed; z-index:35; left:0; right:0; bottom:62px; max-height:74vh; overflow:auto; border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.12); transform:translateY(calc(100% - 132px)); transition:transform .28s cubic-bezier(.2,.8,.2,1); overscroll-behavior:contain; }
  .folha.aberta { transform:none; }
  .folha.oculta { transform:translateY(110%); }
  .alca { display:block; width:100%; padding:10px 0 2px; position:sticky; top:0; background:var(--sup); z-index:2; }
  .alca span { display:block; margin:0 auto; width:40px; height:5px; border-radius:3px; background:var(--linha); }
  .mapa-wrap { padding-bottom:140px; }
}
@media (min-width:900px) { .folha { border:1px solid var(--linha); border-radius:16px; align-self:start; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; } }

/* painel */
#painel { padding:6px 18px 20px; }
.titulo { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.titulo h3 { font:500 30px/1.05 var(--serif); margin:0; letter-spacing:-.01em; }
.titulo span { color:var(--tinta3); font-size:13px; white-space:nowrap; }
.manchete { margin:8px 0 14px; font-size:16px; color:var(--tinta2); }
.manchete b { color:var(--tinta); }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:14px; overflow:hidden; margin-bottom:16px; }
.duo div { background:var(--sup); padding:10px 12px; }
.duo .n { font:500 30px/1 var(--serif); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.duo .r { font-size:12px; color:var(--tinta3); margin-top:4px; }
.duo .l .n { color:var(--lula); } .duo .f .n { color:var(--fla); }
.tab { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.tab th { font-size:12px; color:var(--tinta3); font-weight:500; text-align:right; padding:0 0 6px; }
.tab th:first-child, .tab td:first-child { text-align:left; }
.tab td { text-align:right; padding:8px 0; border-top:1px solid var(--linha); vertical-align:top; }
.tab td small { display:block; color:var(--tinta3); font-size:12px; }
.tab td:first-child { font-weight:500; white-space:nowrap; }
.tab .mais { color:var(--verde); } .tab .menos { color:var(--tinta2); }
.secao { margin-top:18px; padding-top:14px; border-top:1px solid var(--tinta); }
.secao h4 { margin:0; font:500 20px/1.2 var(--serif); }
.secao .grande { font:500 44px/1 var(--serif); letter-spacing:-.02em; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.secao .grande.verde { color:var(--verde); }
.secao p { margin:4px 0 0; color:var(--tinta2); font-size:14px; }
.conta { margin-top:10px; font-size:14px; font-variant-numeric:tabular-nums; }
.conta div { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--linha); }
.conta div.soma { font-weight:600; border-top:1px solid var(--tinta2); }
.barrinha { display:flex; gap:2px; height:12px; border-radius:6px; overflow:hidden; margin-top:12px; }
.barrinha-leg { display:flex; justify-content:space-between; font-size:12px; color:var(--tinta2); margin-top:4px; }
.acoesp { display:flex; gap:8px; margin-top:18px; }
.acoesp button { flex:1; padding:11px; border-radius:12px; border:1px solid var(--linha); background:var(--bg); font-weight:500; }
.acoesp button.pri { background:var(--tinta); color:var(--bg); border-color:var(--tinta); }

/* texto (abas A conta, histórico, método) */
.texto { padding:8px 18px 20px; max-width:760px; }
.texto h2 { font:500 clamp(26px,5.6vw,38px)/1.12 var(--serif); margin:28px 0 8px; letter-spacing:-.015em; }
.texto p { color:var(--tinta2); font-size:16px; margin:8px 0; } .texto p b { color:var(--tinta); }
.mudo { color:var(--tinta3) !important; font-size:14px !important; }
.faixa { display:flex; gap:2px; height:54px; border-radius:12px; overflow:hidden; margin:18px 0 6px; }
.faixa div { display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:15px; white-space:nowrap; min-width:0; }
.origens { margin:0; } .origens div { display:grid; grid-template-columns:14px 1fr auto; gap:10px; align-items:baseline; padding:11px 0; border-top:1px solid var(--linha); }
.origens dt { width:12px; height:12px; border-radius:3px; } .origens dd { margin:0; } .origens dd small { display:block; color:var(--tinta3); font-size:13px; }
.origens .v { font:500 22px/1 var(--serif); font-variant-numeric:tabular-nums; }
.regua { position:relative; margin:22px 0 34px; }
.regua .trilho { display:flex; gap:2px; height:44px; border-radius:12px; overflow:hidden; }
.regua .trilho div { display:flex; align-items:center; padding:0 12px; color:#fff; font-weight:600; white-space:nowrap; }
.regua .linha { position:absolute; top:-8px; bottom:-26px; border-left:2px solid var(--tinta); }
.regua .linha span { position:absolute; bottom:0; left:6px; font-size:13px; white-space:nowrap; font-weight:600; }
.anos { list-style:none; padding:0; margin:14px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:14px; overflow:hidden; }
.anos li { background:var(--sup); padding:10px; font-size:13px; color:var(--tinta2); }
.anos li b { display:block; font:500 20px/1.1 var(--serif); color:var(--tinta); }
.anos li.x { background:var(--tinta); color:var(--bg); } .anos li.x b { color:var(--bg); }
.hchart { margin-top:16px; }
.hgrp { font:500 20px var(--serif); margin:18px 0 4px; }
.hrow { display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:center; margin:3px 0; }
.hrow .lbl { font-size:13px; color:var(--tinta2); font-variant-numeric:tabular-nums; }
.hrow .eixo { position:relative; height:28px; }
.hrow .zero { position:absolute; top:-3px; bottom:-3px; border-left:1px solid var(--tinta3); }
.hrow .b { position:absolute; top:4px; height:20px; border-radius:4px; }
.hrow .val { position:absolute; top:4px; font-size:12px; line-height:20px; white-space:nowrap; color:var(--tinta2); font-variant-numeric:tabular-nums; }
.aviso { position:fixed; bottom:84px; left:50%; transform:translateX(-50%); background:var(--tinta); color:var(--bg); padding:10px 16px; border-radius:10px; z-index:60; font-weight:500; }

/* enquanto o jogo está na tela, a folha não cobre o mapa do jogo */
body.jogando .folha { transform:translateY(110%); }
#jogo { border-bottom:1px solid var(--linha); }

.sub-h1 { text-align:center; color:var(--tinta2); margin:-4px auto 14px; font-size:15px; max-width:640px; }
.formula { margin:14px 0; padding:12px 14px; border:1px solid var(--linha); border-radius:12px; background:var(--sup); font:500 18px var(--serif); }
.formula span { font-family:var(--sans); font-size:14px; color:var(--tinta2); margin-right:6px; }
.dif { font-size:15px; margin-top:8px; }
details.ref { margin-top:18px; border-top:1px solid var(--linha); padding-top:10px; }
details.ref summary { cursor:pointer; color:var(--tinta2); font-size:14px; }
.h100 { display:flex; gap:2px; height:26px; border-radius:6px; overflow:hidden; }
.h100 div { display:flex; align-items:center; padding:0 8px; color:#fff; font-size:12px; font-weight:600; white-space:nowrap; min-width:0; }
.hrow2 { display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:center; margin:5px 0; }
.hrow2 .lbl { font-size:13px; color:var(--tinta2); }
.hrow2 small { display:block; color:var(--tinta3); font-size:12px; margin-top:2px; }

.sub-h1 b { color:var(--tinta); }
.titulo { position:relative; }
.fechar { display:none; }
@media (max-width:899px) {
  .fechar { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--sup2); font-size:24px; line-height:1; color:var(--tinta2); margin-left:4px; }
  .folha:not(.aberta) .fechar { display:none; }
  .folha:not(.aberta) { overflow:hidden; }
}