@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&family=Merriweather:wght@400;700;900&display=swap');

:root{
  --bg:#0b0d0c;--panel:#151917;--panel2:#1d2420;--text:#f1f4f2;--muted:#98a49e;--border:#35413b;
  --accent:#78d6a2;--felt1:#184f37;--felt2:#0c3425;--gem:#7be7ff;--warn:#e5a85d;--danger:#dc6464;
  --r:#aab6b0;--sr:#b88cff;--ssr:#ffd36d;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 50% 0,#1a201d 0,#0b0d0c 55%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
button{font:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:18px;position:relative}
.header{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
h1{font-size:23px;margin:0}.subtitle{font-size:12px;color:var(--muted);margin-top:4px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.music-controls{display:flex;align-items:center;gap:8px;min-height:42px;padding:5px 9px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.music-toggle{min-height:30px;padding:4px 9px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-weight:750;cursor:pointer;white-space:nowrap}
.music-toggle.off{color:var(--muted)}
.music-volume{width:105px;accent-color:var(--accent);cursor:pointer}
.music-percent{width:34px;text-align:right;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.youtube-audio-host{position:fixed;left:-10000px;top:-10000px;width:480px;height:270px;opacity:.001;pointer-events:none;border:0}
@media(max-width:700px){.music-controls{width:100%;justify-content:flex-start}.music-volume{flex:1;max-width:180px}}

.btn{min-height:42px;padding:8px 13px;border-radius:10px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-weight:750;cursor:pointer}
.btn:hover:not(:disabled){border-color:#65776e}.btn:disabled{opacity:.38;cursor:not-allowed}.btn.extract{border-color:#66845c;background:#1a281d}.btn.danger{border-color:#754a4a}
.banner-btn{min-height:44px;padding:8px 18px;border:1px solid #f06a74;border-radius:11px;color:#fff;font-weight:900;letter-spacing:.04em;background:linear-gradient(135deg,#d52b3c,#8e1021 62%,#5a0913);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 6px 22px rgba(181,30,46,.28);cursor:pointer;position:relative;overflow:hidden}
.banner-btn::after{content:"";position:absolute;inset:-60% -30%;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.23) 50%,transparent 62%);transform:translateX(-70%);transition:transform .45s ease}.banner-btn:hover::after{transform:translateX(70%)}
.dashboard{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:10px;margin-bottom:10px}
.panel{border:1px solid var(--border);border-radius:12px;padding:10px;background:rgba(21,25,23,.96)}
.panel-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}.panel-head span{font-size:12px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.stat{padding:8px;border-radius:9px;background:var(--panel2);min-width:0}.stat b{display:block;font-size:18px}.stat small{color:var(--muted);font-size:11px}.gem-value{color:var(--gem)}
.threat-row{display:flex;align-items:center;gap:9px;margin-top:9px}.threat-track{height:9px;background:#28352e;border-radius:999px;overflow:hidden;flex:1}.threat-fill{height:100%;width:0;background:linear-gradient(90deg,#809d6e,#d6a557 58%,#c85f5f);transition:width .2s ease}.threat-num{font-size:12px;font-weight:800;min-width:44px;text-align:right}.extract-rule{margin-top:7px;font-size:12px;color:var(--muted)}
.artifacts{display:flex;gap:6px;flex-wrap:wrap;min-height:46px}.artifact{min-width:116px;border:1px solid var(--border);border-radius:9px;padding:7px;background:#19201c}.artifact.r{border-color:#56645e}.artifact.sr{border-color:#795d94}.artifact.ssr{border-color:#8f763a;box-shadow:inset 0 0 16px rgba(255,211,109,.05)}.artifact-top{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;font-weight:800}.artifact small{display:block;color:var(--muted);font-size:10px;margin-top:3px;line-height:1.25}.rarity{font-size:9px;font-weight:900;letter-spacing:.08em}.rarity.r{color:var(--r)}.rarity.sr{color:var(--sr)}.rarity.ssr{color:var(--ssr)}
.ability-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}.ability-panel{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--panel)}.ability-title{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}.ability-title span{font-size:11px;color:var(--muted)}
.powers{display:flex;gap:7px;flex-wrap:wrap;min-height:54px;align-items:center}.power-card{position:relative;min-height:52px;padding:6px 9px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);color:var(--text);display:flex;align-items:center;gap:7px;text-align:left;overflow:hidden;cursor:pointer}.power-card:disabled{opacity:.35;cursor:not-allowed}.power-card.active{outline:3px solid var(--accent);outline-offset:2px}.power-card .pi{font-size:22px;line-height:1}.power-card .pc{display:flex;flex-direction:column;gap:2px}.power-card small{font-weight:400;color:var(--muted);max-width:170px;font-size:10px}.count{font-size:10px;border:1px solid var(--border);border-radius:999px;padding:2px 5px;color:var(--muted)}.mode-note{font-size:12px;color:var(--muted);margin-top:7px;min-height:17px}.empty-note{font-size:11px;color:var(--muted)}
.felt{position:relative;background:linear-gradient(145deg,var(--felt1),var(--felt2));border-radius:18px;padding:14px;overflow:hidden;min-height:560px}.toprow,.tableau{display:grid;grid-template-columns:repeat(7,minmax(38px,1fr));gap:9px;align-items:start}.tableau{margin-top:18px;min-height:410px}.pile{position:relative;min-width:0;border-radius:10px}.card,.slot{display:block;width:100%;aspect-ratio:5/7;border-radius:9px;box-sizing:border-box;position:relative}.slot{border:1.5px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.035);color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;min-height:44px}.slot.pocket-slot{font-size:12px;flex-direction:column;gap:2px}.card{background:linear-gradient(#fff,#f7f5ef);border:1px solid rgba(0,0,0,.28);box-shadow:0 2px 4px rgba(0,0,0,.34);color:#171717;cursor:grab;text-align:left;font-weight:900;overflow:hidden;transition:transform .12s ease,opacity .12s ease}.card.red{color:#b92e2e}.card.back{background:repeating-linear-gradient(45deg,#203a69 0,#203a69 5px,#385a95 5px,#385a95 10px);border:2px solid #f4f5f8;color:transparent;cursor:pointer}.card.back::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.42);border-radius:5px}.card-head{position:absolute;z-index:4;left:5px;right:4px;top:4px;height:23px;display:flex;align-items:center;gap:3px;font-size:clamp(13px,2vw,20px);line-height:1;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 72%,rgba(255,255,255,0) 100%);border-radius:4px 4px 0 0}.center-suit{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);font-size:clamp(25px,5vw,45px);opacity:.72}.court{position:absolute;left:50%;top:59%;transform:translate(-50%,-50%);width:57%;height:48%}.court svg{width:100%;height:100%;display:block}.card.selected{outline:3px solid var(--accent);outline-offset:2px;z-index:90!important;transform:translateY(-2px)}.card.rift-pick{outline:3px dashed var(--accent);outline-offset:2px;z-index:91!important}.card.drag-source{opacity:.18}.pile .card{position:absolute;left:0}.drop-target{outline:3px solid var(--accent);outline-offset:3px}.stock-count{position:absolute;z-index:8;right:4px;bottom:4px;min-width:23px;height:23px;padding:0 5px;border-radius:999px;background:#fff;color:#10233f;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;opacity:1}
.card-back-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;opacity:1}
.card{background:#0e1117;border:1px solid rgba(255,255,255,.18)}
.card.back{background:#0e1117;border:1px solid rgba(255,255,255,.18);color:transparent;cursor:pointer}
.card.back::after{content:"";position:absolute;inset:0;border:none;border-radius:0}
.card-head{display:none}

/* ===== Threat warning on the table ===== */
.felt::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:18px;
  opacity:0;
  transition:opacity .22s ease,box-shadow .22s ease,background .22s ease;
  z-index:2;
}
.felt.threat-75::before{
  opacity:1;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,154,72,.18), transparent 18%),
    radial-gradient(circle at 100% 0%, rgba(255,154,72,.18), transparent 18%),
    radial-gradient(circle at 0% 100%, rgba(255,154,72,.18), transparent 18%),
    radial-gradient(circle at 100% 100%, rgba(255,154,72,.18), transparent 18%);
  box-shadow:
    inset 0 0 48px rgba(255,145,51,.10),
    inset 0 0 14px rgba(255,154,72,.12);
}
.felt.threat-90::before{
  opacity:1;
  background:
    linear-gradient(90deg, rgba(255,70,70,.18), transparent 7%, transparent 93%, rgba(255,70,70,.18)),
    linear-gradient(180deg, rgba(255,70,70,.18), transparent 7%, transparent 93%, rgba(255,70,70,.18));
  box-shadow:
    inset 0 0 82px rgba(255,59,59,.18),
    inset 0 0 20px rgba(255,70,70,.28);
}
.felt.threat-95::before{
  opacity:1;
  background:
    linear-gradient(90deg, rgba(255,42,42,.28), transparent 8%, transparent 92%, rgba(255,42,42,.28)),
    linear-gradient(180deg, rgba(255,42,42,.28), transparent 8%, transparent 92%, rgba(255,42,42,.28));
  box-shadow:
    inset 0 0 120px rgba(255,36,36,.28),
    inset 0 0 34px rgba(255,36,36,.44);
}

/* ===== Card movement feedback ===== */
.pickup-fly{position:absolute;z-index:520;width:62px;height:88px;border-radius:10px;border:1px solid var(--border);background:var(--panel2);box-shadow:0 10px 26px rgba(0,0,0,.38);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:900;pointer-events:none;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s ease}.pickup-fly .fi{font-size:28px}.pickup-fly .fn{font-size:9px;text-align:center;padding:0 3px}.power-pop{animation:powerPop .42s ease}@keyframes powerPop{0%{transform:scale(.72)}55%{transform:scale(1.12)}100%{transform:scale(1)}}.gem-fly{position:absolute;z-index:530;color:var(--gem);font-weight:950;text-shadow:0 2px 8px rgba(123,231,255,.35);pointer-events:none;transition:transform .65s cubic-bezier(.18,.8,.2,1),opacity .65s ease}.drag-ghost{position:absolute;pointer-events:none;z-index:400;filter:drop-shadow(0 12px 16px rgba(0,0,0,.35))}
.drag-ghost.pickup-pop{animation:dragPickup .18s ease-out}
@keyframes dragPickup{0%{transform:scale(.90)}70%{transform:scale(1.09)}100%{transform:scale(1)}}
.ghost-card{position:absolute;left:0;width:100%;aspect-ratio:5/7;border-radius:9px;background:linear-gradient(#fff,#f7f5ef);border:1px solid rgba(0,0,0,.28);box-sizing:border-box;color:#171717;font-weight:900;overflow:hidden}.ghost-card.red{color:#b92e2e}
.card-flight{
  position:absolute;
  z-index:540;
  pointer-events:none;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.40);
  transition:transform .24s cubic-bezier(.2,.84,.2,1),opacity .24s ease;
  will-change:transform,opacity;
}
.card-flight > .card{
  position:absolute!important;
  inset:0;
  width:100%!important;
  height:100%!important;
  top:0!important;
  left:0!important;
  aspect-ratio:auto!important;
  pointer-events:none;
  cursor:default;
}
.card.hand-pop{animation:handPop .22s ease}
.card.arrival-pop{animation:arrivalPop .22s ease}
@keyframes handPop{0%{transform:scale(.92)}62%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes arrivalPop{0%{transform:scale(1.08)}100%{transform:scale(1)}}
.overlay{position:fixed;inset:0;z-index:900;background:rgba(5,7,6,.82);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(5px)}.hidden{display:none!important}.banner-modal{max-width:760px;width:100%;max-height:92vh;overflow:auto;border:1px solid #8d3540;border-radius:18px;background:linear-gradient(160deg,#2a1116,#141716 54%,#111412);box-shadow:0 24px 70px rgba(0,0,0,.55);padding:16px;position:relative}.banner-hero{min-height:180px;border-radius:14px;border:1px solid rgba(255,211,109,.25);padding:18px;background:radial-gradient(circle at 78% 24%,rgba(255,214,116,.22),transparent 24%),radial-gradient(circle at 65% 62%,rgba(232,60,82,.2),transparent 30%),linear-gradient(135deg,#6f0c18,#2b1015 58%,#171817);position:relative;overflow:hidden}.banner-hero::after{content:"✦";position:absolute;right:34px;top:18px;font-size:96px;color:rgba(255,211,109,.17);transform:rotate(18deg)}.banner-kicker{font-size:11px;letter-spacing:.16em;color:#e8a3aa;font-weight:900}.banner-hero h2{margin:6px 0 5px;font-size:30px}.banner-hero p{max-width:500px;color:#d4c3c5;font-size:13px;line-height:1.45;margin:0}.banner-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}.banner-pill{border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:5px 8px;font-size:11px;background:rgba(0,0,0,.2)}.banner-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.close{min-width:42px;min-height:42px;border-radius:10px;border:1px solid #5d3036;background:#25181a;color:#fff;cursor:pointer}.gacha-stage{min-height:170px;border:1px solid #493337;border-radius:13px;background:radial-gradient(circle at 50% 50%,rgba(171,39,58,.16),transparent 55%),#111513;margin-top:10px;padding:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}.spin-row{display:flex;gap:9px;justify-content:center;align-items:center;perspective:700px}.spin-card{width:72px;height:102px;border-radius:10px;border:1px solid #a54b57;background:repeating-linear-gradient(45deg,#6f1020 0,#6f1020 7px,#971b2d 7px,#971b2d 14px);box-shadow:0 8px 18px rgba(0,0,0,.35);position:relative}.spin-card::after{content:"✦";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.2);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#f4c76a;font-size:28px}.spinning .spin-card{animation:spinCard .7s ease-in-out infinite alternate}.spinning .spin-card:nth-child(2){animation-delay:.08s}.spinning .spin-card:nth-child(3){animation-delay:.16s}.spinning .spin-card:nth-child(4){animation-delay:.24s}.spinning .spin-card:nth-child(5){animation-delay:.32s}@keyframes spinCard{0%{transform:translateY(16px) rotateY(-16deg) scale(.92);filter:brightness(.7)}100%{transform:translateY(-14px) rotateY(18deg) scale(1.05);filter:brightness(1.25)}}.results{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.reward{width:112px;min-height:145px;border-radius:11px;padding:9px;border:1px solid var(--border);background:#1b211e;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;animation:reveal .34s ease both}.reward.r{border-color:#66736d}.reward.sr{border-color:#8c69aa;box-shadow:0 0 18px rgba(184,140,255,.12)}.reward.ssr{border-color:#b89845;box-shadow:0 0 24px rgba(255,211,109,.2);background:radial-gradient(circle at 50% 20%,rgba(255,211,109,.11),#1b211e 58%)}.reward .ri{font-size:31px}.reward strong{font-size:12px;margin-top:6px}.reward small{font-size:9px;color:var(--muted);margin-top:4px}.reward .rr{font-size:10px;font-weight:950;letter-spacing:.12em;margin-top:5px}@keyframes reveal{from{opacity:0;transform:scale(.72) rotateY(35deg)}to{opacity:1;transform:scale(1) rotateY(0)}}.pull-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:11px}.pull-btn{min-height:46px;padding:9px 17px;border-radius:11px;border:1px solid #e15b68;background:linear-gradient(135deg,#cf283a,#84111f);color:white;font-weight:900;cursor:pointer}.pull-btn:disabled{opacity:.4;cursor:not-allowed}.pull-btn.secondary{border-color:#71545b;background:#2b1a1e}
.result-overlay{position:absolute;inset:0;z-index:700;background:rgba(5,9,7,.78);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}.result-box{max-width:470px;width:100%;border:1px solid var(--border);border-radius:14px;background:#151c18;padding:18px;text-align:center}.result-box h2{margin:0 0 8px}.result-box p{color:var(--muted);font-size:13px;line-height:1.45}.result-box .big{font-size:28px;font-weight:900;color:var(--gem);margin:10px 0}.result-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.help{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.45}
@media(max-width:900px){.dashboard,.ability-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(5,minmax(85px,1fr))}}
@media(max-width:700px){.wrap{padding:10px}.felt{padding:8px;min-height:440px}.toprow,.tableau{gap:4px}.tableau{margin-top:13px;min-height:330px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.card-head{left:3px;top:3px;height:18px;font-size:12px}.stock-count{min-width:19px;height:19px;font-size:9px;right:2px;bottom:2px}.power-card small{max-width:118px}.banner-hero h2{font-size:25px}.spin-card{width:53px;height:75px}.reward{width:92px;min-height:130px}}
@media(prefers-reduced-motion:reduce){.card,.pickup-fly,.gem-fly,.threat-fill{transition:none}.power-pop,.spinning .spin-card,.reward{animation:none}}

/* ===== Campaign / save / world map UI ===== */
.campaign-shell{position:fixed;inset:0;z-index:850;background:
radial-gradient(circle at 50% -10%,rgba(106,40,52,.28),transparent 38%),
linear-gradient(180deg,#101513,#090c0b 70%);color:var(--text);overflow:auto}
.campaign-view{min-height:100vh;padding:24px;box-sizing:border-box}
.campaign-inner{max-width:1120px;margin:0 auto}
.menu-view{display:flex;align-items:center;justify-content:center}
.main-menu-card{width:min(560px,100%);border:1px solid var(--border);border-radius:22px;background:rgba(19,26,22,.96);box-shadow:0 30px 90px rgba(0,0,0,.5);padding:28px}
.main-menu-card h1{font-size:34px;margin:0 0 5px}
.menu-sub{color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:24px}
.menu-actions{display:grid;gap:9px}
.menu-actions button{width:100%;min-height:48px;font-size:14px}
.save-summary{margin:18px 0;padding:12px;border:1px solid var(--border);border-radius:12px;background:#101713;font-size:12px;color:var(--muted);line-height:1.55}
.campaign-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.campaign-title h2{margin:0;font-size:24px}.campaign-title small{color:var(--muted)}
.campaign-actions{display:flex;gap:8px;flex-wrap:wrap}
.campaign-pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--border);border-radius:999px;padding:7px 10px;background:#111915;font-size:12px}
.world-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:stretch}
.world-board{position:relative;min-height:650px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:
radial-gradient(circle at 22% 80%,rgba(72,94,77,.16),transparent 22%),
radial-gradient(circle at 74% 35%,rgba(113,45,56,.14),transparent 26%),
linear-gradient(180deg,#101814,#0c110f)}
.world-board::before{content:"";position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:48px 48px}
.map-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-lines line{stroke:rgba(178,195,181,.22);stroke-width:3}.map-lines line.available{stroke:rgba(255,211,109,.55);stroke-width:4}
.world-node{position:absolute;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:2px solid var(--border);background:#18221d;color:var(--text);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;cursor:default;box-shadow:0 8px 22px rgba(0,0,0,.35);z-index:2}
.world-node .ni{font-size:23px;line-height:1}.world-node .nl{font-size:9px;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.world-node.raid{border-color:#85535b}.world-node.merchant{border-color:#9b7d43;background:#211d12}.world-node.current{border-color:#6ca67e;background:#182b20;box-shadow:0 0 0 5px rgba(87,155,107,.12),0 8px 22px rgba(0,0,0,.35)}
.world-node.available{cursor:pointer;animation:nodePulse 2s ease-in-out infinite}.world-node.available:hover{transform:translate(-50%,-50%) scale(1.08)}
.world-node.locked{opacity:.38;filter:saturate(.55)}
@keyframes nodePulse{50%{box-shadow:0 0 0 7px rgba(255,211,109,.08),0 8px 22px rgba(0,0,0,.35)}}
.node-drawer{border:1px solid var(--border);border-radius:18px;background:#121a16;padding:16px;min-height:300px;align-self:stretch;transform:translateX(0);transition:transform .2s ease}
.drawer-empty{height:100%;min-height:280px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:20px}
.drawer-kicker{font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.node-drawer h3{font-size:20px;margin:6px 0}.node-drawer p{font-size:12px;color:var(--muted);line-height:1.5}
.node-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px}.node-meta span{font-size:10px;border:1px solid var(--border);border-radius:999px;padding:5px 7px}
.drawer-actions{display:grid;gap:8px;margin-top:16px}
.prep-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}
.prep-panel,.merchant-panel{border:1px solid var(--border);border-radius:18px;background:#121a16;padding:16px}
.prep-panel h3,.merchant-panel h3{margin:0 0 4px}.prep-desc{font-size:12px;color:var(--muted);margin-bottom:14px}
.loadout-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.loadout-item{border:1px solid var(--border);border-radius:12px;background:#101713;padding:10px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:9px}
.loadout-item .li{font-size:25px;text-align:center}.loadout-item strong{display:block;font-size:12px}.loadout-item small{display:block;color:var(--muted);font-size:10px;line-height:1.3;margin-top:2px}
.qty{display:flex;align-items:center;gap:5px}.qty button{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:#19231e;color:var(--text);cursor:pointer}.qty b{min-width:20px;text-align:center}
.prep-side{border:1px solid var(--border);border-radius:18px;background:#111713;padding:16px;height:max-content}
.equip-summary{display:grid;gap:6px;margin:10px 0}.equip-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.06);padding:6px 0;font-size:11px}
.prep-footer{display:grid;gap:8px;margin-top:14px}
.merchant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.shop-item{border:1px solid var(--border);border-radius:14px;background:#0f1612;padding:14px;display:flex;flex-direction:column;min-height:210px}
.shop-icon{font-size:34px}.shop-item h4{margin:8px 0 3px}.shop-item p{font-size:11px;color:var(--muted);line-height:1.4;flex:1}.shop-price{font-weight:900;color:var(--gem);margin:8px 0}
.shop-item.sold{opacity:.5}.shop-item .rarity{align-self:flex-start}
.map-legend{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:10px;margin-top:9px}
.map-legend span{display:flex;align-items:center;gap:4px}.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#85535b}.legend-dot.shop{background:#9b7d43}
.campaign-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:980;background:#111a15;border:1px solid var(--border);border-radius:10px;padding:9px 13px;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
@media(max-width:850px){.world-layout,.prep-layout{grid-template-columns:1fr}.world-board{min-height:600px}.node-drawer{min-height:0}.merchant-grid{grid-template-columns:1fr}.campaign-view{padding:12px}}


/* ===== Character / squad system ===== */
.squad-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.squad-slot{min-width:0;border:1px solid var(--border);border-radius:12px;background:#101713;padding:7px}
.squad-slot.empty{display:flex;align-items:center;justify-content:center;min-height:132px;border-style:dashed;color:var(--muted);font-size:10px;text-align:center}
.char-avatar{position:relative;width:100%;aspect-ratio:5/7;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:
radial-gradient(circle at 50% 26%,rgba(255,255,255,.13),transparent 25%),
linear-gradient(155deg,#303a33,#141a17 66%);display:flex;align-items:center;justify-content:center}
.char-avatar::after{content:"AVATAR";position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:.18em;color:rgba(255,255,255,.32)}
.char-avatar.r{box-shadow:inset 0 0 0 1px rgba(151,175,153,.22)}
.char-avatar.sr{box-shadow:inset 0 0 0 1px rgba(124,143,220,.36)}
.char-avatar.ssr{box-shadow:inset 0 0 0 1px rgba(233,184,82,.42)}
.char-avatar .avatar-mark{font-size:28px;font-weight:900;opacity:.8}
.squad-slot strong{display:block;font-size:10px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.squad-slot small{display:block;font-size:8px;color:var(--muted);line-height:1.3;margin-top:2px}
.char-stars{font-size:11px;letter-spacing:.02em;color:#e0c16e}
.char-c{font-size:10px;font-weight:900;color:var(--accent)}
.character-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:18px;margin-top:14px}
.roster-char{border:1px solid var(--border);border-radius:18px;background:#0f1612;padding:14px;display:grid;grid-template-columns:156px minmax(0,1fr);gap:16px;text-align:left;color:var(--text)}
.roster-char.owned{cursor:pointer}.roster-char.owned:hover{border-color:rgba(255,211,109,.45)}
.roster-char.selected{outline:3px solid var(--accent);outline-offset:1px}
.roster-char.locked{opacity:.5}
.roster-char .char-avatar{width:156px;border-radius:14px}
.char-info h4{margin:0 0 5px;font-size:21px}
.char-info .subtitle{font-size:14px;color:var(--muted)}
.char-info .base-passive{font-size:13px;line-height:1.5;margin:10px 0;color:#d6ddd8}
.constellation-list{margin-top:10px;display:grid;gap:8px}
.constellation-line,
.squad-constellation{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;
  padding:10px 12px;
  background:#111814;
}
.constellation-line.unlocked,
.constellation-line.base,
.squad-constellation.active{
  color:#c7f3c5;
  border-color:rgba(115,185,113,.42);
  background:rgba(54,97,54,.36);
}
.constellation-line.next{
  color:var(--muted);
}
.constellation-line .constellation-badge,
.squad-constellation-label{
  font-weight:900;
  color:#e0c16e;
}
.prep-squad-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:8px 0}
.prep-squad-mini{border:1px solid var(--border);border-radius:8px;padding:5px;background:#0e1511;text-align:center;font-size:8px}
.prep-squad-mini .mini-avatar{width:100%;aspect-ratio:5/7;border:1px solid rgba(255,255,255,.12);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:18px;background:#19211d;margin-bottom:4px}
.prep-squad-mini.empty{opacity:.45}
.reward.character-reward .ri{width:48px;height:67px;border-radius:7px;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#171e1a}
.shop-char-avatar{width:72px;aspect-ratio:5/7;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:#18201c;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:8px}
.portrait-fill{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;image-rendering:pixelated}
.char-avatar.has-art::after{display:none}
.char-avatar.has-art .avatar-mark{display:none}
.prep-squad-mini .mini-avatar.has-art,.shop-char-avatar.has-art,.reward.character-reward .ri.has-art{overflow:hidden;background:#111915;font-size:0}
.char-avatar.has-art .portrait-fill,.prep-squad-mini .mini-avatar.has-art .portrait-fill,.shop-char-avatar.has-art .portrait-fill,.reward.character-reward .ri.has-art .portrait-fill{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;image-rendering:pixelated}
@media(max-width:980px){.character-roster{grid-template-columns:1fr}.roster-char{grid-template-columns:136px minmax(0,1fr)}.roster-char .char-avatar{width:136px}.char-info h4{font-size:19px}.constellation-line{font-size:11px}}
@media(max-width:700px){.squad-grid{grid-template-columns:repeat(2,1fr)}.character-roster{grid-template-columns:1fr}.roster-char{grid-template-columns:120px minmax(0,1fr);padding:12px;gap:12px}.roster-char .char-avatar{width:120px}.char-info h4{font-size:17px}.char-info .subtitle{font-size:12px}.char-info .base-passive{font-size:11px}.constellation-line{font-size:10.5px;padding:8px 10px}}


/* ===== Developer mailbox gift ===== */
.dev-mail-btn{
  position:fixed;left:calc(50% + 310px);top:14px;z-index:3000;
  width:60px;height:60px;border-radius:17px;border:1px solid rgba(255,255,255,.28);
  background:#18231d;color:var(--text);box-shadow:0 12px 36px rgba(0,0,0,.58),0 0 0 2px rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center;font-size:30px;cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,opacity .14s ease
}
.dev-mail-btn:hover{transform:translateY(-2px);border-color:rgba(255,211,109,.48)}
.dev-mail-btn.claimed{opacity:.72}
.dev-mail-btn::after{
  content:"";position:absolute;right:6px;top:6px;width:10px;height:10px;border-radius:50%;
  background:#e33b3b;border:2px solid #141c18;box-shadow:0 0 0 3px rgba(227,59,59,.18)
}
.dev-mail-btn.claimed::after{display:none}
.dev-mail-overlay{
  position:fixed;inset:0;z-index:990;background:rgba(3,6,5,.72);
  display:flex;align-items:center;justify-content:center;padding:18px
}
.dev-mail-card{
  width:min(500px,100%);border:1px solid var(--border);border-radius:18px;
  background:#121a16;box-shadow:0 28px 90px rgba(0,0,0,.55);padding:22px
}
.dev-mail-card .mail-icon{font-size:36px;margin-bottom:8px}
.dev-mail-card h3{margin:0 0 10px;font-size:22px}
.dev-mail-card p{font-size:13px;line-height:1.6;color:#d7ddd9;margin:0}
.dev-mail-reward{
  margin:16px 0 0;border:1px solid rgba(214,180,86,.34);border-radius:12px;
  background:#17180f;padding:12px;font-size:13px;font-weight:900;color:#e0c16e
}
.dev-mail-status{font-size:11px;color:var(--muted);margin-top:8px}
.dev-mail-actions{display:flex;justify-content:flex-end;margin-top:16px}
@media(max-width:900px){.dev-mail-btn{left:auto;right:16px;top:12px;width:56px;height:56px}}


/* ===== 16:9 battle layout ===== */
#game{max-width:1560px}
#game .toolbar .dev-mail-btn{
  position:relative;left:auto;right:auto;top:auto;bottom:auto;z-index:3;
  width:42px;height:42px;min-height:42px;border-radius:12px;
  font-size:22px;margin-left:6px;flex:0 0 auto;
  border:1px solid var(--border);background:var(--panel2);box-shadow:none;
  overflow:visible
}
#game .toolbar .dev-mail-btn:hover{transform:translateY(-1px)}
#game .toolbar .dev-mail-btn::after{right:4px;top:4px;width:10px;height:10px}
#game .toolbar .dev-mail-btn.claimed::after{display:none}

@media (min-width: 1360px){
  #game{
    display:grid;
    grid-template-columns:minmax(780px,1.48fr) minmax(390px,.82fr);
    grid-template-areas:
      "header header"
      "felt dashboard"
      "felt abilities";
    gap:12px 14px;
    align-items:start;
  }
  #game > .header{grid-area:header;margin-bottom:0}
  #game > .dashboard{
    grid-area:dashboard;
    margin-bottom:0;
    display:grid;
    grid-template-columns:1fr;
    align-content:start;
  }
  #game > .ability-grid{
    grid-area:abilities;
    margin-bottom:0;
    grid-template-columns:1fr;
    align-content:start;
  }
  #game > .felt{grid-area:felt;min-height:760px}
  #game .panel,#game .ability-panel{height:fit-content}
}

@media (max-width: 1359px){
  #game .toolbar .dev-mail-btn{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;z-index:3;
  }
}


/* ===== Cleaner battle actions ===== */
.battle-action-group{display:flex;flex-direction:column;align-items:stretch;gap:3px}
.battle-major-btn{min-height:56px!important;padding:10px 22px!important;font-size:15px!important;font-weight:900!important}
.battle-banner-btn{min-height:56px!important;padding:10px 24px!important;font-size:15px!important}
.extract-counter{
  display:block;text-align:center;white-space:nowrap;
  font-size:10px;line-height:1.15;color:var(--muted);font-weight:700
}
.extract-action:has(#extract:not(:disabled)) .extract-counter{color:#9bc59d}

@media(max-width:700px){
  .battle-action-group{width:100%}
  .battle-major-btn,.battle-banner-btn{width:100%}
}


.campaign-mail-btn{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  z-index:3!important;
  width:46px!important;
  height:46px!important;
  min-height:46px!important;
  border-radius:14px!important;
  font-size:22px!important;
  box-shadow:none!important;
  overflow:visible!important;
  flex:0 0 auto;
  margin-left:6px;
}
.campaign-actions,.menu-actions{
  align-items:center;
}
.campaign-actions .campaign-mail-btn::after,
.menu-actions .campaign-mail-btn::after{
  right:4px;top:4px;width:10px;height:10px;
}
@media(max-width:900px){
  .campaign-mail-btn{
    width:44px!important;
    height:44px!important;
    min-height:44px!important;
  }
}


/* ===== Battle UI rework ===== */
#game .header{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
#game .header > div:first-child{min-width:0}
#game .header h1{font-size:18px}
#game .header .subtitle{display:none}
#game .toolbar{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  overflow-x:auto;
  padding-bottom:2px;
}
#game .toolbar::-webkit-scrollbar{height:6px}
#game .toolbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
#game .toolbar .btn{flex:0 0 auto}
#game .toolbar .music-controls{flex:0 0 auto}
#game .toolbar .music-volume{width:86px}
#game .toolbar .music-state{max-width:120px;overflow:hidden;text-overflow:ellipsis}

.raid-panel .panel-head{margin-bottom:10px}
.raid-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) 184px;
  gap:12px;
  align-items:start;
}
.raid-main{min-width:0}
.raid-stat-groups{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  margin-bottom:10px;
}
.stats-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats-left .stat b,.stats-right .stat b{font-size:18px}
.evac-track{background:#24343a;transition:box-shadow .18s ease,border-color .18s ease,background .18s ease}
.evac-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,#5a7fd8,#59b8e4 62%,#8de5ff);
  transition:width .2s ease, background .18s ease;
}
.evac-track.ready{
  background:#1f3a28;
  box-shadow:inset 0 0 0 1px rgba(112,214,141,.18), 0 0 10px rgba(56,166,92,.16);
}
.evac-track.ready .evac-fill{
  background:linear-gradient(90deg,#4aa860,#67d27d 58%,#9df0b0);
}
.btn.extract.ready{
  border-color:#63c377;
  background:linear-gradient(135deg,#1e4b2a,#246737 58%,#1e8d4a);
  color:#f3fff5;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 8px 24px rgba(44,156,87,.28);
}
.btn.extract.ready:hover:not(:disabled){
  border-color:#8ee3a0;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 10px 28px rgba(44,156,87,.36);
}
.raid-side{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}
.battle-banner-btn,
.battle-major-btn{
  min-height:54px !important;
  width:100%;
  font-size:15px !important;
  font-weight:900 !important;
  padding:10px 14px !important;
}
.battle-note{
  display:block;
  margin-top:-3px;
  text-align:center;
  color:var(--muted);
  font-size:10px;
  line-height:1.2;
  min-height:12px;
}
.extract-rule,.extract-counter{display:none !important}

/* right sidebar tooltip */
.squad-slot{
  position:relative;
  overflow:visible;
}
.squad-tooltip{
  position:fixed;
  left:50%;
  top:50%;
  bottom:auto;
  transform:translate(-50%,-50%) scale(.98);
  width:min(440px,calc(100vw - 28px));
  max-width:min(440px,calc(100vw - 28px));
  max-height:min(78vh,720px);
  overflow:auto;
  border:1px solid rgba(133,164,138,.38);
  border-radius:14px;
  background:rgba(14,18,16,.985);
  box-shadow:0 24px 54px rgba(0,0,0,.52);
  padding:12px;
  z-index:1500;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.squad-slot:hover .squad-tooltip,
.squad-slot:focus-within .squad-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}
.squad-tooltip-title{
  font-size:11px;
  font-weight:900;
  margin-bottom:4px;
}
.squad-tooltip-list{
  display:grid;
  gap:5px;
}
.squad-slot:hover{z-index:5}

#game .toolbar .dev-mail-btn{
  position:relative !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
}

@media (min-width:1360px){
  #game{
    grid-template-columns:minmax(760px,1.52fr) minmax(410px,.86fr);
  }
}
@media (max-width:980px){
  .raid-overview{grid-template-columns:1fr}
  .raid-stat-groups{grid-template-columns:1fr}
}



/* ===== Dark fantasy UI overhaul ===== */
:root{
  --bg:#0e0a08;
  --panel:#1b1511;
  --panel2:#281e17;
  --text:#f0e2bf;
  --muted:#b59c73;
  --border:#735636;
  --accent:#d0ab68;
  --felt1:#1d4b39;
  --felt2:#0f291f;
  --gem:#84d7ff;
  --warn:#df9a43;
  --danger:#b95649;
  --r:#cab692;
  --sr:#c7a3ff;
  --ssr:#f6d48a;
}
html,body{
  background:
    radial-gradient(circle at 50% -8%, rgba(151,92,47,.22), transparent 30%),
    radial-gradient(circle at 20% 15%, rgba(90,55,26,.20), transparent 22%),
    linear-gradient(180deg,#16100c 0%, #0b0806 85%);
  color:var(--text);
  font-family:"VT323","Courier New",monospace;
  letter-spacing:.02em;
}
body::before,
.campaign-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 0 0, rgba(255,227,170,.035), transparent 18%),
    radial-gradient(circle at 100% 0, rgba(255,227,170,.035), transparent 18%),
    radial-gradient(circle at 0 100%, rgba(255,227,170,.025), transparent 18%),
    radial-gradient(circle at 100% 100%, rgba(255,227,170,.025), transparent 18%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.008) 0 2px, rgba(0,0,0,0) 2px 8px);
  mix-blend-mode:soft-light;
  opacity:.85;
  z-index:0;
}
.wrap,.campaign-inner,.main-menu-card,.world-layout,.node-drawer,.world-board,.felt,.dashboard,.ability-grid,.panel,.ability-panel,.raid-side{position:relative;z-index:1}
h1,h2,h3,h4,
.btn,.banner-btn,.pull-btn,.music-toggle,.campaign-pill,.drawer-kicker,.world-node .nl,.dev-mail-btn,
.panel-head b,.ability-title b,.raid-title,.campaign-title,.toolbar strong{
  font-family:"Silkscreen","VT323",monospace;
  letter-spacing:.04em;
}
h1,h2,h3,h4{color:#f7e8c8;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.subtitle,.menu-sub,.save-summary,.panel-head span,.ability-title span,.campaign-title small,.battle-note,.mode-note,.extract-rule,.char-info .subtitle,.char-info .base-passive,.node-drawer p,.reward small,.artifact small,.stat small,.squad-slot small,.empty-note,.drawer-empty,.music-percent{
  color:var(--muted)!important;
}
.gem-value,.campaign-pill b,#map-gems,#map-depth,.dev-mail-reward b{color:var(--gem)!important}
.char-stars,.rarity.ssr{color:#f3cc81}
.rarity.sr{color:#c8a4ff}
.rarity.r{color:#cab692}

.panel,.ability-panel,.main-menu-card,.node-drawer,.result-box,.save-summary,.dev-mail-card,.music-controls,
.roster-char,.squad-slot,.reward,.stat,.artifact,.power-card,.campaign-pill,
.prep-squad-mini,.prep-squad-mini .mini-avatar,.shop-char-avatar,.reward .ri,
.world-board,.battle-action-group .extract-counter,.squad-tooltip{
  position:relative;
  background:
    linear-gradient(180deg, rgba(58,43,29,.96), rgba(34,24,18,.98) 55%, rgba(24,17,13,.99)),
    radial-gradient(circle at 50% 0, rgba(255,236,198,.05), transparent 48%);
  border:1px solid #735636;
  box-shadow:
    0 10px 26px rgba(0,0,0,.36),
    inset 0 0 0 1px rgba(244,219,164,.05),
    inset 0 1px 0 rgba(255,243,216,.05);
}
.panel::before,.ability-panel::before,.main-menu-card::before,.node-drawer::before,.result-box::before,.dev-mail-card::before,
.roster-char::before,.squad-slot::before,.reward::before,.stat::before,.artifact::before,.power-card::before,
.world-board::before,.save-summary::before,.music-controls::before,.campaign-pill::before,.squad-tooltip::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(214,182,120,.16);
  border-radius:inherit;
  pointer-events:none;
}
.panel,.ability-panel,.node-drawer,.result-box,.dev-mail-card,.save-summary,.music-controls,.world-board,.roster-char,.squad-slot,.reward,.stat,.artifact,.power-card{
  border-radius:14px;
}
.main-menu-card{border-radius:24px}

.btn,.music-toggle,.pull-btn,.dev-mail-btn,#game .toolbar .dev-mail-btn{
  border:1px solid #8b6942!important;
  background:
    linear-gradient(180deg,#453021 0%, #2d1e14 55%, #1d140e 100%)!important;
  color:#f7e7c5!important;
  text-shadow:0 1px 0 rgba(0,0,0,.72);
  box-shadow:
    0 7px 18px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,241,210,.09),
    inset 0 -1px 0 rgba(0,0,0,.42)!important;
  border-radius:12px!important;
}
.btn:hover:not(:disabled),.music-toggle:hover,.pull-btn:hover:not(:disabled),.dev-mail-btn:hover{
  border-color:#d6b078!important;
  transform:translateY(-1px);
}
.btn:disabled,.pull-btn:disabled{opacity:.42}
.btn.extract,
.battle-major-btn{
  border-color:#7b8b53!important;
  background:linear-gradient(180deg,#3e4322,#293018 58%,#191e11)!important;
}
.btn.extract.ready,
.battle-major-btn.ready{
  border-color:#83be73!important;
  background:linear-gradient(180deg,#3e5f2d,#2d4420 55%,#1b2e15)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 10px 26px rgba(81,170,95,.26), inset 0 1px 0 rgba(232,255,229,.08)!important;
}
.banner-btn,.battle-banner-btn,.pull-btn{
  border-color:#c46c74!important;
  background:linear-gradient(180deg,#7e2b31,#58171d 60%,#370d12)!important;
  box-shadow:0 9px 22px rgba(129,23,36,.32), inset 0 1px 0 rgba(255,224,224,.08)!important;
}
.banner-btn::after{display:none}
.banner-btn::before,.battle-banner-btn::before,.pull-btn::before{
  content:"✦";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,239,205,.35);
  font-size:12px;
  pointer-events:none;
}
.music-controls{
  padding:7px 12px!important;
  gap:10px!important;
}
.music-volume{accent-color:#c9a25c}
input[type="range"]{accent-color:#c9a25c}

.campaign-shell{
  background:
    radial-gradient(circle at 50% -8%, rgba(108,54,36,.28), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(80,37,27,.18), transparent 22%),
    linear-gradient(180deg,#150f0c,#090706 72%)!important;
}
.main-menu-card{
  background:
    linear-gradient(180deg, rgba(44,30,20,.97), rgba(25,17,12,.99) 65%),
    radial-gradient(circle at 50% 0, rgba(255,229,183,.08), transparent 52%)!important;
}
.main-menu-card h1{
  font-size:38px;
  color:#f1dfb4;
  text-shadow:0 2px 0 rgba(0,0,0,.65),0 0 18px rgba(208,171,104,.15);
}
.menu-actions button{font-size:15px}

.campaign-pill{
  border-radius:999px!important;
  background:
    linear-gradient(180deg,#3d2b1e,#271b14)!important;
}
.campaign-top,.campaign-actions{gap:10px}
.world-board{
  background:
    radial-gradient(circle at 18% 82%, rgba(128,95,58,.24), transparent 24%),
    radial-gradient(circle at 74% 34%, rgba(155,111,63,.16), transparent 26%),
    linear-gradient(180deg,#2a1f16,#1a130f 70%)!important;
}
.world-board::before{
  opacity:.12!important;
  background-image:
    linear-gradient(rgba(245,225,192,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,225,192,.05) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,245,223,.06), transparent 60%)!important;
  background-size:46px 46px,46px 46px,100% 100%!important;
}
.map-lines line{stroke:rgba(224,187,123,.20)!important}
.map-lines line.available{stroke:rgba(236,203,139,.55)!important}
.world-node{
  border:2px solid #a17b4f!important;
  background:
    radial-gradient(circle at 35% 28%, #745840 0%, #412e21 62%, #24180f 100%)!important;
  color:#f2e2bd!important;
  box-shadow:0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,238,201,.08)!important;
}
.world-node.raid{border-color:#9d6252!important}
.world-node.merchant{
  border-color:#be9356!important;
  background:radial-gradient(circle at 35% 28%, #88643a 0%, #50381f 62%, #2c1b0d 100%)!important;
}
.world-node.current{
  border-color:#d4b075!important;
  box-shadow:0 0 0 6px rgba(208,171,104,.12),0 10px 26px rgba(0,0,0,.42)!important;
}
.world-node.available:hover{transform:translate(-50%,-50%) scale(1.06)}
.node-drawer h3,.campaign-title h2{color:#f0ddbb}
.node-meta span{
  border-color:#896947!important;
  background:rgba(68,49,33,.55);
  border-radius:999px;
  color:#dbc29c;
}

.felt{
  background:
    radial-gradient(circle at 50% 50%, rgba(52,121,82,.24), transparent 58%),
    linear-gradient(145deg,#204f3b,#122c21)!important;
  border:12px solid #2b1b11;
  box-shadow:
    0 18px 40px rgba(0,0,0,.42),
    inset 0 0 0 2px rgba(121,88,54,.85),
    inset 0 0 0 6px rgba(20,12,8,.65)!important;
  border-radius:22px!important;
}
.felt::after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(222,193,136,.18);
  border-radius:14px;
  pointer-events:none;
  z-index:1;
}
.slot{
  background:rgba(40,22,12,.18)!important;
  border:1.5px dashed rgba(227,204,160,.28)!important;
  color:rgba(238,220,188,.56)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.stock-count{
  background:#e8d3ab!important;
  color:#332116!important;
  border:1px solid #8c6944;
  box-shadow:0 3px 8px rgba(0,0,0,.35)!important;
}
.card{
  border-color:rgba(229,205,164,.20)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.42)!important;
}
.card.selected{outline-color:#d5b06a!important}
.drop-target{outline-color:#d5b06a!important}
.card.rift-pick{outline-color:#d5b06a!important}
.evac-track,.threat-track{
  background:#241a13!important;
  border:1px solid rgba(139,105,66,.55);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5);
}
.evac-track.ready{
  background:#203019!important;
  border-color:#7aa05f!important;
}
.threat-fill{
  background:linear-gradient(90deg,#85735a,#d39b54 55%,#a84e46)!important;
}
.evac-fill{
  background:linear-gradient(90deg,#546a7a,#6aa3aa 58%,#8fd6d1)!important;
}
.evac-track.ready .evac-fill{
  background:linear-gradient(90deg,#50743d,#6ab05c 58%,#9fe18a)!important;
}
.threat-num,.battle-note,.extract-counter{font-family:"Silkscreen","VT323",monospace}

.stats .stat,.raid-stat-groups .stat{
  background:
    linear-gradient(180deg,#34251a,#221812)!important;
  border:1px solid #7a5d3d;
  border-radius:12px;
}
.stat b{
  font-family:"Silkscreen","VT323",monospace;
  color:#f0e0bd;
  text-shadow:0 1px 0 rgba(0,0,0,.65);
}
.panel-head,.ability-title{
  margin-bottom:10px!important;
  padding-bottom:8px;
  border-bottom:1px solid rgba(211,177,116,.18);
}
.panel-head span,.ability-title span{font-size:13px!important}
.power-card{
  background:
    linear-gradient(180deg,#37281c,#241a14)!important;
  border-color:#7b5d3d!important;
}
.power-card.active{
  outline:2px solid #d2ad6d!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 16px rgba(210,173,109,.18)!important;
}
.power-card .pi{
  font-size:24px!important;
  color:#f0d7a2;
  text-shadow:0 0 10px rgba(240,215,162,.16);
}
.power-card small{font-size:11px!important;line-height:1.25}
.count{
  border-color:#8d6b47!important;
  background:#2c2118;
  color:#e2cfa8!important;
}

.squad-slot,.roster-char{
  background:
    linear-gradient(180deg,#2f2218,#1e1611)!important;
}
.squad-slot strong,.char-info h4{
  color:#f2e2bc;
}
.squad-slot{
  box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,237,201,.04)!important;
}
.char-avatar,.prep-squad-mini .mini-avatar,.shop-char-avatar,.reward.character-reward .ri{
  border-color:#8c6a45!important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,239,209,.07), transparent 28%),
    linear-gradient(160deg,#312319,#18120e)!important;
  box-shadow:inset 0 0 0 1px rgba(255,239,209,.05);
}
.constellation-line,
.squad-constellation{
  background:
    linear-gradient(180deg,#2d2219,#1d1611)!important;
  border-color:rgba(162,126,78,.34)!important;
  color:#d8c4a0!important;
}
.constellation-line.unlocked,
.constellation-line.base,
.squad-constellation.active{
  color:#ddf2d4!important;
  border-color:rgba(100,161,90,.52)!important;
  background:
    linear-gradient(180deg, rgba(44,75,39,.95), rgba(27,43,25,.98))!important;
  box-shadow:0 0 0 1px rgba(193,237,183,.06) inset, 0 0 16px rgba(82,156,87,.12);
}
.constellation-line .constellation-badge,
.squad-constellation-label,
.char-c{
  color:#f3cb86!important;
}
.squad-tooltip{
  backdrop-filter:blur(4px);
  border-color:#8a6943!important;
  width:min(500px,calc(100vw - 24px))!important;
}
.squad-tooltip-title{
  font-family:"Silkscreen","VT323",monospace;
  color:#f1debb;
  font-size:12px;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(211,177,116,.18);
}

.dev-mail-btn::after{
  border-color:#23160f!important;
  box-shadow:0 0 0 3px rgba(227,59,59,.12),0 0 10px rgba(227,59,59,.45)!important;
}
.dev-mail-card .mail-icon{color:#f0d29a}
.dev-mail-reward{
  border-color:#8d6a46!important;
  background:linear-gradient(180deg,#322418,#1d150f)!important;
}
.result-overlay,.dev-mail-overlay{
  backdrop-filter:blur(4px);
  background:rgba(5,3,2,.72)!important;
}
.reward{
  min-height:156px;
  background:
    linear-gradient(180deg,#34261a,#231811)!important;
}
.reward.r{border-color:#8a7557!important}
.reward.sr{border-color:#9f78cb!important}
.reward.ssr{border-color:#cba357!important;box-shadow:0 0 24px rgba(246,212,138,.14), inset 0 0 0 1px rgba(255,242,207,.05)!important}
.reward strong{
  font-family:"Silkscreen","VT323",monospace;
  font-size:12px;
  color:#f4e1b8;
}
.reward .rr{
  color:#e8cf9d!important;
  font-family:"Silkscreen","VT323",monospace;
}
.help{display:none!important}

@media (max-width:980px){
  .world-layout{grid-template-columns:1fr!important}
  .campaign-pill,.btn,.music-toggle{font-size:13px}
  .panel-head span,.ability-title span{font-size:12px!important}
}
@media (max-width:700px){
  body{letter-spacing:.01em}
  .btn,.music-toggle,.pull-btn{font-size:12px}
  .main-menu-card h1{font-size:30px}
}


/* ===== Gothic fantasy / CCG overhaul v2 ===== */
:root{
  --bg:#0d0908;
  --panel:#1a110d;
  --panel2:#241711;
  --text:#f1dfbe;
  --muted:#c1a37b;
  --border:#8d6540;
  --accent:#d5b075;
  --gem:#8dd8ff;
  --warn:#e0a252;
  --danger:#bd5a54;
}

html,body{
  font-family:"Pixelify Sans","Trebuchet MS",sans-serif !important;
  font-size:17px;
  color:var(--text) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(124,66,36,.28), transparent 26%),
    radial-gradient(circle at 20% 10%, rgba(74,39,19,.24), transparent 20%),
    linear-gradient(180deg,#120c09 0%, #070505 100%) !important;
}
body{
  letter-spacing:.02em;
}
body::before,
.campaign-shell::before{
  background:
    radial-gradient(circle at 0 0, rgba(255,222,168,.06), transparent 18%),
    radial-gradient(circle at 100% 0, rgba(255,222,168,.06), transparent 18%),
    radial-gradient(circle at 0 100%, rgba(255,222,168,.04), transparent 18%),
    radial-gradient(circle at 100% 100%, rgba(255,222,168,.04), transparent 18%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, rgba(0,0,0,0) 2px 10px) !important;
  opacity:.9;
}
body, button, input, select, textarea, .btn, .banner-btn, .pull-btn, .music-toggle,
.campaign-pill, .panel-head strong, .ability-title strong, .campaign-title, .drawer-kicker,
.world-node, .dev-mail-btn, .stat b, .char-info h4, .squad-slot strong{
  font-family:"Pixelify Sans","Trebuchet MS",sans-serif !important;
}
h1,h2,h3,h4,.campaign-title h2,.main-menu-card h1{
  font-family:"Yeseva One","Pixelify Sans",serif !important;
  letter-spacing:.02em !important;
  color:#f8e5c1 !important;
}
.main-menu-card h1{
  font-size:42px !important;
  text-shadow:0 2px 0 rgba(0,0,0,.65),0 0 18px rgba(208,171,104,.2) !important;
}
h2{font-size:32px !important}
h3{font-size:24px !important}
h4{font-size:20px !important}

.panel,.ability-panel,.prep-panel,.merchant-panel,.prep-side,.node-drawer,.main-menu-card,.world-board,
.result-box,.save-summary,.dev-mail-card,.music-controls,.roster-char,.squad-slot,.reward,.stat,.artifact,
.power-card,.campaign-pill,.prep-squad-mini,.prep-squad-mini .mini-avatar,.shop-char-avatar,
.reward.character-reward .ri,.battle-action-group .extract-counter,.squad-tooltip,.campaign-top,.toolbar,
.campaign-view .campaign-actions{
  position:relative;
  overflow:visible;
}

.panel,.ability-panel,.prep-panel,.merchant-panel,.prep-side,.node-drawer,.main-menu-card,.world-board,
.result-box,.save-summary,.dev-mail-card,.music-controls,.roster-char,.squad-slot,.reward,.stat,.artifact,
.power-card{
  background:
    linear-gradient(180deg, rgba(58,34,20,.98), rgba(38,23,15,.985) 58%, rgba(27,16,11,.99)),
    radial-gradient(circle at 50% 0, rgba(255,234,201,.06), transparent 50%) !important;
  border:1px solid #8c6540 !important;
  box-shadow:
    0 16px 30px rgba(0,0,0,.36),
    inset 0 0 0 1px rgba(255,236,199,.05),
    inset 0 1px 0 rgba(255,247,225,.05) !important;
}
.panel::before,.ability-panel::before,.prep-panel::before,.merchant-panel::before,.prep-side::before,
.node-drawer::before,.main-menu-card::before,.world-board::before,.result-box::before,.save-summary::before,
.dev-mail-card::before,.music-controls::before,.roster-char::before,.squad-slot::before,.reward::before,
.stat::before,.artifact::before,.power-card::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(213,176,117,.18);
  border-radius:inherit;
  pointer-events:none;
}
.panel::after,.ability-panel::after,.prep-panel::after,.merchant-panel::after,.prep-side::after,.node-drawer::after,
.main-menu-card::after,.world-board::after{
  content:"✦";
  position:absolute;
  top:8px;
  right:10px;
  color:rgba(222,190,136,.26);
  font-size:12px;
  pointer-events:none;
}
.main-menu-card,.world-board,.node-drawer,.result-box,.dev-mail-card{border-radius:22px !important}
.panel,.ability-panel,.prep-panel,.merchant-panel,.prep-side,.roster-char,.squad-slot,.reward,.stat,.artifact,.power-card{border-radius:16px !important}

.campaign-shell{
  background:
    radial-gradient(circle at 50% -4%, rgba(109,51,36,.38), transparent 28%),
    linear-gradient(180deg,#120d0a 0%,#050404 100%) !important;
}
.world-board{
  background:
    radial-gradient(circle at 20% 78%, rgba(131,88,49,.26), transparent 20%),
    radial-gradient(circle at 74% 26%, rgba(135,81,47,.18), transparent 24%),
    linear-gradient(180deg,#2d1f16,#19110d 72%) !important;
}
.world-board::before{
  background:
    linear-gradient(rgba(248,226,190,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(248,226,190,.05) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,241,214,.06), transparent 60%) !important;
  background-size:46px 46px,46px 46px,100% 100% !important;
}
.world-node{
  border:2px solid #a57b50 !important;
  background:
    radial-gradient(circle at 35% 28%, #7e5d40 0%, #463122 62%, #26180e 100%) !important;
  color:#f1dfbd !important;
  box-shadow:0 12px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,237,205,.08) !important;
}
.world-node.current{box-shadow:0 0 0 7px rgba(213,176,117,.14),0 12px 26px rgba(0,0,0,.42) !important}
.node-meta span,.campaign-pill{
  background:linear-gradient(180deg,#422b1d,#2a1c13) !important;
  color:#e2ca9f !important;
  border-color:#8f6944 !important;
}
.campaign-pill{
  border-radius:999px !important;
  padding:8px 16px !important;
  box-shadow:0 7px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,241,210,.07) !important;
}
.campaign-pill b,#map-gems,#map-depth,.dev-mail-reward b,.gem-value{color:var(--gem) !important}

.felt{
  background:
    radial-gradient(circle at 50% 48%, rgba(68,139,95,.16), transparent 56%),
    linear-gradient(145deg,#194534,#0f251d) !important;
  border:14px solid #2a190f !important;
  box-shadow:
    0 20px 44px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(124,87,50,.92),
    inset 0 0 0 8px rgba(22,11,8,.72) !important;
  border-radius:24px !important;
}
.felt::after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(225,195,139,.18);
  border-radius:16px;
  pointer-events:none;
}
.slot{
  background:rgba(48,30,18,.14) !important;
  border:1.6px dashed rgba(227,204,160,.3) !important;
  color:rgba(238,220,188,.58) !important;
}
.card{
  border-color:rgba(236,210,164,.28) !important;
  box-shadow:0 7px 18px rgba(0,0,0,.44) !important;
}
.stock-count{
  background:#ead5af !important;
  color:#342214 !important;
  border:1px solid #8a6540 !important;
}

.toolbar{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  margin-bottom:14px !important;
}
.toolbar > *{position:relative; z-index:5}
.btn,.music-toggle,.pull-btn,.banner-btn,.dev-mail-btn,#game .toolbar .dev-mail-btn,.campaign-mail-btn{
  border:1px solid #986f46 !important;
  background:linear-gradient(180deg,#4d3220 0%,#321f14 56%,#21150f 100%) !important;
  color:#f7e8c7 !important;
  border-radius:12px !important;
  box-shadow:0 8px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,243,214,.08), inset 0 -1px 0 rgba(0,0,0,.4) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.72);
  min-height:44px !important;
  font-size:16px !important;
  line-height:1.15 !important;
}
.btn:hover:not(:disabled),.music-toggle:hover,.pull-btn:hover:not(:disabled),.banner-btn:hover:not(:disabled),.dev-mail-btn:hover{
  border-color:#d6b078 !important;
  transform:translateY(-1px);
}
.banner-btn,.battle-banner-btn,.pull-btn{
  background:linear-gradient(180deg,#8a2a2d,#60181b 60%,#3a0e12) !important;
  border-color:#c27675 !important;
  box-shadow:0 10px 22px rgba(129,23,36,.34), inset 0 1px 0 rgba(255,224,224,.09) !important;
}
.btn.extract,.battle-major-btn{
  background:linear-gradient(180deg,#3e4720,#293116 58%,#191e10) !important;
  border-color:#7d8c53 !important;
}
.btn.extract.ready,.battle-major-btn.ready{
  background:linear-gradient(180deg,#496533,#315024 56%,#20331a) !important;
  border-color:#8ec37d !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 12px 28px rgba(81,170,95,.24), inset 0 1px 0 rgba(232,255,229,.08) !important;
}
.music-controls{
  padding:7px 12px !important;
  gap:10px !important;
  z-index:6 !important;
}
.music-volume,input[type="range"]{accent-color:#cea160}
.music-percent{font-size:13px !important}
#music-state{font-size:14px !important}
.dev-mail-btn::after{
  border-color:#23160f !important;
  box-shadow:0 0 0 3px rgba(227,59,59,.12),0 0 12px rgba(227,59,59,.45) !important;
}
#prep-banner,#open-banner,.pull-btn,.campaign-actions,.campaign-top,.toolbar{pointer-events:auto !important}
#prep-banner{z-index:12 !important}

.dashboard{
  display:grid !important;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr) !important;
  gap:14px !important;
  align-items:start !important;
}
#game .dashboard{align-content:start !important}
#game .panel,#game .ability-panel{height:auto !important}
.raid-overview{
  grid-template-columns:minmax(0,1fr) 200px !important;
  gap:14px !important;
}
.raid-stat-groups{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:12px !important;
}
.stats .stat,.raid-stat-groups .stat{
  min-height:82px !important;
  padding:10px 12px !important;
}
.stat b{
  font-size:28px !important;
  color:#f1e0be !important;
}
.stat small,.panel-head span,.ability-title span,.campaign-title small,.battle-note,.prep-desc,.char-info .subtitle,.char-info .base-passive,.node-drawer p{
  font-size:15px !important;
  line-height:1.35 !important;
}
.panel-head{margin-bottom:10px !important; padding-bottom:8px; border-bottom:1px solid rgba(211,177,116,.18)}
.panel-head strong,.ability-title strong{
  font-size:22px !important;
  color:#f5e3bf !important;
}
.threat-track,.evac-track{
  height:12px !important;
  background:#241a13 !important;
  border:1px solid rgba(140,106,69,.5) !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5) !important;
}
.threat-fill{background:linear-gradient(90deg,#8d7758,#d59f59 55%,#b24e49) !important}
.evac-fill{background:linear-gradient(90deg,#4d6958,#66a388 58%,#7ed8b5) !important}
.evac-track.ready{background:#203019 !important; border-color:#7fa45f !important}
.evac-track.ready .evac-fill{background:linear-gradient(90deg,#4d733f,#67b45e 58%,#9de28c) !important}
.threat-num{font-size:16px !important; min-width:74px !important; font-weight:700 !important}
.battle-note,.extract-counter{font-size:13px !important}

#squad{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:start !important;
}
#squad .squad-slot{
  padding:8px !important;
  min-height:0 !important;
  height:auto !important;
  align-self:start !important;
  background:
    linear-gradient(180deg,#362318,#24160f) !important;
}
#squad .squad-slot strong{
  margin-top:8px !important;
  font-size:14px !important;
  white-space:normal !important;
  line-height:1.2 !important;
}
#squad .squad-slot small{font-size:12px !important; line-height:1.25 !important}
#squad .char-stars{font-size:14px !important}
.char-avatar{
  aspect-ratio:5/7 !important;
  border-radius:12px !important;
}
#squad .char-avatar{width:100% !important}
#squad .panel,#game .panel{overflow:visible !important}
.squad-slot .squad-tooltip{display:none !important}

.global-squad-tooltip{
  position:fixed;
  left:0;
  top:0;
  width:min(520px,calc(100vw - 24px));
  max-height:min(80vh,720px);
  overflow:auto;
  background:
    linear-gradient(180deg, rgba(39,24,16,.995), rgba(26,16,11,.998));
  border:1px solid #94704a;
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(255,234,201,.04) inset;
  padding:14px;
  z-index:999999;
  pointer-events:none;
  opacity:0;
  transform:scale(.98);
  transition:opacity .12s ease, transform .12s ease;
}
.global-squad-tooltip.show{
  opacity:1;
  transform:scale(1);
}
.global-squad-tooltip.hidden{display:none}
.global-squad-tooltip::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(213,176,117,.18);
  border-radius:inherit;
  pointer-events:none;
}
.global-squad-tooltip .squad-tooltip-title{
  font-size:15px !important;
  margin-bottom:8px !important;
  padding-bottom:8px;
  border-bottom:1px solid rgba(211,177,116,.16);
}
.global-squad-tooltip .squad-tooltip-list{
  display:grid;
  gap:8px;
}
.global-squad-tooltip .squad-constellation{
  font-size:15px !important;
  line-height:1.35 !important;
  padding:10px 12px !important;
  border-radius:12px;
  background:linear-gradient(180deg,#2e2017,#1d1510) !important;
  border:1px solid rgba(162,126,78,.34) !important;
  color:#dac4a0 !important;
}
.global-squad-tooltip .squad-constellation.active{
  color:#e4f6da !important;
  border-color:rgba(109,171,99,.52) !important;
  background:linear-gradient(180deg, rgba(45,74,39,.98), rgba(27,43,24,.99)) !important;
}
.global-squad-tooltip .squad-constellation-label{color:#f0c883 !important}

.character-roster{
  grid-template-columns:1fr !important;
  gap:20px !important;
  margin-top:18px !important;
}
.roster-char{
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) !important;
  gap:20px !important;
  padding:18px !important;
  border-radius:18px !important;
  text-align:left !important;
}
.roster-char .char-avatar{
  width:220px !important;
  border-radius:18px !important;
}
.char-info h4{
  margin:0 0 6px !important;
  font-size:28px !important;
}
.char-info .subtitle{font-size:18px !important}
.char-info .base-passive{font-size:17px !important; line-height:1.45 !important; margin:10px 0 !important}
.constellation-list{gap:10px !important; margin-top:12px !important}
.constellation-line,
.squad-constellation{
  font-size:16px !important;
  line-height:1.4 !important;
  padding:11px 13px !important;
  border-radius:12px !important;
  color:#d8c4a0 !important;
  background:linear-gradient(180deg,#2e2118,#1f1611) !important;
  border:1px solid rgba(162,126,78,.34) !important;
}
.constellation-line.unlocked,
.constellation-line.base,
.squad-constellation.active{
  color:#e1f3d7 !important;
  border-color:rgba(99,161,90,.54) !important;
  background:linear-gradient(180deg, rgba(45,74,39,.97), rgba(27,43,24,.99)) !important;
}
.constellation-line.next{color:#d8c4a0 !important}
.constellation-line .constellation-badge,.squad-constellation-label,.char-c{color:#f0c883 !important}
.prep-squad-slots{gap:8px !important}
.prep-squad-mini{
  padding:7px !important;
  font-size:11px !important;
}
.prep-squad-mini .mini-avatar{
  aspect-ratio:5/7 !important;
  margin-bottom:6px !important;
}

.power-card{
  background:linear-gradient(180deg,#37261b,#241913) !important;
  border-color:#7f5d3c !important;
  padding:12px !important;
}
.power-card .pi{
  font-size:28px !important;
  color:#f0d7a2 !important;
}
.power-card strong{font-size:16px !important}
.power-card small{font-size:14px !important; line-height:1.3 !important}
.count{
  border-color:#8f6b47 !important;
  background:#2c2118 !important;
  color:#e6d0a8 !important;
  font-size:14px !important;
}

.reward{
  min-height:168px !important;
}
.reward strong,.reward .rr{
  font-size:14px !important;
}
.dev-mail-card h3{font-size:28px !important}
.dev-mail-card p,.dev-mail-reward{font-size:17px !important; line-height:1.45 !important}

.help{display:none !important}

@media (max-width:1180px){
  .dashboard{grid-template-columns:1fr !important}
  .raid-overview{grid-template-columns:1fr !important}
  #squad{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .character-roster{grid-template-columns:1fr !important}
  .roster-char{grid-template-columns:180px minmax(0,1fr) !important}
  .roster-char .char-avatar{width:180px !important}
}
@media (max-width:780px){
  html,body{font-size:15px !important}
  #squad{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .roster-char{grid-template-columns:1fr !important}
  .roster-char .char-avatar{width:min(260px,100%) !important}
  .btn,.music-toggle,.banner-btn,.pull-btn{font-size:14px !important}
  .stat b{font-size:22px !important}
}



/* ===== Gothic UI hotfix ===== */
#campaign-shell .campaign-view,
#campaign-shell .campaign-inner,
#campaign-shell .campaign-top,
#campaign-shell .campaign-actions,
#campaign-shell .menu-actions,
#campaign-shell .main-menu-card,
#campaign-shell .prep-layout,
#campaign-shell .prep-panel,
#campaign-shell .prep-side{
  position:relative;
}
#campaign-shell .campaign-top,
#campaign-shell .campaign-actions,
#campaign-shell .menu-actions,
#prep-banner,
#prep-back,
#dev-mail-btn-campaign,
#map-menu,
#merchant-back,
#menu-reset{
  z-index:50 !important;
  pointer-events:auto !important;
}
#campaign-shell .campaign-top{isolation:isolate}
#campaign-shell .campaign-actions{align-items:center}
#campaign-shell .campaign-actions > *,
#campaign-shell .menu-actions > *{position:relative;z-index:51}
#dev-mail-btn-campaign.campaign-mail-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  position:relative !important;
  transform:none !important;
}
#prep-view .campaign-actions,
#map-view .campaign-actions,
#merchant-view .campaign-actions,
#menu-view .menu-actions{
  overflow:visible !important;
}

/* battle right column layout repair */
@media (min-width:1360px){
  #game{
    grid-template-columns:minmax(780px,1.38fr) minmax(470px,.92fr) !important;
    gap:14px 16px !important;
  }
}
#game > .dashboard,
#game > .ability-grid,
#game .panel,
#game .ability-panel{
  overflow:visible !important;
  height:auto !important;
  min-height:0 !important;
}
#game .dashboard{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  align-content:start !important;
}
#game .raid-panel,
#game .panel{
  padding:14px !important;
}
.raid-overview{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 180px !important;
  gap:14px !important;
  align-items:start !important;
}
.raid-main{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
.raid-stat-groups{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:10px !important;
  margin-bottom:0 !important;
}
.stats-left,.stats-right{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  min-width:0 !important;
}
.stats-left .stat,.stats-right .stat{
  min-width:0 !important;
  min-height:86px !important;
}
.raid-side{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:8px !important;
  min-width:0 !important;
}
.battle-banner-btn,.battle-major-btn{
  width:100% !important;
  min-height:56px !important;
  font-size:16px !important;
  white-space:nowrap !important;
}
.battle-note{
  font-size:13px !important;
  line-height:1.25 !important;
  margin:0 !important;
  min-height:16px !important;
}
.panel-head{
  align-items:flex-start !important;
}
.panel-head span{
  max-width:100% !important;
}
#squad.squad-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:start !important;
}
#squad .squad-slot{
  align-self:start !important;
  min-height:0 !important;
  height:auto !important;
}
#squad .squad-slot strong{font-size:15px !important}
#squad .squad-slot small{font-size:13px !important;line-height:1.25 !important}
#squad .char-avatar{width:100% !important; aspect-ratio:5/7 !important}
.ability-grid{margin-top:0 !important}
.ability-panel .empty-note,
.ability-panel .mode-note,
.ability-panel,
.ability-title span{font-size:15px !important}
@media (max-width:1180px){
  .raid-overview{grid-template-columns:1fr !important}
  #squad.squad-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}



/* ===== Typography rework: readable serif fantasy UI ===== */
html,body{
  font-family:"Merriweather","Georgia",serif !important;
  font-size:17px !important;
  line-height:1.45 !important;
  letter-spacing:0 !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body, button, input, select, textarea,
.btn,.music-toggle,.pull-btn,.banner-btn,.battle-banner-btn,.battle-major-btn,
.campaign-pill,.panel-head strong,.ability-title strong,.drawer-kicker,.world-node,
.dev-mail-btn,.stat b,.char-info h4,.squad-slot strong,.campaign-title small,
.panel-head span,.ability-title span,.battle-note,.subtitle,.menu-sub,.empty-note,
.reward strong,.reward .rr,.count,.music-percent,#music-state,.power-card strong,.power-card small{
  font-family:"Merriweather","Georgia",serif !important;
}

h1,h2,h3,h4,
.main-menu-card h1,
.campaign-title h2,
.banner-hero h2,
.result-box h2,
.dev-mail-card h3,
.node-drawer h3{
  font-family:"Yeseva One","Merriweather","Georgia",serif !important;
  letter-spacing:0 !important;
}

/* body copy bigger and more readable */
p, li, small, .menu-sub, .save-summary, .panel-head span, .ability-title span,
.char-info .subtitle, .char-info .base-passive, .node-drawer p, .reward small,
.artifact small, .stat small, .squad-slot small, .empty-note, .drawer-empty,
.music-percent, .battle-note, .extract-counter, .subtitle, .prep-desc, .dev-mail-status,
.dev-mail-card p, .dev-mail-reward, .banner-hero p, #banner-message {
  font-size:15px !important;
  line-height:1.48 !important;
  font-weight:400 !important;
}

/* headings / labels */
.panel-head strong,
.ability-title strong,
.toolbar strong,
.banner-top strong,
.char-info h4,
.squad-slot strong,
.reward strong,
.power-card strong,
.node-meta span,
.campaign-pill,
.world-node .nl,
.btn,.music-toggle,.pull-btn,.banner-btn,.battle-banner-btn,.battle-major-btn{
  font-weight:700 !important;
}

/* title and major section sizes */
.main-menu-card h1{font-size:58px !important;line-height:1.02 !important;margin-bottom:10px !important}
.campaign-title h2{font-size:32px !important}
.panel-head strong,.ability-title strong{font-size:23px !important}
.char-info h4{font-size:26px !important;line-height:1.15 !important}
#squad .squad-slot strong{font-size:16px !important;line-height:1.18 !important}
.stat b{font-size:29px !important;font-weight:900 !important}
.reward strong,.reward .rr{font-size:15px !important}
.power-card strong{font-size:17px !important}
.power-card small{font-size:14px !important;line-height:1.35 !important}

/* buttons more readable */
.btn,.music-toggle,.pull-btn,.banner-btn,.battle-banner-btn,.battle-major-btn{
  font-size:17px !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
}
.menu-actions button{font-size:18px !important}
.battle-banner-btn,.battle-major-btn{font-size:17px !important}

/* battle side texts */
#squad .squad-slot small{font-size:13px !important;line-height:1.3 !important}
.ability-panel .empty-note,.ability-panel .mode-note,.ability-title span{font-size:15px !important}

/* prep screen readability */
.roster-char{padding:18px !important}
.char-info .subtitle{font-size:18px !important;font-weight:700 !important}
.constellation-line,
.squad-constellation,
.global-squad-tooltip .squad-constellation{
  font-family:"Merriweather","Georgia",serif !important;
  font-size:15px !important;
  line-height:1.42 !important;
}
.global-squad-tooltip .squad-tooltip-title{font-family:"Yeseva One","Merriweather",serif !important;font-size:18px !important}
.global-squad-tooltip{font-family:"Merriweather","Georgia",serif !important}

/* smaller utility text still readable */
.world-node .nl{font-size:10px !important}
.music-percent{min-width:38px !important}
#music-state{font-size:14px !important}
.stock-count{font-family:"Merriweather","Georgia",serif !important;font-weight:700 !important}

@media (max-width:780px){
  html,body{font-size:16px !important}
  .main-menu-card h1{font-size:46px !important}
  .btn,.music-toggle,.pull-btn,.banner-btn,.battle-banner-btn,.battle-major-btn{font-size:15px !important}
  .panel-head strong,.ability-title strong{font-size:20px !important}
}



/* ===== Global overlay stacking fix ===== */
#banner-overlay,
#dev-mail-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  pointer-events:auto !important;
  isolation:isolate;
}
#banner-overlay .banner-modal,
#dev-mail-overlay .dev-mail-card,
#banner-overlay button,
#dev-mail-overlay button{
  pointer-events:auto !important;
  position:relative;
  z-index:2;
}
#campaign-shell{
  z-index:850 !important;
}
#prep-banner,
#dev-mail-btn-campaign,
#map-menu,
#merchant-back,
#prep-back,
#menu-reset{
  pointer-events:auto !important;
  position:relative !important;
  z-index:100 !important;
}
#prep-banner::before,#prep-banner::after,
#dev-mail-btn-campaign::before,#dev-mail-btn-campaign::after{
  pointer-events:none !important;
}


/* ===== Main menu road-card update ===== */
#menu-view .main-menu-card{
  width:min(680px,100%) !important;
  min-height:520px;
  padding:34px 36px !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg,rgba(19,11,7,.92) 0%,rgba(24,14,9,.82) 52%,rgba(20,12,8,.64) 100%),
    linear-gradient(180deg,rgba(18,10,7,.30) 0%,rgba(18,10,7,.66) 72%,rgba(13,8,6,.88) 100%),
    url("assets/menu-road.webp") center/cover no-repeat !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,.54),
    inset 0 0 0 1px rgba(255,236,199,.06) !important;
}
#menu-view .main-menu-card > *{
  position:relative;
  z-index:2;
}
#menu-view .menu-sub{
  max-width:610px;
}
#menu-view .save-summary{
  background:rgba(20,12,8,.78) !important;
  backdrop-filter:blur(2px);
}
#menu-view .menu-actions .btn{
  backdrop-filter:blur(2px);
}
@media(max-width:780px){
  #menu-view .main-menu-card{
    width:min(620px,100%) !important;
    min-height:0;
    padding:28px 24px !important;
  }
}