
/* Layout: Hub mit Laden-Szene oben, Lager | Regale darunter, Tabs für Ausrüstung und Raid; der Raid ist ein Vollbild-Overlay. */
:root{
  --bg:#100f0d; --panel:#1a1815; --panel2:#24211c; --line:#3a352d;
  --bone:#ece4d0; --dim:#9b927f; --amber:#f2a93b; --blood:#c9392d; --moss:#86a85f; --epic:#e07a6a;
  --display:'Special Elite','Courier New',monospace;
  --ui:'Special Elite','Courier New',monospace;
  --mono:'Special Elite','Courier New',monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--bone);font-family:var(--ui);font-size:17px;line-height:1.3;
  padding-block:14px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit}
#app{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.top{display:grid;grid-template-columns:1fr auto auto;gap:10px 24px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:12px}
.brand h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,5vw,40px);margin:0;letter-spacing:.02em;line-height:1.05;color:var(--bone)}
.brand p{margin:4px 0 0;color:var(--dim);text-transform:uppercase;letter-spacing:.14em;font-size:13px}
.money{text-align:right}
.lbl{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--dim)}
.money b{font-family:var(--mono);font-size:28px;color:var(--amber);font-weight:600}
.escape{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center}
.bar{height:8px;background:var(--panel2);border:1px solid var(--line)}
.bar i{display:block;height:100%;width:0;background:var(--amber)}
.escape #gobus,.escape #golvl{white-space:nowrap;padding:5px 10px}
.shoplv{margin-top:-4px}.shoplv .bar i{background:linear-gradient(90deg,#5a8fb0,#86b8d8)}
.escape small{font-family:var(--mono);font-size:12px;color:var(--dim)}
.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:6px}
.tabs button{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--line);padding:11px 4px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--dim);cursor:pointer;font-size:14px;white-space:nowrap}
.tabs button:hover{color:var(--bone);border-bottom-color:#5a4a2e}
.tabs button[aria-selected=true]{color:var(--amber);border-color:#5a4a2e;border-bottom-color:var(--amber);background:linear-gradient(#2c2314,#1a1610)}
.ti{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.util{display:flex;gap:8px;align-self:start}
.util .mute{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);color:var(--bone);padding:8px 12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;cursor:pointer}
.util .mute:hover{border-color:var(--amber)}.util .ti{width:18px;height:18px}
.tabs .sp{flex:1}
body.tdone .hlp,body.tdone .hintp,body.tdone .lohint,body.tdone .skhint,body.tdone .wkhint{display:none!important}
#defban{margin:8px 0;padding:10px 14px;border:1px solid var(--amber);background:#2a2010;display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;line-height:1.35}#defban[hidden]{display:none}#defban.red{border-color:#c9392d;background:#2c1210}#defban p{margin:0;flex:1 1 260px;min-width:0;overflow-wrap:anywhere}#defban b{color:var(--amber)}#defban.red b{color:#e07a6a}
.dfhead{border:1px solid var(--line);padding:14px 16px;margin:0 0 12px;background:var(--panel)}.dfhead.warn{border-color:var(--amber)}.dfhead.red{border-color:#c9392d;background:#24110e}.dfhead h3{margin:0 0 6px;font-size:clamp(18px,2.4vw,24px)}.dfhead p{margin:6px 0;line-height:1.45;overflow-wrap:anywhere}
.dfcount{font-size:clamp(26px,4vw,40px);font-weight:700;color:var(--amber);line-height:1}.dfhead.red .dfcount{color:#e07a6a}
.dftier{display:inline-block;padding:2px 9px;border:1px solid currentColor;font-weight:700;margin-right:6px}
.dfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;align-items:start}
.dfrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;margin:6px 0}.dfrow span{overflow-wrap:anywhere;min-width:0}.dfrow b{white-space:nowrap}
.dfbar{grid-column:1/-1;height:6px;background:#000;border:1px solid var(--line)}.dfbar i{display:block;height:100%;background:var(--amber)}
.rprow .btn{padding:4px 8px}
.dfhelp{border:1px solid var(--amber);padding:10px 12px;margin:10px 0;background:rgba(242,169,59,.06)}.dfhelp p{overflow-wrap:anywhere}
.dfreason{margin:4px 0;padding-left:18px;line-height:1.4}.dfreason li{margin:3px 0}
#tab-def .btn.big{width:100%;margin-top:10px}
#dfplan{display:block;width:100%;max-width:420px;height:auto;margin:6px auto;border:1px solid var(--line);background:#16251a}.dfslots{margin-top:8px}.dfslots .btn{flex:1 1 150px;min-width:0;white-space:normal;overflow-wrap:anywhere}
.dfopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:8px;margin:8px 0}.dfopt{border:1px solid var(--line);padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}.dfopt p{margin:0;font-size:13px;line-height:1.35;overflow-wrap:anywhere}.dfopt .need{font-size:12px;overflow-wrap:anywhere}.dfopt .btn{align-self:flex-start;margin-top:auto}#tab-def .sel{max-width:100%;min-width:0}
.tabs .mute{font-size:13px;padding:6px 10px;border:1px solid var(--line)}
button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.btn{background:var(--amber);color:#1a1205;border:0;padding:9px 16px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;font-size:15px}
.btn:hover:not(:disabled){filter:brightness(1.1)}
.btn:disabled{background:var(--panel2);color:#6c6557;cursor:not-allowed}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--bone)}
.btn.ghost:hover:not(:disabled){border-color:var(--amber)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.big{font-size:clamp(16px,4.4vw,22px);padding:14px clamp(12px,3vw,26px)}
.btn.on{background:var(--bone);color:#1a1205}
#shopcv{width:100%;height:auto;display:block;border:1px solid var(--line);background:#14120f}
.shopbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:var(--dim);font-size:15px;margin-top:8px}
.shopbar .mono{font-family:var(--mono);color:var(--bone)}
.shopbar .sp{flex:1}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:18px;margin-top:14px}
.cols>div{min-width:0}
h2{font-size:14px;text-transform:uppercase;letter-spacing:.18em;margin:0 0 8px;color:var(--dim);display:flex;justify-content:space-between;gap:10px}
h2 span{font-family:var(--mono);letter-spacing:0;color:var(--bone)}
.row,.slot{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:7px 10px;margin-bottom:6px}
.slot{grid-template-columns:34px 1fr auto;grid-template-areas:"i n p" "i m u"}
.slot .ico{grid-area:i}.slot .nm{grid-area:n}.slot .price{grid-area:p}.slot .mk{grid-area:m;color:var(--dim);font-size:13px}.slot .btn{grid-area:u;justify-self:end}
.slot.empty{display:block;color:#6c6557;border-style:dashed;background:none;text-align:center}
.ico{font-size:24px;text-align:center}
.nm b{display:block;font-size:18px;line-height:1.1}
.nm small{color:var(--dim);font-size:13px}
.qty{font-family:var(--mono);font-size:15px}
.price{display:flex;align-items:center;gap:6px}
.price b{font-family:var(--mono);min-width:64px;text-align:center;font-size:16px}
.price b.lo{color:var(--moss)}.price b.hi{color:var(--epic)}
.empty{color:var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.chips .btn{padding:3px 9px}
.card .need{display:block;margin-top:4px;font-size:14px}
p.empty{padding:10px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.card{background:var(--panel);border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:6px}
.card h3{margin:0;font-size:20px;line-height:1.1}
.card p{margin:0;color:var(--dim);font-size:15px;flex:1}
.card .foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .cost{font-family:var(--mono);color:var(--amber)}
.sec{font-size:14px;text-transform:uppercase;letter-spacing:.18em;color:var(--dim);margin:16px 0 8px}
.raidbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.raidbox>div{min-width:0}
.raidbox,.raidbox.st1{grid-template-columns:1fr}.raidbox.st1>.ctrlbox{display:none}
.rmgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:20px;align-items:start}
@media(max-width:900px){.rmgrid{grid-template-columns:1fr}}
.rmr{position:sticky;top:8px}.rmr .rsum{margin-top:0}.rmr #go{width:100%;margin-bottom:12px}
.rml .mapgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ctrlbox .keys{margin-top:6px}
.rsteps{display:flex;gap:6px;margin:4px 0 12px;flex-wrap:wrap}.rsteps .btn{flex:1;min-width:150px}
.rsum{border:1px solid var(--line);background:var(--panel);padding:10px 12px;margin:12px 0}.rsum h2{margin:0 0 6px}.rsum .stats{margin:4px 0}.rsum .warnl{color:var(--amber);font-size:13px;margin:2px 0}
.rnext{display:flex;justify-content:flex-end;margin-top:10px}
.story{font-family:var(--display);font-size:19px;line-height:1.5;color:var(--bone)}
.stats{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:16px;margin:10px 0}
.stats dt{color:var(--dim)}.stats dd{margin:0;font-family:var(--mono)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:16px}
kbd{font-family:var(--mono);font-size:13px;background:var(--panel2);border:1px solid var(--line);padding:1px 7px;color:var(--amber)}
.warn{border-left:3px solid var(--blood);padding:6px 12px;color:var(--bone);background:var(--panel);margin:10px 0}
#toast{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));background:var(--bone);color:#1a1205;padding:8px 14px;font-weight:700;z-index:90;opacity:0;transition:opacity .2s;pointer-events:none}
#toast.on{opacity:1}
#raid{position:fixed;inset:0;background:#000;z-index:50}
#rcv{width:100%;height:100%;display:block;cursor:none}
#result{position:absolute;inset:0;background:rgba(8,7,6,.86);display:grid;place-items:center;padding:16px}
#result .box{background:var(--panel);border:1px solid var(--line);max-width:520px;width:100%;padding:22px;max-height:90%;overflow:auto}
#result h2{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:0;text-transform:none;color:var(--bone);display:block}
#result h2.bad{color:var(--blood)}
#result ul{list-style:none;margin:10px 0;padding:0;display:grid;gap:4px}
#result li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:3px 0}
#result .tot{font-family:var(--mono);font-size:20px;color:var(--amber);margin:8px 0 14px}
#raid{touch-action:none}
#itip{position:fixed;z-index:199;pointer-events:none;max-width:280px;background:rgba(20,18,15,.97);border:1px solid var(--line);border-top:2px solid var(--amber);padding:8px 10px;font-size:13px;line-height:1.35;color:var(--bone);box-shadow:0 8px 20px -8px #000}#itip[hidden]{display:none}#itip .tt-h{font-size:15px;margin-bottom:2px}#itip .tt-c{color:var(--amber);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}#itip .tt-f{color:var(--dim);font-size:12px;margin-top:4px}#itip .g{color:var(--moss)}
#vcur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;will-change:transform;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}#vcur[hidden]{display:none}
.ic{display:inline-block;width:1.3em;height:1.3em;vertical-align:-.3em;flex:none;pointer-events:none}.ic.mon{width:1.65em;height:1.65em;vertical-align:middle}
#pausem{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none}#pausem[hidden]{display:none}#pausem .pbox{pointer-events:auto;background:rgba(26,24,21,.94);border:1px solid var(--line);border-top:3px solid var(--amber);padding:20px 24px;display:flex;flex-direction:column;gap:10px;min-width:260px;max-width:min(92vw,420px);text-align:center}#pausem h2{margin:0;letter-spacing:.2em;color:var(--bone)}#pausem .empty{margin:4px 0 0;font-size:13px}
#touch{position:absolute;inset:0;pointer-events:none}
.tb svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.tb .lb{font-size:10px;margin-top:1px}.tb.big svg{width:30px;height:30px}.tb.big .lb{font-size:12px}
.tb.ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:radial-gradient(circle at 50% 30%,rgba(70,64,54,.7),rgba(14,13,11,.82));box-shadow:inset 0 0 0 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.55)}
.tb{position:absolute;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;width:60px;height:60px;border-radius:50%;border:2px solid rgba(236,228,208,.45);background:rgba(20,18,15,.55);color:var(--bone);font:700 12px var(--ui);text-transform:uppercase;letter-spacing:.04em;display:grid;place-items:center;line-height:1.05;text-align:center;padding:0}
.tb.big{width:78px;height:78px;font-size:15px;border-color:var(--amber);color:var(--amber)}
.tb.sm{width:42px;height:42px;font-size:12px}
.tb.on,.tb.hold{background:var(--amber);color:#1a1205;border-color:var(--amber)}
@media (max-height:430px){
 .tb{width:50px;height:50px}.tb.big{width:64px;height:64px}.tb.sm{width:36px;height:36px}.tb svg{width:20px;height:20px}.tb.big svg{width:26px;height:26px}.tb .lb{font-size:9px}
 #tb-pause{top:56px!important;left:calc(14px + env(safe-area-inset-left,0px))!important}#tb-drop{top:56px!important;left:calc(56px + env(safe-area-inset-left,0px))!important}#tb-bag{top:56px!important;left:calc(98px + env(safe-area-inset-left,0px))!important}
 #tb-sprint{bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;left:calc(14px + env(safe-area-inset-left,0px))!important}#tb-heal{bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;left:calc(14px + env(safe-area-inset-left,0px))!important}#tb-sneak{bottom:calc(120px + env(safe-area-inset-bottom,0px))!important;left:calc(14px + env(safe-area-inset-left,0px))!important}
 #tb-melee{bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;right:calc(12px + env(safe-area-inset-right,0px))!important}#tb-reload{bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;right:calc(72px + env(safe-area-inset-right,0px))!important}
 #tb-use{bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;right:calc(8px + env(safe-area-inset-right,0px))!important}#tb-light{bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;right:calc(80px + env(safe-area-inset-right,0px))!important}
 #tb-thr{bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;right:calc(132px + env(safe-area-inset-right,0px))!important}#tb-thrn{bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;right:calc(140px + env(safe-area-inset-right,0px))!important}
}
#tb-pause{left:calc(18px + env(safe-area-inset-left,0px));top:86px}
#tb-drop{left:calc(70px + env(safe-area-inset-left,0px));top:86px}
#tb-thr{right:calc(176px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px))}
#tb-thrn{right:calc(184px + env(safe-area-inset-right,0px));bottom:calc(98px + env(safe-area-inset-bottom,0px))}
#tb-heal{left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px))}
#tb-sprint{left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px))}
#tb-sneak{left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(158px + env(safe-area-inset-bottom,0px))}
#tb-light{right:calc(98px + env(safe-area-inset-right,0px));bottom:calc(108px + env(safe-area-inset-bottom,0px))}
#tb-reload{right:calc(92px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px))}
#tb-use{right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(96px + env(safe-area-inset-bottom,0px))}
#tb-melee{right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px))}
#loot{position:absolute;inset:0;display:grid;place-items:start center;padding:58px 10px 10px;pointer-events:none;z-index:6;--cell:54px}
#loot .lw{pointer-events:auto;position:relative;display:flex;background:#1c1915;border:1px solid var(--line);max-width:100%;max-height:100%;overflow:auto;box-shadow:0 10px 40px #000a}
#loot .lcol{padding:14px;min-width:0}
#loot .lcol+.lcol{border-left:1px solid var(--line)}
#loot .lh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--dim);margin:0 0 8px}
#loot .lh b{color:var(--bone);font-weight:600}
#loot .lh span{font-family:var(--mono);letter-spacing:0;color:var(--bone)}
#loot .lh.sub{margin-top:14px}
#loot .grid{display:grid;gap:5px;grid-auto-rows:var(--cell);grid-auto-flow:dense}
#loot .g6{grid-template-columns:repeat(6,var(--cell))}
#loot .g5{grid-template-columns:repeat(5,var(--cell))}
#loot .it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;background:var(--panel2);border:1px solid var(--line);border-bottom:3px solid var(--rc,var(--line));cursor:pointer;touch-action:manipulation;overflow:hidden;min-width:0}
#loot .it:hover,#loot .it.sel{background:#2a251d;outline:1px solid var(--amber)}
#loot .it .e{font-size:26px;line-height:1;height:30px;display:flex;align-items:center;overflow:hidden}
#loot .lcol+.lcol .lh:first-child{padding-right:34px}
#loot .it .n{font-size:11px;line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bone)}
#loot .it .p{font:600 10px var(--mono);color:var(--dim)}
#loot .it{position:relative}#loot .it .q{position:absolute;top:2px;right:3px;font:700 11px var(--mono);color:var(--amber);text-shadow:0 1px 0 #000}
#loot .kgbar{height:6px;background:var(--panel2);border:1px solid var(--line);margin:-2px 0 8px}#loot .kgbar i{display:block;height:100%}
#loot .it.empty{background:rgba(255,255,255,.02);border:1px dashed #2c2822;cursor:default;outline:none}
#loot .chips{display:flex;flex-wrap:wrap;gap:5px}

#loot .acts{margin-top:12px;display:flex;gap:8px}
#loot .hint{color:var(--dim);font-size:14px;margin:10px 0 0;max-width:340px}
#loot .lx{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--dim);font-size:20px;cursor:pointer;padding:6px 10px;touch-action:manipulation}
#loot .lx:hover{color:var(--bone)}
@media (max-width:900px),(max-height:520px){#loot{--cell:56px;padding:40px 6px 6px}#loot .lcol{padding:9px}#loot .it{gap:0}#loot .it .e{font-size:18px;height:22px}#loot .it .n{font-size:9.5px}#loot .it .p{font-size:9px}#loot .hint{font-size:12px;max-width:260px}#loot .stats{font-size:13px;margin:4px 0}}
#tb-bag{font-size:9.5px;letter-spacing:0;left:calc(122px + env(safe-area-inset-left,0px));top:86px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:4px}
.fr{display:grid;grid-template-columns:78px 1fr 38px;gap:8px;align-items:center;font-size:15px;margin:3px 0}
.fr i{display:block;height:8px;background:var(--panel2);border:1px solid var(--line)}
.fr b{display:block;height:100%}
.fgrid>.fev{grid-column:1/-1}.fev .fr{grid-template-columns:minmax(150px,230px) 1fr 38px}
.fr em{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--dim);text-align:right}
#serve{margin:8px 0 10px}
#serve .sv{display:grid;grid-template-columns:34px 1fr 110px auto;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:7px 10px;margin-bottom:6px}
#serve .pt{height:8px;background:var(--panel2);border:1px solid var(--line)}
#serve .pt i{display:block;height:100%}
#serve .bt{display:flex;gap:6px}
@media (max-width:520px){#serve .sv{grid-template-columns:34px 1fr}#serve .pt,#serve .bt{grid-column:1/-1}}
#story{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}
#story[hidden]{display:none}
#story .in{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--amber);padding:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto}
#story .sp2{font-family:var(--mono);color:var(--amber);letter-spacing:.14em;text-transform:uppercase;font-size:14px;margin-bottom:10px}
#story p{font-size:19px;line-height:1.35;margin:0 0 10px}#story .btn{margin-top:6px;float:right}
@media (max-height:520px){#story .in{padding:12px 16px}#story p{font-size:15px;margin:0 0 6px}}
.qbar{height:8px;background:var(--panel2);margin:2px 0 6px}.qbar i{display:block;height:100%;background:var(--amber)}
.qrow{display:flex;justify-content:space-between;gap:8px;font-size:15px}
.qfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.story{margin:0 0 6px;color:var(--dim);font-size:16px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.qmain{border-color:var(--amber)}
.qlog{margin-top:16px}.qlog .lg{border-left:2px solid var(--line);padding-left:10px;margin:8px 0}.qlog p{margin:2px 0;font-size:15px;color:var(--dim)}
#savebox{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
#savebox[hidden]{display:none}
#savebox .in{background:var(--panel);border:1px solid var(--line);padding:18px;max-width:420px;width:100%;max-height:90vh;overflow:auto}
#savebox h2{margin:0 0 8px}#savebox p{color:var(--dim);margin:6px 0 10px;font-size:15px}
#savebox .btn{display:block;width:100%;margin:6px 0}
#savebox .setrow{margin:8px 0}#savebox .setrow label{display:flex;justify-content:space-between;color:var(--bone)}#savebox input[type=range]{width:100%;accent-color:var(--amber)}#savebox .hint2{display:flex;justify-content:space-between;color:var(--dim);font-size:13px}#savebox .chk{display:flex;gap:8px;align-items:center;color:var(--bone);margin:8px 0}
#savebox .ok{color:var(--moss);min-height:20px}
details.fold{margin:8px 0;border:1px solid var(--line);background:var(--panel)}details.fold>summary{cursor:pointer;padding:10px 12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bone);list-style:none}details.fold>summary::-webkit-details-marker{display:none}details.fold>summary::before{content:'▸ ';color:var(--amber)}details.fold[open]>summary::before{content:'▾ '}details.fold>summary small{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:600}details.fold>div{padding:4px 12px 12px}
@media (max-width:700px){#tab-shop:not([hidden]){display:flex;flex-direction:column}#shopcv{order:0}#serve{order:1}#mktbar{order:2}#ordbar{order:3}#tab-shop .shopbar{order:4}#tab-shop .cols{order:5}}
#savebox .subnav{display:flex;flex-wrap:wrap;gap:6px}#savebox .subnav .btn{display:inline-block;width:auto;margin:0}#keyl .btn{display:inline-block;width:auto;margin:0}#savebox .sp[hidden]{display:none}#savebox .subnav{margin-bottom:10px}#savebox .sel{width:100%;background:var(--panel2);color:var(--bone);border:1px solid var(--line);padding:8px;font:inherit}
#savebox .chk{display:flex;gap:8px;align-items:center;margin:8px 0}
#keyl .kr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}#keyl .kr .btn{min-width:96px}#keyl .kr .btn.wait{background:var(--amber);color:#000}
#coop{margin:12px 0}
#coop .crow{display:flex;gap:8px;margin:6px 0}
#coop input{background:var(--panel2);border:1px solid var(--line);color:var(--bone);padding:7px 10px;font:inherit;min-width:0;flex:1}
#coop details{margin:8px 0;color:var(--dim);font-size:14px}
#coop details input{width:100%;margin-top:6px}
#coop .plist{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
#coop .chip2{background:var(--panel2);border:1px solid var(--line);padding:3px 10px}
#coop .code{font-family:var(--mono);font-size:22px;color:var(--amber);letter-spacing:.2em}
#rotate{display:none;position:absolute;inset:0;background:rgba(8,7,6,.94);flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;font-size:22px;z-index:5}
@media (orientation:portrait){#raid.touch:not(.portok) #rotate{display:flex}}
#probe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
@media (pointer:coarse){.btn.sm{padding:10px 13px;font-size:15px}.tabs button{padding:10px 12px}}
@media (max-width:520px){
 body{font-size:16px}
 .slot{grid-template-columns:34px 1fr;grid-template-areas:"i n" "p p" "m m" "u u"}
 .slot .price{justify-content:space-between}
 .slot .btn{justify-self:stretch}
 .row{grid-template-columns:34px 1fr auto}
 .row .btn{grid-column:1/-1}
 .top{grid-template-columns:1fr auto}
 .money{text-align:left}
 .util .tl{display:none}
 .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;position:sticky;top:0;z-index:8;background:var(--bg);padding:6px 0;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .tabs::-webkit-scrollbar{display:none}
 .tabs button{flex:0 0 auto;flex-direction:column;gap:2px;min-width:68px;padding:7px 6px 6px;font-size:11px;letter-spacing:0}
 .tabs button .ti{width:20px;height:20px}
 .brand h1{font-size:19px;letter-spacing:0}
 .escape{grid-template-columns:auto 1fr}
 .escape small{grid-column:1/-1}
 .escape #gobus{grid-column:1/-1;justify-self:start}
 .grid{grid-template-columns:1fr}
 .raidbox .btn.big{width:100%}
 .tabs .mute{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){#toast{transition:none}
#notes .note{transition:none}}
/* Übersicht: Unterreiter, Werkbänke, Fertigkeiten */
.subnav{margin:2px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);gap:6px}
.subnav .btn{padding:6px 14px;font-size:14px}
.hintp{margin:12px 0 0;font-size:15px}
#stash{max-height:560px;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#shelves{position:sticky;top:8px}
.row{padding:5px 10px;margin-bottom:4px}
.row .nm b{font-size:17px}
#serve:empty{display:none}
#serve>p{margin:0;font-size:15px;color:var(--dim)}
#serve h2{margin:0 0 4px}
.modgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:10px 0 14px}
.modslot{background:var(--panel);border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:6px}
.modslot .empty{margin:0}
.row2{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line)}
.row2 span{display:block;line-height:1.15}
.row2 small{display:block;color:var(--dim);font-size:13px}
.row2.cur{border-top:0;background:var(--panel2);padding:6px 8px;border-left:3px solid var(--amber)}
.skhead{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:12px 16px;margin-bottom:12px}
.skhead .big{font-family:var(--mono);font-size:34px;font-weight:600;line-height:1}
.xpw .bar{margin-bottom:4px}.xpw small{color:var(--dim);font-size:14px}
.pips{display:flex;gap:5px;margin-top:auto}
.pips i{width:26px;height:8px;background:var(--panel2);border:1px solid var(--line)}
.pips i.on{background:var(--amber);border-color:var(--amber)}
.card .per{color:var(--dim);font-size:13px}
.skfoot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}


.skhint{margin:0 0 12px;font-size:15px}
.skbranch{margin-bottom:14px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--bc)}
.skbh{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line)}
.skbh b{font-size:20px;color:var(--bc)}.skbh span{color:var(--dim);font-size:14px}.skbh em{margin-left:auto;font-style:normal;font-family:var(--mono);color:var(--bone)}
.skscroll{overflow-x:auto;scrollbar-width:thin}
.sktree{position:relative;min-width:880px;padding:10px 12px 12px}
.sklines{position:absolute;inset:0;pointer-events:none}
.sklines path{fill:none;stroke:var(--line);stroke-width:2}
.sklines path.on{stroke:var(--bc);stroke-width:2.5}
.skcols{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.skcol{display:flex;flex-direction:column;gap:10px;justify-content:center}
.skt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}.skt small{letter-spacing:0;text-transform:none;font-size:12px}
.sknode{display:grid;grid-template-columns:30px 1fr;grid-template-areas:"e n" "p p" "w w";gap:2px 8px;text-align:left;background:var(--panel2);border:1px solid var(--line);padding:8px 9px;cursor:pointer;color:var(--bone);position:relative}
.sknode .ske{grid-area:e;font-size:24px;align-self:center;text-align:center}
.sknode .skn{grid-area:n;display:block}.sknode .skn b{display:block;font-size:17px;line-height:1.1}.sknode .skn small{display:block;color:var(--dim);font-size:13px;line-height:1.15;margin-top:2px}
.sknode .pips{grid-area:p;margin-top:6px}
.sknode .skw{grid-area:w;font-size:12px;color:var(--epic);margin-top:3px}
.sknode.lock{opacity:.5;cursor:not-allowed}
.sknode.can{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.sknode.can:hover{background:#2d2a22}
.sknode.part{border-color:var(--bc)}
.sknode.max{border-color:var(--moss);background:#1e2418}.sknode.max .pips i.on{background:var(--moss);border-color:var(--moss)}
.sknode.part .pips i.on{background:var(--bc);border-color:var(--bc)}
@media (max-width:640px){.skhead{grid-template-columns:1fr 1fr}.skhead .xpw{grid-column:1/-1;order:3}#shelves{position:static}}

.ststats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:10px}
.ststats>div{background:var(--panel);border:1px solid var(--line);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.ststats b{font-family:var(--mono);font-size:18px}
.stbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.stbar input,.stbar select{background:#14110e;border:1px solid var(--line);color:var(--bone);padding:7px 9px;font:inherit;min-width:0}
.stbar input{flex:1 1 160px}.stbar .sp{flex:1}
.btn.on{border-color:var(--amber);color:var(--amber)}
.stgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:6px}
.stile{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);padding:7px 9px}
.stile.zero{opacity:.55}.stile.unk{opacity:.4;filter:grayscale(1)}
.stile .ico{font-size:24px}.stile .nm{flex:1;min-width:0;display:flex;flex-direction:column}.stile .nm small,.stile .sq small{color:var(--dim);font-size:13px}
.stile .sq{text-align:right;display:flex;flex-direction:column;white-space:nowrap}.stile .sb{min-width:78px;text-align:right;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.stview{margin-bottom:8px}
.stile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i n q" "i b b";align-items:center;column-gap:10px;row-gap:5px}
.stile .ico{grid-area:i;align-self:start;padding-top:2px}.stile .nm{grid-area:n}.stile .sq{grid-area:q;align-self:start}.stile .sb{grid-area:b;min-width:0;justify-content:flex-start}.stile .sb:empty{display:none}
.stile .nm b{overflow-wrap:anywhere;hyphens:auto;font-size:16px;line-height:1.2}.stile .nm small{line-height:1.3}
#mapsel h2{display:flex;justify-content:space-between}.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:14px}.mapc{text-align:left;display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);color:var(--bone);font:inherit;cursor:pointer}.mapc{min-width:0}.mapc b{font-size:16px;letter-spacing:.02em;overflow-wrap:anywhere;hyphens:auto}.mapc small{color:var(--amber);font-size:12px}.mapc span{font-size:12.5px;color:var(--dim);line-height:1.35}.mapc em{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--moss)}.mapc.on{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}.mapc.soon{opacity:.45;cursor:default}.jobbox{margin-bottom:10px}.jobbox .jrow{display:flex;justify-content:space-between;gap:8px;font-size:14px;margin:4px 0}.packplan{padding:10px 12px}.packplan .pbar{height:8px;background:rgba(255,255,255,.08);border:1px solid var(--line)}.packplan .pbar span{display:block;height:100%}.stview .btn{flex:1 1 160px}
.chwrap{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
@media(max-width:760px){.chwrap{grid-template-columns:1fr}}
#charcv{width:100%;max-width:260px;height:auto;border:1px solid var(--line);display:block;margin:0 auto 8px;background:#120e0a}
.chlook .lbl,.slotb .lbl{color:var(--dim);font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:6px 0 3px}
.sws{display:flex;flex-wrap:wrap;gap:5px}
.sw{width:30px;height:30px;border:2px solid var(--line);cursor:pointer;padding:0}.sw.on{border-color:var(--amber);outline:2px solid var(--amber)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-bottom:8px}
.slotb{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel);border:1px solid var(--line);color:var(--bone);padding:8px 4px;cursor:pointer;font:inherit;text-align:center}
.slotb .lbl{margin:0}.slotb .se{font-size:26px}.slotb b{font-size:13px;overflow-wrap:anywhere;line-height:1.15}
.slotb.on{border-color:var(--amber);background:linear-gradient(#2c2314,#1a1610)}
.ogrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.lo{display:grid;grid-template-columns:minmax(250px,1.05fr) minmax(220px,.85fr) minmax(270px,1.1fr);gap:14px;align-items:start;margin-top:6px}
@media(max-width:980px){.lo{grid-template-columns:1fr 1fr}.lo-c{grid-column:1/-1;order:-1}}
@media(max-width:620px){.lo{grid-template-columns:1fr}#locv{max-width:170px}}
.lo-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.lo-h b{color:var(--bone);font-weight:600;letter-spacing:.06em}
.los{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:92px;color:var(--bone);cursor:pointer;font:inherit;padding:20px 8px 26px;margin:0 0 6px;border:1px solid var(--line);
 background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(160deg,#2b2620,#171512)}
.los:hover{border-color:#7a6440}.los.on{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.los .ic{width:56px;height:56px}.los.big{min-height:120px}.los.big .ic{width:92px;height:92px}.los.sm{min-height:78px;padding:16px 4px 24px}.los.sm .ic{width:40px;height:40px}
.los .lon{position:absolute;left:6px;top:4px;font-size:11px;color:var(--dim);font-family:var(--mono,monospace)}
.los .lol{position:absolute;left:-1px;bottom:-1px;background:#3a342b;color:var(--bone);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;max-width:calc(100% - 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.los .lor{position:absolute;right:7px;top:4px;font-size:11px;color:var(--amber);max-width:62%;text-align:right;line-height:1.2}
.los .lnm{position:absolute;right:7px;bottom:4px;font-size:11.5px;color:var(--bone);max-width:60%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.los.sm .lnm{display:none}.los .cnt{font-size:12px;color:var(--amber);margin-left:-4px;align-self:flex-end}
.lo-wrow{display:grid;grid-template-columns:1fr 74px;gap:6px}
.lo-mods{display:grid;grid-template-rows:repeat(4,1fr);gap:4px;margin-bottom:6px}
.lo-mod{border:1px solid var(--line);background:#191714;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;text-align:center;line-height:1.1;padding:2px}
.lo-mod{cursor:pointer;font:inherit;font-size:9px}.lo-mod:hover{border-color:#7a6440}.lo-mod.on{border-color:var(--amber)}.lo-mod.x{cursor:default;opacity:.4}.lo-mod.f{border-color:#6a5a3a;background:#231f19}
.card.flash{outline:2px solid var(--amber);outline-offset:2px;animation:flashc 1.6s ease-out}@keyframes flashc{0%{background:#4a3a18}100%{background:var(--panel)}}.lo-mod .ic{width:22px;height:22px}
.lo-prot{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lo-c{border:1px solid var(--line);background:radial-gradient(circle at 50% 38%,#3a2c1d,#120e0a 70%);padding:8px 8px 10px}
#locv{width:100%;max-width:300px;height:auto;display:block;margin:0 auto}
.lo-st{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}
.lo-st div{background:rgba(0,0,0,.35);border:1px solid var(--line);padding:4px 6px;text-align:center}.lo-st small{display:block;color:var(--dim);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.lo-st b{font-size:14px}
.lo-top{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lo-pack{position:relative;border:1px solid var(--line);background:linear-gradient(160deg,#25211b,#151310);padding:10px;min-height:230px;overflow:hidden}
.lo-pack>.ic.bgp{position:absolute;right:-20px;bottom:-24px;width:220px;height:220px;opacity:.06}
.lo-tiles{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.lot{border:1px solid var(--line);background:rgba(0,0,0,.35);padding:6px 5px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.lot.on{border-color:#6a7a4a;background:rgba(60,80,40,.18)}.lot .ic{width:34px;height:34px}
.lot{min-width:0}.lot .lnn{font-size:11.5px;line-height:1.15;min-height:2.3em;display:flex;align-items:center;justify-content:center;max-width:100%;overflow-wrap:anywhere;hyphens:auto}.lot .lcc{font-size:12px;color:var(--dim)}.lot .lcc b{color:var(--amber);font-size:14px}
.lot .lbb{display:flex;gap:4px}.lot .lbuy{margin-top:4px;font-size:10px;padding:3px 6px;white-space:nowrap}.lot .lbb .btn{min-width:30px;padding:3px 0}
.lo-sub{position:relative;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:10px 0 5px}
.lo-foot{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:8px;align-items:stretch}
.lo-w{border:1px solid var(--line);background:#191714;padding:6px 8px;font-size:12px}
.lo-w .pbar{height:8px;margin:5px 0 3px;background:#0c0b09;border:1px solid var(--line)}.lo-w .pbar span{display:block;height:100%}.lo-w .wl{display:flex;justify-content:space-between;gap:8px}.lo-w .wl b{letter-spacing:.1em}
.lo-go{background:linear-gradient(#7fae4a,#5b8a30);color:#10130b;border:0;font:inherit;font-weight:700;letter-spacing:.1em;padding:8px 18px;cursor:pointer;min-width:150px;text-transform:uppercase;font-size:15px}
.lo-go:hover{filter:brightness(1.1)}.lo-go small{display:block;font-size:10px;letter-spacing:.06em;font-weight:600}
.lopk{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.66);display:grid;place-items:center;padding:14px}
.lopk>div{width:min(940px,100%);max-height:86vh;overflow:auto;background:var(--bg);border:1px solid var(--amber);padding:14px}
.lopk .lo-h{font-size:14px}
.lohint{margin:2px 0 8px;font-size:13px}
#gt{position:fixed;z-index:88;width:min(430px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--amber);padding:12px 14px;box-shadow:0 10px 34px rgba(0,0,0,.7);transition:top .2s,left .2s}#gt[hidden],#gthole[hidden]{display:none}
#gt .gtk{color:var(--amber);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:4px}#gt .gttx p{margin:4px 0;line-height:1.45;overflow-wrap:anywhere}#gt .gttx b{color:var(--amber)}
#gt .gtbar{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}#gt .gtn{color:var(--dim);font-size:12px}#gt .sp{flex:1}#gt.pulse{animation:gtp .5s}@keyframes gtp{0%,100%{transform:none}30%{transform:translateX(-6px)}60%{transform:translateX(6px)}}
#gt.raidm{top:96px!important;left:50%!important;transform:translateX(-50%);width:min(520px,calc(100vw - 24px));background:rgba(26,22,16,.93)}#gt.raidm.pulse{animation:none}
#gthole{position:fixed;z-index:87;pointer-events:none;border:2px solid var(--amber);border-radius:6px;box-shadow:0 0 0 9999px rgba(8,7,6,.6);transition:all .2s}#gthole.soft{box-shadow:0 0 0 9999px rgba(8,7,6,.25)}
#wiki{position:fixed;inset:0;z-index:95;background:rgba(8,7,6,.86);display:grid;place-items:center;padding:12px}#wiki[hidden]{display:none}
#wiki .wbox{background:var(--panel);border:1px solid var(--amber);width:min(1000px,100%);height:min(88vh,860px);display:flex;flex-direction:column;min-height:0}
#wiki .whead{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}#wiki .whead h2{margin:0;flex:0 0 auto}#wiki #wq{flex:1 1 200px;min-width:0;background:#0f0d0a;border:1px solid var(--line);color:var(--bone);padding:8px 10px;font:inherit}
#wiki .wbody{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:0;flex:1}#wnav{border-right:1px solid var(--line);overflow:auto;padding:6px}#wnav button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--dim);padding:7px 8px;font:inherit;cursor:pointer;overflow-wrap:anywhere}#wnav button.on{color:var(--amber);background:#2a2010}#wnav button:hover{color:var(--bone)}
#wtxt{overflow:auto;padding:12px 18px;line-height:1.5}#wtxt h3{margin:16px 0 6px;color:var(--amber)}#wtxt h3:first-child{margin-top:0}#wtxt p,#wtxt li{overflow-wrap:anywhere}#wtxt ul{padding-left:20px;margin:6px 0}#wtxt mark{background:#5a4a1e;color:var(--bone)}#wtxt table{border-collapse:collapse;width:100%;margin:6px 0;font-size:14px}#wtxt td,#wtxt th{border:1px solid var(--line);padding:4px 6px;text-align:left;vertical-align:top}
@media(max-width:700px){#wiki .wbody{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}#wnav{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;max-height:none}#wnav button{white-space:nowrap;width:auto}}
#brief{position:fixed;inset:0;z-index:80;background:rgba(8,7,6,.82);display:grid;place-items:center;padding:16px}#brief[hidden]{display:none}#brief .bbox{background:var(--panel);border:1px solid var(--amber);max-width:640px;width:100%;max-height:92vh;overflow:auto;padding:18px 20px}#brief .bbox p{margin:8px 0;line-height:1.45}#brief .btn.big{width:100%;margin-top:12px}
#mapsel .mcnt{font-style:normal;font-size:11.5px;margin-top:4px;display:block}
#notes{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:95;display:flex;flex-direction:column;gap:6px;width:min(360px,calc(100vw - 32px));pointer-events:none}
#notes .note{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;background:#1d1912;border:1px solid var(--line);border-left:4px solid var(--moss);padding:9px 10px;box-shadow:0 6px 18px rgba(0,0,0,.45);transition:opacity .3s,transform .3s}
#notes .note.bad{border-left-color:var(--blood)}#notes .note.out{opacity:0;transform:translateX(20px)}
#notes .note>span{font-weight:700;color:var(--moss)}#notes .note.bad>span{color:var(--blood)}
#notes .note p{margin:0;flex:1;font-size:14px;line-height:1.35;color:var(--bone);overflow-wrap:anywhere}
#notes .nx{background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;padding:0 2px}
.ping{font-size:12px;margin-left:6px}
.loybox{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}.loybox select{background:#14110e;border:1px solid var(--line);color:var(--bone);padding:6px 8px;font:inherit;max-width:100%}
.qtag{font-family:"Segoe UI Symbol",Arial,sans-serif;font-size:1.05em;letter-spacing:0;margin-left:4px}
.pin{float:right;background:none;border:1px solid var(--line);color:var(--dim);font:inherit;font-size:16px;line-height:1;padding:3px 6px;cursor:pointer;margin-left:6px}.pin.on{color:var(--amber);border-color:var(--amber)}.shopbox{border-color:#6a5a3a;margin-bottom:10px}.shopbox h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.shopbox .nx{background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;padding:0 2px}
#bossnote .empty{margin:10px 0 8px;font-size:14px;line-height:1.45}
.invr{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:7px 0}.invr small{display:block;color:var(--dim);font-size:12px}.invq{display:flex;gap:4px;align-items:center}.invq b{min-width:34px;text-align:center;font-family:var(--mono)}
.eplan,.xdest{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}.xdest{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:6px}
.ep{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--bone);padding:8px 10px;font:inherit;cursor:pointer}.ep[disabled]{cursor:default;opacity:.7}.ep small{color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.ep em{font-style:normal;font-size:12px;color:var(--dim)}.ep.on{border-color:#6a5a3a}.xdest .ep.on{border-color:var(--amber);background:linear-gradient(#2c2314,#1a1610)}.xdest .ep small{text-transform:none;letter-spacing:0;font-size:12px}
.nplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px}.npc1{display:flex;gap:10px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--bone);padding:8px 10px;font:inherit;cursor:pointer}.npc1>span:nth-child(2){flex:1;display:flex;flex-direction:column}.npc1 small{color:var(--dim);font-size:12px}.npc1.on{border-color:var(--amber)}.npc1 .nce{font-size:24px}.npc1 em .ic{width:22px;height:22px}
.npdet{margin-top:10px;border-color:var(--amber)}.npdet h3{display:flex;align-items:center;gap:8px}
.trg{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:640px){.trg{grid-template-columns:1fr}}#trdlg select{background:#14110e;border:1px solid var(--line);color:var(--bone);padding:6px 8px;font:inherit;min-width:0;max-width:100%}
.lopk .lbl{display:block;color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:10px 0 4px}
.chname{margin:0 0 8px}.chname input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--bone);font:inherit;font-size:16px;padding:7px 9px}.chname small{color:var(--dim);font-size:12px}
.chlook .chips .btn[disabled]{opacity:.45}
.lgtabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}@media(max-width:700px){.lgtabs{grid-template-columns:1fr 1fr}}
.lgtab{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--bone);padding:9px 12px;cursor:pointer;font:inherit}
.lgtab .ic{grid-row:1/3;width:30px;height:30px}.lgtab b{font-size:15px;letter-spacing:.04em}.lgtab small{color:var(--dim);font-size:12px}.lgtab.on{border-color:var(--amber);background:linear-gradient(#2c2314,#1a1610)}.lgtab:hover{border-color:#7a6440}
.lgcap1{display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);padding:9px 12px;margin:0 0 10px;flex-wrap:wrap}.lgcap1>div{flex:1;min-width:220px}.lgcap1 .lbl{display:block;color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.abgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-items:start}.abgrid .sec{margin-top:4px}
.pests{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);padding:9px 12px}.pests small{display:block;color:var(--dim)}
.dlog{margin-bottom:10px}.dlsec{border-top:1px solid var(--line);padding:8px 0 4px;margin-top:6px}.dlsec:first-of-type{border-top:0;margin-top:0}.dlsec>b{display:block;color:var(--amber);font-size:14px;margin-bottom:4px;overflow-wrap:anywhere}.dlsec.bad>b{color:#e07a6a}.dlsec p{margin:4px 0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}.jcat{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border:1px solid;padding:0 5px;margin-right:4px;vertical-align:1px;white-space:nowrap}.dlog.bad{border-color:#5a2a24}.dlog h3{font-size:17px}.dlog .dl p{margin:3px 0;font-size:14px;color:var(--bone)}.dlog small{color:var(--dim)}
@media(max-width:620px){#locv{max-width:160px}.lo-c{padding:6px}}
.lghead{margin:0 0 12px}.lgcap{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:600px){.lgcap{grid-template-columns:1fr}}
.lgcap>div{background:var(--panel);border:1px solid var(--line);padding:8px 10px}.lgcap .lbl{display:block;color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.lgcap b{font-size:18px}
.pbar.lgbar{height:8px;margin-top:6px;background:#0c0b09;border:1px solid var(--line)}.pbar.lgbar span{display:block;height:100%}
.yard{border:1px solid var(--blood);background:rgba(120,30,20,.12);padding:8px 10px;margin:8px 0}.yard small{color:var(--dim)}
.yl{display:flex;flex-direction:column;gap:5px;margin-top:6px}.yi{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.yi>span{display:flex;gap:5px;flex-wrap:wrap}.yi .yn{flex:1;align-items:center}
.lgup{margin:8px 0}.lgup summary{cursor:pointer;color:var(--amber);letter-spacing:.08em;text-transform:uppercase;font-size:13px;padding:4px 0}
.lgrep{border:1px solid var(--line);background:var(--panel);padding:8px 10px;margin:8px 0}.lgrep p{margin:4px 0 0}
#hagmg{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(0,0,0,.5);padding:14px}
#hagmg[hidden]{display:none}
.hmg{width:min(460px,100%);background:var(--bg);border:1px solid var(--amber);padding:14px 16px}
.hmg h3{margin:0 0 6px;font-family:var(--display);font-size:20px}
.hbar{position:relative;height:30px;background:#14120f;border:1px solid var(--line);margin:8px 0 12px;overflow:hidden}
.hbar .hz{position:absolute;top:0;bottom:0;background:linear-gradient(#6f9a42,#4d7a2a);box-shadow:0 0 0 1px #9ac46a inset}
.hbar .hm{position:absolute;top:-3px;bottom:-3px;width:4px;margin-left:-2px;background:#f2e6c8;box-shadow:0 0 8px #f2a93b;left:0}
.hbar.ok{border-color:var(--moss)}.hbar.bad{border-color:var(--blood)}.hbar.bad .hz{background:#5a2420;box-shadow:none}
.hbt{display:flex;gap:8px}.hbt .btn{flex:1}.hbt small{opacity:.7;font-size:11px}
.sv.hagv{border-left:3px solid var(--amber)}
.card.cur{border-color:var(--amber)}.card.lockc{opacity:.7}
.chst{margin:6px 0 10px}
#npcbox{position:absolute;inset:0;display:grid;place-items:start center;padding:70px 10px 10px;z-index:7;pointer-events:none}
#npcbox .lw{pointer-events:auto;position:relative;display:flex;background:#1c1915;border:1px solid var(--line);max-width:560px;box-shadow:0 10px 40px #000a}
#npcbox .lcol{padding:16px 18px;min-width:0}
#npcbox .lh{display:flex;justify-content:space-between;gap:10px;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin:0 0 10px}
#npcbox .lh b{color:var(--bone)}
#npcbox .story{font-style:italic;margin:0 0 10px}
#npcbox .npq{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:15px;margin:8px 0 12px}
#npcbox .npq b{color:var(--dim);font-weight:600}
#npcbox .acts{display:flex;gap:8px;flex-wrap:wrap}
#npcbox .hint{font-size:13px;color:var(--dim);margin:12px 0 0}
#npcbox .lx{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--dim);font-size:18px;cursor:pointer}
.card select{background:#14110e;border:1px solid var(--line);color:var(--bone);padding:6px 8px;font:inherit;max-width:100%}
#collnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
#muscv{width:100%;height:auto;display:block;border:1px solid var(--line);background:#120f0d;margin:0 0 12px;cursor:pointer}
.tcg{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.tc{position:relative;aspect-ratio:5/7;border-radius:8px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--rc);background:linear-gradient(160deg,var(--tc),#14110e 78%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 4px 10px -6px #000;overflow:hidden;color:#f4ead2}
.tc .no{position:absolute;top:4px;left:6px;font:700 10px var(--mono);opacity:.8}.tc .ct{position:absolute;top:4px;right:6px;font:700 11px var(--mono);color:var(--amber)}
.tc .em{font-size:40px;line-height:1;margin-top:16px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}.tc .nm{font-size:12px;font-weight:700;text-align:center;line-height:1.05;margin-top:auto}
.tc .ty{font-size:10px;opacity:.85;text-transform:uppercase;letter-spacing:.08em}.tc .rr{font-size:10px;color:var(--rc);letter-spacing:.1em}
.tc.r2::after,.tc.r3::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);background-size:250% 100%;animation:shine 3.5s linear infinite;pointer-events:none}
@keyframes shine{from{background-position:150% 0}to{background-position:-100% 0}}
.tc.miss{background:repeating-linear-gradient(45deg,#1b1814,#1b1814 6px,#201c17 6px,#201c17 12px);border-color:#3a352d;color:#5a5448}.tc.miss .em{opacity:.25;filter:grayscale(1) brightness(.3)}
#packov{position:fixed;inset:0;z-index:70;background:rgba(8,7,6,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px}
#packov .row5{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:720px}#packov .tc{width:120px;opacity:0;transform:rotateY(90deg) scale(.8);animation:flip .5s ease-out forwards}
@keyframes flip{to{opacity:1;transform:none}}
#packov h2{margin:0;color:var(--amber);letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){.tc.r2::after,.tc.r3::after{animation:none}#packov .tc{animation-duration:.01s}}
#wkcv{width:100%;height:auto;display:block;border:1px solid var(--line);background:#14110e;margin:0 0 12px}
.wkroster{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;margin-bottom:6px}
.wkroster .lbl{align-self:center;color:var(--dim);font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin-right:4px}
.npcchip{display:flex;flex-direction:column;gap:1px;background:var(--panel);border:1px solid var(--line);color:var(--bone);padding:6px 10px 6px 34px;position:relative;font:inherit;text-align:left;cursor:pointer;min-width:130px}
.npcchip .nce{position:absolute;left:8px;top:8px;font-size:18px}
.npcchip small{color:var(--dim);font-size:12px}
.npcchip.on{border-color:var(--amber);background:linear-gradient(#2c2314,#1a1610)}
.npcchip.ghost{opacity:.45;cursor:default;border-style:dashed}
.wkhint{margin:0 0 10px}
/* Hauptmenü und Tutorial */
#menu{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;overflow:auto;background:radial-gradient(ellipse at 50% 28%,#2e2517 0,#16130f 55%,#0b0a08 100%)}
#menu[hidden]{display:none}
#devsel{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;overflow:auto;background:radial-gradient(ellipse at 50% 28%,#2e2517 0,#16130f 55%,#0b0a08 100%)}#devsel[hidden]{display:none}#devsel .mbox{width:min(100%,460px);text-align:center;display:flex;flex-direction:column;gap:10px}#devsel h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,7vw,40px);margin:0;color:var(--bone)}#devsel .msub{color:var(--dim);font-size:14px;margin:0 0 12px}#devsel .dh{color:var(--dim);font-size:14px;margin:0 0 12px}
#menu .mbox{width:min(100%,420px);text-align:center;display:flex;flex-direction:column;gap:10px}
#menu h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,9vw,56px);margin:0;line-height:1.05;color:var(--bone)}
#menu .msub{color:var(--dim);text-transform:uppercase;letter-spacing:.16em;font-size:13px;margin:4px 0 20px}
#menu .btn{width:100%;font-size:20px;padding:14px}
#mpan{text-align:left;min-height:12px}
#mpan .btn{font-size:16px;padding:10px 14px;margin-top:6px}
#mpan p{color:var(--dim);font-size:15px;margin:8px 0}
#mpan .ok{color:var(--moss);min-height:18px}
#mpan textarea{width:100%;background:var(--panel2);color:var(--bone);border:1px solid var(--line);font:12px 'Special Elite',monospace;margin:6px 0}
#tut{position:fixed;inset:0;z-index:72;display:flex;padding:16px}
#tut[hidden]{display:none}
#tut.lore{background:rgba(6,5,4,.93);align-items:center;justify-content:center}
#tut.dock{align-items:flex-end;justify-content:center;pointer-events:none;padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
#tut .in{pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--amber);padding:16px 18px;width:100%;max-width:580px;max-height:62vh;overflow:auto;box-shadow:0 10px 40px #000a}
#tut.lore .in{max-height:90vh;padding:22px}
#tut .sp2{font-family:var(--mono);color:var(--amber);letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-bottom:6px}
#tut h2{display:block;font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:0;text-transform:none;color:var(--bone);margin:0 0 8px}
#tut p{font-size:18px;line-height:1.4;margin:0 0 9px}
#tut.dock p{font-size:16px}
#tut .tutbar{position:sticky;bottom:-16px;background:var(--panel);padding:8px 0 4px;display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
#tut .tutbar .sp{flex:1}#tut .tutbar span{color:var(--dim);font-family:var(--mono);font-size:13px}
#tut .pb{height:4px;background:var(--panel2);margin-top:12px}#tut .pb i{display:block;height:100%;background:var(--amber)}

/* Optik: Tiefe, Licht, Koernung (statisch, kostet keine FPS) */
body{background:radial-gradient(1100px 520px at 50% -140px,rgba(242,169,59,.075),transparent 70%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),var(--bg)}
.brand h1{text-shadow:0 2px 0 #000,0 0 22px rgba(242,169,59,.14)}
.money b{text-shadow:0 0 16px rgba(242,169,59,.35)}
.bar i{background:linear-gradient(90deg,#b8741f,var(--amber));box-shadow:0 0 10px rgba(242,169,59,.45)}
.tabs button{background:linear-gradient(#1f1c18,#171512);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:color .15s,border-color .15s,background .15s}
.tabs button[aria-selected=true]{box-shadow:inset 0 1px 0 rgba(255,220,160,.08),0 8px 18px -10px rgba(242,169,59,.55)}
.btn{background:linear-gradient(#f7bb57,#e39a2c);box-shadow:inset 0 1px 0 rgba(255,240,200,.45),0 2px 0 #7a4c12;text-shadow:0 1px 0 rgba(255,230,180,.35);transition:filter .15s,box-shadow .15s}
.btn:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,240,200,.5),0 2px 0 #7a4c12,0 0 16px rgba(242,169,59,.35)}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,240,200,.3)}
.btn:disabled{background:var(--panel2);box-shadow:none;text-shadow:none}
.btn.ghost{background:linear-gradient(rgba(255,255,255,.025),rgba(0,0,0,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);text-shadow:none}
.btn.on{background:var(--bone);box-shadow:none}
.card,.row,.slot,.modslot,.stile,.skhead,.skbranch,details.fold,.warn{background:linear-gradient(180deg,#1e1c18,#181613);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 6px 14px -10px rgba(0,0,0,.8)}
.card{transition:border-color .15s,transform .15s}
.card:hover{border-color:#5a4a2e}
#shopcv{border-color:#2e2922;box-shadow:0 18px 40px -18px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){.btn,.card,.tabs button{transition:none}}
.card .foot select{flex:1 1 120px;min-width:0;max-width:100%}.card .foot:has(select){flex-wrap:wrap;gap:6px}
