@font-face{font-family:'Oswald';src:url('fonts/oswald-v57-latin-500.woff2') format('woff2');font-weight:500;font-display:optional;}
@font-face{font-family:'Oswald';src:url('fonts/oswald-v57-latin-600.woff2') format('woff2');font-weight:600;font-display:optional;}
@font-face{font-family:'Oswald';src:url('fonts/oswald-v57-latin-700.woff2') format('woff2');font-weight:700;font-display:optional;}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-display:optional;}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-display:optional;}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-600.woff2') format('woff2');font-weight:600;font-display:optional;}

:root{
  --bg:#14171a;
  --panel:#1b1f1c;
  --panel-2:#20241f;
  --olive:#4a5240;
  --olive-light:#6b7358;
  --rust:#c1502e;
  --amber:#c9a227;
  --paper:#d8d2c4;
  --paper-dim:#9a9689;
  --line:#33362f;
  --danger:#8f2c22;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:'IBM Plex Mono',monospace;
  padding:32px clamp(16px, 4vw, 64px) 100px;
}
.wrap{width:100%;}
.tab{
  display:inline-block;
  background:var(--rust);
  color:#1a0d08;
  font-family:'Oswald',sans-serif;
  font-weight:600;
  letter-spacing:.08em;
  font-size:12px;
  line-height:1;
  text-transform:uppercase;
  padding:6px 12px;
  text-decoration:none;
}
a.tab:hover{background:var(--amber);}
.tab-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:-3px;
}
.topbar{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:4px;
}
.topbar-right{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  align-items:flex-start;
}
.trader-btn{
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--amber);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  padding:7px 10px;
  cursor:pointer;
  white-space:nowrap;
}
.trader-btn:hover{border-color:var(--rust);}
a.trader-btn{display:inline-block;text-decoration:none;}
.search-wrap{
  position:relative;
  width:min(220px, 100%);
}
.search-wrap input{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--paper);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  padding:7px 10px;
  outline:none;
}
.search-wrap input:focus{border-color:var(--rust);outline:2px solid var(--amber);outline-offset:1px;}
.search-results{
  position:absolute;
  top:100%;left:0;right:0;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-top:none;
  z-index:5;
  display:none;
}
.search-results.open{display:block;}
.search-results div{
  padding:7px 10px;
  font-size:12px;
  cursor:pointer;
  color:var(--paper-dim);
}
.search-results div:hover, .search-results div.active{
  background:var(--olive);
  color:var(--paper);
}
.search-results .none{cursor:default;}
.search-results .none:hover{background:none;color:var(--paper-dim);}
header{
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--rust);
  padding:24px 24px 20px;
}
h1{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:30px;
  margin:8px 0 4px;
  color:var(--paper);
}
section{margin-top:28px;}
.section-label{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:13px;
  color:var(--amber);
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.section-label:before{content:"";width:8px;height:8px;background:var(--rust);display:inline-block;}
.section-hint{
  font-size:11px;
  color:var(--paper-dim);
  margin:0 0 16px;
}
footer{
  margin-top:32px;
  font-size:10.5px;
  color:var(--paper-dim);
  text-align:center;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.raid-tray{
  position:fixed;
  bottom:0;
  left:clamp(16px, 4vw, 64px);
  right:clamp(16px, 4vw, 64px);
  z-index:40;
  font-family:'IBM Plex Mono',monospace;
}
.raid-tray-bar{
  width:100%;
  background:var(--panel);
  border-top:3px solid var(--rust);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.raid-tray-toggle{
  flex:1;
  color:var(--amber);
  font-family:inherit;
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.raid-tray-infil{
  background:none;
  border:1px solid var(--olive-light);
  color:var(--amber);
  font-family:inherit;
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:5px 12px;
  cursor:pointer;
}
.raid-tray-infil:hover{border-color:var(--rust);color:var(--paper);}
.raid-tray-compact{
  background:none;
  border:1px solid var(--olive-light);
  color:var(--amber);
  font-family:inherit;
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:5px 12px;
  cursor:pointer;
}
.raid-tray-compact:hover{border-color:var(--rust);color:var(--paper);}
.raid-tray.names-only .raid-tray-item-sub{display:none;}
.raid-tray.names-only .raid-tray-detail{display:none !important;}
.raid-tray.names-only .raid-tray-item-head{padding-top:10px;padding-bottom:10px;}
.raid-tray.infil .raid-tray-panel{max-height:none;}
.raid-tray.infil .raid-tray-infil{border-color:var(--danger);color:#e8a49c;}
.raid-tray.infil .raid-tray-infil:hover{background:var(--danger);color:#fff;}
.raid-tray.infil-lg .raid-tray-item-head{padding:22px 24px;}
.raid-tray.infil-lg .raid-tray-item-name{font-size:20px;}
.raid-tray.infil-lg .raid-tray-item-sub{font-size:13px;}
.raid-tray.infil-lg .raid-tray-detail{font-size:14.5px;padding:0 24px 24px;line-height:1.8;}
.raid-tray.infil-lg .raid-tray-remove{font-size:12px;padding:5px 12px;}
.raid-tray.infil-lg .raid-tray-move{font-size:12px;padding:5px 12px;}
.raid-tray.infil-md .raid-tray-item-head{padding:14px 18px;}
.raid-tray.infil-md .raid-tray-item-name{font-size:15px;}
.raid-tray.infil-md .raid-tray-item-sub{font-size:11px;}
.raid-tray.infil-md .raid-tray-detail{font-size:12px;padding:0 18px 16px;line-height:1.6;}
.raid-tray.infil-md .raid-tray-remove{font-size:10px;padding:4px 10px;}
.raid-tray.infil-md .raid-tray-move{font-size:10px;padding:4px 10px;}
.raid-tray.infil-sm .raid-tray-item-head{padding:8px 14px;}
.raid-tray.infil-sm .raid-tray-item-name{font-size:12.5px;}
.raid-tray.infil-sm .raid-tray-item-sub{font-size:9.5px;}
.raid-tray.infil-sm .raid-tray-detail{font-size:11px;padding:0 14px 12px;line-height:1.4;}
.raid-tray.infil-sm .raid-tray-remove{font-size:9px;padding:2px 7px;}
.raid-tray.infil-sm .raid-tray-move{font-size:9px;padding:2px 7px;}
.raid-tray-count{
  background:var(--rust);
  color:#1a0d08;
  font-weight:600;
  padding:1px 8px;
  font-size:11px;
  margin-left:auto;
  cursor:pointer;
}
.raid-tray-count:hover{background:var(--danger);color:#fff;}
.raid-tray-panel{
  display:none;
  max-height:45vh;
  overflow-y:auto;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}
.raid-tray.open .raid-tray-panel{display:block;}
.raid-tray-item{border-bottom:1px solid var(--line);}
.raid-tray-item-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 16px;
  cursor:pointer;
}
.raid-tray-item-name{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  font-size:12.5px;
  color:var(--paper);
}
.raid-tray-item-sub{
  font-size:10.5px;
  color:var(--paper-dim);
}
.raid-tray-item-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.raid-tray-move{
  background:none;
  border:1px solid var(--olive-light);
  color:var(--amber);
  font-size:10px;
  padding:2px 7px;
  cursor:pointer;
}
.raid-tray-move:hover:not(:disabled){border-color:var(--rust);color:var(--paper);}
.raid-tray-move:disabled{opacity:.3;cursor:default;}
.raid-tray-remove{
  background:none;
  border:1px solid var(--danger);
  color:#e8a49c;
  font-size:10px;
  padding:2px 7px;
  cursor:pointer;
}
.raid-tray-remove:hover{background:var(--danger);color:#fff;}
.raid-tray-detail{
  display:none;
  padding:0 16px 14px;
  font-size:11.5px;
  color:var(--paper-dim);
  line-height:1.6;
}
.raid-tray-item.expanded .raid-tray-detail{display:block;}
.raid-tray-detail b{color:var(--amber);}
.raid-tray-detail .rt-row{margin-bottom:4px;}
.raid-tray-empty{
  padding:16px;
  text-align:center;
  font-size:11px;
  color:var(--paper-dim);
}

.mobile-menu-wrap{position:relative;display:none;}
.mobile-menu-btn{
  background:var(--panel-2);
  border:1px solid var(--olive-light);
  color:var(--amber);
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  padding:9px 13px;
  cursor:pointer;
}
.mobile-menu-btn:hover{border-color:var(--rust);color:var(--paper);}
.mobile-menu-panel{
  display:none;
  position:absolute;
  top:100%;right:0;
  margin-top:6px;
  width:210px;
  max-height:320px;
  overflow-y:auto;
  background:var(--panel-2);
  border:1px solid var(--line);
  z-index:50;
}
.mobile-menu-panel.open{display:block;}
.mobile-menu-panel a{
  display:block;
  padding:10px 14px;
  font-size:13px;
  color:var(--paper-dim);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.mobile-menu-panel a:hover{background:var(--olive);color:var(--paper);}
.mobile-menu-divider{
  padding:8px 14px 5px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--amber);
  border-top:1px solid var(--line);
}
.mobile-search-btn{
  display:none;
  align-items:center;
  justify-content:center;
  background:var(--panel-2);
  border:1px solid var(--olive-light);
  color:var(--amber);
  padding:0 11px;
  cursor:pointer;
}
.mobile-search-btn:hover{border-color:var(--rust);color:var(--paper);}

@media (max-width: 480px){
  .topbar-right > a.trader-btn,
  .topbar-right > .search-wrap{display:none;}
  .topbar-right > .search-wrap.mobile-search-open{
    display:block;
    position:absolute;
    top:100%;left:0;right:0;
    margin-top:6px;
    width:auto;
    z-index:50;
  }
  .mobile-menu-wrap{display:inline-block;}
  .mobile-search-btn{display:inline-flex;}
  .trader-btn{font-size:13px;padding:9px 13px;}
  .search-wrap input{font-size:16px;padding:10px 12px;}
  .search-results div{font-size:13px;padding:9px 12px;}
  .trader-menu .row{font-size:13px;padding:9px 12px;}
  .tab{font-size:13px;padding:7px 13px;}
  h1{font-size:26px;}
  .section-label{font-size:14px;}
  .section-hint{font-size:12.5px;}
  footer{font-size:11.5px;}
  .raid-tray-item-name{font-size:13.5px;}
  .raid-tray-item-sub{font-size:11px;}
  .raid-tray-detail{font-size:12px;}
}

.shortcuts-overlay{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(20,23,26,.85);
  align-items:center;
  justify-content:center;
  z-index:60;
  cursor:pointer;
}
.shortcuts-overlay.open{display:flex;}
.shortcuts-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--rust);
  padding:24px 28px;
  min-width:260px;
  cursor:default;
}
.shortcuts-title{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:15px;
  color:var(--amber);
  margin-bottom:16px;
}
.shortcuts-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:6px 0;
  font-size:12.5px;
  color:var(--paper);
}
.shortcuts-key{
  background:var(--panel-2);
  border:1px solid var(--olive-light);
  color:var(--amber);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  padding:3px 9px;
  min-width:52px;
  text-align:center;
}
.shortcuts-hint{
  margin-top:16px;
  font-size:10.5px;
  color:var(--paper-dim);
  text-align:center;
}

.zoom-overlay{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(20,23,26,.85);
  align-items:center;
  justify-content:center;
  z-index:65;
  cursor:zoom-out;
}
.zoom-overlay.open{display:flex;}
.zoom-overlay img{
  width:min(90vw, 160vh);
  aspect-ratio:16/9;
  object-fit:contain;
  border:1px solid var(--olive-light);
  background:var(--panel);
}
.raid-tray-images{
  display:flex;
  gap:6px;
  margin-top:10px;
}
.raid-tray-img-box{
  position:relative;
  width:56px;
  height:56px;
  flex-shrink:0;
  border:1px dashed var(--olive-light);
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  overflow:hidden;
}
.raid-tray-img-box:hover{border-color:var(--rust);}
.raid-tray-img-box img{width:100%;height:100%;object-fit:cover;display:block;}
.rt-img-remove{
  position:absolute;
  top:2px;right:2px;
  width:16px;height:16px;
  line-height:14px;
  padding:0;
  background:rgba(20,23,26,.8);
  border:1px solid var(--olive-light);
  color:var(--paper);
  font-size:12px;
  cursor:pointer;
}
.rt-img-remove:hover{background:var(--danger);border-color:var(--danger);color:#fff;}
.raid-tray-img-box .rt-img-plus{color:var(--olive-light);font-size:20px;}
.raid-tray.infil-lg .raid-tray-img-box{width:80px;height:80px;}
