/* Collector Idle — sistema visual "arquivo de colecionador".
   Neutro quase preto, linhas finas, serifa editorial nos títulos, mono para catálogo e números,
   um único acento cor de carimbo. Brilho holográfico só onde a carta é de fato especial. */

:root {
  --card-ratio: 63 / 88;   /* carta de TCG */
  --line: #232327;
  --line-2: #2e2e34;
  --text: #ededed;
  --text-2: #b4b4bb;
  --muted: #8b8b93;
  --faint: #5c5c64;
  --stamp: #ff6a3d;
  --stamp-ink: #1a0700;
  --good: #4ade80;
  --bad: #f87171;
  --r-comum: #a1a1aa;
  --r-incomum: #6ee7b7;
  --r-rara: #7cb7ff;
  --r-holo: #c9a6ff;
  --r-secreta: #f0b45a;

  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;

  --z-modal: 50;
  --z-toast: 60;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--text);
  font: 400 15px/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 600; }
p { margin: 0; }
a { color: var(--text); text-underline-offset: 3px; }
.i { flex: none; display: inline-block; vertical-align: -0.2em; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.tiny { font-size: 0.75rem; }
.mono { font-family: var(--f-mono); font-feature-settings: "tnum"; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding: 8px 0 4px; }
.page-head h1 { font: 800 clamp(2.2rem, 6vw, 3.2rem)/1 var(--f-display); letter-spacing: -0.02em; }
.page-head h1 em { color: var(--muted); }
.eyebrow { font: 500 0.7rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }


/* ---------- Painéis ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head h2 { font-size: 1rem; font-weight: 600; margin-top: 4px; letter-spacing: -0.005em; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.split { display: grid; gap: 16px; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 1fr; } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kpi { padding: 12px 14px; border-right: 1px solid var(--line); margin-right: -1px; }
.kpi .value { font: 800 1.5rem/1.15 var(--f-display); font-feature-settings: "tnum"; letter-spacing: -0.02em; margin-top: 6px; }
.kpi .value small { font-size: 0.9rem; color: var(--muted); }
.kpi .sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.bar { height: 4px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--text); border-radius: inherit; transition: width 600ms var(--ease); }
.bar.good > i { background: var(--good); }
.bar.stamp > i { background: var(--stamp); }
.bar.thin { height: 3px; }

.progress-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.progress-row .bar { grid-column: 1 / -1; }

/* ---------- Botões, chips, tags ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text);
  font-size: 0.88rem; font-weight: 500;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 120ms var(--ease);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (hover: hover) and (pointer: fine) { .btn.primary:hover:not(:disabled) { background: #fff; } }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .btn.ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); } }
.btn.danger { color: var(--bad); border-color: #4a2424; background: transparent; }
.btn.small { min-height: 32px; padding: 5px 10px; font-size: 0.8rem; }
.btn.block { width: 100%; }
.btn .price { font-family: var(--f-mono); font-feature-settings: "tnum"; opacity: 0.85; }

.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted);
  border-radius: 7px; padding: 6px 12px; font-size: 0.84rem; font-weight: 500; white-space: nowrap; min-height: 34px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip:hover { color: var(--text); }
.chip.active { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip.locked { color: var(--faint); }
@media (max-width: 520px) {
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .chip { padding: 6px 10px; font-size: 0.8rem; }
}

.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px;
  font: 500 0.66rem/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); white-space: nowrap;
}
.tag.r-comum { color: var(--r-comum); border-color: color-mix(in srgb, var(--r-comum) 30%, transparent); }
.tag.r-incomum { color: var(--r-incomum); border-color: color-mix(in srgb, var(--r-incomum) 30%, transparent); }
.tag.r-rara { color: var(--r-rara); border-color: color-mix(in srgb, var(--r-rara) 30%, transparent); }
.tag.r-holo { color: var(--r-holo); border-color: color-mix(in srgb, var(--r-holo) 35%, transparent); }
.tag.r-secreta { color: var(--r-secreta); border-color: color-mix(in srgb, var(--r-secreta) 35%, transparent); }
.tag.new { background: var(--stamp); color: var(--stamp-ink); border-color: var(--stamp); font-weight: 600; }
.tag.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }

/* ---------- Listas, diário, tabelas ---------- */
.list { display: grid; gap: 8px; }
.item { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface-2); }
.rows > * + * { border-top: 1px solid var(--line); }
.journal { max-height: 380px; overflow: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.entry { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; font-size: 0.87rem; }
.entry + .entry { border-top: 1px solid var(--line); }
.glyph { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--line-2); color: var(--text-2); background: var(--surface-2); }
.entry .glyph.k-discovery, .entry .glyph.k-master { color: var(--r-holo); }
.entry .glyph.k-objective, .entry .glyph.k-achievement { color: var(--r-secreta); }
.entry .glyph.k-capped { color: var(--stamp); }
.entry time { font: 0.72rem var(--f-mono); color: var(--faint); white-space: nowrap; }

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { padding: 8px 4px; text-align: left; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { font: 500 0.68rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
td.num, th.num { white-space: nowrap; text-align: right; font-family: var(--f-mono); font-feature-settings: "tnum"; }

.field { display: grid; gap: 6px; }
input[type=range] { width: 100%; accent-color: var(--text); height: 24px; }
select, input[type=number], textarea {
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; min-height: 36px;
}
textarea { width: 100%; font: 0.78rem/1.5 var(--f-mono); resize: vertical; }
.switch { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 10px 0; }
.switch + .switch { border-top: 1px solid var(--line); }
.switch input[type=checkbox] { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); position: relative; flex: none; cursor: pointer; transition: background var(--dur) var(--ease); }
.switch input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.switch input[type=checkbox]:checked { background: var(--text); border-color: var(--text); }
.switch input[type=checkbox]:checked::after { transform: translateX(16px); background: var(--bg); }

.note { display: flex; gap: 10px; align-items: start; font-size: 0.85rem; color: var(--text-2); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.note .i { margin-top: 2px; color: var(--muted); }
.note.stamp { border-color: color-mix(in srgb, var(--stamp) 40%, var(--line)); }
.note.stamp .i { color: var(--stamp); }

/* ---------- Timer de entrega ---------- */
.delivery { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.spec { display: grid; gap: 8px; font-size: 0.85rem; }
.spec div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line-2); padding-bottom: 6px; }
.spec div:last-child { border: 0; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; font-family: var(--f-mono); font-feature-settings: "tnum"; }
@media (max-width: 420px) { .delivery { grid-template-columns: 1fr; justify-items: center; } .spec { width: 100%; } }

/* ---------- Cartas ---------- */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); perspective: 900px; }
.cards.mini { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
@media (max-width: 520px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 8px; } .cards.mini { grid-template-columns: repeat(5, 1fr); } }

.card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; aspect-ratio: var(--card-ratio); width: 100%; border-radius: 7px; overflow: hidden; padding: 0;
  border: 1px solid var(--line-2); background: var(--surface-2); isolation: isolate;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color var(--dur) var(--ease);
  will-change: transform;
}
.card.owned { background: linear-gradient(110deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 300% 100%; animation: skeleton 1.6s linear infinite; }
.card.owned:has(img.loaded), .card.owned:has(.art-svg) { animation: none; background: var(--surface-2); }
.card.owned:hover { box-shadow: 0 14px 30px -10px rgb(20 18 70 / 0.55); border-color: var(--line-2); }
.card.tilting { transition: transform 60ms linear, box-shadow 260ms var(--ease); }
@keyframes skeleton { to { background-position: -300% 0; } }

.card img, .card .art-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.card img { opacity: 0; transition: opacity 300ms var(--ease); }
.card img.loaded { opacity: 1; }

/* Slot vazio do álbum: capa plástica tracejada com a carta "fantasma". */
.card.missing { border: 1.5px dashed var(--line-2); background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(11 30 51 / 0.035) 6px 7px), var(--surface); animation: none; }
.card.missing img, .card.missing .art-svg { filter: grayscale(1); opacity: 0.07; }
.card.missing img.loaded { opacity: 0.07; }
.card.missing .slot { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; gap: 4px; padding: 8px; }
.card.missing .slot b { font: 800 1.05rem/1 var(--f-display); color: var(--text-2); letter-spacing: -0.02em; }
.card.missing .slot span { font-size: 0.68rem; color: var(--muted); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card.missing:hover { border-color: var(--muted); }
.card.missing:hover .slot b { color: var(--text); }

.card .num, .card .count, .card .newtag, .card .prot { position: absolute; z-index: 4; }
.card .count { top: 5px; right: 5px; font: 600 0.66rem/1 var(--f-mono); padding: 3px 5px; border-radius: 4px; background: rgb(10 10 11 / 0.82); color: #fff; backdrop-filter: blur(4px); }
.card .newtag { top: 5px; left: 5px; }
.cards.mini .newtag { top: 5px; left: 5px; width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: 0 0 0 2px rgb(10 10 11 / 0.8); }
.cards.mini .count { top: 4px; right: 4px; font-size: 0.58rem; padding: 2px 4px; }
.card .prot { bottom: 5px; right: 5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgb(10 10 11 / 0.82); color: #fff; }

/* Brilho holográfico guiado pelo ponteiro (inspirado em "Holo Card" do 21st.dev). */
.card.owned.r-holo::after, .card.owned.r-secreta::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / 0.55), transparent 42%),
    conic-gradient(from 200deg at var(--mx) var(--my), #ff7ac6, #ffd36a, #7cffb2, #6ac8ff, #b28cff, #ff7ac6);
  mix-blend-mode: color-dodge; opacity: 0.12; transition: opacity 300ms var(--ease);
}
.card.owned.r-holo:hover::after, .card.owned.r-secreta:hover::after, .card.tilting::after { opacity: 0.38; }
.card.owned.r-holo { border-color: color-mix(in srgb, var(--r-holo) 45%, var(--line-2)); }
.card.owned.r-secreta { border-color: color-mix(in srgb, var(--r-secreta) 55%, var(--line-2)); }

.page-block { display: grid; gap: 10px; }
.page-label { display: flex; align-items: center; gap: 10px; }
.page-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.dex { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.sp { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.82rem; color: var(--faint); }
.sp .no { font: 0.72rem var(--f-mono); color: var(--faint); }
.sp .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; }
.sp .mark { flex: none; width: 20px; display: grid; place-items: center; }
.sp.on { color: var(--text); background: var(--surface-2); }
.sp.on .dot { background: var(--tc); }
.sp.on .no { color: var(--muted); }

.family { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.stage { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); font-size: 0.82rem; color: var(--faint); }
.stage .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.stage.on { color: var(--text); background: var(--surface-3); }
.stage.on .dot { background: var(--tc); }
.family .sep { color: var(--faint); }


.offer { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.need { display: flex; gap: 6px; flex-wrap: wrap; }
.need span { font: 0.76rem var(--f-mono); padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line-2); }
.need span.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.need span.no { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }


.seals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.seal { display: grid; gap: 10px; padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--faint); }
.seal .i { color: var(--faint); }
.seal.on { border-style: solid; color: var(--text); background: var(--surface-2); }
.seal.on .i { color: var(--r-secreta); }
.seal b { font: 800 1.35rem/1 var(--f-display); }

.rank { font: 800 clamp(1.8rem, 5vw, 2.6rem)/1.05 var(--f-display); }

/* ---------- Modal ---------- */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal); background: rgb(0 0 0 / 0.62); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 16px; animation: fade 180ms var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.dialog {
  width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: #0f0f11; border: 1px solid var(--line-2); border-radius: 18px; padding: 24px;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.9); display: grid; gap: 18px;
  animation: pop 220ms var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
.dialog.wide { width: min(820px, 100%); }
.dialog-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.dialog-head h2 { font: 800 1.9rem/1.05 var(--f-display); letter-spacing: -0.01em; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); flex: none; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { color: var(--text); } }
.detail { display: grid; grid-template-columns: minmax(160px, 230px) 1fr; gap: 20px; perspective: 900px; }
@media (max-width: 540px) { .detail { grid-template-columns: 1fr; } .detail .card { max-width: 230px; margin: 0 auto; } }

/* Manifesto de entrega (resumo de retorno) */
.manifest { position: relative; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); overflow: hidden; }
.manifest-top { padding: 16px 18px; display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.manifest-top .big { font: 800 2.4rem/1 var(--f-display); letter-spacing: 0; }
.perf { position: relative; height: 1px; margin: 0 14px; border-top: 1px dashed var(--line-2); }
.perf::before, .perf::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line-2); }
.perf::before { left: -24px; } .perf::after { right: -24px; }
.ledger { padding: 12px 18px 16px; display: grid; gap: 8px; }
.ledger div { display: flex; align-items: baseline; gap: 8px; font-size: 0.88rem; }
.ledger div::after { content: none; }
.ledger .dots { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.ledger .v { font-family: var(--f-mono); font-feature-settings: "tnum"; }


/* ---------- Toasts ---------- */
/* Avisos centralizados acima do dock e do aviso do Caixa (que fica no canto, em cima do dock).
   As medidas repetem as da tela de jogo (.game): barra, folgas e dock (celular 142 px, computador 96 px);
   o 62 de folga deixa passar o Caixa (46 px + 10 + 6). Com uma janela aberta, o aviso desce para logo
   acima da barra inferior, que é onde a janela termina. */
#toasts { --t-bar: calc(66px + 16px + env(safe-area-inset-bottom, 0px)); --t-dock: 142px;
  position: fixed; z-index: var(--z-toast); left: 50%; transform: translateX(-50%); bottom: calc(var(--t-bar) + var(--t-dock) + 62px);
  display: grid; justify-items: center; gap: 8px; pointer-events: none; width: min(420px, calc(100% - 24px)); }
@media (min-width: 701px) { #toasts { --t-bar: calc(70px + 16px + env(safe-area-inset-bottom, 0px)); --t-dock: 96px; } }
body:has(.game-win .window) #toasts { bottom: calc(var(--t-bar) + 10px); }
.toast { display: flex; gap: 10px; align-items: center; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; font-size: 0.86rem; box-shadow: 0 12px 30px -8px rgb(0 0 0 / 0.7); animation: rise 240ms var(--ease); }
.toast .i { color: var(--muted); }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity 160ms ease-in, transform 160ms ease-in; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.dev { border-style: dashed; border-color: var(--line-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .card { transform: none !important; }
}

/* ---------- Depósito e pacotes lacrados ---------- */

.pack {
  --pc: #888;
  position: relative; aspect-ratio: 5 / 7.4; width: 100%; border-radius: 4px; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.22) 45%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--pc) 85%, #fff) 0%, var(--pc) 45%, color-mix(in srgb, var(--pc) 55%, #000) 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 18px 30px -12px rgb(0 0 0 / 0.8);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 8px 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 8px 51% repeat-x;
}
.pack::before { content: ""; position: absolute; left: 0; right: 0; top: 7%; height: 1px; background: rgb(0 0 0 / 0.35); box-shadow: 0 1px 0 rgb(255 255 255 / 0.2); z-index: 2; }
.pack::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7%; height: 1px; background: rgb(0 0 0 / 0.35); z-index: 2; }
.pack .band { position: absolute; left: 0; right: 0; top: 30%; height: 34%; background: rgb(10 10 11 / 0.82); display: grid; place-items: center; padding: 8px; }
.pack .band img { max-width: 86%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6)); }
.pack .band b { font: 800 clamp(0.85rem, 1.1vw + 0.5rem, 1.15rem)/1.05 var(--f-display); color: #fff; text-align: center; overflow-wrap: anywhere; }
.pack .meta { white-space: nowrap; position: absolute; left: 10%; right: 10%; bottom: 13%; display: flex; justify-content: space-between; font: 600 0.55rem/1 var(--f-mono); letter-spacing: 0.12em; color: rgb(255 255 255 / 0.9); text-transform: uppercase; text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
.pack .brand { position: absolute; top: 12%; left: 0; right: 0; text-align: center; font: 600 0.5rem/1 var(--f-mono); letter-spacing: 0.3em; color: rgb(255 255 255 / 0.85); }
.pack .strip { position: absolute; left: 0; right: 0; top: 0; height: 7%; z-index: 3; }

/* ---------- Abertura ---------- */
.opener { display: grid; justify-items: center; gap: 18px; text-align: center; width: min(760px, 100%); }
@keyframes hover { 50% { transform: translateY(-6px) rotate(-1deg); } }

.spread-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: 100%; perspective: 1200px; }
@media (max-width: 560px) { .spread-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.flip { position: relative; aspect-ratio: var(--card-ratio); border: 0; padding: 0; background: none; transform-style: preserve-3d; transition: transform 520ms var(--ease); animation: deal 420ms var(--ease) backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes deal { from { opacity: 0; transform: translateY(-40px) rotate(-6deg); } }
.flip.up { transform: rotateY(180deg); }
.flip .face, .flip .back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 7px; overflow: hidden; }
.flip .face { transform: rotateY(180deg); }
.flip .face .card { height: 100%; transform: none; }
.flip .back {
  border: 1px solid var(--line-2);
  background: radial-gradient(circle at 50% 50%, transparent 22%, rgb(255 255 255 / 0.05) 23% 25%, transparent 26%), repeating-linear-gradient(45deg, #17171a 0 6px, #1b1b1f 6px 12px);
  display: grid; place-items: center; color: var(--faint);
}
.flip .back::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--stamp) 55%, var(--line-2)); background: radial-gradient(circle, var(--surface) 45%, transparent 47%), conic-gradient(var(--line-2) 0 50%, transparent 50%); box-shadow: 0 0 0 6px rgb(255 255 255 / 0.02); }
.flip:not(.up):hover { transform: translateY(-4px); }
.flip.up.special .face { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 60%, transparent), 0 0 34px color-mix(in srgb, var(--glow) 50%, transparent); overflow: visible; }
.flip.up.special .face .card { border-radius: 7px; }
.flip .stamp { position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotateY(180deg); z-index: 6; backface-visibility: hidden; }
.opener .hint { font: 0.72rem var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Fichário ---------- */
.binder { display: grid; gap: 14px; }
.binder-cover {
  position: relative; padding: 18px; border-radius: 18px;
  background: radial-gradient(120% 80% at 20% 0%, #1c1c20 0%, #121214 60%), #121214;
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 0 6px #0e0e10, inset 0 0 0 7px #2a2a30, 0 30px 60px -30px rgb(0 0 0 / 0.9);
}
.binder-cover::before { content: ""; position: absolute; inset: 10px; border-radius: 12px; border: 1px dashed rgb(255 255 255 / 0.07); pointer-events: none; }
.spread { position: relative; display: grid; grid-template-columns: 1fr 34px 1fr; perspective: 1600px; }
.spread.single { grid-template-columns: 34px 1fr; }
/* Folhas claras, como as páginas do fichário do Pocket; a capa em volta continua na cor escolhida. */
.sheet {
  position: relative; padding: 16px 16px 12px; border-radius: 8px; display: grid; gap: 12px; align-content: start;
  background: linear-gradient(90deg, rgb(11 30 51 / 0.10), transparent 8%), var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 24px rgb(11 30 51 / 0.06);
}
.sheet.left { background: linear-gradient(270deg, rgb(11 30 51 / 0.12), transparent 8%), var(--panel); }
.sheet.blank { display: grid; place-items: center; color: var(--faint); font: 0.75rem var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; min-height: 300px; }
.sheet.turn-next { transform-origin: left center; animation: turnNext 380ms var(--ease); }
.sheet.turn-prev { transform-origin: right center; animation: turnPrev 380ms var(--ease); }
@keyframes turnNext { from { transform: rotateY(-28deg); opacity: 0.3; } }
@keyframes turnPrev { from { transform: rotateY(28deg); opacity: 0.3; } }
.rings { display: grid; align-content: space-evenly; justify-items: center; }
.rings i { width: 22px; height: 34px; border-radius: 11px; border: 3px solid #3a3a42; border-left-color: #55555f; background: linear-gradient(90deg, #0d0d0f, #1d1d22); box-shadow: 0 2px 4px rgb(0 0 0 / 0.6); }
.pockets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pocket { position: relative; border-radius: 6px; padding: 4px; background: rgb(11 30 51 / 0.035); box-shadow: inset 0 0 0 1px rgb(11 30 51 / 0.08), inset 0 -10px 18px rgb(11 30 51 / 0.06); }
.pocket::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; background: linear-gradient(125deg, rgb(255 255 255 / 0.08) 0%, transparent 28%, transparent 70%, rgb(255 255 255 / 0.04) 100%); box-shadow: inset 0 7px 0 -6px rgb(255 255 255 / 0.12); }
.pocket .card { border-radius: 5px; }
.pocket .card.missing { border: 1px dashed var(--line-2); background: transparent; }
.pocket.void { aspect-ratio: var(--card-ratio); background: transparent; box-shadow: inset 0 0 0 1px rgb(11 30 51 / 0.05); }
.sheet footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 0.68rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 4px; border-top: 1px solid var(--line); }
.sheet footer .done { color: var(--good); display: inline-flex; gap: 4px; align-items: center; }
.binder-nav { display: flex; justify-content: center; align-items: center; gap: 14px; }
.binder-nav .where { font: 0.78rem var(--f-mono); color: var(--text-2); min-width: 150px; text-align: center; }
.page-dots { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.page-dots button { width: 26px; height: 26px; border: 0; background: none; display: grid; place-items: center; padding: 0; }
.page-dots button i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.page-dots button.done i { background: color-mix(in srgb, var(--good) 60%, var(--line-2)); }
.page-dots button.cur i { background: var(--text); transform: scale(1.4); }
@media (max-width: 560px) {
  .binder-cover { padding: 10px; border-radius: 14px; }
  .binder-cover::before { inset: 5px; }
  .spread.single { grid-template-columns: 18px 1fr; }
  .rings i { width: 12px; height: 22px; border-width: 2px; }
  .sheet { padding: 10px 10px 8px; }
  .pockets { gap: 6px; }
  .pocket { padding: 3px; }
}
.flip-x { transform: scaleX(-1); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
#spread { touch-action: pan-y; }
@media (max-width: 420px) {
  .page-dots { gap: 0; }
  .page-dots button { width: 22px; height: 26px; }
}

/* ---------- Polimento ---------- */
.ink { color: var(--text); font-weight: 500; }
.timer-big { display: block; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.03em; margin-top: 2px; }
.locked-row { opacity: 0.55; }
@keyframes breathe { 50% { transform: translateY(-3px); } }


/* Botão de compra: só a melhoria recomendada é primária */
.btn.buy { border-color: var(--line-2); background: var(--raised); }
@media (hover: hover) and (pointer: fine) { .btn.buy:hover:not(:disabled) { border-color: var(--text); } }
.short { font: 0.75rem var(--f-mono); color: var(--faint); }

/* Legenda da carta revelada */
.deal-col { display: grid; gap: 8px; align-content: start; }
.deal-col .cap { opacity: 0; transform: translateY(-4px); transition: opacity 260ms var(--ease) 260ms, transform 260ms var(--ease) 260ms; text-align: center; display: grid; gap: 4px; justify-items: center; min-height: 40px; }
.deal-col.up .cap { opacity: 1; transform: none; }
.deal-col .cap b { font-size: 0.78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kbd { font: 0.68rem var(--f-mono); padding: 1px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; color: var(--text-2); }

/* Selos e destaques */
.seal .bar { margin-top: 2px; }
.hl { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; }
.hl + .hl { border-top: 1px solid var(--line); }
.hl .card { width: 44px; }
.offer .card.preview { border-color: var(--line-2); }
.deal-col { min-width: 0; } .deal-col .flip { width: 100%; }
@media (max-width: 560px) { .spread-cards { display: flex; flex-wrap: wrap; justify-content: center; } .spread-cards .deal-col { width: calc((100% - 16px) / 3); } }

/* ---------- Pacote dourado ---------- */
:root { --gold: #e8b84a; --gold-2: #f6dc8c; }
.gold-txt { color: var(--gold-ink); }
.pack.golden {
  background:
    linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.35) 45%, transparent 60%),
    linear-gradient(160deg, #fff2bf 0%, #e8b84a 28%, #a8761c 55%, #f5d77a 80%, #8a5a12 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 0 28px -4px rgb(232 184 74 / 0.55), 0 18px 30px -12px rgb(0 0 0 / 0.8);
}
.pack.golden .band { background: rgb(24 16 2 / 0.86); }
.pack.golden .brand, .pack.golden .meta { color: #2a1a00; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }
.pack .shine { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.65) 50%, transparent 62%) 0 0 / 260% 100%; mix-blend-mode: overlay; animation: sweep 2.6s ease-in-out infinite; }
@keyframes sweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.opener.golden .stage::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(circle, rgb(232 184 74 / 0.35), transparent 62%); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; transform: scale(0.94); } }
.opener.golden .flip .back { border-color: rgb(232 184 74 / 0.5); background: radial-gradient(circle at 50% 50%, transparent 22%, rgb(232 184 74 / 0.12) 23% 25%, transparent 26%), repeating-linear-gradient(45deg, #1d1606 0 6px, #241b07 6px 12px); }
.opener.golden .flip .back::after { border-color: var(--gold); }

.gold-callout { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md); text-align: left; font-size: 0.85rem;
  border: 1px solid rgb(232 184 74 / 0.45); background: linear-gradient(90deg, rgb(232 184 74 / 0.14), rgb(232 184 74 / 0.03)); color: var(--text); }
.gold-callout .i:first-child { color: var(--gold-ink); }
.gold-callout .go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--gold-ink); font-weight: 800; white-space: nowrap; }
.gold-callout:hover { border-color: var(--gold); }
.gold-odds { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid rgb(232 184 74 / 0.45); background: color-mix(in srgb, #ffcb05 14%, var(--raised, #fff)); }
.gold-tag { color: var(--gold-ink); border-color: rgb(232 184 74 / 0.6); background: color-mix(in srgb, #ffcb05 14%, var(--raised, #fff)); }
.gold-line { color: var(--gold-ink); }
.entry .glyph.k-golden { color: var(--gold-ink); border-color: rgb(232 184 74 / 0.6); }

/* ---------- Edições e Arquivo Mestre ---------- */
.ed { position: absolute; z-index: 4; left: 5px; bottom: 5px; font: 700 0.5rem/1 var(--f-mono); letter-spacing: 0.08em; }
.ed-primeira { width: 24px; height: 24px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: #111; color: #f2f2f2; box-shadow: 0 0 0 1.5px #f2f2f2, 0 0 0 3px #111, 0 2px 6px rgb(0 0 0 / 0.6); }
.ed-primeira b { font: 700 0.72rem/0.9 var(--f-ui); }
.ed-primeira i { font-style: normal; font-size: 0.26rem; letter-spacing: 0.04em; }
.ed-shadowless { padding: 3px 5px; border-radius: 4px; background: rgb(10 10 11 / 0.85); color: #c8d4ff; border: 1px solid rgb(200 212 255 / 0.4); }
.cards.mini .ed-primeira { width: 18px; height: 18px; left: 3px; bottom: 3px; }
.cards.mini .ed-primeira b { font-size: 0.55rem; }
.cards.mini .ed-primeira i { display: none; }
.cards.mini .ed-shadowless { font-size: 0.42rem; padding: 2px 3px; left: 3px; bottom: 3px; }
.ed-tag { color: var(--ed-ink, #3a4fb0); border-color: color-mix(in srgb, var(--ed-ink, #3a4fb0) 35%, transparent); background: color-mix(in srgb, var(--ed-ink, #3a4fb0) 8%, var(--raised, #fff)); }
.edition-banner { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 0.85rem; border: 1px solid color-mix(in srgb, var(--ed-ink, #3a4fb0) 25%, transparent); background: color-mix(in srgb, var(--ed-ink, #3a4fb0) 8%, var(--raised, #fff)); color: var(--text-2); }
.edition-banner .i { color: var(--ed-ink, #3a4fb0); }
.ed-odds { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2); }
.ed-list { display: grid; gap: 4px; }
.ed-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); color: var(--faint); }
.ed-row.on { color: var(--text); background: var(--surface-2); }
.ed-dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--line-2); }
.ed-row.on .ed-dot { border: 0; background: var(--good); color: var(--bg); }

.master-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.master-sp { display: grid; gap: 8px; text-align: left; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); border-left: 3px solid var(--tc); transition: border-color var(--dur) var(--ease), transform 120ms var(--ease); }
.master-sp:hover { border-color: var(--line-2); border-left-color: var(--tc); transform: translateY(-1px); }
.master-sp b { font-size: 0.92rem; font-weight: 500; }
.master-sp.empty { opacity: 0.55; }
.master-sp.done { background: linear-gradient(180deg, rgb(74 222 128 / 0.06), transparent), var(--surface); }
.master-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; padding: 12px 0; }
@media (max-width: 560px) { .master-row { grid-template-columns: 1fr; } }
.master-cells { display: flex; gap: 10px; flex-wrap: wrap; }
.master-cell { width: 92px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.master-cell .card { width: 92px; }
.master-cell .card.missing .slot b { font-size: 0.8rem; }

/* ---------- Escolha surpresa ---------- */
.wonder-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.wonder-offer.active { border-color: var(--text); }
/* Embaralhar: as cartas se juntam no centro e voltam viradas. */
.spread-cards.shuffling .deal-col { animation: gather 900ms var(--ease) both; }
.spread-cards.shuffling .flip { animation: none; cursor: pointer; }
.spread-cards.shuffling .flip:hover { transform: translateY(-6px); }
.spread-cards.shuffling .flip:hover .back { border-color: var(--text); }
@keyframes gather {
  0% { transform: none; }
  45% { transform: translateX(calc((2 - var(--i)) * 104%)) rotate(calc((var(--i) - 2) * 5deg)); }
  100% { transform: none; }
}
.deal-col.missed { opacity: 0.5; transition: opacity 400ms var(--ease) 500ms; }
.deal-col.missed .cap { opacity: 0; }
.deal-col.missed.up .cap { opacity: 1; }
.flip.picked .face { box-shadow: 0 0 0 2px var(--text), 0 0 34px rgb(255 255 255 / 0.25); overflow: visible; }
@media (max-width: 560px) { .spread-cards.shuffling .deal-col { animation-name: gatherY; } @keyframes gatherY { 45% { transform: scale(0.92) rotate(calc((var(--i) - 2) * 6deg)); } } }
.overlay { overflow-y: auto; place-items: safe center; } .overlay > .opener, .overlay > .op { margin: auto 0; padding: 12px 0; }

/* ---------- Cartas holográficas (src/ui/holo) ----------
   Camadas: rotação 3D → frente (imagem + brilho da raridade + reflexo) e verso.
   Variáveis vindas do motor: --rx --ry --px --py --pfc --bgx --bgy --hover --intensity --flip. */
.hcard { --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; --pfc: 0; --bgx: 50%; --bgy: 50%; --hover: 0; --intensity: 1; --flip: 0deg;
  --art: inset(11% 8.5% 48.5% 8.5% round 2px);
  position: relative; width: 100%; aspect-ratio: var(--card-ratio); perspective: 700px; touch-action: none; -webkit-user-select: none; user-select: none; }
.hcard__rot { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform;
  transform: rotateY(calc(var(--ry) + var(--flip))) rotateX(var(--rx)); }
.hcard__front, .hcard__back { position: absolute; inset: 0; border-radius: 4.5% / 3.2%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 18px 40px -14px rgb(0 0 0 / 0.8); }
.hcard__front { background: var(--surface-2); transform: translateZ(0.1px); }
.hcard__front > img, .hcard__front > .art-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.hcard__back { transform: rotateY(180deg); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, transparent 21%, rgb(255 106 61 / 0.14) 22% 24%, transparent 25%), repeating-linear-gradient(45deg, #151518 0 6px, #19191d 6px 12px);
  border: 1px solid var(--line-2); }
.hcard__back::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--stamp) 55%, var(--line-2));
  background: radial-gradient(circle, var(--surface) 45%, transparent 47%), conic-gradient(var(--line-2) 0 50%, transparent 50%); }
.hcard__shine, .hcard__glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.hcard__glare { z-index: 3; mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner circle at var(--px) var(--py), rgb(255 255 255 / 0.7) 0%, rgb(255 255 255 / 0.18) 28%, rgb(0 0 0 / 0.35) 90%);
  opacity: calc(var(--hover) * 0.85 * min(var(--intensity), 1.2)); }
.hcard__shine { z-index: 2; display: none; }

/* Holo clássico: arco-íris em faixas só na janela da arte (Base Set). */
[data-holo="holo"] .hcard__shine, [data-holo="reverse"] .hcard__shine, [data-holo="rainbow"] .hcard__shine, [data-holo="cosmos"] .hcard__shine, [data-holo="gold"] .hcard__shine {
  /* Folha dourada que passa com o ângulo, sem pintar a carta inteira (as cartas ♛ e ✦ já são douradas). */
  background:
    radial-gradient(circle at 30% 40%, rgb(255 250 220 / 0.9) 0 0.6px, transparent 1.2px) 0 0 / 11px 11px,
    linear-gradient(115deg, transparent 22%, rgb(255 236 170 / 0.75) 38%, rgb(255 255 245 / 0.9) 46%, rgb(255 210 110 / 0.7) 54%, transparent 72%);
  background-size: 11px 11px, 260% 260%;
  background-position: calc(100% - var(--bgx)) var(--bgy), var(--bgx) var(--bgy);
  mix-blend-mode: soft-light;
  filter: none;
  opacity: calc((0.3 + var(--pfc) * 0.5 + var(--hover) * 0.15) * var(--intensity)); }
[data-holo="holo"] .hcard__shine, [data-holo="reverse"] .hcard__shine {
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.12) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(110deg, #ff3c78 0%, #ffd23c 7%, #50ffa0 14%, #3cc8ff 21%, #a050ff 28%, #ff3c78 35%);
  background-size: 100% 100%, 400% 400%;
  background-position: 0 0, var(--bgx) var(--bgy);
  background-blend-mode: overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(0.6) contrast(1.5) saturate(1.3);
  opacity: calc((0.35 + var(--pfc) * 0.45 + var(--hover) * 0.2) * var(--intensity));
  clip-path: var(--art); }
/* Reverse: o brilho cobre a carta toda, menos a janela da arte. */
[data-holo="reverse"] .hcard__shine { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 8.5% 11%, 8.5% 51.5%, 91.5% 51.5%, 91.5% 11%, 8.5% 11%); }
/* Arco-íris: carta inteira, saturado, com glitter. */
[data-holo="rainbow"] .hcard__shine {
  /* Faixa de arco-íris que atravessa a carta com o ângulo, em vez de cobrir tudo: não lava a arte. */
  background:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.9) 0 0.6px, transparent 1.2px) 0 0 / 9px 9px,
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.8) 0 0.5px, transparent 1px) 0 0 / 13px 13px,
    linear-gradient(115deg, transparent 18%, rgb(255 70 150 / 0.7) 32%, rgb(255 220 80 / 0.7) 40%, rgb(70 255 160 / 0.7) 48%, rgb(70 200 255 / 0.7) 56%, rgb(150 100 255 / 0.7) 64%, transparent 80%);
  background-size: 9px 9px, 13px 13px, 260% 260%;
  background-position: var(--bgx) var(--bgy), calc(100% - var(--bgx)) var(--bgy), var(--bgx) var(--bgy);
  mix-blend-mode: soft-light;
  filter: saturate(1.15);
  opacity: calc((0.3 + var(--pfc) * 0.5 + var(--hover) * 0.15) * var(--intensity)); }
/* Dourado: folha metálica que se move com o ângulo (secreta). */
[data-holo="gold"] .hcard__shine {
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.08) 0 1px, transparent 1px 4px),
    linear-gradient(115deg, #6b4400 0%, #e0a83a 16%, #fff4c4 28%, #f0c050 40%, #7a4f00 52%, #ffd56b 66%, #fffbe6 78%, #c08a24 100%);
  background-size: 100% 100%, 240% 240%;
  background-position: 0 0, var(--bgx) var(--bgy);
  mix-blend-mode: hard-light;
  filter: brightness(1.05) contrast(1.15) saturate(1.2);
  opacity: calc((0.32 + var(--pfc) * 0.3 + var(--hover) * 0.12) * var(--intensity)); }
[data-holo="gold"] .hcard__glare { mix-blend-mode: soft-light; }
/* Cosmos: pontos de galáxia em camadas que andam em velocidades diferentes. */
[data-holo="cosmos"] .hcard__shine {
  background:
    radial-gradient(circle, #fff 0 0.7px, transparent 1.3px),
    radial-gradient(circle, #ffe7a8 0 1px, transparent 1.8px),
    radial-gradient(circle, #a8d8ff 0 1.3px, transparent 2.4px),
    radial-gradient(ellipse at var(--px) var(--py), #ff5cc8 0%, #6a5cff 35%, #1fd0ff 60%, transparent 80%);
  background-size: 11px 13px, 23px 19px, 37px 41px, 200% 200%;
  background-position: calc(var(--bgx) * 0.4) calc(var(--bgy) * 0.4), calc(var(--bgx) * -0.8) var(--bgy), calc(var(--bgx) * 1.4) calc(var(--bgy) * -1.2), var(--bgx) var(--bgy);
  mix-blend-mode: color-dodge;
  filter: brightness(0.8) contrast(1.4) saturate(1.3);
  opacity: calc((0.45 + var(--pfc) * 0.4) * var(--intensity));
  clip-path: var(--art); }

/* ---------- Visualizador 3D ---------- */
.viewer { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 5); display: grid; place-items: safe center; overflow-y: auto; padding: 20px 16px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--glow-bg, #6a5cff) 16%, transparent), transparent 60%), rgb(0 0 0 / 0.78); backdrop-filter: blur(8px);
  animation: fade 200ms var(--ease); }
.viewer-inner { display: grid; justify-items: center; gap: 12px; text-align: center; }
.viewer-inner h2 { font: 800 2.2rem/1.05 var(--f-display); }
.viewer-stage { width: min(340px, 78vw); filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--glow, #000) 45%, transparent)); animation: viewer-in 650ms var(--ease); }
.viewer .hint { margin: 0; font: 0.72rem var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@keyframes viewer-in { from { opacity: 0; transform: scale(0.7) rotateY(-30deg); } }

/* ---------- Abertura estilo Pocket (src/ui/opening.js) ---------- */
.op-overlay { background: rgb(4 4 6 / 0.93); }
.op { --tell: #c9a6ff; position: relative; display: grid; justify-items: center; align-content: center; gap: 18px; width: min(760px, 100%); min-height: min(720px, 92dvh); padding: 12px 0; text-align: center; }
.op-tint { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tell) 38%, transparent), color-mix(in srgb, var(--tell) 10%, transparent) 45%, transparent 75%); }
.op.tell .op-tint { opacity: 1; }
.op.golden { --tell: #e8b84a; }
.op.golden .op-tint { opacity: 0.55; }
.op-top { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; position: relative; min-height: 36px; padding: 0 48px; }
.op-top .eyebrow { line-height: 1.5; }
.op-top .op-mute { position: absolute; right: 0; }
.op .hint { font: 0.72rem var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.op-foot { display: grid; justify-items: center; gap: 12px; min-height: 64px; }
.op-stage { position: relative; display: grid; justify-items: center; gap: 14px; width: 100%; }

/* Pacote: duas cópias da arte, o corpo e a tira de cima, separadas na linha de corte. */
.op-pack { --cut-y: 13%; --cut: 0; --dir: 1; position: relative; width: min(250px, 62vw); aspect-ratio: 5 / 8; cursor: grab; touch-action: none; animation: hover 2.6s ease-in-out infinite; }
.op-pack:active { cursor: grabbing; }
.op-pack .pack { position: absolute; inset: 0; width: 100%; height: 100%; }
.op-pack-body, .op-pack-top { position: absolute; inset: 0; }
.op-pack-body { clip-path: inset(var(--cut-y) 0 0 0); }
.op-pack-top { clip-path: inset(0 0 calc(100% - var(--cut-y)) 0); transform-origin: 0 var(--cut-y);
  transform: translate(calc(var(--dir) * var(--cut) * 10px), calc(var(--cut) * -6px)) rotate(calc(var(--dir) * var(--cut) * -7deg)); }
.op-pack.rev .op-pack-top { transform-origin: 100% var(--cut-y); }
.op-pack.snap .op-pack-top { transition: transform 260ms var(--ease); }
.op-cutline { position: absolute; left: 0; right: 0; top: var(--cut-y); height: 0; border-top: 2px dashed rgb(255 255 255 / 0.5); z-index: 4; pointer-events: none; transition: opacity 200ms; }
.op-cutline i { position: absolute; top: -3px; left: 0; height: 4px; width: calc(var(--cut) * 100%); border-radius: 4px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px var(--stamp); }
.op-pack.rev .op-cutline i { left: auto; right: 0; }
.op-hand { --travel: calc(min(250px, 62vw) * 0.78); position: absolute; top: calc(var(--cut-y) - 9px); left: 4%; width: 18px; height: 18px; border-radius: 50%;
  background: rgb(255 255 255 / 0.9); box-shadow: 0 0 0 6px rgb(255 255 255 / 0.15); opacity: 0; z-index: 5; pointer-events: none; }
.op-pack.show-hand .op-hand { animation: hand 1.8s var(--ease) infinite; }
@keyframes hand { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 80% { opacity: 1; transform: translateX(var(--travel)); } 100% { opacity: 0; transform: translateX(var(--travel)); } }
.op-pack.torn { animation: none; cursor: default; }
.op-pack.torn .op-cutline { opacity: 0; }
.op-pack.torn .op-pack-top { transition: transform 600ms var(--ease), opacity 600ms; transform: translate(calc(var(--dir) * 140px), -120px) rotate(calc(var(--dir) * -32deg)); opacity: 0; }
.op-pack.shaking .op-pack-body { animation: pack-shake 1.1s ease-in-out; }
@keyframes pack-shake { 10%, 50%, 90% { transform: rotate(-2.5deg) translateX(-3px); } 30%, 70% { transform: rotate(2.5deg) translateX(3px); } 100% { transform: none; } }
.op-pack.drop { transition: transform 280ms ease-in, opacity 280ms; transform: translateY(40px) scale(0.94); opacity: 0; }
/* Feixes de luz saindo do pacote quando há rara. */
.op-beams { position: absolute; left: 50%; top: var(--cut-y); width: 260%; aspect-ratio: 1; margin: -130% 0 0 -130%; transform: scale(0.2); opacity: 0; z-index: -1; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tell) 75%, #fff) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 62%); mask: radial-gradient(circle, #000 0 18%, transparent 62%); }
.op.tell .op-beams { animation: beams 1.4s var(--ease) forwards; }
@keyframes beams { 0% { opacity: 0; transform: scale(0.2); } 30% { opacity: 1; } 100% { opacity: 0.85; transform: scale(1); } }
.op.golden .op-pack::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(circle, rgb(232 184 74 / 0.4), transparent 62%); animation: pulse 2.4s ease-in-out infinite; }

/* Pilha: a carta do topo na frente, as outras um pouco abaixo. */
.op-stack { position: relative; width: min(300px, 70vw); aspect-ratio: var(--card-ratio); }
.op-card { --dx: 0px; --dir: 1; --depth: 0; position: absolute; inset: 0; z-index: var(--z); pointer-events: none;
  transform: translate(var(--dx), calc(var(--depth) * 7px)) rotate(calc(var(--dx) * 0.06deg)) scale(calc(1 - var(--depth) * 0.035));
  transition: transform 380ms var(--ease), opacity 380ms; animation: op-rise 520ms var(--ease) backwards; animation-delay: calc(var(--i) * 60ms); }
.op-card.top { pointer-events: auto; cursor: pointer; }
.op-card.dragging { transition: none; }
.op-card.gone { transform: translate(calc(var(--dir) * 120vw), -40px) rotate(calc(var(--dir) * 24deg)); opacity: 0; transition: transform 420ms cubic-bezier(0.5, 0, 0.75, 0), opacity 420ms ease-in; pointer-events: none; }
@keyframes op-rise { from { transform: translateY(70%) scale(0.85); opacity: 0; } }
.op-card .op-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 6; transition: opacity 200ms; }
.op-card .op-badge.hidden { opacity: 0; }
.op-card.finale .hcard__back { border-color: var(--glow); box-shadow: 0 0 0 2px color-mix(in srgb, var(--glow) 70%, transparent), 0 0 40px color-mix(in srgb, var(--glow) 65%, transparent); animation: finale-pulse 1.4s ease-in-out infinite; }
@keyframes finale-pulse { 50% { box-shadow: 0 0 0 3px var(--glow), 0 0 70px color-mix(in srgb, var(--glow) 90%, transparent); } }
.op-card.finale.revealed .hcard__front { box-shadow: 0 0 0 2px color-mix(in srgb, var(--glow) 60%, transparent), 0 0 60px color-mix(in srgb, var(--glow) 55%, transparent); }
.op-count { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.1em; }

/* Clarão e partículas da rara. */
.op-burst { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.op-burst .flash { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--glow) 80%, #fff) 25%, transparent 65%); animation: flash 700ms ease-out forwards; }
@keyframes flash { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
.op-burst b { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px var(--glow);
  animation: particle var(--t) cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
@keyframes particle { from { transform: translate(0, 0) scale(var(--s)); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; } }

/* Resumo */
.op-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: 100%; }
@media (max-width: 560px) { .op-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.op-tile { position: relative; padding: 0; border: 0; background: none; border-radius: 7px; animation: deal 420ms var(--ease) backwards; animation-delay: calc(var(--i) * 70ms); transition: transform 160ms var(--ease); }
.op-tile:hover { transform: translateY(-4px); }
.op-tile .stamp { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 6; }
.op-tile .card { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .op-pack, .op-card, .op-tile { animation: none; }
  .op-pack.shaking .op-pack-body, .op.tell .op-beams { animation: none; }
  .op.tell .op-beams { opacity: 0.6; transform: none; }
}

/* Laboratório de efeitos e controles de som */
.fx-lab { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.fx-lab select { max-width: 100%; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); }
input.volume { width: min(180px, 40vw); accent-color: var(--text); }
input.volume:disabled { opacity: 0.4; }
.detail > button.card { padding: 0; cursor: zoom-in; }


/* ---------- Estado e Laboratório de Avaliação ---------- */
.slab-tag { position: absolute; z-index: 4; top: 5px; left: 50%; transform: translateX(-50%); min-width: 22px; height: 18px; padding: 0 6px; border-radius: 4px;
  display: grid; place-items: center; font: 700 0.66rem/1 var(--f-mono); background: #f2f2f2; color: #0a0a0b; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.5); }
.slab-tag.g10 { background: linear-gradient(135deg, #fff2bf, #e8b84a); }
.slab-tag.g9 { background: #dfe8ff; }
.cards.mini .slab-tag { top: 3px; height: 14px; min-width: 16px; font-size: 0.55rem; padding: 0 3px; }
/* Selo de nível da carta (a partir do nível 2); sobe acima do selo de edição, que ocupa o mesmo canto */
.lv-tag { position: absolute; z-index: 4; left: 5px; bottom: 5px; padding: 2px 5px; border-radius: 4px; font: 700 0.62rem/1.2 var(--f-ui); background: rgb(10 10 11 / 0.82); color: #fff; backdrop-filter: blur(4px); }
.cards.mini .lv-tag { left: 3px; bottom: 3px; font-size: 0.55rem; padding: 1px 4px; }
.card:has(.ed) .lv-tag { bottom: 34px; }
.cards.mini .card:has(.ed) .lv-tag { bottom: 24px; }
.card:has(.own) .lv-tag { bottom: 26px; }
.cards.mini .card:has(.own) .lv-tag { bottom: 20px; }
.cond { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.slab-line { display: flex; gap: 12px; align-items: center; }
.slab-big { width: 44px; height: 52px; border-radius: 6px; display: grid; place-items: center; font: 800 1.4rem/1 var(--f-display); background: #f2f2f2; color: #0a0a0b; box-shadow: inset 0 -10px 0 rgb(0 0 0 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.2); }
.slab-big.g10 { background: linear-gradient(135deg, #fff2bf, #e8b84a); }
.slab-big.g9 { background: #dfe8ff; }
.lab-slots { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.lab-slot { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); min-height: 112px; }
.lab-slot .card { width: 62px; flex: none; }
.lab-slot.empty { justify-content: center; gap: 8px; color: var(--faint); border-style: dashed; background: transparent; }
.lab-cands { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.lab-cand { display: grid; gap: 6px; }
.lab-cand .btn { padding: 4px 6px; font-size: 0.74rem; }

/* ---------- Trilha de Nível de Coleção (a trilha grande fica no fim do arquivo) ---------- */
.reward-list { display: grid; gap: 8px; }
.reward { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); animation: rise 300ms var(--ease) backwards; }
.reward:nth-child(2) { animation-delay: 60ms; } .reward:nth-child(3) { animation-delay: 120ms; } .reward:nth-child(4) { animation-delay: 180ms; }
.reward .i { color: var(--text-2); }
.reward.gold { border-color: rgb(232 184 74 / 0.6); } .reward.gold .i { color: var(--gold-ink); }

/* Capas do fichário */
.cover-couro .swatch, .cover-card.cover-couro, .binder-cover.cover-couro { --cv1: #1c1c20; --cv2: #121214; }
.cover-azul .swatch, .cover-card.cover-azul, .binder-cover.cover-azul { --cv1: #1b2a4a; --cv2: #0e1526; }
.cover-verde .swatch, .cover-card.cover-verde, .binder-cover.cover-verde { --cv1: #1d3a2a; --cv2: #0d1a13; }
.cover-holo .swatch, .cover-card.cover-holo, .binder-cover.cover-holo { --cv1: #2a2140; --cv2: #12121c; }
.cover-dourada .swatch, .cover-card.cover-dourada, .binder-cover.cover-dourada { --cv1: #4a3a14; --cv2: #1e1707; }
.binder-cover[class*="cover-"] { background: radial-gradient(120% 80% at 20% 0%, var(--cv1) 0%, var(--cv2) 60%), var(--cv2); }
.binder-cover.cover-holo { background: radial-gradient(120% 80% at 20% 0%, #2a2140 0%, #12121c 60%), conic-gradient(from 200deg, rgb(255 122 198 / 0.15), rgb(106 200 255 / 0.15), rgb(124 255 178 / 0.15), rgb(255 122 198 / 0.15)); background-blend-mode: screen; }
.binder-cover.cover-dourada { box-shadow: inset 0 0 0 6px #0e0e10, inset 0 0 0 7px #8a6a24, 0 30px 60px -30px rgb(0 0 0 / 0.9); }
.window-body > *, .panel, .grid-2 > *, .split > * { min-width: 0; }

/* ---------- Vitrine (prateleira e caixa no fim do arquivo) ---------- */
.pick-grid { max-height: 60vh; overflow: auto; padding: 4px; }
.pick { position: relative; padding: 0; border: 0; background: none; border-radius: 8px; transition: transform 120ms var(--ease); }
.pick:hover { transform: translateY(-3px); }
.pick.current { outline: 2px solid var(--text); outline-offset: 2px; }
.pick-tag { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgb(10 10 11 / 0.85); color: #fff; }

/* Laudo do laboratório */
.report { display: grid; gap: 6px; margin-top: 10px; }
.crit { display: grid; grid-template-columns: 1fr 70px 30px; gap: 10px; align-items: center; }
.crit-bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.crit-bar i { display: block; height: 100%; background: var(--text-2); }
.crit.lim .crit-bar i { background: var(--stamp); }
.crit.lim b { color: var(--stamp); }

/* "Já tenho / falta" nas ofertas */
.own { position: absolute; z-index: 5; bottom: 6px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; font: 600 0.6rem/1.3 var(--f-mono); letter-spacing: 0.04em; white-space: nowrap; box-shadow: 0 2px 6px rgb(0 0 0 / 0.5); }
.own-falta { background: var(--stamp); color: var(--stamp-ink); }
.own-versao { background: #c8d4ff; color: #0e1526; }
.own-tenho { background: rgb(10 10 11 / 0.85); color: #e6e9f5; border: 1px solid rgb(255 255 255 / 0.25); }
.cards.mini .own { font-size: 0.52rem; padding: 1px 5px; bottom: 4px; }

/* Suspense na carta especial: o verso brilha antes de virar */
.flip.hint .back { overflow: visible; }
.flip.hint .back::before { content: ""; position: absolute; inset: -2px; border-radius: 8px; z-index: -1; filter: blur(10px); opacity: 0.85; animation: hintPulse 1.6s ease-in-out infinite; }
.flip.hint-rara .back::before { background: linear-gradient(135deg, #d8dde8, #8e98aa); }
.flip.hint-holo .back::before { background: conic-gradient(#ff7ac6, #ffd36a, #7cffb2, #6ac8ff, #b28cff, #ff7ac6); }
.flip.hint-secreta .back::before { background: linear-gradient(135deg, #fff2bf, #e8b84a, #a8761c); }
.flip.hint .back { border-color: rgb(255 255 255 / 0.35); }
.flip.hint:not(.up) { animation: deal 420ms var(--ease) backwards, tremble 2.4s ease-in-out 900ms infinite; animation-delay: calc(var(--i) * 70ms), 1.2s; }
.flip.up.hint .back::before { display: none; }
.flip.slow { transition-duration: 1100ms; transition-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
@keyframes hintPulse { 50% { opacity: 0.45; transform: scale(0.97); } }
@keyframes tremble { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-1.2deg); } 93% { transform: rotate(1.2deg); } 96% { transform: rotate(-0.6deg); } }

/* Envelope com arte real: janela com recorte da ilustração, logo menor embaixo */
.pack.has-art .brand { top: 10%; }
.pack .art-window { position: absolute; left: 11%; right: 11%; top: 17%; height: 44%; z-index: 1; border-radius: 5px;
  background-size: 128% auto; background-position: 50% 15%; background-repeat: no-repeat; background-color: rgb(0 0 0 / 0.3);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.55), 0 0 0 3px rgb(0 0 0 / 0.35), inset 0 0 18px rgb(0 0 0 / 0.35); }
.pack.has-art .band { top: 64%; height: 18%; background: transparent; padding: 4px 8px; }
.pack.has-art .band img { max-height: 100%; }
.pack.has-art .meta { bottom: 10%; }

/* Lista de desejos */
.card .wish { position: absolute; z-index: 4; top: 5px; left: 5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1e1707; box-shadow: 0 2px 6px rgb(0 0 0 / 0.5); }
.cards.mini .card .wish { width: 15px; height: 15px; top: 3px; left: 3px; }
.cards.mini .card .wish .i { width: 9px; height: 9px; }
.card.missing.wished { border-color: rgb(232 184 74 / 0.6); }
.own-wish { background: var(--gold); color: #1e1707; }
.wish-stamp { background: var(--gold); border-color: var(--gold); color: #1e1707; }

/* Depósito com várias pilhas (uma por expansão; dourados à parte) */

/* Pasta premium: 4 bolsos por página, etiqueta da nota abaixo de cada carta */
.pockets.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 4px 6%; }
.pocket.premium { padding: 8px 8px 10px; display: grid; gap: 8px; background: rgb(255 255 255 / 0.035); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), inset 0 -14px 22px rgb(0 0 0 / 0.3); }
.pocket.premium .card { border-radius: 6px; }
.premium-cap { display: flex; gap: 8px; align-items: center; position: relative; z-index: 6; }
.premium-cap .slab-big { width: 32px; height: 38px; font-size: 1rem; flex: none; }
.premium-cap b { font-weight: 500; }
.premium-void { aspect-ratio: auto; min-height: 120px; }
.premium-cover { box-shadow: inset 0 0 0 6px #0e0e10, inset 0 0 0 7px #8a6a24, 0 30px 60px -30px rgb(0 0 0 / 0.9); }
@media (max-width: 560px) { .pockets.four { padding: 0; gap: 8px; } .premium-cap { flex-direction: column; align-items: flex-start; } }
.pocket.premium .slab-tag { display: none; }

/* ---------- Abertura: versão escura do clima do Pocket (docs/referencia-pocket.md) ---------- */
.op-overlay { background: #06060a; }
/* Aurora: três manchas de cor desfocadas que andam devagar, o "degradê pastel que muda de tom" no escuro. */
.op-aura { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; transition: opacity 300ms var(--ease); }
.op-aura i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: 0.5; mix-blend-mode: screen; }
.op-aura i:nth-child(1) { background: radial-gradient(circle, #5b3fa8 0%, transparent 65%); left: -20vmax; top: -25vmax; animation: aura-a 19s ease-in-out infinite alternate; }
.op-aura i:nth-child(2) { background: radial-gradient(circle, #1f6f8f 0%, transparent 65%); right: -25vmax; top: 10vmax; animation: aura-b 23s ease-in-out infinite alternate; }
.op-aura i:nth-child(3) { background: radial-gradient(circle, #8f3f78 0%, transparent 65%); left: 5vmax; bottom: -35vmax; animation: aura-c 27s ease-in-out infinite alternate; }
@keyframes aura-a { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes aura-b { to { transform: translate(-16vmax, 10vmax) scale(0.9); } }
@keyframes aura-c { to { transform: translate(12vmax, -14vmax) scale(1.2); } }
/* Poeira brilhante subindo devagar. */
.op-dust { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgb(200 220 255 / 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgb(255 210 240 / 0.5) 0 1.2px, transparent 2px);
  background-size: 140px 160px, 230px 210px, 330px 290px;
  animation: dust 40s linear infinite; }
@keyframes dust { to { background-position: 0 -480px, 60px -630px, -40px -870px; } }

/* Holofote enquanto arrasta o corte: o fundo apaga e o pacote ganha luz. */
.op.cutting .op-aura, .op.cutting .op-dust { opacity: 0.18; }
.op-stage::before { content: ""; position: absolute; left: 50%; top: 40%; width: min(560px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.10), transparent 62%); opacity: 0; transition: opacity 250ms var(--ease); pointer-events: none; z-index: -1; }
.op.cutting .op-stage::before { opacity: 1; }
/* Rastro de luz verde-branca seguindo o dedo, com uma "cabeça" brilhante. */
.op-cutline i { background: linear-gradient(90deg, rgb(140 255 200 / 0), #9dffd0 40%, #fff); box-shadow: 0 0 10px #b8ffe0, 0 0 26px rgb(120 255 190 / 0.7); }
.op-cutline i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px #c9ffe6; opacity: calc(var(--cut) * 20); }
.op-pack.rev .op-cutline i { background: linear-gradient(270deg, rgb(140 255 200 / 0), #9dffd0 40%, #fff); }
.op-pack.rev .op-cutline i::after { right: auto; left: -6px; }

/* Cartas saindo do pacote: o pacote fica embaixo e desce; a pilha sobe de dentro dele e cresce. */
.op-ghost { position: absolute; left: 50%; bottom: 0; width: min(250px, 62vw); transform: translateX(-50%); pointer-events: none; z-index: 0;
  clip-path: inset(13% 0 0 0); animation: ghost-out 750ms var(--ease) forwards; }
.op-ghost .pack { width: 100%; }
@keyframes ghost-out { 0% { transform: translate(-50%, 18%); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(-50%, 55%); opacity: 0; } }
.op-stack { z-index: 1; }
.op-stack.rising .op-card { animation: op-out-of-pack 680ms cubic-bezier(0.2, 0.9, 0.3, 1.08) backwards; animation-delay: calc(var(--i) * 20ms); }
@keyframes op-out-of-pack { 0% { transform: translateY(58%) scale(0.56); opacity: 0; } 22% { opacity: 1; } }
/* Dica de passar para a próxima. */
.op-next { position: absolute; right: -34px; top: 50%; transform: translateY(-50%); font: 300 2rem/1 var(--f-ui); color: rgb(255 255 255 / 0.45); pointer-events: none; animation: nudge 1.6s ease-in-out infinite; transition: opacity 200ms; }
.op-next.hide { opacity: 0; }
@keyframes nudge { 50% { transform: translate(6px, -50%); } }
@media (max-width: 480px) { .op-next { right: -22px; } }

/* Selo e símbolos de raridade: entram ~0,5 s depois da carta e somem enquanto ela gira. */
.op-meta { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0; transition: opacity 220ms var(--ease); }
.op-card.meta-in .op-meta { opacity: 1; }
.op-card.tilting .op-meta, .op-card.dragging .op-meta, .op-card.gone .op-meta { opacity: 0; }
.op-meta .op-badge { position: absolute; top: -10px; left: 6px; transform: none; }
.op-rarity { position: absolute; left: 2px; bottom: -34px; display: flex; gap: 5px; font-size: 1.35rem; font-weight: 700; line-height: 1; color: #e8e8f0; text-shadow: 0 0 8px rgb(255 255 255 / 0.5); }
.op-rarity i { font-style: normal; display: inline-block; }
.op-card.meta-in .op-rarity i { animation: sym-pop 360ms var(--ease) backwards; }
.op-card.seq .op-rarity i { animation-delay: calc(var(--k) * 160ms); }
.op-card.seq .op-rarity { color: var(--glow); text-shadow: 0 0 10px var(--glow); }
@keyframes sym-pop { 0% { transform: scale(0.2) rotate(-30deg); opacity: 0; filter: brightness(3); } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: none; filter: none; } }
.op-count { margin-top: 18px; }

/* Entrada da rara: o fundo vira iridescente com estrelinhas por ~2,5 s. */
.op-iris { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease);
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.9) 0 1px, transparent 1.6px) 0 0 / 90px 110px,
    radial-gradient(circle, rgb(255 255 255 / 0.7) 0 1.2px, transparent 2px) 30px 50px / 170px 150px,
    conic-gradient(from 0deg at 50% 45%, rgb(110 140 255 / 0.5), rgb(190 120 255 / 0.46), rgb(110 220 255 / 0.46), rgb(255 150 220 / 0.42), rgb(110 140 255 / 0.5));
  animation: iris-spin 8s linear infinite paused; }
.op.celebrate .op-iris { opacity: 1; animation-play-state: running; }
@keyframes iris-spin { to { background-position: 0 -220px, 30px -250px, 0 0; filter: hue-rotate(60deg); } }

@media (prefers-reduced-motion: reduce) {
  .op-aura i, .op-dust, .op-next, .op-iris { animation: none; }
  .op-stack.rising .op-card, .op-ghost { animation-duration: 1ms; }
}

/* ==========================================================================
   Tema Pocket claro (feat/ui-jogo)
   Fundo de jogo azul-violeta com textura de pontos, painéis claros arredondados
   com sombra macia, texto em azul-tinta, vermelho Pokédex nas ações, amarelo
   Pikachu nas novidades e verde de barra de PS no progresso. O elemento marcante
   continua o "aparelho": botões gordinhos com lábio, que afundam ao toque.
   Os nomes antigos (--surface, --text, --muted…) seguem valendo para o CSS de
   antes; as cenas escuras (abertura, visualizador, cena imersiva, palco do
   replay) recebem os valores noturnos de volta em `.scene-dark` no fim do arquivo.
   ========================================================================== */
:root {
  --discord: #5865f2;     /* cor da marca do Discord, igual nos dois temas */
  --discord-ink: #ffffff;
  /* Kit da spec */
  /* Claro (PokeClash): fundo azul-claro, cartões brancos, texto marinho, detalhes azul-petróleo. */
  --panel: #ffffff;
  --panel-2: #eef6ff;
  --panel-line: #cfe0f0;
  --ink: #0b1e33;
  --ink-2: #2c465e;
  --ink-muted: #486279; /* ≥ 4,5:1 sobre --panel, --panel-2, --surface-3 e o fundo do jogo */
  --game-a: #e7f3ff;
  --game-b: #cfe6f8;
  --on-game: #ffffff;
  --scrim: rgb(11 30 51 / 0.5);       /* véu atrás de modais e janelas */
  --scrim-game: rgb(11 30 51 / 0.42);
  --eyebrow: #166779;     /* rótulo pequeno: petróleo, ≥ 4,5:1 sobre branco e sobre o fundo azul-claro */
  --glass-edge: rgb(26 112 131 / 0.3);
  --cta-1: #ffe066;       /* ação principal: degradê dourado, texto marinho, lábio âmbar escuro */
  --cta-2: #f5b400;
  --cta-lip: #b47f00;
  --cta-ink: #0b1e33;
  --cta-chev: #0b1e33;    /* quadradinho da setinha no botão dourado */
  --scene-top: #dcedfb;   /* fundo em volta do piso da loja */
  --scene-bottom: #bddaf2;
  --on-cover: #ffffff;    /* texto sobre a capa colorida da coleção (igual nos dois temas) */
  --seal-ink: #3a2a00;    /* texto sobre o selo dourado */
  --seal-lip: #b07800;    /* borda de baixo do selo dourado */
  --tool-research: #1f9be6;
  --rail: #d6e7f6;        /* trilho rebaixado das abas do Álbum e das Entregas */
  --branch-log: #2f7fe6;  /* ramos das melhorias: Logística, Curadoria e Negociação */
  --branch-cur: #8b4fe0;
  --branch-neg: #d9650c;
  --prestige-fill: #8b4fe0; /* fundo de selo de prestígio com texto branco (≥ 4,5:1) */
  --shadow-soft: 0 1px 2px rgb(11 30 51 / 0.08), 0 10px 28px -10px rgb(11 30 51 / 0.3);
  --shadow-pop: 0 2px 4px rgb(11 30 51 / 0.10), 0 24px 60px -18px rgb(11 30 51 / 0.5);
  --title-outline: 0 2px 0 rgb(11 30 51 / 0.35), 0 0 1px rgb(11 30 51 / 0.6), 0 3px 12px rgb(11 30 51 / 0.25);
  --focus: #1456d6;
  --gold-ink: #8f5c00;
  --raised: #ffffff; /* botões, etiquetas e itens que saltam do painel */
  /* Brilhos e vidro do HUD: no tema escuro viram tons de painel (veja "Modo escuro" no fim). */
  --hi: #ffffff;                       /* filete claro por dentro de janelas e cabeçalhos */
  --hi-soft: rgb(255 255 255 / 0.9);   /* o mesmo filete nos painéis */
  --glass: rgb(255 255 255 / 0.9);     /* cápsulas, selo de nível, botões da loja e menu */
  --glass-solid: #ffffff;              /* vidro ao passar o mouse e anel em volta de selos */
  --hud-lip: rgb(11 30 51 / 0.2);
  --hover-tint: rgb(11 30 51 / 0.06);
  --idle: #b3c9dc;                     /* ícone apagado (caixa vazia) */
  --game-mid: #dcedfb;
  --game-glow: rgb(255 255 255 / 0.85);
  --game-dot: rgb(11 30 51 / 0.05);
  --stage-glow: rgb(255 255 255 / 0.6);
  /* Batalha: chão do palco VS, lado do adversário, selo VS e a faixa do desafio do ginásio. */
  --vs-floor: #eef6ff;
  --vs-foe: #fff1ee;
  --vs-bg: #0b1e33;
  --vs-ink: #ffffff;
  --vs-lip: #06111f;
  --vs-edge: #0b1e33;
  --vs-ahead: #5fe39a;  /* poder do seu time sobre o selo escuro: maior ou igual / menor */
  --vs-behind: #ff9a8f;
  --gym-bar: #fff7d6;
  --must-ink: #c22c08;  /* vaga obrigatória vazia */
  /* Ligas da arena (escudo, barra até a próxima liga e medalhas do ranking). */
  --league-bronze: #c47a3a;
  --league-prata: #8e9bb8;
  --league-ouro: #e8a700;
  --league-platina: #1fa7a0;
  --league-mestre: #8b4fe0;
  /* Trocas: rosto dos colecionadores (inicial em branco; a cor sai de npcColor) e o palco da Escolha surpresa. */
  --npc-1: #d9480f;
  --npc-2: #1c6fc2;
  --npc-3: #277a38;
  --npc-4: #7048e8;
  --npc-5: #c2255c;
  --npc-6: #0b7f91;
  --speech: #e7f3ff;      /* balão de fala */
  --wonder-floor: #f1ecff;
  --wonder-edge: #c9b8f7;
  /* Trilha: tinta do "Pronto!" e brilho em volta do nó liberado. */
  --ready-ink: #b52a08;
  --track-glow: rgb(245 180 0 / 0.38);
  /* Vitrine: armário (fundo, madeira da prateleira, borda clara e lábio) e o aparelho do caixa. */
  --shelf-back: #f5ecdd;
  --shelf-wood: #d39a5e;
  --shelf-edge: #efc590;
  --shelf-lip: #9c6234;
  --register-body: #11304d;
  --register-lip: #06111f;
  --register-muted: #c4d8ec;  /* texto secundário sobre o corpo do caixa */
  --register-screen: #0f2a1c;
  --register-digit: #6cf0a6;

  /* Nomes antigos, agora claros. --bg é o "papel" (inverso da tinta), não o fundo da página. */
  --bg: #ffffff;
  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --surface-3: #dbe9f6;
  --line: var(--panel-line);
  --line-2: #b3c9dc;
  --text: var(--ink);
  --text-2: var(--ink-2);
  --muted: #41596f;
  --faint: var(--ink-muted);
  --stamp: #d92d2d;       /* vermelho: só selos de contagem, avisos e perigo (branco por cima ≥ 4,5:1) */
  --stamp-ink: #ffffff;
  --dex: #d92d2d;
  --dex-lip: #9e1c1c;
  --dex-hi: #ff6b6b;
  --gold: #ffcb05;
  --gold-2: #ffe27a;
  --good: #157a3c;
  --bad: #c62d22;
  --good-fill: #157a3c; /* fundo de selo com texto branco: igual nos dois temas */
  --bad-fill: #c62d22;
  --hp: #3cc47a;
  --lip: rgb(11 30 51 / 0.16);
  --r-comum: #5d6b7e;
  --r-incomum: #0f7a52;
  --r-rara: #2563c9;
  --r-holo: #7b44c9;
  --r-secreta: #94600a;

  --f-display: "Rubik", "Trebuchet MS", system-ui, sans-serif; /* o itálico vem do bloco "Tipografia" no fim */
  --f-ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Nunito", system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  color-scheme: light;
}

body {
  background-color: var(--game-a);
  background-image:
    var(--bg-pattern),
    radial-gradient(var(--game-dot) 1.3px, transparent 1.5px),
    radial-gradient(900px 480px at 50% -160px, var(--game-glow), transparent 70%),
    linear-gradient(165deg, var(--game-a) 0%, var(--game-mid) 48%, var(--game-b) 100%);
  background-size: 96px 96px, 24px 24px, auto, auto;
  background-attachment: fixed;
  color: var(--ink);
  font: 500 15px/1.55 var(--f-ui);
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: 0; }
.mono { font-family: var(--f-ui); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }

/* Rótulos: frase normal, sem maiúsculas espaçadas. */
.eyebrow { font: 700 0.8rem/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--muted); }
/* Cabeçalho de página dentro das janelas: subtítulo da seção, em tinta (a janela já tem o título grande). */
.page-head h1 { font: 800 clamp(1.45rem, 4vw, 1.9rem)/1.05 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.page-head h1 em { font-style: normal; color: inherit; }
.page-head { padding: 2px 0 0; }
.panel-head h2 { font: 700 1.25rem/1.15 var(--f-display); margin-top: 2px; }
.dialog-head h2 { font: 800 1.9rem/1.05 var(--f-display); letter-spacing: -0.01em; }
.dialog-head h2 em, .reveal h2 em { font-style: normal; }


/* ---------- Painéis ---------- */
/* Painel claro: borda branca por dentro, sombra macia em duas camadas e raio grande. */
.panel { background: var(--panel); color: var(--ink); border: 1.5px solid var(--panel-line); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--hi-soft), var(--shadow-soft); }
.item, .note, .kpis, .manifest, .cond { border-width: 2px; border-radius: var(--r-md); }
.item { background: var(--raised); border-color: var(--line); }
.kpis { background: var(--raised); }
.kpi .value { font: 800 1.6rem/1.1 var(--f-display); letter-spacing: 0; color: var(--ink); }
.kpi .value small { font-weight: 700; }
/* Modal: o mesmo vidro das janelas (borda ciano fina, sombra funda). */
.dialog { background: var(--panel); color: var(--ink); border: 1.5px solid var(--glass-edge); border-radius: 24px;
  box-shadow: inset 0 1px 0 var(--hi), var(--shadow-pop); }
.overlay { background: var(--scrim); }

/* Barras de progresso como a barra de PS: trilho rebaixado, enchimento com brilho em cima. */
.bar { height: 8px; background: var(--surface-3); box-shadow: inset 0 1px 2px rgb(11 30 51 / 0.18); }
.bar > i { background: var(--hp); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35); }
.bar.thin { height: 6px; }
.bar.good > i { background: var(--hp); }
.progress-row { gap: 6px 12px; }
.progress-row > :not(.bar) { min-width: 0; }

/* ---------- Botões: pílulas que afundam ----------
   Comportamento inspirado no uiarc: aperto com mola, hover só com mouse, foco visível e
   desabilitado que ainda parece botão. */
/* Secundário: branco com borda e lábio cinza-azulado. Principal: vermelho Pokédex com lábio de 4 px
   mais escuro; ao tocar ele afunda (desce 3 px e o lábio some). */
.btn { --press: 0.98; --lip-h: 3px; --lip-c: var(--hud-lip); border-radius: 999px; border: 1.5px solid var(--glass-edge); background: color-mix(in srgb, var(--eyebrow) 8%, var(--raised)); color: var(--ink); font: 800 0.9rem/1.1 var(--f-ui);
  min-height: 42px; padding: 8px 18px; box-shadow: 0 var(--lip-h) 0 var(--lip-c);
  transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1), box-shadow 90ms ease, background var(--dur) var(--ease), color var(--dur), filter var(--dur); }
.btn:active:not(:disabled) { transform: translateY(var(--lip-h)) scale(var(--press)); box-shadow: 0 0 0 var(--lip-c); transition-duration: 70ms; }
/* Ação principal em dourado (tokens --cta-*): degradê amarelo → âmbar, texto marinho, lábio escuro. */
.btn.primary { --lip-h: 4px; --lip-c: var(--cta-lip); background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); border-color: var(--cta-2);
  box-shadow: 0 var(--lip-h) 0 var(--lip-c), inset 0 2px 0 rgb(255 255 255 / 0.45); }
.btn.primary:active:not(:disabled) { box-shadow: 0 0 0 var(--lip-c), inset 0 2px 0 rgb(255 255 255 / 0.45); }
.btn.ghost { box-shadow: none; border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:active:not(:disabled) { box-shadow: none; transform: scale(var(--press)); }
.btn.danger { --lip-c: color-mix(in srgb, var(--bad) 40%, var(--raised)); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, var(--raised)); background: color-mix(in srgb, var(--bad) 9%, var(--raised)); }
.btn.small { --lip-h: 2px; min-height: 34px; padding: 5px 13px; font-size: 0.82rem; }
.btn.small.primary { --lip-h: 3px; }
.btn .price { font-family: var(--f-display); font-weight: 800; }
.icon-btn { --press: 0.92; border-radius: 50%; border: 1.5px solid var(--glass-edge); background: color-mix(in srgb, var(--eyebrow) 8%, var(--raised)); color: var(--ink-2); box-shadow: 0 2px 0 var(--hud-lip);
  transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1), box-shadow 90ms ease, color var(--dur); }
.icon-btn:active:not(:disabled) { transform: translateY(2px) scale(var(--press)); box-shadow: 0 0 0 var(--line-2); transition-duration: 70ms; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--eyebrow) 16%, var(--raised)); border-color: var(--eyebrow); }
  .btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); border-color: var(--cta-2); filter: brightness(1.07); }
  .btn.ghost:hover:not(:disabled) { background: var(--hover-tint); color: var(--ink); }
  .btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 16%, var(--raised)); border-color: var(--bad); }
  .icon-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--eyebrow); }
}
.btn:focus-visible, .icon-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Desabilitado: o principal esmaece inteiro; os demais mantêm a borda e apagam fundo e texto. */
.btn:disabled { opacity: 1; cursor: not-allowed; box-shadow: none; color: var(--ink-muted); background: var(--panel-2); border-color: var(--line); filter: none; }
.btn.primary:disabled { opacity: 0.45; color: var(--cta-ink); background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); border-color: var(--cta-2); }
.btn.danger:disabled { border-color: color-mix(in srgb, var(--bad) 18%, var(--raised)); }
.btn.ghost:disabled { background: transparent; border-color: transparent; }

/* Odômetro dos recursos do HUD (Number Ticker do 21st). */
.pill { position: relative; }
.pill b .odo { display: inline-flex; }
.odo-col { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -1em)); transition: transform 650ms cubic-bezier(.2, .9, .25, 1.05); }
.odo-strip > span { height: 1em; }

/* Seletor em trilho rebaixado; a opção ativa vira uma pílula azul-tinta com volume. */
.seg { border: 1.5px solid var(--glass-edge); border-radius: 999px; padding: 3px; background: var(--panel-2); box-shadow: inset 0 2px 3px rgb(11 30 51 / 0.08); }
.chip { border-radius: 999px; font-weight: 800; color: var(--ink-2); }
.chip:hover { color: var(--ink); }
/* Opção marcada: dourado, como a aba ativa e a barra inferior. */
.chip.active { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); box-shadow: 0 2px 0 var(--cta-lip); }
.chip.locked { color: var(--ink-muted); }

.tag { font: 800 0.72rem/1.35 var(--f-ui); letter-spacing: 0; text-transform: none; border-radius: 999px; padding: 2px 9px; border-width: 1.5px;
  color: var(--ink-2); background: var(--raised); border-color: var(--line); }
.tag.r-comum, .tag.r-incomum, .tag.r-rara, .tag.r-holo, .tag.r-secreta, .tag.ok { background: color-mix(in srgb, currentColor 9%, var(--raised)); }
.tag.new { background: var(--gold); border-color: var(--gold); color: var(--seal-ink); }
.tag.psym { letter-spacing: 1px; font-size: 0.78rem; }
.wish-stamp { background: var(--gold); border-color: var(--gold); color: var(--seal-ink); }

.switch input[type=checkbox] { width: 40px; height: 24px; border-width: 2px; background: var(--surface-3); border-color: var(--line-2); }
.switch input[type=checkbox]::after { background: #fff; box-shadow: 0 1px 2px rgb(11 30 51 / 0.35); }
.switch input[type=checkbox]::after { width: 16px; height: 16px; }
.switch input[type=checkbox]:checked { background: var(--good); border-color: var(--good); }
.switch input[type=checkbox]:checked::after { background: #fff; }

/* Aviso em vidro com borda ciano (petróleo no claro); o ícone leva a cor do rótulo. */
.toast { background: var(--glass-solid); color: var(--ink); border: 1.5px solid var(--glass-edge); border-radius: 16px; font-weight: 700;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-pop); }
.toast .i { color: var(--eyebrow); flex: none; }
.op .hint, .opener .hint, .viewer .hint { font: 700 0.82rem/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; }
.op-count { font: 800 0.85rem var(--f-display); }

@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn { transition: none; }
  .btn:active:not(:disabled) { transform: translateY(2px); }
  .icon-btn:active:not(:disabled) { transform: none; }
}
th { font: 800 0.78rem var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--muted); }
td.num, th.num { font-variant-numeric: tabular-nums; }
input[type=range], input.volume { accent-color: var(--dex); }
/* O laboratório (dev) não estoura a largura. */
.fx-lab .row > * { min-width: 0; }
.fx-lab select { width: 100%; min-width: 0; }

/* ---------- Painéis como janelas de jogo ---------- */
/* Barra de título no topo de cada painel, com uma faixa vermelha à esquerda; o rótulo vira subtítulo. */
.panel > .panel-head:first-child { margin: -20px -20px 16px; padding: 13px 18px 12px 20px; background: var(--raised);
  border-bottom: 1.5px solid var(--panel-line); border-radius: calc(var(--r-lg) - 1.5px) calc(var(--r-lg) - 1.5px) 0 0; box-shadow: inset 4px 0 0 var(--eyebrow), inset 0 1.5px 0 var(--hi); align-items: center; }
.panel-head > div:first-child { display: flex; flex-direction: column-reverse; gap: 1px; }
.panel-head h2 { margin-top: 0; }
.panel-head .eyebrow { font-weight: 700; font-size: 0.78rem; }
.page-head > div:first-child { display: flex; flex-direction: column-reverse; gap: 4px; }
/* Dentro das janelas o título já está no cabeçalho: sobra só a linha do subtítulo e do aside. */
.page-head.compact { align-items: center; padding: 0; }
.page-head.compact > .eyebrow { display: block; flex: 1 1 auto; min-width: 0; }
.page-head.compact h3 { font: 800 1.15rem/1.15 var(--f-display); color: var(--ink); margin: 2px 0 0; }
.page-head.compact > div:first-child { flex: 1 1 auto; min-width: 0; }
.panel.dev > .panel-head:first-child { box-shadow: inset 4px 0 0 var(--gold); }

/* ---------- Pacote de booster fiel ao físico ---------- */
/* Ilustração cobrindo o pacote, selagens serrilhadas em cima e embaixo, volume de pacote cheio,
   brilho de papel laminado e placa com o nome da coleção. Tamanhos relativos ao próprio pacote. */
.pack { container-type: inline-size; border-radius: 3px; }
.pack.has-art { background: color-mix(in srgb, var(--pc) 70%, #000); }
.pack.has-art .art-window { inset: 0; height: auto; border-radius: 0; box-shadow: none; background-color: transparent;
  background-size: 222% auto; background-position: 50% 15%; z-index: 0; }
.pack.has-art .strip, .pack.has-art::before { position: absolute; left: 0; right: 0; height: 8.5%; z-index: 3; content: "";
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.32) 0 1px, rgb(0 0 0 / 0.22) 1px 3px), linear-gradient(180deg, color-mix(in srgb, var(--pc) 75%, #fff), color-mix(in srgb, var(--pc) 80%, #000));
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.35), 0 2px 4px rgb(0 0 0 / 0.25); }
.pack.has-art .strip { top: 0; }
.pack.has-art::before { top: auto; bottom: 0; box-shadow: 0 -1px 0 rgb(0 0 0 / 0.35), 0 -2px 4px rgb(0 0 0 / 0.25); }
.pack.has-art::after { content: ""; position: absolute; inset: 0; height: auto; z-index: 2; pointer-events: none; mix-blend-mode: normal;
  background:
    linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 0.28) 44%, rgb(255 255 255 / 0.05) 52%, transparent 60%),
    linear-gradient(90deg, rgb(0 0 0 / 0.5), transparent 13%, transparent 87%, rgb(0 0 0 / 0.5)),
    linear-gradient(180deg, rgb(255 255 255 / 0.18), transparent 22%, transparent 62%, rgb(0 0 0 / 0.55)); }
.pack.has-art .brand { top: 11.5%; z-index: 3; font: 800 8cqi/1 var(--f-display); letter-spacing: 0.06em; color: #fff;
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.6), 0 0 8px rgb(0 0 0 / 0.5); }
.pack.has-art .band { top: auto; bottom: 12%; left: 9%; right: 9%; height: auto; z-index: 3; padding: 5cqi 4cqi;
  background: rgb(10 14 40 / 0.8); border: 1.5px solid rgb(255 255 255 / 0.4); border-radius: 7cqi; box-shadow: 0 3px 8px rgb(0 0 0 / 0.45); }
.pack.has-art .band b { font: 800 10cqi/1.02 var(--f-display); }
.pack.has-art .meta { display: none; }
.pack.golden.has-art::after { background:
    linear-gradient(105deg, transparent 30%, rgb(255 240 190 / 0.55) 44%, transparent 58%),
    linear-gradient(160deg, rgb(255 214 90 / 0.45), rgb(168 118 28 / 0.15) 50%, rgb(255 226 122 / 0.4)),
    linear-gradient(90deg, rgb(60 30 0 / 0.5), transparent 13%, transparent 87%, rgb(60 30 0 / 0.5)); mix-blend-mode: normal; }
.pack.golden.has-art .band { border-color: var(--gold); }
.table-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.table-scroll table { min-width: 100%; }
.table-scroll th, .table-scroll td { white-space: nowrap; padding-inline: 6px; }
.table-scroll td:first-child { white-space: normal; min-width: 110px; }

/* ---------- Loja: barra do modo Arrumar (a cena fica na tela de jogo, no fim do arquivo) ---------- */
.storefront-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 2px solid var(--line); background: var(--panel); }
.storefront-bar .who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.storefront-bar .who b { font: 700 1.05rem/1.2 var(--f-display); }
.storefront-bar.arrange { border-top-color: var(--gold); }
.storefront-bar.arrange .who { flex-direction: column; gap: 2px; }
.storefront-bar.arrange .row { flex-wrap: wrap; }
.storefront-bar .nudge { display: inline-flex; gap: 4px; }
.storefront-bar .nudge .btn { min-width: 36px; justify-content: center; font-size: 1rem; }
.storefront-bar .row { gap: 8px; flex-wrap: wrap; }

/* Criação de personagem */
.overlay.still, .overlay.still .dialog { animation: none; }
.chev-back { transform: scaleX(-1); }
.avatar-maker { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin: 4px 0 18px; }
.avatar-stage { display: grid; justify-items: center; gap: 8px; padding: 12px 10px 10px; border-radius: var(--r-md); background: radial-gradient(closest-side, rgb(255 255 255 / 0.07), transparent), var(--surface-2); border: 1px solid var(--line); }
.look-preview { display: block; image-rendering: pixelated; }
.avatar-form { display: grid; gap: 10px; min-width: 0; }
.avatar-form input { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; min-height: 40px; color: var(--text); font: 700 1rem var(--f-ui); width: 100%; }
.avatar-form .seg { justify-self: start; }
.stepper { display: grid; grid-template-columns: 1fr auto 64px auto; align-items: center; gap: 6px; }
.stepper b { text-align: center; font-size: 0.95rem; }
.stepper b small { color: var(--muted); font-weight: 600; }
@media (max-width: 560px) {
  .avatar-maker { grid-template-columns: 1fr; }
  .look-preview { width: 128px !important; height: 160px !important; }
}

/* Loja de decoração */
.decor-tabs { margin: 4px 0 10px; }
.decor-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.decor-groups .chip { padding: 4px 10px; font-size: 0.78rem; }
.decor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.decor-item { display: grid; justify-items: center; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.decor-item.in-use { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.decor-item .btn, .decor-item .tag { margin-top: 4px; }
.decor-thumb { display: grid; place-items: center; width: 100%; height: 96px; overflow: hidden; }
.decor-thumb img, .decor-thumb .sprite-frame { max-width: 100%; max-height: 96px; image-rendering: pixelated; }
.decor-thumb .sprite-frame { display: block; flex: none; transform: scale(var(--k, 1.4)); }
.decor-thumb.swatch::before { content: ""; width: 72px; height: 72px; border-radius: 10px; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.25); }

/* ---------- Borda holográfica viva (cartas especiais) ----------
   Como no Pocket: com a carta parada, um brilho de arco-íris passeia pelo contorno. */
.hcard__edge { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; display: none;
  padding: 3.4%;
  background: conic-gradient(from var(--edge-a, 0deg), rgb(255 120 190 / 0.9), rgb(255 240 150 / 0.9), rgb(120 255 200 / 0.9), rgb(120 200 255 / 0.9), rgb(200 140 255 / 0.9), rgb(255 120 190 / 0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mix-blend-mode: soft-light; opacity: 0.85; animation: edge-spin 6s linear infinite; }
[data-edge] .hcard__edge { display: block; }
[data-edge="soft"] .hcard__edge { opacity: 0.45; padding: 2.6%; }
[data-edge="gold"] .hcard__edge { background: conic-gradient(from var(--edge-a, 0deg), rgb(255 230 140 / 0.95), rgb(255 255 240 / 0.95), rgb(230 170 60 / 0.9), rgb(255 245 200 / 0.95), rgb(255 230 140 / 0.95)); }
@property --edge-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes edge-spin { to { --edge-a: 360deg; } }

/* ---------- Selo NOVA no estilo do Pocket ---------- */
.tag.new { background: linear-gradient(180deg, #ff86ad 0%, #f2558a 55%, #e8436f 100%); border: 0; color: #fff;
  font: 800 0.74rem/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px 3px;
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / 0.55), inset 0 -2px 0 rgb(150 20 60 / 0.35), 0 3px 8px rgb(0 0 0 / 0.35);
  text-shadow: 0 1px 0 rgb(150 20 60 / 0.45); }
.op-meta .op-badge { top: -13px; left: -4px; font-size: 0.86rem; padding: 5px 12px 4px; }
.wish-stamp { background: linear-gradient(180deg, #ffe27a, #ffcb05 60%, #e0a800); color: #3a2a00; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .hcard__edge { animation: none; } }

/* ---------- Movimento da abertura (medido na gravação do Pocket) ---------- */
/* A carta dispara do pacote passando do centro, fica suspensa e assenta encolhendo um pouco. */
.op-stack.rising .op-card { animation: op-arrive 1000ms cubic-bezier(0.2, 0.8, 0.25, 1) backwards; animation-delay: 0ms; }
@keyframes op-arrive {
  0% { transform: translateY(62%) scale(0.55); opacity: 0; }
  14% { transform: translateY(-16%) scale(1.07); opacity: 1; }
  58% { transform: translateY(-13%) scale(1.05); }
  100% { transform: none; }
}
/* O fundo muda de tom quando a carta é revelada. */
.op.reveal-tint .op-aura i { animation-play-state: running; opacity: 0.68; transition: opacity 900ms var(--ease); }
/* Próxima carta: aparece no lugar com um pulo curto e um clarão leve. */
.op-card.pop { animation: op-pop 380ms cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes op-pop { 0% { transform: scale(0.9); filter: brightness(1.7); } 60% { transform: scale(1.035); } 100% { transform: none; filter: none; } }

/* Selo NOVA: estoura com um giro curto e um reflexo que passa uma vez. */
.op-card.meta-in .op-badge { animation: badge-pop 440ms cubic-bezier(0.3, 1.7, 0.5, 1) backwards; overflow: hidden; }
.op-card .op-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.85) 48%, transparent 66%) -150% 0 / 250% 100% no-repeat; }
/* Reflexo mais lento que passa e repete, com uma pausa entre as passadas. */
.op-card.meta-in .op-badge::after, .op-tile .stamp::after { animation: badge-glint 4.5s ease-in-out 260ms infinite; }
@keyframes badge-pop { 0% { transform: scale(0) rotate(-16deg); opacity: 0; } 55% { transform: scale(1.22) rotate(5deg); opacity: 1; } 100% { transform: none; } }
@keyframes badge-glint { 0% { background-position: -150% 0; } 50%, 100% { background-position: 160% 0; } }
.op-tile .stamp { overflow: hidden; }
.op-tile .stamp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.85) 48%, transparent 66%) -150% 0 / 250% 100% no-repeat; }

/* Raridade: cada símbolo acende branco, vira uma estrelinha e assenta, um depois do outro. */
.op-rarity i { position: relative; }
.op-card.meta-in .op-rarity i { animation: sym-flash 520ms cubic-bezier(0.3, 1.4, 0.5, 1) backwards; animation-delay: calc(var(--k) * 130ms); }
.op-card.seq .op-rarity i { animation-delay: calc(var(--k) * 170ms); }
.op-rarity i::after { content: "✦"; position: absolute; left: 50%; top: 50%; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em;
  display: grid; place-items: center; font-size: 1em; color: #fff; text-shadow: 0 0 6px #fff, 0 0 14px var(--glow, #ffe9a8); opacity: 0; pointer-events: none; }
.op-card.meta-in .op-rarity i::after { animation: sym-star 620ms ease-out both; animation-delay: calc(var(--k) * 130ms + 60ms); }
.op-card.seq .op-rarity i::after { animation-delay: calc(var(--k) * 170ms + 60ms); }
@keyframes sym-flash { 0% { transform: scale(0.2); opacity: 0; color: #fff; text-shadow: 0 0 14px #fff; } 35% { transform: scale(1.5); opacity: 1; color: #fff; text-shadow: 0 0 16px #fff; } 100% { transform: none; } }
@keyframes sym-star { 0% { transform: scale(0.2) rotate(0); opacity: 0; } 30% { transform: scale(1.5) rotate(40deg); opacity: 1; } 100% { transform: scale(0.5) rotate(90deg); opacity: 0; } }

/* Brilhinhos que piscam sobre as cartas com borda especial. */
.hcard__sparkles { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; }
.hcard__sparkles i { position: absolute; width: calc(7% * var(--s)); aspect-ratio: 1; margin: -3.5% 0 0 -3.5%; opacity: 0; background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 3px #fff); mix-blend-mode: screen; animation: twinkle 3s ease-in-out infinite; animation-delay: var(--d); }
[data-edge="gold"] .hcard__sparkles i { background: #fff6cf; }
@keyframes twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: 0.5; transform: scale(0.6) rotate(80deg); } }

@media (prefers-reduced-motion: reduce) {
  .op-stack.rising .op-card, .op-card.pop, .op-card.meta-in .op-badge, .op-card.meta-in .op-rarity i { animation-duration: 1ms; }
  .op-rarity i::after, .op-card .op-badge::after, .op-tile .stamp::after { display: none; }
  .hcard__sparkles { display: none; }
}

/* Jogo, não site: sem seleção de texto nem arrastar imagens (campos de texto continuam editáveis). */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; }

/* ---------- Revelação da rara (giro + clarão, como no Pocket) ---------- */
/* Verso da carta: azul-marinho com raios suaves e uma Poké Bola desenhada em CSS (sem imagem oficial). */
.hcard__back {
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.10), transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / 0.05) 0deg 8deg, transparent 8deg 22deg),
    linear-gradient(160deg, #24348a, #121b4d 55%, #0b1235);
  border: 3px solid #c9d2f2; box-shadow: inset 0 0 0 2px rgb(10 16 50 / 0.6), 0 18px 40px -14px rgb(0 0 0 / 0.8);
}
.hcard__back::after { width: 38%; border: 0;
  background:
    radial-gradient(circle, #0f1840 0 16%, #fff 17% 23%, transparent 24%),
    linear-gradient(180deg, var(--dex) 0 46%, #0f1840 46% 54%, #f2f5ff 54% 100%);
  border-radius: 50%; box-shadow: 0 0 0 3px #0f1840, 0 0 18px rgb(255 255 255 / 0.25); }

/* Clarão branco que cobre a frente no fim do giro e se desfaz. */
.op-card.flash .hcard__front::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 45%, #fff 0%, rgb(255 255 255 / 0.92) 55%, rgb(255 255 255 / 0.75) 100%);
  animation: card-flash 700ms ease-out forwards; }
@keyframes card-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* Fundo da revelação: azul iridescente com faixas de luz na diagonal passando. */
.op-iris { background:
    repeating-linear-gradient(115deg, transparent 0, rgb(255 255 255 / 0.09) 45px, transparent 90px, transparent 200px),
    radial-gradient(circle, rgb(255 255 255 / 0.9) 0 1px, transparent 1.6px) 0 0 / 90px 110px,
    conic-gradient(from 200deg at 50% 45%, rgb(80 130 255 / 0.55), rgb(150 120 255 / 0.5), rgb(90 210 255 / 0.5), rgb(200 160 255 / 0.45), rgb(80 130 255 / 0.55)); }
@keyframes iris-spin { to { background-position: 240px 0, 0 -220px, 0 0; filter: hue-rotate(30deg); } }

/* Estrelinha que brilha no canto da carta depois do clarão. */
.op-card.glint::after { content: ""; position: absolute; right: -4%; top: -3%; width: 26%; aspect-ratio: 1; z-index: 7; pointer-events: none;
  background: #fff; clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--glow, #bcd4ff)); opacity: 0; animation: corner-glint 1100ms ease-in-out 2 both; }
@keyframes corner-glint { 0% { opacity: 0; transform: scale(0.2) rotate(0); } 35% { opacity: 1; transform: scale(1) rotate(30deg); } 70% { opacity: 0.6; transform: scale(0.7) rotate(60deg); } 100% { opacity: 0; transform: scale(0.2) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) { .op-card.flash .hcard__front::after, .op-card.glint::after { animation-duration: 1ms; } }

/* ---------- Efeitos animados extras ---------- */
/* Raios de luz girando atrás da carta durante a revelação da rara. */
/* A camada ocupa só a tela e corta o disco de raios (160vmax), que senão abria rolagem lateral no overlay. */
.op-rays { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease); }
.op-rays::before { content: ""; position: absolute; left: 50%; top: 45%; width: 160vmax; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / 0.13) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0 8%, transparent 45%); mask: radial-gradient(circle, #000 0 8%, transparent 45%);
  animation: rays-spin 18s linear infinite paused; }
.op.celebrate .op-rays { opacity: 1; }
.op.celebrate .op-rays::before { animation-play-state: running; }
@keyframes rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Brilhinhos subindo pelo fundo na revelação. */
.op-rise { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 500ms; }
.op.celebrate .op-rise { opacity: 1; }
.op-rise i { position: absolute; bottom: -10px; width: calc(10px * var(--s)); aspect-ratio: 1; background: #fff; opacity: 0;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #9cc7ff); animation: rise-up var(--t) ease-out var(--d) infinite paused; }
.op.celebrate .op-rise i { animation-play-state: running; }
@keyframes rise-up { 0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--x), -95vh) rotate(180deg) scale(1); opacity: 0; } }

/* Carta do topo "respirando": flutua de leve quando ninguém mexe nela. */
.op-card.top:not(.dragging):not(.gone):not(.pop) .hcard { animation: card-breathe 4.2s ease-in-out infinite; }
@keyframes card-breathe { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(0.4deg); } }

/* Faíscas na ponta do corte. */
.op-spark { position: absolute; top: var(--cut-y); width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; z-index: 6; pointer-events: none;
  background: #fff; box-shadow: 0 0 6px #fff, 0 0 12px #9dffd0; animation: spark-fly 560ms ease-out forwards; }
@keyframes spark-fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(0.2); opacity: 0; } }

/* Resumo: cartas entram virando uma por uma; as raras pulsam de leve. */
.op-tile { animation: tile-in 560ms cubic-bezier(0.3, 1.3, 0.5, 1) backwards; animation-delay: calc(var(--i) * 90ms); transform-style: preserve-3d; }
@keyframes tile-in { 0% { transform: perspective(700px) rotateY(-100deg) translateY(20px) scale(0.85); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.op-tile:has(.r-holo, .r-secreta) .card { animation: rare-pulse 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms + 600ms); }
@keyframes rare-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 22px 2px rgb(201 166 255 / 0.55); } }

@media (prefers-reduced-motion: reduce) {
  .op-rays, .op-rise, .op-spark { display: none; }
  .op-card.top .hcard, .op-tile, .op-tile .card { animation: none !important; }
}

/* Resumo: cartas especiais ganham um reflexo que passa, para não parecerem miniaturas paradas. */
.op-tile:has(.r-holo, .r-secreta)::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 7px; overflow: hidden;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.55) 46%, rgb(200 170 255 / 0.25) 52%, transparent 64%) -150% 0 / 250% 100% no-repeat;
  mix-blend-mode: overlay; animation: badge-glint 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 180ms + 700ms); }

/* Raios do pacote no aviso de rara: entram, giram sem parar e pulsam enquanto o pacote treme. */
.op.tell .op-beams { animation: beams 600ms var(--ease) forwards, beams-spin 2.4s linear infinite, beams-pulse 700ms ease-in-out infinite; }
/* Segunda camada de raios, mais finos, girando no sentido contrário. */
.op-beams::before { content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: repeating-conic-gradient(from 10deg, rgb(255 255 255 / 0.55) 0deg 2deg, transparent 2deg 13deg); }
.op.tell .op-beams::before { animation: beams-spin 3.2s linear infinite reverse; }
@keyframes beams-spin { to { rotate: 360deg; } }
@keyframes beams-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7) saturate(1.3); } }
@media (prefers-reduced-motion: reduce) { .op.tell .op-beams { animation: none; opacity: 0.6; } .op-tile::before { animation: none; } }

/* Borda viva reagindo ao movimento: a inclinação desloca as cores pelo contorno (até ~150°) e a
   borda acende mais quanto mais a carta sai do centro; o giro lento do tempo continua por baixo. */
.hcard__edge {
  background:
    linear-gradient(calc(110deg + var(--ry, 0deg) * 4), transparent 30%, rgb(255 255 255 / 0.7) 48%, transparent 66%) var(--bgx, 50%) var(--bgy, 50%) / 220% 220% no-repeat,
    conic-gradient(from calc(var(--edge-a, 0deg) + var(--ry, 0deg) * 8 - var(--rx, 0deg) * 6), rgb(255 120 190 / 0.95), rgb(255 240 150 / 0.95), rgb(120 255 200 / 0.95), rgb(120 200 255 / 0.95), rgb(200 140 255 / 0.95), rgb(255 120 190 / 0.95));
  opacity: calc(0.65 + var(--pfc, 0) * 0.35 + var(--hover, 0) * 0.1);
}
[data-edge="gold"] .hcard__edge {
  background:
    linear-gradient(calc(110deg + var(--ry, 0deg) * 4), transparent 30%, rgb(255 255 240 / 0.8) 48%, transparent 66%) var(--bgx, 50%) var(--bgy, 50%) / 220% 220% no-repeat,
    conic-gradient(from calc(var(--edge-a, 0deg) + var(--ry, 0deg) * 8 - var(--rx, 0deg) * 6), rgb(255 230 140 / 0.95), rgb(255 255 240 / 0.95), rgb(230 170 60 / 0.9), rgb(255 245 200 / 0.95), rgb(255 230 140 / 0.95));
}
[data-edge="soft"] .hcard__edge { opacity: calc(0.35 + var(--pfc, 0) * 0.3); }

/* Estado vazio: caixa tracejada. */
.empty-state { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 12px;
  padding: 18px 16px; border: 2px dashed var(--line-2); border-radius: var(--r-md); color: var(--muted); }
.empty-state p { max-width: 62ch; }

/* ---------- Brilho no botão de abrir pacote (Shimmer Button do 21st) ----------
   Uma faixa clara atravessa o botão e descansa; fica entre o fundo e o texto. */
.btn.shimmer { position: relative; overflow: hidden; isolation: isolate; }
.btn.shimmer::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: -1; pointer-events: none;
  background: rgb(255 255 255 / 0.32); filter: blur(6px); transform: translateX(-160%) skewX(-22deg);
  animation: shimmer-pass 3.6s cubic-bezier(.45, .1, .3, 1) infinite; }
@keyframes shimmer-pass { 0% { transform: translateX(-160%) skewX(-22deg); } 25%, 100% { transform: translateX(330%) skewX(-22deg); } }
.btn.shimmer:disabled::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn.shimmer::after { display: none; }
}

/* ==========================================================================
   Revisão visual — painéis com spotlight e entradas (inspiração 21st.dev).
   Cartas, slots e holográficos não são tocados aqui.
   ========================================================================== */

/* ---------- Painéis: borda que acende seguindo o cursor ---------- */
.panel { position: relative; isolation: isolate; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms;
  background: radial-gradient(380px circle at var(--px, 50%) var(--py, 0px), rgb(255 106 69 / 0.10), transparent 70%); }
.panel::after { content: ""; position: absolute; inset: -2px; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0; transition: opacity 300ms;
  background: radial-gradient(260px circle at var(--px, 50%) var(--py, 0px), #ffb08f, rgb(232 56 13 / 0.6) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (hover: hover) and (pointer: fine) {
  .panel:hover::before, .panel:hover::after { opacity: 1; }
  .panel { transition: box-shadow 300ms, border-color 300ms; }
  .panel:hover { box-shadow: inset 0 0 0 1.5px var(--hi-soft), inset 0 -3px 0 var(--panel-line), var(--shadow-soft), 0 18px 50px -24px rgb(232 56 13 / 0.45); }
}
/* O brilho interno passa por cima do fundo da cabeça do painel, sem cobrir o texto. */
.panel::before { z-index: 1; mix-blend-mode: screen; }
.panel-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.55rem); letter-spacing: -0.01em; }

/* ---------- Entradas ao abrir uma janela ---------- */
.window-body > * { animation: rise 420ms cubic-bezier(.2, .8, .2, 1) backwards; }
.window-body > *:nth-child(2) { animation-delay: 60ms; }
.window-body > *:nth-child(3) { animation-delay: 120ms; }
.window-body > *:nth-child(n+4) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.window-body.still > * { animation: none; }
.window-head h2 .word { display: inline-block; white-space: nowrap; }
.window-head h2 .ltr { display: inline-block; animation: ltr-in 460ms cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(var(--i) * 26ms); }
@keyframes ltr-in { from { opacity: 0; transform: translateY(0.45em) rotate(6deg); filter: blur(6px); } }
.window-body:not(.still) .bar > i { transform-origin: left; animation: bar-fill 900ms cubic-bezier(.2, .8, .2, 1) 250ms backwards; }
@keyframes bar-fill { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .window-body > *, .window-head h2 .ltr, .window-body:not(.still) .bar > i { animation: none; }
}

/* ---------- Conta e nuvem ---------- */
.cloud-box { display: grid; gap: 10px; padding: 14px 16px; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.cloud-box > b { display: flex; align-items: center; gap: 6px; font-family: var(--f-display); }
.cloud-box p { margin: 0; }
/* Convite do Discord na Conta: linha discreta, só o ícone na cor da marca */
.cloud-discord { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.cloud-discord > .i:first-child { color: var(--discord); }
.cloud-discord > span:first-of-type { flex: 1; }
.cloud-discord:hover, .cloud-discord:focus-visible { color: var(--ink); }
.cloud-form { display: grid; gap: 12px; margin-top: 14px; }
.cloud-form input { width: 100%; box-sizing: border-box; padding: 10px 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; font-size: 16px; } /* 16px: o iOS não dá zoom no campo */
.cloud-form input:focus-visible { outline: 2px solid var(--dex-hi); outline-offset: 1px; }
.cloud-error { margin: 0; color: var(--bad); }
.cloud-links { margin-top: 10px; gap: 6px; }
.recovery-code { display: block; width: 100%; box-sizing: border-box; margin: 14px 0; padding: 14px; text-align: center; color: var(--text); font: 800 clamp(1.15rem, 6vw, 1.6rem)/1.2 var(--f-display); letter-spacing: 0.08em; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--r-md); appearance: none; -webkit-appearance: none; box-shadow: none; }
.recovery-code:focus-visible { outline: 2px solid var(--dex-hi); outline-offset: 1px; }
.save-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.save-pick { display: grid; gap: 10px; align-content: start; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.save-pick h3 { margin: 0; font: 700 1.1rem/1.2 var(--f-display); }
.save-pick ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 520px) { .save-picks { grid-template-columns: 1fr; } }

/* ---------- Aviso em escada (estrelas antes da revelação) ---------- */
.op-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.op-stars i { position: absolute; top: -8%; left: var(--x); width: 18px; height: 18px; background: var(--gold-2); clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); filter: drop-shadow(0 0 10px var(--gold)); opacity: 0; animation: star-fall 900ms var(--ease, ease-out) var(--d) forwards; }
.op-stars.l2 i, .op-stars.l3 i { width: 26px; height: 26px; animation-name: star-cross; animation-duration: 1100ms; }
.op-stars.l4 i { animation-duration: 1200ms; }
@keyframes star-fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(105vh) rotate(220deg); } }
@keyframes star-cross { 0% { opacity: 0; transform: translate(-40vw, 30vh) rotate(0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(40vw, -10vh) rotate(260deg) scale(1.1); } }
.op.tell-l3 .op-tint, .op.tell-l4 .op-tint { filter: saturate(1.5) brightness(1.15); }
@media (prefers-reduced-motion: reduce) { .op-stars { display: none; } }

/* ---------- Cena imersiva (☆☆☆) ---------- */
/* A cena entra no <body>, acima do modal da abertura. */
.immersive { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 10); display: grid; place-items: center; overflow: hidden; background: #020208; cursor: pointer; animation: im-in 500ms ease-out both; outline: none; }
.immersive.out { animation: im-out 380ms ease-in both; }
.im-bg { position: absolute; inset: -6%; background-size: cover; background-position: center; filter: blur(28px) brightness(0.45) saturate(1.4); transform: scale(1.1); }
.im-art { position: relative; z-index: 1; width: min(78vw, 420px); max-height: 78dvh; object-fit: contain; border-radius: 18px; box-shadow: 0 0 80px -10px var(--glow), 0 30px 60px -20px #000; animation: im-drift 6.5s ease-in-out both; }
.im-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.im-dust i { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px var(--glow); opacity: 0; transform: scale(var(--s)); animation: im-twinkle 2.4s ease-in-out calc(var(--k) * 140ms) infinite; }
.im-sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.28) 50%, transparent 60%); transform: translateX(-100%); animation: im-sweep 1.6s ease-in-out 900ms both; }
.im-caption { position: absolute; z-index: 4; bottom: max(24px, env(safe-area-inset-bottom)); left: 16px; right: 16px; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--text); text-shadow: 0 2px 12px #000; }
.im-caption b { font: 800 1.6rem/1.1 var(--f-display); }
.im-hint { font-size: 0.85rem; color: var(--text-2); }
@keyframes im-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes im-out { to { opacity: 0; } }
@keyframes im-drift { 0% { transform: scale(0.92) translateY(14px); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.06) translateY(-10px); } }
@keyframes im-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.9; } }
@keyframes im-sweep { to { transform: translateX(100%); } }
.immersive.still, .immersive.still .im-art { animation: none; }
@media (prefers-reduced-motion: reduce) { .immersive, .im-art { animation: none; } }

/* ---------- Abertura em lote (até 10 pacotes) ---------- */
.op.batch { width: min(600px, 100%); height: min(900px, calc(100dvh - 32px)); min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; gap: 12px; }
/* Camadas decorativas (feixes do pacote, brilho do corte) passam da largura da tela: a abertura ocupa
   a largura toda (o respiro de 16px vira padding dela) e corta o que sobra, sem rolagem lateral. */
.op-overlay { overflow-x: hidden; padding-inline: 0; }
.op-overlay > #opening-root { width: 100%; min-width: 0; display: grid; justify-items: center; }
.op-overlay .op { padding-inline: 16px; overflow-x: clip; }
.op-overlay:has(.op.batch) { background: rgb(6 10 26 / 0.94); } /* 50 cartas pequenas pedem um fundo mais calmo */
.op.batch .op-stage { min-height: 0; align-content: center; }
.op.batch .op-stage::before { display: none; } /* brilho do corte com o dedo: não existe no lote e vazava 120vw para o lado */
.op.batch .op-foot { min-height: 0; padding-bottom: env(safe-area-inset-bottom); }
.bo-actions { justify-content: center; }

/* Leque de pacotes lacrados com o selo ×N. */
.bo-fan { --cut-y: 13%; position: relative; width: min(220px, 52vw); aspect-ratio: 5 / 8; padding: 0; border: 0; background: none; cursor: pointer; animation: hover 2.6s ease-in-out infinite; }
.bo-pack { position: absolute; inset: 0; transform-origin: 50% 100%; transition: transform 420ms var(--ease), opacity 420ms;
  transform: translateX(calc(var(--k) * 26px)) rotate(calc(var(--k) * 7deg)); filter: brightness(calc(1 - var(--k) * 0.18)); }
.bo-pack .pack { position: absolute; inset: 0; width: 100%; height: 100%; }
.bo-fan:hover .bo-pack { transform: translateX(calc(var(--k) * 32px)) rotate(calc(var(--k) * 9deg)); }
.bo-count { position: absolute; z-index: 3; right: -14px; top: -12px; min-width: 46px; padding: 4px 10px; border-radius: 999px; background: var(--dex); color: #fff;
  border: 2px solid #fff; box-shadow: 0 3px 0 var(--dex-lip), 0 8px 20px rgb(0 0 0 / 0.45); font: 800 1.15rem/1.2 var(--f-display); }
.bo-fan:focus-visible { outline: 2px solid var(--dex-hi); outline-offset: 8px; border-radius: var(--r-md); }
.bo-fan.torn { animation: none; cursor: default; }
.bo-fan.torn .bo-pack { transform: none; }
.bo-fan.torn .bo-count { opacity: 0; transition: opacity 200ms; }
.bo-fan.shaking .bo-pack { animation: pack-shake 1.1s ease-in-out; }

/* Grade: uma linha de 5 cartas por pacote; rola na vertical dentro do modal. */
.bo-grid { display: grid; gap: 12px; align-content: start; width: min(520px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; box-sizing: border-box; }
.bo-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; animation: bo-row-in 360ms var(--ease) backwards; animation-delay: calc(var(--p) * 50ms); }
@keyframes bo-row-in { from { opacity: 0; transform: translateY(14px); } }
.bo-card { position: relative; aspect-ratio: var(--card-ratio); padding: 0; border: 0; background: none; perspective: 700px; cursor: pointer; border-radius: 7px; }
.bo-card:focus-visible { outline: 2px solid var(--dex-hi); outline-offset: 2px; }
.bo-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 380ms var(--ease); }
.bo-card.up .bo-inner { transform: rotateY(0deg); }
.bo-face, .bo-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 7px; }
.bo-face .card { height: 100%; transform: none; will-change: auto; }
.bo-back { transform: rotateY(180deg); display: grid; place-items: center; color: rgb(255 255 255 / 0.55); background: var(--dex-lip); border: 2px solid var(--dex); box-shadow: inset 0 0 0 3px rgb(0 0 0 / 0.18); }
.bo-back .i { width: 38%; height: auto; padding: 6px; border-radius: 50%; background: rgb(0 0 0 / 0.22); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.12); }
/* Cartinhas pequenas: só o essencial (nova e tiragem); nível, nota e proteção ficam para o resumo. */
.bo-face .lv-tag, .bo-face .slab-tag, .bo-face .prot { display: none; }
.bo-face .newtag { top: 4px; left: 4px; width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: 0 0 0 2px rgb(10 10 11 / 0.8); }
.bo-face .ed-primeira { width: 16px; height: 16px; left: 2px; bottom: 2px; }
.bo-face .ed-primeira b { font-size: 0.5rem; }
.bo-face .ed-primeira i { display: none; }
.bo-face .ed-shadowless { font-size: 0.4rem; padding: 2px 3px; left: 2px; bottom: 2px; }

/* Especial ainda virada: brilha na cor da raridade até ser revelada. */
.bo-card.special::before, .bo-card.revealed::before { content: ""; position: absolute; inset: -3px; border-radius: 9px; pointer-events: none; }
.bo-card.special::before { box-shadow: 0 0 0 2px var(--glow), 0 0 18px 2px var(--glow); animation: bo-pulse 1.4s ease-in-out infinite; }
.bo-card.special .bo-back { border-color: var(--glow); color: #fff; }
@keyframes bo-pulse { 50% { box-shadow: 0 0 0 2px var(--glow), 0 0 30px 6px var(--glow); } }
.bo-card.revealing { z-index: 2; }
.bo-card.revealing .bo-inner { transition: none; animation: bo-spin 600ms cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes bo-spin { 0% { transform: rotateY(180deg) scale(1); } 50% { transform: rotateY(450deg) scale(1.18); } 100% { transform: rotateY(720deg) scale(1); } }
.bo-card.flash::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 7px; background: #fff; pointer-events: none; animation: bo-flash 500ms ease-out forwards; }
@keyframes bo-flash { from { opacity: 0.95; } to { opacity: 0; } }
.bo-card.revealed::before { box-shadow: 0 0 14px 1px var(--glow); opacity: 0.7; }
/* Sem transição depois do giro: senão a carta voltaria girando de 720° para 0°. */
.bo-card.revealed .bo-inner { transition: none; }
@media (hover: hover) and (pointer: fine) { .bo-card.up:hover .bo-inner { transform: translateY(-3px); } }

@media (max-width: 420px) {
  .bo-grid { gap: 10px; padding: 8px 6px; }
  .bo-row { gap: 5px; }
  .bo-count { right: -8px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bo-fan, .bo-row, .bo-card.special::before, .bo-fan.shaking .bo-pack { animation: none; }
  .bo-inner, .bo-pack { transition: none; }
  .bo-card.revealing .bo-inner { animation-duration: 150ms; }
}

/* ---------- Poder das cartas ---------- */
.stats-block .attacks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stats-block .attacks li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; background: var(--surface-3); border-radius: var(--r-sm); }
.stats-block .cost { display: inline-flex; gap: 3px; min-width: 18px; }
.energy { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.25); }
.stats-block .dmg { font: 800 1.05rem/1 var(--f-display); }

/* ---------- Campanha (aba Batalha) ---------- */

/* Painel da aba (Campanha ou Arena), abaixo do trilho de abas. */
[data-win="batalha"] .window-body, .battle-panel { grid-auto-rows: max-content; }
.battle-panel { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* Mapa da rota: cabeçalho com as setas e a trilha das 10 fases em nós grandes, o ginásio maior no
   fim com o ícone e a cor do tipo (--tc). */
.route-map { --tc: var(--dex); display: grid; gap: 14px; padding: 14px 14px 18px; border-radius: var(--r-lg); background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line-2); min-width: 0; }
.route-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.route-title { flex: 1; min-width: 0; display: grid; gap: 1px; }
.route-title .eyebrow { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.route-title h3 { font: 800 1.35rem/1.1 var(--f-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-head > .i { color: var(--gold-ink); flex: none; }
.route-arrow { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.route-arrow.prev .i { transform: rotate(180deg); }
.route-arrow:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.route-back { justify-self: center; margin-top: -4px; }

.route-nodes { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.6fr); align-items: center; margin: 0; padding: 0; list-style: none; }
.route-nodes::before { content: ""; position: absolute; left: 4%; right: 6%; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 6px; background: var(--surface-3); }
.route-node { position: relative; display: grid; place-items: center; }
.node-face { --s: 34px; position: relative; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; font: 800 0.9rem/1 var(--f-display);
  background: var(--panel-2); color: var(--muted); border: 2.5px solid var(--line-2); box-shadow: 0 2px 0 var(--line-2); font-variant-numeric: tabular-nums; }
.route-node.done .node-face { background: var(--good-fill); border-color: var(--good-fill); color: var(--on-game); box-shadow: 0 2px 0 color-mix(in srgb, var(--good-fill) 60%, #000); }
.route-node.now .node-face { --s: 40px; background: var(--dex); border-color: var(--dex-lip); color: var(--on-game); font-size: 1.05rem;
  box-shadow: 0 3px 0 var(--dex-lip), 0 0 0 5px color-mix(in srgb, var(--dex) 25%, transparent); }
.route-node.locked .node-face { opacity: 0.55; box-shadow: none; }
.route-node.gym .node-face { --s: 56px; color: var(--on-game); background: color-mix(in srgb, var(--tc) 72%, var(--vs-bg)); border: 3px solid var(--tc);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 50%, #000), inset 0 2px 0 rgb(255 255 255 / 0.25); }
.route-node.gym.now .node-face { box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 50%, #000), 0 0 0 5px color-mix(in srgb, var(--tc) 40%, transparent); }
.route-node.gym.next .node-face, .route-node.gym.locked .node-face { filter: saturate(0.55); }
.node-ok { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: var(--good-fill); color: var(--on-game); box-shadow: 0 0 0 2.5px var(--raised); }
.route-map.locked .route-nodes::before { opacity: 0.5; }
@media (max-width: 480px) {
  .route-map { padding: 12px 10px 16px; }
  .route-title h3 { font-size: 1.15rem; }
  .route-head .type-badge { display: none; } /* o ícone do tipo já está no nó do ginásio */
  .node-face { --s: 26px; font-size: 0.74rem; border-width: 2px; }
  .route-node.now .node-face { --s: 30px; font-size: 0.85rem; box-shadow: 0 2px 0 var(--dex-lip), 0 0 0 3px color-mix(in srgb, var(--dex) 25%, transparent); }
  .route-node.gym .node-face { --s: 44px; }
  .route-node.gym .node-face .i { width: 20px; height: 20px; }
  .route-node.done:not(.gym) .node-face .i { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  .route-node.now .node-face { animation: node-pulse 1.8s ease-in-out infinite; }
  .route-node.gym.now .node-face { animation-name: gym-pulse; }
}
@keyframes node-pulse { 50% { box-shadow: 0 3px 0 var(--dex-lip), 0 0 0 9px color-mix(in srgb, var(--dex) 10%, transparent); } }
@keyframes gym-pulse { 50% { box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 50%, #000), 0 0 0 10px color-mix(in srgb, var(--tc) 15%, transparent); } }

/* Campanha completa: as 8 medalhas dos ginásios. */
.route-medals { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.route-medals li { display: grid; justify-items: center; gap: 4px; }
.medal-face { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--on-game);
  background: color-mix(in srgb, var(--tc) 72%, var(--vs-bg)); border: 3px solid var(--tc); box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 50%, #000); }
.medal-no { font: 800 0.75rem/1 var(--f-display); color: var(--muted); }
@media (max-width: 480px) { .route-medals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Palco VS: os dois lados com o selo no meio. No celular (palco estreito) um lado fica em cima do outro. */
.vs-stage { container: vs / inline-size; display: grid; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--vs-floor);
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line-2); min-width: 0; }
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vs-head h3 { font: 800 1.25rem/1.1 var(--f-display); color: var(--ink); }
.vs-head > div:first-child { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.vs-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.vs-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.vs-side { display: grid; gap: 8px; min-width: 0; padding: 10px; border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 2px var(--line); align-self: stretch; align-content: start; }
.vs-side.foe { background: var(--vs-foe); }
.vs-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.vs-side-head b { font: 800 1rem/1.1 var(--f-display); color: var(--ink); white-space: nowrap; }
.vs-side-head span { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-cards { --gap: 8px; display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.vs-side.foe .vs-cards { justify-content: center; }
.vs-note { margin: 0; }
.vs-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 8px; text-align: center; color: var(--muted); font-size: 0.85rem; }
.vs-empty .i { color: var(--gold-ink); }

/* Cartas do palco: no seu lado elas são as vagas do time (tocar abre o menu). */
.slot-card { position: relative; flex: 0 1 calc((100% - 4 * var(--gap)) / 5); min-width: 0; display: grid; gap: 4px; }
.slot-card .card { width: 100%; }
.slot-card .lv-tag { display: none; } /* o nível aparece embaixo da carta */
.slot-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 8px; cursor: pointer; color: inherit; font: inherit;
  transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1); }
.slot-btn:active { transform: translateY(2px) scale(0.97); }
.slot-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.slot-card.open .slot-btn .card { box-shadow: 0 0 0 3px var(--focus); }
@media (hover: hover) and (pointer: fine) { .slot-btn:hover .card { transform: translateY(-3px); box-shadow: 0 10px 20px -8px rgb(20 18 70 / 0.5); } }
.slot-face { position: relative; display: block; }
.slot-no { position: absolute; z-index: 5; top: -6px; left: -6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 800 0.78rem/1 var(--f-display); background: var(--ink); color: var(--raised); box-shadow: 0 0 0 2px var(--raised); }
.slot-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 2px; min-width: 0; font-size: 0.7rem; color: var(--muted); }
.slot-meta b { font: 800 0.85rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.slot-card.empty .slot-meta { justify-content: center; }
.slot-empty { aspect-ratio: var(--card-ratio); display: grid; place-content: center; justify-items: center; gap: 4px; padding: 4px; border-radius: 8px; text-align: center;
  border: 2.5px dashed var(--line-2); background: var(--panel-2); color: var(--muted); }
.slot-empty small { font: 700 0.68rem/1.15 var(--f-ui); }
.slot-card.empty.must .slot-empty { border-color: color-mix(in srgb, var(--dex) 55%, var(--line-2)); color: var(--must-ink); }
@media (hover: hover) and (pointer: fine) { .slot-btn:hover .slot-empty { border-color: var(--ink-2); color: var(--ink); } }

/* Etiquetas de fraqueza (só aviso visual). */
.weak-tag { position: absolute; z-index: 5; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  font: 800 0.66rem/1.3 var(--f-ui); background: var(--gold); color: var(--seal-ink); box-shadow: 0 2px 0 var(--seal-lip), 0 0 0 1.5px var(--raised); }
.weak-tag.risk { background: var(--bad-fill); color: var(--on-game); box-shadow: 0 2px 0 color-mix(in srgb, var(--bad-fill) 55%, #000), 0 0 0 1.5px var(--raised); }
.slot-card.weak .card { box-shadow: 0 0 0 2.5px var(--gold); }

/* Menu da carta (popover): abre embaixo dela; nas duas últimas vagas, alinhado à direita. */
.slot-menu { position: absolute; z-index: 20; top: calc(100% - 18px); left: 0; display: grid; gap: 2px; min-width: 156px; padding: 6px; border-radius: 16px;
  background: var(--raised); box-shadow: inset 0 0 0 2px var(--line), var(--shadow-pop); }
.slot-menu.end { left: auto; right: 0; }
.menu-item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 11px; background: none; color: var(--ink);
  font: 800 0.86rem/1.1 var(--f-ui); text-align: left; cursor: pointer; white-space: nowrap; }
.menu-item .menu-arrow { width: 16px; text-align: center; font-size: 1rem; }
.menu-item.danger { color: var(--bad); }
.menu-item:disabled { color: var(--ink-muted); opacity: 0.6; cursor: default; }
.menu-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .menu-item:hover:not(:disabled) { background: var(--hover-tint); } }
@media (prefers-reduced-motion: no-preference) { .slot-menu { animation: menu-in 140ms cubic-bezier(.2, .9, .3, 1.2); transform-origin: top left; } .slot-menu.end { transform-origin: top right; } }
@keyframes menu-in { from { opacity: 0; transform: scale(0.92) translateY(-4px); } }

/* Selo VS: o poder de cada lado em volta do "VS"; o seu fica verde se é maior ou igual. */
.vs-badge { display: grid; justify-items: center; gap: 4px; padding: 10px 8px; min-width: 76px; border-radius: 22px; background: var(--vs-bg); color: var(--vs-ink); border: 2px solid var(--vs-edge);
  box-shadow: 0 4px 0 var(--vs-lip), inset 0 2px 0 rgb(255 255 255 / 0.12); text-align: center; }
.vs-badge > b { font: 800 1.9rem/0.9 var(--f-display); letter-spacing: -0.02em; color: var(--gold); text-shadow: 0 2px 0 var(--seal-lip); }
.vs-pow { font: 800 0.95rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.vs-pow.ahead { color: var(--vs-ahead); }
.vs-pow.behind { color: var(--vs-behind); }
.vs-badge.warn { display: flex; align-items: center; gap: 8px; max-width: 170px; padding: 12px; border: 0; background: var(--raised); color: var(--ink); text-align: left;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, var(--line)), 0 3px 0 var(--seal-lip); }
.vs-badge.warn > .i { flex: none; color: var(--gold-ink); }
.vs-badge.warn span { display: grid; gap: 2px; }
.vs-badge.warn b { font: 800 0.95rem/1.1 var(--f-display); }
.vs-badge.warn small { font-size: 0.75rem; color: var(--muted); }

@container vs (max-width: 620px) {
  .vs-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vs-badge { grid-auto-flow: column; align-items: center; justify-self: center; gap: 12px; padding: 6px 16px; border-radius: 999px; }
  .vs-badge > b { font-size: 1.5rem; }
  .vs-badge.warn { max-width: none; justify-self: stretch; border-radius: 16px; }
  .vs-side { padding: 8px; }
  .vs-cards { --gap: 6px; }
}

/* Barra de ação: contagem com anel, desafio do ginásio (dourado) ou aviso de derrota repetida. */
.action-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line-2); }
.action-bar > .grow { display: grid; gap: 2px; flex: 1 1 160px; min-width: 0; }
.action-bar small { font: 700 0.8rem/1.2 var(--f-ui); color: var(--muted); }
.action-bar.timer .grow b { font: 800 1.6rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-note { font-size: 0.75rem; line-height: 1.35; color: var(--muted); text-align: right; }
.bar-note b { color: var(--ink); }
.fight-ring { position: relative; width: 58px; height: 58px; flex: none; display: grid; place-items: center; }
.fight-ring .mini-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.fight-ring .ring-track { stroke: var(--surface-3); }
.fight-ring .fight-fill { stroke: var(--hp); transition: stroke-dashoffset 1s linear; }
.bar-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--dex); color: var(--on-game);
  box-shadow: inset 0 -3px 0 var(--dex-lip), inset 0 2px 0 var(--dex-hi); }
.action-bar.warn { padding-left: 12px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, var(--line)), 0 3px 0 var(--seal-lip); }
.action-bar.warn .bar-ico { background: var(--gold); color: var(--seal-ink); box-shadow: inset 0 -3px 0 var(--seal-lip); }
.action-bar.warn .grow b { font: 800 1.05rem/1.15 var(--f-display); color: var(--ink); }
.action-bar.warn .grow .small { color: var(--ink-2); }
.action-bar.gym { padding: 12px; background: var(--gym-bar); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 80%, var(--line)), 0 3px 0 var(--seal-lip); }
.action-bar.gym .eyebrow { color: var(--gold-ink); font-weight: 800; }
.action-bar.gym .small { color: var(--ink-2); }
.action-bar.gym .small b { color: var(--ink); }
.btn.gym-cta { --lip-h: 5px; --lip-c: var(--seal-lip); flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 10px 24px;
  font: 800 1.25rem/1 var(--f-display); background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%); border-color: var(--gold); color: var(--seal-ink);
  box-shadow: 0 var(--lip-h) 0 var(--lip-c), inset 0 2px 0 rgb(255 255 255 / 0.55); }
.btn.gym-cta:active:not(:disabled) { box-shadow: 0 0 0 var(--lip-c), inset 0 2px 0 rgb(255 255 255 / 0.55); }
@media (hover: hover) and (pointer: fine) { .btn.gym-cta:hover:not(:disabled) { background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%); border-color: var(--gold); filter: brightness(1.05); } }
@media (prefers-reduced-motion: no-preference) {
  .btn.gym-cta { animation: gym-glow 2.4s ease-in-out infinite; }
}
@keyframes gym-glow { 50% { box-shadow: 0 var(--lip-h) 0 var(--lip-c), inset 0 2px 0 rgb(255 255 255 / 0.55), 0 0 0 6px color-mix(in srgb, var(--gold) 30%, transparent); } }
@media (max-width: 480px) {
  .bar-note { display: none; }
  .btn.gym-cta { flex-basis: 100%; }
}

/* Rodapé: selos do placar e o cartão da última luta. */
.campaign-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: stretch; }
.campaign-foot > :only-child { grid-column: 1 / -1; }
.score-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.score-badge { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border-radius: var(--r-md); background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--line), 0 2px 0 var(--line-2); }
.score-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--on-game); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.2); }
.score-badge.wins .score-ico { background: var(--good-fill); }
.score-badge.losses .score-ico { background: var(--bad-fill); }
.score-badge.gyms .score-ico { background: var(--gold); color: var(--seal-ink); }
.score-txt { display: grid; gap: 1px; min-width: 0; }
.score-txt b { font: 800 1.3rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.score-txt b small { font-size: 0.8rem; color: var(--muted); }
.score-txt > small { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-fight { --rc: var(--good-fill); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px 10px 10px; border-radius: var(--r-md); background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--line), inset 5px 0 0 var(--rc), 0 2px 0 var(--line-2); }
.last-fight.loss { --rc: var(--bad-fill); }
.lf-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--rc); color: var(--on-game); margin-left: 4px; }
.lf-info { display: grid; gap: 1px; flex: 1 1 150px; min-width: 0; }
.lf-info h3 { font: 800 1.02rem/1.15 var(--f-display); color: var(--ink); }
.last-fight > .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 820px) { .campaign-foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .score-badge { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; text-align: center; }
  .score-txt { justify-items: center; }
  .last-fight > .btn { flex: 1 0 100%; justify-content: center; }
}

.tag.result.win { background: var(--good-fill); border-color: var(--good-fill); color: #fff; }
.tag.result.loss { background: var(--bad-fill); border-color: var(--bad-fill); color: #fff; }
.pick-power { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--muted); text-align: center; }
.pick-power b { color: var(--text); font-variant-numeric: tabular-nums; }
.pick:has(.pick-power) .pick-tag { bottom: 30px; }
/* ---------- Arena (aba Batalha) ---------- */
.arena-warn { color: var(--gold-ink); }
.arena-error { margin: 0; color: var(--bad); }

/* Escudo da liga (SVG): corpo na cor da liga (--lg), lábio escuro embaixo, brilho e emblema brancos. */
.league-shield { --lg: var(--league-prata); flex: none; display: block; overflow: visible; }
.league-shield .ls-lip { fill: color-mix(in srgb, var(--lg) 55%, #000); }
.league-shield .ls-body { fill: var(--lg); stroke: color-mix(in srgb, var(--lg) 55%, #fff); stroke-width: 3; stroke-linejoin: round; }
.league-shield .ls-shine { fill: rgb(255 255 255 / 0.22); }
.league-shield .ls-emblem { fill: var(--vs-ink); stroke: color-mix(in srgb, var(--lg) 45%, #000); stroke-width: 1.6; stroke-linejoin: round; }
.league-shield.off { filter: grayscale(1); opacity: 0.4; }

/* Cartão do jogador: escudo e MMR à esquerda, liga e posição no meio, lutas do dia à direita. */
.player-card { --lg: var(--league-prata); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "shield info fights" "shield info reload";
  align-items: center; gap: 8px 18px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line-2); min-width: 0; }
.pc-shield { grid-area: shield; display: grid; justify-items: center; gap: 2px; padding: 10px 14px 8px; border-radius: 18px;
  background: color-mix(in srgb, var(--lg) 16%, var(--raised)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lg) 35%, var(--line)); }
.player-card.gate .pc-shield { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--line); }
.pc-mmr { display: flex; align-items: baseline; gap: 3px; }
.pc-mmr b { font: 800 1.35rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-mmr small { font: 800 0.7rem/1 var(--f-ui); color: var(--muted); }
.pc-info { grid-area: info; display: grid; gap: 4px; min-width: 0; }
.pc-info .eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-info h3 { font: 800 1.55rem/1.05 var(--f-display); color: var(--ink); }
.pc-info p { margin: 0; }
.pc-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.88rem; color: var(--ink-2); }
.pc-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-next { display: grid; gap: 3px; max-width: 300px; margin-top: 2px; }
.league-bar { display: block; height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.league-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--lg); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.3); }
.pc-fights { grid-area: fights; display: grid; justify-items: end; gap: 5px; text-align: right; align-self: end; }
.pc-fights b { font: 800 1rem/1 var(--f-display); color: var(--ink); }
.pc-reload { grid-area: reload; justify-self: end; align-self: start; }
.player-card > .arena-error { grid-column: 1 / -1; }
.player-card.gate { grid-template-areas: "shield info cta"; }
.pc-cta { grid-area: cta; }
.fight-dots { display: flex; gap: 5px; }
.fight-dots > i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 2px 2px rgb(0 0 0 / 0.14); }
.fight-dots > i.on { background: var(--dex); box-shadow: inset 0 -2px 0 var(--dex-lip), inset 0 2px 0 var(--dex-hi); }
@media (max-width: 560px) {
  .player-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "shield info info" "fights fights reload"; gap: 12px; padding: 12px; }
  .player-card.gate { grid-template-areas: "shield info info" "cta cta cta"; }
  .pc-cta { justify-self: stretch; }
  .pc-shield { padding: 8px 10px 6px; }
  .pc-shield .league-shield { width: 64px; height: 72px; }
  .pc-info h3 { font-size: 1.3rem; }
  .pc-fights { justify-items: start; text-align: left; }
  .pc-reload { align-self: end; }
  .fight-dots { gap: 4px; }
  .fight-dots > i { width: 12px; height: 12px; }
}

/* Palco de ataque: o palco VS da campanha com o "Adversário ?" em silhueta e o botão Lutar grande. */
.attack-stage .vs-side.foe { display: flex; flex-direction: column; }
.mystery-foe { position: relative; flex: 1; display: grid; place-items: end center; min-height: 140px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--vs-ink) 14%, var(--vs-bg)), var(--vs-bg)); box-shadow: inset 0 0 0 2px var(--vs-edge); }
.mystery-foe svg { width: 96px; height: 108px; fill: color-mix(in srgb, var(--vs-ink) 24%, var(--vs-bg)); }
.mystery-foe b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -78%); font: 800 2.6rem/1 var(--f-display); color: var(--gold); text-shadow: 0 3px 0 var(--seal-lip); }
.mystery-note { margin: 0; }
.attack-go { display: grid; justify-items: center; gap: 8px; text-align: center; }
.attack-go b { color: var(--ink); }
.btn.fight-cta { --lip-h: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 420px); min-height: 60px; font: 800 1.4rem/1 var(--f-display); }
.btn.fight-cta:disabled { opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .btn.fight-cta:not(:disabled) { animation: fight-glow 2.4s ease-in-out infinite; }
}
@keyframes fight-glow { 50% { box-shadow: 0 var(--lip-h) 0 var(--lip-c), inset 0 2px 0 var(--dex-hi), 0 0 0 7px color-mix(in srgb, var(--dex) 22%, transparent); } }
@container vs (max-width: 620px) {
  .mystery-foe { min-height: 110px; }
  .mystery-foe svg { width: 58px; height: 66px; }
}

/* Defesa: as cartas registradas (apagadas as que saíram em trocas) e o botão. */
.defense-card { display: grid; gap: 12px; padding: 16px; }
.dc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dc-head .grow { display: grid; gap: 1px; min-width: 0; }
.dc-head h3 { font: 800 1.2rem/1.1 var(--f-display); color: var(--ink); }
.dc-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--branch-log); color: var(--on-game);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.25); }
.defense-cards { --gap: 8px; max-width: 600px; }
.dc-empty { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--r-md); border: 2.5px dashed var(--line-2); color: var(--muted); font-size: 0.9rem; }
.dc-empty .i { flex: none; }
.dc-foot { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.dc-foot > span { flex: 1 1 220px; }
.dc-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
.defense-card .arena-warn, .defense-card .arena-error { margin: 0; }
.slot-card.lost .card { filter: grayscale(1); opacity: 0.55; }
@media (max-width: 480px) { .dc-foot .btn { flex: 1 0 100%; justify-content: center; } }

/* Ranking e suas lutas. */
.arena-lists { align-items: start; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.list-head h3 { font: 800 1.2rem/1.1 var(--f-display); color: var(--ink); }
.rank-list, .fight-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rank-row { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 14px;
  background: var(--raised); box-shadow: inset 0 0 0 2px var(--line); }
.rr-pos { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 800 0.92rem/1 var(--f-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-row.top .rr-pos { color: var(--vs-bg); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.2); }
.rank-row.top-1 .rr-pos { background: var(--league-ouro); }
.rank-row.top-2 .rr-pos { background: var(--league-prata); }
.rank-row.top-3 .rr-pos { background: var(--league-bronze); }
.rr-who { display: grid; min-width: 0; }
.rr-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rr-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rr-who small { font-size: 0.72rem; color: var(--muted); }
.rr-mmr { display: grid; justify-items: end; font: 800 1.1rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.rr-mmr small { font: 800 0.62rem/1.2 var(--f-ui); color: var(--muted); }
.rank-row.me { background: color-mix(in srgb, var(--dex) 10%, var(--raised)); box-shadow: inset 0 0 0 2px var(--dex), 0 2px 0 var(--dex-lip); }
.rank-gap { text-align: center; color: var(--muted); line-height: 0.6; letter-spacing: 3px; }

.fight-card { --rc: var(--good-fill); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px 8px 15px; border-radius: 14px;
  background: var(--raised); box-shadow: inset 0 0 0 2px var(--line), inset 5px 0 0 var(--rc), 0 2px 0 var(--line-2); }
.fight-card.loss { --rc: var(--bad-fill); }
.fc-role { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 800 0.74rem/1.3 var(--f-ui); color: var(--ink-2);
  background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--line); white-space: nowrap; }
.fc-role.atk .i { color: var(--dex); }
.fc-role.def .i { color: var(--branch-log); }
.fc-who { display: grid; min-width: 0; }
.fc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.fc-who small { font-size: 0.74rem; line-height: 1.3; color: var(--muted); }
.fc-result { display: grid; justify-items: end; text-align: right; }
.fc-result b { font: 800 1rem/1.1 var(--f-display); color: var(--good); }
.fight-card.loss .fc-result b { color: var(--bad); }
.fc-result small { font: 800 0.76rem/1.2 var(--f-ui); color: var(--muted); white-space: nowrap; }
.fc-result small.up { color: var(--good); }
.fc-result small.down { color: var(--bad); }
.fight-card > .btn { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 520px) {
  .rank-row { gap: 8px; }
  .fight-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fight-card > .btn { grid-column: 1 / -1; justify-content: center; }
}

.battle-log { display: grid; gap: 4px; max-height: 50vh; overflow: auto; margin: 0; padding: 0 0 0 1.4em; font-size: 0.9rem; }
.battle-log li.B { color: var(--text-2); }

/* ---------- Trocas: balcão de colecionadores ---------- */
[data-win="trocas"] .window-body, .trades-panel, [data-win="missoes"] .window-body { grid-auto-rows: max-content; }
.trades-panel { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* Topo da aba: renovação, fichas e Pedir proposta. */
.counter-bar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.counter-bar > .btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.counter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--raised); color: var(--ink-2);
  font: 700 0.88rem/1.2 var(--f-ui); box-shadow: inset 0 0 0 2px var(--line), 0 2px 0 var(--line-2); white-space: nowrap; }
.counter-chip b { font: 800 1rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.counter-chip .i { color: var(--muted); }
.counter-note { max-width: 70ch; }
.counter-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 16px; border-radius: var(--r-lg); border: 2.5px dashed var(--line-2); color: var(--muted); text-align: center; }
.counter-empty p { max-width: 40ch; font-weight: 700; }

.npc-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); margin: 0; padding: 0; list-style: none; }
.npc-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--panel); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hi-soft), inset 0 -3px 0 var(--panel-line), var(--shadow-soft); }
.npc-card.ready { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--good) 45%, transparent), inset 0 -3px 0 var(--panel-line), var(--shadow-soft); }
.npc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.npc-face { --npc: var(--npc-1); width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--npc); color: var(--on-game);
  font: 800 1.45rem/1 var(--f-display); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.25), 0 0 0 3px var(--raised), 0 3px 0 3px var(--line-2); }
.npc-face.small { width: 36px; height: 36px; font-size: 1.1rem; }
.npc-who { display: grid; min-width: 0; }
.npc-who b { font: 800 1.15rem/1.1 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npc-who small, .wonder-who small { font-size: 0.76rem; color: var(--muted); }
/* Balão de fala com a ponta virada para o rosto. */
.speech { position: relative; margin: 0 0 0 8px; padding: 8px 12px; border-radius: 14px; background: var(--speech); color: var(--ink-2); font-weight: 700; font-size: 0.88rem; line-height: 1.35; }
.speech::before { content: ""; position: absolute; top: -7px; left: 14px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--speech); }

/* "Você dá" → "Você recebe" */
.trade-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 12px 10px; border-radius: var(--r-md); background: var(--panel-2); }
.tf-side { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; min-width: 0; }
.tf-label { font: 800 0.76rem/1.2 var(--f-ui); color: var(--muted); }
.tf-what { display: grid; justify-items: center; gap: 3px; font-size: 0.84rem; line-height: 1.2; min-width: 0; }
.tf-what b { overflow-wrap: anywhere; }
.tf-have { font: 800 0.74rem/1.2 var(--f-ui); }
.tf-have.ok { color: var(--good); }
.tf-have.no { color: var(--bad); }
.tf-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--raised); color: var(--dex); box-shadow: 0 2px 0 var(--line-2), inset 0 0 0 2px var(--line); }
.tf-card { position: relative; width: 92px; }
.tf-card .card { box-shadow: 0 6px 14px -6px rgb(20 18 70 / 0.45); }
.tf-card .stamp { position: absolute; top: -8px; right: -8px; z-index: 6; }
.tf-wish { display: inline-flex; align-items: center; gap: 4px; font: 800 0.72rem/1.2 var(--f-ui); color: var(--gold-ink); }
/* Pilha de verso das repetidas pedidas, na cor da raridade. */
.give-stack { --rc: var(--r-comum); position: relative; width: 64px; height: 86px; margin-top: 4px; }
.give-stack.r-incomum { --rc: var(--r-incomum); }
.give-stack.r-rara { --rc: var(--r-rara); }
.give-stack.r-holo { --rc: var(--r-holo); }
.give-stack.r-secreta { --rc: var(--r-secreta); }
.give-stack i { position: absolute; inset: 0; border-radius: 7px; background: color-mix(in srgb, var(--rc) 22%, var(--raised)); border: 2px solid var(--rc);
  transform: translate(calc(var(--k) * -5px), calc(var(--k) * -4px)) rotate(calc(var(--k) * -4deg)); box-shadow: 0 2px 0 color-mix(in srgb, var(--rc) 45%, transparent); }
.give-stack b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.5rem/1 var(--f-display); color: var(--rc); }

.npc-foot { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.npc-foot .btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.price-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font: 700 0.84rem/1.2 var(--f-ui); box-shadow: inset 0 0 0 1.5px var(--line); }
.price-chip b { font: 800 0.98rem/1 var(--f-display); color: var(--ink); }
.price-chip.no b, .price-chip.no { color: var(--bad); }
.npc-why { flex: 1 0 100%; text-align: right; font-size: 0.78rem; font-weight: 700; color: var(--bad); }

/* Escolha surpresa: o mesmo painel num palco lilás, com o selo de brilho. */
.wonder-stage { display: grid; gap: 12px; background: var(--wonder-floor); box-shadow: inset 0 0 0 2px var(--wonder-edge), inset 0 -3px 0 var(--wonder-edge), var(--shadow-soft); }
.wonder-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wonder-head .grow { flex: 1 1 200px; display: grid; min-width: 0; }
.wonder-head > .counter-chip { margin-left: auto; }
.wonder-head h3 { font: 800 1.35rem/1.1 var(--f-display); color: var(--ink); }
.wonder-head small { color: var(--muted); font-size: 0.8rem; }
.wonder-badge { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--branch-cur); color: var(--on-game);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.25), 0 3px 0 color-mix(in srgb, var(--branch-cur) 50%, #000); }
.wonder-intro { max-width: 70ch; color: var(--ink-2); }
.wonder-resume { align-items: center; flex-wrap: wrap; }
.wonder-resume .btn { margin-left: auto; }
.wonder-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wonder-who .grow { display: grid; min-width: 0; }
.wonder-tags { gap: 6px; justify-content: flex-end; }
.wonder-cards { margin: 10px 0; }
.wonder-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wonder-foot p { max-width: 62ch; }

/* Cofre: resumo das repetidas que podem ir para trocas, a grade e os cartões de ajustes. */
.vault-sum { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.vault-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--line); }
.vault-chip b { font: 800 0.98rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.vault-grid { margin-top: 2px; }
.rules-grid { align-items: start; }
.rules-card { display: grid; align-content: start; }
.rules-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rules-head h3 { font: 800 1.2rem/1.1 var(--f-display); color: var(--ink); }
.rules-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--branch-log); color: var(--on-game);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.25); }
.rules-ico.neg { background: var(--branch-neg); }
.rules-convert { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); column-gap: 16px; }
.rules-convert .switch + .switch { border-top: 0; }
.rules-convert .switch { border-bottom: 1px solid var(--line); }
@media (max-width: 480px) {
  .counter-bar > .btn { flex: 1 0 100%; justify-content: center; }
  .npc-card { padding: 12px; }
  .tf-card { width: 80px; }
  .npc-foot .btn { flex: 1 0 auto; justify-content: center; }
  .npc-why { text-align: center; }
  .wonder-who .grow { flex: 1 1 0; }
  .wonder-tags { flex: 1 0 100%; justify-content: flex-start; padding-left: 46px; }
}

/* ---------- Missões: cartões de missão e prateleira de desejos ---------- */
.mission-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.mission-list > li { display: grid; min-width: 0; }
.mission-card { --mc: var(--branch-log); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px;
  border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line), 0 2px 0 var(--line-2); }
.mission-card.open { z-index: 5; }
.mission-ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: var(--mc); color: var(--on-game);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.28), 0 3px 0 color-mix(in srgb, var(--mc) 50%, #000); }
.mission-title { display: grid; min-width: 0; }
.mission-title small { font: 800 0.76rem/1.2 var(--f-ui); color: var(--muted); }
.mission-title h3 { font: 800 1.15rem/1.15 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.mission-more { align-self: start; width: 36px; height: 36px; }
.mission-menu { top: 52px; right: 10px; }
.mission-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.mission-bar { flex: 1; height: 16px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 2px 3px rgb(11 30 51 / 0.2); overflow: hidden; }
.mission-bar > i { display: block; height: 100%; min-width: 16px; border-radius: inherit; background: var(--hp); box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.35), inset 0 -2px 0 rgb(0 0 0 / 0.12); }
.mission-count { font: 700 0.88rem/1 var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mission-count b { font: 800 1.15rem/1 var(--f-display); color: var(--ink); }
.mission-rewards { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mission-rewards > .muted { margin-right: 2px; }
.reward-seal { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 7px; border-radius: 999px; font: 800 0.84rem/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.reward-seal.credits { background: var(--gold); color: var(--seal-ink); box-shadow: 0 2px 0 var(--seal-lip); }
.reward-seal.prestige { background: var(--prestige-fill); color: var(--on-game); box-shadow: 0 2px 0 color-mix(in srgb, var(--prestige-fill) 50%, #000); }
/* Vaga livre: cartão tracejado que abre o modal de objetivos. */
.mission-new { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 100%; padding: 14px; border-radius: var(--r-lg); border: 2.5px dashed var(--line-2); background: transparent;
  color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mission-new > span:last-child { display: grid; gap: 2px; min-width: 0; }
.mission-new b { font: 800 1.15rem/1.15 var(--f-display); }
.mission-new small { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.mission-new-ico { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 17px; background: var(--dex); color: var(--on-game);
  box-shadow: inset 0 -4px 0 var(--dex-lip), inset 0 2px 0 var(--dex-hi); }
.mission-new:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mission-new:hover { background: var(--hover-tint); border-color: var(--dex); } }

.wish-panel { display: grid; gap: 4px; }
.wish-panel .list-head { margin-bottom: 0; }
.wish-panel h3:focus { outline: none; }
.wish-note { margin-bottom: 8px; }
.wish-shelf { display: grid; gap: 14px 10px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); margin: 0; padding: 12px 10px 14px; list-style: none;
  border-radius: var(--r-md); background: var(--panel-2); box-shadow: inset 0 -6px 0 var(--panel-line); }
.wish-item { position: relative; min-width: 0; }
.wish-x { position: absolute; z-index: 7; top: -8px; right: -8px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 2px solid var(--line); background: var(--raised); color: var(--bad); box-shadow: 0 2px 0 var(--line-2); cursor: pointer; }
.wish-x:active { transform: translateY(2px); box-shadow: none; }
.wish-x:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .wish-x:hover { background: var(--bad-fill); border-color: var(--bad-fill); color: var(--on-game); } }
.wish-empty { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-md); border: 2.5px dashed var(--line-2); color: var(--muted); }
.wish-empty .i { flex: none; color: var(--gold-ink); }
@media (max-width: 480px) {
  .wish-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mission-card { padding: 12px; gap: 10px; }
  .mission-ico, .mission-new-ico { width: 46px; height: 46px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .wish-x:active { transform: none; } .mission-new { transition: none; } }

/* ---------- Replay da luta ---------- */
.replay { display: grid; gap: 14px; }
.rp-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md);
  background: radial-gradient(120% 90% at 50% 50%, var(--surface-3), var(--surface-2)); border: 2px solid var(--line); }
.rp-side { display: grid; gap: 8px; min-width: 0; }
.rp-label { font: 800 0.8rem/1 var(--f-ui); color: var(--muted); }
.rp-b .rp-label { text-align: right; }
.rp-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; }
.rp-b .rp-row { direction: rtl; } /* a carta da frente do adversário fica perto do centro */
.rp-b .rp-row > * { direction: ltr; }
.rp-mid { display: grid; place-items: center; min-width: 110px; max-width: 160px; text-align: center; }
.rp-move { font: 800 1rem/1.2 var(--f-display); color: var(--text); min-height: 2.4em; }
.rp-card { --lx: 14px; --ly: 0px; position: relative; display: grid; gap: 4px; justify-items: center; transition: opacity 300ms, filter 300ms, transform 300ms; }
.rp-b .rp-card { --lx: -14px; }
.rp-card .rp-tile { width: 100%; }
.rp-card .card { width: 100%; }
.rp-card:not(.active):not(.rp-ko) { opacity: 0.6; transform: scale(0.92); }
.rp-card.active .card { box-shadow: 0 0 0 2px #fff, 0 8px 18px -6px rgb(0 0 0 / 0.7); }
.rp-hp { width: 100%; height: 6px; border-radius: 6px; background: rgb(4 8 24 / 0.6); overflow: hidden; }
.rp-hp > i { display: block; width: 100%; height: 100%; background: var(--hp); border-radius: inherit; transition: width 450ms cubic-bezier(.2, .8, .2, 1); }
.rp-card.low .rp-hp > i { background: var(--gold); }
.rp-hpnum { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.rp-hpnum b { color: var(--text); }
.rp-card.rp-ko { opacity: 0.35; filter: grayscale(1) brightness(0.6); transform: scale(0.9); }
.rp-card.rp-attack { animation: rp-lunge 420ms cubic-bezier(.3, .7, .3, 1); }
@keyframes rp-lunge { 40% { transform: translate(var(--lx), var(--ly)) scale(1.06); } }
.rp-card.rp-hit .rp-tile { animation: rp-shake 360ms ease-out; }
@keyframes rp-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.rp-dmg, .rp-weak { position: absolute; left: 50%; z-index: 6; pointer-events: none; white-space: nowrap; transform: translateX(-50%); }
.rp-dmg { top: 22%; font: 800 1.35rem/1 var(--f-display); color: #fff; text-shadow: 0 2px 0 var(--dex-lip), 0 0 10px rgb(232 56 13 / 0.8); animation: rp-rise 900ms ease-out forwards; }
.rp-weak { top: 52%; padding: 2px 7px; border-radius: 999px; font: 800 0.68rem/1.3 var(--f-ui); color: #3a2a00; background: var(--gold); animation: rp-pop 900ms ease-out forwards; }
@keyframes rp-rise { from { opacity: 0; transform: translate(-50%, 8px) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } to { opacity: 0; transform: translate(-50%, -26px); } }
@keyframes rp-pop { from { opacity: 0; transform: translateX(-50%) scale(0.6); } 20% { opacity: 1; transform: translateX(-50%) scale(1.05); } 80% { opacity: 1; } to { opacity: 0; } }
.rp-banner { justify-self: center; padding: 8px 26px; border-radius: 999px; font: 800 1.5rem/1.1 var(--f-display); animation: rp-banner 420ms cubic-bezier(.3, 1.5, .5, 1); }
.rp-banner.win { background: var(--good-fill); color: #fff; box-shadow: 0 4px 0 #0c5226; }
.rp-banner.loss { background: var(--bad-fill); color: #fff; box-shadow: 0 4px 0 #84180f; }
@keyframes rp-banner { from { opacity: 0; transform: scale(0.6); } }
.rp-details summary { cursor: pointer; font-weight: 700; color: var(--text-2); }
.rp-details .battle-log { margin-top: 8px; max-height: 30vh; }
.rp-actions { justify-content: flex-end; }
.replay [hidden] { display: none; }
/* Replay maior no computador: janela até 1100 px, o adversário em cima e o seu time embaixo, com
   cartas de até cerca de 120 px (menores em telas baixas). No celular, como antes (regras abaixo). */
.dialog.replay-dialog { width: min(1100px, 100%); }
@media (min-width: 641px) {
  .rp-stage { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 18px; }
  .rp-b { order: 1; } .rp-mid { order: 2; max-width: none; } .rp-a { order: 3; }
  .rp-label, .rp-b .rp-label { text-align: center; }
  .rp-row, .rp-b .rp-row { --rp-w: clamp(72px, calc((100dvh - 480px) / 2.75), 120px); display: flex; justify-content: center; gap: 14px; direction: ltr; }
  .rp-card { flex: 0 1 var(--rp-w); min-width: 0; --lx: 0px; --ly: -16px; }
  .rp-b .rp-card { --lx: 0px; --ly: 16px; }
  .rp-move { min-height: 1.3em; font-size: 1.1rem; }
  /* O resultado aparece por cima do meio do palco, sem esticar a janela. */
  .replay > .rp-stage, .replay > .rp-banner { grid-row: 1; grid-column: 1; }
  .replay > .rp-banner { align-self: center; z-index: 7; font-size: 1.9rem; padding: 10px 34px; }
  .replay:has(> .rp-banner:not([hidden])) .rp-move { visibility: hidden; }
}
@media (max-width: 640px) {
  .rp-stage { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 8px; }
  .rp-b { order: 1; } .rp-mid { order: 2; max-width: none; } .rp-a { order: 3; }
  .rp-b .rp-label { text-align: left; }
  .rp-b .rp-row { direction: ltr; }
  .rp-row { gap: 6px; }
  .rp-card { --lx: 0px; --ly: -12px; }
  .rp-b .rp-card { --lx: 0px; --ly: 12px; }
  .rp-move { min-height: 1.2em; }
  .rp-actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-card, .rp-hp > i { transition: none; }
  .rp-card.rp-attack, .rp-card.rp-hit .rp-tile, .rp-dmg, .rp-weak, .rp-banner { animation: none; }
}

/* ==========================================================================
   Kit Pocket: cenas escuras e componentes novos (feat/ui-jogo)
   ========================================================================== */

/* Cenas escuras de propósito: abertura de pacotes, visualizador 3D, cena imersiva e o palco do
   replay. Recebem de volta os valores do tema noturno, então tudo o que vem dentro delas (botões,
   selos, dicas) continua como era. Os valores precisam ser repetidos: um token como
   `--surface: var(--panel)` já chega calculado do :root. */
.op-overlay, .viewer, .immersive, .rp-stage {
  --bg: #0d1530;
  --panel: #151f47;
  --panel-2: #1b2756;
  --panel-line: #2a3873;
  --raised: #1b2756;
  --surface: #151f47;
  --surface-2: #1b2756;
  --surface-3: #243266;
  --line: #2a3873;
  --line-2: #3a4a8f;
  --ink: #f2f5ff;
  --ink-2: #c6cdee;
  --ink-muted: #5f6a9e;
  --text: #f2f5ff;
  --text-2: #c6cdee;
  --muted: #929dcc;
  --faint: #5f6a9e;
  --good: #46d483;
  --bad: #ff6b6b;
  --lip: rgb(4 8 24 / 0.55);
  --focus: var(--gold);
  --gold-ink: var(--gold);
  --r-comum: #a1a1aa;
  --r-incomum: #6ee7b7;
  --r-rara: #7cb7ff;
  --r-holo: #c9a6ff;
  --r-secreta: #f0b45a;
  color: var(--text);
  color-scheme: dark;
}
/* Fundo da abertura: o mesmo tom de antes (o véu escuro sobre a página noturna). */
.overlay.op-overlay { background: #080d21; }
.overlay.op-overlay:has(.op.batch) { background: #060b1b; }
.op-overlay .btn:not(.primary):not(.ghost), .viewer .btn:not(.primary):not(.ghost) { --lip-c: var(--lip); border-color: var(--line-2); }
.op-overlay .icon-btn, .viewer .icon-btn { box-shadow: 0 2px 0 var(--lip); border-color: var(--line-2); color: var(--muted); }
/* Palco do replay: uma arena noturna dentro da janela clara. */
.rp-stage { border: 0; background: radial-gradient(120% 90% at 50% 50%, #2a3a78, #151f47 70%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.08), var(--shadow-soft); }

/* ---------- Componentes novos ---------- */
/* Cápsula de recurso: ícone colorido num círculo e número em destaque, sobre branco translúcido. */
.pill { --pill-c: var(--gold); display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 3px 14px 3px 3px; border-radius: 999px;
  background: var(--glass); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px var(--hi-soft), 0 3px 0 var(--hud-lip), 0 8px 18px -8px rgb(11 30 51 / 0.45);
  font: 800 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill > .i, .pill > .pill-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; box-sizing: border-box; padding: 6px; border-radius: 50%;
  background: var(--pill-c); color: #fff; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.18), inset 0 2px 0 rgb(255 255 255 / 0.35); }
.pill small { font: 700 0.75rem/1 var(--f-ui); color: var(--muted); }
.pill.credits { --pill-c: var(--yen); }
.pill.credits > .i { color: var(--yen-ink); }
.pill.gems { --pill-c: var(--diamond); }
.pill.gems > .i { color: var(--diamond-ink); }
.pill.tokens { --pill-c: #1f9be6; }
.pill.prestige { --pill-c: #e0489a; }

/* Selo de contagem: vermelho, no canto de um botão (o botão precisa de position: relative). */
.badge-count { position: absolute; top: -6px; right: -6px; z-index: 2; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--dex); color: #fff; font: 800 0.75rem/1 var(--f-display); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--glass-solid), 0 2px 0 2px var(--dex-lip); pointer-events: none; }

/* Janela: painel claro com cabeçalho (título grande, subtítulo e fechar); o miolo rola dentro dela.
   Só o visual: a montagem (folha no celular, painel central no computador) vem na Task 2. */
.window { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: 100%; min-height: 0; overflow: hidden;
  background: var(--panel); color: var(--ink); border: 1.5px solid var(--glass-edge); border-radius: 26px;
  box-shadow: inset 0 1px 0 var(--hi), var(--shadow-pop); }
.window-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 18px; background: var(--raised); border-bottom: 1.5px solid var(--glass-edge); }
/* Ícone da seção: quadrado de vidro com o ícone em ciano (petróleo no claro). */
.window-head .window-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--eyebrow);
  background: color-mix(in srgb, var(--eyebrow) 14%, transparent); border: 1.5px solid var(--glass-edge); }
.window-head h2 { font: 800 clamp(1.3rem, 4vw, 1.7rem)/1.05 var(--f-display); letter-spacing: 0; text-transform: uppercase; }
/* Subtítulo como rótulo: maiúsculas espaçadas, cor do rótulo e um tracinho antes. */
.window-head .eyebrow, .page-head .eyebrow, .panel-head .eyebrow { color: var(--eyebrow);
  font: 800 0.66rem/1.35 var(--f-display); font-style: italic; letter-spacing: 0.12em; text-transform: uppercase; }
.window-head .eyebrow::before, .page-head .eyebrow::before, .panel-head .eyebrow::before { content: ""; display: inline-block; width: 14px; height: 2px; margin: 0 7px 3px 0; vertical-align: middle; border-radius: 2px; background: currentColor; }
.window-head > .grow { display: flex; flex-direction: column-reverse; gap: 1px; }
.window-body { overflow-y: auto; overscroll-behavior: contain; padding: 18px; display: grid; gap: 16px; align-content: start; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
@media (prefers-reduced-motion: no-preference) {
  .window { animation: window-in 220ms var(--ease) backwards; }
}
@keyframes window-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }

/* Campos claros, com foco azul. */
select, input[type=number], textarea, .cloud-form input, .avatar-form input { background: var(--raised); border: 2px solid var(--line); color: var(--ink); border-radius: 12px; }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--line-2); }
.cloud-form input:focus-visible, .recovery-code:focus-visible { outline: 3px solid var(--focus); }
th { color: var(--muted); }
tbody tr:hover td { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.kbd { background: var(--raised); color: var(--ink-2); border-color: var(--line-2); }
.note { background: var(--raised); }
.note.stamp { background: color-mix(in srgb, var(--dex) 5%, var(--raised)); }
.ach.on .glyph, .seal.on .i, .entry .glyph.k-objective, .entry .glyph.k-achievement { color: var(--r-secreta); }
.lab-slot, .cond, .reward, .decor-item, .timer-strip, .register, .save-pick, .cloud-box { background: var(--raised); }
.slot-tools .icon-btn { border-radius: 12px; }
/* Pontos das páginas do fichário: agora sobre o painel claro da janela. */
.page-dots button.done i { background: #3cc47a; }
.page-dots button.cur i { background: var(--dex); box-shadow: 0 0 0 2px var(--raised); }
@media (prefers-reduced-motion: reduce) { .pill, .badge-count { transition: none; } }

/* ==========================================================================
   Tela de jogo: a loja no fundo, o HUD por cima e as seções em janelas
   A página não rola; quem rola é o miolo das janelas e os modais.
   A loja é o cenário. Em cima, o HUD de vidro; sobre a loja, os avisos (Depósito e Caixa) e a coluna
   de ferramentas; embaixo, o dock (Abrir pacote, Arena, Missões) e a barra com as 6 seções.
   Celular (até 700 px): dock em duas linhas, barra de ponta a ponta; janela acima da barra.
   Computador: dock numa linha e barra centralizadas (até 720 px); janela centralizada.
   ========================================================================== */
html, body { height: 100%; }
body { overflow: hidden; height: 100dvh; overscroll-behavior: none; }

.game {
  --hud-h: 72px;          /* altura do HUD de cima (medida no render) */
  --gut: 12px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --bar-h: 66px;          /* barra inferior */
  --bar-gap: 8px;         /* folga da barra e do dock */
  --bar-space: calc(var(--bar-h) + var(--bar-gap) * 2 + var(--safe-b)); /* o que a barra ocupa embaixo */
  --dock-h: 142px;        /* dock do celular: botão de 60 + cartões de 54 + folgas */
  --shop-top: calc(var(--hud-h) + 4px);
  --shop-bottom: calc(var(--bar-space) + var(--dock-h) + 4px);
  position: fixed; inset: 0; overflow: hidden;
}
/* Luz de palco atrás da loja e a sombra do piso. */
.game::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 46% at 50% calc(var(--shop-top) + (100% - var(--shop-top) - var(--shop-bottom)) / 2), var(--stage-glow), transparent 72%); }

/* ---------- Loja ---------- */
.game-shop { position: absolute; left: 0; right: 0; top: var(--shop-top); bottom: var(--shop-bottom); overflow: hidden; }
.game-shop .storefront-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; }
.game-shop canvas { position: relative; z-index: 1; display: block; flex: none; filter: drop-shadow(0 22px 26px rgb(0 0 0 / 0.38)); }
/* Fundo em volta do piso: um halo pintado pelo storefront.js com --scene-top e --scene-bottom. */
.game-shop canvas.storefront-backdrop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; filter: none; pointer-events: none; }
.game.arranging { --shop-top: calc(12px + var(--safe-t)); --shop-bottom: calc(168px + var(--safe-b)); }
/* Evento da loja: "!" dourado sobre quem chegou, com o anel do tempo que falta (--life, posto pelo storefront.js). */
.shop-event { --lip-h: 4px; position: absolute; z-index: 3; width: 48px; height: 48px; padding: 0; transform: translate(-50%, -100%); border-radius: 50%;
  border: 2px solid var(--cta-2); background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); cursor: pointer;
  box-shadow: 0 var(--lip-h) 0 var(--cta-lip), inset 0 2px 0 rgb(255 255 255 / 0.45); animation: shop-event-bob 1.1s ease-in-out infinite; }
.shop-event[hidden] { display: none; }
.shop-event b { position: relative; font: italic 900 1.7rem/1 var(--f-display); }
.shop-event svg { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); pointer-events: none; }
.shop-event circle { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; }
.shop-event.run circle { animation: shop-event-ring var(--life, 45s) linear forwards; }
.shop-event:active { transform: translate(-50%, calc(-100% + var(--lip-h))) scale(0.96); box-shadow: 0 0 0 var(--cta-lip), inset 0 2px 0 rgb(255 255 255 / 0.45); animation: none; }
.shop-event:focus-visible { outline: 3px solid var(--gold); outline-offset: 9px; }
@keyframes shop-event-bob { 50% { transform: translate(-50%, calc(-100% - 6px)); } }
@keyframes shop-event-ring { to { stroke-dashoffset: 100; } }
@media (prefers-reduced-motion: reduce) { .shop-event { animation: none; } .shop-event.run circle { animation: none; } }

/* ---------- HUD de cima: selo de nível e recursos ---------- */
.hud-top { position: fixed; z-index: 40; top: 0; left: 0; right: 0; padding: calc(10px + var(--safe-t)) var(--gut) 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.hud-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }

/* Vidro: painel translúcido com borda ciano fina (petróleo no claro). */
.level-badge, .hud-pills .pill, .hud-float, .tool-btn, .dock, .menu {
  background: var(--glass); border: 1.5px solid var(--glass-edge); color: var(--ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-soft); }
.level-badge { position: relative; flex: none; display: flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border-radius: 16px;
  transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1); }
.level-badge:active { transform: translateY(2px) scale(0.97); }
.hud-pills .pill { border-radius: 12px; }
.lv-face { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--cta-ink);
  font-family: var(--f-display); font-weight: 900; font-size: 1.3rem; line-height: 1;
  background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); box-shadow: inset 0 -3px 0 var(--cta-lip); }
.lv-info { display: grid; gap: 3px; min-width: 70px; text-align: left; }
.lv-info b { font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; line-height: 1; }
.lv-nick { display: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 0.74rem/1 var(--f-ui); color: var(--ink-muted); }
.lv-bar { display: block; height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.lv-bar i { display: block; height: 100%; border-radius: inherit; background: var(--eyebrow); }
/* Discord: só o ícone, na cor da marca */
.hud-pills .pill.discord { padding: 3px; color: var(--discord-ink); text-decoration: none; }
.hud-pills .pill.discord > .i { background: var(--discord); }
.hud-pills .pill.discord:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.level-badge .badge-count { top: -7px; right: auto; left: -6px; background: var(--stamp); color: var(--stamp-ink); box-shadow: 0 0 0 2px var(--glass-solid); }
/* Selo discreto de versão beta, pendurado embaixo do selo do nível */
.beta-chip { display: inline-block; padding: 2px 6px 1px; border: 1px solid var(--gold-ink); border-radius: 5px; background: var(--glass-solid); color: var(--gold-ink);
  font: italic 900 0.58rem/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none; }
.level-badge .beta-chip { position: absolute; right: 8px; bottom: -7px; }
.level-badge.ready .lv-face { box-shadow: inset 0 -3px 0 var(--cta-lip), 0 0 0 3px var(--eyebrow); }

/* ---------- Avisos de vidro sobre a loja: Depósito e Caixa (levemente inclinados) ---------- */
.hud-float { position: fixed; z-index: 10; display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 5px 14px 5px 6px; border-radius: 14px; text-align: left;
  transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1); }
.hud-float.depot { left: var(--gut); top: calc(var(--hud-h) + 10px); transform: rotate(-3deg); transform-origin: left center; }
.hud-float.cashier { left: var(--gut); bottom: calc(var(--bar-space) + var(--dock-h) + 10px); transform: rotate(3deg); transform-origin: left center; }
.hud-float:active { transform: translateY(2px) scale(0.97); }
.float-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--eyebrow);
  background: color-mix(in srgb, var(--eyebrow) 16%, transparent); }
.hud-float.cashier .float-ico { color: var(--ink-2); background: var(--surface-3); }
.hud-float.cashier.has .float-ico { color: var(--cta-ink); background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); }
.float-txt { display: grid; gap: 3px; min-width: 0; }
.float-txt small { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 0.6rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow); }
.float-txt b { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 0.92rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Ferramentas da loja: coluna de botões redondos de vidro, à direita ---------- */
.shop-tools { position: fixed; z-index: 10; top: calc(var(--hud-h) + 10px); right: var(--gut); display: flex; flex-direction: column; gap: 10px; }
.tool-btn { position: relative; color: var(--ink);
  transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1), background 120ms; }
.tool-btn:active { transform: translateY(2px) scale(0.95); }
.tool-btn.round { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.tool-btn.round .i { color: var(--eyebrow); }
.tool-btn.round.attn { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); border-color: var(--cta-2); box-shadow: 0 3px 0 var(--cta-lip); }
.tool-btn.round.attn .i { color: var(--cta-ink); }
.level-badge:focus-visible, .hud-float:focus-visible, .tool-btn:focus-visible, .dock-card:focus-visible, .menu-btn:focus-visible, .open-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .tool-btn:hover, .level-badge:hover { background: var(--glass-solid); }
  .hud-float:hover { transform: rotate(0deg) translateY(-2px); }
}

/* ---------- Chip de próximo passo: vidro com seta e "×", entre o HUD e os avisos ---------- */
.step-chip { position: fixed; z-index: 11; top: calc(var(--hud-h) + 6px); left: var(--gut); right: var(--gut); max-width: 460px; margin-inline: auto;
  display: flex; align-items: stretch; min-height: 42px; border-radius: 14px;
  background: var(--glass); border: 1.5px solid var(--glass-edge); color: var(--ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-soft); }
.step-chip[hidden] { display: none; }
.step-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 4px 6px 4px 5px; border-radius: 12px 0 0 12px; text-align: left; color: inherit; }
.step-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--cta-ink);
  background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); box-shadow: inset 0 -3px 0 var(--cta-lip); }
.step-txt { display: grid; gap: 2px; min-width: 0; }
.step-txt small { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 0.58rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow); }
.step-txt b { font: 800 0.86rem/1.15 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-x { flex: none; width: 40px; display: grid; place-items: center; color: var(--ink-muted); border-left: 1.5px solid var(--glass-edge); border-radius: 0 12px 12px 0; }
.step-go:focus-visible, .step-x:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.step-go:active { background: color-mix(in srgb, var(--eyebrow) 12%, transparent); }
@media (hover: hover) and (pointer: fine) { .step-go:hover, .step-x:hover { background: color-mix(in srgb, var(--eyebrow) 12%, transparent); } }
@media (prefers-reduced-motion: no-preference) { .step-chip { animation: step-in 240ms cubic-bezier(.2, .9, .3, 1.1) backwards; } }
@keyframes step-in { from { opacity: 0; transform: translateY(-8px); } }
/* No celular o chip ocupa uma fileira sob o HUD e empurra o Depósito e as ferramentas para baixo. */
@media (max-width: 960px) { /* até 960 px o chip centralizado (460 px) alcançaria o aviso do Depósito (à esquerda, até ~230 px) */
  .game.has-step { --step-h: 58px; }
  .game.has-step .hud-float.depot, .game.has-step .shop-tools { margin-top: var(--step-h); }
}

/* ---------- Barra inferior: as 6 seções (a aberta em dourado) ---------- */
.menu { position: fixed; z-index: 40; left: var(--gut); right: var(--gut); bottom: calc(var(--bar-gap) + var(--safe-b)); height: var(--bar-h);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 5px 4px; border-radius: 20px; } /* tantas colunas quantas seções */
.menu-btn { position: relative; min-width: 0; display: grid; grid-template-rows: 28px auto; justify-items: center; align-content: center; gap: 4px; padding: 0;
  border: 0; border-radius: 14px; background: none; color: var(--ink-2);
  transition: transform 120ms ease, background 120ms; }
.menu-ico { display: grid; place-items: center; color: var(--eyebrow); }
.menu-ico .i { stroke-width: 2.1; }
.menu-lbl { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 0.6rem; line-height: 1; text-transform: uppercase; }
.menu-btn:active { transform: translateY(2px); }
.menu-btn.active { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); box-shadow: 0 3px 0 var(--cta-lip); }
.menu-btn.active .menu-ico { color: var(--cta-ink); }
.menu-btn .pip { position: absolute; top: 3px; right: calc(50% - 22px); width: 11px; height: 11px; border-radius: 50%; background: var(--stamp); box-shadow: 0 0 0 2px var(--glass-solid); }
@media (hover: hover) and (pointer: fine) { .menu-btn:not(.active):hover { background: var(--hover-tint); color: var(--ink); } }

/* ---------- Dock: Abrir pacote (dourado) e os cartões da Arena e das Missões ---------- */
.dock { position: fixed; z-index: 10; left: var(--gut); right: var(--gut); bottom: var(--bar-space); height: var(--dock-h);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 60px 54px; gap: 8px; padding: 10px; border-radius: 20px; }
.dock-card { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 10px 0 8px; border: 1.5px solid var(--glass-edge); border-radius: 14px;
  background: var(--panel-2); color: var(--ink); text-align: left; transition: transform 120ms ease, background 120ms; }
.dock-card:active { transform: translateY(2px) scale(0.98); }
.dock-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--eyebrow);
  background: color-mix(in srgb, var(--eyebrow) 16%, transparent); }
.dock-txt { display: grid; gap: 3px; min-width: 0; }
.dock-txt b { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 0.78rem; line-height: 1; text-transform: uppercase; }
.dock-txt small { font: 700 0.76rem/1.15 var(--f-ui); color: var(--ink-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dock-card .badge-count { top: -7px; right: -6px; }
@media (hover: hover) and (pointer: fine) { .dock-card:hover { background: var(--raised); } }

.open-cta { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 10px 0 7px;
  border: 0; border-radius: 16px; color: var(--cta-ink); text-align: left;
  background: linear-gradient(180deg, var(--cta-1), var(--cta-2));
  box-shadow: 0 4px 0 var(--cta-lip), 0 10px 20px -8px rgb(0 0 0 / 0.5);
  transition: transform 90ms ease, box-shadow 90ms ease; }
.open-cta:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--cta-lip), 0 6px 14px -8px rgb(0 0 0 / 0.5); }
.cta-medal { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--cta-chev); }
.cta-medal .mini-ring { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.cta-medal .ring-track { stroke: color-mix(in srgb, var(--cta-1) 24%, transparent); }
.cta-medal .ring-fill { stroke: var(--cta-1); transition: stroke-dashoffset 1s linear; }
.cta-disc { display: grid; place-items: center; color: var(--cta-1); }
.cta-disc .i { stroke-width: 2.2; }
.cta-medal .badge-count { top: -6px; right: -6px; min-width: 22px; height: 22px; font-size: 0.78rem; background: var(--stamp); color: var(--stamp-ink); box-shadow: 0 0 0 2px var(--cta-2); }
.cta-text { display: grid; gap: 4px; min-width: 0; }
.cta-text b { font-family: var(--f-display); font-weight: 900; font-size: 1.3rem; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.cta-text small { font-family: var(--f-ui); font-weight: 800; font-size: 0.82rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cta-chev { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--cta-chev); color: var(--cta-1); }
/* Pacote raro no depósito: o mesmo dourado, com um anel ciano em volta (e o brilho que passa, abaixo). */
.open-cta.gold { box-shadow: 0 4px 0 var(--cta-lip), 0 0 0 3px var(--eyebrow), 0 10px 20px -8px rgb(0 0 0 / 0.5); }
.open-cta.gold:active:not(:disabled) { box-shadow: 0 0 0 var(--cta-lip), 0 0 0 3px var(--eyebrow); }
/* Sem pacotes: o botão vira o relógio da próxima entrega, em vidro apagado. */
.open-cta:disabled { background: var(--surface-3); color: var(--ink-2); box-shadow: 0 4px 0 var(--line-2); cursor: default; }
.open-cta:disabled .cta-chev { display: none; }
.open-cta:disabled .cta-text small { font-size: 0.95rem; font-family: var(--f-display); font-style: italic; }
/* Depósito cheio: o tempo vira um selo vermelho. */
.open-cta.full .cta-text small { justify-self: start; padding: 3px 8px; border-radius: 999px; background: var(--stamp); color: var(--stamp-ink); font-size: 0.7rem; }

/* ---------- Modo Arrumar: só a barra dele ---------- */
.arrange-dock { position: fixed; z-index: 10; left: var(--gut); right: var(--gut); bottom: calc(12px + var(--safe-b)); max-width: 760px; margin: 0 auto; }
.arrange-dock .storefront-bar { border: 0; border-radius: 22px; padding: 12px 14px; background: var(--panel);
  box-shadow: inset 0 0 0 1.5px var(--hi), inset 5px 0 0 var(--gold), inset 0 -3px 0 var(--panel-line), var(--shadow-pop); }

/* ---------- Janela da seção ---------- */
.game-scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim-game); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* A janela fica acima da barra inferior, que continua à mão (z-index 40) para trocar de seção. */
.game-win .window { position: fixed; z-index: 35; left: 0; right: 0; bottom: var(--bar-space); top: calc(var(--hud-h) + 2px); max-height: none; border-radius: 22px 22px 16px 16px; }
.window-body { background: var(--panel-2); padding-bottom: 18px; }
.window-head { padding: 10px 10px 10px 14px; }
.window-head h2 { outline: none; width: fit-content; }
.window-head h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.win-close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.window.still { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .game-scrim { animation: fade 200ms var(--ease); }
  .game-win .window:not(.still) { animation: sheet-in 260ms cubic-bezier(.2, .9, .3, 1.05) backwards; }
  .open-cta:not(:disabled) .cta-disc .i { animation: cta-bob 2.4s ease-in-out infinite; }
  .open-cta.gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%) no-repeat; background-size: 220% 100%;
    animation: cta-shine 2.8s ease-in-out infinite; }
  .level-badge.ready .lv-face { animation: lv-pulse 1.6s ease-in-out infinite; }
  .hud-float.cashier.has .float-ico { animation: cta-bob 2.4s ease-in-out infinite; }
}
/* Sem movimento: os avisos ficam retos. */
@media (prefers-reduced-motion: reduce) {
  .hud-float.depot, .hud-float.cashier, .hud-float:hover { transform: none; }
}
@keyframes sheet-in { from { opacity: 0.6; transform: translateY(40px); } }
@keyframes cta-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes cta-shine { from { background-position: 130% 0; } 60%, to { background-position: -30% 0; } }
@keyframes lv-pulse { 50% { transform: scale(1.06); } }

/* ---------- Celular estreito ---------- */
@media (max-width: 400px) {
  .game { --gut: 10px; }
  .hud-pills { gap: 4px; }
  .hud-pills .pill { min-height: 32px; gap: 5px; padding-right: 9px; font-size: 0.9rem; }
  .hud-pills .pill > .i { width: 26px; height: 26px; padding: 5px; }
  .lv-info { min-width: 56px; }
  .lv-face { width: 42px; height: 42px; font-size: 1.3rem; }
  .menu { padding: 5px 2px; gap: 1px; }
}

/* ---------- Computador ---------- */
@media (min-width: 701px) {
  .game { --gut: 20px; --dock-h: 96px; --bar-h: 70px; }
  .game.arranging { --shop-bottom: 104px; }
  .lv-nick { display: block; }
  .shop-tools { top: calc(var(--hud-h) + 14px); }
  .tool-btn.round { width: 50px; height: 50px; }
  .hud-float.depot { top: calc(var(--hud-h) + 14px); }
  /* Dock e barra centralizados, até 720 px; o dock numa linha só. */
  .dock, .menu { left: 0; right: 0; width: min(720px, calc(100% - var(--gut) * 2)); margin-inline: auto; }
  .dock { grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
  .open-cta { grid-column: auto; }
  .menu-lbl { font-size: 0.7rem; }
  .game-win .window { top: calc(var(--hud-h) + 6px); left: var(--gut); right: var(--gut);
    max-width: 1080px; margin-inline: auto; border-radius: 22px; }
  .game-win .window:not(.still) { animation-name: window-in; }
  .window-head { padding: 12px 12px 12px 18px; }
  .window-body { padding: 20px 22px 24px; }
}

/* ==========================================================================
   Álbum (etapa 2, lote A): abas com ícone, capas das coleções, ferramentas e fichário em destaque
   ========================================================================== */
.album-panel { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* Fileiras que rolam na horizontal (abas, capas) dentro da grade da janela: com linhas automáticas,
   a linha delas encolhe quase a zero quando o miolo passa da altura da janela. */
[data-win="albuns"] .window-body, .album-panel { grid-auto-rows: max-content; }

/* Abas: trilho de vidro com borda ciano; a ativa vira um botão dourado com o ícone no quadrado escuro. */
.tab-rail { position: relative; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--rail); border: 1.5px solid var(--glass-edge);
  box-shadow: inset 0 2px 4px rgb(11 30 51 / 0.1); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.tab-rail::-webkit-scrollbar { display: none; }
.rail-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 5px 16px 5px 5px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font: 800 0.9rem/1 var(--f-ui); white-space: nowrap; scroll-snap-align: center;
  transition: background var(--dur) var(--ease), color var(--dur), transform 160ms cubic-bezier(.3, 1.6, .5, 1); }
.rail-tab-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--raised); color: var(--eyebrow);
  box-shadow: inset 0 0 0 1.5px var(--glass-edge); }
.rail-tab.active { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); box-shadow: 0 3px 0 var(--cta-lip); }
.rail-tab.active .rail-tab-ico { background: var(--cta-chev); color: var(--cta-1); box-shadow: none; }
.rail-tab:active { transform: translateY(2px); }
.rail-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .rail-tab:not(.active):hover { color: var(--ink); background: var(--hover-tint); } }

/* Capas das coleções: fila com encaixe; a ativa fica maior, com contorno vermelho. */
.exp-covers { position: relative; display: flex; align-items: flex-end; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px 8px 12px; margin: -10px -8px -6px; scroll-padding-inline: 8px; }
.exp-covers::-webkit-scrollbar { display: none; }
.cover { --w: 128px; position: relative; flex: none; width: var(--w); aspect-ratio: 5 / 7; padding: 0; border: 0; border-radius: 18px; overflow: hidden;
  scroll-snap-align: center; color: var(--on-cover); text-align: left; isolation: isolate;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cover) 70%, #fff) 0%, var(--cover) 42%, color-mix(in srgb, var(--cover) 55%, #000) 100%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.28), inset 0 -4px 0 color-mix(in srgb, var(--cover) 50%, #000), 0 6px 14px -6px rgb(11 30 51 / 0.55);
  transform: scale(0.88); transform-origin: 50% 100%; transition: transform 240ms cubic-bezier(.3, 1.4, .5, 1), box-shadow 200ms, filter 200ms; }
.cover.active { transform: none; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.4), inset 0 -4px 0 color-mix(in srgb, var(--cover) 50%, #000),
  0 0 0 3px var(--panel-2), 0 0 0 6px var(--dex), 0 12px 22px -8px rgb(11 30 51 / 0.6); }
.cover:active { transform: scale(0.85); }
.cover.active:active { transform: scale(0.97); }
.cover:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 18px; }
.cover-art { position: absolute; inset: 0; z-index: -1; background-size: 250% auto; background-position: 50% 21%; background-repeat: no-repeat; opacity: 0.95;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 92%); mask-image: linear-gradient(#000 40%, transparent 92%); }
.cover-art.none { -webkit-mask-image: none; mask-image: none; opacity: 1;
  background: radial-gradient(circle at 70% 30%, rgb(255 255 255 / 0.28), transparent 45%), repeating-linear-gradient(135deg, rgb(255 255 255 / 0.09) 0 9px, transparent 9px 18px); }
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--cover) 45%, #000) 92%); }
.cover-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.cover-ring { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--glass-solid); color: var(--ink);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.2); }
.cover-ring svg { position: absolute; inset: 3px; width: 40px; height: 40px; }
.cover-ring-track, .cover-ring-fill { fill: none; stroke-width: 4; }
.cover-ring-track { stroke: var(--surface-3); }
.cover-ring-fill { stroke: var(--hp); stroke-linecap: round; }
.cover-ring b { position: relative; font: 800 0.74rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cover-lock { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / 0.38); color: var(--on-cover); }
.cover-seal { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; background: var(--gold); color: var(--seal-ink);
  font: 800 0.66rem/1 var(--f-ui); box-shadow: 0 2px 0 var(--seal-lip); }
.cover-foot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 3px; padding: 10px 10px 12px; }
.cover-name { font: 800 0.95rem/1.08 var(--f-display); text-shadow: 0 1px 0 rgb(0 0 0 / 0.45), 0 0 10px rgb(0 0 0 / 0.35);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover-name img { max-width: 100%; max-height: 34px; display: block; }
.cover-count { font: 800 0.76rem/1 var(--f-ui); font-variant-numeric: tabular-nums; opacity: 0.95; text-shadow: 0 1px 0 rgb(0 0 0 / 0.45); }
.cover.done { box-shadow: inset 0 0 0 2.5px var(--gold), inset 0 -4px 0 color-mix(in srgb, var(--cover) 50%, #000), 0 6px 14px -6px rgb(11 30 51 / 0.55); }
.cover.done.active { box-shadow: inset 0 0 0 2.5px var(--gold), inset 0 -4px 0 color-mix(in srgb, var(--cover) 50%, #000), 0 0 0 3px var(--panel-2), 0 0 0 6px var(--dex), 0 12px 22px -8px rgb(11 30 51 / 0.6); }
.cover.locked { filter: grayscale(0.9) brightness(0.8); }
.cover.locked .cover-art { opacity: 0.55; }
@media (hover: hover) and (pointer: fine) { .cover:not(.active):not(.locked):hover { transform: scale(0.92); } }
@media (prefers-reduced-motion: no-preference) {
  .exp-covers.swap .cover.active { animation: cover-pop 320ms cubic-bezier(.3, 1.5, .5, 1); }
  .binder.swap .binder-cover, .album-grid.swap { animation: binder-swap 280ms var(--ease); }
}
@keyframes cover-pop { from { transform: scale(0.88); } 60% { transform: scale(1.04); } }
@keyframes binder-swap { from { opacity: 0.2; transform: translateY(10px) scale(0.99); } }

/* Nome da coleção e barra de ferramentas compacta. */
.album-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.album-name { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.album-name h3 { font: 800 1.3rem/1.1 var(--f-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.album-tools .seg { flex-wrap: nowrap; }
.album-tools .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.tool-chip, .research-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 5px 15px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--raised); color: var(--ink); font: 800 0.88rem/1 var(--f-ui); box-shadow: 0 3px 0 var(--line-2);
  transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1), box-shadow 90ms, border-color var(--dur); }
.tool-chip:active, .research-pill:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line-2); }
.tool-chip.open, .research-pill.open { border-color: var(--ink-2); }
.tool-chip .badge-count { top: -7px; right: -7px; }
.research-pill { padding-left: 5px; gap: 5px; }
.research-pill > .i { width: 30px; height: 30px; box-sizing: border-box; padding: 6px; border-radius: 50%; background: var(--tool-research); color: var(--on-game);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.18), inset 0 2px 0 rgb(255 255 255 / 0.3); }
.research-pill b { font: 800 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.research-pill small { font: 700 0.75rem/1 var(--f-ui); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .tool-chip:hover, .research-pill:hover { border-color: var(--line-2); } }

/* Painel de filtros (e o da Pesquisa de Lacunas), logo abaixo da barra. */
.filters-pop { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line-2), var(--shadow-soft); }
.filters-pop .seg { justify-self: start; max-width: 100%; }
.filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters-row select { flex: 1 1 140px; min-width: 0; min-height: 42px; font-size: 0.9rem; padding-inline: 10px; }
.research-pop p { max-width: 70ch; }
@media (prefers-reduced-motion: no-preference) { .filters-pop { animation: pop-down 180ms var(--ease); } }
@keyframes pop-down { from { opacity: 0; transform: translateY(-6px); } }

/* Fichário em destaque: folhas largas, setas redondas nas laterais, contador e pontos embaixo. */
.binder.big { gap: 12px; }
.binder-stage { position: relative; }
.binder.big .binder-cover { padding: 14px; }
.page-arrow { position: absolute; z-index: 6; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--raised); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line-2), 0 12px 24px -8px rgb(11 30 51 / 0.55);
  transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1), box-shadow 90ms; }
.page-arrow .i { stroke-width: 2.4; }
.page-arrow.prev { left: -18px; }
.page-arrow.next { right: -18px; }
.page-arrow:active:not(:disabled) { transform: translateY(3px) scale(0.94); box-shadow: inset 0 0 0 2px var(--line), 0 1px 0 var(--line-2); }
.page-arrow:disabled { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .page-arrow:hover:not(:disabled) { color: var(--dex); } }
.binder.big .binder-nav { display: grid; justify-items: center; gap: 2px; }
.binder.big .binder-nav .where { min-width: 0; font: 800 0.95rem/1.2 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.binder-hint { font: 700 0.76rem/1.3 var(--f-ui); color: var(--muted); text-align: center; }
.pocket.dim > .card { opacity: 0.25; filter: grayscale(0.8); }
@media (min-width: 701px) {
  .binder.big .binder-stage { margin-inline: 34px; }
  .page-arrow.prev { left: -52px; }
  .page-arrow.next { right: -52px; }
}
/* Celular: uma página na largura toda; as setas descem para os cantos de baixo, ao lado do contador. */
@media (max-width: 560px) {
  .binder.big { margin-inline: -8px; }
  .binder.big .binder-cover { padding: 6px; }
  .binder.big .spread.single { grid-template-columns: 12px 1fr; }
  .binder.big .rings i { width: 9px; height: 20px; border-width: 2px; border-radius: 6px; }
  .binder.big .sheet { padding: 8px 8px 6px; gap: 8px; }
  .binder.big .pockets { gap: 5px; }
  .binder.big .pocket { padding: 2px; }
  .page-arrow { top: auto; bottom: -60px; margin-top: 0; width: 48px; height: 48px; }
  .page-arrow.prev { left: 8px; }
  .page-arrow.next { right: 8px; }
  .binder.big .binder-nav .where { min-height: 48px; display: grid; align-items: center; padding-inline: 60px; }
  .cover { --w: 116px; }
}
@media (max-width: 420px) {
  .album-tools .chip .lbl { display: none; }
  .album-tools .chip { padding-inline: 10px; }
  .filters-pop .chip { padding-inline: 10px; font-size: 0.82rem; }
  .rail-tab { font-size: 0.85rem; padding-right: 14px; }
}

/* Modo Grade: cada página num painel, com o número numa pílula. */
.album-grid { display: grid; gap: 12px; }
.album-grid .page-block { padding: 12px; border-radius: 18px; background: var(--panel);
  box-shadow: inset 0 0 0 1.5px var(--hi-soft), inset 0 -3px 0 var(--panel-line), var(--shadow-soft); }
.album-grid .page-label::after { display: none; }
.album-grid .page-label { justify-content: space-between; }
.page-chip { display: inline-flex; padding: 3px 11px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font: 800 0.8rem/1.3 var(--f-ui); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .cover, .rail-tab, .tool-chip, .research-pill, .page-arrow { transition: none; }
  .cover:active, .cover.active:active, .rail-tab:active, .page-arrow:active:not(:disabled) { transform: none; }
  .binder.big .sheet.turn-next, .binder.big .sheet.turn-prev { animation: none; }
}

/* ==========================================================================
   Entregas (etapa 2, lote A): abas, depósito em destaque, loja, curadoria e melhorias em cartões
   ========================================================================== */
[data-win="entregas"] .window-body, .deliveries-panel { grid-auto-rows: max-content; }
.deliveries-panel { display: grid; gap: 16px; align-content: start; min-width: 0; }
.rail-tab-ico { position: relative; }
.rail-tab-ico .badge-count { top: -6px; right: -8px; min-width: 20px; height: 20px; font-size: 0.7rem; }
/* Na aba ativa (dourada) o selo vermelho ganha um anel dourado para se destacar do quadrado escuro. */
.rail-tab.active .rail-tab-ico .badge-count { background: var(--stamp); color: var(--stamp-ink); box-shadow: 0 0 0 2px var(--cta-2); }
/* Poucas abas: dividem a largura; no celular o ícone fica em cima do nome. */
.tab-rail.fill .rail-tab { flex: 1 1 0; justify-content: center; }
@media (max-width: 480px) {
  .tab-rail.fill { border-radius: 24px; }
  .tab-rail.fill .rail-tab { flex-direction: column; gap: 3px; min-height: 0; padding: 6px 4px 7px; border-radius: 19px; font-size: 0.8rem; }
}

/* Depósito em destaque: palco colorido com a pilha em leque e, ao lado, as ações. */
.depot-hero { display: grid; gap: 14px; padding: 14px; border-radius: var(--r-lg); background: var(--panel);
  box-shadow: inset 0 0 0 1.5px var(--hi-soft), inset 0 -3px 0 var(--panel-line), var(--shadow-soft); }
.depot-main { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 20px; align-items: center; }
.pack-fan { position: relative; height: 240px; border-radius: 18px; overflow: hidden; cursor: pointer; isolation: isolate;
  background:
    radial-gradient(60% 40% at 50% 88%, rgb(255 255 255 / 0.28), transparent 70%),
    radial-gradient(var(--game-dot) 1.2px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(160deg, var(--game-a), var(--game-b));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.16), inset 0 -4px 0 rgb(0 0 0 / 0.18); }
.pack-fan::after { content: ""; position: absolute; z-index: -1; left: 22%; right: 22%; bottom: 14px; height: 18px; border-radius: 50%; background: rgb(0 0 0 / 0.3); filter: blur(6px); }
.fan-pack { position: absolute; left: 50%; bottom: 26px; width: 116px; margin-left: -58px; transform-origin: 50% 100%;
  transition: transform 260ms cubic-bezier(.3, 1.4, .5, 1); }
.fan-pack.f1 { transform: rotate(-13deg) translateX(-30px); }
.fan-pack.f2 { transform: rotate(13deg) translateX(30px); }
.pack-fan.n2 .fan-pack.f1 { transform: rotate(-9deg) translateX(-22px); }
@media (hover: hover) and (pointer: fine) {
  .pack-fan:not(.empty):hover .fan-pack.f0 { transform: translateY(-10px); }
  .pack-fan:not(.empty):hover .fan-pack.f1 { transform: rotate(-17deg) translateX(-40px); }
  .pack-fan:not(.empty):hover .fan-pack.f2 { transform: rotate(17deg) translateX(40px); }
}
.pack-fan:not(.empty):active .fan-pack.f0 { transform: translateY(3px) scale(0.97); }
.pack-fan.empty { cursor: default; }
.pack-fan.empty .fan-pack { filter: grayscale(1); opacity: 0.4; }
.fan-count { position: absolute; z-index: 5; top: 10px; right: 10px; display: inline-flex; align-items: baseline; gap: 1px; padding: 5px 11px; border-radius: 999px;
  background: var(--ink); color: var(--raised); font: 800 0.9rem/1 var(--f-display); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2.5px var(--glass-solid), 0 3px 0 2px rgb(0 0 0 / 0.25); }
.fan-count b { font-size: 1.25rem; }
.pack-fan.full .fan-count { background: var(--gold); color: var(--seal-ink); }

.depot-side { display: grid; gap: 12px; min-width: 0; }
.depot-head h3 { font: 800 1.45rem/1.1 var(--f-display); color: var(--ink); }
.depot-head p { margin-top: 3px; font-size: 0.86rem; color: var(--muted); }
.depot-head p b { color: var(--ink); }
.depot-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.depot-btn { --lip-h: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 10px 18px; font: 800 1.08rem/1.1 var(--f-display); }
.depot-actions .depot-btn { flex: 1 1 0; white-space: nowrap; }
.depot-actions .depot-btn.primary { flex: 1 1 100%; min-height: 60px; font-size: 1.25rem; }
.depot-btn.primary { --lip-h: 5px; }
.depot-side .gold-callout { margin-top: 0; min-height: 48px; border-width: 2px; }
.depot-timer { display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line-2); }
.timer-ring { position: relative; width: 54px; height: 54px; flex: none; display: grid; place-items: center; }
.timer-ring .mini-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.timer-ring .ring-track { stroke: var(--surface-3); }
.timer-ring .ring-fill { stroke: var(--hp); transition: stroke-dashoffset 1s linear; }
.timer-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--branch-log); color: var(--on-game);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2), inset 0 2px 0 rgb(255 255 255 / 0.3); }
.depot-hero.full .timer-ico { background: var(--gold); color: var(--seal-ink); }
.timer-txt { display: grid; gap: 2px; }
.timer-txt small { font: 700 0.78rem/1.2 var(--f-ui); color: var(--muted); }
.timer-txt b { font: 800 1.3rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.depot-hero > .note { margin: 0; }

/* Três fichas: ritmo, capacidade e acúmulo offline. */
.depot-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat-chip { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 12px; border-radius: 14px; background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--line), 0 2px 0 var(--line-2); }
.stat-chip > .i { flex: none; color: var(--branch-log); }
.stat-chip > span { display: grid; gap: 1px; min-width: 0; }
.stat-chip small { font: 700 0.74rem/1.2 var(--f-ui); color: var(--muted); }
.stat-chip b { font: 800 0.95rem/1.15 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Encomenda especial: cartão de loja com o pacote, o preço e o botão. */
.shop-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 18%, var(--raised)), var(--raised) 62%);
  box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line-2), var(--shadow-soft); }
.shop-art { position: relative; width: 96px; justify-self: center; transform: rotate(-6deg); }
.shop-plus { position: absolute; z-index: 5; top: -10px; right: -12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--dex); color: var(--on-game); box-shadow: 0 0 0 2.5px var(--glass-solid), 0 3px 0 2px var(--dex-lip); }
.shop-plus .i { stroke-width: 2.6; }
.shop-body { display: grid; gap: 4px; min-width: 0; }
.shop-kicker { display: inline-flex; align-items: center; gap: 5px; font: 800 0.78rem/1.2 var(--f-ui); color: var(--gold-ink); }
.shop-body h3 { font: 800 1.3rem/1.1 var(--f-display); color: var(--ink); }
.shop-desc { font-size: 0.84rem; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
.shop-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.shop-buy .short { color: var(--ink-muted); }

/* Curadoria: alocação em cartões com a arte do pacote e a porcentagem grande. */
.section-head h3 { font: 800 1.2rem/1.15 var(--f-display); color: var(--ink); }
.alloc-section { display: grid; gap: 10px; }
.alloc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.alloc-group { grid-column: 1 / -1; margin-top: 4px; font: 800 0.95rem/1.2 var(--f-display); color: var(--ink-2); }
.alloc-card { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px 10px 12px; border-radius: 16px; background: var(--raised);
  box-shadow: inset 4px 0 0 var(--cover), inset 0 0 0 2px var(--line), 0 3px 0 var(--line-2); }
.alloc-art { width: 50px; transform: rotate(-5deg); }
.alloc-art .pack { box-shadow: 0 6px 10px -4px rgb(0 0 0 / 0.5); }
.alloc-art .pack .band, .alloc-art .pack .meta, .alloc-art .pack .brand, .shop-art .pack .meta { display: none; }
.alloc-body { display: grid; gap: 2px; min-width: 0; }
.alloc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.alloc-top label { min-width: 0; font: 800 0.92rem/1.25 var(--f-ui); color: var(--ink); overflow-wrap: anywhere; }
.alloc-pct { flex: none; min-width: 3.6ch; text-align: right; font: 800 1.55rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.alloc-body input[type=range] { width: 100%; min-height: 32px; margin: 0; }

/* Chances num painel recolhível. */
.odds-details { border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line-2); min-width: 0; }
.odds-details > summary { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 16px; list-style: none; cursor: pointer;
  font: 800 1.02rem/1.2 var(--f-display); color: var(--ink); border-radius: var(--r-lg); }
.odds-details > summary::-webkit-details-marker { display: none; }
.odds-details > summary > .i:first-child { color: var(--branch-log); }
.odds-chev { margin-left: auto; color: var(--muted); transition: transform 200ms var(--ease); }
.odds-details[open] .odds-chev { transform: rotate(90deg); }
.odds-details > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.odds-body { padding: 0 16px 16px; min-width: 0; overflow-x: auto; }
@media (hover: hover) and (pointer: fine) { .odds-details > summary:hover { background: var(--hover-tint); } }

/* Melhorias: três ramos com cabeçalho de ícone e cor; cartões em grade. */
.branch { --br: var(--branch-log); display: grid; gap: 14px; }
.branch-cur { --br: var(--branch-cur); }
.branch-neg { --br: var(--branch-neg); }
.branch + .branch { margin-top: 8px; }
.branch-head { display: flex; align-items: center; gap: 12px; }
.branch-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--br); color: var(--on-game);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--br) 58%, #000), inset 0 2px 0 rgb(255 255 255 / 0.3); }
.branch-head h3 { font: 800 1.25rem/1.1 var(--f-display); color: var(--ink); }
.upgrade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px 12px; }
.upgrade-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 18px; background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line-2); }
.up-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.up-ico { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 17px; color: var(--on-game);
  background: radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--br) 62%, #fff), var(--br) 64%);
  box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--br) 58%, #000), inset 0 2px 0 rgb(255 255 255 / 0.3); }
.up-ico .i { stroke-width: 2; filter: drop-shadow(0 1.5px 0 rgb(0 0 0 / 0.2)); }
.up-title { display: grid; gap: 5px; min-width: 0; }
.up-title h4 { font: 800 1.02rem/1.15 var(--f-display); color: var(--ink); }
.up-pips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.up-pips i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2); }
.up-pips i.on { background: var(--br); box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--br) 58%, #000); }
.up-pips small { margin-left: 4px; font: 800 0.74rem/1 var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.up-desc { font-size: 0.84rem; line-height: 1.4; color: var(--ink-2); }
.up-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 8px 12px; border-radius: 12px; background: var(--panel-2); font: 700 0.88rem/1.25 var(--f-ui); }
.up-now { color: var(--muted); }
.up-arrow { color: var(--br); stroke-width: 2.6; }
.up-delta b { font: 800 1.05rem/1.2 var(--f-display); color: var(--ink); }
.up-extra { flex-basis: 100%; font-size: 0.78rem; color: var(--muted); }
.up-max { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--good); font: 800 0.82rem/1 var(--f-ui); }
.upgrade-card .short { text-align: center; color: var(--ink-muted); }
.upgrade-card.best { box-shadow: inset 0 0 0 2.5px var(--gold), 0 4px 0 color-mix(in srgb, var(--gold) 55%, #000), 0 0 0 5px color-mix(in srgb, var(--gold) 26%, transparent),
  0 10px 26px -6px color-mix(in srgb, var(--gold) 65%, transparent); }
.best-badge { position: absolute; z-index: 2; top: -11px; right: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--gold); color: var(--seal-ink); font: 800 0.74rem/1 var(--f-ui); box-shadow: 0 2px 0 color-mix(in srgb, var(--gold) 55%, #000); }
.best-badge .i { fill: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .fan-pack.f0 .pack { animation: breathe 3.2s ease-in-out infinite; }
  .window-body:not(.still) .fan-pack.f1, .window-body:not(.still) .fan-pack.f2 { animation: fan-open 420ms cubic-bezier(.3, 1.4, .5, 1) backwards 120ms; }
  .upgrade-card.best { animation: best-glow 2.4s ease-in-out infinite; }
}
@keyframes fan-open { from { transform: none; } }
@keyframes best-glow { 50% { box-shadow: inset 0 0 0 2.5px var(--gold), 0 4px 0 color-mix(in srgb, var(--gold) 55%, #000), 0 0 0 7px color-mix(in srgb, var(--gold) 34%, transparent),
  0 12px 34px -4px color-mix(in srgb, var(--gold) 80%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .fan-pack, .odds-chev { transition: none; }
  .pack-fan:not(.empty):active .fan-pack.f0 { transform: none; }
}

/* Celular: a pilha em cima, na largura toda, e as ações embaixo. */
@media (max-width: 640px) {
  .depot-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pack-fan { height: 210px; }
  .fan-pack { width: 104px; margin-left: -52px; bottom: 22px; }
}
@media (max-width: 480px) {
  .depot-hero { padding: 10px; }
  .depot-stats { gap: 6px; }
  .stat-chip { flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; text-align: center; }
  .stat-chip b { font-size: 0.86rem; }
  .depot-btn { padding-inline: 12px; font-size: 1rem; }
  .shop-card { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .shop-art { width: 68px; }
  .shop-buy .depot-btn { flex: 1 1 100%; }
  .alloc-grid, .upgrade-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Etapa 2, lote C: Trilha grande, Vitrine como prateleira e Perfil como cartão de jogador
   ========================================================================== */
[data-win="trilha"] .window-body, [data-win="vitrine"] .window-body, [data-win="prestigio"] .window-body, .profile-panel { grid-auto-rows: max-content; }

/* Barras grossas (XP, patente, caixa): o mesmo trilho rebaixado das missões. */
.track-xp-bar, .rank-bar, .register-bar { height: 16px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 2px 3px rgb(11 30 51 / 0.2); overflow: hidden; }
.track-xp-bar > i, .rank-bar > i, .register-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--hp);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.35), inset 0 -2px 0 rgb(0 0 0 / 0.12); transition: width 400ms var(--ease); }
.track-xp-bar > i, .rank-bar > i { min-width: 16px; }

/* ---------- Trilha: topo com o nível e o Resgatar tudo ---------- */
.track-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--hi-soft), inset 0 -3px 0 var(--panel-line), var(--shadow-soft); }
.track-hero.ready { box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--dex) 50%, transparent), inset 0 -3px 0 var(--panel-line), var(--shadow-soft); }
.track-badge { width: 78px; height: 78px; border-radius: 50%; display: grid; place-content: center; justify-items: center; background: var(--gold); color: var(--seal-ink);
  box-shadow: inset 0 -5px 0 var(--seal-lip), inset 0 3px 0 rgb(255 255 255 / 0.45), 0 0 0 4px var(--raised), 0 4px 0 4px var(--line-2); }
.track-badge small { font: 800 0.72rem/1 var(--f-ui); }
.track-badge b { font: 800 2.3rem/0.95 var(--f-display); font-variant-numeric: tabular-nums; }
.track-xp { display: grid; gap: 6px; min-width: 0; }
.track-xp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.track-xp-top b { font: 800 1.2rem/1.1 var(--f-display); color: var(--ink); }
.claim-all { min-height: 62px; padding: 8px 24px 8px 18px; gap: 12px; }
.claim-all > span { display: grid; text-align: left; }
.claim-all b { font: 800 1.25rem/1.05 var(--f-display); }
.claim-all small { font: 700 0.78rem/1.2 var(--f-ui); }
@media (prefers-reduced-motion: no-preference) {
  .claim-all { animation: claim-glow 2s ease-in-out infinite; }
  @keyframes claim-glow { 50% { box-shadow: 0 var(--lip-h) 0 var(--lip-c), inset 0 2px 0 var(--dex-hi), 0 0 0 8px var(--track-glow); } }
}

/* ---------- Trilha: nós grandes ligados por uma linha ---------- */
.track-panel { display: grid; gap: 4px; }
.track-big { position: relative; display: flex; margin: 0 -8px; padding: 6px 8px 14px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.track-node { position: relative; flex: none; width: 112px; display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; gap: 7px; padding: 0 4px; scroll-snap-align: center; }
/* A linha passa pelo centro do orbe (18 px do rótulo + 7 de espaço + metade dos 64 do orbe). */
.track-node::before { content: ""; position: absolute; top: 57px; left: 0; right: 0; height: 8px; margin-top: -4px; background: var(--surface-3); }
.track-node:first-child::before { left: 50%; }
.track-node:last-child::before { right: 50%; }
.track-node.claimed::before, .track-node.ready::before { background: var(--hp); }
.track-node.current::before { background: linear-gradient(90deg, var(--hp) 50%, var(--surface-3) 50%); }
.tn-lvl { height: 18px; font: 800 0.86rem/18px var(--f-ui); color: var(--ink-2); }
.tn-orb { --oc: var(--branch-log); --oi: var(--on-game); position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--oc); color: var(--oi); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.3), 0 3px 0 color-mix(in srgb, var(--oc) 50%, #000); }
.tn-orb.rw-credits, .tn-orb.rw-golden { --oc: var(--gold); --oi: var(--seal-ink); }
.tn-orb.rw-tokens { --oc: var(--branch-cur); }
.tn-orb.rw-cover { --oc: var(--npc-5); }
.tn-orb.rw-slot { --oc: var(--npc-6); }
.track-node.major .tn-orb { box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.3), 0 0 0 4px var(--raised), 0 3px 0 4px color-mix(in srgb, var(--oc) 50%, #000); }
.track-node.locked .tn-orb { background: var(--raised); color: color-mix(in srgb, var(--oc) 70%, var(--muted)); box-shadow: inset 0 0 0 3px var(--line-2), 0 3px 0 var(--line-2); }
.track-node.locked.major .tn-orb { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--oc) 55%, var(--line-2)), 0 3px 0 var(--line-2); }
.track-node.current .tn-orb { box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.3), 0 0 0 4px var(--raised), 0 0 0 7px var(--hp); }
.track-node.claimed .tn-orb { filter: saturate(0.55); opacity: 0.8; }
.track-node.ready .tn-orb { box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.3), 0 0 0 4px var(--raised), 0 0 0 10px var(--track-glow); }
.tn-ok { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--good-fill); color: var(--on-game);
  box-shadow: 0 0 0 3px var(--panel); }
.tn-rewards { display: grid; justify-items: center; align-content: start; gap: 4px; }
.reward-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px; background: var(--raised); color: var(--ink-2);
  font: 800 0.76rem/1.3 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--line); }
.reward-chip .i { color: var(--muted); }
.reward-chip.rw-credits .i, .reward-chip.rw-golden .i { color: var(--gold-ink); }
.reward-chip.rw-golden { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, var(--line)); }
.tn-state { display: inline-flex; align-items: center; gap: 3px; min-height: 20px; margin-top: 2px; font: 800 0.78rem/1.2 var(--f-ui); color: var(--muted); }
.track-node.claimed .tn-state { color: var(--good); }
.track-node.ready .tn-state { color: var(--ready-ink); font-size: 0.86rem; }
.tn-bar { width: 80px; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; box-shadow: inset 0 1px 2px rgb(11 30 51 / 0.2); }
.tn-bar > i { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: var(--hp); }
.track-note { max-width: 70ch; }
@media (prefers-reduced-motion: no-preference) {
  .track-node.ready .tn-orb { animation: node-ready 1.8s ease-in-out infinite; }
  @keyframes node-ready { 50% { box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.3), 0 0 0 4px var(--raised), 0 0 0 14px transparent; } }
}

/* Capas do fichário (cartões com o livro) e a origem do XP. */
.track-extra { align-items: start; }
.cover-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cover-card { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 12px 8px 10px; border: 0; border-radius: var(--r-md); background: var(--raised); color: var(--ink);
  font: inherit; text-align: center; cursor: pointer; box-shadow: inset 0 0 0 2px var(--line), 0 2px 0 var(--line-2); }
.cover-card.active { box-shadow: inset 0 0 0 3px var(--dex), 0 2px 0 var(--dex-lip); }
.cover-card:disabled { cursor: not-allowed; background: var(--panel-2); }
.cover-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cover-book { width: 54px; height: 70px; margin-bottom: 4px; display: grid; place-items: center; border-radius: 4px 9px 9px 4px; color: rgb(255 255 255 / 0.9);
  background: linear-gradient(135deg, var(--cv1), var(--cv2)); box-shadow: inset 6px 0 0 rgb(0 0 0 / 0.3), inset 7px 0 0 rgb(255 255 255 / 0.12), 0 5px 8px -3px rgb(20 18 70 / 0.45); }
.cover-card.cover-holo .cover-book { background: linear-gradient(135deg, #ff7ac6, #ffd36a, #7cffb2, #6ac8ff, #b28cff); }
.cover-card:disabled .cover-book { filter: saturate(0.4); opacity: 0.6; }
.cover-card b { font: 800 0.95rem/1.15 var(--f-display); }
.cover-card small { display: inline-flex; align-items: center; gap: 3px; font: 700 0.76rem/1.2 var(--f-ui); color: var(--muted); }
.cover-card.active small { color: var(--good); }
@media (hover: hover) and (pointer: fine) { .cover-card:not(:disabled):not(.active):hover { box-shadow: inset 0 0 0 2px var(--ink-2), 0 2px 0 var(--line-2); } }
.xp-rows, .stat-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.stat-rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 28px; }
.xp-rows li, .stat-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-2); }
.xp-rows li:last-child { border-bottom: 0; }
.xp-rows b, .stat-rows b { font: 800 1rem/1.2 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
  .track-hero { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .track-badge { width: 64px; height: 64px; }
  .track-badge b { font-size: 1.9rem; }
  .claim-all { grid-column: 1 / -1; width: 100%; }
  .track-node { width: 104px; }
}

/* ---------- Vitrine: prateleira de madeira e caixa registradora ---------- */
.vitrine { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .vitrine { grid-template-columns: minmax(0, 1fr) 290px; }
  .vitrine > .register { grid-column: 2; grid-row: 1; }
  .vitrine > .shelf-panel { grid-column: 1; grid-row: 1; }
}
.shelf-panel { display: grid; gap: 12px; container-type: inline-size; }
.shelf-panel .list-head { margin-bottom: 0; }
.shelf { --gap: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; margin: 0; padding: 18px calc(var(--gap) / 2) 14px;
  list-style: none; border-radius: var(--r-md); background: var(--shelf-back); box-shadow: inset 0 0 0 4px var(--shelf-lip), inset 0 14px 20px -12px rgb(0 0 0 / 0.3); }
@container (min-width: 640px) { .shelf { --gap: 20px; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); } }
.shelf-slot { display: grid; justify-items: center; align-content: start; min-width: 0; }
.shelf-card, .shelf-hole { position: relative; z-index: 1; width: min(132px, calc(100% - 8px)); aspect-ratio: var(--card-ratio); }
.shelf-card { display: grid; align-content: end; filter: drop-shadow(0 8px 5px rgb(20 18 70 / 0.35)); transform: perspective(500px) rotateX(5deg); transform-origin: 50% 100%; }
.shelf-card .card { width: 100%; }
.shelf-hole { display: grid; place-content: center; justify-items: center; gap: 6px; padding: 4px; border-radius: 8px; border: 2.5px dashed color-mix(in srgb, var(--shelf-lip) 50%, transparent);
  background: color-mix(in srgb, var(--raised) 50%, transparent); color: var(--ink-2); font: 800 0.82rem/1.2 var(--f-ui); text-align: center; }
button.shelf-hole { cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
button.shelf-hole:disabled { cursor: not-allowed; opacity: 0.55; }
button.shelf-hole:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { button.shelf-hole:hover:not(:disabled) { border-color: var(--dex); color: var(--dex); background: var(--raised); } }
.shelf-slot.locked .shelf-hole { border: 0; background: color-mix(in srgb, var(--shelf-lip) 16%, transparent); color: color-mix(in srgb, var(--shelf-lip) 70%, var(--ink-2)); }
/* Tábua: cada vaga desenha o seu pedaço, que encosta no da vizinha (a margem cobre o espaço entre elas). */
.shelf-board { justify-self: stretch; height: 14px; margin: -2px calc(var(--gap) / -2) 0; border-radius: 2px; background: linear-gradient(180deg, var(--shelf-edge) 0 3px, var(--shelf-wood) 3px);
  box-shadow: 0 5px 0 var(--shelf-lip), 0 12px 12px -6px rgb(0 0 0 / 0.35); }
.shelf-plaque { display: grid; justify-items: center; gap: 3px; max-width: 100%; margin-top: 12px; text-align: center; min-width: 0; }
.shelf-plaque b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 0.9rem/1.15 var(--f-display); color: var(--ink); }
.shelf-plaque small { font: 700 0.76rem/1.2 var(--f-ui); color: var(--muted); }
.shelf-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.shelf-lv, .shelf-inc { padding: 1px 7px; border-radius: 999px; font: 800 0.72rem/1.35 var(--f-ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shelf-lv { background: var(--branch-log); color: var(--on-game); }
.shelf-inc { background: var(--gold); color: var(--seal-ink); }
.shelf-swap { margin-top: 7px; min-height: 32px; padding: 3px 12px; }
.shelf-auto { justify-self: start; }

.register { position: relative; display: grid; gap: 12px; margin-bottom: 14px; padding: 16px 16px 20px; border-radius: 22px 22px 14px 14px; background: var(--register-body); color: var(--on-game);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.14), inset 0 -6px 0 var(--register-lip), var(--shadow-soft); }
/* Gaveta do caixa, por baixo do corpo. */
.register::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -12px; height: 14px; border-radius: 0 0 12px 12px; background: var(--register-lip); z-index: -1; }
.register-screen { display: grid; justify-items: end; gap: 2px; padding: 10px 14px 12px; border-radius: 12px; background: var(--register-screen); color: var(--register-digit);
  box-shadow: inset 0 3px 8px rgb(0 0 0 / 0.55), 0 0 0 3px rgb(0 0 0 / 0.2); }
.register-screen small { justify-self: start; font: 800 0.76rem/1.2 var(--f-ui); }
.register-screen b { font: 700 2.5rem/1 var(--f-mono); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px color-mix(in srgb, var(--register-digit) 55%, transparent); }
.register-screen span { font: 700 0.76rem/1.2 var(--f-ui); }
.register-meter { display: grid; gap: 6px; }
.register-meter .muted { color: var(--register-muted); }
.register-bar { background: rgb(0 0 0 / 0.3); box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.35); }
.register-bar > i { background: var(--gold); }
.register-full { color: var(--gold); }
.register-rate { display: flex; align-items: center; gap: 8px; font: 700 0.95rem/1.2 var(--f-ui); color: var(--register-muted); }
.register-rate b { font: 800 1.35rem/1 var(--f-display); color: var(--on-game); font-variant-numeric: tabular-nums; }
.register-rate .i { color: var(--gold); }
.register-collect { width: 100%; min-height: 56px; font-size: 1.1rem; }
.register-collect:disabled { opacity: 0.6; }
@media (max-width: 480px) {
  .shelf { --gap: 12px; }
  .shelf-plaque b { font-size: 0.82rem; }
  .shelf-auto { justify-self: stretch; }
  .register { gap: 10px; padding: 14px 14px 18px; }
  .register-screen b { font-size: 2.1rem; }
  .register-collect { min-height: 50px; }
}

/* ---------- Perfil: cartão do jogador, medalhas e grupos de ajustes ---------- */
.player-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 18px; padding: 18px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--hi-soft), inset 0 -3px 0 var(--panel-line), var(--shadow-soft); }
.player-portrait { position: relative; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; cursor: pointer;
  background: var(--branch-log); color: var(--on-game); box-shadow: inset 0 -5px 0 rgb(0 0 0 / 0.22), 0 0 0 4px var(--raised), 0 4px 0 4px var(--line-2); }
.player-portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.player-portrait:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.pp-initial { font: 800 2.7rem/1 var(--f-display); }
.player-portrait.drawn .pp-initial { visibility: hidden; }
.player-id { display: grid; gap: 7px; min-width: 0; }
.player-id h3 { font: 800 1.6rem/1.05 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.rank-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rank-name { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px 3px 8px; border-radius: 999px; background: var(--prestige-fill); color: var(--on-game);
  font: 800 0.92rem/1.2 var(--f-display); box-shadow: 0 2px 0 color-mix(in srgb, var(--prestige-fill) 50%, #000); }
.rank-bar > i { background: var(--branch-cur); }
.player-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
  .player-hero { grid-template-columns: auto minmax(0, 1fr) auto; }
  .player-chips { grid-column: auto; flex-direction: column; align-items: stretch; }
}
.profile-panel { display: grid; gap: 16px; align-content: start; min-width: 0; }

.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.medal { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 14px 10px 12px; border-radius: var(--r-md); background: var(--raised); text-align: center;
  box-shadow: inset 0 0 0 2px var(--line), 0 2px 0 var(--line-2); }
.medal-ico { width: 54px; height: 54px; margin-bottom: 3px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--muted); }
.medal.on .medal-ico { background: var(--gold); color: var(--seal-ink); box-shadow: inset 0 -4px 0 var(--seal-lip), inset 0 2px 0 rgb(255 255 255 / 0.45), 0 0 0 3px var(--raised), 0 3px 0 3px var(--line-2); }
.medal b { font: 800 0.98rem/1.15 var(--f-display); color: var(--ink); }
.medal small { font-size: 0.78rem; line-height: 1.3; color: var(--muted); }
.medal .reward-seal { margin-top: 3px; }
.medal:not(.on) { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--line); }
.medal:not(.on) b { color: var(--ink-2); }
.medal:not(.on) .reward-seal { background: var(--surface-3); color: var(--ink-2); box-shadow: none; }

/* Duas colunas que se encaixam (os grupos têm alturas diferentes); no celular, uma só. */
.settings { columns: 2 340px; column-gap: 16px; }
.settings > * { break-inside: avoid; margin-bottom: 16px; }
.settings > .panel.dev { column-span: all; }
.settings-group { display: grid; align-content: start; gap: 4px; }
.settings-group .cloud-box { margin: 0; padding: 0; border: 0; background: transparent; }
.settings-group .cloud-box > b { display: none; }
.settings-group .theme-row { flex-wrap: wrap; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.rules-ico.cur { background: var(--branch-cur); }
/* Detalhes: filtros do Arquivo Mestre quebram linha no celular (antes rolavam escondidos e o último
   ficava cortado) e a data das lutas da Arena não é cortada no computador. */
@media (max-width: 520px) { .seg.master-filters { flex-wrap: wrap; overflow: visible; border-radius: 22px; } }
.fight-card { grid-template-columns: auto minmax(7.5em, 1fr) auto auto; }
.fc-date { font-size: 0.74rem; line-height: 1.3; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .fight-card { grid-template-columns: auto minmax(0, 1fr) auto; } }

@media (max-width: 480px) {
  .player-hero { padding: 14px; gap: 12px 14px; }
  .player-portrait { width: 76px; height: 76px; }
  .pp-initial { font-size: 2.2rem; }
  .player-id h3 { font-size: 1.35rem; }
  .settings-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Modo escuro (Pocket à noite)
   Ativo com <html data-theme="dark">: escolha em Perfil (Automático segue o sistema).
   Só troca os tokens: fundo azul-marinho/índigo com os mesmos pontos, painéis em ardósia,
   texto claro e cores de estado clareadas para os painéis escuros. As cenas escuras
   (abertura, visualizador, cena imersiva, palco do replay) definem os próprios tokens e
   ficam iguais nos dois temas.
   ========================================================================== */
:root[data-theme="dark"] {
  /* Escuro (padrão): marinho, vidro, ciano e dourado. */
  --discord: #5865f2;
  --discord-ink: #ffffff;
  --game-a: #11304d;
  --game-b: #06111f;
  --game-mid: #0b1e33;
  --game-glow: rgb(57 213 230 / 0.16);
  --game-dot: rgb(57 213 230 / 0.05);
  --stage-glow: rgb(57 213 230 / 0.16);
  --scene-top: #0f2b45;
  --scene-bottom: #06111f;
  --scrim: rgb(2 8 16 / 0.68);
  --scrim-game: rgb(2 8 16 / 0.55);
  --eyebrow: #39d5e6;
  --glass-edge: rgb(57 213 230 / 0.35);
  --cta-1: #ffe066;
  --cta-2: #f5b400;
  --cta-lip: #b47f00;
  --cta-ink: #0b1e33;
  --cta-chev: #0b1e33;

  --panel: #0f2842;
  --panel-2: #0b1e33;
  --panel-line: #1f4d70;
  --raised: #15375a;
  --ink: #eaf6ff;
  --ink-2: #c4d8ec;
  --ink-muted: #9db6d0;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 28px -10px rgb(0 0 0 / 0.6);
  --shadow-pop: 0 2px 4px rgb(0 0 0 / 0.35), 0 24px 60px -18px rgb(0 0 0 / 0.75);
  --focus: #39d5e6;
  --gold-ink: #ffe066;
  /* Fundo de ícone branco e, ao mesmo tempo, ícone sobre painel escuro: tons médios (≥ 3:1 nos dois). */
  --tool-research: #1c8ad8;
  --branch-log: #4584ec;
  --branch-cur: #a272f0;
  --branch-neg: #e0731c;
  --prestige-fill: #7b46d6;
  --seal-lip: #8f6200;

  --hi: rgb(255 255 255 / 0.07);
  --hi-soft: rgb(255 255 255 / 0.06);
  --glass: rgb(13 34 56 / 0.82);
  --glass-solid: #11304d;
  --hud-lip: rgb(0 0 0 / 0.35);
  --hover-tint: rgb(255 255 255 / 0.06);
  --idle: #3a5c7c;
  --ed-ink: #a3b3ff;    /* edições e capas de fichário */
  --ready-ink: #ff9c7f; /* recompensa pronta na trilha */
  --vs-floor: #0b1e33;
  --vs-foe: #2b2042;
  --vs-bg: #06111f;
  --vs-lip: #020a14;
  --vs-edge: #2a6285;
  --gym-bar: #2e2a3c;
  --must-ink: #ff8f72;
  --league-bronze: #d58d4f;
  --league-prata: #a9b6d4;
  --league-ouro: #f5bf1f;
  --league-platina: #38c9c0;
  --league-mestre: #a87cf2;
  --npc-1: #c9500f;
  --npc-2: #2f74c9;
  --npc-3: #2c8040;
  --npc-4: #7457e0;
  --npc-5: #b8336a;
  --npc-6: #13808f;
  --speech: #15375a;
  --wonder-floor: #221d48;
  --wonder-edge: #4f4392;
  --track-glow: rgb(255 224 102 / 0.3);
  --shelf-back: #241f3d;
  --shelf-wood: #8a5a34;
  --shelf-edge: #b07a4c;
  --shelf-lip: #4f321b;
  --register-body: #11304d;
  --register-lip: #06111f;
  --register-muted: #c4d8ec;
  --register-screen: #08180f;
  --register-digit: #6cf0a6;

  --bg: #0b1e33;
  --rail: #08172a;
  --surface-3: #1a4163;
  --line-2: #2a6285;
  --muted: #a9bed6;
  --good: #4fd68a;
  --bad: #ff7b70;
  --lip: rgb(0 0 0 / 0.35);
  --r-comum: #aab8c8;
  --r-incomum: #5fdcaa;
  --r-rara: #7cb7ff;
  --r-holo: #c9a6ff;
  --r-secreta: #f0b45a;
  color-scheme: dark;
}
:root[data-theme="dark"] .seg { box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.3); }
:root[data-theme="dark"] .tab-rail { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.45); }
:root[data-theme="dark"] .bar { box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35); }
:root[data-theme="dark"] .switch input[type=checkbox]:checked::after { background: #fff; }
/* Controles apagados: no escuro a transparência some mais, então apagam um pouco menos. */
:root[data-theme="dark"] .icon-btn:disabled { opacity: 0.5; }

/* Escolha do tema em Perfil: o seletor desce para a linha de baixo no celular. */
.theme-row { flex-wrap: wrap; }
.theme-row .seg { flex: none; }

/* ==========================================================================
   Retoques do miolo das janelas (PokeClash): o que antes era vermelho Pokédex vira dourado
   (ícones e marcas de destaque) ou ciano/petróleo (contornos e controles); popovers e fichas em vidro.
   Só tokens: nada de cor nova.
   ========================================================================== */
input[type=range], input.volume { accent-color: var(--eyebrow); }
/* Ícones de destaque: dourado com tinta marinho, como a ação principal. */
.bar-ico, .mission-new-ico { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); box-shadow: inset 0 -3px 0 var(--cta-lip); }
.shop-plus { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); box-shadow: 0 0 0 2.5px var(--glass-solid), 0 3px 0 2px var(--cta-lip); }
.fight-dots > i.on { background: var(--cta-2); box-shadow: inset 0 -2px 0 var(--cta-lip), inset 0 2px 0 var(--cta-1); }
.route-node.now .node-face { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); border-color: var(--cta-lip); color: var(--cta-ink);
  box-shadow: 0 3px 0 var(--cta-lip), 0 0 0 5px color-mix(in srgb, var(--cta-2) 30%, transparent); }
@media (max-width: 480px) { .route-node.now .node-face { box-shadow: 0 2px 0 var(--cta-lip), 0 0 0 3px color-mix(in srgb, var(--cta-2) 30%, transparent); } }
@keyframes node-pulse { 50% { box-shadow: 0 3px 0 var(--cta-lip), 0 0 0 9px color-mix(in srgb, var(--cta-2) 12%, transparent); } }
/* Escolhidos e "você" no ranking: contorno ciano (petróleo no claro). */
.rank-row.me { background: color-mix(in srgb, var(--eyebrow) 10%, var(--raised)); box-shadow: inset 0 0 0 2px var(--eyebrow), 0 2px 0 var(--hud-lip); }
.cover-card.active { box-shadow: inset 0 0 0 3px var(--eyebrow), 0 2px 0 var(--hud-lip); }
/* Brilho que pulsa nos botões dourados (Resgatar tudo, Lutar): filete claro e halo dourado, sem o vermelho antigo. */
@keyframes claim-glow { 50% { box-shadow: 0 var(--lip-h) 0 var(--lip-c), inset 0 2px 0 rgb(255 255 255 / 0.45), 0 0 0 8px var(--track-glow); } }
@keyframes fight-glow { 50% { box-shadow: 0 var(--lip-h) 0 var(--lip-c), inset 0 2px 0 rgb(255 255 255 / 0.45), 0 0 0 7px color-mix(in srgb, var(--cta-2) 26%, transparent); } }
.track-hero.ready { box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--eyebrow) 60%, transparent), inset 0 -3px 0 var(--panel-line), var(--shadow-soft); }
.tf-arrow, .page-arrow:hover:not(:disabled) { color: var(--eyebrow); }
.mission-new:hover { border-color: var(--eyebrow); }
.page-dots button.cur i { background: var(--cta-2); box-shadow: 0 0 0 2px var(--raised), 0 0 0 3.5px var(--cta-lip); }
/* Capa da coleção aberta: anel dourado. */
.cover.active { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.4), inset 0 -4px 0 color-mix(in srgb, var(--cover) 50%, #000),
  0 0 0 3px var(--panel-2), 0 0 0 6px var(--cta-2), 0 12px 22px -8px rgb(11 30 51 / 0.6); }
.cover.done.active { box-shadow: inset 0 0 0 2.5px var(--gold), inset 0 -4px 0 color-mix(in srgb, var(--cover) 50%, #000),
  0 0 0 3px var(--panel-2), 0 0 0 6px var(--cta-2), 0 12px 22px -8px rgb(11 30 51 / 0.6); }
/* Fichas e botões redondos de ferramenta: o mesmo vidro dos botões. */
.tool-chip, .research-pill { border: 1.5px solid var(--glass-edge); background: color-mix(in srgb, var(--eyebrow) 8%, var(--raised)); box-shadow: 0 3px 0 var(--hud-lip); }
.tool-chip:active, .research-pill:active { box-shadow: 0 0 0 var(--hud-lip); }
.tool-chip.open, .research-pill.open { border-color: var(--eyebrow); }
@media (hover: hover) and (pointer: fine) { .tool-chip:hover, .research-pill:hover { border-color: var(--eyebrow); } }
.page-arrow { border: 1.5px solid var(--glass-edge); box-shadow: 0 4px 0 var(--hud-lip), 0 12px 24px -8px rgb(11 30 51 / 0.5); }
.page-arrow:active:not(:disabled) { box-shadow: 0 1px 0 var(--hud-lip); }
/* Popovers: vidro com borda ciano e sombra funda. */
.filters-pop, .slot-menu { background: var(--raised); border: 1.5px solid var(--glass-edge); box-shadow: var(--shadow-pop); }
.filters-pop { padding: 12.5px; }
.slot-menu { padding: 4.5px; }
/* Modal: o rótulo e o título seguem o cabeçalho das janelas. */
.dialog-head h2 { font-size: 1.6rem; text-transform: uppercase; }
.dialog-head .eyebrow { color: var(--eyebrow); font: 800 0.66rem/1.35 var(--f-display); font-style: italic; letter-spacing: 0.12em; text-transform: uppercase; }
.dialog-head .eyebrow::before { content: ""; display: inline-block; width: 14px; height: 2px; margin: 0 7px 3px 0; vertical-align: middle; border-radius: 2px; background: currentColor; }
.dialog-head .icon-btn { width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation: none; transition: none; } }

/* ==========================================================================
   Tipografia (PokeClash): Rubik 800/900 em itálico para títulos, botões e números; Nunito no texto.
   A família vem de --f-display. Como as regras de antes usam o atalho `font:`, que zera o
   estilo, o itálico entra aqui, no fim, com a mesma força (ou mais) das regras que ele cobre.
   ========================================================================== */
:root:root :is(h1, h2, h3, h4, .btn, .btn .price, .chip, .kpi .value, .op-count, .pill b, .lv-info b,
  .cta-text b, .register-rate b, .timer-txt b, .track-badge b, .vs-badge > b, .pc-mmr b, .rr-mmr,
  .alloc-pct, .seal b, .rank, .manifest-top .big, .claim-all b, .research-pill b, .mission-count b) {
  font-style: italic;
}
:root:root :is(.btn, .chip) { font-family: var(--f-display); font-weight: 800; }
:root:root :is(h1, h2, h3, h4) { font-weight: 800; }

/* ==========================================================================
   Aba Pokémon da loja de decoração: busca, grade paginada dos liberados (os bloqueados apagados),
   fixados em dourado e os Pokémon à venda. Só tokens, valem nos dois temas.
   ========================================================================== */
.pk-tools { margin: 0 0 10px; }
.pk-search input { width: 100%; min-height: 42px; padding: 8px 12px; background: var(--raised); border: 2px solid var(--line); border-radius: 12px; color: var(--ink); font: 700 1rem var(--f-ui); }
.pk-search input:focus-visible { border-color: var(--eyebrow); }
.pk-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 4px; }
.pk-summary b { font: 800 1rem var(--f-display); font-style: italic; }
#pk-note { margin: 0 0 10px; min-height: 2.6em; }
.pk-sub { margin: 18px 0 2px; font: 800 1.05rem var(--f-display); font-style: italic; text-transform: uppercase; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.pk-grid:focus-visible, .pk-empty:focus-visible { outline: 2px solid var(--eyebrow); outline-offset: 3px; border-radius: 8px; }
.pk-grid.sale { margin-top: 10px; }
.pk-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 8px 6px 10px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--raised); text-align: center; min-width: 0; }
.pk-card b { max-width: 100%; font: 800 0.84rem/1.2 var(--f-ui); overflow-wrap: anywhere; }
.pk-card .btn, .pk-card .tag { margin-top: 4px; }
.pk-card .tag { font-size: 0.68rem; }
.pk-card.pinned { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.pk-card.locked { opacity: 0.6; border-style: dashed; background: transparent; }
.pk-card.locked .pk-thumb { filter: grayscale(1) brightness(0.8); opacity: 0.7; }
.pk-card.locked .tiny { display: inline-flex; align-items: center; gap: 4px; line-height: 1.25; }
.pk-card .btn.limit { opacity: 0.55; }
.pk-star { position: absolute; top: 6px; right: 6px; display: grid; color: var(--gold); }
.pk-thumb { display: grid; place-items: center; width: 100%; height: 68px; overflow: hidden; }
.pk-thumb .sprite-frame { display: block; flex: none; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; transform: scale(var(--k, 1.4)); }
.pk-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 8px; }
.pk-pager .btn { min-width: 44px; min-height: 40px; }
.pk-empty { padding: 22px 8px; text-align: center; }


/* ==========================================================================
   Seção Captura: cena da rota (formas em CSS, um visual por rota), bolas, rotas, relatório e Pokédex.
   Cor só por tokens (--sc-*), definidos nos dois temas aqui embaixo.
   ========================================================================== */
:root {
  --sc-floresta-sky: #bfe6f0; --sc-floresta-far: #8fcfa6; --sc-floresta-mid: #6fbf86; --sc-floresta-ground: #7fcf8a; --sc-floresta-prop: #2f8a55;
  --sc-praia-sky: #bfe3fa; --sc-praia-far: #6fc0e8; --sc-praia-mid: #8fd2ee; --sc-praia-ground: #f1dca4; --sc-praia-prop: #e8a43a;
  --sc-vulcao-sky: #f4c9b0; --sc-vulcao-far: #b5786a; --sc-vulcao-mid: #cf8e72; --sc-vulcao-ground: #c8aa98; --sc-vulcao-prop: #e8582a;
  --sc-usina-sky: #c9d8f7; --sc-usina-far: #8aa0d8; --sc-usina-mid: #a5b8e8; --sc-usina-ground: #b7c3dc; --sc-usina-prop: #5d74b8;
  --sc-caverna-sky: #d5c8ee; --sc-caverna-far: #9c88c9; --sc-caverna-mid: #b8a6dc; --sc-caverna-ground: #c4b6d8; --sc-caverna-prop: #7a52c8;
  --sc-torre-sky: #e0d0f7; --sc-torre-far: #a58ad8; --sc-torre-mid: #bda2e8; --sc-torre-ground: #cdb8ea; --sc-torre-prop: #7b4fc4;
  --sc-orb: #fff3c4;
  --sc-wood: #7a5030;     /* troncos das árvores e coqueiros da cena */
  --pet-glow: 245 178 20; /* brilho do Pokémon nível 10 na loja (canais rgb, o canvas põe a opacidade) */
  --sc-sil: brightness(0) opacity(0.78); /* silhueta dos vistos na Pokédex */
}
:root[data-theme="dark"] {
  --sc-floresta-sky: #1e5a6e; --sc-floresta-far: #1a4f50; --sc-floresta-mid: #1f6b45; --sc-floresta-ground: #2b8a4e; --sc-floresta-prop: #0e4a2e;
  --sc-praia-sky: #1f6aa0; --sc-praia-far: #2a86b8; --sc-praia-mid: #3aa3c9; --sc-praia-ground: #b89658; --sc-praia-prop: #f5d36a;
  --sc-vulcao-sky: #4a2230; --sc-vulcao-far: #3a1c28; --sc-vulcao-mid: #5a2a24; --sc-vulcao-ground: #4a3a38; --sc-vulcao-prop: #ff7a2f;
  --sc-usina-sky: #2a3a66; --sc-usina-far: #202b4d; --sc-usina-mid: #2f4170; --sc-usina-ground: #3d4766; --sc-usina-prop: #9fb4dc;
  --sc-caverna-sky: #241a3a; --sc-caverna-far: #1b1330; --sc-caverna-mid: #33264f; --sc-caverna-ground: #473a5e; --sc-caverna-prop: #8e6bd6;
  --sc-torre-sky: #3a2b66; --sc-torre-far: #2a1f4f; --sc-torre-mid: #44338a; --sc-torre-ground: #55468a; --sc-torre-prop: #d9b3ff;
  --sc-orb: #f6e7a8;
  --sc-wood: #6a4428;
  --pet-glow: 255 214 90;
  --sc-sil: brightness(0) drop-shadow(0 0 1px rgb(140 200 240 / 0.55));
}

.cap-stage { padding: 12px; }
.cap-scene { position: relative; height: 224px; overflow: hidden; isolation: isolate; border-radius: var(--r-md); border: 2px solid var(--glass-edge); background: var(--sky); }
:where(.cap-scene) > span { position: absolute; display: block; }
.sc-floresta { --sky: var(--sc-floresta-sky); --far: var(--sc-floresta-far); --mid: var(--sc-floresta-mid); --ground: var(--sc-floresta-ground); --prop: var(--sc-floresta-prop); }
.sc-praia { --sky: var(--sc-praia-sky); --far: var(--sc-praia-far); --mid: var(--sc-praia-mid); --ground: var(--sc-praia-ground); --prop: var(--sc-praia-prop); }
.sc-vulcao { --sky: var(--sc-vulcao-sky); --far: var(--sc-vulcao-far); --mid: var(--sc-vulcao-mid); --ground: var(--sc-vulcao-ground); --prop: var(--sc-vulcao-prop); }
.sc-usina { --sky: var(--sc-usina-sky); --far: var(--sc-usina-far); --mid: var(--sc-usina-mid); --ground: var(--sc-usina-ground); --prop: var(--sc-usina-prop); }
.sc-caverna { --sky: var(--sc-caverna-sky); --far: var(--sc-caverna-far); --mid: var(--sc-caverna-mid); --ground: var(--sc-caverna-ground); --prop: var(--sc-caverna-prop); }
.sc-torre { --sky: var(--sc-torre-sky); --far: var(--sc-torre-far); --mid: var(--sc-torre-mid); --ground: var(--sc-torre-ground); --prop: var(--sc-torre-prop); }
.sc-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.sc-mon { left: 50%; transform: translateX(-50%); display: block; z-index: 2; line-height: 0; }
.sc-canvas { display: block; image-rendering: pixelated; transform-origin: 50% 85%; }
.sc-mon.fled .sc-canvas { opacity: 0.8; filter: saturate(0.6); }
.sc-wait { left: 50%; bottom: 20%; transform: translateX(-50%); font: italic 800 3rem/1 var(--f-display); color: var(--sc-orb); opacity: 0.85; z-index: 2; }
.sc-name { left: 10px; top: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1.5px solid var(--glass-edge); background: var(--glass); color: var(--ink); font: italic 800 0.74rem/1.3 var(--f-display); text-transform: uppercase; }
.sc-ball { left: 50%; bottom: 19%; z-index: 4; width: 36px; height: 36px; margin-left: -18px; opacity: 0; pointer-events: none; }
.cap-caption { margin: 10px 2px 8px; min-height: 1.4em; }
.cap-caption b { font-family: var(--f-display); font-style: italic; }
.cap-caption.caught b { color: var(--gold-ink); }
.cap-next { display: grid; gap: 6px; margin: 4px 0 12px; }
.cap-next > span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cap-next small { color: var(--ink-muted); font: 700 0.78rem var(--f-ui); }
.cap-next b { font: italic 800 1.05rem var(--f-display); font-variant-numeric: tabular-nums; }
.cap-balls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.cap-ball { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.cap-ball-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, var(--raised)); color: var(--ink-2); }
.cap-ball.great .cap-ball-ico, .cap-buy.great .cap-ball-ico { color: var(--r-rara); }
.cap-ball.ultra .cap-ball-ico, .cap-buy.ultra .cap-ball-ico { color: var(--gold-ink); }
.cap-ball-txt { display: grid; min-width: 0; line-height: 1.2; }
.cap-ball-txt small { color: var(--ink-muted); font: 700 0.68rem var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-ball-txt b { font: italic 800 1.1rem var(--f-display); font-variant-numeric: tabular-nums; }
.cap-ball-txt b small { display: inline; font-size: 0.7rem; }
.cap-refill { margin: 0; }
.cap-routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.cap-route { display: grid; justify-items: center; gap: 3px; width: 100%; min-height: 64px; padding: 8px 4px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--raised); color: var(--ink); text-align: center; cursor: pointer; }
.cap-route b { font: italic 800 0.88rem/1.2 var(--f-display); text-transform: uppercase; }
.cap-route small { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-muted); font: 700 0.72rem var(--f-ui); }
.cap-route-types { display: inline-flex; gap: 4px; color: var(--eyebrow); }
.cap-route.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.cap-route.locked { border-style: dashed; background: transparent; opacity: 0.7; }
.cap-route:focus-visible, .cap-grid:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cap-logs { margin: 6px 0 0; padding: 0; list-style: none; }
.cap-log { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.cap-log:first-child { border-top: 0; }
.cap-log .glyph { grid-row: span 2; }
.cap-log.caught .glyph { color: var(--good); }
.cap-log.noball .glyph { color: var(--bad); }
.cap-log-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 700; font-size: 0.9rem; }
.cap-log time { color: var(--ink-muted); font-size: 0.72rem; }
.cap-card-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--gold-ink); }
.cap-card.unknown, .cap-card.seen { background: transparent; }
.cap-card.unknown { border-style: dashed; opacity: 0.75; }
/* Mesmo quadro para capturado, visto e "?": a silhueta é o próprio sprite com filtro, sem ladrilho. */
.cap-card .pk-thumb, .cap-q { height: 84px; }
.cap-q { display: grid; place-items: center; width: 100%; font: italic 800 2rem var(--f-display); color: var(--ink-muted); }
.pk-thumb.cap-sil .sprite-frame { filter: var(--sc-sil); }
/* PNG 30x30 com a bola em 18x18 no meio: o fundo ampliado e deslocado corta a margem de 6 px. */
.ball-img { --bs: 36px; display: block; flex: none; width: var(--bs); height: var(--bs); background: no-repeat calc(var(--bs) / -3) calc(var(--bs) / -3) / calc(var(--bs) * 5 / 3); image-rendering: pixelated; }
.ball-img.inline { display: inline-block; vertical-align: -3px; }
.toast .ball-img { align-self: center; }
.cap-ball-head { display: inline-flex; align-items: center; gap: 8px; }
.cap-ball-ico, .cap-buy .cap-ball-ico { width: 36px; height: 36px; background: none; }
.cap-log .glyph { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; }
.cap-log .glyph .ball-img { margin: auto; }
.cap-lv { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; border: 1.5px solid var(--line); font: 800 0.7rem/1.4 var(--f-ui); color: var(--ink-2); }
.cap-lv.max { border-color: var(--gold); color: var(--gold-ink); }
.cap-card .tag { margin-top: 2px; }
.cap-shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin: 8px 0 10px; padding: 0; list-style: none; }
.cap-buy { display: grid; gap: 10px; padding: 10px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.cap-buy-head { display: flex; align-items: center; gap: 10px; }
.cap-buy-head > div { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.cap-buy-head b { font: italic 800 0.95rem var(--f-display); text-transform: uppercase; }
.cap-buy-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-buy-row .btn { flex: 1; min-height: 40px; min-width: 76px; gap: 2px; flex-direction: column; line-height: 1.15; }
.cap-buy-row .price { display: inline-flex; align-items: center; gap: 3px; font-size: 0.74rem; }
.cap-chances { width: 100%; border-collapse: collapse; text-align: center; font-variant-numeric: tabular-nums; }
.cap-chances th, .cap-chances td { padding: 7px 4px; border-top: 1px solid var(--line); font-weight: 700; font-size: 0.86rem; }
.cap-chances thead th { border-top: 0; color: var(--ink-muted); font-size: 0.72rem; }
.cap-chances tbody th { text-align: left; }

@media (prefers-reduced-motion: no-preference) {
  .fx-throw .sc-ball { animation: capBallX 2.4s linear both, capBallFade 2.4s linear both; }
  .fx-throw .sc-ball .ball-img { animation: capBallY 2.4s linear both, capBallShake 2.4s linear both, capClick 2.4s linear both; }
  .fx-throw .sc-mon .sc-canvas { animation: capMonCatch 2.4s ease-in-out both; }
  .cap-scene.fx-throw::after { content: ''; position: absolute; z-index: 3; left: 50%; bottom: 20%; width: 70px; height: 70px; margin: 0 0 -20px -35px; border-radius: 50%; border: 3px solid var(--cta-1); opacity: 0; animation: capBurst 2.4s ease-out both; }
}
@media (prefers-reduced-motion: reduce) { .sc-ball { display: none; } }
@keyframes capBallX { 0% { left: -8%; } 26% { left: 50%; } 100% { left: 50%; } }
@keyframes capBallFade { 0% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes capBallY { 0% { transform: translateY(30px); } 13% { transform: translateY(-84px); } 26% { transform: translateY(-34px) rotate(300deg); } 34% { transform: translateY(2px); } 40% { transform: translateY(-9px); } 46%, 100% { transform: translateY(2px); } }
@keyframes capClick { 0%, 76% { filter: none; } 80% { filter: brightness(2.4) drop-shadow(0 0 6px var(--cta-1)); } 90%, 100% { filter: none; } }
@keyframes capBallShake { 0%, 48% { rotate: 0deg; } 54% { rotate: -16deg; } 60% { rotate: 14deg; } 66% { rotate: -10deg; } 72% { rotate: 8deg; } 78%, 100% { rotate: 0deg; } }
@keyframes capMonCatch { 0%, 24% { transform: scale(1); opacity: 1; } 32%, 84% { transform: scale(0.05); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes capBurst { 0%, 80% { opacity: 0; transform: scale(0.3); } 84% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.6); } }
@media (max-width: 420px) {
  .cap-scene { height: 208px; }
  .cap-balls { gap: 6px; }
  /* Ícone de 36 px em cima e o texto embaixo: assim o nome da bola cabe inteiro em 375 px. */
  .cap-ball { flex-direction: column; justify-content: center; padding: 8px 4px; gap: 4px; text-align: center; }
  .cap-ball-txt { justify-items: center; }
}
[data-win="captura"] .window-body, .capture-panel { grid-auto-rows: max-content; }
.capture-panel { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* ==========================================================================
   Visual mais Pokémon (spec 2026-10-25): pokébola como marca, selos de tipo, padrão de fundo,
   moldura de Pokédex nas janelas Álbum e Captura, barras de HP e tela de carregamento.
   Só apresentação. Cor entra como token nos dois temas (src/ui/pkm.js monta o HTML).
   ========================================================================== */
:root {
  /* Tipos: fundo do selo, com texto branco por cima (≥ 4,5:1). */
  --type-fogo: #c2410c; --type-agua: #1d63b8; --type-planta: #2b7a3d; --type-eletrico: #8a6a00; --type-psiquico: #9a3fc0;
  --type-lutador: #a8501f; --type-sombrio: #5a5472; --type-metal: #5f6c7a; --type-fada: #b8387f; --type-dragao: #5b4fc9;
  --type-normal: #6f6a5c; --type-pedra: #85704a; --type-gelo: #177a8f; --type-treinador: #5d6978; --type-energia: #3f7a6e;
  --type-acao: #c2410c; --type-aventura: #2b7a3d; --type-comedia: #8a6a00; --type-drama: #9a3fc0; --type-romance: #b8387f; --type-terror: #5a5472; --type-misterio: #1d63b8; --type-fantasia: #5b4fc9; --type-ficcao: #177a8f; --type-esporte: #a8501f; --type-cotidiano: #6f6a5c;
  --type-ink: #ffffff;
  /* Barra de HP: verde, amarelo e vermelho por faixa; aro do trilho. No claro as cores são mais
     fundas para dar ≥ 3:1 sobre o trilho (--surface-3). */
  --hp-high: #1a8f4d; --hp-mid: #a87a00; --hp-low: #e5483b;
  --hp-rim: rgb(11 30 51 / 0.55); --hp-shine: rgb(255 255 255 / 0.4);
  /* Reflexo da lente da Pokédex. */
  --dex-glint: rgb(255 255 255 / 0.8);
  /* Pokébola (botão de fechar, carregamento, aro do menu): metade de cima, faixa, metade de baixo e contorno. */
  --pb-red: #e63b2e; --pb-white: #ffffff; --pb-line: #0b1e33; --pb-rim: #0b1e33;
  /* Moldura de Pokédex: lente azul e as três luzinhas. */
  --dex-lens: #1f8de6; --dex-rim: #0b1e33; --dex-led-r: #e5483b; --dex-led-y: #f5b400; --dex-led-g: #2fb86b;
  /* Padrão de pokébolas em linha atrás do cenário (muito sutil). */
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%230b1e33' stroke-opacity='.07' stroke-width='1.6'%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3Cpath d='M15 24h6M27 24h6'/%3E%3Ccircle cx='24' cy='24' r='2.6'/%3E%3Ccircle cx='72' cy='72' r='9'/%3E%3Cpath d='M63 72h6M75 72h6'/%3E%3Ccircle cx='72' cy='72' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --type-fogo: #c9440d; --type-agua: #2a6fc4; --type-planta: #2d8142; --type-eletrico: #8f6e00; --type-psiquico: #a345cb;
  --type-lutador: #b3571f; --type-sombrio: #6a6486; --type-metal: #667584; --type-fada: #c23d88; --type-dragao: #6558d6;
  --type-normal: #7a7566; --type-pedra: #836e4a; --type-gelo: #177d91; --type-treinador: #66727f; --type-energia: #3f8073;
  --type-acao: #c9440d; --type-aventura: #2d8142; --type-comedia: #8f6e00; --type-drama: #a345cb; --type-romance: #c23d88; --type-terror: #6a6486; --type-misterio: #2a6fc4; --type-fantasia: #6558d6; --type-ficcao: #177d91; --type-esporte: #b3571f; --type-cotidiano: #7a7566;
  --hp-high: #2fb86b; --hp-mid: #f2b705; --hp-low: #e5483b;
  --hp-rim: rgb(234 246 255 / 0.5); --hp-shine: rgb(255 255 255 / 0.4);
  --dex-glint: rgb(255 255 255 / 0.8);
  --pb-red: #ff5a4a; --pb-white: #f4f9ff; --pb-rim: #39d5e6;
  --dex-lens: #2a9cf0; --dex-rim: #eaf6ff;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%2339d5e6' stroke-opacity='.08' stroke-width='1.6'%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3Cpath d='M15 24h6M27 24h6'/%3E%3Ccircle cx='24' cy='24' r='2.6'/%3E%3Ccircle cx='72' cy='72' r='9'/%3E%3Cpath d='M63 72h6M75 72h6'/%3E%3Ccircle cx='72' cy='72' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Selo de tipo: cor do tipo, símbolo de energia e nome. */
.type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px; vertical-align: middle;
  font: 800 0.75rem/1.4 var(--f-ui); font-style: normal; letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--type-ink); background: var(--tc); border: 1.5px solid color-mix(in srgb, var(--tc) 55%, var(--type-ink)); }
.type-badge:has(> .sr-only) { padding: 3px; }
.type-badge .tb-glyph { flex: none; }
.dialog-head h2 .type-badge { margin-left: 6px; font-size: 0.72rem; }
.dex-types { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-route { box-shadow: inset 0 3px 0 var(--tc); }
.cap-route.active { box-shadow: inset 0 3px 0 var(--tc), inset 0 0 0 1px var(--gold); }
.cap-route.locked { box-shadow: inset 0 3px 0 color-mix(in srgb, var(--tc) 45%, transparent); }
.cap-route-types { color: inherit; }
.cap-route small.cap-route-rate { font-size: 0.66rem; line-height: 1.2; text-align: center; color: var(--ink-muted); }
.cap-rate { color: var(--ink); }

/* Barras de HP: aro e brilho em cima, verde fixo. A faixa verde/amarelo/vermelho só vale com
   data-band (opt-in, para barras que caem com o tempo; hoje nenhuma usa). */
:is(.bar, .lv-bar, .track-xp-bar, .mission-bar)[data-hp] { --band: var(--hp-high); border: 1.5px solid var(--hp-rim); box-shadow: none; }
:is(.bar, .lv-bar, .track-xp-bar, .mission-bar)[data-band="mid"] { --band: var(--hp-mid); }
:is(.bar, .lv-bar, .track-xp-bar, .mission-bar)[data-band="low"] { --band: var(--hp-low); }
:is(.bar, .lv-bar, .track-xp-bar, .mission-bar)[data-hp] > i { background: var(--band); box-shadow: inset 0 2px 0 var(--hp-shine); }
.bar[data-hp] { height: 10px; }
.bar.thin[data-hp] { height: 8px; }
.lv-bar[data-hp] { height: 10px; }
.hp-lbl { flex: none; font: italic 900 0.62rem/1 var(--f-display); letter-spacing: 0.02em; color: var(--ink-2); }
.lv-hp { display: flex; align-items: center; gap: 4px; }
.lv-hp .lv-bar { flex: 1; min-width: 0; }
.hp-row { display: flex; align-items: center; gap: 8px; }
.hp-row .hp-lbl { font-size: 0.8rem; }
.hp-row .track-xp-bar { flex: 1; min-width: 0; }

/* Pokébola como marca: botão de fechar das janelas. */
.win-close { border-radius: 50%; border: 2px solid var(--pb-rim); background: linear-gradient(var(--pb-red) 0 45%, var(--pb-line) 45% 55%, var(--pb-white) 55% 100%); color: var(--pb-line); }
.win-close .i { box-sizing: content-box; width: 12px; height: 12px; padding: 3px; border-radius: 50%; background: var(--pb-white); border: 2px solid var(--pb-line); color: var(--pb-line); }
.win-close:hover, .win-close:active { background: linear-gradient(var(--pb-red) 0 45%, var(--pb-line) 45% 55%, var(--pb-white) 55% 100%); }

/* Moldura de Pokédex (Álbum e Captura): lente azul no lugar do ícone e três luzinhas ao lado do fechar. */
.dex-lens { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--dex-lens); border: 3px solid var(--dex-rim); box-shadow: 0 0 0 2px var(--glass-edge); }
.dex-lens::after { content: ""; position: absolute; left: 7px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--dex-glint); }
.dex-leds { display: flex; gap: 5px; flex: none; }
.dex-leds i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--dex-rim); background: var(--dex-led-r); }
.dex-leds i:nth-child(2) { background: var(--dex-led-y); }
.dex-leds i:nth-child(3) { background: var(--dex-led-g); }

/* Aro de pokébola atrás do ícone da aba ativa. */
.menu-ico { position: relative; isolation: isolate; }
.menu-btn.active .menu-ico::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  border: 2px solid var(--cta-ink); opacity: 0.4; background: linear-gradient(transparent calc(50% - 1px), var(--cta-ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }

/* Tela de carregamento: pokébola balançando até o app montar. */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; color: var(--ink-2); }
.boot p { margin: 0; padding: 0 20px; max-width: 28rem; text-align: center; font: italic 800 0.9rem/1.3 var(--f-display); text-transform: uppercase; }
.boot-ball { position: relative; width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 0 0 4px var(--pb-rim);
  background: linear-gradient(var(--pb-red) 0 45%, var(--pb-line) 45% 55%, var(--pb-white) 55% 100%); animation: boot-wobble 1.8s ease-in-out infinite; }
.boot-ball::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--pb-white); border: 4px solid var(--pb-line); }
@keyframes boot-wobble { 0%, 55%, 100% { transform: rotate(0); } 12% { transform: rotate(-16deg); } 26% { transform: rotate(14deg); } 40% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ball { animation: none; } }

/* Estados vazios: silhueta de Pokémon com o texto. */
.pk-sil { flex: none; color: color-mix(in srgb, var(--ink-muted) 50%, transparent); }
.counter-empty .pk-sil { margin-bottom: 2px; }
.pk-empty .pk-sil { display: block; margin: 0 auto 8px; }

@media (max-width: 420px) {
  .lv-hp .hp-lbl { font-size: 0.62rem; }
  .dex-leds { gap: 4px; }
  .dex-leds i { width: 9px; height: 9px; }
  .window.dex-frame .window-head { gap: 8px; }
}

/* ==========================================================================
   Sensação de jogo (spec 2026-10-25): números flutuando, cena de nível e faixa de captura rara.
   Só apresentação. Cor entra como token nos dois temas; a cena de nível é escura nos dois.
   ========================================================================== */
:root {
  --float-ink: #ffe066; --float-xp: #8ff0fb; --float-cap: #ffffff; --float-edge: #0b1e33; /* número com contorno marinho: legível sobre claro e escuro */
  --cele-bg-1: #06111f; --cele-bg-2: #0f2b45; --cele-ink: #eaf6ff; --cele-muted: #a9c4dc; --cele-edge: #39d5e6; --cele-glow: rgb(255 203 5 / 0.22);
  --cele-surface: rgb(255 255 255 / 0.07); --cele-surface-hi: rgb(255 255 255 / 0.1); --cele-well: rgb(0 0 0 / 0.3); --cele-track: rgb(0 0 0 / 0.38); --cele-shine: rgb(255 255 255 / 0.35);
}
:root[data-theme="dark"] {
  --float-ink: #ffe066; --float-xp: #8ff0fb; --float-cap: #ffffff; --float-edge: #04101c;
  --cele-bg-1: #06111f; --cele-bg-2: #0f2b45; --cele-ink: #eaf6ff; --cele-muted: #a9c4dc; --cele-edge: #39d5e6; --cele-glow: rgb(255 203 5 / 0.22);
  --cele-surface: rgb(255 255 255 / 0.07); --cele-surface-hi: rgb(255 255 255 / 0.1); --cele-well: rgb(0 0 0 / 0.3); --cele-track: rgb(0 0 0 / 0.38); --cele-shine: rgb(255 255 255 / 0.35);
}

/* Números flutuando: camada fixa e decorativa, abaixo dos modais. Cada número é um span aria-hidden. */
.floaters { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); pointer-events: none; overflow: hidden; }
.float-num { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: italic 800 1rem/1 var(--f-display); color: var(--float-ink);
  -webkit-text-stroke: 3px var(--float-edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--float-edge);
  animation: float-up 1300ms cubic-bezier(.2, .8, .3, 1) forwards; }
.float-num.fn-xp { color: var(--float-xp); font-size: 0.92rem; }
.float-num.fn-credits { color: var(--yen-hi); } /* ienes: dourado-cobre claro, legível no contorno marinho */
.float-num.fn-gems { color: var(--diamond); }
.float-num.fn-capture { color: var(--float-cap); font-size: 0.9rem; }
@keyframes float-up { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); }
  70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
/* Movimento reduzido: o número fica parado e só esmaece (vale mais que a regra global de 1 ms). */
@media (prefers-reduced-motion: reduce) {
  .float-num { animation: float-fade 1300ms linear forwards !important; transform: translate(-50%, -80%); }
  @keyframes float-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
}

/* Cena de nível: fundo escuro nos dois temas, título dourado, recompensas em vidro escuro. */
.overlay.ls-overlay { background: radial-gradient(ellipse at 50% 38%, var(--cele-bg-2), var(--cele-bg-1) 72%); backdrop-filter: none; overflow: hidden auto; place-items: safe center; }
/* A cena nunca é um contêiner de rolagem (sem barra à direita nem linha cinza embaixo): quem rola é o overlay. */
.level-scene, .return-scene { position: relative; isolation: isolate; width: min(440px, 100%); display: grid; justify-items: center; gap: 14px; text-align: center; color: var(--cele-ink);
  padding: 8px 4px; overflow: visible; scrollbar-width: none; border: 0; background: none; box-shadow: none; max-height: none; animation: none; }
.level-scene::-webkit-scrollbar, .return-scene::-webkit-scrollbar { display: none; }
.overlay.ls-overlay { scrollbar-width: none; }
.overlay.ls-overlay::-webkit-scrollbar { display: none; }
.ls-rays { position: absolute; z-index: -1; left: 0; right: 0; top: 50%; translate: 0 -50%; width: min(280px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(closest-side, var(--cele-glow), transparent); pointer-events: none; }
.ls-eyebrow { font: italic 800 0.78rem/1 var(--f-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cele-edge); }
.ls-title { margin: 0; font: italic 800 clamp(2.6rem, 14vw, 4.2rem)/1 var(--f-display); text-transform: uppercase; color: var(--float-ink);
  -webkit-text-stroke: 4px var(--float-edge); paint-order: stroke fill; text-shadow: 0 4px 0 var(--float-edge); outline: none; }
.ls-rewards { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; width: min(340px, 100%); }
.ls-reward { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; text-align: left; font: 800 0.95rem/1.2 var(--f-ui);
  color: var(--cele-ink); background: var(--cele-surface); border: 1.5px solid color-mix(in srgb, var(--cele-edge) 55%, transparent); }
.ls-reward .i { flex: none; color: var(--cele-edge); }
.ls-reward.gold { border-color: var(--float-ink); }
.ls-reward.gold .i { color: var(--float-ink); }
.ls-actions { display: grid; gap: 8px; width: min(340px, 100%); margin-top: 6px; }
.level-scene .btn.ghost, .return-scene .btn.ghost { color: var(--cele-ink); border: 1.5px solid color-mix(in srgb, var(--cele-edge) 55%, transparent); }
@media (hover: hover) and (pointer: fine) { .level-scene .btn.ghost:hover:not(:disabled), .return-scene .btn.ghost:hover:not(:disabled) { color: var(--cele-ink); background: var(--cele-surface-hi); } }
.level-scene :focus-visible, .return-scene :focus-visible { outline: 3px solid var(--float-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ls-title { animation: ls-pop 520ms cubic-bezier(.2, .9, .3, 1.2) both; }
  .ls-eyebrow, .ls-actions { animation: ls-rise 400ms ease-out 120ms both; }
  .ls-reward { animation: ls-rise 360ms ease-out both; animation-delay: calc(240ms + var(--i, 0) * 90ms); }
  .ls-rays { animation: ls-glow 2.8s ease-in-out infinite; }
}
@keyframes ls-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes ls-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes ls-glow { 50% { transform: scale(1.12); opacity: 0.8; } }

/* Resumo da volta: a mesma cena escura nos dois temas. Título com o tempo fora, soneca, blocos e a ação principal. */
.rv-eyebrow { font: italic 800 0.78rem/1 var(--f-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cele-edge); }
.rv-title { margin: 0; max-width: 100%; font: italic 800 clamp(2rem, 10vw, 3rem)/1.05 var(--f-display); text-transform: uppercase; color: var(--float-ink);
  -webkit-text-stroke: 4px var(--float-edge); paint-order: stroke fill; text-shadow: 0 4px 0 var(--float-edge); outline: none; overflow-wrap: anywhere; }
.rv-nap { width: min(360px, 100%); display: grid; gap: 8px; text-align: left; }
.rv-nap-head { display: flex; align-items: center; gap: 8px; font: 800 0.9rem/1.2 var(--f-ui); color: var(--cele-muted); }
.rv-nap-head .i { color: var(--cele-edge); }
.rv-nap-head b { margin-left: auto; color: var(--cele-ink); font-variant-numeric: tabular-nums; }
.rv-nap-bar { height: 12px; border-radius: 99px; overflow: hidden; background: var(--cele-track); border: 1.5px solid color-mix(in srgb, var(--cele-edge) 50%, transparent); }
.rv-nap-bar > i { display: block; height: 100%; width: var(--f); border-radius: 99px; background: var(--cele-edge); box-shadow: inset 0 2px 0 var(--cele-shine); }
.rv-nap.full .rv-nap-bar { border-color: var(--float-ink); }
.rv-nap.full .rv-nap-bar > i { background: var(--float-ink); }
.rv-hint { margin: 0; display: flex; align-items: start; gap: 8px; text-align: left; font: 700 0.82rem/1.35 var(--f-ui); color: var(--float-ink); }
.rv-hint .i { flex: none; margin-top: 2px; }
.rv-hint.warn { width: min(360px, 100%); color: var(--cele-muted); }
.rv-quiet { margin: 0; font: 700 0.95rem/1.4 var(--f-ui); color: var(--cele-muted); }
.rv-blocks { width: min(360px, 100%); display: grid; gap: 8px; }
.rv-block { display: grid; gap: 6px; padding: 10px 14px 12px; border-radius: 14px; text-align: left; background: var(--cele-surface); border: 1.5px solid color-mix(in srgb, var(--cele-edge) 45%, transparent); }
.rv-block.loja { border-color: var(--float-ink); }
.rv-block-head { display: flex; align-items: center; gap: 8px; }
.rv-block-head h3 { margin: 0; font: italic 800 0.8rem/1 var(--f-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cele-muted); }
.rv-ico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--cele-edge); background: var(--cele-well); }
.rv-block.loja .rv-ico { color: var(--float-ink); }
.rv-stats { display: grid; gap: 2px; }
.rv-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 700 0.9rem/1.35 var(--f-ui); color: var(--cele-ink); }
.rv-stat b { font: italic 800 1.15rem/1.2 var(--f-display); color: var(--cele-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-stat.gold b, .rv-block.loja .rv-stat b { color: var(--float-ink); }
.rv-found { width: min(360px, 100%); display: grid; gap: 8px; justify-items: center; }
.rv-found .cards { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; text-align: left; }
.rv-found .cards > * { width: 62px; }
/* Em tela larga os blocos vão em duas colunas, para o resumo caber sem rolar. */
@media (min-width: 760px) {
  .return-scene { width: min(640px, 100%); }
  .rv-blocks { width: 100%; grid-template-columns: 1fr 1fr; }
  .rv-block:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Os botões ficam colados no fim da tela quando o resumo é mais alto que ela. */
.rv-actions { position: sticky; bottom: 0; z-index: 1; display: grid; gap: 8px; width: min(380px, calc(100% + 8px)); margin-top: 6px; padding: 14px 4px 4px;
  background: linear-gradient(to bottom, transparent, var(--cele-bg-1) 38%); }
.rv-actions .btn { width: min(340px, 100%); justify-self: center; }
@media (prefers-reduced-motion: no-preference) {
  .rv-title { animation: ls-pop 520ms cubic-bezier(.2, .9, .3, 1.2) both; }
  .rv-eyebrow, .rv-nap, .rv-actions { animation: ls-rise 400ms ease-out 120ms both; }
  .rv-block { animation: ls-rise 360ms ease-out both; animation-delay: calc(240ms + var(--i, 0) * 110ms); }
  .rv-nap-bar > i { animation: rv-fill 900ms cubic-bezier(.2, .8, .3, 1) 200ms both; }
}
@keyframes rv-fill { from { width: 0; } }

/* Faixa dourada de captura rara, no topo; tocar abre a Captura. */
#cap-banners { position: fixed; z-index: calc(var(--z-modal) - 1); /* abaixo dos modais: tocar na faixa nunca fecha uma janela */ top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%);
  width: min(420px, calc(100% - 24px)); pointer-events: none; }
.cap-banner { pointer-events: auto; width: 100%; display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 6px; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); border: 1.5px solid var(--cta-lip);
  box-shadow: 0 3px 0 var(--cta-lip), var(--shadow-pop); font: 800 0.95rem/1.2 var(--f-ui); }
.cap-banner .cb-sprite { flex: none; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: rgb(255 255 255 / 0.4); }
.cap-banner .pk-thumb { width: 56px; height: 56px; }
.cap-banner .cb-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-banner .cb-txt b { font-family: var(--f-display); font-style: italic; font-weight: 800; }
.cap-banner:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .cap-banner { animation: cap-banner-in 320ms cubic-bezier(.2, .9, .3, 1.1) backwards; } }
@keyframes cap-banner-in { from { opacity: 0; transform: translateY(-16px); } }

/* ==========================================================================
   Tela inicial no computador (a partir de 1200 px de largura e 700 de altura)
   Painel de mangá: moldura marinho, papel creme com traço de nanquim nos cartões, menu lateral com a
   seção aberta num pincel dourado, loja emoldurada, "Pronto para abrir", faixa do álbum e o chat.
   Abaixo disso nada daqui aparece e vale o HUD do celular.
   ========================================================================== */
:root {
  --desk-frame: #dcecfa;          /* fundo do painel */
  --desk-frame-2: #c4ddf2;
  --desk-edge: rgb(26 112 131 / 0.45); /* filete das molduras */
  --desk-paper: #fffaf0;          /* papel dos cartões (pacotes, álbum, chat) */
  --desk-paper-2: #f3ead8;
  --desk-ink: #14161c;            /* traço de nanquim e texto sobre o papel */
  --desk-ink-2: #4a4f5c;
  --desk-ink-line: rgb(20 22 28 / 0.18);
  --desk-side: #0f2236;           /* menu lateral (escuro nos dois temas, como o desenho) */
  --desk-side-ink: #eaf3ff;
  --desk-side-muted: #9fb4cc;
  --desk-art-tint: #0f2236;
  --desk-title: #ffffff;          /* título da faixa, sobre a faixa escura */
  --desk-banner: #0f2236;
  --desk-xp: #f5b400;
  --desk-bar: #2f8cf0;            /* barras de progresso do papel */
  --desk-online: #3cc47a;
  --gem-diamond: #f5b400;
  --gem-star: #2f8cf0;
  --gem-shiny: #a560f0;
  --gem-crown: #ff8a00;
  --chat-1: #d9480f;              /* cores dos apelidos no chat (≥ 4,5:1 sobre o papel) */
  --chat-2: #1c6fc2;
  --chat-3: #b8336a;
  --chat-4: #6d48d8;
  --chat-5: #1f7a3a;
  --chat-6: #a35c00;
  --fuji-sky-1: #cfe4f7;          /* panorama do Monte Fuji na barra de cima (dia no claro) */
  --fuji-sky-2: #e4f1fc;
  --fuji-tone: rgb(29 58 87 / 0.08);
  --fuji-streak: rgb(255 255 255 / 0.8);
  --fuji-star: rgb(255 255 255 / 0);
  --fuji-cloud: #ffffff;
  --fuji-cloud-line: #a9c6e2;
  --fuji-body: #4a6f9c;
  --fuji-rim: #2f4f78;
  --fuji-snow: #ffffff;
  --fuji-tree: #9ab8d6;
}
:root[data-theme="dark"] {
  --desk-frame: #0b1a2c;
  --desk-frame-2: #07121f;
  --desk-edge: rgb(57 213 230 / 0.32);
  --desk-paper: #f7f1e3;
  --desk-paper-2: #e9dfc9;
  --desk-ink: #14161c;
  --desk-ink-2: #4a4f5c;
  --desk-ink-line: rgb(20 22 28 / 0.2);
  --desk-side: #0b1a2c;
  --desk-art-tint: #0b1a2c;
  --desk-banner: #0d1f33;
  --fuji-sky-1: #132a4a;          /* noite azul, como no desenho */
  --fuji-sky-2: #2f5a8e;
  --fuji-tone: rgb(255 255 255 / 0.05);
  --fuji-streak: rgb(190 214 240 / 0.28);
  --fuji-star: rgb(230 240 255 / 0.85);
  --fuji-cloud: #8fa9cb;
  --fuji-cloud-line: #5a7aa3;
  --fuji-body: #0f1f36;
  --fuji-rim: #7f9dc4;
  --fuji-snow: #c8d8ec;
  --fuji-tree: #0b1a2c;
}

.desk, .desk-chat { display: none; }

@media (min-width: 1200px) and (min-height: 700px) {
  .game:not(.arranging) {
    --desk-side-w: 214px;
    --desk-chat-w: clamp(300px, 22vw, 380px);
    --desk-packs-w: clamp(270px, 19vw, 330px);
    --desk-top-h: 74px;
    --desk-banner-h: 84px;
    --desk-album-h: clamp(250px, 31vh, 320px);
    --desk-gap: 10px;
    display: grid; gap: var(--desk-gap); padding: 0 var(--desk-gap) var(--desk-gap) 0;
    grid-template-columns: var(--desk-side-w) minmax(0, 1fr) var(--desk-packs-w) var(--desk-chat-w);
    grid-template-rows: var(--desk-top-h) var(--desk-banner-h) minmax(0, 1fr) var(--desk-album-h);
    background: radial-gradient(120% 80% at 60% 0%, var(--desk-frame), var(--desk-frame-2));
  }
  .game:not(.arranging)::before { display: none; }
  .game:not(.arranging) .game-hud, .game:not(.arranging) .desk { display: contents; }
  .game:not(.arranging) .game-win { grid-column: 1; grid-row: 1; width: 0; height: 0; } /* o conteúdo é fixo: a caixa não ocupa lugar */
  .game:not(.arranging) :is(.hud-top, .hud-float, .shop-tools, .dock, .menu) { display: none; }

  /* Loja emoldurada (o canvas acompanha o tamanho da caixa) */
  .game:not(.arranging) .game-shop { position: relative; inset: auto; grid-column: 2; grid-row: 3; min-height: 0;
    border: 2px solid var(--desk-edge); border-radius: 8px; background: linear-gradient(180deg, var(--scene-top), var(--scene-bottom));
    box-shadow: inset 0 0 0 3px var(--desk-frame-2), var(--shadow-soft); }
  .game:not(.arranging) .game-shop { --shop-fit: 1; } /* a sala inteira cabe no quadro (storefront.js) */
  .game:not(.arranging) .game-shop canvas { filter: drop-shadow(0 16px 20px rgb(0 0 0 / 0.35)); }

  /* Próximo passo: no alto da loja */
  .game:not(.arranging) .step-chip { position: fixed; z-index: 11; top: calc(var(--desk-top-h) + var(--desk-banner-h) + var(--desk-gap) * 2 + 14px);
    left: calc(var(--desk-side-w) + var(--desk-gap) + 16px); right: auto; margin: 0; width: min(420px, calc(100vw - var(--desk-side-w) - var(--desk-packs-w) - var(--desk-chat-w) - 80px)); }

  /* ---------- Menu lateral ---------- */
  .desk-side { grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 40; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--desk-side); color: var(--desk-side-ink); border-right: 2px solid var(--desk-edge); }
  /* Logo: letra de pincel com contorno grosso de nanquim, coroa sobre o "Idle" e o nome em katakana */
  .desk-brand { display: grid; justify-items: center; gap: 6px; padding: 30px 10px 20px; transform: rotate(-6deg); }
  .brand-name { display: flex; align-items: baseline; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 2.3rem; line-height: 1; letter-spacing: -0.03em; }
  .brand-name b, .brand-name i { font-weight: 900; -webkit-text-stroke: 7px #000; paint-order: stroke fill; text-shadow: 3px 4px 0 #000; }
  .brand-name b { color: var(--desk-side-ink); }
  .brand-name i { position: relative; font-style: italic; color: var(--gold); margin-left: 1px; }
  .brand-crown { position: absolute; top: -21px; left: 2px; transform: rotate(-10deg); color: var(--gold); line-height: 0; }
  .brand-crown .i { fill: var(--gold); stroke: #000; stroke-width: 1.6; }
  .brand-kana { font: 800 0.92rem/1 "Yu Gothic", "Meiryo", "Noto Sans JP", var(--f-ui); letter-spacing: 0.12em; color: var(--desk-side-ink); }
  .desk-brand .beta-chip { margin-top: 2px; border: 1.5px solid #000; background: var(--gold); color: var(--cta-ink); font-size: 0.66rem; box-shadow: 2px 2px 0 #000; }
  .desk-nav { position: relative; z-index: 1; display: grid; gap: 4px; padding: 6px 0; }
  .desk-nav-btn { position: relative; display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 18px 0 26px; border: 0; background: none;
    color: var(--desk-side-ink); font: 700 1.08rem/1 var(--f-ui); text-align: left; transition: background 120ms, color 120ms; }
  .desk-nav-btn .i { flex: none; color: var(--desk-side-ink); stroke-width: 2; }
  .desk-nav-btn.active { color: #14161c; background: var(--gold); margin-right: 18px; font-weight: 800;
    clip-path: polygon(0 6%, 92% 0, 100% 22%, 95% 50%, 100% 80%, 90% 100%, 0 94%); }
  .desk-nav-btn.active .i { color: #14161c; }
  .desk-nav-btn .pip { position: absolute; top: 12px; left: 42px; width: 10px; height: 10px; border-radius: 50%; background: var(--stamp); box-shadow: 0 0 0 2px var(--desk-side); }
  .desk-nav-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  @media (hover: hover) and (pointer: fine) { .desk-nav-btn:not(.active):hover { background: rgb(255 255 255 / 0.07); } }
  /* Arte de mangá no pé do menu: ilustração em tons de nanquim que some para cima */
  .desk-art { position: relative; flex: 1; min-height: 120px; margin-top: 8px;
    background: url(assets/anime/side.webp) 30% 0 / 150% auto no-repeat;
    filter: grayscale(1) contrast(1.35) brightness(0.9);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); opacity: 0.55; }
  .desk-art-kana { position: absolute; top: 28%; right: 14px; writing-mode: vertical-rl; font: 900 1.7rem/1 var(--f-display); color: #fff; text-shadow: 2px 2px 0 #000; }
  .desk-art-motto { position: absolute; left: 14px; bottom: 26px; transform: rotate(-14deg); font: italic 800 1rem/1.15 var(--f-display); color: #fff; text-shadow: 2px 2px 0 #000; }

  /* ---------- Barra de cima ---------- */
  .desk-top { grid-column: 2 / -1; grid-row: 1; position: relative; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 0 6px 0 22px;
    border-bottom: 2px solid var(--desk-edge); color: var(--ink); }
  .desk-level { position: relative; display: flex; align-items: center; gap: 16px; padding: 4px 10px 4px 4px; border: 0; border-radius: 40px; background: none; color: inherit; text-align: left; }
  .desk-face, .desk-me { flex: none; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: var(--surface-3); border: 3px solid var(--desk-edge); box-shadow: 0 0 0 2px var(--desk-frame-2); }
  .desk-face img, .desk-me img { width: 100%; height: 100%; object-fit: cover; }
  .desk-lv { display: grid; gap: 7px; min-width: 260px; }
  .desk-lv b { font: 800 1.15rem/1 var(--f-ui); }
  /* Apelido antes do nível, cortado com reticências se for longo */
  .desk-who { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .desk-who .desk-nick { color: var(--cta-1); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .desk-xp { display: flex; align-items: center; gap: 12px; }
  .desk-xp-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; box-shadow: inset 0 0 0 1px var(--desk-edge); }
  .desk-xp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cta-1), var(--desk-xp)); }
  .desk-xp small { font: 700 0.85rem/1 var(--f-ui); color: var(--ink-2); text-shadow: 0 1px 3px var(--desk-frame-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .desk-level .badge-count { top: 0; left: 46px; right: auto; }
  /* Panorama ukiyo-e atrás da barra inteira (o conteúdo fica por cima) */
  .desk-sky { position: absolute; inset: 0 0 2px; z-index: 0; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .desk-top > :not(.desk-sky) { position: relative; z-index: 1; }
  .fuji { display: block; width: 100%; height: 100%; }
  .fj-streak rect { fill: var(--fuji-streak); }
  .fj-star circle { fill: var(--fuji-star); }
  .fj-cloud circle, .fj-cloud rect { fill: var(--fuji-cloud); stroke: var(--fuji-cloud-line); stroke-width: 1.2; paint-order: stroke; }
  .fj-body { fill: var(--fuji-body); }
  .fj-snow { fill: var(--fuji-snow); }
  .fj-ridge { fill: none; stroke: var(--fuji-body); stroke-width: 1.6; stroke-linecap: round; opacity: 0.55; }
  .fj-rim { fill: none; stroke: var(--fuji-rim); stroke-width: 1.6; }
  .fj-shade { fill: var(--fuji-body); opacity: 0.28; } /* lado direito da neve na sombra */
  .fj-tree circle, .fj-ground { fill: var(--fuji-tree); }
  .desk-wallet { display: flex; gap: 12px; margin-left: auto; }
  .desk-coin { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 6px 0 10px; border-radius: 12px;
    background: var(--glass); border: 1.5px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
  .desk-coin b { min-width: 64px; font: 800 1.12rem/1 var(--f-ui); font-variant-numeric: tabular-nums; }
  .coin-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #3a2a00; }
  .coin-ico.gold { background: radial-gradient(circle at 35% 30%, #ffe680, #f0a800); box-shadow: inset 0 -2px 0 #b47f00; }
  .coin-ico.diamond { color: var(--diamond-ink); background: radial-gradient(circle at 35% 30%, var(--diamond-hi), var(--diamond)); box-shadow: inset 0 -2px 0 var(--diamond-lip); }
  .coin-ico.yen { color: var(--yen-ink); background: radial-gradient(circle at 35% 30%, var(--yen-hi), var(--yen)); box-shadow: inset 0 -2px 0 var(--yen-lip); }
  .desk-plus { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--cta-ink);
    background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); box-shadow: inset 0 -3px 0 var(--cta-lip); }
  .desk-plus:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--cta-lip); }
  .desk-gear { width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: var(--eyebrow); margin-left: 6px; }
  .desk-me { padding: 0; cursor: pointer; }
  .desk-discord { flex: none; width: 50px; height: 50px; display: grid; place-items: center; margin-left: 6px; border-radius: 12px; color: var(--discord-ink);
    background: var(--discord); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.25), var(--shadow-soft); }
  .desk-discord:active { transform: translateY(2px); }
  .desk-discord:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .desk-top :is(button, .desk-plus):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { .desk-gear:hover { background: var(--hover-tint); } .desk-level:hover .desk-face, .desk-me:hover { border-color: var(--eyebrow); } }

  /* ---------- Faixa do título ---------- */
  .desk-banner { grid-column: 2 / 4; grid-row: 2; position: relative; display: flex; align-items: center; gap: 16px; padding: 0 22px; overflow: hidden;
    background: var(--desk-banner); color: var(--desk-title); border: 2px solid var(--desk-edge); border-radius: 8px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 2% 100%, 0 82%); }
  .banner-ico { flex: none; color: var(--desk-title); }
  .banner-ico .i { stroke-width: 1.6; }
  .banner-txt { position: relative; z-index: 1; min-width: 0; }
  .banner-title { margin: 0; font: italic 900 clamp(1.7rem, 2.3vw, 2.5rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; text-shadow: 3px 3px 0 #000; white-space: nowrap; }
  .banner-title em { font-style: italic; color: var(--gold); }
  .banner-sub { margin: 6px 0 0; font: 600 1rem/1.2 var(--f-ui); color: var(--desk-side-muted); }
  .banner-art { position: absolute; top: 0; bottom: 0; right: 0; width: 46%;
    background: url(assets/anime/banner.webp) 50% 22% / 120% auto no-repeat;
    filter: grayscale(1) contrast(1.5) brightness(1.05); opacity: 0.32;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
  .banner-stamp { position: absolute; z-index: 2; top: 8px; right: 14px; display: block; padding: 6px 30px 6px 10px; transform: rotate(-8deg);
    font: italic 900 0.82rem/1.05 var(--f-display); text-transform: uppercase; color: var(--desk-ink); background: var(--desk-paper); border: 2px solid var(--desk-ink); }
  .banner-stamp .i { position: absolute; right: 6px; bottom: 6px; color: var(--desk-ink); }

  /* ---------- Botões sobre a loja ---------- */
  .desk-shopbar { grid-column: 2; grid-row: 3; align-self: end; justify-self: start; position: relative; z-index: 5; display: flex; gap: 10px; margin: 0 0 16px 16px; }
  .desk-chip { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 10px; color: var(--ink);
    font: 700 1rem/1 var(--f-ui); background: var(--glass); border: 1.5px solid var(--glass-edge); box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 120ms ease, background 120ms; }
  .desk-chip .i { color: var(--gold); stroke-width: 2.1; }
  .desk-chip b { font-variant-numeric: tabular-nums; color: var(--gold-ink); }
  .desk-chip.round { width: 48px; padding: 0; justify-content: center; }
  .desk-chip.round .i { color: var(--eyebrow); }
  .desk-chip:disabled { opacity: 0.7; cursor: default; }
  .desk-chip:active:not(:disabled) { transform: translateY(2px); }
  .desk-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { .desk-chip:hover:not(:disabled) { background: var(--glass-solid); } }

  /* ---------- Pronto para abrir ---------- */
  .desk-packs { grid-column: 3; grid-row: 3; position: relative; z-index: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px;
    margin-top: calc(-1 * var(--desk-banner-h) / 2); min-height: 0; padding: 18px 18px 16px;
    background: var(--desk-paper); color: var(--desk-ink); border: 3px solid var(--desk-ink); border-radius: 4px;
    box-shadow: 0 0 0 4px var(--desk-paper), 0 0 0 6px var(--desk-edge), var(--shadow-pop);
    background-image: radial-gradient(var(--desk-ink-line) 1px, transparent 1.4px); background-size: 7px 7px; }
  .packs-title { margin: 0; transform: rotate(-4deg); font: italic 900 clamp(1.6rem, 2vw, 2.1rem)/0.95 var(--f-display); text-transform: uppercase; color: var(--desk-ink); }
  .packs-title em { display: block; font-size: 1.45em; font-style: italic; color: var(--stamp); }
  .packs-count { position: absolute; top: 62px; right: -8px; z-index: 2; padding: 6px 14px; transform: rotate(-6deg);
    font: italic 800 0.95rem/1 var(--f-display); color: #fff; background: var(--stamp); clip-path: polygon(6% 0, 100% 0, 96% 100%, 0 100%); }
  /* O leque mede a própria caixa (container de tamanho): em tela baixa os pacotes encolhem pela altura
     em vez de subir por cima do título. 0,6 da altura dá a largura do pacote (proporção 5 / 7,4). */
  .packs-fan { position: relative; min-height: 0; display: flex; justify-content: center; align-items: center; container-type: size; }
  .desk-pack { width: min(40%, 120px, 60cqh); flex: none; margin: 0 -7%; transform: rotate(calc((var(--i) - 1) * 8deg)) translateY(calc(var(--i) * 0px));
    filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.35)); transition: transform 200ms; }
  .packs-fan.n1 .desk-pack { transform: rotate(-3deg); width: min(46%, 130px, 62cqh); }
  .packs-fan.n2 .desk-pack { transform: rotate(calc(var(--i) * 10deg - 5deg)); }
  .packs-fan.n3 .desk-pack:nth-child(2) { z-index: 1; transform: translateY(-8px); }
  .desk-pack.ghost { opacity: 0.4; filter: grayscale(1); }
  .packs-open { justify-content: center; gap: 10px; min-height: 54px; font: italic 900 clamp(1rem, 1.35vw, 1.25rem)/1 var(--f-display); text-transform: uppercase; white-space: nowrap; border: 2px solid var(--desk-ink); }
  .packs-next { display: flex; align-items: center; gap: 12px; color: var(--desk-ink); }
  .packs-next .i { flex: none; }
  .packs-next-txt { flex: 1; display: grid; gap: 6px; min-width: 0; }
  .packs-next small { font: 700 0.92rem/1 var(--f-ui); color: var(--desk-ink-2); }
  .packs-next small b { color: var(--desk-ink); font-variant-numeric: tabular-nums; }
  .packs-bar { display: block; height: 9px; border-radius: 999px; background: var(--desk-paper-2); box-shadow: inset 0 0 0 1px var(--desk-ink-line); overflow: hidden; }
  .packs-bar i { display: block; height: 100%; border-radius: inherit; background: var(--desk-bar); transition: width 1s linear; }

  /* ---------- Seu álbum ---------- */
  .desk-album { grid-column: 2 / 4; grid-row: 4; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; padding: 14px 18px 18px;
    background: var(--desk-paper); color: var(--desk-ink); border: 2px solid var(--desk-edge); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--desk-paper-2); }
  .album-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .album-ico { color: var(--desk-ink); }
  .album-head h2 { margin: 0; font: italic 900 clamp(1.4rem, 1.8vw, 1.9rem)/1 var(--f-display); text-transform: uppercase; color: var(--desk-ink); white-space: nowrap; }
  .album-sum { font: 700 0.95rem/1 var(--f-ui); color: var(--desk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .album-all { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 9px;
    font: 700 0.95rem/1 var(--f-ui); color: var(--desk-ink); background: var(--desk-paper); border: 1.5px solid var(--desk-ink); white-space: nowrap; }
  .album-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; min-height: 0; }
  .album-cover { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border-radius: 6px; text-align: left;
    border: 3px solid var(--desk-ink); background: color-mix(in srgb, var(--cover) 60%, #000); box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.5);
    transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1); }
  .ac-art { position: absolute; inset: 0; background-size: cover; background-position: 50% 18%; }
  .ac-art.none { background: linear-gradient(160deg, var(--cover), #000); }
  .ac-new { position: absolute; top: 6px; left: 6px; min-width: 24px; height: 26px; padding: 0 6px; display: grid; place-items: center;
    font: 900 0.9rem/1 var(--f-display); color: #fff; background: var(--stamp); border: 2px solid #fff; border-radius: 4px; }
  .ac-gem { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; clip-path: polygon(50% 100%, 0 38%, 22% 6%, 78% 6%, 100% 38%);
    background: linear-gradient(160deg, #fff 0 18%, var(--gem) 40%, color-mix(in srgb, var(--gem) 55%, #000)); filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.6)); }
  .ac-gem.diamond { --gem: var(--gem-diamond); }
  .ac-gem.star { --gem: var(--gem-star); }
  .ac-gem.shiny { --gem: var(--gem-shiny); }
  .ac-gem.crown { --gem: var(--gem-crown); }
  .ac-foot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 34px 10px 10px;
    background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.85) 45%); color: #fff; }
  .ac-foot b { font: italic 900 1.05rem/1.05 var(--f-display); text-transform: uppercase; text-align: center; text-shadow: 2px 2px 0 #000;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .ac-prog { display: flex; align-items: center; gap: 8px; }
  .ac-bar { flex: 1; height: 7px; border-radius: 999px; background: rgb(255 255 255 / 0.25); overflow: hidden; }
  .ac-bar i { display: block; height: 100%; border-radius: inherit; background: var(--desk-bar); }
  .ac-prog small { font: 700 0.78rem/1 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .album-cover:focus-visible, .album-all:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) {
    .album-cover:hover { transform: translateY(-4px) rotate(-1deg); }
    .album-all:hover { background: var(--desk-paper-2); }
  }

  /* ---------- Chat ---------- */
  .game:not(.arranging) .desk-chat { grid-column: 4; grid-row: 2 / -1; position: relative; z-index: 40; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0;
    border: 2px solid var(--desk-edge); border-radius: 8px; background: var(--desk-banner); overflow: hidden; }
  .desk-chat.folded { grid-row: 2; align-self: start; }
  .desk-chat.folded .chat-panel { display: none; }
  .chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 10px 16px; color: var(--desk-title); }
  .chat-ico .i { stroke-width: 2; }
  .chat-head h2 { margin: 0; font: italic 900 2rem/1 var(--f-display); text-transform: uppercase; text-shadow: 3px 3px 0 #000; }
  .chat-fold { margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: var(--desk-title); background: rgb(255 255 255 / 0.08); border: 1px solid var(--desk-edge); }
  .chat-fold .i { transform: rotate(90deg); transition: transform 160ms; }
  .desk-chat.folded .chat-fold .i { transform: rotate(-90deg); }
  .chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
  .chat-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 10px 10px; }
  .chat-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px; border-radius: 8px;
    font: 700 1rem/1 var(--f-ui); color: var(--desk-title); background: rgb(255 255 255 / 0.06); border: 1px solid var(--desk-edge); }
  .chat-tabs button[aria-selected="true"] { color: var(--cta-ink); background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); border-color: var(--cta-lip); }
  .chat-scroll { min-height: 0; overflow-y: auto; background: var(--desk-paper); color: var(--desk-ink); overscroll-behavior: contain; scrollbar-width: thin; }
  .chat-list { list-style: none; margin: 0; padding: 0; }
  .chat-msg { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--desk-ink-line); }
  .chat-face { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--desk-paper-2); border: 2px solid var(--desk-ink); }
  .chat-face img { width: 100%; height: 100%; object-fit: cover; }
  .chat-face b { font: 900 1.4rem/1 var(--f-display); }
  .chat-body { display: grid; gap: 4px; min-width: 0; }
  .chat-meta { display: flex; align-items: baseline; gap: 8px; }
  .chat-name { font: 800 1.08rem/1.1 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-name.tone-1 { color: var(--chat-1); } .chat-name.tone-2 { color: var(--chat-2); } .chat-name.tone-3 { color: var(--chat-3); }
  .chat-name.tone-4 { color: var(--chat-4); } .chat-name.tone-5 { color: var(--chat-5); } .chat-name.tone-6 { color: var(--chat-6); }
  .chat-meta time { margin-left: auto; font: 600 0.82rem/1 var(--f-ui); color: var(--desk-ink-2); }
  .chat-text { margin: 0; font: 600 0.95rem/1.3 var(--f-ui); overflow-wrap: anywhere; }
  .chat-card { display: flex; gap: 12px; margin-top: 6px; padding: 8px; border-radius: 8px; text-align: left; color: var(--desk-ink);
    background: var(--desk-paper); border: 1.5px solid var(--desk-ink-line); box-shadow: 0 2px 6px -3px rgb(0 0 0 / 0.3); }
  .chat-card-art { flex: none; width: 74px; aspect-ratio: 5 / 7.4; border-radius: 4px; background-size: cover; background-position: center; border: 1.5px solid var(--desk-ink); }
  .chat-card-txt { display: grid; align-content: start; gap: 4px; min-width: 0; }
  .chat-card-txt b { font: 800 1rem/1.15 var(--f-ui); }
  .chat-card-txt small { font: 600 0.88rem/1.2 var(--f-ui); color: var(--desk-ink-2); }
  .chat-note { margin: 0; padding: 18px 16px; font: 600 0.92rem/1.35 var(--f-ui); color: var(--desk-ink-2); }
  .chat-note[hidden] { display: none; }
  .chat-foot { position: relative; padding: 10px; background: var(--desk-banner); }
  .chat-foot:empty { display: none; }
  .chat-login { width: 100%; justify-content: center; }
  .chat-form { display: flex; align-items: center; gap: 8px; }
  .chat-emoji, .chat-send { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; }
  .chat-emoji { color: var(--desk-ink); background: var(--desk-paper); border: 1.5px solid var(--desk-ink-line); }
  .chat-send { color: var(--cta-ink); background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); box-shadow: inset 0 -3px 0 var(--cta-lip); border: 0; }
  .chat-send:active { transform: translateY(2px); }
  .chat-input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 10px; font: 600 0.95rem/1 var(--f-ui);
    color: var(--desk-ink); background: var(--desk-paper); border: 1.5px solid var(--desk-ink-line); }
  .chat-input::placeholder { color: var(--desk-ink-2); }
  .chat-emojis { position: absolute; left: 10px; bottom: calc(100% + 6px); display: grid; grid-template-columns: repeat(5, 40px); gap: 4px; padding: 8px;
    background: var(--desk-paper); border: 2px solid var(--desk-ink); border-radius: 10px; box-shadow: var(--shadow-pop); }
  .chat-emojis[hidden] { display: none; }
  .chat-emojis button { height: 40px; border-radius: 8px; font-size: 1.3rem; background: none; border: 0; }
  .desk-chat :is(button, input):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) {
    .chat-tabs button[aria-selected="false"]:hover, .chat-fold:hover { background: rgb(255 255 255 / 0.14); }
    .chat-card:hover { border-color: var(--desk-ink); }
    .chat-emojis button:hover { background: var(--desk-paper-2); }
  }

  /* ---------- Janela das seções: no miolo, com o menu, a barra e o chat à mão ---------- */
  .game:not(.arranging) .game-scrim { left: var(--desk-side-w); right: calc(var(--desk-chat-w) + var(--desk-gap)); top: var(--desk-top-h); }
  .game:not(.arranging) .game-win .window { left: calc(var(--desk-side-w) + var(--desk-gap)); right: calc(var(--desk-chat-w) + var(--desk-gap) * 2);
    top: calc(var(--desk-top-h) + var(--desk-gap)); bottom: var(--desk-gap); width: auto; max-width: none; margin: 0; border-radius: 12px; }
}
@media (min-width: 1200px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .packs-open:not(:disabled) .i { animation: cta-bob 2.4s ease-in-out infinite; }
}
@media (min-width: 1200px) and (min-height: 700px) and (prefers-reduced-motion: reduce) {
  .album-cover, .desk-pack, .packs-bar i { transition: none; }
  .album-cover:hover { transform: none; }
}

/* Seletor de rosto */
.face-dialog { width: min(640px, 100%); }
/* Tamanho fixo: com aspect-ratio dentro da grade rolável as linhas encolhiam e os rostos se sobrepunham */
.face-grid { display: grid; grid-template-columns: repeat(auto-fill, 68px); grid-auto-rows: 68px; justify-content: space-between; gap: 10px; max-height: min(56vh, 520px); overflow-y: auto; padding: 6px; }
.face-pick { width: 68px; height: 68px; padding: 0; overflow: hidden; border-radius: 50%; border: 3px solid var(--panel-line); background: var(--surface-3); transition: transform 120ms; }
.face-pick img { width: 100%; height: 100%; object-fit: cover; }
.face-pick.on { border-color: var(--cta-2); box-shadow: 0 0 0 3px var(--cta-1); }
.face-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .face-pick:hover { transform: scale(1.06); } }

/* ==========================================================================
   Catálogo de mangá: sem pokébola nem Pokédex. Retícula (pontos de screentone), linhas de velocidade,
   traço de nanquim e onomatopeias. Vale nos dois temas; ligado por :root[data-catalog="manga"].
   ========================================================================== */
:root[data-catalog="manga"] {
  --card-ratio: 64 / 91;   /* capa de mangá (mediana 0,703): a carta não corta a capa */
  --manga-ink: #14161c;
  --manga-speed: rgb(255 255 255 / 0.07);   /* linhas de velocidade sobre fundo escuro */
  --manga-tone: rgb(11 30 51 / 0.07);       /* pontos da retícula */
  --manga-sfx: #e8380d;
  --manga-sfx-edge: #ffffff;
  --bg-pattern: radial-gradient(var(--manga-tone) 1.1px, transparent 1.5px) 0 0 / 9px 9px;
}
:root[data-theme="dark"][data-catalog="manga"] {
  --manga-tone: rgb(57 213 230 / 0.06);
}

/* Botão de fechar: quadrado de nanquim no lugar da pokébola */
:root[data-catalog="manga"] .win-close, :root[data-catalog="manga"] .win-close:hover, :root[data-catalog="manga"] .win-close:active {
  border-radius: 10px; border: 2px solid var(--ink); background: var(--raised); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
:root[data-catalog="manga"] .win-close .i { box-sizing: border-box; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; }
:root[data-catalog="manga"] .win-close:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Aro de pokébola atrás do ícone da aba ativa: some */
:root[data-catalog="manga"] .menu-btn.active .menu-ico::before { display: none; }

/* Barras: dourado em vez do verde de HP */
:root[data-catalog="manga"] :is(.bar, .lv-bar, .track-xp-bar, .mission-bar)[data-hp] > i { background: linear-gradient(90deg, var(--cta-1), var(--cta-2)); }

/* Dock do celular sem a Arena: Missões ocupa a linha */
.dock.one .dock-card { grid-column: 1 / -1; }

/* Carregamento: página de mangá com 漫 no lugar da pokébola */
:root[data-catalog="manga"] .boot-ball { border-radius: 10px; box-shadow: 0 0 0 4px var(--cta-2), 7px 7px 0 #000; background: #0f2236; animation: boot-flip 1.8s ease-in-out infinite; }
:root[data-catalog="manga"] .boot-ball::after { content: "漫"; inset: 0; width: auto; height: auto; margin: 0; display: grid; place-items: center; border: 0; border-radius: 0; background: none;
  color: var(--cta-1); font: 900 2.4rem/1 "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; }
@keyframes boot-flip { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) scale(1.06); } }

/* Cabeçalho das janelas: retícula e traço de nanquim embaixo */
:root[data-catalog="manga"] .window-head { background-image: radial-gradient(var(--manga-tone) 1.1px, transparent 1.5px); background-size: 7px 7px; border-bottom: 3px solid var(--ink); }
:root[data-catalog="manga"] .window-head h2 { text-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 25%, transparent); }

@media (min-width: 1200px) and (min-height: 700px) {
  /* Fundo do painel: retícula fina por cima do degradê */
  :root[data-catalog="manga"] .game:not(.arranging) {
    background: radial-gradient(var(--manga-tone) 1.1px, transparent 1.6px) 0 0 / 9px 9px, radial-gradient(120% 80% at 60% 0%, var(--desk-frame), var(--desk-frame-2)); }

  /* Faixa do título: linhas de velocidade saindo do ícone */
  :root[data-catalog="manga"] .desk-banner::before { content: ""; position: absolute; inset: -60% -10%; pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 8% 50%, var(--manga-speed) 0 1.2deg, transparent 1.2deg 5deg); }
  /* Cartão dos pacotes: linhas de foco atrás do leque */
  :root[data-catalog="manga"] .packs-fan::before { content: ""; position: absolute; inset: -14% -8%; z-index: -1; pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 50% 50%, var(--desk-ink-line) 0 1.6deg, transparent 1.6deg 7deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent 38%, #000 70%); mask-image: radial-gradient(closest-side, transparent 38%, #000 70%); }
  .packs-fan { isolation: isolate; }
  /* Onomatopeia do cartão */
  .packs-sfx { position: absolute; z-index: 2; left: 8px; top: 46%; transform: rotate(-14deg); pointer-events: none;
    font: 900 1.6rem/1 "Yu Gothic", "Meiryo", "Noto Sans JP", var(--f-display); color: var(--manga-sfx);
    -webkit-text-stroke: 1.5px var(--manga-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--manga-sfx-edge); }
  /* Álbum: retícula no papel e quadros com sombra dura de mangá */
  :root[data-catalog="manga"] .desk-album { background-image: radial-gradient(var(--desk-ink-line) 1px, transparent 1.4px); background-size: 8px 8px; }
  :root[data-catalog="manga"] .album-cover { box-shadow: 5px 5px 0 var(--manga-ink); }
  :root[data-catalog="manga"] .album-cover:nth-child(even) { transform: rotate(0.8deg); }
  :root[data-catalog="manga"] .album-cover:nth-child(odd) { transform: rotate(-0.8deg); }
  @media (hover: hover) and (pointer: fine) { :root[data-catalog="manga"] .album-cover:hover { transform: translateY(-4px) rotate(-1.5deg); } }
  /* Chat: linhas de velocidade no cabeçalho */
  :root[data-catalog="manga"] .chat-head { position: relative; overflow: hidden; }
  :root[data-catalog="manga"] .chat-head::before { content: ""; position: absolute; inset: -80% -20%; pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 15% 50%, var(--manga-speed) 0 1.4deg, transparent 1.4deg 6deg); }
  :root[data-catalog="manga"] .chat-head > * { position: relative; }
  /* Loja: moldura de quadro de mangá */
  :root[data-catalog="manga"] .game:not(.arranging) .game-shop { border: 3px solid var(--manga-ink); box-shadow: 0 0 0 3px var(--desk-edge), 6px 6px 0 rgb(0 0 0 / 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-catalog="manga"] .boot-ball { animation: none; }
}

/* Resumo da volta (e cena de nível) no mangá: linhas de foco, quadros de papel com nanquim e "おかえり!" */
:root[data-catalog="manga"] .overlay.ls-overlay::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 40%, var(--manga-speed) 0 1.1deg, transparent 1.1deg 4.5deg),
    radial-gradient(var(--manga-tone) 1.1px, transparent 1.6px) 0 0 / 8px 8px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, transparent 22%, #000 62%); mask-image: radial-gradient(ellipse at 50% 40%, transparent 22%, #000 62%); }
:root[data-catalog="manga"] .return-scene { position: relative; }
.rv-sfx { position: absolute; z-index: 1; top: -6px; right: 4%; transform: rotate(12deg); pointer-events: none;
  font: 900 clamp(1.6rem, 6vw, 2.4rem)/1 "Yu Gothic", "Meiryo", "Noto Sans JP", var(--f-display); color: var(--manga-sfx);
  -webkit-text-stroke: 2px var(--manga-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--manga-sfx-edge); }
:root[data-catalog="manga"] .rv-title { transform: rotate(-3deg); -webkit-text-stroke: 6px var(--manga-ink); text-shadow: 5px 5px 0 var(--manga-ink), 7px 7px 0 var(--manga-sfx-edge); }
:root[data-catalog="manga"] .rv-eyebrow { display: inline-block; padding: 4px 12px; transform: rotate(-2deg); color: var(--desk-ink); background: var(--desk-paper); border: 2px solid var(--manga-ink); box-shadow: 3px 3px 0 var(--cta-2); }
:root[data-catalog="manga"] .rv-nap-bar { height: 14px; border: 2px solid var(--manga-ink); border-radius: 4px; background: var(--desk-paper); }
:root[data-catalog="manga"] .rv-nap-bar > i { border-radius: 0; background: repeating-linear-gradient(-45deg, var(--cta-1) 0 6px, var(--cta-2) 6px 12px); box-shadow: none; }
/* Blocos como quadros de mangá: papel, borda de nanquim, sombra dura e leve inclinação */
:root[data-catalog="manga"] .rv-block { border-radius: 4px; color: var(--desk-ink); border: 3px solid var(--manga-ink); box-shadow: 6px 6px 0 var(--cta-2); /* sombra dura dourada: a de nanquim some no fundo escuro */
  background: radial-gradient(var(--desk-ink-line) 1px, transparent 1.4px) 0 0 / 7px 7px, var(--desk-paper); transform: rotate(-0.8deg); }
:root[data-catalog="manga"] .rv-block:nth-child(even) { transform: rotate(0.8deg); }
:root[data-catalog="manga"] .rv-block-head h3 { color: var(--desk-ink); font-size: 0.95rem; }
:root[data-catalog="manga"] .rv-ico { color: var(--desk-paper); background: var(--manga-ink); border-radius: 4px; }
:root[data-catalog="manga"] :is(.rv-stat, .rv-stat b) { color: var(--desk-ink); }
:root[data-catalog="manga"] :is(.rv-stat.gold b, .rv-block.loja .rv-stat b) { color: var(--manga-sfx); }
:root[data-catalog="manga"] .rv-block.loja { border-color: var(--manga-ink); }
:root[data-catalog="manga"] .rv-block.loja .rv-ico { color: var(--cta-1); }
/* Botões com traço de nanquim; sem o retângulo de fundo atrás deles */
:root[data-catalog="manga"] .rv-actions { background: none; }
:root[data-catalog="manga"] .return-scene .btn { border: 2.5px solid var(--manga-ink); box-shadow: 4px 4px 0 var(--manga-sfx); }
:root[data-catalog="manga"] .return-scene .btn.ghost { color: var(--desk-ink); background: var(--desk-paper); border-color: var(--manga-ink); }
:root[data-catalog="manga"] .return-scene .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--manga-sfx); }
@media (hover: hover) and (pointer: fine) { :root[data-catalog="manga"] .return-scene .btn.ghost:hover:not(:disabled) { color: var(--desk-ink); background: var(--desk-paper-2); } }
@media (prefers-reduced-motion: no-preference) { .rv-sfx { animation: ls-pop 520ms cubic-bezier(.2, .9, .3, 1.4) 180ms both; } }
/* Tela de computador baixa (até 820 px de altura): cartão dos pacotes mais compacto, para o leque ter espaço. */
@media (min-width: 1200px) and (min-height: 700px) and (max-height: 820px) {
  .desk-packs { gap: 8px; padding: 12px 14px 12px; }
  .packs-title { font-size: 1.35rem; }
  .packs-title em { display: inline; font-size: 1.2em; margin-left: 4px; }
  .packs-count { top: 44px; }
  .packs-open { min-height: 46px; }
  .packs-next small { font-size: 0.85rem; }
  .packs-sfx { font-size: 1.2rem; top: 40%; }
}

/* ---------- Perfil, amigos e trocas entre jogadores (src/ui/social-view.js) ---------- */
:root { --soc-badge: #d42a20; --soc-badge-ink: #ffffff; --soc-pick: rgb(26 112 131 / 0.14); }
:root[data-theme="dark"] { --soc-badge: #ff5a4f; --soc-badge-ink: #1a0503; --soc-pick: rgb(57 213 230 / 0.16); }
.soc-dialog { width: min(560px, 100%); display: grid; gap: 14px; }
.soc-trade { width: min(760px, 100%); max-height: calc(100dvh - 32px); grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto; }
.soc-profile { display: flex; align-items: center; gap: 16px; }
.soc-profile p { margin: 2px 0; }
.soc-face { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--panel-2); border: 2px solid var(--glass-edge); }
.soc-face img { width: 100%; height: 100%; object-fit: cover; }
.soc-face b { font: 900 2rem/1 var(--f-display); }
.soc-status { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); }
.soc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.soc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.soc-actions .btn.primary { margin-left: auto; }
.soc-tag { font-weight: 800; color: var(--good); }
.soc-error { margin: 0; color: var(--bad); font-weight: 700; }
.soc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.soc-tabs button { height: 40px; border-radius: 10px; font: 700 0.95rem/1 var(--f-ui); color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--glass-edge); }
.soc-tabs button[aria-selected="true"] { color: var(--cta-ink); background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); border-color: var(--cta-lip); }
.soc-search { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; font: 600 0.95rem/1 var(--f-ui); color: var(--ink); background: var(--panel-2); border: 1px solid var(--glass-edge); }
.soc-grid { min-height: 120px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-content: start; overscroll-behavior: contain; }
.soc-card { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px; text-align: left;
  border-radius: 10px; color: var(--ink); background: var(--panel-2); border: 1.5px solid var(--glass-edge); }
.soc-card.on { background: var(--soc-pick); border-color: var(--cta-2); }
.soc-card:disabled { opacity: 0.45; }
.soc-card em { position: absolute; top: 4px; right: 6px; font: 800 0.75rem/1 var(--f-ui); font-style: normal; color: var(--ink-2); }
.soc-art { display: block; width: 42px; aspect-ratio: 5 / 7.4; border-radius: 4px; background: var(--panel) center / cover; border: 1px solid var(--glass-edge); }
.soc-card-txt { display: grid; gap: 2px; min-width: 0; }
.soc-card-txt b { font: 800 0.82rem/1.15 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 22px; }
.soc-card-txt small { font: 600 0.78rem/1.2 var(--f-ui); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.soc-side h3 { margin: 0 0 6px; font: 800 0.95rem/1 var(--f-ui); }
.soc-side h3 small, .soc-block h3 small { color: var(--muted); font-weight: 700; }
.soc-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px 3px 3px; border-radius: 8px;
  font: 700 0.78rem/1.2 var(--f-ui); color: inherit; background: var(--soc-pick); border: 1px solid var(--glass-edge); }
.soc-chip .soc-art { width: 22px; }
.soc-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-chip em { font-style: normal; font-weight: 800; }
.soc-chip i { font-style: normal; opacity: 0.7; }
/* Aba Amigos do chat (papel da tela do computador) */
.chat-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  font: 800 0.75rem/1 var(--f-ui); color: var(--soc-badge-ink); background: var(--soc-badge); }
.chat-badge[hidden] { display: none; }
.chat-name:is(button) { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.chat-name:is(button):hover { text-decoration: underline; }
.soc-block { padding: 12px 14px; border-bottom: 1px solid var(--desk-ink-line); display: grid; gap: 8px; }
.soc-block h3 { margin: 0; font: 800 1rem/1.1 var(--f-ui); }
.soc-block p { margin: 0; }
.soc-row { display: flex; align-items: center; gap: 8px; }
.soc-name { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: 800 1rem/1.2 var(--f-ui); color: var(--desk-ink); cursor: pointer; }
.soc-name:hover { text-decoration: underline; }
.soc-row-btns { margin-left: auto; display: flex; gap: 6px; }
.soc-trade-item { display: grid; gap: 6px; padding: 10px; border-radius: 8px; border: 1.5px solid var(--desk-ink-line); }
.soc-trade-item .soc-row-btns { margin-left: 0; }
.soc-give { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.soc-give small { flex-basis: 100%; font-weight: 700; color: var(--desk-ink-2); }
.soc-block .soc-chip { background: var(--desk-paper-2); border-color: var(--desk-ink-line); }
@media (max-width: 560px) {
  .soc-summary { grid-template-columns: 1fr; }
  .soc-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
.soc-grid > p { grid-column: 1 / -1; margin: 0; }
.soc-block .btn.ghost { color: var(--desk-ink-2); }
.soc-block .btn.ghost:hover:not(:disabled) { color: var(--desk-ink); }
/* ---------- Mercado (Comprar, Vender e Meus anúncios) ---------- */
/* Abas sempre no topo: a janela não rola, só o painel embaixo delas (com lista longa o grid espremia a barra). */
[data-win="mercado"] .window-body { display: flex; flex-direction: column; overflow: hidden; }
[data-win="mercado"] .window-body > .tab-rail { flex: none; }
.mk-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  display: grid; gap: 12px; align-content: start; grid-auto-rows: max-content; min-width: 0; padding: 3px; margin: -3px; }
.mk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-search { flex: 1 1 180px; min-width: 0; }
.mk-search input, .mk-sell input { width: 100%; min-height: 42px; padding: 8px 12px; background: var(--raised); border: 2px solid var(--line); border-radius: 12px; color: var(--ink); font: 700 1rem var(--f-ui); }
.mk-search input:focus-visible, .mk-sell input:focus-visible { border-color: var(--eyebrow); outline: none; }
.mk-filters select { flex: 1 1 140px; min-width: 0; }
.mk-switch { flex: 1 1 100%; border: 0; padding: 4px 2px; font-weight: 700; color: var(--ink-2); }
.mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 8px 8px; border-radius: var(--r-md); background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--glass-edge); box-shadow: inset 0 -3px 0 var(--panel-line); }
.mk-row.on { border-color: var(--eyebrow); box-shadow: inset 0 0 0 1.5px var(--eyebrow), inset 0 -3px 0 var(--panel-line); }
.mk-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row > .btn { flex: none; }
.mk-row > span:last-child:not(.btn) { flex: none; font-weight: 800; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.mk-thumb { flex: none; width: 44px; aspect-ratio: 5 / 7; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--panel-2); cursor: pointer; }
.mk-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mk-missing { display: inline-block; font-size: 0.72rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: var(--eyebrow); background: color-mix(in srgb, var(--eyebrow) 14%, transparent); }
.mk-sell { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--panel-2); color: var(--ink); border: 1.5px solid var(--eyebrow); }
.mk-sell label { display: grid; gap: 4px; font-weight: 700; color: var(--ink-2); }
.mk-sell .btn { justify-self: start; }
/* Câmbio: último negócio em destaque e o preço por marcador do rascunho (cores só por tokens). */
.mk-last { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); border: 1.5px solid var(--line); color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.mk-last.muted { color: var(--muted); font-weight: 600; }
.mk-each { min-height: 1.25em; color: var(--eyebrow); font-weight: 700; }
.mk-panel > .mk-list + .mk-sell { margin-top: 14px; }
.mk-panel h3 { margin: 8px 0 0; font: 800 0.95rem/1.1 var(--f-display); font-style: italic; text-transform: uppercase; color: var(--ink-2); }
.mk-pages { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px 8px; }
@media (max-width: 420px) {
  .mk-row { gap: 8px; padding-right: 8px; }
  .mk-row > .btn { padding-inline: 10px; font-size: 0.8rem; max-width: 42%; white-space: normal; }
}
/* Dock do celular com 7 seções (catálogo fictício): abaixo de 400 px só o ícone; o rótulo fica para o leitor de tela. */
@media (max-width: 400px) {
  .menu.many .menu-btn { grid-template-rows: 28px; }
  .menu.many .menu-lbl { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ===================================================================
   Duas moedas (spec 2026-10-25 moedas e câmbio): ienes (¥, dourado-cobre) e marcadores (ciano).
   Pílulas da barra de cima, moedas da barra do computador e as fichas no topo das Trocas.
   ========================================================================== */
:root {
  --yen: #d98a1f; --yen-hi: #ffd77a; --yen-lip: #9a5a0c; --yen-ink: #fffaf0;
  --diamond: #1fb3d6; --diamond-hi: #8ff0ff; --diamond-lip: #0b6f99; --diamond-ink: #ffffff;
}
:root[data-theme="dark"] {
  --yen: #e39a2e; --yen-hi: #ffdf8f; --yen-lip: #8a500a; --yen-ink: #fffaf0;
  --diamond: #2fc8e8; --diamond-hi: #a6f4ff; --diamond-lip: #0b6f99; --diamond-ink: #ffffff;
}
.trades-wallet { display: flex; justify-content: flex-end; min-width: 0; }
=======
/* Loja de marcadores (src/ui/diamond-shop-view.js). Ciano = --eyebrow (petróleo no claro, ciano no escuro);
   dourado de texto = --gold-ink; o botão + segue o dourado das ações (--cta-*). */
.diamond-shop { max-width: 560px; }
.shop-tabs { display: flex; gap: 6px; margin: 4px 0 14px; }
.shop-tabs button { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font: 700 0.95rem var(--f-ui); cursor: pointer; }
.shop-tabs button.on { color: var(--text); border-color: var(--eyebrow); background: var(--glass); }
.shop-packs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-pack { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 14px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); }
.shop-pack.best { border-color: var(--gold); }
.shop-pack b { font: 800 1.35rem var(--f-ui); color: var(--text); }
.shop-pack small { color: var(--muted); }
.shop-pack .btn { width: 100%; margin-top: 6px; }
.shop-gem { color: var(--diamond); }
.shop-note { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); color: var(--text); font-size: 0.9rem; }
.shop-note.warn { border-color: var(--bad); }
.shop-boosts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.shop-boost { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); }
.shop-boost.on { border-color: var(--eyebrow); }
.shop-boost-ico { color: var(--gold-ink); padding-top: 2px; }
.shop-boost p { margin: 2px 0 6px; }
/* Os três botões ocupam a linha toda e quebram de linha em telas estreitas. */
.shop-boost-buy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.shop-boost-buy .btn { flex: 1 1 90px; min-width: 0; }
.boost-left { display: inline-flex; align-items: center; gap: 4px; color: var(--eyebrow); font-weight: 700; font-size: 0.85rem; }
.pill-plus { width: 26px; height: 26px; flex: none; margin-left: 2px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--cta-ink); background: linear-gradient(var(--cta-1), var(--cta-2)); box-shadow: inset 0 -2px 0 var(--cta-lip); cursor: pointer; }
.pill-plus:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--cta-lip); }
.boost-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border: 1px solid var(--eyebrow); border-radius: 999px; background: var(--glass); color: var(--eyebrow); font: 700 0.85rem var(--f-ui); cursor: pointer; }
:is(.pill-plus, .boost-chip, .shop-tabs button):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 420px) { .shop-packs { gap: 8px; } .shop-pack b { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .pill-plus:active { transform: none; } }

/* ===== Flip-book (abertura do catálogo de mangá, src/ui/flipbook.js) =====
   O volume fechado é folheado; as páginas viram por cima com capas da própria série e travam em cada
   carta. Fica escuro nos dois temas, como as outras cenas. --fb-base e --fb-accent vêm da capa do
   pacote (lidos no navegador); sem a capa, valem os padrões abaixo. */
.fb { --fb-base: #0b1e33; --fb-accent: #ffcb05; --fb-paper: #fff8e7; --fb-ink: #14161c; --fb-edge: #e6dcc4; --fb-sfx: #e8380d; --fb-sfx-fill: #fff8e7; }
.fb-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: background-color 600ms var(--ease);
  background: radial-gradient(color-mix(in srgb, var(--fb-accent) 14%, transparent) 1.1px, transparent 1.6px) 0 0 / 9px 9px, radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--fb-accent) 22%, transparent), transparent 60%), var(--fb-base); }
.fb-bg i { position: absolute; inset: -20%; opacity: 0; transition: opacity 300ms var(--ease); }
.fb-lines { background: repeating-conic-gradient(from 0deg at 50% 45%, color-mix(in srgb, var(--fb-accent) 55%, transparent) 0 1.2deg, transparent 1.2deg 6deg);
  -webkit-mask: radial-gradient(circle at 50% 45%, transparent 22%, #000 48%); mask: radial-gradient(circle at 50% 45%, transparent 22%, #000 48%); }
.fb.lines .fb-lines { opacity: 0.55; animation: fb-lines 900ms steps(3) infinite; }
@keyframes fb-lines { to { transform: rotate(4deg); } }

.fb-book { position: relative; width: min(318px, 74vw); aspect-ratio: var(--card-ratio); margin: 0 14px 0 0; perspective: 1400px; touch-action: none; cursor: grab; }
.fb-page { position: absolute; inset: -12px; background: var(--fb-paper); border: 3px solid var(--fb-ink); border-radius: 3px 8px 8px 3px;
  box-shadow: 4px 3px 0 -1px var(--fb-edge), 4px 3px 0 1px var(--fb-ink), 8px 6px 0 -1px var(--fb-edge), 8px 6px 0 1px var(--fb-ink), 0 26px 60px rgb(0 0 0 / 0.55); }
.fb-panel { position: absolute; inset: 9px; }
.fb .fb-card { animation: fb-land 360ms cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards; }
@keyframes fb-land { from { transform: scale(1.12); filter: brightness(1.8); } }
.fb-leaves { position: absolute; inset: -12px; pointer-events: none; transform-style: preserve-3d; z-index: 4; }
.fb-leaf { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--fb-paper); border: 3px solid var(--fb-ink); border-radius: 3px 8px 8px 3px;
  backface-visibility: hidden; animation: fb-turn var(--t) cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards; }
.fb-leaf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.18), transparent 30%); }
.fb-leaf i { position: absolute; inset: 9px; border: 2.5px solid var(--fb-ink); background: center / cover no-repeat var(--fb-edge); }
.fb-leaf.ghost i { filter: brightness(0.12) contrast(1.2); }
@keyframes fb-turn { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-180deg); } }
.fb-cover { position: absolute; inset: -12px; z-index: 5; transform-origin: 0 50%; transition: transform 520ms cubic-bezier(0.5, 0, 0.3, 1), opacity 520ms; backface-visibility: hidden; }
.fb-cover .pack { width: 100%; height: 100%; }
.fb-cover.open { transform: rotateY(-178deg); opacity: 0; pointer-events: none; }
.fb.done .fb-bg .fb-lines { opacity: 0; }

/* Onomatopeia do quadro de impacto: maior e mais torta quanto mais rara. */
.fb-sfx { position: absolute; top: -40px; right: max(0px, calc(50% - 215px)); z-index: 7; pointer-events: none; opacity: 0;
  font: 900 3.4rem/1 "Yu Gothic", "Meiryo", "Noto Sans JP", var(--f-display); color: var(--fb-sfx); -webkit-text-stroke: 4px var(--fb-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--fb-sfx-fill); transform: rotate(-10deg); }
.fb-sfx.on { opacity: 1; animation: fb-sfx 420ms cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; }
.fb-sfx.lv2 { font-size: 4.3rem; }
.fb-sfx.lv3 { font-size: 5.2rem; top: -56px; }
@keyframes fb-sfx { from { opacity: 0; transform: rotate(-24deg) scale(2.4); } }
.fb.shake .fb-book { animation: fb-shake 380ms steps(6) both; }
@keyframes fb-shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(3px, 3px); } }
.fb.slowmo .fb-bg { filter: saturate(1.3); }
.fb.slowmo .fb-book::after { content: ""; position: absolute; inset: -40px; z-index: 6; pointer-events: none; border-radius: 50%; box-shadow: 0 0 80px 30px color-mix(in srgb, var(--fb-accent) 45%, transparent); animation: fb-glow 1.2s ease-in-out infinite alternate; }
@keyframes fb-glow { from { opacity: 0.35; } to { opacity: 1; } }
.fb .op-rarity { bottom: -46px; }
.fb .op-count { margin-top: 30px; }

/* Clima pelo público da série */
.fb[data-fb="seinen"] { --fb-paper: #ece6d6; --fb-sfx: #14161c; --fb-sfx-fill: #9aa0aa; }
.fb[data-fb="seinen"] .fb-deco { opacity: 0.5; background: radial-gradient(#000 1.4px, transparent 1.9px) 0 0 / 5px 5px; -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); }
.fb[data-fb="seinen"].lines .fb-lines { opacity: 0.35; }
.fb[data-fb="shojo"] { --fb-sfx: #ff5fa2; --fb-sfx-fill: #fff; --fb-edge: #fde4ef; }
.fb[data-fb="shojo"] .fb-deco { opacity: 0.7; background:
  radial-gradient(circle, rgb(255 255 255 / 0.9) 0 2px, transparent 3px) 0 0 / 70px 90px,
  radial-gradient(circle, rgb(255 180 215 / 0.55) 0 14px, transparent 15px) 20px 30px / 160px 140px,
  radial-gradient(circle, rgb(255 255 255 / 0.25) 0 22px, transparent 23px) 90px 10px / 220px 200px; animation: fb-float 9s linear infinite; }
.fb[data-fb="shojo"] .fb-lines { background: repeating-conic-gradient(from 0deg at 50% 45%, rgb(255 255 255 / 0.5) 0 0.6deg, transparent 0.6deg 9deg); }
@keyframes fb-float { to { background-position: 0 -180px, 20px -250px, 90px -390px; } }
.fb[data-fb="josei"] { --fb-sfx: #8fb8ff; --fb-sfx-fill: #fff; }
.fb[data-fb="josei"] .fb-deco { opacity: 0.6; background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.18), transparent 40%), radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--fb-accent) 25%, transparent), transparent 45%); }
.fb[data-fb="josei"] .fb-sfx { -webkit-text-stroke-width: 2px; font-weight: 700; }
.fb[data-fb="josei"].lines .fb-lines { opacity: 0.25; }

@media (max-width: 420px) { .fb-sfx { font-size: 2.6rem; right: 2px; top: -34px; } .fb-sfx.lv2 { font-size: 3.2rem; } .fb-sfx.lv3 { font-size: 3.8rem; top: -44px; } }
@media (prefers-reduced-motion: reduce) {
  .fb .fb-card, .fb-sfx.on, .fb.shake .fb-book, .fb.lines .fb-lines, .fb[data-fb="shojo"] .fb-deco, .fb.slowmo .fb-book::after { animation: none; }
  .fb-cover { transition: none; }
}
/* Verso do volume no flip-book (a rara final vem de costas): papel com retícula, selo 漫 e o nome da série. */
.fb .hcard__back { display: grid; place-items: center; align-content: center; gap: 10px; color: var(--fb-ink); border: 3px solid var(--fb-ink); box-shadow: none;
  background: radial-gradient(color-mix(in srgb, var(--fb-ink) 22%, transparent) 1.2px, transparent 1.7px) 0 0 / 7px 7px, var(--fb-paper); }
.fb .hcard__back::after { content: none; }
.fb-back-seal { display: grid; place-items: center; width: 34%; aspect-ratio: 1; border: 3px solid var(--fb-ink); border-radius: 6px; transform: rotate(-6deg);
  background: var(--fb-sfx); color: var(--fb-sfx-fill); font: 900 clamp(2rem, 9vw, 3.2rem)/1 "Yu Gothic", "Meiryo", "Noto Sans JP", var(--f-display); box-shadow: 4px 4px 0 var(--fb-ink); }
.fb-back-name { max-width: 80%; font: italic 900 0.95rem/1.1 var(--f-display); text-transform: uppercase; text-align: center; }
.fb-vol { position: absolute; inset: 0; border: 3px solid var(--fb-ink); border-radius: 3px 8px 8px 3px; background: center / cover no-repeat var(--fb-edge);
  box-shadow: inset 10px 0 0 -4px rgb(0 0 0 / 0.25), 0 26px 60px rgb(0 0 0 / 0.55); }
.fb-vol.golden { border-color: var(--fb-accent); box-shadow: 0 0 0 3px var(--fb-ink), 0 0 36px color-mix(in srgb, #ffcb05 60%, transparent), 0 26px 60px rgb(0 0 0 / 0.55); }
.fb-vol-band { position: absolute; left: -3px; right: -3px; bottom: 12%; padding: 6px 10px 5px; background: var(--fb-ink); color: var(--fb-paper);
  font: italic 900 1rem/1.1 var(--f-display); text-transform: uppercase; text-align: center; border-top: 3px solid var(--fb-accent); }

/* ===== Botões no estilo do mangá (catálogo de mangá) =====
   Mesmo padrão da ficha de sócio da entrada: quadro de nanquim com canto quase reto, sombra dura
   deslocada (como um quadro de página) que some ao tocar, e texto em Rubik itálico. A ação principal
   continua dourada; as outras são papel. Vale nos dois temas: o papel e o nanquim não mudam, só a
   sombra fica mais forte no escuro para o botão não sumir no fundo. */
:root[data-catalog="manga"] {
  --mb-paper: #fff8e7;
  --mb-ink: #14161c;
  --mb-shadow: #14161c;
  --mb-radius: 4px;
  --mb-off: 3px;
}
:root:not([data-theme="dark"])[data-catalog="manga"] { --mb-shadow: color-mix(in srgb, var(--eyebrow) 75%, #000); }
:root[data-theme="dark"][data-catalog="manga"] { --mb-shadow: #000000; }
:root[data-catalog="manga"] .btn {
  --lip-h: 0px; border: 2.5px solid var(--mb-ink); border-radius: var(--mb-radius); background: var(--mb-paper); color: var(--mb-ink);
  font: italic 900 0.88rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em;
  box-shadow: var(--mb-off) var(--mb-off) 0 var(--mb-shadow); transition: transform 70ms, box-shadow 70ms, filter var(--dur); }
:root[data-catalog="manga"] .btn:active:not(:disabled) { transform: translate(var(--mb-off), var(--mb-off)); box-shadow: 0 0 0 var(--mb-shadow); }
:root[data-catalog="manga"] .btn.primary { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--mb-ink); border-color: var(--mb-ink);
  box-shadow: var(--mb-off) var(--mb-off) 0 var(--mb-shadow), inset 0 2px 0 rgb(255 255 255 / 0.45); }
:root[data-catalog="manga"] .btn.primary:active:not(:disabled) { box-shadow: 0 0 0 var(--mb-shadow), inset 0 2px 0 rgb(255 255 255 / 0.45); }
:root[data-catalog="manga"] .btn.danger { background: var(--mb-paper); color: #c22d12; border-color: #c22d12; box-shadow: var(--mb-off) var(--mb-off) 0 #c22d12; }
:root[data-catalog="manga"] .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
:root[data-catalog="manga"] .btn.ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
:root[data-catalog="manga"] .btn.small { --mb-off: 2px; min-height: 34px; padding: 5px 12px; font-size: 0.78rem; border-width: 2px; }
:root[data-catalog="manga"] .btn:disabled { opacity: 0.5; box-shadow: none; filter: grayscale(0.4); background: var(--mb-paper); color: var(--mb-ink); border-color: var(--mb-ink); }
:root[data-catalog="manga"] .btn.primary:disabled { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); }
:root[data-catalog="manga"] .btn.ghost:disabled { background: transparent; border-color: transparent; color: var(--ink-muted); }
/* Atalho de teclado dentro do botão: só o contorno em nanquim, sem a caixa cinza. */
:root[data-catalog="manga"] .btn .kbd { background: transparent; color: inherit; border-color: currentColor; opacity: 0.6; font-style: normal; text-transform: lowercase; }

/* Filtros, abas e seletores: quadros retos de nanquim; o marcado fica em nanquim cheio com texto dourado. */
:root[data-catalog="manga"] .seg, :root[data-catalog="manga"] .tab-rail { border-radius: var(--mb-radius); border: 2px solid var(--mb-ink); box-shadow: none; }
:root[data-catalog="manga"] .chip { border-radius: var(--mb-radius); font-style: italic; }
:root[data-catalog="manga"] .chip.active { background: var(--mb-ink); color: var(--cta-1); box-shadow: none; }
:root[data-catalog="manga"] .rail-tab { border-radius: var(--mb-radius); }
:root[data-catalog="manga"] .rail-tab-ico { border-radius: var(--mb-radius); }
:root[data-catalog="manga"] .boost-chip { border-radius: var(--mb-radius); border: 2px solid var(--mb-ink); background: var(--mb-paper); color: var(--mb-ink); font-style: italic; box-shadow: 2px 2px 0 var(--mb-shadow); }
:root[data-catalog="manga"] .pill-plus { border-radius: var(--mb-radius); border: 2px solid var(--mb-ink); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { :root[data-catalog="manga"] .btn:active:not(:disabled) { transform: none; } }
/* Botões da tela inicial (ferramentas da loja, nível, menu e missões): canto reto de quadro. O "Abrir pacote"
   fica com a medalha e o lábio dourado dele, que não cabem num quadro de borda grossa. */
:root[data-catalog="manga"] :is(.tool-btn.round, .level-badge, .dock-card, .menu-btn) { border-radius: var(--mb-radius); }
:root[data-catalog="manga"] .tool-btn.round { border: 2px solid var(--mb-ink); box-shadow: 2px 2px 0 var(--mb-shadow); }
:root[data-catalog="manga"] .tool-btn.round:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--mb-shadow); }

/* ===== Janelas, HUD e menu no estilo mangá (catálogo de mangá) =====
   O padrão da ficha de sócio da entrada levado para o jogo: quadro de nanquim com canto reto, retícula
   no fundo e sombra dura deslocada. No escuro o papel é "noturno" (azul-tinta com pontos ciano); no
   claro, papel creme com pontos de nanquim. A sombra dourada marca janelas; a preta, peças da HUD. */
:root[data-catalog="manga"] {
  --mn-paper: #fff8e7;
  --mn-dots: rgb(20 22 28 / 0.08);
  --mn-edge: var(--mb-ink);
  --mn-gold: var(--cta-2);
}
:root[data-theme="dark"][data-catalog="manga"] {
  --mn-paper: #0f1b2b;
  --mn-dots: rgb(57 213 230 / 0.07);
  --mn-edge: #000000;
}
:root[data-catalog="manga"] :is(.dialog, .window) {
  border: 3px solid var(--mn-edge); border-radius: var(--mb-radius);
  background: radial-gradient(var(--mn-dots) 1.1px, transparent 1.6px) 0 0 / 8px 8px, var(--mn-paper);
  box-shadow: 7px 7px 0 var(--mn-gold), 0 24px 60px rgb(0 0 0 / 0.45); }
:root[data-catalog="manga"] .game-win .window { border-radius: var(--mb-radius); }
:root[data-catalog="manga"] .dialog-head h2 { font-style: italic; font-weight: 900; text-shadow: 3px 3px 0 color-mix(in srgb, var(--mn-edge) 55%, transparent); }
:root[data-catalog="manga"] .dialog-head .eyebrow::before { border-radius: 0; }
/* Caixas dentro das janelas (escolhas, listas): quadrinhos com borda de nanquim fina. */
:root[data-catalog="manga"] :is(.save-pick, .intro-list, .manifest) { border: 2px solid var(--mn-edge); border-radius: var(--mb-radius); box-shadow: 3px 3px 0 var(--mn-edge); }

/* HUD e menu: peças retas com borda de nanquim e sombra preta curta. */
:root[data-catalog="manga"] :is(.pill, .step-chip, .hud-float, .lv-face, .dock, .menu, .level-badge) {
  border-radius: var(--mb-radius); border: 2px solid var(--mn-edge); box-shadow: 3px 3px 0 var(--mn-edge); }
:root[data-catalog="manga"] :is(.step-go, .step-ico, .float-ico, .dock-ico, .cta-chev, .menu-btn, .dock-card) { border-radius: 3px; }
:root[data-catalog="manga"] .open-cta { border-radius: var(--mb-radius); }
:root[data-catalog="manga"] .lv-bar, :root[data-catalog="manga"] .lv-bar > i { border-radius: 1px; }
:root[data-catalog="manga"] .badge-count { border-radius: 3px; transform: rotate(6deg); }
/* Cantos retos em tudo dentro das janelas, da HUD e do menu (quadrinhos de mangá). Ficam de fora as
   cartas com efeito holográfico (o recorte do brilho depende do canto) e os controles nativos. */
:root[data-catalog="manga"] { --r-sm: 3px; --r-md: 4px; --r-lg: 4px; }
:root[data-catalog="manga"] :is(.window, .dialog, .hud, .dock, .menu) :not(.hcard, .hcard *, input[type="range"], input[type="checkbox"], input[type="radio"]) { border-radius: 3px; }
/* Painéis, medalhas e abas dentro das janelas: o mesmo quadrinho de nanquim (antes eram cartões azuis
   de borda fina e destoavam da moldura). Aba escolhida em nanquim cheio com texto dourado, como na ficha. */
:root[data-catalog="manga"] .window .panel { border: 2px solid var(--mn-edge); box-shadow: 3px 3px 0 var(--mn-edge); background: radial-gradient(var(--mn-dots) 1.1px, transparent 1.6px) 0 0 / 8px 8px, var(--mn-paper); }
:root[data-catalog="manga"] .medal { background: var(--mn-paper); border: 2px solid var(--mn-edge); box-shadow: 3px 3px 0 var(--mn-edge); }
:root[data-catalog="manga"] .medal:not(.on) { background: transparent; border-style: dashed; box-shadow: none; }
:root[data-catalog="manga"] .medal:not(.on) :is(b, small) { opacity: 0.7; }
:root[data-catalog="manga"] .medal-ico { border: 2px solid var(--mn-edge); background: transparent; }
:root[data-catalog="manga"] .medal.on .medal-ico { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); box-shadow: 2px 2px 0 var(--mn-edge); }
:root[data-catalog="manga"] .tab-rail { background: var(--mn-paper); }
:root[data-catalog="manga"] .rail-tab.active { background: var(--mn-edge); color: var(--cta-1); box-shadow: none; }
:root[data-catalog="manga"] .rail-tab.active .rail-tab-ico { background: transparent; color: var(--cta-1); }
:root[data-catalog="manga"] .rail-tab-ico { background: transparent; border: 1.5px solid currentColor; box-shadow: none; }
:root[data-theme="dark"][data-catalog="manga"] .rail-tab.active { background: var(--cta-2); color: var(--mb-ink); }
:root[data-theme="dark"][data-catalog="manga"] .rail-tab.active .rail-tab-ico { color: var(--mb-ink); }
/* Aba escolhida como um quadro solto dentro da barra: borda, sombra dura e um respiro em volta. */
:root[data-catalog="manga"] .tab-rail { padding: 6px; gap: 6px; }
:root[data-catalog="manga"] .rail-tab { border: 2px solid transparent; }
:root[data-catalog="manga"] .rail-tab.active { border-color: var(--mn-edge); box-shadow: 3px 3px 0 var(--mn-edge); transform: translate(-1px, -1px); }
/* No escuro o tracejado das medalhas bloqueadas fica em ciano claro (em nanquim preto ele sumia no fundo). */
:root[data-theme="dark"][data-catalog="manga"] .medal:not(.on) { border-color: color-mix(in srgb, var(--eyebrow) 70%, transparent); }
:root[data-theme="dark"][data-catalog="manga"] .medal:not(.on) .medal-ico { border-color: color-mix(in srgb, var(--eyebrow) 70%, transparent); color: var(--eyebrow); }

/* Tema claro do mangá em "papel envelhecido": o branco puro e o azul-claro cansavam a vista. Creme e bege
   apagados, como página de mangá impressa; o texto continua marinho e os detalhes em petróleo. */
:root:not([data-theme="dark"])[data-catalog="manga"] {
  --panel: #f3ead6;
  --panel-2: #ebe1ca;
  --panel-line: #d6c9ab;
  --surface-3: #e2d6bb;
  --raised: #f7efdc;
  --game-a: #e2d9c6;
  --game-b: #d2c7af;
  --scene-top: #e4dccb;
  --scene-bottom: #cfc4ab;
  --rail: #e2d7bf;
  --glass: rgb(247 239 220 / 0.94);
  --glass-solid: #f7efdc;
  --hi: #fbf5e8;
  --hi-soft: rgb(251 245 232 / 0.9);
  --mn-paper: #f1e7d0;
  --mn-dots: rgb(20 22 28 / 0.07);
  --mb-paper: #f7eedb;
  /* Cores de impressão de mangá: índigo (藍) nos detalhes no lugar do petróleo, vermelhão de carimbo (朱)
     nos selos de contagem e o nanquim como sombra dos botões. */
  --eyebrow: #2b3f75;
  --glass-edge: rgb(43 63 117 / 0.32);
  --focus: #2b3f75;
  --stamp: #c8361f;
  --mb-shadow: #14161c;
}
/* Computador: o dock é uma linha só (Abrir pacote + Missões). Sem isto, Missões descia para uma segunda
   linha dentro dos 96 px e o Abrir pacote ficava espremido, com a medalha vazando. */
@media (min-width: 701px) { .dock.one .dock-card { grid-column: span 2; } }
/* Próximo passo: as pontas do botão e do X seguem o canto reto do quadro. */
:root[data-catalog="manga"] :is(.step-go, .step-x) { border-radius: 0; }
:root[data-catalog="manga"] .step-chip { background: var(--mn-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-catalog="manga"] .step-x { border-left: 2px solid var(--mn-edge); }
/* Abrir pacote: quadro dourado com borda de nanquim; a medalha vira um selo quadrado que cabe dentro. */
:root[data-catalog="manga"] .open-cta { border: 2.5px solid var(--mb-ink); box-shadow: 3px 3px 0 var(--mb-shadow); }
:root[data-catalog="manga"] .open-cta:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mb-shadow); }
:root[data-catalog="manga"] .cta-medal { width: 42px; height: 42px; border-radius: 3px; border: 2px solid var(--mb-ink); }
:root[data-catalog="manga"] .cta-medal .mini-ring { display: none; }
:root[data-catalog="manga"] .dock-card { border: 2px solid var(--mn-edge); background: var(--mn-paper); }

/* Capas de mangá inteiras: a carta já segue a proporção média (--card-ratio) e as capas mais
   estreitas ou largas ganham uma faixa de nanquim em vez de perder borda. */
:root[data-catalog="manga"] :is(.card img, .hcard__front > img) { object-fit: contain; background: var(--manga-ink); }