:root{--bg:#15100b;--side:#110d09;--panel:#211810;--panel2:#2a1f15;--line:#3d2e1f;--line2:#5a4329;--txt:#eadbc4;--mut:#a08a72;--acc:#e0a245;--acc2:#c8662b;--ok:#7fb069;--cut:18px}
*{box-sizing:border-box}html,body{margin:0}
body{background:radial-gradient(ellipse at 70% -10%,#2c1d10 0%,var(--bg) 55%) fixed;color:var(--txt);font:15px/1.5 Manrope,sans-serif;min-height:100vh}
a{color:inherit}
img{max-width:100%}
.wrap{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}

/* sidebar */
.wrap>aside{background:var(--side);border-right:1px solid var(--line);padding:22px 0;position:sticky;top:0;height:100vh}
.logo{display:block;font:700 24px/1 Jost,sans-serif;color:var(--acc);letter-spacing:2px;padding:0 24px;text-decoration:none}
.logo small{display:block;font:500 10px Manrope;color:var(--mut);letter-spacing:3px;margin-top:6px;text-transform:uppercase}
aside nav{margin-top:28px}
aside nav a{display:flex;align-items:center;gap:12px;padding:11px 24px;color:var(--mut);text-decoration:none;font-weight:500;border-left:2px solid transparent}
aside nav a svg{width:18px;height:18px;opacity:.8;flex:none}
aside nav a.on{color:var(--txt);border-color:var(--acc);background:linear-gradient(90deg,rgba(224,162,69,.12),transparent)}
aside nav a:hover{color:var(--txt)}
aside nav a .soon{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--line2)}

/* top bar */
.top{display:flex;align-items:center;gap:16px;padding:14px 30px;border-bottom:1px solid var(--line);position:relative;z-index:20}
.menu-btn{display:none;background:none;border:1px solid var(--line2);color:var(--acc);width:38px;height:38px;cursor:pointer}
.searchbox{position:relative;flex:1;max-width:520px}
.search{width:100%;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a08a72' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 13px center;border:1px solid var(--line);color:var(--txt);padding:9px 14px 9px 38px;font:inherit;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.search:focus{outline:none;border-color:var(--line2)}
.suggest{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--side);border:1px solid var(--line2);max-height:420px;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.suggest.on{display:block}
.suggest a{display:flex;align-items:center;gap:12px;padding:7px 12px;text-decoration:none;border-bottom:1px solid var(--line)}
.suggest a:hover,.suggest a.sel{background:var(--panel2)}
.suggest img{width:34px;height:34px}.suggest .t{margin-left:auto;font:500 11px 'JetBrains Mono';color:var(--acc2)}
.suggest .none{padding:10px 12px;color:var(--mut)}
.langs{margin-left:auto;display:flex;gap:6px}
.langs a{display:block;width:30px;height:21px;border:1px solid transparent;border-radius:3px;opacity:.45;overflow:hidden;transition:.15s}
.langs a svg{display:block;width:100%;height:100%}
.langs a.on{opacity:1;border-color:var(--acc)}.langs a:hover{opacity:1}

/* layout */
main{padding:26px 30px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-content:start}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);padding:22px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));min-width:0}
.wide{grid-column:1/-1}
h2{font:700 20px Jost,sans-serif;color:var(--acc);letter-spacing:1px;margin:0 0 16px;display:flex;align-items:center;gap:12px}
h2:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
h2 .hint{font:400 13px Manrope;color:var(--mut);letter-spacing:0;order:2}
.desc{color:var(--mut);margin:0}
.muted{color:var(--mut)}
footer.site{grid-column:1/-1;text-align:center;color:var(--mut);font-size:12px;padding-top:10px}
footer.site a{color:var(--acc)}

/* item hero */
.hero{display:flex;gap:24px;align-items:center}
.hero .big:not(.itile){width:118px;height:118px;padding:12px;border:1px solid var(--line2);background:radial-gradient(circle,#4a3420 0%,transparent 70%);flex:none}
.tier{font:500 12px 'JetBrains Mono';color:var(--acc2);text-transform:uppercase;letter-spacing:1px}
h1{font:700 38px/1.1 Jost,sans-serif;margin:4px 0 6px;color:#f5e6cc}
.kv{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-left:auto;align-self:stretch;flex:none}
.kv div{background:var(--bg);padding:12px 18px;min-width:110px;display:flex;flex-direction:column;justify-content:center}
.kv small{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.kv b{font:700 22px 'JetBrains Mono';color:var(--acc)}.kv b i{font:500 13px Manrope;color:var(--mut);font-style:normal}

/* item chip (icon / name / both) */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);padding:6px 10px;position:relative;text-decoration:none;transition:border-color .12s,transform .12s;vertical-align:middle}
a.chip:hover{border-color:var(--acc);transform:translateY(-1px)}
.chip img{width:46px;height:46px;display:block;flex:none}
.chip.m-icon{padding:6px}
.chip .qty{font:700 13px 'JetBrains Mono';color:var(--acc);white-space:nowrap}
.chip.m-icon .qty{position:absolute;right:4px;bottom:2px;text-shadow:0 0 4px #000,0 0 2px #000}
.chip .nm{font-weight:500}
.chip .noicon{width:46px;height:46px;display:grid;place-items:center;color:var(--line2);font:700 18px Jost,sans-serif;border:1px dashed var(--line)}
.st{display:inline-flex;align-items:center;gap:8px;position:relative;vertical-align:middle}
.st img{width:42px;height:42px;border:1px solid var(--line);background:var(--bg);padding:3px;display:block}
.st .sz{position:absolute;right:-5px;top:-6px;z-index:1;font:700 10px 'JetBrains Mono';background:var(--acc2);color:#1a1108;min-width:15px;height:15px;line-height:15px;text-align:center;padding:0 3px}
.st.sm img{width:30px;height:30px;padding:2px}
.st.sm .nm{font-size:12px;color:var(--mut)}
.st.m-name .sz{position:static}
.ings{display:flex;flex-wrap:wrap;gap:10px}

/* instant tooltip */
#tip{position:fixed;z-index:50;pointer-events:none;background:#0e0a06;border:1px solid var(--acc);color:var(--txt);padding:7px 11px;font-size:13px;max-width:300px;opacity:0;transform:translateY(4px);transition:opacity .08s,transform .08s;box-shadow:0 6px 24px rgba(0,0,0,.6)}
#tip.on{opacity:1;transform:none}#tip b{display:block;color:#f5e6cc;font-weight:600}#tip span{color:var(--mut);font-size:12px}

/* how to build */
.flowbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.qtybox{display:flex;align-items:center;border:1px solid var(--line2)}
.qtybox button{width:34px;height:36px;background:var(--panel);border:0;color:var(--acc);font:700 18px 'JetBrains Mono';cursor:pointer}
.qtybox input{width:64px;height:36px;text-align:center;background:var(--bg);border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);color:var(--txt);font:700 16px 'JetBrains Mono'}
.legend{color:var(--mut);font-size:13px}
#flow-panel.loading .flow{opacity:.5}
.flow{position:relative;display:grid;gap:0 46px;transition:opacity .15s}
.flow svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.flow path{fill:none;stroke:var(--line2);stroke-width:1.5;transition:stroke .15s,opacity .15s}
.flow path.hl{stroke:var(--acc);stroke-width:2.5;filter:drop-shadow(0 0 3px rgba(224,162,69,.6))}
.flow.dim path:not(.hl){opacity:.08}
.flow h3{margin:0 0 14px;font:600 11px Manrope;color:var(--mut);text-transform:uppercase;letter-spacing:1.5px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.flow h3 b{display:block;font:700 18px Jost,sans-serif;color:var(--txt);letter-spacing:.5px;text-transform:none}
.flow h3.mh{display:none}
.col{display:flex;flex-direction:column;gap:12px;justify-content:center;position:relative;z-index:1;min-width:0}
.node{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);padding:8px 10px;transition:.15s;position:relative}
.node .chip{border:0;padding:0;background:none;min-width:0}
.node .chip:hover{transform:none}
.node .chip img{width:40px;height:40px}
.node .chip.m-icon .qty{position:static;text-shadow:none;font-size:15px}
.node .chip .nm{font-size:13px}
.node .via{margin-left:auto;display:flex;align-items:center;gap:4px}
.node .swap{background:none;border:1px solid var(--line2);color:var(--acc);cursor:pointer;padding:0;display:flex;align-items:center;gap:3px}
.node .swap:hover{border-color:var(--acc)}
.node .swap .st img{border:0}
.node .swap .ar{font-size:12px;padding:0 4px 0 0}
.flow.dim .node:not(.hl){opacity:.3}
.node.hl{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.node.raw{cursor:pointer}
.node.raw .check{margin-left:auto;width:20px;height:20px;border:1px solid var(--line2);display:grid;place-items:center;color:transparent;font-size:13px;flex:none}
.node.raw.done{opacity:.55}
.node.raw.done .check{background:var(--ok);border-color:var(--ok);color:#111}
.node.raw.done .qty{text-decoration:line-through}
.node.final{border-color:var(--acc2);background:linear-gradient(90deg,rgba(200,102,43,.15),var(--bg))}
.node.final .chip img{width:56px;height:56px}
.node.found:after{content:attr(data-tag);position:absolute;top:-8px;right:8px;font:600 9px Manrope;letter-spacing:1px;text-transform:uppercase;background:var(--panel2);border:1px solid var(--line2);color:var(--mut);padding:0 5px}
.sum{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px;flex-wrap:wrap}
.sum div{flex:1;background:var(--bg);padding:12px 16px;min-width:160px}
.sum small{display:block;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.sum b{font:700 20px 'JetBrains Mono';color:var(--acc)}.sum b i{font:500 13px Manrope;color:var(--mut);font-style:normal}
.sum .sts{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}

/* station options */
.opt{display:grid;gap:8px}
.opt h4{margin:10px 0 2px;font:600 13px Manrope;color:var(--txt)}
.opt .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;background:var(--bg);border:1px solid var(--line)}
.opt .row .arrow{color:var(--mut)}
.opt .row .meta{margin-left:auto;font:500 12px 'JetBrains Mono';color:var(--mut)}
.badge{font:600 10px Manrope;text-transform:uppercase;letter-spacing:1px;color:var(--ok);border:1px solid var(--ok);padding:1px 6px}

/* lists */
.used{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 18px}
.used a{display:flex;align-items:center;gap:12px;color:var(--txt);padding:8px 4px;border-bottom:1px solid var(--line);text-decoration:none;min-width:0}
.used a:hover{color:var(--acc)}
.used a img{width:34px;height:34px;flex:none}
.used a .t{margin-left:auto;font:500 11px 'JetBrains Mono';color:var(--acc2)}

/* catalog */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.filters a{padding:5px 12px;border:1px solid var(--line);color:var(--mut);text-decoration:none;font-size:13px}
.filters a.on{background:var(--acc);color:#1a1108;border-color:var(--acc)}
.filters a:hover{border-color:var(--line2);color:var(--txt)}
.filters a.on:hover{color:#1a1108}
.filters a i{font-style:normal;opacity:.6;margin-left:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.card{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);padding:10px;text-decoration:none;min-width:0;transition:border-color .12s}
.card:hover{border-color:var(--acc)}
.card img,.card .noicon{width:52px;height:52px;flex:none}
.card .noicon{display:grid;place-items:center;color:var(--line2);font:700 18px Jost,sans-serif;border:1px dashed var(--line)}
.card .n{font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.card .t{display:block;font:500 11px 'JetBrains Mono';color:var(--acc2);margin-top:2px}
.toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.toolbar form{display:flex;gap:8px}
.toolbar input[type=text]{background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:7px 12px;font:inherit;min-width:240px}
.toggle{display:inline-flex;align-items:center;gap:8px;color:var(--mut);font-size:13px;text-decoration:none}
.toggle i{width:16px;height:16px;border:1px solid var(--line2);display:grid;place-items:center;font-style:normal;color:#111;font-size:11px}
.toggle.on i{background:var(--acc);border-color:var(--acc)}
.pager{display:flex;gap:4px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pager a,.pager span{min-width:34px;text-align:center;padding:5px 9px;border:1px solid var(--line);color:var(--mut);text-decoration:none;font:500 13px 'JetBrains Mono'}
.pager .on{background:var(--acc);color:#1a1108;border-color:var(--acc)}
.pager a:hover{border-color:var(--acc);color:var(--txt)}

/* home */
.home-hero{text-align:center;padding:30px 20px 34px}
.home-hero h1{font-size:46px}
.home-hero p{color:var(--mut);font-size:17px;max-width:620px;margin:8px auto 22px}
.home-hero .searchbox{margin:0 auto;max-width:620px}
.home-hero .search{padding:14px 18px 14px 42px;font-size:17px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tile{display:flex;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--line);padding:14px;text-decoration:none;transition:border-color .12s}
.tile:hover{border-color:var(--acc)}
.tile img{width:56px;height:56px}
.tile b{display:block;font:700 19px Jost,sans-serif;color:var(--txt)}
.tile span{color:var(--mut);font-size:12px}

/* soon / admin */
.soon-box{text-align:center;padding:60px 20px}
.soon-box h1{font-size:44px}
.admin-box{max-width:560px}
.admin-box label{display:block;margin:16px 0 6px;color:var(--mut);font-size:13px;text-transform:uppercase;letter-spacing:1px}
.admin-box input[type=email],.admin-box input[type=password]{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:9px 12px;font:inherit}
.seg{display:inline-flex;border:1px solid var(--line2)}
.seg label{margin:0;text-transform:none;letter-spacing:0;font-size:14px;color:var(--mut);cursor:pointer}
.seg input{display:none}
.seg span{display:block;padding:7px 14px}
.seg input:checked+span{background:var(--acc);color:#1a1108}
.btn{background:var(--acc);color:#1a1108;border:0;padding:10px 20px;font:600 14px Manrope;cursor:pointer;margin-top:20px}
.btn.ghost{background:none;color:var(--mut);border:1px solid var(--line2);margin:0}
.flash{background:rgba(127,176,105,.15);border:1px solid var(--ok);color:var(--ok);padding:8px 12px;margin-bottom:14px}
.err{color:#e07a5f;font-size:13px;margin-top:6px}

@media(max-width:1000px){
  .wrap{grid-template-columns:1fr}
  .wrap>aside{position:fixed;left:-260px;width:240px;z-index:60;transition:left .2s}
  .wrap>aside.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.8)}
  .menu-btn{display:block}
  main{grid-template-columns:1fr;padding:16px}
  .top{padding:12px 16px}
  .hero{flex-wrap:wrap}.kv{margin-left:0;width:100%}.kv div{flex:1;min-width:0}
  .flow{grid-template-columns:1fr!important;gap:26px}.flow svg.lines{display:none}.col{gap:8px}
  .flow h3.sh{display:none}.flow h3.mh{display:block}
  .home-hero h1{font-size:34px}
}

/* Long station names: move the station to its own line inside flow nodes */
.disp-st-name .node,.disp-st-both .node{flex-wrap:wrap}
.disp-st-name .node .via,.disp-st-both .node .via{order:3;flex-basis:100%;margin-left:0;padding-left:50px}
.disp-st-name .node .swap,.disp-st-both .node .swap{padding:2px 6px;text-align:left}
.disp-st-name .node.raw .check,.disp-st-both .node.raw .check{order:2}
.node .chip .nm{white-space:normal}
.disp-st-name .sum .sts,.disp-st-both .sum .sts{flex-direction:column;gap:4px}

/* keep content inside the viewport on narrow screens */
.wrap>div{min-width:0}
h1{overflow-wrap:anywhere}
@media(max-width:1000px){
  h2{flex-wrap:wrap}h2 .hint{flex-basis:100%;order:3}h2:after{display:none}
  .searchbox{min-width:0}
  .kv div{padding:10px 12px}
  .used{grid-template-columns:1fr}
  .toolbar input[type=text]{min-width:0;width:100%}.toolbar form{flex:1}
}

/* loot tables */
.lootwrap{overflow-x:auto}
table.loot{width:100%;border-collapse:collapse;font-size:14px}
table.loot th{font:600 11px Manrope;color:var(--mut);text-transform:uppercase;letter-spacing:1px;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
table.loot td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.loot tr:hover td{background:rgba(224,162,69,.04)}
table.loot .c{text-align:center;white-space:nowrap;width:1%}
table.loot.collapsed tr.extra{display:none}
table.loot td.src a{text-decoration:none;display:flex;align-items:center;gap:10px}
table.loot td.src a:hover{color:var(--acc)}
table.loot td.src .chip{border:0;background:none;padding:0}
table.loot td.src .chip img{width:34px;height:34px}
.grp{font:600 9px Manrope;text-transform:uppercase;letter-spacing:1px;color:var(--mut);border:1px solid var(--line2);padding:1px 5px;white-space:nowrap;flex:none}
.grp.g-npc{color:#e07a5f;border-color:#7a3d2e}.grp.g-chest{color:var(--acc);border-color:var(--line2)}
.grp.g-recycle,.grp.g-station{color:var(--ok);border-color:#3d5a32}
.pct{display:inline-block;min-width:52px;padding:2px 6px;font:700 13px 'JetBrains Mono';color:var(--txt);background:linear-gradient(90deg,rgba(224,162,69,.35) calc(var(--p)*100%),rgba(224,162,69,.07) calc(var(--p)*100%))}
.per{display:block;font:500 11px 'JetBrains Mono';color:var(--mut)}
.none{color:var(--line2)}
.more{margin-top:12px}
.srcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.srccard{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);padding:10px 12px;text-decoration:none;transition:border-color .12s}
.srccard:hover{border-color:var(--acc)}
.srccard i{font:500 11px 'JetBrains Mono';color:var(--acc2);font-style:normal;white-space:nowrap}
.srccard.place{flex-direction:column;align-items:stretch;gap:8px}
.srccard.place b{font:700 18px Jost,sans-serif;color:var(--txt)}
.srccard.place .kinds{display:flex;flex-wrap:wrap;gap:6px}
.srccard.place .kinds a{font-size:13px;color:var(--mut);text-decoration:none;border:1px solid var(--line);padding:3px 8px;display:inline-flex;gap:6px;align-items:center}
.srccard.place .kinds a:hover{border-color:var(--acc);color:var(--txt)}
.srccard.place:hover{border-color:var(--line)}

/* unique (purple) items */
:root{--uq:#a874ff;--uq2:rgba(168,116,255,.18)}
.chip.uq{border-color:#5b3f8f;background:linear-gradient(135deg,var(--uq2),var(--bg) 70%)}
a.chip.uq:hover{border-color:var(--uq)}
.node .chip.uq{background:none}
.card.uq{border-color:#4a3373;background:linear-gradient(135deg,rgba(168,116,255,.12),var(--bg) 60%)}
.card.uq:hover{border-color:var(--uq)}
.card.uq .n{color:#d9c6ff}
.card .src{display:block;font-size:11px;color:var(--mut);margin-top:3px}
.card .src b{color:var(--uq)}
.hero .big.uq:not(.itile),.drawer-head .big.uq:not(.itile){border-color:var(--uq);background:radial-gradient(circle,rgba(168,116,255,.35) 0%,transparent 70%)}
h1.uqt,.uqt{color:#d9c6ff}
h2.uqh{color:var(--uq)}
.uqgrid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px}
.lootsec{margin-bottom:18px}
.lootsec h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;font:600 14px Manrope;color:var(--txt)}
.lootsec h3 .chip{padding:3px 8px}.lootsec h3 .chip img{width:30px;height:30px}
.lootsec .uses{font:500 11px 'JetBrains Mono';color:var(--mut)}
/* side drawer */
.drawer{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:none}
.drawer.on{display:block}
.drawer-box{position:absolute;right:0;top:0;bottom:0;width:min(1100px,92vw);background:var(--panel);border-left:1px solid var(--line2);overflow:auto;padding:24px 26px;box-shadow:-20px 0 40px rgba(0,0,0,.6)}
.drawer-x{position:sticky;top:0;float:right;background:var(--bg);border:1px solid var(--line2);color:var(--acc);width:36px;height:36px;font-size:22px;cursor:pointer;z-index:2}
.drawer-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.drawer-head .big:not(.itile){width:84px;height:84px;padding:8px;border:1px solid var(--line2)}
.drawer-head .dname{font:700 28px/1.1 Jost,sans-serif;text-decoration:none}
@media(max-width:700px){.drawer-box{width:100vw;padding:16px}}
/* compact unique cards */
.ucard{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;text-decoration:none;min-width:0;border:1px solid #4a3373;background:linear-gradient(135deg,rgba(168,116,255,.12),var(--bg) 60%);transition:border-color .12s}
.ucard:hover{border-color:var(--uq)}
.ucard img,.ucard .noicon{width:44px;height:44px;flex:none}
.ucard .ub{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.ucard .n{font-size:13px;font-weight:500;line-height:1.25;color:#d9c6ff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:18px}
.ucard .ut{position:absolute;top:5px;right:6px;font:600 10px 'JetBrains Mono';color:var(--acc2)}
.ucard .stats{display:flex;gap:5px;flex-wrap:wrap}
.st-b{display:inline-flex;align-items:center;gap:3px;font:600 11px 'JetBrains Mono';color:var(--mut);background:rgba(0,0,0,.35);border:1px solid var(--line);padding:1px 5px;cursor:help}
.st-b svg{width:12px;height:12px}
.st-b.pc{color:var(--uq);border-color:#4a3373}
.st-b.off{color:var(--line2)}
.ucard:hover .st-b{border-color:#5b3f8f}

/* augment types: one color per slot type, as in the in-game augment list */
:root{--aug-ranged:#ccc869;--aug-melee:#cf8376;--aug-armor:#71c4a3;--aug-misc:#6f9cd2} /* sampled from in-game augment icons */
.aug-ranged{--ac:var(--aug-ranged)}.aug-melee{--ac:var(--aug-melee)}.aug-armor{--ac:var(--aug-armor)}.aug-misc{--ac:var(--aug-misc)}
.ucard[class*="aug-"],.card[class*="aug-"]{border-color:color-mix(in srgb,var(--ac) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 16%,transparent),var(--bg) 62%)}
.ucard[class*="aug-"]:hover,.card[class*="aug-"]:hover{border-color:var(--ac)}
.ucard[class*="aug-"] .n,.card[class*="aug-"] .n,h1[class*="aug-"]{color:color-mix(in srgb,var(--ac) 55%,#fff)}
.ucard[class*="aug-"] .st-b.pc{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 40%,transparent)}
.chip[class*="aug-"]{border-color:color-mix(in srgb,var(--ac) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 18%,transparent),var(--bg) 70%)}
a.chip[class*="aug-"]:hover{border-color:var(--ac)}
.hero .big[class*="aug-"]:not(.itile){border-color:var(--ac);background:radial-gradient(circle,color-mix(in srgb,var(--ac) 35%,transparent) 0%,transparent 70%)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ac,var(--uq));box-shadow:0 0 6px var(--ac,var(--uq));flex:none}
.ut.aug{top:7px;right:8px;cursor:help}
.subf a{display:inline-flex;align-items:center;gap:6px}
.subf a.on{background:color-mix(in srgb,var(--ac,var(--acc)) 85%,#000);border-color:var(--ac,var(--acc));color:#111}
.augpill{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:1px 8px;border:1px solid color-mix(in srgb,var(--ac) 50%,transparent);color:var(--ac);text-decoration:none;text-transform:none;letter-spacing:0}
/* augment icons tinted with their type color, like in the game */
.tint{display:block;flex:none;width:46px;height:46px;background:var(--ac,var(--txt));-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.ucard .tint{width:44px;height:44px}
.node .chip .tint{width:40px;height:40px}
.tree .chip .tint,table.loot td.src .chip .tint{width:34px;height:34px}
.lootsec h3 .chip .tint{width:30px;height:30px}
.hero .big.tintbox{display:grid;place-items:center;border:1px solid var(--ac);background:radial-gradient(circle,color-mix(in srgb,var(--ac) 22%,transparent) 0%,transparent 70%)}
.hero .big.tintbox .tint{width:92px;height:92px}
/* round augment badge like in the game: colored ring with a dark gap, tinted glyph inside */
.augico{position:relative;display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ac) 14%,transparent) 0 58%,transparent 60%)}
.augico::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--ac);-webkit-mask:radial-gradient(circle closest-side,transparent 0 80%,#000 81% 97%,transparent 98%);mask:radial-gradient(circle closest-side,transparent 0 80%,#000 81% 97%,transparent 98%)}
.augico .tint{width:68%!important;height:68%!important}
.ucard .augico{width:44px;height:44px}
.node .chip .augico{width:40px;height:40px}
table.loot td.src .chip .augico,.tree .chip .augico{width:34px;height:34px}
.lootsec h3 .chip .augico{width:30px;height:30px}
.hero .big.tintbox .augico{width:96px;height:96px}
.chip.m-icon .augico+.qty{right:0}

/* ===== game-like inventory tiles (sampled from in-game inventory) ===== */
.itile{--s:46px;position:relative;display:grid;place-items:center;flex:none;width:var(--s);height:var(--s);overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.itile img{width:88%;height:88%;object-fit:contain;display:block}
.itile .noicon{border:0;width:auto;height:auto}
.r-common{background:linear-gradient(180deg,#12110e 0%,#26241c 48%,#524e3c 100%)}
.r-unique{background:linear-gradient(180deg,#392d52 0%,#261d38 58%,#0d0816 100%);border-color:rgba(168,116,255,.35)}
.r-schem,.r-aug{background:
  repeating-linear-gradient(90deg,rgba(160,120,230,.10) 0 1px,transparent 1px 12px),
  repeating-linear-gradient(0deg,rgba(160,120,230,.07) 0 1px,transparent 1px 12px),
  linear-gradient(180deg,#0c0913 0%,#211a31 60%,#42345e 100%)}
.r-schem::after,.r-aug::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16%;background:repeating-linear-gradient(90deg,rgba(170,130,240,.55) 0 1px,transparent 1px 6px);opacity:.6;pointer-events:none}
.r-schem{border-color:rgba(168,116,255,.3)}
.holo{display:grid;place-items:center;width:86%;height:86%;filter:drop-shadow(0 0 3px rgba(190,140,255,.85))}
.holo .tint{--ac:#e2c3ee;width:100%!important;height:100%!important}
.itile .augico{width:88%;height:88%;background:none}
/* the augment ring is 5 segments (= levels 1-5); full ring = all segments lit */
.augico::before{background:repeating-conic-gradient(from -36deg,var(--ac) 0 64deg,transparent 64deg 72deg)!important}
.augico .tint{width:62%!important;height:62%!important}
/* sizes per context */
.chip .itile{--s:46px}
.node .chip .itile{--s:40px}
.node.final .chip .itile{--s:56px}
table.loot td.src .chip .itile,.tree .chip .itile,.used a .itile{--s:34px}
.lootsec h3 .chip .itile{--s:30px}
.ucard .itile{--s:46px}
.card .itile{--s:52px}
.hero .itile.big,.drawer-head .itile.big{--s:118px;padding:0;border-width:1px}
.drawer-head .itile.big{--s:84px}
.hero .itile.big.r-unique{border-color:var(--uq)}
.hero .itile.big[class*="aug-"]{border-color:var(--ac)}
/* chips no longer need their own icon frame */
.chip{gap:8px}
.chip.m-icon{padding:3px}
.chip.m-icon .qty{right:6px;bottom:4px}
.vehf a.on{background:var(--acc2);border-color:var(--acc2);color:#111}

/* merged level variants: "мод. 3 4 5 6" */
.ucard{cursor:pointer}
.ucard a.n{text-decoration:none}
.card .cb{display:flex;flex-direction:column;gap:4px;min-width:0}
.card a{text-decoration:none}
.card a.n:hover,.ucard a.n:hover{text-decoration:none}
.mods{display:flex;align-items:center;flex-wrap:wrap;gap:3px}
.mods .ml{font:500 10px Manrope;color:var(--mut);margin-right:2px}
.mods a{min-width:20px;text-align:center;padding:0 4px;font:600 11px 'JetBrains Mono';color:var(--txt);background:rgba(0,0,0,.35);border:1px solid var(--line2);text-decoration:none;line-height:16px}
.mods a:hover{border-color:var(--acc);color:var(--acc)}
.ucard .mods a{border-color:#5b3f8f}.ucard .mods a:hover{border-color:var(--uq);color:#d9c6ff}

/* compact catalog cards: tier badge in the corner, name max 2 lines */
.grid:has(.cc){grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px}
.card.cc{position:relative;padding:8px 10px;gap:10px;align-items:center}
.card.cc .itile{--s:46px}
.card.cc .cb{gap:5px;flex:1}
.card.cc .n{font-size:13px;font-weight:500;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:22px}
.card .ut,.ucard .ut{position:absolute;top:4px;right:6px;font:600 10px 'JetBrains Mono';color:var(--acc2);letter-spacing:.3px;cursor:default}
.card.cc .mods a{line-height:15px}
.ucard .n{padding-right:30px}

/* panels with a search box: clip-path would cut off the suggestion list */
.panel:has(.searchbox){clip-path:none;overflow:visible;position:relative;z-index:5}

/* deep desert map */
.mapbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.layouts{display:flex;gap:4px;flex-wrap:wrap}
.layouts button{min-width:38px;padding:5px 8px;background:var(--bg);border:1px solid var(--line);color:var(--mut);font:600 13px 'JetBrains Mono';cursor:pointer}
.layouts button:hover{border-color:var(--line2);color:var(--txt)}
.layouts button.on{background:var(--acc);border-color:var(--acc);color:#1a1108}
.layouts button.now{position:relative;color:var(--txt);border-color:#6fbf73}
.layouts button.now::after{content:"";position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:#6fbf73;box-shadow:0 0 0 2px var(--bg)}
.mapwrap.full{position:fixed;inset:0;z-index:200;margin:0;max-width:none;width:auto;border-radius:0;overflow:hidden;padding:12px 16px}
.mapwrap.full .mapnotes{display:none}
body.map-full{overflow:hidden}
.mapwrap.full .maplayers{max-height:calc(100vh - 80px);overflow:auto}
.layouts button.dim{opacity:.6}
.mapgrid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px}
.mapbox{position:relative;border:1px solid var(--line2);background:#120d08;overflow:hidden}
.mapbox canvas{display:block;cursor:grab;touch-action:none}
.mapbox canvas.dragging{cursor:grabbing}
.mapctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px}
.mapctl button{width:34px;height:34px;background:rgba(17,13,9,.85);border:1px solid var(--line2);color:var(--acc);font:700 18px Manrope;cursor:pointer}
.maplayers h3{margin:0 0 10px;font:700 17px Jost,sans-serif;color:var(--acc)}
.maplayers label{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;cursor:pointer;color:var(--txt)}
.maplayers label input{display:none}
.maplayers label i{width:14px;height:14px;border:1px solid var(--line2);flex:none;position:relative}
.maplayers label input:checked+i{background:var(--lc,var(--acc));border-color:var(--lc,var(--acc))}
.maplayers label b{margin-left:auto;font:500 11px 'JetBrains Mono';color:var(--mut)}
.ml-spice_m{--lc:#ff8a2a}.ml-spice_s{--lc:#e6b04a}.ml-flour{--lc:#d9ccb0}.ml-wreck{--lc:#9fb3c8}
.ml-station{--lc:#a874ff}.ml-wrecksite{--lc:#9fb3c8}.ml-spicearea{--lc:rgba(255,138,42,.6)}.ml-ramp{--lc:#7fb069}.ml-grid{--lc:var(--acc)}
@media(max-width:1000px){.mapgrid{grid-template-columns:1fr}}
.maplayers label{font-size:12.5px}.maplayers label b{flex:none}
/* map v2: layer list on the left like in-game filters */
.mapgrid{grid-template-columns:270px minmax(0,1fr)}
.lgroup{margin-bottom:14px}
.lgroup h3{font:600 11px Manrope;color:var(--mut);text-transform:uppercase;letter-spacing:1.5px;margin:0 0 6px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.maplayers label{gap:10px;padding:6px 8px;border:1px solid transparent}
.maplayers label:hover{background:rgba(255,255,255,.03)}
.maplayers label:has(input:checked){background:rgba(224,162,69,.07);border-color:var(--line)}
.maplayers label:not(:has(input:checked)){opacity:.5}
.maplayers .mk{width:26px;height:26px;display:grid;place-items:center;flex:none;background:var(--mc,#555);border-radius:50%;border:2px solid var(--mr,rgba(0,0,0,.5));color:#fff;font:700 13px Manrope}
.maplayers .mk img{width:62%;height:62%}
.ml-spice_m .mk,.ml-spice_s .mk,.ml-spicearea .mk,.ml-flour .mk{border-radius:3px;transform:rotate(45deg);width:20px;height:20px;margin:0 3px}
.ml-spice_m .mk img,.ml-spice_s .mk img,.ml-spicearea .mk img,.ml-flour .mk img{transform:rotate(-45deg)}
.ml-spice_m{--mc:#9b4fd6}.ml-spice_s{--mc:#b77ee6}.ml-spicearea{--mc:#6d2fa0}.ml-flour{--mc:#d8c39a}
.ml-wreck{--mc:#3f6b2a;--mr:#9bd36a}.ml-station{--mc:#2b4f8c;--mr:#7fb1ff}.ml-wrecksite{--mc:#5a4630;--mr:#e0a245}.ml-ramp{--mc:#4a4a4a;--mr:#cfcfcf}.ml-grid{--mc:#8a6a40}
.maplayers label i{display:none}
.maplayers .lt{flex:1}
.mapnotes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px;font-size:12px}
.mapnotes h3{margin:0 0 6px;font:700 16px Jost,sans-serif;color:var(--acc)}
.mapbox{background:#120d08;align-self:start}
@media(max-width:1000px){.mapgrid{grid-template-columns:1fr}.mapnotes{grid-template-columns:1fr}}
.ml-cave{--mc:#6b3424;--mr:#e8835f}.ml-spice_l{--mc:#6d2fa0}.ml-erythrite{--mc:#8a2846}.ml-sandfly{--mc:#4a3a1a;--mr:#d4b45a}
.ml-spice_l .mk,.ml-erythrite .mk{border-radius:3px;transform:rotate(45deg);width:20px;height:20px;margin:0 3px}
.ml-spice_l .mk img,.ml-erythrite .mk img{transform:rotate(-45deg)}
.maplayers label b{font:600 11px Manrope}.maplayers label.empty{opacity:.35}
.mapinfo .mi-title{font:700 30px/1.1 Jost,sans-serif;color:#f5e6cc;margin:4px 0 6px;display:block}
.mapinfo .mi-title:after{display:none}
.mapinfo .mi-ultra{color:#ffd34d;font-weight:600;margin:4px 0}
.mapinfo .mi-chests{display:flex;flex-wrap:wrap;gap:6px}
.mapinfo .mi-chests .chip{font-size:12px;padding:3px 8px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.mapinfo .mi-chests .chip b{font-family:Manrope,sans-serif}
.mapinfo .mi-chests .c-ultra{border-color:#ffd34d;color:#ffd34d}
.mapinfo .mi-chests .c-rare{border-color:#7fb1ff}
.mapinfo .mi-chests .c-intel{border-color:#7fe0ea;color:#7fe0ea}
.ml-chest_ultra{--mc:#5b2a86;--mr:#ffd34d}.ml-chest_ultra .mk,.ml-intel .mk{border-radius:5px}
.ml-intel{--mc:#1f5a63;--mr:#7fe0ea}
.mapinfo .lootsec h3 a{color:var(--acc);text-decoration:none}
.mapbox canvas{cursor:pointer}
.uqsec{border:1px solid #4a3373;background:linear-gradient(135deg,rgba(168,116,255,.08),transparent 60%);padding:12px;margin:14px 0}
.uqsec h3{display:flex;gap:10px;align-items:baseline}
details.allloot{margin-top:12px}
details.allloot summary{cursor:pointer;color:var(--acc);font:600 14px Manrope;padding:6px 0}
/* layer panel: inner padding so the list doesn't stick to the panel edges */
.maplayers{padding:14px 12px 10px;border:1px solid var(--line);align-self:start}
.lgroup h3{padding-left:2px}
/* fullscreen map sits under the info drawer and the tooltip */
.mapwrap.full{z-index:66}
#tip{z-index:80}
.ml-ore_titanium{--mc:#3d6f86;--mr:#9fd8ee}.ml-ore_stravidium{--mc:#6a3d8a;--mr:#d3a6f2}.ml-ore_aluminium{--mc:#7a6a55;--mr:#e6d6b8}.ml-ore_copper{--mc:#2f6b5a;--mr:#7fe0b8}.ml-ore_iron{--mc:#5a4a44;--mr:#c9a89a}
.ml-ore_carbon{--mc:#33302e;--mr:#a9a29a}.ml-ore_granite{--mc:#6e5f57;--mr:#e0c8bb}.ml-ore_basalt{--mc:#3c4148;--mr:#9aa6b5}
/* page column: footer pinned to the bottom on short pages */
.wrap>.pagecol{display:flex;flex-direction:column;min-height:100vh;min-width:0}
.wrap>.pagecol>main{flex:1 0 auto}
footer.site{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:30px;align-items:start;text-align:left;margin:10px 30px 0;padding:22px 0 26px;border-top:1px solid var(--line);font-size:13px}
footer.site p{margin:6px 0 0;line-height:1.5}
.foot-logo{font:700 20px Jost,sans-serif;color:var(--acc);text-decoration:none;letter-spacing:1px}
footer.site .feedback h3{margin:0 0 10px;font:600 11px Manrope;color:var(--mut);text-transform:uppercase;letter-spacing:1.5px}
.feedback input,.feedback textarea{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:8px 10px;font:13px Manrope;border-radius:0}
.feedback input:focus,.feedback textarea:focus{outline:none;border-color:var(--acc)}
.feedback textarea{resize:vertical;margin:8px 0;display:block}
.fb-row{display:flex;gap:8px}
.fb-captcha img{flex:none;width:150px;height:38px;object-fit:cover;cursor:pointer;border:1px solid var(--line);background:#22180f}
.fb-captcha input{width:auto;flex:1;text-transform:uppercase;letter-spacing:3px;font-family:'JetBrains Mono'}
.fb-captcha .btn{flex:none}
.feedback .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fb-status{min-height:18px;margin-top:6px;color:#8fd18f}
.fb-status.err{color:#e58a7a}
@media(max-width:800px){footer.site{grid-template-columns:1fr;margin:10px 16px 0}.fb-row{flex-wrap:wrap}.fb-captcha input{min-width:120px}}
/* admin */
.admin-nav{display:flex;gap:6px;align-items:center;margin:0 0 18px;flex-wrap:wrap}
.admin-nav a{padding:6px 12px;border:1px solid var(--line);color:var(--txt);text-decoration:none}
.admin-nav a.on{border-color:var(--acc);color:var(--acc)}
.admin-nav a b{background:var(--acc);color:#1a1108;padding:0 6px;margin-left:4px;font-size:12px}
.admin-nav form{margin-left:auto}
.fb-item{border:1px solid var(--line2);padding:12px 14px;margin-bottom:10px;background:rgba(224,162,69,.05)}
.fb-item.read{background:none;border-color:var(--line);opacity:.75}
.fb-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px}
.fb-head a{color:var(--acc)}
.fb-actions{margin-left:auto;display:flex;gap:6px}
.fb-actions .btn{padding:4px 10px;font-size:12px}
.fb-text{margin-top:8px;white-space:pre-wrap;word-break:break-word}
.fb-captcha{align-items:stretch}
.fb-captcha input,.fb-captcha .btn,.fb-captcha img{height:38px;box-sizing:border-box}
.fb-captcha .btn{padding-top:0;padding-bottom:0}
.fb-captcha input,.fb-captcha .btn,.fb-captcha img{height:46px;margin:0}
.fb-captcha img{width:138px;object-fit:fill}
/* footer: one line with links; the feedback form lives on its own page */
footer.site{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;padding:16px 0 20px}
footer.site .foot-note{margin:0;flex:1;min-width:240px;color:var(--mut)}
footer.site .foot-links{display:flex;gap:18px}
footer.site .foot-links a{color:var(--acc)}
.feedback-page .feedback{max-width:720px;margin-top:6px}
.feedback-page .fb-row input{flex:1}
.adm-sub{margin:28px 0 4px;font:700 17px Jost,sans-serif;color:var(--acc)}
.admin-box textarea.adm-text{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:8px 12px;font:13px 'JetBrains Mono',monospace;resize:vertical}
.admin-box textarea.adm-text:focus{outline:none;border-color:var(--acc)}
/* item stats */
.statwrap{overflow-x:auto}
table.stats{border-collapse:collapse;min-width:min(100%,520px);font-size:14px}
table.stats th{font:600 11px Manrope;color:var(--mut);text-transform:uppercase;letter-spacing:1px;padding:4px 12px 8px;text-align:right}
table.stats th a{color:var(--mut)}
table.stats td{padding:7px 12px;border-top:1px solid var(--line)}
table.stats td.k{color:var(--mut);padding-left:0}
table.stats td.v{text-align:right;font-family:'JetBrains Mono',monospace;white-space:nowrap;color:var(--txt)}
table.stats td.v.muted{color:var(--mut)}
table.stats td.up{color:#8fd18f}
table.stats td.down{color:#e58a7a}
/* loot table filters */
.kindbar{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.kindbar button{background:var(--bg);border:1px solid var(--line);color:var(--mut);padding:5px 11px;font:500 13px Manrope;cursor:pointer}
.kindbar button b{font:600 11px 'JetBrains Mono';color:var(--mut);margin-left:3px}
.kindbar button:hover{border-color:var(--line2);color:var(--txt)}
.kindbar button.on{border-color:var(--acc);color:var(--acc)}
.kindbar button.on b{color:var(--acc)}
.kindbar .k-unique{border-color:rgba(168,116,255,.45)}
.kindbar .k-unique.on{border-color:#a874ff;color:#c7a6ff}
.kindbar .k-schematic_unique{border-color:rgba(168,116,255,.3)}.kindbar .k-schematic_unique.on{border-color:#a874ff;color:#c7a6ff}
/* mobile: bottom tab bar replaces the side menu */
.tabbar{display:none}
@media(max-width:1000px){
  .wrap>aside{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;background:rgba(18,13,8,.97);border-top:1px solid var(--line2);padding:4px 4px calc(4px + env(safe-area-inset-bottom));backdrop-filter:blur(8px)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 4px;color:var(--mut);text-decoration:none;font:500 10.5px Manrope;min-width:0;-webkit-tap-highlight-color:transparent}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar a.on{color:var(--acc)}
  .tabbar a.on svg{filter:drop-shadow(0 0 6px rgba(224,162,69,.45))}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .mapwrap.full{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
/* map page: world tabs + storm timer; layers left on desktop, under the map on phones */
.mapbar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:12px}
.maptabs{display:flex;gap:4px}
.maptabs a{padding:7px 14px;border:1px solid var(--line);color:var(--mut);text-decoration:none;font:600 13px Manrope}
.maptabs a:hover{color:var(--txt);border-color:var(--line2)}
.maptabs a.on{background:var(--acc);border-color:var(--acc);color:#1a1108}
.storm{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut)}
.storm select{background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:5px 8px;font:13px Manrope}
.storm-t{font:700 15px 'JetBrains Mono';color:var(--acc);white-space:nowrap}
.mapgrid>.maplayers{order:-1}
@media(max-width:1000px){.mapgrid>.maplayers{order:0}.storm-l{display:none}.storm::before{content:"🌪";font-size:15px}}
.ml-tradepost{--mc:#2e6b4a;--mr:#8fe3b0}.ml-trainer{--mc:#6b4a1f;--mr:#f2c46b}.ml-house{--mc:#5a2f5f;--mr:#d9a6e8}.ml-fortress{--mc:#7a2a22;--mr:#ff9a7a}.ml-sietch{--mc:#3a5a7a;--mr:#9fd0ff}.ml-outpost{--mc:#5a3a2a;--mr:#e0a080}.ml-poi{--mc:#4a4a3a;--mr:#e6dca0}.ml-camp{--mc:#4a2a22;--mr:#c87a5a}
/* schematic pages: they share name and icon with the item they unlock */
.schem-tag{display:inline-block;vertical-align:middle;margin-right:10px;padding:2px 8px;border:1px solid currentColor;font:600 12px Manrope;letter-spacing:1px;text-transform:uppercase;opacity:.8;position:relative;top:-3px}
.needschem{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:2px 0 12px;color:var(--mut);font-size:14px}
.qtabs{display:flex;align-items:center;gap:6px;margin:0 0 10px;color:var(--mut);font-size:13px}
.qtabs button{min-width:34px;padding:4px 10px;background:var(--bg);border:1px solid var(--line);color:var(--mut);font:600 13px 'JetBrains Mono';cursor:pointer}
.qtabs button.on{background:var(--acc);border-color:var(--acc);color:#1a1108}
.qset{align-items:center}
.qwater{color:var(--mut);font-size:13px;margin-left:6px}.qwater b{color:var(--acc);font-family:'JetBrains Mono'}
.qset[hidden]{display:none}
/* page h1 that looks like a panel title */
h1.ph{font:700 20px Jost,sans-serif;color:var(--acc);letter-spacing:1px;margin:0 0 16px;display:flex;align-items:center;gap:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1.ph:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
h1.ph .hint{font:400 13px Manrope;color:var(--mut);letter-spacing:0;order:2}
h1.ph.uqh{color:var(--uq)}
@media(max-width:1000px){h1.ph{flex-wrap:wrap}h1.ph .hint{flex-basis:100%;order:3}h1.ph:after{display:none}}
/* layer list: badges at half size */
.maplayers .mk{width:14px;height:14px;border-width:1.5px;font-size:8px}
.maplayers .mk img{width:72%;height:72%}
.ml-spice_m .mk,.ml-spice_s .mk,.ml-spicearea .mk,.ml-flour .mk{width:11px;height:11px;margin:0 1.5px}
.storm-r{color:var(--mut)}@media(max-width:1000px){.storm-r{display:none}}

/* ================= THEME «Arrakis night» (2026-10): dark cinematic, thin wide type, gold light ================= */
:root{--bg:#070605;--side:#0a0807;--panel:#0e0a08;--panel2:#141009;--line:#2a2019;--line2:#4b3826;--txt:#efe2cc;--mut:#a8977e;--acc:#e8b878;--acc2:#d08a4a;--gold2:#f6d9a8}
body{background:#070605 radial-gradient(ellipse 90% 60% at 65% -15%,rgba(150,78,32,.28),transparent 62%) fixed;font-family:Manrope,sans-serif;font-size:15px}
::selection{background:rgba(232,184,120,.35);color:#fff}

/* logo: thin wide letters + the «flare» like the game logo dot */
.logo{font:300 19px/1 Jost,sans-serif;letter-spacing:.55em;color:var(--txt);padding:2px 24px 0}
.logo-w{display:flex;align-items:center;gap:12px}
.logo .flare{position:relative;flex:none;width:46px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(246,217,168,.9) 45%,rgba(246,217,168,.9) 55%,transparent)}
.logo .flare::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#0a0807;box-shadow:0 0 0 1.4px rgba(246,217,168,.9),0 0 12px 3px rgba(255,210,150,.45)}
.logo small{font:400 9.5px Jost,sans-serif;letter-spacing:.42em;color:var(--mut);margin-top:9px}

/* sidebar menu */
.wrap>aside{background:linear-gradient(180deg,#0b0907,#080706);border-right:1px solid var(--line)}
aside nav a{font:400 12.5px Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:12px 24px;color:#b9a68a}
aside nav a.on{color:var(--gold2);background:linear-gradient(90deg,rgba(232,184,120,.10),transparent);border-color:var(--acc)}
aside nav a:hover{color:var(--gold2)}

/* headings: thin uppercase with tracking */
h1{font:300 34px/1.15 Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f7ecdb}
h2,h1.ph{font:400 15px Jost,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--acc)}
h2 .hint,h1.ph .hint{letter-spacing:.02em;text-transform:none}
h2:after,h1.ph:after{background:linear-gradient(90deg,rgba(232,184,120,.35),transparent)}
h1.uqt{color:#e2d2ff}

/* panels: dark glass, hairline borders */
.panel{background:linear-gradient(180deg,rgba(22,16,11,.86),rgba(12,9,7,.88));border-color:var(--line);backdrop-filter:blur(4px)}
.tier{font-family:Jost,sans-serif;letter-spacing:.24em}
.btn{font-family:Jost,sans-serif;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px}
.top{border-bottom-color:var(--line)}
.search{background-color:rgba(10,8,6,.75);border-color:var(--line2)}
.search:focus{border-color:var(--acc)}
.suggest{background:#0c0907}
footer.site{border-top-color:var(--line)}
.foot-logo{font:300 16px Jost,sans-serif;letter-spacing:.5em;color:var(--txt)}
.tabbar{background:rgba(8,6,5,.94)}
.tabbar a{font-family:Jost,sans-serif;letter-spacing:.08em}

/* ================= home scene ================= */
.scene-hero{grid-column:1/-1;position:relative;overflow:hidden;height:clamp(640px,86vh,860px);margin:-26px -30px 4px;background:#060505;isolation:isolate}
.scene-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sc-layer{position:absolute;will-change:transform}
.sc-city{left:-80px;width:calc(100% + 160px);max-width:none;height:auto;bottom:70px;filter:brightness(.42) contrast(1.12) saturate(.9);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 30%,#000 55%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 30%,#000 55%,#000 72%,transparent 100%)}
.sc-ground{left:-40px;right:-40px;bottom:0;height:260px;width:calc(100% + 80px)}
.sc-fog{position:absolute;left:-20%;width:140%;height:240px;border-radius:50%;filter:blur(40px);pointer-events:none}
.sc-fog.a{bottom:150px;background:radial-gradient(ellipse at center,rgba(214,150,90,.28),rgba(214,150,90,0) 70%);animation:scfog 80s ease-in-out infinite alternate}
.sc-fog.b{bottom:60px;background:radial-gradient(ellipse at center,rgba(120,72,40,.4),rgba(120,72,40,0) 70%);animation:scfog 120s ease-in-out infinite alternate-reverse}
@keyframes scfog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.sc-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,6,5,0) 55%,rgba(7,6,5,.85) 84%,#070605 100%);pointer-events:none}

.sc-center{position:absolute;z-index:3;left:0;right:0;top:34%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding:0 24px}
.sc-center::before{content:"";position:absolute;z-index:-1;left:50%;top:-40px;width:min(1000px,120%);height:440px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(6,4,3,.62),rgba(6,4,3,0) 68%);pointer-events:none}
.sc-kicker{font:400 11px Jost,sans-serif;letter-spacing:.55em;text-transform:uppercase;color:var(--acc)}
.sc-title{margin:0;font:200 clamp(38px,5vw,70px)/1.08 Jost,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#f7ecdb;text-shadow:0 0 40px rgba(0,0,0,.6)}
.sc-title b{font-weight:400;background:linear-gradient(180deg,#fff4df,#d9a868);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-sub{margin:0;max-width:600px;font-size:16.5px;line-height:1.7;color:#d4c3a8}
.sc-center .searchbox{width:min(580px,100%);max-width:none;margin-top:4px;text-align:left}
.sc-center .search{padding:16px 20px 16px 44px;font-size:15.5px;background-color:rgba(10,8,6,.6);backdrop-filter:blur(10px);border-color:rgba(232,184,120,.32);clip-path:none;background-position:16px center}

.sc-storm{position:absolute;z-index:3;right:40px;top:36px;display:flex;align-items:center;gap:14px;text-decoration:none}
.sc-storm svg{width:56px;height:56px;transform:rotate(-90deg);flex:none}
.sc-storm .bg{fill:none;stroke:rgba(232,184,120,.18);stroke-width:1.2}
.sc-storm .arc{fill:none;stroke:#f0c483;stroke-width:1.6;stroke-linecap:round;transition:stroke-dashoffset 1s}
.sc-storm .k{display:block;font:400 10px Jost,sans-serif;letter-spacing:.4em;text-transform:uppercase;color:var(--acc)}
.sc-storm .v{display:block;font:300 23px Jost,sans-serif;letter-spacing:.08em;color:#f7ecdb;margin-top:3px}
.sc-storm .r{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}

.sc-cards{position:absolute;z-index:3;left:40px;right:40px;bottom:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(232,184,120,.22);border:1px solid rgba(232,184,120,.22)}
.sc-cards a{padding:20px 22px;background:rgba(8,6,5,.78);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:6px;text-decoration:none;transition:background .4s}
.sc-cards a:hover{background:rgba(32,22,13,.85)}
.sc-cards .n{font:300 11px Jost,sans-serif;letter-spacing:.35em;color:var(--acc)}
.sc-cards .t{font:300 17px Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f7ecdb}
.sc-cards .d{font-size:13px;line-height:1.5;color:var(--mut)}
.sc-cards .uq .t{color:#dccbff}.sc-cards .uq .n{color:#b99cff}
@media(max-width:1000px){
  .scene-hero{margin:-16px -16px 4px;height:auto;min-height:760px}
  .sc-center{top:150px;gap:16px}
  .sc-storm{right:auto;left:20px;top:auto;bottom:228px}
  .sc-cards{grid-template-columns:repeat(2,minmax(0,1fr));left:16px;right:16px;bottom:16px}
  .sc-cards a{padding:14px 16px}.sc-cards .d{display:none}
  .sc-city{width:260%;left:-80%;bottom:200px}
}
@media (prefers-reduced-motion:reduce){.sc-fog{animation:none}}
/* former bold serif titles, in the thin geometric style */
.flow h3 b,.tile b,.srccard.place b,.drawer .dname,.mi-title,.adm-sub{font-family:Jost,sans-serif;font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.flow h3 b{font-size:15px;color:#f7ecdb}
.tile b{font-size:14px;letter-spacing:.12em;color:#f2e4cc}
.srccard.place b{font-size:15px}
.mi-title{font-size:24px;font-weight:300;letter-spacing:.1em}
.chip .noicon,.card .noicon{font-weight:300}
.mapinfo .mi-title,.drawer-head .dname{font-family:Jost,sans-serif;font-weight:300;letter-spacing:.1em;text-transform:uppercase;font-size:24px}
.logo-m{display:none}
@media(max-width:1000px){.logo-m{display:block;padding:0;font-size:15px;letter-spacing:.45em;margin-right:auto}.logo-m .flare{width:30px}.top{flex-wrap:wrap;row-gap:10px}.top .searchbox{order:3;flex-basis:100%;max-width:none}}