:root{
  --bg:#100E0C; --bg-2:#14110E; --bg-3:#110F0C; --panel:#17140F; --chip:#211D18; --chip-2:#221E19;
  --line:#2B2620; --line-2:#221E19; --line-3:#332D25; --line-4:#3A332A; --frame:#4A4033;
  --text:#ECE4D3; --text-2:#C9BFAC; --muted:#A99F8C; --dim:#8A8172;
  --gold:#E2B95A; --gold-hi:#F3D58C; --on-gold:#1A1408;
  --t-s:#E2B95A; --t-s-fg:#1A1408; --t-a:#8C5A24; --t-a-fg:#FFF1DE; --t-b:#4F6280; --t-b-fg:#EEF3FA; --t-c:#3A332A; --t-c-fg:#ECE4D3;
  --warn-bg:#1C1710; --warn-line:#5A4A26; --amber:#C98A3C;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.5}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-hi)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2{font-family:Cinzel,serif;font-weight:700;margin:0}
h1{font-size:30px;line-height:1.15}
h2{font-size:24px}
h3{font-size:16px;margin:0 0 8px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.small{font-size:14px}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--bg-2)}
.head-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-top:14px;padding-bottom:14px}
.nav{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 480px}
.nav a{padding:10px 14px;border-radius:8px;color:var(--text-2)}
.nav a[aria-current=page]{color:var(--text);background:var(--chip-2)}
.langs{display:flex;border:1px solid var(--line-4);border-radius:8px;overflow:hidden}
.langs a{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text-2)}
.langs a[aria-current=true]{background:var(--gold);color:var(--on-gold)}
.official{border-top:1px solid var(--line-2);background:var(--bg-3)}
.official .wrap{display:flex;flex-wrap:wrap;gap:6px 20px;padding-top:8px;padding-bottom:8px;font-size:13px;color:var(--muted)}

/* blocks */
.panel{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:24px}
.strip{display:flex;flex-wrap:wrap;gap:8px 24px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:14px;color:var(--text-2)}
.strip strong{color:var(--gold)}
.banner{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:12px 16px;border-radius:10px;background:var(--warn-bg);border:1px solid var(--warn-line);font-size:14px}
.banner strong{color:var(--gold)}
.banner span{color:var(--text-2)}
.sec{padding-top:28px;padding-bottom:8px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.empty{border:1px dashed var(--line-4);border-radius:12px;padding:20px;text-align:center;color:var(--muted);font-size:14px}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.tabs button{min-height:44px;padding:10px 18px;border-radius:9px;border:0;cursor:pointer;font:inherit;font-weight:600;background:transparent;color:var(--text-2)}
.tabs button[aria-selected=true]{background:var(--gold);color:var(--on-gold)}

/* tier list */
.tiers{display:flex;flex-direction:column;gap:10px}
.tier{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.tier-badge{width:72px;flex:none;display:flex;align-items:center;justify-content:center;font-family:Cinzel,serif;font-size:30px;font-weight:700}
.tier-S{background:var(--t-s);color:var(--t-s-fg)} .tier-A{background:var(--t-a);color:var(--t-a-fg)}
.tier-B{background:var(--t-b);color:var(--t-b-fg)} .tier-C{background:var(--t-c);color:var(--t-c-fg)}
.tier-list{display:flex;flex-wrap:wrap;gap:10px;padding:14px;flex:1;min-width:0}
.chip{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:10px;background:var(--chip);border:1px solid var(--line-3);color:var(--text);flex:0 1 280px;min-width:220px}
.chip:hover{border-color:var(--frame);color:var(--text)}
.chip span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.chip b{font-weight:600}
.chip small{font-size:13px;color:var(--muted)}
.ico{border-radius:6px;border:1px solid var(--frame);display:block;flex:none;background:var(--chip)}

/* classes */
.search{display:flex;flex-direction:column;gap:6px;flex:0 1 340px}
.search label{font-size:13px;color:var(--muted)}
input[type=search],select{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line-4);background:var(--panel);color:var(--text);font:inherit;width:100%}
.races{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.race{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px}
.race-name{font-weight:700;color:var(--gold);margin-bottom:10px}
.race a{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:8px;color:var(--text);min-height:44px}
.race a:hover{background:var(--chip)}

/* tables */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;color:var(--muted);font-size:13px;font-weight:600;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.c2{color:var(--text-2)}
.bar{display:block;height:8px;border-radius:4px;background:var(--line);width:120px}
.bar i{display:block;height:8px;border-radius:4px;background:var(--gold)}
.skill{display:flex;gap:12px;align-items:center}
.skill b{font-weight:600;display:block}
.skill small{font-size:13px;color:var(--muted)}
.gold{color:var(--gold);font-weight:700}

/* grade badges */
.g{padding:3px 10px;border-radius:6px;font-size:13px;font-weight:700;white-space:nowrap}
.g1{background:#3A332A;color:#ECE4D3} .g2{background:#4F6280;color:#EEF3FA} .g3{background:#E2B95A;color:#1A1408} .g0{color:var(--muted);padding:0}

/* two columns */
.cols{display:flex;flex-wrap:wrap;gap:24px}
.cols>.main{flex:999 1 640px;min-width:0}
.cols>.side{flex:1 1 340px;display:flex;flex-direction:column;gap:24px}
.dates div{display:flex;gap:12px}
.dates b{width:56px;flex:none;color:var(--gold)}

/* class page */
.crumbs{font-size:14px;color:var(--muted);padding-top:20px}
.hero{display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding-top:16px}
.hero h1{font-size:40px;margin:4px 0 8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;font-size:14px}
.tag{padding:4px 10px;border-radius:6px;background:var(--chip-2);border:1px solid var(--line-3)}
.rating{flex:1 1 260px;padding:14px 16px;border-radius:12px;border:1px dashed var(--warn-line);background:var(--panel)}
.order{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ocol{border-radius:12px;background:var(--chip);border:1px solid var(--line-3);padding:16px}
.ocol-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.prog{height:6px;border-radius:3px;background:var(--line);margin:10px 0 12px}
.prog i{display:block;height:6px;border-radius:3px}
.ocol ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ocol li{display:flex;gap:10px;align-items:center}
.ocol li>span:first-child{width:22px;flex:none;color:var(--gold);font-weight:700}
.ocol li b{font-weight:600}
.ocol li small{display:block;font-size:13px;color:var(--muted)}

/* compare */
.pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.picker{display:flex;flex-direction:column;gap:6px}
.picker label{font-size:13px;color:var(--muted)}
.warn{margin-top:14px}

.site-foot{border-top:1px solid var(--line);background:var(--bg-2);margin-top:48px}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:24px;padding-bottom:24px;color:var(--muted);font-size:14px}

@media (max-width:640px){
  .wrap{padding:0 16px}
  h1{font-size:26px}
  .hero h1{font-size:30px}
  .panel{padding:16px}
  .tier-badge{width:48px;font-size:24px}
  .chip{min-width:0;flex:1 1 100%}
}