:root {
  --bg: #121416;
  --bg2: #1a1d20;
  --line: #2b3034;
  --bone: #d9d3c3;
  --mute: #8f9390;
  --blood: #b23a3a;
  --uv: #9d86ff;
  --amber: #d8a43a;
  --good: #7fb08a;
  --r-comum: #9a9a94; --r-incomum: #7fb08a; --r-raro: #6fa3d8; --r-epico: #9d86ff; --r-lendario: #d8a43a; --r-mitico: #d85c5c;
  --display: "IM Fell English", Georgia, serif;
  --body: "Figtree", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--bone); font: 16px/1.55 var(--body); min-height: 100vh; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-style: italic; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 .8em; max-width: 62ch; }
.muted { color: var(--mute); }
.amber { color: var(--amber); }

/* A lanterna UV: a luz segue o cursor e revela os símbolos escondidos no fundo */
#uv { position: fixed; inset: 0; pointer-events: none; z-index: 0; --x: 50%; --y: 30%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' fill='none' stroke='%239d86ff' stroke-width='1.4' opacity='.9'><circle cx='70' cy='80' r='28'/><path d='M70 40v80M30 80h80'/><path d='M230 60l40 70h-80z'/><path d='M200 250c20-40 60-40 80 0M240 210v70'/><path d='M60 280l30-40 30 40-30 20z'/><circle cx='300' cy='300' r='14'/><path d='M120 170c10-20 30-20 40 0s30 20 40 0'/></svg>");
  -webkit-mask-image: radial-gradient(circle 220px at var(--x) var(--y), #000 0, transparent 100%);
  mask-image: radial-gradient(circle 220px at var(--x) var(--y), #000 0, transparent 100%);
  opacity: .55; }
#app { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 0 16px 96px; }

header.top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0 14px; border-bottom: 1px solid var(--line); }
header.top .brand { font-family: var(--display); font-style: italic; font-size: 1.6rem; }
.balance { font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.balance small { color: var(--mute); }

nav.tabs { display: flex; gap: 22px; padding: 12px 0; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 28px; scrollbar-width: none; }
nav.tabs button { background: none; border: 0; padding: 6px 0; color: var(--mute); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; }
nav.tabs button[aria-current="page"] { color: var(--bone); border-bottom-color: var(--uv); }
nav.tabs button:hover { color: var(--bone); }

:focus-visible { outline: 2px solid var(--uv); outline-offset: 3px; }

.btn { background: var(--uv); color: #15121f; border: 0; padding: 10px 18px; border-radius: 3px; cursor: pointer; font-weight: 700; }
.btn:hover { filter: brightness(1.1); }
.btn[disabled] { background: var(--line); color: var(--mute); cursor: not-allowed; filter: none; }
.btn.ghost { background: none; color: var(--bone); border: 1px solid var(--mute); }
.btn.ghost:hover { border-color: var(--bone); }
.btn.danger { background: var(--blood); color: #fff; }

.row { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.row .meta { color: var(--mute); font-size: .92rem; }
.list { border-top: 1px solid var(--line); margin: 14px 0 26px; }
.rar { font-weight: 700; }
.rar-COMUM { color: var(--r-comum); } .rar-INCOMUM { color: var(--r-incomum); } .rar-RARO, .rar-RARA { color: var(--r-raro); }
.rar-EPICO, .rar-EPICA { color: var(--r-epico); } .rar-LENDARIO { color: var(--r-lendario); } .rar-MITICO { color: var(--r-mitico); }

.stack > * + * { margin-top: 26px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; } }

.odds { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.odds td { padding: 4px 0; border-bottom: 1px dotted var(--line); }
.odds td:last-child { text-align: right; color: var(--mute); }

.field { display: grid; gap: 6px; margin: 12px 0; max-width: 360px; }
.field input, .field select { background: var(--bg2); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; }
.field input:focus, .field select:focus { border-color: var(--uv); outline: none; }

/* A cena do inimigo: silhueta que surge da escuridão ao abrir o duelo */
.scene { position: relative; display: grid; place-items: center; padding: 28px 0 10px; }
.scene svg { width: min(260px, 70vw); height: auto; }
.scene .enemy { fill: #07080a; stroke: var(--blood); stroke-width: 2; filter: drop-shadow(0 0 22px rgba(178,58,58,.35)); animation: emerge 1.4s ease-out both; }
.scene .eye { fill: var(--blood); }
.scene figcaption { font-family: var(--display); font-style: italic; font-size: 1.7rem; margin-top: 6px; }
@keyframes emerge { from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: drop-shadow(0 0 22px rgba(178,58,58,.35)); } }

.weapon { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.weapon:has(input:checked) { background: rgba(157,134,255,.1); box-shadow: inset 3px 0 var(--uv); }
.weapon .pct { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.tag { font-size: .85rem; color: var(--mute); }
.tag.up { color: var(--good); } .tag.down { color: var(--blood); }

.rooms { display: flex; gap: 8px; margin: 10px 0 4px; }
.rooms span { flex: 1; height: 6px; background: var(--line); }
.rooms span.done { background: var(--good); } .rooms span.now { background: var(--uv); } .rooms span.lost { background: var(--blood); }

dialog { background: var(--bg2); color: var(--bone); border: 1px solid var(--line); border-radius: 4px; padding: 28px; max-width: min(520px, 92vw); width: 100%; }
dialog::backdrop { background: rgba(5,6,8,.82); }
.reveal { text-align: center; }
.reveal .name { font-family: var(--display); font-style: italic; font-size: 2.3rem; animation: rise .9s ease-out both; }
.reveal .fine { font-size: .82rem; color: var(--mute); word-break: break-all; margin-top: 16px; }
@keyframes rise { from { opacity: 0; letter-spacing: .25em; } to { opacity: 1; letter-spacing: 0; } }

#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--blood); color: #fff; padding: 10px 16px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 10; max-width: 90vw; }
#toast.show { opacity: 1; }
.notice { border-left: 3px solid var(--amber); padding: 6px 14px; color: var(--bone); background: rgba(216,164,58,.07); margin: 14px 0; max-width: 62ch; }
.fee td { padding: 4px 14px 4px 0; } .fee tr.now td { color: var(--amber); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .scene .enemy, .reveal .name { animation: none; } }
section > h3 + * { margin-top: 10px; }

/* retratos dos heróis */
.hrow { display: flex; align-items: center; gap: 12px; }
.hero-img { display: block; object-fit: cover; border-radius: 6px; background: #0b0c0d; border: 2px solid var(--rc, var(--line)); box-shadow: 0 0 0 1px #000, 0 0 12px -4px var(--rc, transparent); flex: none; }
.rf-COMUM { --rc: var(--r-comum); } .rf-INCOMUM { --rc: var(--r-incomum); } .rf-RARO { --rc: var(--r-raro); }
.rf-EPICO { --rc: var(--r-epico); } .rf-LENDARIO { --rc: var(--r-lendario); } .rf-MITICO { --rc: var(--r-mitico); }
.rf-RARA { --rc: var(--r-raro); } .rf-EPICA { --rc: var(--r-epico); }

/* retratos dos inimigos */
.scene .enemy-img { width: min(240px, 66vw); height: auto; aspect-ratio: 4 / 5; border-radius: 8px; border: 2px solid var(--blood); box-shadow: 0 0 0 1px #000, 0 0 28px -6px rgba(178,58,58,.55); animation: emerge 1.4s ease-out both; }

.copyrow { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.copyrow input { flex: 1 1 220px; min-width: 0; }
.copyrow .btn { white-space: nowrap; }
.field:has(.copyrow) { max-width: 560px; }

.music-btn { position: fixed; right: 14px; bottom: 14px; z-index: 50; background: rgba(18,19,22,.85); color: var(--ink2, #b8b4a8); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .85rem; cursor: pointer; backdrop-filter: blur(4px); }
.music-btn:hover { border-color: var(--uv); color: #fff; }
.music-btn[aria-pressed="true"] { color: var(--amber, #e0b050); }