:root {
  --ui-scale:1.2;
  --content-max:1440px;
  --page-gutter:48px;
  --header-height:72px;
  --panel-padding:26px;
  --control-height:38px;
  --border-width:1px;
  --font-body:Inter,sans-serif;
  --font-display:"Barlow Condensed",sans-serif;
  --ink:#11110f;
  --paper:#f1efe8;
  --red:#ed2b22;
  --muted:#7b7a74;
  --line:#ccc9bf;
  --text-secondary:#55544f;
  --surface:rgba(241,239,232,.82);
  --surface-soft:rgba(241,239,232,.72);
  --surface-strong:rgba(241,239,232,.88);
  --field:rgba(255,255,255,.35);
  --chip:rgba(255,255,255,.28);
  --solid:#11110f;
  --on-solid:#fff;
  --track:#d7d4cb;
  --character-bg:#dfdcd3;
  --positive:#16824b;
  --rank-track:#373733;
  --rank-muted:#aaa9a2;
  --rank-line:#3d3d39;
  --overlay:rgba(17,17,15,.72);
  --background-wash:rgba(241,239,232,.88);
  --noise-opacity:.1;
  --parallax-y:0px;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --ink:#f0eee7;
  --paper:#151513;
  --red:#ff493f;
  --muted:#aaa89f;
  --line:#494943;
  --text-secondary:#c5c2b9;
  --surface:rgba(27,27,24,.9);
  --surface-soft:rgba(27,27,24,.78);
  --surface-strong:rgba(21,21,19,.9);
  --field:rgba(255,255,255,.07);
  --chip:rgba(255,255,255,.06);
  --track:#3a3a35;
  --character-bg:#292925;
  --positive:#48c982;
  --background-wash:rgba(21,21,19,.9);
  --noise-opacity:.06;
  color-scheme:dark;
}
@media(prefers-color-scheme:dark) {
  :root[data-theme="system"] {
    --ink:#f0eee7;
    --paper:#151513;
    --red:#ff493f;
    --muted:#aaa89f;
    --line:#494943;
    --text-secondary:#c5c2b9;
    --surface:rgba(27,27,24,.9);
    --surface-soft:rgba(27,27,24,.78);
    --surface-strong:rgba(21,21,19,.9);
    --field:rgba(255,255,255,.07);
    --chip:rgba(255,255,255,.06);
    --track:#3a3a35;
    --character-bg:#292925;
    --positive:#48c982;
    --background-wash:rgba(21,21,19,.9);
    --noise-opacity:.06;
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; zoom:var(--ui-scale); color:var(--ink); background-color:var(--paper); background-image:linear-gradient(var(--background-wash),var(--background-wash)),url("/assets/ink-shanshui-background.webp"); background-position:center calc(50% + var(--parallax-y)); background-size:cover; background-attachment:fixed; font-family:var(--font-body); }
body:before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; opacity:var(--noise-opacity); background:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"); }
.topbar { height:var(--header-height); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,80px); border-bottom:var(--border-width) solid var(--ink); position:relative; }
.logo { color:var(--ink); font:800 28px/1 var(--font-display); text-decoration:none; letter-spacing:-1px; }
.logo span { color:var(--red); }
.live { font:600 11px/1 var(--font-body); letter-spacing:1.5px; display:flex; align-items:center; gap:9px; }
.live i { width:7px; height:7px; background:var(--red); border-radius:50%; box-shadow:0 0 0 4px rgba(237,43,34,.12); }
.main-nav { display:flex; align-items:center; gap:4px; }
.main-nav a { padding:9px 10px; border-bottom:2px solid transparent; color:var(--ink); font:700 10px var(--font-body); letter-spacing:.4px; text-decoration:none; text-transform:uppercase; }
.main-nav a:hover,.main-nav a.active { border-color:var(--red); color:var(--red); }
.theme-switcher { display:flex; flex:0 0 auto; border:1px solid var(--line); }
.theme-switcher button { height:28px; border:0; border-right:1px solid var(--line); padding:0 8px; background:transparent; color:var(--muted); font:700 7px var(--font-body); text-transform:uppercase; cursor:pointer; }
.theme-switcher button:last-child { border:0; }
.theme-switcher button:hover,.theme-switcher button.active { background:var(--red); color:var(--on-solid); }
main { width:min(calc(var(--content-max) / var(--ui-scale)),calc(100% - var(--page-gutter))); margin:auto; }
.hero { min-height:610px; padding:88px 0 72px; border-bottom:1px solid var(--ink); position:relative; }
.hero:after { content:"R"; position:absolute; right:1%; top:5px; font:800 490px/.95 var(--font-display); color:transparent; -webkit-text-stroke:1px rgba(17,17,15,.09); z-index:-1; }
.eyebrow,.caption { font:700 11px/1 var(--font-body); letter-spacing:2.4px; color:var(--red); }
h1 { margin:18px 0 18px; font:800 clamp(72px,10vw,132px)/.78 var(--font-display); letter-spacing:-4px; }
h1 em { color:var(--red); font-style:normal; }
.hero>p { width:min(590px,100%); color:#55544f; font-size:15px; line-height:1.65; }
.search { width:min(790px,100%); margin-top:44px; }
.search label { display:block; margin-bottom:10px; font:600 11px var(--font-body); letter-spacing:1.2px; text-transform:uppercase; }
.search-row { display:flex; height:64px; }
.search input { flex:1; min-width:0; border:1px solid var(--ink); background:var(--field); padding:0 20px; border-radius:0; font:600 20px var(--font-display); outline:none; }
.search input:focus { box-shadow:inset 0 -4px var(--red); }
.search button { width:225px; border:0; background:var(--solid); color:var(--on-solid); padding:0 20px; display:flex; justify-content:space-between; align-items:center; font:700 13px var(--font-body); cursor:pointer; transition:.2s; }
.search button:hover { background:var(--red); }
.search button b { font-size:24px; }
.search-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:10px; letter-spacing:.6px; }
.search-history { display:flex; align-items:center; gap:12px; margin-top:16px; }
.search-history>span { color:var(--muted); font:600 9px var(--font-body); letter-spacing:1.2px; text-transform:uppercase; }
.search-history>div { display:inline-flex; width:fit-content; max-width:100%; flex:0 1 auto; flex-wrap:wrap; gap:7px; }
.history-chip { width:auto; max-width:150px; flex:0 0 auto; height:28px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--line); border-radius:14px; padding:0 11px; background:var(--chip); color:var(--ink); font:600 11px var(--font-body); cursor:pointer; transition:border-color .15s,color .15s,background .15s; }
.history-chip:hover { border-color:var(--red); background:var(--red); color:#fff; }
.status { margin-top:22px; font-size:13px; min-height:20px; color:var(--red); }
.status.loading:after { content:""; display:inline-block; width:36px; height:2px; margin-left:10px; vertical-align:middle; background:var(--red); animation:pulse .7s infinite alternate; }
@keyframes pulse { to { transform:scaleX(.2); transform-origin:left; } }
.result { padding:70px 0 90px; }
.player-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:36px; }
.player-identity { display:flex; align-items:center; gap:22px; min-width:0; }
.player-avatar { width:128px; height:128px; flex:0 0 128px; border:1px solid var(--ink); border-radius:50%; object-fit:contain; background:rgba(241,239,232,.8); }
.player-identity blockquote { max-width:520px; margin:12px 0 0; padding-left:12px; border-left:3px solid var(--red); color:var(--text-secondary); font:500 12px/1.45 var(--font-body); }
.player-head h2 { margin:8px 0 0; font:800 clamp(52px,7vw,88px)/.9 var(--font-display); text-transform:uppercase; }
.player-head small { color:var(--muted); }
.main-character { text-align:right; border-right:5px solid var(--red); padding-right:16px; }
.profile-actions { display:flex; align-items:center; gap:22px; }
.profile-actions>button { height:38px; border:1px solid var(--ink); background:transparent; padding:0 15px; color:var(--ink); font:700 10px var(--font-body); letter-spacing:.7px; text-transform:uppercase; cursor:pointer; }
.profile-actions>button:hover { border-color:var(--red); background:var(--red); color:#fff; }
.main-character span { display:block; color:var(--muted); font-size:10px; letter-spacing:2px; }
.main-character strong { font:700 27px var(--font-display); }
.character { display:inline-flex; align-items:center; gap:9px; vertical-align:middle; min-width:0; }
.character img,.character-fallback { width:68px; height:68px; flex:0 0 68px; border-radius:50%; object-fit:contain; background:var(--character-bg); border:1px solid var(--line); }
.character img { padding:4px; }
.character-fallback { display:grid; place-items:center; color:var(--red); font:800 24px var(--font-display); }
.character.large { font-size:27px; gap:12px; }
.character.large img,.character.large .character-fallback { width:108px; height:108px; flex-basis:108px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--ink); }
.metrics article { padding:24px; border-right:1px solid var(--ink); }
.metrics article:last-child { border:0; }
.metrics article.accent { background:var(--red); color:#fff; }
.metrics span,.metrics small { display:block; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; }
.metrics strong { display:block; font:800 52px/1 var(--font-display); margin:12px 0 6px; }
.rating-grid { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.6fr); gap:22px; margin-top:22px; }
.rank-card { --rank-color:var(--red); border:1px solid var(--solid); padding:var(--panel-padding); background:var(--solid); color:var(--on-solid); }
.rank-card .panel-title { border-color:#3d3d39; }
.rank-card .panel-title span { color:var(--rank-color); }
.rank-main { min-height:126px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.rank-title { display:flex; align-items:center; gap:12px; min-width:0; }
.rank-title>strong { max-width:165px; color:var(--rank-color); font:800 32px/.95 var(--font-display); text-transform:uppercase; }
.rank-icon { display:inline-flex; flex:0 0 auto; background-image:url("/assets/puddle-rating-icons.webp"); background-repeat:no-repeat; image-rendering:auto; }
.rank-main>div { text-align:right; }
.rank-main b { display:block; font:800 48px/.9 var(--font-display); }
.rank-main small { color:#aaa9a2; font:700 11px var(--font-body); letter-spacing:2px; }
.rank-track { height:8px; background:var(--rank-track); overflow:hidden; }
.rank-track i { display:block; width:0; height:100%; background:var(--rank-color); transition:width .5s ease; }
.rank-meta { display:flex; justify-content:space-between; gap:12px; margin-top:10px; color:#aaa9a2; font-size:9px; text-transform:uppercase; letter-spacing:.7px; }
.wins-to-rank { min-height:14px; margin-top:12px; color:var(--rank-color); font:700 10px var(--font-body); text-transform:uppercase; letter-spacing:.7px; }
.chart { position:relative; height:260px; padding-top:12px; }
.chart svg { width:100%; height:100%; overflow:visible; }
.chart text { fill:var(--muted); font:10px var(--font-body); }
.chart .chart-current { fill:var(--ink); font-weight:700; }
.chart-axis { stroke:var(--line); stroke-width:1; }
.rank-line line { stroke:rgba(17,17,15,.22); stroke-width:1; stroke-dasharray:5 5; vector-effect:non-scaling-stroke; }
.rank-line text { fill:#686761; font-size:8px; font-weight:600; text-transform:uppercase; }
.chart-point { cursor:crosshair; stroke:var(--paper); stroke-width:2; vector-effect:non-scaling-stroke; transition:r .12s; }
.chart-point:hover { r:7px; }
.chart-tooltip { position:absolute; z-index:4; min-width:128px; pointer-events:none; padding:10px 12px; border:1px solid var(--ink); background:var(--ink); color:#fff; box-shadow:5px 5px 0 rgba(237,43,34,.3); }
.chart-tooltip strong,.chart-tooltip span,.chart-tooltip small { display:block; }
.chart-tooltip strong { font:800 19px var(--font-display); }
.chart-tooltip span { margin-top:3px; color:var(--red); font:700 10px var(--font-body); text-transform:uppercase; letter-spacing:.7px; }
.chart-tooltip small { margin-top:7px; color:#aaa9a2; font-size:9px; }
.chart-empty { height:100%; display:grid; place-items:center; color:var(--muted); font-size:12px; }
.rival-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; }
.rival-profile { min-height:142px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; }
.rival-profile .character>span:last-child { display:none; }
.rival-profile>div>a { display:block; overflow:hidden; text-overflow:ellipsis; color:var(--ink); font:800 28px/.95 var(--font-display); text-decoration:none; text-transform:uppercase; }
.rival-profile>div>a:hover { color:var(--red); }
.rival-profile>div>span { display:block; margin-top:7px; color:var(--muted); font-size:10px; }
.rival-profile>strong { display:flex; align-items:center; gap:7px; white-space:nowrap; font:800 30px var(--font-display); line-height:1; }
.rival-profile>strong small { color:var(--red); font-size:12px; }
.rival-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.6px; }
.rival-footer time { color:var(--ink); font-weight:600; }
.rival-footer b { color:var(--ink); font:700 15px var(--font-display); }
.rival-footer b i,.rival-footer b em { font-style:normal; }
.rival-footer b i { color:#16824b; }
.rival-footer b em { color:var(--red); }
.rival-empty { min-height:142px; display:grid; place-items:center; color:var(--muted); font-size:12px; }
.insights { margin-top:22px; }
.insight-badges { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; margin-top:20px; border:1px solid var(--ink); background:var(--ink); }
.insight-badge { min-width:0; padding:18px 15px; background:var(--paper); }
.insight-badge span,.insight-badge small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.insight-badge span { color:var(--muted); font:700 8px var(--font-body); letter-spacing:1px; text-transform:uppercase; }
.insight-badge strong { display:block; margin:9px 0 4px; overflow:hidden; text-overflow:ellipsis; color:var(--red); font:800 25px/.9 var(--font-display); text-transform:uppercase; white-space:nowrap; }
.insight-badge small { color:var(--muted); font-size:8px; }
.profile-tags { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:14px; }
.profile-tags:before { content:"Profile tags"; margin-right:4px; color:var(--muted); font:700 8px var(--font-body); letter-spacing:1px; text-transform:uppercase; }
.profile-tag { border:1px solid var(--red); padding:5px 9px; color:var(--red); font:700 9px var(--font-body); text-transform:uppercase; }
.insight-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:22px; }
.insight-grid>article { min-width:0; border:1px solid var(--line); padding:18px; }
.insight-grid header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.insight-grid header span { color:var(--red); font:700 8px var(--font-body); letter-spacing:1px; }
.insight-grid header>div { text-align:right; }
.insight-grid h4 { margin:0; font:700 19px var(--font-display); text-transform:uppercase; }
.activity-timezone { display:block; margin-top:2px; color:var(--muted); font-size:8px; }
.insight-bars { padding-top:14px; }
.insight-bar { display:grid; grid-template-columns:88px 1fr 88px; align-items:center; gap:10px; margin:9px 0; font-size:9px; }
.insight-bar>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.insight-bar-track { height:5px; background:#d7d4cb; }
.insight-bar-track i { display:block; height:100%; background:var(--red); }
.insight-bar small { color:var(--muted); text-align:right; }
.character-records { max-height:245px; overflow:auto; padding-top:8px; }
.character-record { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); }
.character-record:last-child { border:0; }
.character-record .character img,.character-record .character-fallback { width:44px; height:44px; flex-basis:44px; }
.character-record>span { text-align:right; }
.character-record b,.character-record small { display:block; }
.character-record b { font:800 18px var(--font-display); }
.character-record small { margin-top:2px; color:var(--muted); font-size:8px; }
.legend-mark { color:var(--red) !important; font-weight:700; text-transform:uppercase; }
.profile-defeat { margin-top:18px; border:1px solid var(--ink); }
.profile-defeat-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:10px 16px; }
.profile-defeat-card>span { color:var(--red); font:800 12px var(--font-body); letter-spacing:1px; }
.profile-defeat-player { display:flex; align-items:center; gap:10px; min-width:0; }
.profile-defeat-player .character { flex:0 0 auto; }
.profile-defeat-player .character img,.profile-defeat-player .character-fallback { width:48px; height:48px; flex-basis:48px; }
.profile-defeat-player .character>span:last-child { font-weight:600; white-space:nowrap; }
.profile-defeat-player>div { min-width:0; }
.profile-defeat-player a,.profile-defeat-player small { display:block; }
.profile-defeat-player a { overflow:hidden; text-overflow:ellipsis; color:var(--ink); font:800 22px var(--font-display); text-decoration:none; text-transform:uppercase; white-space:nowrap; }
.profile-defeat-player a:hover { color:var(--red); }
.profile-defeat-card small { margin-top:3px; color:var(--muted); font-size:8px; text-transform:uppercase; }
.profile-defeat-card>b { display:flex; align-items:center; gap:7px; font:800 25px/1 var(--font-display); white-space:nowrap; }
.profile-defeat-card>b small { margin:0; color:var(--red); font:700 10px/1 var(--font-body); }
.panels { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; }
.panel { border:1px solid var(--ink); padding:var(--panel-padding); background:var(--surface); backdrop-filter:blur(3px); }
.panel-title { display:flex; align-items:center; gap:14px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.panel-title span { color:var(--red); font:700 11px var(--font-body); }
.panel-title h3 { margin:0; font:700 24px var(--font-display); text-transform:uppercase; }
.matches-count { margin-left:auto; color:var(--muted) !important; font:600 9px var(--font-body) !important; letter-spacing:.5px !important; }
.panel-action { margin-left:auto; height:27px; border:1px solid var(--line); background:transparent; padding:0 10px; color:var(--muted); font:700 9px var(--font-body); text-transform:uppercase; cursor:pointer; }
.panel-action:hover { border-color:var(--red); color:var(--red); }
.panel-action[hidden] { display:none; }
.panel-tabs { display:flex; margin-left:auto; border:1px solid var(--line); }
.panel-tabs button { height:27px; border:0; border-right:1px solid var(--line); padding:0 10px; background:transparent; color:var(--muted); font:700 9px var(--font-body); text-transform:uppercase; cursor:pointer; }
.panel-tabs button:last-child { border-right:0; }
.panel-tabs button:hover,.panel-tabs button.active { background:var(--red); color:#fff; }
.bars,.matchups { padding-top:20px; }
.bar { margin:0 0 17px; }
.character-select { display:block; width:100%; border:0; padding:8px; background:transparent; color:inherit; text-align:left; cursor:pointer; transition:background .15s; }
.character-select:hover,.character-select.active { background:rgba(237,43,34,.07); }
.character-select.active { box-shadow:inset 3px 0 var(--red); }
.bar-label,.matchup { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.bar-label b { font-weight:600; }
.character-rating { display:grid; grid-template-columns:auto auto; align-items:center; gap:0 7px; margin-left:auto; margin-right:18px; text-align:right; }
.character-rating .rank-icon { grid-row:1 / 3; }
.character-rating strong,.character-rating small { display:block; }
.character-rating strong { font:700 16px var(--font-display); }
.character-rating small { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.5px; }
.bar-track { height:4px; background:#d7d4cb; margin-top:8px; }
.bar-fill { height:100%; background:var(--red); }
.matchup { padding:12px 0; border-bottom:1px solid var(--line); }
.matchup:last-child { border:0; }
.matchup b { font-family:var(--font-display); font-size:20px; }
.matchup-record { display:flex; align-items:flex-end; flex-direction:column; gap:2px; }
.matchup-record small { color:var(--muted); font-size:9px; }
.tier-list { display:grid; gap:8px; }
.tier-row { display:grid; grid-template-columns:42px 1fr; min-height:62px; border:1px solid var(--line); }
.tier-rank { display:grid; place-items:center; background:var(--tier-color); color:#fff; font:800 26px var(--font-display); }
.tier-characters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:5px; padding:6px; }
.tier-character { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:1px 5px; min-width:0; padding:2px 5px 2px 2px; border:1px solid var(--line); }
.tier-character .character>span:last-child { display:none; }
.tier-character .character img,.tier-character .character-fallback { width:48px; height:48px; flex-basis:48px; padding:2px; }
.tier-character>span:last-child { display:flex; flex-direction:column; gap:1px; }
.tier-character b { font:700 9px var(--font-display); }
.tier-character small { overflow:hidden; color:var(--muted); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.tier-characters>small:only-child { grid-column:1 / -1; align-self:center; justify-self:center; color:var(--red); font:800 13px var(--font-display); text-align:center; text-transform:uppercase; }
.history { margin-top:22px; }
.matches { overflow-x:auto; }
.match { min-width:820px; display:grid; grid-template-columns:70px 1.5fr 1fr 90px 1fr; align-items:center; gap:15px; border-bottom:1px solid var(--line); padding:15px 0; font-size:12px; }
.match:last-child { border:0; }
.outcome { font:800 12px var(--font-body); letter-spacing:1px; color:var(--red); }
.outcome.win { color:#16824b; }
.match b { font-weight:600; }
.versus { display:flex; align-items:center; gap:8px; }
.versus .character { gap:5px; }
.versus .character img,.versus .character-fallback { width:60px; height:60px; flex-basis:60px; }
.versus i { color:var(--red); font:800 17px/1 var(--font-display); font-style:normal; }
.match-rating { display:flex; align-items:center; gap:7px; font:600 11px var(--font-body); }
.match-rating>b { font-weight:600; }
.rating-delta { min-width:35px; font-style:normal; color:var(--muted); }
.rating-delta.positive { color:#16824b; }
.rating-delta.negative { color:var(--red); }
.match small { color:var(--muted); }
.opponent-link { overflow:hidden; text-overflow:ellipsis; color:var(--ink); font-weight:600; text-decoration:none; }
.opponent-link:hover { color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.pagination { display:flex; flex-wrap:wrap; gap:6px; padding-top:20px; border-top:1px solid var(--line); }
.pagination button { width:32px; height:32px; border:1px solid var(--line); background:transparent; color:var(--ink); font:700 11px var(--font-body); cursor:pointer; }
.pagination button:hover,.pagination button.active { border-color:var(--red); background:var(--red); color:#fff; }
.mini-pagination { display:flex; flex-wrap:wrap; gap:5px; min-height:29px; padding-top:14px; border-top:1px solid var(--line); }
.mini-pagination:empty { display:none; }
.mini-pagination button { min-width:28px; height:28px; border:1px solid var(--line); background:transparent; color:var(--ink); font:700 9px var(--font-body); cursor:pointer; }
.mini-pagination button:hover,.mini-pagination button.active { border-color:var(--red); background:var(--red); color:#fff; }
footer { min-height:100px; border-top:1px solid var(--ink); padding:20px clamp(24px,5vw,80px); display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:9px; letter-spacing:.5px; }
footer div { max-width:760px; }
footer strong,footer div>span { display:block; }
footer strong { margin-bottom:7px; color:var(--ink); letter-spacing:1px; }
footer a { color:var(--red); font-weight:700; text-decoration:none; }
footer a:hover { text-decoration:underline; }
.player-preview { position:fixed; z-index:20; width:300px; pointer-events:none; border:1px solid var(--ink); padding:16px; background:var(--paper); box-shadow:8px 8px 0 rgba(17,17,15,.18); }
.toast { position:fixed; z-index:50; right:clamp(18px,3vw,42px); bottom:clamp(18px,3vw,42px); width:min(410px,calc(100vw - 36px)); display:flex; align-items:flex-start; justify-content:space-between; gap:18px; border:1px solid var(--ink); border-left:6px solid var(--red); padding:18px 18px 18px 20px; background:var(--paper); color:var(--ink); box-shadow:10px 10px 0 rgba(17,17,15,.2); }
.toast[hidden] { display:none; }
.toast div { min-width:0; }
.toast strong,.toast span { display:block; }
.toast strong { margin-bottom:6px; color:var(--red); font:800 18px var(--font-display); text-transform:uppercase; letter-spacing:.5px; }
.toast span { color:var(--text-secondary); font-size:11px; line-height:1.55; }
.toast button { flex:0 0 28px; width:28px; height:28px; border:1px solid var(--line); background:transparent; color:var(--ink); font:700 18px var(--font-body); cursor:pointer; }
.toast button:hover { border-color:var(--red); color:var(--red); }
.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:24px; background:rgba(17,17,15,.72); backdrop-filter:blur(4px); }
.modal-backdrop[hidden] { display:none; }
.day-modal { width:min(940px,100%); max-height:min(760px,calc(100vh - 48px)); overflow:hidden; border:1px solid var(--ink); background:var(--paper); box-shadow:12px 12px 0 var(--red); }
.day-modal>header { display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--ink); }
.day-modal>header span { color:var(--red); font:700 9px var(--font-body); letter-spacing:1.5px; }
.day-modal>header h2 { margin:5px 0 0; font:800 34px var(--font-display); text-transform:uppercase; }
.day-modal>header button { width:38px; height:38px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:300 26px/1 var(--font-body); cursor:pointer; }
.day-modal>header button:hover { border-color:var(--red); background:var(--red); color:#fff; }
.day-modal-summary { display:flex; align-items:center; gap:22px; min-height:86px; padding:10px 26px; border-bottom:1px solid var(--line); }
.day-modal-summary .character>span:last-child { display:none; }
.day-modal-summary b { font:800 24px var(--font-display); }
.day-modal-summary i { margin-left:auto; color:var(--red); font:700 15px var(--font-body); font-style:normal; }
.day-modal-matches { max-height:520px; overflow:auto; padding:0 26px; }
.day-match { display:grid; grid-template-columns:65px minmax(130px,1fr) minmax(120px,1fr) 95px 80px; align-items:center; gap:14px; min-width:680px; padding:13px 0; border-bottom:1px solid var(--line); font-size:11px; }
.day-match>.character>span:last-child { display:none; }
.day-match time { color:var(--muted); text-align:right; }
.preview-loading { display:block; color:var(--muted); font-size:11px; }
.preview-head { display:flex; align-items:center; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.preview-head .character>span:last-child { display:none; }
.preview-head strong,.preview-head small { display:block; }
.preview-head strong { max-width:170px; overflow:hidden; text-overflow:ellipsis; font:800 24px var(--font-display); text-transform:uppercase; }
.preview-head small { margin-top:3px; color:var(--muted); font-size:9px; text-transform:uppercase; }
.preview-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:13px 0; }
.preview-stats span { min-width:0; }
.preview-stats small,.preview-stats b { display:block; }
.preview-stats small { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.7px; }
.preview-stats b { margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 17px var(--font-display); }
.preview-foot { display:flex; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid var(--line); color:var(--red); font:700 9px var(--font-body); text-transform:uppercase; letter-spacing:.5px; }
.explore { min-height:calc(100vh - 172px); padding:70px 0 90px; }
.explore-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; padding-bottom:32px; border-bottom:1px solid var(--ink); }
.explore-head h1 { margin:12px 0 14px; font-size:clamp(58px,8vw,104px); line-height:.82; }
.explore-head p { max-width:650px; margin:0; color:#55544f; font-size:14px; line-height:1.6; }
.explore-updated { flex:0 0 auto; color:var(--muted); font:600 9px var(--font-body); letter-spacing:.6px; text-transform:uppercase; }
.explore-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:20px 0; }
.explore-controls button,.explore-controls select,.explore-back { height:var(--control-height); border:1px solid var(--ink); border-radius:0; background:var(--surface); padding:0 14px; color:var(--ink); font:700 10px var(--font-body); text-decoration:none; text-transform:uppercase; cursor:pointer; }
.explore-controls button.active,.explore-controls button:hover,.explore-back:hover { background:var(--red); border-color:var(--red); color:#fff; }
.explore-back { display:inline-flex; align-items:center; }
.explore-loading,.explore-error { min-height:280px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); font-size:12px; }
.leaderboard { border:1px solid var(--ink); background:rgba(241,239,232,.72); }
.leader-row { display:grid; grid-template-columns:74px 88px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:94px; padding:10px 20px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.leader-row:last-child { border:0; }
.leader-row:hover { background:rgba(237,43,34,.07); box-shadow:inset 4px 0 var(--red); }
.leader-row>.character>span:last-child { display:none; }
.leader-position { color:var(--red); font:800 28px var(--font-display); }
.leader-name { min-width:0; overflow:hidden; text-overflow:ellipsis; font:800 25px var(--font-display); text-transform:uppercase; white-space:nowrap; }
.leader-name small { display:block; margin-top:3px; color:var(--muted); font:500 9px var(--font-body); text-transform:none; }
.leader-rating { display:grid; grid-template-columns:auto auto auto; align-items:center; gap:8px; font:800 24px var(--font-display); }
.leader-rating small { color:var(--red); font:700 9px var(--font-body); }
.explore-pagination a { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); color:var(--ink); font:700 11px var(--font-body); text-decoration:none; }
.explore-pagination a:hover,.explore-pagination a.active { border-color:var(--red); background:var(--red); color:#fff; }
.character-catalog { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.character-catalog>a { display:flex; align-items:center; gap:14px; min-width:0; min-height:132px; border:1px solid var(--line); padding:12px; background:rgba(241,239,232,.72); color:var(--ink); text-decoration:none; }
.character-catalog>a:hover { border-color:var(--red); box-shadow:inset 4px 0 var(--red); }
.character-catalog strong,.character-catalog small { display:block; }
.character-catalog strong { font:800 24px var(--font-display); text-transform:uppercase; }
.character-catalog small { margin-top:5px; color:var(--muted); font-size:9px; }
.global-bars,.matchup-overview { border:1px solid var(--ink); padding:12px 20px; background:rgba(241,239,232,.72); }
.global-bar,.matchup-global-row { display:grid; grid-template-columns:40px 74px minmax(0,1fr) 170px; align-items:center; gap:14px; min-height:78px; border-bottom:1px solid var(--line); }
.global-bar:last-child,.matchup-global-row:last-child { border:0; }
.global-bar>.character>span:last-child { display:none; }
.global-bar>span strong,.matchup-global-row>span strong { display:block; font:800 19px var(--font-display); text-transform:uppercase; }
.global-bar>span i,.matchup-global-row>span i { display:block; height:6px; margin-top:7px; background:#d7d4cb; }
.global-bar>span em,.matchup-global-row>span em { display:block; height:100%; background:var(--red); }
.global-bar>small,.matchup-global-row>small { color:var(--muted); font-size:10px; text-align:right; }
.matchup-global-row { grid-template-columns:minmax(170px,.8fr) minmax(0,1fr) 190px; }
.tier-method { margin-bottom:18px; border:1px solid var(--ink); padding:22px 24px; background:rgba(17,17,15,.94); color:#fff; }
.tier-method>span { color:var(--red); font:700 8px var(--font-body); letter-spacing:1.3px; }
.tier-method h2 { margin:7px 0 8px; font:800 28px var(--font-display); text-transform:uppercase; }
.tier-method p { max-width:850px; margin:0; color:#c7c5bd; font-size:11px; line-height:1.65; }
.global-tier-list { display:grid; gap:10px; }
.global-tier-row { display:grid; grid-template-columns:70px minmax(0,1fr); min-height:150px; border:1px solid var(--ink); background:rgba(241,239,232,.78); }
.global-tier-row>strong { display:grid; place-items:center; background:var(--tier-color); color:#fff; font:800 48px var(--font-display); }
.global-tier-row>div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:8px; padding:8px; }
.global-tier-row article { min-width:0; border:1px solid var(--line); padding:10px; background:rgba(255,255,255,.2); }
.global-tier-character { display:flex; align-items:center; gap:9px; min-width:0; }
.global-tier-character .character>span:last-child { display:none; }
.global-tier-character .character.large img,.global-tier-character .character.large .character-fallback { width:72px; height:72px; flex-basis:72px; }
.global-tier-character>span { min-width:0; }
.global-tier-character b,.global-tier-character small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-tier-character b { font:800 18px var(--font-display); text-transform:uppercase; }
.global-tier-character small { margin-top:3px; color:var(--tier-color); font:700 8px var(--font-body); text-transform:uppercase; }
.global-tier-row dl { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:9px 0 0; padding-top:8px; border-top:1px solid var(--line); }
.global-tier-row dl div { min-width:0; }
.global-tier-row dt,.global-tier-row dd { overflow:hidden; margin:0; text-overflow:ellipsis; white-space:nowrap; }
.global-tier-row dt { color:var(--muted); font-size:6px; text-transform:uppercase; }
.global-tier-row dd { margin-top:2px; font:700 12px var(--font-display); }
.hero>p,.explore-head p { color:var(--text-secondary); }
.player-avatar,.leaderboard,.character-catalog>a,.global-bars,.matchup-overview,.distribution-summary article,.stats-overview article,.distribution-table,.distribution-chart,.global-tier-row { background:var(--surface-soft); }
.insight-bar-track,.bar-track,.global-bar>span i,.matchup-global-row>span i { background:var(--track); }
.rival-footer b i { color:var(--positive); }
.rank-card .panel-title { border-color:var(--rank-line); }
.rank-main small,.rank-meta { color:var(--rank-muted); }
.tier-method { background:var(--solid); color:var(--on-solid); }
.tier-method p { color:var(--rank-muted); }
.modal-backdrop { background:var(--overlay); }
.day-modal,.player-preview { background:var(--paper); }
.chart-tooltip { background:var(--solid); color:var(--on-solid); }
:root[data-theme="dark"] .rank-icon { filter:brightness(1.08); }
:root[data-theme="dark"] .distribution-column>div { background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.08) 25%); }
:root[data-theme="dark"] .hero:after { -webkit-text-stroke-color:rgba(255,255,255,.08); }
@media(prefers-color-scheme:dark) { :root[data-theme="system"] .rank-icon { filter:brightness(1.08); } :root[data-theme="system"] .distribution-column>div { background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.08) 25%); } :root[data-theme="system"] .hero:after { -webkit-text-stroke-color:rgba(255,255,255,.08); } }
.distribution-summary,.stats-overview { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px; }
.distribution-summary article,.stats-overview article { border:1px solid var(--ink); padding:24px; background:rgba(241,239,232,.72); }
.distribution-summary span,.distribution-summary small,.stats-overview span,.stats-overview small { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; }
.distribution-summary strong,.stats-overview strong,.stats-overview b { display:block; margin:8px 0 4px; font:800 42px var(--font-display); }
.distribution-chart { margin-bottom:18px; border:1px solid var(--ink); padding:22px; background:rgba(241,239,232,.82); }
.distribution-chart>header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.distribution-chart>header span { color:var(--red); font:700 8px var(--font-body); letter-spacing:1.3px; }
.distribution-chart>header h2 { margin:5px 0 0; font:800 27px var(--font-display); text-transform:uppercase; }
.distribution-chart>header small { color:var(--muted); font-size:9px; }
.distribution-chart-scroll { overflow-x:auto; padding:22px 0 4px; }
.distribution-chart-bars { display:grid; grid-template-columns:repeat(var(--bar-count),minmax(62px,1fr)); align-items:end; gap:10px; min-width:max(100%,calc(var(--bar-count) * 70px)); height:310px; }
.distribution-column { height:100%; display:grid; grid-template-rows:22px minmax(0,1fr) 58px; align-items:end; min-width:0; text-align:center; }
.distribution-column>strong { color:var(--ink); font:800 13px var(--font-display); }
.distribution-column>div { position:relative; height:100%; border-bottom:1px solid var(--ink); background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),rgba(17,17,15,.08) 25%); }
.distribution-column>div i { position:absolute; right:10%; bottom:0; left:10%; display:block; background:var(--bar-color); box-shadow:inset 0 3px rgba(255,255,255,.2); transition:height .35s ease,filter .15s; }
.distribution-column:hover>div i { filter:brightness(1.12); }
.distribution-column>span { display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; padding-top:8px; }
.distribution-column>span b { overflow:hidden; font:700 9px var(--font-display); text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.stats-overview { grid-template-columns:repeat(5,1fr); }
.stats-overview b { margin-top:22px; color:var(--red); font-size:28px; }
.distribution-table { border:1px solid var(--ink); background:rgba(241,239,232,.72); }
.distribution-row { display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(3,1fr); align-items:center; min-height:58px; border-bottom:1px solid var(--line); padding:8px 18px; font-size:11px; }
.distribution-row:last-child { border:0; }
.distribution-row>span:first-child { display:flex; align-items:center; gap:12px; }
.distribution-row.heading { min-height:42px; background:var(--ink); color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; }
.player-avatar,.leaderboard,.character-catalog>a,.global-bars,.matchup-overview,.distribution-summary article,.stats-overview article,.distribution-table,.distribution-chart,.global-tier-row { background:var(--surface-soft); }
.distribution-row.heading { background:var(--solid); color:var(--on-solid); }
@media(max-width:900px) { .insight-badges { grid-template-columns:repeat(3,1fr); } }
@media(max-width:720px) { .topbar { height:auto; min-height:var(--header-height); flex-wrap:wrap; gap:12px; padding-top:16px; padding-bottom:12px; } .main-nav { order:3; width:100%; overflow-x:auto; padding-bottom:3px; } .main-nav a { flex:0 0 auto; font-size:9px; } .theme-switcher button { height:26px; padding:0 6px; font-size:6px; } main { width:min(calc(100% - 28px),calc(var(--content-max) / var(--ui-scale))); } .hero { padding-top:60px; min-height:560px; } h1 { letter-spacing:-2px; } .search-row { height:auto; flex-direction:column; gap:8px; } .search input,.search button { width:100%; height:58px; } .metrics { grid-template-columns:1fr 1fr; } .metrics article:nth-child(2) { border-right:0; } .metrics article:nth-child(-n+2) { border-bottom:1px solid var(--ink); } .rating-grid,.rival-grid,.panels,.insight-grid { grid-template-columns:1fr; } .insight-badges { grid-template-columns:repeat(2,1fr); } .player-head { align-items:start; flex-direction:column; gap:24px; } .player-identity { align-items:flex-start; flex-direction:column; } .player-avatar { width:104px; height:104px; flex-basis:104px; } .profile-actions { width:100%; align-items:flex-start; justify-content:space-between; } .main-character { text-align:left; border-right:0; border-left:5px solid var(--red); padding:0 0 0 16px; } .panel { padding:17px; } .panel-title h3 { font-size:26px; } .chart { height:320px; } .chart text { font-size:16px; } .rank-line text { font-size:13px; } .rank-meta,.wins-to-rank { font-size:11px; line-height:1.4; } .insight-badge span { font-size:9px; } .insight-badge small,.character-record small,.activity-timezone { font-size:10px; } .insight-bar { grid-template-columns:80px 1fr 104px; font-size:11px; } .insight-bar small { font-size:9px; } .profile-defeat-card { grid-template-columns:1fr; align-items:start; } .profile-defeat-card>b { padding-left:58px; } footer { align-items:flex-start; flex-direction:column; gap:14px; font-size:11px; line-height:1.5; } .match { grid-template-columns:70px 1.7fr 1fr 80px .8fr; font-size:13px; } .versus .character>span:last-child { display:none; } .explore { padding-top:48px; } .explore-head { align-items:flex-start; flex-direction:column; } .explore-head h1 { font-size:58px; } .leader-row { grid-template-columns:48px 58px minmax(0,1fr); gap:9px; padding:9px; } .leader-row>.character img,.leader-row>.character-fallback { width:52px; height:52px; flex-basis:52px; } .leader-rating { grid-column:2 / 4; justify-content:end; font-size:19px; } .character-catalog { grid-template-columns:1fr; } .global-bar { grid-template-columns:30px 58px minmax(0,1fr); gap:8px; } .global-bar>.character img,.global-bar>.character-fallback { width:52px; height:52px; flex-basis:52px; } .global-bar>small { grid-column:2 / 4; text-align:right; padding-bottom:8px; } .matchup-global-row { grid-template-columns:1fr; gap:8px; padding:12px 0; } .matchup-global-row>.character img,.matchup-global-row>.character-fallback { width:56px; height:56px; flex-basis:56px; } .matchup-global-row>small { text-align:left; padding-bottom:4px; } .distribution-summary,.stats-overview { grid-template-columns:1fr 1fr; } .distribution-row { grid-template-columns:minmax(140px,1.5fr) repeat(3,1fr); min-width:610px; } .distribution-table { overflow-x:auto; } }
@media(max-width:720px) { .tier-characters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .distribution-chart { padding:16px; } .distribution-chart>header { align-items:flex-start; flex-direction:column; gap:7px; } .distribution-chart-bars { grid-template-columns:repeat(var(--bar-count),78px); min-width:calc(var(--bar-count) * 88px); height:290px; } }
@media(max-width:900px) { .global-tier-row>div { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:720px) { .global-tier-row { grid-template-columns:48px minmax(0,1fr); } .global-tier-row>strong { font-size:34px; } .global-tier-row>div { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding:5px; } .global-tier-row article { padding:7px; } .global-tier-character { align-items:flex-start; flex-direction:column; gap:5px; } .global-tier-character .character.large img,.global-tier-character .character.large .character-fallback { width:60px; height:60px; flex-basis:60px; } .global-tier-row dl { grid-template-columns:1fr; } }
@media(max-width:720px) { .distribution-summary,.stats-overview { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { :root { --parallax-y:0px !important; } }