/* =========================================================
   VALTHERIS — VISUAL
   ========================================================= */
:root{
  color-scheme: dark;
  --bg:#07080c; --bg2:#0c0e14; --stone:#12141b; --stone2:#181b24; --stone3:#20242f;
  --line:rgba(232,201,138,.14); --line2:rgba(255,255,255,.07);
  --gold:#e8c98a; --gold-hi:#f7e1ad; --gold-dim:#a88b54;
  --text:#e9e5dc; --muted:#9a9fae; --faint:#686d7b;
  --hp:#d9463a; --hp2:#8f231b; --mp:#4a86e8; --mp2:#223f86;
  --good:#7fd28a; --bad:#ff7a6b;
  --cls:#e8c98a;
  --region:#1a1d27;
  --display:"Cinzel", "Trajan Pro", Georgia, serif;
  --body:"Alegreya Sans", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:.9375rem/1.45 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:.02em;text-wrap:balance}
p{margin:0}
.muted{color:var(--muted)}
.eyebrow{font:600 .7rem var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2b2f3b;border-radius:8px}

.screen{display:none;height:100%}
.screen.on{display:flex}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;transition:transform .12s, filter .12s, background .15s, border-color .15s}
.btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-gold{background:linear-gradient(180deg,#f2d79c,#b8904d);color:#1a1307;border-color:#f7e1ad;box-shadow:0 6px 24px -10px rgba(232,201,138,.7)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line)}
.btn-danger{background:linear-gradient(180deg,#b33b30,#7c1f18);color:#fff;border-color:#e0685c}
.btn-sm{padding:6px 10px;font-size:.84rem;border-radius:8px}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer}
.icon-btn.text{width:auto;padding:0 12px;font-weight:600;font-size:.88rem}
.icon-btn svg{width:18px;height:18px}

/* =========================================================
   TELA DE CLASSES
   ========================================================= */
#class-screen{flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:18px 16px 24px;overflow:auto;
  background:radial-gradient(ellipse at 50% 0%, #161b2b 0%, var(--bg) 70%)}
.art-wrap{position:relative;width:min(1200px,100%);container-type:inline-size;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px -30px #000, 0 0 0 1px var(--line);flex:none}
#hero-art{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
/*old*/.art-title-old{position:absolute;left:50%;top:3.1cqw;transform:translate(-50%,-50%);white-space:nowrap;font-size:3.35cqw;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(180deg,#fbe9c0 10%,#d9b572 55%,#a47c3c 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.9));pointer-events:none}
#hero-zones{position:absolute;inset:0;display:block}
.zone{position:absolute;top:8%;bottom:0;border:0;padding:0;background:transparent;cursor:pointer;border-radius:14px;transition:background .2s, box-shadow .2s}
.zone::after{content:"";position:absolute;inset:0;border-radius:14px;opacity:0;transition:opacity .2s;background:radial-gradient(ellipse at 50% 55%, color-mix(in srgb,var(--c) 22%, transparent), transparent 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%, transparent), 0 0 40px -8px var(--c)}
.zone:hover::after,.zone:focus-visible::after,.zone.sel::after{opacity:1}
.zone.sel::after{box-shadow:inset 0 0 0 2px var(--c), 0 0 50px -6px var(--c)}
.class-names{position:relative;width:min(1200px,100%);height:44px;flex:none;margin-top:-6px}
.class-names button{position:absolute;transform:translateX(-50%);width:14%;background:none;border:0;cursor:pointer;text-align:center;padding:2px 6px;border-radius:8px}
.class-names b{display:block;font:700 clamp(.78rem,1.6vw,1.12rem) var(--display);color:var(--c);letter-spacing:.04em;text-shadow:0 0 14px color-mix(in srgb,var(--c) 50%, transparent)}
.class-names span{display:block;font-size:.72rem;color:var(--muted)}
@media (max-width:760px){.class-names span{display:none}.class-names{height:28px}}

.class-preview{width:min(1200px,100%);background:linear-gradient(180deg,var(--stone2),var(--stone));border:1px solid var(--line);border-radius:16px;padding:20px;flex:none}
.cp-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:8px}
.brand{font:700 1.6rem var(--display);letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.cp{display:grid;grid-template-columns:auto 1fr 1.2fr;gap:22px;align-items:start}
@media (max-width:900px){.cp{grid-template-columns:auto 1fr}.cp .cp-skills{grid-column:1/-1}}
@media (max-width:520px){.cp{grid-template-columns:1fr}.cp img{width:88px;height:88px}}
.cp img{width:120px;height:120px;border-radius:14px;border:1px solid color-mix(in srgb,var(--c) 60%, transparent);box-shadow:0 0 30px -8px var(--c)}
.cp h2{font-size:1.7rem;color:var(--c)}
.cp .tag{color:var(--muted);margin:2px 0 14px;font-style:italic}
.statbars{display:grid;gap:7px}
.statbar{display:grid;grid-template-columns:44px 1fr 34px;gap:10px;align-items:center;font-size:.85rem}
.statbar b{font-weight:700;color:var(--muted);letter-spacing:.06em}
.statbar .track{height:8px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden}
.statbar .track i{display:block;height:100%;background:var(--c);border-radius:8px}
.statbar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.cp-skills{display:grid;gap:10px}
.cp-skill{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:rgba(0,0,0,.2)}
.cp-skill .lv{font:700 .68rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 50%, transparent);border-radius:6px;padding:3px 6px;white-space:nowrap}
.cp-skill b{display:block}
.cp-skill span{font-size:.86rem;color:var(--muted)}
.cp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* =========================================================
   JOGO
   ========================================================= */
#game-screen{flex-direction:column;background:
  radial-gradient(ellipse at 50% -10%, color-mix(in srgb,var(--region) 90%, #fff 4%), transparent 60%),
  linear-gradient(180deg,var(--region),var(--bg) 70%);transition:background .6s}
.topbar{display:none;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line2);background:rgba(7,8,12,.7);backdrop-filter:blur(8px)}
.tb-hero{display:flex;align-items:center;gap:8px;min-width:0}
.tb-hero img{width:36px;height:36px;border-radius:8px;border:1px solid var(--cls)}
.tb-hero strong{display:block;font-family:var(--display);font-size:.9rem;color:var(--cls);line-height:1.1}
.tb-hero span{font-size:.75rem}
.tb-bars{flex:1;display:grid;gap:4px;min-width:0}
.tb-coins{display:flex;align-items:center;gap:5px;color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.tb-coins svg,.coins-row svg{width:16px;height:16px;color:var(--gold)}
.tb-actions{display:flex;gap:6px}
.mobile-tabs{display:none}

.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(280px,340px)}
.panel{background:linear-gradient(180deg,rgba(18,20,27,.94),rgba(12,14,20,.96));border-color:var(--line2);border-style:solid;border-width:0;overflow-y:auto;padding:18px}
#left-ui{border-right-width:1px}
#right-ui{border-left-width:1px}
.sec{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:20px 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sec:first-child{margin-top:0}
.sec .muted{font:500 .78rem var(--body);letter-spacing:0;text-transform:none}

/* herói */
.hero-card{display:flex;gap:14px;align-items:center}
.hero-card img{width:84px;height:84px;border-radius:12px;border:1px solid var(--cls);box-shadow:0 0 26px -8px var(--cls);object-fit:cover}
.hero-card h2{font-size:1.35rem;color:var(--cls)}
.bars-big{display:grid;gap:8px;margin:16px 0 14px}
.bar{position:relative;height:16px;border-radius:8px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.bar.big{height:24px}
.bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:8px;transition:width .35s ease}
.bar.hp i{background:linear-gradient(180deg,#ef6a5d,var(--hp) 45%,var(--hp2))}
.bar.mp i{background:linear-gradient(180deg,#78a8ff,var(--mp) 45%,var(--mp2))}
.bar.foe-hp i{background:linear-gradient(180deg,#ff8a5c,#c9412a 45%,#6d1a10)}
.bar span{position:relative;display:flex;justify-content:center;gap:6px;height:100%;align-items:center;font-size:.75rem;font-weight:700;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.bar.big span{justify-content:space-between;padding:0 10px;font-size:.84rem}
.bar.big em{font-style:normal}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.stats div{background:rgba(0,0,0,.25);border:1px solid var(--line2);border-radius:10px;padding:8px 10px}
.stats dt{font-size:.68rem;letter-spacing:.14em;color:var(--muted);font-weight:700}
.stats dd{margin:0;font:700 1.15rem var(--body);font-variant-numeric:tabular-nums}
.stats dd small{font-size:.72rem;color:var(--good);font-weight:600;margin-left:3px}
.coins-row{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--gold)}
.skills{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.skills li{padding:10px 12px;border-radius:10px;border:1px solid var(--line2);background:rgba(0,0,0,.22)}
.skills li.locked{opacity:.5}
.skills li b{display:flex;justify-content:space-between;gap:8px;font-size:.92rem}
.skills li b em{font-style:normal;color:var(--mp);font-size:.8rem;white-space:nowrap}
.skills li span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.passive{margin-top:10px;font-size:.84rem;color:var(--muted);padding:10px 12px;border-left:2px solid var(--cls);background:rgba(0,0,0,.18);border-radius:0 8px 8px 0}
.passive b{color:var(--text)}

/* centro */
.center{display:grid;grid-template-rows:auto minmax(0,1fr) 170px;min-height:0;padding:14px 18px 14px;gap:12px}
.map-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.map-head h2{font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--gold-hi)}
.progress{display:flex;gap:4px}
.progress i{width:18px;height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.progress i.done{background:var(--gold-dim)}
.progress i.now{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.stage{position:relative;min-height:0;border-radius:16px;border:1px solid var(--line2);background:rgba(0,0,0,.25);overflow:hidden}

/* mapa */
.map{position:absolute;inset:0;overflow:auto;padding:24px 12px 36px}
.map-inner{position:relative;margin:0 auto;width:min(560px,100%);}
.map-inner svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lines line{stroke:rgba(232,201,138,.14);stroke-width:2;stroke-dasharray:5 7;stroke-linecap:round}
.lines line.path{stroke:var(--gold);stroke-width:3;stroke-dasharray:none;opacity:.85}
.lines line.next{stroke:rgba(232,201,138,.6);stroke-width:2.5;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.node{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg,#252a37,#151821);color:#a9adb9;display:grid;place-items:center;cursor:default;transition:transform .15s, box-shadow .2s, color .2s, opacity .2s;padding:0}
.node svg{width:24px;height:24px}
.node.t-monster{color:#e07a6e}.node.t-potion{color:#ef6a8a}.node.t-equipment{color:#a9b8d6}.node.t-mystery{color:#b598e8}
.node.t-treasure{color:#e8c98a}.node.t-legendaryChest{color:#ffc93c}.node.t-rest{color:#ff9a4a}.node.t-boss{color:#ff5a4a}
.node.locked{opacity:.32;filter:saturate(.4)}
.node.skipped{opacity:.18;filter:grayscale(1)}
.node.done{opacity:1;background:linear-gradient(160deg,#3a3222,#1d1a12);border-color:var(--gold-dim);color:var(--gold)}
.node.current{box-shadow:0 0 0 2px var(--gold),0 0 24px -2px var(--gold)}
.node.avail{cursor:pointer;opacity:1;border-color:rgba(232,201,138,.55);animation:pulse 1.8s ease-in-out infinite}
.node.avail:hover,.node.avail:focus-visible{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 2px var(--gold),0 0 30px -2px var(--gold)}
@keyframes pulse{50%{box-shadow:0 0 0 1px rgba(232,201,138,.4),0 0 22px -4px rgba(232,201,138,.7)}}
.node.t-boss{width:66px;height:66px;border-radius:20px;border-color:rgba(255,90,74,.6);background:radial-gradient(circle at 50% 40%,#4a1a16,#180a09)}
.node.t-boss svg{width:34px;height:34px}
.node .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#000c;border:1px solid var(--line);color:var(--text);font-size:.72rem;padding:3px 7px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}
.node:hover .tip,.node:focus-visible .tip{opacity:1}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:.74rem;color:var(--faint);margin:18px auto 0;max-width:560px}
.legend span{display:inline-flex;align-items:center;gap:4px}
.legend svg{width:13px;height:13px}

/* combate */
.combat{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto auto;gap:12px;padding:18px;overflow:auto;
  background:radial-gradient(ellipse at 50% 30%, rgba(120,30,20,.28), transparent 70%), rgba(6,7,10,.86);backdrop-filter:blur(3px);animation:fadein .25s ease}
.combat.boss{background:radial-gradient(ellipse at 50% 25%, rgba(180,30,20,.45), transparent 70%), rgba(6,7,10,.9)}
@keyframes fadein{from{opacity:0}}
.arena{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;position:relative}
.foe{position:relative;text-align:center;padding:18px;border-radius:14px;border:1px solid rgba(255,120,100,.25);background:linear-gradient(180deg,rgba(60,18,14,.55),rgba(20,8,6,.6))}
.combat.boss .foe{border-color:rgba(255,90,74,.6);box-shadow:0 0 40px -10px rgba(255,70,50,.7)}
.foe h2{font-size:clamp(1.3rem,3vw,2rem);color:#ffb3a6;margin:4px 0 12px}
.foe .bar{height:20px;max-width:420px;margin:0 auto}
.foe-stats{margin-top:10px;font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
.vs{display:grid;gap:6px;justify-items:center;width:150px}
.vs img{width:84px;height:84px;border-radius:14px;border:1px solid var(--cls);box-shadow:0 0 22px -6px var(--cls)}
.vs .bar{width:100%}
.buffs{font-size:.74rem;color:var(--gold);text-align:center;min-height:1em}
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.act{display:grid;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,var(--stone3),var(--stone2));cursor:pointer;transition:transform .12s, border-color .15s, box-shadow .15s}
.act b{font-size:.95rem}
.act span{font-size:.74rem;color:var(--muted)}
.act i.key{font-style:normal}
@media (hover:none){.act i.key{display:none}}
.act em{font-style:normal;color:var(--mp);font-size:.74rem;font-weight:700}
.act:hover:not(:disabled){transform:translateY(-2px);border-color:var(--cls);box-shadow:0 8px 24px -12px var(--cls)}
.act.primary{background:linear-gradient(180deg,#3b2f1c,#231b10);border-color:var(--gold-dim)}
.act:disabled{opacity:.4;cursor:not-allowed}
.quick-potions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:0}
.quick-potions button{font-size:.8rem}
@media (max-width:1180px){.actions{grid-template-columns:repeat(2,1fr)}}

.float{position:absolute;left:50%;top:12%;font:800 1.9rem var(--display);pointer-events:none;animation:floatup 1s ease-out forwards;text-shadow:0 2px 6px #000;z-index:5;white-space:nowrap}
.float.dmg{color:#ffd9a8}.float.big{font-size:2.6rem;color:#ffc93c}.float.hurt{color:#ff6b5b}.float.heal{color:var(--good)}.float.shield{color:#8fb4ff;font-size:1.3rem}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
.shake{animation:shake .32s linear}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.hit-flash{animation:hitflash .3s ease}
@keyframes hitflash{30%{filter:brightness(1.8) saturate(1.4)}}

/* log */
.log-wrap{display:grid;grid-template-rows:auto 1fr;gap:6px;min-height:0}
.log{overflow-y:auto;border-radius:12px;border:1px solid var(--line2);background:rgba(0,0,0,.3);padding:10px 14px;font-size:.88rem;display:flex;flex-direction:column;gap:3px}
.log p{color:#c9c5bb;animation:fadein .3s ease}
.log p.good{color:var(--good)}.log p.bad{color:var(--bad)}.log p.gold{color:var(--gold)}.log p.loot{color:#bcd0ff}.log p.boss{color:#ff8a78;font-weight:700}
.log p.old{opacity:.55}

/* equipamentos e inventário */
.equip{display:grid;gap:6px}
.slot{display:grid;grid-template-columns:78px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid var(--line2);background:rgba(0,0,0,.22);font-size:.84rem}
.slot .sl{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
.slot .nm{min-width:0}
.slot .nm b{display:block;font-weight:700;line-height:1.2}
.slot .nm small{color:var(--muted);font-size:.74rem}
.slot.empty .nm{color:var(--faint);font-style:italic}
.inv-filter{display:flex;gap:6px;margin-bottom:10px}
.inv-filter button{border:1px solid var(--line2);background:transparent;color:var(--muted);border-radius:999px;padding:4px 10px;font-size:.78rem;cursor:pointer}
.inv-filter button.on{border-color:var(--gold-dim);color:var(--gold)}
.inventory{display:grid;gap:8px}
.item{padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--r) 45%, transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--r) 9%, #13151c),#101218);position:relative}
.item.r-legendary{box-shadow:0 0 24px -8px var(--r)}
.item.new{animation:newitem 1.2s ease}
@keyframes newitem{0%{box-shadow:0 0 0 2px var(--r),0 0 30px var(--r)}}
.item b{display:block;color:var(--r);font-size:.9rem;line-height:1.25}
.item .meta{font-size:.72rem;color:var(--faint);margin:2px 0 6px;text-transform:uppercase;letter-spacing:.08em}
.item .meta .warn{color:#e8a35a}
.item .sts{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.82rem;font-variant-numeric:tabular-nums}
.item .sts span b{display:inline;color:var(--text);font-size:.82rem}
.up{color:var(--good);font-weight:700}.down{color:var(--bad);font-weight:700}
.item .row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.empty-note{color:var(--faint);font-style:italic;font-size:.88rem}

/* =========================================================
   JANELAS
   ========================================================= */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(3,4,6,.72);backdrop-filter:blur(4px);animation:fadein .2s ease}
.modal-card{width:min(760px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1d27,#101218);box-shadow:0 30px 80px -20px #000;padding:24px;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.modal-card h2{font-size:1.5rem;color:var(--gold-hi)}
.modal-card .lead{color:var(--muted);margin:6px 0 18px}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.m-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.m-sec{margin-top:20px}
.m-sec h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.pick{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.pick:hover{border-color:var(--r);transform:translateY(-1px)}
.shop-price{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px;flex-wrap:wrap}
.shop-price .p{display:inline-flex;align-items:center;gap:4px;color:var(--gold);font-weight:700}
.shop-price svg{width:14px;height:14px}
.sold{opacity:.4}
.end-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:18px 0}
.end-stats div{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:rgba(0,0,0,.25)}
.end-stats b{display:block;font:700 1.4rem var(--display);color:var(--gold)}
.end-stats span{font-size:.78rem;color:var(--muted)}
.end-hero{display:flex;gap:16px;align-items:center}
.end-hero img{width:90px;height:90px;border-radius:14px;border:1px solid var(--cls)}
.end-hero.dead img{filter:grayscale(.85) brightness(.7)}
.howto{display:grid;gap:10px;color:var(--muted);font-size:.92rem}
.howto b{color:var(--text)}

.toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-20px);opacity:0;z-index:60;padding:10px 18px;border-radius:12px;background:linear-gradient(180deg,#2c2415,#1a150c);border:1px solid var(--gold-dim);color:var(--gold-hi);font-weight:700;transition:.3s;pointer-events:none;text-align:center;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.flash{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:0}
.flash.red{animation:flashred .35s ease}
.flash.gold{animation:flashgold .9s ease}
@keyframes flashred{30%{opacity:1;background:radial-gradient(ellipse at center,transparent 40%,rgba(200,30,20,.35))}}
@keyframes flashgold{30%{opacity:1;background:radial-gradient(ellipse at center,rgba(255,215,120,.25),transparent 70%)}}

/* =========================================================
   TELAS MENORES
   ========================================================= */
@media (max-width:1100px){
  .topbar{display:flex}
  .mobile-tabs{display:flex;gap:4px;padding:6px 12px;border-bottom:1px solid var(--line2);background:rgba(7,8,12,.6)}
  .mobile-tabs button{flex:1;border:1px solid var(--line2);background:transparent;border-radius:9px;padding:8px;color:var(--muted);font-weight:700;cursor:pointer}
  .mobile-tabs button.on{border-color:var(--gold-dim);color:var(--gold);background:rgba(232,201,138,.06)}
  .mobile-tabs b{color:var(--gold);font-weight:700}
  .layout{display:block;overflow:hidden;position:relative}
  .layout > [data-pane]{display:none;height:100%}
  .layout > [data-pane].on{display:block}
  .layout > .center.on{display:grid}
  #left-ui,#right-ui{border:0;position:static}
  .center{height:100%;grid-template-rows:auto minmax(0,1fr) 120px;padding:10px 12px}
}
@media (max-width:640px){
  .arena{grid-template-columns:1fr}
  .vs{display:none}
  .actions{grid-template-columns:1fr 1fr}
  .combat{padding:12px;gap:10px}
  .legend{display:none}
  .node{width:42px;height:42px}
  .node.t-boss{width:56px;height:56px}
  .tb-hero div{display:none}
  .icon-btn.text{padding:0 8px}
}

/* =========================================================
   ARTE (mapas pintados, retratos, sumi-ê)
   ========================================================= */
.hanko{display:inline-grid;place-items:center;width:40px;height:40px;background:#b8322a;color:#f6e7cc;font:700 24px/1 "Noto Serif JP","Yu Mincho",serif;
  border-radius:5px;transform:rotate(-5deg);box-shadow:inset 0 0 0 2px #f6e7cc55, inset 0 0 8px #0005}
/* mapa pintado */
.stage{background:#16120e}
.stage::before{content:"";position:absolute;inset:-20px;background:var(--mapimg) center/cover;filter:blur(18px) brightness(.45) saturate(.8);pointer-events:none}
.map-inner.painted{background-size:cover;background-position:center top;border-radius:6px;box-shadow:0 0 0 1px #0008,0 20px 60px -20px #000;overflow:hidden;width:min(100%, 520px)}
.map-inner.painted::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 40px 10px rgba(30,20,10,.55)}
.mist{position:absolute;inset:-10% -40%;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 30% 6% at 20% 30%,#f2e8d6aa,transparent 70%),radial-gradient(ellipse 34% 5% at 70% 55%,#f2e8d699,transparent 70%),radial-gradient(ellipse 28% 6% at 35% 80%,#f2e8d688,transparent 70%);
  animation:drift 38s linear infinite alternate}
@keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.map-inner.painted .lines line{stroke:rgba(20,14,10,.55);stroke-width:2.5}
.map-inner.painted .lines line.path{stroke:#c8322a;stroke-width:4;opacity:1}
.map-inner.painted .lines line.next{stroke:#f6ead2;stroke-width:3}
.map-inner.painted .node{box-shadow:0 3px 0 #1b1a1f,0 6px 16px -4px #000;background:linear-gradient(160deg,#2c2723,#15120f);border-color:#e8c98a55}
.map-inner.painted .node.locked{opacity:.7;filter:saturate(.5) brightness(.85)}
.map-inner.painted .node.skipped{opacity:.35}
.map-inner.painted .node.done{background:linear-gradient(160deg,#c8402e,#8e2a1f);color:#f6e7cc;border-color:#1b1a1f}
.map-inner.painted .node.current{box-shadow:0 0 0 2px #f6e7cc,0 0 0 4px #1b1a1f,0 0 24px -2px #f7e19a}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:.74rem;color:#e6dccb;margin:14px auto 0;max-width:560px;position:relative;text-shadow:0 1px 2px #000}
/* inimigo em sumi-ê */
.foe.has-art{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:18px;align-items:center;text-align:left}
.foe.has-art .bar{margin:0}
.foe-art{position:relative;aspect-ratio:1;max-width:100%;border-radius:10px;background:#e9dcc0;box-shadow:inset 0 0 0 2px #1b1a1f, inset 0 0 0 5px #c9a86a, inset 0 0 40px rgba(120,80,30,.35);display:grid;place-items:center;overflow:hidden}
.foe-art img{position:absolute;inset:4%;width:92%;height:92%;animation:breathe 4s ease-in-out infinite}
.foe-kanji{position:relative;font:700 clamp(3.2rem,8vw,5.4rem)/1 "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;color:#1c1a1d;text-shadow:0 0 1px #1c1a1d}
.foe-art .hanko{position:absolute;top:8px;right:8px;width:32px;height:32px;font-size:19px}
.foe-art.dead{filter:grayscale(1) brightness(.75)}
.foe-art.dead .foe-kanji{transform:rotate(-12deg);opacity:.6;transition:.4s}
@keyframes breathe{50%{transform:scale(1.025) rotate(.6deg)}}
@media (max-width:640px){.foe.has-art{grid-template-columns:1fr;text-align:center}.foe-art{width:58%;margin:0 auto}}
/* retrato em combate */
.vs img{object-fit:cover;transition:transform .15s}
/* ícones de habilidade */
.sk-ic{width:40px;height:40px;border-radius:8px;object-fit:cover;box-shadow:0 0 0 1px #0009,0 0 0 2px #e8c98a44;flex:none}
.act.has-ic{grid-template-columns:40px 1fr;column-gap:10px;align-items:center}
.act.has-ic .sk-ic{grid-row:1/3}
.skills li.has-ic{display:grid;grid-template-columns:40px 1fr;column-gap:10px;align-items:start}
.skills li.has-ic .sk-ic{grid-row:1/3}
.cp-skill.has-ic{grid-template-columns:48px auto 1fr}
.cp-skill.has-ic .sk-ic{width:48px;height:48px}
/* ícones de item em sumi-ê */
.item.has-icon{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start}
.item .icon{width:48px;height:48px;border-radius:8px;display:grid;place-items:center;background:#eadcbd;box-shadow:inset 0 0 0 1px #1b1a1f,inset 0 0 12px rgba(120,80,30,.35)}
.item .icon img{width:44px;height:44px}
.item .ibody{min-width:0}
.slot-ic{width:26px;height:26px;display:block;margin-bottom:3px;background:#eadcbd;border-radius:5px;box-shadow:inset 0 0 0 1px #1b1a1f;padding:1px}
/* tela de abertura */
.art-wrap{box-shadow:0 30px 80px -30px #000,0 0 0 1px #e8c98a33}
.zone{top:6%;bottom:16%}
.actions{grid-template-columns:repeat(4,minmax(0,1fr))}
.act{min-width:0}.act b{overflow-wrap:break-word;hyphens:auto}
@media (max-width:1180px){.actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .foe-art{width:42%}
  .act i.key{display:none}
  .act.has-ic{grid-template-columns:32px 1fr;column-gap:8px}
  .act .sk-ic{width:32px;height:32px}
  .act b{font-size:.86rem}
}

.item .meta .grow{color:#ffc93c;font-weight:800}
.item .meta .old{color:#e8a35a;font-weight:700}

/* =========================================================
   v5: ABERTURA, FICHA, COMBATE TÁTICO, EVENTOS, CONQUISTAS
   ========================================================= */
.title-bar{width:min(1200px,100%);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;flex:none;
  background:linear-gradient(180deg,var(--stone2),var(--stone));border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.tt-brand{display:grid;gap:2px}
.tt-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tt-actions .icon-btn{width:42px;height:42px}
.tt-actions b{color:var(--gold);font-weight:700;font-size:.8rem}
.zone{animation:none}
.zone:hover::before{content:"Ver ficha";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font:700 .72rem var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:color-mix(in srgb,var(--c) 70%, #000);padding:4px 10px;border-radius:99px;white-space:nowrap;z-index:2;box-shadow:0 4px 14px #000a}

/* ficha */
#sheet-screen{flex-direction:column;align-items:center;overflow:auto;padding:18px 16px 28px;background:radial-gradient(ellipse at 50% 0%, #1c1712 0%, var(--bg) 70%)}
.sheet-wrap{width:min(1200px,100%);display:grid;gap:14px;animation:fadein .35s ease}
.sheet-art{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px -30px #000,0 0 0 1px color-mix(in srgb,var(--c) 45%, transparent);background:#e9dcc0;aspect-ratio:1774/887}
.sheet-art img{display:block;width:100%;height:100%;object-fit:cover;animation:sheetin .8s cubic-bezier(.2,.7,.2,1)}
@keyframes sheetin{from{transform:scale(1.04);filter:brightness(.6) saturate(.6)}}
.sheet-art.no-sheet{background:#15110d}
.ns-bg{position:absolute;inset:0;background-size:auto 100%;background-position:3% 50%;filter:saturate(1.05);-webkit-mask-image:linear-gradient(90deg,#000 35%,transparent 70%);mask-image:linear-gradient(90deg,#000 35%,transparent 70%)}
.ns-brush{position:absolute;right:6%;top:50%;transform:translateY(-50%) rotate(-3deg);font:700 clamp(2.4rem,8vw,6.5rem) var(--display);color:var(--c);letter-spacing:.06em;text-shadow:0 0 40px color-mix(in srgb,var(--c) 60%, transparent),0 4px 0 #000}
.ns-portrait{position:absolute;right:8%;bottom:8%;width:clamp(70px,14%,170px);height:auto;border-radius:12px;border:1px solid var(--c);box-shadow:0 0 30px -6px var(--c);opacity:.9}
.sheet-info{background:linear-gradient(180deg,var(--stone2),var(--stone));border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:18px}
.si-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.si-head h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--c)}
.si-head .tag{color:var(--muted);font-style:italic}
.si-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:22px}
.si-grow{font-size:.82rem;margin-top:10px}
.si-start{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line2)}
.trials-wrap{display:grid;gap:8px;min-width:0;flex:1}
.trials{display:flex;gap:6px;flex-wrap:wrap}
.trial{border:1px solid var(--line2);background:rgba(0,0,0,.25);color:var(--muted);border-radius:999px;padding:6px 12px;font-size:.84rem;font-weight:700;cursor:pointer}
.trial.on{border-color:var(--c);color:var(--text);background:color-mix(in srgb,var(--c) 18%, transparent);box-shadow:0 0 16px -6px var(--c)}
.trial:disabled{opacity:.4;cursor:not-allowed}
.trial-text{font-size:.86rem}
.si-btns{display:grid;gap:6px;justify-items:end}
.si-warn{font-size:.78rem;max-width:260px;text-align:right}
.btn-lg{padding:14px 28px;font-size:1.05rem;border-radius:12px}
@media (max-width:760px){.si-grid{grid-template-columns:1fr}.si-btns{justify-items:stretch;width:100%}.si-warn{text-align:left;max-width:none}}

/* chips e dicas */
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.foe.has-art .chips{justify-content:flex-start}
.chip{position:relative;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:#e6dccb;cursor:default;white-space:nowrap}
.foe-chip{border-color:rgba(255,140,110,.4);color:#ffc2b3}
.sp-chip{border-color:#ffb34a88;color:#ffd08a;background:rgba(80,40,0,.35)}
.p2-chip{border-color:#ff5a4a;color:#fff;background:#8e231a}
.chip.bad{border-color:rgba(255,110,90,.5);color:#ffab9e}
.chip.good{border-color:rgba(127,210,138,.5);color:var(--good)}
.chip.st-poison{color:#9be07a;border-color:#6fae5288}.chip.st-burn{color:#ffa45c;border-color:#ff8a3a88}.chip.st-frost{color:#9cd2ff;border-color:#6ab0ff88}.chip.st-bleed{color:#ff7a7a}
.chip[data-tip]{cursor:help}
.chip[data-tip]:hover::after,.chip[data-tip]:focus::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:240px;white-space:normal;
  background:#0b0c10f2;border:1px solid var(--line);color:var(--text);font-weight:500;font-size:.8rem;line-height:1.35;padding:7px 10px;border-radius:8px;z-index:20;box-shadow:0 10px 30px -8px #000;text-align:left}
.pchips{justify-content:center;margin-top:4px}
.telegraph{display:grid;gap:2px;padding:10px 14px;border-radius:12px;border:1px solid #ff6a4a;background:linear-gradient(90deg,rgba(140,30,15,.55),rgba(60,12,6,.55));animation:warnpulse 1.2s ease-in-out infinite}
.telegraph b{color:#ffd2c4;font-size:.95rem}
.telegraph span{font-size:.84rem;color:#f0c9bd}
@keyframes warnpulse{50%{box-shadow:0 0 0 1px #ff6a4a,0 0 26px -4px #ff5a3a}}
.combat{grid-template-rows:1fr;grid-auto-rows:auto}
.actions{grid-template-columns:repeat(5,minmax(0,1fr))}
.act.defend{background:linear-gradient(180deg,#1c2733,#121a22);border-color:#5b7fa655}
.act.defend.urgent{border-color:#ff8a5a;animation:warnpulse 1.2s ease-in-out infinite}
@media (max-width:1180px){.actions{grid-template-columns:repeat(2,minmax(0,1fr))}.act.primary{grid-column:1/-1}}
@media (max-width:640px){
  .vs{display:flex;width:auto;justify-content:center}
  .vs > :not(.pchips){display:none}
  .pchips:empty{display:none}
}
.float.miss{color:#cfd6e6;font-size:1.3rem}

.tip-box{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:65;width:min(560px,calc(100vw - 24px));display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;
  padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,#2a2317,#17130c);border:1px solid var(--gold-dim);box-shadow:0 20px 50px -12px #000;animation:pop .25s ease}
.tip-box p{font-size:.92rem;color:#efe6d2}
.tip-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#1a1307;font-weight:800}
.tip-btns{grid-column:2;display:flex;gap:8px;margin-top:4px}

/* eventos */
.ev-card h2{font-size:1.6rem}
.ev-text{font-size:1rem;color:#d9d1bf;font-style:italic}
.ev-choices{display:grid;gap:8px}
.ev-choice{display:grid;gap:2px;text-align:left;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,var(--stone3),var(--stone2));cursor:pointer;transition:transform .12s,border-color .15s}
.ev-choice:hover:not(:disabled){transform:translateX(4px);border-color:var(--gold)}
.ev-choice b{font-size:1rem}
.ev-choice span{font-size:.82rem;color:var(--gold-dim)}
.ev-choice:disabled{opacity:.45;cursor:not-allowed}
.ev-result{display:grid;gap:6px;padding:14px 16px;border-radius:12px;border:1px solid var(--line2);background:rgba(0,0,0,.25)}
.ev-main{font-size:1rem}
.ev-line{font-size:.9rem;color:var(--gold);font-weight:700}

/* lendários */
.leg-eff{margin-top:6px;font-size:.8rem;color:#ffe3a0;padding:6px 8px;border-radius:8px;background:rgba(255,201,60,.08);border:1px solid rgba(255,201,60,.25)}
.leg-eff b{display:inline;color:#ffc93c;font-size:.8rem}
.leg-mini{color:#ffc93c;font-weight:700}

/* conquistas e bestiário */
.ach-toast{position:fixed;right:16px;top:16px;z-index:70;display:flex;gap:12px;align-items:center;max-width:min(340px,calc(100vw - 32px));padding:12px 14px;border-radius:14px;
  background:linear-gradient(180deg,#2c2415,#17120a);border:1px solid var(--gold);box-shadow:0 20px 50px -10px #000;transform:translateX(120%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ach-toast.show{transform:none}
.ach-toast small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.ach-toast b{display:block;color:var(--gold-hi)}
.ach-toast span:not(.hanko){font-size:.8rem;color:var(--muted)}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:14px}
.ach{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;border:1px solid var(--line2);background:rgba(0,0,0,.22);opacity:.55}
.ach.on{opacity:1;border-color:var(--gold-dim)}
.ach .hanko{flex:none;width:34px;height:34px;font-size:18px}
.ach:not(.on) .hanko{background:#3a3530;color:#8a8070}
.ach b{display:block;font-size:.9rem}
.ach span:not(.hanko){display:block;font-size:.78rem;color:var(--muted)}
.ach small{font-size:.7rem;color:var(--gold-dim)}
.win-pills{display:flex;flex-wrap:wrap;gap:6px}
.win-pill{padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700;border:1px solid var(--line2);color:var(--faint)}
.win-pill.on{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 12%, transparent)}
.leg-list{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.88rem}
.leg-list b{color:#ffc93c}
.beast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.beast{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;border:1px solid var(--line2);background:rgba(0,0,0,.22)}
.beast.boss{border-color:rgba(255,90,74,.45)}
.beast.unknown{opacity:.45}
.b-kanji{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:#e9dcc0;color:#1c1a1d;font:700 26px/1 "Noto Serif JP","Yu Mincho",serif;box-shadow:inset 0 0 0 1px #1b1a1f,inset 0 0 0 3px #c9a86a}
.beast.boss .b-kanji{background:#b8322a;color:#f6e7cc}
.beast b{display:block;font-size:.9rem}
.beast span:not(.b-kanji):not(.chip){display:block;font-size:.76rem;color:var(--muted)}
.beast .chips{margin-top:5px}
.beast .chip{font-size:.68rem;padding:2px 7px}
.modal-card{width:min(860px,100%)}
/* ações: Atacar e Defender em cima, habilidades embaixo */
.actions{grid-template-columns:repeat(6,minmax(0,1fr))}
.act.primary{grid-column:span 3;order:0}
.act.defend{grid-column:span 3;order:1}
.act[data-act^="t"]{grid-column:span 2;order:2}
@media (max-width:640px){
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .act.primary,.act.defend{grid-column:span 1}
  .act[data-act^="t"]{grid-column:span 1}
  .act[data-act="t3"]{grid-column:1/-1}
}
.sheet-art .ns-portrait{position:absolute;right:7%;bottom:10%;left:auto;top:auto;width:clamp(64px,13%,160px);height:auto;object-fit:initial;animation:none}
.ns-bg{background-size:auto 118%;background-position:0% 18%;-webkit-mask-image:linear-gradient(90deg,#000 22%,transparent 42%);mask-image:linear-gradient(90deg,#000 22%,transparent 42%)}
.sheet-art.no-sheet{background:radial-gradient(ellipse at 70% 45%, color-mix(in srgb,var(--c) 22%, transparent), transparent 60%),#120f14}
.ns-note{position:absolute;right:7%;top:12%;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
@media (max-width:1100px){.center:has(.combat:not([hidden])){grid-template-rows:auto minmax(0,1fr) 70px}}
.ns-bg{background-size:auto 150%;background-position:0% 22%;-webkit-mask-image:linear-gradient(90deg,#000 17%,transparent 32%);mask-image:linear-gradient(90deg,#000 17%,transparent 32%)}
@media (max-width:640px){.sheet-art .ns-portrait{display:none}.ns-note{font-size:.6rem}.ns-brush{right:5%}}
.mh-right{display:flex;align-items:center;gap:14px}
.desk-actions{display:flex;gap:6px}
@media (max-width:1100px){.desk-actions{display:none}}

/* v6: artes dos chefes, prévias e dicas */
.foe-art.painting{background:#14110d;box-shadow:inset 0 0 0 2px #1b1a1f,0 0 0 1px #c9a86a88}
.foe-art.painting img{inset:0;width:100%;height:100%;object-fit:cover;animation:bossbreathe 6s ease-in-out infinite}
@keyframes bossbreathe{50%{transform:scale(1.035)}}
.combat.boss .foe.has-art{grid-template-columns:minmax(180px,260px) 1fr}
.b-pic{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover;box-shadow:0 0 0 1px #b8322a}
.boss-intro{position:fixed;inset:0;z-index:66;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at center,rgba(60,8,4,.75),rgba(0,0,0,.92));animation:fadein .3s ease;cursor:pointer}
.boss-intro.out{opacity:0;transition:opacity .35s}
.bi-card{display:grid;grid-template-columns:minmax(0,420px) minmax(0,300px);gap:22px;align-items:center;animation:biin .6s cubic-bezier(.2,.8,.2,1)}
.bi-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px #b8322a,0 30px 90px -20px #000,0 0 80px -20px #ff3a20}
.bi-text{display:grid;gap:8px}
.bi-text h2{font-size:clamp(1.6rem,4vw,2.6rem);color:#ffb3a6;text-shadow:0 0 30px rgba(255,60,30,.5)}
.bi-text p{color:#e9dccb}
@keyframes biin{from{transform:scale(.92);opacity:0}}
@media (max-width:640px){.bi-card{grid-template-columns:1fr;text-align:center;max-width:340px}}
.foe .bar{position:relative}
.hp-ghost{position:absolute;top:0;bottom:0;width:0;background:repeating-linear-gradient(45deg,rgba(255,240,200,.75) 0 4px,rgba(255,240,200,.35) 4px 8px);transition:width .15s,left .15s;pointer-events:none}
.hit-est{color:#ffab9e}
.act .est{display:block;font-size:.72rem;color:#ffd9a8;font-weight:700;margin-top:1px}
.act.has-ic .est{grid-column:2}
.act-wrap{display:grid;min-width:0;grid-column:span 2;order:2}
.act-wrap > .act{height:100%}
@media (max-width:640px){.act-wrap{grid-column:span 1}.act-wrap[data-tt="act:t3"]{grid-column:1/-1}}
.tt{position:fixed;z-index:80;max-width:300px;padding:10px 12px;border-radius:10px;background:#0b0c10f5;border:1px solid var(--gold-dim);box-shadow:0 14px 40px -10px #000;pointer-events:none;font-size:.84rem;line-height:1.4;animation:fadein .12s ease}
.tt-title{display:block;color:var(--gold-hi);font-size:.95rem}
.tt-line{display:block;font-size:.74rem;color:var(--mp);font-weight:700;margin-bottom:4px}
.tt p{color:#d8d2c4}
.tt-est{margin-top:6px;padding-top:6px;border-top:1px solid var(--line2)}
.tt-kill{color:#ffc93c;font-weight:700}
@media (hover:none){.tt{display:none}}

/* v7: melhorias, propriedades, história */
.perk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:700px){.perk-grid{grid-template-columns:1fr}}
.perk{display:grid;gap:6px;align-content:start;text-align:left;padding:16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--stone3),var(--stone2));cursor:pointer;transition:transform .12s,border-color .15s,box-shadow .15s;min-height:150px}
.perk:hover,.perk:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 30px -14px var(--gold)}
.perk.cls{border-color:color-mix(in srgb,var(--c) 55%, transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%, #1c1f29),var(--stone2))}
.perk.cls:hover{border-color:var(--c);box-shadow:0 12px 30px -14px var(--c)}
.perk b{font:700 1.05rem var(--display);color:var(--gold-hi)}
.perk span:not(.perk-tag){font-size:.9rem;color:#ddd6c6}
.perk small{font-size:.74rem;color:var(--faint);margin-top:auto}
.perk-tag{justify-self:start;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--c) 30%, transparent);color:#fff}
.perk-tag.gen{background:rgba(255,255,255,.08);color:var(--muted)}
.affix{margin-top:6px;font-size:.8rem;color:#bcd0ff;padding:6px 8px;border-radius:8px;background:rgba(110,150,255,.08);border:1px solid rgba(110,150,255,.25)}
.affix b{display:inline;color:#9fbaff;font-size:.8rem}
.affix-mini{color:#9fbaff;font-weight:700}
.story-box{display:grid;gap:10px;margin:14px 0 4px;padding:16px 18px;border-radius:12px;background:linear-gradient(180deg,#e9dcc0,#d9c7a0);color:#2a2118;font-size:.98rem;line-height:1.55;box-shadow:inset 0 0 0 1px #1b1a1f,inset 0 0 30px rgba(120,80,30,.35)}
.story-box p{color:#2a2118}
.story-cls{font-style:italic;font-weight:700;color:#5a2a1a!important;border-left:3px solid var(--c);padding-left:10px}
.abyss-tease{font-style:italic;color:#6a1d14!important}
.story-skip{display:flex;gap:6px;align-items:center;font-size:.85rem;cursor:pointer}
.end-hero img{object-fit:cover}
body.tt-touch .tt{display:block}

/* v9: elite, mercador, opções, efeitos de combate */
.node.t-elite{color:#ffb24a}.node.t-merchant{color:#7fd2c8}
.map-inner.painted .node.t-elite{border-color:#ffb24a99;box-shadow:0 3px 0 #1b1a1f,0 0 14px -2px #ffb24a88}
.combat.elite .foe{border-color:rgba(255,178,74,.6);box-shadow:0 0 34px -10px rgba(255,178,74,.7)}
.combat.elite #foe-type{color:#ffb24a}

.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px}
@media (max-width:700px){.opt-grid{grid-template-columns:1fr}}
.opt-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:.9rem;flex-wrap:wrap}
.opt-row.check{justify-content:flex-start;cursor:pointer}
.opt-row input[type=range]{width:min(180px,50%);accent-color:var(--gold)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--muted);padding:5px 10px;font-size:.8rem;font-weight:700;cursor:pointer}
.seg button.on{background:rgba(232,201,138,.16);color:var(--gold-hi)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.io-box{width:100%;margin-top:10px;background:#0b0c10;color:#d8d2c4;border:1px solid var(--line);border-radius:10px;padding:10px;font:12px/1.4 ui-monospace,Consolas,monospace;resize:vertical;word-break:break-all}
.file-btn{cursor:pointer}

/* velocidade */
body.speed-fast .float{animation-duration:.55s}
body.speed-fast .combat,body.speed-fast .modal,body.speed-fast .modal-card,body.speed-fast .shake,body.speed-fast .hit-flash{animation-duration:.15s}
body.speed-fast .bar i{transition-duration:.15s}
body.speed-instant .float{animation-duration:.3s}
body.speed-instant .combat,body.speed-instant .modal,body.speed-instant .modal-card,body.speed-instant .shake,body.speed-instant .hit-flash,body.speed-instant .flash{animation:none}
body.speed-instant .bar i{transition:none}

/* efeitos de combate */
.foe-art,.vs{position:relative}
.vs .cfx{position:absolute;left:50%;top:0;width:96px;height:96px;margin-left:-48px}
.cfx{position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit}
.cfx-slash::before,.cfx-slash::after,.cfx-crit::before,.cfx-crit::after{content:"";position:absolute;left:-10%;top:50%;width:120%;height:6px;border-radius:6px;background:linear-gradient(90deg,transparent,#fff,#ffe9b0,transparent);box-shadow:0 0 14px #fff;transform:rotate(-35deg) scaleX(0);animation:slash .32s ease-out forwards}
.cfx-crit::before,.cfx-crit::after{background:linear-gradient(90deg,transparent,#fff,#ff5a3a,transparent);box-shadow:0 0 18px #ff5a3a;height:8px}
.cfx-crit::after{transform:rotate(35deg) scaleX(0);animation:slash2 .32s .08s ease-out forwards}
@keyframes slash{0%{transform:rotate(-35deg) scaleX(0);opacity:1}60%{transform:rotate(-35deg) scaleX(1);opacity:1}100%{transform:rotate(-35deg) scaleX(1);opacity:0}}
@keyframes slash2{0%{transform:rotate(35deg) scaleX(0);opacity:1}60%{transform:rotate(35deg) scaleX(1);opacity:1}100%{transform:rotate(35deg) scaleX(1);opacity:0}}
.cfx-arrow::before,.cfx-arrow-big::before{content:"";position:absolute;top:48%;left:-30%;width:40%;height:3px;background:linear-gradient(90deg,transparent,#e8f5c8 40%,#fff);box-shadow:0 0 10px #c8f08a;animation:arrow .28s ease-in forwards}
.cfx-arrow-big::before{height:6px;box-shadow:0 0 22px #c8f08a,0 0 40px #8fd14f}
@keyframes arrow{to{left:55%;opacity:0}}
.cfx-fire,.cfx-meteor{background:radial-gradient(circle at 50% 55%,rgba(255,240,180,.95),rgba(255,140,40,.8) 25%,rgba(200,40,20,.45) 50%,transparent 70%);animation:burst .5s ease-out forwards;mix-blend-mode:screen}
.cfx-meteor{background:radial-gradient(circle at 50% 55%,#fff,rgba(130,170,255,.95) 20%,rgba(80,60,220,.6) 45%,transparent 72%);animation:burst .7s ease-out forwards}
.cfx-leaf,.cfx-leaf-big{background:radial-gradient(circle at 50% 50%,rgba(220,255,190,.9),rgba(98,201,90,.7) 30%,rgba(40,120,40,.3) 55%,transparent 70%);animation:burst .5s ease-out forwards;mix-blend-mode:screen}
.cfx-leaf-big{animation-duration:.75s}
.cfx-holy,.cfx-holy-big{background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,236,160,.85) 0 6deg,transparent 6deg 22deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:rays .6s ease-out forwards;mix-blend-mode:screen}
.cfx-holy-big{animation-duration:.85s}
.cfx-ult{background:radial-gradient(circle,#fff 0,rgba(255,220,150,.9) 20%,rgba(255,120,60,.5) 45%,transparent 70%);animation:burst .6s ease-out forwards;mix-blend-mode:screen}
.cfx-spikes{background:repeating-linear-gradient(100deg,transparent 0 14px,rgba(140,200,90,.85) 14px 18px,transparent 18px 30px);-webkit-mask:linear-gradient(0deg,#000 0,#000 45%,transparent 70%);mask:linear-gradient(0deg,#000,#000 45%,transparent 70%);animation:spikes .45s ease-out forwards}
.cfx-claw::before,.cfx-claw-big::before{content:"";position:absolute;inset:15%;background:repeating-linear-gradient(120deg,transparent 0 16%,rgba(255,80,60,.9) 16% 19%,transparent 19% 32%);animation:clawin .35s ease-out forwards}
.cfx-claw-big::before{inset:0;background:repeating-linear-gradient(120deg,transparent 0 12%,rgba(255,60,40,.95) 12% 17%,transparent 17% 26%)}
.cfx-heal{background:radial-gradient(circle,rgba(170,255,170,.75),transparent 65%);animation:healup .7s ease-out forwards;mix-blend-mode:screen}
@keyframes burst{0%{transform:scale(.3);opacity:0}25%{opacity:1}100%{transform:scale(1.3);opacity:0}}
@keyframes rays{0%{transform:scale(.4) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(1.25) rotate(40deg);opacity:0}}
@keyframes spikes{0%{transform:translateY(40%);opacity:0}40%{transform:translateY(0);opacity:1}100%{opacity:0}}
@keyframes clawin{0%{clip-path:inset(0 100% 0 0);opacity:1}50%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes healup{0%{transform:translateY(10px) scale(.8);opacity:0}40%{opacity:1}100%{transform:translateY(-14px) scale(1.1);opacity:0}}
.lunge{animation:lunge .38s cubic-bezier(.3,.7,.3,1)}
@keyframes lunge{40%{transform:translateX(-22px) scale(1.06)}}
.foe-art.strike{animation:strike .38s cubic-bezier(.3,.7,.3,1)}
@keyframes strike{40%{transform:translateX(22px) scale(1.05) rotate(1deg)}}
@media (max-width:640px){.foe-art.strike{animation:strikeM .38s ease}@keyframes strikeM{40%{transform:translateY(12px) scale(1.06)}}}
.stage.quake{animation:quake .42s linear}
@keyframes quake{15%{transform:translate(-6px,3px)}30%{transform:translate(5px,-4px)}45%{transform:translate(-4px,-2px)}60%{transform:translate(3px,3px)}80%{transform:translate(-2px,1px)}}
@media (prefers-reduced-motion: reduce){.cfx{display:none}}

/* v10: login, créditos, atalhos, bestiário */
#login-screen{position:relative;align-items:center;justify-content:center;padding:16px;overflow:auto}
.login-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(6px) brightness(.4) saturate(.9);transform:scale(1.05)}
.login-card{position:relative;width:min(460px,100%);display:grid;gap:14px;text-align:center;padding:28px 24px;border-radius:18px;background:linear-gradient(180deg,rgba(26,29,39,.92),rgba(16,18,24,.95));border:1px solid var(--line);box-shadow:0 30px 80px -20px #000}
.login-card .brand{font-size:2rem}
.login-sub{color:#d8d2c4}
.login-btns{display:grid;gap:10px}
.login-btn{width:100%;padding:13px 16px;font-size:1rem;color:#fff;border:1px solid rgba(255,255,255,.18)}
.lb-discord{background:#5865F2}.lb-twitch{background:#9146FF}
.login-status{font-size:.86rem;min-height:1.2em}
.login-note{font-size:.76rem;color:var(--faint)}
.user-chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.84rem;margin-bottom:4px}
.user-chip img{border-radius:50%;border:1px solid var(--line)}
.uc-status{color:var(--faint);font-size:.76rem}
.uc-out{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:7px;padding:2px 8px;font-size:.76rem;cursor:pointer}
.uc-dev{font-size:.74rem;color:#e8a35a;border:1px dashed #e8a35a77;border-radius:6px;padding:2px 8px}

.credits{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;padding:30px 22px 26px;border-radius:14px;
  background:radial-gradient(ellipse at 50% 0%,#f3e8cf,#e3d2ab 70%,#cdb98c);color:#231b14;box-shadow:inset 0 0 0 1px #1b1a1f,inset 0 0 50px rgba(120,80,30,.4)}
.credits::before,.credits::after{content:"";position:absolute;top:18px;bottom:18px;width:7px;border-radius:7px;background:linear-gradient(180deg,transparent,#1c1a1d 12%,#1c1a1d 70%,transparent);opacity:.75}
.credits::before{left:16px}.credits::after{right:16px;transform:scaleY(.8)}
.cr-enso{position:relative;width:120px;height:120px;display:grid;place-items:center}
.cr-enso img{position:absolute;inset:0;width:100%;height:100%}
.cr-enso span{position:relative;font:700 54px/1 "Noto Serif JP","Yu Mincho",serif;color:#1c1a1d}
.cr-brand{font:700 2rem var(--display);letter-spacing:.24em;text-transform:uppercase;color:#1c1a1d}
.cr-by{font-style:italic;color:#3a2c20}
.cr-by b{font-style:normal;color:#8e231a}
.cr-roles{display:grid;gap:4px;margin-top:6px}
.cr-roles p{display:grid;gap:0;color:#3a2c20}
.cr-roles span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#6a5440}
.cr-roles b{font:700 1.05rem var(--display);color:#1c1a1d}
.cr-brush{width:60%;height:10px;margin:10px 0 2px;border-radius:50%;background:radial-gradient(ellipse at 30% 50%,#1c1a1d,transparent 70%),radial-gradient(ellipse at 70% 50%,#1c1a1dcc,transparent 70%)}
.cr-thanks-t{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#8e231a;font-weight:800}
.credits .cr-thanks{font:600 1.25rem/1.45 var(--display);color:#1c1a1d;max-width:460px}
.cr-seal{width:40px;height:66px;font-size:20px;writing-mode:vertical-rl;letter-spacing:2px;margin-top:6px;line-height:1}
.cr-close{font-style:italic;color:#3a2c20;margin-top:4px}

.kb{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:5px;font:800 .66rem var(--body);background:#000a;color:var(--gold-hi);border:1px solid var(--gold-dim)}
.node .kb{position:absolute;right:-6px;bottom:-6px}
.perk .kb{justify-self:end;margin-bottom:-22px}
.ev-choice{grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.ev-choice .kb{grid-row:1/3}
.kb-hint{font-size:.74rem;color:var(--faint)}
@media (hover:none){.kb,.kb-hint{display:none}.ev-choice{grid-template-columns:1fr}}
.beast-head{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.beast-head div{border:1px solid var(--line2);border-radius:10px;padding:8px 10px;background:rgba(0,0,0,.25)}
.beast-head b{display:block;font:700 1.15rem var(--display);color:var(--gold)}
.beast-head span{font-size:.74rem;color:var(--muted)}
.b-extra{display:flex!important;gap:6px;margin-top:2px}
.b-elite{color:#ffb24a;font-size:.72rem}.b-abyss{color:#b08cff;font-size:.72rem}

/* ---------- santuário do artista (Pix) ---------- */
.pix-btn{display:inline-flex;align-items:center;gap:7px}
.pix-btn .hanko{width:22px;height:22px;font-size:13px;border-radius:4px}
.shrine{display:grid;gap:12px}
.sh-intro{color:var(--muted,#c9bba0);max-width:620px;line-height:1.5}
.sh-offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sh-off{display:grid;justify-items:center;gap:3px;padding:12px 8px;border-radius:12px;cursor:pointer;text-align:center;color:#231b14;
  background:radial-gradient(ellipse at 50% 0%,#f3e8cf,#e3d2ab 75%,#cdb98c);border:1px solid #1b1a1f;box-shadow:inset 0 0 22px rgba(120,80,30,.3);transition:transform .15s,box-shadow .15s}
.sh-off:hover{transform:translateY(-2px)}
.sh-off.on{box-shadow:0 0 0 3px #b8322a,inset 0 0 22px rgba(120,80,30,.3)}
.sh-off .hanko{width:38px;height:38px;font-size:21px;margin-bottom:2px}
.sh-off:not(.on) .hanko{background:#1c1a1d;color:#efe2c4}
.sh-off b{font:700 .95rem var(--display);color:#1c1a1d}
.sh-off em{font-style:normal;font-weight:800;color:#8e231a}
.sh-off small{font-size:.72rem;color:#5a4634;line-height:1.3}
.sh-pay{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;padding:16px;border-radius:14px;
  background:radial-gradient(ellipse at 50% 0%,#f3e8cf,#e3d2ab 70%,#cdb98c);color:#231b14;box-shadow:inset 0 0 0 1px #1b1a1f,inset 0 0 50px rgba(120,80,30,.35)}
.sh-qr{position:relative;width:200px;aspect-ratio:1;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px #1c1a1d}
.sh-qr svg{display:block;width:100%;height:100%}
.sh-qr.demo svg{filter:blur(3px);opacity:.55}
.sh-stamp{position:absolute;inset:auto 0 42% 0;margin:auto;width:max-content;padding:4px 12px;transform:rotate(-12deg);border:3px solid #b8322a;color:#b8322a;
  font:800 1.2rem var(--display);letter-spacing:.2em;background:#f3e8cfcc;border-radius:6px}
.sh-how{display:grid;gap:8px}
.sh-amt{font-size:1.05rem}.sh-amt b{color:#8e231a;font-family:var(--display)}
.sh-how ol{margin:0;padding-left:20px;display:grid;gap:3px;color:#3a2c20;font-size:.92rem}
.sh-how .btn{justify-self:start}
.sh-code{width:100%;font:500 .7rem/1.35 ui-monospace,monospace;color:#3a2c20;background:#fff8e6;border:1px solid #b9a37a;border-radius:8px;padding:6px 8px;resize:none;word-break:break-all}
.sh-demo{font-size:.85rem;color:#8e231a;font-weight:600}
.sh-msg{min-height:1.2em;font-weight:700;color:#2f6b2a}
@media (max-width:640px){
  .sh-offers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-pay{grid-template-columns:1fr;justify-items:center}
  .sh-qr{width:min(220px,70vw)}
}