:root {
  --bg: #0d1117;
  --panel: #151b23;
  --panel-2: #1c2430;
  --line: #2a3441;
  --text: #f2efe6;
  --muted: #9aa4b5;
  --accent: #f2b705;
  --good: #34c26b;
  --bad: #ef5b5f;
  --warn: #f7c531; /* cartão amarelo: aviso. Mais frio que o ouro, que é só da marca */
  --draw: #8b95a6;
  --blue: #4fa3ff;
  --ease: cubic-bezier(.2, .9, .3, 1.2);
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; /* contas dos dados */
  --shadow: 0 1px 0 rgb(255 255 255 / .05) inset, 0 10px 28px rgb(0 0 0 / .28);
  color-scheme: dark;
}

* { box-sizing: border-box; }

@media (pointer: fine) { html { overscroll-behavior: none; } }

body {
  margin: 0;
  min-height: 100dvh;
  /* fundo neutro: só um brilho quente de refletor no topo, fixo ao rolar */
  background:
    radial-gradient(ellipse 110% 55% at 50% -15%, rgb(242 183 5 / .09), transparent 70%) fixed,
    var(--bg);
  color: var(--text);
  font: 500 17px/1.5 var(--font-body);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding:
    max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    calc(48px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

h1, h2, h3, .result, .vs b, .stats-grid b, .lvl b, .mini, .chip, .tabs button, .step {
  font-family: var(--font-display);
}
h1 { font-size: 2.6rem; line-height: 1.05; margin: 8px 0 0; font-weight: 800; letter-spacing: .01em; }
h1.logo { margin: 0; line-height: 0; }
h1.logo img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
h1 span, .gold { color: var(--accent); }
h2 { margin: 0; line-height: 1.15; font-size: 1.7rem; font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
h3 + .stats-grid + h3 { margin-top: 16px; }
h1, h2, .moment, .outcome { text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.lead { color: var(--muted); font-size: 1.05rem; }
.muted { color: var(--muted); font-size: .95rem; }
.muted b { color: var(--text); }
.step { color: var(--accent); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }

table, .stats-grid b, .score, .vs b, .mini, .lvl b, .nota, #sim-label, .dc { font-variant-numeric: tabular-nums; }

label { display: flex; flex-direction: column; gap: 6px; text-align: left; font-weight: 600; }
form { display: flex; flex-direction: column; gap: 16px; }

select, input, button {
  font: inherit;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 0 16px;
  touch-action: manipulation;
}
select, input { background-color: var(--panel); color: var(--text); }
input::placeholder { color: rgb(154 164 181 / .6); }

button {
  background: var(--accent);
  color: #1a1400;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / .4) inset, 0 6px 16px rgb(242 183 5 / .18);
  transition: transform .12s, filter .12s, background-color .2s, border-color .2s;
}
button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .5; cursor: wait; }
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
button.ghost:hover:not(:disabled) { background-color: var(--panel); border-color: #4a5567; filter: none; }
button.danger { color: var(--bad); border-color: rgb(239 91 95 / .4); }
button.danger:hover:not(:disabled) { border-color: var(--bad); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row button { font-size: .95rem; padding: 0 8px; }

.card {
  background: linear-gradient(180deg, rgb(255 255 255 / .035), transparent 40%), var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow);
}

/* ---------- abertura ---------- */
.logo-mark { filter: drop-shadow(0 14px 32px rgb(242 183 5 / .16)); animation: logo-in .7s var(--ease) backwards; }
@keyframes logo-in { from { transform: translateY(-10px) scale(.94); opacity: 0; } }

/* ---------- entrada das telas ---------- */
/* backwards (não both): o estado final já é o normal; com both a animação terminada continua "ativa" e o Chrome
   deixa cada cartão numa camada própria, que pisca quando o dado 3D começa a girar */
.enter > *, .enter .col > *, .rise {
  animation: rise .4s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.rise { animation-delay: .05s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

::view-transition-old(root) { animation: fade-out .18s ease-in both; }
::view-transition-new(root) { animation: fade-in .25s ease-out both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- dados: cada tipo com formato e cor ---------- */
.die-wrap { margin: 4px auto; transition: filter .3s; }
.mini {
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #1a1400;
  /* faces chapadas como no logo: luz e sombra em filetes, sem degradê */
  background: var(--die);
  box-shadow: inset 0 2px 0 var(--die-hi), inset 0 -3px 0 var(--die-lo);
  --die-hi: #ffd970; --die: var(--accent); --die-lo: #b9850a;
}
.mini { width: 28px; height: 28px; font-size: .95rem; flex: none; }
.d4  { --die-hi: #ffb3a8; --die: #ef6a5a; --die-lo: #b8392b; color: #2a0b07; clip-path: polygon(50% 3%, 98% 94%, 2% 94%); padding-top: 22%; }
.d6  { --die-hi: #fffaf0; --die: #ece4d0; --die-lo: #c4b998; color: #241d0e; border-radius: 18%; }
.d8  { --die-hi: #b5dbff; --die: #5aa5f0; --die-lo: #2a6cb8; color: #06182b; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.d10 { --die-hi: #ddc9ff; --die: #9d74f5; --die-lo: #6538c9; color: #160a2e; clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%); }
.d12 { --die-hi: #b4f7cf; --die: #3fcf80; --die-lo: #1f8f52; color: #052814; clip-path: polygon(50% 0, 98% 36%, 80% 96%, 20% 96%, 2% 36%); }
.d20 { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.mini.d4 { padding-top: 7px; font-size: .8rem; }
.mini.drop { opacity: .35; }
.crit-good { filter: drop-shadow(0 0 18px var(--accent)); }
.crit-bad { filter: drop-shadow(0 0 18px var(--bad)); }

/* dadinhos de quantidade caindo na mesa */
.dice-roll { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.minis { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.minis .add { font-family: var(--font-display); font-weight: 800; color: var(--muted); }
.dice-roll small { color: var(--muted); font: 500 .8rem var(--font-mono); }
.dice-roll small b { color: var(--text); }
.dice-roll .mini, .attrs .mini { animation: mini-drop .55s var(--ease) backwards; animation-delay: calc(var(--k, 0) * 90ms + .15s); }
@keyframes mini-drop { from { transform: translateY(-16px) rotate(-220deg) scale(.5); opacity: 0; } }

.result { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.crit { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: .14em; }
.crit.good { color: var(--good); }
.crit.gold { color: var(--accent); } /* 20 natural: o único sucesso que é ouro */
.crit.bad { color: var(--bad); }
.list { margin: 0 auto; padding-left: 1.5em; text-align: left; }
.team-reveal { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.team-reveal svg { filter: drop-shadow(0 8px 18px rgb(0 0 0 / .4)); }

/* ---------- ficha ---------- */
.profile { display: flex; align-items: center; gap: 12px; text-align: left; }
.profile h2 { font-size: 1.6rem; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { color: var(--muted); font-weight: 600; font-size: .75rem; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
th, td { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
.attrs td:nth-child(n+2), .attrs th:nth-child(n+2) { text-align: right; }
.dice { white-space: nowrap; }
.dice .mini { display: inline-grid; width: 22px; height: 22px; font-size: .8rem; margin-left: 3px; vertical-align: middle; }
.dice em { color: var(--good); font-style: normal; font-weight: 700; margin-left: 4px; }
.steppers { display: inline-flex; gap: 6px; justify-content: flex-end; }
.step-btn { min-height: 36px; width: 36px; padding: 0; border-radius: 50%; font-size: 1.2rem; line-height: 1; }
.step-btn.minus { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
@keyframes pulse { 50% { transform: scale(1.08); } }
/* ajustes pequenos (+/−, inspiração) redesenham sem animar: nada pisca. Menos os dados que rolam depois
   (inspiração liga a vantagem e o lance é rolado sem redesenhar: sem a exceção, os 2 d20 ficavam parados) */
#app.quiet :not(.rolling, .rolling *, .landed, .landed *),
#app.quiet :not(.rolling, .landed)::before, #app.quiet :not(.rolling, .landed)::after { animation: none !important; transition: none !important; }
.pts { color: var(--accent); }

/* ---------- hub ---------- */
.hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
  gap: 10px 12px;
}
.hud .jersey { filter: drop-shadow(0 4px 8px rgb(0 0 0 / .35)); }
.who { display: flex; flex-direction: column; min-width: 0; }
.who b { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvl { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.lvl b { color: var(--accent); font-size: 1.7rem; line-height: 1; }
.badge { background: var(--accent); color: #1a1400; font-weight: 800; font-size: .75rem; border-radius: 999px; padding: 2px 8px; animation: pulse 1.4s infinite; }
.xp { grid-column: 1 / -1; height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.xp-label { grid-column: 1 / -1; margin: -2px 0 0; font-size: .8rem; color: var(--muted); }
.xp-label b { color: var(--text); font-variant-numeric: tabular-nums; }
.xp-label .ico { color: var(--accent); }
.xp-hint { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgb(242 183 5 / .12); color: var(--accent); font-weight: 800; font-size: .78em; white-space: nowrap; }
.xp-gain { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; }
.xp-gain > b { font: 800 1.35rem var(--font-display); color: var(--accent); }
.xp-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.xp-parts i { font-style: normal; font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.xp-parts i.hot { color: var(--accent); border-color: rgb(242 183 5 / .5); }
.xp-gain small { color: var(--muted); font-size: .78rem; }
.xp i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transform-origin: left; transform: scaleX(var(--to)); animation: grow .9s .15s ease-out backwards; }
@keyframes grow { from { transform: scaleX(var(--from)); } }

/* tela principal: tudo à vista. Celular empilha (partida, ficha, tabela); desktop em duas colunas */
.hub-grid { display: grid; gap: 16px; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.area-table, .area-sheet, .area-cups { text-align: left; }
.area-table h3, .area-sheet h3, .area-cups h3 { text-align: center; }
/* desktop: esquerda = campeonato (jogo + tabela), direita = jogador (ficha + copas).
   celular: uma coluna na ordem jogo → ficha → copas → tabela (as colunas viram "transparentes"). */
@media (max-width: 899px) {
  .col-main, .col-side { display: contents; }
  .area-main { order: 1; }
  .area-sheet { order: 2; }
  .area-cups { order: 3; }
  .area-table { order: 4; }
  .area-reset { order: 5; }
}
@media (min-width: 900px) {
  #app:is([data-step="hub"], [data-step="match"], [data-step="sim"], [data-step="event"], [data-step="talent"], [data-step="arch"]) { max-width: 1080px; }
  .hub-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
}
.prof-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.prof-row .pills { justify-content: flex-start; }
.prof-badge { font-family: var(--font-display); font-weight: 800; color: #1a1400; background: var(--accent); border-radius: 999px; padding: 2px 10px; }

.match { position: relative; padding: 16px; gap: 10px; }
.match .comp { margin: 0; }
.venue { color: var(--muted); font-size: .9rem; }
/* jogo-chave: o motivo fica dentro do card, logo abaixo da competição; a cor diz o tipo */
.key-badge { justify-self: center; align-self: center; margin: -2px 0 2px; padding: 4px 12px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  background: rgb(242 183 5 / .14); color: var(--accent); border: 1px solid rgb(242 183 5 / .45); }
.match.key.gold { border-color: rgb(242 183 5 / .55); }
.match.key.hot { border-color: rgb(247 197 49 / .6); }
.match.key.hot .key-badge { background: rgb(247 197 49 / .14); color: var(--warn); border-color: rgb(247 197 49 / .5); }
.match.key.danger { border-color: rgb(239 91 95 / .55); }
.match.key.danger .key-badge { background: rgb(239 91 95 / .14); color: var(--bad); border-color: rgb(239 91 95 / .5); }
/* seu estado (vantagem, inspiração, marcação…): informação de apoio, menor que o jogo */
.pills.compact { gap: 6px; margin-top: -4px; }
.pills.compact .pill { font-size: .78rem; padding: 3px 10px; }
.tag { position: absolute; top: -11px; left: 50%; translate: -50%; background: var(--bad); color: #fff; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; }
.vs .side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.vs .side svg { filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35)); }
.vs > b { color: var(--accent); font-size: 1.3rem; }
.score .vs > b { font-size: 2.4rem; color: var(--text); white-space: nowrap; }
.pop { display: inline-block; animation: pop .55s .25s var(--ease) backwards; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

.chip { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; font-size: .9rem; font-weight: 800; color: #0d1117; }
.chip.V { background: var(--good); }
.chip.E { background: var(--draw); }
.chip.D { background: var(--bad); }
.score .chip { justify-self: center; margin: 0 auto; padding: 0 10px; }
.form { display: flex; gap: 6px; justify-content: center; }

.report { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.report li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--panel); border: 1px solid rgb(44 52 65 / .6); border-radius: 10px; padding: 8px 10px; font-size: .9rem; text-align: left; }
.ln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nota { font-weight: 700; white-space: nowrap; }

/* ---------- partida e eventos ---------- */
.moment { font-size: 1.5rem; }
.options { display: grid; gap: 8px; }
.opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); text-align: left; padding-top: 10px; padding-bottom: 10px; box-shadow: none; }
.opt span { display: flex; flex-direction: column; min-width: 0; }
.opt em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--muted); }
.opt .prof { font-style: normal; color: var(--accent); }
.opt span.stake { display: inline; margin-left: 6px; font-size: .95rem; letter-spacing: .05em; }
.news { text-align: left; }
.news h3 { text-align: center; }
.news ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.news li { display: flex; align-items: center; gap: 10px; }
.news li span { flex: 1; }
.news b { font-family: var(--font-display); font-size: .95rem; }
.news .up { color: var(--good); }
.news .down { color: var(--bad); }
.opt small { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.mod { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1; color: var(--text); }
.diff { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.diff.easy { color: var(--good); }
.diff.mid { color: var(--text); }
.diff.hard { color: var(--warn); }
.diff.vhard { color: var(--bad); }

/* d20 do lance: dois dados lado a lado com vantagem/desvantagem */
.dice-pair { display: flex; justify-content: center; gap: 16px; }
.dice-pair .die-wrap { margin: 4px 0; }
.die-wrap.drop { opacity: .3; filter: grayscale(.7); }
.adv { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin-top: -6px; }
.adv.good { color: var(--good); }
.adv.bad { color: var(--bad); }

.insp-toggle {
  justify-self: center;
  align-self: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  border: 1px dashed rgb(242 183 5 / .6);
  box-shadow: none;
}
.insp-toggle.on { background: rgb(242 183 5 / .16); border-style: solid; box-shadow: 0 0 18px rgb(242 183 5 / .35); }
.insp-toggle:hover:not(:disabled) { filter: none; border-color: var(--accent); }
.pill.insp { color: var(--accent); border-color: rgb(242 183 5 / .5); }
img.crest { object-fit: contain; }
.opt:hover:not(:disabled) { border-color: var(--accent); background-color: var(--panel-2); filter: none; }
.outcome { font-size: 1.25rem; font-weight: 700; }
.outcome.ok { color: var(--good); }
.outcome.fail { color: var(--bad); }
.crit-card { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.crit-card.crit { background: rgb(242 183 5 / .1); border: 1px solid rgb(242 183 5 / .45); }
.crit-card.fumble { background: rgb(239 91 95 / .1); border: 1px solid rgb(239 91 95 / .45); }
.crit-head { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.crit-card .pills, .crit-card .dice-roll { justify-content: flex-start; align-items: flex-start; }
.event-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.event-icon { font-size: 2.8rem; line-height: 1; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .4)); }

/* ---------- tabela ---------- */
.league { font-size: .9rem; table-layout: fixed; }
.league th:first-child, .league td:first-child { width: 30px; text-align: center; }
.league th:nth-child(n+3), .league td:nth-child(n+3) { width: 38px; text-align: right; }
.tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* escudo + nome alinhados no centro da linha, com respiro; vale para escudo gerado (svg) e logo oficial (img) */
.tn svg, .tn img { vertical-align: middle; margin-right: 8px; width: 18px; height: 18px; object-fit: contain; }
.tn span { vertical-align: middle; }
.league tr.g4 td:first-child { box-shadow: inset 3px 0 var(--blue); }
.league tr.z4 td:first-child { box-shadow: inset 3px 0 var(--bad); }
.league tr.me td { background: rgb(242 183 5 / .14); font-weight: 700; }
.history th:first-child, .history td:first-child { width: 48px; }
.history th:nth-child(3), .history td:nth-child(3) { width: 40px; }
.history tr.off td { color: var(--muted); }
.history.fm { margin-top: 4px; }
.history.fm td.tn small { margin-left: 4px; color: var(--muted); }
.history.fm tr.live td { background: rgb(242 183 5 / .06); }
.history.fm .live-tag { color: var(--accent); font-weight: 700; margin-left: 4px; }
.history.fm tr.sel td { border-top: 1px dashed var(--line); }
.history.fm tfoot td { font-weight: 800; border-top: 1px solid var(--line); }
.history tr.off td small { margin-left: 1px; }
.legend { font-size: .8rem; display: flex; gap: 6px; justify-content: center; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.legend i.g4 { background: var(--blue); }
.legend i.z4 { background: var(--bad); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stats-grid div { display: flex; flex-direction: column; background: rgb(0 0 0 / .22); border: 1px solid rgb(44 52 65 / .6); border-radius: 10px; padding: 8px 4px; }
.stats-grid b { font-size: 1.45rem; white-space: nowrap; line-height: 1.15; }
.stats-grid small { color: var(--muted); font-size: .75rem; line-height: 1.2; }
.offer { border-color: var(--accent); }
.offer-body { display: flex; align-items: center; gap: 12px; text-align: left; }
.offer-body + .offer-body { margin-top: 8px; }
.card.market .market-opts { margin-top: 12px; }
.final-table + .final-table { margin-top: 6px; }
.final-table > summary { cursor: pointer; padding: 8px 2px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; list-style: none; }
.final-table > summary::before { content: "▸"; color: var(--accent); transition: rotate .2s; }
.final-table[open] > summary::before { rotate: 90deg; }
.final-table > summary small { margin-left: auto; }
.final-table > summary::-webkit-details-marker { display: none; }
.final-table > summary small { color: var(--muted); font-weight: 500; }

/* ---------- status, simulação ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pill { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 600; }
.pill.good { color: var(--good); border-color: rgb(52 194 107 / .4); }
.pill.bad { color: var(--bad); border-color: rgb(239 91 95 / .4); }
.pill.trophy { color: var(--accent); border-color: rgb(242 183 5 / .5); background: rgb(242 183 5 / .08); }
.pill.award { color: var(--text); }
.pill .ico { vertical-align: -2px; }
/* estrelas de título em cima da Sala de troféus, como num escudo (peça da direção B do estudo) */
.tc-stars { display: flex; justify-content: center; align-items: center; gap: 4px; color: var(--accent); margin-bottom: 4px; }
.tc-stars svg { fill: currentColor; }
.tc-stars b { font: 800 1.1rem var(--font-display); margin-left: 4px; }

.progress { height: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: left; background: var(--accent); border-radius: inherit; transition: transform .2s ease-out; }
.sim-log { min-height: 236px; }

/* ---------- resumo da temporada ---------- */
/* decisão sempre à mão no fim de uma página longa */
.actions-bar {
  position: sticky;
  bottom: 0;
  margin: 0 -16px calc(-48px - env(safe-area-inset-bottom));
  padding: 24px 16px calc(16px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  background: linear-gradient(180deg, transparent, var(--bg) 35%);
  z-index: 5;
}
.evo { text-align: left; }
.auto-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auto-row button { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.evo-table td { padding: 6px 4px; }
.evo-table td:nth-child(2), .evo-table td:nth-child(3) { color: var(--muted); }
.evo-table td:nth-child(5) { width: 48px; }
.evo-table td:last-child { width: 84px; text-align: right; }
.evo-table .pill { padding: 2px 8px; font-size: .75rem; }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 600 10px var(--font-body); }
.svg-font { font-family: var(--font-display); }
.c-axis { fill: var(--muted); }
.c-label { fill: var(--text); }
.halo { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-bar { fill: var(--accent); opacity: .55; }
.c-bar.best, .c-bar:hover { opacity: 1; }
.c-miss { fill: var(--bad); opacity: .7; }
.c-avg { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .7; }
.c-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.c-zone.g4 { fill: var(--blue); opacity: .12; }
.c-zone.z4 { fill: var(--bad); opacity: .12; }
.c-hit { fill: transparent; }
.c-hit:hover { fill: rgb(255 255 255 / .06); }

.event-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.event-log li { display: flex; flex-direction: column; gap: 4px; }
.event-log small { color: var(--muted); }
.event-log .pills { justify-content: flex-start; }

/* ---------- séries, clubes, copas e prêmios ---------- */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.seg button { min-height: 40px; padding: 0 4px; background: transparent; color: var(--muted); box-shadow: none; border-radius: 10px; font-family: var(--font-display); font-size: 1rem; }
.seg button.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.seg button:hover:not(.on) { color: var(--text); filter: none; }
/* nome do clube sempre numa linha: colunas largas o bastante e reticências só se ainda faltar espaço */
.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.club { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: none; text-align: left; font-size: .95rem; }
.club svg, .club img { flex: none; }
.club span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club:hover:not(:disabled) { border-color: var(--accent); filter: none; background: var(--panel-2); }

.comp { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-size: .85rem; }
.match.cup { border-color: rgb(242 183 5 / .55); background: linear-gradient(180deg, rgb(242 183 5 / .08), transparent 50%), var(--panel); }
.match.cup .comp { color: var(--accent); }
.cup-note { font-weight: 700; }
.cup-note.won { color: var(--accent); }
.cup-note.out { color: var(--bad); }
.cup-note.alive { color: var(--good); }

.cups { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.cups li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.cups .cup-name { font-weight: 700; }
.cups small { flex-basis: 100%; }
.group-table { flex-basis: 100%; font-size: .85rem; table-layout: fixed; margin-top: 4px; }
.group-table th:first-child, .group-table td:first-child { width: 26px; text-align: center; }
.group-table th:nth-child(n+3), .group-table td:nth-child(n+3) { width: 34px; text-align: right; }
.group-table tr.g4 td:first-child { box-shadow: inset 3px 0 var(--good); }
.group-table tr.me td { background: rgb(242 183 5 / .14); font-weight: 700; }
.up { color: var(--good); }
.down { color: var(--bad); }
.move { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; }
.move.up { color: var(--good); }
.move.down { color: var(--bad); }

.awards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.awards li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgb(0 0 0 / .2); border: 1px solid rgb(44 52 65 / .6); }
.awards li.mine { border-color: var(--accent); background: rgb(242 183 5 / .12); }
.awards b { display: block; }
.awards small { color: var(--muted); }
.aw-icon { display: grid; place-items: center; color: var(--accent); }
.aw-val { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; white-space: nowrap; }
.aw-val small { font-family: var(--font-body); font-size: .7rem; font-weight: 500; }

.crash pre { white-space: pre-wrap; text-align: left; font-size: .8rem; color: var(--bad); background: rgb(0 0 0 / .3); padding: 8px 10px; border-radius: 8px; margin: 0; }

/* ---------- ficha estilo D&D ---------- */
.sheet-head { position: relative; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; align-items: center; }
.sheet-box { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line); background: rgb(0 0 0 / .22); }
.sheet-box b { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; }
.sheet-box small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.sheet-box.on { border-color: var(--accent); background: rgb(242 183 5 / .12); }
.sheet-box.on b { color: var(--accent); }
.sheet-box.warn b { color: var(--warn); }

.sheet-sec { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sheet-sec h4, .sheet-sec .pts { position: relative; margin: 0; display: flex; align-items: center; gap: 8px; }
.sheet-sec h4 { font-family: var(--font-display); font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sheet-sec .pts { font-size: .95rem; }

/* blocos de atributo: modificador grande, valor no selo, +/− embaixo */
.abilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
.ability {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 10px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(0 0 0 / .2));
}
.ab-name { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; line-height: 1.15; min-height: 2.3em; display: grid; place-items: center; }
.ab-mod { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.ab-score { min-width: 40px; padding: 1px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-weight: 700; font-size: .9rem; text-align: center; font-variant-numeric: tabular-nums; }
.ability .steppers { margin-top: 6px; justify-content: center; }
.ability .step-btn { min-height: 30px; width: 30px; font-size: 1rem; }

/* perícias: ● proficiente, número = o que soma no d20 */
.skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 2px 14px; }
.skills li { display: grid; grid-template-columns: auto 34px 1fr auto; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid rgb(44 52 65 / .5); }
.skills .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); }
.skills li.prof .dot { background: var(--accent); border-color: var(--accent); }
.skills b { font-family: var(--font-display); font-size: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; }
.skills li:not(.prof) b, .skills li:not(.prof) span { color: var(--muted); }
.skills small { color: var(--muted); font-size: .7rem; letter-spacing: .05em; }
.rec-label { margin: 2px 0 -4px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; text-align: left; }

/* ajuda (i): botão redondo; o balão é um elemento só, fora dos cartões (.tip) */
button.info { display: inline-grid; place-items: center; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; vertical-align: middle;
  background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--muted); font: italic 700 .8rem/1 Georgia, serif;
  cursor: pointer; text-transform: none; letter-spacing: 0; }
button.info:hover:not(:disabled), button.info[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); filter: none; background: transparent; }
.tip { position: fixed; z-index: 90; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--accent);
  box-shadow: 0 10px 24px rgb(0 0 0 / .5); color: var(--text); font: 500 .85rem/1.45 var(--font-body); text-align: left; }

/* ---------- barra fixa de ação (rodapé) ---------- */
.sheet-sec .stats-grid { grid-template-columns: repeat(3, 1fr); }
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgb(14 17 22 / .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgb(0 0 0 / .35);
}
.dock-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.dock-info { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.dock-info b, .dock-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-info b { font-family: var(--font-display); font-size: 1.1rem; }
.dock-info small { color: var(--muted); font-size: .8rem; }
.dock button { flex: none; min-height: 50px; padding: 0 22px; }
@media (max-width: 420px) { .dock button { padding: 0 14px; font-size: .95rem; } }
@media (max-width: 899px) {
  .dock.in-col { display: none; }
  #app.has-dock { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:has(.dock) #toasts { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
/* desktop: a barra gruda logo abaixo da partida, na coluna principal, perto da ação */
@media (min-width: 900px) {
  .dock.fixed { display: none; }
  .dock.in-col { position: sticky; bottom: 12px; padding: 10px 10px 10px 16px; border: 1px solid var(--accent); border-radius: 16px; }
}

/* ---------- toast e confete ---------- */
#toasts {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  translate: -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast {
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .4);
  text-align: center;
  animation: toast-in .4s var(--ease) both, toast-out .3s 2.4s ease-in forwards;
}
.toast small { display: block; color: var(--muted); }
@keyframes toast-in { from { transform: translateY(30px); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(20px); opacity: 0; } }

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 12px; background: var(--c); border-radius: 2px; animation: fall var(--d) ease-in forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(var(--r)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* pré-temporada: pedido de negociação e empréstimo */
.pre { display: flex; flex-direction: column; gap: 8px; }
.pre p { margin: 0; }
.pre button { min-height: 44px; }

/* adversário sempre à vista durante o lance */
.fixture { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-size: 1.15rem; }
.fixture span { color: var(--accent); font-weight: 800; }
.fixture small { flex-basis: 100%; color: var(--muted); font: 500 .8rem var(--font-body); }
.fixture svg, .fixture img { flex: none; }

/* mobile, escolhendo a jogada: tudo compacto para as opções caberem na tela sem rolar */
@media (max-width: 899px) {
  .area-main:has(.options) { gap: 10px; }
  .area-main:has(.options) .die-wrap { margin: 0 auto; }
  .area-main:has(.options) .dice-pair .die-wrap { margin: 0; }
  .area-main:has(.options) .moment { font-size: 1.25rem; }
  .area-main:has(.options) .insp-toggle { min-height: 40px; }
  .area-main:has(.options) .opt { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  /* barra sem botão só repetiria o confronto: some e devolve o espaço */
  .dock.fixed:not(:has(button)) { display: none; }
  #app.has-dock:not(:has(.dock.fixed button)) { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* mobile: cabeçalho do jogador mais baixo */
@media (max-width: 899px) {
  .hud { padding: 8px 12px; gap: 4px 10px; border-radius: 14px; }
  .hud .jersey { width: 32px; height: 32px; }
  .who b { font-size: 1rem; line-height: 1.2; }
  .who small { font-size: .78rem; }
  .lvl { font-size: .85rem; }
  .lvl b { font-size: 1.3rem; }
  .xp { height: 5px; }
}

/* resultado do momento fora de campo: veredito → narração → o que mudou */
.verdict { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.verdict > b { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; }
.verdict.ok > b { color: var(--good); }
.verdict.fail > b { color: var(--bad); }
.verdict span { color: var(--muted); font: 500 .9rem var(--font-mono); }
.verdict span b { color: var(--text); }
.verdict small { font-size: .8rem; }
.fx-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.fx-box > small { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.fx-box .pill { font-size: 1rem; padding: 6px 14px; }
.fx-dice { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; color: var(--muted); font-size: .8rem; }
.fx-dice > span { display: inline-flex; align-items: center; gap: 4px; }
.fx-dice i { font-style: normal; }

/* ---------- itens ---------- */
.sheet-sec h4 .count { color: var(--muted); font: 500 .75rem var(--font-body); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item { width: 100%; min-height: 0; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; text-align: left;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--rar, var(--line)); box-shadow: none; font-weight: 500; }
.item:hover:not(:disabled) { background-color: var(--panel-2); filter: none; }
.item.on { background: rgb(242 183 5 / .08); border-color: var(--accent); border-left-color: var(--rar); }
.item-icon { font-size: 1.6rem; line-height: 1.2; }
.item-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.item-body b { font-size: 1rem; }
.item-body em { font-style: normal; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--rar, var(--muted)); }
.item-fx { font-size: .9rem; font-weight: 600; }
.item-body small { color: var(--muted); font-size: .8rem; font-style: italic; }
.item.comum { --rar: #9aa4b5; }
.item.incomum { --rar: #34c26b; }
.item.raro { --rar: #4fa3ff; }
.item.lendario { --rar: #f2b705; }
.loot { text-align: left; }
.loot h3, .loot > p { text-align: center; }
.loot > p { margin-bottom: 10px; }

/* ---------- elenco ---------- */
.area-squad { text-align: left; }
.area-squad > summary { cursor: pointer; list-style: none; text-align: center; }
.area-squad > summary::-webkit-details-marker { display: none; }
.area-squad > summary h3 { margin: 0; display: inline; }
.area-squad > summary::after { content: " ▾"; color: var(--muted); }
.area-squad[open] > summary::after { content: " ▴"; }
.area-squad[open] > summary { margin-bottom: 10px; }
.squad { list-style: none; margin: 0; padding: 0; }
.squad li { border-bottom: 1px solid rgb(44 52 65 / .5); }
.squad summary { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 2px; cursor: pointer; list-style: none; }
.squad summary::-webkit-details-marker { display: none; }
.sq-pos { font: 800 .8rem var(--font-display); color: var(--accent); text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: 1px 0; }
.sq-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-age { color: var(--muted); font-variant-numeric: tabular-nums; }
.squad summary b { font-family: var(--font-display); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sq-attrs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 2px 2px 10px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.sq-attrs span { display: flex; flex-direction: column; background: rgb(0 0 0 / .22); border-radius: 8px; padding: 4px 0; }
.sq-attrs small { color: var(--muted); font-size: .65rem; font-weight: 600; }
@media (max-width: 899px) { .area-squad { order: 4; } }

/* ---------- roguelike: diretoria, escolhas, inventário, legado ---------- */
.board { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.board h3 { text-align: center; }
.goal { display: flex; flex-direction: column; }
.goal small { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.goal b { font-family: var(--font-display); font-size: 1.2rem; }
.goal.ok b { color: var(--good); }
.goal.fail b { color: var(--bad); }
.conf { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.conf i { display: block; height: 100%; border-radius: inherit; background: var(--good); transition: width .4s; }
.conf.low i { background: var(--bad); }

.item { align-items: center; }
.item-act { margin-left: auto; flex: none; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.item.swap { border-style: dashed; border-color: var(--accent); }
.item.picked { border-color: var(--accent); }
.item:disabled { opacity: .55; }
.item.origin.on:disabled { opacity: 1; }
.slot-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 12px; color: var(--muted); font-size: .9rem; text-align: center; }
.swap-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; font-size: .9rem; color: var(--accent); }
.swap-hint b { color: var(--text); }
.swap-hint button { min-height: 36px; padding: 0 12px; font-size: .85rem; flex: none; }
.area-items, .area-stats { text-align: left; }
.area-items h3, .area-stats h3 { text-align: center; }
.area-items .rec-label:not(:first-of-type) { margin-top: 12px; }
.area-stats .stats-grid { grid-template-columns: repeat(3, 1fr); }
.item.talent { --rar: #b78cff; }
.talents { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.talents li { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; }
.talents small { grid-column: 2; color: var(--muted); font-size: .8rem; }

/* escolhas (recompensa e talento): um cartão embaixo do outro, em qualquer tela */
.items.choices { text-align: left; }
.item.choice { align-items: flex-start; }
.loot { border-color: var(--accent); }

.legacy { text-align: left; }
.legacy h3, .legacy > p { text-align: center; }
.legacy > p { margin-bottom: 10px; }
.hall { margin: 0; padding: 0; list-style: none; counter-reset: hall; }
.hall li { counter-increment: hall; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid rgb(44 52 65 / .5); }
.hall li::before { content: counter(hall) "º"; color: var(--muted); font-family: var(--font-display); width: 24px; }
.hall li > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hall small { color: var(--muted); font-size: .8rem; }
.hall li > b { font-family: var(--font-display); font-size: 1.2rem; color: var(--accent); }
@media (max-width: 899px) { .area-items { order: 3; } .area-shop { order: 3; } .area-stats { order: 4; } }

/* ---------- começo de carreira: os dados lado a lado ---------- */
.dice-trio { display: flex; justify-content: center; gap: 14px; }
.dice-trio > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dice-trio small { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

/* ---------- abas da tela principal (só no mobile) ---------- */
.hub-tabs { display: none; }
.dot-badge { display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
@media (max-width: 899px) {
  .hub-tabs { display: grid; position: sticky; top: 6px; z-index: 7; box-shadow: 0 8px 20px rgb(0 0 0 / .45); }
  #app[data-tab="jogo"] :is(.area-sheet, .area-items, .area-shop, .area-table, .area-cups, .area-squad, .area-stats, .area-reset),
  #app[data-tab="ficha"] :is(.area-main, .area-table, .area-cups, .area-squad, .area-stats, .area-reset),
  #app[data-tab="clube"] :is(.area-main, .area-sheet, .area-items, .area-shop, .area-stats, .area-reset),
  #app[data-tab="carreira"] :is(.area-main, .area-sheet, .area-items, .area-shop, .area-table, .area-cups, .area-squad) { display: none; }
  .area-squad { order: 5; }
}

/* ---------- ícones ---------- */
.ico { display: inline-block; vertical-align: -0.18em; flex: none; }
.item-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgb(255 255 255 / .05); color: var(--rar, var(--accent)); }
.item-icon .ico { width: 22px; height: 22px; }
.item.choice .item-icon { width: 46px; height: 46px; }
.item.choice .item-icon .ico { width: 26px; height: 26px; }
.item.arch { --rar: #c08bff; }
.t-ico { color: var(--accent); display: grid; place-items: center; }
.talents.arch { margin-bottom: 12px; }
.cup-ico { color: var(--accent); }
.key-badge, .venue, .pill, .move { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.move { white-space: nowrap; }
.mv.up { color: var(--good); } .mv.down { color: var(--bad); }
.history td { white-space: nowrap; }
.zebra { color: var(--accent); }
.by { white-space: nowrap; }
.by svg, .by img { vertical-align: middle; }

/* ---------- barra de cima: temporada, objetivo e confiança sempre à vista ---------- */
.hud-run, .hud-board { grid-column: 1 / -1; }
.hud-run { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--muted); }
.hud-run b { color: var(--text); }
.run-pips { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.run-pips i { width: 14px; height: 6px; border-radius: 3px; background: var(--line); }
.run-pips i.done { background: var(--good); }
.run-pips i.now { background: var(--accent); }
.hud-board { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgb(0 0 0 / .22); border: 1px solid var(--line); font-size: .85rem; }
.hud-board.danger { border-color: rgb(239 91 95 / .5); }
.hb-goal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.hb-goal b { color: var(--text); }
.hb-goal .ico, .hb-conf .ico { color: var(--accent); }
.hb-conf { color: var(--muted); white-space: nowrap; }
.hb-conf b { color: var(--text); }
.hud-board .conf { grid-column: 1 / -1; height: 6px; }
.hb-fired { grid-column: 1 / -1; margin: 0; color: var(--bad); font-weight: 600; }
@media (max-width: 899px) {
  .hud-run { font-size: .75rem; }
  .run-pips i { width: 8px; }
  .hud-board { padding: 6px 8px; font-size: .78rem; }
}

/* ---------- mercado ---------- */
.market-opts { display: grid; gap: 8px; }
.market-opts button, .market > button { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; justify-content: flex-start; text-align: left; min-height: 48px; }
.market-opts small, .market > button small { flex-basis: 100%; color: var(--muted); font-weight: 500; font-size: .8rem; padding-left: 24px; }
.offers { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.offer-row { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; text-align: left; background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.offer-row:hover:not(:disabled) { border-color: var(--accent); filter: none; }
.offer-row > span:not(.item-act) { display: flex; flex-direction: column; min-width: 0; }
.offer-row small { color: var(--muted); font-size: .8rem; font-weight: 500; }

/* ---------- seleção da Bola de Prata ---------- */
.selecao { text-align: left; }
.selecao h3, .selecao > p { text-align: center; }
.selecao > p { margin-bottom: 8px; }
.sel-list { list-style: none; margin: 0; padding: 0; }
.sel-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgb(44 52 65 / .5); }
.sel-list li.mine { background: rgb(242 183 5 / .12); border-radius: 8px; }
.sel-name { display: flex; flex-direction: column; min-width: 0; }
.sel-name small { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-name svg, .sel-name img { vertical-align: middle; }

/* ---------- duração da carreira (tela inicial) ---------- */
.seg.dur { grid-template-columns: 1fr 1fr; }
.seg.dur button { min-height: 56px; display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.1; }
.seg.dur small { font-family: var(--font-body); font-size: .72rem; color: var(--muted); font-weight: 500; }

/* ---------- área de reset com "Como jogar" ---------- */
div.area-reset { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- tour ---------- */
.tour-focus { position: relative; z-index: 60; box-shadow: 0 0 0 3px var(--accent), 0 0 0 100vmax rgb(0 0 0 / .72) !important; border-radius: 16px; }
.tour-focus.tour-fixed { position: fixed; }
.tour { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 16px; display: flex; justify-content: center; pointer-events: none; }
.tour.top { top: 0; bottom: auto; }
.tour-card { pointer-events: auto; width: min(420px, 100%); background: var(--panel-2); border: 1px solid var(--accent); border-radius: 16px; padding: 14px 16px; box-shadow: 0 16px 40px rgb(0 0 0 / .5); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.tour-card small { color: var(--accent); font-weight: 700; font-size: .75rem; letter-spacing: .08em; }
.tour-card b { font-family: var(--font-display); font-size: 1.3rem; }
.tour-card p { color: var(--muted); font-size: .95rem; }
.tour-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tour-btns button { min-height: 42px; padding: 0 16px; }

/* ---------- legado: cabeçalho, abas e grade de cartões ---------- */
.lg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; text-align: left; }
.lg-head h3 { text-align: left; margin-bottom: 2px; }
.lg-head p { font-size: .85rem; }
.lg-pts { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; padding: 6px 10px; border-radius: 12px;
  border: 1px solid var(--accent); background: rgb(242 183 5 / .1); line-height: 1; }
.lg-pts b { font-family: var(--font-display); font-size: 1.9rem; color: var(--accent); }
.lg-pts small { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.lg-cur { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 8px 12px; border-radius: 12px; background: rgb(0 0 0 / .22); text-align: left; font-size: .9rem; color: var(--muted); }
.lg-cur .ico { color: var(--accent); }
.lg-cur b { color: var(--text); }
.seg.lg-tabs { grid-template-columns: 1fr 1fr; margin-bottom: 4px; }
.seg.lg-tabs button { min-height: 50px; display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.1; }
.seg.lg-tabs small { font-family: var(--font-body); font-size: .7rem; color: var(--muted); font-weight: 500; }
.legacy .rec-label { text-align: left; margin: 14px 0 6px; }
.lg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lg-tile { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; text-align: left;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; font-weight: 500; }
.lg-tile:hover:not(:disabled) { border-color: var(--accent); background-color: var(--panel-2); filter: none; }
.lg-tile b { font-size: .95rem; line-height: 1.2; }
.lg-tile small { color: var(--muted); font-size: .8rem; line-height: 1.3; flex: 1; }
.lg-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(255 255 255 / .05); color: var(--accent); margin-bottom: 2px; }
.lg-state { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.lg-tile.on { border-color: var(--accent); background: rgb(242 183 5 / .1); }
.lg-tile.on:disabled { opacity: 1; }
.lg-tile.buy { border-style: dashed; border-color: rgb(242 183 5 / .6); }
.lg-tile.locked { opacity: .5; }
.lg-tile.locked .lg-ico, .lg-tile.locked .lg-state { color: var(--muted); }
@media (min-width: 560px) { .lg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- ficha: atributo com as perícias embaixo ---------- */
.abilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ability { align-items: stretch; text-align: left; padding: 10px; gap: 4px; }
.ab-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ability .ab-name { min-height: 0; display: block; text-align: left; }
.ab-mid { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ability .steppers { margin-top: 0; }
.ab-next { color: var(--accent); font-size: .72rem; font-weight: 600; }
.ab-skills { list-style: none; margin: 4px 0 0; padding: 4px 0 0; border-top: 1px solid rgb(44 52 65 / .7); display: grid; gap: 2px; }
.ab-skills li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 6px; border-radius: 6px; padding: 1px 2px; }
.ab-skills .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); }
.ab-skills li.prof .dot { background: var(--accent); border-color: var(--accent); }
.ab-skills span { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-skills b { font-family: var(--font-display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.ab-skills li:not(.prof) span, .ab-skills li:not(.prof) b { color: var(--muted); }
.sk-math { grid-column: 2 / -1; color: var(--muted); font-size: .68rem; line-height: 1.2; }
/* subir um atributo: ele e as perícias que mudaram piscam */
@keyframes flash-up { 0% { background: rgb(52 194 107 / .35); } 100% { background: transparent; } }
.ability.up .ab-mod, .ab-skills li.up { animation: flash-up 1.4s ease-out; }
.ability.up .ab-mod { border-radius: 8px; padding: 0 4px; }
.ab-skills li.up b { color: var(--good); }
/* passar o mouse no + mostra quais perícias ele afeta */
.ability:has(.step-btn:not(.minus):hover) .ab-skills li { background: rgb(242 183 5 / .08); }
@media (prefers-reduced-motion: reduce) { .ability.up .ab-mod, .ab-skills li.up { animation: none; background: rgb(52 194 107 / .15); } }

/* ---------- lances de jogo grande ---------- */
.lances { display: flex; justify-content: center; gap: 6px; }
.lances span { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--muted); }
.lances span.now { border-color: var(--accent); color: var(--accent); }
.lances span.ok { border-color: rgb(52 194 107 / .5); color: var(--good); }
.lances span.fail { border-color: rgb(239 91 95 / .5); color: var(--bad); }

/* ---------- inspiração no fim da temporada ---------- */
.insp-card { border-color: rgb(242 183 5 / .6); text-align: left; }
.insp-card h3, .insp-card > p { text-align: center; }
.insp-card > p { margin-bottom: 8px; }

/* ---------- rodapé: versão e novidades ---------- */
.site-foot { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px 24px; color: var(--muted); font-size: .8rem; }
.site-foot b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
button.link { min-height: 32px; padding: 0 4px; background: none; border: 0; box-shadow: none; color: var(--accent); font: 600 .8rem var(--font-body);
  text-decoration: underline; text-underline-offset: 3px; position: relative; }
button.link:hover { filter: none; color: var(--text); }
button.link.new::after { content: ""; position: absolute; top: 4px; right: -6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (max-width: 899px) { body:has(.dock.fixed button) .site-foot { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } }

dialog#changelog { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); color: var(--text); box-shadow: 0 24px 60px rgb(0 0 0 / .6); }
dialog#changelog::backdrop { background: rgb(0 0 0 / .65); }
dialog#changelog[open] { display: flex; flex-direction: column; }
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cl-head h2 { font-size: 1.4rem; }
.cl-close { min-height: 40px; width: 40px; padding: 0; font-size: 1.4rem; line-height: 1; }
.cl-body { overflow-y: auto; padding: 12px 16px 16px; text-align: left; display: grid; gap: 8px; }
.cl-ver { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgb(0 0 0 / .18); }
.cl-ver[open] { border-color: rgb(242 183 5 / .5); }
.cl-ver summary { cursor: pointer; font-size: .95rem; }
.cl-ver summary b { color: var(--accent); font-family: var(--font-display); font-size: 1.05rem; }
.cl-ver summary small { color: var(--muted); margin-left: 4px; }
.cl-ver ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .9rem; }
.cl-ver li::marker { color: var(--accent); }

/* ---------- cartão da tabela: abas e "Meus jogos" ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seg.mini-tabs { grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
.seg.mini-tabs button { min-height: 38px; font-size: .95rem; }
.games-sum { font-size: .82rem; margin-bottom: 8px; text-align: center; }
.empty { text-align: center; padding: 16px 0; }
.league.games td { white-space: nowrap; }
.league.games .tn { max-width: 0; width: 100%; }
.league.games .tn span { overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: calc(100% - 44px); vertical-align: middle; }
.league.games .tn small { color: var(--muted); margin-left: 4px; font-size: .7rem; }
.league.games .chip { height: 22px; min-width: 40px; font-size: .8rem; }
.league.games tr.key td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.g-tag { font-size: .72rem; font-weight: 700; color: var(--muted); }
.league.games b.up { color: var(--good); }
.league.games b.down { color: var(--bad); }
.league.games th:first-child, .league.games td:first-child { width: 44px; padding-right: 8px; }

/* ---------- botões + e − dos atributos ---------- */
.step-btn, .ability .step-btn { display: inline-grid; place-items: center; width: 32px; min-height: 32px; height: 32px; padding: 0; border-radius: 10px;
  background: rgb(242 183 5 / .12); color: var(--accent); border: 1px solid rgb(242 183 5 / .55); box-shadow: none; }
.step-btn:hover:not(:disabled) { background: var(--accent); color: #1a1400; border-color: var(--accent); filter: none; }
.step-btn:active:not(:disabled) { transform: scale(.92); }
.step-btn.minus { background: transparent; color: var(--muted); border-color: var(--line); }
.step-btn.minus:hover:not(:disabled) { background: var(--panel-2); color: var(--text); border-color: var(--muted); }
.step-btn .ico { width: 16px; height: 16px; stroke-width: 2.6; }

/* ---------- dados com volume: facetas, brilho, sombra no chão, rolagem em 3D e queda com impacto ---------- */
.die-wrap { position: relative; perspective: 700px; }
.die-wrap::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -4px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .55), transparent); z-index: -1; }
.rolling.die-wrap::after { animation: dice-shadow .5s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes dice-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 25%, 75% { transform: scaleX(.6); opacity: .5; } 50% { transform: scaleX(.85); opacity: .8; } }

/* queda: cai, amassa no impacto, quica e solta uma onda de luz */
.landed.die-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 3px solid var(--accent); transform: translate(-50%, -50%) scale(.6); opacity: 0; animation: dice-ring .7s .25s ease-out; pointer-events: none; }
.landed.crit-good.die-wrap::before { border-color: var(--accent); }
.landed.crit-bad.die-wrap::before { border-color: var(--bad); }
@keyframes dice-ring { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
.crit-good, .crit-bad { animation: crit-pulse 1.4s ease-in-out 2; }
@keyframes crit-pulse { 50% { filter: drop-shadow(0 0 30px currentColor) brightness(1.15); } }
.crit-good { color: var(--accent); }
.crit-bad { color: var(--bad); }
.die-wrap.drop { filter: grayscale(.7) drop-shadow(0 6px 8px rgb(0 0 0 / .3)); }
@media (prefers-reduced-motion: reduce) { .rolling.die-wrap::after, .landed.die-wrap::before, .crit-good, .crit-bad { animation: none; } }
.die-wrap.crit-good { filter: drop-shadow(0 0 18px var(--accent)) drop-shadow(0 10px 12px rgb(0 0 0 / .45)); }
.die-wrap.crit-bad { filter: drop-shadow(0 0 18px var(--bad)) drop-shadow(0 10px 12px rgb(0 0 0 / .45)); }

/* ---------- placar e minuto no lance ---------- */
.fixture.live .live-score { color: var(--text); background: rgb(0 0 0 / .35); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.live-min { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.live-min::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); margin-right: 5px; vertical-align: 1px; animation: live-dot 1.2s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .25; } }

/* ---------- playoffs da Série B ---------- */
.league tr.po td:first-child { box-shadow: inset 3px 0 var(--accent); }
.legend i.po { background: var(--accent); }
.cups li.mine { background: rgb(242 183 5 / .1); border-radius: 8px; }

/* ---------- barra de cima: números da temporada ---------- */
.hud-stats { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--muted); }
.hud-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.hud-stats .ico { color: var(--accent); }
@media (max-width: 899px) { .hud-stats { font-size: .74rem; } .hud-stats span { display: none; } }

/* ---------- dados em 3D (poliedros em CSS, ver dice3d.js) ---------- */
/* sem filter no .die-wrap enquanto gira: filtro em volta de 3D força redesenhar o dado inteiro a cada quadro */
.die-wrap.d3 { width: 132px; height: 132px; display: grid; place-items: center; perspective: 650px;
  --die-hi: #ffd970; --die: #f2b705; --die-lo: #b9850a; --ink: #2a1d00; }
.die-wrap.d3[data-s="4"]  { --die-hi: #ffb3a8; --die: #ef6a5a; --die-lo: #b8392b; --ink: #2a0b07; }
.die-wrap.d3[data-s="6"]  { --die-hi: #fffaf0; --die: #ece4d0; --die-lo: #c4b998; --ink: #241d0e; }
.die-wrap.d3[data-s="8"]  { --die-hi: #b5dbff; --die: #5aa5f0; --die-lo: #2a6cb8; --ink: #06182b; }
.die-wrap.d3[data-s="10"] { --die-hi: #ddc9ff; --die: #9d74f5; --die-lo: #6538c9; --ink: #160a2e; }
.die-wrap.d3[data-s="12"] { --die-hi: #b4f7cf; --die: #3fcf80; --die-lo: #1f8f52; --ink: #052814; }
.die-wrap.d3.crit-good { --die-hi: #fff1b8; --die: #ffd970; --die-lo: #f2b705; }
.die-wrap.d3.crit-bad { --die-hi: #ffc4c4; --die: var(--bad); --die-lo: #c83a3a; }
.d3-scene { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.d3-body { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
/* cada face: posição, tamanho e polígono (SVG) vêm do dice3d.js; borda escura em volta e a face com degradê por dentro */
.f3 { position: absolute; backface-visibility: hidden; }
.f3 svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.f3-edge { fill: color-mix(in srgb, var(--die-lo) 45%, #000); }
.d3-defs { position: absolute; width: 0; height: 0; }
.d3-defs .hi { stop-color: var(--die-hi); }
.d3-defs .mid { stop-color: var(--die); }
.d3-defs .lo { stop-color: var(--die-lo); }
.f3 b { position: absolute; translate: -50% -50%; font-weight: 800; line-height: 1; font-family: var(--font-display); color: var(--ink);
  text-shadow: 0 1px 0 rgb(255 255 255 / .45); white-space: nowrap; }
.f3 b.u { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .08em; }
.die-wrap.d3.idle .d3-body { animation: d3-idle 9s linear infinite; }
.die-wrap.d3.rolling .d3-body { animation: d3-spin .55s linear infinite; }
.die-wrap.d3.rolling .d3-scene { animation: d3-hop .28s ease-in-out infinite alternate; }
/* dois dados (vantagem/desvantagem) ou o trio do começo: cada um gira no seu ritmo, não em espelho */
.die-wrap.d3.rolling + .die-wrap.d3.rolling .d3-body,
.dice-trio > div + div .die-wrap.d3.rolling .d3-body { animation-duration: .63s; animation-direction: reverse; }
.die-wrap.d3.rolling + .die-wrap.d3.rolling .d3-scene,
.dice-trio > div + div .die-wrap.d3.rolling .d3-scene { animation-delay: -.14s; }
@keyframes d3-idle { from { transform: rotateX(20deg) rotateY(0); } to { transform: rotateX(20deg) rotateY(360deg); } }
@keyframes d3-spin { from { transform: rotateX(0) rotateY(0) rotateZ(0); } to { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); } }
@keyframes d3-hop { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.die-wrap.d3.landed .d3-scene { animation: d3-thud .5s .55s ease-out; }
@keyframes d3-thud { 30% { transform: translateY(3px) scale(1.04, .96); } 60% { transform: translateY(-4px); } }
/* tamanho menor com a propriedade scale (não transform): as animações de pulo usam transform e apagariam o scale */
.dice-pair.two .die-wrap.d3 { width: 112px; height: 112px; }
.dice-pair.two .d3-scene { scale: .85; }
.dice-trio .die-wrap.d3 { width: 92px; height: 92px; }
.dice-trio .d3-scene { scale: .72; }
.dice-trio.one .die-wrap.d3 { width: 132px; height: 132px; }
.dice-trio.one .d3-scene { scale: none; }
@media (max-width: 899px) {
  .area-main:has(.options) .die-wrap.d3 { width: 76px; height: 76px; }
  .area-main:has(.options) .d3-scene { scale: .58; }
}
@media (prefers-reduced-motion: reduce) { .die-wrap.d3 .d3-body, .die-wrap.d3 .d3-scene { animation: none !important; } }

/* ---------- janela de transferências ---------- */
.transfers { text-align: left; }
.transfers h3 { text-align: center; }
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tr-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgb(44 52 65 / .5); }
.tr-list li.mine { background: rgb(242 183 5 / .1); border-radius: 8px; }
.tr-kind { color: var(--accent); display: grid; }
.tr-who { display: flex; flex-direction: column; min-width: 0; }
.tr-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.tr-who small { color: var(--muted); font-size: .75rem; }
.tr-move { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.tr-more summary { cursor: pointer; color: var(--accent); font-size: .85rem; font-weight: 600; margin-top: 8px; }
.sq-new { font-style: normal; font-size: .65rem; font-weight: 700; color: var(--good); border: 1px solid rgb(52 194 107 / .4); border-radius: 999px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }

/* ---------- atributos: rolar de novo ou arranjo padrão ---------- */
.reroll-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.reroll-row button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; font-size: .9rem; }
.reroll-row small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.reroll-help { font-size: .78rem; margin-top: 8px; }

/* ---------- proposta: ir ou ficar com o mesmo peso ---------- */
.choice-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.club-choice { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 104px; padding: 12px 8px; }
.club-choice b { font-size: .95rem; line-height: 1.2; text-align: center; }
.club-choice small { color: var(--muted); font-size: .75rem; font-weight: 500; }
.club-choice:hover:not(:disabled) { border-color: var(--accent); }
/* 3 propostas + ficar: botões baixos (escudo ao lado do nome) para a barra não cobrir a tela no celular */
.choice-pair:has(> :nth-child(3)) .club-choice { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px;
  min-height: 0; padding: 8px 10px; justify-items: start; }
.choice-pair:has(> :nth-child(3)) .club-choice > :first-child { grid-row: span 2; }
.choice-pair:has(> :nth-child(3)) .club-choice b { text-align: left; font-size: .85rem; }

/* ---------- carreiras guardadas ---------- */
.saves { text-align: left; }
.saves h3 { text-align: center; }
.save-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.save-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.save-row { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; text-align: left; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); box-shadow: none; font-weight: 500; }
.save-row:hover:not(:disabled) { border-color: var(--accent); filter: none; }
.save-row > span:not(.item-act) { display: flex; flex-direction: column; min-width: 0; }
.save-row small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-del { width: 44px; min-height: 58px; padding: 0; }
div.area-reset { grid-template-columns: 1fr 1fr; }
div.area-reset button { font-size: .88rem; }

/* ---------- conquistas ---------- */
.ach-grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; text-align: left; }
.ach-grid li { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); opacity: .55; }
.ach-grid li.got { opacity: 1; border-color: rgb(242 183 5 / .55); background: rgb(242 183 5 / .08); }
.ach-ico { color: var(--muted); }
.ach-grid li.got .ach-ico { color: var(--accent); }
.ach-grid b { font-size: .88rem; line-height: 1.2; }
.ach-grid small { color: var(--muted); font-size: .72rem; line-height: 1.3; }
.sel-flag { color: var(--accent); margin-right: 4px; display: inline-grid; vertical-align: middle; }

/* ---------- meta: valor atual ---------- */
.goal-now { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; border: 1px solid var(--line); white-space: nowrap; }
.goal-now.ok { color: var(--good); border-color: rgb(52 194 107 / .45); }
.goal-now.off { color: var(--warn); border-color: rgb(247 197 49 / .45); }

/* ---------- pontos pendentes ---------- */
.need-points { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--accent); font-weight: 600; }
.actions-bar.locked button:not(.pts-go) { opacity: .45; pointer-events: none; }
#evo-card.flash-pts { animation: flash-pts 1.2s ease-out; }
@keyframes flash-pts { 0%, 40% { box-shadow: 0 0 0 3px var(--accent), var(--shadow); } 100% { box-shadow: var(--shadow); } }

/* ---------- ficha: hierarquia atributo → perícias ---------- */
.ability { padding: 12px; gap: 6px; }
.ab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ab-id { display: flex; flex-direction: column; gap: 2px; }
.ability .ab-name { font-size: .7rem; letter-spacing: .08em; }
.ability .ab-mod { font-size: 2.1rem; line-height: .95; }
.ab-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ability .ab-score { font-size: .78rem; padding: 0 8px; min-width: 0; color: var(--muted); background: transparent; }
.ab-skills { border-top: 1px solid rgb(44 52 65 / .7); padding-top: 6px; gap: 4px; }
.ab-skills li { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding: 3px 6px; border-radius: 8px; }
.ab-skills li.prof { background: rgb(242 183 5 / .07); }
.ab-skills .sk-name { font-size: .88rem; }
.ab-skills li.prof .sk-name { color: var(--text); font-weight: 600; }
.ab-skills li:not(.prof) .sk-name, .ab-skills li:not(.prof) b { color: var(--muted); }
.ab-skills b { font-size: 1.1rem; min-width: 30px; text-align: right; }
.ab-skills li.prof b { color: var(--accent); }
.sk-tag { font-style: normal; font-size: .68rem; font-weight: 700; padding: 0 6px; border-radius: 999px; white-space: nowrap; }
.sk-tag.prof { color: var(--accent); border: 1px solid rgb(242 183 5 / .4); }
.sk-tag.bonus { color: var(--good); border: 1px solid rgb(52 194 107 / .4); }
.ab-skills li:has(.sk-tag.prof) .sk-tag.bonus { margin-left: -2px; }
.ab-skills li { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.ab-skills li:not(:has(.sk-tag)) { grid-template-columns: minmax(0, 1fr) auto; }
.ab-skills li:has(.sk-tag):not(:has(.sk-tag + .sk-tag)) { grid-template-columns: minmax(0, 1fr) auto auto; }

/* ---------- desafio diário ---------- */
.daily { border-color: rgb(242 183 5 / .5); }
.daily > button { width: 100%; margin: 4px 0 6px; }
.daily-done { display: flex; align-items: center; gap: 6px; justify-content: center; color: var(--good); margin: 6px 0; }
.daily-done b { color: var(--text); }
.hall li.me { background: rgb(242 183 5 / .1); border-radius: 8px; }

/* ---------- tela inicial: duas colunas no desktop ---------- */
.start-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.start-grid, .start-col { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) {
  #app[data-step="start"] { max-width: 1080px; }
  .start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 20px; }
}

/* ---------- home: hierarquia ---------- */
.start-hero { flex-direction: column; text-align: center; }
.start-hero h1.logo + .lead { margin-top: 12px; }
.play-card { display: flex; flex-direction: column; gap: 10px; text-align: left; border-color: rgb(242 183 5 / .5); }
.play-title { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; }
.play-title .ico, .section-title .ico { color: var(--accent); }
.play-card > p.muted { font-size: .9rem; }
.play-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.play-foot b { color: var(--text); }
.play-foot .ico { color: var(--accent); }
.daily { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.progress-area { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.section-title { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); text-align: left; }
.prog-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.prog-stats div { display: flex; flex-direction: column; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: left; }
.prog-stats b { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); line-height: 1.1; }
.prog-stats small { color: var(--muted); font-size: .72rem; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h3 { margin: 0; }
details.fold > summary::after { content: "▾"; color: var(--muted); margin-left: 6px; }
details.fold[open] > summary::after { content: "▴"; }
details.fold[open] > summary { margin-bottom: 10px; }
details.fold > summary .muted { font-size: .8rem; margin-left: auto; }
@media (min-width: 900px) {
  #app[data-step="start"] .saves { max-width: none; }
}
@media (max-width: 520px) { .prog-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.daily-date { margin-left: auto; font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--accent); border: 1px solid rgb(242 183 5 / .5); border-radius: 999px; padding: 2px 10px; }
.daily .rec-label { margin-top: 6px; }
.daily > button { margin: 0; }
.daily .rec-label { text-align: left; }
.daily > p.muted { text-align: left; }
/* nova carreira e desafio do dia com a mesma altura */
.start-grid:has(> .play-card) { align-items: stretch; }
.start-grid > .daily { height: 100%; }

/* ---------- ousadia: lance difícil acertado ---------- */
.pill.dare { background: rgb(247 197 49 / .12); border-color: rgb(247 197 49 / .5); color: var(--warn); font-weight: 700; }
.pill.dare.genio { background: rgb(180 130 255 / .16); border-color: rgb(180 130 255 / .55); color: #d4b8ff; }
.dare-hint { margin-left: 4px; font-size: .85em; }

/* ---------- como funciona (primeira visita e link da tela inicial) ---------- */
.about-link { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.about-hero .lead { max-width: 560px; }
.about-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); counter-reset: step; }
.about-steps li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: left; counter-increment: step; }
.about-steps li .ico { grid-row: span 2; color: var(--accent); margin-top: 2px; }
.about-steps li b::before { content: counter(step) ". "; color: var(--accent); }
.about-steps small { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.about-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.about-card { text-align: left; }
.about-card h3 { display: flex; align-items: center; gap: 8px; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.about-card h3 .ico { color: var(--accent); }
.about-card.warn h3 .ico { color: var(--warn); }
.about-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.about-list b { color: var(--text); }
.about-cta { display: flex; justify-content: center; }
.about-cta button { min-width: 240px; }
#app[data-step="about"] { max-width: 1080px; }
@media (max-width: 599px) { .about-steps, .about-grid { grid-template-columns: 1fr; } }

/* ---------- escolher meu caminho: posição ---------- */
.pos-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pos-pick { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: none; text-align: left; }
.pos-pick:hover:not(:disabled) { border-color: var(--accent); filter: none; }
.pos-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pos-body > b { font-size: 1.05rem; }
.pos-body small { color: var(--muted); font-weight: 500; font-size: .82rem; }
.pos-body .pills { justify-content: flex-start; }
.pos-prof { font-size: .75rem !important; }

/* ---------- salário e loja ---------- */
.area-shop { text-align: left; }
.area-shop h3 { text-align: center; }
.area-shop .rec-label { margin-top: 12px; }
.shop-cash { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }
.shop-cash b { color: var(--accent); font: 800 1.3rem var(--font-display); }
.shop-cash small { color: var(--muted); margin-left: auto; }
.item em { display: block; font-style: normal; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rar, var(--muted)); }
.cons { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: none; text-align: left; }
.cons:hover:not(:disabled) { border-color: var(--accent); filter: none; }
.cons .item-body small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; }
.cons:disabled { opacity: .45; cursor: not-allowed; }
.pay-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.pay-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pay-card { text-align: left; }
.pay-card h3 { text-align: center; }
.shop-fame { margin: 6px 0 0; font-size: .8rem; }
.shop-fame .ico { color: var(--accent); }