*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#151515;--bg2:#1c1c1c;--bg3:#242424;--bg4:#2c2c2c;
  --border:#2e2e2e;--border2:#3a3a3a;
  --text:#c0c0c0;--text2:#888;--text3:#555;--text4:#3a3a3a;
  --white:#f0f0f0;--red:#c0392b;--red2:#e74c3c;--green:#27ae60;
  --blue:#2980b9;--purple:#8e44ad;--purple2:#9b59b6;
  --yellow:#e67e22;--cyan:#1abc9c;--orange:#d35400;
  --card-bg:#f5f5f0;--card-border:#ddd;
  --g-common:#888;--g-uncommon:#27ae60;--g-rare:#2980b9;--g-epic:#9b59b6;--g-legendary:#f0b429;
}
body{background:var(--bg);color:var(--text);font-family:'Courier New',monospace;font-size:16px;user-select:none;overflow:hidden;font-weight:bold;}
#zoom-wrap{display:flex;flex-direction:column;height:100vh;overflow:hidden;transform-origin:top left;}

/* ── TOPBAR ─────────────────────────────────────────── */
#topbar{height:54px;background:#0e0e0e;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 10px;flex-shrink:0;gap:0;}
#topbar .title{font-size:16px;font-weight:bold;color:var(--white);letter-spacing:2px;width:200px;flex-shrink:0;padding-left:4px;}
#nav-tabs{display:flex;border-right:1px solid var(--border);margin-right:12px;}
.nav-tab{padding:0 20px;height:54px;display:flex;align-items:center;cursor:pointer;text-transform:uppercase;letter-spacing:1px;font-size:14px;color:#ffffff;font-weight:bold;border-right:1px solid var(--border);position:relative;font-family:inherit;background:none;border-top:none;border-bottom:none;transition:color .15s;}
.nav-tab:hover{color:var(--text);}
.nav-tab.active{background:var(--white);color:#111;font-weight:bold;}
.nav-tab .dot{width:7px;height:7px;border-radius:50%;background:var(--green);position:absolute;top:8px;right:8px;}
#resources{display:flex;align-items:center;gap:2px;margin-left:auto;}
.res-block{display:flex;flex-direction:column;align-items:center;padding:0 14px;border-right:1px solid var(--border);min-width:84px;}
.res-val{font-size:18px;color:var(--white);font-weight:bold;}
.res-rate{font-size:13px;color:var(--text3);}
.res-icon{font-size:12px;color:var(--text3);margin-bottom:1px;font-weight:bold;}
#res-old + .res-icon, .res-block:has(#res-old) .res-icon{color:#aaaaaa;}
#res-bronze + .res-icon, .res-block:has(#res-bronze) .res-icon{color:#cd7f32;}
#res-silver + .res-icon, .res-block:has(#res-silver) .res-icon{color:#c0c0c0;}
#res-gold + .res-icon, .res-block:has(#res-gold) .res-icon{color:#ffd700;}
#res-plat + .res-icon, .res-block:has(#res-plat) .res-icon{color:#e5e4e2;}
.res-unknown{color:var(--text4);font-size:22px;padding:0 16px;border-right:1px solid var(--border);}
#topbar .fps{margin-left:auto;color:var(--text3);font-size:12px;padding-right:6px;}
#add-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 14px;min-width:84px;border:none;background:transparent;cursor:pointer;font-family:inherit;}
.blood-icon{color:#b03030;}
#blood-count{font-size:18px;font-weight:bold;white-space:nowrap;}

/* ── MAIN LAYOUT ────────────────────────────────────── */
#layout{display:flex;flex:1;overflow:hidden;}
#left-sidebar{display:none;}

/* ── CONTENT AREA ───────────────────────────────────── */
#content-area{flex:1;overflow-y:auto;overflow-x:hidden;background:#000;min-height:0;}
#content-area::-webkit-scrollbar{width:6px;}
#content-area::-webkit-scrollbar-track{background:#000;}
#content-area::-webkit-scrollbar-thumb{background:var(--bg4);}
.tab-pane{display:none;padding:8px;}
.tab-pane.active{display:block;height:100%;}

/* ── BOTTOM BAR ─────────────────────────────────────── */
#bottom-bar{height:300px;display:flex;gap:6px;padding:6px 8px 8px;background:#0e0e0e;border-top:1px solid var(--border);flex-shrink:0;}
.btm-panel{border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:#000;min-width:0;}
.btm-panel-hdr{font-size:14px;letter-spacing:2px;color:#fff;padding:6px 10px 4px;border-bottom:1px solid var(--border);flex-shrink:0;font-weight:bold;}
.btm-panel-body{flex:1;overflow-y:auto;overflow-x:hidden;}
.btm-panel-body::-webkit-scrollbar{width:3px;}
.btm-panel-body::-webkit-scrollbar-thumb{background:var(--bg4);}
#panel-stat{flex:1.5;}
#panel-fund{flex:1.1;}
#panel-log{flex:2;}
#right-sidebar{flex:1.2;}

/* stat grid inside bottom bar */
#specs-header{padding:4px 8px 2px;display:flex;align-items:center;justify-content:space-between;}
#specs-header .label{font-size:9px;color:var(--text2);letter-spacing:1px;}
.filter-tabs{display:flex;gap:1px;padding:2px 6px;flex-wrap:wrap;}
.filter-tab{padding:2px 6px;font-size:10px;cursor:pointer;color:#fff;border:1px solid transparent;}
.filter-tab.active{background:var(--bg4);color:#fff;border-color:var(--border);}
.sort-bar{display:flex;align-items:center;gap:4px;padding:2px 6px;border-bottom:1px solid var(--border);}
.sort-btn{padding:1px 4px;font-size:11px;cursor:pointer;color:var(--text3);background:none;border:none;font-family:inherit;}
.sort-btn.active{color:var(--white);}
.sort-label{font-size:11px;color:var(--text3);}
#stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:5px 8px;}
.card-info .stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;}
.card-info .stat-grid .stat-cell{padding:2px 3px;gap:4px;min-width:0;justify-content:flex-start;}
.card-info .stat-grid .stat-name{flex:0 0 auto;white-space:nowrap;}
.card-info .stat-grid .stat-val{flex:0 0 auto;}
.card-info .stat-grid .stat-name{font-size:12px;gap:2px;}
.card-info .stat-grid .stat-val{font-size:9px;overflow:hidden;text-overflow:ellipsis;}
.card-info .stat-grid .stat-icon{width:12px;height:12px;margin-right:1px;}
.stat-cell{background:var(--bg3);border:1px solid var(--border);padding:3px 6px;display:flex;flex-direction:row;align-items:center;gap:6px;overflow:hidden;}
.stat-name{font-size:16px;color:#ffffff;text-transform:uppercase;font-weight:bold;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.stat-val{font-size:16px;color:#ffffff;font-weight:bold;line-height:1.2;white-space:nowrap;flex-shrink:0;}
.stat-icon{width:14px;height:14px;border-radius:50%;display:inline-block;margin-right:3px;vertical-align:middle;flex-shrink:0;}
.si-hp{width:22px;height:22px;background:url('attached_assets/img/icon/hp.png') center/contain no-repeat;border-radius:0;}
.si-atk{width:22px;height:22px;background:url('attached_assets/img/icon/atk.png') center/contain no-repeat;border-radius:0;}
.si-mnd{width:22px;height:22px;background:url('attached_assets/img/icon/mnd.png') center/contain no-repeat;border-radius:0;}
.si-mxd{width:22px;height:22px;background:url('attached_assets/img/icon/mxd.png') center/contain no-repeat;border-radius:0;}
.si-spd{width:22px;height:22px;background:url('attached_assets/img/icon/spd.png') center/contain no-repeat;border-radius:0;}
.si-rgn{width:22px;height:22px;background:url('attached_assets/img/icon/rgn.png') center/contain no-repeat;border-radius:0;}
.si-ddc{width:22px;height:22px;background:url('attached_assets/img/icon/ddc.png') center/contain no-repeat;border-radius:0;}
.si-crc{width:22px;height:22px;background:url('attached_assets/img/icon/crc.png') center/contain no-repeat;border-radius:0;}
.si-crd{width:22px;height:22px;background:url('attached_assets/img/icon/crd.png') center/contain no-repeat;border-radius:0;}
.si-arm{width:22px;height:22px;background:url('attached_assets/img/icon/arm.png') center/contain no-repeat;border-radius:0;}
.si-ctr{width:22px;height:22px;background:url('attached_assets/img/icon/ctr.png') center/contain no-repeat;border-radius:0;}
.si-blk{width:22px;height:22px;background:url('attached_assets/img/icon/blk.png') center/contain no-repeat;border-radius:0;}
.si-bld{width:22px;height:22px;background:url('attached_assets/img/icon/bld.png') center/contain no-repeat;border-radius:0;}
.si-mth{width:22px;height:22px;background:url('attached_assets/img/icon/mth.png') center/contain no-repeat;border-radius:0;}
.si-acc{width:22px;height:22px;background:url('attached_assets/img/icon/acc.png') center/contain no-repeat;border-radius:0;}
#fund-section{padding:0;}
#fund-header{padding:2px 6px;display:flex;align-items:center;}
#fund-header .label{font-size:11px;color:var(--text2);letter-spacing:1px;}
#fund-values{padding:0 8px 6px;display:flex;flex-direction:column;gap:2px;}
.fund-row{display:flex;justify-content:space-between;font-size:10px;}
.fund-key{color:#fff;}
.fund-val{color:#fff;}

/* ── PROTOCOLS (bottom bar panel) ───────────────────── */
#right-sidebar{flex-direction:column;background:#000;border:1px solid var(--border);}
#protocols-header{padding:4px 8px 3px;border-bottom:1px solid var(--border);flex-shrink:0;}
.protocols-body{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;}
.protocols-body::-webkit-scrollbar{width:3px;}
.protocols-body::-webkit-scrollbar-thumb{background:var(--bg4);}
#protocols-header .title{font-size:14px;letter-spacing:2px;color:#fff;font-weight:bold;}
.protocol-section{border-bottom:1px solid var(--border);padding:8px 10px;}
.protocol-title{font-size:10px;color:#fff;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;}
.protocol-sub{display:none;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.toggle-label{font-size:10px;color:#fff;}
.toggle-switch{width:28px;height:14px;background:var(--bg4);border:1px solid var(--border);cursor:pointer;position:relative;display:flex;align-items:center;}
.toggle-switch.on{background:#1a5c2e;border-color:var(--green);}
.toggle-switch::after{content:'';width:10px;height:10px;background:var(--text3);position:absolute;left:1px;transition:left .15s;}
.toggle-switch.on::after{left:15px;background:var(--green);}
.protocol-val{font-size:8px;color:#fff;margin-top:2px;}

/* ── BATTLE ─────────────────────────────────────────── */
#battle-intro{font-size:11px;color:var(--text2);padding-bottom:12px;font-style:italic;}
#battle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.creature-card{background:var(--bg2);border:1px solid var(--border);cursor:pointer;transition:border-color .15s;}
.creature-card:hover{border-color:var(--border2);}
.creature-card .card-top{display:flex;gap:0;border-bottom:1px solid var(--border);}
.card-art{width:120px;aspect-ratio:1;height:auto;align-self:center;background:var(--card-bg);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.card-art svg{width:100px;height:100px;}
.card-art img{width:100%;height:100%;object-fit:contain;}
/* Full-size creature image lightbox */
#img-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:none;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out;}
#img-lightbox.show{display:flex;}
.lightbox-inner{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:90vw;max-height:90vh;animation:lightbox-pop .15s ease-out;}
@keyframes lightbox-pop{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
#img-lightbox img,#img-lightbox svg{max-width:80vw;max-height:80vh;object-fit:contain;border:1px solid var(--border2);box-shadow:0 0 40px rgba(0,0,0,0.8);}
.lightbox-name{color:#fff;font-size:18px;letter-spacing:2px;font-weight:bold;font-family:var(--dt-head-font,inherit);}
.card-art .placeholder-icon{color:var(--c-color);font-size:22px;opacity:0.4;}
.card-info{flex:1;padding:6px 8px;}
.card-name{font-size:16px;color:#ff0000;font-weight:bold;letter-spacing:1px;text-transform:uppercase;}
.card-tagline{font-size:10px;color:var(--text2);margin:2px 0;font-style:italic;}
.card-stats{display:flex;gap:1px;align-items:center;margin-top:2px;font-size:12px;color:var(--text2);}
.card-atk{color:#e8a44a;}
.card-def{color:#7fb3d3;}
.card-hp{color:var(--red2);}
.new-badge{position:absolute;top:4px;left:4px;background:var(--red2);color:#fff;font-size:7px;font-weight:bold;padding:1px 4px;letter-spacing:1px;}
.card-rewards{padding:6px 8px;border-bottom:1px solid var(--border);}
.rewards-header{font-size:12px;font-weight:bold;color:#fff;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:3px;}
.rewards-header > span:first-child{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:2px 0;align-content:flex-start;min-height:46px;}
.rewards-header .vic{font-size:12px;font-weight:bold;color:#fff;flex-shrink:0;white-space:nowrap;text-align:right;}
.reward-list{display:flex;flex-wrap:wrap;gap:3px;}
.reward-item{font-size:10px;color:var(--green);padding:1px 4px;}
.reward-item.res{color:var(--yellow);}
.card-btn{padding:6px;text-align:center;}
.btn-challenge{width:100%;padding:5px;background:var(--bg3);border:1px solid var(--border2);color:#ffffff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;transition:background .15s,color .15s;}
.btn-challenge:hover{background:var(--bg4);color:var(--white);}
.btn-maxed{width:100%;padding:5px;background:#1a1a1a;border:1px solid var(--border);color:var(--text3);font-family:inherit;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:default;}
.btn-current{background:#1a2e1a;border-color:var(--green);color:var(--green);}
.victories-bar{height:8px;background:var(--bg4);margin:0 8px 4px;}
.victories-fill{height:100%;background:var(--green);transition:width .3s;}

/* ── BATTLE ─────────────────────────────────────────── */
#battle-area{display:flex;gap:16px;}
#battle-main{flex:1;}
#battle-creature-display{background:var(--bg2);border:1px solid var(--border);padding:12px;margin-bottom:0;}
#battle-top{display:flex;gap:20px;align-items:stretch;}
.battle-side-box{flex:1 1 0;display:flex;flex-direction:column;gap:8px;background:var(--bg2);border:1px solid var(--border);padding:16px;}
.top-row{display:flex;flex-direction:row;gap:0;}
.player-info,.enemy-info{display:flex;flex-direction:column;justify-content:flex-start;padding:8px 16px;gap:6px;flex:1;}
#battle-art,#player-art{width:180px;height:180px;background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#battle-art svg,#player-art svg{width:150px;height:150px;}
#battle-art img{width:100%;height:100%;object-fit:contain;}
#battle-creature-name,#player-name{font-size:18px;color:var(--white);font-weight:bold;letter-spacing:2px;}
#battle-creature-tag{font-size:10px;color:var(--text2);font-style:italic;}
.hp-bar-wrap{margin-bottom:2px;background:transparent;border:none;overflow:visible;}
.hp-label{font-size:9px;color:#fff;display:flex;justify-content:space-between;margin-bottom:2px;}
.hp-bar{height:16px;background:var(--bg4);border:1px solid var(--border);overflow:hidden;}
.hp-fill{height:100%;transition:width .1s;position:relative;}
.hp-fill.player{background:linear-gradient(90deg,var(--green),#52d68a);}
.hp-fill.enemy{background:linear-gradient(90deg,var(--red),var(--red2));}
#battle-log{height:100%;overflow-y:auto;padding:6px;font-size:9px;color:var(--text2);}
#battle-log::-webkit-scrollbar{width:3px;}
#battle-log::-webkit-scrollbar-thumb{background:#3a0000;}
.log-entry{margin-bottom:2px;line-height:1.4;}
.log-dmg{color:#e8a44a;}
.log-crit{color:var(--red2);font-weight:bold;}
.log-heal{color:var(--green);}
.log-win{color:var(--purple2);font-weight:bold;}
.log-die{color:var(--red2);}
.log-info{color:var(--text3);}
.log-pdmg{color:var(--white);}
.log-reward{color:#f0b429;}
#battle-controls{display:flex;gap:8px;margin-top:10px;justify-content:center;}
#btn-flee{padding:12px 40px;font-size:14px;}
.battle-btn{padding:6px 14px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);cursor:pointer;font-family:inherit;font-size:9px;letter-spacing:1px;text-transform:uppercase;}
.battle-btn:hover:not(:disabled){background:var(--bg4);}
.battle-btn.danger:hover:not(:disabled){background:var(--red);}
.battle-btn:disabled{opacity:0.35;cursor:not-allowed;}
.battle-btn.active{background:#1a2e1a;border-color:var(--green);color:var(--green);}
.battle-btn.primary{border-color:#e74c3c;color:#e74c3c;}
.battle-btn.primary:hover:not(:disabled){background:#2a1010;}
.battle-btn.danger{border-color:var(--red);background:var(--red);color:#fff;font-weight:900;}
#battle-status{font-size:10px;color:var(--text2);margin-top:8px;padding:6px;background:var(--bg3);border:1px solid var(--border);}
#battle-timers{margin-top:10px;display:flex;flex-direction:column;gap:5px;}
.timer-row{display:flex;align-items:center;gap:6px;}
.timer-label{font-size:8px;color:#fff;letter-spacing:1px;width:90px;flex-shrink:0;white-space:nowrap;}
.timer-bar-wrap{flex:1;height:16px;background:var(--bg3);border:1px solid var(--border);overflow:hidden;}
.timer-fill{height:100%;transition:width 0.1s linear;}
.tfill-player{background:#e74c3c;}
.tfill-enemy{background:#9b59b6;}
.timer-text{font-size:8px;color:#fff;width:28px;text-align:right;flex-shrink:0;}
.timer-block{display:flex;flex-direction:column;gap:3px;}
.timer-block .timer-bar-wrap{flex:none;width:100%;height:16px;}
.timer-block .timer-text{align-self:flex-end;}
#victory-panel{background:var(--bg2);border:1px solid var(--border);padding:12px;}
#victory-panel h3{font-size:10px;color:var(--text2);letter-spacing:1px;margin-bottom:8px;}
.victory-stat{display:flex;justify-content:space-between;font-size:10px;margin-bottom:3px;}
.vic-gained{color:var(--green);}
#death-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(20,0,0,0.95);border:1px solid var(--red);padding:20px 30px;text-align:center;z-index:100;display:none;}
#death-overlay h2{color:var(--red2);font-size:16px;margin-bottom:8px;}
#death-overlay .timer{font-size:24px;color:var(--white);font-weight:bold;}

/* ── PRESTIGE ────────────────────────────────────────── */
.prestige-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:12px;}
.prestige-tab{padding:6px 16px;cursor:pointer;font-size:10px;color:var(--text2);border-bottom:2px solid transparent;text-transform:uppercase;letter-spacing:1px;}
.prestige-tab.active{color:var(--white);border-bottom-color:var(--white);}
.prestige-pane{display:none;}
.prestige-pane.active{display:block;}
/* Treasury */
#treasury-layout{display:flex;gap:16px;}
#treasury-panel{width:160px;flex-shrink:0;}
.treasury-panel-box{background:var(--bg2);border:1px solid var(--border);padding:12px;margin-bottom:8px;}
.treasury-panel-title{font-size:8px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.blood-pending{font-size:24px;color:var(--purple2);font-weight:bold;text-align:center;}
.blood-sub{font-size:8px;color:var(--text3);text-align:center;margin-top:2px;}
.blood-row{display:flex;justify-content:space-between;font-size:9px;margin-top:4px;}
.softcap-label{color:var(--text3);}
.softcap-val{color:var(--text);}
#reincarnate-btn{width:100%;padding:8px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-family:inherit;font-size:9px;letter-spacing:1px;text-transform:uppercase;cursor:not-allowed;margin-top:8px;}
#reincarnate-btn.ready{cursor:pointer;border-color:var(--purple2);color:var(--purple2);background:#1a0e2e;}
#reincarnate-btn.ready:hover{background:#25143d;}
.reincarnate-req{font-size:8px;color:var(--red2);text-align:center;margin-top:4px;}
.time-box{display:flex;justify-content:space-between;font-size:9px;color:var(--text2);}
/* Codex */
#codex-filters{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;}
.codex-filter{padding:3px 8px;font-size:9px;cursor:pointer;color:var(--text3);border:1px solid var(--border);background:none;font-family:inherit;}
.codex-filter.active{background:var(--bg3);color:var(--text);border-color:var(--border2);}
#codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;}
.codex-card{background:var(--bg2);border:1px solid var(--border);aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.codex-card.unlocked{background:var(--card-bg);}
.codex-card.unlocked svg{width:80%;height:80%;}
.codex-card.locked{flex-direction:column;gap:4px;}
.codex-locked-name{font-size:7px;color:var(--text4);text-align:center;padding:2px;}
.codex-q{font-size:20px;color:var(--text4);}
.codex-chance{font-size:7px;color:var(--text4);}

/* ── SHOP ────────────────────────────────────────────── */
#shop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.shop-card{background:var(--bg2);border:1px solid var(--border);padding:10px;}
.shop-name{font-size:14px;color:var(--white);font-weight:bold;margin-bottom:4px;}
.shop-desc{font-size:11px;color:var(--text2);font-weight:bold;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shop-effect{font-size:14px;color:var(--green);font-weight:bold;margin-bottom:6px;}
.shop-cost{font-size:14px;color:var(--yellow);font-weight:bold;margin-bottom:6px;}
.shop-own{font-size:14px;color:#ffffff;font-weight:bold;margin-bottom:6px;}
.btn-buy{width:100%;padding:5px;background:var(--bg3);border:1px solid #000;color:var(--text);cursor:pointer;font-family:inherit;font-size:14px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;-webkit-text-stroke:2px #000;paint-order:stroke fill;}
.btn-buy.affordable{background:var(--green);color:#fff;border:1px solid #000;}
.btn-buy.affordable:hover{background:#2ecc71;}
.btn-buy:hover{background:var(--bg4);}
.btn-buy:disabled{color:#fff;cursor:default;border-color:var(--border);}

/* ── SETTINGS ────────────────────────────────────────── */
#settings-layout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px;}
#settings-layout2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.settings-section{background:var(--bg2);border:1px solid var(--border);padding:12px;overflow-y:auto;max-height:calc(100vh - 160px);}
.settings-section.active-section{border-color:var(--yellow);}
.settings-title{font-size:10px;font-weight:bold;color:var(--white);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.settings-icon{font-size:12px;}
.settings-btn{width:100%;padding:6px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);cursor:pointer;font-family:inherit;font-size:9px;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;text-align:center;}
.settings-btn:hover{background:var(--bg4);}
.settings-btn.danger{border-color:var(--red);color:var(--red);}
.settings-btn.danger:hover{background:#2a0a0a;}
.settings-check-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:5px;cursor:pointer;}
.settings-check-row input[type=checkbox]{accent-color:var(--green);cursor:pointer;margin-top:1px;flex-shrink:0;}
.settings-check-label{font-size:9px;color:var(--text2);line-height:1.4;}
.settings-check-sublabel{font-size:8px;color:var(--text3);line-height:1.3;}
.settings-select{width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:4px;font-family:inherit;font-size:9px;margin-bottom:5px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.settings-row-label{font-size:9px;color:var(--text2);}
.settings-row-val{font-size:9px;color:var(--text);}
.notif-table{width:100%;font-size:8px;border-collapse:collapse;margin-top:4px;}
.notif-table th{color:var(--text3);padding:2px 4px;text-align:center;border-bottom:1px solid var(--border);}
.notif-table td{padding:3px 4px;text-align:center;border-bottom:1px solid var(--border);}
.notif-table td:first-child{text-align:left;color:var(--text2);}
.zoom-controls{display:flex;align-items:center;gap:4px;margin-bottom:6px;}
.zoom-btn{width:18px;height:18px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);cursor:pointer;font-family:inherit;font-size:11px;display:flex;align-items:center;justify-content:center;}
.zoom-val{font-size:10px;color:var(--white);min-width:36px;text-align:center;}
.nav-style{display:flex;gap:0;margin-top:4px;}
.nav-style-btn{flex:1;padding:4px;background:none;border:1px solid var(--border);color:var(--text3);cursor:pointer;font-family:inherit;font-size:8px;text-align:center;}
.nav-style-btn.active{background:var(--bg3);color:var(--white);border-color:var(--border2);}
.profile-info{font-size:9px;color:var(--text2);margin-bottom:6px;}
.profile-row{display:flex;justify-content:space-between;margin-bottom:3px;}
.slot-val{color:var(--text);font-weight:bold;}
.stat-profile-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4px;margin-top:6px;}
.stat-profile-item{font-size:8px;color:var(--text2);}
.stat-profile-item span{color:var(--text);font-weight:bold;}
.notation-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:6px;}
.notation-cell{background:var(--bg3);border:1px solid var(--border);padding:4px;}
.notation-cell-label{font-size:7px;color:var(--text3);margin-bottom:2px;text-transform:uppercase;}
.notation-cell-val{display:flex;align-items:center;gap:2px;}
.notation-input{background:var(--bg4);border:1px solid var(--border2);color:var(--text);font-family:inherit;font-size:9px;padding:2px 4px;width:100%;}
.notation-mini-btn{padding:2px 5px;background:var(--bg4);border:1px solid var(--border2);color:var(--text2);font-family:inherit;font-size:8px;cursor:pointer;white-space:nowrap;}
.notation-mini-btn:hover{color:var(--white);}
.danger-zone-header{margin-top:10px;padding:5px 8px;background:rgba(192,57,43,0.12);border:1px solid rgba(192,57,43,0.3);font-size:8px;color:var(--red2);letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:4px;margin-bottom:6px;}

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--bg4);}

/* ── MISC ────────────────────────────────────────────── */
.section-header{font-size:10px;color:var(--text2);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;border-bottom:1px solid var(--border);padding-bottom:4px;}
.notification-toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--border2);padding:8px 16px;font-size:10px;color:var(--white);z-index:200;pointer-events:none;opacity:0;transition:opacity .3s;}
.notification-toast.show{opacity:1;}

/* ── INVENTORY ───────────────────────────────────────── */
#tab-inventory{padding:12px 16px;}
.inv-wrap{
  display:inline-block;
  background:
    radial-gradient(ellipse at 20% 20%,#2a2a2a 0%,transparent 60%),
    radial-gradient(ellipse at 80% 80%,#1a1a1a 0%,transparent 60%),
    linear-gradient(145deg,#252525,#1a1a1a,#222);
  border:3px solid #3a3020;
  box-shadow:inset 0 0 30px rgba(0,0,0,.7),0 0 0 1px #111,0 4px 16px rgba(0,0,0,.8);
  padding:10px;
  border-radius:2px;
}
.inv-label{font-size:8px;letter-spacing:2px;color:#7a6a40;text-align:center;margin-bottom:8px;text-transform:uppercase;}
.inv-grid{
  display:grid;
  grid-template-columns:repeat(5,64px);
  grid-auto-rows:64px;
  gap:4px;
}
.inv-cell{
  position:relative;
  width:64px;height:64px;
  background:linear-gradient(145deg,#0e0e0e,#1a1814);
  border:1px solid #2a2420;
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.8),inset -1px -1px 3px rgba(80,60,30,.08);
  display:flex;align-items:center;justify-content:center;
  cursor:default;
  overflow:visible;
}
.inv-cell.has-item{
  border-color:#3a3020;
  background:linear-gradient(145deg,#141210,#1e1c18);
  cursor:pointer;
}
.inv-cell.has-item:hover{border-color:#7a6a30;box-shadow:inset 2px 2px 6px rgba(0,0,0,.7),0 0 6px rgba(180,140,40,.2);}
.inv-icon{font-size:28px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8));}
.inv-qty{
  position:absolute;bottom:3px;right:4px;
  font-size:8px;font-weight:bold;color:#c0a050;
  text-shadow:0 1px 2px #000;
}
.inv-tooltip{
  display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:#0e0d0b;border:1px solid #5a4a20;
  padding:6px 9px;min-width:130px;z-index:50;
  box-shadow:0 4px 12px rgba(0,0,0,.9);
  pointer-events:none;
}
.inv-cell.has-item:hover .inv-tooltip{display:block;}
.inv-tooltip-name{font-size:9px;font-weight:bold;letter-spacing:1px;color:#d4aa50;margin-bottom:3px;}
.inv-tooltip-desc{font-size:8px;color:#888;margin-bottom:3px;}
.inv-tooltip-effect{font-size:8px;color:#5a9a50;}
.inv-tooltip-qty{font-size:8px;color:#666;margin-top:2px;}
.inv-empty-msg{color:var(--text3);font-size:11px;padding:20px 0;}
/* ── M.COIN SYNTHESIZER ───────────────────────────────── */
#treasury-layout{align-items:flex-start;}
#mcoin-synthesizer{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--border);}
#mcoin-header{display:grid;grid-template-columns:175px 80px 1fr 64px 110px;column-gap:12px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);font-size:14px;letter-spacing:1px;color:var(--text3);}
.mcoin-row{display:grid;grid-template-columns:175px 80px 1fr 64px 110px;column-gap:12px;padding:10px 12px;border-bottom:1px solid var(--border);align-items:center;}
.mcoin-col-count,.mcoin-col-producing{text-align:right;}
.mcoin-row:last-child{border-bottom:none;}
.mcoin-row:hover{background:var(--bg3);}
.mcoin-col-concept,.mcoin-col-total,.mcoin-col-milestone,.mcoin-col-count,.mcoin-col-producing{padding:0 4px;}
.mcoin-concept-name{font-size:14px;font-weight:bold;color:var(--white);letter-spacing:0.5px;}
.mcoin-concept-sub{font-size:14px;color:var(--text3);margin-top:2px;}
.mcoin-total-val{font-size:14px;color:var(--text2);}
.mcoin-milestone-wrap{display:flex;flex-direction:column;gap:3px;}
.mcoin-milestone-bar-bg{height:6px;background:var(--bg3);border:1px solid var(--border);position:relative;overflow:hidden;}
.mcoin-milestone-bar-fill{height:100%;transition:width 0.4s;}
.mcoin-milestone-labels{display:flex;justify-content:space-between;font-size:14px;color:var(--text3);}
.mcoin-milestone-eta{font-size:14px;font-weight:bold;}
.mcoin-count-val{font-size:14px;font-weight:bold;color:var(--white);text-align:right;}
.mcoin-producing-val{font-size:14px;font-weight:bold;text-align:right;}
.mcoin-producing-sub{font-size:14px;color:var(--text3);text-align:right;margin-top:1px;}
.mcoin-locked{opacity:0.35;filter:blur(1.5px);}
/* ── TREASURY: force all text white EXCEPT the M.Coin names ── */
#arch-treasury *:not(.mcoin-concept-name){color:var(--white) !important;}
/* ── TREASURY: force all text to 14px ── */
#arch-treasury *{font-size:14px !important;}
/* ═══════════════════════════════════════════════════════
   EQUIPMENT SYSTEM
   ═══════════════════════════════════════════════════════ */
.equip-layout{display:grid;grid-template-columns:280px 1fr;gap:10px;height:100%;}
.equip-slots-panel{display:flex;flex-direction:column;gap:6px;}
.equip-bag-panel{display:flex;flex-direction:column;gap:6px;min-height:0;}
.equip-panel-title{font-size:9px;letter-spacing:2px;color:var(--text3);padding-bottom:4px;border-bottom:1px solid var(--border);margin-bottom:4px;}

/* ── MAIN GAME MASTERY TREE ───────────────────────────── */
#mastery-content{min-height:100%;padding-bottom:18px;}
.mg-mastery-shell{position:relative;overflow:hidden;border:1px solid #2a1d18;background:
  radial-gradient(circle at 50% 42%,rgba(155,63,42,.16),transparent 34%),
  radial-gradient(circle at 18% 12%,rgba(192,57,43,.12),transparent 28%),
  radial-gradient(circle at 84% 76%,rgba(155,89,182,.13),transparent 30%),
  linear-gradient(135deg,#0b0706,#15100d 48%,#070504);padding:14px;color:var(--text);}
.mg-mastery-shell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background:
  repeating-linear-gradient(0deg,rgba(240,180,80,.04) 0 1px,transparent 1px 8px),
  repeating-linear-gradient(90deg,rgba(240,180,80,.025) 0 1px,transparent 1px 10px);}
.mg-mastery-hero{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;padding:14px;border:1px solid rgba(192,57,43,.28);background:rgba(0,0,0,.45);box-shadow:inset 0 0 35px rgba(192,57,43,.08);}
.mg-mastery-eyebrow{font-size:10px;letter-spacing:2px;color:#c0392b;text-transform:uppercase;margin-bottom:4px;}
.mg-mastery-hero h2{font-size:24px;line-height:1;color:#f0f0f0;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.mg-mastery-hero p{font-size:12px;line-height:1.4;color:var(--text2);max-width:720px;}
.mg-mastery-summary{display:grid;grid-template-columns:repeat(3,minmax(86px,1fr));gap:8px;min-width:330px;}
.mg-mastery-summary div{border:1px solid var(--border);background:rgba(0,0,0,.52);padding:9px 10px;}
.mg-mastery-summary span{display:block;font-size:9px;letter-spacing:1px;color:var(--text3);text-transform:uppercase;margin-bottom:4px;}
.mg-mastery-summary b{display:block;font-size:18px;color:#f0b429;}
.mg-mastery-map{position:relative;z-index:1;}
.mg-mastery-core{width:260px;margin:0 auto 18px;padding:12px;border:1px solid rgba(240,180,80,.38);background:radial-gradient(circle at 50% 0,rgba(240,180,80,.12),rgba(0,0,0,.62));display:flex;align-items:center;gap:12px;text-align:left;box-shadow:0 0 30px rgba(192,57,43,.14);}
.mg-mastery-core-seal{width:42px;height:42px;flex:0 0 42px;border:2px solid #c0392b;transform:rotate(45deg);background:#120807;box-shadow:0 0 18px rgba(192,57,43,.45),inset 0 0 12px rgba(240,180,80,.12);}
.mg-mastery-core span,.mg-mastery-core em{display:block;font-size:9px;letter-spacing:1px;color:var(--text3);text-transform:uppercase;font-style:normal;}
.mg-mastery-core strong{display:block;color:#f0f0f0;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:2px 0;}
.mg-mastery-branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;}
.mg-mastery-branch{position:relative;border:1px solid var(--border);background:rgba(0,0,0,.38);padding:12px;overflow:hidden;}
.mg-mastery-branch:before{content:"";position:absolute;top:0;bottom:0;left:30px;width:1px;background:linear-gradient(180deg,transparent,var(--text3),transparent);opacity:.35;}
.mg-mastery-branch-head{position:relative;z-index:1;display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.mg-mastery-branch-kicker{font-size:9px;letter-spacing:1px;color:var(--text3);text-transform:uppercase;margin-bottom:3px;}
.mg-mastery-branch h3{font-size:17px;letter-spacing:2px;color:#f0f0f0;margin-bottom:4px;}
.mg-mastery-branch p,.mg-mastery-branch-note{font-size:11px;line-height:1.35;color:var(--text2);}
.mg-mastery-branch-count{min-width:70px;text-align:right;font-size:20px;color:#f0b429;}
.mg-mastery-branch-count span{font-size:11px;color:var(--text3);}
.mg-mastery-branch-note{position:relative;z-index:1;margin-bottom:10px;color:var(--text3);}
.mg-mastery-chain-list{position:relative;z-index:1;display:grid;gap:8px;}
.mg-mastery-node{--node-color:#888;position:relative;display:grid;grid-template-columns:42px 1fr;gap:8px;min-height:92px;}
.mg-mastery-node-line{position:absolute;left:20px;top:-8px;bottom:-8px;width:1px;background:linear-gradient(180deg,transparent,var(--node-color),transparent);opacity:.34;}
.mg-mastery-node-seal{position:relative;z-index:1;width:34px;height:34px;margin:11px 0 0 3px;border:1px solid var(--node-color);background:#111;box-shadow:0 0 14px rgba(240,180,80,.18);}
.mg-mastery-node-seal span{position:absolute;inset:9px;border:1px solid rgba(240,240,240,.38);background:rgba(0,0,0,.35);}
.mg-mastery-node-keystone .mg-mastery-node-seal{transform:rotate(45deg);border-width:2px;}
.mg-mastery-node-keystone .mg-mastery-node-seal span{transform:rotate(-45deg);border-radius:50%;}
.mg-mastery-node-major .mg-mastery-node-seal{clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);}
.mg-mastery-node-body{border:1px solid var(--node-color);background:linear-gradient(180deg,rgba(24,24,24,.88),rgba(7,7,7,.9));padding:9px;box-shadow:inset 0 0 18px rgba(0,0,0,.5);}
.mg-mastery-node-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:5px;}
.mg-mastery-node-kind{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--text3);}
.mg-mastery-node h4{font-size:13px;letter-spacing:1px;color:var(--node-color);margin-top:2px;}
.mg-mastery-node p{font-size:11px;line-height:1.35;color:var(--text2);margin-bottom:7px;}
.mg-mastery-tag{flex:0 0 auto;border:1px solid var(--node-color);color:var(--node-color);font-size:9px;padding:2px 5px;background:rgba(0,0,0,.4);}
.mg-mastery-node-meta,.mg-mastery-effect{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:10px;color:var(--text2);margin-bottom:6px;}
.mg-mastery-node-meta b,.mg-mastery-effect b{color:var(--white);}
.mg-mastery-ranks{display:flex;flex-wrap:wrap;gap:3px;margin:6px 0 8px;}
.mg-mastery-rank{width:7px;height:7px;border:1px solid #333;background:#080808;}
.mg-mastery-rank.filled{border-color:var(--node-color);background:var(--node-color);box-shadow:0 0 6px var(--node-color);}
.mg-mastery-rank.next{border-color:#f0b429;background:#1b1207;}
.mg-mastery-cost{font-size:10px;margin-bottom:6px;}
.mg-mastery-cost.can-afford{color:var(--text);}
.mg-mastery-cost.cannot-afford{color:var(--text4);}
.mg-mastery-btn{width:100%;padding:6px;background:rgba(0,0,0,.45);border:1px solid var(--node-color);color:var(--node-color);cursor:pointer;font-family:inherit;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:bold;}
.mg-mastery-btn.cannot-buy{border-color:var(--border);color:var(--text3);cursor:not-allowed;}
.mg-mastery-btn:hover{background:rgba(255,255,255,.06);}
.mg-mastery-maxed{padding:6px;text-align:center;border:1px solid var(--node-color);color:var(--node-color);font-size:10px;letter-spacing:1px;background:rgba(0,0,0,.35);}
.mg-mastery-node.maxed .mg-mastery-node-body{background:linear-gradient(180deg,rgba(30,28,18,.92),rgba(8,8,6,.92));}
.mg-mastery-combat{box-shadow:inset 0 0 40px rgba(231,76,60,.06);}
.mg-mastery-economy{box-shadow:inset 0 0 40px rgba(240,180,41,.06);}
.mg-mastery-automation{box-shadow:inset 0 0 40px rgba(26,188,156,.05);}
.mg-mastery-utility{box-shadow:inset 0 0 40px rgba(155,89,182,.06);}
@media (max-width:1200px){
  .mg-mastery-hero{display:block;}
  .mg-mastery-summary{margin-top:10px;min-width:0;}
  .mg-mastery-branches{grid-template-columns:1fr;}
}

/* Equipped slots */
.equip-slots-grid{display:flex;flex-direction:column;gap:5px;}
.equip-slot{padding:8px 10px;border:1px solid var(--border);background:var(--bg2);min-height:56px;}
.equip-slot.empty{opacity:0.45;display:flex;flex-direction:column;justify-content:center;}
.equip-slot.filled{display:flex;flex-direction:column;gap:4px;}
.equip-slot-label{font-size:8px;letter-spacing:1px;color:var(--text3);}
.equip-item-name{font-size:10px;font-weight:bold;letter-spacing:1px;}
.equip-empty-label{font-size:8px;color:var(--text4);margin-top:2px;}

/* Stat pills */
.equip-stat-pills{display:flex;flex-wrap:wrap;gap:3px;}
.equip-stat-pill{font-size:8px;padding:1px 5px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);}

/* Buttons */
.equip-btn{font-family:inherit;font-size:8px;letter-spacing:1px;padding:3px 8px;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text2);text-transform:uppercase;}
.equip-btn:hover{background:var(--bg4);color:var(--white);}
.equip-btn-unequip{margin-top:2px;align-self:flex-start;}
.equip-btn-equip{border-color:var(--green);color:var(--green);}
.equip-btn-equip:hover{background:rgba(39,174,96,0.15);}
.equip-btn-salvage{border-color:#c0392b;color:#c0392b;}
.equip-btn-salvage:hover{background:rgba(192,57,43,0.15);}

/* Bag */
.equip-bag-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:calc(100vh - 260px);}
.equip-bag-item{padding:8px 10px;border:1px solid var(--border);background:var(--bg2);}
.equip-bag-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:9px;}
.equip-bag-actions{display:flex;gap:6px;margin-top:6px;}
.equip-bag-empty{font-size:9px;color:var(--text4);padding:20px 0;text-align:center;letter-spacing:1px;}

/* ── MAIN GAME RADIAL MASTERY MANUSCRIPT ──────────────── */
.mg-radial-shell{position:relative;height:min(860px,calc(100vh - 405px));min-height:540px;border:1px solid #2a1d18;background:
  radial-gradient(circle at 50% 50%,rgba(157,54,43,.16),transparent 35%),
  radial-gradient(circle at 16% 30%,rgba(231,76,60,.10),transparent 28%),
  radial-gradient(circle at 82% 42%,rgba(240,180,41,.10),transparent 31%),
  radial-gradient(circle at 50% 86%,rgba(155,89,182,.10),transparent 25%),
  linear-gradient(135deg,#090605,#15100d 50%,#050303);overflow:hidden;color:var(--text);box-shadow:inset 0 0 90px rgba(0,0,0,.8);}
.mg-radial-shell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background:
  repeating-linear-gradient(0deg,rgba(240,180,80,.04) 0 1px,transparent 1px 8px),
  repeating-linear-gradient(90deg,rgba(240,180,80,.025) 0 1px,transparent 1px 10px);}
.mg-radial-header{position:absolute;z-index:10;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;gap:14px;pointer-events:none;text-shadow:0 2px 8px #000;}
.mg-radial-eyebrow{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#c0392b;margin-bottom:2px;}
.mg-radial-header h2{font-size:22px;line-height:1;color:#f0f0f0;letter-spacing:2px;text-transform:uppercase;}
.mg-radial-summary{display:grid;grid-template-columns:repeat(3,90px);gap:6px;}
.mg-radial-summary div{border:1px solid rgba(240,180,80,.22);background:rgba(0,0,0,.52);padding:7px 9px;}
.mg-radial-summary span{display:block;font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:3px;}
.mg-radial-summary b{display:block;font-size:15px;color:#f0b429;}
.mg-radial-canvas{position:absolute;inset:0;cursor:grab;touch-action:none;outline:none;}
.mg-radial-canvas.dragging{cursor:grabbing;}
.mg-radial-canvas:focus-visible{box-shadow:inset 0 0 0 2px rgba(240,180,80,.45);}
.mg-radial-world{position:absolute;left:0;top:0;width:2400px;height:1600px;transform-origin:0 0;will-change:transform;}
.mg-radial-svg{display:block;width:2400px;height:1600px;user-select:none;}
.mg-radial-ritual ellipse{fill:none;stroke:rgba(240,180,80,.13);stroke-width:2;}
.mg-radial-ritual line{stroke:rgba(240,180,80,.08);stroke-width:1;}
.mg-radial-connection{fill:none;stroke:rgba(180,120,70,.38);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px #000);}
.mg-radial-spine{stroke-width:4;opacity:.55;}
.mg-radial-branch-link{stroke-width:2;opacity:.32;stroke-dasharray:8 8;}
.mg-radial-cat-combat{stroke:#e74c3c;fill:#e74c3c;}
.mg-radial-cat-economy{stroke:#f0b429;fill:#f0b429;}
.mg-radial-cat-automation{stroke:#1abc9c;fill:#1abc9c;}
.mg-radial-cat-utility{stroke:#9b59b6;fill:#9b59b6;}
.mg-radial-cat-label{font-size:28px;font-weight:bold;letter-spacing:3px;text-anchor:middle;paint-order:stroke;stroke:#030101;stroke-width:7px;}
.mg-radial-cat-sub{font-size:12px;letter-spacing:1px;text-anchor:middle;fill:var(--text3);paint-order:stroke;stroke:#030101;stroke-width:4px;}
.mg-radial-core-glow{fill:rgba(192,57,43,.22);filter:blur(8px);}
.mg-radial-core-shape{fill:#140807;stroke:#c0392b;stroke-width:4;filter:drop-shadow(0 0 18px rgba(192,57,43,.65));}
.mg-radial-core text{fill:#f0b429;font-size:18px;font-weight:bold;letter-spacing:2px;text-anchor:middle;paint-order:stroke;stroke:#050202;stroke-width:4px;}
.mg-radial-node{cursor:pointer;outline:none;}
.mg-radial-glow{fill:var(--node-color);opacity:.15;filter:blur(7px);}
.mg-radial-shape{fill:#12100e;stroke:var(--node-color);stroke-width:3;filter:drop-shadow(0 0 8px rgba(0,0,0,.85));}
.mg-radial-inner{fill:#070605;stroke:rgba(240,240,240,.38);stroke-width:1.5;}
.mg-radial-node.available .mg-radial-shape{stroke-width:4;}
.mg-radial-node.locked{opacity:.58;}
.mg-radial-node.maxed .mg-radial-shape{fill:#1a1609;stroke:#f0b429;}
.mg-radial-node:hover .mg-radial-glow,.mg-radial-node:focus .mg-radial-glow{opacity:.34;}
.mg-radial-node:hover .mg-radial-shape,.mg-radial-node:focus .mg-radial-shape{stroke-width:5;}
.mg-radial-node-lv{fill:#f0f0f0;font-size:11px;font-weight:bold;text-anchor:middle;paint-order:stroke;stroke:#020101;stroke-width:4px;pointer-events:none;}
.mg-radial-node-label{fill:var(--node-color);font-size:12px;font-weight:bold;letter-spacing:1px;text-anchor:middle;paint-order:stroke;stroke:#020101;stroke-width:5px;pointer-events:none;}
.mg-radial-tooltip{position:fixed;z-index:9999;width:310px;opacity:0;pointer-events:none;transform:translate3d(-999px,-999px,0);transition:opacity .12s;border:1px solid rgba(240,180,80,.35);background:linear-gradient(180deg,rgba(20,12,9,.98),rgba(5,3,3,.97));padding:13px;box-shadow:0 18px 50px rgba(0,0,0,.8),inset 0 0 24px rgba(192,57,43,.12);}
.mg-radial-tooltip.visible{opacity:1;}
.mg-radial-tooltip-type{font-size:9px;letter-spacing:2px;color:#c0392b;text-transform:uppercase;margin-bottom:5px;}
.mg-radial-tooltip h3{font-size:18px;color:#f0b429;letter-spacing:1px;margin-bottom:8px;}
.mg-radial-tooltip-grid{display:grid;grid-template-columns:70px 1fr;gap:4px 8px;margin-bottom:8px;font-size:11px;}
.mg-radial-tooltip-grid span{color:var(--text3);text-transform:uppercase;}
.mg-radial-tooltip-grid b{color:var(--text);}
.mg-radial-tooltip p{font-size:12px;line-height:1.35;color:var(--text2);margin-bottom:8px;}
.mg-radial-tooltip-effects{display:grid;gap:4px;font-size:11px;color:#f0f0f0;}
.mg-radial-controls{position:absolute;right:14px;bottom:12px;z-index:11;display:flex;gap:6px;padding:7px;border:1px solid rgba(240,180,80,.24);background:rgba(0,0,0,.65);}
.mg-radial-controls button,.mg-radial-controls output{min-width:42px;height:30px;border:1px solid var(--border2);background:#111;color:#f0b429;font-family:inherit;font-size:10px;font-weight:bold;letter-spacing:1px;}
.mg-radial-controls button{cursor:pointer;}
.mg-radial-controls button:hover{border-color:#f0b429;color:#f0f0f0;}
.mg-radial-controls output{display:flex;align-items:center;justify-content:center;color:var(--text2);}
@media (max-width:1200px){
  .mg-radial-summary{grid-template-columns:repeat(3,74px);}
  .mg-radial-header h2{font-size:18px;}
}
/* ── MASTERY PANEL (tabbed node grid + detail) ── */
.mast-wrap{display:grid;grid-template-columns:1fr 300px;gap:12px;margin-bottom:12px;}
.mast-main{background:var(--bg2,#141414);border:1px solid var(--border);padding:12px;}
.mast-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.mast-tab{flex:1;min-width:80px;padding:8px 6px;background:var(--bg3);border:1px solid var(--border2);color:var(--text3);cursor:pointer;font-family:inherit;font-size:12px;font-weight:bold;letter-spacing:1px;}
.mast-tab.active{background:var(--bg4);color:#fff;border-color:#fff;}
.mast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mast-node{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;background:var(--bg3);border:1px solid var(--nc,#666);border-left:3px solid var(--nc,#666);color:var(--text2);cursor:pointer;font-family:inherit;text-align:left;opacity:.85;}
.mast-node:hover{opacity:1;}
.mast-node.selected{background:#000;outline:2px solid var(--nc,#fff);opacity:1;}
.mast-node.maxed{opacity:.55;}
.mast-node.afford .mast-node-lvl{color:var(--green);}
.mast-node-name{font-size:12px;font-weight:bold;color:var(--nc,#fff);letter-spacing:.5px;}
.mast-node-lvl{font-size:11px;color:var(--text3);}
.mast-side{background:var(--bg2,#141414);border:1px solid var(--border);padding:12px;}
.mast-side-title{text-align:center;font-size:12px;letter-spacing:2px;color:var(--text3);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.mast-detail-empty{color:var(--text4);text-align:center;padding:20px 0;font-size:12px;}
.mast-d-title{font-size:16px;font-weight:bold;letter-spacing:1px;margin-bottom:2px;}
.mast-d-cat{display:inline-block;font-size:10px;color:var(--text3);border:1px solid var(--border2);padding:1px 6px;margin-bottom:8px;}
.mast-d-desc{font-size:12px;color:var(--text2);line-height:1.4;margin-bottom:8px;}
.mast-d-sep{height:1px;background:var(--border);margin:10px 0;}
.mast-d-label{font-size:11px;letter-spacing:1px;color:var(--text3);margin-bottom:4px;}
.mast-d-label.next{color:var(--green);}
.mast-d-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--white);font-weight:bold;margin-bottom:6px;}
.mast-d-eff{font-weight:bold;}
.mast-d-eff.next-eff{color:#fff;}
.mast-d-maxed{text-align:center;color:#f0b429;font-size:13px;padding:10px 0;font-weight:bold;}
.mast-d-cost{font-size:13px;font-weight:bold;margin-bottom:10px;}
.mast-d-cost.ok{color:var(--white);}
.mast-d-cost.no{color:#e74c3c;}
.mast-d-btn{width:100%;padding:9px;font-family:inherit;font-size:14px;font-weight:bold;letter-spacing:1px;cursor:pointer;border:1px solid #000;text-transform:uppercase;}
.mast-d-btn.can{background:#c0392b;color:#fff;}
.mast-d-btn.can:hover{background:#e74c3c;}
.mast-d-btn.cant{background:var(--bg3);color:var(--text4);cursor:not-allowed;}
.mast-bonuses{background:var(--bg2,#141414);border:1px solid var(--border);padding:12px;}
.mast-bonuses-title{font-size:12px;letter-spacing:2px;color:var(--text3);margin-bottom:10px;}
.mast-bonus-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text2);padding:3px 0;}
.mast-bonus-empty{color:var(--text4);font-size:12px;}