:root {
  --bg: #14111c;
  --card: #1f1a2b;
  --card2: #2a2339;
  --line: #3a3150;
  --text: #ece6f7;
  --muted: #9a90b0;
  --gold: #ffc94a;
  --accent: #8b5cf6;
  --good: #3ecf8e;
  --bad: #ef5a5a;
  --common: #b8b8b8;
  --rare: #4aa3ff;
  --epic: #b366ff;
  --legendary: #ffb020;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(circle at 30% 0%, #2a1f40 0%, var(--bg) 60%) fixed;
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}
button, input, textarea { font: inherit; color: inherit; }
button {
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; transition: background .15s, transform .05s;
}
button:hover:not(:disabled) { background: #362d4a; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.small { padding: 4px 10px; }
button.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; }
button.primary:hover:not(:disabled) { background: #7c4ae8; }
button.danger { border-color: var(--bad); color: var(--bad); }
input, textarea {
  background: #120f19; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%;
}
textarea { resize: vertical; font-size: 12px; }
h3 { margin: 18px 0 8px; font-size: 16px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.center { text-align: center; }
.highlight { color: var(--gold); font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.row { display: flex; gap: 8px; margin: 8px 0; }
.row input { flex: 1; }

/* Topo */
.top {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  position: sticky; top: 0; z-index: 5; background: rgba(20,17,28,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; font-size: 18px; white-space: nowrap; }
.stats { display: flex; gap: 14px; flex: 1; justify-content: center; flex-wrap: wrap; }
.stat { display: flex; gap: 5px; align-items: baseline; }
.stat b { font-variant-numeric: tabular-nums; }
#gold { color: var(--gold); }

main {
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 14px;
  max-width: 1100px; margin: 14px auto; padding: 0 14px;
}
@media (max-width: 760px) {
  main { grid-template-columns: 1fr; }
  .brand span { display: none; }
}

/* Batalha */
.floorbar { display: flex; align-items: center; justify-content: space-between; }
.floorinfo { text-align: center; }
.floorinfo b { font-size: 20px; }
.monster {
  position: relative; user-select: none; cursor: pointer; text-align: center;
  padding: 18px 0 8px; -webkit-tap-highlight-color: transparent;
}
.emoji { font-size: 96px; line-height: 1.1; transition: transform .08s; display: inline-block; }
.monster.hit .emoji { transform: scale(.9) rotate(-4deg); }
.monster.boss .emoji { font-size: 120px; filter: drop-shadow(0 0 14px rgba(239,90,90,.6)); }
.mname { font-weight: 700; margin-top: 4px; }
.monster.boss .mname { color: var(--bad); }
.dmgfloat {
  position: absolute; left: 50%; top: 40%; pointer-events: none; font-weight: 800; color: var(--gold);
  text-shadow: 0 2px 4px #000; animation: floatUp .7s ease-out forwards;
}
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -60px); } }
.hpbar {
  position: relative; height: 22px; background: #120f19; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--line); margin: 8px 0;
}
#hpFill { height: 100%; background: linear-gradient(90deg, #c0392b, #ef5a5a); width: 100%; transition: width .1s linear; }
#hpText { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 20px; font-weight: 600; }
.bosstimer { height: 6px; background: #120f19; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
#bossFill { height: 100%; background: var(--gold); width: 100%; }
.controls { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle input { width: auto; }
.boost { background: linear-gradient(90deg, #4d3a12, #6b4d10); border-color: #8a6a1c; }
.log { margin-top: 12px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; min-height: 120px; }
.log div { color: var(--muted); animation: fadeIn .3s; }
.log div:first-child { color: var(--text); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Painel */
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button.active { background: var(--accent); border-color: var(--accent); }
.tab { display: none; }
.tab.active { display: block; }
.buymult { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.buymult button.active { border-color: var(--gold); color: var(--gold); }

.hero {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center;
  padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--card2);
}
.hero .hicon { font-size: 34px; text-align: center; }
.hero .hname { font-weight: 700; }
.hero .hname small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.hero .hdesc { font-size: 13px; color: var(--muted); }
.hero .hitem { font-size: 12px; }
.hero .hbuy { min-width: 120px; text-align: center; }
.hero .hbuy .cost { display: block; font-size: 12px; color: var(--gold); }
.hero.locked { opacity: .6; }
.hero.can .hbuy { border-color: var(--good); }
.r-common { color: var(--common); } .r-rare { color: var(--rare); }
.r-epic { color: var(--epic); } .r-legendary { color: var(--legendary); }

.statsTable { width: 100%; border-collapse: collapse; }
.statsTable td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.statsTable td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ranklist { padding-left: 28px; }
.ranklist li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.ranklist li span { float: right; color: var(--gold); }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
.modal-box { max-width: 380px; text-align: center; }

/* ---------- Zonas ---------- */
.battle { position: relative; overflow: hidden; transition: box-shadow .3s, background .6s; }
.battle.zone-cave { background: linear-gradient(180deg, #1d2430 0%, var(--card) 55%); }
.battle.zone-crypt { background: linear-gradient(180deg, #23202e 0%, var(--card) 55%); }
.battle.zone-forest { background: linear-gradient(180deg, #17291f 0%, var(--card) 55%); }
.battle.zone-volcano { background: linear-gradient(180deg, #34190f 0%, var(--card) 55%); }
.battle.zone-abyss { background: linear-gradient(180deg, #1d0f2e 0%, var(--card) 55%); }
.battle.rage { box-shadow: inset 0 0 40px rgba(239,90,90,.35); }
.battle.goldrain { box-shadow: inset 0 0 40px rgba(255,201,74,.35); }
.battle.rage.goldrain { box-shadow: inset 0 0 40px rgba(255,140,60,.4); }
.battle.shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, -1px); }
}

/* ---------- Monstro ---------- */
.monster { overflow: visible; }
.emoji.spawn { animation: spawnIn .25s ease-out; }
@keyframes spawnIn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.monster.hit .emoji { animation: hitShake .12s; }
@keyframes hitShake { 50% { transform: scale(.9) rotate(-5deg); filter: brightness(1.8); } }
.monster .emoji.ghost { position: absolute; left: 0; right: 0; top: 18px; display: block; text-align: center; pointer-events: none; }
.monster .emoji.ghost.die { animation: die .4s ease-in forwards; }
@keyframes die { from { transform: none; } to { transform: scale(1.5) rotate(25deg); opacity: 0; filter: brightness(3) blur(2px); } }
.float {
  position: absolute; transform: translateX(-50%); pointer-events: none; font-weight: 800; white-space: nowrap;
  text-shadow: 0 2px 4px #000; animation: floatUp .9s ease-out forwards; z-index: 2;
}
.float.dmg { color: #fff; }
.float.dmg.big { color: #ff7a59; font-size: 28px; }
.float.gold { color: var(--gold); font-size: 14px; }
@keyframes floatUp { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -60px; } }
.particle { position: absolute; color: var(--gold); pointer-events: none; font-size: 14px; }
.boss-banner {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(0); z-index: 3;
  font-size: 34px; font-weight: 900; color: var(--bad); letter-spacing: 4px; pointer-events: none;
  text-shadow: 0 0 20px rgba(239,90,90,.8), 0 3px 0 #000; opacity: 0;
}
.boss-banner.show { animation: banner 1.6s ease-out; }
@keyframes banner {
  0% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
#bossFill.low { background: var(--bad); animation: pulse .5s infinite alternate; }
@keyframes pulse { to { opacity: .4; } }

/* ---------- Grupo de heróis ---------- */
.party { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; min-height: 36px; flex-wrap: wrap; }
.member { font-size: 26px; width: 38px; text-align: center; transition: transform .1s; }
.member.lunge { animation: lunge .3s; }
@keyframes lunge { 40% { transform: translateY(-14px) scale(1.2); } }
.member.cast { animation: cast .3s; }
@keyframes cast { 50% { transform: scale(1.2); filter: brightness(1.6); } }
.member.glow { animation: glow .6s; }
@keyframes glow { 50% { filter: drop-shadow(0 0 8px #fff6a0) brightness(1.5); } }
.projectile { position: absolute; left: 0; top: 0; font-size: 18px; pointer-events: none; z-index: 2; }

/* ---------- Habilidades ---------- */
.skillbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.skill {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 2px; gap: 1px;
}
.skill .sicon { font-size: 22px; }
.skill .sname { font-size: 11px; font-weight: 600; line-height: 1.1; text-align: center; }
.skill .scd { font-size: 11px; color: var(--muted); }
.skill kbd { position: absolute; top: 2px; right: 4px; font-size: 9px; color: var(--muted); font-family: inherit; }
.skill.ready { border-color: var(--good); box-shadow: 0 0 8px rgba(62,207,142,.35); }
.skill.ready .scd { color: var(--good); }
.skill.active { border-color: var(--gold); background: #4a3a14; opacity: 1; }
.skill.active .scd { color: var(--gold); }
.skill:disabled.active { cursor: default; }

/* ---------- Heróis ---------- */
.hero.flash { animation: rowFlash .4s; }
@keyframes rowFlash { 30% { background: #3d3360; border-color: var(--gold); } }

/* ---------- Talentos ---------- */
.talent {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; background: var(--card2);
}
.talent .ticon { font-size: 24px; text-align: center; }
.talent .tname { font-weight: 700; }
.talent .tname small { color: var(--muted); font-weight: 400; }
.talent .tdesc { font-size: 13px; }
.talent .tbuy { min-width: 76px; }
.talent.can .tbuy { border-color: var(--good); }

/* ---------- Missões e conquistas ---------- */
.badge {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad);
  color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.mission { padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--card2); }
.mission.done { opacity: .6; }
.mission .mtext small { margin-left: 6px; }
.mbar { height: 8px; background: #120f19; border-radius: 4px; overflow: hidden; margin: 6px 0 8px; }
.mbar div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); transition: width .3s; }
.mclaim { width: 100%; }
.mclaim:not(:disabled) { border-color: var(--good); color: var(--good); }
.chest { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.achgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.ach {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 20px;
  border: 1px solid var(--line); border-radius: 8px; background: #120f19; filter: grayscale(1); opacity: .35; cursor: help;
}
.ach.got { filter: none; opacity: 1; border-color: var(--gold); background: #2d2516; }

/* ---------- Notificações ---------- */
.toasts {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 420px);
}
.toast {
  background: #2a2339; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.5); animation: toastIn .3s ease-out; transition: opacity .5s, transform .5s;
  text-align: center;
}
.toast.toast-ach { border-color: var(--gold); }
.toast.r-legendary { border-color: var(--legendary); box-shadow: 0 0 24px rgba(255,176,32,.5); }
.toast.r-epic { border-color: var(--epic); }
.toast.out { opacity: 0; transform: translateY(-10px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .skill .sname { font-size: 10px; }
  .emoji { font-size: 80px; }
  .monster.boss .emoji { font-size: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; }
}

/* ---------- Cena lateral (masmorra) ---------- */
.battle { --wall-a: #2b3340; --mortar: #1a2028; --floor-a: #39404a; --glow: rgba(255,170,80,.35); }
.battle.zone-cave { --wall-a: #2b3340; --mortar: #1a2028; --floor-a: #3a414b; --glow: rgba(255,170,80,.35); }
.battle.zone-crypt { --wall-a: #2f2b3a; --mortar: #1b1824; --floor-a: #3b3547; --glow: rgba(140,200,255,.32); }
.battle.zone-forest { --wall-a: #1f3427; --mortar: #12211a; --floor-a: #33502d; --glow: rgba(200,255,150,.22); }
.battle.zone-volcano { --wall-a: #3e2017; --mortar: #22100b; --floor-a: #4d2819; --glow: rgba(255,110,40,.5); }
.battle.zone-abyss { --wall-a: #24163c; --mortar: #120a22; --floor-a: #2e1e49; --glow: rgba(190,120,255,.38); }

.stage {
  position: relative; height: 230px; margin: 10px 0 8px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--wall-a); cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; --far: 0px; --near: 0px; --floor: 0px;
}
.stage .layer { position: absolute; left: 0; right: 0; pointer-events: none; }
.stage .far {
  top: 0; bottom: 24%;
  background-color: var(--wall-a);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 35%, transparent 70%, rgba(0,0,0,.45)),
    linear-gradient(var(--mortar) 3px, transparent 3px),
    linear-gradient(90deg, var(--mortar) 3px, transparent 3px),
    linear-gradient(90deg, var(--mortar) 3px, transparent 3px);
  background-size: 100% 100%, 64px 32px, 64px 64px, 64px 64px;
  background-position: 0 0, var(--far) 0, var(--far) 0, calc(var(--far) + 32px) 32px;
}
.stage .near {
  top: 0; bottom: 24%;
  background-image:
    radial-gradient(circle at 50% 30%, var(--glow) 0, transparent 46px),
    linear-gradient(90deg, transparent 0 250px, rgba(0,0,0,.5) 250px 280px, rgba(0,0,0,.2) 280px 284px);
  background-size: 284px 100%, 284px 100%;
  background-position: calc(var(--near) + 120px) 0, var(--near) 0;
}
.stage .floor {
  bottom: 0; height: 24%;
  background-color: var(--floor-a);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.12) 0 2px, rgba(0,0,0,.35) 2px, transparent 40%, rgba(0,0,0,.35)),
    linear-gradient(90deg, rgba(0,0,0,.35) 2px, transparent 2px);
  background-size: 100% 100%, 52px 100%;
  background-position: 0 0, var(--floor) 0;
}
.stage .vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0,0,0,.55));
}
.props { position: absolute; inset: 0; pointer-events: none; }
.prop { position: absolute; bottom: 22%; left: 0; filter: brightness(.65) saturate(.8); will-change: transform; }

/* Grupo */
.stage .party { position: absolute; left: 3%; bottom: 14%; width: 200px; height: 90px; margin: 0; display: block; }
.stage .member {
  position: absolute; font-size: 32px; width: 40px; text-align: center; line-height: 1;
  animation: bob 1.4s ease-in-out infinite; z-index: 1;
}
.stage .member::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 70%; height: 7px; transform: translateX(-50%);
  background: rgba(0,0,0,.45); border-radius: 50%; z-index: -1;
}
.stage.running .member { animation: walk .32s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes walk {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-7px) rotate(5deg); }
}

/* Inimigo */
.stage .monster {
  position: absolute; right: 6%; bottom: 17%; padding: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; cursor: pointer; z-index: 1;
}
.stage .monster::after {
  content: ''; position: absolute; left: 50%; bottom: -2px; width: 64px; height: 12px; transform: translateX(-50%);
  background: rgba(0,0,0,.45); border-radius: 50%; z-index: -1;
}
.stage .monster .emoji { font-size: 78px; line-height: 1; }
.stage .monster.boss .emoji { font-size: 104px; }
.stage .monster.boss::after { width: 90px; }
.stage .mname {
  font-size: 12px; padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,.55); margin-bottom: 4px; white-space: nowrap;
}
.stage .monster .emoji.ghost { top: auto; }
.stage .boss-banner { top: 38%; }
.stage .projectile { z-index: 2; }

@media (max-width: 760px) {
  .stage { height: 200px; }
  .stage .member { font-size: 26px; width: 32px; }
  .stage .monster .emoji { font-size: 64px; }
  .stage .monster.boss .emoji { font-size: 84px; }
}

/* ---------- Conta / login ---------- */
.account-btn { display: flex; align-items: center; gap: 6px; max-width: 160px; }
.account-btn img { width: 22px; height: 22px; border-radius: 50%; }
.account-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2); }
.account-card img { width: 44px; height: 44px; border-radius: 50%; background: #120f19; }
.login-box { max-width: 400px; }
.login-hero { font-size: 34px; letter-spacing: 4px; margin-bottom: 4px; }
.google-btn { display: flex; justify-content: center; min-height: 44px; margin: 16px 0 6px; }
.link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; margin-top: 6px; }
.link-btn:hover:not(:disabled) { background: none; color: var(--text); }
@media (max-width: 760px) { .account-btn span { display: none; } }
@media (max-width: 760px) {
  .top { gap: 6px; padding: 8px 10px; }
  .stats { gap: 10px; font-size: 13px; }
  .top button.small { padding: 4px 8px; }
}
.legal-links { margin-top: 14px; }
.legal-links a { color: var(--muted); }

/* ---------- Trilha de níveis da fase ---------- */
.leveltrack { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 8px; }
.lvl {
  padding: 3px 0; font-size: 11px; font-weight: 700; border-radius: 6px; color: var(--muted);
  background: #120f19; border: 1px solid var(--line); line-height: 1.4;
}
.lvl.done { background: #2b2440; color: var(--text); border-color: #4b3f6b; }
.lvl.boss { font-size: 12px; }
.lvl.boss.done { background: #3d2f14; border-color: #8a6a1c; }
.lvl.current { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 8px rgba(255,201,74,.35); }
.lvl.boss.current { border-color: var(--bad); box-shadow: 0 0 10px rgba(239,90,90,.5); }
.lvl:disabled { opacity: .45; }

/* ---------- Barras de vida e números de golpe ---------- */
#hpTrail, #hpFill { position: absolute; left: 0; top: 0; height: 100%; }
#hpTrail { width: 100%; background: #f6e3a8; transition: width .45s ease .25s; }
#hpText { z-index: 1; text-shadow: 0 1px 2px #000; }
.stage .mhp {
  width: 70px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.15);
  overflow: hidden; margin-bottom: 3px;
}
.stage .monster.boss .mhp { width: 100px; height: 8px; }
#mhpFill { height: 100%; width: 100%; background: hsl(120, 75%, 50%); transition: width .12s linear; }
.float.dmg.hero { font-size: 15px; }
.float.dmg.crit {
  font-size: 24px; font-weight: 900; color: #ff9b3d !important; z-index: 3;
  animation: critPop .9s ease-out forwards;
  text-shadow: 0 0 8px rgba(255,120,40,.8), 0 2px 3px #000;
}
@keyframes critPop {
  0% { opacity: 0; transform: translateX(-50%) scale(.4); margin-top: 0; }
  15% { opacity: 1; transform: translateX(-50%) scale(1.35); }
  30% { transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); margin-top: -50px; }
}

/* ---------- Escolha do herói inicial ---------- */
.starter-box { max-width: 460px; }
.starter-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.starter {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px;
  border-radius: 12px; background: var(--card2);
}
.starter .sicon { font-size: 40px; transition: transform .15s; }
.starter:hover:not(:disabled) { border-color: var(--gold); background: #362d4a; }
.starter:hover .sicon { transform: scale(1.15) translateY(-3px); }
.starter small { font-size: 12px; line-height: 1.3; text-align: center; }

/* ---------- Cenário em canvas ---------- */
.stage .bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.stage .vignette { background: radial-gradient(ellipse at 50% 55%, transparent 50%, rgba(0,0,0,.6)); }