:root {
  --bg: #07070c;
  --panel: #12121b;
  --panel-2: #1a1a27;
  --ink: #f4efe4;
  --muted: #b7b0a3;
  --gold: #e8c36a;
  --ember: #e05a2b;
  --water: #3aa0d8;
  --earth: #8bc34a;
  --air: #c9d6e3;
  --shadow: #8b6cff;
  --light: #f3e07a;
  --metal: #9aa3b2;
  --poison: #8fd14f;
  --line: rgba(255,255,255,.08);
  --ok: #6ee7a8;
  --bad: #ff6b6b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Outfit, system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, #2a1630 0%, transparent 50%),
    radial-gradient(900px 500px at 110% 10%, #14243a 0%, transparent 45%),
    var(--bg);
  color: var(--ink);
  min-height: 100%;
}

#app { max-width: 1100px; margin: 0 auto; padding: 20px 18px 48px; position: relative; }

.bg-orbs span {
  position: fixed; border-radius: 50%; filter: blur(50px); opacity: .25; pointer-events: none; z-index: 0;
}
.bg-orbs span:nth-child(1) { width: 280px; height: 280px; background: #6b2d1a; top: 10%; left: -60px; }
.bg-orbs span:nth-child(2) { width: 220px; height: 220px; background: #1b3a6b; bottom: 8%; right: -40px; }
.bg-orbs span:nth-child(3) { width: 180px; height: 180px; background: #3d2466; top: 50%; left: 40%; }

.topbar, main { position: relative; z-index: 1; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #3a2418, #1a1210);
  border: 1px solid rgba(232,195,106,.35);
  font-size: 20px;
}
.brand strong { display: block; font-family: Cinzel, serif; letter-spacing: .04em; }
.brand small { color: var(--muted); }
.meta { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.chip {
  background: #20180f; border: 1px solid rgba(232,195,106,.3);
  color: var(--gold); padding: 6px 10px; border-radius: 999px; font-weight: 600;
}

.screen { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1, h2, h3 { font-family: Cinzel, serif; }
h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 8px 0 10px; }
.lead { color: var(--muted); max-width: 640px; margin-bottom: 28px; }

.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 800px) { .modes { grid-template-columns: 1fr; } }

.mode-card {
  background: linear-gradient(180deg, #1c1c28, #12121a);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px 18px;
  cursor: pointer;
  min-height: 210px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mode-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,195,106,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.mode-icon { font-size: 28px; margin-bottom: 12px; }
.mode-card h3 { margin-bottom: 8px; }
.mode-card p { color: var(--muted); font-size: 14px; }
.mode-card footer { margin-top: 16px; color: var(--gold); font-size: 13px; font-weight: 600; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.btn {
  border: 1px solid var(--line);
  background: #1b1b26;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
}
.btn:hover { border-color: rgba(232,195,106,.4); }
.btn.gold { background: linear-gradient(180deg, #d6b056, #b8892e); color: #1a1408; border: none; font-weight: 700; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.monster {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  position: relative;
}
.monster.selected { outline: 2px solid var(--gold); }
.monster .art {
  height: 92px; border-radius: 12px; display: grid; place-items: center;
  font-size: 42px; margin-bottom: 10px;
}
.monster h4 { font-size: 15px; margin-bottom: 4px; }
.stats { display: flex; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.badge-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; min-height: 22px; }
.badge {
  font-size: 10px; padding: 3px 7px; border-radius: 999px; font-weight: 700;
}
.type-agua { background: #0e243a; color: #7cc8ff; }
.type-fogo { background: #3a160e; color: #ff8a5b; }
.type-gelo { background: #163040; color: #b7e7ff; }
.type-raio { background: #2a2410; color: #ffe28a; }
.type-planta { background: #1c2a12; color: #b6e07a; }
.type-tecnologico { background: #23262c; color: #c5ccd6; }
.type-cosmico { background: #1a1633; color: #c9b6ff; }
.type-sangue { background: #3a1014; color: #ff8a9a; }
.type-maldicao { background: #22183a; color: #c2b0ff; }
.type-vivo-morto { background: #1a2218; color: #c5d6b0; }
.type-vazio { background: #121018; color: #9aa0b8; }
.type-guerra { background: #3a160e; color: #ff8a5b; }
.type-paz { background: #33280e; color: #ffe28a; }
.type-magico { background: #241833; color: #e0b0ff; }

.art.agua { background: linear-gradient(160deg, #16324a, #0a121a); }
.art.fogo { background: linear-gradient(160deg, #5a2214, #1a0c0a); }
.art.gelo { background: linear-gradient(160deg, #1a3344, #0a1218); }
.art.raio { background: linear-gradient(160deg, #3a3012, #14100a); }
.art.planta { background: linear-gradient(160deg, #243414, #0d120a); }
.art.tecnologico { background: linear-gradient(160deg, #2c3138, #121416); }
.art.cosmico { background: linear-gradient(160deg, #2a1a4a, #100c1a); }
.art.sangue { background: linear-gradient(160deg, #4a1418, #14080a); }
.art.maldicao { background: linear-gradient(160deg, #2a1a4a, #100c1a); }
.art.vivo-morto { background: linear-gradient(160deg, #24301c, #0e120c); }
.art.vazio { background: linear-gradient(160deg, #16141c, #08080c); }
.art.guerra { background: linear-gradient(160deg, #5a2214, #1a0c0a); }
.art.paz { background: linear-gradient(160deg, #4a3a12, #16120a); }
.art.magico { background: linear-gradient(160deg, #3a2450, #120c18); }

.story-wrap, .battle-wrap { display: grid; gap: 16px; }
.panel {
  background: rgba(18,18,27,.86);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}
.chapter { color: var(--gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 800px) { .arena { grid-template-columns: 1fr; } }
.side h3 { margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.fighter { text-align: center; }
.fighter .art { height: 130px; font-size: 64px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 10px; }
.hpbar { height: 10px; background: #2a2a36; border-radius: 999px; overflow: hidden; margin: 8px 0; }
.hpbar > i { display: block; height: 100%; background: linear-gradient(90deg, #6ee7a8, #2dd4bf); width: 100%; }
.hpbar.energy { margin-top: 4px; }
.hpbar.energy > i { background: linear-gradient(90deg, #7cb6ff, #3aa0d8); }
.vs {
  display: grid; place-items: center;
  font-family: Cinzel, serif; font-size: 28px; color: var(--gold);
}
.log {
  min-height: 90px; color: var(--muted); font-size: 14px; line-height: 1.5;
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.actions.specials { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

.hint { color: var(--muted); font-size: 13px; margin: 8px 0 16px; }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #1d1d28; border: 1px solid var(--line); padding: 10px 14px; border-radius: 12px;
  z-index: 9;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.form-grid .wide { grid-column: 1 / -1; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.form-grid input, .form-grid select {
  background: #101018;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit;
}
.form-grid small { font-size: 11px; opacity: .8; }
.power-row {
  display: grid;
  grid-template-columns: 70px 1.2fr 1.2fr 90px 90px;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) {
  .form-grid, .power-row { grid-template-columns: 1fr; }
}

.art-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.fighter .art-img { border-radius: 16px; }
.art-preview { margin-top: 10px; min-height: 120px; border: 1px dashed var(--line); border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: var(--muted); }
.art-preview img { width: 100%; max-height: 280px; object-fit: cover; display: block; }
textarea { background: #101018; border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 9px 10px; font: inherit; resize: vertical; width: 100%; }

.rarity-normal { border-color: #5a5a66; }
.rarity-bronze { border-color: #b8874a; }
.rarity-prata { border-color: #c5d0dc; }
.rarity-ouro { border-color: #e8c36a; }
.rarity-diamante { border-color: #7cc8ff; }
.rarity-divina { border-color: #e0b0ff; box-shadow: 0 0 18px rgba(180,120,255,.25); }
.chest-card .toolbar { margin-top: 8px; }