:root{
  --bg:#0e0e0f; --bg2:#17171a; --bg3:#202024; --line:#2e2e34; --fg:#e6e3da; --dim:#9a978e;
  --accent:#e2462f; --accent2:#c9b98c; --teal:#00ffc4; --gold:#ffc600; --vup:#4fb3ff; --vdown:#ff6237;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 "Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif}
a{color:var(--accent2);text-decoration:none;cursor:pointer}
a:hover{color:#fff}
img{image-rendering:auto}
#hero{background:#000 url(assets/ui/bg_season_on.png) center 35%/cover no-repeat;min-height:260px;position:relative;border-bottom:3px solid var(--accent)}
#hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.2) 55%,rgba(0,0,0,.6))}
.hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:32px;max-width:1400px;margin:auto;padding:24px 20px;flex-wrap:wrap}
.logo{height:200px}
.hero-meta{display:grid;grid-template-columns:auto auto;gap:4px 16px;font-size:13px;color:var(--accent2)}
.hero-meta b{color:#fff;font-weight:normal}
#nav{position:sticky;top:0;z-index:20;background:rgba(14,14,15,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px;flex-wrap:wrap}
.nav-links{display:flex;flex-wrap:wrap;gap:2px;flex:1}
.nav-links a{padding:12px 12px;color:var(--dim);border-bottom:2px solid transparent;white-space:nowrap}
.nav-links a.on{color:#fff;border-bottom-color:var(--accent)}
.search-wrap{position:relative;width:340px;max-width:100%;padding:6px 0}
#search{width:100%;background:var(--bg3);border:1px solid var(--line);color:var(--fg);padding:7px 10px;border-radius:3px;font-size:14px}
#search:focus{outline:1px solid var(--accent)}
.search-results{position:absolute;right:0;top:44px;width:480px;max-width:92vw;max-height:70vh;overflow:auto;background:var(--bg2);border:1px solid var(--line);box-shadow:0 8px 30px #000;display:none}
.search-results.show{display:block}
.sr{display:flex;gap:10px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.sr:hover{background:var(--bg3)}
.sr img{width:36px;height:36px;object-fit:contain}
.sr .t{font-size:11px;color:var(--bg);background:var(--accent2);padding:0 5px;border-radius:2px;margin-right:4px}
.sr .s{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:360px}
main{max-width:1400px;margin:auto;padding:20px 16px 60px}
h1{font-size:22px;margin:8px 0 16px;padding-left:10px;border-left:4px solid var(--accent)}
h2{font-size:17px;margin:26px 0 10px;color:var(--accent2);border-bottom:1px solid var(--line);padding-bottom:4px}
h3{font-size:15px;margin:16px 0 8px}
.dim{color:var(--dim)} .small{font-size:12px}
.grid{display:grid;gap:10px}
.g-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.g-wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.g-band{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:10px;cursor:pointer;transition:.15s;position:relative}
.card:hover{border-color:var(--accent);transform:translateY(-1px)}
.card.static{cursor:default}.card.static:hover{transform:none;border-color:var(--line)}
.chess{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 6px}
.chess .av{width:96px;height:96px;border-radius:3px;background:#2a2a2e;object-fit:cover}
.chess .nm{margin-top:4px;font-size:14px}
.chess .lvb{position:absolute;left:6px;top:6px;background:var(--accent);color:#fff;font-size:12px;padding:0 6px;border-radius:2px}
.chess .prof{position:absolute;right:6px;top:6px;width:22px;height:22px;background:#000a;border-radius:2px}
.bondicons{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.bondicons img{width:22px;height:22px}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:1px 9px 1px 3px;margin:2px;font-size:13px;cursor:pointer}
.chip img{width:20px;height:20px;border-radius:50%}
.chip.off{opacity:.45}
.chip.plain{padding:1px 9px}
.tag{display:inline-block;font-size:11px;padding:0 6px;border-radius:2px;background:#333;color:#ccc;margin-right:4px;vertical-align:middle}
.tag.red{background:#7a1f14;color:#fff}.tag.gold{background:#6b5310;color:#ffe08a}.tag.teal{background:#0b4a3e;color:#8fffe3}.tag.blue{background:#13405e;color:#9fd6ff}
table{border-collapse:collapse;width:100%;margin:6px 0 14px;font-size:13px}
th,td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
th{background:var(--bg3);color:var(--accent2);font-weight:normal;position:sticky;top:0}
tr:hover td{background:#1c1c20}
.tbl-wrap{overflow:auto;max-height:75vh;border:1px solid var(--line)}
.tbl-wrap table{margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;background:var(--bg2);padding:10px;border:1px solid var(--line)}
.filters button,.btn{background:var(--bg3);color:var(--fg);border:1px solid var(--line);padding:4px 11px;border-radius:3px;cursor:pointer;font-size:13px}
.filters button.on,.btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.filters select,.filters input{background:var(--bg3);color:var(--fg);border:1px solid var(--line);padding:4px 8px;border-radius:3px;font-size:13px}
.vup{color:var(--vup)} .cond{color:var(--teal)} .term{border-bottom:1px dashed currentColor;cursor:help}
.desc{white-space:normal;line-height:1.75}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:40px 12px}
.modal.hidden{display:none}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75)}
.modal-box{position:relative;background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--accent);width:min(1100px,100%);padding:20px 22px;box-shadow:0 10px 60px #000}
.modal-close{position:absolute;right:10px;top:8px;background:none;border:none;color:var(--dim);font-size:20px;cursor:pointer}
.dhead{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.dhead img.big{width:120px;height:120px;object-fit:contain;background:#26262a;border-radius:3px}
.dhead .ttl{font-size:22px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:800px){.cols2{grid-template-columns:1fr}.logo{height:130px}}
.panel{background:var(--bg3);border:1px solid var(--line);padding:10px 12px;border-radius:3px}
.panel.gold{border-color:#6b5310}
.panel h4{margin:0 0 6px;font-size:14px;color:var(--accent2)}
.skill{display:flex;gap:10px;align-items:flex-start}
.skill img{width:48px;height:48px}
.range{display:inline-grid;gap:2px;margin-top:6px}
.range i{width:10px;height:10px;border:1px solid #555;display:block}
.range i.on{background:var(--vup);border-color:var(--vup)}
.range i.me{background:var(--accent);border-color:var(--accent)}
.stat{display:inline-block;background:var(--bg3);border:1px solid var(--line);padding:6px 12px;margin:3px;border-radius:3px;min-width:90px}
.stat b{display:block;font-size:20px;color:#fff;font-weight:normal}
.stat span{font-size:12px;color:var(--dim)}
.mapgrid{display:inline-grid;gap:1px;background:#000;padding:1px}
.mapgrid i{width:16px;height:16px;display:block}
.legend i{display:inline-block;width:12px;height:12px;vertical-align:middle;margin:0 3px 0 10px}
.preview{width:100%;border:1px solid var(--line);border-radius:3px}
.enemyicon{width:44px;height:44px;vertical-align:middle;background:#26262a;border-radius:2px}
.eicons{display:flex;flex-wrap:wrap;gap:4px}
.eicons span{display:flex;flex-direction:column;align-items:center;width:64px;font-size:11px;text-align:center;cursor:pointer}
.eicons img{width:48px;height:48px;background:#26262a}
.hpbar{height:6px;background:var(--accent);display:block}
details{margin:6px 0}
summary{cursor:pointer;color:var(--dim);font-size:12px}
code{background:#000;padding:0 4px;border-radius:2px;font-size:12px;color:#aaa}
.voice{border-left:3px solid var(--accent);padding:4px 10px;margin:6px 0;background:var(--bg3)}
footer{text-align:center;color:var(--dim);font-size:12px;padding:20px;border-top:1px solid var(--line)}
.home-tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.home-tiles .card{text-align:center}
.home-tiles b{display:block;font-size:28px;color:var(--accent);font-weight:normal}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
th,.tag{white-space:nowrap}
.mapthumbs{display:flex;gap:4px}.mapthumbs img{width:33%;min-width:0;flex:1;border-radius:2px}