:root {
  --ui-scale:1;
  --content-max:1440px;
  --page-gutter:48px;
  --header-height:72px;
  --header-control-height:34px;
  --panel-padding:22px;
  --control-height:34px;
  --border-width:1px;
  --move-arrow-width:19px;
  --move-arrow-height:16px;
  --move-arrow-mini-size:11px;
  --move-arrow-transition-width:15px;
  --move-arrow-transition-height:13px;
  --move-direction-size:25px;
  --move-motion-size:30px;
  --move-attack-size:24px;
  --move-input-mini-size:13px;
  --tactics-copy-max:620px;
  --tactics-side-min:260px;
  --tactics-summary-height:64px;
  --tactics-heading-size:20px;
  --font-body:"Exo 2",sans-serif;
  --font-display:Teko,sans-serif;
  --font-mono:monospace;
  --font-size-2xs:10px;
  --font-size-xs:11px;
  --font-size-sm:12px;
  --font-size-base:14px;
  --font-size-md:14px;
  --font-size-lg:15px;
  --font-size-xl:16px;
  --font-size-2xl:18px;
  --font-size-3xl:20px;
  --font-size-4xl:24px;
  --space-1:2px;
  --space-2:3px;
  --space-3:4px;
  --space-4:5px;
  --space-5:6px;
  --space-6:7px;
  --space-7:8px;
  --space-8:9px;
  --space-9:10px;
  --space-10:11px;
  --space-11:12px;
  --space-12:14px;
  --space-13:16px;
  --space-14:18px;
  --space-15:20px;
  --space-16:22px;
  --space-17:24px;
  --space-18:26px;
  --space-19:28px;
  --space-20:32px;
  --color-white:#fff;
  --color-black:#111;
  --color-paper-rgb:241,239,232;
  --color-ink-rgb:17,17,15;
  --color-muted-rgb:123,122,116;
  --color-rank-gold:#f2c84b;
  --color-rank-silver:#aaa9a2;
  --color-track:#d7d4cb;
  --color-ink-soft:#c7c5bd;
  --color-hero-stroke:rgba(17,17,15,.09);
  --color-grid-line:rgba(17,17,15,.08);
  --color-overlay-soft:rgba(17,17,15,.08);
  --color-overlay-medium:rgba(17,17,15,.16);
  --color-overlay-strong:rgba(17,17,15,.2);
  --color-overlay-dark:rgba(17,17,15,.72);
  --color-surface-light:rgba(241,239,232,.72);
  --color-surface-raised:rgba(241,239,232,.78);
  --color-surface-panel:rgba(241,239,232,.82);
  --color-button-shadow:rgba(0,0,0,.12);
  --color-button-inset:rgba(0,0,0,.22);
  --color-key-p:#df4f91;
  --color-key-k:#45a8dc;
  --color-key-s:#48a45a;
  --color-key-h:#d1443d;
  --color-key-d:#e99428;
  --color-gauge-mid:#e98b2d;
  --color-gauge-end:#e5cf43;
  --color-frame-startup:#36b37e;
  --color-frame-active:#ff5d5d;
  --color-frame-inactive:#7b7a74;
  --color-frame-recovery:#2f83c2;
  --color-frame-special-recovery:#db69cf;
  --color-frame-projectile:#e65c5c;
  --color-frame-cancel:#e9d704;
  --color-frame-invulnerable:#f0eee8;
  --color-battle-balance:#e48c34;
  --color-battle-rushdown:#397fd7;
  --color-battle-zoning:#c6a976;
  --color-battle-power:#c83c3c;
  --color-battle-unique:#8b5ab5;
  --color-battle-one-shot:#7b1a1e;
  --color-battle-shooting:#42aeca;
  --color-opponent-rating-gradient:linear-gradient(90deg,#8e98a6,#c47b47,#d6b83b,#8bc9f2,#bd74d1);
  --color-avatar-surface:rgba(241,239,232,.8);
  --color-accent-glow:rgba(var(--red-rgb),.12);
  --color-accent-tint-subtle:rgba(var(--red-rgb),.07);
  --color-accent-tint:rgba(var(--red-rgb),.08);
  --color-accent-tint-strong:rgba(var(--red-rgb),.3);
  --color-card-highlight:rgba(255,255,255,.2);
  --color-solid-surface:rgba(17,17,15,.94);
  --shadow-card:0 16px 38px var(--color-overlay-soft);
  --shadow-float:0 20px 50px var(--color-overlay-strong);
  --shadow-tooltip:5px 5px 0 color-mix(in srgb,var(--tooltip-rank-color,var(--red)) 36%,transparent);
  --rank-line-text-shadow:var(--color-white);
  --ink:#11110f;
  --paper:#f1efe8;
  --red:#7B1A1E;
  --red-rgb:123,26,30;
  --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;
  --parallax-ink-y:0px;
  --scrollbar-size:10px;
  --scrollbar-track:rgba(123,122,116,.18);
  --spring:cubic-bezier(.16,1.35,.3,1);
  --smooth:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --ink:#f0eee7;
  --paper:#151513;
  --red:#D94D51;
  --red-rgb:217,77,81;
  --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;
  --color-paper-rgb:21,21,19;
  --color-ink-rgb:240,238,231;
  --color-muted-rgb:170,168,159;
  --color-hero-stroke:rgba(255,255,255,.08);
  --color-grid-line:rgba(255,255,255,.08);
  --color-overlay-soft:rgba(255,255,255,.08);
  --color-overlay-medium:rgba(0,0,0,.28);
  --color-overlay-strong:rgba(0,0,0,.36);
  --color-overlay-dark:rgba(0,0,0,.72);
  --color-surface-light:rgba(27,27,24,.78);
  --color-surface-raised:rgba(27,27,24,.84);
  --color-surface-panel:rgba(27,27,24,.9);
  --color-avatar-surface:rgba(21,21,19,.8);
  --color-solid-surface:rgba(21,21,19,.94);
  --background-wash:rgba(21,21,19,.9);
  --noise-opacity:.06;
  --rank-line-text-shadow:var(--color-black);
  color-scheme:dark;
}
@media(prefers-color-scheme:dark) {
  :root[data-theme="system"] {
    --ink:#f0eee7;
    --paper:#151513;
    --red:#D94D51;
    --red-rgb:217,77,81;
    --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;
    --color-paper-rgb:21,21,19;
    --color-ink-rgb:240,238,231;
    --color-muted-rgb:170,168,159;
    --color-hero-stroke:rgba(255,255,255,.08);
    --color-grid-line:rgba(255,255,255,.08);
    --color-overlay-soft:rgba(255,255,255,.08);
    --color-overlay-medium:rgba(0,0,0,.28);
    --color-overlay-strong:rgba(0,0,0,.36);
    --rank-line-text-shadow:var(--color-black);
    --color-overlay-dark:rgba(0,0,0,.72);
    --color-surface-light:rgba(27,27,24,.78);
    --color-surface-raised:rgba(27,27,24,.84);
    --color-surface-panel:rgba(27,27,24,.9);
    --color-avatar-surface:rgba(21,21,19,.8);
    --color-solid-surface:rgba(21,21,19,.94);
    --background-wash:rgba(21,21,19,.9);
    --noise-opacity:.06;
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
.distribution-chart-scroll,.distribution-table,.matches,.character-records,.character-bars,.day-modal-matches,.character-picker-menu,.stat-roster { scrollbar-width:thin; scrollbar-color:var(--red) var(--scrollbar-track); }
.distribution-chart-scroll::-webkit-scrollbar,.distribution-table::-webkit-scrollbar,.matches::-webkit-scrollbar,.character-records::-webkit-scrollbar,.character-bars::-webkit-scrollbar,.day-modal-matches::-webkit-scrollbar,.character-picker-menu::-webkit-scrollbar,.stat-roster::-webkit-scrollbar { width:var(--scrollbar-size); height:var(--scrollbar-size); }
.distribution-chart-scroll::-webkit-scrollbar-track,.distribution-table::-webkit-scrollbar-track,.matches::-webkit-scrollbar-track,.character-records::-webkit-scrollbar-track,.character-bars::-webkit-scrollbar-track,.day-modal-matches::-webkit-scrollbar-track,.character-picker-menu::-webkit-scrollbar-track,.stat-roster::-webkit-scrollbar-track { border:1px solid var(--line); background:var(--scrollbar-track); }
.distribution-chart-scroll::-webkit-scrollbar-thumb,.distribution-table::-webkit-scrollbar-thumb,.matches::-webkit-scrollbar-thumb,.character-records::-webkit-scrollbar-thumb,.character-bars::-webkit-scrollbar-thumb,.day-modal-matches::-webkit-scrollbar-thumb,.character-picker-menu::-webkit-scrollbar-thumb,.stat-roster::-webkit-scrollbar-thumb { border:2px solid transparent; background:linear-gradient(110deg,var(--red) 0 68%,var(--ink) 68% 76%,var(--red) 76%) padding-box; }
.distribution-chart-scroll::-webkit-scrollbar-thumb:hover,.distribution-table::-webkit-scrollbar-thumb:hover,.matches::-webkit-scrollbar-thumb:hover,.character-records::-webkit-scrollbar-thumb:hover,.character-bars::-webkit-scrollbar-thumb:hover,.day-modal-matches::-webkit-scrollbar-thumb:hover,.character-picker-menu::-webkit-scrollbar-thumb:hover,.stat-roster::-webkit-scrollbar-thumb:hover { background:linear-gradient(110deg,var(--ink) 0 16%,var(--red) 16% 84%,var(--ink) 84%) padding-box; }
.distribution-chart-scroll::-webkit-scrollbar-corner,.distribution-table::-webkit-scrollbar-corner,.matches::-webkit-scrollbar-corner,.character-records::-webkit-scrollbar-corner,.character-bars::-webkit-scrollbar-corner,.day-modal-matches::-webkit-scrollbar-corner,.character-picker-menu::-webkit-scrollbar-corner,.stat-roster::-webkit-scrollbar-corner { background:transparent; }
body { margin:0; 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); font-size:var(--font-size-base); font-synthesis-weight:none; will-change:background-position; }
body:before { content:""; position:fixed; z-index:-1; inset:-80px 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"); transform:translate3d(0,var(--parallax-ink-y),0); will-change:transform; }
.app-loading { overflow:hidden; }
.app-preloader { position:fixed; z-index:100; inset:0; display:grid; place-items:center; background:var(--paper); color:var(--ink); opacity:1; visibility:visible; transition:opacity .35s var(--smooth),visibility .35s,transform .45s var(--smooth); }
.app-preloader:before,.app-preloader:after { content:""; position:absolute; border:1px solid var(--line); border-radius:50%; animation:preloader-orbit 2.4s linear infinite; }
.app-preloader:before { width:min(72vw,560px); aspect-ratio:1; }
.app-preloader:after { width:min(48vw,360px); aspect-ratio:1; animation-direction:reverse; animation-duration:1.8s; }
.app-ready .app-preloader { opacity:0; visibility:hidden; transform:scale(1.08); }
.app-preloader-mark { position:relative; z-index:1; width:min(420px,calc(100vw - 48px)); text-align:center; }
.app-preloader-mark span,.app-preloader-mark small { display:block; color:var(--muted); font-size:9px; letter-spacing:2px; text-transform:uppercase; }
.app-preloader-logo { display:flex; align-items:center; justify-content:center; height:128px; margin:12px 0 22px; }
.app-preloader-logo img { width:min(100%,360px); height:100%; object-fit:contain; }
.app-preloader-logo .preloader-logo-dark { display:none; }
:root[data-theme="dark"] .app-preloader-logo .preloader-logo-light { display:none; }
:root[data-theme="dark"] .app-preloader-logo .preloader-logo-dark { display:block; }
@media(prefers-color-scheme:dark) { :root[data-theme="system"] .app-preloader-logo .preloader-logo-light { display:none; } :root[data-theme="system"] .app-preloader-logo .preloader-logo-dark { display:block; } }
.app-preloader-mark>i { height:3px; display:block; overflow:hidden; background:var(--line); }
.app-preloader-mark>i b { width:45%; height:100%; display:block; background:var(--red); animation:preloader-progress 1.1s var(--smooth) infinite; }
.app-preloader-mark small { margin-top:14px; }
@keyframes preloader-progress { 0% { transform:translateX(-110%) scaleX(.35); } 55% { transform:translateX(120%) scaleX(1); } 100% { transform:translateX(260%) scaleX(.4); } }
@keyframes preloader-orbit { to { transform:rotate(360deg); } }
.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 { width:clamp(150px,12vw,188px); height:54px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; text-decoration:none; transition:transform .5s var(--spring),filter .2s; }
.logo:hover { transform:scale(1.06) rotate(-1deg); }
.logo img { width:100%; height:100%; display:block; object-fit:contain; }
.logo .logo-dark { display:none; }
:root[data-theme="dark"] .logo .logo-light { display:none; }
:root[data-theme="dark"] .logo .logo-dark { display:block; }
@media(prefers-color-scheme:dark) { :root[data-theme="system"] .logo .logo-light { display:none; } :root[data-theme="system"] .logo .logo-dark { display:block; } }
.menu-toggle { display:none; }
.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 var(--color-accent-glow); }
.main-nav { display:flex; align-items:center; gap:1px; }
.main-nav a { padding:7px; border-bottom:2px solid transparent; color:var(--ink); font:700 9px var(--font-body); letter-spacing:.25px; text-decoration:none; text-transform:uppercase; transition:color .2s,border-color .2s,transform .45s var(--spring),background .2s; }
.main-nav a::first-letter { color:var(--red); font-size:1.28em; font-weight:800; }
.main-nav a:hover,.main-nav a.active { border-color:var(--red); color:var(--red); }
.theme-switcher { height:var(--header-control-height); display:flex; flex:0 0 auto; border:1px solid var(--line); }
.theme-switcher button,.theme-switcher .settings-link { height:100%; border:0; border-right:1px solid var(--line); padding:0 8px; background:transparent; color:var(--muted); font:700 9px var(--font-body); text-transform:uppercase; cursor:pointer; transition:background .25s,color .25s,transform .45s var(--spring); }
.theme-switcher button:active,.theme-switcher .settings-link:active { transform:scale(.88); }
.theme-switcher .theme-cycle,.theme-switcher .settings-link { width:var(--header-control-height); display:grid; place-items:center; padding:0; }
.theme-cycle svg { display:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.theme-cycle[data-theme-icon="system"] .theme-icon-system,.theme-cycle[data-theme-icon="light"] .theme-icon-light,.theme-cycle[data-theme-icon="dark"] .theme-icon-dark { display:block; }
.theme-switcher .settings-link { border-right:0; text-decoration:none; }
.theme-switcher .settings-link svg { width:14px; height:14px; fill:currentColor; }
.theme-switcher button:hover,.theme-switcher button.active,.theme-switcher .settings-link:hover { background:var(--red); color:var(--on-solid); }
.settings-page { min-height:calc(100vh - var(--header-height)); padding:70px 0; }
.settings-page>header { max-width:760px; }
.settings-page h1 { margin:8px 0 18px; font-size:70px; }
.settings-page header p { color:var(--muted); font-size:12px; line-height:1.7; }
.settings-panel { max-width:820px; margin-top:34px; border:1px solid var(--ink); padding:28px; background:var(--paper); }
.settings-panel label span,.settings-panel label small { display:block; }
.settings-panel label span { font:italic 800 23px var(--font-display); text-transform:uppercase; }
.settings-panel label small { margin-top:6px; color:var(--muted); font-size:9px; line-height:1.5; }
.settings-token-row { display:flex; margin-top:20px; }
.settings-download { display:inline-flex; margin-top:var(--space-8); padding:var(--space-6) var(--space-10); border:var(--border-width) solid var(--ink); color:var(--ink); font:700 var(--font-size-sm) var(--font-body); text-decoration:none; text-transform:uppercase; }
.settings-token-row input { min-width:0; flex:1; height:52px; border:1px solid var(--ink); padding:0 14px; background:var(--surface); color:var(--ink); font:500 13px var(--font-body); }
.settings-token-row button,.settings-actions button { border:1px solid var(--ink); background:transparent; color:var(--ink); font:700 9px var(--font-body); text-transform:uppercase; cursor:pointer; }
.settings-token-row button { width:76px; border-left:0; }
.settings-actions { display:flex; gap:9px; margin-top:14px; }
.settings-actions button { min-height:40px; padding:0 15px; }
.settings-actions button:first-child { background:var(--red); border-color:var(--red); color:var(--on-solid); }
.settings-status { margin:18px 0 0; color:var(--muted); font-size:10px; }
.about-page { min-height:calc(100vh - var(--header-height)); padding:70px 0 90px; }
.about-hero { max-width:900px; padding-bottom:46px; }
.about-hero h1 { margin:18px 0 26px; font-size:clamp(74px,10vw,126px); }
.about-hero h1 em { color:var(--red); }
.about-hero p { max-width:760px; color:var(--text-secondary); font-size:18px; line-height:1.75; }
.about-story { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); gap:48px; border-top:var(--border-width) solid var(--ink); padding:42px 0; }
.about-story span { color:var(--red); font-size:10px; font-weight:800; letter-spacing:1.8px; }
.about-story h2 { margin:9px 0 0; font:italic 800 clamp(36px,4vw,54px)/.95 var(--font-display); text-transform:uppercase; }
.about-story p { color:var(--text-secondary); font-size:13px; line-height:1.8; }
.about-story p+p { margin-top:16px; }
.about-story a { color:var(--red); font-weight:700; text-decoration:none; }
.about-story a:hover { text-decoration:underline; }
.about-gratitude { border-top:var(--border-width) solid var(--ink); border-bottom:var(--border-width) solid var(--ink); padding:44px 0; }
.about-gratitude>span,.about-foundations article>span,.about-dependencies>header>span,.about-support>span { color:var(--red); font-size:10px; font-weight:800; letter-spacing:1.8px; }
.about-gratitude h2,.about-dependencies h2,.about-support h2 { margin:9px 0 12px; font:italic 800 clamp(38px,5vw,64px)/.95 var(--font-display); text-transform:uppercase; }
.about-gratitude p { max-width:850px; color:var(--text-secondary); font-size:14px; line-height:1.8; }
.about-foundations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:var(--border-width) solid var(--ink); }
.about-foundations article { min-width:0; padding:38px 34px 42px 0; }
.about-foundations article+article { border-left:1px solid var(--ink); padding-right:0; padding-left:34px; }
.about-foundations h2 { margin:10px 0 4px; font:italic 800 clamp(38px,4vw,54px)/1 var(--font-display); text-transform:uppercase; }
.about-foundations strong { color:var(--red); font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.about-foundations p { min-height:112px; margin:20px 0 24px; color:var(--text-secondary); font-size:12px; line-height:1.75; }
.about-foundations a,.about-support a { display:inline-flex; min-height:44px; align-items:center; border:1px solid var(--ink); padding:0 18px; color:var(--ink); font-size:10px; font-weight:800; letter-spacing:.7px; text-decoration:none; text-transform:uppercase; transition:background .2s,color .2s,border-color .2s,transform .4s var(--spring); }
.about-foundations a:hover { border-color:var(--red); background:var(--red); color:var(--on-solid); }
.about-dependencies { padding:48px 0; border-bottom:var(--border-width) solid var(--ink); }
.about-dependencies>header { max-width:760px; }
.about-dependencies>header p { color:var(--muted); font-size:12px; line-height:1.65; }
.about-dependencies>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:28px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.about-dependencies article { min-height:140px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px; background:var(--surface-soft); }
.about-dependencies b { font:italic 800 24px var(--font-display); text-transform:uppercase; }
.about-dependencies article p { margin-top:9px; color:var(--muted); font-size:10px; line-height:1.65; }
.about-support { margin-top:48px; border:var(--border-width) solid var(--ink); border-left:10px solid var(--red); padding:42px; background:var(--surface-soft); }
.about-support p { max-width:820px; margin:0 0 24px; color:var(--text-secondary); font-size:14px; line-height:1.75; }
.about-support a { border-color:var(--red); background:var(--red); color:var(--on-solid); }
.about-support a:hover { background:var(--ink); border-color:var(--ink); transform:translateY(-2px); }
.about-disclaimer { max-width:980px; margin:28px 0 0; color:var(--muted); font-size:9px; line-height:1.7; }
main { width:min(calc(var(--content-max) / var(--ui-scale)),calc(100% - var(--page-gutter))); margin:auto; }
.hero { min-height:610px; margin-bottom:-1px; padding:88px 0 72px; border-bottom:1px solid var(--ink); position:relative; }
.hero:after { content:"R"; position:absolute; right:1%; top:5px; font:italic 800 490px/.95 var(--font-mono); color:transparent; -webkit-text-stroke:1px var(--color-hero-stroke); 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:italic 800 clamp(72px,10vw,132px)/.78 var(--font-display); letter-spacing:-4px; }
.hero h1 { font-size:clamp(48px,8vw,104px); line-height:.84; letter-spacing:-2.5px; }
h1 em { color:var(--red); font-style:normal; }
.hero>p { width:min(590px,100%); color:var(--text-secondary); font-size:var(--font-size-4xl); 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-row input { flex:1; min-width:0; border:1px solid var(--ink); background:var(--field); padding:0 20px; border-radius:0; font:italic 600 20px var(--font-display); outline:none; }
.search-row input:focus { box-shadow:inset 0 -4px var(--red); }
.search-row 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:background .25s,transform .5s var(--spring),box-shadow .5s var(--spring); }
.search-row button:hover { background:var(--red); }
.search-row button:active { transform:scale(.96); }
.search-row 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 .2s,color .2s,background .2s,transform .45s var(--spring); }
.history-chip:hover { border-color:var(--red); background:var(--red); color:var(--on-solid); }
.history-chip:active { transform:scale(.9); }
.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; }
.view-pending { opacity:0 !important; transform:translateY(18px); pointer-events:none; }
.view-enter { animation:view-enter .7s var(--smooth) both; }
.view-enter>.metrics article,.view-enter>.rating-grid>*,.view-enter>.rival-grid>*,.view-enter>.insights,.view-enter>.panels>*,.view-enter>.history,.view-enter .leader-row,.view-enter .character-catalog-card,.view-enter .global-tier-row,.view-enter .distribution-summary article,.view-enter .stats-overview article { animation:material-rise .75s var(--spring) both; }
.view-enter>.metrics article:nth-child(2),.view-enter>.rating-grid>*:nth-child(2),.view-enter>.rival-grid>*:nth-child(2),.view-enter>.panels>*:nth-child(2),.view-enter .leader-row:nth-child(2),.view-enter .character-catalog-card:nth-child(2),.view-enter .distribution-summary article:nth-child(2),.view-enter .stats-overview article:nth-child(2) { animation-delay:.06s; }
.view-enter>.metrics article:nth-child(3),.view-enter>.insights,.view-enter>.history,.view-enter .leader-row:nth-child(3),.view-enter .character-catalog-card:nth-child(3),.view-enter .distribution-summary article:nth-child(3),.view-enter .stats-overview article:nth-child(3) { animation-delay:.12s; }
.view-enter>.metrics article:nth-child(4),.view-enter>.panels,.view-enter .leader-row:nth-child(4),.view-enter .character-catalog-card:nth-child(4),.view-enter .stats-overview article:nth-child(4) { animation-delay:.18s; }
@keyframes view-enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes material-rise { 0% { opacity:0; transform:translateY(34px) scale(.96); } 65% { opacity:1; transform:translateY(-4px) scale(1.008); } 100% { opacity:1; transform:none; } }
.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:var(--color-avatar-surface); }
.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-aliases { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:9px; }
.player-aliases>span { margin-right:3px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.player-aliases>b { border:1px solid var(--line); padding:4px 7px; color:var(--text-secondary); font-size:9px; }
.player-head h2 { margin:8px 0 0; font:italic 800 clamp(52px,7vw,88px)/.9 var(--font-display); text-transform:uppercase; }
.data-freshness { display:block; margin-top:7px; color:var(--muted); font:600 9px var(--font-body); letter-spacing:.7px; 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; }
.replay-load-status { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:-18px 0 20px; border:1px solid var(--line); border-left:5px solid var(--red); padding:13px 16px; background:var(--surface-soft); }
.replay-load-status div { min-width:0; }
.replay-load-status span,.replay-load-status strong,.replay-load-status small { display:block; }
.replay-load-status span { color:var(--red); font-size:9px; font-weight:800; letter-spacing:1.1px; }
.replay-load-status strong { margin:3px 0; font:italic 700 18px var(--font-display); text-transform:uppercase; }
.replay-load-status small { color:var(--muted); font-size:10px; line-height:1.45; }
.replay-load-status button { min-width:160px; height:40px; border:1px solid var(--ink); padding:0 14px; background:var(--paper); color:var(--ink); font:700 9px var(--font-body); letter-spacing:.6px; text-transform:uppercase; cursor:pointer; }
.replay-load-status button:hover { border-color:var(--red); background:var(--red); color:var(--on-solid); }
.replay-load-status button:disabled { opacity:.42; cursor:not-allowed; }
.replay-load-status button.loading { border-color:var(--red); color:var(--red); cursor:progress; }
.replay-load-actions { display:flex; align-items:center; gap:8px; }
.replay-load-status .replay-load-actions button { min-width:150px; }
#force-refresh.refreshing { position:relative; overflow:hidden; border-color:var(--red); color:var(--red); cursor:progress; }
#force-refresh.refreshing:after { content:""; position:absolute; right:0; bottom:0; left:0; height:3px; background:linear-gradient(90deg,transparent,var(--red),transparent); animation:force-refresh-progress 1s var(--smooth) infinite; }
@keyframes force-refresh-progress { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.main-character span { display:block; color:var(--muted); font-size:10px; letter-spacing:2px; }
.main-character strong { font:italic 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 [data-character-guide] { cursor:pointer; transition:transform .45s var(--spring),border-color .2s,box-shadow .45s var(--smooth); }
.character [data-character-guide]:hover,.character [data-character-guide]:focus-visible { border-color:var(--red); outline:0; transform:translateY(-2px) scale(1.06); box-shadow:0 8px 18px var(--color-accent-tint-strong); }
.character-fallback { display:grid; place-items:center; color:var(--red); font:italic 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,minmax(0,1fr)); gap:var(--border-width); border:var(--border-width) solid var(--ink); background:var(--ink); }
.metrics article { min-width:0; padding:24px; background:var(--paper); }
.metrics article.accent { background:var(--red); color:var(--on-solid); }
.metrics span,.metrics small { display:block; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; }
.metrics strong { display:block; font:italic 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; }
.rating-grid>*,.rival-grid>*,.panels>* { min-width:0; }
.rank-card { --rank-color:var(--red); border:1px solid var(--rank-color); padding:var(--panel-padding); background:linear-gradient(135deg,color-mix(in srgb,var(--rank-color) 14%,var(--solid)),var(--solid) 58%); color:var(--on-solid); box-shadow:inset 5px 0 0 color-mix(in srgb,var(--rank-color) 72%,transparent); }
.rank-card .panel-title { border-color:var(--rank-line); }
.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:italic 800 24px/.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:italic 800 36px/.9 var(--font-display); }
.rank-main small { color:var(--rank-muted); font:700 9px var(--font-body); letter-spacing:1.5px; }
.profile-peak-ratings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0 0 15px; }
.profile-peak-ratings>.profile-peak:only-child { grid-column:1 / -1; }
.profile-peak { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:3px 7px; border:1px solid var(--rank-line); padding:10px; }
.profile-peak>span,.profile-peak>time,.profile-peak>.peak-difference { grid-column:1 / -1; }
.profile-peak>span { color:var(--rank-muted); font-size:8px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.profile-peak>div { display:flex; align-items:center; gap:6px; min-width:0; }
.profile-peak>div strong { font:italic 800 16px var(--font-display); white-space:nowrap; }
.profile-peak>div strong small { color:var(--rank-color); font:700 8px var(--font-body); }
.profile-peak>b { grid-column:1 / -1; overflow:hidden; font-size:9px; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.profile-peak>time { color:var(--rank-muted); font-size:8px; }
.profile-peak.unavailable { align-content:center; min-height:83px; }
.peak-difference { display:block; color:var(--rank-color); font-size:8px; font-style:normal; font-weight:800; letter-spacing:.25px; text-transform:uppercase; }
.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:var(--rank-muted); 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; }
.weekly-rating-change { display:flex; align-items:center; gap:10px; min-height:38px; margin-top:12px; border-top:1px solid var(--rank-line); border-bottom:1px solid var(--rank-line); padding:8px 0; }
.weekly-rating-change>span { color:var(--rank-muted); font:700 9px var(--font-body); text-transform:uppercase; }
.weekly-rating-change>strong { font:italic 800 17px var(--font-display); }
.weekly-rating-change>small { margin-left:auto; font:700 9px var(--font-body); }
.weekly-rating-change .positive,.leader-week-change.positive,.leader-week-rating.positive { color:var(--positive); }
.weekly-rating-change .negative,.leader-week-change.negative,.leader-week-rating.negative { color:var(--red); }
.weekly-rating-change .neutral,.leader-week-change.neutral,.leader-week-rating.neutral { color:var(--muted); }
.rating-comparison { margin-top:18px; border-top:1px solid var(--rank-line); padding-top:16px; }
.comparison-loading { display:block; min-height:60px; color:var(--rank-muted); font-size:9px; letter-spacing:.7px; text-transform:uppercase; }
.comparison-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.comparison-head>span { color:var(--rank-color); font-size:9px; font-weight:800; letter-spacing:1.1px; }
.comparison-head>small { color:var(--rank-muted); font-size:9px; }
.comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.comparison-grid article { min-width:0; border:1px solid var(--rank-line); padding:11px; }
.comparison-grid article>span,.comparison-grid article>small { display:block; }
.comparison-grid article>span { color:var(--rank-muted); font-size:9px; font-weight:700; text-transform:uppercase; }
.comparison-grid article>strong { display:block; margin:3px 0; color:var(--on-solid); font:italic 800 28px var(--font-display); }
.comparison-grid article>small { min-height:20px; color:var(--rank-muted); font-size:10px; line-height:1.45; }
.comparison-grid article>i { height:4px; display:block; margin-top:9px; overflow:hidden; background:var(--rank-line); }
.comparison-grid article>i b { height:100%; display:block; background:linear-gradient(90deg,var(--rank-color),var(--color-rank-gold)); }
.rating-chart { display:flex; flex-direction:column; }
.rating-chart .chart { flex:1 1 300px; height:auto; min-height:300px; }
.rating-chart-title { position:relative; }
.rating-chart-controls { display:flex; gap:3px; margin-left:auto; }
.rating-chart-controls button,.rating-date-picker button { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); padding:0; background:var(--paper); color:var(--ink); cursor:pointer; }
.rating-chart-controls button:hover,.rating-date-picker button:hover,.rating-chart-controls button[aria-expanded="true"] { border-color:var(--red); background:var(--red); color:var(--on-solid); transform:translateY(-2px); }
.rating-chart-controls button:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.rating-chart-controls svg,.rating-date-picker svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rating-date-picker { display:flex; align-items:end; gap:8px; margin:12px 0 2px; border:1px solid var(--line); padding:10px; background:var(--surface-soft); }
.rating-date-picker[hidden] { display:none; }
.rating-date-picker label { min-width:0; flex:1; }
.rating-date-picker label span { display:block; margin-bottom:5px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.rating-date-picker input { width:100%; height:34px; border:1px solid var(--line); padding:0 8px; background:var(--paper); color:var(--ink); color-scheme:light dark; font:600 10px var(--font-body); }
.rating-chart-range { min-height:14px; padding-top:4px; color:var(--muted); font-size:9px; font-weight:600; letter-spacing:.25px; text-transform:uppercase; }
.rating-chart.chart-loading .chart { opacity:.45; }
.rating-chart.chart-loading .rating-chart-range:after { content:' · Loading older matches'; color:var(--red); }
.chart { position:relative; height:280px; padding-top:6px; }
.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-player-line-shadow,.chart-player-line { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.chart-player-line-shadow { stroke:var(--paper); stroke-width:6; opacity:.85; }
.chart-player-line { stroke:var(--ink); stroke-width:2.5; }
.chart-axis { stroke:var(--line); stroke-width:1; }
.rank-line line { stroke:var(--rank-color); stroke-width:1; stroke-dasharray:5 5; stroke-opacity:.68; vector-effect:non-scaling-stroke; }
.rank-line text { fill:var(--rank-color); font-size:9px; font-weight:800; text-transform:uppercase; filter:drop-shadow(1px 1px 0 var(--rank-line-text-shadow)); text-shadow:0 0 1px var(--rank-line-text-shadow); }
.chart-day-line { stroke:var(--line); stroke-width:1; stroke-dasharray:2 5; vector-effect:non-scaling-stroke; }
.chart-day-label line { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.chart .chart-day-label text { fill:var(--muted); font-size:9px; font-weight:600; letter-spacing:.2px; text-transform:uppercase; }
.chart-point { cursor:crosshair; outline:none; }
.chart-point-hit { fill:transparent; pointer-events:all; }
.chart-point-dot { pointer-events:none; stroke:var(--paper); stroke-width:1; vector-effect:non-scaling-stroke; transition:r .14s,stroke-width .14s; }
.chart-point:hover .chart-point-dot,.chart-point:focus .chart-point-dot { r:4px; stroke-width:1.5; }
.chart-point.selected .chart-point-dot { r:3px; stroke:var(--red); stroke-width:1.25; }
.chart-point.selected:hover .chart-point-dot,.chart-point.selected:focus .chart-point-dot { r:4px; stroke-width:1.5; }
.chart-current-point { pointer-events:none; }
.chart-tooltip { position:fixed; z-index:20; min-width:128px; max-width:calc(100vw - 16px); pointer-events:none; padding:10px 12px; border:1px solid var(--tooltip-rank-color,var(--ink)); background:var(--ink); color:var(--on-solid); box-shadow:var(--shadow-tooltip); }
.chart-tooltip strong,.chart-tooltip span,.chart-tooltip small { display:block; }
.chart-tooltip>b { display:block; max-width:180px; overflow:hidden; font:italic 800 17px var(--font-display); text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.chart-tooltip>b+small { margin-top:2px; }
.chart-tooltip strong { font:italic 800 19px var(--font-display); }
.chart-tooltip span { margin-top:3px; color:var(--tooltip-rank-color,var(--red)); font:700 10px var(--font-body); text-transform:uppercase; letter-spacing:.7px; }
.chart-tooltip small { margin-top:7px; color:var(--rank-muted); font-size:9px; }
.chart-tooltip .chart-tooltip-player { margin-top:7px; color:var(--on-solid); font-weight:700; }
.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:italic 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:italic 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:italic 700 15px var(--font-display); }
.rival-footer b i,.rival-footer b em { font-style:normal; }
.rival-footer b i { color:var(--positive); }
.rival-footer b em { color:var(--red); }
.rival-empty { min-height:142px; display:grid; place-items:center; color:var(--muted); font-size:12px; }
.floor-source-empty,.match-source-empty { display:grid; place-items:center; align-content:center; gap:7px; min-height:142px; padding:20px; border:1px dashed var(--line); text-align:center; }
.floor-source-empty b,.match-source-empty b { color:var(--red); font:italic 800 17px var(--font-display); text-transform:uppercase; }
.floor-source-empty span,.match-source-empty span { max-width:520px; color:var(--muted); font-size:10px; line-height:1.5; }
.match-source-empty { margin-top:18px; }
.insights { margin-top:22px; }
.insight-badges { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:20px; border:1px solid var(--ink); background:transparent; }
.insight-badge { min-width:0; border:0; border-right:1px solid var(--ink); padding:18px 15px; background:var(--paper); }
.insight-badge:last-child { border-right:0; }
.insight-badge span,.insight-badge small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.insight-badge span { color:var(--muted); font:700 9px 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:italic 800 25px/.9 var(--font-display); text-transform:uppercase; white-space:nowrap; }
.insight-badge small { color:var(--muted); font-size:9px; }
.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 9px 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 9px var(--font-body); letter-spacing:1px; }
.insight-grid header>div { text-align:right; }
.insight-grid h4 { margin:0; font:italic 700 19px var(--font-display); text-transform:uppercase; }
.activity-timezone { display:block; margin-top:2px; color:var(--muted); font-size:9px; }
.insight-bars { padding-top:14px; }
.floor-insight { grid-template-columns:minmax(90px,auto) minmax(80px,1fr) auto minmax(130px,auto); }
.floor-insight-rating { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.floor-rating { display:flex; flex-direction:column; min-width:88px; }
.floor-rating b { font-size:9px; line-height:1.1; }
.floor-rating small { color:var(--muted); font-size:9px; text-align:left; }
.insight-bar { display:grid; grid-template-columns:88px 1fr 88px; align-items:center; gap:10px; margin:4px 0; font-size:9px; }
.insight-bar>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.insight-bar-track { height:5px; background:var(--track); }
.insight-bar-track i { display:block; height:100%; background:var(--red); }
.insight-bar small { color:var(--muted); text-align:right; }
.weekday-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.weekday-item { min-width:0; display:grid; justify-items:center; gap:4px; text-align:center; }
.weekday-ring { position:relative; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--red) var(--weekday-fill),var(--track) 0); }
.weekday-ring:before { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--surface-soft); }
.weekday-ring span { position:relative; z-index:1; color:var(--ink); font:700 8px var(--font-body); letter-spacing:.2px; }
.weekday-item strong { overflow:hidden; max-width:100%; color:var(--text-secondary); font:italic 700 12px var(--font-display); text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.weekday-item small { color:var(--muted); font-size:8px; white-space:nowrap; }
.time-of-day-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.time-of-day-item { min-width:0; display:grid; justify-items:center; gap:4px; text-align:center; }
.time-of-day-icon { position:relative; width:48px; height:48px; display:block; color:var(--muted); }
.time-of-day-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }
.time-of-day-icon-filled { position:absolute; inset:0; clip-path:inset(calc(100% - var(--time-fill)) 0 0); color:var(--red); }
.time-of-day-item strong { overflow:hidden; max-width:100%; font:italic 700 15px var(--font-display); text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.time-of-day-item small { overflow:hidden; max-width:100%; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.character-records { min-height:174px; max-height:340px; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); align-content:start; gap:9px; overflow:auto; padding-top:8px; }
.character-record { width:100%; min-width:0; height:102px; max-height:102px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; border:1px solid var(--line); padding:8px; background:var(--surface-soft); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.character-record:hover { border-color:var(--red); background:color-mix(in srgb,var(--red) 6%,var(--surface-soft)); transform:translateY(-2px); }
.character-record:focus-visible,.character-record.active { border-color:var(--red); outline:0; background:color-mix(in srgb,var(--red) 10%,var(--surface-soft)); box-shadow:inset 4px 0 var(--red); }
.character-record>.character { min-width:0; max-width:100%; justify-self:start; text-align:left; }
.character-record .character img,.character-record .character-fallback { width:40px; height:40px; flex-basis:40px; }
.character-record>.character>span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.character-record>span:last-child { min-width:120px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; justify-content:start; gap:2px 7px; border-left:1px solid var(--line); padding-left:8px; text-align:left; }
.character-record>span>.rank-icon { grid-row:1 / span 3; }
.character-record b { display:flex; align-items:baseline; justify-content:flex-start; gap:5px; font:italic 800 18px var(--font-display); white-space:nowrap; }
.character-record small { color:var(--muted); font-size:9px; }
.character-record-unit { margin:0; color:var(--red) !important; font:700 9px/1 var(--font-body); text-transform:uppercase; }
.character-record-date,.character-record .legend-mark { grid-column:2; }
.legend-mark { color:var(--red) !important; font-weight:700; text-transform:uppercase; }
.profile-defeat { padding-top:8px; }
.profile-defeat-card { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:8px 0; }
.profile-defeat-card:last-child { border-bottom:0; }
.profile-defeat-card>span { color:var(--red); font:800 12px var(--font-body); letter-spacing:1px; }
.profile-defeat-player { min-width:0; display:grid; grid-template-columns:220px minmax(0,1fr); align-items:center; gap:16px; }
.profile-defeat-player .character { width:220px; min-width:0; }
.profile-defeat-player .character img,.profile-defeat-player .character-fallback { width:42px; height:42px; flex-basis:42px; }
.profile-defeat-player .character>span:last-child { overflow:hidden; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.profile-defeat-player>div { min-width:0; text-align:center; }
.profile-defeat-player a,.profile-defeat-player small { display:block; }
.profile-defeat-player a { overflow:hidden; text-overflow:ellipsis; color:var(--ink); font:italic 800 18px 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:9px; text-transform:uppercase; }
.profile-defeat-card>b { display:flex; align-items:center; gap:6px; font:italic 800 19px/1 var(--font-display); white-space:nowrap; }
.profile-defeat-card>b small { margin:0; color:var(--red); font:700 10px/1 var(--font-body); }
.tower-section { margin-top:22px; }
.tower-section .panel-title>strong { margin-left:auto; color:var(--red); font:italic 800 24px var(--font-display); text-transform:uppercase; }
.tower-section .insight-bars { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; }
.settings-panel>header>span,.settings-panel>header>small { display:block; }
.settings-panel>header>span { font:italic 800 23px var(--font-display); text-transform:uppercase; }
.settings-panel>header>small { margin-top:6px; color:var(--muted); font-size:9px; }
.settings-theme { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; }
.settings-theme button { min-height:52px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:italic 800 16px var(--font-display); text-transform:uppercase; cursor:pointer; }
.settings-theme button.active { border-color:var(--red); background:var(--red); color:var(--on-solid); }
.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); transition:transform .55s var(--spring),box-shadow .55s var(--spring),border-color .25s; }
.panel:hover { transform:translateY(-3px); box-shadow:var(--shadow-card); }
.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:italic 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; }
.match-type-tabs { margin-left:auto; }
.match-type-badge { display:inline-block; margin-right:6px; border:1px solid var(--line); padding:2px 5px; color:var(--muted); font-size:9px; letter-spacing:.5px; text-transform:uppercase; }
.match-type-badge.ranked { border-color:var(--red); color:var(--red); }
.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; }
.selected-chart-day { margin-left:auto; border:1px solid var(--red); padding:5px 8px; background:var(--color-accent-tint); color:var(--red); font-size:9px !important; letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; }
.selected-chart-day[hidden] { display:none; }
.selected-chart-day+.panel-action { margin-left:0; }
.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:var(--on-solid); }
.panel-tools { display:flex; align-items:center; gap:8px; margin-left:auto; }
.panel-filter,.explore-filter,.character-picker-search { height:var(--control-height); border:1px solid var(--line); border-radius:0; padding:0 10px; background:var(--paper); color:var(--ink); font:600 9px var(--font-body); }
.panel-filter { width:132px; height:27px; }
.explore-filter { width:min(280px,100%); }
.character-picker-search { grid-column:1 / -1; width:100%; }
.panel-empty { min-height:72px; display:grid; place-items:center; border:1px dashed var(--line); color:var(--muted); font-size:9px; text-align:center; }
.bars,.matchups { padding-top:20px; }
.character-bars { max-height:min(760px,calc((100vh - 140px)/var(--ui-scale))); overflow-y:scroll; overscroll-behavior:contain; padding-right:var(--space-4); scrollbar-gutter:stable; container-type:inline-size; }
.bar { margin:0 0 12px; }
.character-select { display:block; width:100%; border:0; padding:12px; background:transparent; color:inherit; text-align:left; cursor:pointer; transition:background .15s; }
.character-select:hover,.character-select.active { background:var(--color-accent-tint-subtle); }
.character-select.active { box-shadow:inset 3px 0 var(--red); }
.character-select:hover .character-current,.character-select:hover .character-peak,.character-select:focus-visible .character-current,.character-select:focus-visible .character-peak { border-color:rgba(255,255,255,.42); }
.character-select:hover .character-rating-label,.character-select:hover .character-current>small,.character-select:hover .character-peak>time,.character-select:hover .character-sample small,.character-select:focus-visible .character-rating-label,.character-select:focus-visible .character-current>small,.character-select:focus-visible .character-peak>time,.character-select:focus-visible .character-sample small { color:rgba(255,255,255,.78); }
.character-select:hover .character-rating-value strong,.character-select:hover .character-peak>.peak-difference,.character-select:focus-visible .character-rating-value strong,.character-select:focus-visible .character-peak>.peak-difference { color:var(--on-solid); }
.character-select:hover .character-rating-value strong small,.character-select:focus-visible .character-rating-value strong small { color:var(--on-solid); }
.character-select:hover .bar-fill,.character-select:focus-visible .bar-fill { background:var(--on-solid); }
.bar-label,.matchup { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.bar-label b { font-weight:600; }
.character-row { display:grid; grid-template-columns:minmax(145px,1.25fr) minmax(120px,.9fr) minmax(140px,1fr) minmax(90px,.7fr); align-items:center; gap:12px; min-width:0; }
.character-identity { min-width:0; }
.character-identity>.character { width:100%; }
.character-identity .character img,.character-identity .character-fallback { width:56px; height:56px; flex-basis:56px; }
.character-identity .character>span:last-child { overflow:hidden; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.character-current,.character-peak { min-width:0; display:grid; align-content:center; gap:3px; border-left:1px solid var(--line); padding-left:12px; }
.character-rating-label { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.character-rating-value { min-width:0; display:flex; align-items:center; gap:7px; }
.character-rating-value strong { overflow:hidden; color:var(--ink); font:italic 800 16px var(--font-display); text-overflow:ellipsis; white-space:nowrap; }
.character-rating-value strong small { color:var(--red); font:700 8px var(--font-body); }
.character-current>small,.character-peak>time { overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.character-peak>.peak-difference { overflow:hidden; color:var(--red); text-overflow:ellipsis; white-space:nowrap; }
.character-peak.unavailable { min-height:56px; color:var(--muted); font-size:8px; text-transform:uppercase; }
.character-sample { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; min-width:0; border-left:1px solid var(--line); padding-left:12px; text-align:right; }
.character-sample span { min-width:0; }
.character-sample strong,.character-sample small { display:block; }
.character-sample strong { overflow:hidden; font:italic 800 14px var(--font-display); text-overflow:ellipsis; white-space:nowrap; }
.character-sample small { margin-top:2px; color:var(--muted); font-size:7px; letter-spacing:.4px; text-transform:uppercase; }
.bar-track { height:4px; display:block; background:var(--track); margin-top:10px; }
.bar-fill { height:100%; display:block; background:var(--red); }
@container (max-width:640px) { .character-row { grid-template-columns:minmax(120px,1.1fr) repeat(2,minmax(105px,1fr)); gap:10px; } .character-sample { grid-column:1 / -1; border-top:1px solid var(--line); border-left:0; padding-top:8px; padding-left:0; text-align:left; } }
@container (max-width:420px) { .character-row { grid-template-columns:repeat(2,minmax(0,1fr)); } .character-identity { grid-column:1 / -1; } .character-current { border-left:0; padding-left:0; } }
.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; }
.matchup-record>b,.tier-character b { color:var(--tier-color); }
.matchup-wins { color:var(--positive); font-weight:700; }
.matchup-losses { color:var(--red); font-weight:700; }
.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:var(--on-solid); font:italic 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:italic 700 14px var(--font-display); }
.tier-character small { overflow:hidden; color:var(--muted); font-size:9px; 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:italic 800 13px var(--font-display); text-align:center; text-transform:uppercase; }
.history { margin-top:22px; }
.opponent-rating-panel { margin-top:22px; }
.opponent-rating-panel .chart { width:100%; min-height:320px; }
.opponent-rating-tabs { margin-left:auto; }
.opponent-rating-legend { display:flex; align-items:center; justify-content:flex-end; gap:16px; padding-top:10px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.opponent-rating-legend[hidden] { display:none; }
.opponent-rating-legend span { display:flex; align-items:center; gap:6px; }
.opponent-rating-legend i { width:22px; height:3px; display:block; }
.opponent-rating-legend .opponent-series { background:var(--color-opponent-rating-gradient); }
.opponent-rating-legend .player-series { background:var(--ink); box-shadow:0 0 0 1px var(--paper); }
.pagination.loading { opacity:.55; pointer-events:none; }
.pagination-gap { width:22px; display:grid; place-items:center; color:var(--muted); font-weight:700; }
.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:var(--positive); }
.match b { font-weight:600; }
.versus { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; }
.versus .character { gap:5px; }
.versus>.character:first-child { justify-content:flex-end; }
.versus>.character:last-child { justify-content:flex-start; }
.versus .character img,.versus .character-fallback { width:60px; height:60px; flex-basis:60px; }
.versus i { margin:6px 16px 0; color:var(--red); font:italic 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 { display:flex; align-items:center; gap:5px; font-weight:600; }
.rating-delta { min-width:35px; font-style:normal; color:var(--muted); }
.rating-delta.positive { color:var(--positive); }
.rating-delta.negative { color:var(--red); }
.match small { color:var(--muted); }
.match-set { border-bottom:1px solid var(--line); }
.match-set:last-child { border-bottom:0; }
.set-summary { min-width:1120px; display:grid; grid-template-columns:22px 38px minmax(145px,0.6fr) minmax(280px,1.4fr) minmax(145px,0.6fr) minmax(170px,0.6fr) minmax(210px,0.8fr); align-items:center; gap:12px; padding:14px 0; }
.match-participant { min-width:0; font-size:12px; }
.match-participant>b { font-size:12px; }
.match-participant>small { display:flex; align-items:center; gap:6px; margin-top:3px; font-size:10px; font-weight:700; text-transform:uppercase; }
.match-participant>small>.rank-icon+span { color:var(--ink); }
.player-match-rating { display:block; overflow:hidden; text-align:right; }
.player-match-rating>b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-match-rating>small { justify-content:flex-end; }
.rating-gap-cell .rating-gap { margin-top:0; }
.set-toggle { width:22px; height:32px; display:grid; place-items:center; border:0; padding:0; background:transparent; cursor:pointer; }
.set-chevron { width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); transition:transform .25s var(--spring),border-color .2s; }
.set-toggle:hover .set-chevron,.set-toggle:focus-visible .set-chevron { border-color:var(--on-solid); }
.match-set.open .set-chevron { transform:rotate(45deg); }
.set-score { font:italic 800 25px var(--font-display); }
.set-score.win { color:var(--positive); }
.set-score.loss { color:var(--red); }
.set-score.draw { color:var(--muted); }
.set-summary>small { min-width:0; color:var(--muted); white-space:nowrap; }
.set-summary>.opponent-link small { display:flex; align-items:center; gap:6px; }
.set-summary>.opponent-link .rating-delta { min-width:0; font-size:9px; }
.set-details { min-width:820px; border-top:1px solid var(--line); background:var(--surface-soft); transform-origin:top; }
.set-details-head { display:grid; grid-template-columns:58px 66px minmax(140px,1fr) minmax(168px,.8fr) minmax(140px,1fr) minmax(110px,.75fr); align-items:center; gap:var(--space-7); border-bottom:1px solid var(--line); padding:6px 8px 6px 48px; color:var(--muted); font:700 9px var(--font-body); letter-spacing:.5px; text-transform:uppercase; }
.set-details article { display:grid; grid-template-columns:58px 66px minmax(140px,1fr) minmax(168px,.8fr) minmax(140px,1fr) minmax(110px,.75fr); align-items:center; gap:var(--space-7); min-height:42px; border-bottom:1px solid var(--line); padding:4px 8px 4px 48px; }
.match-side-rating { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
.match-side-rating>b { min-width:0; display:flex; align-items:center; gap:var(--space-4); white-space:nowrap; }
.match-side-rating .rating-delta { min-width:0; display:grid; justify-items:end; gap:1px; font-style:normal; font-weight:700; white-space:nowrap; }
.match-side-rating .rating-delta small { color:var(--muted); font-size:9px; font-weight:600; text-transform:uppercase; }
.set-details article>.rating-gap { margin-top:0; }
.rating-gap { width:max-content; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px; margin-top:5px; border:1px solid color-mix(in srgb,currentColor 44%,var(--line)); border-left:4px solid currentColor; padding:4px 7px 4px 5px; background:linear-gradient(125deg,color-mix(in srgb,currentColor 20%,transparent),color-mix(in srgb,currentColor 6%,transparent)); box-shadow:inset 0 1px color-mix(in srgb,currentColor 28%,transparent); color:var(--muted); font-style:normal; line-height:1.05; }
.rating-gap>i { display:grid; place-items:center; width:16px; height:16px; border:1px solid currentColor; border-radius:50%; background:var(--on-solid); color:inherit; box-shadow:0 1px 3px var(--color-overlay-medium); font-style:normal; font-size:10px; font-weight:800; }
.rating-gap>span { display:grid; grid-template-columns:auto auto; align-items:center; gap:1px 5px; }
.rating-gap small { grid-column:1 / -1; margin:0; color:inherit; font:700 9px var(--font-body); letter-spacing:.55px; text-transform:uppercase; }
.rating-gap b { color:currentColor; font:800 10px var(--font-body); white-space:nowrap; }
.rating-gap em { color:currentColor; font:700 9px var(--font-body); font-style:normal; white-space:nowrap; }
.rating-gap.higher { color:var(--positive); }
.rating-gap.lower { color:var(--red); }
.rating-gap.equal { color:var(--muted); }
.rating-gap.unavailable { display:grid; border-left-color:var(--line); background:var(--surface-soft); color:var(--muted); }
.match-set.open .set-details article { animation:set-detail-row-in .42s var(--spring) both; }
.match-set.open .set-details article:nth-child(2) { animation-delay:.045s; }
.match-set.open .set-details article:nth-child(3) { animation-delay:.09s; }
.match-set.open .set-details article:nth-child(4) { animation-delay:.135s; }
@keyframes set-detail-row-in { from { opacity:0; transform:translateY(-9px); } to { opacity:1; transform:none; } }
.set-details article:last-child { border-bottom:0; }
.set-details article>b { font:italic 800 12px var(--font-display); text-transform:uppercase; }
.set-details time,.set-details article>span:nth-last-child(2) { color:var(--muted); font-size:9px; }
.set-details article>i { justify-self:end; }
.opponent-link { display:block; overflow:hidden; color:var(--ink); font-size:12px; font-weight:600; text-decoration:none; }
.opponent-link>b,.opponent-link>small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opponent-link>small { display:flex; align-items:center; gap:5px; margin-top:3px; color:var(--red); font-size:10px; font-weight:700; text-transform:uppercase; }
.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:var(--on-solid); }
.pagination button:disabled { opacity:.28; cursor:not-allowed; }
.pagination .pagination-nav { border-color:var(--ink); font-size:15px; }
.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:var(--on-solid); }
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>span { max-width:680px; text-align:right; }
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:350px; border:1px solid var(--ink); padding:16px; background:var(--paper); box-shadow:8px 8px 0 var(--color-overlay-medium); }
.modal-open .player-preview { z-index:40; }
.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 var(--color-overlay-strong); }
.toast[hidden] { display:none; }
.toast div { min-width:0; }
.toast strong,.toast span { display:block; }
.toast strong { margin-bottom:6px; color:var(--red); font:italic 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:var(--color-overlay-dark); 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:italic 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:var(--on-solid); }
.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:italic 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 .preview-player-link,.preview-head small { display:block; }
.preview-head .preview-player-link { max-width:180px; overflow:hidden; color:var(--ink); text-overflow:ellipsis; font:italic 800 24px var(--font-display); text-decoration:none; text-transform:uppercase; white-space:nowrap; }
.preview-head .preview-player-link:hover { color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.preview-head small { margin-top:3px; color:var(--muted); font-size:9px; text-transform:uppercase; }
.preview-rating { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.preview-rating>span>strong,.preview-rating>span>b { display:block; }
.preview-rating>span>strong { font:italic 800 21px var(--font-display); }
.preview-rating>span>strong small { color:var(--red); font:700 9px var(--font-body); }
.preview-rating>span>b { margin-top:2px; color:var(--muted); font-size:9px; text-transform:uppercase; }
.preview-peaks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:10px 0; border-bottom:1px solid var(--line); }
.preview-peaks>.preview-peak:only-child { grid-column:1 / -1; }
.preview-peaks>.preview-peak:last-child:nth-child(odd) { grid-column:1 / -1; }
.preview-peak { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 5px; border:1px solid var(--line); padding:8px; }
.preview-peak>span,.preview-peak>time,.preview-peak>.peak-difference { grid-column:1 / -1; }
.preview-peak>span { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.preview-peak>div { display:flex; align-items:center; gap:5px; min-width:0; }
.preview-peak>div strong { font:italic 800 14px var(--font-display); white-space:nowrap; }
.preview-peak>div strong small { color:var(--red); font:700 7px var(--font-body); }
.preview-peak>b { grid-column:1 / -1; overflow:hidden; font-size:8px; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.preview-peak>time { color:var(--muted); font-size:8px; }
.preview-peak>.peak-difference { color:var(--red); }
.preview-peak.unavailable { align-content:center; min-height:76px; }
.preview-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:13px 0; }
.preview-stats.loading { opacity:.58; }
.preview-stats span { min-width:0; }
.preview-stats small,.preview-stats b { display:block; }
.preview-stats small { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.7px; }
.preview-stats b { margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:italic 700 17px var(--font-display); }
.preview-recent { display:grid; gap:7px; padding:0 0 12px; border-bottom:1px solid var(--line); }
.preview-recent>span { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:9px; letter-spacing:.7px; text-transform:uppercase; }
.preview-recent>span small { font-size:7px; font-weight:700; letter-spacing:.4px; white-space:nowrap; }
.preview-recent>div { display:grid; grid-template-columns:repeat(10,30px); gap:1px; justify-content:space-between; }
.preview-result { display:block; width:100%; height:100%; border:0; background:var(--line); clip-path:polygon(18% 0,100% 0,82% 100%,0 100%); }
.preview-result.win,.preview-result.draw,.preview-result.loss { animation:preview-result-fill .42s var(--spring) both; }
.preview-result.win { background:var(--positive); }
.preview-result.draw { background:var(--muted); }
.preview-result.loss { background:var(--red); }
.preview-result.pending { opacity:.35; }
.preview-result:nth-child(1) { animation-delay:.04s; }
.preview-result:nth-child(2) { animation-delay:.12s; }
.preview-result:nth-child(3) { animation-delay:.20s; }
.preview-result:nth-child(4) { animation-delay:.28s; }
.preview-result:nth-child(5) { animation-delay:.36s; }
.preview-result:nth-child(6) { animation-delay:.44s; }
.preview-result:nth-child(7) { animation-delay:.52s; }
.preview-result:nth-child(8) { animation-delay:.60s; }
.preview-result:nth-child(9) { animation-delay:.68s; }
.preview-result:nth-child(10) { animation-delay:.76s; }
@keyframes preview-result-fill { from { opacity:.25; clip-path:polygon(0 0,0 0,0 100%,0 100%); transform:translateX(-3px); } 68% { opacity:1; transform:translateX(1px); } to { opacity:1; clip-path:polygon(18% 0,100% 0,82% 100%,0 100%); transform:none; } }
.counter-flip { display:inline-block; transform-origin:50% 70%; backface-visibility:hidden; animation:counter-flip .13s cubic-bezier(.2,.75,.25,1) both; will-change:transform,opacity,filter; }
@keyframes counter-flip { 0% { opacity:.62; filter:blur(.6px); transform:perspective(320px) rotateX(-52deg) translateY(-3px) scale(.97); } 68% { opacity:1; filter:blur(0); transform:perspective(320px) rotateX(7deg) translateY(1px) scale(1.012); } 100% { opacity:1; filter:none; transform:perspective(320px) rotateX(0) translateY(0) scale(1); } }
.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 - 388px); 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:var(--text-secondary); font-size:var(--font-size-3xl); 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; }
.tier-rank-controls { align-self:end; display:flex; flex-wrap:wrap; gap:6px; }
.tier-filter { min-width:142px; display:grid; gap:3px; }
.tier-filter>span { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.tier-filter select { width:100%; }
.explore-controls button,.explore-controls select,.explore-back,.board-tab { 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; }
.board-tab { display:inline-flex; align-items:center; }
.explore-controls button.active,.explore-controls button:hover,.explore-back:hover,.board-tab:hover,.board-tab.active { background:var(--red); border-color:var(--red); color:var(--on-solid); }
.character-picker { position:relative; z-index:8; }
.explore-controls .character-picker-trigger { display:flex; min-width:210px; align-items:center; justify-content:space-between; gap:16px; padding:4px 12px; text-transform:none; }
.explore-controls .character-picker-trigger:hover,.explore-controls .character-picker-trigger[aria-expanded="true"] { background:var(--surface); border-color:var(--red); color:var(--ink); }
.character-picker-trigger .character { gap:8px; font-size:11px; }
.character-picker-trigger .character img,.character-picker-trigger .character-fallback { width:34px; height:34px; flex-basis:34px; }
.character-picker-trigger>i { width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .25s var(--spring); }
.character-picker-trigger[aria-expanded="true"]>i { transform:translateY(3px) rotate(225deg); }
.character-picker-menu { position:absolute; top:calc(100% + 8px); left:0; width:min(720px,calc(100vw - 32px)); max-height:min(520px,70vh); overflow:auto; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; border:1px solid var(--ink); padding:10px; background:var(--surface-strong); box-shadow:var(--shadow-float); backdrop-filter:blur(18px); }
.character-picker-menu:not([hidden]) { display:grid; animation:picker-in .38s var(--spring) both; }
.explore-controls .character-picker-option { height:64px; min-width:0; padding:5px 8px; background:transparent; border-color:var(--line); color:var(--ink); text-align:left; text-transform:none; }
.explore-controls .character-picker-option:hover,.explore-controls .character-picker-option.active { border-color:var(--red); background:var(--color-accent-tint); color:var(--ink); }
.character-picker-option .character { width:100%; gap:7px; font-size:9px; line-height:1.15; white-space:normal; }
.character-picker-option .character img,.character-picker-option .character-fallback { width:46px; height:46px; flex:0 0 46px; }
@keyframes picker-in { from { opacity:0; transform:translateY(-12px) scale(.97); } to { opacity:1; transform:none; } }
.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; }
.profile-loading { min-height:520px; display:grid; place-items:center; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--surface-soft); }
.profile-loading[hidden] { display:none; }
.profile-loader { display:flex; align-items:center; flex-direction:column; padding:52px 24px; text-align:center; }
.profile-loader i { width:58px; height:58px; margin-bottom:28px; border:3px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:profile-loader-spin .8s linear infinite; }
.profile-loader span { color:var(--red); font-size:9px; font-weight:700; letter-spacing:1.8px; }
.profile-loader strong { margin-top:8px; font:italic 800 clamp(38px,6vw,76px)/.95 var(--font-display); text-transform:uppercase; overflow-wrap:anywhere; }
.profile-loader small { min-height:18px; margin-top:16px; color:var(--muted); font-size:11px; transform-origin:center; }
@keyframes profile-loader-spin { to { transform:rotate(360deg); } }
.stream-placeholder { min-height:86px; width:100%; display:grid; place-items:center; align-content:center; gap:10px; padding:16px; color:var(--muted); font-size:10px; letter-spacing:.7px; text-align:center; text-transform:uppercase; }
.stream-placeholder i { width:min(180px,70%); height:7px; display:block; background:linear-gradient(90deg,var(--line) 20%,var(--surface-soft) 45%,var(--line) 70%); background-size:240% 100%; animation:stream-placeholder 1.15s linear infinite; }
.profile-streaming .replay-load-status { border-color:var(--red); }
.profile-streaming #load-more-matches.loading { min-width:170px; }
.profile-streaming #insight-badges>.stream-placeholder { grid-column:1 / -1; }
.profile-streaming #rating-chart>.stream-placeholder,.profile-streaming #opponent-rating-chart>.stream-placeholder { min-height:260px; }
.profile-streaming #main-character>.stream-placeholder { min-height:54px; padding:8px; }
@keyframes stream-placeholder { to { background-position:-240% 0; } }
.leaderboard { border:1px solid var(--ink); background:var(--color-surface-light); }
.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:var(--color-accent-tint-subtle); box-shadow:inset 4px 0 var(--red); }
.explore-content.table-page-loading .leaderboard { opacity:.42; transform:translateY(5px); pointer-events:none; }
.explore-content.table-page-loading .leaderboard,.explore-content.table-page-enter .leaderboard { transition:opacity .28s var(--smooth),transform .45s var(--spring); }
.explore-content.table-page-enter .leader-row { animation:table-row-enter .55s var(--spring) both; }
.explore-content.table-page-enter .leader-row:nth-child(2) { animation-delay:.035s; }
.explore-content.table-page-enter .leader-row:nth-child(3) { animation-delay:.07s; }
.explore-content.table-page-enter .leader-row:nth-child(4) { animation-delay:.105s; }
.explore-content.table-page-enter .leader-row:nth-child(5) { animation-delay:.14s; }
.explore-content.table-page-enter .leader-row:nth-child(6) { animation-delay:.175s; }
.explore-content.table-page-enter .leader-row:nth-child(7) { animation-delay:.21s; }
.explore-content.table-page-enter .leader-row:nth-child(8) { animation-delay:.245s; }
.explore-content.table-page-enter .leader-row:nth-child(9) { animation-delay:.28s; }
.explore-content.table-page-enter .leader-row:nth-child(10) { animation-delay:.315s; }
@keyframes table-row-enter { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }
.leader-row>.character>span:last-child { display:none; }
.leader-position { color:var(--red); font:italic 800 28px var(--font-display); }
.leader-position .leader-week-change { display:block; margin-top:2px; font:700 9px var(--font-body); font-style:normal; text-transform:uppercase; white-space:nowrap; }
.leader-name { min-width:0; overflow:hidden; text-overflow:ellipsis; font:italic 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:italic 800 24px var(--font-display); }
.leader-rating small { color:var(--red); font:700 9px var(--font-body); }
.leader-rating .leader-week-rating { grid-column:1 / -1; justify-self:end; font:700 9px var(--font-body); font-style:normal; white-space:nowrap; }
.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:var(--on-solid); }
.explore-pagination:empty { display:none; }
.explore-pagination-top { margin-bottom:12px; padding:0 0 12px; border-top:0; border-bottom:1px solid var(--line); }
.character-catalog { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.character-catalog-card { min-width:0; border:1px solid var(--line); background:var(--surface-soft); }
.character-catalog-identity { min-height:116px; display:flex; align-items:center; gap:14px; padding:12px; }
.character-catalog-identity strong { min-width:0; overflow-wrap:anywhere; }
.character-catalog-meta { min-width:0; }
.character-catalog-meta .battle-type-button { margin-top:var(--space-3); }
.character-catalog-meta .difficulty-scale { margin-top:var(--space-3); }
.secondary-style { display:block; margin-top:var(--space-2); color:var(--red); font:600 var(--font-size-xs) var(--font-body); letter-spacing:.2px; }
.secondary-style.is-placeholder { visibility:hidden; }
.global-tier-character .secondary-style { margin-top:var(--space-2); }
.character-catalog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); }
.character-catalog-actions a { min-width:0; min-height:64px; display:flex; justify-content:center; flex-direction:column; padding:10px 12px; color:var(--ink); text-decoration:none; }
.character-catalog-actions a+a { border-left:1px solid var(--line); }
.character-catalog-actions a:hover { background:var(--red); color:var(--on-solid); }
.character-catalog-actions a:hover small { color:var(--on-solid); }
.character-catalog-actions b { font:italic 800 14px var(--font-display); text-transform:uppercase; }
.character-catalog strong,.character-catalog small { display:block; }
.character-catalog strong { font:italic 800 24px var(--font-display); text-transform:uppercase; }
.character-catalog small { margin-top:5px; color:var(--muted); font-size:9px; }
.character-guide { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.character-guide>* { min-width:0; }
.character-guide-hero { min-height:430px; display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1fr); align-items:center; overflow:hidden; border:1px solid var(--ink); background:var(--solid); color:var(--on-solid); }
.character-guide-portrait { height:100%; min-height:430px; display:grid; place-items:end center; overflow:hidden; background:linear-gradient(135deg,var(--color-accent-tint-strong),transparent 60%); }
.character-guide-portrait img { width:100%; height:100%; max-height:600px; display:block; object-fit:contain; object-position:center bottom; }
.character-guide-hero>div:last-child { padding:48px; }
.character-guide-hero span,.guide-section header>span,.guide-section header>div>span { color:var(--red); font-size:9px; font-weight:800; letter-spacing:1.5px; }
.character-guide-hero h2 { margin:8px 0 16px; font:italic 800 clamp(54px,7vw,96px)/.82 var(--font-display); text-transform:uppercase; }
.character-playstyle { display:block; margin:-4px 0 18px; color:var(--red); font:italic 800 18px var(--font-display); letter-spacing:.5px; text-transform:uppercase; }
.character-data-version { display:inline-block; margin:-6px 0 12px; border-left:3px solid var(--red); padding:4px 0 4px 9px; color:var(--rank-muted); font:700 9px var(--font-body); letter-spacing:.7px; text-transform:uppercase; }
.character-guide-hero p { max-width:650px; color:var(--rank-muted); font-size:13px; line-height:1.7; }
.character-guide-hero a,.guide-source a { color:var(--red); font-size:10px; font-weight:700; }
.guide-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--ink); }
.guide-metrics article { min-width:0; padding:24px; background:var(--surface-soft); }
.guide-metrics article+article { border-left:1px solid var(--line); }
.guide-metrics span,.guide-metrics small { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; }
.guide-metrics strong { display:block; margin:6px 0; font:italic 800 42px var(--font-display); }
.guide-section { border:1px solid var(--ink); padding:24px; background:var(--surface-soft); }
.guide-section>header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.guide-section h2 { margin:4px 0 0; font:italic 800 30px var(--font-display); text-transform:uppercase; }
.character-stats-section { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--surface-soft),var(--paper)); }
.character-stats-section::after { position:absolute; top:-76px; right:-46px; width:190px; height:190px; border:28px solid var(--color-accent-tint); border-radius:50%; content:""; pointer-events:none; }
.character-stats-section>header { position:relative; z-index:1; align-items:flex-start; }
.character-stats-section>header small { display:block; max-width:390px; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.35; }
.stat-groups { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.stat-groups article { min-width:0; }
.stat-group-card { overflow:hidden; border:1px solid var(--line); background:var(--paper); box-shadow:inset 3px 0 0 var(--red); }
.stat-group-card>header { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:52px; padding:9px 12px; border-bottom:1px solid var(--line); background:linear-gradient(110deg,var(--color-accent-tint),transparent 78%); }
.stat-group-card>header i { display:grid; width:26px; height:26px; place-items:center; color:var(--paper); background:var(--red); font:italic 800 11px var(--font-display); letter-spacing:.05em; }
.stat-groups h3 { margin:0; color:var(--red); font:italic 800 18px var(--font-display); line-height:.95; text-transform:uppercase; }
.stat-group-card>header small { color:var(--muted); font-size:9px; text-align:right; white-space:nowrap; }
.stat-group-card dl { padding:0 12px 7px; }
.stat-groups dl,.move-card dl { margin:0; }
.stat-groups dl>div,.move-card dl>div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; border-top:1px solid var(--line); padding:8px 0; }
.stat-group-card .stat-item { cursor:pointer; transition:background .2s ease,padding .2s ease; }
.stat-group-card .stat-item:hover { margin:0 -5px; padding-right:5px; padding-left:5px; background:var(--color-accent-tint); }
.stat-group-card .stat-item:focus-visible { margin:0 -5px; outline:2px solid var(--red); outline-offset:-2px; padding-right:5px; padding-left:5px; background:var(--color-accent-tint); }
.stat-groups dt,.stat-groups dd,.move-card dt,.move-card dd { margin:0; font-size:9px; }
.stat-groups dt,.move-card dt { color:var(--muted); }
.stat-groups dd,.move-card dd { max-width:160px; color:var(--ink); font-weight:800; text-align:right; }
.stat-groups dt>span { display:block; }
.stat-gauge { width:100%; height:9px; position:relative; display:block; margin-top:7px; overflow:hidden; background:repeating-linear-gradient(90deg,var(--track) 0 calc(10% - 2px),var(--paper) calc(10% - 2px) 10%); box-shadow:inset 0 0 0 1px var(--line); }
.stat-gauge b { position:absolute; inset:0; display:block; background:repeating-linear-gradient(90deg,var(--stat-color) 0 calc(10% - 2px),transparent calc(10% - 2px) 10%); clip-path:inset(0 calc(100% - var(--stat-value)) 0 0); filter:saturate(1.08); transition:clip-path .55s var(--smooth); }
.stat-range { display:flex; justify-content:space-between; gap:8px; margin-top:3px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.03em; }
.stat-modal { width:min(1040px,100%); max-height:min(760px,calc((100vh - 48px)/var(--ui-scale))); display:flex; flex-direction:column; }
.stat-modal-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--ink); }
.stat-modal-summary>div { min-height:92px; display:flex; align-items:center; gap:14px; padding:12px 26px; }
.stat-modal-summary>div+div { align-items:flex-start; justify-content:center; flex-direction:column; border-left:1px solid var(--line); }
.stat-modal-summary .character.large img,.stat-modal-summary .character.large .character-fallback { width:62px; height:62px; flex-basis:62px; }
.stat-modal-summary .character.large>span:last-child { display:none; }
.stat-modal-summary span,.stat-modal-summary small,.stat-modal-summary strong { display:block; }
.stat-modal-summary small { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; }
.stat-modal-summary strong { color:var(--stat-color); font:italic 800 25px var(--font-display); }
.stat-modal-summary>div>span:last-child { color:var(--muted); font-size:9px; }
.stat-roster { max-height:520px; min-height:0; flex:1; overflow:auto; padding:0 26px 18px; }
.stat-roster-row { min-height:58px; display:grid; grid-template-columns:30px minmax(160px,.75fr) minmax(80px,.35fr) minmax(180px,1.4fr); align-items:center; gap:12px; border-bottom:1px solid var(--line); padding:6px 8px; }
.stat-roster-row.current { background:color-mix(in srgb,var(--stat-color) 10%,transparent); box-shadow:inset 4px 0 0 var(--stat-color); }
.stat-roster-row>b { color:var(--muted); font:italic 800 14px var(--font-display); }
.stat-roster-row.current>b { color:var(--stat-color); }
.stat-roster-row .character { min-width:0; font-weight:800; }
.stat-roster-row .character img,.stat-roster-row .character-fallback { width:42px; height:42px; flex-basis:42px; }
.stat-roster-value { color:var(--ink); font:italic 800 18px var(--font-display); text-align:right; }
.stat-roster-track { height:12px; position:relative; display:block; overflow:hidden; background:repeating-linear-gradient(90deg,var(--track) 0 calc(10% - 2px),var(--paper) calc(10% - 2px) 10%); box-shadow:inset 0 0 0 1px var(--line); }
.stat-roster-track>b { position:absolute; inset:0; background:repeating-linear-gradient(90deg,var(--stat-color) 0 calc(10% - 2px),transparent calc(10% - 2px) 10%); clip-path:inset(0 calc(100% - var(--roster-value)) 0 0); }
.stat-roster-track>em { width:3px; position:absolute; top:0; bottom:0; left:clamp(0px,var(--roster-value),calc(100% - 3px)); background:var(--ink); box-shadow:0 0 0 1px var(--paper); }
.guide-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.guide-matchups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--space-11); }
.guide-matchups article { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:7px 0; }
.guide-matchups .character>span:last-child { font-weight:700; }
.guide-matchups article>span strong,.guide-matchups article>span small { display:block; text-align:right; }
.guide-matchups article>span strong { color:var(--positive); font:italic 800 20px var(--font-display); }
.guide-matchups.counters article>span strong { color:var(--red); }
.guide-matchups article>span small { color:var(--muted); font-size:9px; }
.guide-section ul { margin:0; padding-left:18px; }
.guide-section li { margin:8px 0; font-size:11px; line-height:1.65; }
.playstyle-columns .guide-section ul { display:grid; gap:8px; padding:0; list-style:none; }
.playstyle-item { min-height:62px; display:grid; grid-template-columns:5px minmax(0,1fr); gap:12px; margin:0!important; border-bottom:1px solid var(--line); padding:8px 0 12px; }
.playstyle-item:last-child { border-bottom:0; }
.playstyle-item>i { display:block; background:linear-gradient(180deg,var(--positive),transparent); }
.playstyle-item.con>i { background:linear-gradient(180deg,var(--red),transparent); }
.playstyle-item strong,.playstyle-item small { display:block; }
.playstyle-item strong { font:italic 800 16px var(--font-display); text-transform:uppercase; }
.playstyle-item small { margin-top:3px; color:var(--muted); font-size:11px; line-height:1.55; }
.counterstrategy-section { overflow:hidden; background:linear-gradient(135deg,var(--surface-soft),var(--paper)); }
.counterstrategy-section>header { align-items:flex-start; }
.counterstrategy-section>header small { display:block; max-width:var(--tactics-copy-max); margin-top:var(--space-3); color:var(--muted); font-size:var(--font-size-md); line-height:1.5; }
.counterstrategy-section>header>a { flex:0 0 auto; border:var(--border-width) solid var(--red); padding:var(--space-5) var(--space-9); color:var(--red); font-size:var(--font-size-md); font-weight:800; text-decoration:none; text-transform:uppercase; }
.counterstrategy-section>header>a:hover { background:var(--red); color:var(--on-solid); }
.tactics-overview { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(var(--tactics-side-min),.65fr); border:var(--border-width) solid var(--ink); }
.tactics-overview>article,.tactics-overview>aside { min-width:0; padding:var(--space-15); }
.tactics-overview>article { background:var(--solid); color:var(--on-solid); }
.tactics-overview>aside { border-left:var(--border-width) solid var(--ink); background:var(--color-accent-tint); }
.tactics-overview span { display:block; margin-bottom:var(--space-7); color:var(--red); font-size:var(--font-size-sm); font-weight:800; letter-spacing:.12em; }
.tactics-overview p { margin:0; color:var(--rank-muted); font-size:var(--font-size-xl); line-height:1.7; }
.tactics-overview ul { margin:0; padding-left:var(--space-13); }
.tactics-overview li { margin:var(--space-4) 0; font-size:var(--font-size-lg); line-height:1.5; }
.tactics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:var(--space-9); margin-top:var(--space-9); }
.tactics-grid>.guide-empty { grid-column:1 / -1; }
.tactics-card { min-width:0; border:var(--border-width) solid var(--line); background:var(--paper); transition:border-color .25s var(--smooth),box-shadow .35s var(--smooth),transform .35s var(--spring); }
.tactics-card[open] { border-color:var(--red); box-shadow:inset var(--space-3) 0 0 var(--red); }
.tactics-card>summary { min-height:var(--tactics-summary-height); display:grid; grid-template-columns:var(--space-20) minmax(0,1fr) var(--space-12); align-items:center; gap:var(--space-9); padding:var(--space-9) var(--space-11); cursor:pointer; list-style:none; }
.tactics-card>summary::-webkit-details-marker { display:none; }
.tactics-card>summary>i { color:var(--red); font:italic 800 var(--font-size-3xl) var(--font-display); }
.tactics-card>summary span,.tactics-card>summary small,.tactics-card>summary strong { display:block; }
.tactics-card>summary small { color:var(--muted); font-size:var(--font-size-sm); font-weight:800; letter-spacing:.1em; }
.tactics-card>summary strong { margin-top:var(--space-2); font:italic 800 var(--tactics-heading-size) var(--font-display); text-transform:uppercase; }
.tactics-card>summary>b { width:var(--space-12); height:var(--space-12); position:relative; display:block; }
.tactics-card>summary>b::before,.tactics-card>summary>b::after { position:absolute; top:50%; right:0; left:0; height:var(--border-width); background:var(--red); content:""; transition:transform .35s var(--spring); }
.tactics-card>summary>b::after { transform:rotate(90deg); }
.tactics-card[open]>summary>b::after { transform:rotate(0); }
.tactics-card-content { border-top:var(--border-width) solid var(--line); padding:0 var(--space-11) var(--space-9) calc(var(--space-20) + var(--space-9) + var(--space-11)); }
.tactics-card-content article { border-top:var(--border-width) solid var(--line); padding:var(--space-9) 0; }
.tactics-card-content article:first-child { border-top:0; }
.tactics-card-content h3 { margin:0 0 var(--space-3); color:var(--red); font:italic 800 var(--font-size-3xl) var(--font-display); text-transform:uppercase; }
.tactics-card-content p { margin:0; color:var(--text-secondary); font-size:var(--font-size-lg); line-height:1.65; }
.move-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.move-settings-open { min-width:150px; min-height:38px; display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); padding:0 11px; background:var(--paper); color:var(--ink); font:italic 800 11px var(--font-display); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; cursor:pointer; }
.move-settings-open span { display:block; min-width:max-content; }
.move-settings-open svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.move-settings-open[aria-expanded="true"] { border-color:var(--red); color:var(--red); }
.movelist-settings-modal { width:min(680px,100%); max-height:min(680px,calc((100vh - 48px)/var(--ui-scale))); }
.movelist-settings-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.movelist-settings-content>section { min-width:0; padding:22px; }
.movelist-settings-content>section+section { border-left:1px solid var(--line); }
.movelist-settings-content>section>header { min-height:76px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.movelist-settings-content>section>header span { color:var(--red); font-size:9px; font-weight:800; letter-spacing:.08em; }
.movelist-settings-content>section>header h3 { margin:4px 0 2px; font:italic 800 23px var(--font-display); text-transform:uppercase; }
.movelist-settings-content>section>header small { color:var(--muted); font-size:9px; line-height:1.4; }
.move-guard-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; padding-top:10px; }
.move-guard-menu label { min-height:36px; display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:9px; padding:4px 7px; color:var(--ink); font:700 10px var(--font-body); cursor:pointer; }
.move-guard-menu label:hover { background:var(--color-accent-tint); color:var(--red); }
.move-guard-menu input { width:18px; height:18px; position:absolute; opacity:0; pointer-events:none; }
.move-guard-menu label>i { width:18px; height:18px; display:grid; place-items:center; border:1px solid var(--line); background:var(--paper); }
.move-guard-menu label>i::after { width:8px; height:4px; border-bottom:2px solid var(--on-solid); border-left:2px solid var(--on-solid); content:""; opacity:0; transform:translateY(-1px) rotate(-45deg) scale(.6); transition:opacity .18s,transform .3s var(--spring); }
.move-guard-menu input:checked+i { border-color:var(--red); background:var(--red); }
.move-guard-menu input:checked+i::after { opacity:1; transform:translateY(-1px) rotate(-45deg) scale(1); }
.move-guard-menu label:has(input:focus-visible) { outline:2px solid var(--red); outline-offset:-2px; }
.move-section input[type="search"] { width:min(280px,100%); height:38px; border:1px solid var(--line); padding:0 12px; background:var(--paper); color:var(--ink); font:600 10px var(--font-body); }
.move-detail-toggle { min-height:38px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); padding:0 10px; background:var(--paper); color:var(--muted); font:italic 800 11px var(--font-display); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; cursor:pointer; }
.move-detail-toggle input { width:1px; height:1px; position:absolute; opacity:0; pointer-events:none; }
.move-detail-toggle>i { width:30px; height:16px; position:relative; flex:0 0 30px; border:1px solid var(--line); border-radius:999px; background:var(--track); transition:background .25s var(--smooth),border-color .25s var(--smooth); }
.move-detail-toggle>i::after { width:10px; height:10px; position:absolute; top:2px; left:3px; border-radius:50%; background:var(--muted); box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 35%,transparent); content:""; transition:transform .35s var(--spring),background .25s var(--smooth); }
.move-detail-toggle input:checked+i { border-color:var(--red); background:var(--color-accent-tint-strong); }
.move-detail-toggle input:checked+i::after { transform:translateX(13px); background:var(--red); }
.move-detail-toggle:has(input:checked) { border-color:var(--red); color:var(--red); background:var(--color-accent-tint); }
.move-detail-toggle:focus-within { outline:2px solid var(--red); outline-offset:2px; }
.movelist-display-options { display:grid; gap:7px; padding-top:10px; }
.movelist-display-options .move-detail-toggle { justify-content:space-between; }
.move-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.move-category { margin-top:20px; }
.move-category[hidden] { display:none; }
.move-category>header { min-height:42px; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:10px; border-bottom:1px solid var(--ink); padding:0 2px 8px; }
.move-category>header>span { display:grid; width:30px; height:30px; place-items:center; background:var(--red); color:var(--on-solid); font:italic 800 11px var(--font-display); }
.move-category>header h3 { margin:0; font:italic 800 24px var(--font-display); text-transform:uppercase; }
.move-category>header small { color:var(--muted); font-size:9px; text-transform:uppercase; }
.move-card { min-width:0; border:1px solid var(--line); padding:12px; }
.move-card[hidden] { display:none; }
.move-card>img { width:100%; aspect-ratio:16/9; display:block; border:1px solid var(--line); background:var(--color-black); object-fit:contain; }
.move-visual,.move-visual-static { width:100%; aspect-ratio:16/9; display:block; position:relative; overflow:hidden; border:1px solid var(--line); padding:0; background:var(--color-black); }
.move-visual::before { display:none; }
.move-visual img,.move-visual-static img { width:100%; height:100%; display:block; object-fit:contain; transition:opacity .35s var(--smooth),transform .55s var(--spring); }
.move-visual .hitbox-image { position:absolute; inset:0; opacity:0; transform:scale(1.035); }
.move-card.show-hitbox .move-visual .move-image,.show-all-hitboxes .move-visual .move-image { opacity:0; transform:scale(.97); }
.move-card.show-hitbox .move-visual .hitbox-image,.show-all-hitboxes .move-visual .hitbox-image { opacity:1; transform:none; }
.move-visual>span { display:flex; position:absolute; right:6px; bottom:6px; overflow:hidden; border:1px solid var(--line); background:var(--surface-strong); color:var(--ink); font-size:9px; text-transform:uppercase; }
.move-visual>span b { padding:3px 6px; }
.move-visual>span b:last-child { color:var(--muted); }
.move-card.show-hitbox .move-visual>span b:first-child,.show-all-hitboxes .move-visual>span b:first-child { color:var(--muted); }
.move-card.show-hitbox .move-visual>span b:last-child,.show-all-hitboxes .move-visual>span b:last-child { background:var(--red); color:var(--on-solid); }
.move-heading { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; }
.move-card h3 { min-width:0; margin:0; font:italic 800 21px var(--font-display); text-transform:uppercase; }
.move-card dl { display:none; }
.move-section.move-details-visible .move-card dl { display:block; }
.move-section.move-frame-charts-hidden .move-frame-chart { display:none; }
.move-input-legend { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin-bottom:14px; border-bottom:1px solid var(--line); padding:0 0 14px; color:var(--muted); font-size:9px; }
.move-input-legend>span { display:flex; align-items:center; gap:6px; }
.move-input-legend>small { margin-left:auto; font-size:9px; }
.frame-legend>i { width:13px; height:9px; position:relative; display:block; border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.frame-legend.startup>i,.move-frame-chart i.startup { background:var(--color-frame-startup); }
.frame-legend.active>i,.move-frame-chart i.active { background:var(--color-frame-active); }
.frame-legend.inactive>i,.move-frame-chart i.inactive { background:var(--color-frame-inactive); }
.frame-legend.recovery>i,.move-frame-chart i.recovery { background:var(--color-frame-recovery); }
.frame-legend.special-recovery>i,.move-frame-chart i.special,.move-frame-chart i.special-recovery { background:var(--color-frame-special-recovery); }
.frame-legend.projectile>i,.move-frame-chart i.projectile { background:var(--color-frame-projectile); }
.frame-legend.projectile>i::after,.move-frame-chart i.projectile::after { width:4px; height:4px; position:absolute; top:2px; right:2px; border:1px solid var(--color-overlay-medium); border-radius:50%; background:var(--color-white); content:""; }
.frame-legend.cancel-window>i { background:var(--track); box-shadow:inset 0 -3px var(--color-frame-cancel); }
.frame-legend.startup-invulnerable>i,.move-frame-chart i.startup-invulnerable { background:repeating-linear-gradient(135deg,transparent 0 2px,var(--color-frame-invulnerable) 2px 4px),var(--color-frame-startup); }
.move-frame-chart { margin:0 0 9px; border:1px solid var(--line); padding:7px; background:var(--surface-soft); }
.move-frame-chart>header { display:flex; justify-content:space-between; gap:8px; margin-bottom:5px; font-size:9px; }
.move-frame-chart>header small { color:var(--muted); }
.move-frame-chart>div { min-height:18px; display:flex; align-items:center; flex-wrap:wrap; gap:3px; }
.move-frame-chart>div>i { width:20px; height:18px; position:relative; display:grid; flex:0 0 20px; place-items:center; border:1px solid color-mix(in srgb,var(--ink) 24%,transparent); background:var(--track); color:var(--color-white); font:700 9px/1 var(--font-mono); font-style:normal; text-shadow:0 1px 1px var(--color-overlay-dark); }
.move-frame-chart>div>i>span { position:relative; z-index:1; }
.move-frame-chart i.cancel-window { box-shadow:inset 0 -3px var(--color-frame-cancel); }
.move-gatlings { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:8px; margin:8px 0; font-size:9px; }
.move-gatlings>strong { color:var(--muted); text-transform:uppercase; }
.move-gatlings>span { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:3px; }
.gatling-notation { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px; vertical-align:middle; }
.gatling-notation .move-key.direction { width:20px; height:20px; }
.gatling-notation .move-key.direction.motion { width:24px; height:24px; }
.gatling-notation .move-key.attack { width:20px; height:20px; }
.gatling-notation .move-prefix { min-width:27px; height:28px; grid-template-rows:17px 8px; padding:0 3px; }
.gatling-notation .move-prefix b { font-size:12px; }
.gatling-notation .move-prefix small { font-size:9px; }
.gatling-separator { display:inline-grid; min-width:16px; height:16px; place-items:center; margin:0 2px; border:1px solid var(--red); background:var(--color-accent-tint-strong); color:var(--red); font:800 7px/1 var(--font-display); font-style:normal; letter-spacing:.03em; }
.gatling-label { display:inline-block; }
.move-tips { margin:8px 0 2px; border-left:3px solid var(--red); padding:7px 8px; background:var(--color-accent-tint); }
.move-section.move-tips-hidden .move-tips { display:none; }
.move-tips>strong { color:var(--red); font:italic 800 12px var(--font-display); text-transform:uppercase; }
.move-tips ul { margin:3px 0 0; padding-left:14px; }
.move-tips li { margin:4px 0; font-size:11px; line-height:1.55; }
.move-inputs { display:grid; justify-items:end; gap:4px; }
.move-input-route { max-width:100%; display:flex; align-items:center; justify-content:flex-end; gap:4px; color:var(--red); }
.move-input-route small { color:var(--muted); font-size:8px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.move-input-route b { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:3px; color:var(--ink); font:italic 800 12px/1 var(--font-display); overflow-wrap:anywhere; }
.move-input-route>i,.move-input-route b>i { width:17px; height:17px; display:grid; flex:0 0 17px; place-items:center; color:var(--red); font-style:normal; }
.move-input-route .move-arrow { width:17px; height:17px; }
.move-input-sequence { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:3px; }
.move-input-transition { width:100%; height:16px; display:grid; place-items:center; position:relative; color:var(--red); overflow:hidden; }
.move-input-transition::before { width:1px; height:100%; position:absolute; top:-8px; background:linear-gradient(180deg,transparent,var(--red) 45%,transparent); content:""; }
.move-input-transition i { z-index:1; padding:0 4px; background:var(--surface-soft); font:italic 800 16px/1 var(--font-display); animation:move-input-flow 1.8s var(--smooth) infinite; }
.move-key { display:grid; place-items:center; position:relative; flex:0 0 auto; font-style:normal; font-weight:800; }
.move-key.direction { width:var(--move-direction-size); height:var(--move-direction-size); }
.move-key.direction.motion { width:var(--move-motion-size); height:var(--move-motion-size); }
.move-input-icon { width:100%; height:100%; display:block; object-fit:contain; }
.move-input-icon.mini { width:var(--move-input-mini-size); height:var(--move-input-mini-size); }
.move-arrow { width:var(--move-arrow-width); height:var(--move-arrow-height); display:block; overflow:visible; transform:rotate(var(--arrow-rotation,0deg)); transform-origin:center; filter:drop-shadow(1px 1px 0 color-mix(in srgb,var(--ink) 16%,transparent)); }
.move-arrow .arrow-main { fill:currentColor; }
.move-arrow .arrow-accent { fill:var(--red); }
.move-arrow.neutral { transform:none; }
.move-arrow.mini { width:var(--move-arrow-mini-size); height:var(--move-arrow-mini-size); color:var(--ink); }
.move-arrow.transition { width:var(--move-arrow-transition-width); height:var(--move-arrow-transition-height); color:var(--ink); }
.move-key.attack { width:var(--move-attack-size); height:var(--move-attack-size); }
.move-prefix { min-width:34px; height:36px; display:grid; grid-template-rows:22px 10px; place-items:center; border:1px solid var(--line); padding:1px 5px; background:var(--paper); color:var(--ink); font-weight:800; }
.move-prefix b { font:italic 800 15px var(--font-display); }
.move-prefix small { color:var(--muted); font-size:9px; letter-spacing:.3px; text-transform:uppercase; }
.move-prefix.j b { color:var(--red); line-height:1; }
.move-prefix.f b { display:flex; align-items:center; gap:2px; }
.plus { color:var(--muted); font-size:10px; }
@keyframes move-input-flow { 0%,100% { transform:translateY(-2px); } 50% { transform:translateY(2px); } }
.gatling-section>header small { display:block; margin-top:4px; color:var(--muted); font-size:9px; }
.gatling-section>article+article { margin-top:18px; }
.gatling-section article>h3 { margin:0 0 8px; color:var(--red); font:italic 800 20px var(--font-display); text-transform:uppercase; }
.gatling-table-scroll { max-width:100%; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--red) var(--scrollbar-track); }
.gatling-table { min-width:780px; border:1px solid var(--line); }
.gatling-table>header,.gatling-table>div { display:grid; grid-template-columns:72px repeat(6,minmax(100px,1fr)); }
.gatling-table>header { background:var(--ink); color:var(--paper); }
.gatling-table>header .gatling-notation { min-height:20px; }
.gatling-table>header b,.gatling-table>div>* { min-width:0; border-right:1px solid var(--line); padding:7px; font-size:9px; text-align:center; }
.gatling-table>header b:last-child,.gatling-table>div>*:last-child { border-right:0; }
.gatling-table>div { border-top:1px solid var(--line); }
.gatling-table>div:nth-child(odd) { background:var(--surface-soft); }
.gatling-table>div strong { color:var(--red); font:italic 800 13px var(--font-display); }
.gatling-table .empty { color:var(--muted); }
.gatling-route-depths { margin-top:12px; border:1px solid var(--line); background:var(--surface-soft); }
.gatling-route-depths>header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); }
.gatling-route-depths>header b { color:var(--red); font:italic 800 14px var(--font-display); text-transform:uppercase; }
.gatling-route-depths>header small { color:var(--muted); font-size:9px; }
.gatling-route-scroll { max-width:100%; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--red) var(--scrollbar-track); }
.gatling-route-table { min-width:1080px; }
.gatling-route-table>header,.gatling-route-table>div { display:grid; grid-template-columns:88px repeat(5,minmax(190px,1fr)); }
.gatling-route-table>header { background:var(--ink); color:var(--paper); }
.gatling-route-table>header b { border-right:1px solid color-mix(in srgb,var(--paper) 24%,transparent); padding:7px; font:italic 800 12px var(--font-display); text-align:center; text-transform:uppercase; }
.gatling-route-table>header b:last-child { border-right:0; }
.gatling-route-table>div { min-height:48px; border-top:1px solid var(--line); }
.gatling-route-table>div:nth-child(odd) { background:var(--paper); }
.gatling-route-table>div>strong { display:grid; place-items:center; min-width:0; border-right:1px solid var(--line); padding:7px; }
.gatling-route-depth { min-width:0; display:flex; align-items:center; padding:7px; border-right:1px solid var(--line); }
.gatling-route-depth:last-child { border-right:0; }
.gatling-route-depth b { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:3px; }
.gatling-route-depth.empty b { color:var(--muted); font:700 13px/1 var(--font-mono); }
.gatling-route-item { display:inline-flex; align-items:center; flex-wrap:wrap; gap:3px; }
.gatling-repeat { display:inline-flex; align-items:center; min-height:18px; border:1px solid var(--red); padding:1px 5px; background:var(--color-accent-tint-strong); color:var(--red); font:italic 800 8px/1 var(--font-display); text-transform:uppercase; }
.gatling-cancel-routes { margin-top:12px; border:1px solid var(--line); background:var(--paper); }
.gatling-cancel-routes>header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); padding:8px 10px; }
.gatling-cancel-routes>header b { color:var(--red); font:italic 800 14px var(--font-display); text-transform:uppercase; }
.gatling-cancel-routes>header small { color:var(--muted); font-size:9px; }
.gatling-cancel-routes>div>div { display:grid; grid-template-columns:88px minmax(0,1fr); min-height:46px; border-top:1px solid var(--line); }
.gatling-cancel-routes>div>div:first-child { border-top:0; }
.gatling-cancel-routes>div>div>strong { display:grid; place-items:center; border-right:1px solid var(--line); padding:7px; }
.gatling-cancel-routes>div>div>span { display:flex; align-items:stretch; flex-wrap:wrap; gap:6px; padding:6px; }
.gatling-cancel-kind { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; min-width:170px; border:1px solid var(--line); }
.gatling-cancel-kind small { align-self:stretch; display:grid; place-items:center; padding:5px 7px; background:var(--surface-soft); color:var(--muted); font-size:8px; text-transform:uppercase; }
.gatling-cancel-kind b { display:flex; align-items:center; flex-wrap:wrap; gap:3px; padding:5px 7px; font-size:9px; }
.gatling-cancel-kind.special { border-color:var(--color-key-s); }
.gatling-cancel-kind.resource { border-color:var(--color-key-d); }
.gatling-cancel-kind.movement { border-color:var(--color-key-k); }
.guide-empty { border:1px dashed var(--line); padding:24px; color:var(--muted); font-size:10px; text-align:center; }
.guide-source { margin:0; color:var(--muted); font-size:9px; line-height:1.6; }
.global-bars,.matchup-overview { border:1px solid var(--ink); padding:12px 20px; background:var(--color-surface-light); }
.explore-control-group { display:flex; }
.explore-control-group button+button { margin-left:-1px; }
.global-matchup-tier .tier-row { min-height:76px; }
.global-matchup-tier-card>span:last-child strong { overflow:hidden; font:italic 700 11px var(--font-display); text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.global-matchup-tier-card>span:last-child b { color:var(--tier-color); font-size:14px; }
.explore-content.matchup-content-exit { animation:matchup-swap-out .16s var(--smooth) both; pointer-events:none; }
.explore-content.matchup-content-enter { animation:matchup-swap-in .58s var(--spring) both; }
.matchup-content-enter .tier-row,.matchup-content-enter .matchup-global-row { animation:matchup-row-in .52s var(--spring) both; }
.matchup-content-enter .tier-row:nth-child(2),.matchup-content-enter .matchup-global-row:nth-child(2) { animation-delay:.035s; }
.matchup-content-enter .tier-row:nth-child(3),.matchup-content-enter .matchup-global-row:nth-child(3) { animation-delay:.07s; }
.matchup-content-enter .tier-row:nth-child(4),.matchup-content-enter .matchup-global-row:nth-child(4) { animation-delay:.105s; }
.matchup-content-enter .tier-row:nth-child(5),.matchup-content-enter .matchup-global-row:nth-child(5) { animation-delay:.14s; }
.matchup-content-enter .tier-row:nth-child(6),.matchup-content-enter .matchup-global-row:nth-child(6) { animation-delay:.175s; }
.matchup-content-enter .tier-row:nth-child(7),.matchup-content-enter .matchup-global-row:nth-child(7) { animation-delay:.21s; }
@keyframes matchup-swap-out { to { opacity:0; filter:blur(2px); transform:translateX(-14px) scale(.99); } }
@keyframes matchup-swap-in { 0% { opacity:0; filter:blur(2px); transform:translateX(24px) scale(.975); } 68% { opacity:1; filter:blur(0); transform:translateX(-3px) scale(1.004); } 100% { opacity:1; filter:blur(0); transform:none; } }
@keyframes matchup-row-in { from { opacity:0; transform:translateX(20px) scale(.985); } to { opacity:1; transform:none; } }
.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:italic 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:var(--track); }
.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; }
.matchup-list-header,.matchup-list-row { display:grid; grid-template-columns:minmax(170px,1fr) 88px 72px 64px 64px; }
.matchup-list-overview,.profile-matchup-list { display:grid; gap:8px; }
.matchup-list-header { align-items:center; gap:14px; min-height:42px; border-bottom:1px solid var(--ink); }
.matchup-list-header button { justify-content:flex-end; border:0; padding:6px 0; background:transparent; color:var(--muted); font:700 9px var(--font-body); letter-spacing:.5px; text-align:right; text-transform:uppercase; cursor:pointer; }
.matchup-list-header button:first-child { justify-content:flex-start; text-align:left; }
.matchup-list-header button.active { color:var(--red); }
.matchup-list-header button i { display:inline-block; min-width:10px; margin-left:3px; color:var(--red); font-style:normal; }
.matchup-list-row { align-items:center; gap:14px; min-height:62px; }
.matchup-list-overview .matchup-list-row,.profile-matchup-list .matchup-list-row { border:1px solid var(--line); padding:8px 12px; }
.matchup-list-row>b { font:italic 800 16px var(--font-display); text-align:right; }
.matchup-list-row .character { min-width:0; }
.matchup-list-row .character>span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.matchup-list-wr { color:var(--red); }
.tier-method { margin-bottom:18px; border:1px solid var(--ink); padding:22px 24px; background:var(--color-solid-surface); color:var(--on-solid); }
.tier-method>span { color:var(--red); font:700 9px var(--font-body); letter-spacing:1.3px; }
.tier-method h2 { margin:7px 0 8px; font:italic 800 28px var(--font-display); text-transform:uppercase; }
.tier-method p { max-width:850px; margin:0; color:var(--color-ink-soft); font-size:11px; line-height:1.65; }
.tier-method>small { display:block; margin-top:14px; color:var(--rank-muted); font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.tier-data-empty { min-height:280px; display:grid; place-items:center; align-content:center; gap:8px; border:1px dashed var(--line); padding:28px; background:var(--surface-soft); text-align:center; }
.tier-data-empty strong { color:var(--red); font:italic 800 28px var(--font-display); text-transform:uppercase; }
.tier-data-empty span { max-width:560px; color:var(--muted); font-size:11px; line-height:1.6; }
.global-tier-list { display:grid; gap:10px; }
.explore-content.tier-rank-exit { animation:tier-rank-out .18s var(--smooth) both; pointer-events:none; }
.explore-content.tier-rank-enter { animation:tier-rank-in .72s var(--smooth) both; }
.tier-rank-enter .global-tier-row { animation:tier-rank-row-in .68s var(--smooth) both; }
.tier-rank-enter .global-tier-row:nth-child(2) { animation-delay:.035s; }
.tier-rank-enter .global-tier-row:nth-child(3) { animation-delay:.07s; }
.tier-rank-enter .global-tier-row:nth-child(4) { animation-delay:.105s; }
.tier-rank-enter .global-tier-row:nth-child(5) { animation-delay:.14s; }
.tier-rank-enter .global-tier-row:nth-child(6) { animation-delay:.175s; }
.tier-rank-enter .global-tier-row:nth-child(7) { animation-delay:.21s; }
@keyframes tier-rank-out { to { opacity:0; transform:translateY(8px) scale(.995); } }
@keyframes tier-rank-in { from { opacity:0; transform:translateY(-10px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes tier-rank-row-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.global-tier-row { display:grid; grid-template-columns:70px minmax(0,1fr); min-height:150px; border:1px solid var(--ink); background:var(--color-surface-raised); }
.global-tier-row>strong { display:grid; place-items:center; background:var(--tier-color); color:var(--on-solid); font:italic 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:var(--color-card-highlight); }
.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:italic 800 18px var(--font-display); text-transform:uppercase; }
.global-tier-character small { margin-top:3px; color:var(--tier-color); font:700 9px var(--font-body); text-transform:uppercase; }
.global-tier-character .global-tier-type { color:var(--red); }
.global-tier-character em { display:block; margin-top:3px; color:var(--muted); font:700 8px var(--font-body); font-style:normal; letter-spacing:.35px; 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:9px; text-transform:uppercase; }
.global-tier-row dd { margin-top:2px; font:italic 700 12px var(--font-display); }
.hero>p,.explore-head p { color:var(--text-secondary); }
.player-avatar,.leaderboard,.character-catalog-card,.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),var(--color-grid-line) 25%); }
:root[data-theme="dark"] .hero:after { -webkit-text-stroke-color:var(--color-hero-stroke); }
@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),var(--color-grid-line) 25%); } :root[data-theme="system"] .hero:after { -webkit-text-stroke-color:var(--color-hero-stroke); } }
.distribution-summary,.stats-overview { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px; }
.distribution-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
.distribution-summary article,.stats-overview article { border:1px solid var(--ink); padding:24px; background:var(--color-surface-light); }
.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:italic 800 42px var(--font-display); }
.distribution-summary .imperius-summary strong { display:flex; align-items:center; gap:10px; }
.distribution-chart { margin-bottom:18px; border:1px solid var(--ink); padding:22px; background:var(--color-surface-panel); }
.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 9px var(--font-body); letter-spacing:1.3px; }
.distribution-chart>header h2 { margin:5px 0 0; font:italic 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:38px minmax(0,1fr) 58px; align-items:end; min-width:0; text-align:center; }
.distribution-column-value { align-self:start; }
.distribution-column-value strong { display:block; }
.distribution-week-change { display:block; margin-top:2px; font-size:9px; font-weight:700; line-height:1.1; white-space:nowrap; }
.distribution-week-change.positive { color:var(--positive); }
.distribution-week-change.negative { color:var(--red); }
.distribution-week-change.neutral { color:var(--muted); }
.distribution-column>strong { color:var(--ink); font:italic 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),var(--color-grid-line) 25%); }
.distribution-column>div i { position:absolute; right:10%; bottom:0; left:10%; display:block; background:var(--bar-color); box-shadow:inset 0 3px var(--color-card-highlight); 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:italic 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-tables { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr)); align-items:start; gap:18px; }
.distribution-table { border:1px solid var(--ink); background:var(--color-surface-light); }
.distribution-row { display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(4,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:var(--on-solid); font-size:9px; font-weight:700; text-transform:uppercase; }
.rank-thresholds { margin:0; border:1px solid var(--ink); background:var(--surface-soft); }
.rank-thresholds>header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--ink); padding:20px 22px; }
.rank-thresholds>header span { color:var(--red); font:700 9px var(--font-body); letter-spacing:1.3px; }
.rank-thresholds>header h2 { margin:5px 0 0; font:italic 800 30px var(--font-display); text-transform:uppercase; }
.rank-thresholds>header small { max-width:360px; color:var(--muted); font-size:9px; line-height:1.5; text-align:right; }
.rank-threshold-row { min-height:54px; display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.5fr); align-items:center; gap:18px; border-bottom:1px solid var(--line); padding:7px 18px; }
.rank-threshold-row:last-child { border:0; }
.rank-threshold-row>span:first-child { display:flex; align-items:center; gap:12px; min-width:0; }
.rank-threshold-row b { overflow:hidden; font:italic 700 17px var(--font-display); text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.rank-threshold-row strong { color:var(--red); font:italic 700 18px var(--font-display); text-align:right; }
.rank-threshold-row.heading { min-height:38px; background:var(--solid); color:var(--on-solid); font-size:9px; font-weight:700; text-transform:uppercase; }
.rank-threshold-row.heading span:last-child { text-align:right; }
.player-avatar,.leaderboard,.character-catalog-card,.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(min-width:721px) and (max-width:1100px) { .topbar { height:auto; min-height:var(--header-height); display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; padding-top:12px; padding-bottom:12px; } .menu-toggle { width:42px; height:var(--header-control-height); display:grid; place-content:center; gap:5px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; } .menu-toggle i { width:20px; height:2px; display:block; background:currentColor; transition:transform .2s,opacity .2s; } .topbar.nav-open .menu-toggle i:nth-child(1) { transform:translateY(7px) rotate(45deg); } .topbar.nav-open .menu-toggle i:nth-child(2) { opacity:0; } .topbar.nav-open .menu-toggle i:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } .main-nav { grid-column:1 / -1; display:none; flex-direction:column; align-items:stretch; width:100%; border-top:1px solid var(--line); padding-top:8px; } .topbar.nav-open .main-nav { display:flex; } .main-nav a { width:100%; padding:10px 4px; border-bottom:1px solid var(--line); } .stats-overview { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:721px) and (max-width:900px) { .stats-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:901px) and (max-width:1100px) { .rank-main { align-items:flex-start; flex-direction:column; gap:18px; } .rank-main>div { width:100%; text-align:left; } .rank-main>div:last-child { padding-left:68px; } }
@media(min-width:721px) and (max-width:900px) { .player-head { align-items:flex-start; flex-direction:column; gap:26px; } .player-identity { width:100%; } .player-identity>div { min-width:0; } .player-head h2 { max-width:100%; font-size:clamp(58px,10vw,82px); overflow-wrap:anywhere; } .profile-actions { width:100%; align-items:center; justify-content:space-between; } .rating-grid,.rival-grid,.panels,.insight-grid { grid-template-columns:minmax(0,1fr); } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .rank-main { min-height:0; } .rank-title { min-width:0; } .rank-title strong { white-space:normal; } .insight-grid>article { width:100%; } }
@media(max-width:720px) { :root { --ui-scale:1; --page-gutter:24px; --panel-padding:14px; --header-control-height:38px; } body { zoom:1; } .topbar { height:auto; min-height:var(--header-height); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:14px 12px; } .menu-toggle { width:42px; height:var(--header-control-height); display:grid; place-content:center; gap:5px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; } .menu-toggle i { width:20px; height:2px; display:block; background:currentColor; transition:transform .2s,opacity .2s; } .topbar.nav-open .menu-toggle i:nth-child(1) { transform:translateY(7px) rotate(45deg); } .topbar.nav-open .menu-toggle i:nth-child(2) { opacity:0; } .topbar.nav-open .menu-toggle i:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } .main-nav { grid-column:1 / -1; display:none; flex-direction:column; align-items:stretch; width:100%; border-top:1px solid var(--line); padding-top:8px; } .topbar.nav-open .main-nav { display:flex; } .main-nav a { width:100%; padding:11px 4px; border-bottom:1px solid var(--line); font-size:10px; } .theme-switcher { grid-column:1 / -1; justify-self:start; } .theme-switcher button { padding:0; font-size:9px; } main { width:calc(100% - var(--page-gutter)); } .hero { min-height:0; padding:48px 0 56px; } .hero:after { font-size:330px; } h1 { font-size:clamp(52px,20vw,68px); line-height:.82; letter-spacing:-2px; } .hero>p { font-size:14px; } .search { margin-top:34px; } .search-row { height:auto; flex-direction:column; gap:8px; } .search-row input,.search-row button { flex:none; width:100%; height:60px; min-height:60px; } .search-row input { padding:0 16px; font-size:20px; } .search-history { align-items:flex-start; flex-direction:column; gap:8px; } .search-history>div { width:100%; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .metrics article { padding:18px 14px; } .metrics article:nth-child(2) { border-right:0; } .metrics article:nth-child(-n+2) { border-bottom:1px solid var(--ink); } .metrics strong { font-size:42px; } .rating-grid,.rival-grid,.panels,.insight-grid { grid-template-columns:minmax(0,1fr); } .insight-badges { grid-template-columns:repeat(2,minmax(0,1fr)); } .player-head { align-items:start; flex-direction:column; gap:24px; } .player-identity { width:100%; align-items:flex-start; flex-direction:column; } .player-identity>div { min-width:0; max-width:100%; } .player-avatar { width:96px; height:96px; flex-basis:96px; } .player-head h2 { max-width:100%; font-size:52px; overflow-wrap:anywhere; } .profile-actions { width:100%; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; } .main-character { text-align:left; border-right:0; border-left:5px solid var(--red); padding:0 0 0 16px; } .rank-card,.panel { width:100%; max-width:100%; padding:var(--panel-padding); } .rank-main { min-height:0; align-items:flex-start; flex-direction:column; gap:18px; padding:22px 0; } .rank-main>div { text-align:left; } .rank-main b { font-size:42px; } .rank-meta { align-items:flex-start; flex-direction:column; } .panel-title { flex-wrap:wrap; gap:9px; padding-bottom:14px; } .panel-title h3 { font-size:24px; } .panel-tabs { width:100%; margin-left:0; } .panel-tabs button { flex:1; } .chart { height:280px; overflow:hidden; } .chart text { font-size:12px; } .rank-line text { font-size:10px; } .rank-meta,.wins-to-rank { font-size:10px; line-height:1.4; } .rival-profile { grid-template-columns:64px minmax(0,1fr); gap:12px; } .rival-profile .character.large img,.rival-profile .character.large .character-fallback { width:60px; height:60px; flex-basis:60px; } .rival-profile>strong { grid-column:2; justify-self:start; font-size:25px; } .rival-footer { align-items:flex-start; flex-direction:column; gap:7px; } .insight-badge { padding:14px 10px; } .insight-badge span { font-size:9px; } .insight-badge small,.character-record small,.activity-timezone { font-size:9px; } .insight-bar { grid-template-columns:70px minmax(0,1fr) 82px; gap:7px; font-size:10px; } .insight-bar small { font-size:9px; } .profile-defeat-card { grid-template-columns:minmax(0,1fr); align-items:start; } .profile-defeat-card>b { padding-left:0; } .tier-row { grid-template-columns:34px minmax(0,1fr); } .tier-characters { grid-template-columns:minmax(0,1fr); } .history { overflow:hidden; } .matches { width:100%; } footer { align-items:flex-start; flex-direction:column; gap:14px; padding:20px 12px; font-size:10px; line-height:1.5; } .match { grid-template-columns:70px 1.7fr 1fr 80px .8fr; font-size:12px; } .versus .character>span:last-child { display:none; } .explore { padding-top:42px; } .explore-head { align-items:flex-start; flex-direction:column; } .explore-head h1 { font-size:50px; } .leader-row { grid-template-columns:40px 52px minmax(0,1fr); gap:7px; padding:8px; } .leader-row>.character img,.leader-row>.character-fallback { width:46px; height:46px; flex-basis:46px; } .leader-name { font-size:20px; } .leader-rating { grid-column:2 / 4; justify-content:end; font-size:18px; } .character-catalog { grid-template-columns:minmax(0,1fr); } .global-bar { grid-template-columns:26px 50px minmax(0,1fr); gap:7px; } .global-bar>.character img,.global-bar>.character-fallback { width:46px; height:46px; flex-basis:46px; } .global-bar>small { grid-column:2 / 4; text-align:right; padding-bottom:8px; } .matchup-global-row { grid-template-columns:minmax(0,1fr); gap:8px; padding:12px 0; } .matchup-global-row>.character img,.matchup-global-row>.character-fallback { width:50px; height:50px; flex-basis:50px; } .matchup-global-row>small { text-align:left; padding-bottom:4px; } .distribution-summary,.stats-overview { grid-template-columns:minmax(0,1fr); } .distribution-row { grid-template-columns:minmax(140px,1.5fr) repeat(3,1fr); min-width:610px; } .distribution-table { max-width:100%; overflow-x:auto; } }
@media(max-width:720px) { .rating-chart-controls { width:100%; margin-left:0; } .rating-chart-controls button { flex:1; } .rating-date-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .rating-date-picker button { width:100%; } .rating-chart-range { line-height:1.5; } }
@media(max-width:720px) { .replay-load-status { align-items:stretch; flex-direction:column; margin-top:-8px; } .replay-load-actions { align-items:stretch; flex-direction:column; } .replay-load-status button { width:100%; } }
@media(max-width:720px) { .set-summary>.rating-gap-cell { grid-column:2 / 3; grid-row:2 / 5; align-items:flex-start; flex-flow:row wrap; } .set-summary>.rating-gap-cell .rating-gap { margin-top:0; } .set-toggle { grid-row:1 / 5; } }
@media(max-width:720px) { .profile-defeat-card { grid-template-columns:24px minmax(0,1fr); } .profile-defeat-card>b { grid-column:2; padding-left:52px; } }
@media(max-width:720px) { .profile-defeat-player { grid-template-columns:160px minmax(0,1fr); gap:10px; } .profile-defeat-player .character { width:160px; } }
@media(max-width:480px) { .profile-defeat-player { grid-template-columns:minmax(0,1fr); } .profile-defeat-player .character { width:100%; } }
@media(max-width:480px) { .character-records { grid-template-columns:minmax(0,1fr); max-height:420px; } }
@media(max-width:380px) { .metrics { grid-template-columns:minmax(0,1fr); } .insight-badges { grid-template-columns:minmax(0,1fr); } .search-meta { align-items:flex-start; flex-direction:column; gap:5px; } .bar-label { align-items:flex-start; flex-direction:column; gap:10px; } .character-rating { margin:0; text-align:left; } .profile-defeat-player { align-items:flex-start; flex-direction:column; } .profile-defeat-player>div { width:100%; } }
@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) { .tier-rank-controls { width:100%; } .tier-rank-controls button { flex:1 1 72px; } .tier-filter { flex:1 1 140px; } }
@media(max-width:720px) { .distribution-summary,.stats-overview { grid-template-columns:1fr; } }
@media(max-width:720px) { .rank-thresholds>header { align-items:flex-start; flex-direction:column; } .rank-thresholds>header small { text-align:left; } .rank-threshold-row { grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:7px 10px; } .rank-threshold-row b { font-size:14px; } .rank-threshold-row strong { font-size:15px; } }
@media(max-width:380px) { .tier-characters,.global-tier-row>div { grid-template-columns:minmax(0,1fr); } }
@media(max-width:720px) { .distribution-row { grid-template-columns:minmax(150px,1.5fr) repeat(4,minmax(100px,1fr)); min-width:760px; } }
@media(max-width:1100px) { .topbar { z-index:12; isolation:isolate; } .topbar .main-nav { position:absolute; z-index:15; top:100%; right:0; left:0; display:flex; padding:12px clamp(18px,5vw,54px) 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--ink); background:var(--surface-strong); box-shadow:0 20px 42px var(--color-overlay-medium); backdrop-filter:blur(16px); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-18px) scaleY(.92); transform-origin:top; transition:opacity .28s,visibility .28s,transform .55s var(--spring); } .topbar.nav-open .main-nav { opacity:1; visibility:visible; pointer-events:auto; transform:none; } .main-nav a { opacity:0; transform:translateY(-12px); } .topbar.nav-open .main-nav a { opacity:1; transform:none; } .topbar.nav-open .main-nav a:nth-child(1) { transition-delay:.03s; } .topbar.nav-open .main-nav a:nth-child(2) { transition-delay:.06s; } .topbar.nav-open .main-nav a:nth-child(3) { transition-delay:.09s; } .topbar.nav-open .main-nav a:nth-child(4) { transition-delay:.12s; } .topbar.nav-open .main-nav a:nth-child(5) { transition-delay:.15s; } .topbar.nav-open .main-nav a:nth-child(6) { transition-delay:.18s; } .topbar.nav-open .main-nav a:nth-child(7) { transition-delay:.21s; } .topbar.nav-open .main-nav a:nth-child(8) { transition-delay:.24s; } }
@media(max-width:1100px) { .topbar .main-nav { padding-top:9px; padding-bottom:12px; } .topbar .main-nav a { padding:8px 4px; font-size:9px; } .topbar.nav-open .main-nav a:nth-child(9) { transition-delay:.27s; } }
@media(hover:hover) { .rank-card,.rival-card,.leader-row,.character-catalog-card,.global-tier-row article,.distribution-summary article,.stats-overview article { transition:transform .55s var(--spring),box-shadow .55s var(--spring),filter .25s; } .rank-card:hover,.rival-card:hover,.leader-row:hover,.character-catalog-card:hover,.global-tier-row article:hover,.distribution-summary article:hover,.stats-overview article:hover { position:relative; z-index:2; transform:translateY(-4px) scale(1.012); box-shadow:var(--shadow-card); } }
@media(hover:hover) { .rank-card:hover { transform:translateY(-4px); box-shadow:inset 5px 0 0 color-mix(in srgb,var(--rank-color) 72%,transparent); } }
@media(max-width:980px) { .character-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } .character-guide-hero { grid-template-columns:minmax(240px,.65fr) minmax(0,1fr); } .stat-groups,.move-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .character-catalog { grid-template-columns:minmax(0,1fr); } .character-catalog-identity { min-height:102px; } .character-catalog-actions a { min-height:68px; padding:10px 8px; } .character-catalog-actions b { font-size:13px; } .character-guide-hero { min-height:0; grid-template-columns:minmax(0,1fr); } .character-guide-portrait { min-height:300px; max-height:430px; } .character-guide-hero>div:last-child { padding:28px 18px 34px; } .character-guide-hero h2 { font-size:54px; overflow-wrap:anywhere; } .guide-metrics,.guide-columns,.stat-groups,.move-grid,.tactics-grid,.tactics-overview { grid-template-columns:minmax(0,1fr); } .guide-metrics article+article { border-top:1px solid var(--line); border-left:0; } .guide-section { padding:16px 12px; } .guide-section>header { align-items:flex-start; flex-direction:column; } .tactics-overview>aside { border-top:var(--border-width) solid var(--ink); border-left:0; } .tactics-card-content { padding-left:var(--space-11); } .move-controls { width:100%; flex-direction:column; align-items:stretch; } .move-guard-filter { width:100%; } .move-guard-menu { width:100%; right:auto; left:0; } .move-detail-toggle { justify-content:center; } .move-section input[type="search"] { width:100%; height:46px; } .move-input-legend { align-items:flex-start; flex-wrap:wrap; gap:8px 14px; } .move-input-legend>small { width:100%; margin-left:0; } .stat-groups dd,.move-card dd { max-width:130px; overflow-wrap:anywhere; } }
@media(max-width:360px) { .comparison-head { align-items:flex-start; flex-direction:column; gap:4px; } .comparison-grid { grid-template-columns:minmax(0,1fr); } .character-catalog-actions b { font-size:12px; } .character-catalog-actions small { font-size:9px; } .character-guide-portrait { min-height:250px; } .character-guide-hero h2 { font-size:46px; } .guide-metrics strong { font-size:36px; } .guide-matchups article { grid-template-columns:minmax(0,1fr); } .guide-matchups article>span strong,.guide-matchups article>span small { text-align:left; } }
@media(max-width:720px) { .matches { overflow:visible; } .set-summary { min-width:0; grid-template-columns:16px 48px minmax(0,1fr) auto; gap:8px; } .set-summary>.player-match-rating { grid-column:3 / 5; grid-row:1; justify-content:flex-start; } .set-summary>.versus { grid-column:3 / 5; grid-row:2; } .set-summary>.opponent-link { grid-column:3 / 5; grid-row:3; font-size:15px; } .set-summary>.rating-gap-cell { grid-column:2 / 3; grid-row:2 / 5; align-items:flex-start; flex-direction:column; gap:2px; } .set-summary>small { grid-column:3 / 5; grid-row:4; line-height:1.6; } .set-toggle { height:100%; grid-row:1 / 5; } .set-score { align-self:start; grid-row:1; } .set-details { min-width:0; } .set-details-head { grid-template-columns:70px minmax(0,1fr) minmax(0,1fr); gap:var(--space-5); padding:6px 4px; } .set-details-head span:nth-child(2),.set-details-head span:nth-child(4),.set-details-head span:nth-child(6) { display:none; } .set-details-head span:nth-child(3) { grid-column:2; } .set-details-head span:nth-child(5) { grid-column:3; } .set-details article { grid-template-columns:70px minmax(0,1fr) minmax(0,1fr); gap:var(--space-5); padding:6px 4px; } .set-details .outcome { grid-column:1; grid-row:1; } .set-details article>b { grid-column:1; grid-row:2; } .set-details time { grid-column:1; grid-row:3; } .set-details .player-side-rating { grid-column:2; grid-row:1 / 3; } .set-details .opponent-side-rating { grid-column:3; grid-row:1 / 3; } .set-details article>.rating-gap { grid-column:2 / 4; grid-row:3; } .match-side-rating { align-items:flex-start; flex-direction:column; } .match-side-rating .rating-delta { justify-items:start; } }
@media(max-width:720px) { .floor-insight { grid-template-columns:minmax(76px,auto) minmax(0,1fr); } .floor-insight>small { grid-column:1 / -1; text-align:left; } .floor-insight-rating { grid-column:1 / -1; justify-content:flex-start; } }
@media(max-width:720px) { .character-picker { width:100%; } .explore-controls .character-picker-trigger { width:100%; min-width:0; } .character-picker-menu { width:calc(100vw - var(--page-gutter)); grid-template-columns:repeat(3,minmax(0,1fr)); } .explore-controls .character-picker-option { height:58px; padding:4px; } .character-picker-option .character { font-size:9px; } .character-picker-option .character img,.character-picker-option .character-fallback { width:40px; height:40px; flex-basis:40px; } }
@media(max-width:720px) { .panel-tools { width:100%; flex-wrap:wrap; margin-left:0; } .panel-filter { width:100%; height:36px; } .panel-tools .panel-tabs { width:auto; } .explore-filter { width:100%; height:42px; } .character-picker-search { height:38px; } }
@media(min-width:721px) { .settings-page,.about-page { padding-top:56px; } .settings-panel { margin-top:26px; padding:22px; } .hero { min-height:540px; padding:72px 0 60px; } .search { margin-top:36px; } .result,.explore { padding:56px 0 72px; } .player-head { margin-bottom:28px; } .player-identity,.profile-actions { gap:18px; } .replay-load-status { min-height:60px; gap:16px; margin:-14px 0 16px; padding:10px 13px; } .metrics article { padding:20px; } .rating-grid,.rival-grid,.panels,.insight-grid { gap:18px; margin-top:18px; } .rank-main { min-height:112px; gap:16px; } .rating-comparison { margin-top:14px; padding-top:13px; } .rival-profile,.floor-source-empty,.match-source-empty { min-height:124px; } .rival-footer { gap:12px; padding-top:11px; } .insight-badges { margin-top:16px; } .insight-badge { padding:14px 12px; } .insight-grid>article { padding:14px; } .insight-grid header { padding-bottom:10px; } .character-records { min-height:162px; max-height:310px; gap:7px; } .character-record { height:96px; max-height:96px; } .profile-defeat-card { padding:6px 0; } .profile-defeat-player { gap:12px; } .tower-section { margin-top:18px; } .panel-title { gap:11px; padding-bottom:16px; } .bars,.matchups { padding-top:16px; } .bar { margin-bottom:13px; } .matchup { padding:9px 0; } .history,.opponent-rating-panel { margin-top:18px; } .match { gap:12px; padding:12px 0; } .set-summary { gap:10px; padding:11px 0; } .set-details article { gap:10px; min-height:44px; padding-top:6px; padding-bottom:6px; } .pagination { padding-top:16px; } .mini-pagination { padding-top:11px; } .explore-head { gap:24px; padding-bottom:24px; } .explore-controls { gap:7px; padding:16px 0; } .leader-row { min-height:82px; gap:13px; padding:8px 16px; } .character-catalog { gap:10px; } .character-catalog-identity { min-height:104px; gap:11px; padding:10px; } .character-catalog-actions a { min-height:56px; padding:8px 10px; } .character-guide { gap:14px; } .character-guide-hero>div:last-child { padding:38px; } .guide-metrics article,.guide-section { padding:20px; } .guide-section>header { gap:16px; margin-bottom:14px; padding-bottom:11px; } .stat-groups,.move-grid { gap:10px; } .stat-groups article:not(.stat-group-card),.move-card { padding:12px; } .guide-columns { gap:14px; } .global-tier-row>div { gap:6px; padding:6px; } .global-tier-row article { padding:8px; } .distribution-summary,.stats-overview { gap:10px; margin-bottom:14px; } .distribution-summary article,.stats-overview article { padding:20px; } .distribution-chart { margin-bottom:14px; padding:18px; } .distribution-chart-scroll { padding:18px 0 3px; } .distribution-tables { gap:14px; } footer { min-height:84px; padding-top:16px; padding-bottom:16px; gap:18px; } }
@media(max-width:720px) { .theme-switcher button { font-size:9px; } }
@media(max-width:360px) { .character-catalog-actions small { font-size:9px; } }
@media(max-width:720px) { .metrics article:nth-child(2),.metrics article:nth-child(-n+2) { border:0; } }
@media(max-width:720px) { .modal-backdrop { padding:12px; } .stat-modal { max-height:calc(100vh - 24px); } .stat-modal>header { padding:16px; } .stat-modal-summary { grid-template-columns:minmax(0,1fr); } .stat-modal-summary>div { min-height:72px; padding:9px 16px; } .stat-modal-summary>div+div { border-top:1px solid var(--line); border-left:0; } .stat-roster { padding:0 10px 12px; } .stat-roster-row { grid-template-columns:24px minmax(0,1fr) auto; gap:7px; padding:6px 4px; } .stat-roster-track { grid-column:2 / 4; width:100%; } .stat-roster-value { font-size:16px; } }
@media(max-width:720px) { .tier-character b { font-size:15px; } }
.battle-type-button { width:max-content; max-width:100%; min-height:0!important; display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-2); border:0!important; padding:0!important; background:transparent!important; color:var(--ink)!important; font:700 var(--font-size-xs) var(--font-body)!important; letter-spacing:.45px; text-transform:uppercase; }
.battle-type-button:before { display:none!important; }
.battle-type-button:hover,.battle-type-button:focus-visible { background:transparent!important; color:var(--ink)!important; text-decoration:underline; text-decoration-color:var(--battle-type-color); text-decoration-thickness:2px; text-underline-offset:3px; }
.battle-type-button i { color:var(--battle-type-color); font-style:normal; font-size:var(--font-size-lg); line-height:1; }
.difficulty-scale,.difficulty-scale-marks { display:flex; align-items:center; gap:3px; }
.difficulty-scale { margin-top:var(--space-3); color:var(--muted); font:700 var(--font-size-sm) var(--font-body); }
.difficulty-scale i { box-sizing:border-box; width:10px; height:6px; display:block; flex:0 0 10px; border:1px solid var(--muted); background:transparent; transform:skewX(-18deg); }
.difficulty-scale i.is-filled { border-color:var(--red); background:var(--red); }
.difficulty-scale b { margin-left:var(--space-3); color:var(--muted); font:700 var(--font-size-xs) var(--font-body); letter-spacing:0; }
.tier-difficulty-filter>span { display:flex; align-items:baseline; gap:var(--space-4); }
.tier-difficulty-filter>span small { color:var(--muted); font:700 var(--font-size-xs) var(--font-body); letter-spacing:.1px; text-transform:none; white-space:nowrap; }
.battle-type-tooltip { position:fixed; z-index:60; width:min(320px,calc(100vw - var(--space-15))); pointer-events:none; border:var(--border-width) solid var(--battle-type-color); padding:var(--space-11); background:var(--solid); color:var(--on-solid); box-shadow:var(--space-4) var(--space-4) 0 color-mix(in srgb,var(--battle-type-color) 40%,transparent); }
.battle-type-tooltip strong { display:block; color:var(--on-solid); font:italic 800 20px var(--font-display); text-transform:uppercase; }
.battle-type-tooltip strong i { color:var(--battle-type-color); font-style:normal; }
.battle-type-tooltip p { margin:var(--space-6) 0 0; color:var(--rank-muted); font-size:var(--font-size-md); line-height:1.55; }
@media(max-width:720px) { .tier-difficulty-filter>span { flex-wrap:wrap; gap:var(--space-2); } .battle-type-tooltip { font-size:11px; } }
@media(max-width:380px) { .character-picker-menu { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .settings-page { padding:44px 0; } .settings-page h1 { font-size:52px; } .settings-panel { padding:16px; } .settings-token-row { flex-wrap:wrap; gap:8px; } .settings-token-row input,.settings-token-row button { width:100%; border:1px solid var(--ink); } .settings-actions { align-items:stretch; flex-direction:column; } }
@media(max-width:720px) { .about-page { padding:44px 0 64px; } .about-hero { padding-bottom:32px; } .about-hero h1 { font-size:64px; letter-spacing:-2px; } .about-hero p { font-size:14px; } .about-story { grid-template-columns:minmax(0,1fr); gap:22px; padding:32px 0; } .about-story p { font-size:12px; } .about-gratitude { padding:32px 0; } .about-foundations { grid-template-columns:minmax(0,1fr); } .about-foundations article,.about-foundations article+article { padding:28px 0 32px; border-left:0; } .about-foundations article+article { border-top:1px solid var(--ink); } .about-foundations p { min-height:0; } .about-dependencies>div { grid-template-columns:minmax(0,1fr); } .about-dependencies article { min-height:0; } .about-support { margin-top:34px; border-left-width:6px; padding:26px 20px; } .about-support p { font-size:12px; } .about-support a { width:100%; justify-content:center; text-align:center; } }
@media(max-width:720px) { .tower-section .insight-bars { grid-template-columns:minmax(0,1fr); } .tower-section .panel-title>strong { width:100%; margin-left:0; font-size:20px; } .settings-theme { grid-template-columns:minmax(0,1fr); } }
@media(max-width:720px) { .rank-main b { font-size:32px; } .character-record { grid-template-columns:minmax(0,1fr) minmax(128px,auto); } }
@media(display-mode:standalone) { body { padding-bottom:env(safe-area-inset-bottom); } .topbar { min-height:calc(var(--header-height) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); } }
:where(button,.settings-link,.explore-back,.board-tab,.character-catalog-actions a) { position:relative; z-index:0; isolation:isolate; overflow:hidden; }
:where(button,.settings-link,.explore-back,.board-tab,.character-catalog-actions a):before { content:""; position:absolute; z-index:-1; inset:-2px; background:var(--red); clip-path:polygon(0 0,0 0,0 100%,0 100%); transition:clip-path .52s var(--spring); }
:where(button,.settings-link,.explore-back,.board-tab,.character-catalog-actions a):hover,:where(button,.settings-link,.explore-back,.board-tab,.character-catalog-actions a):focus-visible { background-color:transparent !important; color:var(--on-solid) !important; }
:where(button,.settings-link,.explore-back,.board-tab,.character-catalog-actions a):hover:before,:where(button,.settings-link,.explore-back,.board-tab,.character-catalog-actions a):focus-visible:before { clip-path:polygon(0 0,calc(100% + 22px) 0,100% 100%,0 100%); }
@media(prefers-reduced-motion:reduce) { :root { --parallax-y:0px !important; --parallax-ink-y:0px !important; } *,*:before,*:after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
@media(min-width:721px) { .set-details article { gap:8px; min-height:36px; padding-top:4px; padding-bottom:4px; } }
@media(max-width:720px) { .set-details article { min-height:34px; padding-top:5px; padding-bottom:5px; } }
@media(max-width:720px) { body { background-attachment:scroll; will-change:auto; } .main-nav a,.theme-switcher button,.character-picker-option .character,.insight-badge span,.insight-badge small,.character-record small,.activity-timezone,.insight-bar small,.character-catalog-actions small { font-size:11px; } }
@media(max-width:720px) { .move-settings-open { width:100%; justify-content:center; } .movelist-settings-modal { max-height:calc(100vh - 24px); } .movelist-settings-content { grid-template-columns:minmax(0,1fr); overflow:auto; } .movelist-settings-content>section { padding:16px; } .movelist-settings-content>section+section { border-top:1px solid var(--line); border-left:0; } .movelist-settings-content>section>header { min-height:0; } }
@media(min-width:721px) and (max-width:1000px) { .guide-columns { grid-template-columns:minmax(0,1fr); } .guide-matchups { grid-template-columns:repeat(3,minmax(0,1fr)); } .guide-matchups article { grid-template-columns:minmax(0,1fr); align-content:start; } .guide-matchups article>span strong,.guide-matchups article>span small { text-align:left; } }
@media(max-width:720px) { .guide-matchups { grid-template-columns:minmax(0,1fr); } }
@media(max-width:720px) { footer>span { max-width:none; text-align:left; } }
@media(max-width:720px) { .player-match-rating { text-align:left; } .player-match-rating>small { justify-content:flex-start; } }
@media(max-width:720px) { .set-summary>small { white-space:normal; } }
.ggst-analytics { margin-top:var(--space-14); }
.ggst-analytics>.panel-title>small { margin-left:auto; color:var(--muted); font:600 var(--font-size-sm) var(--font-body); }
.ggst-analytics-state { display:grid; min-height:110px; place-content:center; justify-items:center; gap:var(--space-5); padding:var(--space-15); border:var(--border-width) dashed var(--line); text-align:center; }
.ggst-analytics-state strong { font:700 italic 26px var(--font-display); text-transform:uppercase; }
.ggst-analytics-state p { max-width:680px; margin:0; color:var(--text-secondary); font-size:var(--font-size-lg); line-height:1.6; }
.ggst-analytics-state a { margin-top:var(--space-4); padding:var(--space-7) var(--space-12); border:var(--border-width) solid var(--ink); color:var(--ink); font-size:var(--font-size-sm); font-weight:800; text-decoration:none; text-transform:uppercase; }
.ggst-subsection-head,.ggst-datasets-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-12); margin-top:var(--space-14); padding-bottom:var(--space-8); border-bottom:var(--border-width) solid var(--line); }
.ggst-subsection-head>div>span,.ggst-datasets-head>div>span { color:var(--red); font-size:var(--font-size-sm); font-weight:800; letter-spacing:.12em; }
.ggst-subsection-head h4,.ggst-datasets-head h4 { margin:var(--space-2) 0 0; font:700 italic 28px var(--font-display); text-transform:uppercase; }
.ggst-subsection-head>small,.ggst-datasets-head>small,.ggst-privacy { color:var(--muted); font-size:var(--font-size-sm); }
.ggst-privacy { max-width:460px; text-align:right; }
.ggst-performance-layout { display:grid; grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr); gap:var(--space-14); padding-top:var(--space-12); }
.performance-radar { display:grid; grid-template-columns:minmax(220px,1fr) minmax(120px,.55fr); align-items:center; min-width:0; padding:var(--space-9); background:var(--color-accent-tint-subtle); }
.performance-radar svg { width:100%; max-height:300px; overflow:visible; }
.performance-radar circle,.performance-radar line { fill:none; stroke:var(--line); stroke-width:1; }
.performance-radar polygon { fill:var(--color-accent-tint-strong); stroke:var(--red); stroke-width:2; }
.performance-radar text { fill:var(--text-secondary); font:700 8px var(--font-body); text-anchor:middle; dominant-baseline:middle; text-transform:uppercase; }
.performance-radar>div { display:grid; gap:var(--space-3); }
.performance-radar>div span { margin-top:var(--space-6); color:var(--muted); font-size:var(--font-size-sm); text-transform:uppercase; }
.performance-radar>div b { font:700 italic 20px var(--font-display); }
.performance-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-7); }
.performance-groups article { padding:var(--space-10); border:var(--border-width) solid var(--line); background:var(--surface-soft); }
.performance-groups header { display:flex; align-items:center; justify-content:space-between; padding-bottom:var(--space-7); }
.performance-groups header span { color:var(--red); font-weight:800; text-transform:uppercase; }
.performance-groups header strong { font:700 italic 24px var(--font-display); }
.performance-groups article>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-5); margin-top:var(--space-7); }
.performance-groups article>div span,.performance-groups article>div b { font-size:var(--font-size-md); }
.performance-groups article>div i { grid-column:1 / -1; height:var(--space-3); background:var(--track); }
.performance-groups article>div i:before { content:""; display:block; width:var(--metric); height:100%; background:linear-gradient(90deg,var(--red),var(--color-gauge-mid),var(--color-gauge-end)); }
.ggst-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:var(--border-width) solid var(--line); border-top:0; }
.ggst-summary-grid article { min-width:0; padding:var(--space-10); border-top:var(--border-width) solid var(--line); }
.ggst-summary-grid article+article { border-left:var(--border-width) solid var(--line); }
.ggst-summary-grid span { display:block; color:var(--muted); font-size:var(--font-size-sm); font-weight:700; text-transform:uppercase; }
.ggst-summary-grid strong { display:block; margin-top:var(--space-3); font:700 italic 25px var(--font-display); overflow-wrap:anywhere; }
.ggst-character-progress { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-7); padding-top:var(--space-9); }
.ggst-character-progress>article { display:grid; grid-template-columns:auto minmax(110px,.65fr) minmax(190px,1fr); align-items:center; gap:var(--space-8); min-width:0; padding:var(--space-8); border:var(--border-width) solid var(--line); background:var(--surface-soft); }
.ggst-character-progress>article>div { display:grid; gap:var(--space-2); min-width:0; }
.ggst-character-progress>article>div strong { font:700 italic 19px var(--font-display); }
.ggst-character-progress>article>div small { color:var(--muted); font-size:var(--font-size-sm); }
.ggst-character-progress ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); margin:0; padding:0; list-style:none; }
.ggst-character-progress li { display:grid; justify-items:center; min-width:0; padding:var(--space-5); background:var(--color-accent-tint-subtle); text-align:center; }
.ggst-character-progress li span,.ggst-character-progress li small { color:var(--muted); font-size:var(--font-size-2xs); }
.ggst-character-progress li b { max-width:100%; overflow:hidden; font-size:var(--font-size-sm); text-overflow:ellipsis; }
.ggst-empty { padding:var(--space-13); border:var(--border-width) dashed var(--line); color:var(--muted); font-size:var(--font-size-md); text-align:center; }
.ggst-datasets { display:grid; gap:var(--space-5); padding-top:var(--space-8); }
.ggst-load-data { min-height:44px; border:var(--border-width) solid var(--ink); padding:0 var(--space-12); background:var(--surface-soft); color:var(--ink); font:800 var(--font-size-sm) var(--font-body); text-transform:uppercase; cursor:pointer; }
.ggst-collection-warning { display:flex; align-items:center; gap:var(--space-8); padding:var(--space-7) var(--space-10); border-left:var(--space-3) solid var(--red); background:var(--color-accent-tint-subtle); }
.ggst-collection-warning strong { color:var(--red); font-size:var(--font-size-sm); text-transform:uppercase; }
.ggst-collection-warning span { color:var(--text-secondary); font-size:var(--font-size-sm); }
.ggst-datasets details { border:var(--border-width) solid var(--line); background:var(--surface-soft); }
.ggst-datasets summary { display:grid; grid-template-columns:minmax(0,1fr) auto 12px; align-items:center; gap:var(--space-8); min-height:48px; padding:var(--space-7) var(--space-10); cursor:pointer; list-style:none; }
.ggst-datasets summary::-webkit-details-marker { display:none; }
.ggst-datasets summary>span { display:flex; align-items:center; gap:var(--space-8); min-width:0; }
.ggst-datasets summary>span b { padding:var(--space-3) var(--space-5); background:var(--red); color:var(--on-solid); font-size:var(--font-size-sm); }
.ggst-datasets summary>span strong { font:700 italic 20px var(--font-display); }
.ggst-datasets summary>small { color:var(--muted); font-size:var(--font-size-sm); }
.ggst-datasets summary>i { width:8px; height:8px; border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(45deg); transition:transform .32s var(--spring); }
.ggst-datasets details[open] summary>i { transform:rotate(225deg); }
.ggst-data-table { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:520px; overflow:auto; border-top:var(--border-width) solid var(--line); scrollbar-color:var(--red) var(--track); scrollbar-width:thin; }
.ggst-data-table::-webkit-scrollbar { width:8px; height:8px; }
.ggst-data-table::-webkit-scrollbar-track { background:var(--track); }
.ggst-data-table::-webkit-scrollbar-thumb { border:2px solid var(--track); background:var(--red); }
.ggst-data-table>div { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,.55fr); gap:var(--space-7); min-width:0; padding:var(--space-6) var(--space-9); border-bottom:var(--border-width) solid var(--line); }
.ggst-data-table>div:nth-child(odd) { border-right:var(--border-width) solid var(--line); }
.ggst-data-table span { min-width:0; overflow:hidden; color:var(--text-secondary); font-size:var(--font-size-sm); text-overflow:ellipsis; white-space:nowrap; }
.ggst-data-table b { min-width:0; overflow-wrap:anywhere; font-size:var(--font-size-sm); text-align:right; }
@media(max-width:1000px) { .ggst-performance-layout { grid-template-columns:minmax(0,1fr); } .ggst-character-progress { grid-template-columns:minmax(0,1fr); } }
@media(max-width:720px) { .ggst-analytics>.panel-title>small { width:100%; margin-left:0; } .ggst-subsection-head,.ggst-datasets-head { align-items:flex-start; flex-direction:column; gap:var(--space-4); } .ggst-privacy { text-align:left; } .performance-radar { grid-template-columns:minmax(0,1fr); } .performance-radar>div { grid-template-columns:auto minmax(0,1fr); align-items:center; } .performance-radar>div span { margin-top:0; } .performance-groups,.ggst-summary-grid { grid-template-columns:minmax(0,1fr); } .ggst-summary-grid article+article { border-left:0; } .ggst-character-progress>article { grid-template-columns:auto minmax(0,1fr); } .ggst-character-progress ul { grid-column:1 / -1; } .ggst-data-table { grid-template-columns:minmax(0,1fr); } .ggst-data-table>div:nth-child(odd) { border-right:0; } }
@media(max-width:380px) { .ggst-character-progress>article { grid-template-columns:minmax(0,1fr); } .ggst-character-progress ul { grid-column:1; } .ggst-datasets summary { grid-template-columns:minmax(0,1fr) 12px; } .ggst-datasets summary>small { display:none; } .ggst-datasets summary>span { align-items:flex-start; flex-direction:column; gap:var(--space-3); } }
@media(max-width:720px) { .matchup-list-header,.matchup-list-row { grid-template-columns:minmax(0,1fr) 52px 52px 34px 34px; gap:6px; } .matchup-list-header { min-height:36px; } .matchup-list-header button { padding:4px 0; font-size:8px; letter-spacing:0; } .matchup-list-header button i { min-width:7px; margin-left:1px; } .matchup-list-row { min-height:54px; padding:7px 0; } .matchup-list-row>b { font-size:14px; } .matchup-list-row .character img,.matchup-list-row .character-fallback { width:42px; height:42px; flex-basis:42px; } }
@media(max-width:720px) { .player-preview { width:min(350px,calc(100vw - 20px)); } }
@media(max-width:380px) { .profile-peak-ratings,.preview-peaks { grid-template-columns:minmax(0,1fr); } .bar-label { align-items:flex-start; } }
@media(max-width:720px) {
  .topbar { --header-control-height:44px; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; padding:12px; }
  .topbar .logo { width:min(150px,100%); height:44px; min-width:0; }
  .topbar .theme-switcher { grid-column:2; grid-row:1; justify-self:end; }
  .topbar .menu-toggle { grid-column:3; grid-row:1; }
  .topbar .main-nav { max-height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain; }
  .search-history .history-chip { min-height:44px; max-width:100%; }
  .weekday-grid { grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:14px 8px; }
  .weekday-item strong,.weekday-item small,.time-of-day-item strong,.time-of-day-item small { overflow:visible; white-space:normal; overflow-wrap:anywhere; }
  .weekday-item small,.time-of-day-item small { font-size:10px; line-height:1.4; }
  .rival-profile>div>a { overflow-wrap:anywhere; line-height:1.05; }
  .profile-defeat-card { align-items:start; gap:8px 10px; padding:14px 0; }
  .profile-defeat-card>span { padding-top:12px; }
  .profile-defeat-player { grid-template-columns:42px minmax(0,1fr); gap:6px 10px; }
  .profile-defeat-player .character { grid-column:1 / -1; display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; width:100%; }
  .profile-defeat-player .character>span:last-child { overflow:visible; white-space:normal; overflow-wrap:anywhere; }
  .profile-defeat-player>div { grid-column:2; text-align:left; }
  .profile-defeat-player a { white-space:normal; overflow-wrap:anywhere; line-height:1.15; }
  .profile-defeat-card small { line-height:1.5; }
  .profile-defeat-card>b { grid-column:2; display:grid; grid-template-columns:42px max-content minmax(0,1fr); gap:10px; padding-left:0; }
  .profile-defeat-card>b>.rank-icon { justify-self:center; }
  .rating-date-picker input { min-width:0; max-width:100%; height:44px; font-size:16px; }
  .panel-filter { min-width:0; font-size:16px; }
  .set-summary { grid-template-columns:22px minmax(0,1fr) auto; grid-template-areas:"toggle player score" "toggle versus versus" "toggle opponent opponent" "toggle gap gap" "toggle meta meta"; gap:10px 8px; padding-right:4px; }
  .set-summary>.set-toggle { grid-area:toggle; width:22px; min-height:44px; }
  .set-summary>.set-score { grid-area:score; }
  .set-summary>.player-match-rating { grid-area:player; }
  .set-summary>.versus { grid-area:versus; }
  .set-summary>.opponent-link { grid-area:opponent; min-width:0; white-space:normal; overflow-wrap:anywhere; }
  .set-summary>.rating-gap-cell { grid-area:gap; min-width:0; max-width:100%; }
  .set-summary>small { grid-area:meta; overflow-wrap:anywhere; }
  .set-summary .player-match-rating>b { white-space:normal; overflow-wrap:anywhere; }
  .set-summary .match-participant>small { flex-wrap:wrap; }
  .set-details .match-side-rating>b { max-width:100%; flex-wrap:wrap; white-space:normal; overflow-wrap:anywhere; }
}
@media(max-width:480px) {
  .time-of-day-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
  .rating-date-picker label { grid-column:1 / -1; }
  .matchup-list-header { display:flex; flex-wrap:wrap; gap:4px; }
  .matchup-list-header button { flex:1 1 auto; min-height:36px; padding:6px; text-align:center; }
  .matchup-list-header button.active { background:var(--color-accent-tint); }
  .matchup-list-overview .matchup-list-row,.profile-matchup-list .matchup-list-row { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 8px; padding:12px; }
  .matchup-list-row .character { grid-column:1 / -1; }
  .matchup-list-row .character>span:last-child { overflow:visible; white-space:normal; overflow-wrap:anywhere; }
  .matchup-list-row>b { min-width:0; overflow-wrap:anywhere; text-align:left; }
  .matchup-list-row>b:before { content:attr(data-label); display:block; margin-bottom:4px; color:var(--muted); font:700 9px var(--font-body); text-transform:uppercase; }
}
@media(max-width:380px) {
  .character-record { height:auto; max-height:none; grid-template-columns:minmax(0,1fr); gap:10px; }
  .character-record>.character>span:last-child { white-space:normal; overflow-wrap:anywhere; }
  .character-record>span:last-child { width:100%; min-width:0; border-top:1px solid var(--line); border-left:0; padding:8px 0 0; }
  .insight-badge { border-right:0; border-bottom:1px solid var(--line); }
  .insight-badge:last-child { border-bottom:0; }
}
:root {
  --topbar-expanded-height:72px;
  --topbar-compact-height:56px;
  --topbar-motion:cubic-bezier(.2,0,0,1);
  scroll-padding-top:calc(var(--topbar-compact-height) + env(safe-area-inset-top,0px) + 12px);
}
body { padding-top:calc(var(--topbar-expanded-height) + env(safe-area-inset-top,0px)); }
.topbar {
  --topbar-height:var(--topbar-expanded-height);
  position:fixed;
  z-index:25;
  inset:0 0 auto;
  height:calc(var(--topbar-height) + env(safe-area-inset-top,0px));
  min-height:0;
  padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(16px);
  transition:height 420ms var(--topbar-motion),padding 420ms var(--topbar-motion),background-color 200ms cubic-bezier(.2,0,0,1),box-shadow 200ms cubic-bezier(.2,0,0,1);
}
.topbar .logo { transition:width 420ms var(--topbar-motion),height 420ms var(--topbar-motion),transform .5s var(--spring),filter .2s; }
.topbar.is-compact { --topbar-height:var(--topbar-compact-height); background:var(--surface-strong); box-shadow:0 4px 18px var(--color-overlay-soft); }
.topbar.is-compact .logo { width:clamp(132px,11vw,164px); height:40px; }
@supports(transition-timing-function:linear(0,1)) {
  :root { --topbar-motion:linear(0,.079,.246,.43,.598,.736,.84,.914,.963,.993,1.008,1.014,1.015,1.013,1.01,1.007,1.004,1.002,1.001,1,1); }
}
@media(min-width:721px) and (max-width:1100px) {
  :root { --topbar-expanded-height:80px; }
  .topbar { padding-top:calc(12px + env(safe-area-inset-top,0px)); }
  .topbar.is-compact { padding-top:calc(5px + env(safe-area-inset-top,0px)); padding-bottom:5px; }
}
@media(max-width:1100px) {
  .topbar .main-nav { max-height:calc(100dvh - var(--topbar-height) - env(safe-area-inset-top,0px)); overflow-y:auto; overscroll-behavior:contain; }
}
@media(max-width:720px) {
  .topbar { padding-top:calc(12px + env(safe-area-inset-top,0px)); }
  .topbar.is-compact { padding-top:calc(5px + env(safe-area-inset-top,0px)); padding-bottom:5px; }
  .topbar.is-compact .logo { width:min(132px,100%); height:32px; }
}