/* ===== Soul Reaper — tema visual v2 (dark gothic, molduras bronze) ===== */
@font-face { font-family: "Cinzel"; font-weight: 400; src: url("assets/fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; font-weight: 600; src: url("assets/fonts/cinzel-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; font-weight: 700; src: url("assets/fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; font-weight: 700; src: url("assets/fonts/cinzel-decorative-latin-700-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Crimson Pro"; font-weight: 400; src: url("assets/fonts/crimson-pro-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Crimson Pro"; font-weight: 600; src: url("assets/fonts/crimson-pro-latin-600-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #07050b; --panel: #130e1b; --panel2: #1b1426; --line: #4a3a2a;
  --text: #ebe4d4; --muted: #a39cb0; --crimson: #c9374c; --crimson-d: #5e0f1c;
  --spectral: #7cc7ea; --gold: #d8b673; --gold-d: #9a7a43; --violet: #9a6bff; --danger: #e0556a; --ok: #7bd49a;
  --nav-h: 66px; --top-h: 58px;
  --f-title: "Cinzel", Georgia, serif; --f-body: "Crimson Pro", Georgia, serif;
  --c-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 15V4a2.5 2.5 0 0 1 2.5-2.5H15' fill='none' stroke='%23d8b673' stroke-width='1.4'/%3E%3Ccircle cx='1.5' cy='1.5' r='1.6' fill='%23d8b673'/%3E%3C/svg%3E");
  --c-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1.5H12a2.5 2.5 0 0 1 2.5 2.5V15' fill='none' stroke='%23d8b673' stroke-width='1.4'/%3E%3Ccircle cx='14.5' cy='1.5' r='1.6' fill='%23d8b673'/%3E%3C/svg%3E");
  --c-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1V12a2.5 2.5 0 0 0 2.5 2.5H15' fill='none' stroke='%23d8b673' stroke-width='1.4'/%3E%3Ccircle cx='1.5' cy='14.5' r='1.6' fill='%23d8b673'/%3E%3C/svg%3E");
  --c-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 1V12a2.5 2.5 0 0 1-2.5 2.5H1' fill='none' stroke='%23d8b673' stroke-width='1.4'/%3E%3Ccircle cx='14.5' cy='14.5' r='1.6' fill='%23d8b673'/%3E%3C/svg%3E");
}
html { background: #030206; }
body { background: radial-gradient(ellipse at 50% 0, #1a1026 0, #07050b 60%) fixed; font-family: var(--f-body); font-size: 1.06rem; color: var(--text); }
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; background: var(--bg); box-shadow: 0 0 0 1px #2a2030, 0 0 60px #000; }
h1, h2, h3 { font-family: var(--f-title); }
h2 { font-size: 1.25rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 6px #000; margin: .2rem 0 .3rem; }
h3 { display: flex; align-items: center; gap: .6rem; justify-content: center; color: #cdbd98; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; margin: .1rem 0 .6rem; }
h3::before, h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #9a7a4399); }
h3::after { transform: scaleX(-1); }
.muted { color: var(--muted); } .small { font-size: .9rem; }

/* ----- moldura ornamentada ----- */
.panel { position: relative; background: linear-gradient(180deg, #181122f2 0%, #0e0914f2 100%); border: 1px solid #55432f; border-radius: 10px; padding: .9rem .85rem;
  box-shadow: inset 0 0 0 1px #000c, inset 0 0 26px #000a, 0 6px 16px #0009; }
.panel::before { content: ""; position: absolute; inset: 3px; border: 1px solid #d8b6732a; border-radius: 7px; pointer-events: none; }
.panel::after { content: ""; position: absolute; inset: -1px; pointer-events: none;
  background: var(--c-tl) top left / 14px no-repeat, var(--c-tr) top right / 14px no-repeat, var(--c-bl) bottom left / 14px no-repeat, var(--c-br) bottom right / 14px no-repeat; }

/* ----- botões ----- */
.btn { min-height: 46px; padding: .5rem .95rem; border-radius: 8px; border: 1px solid #6e5435; background: linear-gradient(180deg, #2a1f38 0%, #170f22 100%); color: #eadfc4;
  font: 600 .82rem var(--f-title); letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 12px #0007, 0 2px 0 #000b; cursor: pointer; }
.btn:hover { border-color: var(--gold); } .btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; filter: saturate(.5); }
.btn-primary { background: linear-gradient(180deg, #8a1c30 0%, #4a0c18 100%); border-color: #e0566b; color: #fff0f2; box-shadow: inset 0 0 16px #ff5f7a44, 0 0 12px #c9374c66, 0 2px 0 #000b; }
.btn-violet { background: linear-gradient(180deg, #4b2a8a 0%, #24104a 100%); border-color: #9a6bff; color: #f0e8ff; box-shadow: inset 0 0 14px #a885ff40, 0 0 10px #7b4bd155, 0 2px 0 #000b; }
.btn-danger { border-color: #e0556a; color: #ffc1ca; }
.btn.block { display: block; width: 100%; }
.btn.sm { min-height: 34px; padding: .25rem .6rem; font-size: .72rem; }
.tag { border: 1px solid #9a7a43; color: var(--gold); background: #0008; border-radius: 6px; padding: .05rem .4rem; font: 600 .68rem var(--f-title); letter-spacing: .06em; }

/* ----- barra superior ----- */
.topbar { position: sticky; top: 0; z-index: 15; height: calc(var(--top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) .55rem 0; display: flex; align-items: center; gap: .55rem;
  background: linear-gradient(180deg, #170f20f5, #0b0710f5); border-bottom: 1px solid #5a4630; box-shadow: 0 4px 12px #000a; }
.avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--gold); background: #000 center top / cover; box-shadow: 0 0 10px #c9374c55, inset 0 0 6px #000; padding: 0; cursor: pointer; }
.who { min-width: 0; flex: 1 1 auto; line-height: 1.1; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; color: inherit; }
.who b { display: block; font: 700 .82rem var(--f-title); letter-spacing: .06em; color: #f1e6c8; }
.who span { font: 600 .68rem var(--f-title); color: var(--muted); letter-spacing: .08em; }
.xpbar { height: 5px; margin-top: 3px; border-radius: 3px; background: #000; border: 1px solid #3a2c22; overflow: hidden; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #7a1424, #e0556a); }
.chips { display: flex; gap: .3rem; flex: none; }
.chip { display: flex; align-items: center; gap: .25rem; padding: .12rem .45rem .12rem .15rem; border-radius: 999px; background: #000a; border: 1px solid #5a4630; font: 600 .74rem var(--f-title); color: #f1e6c8; }
.chip img { width: 20px; height: 20px; object-fit: contain; }
.chip .g { width: 20px; text-align: center; color: var(--gold); }
.topbtn { width: 38px; height: 38px; flex: none; border-radius: 8px; border: 1px solid #5a4630; background: #0009; color: var(--gold); font-size: 1.1rem; cursor: pointer; }

/* ----- barra inferior ----- */
.bottombar { left: 50%; right: auto; width: min(100%, 480px); transform: translateX(-50%); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(180deg, #17101f, #08050c); border-top: 1px solid #6e5435; box-shadow: 0 -6px 16px #000b; z-index: 20; }
.nav-btn { min-height: 0; gap: 1px; font: 600 .6rem var(--f-title); letter-spacing: .08em; text-transform: uppercase; color: #a39cb0; position: relative; }
.nav-btn .ico { font-size: 1.4rem; height: 34px; display: grid; place-items: center; }
.nav-img { width: 34px; height: 34px; object-fit: contain; filter: saturate(.8) brightness(.85); }
.nav-btn.active { color: #ffe9b8; box-shadow: none; background: radial-gradient(ellipse at 50% 100%, #c9374c55, transparent 70%); }
.nav-btn.active .nav-img { filter: drop-shadow(0 0 6px #ffcf6a); }
.nav-btn.active::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 3px; height: 2px; background: #e0566b; box-shadow: 0 0 8px #e0566b; }
.rail { display: none !important; }
.sheet { left: 50%; right: auto; transform: translateX(calc(-50% + 150px)); }

.main { max-width: none; margin: 0; padding: .8rem .75rem calc(var(--nav-h) + 1.2rem + env(safe-area-inset-bottom)); }
.main.solo { padding: 0; }
.main.bleed { padding: 0; }
@media (min-width: 900px) { .main { margin: 0; } .main.solo { margin: 0; } }

/* cabeçalho de subtela: ← título */
.subhead { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; margin-bottom: .2rem; }
.subhead h2 { margin: 0; }
.backbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #6e5435; background: #120c1a; color: var(--gold); font-size: 1.1rem; cursor: pointer; }

/* listas dentro de painéis */
.facilities li { background: linear-gradient(180deg, #1d1529, #130d1c); border: 1px solid #3f3122; border-radius: 8px; }
.toast { background: #140e1c; border-color: #6e5435; font-family: var(--f-body); }
.dialog.panel { background: linear-gradient(180deg, #1a1325, #0d0812); }
.kv dt { font-family: var(--f-body); }

/* ===== Tela inicial ===== */
.title-screen { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0; padding: 0 1.4rem calc(2rem + env(safe-area-inset-bottom)); background-size: cover; background-position: 50% 0; overflow: hidden; }
.title-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 0%, #0000 28%, #07050bcc 58%, #07050b 100%); pointer-events: none; }
.title-screen > * { position: relative; }
.title-logo { width: min(86%, 380px); margin: 0 auto .6rem; display: block; mix-blend-mode: screen; filter: drop-shadow(0 4px 14px #000); }
.title-sub { font: 600 .72rem var(--f-title); letter-spacing: .16em; text-transform: uppercase; color: #b9a98a; text-align: center; margin: 0 0 1.1rem; }
.menu { display: grid; width: min(100%, 300px); gap: .25rem; }
.menu-item { background: none; border: 0; padding: .78rem 0; font: 600 1.12rem var(--f-title); letter-spacing: .1em; color: #d8ccb0; text-shadow: 0 2px 6px #000; cursor: pointer; position: relative; }
.menu-item:disabled { opacity: .35; }
.menu-item.hot { color: #fff; border-top: 1px solid #c9374c; border-bottom: 1px solid #c9374c; background: radial-gradient(ellipse at 50% 50%, #8a1c3088, transparent 75%); text-shadow: 0 0 12px #ff5f7a; }
.title-foot { margin-top: 1.1rem; font-size: .8rem; color: #8b8396; text-align: center; }
.slotsheet { position: fixed; inset: 0; z-index: 40; background: #000c; display: flex; align-items: flex-end; justify-content: center; }
.slotsheet .inner { width: min(100%, 480px); max-height: 88dvh; overflow: auto; padding: .8rem .8rem 1.4rem; background: linear-gradient(180deg, #150f1d, #07050b); border-top: 1px solid #6e5435; border-radius: 14px 14px 0 0; display: grid; gap: .7rem; }

/* ===== Fortaleza (hub) ===== */
.hub { position: relative; height: calc(100dvh - var(--top-h) - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 480px; background: #07050b center / cover no-repeat; overflow: hidden; }
.hub::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #07050b99 0%, #0000 22%, #0000 70%, #07050bcc 100%); pointer-events: none; }
.hs { position: absolute; transform: translate(-50%, -50%); width: 78px; display: grid; justify-items: center; gap: 2px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.hs .ic { position: relative; width: 52px; height: 52px; filter: drop-shadow(0 3px 5px #000); }
.hs .ic img { width: 100%; height: 100%; object-fit: contain; }
.hs .lv { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #1b0f12; border: 1px solid var(--gold); color: var(--gold); font: 700 .65rem/18px var(--f-title); text-align: center; }
.hs .nm { font: 700 .6rem/1.1 var(--f-title); letter-spacing: .05em; text-align: center; color: #f1e6c8; text-shadow: 0 1px 3px #000, 0 0 8px #000; background: #08050dcc; border: 1px solid #5a4630; border-radius: 5px; padding: 2px 5px; }
.hs.off .ic { filter: grayscale(.85) brightness(.6) drop-shadow(0 3px 5px #000); }
.hs.off .nm { color: #9c93a8; }
.hs.can .ic { animation: hsPulse 1.8s infinite; }
.reduce-motion .hs.can .ic { animation: none; }
@keyframes hsPulse { 50% { filter: drop-shadow(0 0 10px #ffd36a) drop-shadow(0 3px 5px #000); } }
.hub-center { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.hub-center b { display: block; font: 700 1.05rem var(--f-title); letter-spacing: .12em; text-transform: uppercase; color: #fff1d0; text-shadow: 0 2px 8px #000, 0 0 16px #000; }
.hub-center span { font: 600 .72rem var(--f-title); letter-spacing: .1em; color: var(--gold); text-shadow: 0 1px 4px #000; }
.fsheet { position: fixed; inset: 0; z-index: 40; background: #000b; display: flex; align-items: flex-end; justify-content: center; }
.fsheet .inner { width: min(100%, 480px); padding: .9rem .9rem calc(1.2rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #1a1325, #08050c); border-top: 1px solid #6e5435; border-radius: 14px 14px 0 0; display: grid; gap: .6rem; }
.fsheet .fhead { display: grid; grid-template-columns: 64px 1fr; gap: .7rem; align-items: center; }
.fsheet .fhead img { width: 64px; height: 64px; object-fit: contain; }
.fsheet .fhead b { font: 700 1rem var(--f-title); letter-spacing: .06em; color: var(--gold); display: block; }
.fsheet .acts { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.fsheet .acts .btn:only-child { grid-column: 1 / -1; }

/* ===== Mapa-múndi ===== */
.worldwrap { padding: .6rem .5rem 0; }
.mapbox { position: relative; width: 100%; aspect-ratio: 2 / 3; background: #07050b center / 100% 100% no-repeat; border-radius: 10px; border: 1px solid #6e5435; box-shadow: 0 0 0 1px #000, 0 8px 20px #000a; overflow: hidden; }
.mapbox::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 40px #000c; pointer-events: none; }
.rg { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.rg .rn { font: 700 .68rem/1.1 var(--f-title); letter-spacing: .06em; color: #fff3d6; text-shadow: 0 1px 4px #000, 0 0 10px #000, 0 0 3px #000; background: #08050dcc; border: 1px solid #8a6e45; border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.rg .rl { font: 600 .6rem var(--f-title); color: var(--gold); text-shadow: 0 1px 3px #000; background: #08050daa; border-radius: 4px; padding: 0 4px; }
.rg .lk { font-size: .95rem; filter: drop-shadow(0 1px 3px #000); }
.rg.locked .rn { color: #b3abc0; border-color: #4a3a2a; }
.rg.open .rn { box-shadow: 0 0 12px #ffd36a77; border-color: #ffd36a; animation: hsPulse2 2.2s infinite; }
@keyframes hsPulse2 { 50% { box-shadow: 0 0 20px #ffd36acc; } }
.reduce-motion .rg.open .rn { animation: none; }
.chapter { margin: .6rem auto 0; display: flex; align-items: center; gap: .5rem; width: max-content; max-width: 100%; padding: .4rem .9rem; font: 600 .75rem var(--f-title); letter-spacing: .08em; color: #f1e6c8; }
.chapter span { color: var(--gold); }

/* ===== Preparação de expedição ===== */
.prep { gap: .6rem; }
.banner { height: 120px; display: grid; align-content: end; justify-items: center; background: #000 center / cover; text-align: center; padding-bottom: .6rem; }
.banner b { font: 700 1.1rem var(--f-title); letter-spacing: .1em; text-transform: uppercase; color: #fff3d6; text-shadow: 0 2px 8px #000; }
.banner span { font: 600 .72rem var(--f-title); color: var(--gold); letter-spacing: .08em; text-shadow: 0 1px 4px #000; }
.types { display: grid; gap: .5rem; }
.typ { display: flex; align-items: center; gap: .7rem; text-align: left; padding: .6rem .8rem; border-radius: 9px; border: 1px solid #55432f; background: linear-gradient(180deg, #1d1529, #120c1b); color: inherit; cursor: pointer; }
.typ .ti { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #6e5435; color: var(--gold); font-size: 1.1rem; background: #0009; flex: none; }
.typ .tt { display: grid; } .typ b { font: 700 .9rem var(--f-title); letter-spacing: .05em; } .typ small { color: var(--muted); font-size: .8rem; }
.typ.on { border-color: #e0566b; background: linear-gradient(180deg, #4a1220, #230a12); box-shadow: inset 0 0 18px #ff5f7a33, 0 0 12px #c9374c66; }
.typ.special.on { border-color: #9a6bff; background: linear-gradient(180deg, #34205f, #170d31); box-shadow: inset 0 0 18px #a885ff33, 0 0 12px #7b4bd166; }
.typ.off { opacity: .55; }
.rewards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.rslot { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 9px; border: 1px solid #55432f; background: radial-gradient(circle at 50% 35%, #2a1d3a, #0e0914); padding: 4px; }
.rslot img { width: 66%; height: 52%; object-fit: contain; }
.rslot small { font: 600 .56rem/1.05 var(--f-title); color: #cdbd98; text-align: center; }
.go { margin-top: .4rem; min-height: 54px; font-size: .95rem; }

/* ===== Exploração (rota) ===== */
.runwrap { background-size: cover; background-position: center; margin: -.8rem -.75rem 0; padding: .8rem .75rem calc(var(--nav-h) + 1.2rem); min-height: calc(100dvh - var(--top-h) - var(--nav-h)); align-content: start; }
.graph { background: radial-gradient(ellipse at 50% 100%, #1a102455 0%, #0000 75%); border: 1px solid #55432f66; border-radius: 12px; }
.edge { stroke: #9a7a4355; stroke-width: 2; stroke-dasharray: 3 5; } .edge.done { stroke: #d8b673; stroke-dasharray: none; } .edge.live { stroke: #ffd36a; stroke-dasharray: 6 4; }
.gnode { width: 56px; height: 56px; border: 0; background: none; padding: 0; color: #e9dcc0; display: grid; place-items: center; filter: drop-shadow(0 3px 5px #000); box-shadow: none; }
.gnode img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.gnode.visited { opacity: .4; filter: grayscale(.7) drop-shadow(0 3px 5px #000); } .gnode.here { opacity: 1; filter: drop-shadow(0 0 10px #ffd36a); }
.gnode.can { animation: nodePulse 1.5s infinite; box-shadow: none; border: 0; }
.gnode:disabled:not(.visited) { opacity: .75; }
@keyframes nodePulse { 50% { filter: drop-shadow(0 0 14px #ffd36a) drop-shadow(0 3px 5px #000); transform: translate(-50%, -50%) scale(1.08); } }
.legend { display: grid; grid-template-columns: repeat(3, auto); gap: .3rem .9rem; justify-content: center; padding: .55rem .8rem; border-radius: 9px; background: #0a0710cc; border: 1px solid #4a3a2a; color: #cdbd98; }
.lg { display: flex; align-items: center; gap: .3rem; } .lg-img { width: 22px; height: 22px; object-fit: contain; }
.wallet { display: flex; flex-wrap: wrap; gap: .3rem .8rem; justify-content: center; font: 600 .74rem var(--f-title); color: #cdbd98; }

/* ===== Personagem ===== */
.charscr { gap: .6rem; }
.herocard { display: grid; grid-template-columns: 56px 1fr 56px; gap: .45rem; padding: .5rem; }
.eqcol { display: grid; gap: .35rem; align-content: space-between; }
.eqs { position: relative; width: 56px; height: 56px; border-radius: 8px; border: 1px solid #55432f; background: radial-gradient(circle at 50% 35%, #2a1d3a, #0c0812); display: grid; place-items: center; padding: 3px; cursor: pointer; color: #8d7a58; }
.eqs img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
.eqs .g { font-size: 1.25rem; opacity: .55; }
.eqs i { position: absolute; right: 2px; bottom: 1px; font: 700 .6rem var(--f-title); color: #ffd36a; font-style: normal; text-shadow: 0 1px 2px #000; }
.eqs.has { border-color: #8a6e45; } .eqs.r-epic, .eqs.r-legendary { border-color: #9a6bff; box-shadow: 0 0 8px #7b4bd199; } .eqs.r-rare { border-color: #5aa0d8; }
.herofig { position: relative; min-height: 340px; border-radius: 8px; background: #0a0710 center top / cover; border: 1px solid #3a2c22; overflow: hidden; }
.herofig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 55%, #07050bee 100%); }
.herolv { position: absolute; left: .5rem; right: .5rem; bottom: .4rem; z-index: 2; text-align: center; }
.herolv b { font: 700 1.15rem var(--f-title); letter-spacing: .1em; color: #fff1d0; text-shadow: 0 2px 6px #000; }
.herolv small { font: 600 .66rem var(--f-title); color: #cdbd98; letter-spacing: .06em; }
.bar { height: 8px; margin: 3px 0; border-radius: 4px; background: #000; border: 1px solid #4a3a2a; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #5a0f1c, #e0556a); }
.tabs4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.tabs4 .tab { min-height: 42px; border-radius: 8px; border: 1px solid #55432f; background: linear-gradient(180deg, #1d1529, #120c1b); color: #b9ad94; font: 600 .66rem var(--f-title); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 0 .2rem; }
.tabs4 .tab.active { color: #fff0f2; border-color: #e0566b; background: linear-gradient(180deg, #7a1628, #3c0b16); box-shadow: 0 0 10px #c9374c55, inset 0 0 12px #ff5f7a33; }
.attrs { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.attrs li { display: grid; grid-template-columns: 30px 1fr auto auto; gap: .5rem; align-items: center; padding: .4rem .5rem; border-radius: 8px; background: linear-gradient(180deg, #1d1529, #130d1c); border: 1px solid #3f3122; }
.attrs .ag { font-size: 1.2rem; color: var(--gold); text-align: center; }
.attrs .av { font: 700 1.1rem var(--f-title); color: #fff1d0; min-width: 2.2ch; text-align: right; }
.attrs strong { font: 700 .85rem var(--f-title); letter-spacing: .05em; }
.attrs .btn.sm { min-width: 38px; }

/* árvore de classes */
.tree .pcols { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; }
.pcol { display: grid; justify-items: center; gap: .35rem; align-content: start; }
.phead { display: grid; justify-items: center; gap: 1px; } .phead img { width: 44px; height: 44px; object-fit: contain; } .phead small { font: 600 .56rem/1.1 var(--f-title); text-align: center; color: #cdbd98; min-height: 2.2em; }
.pline { display: grid; gap: .5rem; position: relative; }
.pline::before { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, #55432f, #55432f); transform: translateX(-50%); }
.tn, .hy { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #3f3122; background: radial-gradient(circle at 50% 35%, #231833, #0b0710); display: grid; place-items: center; padding: 3px; cursor: pointer; color: #6d6280; }
.tn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: grayscale(.9) brightness(.55); }
.tn em { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: #0b0710; border: 1px solid #55432f; font: 700 .55rem/14px var(--f-title); font-style: normal; text-align: center; color: #b9ad94; }
.tn.own { border-color: #e0566b; box-shadow: 0 0 10px #c9374c99; color: #ffd0d6; } .tn.own img { filter: none; }
.tn.next { border-color: #ffd36a; box-shadow: 0 0 8px #ffd36a88; } .tn.next img { filter: grayscale(.4) brightness(.85); }
.tn.sel, .hy.sel { outline: 2px solid #fff; outline-offset: 2px; }
.hyrow { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.hy { width: auto; height: auto; border-radius: 10px; padding: .3rem .4rem; width: 72px; gap: 2px; }
.hy img { width: 40px; height: 40px; object-fit: contain; filter: grayscale(.9) brightness(.6); } .hy small { font: 600 .55rem/1.1 var(--f-title); text-align: center; color: #cdbd98; }
.hy.own { border-color: #9a6bff; box-shadow: 0 0 10px #7b4bd199; } .hy.own img { filter: none; } .hy.next { border-color: #ffd36a; } .hy.next img { filter: brightness(.85); }
.treefoot { display: flex; justify-content: space-between; align-items: center; margin-top: .7rem; font: 600 .75rem var(--f-title); letter-spacing: .06em; color: #cdbd98; }
.abrow { display: grid; grid-template-columns: 46px 1fr auto; gap: .6rem; align-items: center; }
.abic { width: 46px; height: 46px; } .abic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ===== Equipe ===== */
.teamrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 8px}
.tcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 5px;background:linear-gradient(#1b1622,#0f0c14);border:1px solid #4a3a2c;border-radius:8px;color:#e8dcc4;font:inherit;min-width:0}
.tcard.on{border-color:#d9a441;box-shadow:0 0 10px #d9a44155}
.tcard.empty{opacity:.55}
.tcard b{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard small{font-size:10px;color:#b9a98c}
.tpic{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:6px;background:#0c0a10 center/cover no-repeat;overflow:hidden}
.tpic img{width:100%;height:100%;object-fit:contain}
.tpic i{font-style:normal;font-size:24px;color:#6b5a48}
.tabs4.two{grid-template-columns:1fr 1fr}
.cmain .cart{position:relative;display:flex;justify-content:center;align-items:center;min-height:210px;border-radius:8px;background:radial-gradient(ellipse at 50% 70%,#3a2a4a 0,#120e18 70%)}
.cmain .cimg{max-height:230px;max-width:80%;object-fit:contain;filter:drop-shadow(0 6px 10px #000)}
.cmain .cname{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 3px #000}
.cmain .cname b{font-family:Cinzel,serif;font-size:17px;color:#f1d79a}
.cmain .cname span{font-size:11px;color:#cdbd9f}
.cstats{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:10px 0}
.cstats div{display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #2c2430;padding:2px 0}
.cskills{display:flex;gap:8px;justify-content:center;margin:6px 0}
.cskills .sk{width:46px;height:46px;border:1px solid #6b5230;border-radius:8px;background:#0c0a10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cskills .sk img{width:100%;height:100%;object-fit:cover}
.cacts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.cacts .btn{padding:8px 2px;font-size:12px;min-width:0}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.cc{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px;background:#120e18;border:1px solid #3a2e24;border-radius:8px;color:#e8dcc4;font:inherit;min-width:0}
.cc.on{border-color:#d9a441}.cc.team{background:#1d1626}
.cc b{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc small{font-size:10px;color:#b9a98c}

/* ===== Combate ===== */
.battle{padding:0}
.bhead{display:flex;align-items:center;gap:10px;padding:6px 4px}
.bturn{font-family:Cinzel,serif;color:#f1d79a;font-size:14px;white-space:nowrap;border:1px solid #6b5230;border-radius:6px;padding:3px 8px;background:#120e18}
.bboss{flex:1;display:flex;flex-direction:column;gap:3px;font-size:12px}
.bar.hp{height:9px;background:#2a1218;border:1px solid #5a2a30;border-radius:5px;overflow:hidden}
.bar.hp .bar-fill{background:linear-gradient(#e0504a,#9c1f2a);height:100%}
.bar.hp.thin{height:6px}
.stage{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:420px;padding:10px 6px;border:1px solid #4a3a2c;border-radius:10px;background:#0c0a10 center/cover no-repeat}
.stage .side{display:flex;flex-direction:column;gap:6px}
.stage .brow{display:flex;justify-content:center;align-items:flex-end;gap:6px;min-height:0}
.stage .brow:empty{display:none}
.unit{display:flex;flex-direction:column;align-items:center;gap:2px;width:84px;min-width:0;font-size:11px;text-shadow:0 1px 2px #000}
.unit .spr{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 4px 5px #000)}
.unit.boss{width:170px}.unit.boss .spr{width:160px;height:150px}
.unit .uname{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1d79a}
.unit .bar{width:100%}
.unit .uhp,.unit .ufx{font-size:10px;color:#cdbd9f}
.unit.dead{opacity:.35;filter:grayscale(1)}
.unit.acting .spr{filter:drop-shadow(0 0 8px #ffd36a)}
.unit.acting .uname::before{content:"▶ ";color:#ffd36a}
.actbar{display:flex;gap:8px;margin:10px 0}
.actbar .btn{flex:1;padding:12px 4px}
.acting-panel .skills{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.stage .brow{display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:center;align-items:flex-end;grid-template-columns:none!important}
.stage .side{display:flex;flex-direction:column;gap:4px}
.stage{min-height:380px}
.stage .side{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px 10px}
.stage .brow{display:contents!important}
.unit .spr{width:84px;height:84px}
.stage{min-height:300px}

/* ===== Bestiário ===== */
.rfilter{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px}
.rchip{flex:none;padding:5px 10px;border:1px solid #4a3a2c;border-radius:999px;background:#120e18;color:#cdbd9f;font:inherit;font-size:12px}
.rchip.on{border-color:#d9a441;color:#f1d79a;background:#2a1a1e}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.bt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px;background:#120e18;border:1px solid #3a2e24;border-radius:8px;color:#e8dcc4;font:inherit;min-width:0}
.bt.on{border-color:#d9a441}.bt.unk{opacity:.5}
.bt small{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sklist{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sklist li{display:flex;align-items:center;gap:8px;font-size:13px}
.sklist .abil-img{width:38px;height:38px;border-radius:6px;border:1px solid #6b5230}
.bdetail .tabs4{margin-top:10px}
.actbar .btn{min-width:0;font-size:13px}
.extras{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.extras .btn{flex:1 1 40%;font-size:12px}
.acting-panel .skills .btn{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px}
.acting-panel .abil-img{width:40px;height:40px;border-radius:6px}

/* ===== Inventário (grade) e Missões ===== */
.igrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0}
.itile{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:3px;background:radial-gradient(#2a2234,#120e18);border:2px solid #4a3a2c;border-radius:8px;color:#e8dcc4;font:inherit}
.itile .item-icon{width:100%;height:100%;object-fit:contain;border-radius:0}
.itile.on{box-shadow:0 0 0 2px #d9a441,0 0 10px #d9a44177}
.itile.rar-uncommon{border-color:#3f8f55}.itile.rar-rare{border-color:#3f6fc0}.itile.rar-epic{border-color:#8a4fc0}.itile.rar-legendary{border-color:#d9a441}.itile.rar-mythic{border-color:#d9503f}.itile.rar-transcendent{border-color:#7fe0e0}
.itile .eqmark{position:absolute;right:2px;bottom:2px;font-style:normal;font-size:10px;background:#d9a441;color:#120e18;border-radius:4px;padding:0 4px;font-weight:700}
.itile .fav{position:absolute;left:3px;top:1px;font-style:normal;font-size:11px;color:#ffd36a}
.item.panel{display:flex;gap:10px;align-items:center}
.item .col .btn{padding:6px 10px;font-size:12px}
.item .item-icon{width:56px;height:56px;object-fit:contain}

/* ===== Alinhamento de formulários (Arena/Formação, Configurações) ===== */
.topbar{background:linear-gradient(180deg,#170f20,#0b0710)}
.field:has(select){grid-template-columns:1fr;gap:.35rem}
.field.check{display:flex;align-items:center;gap:.7rem;margin:.5rem 0}
.field.check input{flex:none;width:24px;height:24px}
.field.check span{flex:1;line-height:1.3;text-align:left}
.formrow{display:grid!important;grid-template-columns:1fr 1fr;gap:.5rem;align-items:center;padding:.7rem!important;border:1px solid #3a2e24;border-radius:10px;background:#120e18;list-style:none}
.formrow .grow{grid-column:1/-1;min-width:0}
.formrow .grow strong{font-family:Cinzel,serif;color:#f1d79a;letter-spacing:.04em}
.formrow select{width:100%;min-width:0}
.formrow .field.check{grid-column:1/-1;margin:.1rem 0}
ul.facilities:has(.formrow){display:grid;gap:.6rem;padding:0;margin:.6rem 0}
.gold{color:#d9a441;letter-spacing:.15em}
.panel .item.panel{border:1px solid #3a2e24;background:#120e18;box-shadow:none}
.panel .item.panel::after{display:none}
.panel .item.panel::before{display:none}.panel .item.panel{outline:none}

/* ===== Missões ===== */
.qlist{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.quest{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid #3a2e24;border-radius:10px;background:linear-gradient(#1b1622,#0f0c14)}
.quest.main{border-color:#6b5230}
.quest.ready{border-color:#d9a441;box-shadow:0 0 12px #d9a44144}
.quest.done,.quest.locked{opacity:.6}
.qico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid #6b5230;background:#0c0a10;color:#f1d79a;font-size:20px}
.quest.main .qico{box-shadow:0 0 8px #d9a44166}
.qbody{min-width:0}
.qbody b{font-family:Cinzel,serif;color:#f1d79a;font-size:14px;letter-spacing:.03em}
.qbody p{margin:2px 0 4px;line-height:1.3}
.qprog{display:flex;align-items:center;gap:8px}.qprog .bar{flex:1}.qprog small{font-size:11px;color:#cdbd9f}
.qrew{color:#b9a98c}
.qtag{font-size:11px;color:#8fbf8f;border:1px solid #3f6f4f;border-radius:6px;padding:3px 6px}
.quest .btn.sm{padding:8px 10px;font-size:12px;min-width:74px}
.unit .uname{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center;line-height:1.15;font-size:10.5px}

/* ===== Primeiros passos / aviso de risco ===== */
.hub-help{position:absolute;left:10px;bottom:10px;width:40px;height:40px;border-radius:50%;border:2px solid #d9a441;background:#120e18e6;color:#f1d79a;font:700 20px Cinzel,serif;z-index:5;box-shadow:0 0 12px #d9a44166}
.guide{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.guide li{display:grid;grid-template-columns:24px 1fr;gap:6px;align-items:start;font-size:14px;line-height:1.35}
.guide li span{color:#d9a441;font-weight:700}.guide li.done{opacity:.55}
.warn.panel{border-color:#c0503f!important;background:linear-gradient(#2a1214,#150a0c);margin:10px 0}
.warn b{color:#ff9a8a}.warn .btn{margin-top:6px}