@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/barlow-condensed-v13-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/barlow-condensed-v13-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/barlow-condensed-v13-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/barlow-condensed-v13-700-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/barlow-condensed-v13-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/barlow-condensed-v13-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-v15-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-v15-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-v15-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-v15-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-v15-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-v15-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-v15-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-v15-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:    #0B0D12;
  --panel: #141821;
  --row:   #10141B;
  --rule:  #232A36;
  --ink:   #E4E8EE;
  --mute:  #9AA4B4;
  --dim:   #79839A;
  --gold:  #35C6E0;
  --good:  #3E8E7E;
  --bad:   #C8635A;

  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Outfit", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;

  --fs-1: 12px;
  --fs-2: 12.5px;
  --fs-3: 14px;
  --fs-4: 18px;
  --fs-5: 28px;

  --acc-amber:  #C8933C;
  --acc-violet: #9B7BD4;

  --shadow-1: 0 10px 26px rgba(0,0,0,.5);
  --shadow-2: 0 14px 34px rgba(0,0,0,.55);
  --shadow-3: 0 24px 80px rgba(0,0,0,.65);
  --hairline: rgba(255,255,255,0.035);
  --hairline-2: rgba(255,255,255,0.05);
  --faint: rgba(255,255,255,0.016);
  --scrim: rgba(4,6,10,.78);
  --lift: rgba(255,255,255,0.07);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.18);
  --shadow-bar: 0 1px 0 var(--hairline-2), 0 8px 18px -14px rgba(0,0,0,.9);
  --pill-on: color-mix(in srgb, var(--gold) 15%, transparent);
  --pill-hover: var(--lift);

  --gutter: 20px;
  --sticky-top: 49px;

  --chip-base: #000;
  --chip-fill: 26%;
  --chip-edge: 55%;
  --chip-ring: 92%;
  --chip-ink: #fff;

  --band-s: #E0574B;
  --band-a: #E08B3E;
  --band-b: #D5B63F;
  --band-c: #6FA86B;
  --band-d: #4C89A8;
  --band-f: #9299A5;

  --medal-gold:   #E7B95B;
  --medal-silver: #B8C2CC;
  --medal-bronze: #C98C5C;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:    #F6F8FB;
  --panel: #FFFFFF;
  --row:   #EDF1F6;
  --rule:  #D5DCE6;
  --ink:   #11161F;
  --mute:  #556072;
  --dim:   #7C8798;
  --gold:  #09687B;
  --good:  #1F6B5B;
  --bad:   #A23A2E;

  --acc-amber:  #8A6113;
  --acc-violet: #5E42A0;

  --shadow-1: 0 8px 20px rgba(17,22,31,.10);
  --shadow-2: 0 12px 28px rgba(17,22,31,.13);
  --shadow-3: 0 20px 60px rgba(17,22,31,.18);
  --hairline: rgba(17,22,31,0.06);
  --hairline-2: rgba(17,22,31,0.08);
  --faint: rgba(17,22,31,0.022);
  --scrim: rgba(28,34,45,.42);
  --lift: rgba(17,22,31,0.05);
  --shadow-card: 0 1px 2px rgba(17,22,31,.07), 0 3px 10px rgba(17,22,31,.05);
  --shadow-bar: 0 1px 0 var(--rule), 0 8px 18px -14px rgba(17,22,31,.35);
  --pill-on: color-mix(in srgb, var(--gold) 12%, transparent);

  --chip-base: #fff;
  --chip-fill: 15%;
  --chip-edge: 42%;
  --chip-ring: 80%;
  --chip-ink: color-mix(in srgb, var(--c, #555) 74%, #000);

  --band-s: #B83C31;
  --band-a: #9A5C0C;
  --band-b: #7E6A0A;
  --band-c: #3D7A39;
  --band-d: #2C6285;
  --band-f: #5D6472;

  --medal-gold:   #8A6113;
  --medal-silver: #5E6873;
  --medal-bronze: #8A5326;

  --dim:   #616B7A;

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --bg:    #F6F8FB;
  --panel: #FFFFFF;
  --row:   #EDF1F6;
  --rule:  #D5DCE6;
  --ink:   #11161F;
  --mute:  #556072;
  --dim:   #7C8798;
  --gold:  #09687B;
  --good:  #1F6B5B;
  --bad:   #A23A2E;

  --acc-amber:  #8A6113;
  --acc-violet: #5E42A0;

  --shadow-1: 0 8px 20px rgba(17,22,31,.10);
  --shadow-2: 0 12px 28px rgba(17,22,31,.13);
  --shadow-3: 0 20px 60px rgba(17,22,31,.18);
  --hairline: rgba(17,22,31,0.06);
  --hairline-2: rgba(17,22,31,0.08);
  --faint: rgba(17,22,31,0.022);
  --scrim: rgba(28,34,45,.42);
  --lift: rgba(17,22,31,0.05);
  --shadow-card: 0 1px 2px rgba(17,22,31,.07), 0 3px 10px rgba(17,22,31,.05);
  --shadow-bar: 0 1px 0 var(--rule), 0 8px 18px -14px rgba(17,22,31,.35);
  --pill-on: color-mix(in srgb, var(--gold) 12%, transparent);

  --chip-base: #fff;
  --chip-fill: 15%;
  --chip-edge: 42%;
  --chip-ring: 80%;
  --chip-ink: color-mix(in srgb, var(--c, #555) 74%, #000);

  --band-s: #B83C31;
  --band-a: #9A5C0C;
  --band-b: #7E6A0A;
  --band-c: #3D7A39;
  --band-d: #2C6285;
  --band-f: #5D6472;

  --medal-gold:   #8A6113;
  --medal-silver: #5E6873;
  --medal-bronze: #8A5326;

  --dim:   #616B7A;

  color-scheme: light;
}
}

@media (max-width: 640px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-3);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }



.chip, .thumb, .orb, .res, .form i, .lineup-ball, .owner-badge,
.legend-swatch, .tl-item, .tl-card,
.gate input, .gate button, .pill, .depth-warn, .banner,
.ball-hero > img, .player-hero > img, .strip, .kpi,
.conf-track, .conf-fill, .meter-track, .meter-fill,
.tl-pos, .tl-pos::after { border-radius: var(--r); }

.conf-track, .conf-fill, .tl-pos, .tl-pos::after { border-radius: var(--r-sm); }
.orb { border-radius: var(--r-sm); }

.nav a, .subnav button, .leagues button, .ladders button { border-radius: 999px; }


.top {
  display: flex; align-items: center; gap: 0;
  background: var(--panel); box-shadow: var(--shadow-bar);
  position: sticky; top: 0; z-index: 40;
}
.brand {
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-4);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px var(--gutter);
  display: flex; align-items: center; white-space: nowrap;
}
.brand b { color: var(--gold); font-weight: 700; }

.nav {
  display: flex; align-items: center; gap: 2px; padding: 6px 0;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.nav a {
  font-family: var(--body); font-weight: 600; font-size: var(--fs-3);
  letter-spacing: 0; text-transform: none; color: var(--mute);
  padding: 7px 14px;
  display: flex; align-items: center; white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--pill-hover); }
.nav a[aria-current="page"] { color: var(--gold); background: var(--pill-on); }

.stamp {
  margin-left: auto; font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
  padding: 12px 18px; border-left: 1px solid var(--rule);
  display: flex; align-items: center; white-space: nowrap;
}


.chrome {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  background: var(--row); padding: 6px 12px;
}
.chrome.is-tierlist { display: block; }
@media (min-width: 641px) {
  .chrome.is-tierlist { display: flex; flex-wrap: wrap; align-items: center; }
  .chrome.is-tierlist > .tl-scope { flex: 1 1 100%; }
}
.tl-view-axes, .tl-scope {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
}
.tl-scope { padding-top: 6px; }
.tl-tier-choose { display: flex; align-items: center; gap: 4px; }
.tl-tier-choose select {
  margin: 0; padding: 6px 28px 6px 9px;
  min-width: 138px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--row); color: var(--ink); font: var(--fs-2) var(--body);
  cursor: pointer;
}
.tl-tier-choose select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (pointer: coarse) {
  .tl-tier-choose select { font-size: 16px; min-height: 40px; }
}

.subnav { display: flex; align-items: center; gap: 2px; padding: 2px 0; }
.subnav button {
  font-family: var(--body); font-weight: 600; font-size: var(--fs-2); letter-spacing: 0;
  text-transform: none; background: none; border: 0; color: var(--mute);
  padding: 6px 13px; cursor: pointer;
}
.subnav button:hover { color: var(--ink); background: var(--pill-hover); }
.subnav button[aria-pressed="true"] { color: var(--gold); background: var(--pill-on); }

.leagues { display: flex; align-items: center; gap: 2px; }
.flabel {
  font-family: var(--body); font-size: var(--fs-1); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--mute); padding: 0 8px 0 2px;
  align-self: stretch; display: flex; align-items: center;
}
.leagues button {
  font-family: var(--body); font-weight: 600; font-size: var(--fs-2); letter-spacing: 0;
  text-transform: none; background: none; border: 0; color: var(--mute);
  padding: 6px 13px; cursor: pointer;
}
.leagues button:hover { color: var(--ink); }
.leagues button[aria-pressed="true"] { color: var(--bg); background: var(--gold); }


.omni { position: relative; margin-left: auto; align-self: stretch; display: flex; align-items: center; }
.omni input {
  background: var(--row); border: 0; border-radius: 999px; color: var(--ink); font-family: var(--body);
  font-size: var(--fs-2); padding: 8px 15px; margin: 0 6px; width: 250px;
}
.omni input::placeholder { color: var(--dim); }
.omni input:focus {
  outline: none; background: var(--row);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent);
}
.omni input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.omni-results {
  position: absolute; top: 100%; right: 0; z-index: 60;
  min-width: min(330px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  margin-top: 4px; background: var(--panel); border-radius: var(--r-lg);
  max-height: 380px; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: var(--shadow-2);
}
.omni-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0;
  padding: 8px 12px; cursor: pointer; color: var(--ink); font-family: var(--body);
}
.omni-row:hover, .omni-row.is-active { background: var(--row); }
.omni-row
img[data-src]:not([src]) { visibility: hidden; }

.thumb { width: 26px; height: 26px; }
.omni-name { flex: 1; font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-line, .omni-sub { display: block; overflow: hidden; text-overflow: ellipsis; }
.omni-sub { font-size: var(--fs-1); color: var(--dim); margin-top: 1px; }
.omni-line.has-mark, .omni-name.has-mark { display: flex; align-items: center; gap: 6px; }
.omni-line-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.omni-kind {
  font-family: var(--body); font-weight: 600; font-size: var(--fs-1); letter-spacing: 0; text-transform: none;
  color: var(--dim); background: var(--lift); border-radius: var(--r-sm); padding: 2px 5px;
}
.omni-empty { padding: 14px 12px; color: var(--dim); font-size: var(--fs-2); margin: 0; }


.section-title {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0; font: inherit; font-weight: 400;
  padding: 16px var(--gutter) 8px;
}
.st-label {
  font-family: var(--cond); font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
}
.st-hint { font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); }

thead th.nosort { cursor: default; }


.wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.wrap .sr-only { left: 0; top: 0; }
.wrap + .note, table + .note { margin-top: 4px; }

table { border-collapse: collapse; width: 100%; min-width: 720px; }

thead th {
  background: var(--panel); border-bottom: 1px solid var(--rule);
  font-family: var(--body); font-weight: 600; font-size: var(--fs-1);
  letter-spacing: 0; text-transform: none; color: var(--mute);
  padding: 9px 12px; text-align: right; white-space: nowrap; cursor: pointer;
  user-select: none;
}
thead th:first-child, thead th.left { text-align: left; }
thead th:hover { color: var(--ink); }
thead th[data-dir]::after { content: " ▾"; color: var(--gold); }
thead th[data-dir="asc"]::after { content: " ▴"; color: var(--gold); }

tbody td {
  border-bottom: 1px solid var(--hairline); padding: 6px 12px;
  line-height: 1.35; text-align: right; font-family: var(--mono); font-size: var(--fs-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
tbody td:first-child, tbody td.left { text-align: left; font-family: var(--body); font-size: var(--fs-3); }
tbody tr:hover td { background: var(--panel); }
tbody tr.thin td { color: var(--dim); }
tbody tr.thin td:first-child { color: var(--dim); }

.rank { color: var(--dim); font-family: var(--mono); font-size: var(--fs-1); width: 1%; }

.types { display: inline-flex; gap: 3px; vertical-align: -4px; margin-right: 7px; }
.types img { width: 17px; height: 17px; display: block; }

.roll-split { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font-size: var(--fs-1); }
.roll-split-item { display: inline-flex; align-items: center; white-space: nowrap; }
.roll-split-item .types { margin-right: 5px; }
.roll-split-rate { font-family: var(--mono); }
.roll-split-thin { color: var(--dim); }

.name { font-weight: 500; }
.sub { color: var(--dim); font-size: var(--fs-1); font-family: var(--mono); margin-left: 7px; }

.wr { font-weight: 600; }
.wr.hi { color: var(--good); }
.wr.lo { color: var(--bad); }


thead tr.group-row th {
  border-bottom: 0; padding: 9px 12px 2px; font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0; color: var(--dim); text-align: center;
  cursor: default; background: var(--panel);
}
thead tr.group-row th.group-blank { border-top-color: transparent; }
thead tr.group-row th:not(.group-blank) {
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
thead tr.group-row + tr th { border-top: 0; padding-top: 4px; }

thead th.support { color: var(--dim); font-size: var(--fs-1); }
thead th.primary { color: var(--ink); }

tbody td.support { color: var(--dim); font-size: var(--fs-1); }

.wr-primary { padding-top: 4px; padding-bottom: 4px; }
.wr-primary b {
  display: block; font-size: var(--fs-3); font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--mute);
}
.wr-primary b.hi { color: var(--good); }
.wr-primary b.lo { color: var(--bad); }
.wr-bound {
  display: block; font-size: var(--fs-1); color: var(--dim); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}


.cell-detail {
  display: block; font-size: var(--fs-1); line-height: 1.1; color: var(--dim);
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 110ms linear;
}
tbody tr:hover .cell-detail, tbody tr:focus-within .cell-detail { opacity: 1; }

.wr-side { padding-top: 4px; padding-bottom: 4px; }
.wr-side b {
  display: block; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--mute);
}
.wr-side b.hi { color: var(--good); }
.wr-side b.lo { color: var(--bad); }

tbody tr:hover .wr-primary b { color: var(--ink); }
tbody tr:hover .wr-primary b.hi { color: var(--good); }
tbody tr:hover .wr-primary b.lo { color: var(--bad); }
tbody tr:hover .conf-fill { opacity: 1; }

.conf { padding-top: 4px; padding-bottom: 4px; }
.conf-box { display: inline-grid; justify-items: end; gap: 1px; min-width: 62px; }
.conf-box b {
  font-size: var(--fs-2); font-weight: 500; font-variant-numeric: tabular-nums;
  line-height: 1.15; color: var(--ink);
}
.conf-pm {
  font-size: var(--fs-1); color: var(--dim); line-height: 1.1;
  transition: opacity 110ms linear;
}
.conf-swap { display: grid; }
.conf-swap > * { grid-area: 1 / 1; }
tbody tr:hover .conf-pm { opacity: 0; }
.conf-track {
  width: 100%; height: 2px; background: var(--rule); display: block; margin-top: 2px;
}
.conf-fill { display: block; height: 100%; background: var(--mute); opacity: 0.85; }
tbody tr.thin .conf-box b { color: var(--dim); }


.info {
  display: inline-grid; place-items: center; width: 14px; height: 14px;
  margin-left: 6px; flex-shrink: 0; vertical-align: 1px;
  border: 1px solid var(--rule); border-radius: 50%;
  font-family: var(--mono); font-size: var(--fs-1); font-style: italic;
  color: var(--dim); text-decoration: none; cursor: help; line-height: 1;
  background: transparent; padding: 0;
}
.info:hover, .info:focus-visible { color: var(--gold); border-color: var(--gold); }
thead th .info { vertical-align: 0; }

.method-dialog {
  margin: auto;
  width: min(600px, calc(100vw - 28px)); max-height: min(78vh, 720px);
  padding: 0; border: 1px solid var(--gold); border-radius: var(--r);
  background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-3);
}
.method-dialog::backdrop { background: var(--scrim); }
.method-dialog-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--gutter); border-bottom: 1px solid var(--rule);
}
.method-dialog-head h2 {
  font: 700 var(--fs-4)/1.2 var(--cond); text-transform: uppercase; letter-spacing: .05em;
}
.method-dialog-close {
  background: transparent; border: 1px solid var(--rule); color: var(--mute);
  padding: 6px 10px; cursor: pointer; font: var(--fs-1) var(--mono);
}
.method-dialog-close:hover, .method-dialog-close:focus-visible {
  border-color: var(--gold); color: var(--gold);
}
.method-dialog-body { overflow: auto; max-height: calc(min(78vh, 720px) - 58px); }
.method-dialog-context {
  padding: 18px var(--gutter); font: var(--fs-2)/1.65 var(--body); border-bottom: 1px solid var(--rule);
  white-space: pre-line;
}
.method-dialog-full summary {
  padding: 13px var(--gutter); cursor: pointer; color: var(--gold);
  font: 700 var(--fs-2) var(--cond); letter-spacing: .08em; text-transform: uppercase;
}
.method-dialog-sections { border-top: 1px solid var(--rule); }
.method-dialog-section { padding: 16px var(--gutter); border-bottom: 1px solid var(--rule); }
.method-dialog-section h3 {
  color: var(--gold); font: 700 var(--fs-2) var(--cond); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 14px;
}
.method-dialog-section h4 { font: 600 var(--fs-2) var(--body); margin: 12px 0 3px; }
.method-dialog-section p { color: var(--mute); font: var(--fs-1)/1.65 var(--mono); }

.bar { position: relative; }
.bar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 0%); background: var(--rule);
}
.bar span { position: relative; }


.grid { border-collapse: collapse; font-family: var(--mono); font-size: var(--fs-1); }
.grid th {
  position: static; background: var(--panel); color: var(--mute);
  font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.08em;
  padding: 4px 5px; border: 1px solid var(--rule); text-transform: uppercase;
}
.grid th.rowhead { text-align: left; white-space: nowrap; position: sticky; left: 0; z-index: 10; }
.grid td {
  border: 1px solid var(--rule); padding: 4px 5px; text-align: center;
  font-variant-numeric: tabular-nums; min-width: 42px;
}
.stat-primer {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 8px var(--gutter); border-bottom: 1px solid var(--rule);
  color: var(--mute); font: var(--fs-1)/1.5 var(--body);
}
.stat-primer b {
  color: var(--gold); font: 700 var(--fs-1) var(--cond);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.matchup-explorer { border-bottom: 1px solid var(--rule); }
.matchup-head {
  display: flex; align-items: end; justify-content: space-between; gap: 18px;
  padding: 18px var(--gutter); flex-wrap: wrap; border-bottom: 1px solid var(--rule);
}
.matchup-head h2 { font: 700 var(--fs-5) var(--cond); text-transform: uppercase; letter-spacing: 0.04em; }
.matchup-head p { color: var(--mute); font-size: var(--fs-2); margin-top: 4px; }
.matchup-choose { display: grid; gap: 5px; min-width: min(300px, 100%); }
.matchup-choose span { color: var(--dim); font: 700 var(--fs-1) var(--cond); text-transform: uppercase; letter-spacing: 0.12em; }
.matchup-choose select {
  width: 100%; min-height: 38px; padding: 7px 10px; background: var(--panel);
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r);
  font: var(--fs-2) var(--body);
}
.matchup-summary { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 10px var(--gutter); border-bottom: 1px solid var(--rule); }
.matchup-summary b { color: var(--ink); font-weight: 600; }
.matchup-summary span { color: var(--dim); font: var(--fs-1) var(--mono); }
.matchup-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.matchup-list section { background: var(--bg); min-width: 0; }
.matchup-list h3, .matchup-balls h4 { padding: 9px var(--gutter); color: var(--dim);
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.matchup-result {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center; text-align: left; padding: 8px var(--gutter);
  color: var(--ink); background: var(--bg); border: 0; border-top: 1px solid var(--rule);
  font: var(--fs-2) var(--body); cursor: pointer;
}
.matchup-result:hover, .matchup-result:focus-visible { background: var(--panel); }
.matchup-result:focus-visible { outline-offset: -2px; }
.matchup-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchup-result b { font: 600 var(--fs-2) var(--mono); }
.matchup-games { color: var(--dim); font: var(--fs-1) var(--mono); min-width: 86px; text-align: right; }
.matchup-pair { border-top: 1px solid var(--rule); }
.matchup-pair-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 13px var(--gutter) 4px; }
.matchup-pair-head h3 { font: 700 var(--fs-4) var(--cond); text-transform: uppercase; }
.matchup-pair-head span, .matchup-pair-note, .matchup-none { color: var(--dim); font: var(--fs-1)/1.5 var(--mono); }
.matchup-pair-note { padding: 0 var(--gutter) 10px; }
.matchup-none { padding: 12px var(--gutter); }
.matchup-balls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.matchup-balls section { background: var(--bg); min-width: 0; }
.matchup-balls a { display: flex; gap: 9px; align-items: center; padding: 5px var(--gutter);
  border-top: 1px solid var(--rule); color: var(--ink); font-size: var(--fs-2); }
.matchup-balls a:hover { background: var(--panel); }
.matchup-balls .thumb { width: 26px; height: 26px; }
.matchup-balls a span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchup-balls a i { color: var(--dim); font: normal var(--fs-1) var(--mono); }
.matchup-full summary { padding: 12px var(--gutter); color: var(--mute); cursor: pointer;
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.matchup-full summary:hover { color: var(--ink); }
@media (max-width: 640px) {
  .matchup-list, .matchup-balls { grid-template-columns: minmax(0, 1fr); }
  .matchup-result { gap: 7px; }
  .matchup-games { min-width: 64px; }
}


.pvp-guide-row { display: flex; justify-content: flex-end; margin: 10px var(--gutter) 0; }
.pvp-guide-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  font: 600 var(--fs-2)/1.4 var(--body); color: var(--gold); text-decoration: none;
  background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.pvp-guide-pill:hover, .pvp-guide-pill:focus-visible { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.pvp-gate { padding: 30px var(--gutter); display: grid; gap: 13px; justify-items: start; max-width: 66ch; }
.pvp-gate h2 { font: 700 var(--fs-5) var(--cond); text-transform: uppercase; letter-spacing: 0.04em; }
.pvp-gate-lede { color: var(--mute); font: var(--fs-2)/1.65 var(--body); }
.pvp-gate-why { color: var(--ink); font: var(--fs-2) var(--body); }
.pvp-demo { width: 100%; display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.pvp-demo-label { background: var(--panel); padding: 7px 12px; color: var(--dim);
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.pvp-demo-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 150px;
  gap: 12px; align-items: center; background: var(--bg); padding: 9px 12px; }
.pvp-demo-slot { font: 700 var(--fs-3) var(--mono); color: var(--dim); }
.pvp-demo-bar { height: 8px; border-radius: 999px; background: var(--rule); }
.pvp-demo-row.r2 .pvp-demo-bar { background: linear-gradient(90deg, var(--good), transparent 78%); }
.pvp-demo-row.r0 .pvp-demo-bar { background: linear-gradient(90deg, var(--mute), transparent 52%); }
.pvp-demo-row.rm1 .pvp-demo-bar { background: linear-gradient(90deg, var(--bad), transparent 40%); }
.pvp-demo-row.r2 .pvp-verdict b { color: var(--good); }
.pvp-demo-row.r0 .pvp-verdict b { color: var(--mute); }
.pvp-demo-row.rm1 .pvp-verdict b { color: var(--bad); }

.pvp-steps { display: grid; }
.pvp-step { border-bottom: 1px solid var(--rule); }
.pvp-step.is-waiting { opacity: .42; }
.pvp-step.is-waiting .pvp-step-n { border-style: dashed; }
.pvp-step-sum.is-waiting { color: var(--dim); font-style: italic; }
.pvp-step-head { display: flex; gap: 10px; align-items: center; padding: 13px var(--gutter); }
.pvp-step-n {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--panel); border: 1px solid var(--rule);
  color: var(--dim); font: 700 var(--fs-1) var(--mono);
}
.pvp-step.is-current .pvp-step-n { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.pvp-step.is-done .pvp-step-n { color: var(--good); border-color: var(--good); }
.pvp-step-head h3 { font: 700 var(--fs-2) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.pvp-step.is-done .pvp-step-head h3 { color: var(--mute); }
.pvp-step-sum { flex: 1; min-width: 0; color: var(--ink); font: var(--fs-2) var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-step-edit { margin-left: auto; padding: 3px 9px; background: transparent; color: var(--mute);
  border: 1px solid var(--rule); border-radius: var(--r); font: var(--fs-1) var(--body); cursor: pointer; }
.pvp-step-edit:hover { color: var(--ink); border-color: var(--mute); }
.pvp-step-body { display: grid; gap: 11px; justify-items: start; padding: 0 var(--gutter) 16px; }
.pvp-hint { color: var(--dim); font: var(--fs-1)/1.6 var(--body); max-width: 70ch; }

.pvp-inline-form { display: flex; gap: 7px; width: min(420px, 100%); }
.pvp-inline-form input {
  flex: 1; min-width: 0; min-height: 36px; padding: 7px 10px; background: var(--panel);
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r); font: var(--fs-2) var(--body);
}
.pvp-choices { display: flex; gap: 9px; flex-wrap: wrap; }
.pvp-choice {
  display: grid; gap: 2px; text-align: left; padding: 10px 13px; min-width: 150px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r); cursor: pointer;
}
.pvp-choice:hover { border-color: var(--mute); }
.pvp-choice.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.pvp-choice b { font: 700 var(--fs-2) var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.pvp-choice small { color: var(--dim); font: var(--fs-1) var(--body); }
.pvp-choices.is-tight .pvp-choice { min-width: 116px; }

.pvp-who { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pvp-who .thumb { width: 28px; height: 28px; flex: none; border-radius: 50%; }
.pvp-who.is-big .thumb { width: 40px; height: 40px; }
.pvp-who-text { display: grid; gap: 1px; min-width: 0; }
.pvp-who-text b { font: 600 var(--fs-2) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-who-text small { color: var(--dim); font: var(--fs-1) var(--mono); }

.pvp-ladder { width: 100%; display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r); max-height: 340px; overflow-y: auto; }
.pvp-ladder-row { display: flex; gap: 10px; align-items: center; text-align: left;
  padding: 7px 11px; background: var(--bg); border: 0; cursor: pointer; }
.pvp-ladder-row:hover { background: var(--panel); }
.pvp-ladder-row .div-crest { width: 26px; height: 18px; flex: none; }
.pvp-ladder-row .pvp-who { flex: 1; }
.pvp-ladder-sort { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pvp-choice.is-small { min-width: 0; padding: 6px 10px; font: 600 var(--fs-1) var(--body); }
.pvp-choice:disabled { opacity: 0.5; cursor: default; }

.pvp-odds { margin-left: auto; flex: none; min-width: 44px; padding: 3px 7px; text-align: center;
  border-radius: 999px; font: 700 var(--fs-2) var(--mono); border: 1px solid currentColor; }
.pvp-odds.is-good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.pvp-odds.is-even { color: var(--mute); }
.pvp-odds.is-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent); }
.pvp-odds.is-rough { border-style: dashed; }
.pvp-odds.is-none { color: var(--dim); border-color: transparent; }

.pvp-reveal { width: 100%; display: grid; gap: 6px; }
.pvp-reveal-n { color: var(--dim); font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.pvp-reveal-picks { display: flex; gap: 7px; flex-wrap: wrap; }
.pvp-pick-ball {
  display: grid; gap: 2px; justify-items: center; width: 92px; padding: 7px 5px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r); font: var(--fs-1) var(--body); cursor: pointer; text-align: center;
}
.pvp-pick-ball:hover { border-color: var(--mute); }
.pvp-pick-ball.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.pvp-pick-ball .thumb { width: 38px; height: 38px; }
.pvp-pick-ball span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-pick-ball i { color: var(--dim); font: normal var(--fs-1) var(--mono); }

.pvp-pair { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); }
.pvp-side { background: var(--bg); padding: 11px 13px 14px; min-width: 0; }
.pvp-side-head { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 9px; }
.pvp-side-head h4 { font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.pvp-slots { display: grid; gap: 6px; }
.pvp-slot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 9px; align-items: center; min-height: 50px; padding: 5px 28px 5px 7px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.pvp-slot.is-over { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.pvp-slot.is-hidden { border-style: dashed; }
.pvp-slot-head { display: grid; gap: 1px; justify-items: center; }
.pvp-slot-head b { font: 700 var(--fs-3) var(--mono); }
.pvp-slot-head i { color: var(--dim); font: normal var(--fs-1) var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.pvp-slot.is-hidden .pvp-slot-head i { color: var(--acc-amber, var(--mute)); }
.pvp-slot-empty { color: var(--dim); font: var(--fs-1) var(--mono); }
.pvp-tile-off { position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px; padding: 0; background: var(--panel); color: var(--dim);
  border: 1px solid var(--rule); border-radius: 50%; font: var(--fs-1) var(--mono); cursor: pointer;
  opacity: 0; transition: opacity .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); }
.pvp-slot:hover .pvp-tile-off, .pvp-slot:focus-within .pvp-tile-off { opacity: 1; }
.pvp-tile-off:hover, .pvp-tile-off:focus-visible { opacity: 1; color: var(--bad); border-color: var(--bad); }
@media (hover: none) { .pvp-tile-off { opacity: 1; } }
.pvp-tile { display: flex; gap: 8px; align-items: center; min-width: 0; cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-touch-callout: none; }
.pvp-slot, .pvp-bench, .pvp-counters-btn { touch-action: manipulation; }
.pvp-tile.is-plain { cursor: default; }
.pvp-tile:active { cursor: grabbing; }
.pvp-tile.is-dragging { opacity: 0.4; }
.pvp-tile.is-held { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm); }
.pvp-tile .thumb { width: 32px; height: 32px; flex: none; }
.pvp-tile-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0; }
.pvp-tile-text b { font: 600 var(--fs-2) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-tile-text small { color: var(--dim); font: var(--fs-1) var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-tile.is-bench { padding: 5px 7px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.pvp-tile.is-bench:hover { border-color: var(--mute); }
.pvp-bench-head { margin: 13px 0 6px; color: var(--dim); font: 700 var(--fs-1) var(--cond);
  letter-spacing: 0.12em; text-transform: uppercase; }
.pvp-bench { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px;
  min-height: 52px; padding: 6px; border: 1px dashed var(--rule); border-radius: var(--r); }
.pvp-bench.is-over { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.pvp-bench-empty { grid-column: 1 / -1; color: var(--dim); font: var(--fs-1) var(--mono); padding: 4px; }
.pvp-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.pvp-result { border-bottom: 1px solid var(--rule); }
.pvp-outlook { display: flex; gap: 12px; align-items: center; margin: 14px var(--gutter) 10px;
  padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--panel); }
.pvp-outlook b { display: block; font: 700 var(--fs-4) var(--cond); letter-spacing: 0.06em; text-transform: uppercase; }
.pvp-outlook-chance { display: grid; justify-items: center; flex: none; padding-right: 12px;
  border-right: 1px solid var(--rule); }
.pvp-outlook .pvp-outlook-chance b { font: 700 var(--fs-5)/1 var(--mono); letter-spacing: 0; }
.pvp-outlook .pvp-outlook-chance small { font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.pvp-outlook small { color: var(--mute); font: var(--fs-1)/1.5 var(--body); }
.pvp-outlook.is-good { border-color: var(--good); }
.pvp-outlook.is-good b { color: var(--good); }
.pvp-outlook.is-bad { border-color: var(--bad); }
.pvp-outlook.is-bad b { color: var(--bad); }
.pvp-outlook.is-even b { color: var(--mute); }
.pvp-tip { display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin: 0 var(--gutter) 10px; padding: 11px 13px;
  background: var(--panel); border: 1px solid var(--gold); border-radius: var(--r); }
.pvp-tip b { display: block; font: 600 var(--fs-2) var(--body); }
.pvp-tip small { color: var(--dim); font: var(--fs-1)/1.5 var(--mono); }
.pvp-nohope { margin: 0 var(--gutter) 10px; color: var(--mute); font: var(--fs-2)/1.6 var(--body); max-width: 70ch; }
.pvp-hidden-note { padding: 0 var(--gutter) 10px; color: var(--dim); font: var(--fs-1)/1.6 var(--body); max-width: 78ch; }
.pvp-hidden-note b { color: var(--acc-amber, var(--mute)); }
.pvp-out { display: grid; grid-template-columns: 30px minmax(0, 1fr) 132px minmax(0, 1fr);
  gap: 12px; align-items: center; padding: 9px var(--gutter); border-top: 1px solid var(--rule); }
.pvp-out.is-guess { background: var(--faint); }
.pvp-out-ball { min-width: 0; padding: 5px 7px; border: 1px solid transparent; border-radius: var(--r); }
.pvp-out-ball.is-winner { border-color: var(--good); background: rgba(62,142,126,0.12); }
.pvp-out-ball.is-loser { border-color: var(--bad); background: rgba(180,84,75,0.1); opacity: 0.78; }
.pvp-verdict { display: grid; gap: 1px; text-align: center; }
.pvp-verdict b { font: 700 var(--fs-2) var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.pvp-verdict small { color: var(--dim); font: var(--fs-1) var(--mono); }
.pvp-out.r2 .pvp-verdict b, .pvp-out.r1 .pvp-verdict b { color: var(--good); }
.pvp-out.r0 .pvp-verdict b { color: var(--mute); }
.pvp-out.rm1 .pvp-verdict b, .pvp-out.rm2 .pvp-verdict b { color: var(--bad); }
.pvp-out.runk .pvp-verdict b { color: var(--dim); }
.pvp-assumptions summary { padding: 12px var(--gutter); color: var(--mute); cursor: pointer;
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.pvp-assumptions summary:hover { color: var(--ink); }
.pvp-assumptions ul { padding: 0 var(--gutter) 14px 34px; display: grid; gap: 5px; }
.pvp-assumptions li { color: var(--dim); font: var(--fs-1)/1.5 var(--body); }

@media (max-width: 860px) {
  .pvp-pair { grid-template-columns: minmax(0, 1fr); }
  .pvp-out { grid-template-columns: 30px minmax(0, 1fr); row-gap: 7px; }
  .pvp-out .pvp-verdict { grid-column: 2; text-align: left; }
  .pvp-demo-row { grid-template-columns: 22px minmax(0, 1fr); }
  .pvp-demo-row .pvp-verdict { grid-column: 2; text-align: left; }
  .pvp-bench { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .pvp-choice { min-width: 0; flex: 1 1 140px; }
  .pvp-step-head { flex-wrap: wrap; }
  .pvp-step-sum { flex-basis: 100%; white-space: normal; }
}


.player-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 18px var(--gutter); border-bottom: 1px solid var(--rule); background: var(--panel);
}
.player-head h1 { font-family: var(--cond); font-size: var(--fs-5); letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 700; }
.player-head .meta { font-family: var(--mono); font-size: var(--fs-2); color: var(--mute); }

.form { display: flex; gap: 3px; padding: 14px var(--gutter); flex-wrap: wrap; }
.form i {
  width: 20px; height: 20px; display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--fs-1); font-style: normal;
  border: 1px solid var(--rule); color: var(--dim);
}
.form i.w { color: var(--good); border-color: var(--good); }
.form i.l { color: var(--bad); border-color: var(--bad); }


.note {
  padding: 10px var(--gutter); font-size: var(--fs-2); color: var(--dim);
  border-bottom: 1px solid var(--rule); font-family: var(--mono);
}
.empty { padding: 40px var(--gutter); color: var(--mute); font-family: var(--mono); font-size: var(--fs-2); }


footer {
  border-top: 1px solid var(--rule); margin-top: 48px; padding: 16px var(--gutter) 72px;
  color: var(--dim); font-size: var(--fs-1); font-family: var(--mono); line-height: 1.7;
}
.foot-by { color: var(--mute); }
.foot-by strong { color: var(--ink); font-weight: 600; }
.foot-legal { margin-top: 2px; }
.foot-costs { margin-top: 6px; color: var(--mute); }
.foot-meta { margin-top: 8px; }
.foot-stats:empty { display: none; }
footer a { color: var(--mute); text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--gold); }
.new-dot {
  display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%;
  background: var(--gold); vertical-align: .5em;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  padding: 8px 14px; border-radius: var(--r);
  background: var(--gold); color: var(--bg); font: 600 var(--fs-2) var(--body); text-decoration: none;
}
.skip-link:focus { top: 10px; }
#view:focus { outline: none; }
#view { min-height: 100vh; }

.foot-get { padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
.foot-get-title { font: 700 var(--fs-2) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
.foot-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-badges a { display: block; padding: 0; border-radius: var(--r); }
.foot-badges a:first-child { margin-left: -10px; }
.foot-badges a:last-child { margin-left: -3px; }
.foot-badges a:hover { filter: brightness(1.2); }
.foot-badges img { display: block; width: auto; height: 40px; }
.foot-official { margin-top: 10px; color: var(--mute); }


.preview {
  background: #06191E; border-bottom: 1px solid var(--rule);
  color: var(--gold); font-family: var(--mono); font-size: var(--fs-1);
  padding: 7px var(--gutter); letter-spacing: 0.01em;
}
.preview a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }


.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px 2px 3px;
  background: color-mix(in srgb, var(--c, #555) var(--chip-fill), var(--chip-base));
  border: 1px solid color-mix(in srgb, var(--c, #555) var(--chip-edge), var(--chip-base));
  font-family: var(--body); font-size: var(--fs-1); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--chip-ink);
  white-space: nowrap; line-height: 1.2;
}
.chip img { width: 15px; height: 15px; display: block; }
.type-ico {
  filter: drop-shadow(0.6px 0 0 #fff) drop-shadow(-0.6px 0 0 #fff)
          drop-shadow(0 0.6px 0 #fff) drop-shadow(0 -0.6px 0 #fff);
}
@media (max-width: 760px), (pointer: coarse) {
  .type-ico {
    filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
            drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
  }
}
.chips { display: inline-flex; gap: 4px; vertical-align: -3px; }
.chip { position: relative; }
.chip.is-primary {
  font-weight: 800;
  border-color: color-mix(in srgb, var(--c, #555) var(--chip-ring), var(--chip-base));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #555) var(--chip-ring), var(--chip-base));
}
.chip.is-secondary { font-weight: 500; }


.thumb {
  width: 34px; height: 34px; object-fit: contain; display: block; flex-shrink: 0;
  background: #0A0E0F; border: 1px solid var(--rule);
}
.cellflex { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cellflex .name, .cellflex .ball-link, .cellflex > a.plain {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
tbody tr { transition: background 90ms linear; }
tbody td:first-child { padding-left: 12px; }
.cellflex > .roll-name { min-width: 0; white-space: normal; }


.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero-art {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 34px;
  opacity: 0.17; pointer-events: none; will-change: transform;
  animation: drift 64s linear infinite;
}
.hero-art img { width: 88px; height: 88px; object-fit: contain; flex-shrink: 0; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hero-inner { position: relative; padding: 52px 24px 44px; max-width: 1080px; }
.hero h1 {
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(38px, 8vw, 76px); line-height: 0.92; letter-spacing: 0.01em;
  color: var(--ink);
}
.hero h1 b { color: var(--gold); }
.hero-sub {
  font-family: var(--cond); font-size: clamp(15px, 2.4vw, 20px); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute);
  margin-top: 14px; max-width: 44ch; line-height: 1.4;
}

.strips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.strip { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.strip h2 {
  font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim); padding: 12px 16px;
  border-bottom: 1px solid var(--rule); background: var(--panel);
}
.home-context { padding: 9px var(--gutter);
  color: var(--mute); font: var(--fs-1)/1.45 var(--mono); }
.home-more { padding: 18px var(--gutter) 24px; }
.home-more h2 {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 12px;
}
.home-more-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px;
}
.home-more-card {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  background: var(--panel); color: inherit; text-decoration: none;
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  transition: transform 180ms var(--ease), box-shadow 180ms ease, background-color 140ms ease;
}
.home-more-card:hover {
  background: var(--panel); transform: translateY(-2px);
  box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.home-more-card b { font: 600 var(--fs-3) var(--body); color: var(--ink); }
.home-more-card span { font: var(--fs-2)/1.45 var(--body); color: var(--mute); }

.strip ol { list-style: none; }
.strip li {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid var(--rule); font-size: var(--fs-2);
}
.strip li:last-child { border-bottom: 0; }
.strip li:hover { background: var(--panel); }
.strip .pos { font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); width: 14px; }
.strip .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .strip-roll { flex: none; vertical-align: 0; }
.strip li:has(.roll-split) { flex-wrap: wrap; row-gap: 2px; }
.strip li .roll-split { flex-basis: 100%; order: 10; margin-top: 0; padding-left: 24px; }
.strip .val { font-family: var(--mono); font-size: var(--fs-2); font-weight: 600; }
.strip h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.strip-more {
  display: inline-flex; align-items: center; min-height: 32px; margin: -9px -8px -9px 0; padding: 0 8px;
  border-radius: 999px; color: var(--mute); text-decoration: none; white-space: nowrap;
}
.strip-more:hover, .strip-more:focus-visible { color: var(--gold); background: var(--pill-on); }

.strips { gap: 14px; padding: 14px var(--gutter) 6px; }
.strips > .strip {
  border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
  background: var(--panel); box-shadow: var(--shadow-1);
}
.strips > .strip h2 { background: transparent; border-bottom: 0; padding: 14px 16px 6px; }
.strips > .strip ol { padding: 2px 6px 8px; }
.strips > .strip li { border-bottom: 0; border-radius: var(--r); padding: 7px 10px; }
.strips > .strip li:hover { background: var(--lift); }
@media (prefers-reduced-motion: no-preference) {
  .strips > .strip, .home-more-card { animation: home-float-in 420ms var(--ease) both; }
  .strips > .strip:nth-child(2) { animation-delay: 60ms; }
  .strips > .strip:nth-child(3) { animation-delay: 120ms; }
}
@keyframes home-float-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hlive {
  --hl-wars: var(--bad); --hl-wars-ink: #FFB4B4; --hl-council: var(--medal-gold);
  --hl-fire-1: #FF3D00; --hl-fire-2: #FF9100; --hl-fire-3: #FFC24D;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  padding: 16px var(--gutter) 6px;
}
:root[data-theme="light"] .hlive { --hl-wars-ink: #A23A2E; --hl-fire-1: #9A3412; --hl-fire-2: #C2410C; --hl-fire-3: #B45309; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hlive { --hl-wars-ink: #A23A2E; --hl-fire-1: #9A3412; --hl-fire-2: #C2410C; --hl-fire-3: #B45309; }
}
.hlive[hidden] { display: none; }
.hlive.is-single { grid-template-columns: minmax(0, 1fr); }
.hlive-tile {
  --hl-acc: var(--hl-wars); --hl-ink: var(--hl-wars-ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mark main stat go";
  align-items: center; gap: 6px 16px; min-height: 84px; box-sizing: border-box; padding: 14px 14px 14px 16px;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--hl-acc) 30%, var(--rule));
  background:
    radial-gradient(70% 150% at 100% 0%, color-mix(in srgb, var(--hl-acc) 17%, transparent) 0%, transparent 70%),
    var(--panel);
  box-shadow: var(--shadow-1);
  color: var(--ink); text-decoration: none;
}
.hlive-tile.is-council { --hl-acc: var(--hl-council); --hl-ink: var(--medal-gold); }
.hlive-tile:hover { border-color: color-mix(in srgb, var(--hl-acc) 60%, var(--rule)); }
.hlive-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hlive-mark {
  grid-area: mark; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-lg);
  color: var(--hl-ink); background: color-mix(in srgb, var(--hl-acc) 13%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl-acc) 32%, transparent);
}
.hlive-svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hlive-tile.is-council .hlive-mark { background: none; box-shadow: none; }
.hlive-logo { display: block; width: 48px; height: 48px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.3)); }
.hlive-main { grid-area: main; display: grid; justify-items: start; gap: 6px; min-width: 0; }
.hlive-tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 20px; padding: 2px 9px 1px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hl-acc) 42%, transparent);
  background: color-mix(in srgb, var(--hl-acc) 14%, transparent);
  font: 700 var(--fs-1)/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--hl-ink);
}
.hlive-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.hlive-title {
  font: 700 var(--fs-4)/1.05 var(--cond); font-size: clamp(19px, 1.7vw, 24px); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
}
.hlive-stat { grid-area: stat; display: grid; justify-items: end; gap: 4px; text-align: right; }
.hlive-k { font: 700 var(--fs-1)/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.hlive-v { font: 600 var(--fs-4)/1.1 var(--mono); font-size: clamp(16px, 1.45vw, 20px); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.hlive-go {
  grid-area: go; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: var(--mute); background: var(--lift);
}
.hlive-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; rotate: -90deg; }
.hlive-tile:hover .hlive-go { color: var(--ink); background: color-mix(in srgb, var(--hl-acc) 20%, transparent); }
.hlive-tile.is-fire { border-color: #FF7A18; box-shadow: var(--shadow-1), 0 0 22px rgba(255,90,20,.28); }
.hlive-tile.is-fire::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 120% at 100% 100%, rgba(255,122,24,.2), transparent 70%);
}
.hlive-tile.is-fire .hlive-v {
  color: var(--hl-fire-2); background: linear-gradient(0deg, var(--hl-fire-1) 0%, var(--hl-fire-2) 50%, var(--hl-fire-3) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 1099px) {
  .hlive-tile {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark main go" "mark stat go";
    gap: 6px 14px; padding: 13px 12px 13px 14px; min-height: 0;
  }
  .hlive-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left; }
  .hlive-v { font-size: clamp(14px, 1.5vw, 15px); }
}
@media (max-width: 640px) {
  .hlive { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 14px; }
  .hlive-mark, .hlive-logo { width: 44px; height: 44px; }
  .hlive-svg { width: 22px; height: 22px; }
  .hlive-v { font-size: var(--fs-3); }
}
@media (prefers-reduced-motion: no-preference) {
  .hlive-tile { animation: home-float-in 420ms var(--ease) backwards;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
  .hlive-tile:nth-child(2) { animation-delay: 60ms; }
  .hlive-tile:hover { transform: translateY(-1px); }
  .hlive-go { transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }
  .hlive-tile:hover .hlive-go { transform: translateX(2px); }
  .hlive-tag.is-live .hlive-dot { animation: war-phase-pulse 1.6s ease-in-out infinite; }
  .hlive-tile.is-fire::after { animation: wsb-ember 1.4s ease-in-out infinite alternate; }
}

.yweek {
  --yw-ladder: var(--acc-violet); --yw-war: var(--bad); --yw-council: var(--medal-gold);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding: 14px var(--gutter) 2px;
}
.yweek[hidden] { display: none; }
.yweek.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yweek.is-one { grid-template-columns: minmax(0, 1fr); }
.yweek-tile {
  --yw-acc: var(--yw-war);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head go" "v go" "sub go";
  align-content: center; gap: 5px 10px; min-width: 0; min-height: 88px; box-sizing: border-box; padding: 11px 12px 12px 14px;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--yw-acc) 26%, var(--rule));
  background:
    radial-gradient(80% 160% at 100% 0%, color-mix(in srgb, var(--yw-acc) 13%, transparent) 0%, transparent 70%),
    var(--panel);
  box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none;
}
.yweek-tile.is-ladder { --yw-acc: var(--yw-ladder); }
.yweek-tile.is-council { --yw-acc: var(--yw-council); }
.yweek-tile:hover { border-color: color-mix(in srgb, var(--yw-acc) 55%, var(--rule)); }
.yweek-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.yweek-head { grid-area: head; display: flex; align-items: center; gap: 7px; min-width: 0; }
.yweek-icon {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; color: color-mix(in srgb, var(--yw-acc) 70%, var(--ink));
}
.yweek-logo { display: block; width: 20px; height: 20px; flex: none; }
.yweek-k { font: 700 var(--fs-1)/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.yweek-pill {
  --yw-pill: var(--yw-acc);
  display: inline-flex; align-items: center; gap: 5px; min-height: 18px; padding: 1px 8px 0; box-sizing: border-box;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--yw-pill) 40%, transparent);
  background: color-mix(in srgb, var(--yw-pill) 12%, transparent);
  font: 700 var(--fs-1)/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--yw-pill) 62%, var(--ink));
}
.yweek-pill.is-live, .yweek-pill.is-bad { --yw-pill: var(--bad); }
.yweek-pill.is-good { --yw-pill: var(--good); }
.yweek-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.yweek-v {
  grid-area: v; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--fs-4)/1.15 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink);
}
.yweek-score { display: flex; align-items: baseline; gap: 6px; }
.yweek-score b { font-weight: 700; }
.yweek-dash { color: var(--dim); }
.yweek-vs, .yweek-when { font: 600 var(--fs-3)/1.25 var(--body); }
.yweek-sub {
  grid-area: sub; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--fs-2)/1.3 var(--body); color: var(--mute);
}
.yweek-leagues { grid-area: v; grid-row: 2 / 4; display: grid; gap: 6px; align-content: center; min-width: 0; }
.yweek-league {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "crest name pts" "crest rank pts";
  align-items: center; column-gap: 8px; row-gap: 1px; min-width: 0;
}
.yweek-league .yweek-crest { grid-area: crest; display: block; width: 34px; height: 28px; margin: 0; object-fit: contain; }
.yweek-lname { grid-area: name; font: 700 var(--fs-1)/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.yweek-rank {
  grid-area: rank; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--fs-3)/1.2 var(--body); color: var(--ink);
}
.yweek-place { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.yweek-move { margin-left: 4px; font-size: var(--fs-1); }
.yweek-move.is-up { color: var(--good); }
.yweek-move.is-down { color: var(--bad); }
.yweek-pts { grid-area: pts; font: 500 var(--fs-2)/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--mute); white-space: nowrap; }
.yweek-go {
  grid-area: go; align-self: center; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--mute); background: var(--lift);
}
.yweek-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; rotate: -90deg; }
.yweek-tile:hover .yweek-go { color: var(--ink); background: color-mix(in srgb, var(--yw-acc) 20%, transparent); }
@media (max-width: 900px) {
  .yweek, .yweek.is-two {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none; padding-bottom: 4px;
  }
  .yweek::-webkit-scrollbar { display: none; }
  .yweek-tile { flex: 0 0 min(46%, 340px); scroll-snap-align: start; }
  .yweek.is-one .yweek-tile { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .yweek { padding-top: 12px; }
  .yweek-tile { flex-basis: 88%; min-height: 84px; padding-right: 10px; }
  .yweek-league { grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 7px; }
  .yweek-league .yweek-crest { width: 30px; height: 25px; }
}
@media (prefers-reduced-motion: no-preference) {
  .yweek-tile { animation: home-float-in 420ms var(--ease) backwards; transition: border-color 160ms ease, transform 160ms ease; }
  .yweek-tile:nth-child(2) { animation-delay: 50ms; }
  .yweek-tile:nth-child(3) { animation-delay: 100ms; }
  .yweek-tile:hover { transform: translateY(-1px); }
  .yweek-go { transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }
  .yweek-tile:hover .yweek-go { transform: translateX(2px); }
  .yweek-pill.is-live .yweek-dot { animation: war-phase-pulse 1.6s ease-in-out infinite; }
}

.rise { animation: rise 420ms cubic-bezier(.22,.9,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

#view.is-swapping { animation: swap 170ms ease-out both; }
@keyframes swap {
  from { opacity: 0.25; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art { animation: none; }
  .rise { animation: none; }
  tbody tr { transition: none; }
  .tl-item, .tl-dist-bar, .tl-pos::after { transition: none; }
  .tl-item:hover, .tl-item:focus-visible { transform: none; }
  .cell-detail, .conf-pm { transition: none; }
  #view.is-swapping { animation: none; }
}


.tl-note {
  padding: 12px var(--gutter); font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
  border-bottom: 1px solid var(--rule); line-height: 1.7; max-width: 96ch;
}

.tl-dist { padding: 16px var(--gutter) 10px; border-bottom: 1px solid var(--rule); }
.tl-dist-plot {
  position: relative; height: 84px; background: var(--row);
  border: 1px solid var(--rule); overflow: hidden;
}
.tl-zone { position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--band) 16%, transparent); }
.tl-zone[data-band="S"] { --band: var(--band-s); }
.tl-zone[data-band="A"] { --band: var(--band-a); }
.tl-zone[data-band="B"] { --band: var(--band-b); }
.tl-zone[data-band="C"] { --band: var(--band-c); }
.tl-zone[data-band="D"] { --band: var(--band-d); }
.tl-zone[data-band="F"] { --band: var(--band-f); }
.tl-zone-tag {
  position: absolute; top: 3px; left: 4px; font-family: var(--cond);
  font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--band, var(--mute)) 55%, var(--ink));
}

.tl-dist-bars {
  position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1px;
  padding: 0 1px;
}
.tl-dist-bar {
  flex: 1; background: var(--ink); opacity: 0.55; min-height: 1px;
  transition: opacity 110ms linear;
}
.tl-dist-bar:hover { opacity: 1; }
.tl-mean {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink);
  opacity: 0.8;
}
.tl-mean::after {
  content: ""; position: absolute; top: 0; left: -3px;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid var(--ink);
}
.tl-dist-axis {
  display: flex; justify-content: space-between; gap: 10px; padding-top: 5px;
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
}
.tl-axis-mid { color: var(--mute); }


.tier { display: grid; grid-template-columns: 86px 1fr; border-bottom: 1px solid var(--rule); }
.tier-label {
  display: grid; align-content: center; justify-items: center; gap: 1px;
  padding: 8px 4px; color: #0B0F10; border-right: 1px solid var(--rule);
}
.tier-label b {
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-5);
  letter-spacing: 0.04em; line-height: 1;
}
.tier-label .tier-range {
  font-family: var(--mono); font-size: var(--fs-1); font-weight: 600;
  opacity: 0.72; white-space: nowrap;
}
.tier-label .tier-count {
  font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.1em;
  opacity: 0.55;
}
.tier[data-band="S"] .tier-label { background: var(--band-s); }
.tier[data-band="A"] .tier-label { background: var(--band-a); }
.tier[data-band="B"] .tier-label { background: var(--band-b); }
.tier[data-band="C"] .tier-label { background: var(--band-c); }
.tier[data-band="D"] .tier-label { background: var(--band-d); }
.tier[data-band="F"] .tier-label { background: var(--band-f); }
.tier[data-band] .tier-label { background: var(--panel); }
.tier-label { color: var(--band-color); }
.tier[data-band="S"] { --band-color: var(--band-s); }
.tier[data-band="A"] { --band-color: var(--band-a); }
.tier[data-band="B"] { --band-color: var(--band-b); }
.tier[data-band="C"] { --band-color: var(--band-c); }
.tier[data-band="D"] { --band-color: var(--band-d); }
.tier[data-band="F"] { --band-color: var(--band-f); }
.tl-guide { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px var(--gutter);
  border-bottom: 1px solid var(--rule); color: var(--mute); font: var(--fs-1)/1.5 var(--body); }
.tl-guide b { color: var(--ink); font-weight: 600; }
.tl-note.tl-meta-line { color: var(--mute); font-family: var(--body); font-size: var(--fs-2); }
.tl-filter { display: flex; align-items: center; padding: 8px var(--gutter);
  border-bottom: 1px solid var(--rule); }
.tl-filter .isel { flex-direction: row; align-items: center; gap: 10px; }
.tl-filter .isel-button { width: auto; min-width: 168px; }
.tl-filter .isel-list { top: calc(100% + 5px); }
@media (pointer: coarse) {
  .tl-filter .isel-button { min-height: 44px; }
}

.tier-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; align-items: flex-start; }

.tl-item {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 7px 5px; background: var(--panel);
  border: 1px solid var(--rule); cursor: default;
  transition: border-color 110ms, background 110ms, transform 110ms;
}
.tl-item.is-link { cursor: pointer; }
.tl-item:hover, .tl-item:focus-visible {
  border-color: var(--gold); background: var(--row); transform: translateY(-1px);
  outline: none;
}
.tl-item img { width: 30px; height: 30px; object-fit: contain; display: block; }
.tl-text { display: grid; gap: 1px; min-width: 0; }
.tl-item { max-width: 100%; }
.tl-item .nm { font-size: var(--fs-2); font-weight: 500; white-space: normal; line-height: 1.2; }
.tl-figs {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.tl-figs b { font-size: var(--fs-1); font-weight: 600; color: var(--mute); }
.tl-figs i { font-size: var(--fs-1); font-style: normal; color: var(--dim); }
.tl-item .chips { margin-left: 1px; }
.tl-item:not(:hover):not(:focus-visible) .chips {
  --chip-ink: var(--mute); --chip-ink-2: var(--dim); --tl-ring: 62%;
  --chip-fill: 18%; --chip-edge: 38%; --chip-fill-2: 7%; --chip-edge-2: 22%;
}
:root[data-theme="light"] .tl-item:not(:hover):not(:focus-visible) .chips {
  --tl-ring: 54%; --chip-fill: 10%; --chip-edge: 29%; --chip-fill-2: 3%; --chip-edge-2: 20%;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tl-item:not(:hover):not(:focus-visible) .chips {
    --tl-ring: 54%; --chip-fill: 10%; --chip-edge: 29%; --chip-fill-2: 3%; --chip-edge-2: 20%;
  }
}
.tl-item:not(:hover):not(:focus-visible) .chips .chip.is-primary {
  border-color: color-mix(in srgb, var(--c, #555) var(--tl-ring), var(--chip-base));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #555) var(--tl-ring), var(--chip-base));
}
.tl-item:not(:hover):not(:focus-visible) .chips img { opacity: .68; }
.tl-item .nm { font-weight: 600; }

.tl-pos {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rule);
}
.tl-pos::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--p, 0%); background: var(--gold); opacity: 0.55;
}
.tl-item:hover .tl-pos::after, .tl-item:focus-visible .tl-pos::after { opacity: 1; }


.tl-card {
  position: absolute; z-index: 80; width: 260px; padding: 10px 12px 11px;
  background: var(--panel); border: 1px solid var(--gold);
  box-shadow: var(--shadow-2); pointer-events: none;
}
.tl-card-head { display: flex; align-items: baseline; gap: 8px; }
.tl-card-band {
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-2);
  letter-spacing: 0.1em; color: var(--gold);
}
.tl-card-name { font-size: var(--fs-3); font-weight: 500; }
.tl-card .chips { margin-top: 6px; }
.tl-card-grid { display: grid; gap: 3px; margin-top: 9px; }
.tl-card-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline;
  padding: 3px 0; border-top: 1px solid var(--rule);
}
.tl-card-row.is-rated .k { color: var(--ink); }
.tl-card-row.is-rated .k::after {
  content: " ← rated"; font-family: var(--cond); font-size: var(--fs-1);
  letter-spacing: 0.1em; color: var(--gold);
}
.tl-card-row .k {
  font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
}
.tl-card-row .v {
  font-family: var(--mono); font-size: var(--fs-2); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--mute);
}
.tl-card-row .v.hi { color: var(--good); }
.tl-card-row .v.lo { color: var(--bad); }
.tl-card-row .n { font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); }
.tl-card-foot {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; padding-top: 7px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
}

.tl-item .roll-split { flex-direction: column; gap: 2px; margin-top: 2px; }
.tl-item .roll-split .chip { font-size: var(--fs-1); padding: 1px 5px 1px 3px; }
.tl-item .roll-split .chip img { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .tier { grid-template-columns: 64px 1fr; }
  .tl-item.has-rolls > .chips { display: none; }
  .tier-label b { font-size: var(--fs-5); }
  .tier-label .tier-range { font-size: var(--fs-1); }
  .tl-item .nm { font-size: var(--fs-1); }
  .tl-dist-plot { height: 64px; }
}


.ball-hero { display: flex; gap: 20px; align-items: center; padding: 22px var(--gutter);
  border-bottom: 1px solid var(--rule); background: var(--panel); flex-wrap: wrap; }
.ball-hero > img { width: 96px; height: 96px; object-fit: contain; }
.ball-hero h1 { font-family: var(--cond); font-size: var(--fs-5); text-transform: uppercase;
  letter-spacing: 0.03em; font-weight: 700; line-height: 1; }
.ball-hero .rarity { font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute); }
.ball-stats { display: flex; gap: 26px; margin-top: 12px; flex-wrap: wrap; }
.ball-stats div b { display: block; font-family: var(--mono); font-size: var(--fs-4); }
.ball-stats div span { font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); }
.ball-stats div.is-thin b { color: var(--dim); font-size: var(--fs-2); line-height: 1.9; }
.ball-stats .cpp-toggle { display: block; margin: -4px -8px; padding: 4px 8px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s ease; }
.ball-stats .cpp-toggle .cpp-fig { display: flex; align-items: center; gap: 8px; }
.ball-stats .cpp-toggle b { display: block; font-family: var(--mono); font-size: var(--fs-4); }
.ball-stats .cpp-toggle span { font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); transition: color .15s ease; }
.cpp-chev { display: inline-block; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--dim);
  border-bottom: 2px solid var(--dim); transform: rotate(45deg); transition: transform .2s ease, border-color .15s ease; }
.ball-stats .cpp-toggle[aria-expanded="true"] .cpp-chev { margin-top: 3px; transform: rotate(-135deg); }
.ball-stats .cpp-toggle:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.ball-stats .cpp-toggle:hover span, .ball-stats .cpp-toggle[aria-expanded="true"] span { color: var(--gold); }
.ball-stats .cpp-toggle:hover .cpp-chev, .ball-stats .cpp-toggle[aria-expanded="true"] .cpp-chev { border-color: var(--gold); }
.ball-stats .cpp-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cpp[hidden] { display: none; }

.cpp { width: 100%; min-width: 0; max-width: 520px; margin-top: 12px; border-collapse: separate; border-spacing: 0;
  background: var(--row); border-radius: var(--r-lg); }
.cpp tbody td { border-bottom: 0; white-space: normal; text-align: left; background: transparent; }
.cpp tbody tr:hover td { background: transparent; }
.cpp tr:first-child th { padding-top: 8px; }
.cpp tr:last-child th, .cpp tr:last-child td { padding-bottom: 6px; }
.cpp caption { caption-side: top; text-align: left; padding: 0 0 6px 2px; font-family: var(--cond);
  font-size: var(--fs-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.cpp th { width: 64px; padding: 4px 8px 4px 12px; text-align: left; vertical-align: middle; font-family: var(--cond);
  font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute);
  transition: color .15s ease; }
.cpp tbody td { padding: 2px 8px 2px 0; }
.cpp tr + tr th, .cpp tr + tr td { border-top: 1px solid var(--hairline-2); }
.cpp-cells { display: flex; flex-wrap: wrap; gap: 2px; }
.cpp-cell { display: grid; justify-items: start; min-width: 52px; padding: 4px 8px; border-radius: var(--r-sm);
  cursor: default; outline: none; transition: background-color .15s ease, transform .15s ease; }
.cpp-cell .cpp-k { font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.06em; color: var(--dim); }
.cpp-cell b { font-family: var(--mono); font-size: var(--fs-2); font-weight: 600; color: var(--ink); }
.cpp-cell .cpp-cp { font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); transition: color .15s ease; }
.cpp tr:hover th, .cpp tr:focus-within th { color: var(--ink); }
.cpp-cell:hover, .cpp-cell:focus-visible, .cpp-cell:focus {
  background: color-mix(in srgb, var(--gold) 14%, transparent); transform: translateY(-1px); }
.cpp-cell:hover .cpp-cp, .cpp-cell:focus .cpp-cp { color: var(--gold); }
.cpp-cell:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 60%, transparent); }
@media (max-width: 420px) {
  .cpp th { width: 52px; padding-left: 8px; padding-right: 4px; }
  .cpp tbody td { padding-right: 4px; }
  .cpp-cell { min-width: 44px; padding: 4px 5px; }
}
@media (prefers-reduced-motion: reduce) { .cpp-cell, .cpp th, .cpp-cell .cpp-cp, .cpp-toggle, .cpp-toggle span, .cpp-chev { transition: none; } .cpp-cell:hover { transform: none; } }

.rolls-slot:empty { display: none; }
.rolls-slot.is-pending:empty, .dl-slot.is-pending:empty { display: block; }
.rolls-slot.is-pending { min-height: 204px; }
.dl-slot.is-pending { min-height: 225px; }
.hl-slot.is-pending { min-height: 300px; }
@media (max-width: 960px) { .hl-slot.is-pending { min-height: 420px; } }
@media (max-width: 560px) {
  .rolls-slot.is-pending { min-height: 328px; }
  .dl-slot.is-pending { min-height: 216px; }
  .hl-slot.is-pending { min-height: 500px; }
}
.rolls { padding-bottom: 8px; }
.rolls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 var(--gutter); }
@media (max-width: 560px) { .rolls-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.rolls-card {
  display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px 16px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.rolls-card:hover, a.rolls-card:focus-visible {
  box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
@media (hover: hover) { a.rolls-card:hover { transform: translateY(-2px); } }
.rolls-card.is-current { box-shadow: var(--shadow-card), inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
.rolls-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rolls-name { font-size: var(--fs-3); font-weight: 600; }
.rolls-here {
  margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--pill-on); color: var(--gold);
  font: 700 var(--fs-1)/1.5 var(--cond); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.rolls-wr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.rolls-wr b { font: 600 var(--fs-5)/1.05 var(--mono); font-size: clamp(24px, 4.5vw, 30px); font-variant-numeric: tabular-nums; }
.rolls-wr span { font: 700 var(--fs-1)/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.rolls-wr.is-good b { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.rolls-wr.is-bad b { color: color-mix(in srgb, var(--bad) 80%, var(--ink)); }
.rolls-wr.is-thin b { font: 500 var(--fs-3)/1.5 var(--body); color: var(--dim); }
.rolls-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rolls-pill {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: var(--row); font-size: var(--fs-2); color: var(--mute);
}
.rolls-pill b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.rolls-odds { margin: 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: var(--fs-2); color: var(--mute); }
.rolls-thin { margin: 10px var(--gutter) 0; font-size: var(--fs-2); color: var(--dim); }
@media (prefers-reduced-motion: reduce) {
  .rolls-card { transition: none; }
  a.rolls-card:hover { transform: none; }
}

.ball-hero.has-cs { row-gap: 18px; }
.ball-hero.has-cs > .cs { flex: 1 1 100%; }
@media (min-width: 1180px) {
  .ball-hero.has-cs { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 520px); }
}
.cs { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center;
  gap: 16px; min-width: 0; max-width: 560px; padding: 12px 12px 12px 8px; border-radius: var(--r-lg); background: var(--row); }
.cs-shape { display: block; width: 148px; height: 148px; overflow: visible; }
.cs-ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.cs-ring.is-edge { stroke: color-mix(in srgb, var(--mute) 40%, var(--rule)); }
.cs-spoke { stroke: var(--rule); stroke-width: 1; }
.cs-area { fill: color-mix(in srgb, var(--gold) 20%, transparent); stroke: var(--gold); stroke-width: 1.5;
  stroke-linejoin: round; }
.cs-dot { fill: var(--gold); transform-box: fill-box; transform-origin: center; }
.cs-dot.is-on { fill: var(--ink); transform: scale(1.6); }
.cs-lab { fill: var(--mute); font: 600 var(--fs-1) var(--cond); letter-spacing: .1em; }
.cs-lab.is-on { fill: var(--ink); }
.cs-list { display: grid; gap: 1px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.cs-item { min-width: 0; }
.cs-row { display: grid; grid-template-columns: 84px 34px minmax(36px, 1fr) 62px; align-items: center; column-gap: 12px;
  width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: var(--r); background: transparent;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cs-row:hover, .cs-row.is-open { background: var(--lift); }
.cs-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cs-name { overflow: hidden; color: var(--mute); font: 600 var(--fs-1)/1 var(--cond); letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; }
.cs-row.is-open .cs-name, .cs-row:hover .cs-name { color: var(--ink); }
.cs-val { font: 600 var(--fs-4)/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.cs-bar { position: relative; height: 4px; overflow: hidden; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cs-fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v, 0) * 100%); border-radius: inherit;
  background: var(--gold); }
.cs-rank { color: var(--mute); font: 500 var(--fs-1)/1 var(--body); text-align: right; white-space: nowrap; }
.cs-rank.is-top { color: var(--ink); font-weight: 600; }
.cs-tip { position: absolute; z-index: 40; display: grid; gap: 5px; width: max-content;
  max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px 11px; border: 1px solid var(--rule);
  border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-2); color: var(--ink);
  pointer-events: none; }
.cs-tip[hidden] { display: none; }
.cs-tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.cs-tip-k { color: var(--gold); font: 700 var(--fs-1)/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; }
.cs-tip-avg { color: var(--mute); font: 500 var(--fs-1)/1 var(--body); white-space: nowrap; }
.cs-tip-fig { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.cs-tip-fig b { font: 600 var(--fs-5)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cs-tip-fig span { color: var(--mute); font: 500 var(--fs-2)/1.2 var(--body); }
.cs-tip-line { color: var(--mute); font: 400 var(--fs-2)/1.4 var(--body); }
@media (max-width: 560px) {
  .cs { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; padding: 8px 6px 8px 4px; }
  .cs-shape { width: 104px; height: 104px; }
  .cs-lab { display: none; }
  .cs-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar rank";
    row-gap: 6px; column-gap: 10px; padding: 5px 8px; }
  .cs-name { grid-area: name; }
  .cs-val { grid-area: val; font-size: var(--fs-3); }
  .cs-bar { grid-area: bar; }
  .cs-rank { grid-area: rank; min-width: 60px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cs-fill { transition: width 700ms var(--ease) calc(120ms + var(--i, 0) * 60ms); }
  .cs:not(.is-in) .cs-fill { width: 0; }
  .cs-fig { transform-box: view-box; transform-origin: 80px 80px;
    transition: transform 650ms var(--ease) 60ms, opacity 260ms ease 60ms; }
  .cs:not(.is-in) .cs-fig { opacity: 0; transform: scale(.15); }
  .cs-dot { transition: transform 160ms var(--ease), fill 160ms ease; }
  .cs-row { transition: background-color 120ms ease; }
  .cs-tip:not([hidden]) { animation: cs-tip-in 140ms ease-out both; }
  @keyframes cs-tip-in { from { opacity: 0; transform: translateY(-3px); } }
}

.orbs { display: inline-flex; gap: 2px; }
.orb { width: 19px; height: 16px; display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--fs-1); border: 1px solid var(--rule); color: var(--dim); }
.orb.on { color: var(--bg); background: var(--gold); border-color: var(--gold); }

tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover td:first-child { color: var(--gold); }
.backlink { color: var(--gold); font-family: var(--mono); font-size: var(--fs-2); }

.move { font-size: var(--fs-1); }
.move.up { color: var(--good); }
.move.down { color: var(--bad); }


.hero-badges { padding: 0; margin-top: 13px; gap: 9px; }
.hero-badges .badge { width: 180px; min-width: 0; box-sizing: border-box; }
.hero-badges .badge-text { width: 100%; overflow: hidden; }
.hero-badges .badge.is-peak { border-color: var(--good); }
.hero-badges .badge.is-peak .badge-kind { color: var(--good); }
.hero-badges .badge.is-peak:hover,
.hero-badges .badge.is-peak:focus-visible { border-color: var(--good); }


.alliance { display: inline-flex; align-items: center; gap: 9px; }
.crest { display: block; flex-shrink: 0; }
.alliance-name {
  font-family: var(--cond); font-size: var(--fs-2); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
}
.alliance.is-approximate .alliance-name {
  border-bottom: 1px dotted var(--dim); cursor: help;
}

.ball-stats.strip-pad {
  padding: 14px var(--gutter); border-bottom: 1px solid var(--rule); margin-top: 0;
}

.note .dim { color: var(--mute); }
.note.mb-best .cellflex { flex-wrap: wrap; gap: 6px 10px; }
.note.mb-best a.plain { color: var(--ink); }
p.note.dim { color: var(--mute); }
td.dim { color: var(--mute); }

a.plain { color: inherit; text-decoration: none; }
a.plain:hover { color: var(--gold); }

td .sub {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); margin-left: 6px;
}

.res {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  font-family: var(--mono); font-size: var(--fs-1); border: 1px solid var(--rule);
  color: var(--dim); margin-right: 7px;
}
.res.w { color: var(--good); border-color: var(--good); }
.res.l { color: var(--bad); border-color: var(--bad); }
.side { font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.1em; color: var(--mute); }

.lineup { display: flex; gap: 2px; }
.lineup-ball {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--rule);
}
.lineup-ball img { width: 22px; height: 22px; object-fit: contain; }

@media (max-width: 700px) {
  .lineup-ball { width: 22px; height: 22px; }
  .lineup-ball img { width: 18px; height: 18px; }
}


.player-hero { position: relative; overflow: hidden; }
.player-banner {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.player-banner img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
  opacity: 0.22; filter: saturate(0.85);
}
.player-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 72%, transparent) 45%, color-mix(in srgb, var(--panel) 35%, transparent) 100%);
}
.player-hero > *:not(.player-banner) { position: relative; z-index: 1; }
.player-hero > img {
  border: 1px solid var(--rule); background: #0A0E0F;
}

.owner-badge {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-1); font-weight: 600;
  padding: 2px 6px; border: 1px solid var(--rule); color: var(--mute);
}
.owner-badge.silver { color: var(--ink); border-color: var(--mute); }
.owner-badge.gold {
  color: var(--bg); background: var(--gold); border-color: var(--gold); font-weight: 700;
}

@media (max-width: 900px) {
  .omni { margin-left: 0; width: 100%; padding: 0 0 6px; }
  .omni input { width: 100%; }
  .omni-results { left: 0; right: 0; min-width: 0; }
  .top { flex-wrap: wrap; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .top .omni { flex: 1 1 calc(100% - 48px); width: auto; }
  .top .omni input { width: 100%; flex: 1 1 auto; box-sizing: border-box; }
  .top .acct { border-top: 1px solid var(--rule); align-self: stretch; }
}
@media (max-height: 500px) and (pointer: coarse) and (min-width: 641px) {
  .top { flex-wrap: nowrap; }
  .top .brand { font-size: var(--fs-3); padding: 8px 12px; }
  .top .nav { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; }
  .top .nav a { flex: 0 0 auto; padding: 8px 10px; }
  .top .omni { flex: 0 1 190px; width: auto; min-width: 120px; }
  .top .omni input { width: 100%; flex: 1 1 auto; box-sizing: border-box; padding: 9px 12px; }
  .top .acct { border-top: 0; }
}


.depth-warn {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  padding: 9px var(--gutter); border-bottom: 1px solid var(--rule);
  background: #1A1408;
  font-family: var(--mono); font-size: var(--fs-1); line-height: 1.6; color: #9AA4B4;
}
.depth-warn b {
  font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.12em;
  text-transform: uppercase; color: #C8933C; font-weight: 700;
}
.depth-warn.is-thin { background: #1C0F0D; }
.depth-warn.is-thin b { color: var(--bad); }

.before-duels {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
  font: 700 var(--fs-1)/1.6 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: #C8933C; background: color-mix(in srgb, #C8933C 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #C8933C 40%, transparent); white-space: nowrap;
}
.isel-name .before-duels { margin-left: 6px; vertical-align: 1px; }

.dl { --dl-ease: cubic-bezier(.2, .8, .2, 1); display: grid; gap: 14px; margin: 0 var(--gutter) 18px; }
.dl-slot:empty { display: none; }

.dl-fig { display: grid; gap: 2px; align-content: start; }
.dl-fig-v { font: 600 var(--fs-4)/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.dl-fig.is-big .dl-fig-v { font-size: clamp(22px, 4.5vw, 30px); }
.dl-fig-k { font-size: var(--fs-1); color: var(--mute); }
.dl-fig.is-thin .dl-fig-v { font: 500 var(--fs-2)/1.3 var(--body); opacity: .6; }
.dl-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dl-thin { margin: 0; color: var(--dim); font-size: var(--fs-2); }
.dl-pad { padding-inline: 14px; }
.dl-more { margin: -6px 0 0; }
.dl-more a { display: inline-block; padding: 8px 0; line-height: 18px; color: var(--gold); font-weight: 600; font-size: var(--fs-3); text-decoration: none; }
.dl-more a:hover { text-decoration: underline; }

.dl-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.dl-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 14px;
  border-radius: var(--r-lg); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-card);
  overflow: hidden; transition: transform .25s var(--dl-ease), box-shadow .25s var(--dl-ease); }
.dl-card.is-thin { opacity: .6; }
@media (hover: hover) {
  .dl-card:hover { transform: translateY(-3px);
    box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--a1, var(--gold)) 45%, transparent),
      0 12px 30px -10px color-mix(in srgb, var(--a1, var(--gold)) 60%, transparent); }
}

.dl-hp { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: baseline; }
.dl-hp .dl-bar { grid-column: 1 / -1; height: 12px; }
.dl-hp-k { font-size: var(--fs-1); color: var(--mute); }
.dl-hp-v { font: 700 var(--fs-4)/1 var(--mono); font-variant-numeric: tabular-nums; }
.dl-bar { position: relative; display: block; height: 6px; border-radius: 999px; overflow: hidden; background: var(--row); }
.dl-bar-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--v, 0));
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--gold)) 65%, transparent), var(--tone, var(--gold))); }
.dl-bar.is-hp .dl-bar-fill { background: linear-gradient(90deg, #C4452D, #dcb908 45%, #3E9E6E); }
.dl-bar.is-hp::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), var(--panel) calc(20% - 2px) 20%); opacity: .55; }
.dl-bar.is-thin .dl-bar-fill { opacity: 0; }
.dl-bar.is-mini { height: 4px; margin-top: 3px; }
.dl-ball-duel { background:
  radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%), var(--panel); }

.dl-arena { padding: 0; gap: 0; }
.dl-arenas .dl-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.dl-arena .ag-art { aspect-ratio: 12 / 5; }
.dl-arena .ag-stage { max-height: 52%; }
.dl-arena-head { padding: 12px 14px 0; }
.dl-arena-name { margin: 0; font: 700 var(--fs-4)/1.2 var(--cond); }
.dl-arena-boost { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; color: var(--mute); font-size: var(--fs-2); }
.dl-card .dl-figs.is-strip { margin: 12px 14px; padding: 8px 12px; gap: 8px; border-radius: var(--r); background: var(--row); }
.dl-figs.is-strip .dl-fig-v { font-size: var(--fs-3); }
.dl-figs.is-strip .dl-fig.is-thin .dl-fig-v { font-size: var(--fs-1); }
.dl-mini-h { margin: 2px 0 6px; font: 600 var(--fs-1)/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dl-best-wrap { display: grid; grid-template-columns: max-content minmax(24px, 1fr) max-content max-content;
  column-gap: 10px; padding-bottom: 14px; }
.dl-best-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; margin-bottom: 2px; }
.dl-best-k { font-size: var(--fs-1); line-height: 1.15; color: var(--mute); text-align: right; }
.dl-best-k.is-win { grid-column: 3; }
.dl-best-k.is-diff { grid-column: 4; max-width: 5.5em; justify-self: end; }
.dl-best { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 4px;
  list-style: none; margin: 0; padding: 0; }
.dl-best-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.dl-best-row[hidden] { display: none; }
.dl-best-name { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.dl-best-v { font: 600 var(--fs-2)/1 var(--mono); text-align: right; }
.dl-diff { justify-self: end; padding: 3px 7px; border-radius: 999px; background: var(--row);
  font: 600 var(--fs-1)/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--mute); white-space: nowrap; }
.dl-diff:empty { display: none; }
.dl-diff.is-up { color: color-mix(in srgb, var(--good) 70%, var(--ink)); background: color-mix(in srgb, var(--good) 16%, transparent); }
.dl-diff.is-down { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.dl-best-more { grid-column: 1 / -1; justify-self: start; min-height: 32px; margin-top: 6px; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--pill-on); color: var(--ink);
  font: 600 var(--fs-2)/1 var(--body); cursor: pointer; }
.dl-best-more:hover, .dl-best-more:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }
@supports not (grid-template-columns: subgrid) {
  .dl-best-wrap, .dl-best { display: block; }
  .dl-best-head, .dl-best-row { display: grid; grid-template-columns: max-content minmax(24px, 1fr) 3.2em 4.6em; column-gap: 10px; }
  .dl-best-head { margin-bottom: 2px; }
}
@media (max-width: 359px) {
  .dl-best-wrap { grid-template-columns: minmax(0, 1fr) max-content max-content; }
  .dl-best-k.is-win { grid-column: 2; }
  .dl-best-k.is-diff { grid-column: 3; }
  .dl-best-row { row-gap: 2px; padding-bottom: 6px; }
  .dl-best-row > .dl-bar { grid-column: 1 / -1; grid-row: 2; }
  .dl-best-head, .dl-best-row { grid-template-columns: minmax(0, 1fr) 3.2em 4.6em; }
  @supports (grid-template-columns: subgrid) {
    .dl-best-head, .dl-best-row { grid-template-columns: subgrid; }
  }
}

.dl-h { margin: 6px 0 8px; font: 700 var(--fs-4)/1.2 var(--cond); }
.dl-ends-top { display: grid; grid-template-columns: minmax(170px, 220px) 1fr; gap: 24px; align-items: center;
  padding: 18px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); }
.dl-donut { position: relative; aspect-ratio: 1; }
.dl-donut svg { width: 100%; height: 100%; display: block; }
.dl-donut-track { fill: none; stroke: var(--row); stroke-width: 16; }
.dl-donut-arc { fill: none; stroke-width: 16; }
.dl-donut-arc.is-ko { stroke: var(--bad); }
.dl-donut-arc.is-cap { stroke: var(--gold); }
.dl-donut-arc.is-ff { stroke: var(--acc-violet); }
.dl-donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dl-donut-v { font: 700 var(--fs-5)/1 var(--mono); }
.dl-donut-k { font-size: var(--fs-1); color: var(--mute); }
.dl-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dl-legend-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 2px 10px; align-items: center; }
.dl-swatch { width: 12px; height: 12px; border-radius: var(--r-sm); background: var(--sw); }
.dl-legend-row.is-ko { --sw: var(--bad); }
.dl-legend-row.is-cap { --sw: var(--gold); }
.dl-legend-row.is-ff { --sw: var(--acc-violet); }
.dl-legend-k { font-weight: 600; }
.dl-legend-v { font: 600 var(--fs-3)/1 var(--mono); }
.dl-legend-d { grid-column: 2 / -1; font-size: var(--fs-1); color: var(--mute); }
.dl-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 190px;
  padding: 16px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); }
.dl-col { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; text-align: center; }
.dl-col-track { position: relative; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--row); overflow: hidden; }
.dl-col-fill { position: absolute; inset: 0; transform-origin: bottom; transform: scaleY(var(--v, 0));
  background: linear-gradient(to top, color-mix(in srgb, var(--gold) 50%, transparent), var(--gold)); }
.dl-col-v { font: 600 var(--fs-1)/1 var(--mono); }
.dl-col-k { font-size: var(--fs-1); color: var(--mute); }
.dl-axis { margin: 6px 0 0; text-align: center; font-size: var(--fs-1); color: var(--dim); }
.dl-sides { display: grid; gap: 10px; }
.dl-versus { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 20px; border-radius: var(--r-lg); overflow: hidden; color: #F4F6FA;
  background: linear-gradient(100deg, color-mix(in srgb, var(--t-fire) 75%, #090B12), #0d1018 50%, color-mix(in srgb, var(--t-water) 80%, #090B12)); }
.dl-vs-side { display: grid; gap: 4px; }
.dl-vs-side.is-def { text-align: right; }
.dl-vs-k { font: 600 var(--fs-1)/1 var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.dl-vs-v { font: 700 var(--fs-5)/1 var(--mono); }
.dl-vs-mark { font: 800 var(--fs-4)/1 var(--cond); padding: 10px; border-radius: 50%; background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.dl-split { display: grid; gap: 6px; padding: 10px 14px; border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-card); }
.dl-split.is-thin { opacity: .55; }
.dl-split.is-thin .dl-split-l, .dl-split.is-thin .dl-split-r { opacity: 0; }
.dl-split-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; }
.dl-split-k { text-align: center; color: var(--mute); font-size: var(--fs-2); }
.dl-split-a, .dl-split-d { font: 600 var(--fs-3)/1 var(--mono); }
.dl-split-track { position: relative; height: 10px; border-radius: 999px; overflow: hidden; background: var(--row); }
.dl-split-l, .dl-split-r { position: absolute; top: 0; bottom: 0; width: 100%; }
.dl-split-l { left: 0; transform-origin: left; transform: scaleX(var(--v, .5)); background: var(--t-fire); }
.dl-split-r { right: 0; transform-origin: right; transform: scaleX(var(--v, .5)); background: var(--t-water); }

.dl-surv { min-width: 64px; }
.dl-surv-v { font-family: var(--mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .dl.is-motion .dl-card, .dl.is-motion .dl-fig, .dl.is-motion .dl-split,
  .dl.is-motion .dl-legend-row, .dl.is-motion .dl-col, .dl.is-motion .dl-best-row {
    animation: dl-rise .55s var(--dl-ease) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
  .dl.is-motion .dl-bar-fill { animation: dl-fill-x .9s var(--dl-ease) both; animation-delay: calc(var(--i, 0) * 45ms + 180ms); }
  .dl.is-motion .dl-col-fill { animation: dl-fill-y .9s var(--dl-ease) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
  .dl.is-motion .dl-split-l, .dl.is-motion .dl-split-r { animation: dl-fill-x 1s var(--dl-ease) both; animation-delay: .2s; }
  .dl.is-motion .dl-donut-arc { animation: dl-sweep 1.1s var(--dl-ease) both; animation-delay: calc(var(--i, 0) * 180ms + 150ms); }
  .dl.is-motion .dl-vs-mark { animation: dl-pulse 2.4s ease-in-out infinite alternate; }
}
@keyframes dl-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dl-fill-x { from { transform: scaleX(0); } }
@keyframes dl-fill-y { from { transform: scaleY(0); } }
@keyframes dl-sweep { from { stroke-dasharray: 0 999; } }
@keyframes dl-pulse { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .dl *, .dl *::before, .dl *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .dl-ends-top { grid-template-columns: 1fr; justify-items: center; }
  .dl-donut { width: 190px; }
  .dl-legend { width: 100%; }
  .dl-cols { height: 160px; gap: 4px; padding: 12px 8px; }
  .dl-grid { grid-template-columns: 1fr; }
  .dl.is-motion .dl-vs-mark { animation: none; }
}

.sq-block { margin: 0; gap: 0; grid-template-columns: minmax(0, 1fr); }
.sq-block > * { min-width: 0; }
.sq .chips { flex-wrap: wrap; }
.sq-edge-v { white-space: nowrap; }
.sq-top { display: grid; gap: 10px; padding: 16px var(--gutter) 6px; }
.sq-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sq-title h2 { margin: 0; font: 700 var(--fs-5)/1.1 var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.sq-title small { color: var(--mute); font: var(--fs-2) var(--body); }
.sq-scope { display: grid; gap: 8px; }
.sq-section { display: grid; gap: 10px; padding: 12px var(--gutter); }
.sq-h-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sq-h { margin: 0; font: 700 var(--fs-2) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.sq-h-row .btn { margin-left: auto; }
.sq-h-row .btn + .btn { margin-left: 0; }
.sq-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .sq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sq-ball { display: grid; gap: 9px; align-content: start; padding: 14px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.sq-ball.is-thin { opacity: .62; }
.sq-ball-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sq-ball-head .thumb { width: 44px; height: 44px; }
.sq-ball-name { display: grid; gap: 2px; min-width: 0; }
.sq-ball-name b { font: 600 var(--fs-3)/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-ball-name small { color: var(--dim); font: var(--fs-1) var(--mono); }
.sq-figs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.sq-hp .dl-hp-v { font-size: var(--fs-3); }
.sq-line { margin: 0; font: var(--fs-2)/1.5 var(--body); color: var(--ink); }
.sq-line b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sq-line.is-up b, .sq-edge.is-up b { color: var(--good); }
.sq-edge.is-down b { color: var(--bad); }
.sq-item b { font-family: var(--body); }
.sq-dim { color: var(--dim); }
.sq-note { margin: 0; color: var(--dim); font: var(--fs-1)/1.5 var(--body); }
.info.sq-rule { width: auto; height: auto; padding: 1px 6px; border-radius: 999px; font-size: var(--fs-1);
  font-style: normal; letter-spacing: .04em; vertical-align: 1px; }
.sq-bench { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 9px 11px; border-radius: var(--r); border: 1px dashed color-mix(in srgb, var(--good) 55%, var(--rule)); }
.sq-bench p { margin: 0; font: var(--fs-2)/1.4 var(--body); }
.sq-picker { display: grid; gap: 6px; }
.sq-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sq-mini { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; min-width: 0; background: var(--panel);
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; font: var(--fs-1) var(--body); }
.sq-mini .thumb { width: 36px; height: 36px; }
.sq-mini span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.sq-foot { border-top: 1px solid var(--rule); margin-top: 6px; }
.sq-headline { margin: 0; font: 700 var(--fs-4)/1.3 var(--cond); }
@media (prefers-reduced-motion: no-preference) {
  .dl.is-motion .sq-ball { animation: dl-rise .55s var(--dl-ease) both; animation-delay: calc(var(--i, 0) * 60ms + 60ms); }
  .dl.is-motion .sq-ball.is-still, .dl.is-motion .sq-ball.is-still * { animation: none; }
}

.unknown-player { color: var(--dim); font-style: italic; cursor: help; }


.tl-dist-wrap { border-bottom: 1px solid var(--rule); }
.tl-dist-summary {
  font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); cursor: pointer;
  padding: 10px var(--gutter); list-style: none; user-select: none;
}
.tl-dist-summary::-webkit-details-marker { display: none; }
.tl-dist-summary::before { content: "+ "; color: var(--gold); }
.tl-dist-wrap[open] .tl-dist-summary::before { content: "− "; }
.tl-dist-summary:hover { color: var(--mute); }
.tl-dist { padding: 2px var(--gutter) 14px; border-bottom: 0; }
.tl-dist-how {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
  line-height: 1.7; max-width: 82ch; margin-bottom: 12px;
}


.tl-drawer {
  grid-column: 1 / -1; border-top: 1px solid var(--rule);
  background: var(--bg);
}
.tl-drawer-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--rule);
}
.tl-drawer-head b {
  font-family: var(--cond); font-size: var(--fs-3); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold);
}
.tl-drawer-head span {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); flex: 1;
}
.tl-drawer-close {
  font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.1em;
  text-transform: uppercase; background: none; color: var(--mute);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 4px 10px; cursor: pointer;
}
.tl-drawer-close:hover { color: var(--ink); border-color: var(--mute); }
.tl-drawer-load {
  padding: 16px 14px; font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
}
.tl-drawer-table { min-width: 560px; }
.tl-drawer .wrap { padding-bottom: 2px; }

.tl-item.is-open {
  border-color: var(--gold); background: var(--row);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.leagues button.is-scope { border-right: 1px solid var(--rule); }
.leagues button.is-scope[aria-pressed="true"] { border-right-color: var(--gold); }


.pgrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}
@media (max-width: 720px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.pane {
  background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  min-width: 0; padding-bottom: 10px;
}
.pane.is-wide { grid-column: 1 / -1; }

.pane-head {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 12px 16px 9px;
}
.pane-head h3 {
  font-family: var(--cond); font-size: var(--fs-2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.pane-head span {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
}
.pane-head .chip { color: var(--chip-ink); }
.pane-sub {
  font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  padding: 8px 16px 4px;
}
.pane-body > .pane-sub:first-child { padding-top: 0; }

.pane .ball-stats.strip-pad { border-bottom: 0; padding: 4px 16px 8px; gap: 20px; }


.mini { display: grid; }
.mini-row {
  display: grid; grid-template-columns: 16px 1fr auto;
  align-items: baseline; gap: 10px;
  padding: 5px 16px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--hairline);
  color: var(--ink); font-family: var(--body); font-size: var(--fs-2);
}
.mini-row:first-child { border-top: 0; }
button.mini-row { cursor: pointer; }
.mini-row:hover { background: var(--panel); }
.mini-pos { font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); }
.mini-who { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; }
.mini-who b {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-who i {
  font-style: normal; font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
  white-space: nowrap;
}
.mini-wr {
  font-family: var(--mono); font-size: var(--fs-2); font-weight: 600; color: var(--mute);
  font-variant-numeric: tabular-nums; min-width: 48px; text-align: right;
}
.mini-wr.hi { color: var(--good); }
.mini-wr.lo { color: var(--bad); }
.mini-wr.is-thin { color: var(--dim); }


.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 10px 22px; padding: 4px 16px 6px;
}
.facts dt {
  font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--dim);
}
.facts dd {
  font-family: var(--mono); font-size: var(--fs-3); color: var(--ink);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}


.note-sample { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.usage-billed { margin-top: 14px; display: grid; gap: 6px; }
.note-sample .backlink { flex-shrink: 0; }
.note-sample .note-body { color: var(--mute); }

.pane table { min-width: 0; }
.pane .wrap { overflow-x: auto; overscroll-behavior-x: contain; }


.ladders { display: flex; align-items: center; gap: 2px; }
.ladders button {
  font-family: var(--body); font-weight: 600; font-size: var(--fs-2);
  letter-spacing: 0; text-transform: none;
  background: none; border: 0; color: var(--mute);
  padding: 6px 13px; cursor: pointer;
}
.ladders button:hover { color: var(--ink); }
.ladders button[aria-pressed="true"] { color: var(--bg); background: var(--gold); }


.badges {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 10px;
}
.badge {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px 7px 8px; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r);
  text-align: left; font-family: var(--body); color: var(--ink);
  transition: border-color 110ms, background 110ms;
}
button.badge { cursor: pointer; }
button.badge:hover { border-color: var(--gold); background: var(--row); }
.badge .thumb { width: 30px; height: 30px; }
.badge-text { display: grid; gap: 1px; min-width: 0; }
.badge-kind {
  font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.badge b {
  font-size: var(--fs-2); font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge-note {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); line-height: 1.3;
}


.badge.is-div {
  align-items: center; gap: 11px; padding: 8px 14px 8px 9px;
  cursor: default; text-align: left;
}
.badge.is-div b {
  font-family: var(--cond); font-size: var(--fs-4); letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.1;
}

.div-crest {
  width: 46px; height: 38px; object-fit: contain; display: block;
  flex-shrink: 0;
}
.div-crest.is-blank { opacity: 0; }

.div-swap { display: grid; min-width: 0; }
.div-swap > * {
  grid-area: 1 / 1;
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
  line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: opacity 110ms linear;
}
.div-detail { opacity: 0; }
.badge.is-div:hover .div-rest,
.badge.is-div:focus-visible .div-rest,
.badge.is-div[aria-expanded="true"] .div-rest { opacity: 0; }
.badge.is-div:hover .div-detail,
.badge.is-div:focus-visible .div-detail,
.badge.is-div[aria-expanded="true"] .div-detail { opacity: 1; color: var(--mute); }

.badge.is-peak .div-detail { text-overflow: clip; }
.badge.is-peak .div-detail-text { display: inline-block; white-space: nowrap; }
.badge.is-peak:hover .div-detail.is-overflowing .div-detail-text,
.badge.is-peak:focus-visible .div-detail.is-overflowing .div-detail-text,
.badge.is-peak[aria-expanded="true"] .div-detail.is-overflowing .div-detail-text {
  animation: peak-date-scroll var(--scroll-duration, 5s) ease-in-out infinite;
}
@keyframes peak-date-scroll {
  0%, 12% { transform: translateX(0); }
  70%, 88% { transform: translateX(calc(-1 * var(--scroll-distance, 0px))); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .badge.is-peak .div-detail.is-overflowing { overflow-x: auto; }
  .badge.is-peak .div-detail.is-overflowing .div-detail-text { animation: none !important; }
}

.badge.is-div:hover, .badge.is-div:focus-visible {
  border-color: var(--rule); background: var(--row);
}
.badge.is-div.is-muted b { color: var(--dim); }

@media (prefers-reduced-motion: reduce) { .div-swap > * { transition: none; } }

.badge.is-top { border-color: var(--mute); }
.badge.is-first { border-color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent); }
.badge.is-first .badge-kind { color: var(--gold); }
.pane > .badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px; padding: 6px 12px 10px;
}
.pane > .badges .badge {
  width: 100%; min-width: 0; height: 54px; box-sizing: border-box;
  gap: 7px; padding: 5px 8px 5px 6px;
}
.pane > .badges .badge-text { width: 100%; overflow: hidden; }
.pane > .badges .badge .thumb { width: 24px; height: 24px; }
.pane > .badges .badge .thumb,
.pane > .badges .badge .div-crest { flex-shrink: 0; }
.pane > .badges .badge b { font-size: var(--fs-1); }
.pane > .badges .badge-kind, .pane > .badges .badge-note { font-size: var(--fs-1); }
.pane > .badges .badge-kind, .pane > .badges .badge-note {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pane > .badges .badge.is-div { gap: 7px; padding: 5px 8px 5px 6px; }
.pane > .badges .badge.is-div .div-crest { width: 36px; height: 30px; }
.pane > .badges .badge.is-div b { font-size: var(--fs-2); }
.pane > .badges .badge-name { display: block; overflow: hidden; }
.pane > .badges .badge-name > span { display: inline-block; white-space: nowrap; }
.pane > .badges .badge-name.is-overflow { mask-image: linear-gradient(90deg, #000 88%, transparent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pane > .badges .badge:hover .badge-name.is-overflow > span {
    animation: badge-name-scroll 4s ease-in-out 250ms infinite alternate;
  }
}
@keyframes badge-name-scroll {
  0%, 14% { transform: translateX(0); }
  86%, 100% { transform: translateX(calc(-1 * var(--name-travel))); }
}
@media (max-width: 600px) {
  .pane > .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .pane > .badges { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .pane > .badges .badge { gap: 5px; padding: 5px 6px 5px 4px; }
  .pane > .badges .badge-rank { padding-left: 2px; }
}
.pane.has-more { position: relative; }
.pane.has-more > .badges { padding-top: 24px; }
.pane.has-more > .badges-more { position: absolute; top: 6px; right: 12px; margin: 0; }

.pane-note {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim);
  padding: 0 16px 10px; line-height: 1.6; max-width: 70ch;
}

@media (prefers-reduced-motion: reduce) { .badge { transition: none; } }

tbody tr.band-start td { border-top: 1px solid var(--rule); }



.method-head { padding: 34px var(--gutter) 18px; border-bottom: 1px solid var(--rule); }
.method-head h1 {
  font-family: var(--cond); font-size: clamp(26px, 5vw, 38px); font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink);
}
.method-head p {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); margin-top: 8px;
}

.method {
  display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  border-bottom: 1px solid var(--rule);
}
.method-sec { background: var(--bg); padding: 18px var(--gutter); }
.method-sec h2 {
  font-family: var(--cond); font-size: var(--fs-2); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.method-sec dl { display: grid; gap: 14px; }
.method-sec dt {
  font-size: var(--fs-3); font-weight: 600; color: var(--ink); margin-bottom: 3px;
}
.method-sec dd {
  font-family: var(--mono); font-size: var(--fs-1); line-height: 1.75; color: var(--mute);
  max-width: 62ch;
}


.tcard { width: 340px; max-width: calc(100vw - 16px); padding: 0; }
.tcard-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border-bottom: 1px solid var(--rule);
}
.tcard-head b { font-size: var(--fs-2); font-weight: 600; }
.tcard-head span { font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); }
.tcard-list { display: grid; max-height: 260px; overflow-y: auto; }
.tcard-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 8px; padding: 4px 11px;
  border-top: 1px solid var(--hairline);
}
.tcard-row:first-child { border-top: 0; }
.tcard-row .thumb { width: 22px; height: 22px; }
.tcard-name {
  font-size: var(--fs-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcard-wr {
  font-family: var(--mono); font-size: var(--fs-1); font-weight: 600; color: var(--mute);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: right;
}
.tcard-wr.hi { color: var(--good); }
.tcard-wr.lo { color: var(--bad); }
.tcard-load, .tcard-more {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); padding: 8px 11px;
}
tbody tr.has-detail td:nth-child(2) { position: relative; }
tbody tr.has-detail:hover td:nth-child(2)::after {
  content: "›"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); color: var(--gold); font-size: var(--fs-2);
}


.group-title {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--cond); font-size: var(--fs-2); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  padding: 22px var(--gutter) 2px;
  border-top: 1px solid var(--rule); margin-top: 8px;
}
.group-title:first-of-type { border-top: 0; margin-top: 0; }
.group-title + .ball-stats.strip-pad { border-bottom: 0; padding-top: 10px; }
.ball-stats.strip-pad + .ball-stats.strip-pad { padding-top: 0; }
.ball-stats.strip-pad .info { align-self: center; }

.rv2 {
  margin: 12px var(--gutter) 0; padding: 16px; display: grid; gap: 14px;
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc-violet) 9%, var(--panel)) 0%, var(--panel) 55%);
}
.rv2-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 22px; align-items: end; }
.rv2-total b { display: block; font-family: var(--mono); font-size: var(--fs-5); line-height: 1; color: var(--ink); }
.rv2-total span, .rv2-meter-label span, .rv2-sub h3 {
  font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.rv2-meter { min-width: 0; max-width: 460px; padding-bottom: 3px; }
.rv2-meter-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.rv2-meter-label b { font-family: var(--mono); font-size: var(--fs-3); color: var(--acc-amber); }
.rv2-bar { height: 6px; border-radius: 999px; background: var(--hairline-2); overflow: hidden; }
.rv2-bar > i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--acc-amber), color-mix(in srgb, var(--acc-amber) 55%, var(--gold))); }
.rv2-pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.rv2-pill {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px;
  border-radius: 999px; background: var(--pill-on); font-size: var(--fs-2); color: var(--mute);
}
.rv2-pill b { font-family: var(--mono); color: var(--ink); font-weight: 500; }

.rv2-bosses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.rv2-boss {
  display: grid; justify-items: center; gap: 4px; padding: 10px 8px 9px; min-width: 0;
  border-radius: var(--r); background: var(--row); border: 1px solid var(--rule);
  transition: border-color 110ms, transform 110ms;
}
a.rv2-boss:hover { border-color: var(--gold); transform: translateY(-1px); }
.rv2-boss .thumb { width: 56px; height: 56px; object-fit: contain; }
.rv2-boss-name {
  font-size: var(--fs-2); font-weight: 600; text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv2-boss-n { display: inline-flex; gap: 4px; align-items: baseline; }
.rv2-boss-n b { font-family: var(--mono); font-size: var(--fs-4); color: var(--ink); }
.rv2-boss-n span { font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.rv2-boss .rv2-bar { width: 100%; height: 4px; }
.rv2-boss .rv2-bar > i { background: var(--gold); }

.rv2-sub { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: -6px; }
.rv2-all { font-family: var(--mono); font-size: var(--fs-2); color: var(--gold); text-decoration: none; }
.rv2-recent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rv2-run {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 0;
  border-radius: var(--r); background: var(--row); border: 1px solid var(--rule);
}
.rv2-run .thumb { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; }
.rv2-run-body { min-width: 0; display: grid; gap: 2px; }
.rv2-run-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rv2-run-boss { font-weight: 600; font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv2-stars { color: var(--acc-amber); font-size: var(--fs-1); letter-spacing: 1px; flex-shrink: 0; }
.rv2-run-meta { font-size: var(--fs-1); color: var(--dim); display: flex; gap: 8px; min-width: 0; }
.rv2-run-meta > span { white-space: nowrap; }
.rv2-run-party { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) {
  .rv2-bosses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv2-recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rv2 { padding: 14px 12px; }
  .rv2-head { grid-template-columns: minmax(0, 1fr); }
  .rv2-boss .thumb { width: 44px; height: 44px; }
  .rv2-recent { grid-template-columns: minmax(0, 1fr); }
}



.comparts {
  display: grid; gap: 14px; padding: 12px var(--gutter) 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}
.compart {
  background: var(--panel); box-shadow: var(--shadow-card);
  border-radius: var(--r-lg); overflow: hidden;
}
.compart-head {
  display: flex; align-items: center; gap: 4px;
  padding: 11px 14px 9px;
}
.compart-head h3 {
  font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
}
.compart-grid {
  display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.compart-grid > .stile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 420px) {
  .compart-grid { grid-template-columns: minmax(0, 1fr); }
}

.stile {
  display: grid; align-content: start; gap: 2px;
  background: var(--panel); padding: 11px 13px 12px;
  border-top: 2px solid transparent;
}
.stile-label {
  font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.stile-value {
  font-family: var(--mono); font-size: var(--fs-4); font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.stile-sub {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); line-height: 1.4;
}
.stile-bar {
  display: block; height: 3px; border-radius: var(--r-sm); margin-top: 5px;
  background: var(--lift);
}
.stile-bar > span { display: block; height: 100%; border-radius: var(--r-sm); background: currentColor; }

.stile.is-cyan   { border-top-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.stile.is-cyan   .stile-label, .stile.is-cyan   .stile-bar { color: var(--gold); }
.stile.is-amber  { border-top-color: color-mix(in srgb, var(--acc-amber) 55%, transparent); }
.stile.is-amber  .stile-label, .stile.is-amber  .stile-bar { color: var(--acc-amber); }
.stile.is-violet { border-top-color: color-mix(in srgb, var(--acc-violet) 55%, transparent); }
.stile.is-violet .stile-label, .stile.is-violet .stile-bar { color: var(--acc-violet); }
.stile.is-good   { border-top-color: color-mix(in srgb, var(--good) 65%, transparent); }
.stile.is-good   .stile-label, .stile.is-good   .stile-bar { color: var(--good); }
.stile.is-good   .stile-value { color: var(--good); }
.stile.is-bad    { border-top-color: color-mix(in srgb, var(--bad) 65%, transparent); }
.stile.is-bad    .stile-label, .stile.is-bad    .stile-bar { color: var(--bad); }
.stile.is-bad    .stile-value { color: var(--bad); }

.pgrid { margin-left: var(--gutter); margin-right: var(--gutter); width: auto; }
.badge { border-radius: var(--r); }
.tl-item, .tl-card, .depth-warn { border-radius: var(--r); }



.subnav, .ladders, .leagues, .nav {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar, .ladders::-webkit-scrollbar,
.leagues::-webkit-scrollbar, .nav::-webkit-scrollbar { display: none; }

.subnav, .ladders, .leagues { --scroll-ground: var(--row); }
.nav { --scroll-ground: var(--panel); }
.pr-controls .subnav, .tr-page > .subnav, .wmap-toggle, .war-ladder-by { --scroll-ground: var(--bg); }
.subnav, .ladders, .leagues, .nav {
  background-image:
    linear-gradient(to right, var(--scroll-ground) 14px, transparent),
    linear-gradient(to left,  var(--scroll-ground) 14px, transparent),
    linear-gradient(to right, color-mix(in srgb, var(--bg) 88%, transparent), transparent),
    linear-gradient(to left,  color-mix(in srgb, var(--bg) 88%, transparent), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.subnav.has-edge-fade { background-image: none; }
.subnav.has-edge-fade.is-more-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
  mask-image: linear-gradient(to right, transparent, #000 28px);
}
.subnav.has-edge-fade.is-more-end {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 28px);
  mask-image: linear-gradient(to left, transparent, #000 28px);
}
.subnav.has-edge-fade.is-more-start.is-more-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.flabel {
  position: sticky; left: 0; z-index: 2; background: var(--row);
  align-self: stretch; display: flex; align-items: center; flex: 0 0 auto;
}
.subnav button, .ladders button, .leagues button, .nav a { flex: 0 0 auto; }
.chrome > * { max-width: 100%; min-width: 0; }

@media (max-width: 900px) {
  .brand { font-size: var(--fs-4); padding: 10px 13px; }
  .nav a { padding: 7px 12px; }
  .stamp { display: none; }
}

@media (max-width: 400px) {
  .top .nav { flex: 1 1 0; min-width: 0; }
  .brand { font-size: var(--fs-3); padding: 10px 11px; }
}

@media (max-width: 640px) {
  .hero-inner { padding: 34px 16px 30px; }
  .hero-sub { margin-top: 10px; }

  .section-title, .note, .tl-note, .tl-dist-summary, .tl-dist,
  .depth-warn, .preview, .empty, .method-sec, .method-head,
  .comparts, .group-title, .ball-hero, .player-head, .form, footer {
    padding-left: var(--gutter); padding-right: var(--gutter);
  }
  thead th, tbody td, tbody td:first-child { padding-left: 10px; padding-right: 10px; }
  .pgrid { margin-left: var(--gutter); margin-right: var(--gutter); }
  .pane-head, .pane-sub, .pane-note, .mini-row, .badges, .facts,
  .pane .ball-stats.strip-pad { padding-left: var(--gutter); padding-right: var(--gutter); }

  .wrap > table:not(.grid) th.rank,
  .wrap > table:not(.grid) td.rank {
    position: sticky; left: 0; z-index: 3;
    width: 42px; min-width: 42px; max-width: 42px;
    padding-left: 8px; padding-right: 2px;
  }
  .wrap > table:not(.grid) th.rank + th,
  .wrap > table:not(.grid) td.rank + td,
  .wrap > table:not(.grid) thead th:first-child:not(.rank),
  .wrap > table:not(.grid) tbody td:first-child:not(.rank) {
    position: sticky; z-index: 3;
    max-width: 52vw; overflow: hidden; text-overflow: ellipsis;
  }
  .wrap > table:not(.grid) th.rank + th,
  .wrap > table:not(.grid) td.rank + td { left: 42px; }
  .wrap > table:not(.grid) thead th:first-child:not(.rank),
  .wrap > table:not(.grid) tbody td:first-child:not(.rank) { left: 0; }

  .wrap > table:not(.grid) tbody td.rank,
  .wrap > table:not(.grid) tbody td.rank + td,
  .wrap > table:not(.grid) tbody td:first-child:not(.rank) { background: var(--bg); }
  .wrap > table:not(.grid) tbody tr:hover td.rank,
  .wrap > table:not(.grid) tbody tr:hover td.rank + td,
  .wrap > table:not(.grid) tbody tr:hover td:first-child:not(.rank) { background: var(--panel); }

  .wrap > table:not(.grid) th.rank + th,
  .wrap > table:not(.grid) td.rank + td,
  .wrap > table:not(.grid) thead th:first-child:not(.rank),
  .wrap > table:not(.grid) tbody td:first-child:not(.rank) {
    border-right: 1px solid var(--rule);
  }

  .ball-stats { gap: 14px 20px; }
  .ball-hero > img, .player-hero > img { width: 72px; height: 72px; }
  .ball-hero h1 { font-size: var(--fs-5); }
}


@media (hover: none) {
  .tl-card:not(.tcard) { display: none; }

  tbody tr.has-detail td:nth-child(2)::after {
    content: "›"; position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%); color: var(--gold); font-size: var(--fs-2);
  }

}

@media (pointer: coarse) {
  .nav a, .subnav button, .ladders button, .leagues button { padding: 10px 14px; }
  .tl-drawer-close { padding: 8px 12px; }

  .omni input { font-size: 16px; }
}



.item-facts { display: grid; gap: 5px; margin-top: 9px; }
.item-fact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item-fact-k {
  font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  min-width: 74px;
}
.item-fact-v {
  font-family: var(--mono); font-size: var(--fs-2); color: var(--ink);
}
.item-effect {
  padding: 0 var(--gutter) 14px; max-width: 76ch;
  font-family: var(--mono); font-size: var(--fs-2); line-height: 1.7; color: var(--ink);
}
@media (max-width: 640px) { .item-effect { padding-left: var(--gutter); padding-right: var(--gutter); } }



.unc { position: relative; overflow: hidden; min-height: 70vh; }

.unc-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.unc-bit {
  position: absolute; line-height: 1; user-select: none;
  animation-name: unc-fly; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-direction: alternate;
  will-change: transform;
}
@keyframes unc-fly {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(var(--drift, 80px), calc(var(--drift, 80px) * -0.6), 0)
                    rotate(var(--spin, 360deg)); }
}

.unc-box {
  position: relative; z-index: 1; padding: 54px var(--gutter) 60px;
  max-width: 78ch; margin: 0 auto; text-align: center;
}

.unc-shout {
  display: grid; gap: 2px;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 8vw, 68px); line-height: 0.95; letter-spacing: 0.02em;
  color: var(--bad);
}
.unc-shout span:last-child { color: var(--ink); opacity: 0.55; }
.unc:not(.is-calm) .unc-shout { animation: unc-shake 620ms steps(2, end) infinite; }
@keyframes unc-shake {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

.unc-sub {
  font-family: var(--mono); font-size: var(--fs-2); color: var(--mute);
  margin-top: 14px; line-height: 1.7;
}

.unc-log {
  margin: 18px auto 0; padding: 12px 14px; max-width: 74ch;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--fs-1); line-height: 1.75; color: var(--dim);
  text-align: left; white-space: pre; overflow-x: auto; overscroll-behavior-x: contain;
}
.unc-status {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--bad); margin-top: 12px;
}
.unc-fine {
  font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); margin-top: 22px;
}
.unc-jk {
  margin-top: 10px; padding: 5px 12px;
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  font-family: var(--mono); font-size: var(--fs-1); color: var(--mute);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.unc-jk:hover { color: var(--ink); border-color: var(--mute); }
.unc-jk:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .unc-bit { animation: none; }
  .unc-shout { animation: none; }
}

.item-effect.is-none { color: var(--dim); }

.badge.is-provisional-peak .badge-kind::after {
  content: " · provisional"; color: var(--dim); letter-spacing: 0.08em;
}

.cell-sub { display: block; font: var(--fs-1) var(--mono); color: var(--dim); margin-top: 1px; }
.rank-1 .cell-sub, .rank-2 .cell-sub, .rank-3 .cell-sub { color: var(--mute); }
tbody tr.rank-1 td.support, tbody tr.rank-2 td.support, tbody tr.rank-3 td.support { color: var(--mute); }
.meta-tag { margin-left: 8px; font: var(--fs-1) var(--mono); color: var(--dim); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1px 5px; white-space: nowrap; }
.meta-pick { gap: 10px; }
.meta-pick label { display: flex; align-items: center; gap: 8px; }
.meta-pick .flabel { border-left: 0; padding: 0; }
.meta-pick select { background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r);
  font: var(--fs-2) var(--body); padding: 6px 8px; max-width: 70vw; }

.badge.is-owner { position: relative; }
.badge-rank {
  margin-left: auto; padding-left: 8px; flex-shrink: 0;
  font: 700 var(--fs-5)/1 var(--cond); color: var(--mute); font-variant-numeric: tabular-nums;
}
.badge.is-top .badge-rank { color: var(--ink); }
.badge.is-first .badge-rank { color: var(--gold); }

.thumb.is-blank { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: var(--panel); }

@media (min-width: 700px) { .pane .wrap table { min-width: 0; } }
.pane td.stars { color: var(--acc-amber); letter-spacing: 1px; }

#view.is-centered { max-width: 1240px; margin-left: auto; margin-right: auto; }
@media (min-width: 1300px) { #view.is-centered { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); } }
a.alliance-link { color: inherit; text-decoration: none; display: inline-block; }
a.alliance-link:hover .alliance-name { color: var(--gold); }
td b.up { color: var(--good); } td b.down { color: var(--bad); }
.hero-patch { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 0; font-size: var(--fs-3); }
.hero-patch .flabel { border-left: 0; padding: 0; color: var(--mute); position: static; background: none; }
.hero-patch span:last-child { color: var(--mute); font-size: var(--fs-2); white-space: nowrap; }
.alliance-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.alliance-desc { color: var(--mute); max-width: 640px; margin: 4px 0 10px; }
tr.clickable { cursor: pointer; }

.strong-row { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 16px 12px; scroll-snap-type: x proximity; }
.strong-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 12px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel);
  color: var(--ink); text-decoration: none; scroll-snap-align: start; }
.strong-card:hover { border-color: var(--gold); }
.strong-card .thumb { width: 64px; height: 64px; }
.strong-name { font-size: var(--fs-2); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.strong-cp { font: 600 var(--fs-3) var(--mono); }
.strong-types { justify-content: center; }
.strong-item { display: flex; align-items: center; gap: 5px; font: var(--fs-1) var(--mono); color: var(--mute); }
.strong-item .thumb { width: 20px; height: 20px; }
.strong-since { font: var(--fs-1) var(--mono); color: var(--dim); }
.effect-term { background: none; border: 0; padding: 0; font: inherit; color: var(--gold);
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.alliance-dot.is-small { width: 10px; height: 10px; }
tr.has-ally-color .name { color: color-mix(in srgb, var(--ally) 35%, var(--ink)); font-weight: 600; }
.territory-chart { width: 100%; height: auto; max-height: 220px; display: block; padding: 0 16px 12px; box-sizing: border-box; }
.territory-chart polyline { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.territory-chart text { fill: var(--dim); font: var(--fs-1) var(--mono); }
.move-card {
  margin: 18px var(--gutter) 0; padding: 0 0 6px; min-width: 0; overflow: hidden;
  background: var(--panel); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--rule), var(--shadow-card), 0 14px 32px -22px rgba(0, 0, 0, .55);
}
.move-card .move-tabs { margin: 0 var(--gutter) 4px; max-width: calc(100% - 2 * var(--gutter)); flex-wrap: wrap; }
.move-card .ball-stats.strip-pad { border-bottom: 0; }
.move-card .move-caption { padding: 0 var(--gutter); }
.move-card .move-caption .info { vertical-align: middle; }
.move-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rh-league[aria-selected="true"] { color: var(--ink); background: var(--panel); box-shadow: var(--shadow-card); }
.territory-chart circle { fill: var(--gold); }
.war-cols { display: flex; align-items: stretch; gap: 4px; padding: 6px var(--gutter) 10px; }
.war-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.war-col-plot { height: 130px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.war-bar { display: block; width: min(44px, 70%); border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: color-mix(in srgb, var(--gold) 70%, transparent); }
.war-bar-value { font: 500 var(--fs-1) var(--mono); color: var(--mute); margin-bottom: 4px; }
.war-none { display: block; width: min(44px, 70%); border-top: 2px dashed var(--dim); }
.war-col-foot { display: flex; flex-direction: column; align-items: center; margin-top: 6px;
  font: var(--fs-1) var(--mono); color: var(--mute); white-space: nowrap; }
@media (max-width: 560px) {
  .war-cols.is-dense .war-col:nth-last-child(even) .war-col-foot { visibility: hidden; }
  .war-cols.is-dense .war-bar-value { display: none; }
}
.ball-stats b.up { color: var(--good); } .ball-stats b.down { color: var(--bad); }

.fx-tools { display: flex; align-items: center; gap: 16px; padding: 12px var(--gutter); border-bottom: 1px solid var(--rule); }
.fx-search { flex: 0 1 340px; min-width: 0; box-sizing: border-box; background: var(--panel); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r); font: var(--fs-3) var(--body); padding: 8px 10px; }
.fx-search:focus { border-color: var(--gold); }
.fx-count-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.item-pairing-lead {
  padding: 0 16px 10px; font: var(--fs-2)/1.6 var(--body); color: var(--mute); max-width: 78ch;
}
.item-pairing-lead b { color: var(--ink); }

.bm { margin: 14px 0 4px; }
.bm .boss-col-title { margin-bottom: 8px; }
.bm-lead { font: var(--fs-2)/1.5 var(--body); color: var(--ink); margin-bottom: 8px; }
.bm-lead.is-bad { color: var(--bad); }
.bm-line { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.bm-label {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute);
}
.bm-run { display: flex; flex-wrap: wrap; gap: 5px; }
.bm-none { font: var(--fs-2) var(--mono); color: var(--dim); }
.bm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 5px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--panel);
}
.bm-chip b { font: 600 var(--fs-1) var(--mono); }
.bm-chip.is-good b { color: var(--good); }
.bm-chip.is-bad b { color: var(--bad); }

.dex-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border-top: 1px solid var(--rule);
}
.dex-card {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: var(--bg); color: inherit; text-decoration: none; min-width: 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.dex-card:hover { background: var(--panel); }
.dex-card .thumb { width: 34px; height: 34px; flex: none; border-radius: 50%; }
.dex-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dex-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.dex-name span {
  font: 500 var(--fs-2) var(--body); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dex-skin { font: var(--fs-1) var(--mono); color: var(--dim); font-style: normal; }
.dex-marks { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dex-marks > .chips { flex-wrap: wrap; }
.dex-rarity {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
}
.dex-rarity.is-legendary { color: var(--gold); }
.dex-rarity.is-mythical { color: var(--bad); }


@media (max-width: 640px) {
  .dex-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.eq-filter {
  font: var(--fs-2) var(--body); color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 5px 8px;
}
.eq-filter:focus { border-color: var(--gold); }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.eq-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px 15px 15px; background: var(--bg);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.eq-head { display: flex; align-items: center; gap: 10px; }
.eq-head .thumb { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); }
.eq-titles { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.eq-name {
  font: 600 var(--fs-3) var(--body); color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-name:hover { color: var(--gold); }
.eq-marks { display: flex; align-items: center; gap: 6px; }
.eq-tier { font: 600 var(--fs-1) var(--mono); color: var(--gold); }
.eq-stats { display: flex; gap: 12px; font: var(--fs-1) var(--mono); color: var(--mute); }
.eq-effect { font: var(--fs-2)/1.5 var(--body); color: var(--ink); }
.eq-effect.is-unknown { color: var(--dim); font-style: italic; }
.eq-req { font: var(--fs-1) var(--mono); color: var(--mute); }
.eq-from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.eq-from-label {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); width: 100%;
}
.eq-chance { font: var(--fs-1) var(--mono); color: var(--dim); font-style: normal; }

@media (max-width: 640px) {
  .fx-tools { flex-wrap: wrap; gap: 8px; }
  .fx-search { flex: 1 1 100%; }
  .eq-grid { grid-template-columns: minmax(0, 1fr); }
}
.fx-count { font: var(--fs-2) var(--mono); color: var(--mute); white-space: nowrap; }
.fx-row { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(150px, 240px);
  column-gap: 24px; row-gap: 6px; align-items: start; padding: 10px 16px; border-bottom: 1px solid var(--hairline-2); }
.fx-row[hidden] { display: none; }
.fx-row:not(.fx-head):hover { background: var(--row); }
.fx-head { background: var(--panel); border-bottom: 1px solid var(--rule); padding-top: 9px; padding-bottom: 9px;
  font: 700 var(--fs-1) var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.fx-name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-3); color: var(--ink); min-width: 0; }
.fx-name .fx-icon { width: 28px; height: 28px; border-radius: var(--r); }
.fx-icon.is-empty { display: block; visibility: hidden; }
.fx-desc { margin: 0; padding-top: 5px; color: var(--mute); font-size: var(--fs-3); line-height: 1.5; }
.fx-mymics { display: flex; flex-wrap: wrap; gap: 6px 12px; padding-top: 3px; }
.fx-mymic { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-size: var(--fs-2); }
.fx-mymic .thumb { width: 22px; height: 22px; border-radius: var(--r-sm); }
.fx-mymic:hover span { color: var(--gold); }
.fx-none { color: var(--dim); font: var(--fs-2) var(--mono); padding-top: 3px; }
@media (max-width: 760px) {
  .fx-tools { flex-wrap: wrap; gap: 8px; }
  .fx-search { flex: 1 1 100%; }
  .fx-count-wrap { margin-left: 0; }
  .fx-head { display: none; }
  .fx-row { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .fx-desc, .fx-mymics { padding-left: 38px; padding-top: 0; }
  .fx-mymics.is-empty { display: none; }
}

.mymic-lore { color: var(--mute); max-width: 760px; padding: 0 16px; font-style: italic; line-height: 1.5; }

@media (max-width: 640px) {
  .top { flex-wrap: wrap; }
  .top .brand { order: 1; }
  .top .omni { order: 2; flex: 1 1 0; min-width: 0; margin-left: 0; padding: 5px 0 3px; }
  .top .omni input { width: 100%; box-sizing: border-box; }
  .omni input { margin: 0; }
  .top .nav {
    order: 3; flex: 1 1 100%; min-width: 0; padding: 0 6px 5px;
    flex-wrap: wrap; row-gap: 2px; overflow-x: visible;
  }
  .top .nav a {
    flex: 1 1 22%; display: flex; justify-content: center; align-items: center;
    padding: 7px 8px; font-size: var(--fs-3); letter-spacing: 0;
  }

  .top .omni { position: static; }
  .omni-results { left: 8px; right: 8px; top: 100%; max-width: none; }
}
@media (max-width: 640px) {
  .meta-tag { font-size: 0; padding: 0 4px; margin-left: 6px; }
  .meta-tag::before { content: "*"; font-size: var(--fs-1); }
}

.boss-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 4px 16px 18px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); }
.boss-col { padding: 14px 14px 16px; min-width: 0; }
.boss-col + .boss-col { border-left: 1px solid var(--rule); }
.boss-col-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.boss-col-head .thumb { width: 64px; height: 64px; }
.boss-col-head h2 { margin: 0 0 6px; font: 700 var(--fs-5) var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.boss-col .ball-stats { padding: 6px 0 4px; }
.boss-col-title { font: 600 var(--fs-2) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 14px 0 8px; display: flex; align-items: center; gap: 6px; }
.boss-drops { display: grid; gap: 6px; padding: 0 16px 12px; }
.boss-col .boss-drops { padding: 0; }
.boss-drop { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  color: var(--ink); text-decoration: none; }
.boss-drop .thumb { grid-row: span 2; }
.boss-drop:hover span:first-of-type { color: var(--gold); }
.dr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 0 var(--gutter, 16px) 14px; }
.dr-tile {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px;
  border-radius: var(--r); background: var(--row); border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
}
a.dr-tile:hover { border-color: var(--gold); }
.dr-tile .thumb { width: 44px; height: 44px; flex: none; object-fit: contain; }
.dr-words { display: grid; gap: 5px; min-width: 0; }
.dr-name { font-weight: 600; font-size: var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.dr-pill {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px;
  border-radius: 999px; background: var(--pill-on); font-size: var(--fs-1); color: var(--mute);
}
.dr-pill b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.dr-pill.is-thin b { font-family: inherit; color: var(--mute); }
.dr-tile.is-thin .dr-name { color: var(--mute); }
.idc {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; max-width: 100%;
  min-height: 32px; box-sizing: border-box; padding: 2px 6px 2px 3px; border-radius: var(--r);
  color: var(--mute); text-decoration: none; font: 600 var(--fs-1)/1.25 var(--body); vertical-align: middle;
}
.idc:hover, .idc:focus-visible { color: var(--ink); background: var(--row); }
.idc:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.idc .thumb { width: 22px; height: 22px; flex: none; object-fit: contain; }
.idc-boss { min-width: 0; max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idc-pill {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border-radius: 999px;
  background: var(--pill-on); color: var(--mute); font-weight: 500; white-space: nowrap;
}
.idc-pill b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.idc-unit { color: var(--mute); }
.idc-pill.is-thin .idc-star { color: var(--mute); }
.idc-star { color: var(--ink); }
.cellflex:has(> .idc) { flex-wrap: wrap; row-gap: 2px; }
.idc-line { margin: 2px 0 0 -3px; }
@media (max-width: 560px) {
  td .idc { flex-wrap: nowrap; gap: 5px; }
  td .idc-boss, td .idc-unit-rest {
    position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
.pr2.has-drops .pr2-pod, .pr2.has-drops .pr2-row { display: grid; }
@media (min-width: 720px) {
  .pr2.has-drops .pr2-pod:not(.has-drop) > .pr2-pod-link { padding-bottom: 50px; }
  .pr2.has-drops .pr2-pod.is-gold:not(.has-drop) > .pr2-pod-link { padding-bottom: 54px; }
  .pr2.has-drops .pr2-pod.is-gold.has-drop > .pr2-pod-link { padding-bottom: 10px; }
}
.pr2-pod.has-drop, .pr2-row.has-drop { display: grid; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.pr2-pod.has-drop {
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 20%, var(--panel)), var(--panel) 65%);
  border: 1px solid color-mix(in srgb, var(--medal) 50%, transparent);
}
.pr2-pod.has-drop > .pr2-pod-link { background: none; border: 0; box-shadow: none; padding-bottom: 6px; }
.pr2-pod.has-drop > .idc { justify-self: center; justify-content: center; margin: 0 10px 12px; }
.pr2-row.has-drop { background: var(--panel); border: 1px solid transparent; }
.pr2-row.has-drop > .pr2-row-link { background: none; border: 0; box-shadow: none; padding-bottom: 2px; }
.pr2-row.has-drop > .idc { justify-self: start; margin: 0 12px 8px 100px; }
@media (hover: hover) {
  .pr2-pod.has-drop:hover { border-color: var(--medal); }
  .pr2-row.has-drop:hover { border-color: var(--rule); }
}
@media (max-width: 640px) {
  .dr-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .boss-cols { grid-template-columns: minmax(0, 1fr); }
  .boss-col + .boss-col { border-left: 0; border-top: 1px solid var(--rule); }
}

.badge.is-first-clear { border-color: var(--acc-amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc-amber) 35%, transparent); }
.badge.is-first-clear .badge-kind { color: var(--acc-amber); }
.role-mark {
  display: inline-grid; place-items: center; height: 18px; padding: 0 4px; margin-left: 6px; vertical-align: middle;
  font: 700 var(--fs-1) var(--mono); letter-spacing: -0.04em; color: var(--gold); cursor: default;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--rule)); border-radius: var(--r-sm);
  position: relative;
}
.role-mark::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap; padding: 4px 8px; border-radius: var(--r-sm);
  font: 600 var(--fs-1) var(--body); letter-spacing: 0; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card);
  opacity: 0; pointer-events: none; transition: opacity 120ms; z-index: 30;
}
.role-mark:hover::after, .role-mark:focus-visible::after { opacity: 1; }
.badge.is-solo { border-color: color-mix(in srgb, var(--gold) 60%, var(--rule)); }
.badge.is-solo .badge-kind { color: var(--gold); }
.badge-stars { flex: none; display: grid; place-items: center; min-width: 32px; color: var(--gold);
  font: 700 var(--fs-3)/1 var(--body); letter-spacing: -.05em; }
.badge.is-solo-3 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.first-clear { margin: 6px 16px 14px; padding: 12px 14px; border: 1px solid var(--acc-amber); border-radius: var(--r);
  background: color-mix(in srgb, var(--acc-amber) 8%, var(--panel)); }
.first-clear-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.first-clear-badge { font: 700 var(--fs-2) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--bg);
  background: var(--acc-amber); border-radius: var(--r-sm); padding: 3px 8px; }
.first-clear-crew { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: var(--fs-3); }
.first-clear-crew a { color: var(--ink); text-decoration: none; font-weight: 600; }
.first-clear-crew a:hover { color: var(--acc-amber); }
.first-clear.is-quiet { border-color: var(--rule); background: var(--panel); }
.first-clear.is-quiet .first-clear-badge { background: var(--rule); color: var(--ink); }
.first-clear.is-quiet .first-clear-crew a:hover { color: var(--gold); }
.first-clear.is-provisional { border-color: var(--rule); background: var(--panel); }
.first-clear.is-provisional .first-clear-badge { background: var(--rule); color: var(--mute); }
.first-clear.is-provisional .first-clear-crew a:hover { color: var(--ink); }

@media (pointer: coarse) {
  .info { position: relative; }
  .info::after { content: ""; position: absolute; inset: -13px; border-radius: 50%; }
  a.backlink { display: inline-block; padding: 8px 0; }
  footer a {
    display: inline-block; box-sizing: border-box; min-height: 32px; min-width: 24px;
    padding: 6px 0; text-align: center; line-height: 20px;
  }

  .mini-row { padding-top: 9px; padding-bottom: 9px; }
  .copy-link { width: 36px; height: 36px; }
  .dv-chip, .fx-modes button, .pvp-pick-ball { min-height: 34px; }

  .fx-mymic { padding-top: 8px; padding-bottom: 8px; margin-top: -8px; margin-bottom: -8px; }

  .fx-desc, .fx-tile-desc { line-height: 1.95; }

  .cl-toggle, .rh-league, .pvp-era-toggle, .share-btn { position: relative; }
  .cl-toggle::after, .rh-league::after, .pvp-era-toggle::after,
  .share-btn::after { content: ""; position: absolute; inset: -8px 0; }
}

.ball-link { text-decoration: none; }
.ball-link:hover, .ball-link:focus-visible { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.ball-pop { position: fixed; z-index: 90; width: 250px; padding: 10px 12px; background: var(--panel);
  border: 1px solid var(--gold); border-radius: var(--r); box-shadow: var(--shadow-2); pointer-events: none; }
.ball-pop-top { display: flex; gap: 10px; align-items: center; }
.ball-pop-top > img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.ball-pop-name { display: block; font-size: var(--fs-3); line-height: 1.25; margin-bottom: 3px; }
.ball-pop-rarity { display: block; font: 600 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; }
.ball-pop-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ball-pop-stats span { display: flex; flex-direction: column; }
.ball-pop-stats b { font: 600 var(--fs-2) var(--mono); }
.ball-pop-stats i { font: normal var(--fs-1) var(--mono); color: var(--dim); }
.ball-pop-none { grid-column: 1 / -1; color: var(--mute); font-size: var(--fs-2); }
.strip li.is-link { cursor: pointer; }
.strip li.is-link:hover .who { color: var(--gold); }
.strip .who-link { color: inherit; text-decoration: none; }
.strip .who-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); }

.badge.is-first-clear.is-place-2 { border-color: #B8C2CC; box-shadow: inset 0 0 0 1px rgba(184,194,204,.3); }
.badge.is-first-clear.is-place-2 .badge-kind { color: var(--medal-silver); }
.badge.is-first-clear.is-place-3 { border-color: #B87A4B; box-shadow: inset 0 0 0 1px rgba(184,122,75,.3); }
.badge.is-first-clear.is-place-3 .badge-kind { color: var(--medal-bronze); }
.badge.is-first-clear.is-provisional { border-color: var(--rule); box-shadow: none; }
.badge.is-first-clear.is-provisional .badge-kind { color: var(--mute); }
.first-clear-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--acc-amber) 25%, transparent); }
.first-clear-row .first-clear-crew { grid-column: 1 / -1; margin-top: 2px; }
.place-tag { font: 700 var(--fs-2) var(--cond); letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-sm); padding: 2px 7px; color: var(--bg); background: var(--acc-amber); }
.place-tag.is-2 { background: #B8C2CC; } .place-tag.is-3 { background: #B87A4B; }
.place-tag.is-2, .place-tag.is-3 { color: #0B0D12; }
.place-cell { font: 700 var(--fs-2) var(--mono); }
.place-cell.is-1 { color: var(--acc-amber); } .place-cell.is-2 { color: var(--medal-silver); } .place-cell.is-3 { color: var(--medal-bronze); }
.item-link { text-decoration: none; }
.item-link:hover, .item-link:focus-visible { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.strong-card { cursor: pointer; }
a.strong-name { color: var(--ink); text-decoration: none; }
a.strong-name:hover { color: var(--gold); }
.strong-item i { font-style: normal; color: var(--dim); }
.strong-item .item-link { color: var(--mute); }
.badge.is-first-clear.is-place-4 { border-color: var(--rule); box-shadow: none; }
.badge.is-first-clear.is-place-4 .badge-kind { color: var(--mute); }

.legal { max-width: 760px; padding: 28px var(--gutter) 40px; }
.legal h1 { font: 700 var(--fs-5) var(--cond); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 4px; }
.legal-date { font: var(--fs-2) var(--mono); color: var(--dim); margin: 0 0 18px; }
.legal h2 { font: 700 var(--fs-3) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 26px 0 8px; }
.legal p { color: var(--mute); line-height: 1.65; margin: 0 0 10px; font-size: var(--fs-3); }
.legal a:not(.btn) { color: var(--gold); }
.legal-choices { margin-top: 18px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 8px 14px; font: 600 var(--fs-2) var(--body); cursor: pointer; }
.legal-choices:hover { border-color: var(--gold); }

body.has-ad-anchor footer { padding-bottom: 120px; }
@media (max-width: 760px) { body.has-ad-anchor footer { padding-bottom: 80px; } }
@media (min-width: 1500px) {
  body.has-ad-rail-right { padding-right: 320px; }
  body.has-ad-rail-left { padding-left: 320px; }
}


:root { --ease: cubic-bezier(.22, .9, .3, 1); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

.art-img { opacity: 0; }
.art-img.is-loaded { opacity: 1; }

body.is-loading::before {
  content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 36%; z-index: 100;
  background: var(--gold); pointer-events: none; opacity: 0;
  animation: loadbar-in 1ms linear 220ms forwards, loadbar 1.1s var(--ease) 220ms infinite;
}
@keyframes loadbar-in { to { opacity: 1; } }
@keyframes loadbar { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) {
  body.is-loading::before { animation: loadbar-in 1ms linear 220ms forwards; }
}

.title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.title-row h1 { min-width: 0; }
.copy-link {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px;
  background: none; border: 1px solid transparent; border-radius: var(--r); color: var(--dim); cursor: pointer;
}
.copy-link:hover { color: var(--gold); border-color: var(--rule); background: var(--row); }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 2147483647; pointer-events: none;
  transform: translate(-50%, 12px); opacity: 0;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 8px 14px; font: 600 var(--fs-2) var(--body);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast[popover] { inset: auto auto 24px 50%; margin: 0; overflow: visible; width: max-content; max-width: calc(100vw - 32px); }

.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 40px; height: 40px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--panel); color: var(--mute); border: 1px solid var(--rule); border-radius: var(--r);
  opacity: 0; transform: translateY(8px); pointer-events: none;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--gold); border-color: var(--gold); }
body.has-ad-anchor .to-top { bottom: 112px; }
@media (max-width: 760px) { body.has-ad-anchor .to-top { bottom: 72px; } }

.omni { display: flex; align-items: center; }
.omni-kbd {
  font: 600 var(--fs-1) var(--mono); color: var(--dim); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 1px 6px; margin-right: 12px; pointer-events: none;
}
.omni input:focus + .omni-kbd { opacity: 0; }
@media (pointer: coarse), (max-width: 640px) { .omni-kbd { display: none; } }
.omni-head {
  margin: 0; padding: 8px 12px 6px; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--rule);
}

@media (prefers-reduced-motion: no-preference) {
  .art-img { transition: opacity 260ms ease-out; }

  .brand {
    transition: color 160ms ease, background-color 160ms ease, box-shadow 220ms var(--ease);
  }
  .nav a, .subnav button, .ladders button, .leagues button, .mt, .home-more-card {
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }
  .brand b { transition: letter-spacing 260ms var(--ease); display: inline-block; }
  .brand:hover b { letter-spacing: 0.12em; }

  tbody td { transition: background-color 120ms ease, color 120ms ease; }
  tbody tr.clickable .thumb, .strip li .thumb, .fx-mymic .thumb, .omni-row .thumb,
  .boss-drop .thumb, .cellflex .thumb { transition: transform 200ms var(--ease); }
  tbody tr.clickable:hover .thumb, .strip li.is-link:hover .thumb, .fx-mymic:hover .thumb,
  .omni-row:hover .thumb, .omni-row.is-active .thumb, .boss-drop:hover .thumb { transform: scale(1.12); }

  .strip li { transition: background-color 140ms ease; }
  .strip li .who { transition: transform 200ms var(--ease), color 140ms ease; }
  .strip li.is-link:hover .who { transform: translateX(3px); color: var(--ink); }

  a.plain, footer a, .backlink, .fx-mymic span, .effect-term, .item-link, .alliance-link {
    transition: color 140ms ease;
  }
  .backlink { display: inline-block; transition: color 140ms ease, transform 200ms var(--ease); }
  .backlink:hover { transform: translateX(-3px); }

  .fx-row, .omni-row { transition: background-color 120ms ease; }
  .omni-results:not([hidden]) { animation: drop-in 160ms var(--ease) both; }
  @keyframes drop-in { from { opacity: 0; transform: translateY(-4px); } }

  .copy-link, .to-top { transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease,
                                   opacity 200ms ease, transform 220ms var(--ease); }
  .toast { transition: opacity 180ms ease, transform 220ms var(--ease); }

  .info { transition: color 140ms ease, border-color 140ms ease, transform 160ms var(--ease); }
  .info:hover { transform: scale(1.12); }

  button:active:not(:disabled) { transform: translateY(1px); }

  .ball-hero > img { transition: transform 400ms var(--ease); }
  .ball-hero > img:hover { transform: rotate(-4deg) scale(1.04); }

  .badge { transition: border-color 140ms ease, background-color 140ms ease, transform 200ms var(--ease); }
  button.badge:hover { transform: translateY(-2px); }


  .fx-tile, .pvp-tile.is-bench, .pvp-choice, .stile,
  .pair-ball, .early-badge, .isel-button, .fx-modes button {
    transition: transform 180ms var(--ease), border-color 160ms ease,
                background-color 160ms ease, box-shadow 220ms var(--ease);
  }
  .mt:hover, .fx-tile:hover, .pvp-choice:hover, .pvp-tile.is-bench:hover {
    transform: translateY(-2px);
  }

  .mt img, .fx-tile .fx-icon, .pvp-tile .thumb {
    transition: transform 220ms var(--ease);
  }
  .mt:hover img { transform: scale(1.07) rotate(-2deg); }
  .fx-tile:hover .fx-icon { transform: scale(1.1) rotate(-3deg); }
  .pvp-tile.is-bench:hover .thumb { transform: scale(1.09); }

  .mt-grid > *, .fx-grid > *, .comparts > * {
    animation: tile-in 320ms var(--ease) both;
  }
  .mt-grid > :nth-child(1),  .fx-grid > :nth-child(1)  { animation-delay: 0ms; }
  .mt-grid > :nth-child(2),  .fx-grid > :nth-child(2)  { animation-delay: 26ms; }
  .mt-grid > :nth-child(3),  .fx-grid > :nth-child(3)  { animation-delay: 52ms; }
  .mt-grid > :nth-child(4),  .fx-grid > :nth-child(4)  { animation-delay: 78ms; }
  .mt-grid > :nth-child(5),  .fx-grid > :nth-child(5)  { animation-delay: 104ms; }
  .mt-grid > :nth-child(6),  .fx-grid > :nth-child(6)  { animation-delay: 130ms; }
  .mt-grid > :nth-child(7),  .fx-grid > :nth-child(7)  { animation-delay: 156ms; }
  .mt-grid > :nth-child(8),  .fx-grid > :nth-child(8)  { animation-delay: 182ms; }
  .mt-grid > :nth-child(9),  .fx-grid > :nth-child(9)  { animation-delay: 208ms; }
  .mt-grid > :nth-child(10), .fx-grid > :nth-child(10) { animation-delay: 234ms; }
  .mt-grid > :nth-child(11), .fx-grid > :nth-child(11) { animation-delay: 260ms; }
  .mt-grid > :nth-child(n+12), .fx-grid > :nth-child(n+12) { animation-delay: 286ms; }
  @keyframes tile-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }

  .reach-chips .chip, .chips .chip { transition: transform 150ms var(--ease); }
  .reach-chips:hover .chip:hover, .tsel-face .chip { transform: translateY(-1px); }

  .pvp-verdict b, .pvp-outlook b { transition: color 200ms ease; }
  .pvp-slot { transition: border-color 180ms ease, background-color 180ms ease; }

  .rar-pip, .orb { transition: transform 160ms var(--ease); }
  .isel-row:hover .rar-pip { transform: scale(1.18); }

  #view > .section-title { animation: rule-in 420ms var(--ease) both; }
  @keyframes rule-in { from { opacity: 0; transform: translateY(4px); } }

  #view tbody tr { transition: background-color 130ms ease; }
  #view tbody tr.clickable:hover td:first-child { transform: translateX(2px); }
  #view tbody tr.clickable td:first-child { transition: transform 160ms var(--ease); }
  #view tbody tr:nth-child(-n+8) { animation: row-in 260ms var(--ease) both; }
  #view tbody tr:nth-child(2) { animation-delay: 30ms; }
  #view tbody tr:nth-child(3) { animation-delay: 60ms; }
  #view tbody tr:nth-child(4) { animation-delay: 90ms; }
  #view tbody tr:nth-child(5) { animation-delay: 120ms; }
  #view tbody tr:nth-child(6) { animation-delay: 150ms; }
  #view tbody tr:nth-child(7) { animation-delay: 180ms; }
  #view tbody tr:nth-child(8) { animation-delay: 210ms; }
  @keyframes row-in { from { opacity: 0; transform: translateY(3px); } }

  .tier { animation: band-in 300ms var(--ease) both; }
  .tier:nth-of-type(2) { animation-delay: 45ms; }
  .tier:nth-of-type(3) { animation-delay: 90ms; }
  .tier:nth-of-type(4) { animation-delay: 135ms; }
  .tier:nth-of-type(n+5) { animation-delay: 180ms; }
  @keyframes band-in { from { opacity: 0; transform: translateY(6px); } }
  .tl-item { transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease; }
  .tl-item.is-link:hover { transform: translateY(-2px); }

  .pvp-board-row { animation: row-in 280ms var(--ease) both; }
  .pvp-board-row:nth-child(2) { animation-delay: 40ms; }
  .pvp-board-row:nth-child(3) { animation-delay: 80ms; }
  .pvp-board-row:nth-child(4) { animation-delay: 120ms; }
  .pvp-board-row:nth-child(5) { animation-delay: 160ms; }
  .pvp-outlook { transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease; }
  .pvp-outlook.is-stale { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-grid > *, .fx-grid > *, .comparts > *, #view > .section-title,
  #view tbody tr, .tier, .pvp-board-row { animation: none; }
  .cmp-fill { transition: none; }
  body.is-loading::before { display: none; }
  .art-img { opacity: 1; }
}


.acct {
  display: grid; place-items: center; width: 48px; flex: none; align-self: stretch; color: var(--mute);
}
.acct:hover { color: var(--gold); background: var(--row); }
.acct img { width: 26px; height: 26px; border-radius: 50%; display: block; }
@media (max-width: 640px) { .top .acct { order: 2; } }

.account { max-width: 760px; padding: 26px var(--gutter) 48px; }
.account h1 { font: 700 var(--fs-5) var(--cond); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 10px; }
.account .section-title { padding-left: 0; padding-right: 0; margin-top: 26px; }
.account-lede { color: var(--mute); font-size: var(--fs-3); line-height: 1.6; margin: 6px 0 14px; }
.account-note { color: var(--dim); font: var(--fs-2) var(--mono); line-height: 1.6; margin: 10px 0; }
.account-error { color: var(--bad); font-size: var(--fs-3); margin: 10px 0; }
.account-perks { margin: 0 0 18px; padding-left: 20px; color: var(--ink); line-height: 1.9; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 9px 16px; font: 600 var(--fs-3) var(--body);
}
.btn:hover { border-color: var(--gold); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-discord { background: #5865F2; border-color: #5865F2; color: #fff; }
.btn-discord:hover { filter: brightness(1.1); border-color: #5865F2; }
.btn-quiet { background: none; }
.btn-small { padding: 3px 9px; font-size: var(--fs-2); }

.account-who { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; font-weight: 600; }
.account-who img { width: 32px; height: 32px; border-radius: 50%; }
.account-who .btn { margin-left: auto; }
.account-form { display: flex; gap: 8px; flex-wrap: wrap; }
.account-form input {
  flex: 1 1 240px; min-width: 0; background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 9px 12px; font: var(--fs-3) var(--body);
}
.account-form input:focus { border-color: var(--gold); }
.account-steps { color: var(--ink); line-height: 2.1; padding-left: 20px; margin: 6px 0 14px; }
.account-code {
  font: 600 var(--fs-4) var(--mono); color: var(--gold); background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 2px 8px; margin: 0 6px; letter-spacing: .06em;
}
.account-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.account-badges { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.account-badge {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--rule);
  border-radius: var(--r); background: var(--panel);
}
.account-badge.is-chosen { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.account-badge .thumb { width: 26px; height: 26px; }
.account-badge-label { flex: 1; min-width: 0; font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-bg-preview { height: 150px; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r); margin: 6px 0 10px; background: var(--row); }
.account-bg-preview img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.account-bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 280px; overflow: auto; padding: 2px; }
.account-bg-option {
  display: grid; place-items: center; aspect-ratio: 1; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r); cursor: pointer; padding: 4px; color: var(--mute); font: 600 var(--fs-1) var(--body);
}
.account-bg-option .thumb { width: 36px; height: 36px; border: 0; background: none; }
.account-bg-option.is-default { grid-column: span 2; aspect-ratio: auto; }
.account-bg-option:hover { border-color: var(--mute); }
.account-bg-option.is-chosen { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.account-save { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--rule); margin-top: 18px; }

.claimed-mark { color: var(--gold); display: inline-grid; place-items: center; flex: none; }
.customize-link { font: 600 var(--fs-2) var(--body); color: var(--mute); border: 1px solid var(--rule); border-radius: var(--r); padding: 4px 10px; }
.customize-link:hover { color: var(--gold); border-color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .acct, .btn, .account-bg-option, .account-badge, .customize-link { transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, filter 140ms ease; }
}
.account-or { display: flex; align-items: center; gap: 12px; color: var(--dim); font: var(--fs-2) var(--mono); margin: 16px 0; max-width: 420px; }
.account-or::before, .account-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.account-h2 { font: 700 var(--fs-4) var(--cond); letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 4px; }
.account-connected { color: var(--ink); font-size: var(--fs-3); }

.account-target { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin: 10px 0 6px;
  background: var(--panel); border: 1px solid var(--gold); border-radius: var(--r); max-width: 460px; }
.account-target .thumb { width: 56px; height: 56px; border: 0; background: none; }
.account-target b { display: block; font: 700 var(--fs-5) var(--cond); letter-spacing: .03em; text-transform: uppercase; }
.account-target-kind { display: block; font: var(--fs-2) var(--mono); color: var(--mute); }

.account-agree { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); font-size: var(--fs-3); line-height: 1.5; max-width: 560px; }
.account-agree input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--gold); flex: none; }
.account-agree a { color: var(--gold); }
.account-sent { color: var(--good); font-size: var(--fs-3); margin: 8px 0; }
.account-methods { display: grid; gap: 8px; }
.account-method { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.account-method > b { width: 80px; font-weight: 600; }
.account-method > div { flex: 1 1 280px; }
.account-method-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mute); }
.account-method > .account-email-change, .account-method > .account-email-note { flex: 1 1 100%; margin: 0; }
.account-keys { display: grid; gap: 6px; flex: 1 1 100%; }
.account-keys:empty { display: none; }
.account-key { display: flex; align-items: center; gap: 10px; font-size: var(--fs-3); }
.account-key > span:first-child { flex: 1; }
.account-key .account-note { margin: 0; }

.legal-intro { color: var(--ink) !important; font-size: var(--fs-3) !important; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 6px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r); }
.legal-toc a { font-size: var(--fs-2); color: var(--mute) !important; }
.legal-toc a:hover { color: var(--gold) !important; }
.legal ul { color: var(--mute); line-height: 1.65; margin: 0 0 12px; padding-left: 20px; font-size: var(--fs-3); }
.legal li { margin: 4px 0; }
.legal h2 { scroll-margin-top: 60px; }
.legal-contact { margin-top: 28px !important; }
.doc-crumbs { font: var(--fs-2) var(--mono); color: var(--dim); margin: 0 0 10px; }
.doc-crumbs a { color: var(--mute) !important; }
.doc li { overflow-wrap: anywhere; }
.home-about { border-top: 1px solid var(--rule); padding: 18px var(--gutter) 6px; max-width: 76ch; }
.home-about h2 {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 10px;
}
.home-about p { color: var(--mute); font-size: var(--fs-3); line-height: 1.65; margin: 0 0 10px; }
.home-about a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); background: none; }
.btn-danger:hover { border-color: var(--bad); }

.account-premium { padding: 16px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); max-width: 560px; }
.account-premium.is-active { border-color: var(--gold); }
.account-premium > b { font: 700 var(--fs-4) var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.account-premium .account-perks { margin: 10px 0; }
.account-premium .account-note a { color: var(--gold); }
.premium-badge { --premium: var(--medal-gold); display: inline-flex; align-items: center; gap: 5px; flex: none;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--premium);
  border: 1px solid color-mix(in srgb, var(--premium) 60%, transparent); background: color-mix(in srgb, var(--premium) 12%, transparent);
  border-radius: var(--r-sm); padding: 2px 8px 2px 6px; line-height: 1.4; }
.premium-badge svg { flex: none; }
.account-who .premium-badge { margin-left: 2px; }
.gamedev-badge { --gamedev: var(--acc-violet); position: relative; display: inline-flex; align-items: center; gap: 5px; flex: none;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--gamedev);
  border: 1px solid color-mix(in srgb, var(--gamedev) 60%, transparent); background: color-mix(in srgb, var(--gamedev) 14%, transparent);
  border-radius: 999px; padding: 2px 10px 2px 7px; line-height: 1.4; cursor: default; white-space: nowrap; }
.gamedev-badge svg { flex: none; }
.gamedev-badge:not(.is-compact)::before { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 32px; transform: translateY(-50%); }
.gamedev-badge:focus-visible { outline: 2px solid var(--gamedev); outline-offset: 2px; }
.gamedev-badge[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap; padding: 4px 8px; border-radius: var(--r-sm);
  font: 600 var(--fs-1) var(--body); letter-spacing: 0; text-transform: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card);
  opacity: 0; pointer-events: none; transition: opacity 120ms; z-index: 30;
}
.gamedev-badge[data-tip]:hover::after, .gamedev-badge[data-tip]:focus-visible::after { opacity: 1; }
.gamedev-badge.is-compact { width: 22px; height: 22px; padding: 0; gap: 0; justify-content: center; }
.gamedev-badge.is-compact svg { width: 13px; height: 13px; }

.ad-anchor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; justify-content: center; align-items: center;
  padding: 6px 36px 6px; min-height: 62px; background: rgb(11 13 18 / 94%); border-top: 1px solid var(--rule);
}
@media (min-width: 760px) { .ad-anchor { min-height: 102px; } }
.ad-rail { position: fixed; top: 120px; z-index: 45; width: 300px; min-height: 600px; display: none; }
.ad-rail.is-right { right: 10px; } .ad-rail.is-left { left: 10px; }
@media (min-width: 1500px) { .ad-rail { display: block; } }
.ad-label { position: absolute; top: 3px; left: 8px; font: 600 var(--fs-1) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ad-rail .ad-label { position: static; display: block; margin-bottom: 4px; }
.ad-close { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); color: var(--mute); cursor: pointer; font-size: var(--fs-4); line-height: 1; }
.ad-close:hover { color: var(--ink); border-color: var(--mute); }

.account.is-auth { display: grid; grid-template-columns: minmax(0, 400px); gap: 28px; max-width: 860px; }
@media (min-width: 900px) {
  .account.is-auth { grid-template-columns: minmax(0, 400px) minmax(0, 300px); gap: 56px; padding-top: 44px; }
  .auth-side { border-left: 1px solid var(--rule); padding-left: 28px; margin-top: 64px; align-self: start; }
}
@media (max-width: 899px) { .auth-side { border-top: 1px solid var(--rule); padding-top: 18px; } }
.auth-main h1 { margin-bottom: 4px; }
.auth-lede { color: var(--mute); font-size: var(--fs-3); line-height: 1.55; margin: 0 0 20px; }
.auth-h2 { font: 700 var(--fs-4) var(--cond); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.auth-form { display: grid; gap: 8px; }
.auth-form input {
  width: 100%; min-width: 0; background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 10px 12px; font: var(--fs-3) var(--body);
}
.auth-form input:focus { border-color: var(--gold); }
.auth-wide, .auth-method { width: 100%; justify-content: center; min-height: 42px; }
.auth-main .account-or { max-width: none; margin: 18px 0; }
.auth-methods { display: grid; gap: 8px; }
.auth-methods .account-error { margin: 0; }
.auth-method[aria-expanded="true"] { border-color: var(--gold); }
.auth-panel { padding: 12px; margin: -2px 0 4px; background: var(--row); border: 1px solid var(--rule); border-radius: var(--r); }
.auth-panel[hidden] { display: none; }
.auth-hint { color: var(--mute); font-size: var(--fs-2); line-height: 1.5; margin: 0 0 10px; }
.auth-fine { color: var(--dim); font-size: var(--fs-2); line-height: 1.55; margin: 18px 0 0; }
.auth-fine a { color: var(--mute); text-decoration: underline; text-underline-offset: 2px; }
.auth-fine a:hover { color: var(--gold); }
.auth-side-title { font: 600 var(--fs-1) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; }
.auth-perks { margin: 0; }
.auth-perks dt { font-weight: 600; font-size: var(--fs-3); color: var(--ink); }
.auth-perks dd { margin: 2px 0 14px; color: var(--mute); font-size: var(--fs-2); line-height: 1.5; }
.account-who .btn + .btn { margin-left: 0; }

.support-cta { margin: 4px 0 8px; }
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { cursor: pointer; list-style: none; padding: 12px 28px 12px 0; position: relative; color: var(--ink); font-weight: 600; font-size: var(--fs-3); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 10px; color: var(--mute); font: var(--fs-4) var(--mono); transition: transform 160ms ease; }
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--gold); }
.faq-item summary:hover { color: var(--gold); }
.faq-item p { margin: 0 0 14px; }
.contact-form { display: grid; gap: 14px; max-width: 560px; margin-top: 18px; }
.contact-field { display: grid; gap: 6px; }
.contact-field > span { font: 600 var(--fs-1) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.contact-field small, .contact-count { color: var(--dim); font-size: var(--fs-2); }
.contact-count { justify-self: end; margin-top: -8px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; box-sizing: border-box; background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 10px 12px; font: var(--fs-3) var(--body);
}
.contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--gold); }
.contact-form .btn-primary { justify-self: start; min-width: 160px; justify-content: center; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-done { margin-top: 18px; padding: 18px; border: 1px solid var(--good); border-radius: var(--r); background: var(--panel); max-width: 560px; }
.contact-done h2 { margin-top: 0 !important; }
@media (pointer: coarse) { .contact-form input, .contact-form select, .contact-form textarea { font-size: 16px; } }

.btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.btn-google:hover { background: #f8f9fa; border-color: #c6c9cc; }

.ad-sponsor { display: block; line-height: 0; }
.ad-anchor .ad-sponsor img { max-width: min(728px, calc(100vw - 72px)); max-height: 90px; width: auto; height: auto; }
.ad-rail .ad-sponsor img { width: 300px; max-height: 600px; height: auto; object-fit: contain; }

@media (max-width: 640px) {
  .hero-badges { padding-left: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero-badges .badge { width: auto; }
  .hero-badges .badge.is-peak { grid-column: 1 / -1; }
  .player-hero > img { width: 64px; height: 64px; }
}
@media (max-width: 359px) {
  .hero-badges { grid-template-columns: minmax(0, 1fr); }
}

.psuggest { position: relative; flex: 1 1 240px; min-width: 0; }
.psuggest > input { width: 100%; box-sizing: border-box; }
.account-form .psuggest > input { flex: none; }
.psuggest-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; max-height: 300px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-2); }
.psuggest-list[hidden] { display: none; }
.psuggest-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.psuggest-row .thumb { width: 30px; height: 30px; flex: none; }
.psuggest-row[aria-selected="true"], .psuggest-row:hover { background: var(--row); }
.psuggest-row[aria-selected="true"] b { color: var(--gold); }
.psuggest-text { display: grid; min-width: 0; }
.psuggest-text b { font-weight: 600; font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psuggest-text small { color: var(--mute); font-size: var(--fs-2); }
.psuggest-empty { padding: 10px 12px; color: var(--mute); font-size: var(--fs-2); }


.mt-group {
  display: flex; gap: 9px; align-items: baseline; padding: 18px var(--gutter) 9px;
  font: 700 var(--fs-3) var(--cond); letter-spacing: 0.12em; text-transform: uppercase;
}
.mt-group i { color: var(--dim); font: normal var(--fs-1) var(--mono); }
.mt-stars { color: var(--acc-amber, var(--gold)); letter-spacing: 0.06em; }
.mt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 9px; padding: 0 var(--gutter) 8px;
}
.mt {
  display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 10px;
  min-width: 0;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-card);
  border-radius: var(--r-lg); cursor: pointer;
}
.mt:hover {
  background: var(--panel);
  box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.mt:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.mt-art { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.mt-art .thumb { width: 52px; height: 52px; }
.mt-name { font: 600 var(--fs-2) var(--body); line-height: 1.25; overflow-wrap: anywhere; }
.mt .chips { justify-content: center; flex-wrap: wrap; }
.mt-stats { flex-wrap: wrap; justify-content: center; }
.mt-stats { display: flex; gap: 12px; margin-top: 2px; }
.mt-stat { display: grid; gap: 0; }
.mt-stat b { font: 600 var(--fs-2) var(--mono); }
.mt-stat i { color: var(--dim); font: normal var(--fs-1) var(--cond);
  letter-spacing: 0.1em; text-transform: uppercase; }
.mt-fx { color: var(--dim); font: var(--fs-1) var(--mono); }
.mt-drops { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.mt-drop { width: 22px; height: 22px; }
.mt-drop-more { color: var(--dim); font: var(--fs-1) var(--mono); }
.mt-drop-names { color: var(--dim); font: var(--fs-1) var(--body); line-height: 1.3; }
@media (max-width: 560px) {
  .mt-grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 7px; padding: 0 var(--gutter) 8px; }
  .mt-art .thumb { width: 44px; height: 44px; }
  .mt-group { padding: 14px var(--gutter) 8px; }
}


.pvp-board { width: 100%; display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r); }
.pvp-board > :first-child { border-radius: var(--r) var(--r) 0 0; }
.pvp-board > :last-child { border-radius: 0 0 var(--r) var(--r); }
.pvp-board-row { position: relative; }
.pvp-board-row:has(.pvp-counters-pop:not([hidden])) { z-index: 30; }
.pvp-chance { font: 700 var(--fs-3) var(--mono); }
.pvp-chance.is-good { color: var(--good); }
.pvp-chance.is-even { color: var(--mute); }
.pvp-chance.is-bad { color: var(--bad); }
.pvp-board-head, .pvp-board-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 128px minmax(0, 1fr);
  gap: 10px; align-items: center; background: var(--bg); padding: 8px 11px;
}
.pvp-board-head { background: var(--panel); padding: 7px 11px; }
.pvp-board-head span { color: var(--dim); font: 700 var(--fs-1) var(--cond);
  letter-spacing: 0.12em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-board-row.is-guess { background: var(--faint); }
.pvp-board-theirs { display: grid; gap: 5px; min-width: 0; }
.pvp-board .pvp-slot { min-height: 56px; }
.pvp-slot.is-winner { border-color: var(--good); background: rgba(62,142,126,0.12); }
.pvp-slot.is-loser { border-color: var(--bad); background: rgba(180,84,75,0.09); }

.pvp-item { display: flex; gap: 6px 8px; align-items: baseline; min-width: 0;
  margin-top: 1px; flex-wrap: wrap; }
.pvp-item b { color: var(--acc-violet, var(--gold)); font: 600 var(--fs-1) var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pvp-item i { color: var(--dim); font: normal var(--fs-1) var(--mono); }
@media (max-width: 560px) { .pvp-item i { white-space: normal; } }
.pvp-item.is-none { color: var(--dim); font: italic var(--fs-1) var(--body); }

.pvp-counters { position: relative; }
.pvp-counters-btn { width: 100%; padding: 4px 8px; background: transparent; color: var(--mute);
  border: 1px dashed var(--rule); border-radius: var(--r); font: var(--fs-1) var(--body); cursor: pointer; }
.pvp-counters-btn:hover { color: var(--ink); border-color: var(--gold); border-style: solid; }
.pvp-counters-pop {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 3px;
  display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden;
}
.pvp-counter { display: flex; gap: 8px; align-items: center; text-align: left;
  padding: 6px 9px; background: var(--panel); border: 0; color: var(--ink); cursor: pointer; }
.pvp-counter:hover { background: var(--bg); }
.pvp-counter .thumb { width: 26px; height: 26px; flex: none; }
.pvp-counter-text { display: grid; gap: 0; min-width: 0; flex: 1; }
.pvp-counter-text b { font: 600 var(--fs-1) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-counter-text small { color: var(--dim); font: var(--fs-1) var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-counter-odds { font: 600 var(--fs-2) var(--mono); }
.pvp-counter.is-good .pvp-counter-odds { color: var(--good); }
.pvp-counter.is-even .pvp-counter-odds { color: var(--mute); }
.pvp-counter.is-bad .pvp-counter-odds { color: var(--bad); }

.pvp-outlook-actions { margin-left: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pvp-nudge-note { color: var(--dim); font: var(--fs-1) var(--mono); }
.btn.is-nudge { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 28%, transparent); }
.pvp-outlook.is-stale { opacity: 0.6; }
.pvp-benches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.pvp-benchbox { min-width: 0; }
.pvp-bench-head { display: flex; gap: 8px; align-items: baseline; margin: 0 0 6px; }
.pvp-bench-head span { color: var(--dim); font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.pvp-bench-head i { color: var(--dim); font: normal var(--fs-1) var(--mono); }
.pvp-bench-more { margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--dim); font: 600 var(--fs-1) var(--body); padding: 3px 10px; cursor: pointer; }
.pvp-bench-more:hover { color: var(--ink); border-color: var(--mute); }
.pvp-ballsearch { margin: 6px 0 8px; display: grid; gap: 6px; }
.pvp-ballsearch-input { width: 100%; max-width: 320px; box-sizing: border-box; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--rule); background: transparent; color: var(--ink); font: var(--fs-1) var(--body); }
.pvp-ballsearch-input:focus { border-color: var(--gold); }

@media (max-width: 860px) {
  .pvp-board-head { display: none; }
  .pvp-board-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 7px; }
  .pvp-board-row .pvp-verdict { grid-column: 2; text-align: left; }
  .pvp-board-row .pvp-board-theirs { grid-column: 2; }
  .pvp-benches { grid-template-columns: minmax(0, 1fr); }
}



.isel { position: relative; display: inline-flex; flex-direction: column; gap: 4px; }
.isel-label {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute);
}

.isel-button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 38px; padding: 4px 9px 4px 6px; width: 100%;
  background: var(--panel); color: var(--ink); font: inherit; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.isel-button:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.isel-button[aria-expanded="true"] { border-color: var(--gold); }
.isel-caret { color: var(--dim); font-size: var(--fs-1); line-height: 1; flex: none; }
.isel-button:hover .isel-caret, .isel-button[aria-expanded="true"] .isel-caret { color: var(--gold); }

.isel-face { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.isel-name, .tsel-name {
  color: var(--ink); font: 500 var(--fs-2) var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.isel-button .isel-name, .isel-button .tsel-name { font-weight: 600; }

.isel-list {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 70;
  min-width: 100%; width: max-content; max-width: min(320px, 86vw);
  max-height: min(340px, 60vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--gold); border-radius: var(--r);
  box-shadow: var(--shadow-2);
}
.isel.is-up .isel-list { top: auto; bottom: calc(100% + 5px); }

.isel-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--r-sm); cursor: pointer;
}
.isel-row:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.isel-row[aria-selected="true"] { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.isel-row[aria-selected="true"] .isel-name,
.isel-row[aria-selected="true"] .tsel-name { color: var(--gold); }
@media (pointer: coarse) {
  .isel-row { min-height: 40px; }
}


.tsel-face { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tsel-face .chips { display: inline-flex; flex: none; }
.tsel-none-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px var(--dim) inset;
}
.tsel { min-width: 0; }
.tsel .isel-button { min-width: 168px; }

.tsel-pair { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.tsel-pair > * { flex: 1 1 200px; min-width: 0; }
.tsel-none-dot + .tsel-name { color: var(--mute); }

.tsel-with-clear { display: flex; gap: 6px; align-items: end; flex: 1 1 210px; min-width: min(210px, 100%); }
.tsel-with-clear .isel { flex: 1; min-width: 0; }
.tsel-clear {
  flex: none; width: 34px; min-height: 38px; padding: 0; background: var(--panel);
  color: var(--mute); border: 1px solid var(--rule); border-radius: var(--r);
  font: var(--fs-3) var(--mono); cursor: pointer;
}
.tsel-clear:hover { color: var(--bad); border-color: var(--bad); }
.tl-tier-choose .tsel-clear { min-height: 32px; }

.patch-pip {
  width: 9px; height: 9px; border-radius: var(--r-sm); flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--dim) inset;
}
.isel-row[aria-selected="true"] .patch-pip { background: var(--gold); box-shadow: none; }
.patch-when { display: block; color: var(--dim); font: var(--fs-1) var(--mono); margin-top: 1px; }
.isel-button .patch-when { display: none; }
.patch-choose .isel-button { min-width: 150px; }


.bracket-choose { gap: 6px; }
.bracket-choose .isel-button { min-width: 132px; }

.leagues .info, .ladders .info, .bracket-choose .info, .tl-tier-choose .info {
  width: 14px; height: 14px; min-height: 0; padding: 0;
  border: 1px solid var(--rule); border-radius: 50%;
  background: transparent; font: italic var(--fs-1)/1 var(--mono);
  letter-spacing: 0; text-transform: none; color: var(--dim);
}
.leagues .info:hover, .ladders .info:hover,
.bracket-choose .info:hover, .tl-tier-choose .info:hover,
.leagues .info:focus-visible, .ladders .info:focus-visible,
.bracket-choose .info:focus-visible, .tl-tier-choose .info:focus-visible {
  color: var(--gold); border-color: var(--gold); background: transparent;
}

.rar-pip {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--rar); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent) inset;
}
.rar-pip.is-common    { --rar: #7C8798; }
.rar-pip.is-uncommon  { --rar: #4E9E6A; }
.rar-pip.is-rare      { --rar: #3E7FD0; }
.rar-pip.is-epic      { --rar: #9B5FD0; }
.rar-pip.is-legendary { --rar: #D9A23B; }
.rar-pip.is-mythical  { --rar: #D4585E; }
.rar-pip.is-all       { background: transparent; box-shadow: 0 0 0 1px var(--dim) inset; }

.rar-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rar-cell span:last-child { font: 600 var(--fs-1) var(--cond); letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); }


.mb { border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
.mb-controls {
  display: grid; gap: 12px; align-items: end; padding: 4px var(--gutter) 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.mb-controls .tsel-pair { display: contents; }
.mb-controls .tsel .isel-button { min-width: 0; }
.mb-answer { display: grid; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); }
.mb-band { background: var(--bg); padding: 10px var(--gutter); }
.mb-band-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 7px; }
.mb-band-head b { font: 700 var(--fs-2) var(--cond); letter-spacing: 0.1em; text-transform: uppercase; }
.mb-band-head i { color: var(--dim); font: normal var(--fs-1) var(--mono); }
.mb-band.g2 b, .mb-band.g1 b { color: var(--good); }
.mb-band.g0 b { color: var(--dim); }
.mb-band.gm1 b, .mb-band.gm2 b { color: var(--bad); }
.mb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-chip {
  display: inline-flex; gap: 6px; align-items: center; padding: 4px 9px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 999px; font: var(--fs-1) var(--body);
}
.mb-chip .chips { margin: 0; }
.mb-chip.is-item { border-color: var(--acc-violet, var(--gold)); }
.mb-chip.is-item i { color: var(--acc-violet, var(--gold)); font: normal var(--fs-1) var(--mono); }
.mb-gain { background: var(--bg); padding: 10px var(--gutter); color: var(--mute); font: var(--fs-1)/1.6 var(--body); }
.mb-full summary { padding: 12px var(--gutter); color: var(--mute); cursor: pointer;
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.mb-full summary:hover { color: var(--ink); }
.mb-note { padding: 0 var(--gutter) 10px; color: var(--dim); font: var(--fs-1)/1.5 var(--mono); }
.mb-grid td { font: 700 var(--fs-1) var(--mono); min-width: 26px; padding: 3px; }
.mb-grid th { font-size: var(--fs-1); padding: 3px 4px; }
.mb-grid th.rowhead { font-size: var(--fs-1); }
.mb-cell.g1 { color: var(--good); background: rgba(62,142,126,0.16); }
.mb-cell.g0 { color: var(--dim); }
.mb-cell.gm1 { color: var(--bad); background: rgba(180,84,75,0.16); }
.mb, .mb-full { min-width: 0; max-width: 100%; }
.mb-full .wrap { max-width: 100%; }
.mb-grid { min-width: 620px; }


.mm { border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.mm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); border-top: 1px solid var(--rule); }
.mm-col { background: var(--bg); min-width: 0; padding-bottom: 6px; }
.mm-col h4 { padding: 9px var(--gutter) 6px; color: var(--dim);
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.mm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 46px;
  gap: 10px; align-items: center; padding: 5px var(--gutter); border-top: 1px solid var(--rule); }
.mm-name { display: flex; gap: 7px; align-items: center; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2); }
.mm-row b { font: 600 var(--fs-2) var(--mono); }
.mm-row.is-good b { color: var(--good); }
.mm-row.is-bad b { color: var(--bad); }
.mm-row i { color: var(--dim); font: normal var(--fs-1) var(--mono); text-align: right; }
.mm-none, .mm-foot { padding: 10px var(--gutter); color: var(--dim); font: var(--fs-1)/1.6 var(--body); }
@media (max-width: 640px) { .mm-cols { grid-template-columns: minmax(0, 1fr); } }


.bmu-mirror, .bmu-scope { padding: 10px var(--gutter); color: var(--mute); font: var(--fs-1)/1.6 var(--body); max-width: 78ch; }
.bmu-mirror b { color: var(--ink); }


.reach {
  display: grid; gap: 1px; background: var(--rule);
  border-block: 1px solid var(--rule); margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.reach-col { background: var(--bg); padding: 11px var(--gutter) 13px; }
.reach-col h3 {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 8px;
}
.reach-col.is-good h3 { color: var(--good); }
.reach-col.is-bad h3 { color: var(--bad); }
.reach-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.reach-chips .chips { display: inline-flex; }
.typing-chart-h {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); padding: 12px var(--gutter) 8px;
}
.typing-chart-h + .reach { margin-bottom: 8px; }

.bp-list {
  display: grid; margin: 0 var(--gutter) 16px; padding: 4px 18px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0;
}
.bp-pair {
  display: grid; grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: 10px 28px; align-items: start; padding: 14px 0; min-width: 0;
}
.bp-pair + .bp-pair { border-top: 1px solid var(--rule); }
.bp-head { display: grid; gap: 2px; align-content: start; justify-items: start; min-width: 0; }
.bp-typing { display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  color: var(--ink); text-decoration: none; font: 600 var(--fs-3) var(--body); }
.bp-typing:hover .bp-name { color: var(--gold); }
.bp-wr { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--fs-1); }
.bp-wr-k { color: var(--mute); }
.bp-wr b { font: 600 var(--fs-3) var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.bp-wr.is-thin b { font: 500 var(--fs-2) var(--body); color: var(--mute); }
.bp-cov { display: grid; gap: 4px; margin: 0; align-content: start; min-width: 0; }
.bp-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 32px; }
.bp-k { font: 700 var(--fs-1)/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.bp-row.is-good .bp-k { color: var(--good); }
.bp-row.is-bad .bp-k { color: var(--bad); }
.bp-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0; }
.bp-chips .chips { display: inline-flex; gap: 4px; }
.bp-chips .chip, .bp-item .chip { font-size: 0; gap: 0; padding: 3px 4px; }
.bp-items { display: grid; gap: 2px; align-content: start; min-width: 0; }
.bp-item-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-width: 0; }
.bp-item { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; min-width: 0; max-width: 100%;
  color: var(--ink); text-decoration: none; font-size: var(--fs-3); }
.bp-item:hover .bp-item-name { color: var(--gold); }
.bp-item .thumb { width: 28px; height: 28px; flex: none; }
.bp-alt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.bp-or { font-size: var(--fs-1); color: var(--mute); }
.bp-item.is-alt { gap: 6px; font-size: var(--fs-2); color: var(--mute); }
.bp-item.is-alt .thumb { width: 22px; height: 22px; }
.bp-item.is-alt .bp-item-name { font-weight: 500; }
.bp-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bp-tier { font: 600 var(--fs-1) var(--mono); padding: 1px 5px; border-radius: var(--r-sm);
  background: var(--pill-on); color: var(--ink); flex: none; }
.bp-item .chips { flex: none; }
@media (max-width: 760px) {
  .bp-list { padding: 2px 14px; }
  .bp-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; }
  .bp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
  .bp-row { grid-template-columns: 96px minmax(0, 1fr); }
  .bp-items { gap: 6px; }
  .bp-item-line { display: grid; gap: 0; }
  .bp-alt { padding-left: 36px; }
}

.pair-balls { display: flex; flex-wrap: wrap; gap: 5px; }
.pair-ball {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 4px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--row); color: var(--ink); font: 500 var(--fs-2) var(--body);
  cursor: pointer; transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.pair-ball:hover { border-color: var(--gold); transform: translateY(-1px); }
.pair-ball > img { border-radius: 50%; }


.roster-filters {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  padding: 10px var(--gutter) 14px;
}
.roster-filters .isel-button { min-width: 126px; }

@media (max-width: 640px) {
  .roster-filters { gap: 8px 12px; padding: 10px 14px 12px; }
  .roster-filters .tl-tier-choose { flex: 1 1 140px; }
  .roster-filters .isel { flex: 1; min-width: 0; }
  .roster-filters .isel-button { min-width: 0; width: 100%; }
}


.early-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px var(--gutter) 16px; }
.early-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--row); color: var(--ink); cursor: pointer;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.early-badge:hover { border-color: var(--gold); transform: translateY(-1px); }
.early-badge img { width: 28px; height: 28px; border-radius: 50%; }
.early-text { display: flex; align-items: baseline; gap: 7px; }
.early-badge b { font: 600 var(--fs-2) var(--body); }
.early-place {
  font: 700 var(--fs-1) var(--mono); letter-spacing: .04em; color: var(--dim);
}
.early-badge.is-1 { border-color: var(--medal-gold); }
.early-badge.is-1 .early-place { color: var(--medal-gold); }
.early-badge.is-2 { border-color: var(--medal-silver); }
.early-badge.is-2 .early-place { color: var(--medal-silver); }
.early-badge.is-3 { border-color: var(--medal-bronze); }
.early-badge.is-3 .early-place { color: var(--medal-bronze); }

@media (max-width: 640px) { .early-strip { padding: 4px 14px 14px; } }



.battle-row.is-expandable { cursor: pointer; }
.battle-row.is-expandable:hover td { background: var(--lift); }
.battle-row.is-expandable:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.battle-row.is-open td { background: var(--hairline-2); }
.duel-row > td.duel-cell { padding: 0; border-top: 0; background: var(--row); white-space: normal; }
.duel-panel {
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, var(--hairline-2), transparent 60%);
}
.duel-panel.is-loading .duel-note, .duel-panel.is-unavailable .duel-note { color: var(--mute); margin: 0; }
.duel-panel.is-error .duel-note { color: var(--bad); margin: 0; }
.duel-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.duel-score {
  display: flex; align-items: baseline; gap: 6px;
  font: 700 var(--fs-5) / 1 var(--cond); color: var(--mute); font-variant-numeric: tabular-nums;
}
.duel-score .is-winner { color: var(--good); }
.duel-score-dash { color: var(--dim); font-weight: 400; }
.duel-words { display: grid; gap: 4px; min-width: 0; }
.duel-ending { margin: 0; font: 500 var(--fs-3) var(--body); color: var(--ink); }
.duel-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-2); color: var(--mute); }
.duel-rounds { font-family: var(--mono); font-size: var(--fs-1); }
.duel-arena { display: inline-flex; align-items: center; gap: 6px; }
.duel-arena-name { color: var(--ink); }
.duel-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.duel-side {
  border: 1px solid var(--rule); border-radius: var(--r); padding: 10px 12px;
  background: var(--panel); box-shadow: var(--shadow-card);
}
.duel-side.is-winner { border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); }
.duel-side-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.duel-side-name { font: 600 var(--fs-3) var(--body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.duel-side-role { font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.1em; color: var(--mute); }
.duel-side-result { margin-left: auto; font: 600 var(--fs-1) var(--mono); }
.duel-side-result.w { color: var(--good); }
.duel-side-result.l { color: var(--bad); }
.duel-balls { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.duel-ball { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
.duel-ball-art .thumb { width: 36px; height: 36px; object-fit: contain; }
.duel-ball.is-ko .duel-ball-art { filter: grayscale(1); opacity: .55; }
.duel-ball-body { display: grid; gap: 4px; min-width: 0; }
.duel-ball-top, .duel-ball-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.duel-ball-name { font-size: var(--fs-2); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.duel-ball-status { font: 600 var(--fs-1) var(--mono); }
.duel-ball-status.is-survived { color: var(--good); }
.duel-ball-status.is-ko { color: var(--bad); }
.duel-hp { height: 6px; border-radius: var(--r-sm); background: var(--hairline-2); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.duel-hp-fill {
  height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 75%, var(--gold)), var(--good));
}
.duel-hp-fill.is-low { background: linear-gradient(90deg, var(--bad), color-mix(in srgb, var(--bad) 60%, var(--acc-amber))); }
.duel-hp-fill.is-filled { width: var(--hp, 0%); }
@media (prefers-reduced-motion: no-preference) {
  .duel-hp-fill { transition: width 700ms cubic-bezier(.2, .8, .2, 1); }
}
.duel-hp-text, .duel-charges { font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); }
.duel-charges { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 560px) {
  .duel-panel { padding: 12px 10px 14px; }
  .duel-score { font-size: var(--fs-4); }
}

.profile-refresh { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-refresh-btn { background: transparent; cursor: pointer; }
.profile-refresh-btn:disabled { cursor: progress; opacity: .7; }
.profile-refresh-status { font-size: var(--fs-2); color: var(--mute); }
.profile-refresh-status.is-error { color: var(--bad); }
@media (max-width: 560px) {
  .battle-row td.support .cell-sub { display: none; }
  .battle-row td.left > a.plain {
    display: block; max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

.ladder-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border: 1px solid var(--rule); border-radius: 999px;
  font: 600 var(--fs-1) var(--cond); letter-spacing: .07em; text-transform: uppercase;
  color: var(--mute); white-space: nowrap;
}
.ladder-chip.is-open { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.ladder-chip.is-common,   .ladder-chip.is-uncommon,
.ladder-chip.is-rare,     .ladder-chip.is-epic,
.ladder-chip.is-rarity    { color: var(--ink); }


#view > :not(.note, .section-title, .empty, .group-title) + .section-title,
#view > :not(.note, .empty) + .first-owners {
  margin-top: 20px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.first-owners > .section-title { padding-top: 0; border-top: 0; margin-top: 0; }

#view > :not(.note, .empty) + .group-title { padding-top: 26px; }

#view > .wrap + .note { padding-top: 10px; }


.div-crest.is-merged {
  display: flex; width: 46px; height: 38px; overflow: hidden; padding: 0;
}
.crest-slice {
  position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden;
}
.crest-slice + .crest-slice { border-left: 1px solid color-mix(in srgb, var(--bg) 70%, transparent); }
.crest-slice img {
  position: absolute; top: 0; height: 100%; max-width: none;
  object-fit: contain; display: block;
}

.crest-none { display: block; width: 46px; height: 38px; flex-shrink: 0; }




.fx-modes { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.fx-modes button {
  background: transparent; border: 0; color: var(--mute); cursor: pointer;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px; transition: background .14s var(--ease), color .14s var(--ease);
}
.fx-modes button + button { border-left: 1px solid var(--rule); }
.fx-modes button:hover { color: var(--ink); }
.fx-modes button[aria-pressed="true"] { background: var(--gold); color: var(--bg); }

.fx-grid {
  display: grid; gap: 1px; background: var(--rule);
  border-bottom: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.fx-grid[hidden], .fx[hidden] { display: none; }
.fx-tile {
  background: var(--bg); padding: 13px 16px 15px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background .16s var(--ease);
}
.fx-tile[hidden] { display: none; }
.fx-tile:hover { background: var(--row); }
.fx-tile-head { display: flex; align-items: center; gap: 10px; }
.fx-tile-head .fx-icon { width: 30px; height: 30px; border-radius: var(--r); flex: none; }
.fx-tile-head h2 { font: 600 var(--fs-3) var(--body); color: var(--ink); }
.fx-tile-desc { margin: 0; color: var(--mute); font-size: var(--fs-2); line-height: 1.5; }
.fx-tile-mymics {
  display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: auto;
  padding-top: 8px; border-top: 1px solid var(--rule);
}
.fx-tile-mymics .fx-mymic { font-size: var(--fs-2); }
.fx-tile-mymics .thumb { width: 20px; height: 20px; border-radius: var(--r-sm); }

@media (max-width: 760px) {
  .fx-modes { order: 3; }
}


.themer {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  margin-right: 4px; padding: 0; background: transparent; color: var(--mute);
  border: 1px solid var(--rule); border-radius: 50%; cursor: pointer;
  transition: color .14s var(--ease), border-color .14s var(--ease), transform .18s var(--ease);
}
.themer:hover, .themer:focus-visible { color: var(--gold); border-color: var(--gold); }
.themer:hover { transform: rotate(-18deg); }
.themer svg { display: block; }

@media (max-width: 640px) { .themer { width: 30px; height: 30px; margin-right: 2px; } }


.theme-choice { border: 0; padding: 0 var(--gutter) 8px; display: grid; gap: 8px; max-width: 460px; }
.theme-choice legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.theme-seg {
  display: inline-grid; grid-template-columns: repeat(3, auto); justify-self: start;
  gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
}
.theme-option {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-sm); cursor: pointer;
  font: 600 var(--fs-3) var(--body); color: var(--mute);
  transition: color .14s var(--ease), background .14s var(--ease);
}
.theme-option:hover { color: var(--ink); }
.theme-option.is-on { color: var(--ink); background: var(--pill-on); box-shadow: inset 0 0 0 1px var(--gold); }
.theme-option.is-on .theme-icon { color: var(--gold); }
.theme-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-icon { display: inline-flex; flex: none; }
.theme-icon svg { display: block; }
.theme-note { font-size: var(--fs-2); color: var(--mute); line-height: 1.45; }

.auth-appearance { margin-top: 26px; border-top: 1px solid var(--rule); padding-top: 4px; }
.auth-appearance .theme-choice { padding-inline: 0; }
.auth-appearance .section-title { padding-inline: 0; }


.dv-curve {
  display: grid; gap: 1px; background: var(--rule);
  border-block: 1px solid var(--rule); margin-bottom: 4px;
}
.dv-curve-row {
  display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 68px 52px;
  gap: 12px; align-items: center; padding: 7px var(--gutter); background: var(--bg);
}
.dv-curve-row:hover { background: var(--row); }
.dv-curve-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dv-curve-name > span { font: 600 var(--fs-2) var(--body); white-space: nowrap; }
.dv-curve-name .div-crest { width: 30px; height: 25px; }
.dv-bar { display: block; height: 9px; background: var(--row); border-radius: 999px; overflow: hidden; }
.dv-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 60%, transparent), var(--gold));
}
.dv-curve-n { font: 600 var(--fs-2) var(--mono); text-align: right; }
.dv-curve-share { font: normal var(--fs-1) var(--mono); color: var(--dim); text-align: right; }

.dv-grid {
  display: grid; gap: 1px; background: var(--rule);
  border-block: 1px solid var(--rule);
}
.dv-block { background: var(--bg); padding: 13px var(--gutter) 15px; display: grid; gap: 9px; }
.dv-block:hover { background: var(--row); }
.dv-head { display: flex; align-items: center; gap: 10px; }
.dv-head .div-crest { width: 34px; height: 28px; }
.dv-head-text { display: grid; gap: 1px; }
.dv-head-text h3 {
  font: 700 var(--fs-2) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.dv-head-text span { font: var(--fs-1) var(--mono); color: var(--dim); }

.dv-line { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: start; }
.dv-label {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); padding-top: 5px;
}
.dv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-none { color: var(--dim); font: var(--fs-1) var(--mono); }
.dv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 5px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--panel); color: var(--ink); font: 500 var(--fs-2) var(--body);
}
.dv-chip.is-art { cursor: pointer; }
.dv-chip.is-art:hover { border-color: var(--gold); }
.dv-chip .thumb { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.dv-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.dv-chip b { font: 600 var(--fs-1) var(--mono); color: var(--mute); }

.dv-gear-wrap { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.dv-gear {
  display: flex; height: 16px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--rule); background: var(--panel);
}
.dv-gear-seg {
  display: flex; align-items: center; justify-content: center; min-width: 2px;
  font: 600 var(--fs-1) var(--mono); color: var(--bg);
}
.dv-gear-seg.is-p4 { background: var(--gold); }
.dv-gear-seg.is-lesser { background: var(--mute); }
.dv-gear-seg.is-bare { background: var(--rule); color: var(--mute); }
.dv-gear-key { font: var(--fs-1) var(--mono); color: var(--dim); }

@media (max-width: 640px) {
  .dv-curve-row { grid-template-columns: minmax(90px, 1fr) minmax(0, 1.4fr) 56px; padding: 7px 14px; }
  .dv-curve-share { display: none; }
  .dv-line { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dv-label { padding-top: 0; }
  .dv-block { padding: 12px 14px 14px; }
}

.chg-note select { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1px 4px; }
.chg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.chg-col { background: var(--bg); padding: 12px var(--gutter) 14px; min-width: 0; }
.chg-col-title { font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px; }
.chg-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: var(--fs-2); table-layout: fixed; }
.chg-table th { cursor: default; font: 600 var(--fs-1) var(--mono); color: var(--dim); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--rule); }
.chg-table td { padding: 5px 6px; border-bottom: 1px solid var(--hairline); }
.chg-table .num { width: 62px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg-table tr.is-link { cursor: pointer; }
.chg-table tr.is-link:hover, .chg-table tr.is-link:focus-visible { background: var(--row); }
.chg-col-name { overflow: hidden; }
.chg-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.chg-name > .chips { flex: none; }
.chg-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chg-name .thumb { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.chg-delta { font-weight: 600; }
.chg-delta.is-up { color: var(--good); }
.chg-delta.is-down { color: var(--bad); }
.chg-none { color: var(--dim); font: var(--fs-2) var(--mono); margin: 6px 0; }
.chg-shifts { display: grid; gap: 8px; padding: 12px var(--gutter) 4px; }
.chg-chip > .chg-name { gap: 5px; max-width: none; overflow: visible; }
.chg-chip .chg-name > span:last-child { max-width: 150px; }
.chg-chip .chg-name .thumb { width: 22px; height: 22px; }
@media (max-width: 760px) {
  .chg-grid { grid-template-columns: minmax(0, 1fr); }
  .chg-col, .chg-shifts { padding-left: var(--gutter); padding-right: var(--gutter); }
  .chg-table .num { width: 54px; }
}

.pvp-item-art { width: 18px; height: 18px; border-radius: var(--r-sm); flex: none; }

.war-room { display: grid; gap: 16px; padding: 18px 0 30px; }

.war-head { display: grid; gap: 10px; justify-items: center; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.war-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 14px; width: 100%; max-width: 560px; }
.war-side { display: grid; gap: 2px; justify-items: center; min-width: 0; text-align: center; }
.war-side-name { font: 600 var(--fs-2) var(--body); color: var(--mute); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.war-banners { font: 700 var(--fs-5) var(--mono); color: var(--ink); }
.war-banners.is-masked { color: var(--dim); }
.war-history { display: flex; gap: 8px; align-items: center; font: var(--fs-2) var(--body); color: var(--mute); }
.war-history select { background: var(--bg); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 4px 8px; font: var(--fs-2) var(--body); max-width: 260px; }

.war-detail { display: grid; gap: 10px; }

.war-field { display: grid; gap: 4px; font: var(--fs-2) var(--body); color: var(--mute); min-width: 0; }


a.war-side-name { color: var(--mute); text-decoration: none; }
a.war-side-name:hover { color: var(--ink); text-decoration: underline; }


@media (max-width: 480px) {
  .war-banners { font-size: var(--fs-5); }
}

.cmp .cmp-list { display: grid; gap: 14px; padding: 14px; }
.cmp-row { display: grid; gap: 5px; }
.cmp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cmp-label { color: var(--mute); font-size: var(--fs-2); }
.cmp-you { font-variant-numeric: tabular-nums; font-size: var(--fs-4); }
.cmp-track { height: 7px; border-radius: var(--r-sm); background: var(--line); overflow: hidden; }
.cmp-fill { height: 100%; border-radius: var(--r-sm); transition: width .5s cubic-bezier(.2,.7,.3,1); }
.cmp-fill.is-high { background: var(--good); }
.cmp-fill.is-mid { background: var(--accent); }
.cmp-fill.is-low { background: var(--warn, var(--accent)); opacity: .8; }
.cmp-fill.is-bottom { background: var(--mute); }
.cmp-foot { display: flex; justify-content: space-between; gap: 10px;
  color: var(--dim); font-size: var(--fs-2); }
.cmp-foot i { font-style: normal; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .cmp-foot { flex-direction: column; gap: 2px; }
}

.pvp-saved { margin: 0 0 18px; }
.pvp-saved h3 { margin: 0 0 8px; font-size: var(--fs-2); letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); font-weight: 600; }
.pvp-saved-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pvp-saved-chip { display: flex; align-items: stretch;
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.pvp-saved-open { background: none; border: 0; color: var(--ink); cursor: pointer;
  font: inherit; font-size: var(--fs-2); padding: 7px 10px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-saved-open:hover, .pvp-saved-open:focus-visible { color: var(--gold); background: var(--row); }
.pvp-saved-drop { background: none; border: 0; border-left: 1px solid var(--hairline);
  color: var(--dim); cursor: pointer; font: inherit; padding: 0 9px; }
.pvp-saved-drop:hover, .pvp-saved-drop:focus-visible { color: var(--bad); background: var(--row); }
.pvp-save { margin-top: 18px; }
@media (pointer: coarse) {
  .pvp-saved-open, .pvp-saved-drop { min-height: 38px; }
}

.rh-who { position: relative; }
.rh-who-btn {
  display: flex; align-items: center; gap: 6px; max-width: 160px;
  background: none; border: 1px solid var(--hairline); border-radius: 999px;
  color: var(--ink); cursor: pointer; font: inherit; font-size: var(--fs-2); padding: 3px 10px 3px 3px;
}
.rh-who-btn:hover, .rh-who-btn:focus-visible { border-color: var(--rule); background: var(--row); }
.rh-who-btn .thumb { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.rh-who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rh-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  min-width: 210px; max-width: min(280px, 82vw);
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--bg); box-shadow: var(--shadow-1);
}
.rh-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rh-pop-head .thumb { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.rh-pop-head b { display: block; font-size: var(--fs-2); }
.rh-pop-head small { color: var(--dim); font-size: var(--fs-1); }
.rh-pop-lines { display: grid; gap: 3px; }
.rh-pop-line { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-2); }
.rh-pop-line span { color: var(--mute); }
.rh-pop-line b { font-variant-numeric: tabular-nums; }
.rh-pop-items { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); display: grid; gap: 5px; }
.rh-pop-item { display: flex; align-items: center; gap: 7px; font-size: var(--fs-2); }
.rh-pop-item .thumb { width: 20px; height: 20px; flex: none; }
.rh-pop-item i { color: var(--dim); font-style: normal; margin-left: auto; }
.rh-pop-none { margin: 0; color: var(--dim); font-size: var(--fs-1); line-height: 1.5; }
.rh-more { margin-top: 14px; }

@media (pointer: coarse) {
  .rh-who-btn { min-height: 34px; }
}

.rowlink { color: inherit; text-decoration: none; }
tr.clickable:hover .rowlink { color: var(--gold); }
.rowlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); }

.spread { display: flex; flex-wrap: wrap; gap: 26px; padding: 4px var(--gutter) 14px; }
.spread-cell { display: grid; gap: 2px; }
.spread-cell b { font-size: var(--fs-5); font-variant-numeric: tabular-nums; line-height: 1.15; }
.spread-cell span { font-size: var(--fs-2); color: var(--mute); }
.spread-bar {
  display: flex; height: 10px; margin: 0 var(--gutter) 18px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--line); gap: 1px;
}
.spread-seg { background: var(--rule); min-width: 1px; }
.spread-seg.is-top { background: var(--accent); }
@media (max-width: 560px) {
  .spread { gap: 18px; }
  .spread-cell b { font-size: var(--fs-4); }
}

.matchup { display: grid; gap: 12px; padding: 12px var(--gutter) 20px; }
.matchup .lede { margin: 0; }

.mu-pickers { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .mu-pickers { grid-template-columns: 1fr; } }
.mu-pick { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 8px 10px; }
.mu-pick-h { font: 700 var(--fs-2) var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
             color: var(--mute); margin-bottom: 6px; }
.mu-pick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mu-select { flex: 1 1 130px; background: var(--row); color: var(--ink);
             border: 1px solid var(--rule); border-radius: var(--r); padding: 5px 7px; font-size: var(--fs-2); }

.mu-attack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px; }
.mu-attack-label { font: 700 var(--fs-1) var(--cond); text-transform: uppercase;
                   letter-spacing: 0.06em; color: var(--dim); }
.mu-radio { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2); color: var(--mute); }
.mu-note { color: var(--dim); font-size: var(--fs-1); line-height: 1.45; margin-top: 4px; }
.mu-clear { justify-self: start; }

.mu-pair { display: grid; gap: 8px; }
.mu-pair-head .chip { font-size: var(--fs-2); padding: 4px 9px 4px 4px; }
.mu-pair-head .chip img { width: 19px; height: 19px; }
.mu-pair-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                background: var(--panel); border: 1px solid var(--rule);
                border-radius: var(--r); padding: 8px 10px; }
.mu-vs { font: 700 var(--fs-2) var(--cond); text-transform: uppercase; color: var(--dim); }
.mu-pair-verdict { margin-left: auto; font: 700 var(--fs-3) var(--cond); text-transform: uppercase;
                   letter-spacing: 0.04em; color: var(--ink); }

.mu-dirs { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .mu-dirs { grid-template-columns: 1fr; } }
.mu-dir { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 8px 10px; }
.mu-dir-h { font: 700 var(--fs-2) var(--cond); text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--mute); margin-bottom: 6px; }

.mu-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mu-net { font: 700 var(--fs-5) var(--mono); }
.mu-avg { color: var(--mute); border-bottom: 2px dashed var(--dim); }
.mu-mult { font: 600 var(--fs-3) var(--mono); color: var(--mute); }
.mu-verdict { font-size: var(--fs-2); color: var(--dim); }
.mu-with { font-size: var(--fs-2); color: var(--mute); margin-top: 6px; }

.mu-parts-h { font: 700 var(--fs-1) var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
              color: var(--dim); margin-top: 8px; }
.mu-parts { list-style: none; margin-top: 4px; display: grid; gap: 3px; }
.mu-parts li { display: flex; justify-content: space-between; gap: 10px;
               background: var(--row); border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--fs-2); }
.mu-part-v { font-family: var(--mono); font-weight: 700; }
.mu-range, .mu-gear { font-size: var(--fs-1); color: var(--dim); margin-top: 8px; line-height: 1.5; }
.mu-warn { font-size: var(--fs-2); color: var(--mute); background: var(--row);
           border: 1px solid var(--rule); border-radius: var(--r); padding: 6px 10px; line-height: 1.45; }

.mu-link { display: inline-flex; align-items: center; gap: 6px; background: var(--row);
           border: 1px solid var(--rule); border-radius: var(--r); padding: 3px 8px 3px 4px;
           color: var(--ink); cursor: pointer; transition: transform 90ms ease, border-color 90ms ease; }
.mu-link .chip { font-size: var(--fs-1); padding: 3px 7px 3px 4px; }
.mu-link .chip img { width: 17px; height: 17px; }
.mu-link:hover, .mu-link:focus-visible { border-color: var(--gold); transform: translateY(-1px); outline: none; }
.mu-io { font: var(--fs-1) var(--mono); color: var(--dim); white-space: nowrap; }
.mu-good { color: var(--good); }
.mu-bad  { color: var(--bad); }
.mu-even { color: var(--mute); }
.mu-part-t { color: var(--mute); }

.ty { gap: 14px; }
.ty-pickbox { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--rule);
              border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-card); }
.ty-pick-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ty-h { font: 700 var(--fs-4) var(--cond); text-transform: uppercase; letter-spacing: 0.04em;
        display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ty-clear { flex: none; }
.ty-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
@media (max-width: 420px) {
  .ty-pickbox { padding: 10px; }
  .ty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
}
.ty-pick { display: flex; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
           border-radius: var(--r); -webkit-tap-highlight-color: transparent; }
.ty-pick .ty-chip { flex: 1; min-width: 0; justify-content: flex-start; gap: 7px; padding: 6px 8px;
                    border-radius: var(--r); font-size: var(--fs-3); letter-spacing: 0; text-transform: none;
                    opacity: 0.78; transition: opacity 120ms ease, transform 120ms ease, box-shadow 120ms ease; }
.ty-pick .ty-chip img { width: 22px; height: 22px; flex: none; }
:root[data-theme="light"] .ty-pick .ty-chip { opacity: 0.86; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ty-pick .ty-chip { opacity: 0.86; }
}
.ty-pick:hover .ty-chip, .ty-pick:focus-visible .ty-chip { opacity: 1; }
.ty-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ty-pick.is-on .ty-chip { opacity: 1; font-weight: 800;
  box-shadow: 0 0 0 2px var(--gold), 0 4px 14px -6px color-mix(in srgb, var(--c, #555) 80%, transparent); }
.ty-name { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) {
  .ty-pick .ty-chip { font-size: var(--fs-2); gap: 5px; padding: 6px 5px; }
  .ty-pick .ty-chip img { width: 18px; height: 18px; }
}
@media (max-width: 359px) {
  .ty-pick .ty-chip { flex-direction: column; justify-content: center; gap: 3px; padding: 6px 4px; }
}

.ty-roll { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ty-roll-label { font: 700 var(--fs-1) var(--cond); text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.ty-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.ty-seg-b { background: var(--row); color: var(--mute); border: 0; padding: 7px 12px; min-height: 36px;
            font: 600 var(--fs-2) var(--body); cursor: pointer; }
.ty-seg-b + .ty-seg-b { border-left: 1px solid var(--rule); }
.ty-seg-b.is-on { background: var(--pill-on, var(--panel)); color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }

.ty-answer-slot { display: grid; gap: 10px; }
.ty-answer { display: grid; gap: 8px; }
.ty-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ty-card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg);
           padding: 10px 12px; display: grid; gap: 8px; align-content: start; }
.ty-card-h { font: 700 var(--fs-2) var(--cond); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); margin: 0; }
.ty-with { font: 700 var(--fs-1) var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
           color: var(--dim); margin: 4px 0 -2px; }
.ty-row { display: grid; gap: 5px; }
.ty-row-label { font: 700 var(--fs-2) var(--body); }
.ty-row.is-good .ty-row-label { color: var(--good); }
.ty-row.is-bad .ty-row-label { color: var(--bad); }
.ty-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ty-chips .ty-chip { font-size: var(--fs-1); padding: 3px 7px 3px 4px; border-radius: var(--r-sm); }
.ty-chips .ty-chip img { width: 17px; height: 17px; }
.ty-chip.is-double { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #555) 90%, var(--chip-base)); font-weight: 800; }
.ty-x2 { font: 800 var(--fs-1) var(--mono); margin-left: 2px; padding: 0 4px; border-radius: var(--r-sm);
         background: color-mix(in srgb, var(--ink) 16%, transparent); letter-spacing: 0; }
.ty-none { color: var(--dim); font-size: var(--fs-2); }
.ty-scale { margin: 0; color: var(--dim); font-size: var(--fs-1); line-height: 1.5; max-width: 78ch; }
.ty-empty { color: var(--dim); font-size: var(--fs-2); margin: 0; }

.ty-full, .ty-more { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.ty-summary { cursor: pointer; padding: 10px 12px; min-height: 44px; display: flex; align-items: center;
              font: 700 var(--fs-2) var(--cond); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); }
.ty-summary:hover { color: var(--ink); }
.ty-more > :not(summary) { margin: 0 12px 12px; }
.ty-full-body { padding: 0 12px 12px; display: grid; gap: 8px; }
.ty-legend, .ty-cell-line { margin: 0; font-size: var(--fs-1); color: var(--dim); }
.ty-cell-line { color: var(--ink); font-size: var(--fs-2); min-height: 1.5em; }
.ty-table-wrap { overflow: auto; max-height: min(72vh, 640px); border: 1px solid var(--rule);
                 border-radius: var(--r); overscroll-behavior: contain; }
.ty-table { border-collapse: separate; border-spacing: 0; font-size: var(--fs-1); }
.ty-table th, .ty-table td { padding: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ty-table thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 4px 2px; }
.ty-table .ty-rowh { position: sticky; left: 0; z-index: 1; background: var(--panel); padding: 2px 6px 2px 4px; text-align: left; }
.ty-table .ty-corner { left: 0; z-index: 3; color: var(--dim); font: 600 var(--fs-1) var(--body);
                       white-space: nowrap; padding: 4px 6px; text-align: left; }
.ty-icon { padding: 2px 4px 2px 2px; font-size: var(--fs-1); }
.ty-icon img { width: 16px; height: 16px; }
.ty-col .ty-abbr { display: none; }
.ty-col .ty-icon { padding: 3px; }
.ty-col.is-mine { box-shadow: inset 0 -2px 0 var(--gold); }
.is-mine > .ty-rowh { color: var(--gold); }
.ty-cell-b { width: 30px; height: 30px; display: block; border: 0; background: none; cursor: pointer;
             font: 800 var(--fs-3) var(--mono); color: var(--ink); }
.ty-cell.is-good { background: color-mix(in srgb, var(--good) 38%, transparent); }
.ty-cell.is-bad { background: color-mix(in srgb, var(--bad) 34%, transparent); }
.ty-table tr.is-mine .ty-cell { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--gold) 7%, transparent); }
.ty-cell-b:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

@media (prefers-reduced-motion: no-preference) {
  .ty-pick:active .ty-chip { transform: scale(0.96); }
  .ty-answer .ty-chip { animation: ty-in 220ms ease both; }
  .ty-full-body { animation: ty-in 200ms ease both; }
}
@keyframes ty-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.ty-with-item { color: var(--gold); }
.ty-items { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ty-item { display: grid; gap: 6px; align-content: start; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 10px 12px; }
.ty-item-label, .ty-num-label { font: 700 var(--fs-1) var(--cond); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--dim); }
.ty-item-add { justify-self: start; min-height: 36px; }
.ty-item-card, .ty-item-opt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ty-item-art { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: var(--r-sm);
  background: var(--row); }
.ty-item-words { display: grid; gap: 1px; min-width: 0; flex: 1; text-align: left; }
.ty-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ty-item-stats { color: var(--mute); font-size: var(--fs-1); }
.ty-item-rm { flex: none; }
.ty-item-search { display: grid; gap: 6px; }
.ty-item-search[hidden] { display: none; }
.ty-item-q { width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 10px; background: var(--row);
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r); font: inherit; }
.ty-item-list { display: grid; gap: 4px; max-height: 300px; overflow: auto; }
.ty-item-opt { background: var(--row); border: 1px solid transparent; border-radius: var(--r); padding: 5px 8px;
  cursor: pointer; color: var(--ink); font: inherit; min-height: 44px; }
.ty-item-opt:hover, .ty-item-opt:focus-visible { border-color: var(--gold); }
.ty-item-opt .ty-item-art { width: 32px; height: 32px; }
.ty-numbers { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 12px; }
.ty-numbers-top { display: flex; align-items: center; gap: 8px; }
.ty-rules { flex: none; font: 700 var(--fs-1) var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--dim); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0 5px; }
.ty-num-controls { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ty-num-field { display: grid; gap: 4px; }
.ty-num-field .mu-select { width: 100%; min-height: 38px; }
.ty-num-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ty-num-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 9px; background: var(--row); border-radius: var(--r); font-size: var(--fs-2); }
.ty-num-text { min-width: 0; font-variant-numeric: tabular-nums; }
.ty-num-vs, .ty-num-vs2, .ty-num-at, .ty-num-dt { min-width: 0; }

.btn-tiny { padding: 2px 7px; font-size: var(--fs-1); }

.rh-rewards { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; min-width: 0; }
.rh-rewards .rh-pop-lines,
.rh-rewards .rh-pop-items { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rh-rewards .rh-pop-line { gap: 4px; font-size: var(--fs-1); }
.rh-rewards .rh-pop-item { gap: 5px; min-width: 0; font-size: var(--fs-1); }
.rh-rewards .rh-pop-item span { overflow-wrap: anywhere; }
.rh-rewards .rh-pop-item i { margin-left: 0; }
.rh-rewards .rh-pop-none { white-space: nowrap; }
td .item-stats { display: block; margin-left: 0; }

.roll { display: inline-flex; align-items: center; gap: 3px; }
.tl-roll .chips { gap: 2px; }

.mu-item { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.mu-item-label { font: 700 var(--fs-1) var(--cond); text-transform: uppercase;
                 letter-spacing: 0.06em; color: var(--dim); }
.mu-item-type { flex: 0 1 120px; }
.mu-item-pick { flex: 1 1 180px; }

.pvp-manual { border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel);
              padding: 10px 12px; margin-top: 12px; }
.pvp-manual summary { cursor: pointer; font: 700 var(--fs-2) var(--cond); text-transform: uppercase;
                      letter-spacing: 0.06em; color: var(--mute); }
.pvp-manual summary:hover { color: var(--ink); }
.pvp-manual-body { margin-top: 10px; }
.pvp-manual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pvp-manual-field { display: grid; gap: 3px; font: var(--fs-1) var(--body); color: var(--dim); }
.pvp-manual-field select { background: var(--row); color: var(--ink); border: 1px solid var(--rule);
                           border-radius: var(--r); padding: 5px 7px; font-size: var(--fs-2); }
.pvp-manual-out { margin-top: 10px; display: grid; gap: 4px; }
.pvp-manual-verdict { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pvp-manual-verdict b { font: 700 var(--fs-3) var(--cond); text-transform: uppercase; }
.pvp-manual-verdict b.is-good { color: var(--good); }
.pvp-manual-verdict b.is-bad { color: var(--bad); }
@media (max-width: 560px) { .pvp-manual-grid { grid-template-columns: minmax(0, 1fr); } }


.tl-roll { display: inline-flex; gap: 2px; margin-top: 1px; }
.tl-roll .chip { font-size: var(--fs-1); padding: 1px 4px 1px 2px; }
.tl-roll .chip img { width: 12px; height: 12px; }

.chrome-fresh { margin-left: auto; display: inline-flex; align-items: baseline; gap: 5px;
                font: var(--fs-1) var(--mono); color: var(--dim); white-space: nowrap; }
.chrome-fresh-label { font-family: var(--body); text-transform: none; letter-spacing: 0; }
.chrome-fresh-next { color: var(--dim); }
.chrome-fresh b { color: var(--mute); font-weight: 600; }
@media (max-width: 640px) { .chrome-fresh { margin-left: 0; width: 100%; padding: 2px; } }

.ux-tools-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  min-width: 0; max-width: 100%;
}
.ux-tools-row > .subnav { flex: 1 1 auto; min-width: 0; }
.ux-tools-row .info { margin-left: 0; }
.ux-tools-row > .info { flex: none; margin-right: 13px; }
.ux-scope-summary, .ux-fresh-short { display: none; }
.ux-scope:not(.tl-scope) { display: contents; }

@media (max-width: 640px) {
  .ux-tools-row { flex-wrap: nowrap; }
  .chrome { padding: 6px 10px; }
  .chrome, .chrome.is-tierlist { display: flex; flex-wrap: wrap; align-items: center; }
  .chrome > * { flex: 1 1 100%; }
  .chrome > .ux-scope-summary {
    display: inline-flex; align-items: center; gap: 6px; order: 10;
    flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 34px;
    padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--panel); color: var(--ink); box-shadow: var(--shadow-card);
    font: 600 var(--fs-2) var(--body);
  }
  .ux-scope-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ux-scope-caret { color: var(--dim); flex: none; transition: transform 180ms ease; }
  .chrome.is-scope-open .ux-scope-caret { transform: rotate(180deg); color: var(--gold); }
  .ux-scope-summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .chrome > .chrome-fresh {
    order: 11; flex: 1 1 0; width: auto; min-width: max-content;
    margin-left: 0; padding: 0 2px; justify-content: flex-end; font-size: var(--fs-1);
  }
  .chrome-fresh:not(.chrome-fresh-stale) .chrome-fresh-label,
  .chrome-fresh .chrome-fresh-next,
  .chrome-fresh > b:not(.ux-fresh-short) { display: none; }
  .chrome-fresh > b.ux-fresh-short { display: inline; }
  .chrome-fresh:not(.chrome-fresh-stale) > b.ux-fresh-short::before {
    content: "Updated "; font-weight: 400; color: var(--dim);
  }

  .chrome > .ux-scope, .chrome > .ux-scope.tl-scope { order: 12; display: none; }
  .chrome.is-scope-open > .ux-scope {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 6px 0 4px; position: relative; z-index: 20;
  }
  .chrome.is-scope-open > .ux-scope > * { max-width: 100%; min-width: 0; }
}
@media (max-width: 640px) and (pointer: coarse) {
  .chrome > .ux-scope-summary { min-height: 40px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .chrome.is-scope-open > .ux-scope { animation: ux-rise 200ms ease both; }
}
@keyframes ux-rise {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}


.ux-nav-new {
  display: inline-block; margin-left: 5px; padding: 1px 6px 2px;
  border-radius: 999px; vertical-align: 1px;
  font: 700 var(--fs-1) var(--body); line-height: 1.3; letter-spacing: 0;
  color: var(--bg); background: var(--gold);
}
@media (prefers-reduced-motion: no-preference) {
  .ux-nav-new { animation: ux-nav-new-pulse 2.4s ease-in-out infinite; }
}
@keyframes ux-nav-new-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 0%, transparent); }
}

:root {
  --prem-a: #6FB2FF; --prem-b: #D2EAFF; --prem-c: #3F86FF;
}
:root[data-theme="light"] { --prem-a: #1450C8; --prem-b: #2C6EEA; --prem-c: #0B3A94; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --prem-a: #1450C8; --prem-b: #2C6EEA; --prem-c: #0B3A94; }
}
.ux-premium-text {
  background-image: linear-gradient(100deg, var(--prem-a) 0%, var(--prem-c) 30%,
    var(--prem-b) 50%, var(--prem-c) 70%, var(--prem-a) 100%);
  background-size: 250% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .ux-premium-text { animation: ux-premium-sweep 3.2s linear infinite; }
}
@keyframes ux-premium-sweep {
  from { background-position: 100% 50%; }
  to   { background-position: -150% 50%; }
}
@media (forced-colors: active) {
  .ux-premium-text { -webkit-text-fill-color: currentColor; color: inherit; background: none; }
}


.dv-dist { padding: 10px var(--gutter) 16px; }
.dv-dist-plot { position: relative; display: grid; grid-auto-flow: column;
                grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; }
.dv-col { display: grid; grid-template-rows: auto 1fr auto; gap: 4px; align-items: end;
          justify-items: center; min-width: 0; }
.dv-col-n { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.dv-col-track { width: 100%; height: 120px; display: flex; align-items: flex-end;
                background: var(--row); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.dv-col-fill { width: 100%; background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 35%, transparent));
               border-radius: var(--r-sm) var(--r-sm) 0 0; }
.dv-col-foot { display: grid; justify-items: center; gap: 1px; text-align: center; min-width: 0; }
.dv-col-name { font: var(--fs-1) var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
               color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dv-col-share { font: var(--fs-1) var(--mono); color: var(--mute); font-style: normal; }
.dv-col-foot .crest, .dv-col-foot img { width: 18px; height: 18px; }
.dv-dist-line { position: absolute; left: 0; bottom: 34px; width: 100%; height: 120px;
                pointer-events: none; overflow: visible; z-index: 2; }
.dv-dist-line polyline { fill: none; stroke: var(--ink); stroke-width: 2;
                         vector-effect: non-scaling-stroke; opacity: 0.8;
                         stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 560px) {
  .dv-col-track { height: 86px; }
  .dv-dist-line { height: 86px; }
  .dv-col-n, .dv-col-share { font-size: var(--fs-1); }
}

.boot-h1 { font: 700 var(--fs-5) var(--cond); text-transform: uppercase; letter-spacing: 0.04em;
           padding: 18px var(--gutter) 0; }
.boot-p { color: var(--mute); font-size: var(--fs-3); line-height: 1.6; padding: 6px var(--gutter) 0; max-width: 70ch; }

.flip { display: inline-flex; gap: 1px; }
.flip-d {
  position: relative;
  display: inline-block;
  min-width: 0.62em;
  height: 1.15em;
  line-height: 1.15em;
  perspective: 120px;
  animation: flip-card 420ms ease-in both;
  transform-style: preserve-3d;
}
.flip-old, .flip-new {
  position: absolute;
  inset: 0;
  text-align: center;
  backface-visibility: hidden;
}
.flip-new { transform: rotateX(180deg); }
@keyframes flip-card {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(180deg); }
}
.flip-d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  animation: flip-glow 620ms ease-out both;
  pointer-events: none;
}
@keyframes flip-glow { from { opacity: 1; } to { opacity: 0; } }

.flutter {
  display: inline-block;
  transform-origin: 50% 55%;
  animation: flip-flutter 300ms cubic-bezier(.3, .7, .4, 1) both;
}
@keyframes flip-flutter {
  0%   { transform: rotateX(0deg); }
  38%  { transform: rotateX(-13deg); }
  70%  { transform: rotateX(4deg); }
  100% { transform: rotateX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .flutter { animation: none; transform: none; }
  .flip-d { animation: none; transform: none; }
  .flip-old { display: none; }
  .flip-new { position: static; transform: none; }
  .flip-d::after { animation: none; opacity: 0; }
}

.mt-bring { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.mt-bring-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.mt-bring.is-doubled .mt-bring-label { color: var(--gold); font-weight: 600; }
.mt-double {
  margin-left: 5px;
  padding: 0 5px;
  border-radius: var(--r-sm);
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}

.ally-sort { display: flex; gap: 6px; margin: 0 0 10px; }
.ally-sort-btn {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: 0.86em;
  cursor: pointer;
}
.ally-sort-btn:hover { color: var(--fg); border-color: var(--mute); }
.ally-sort-btn.is-on {
  color: var(--fg);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

@media (max-width: 560px) {
  .drop-league { display: none; }
  table.fits-narrow { min-width: 0; }
}
@media (max-width: 430px) {
  .drop-div { display: none; }
}

@media (max-width: 560px) { .drop-sm { display: none; } }
@media (max-width: 430px) { .drop-xs { display: none; } }

@media (min-width: 561px) { .narrow-only { display: none; } }
@media (min-width: 431px) { .xs-only { display: none; } }
@media (max-width: 560px) {
  table.fits-narrow thead th { white-space: normal; }
  .flow-sm { white-space: normal; }
  .flow-sm .chips, .flow-sm .cellflex { flex-wrap: wrap; }
}
@media (max-width: 430px) {
  .wrap > table.fits-narrow:not(.grid) th.rank + th,
  .wrap > table.fits-narrow:not(.grid) td.rank + td,
  .wrap > table.fits-narrow:not(.grid) thead th:first-child:not(.rank),
  .wrap > table.fits-narrow:not(.grid) tbody td:first-child:not(.rank) { max-width: 42vw; }
}

.div-cell .cellflex { gap: 6px; align-items: center; }
.div-cell .div-crest { width: 26px; height: 18px; flex: none; }
.div-cell-name { white-space: nowrap; }
.div-cell-sub { font: 600 var(--fs-1) var(--mono); color: var(--dim); }

@media (max-width: 560px) { .div-cell-name { display: none; } }


.war-break { padding: 0 var(--gutter) 14px; }
.war-break h3 { margin: 0 0 6px; font: 700 var(--fs-2) var(--cond); }
.war-break-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--panel); }
.war-seg { display: block; min-width: 2px; background: var(--gold); }
.war-seg:nth-child(2n) { background: color-mix(in srgb, var(--gold) 62%, var(--bg)); }
.war-seg:nth-child(3n) { background: color-mix(in srgb, var(--gold) 38%, var(--bg)); }
.war-break-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.war-break-list li { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-2); }
.war-break-name { flex: 1; text-transform: capitalize; color: var(--mute); }

.war-side.is-winner .war-banners { color: var(--good); }
.war-side-sub { font: 500 var(--fs-1) var(--mono); color: var(--dim); }

@media (min-width: 641px) and (max-width: 1200px) {
  .omni input { width: 170px; }
}
@media (min-width: 641px) and (max-width: 1040px) {
  .omni input { width: 120px; }
}

.beta-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  padding: 9px var(--gutter); border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  font-size: var(--fs-2);
}
.beta-tag {
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em;
  color: var(--bg); background: var(--gold);
  padding: 2px 6px; border-radius: var(--r-sm); flex: none;
}
.beta-text { color: var(--mute); }
.beta-bar a { color: var(--gold); }

.war-hub-banner {
  --war-hub-accent: var(--gold);
  position: relative; overflow: hidden;
  display: grid; gap: 16px 28px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 24px var(--gutter) 18px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(120% 140% at 0% 0%,
      color-mix(in srgb, var(--war-hub-accent) 18%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--faint), transparent);
}
.war-hub-who { display: flex; gap: 16px; align-items: center; min-width: 0; }
.war-hub-who .crest { filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.war-hub-id { display: grid; gap: 3px; min-width: 0; }
.war-hub-kicker {
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mute);
  display: inline-flex; align-items: center; gap: 8px;
}
.war-home {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  color: var(--gold); border: 1px solid var(--rule);
  background: transparent; text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.war-home:hover, .war-home:focus-visible { background: var(--pill-hover); color: var(--ink); }
.war-hub-name {
  margin: 0; font: 700 var(--fs-5)/1.05 var(--cond); text-transform: uppercase; letter-spacing: 0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.war-hub-name a { color: var(--ink); text-decoration: none; }
.war-hub-name a:hover { color: var(--gold); }
.war-hub-sub {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0;
  font: 500 var(--fs-2) var(--mono); color: var(--mute);
}

.war-hub-places { display: flex; align-items: stretch; }
.war-hub-place {
  display: grid; grid-template-columns: auto auto; column-gap: 8px; align-content: center;
  padding: 2px 20px; text-decoration: none; color: inherit;
  border-left: 1px solid var(--rule);
  transition: background-color 140ms ease;
  border-radius: var(--r);
}
.war-hub-place:first-child { border-left: 0; }
.war-hub-place:hover { background: var(--lift); }
.war-hub-place:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.war-hub-rank {
  grid-row: span 2; align-self: center;
  font: 700 var(--fs-5)/1 var(--cond); color: var(--ink); font-variant-numeric: tabular-nums;
}
.war-hub-hash { font-size: 0.55em; color: var(--mute); margin-right: 1px; vertical-align: 0.5em; }
.war-hub-place-label {
  align-self: end; font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute); white-space: nowrap;
}
.war-hub-place-of { align-self: start; font: var(--fs-1) var(--mono); color: var(--dim); white-space: nowrap; }
.war-hub-place.is-unranked .war-hub-rank { font-size: var(--fs-4); color: var(--dim); }

.war-hub-figs {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0;
  padding-top: 12px; border-top: 1px solid var(--hairline-2);
}
.war-hub-fig { display: flex; align-items: baseline; gap: 8px; }
.war-hub-fig dt {
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.war-hub-fig dd { margin: 0; font: 600 var(--fs-3) var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }

.war-hub-leaders { border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
.war-hub-pending {
  margin: 0 var(--gutter) 6px; padding: 2px 0;
  font: var(--fs-2)/1.55 var(--mono); color: var(--mute); max-width: 78ch;
}
.war-hub-boards {
  display: grid; gap: 4px 28px; padding: 4px var(--gutter) 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.war-hub-board { min-width: 0; padding: 8px 0; }
.war-hub-board-title {
  margin: 0 0 6px; font: 700 var(--fs-1) var(--cond); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute);
}
.war-hub-board-empty { margin: 0; font: var(--fs-2) var(--mono); color: var(--dim); }
.war-hub-list { list-style: none; margin: 0; padding: 0; }
.war-hub-item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 6px 0; border-top: 1px solid var(--hairline-2);
}
.war-hub-item:first-child { border-top: 0; }
.war-hub-pos { font: 600 var(--fs-1) var(--mono); color: var(--dim); text-align: right; }
.war-hub-player { display: grid; min-width: 0; font: 500 var(--fs-3) var(--body); }
.war-hub-player > a, .war-hub-player-sub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.war-hub-player a { color: var(--ink); text-decoration: none; }
.war-hub-player a:hover { color: var(--gold); }
.war-hub-player-sub { font: var(--fs-1) var(--mono); color: var(--dim); }
.war-hub-val { font: 700 var(--fs-3) var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.war-hub-item.is-first {
  margin: 0 -8px; padding: 8px; border-radius: var(--r); border-top: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 80%);
}
.war-hub-item.is-first + .war-hub-item { border-top: 0; }
.war-hub-item.is-first .war-hub-pos { color: var(--medal-gold); }
.war-hub-item.is-first .war-hub-val { font-size: var(--fs-4); color: var(--gold); }

@media (max-width: 760px) {
  .war-hub-banner { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .war-hub-places { justify-content: flex-start; }
  .war-hub-place:first-child { padding-left: 0; }
}
@media (max-width: 420px) {
  .war-hub-who { gap: 12px; }
  .war-hub-who .crest { width: 56px; height: 56px; }
  .war-hub-name { font-size: var(--fs-5); white-space: normal; overflow-wrap: anywhere; }
  .war-hub-place { padding: 2px 12px; }
  .war-hub-rank { font-size: var(--fs-5); }
  .war-hub-figs { gap: 6px 18px; }
  .war-hub-item:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .war-hub-place { transition: none; } }


:root {
  --wf-a: #3FA7D6;
  --wf-b: #D2644F;
  --wf-fog: rgba(170, 182, 200, 0.16);
}
:root[data-theme="light"] { --wf-a: #1F6F99; --wf-b: #A8432F; --wf-fog: rgba(80, 96, 120, 0.14); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --wf-a: #1F6F99; --wf-b: #A8432F; --wf-fog: rgba(80, 96, 120, 0.14); }
}

.war-field-wrap, .war-cmp-wrap { display: block; }
.war-field-stage { position: relative; margin: 0 var(--gutter); }

.war-field {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 0;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--panel);
}
.war-field-terrain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.war-field-gridline { fill: none; stroke: var(--hairline-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.war-field-contours path { fill: none; stroke: var(--rule); stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke; }
.war-field-halftint.is-a { fill: var(--wf-a); fill-opacity: .05; }
.war-field-halftint.is-b { fill: var(--wf-b); fill-opacity: .05; }

.war-field-half { display: grid; gap: 6px; justify-items: stretch; --side: var(--wf-a); }
.war-field-half.is-b { --side: var(--wf-b); }

.war-field-banner {
  display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 0; text-align: center; min-width: 0;
}
.war-field-banner b { font: 700 var(--fs-3) var(--cond); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); overflow-wrap: anywhere; }
.war-field-bsub { font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.war-field-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center;
  background: var(--side, var(--wf-a)); }

.war-field-rowcap { justify-self: center; font: 700 var(--fs-1) var(--cond); letter-spacing: .22em;
  text-transform: uppercase; color: var(--dim); }

.war-field-row { display: flex; justify-content: center; gap: 8px; }

.war-field-zone {
  --tone: var(--side);
  flex: 1 1 0; min-width: 0;
  display: grid; align-content: start; gap: 5px; justify-items: center; text-align: center;
  padding: 8px 6px 7px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--tone) 38%, var(--rule));
  background: color-mix(in srgb, var(--tone) 7%, var(--panel));
  color: var(--ink); font: inherit; cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color .15s var(--ease);
}
.war-field-zone:hover, .war-field-zone[aria-expanded="true"] { border-color: var(--tone); }
.war-field-zone[aria-expanded="true"] { outline: 2px solid var(--tone); outline-offset: 1px; }
.war-field-zone:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.war-field-zhead { display: grid; gap: 2px; justify-items: center; }
.war-field-zhead b { font: 700 var(--fs-2) var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.war-field-zstatus { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase;
  padding: 1px 7px; border-radius: var(--r-sm); color: var(--mute);
  background: color-mix(in srgb, var(--tone) 12%, transparent); }
.war-field-zsub { font: 500 var(--fs-1) var(--mono); color: var(--mute); }
.war-field-zatk { font: 600 var(--fs-1) var(--mono); color: var(--dim); }
.war-field-zone.is-open .war-field-zstatus { color: var(--ink); background: color-mix(in srgb, var(--tone) 28%, transparent); }

.war-field-zone.is-cleared {
  --tone: var(--dim);
  background:
    repeating-linear-gradient(135deg, var(--hairline-2) 0 1px, transparent 1px 8px),
    color-mix(in srgb, var(--bg) 60%, var(--panel));
}
.war-field-zone.is-cleared .war-field-zhead b { color: var(--mute); }
.war-field-zone.is-cleared .war-field-zstatus { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }

.war-field-zone.is-fogged {
  border-style: dashed;
  background: color-mix(in srgb, var(--wf-fog), var(--panel));
}
.war-field-zone.is-fogged .war-field-zhead b { color: var(--mute); }
.war-field-zone.is-fogged .war-field-zstatus { font-style: italic; }
.war-field-zone.is-unknown { opacity: .45; cursor: default; }
.war-field-zone.is-empty { display: grid; place-items: center; min-height: 48px; }


.war-field-line {
  position: relative; display: grid; place-items: center; height: 30px; margin: 4px 0;
}
.war-field-line::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, var(--wf-a) 50%, var(--wf-b) 50%);
  opacity: .6;
}
.war-field-line span {
  position: relative; padding: 2px 10px; border-radius: var(--r-sm);
  font: 700 var(--fs-1) var(--cond); letter-spacing: .24em; text-transform: uppercase; color: var(--mute);
  background: var(--panel); border: 1px solid var(--rule);
}

.war-field-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
  padding: 10px var(--gutter) 0; font: var(--fs-1) var(--body); color: var(--dim); }
.war-field-key { display: inline-flex; align-items: center; gap: 5px; }
.war-field-key b { color: var(--mute); font-weight: 600; }
.war-field-key i { width: 12px; height: 12px; border-radius: var(--r-sm); border: 1px solid var(--wf-a);
  background: color-mix(in srgb, var(--wf-a) 22%, transparent); }
.war-field-key.is-cleared i { border-color: var(--dim);
  background: repeating-linear-gradient(135deg, var(--dim) 0 1px, transparent 1px 4px); }
.war-field-key.is-fogged i { border: 1px dashed var(--dim); background: var(--wf-fog); }

.war-field-feet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px var(--gutter) 0; }
.war-field-foot { margin: 0; display: grid; gap: 2px; font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.war-field-foot b { font: 700 var(--fs-1) var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.war-field-foot.is-b { text-align: right; }

.war-field-pop {
  position: absolute; z-index: 40; max-height: min(460px, 70vh); overflow: auto;
  padding: 12px 14px 14px; border-radius: var(--r-lg);
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: var(--shadow-3);
  overscroll-behavior: contain;
}
.war-field-pop[hidden] { display: none; }
.war-field-pophead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.war-field-pophead > div { flex: 1; min-width: 0; }
.war-field-pophead h3 { margin: 0; font: 700 var(--fs-4) var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.war-field-popside { font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.war-field-pill { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--row); color: var(--mute); align-self: center; }
.war-field-pill.is-cleared { color: var(--good); }
.war-field-pill.is-open { color: var(--ink); }
.war-field-close { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--bg); color: var(--mute); font: var(--fs-4)/1 var(--body); cursor: pointer; }
.war-field-close:hover { color: var(--ink); border-color: var(--mute); }
.war-field-popnote { margin: 4px 0 8px; font: var(--fs-2)/1.5 var(--body); color: var(--mute); }
.war-field-popsquads { display: grid; gap: 8px; margin-bottom: 4px; }
.war-field-popsquad { display: grid; gap: 4px; }
.war-field-popowner { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.war-field-popowner.is-out { text-decoration: line-through; color: var(--dim); }
.war-field-popline, .war-field-hballs, .war-cmp-ex { display: flex; flex-wrap: wrap; gap: 4px; }
.war-field-pophist { margin: 10px 0 6px; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); }

.war-field-ball {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 2px 7px 2px 2px; border-radius: 999px;
  background: var(--row); border: 1px solid var(--rule); font-size: var(--fs-1);
}
.war-field-ball .thumb, .war-field-ball-blank { width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--bg); }
.war-field-ball-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }
.war-field-ball-cp { font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.war-field-ball.is-out { opacity: .5; }
.war-field-ball.is-out .war-field-ball-name { text-decoration: line-through; }
.war-field-ball.is-hidden { border-style: dashed; color: var(--dim); }
.war-field-ball.is-won { border-color: color-mix(in srgb, var(--good) 55%, var(--rule)); }

.war-field-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.war-field-hist li { display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--r);
  background: color-mix(in srgb, var(--bg) 60%, var(--panel)); border: 1px solid var(--hairline-2); }
.war-field-hline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--fs-2); }
.war-field-htime { margin-left: auto; font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.war-field-res { font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; background: var(--row); color: var(--mute); }
.war-field-res.is-zone, .war-field-res.is-squad { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.war-field-kills { font: 500 var(--fs-1) var(--mono); color: var(--mute); }
.war-field-first { font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.war-field-pts { font: 600 var(--fs-1) var(--mono); color: var(--ink); }
.war-field-felled { font: var(--fs-1) var(--body); color: var(--dim); }

.war-cmp {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 12px;
  align-items: center; margin: 0 var(--gutter); padding: 12px 14px;
  border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--panel);
}
.war-cmp-name { display: flex; align-items: center; gap: 7px; min-width: 0;
  font: 700 var(--fs-2) var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.war-cmp-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-cmp-name.is-a { --side: var(--wf-a); justify-content: flex-end; }
.war-cmp-name.is-b { --side: var(--wf-b); flex-direction: row-reverse; justify-content: flex-end; }
.war-cmp-mid { width: 0; }
.war-cmp-label { justify-self: center; text-align: center; max-width: 16ch;
  font: 600 var(--fs-1) var(--body); color: var(--mute); }
.war-cmp-val { position: relative; display: flex; align-items: center; min-height: 26px; }
.war-cmp-val b { position: relative; font: 700 var(--fs-4) var(--mono); padding: 0 6px; }
.war-cmp-val.is-a { justify-content: flex-end; --side: var(--wf-a); }
.war-cmp-val.is-b { justify-content: flex-start; --side: var(--wf-b); }
.war-cmp-bar { position: absolute; top: 4px; bottom: 4px; width: var(--w, 0%); border-radius: 999px;
  background: color-mix(in srgb, var(--side) 24%, transparent); }
.war-cmp-val.is-a .war-cmp-bar { right: 0; }
.war-cmp-val.is-b .war-cmp-bar { left: 0; }

.war-cmp-items, .war-cmp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px var(--gutter) 0; }
.war-cmp-col, .war-cmp-plan { min-width: 0; padding: 10px 12px; border-radius: var(--r-lg);
  border: 1px solid var(--rule); background: var(--panel); }
.war-cmp-col.is-a, .war-cmp-plan.is-a { border-top: 2px solid var(--wf-a); }
.war-cmp-col.is-b, .war-cmp-plan.is-b { border-top: 2px solid var(--wf-b); }
.war-cmp-col h3, .war-cmp-plan h3 { margin: 0 0 8px; font: 700 var(--fs-1) var(--cond); letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute); overflow-wrap: anywhere; }
.war-cmp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.war-cmp-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.war-cmp-item .thumb { width: 30px; height: 30px; border-radius: var(--r); }
.war-cmp-iname { display: grid; min-width: 0; flex: 1; font-size: var(--fs-2); }
.war-cmp-iname a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-cmp-istats { display: flex; gap: 8px; font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.war-cmp-qty { font: 700 var(--fs-3) var(--mono); }
.war-cmp-empty { margin: 0; font: var(--fs-2) var(--body); color: var(--dim); }
.war-cmp-types { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.war-cmp-tlabel { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); min-width: 8ch; }
.war-cmp-type { display: inline-flex; align-items: center; gap: 4px; }
.war-cmp-type b { font: 600 var(--fs-1) var(--mono); }
.war-cmp-types.is-best .war-cmp-type b { color: var(--good); }
.war-cmp-types.is-worst .war-cmp-type b { color: var(--bad); }
.war-cmp-carriers { margin: 4px 0 6px; font: var(--fs-2)/1.45 var(--body); color: var(--mute); }

@media (min-width: 900px) {
  .war-field-stage, .war-cmp, .war-cmp-items, .war-cmp-plans, .war-field-feet, .war-field-legend {
    max-width: 820px; margin-left: auto; margin-right: auto;
  }
  .war-field-feet, .war-field-legend { padding-left: 0; padding-right: 0; }
}

@media (max-width: 640px) {
  .war-field-stage, .war-cmp, .war-cmp-items, .war-cmp-plans { margin-left: 12px; margin-right: 12px; }
  .war-field { padding: 8px 6px; border-radius: var(--r-lg); }
  .war-field-row { gap: 5px; }
  .war-field-zone { padding: 7px 3px 6px; }
  .war-field-zsub { font-size: var(--fs-1); }
  .war-field-feet { padding-left: 12px; padding-right: 12px; }
  .war-field-legend { padding-left: 12px; padding-right: 12px; }
  .war-field-pop {
    position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: 8px !important;
    width: auto !important; max-height: 72vh; border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-lg);
  }
  .war-cmp { padding: 10px 8px; gap: 6px 6px; }
  .war-cmp-val b { font-size: var(--fs-3); }
  .war-cmp-items, .war-cmp-plans { grid-template-columns: 1fr; }
  .war-cmp-label { max-width: 11ch; font-size: var(--fs-1); }
}

@media (prefers-reduced-motion: no-preference) {
  .war-field-zone { animation: war-field-in .5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 32ms); }
  .war-field-half.is-b .war-field-zone { animation-name: war-field-in-up; }
  .war-field-pop:not([hidden]) { animation: war-field-pop .18s var(--ease) both; }
  .war-cmp-bar { transition: width .6s var(--ease); animation: war-cmp-grow .7s var(--ease) both; }
}
@keyframes war-field-in    { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes war-field-in-up { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes war-field-pop   { from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes war-cmp-grow    { from { width: 0; } }

:root { --podium-mix: 16%; --podium-mix-hover: 23%; }
:root[data-theme="light"] { --podium-mix: 15%; --podium-mix-hover: 22%; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --podium-mix: 15%; --podium-mix-hover: 22%; }
}
tbody tr.rank-1 { --podium: var(--medal-gold); }
tbody tr.rank-2 { --podium: var(--medal-silver); }
tbody tr.rank-3 { --podium: var(--medal-bronze); }
tbody tr.rank-1 td, tbody tr.rank-2 td, tbody tr.rank-3 td,
.wrap > table:not(.grid) tbody tr.rank-1 td,
.wrap > table:not(.grid) tbody tr.rank-2 td,
.wrap > table:not(.grid) tbody tr.rank-3 td {
  background: color-mix(in srgb, var(--podium) var(--podium-mix), var(--bg));
}
tbody tr.rank-1:hover td, tbody tr.rank-2:hover td, tbody tr.rank-3:hover td,
.wrap > table:not(.grid) tbody tr.rank-1:hover td,
.wrap > table:not(.grid) tbody tr.rank-2:hover td,
.wrap > table:not(.grid) tbody tr.rank-3:hover td {
  background: color-mix(in srgb, var(--podium) var(--podium-mix-hover), var(--panel));
}
tbody tr.rank-1 td.rank, tbody tr.rank-2 td.rank, tbody tr.rank-3 td.rank {
  color: var(--podium); font-weight: 700;
}
.crest.is-row { width: 22px; height: 22px; }

.board-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.board-badge {
  --place: var(--mute);
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--panel);
  color: var(--ink); text-decoration: none; font-size: var(--fs-2); line-height: 1.3;
}
.board-badge:hover, .board-badge:focus-visible { border-color: var(--place); outline: none; }
.board-badge-rank { font: 700 var(--fs-3) var(--cond); color: var(--place); font-variant-numeric: tabular-nums; }
.board-badge-label { color: var(--mute); }
.board-badge.is-place-1 { --place: var(--medal-gold); }
.board-badge.is-place-2 { --place: var(--medal-silver); }
.board-badge.is-place-3 { --place: var(--medal-bronze); }
.board-badge.is-place-1, .board-badge.is-place-2, .board-badge.is-place-3 {
  border-color: var(--place);
  background: color-mix(in srgb, var(--place) var(--podium-mix), var(--panel));
}

.war-lock-shared {
  display: inline-block; margin: 12px var(--gutter) 0; padding: 7px 11px;
  font-size: var(--fs-2); color: var(--mute); background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.war-room-signin {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 12px var(--gutter) 4px; padding: 8px 12px;
  font-size: var(--fs-2); color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.war-room-signin > span { flex: 1 1 14em; }
.war-room-signin .war-lock-promo { margin: 0; }
.war-room-signin-go { text-decoration: none; padding: 4px 12px; font-size: var(--fs-2); }
.ws-tease .war-lock-promo, .ws-tease .war-room-signin-go { margin-top: 10px; }
.war-hub-next { margin: 10px var(--gutter) 0; }

@keyframes war-lock-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.bf-more { display: block; margin: 12px auto 24px; }
.bf-more[hidden] { display: none; }
.bf-status:empty { display: none; }

.ssr { padding: 10px var(--gutter) 0; max-width: 70ch; }
.ssr-lead { color: var(--mute); font-size: var(--fs-3); line-height: 1.6; margin: 0 0 8px; }
.ssr-table { border-collapse: collapse; width: 100%; font-size: var(--fs-2); }
.ssr-table caption { text-align: left; font: 700 var(--fs-2) var(--cond); text-transform: uppercase;
                     letter-spacing: 0.04em; padding: 0 0 6px; }
.ssr-table th, .ssr-table td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--rule);
                               overflow-wrap: anywhere; }
.ssr-table th { color: var(--mute); font-weight: 600; }

.account-news { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: var(--fs-2);
  color: var(--dim); cursor: pointer; }
.account-news input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent, currentColor); }
.account-card { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); }
.account-card-title { font: 700 var(--fs-3) var(--body); margin: 0; }
.account-card .account-note { margin: 6px 0 10px; }
.account-verify { border-color: var(--gold); }

.nudge-slot:empty { display: none; }
.nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px var(--gutter) 0;
  padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); }
.nudge-text { flex: 1 1 260px; margin: 0; font-size: var(--fs-3); line-height: 1.5; color: var(--ink); }
.nudge-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.link-prompt-slot:empty { display: none; }
.link-prompt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark main actions";
  align-items: center; gap: 10px 16px; margin: 12px var(--gutter) 0; padding: 12px 14px;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--rule));
  background:
    radial-gradient(70% 150% at 100% 0%, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 70%),
    var(--panel);
  box-shadow: var(--shadow-1);
}
.link-prompt-mark {
  grid-area: mark; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-lg);
  color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 32%, transparent);
}
.link-prompt-svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link-prompt-main { grid-area: main; display: grid; gap: 4px; min-width: 0; }
.link-prompt-title { margin: 0; font: 700 var(--fs-4)/1.1 var(--cond); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.link-prompt-text { margin: 0; font-size: var(--fs-3); line-height: 1.45; color: var(--mute); }
.link-prompt-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; }
.link-prompt-actions .btn { padding: 7px 14px; white-space: nowrap; }
@media (max-width: 640px) {
  .link-prompt { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark main" "actions actions"; gap: 12px; align-items: start; }
  .link-prompt-mark { width: 40px; height: 40px; }
  .link-prompt-actions .btn { flex: 1 1 0; justify-content: center; min-height: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .link-prompt { animation: home-float-in 420ms var(--ease) both; }
}
.account #game-account { scroll-margin-top: calc(var(--sticky-top, 49px) + 12px); }

.war-stats-link {
  margin-left: auto; flex: none; padding: 2px 8px;
  font: 600 var(--fs-1) var(--body); color: var(--mute); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel);
}
.war-stats-link:hover, .war-stats-link:focus-visible { color: var(--ink); border-color: var(--gold); }
.section-title .war-stats-btn { margin-left: auto; padding: 5px 12px; font-size: var(--fs-2); }
@media (max-width: 640px) {
  .war-stats-link { padding: 1px 6px; font-size: var(--fs-2); line-height: 1.3; }
  .war-stats-link::before { content: "\2694\FE0E"; }
  .war-stats-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}



.war-lock-promo {
  margin: 2px 0 4px; padding: 10px 12px; width: 100%; box-sizing: border-box;
  color: var(--ink); font-size: var(--fs-3); line-height: 1.45;
  background: color-mix(in srgb, var(--gold) 14%, var(--panel));
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent);
}
.war-lock-promo strong { font-weight: 700; }
.war-lock-promo em { font-style: italic; }

.wrs-wrap { margin-top: 22px; }
.wrs-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px; margin: 10px var(--gutter) 0; align-items: start;
}
.wrs-card {
  background: var(--panel); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), 0 14px 32px -22px rgba(0, 0, 0, .55);
  padding: 16px 16px 14px; min-width: 0;
}
.wrs-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wrs-card-title { margin: 0; font: 600 var(--fs-4)/1.2 var(--body); color: var(--ink); }
.wrs-card-sub { color: var(--dim); font-size: var(--fs-2); }

.wrs-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wrs-member {
  display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 12px;
  align-items: center; padding: 8px 10px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.wrs-who { display: grid; min-width: 0; }
.wrs-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrs-role { color: var(--dim); font-size: var(--fs-1); text-transform: capitalize; }
.wrs-balls { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wrs-none { color: var(--mute); font-size: var(--fs-2); }
.wrs-ball {
  position: relative; display: grid; justify-items: center; gap: 2px; width: 52px;
  padding: 4px 2px 3px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--ink) 6%, var(--panel));
}
.wrs-ball-art.thumb { width: 38px; height: 38px; object-fit: contain; }
.wrs-item {
  position: absolute; top: -3px; right: -3px; width: 20px; height: 20px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 999px; background: var(--panel); font: 600 var(--fs-1) var(--mono); color: var(--mute);
  box-shadow: 0 0 0 1px var(--rule);
}
.wrs-item .thumb { position: absolute; inset: 1px; width: 18px; height: 18px; object-fit: contain; background: var(--panel); border-radius: 999px; }
.wrs-item.is-p4 { box-shadow: 0 0 0 2px var(--gold); }
.wrs-item.is-p3 { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.wrs-cp { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.wrs-bench-title {
  margin: 14px 0 6px; font: 600 var(--fs-2)/1.2 var(--body); color: var(--mute);
}
.wrs-member.is-out .wrs-name { color: var(--mute); }
.wrs-member.is-out .wrs-ball-art, .wrs-member.is-out .wrs-item .thumb { opacity: .55; }
.wrs-member.is-early .wrs-ball-art, .wrs-member.is-early .wrs-item .thumb { opacity: .6; }
.wrs-member.is-out .wrs-item.is-p4, .wrs-member.is-early .wrs-item.is-p4 { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.wrs-member.is-out .wrs-item.is-p3, .wrs-member.is-early .wrs-item.is-p3 { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, var(--rule)); }

.wrs-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.wrs-fig {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.wrs-fig-val { font: 700 var(--fs-4)/1.1 var(--body); color: var(--ink); }
.wrs-fig-label { color: var(--mute); font-size: var(--fs-2); }
.wrs-pop { position: relative; padding: 0; }
.wrs-pop-btn {
  all: unset; box-sizing: border-box; display: grid; gap: 2px; width: 100%;
  padding: 10px 12px; border-radius: var(--r-lg); cursor: pointer;
}
.wrs-pop-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wrs-pop-btn .wrs-fig-val { text-decoration: underline dotted color-mix(in srgb, var(--gold) 60%, transparent); text-underline-offset: 4px; }
.wrs-pop-card {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 6px);
  min-width: 200px; max-width: min(280px, 80vw); max-height: 260px; overflow: auto;
  padding: 10px 12px; background: var(--panel); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--rule), var(--shadow-card), 0 18px 40px -16px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
}
.wrs-pop.is-pinned .wrs-pop-card { opacity: 1; visibility: visible; transform: none; }
.wrs-figs > .wrs-pop:nth-child(even) .wrs-pop-card { left: auto; right: 0; }
@media (hover: hover) {
  .wrs-pop:hover .wrs-pop-card, .wrs-pop:focus-within .wrs-pop-card { opacity: 1; visibility: visible; transform: none; }
}
.wrs-pop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wrs-pop-list li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-2); }
.wrs-pop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrs-pop-empty { margin: 0; color: var(--dim); font-size: var(--fs-2); }

.wrs-line { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; }
.wrs-line-label { color: var(--mute); font-size: var(--fs-2); }
.wrs-line-val { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.wrs-line-sub { color: var(--dim); font-size: var(--fs-1); }
.wrs-model {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--mute) 7%, transparent);
}
.wrs-model-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.wrs-model-tag {
  font: 700 var(--fs-1) var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); padding: 2px 7px; border-radius: 999px; box-shadow: 0 0 0 1px var(--rule);
}
.wrs-model-title { color: var(--mute); font-size: var(--fs-2); }

@media (max-width: 900px) {
  .wrs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrs-grid { margin: 10px 12px 0; }
  .wrs-member { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .wrs-ball { width: 48px; }
  .wrs-line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
  .wrs-pop-card { transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
  .wrs-card { animation: war-lock-rise .4s var(--ease) both; }
}

.war-hub-live {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k go" "vs go" "m go";
  align-items: center; gap: 2px 16px; margin-top: 16px; padding: 14px var(--gutter);
  border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: linear-gradient(120deg, color-mix(in srgb, var(--war-hub-accent, var(--gold)) 28%, var(--panel)), var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--war-hub-accent, var(--gold)) 45%, transparent), 0 8px 22px rgba(0,0,0,.25);
  transition: transform .15s, box-shadow .15s;
}
.war-hub-live:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--war-hub-accent, var(--gold)), 0 12px 28px rgba(0,0,0,.3); }
.war-hub-live-kicker { grid-area: k; font: 600 var(--fs-1) var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--war-hub-accent, var(--gold)); }
.war-hub-live-vs { grid-area: vs; font: 700 var(--fs-4)/1.2 var(--body); }
.war-hub-live-meta { grid-column: 1 / -2; font-size: var(--fs-2); color: var(--mute); }
.war-hub-live-go { grid-area: go; font-size: var(--fs-5); color: var(--war-hub-accent, var(--gold)); }
@media (prefers-reduced-motion: reduce) { .war-hub-live { transition: none; } .war-hub-live:hover { transform: none; } }


.upd-notice { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.upd-notice p { margin: 0; }
.upd-title { font-weight: 600; color: var(--ink); }
.upd-notice .btn { margin-top: .5rem; }

.wlive-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 4px; margin: -4px 0 12px; font-size: var(--fs-2); color: var(--mute);
  font-variant-numeric: tabular-nums; text-align: center;
}
.wlive-word { color: var(--good); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--fs-1); }
.wlive-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-right: 4px; flex: none; }
.wlive-strip.is-final .wlive-dot { background: var(--dim); }
.wlive-strip.is-catching .wlive-dot { background: var(--dim); animation: none; }
.wlive-strip.is-final .wlive-word { color: var(--ink); }
.wlive-moved { border-radius: var(--r-lg); }
@media (prefers-reduced-motion: no-preference) {
  .wlive-strip:not(.is-final):not(.is-catching) .wlive-dot { animation: wlive-pulse 2s ease-out infinite; }
  .wlive-moved { animation: wlive-glow 1.6s ease-out; }
}
.wlive-quiet .war-field-half .war-field-zone { animation: none; }

.wstrike { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .wstrike {
    --hit: var(--bad); --fx: var(--hit);
    display: block; position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none;
  }
  .wstrike.is-miss { --fx: #f4f7fb; }
  .wstrike-sight {
    position: absolute; left: 0; top: 0; width: 46px; height: 46px; overflow: visible;
    fill: none; stroke: var(--fx); stroke-width: 2; stroke-linecap: round;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--fx) 60%, transparent));
    animation: wstrike-drop .7s cubic-bezier(.3, .7, .4, 1) both;
  }
  .wstrike-core, .wstrike-ring, .wstrike-bit {
    position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0;
    animation-delay: .43s; animation-fill-mode: both;
  }
  .wstrike-core {
    width: 34px; height: 34px;
    background: radial-gradient(circle, #fff 0 18%, var(--fx) 40%, transparent 70%);
    animation-name: wstrike-flash; animation-duration: .5s; animation-timing-function: ease-out;
  }
  .wstrike-ring {
    width: 40px; height: 40px; border: 2px solid var(--fx);
    animation-name: wstrike-ring; animation-duration: .75s; animation-timing-function: cubic-bezier(.2, .7, .3, 1);
  }
  .wstrike-bit {
    width: 6px; height: 6px; background: var(--fx);
    animation-name: wstrike-bit; animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .3, 1);
  }
  .wstrike.is-miss .wstrike-bit { width: 4px; height: 9px; border-radius: var(--r-sm); }
  .wstrike.is-miss .wstrike-bit, .wstrike.is-miss .wstrike-ring { box-shadow: 0 0 0 1px rgba(20, 30, 45, .22); }
  .wstrike.is-miss .wstrike-sight { filter: drop-shadow(0 0 1.5px rgba(20, 30, 45, .55)); }
  .wstrike.is-zone .wstrike-core { width: 52px; height: 52px; }
  .wstrike.is-zone .wstrike-ring { width: 60px; height: 60px; }

  .war-field .war-field-half .war-field-zone.is-struck { animation: wstrike-shake .45s ease-out; }
  .war-field .war-field-half .war-field-zone.is-hit-struck { border-color: var(--bad); }

  .wstrike-row { animation: wstrike-row .6s var(--ease) backwards; animation-delay: var(--strike-delay, 0ms); }
  .wstrike-row.is-miss { animation-name: wstrike-row-miss; }
}
@keyframes wstrike-drop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(-75deg); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(.86); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
}
@keyframes wstrike-flash {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes wstrike-ring {
  0%   { opacity: .9; transform: translate(-50%, -50%) scale(.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}
@keyframes wstrike-bit {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-30px) scale(.3); }
}
@keyframes wstrike-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-3px, 1px) rotate(-.6deg); }
  40% { transform: translate(3px, -1px) rotate(.6deg); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(1px, 0); }
}
@keyframes wstrike-row {
  0%   { opacity: 0; transform: translateX(-22px); background: color-mix(in srgb, var(--bad) 22%, transparent); }
  45%  { opacity: 1; transform: none; background: color-mix(in srgb, var(--bad) 16%, transparent); }
  100% { background: transparent; }
}
@keyframes wstrike-row-miss {
  0%   { opacity: 0; transform: translateX(-22px); background: color-mix(in srgb, var(--ink) 12%, transparent); }
  45%  { opacity: 1; transform: none; background: color-mix(in srgb, var(--ink) 8%, transparent); }
  100% { background: transparent; }
}
@keyframes wlive-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@keyframes wlive-glow {
  0% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
  100% { box-shadow: 0 0 0 1px transparent; }
}
.war-hub-live { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "k k go" "vs s go" "m m go"; }
.war-hub-live-vs { min-width: 0; overflow-wrap: anywhere; }
.war-hub-live-score {
  grid-area: s; display: inline-flex; align-items: baseline; gap: 6px;
  font: 700 var(--fs-4)/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.war-hub-live-score[hidden], .war-hub-live-meta[hidden] { display: none; }
.wlive-them { color: var(--mute); }
.wlive-dash { color: var(--dim); font-weight: 400; }

.war-phase {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--gold) 10%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}
.war-phase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); align-self: center; }
.war-phase[data-phase="attack"] .war-phase-dot { background: var(--bad); animation: war-phase-pulse 1.6s ease-in-out infinite; }
.war-phase-title { font-size: var(--fs-3); }
.war-phase-next { font-size: var(--fs-2); color: var(--mute); }
@keyframes war-phase-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .war-phase[data-phase="attack"] .war-phase-dot { animation: none; } }

.wmap-toggle { display: inline-flex; margin: 0 var(--gutter) 10px; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.wmap-toggle button { padding: 6px 16px; }
.wmap { display: grid; gap: 6px; justify-items: center; }
.wmap-svg { display: block; width: 100%; max-width: 640px; height: auto; max-height: 82vh; overflow: visible; }
.wmap-side { margin: 0; display: flex; align-items: center; gap: 6px; font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.wmap-side b { font: 700 var(--fs-2) var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.wmap-side.is-a { --side: var(--wf-a); }
.wmap-side.is-b { --side: var(--wf-b); }
.wmap-note { margin: 18px 0; font: var(--fs-2) var(--body); color: var(--mute); text-align: center; }
.wmap-retry { margin-left: 6px; font: inherit; color: var(--gold); background: none; border: 1px solid var(--rule);
  border-radius: var(--r); padding: 2px 10px; cursor: pointer; }

.wmap-zone { --side: var(--wf-a); cursor: pointer; outline: none; }
.wmap-zone.is-b { --side: var(--wf-b); }
.wmap-shape { stroke: var(--panel); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  fill: color-mix(in srgb, var(--side) 34%, var(--panel)); }
.wmap-zone.is-open .wmap-shape { fill: color-mix(in srgb, var(--side) 52%, var(--panel)); }
.wmap-zone.is-cleared .wmap-shape { fill: url(#wmap-hatch); stroke: color-mix(in srgb, var(--side) 55%, var(--panel)); }
.wmap-hatch-bg { fill: color-mix(in srgb, var(--bg) 82%, var(--panel)); }
.wmap-hatch-line { stroke: var(--dim); stroke-width: 1.4; opacity: .55; }
.wmap-zone.is-fogged .wmap-shape { fill: url(#wmap-fog); stroke: color-mix(in srgb, var(--side) 60%, var(--panel));
  stroke-dasharray: 5 4; }
.wmap-fog-bg { fill: color-mix(in srgb, var(--side, var(--dim)) 10%, var(--panel)); }
.wmap-fog-dot { fill: var(--wf-fog); stroke: var(--dim); stroke-width: .5; opacity: .9; }
.wmap-zone.is-unknown .wmap-shape { fill: color-mix(in srgb, var(--side) 12%, var(--panel)); opacity: .7; }
.wmap-zone:hover .wmap-shape, .wmap-zone[aria-expanded="true"] .wmap-shape { stroke: var(--ink); stroke-width: 2.5; }
.wmap-zone:focus-visible .wmap-shape { stroke: var(--gold); stroke-width: 3; }
.wmap-label { pointer-events: none; fill: var(--ink); font-family: var(--cond); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  paint-order: stroke; stroke: color-mix(in srgb, var(--panel) 80%, transparent); stroke-width: 3px; stroke-linejoin: round; }
.wmap-lrow, .wmap-lstat { fill: var(--mute); font-weight: 600; }
.wmap-zone.is-cleared .wmap-lcol, .wmap-zone.is-fogged .wmap-lcol { fill: var(--mute); }
.wmap-zone.is-fogged .wmap-lstat { font-style: italic; }
.wmap-line { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; opacity: .8; pointer-events: none; }
@media (max-width: 640px) {
  .wmap-toggle { margin-left: 12px; margin-right: 12px; }
}
@media (pointer: coarse) { .wmap-toggle button { padding: 10px 18px; } }
@media (prefers-reduced-motion: no-preference) {
  .wmap-shape { transition: fill .45s var(--ease), stroke .18s var(--ease); }
}

.war-field-prenote { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r); background: var(--panel); color: var(--mute); font-size: var(--fs-2); }

.wr-gift {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 26px; height: 26px; margin-left: 8px; padding: 0;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--mute); cursor: pointer;
}
.wr-gift:hover, .wr-gift:focus-visible, .wr-gift[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }
.wr-gift-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.wr-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gold); font: 600 var(--fs-1) var(--body); text-decoration: underline; text-underline-offset: 3px;
}
.wr-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 10px 0 14px; }
.wr-links-item { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); font: var(--fs-1) var(--body); }
.wr-info { margin-left: 8px; vertical-align: 1px; }

dialog.wr-pop { padding-top: 22px; }
@media (min-width: 561px) {
  dialog.bottom-sheet.wr-pop-wide { max-width: min(760px, calc(100vw - 32px)); max-height: 85vh; }
}
.wr-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.wr-pop-title { font: 700 var(--fs-4)/1.2 var(--cond); text-transform: uppercase; letter-spacing: .05em; }
.wr-pop-close {
  background: transparent; border: 1px solid var(--rule); border-radius: var(--r); color: var(--mute);
  padding: 6px 10px; cursor: pointer; font: var(--fs-1) var(--body);
}
.wr-pop-close:hover, .wr-pop-close:focus-visible { border-color: var(--gold); color: var(--gold); }
.wr-pop-wait, .wr-pop-note { color: var(--mute); font: var(--fs-1)/1.6 var(--body); }
.wr-pop-note { margin-top: 12px; }

.wsd { display: grid; gap: 16px; }
.wr-pop-title { overflow-wrap: anywhere; min-width: 0; }
@media (pointer: coarse) {
  .wr-pop-close { min-height: 40px; min-width: 64px; }
  .wsd a { display: inline-flex; align-items: center; min-height: 32px; }
}
.wsd-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wsd-muted { color: var(--mute); font: var(--fs-1)/1.5 var(--body); }
.wsd-sec { display: grid; gap: 8px; min-width: 0; }
.wsd-h { margin: 0; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wsd-note { margin: 0; color: var(--mute); font: var(--fs-1)/1.6 var(--body); }
.wsd-squad { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r);
  border: 1px solid var(--hairline-2); background: color-mix(in srgb, var(--bg) 60%, var(--panel)); }
.wsd-squadhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 4px; font-size: var(--fs-2); }
.wsd-squadstate { font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.wsd-squad.is-out .wsd-squadstate { color: var(--good); }
.wsd-hidden { margin: 4px 0 0; color: var(--dim); font: var(--fs-1)/1.5 var(--body); }

.wsd-ball, .wsd-dside { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center;
  gap: 8px; min-width: 0; padding: 4px 0; }
.wsd-ball + .wsd-ball { border-top: 1px solid var(--hairline-2); }
.wsd-ball .thumb, .wsd-dside .thumb, .wsd-blank { width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: var(--bg); object-fit: contain; }
.wsd-blank { display: block; }
.wsd-ballmid { display: grid; gap: 3px; min-width: 0; }
.wsd-balltop { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wsd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-2); }
.wsd-name.is-unknown { color: var(--dim); font-weight: 500; }
.wsd-ballsub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.wsd-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font: var(--fs-1) var(--body); color: var(--ink); }
.wsd-item .thumb { width: 18px; height: 18px; border: 0; border-radius: var(--r-sm); background: transparent; }
.wsd-item.is-none, .wsd-item.is-cp { color: var(--dim); }
.wsd-tier { font: 600 var(--fs-1) var(--mono); color: var(--gold); }
.wsd-cp { font: 600 var(--fs-2) var(--mono); color: var(--ink); text-align: right; }
.wsd-outtag { font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--bad); }
.wsd-ball.is-out > .thumb, .wsd-ball.is-out .wsd-blank { opacity: .45; filter: grayscale(1); }
.wsd-ball.is-out .wsd-name { text-decoration: line-through; color: var(--dim); }
.wsd-def + .wsd-def { border-top: 1px solid var(--hairline-2); }
.wsd-def > .wsd-ball { grid-template-columns: 32px minmax(0, 1fr) auto 5.6em; }
.wsd-hgap { display: block; }
.wsd-hbtn { justify-self: end; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 999px; border: 1px solid var(--hairline-2); background: transparent; color: var(--mute);
  font: 600 var(--fs-1) var(--body); white-space: nowrap; cursor: pointer; }
.wsd-hbtn:hover, .wsd-def.is-open .wsd-hbtn { color: var(--ink); border-color: var(--gold); }
.wsd-hbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wsd-hchev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); }
.wsd-def.is-open .wsd-hchev { transform: translateY(1px) rotate(-135deg); }
.wsd-dhist { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.wsd-dhist.is-open { grid-template-rows: 1fr; visibility: visible; }
.wsd-dhin { min-height: 0; overflow: hidden; display: grid; gap: 6px; padding: 0 0 0 40px; }
.wsd-dhist.is-open .wsd-dhin { padding-bottom: 8px; }
.wsd-dhsum { margin: 2px 0 0; font: 600 var(--fs-1)/1.5 var(--body); color: var(--ink); }
.wsd-dhlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wsd-dhatk { display: grid; gap: 4px; padding: 6px 8px; border-radius: var(--r); background: var(--row); }
.wsd-dhduel { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.wsd-dhduel .thumb, .wsd-dhduel .wsd-blank { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--bg); object-fit: contain; }
.wsd-dhwho { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wsd-dhcp { font: 500 var(--fs-1) var(--mono); color: var(--mute); white-space: nowrap; }
.wsd-dhduel.is-ko .wsd-verdict { color: var(--bad); }
@media (prefers-reduced-motion: no-preference) {
  .wsd-dhist { transition: grid-template-rows .22s ease, visibility 0s linear .22s; }
  .wsd-dhist.is-open { transition: grid-template-rows .22s ease, visibility 0s; }
  .wsd-dhist .wsd-dhin { opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .22s ease; }
  .wsd-dhist.is-open .wsd-dhin { opacity: 1; transform: none; }
  .wsd-hchev { transition: transform .2s ease; }
}
@media (max-width: 560px) {
  .wsd-dhin { padding-left: 0; }
}
@media (pointer: coarse) {
  .wsd-hbtn { min-height: 32px; }
}
.wsd-edge { font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }

.wsd-atks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wsd-atk { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r);
  border: 1px solid var(--hairline-2); background: color-mix(in srgb, var(--bg) 60%, var(--panel)); }
.wsd-aline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--fs-2); }
.wsd-time { margin-left: auto; font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.wsd-duels { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.wsd-duel { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: 8px; padding: 6px 8px; border-radius: var(--r); background: var(--row); }
.wsd-dnum { font: 600 var(--fs-1) var(--mono); color: var(--dim); text-align: center; }
.wsd-dside { padding: 0; }
.wsd-dside.wsd-team { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.wsd-team-faces { display: flex; flex-wrap: wrap; gap: 2px; }
.wsd-team-faces .thumb, .wsd-team-faces .wsd-blank { width: 26px; height: 26px; }
.wsd-team-name { white-space: normal; font-weight: 500; font-size: var(--fs-1); color: var(--mute); }
.wsd-end { font: var(--fs-1) var(--body); color: var(--mute); }
.wsd-dside.is-d { grid-template-columns: auto minmax(0, 1fr) 32px; }
.wsd-dside.is-d > :first-child { order: 3; }
.wsd-dside.is-d .wsd-ballmid { order: 2; justify-items: end; text-align: right; }
.wsd-dside.is-d .wsd-balltop, .wsd-dside.is-d .wsd-ballsub { justify-content: flex-end; }
.wsd-dside.is-d .wsd-cp { order: 1; text-align: left; }
.wsd-dside:not(.is-won) .wsd-cp { color: var(--mute); }
.wsd-verdict { font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.wsd-verdict.is-won { color: var(--good); }
.wsd-verdict.is-lost { color: var(--mute); }
@media (max-width: 560px) {
  .wsd-duel { grid-template-columns: 18px minmax(0, 1fr); row-gap: 4px; }
  .wsd-duel > .wsd-dnum { grid-row: span 3; align-self: start; padding-top: 8px; }
  .wsd-verdict { justify-self: start; }
  .wsd-dside.is-d { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .wsd-dside.is-d > :first-child, .wsd-dside.is-d .wsd-ballmid, .wsd-dside.is-d .wsd-cp { order: 0; }
  .wsd-dside.is-d .wsd-ballmid { justify-items: start; text-align: left; }
  .wsd-dside.is-d .wsd-balltop, .wsd-dside.is-d .wsd-ballsub { justify-content: flex-start; }
  .wsd-dside.is-d .wsd-cp { text-align: right; }
}

section.wr-side { padding: 12px 0; border-top: 1px solid var(--rule); }
section.wr-side:first-child { border-top: 0; padding-top: 0; }
.wr-side-name { font: 700 var(--fs-3)/1.3 var(--body); }
.wr-side-tier { color: var(--mute); font-weight: 500; }
.wr-side-result { margin: 4px 0; font: 700 var(--fs-2) var(--cond); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.wr-side-result.is-win { color: var(--good); }
.wr-side-result.is-loss { color: var(--bad); }
.wr-side-line { font: var(--fs-2)/1.55 var(--body); }

.wr-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wr-tier {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule);
  background: transparent; color: var(--mute); cursor: pointer; font: 500 var(--fs-1) var(--body);
}
.wr-tier[aria-pressed="true"] { color: var(--ink); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.wr-sub { margin: 12px 0 6px; font: 700 var(--fs-1) var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
table.wr-lines { width: 100%; min-width: 0; border-collapse: collapse; font: var(--fs-1) var(--body); }
.wr-lines th, .wr-lines td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--hairline-2); }
.wr-lines th.left { text-align: left; }
.wr-lines thead th { color: var(--dim); font-weight: 500; }
.wr-lines td { font-variant-numeric: tabular-nums; }
.wr-lines tr.is-mark th, .wr-lines tr.is-mark td { color: var(--gold); font-weight: 700; }

.wr-points { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.wr-point { display: grid; grid-template-columns: minmax(0, 11fr) minmax(60px, 7fr) auto; align-items: center; gap: 10px; font: var(--fs-1)/1.35 var(--body); }
.wr-point-bar { height: 8px; border-radius: 999px; background: var(--hairline-2); overflow: hidden; }
.wr-point-fill { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.wr-point-value { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.wr-advice p { font: var(--fs-2)/1.55 var(--body); margin-top: 8px; }
@media (max-width: 430px) {
  .wr-point { grid-template-columns: minmax(0, 1fr) auto; }
  .wr-point-bar { grid-column: 1 / -1; grid-row: 2; }
}
.rh-block { padding: 10px var(--gutter) 6px; }
.rh-leagues { display: inline-flex; gap: 4px; margin-bottom: 8px; padding: 3px;
  border-radius: 999px; background: var(--hairline-2); }
.rh-league { border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  font: 500 var(--fs-2) var(--body); color: var(--mute); background: transparent; }
.rh-league[aria-pressed="true"] { color: var(--ink); background: var(--panel); box-shadow: var(--shadow-card); }
.rh-league:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.rh-caption { margin: 0 0 8px; font: var(--fs-3) var(--body); color: var(--mute); }
.rh-frame { width: 100%; min-height: 180px; }
.rh-chart { display: block; max-width: 100%; overflow: visible; }
.rh-band { fill: transparent; }
.rh-band.is-alt { fill: var(--hairline-2); }
.rh-tier, .rh-week { fill: var(--dim); font: var(--fs-1) var(--mono); }
.rh-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rh-dot { fill: var(--panel); stroke: var(--gold); stroke-width: 2; cursor: pointer; }
.rh-dot.is-up { stroke: var(--good); }
.rh-dot.is-down { stroke: var(--bad); }
.rh-dot.is-picked { fill: var(--gold); }
.rh-dot.is-up.is-picked { fill: var(--good); }
.rh-dot.is-down.is-picked { fill: var(--bad); }
.rh-dot:focus { outline: none; }
.rh-dot:focus-visible { stroke-width: 3; }
.rh-ring { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; pointer-events: none; }
.rh-dot:focus-visible + .rh-ring { opacity: 1; }
.rh-readout { margin: 6px 0 0; min-height: 1.4em; font: var(--fs-2) var(--body); color: var(--ink); }
@media (max-width: 560px) {
  .rh-block { padding: 8px var(--gutter) 4px; }
}

.wm-head { margin: 0 0 10px; }
.wm-intro, .wm-lede { max-width: 72ch; color: var(--mute); line-height: 1.5; }
.wm-lede { margin: 6px 0 12px; }
.wm-section { margin: 22px 0 8px; }
.wm-section .wrap + .wrap { margin-top: 14px; }
tr.wm-thin > td, tr.wm-thin > td a { color: var(--dim); }
tr.wm-thin .thumb { opacity: .55; }
td.wm-thin-cell { color: var(--dim); font-style: italic; font-size: var(--fs-1); white-space: nowrap; }
.wm-against { white-space: nowrap; }
.wm-against .chips { vertical-align: middle; }
.wm-hi { color: var(--good); }
.wm-lo { color: var(--bad); }


.pg-block { padding: 10px var(--gutter) 14px; display: grid; gap: 10px; }
.pg-card { max-width: 720px; }
.pg-sub {
  margin: 6px 0 0; font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
}
.pg-achs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.pg-ach { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px;
  border-radius: var(--r); background: var(--hairline-2); }
.pg-ach[hidden] { display: none; }
.pg-mark { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 700 var(--fs-2) var(--cond); color: var(--mute); background: var(--panel); border: 1px solid var(--rule); }
.pg-ach.is-earned .pg-mark { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.pg-ach-body { display: grid; gap: 2px; min-width: 0; }
.pg-ach-name { font: 600 var(--fs-3) var(--body); color: var(--ink); }
.pg-ach-desc { font: var(--fs-2) var(--body); color: var(--mute); overflow-wrap: anywhere; }
.pg-ach-meta { font: var(--fs-1) var(--mono); color: var(--dim); }
.pg-bar { display: block; height: 3px; margin-top: 4px; border-radius: var(--r-sm); background: var(--lift); }
.pg-bar > span { display: block; height: 100%; border-radius: var(--r-sm); background: var(--gold); }
.pg-more { justify-self: start; }
.badges.pg-passes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.badge.pg-pass { flex-direction: column; justify-content: flex-start; gap: 4px; min-width: 0;
  padding: 10px 8px 9px; text-align: center; }
.pg-pass-icon { width: 40px; height: 40px; object-fit: contain; flex: none; }
.pg-pass-icon.is-glyph { display: grid; place-items: center; color: var(--mute); }
.badge.pg-pass .pg-pass-name { width: 100%; font-size: var(--fs-2); white-space: normal;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pg-pass-tier { font: 600 var(--fs-2) var(--mono); color: var(--mute); }
.badge.pg-pass.is-done { border-color: var(--gold); }
.badge.pg-pass.is-done .pg-pass-icon.is-glyph, .badge.pg-pass.is-done .pg-pass-tier { color: var(--gold); }
@media (max-width: 420px) {
  .badges.pg-passes { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

.tc-grid { display: grid; gap: 14px; }
.tc-side td.up { color: var(--good); }
.tc-side td.down { color: var(--bad); }
.tc-latest { margin-top: 8px; }
.tc-recent { list-style: none; margin: 0; padding: 0 var(--gutter) 12px; display: grid; gap: 2px; }
.tc-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  padding: 6px 0; border-bottom: 1px solid var(--hairline-2); font: var(--fs-2) var(--body); color: var(--mute); }
.tc-cap a { color: var(--ink); }
.tc-when { font: var(--fs-1) var(--mono); color: var(--dim); }
.tc-rivals { padding: 0 var(--gutter) 10px; display: grid; gap: 4px; }
.tc-rival { margin: 0; font: var(--fs-2) var(--body); color: var(--mute); }
.tc-rival b { color: var(--ink); font-weight: 600; }
.tc-turnout[hidden] { display: none; }

.acct-discord-verify { margin-top: 12px; }

.ws-head { padding: 22px var(--gutter) 6px; display: grid; gap: 4px; max-width: 1100px; box-sizing: border-box; }
.ws-beta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--rule)); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--gold) 12%, var(--panel)); }
.ws-beta-tag { font: 800 var(--fs-5)/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); }
.ws-beta-text { color: var(--ink); font: 600 var(--fs-3) var(--body); }
.ws-duel-note { margin: 0 0 10px; color: var(--mute); font: var(--fs-2)/1.5 var(--body); }
.ws-kicker { justify-self: start; padding: 2px 8px; border-radius: 999px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent); font: 700 var(--fs-1) var(--body); }
.ws-title { font: 700 var(--fs-5) var(--cond); letter-spacing: .03em; text-transform: uppercase; margin: 0; }
.ws-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--mute); font: var(--fs-3) var(--body); margin: 0; }
.ws-left { color: var(--dim); }
.ws-access { color: var(--ink); font: 600 var(--fs-3) var(--body); margin: 0; }
.ws { display: grid; gap: 14px; padding: 10px var(--gutter) 40px; max-width: 1100px; }
.ws .war-lock-shared { margin: 0; }
.ws-note { color: var(--mute); font: var(--fs-3)/1.6 var(--body); margin: 0; }
.ws-empty { padding: 24px var(--gutter); display: grid; gap: 12px; justify-items: start;
  color: var(--mute); font: var(--fs-3)/1.6 var(--body); max-width: 70ch; }
.ws-empty p { margin: 0; }
.ws-empty-line { color: var(--dim); font: var(--fs-2)/1.6 var(--body); margin: 0; }

.ws-card { display: grid; gap: 12px; min-width: 0; padding: 14px 16px 16px; background: var(--panel);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.ws-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-card-title { margin: 0; font: 700 var(--fs-2) var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.ws-card-hint { margin-left: auto; color: var(--dim); font: var(--fs-1) var(--body); }
.ws-line { margin: 0; color: var(--ink); font: var(--fs-3)/1.55 var(--body); }
.ws-reach { color: var(--mute); }
.ws-reach.is-out { color: var(--bad); font-weight: 600; }
.ws-link { justify-self: start; min-height: 32px; padding: 6px 0; background: none; border: 0; color: var(--gold);
  font: 600 var(--fs-2) var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ws-warn { color: var(--acc-amber); }

.ws-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.ws-score-side { display: grid; gap: 2px; min-width: 0; }
.ws-score-side + .ws-score-vs + .ws-score-side { text-align: right; }
.ws-score-name { color: var(--mute); font: 600 var(--fs-2) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-score-side.is-mine .ws-score-name { color: var(--gold); }
.ws-score-val { font: 700 var(--fs-5) var(--mono); }
.ws-score-vs { color: var(--dim); font: var(--fs-1) var(--body); padding-bottom: 8px; }
.ws-chance { display: flex; height: 30px; border-radius: var(--r); overflow: hidden; background: var(--row); }
.ws-chance-a, .ws-chance-b { display: flex; align-items: center; min-width: 0; padding: 0 10px;
  font: 700 var(--fs-2) var(--mono); transition: flex-basis .4s var(--ease); }
.ws-chance-a { flex: 0 0 var(--w); color: var(--bg); background: var(--gold); }
.ws-chance-b { flex: 1 1 auto; justify-content: flex-end; color: var(--mute); }
.ws-chance-a b, .ws-chance-b b { white-space: nowrap; }
.ws-chance.is-none { align-items: center; justify-content: center; color: var(--dim); font: var(--fs-3) var(--mono); }
.ws-refresh { justify-self: start; }

.ws-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws .btn-small { min-height: 32px; }
.ws-ball-meta { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; min-width: 0; }
.ws-ball-meta small { flex: none; }
.ws-ball-meta .chips { min-width: 0; vertical-align: 0; flex-wrap: wrap; }
.ws-ball-text { display: grid; gap: 2px; min-width: 0; }
.ws-ball-text b { font: 600 var(--fs-2)/1.25 var(--body); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ws-ball-text small { color: var(--dim); font: var(--fs-1) var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ball-tag { justify-self: start; padding: 0 6px; border-radius: 999px; font-style: normal;
  background: var(--panel); border: 1px solid var(--rule); color: var(--mute); font: normal var(--fs-1) var(--body); }

.ws-target-where, .ws-target-score { display: grid; gap: 1px; min-width: 0; }
.ws-target-where b { font: 700 var(--fs-3) var(--body); }
.ws-target-where small, .ws-target-score small { color: var(--dim); font: var(--fs-1) var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-target-score { text-align: right; }
.ws-target-score b { font: 700 var(--fs-3) var(--mono); color: var(--gold); }
.ws-pips { display: flex; gap: 3px; }
.ws-pip { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--row); border: 1px solid var(--rule); overflow: hidden; }
.ws-pip .thumb { width: 22px; height: 22px; }
.ws-pip.is-hidden { border-style: dashed; background: transparent; }
.ws-more { justify-self: start; }

.ws-slot-n { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--rule); color: var(--mute); font: 700 var(--fs-1) var(--mono); }
.ws-slot-vs { color: var(--dim); font: var(--fs-1) var(--body); }
.ws-foe.is-hidden { color: var(--mute); }
.ws-foe-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 120px; }
.ws-foe-text b { font: 600 var(--fs-2) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-foe-text small { color: var(--dim); font: var(--fs-1) var(--body); }
.ws-verdict { display: grid; gap: 1px; justify-items: end; text-align: right; padding: 4px 9px;
  border-radius: var(--r-sm); font: 600 var(--fs-1) var(--body); }
.ws-verdict b { font: 700 var(--fs-3) var(--mono); }
.ws-verdict.is-good { color: var(--good); background: color-mix(in srgb, var(--good) 13%, transparent); }
.ws-verdict.is-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 11%, transparent); }
.ws-verdict.is-even { color: var(--mute); background: var(--row); }
.ws-verdict.is-none { color: var(--dim); }
.ws-foot-note { color: var(--dim); font: var(--fs-1) var(--body); }

.ws-plan-top { display: flex; gap: 4px 10px; align-items: center; flex-wrap: wrap; }
.ws-plan-top b { font: 700 var(--fs-3) var(--body); }
.ws-plan-top span { color: var(--mute); font: var(--fs-2) var(--body); }
.ws-plan-top .ws-plan-pts { margin-left: auto; color: var(--gold); font: 700 var(--fs-2) var(--mono); }
.ws-plan-balls { display: flex; flex-wrap: wrap; gap: 5px; }
.ws-plan-ball { display: inline-flex; gap: 5px; align-items: center; padding: 2px 8px 2px 3px; border-radius: 999px;
  background: var(--row); color: var(--ink); font: var(--fs-1) var(--body); }
.ws-plan-ball .thumb { width: 20px; height: 20px; }
.ws-plan-ball.is-out { opacity: .45; text-decoration: line-through; }
.ws-plan-ball.is-hidden { padding: 2px 8px; border: 1px dashed var(--rule); background: none; color: var(--dim); }
.ws-own { display: grid; gap: 8px; }
.ws-own-squad { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ws-own-squad b { font: 600 var(--fs-2) var(--body); }
.ws-own-squad small { color: var(--mute); font: var(--fs-1) var(--body); }
.ws-own-squad.is-out small { color: var(--bad); }
.ws-stepper { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--bg); }
.ws-stepper-label { color: var(--mute); font: var(--fs-2) var(--body); }
.ws-step { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; background: var(--panel);
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-sm); font: 700 var(--fs-3) var(--mono); cursor: pointer; }
.ws-step:disabled { opacity: .4; cursor: default; }
.ws-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ws-step-val { min-width: 20px; text-align: center; font: 700 var(--fs-3) var(--mono); }
.ws-def-row { display: grid; gap: 6px; }
.ws-def-label { color: var(--dim); font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.ws-def-balls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.ws-def-ball { display: flex; gap: 7px; align-items: center; min-width: 0; padding: 6px 8px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); }
.ws-def-ball .thumb { width: 30px; height: 30px; flex: none; }
.ws-def-ball .ws-def-note { font-family: var(--body); color: var(--mute); white-space: normal; }
.ws-def-ball .ws-def-note.is-good { color: var(--good); }
.ws-def-ball .ws-def-note.is-bad { color: var(--bad); }

.ws-dp-squad, .ws-dp-save { display: grid; gap: 8px; min-width: 0; padding: 10px; border-radius: var(--r-lg);
  background: var(--bg); border: 1px solid var(--hairline-2); }
.ws-dp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ws-dp-title { margin: 0; color: var(--mute); font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.ws-dp-zone { padding: 1px 8px; border-radius: 999px; font: 600 var(--fs-1) var(--body); color: var(--mute);
  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-dp-zone.is-front { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.ws-dp-free { margin-left: auto; color: var(--dim); font: var(--fs-1) var(--body); }
.ws-dp-head .ws-verdict { margin-left: auto; }
.ws-dp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ws-dp-ball { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 6px 8px;
  border-radius: var(--r); background: var(--panel); border: 1px solid var(--hairline-2); }
.ws-dp-ball.is-anchor { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.ws-dp-ball .thumb { width: 34px; height: 34px; flex: none; background: none; border: 0; }
.ws-dp-seat { flex: none; display: grid; justify-items: center; width: 42px; }
.ws-dp-seat b { color: var(--ink); font: 700 var(--fs-3)/1.1 var(--mono); }
.ws-dp-seat small { color: var(--dim); font: var(--fs-1) var(--body); }
.ws-dp-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ws-dp-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ws-dp-name b { min-width: 0; color: var(--ink); font: 600 var(--fs-2)/1.25 var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-dp-tag { flex: none; padding: 0 7px; border-radius: 999px; font: normal 600 var(--fs-1) var(--body); color: var(--mute);
  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-dp-tag.is-anchor { color: var(--ink); background: color-mix(in srgb, var(--gold) 28%, transparent); }
.ws-dp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.ws-dp-meta .chips { flex-wrap: wrap; }
.ws-dp-cp { color: var(--mute); font: 600 var(--fs-1) var(--mono); }
.ws-dp-item { min-width: 0; color: var(--mute); font: var(--fs-1) var(--body); overflow-wrap: anywhere; }
.ws-dp-why { color: var(--mute); font: var(--fs-1)/1.35 var(--body); }
.ws-dp-why.is-good { color: var(--good); }
.ws-dp-why.is-bad { color: var(--bad); }
.ws-dp-weak { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--dim); font: var(--fs-1) var(--body); }
@media (max-width: 640px) {
  .ws-defence .ws-step { width: 44px; height: 44px; }
}

.wsl { display: grid; gap: 10px; }
.wsl-sides, .wsl-list { margin: 0 var(--gutter); }
.wsl-sides .wat-chip { min-height: 44px; }
.wsl-list { display: grid; gap: 10px; }
.wsl-player { display: grid; gap: 8px; min-width: 0; padding: 12px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card); }
.wsl-player.is-me { box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.wsl-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wsl-who .thumb { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; }
.wsl-name { margin: 0; min-width: 0; font: 600 var(--fs-3)/1.2 var(--body); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsl-none { margin: 0; color: var(--dim); font: var(--fs-2) var(--body); }
.wsl-balls { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(132px, calc((100% - 32px) / 5)), 1fr)); gap: 8px; }
.pv2-ball.wsl-ball { cursor: default; }
.pv2-ball.wsl-ball:hover { border-color: var(--rule); transform: none; }
.wsl-ball > .thumb.is-blank { display: block; border-radius: var(--r-sm); }
.wsl-ball .pv2-ball-types { zoom: 1; max-width: 100%; flex-wrap: wrap; }
.wsl-ball .pv2-item-pic .thumb.is-blank { width: 24px; height: 24px; }
.wsl-item.is-p4 .pv2-item-pic { box-shadow: 0 0 0 2px var(--gold); }
.wsl-item.is-p3 .pv2-item-pic { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.wsl-item-text { display: grid; justify-items: start; gap: 2px; min-width: 0; flex: 1; }
.wsl-item-name { max-width: 100%; font: 600 var(--fs-1)/1.25 var(--body); color: var(--ink);
  overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.wsl-tier { padding: 0 7px; border-radius: 999px; font: 600 var(--fs-1)/1.4 var(--mono);
  color: var(--mute); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.wsl-item.is-p4 .wsl-tier { color: var(--ink); background: color-mix(in srgb, var(--gold) 30%, transparent); }
.wsl-item.is-p3 .wsl-tier { color: var(--ink); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.wsl-item.is-none { justify-content: center; min-height: 38px; font: var(--fs-1) var(--body); color: var(--dim); }
.wsl-ball .war-hp { justify-content: center; width: 100%; text-align: center; }
.wsl-ball .war-hp-bar { flex: 1 1 100%; max-width: 88px; }
@media (max-width: 560px) {
  .wsl-balls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wsl-player { padding: 10px; }
  .wsl-item:not(.is-none) { flex-direction: column; padding: 6px 4px; text-align: center; }
  .wsl-item-text { justify-items: center; }
}
.wsl-balls.is-compact { grid-template-columns: repeat(auto-fill, minmax(max(116px, calc((100% - 42px) / 8)), 1fr)); gap: 6px; }
.wsl-balls.is-compact > .wsl-ball { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 6px 4px; }
.wsl-balls.is-compact > .wsl-ball > .thumb { width: 44px; height: 44px; }
.wsl-balls.is-compact .wsl-ball-name { font-size: var(--fs-1); line-height: 1.2; text-align: center;
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.wsl-balls.is-compact .wsl-cp { flex-wrap: wrap; justify-content: center; column-gap: 3px; }
.wsl-balls.is-compact .wsl-cp b { font-size: var(--fs-3); }
.wsl-balls.is-compact .pv2-ball-types { gap: 3px; justify-content: center; }
.wsl-balls.is-compact .chip { gap: 3px; padding: 1px 4px 1px 2px; letter-spacing: 0; }
.wsl-balls.is-compact .chip img { width: 12px; height: 12px; }
.wsl-balls.is-compact .wbt-tile-tag { letter-spacing: .04em; line-height: 1.2; text-align: center; }
.wsl-balls.is-compact .war-hp-num { white-space: normal; }
.wsl-balls.is-compact .wsl-item { justify-content: center; gap: 4px; margin-top: 2px; padding: 3px; }
.wsl-balls.is-compact .wsl-item-text { display: flex; flex: none; }
.wsl-balls.is-compact .wsl-item-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wsl-balls.is-compact .wsl-item.is-none { min-height: 36px; }
@media (max-width: 560px) {
  .wsl-balls.is-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .wsl-player { padding: 8px; }
  .wsl-balls.is-compact > .wsl-ball { padding: 5px 3px; }
  .wsl-balls.is-compact > .wsl-ball > .thumb { width: 36px; height: 36px; }
  .wsl-balls.is-compact .wsl-item:not(.is-none) { flex-direction: row; padding: 3px; }
}

.ws-mate-list { display: grid; gap: 6px; }
.ws-mate { min-width: 0; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); }
.ws-mate.is-me { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.ws-mate[open] { border-color: var(--mute); }
.ws-mate-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 12px; align-items: center;
  padding: 9px 12px; cursor: pointer; list-style: none; }
.ws-mate-sum::-webkit-details-marker { display: none; }
.ws-mate-sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r); }
.ws-mate-who, .ws-mate-next { display: grid; gap: 1px; min-width: 0; }
.ws-mate-who { grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; }
.ws-mate-who b { font: 700 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mate-who small { grid-column: 1 / -1; color: var(--dim); font: var(--fs-1) var(--body); }
.ws-mate-next { text-align: right; }
.ws-mate-next b { font: 700 var(--fs-3) var(--mono); color: var(--gold); }
.ws-mate-next small { color: var(--mute); font: var(--fs-1) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mate-body { display: grid; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--rule); }
.ws-mate-step { display: grid; gap: 6px; }
.ws-mate-step + .ws-mate-step { padding-top: 10px; border-top: 1px dashed var(--rule); }
.ws-mini-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ws-mini-slot { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px;
  align-items: center; }
.ws-mini-ball { display: flex; gap: 5px; align-items: center; min-width: 0; font: var(--fs-2) var(--body); }
.ws-mini-ball span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mini-ball .thumb { width: 22px; height: 22px; flex: none; }
.ws-mini-ball { color: var(--mute); }
.ws-mini-ball.is-hidden { color: var(--dim); }
.ws-mini-ball.is-mine { color: var(--ink); font-weight: 600; }
.ws-mini-slot .ws-verdict { font-size: var(--fs-1); padding: 2px 8px; }
.ws-risk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ws-risk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center;
  padding: 9px 12px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); }
.ws-risk.is-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); }
.ws-aplan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ws-aplan-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
  padding: 8px 10px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); }
.ws-aplan-step.is-me { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.ws-aplan-words { min-width: 0; font: var(--fs-2)/1.45 var(--body); overflow-wrap: anywhere; }
.ws-aplan-who { font-weight: 700; }
.ws-aplan-step .ws-verdict { font: 600 var(--fs-1) var(--body); white-space: nowrap; }
@media (max-width: 420px) {
  .ws-aplan-step { grid-template-columns: minmax(0, 1fr); }
  .ws-aplan-step .ws-verdict { justify-self: start; }
}
.ws-risk .ws-target-score b { color: var(--bad); }
.ws-risk .ws-target-score small { white-space: normal; }
.ws-threats .ws-mate-next b, .ws-threats .ws-plan-pts { color: var(--bad); }

.ws-strip { gap: 8px; }
.ws-strip-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--mute); font: var(--fs-2) var(--body); }
.ws-strip-ready { color: var(--ink); font-weight: 600; }
.ws-switch { justify-self: start; }
.ws-row { display: grid; gap: 8px; }
.ws-row + .ws-row { padding-top: 6px; border-top: 1px solid var(--rule); }
.ws-row-title { margin: 0; color: var(--dim); font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.ws-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.ws-zone { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 10px; background: var(--bg);
  border: 1px solid var(--rule); border-radius: var(--r); }
.ws-zone.is-locked { border-style: dashed; background: transparent; }
.ws-zone.is-cleared { opacity: .6; }
.ws-zone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-zone-head b { font: 700 var(--fs-3) var(--body); }
.ws-zone-tag { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--mute);
  font: 600 var(--fs-1) var(--body); }
.ws-zone.is-open .ws-zone-tag { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.ws-squad { min-width: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.ws-squad { display: grid; gap: 6px; padding-bottom: 8px; }
.ws-squad > :not(.ws-squad-sum) { margin-left: 10px; margin-right: 10px; }
.ws-ladder { display: grid; gap: 8px; min-width: 0; }
.ws-ladder-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ws-ladder-title { margin: 0; font: 700 var(--fs-2) var(--body); color: var(--ink); }
.ws-ladder-verdict { display: inline-flex; align-items: baseline; gap: 8px; }
.ws-ladder-verdict b { font: 700 var(--fs-2) var(--body); }
.ws-ladder-verdict small { color: var(--dim); font: var(--fs-1) var(--body); }
.ws-ladder-verdict.is-good b { color: var(--good); }
.ws-ladder-verdict.is-bad b, .ws-ladder-verdict.is-even b { color: var(--bad); }
.ws-rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ws-rung { display: grid; grid-template-columns: 18px minmax(0, 1fr) 92px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 6px 8px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); }
.ws-rung-n { color: var(--dim); font: 700 var(--fs-1) var(--mono); text-align: center; }
.ws-rung-ball { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ws-rung-ball.is-def { justify-content: flex-end; text-align: right; }
.ws-rung-ball .thumb { width: 30px; height: 30px; flex: none; }
.ws-rung-q { display: grid; place-items: center; color: var(--dim); font: 700 var(--fs-2) var(--body);
  border: 1px dashed var(--rule); border-radius: 50%; }
.ws-rung-text { display: grid; min-width: 0; }
.ws-rung-text b { font: 600 var(--fs-2)/1.25 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-rung-text small { color: var(--dim); font: var(--fs-1) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-rung-ball.is-hidden .ws-rung-text b { color: var(--mute); font-weight: 500; }
.ws-chip { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
  font: 700 var(--fs-1) var(--body); text-transform: uppercase; letter-spacing: .04em; cursor: help; white-space: nowrap; }
.ws-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ws-chip-mark { font-style: normal; }
.ws-chip-margin { font: 600 var(--fs-1) var(--mono); text-transform: none; letter-spacing: 0; opacity: .85; }
.ws-chip.is-win { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.ws-chip.is-lose { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.ws-chip.is-hidden, .ws-chip.is-even, .ws-chip.is-none { color: var(--mute); background: var(--row); }
@media (max-width: 640px) {
  .ws-rung { grid-template-columns: 14px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; padding: 5px 6px; }
  .ws-rung-ball { gap: 5px; }
  .ws-rung-ball .thumb { width: 24px; height: 24px; }
  .ws-chip { padding: 3px 6px; }
  .ws-chip b { display: none; }
}
.ws-rung-why { grid-column: 1 / -1; color: var(--mute); font: var(--fs-1)/1.45 var(--body); }
button.ws-chip { border: 0; cursor: pointer; }
.ws-chip-margin.is-approx { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.ws-ladder-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ws-tool { min-height: 44px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel);
  color: var(--ink); font: 600 var(--fs-2) var(--body); cursor: pointer; }
.ws-tool:hover:not(:disabled) { border-color: var(--gold); }
.ws-tool:focus-visible, .ws-move:focus-visible, .ws-pick-ball:focus-visible, .ws-rung-ball.is-pick:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; }
.ws-tool:disabled { color: var(--dim); cursor: default; }
.ws-tool.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ws-tool.is-quiet { background: none; color: var(--mute); }
.ws-ladder.is-editing .ws-rung { grid-template-columns: 18px minmax(0, 1fr) 92px minmax(0, 1fr) auto; }
.ws-rung.is-movable { cursor: grab; }
.ws-rung.is-dragging { opacity: .45; }
.ws-rung.is-over { border-color: var(--gold); }
.ws-rung-move { display: flex; gap: 4px; }
.ws-move { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); color: var(--ink); font: 700 var(--fs-3) var(--body); cursor: pointer; }
.ws-move:disabled { color: var(--rule); cursor: default; }
button.ws-rung-ball.is-pick { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; text-align: left;
  font: inherit; cursor: pointer; }
.ws-rung-change { color: var(--gold) !important; font-weight: 600; }
.ws-pick-list { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 4px; }
.ws-pick-h { color: var(--mute); font: 600 var(--fs-1) var(--body); }
.ws-pick-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ws-pick-ball { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); color: var(--ink); cursor: pointer; text-align: left; }
.ws-pick-ball:hover { border-color: var(--gold); }
.ws-pick-ball .thumb { width: 28px; height: 28px; flex: none; }
.ws-pick-ball .ws-rung-text { flex: 1; }
.ws-pick-ball .ws-chip { cursor: inherit; }
@media (max-width: 640px) {
  .ws-ladder.is-editing .ws-rung { grid-template-columns: 16px minmax(0, 1fr) auto minmax(0, 1fr); }
  .ws-ladder.is-editing .ws-rung-move { grid-column: 1 / -1; justify-content: flex-end; }
}
.ws-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--row); justify-self: start; }
.ws-tab { padding: 5px 12px; border: 0; border-radius: 999px; background: none; color: var(--mute); cursor: pointer;
  font: 600 var(--fs-1) var(--body); }
.ws-tab.is-on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-card); }
.ws-matchups { display: grid; gap: 14px; }
.ws-mu-zone-sec { display: grid; gap: 6px; }
.ws-mu-h { margin: 0; font: 700 var(--fs-2) var(--body); color: var(--ink); }
.ws-mu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ws-mu-row { display: grid; grid-template-columns: minmax(0, 9rem) auto minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 6px 8px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); }
.ws-mu-row.is-none { opacity: .75; }
.ws-mu-def { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ws-mu-def .thumb { width: 28px; height: 28px; flex: none; }
.ws-mu-def-text { display: grid; min-width: 0; }
.ws-mu-def-text b, .ws-mu-def > b { font: 600 var(--fs-2)/1.25 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mu-def-text small, .ws-mu-def > small { color: var(--dim); font: var(--fs-1) var(--body); }
.ws-mu-arrow { font-style: normal; color: var(--dim); }
.ws-mu-wins { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ws-mu-none { color: var(--mute); font: var(--fs-1) var(--body); }
.ws-mchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--good) 40%, var(--rule)); background: color-mix(in srgb, var(--good) 8%, var(--panel));
  color: var(--ink); font: 500 var(--fs-1) var(--body); }
button.ws-mchip { cursor: pointer; }
.ws-mchip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ws-mchip .thumb { width: 20px; height: 20px; flex: none; }
.ws-mchip .ws-chip-margin { color: var(--good); }
.ws-mu-hidden, .ws-mu-cap { margin: 0; color: var(--dim); font: var(--fs-1) var(--body); }
.ws-mu-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ws-mu-row .ws-mu-zone { color: var(--mute); font: 600 var(--fs-1) var(--body); }
.ws-mu-focus + .ws-mu-cap + .ws-mu-list .ws-mu-row { grid-template-columns: 6.5rem minmax(0, 1fr); }
@media (max-width: 640px) {
  .ws-mu-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .ws-mu-arrow { display: none; }
}
.ws-standing { margin: 0; color: var(--mute); font: var(--fs-1)/1.4 var(--body); }
.ws-squad-more > summary { cursor: pointer; color: var(--mute); font: 600 var(--fs-1) var(--body); padding: 2px 0; }
.ws-squad-more > .ws-squad-body { border-top: 0; padding: 8px 0 0; }
.ws-sub-h { font: 600 var(--fs-1) var(--body); color: var(--dim); }
.wsd-details > summary { cursor: pointer; padding: 10px 2px; color: var(--mute); font: 600 var(--fs-3) var(--body); }
.ws-squad.is-out { opacity: .55; }
.ws-squad-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
  padding: 8px 10px 0; list-style: none; }
.ws-squad-sum::-webkit-details-marker { display: none; }
.ws-squad-sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r); }
.ws-squad-who, .ws-squad-top { display: grid; gap: 1px; min-width: 0; }
.ws-squad-who b { font: 700 var(--fs-2) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-squad-who small, .ws-squad-top small { color: var(--dim); font: var(--fs-1) var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-squad-top { grid-column: 1 / -1; }
.ws-squad-best { font: 700 var(--fs-2) var(--body); }
.ws-squad-best.is-good { color: var(--good); }
.ws-squad-best.is-bad { color: var(--bad); }
.ws-squad-body { display: grid; gap: 12px; padding: 10px 10px 12px; border-top: 1px solid var(--rule); }
.ws-squad-sec { display: grid; gap: 6px; min-width: 0; }
.ws-pip.is-out { opacity: .35; }
.ws-left { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ws-left-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 6px 10px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--rule); }
.ws-left-row .thumb { width: 32px; height: 32px; }
.ws-left-text { display: grid; gap: 4px; min-width: 0; }
.ws-left-name { min-width: 0; font: 600 var(--fs-2)/1.25 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-left-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ws-left-cp { font: 600 var(--fs-1) var(--mono); color: var(--mute); white-space: nowrap; }
.ws-left-hidden { padding: 2px 8px; color: var(--dim); font: var(--fs-1) var(--body); }
.ws-left-picks { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
  gap: 4px 8px; min-width: 0; }
.ws-left-picks-h { color: var(--dim); font: 600 var(--fs-1) var(--body); line-height: 26px; white-space: nowrap; }
.ws-left-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ws-left-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0;
  padding: 2px 8px 2px 3px; border-radius: 999px; background: var(--row); border: 1px solid var(--rule); }
.ws-left-chip .thumb { width: 20px; height: 20px; flex: none; }
.ws-left-chip-name { min-width: 0; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font: 600 var(--fs-1) var(--body); }
.ws-left-chip-call { flex: none; white-space: nowrap; font: 600 var(--fs-1) var(--body); color: var(--mute); }
.ws-left-chip.is-good .ws-left-chip-call { color: color-mix(in srgb, var(--good) 45%, var(--ink)); }
.ws-left-chip.is-bad .ws-left-chip-call { color: color-mix(in srgb, var(--bad) 55%, var(--ink)); }
@media (max-width: 640px) {
  .ws-left-picks { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ws-left-chips { display: grid; gap: 1px; }
  .ws-left-chip { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px;
    padding: 2px 4px 2px 2px; border: 0; border-radius: var(--r-sm); background: none; }
  .ws-left-chip .thumb { width: 18px; height: 18px; }
  .ws-left-chip-name { max-width: none; font-weight: 500; }
  .ws-left-chip-call { text-align: right; }
}
.ws-att.ws-edge, .ws-att.ws-edge:hover { cursor: default; border-color: var(--rule); }
.ws-mate-next b.ws-next-call.is-bad { color: color-mix(in srgb, var(--bad) 55%, var(--ink)); }
.ws-mate-next b.ws-next-call.is-even { color: color-mix(in srgb, var(--gold) 60%, var(--ink)); }
@media (max-width: 560px) {
  .ws-att.ws-edge { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .ws-att.ws-edge > .ws-verdict { grid-column: 2; justify-self: start; text-align: left; }
}
.ws-send-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.ws-seats, .ws-att-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ws-foe { display: flex; gap: 7px; align-items: center; min-width: 0; }
.ws-foe .thumb { width: 28px; height: 28px; flex: none; }
.ws-att { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 6px 8px; text-align: left; background: var(--bg); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r); cursor: pointer; }
.ws-att:hover { border-color: var(--mute); }
.ws-att:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ws-att.is-me { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.ws-att .thumb { width: 30px; height: 30px; flex: none; }
.ws-att > .ws-att-text:first-child { grid-column: 1 / 3; }
.ws-att-text { display: grid; gap: 1px; min-width: 0; }
.ws-att-name { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; min-width: 0; }
.ws-att-name b, .ws-att-text > b { font: 600 var(--fs-2)/1.25 var(--body); overflow-wrap: anywhere; }
.ws-att-text small { color: var(--dim); font: var(--fs-1) var(--body); }
.ws-att-why { color: var(--mute) !important; }
.ws-att-also { display: grid; gap: 2px; padding: 4px 10px 2px 46px; color: var(--mute); font: var(--fs-1) var(--body); }
.ws-att-also ul { margin: 0; padding-left: 16px; }
.ws-planned { color: var(--mute); font-size: var(--fs-2); }
.ws-squad-mine .ws-plan-top .ws-def-label { color: var(--dim); font: 700 var(--fs-1) var(--cond); }
.ws-myball-who { display: flex; gap: 7px; align-items: center; min-width: 0; }
.ws-myball-who .thumb { width: 30px; height: 30px; flex: none; }
.ws-myball.is-out { opacity: .6; }
.ws-myball .ws-mate-next b { font: 700 var(--fs-2) var(--body); }
.ws-myballs .ws-mate-body { justify-items: stretch; }
.ws-myballs .ws-mate-body > .btn { justify-self: start; }
.ws-more-area { min-width: 0; background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.ws-more-sum { padding: 12px 16px; cursor: pointer; color: var(--mute); font: 600 var(--fs-2) var(--body); }
.ws-more-sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-lg); }
.ws-more-body { display: grid; gap: 14px; padding: 0 0 4px; }
.ws-more-body > .ws-card { box-shadow: none; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; }
@media (max-width: 560px) {
  .ws-zones { grid-template-columns: minmax(0, 1fr); }
  .ws-att-also { padding-left: 10px; }
}

.ws-offwar-banner { display: grid; gap: 4px; padding: 12px 16px; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r-lg); }
.ws-offwar-banner p { margin: 0; color: var(--mute); font: var(--fs-3)/1.55 var(--body); }
.ws-offwar-banner .ws-offwar-why { color: var(--ink); font-weight: 600; }
.ws-offwar-tag { color: var(--gold); font: 700 var(--fs-3) var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.ws-offwar { display: grid; gap: 14px; min-width: 0; }
.ws-offwar-list { list-style: none; margin: 0; padding: 0; }
.ws-offwar-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 2px 10px; align-items: center;
  min-height: 40px; padding: 5px 0; border-top: 1px solid var(--rule); }
.ws-offwar-row:last-child { border-bottom: 1px solid var(--rule); }
.ws-offwar-row .thumb { width: 30px; height: 30px; }
.ws-offwar-who { display: grid; min-width: 0; }
.ws-offwar-who b { font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-offwar-who small { color: var(--mute); font: var(--fs-1) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-offwar-p { display: grid; justify-items: end; text-align: right; }
.ws-offwar-p b { font: 700 var(--fs-3) var(--mono); font-variant-numeric: tabular-nums; }
.ws-offwar-p small { color: var(--dim); font: var(--fs-1) var(--body); white-space: nowrap; }
.ws-offwar-p.is-good b { color: var(--good); }
.ws-offwar-p.is-bad b { color: var(--bad); }

@media (max-width: 720px) {
  .ws { padding-left: 12px; padding-right: 12px; }
  .ws-offwar-banner { padding: 12px; }
  .ws-offwar-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .ws-offwar-who b, .ws-offwar-who small { white-space: normal; }
  .ws-offwar-row > .thumb { grid-row: 1 / span 2; }
  .ws-offwar-row > .chips { grid-column: 2; grid-row: 2; justify-self: start; }
  .ws-offwar-row > .ws-offwar-p { grid-column: 3; grid-row: 1 / span 2; }
  .ws-mate-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .ws-mate-next { display: contents; }
  .ws-mate-next b { text-align: right; }
  .ws-mate-next small { grid-column: 1 / -1; text-align: left; }
  .ws-mini-slot { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px 8px; }
  .ws-mini-slot > .ws-mini-ball { grid-column: 2; }
  .ws-mini-slot > .ws-mini-ball + .ws-slot-vs { display: none; }
  .ws-mini-slot > .ws-verdict { grid-column: 3; grid-row: 1 / span 2; }
  .ws-card { padding: 12px; }
  .ws-slot-vs { display: none; }
  .ws-verdict { justify-self: start; justify-items: start; text-align: left; }
  .ws-att .ws-verdict { justify-self: end; text-align: right; }
  .ws-own-squad { grid-template-columns: minmax(0, 1fr); }
  .ws-score-val { font-size: var(--fs-4); }
}
@media (prefers-reduced-motion: reduce) { .ws-chance-a, .ws-chance-b { transition: none; } }

.pvp-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px var(--gutter);
  border-bottom: 1px solid var(--rule); }
.pvp-strip-part { max-width: 100%; min-height: 36px; padding: 6px 12px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 999px; font: 600 var(--fs-2) var(--body); cursor: pointer; }
.pvp-strip-part:hover, .pvp-strip-part:focus-visible { border-color: var(--gold); }
.pvp-ladder-more { margin-top: 8px; }
.pvp-outlook-counts { display: none; }

.pvp-board.is-compact { gap: 6px; background: none; border: 0; }
.pvp-board.is-compact > :first-child, .pvp-board.is-compact > :last-child { border-radius: var(--r); }
.pvp-mrow { position: relative; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.pvp-mrow:has(.pvp-counters-pop:not([hidden])) { z-index: 30; }
.pvp-mrow.is-guess { border-style: dashed; }
.pvp-mrow.win, .pvp-mrow.strong-win { border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); }
.pvp-mrow-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(44px, 54px) minmax(0, 1fr); gap: 4px;
  align-items: stretch; padding: 5px; }
.pvp-mrow .pvp-slot { min-height: 56px; min-width: 0; padding: 5px 6px; overflow: hidden; }
.pvp-mrow .pvp-tile.is-compact { gap: 6px; }
.pvp-mrow .pvp-tile.is-compact .thumb { width: 26px; height: 26px; }
.pvp-mrow .pvp-tile.is-compact .chips { gap: 3px; flex-wrap: nowrap; }
.pvp-mrow .pvp-tile.is-compact .chip { padding: 0 5px; font-size: var(--fs-1); }
.pvp-mrow .pvp-tile.is-compact .chip img { display: none; }
.pvp-mrow-out { justify-self: start; min-height: 34px; margin-top: 2px; }
.pvp-mrow-mid { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 48px;
  padding: 0; background: none; border: 0; border-radius: var(--r-sm); color: var(--ink); cursor: pointer; }
.pvp-mrow-mid:focus-visible { outline: 2px solid var(--gold); }
.pvp-mrow-n { color: var(--dim); font: 700 var(--fs-1) var(--mono); }
.pvp-mrow-mid .pvp-chance { font: 700 var(--fs-3) var(--mono); }
.pvp-mrow-chev { color: var(--dim); font: normal var(--fs-1) var(--mono); }
.pvp-mrow-more { display: grid; gap: 9px; padding: 9px 10px 11px; border-top: 1px solid var(--rule); }
.pvp-mrow-verdict { margin: 0; color: var(--mute); font: var(--fs-2)/1.5 var(--body); }
.pvp-mrow-verdict b { color: var(--ink); font: 700 var(--fs-2) var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.pvp-mrow-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pvp-mrow-side { display: grid; gap: 4px; align-content: start; min-width: 0; }
.pvp-mrow-side small { color: var(--dim); font: var(--fs-1) var(--mono); }
.pvp-mrow-label { font: 700 var(--fs-1) var(--cond) !important; letter-spacing: .1em; text-transform: uppercase; }
.pvp-mrow-side .pvp-item i { white-space: normal; }
.pvp-mrow-math { color: var(--dim); font: var(--fs-1)/1.5 var(--mono); }
.pvp-mrow .pvp-counters-btn { width: 100%; min-height: 40px; }
.pvp-mrow-alt { color: var(--good); font: 600 var(--fs-1) var(--body); white-space: nowrap; }
.pvp-opts { display: grid; gap: 5px; }
.pvp-opt { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  min-height: 44px; padding: 5px 9px; text-align: left; background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; }
.pvp-opt:hover:not(:disabled) { border-color: var(--gold); }
.pvp-opt.is-here { cursor: default; border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.pvp-opt .thumb { width: 28px; height: 28px; }
.pvp-opt-text { display: grid; gap: 1px; min-width: 0; }
.pvp-opt-text b { font: 600 var(--fs-2) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-opt-text small { color: var(--dim); font: var(--fs-1) var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-opt-tag { color: var(--dim); font: var(--fs-1) var(--body); white-space: nowrap; }
.pvp-opt-odds { font: 700 var(--fs-2) var(--mono); }

.pvp-outlook.is-pinned { position: sticky; bottom: 0; z-index: 35; flex-wrap: wrap; gap: 8px 12px;
  margin: 12px 0 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  border-radius: var(--r) var(--r) 0 0; border-width: 1px 0 0; box-shadow: 0 -8px 22px rgba(0, 0, 0, .35); }
.pvp-outlook.is-pinned .pvp-outlook-chance { padding-right: 10px; }
.pvp-outlook.is-pinned .pvp-outlook-chance b { font-size: var(--fs-4); }
.pvp-outlook.is-pinned .pvp-outlook-text { flex: 1; min-width: 0; }
.pvp-outlook.is-pinned .pvp-outlook-text b { font-size: var(--fs-3); }
.pvp-outlook.is-pinned .pvp-outlook-why, .pvp-outlook.is-pinned .pvp-nudge-note { display: none; }
.pvp-outlook.is-pinned .pvp-outlook-counts { display: block; }
.pvp-outlook.is-pinned .pvp-outlook-actions { flex-basis: 100%; margin: 0; flex-wrap: nowrap; align-items: stretch; }
.pvp-outlook.is-pinned .pvp-outlook-actions > .btn, .pvp-outlook.is-pinned .pvp-save.is-inline { flex: 1 1 0; }
.pvp-outlook.is-pinned .btn { width: 100%; min-height: 40px; justify-content: center; }
.pvp-save.is-inline { display: flex; margin: 0; padding: 0; }
.pvp-save.is-inline .btn { margin: 0; }
body:has(.pvp-outlook.is-pinned) .to-top { bottom: 128px; }

@media (max-height: 500px) and (pointer: coarse) {
  .pvp-outlook.is-pinned { flex-wrap: nowrap; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .pvp-outlook.is-pinned .pvp-outlook-actions { flex-basis: auto; margin-left: auto; }
  .pvp-outlook.is-pinned .btn { width: auto; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 360px) {
  .pvp-bench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvp-bench .pvp-tile { min-width: 0; overflow: hidden; }
}
@media (pointer: coarse) {
  .pvp-counters-btn { min-height: 36px; }
  .pvp-step-edit { min-height: 36px; padding: 4px 12px; }
  .pvp-tile-off { width: 32px; height: 32px; opacity: 1; }
  .pvp-bench-more, .pvp-ladder-more { min-height: 36px; }
  .info { position: relative; }
  .info::after { content: ""; position: absolute; inset: -10px; }
}
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  .pvp-bench-more { min-height: 36px; }
  .pvp-tile-off { width: 28px; height: 28px; top: 3px; right: 3px; opacity: 1; }
  .pvp-step-edit { min-height: 34px; padding: 4px 12px; }
  .pvp-ladder { max-height: none; overflow: visible; }
  .pvp-inline-form .btn, .pvp-reveal ~ .btn { min-height: 40px; }
}


.row-details { display: none; }
thead th.row-details { cursor: default; }
td.row-details { width: 1%; padding-left: 2px; padding-right: 6px; text-align: right; }
.row-details-open {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 999px; padding: 0;
  background: var(--lift); color: var(--ink); font: 600 var(--fs-4)/1 var(--body); cursor: pointer;
}
.row-details-open:hover, .row-details-open[aria-expanded="true"] { background: var(--gold); color: var(--bg); }
.row-details-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

table.compact-table, table.detail-list { border-collapse: separate; border-spacing: 0 2px; }
.compact-table thead th, .detail-list thead th,
.compact-table thead tr.group-row th, .detail-list thead tr.group-row th {
  background: transparent; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0;
}
.compact-table thead tr:last-child th, .detail-list thead tr:last-child th { padding-bottom: 8px; color: var(--dim); }
.compact-table thead th.primary, .compact-table thead th:hover, .compact-table thead th[data-dir],
.detail-list thead th:hover, .detail-list thead th[data-dir] { color: var(--ink); }
.compact-table tbody td, .detail-list tbody td {
  border-bottom: 0; padding-top: 7px; padding-bottom: 7px;
  transition: background-color 150ms ease;
}
.compact-table tbody td, .detail-list tbody td, .compact-table thead th, .detail-list thead th {
  padding-left: 10px; padding-right: 10px;
}
.compact-table .row-details, .detail-list .row-details { position: relative; padding-left: 2px; padding-right: 6px; }
@media (max-width: 560px) {
  .compact-table .row-details, .detail-list .row-details { padding-left: 0; padding-right: 2px; }
}
.compact-table tbody td:first-child, .detail-list tbody td:first-child { border-radius: var(--r) 0 0 var(--r); }
.compact-table tbody td:last-child, .detail-list tbody td:last-child,
.compact-table.has-row-details tbody td:nth-last-child(2) { border-radius: 0 var(--r) var(--r) 0; }
.compact-table.has-row-details tbody td:last-child { border-radius: 0; }
.compact-table tbody tr.is-open td, .detail-list tbody tr.is-open td { background: var(--panel); }

.compact-table .wr-pill, .detail-list .wr-pill {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px;
  border-radius: 999px; background: var(--hairline-2);
}
.compact-table .wr-pill b, .detail-list .wr-pill b { display: inline; font-size: var(--fs-2); }
.compact-table .wr-pill .wr-bound, .detail-list .wr-pill .wr-bound { display: inline; }
.compact-table .wr-pill.is-hi, .detail-list .wr-pill.is-hi { background: color-mix(in srgb, var(--good) 18%, transparent); }
.compact-table .wr-pill.is-lo, .detail-list .wr-pill.is-lo { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.compact-table tr.thin .wr-pill, .detail-list tr.thin .wr-pill { background: none; box-shadow: inset 0 0 0 1px var(--rule); }

.compact-table td.bar::before, .detail-list td.bar::before { display: none; }
.compact-table td.bar > span, .detail-list td.bar > span {
  display: inline-grid; grid-template-columns: 40px auto; align-items: center; gap: 8px;
}
.compact-table td.bar > span::before, .detail-list td.bar > span::before {
  content: ""; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, color-mix(in srgb, var(--gold) 55%, transparent) var(--w, 0%),
    var(--hairline-2) var(--w, 0%));
}
.compact-table .conf-box, .detail-list .conf-box {
  grid-template-columns: 40px minmax(7ch, auto); column-gap: 8px; align-items: center;
}
.compact-table .conf-box > b, .detail-list .conf-box > b { grid-column: 2; grid-row: 1; }
.compact-table .conf-box > .conf-swap, .detail-list .conf-box > .conf-swap,
.compact-table .conf-box > .conf-pm, .detail-list .conf-box > .conf-pm { grid-column: 2; grid-row: 2; justify-self: end; }
.compact-table .conf-track, .detail-list .conf-track {
  grid-column: 1; grid-row: 1 / span 2; margin: 0;
  height: 6px; width: 40px; border-radius: 999px;
  background: var(--hairline-2); overflow: hidden;
}
.compact-table .conf-fill, .detail-list .conf-fill {
  border-radius: 999px; background: color-mix(in srgb, var(--gold) 55%, transparent); opacity: 1;
}

@media (max-width: 560px) {
  .compact-table .row-details { display: table-cell; }
  .compact-table.has-row-details tbody td:nth-last-child(2) { border-radius: 0; }
  .compact-table.has-row-details tbody td:last-child { border-radius: 0 var(--r) var(--r) 0; }
  .compact-table td.bar > span, .detail-list td.bar > span { display: inline; }
  .compact-table td.bar > span::before, .detail-list td.bar > span::before { display: none; }
  .compact-table .conf-box, .detail-list .conf-box { grid-template-columns: auto; }
  .compact-table .conf-box > *, .detail-list .conf-box > * { grid-column: 1; }
  .compact-table .conf-track, .detail-list .conf-track { display: none; }
  td.row-details { padding-left: 0; padding-right: 4px; }
  .row-details-open { width: 24px; height: 24px; }
  .compact-table .wr-pill, .detail-list .wr-pill {
    flex-direction: column; align-items: flex-end; gap: 0; border-radius: var(--r); padding: 3px 8px;
  }
}

.detail-list .detail-only { display: none; }
table.detail-list { min-width: 0; }
.detail-list .row-details { display: table-cell; }
.detail-list tbody tr { cursor: pointer; }
.detail-list-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.row-drawer { display: none; }
@media (min-width: 900px) {
  .detail-list-split { grid-template-columns: minmax(0, 1fr) 300px; }
  .row-drawer {
    display: block; position: sticky; top: calc(var(--sticky-top) + 10px);
    max-height: calc(100vh - var(--sticky-top) - 20px); overflow: auto;
    padding: 16px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
  }
}
.row-drawer-head { display: flex; align-items: flex-start; gap: 10px; }
.row-drawer-title { flex: 1; min-width: 0; margin: 0; font: 600 var(--fs-3)/1.3 var(--body); color: var(--ink); }
.row-drawer-title .cellflex { flex-wrap: wrap; }
.row-drawer-title:focus { outline: none; }
.row-drawer-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.row-drawer-close {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 999px; padding: 0;
  background: var(--lift); color: var(--ink); font: 600 var(--fs-4)/1 var(--body); cursor: pointer;
}
.row-drawer-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.row-drawer-grab { display: none; }
.row-drawer-note { margin: 10px 0 0; color: var(--mute); font-size: var(--fs-2); }
.row-drawer-empty { margin: 0; color: var(--dim); font-size: var(--fs-2); }
.row-drawer-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.row-drawer-fact { min-width: 0; padding: 8px 10px; border-radius: var(--r); background: var(--bg); }
.row-drawer-fact > dt { font: 500 var(--fs-1) var(--body); color: var(--dim); }
.row-drawer-fact > dd {
  display: block; margin: 2px 0 0; padding: 0; text-align: left; white-space: normal; overflow-wrap: anywhere;
  font: 600 var(--fs-3) var(--mono); font-variant-numeric: tabular-nums; color: var(--ink);
}
.row-drawer-fact > dd.support { color: var(--mute); }
.row-drawer-fact > dd.left { font: 500 var(--fs-3) var(--body); }
.row-drawer-fact > dd.hi, .row-drawer-fact b.hi { color: var(--good); }
.row-drawer-fact > dd.lo, .row-drawer-fact b.lo { color: var(--bad); }
.row-drawer-fact .cell-detail, .row-drawer-fact .conf-pm { opacity: 1; }
.row-drawer-fact .div-cell-name { display: inline; }
.row-drawer-fact .conf-swap { display: grid; gap: 1px; }
.row-drawer-fact .conf-swap > * { grid-area: auto; }
.row-drawer-fact .conf-box { justify-items: start; }
.row-drawer-fact .cellflex, .row-drawer-fact .chips, .row-drawer-fact .roll { flex-wrap: wrap; }
.row-drawer-link { display: inline-block; margin-top: 12px; color: var(--gold); font-weight: 600; }

dialog.bottom-sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px;
  max-height: 85vh; overflow: auto; border: 0;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-3);
}
dialog.bottom-sheet::backdrop { background: var(--scrim); }
.bottom-sheet .row-drawer-grab {
  display: block; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 999px; background: var(--rule);
}
@media (min-width: 561px) {
  dialog.bottom-sheet { inset: 0; margin: auto; max-width: 420px; height: fit-content; border-radius: var(--r-lg); }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.bottom-sheet[open] { animation: bottom-sheet-in 220ms var(--ease) both; }
}
@keyframes bottom-sheet-in { from { transform: translateY(24px); opacity: 0; } }

.grouped-table { display: grid; gap: 10px; margin: 0 0 16px; padding: 2px var(--gutter) 0; }
.table-group { border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
  min-width: 0; }
.table-group-head {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 11px 16px; position: sticky; top: var(--sticky-top); z-index: 4;
  border-radius: var(--r-lg); background: var(--panel);
}
.table-group[open] > .table-group-head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.table-group-head::-webkit-details-marker { display: none; }
.table-group-head::before {
  content: "\203a"; width: 10px; font: 600 var(--fs-4)/1 var(--body); color: var(--dim);
  transition: transform 150ms ease;
}
.table-group[open] > .table-group-head::before { transform: rotate(90deg); }
.table-group-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.table-group-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--dim); }
.table-group.is-hi .table-group-dot { background: var(--good); }
.table-group.is-lo .table-group-dot { background: var(--bad); }
.table-group.is-s .table-group-dot { background: var(--band-s); }
.table-group.is-a .table-group-dot { background: var(--band-a); }
.table-group.is-b .table-group-dot { background: var(--band-b); }
.table-group.is-c .table-group-dot { background: var(--band-c); }
.table-group.is-d .table-group-dot { background: var(--band-d); }
.table-group.is-f .table-group-dot { background: var(--band-f); }
.table-group.is-s .table-group-title, .table-group.is-a .table-group-title, .table-group.is-b .table-group-title,
.table-group.is-c .table-group-title, .table-group.is-d .table-group-title, .table-group.is-f .table-group-title {
  font-size: var(--fs-4); letter-spacing: .04em;
}
.table-group.is-s .table-group-title { color: var(--band-s); }
.table-group.is-a .table-group-title { color: var(--band-a); }
.table-group.is-b .table-group-title { color: var(--band-b); }
.table-group.is-c .table-group-title { color: var(--band-c); }
.table-group.is-d .table-group-title { color: var(--band-d); }
.table-group.is-f .table-group-title { color: var(--band-f); }
.table-group-title { font: 700 var(--fs-3) var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.table-group-title .chips { display: inline-flex; vertical-align: -3px; margin-right: 8px; }
.table-group-count { font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.table-group-tag {
  padding: 1px 8px; border-radius: 999px; background: var(--hairline-2);
  font: 600 var(--fs-1) var(--body); color: var(--mute);
}
.table-group-note { margin-left: auto; font: 500 var(--fs-1) var(--mono); color: var(--dim); text-align: right; }
.table-group-body { padding: 0 8px 8px; }
.table-group-body > .wrap > table { min-width: 0; }
@media (max-width: 560px) {
  .table-group-note { flex-basis: 100%; margin-left: 20px; text-align: left; }
  .table-group-head { padding: 10px 12px; }
  .table-group-body { padding: 0 4px 6px; }
  .grouped-table { padding: 2px var(--gutter) 0; }
  .table-group-body tbody td.left, .table-group-body tbody td:first-child { white-space: normal; }
  .table-group-body tbody .cellflex { flex-wrap: wrap; row-gap: 2px; }
}
.dv-grid.compact-blocks { gap: 4px; background: none; border-block: 0; }
.compact-blocks > .dv-block { border-radius: var(--r-lg); background: transparent; transition: background-color 150ms ease; }
.compact-blocks > .dv-block:hover { background: var(--panel); }
.compact-blocks .dv-chip { border-color: transparent; background: var(--hairline-2); }
.compact-blocks .dv-chip.is-art:hover { border-color: var(--gold); }
.compact-blocks .dv-chip b {
  padding: 1px 6px; border-radius: 999px; color: var(--ink);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.compact-blocks .dv-gear { border-radius: 999px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .table-group-head::before, .compact-table tbody td, .detail-list tbody td, .compact-blocks > .dv-block { transition: none; }
}

.trade-note { color: var(--dim); font-size: var(--fs-1); margin-top: 2px; }


body {
  background:
    radial-gradient(60% 480px at 0% 0%, color-mix(in srgb, var(--gold) 4%, transparent), transparent 70%),
    radial-gradient(50% 420px at 100% 0%, color-mix(in srgb, var(--acc-violet) 3.5%, transparent), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}

body.has-tint { position: relative; background: var(--bg); --tint: var(--tint-dark); --tint-k: 16%; --tint-k2: 11.2%; }
:root[data-theme="light"] body.has-tint { --tint: var(--tint-light); --tint-k: 12%; --tint-k2: 8.4%; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.has-tint { --tint: var(--tint-light); --tint-k: 12%; --tint-k2: 8.4%; }
}
body::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0;
  height: min(1100px, 100%); pointer-events: none; opacity: 0;
  background:
    radial-gradient(75% 700px at 0% 120px, color-mix(in srgb, var(--tint) var(--tint-k), transparent), transparent 75%),
    radial-gradient(65% 600px at 100% 260px, color-mix(in srgb, var(--tint) var(--tint-k2), transparent), transparent 75%);
  background-repeat: no-repeat;
}
body.has-tint::after { opacity: 1; }
body.has-tint .player-banner::after {
  background: linear-gradient(90deg, var(--panel) 0%,
    color-mix(in srgb, var(--panel) 72%, transparent) 45%,
    color-mix(in srgb, color-mix(in srgb, var(--tint) 35%, var(--panel)) 40%, transparent) 100%);
}

.strong-card.has-type {
  --wash-k: 30%;
  background:
    radial-gradient(120% 78px at 50% 0, color-mix(in srgb, var(--c) var(--wash-k), var(--panel)), var(--panel) 100%) no-repeat,
    var(--panel);
}
:root[data-theme="light"] .strong-card.has-type { --wash-k: 15%; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .strong-card.has-type { --wash-k: 15%; }
}
.strong-card.has-type:hover {
  border-color: color-mix(in srgb, var(--c) 70%, var(--rule));
  box-shadow: var(--shadow-card), 0 0 18px color-mix(in srgb, var(--c) 34%, transparent);
}

.stile.is-cyan   { --cat: var(--gold); }
.stile.is-amber  { --cat: var(--acc-amber); }
.stile.is-violet { --cat: var(--acc-violet); }
.stile.is-cyan, .stile.is-amber, .stile.is-violet {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 6%, var(--panel)) 0%, var(--panel) 55%);
}
.stile:hover { position: relative; z-index: 1; }
.stile.is-cyan:hover, .stile.is-amber:hover, .stile.is-violet:hover {
  border-top-color: var(--cat);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 40%, transparent),
              0 8px 22px -8px color-mix(in srgb, var(--cat) 45%, transparent);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top {
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    backdrop-filter: blur(12px) saturate(1.25);
  }
  .top .stamp { color: var(--mute); }
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  @media (forced-colors: none) {
    .ball-hero h1 {
      background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 72%, var(--mute)));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: var(--ink);
    }
  }
}

.skel-shapes { display: none; }
.skel { position: relative; overflow: hidden; background: var(--row); border-radius: var(--r); height: 34px; }
.skel-hero { height: 128px; border-radius: var(--r-lg); margin-bottom: 6px; }

@media (prefers-reduced-motion: no-preference) {
  body::after { transition: opacity 420ms ease-out; }

  .skel-page > .skel-label { padding-bottom: 14px; }
  .skel-shapes {
    display: grid; gap: 7px; padding: 0 var(--gutter) 24px;
    animation: skel-in 240ms ease-out 220ms both;
  }
  .skel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--lift), transparent);
    transform: translateX(-100%);
    animation: skel-shimmer 1.3s var(--ease) infinite;
  }
  .skel-row:nth-child(odd)::after { animation-delay: 90ms; }
  @keyframes skel-in { from { opacity: 0; } }
  @keyframes skel-shimmer { to { transform: translateX(100%); } }

  .strong-card, .stile {
    transition: transform 180ms var(--ease), border-color 160ms ease,
                box-shadow 220ms var(--ease), background-color 160ms ease;
  }
  .strong-card:hover, .stile:hover { transform: translateY(-2px); }
  .strong-card .thumb { transition: transform 220ms var(--ease); }
  .strong-card:hover .thumb { transform: scale(1.08) rotate(-3deg); }

  .strong-row > .strong-card, .compart-grid > .stile, .hero-badges > .badge {
    animation: tile-in 320ms var(--ease) both;
  }
  .strong-row > :nth-child(2), .compart-grid > :nth-child(2), .hero-badges > :nth-child(2) { animation-delay: 30ms; }
  .strong-row > :nth-child(3), .compart-grid > :nth-child(3), .hero-badges > :nth-child(3) { animation-delay: 60ms; }
  .strong-row > :nth-child(4), .compart-grid > :nth-child(4) { animation-delay: 90ms; }
  .strong-row > :nth-child(5), .compart-grid > :nth-child(5) { animation-delay: 120ms; }
  .strong-row > :nth-child(6), .compart-grid > :nth-child(6) { animation-delay: 150ms; }
  .strong-row > :nth-child(7), .compart-grid > :nth-child(7) { animation-delay: 180ms; }
  .strong-row > :nth-child(8), .compart-grid > :nth-child(n+8) { animation-delay: 210ms; }
  .strong-row > :nth-child(n+9) { animation-delay: 240ms; }
  .ball-stats > div { animation: rule-in 300ms var(--ease) both; }
  .ball-stats > div:nth-child(2) { animation-delay: 40ms; }
  .ball-stats > div:nth-child(3) { animation-delay: 80ms; }
  .ball-stats > div:nth-child(4) { animation-delay: 120ms; }
  .ball-stats > div:nth-child(n+5) { animation-delay: 160ms; }

  .player-hero > img { animation: hero-bob 6s ease-in-out 700ms infinite; }
  @keyframes hero-bob { 50% { translate: 0 -5px; } }

  .subnav button.is-sliding { position: relative; isolation: isolate; background: none; }
  .subnav button.is-sliding::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; background: var(--pill-on); transform-origin: left center;
  }
}


@media (max-width: 1024px) {
  .drop-md { display: none; }
  table.fits-md { min-width: 0; }
  .flow-md { white-space: normal; }
  .flow-md .chips, .flow-md .cellflex { flex-wrap: wrap; }
  .compact-table.fits-md .row-details { display: table-cell; }
  .compact-table.fits-md.has-row-details tbody td:nth-last-child(2) { border-radius: 0; }
  .compact-table.fits-md.has-row-details tbody td:last-child { border-radius: 0 var(--r) var(--r) 0; }
}
@media (min-width: 1025px) { .upto-md { display: none; } }

.duel-row > td.duel-cell > .duel-panel {
  position: sticky; left: 0; box-sizing: border-box; max-width: var(--duel-w, none);
}
@media (max-width: 560px) {
  .duel-sides { grid-template-columns: minmax(0, 1fr); }
  .duel-side-name, .duel-ball-name { white-space: normal; overflow-wrap: anywhere; }
  .duel-ball-foot { flex-wrap: wrap; row-gap: 2px; }
  .duel-charges { text-align: left; white-space: normal; }
}

#view > p.lede { margin: 0; padding: 12px var(--gutter) 0; }

#view > .bm { padding: 0 var(--gutter); }

.dv-chip { max-width: 100%; min-width: 0; }
.chg-chip > .chg-name { min-width: 0; }
.chg-name > .chg-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chg-chip .chg-name > .chg-label { max-width: 150px; }
.chg-name > span.chips, .chg-chip .chg-name > span.chips { overflow: visible; max-width: none; min-width: auto; }
@media (max-width: 560px) {
  .chg-table .chg-name { flex-wrap: wrap; row-gap: 3px; }
  .chg-chip .chg-name > span.chg-label { max-width: none; flex: 0 1 auto; }
}

@media (max-width: 560px) {
  .to-top {
    width: 34px; height: 34px;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(12px, calc(8px + env(safe-area-inset-bottom)));
  }
}

@media (max-width: 430px) {
  tbody tr.thin-xs td, tbody tr.thin-xs td.wr.hi, tbody tr.thin-xs td.wr.lo { color: var(--dim); }
}

.cellflex > div { min-width: 0; }
@media (max-width: 560px) {
  .cellflex > div > .chips { flex-wrap: wrap; max-width: 100%; row-gap: 3px; }
}

.wsb-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  padding: 16px var(--gutter) 24px;
}
@media (max-width: 1024px) { .wsb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wsb-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 12px 20px; } }
.wsb-tile {
  --lead: var(--gold);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 12px 14px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--lead) 7%, var(--panel)), var(--panel) 60%);
  border: 1px solid var(--rule); box-shadow: var(--shadow-card);
}
.wsb-tile[hidden] { display: none; }
.wsb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.wsb-phase {
  font: 700 var(--fs-1) var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); padding: 2px 8px; border-radius: 999px; box-shadow: 0 0 0 1px var(--rule);
}
.wsb-phase.is-attack { color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.wsb-phase.is-finished { color: var(--ink); }
.wsb-bracket { color: var(--dim); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsb-side {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 6px 0;
}
.wsb-side + .wsb-side { border-top: 1px solid var(--hairline-2, var(--rule)); }
.wsb-side.is-bye { grid-template-columns: minmax(0, 1fr); }
.wsb-bye { color: var(--dim); font-size: var(--fs-2); }
.wsb-crest, .wsb-dot { justify-self: center; }
.wsb-crest { width: 28px; height: 28px; }
.wsb-who { min-width: 0; }
.wsb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsb-won { color: var(--gold); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .06em; }
.wsb-tier { color: var(--dim); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsb-score {
  font: 700 var(--fs-5)/1 var(--cond); letter-spacing: .02em; color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.wsb-side.is-lead .wsb-score { color: var(--gold); }
.wsb-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--rule);
  font-size: var(--fs-2);
}
.wsb-foot-label { color: var(--dim); }
.wsb-power { font-family: var(--mono); font-weight: 600; color: var(--mute); }
.wsb-tile.is-link { position: relative; cursor: pointer; }
.wsb-cover { position: static; color: inherit; text-decoration: none; outline: none; }
.wsb-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.wsb-tile.is-link .wsb-name a { position: relative; z-index: 2; }
.wsb-tile.is-link:has(.wsb-cover:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .wsb-grid.is-revealing .wsb-tile:not(.is-in) { opacity: 0; transform: translateY(14px); }
  .wsb-tile {
    transition: opacity .42s var(--ease), transform .42s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
    transition-delay: calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms), 0s, 0s;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wsb-tile.is-link:has(.wsb-cover:focus-visible),
  .wsb-tile:hover {
    transform: translateY(-3px); transition-delay: 0s;
    border-color: color-mix(in srgb, var(--lead) 55%, var(--rule));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lead) 30%, transparent),
                0 12px 26px -12px color-mix(in srgb, var(--lead) 45%, transparent);
  }
  .wsb-tile.is-bye:hover { transform: none; box-shadow: var(--shadow-card); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .wsb-tile:hover { border-color: color-mix(in srgb, var(--lead) 55%, var(--rule)); }
}
.wsb-tags { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.wsb-hot {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font: 700 var(--fs-1) var(--mono); letter-spacing: .04em; color: #f97316;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  background: color-mix(in srgb, #f97316 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #f97316 40%, transparent);
}
.wsb-flame { display: inline-block; font-size: 1.05em; line-height: 1; transform-origin: 50% 90%; }
.wsb-tile.is-close {
  position: relative;
  border-color: color-mix(in srgb, #f97316 50%, var(--rule));
  --ember: color-mix(in srgb, #f97316 60%, #ef4444);
}
.wsb-tile.is-close::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ember) 55%, transparent),
              0 0 18px -4px color-mix(in srgb, var(--ember) 70%, transparent),
              inset 0 -14px 22px -18px color-mix(in srgb, var(--ember) 80%, transparent);
  opacity: .7;
}
.wsb-side { position: relative; }
.wsb-side::before {
  content: ""; position: absolute; inset: 0 -14px; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 120% at 92% 50%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%);
}
.wsb-score { display: inline-block; transform-origin: 100% 60%; }
.wsb-burst { position: absolute; right: 18px; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.wsb-burst i {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px var(--gold); opacity: 0;
}
.wsb-plus {
  position: absolute; right: 64px; top: 50%; margin-top: -8px; pointer-events: none; z-index: 2; opacity: 0;
  font: 700 var(--fs-1) var(--mono); color: var(--gold);
}
@media (prefers-reduced-motion: no-preference) {
  .wsb-tile.is-fire::before { animation: wsb-ember 2.6s ease-in-out infinite alternate; }
  .wsb-tile.is-fire .wsb-flame { animation: wsb-flicker 1.3s ease-in-out infinite alternate; }
  .wsb-side.is-scored::before { animation: wsb-glow 1.4s var(--ease) both; }
  .wsb-side.is-scored .wsb-score { animation: wsb-pop .7s cubic-bezier(.3,1.6,.5,1) both; }
  .wsb-burst i { animation: wsb-spark .8s cubic-bezier(.2,.8,.3,1) .12s both; }
  .wsb-plus { animation: wsb-rise 1.5s var(--ease) .1s both; }
  .wsb-momentum i { transition: transform .9s cubic-bezier(.22,.9,.3,1); }
  .wsb-tile.is-pulse .wsb-phase.is-attack { animation: wsb-breathe 2.6s ease-in-out infinite; }
  .wsb-grid.is-final-hour .wsb-tile.is-pulse .wsb-phase.is-attack { animation-duration: 1.1s; }
  .wsb-flash { animation: wsb-glow 1.3s var(--ease) both; }
  .wsb-ribbon { animation: wsb-ribbon 2.3s var(--ease) both; }
  .wsb-side.is-lose.is-fading { animation: wsb-fade 1.4s var(--ease) both; }
  .wsb-confetti i { animation: wsb-confetti 1.3s cubic-bezier(.2,.8,.3,1) .15s both; }
  .wsb-crown { animation: wsb-crown 2.5s var(--ease) both; }
  .wsb-stamp { animation: wsb-stamp 2.5s cubic-bezier(.3,1.5,.5,1) .2s both; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wsb-tile:hover .wsb-mark::after { animation: wsb-shimmer .9s var(--ease) both; }
}
@media (prefers-reduced-motion: no-preference) {
  .wsb-tile:active .wsb-mark::after { animation: wsb-shimmer .9s var(--ease) both; }
}
@keyframes wsb-ember { from { opacity: .45; } to { opacity: 1; } }
@keyframes wsb-flicker {
  0% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.12, 1.18) rotate(3deg); }
  100% { transform: scale(.96, 1.05) rotate(-2deg); }
}
@keyframes wsb-glow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wsb-pop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes wsb-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(4px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(24px) scale(.3); }
}
@keyframes wsb-rise {
  0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px); }
}
@keyframes wsb-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .62; transform: scale(.97); } }
@keyframes wsb-ribbon {
  0% { opacity: 0; transform: translate(-50%, -8px) scale(.9); } 15%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}
@keyframes wsb-fade { from { opacity: 1; } to { opacity: .55; } }
@keyframes wsb-confetti {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(2px) rotate(0); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(200deg); }
}
@keyframes wsb-crown {
  0% { opacity: 0; transform: translateY(8px) scale(.6); } 18% { opacity: 1; transform: translateY(-2px) scale(1.1); }
  30%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes wsb-stamp {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.8); } 14% { opacity: 1; transform: rotate(-12deg) scale(1); }
  80% { opacity: 1; transform: rotate(-12deg) scale(1); } 100% { opacity: 0; transform: rotate(-12deg) scale(1); }
}
@keyframes wsb-shimmer { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(160%) skewX(-18deg); } }

.wsb-tile { position: relative; }
.wsb-momentum {
  --a: var(--gold); --b: var(--rule);
  position: relative; height: 4px; margin: 2px 0 2px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--b) 75%, var(--panel));
}
.wsb-momentum i {
  position: absolute; inset: 0; transform-origin: 0 50%; border-radius: inherit;
  background: color-mix(in srgb, var(--a) 85%, var(--panel));
}
.wsb-side.is-lose { opacity: .55; }
.wsb-countdown { margin-left: auto; margin-right: 10px; font: 700 var(--fs-1) var(--mono); color: var(--bad, #ef4444); font-variant-numeric: tabular-nums; }
.wsb-countdown:empty { display: none; }
.wsb-grid.is-final-hour .wsb-tile.is-close { border-color: color-mix(in srgb, #ef4444 65%, var(--rule)); --ember: #ef4444; }
.wsb-flash {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 50%, color-mix(in srgb, var(--lead) 30%, transparent), transparent 75%);
}
.wsb-ribbon {
  position: absolute; left: 50%; top: -9px; z-index: 3; pointer-events: none; opacity: 0; white-space: nowrap;
  padding: 2px 10px; border-radius: 999px; font: 700 var(--fs-1) var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: #111; background: var(--lead); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--lead) 70%, transparent);
}
.wsb-confetti { position: absolute; right: 24px; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.wsb-confetti i {
  position: absolute; left: -2px; top: -3px; width: 4px; height: 6px; border-radius: var(--r-sm); opacity: 0;
  background: var(--gold);
}
.wsb-confetti i:nth-child(3n+1) { background: var(--lead); }
.wsb-confetti i:nth-child(3n+2) { background: #f97316; }
.wsb-crown { position: absolute; left: 6px; top: -10px; font-size: var(--fs-4); line-height: 1; pointer-events: none; z-index: 2; opacity: 0; }
.wsb-stamp {
  position: absolute; right: 2px; top: 50%; margin-top: -11px; z-index: 2; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  padding: 1px 6px; border: 2px solid var(--gold); border-radius: var(--r-sm); color: var(--gold);
  font: 800 var(--fs-1)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.wsb-mark { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: var(--r-sm); }
.wsb-mark::after {
  content: ""; position: absolute; inset: -4px; pointer-events: none; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
}
.fx-tools.wsb-tools { flex-wrap: nowrap; }
.wsb-sort { padding: 0 var(--gutter); }
.wsb-tools .fx-search { flex: 0 1 340px; }
.wsb-refresh { position: relative; flex: 0 0 auto; margin-left: auto; }
.wsb-refresh .wr-refresh-say {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 3; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--r-sm); background: var(--panel); pointer-events: none;
}
.wsb-refresh .wr-refresh-say:empty { display: none; }
.wsb-refresh .wr-refresh-say[data-tone="warn"] { color: var(--gold); }
@media (max-width: 640px) { .wsb-tools .fx-search { flex: 1 1 0; } }
@media (max-width: 420px) {
  .wsb-refresh .wr-refresh-label { display: none; }
  .wsb-refresh .wr-refresh-btn { padding: 7px 9px; }
}

@media (max-width: 640px) {
  .top { padding-bottom: 5px; }
  .top .nav { padding-bottom: 0; overflow: hidden; max-height: var(--nav-h, 200px); }
  .top.is-collapsed { margin-bottom: var(--nav-h, 0px); }
  .top.is-collapsed .nav { max-height: 0; opacity: 0; visibility: hidden; }
  .top.is-linked { margin-bottom: calc(var(--nav-h, 0px) - var(--nav-shown, var(--nav-h, 0px))); }
  .top.is-linked .nav { max-height: var(--nav-shown, var(--nav-h, 200px)); }
  .top.is-linked .nav > a { transform: translateY(calc(var(--nav-shown, var(--nav-h, 0px)) - var(--nav-h, 0px))); }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .top { transition: margin-bottom .26s var(--ease); }
  .top .nav { transition: max-height .26s var(--ease), opacity .2s var(--ease), visibility 0s; }
  .top.is-collapsed .nav { transition: max-height .26s var(--ease), opacity .16s var(--ease), visibility 0s .26s; }
  .top.is-easing .nav > a { transition: transform .26s var(--ease); }
  .top.is-linked:not(.is-easing), .top.is-linked:not(.is-easing) .nav { transition: none; }
}

.wstock { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 14px;
  padding: 12px 14px; background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.wstock-side { display: grid; gap: 8px; min-width: 0; }
.wstock-side.is-a { --side: var(--wf-a); }
.wstock-side.is-b { --side: var(--wf-b); }
.wstock-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-3); }
.wstock-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--side); }
.wstock-row { display: grid; gap: 4px; }
.wstock-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-2); }
.wstock-label { color: var(--mute); }
.wstock-val { font: 700 var(--fs-2) var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wstock-track { height: 6px; border-radius: var(--r-sm); background: var(--hairline-2); overflow: hidden; }
.wstock-fill { display: block; height: 100%; border-radius: inherit; background: var(--side); }
.wstock-row.is-unknown .wstock-val { color: var(--dim); font-weight: 400; }
.wstock-row.is-unknown .wstock-fill { width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wstock-fill { transition: width .9s var(--ease, ease-out); }
}
@media (max-width: 420px) {
  .wstock { gap: 10px 12px; padding: 10px 12px; }
  .wstock-top { flex-direction: column; align-items: flex-start; gap: 0; }
}

.wpod { margin: 12px 0 14px; padding: 10px 12px 12px; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #E5B33B 9%, transparent), transparent 60%), var(--panel);
  box-shadow: var(--shadow-card); overflow: hidden; }
.wpod-head { display: flex; align-items: center; gap: 10px; }
.wpod-heading { margin: 0; }
.wpod.is-preview .wpod-heading::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px;
  border-radius: 50%; background: var(--bad); vertical-align: middle; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); }
.wpod-toggle { margin-left: auto; width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 50%;
  background: transparent; color: var(--mute); cursor: pointer; display: grid; place-items: center; }
.wpod-toggle:hover { background: var(--lift); color: var(--ink); }
.wpod-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 200ms ease; }
.wpod.is-closed .wpod-chev { transform: translateY(2px) rotate(-135deg); }
.wpod.is-closed .wpod-body { display: none; }
.wpod-body { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 4px; }
.wpod-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
@media (min-width: 720px) { .wpod-pair { gap: 28px; } }
.wpod-board.is-banners { width: 100%; max-width: 520px; margin: 0 auto; }
.wpod-board.is-banners .wpod-title { color: var(--ink); font-size: var(--fs-4); }
.wpod-board.is-banners .is-p1 { --h: 76px; --pic: 96px; }
.wpod-board.is-banners .is-p2 { --h: 52px; --pic: 74px; }
.wpod-board.is-banners .is-p3 { --h: 36px; --pic: 74px; }
.wpod-pair .wpod-board { width: 100%; max-width: 340px; margin: 0 auto; }
.wpod-pair .wpod-spot.is-p1 { --h: 34px; --pic: 58px; }
.wpod-pair .wpod-spot.is-p2 { --h: 24px; --pic: 46px; }
.wpod-pair .wpod-spot.is-p3 { --h: 16px; --pic: 46px; }
.wpod-pair .wpod-pic { border-width: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--medal) 55%, transparent), var(--shadow-1); }
.wpod-pair .wpod-pic .thumb { padding: 4px; }
.wpod-pair .wpod-medal { right: -8px; bottom: -8px; width: 28px; height: 28px; font-size: 1.65em; }
.wpod-pair .wpod-spot.is-p1 .wpod-medal { width: 32px; height: 32px; font-size: 1.9em; }
.wpod-pair .wpod-name, .wpod-pair .wpod-spot.is-p1 .wpod-name { font-size: var(--fs-2); margin-top: 4px; }
.wpod-pair .wpod-stat { font-size: var(--fs-1); }
.wpod-pair .wpod-block { padding-top: 0; }
.wpod-pair .wpod-block b { display: none; }
.wpod-pair .wpod-title { margin-bottom: 2px; font-size: var(--fs-2); }
.wpod-title { margin: 0 0 4px; text-align: center; font: 600 var(--fs-3)/1.2 var(--cond); letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); }
.wpod-stage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end; gap: 6px; }
.wpod-spot { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wpod-spot.is-a { --side: var(--wf-a); }
.wpod-spot.is-b { --side: var(--wf-b); }
.wpod-spot.is-p1 { --medal: #E5B33B; --h: 76px; --pic: 96px; }
.wpod-spot.is-p2 { --medal: #B9C3CF; --h: 52px; --pic: 74px; }
.wpod-spot.is-p3 { --medal: #C98A4E; --h: 36px; --pic: 74px; }
.wpod-top { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-bottom: 5px; min-width: 0; max-width: 100%; }
.wpod-pic { position: relative; width: var(--pic); height: var(--pic); border-radius: 50%;
  border: 3px solid var(--side, var(--rule)); background: radial-gradient(circle at 50% 35%, var(--lift), var(--row));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--medal) 55%, transparent), var(--shadow-1); }
.wpod-pic .thumb { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; padding: 6px; box-sizing: border-box;
  background: transparent; border: 0; }
.wpod-medal { position: absolute; right: -10px; bottom: -10px; width: 38px; height: 38px; display: grid; place-items: center;
  font-size: 2.2em; line-height: 1; overflow: hidden; border-radius: 50%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.wpod-spot.is-p1 .wpod-medal { width: 46px; height: 46px; font-size: 2.8em; }
.wpod-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--fs-3)/1.25 var(--body); color: var(--ink); margin-top: 5px; }
.wpod-spot.is-p1 .wpod-name { font-size: var(--fs-4); }
.wpod-stat { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 500 var(--fs-2)/1.2 var(--mono); color: var(--mute); white-space: nowrap; }
.wpod-spot.is-p1 .wpod-stat { color: var(--medal); }
.wpod-block { width: 100%; height: var(--h); display: grid; place-items: start center; padding-top: 4px; box-sizing: border-box;
  border-radius: var(--r) var(--r) 0 0; transform-origin: 50% 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 70%, transparent), color-mix(in srgb, var(--medal) 22%, transparent));
  border-top: 2px solid var(--medal); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.wpod-block b { font: 700 var(--fs-4)/1 var(--cond); color: rgba(0,0,0,.55); }
.wpod-spot.is-empty .wpod-block { opacity: .25; }
.wpod-confetti { display: none; }
@media (max-width: 520px) {
  .wpod { padding: 8px 10px 10px; }
  .wpod-board.is-banners .is-p1 { --h: 60px; --pic: 80px; }
  .wpod-board.is-banners .is-p2 { --h: 42px; --pic: 62px; }
  .wpod-board.is-banners .is-p3 { --h: 30px; --pic: 62px; }
  .wpod-board.is-banners .wpod-medal { right: -8px; bottom: -8px; width: 32px; height: 32px; font-size: 1.85em; }
  .wpod-board.is-banners .is-p1 .wpod-medal { width: 38px; height: 38px; font-size: 2.25em; }
  .wpod-name { font-size: var(--fs-2); }
  .wpod-spot.is-p1 .wpod-name { font-size: var(--fs-3); }
  .wpod-pair { gap: 10px; }
  .wpod-pair .wpod-stage { gap: 3px; }
  .wpod-pair .wpod-spot.is-p1 { --h: 24px; --pic: 42px; }
  .wpod-pair .wpod-spot.is-p2 { --h: 16px; --pic: 34px; }
  .wpod-pair .wpod-spot.is-p3 { --h: 10px; --pic: 34px; }
  .wpod-pair .wpod-medal { right: -6px; bottom: -6px; width: 20px; height: 20px; font-size: 1.2em; }
  .wpod-pair .wpod-spot.is-p1 .wpod-medal { width: 24px; height: 24px; font-size: 1.4em; }
  .wpod-pair .wpod-name, .wpod-pair .wpod-spot.is-p1 .wpod-name { font-size: var(--fs-1); }
  .wpod-pair .wpod-unit { display: none; }
  .wpod-pair .wpod-title { font-size: var(--fs-1); letter-spacing: .06em; }
}
@media (prefers-reduced-motion: no-preference) {
  .wpod.is-play .wpod-block { animation: wpod-rise 620ms cubic-bezier(.2,.9,.3,1.15) both; }
  .wpod.is-play .is-p2 .wpod-block { animation-delay: 120ms; }
  .wpod.is-play .is-p1 .wpod-block { animation-delay: 240ms; }
  .wpod.is-play .wpod-top { animation: wpod-drop 760ms cubic-bezier(.3,.7,.4,1) both; animation-delay: 640ms; }
  .wpod.is-play .is-p2 .wpod-top { animation-delay: 980ms; }
  .wpod.is-play .is-p1 .wpod-top { animation-delay: 1320ms; }
  .wpod.is-play .wpod-medal::after { content: ""; position: absolute; inset: -20%;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
    transform: translateX(-120%); animation: wpod-shine 900ms ease-out both; animation-delay: 1500ms; }
  .wpod.is-play .is-p2 .wpod-medal::after { animation-delay: 1750ms; }
  .wpod.is-play .is-p1 .wpod-medal::after { animation-delay: 2100ms; }
  .wpod.is-play .wpod-confetti { display: block; position: absolute; inset: 0 -20% auto; height: 0; pointer-events: none; }
  .wpod.is-play .wpod-confetti i { position: absolute; top: 0; left: var(--x); width: 6px; height: 10px;
    background: var(--medal); opacity: 0; transform: rotate(var(--r));
    animation: wpod-confetti 1700ms cubic-bezier(.25,.6,.5,1) both; animation-delay: calc(1900ms + var(--d)); }
  .wpod-confetti i:nth-child(4n+1) { background: var(--wf-a); }
  .wpod-confetti i:nth-child(4n+2) { background: #fff; }
  .wpod-confetti i:nth-child(4n+3) { background: var(--wf-b); width: 5px; height: 5px; border-radius: 50%; }
}
@keyframes wpod-rise { from { transform: scaleY(0); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
@keyframes wpod-drop {
  0% { transform: translateY(-120px); opacity: 0; }
  45% { transform: translateY(0); opacity: 1; }
  62% { transform: translateY(-16px); }
  78% { transform: translateY(0); }
  89% { transform: translateY(-5px); }
  100% { transform: none; opacity: 1; }
}
@keyframes wpod-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes wpod-confetti {
  0% { opacity: 0; transform: translateY(0) rotate(var(--r)); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(150px) translateX(calc((var(--c) - 1.5) * 14px)) rotate(calc(var(--r) + 300deg)); }
}


.wr-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 12px; justify-items: stretch;
  margin: 4px var(--gutter) 14px; padding: 16px 10px 14px;
  border-radius: var(--r-lg); border: 1px solid var(--rule);
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--wf-a) 26%, transparent), transparent 60%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--wf-b) 26%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--bg));
  box-shadow: var(--shadow-1);
}
.wr-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 28px);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.wr-hero-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start; gap: 8px; width: 100%; max-width: 760px; margin: 0 auto; }
.wr-hero-side.is-a { grid-column: 1; grid-row: 1; }
.wr-hero-side.is-b { grid-column: 2; grid-row: 1; }
.wr-hero-mid { grid-column: 1 / -1; grid-row: 2; }
.wr-hero-side { --side: var(--wf-a); display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.wr-hero-side.is-b { --side: var(--wf-b); }
.wr-hero-crest { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--side) 30%, transparent), transparent 70%); }
.wr-hero-crest .crest { width: 40px; height: 40px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.wr-hero-side .war-side-name { font: 700 var(--fs-2) var(--cond); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.wr-hero-side .war-side-name a { color: inherit; }
.wr-hero-side .war-side-name a:hover { color: var(--side); }
.wr-hero-won { font: 700 var(--fs-1) var(--cond); letter-spacing: .16em; text-transform: uppercase;
  color: var(--bg); background: var(--medal-gold); padding: 1px 8px; border-radius: 999px; }
.wr-hero-mid { display: grid; justify-items: center; gap: 8px; padding-top: 8px; min-width: 0; }
.wr-hero-score { display: flex; align-items: baseline; gap: 14px; font-variant-numeric: tabular-nums; }
.wr-hero-score .war-banners { font-family: var(--mono); font-weight: 800; line-height: 1;
  font-size: clamp(30px, 8vw, 56px); letter-spacing: -.02em; }
.wr-hero-score .war-banners.is-a { color: var(--wf-a); text-shadow: 0 0 22px color-mix(in srgb, var(--wf-a) 45%, transparent); }
.wr-hero-score .war-banners.is-b { color: var(--wf-b); text-shadow: 0 0 22px color-mix(in srgb, var(--wf-b) 45%, transparent); }
.wr-hero-dash { color: var(--dim); font-family: var(--body); font-weight: 300; font-size: clamp(22px, 5vw, 40px); line-height: 1; }
.wr-hero-tug { position: relative; width: 120px; height: 5px; border-radius: 999px; overflow: hidden;
  background: var(--wf-b); box-shadow: 0 0 12px color-mix(in srgb, var(--wf-b) 30%, transparent); }
.wr-hero-tug-a { position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: var(--wf-a);
  border-right: 2px solid var(--bg); }
.wr-hero-live .wlive-strip { margin: 0; font-size: var(--fs-1); }
.wr-hero-tools:empty { display: none; }
.wr-refresh { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.wr-refresh-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: var(--mute); cursor: pointer;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.wr-refresh-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--mute); }
.wr-refresh-btn:disabled { cursor: default; opacity: .5; }
.wr-refresh-btn.is-working { cursor: progress; opacity: .8; }
.wr-refresh-icon { display: inline-grid; place-items: center; }
.wr-refresh-btn.is-working .wr-refresh-icon { animation: wr-refresh-spin .8s linear infinite; }
@keyframes wr-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wr-refresh-btn.is-working .wr-refresh-icon { animation: none; } }
.wr-refresh-say { font: var(--fs-1) var(--body); color: var(--mute); }
.wr-refresh-say:empty { display: none; }
.wr-refresh-say[data-tone="warn"] { color: var(--bad); }
.wr-hero-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
  margin: 0; font: var(--fs-2) var(--body); color: var(--mute); text-align: center; }

.wr-hero + .wr-links + .wstock, .wr-hero + .wstock { margin-top: -4px; }
.wr-hero ~ .wr-links, .wr-hero ~ .wstock { margin-left: var(--gutter); margin-right: var(--gutter); }
.wstock { border: 1px solid var(--rule); box-shadow: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--wf-a) 7%, var(--panel)), var(--panel) 50%, color-mix(in srgb, var(--wf-b) 7%, var(--panel))); }
.wstock-track { height: 7px; border-radius: 999px; }
.wstock-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--side) 60%, transparent), var(--side));
  box-shadow: 0 0 10px color-mix(in srgb, var(--side) 45%, transparent); }

.war-field-wrap { margin-top: 6px; }
@media (min-width: 900px) { .war-field-wrap, .wr-links { max-width: 980px; margin-left: auto; margin-right: auto; } }
.war-field { padding: 12px 10px; border-radius: var(--r-lg);
  background: radial-gradient(120% 60% at 50% 50%, color-mix(in srgb, var(--gold) 5%, var(--panel)), var(--bg));
  box-shadow: inset 0 0 0 1px var(--hairline-2), var(--shadow-card); }
.war-field-banner { gap: 6px 8px; padding: 6px 0; }
.war-field-banner b { font-size: var(--fs-3); color: var(--side); }
.war-field-crest { display: inline-grid; place-items: center; align-self: center; }
.war-field-crest .crest { width: 22px; height: 22px; }
.war-field-row { gap: 6px; }
.war-field .war-field-half .war-field-zone {
  gap: 6px; padding: 9px 6px 8px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tone) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--tone) 6%, var(--panel));
  box-shadow: 0 1px 0 var(--hairline-2) inset, 0 6px 16px -10px color-mix(in srgb, var(--tone) 70%, transparent);
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.war-field .war-field-half .war-field-zone:hover { transform: translateY(-1px);
  box-shadow: 0 1px 0 var(--hairline-2) inset, 0 10px 22px -10px color-mix(in srgb, var(--tone) 90%, transparent); }
.war-field-zhead { gap: 3px; }
.war-field-zhead b { font-size: var(--fs-3); letter-spacing: .06em; }
.war-field-zstatus { border-radius: 999px; padding: 1px 8px; }
.war-field-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
.war-field-face { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--tone) 18%, var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent); }
.war-field-face .thumb { width: 18px; height: 18px; background: none; border: 0; border-radius: 50%; }
.war-field-face.is-out { opacity: .35; filter: grayscale(1); }
.war-field-face.is-hidden { background: none; box-shadow: none; border: 1px dashed var(--dim);
  font: 700 var(--fs-1) var(--mono); color: var(--dim); }
.war-field-face.is-hurt { position: relative; }
.war-field-face-hp { position: absolute; left: 2px; right: 2px; bottom: -2px; height: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 20%, transparent); overflow: hidden; }
.war-field-face-hp i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--gold); }
.war-field-more { font: 600 var(--fs-1) var(--mono); color: var(--mute); align-self: center; padding: 0 2px; }
.war-field-meter { display: block; width: 100%; max-width: 120px; height: 4px; border-radius: 999px;
  background: var(--hairline-2); overflow: hidden; }
.war-field-meter i, .wat-meter i, .wsd-meter i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 55%, transparent), var(--bad)); }
.war-field-zatk { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; font: 700 var(--fs-1) var(--mono);
  color: var(--ink); background: color-mix(in srgb, var(--tone) 35%, var(--bg)); }
.war-field-zone.is-cleared .war-field-zatk { background: var(--hairline-2); color: var(--mute); }
.war-field-lock { width: 16px; height: 16px; opacity: .55;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 1 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 1 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 1 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 1 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.war-field .war-field-half .war-field-zone.is-cleared {
  background:
    repeating-linear-gradient(135deg, var(--hairline-2) 0 1px, transparent 1px 8px),
    color-mix(in srgb, var(--bg) 60%, var(--panel));
  box-shadow: none;
}
.war-field .war-field-half .war-field-zone.is-fogged { border-style: dashed; box-shadow: none;
  background: color-mix(in srgb, var(--wf-fog), var(--panel)); }
.war-field-line span { border-radius: 999px; background: var(--bg); }

.war-field-pill { border-radius: 999px; }
.wat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wat-chip { font: 600 var(--fs-2) var(--body); color: var(--mute); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel); cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease); }
.wat-chip:hover { color: var(--ink); border-color: var(--dim); }
.wat-chip.is-on { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.wat-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wat { display: grid; gap: 12px; margin: 18px var(--gutter) 0; }
.wat-filters { display: grid; gap: 8px; }
.wat-board { --side: var(--wf-a); display: grid; gap: 10px; padding: 12px 10px; border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, color-mix(in srgb, var(--side) 9%, var(--panel)), var(--panel) 120px); }
.wat-board.is-b { --side: var(--wf-b); }
.wat-board-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
  font: 700 var(--fs-3) var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.wat-board-crest .crest { width: 22px; height: 22px; display: block; }
.wat-board-count { margin-left: auto; font: 600 var(--fs-1) var(--mono); color: var(--mute); text-transform: none; letter-spacing: 0; }
.wat-row { display: grid; gap: 6px; }
.wat-rowcap { font: 700 var(--fs-1) var(--cond); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.wat-sectors { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; }
.wat-sector { display: grid; align-content: start; gap: 8px; padding: 10px; border-radius: var(--r-lg); min-width: 0;
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--side) 30%, var(--rule));
  box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--side) 80%, transparent); }
.wat-sector.is-cleared { border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); }
.wat-sector.is-fogged, .wat-sector.is-quiet { box-shadow: none; }
.wat-sector.is-fogged { border-style: dashed; }
.wat-sector-head { display: grid; gap: 6px; width: 100%; padding: 0; text-align: left; background: none; border: 0;
  color: inherit; font: inherit; cursor: pointer; }
.wat-sector-head:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r); }
.wat-sector-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wat-sector-name b { font: 700 var(--fs-3) var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.wat-sector-head:hover .wat-sector-name b { color: var(--side); }
.wat-progress { display: grid; gap: 4px; }
.wat-meter { display: block; height: 6px; border-radius: 999px; background: var(--hairline-2); overflow: hidden; }
.wat-progress-text { font: var(--fs-1) var(--body); color: var(--mute); }
.wat-cleared { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 8px; border-radius: var(--r);
  font: 600 var(--fs-2) var(--body); color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.wat-flag { width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1h1v10H2zM3 1h7l-2 2.5L10 6H3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1h1v10H2zM3 1h7l-2 2.5L10 6H3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wat-empty { margin: 0; font: var(--fs-2) var(--body); color: var(--dim); }
.wat-timeline { list-style: none; margin: 0; padding: 0 0 0 12px; display: grid; gap: 6px; position: relative; }
.wat-timeline::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 2px; border-radius: var(--r-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--side) 60%, transparent), transparent); }
.wat-item { position: relative; display: grid; gap: 4px; padding: 7px 8px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--hairline-2); }
.wat-item::before { content: ""; position: absolute; left: -12px; top: 12px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dim); box-shadow: 0 0 0 2px var(--bg); }
.wat-item.is-squad::before { background: var(--bad); }
.wat-item.is-zone::before { background: var(--good); box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--good); }
.wat-item.is-zone { border-color: color-mix(in srgb, var(--good) 45%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 12%, var(--panel)), var(--panel)); }
.wat-item-top { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; }
.wat-who { font: 600 var(--fs-2) var(--body); color: var(--ink); overflow-wrap: anywhere; }
.wat-res { font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; padding: 1px 7px;
  border-radius: 999px; color: var(--mute); background: var(--hairline-2); }
.wat-res.is-squad { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.wat-res.is-zone { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.wat-time { margin-left: auto; font: var(--fs-1) var(--mono); color: var(--dim); white-space: nowrap; }
.wat-item-line { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.wat-balls { display: flex; gap: 3px; flex-wrap: wrap; }
.wat-ball { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); box-shadow: 0 0 0 1.5px var(--rule); }
.wat-ball .thumb { width: 22px; height: 22px; background: none; border: 0; border-radius: 50%; }
.wat-ball.is-won { box-shadow: 0 0 0 1.5px var(--good); }
.wat-ball.is-lost { opacity: .7; }
.wat-ball-blank { width: 12px; height: 12px; border-radius: 50%; background: var(--rule); }
.wat-duels { display: inline-flex; gap: 2px; }
.wat-duels i { width: 9px; height: 9px; border-radius: var(--r-sm); background: var(--rule); }
.wat-duels i.is-won { background: var(--good); }
.wat-duels i.is-lost { background: color-mix(in srgb, var(--bad) 70%, var(--rule)); }
.wat-score { font: var(--fs-1) var(--mono); color: var(--mute); }
.wat-pts { margin-left: auto; font: 700 var(--fs-1) var(--mono); color: var(--gold); }
.wat-more { justify-self: start; }

.wbt { display: grid; gap: 12px; margin: 18px var(--gutter) 0; }
.wbt-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.wbt-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--rule); font: var(--fs-2) var(--body); color: var(--mute); }
.wbt-stat b { font: 700 var(--fs-3) var(--mono); color: var(--ink); }
.wbt-stat.is-used b { color: var(--bad); }
.wbt-stat.is-def b { color: var(--gold); }
.wbt-list { display: grid; gap: 6px; }
.wbt-player { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-lg); background: var(--panel);
  border: 1px solid var(--hairline-2); }
.wbt-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wbt-who b { font: 600 var(--fs-3) var(--body); }
.wbt-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.wbt-tag { font: 600 var(--fs-1) var(--mono); padding: 1px 7px; border-radius: 999px; }
.wbt-tag.is-used { color: color-mix(in srgb, var(--bad) 55%, var(--ink)); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.wbt-tag.is-def { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.wbt-balls { display: grid; gap: 6px; }
.wbt-group { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; }
.wbt-glabel { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.wbt-faces { display: flex; gap: 4px; flex-wrap: wrap; }
.wbt-ball { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); box-shadow: 0 0 0 1.5px var(--rule); }
.wbt-ball .thumb { width: 26px; height: 26px; background: none; border: 0; border-radius: 50%; }
.wbt-blank { width: 14px; height: 14px; border-radius: 50%; background: var(--rule); }
.wbt-ball.is-left { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--good) 70%, transparent), 0 0 10px -2px var(--good); }
.wbt-ball.is-used { filter: grayscale(1); opacity: .5; }
.wbt-ball.is-used::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px;
  background: var(--bad); transform: rotate(-35deg); border-radius: var(--r-sm); }
.wbt-ball.is-def { box-shadow: 0 0 0 2px var(--gold); }
.wbt-ball.is-def.is-out { opacity: .45; filter: grayscale(1); }
.wbt-none { font: var(--fs-2) var(--body); color: var(--dim); }
.wbt-sum .wbt-all { margin-left: auto; min-height: 36px; }
button.wbt-who { width: 100%; min-height: 40px; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; }
button.wbt-who:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm); }
.wbt-chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: rotate(45deg); transition: transform 160ms; }
.wbt-player.is-open .wbt-chev { transform: rotate(-135deg); }
.wbt-open { display: grid; gap: 12px; }
.wbt-list { align-items: start; }
.wbt-player.is-open { grid-column: 1 / -1; }
.wbt-tgroup { display: grid; gap: 6px; }
button.wbt-tile { font: inherit; color: var(--ink); cursor: pointer; width: 100%; }
button.wbt-tile:hover { border-color: var(--gold); }
button.wbt-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wbt-tile.is-picked { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.wbt-tile-tag { font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.wbt-tile.is-defending .wbt-tile-tag { color: var(--gold); }
.wbt-tile.is-out, .wbt-tile.is-used { background: var(--row); }
.wbt-tile.is-out > .thumb, .wbt-tile.is-used > .thumb { filter: grayscale(1); }
.wbt-tile.is-out .pv2-ball-name, .wbt-tile.is-used .pv2-ball-name,
.wbt-tile.is-out .pv2-ball-cp b, .wbt-tile.is-used .pv2-ball-cp b,
.wbt-tile.is-out .wsl-item-name, .wbt-tile.is-used .wsl-item-name { color: var(--mute); }
.wbt-tile.is-out .pv2-ball-types, .wbt-tile.is-used .pv2-ball-types,
.wbt-tile.is-out .pv2-item, .wbt-tile.is-used .pv2-item { filter: grayscale(1); }
.wbt-pick { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--row);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.wbt-pick-head { margin: 0; font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.wbt-pick-none { margin: 0; font: var(--fs-2) var(--body); color: var(--dim); }
.wbt-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wbt-pick-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.wbt-pick-row > .thumb { width: 36px; height: 36px; object-fit: contain; border-radius: var(--r-sm); background: var(--panel); }
.wbt-pick-mid { display: grid; gap: 3px; min-width: 0; }
.wbt-pick-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.wbt-pick-top b { font: 600 var(--fs-2) var(--body); color: var(--ink); }
.wbt-pick-owner { font: var(--fs-1) var(--body); color: var(--dim); }
.wbt-pick-sub { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; min-width: 0; }
.wbt-pick-item { font: 600 var(--fs-1) var(--body); color: var(--ink); }
.wbt-pick-item.is-p4 { color: var(--gold); }
.wbt-why { padding: 0 7px; border-radius: 999px; font: 600 var(--fs-1)/1.5 var(--body); }
.wbt-why.is-good { color: color-mix(in srgb, var(--good) 45%, var(--ink)); background: color-mix(in srgb, var(--good) 16%, transparent); }
.wbt-why.is-bad { color: color-mix(in srgb, var(--bad) 45%, var(--ink)); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.wbt-pick-cp { font: 600 var(--fs-2) var(--mono); color: var(--ink); white-space: nowrap; }
.wbt-pick-end { display: grid; justify-items: end; gap: 2px; }
.wbt-pick-call { font: 600 var(--fs-1) var(--body); color: var(--mute); white-space: nowrap; }
.wbt-pick-call.is-ko { color: color-mix(in srgb, var(--good) 45%, var(--ink)); }
.wbt-pick-call.is-poor { color: color-mix(in srgb, var(--bad) 55%, var(--ink)); }

.ws-live-balls { display: grid; gap: 6px; margin-top: 10px; }
.ws-live-group { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; }
.ws-live-head { display: inline-flex; align-items: baseline; gap: 5px; font: var(--fs-2) var(--body); color: var(--mute); }
.ws-live-head b { font: 700 var(--fs-3) var(--mono); color: var(--ink); }
.ws-live-group.is-used .ws-live-head b { color: var(--bad); }
.ws-live-group.is-defending .ws-live-head b { color: var(--gold); }
.ws-live-faces { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.ws-live-ball { position: relative; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); box-shadow: 0 0 0 1.5px var(--rule); }
.ws-live-ball .thumb { width: 22px; height: 22px; background: none; border: 0; border-radius: 50%; }
.ws-live-group.is-ready .ws-live-ball { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--good) 70%, transparent); }
.ws-live-group.is-used .ws-live-ball { filter: grayscale(1); opacity: .5; }
.ws-live-group.is-defending .ws-live-ball { box-shadow: 0 0 0 2px var(--gold); }
.ws-live-more { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.ws-plan-ball.is-used { filter: grayscale(1); opacity: .55; }
.ws-plan-ball.is-defending { box-shadow: inset 0 0 0 1px var(--gold); }

.wsd-meter { display: block; flex-basis: 100%; height: 6px; border-radius: 999px; background: var(--hairline-2); overflow: hidden; }

.sq-arena-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.sq-arena { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--panel);
  border: 1px solid var(--rule); }
.sq-arena.is-up { border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); }
.sq-arena-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sq-arena-top b { font: 600 var(--fs-3) var(--body); }
.sq-arena .sq-line { margin: 0; }
.sq-arena-wins { font-variant-numeric: tabular-nums; color: var(--mute); }

@media (prefers-reduced-motion: no-preference) {
  .wr-hero-tug-a { transition: width .9s var(--ease); }
  .wat-item.wstrike-row { animation-name: wat-drop; }
  .wat-item.wstrike-row.is-miss { animation-name: wat-drop-miss; }
  .wbt-ball.is-new, .ws-live-ball.is-new, .ws-plan-ball.is-new { animation: wbt-spent .9s var(--ease) both; }
  .wat-sector, .wbt-player { transition: border-color .2s var(--ease); }
}
@keyframes wat-drop {
  0%   { opacity: 0; transform: translateY(-18px) scale(.97); background: color-mix(in srgb, var(--bad) 26%, var(--panel)); }
  55%  { opacity: 1; transform: none; background: color-mix(in srgb, var(--bad) 16%, var(--panel)); }
  100% { background: var(--panel); }
}
@keyframes wat-drop-miss {
  0%   { opacity: 0; transform: translateY(-18px) scale(.97); }
  55%  { opacity: 1; transform: none; }
}
@keyframes wbt-spent {
  0%   { transform: scale(1.35); filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--bad), 0 0 14px var(--bad); }
  100% { transform: none; }
}

@media (min-width: 560px) {
  .wr-hero { padding: 22px 18px 16px; }
  .wr-hero-sides { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .wr-hero-side.is-b { grid-column: 3; }
  .wr-hero-mid { grid-column: 2; grid-row: 1; }
  .wr-hero-crest { width: 84px; height: 84px; }
  .wr-hero-crest .crest { width: 68px; height: 68px; }
  .wr-hero-side .war-side-name { font-size: var(--fs-4); }
  .wr-hero-tug { width: 200px; }
  .wat-filters { grid-template-columns: auto auto; justify-content: start; gap: 8px 16px; }
  .wat-sectors { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .war-field-face { width: 22px; height: 22px; }
  .war-field-face .thumb { width: 20px; height: 20px; }
}
@media (min-width: 900px) {
  .wr-hero, .wr-hero ~ .wstock, .wr-hero ~ .wr-links, .wat, .wbt { max-width: 980px; margin-left: auto; margin-right: auto; }
  .wat-board { padding: 14px; }
  .wbt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .war-field-face { width: 16px; height: 16px; }
  .war-field-face .thumb { width: 14px; height: 14px; }
  .war-field .war-field-half .war-field-zone { padding: 8px 3px 7px; }
  .war-field-zhead b { font-size: var(--fs-2); }
  .war-field-zatk { top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; }
  .wbt-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ws-live-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.ptease-icon { width: 13px; height: 13px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 1.6; }
.ptease-icon path { fill: none; }
.ptease-val { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); }
.ptease-blank {
  display: inline-block; width: 46px; height: .9em; border-radius: 999px; vertical-align: middle;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mute) 45%, transparent), color-mix(in srgb, var(--mute) 20%, transparent));
  filter: blur(2.5px); opacity: .8;
}
.ptease-blank.is-wide { width: 38%; }
.ptease-blank.is-bar { width: auto; flex: 1; height: 7px; filter: blur(1.5px); opacity: .5; }
.ptease-cta {
  display: inline-flex; align-items: center; gap: 7px; justify-self: start;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  font: 600 var(--fs-2) var(--body); color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule));
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.ptease-cta:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.ptease-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 18px var(--gutter) 0;
}
.ptease {
  display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg);
}
.ptease-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ptease-title { margin: 0; }
.ptease-kicker { font: 700 var(--fs-1) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ptease-lede { margin: 0; color: var(--mute); font-size: var(--fs-2); line-height: 1.45; }
.ptease-ghost { display: grid; gap: 8px; }
.ptease-row { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-2); }
.ptease-label { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ptease-inline { display: grid; gap: 8px; justify-items: start; }
.wstock.is-locked { grid-template-columns: 1fr 1fr; }
.wstock.is-locked .wstock-unlock { grid-column: 1 / -1; justify-self: center; }
.wstock-row.is-locked .wstock-track { opacity: .5; }
@media (min-width: 900px) { .ptease-grid { max-width: 980px; margin-left: auto; margin-right: auto; } }
@media (max-width: 640px) {
  .ptease-grid { grid-template-columns: minmax(0, 1fr); }
}


:root { --res-def: #5AA2F0; --res-elim: #EF6A5E; }
:root[data-theme="light"] { --res-def: #1F5FAE; --res-elim: #B2392D; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --res-def: #1F5FAE; --res-elim: #B2392D; }
}

.war-res { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.war-res.is-def { color: var(--res-def); background: color-mix(in srgb, var(--res-def) 15%, transparent); }
.war-res.is-elim { color: var(--res-elim); background: color-mix(in srgb, var(--res-elim) 15%, transparent); }
.wsd-verdict.war-res, .wsd-outtag.war-res { padding: 1px 7px; border-radius: 999px; }
.war-res.is-def::before, .war-res.is-elim::before {
  content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .35em; vertical-align: -.1em;
  background: currentColor; }
.war-res.is-def::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .5 10.5 2v3.6c0 2.9-1.9 4.9-4.5 5.9C3.4 10.5 1.5 8.5 1.5 5.6V2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .5 10.5 2v3.6c0 2.9-1.9 4.9-4.5 5.9C3.4 10.5 1.5 8.5 1.5 5.6V2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.war-res.is-elim::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 1 6 4.6 9.6 1 11 2.4 7.4 6 11 9.6 9.6 11 6 7.4 2.4 11 1 9.6 4.6 6 1 2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 1 6 4.6 9.6 1 11 2.4 7.4 6 11 9.6 9.6 11 6 7.4 2.4 11 1 9.6 4.6 6 1 2.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wat-item.is-held::before { background: var(--res-def); }
.wat-item.is-squad::before { background: var(--res-elim); }

.wsd-squad { gap: 6px; }
.wsd-def + .wsd-def { border-top: 0; }
.wsd-ball.is-live, .wsd-ball.is-out { padding: 6px 8px; border-radius: var(--r); }
.wsd-ball.is-live {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--panel)),
    color-mix(in srgb, var(--gold) 4%, var(--panel)) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 38%, transparent),
    0 6px 18px -10px color-mix(in srgb, var(--gold) 70%, transparent);
}
.wsd-ball.is-live > .thumb, .wsd-ball.is-live > .wsd-blank {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent); }
.wsd-ball.is-live .wsd-name { color: var(--ink); }
.wsd-ball.is-out { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.wsd-ball.is-out > .thumb, .wsd-ball.is-out > .wsd-blank, .wsd-ball.is-out .wsd-ballsub, .wsd-ball.is-out .wsd-cp {
  opacity: .38; filter: grayscale(1); }
.wsd-ball.is-out .wsd-name { color: var(--dim); }
.wsd-ball .wsd-outtag { margin-left: auto; }
.war-hp { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.war-hp-bar { flex: 0 0 64px; height: 5px; border-radius: 999px; background: var(--hairline-2); overflow: hidden; }
.war-hp-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--gold); }
.war-hp-text { font: 600 var(--fs-1) var(--body); font-variant-numeric: tabular-nums; color: var(--mute); }
.war-hp-num { white-space: nowrap; }
.war-field-ball.is-live {
  border-color: color-mix(in srgb, var(--gold) 50%, var(--rule));
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 16%, var(--row)), var(--row));
  box-shadow: 0 0 10px -3px color-mix(in srgb, var(--gold) 60%, transparent); }
.war-field-ball.is-out { opacity: .4; filter: grayscale(1); }

.war-field-zatk.is-none { background: var(--hairline-2); color: var(--mute); }

.wr-fold { margin: 18px var(--gutter) 0; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card); overflow: hidden; }
.wr-fold-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.wr-fold-head:hover { background: var(--lift); }
.wr-fold-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.wr-fold-title { font: 700 var(--fs-3) var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.wr-fold-count { font: 500 var(--fs-1) var(--mono); color: var(--mute); }
.wr-fold.is-condensed .wr-fold-head { cursor: default; }
.wr-fold.is-condensed .wr-fold-head:hover { background: none; }
.wr-fold-chev { margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute);
  transform: translateY(-2px) rotate(45deg); }
.wr-fold.is-open .wr-fold-chev { transform: translateY(2px) rotate(-135deg); }
.wr-fold-body { display: grid; grid-template-rows: 0fr; }
.wr-fold.is-open .wr-fold-body { grid-template-rows: 1fr; }
.wr-fold-clip { min-height: 0; overflow: hidden; }
.wr-fold .wat { margin: 0; padding: 0 12px 14px; }
@media (prefers-reduced-motion: no-preference) {
  .wr-fold-body { transition: grid-template-rows .32s var(--ease); }
  .wr-fold-chev { transition: transform .25s var(--ease); }
}

.wr-strat { display: grid; gap: 8px; margin: 14px var(--gutter) 0; }
@media (min-width: 900px) { .wr-strat { max-width: 980px; margin: 14px auto 0; padding: 0 var(--gutter); box-sizing: border-box; } }
.wr-strat-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.wr-strat-row > .wr-switch { margin-left: auto; }
.wr-switch { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel); color: var(--mute); cursor: pointer;
  font: 600 var(--fs-3) var(--body); }
.wr-switch:hover { color: var(--ink); border-color: var(--dim); }
.wr-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wr-switch-icon { width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0h1v2.1A4 4 0 0 1 9.9 5H12v1H9.9A4 4 0 0 1 7 9.9V12H6V9.9A4 4 0 0 1 2.1 6H0V5h2.1A4 4 0 0 1 6 2.1zm.5 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0h1v2.1A4 4 0 0 1 9.9 5H12v1H9.9A4 4 0 0 1 7 9.9V12H6V9.9A4 4 0 0 1 2.1 6H0V5h2.1A4 4 0 0 1 6 2.1zm.5 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wr-switch[aria-checked="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.wr-switch[aria-checked="true"]:hover { color: var(--bg); filter: brightness(1.08); }
.wr-switch[aria-busy="true"] { opacity: .7; cursor: progress; }
.wr-switch-lock { width: 13px; height: 13px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; color: var(--dim); }
.wr-strat.is-locked .wr-switch-label { color: var(--mute); }
@media (prefers-reduced-motion: no-preference) {
  .wr-switch { transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
}
.wr-refresh-mini { display: none; }
.wr-strat-bar { display: contents; }
.wr-strat-msg:empty { display: none; }
.wr-strat-note { margin: 0; font: var(--fs-2)/1.5 var(--body); color: var(--mute); }
.wr-strat-tease { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 12px;
  border-radius: var(--r); border: 1px dashed var(--rule); font: var(--fs-2)/1.5 var(--body); color: var(--mute); }

.ws-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.ws-balls-strip { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel); color: var(--mute); cursor: pointer;
  font: 500 var(--fs-2) var(--body); box-shadow: var(--shadow-card); }
.ws-balls-strip b { font: 700 var(--fs-2) var(--mono); color: var(--gold); }
.ws-balls-strip:hover { border-color: var(--dim); }
.ws-balls-strip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ws-strip-label { color: var(--ink); font-weight: 600; }
.ws-strip-go { font-style: normal; color: var(--dim); }
@media (max-width: 640px) { .ws-strip-label { display: none; } }
.ws-bar-note { font: var(--fs-1)/1.4 var(--body); color: var(--mute); }
.wr-strat-row .ws-more-area { background: none; box-shadow: none; border-radius: var(--r-lg); }
.wr-strat-row .ws-more-area[open] { flex: 1 1 100%; border: 1px solid var(--rule); background: var(--panel); }
.wr-strat-row .ws-more-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 4px; cursor: pointer;
  list-style: none; }
.wr-strat-row .ws-more-sum::-webkit-details-marker { display: none; }
.wr-strat-row .ws-more-sum b { font: 600 var(--fs-2) var(--body); color: var(--mute); }
.wr-strat-row .ws-more-sum b::after { content: " ▾"; color: var(--dim); }
.wr-strat-row .ws-more-area[open] .ws-more-sum { padding: 10px 14px; }
.wr-strat-row .ws-more-area[open] .ws-more-sum b::after { content: " ▴"; }
.wr-strat-row .ws-more-area:not([open]) .ws-more-what { display: none; }
.wr-strat-row .ws-more-what { font: var(--fs-1) var(--body); color: var(--mute); }
.wr-strat-row .ws-more-body { display: grid; gap: 12px; padding: 0 12px 14px; }
.wr-strat-row .ws-duel-note, .wr-strat-row .ws-access { margin: 0; font: var(--fs-1)/1.5 var(--body); color: var(--dim); }

.war-field-zone.is-target { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent),
  0 0 16px -6px color-mix(in srgb, var(--gold) 80%, transparent); }
.ws-pick { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 6px 2px 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 14%, var(--bg)); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.ws-pick-mark { width: 10px; height: 10px; flex: none; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0h1v2.1A4 4 0 0 1 9.9 5H12v1H9.9A4 4 0 0 1 7 9.9V12H6V9.9A4 4 0 0 1 2.1 6H0V5h2.1A4 4 0 0 1 6 2.1zm.5 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0h1v2.1A4 4 0 0 1 9.9 5H12v1H9.9A4 4 0 0 1 7 9.9V12H6V9.9A4 4 0 0 1 2.1 6H0V5h2.1A4 4 0 0 1 6 2.1zm.5 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ws-pick-face { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--bg); box-shadow: 0 0 0 1.5px var(--gold); }
.ws-pick-face .thumb { width: 16px; height: 16px; border: 0; background: none; border-radius: 50%; }
.ws-pick-face.is-me { box-shadow: 0 0 0 1.5px var(--ink); }
.ws-pick-name::after { content: " ·"; color: var(--dim); }
.ws-pick-name { font: 600 var(--fs-1) var(--body); color: var(--ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.ws-pick-text { font: 700 var(--fs-1) var(--body); color: var(--good); white-space: nowrap; flex: none; }
.ws-pick-text.is-even { color: var(--mute); }
.ws-pick-text.is-bad { color: var(--bad); }
@media (max-width: 640px) { .ws-pick { gap: 3px; padding-right: 5px; } }

.ws-popline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; font: var(--fs-2)/1.4 var(--body); color: var(--ink); }
.ws-popline-tag { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ws-sector { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--rule));
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, var(--panel)), var(--panel) 90px); }
.ws-sector-h { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 700 var(--fs-2) var(--cond);
  letter-spacing: .1em; text-transform: uppercase; }

.ws-drawer { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
  display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--panel);
  border-left: 1px solid var(--rule); box-shadow: var(--shadow-3);
  transform: translateX(105%); visibility: hidden; }
.ws-drawer.is-open { transform: none; visibility: visible; }
.ws-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px;
  border-bottom: 1px solid var(--rule); }
.ws-drawer-title { margin: 0; font: 700 var(--fs-3) var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.ws-drawer-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule); background: var(--bg);
  color: var(--ink); font-size: var(--fs-4); line-height: 1; cursor: pointer; }
.ws-drawer-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ws-drawer-body { overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 12px;
  padding: 12px 14px calc(20px + env(safe-area-inset-bottom)); }
.ws-drawer .ws-card { padding: 0; background: none; border: 0; box-shadow: none; }
@media (max-width: 640px) {
  .ws-drawer { top: auto; left: 0; width: auto; max-height: 78vh; border-left: 0; border-top: 1px solid var(--rule);
    border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(105%); }
  .ws-drawer.is-open { transform: translateY(var(--drag, 0px)); }
  .ws-drawer-head { touch-action: none; }
  .ws-drawer-head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px;
    border-radius: 999px; background: var(--rule); }
  .ws-drawer-head { position: relative; padding-top: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ws-drawer { transition: transform .28s var(--ease), visibility 0s linear .28s; }
  .ws-drawer.is-open { transition: transform .28s var(--ease), visibility 0s; }
}

@media (max-width: 640px) {
  .wr-strat { margin: 0; }
  .wr-strat .wr-strat-row { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; flex-wrap: nowrap;
    gap: 8px; padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--panel) 94%, transparent); border-top: 1px solid var(--rule);
    box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); }
  body:has(.wr-strat) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body:has(.wr-strat) .to-top { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .wr-strat-row .wr-refresh-mini { display: inline-flex; min-height: 44px; min-width: 44px; justify-content: center; padding: 0; }
  .wr-strat-row .wr-refresh-mini .wr-refresh-label { display: none; }
  body:has(.wr-strat) #view.is-swapping { animation-fill-mode: backwards; }
  .wr-strat .wr-strat-row .ws-more-area[open] { position: fixed; left: 8px; right: 8px;
    bottom: calc(64px + env(safe-area-inset-bottom)); max-height: 70vh; overflow-y: auto; box-shadow: var(--shadow-3); }
  .wr-strat.is-on .ws-bar { flex-wrap: nowrap; min-width: 0; }
  .wr-strat.is-on .ws-bar-note { display: none; }
  .wr-switch, .ws-balls-strip, .ws-refresh, .ws-tab, .ws-chip, .ws-mchip, .ws-drawer-close,
  .ws-squad-more > summary, .wsd-details > summary, .wr-strat-row .ws-more-sum, .ws-drawer .btn,
  .wr-strat-row .btn { min-height: 44px; }
  .ws-drawer-close { min-width: 44px; }
  .ws-balls-strip, .ws-tab, .ws-mchip { align-items: center; }
  .ws-squad-more > summary, .wsd-details > summary, .wr-strat-row .ws-more-sum { display: flex; align-items: center; }
  .ws-chip { min-width: 44px; align-items: center; }
  .ws-sector, .ws-drawer, .wr-strat, .ws-pick { --fs-1: var(--fs-3); --fs-2: var(--fs-3); }
  .ws-rung-text b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .ws-rung { grid-template-columns: 16px minmax(0, 1fr) auto minmax(0, 1fr); }
  .ws-mchip .thumb { width: 24px; height: 24px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .ws-drawer, .ws-drawer.is-open { transition: none; }
}
@media (max-width: 359px) {
  .wr-refresh-label, .ws-balls-strip > span:not(.ws-strip-label) { display: none; }
}

.tr-page > .subnav { padding: 10px var(--gutter) 2px; flex-wrap: wrap; }
.tr-updated .note-body { color: var(--mute); }
.tr-list { list-style: none; margin: 0; padding: 4px var(--gutter) 16px; display: grid; gap: 10px; }
@media (min-width: 900px) { .tr-list { grid-template-columns: 1fr 1fr; } }
.tr-card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 10px 12px; min-width: 0; }
.tr-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.tr-when { font: var(--fs-1) var(--mono); color: var(--dim); }
.tr-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; }
.tr-swap-mark { align-self: center; color: var(--gold); font-size: var(--fs-4); line-height: 1; }
.tr-side { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.tr-side .thumb.tr-art { width: 40px; height: 40px; flex-shrink: 0; }
.tr-side-body { display: grid; gap: 2px; min-width: 0; font: var(--fs-2) var(--body); }
.tr-who { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-who a { color: var(--ink); }
.tr-gave { color: var(--mute); }
.tr-ball-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-attack { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tr-arrow { color: var(--dim); font-size: var(--fs-1); }
.tr-sand { color: var(--dim); font-size: var(--fs-1); }
@media (max-width: 430px) {
  .tr-swap { grid-template-columns: 1fr; }
  .tr-swap-mark { justify-self: center; transform: rotate(90deg); }
}
.tr-controls { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px var(--gutter) 8px; }
.tr-controls .subnav { flex-wrap: wrap; }
.tr-count { white-space: nowrap; }
.tr-bar { display: inline-block; vertical-align: middle; height: 6px; width: calc(var(--w, 0) * .6px);
  margin-right: 8px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 70%, transparent); transform-origin: left; }
.tr-split { display: flex; height: 22px; border-radius: var(--r-sm); overflow: hidden; min-width: 160px;
  font: 600 var(--fs-1) var(--body); background: color-mix(in srgb, var(--acc-violet) 45%, var(--panel)); }
.tr-split-a { flex: 0 0 var(--w, 50%); display: flex; align-items: center; padding: 0 6px; white-space: nowrap; overflow: hidden;
  background: color-mix(in srgb, var(--gold) 45%, var(--panel)); color: var(--ink); transform-origin: left; }
.tr-split-b { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; padding: 0 6px;
  white-space: nowrap; overflow: hidden; color: var(--ink); }
.tr-thin { color: var(--dim); font: var(--fs-1) var(--mono); }
.tr-traders .section-title { margin-top: 14px; }
.tr-and { color: var(--mute); }
.tr-who a.plain, td:has(> .tr-and) > a.plain, .trade-note a.plain {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tr-who a.plain:hover, td:has(> .tr-and) > a.plain:hover, .trade-note a.plain:hover { color: var(--gold); }
.tr-see-all a, .tr-ball-line a { color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .tr-card { animation: rise 320ms var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
  .tr-bar, .tr-split-a { animation: dl-fill-x 520ms var(--ease, ease) both; }
  .tr-body { animation: ty-in 220ms ease both; }
}

.wr-band {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "a score b" "a tug b" "live live tools" "line line share" "strat strat strat";
  align-items: center; gap: 4px 10px;
  margin: 4px var(--gutter) 10px; padding: 10px 12px;
  border-radius: var(--r-lg); border: 1px solid var(--rule);
  background:
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 28px) top / 100% 40% no-repeat,
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--wf-a) 26%, transparent), transparent 60%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--wf-b) 26%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--bg));
  box-shadow: var(--shadow-1);
}
.wr-band .wr-hero, .wr-band .wr-hero-sides, .wr-band .wr-hero-mid, .wr-band .wr-band-tools { display: contents; }
.wr-band .wr-hero::after { display: none; }
.wr-band .wr-hero-side.is-a { grid-area: a; }
.wr-band .wr-hero-side.is-b { grid-area: b; }
.wr-band .wr-hero-score { grid-area: score; justify-self: center; gap: 10px; }
.wr-band .wr-hero-score .war-banners { font-size: clamp(24px, 7vw, 34px); }
.wr-band .wr-hero-dash { font-size: clamp(18px, 4vw, 26px); }
.wr-band .wr-hero-tug { grid-area: tug; justify-self: center; align-self: start; width: min(100%, 160px); height: 4px; }
.wr-band .wr-hero-live { grid-area: live; min-width: 0; }
.wr-band .wr-hero-live:empty { display: none; }
.wr-band .wlive-strip { gap: 0; }
.wr-band .wlive-dot { margin-right: 6px; }
.wr-band .wr-hero-line { grid-area: line; justify-content: flex-start; font-size: var(--fs-1); text-align: left; }
.wr-band .wr-band-tools > .wr-refresh { grid-area: tools; justify-self: end; justify-content: flex-end; flex-wrap: nowrap; }
.wr-band .wr-band-tools > .wr-strat { grid-area: strat; margin: 0; padding: 0; max-width: none; min-width: 0; }
.wr-band .wr-hero-side { gap: 2px; align-self: start; }
.wr-band .wr-hero-crest { width: 34px; height: 34px; }
.wr-band .wr-hero-crest .crest { width: 30px; height: 30px; }
.wr-band .wr-hero-side .war-side-name { font-size: var(--fs-1); line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.wr-band .war-side-sub { font: var(--fs-1)/1.25 var(--body); color: var(--dim); }
.wr-band .wr-refresh-btn { padding: 6px 12px; color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--rule));
  background: color-mix(in srgb, var(--gold) 8%, transparent); }
.wr-band .wr-refresh-btn:hover:not(:disabled) { border-color: var(--gold); }
.wr-band .wr-refresh-say { white-space: nowrap; }
@media (min-width: 641px) {
  .wr-band { padding: 12px 16px; }
  .wr-band .wr-hero-side { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 0;
    align-items: center; justify-items: start; text-align: left; align-self: center; }
  .wr-band .wr-hero-side > * { grid-column: 2; }
  .wr-band .wr-hero-side > .wr-hero-crest { grid-column: 1; grid-row: 1 / span 3; }
  .wr-band .wr-hero-side.is-b { grid-template-columns: minmax(0, 1fr) auto; justify-items: end; text-align: right; }
  .wr-band .wr-hero-side.is-b > * { grid-column: 1; }
  .wr-band .wr-hero-side.is-b > .wr-hero-crest { grid-column: 2; }
  .wr-band .wr-hero-crest { width: 44px; height: 44px; }
  .wr-band .wr-hero-crest .crest { width: 38px; height: 38px; }
  .wr-band .wr-hero-side .war-side-name { font-size: var(--fs-3); -webkit-line-clamp: 1; line-clamp: 1; }
}
@media (min-width: 1024px) {
  .wr-band {
    position: sticky; top: var(--sticky-top); z-index: 30;
    width: min(1240px, calc(100% - 2 * var(--gutter))); box-sizing: border-box; margin: 4px auto 12px;
    grid-template-columns: fit-content(15rem) auto fit-content(15rem) minmax(0, 1fr) auto auto;
    grid-template-areas: "a score b live tools strat" "a tug b line share strat";
    column-gap: 16px; padding: 10px 16px;
    background-color: var(--panel);
  }
  .wr-band .wr-hero-live, .wr-band .wr-hero-line { justify-self: start; }
  .wr-band .wr-band-tools > .wr-strat { position: relative; justify-self: end; }
  .wr-band .wr-strat-row { flex-wrap: nowrap; }
  .wr-band .wr-strat-msg { position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, 80vw); z-index: 5;
    border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-3); }
  .wr-band .wr-strat-msg > * { margin: 0; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .wr-band {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
    grid-template-areas: "a score b tools strat" "a tug b share strat" "live live line line line";
    row-gap: 2px;
  }
  .wr-band .wr-hero-side .war-side-name, .wr-band .war-side-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .wr-band .wr-hero-line { justify-self: end; }
}

.wr-stage { display: flex; flex-direction: column; min-width: 0; }
.wr-main { min-width: 0; order: 0; }
aside.wr-side { display: contents; }
.wr-side-chips { order: -1; min-width: 0; }
.wr-side-strat { display: none; }
.wr-side-links { order: 1; }
.wr-side-links .wr-links { margin: 10px var(--gutter) 0; }
.wr-side-chips:empty, .wr-side-links:empty { display: none; }
@media (min-width: 1024px) {
  .wr-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 27%, 340px); gap: 16px; align-items: start;
    width: min(1240px, calc(100% - 2 * var(--gutter))); margin: 0 auto 8px; }
  .wr-stage .war-field-wrap { max-width: none; margin: 0; }
  aside.wr-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
    position: sticky; top: calc(var(--sticky-top) + var(--wr-band-h, 96px) + 24px);
    max-height: calc(100vh - var(--sticky-top) - var(--wr-band-h, 96px) - 36px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .wr-side-strat { display: block; }
  .wr-side-strat:empty { display: none; }
  .wr-side-links .wr-links { margin: 0; }
}

.wr-side-chips .wstock { display: grid; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; background: none; box-shadow: none;
  grid-template-columns: minmax(0, 1fr); }
.wstock-legend { display: none; }
.wstock-chips { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) 2px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.wstock-chips::-webkit-scrollbar { display: none; }
.wstock-chips:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wstock-chip { flex: 0 0 auto; min-width: 148px; display: grid; gap: 5px; scroll-snap-align: start;
  padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--rule);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 4%, var(--panel)), var(--panel)); }
.wstock-chip-head { display: flex; align-items: center; gap: 4px; min-width: 0;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.wstock-chip-head .wstock-label { color: inherit; }
.wstock-chip .wstock-row { --side: var(--wf-a); display: grid; grid-template-columns: minmax(44px, 1fr) auto; align-items: center; gap: 8px; }
.wstock-chip .wstock-row.is-b { --side: var(--wf-b); }
.wstock-chip .wstock-track { height: 5px; border-radius: 999px; background: var(--hairline-2); overflow: hidden; }
.wstock-chip .wstock-val { font: 700 var(--fs-1) var(--mono); color: var(--ink); min-width: 4.5ch; text-align: right; }
.wstock-chip .wstock-row.is-unknown .wstock-val { color: var(--dim); }
.wr-side-chips .wstock.is-locked { grid-template-columns: minmax(0, 1fr); }
.wr-side-chips .wstock-unlock { justify-self: start; margin: 0 var(--gutter); }
.wstock-chip .ptease-val { justify-self: end; }
@media (min-width: 1024px) {
  .wr-side-chips .wstock { margin: 0; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-lg);
    background: linear-gradient(90deg, color-mix(in srgb, var(--wf-a) 7%, var(--panel)), var(--panel) 50%, color-mix(in srgb, var(--wf-b) 7%, var(--panel))); }
  .wstock-legend { display: flex; justify-content: space-between; gap: 8px; min-width: 0; font: 700 var(--fs-1) var(--cond);
    letter-spacing: .05em; text-transform: uppercase; }
  .wstock-legend b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wstock-legend .is-a { color: var(--wf-a); }
  .wstock-legend .is-b { color: var(--wf-b); text-align: right; }
  .wstock-chips { flex-direction: column; overflow: visible; padding: 0; scroll-snap-type: none; }
  .wstock-chip { min-width: 0; }
  .wr-side-chips .wstock-unlock { margin: 0; }
}

.wla { margin: 0 var(--gutter) 10px; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.wla-title { grid-column: 1 / -1; margin: 0; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); }
.wla-side { --side: var(--wf-a); min-width: 0; }
.wla-side.is-b { --side: var(--wf-b); }
.wla-side-name { margin: 0 0 4px; font: 700 var(--fs-1) var(--cond); letter-spacing: .05em; text-transform: uppercase;
  color: var(--side); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wla-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wla-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: var(--r); background: var(--row); min-height: 34px; }
.wla-row .thumb, .wla-ball-blank { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; }
.wla-ball-blank { display: block; background: var(--hairline-2); }
.wla-mid { display: grid; min-width: 0; line-height: 1.2; }
.wla-who { font: 600 var(--fs-2) var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wla-res { justify-self: start; margin-top: 2px; padding: 1px 7px; border-radius: 999px; background: var(--pill-on);
  font: 700 var(--fs-1)/1.4 var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.wla-res.is-zone { color: color-mix(in srgb, var(--good) 80%, var(--ink)); background: color-mix(in srgb, var(--good) 14%, transparent); }
.wla-res.is-squad { color: color-mix(in srgb, var(--bad) 80%, var(--ink)); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.wla-end { display: grid; justify-items: end; line-height: 1.2; }
.wla-pts { font: 600 var(--fs-1) var(--mono); color: var(--ink); }
.wla-ago { font: 500 var(--fs-1) var(--mono); color: var(--dim); white-space: nowrap; }
.wla-row.is-locked { grid-template-columns: 26px minmax(0, 1fr) auto; opacity: .7; }
.wla-blur { display: block; height: 10px; border-radius: 999px; background: var(--hairline-2); filter: blur(1.5px); }
.wla-lock { width: 13px; height: 13px; stroke: var(--dim); fill: none; stroke-width: 1.4; }
.wla-none { margin: 0; font-size: var(--fs-1); color: var(--dim); }
.wla-unlock { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 640px) {
  .wla { padding: 8px 10px; gap: 6px; grid-template-columns: minmax(0, 1fr); }
  .wla-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 5px; padding: 3px 5px; min-height: 30px; }
  .wla-row .thumb, .wla-ball-blank { width: 22px; height: 22px; }
  .wla-who { font-size: var(--fs-1); min-width: 0; }
  .wla-mid { display: flex; align-items: center; gap: 6px; }
  .wla-res { margin-top: 0; flex: none; }
}
@media (min-width: 1024px) {
  .wla { margin: 12px 0 0; grid-template-columns: minmax(0, 1fr); }
}

.ws-more-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer;
  font: 600 var(--fs-2) var(--body); box-shadow: var(--shadow-card); }
.ws-more-btn::after { content: "▴"; color: var(--dim); font-size: .8em; }
.ws-more-btn:hover { border-color: var(--dim); }
.ws-more-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ws-more-btn[hidden] { display: none; }
@media (min-width: 1024px) { .ws-more-btn { display: none; } }
.ws-panel { display: grid; gap: 8px; }
.ws-panel:empty { display: none; }
.ws-fold { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.ws-fold-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px;
  padding: 10px 12px; cursor: pointer; list-style: none; }
.ws-fold-sum::-webkit-details-marker { display: none; }
.ws-fold-sum::after { content: "▾"; color: var(--dim); }
.ws-fold[open] > .ws-fold-sum::after { content: "▴"; }
.ws-fold-sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-lg); }
.ws-fold-label { font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.ws-fold-line { font: var(--fs-2) var(--body); color: var(--mute); text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-fold-body { padding: 0 12px 12px; display: grid; gap: 10px; min-width: 0; }
.ws-fold .ws-card, .ws-more-pane .ws-card { padding: 0; background: none; border: 0; box-shadow: none; }
.ws-fold .ws-card-title, .ws-more-pane .ws-card-title, .ws-fold .ws-card-hint { display: none; }
.ws-fold .ws-card-head:not(:has(.info)), .ws-more-pane .ws-card-head:not(:has(.info)) { display: none; }
.ws-fold .ws-card-head, .ws-more-pane .ws-card-head { float: right; margin: 0 0 4px 8px; padding: 0; border: 0; }
.ws-more-tabs { position: sticky; top: 0; z-index: 1; background: var(--panel); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.ws-more-tabs .ws-tab { white-space: nowrap; flex: none; padding-left: 10px; padding-right: 10px; }
.ws-more-pane { min-width: 0; }

@media (min-width: 641px) and (max-width: 1023px) {
  .wr-strat .wr-strat-row { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; flex-wrap: nowrap;
    gap: 10px; padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--panel) 94%, transparent); border-top: 1px solid var(--rule);
    box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); }
  body:has(.wr-strat) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body:has(.wr-strat) .to-top { bottom: calc(68px + env(safe-area-inset-bottom)); }
  body:has(.wr-strat) #view.is-swapping { animation-fill-mode: backwards; }
  .wr-strat-row .wr-refresh-mini { display: inline-flex; }
}

@media (max-width: 1023px) {
  .wr-refresh.has-mini > .wr-refresh-btn:not(.wr-refresh-mini) { display: none; }
}

.war-field-face.has-aura, .war-aura { position: relative; border-radius: 50%;
  box-shadow: 0 0 0 2px #f5b301, 0 0 8px 2px rgba(245, 179, 1, .55); }
.war-aura { display: inline-grid; place-items: center; width: 32px; height: 32px; }
.war-field-face.has-aura::after, .war-aura::after { content: ""; position: absolute; inset: -4px; border-radius: 50%;
  pointer-events: none; box-shadow: 0 0 12px 5px rgba(255, 190, 40, .8); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .war-field-face.has-aura::after, .war-aura::after { animation: war-aura-pulse 2.4s ease-in-out infinite; }
}
@keyframes war-aura-pulse { 0%, 100% { opacity: .25; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.08); } }

.wsb-dates { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0;
  margin: 8px 0 16px; font-family: var(--cond); font-weight: 800; line-height: 1;
  font-size: clamp(36px, 10vw, 68px); letter-spacing: .03em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, var(--gold) 50%, var(--ink) 62%, var(--ink) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--gold) 22%, transparent)); }
.wsb-dch { display: inline-block; }
.wsb-dch.is-space { width: .28em; }
.wsb-dch.is-dash { padding: 0 .12em; }
@media (prefers-reduced-motion: no-preference) {
  .wsb-dates { animation: wsb-dates-shine 5s ease-in-out 1s infinite; }
  .wsb-dch { animation: wsb-flip-in .55s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--i, 0) * 45ms); }
}
.wsb-weekhead { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 18px; }
.wsb-weekhead .wsb-dates { margin: 0; }
.wsb-head-row { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; max-width: 100%; }
.wsb-head-phase { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px;
  border: 1px solid var(--rule); background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: var(--fs-2); line-height: 1.2; }
.wsb-head-phase[hidden] { display: none; }
.wsb-head-word { font-family: var(--cond); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wsb-head-left { color: var(--mute); font-variant-numeric: tabular-nums; }
.wsb-head-left:empty { display: none; }
.wsb-head-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.wsb-head-phase[data-phase="attack"] .wsb-head-dot { background: var(--bad, #ef4444);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad, #ef4444) 22%, transparent); }
.wsb-head-phase[data-phase="attack"] { border-color: color-mix(in srgb, var(--bad, #ef4444) 40%, var(--rule)); }
.wsb-count { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px 10px;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--bad, #ef4444) 45%, var(--rule));
  background: color-mix(in srgb, var(--bad, #ef4444) 9%, transparent); }
.wsb-count[hidden] { display: none; }
.wsb-count-label { font-family: var(--cond); font-weight: 700; font-size: var(--fs-1); line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wsb-count-digits { font-family: var(--mono); font-weight: 700; font-size: clamp(30px, 8vw, 48px); line-height: 1; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; color: var(--bad, #ef4444); }
.is-fire .wsb-count { position: relative; overflow: visible; isolation: isolate;
  border-color: #ff7a18; background: linear-gradient(180deg, rgba(255,122,24,.10), rgba(220,38,38,.22));
  box-shadow: 0 0 18px rgba(255,90,20,.55), 0 0 42px rgba(220,38,38,.35), inset 0 -10px 24px rgba(255,140,0,.25);
  animation: wsb-fire-glow 1.6s ease-in-out infinite alternate; }
.is-fire .wsb-count::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 55%; height: 70%;
  border-radius: 50% 50% 20% 20%; filter: blur(10px);
  background: radial-gradient(ellipse at 50% 100%, rgba(255,200,60,.9), rgba(255,100,20,.6) 40%, rgba(220,38,38,0) 72%);
  transform-origin: 50% 100%; animation: wsb-fire-flicker .9s ease-in-out infinite alternate; }
.is-fire .wsb-count-label { color: #ffb347; }
.is-fire .wsb-count-digits { color: #fff3e0;
  background: linear-gradient(0deg, #ff3d00 0%, #ff9100 45%, #ffe082 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 6px rgba(255,120,0,.85)) drop-shadow(0 0 16px rgba(255,60,0,.5)); }
@keyframes wsb-fire-glow { from { box-shadow: 0 0 14px rgba(255,90,20,.45), 0 0 34px rgba(220,38,38,.28), inset 0 -8px 20px rgba(255,140,0,.2); }
  to { box-shadow: 0 0 24px rgba(255,120,30,.75), 0 0 56px rgba(220,38,38,.45), inset 0 -14px 30px rgba(255,160,0,.35); } }
@keyframes wsb-fire-flicker { 0% { transform: scale(1, .9) skewX(-2deg); opacity: .75; } 50% { transform: scale(1.04, 1.08) skewX(2deg); opacity: 1; }
  100% { transform: scale(.97, 1) skewX(-1deg); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .is-fire .wsb-count, .is-fire .wsb-count::before { animation: none; } }
@keyframes wsb-dates-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
@keyframes wsb-flip-in { from { opacity: 0; transform: translateY(.45em) rotateX(80deg); } to { opacity: 1; transform: none; } }

.wsb-tile.is-mad { border-color: color-mix(in srgb, #e11d48 55%, var(--rule)); }
.wsb-mad { position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 94%; box-sizing: border-box;
  padding: 6px 10px; border: 3px double #f43f5e; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 78%, transparent); color: #fb7185;
  font-family: var(--cond); font-weight: 800; line-height: 1.1; font-size: clamp(12px, 3.4vw, 15px);
  letter-spacing: .06em; text-align: center; white-space: nowrap;
  text-shadow: 0 0 10px rgba(244, 63, 94, .55);
  box-shadow: 0 0 0 1px rgba(244, 63, 94, .3), 0 0 26px rgba(244, 63, 94, .35);
  transform: translate(-50%, -50%) rotate(-7deg); }
.wsb-mad-emoji { font-size: 1.15em; text-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .wsb-mad:not(.is-still) { animation: wsb-mad-slam .5s cubic-bezier(.2, .9, .25, 1.2) both .2s; }
}
@keyframes wsb-mad-slam {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-16deg) scale(2.6); }
  70% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
}

.wsb-tile { content-visibility: auto; contain-intrinsic-size: auto 230px; }

.wrv { margin: 16px 0 18px; padding: 12px 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 55%), var(--panel);
  box-shadow: var(--shadow-card); }
.wrv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wrv-title { margin: 0; }
.wrv-scope { font: 600 var(--fs-1) var(--body); color: var(--mute); padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; }
.wrv.is-preview .wrv-title::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px;
  border-radius: 50%; background: var(--bad); vertical-align: middle; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); }
.wrv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 10px; }
.wrv-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--row); color: var(--mute); cursor: pointer; text-align: left; }
.wrv-tab:hover { background: var(--lift); color: var(--ink); }
.wrv-tab.is-on { border-color: color-mix(in srgb, var(--gold) 60%, var(--rule)); color: var(--ink);
  background: color-mix(in srgb, var(--gold) 10%, var(--row)); }
.wrv-tab-name { font: 700 var(--fs-3) var(--body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrv-tab-vs { font: var(--fs-1) var(--body); color: var(--dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrv-tab.is-on .wrv-tab-vs { color: var(--mute); }
.wrv-side { display: grid; gap: 10px; }
.wrv-card { min-width: 0; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--row); }
.wrv-card-title { margin: 0 0 8px; font: 700 var(--fs-2) var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.wrv-card.is-prepare { border-color: color-mix(in srgb, var(--acc-amber) 45%, var(--rule)); }
.wrv-card.is-prepare .wrv-card-title { color: var(--acc-amber); }
.wrv-empty { margin: 0; color: var(--dim); font-size: var(--fs-2); }
.wrv .chips { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.wrv-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font: 600 var(--fs-2) var(--body); color: var(--ink); }
.wrv-item .thumb { width: 22px; height: 22px; border: 0; border-radius: var(--r-sm); background: transparent; }
.wrv-item.is-none { color: var(--dim); font-weight: 400; }
.wrv-stat { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); }
.wrv-stat b { white-space: nowrap; }
.wrv-meter { flex: 1; min-width: 40px; max-width: 120px; height: 5px; border-radius: 999px; background: var(--lift); overflow: hidden; }
.wrv-meter i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--bad); }
.wrv-label { font: 600 var(--fs-1) var(--body); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.wrv-beat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wrv-typings { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wrv-typing { display: inline-flex; align-items: center; gap: 3px; }
.wrv-n { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.wrv-none { color: var(--dim); font-size: var(--fs-2); }
.wrv-combos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wrv-combo { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; row-gap: 5px; align-items: center;
  padding: 8px; border-radius: var(--r); background: var(--panel); }
.wrv-combo > :not(.wrv-rank) { grid-column: 2; }
.wrv-rank { grid-row: 1 / span 3; align-self: start; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 700 var(--fs-2) var(--mono); color: var(--bg); background: var(--acc-amber); }
.wrv-combo-what { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wrv-walls { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wrv-wall { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; border-radius: var(--r); background: var(--panel); }
.wrv-pic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--bad) 18%, transparent), transparent 70%); }
.wrv-pic .thumb { width: 52px; height: 52px; border: 0; background: transparent; }
.wrv-pic.is-small { width: 40px; height: 40px; background: none; }
.wrv-pic.is-small .thumb { width: 40px; height: 40px; }
.wrv-wall-body { display: grid; gap: 5px; min-width: 0; }
.wrv-name { font: 700 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrv-copies { margin-left: 6px; font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.wrv-kit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wrv-lineups { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wrv-lineup { padding: 8px; border-radius: var(--r); background: var(--panel); display: grid; gap: 8px; }
.wrv-lineup-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-2); }
.wrv-owner { font-size: var(--fs-3); }
.wrv-zone { color: var(--mute); }
.wrv-held { color: var(--ink); font-weight: 600; }
.wrv-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; font: 700 var(--fs-1) var(--body);
  color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 60%, transparent);
  background: color-mix(in srgb, var(--good) 14%, transparent); }
.wrv-five { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.wrv-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 4px 2px;
  border-radius: var(--r-sm); background: var(--row); text-align: center; }
.wrv-slot-name { max-width: 100%; font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrv-slot .chips { justify-content: center; }
.wrv-slot .wrv-item { margin-top: auto; }
.wrv-slot .wrv-item .thumb { width: 24px; height: 24px; }
.wrv-slot-held { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.wrv-pattern { display: flex; gap: 6px; flex-wrap: wrap; }
.wrv-pill { padding: 2px 8px; border-radius: 999px; font: 600 var(--fs-1) var(--body); color: var(--ink);
  border: 1px solid var(--rule); background: var(--row); }
@media (min-width: 640px) {
  .wrv { padding: 14px 16px 16px; }
  .wrv-walls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .wrv-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .wrv-card.is-prepare { grid-column: 1 / -1; }
  .wrv-card.is-prepare .wrv-combos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wrv-walls { grid-template-columns: minmax(0, 1fr); }
}
.wsb-more { height: 1px; }
.wsb-more[hidden] { display: none; }

.wsb-stomp-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 5px; border-radius: 999px; white-space: nowrap;
  font: 800 var(--fs-1) var(--mono); letter-spacing: .12em; color: #111; background: #f97316;
}
.wsb-stomp-boom { display: inline-block; line-height: 1; }
.wsb-tile.is-stomp { border-color: color-mix(in srgb, #f97316 45%, var(--rule)); }
@media (prefers-reduced-motion: no-preference) {
  .wsb-tile .wsb-stomp-badge { animation: wsb-stomp-down .5s cubic-bezier(.2, .9, .25, 1.3) both .1s; }
  .wsb-tile .wsb-stomp-boom { animation: wsb-stomp-boom .6s ease-out both .4s; }
}
@keyframes wsb-stomp-down {
  0% { opacity: 0; transform: translateY(-14px) scale(1.5) rotate(-8deg); }
  70% { opacity: 1; transform: translateY(1px) scale(.92) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes wsb-stomp-boom { 0% { transform: scale(.4); } 45% { transform: scale(1.6); } 100% { transform: scale(1); } }

.wsb-page { display: contents; }
.wsb-fx { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; margin-left: auto; padding: 4px 12px;
  border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--mute); cursor: pointer;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.wsb-fx-icon { position: relative; display: inline-grid; place-items: center; }
.wsb-fx[aria-pressed="false"] .wsb-fx-icon::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%;
  height: 1.5px; background: currentColor; transform: rotate(-45deg); }
.wsb-fx[aria-pressed="true"] .wsb-fx-icon { color: var(--gold); }
.wsb-fx[aria-pressed="false"] { opacity: .7; }
.wsb-fx[aria-pressed="false"] .wsb-fx-label { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.wsb-fx:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) { .wsb-fx:hover { color: var(--ink); border-color: var(--mute); } }
.wsb-tools .wsb-fx + .wsb-refresh { margin-left: 0; }
@media (max-width: 420px) {
  .wsb-fx-label { display: none; }
  .wsb-fx { padding: 7px 9px; }
}
.wsb-calm *:not(.wr-refresh-icon), .wsb-calm *::before, .wsb-calm *::after {
  animation: none !important; transition: none !important;
}
.wsb-calm .wsb-tile { opacity: 1 !important; transform: none !important; }

.share-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: var(--mute); cursor: pointer;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.share-btn svg { flex: none; }
.share-btn:hover, .share-btn:focus-visible { color: var(--gold); border-color: var(--gold); }
.share-btn.is-working { cursor: progress; opacity: .7; }
.wr-band .wr-band-tools > .wr-share { grid-area: share; justify-self: end; padding: 6px 12px; color: var(--ink); }
.wr-band .wr-band-tools > .wr-band-acts { grid-area: share; justify-self: end; display: flex; align-items: center; gap: 8px; }
.wr-band .wr-band-acts > .wr-share { padding: 6px 12px; color: var(--ink); }
.wr-band .wr-band-acts > .war-home { width: 32px; height: 32px; border-radius: 999px; }
.title-row .pf-share { padding: 6px 12px; }
@media (max-width: 359px) {
  .share-btn .share-btn-label { display: none; }
  .share-btn { padding: 7px 9px; }
  .wr-band .wr-band-tools > .wr-share, .wr-band .wr-band-acts > .wr-share, .title-row .pf-share { padding: 7px 9px; }
}

.share-sheet { position: fixed; margin: auto; width: min(560px, calc(100vw - 28px)); max-height: min(88vh, 760px); padding: 0;
  color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); overflow: auto; overscroll-behavior: contain; }
.share-sheet::backdrop { background: var(--scrim); }
.share-sheet-close { position: absolute; top: 20px; right: calc(var(--gutter) + 6px); z-index: 1;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--rule); color: var(--ink); border-radius: 999px;
  cursor: pointer; font: 700 var(--fs-4)/1 var(--body); }
.share-sheet-close:hover, .share-sheet-close:focus-visible { border-color: var(--gold); color: var(--gold); }
.share-sheet-body { display: grid; gap: 12px; padding: 14px var(--gutter) 16px; }
.share-sheet-pic { display: block; width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--rule); }
.share-sheet-line { margin: 0; font: var(--fs-2)/1.5 var(--body); color: var(--mute); overflow-wrap: anywhere; }
.share-sheet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.share-sheet-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px;
  border-radius: var(--r); border: 1px solid var(--rule); background: var(--row); color: var(--ink); cursor: pointer;
  font: 700 var(--fs-2) var(--cond); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center; }
.share-sheet-btn:hover, .share-sheet-btn:focus-visible { border-color: var(--gold); color: var(--gold); }
.share-sheet-btn.is-main { grid-column: 1 / -1; color: var(--bg); background: var(--gold); border-color: var(--gold); }
.share-sheet-btn.is-main:hover, .share-sheet-btn.is-main:focus-visible { color: var(--bg); filter: brightness(1.08); }

.legal .gfx { margin: 16px 0 22px; }
.legal .gfx ul, .legal ul.gfx, .legal .gfx ol { list-style: none; margin: 0; padding: 0; }
.legal .gfx li { margin: 0; }
.legal .gfx p { margin: 0; }
.gfx-ends, .gfx-bars, .gfx-series, .win-card, .duel-move {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

.legal .gfx-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; gap: 6px; margin: 0 0 18px; padding: 18px 10px 14px; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  background:
    radial-gradient(70% 90% at 18% 105%, color-mix(in srgb, var(--acc-amber) 22%, transparent), transparent 70%),
    radial-gradient(70% 90% at 82% 105%, color-mix(in srgb, var(--acc-violet) 24%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, var(--hairline-2) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, var(--panel), var(--row)); }
.gfx-hero::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent); }
.hero-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-ball { display: block; width: min(168px, 34vw); height: auto; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35)); }
.hero-pips { display: flex; gap: 5px; }
.hero-pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-amber); }
.hero-r .hero-pips i { background: var(--acc-violet); }
.hero-vs { position: relative; z-index: 1; align-self: center; padding-bottom: 18px; }
.hero-vs b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font: 700 var(--fs-4)/1 var(--cond); letter-spacing: .06em; color: var(--bg); background: var(--gold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 18%, transparent), 0 0 30px color-mix(in srgb, var(--gold) 40%, transparent); }

.gfx-win { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.win-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.win-k { font: 700 var(--fs-5)/1 var(--cond); letter-spacing: .02em; color: var(--ink); }
.win-l { font-size: var(--fs-2); color: var(--mute); }
.win-or { align-self: center; font: 600 var(--fs-1) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.win-pips { display: flex; gap: 6px; }
.win-pips i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--rule); background: var(--row); }
.win-pips i.is-ko { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.pip-x { width: 13px; height: 13px; }
.win-ticks { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 22px; align-items: end; }
.win-ticks i { height: 55%; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 45%, transparent); transform-origin: bottom; }
.win-ticks i:nth-child(6n) { height: 100%; background: var(--gold); }

.gfx-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.duel-move { position: relative; padding: 14px 14px 13px; overflow: hidden; }
.duel-move::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 75%); }
.legal .gfx .move-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font: 700 var(--fs-4)/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.move-icon { flex: none; box-sizing: border-box; width: 34px; height: 34px; padding: 7px; border-radius: var(--r);
  color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent); }
.legal .duel-move p { font-size: var(--fs-3); line-height: 1.6; }

.order-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.legal .order-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px 12px; text-align: center; background: var(--row); border: 1px solid var(--rule); border-radius: var(--r); }
.order-steps li + li::before { content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 2px;
  background: var(--gold); opacity: .55; }
.order-n { position: absolute; top: 6px; left: 8px; font: 600 var(--fs-1) var(--mono); color: var(--dim); }
.order-icon { width: 26px; height: 26px; color: var(--gold); }
.order-l { font: 600 var(--fs-2)/1.25 var(--body); color: var(--ink); }
.gfx-order figcaption { margin-top: 10px; font-size: var(--fs-3); line-height: 1.65; color: var(--mute); }

.legal .gfx-stats { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; }
.legal .gfx-stats li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 16px;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.stat-map { display: flex; align-items: center; gap: 8px; }
.stat-from, .stat-to { padding: 3px 9px; border-radius: 999px; font: 600 var(--fs-2)/1.4 var(--body); white-space: nowrap; }
.stat-from { color: var(--ink); background: var(--row); border: 1px solid var(--rule); }
.stat-to { color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.stat-arrow { flex: none; width: 22px; height: 11px; color: var(--dim); }
.stat-text { font-size: var(--fs-3); line-height: 1.55; color: var(--mute); }

.gfx-ends, .gfx-bars, .gfx-series { padding: 14px 16px; }
.ends-bar { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--row); }
.ends-seg { flex: none; width: var(--w); transform-origin: left; }
.ends-0 { background: var(--gold); }
.ends-1 { background: var(--acc-violet); }
.ends-2 { background: var(--dim); }
.legal .gfx .ends-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: var(--fs-2); color: var(--mute); }
.ends-key li { display: flex; align-items: center; gap: 6px; }
.ends-key b { font: 600 var(--fs-2) var(--mono); color: var(--ink); }
.ends-dot { width: 10px; height: 10px; border-radius: var(--r-sm); }
.legal .gfx .ends-avg { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.ends-avg b { font: 700 var(--fs-5)/1 var(--cond); color: var(--ink); }
.ends-avg span { font-size: var(--fs-2); color: var(--mute); }
.gfx-ends figcaption, .gfx-bars figcaption { margin-top: 12px; font: 500 var(--fs-1) var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); }
.legal .gfx .bars-h { margin-bottom: 22px;
  font: 700 var(--fs-3) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.gfx-bars li:first-child .bars-even::before { content: "50%"; position: absolute; white-space: nowrap; bottom: calc(100% + 3px); left: 0;
  transform: translateX(-50%); font: 500 var(--fs-1)/1 var(--mono); color: var(--dim); }
.legal .gfx-bars ul { display: grid; gap: 12px; }
.legal .gfx-bars li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 3rem; align-items: center; gap: 12px; }
.bars-l { font-size: var(--fs-2); color: var(--mute); }
.bars-track { position: relative; height: 10px; border-radius: 999px; background: var(--row); }
.bars-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 45%, transparent), var(--gold)); }
.bars-even { position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 1.5px dashed var(--mute); opacity: .8; }
.bars-v { font: 600 var(--fs-2) var(--mono); color: var(--ink); text-align: right; }

.gfx-tiles { padding: 14px 16px; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.legal .gfx .tiles-h { margin-bottom: 12px;
  font: 700 var(--fs-3) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.legal .gfx .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 10px; }
.legal .gfx .tile { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  background: var(--row); border: 1px solid var(--rule); border-radius: var(--r); }
.tile-v { font: 700 var(--fs-5)/1 var(--cond); letter-spacing: .01em; color: var(--gold); font-variant-numeric: tabular-nums; }
.tile-k { font-size: var(--fs-2); line-height: 1.35; color: var(--mute); }
.gfx-tiles figcaption { margin-top: 12px; font: 500 var(--fs-1) var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); }
.gfx-points { padding: 14px 16px; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.legal .gfx .pts-h { margin-bottom: 12px;
  font: 700 var(--fs-3) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.pts-cols, .legal .gfx-points .pts-row { display: grid; align-items: center; column-gap: 18px;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 1fr); }
.pts-cols { padding-bottom: 8px; border-bottom: 1px solid var(--rule);
  font: 600 var(--fs-1) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pts-cols .pts-open, .pts-cols .pts-rarity { display: flex; align-items: center; gap: 6px; }
.pts-cols .pts-open::before, .pts-cols .pts-rarity::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); }
.pts-cols .pts-rarity::before { background: var(--acc-violet); }
.legal .gfx-points ul { display: grid; gap: 10px; margin-top: 12px; }
.pts-l { font-size: var(--fs-2); color: var(--mute); }
.pts-cell { display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem; align-items: center; gap: 10px; }
.pts-track { position: relative; height: 10px; border-radius: 999px; background: var(--row); overflow: hidden; }
.pts-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 45%, transparent), var(--gold)); }
.pts-rarity .pts-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc-violet) 45%, transparent), var(--acc-violet)); }
.pts-v { font: 600 var(--fs-2) var(--mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.legal .gfx-points .pts-foot { padding-top: 10px; border-top: 1px solid var(--rule); }
.pts-cell.is-thin { grid-template-columns: minmax(0, 1fr); }
.pts-cell.is-thin .pts-track { display: none; }
.legal .gfx-points .pts-cell.is-thin .pts-v { text-align: left; font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.gfx-points figcaption { margin-top: 12px; font: 500 var(--fs-1) var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); }
.gfx-points figcaption b { font-weight: 600; color: var(--mute); }
@media (max-width: 640px) {
  .pts-cols, .legal .gfx-points .pts-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .pts-cols > span:first-child { display: none; }
  .legal .gfx-points .pts-row { row-gap: 6px; }
  .pts-l { grid-column: 1 / -1; }
  .pts-cell { grid-template-columns: minmax(0, 1fr) 2.8rem; gap: 8px; }
}
[data-live]:empty::before { content: "—"; color: var(--dim); }
.live-item.is-thin .tile-v, .live-item.is-thin .bars-v, .live-item.is-thin b { color: var(--dim); }
.live-item.is-thin { opacity: .7; }

.gfx-series { display: grid; gap: 14px; }
.series-row { display: grid; grid-template-columns: 3rem auto minmax(0, 1fr); align-items: center; gap: 14px; }
.series-score { font: 700 var(--fs-4)/1 var(--cond); color: var(--ink); }
.series-slots { display: flex; gap: 8px; }
.slot { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid; }
.slot.is-won { color: var(--good); border-color: var(--good); background: color-mix(in srgb, var(--good) 18%, transparent); }
.slot.is-lost { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.slot-icon { width: 17px; height: 17px; }
.slot-n { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--panel); border: 1px solid var(--rule); color: var(--mute);
  font: 600 var(--fs-1)/1 var(--mono); }
.series-l { font: 600 var(--fs-2) var(--body); }
.series-row.is-taken .series-l { color: var(--good); }
.series-row.is-held .series-l { color: var(--bad); }

@media (max-width: 640px) {
  .gfx-moves { grid-template-columns: minmax(0, 1fr); }
  .legal .gfx-stats { grid-template-columns: minmax(0, 1fr); }
  .legal .gfx-stats li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .legal .gfx-bars li { grid-template-columns: minmax(0, 1fr) 3rem; row-gap: 6px; }
  .legal .gfx-bars .bars-l { grid-column: 1 / -1; }
  .gfx-bars li:first-child .bars-even::before { content: none; }
  .gfx-bars li:last-child .bars-even::after { content: "50%"; position: absolute; white-space: nowrap; top: calc(100% + 3px); left: 0;
    transform: translateX(-50%); font: 500 var(--fs-1)/1 var(--mono); color: var(--dim); }
  .legal .gfx-bars ul { padding-bottom: 16px; }
  .series-row { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: 6px; }
  .series-l { grid-column: 2; }
  .order-steps { gap: 6px; }
  .order-steps li + li::before { left: -6px; width: 6px; }
  .legal .order-steps li { padding: 22px 2px 10px; }
  .order-l { font-size: var(--fs-1); }
}
@media (max-width: 420px) {
  .gfx-win { grid-template-columns: minmax(0, 1fr); }
  .win-or { justify-self: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .fx .gfx { transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .fx .gfx:not(.is-in) { opacity: 0; transform: translateY(16px); }
  .fx .gfx-hero .hero-side, .fx .gfx-hero .hero-vs { transition: opacity .8s var(--ease), transform .9s var(--ease); }
  .fx .gfx-hero .hero-vs { transition-delay: .35s; }
  .fx .gfx-hero:not(.is-in) .hero-l { opacity: 0; transform: translateX(-48px); }
  .fx .gfx-hero:not(.is-in) .hero-r { opacity: 0; transform: translateX(48px); }
  .fx .gfx-hero:not(.is-in) .hero-vs { opacity: 0; transform: scale(.4); }
  .fx .gfx-hero.is-in .hero-l .hero-ball { animation: gfx-lunge-r .7s var(--ease) 1s 1 both; }
  .fx .gfx-hero.is-in .hero-r .hero-ball { animation: gfx-lunge-l .7s var(--ease) 1.15s 1 both; }

  .fx .win-pips .pip-x { transition: transform .35s var(--ease) calc(.35s + var(--i, 0) * .18s); }
  .fx .win-ticks i { transition: transform .35s var(--ease) calc(.2s + var(--i, 0) * 22ms); }
  .fx .gfx-win:not(.is-in) .pip-x { transform: scale(0); }
  .fx .gfx-win:not(.is-in) .win-ticks i { transform: scaleY(0); }

  .fx .duel-move, .fx .order-steps li, .fx .gfx-stats li, .fx .slot {
    transition: opacity .5s var(--ease) calc(var(--i, 0) * 90ms), transform .5s var(--ease) calc(var(--i, 0) * 90ms); }
  .fx .series-row + .series-row .slot {
    transition-delay: calc(.45s + var(--i, 0) * 90ms); }
  .fx .gfx-moves:not(.is-in) .duel-move { opacity: 0; transform: translateY(14px); }
  .fx .gfx-order:not(.is-in) .order-steps li { opacity: 0; transform: translateX(-10px); }
  .fx .gfx-order.is-in .order-steps li { animation: gfx-step .6s var(--ease) calc(.6s + var(--i, 0) * .3s) 1 both; }
  .fx .gfx-stats:not(.is-in) li { opacity: 0; transform: translateX(-12px); }
  .fx .tile { transition: opacity .5s var(--ease) calc(var(--i, 0) * 90ms), transform .5s var(--ease) calc(var(--i, 0) * 90ms); }
  .fx .gfx-tiles:not(.is-in) .tile { opacity: 0; transform: translateY(10px); }
  .fx .gfx-series:not(.is-in) .slot { opacity: 0; transform: scale(.6); }

  .fx .ends-seg, .fx .bars-fill { transition: transform 1s var(--ease) calc(.15s + var(--i, 0) * .15s); }
  .fx .gfx-ends:not(.is-in) .ends-seg, .fx .gfx-bars:not(.is-in) .bars-fill { transform: scaleX(0); }
  .fx .pts-fill { transition: transform .9s var(--ease) calc(.15s + var(--i, 0) * 80ms), width .6s var(--ease); }
  .fx .gfx-points:not(.is-in) .pts-fill { transform: scaleX(0); }
}
@keyframes gfx-lunge-r { 0%, 100% { transform: none; } 40% { transform: translateX(10px) rotate(3deg); } }
@keyframes gfx-lunge-l { 0%, 100% { transform: none; } 40% { transform: translateX(-10px) rotate(-3deg); } }
@keyframes gfx-step {
  0%, 100% { border-color: var(--rule); box-shadow: none; }
  45% { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
}

.mday {
  display: flex; align-items: center; gap: 8px;
  padding: 6px var(--gutter); min-width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 14%, var(--panel)), var(--panel) 70%);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, var(--rule));
  font-size: var(--fs-2);
}
.mday[hidden] { display: none; }
.mday-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px 14px; overflow: hidden; white-space: nowrap; }
.mday-lead { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.mday-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.mday[data-mode="end"] .mday-dot { background: var(--bad); }
@media (prefers-reduced-motion: no-preference) {
  .mday[data-mode="end"] .mday-dot { animation: war-phase-pulse 2.4s ease-in-out infinite; }
}
.mday-clock { font: 700 var(--fs-3) var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.mday-upset { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; }
.mday-upset-text { overflow: hidden; text-overflow: ellipsis; }
.mday-tag {
  flex: none; padding: 1px 8px; border-radius: 999px;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--acc-amber); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc-amber) 55%, transparent);
}
.mday-ticker { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; min-width: 0; overflow: hidden; }
.mday-ticker li { flex: none; }
.mday-war { display: inline-flex; align-items: baseline; gap: 6px; color: var(--mute); text-decoration: none; }
.mday-war:hover, .mday-upset:hover .mday-upset-text, .mday-all:hover { color: var(--gold); }
.mday-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
.mday-score { color: var(--ink); font: 700 var(--fs-2) var(--mono); font-variant-numeric: tabular-nums; }
.mday-all { flex: none; margin-left: auto; color: var(--mute); }
.mday-close {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 999px; background: none;
  color: var(--mute); font-size: var(--fs-4); line-height: 1; cursor: pointer;
}
.mday-close:hover, .mday-close:focus-visible { color: var(--ink); background: var(--pill-hover); }
@media (max-width: 719px) {
  .mday-all { display: none; }
  .mday-ticker li + li { display: none; }
  .mday-upset ~ .mday-ticker { display: none; }
  .mday-tag { padding: 1px 6px; }
}

.wrc-page { display: flex; flex-direction: column; gap: 16px; padding: 16px var(--gutter) 24px; }
.wrc-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.wrc-title { margin: 0; font: 700 var(--fs-5)/1.1 var(--cond); letter-spacing: .02em; text-transform: uppercase; }
.wrc-dates { margin: 4px 0 0; color: var(--mute); font-size: var(--fs-3); }
.wrc-week { display: inline-flex; align-items: center; gap: 8px; color: var(--mute); font-size: var(--fs-2); }
.wrc-week-select {
  background: var(--row); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 6px 10px; font: var(--fs-3) var(--body);
}
.wrc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .wrc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wrc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wrc-card {
  --tone: var(--gold);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 10%, var(--panel)), var(--panel) 62%);
  border: 1px solid var(--rule); box-shadow: var(--shadow-card);
}
.wrc-card.is-stomp { --tone: var(--bad); }
.wrc-card.is-comeback { --tone: var(--acc-amber); }
.wrc-card.is-wall { --tone: var(--acc-violet); }
.wrc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wrc-label {
  margin: 0; font: 700 var(--fs-3) var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tone) 80%, var(--ink));
}
.wrc-head { margin: 0; font: 600 var(--fs-4)/1.25 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.wrc-sides { display: flex; flex-direction: column; gap: 4px; }
.wrc-side { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--mute); }
.wrc-side.is-won { color: var(--ink); }
.wrc-side-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrc-side-score { font: 700 var(--fs-4) var(--mono); font-variant-numeric: tabular-nums; }
.wrc-side:not(.is-won) .wrc-side-score { color: var(--mute); }
.wrc-dot { width: 14px; height: 14px; justify-self: center; }
.wrc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wrc-sub { color: var(--mute); font-size: var(--fs-2); }
.wrc-open { font-size: var(--fs-2); }
.wrc-hero { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wrc-ball {
  flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--row); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone, var(--gold)) 55%, transparent);
}
.wrc-ball img { width: 88%; height: 88%; object-fit: contain; }
.wrc-ball.is-small { width: 32px; height: 32px; box-shadow: 0 0 0 1px var(--rule); }
.wrc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wrc-player { font: 700 var(--fs-4) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrc-ally { color: var(--mute); font-size: var(--fs-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrc-stat { font: 700 var(--fs-4)/1.2 var(--cond); letter-spacing: .02em; color: color-mix(in srgb, var(--tone) 75%, var(--ink)); }
.wrc-runners { margin: 0; padding: 8px 0 0; border-top: 1px solid var(--rule); list-style: none; counter-reset: run 1;
  display: flex; flex-direction: column; gap: 6px; }
.wrc-runners li { display: grid; grid-template-columns: 20px 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; counter-increment: run; }
.wrc-runners li::before { content: counter(run); color: var(--dim); font: 700 var(--fs-2) var(--mono); }
.wrc-runners .wrc-player { font-size: var(--fs-3); font-weight: 600; }
.wrc-runner-stat { color: var(--mute); font-size: var(--fs-2); white-space: nowrap; }
.wrc-more { margin: 0; }
.wrc-locked { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wrc-locked .wrc-runners { align-self: stretch; }
.wrc-locked-name { width: auto; max-width: 60%; }

.whf-page { display: flex; flex-direction: column; gap: 22px; padding: 16px var(--gutter) 28px; min-width: 0; }
.whf-hero {
  position: relative; display: flex; align-items: center; gap: 18px; min-width: 0; overflow: hidden;
  padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--medal-gold) 35%, transparent);
  background:
    radial-gradient(90% 140% at 0% 50%, color-mix(in srgb, var(--medal-gold) 22%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--medal-gold) 8%, var(--panel)), var(--panel) 70%);
  box-shadow: var(--shadow-card);
}
.whf-trophy { flex: none; width: 112px; height: 112px; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--medal-gold) 45%, transparent)); }
.whf-trophy svg, .whf-cat-icon svg { display: block; width: 100%; height: 100%; }
.whf-hero-titles { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.whf-kicker { margin: 0; font: 700 var(--fs-2) var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--medal-gold); }
.whf-title { margin: 0; font: 700 var(--fs-5)/.95 var(--cond); font-size: clamp(34px, 7vw, 52px); letter-spacing: .01em; text-transform: uppercase; }
@media (max-width: 520px) {
  .whf-hero { gap: 12px; padding: 14px; }
  .whf-trophy { width: 84px; height: 84px; }
}

.whf-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font: 600 var(--fs-1)/1.4 var(--body); color: var(--mute); background: var(--hairline-2); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.whf-pill.is-link { color: var(--ink); background: var(--lift); text-decoration: none; }
.whf-pill.is-link:hover, .whf-pill.is-link:focus-visible { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.whf-pill.is-tone { color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); font-weight: 700; }
.whf-pill.is-new { color: var(--medal-gold); background: color-mix(in srgb, var(--medal-gold) 16%, transparent);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.whf-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.whf-jump-pill {
  --tone: var(--gold); cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  background: color-mix(in srgb, var(--tone) 10%, var(--panel)); color: var(--ink); font: 700 var(--fs-2) var(--cond);
  letter-spacing: .06em; text-transform: uppercase;
}
.whf-jump-pill:hover, .whf-jump-pill:focus-visible { background: color-mix(in srgb, var(--tone) 22%, var(--panel)); }
.whf-jump-pill.is-holds, .whf-cat.is-holds { --tone: var(--acc-violet); }
.whf-jump-pill.is-records, .whf-cat.is-records { --tone: var(--good); }
.whf-jump-pill.is-weeks, .whf-cat.is-weeks { --tone: var(--medal-gold); }

.whf-cat { display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: calc(var(--sticky-top) + 12px); }
.whf-cat-head { display: flex; align-items: center; gap: 12px; }
.whf-cat-icon {
  flex: none; width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: var(--r);
  color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 35%, transparent);
}
.whf-cat-title { margin: 0; font: 700 var(--fs-4)/1.1 var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.whf-cat-title { font-size: clamp(18px, 2.4vw, 22px); }

.whf-medal {
  --medal: var(--rule); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 45%, var(--medal)), var(--medal) 60%);
  color: rgba(0,0,0,.7); font: 700 var(--fs-3)/1 var(--cond);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--medal) 30%, transparent), 0 2px 6px rgba(0,0,0,.35);
}
.whf-medal.is-gold, .whf-pod.is-gold { --medal: var(--medal-gold); }
.whf-medal.is-silver, .whf-pod.is-silver { --medal: var(--medal-silver); }
.whf-medal.is-bronze, .whf-pod.is-bronze { --medal: var(--medal-bronze); }

.whf-ball {
  display: grid; place-items: center; flex: none; border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 35%, var(--lift), var(--row)); box-shadow: inset 0 0 0 1px var(--hairline-2);
}
.whf-ball .thumb { width: 86%; height: 86%; object-fit: contain; background: transparent; border: 0; }
.whf-ball.is-pod { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--medal) 60%, transparent), var(--shadow-card); }
.whf-pod.is-gold .whf-ball.is-pod { width: 132px; height: 132px; }
.whf-ball.is-row { width: 44px; height: 44px; border-radius: var(--r); }
.whf-ball.is-champ { width: 48px; height: 48px; border-radius: var(--r); }
.whf-ball.is-missing::after { content: attr(data-initial); color: var(--mute); font: 700 var(--fs-4)/1 var(--cond); }
.whf-ball.is-missing > .thumb { display: none; }
.whf-ball.is-pod.is-missing::after { font-size: clamp(32px, 8vw, 44px); }

.whf-crest { flex: none; }
.whf-dot {
  --size: 34px; --dot: var(--mute); display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;
  background: color-mix(in srgb, var(--dot) 30%, var(--panel)); box-shadow: inset 0 0 0 2px var(--dot);
  color: var(--ink); font: 700 calc(var(--size) * .42)/1 var(--cond);
}

.whf-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.whf-pod { min-width: 0; --medal: var(--rule); }
.whf-pod.is-gold { grid-column: 1 / -1; order: -1; }
@media (min-width: 720px) {
  .whf-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; }
  .whf-pod.is-gold { grid-column: auto; order: 0; }
  .whf-pod.is-gold .whf-pod-card { padding-top: 26px; padding-bottom: 22px; }
  .whf-podium[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; width: 100%; margin-inline: auto; }
  .whf-podium[data-n="2"] .whf-pod.is-gold { order: -1; }
}
.whf-podium[data-n="1"] { grid-template-columns: minmax(0, 1fr); max-width: 420px; width: 100%; margin-inline: auto; }
.whf-pod-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 16px 12px 14px;
  border-radius: var(--r-lg); text-align: center;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--medal) 26%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--medal) 10%, var(--panel)), var(--panel) 70%);
  border: 1px solid color-mix(in srgb, var(--medal) 50%, transparent); box-shadow: var(--shadow-card);
}
.whf-pod-art { position: relative; margin-bottom: 4px; }
.whf-pod-art .whf-medal { position: absolute; right: -4px; bottom: -4px; }
.whf-pod.is-gold .whf-pod-art .whf-medal { width: 38px; height: 38px; font-size: var(--fs-4); right: 0; bottom: 0; }
.whf-pod-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink);
  font: 700 var(--fs-4)/1.15 var(--cond); }
.whf-pod.is-gold .whf-pod-name { font-size: clamp(18px, 5vw, 24px); }
.whf-pod-ally { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); font-size: var(--fs-2); }
a.whf-pod-ally:hover { color: var(--ink); }

.whf-fig { display: inline-flex; align-items: baseline; gap: 5px; flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.whf-fig b { font-size: var(--fs-3); }
.whf-fig small { color: var(--dim); font: var(--fs-1) var(--body); }
.whf-fig.is-hero { color: color-mix(in srgb, var(--medal) 70%, var(--ink)); }
.whf-fig.is-hero b { font-size: clamp(22px, 5vw, 28px); line-height: 1; }
.whf-pod.is-gold .whf-fig.is-hero b { font-size: clamp(30px, 8vw, 40px); }
@media (max-width: 520px) {
  .whf-ball.is-pod { width: 76px; height: 76px; }
  .whf-pod.is-gold .whf-ball.is-pod { width: 112px; height: 112px; }
  .whf-pod-name { font-size: var(--fs-3); }
}

.whf-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
@media (min-width: 900px) { .whf-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } }
.whf-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.whf-row { padding: 8px 12px 8px 10px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
  border: 1px solid transparent; }
.whf-row:hover { border-color: var(--rule); }
.whf-rank { width: 22px; flex: none; text-align: center; color: var(--dim); font: 700 var(--fs-4) var(--cond); }
.whf-row-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1 1 auto; }
.whf-row-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: 600 var(--fs-3) var(--body); }
.whf-row-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); font-size: var(--fs-2); }
.whf-row-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; max-width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .whf-pod, .whf-row, .whf-week { animation: rise 340ms var(--ease, ease) both; }
  .whf-pod.is-gold { animation-delay: 60ms; }
  .whf-pod.is-bronze { animation-delay: 120ms; }
}

.whf-weeks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .whf-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .whf-weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.whf-week {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px 14px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 8%, var(--panel)), var(--panel) 60%);
  border: 1px solid var(--rule); box-shadow: var(--shadow-card);
}
.whf-week.is-latest { border-color: color-mix(in srgb, var(--medal-gold) 50%, transparent); }
.whf-week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.whf-week-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink);
  font: 700 var(--fs-3) var(--cond); letter-spacing: .08em; text-transform: uppercase; }
a.whf-week-title:hover { color: var(--gold); }
.whf-champ {
  --tone: var(--gold); display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px 6px 6px;
  border-radius: var(--r); background: var(--row);
}
.whf-champ.is-wall { --tone: var(--acc-violet); }
.whf-champ-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.whf-champ-label { color: var(--tone); font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.whf-champ-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: 600 var(--fs-3) var(--body); }

.whf-jump-pill.is-career, .whf-cat.is-career { --tone: var(--acc-amber); }
.whf-career { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .whf-career { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.whf-board {
  --tone: var(--bad); display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 14px 12px;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); box-shadow: var(--shadow-card);
  background:
    radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--tone) 7%, var(--panel)), var(--panel) 60%);
}
.whf-board.is-defenders { --tone: var(--acc-violet); }
.whf-board-title { margin: 0; color: var(--tone); font: 700 var(--fs-4)/1.1 var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.whf-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.whf-crow { --medal: var(--rule); display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px 6px 6px;
  border-radius: var(--r); background: var(--row); }
.whf-crow.is-gold { --medal: var(--medal-gold); background: color-mix(in srgb, var(--medal-gold) 12%, var(--row)); }
.whf-crow.is-silver { --medal: var(--medal-silver); }
.whf-crow.is-bronze { --medal: var(--medal-bronze); }
.whf-crow > .whf-medal { width: 26px; height: 26px; font-size: var(--fs-2); }
.whf-crow > .whf-rank { width: 26px; }
.whf-crow .whf-ball.is-row { width: 40px; height: 40px; }
.whf-crow.is-gold .whf-ball.is-row { box-shadow: 0 0 0 2px color-mix(in srgb, var(--medal-gold) 60%, transparent); }
a.whf-row-sub:hover { color: var(--ink); }
.whf-crow .whf-fig b { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .whf-board { animation: rise 340ms var(--ease, ease) both; }
}

.whf-board.is-streaks { --tone: var(--good); }
.whf-board.is-scores { --tone: var(--acc-amber); }
.whf-board.is-closest { --tone: var(--acc-violet); }
@media (min-width: 1100px) { .whf-career.is-records { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.whf-crow.is-gold > .whf-crest { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--medal-gold) 55%, transparent)); }
.whf-crow .whf-row-line .whf-pill { padding: 1px 8px; }
@media (max-width: 520px) {
  .is-records .whf-crow > .whf-fig { flex-direction: column; align-items: flex-end; gap: 0; }
  .is-records .whf-crow .whf-row-sub { white-space: normal; }
}
.whf-board.is-wins { --tone: var(--medal-gold); }
.whf-board.is-combined { --tone: var(--bad); }
.whf-board.is-defeats { --tone: var(--acc-amber); }
.whf-board.is-zones { --tone: var(--good); }
.whf-board.is-best_war { --tone: var(--acc-amber); }
.whf-jump-pill.is-players, .whf-cat.is-players { --tone: var(--bad); }
.whf-jump-pill { min-height: 32px; }
@media (min-width: 1100px) { .whf-career:not(.is-records):not(.is-players) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.whf-board-empty { margin: 0; padding: 10px; border-radius: var(--r); background: var(--row); color: var(--mute);
  font: 600 var(--fs-3) var(--body); text-align: center; }
@media (max-width: 520px) {
  .is-players .whf-crow > .whf-fig { flex-direction: column; align-items: flex-end; gap: 0; }
}
.pr-page { min-width: 0; }
.pr-head { padding: 14px var(--gutter) 6px; }
.pr-kicker { margin: 0; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pr-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.pr-title { margin: 2px 0 0; font: 700 var(--fs-5) var(--cond); letter-spacing: .02em; text-transform: uppercase; }
.pr-title-row .pr-share { padding: 6px 12px; color: var(--ink); }
.pr-scope { margin: 4px 0 0; color: var(--mute); font-size: var(--fs-2); }
.pr-controls { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px var(--gutter) 10px; }
.pr-grid { margin-bottom: 6px; }
.pr-movers .chg-col-title.pr-up { color: var(--good); }
.pr-movers .chg-col-title.pr-down { color: var(--bad); }
.pr-mover-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pr-mover-link { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 4px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; }
.pr-mover-link:hover, .pr-mover-link:focus-visible { background: var(--row); }
.pr-mover-link .thumb { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.pr-mover-link > .chips { flex: none; }
.pr-mover-body { display: grid; min-width: 0; flex: 1 1 auto; }
.pr-mover-name { font: 700 var(--fs-4) var(--cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-mover-sub { color: var(--dim); font: var(--fs-1) var(--mono); white-space: nowrap; }
.pr-mover-fig { display: grid; justify-items: end; flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pr-mover-fig .chg-delta { font-size: var(--fs-4); }
.pr-mover-unit { color: var(--dim); font: var(--fs-1) var(--body); }
.pr-move { font: 600 var(--fs-1) var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--dim); }
.pr-move.is-up { color: var(--good); }
.pr-move.is-down { color: var(--bad); }
.pr-move.is-new { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.pr-move-cell { width: 52px; }
.pr-change-cell { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-change { color: var(--mute); }
.pr-change.is-up { color: var(--good); font-weight: 600; }
.pr-change.is-down { color: var(--bad); font-weight: 600; }
.pr-typing-name { margin-left: 6px; }
.pr-page > .section-title { padding-inline: var(--gutter); }
@media (max-width: 359px) { .title-row .pr-share, .pr-title-row .pr-share { padding: 7px 9px; } }
@media (prefers-reduced-motion: no-preference) {
  .pr-mover { animation: rise 320ms var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
}
.tc-wrap { padding-bottom: 8px; }
.tc { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 12px var(--gutter) 4px; }
.tc-card { --tc-tint: var(--gold); position: relative; display: grid; gap: 4px; justify-items: center; padding: 8px 8px 14px;
  border-radius: var(--r-lg); color: #F4F7FA;
  background: linear-gradient(180deg, #1B2130, #0E1118) padding-box,
              linear-gradient(135deg, #F3D27A, var(--tc-tint) 50%, #9C7A2E) border-box;
  border: 6px solid transparent; box-shadow: var(--shadow-2); overflow: hidden; isolation: isolate; }
.tc-art { position: relative; width: 100%; height: 190px; display: grid; place-items: center; border-radius: var(--r-lg); overflow: hidden; }
.tc-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.tc-avatar { position: relative; width: 150px; height: 150px; object-fit: contain; border-radius: 50%;
  background: #141821; border: 4px solid var(--tc-tint); }
.tc-level { position: absolute; top: 8px; right: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(11,13,18,.78);
  color: #F3D27A; font: 700 var(--fs-2) var(--cond); letter-spacing: .06em; }
.tc-name { margin: 6px 0 0; font: 700 var(--fs-5)/1.1 var(--cond); text-align: center; overflow-wrap: anywhere; color: #F4F7FA; }
.tc-alliance { margin: 0; font: var(--fs-2) var(--body); color: #9AA4B4; }
.tc-tier { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin-top: 8px; padding: 8px 12px;
  border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.tc-tier .thumb { width: 40px; height: 40px; background: none; border: 0; }
.tc-tier-words { display: grid; line-height: 1.15; }
.tc-tier-words b { font: 700 var(--fs-4) var(--cond); color: #F4F7FA; }
.tc-tier-words small { font: var(--fs-1) var(--body); color: #9AA4B4; }
.tc-tier .is-muted { color: #79839A; }
.tc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.tc-stat { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.tc-label { font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.tc-big-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tc-big { font: 700 var(--fs-5)/1.05 var(--cond); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tc-ball { width: 44px; height: 44px; object-fit: contain; flex: none; }
.tc-ball + .tc-big { font-size: var(--fs-4); }
.tc-sub { font: var(--fs-2) var(--body); color: var(--mute); }
.tc-stat.is-muted .tc-big { color: var(--dim); font-size: var(--fs-4); }
.tc-badges { grid-column: 1 / -1; }
.tc-badge-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--row); border: 1px solid var(--rule); font: 600 var(--fs-2) var(--body); color: var(--ink); max-width: 100%; }
.tc-badge .thumb { width: 26px; height: 26px; border-radius: 50%; }
.tc-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-stats > .tc-share { grid-column: 1 / -1; justify-self: start; padding: 8px 16px; color: var(--ink); border-color: var(--gold); }
.tc-moments { padding: 4px var(--gutter) 0; }
.tc-moments-title { margin: 14px 0 8px; font: 700 var(--fs-2) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.tc-moment-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tc-moment { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.tc-moment.is-new { box-shadow: var(--shadow-card), inset 0 0 0 1px color-mix(in srgb, var(--medal-gold) 55%, transparent); }
.tc-moment .thumb { width: 40px; height: 40px; border-radius: 50%; }
.tc-glyph { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--row); color: var(--medal-gold); font: 700 var(--fs-2) var(--cond); }
.tc-moment-words { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.tc-moment-words b { font: 700 var(--fs-3) var(--cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-moment-kind { font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.tc-moment.is-new .tc-moment-kind { color: var(--medal-gold); }
.tc-moment-when { font: var(--fs-1) var(--body); color: var(--dim); }
@media (prefers-reduced-motion: no-preference) {
  .tc-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
    transform: translateX(-100%); transition: transform .9s ease; }
  .tc-card:hover::after { transform: translateX(100%); }
}
@media (max-width: 640px) {
  .tc { grid-template-columns: minmax(0, 1fr); }
  .tc-card { max-width: 300px; justify-self: center; width: 100%; }
  .tc-big { font-size: var(--fs-4); }
  .tc-moment-row { grid-template-columns: minmax(0, 1fr); }
}
.tc-rival-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-rival { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--panel);
  box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; font: 600 var(--fs-2) var(--body); }
.tc-rival span { font-family: var(--mono); color: var(--mute); }
.tc-rival span.is-thin { color: var(--dim); }
.tc-rival:hover, .tc-rival:focus-visible { color: var(--gold); }
.tc-rival-row .tc-rival { max-width: 100%; }
.tc-rival-row .tc-rival b { overflow-wrap: anywhere; }
.tc-rivals p.tc-rival { display: block; max-width: 100%; border-radius: var(--r-lg); line-height: 1.6; }

.tc-head { position: relative; }
.tc-edit { position: absolute; right: var(--gutter); bottom: -4px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--gold); background: transparent; color: var(--ink); cursor: pointer;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.tc-edit:hover, .tc-edit:focus-visible { color: var(--gold); }
.tc-verified { font: 600 var(--fs-1) var(--body); color: #4FC98A; }
.tc-tier-one { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tc-tier.is-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px 8px; }
.tc-tier.is-pair .tc-tier-one { gap: 6px; }
.tc-tier.is-pair .thumb { width: 28px; height: 28px; }
.tc-tier.is-pair .tc-tier-words b { font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sheet { width: min(720px, calc(100vw - 20px)); }
.card-sheet-body { padding-top: 16px; }
.ce-title { margin: 0; padding-right: 44px; font: 700 var(--fs-4) var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.ce-form { display: grid; gap: 12px; }
.ce-field { display: grid; gap: 6px; }
.ce-label { font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ce-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-seg-btn { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--row);
  color: var(--ink); cursor: pointer; font: 600 var(--fs-2) var(--body); }
.ce-seg-btn.is-on { border-color: var(--gold); color: var(--gold); }
.ce-badges, .ce-toggles { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ce-badges { max-height: 168px; overflow: auto; overscroll-behavior: contain; }
.ce-check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: var(--fs-2) var(--body); color: var(--ink); }
.ce-check input { accent-color: var(--gold); width: 18px; height: 18px; }
.ce-check:has(input:disabled) { color: var(--dim); }
.ce-fun { display: grid; gap: 6px; }
.ce-select { min-height: 38px; padding: 6px 10px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--row);
  color: var(--ink); font: var(--fs-2) var(--body); max-width: 100%; }
.ce-status { margin: 0; font: var(--fs-2) var(--body); color: var(--mute); }
.ce-preview { position: sticky; top: 0; z-index: 1; gap: 14px; grid-template-columns: 220px minmax(0, 1fr);
  padding: 8px 0; background: var(--panel); zoom: .78; }
@media (max-width: 640px) {
  .ce-preview { zoom: .46; grid-template-columns: 240px minmax(0, 1fr); }
  .ce-preview .tc-card { max-width: none; }
}

.tc.tc-compact { grid-template-columns: minmax(0, 380px); justify-content: start; gap: 10px; }
.tc-compact > .tc-share { justify-self: start; padding: 8px 16px; color: var(--ink); border-color: var(--gold); }
.tcx { display: grid; gap: 8px; justify-items: stretch; padding: 6px 6px 10px; border-width: 4px; max-width: none; }
.tcx-head { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 84px; padding: 10px 12px; border-radius: var(--r); overflow: hidden; }
.tcx-banner { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.tcx-head::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(14,17,24,.92) 20%, rgba(14,17,24,.55) 70%, rgba(14,17,24,.25)); }
.tcx-avatar, .tcx-who, .tcx-level { z-index: 2; }
.tcx-avatar { position: relative; width: 64px; height: 64px; object-fit: contain; border-radius: 50%;
  background: #141821; border: 3px solid var(--tc-tint); }
.tcx-who { position: relative; display: grid; gap: 1px; min-width: 0; padding-right: 48px; }
.tcx-name { margin: 0; text-align: left; font-size: var(--fs-5); line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx-who .tc-alliance, .tcx-who .tc-verified { text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.tcx-alliance { color: #C9D1DC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx-level { top: 8px; right: 8px; padding: 2px 8px; font-size: var(--fs-1); }
.tcx-tier { display: flex; align-items: center; gap: 8px; margin: 0 6px; padding: 6px 10px; border-radius: var(--r);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.tcx-tier.is-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcx-tier-one { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tcx-tier .thumb { width: 30px; height: 30px; background: none; border: 0; flex: none; }
.tcx-tier .tc-tier-words b { font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx-tier .is-muted { color: #79839A; }
.tcx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 6px; }
.tcx-extras { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; margin: 0 6px; }
.tcx-stat { display: grid; gap: 1px; padding: 6px 10px; border-radius: var(--r); min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.tcx-label { font: 700 var(--fs-1)/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: #9AA4B4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx-big-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tcx-big { font: 700 var(--fs-4)/1.1 var(--cond); color: #F4F7FA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tcx-ball { width: 28px; height: 28px; object-fit: contain; flex: none; }
.tcx-ball + .tcx-big { font-size: var(--fs-3); }
.tcx-sub { font: var(--fs-1) var(--body); color: #9AA4B4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx-stat.is-muted .tcx-big { color: #79839A; font-size: var(--fs-3); }
.tcx-extras .tcx-big { font-size: var(--fs-3); }
.tcx-badges { margin: 0 6px; }
.tcx-glyph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--medal-gold); font: 700 var(--fs-2) var(--cond); }
.tcx-badges.is-chips { display: grid; gap: 4px; }
.tcx-chip { justify-self: start; padding: 3px 10px 3px 3px; font-size: var(--fs-1); background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1); color: #F4F7FA; }
.tcx-chip .thumb, .tcx-chip .tcx-glyph { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.tcx-badges.is-row { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 3px; }
.tcx-cell { display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; padding: 4px 1px; border-radius: var(--r);
  background: rgba(255,255,255,.04); }
.tcx-cell .thumb, .tcx-cell .tcx-glyph { width: min(36px, 100%); height: auto; aspect-ratio: 1; border-radius: 50%; }
.tcx-cell-name { max-width: 100%; font: 600 var(--fs-1)/1.15 var(--body); color: #C9D1DC; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; letter-spacing: -.01em; }
.tcx-badges.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.tcx-g { display: flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 8px 0 3px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.tcx-g .thumb, .tcx-g .tcx-glyph { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.tcx-g-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--fs-1)/1 var(--body); color: #F4F7FA; }
.tcx-badges.is-icons { display: flex; gap: 6px; align-items: center; }
.tcx-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.tcx-dot .thumb { width: 100%; height: 100%; border-radius: 50%; }
.tcx-more { color: #F4F7FA; font: 700 var(--fs-1) var(--cond); }

.pe-sheet { width: min(860px, calc(100vw - 20px)); }
.pe-body { gap: 10px; }
.pe-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--row); border: 1px solid var(--rule); justify-self: start; }
.pe-tab { min-height: 32px; padding: 4px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--mute); cursor: pointer;
  font: 700 var(--fs-2) var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.pe-tab.is-on { background: var(--panel); color: var(--gold); box-shadow: var(--shadow-card); }
.pe-panel[hidden] { display: none; }
.pe-panel, .pe-group { min-width: 0; }
.pe-profile { grid-template-columns: minmax(0, 1fr); }
.pe-body > .share-sheet-actions { position: sticky; bottom: 0; z-index: 3; margin: 0 calc(-1 * var(--gutter)) -16px;
  padding: 8px var(--gutter) 12px; background: var(--panel); border-top: 1px solid var(--rule); }
.pe-body > .share-sheet-actions .share-sheet-btn { grid-column: auto; min-height: 40px; }
.pe-card { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.pe-card .ce-preview { position: sticky; top: 0; zoom: 1; padding: 0; background: none; grid-template-columns: minmax(0, 1fr); }
.pe-form, .pe-profile { display: grid; gap: 6px; align-content: start; }
.pe-group { border-radius: var(--r); background: var(--row); border: 1px solid var(--rule); }
.pe-group > :not(summary) { margin: 0 12px 10px; }
.pe-summary { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 6px 12px; cursor: pointer; list-style: none;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pe-summary::-webkit-details-marker { display: none; }
.pe-summary::after { content: "▾"; font-size: var(--fs-2); transition: transform .15s; }
.pe-group:not([open]) > .pe-summary::after { transform: rotate(-90deg); }
.pe-group[open] > .pe-summary { color: var(--ink); }
.pe-group .ce-field { margin-bottom: 8px; }
.pe-group .ce-badges { display: grid; gap: 0; max-height: 200px; }
.pe-group .ce-check { min-height: 30px; }
.pe-pins { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 260px; overflow: auto; overscroll-behavior: contain; }
.pe-pin { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 4px; border-radius: var(--r); }
.pe-pin.is-chosen { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.pe-pin input { accent-color: var(--gold); width: 18px; height: 18px; flex: none; }
.pe-pin .thumb { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.pe-pin-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fs-2) var(--body); }
.pe-move { width: 28px; height: 28px; flex: none; border-radius: var(--r); border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.pe-move:disabled { opacity: .35; cursor: default; }
.pe-empty { margin: 0; font: var(--fs-2) var(--body); color: var(--dim); }
.pe-bg-preview { aspect-ratio: 3 / 1; min-height: 88px; border-radius: var(--r); overflow: hidden; background: var(--panel);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pe-bg-preview[hidden] { display: none; }
.pe-bg-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; pointer-events: none; }
.pe-bg-preview.is-dragging { cursor: grabbing; }
.pe-bg-preview:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pe-bg-pos { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pe-bg-pos[hidden] { display: none; }
.pe-bg-reset { min-height: 32px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--panel);
  color: var(--ink); font: 600 var(--fs-1) var(--body); cursor: pointer; }
.pe-bg-reset:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .pe-bg-preview:not(.is-dragging) img { transition: object-position .15s ease-out; }
}
.pe-bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; max-height: 176px; overflow: auto; overscroll-behavior: contain; }
.pe-bg-option { display: grid; place-items: center; aspect-ratio: 1; padding: 2px; border-radius: var(--r); border: 1px solid var(--rule);
  background: var(--panel); cursor: pointer; color: var(--mute); font: 600 var(--fs-1)/1.1 var(--body); }
.pe-bg-option .thumb { width: 100%; height: 100%; object-fit: contain; }
.pe-bg-option.is-chosen { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pe-bg-option.is-default { grid-column: span 2; aspect-ratio: auto; }
@media (max-width: 699px) {
  .pe-card { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pe-card .ce-preview { zoom: .62; z-index: 2; padding: 4px 0; background: var(--panel); justify-content: center; }
  .pe-summary { min-height: 34px; }
  .pe-group .ce-seg-btn { min-height: 32px; padding: 4px 10px; }
}

.rv-title { margin: 0; padding: 18px var(--gutter) 4px; font: 700 var(--fs-5)/1.1 var(--cond); overflow-wrap: anywhere; }
.rv-band { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  margin: 10px var(--gutter) 4px; padding: 18px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
  background-image: radial-gradient(circle at 0 0, color-mix(in srgb, #3FA7D6 22%, transparent), transparent 60%),
                    radial-gradient(circle at 100% 0, color-mix(in srgb, #D2644F 22%, transparent), transparent 60%); }
.rv-side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-side.is-b { flex-direction: row-reverse; text-align: right; }
.rv-wins { font-family: var(--cond); font-weight: 700; line-height: 1; font-size: clamp(40px, 9vw, 56px); color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-dash { font: 600 var(--fs-5) var(--cond); color: var(--dim); }
.rv-name { min-width: 0; color: var(--ink); text-decoration: none; font: 700 var(--fs-4) var(--cond); overflow-wrap: anywhere; }
.rv-name .alliance-name { font: 700 var(--fs-4) var(--cond); }
.rv-name:hover, .rv-name:focus-visible { color: var(--gold); }
.rv-extra { grid-column: 1 / -1; margin: 0; text-align: center; font: var(--fs-2) var(--body); color: var(--mute); }
.rv-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px var(--gutter); }
.rv-live { padding: 2px 10px; border-radius: 999px; background: rgba(225,72,72,.16); border: 1px solid rgba(235,90,90,.7);
  color: #FFD9D9; font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.rv-list { list-style: none; margin: 8px var(--gutter) 18px; padding: 0; display: grid; gap: 6px; }
.rv-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-card); font: var(--fs-2) var(--body); }
.rv-row.is-a .rv-who { color: #3FA7D6; }
.rv-row.is-b .rv-who { color: #D2644F; }
.rv-when { color: var(--mute); font-family: var(--mono); font-size: var(--fs-1); }
.rv-score { display: inline-flex; gap: 6px; color: var(--ink); text-decoration: none; font-family: var(--mono); }
.rv-score b { font-weight: 500; color: var(--mute); }
.rv-score b.is-win { color: var(--ink); font-weight: 700; }
.rv-who { text-align: right; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-rivalry-line { margin: 4px var(--gutter) 8px; font: var(--fs-2) var(--body); }
.war-rivalry-line a { color: var(--gold); }
@media (max-width: 640px) {
  .rv-band { padding: 14px 12px; gap: 8px; }
  .rv-side { flex-direction: column; text-align: center; }
  .rv-side.is-b { flex-direction: column; text-align: center; }
  .rv-row { grid-template-columns: 86px minmax(0, 1fr); }
  .rv-who { grid-column: 1 / -1; text-align: left; }
}

.pr-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pr-week { font: 700 var(--fs-2) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pr-signin { margin: 6px var(--gutter); }
.pr-signin a { color: var(--gold); font-weight: 600; }
.pr-wars { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 10px var(--gutter) 6px; }
.pr-war { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.pr-war-top { display: flex; align-items: center; gap: 10px; }
.pr-war-top .pr-war-link:first-of-type { margin-left: auto; }
.pr-war-link { font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
.pr-war-link:hover, .pr-war-link:focus-visible { color: var(--gold); }
.pr-status { padding: 2px 10px; border-radius: 999px; font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--mute); }
.pr-status.is-open { color: var(--gold); border-color: var(--gold); background: var(--pill-on); }
.pr-status.is-final { color: var(--ink); }
.pr-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.pr-vs { align-self: center; font: 700 var(--fs-2) var(--cond); color: var(--dim); text-transform: uppercase; }
.pr-pick { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px; min-width: 0;
  border-radius: var(--r); border: 1px solid var(--rule); background: var(--row); color: var(--ink); cursor: pointer; font: inherit; text-align: center; }
.pr-pick:disabled { cursor: default; }
.pr-war.is-open .pr-pick:not(:disabled):hover, .pr-pick:focus-visible { border-color: var(--gold); }
.pr-pick.is-picked { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: var(--pill-on); }
.pr-pick.is-winner { border-color: var(--medal-gold); }
.pr-pick.is-working { opacity: .7; cursor: progress; }
.pr-pick-words { display: grid; min-width: 0; line-height: 1.2; }
.pr-pick-words b { font: 700 var(--fs-3) var(--cond); overflow-wrap: anywhere; }
.pr-pick-words small { font: var(--fs-1) var(--body); color: var(--mute); }
.pr-score { font: 700 var(--fs-4) var(--mono); }
.pr-mark { font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.pr-pick.is-winner .pr-mark { color: var(--medal-gold); }
.pr-record { padding-bottom: 6px; }
.pr-badge { margin: 0 var(--gutter); }
.pr-board .wrap { padding: 8px var(--gutter) 18px; overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; font: var(--fs-2) var(--body); }
.pr-table th { font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 6px 8px; text-align: right; }
.pr-table th.left, .pr-table td.left { text-align: left; }
.pr-table td { padding: 8px; border-top: 1px solid var(--rule); text-align: right; font-variant-numeric: tabular-nums; }
.pr-table a { color: var(--ink); }
@media (max-width: 640px) {
  .pr-wars { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .pr-pick { transition: border-color .15s ease, background-color .15s ease; }
}

.pvp-era-toggle {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 28px;
  padding: 2px 10px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 700 var(--fs-1)/1.6 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); background: transparent; box-shadow: inset 0 0 0 1px var(--rule);
}
.pvp-era-toggle[aria-pressed="true"] {
  color: #C8933C; background: color-mix(in srgb, #C8933C 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #C8933C 40%, transparent);
}
.pvp-era-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pg-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 var(--gutter); }
.pg-retry .empty { margin: 0; padding: 16px 0 12px; }
.pg-retry-btn {
  min-height: 32px; padding: 4px 14px; border-radius: 999px; cursor: pointer;
  font: 600 var(--fs-2) var(--body); color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); box-shadow: var(--shadow-card);
}
.pg-retry-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.pv2-card {
  margin: 12px var(--gutter) 0; padding: 14px 16px; display: grid; gap: 12px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
}
.pv2-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv2-card-head h3, .tcov-head h2, .pv2-sub {
  margin: 0; font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.pv2-bar { display: block; height: 5px; border-radius: 999px; background: var(--hairline-2); overflow: hidden; }
.pv2-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.is-good .pv2-bar > i { background: var(--good); }
.is-bad .pv2-bar > i { background: var(--bad); }
.is-good > b, b.is-good, .wr.is-good { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.is-bad > b, b.is-bad, .wr.is-bad { color: color-mix(in srgb, var(--bad) 80%, var(--ink)); }

.pv2-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 14px; }
.pv2-pill {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; min-width: 0;
  border-radius: 999px; background: var(--pill-on); font-size: var(--fs-2); color: var(--mute);
}
.pv2-pill b { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.pv2-pill i { font-style: normal; font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); }
.pv2-pill.is-amber b { color: var(--acc-amber); }
.pv2-pill.is-violet b { color: color-mix(in srgb, var(--acc-violet) 70%, var(--ink)); }
.pv2-pill.is-good b { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.pv2-pill.is-bad b { color: color-mix(in srgb, var(--bad) 80%, var(--ink)); }
@media (max-width: 640px) { .pv2-pill i { display: none; } }

.pv2-switch { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--row); border: 1px solid var(--rule); }
.pv2-switch-btn {
  border: 0; background: none; color: var(--mute); font: 600 var(--fs-2) var(--sans, inherit);
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
}
.pv2-switch-btn[aria-pressed="true"] { background: var(--pill-on); color: var(--ink); }
.pv2-more {
  border: 1px dashed var(--rule); background: none; color: var(--gold); cursor: pointer;
  font: var(--fs-2) var(--mono); padding: 6px 12px; border-radius: 999px; flex-shrink: 0; align-self: center;
}

.pv2-balls {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 2px var(--gutter) 12px;
}
.pv2-ball {
  position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 10px 6px 9px;
  border-radius: var(--r); border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  transition: border-color 110ms, transform 110ms;
}
.pv2-ball.has-type {
  background: radial-gradient(120% 70px at 50% 0, color-mix(in srgb, var(--c) 28%, var(--panel)), var(--panel) 100%) no-repeat, var(--panel);
}
.pv2-ball:hover { border-color: var(--gold); transform: translateY(-1px); }
.pv2-ball > .thumb { width: 60px; height: 60px; object-fit: contain; }
.pv2-ball-name { color: var(--ink); font-size: var(--fs-2); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-ball-cp { display: inline-flex; align-items: baseline; gap: 4px; }
.pv2-ball-cp b { font-family: var(--mono); font-size: var(--fs-4); }
.pv2-ball-cp span { font-family: var(--cond); font-size: var(--fs-1); letter-spacing: 0.1em; color: var(--dim); }
.pv2-ball-types { justify-content: center; flex-wrap: nowrap; zoom: 0.82; max-width: 122%; overflow: hidden; }

.pv2-rec-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; }
.pv2-rec-hero b { display: block; font-family: var(--mono); font-size: var(--fs-5); line-height: 1; color: var(--ink); }
.pv2-rec-hero span { font-family: var(--cond); font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.pv2-rec-tally { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-rec-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.pv2-side { display: grid; gap: 5px; min-width: 0; }
.pv2-side-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pv2-side-line span { font-family: var(--cond); font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.pv2-side-line b { font-family: var(--mono); font-size: var(--fs-3); }
.pv2-rec-hero.is-thin b, .pv2-side.is-thin .pv2-side-line b { color: var(--dim); }
.pvp-era > .pv2-rec { margin-bottom: 12px; }

.pv2-early {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: 12px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
}
.pv2-early.is-open { flex-wrap: wrap; overflow: visible; }
.pv2-early-chip {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; scroll-snap-align: start;
  padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--row); border: 1px solid var(--rule); color: var(--ink);
}
.pv2-early-chip .thumb { width: 28px; height: 28px; object-fit: contain; }
.pv2-early-text { display: grid; line-height: 1.15; }
.pv2-early-text b { font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); }
.pv2-early-text span { font-size: var(--fs-2); font-weight: 600; white-space: nowrap; }
.pv2-early-chip.is-place-1 { border-color: color-mix(in srgb, var(--acc-amber) 70%, var(--rule)); }
.pv2-early-chip.is-place-1 b { color: var(--acc-amber); }
.pv2-early-chip.is-place-2 { border-color: color-mix(in srgb, #c9d1dc 55%, var(--rule)); }
.pv2-early-chip.is-place-3 { border-color: color-mix(in srgb, #c98a52 60%, var(--rule)); }
.pv2-early-chip:hover { border-color: var(--gold); }

@media (max-width: 960px) {
  .pv2-balls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pv2-card { padding: 13px 12px; }
  .pv2-ball > .thumb { width: 48px; height: 48px; }
  .pv2-ball-cp b { font-size: var(--fs-3); }
}
@media (prefers-reduced-motion: reduce) {
  .pv2-ball, .rv2-boss { transition: none; }
  .pv2-ball:hover, a.rv2-boss:hover { transform: none; }
}
@media (min-width: 641px) {
  .pv2-early { flex-wrap: wrap; overflow: visible; }
}

.pv2-battles { padding: 4px var(--gutter) 18px; display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr); }
.pv2-form { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); }
.pv2-form-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.pv2-dot {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-sm);
  font: 700 var(--fs-1) var(--mono); color: var(--ink);
}
.pv2-dot.is-win { background: color-mix(in srgb, var(--good) 55%, var(--panel)); }
.pv2-dot.is-loss { background: color-mix(in srgb, var(--bad) 55%, var(--panel)); }
.pv2-day { display: grid; gap: 6px; }
.pv2-day-head { padding: 2px 2px 0; }
.pv2-day-list { display: grid; gap: 6px; }
.pv2-battle {
  display: grid; gap: 8px; padding: 10px 12px; position: relative; min-width: 0;
  border-radius: var(--r); background: var(--panel); border: 1px solid var(--rule);
}
.pv2-battle.is-expandable { cursor: pointer; }
.pv2-battle.is-expandable:hover, .pv2-battle.is-open { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.pv2-battle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pv2-b-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 6px 14px; }
.pv2-b-res .battle-result { flex-wrap: nowrap; }
.pv2-b-res b.up { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.pv2-b-res b.down { color: color-mix(in srgb, var(--bad) 80%, var(--ink)); }
.pv2-b-opp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv2-b-opp .div-crest { width: 22px; height: 22px; flex-shrink: 0; }
.pv2-b-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv2-b-opp .ladder-chip { flex-shrink: 0; }
.pv2-b-pts { display: grid; justify-items: end; font-family: var(--mono); line-height: 1.2; }
.pv2-b-pts b { font-size: var(--fs-3); font-weight: 600; }
.pv2-b-pts b.up { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.pv2-b-pts b.down { color: color-mix(in srgb, var(--bad) 80%, var(--ink)); }
.pv2-b-pts span { font-size: var(--fs-1); color: var(--dim); white-space: nowrap; }
.pv2-b-teams { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv2-b-vs { font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.pv2-sprites { display: flex; gap: 2px; min-width: 0; }
.pv2-sprite { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--row); flex-shrink: 1; min-width: 0; }
.pv2-sprite .thumb { width: 26px; height: 26px; object-fit: contain; }
.pv2-b-duel { cursor: default; }
@media (min-width: 900px) {
  .pv2-battle { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .pv2-b-teams { grid-row: 1; grid-column: 2; }
  .pv2-b-main { grid-template-columns: 210px minmax(0, 1fr) 130px; }
  .pv2-b-duel { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pv2-b-main { grid-template-columns: minmax(0, 1fr) auto; }
  .pv2-b-res { grid-column: 1; }
  .pv2-b-pts { grid-column: 2; grid-row: 1 / span 2; }
  .pv2-b-opp { grid-column: 1; }
  .pv2-b-teams { justify-content: space-between; }
  .pv2-sprite { width: 27px; height: 27px; }
  .pv2-sprite .thumb { width: 23px; height: 23px; }
  .pv2-dot { width: 13px; height: 18px; font-size: 0; }
  .pv2-form-dots { gap: 3px; flex-wrap: nowrap; }
  .pv2-form-dots { flex: 1 1 auto; min-width: 0; }
  .pv2-dot { flex: 0 1 13px; min-width: 5px; }
}

.pv2-roster-hero { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 26px; }
.pv2-hero-figs { display: flex; gap: 26px; }
.pv2-hero-fig b { display: block; font-family: var(--mono); font-size: var(--fs-5); line-height: 1; color: var(--acc-amber); }
.pv2-hero-fig span { font-family: var(--cond); font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.pv2-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }

.pv2-filters {
  margin: 4px var(--gutter) 10px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
}
.pv2-filters > summary {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none;
}
.pv2-filters > summary::-webkit-details-marker { display: none; }
.pv2-filters > summary::after { content: "\25BE"; margin-left: auto; color: var(--dim); }
.pv2-filters[open] > summary::after { content: "\25B4"; }
.pv2-filters-now { font-size: var(--fs-2); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv2-filters-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 14px 12px; }
.pv2-filters-body .roster-filters { padding: 0; margin: 0; }
.pv2-rar-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pv2-rar {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--row); color: var(--mute); font: 600 var(--fs-2) var(--sans, inherit);
}
.pv2-rar[aria-pressed="true"] { background: var(--pill-on); color: var(--ink); border-color: color-mix(in srgb, var(--gold) 50%, var(--rule)); }
.pv2-search {
  flex: 1 1 160px; min-width: 0; max-width: 260px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--row); color: var(--ink); font: var(--fs-2) var(--sans, inherit);
}

.pv2-early-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; padding: 4px var(--gutter) 14px;
}
.pv2-etile {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 6px 9px; min-width: 0;
  border-radius: var(--r); background: var(--panel); border: 1px solid var(--rule); color: var(--ink);
}
.pv2-etile:hover { border-color: var(--gold); }
.pv2-etile .thumb { width: 48px; height: 48px; object-fit: contain; }
.pv2-etile-name { font-size: var(--fs-2); font-weight: 600; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-etile-place {
  position: absolute; top: 5px; left: 5px; padding: 1px 7px; border-radius: 999px;
  font: 700 var(--fs-1) var(--mono); background: var(--pill-on); color: var(--mute);
}
.pv2-etile.is-place-1 { border-color: color-mix(in srgb, var(--acc-amber) 65%, var(--rule)); }
.pv2-etile.is-place-1 .pv2-etile-place { background: var(--acc-amber); color: #1a1408; }
.pv2-etile.is-place-2 .pv2-etile-place { background: #c9d1dc; color: #14181e; }
.pv2-etile.is-place-3 .pv2-etile-place { background: #c98a52; color: #1a1006; }

.pv2-rcards { display: none; }
.pv2-roster-table .is-filtered, .pv2-ball.is-filtered { display: none !important; }
.pv2-rcards.is-searching > .pv2-ball[hidden]:not(.is-filtered) { display: grid; }
.pv2-rcards.is-searching > .pv2-rcards-more { display: none; }
@media (max-width: 640px) {
  .pv2-roster-table { display: none; }
  .pv2-rcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 var(--gutter) 16px; }
  .pv2-rcards-more { grid-column: 1 / -1; justify-self: center; }
  .pv2-roster-hero { grid-template-columns: minmax(0, 1fr); }
}

.tcov { position: relative; container-type: inline-size; }
.tcov-scope { font-size: var(--fs-2); color: var(--mute); }
.tcov-switch { margin-left: auto; }
.tcov-plot { display: grid; gap: 1px 22px; }
.tcov-bar {
  --fill: color-mix(in srgb, var(--c, var(--gold)) 65%, var(--ink));
  display: grid; grid-template-columns: 66px minmax(0, 1fr) 24px; align-items: center; gap: 8px;
  min-width: 0; padding: 2px 6px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.tcov-bar:hover, .tcov-bar.is-on { background: var(--lift); }
.tcov-chip { display: flex; min-width: 0; }
.tcov-track { display: flex; height: 10px; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--hairline-2); overflow: hidden; }
.tcov-fill { display: block; width: calc(var(--s, 0) * 100%); min-width: 2px; height: 100%; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--fill); }
.tcov-bar.is-zero .tcov-fill { display: none; }
.tcov-bar:hover .tcov-fill, .tcov-bar.is-on .tcov-fill { filter: brightness(1.18) saturate(1.1); }
.tcov-n { font: 500 var(--fs-2) var(--mono); text-align: right; color: var(--ink); }
.tcov-bar.is-zero .tcov-n { color: var(--dim); }
.tcov-tip {
  position: absolute; z-index: 5; display: grid; gap: 1px; padding: 6px 10px; pointer-events: none;
  border-radius: var(--r); background: var(--bg); border: 1px solid var(--rule); box-shadow: var(--shadow-card);
  white-space: nowrap;
}
.tcov-tip[hidden] { display: none; }
.tcov-tip b { font: 600 var(--fs-3) var(--mono); color: var(--ink); }
.tcov-tip span { font-size: var(--fs-1); color: var(--mute); }
.tcov-wait { margin: 0; padding: 8px 0; color: var(--mute); font-size: var(--fs-2); }
@container (min-width: 560px) {
  .tcov-plot { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(9, auto); grid-auto-flow: column; }
}
@container (min-width: 1040px) {
  .tcov-plot { grid-template-columns: repeat(17, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; gap: 0 4px; }
  .tcov-bar {
    --tcov-cols: 1;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 132px auto; justify-items: center;
    gap: 6px; padding: 6px 2px 8px; text-align: center;
  }
  .tcov-n { order: 0; text-align: center; }
  .tcov-track { order: 1; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 40px; height: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .tcov-fill { width: 100%; min-width: 0; height: calc(var(--s, 0) * 100%); min-height: 2px; border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .tcov-chip { order: 2; justify-content: center; }
}

.pv2-match { display: grid; gap: 0; padding-bottom: 16px; }
.pv2-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin: 0 var(--gutter); }
.pv2-pair > .pv2-card { margin: 12px 0 0; gap: 4px; align-content: start; }
.pv2-sw.is-strong { background: linear-gradient(160deg, color-mix(in srgb, var(--good) 10%, var(--panel)) 0%, var(--panel) 55%); }
.pv2-sw.is-weak { background: linear-gradient(160deg, color-mix(in srgb, var(--bad) 10%, var(--panel)) 0%, var(--panel) 55%); }
.pv2-faced, .pv2-opp {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 54px; align-items: center; gap: 10px;
  padding: 6px 4px; border-top: 1px solid var(--rule); color: var(--ink); min-width: 0;
}
.pv2-faced:first-of-type, .pv2-opp:first-of-type { border-top: 0; }
.pv2-faced .thumb, .pv2-faced-blank { width: 30px; height: 30px; object-fit: contain; }
.pv2-opp .div-crest { width: 26px; height: 26px; }
.pv2-faced-who, .pv2-opp-who { display: grid; gap: 3px; min-width: 0; }
.pv2-faced-who b, .pv2-opp-who b { font-size: var(--fs-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-faced-who i, .pv2-opp-who i { font-style: normal; font: var(--fs-1) var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-opp-wr { font: 600 var(--fs-2) var(--mono); text-align: right; }
.pv2-opp-wr.is-good { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.pv2-opp-wr.is-bad { color: color-mix(in srgb, var(--bad) 80%, var(--ink)); }
.pv2-faced.is-thin, .pv2-opp.is-thin, .pv2-attr.is-thin { opacity: 0.55; }
.pv2-faced:hover, .pv2-opp:hover { background: var(--row); }
.pv2-sw .pv2-faced { grid-template-columns: 30px minmax(0, 1fr) 54px; }
.pv2-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pv2-attr { display: grid; gap: 5px; padding: 9px 10px; border-radius: var(--r); background: var(--row); border: 1px solid var(--rule); min-width: 0; }
.pv2-attr-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pv2-attr-top b { font: 600 var(--fs-3) var(--mono); }
.pv2-attr-side { display: grid; grid-template-columns: 26px minmax(0, 1fr) 34px; align-items: center; gap: 6px; }
.pv2-attr-side span { font: 700 var(--fs-1) var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.pv2-attr-side i { font-style: normal; font: var(--fs-1) var(--mono); color: var(--mute); text-align: right; }
.pv2-list { display: grid; }
@media (max-width: 640px) {
  .pv2-pair { grid-template-columns: minmax(0, 1fr); }
  .pv2-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv2-attr-side { grid-template-columns: 24px minmax(0, 1fr) 30px; gap: 4px; }
}
.pv2-sw.is-strong .pv2-bar > i { background: var(--good); }
.pv2-sw.is-weak .pv2-bar > i { background: var(--bad); }
@media (min-width: 900px) {
  .pv2-list { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .pv2-list > :nth-child(2) { border-top: 0; }
}

.rv2-mates { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px var(--gutter) 6px; }
.pv2-mate {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 12px; border-radius: 999px;
  background: var(--row); border: 1px solid var(--rule); color: var(--ink); font-size: var(--fs-2);
}
.pv2-mate b { font-weight: 600; }
.pv2-mate span { font-family: var(--mono); font-size: var(--fs-1); color: var(--acc-amber); }
a.pv2-mate:hover { border-color: var(--gold); }
.rv2-mobs { margin: 10px var(--gutter) 0; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.rv2-mobs .rv2-boss { padding: 7px 6px; }
.rv2-mobs .rv2-boss .thumb { width: 36px; height: 36px; }
.rv2-mobs .rv2-boss-n b { font-size: var(--fs-3); }
.rv2-mobs .rv2-boss .rv2-bar > i { background: var(--acc-violet); }
.rv2 .rv2-bosses { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
@media (max-width: 640px) {
  .rv2 .rv2-bosses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv2-mobs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .rv2-mobs .rv2-boss-name { font-size: var(--fs-1); }
}
.pv2-trades { display: grid; gap: 12px; padding: 0 var(--gutter) 18px; }
.pv2-trades-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pv2-trade-groups { display: grid; gap: 14px; }
.pv2-trade-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 8px; }
.pv2-trade {
  --rar: var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px; min-width: 0;
  border-radius: var(--r); background: var(--panel); border: 1px solid color-mix(in srgb, var(--rar) 55%, var(--rule));
}
.pv2-trade.is-common { --rar: #8a93a0; }
.pv2-trade.is-uncommon { --rar: var(--good); }
.pv2-trade.is-rare { --rar: #4f8fe0; }
.pv2-trade.is-epic { --rar: var(--acc-violet); }
.pv2-trade.is-legendary { --rar: var(--acc-amber); }
.pv2-trade.is-mythical { --rar: var(--bad); }
.pv2-trade-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.pv2-trade-arrow { font-size: var(--fs-4); color: var(--dim); }
.pv2-tball { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); }
.pv2-tball:last-child { flex-direction: row-reverse; text-align: right; }
.pv2-tball .thumb { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; }
.pv2-tball-text { display: grid; min-width: 0; line-height: 1.25; }
.pv2-tball-text i { font-style: normal; font: 700 var(--fs-1) var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.pv2-tball-text b { font-size: var(--fs-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-tball-text span { font-size: var(--fs-1); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-trade-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 7px; border-top: 1px solid var(--rule); font-size: var(--fs-1); color: var(--mute); }
.pv2-trade-who a { color: var(--ink); font-weight: 600; }
.pv2-trade-rar { display: inline-flex; align-items: center; gap: 5px; }
.pv2-trade-sand { font-family: var(--mono); }
.pv2-trade-at { margin-left: auto; font-family: var(--mono); color: var(--dim); }
.pv2-trade-n { font-family: var(--mono); color: var(--mute); letter-spacing: 0; }
.pv2-trade-foot { flex-wrap: nowrap; gap: 4px 10px; white-space: nowrap; }
.pv2-trade-foot > * { flex: none; }
.pv2-trade-foot > .pv2-trade-who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tr-see-all + .trades-slot > .pv2-trades { padding-top: 12px; }

.pv2-ball { cursor: pointer; align-content: start; }
.pv2-ball.is-mythical { border-color: color-mix(in srgb, var(--acc-violet) 45%, var(--rule)); }
.pv2-ball.is-legendary { border-color: color-mix(in srgb, var(--acc-amber) 40%, var(--rule)); }
.pv2-ball:focus-within { border-color: var(--gold); }
.pv2-ball-lvl { font: var(--fs-1) var(--mono); color: var(--acc-amber); }
.pv2-ball-rec { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; width: 100%; }
.pv2-ball-rec b { font-family: var(--mono); font-size: var(--fs-2); }
.pv2-ball-rec span { font: var(--fs-1) var(--body); color: var(--dim); }
.pv2-ball-rec.is-thin { opacity: 0.55; }
.pv2-ball .trade-note { font-size: var(--fs-1); text-align: center; }
.pv2-item {
  display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 3px; padding: 4px 6px 4px 4px;
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--row) 85%, transparent); border: 1px solid var(--rule);
}
.pv2-item-pic { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--panel); }
.pv2-item-pic:hover { outline: 1px solid var(--gold); }
.pv2-item-pic .thumb { width: 24px; height: 24px; object-fit: contain; }
.pv2-item-stats { display: grid; gap: 1px; min-width: 0; }
.pv2-item-stat { display: inline-flex; align-items: center; gap: 4px; font: var(--fs-1) var(--mono); white-space: nowrap; }
.pv2-item-stat b { font-weight: 600; }
.pv2-stat-icon { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv2-item-stat.is-attack { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); }
.pv2-item-stat.is-defense { color: color-mix(in srgb, #4f8fe0 70%, var(--ink)); }
.pv2-item-stat.is-zero { color: var(--dim); }

.pv2-phone { display: none; }
@media (max-width: 640px) {
  .pv2-desk { display: none; }
  .pv2-phone { display: flex; }
}

.pv2-jump { display: none; }
@media (max-width: 640px) {
  .pv2-jump {
    display: grid; justify-items: start; gap: 6px; position: fixed; z-index: 40;
    left: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
  }
  .pv2-jump.is-shown { opacity: 1; transform: none; pointer-events: auto; }
}
.pv2-jump-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); color: var(--ink); font: 600 var(--fs-2) var(--sans, inherit);
  background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pv2-jump-glyph { color: var(--gold); font-size: var(--fs-2); }
.pv2-jump-list {
  display: grid; min-width: 170px; padding: 6px; border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card);
}
.pv2-jump-list[hidden] { display: none; }
.pv2-jump-item {
  text-align: left; padding: 9px 12px; border: 0; border-radius: var(--r); background: none; cursor: pointer;
  color: var(--ink); font: 600 var(--fs-2) var(--sans, inherit);
}
.pv2-jump-item:hover, .pv2-jump-item:focus-visible { background: var(--row); }
.pv2-jump-item.is-top { color: var(--mute); border-top: 1px solid var(--rule); border-radius: 0 0 var(--r) var(--r); }
@media (prefers-reduced-motion: reduce) {
  .pv2-jump { transition: none; transform: none; }
}
.share-btn.tbl-share { margin-left: auto; align-self: center; padding: 5px 9px; }
.tbl-share .share-btn-label { display: none; }
.wrv-card-title:has(.tbl-share) { display: flex; align-items: center; gap: 8px; }
.wrv-card-title .tbl-share { letter-spacing: 0; }

.sweep-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font: 800 var(--fs-1) var(--mono); letter-spacing: .12em; color: #062a24; background: #2dd4bf;
}
.wsb-tile.is-sweep { border-color: color-mix(in srgb, #2dd4bf 45%, var(--rule)); }
.wsb-tags:has(.sweep-badge) { flex-wrap: wrap; row-gap: 4px; }
.wr-hero-sweep { font-family: var(--cond); font-weight: 700; letter-spacing: .14em; }

.war-rows-side { margin-top: 6px; }
.war-rows-name {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 0 var(--gutter);
  font: 700 var(--fs-2) var(--cond);
}
.war-rows-name::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wf-a); }
.war-rows-side.is-b .war-rows-name::before { background: var(--wf-b); }
.tcx-g { cursor: pointer; }
.tcx-g.is-full { grid-column: 1 / -1; height: auto; min-height: 30px; }
.tcx-g.is-full .tcx-g-name { white-space: normal; line-height: 1.2; padding: 4px 0; }


.pr2-bar, .ty2-bar {
  position: relative; display: block; height: 6px; border-radius: 999px;
  background: var(--hairline-2); overflow: hidden; min-width: 0;
}
.pr2-bar::after, .ty2-bar::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--bg); opacity: .7;
}
.pr2-bar-fill, .ty2-bar-fill {
  display: block; height: 100%; width: var(--w, 0%); border-radius: inherit;
  background: color-mix(in srgb, var(--mute) 60%, transparent);
}
.pr2-bar.is-hi .pr2-bar-fill, .ty2-bar.is-hi .ty2-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--good) 45%, transparent), var(--good)); }
.pr2-bar.is-lo .pr2-bar-fill, .ty2-bar.is-lo .ty2-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 45%, transparent), var(--bad)); }
.pr2-bar.is-mid .pr2-bar-fill, .ty2-bar.is-mid .ty2-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 35%, transparent), var(--gold)); }
@media (prefers-reduced-motion: no-preference) {
  .pr2-bar-fill, .ty2-bar-fill { animation: pr2-grow 600ms var(--ease, ease) both; transform-origin: left; }
}
@keyframes pr2-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pr2-move, .pr2-pill {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
  font: 700 var(--fs-1) var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--mute); background: var(--hairline-2);
}
.pr2-move.is-up, .pr2-pill.is-up { color: var(--good); background: color-mix(in srgb, var(--good) 18%, transparent); }
.pr2-move.is-down, .pr2-pill.is-down { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.pr2-move.is-new { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); text-transform: uppercase; letter-spacing: .06em; }
.pr2 b.is-hi { color: var(--good); }
.pr2 b.is-lo { color: var(--bad); }

.pr2-podium {
  list-style: none; margin: 0; padding: 6px var(--gutter) 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.pr2-pod { min-width: 0; --medal: var(--rule); }
.pr2-pod.is-gold { --medal: var(--medal-gold); grid-column: 1 / -1; }
.pr2-pod.is-silver { --medal: var(--medal-silver); }
.pr2-pod.is-bronze { --medal: var(--medal-bronze); }
@media (min-width: 720px) {
  .pr2-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; }
  .pr2-pod.is-gold { grid-column: auto; order: 2; }
  .pr2-pod.is-silver { order: 1; }
  .pr2-pod.is-bronze { order: 3; }
  .pr2-pod.is-gold .pr2-pod-link { padding-top: 26px; padding-bottom: 18px; }
}
.pr2-pod-link {
  position: relative; display: grid; justify-items: center; gap: 6px; min-width: 0;
  padding: 16px 14px 14px; border-radius: var(--r-lg); text-align: center;
  color: var(--ink); text-decoration: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 20%, var(--panel)), var(--panel) 65%);
  border: 1px solid color-mix(in srgb, var(--medal) 50%, transparent);
  box-shadow: var(--shadow-card);
}
.pr2-pod-link:hover, .pr2-pod-link:focus-visible { border-color: var(--medal); }
.pr2-pod-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pr2-pod-link > .pr2-bar { justify-self: stretch; }
.pr2-medal {
  position: absolute; top: 10px; left: 10px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--medal); color: var(--bg); font: 700 var(--fs-3) var(--cond);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--medal) 25%, transparent);
}
.pr2-pod-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 var(--fs-4) var(--cond); letter-spacing: .01em;
}
.pr2-hero { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pr2-hero b { font-size: var(--fs-5); line-height: 1; }
.pr2-hero small { color: var(--dim); font: var(--fs-1) var(--body); }
.pr2-hero { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.pr2-hero > small, .pr2-hero > .ss-verdict { white-space: nowrap; }
.pr2-pills { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.pr2-art {
  display: grid; place-items: center; flex: none; border-radius: var(--r-lg);
  background: var(--row); box-shadow: inset 0 0 0 1px var(--hairline-2);
}
.pr2-art.is-lg { width: 76px; height: 76px; }
.pr2-pod.is-gold .pr2-art.is-lg { width: 92px; height: 92px; }
.pr2-art.is-lg .thumb { width: 66px; height: 66px; border-radius: var(--r); }
.pr2-pod.is-gold .pr2-art.is-lg .thumb { width: 82px; height: 82px; }
.pr2-art.is-sm { width: 44px; height: 44px; border-radius: var(--r); }
.pr2-art.is-sm .thumb { width: 38px; height: 38px; border-radius: var(--r-sm); }
.pr2-art.is-typing, .pr2-pod.is-gold .pr2-art.is-typing { width: auto; height: auto; min-width: 76px; padding: 8px 10px; }
.pr2-art.is-typing .chips { flex-direction: column; align-items: stretch; gap: 5px; }
.pr2-art.is-lg.is-typing .chip { font-size: var(--fs-2); padding: 4px 9px 4px 5px; gap: 6px; }
.pr2-art.is-lg.is-typing .chip img { width: 20px; height: 20px; }
.pr2-art.is-sm.is-typing { min-width: 44px; padding: 5px 6px; }
.pr2-art.is-sm.is-typing .chips { gap: 3px; }

.pr2-rows { list-style: none; margin: 0; padding: 0 var(--gutter) 16px; display: grid; gap: 6px; }
@media (min-width: 900px) { .pr2-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } }
.pr2-row-link {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px 8px 10px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none; border: 1px solid transparent;
}
.pr2-row-link:hover, .pr2-row-link:focus-visible { border-color: var(--rule); }
.pr2-row-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pr2-rank { width: 22px; flex: none; text-align: center; color: var(--dim); font: 700 var(--fs-3) var(--cond); }
.pr2-row-body { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; }
.pr2-row-name { font: 600 var(--fs-3) var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr2-row-side { display: grid; justify-items: end; gap: 3px; flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pr2-row-side > b { font-size: var(--fs-3); }
@media (prefers-reduced-motion: no-preference) {
  .pr2-pod, .pr2-row { animation: rise 320ms var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
}

.wrap.ty2 .chip { font-size: var(--fs-2); padding: 3px 8px 3px 4px; gap: 5px; }
.wrap.ty2 .chip img { width: 18px; height: 18px; }
.wrap.ty2 td.wr-primary { min-width: 108px; }
.wrap.ty2 td.wr-primary .ty2-bar { margin-top: 6px; }
.ty2-medal {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--medal); color: var(--bg); font: 700 var(--fs-2) var(--cond);
}
.ty2-top.is-gold { --medal: var(--medal-gold); }
.ty2-top.is-silver { --medal: var(--medal-silver); }
.ty2-top.is-bronze { --medal: var(--medal-bronze); }
@media (min-width: 561px) {
  .wrap.ty2 > table:not(.grid) tbody tr.ty2-top td {
    background: linear-gradient(90deg, color-mix(in srgb, var(--medal) 14%, var(--bg)), color-mix(in srgb, var(--medal) 5%, var(--bg)));
  }
}
.wrap.ty2 > table:not(.grid) tbody tr.ty2-top .name { font-weight: 700; }

@media (max-width: 560px) {
  .wrap.ty2 { overflow: visible; padding: 0 var(--gutter); }
  .wrap.ty2 > table:not(.grid) { display: block; min-width: 0; width: 100%; }
  .wrap.ty2 > table:not(.grid) thead { display: none; }
  .wrap.ty2 > table:not(.grid) tbody { display: grid; gap: 8px; }
  .wrap.ty2 > table:not(.grid) tbody tr {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "rank name name more" "rank play wr more";
    align-items: center; column-gap: 10px; row-gap: 8px; padding: 10px 6px 10px 8px;
    border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
    border: 1px solid transparent;
  }
  .wrap.ty2 > table:not(.grid) tbody tr.ty2-top {
    background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 16%, var(--panel)), var(--panel) 80%);
    border-color: color-mix(in srgb, var(--medal) 45%, transparent);
  }
  .wrap.ty2 > table:not(.grid) tbody tr.thin .ty2-bar { opacity: .65; }
  .wrap.ty2.ty2 > table:not(.grid) tbody td,
  .wrap.ty2.ty2 > table:not(.grid) tbody tr:hover td {
    display: block; position: static; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; max-width: none; width: auto; min-width: 0;
  }
  .wrap.ty2.ty2 > table:not(.grid) tbody td.drop-sm, .wrap.ty2.ty2 > table:not(.grid) tbody td.drop-md { display: none; }
  .wrap.ty2.ty2 > table:not(.grid) tbody td.rank { grid-area: rank; text-align: center; font: 700 var(--fs-3) var(--cond); }
  .wrap.ty2.ty2 > table:not(.grid) tbody td.rank + td { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; white-space: normal; overflow: visible; text-overflow: clip; }
  .wrap.ty2.ty2 > table:not(.grid) tbody td.bar { grid-area: play; }
  .wrap.ty2.ty2 > table:not(.grid) tbody td.bar::after { content: " play rate"; color: var(--dim); font: var(--fs-1) var(--body); }
  .wrap.ty2.ty2 > table:not(.grid) tbody td.wr-primary { grid-area: wr; text-align: right; }
  .wrap.ty2.ty2 > table:not(.grid) tbody td.row-details { grid-area: more; }
  .wrap.ty2 .roll-split { margin-top: 4px; }
}

.eqb { padding: 10px var(--gutter) 28px; max-width: 980px; }
.eqb > .eqb-switch { padding: 0 0 10px; --scroll-ground: var(--bg); }
.eqb > .board-search { padding: 0 0 12px; border-bottom: 0; }
.eqb-podium { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.eqb-top {
  --medal: var(--dim);
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
  column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 14px 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--medal) 12%, var(--panel)), var(--panel) 60%);
  border: 1px solid color-mix(in srgb, var(--medal) 40%, var(--rule));
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-width: 0;
}
.eqb-top.is-1 { --medal: #E3B341; }
.eqb-top.is-2 { --medal: #B9C2CF; }
.eqb-top.is-3 { --medal: #C98A5A; }
.eqb-top > .eqb-medal { position: absolute; top: -8px; left: 10px; padding: 1px 8px; }
.eqb-top-pic { grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: var(--r); }
.eqb-top-name {
  grid-column: 2; font: 600 var(--fs-4)/1.2 var(--body); color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eqb-top > .eqb-ally { grid-column: 2; }
.eqb-top-foot { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; margin-top: 4px; }
.eqb-top-fig .eqb-num { font-size: var(--fs-5); }
.eqb-num { font: 600 var(--fs-4)/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.eqb-unit {
  margin-left: 5px; font: 600 var(--fs-1)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold);
}
.eqb-sub { font: var(--fs-1)/1.4 var(--mono); color: var(--mute); white-space: nowrap; }
.eqb-ally { font-size: var(--fs-2); color: var(--mute); min-width: 0; gap: 6px; }
.eqb-ally > a, .eqb-ally > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eqb-row {
  display: grid; grid-template-columns: 24px 34px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  padding: 9px 12px 9px 8px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
}
.eqb-row.clickable, .eqb-top.clickable { cursor: pointer; }
.eqb-row.clickable:hover, .eqb-top.clickable:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.eqb-row.clickable:hover .eqb-name, .eqb-top.clickable:hover .eqb-top-name { color: var(--gold); }
.eqb-rank { font: 600 var(--fs-2)/1 var(--mono); color: var(--dim); text-align: center; }
.eqb-pic { width: 34px; height: 34px; border-radius: var(--r-sm); }
@media (max-width: 759px) { .eqb-row .eqb-unit { display: none; } }
.eqb-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eqb-name {
  font: 500 var(--fs-3)/1.25 var(--body); color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eqb-figs { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.eqb-fig { display: flex; align-items: baseline; }
.eqb .eqb-row[hidden], .eqb .eqb-top[hidden] { display: none; }
@media (min-width: 760px) {
  .eqb-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .eqb-top { grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; text-align: center;
             padding: 20px 14px 14px; row-gap: 6px; }
  .eqb-top > * { grid-column: 1 !important; grid-row: auto !important; justify-self: center !important; }
  .eqb-top-foot { flex-direction: column; align-items: center; gap: 6px; }
  .eqb-top-fig .eqb-num { font-size: var(--fs-5); }
  .eqb-top > .eqb-medal { left: 50%; transform: translateX(-50%); }
  .eqb-top-pic { width: 64px; height: 64px; }
  .eqb-top-name { max-width: 100%; }
  .eqb-row { grid-template-columns: 40px 36px minmax(0, 1.3fr) minmax(0, 1fr) auto; padding: 8px 14px; }
  .eqb-pic { width: 36px; height: 36px; }
  .eqb-who { display: contents; }
  .eqb-who > .eqb-ally { grid-column: 4; }
  .eqb-figs { grid-column: 5; flex-direction: row; align-items: baseline; gap: 14px; }
  .eqb-figs .eqb-sub { min-width: 9ch; text-align: right; }
}

.rank-medal {
  --medal: var(--dim);
  display: inline-block; min-width: 1.75em; padding: 1px 6px; border-radius: 999px;
  font: 600 var(--fs-1)/1.5 var(--mono); font-variant-numeric: tabular-nums;
  text-align: center; white-space: nowrap; color: #0B0D12; background: var(--medal);
}
.rank-medal.is-1 { --medal: #E3B341; }
.rank-medal.is-2 { --medal: #B9C2CF; }
.rank-medal.is-3 { --medal: #C98A5A; }
td.rank > .rank-medal { vertical-align: middle; }

.rd-pill {
  display: inline-flex; align-items: center; gap: 6px; width: max-content;
  padding: 3px 11px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: var(--fs-1); color: var(--mute); background: var(--row);
  list-style: none; cursor: pointer; user-select: none;
}
.rd-pill.is-none { cursor: default; color: var(--dim); border-style: dashed; background: none; }
.rd-pill.is-top { cursor: default; padding: 1px 8px; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }

.rd { display: grid; gap: 14px; margin-top: 10px; }
.rd-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.rd-p {
  display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r);
  background: var(--row); border: 1px solid var(--hairline);
}
.rd-p.is-me { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.rd-p-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.rd-p-name { font-weight: 600; font-size: var(--fs-3); color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rd-p-name:hover { color: var(--gold); }
.rd-bar { height: 5px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.rd-bar i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), var(--gold)); }
.rd-p-figs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-1); color: var(--mute); }
.rd-p-figs b { font-family: var(--mono); font-size: var(--fs-2); color: var(--ink); font-weight: 600; }

.rd-floors { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rd-floor { display: grid; gap: 6px; }
.rd-floor-n { font-family: var(--cond); font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.rd-fights { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 6px; }
.rd-fight {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 7px 9px 7px 7px; border-radius: var(--r); border: 1px solid var(--hairline);
  background: var(--panel); color: var(--ink); text-decoration: none;
}
a.rd-fight:hover { border-color: var(--rule); background: var(--row); }
.rd-fight.is-boss { border-color: color-mix(in srgb, var(--acc-violet) 55%, var(--rule)); }
.rd-fight.is-mine small { color: var(--gold); }
.rd-fight .thumb { width: 32px; height: 32px; flex: none; }
.rd-order {
  flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-1);
  background: var(--row); color: var(--mute); border: 1px solid var(--rule);
}
.rd-fight-text { display: grid; min-width: 0; }
.rd-fight-text b { font-size: var(--fs-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-fight-text small { font-size: var(--fs-1); color: var(--dim); overflow-wrap: anywhere; line-height: 1.3; }

@media (max-width: 720px) {
  .rd-players { grid-template-columns: minmax(0, 1fr); }
  .rd-fights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (pointer: coarse) { .rd-pill { min-height: 32px; } }

.rr-list { display: grid; gap: 10px; padding: 10px var(--gutter) 18px; }
.rr-list + .rh-more { margin: 0 var(--gutter) 18px; }
.rr {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 12px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--rule); background: var(--panel); box-shadow: var(--shadow-card);
}
.rr > .rr-body, .rr > .rr-actions { margin-top: 10px; }
.rr-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rr-art {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: var(--r-lg); background: var(--row); border: 1px solid var(--hairline);
}
.rr-art > .thumb { width: 44px; height: 44px; object-fit: contain; }
.rr-art-i, .rr-mate-i {
  display: grid; place-items: center; border-radius: 999px; font-weight: 600;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.rr-art-i { width: 36px; height: 36px; font-size: var(--fs-3); }
.rr-head { display: grid; gap: 3px; min-width: 0; flex: 1; }
.rr-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rr-boss {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-3); font-weight: 600; color: var(--ink); text-decoration: none;
}
a.rr-boss:hover { color: var(--gold); }
.rr-boss.is-none { color: var(--dim); font-weight: 400; }
.rr-state {
  flex: none; margin-left: auto; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: var(--fs-1); color: var(--mute); border: 1px solid var(--rule);
}
.rr-state.is-first {
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--rule));
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.rr-state.is-solo { color: var(--acc-violet); border-color: color-mix(in srgb, var(--acc-violet) 50%, var(--rule)); }
.rr-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: var(--fs-1); color: var(--mute); }
.rr-stars { color: var(--gold); letter-spacing: 1px; font-size: var(--fs-2); }
.rr-time { font-variant-numeric: tabular-nums; }
.rr-note { color: var(--dim); }

.rr-body { display: grid; gap: 8px; min-width: 0; }
.rr-party { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-mate {
  display: inline-flex; align-items: center; gap: 6px; max-width: 180px; min-width: 0;
  padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--row); color: var(--ink); font-size: var(--fs-2); text-decoration: none;
}
a.rr-mate:hover, a.rr-mate:focus-visible { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); color: var(--gold); }
.rr-mate.is-me { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.rr-mate > .thumb { width: 22px; height: 22px; border-radius: 50%; flex: none; object-fit: cover; }
.rr-mate-i { width: 22px; height: 22px; flex: none; font-size: var(--fs-1); }
.rr-mate-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-party .rh-who-btn { background: var(--row); }
.rr-foes { display: flex; flex-wrap: wrap; gap: 5px; }
.rr-foe {
  font-size: var(--fs-1); color: var(--mute); text-decoration: none;
  padding: 2px 8px; border: 1px solid var(--hairline); border-radius: 999px;
}
a.rr-foe:hover { color: var(--gold); border-color: var(--rule); }
.rr-foe.is-more { color: var(--dim); border-style: dashed; }
.rr-party.has-drops { display: grid; gap: 6px; }
.rr-member { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 4px 10px; min-width: 0; }
.rr-member > :first-child { min-width: 0; max-width: 100%; justify-self: start; }
.rr-member .rh-who-btn, .rr-member .rr-mate { max-width: 100%; }
.rr-drops { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 3px 0 0; list-style: none; }
.rr-drop-li { display: flex; min-width: 0; max-width: 100%; }
.rr-drop {
  display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; min-height: 26px;
  padding: 2px 7px 2px 3px; border-radius: 999px; border: 1px solid transparent;
  background: var(--row); color: var(--ink); font-size: var(--fs-1); text-decoration: none;
}
.rr-drop.is-icon { padding-right: 3px; }
.rr-drop > .thumb { width: 18px; height: 18px; flex: none; object-fit: contain; background: none; border: 0; }
.rr-drop.is-gear { gap: 5px; padding-right: 9px; }
.rr-drop.is-gear > .thumb { width: 20px; height: 20px; }
.rr-drop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-drop i { font-style: normal; font-family: var(--mono); color: var(--mute); }
.rr-drop.is-gear {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--rule));
  background: color-mix(in srgb, var(--gold) 10%, var(--row));
}
a.rr-drop:hover, a.rr-drop:focus-visible { color: var(--gold); }
.rr-drops-none { align-self: center; color: var(--dim); font-size: var(--fs-1); }
@media (max-width: 480px) {
  .rr-member { grid-template-columns: 118px minmax(0, 1fr); gap: 4px 8px; }
}
@media (max-width: 359px) {
  .rr-member { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rr-drops { padding: 0 0 2px 30px; }
}
.rr-rewards { gap: 4px 10px; }
.rr-rewards .rh-pop-items { gap: 4px 6px; }
.rr-rewards .rh-pop-item { gap: 3px; padding: 2px 7px 2px 2px; border-radius: 999px; background: var(--row); }
.rr-rewards .rh-pop-item:has(> .thumb) > span { display: none; }
.rr-rewards .rh-pop-item i { font-family: var(--mono); }

.rr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rr-toggle { font: inherit; font-size: var(--fs-1); }
.rr-toggle::after {
  content: ""; width: 6px; height: 6px; margin: -3px 1px 0 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .28s var(--ease, ease);
}
.rr-toggle[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
.rr-toggle[aria-expanded="true"], .rr-toggle:hover, .rr-toggle:focus-visible {
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--rule));
}
.rr-share { padding: 4px 11px; }

.rr-more {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .32s var(--ease, ease), visibility 0s linear .32s;
}
.rr-more.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s var(--ease, ease), visibility 0s; }
.rr-more-in { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.rr-more.is-open > .rr-more-in { opacity: 1; transition: opacity .28s ease .06s; }
.rr-more-in > .rd { margin-top: 12px; }
.rr-more-foot { display: flex; justify-content: flex-end; padding-top: 10px; }

@media (min-width: 900px) {
  .rr { grid-template-columns: minmax(230px, 1fr) minmax(0, 1.35fr) auto; column-gap: 20px; align-items: center; }
  .rr > .rr-body, .rr > .rr-actions { margin-top: 0; }
  .rr > .rr-main { grid-column: 1; }
  .rr > .rr-body { grid-column: 2; }
  .rr > .rr-actions { grid-column: 3; justify-content: flex-end; }
  .rr > .rr-more { grid-column: 1 / -1; }
  .rr-main:only-child { grid-column: 1 / -1; }
}
@media (pointer: coarse) {
  .rr-mate { min-height: 34px; }
  .rr-foe { padding: 6px 9px; }
  a.rr-drop { min-height: 32px; }
}

.rr-histhead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px;
  border-top: 1px solid var(--rule); margin-top: 8px; padding-right: var(--gutter);
}
.rr-histhead > .group-title { border-top: 0; margin-top: 0; }
.rr-histhead > .rr-refresh { display: contents; }
.rr-histhead .rr-refresh-btn { grid-column: 2; grid-row: 1; margin-bottom: 1px; }
.rr-histhead .rr-refresh-status { grid-column: 1 / -1; justify-self: end; padding: 6px 0 0 var(--gutter); text-align: right; }
.rr-histhead.is-alone { border-top: 0; grid-template-columns: auto; justify-content: start; padding: 6px var(--gutter) 0; }
.rr-histhead.is-alone .rr-refresh-btn { grid-column: 1; }
.rr-histhead.is-alone .rr-refresh-status { justify-self: start; padding-left: 0; text-align: left; }
.rr-refresh { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 32px; }
.pane-head .rr-refresh { margin-left: auto; }
.rh-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 8px; padding-bottom: 8px; }
.rh-head > .rr-refresh { margin-left: auto; flex-direction: row-reverse; font-family: var(--body); }
.rr-refresh-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--row); color: var(--ink); cursor: pointer;
  font: 600 var(--fs-1) var(--body);
}
.rr-refresh-btn:hover, .rr-refresh-btn:focus-visible { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--rule)); }
.rr-refresh-btn:disabled { cursor: progress; opacity: .75; }
.rr-refresh-status { font-size: var(--fs-1); color: var(--mute); }
.rr-refresh-status:empty { display: none; }
.rr-refresh-status.is-updated { color: var(--gold); font-weight: 600; }
.rr-refresh-status.is-recent { color: var(--dim); }
.rr-refresh-status.is-error { color: var(--bad); }

.rc { display: grid; gap: 12px; max-width: 920px; margin: 0 auto; padding: 14px var(--gutter) 28px; }
.rc-hero {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--rule);
  background: var(--panel); box-shadow: var(--shadow-card);
}
.rc-art {
  width: 92px; height: 92px; display: grid; place-items: center;
  border-radius: calc(var(--r-lg) * 1.5); background: var(--row); border: 1px solid var(--hairline);
}
.rc-art > .thumb { width: 80%; height: 80%; object-fit: contain; }
.rc-head { display: grid; gap: 4px; min-width: 0; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-top > .rr-state { margin-left: 0; }
.rc-boss { margin: 2px 0 0; font-family: var(--cond); font-weight: 700; font-size: clamp(26px, 7vw, 40px); line-height: 1.05; overflow-wrap: anywhere; }
.rc-boss a { color: inherit; text-decoration: none; }
.rc-boss a:hover { color: var(--gold); }
.rc-sub { font-size: var(--fs-2); }
.rc-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rc-fact { padding: 3px 10px; border-radius: 999px; background: var(--row); border: 1px solid var(--hairline); font-size: var(--fs-1); color: var(--ink); }
.rc-card {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--rule); background: var(--panel); box-shadow: var(--shadow-card);
}
.rc-h { margin: 0; font-family: var(--cond); font-size: var(--fs-2); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.rc-card > .rd { margin-top: 0; }
.rc-party { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.rc-mate { display: grid; gap: 8px; padding: 10px; border-radius: var(--r); background: var(--row); border: 1px solid var(--hairline); }
.rc-mate.is-me { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.rc-mate-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.rc-mate-head small { flex: none; color: var(--dim); font-size: var(--fs-1); }
.rc-mate .rr-mate { background: var(--panel); }
.rc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rc-exp { color: var(--dim); font-size: var(--fs-1); }
.rc-expired { justify-items: start; }
.rc-expired-line { margin: 0; font-size: var(--fs-3); }
@media (min-width: 640px) {
  .rc-hero { grid-template-columns: 136px minmax(0, 1fr); gap: 20px; padding: 20px; }
  .rc-art { width: 136px; height: 136px; border-radius: calc(var(--r-lg) * 2); }
}

@media (prefers-reduced-motion: no-preference) {
  .rr-list.is-moving > .rr {
    transition: opacity .5s var(--ease, ease) var(--rr-d, 0ms), translate .5s var(--ease, ease) var(--rr-d, 0ms),
      transform .2s var(--ease, ease), box-shadow .2s ease, border-color .2s ease;
  }
  .rr-list.is-moving > .rr:not(.is-in) { opacity: 0; translate: 0 14px; }
  .rc-hero, .rc-card { animation: rr-rise .45s var(--ease, ease) both; }
  .rc-card:nth-child(2) { animation-delay: 70ms; }
  .rc-card:nth-child(3) { animation-delay: 140ms; }
  .rr-refresh-btn.is-working svg { animation: rr-spin .8s linear infinite; }
  .rr-refresh-status:not(:empty) { animation: rr-fade .25s ease both; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rr { transition: transform .2s var(--ease, ease), box-shadow .2s ease, border-color .2s ease; }
  .rr:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: color-mix(in srgb, var(--gold) 26%, var(--rule)); }
}
@keyframes rr-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rr-spin { to { transform: rotate(360deg); } }
@keyframes rr-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rr, .rr-more, .rr-more-in, .rr-more.is-open, .rr-more.is-open > .rr-more-in, .rr-toggle::after { transition: none; }
  .rr-list.is-moving > .rr { opacity: 1; translate: none; }
}

.xt-card {
  margin: 12px var(--gutter) 0; padding: 14px 16px; display: grid; gap: 12px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
}
.rh-slot > .xt-card { margin-bottom: 4px; }
.xt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xt-title {
  margin: 0; font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.xt-pill {
  display: inline-flex; align-items: baseline; padding: 3px 10px; border-radius: 999px;
  background: var(--pill-on); font-family: var(--mono); font-size: var(--fs-1); color: var(--ink);
}
.xt-pill.is-quiet { color: var(--mute); }
.xt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.xt-tile {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px;
  border-radius: var(--r); background: var(--row); border: 1px solid var(--rule);
}
.xt-crest { width: 52px; height: 36px; flex: none; object-fit: contain; }
.xt-words { display: grid; gap: 2px; min-width: 0; }
.xt-big {
  font: 700 var(--fs-5)/1.05 var(--cond); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xt-label { font-size: var(--fs-2); color: var(--mute); }
.xt-sub { font-family: var(--mono); font-size: var(--fs-1); color: var(--dim); }
.xt-tile.is-tier-7 { border-color: color-mix(in srgb, var(--acc-violet) 45%, var(--rule)); }
.xt-tile.is-tier-6 { border-color: color-mix(in srgb, var(--acc-cyan, var(--gold)) 40%, var(--rule)); }
.xt-tile.is-members .xt-big, .xt-tile.is-inventory .xt-big { color: var(--acc-amber); }
.xt-tile.is-influence .xt-big { color: color-mix(in srgb, var(--acc-violet) 70%, var(--ink)); }
@media (max-width: 640px) {
  .xt-peaks .xt-tiles { grid-template-columns: minmax(0, 1fr); }
  .xt-perks .xt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xt-perks .xt-tile { flex-direction: column; align-items: flex-start; padding: 10px; }
  .xt-perks .xt-big { font-size: var(--fs-4); }
}

.art-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.ac-k {
  font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.ac-pill {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; min-width: 0; max-width: 100%;
  border-radius: 999px; background: var(--pill-on); font-size: var(--fs-2); color: var(--ink); text-decoration: none;
}
.ac-pill b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-pill i { font-style: normal; font-size: var(--fs-1); color: var(--dim); }
.ac-pill:hover, .ac-pill:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }

@media (pointer: coarse) {
  .copy-link { width: 36px; height: 36px; }
  .row-details-open { position: relative; }
  .row-details-open::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; }
  .ac-pill { position: relative; }
  .ac-pill::after { content: ""; position: absolute; inset: -3px 0; border-radius: 999px; }
  .eqb-row { padding-top: 11px; padding-bottom: 11px; }
  .eqb-row .eqb-ally > a { padding: 2px 0 13px; margin: -2px 0 -13px; }
  .btn-small { min-height: 32px; }
}
.mt-bring-label, .mt-double { font-size: var(--fs-1); }
.dv-col-n .dv-n-short { display: none; }
@media (max-width: 400px) {
  .dv-col-n .dv-n-full { display: none; }
  .dv-col-n .dv-n-short { display: inline; }
}
@media (max-width: 359px) {
  .dv-dist-plot { gap: 3px; }
  .dv-col-foot .dv-col-name { letter-spacing: -0.02em; }
}

.ad { padding: 8px var(--gutter) 28px; max-width: 1080px; }
.ad-head { display: grid; gap: 6px; margin-bottom: 4px; }
.ad-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-pills .pv2-pill b { font-family: var(--mono); }
.ad-links { margin-top: 2px; }
.ad-link { color: var(--mute); text-decoration: none; border: 1px solid transparent; transition: border-color 110ms; }
.ad-link:hover, .ad-link:focus-visible { border-color: var(--gold); color: var(--ink); }
.ad-place b { font-weight: 600; }
.ad-place.is-p1 b { color: var(--acc-amber); }
.ad-search {
  width: 100%; max-width: 360px; margin: 6px 0 14px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink); font: inherit;
}
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ad-card {
  display: grid; gap: 8px; padding: 12px; min-width: 0; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none;
  border: 1px solid transparent; transition: border-color 110ms, transform 110ms;
}
.ad-card:hover, .ad-card:focus-visible { border-color: var(--gold); transform: translateY(-1px); }
.ad-card[hidden] { display: none; }
.ad-card-art {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px;
  border-radius: var(--r); background: var(--row); min-height: 72px;
}
.ad-card-art img { width: 100%; height: 64px; object-fit: contain; }
.ad-card-name { font-weight: 700; font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-sec { margin-top: 18px; display: grid; gap: 10px; }
.ad-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.ad-tile {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 8px; min-width: 0;
  border-radius: var(--r); border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  text-decoration: none; transition: border-color 110ms, transform 110ms;
}
.ad-tile:hover, .ad-tile:focus-visible { border-color: var(--gold); transform: translateY(-1px); }
.ad-tile img { width: 88px; height: 88px; object-fit: contain; }
.ad-tile-name { max-width: 100%; font-size: var(--fs-2); font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-tile-part {
  position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--pill-on); font-size: var(--fs-1); color: var(--mute);
}
@media (max-width: 640px) {
  .ad-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-search { max-width: none; }
}

.wnotes { margin: 10px var(--gutter) 4px; }
.wnotes[hidden] { display: none; }
.wnotes[data-mode="stack"] { display: grid; gap: 8px; }
.wnote {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 14px;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.wnote.is-close { --wnote-c: var(--acc-amber); }
.wnote.is-upset { --wnote-c: var(--acc-violet); }
.wnote.is-catching { --wnote-c: var(--dim); }
.wnote.is-swing { --wnote-c: var(--gold); }
.wnote.is-comeback { --wnote-c: var(--acc-amber); }
.wnote.is-sweep { --wnote-c: #2dd4bf; }
.wnote.is-mad { --wnote-c: #ef4444; }
.wnotes .wnote { min-height: 0; padding: 5px 12px; gap: 8px; }
.wnotes .wnote-tag { padding: 1px 7px; }
.wnotes .wnote-text { font-size: var(--fs-2); }
.wnote-tag {
  flex: none; padding: 3px 9px; border-radius: 999px;
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wnote-c, var(--gold)); background: color-mix(in srgb, var(--wnote-c, var(--gold)) 16%, transparent);
}
.wnote-text { min-width: 0; color: var(--ink); font: var(--fs-3) var(--body); }
.wnotes-track { display: grid; touch-action: pan-y; }
.wnotes-slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.wnotes-slide.is-on { visibility: visible; opacity: 1; }
.wnotes-dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
.wnotes-dot { position: relative; width: 22px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.wnotes-dot::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rule);
}
.wnotes-dot[aria-current="true"]::after { width: 14px; border-radius: var(--r-sm); background: var(--gold); }
.wnotes-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: no-preference) {
  .wnotes-slide { transition: opacity .35s ease, visibility .35s; }
  .wnotes-dot::after { transition: width .2s, background .2s; }
}

.whl-slot:empty { display: none; }
.whl-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: -8px auto 6px; max-width: 760px; padding: 0 var(--gutter);
}
.whl-bar { flex: 1 1 0; min-width: 0; }
.whl-bar[hidden], .whl-all[hidden] { display: none; }
.whl-line, .whl-banner { --k: var(--gold); }
:is(.whl-line, .whl-banner, .whl-kind).is-comeback { --k: var(--acc-amber); }
:is(.whl-line, .whl-banner, .whl-kind).is-upset { --k: var(--acc-violet); }
:is(.whl-line, .whl-banner, .whl-kind).is-sweep { --k: #2dd4bf; }
:is(.whl-line, .whl-banner, .whl-kind).is-mad { --k: #ef4444; }
:is(.whl-line, .whl-banner, .whl-kind).is-closest { --k: #f97316; }
.whl-line {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--panel);
  color: var(--ink); text-decoration: none; font: 500 var(--fs-2) var(--body);
}
.whl-line:hover, .whl-line:focus-visible { border-color: color-mix(in srgb, var(--k) 50%, var(--rule)); }
.whl-kind {
  flex: 0 0 auto; white-space: nowrap; padding: 1px 6px; border-radius: 999px;
  font: 700 var(--fs-1) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--k);
  background: color-mix(in srgb, var(--k) 14%, transparent);
}
:root[data-theme="light"] .whl-kind { color: color-mix(in srgb, var(--k) 50%, var(--ink)); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .whl-kind { color: color-mix(in srgb, var(--k) 50%, var(--ink)); }
}
.whl-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.whl-figure { flex: 0 0 auto; white-space: nowrap; font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.whl-time { flex: 0 0 auto; white-space: nowrap; font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.whl-more {
  flex: 0 0 auto; background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: 600 var(--fs-1) var(--body); color: var(--gold);
}
.whl-all { flex: 1 0 100%; display: flex; flex-direction: column; gap: 4px; }
.whl-all .whl-line { border-radius: var(--r); }
@media (max-width: 520px) { .whl-all .whl-figure { display: none; } }
.whl-banner {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin: 2px var(--gutter) 8px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); font: 500 var(--fs-2) var(--body);
}
.whl-banner .whl-text { flex: 0 1 auto; }
.whl-banner .whl-figure { margin-right: auto; }
@media (max-width: 420px) { .whl-banner .whl-time { display: none; } }
.whl-all { min-width: 0; order: 2; }
.whl-more[aria-expanded="true"] { order: 3; }
@media (max-width: 420px) { .whl-now .whl-time { display: none; } }
.whl-banner .whl-text { flex: 0 0 auto; max-width: 45%; }
.whl-banner .whl-figure { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.wsb-recap { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px var(--gutter) 4px; }
.wsb-recap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wsb-recap-title { margin: 0; font: 700 var(--fs-4)/1.1 var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.wsb-recap-unlock { font-size: var(--fs-2); white-space: nowrap; }
.wrt-card { gap: 8px; }
.wrt-places { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wrt-place { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.wrt-place:has(.wrc-ball) { grid-template-columns: 18px auto minmax(0, 1fr) auto; }
.wrt-place.is-first { padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.wrt-rank { color: var(--dim); font: 700 var(--fs-2) var(--mono); text-align: center; }
.wrt-place.is-first .wrt-rank { color: color-mix(in srgb, var(--tone) 80%, var(--ink)); }
.wrt-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wrt-name, .wrt-main .wrc-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-3); font-weight: 600; }
.wrt-place.is-first .wrt-name, .wrt-place.is-first .wrc-player { font-size: var(--fs-4); font-weight: 700; }
.wrt-place.is-first .wrt-name { white-space: normal; overflow-wrap: anywhere; }
.wrt-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wrt-sub { color: var(--mute); font-size: var(--fs-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrt-figure { font: 700 var(--fs-3) var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--mute); }
.wrt-place.is-first .wrt-figure { color: color-mix(in srgb, var(--tone) 75%, var(--ink)); }
.wrc-ball.wrt-ball { width: 48px; height: 48px; }
.wrt-place.is-locked .wrt-blank { width: auto; max-width: 70%; }

.wsb-head-dates { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.wsb-week-step {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--rule); background: var(--row); color: var(--ink);
  font: 700 var(--fs-4)/1 var(--body); cursor: pointer; flex: none;
}
.wsb-week-step:disabled { opacity: .35; cursor: default; }
.wsb-dates-pick { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; border-radius: var(--r-lg); padding: 2px 4px; }
.wsb-dates-pick:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.wsb-dates-caret { color: var(--mute); font-size: var(--fs-3); line-height: 1; flex: none; }
.wsb-week-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; border: 0; font-size: var(--fs-4); }
@media (max-width: 420px) {
  .wsb-head-dates { gap: 6px; }
  .wsb-week-step { width: 32px; height: 32px; }
  .wsb-head-dates .wsb-dates { font-size: clamp(28px, 8.4vw, 40px); }
}

@media (max-width: 719px) {
  .wsb-recap-cards {
    display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .wsb-recap-cards::-webkit-scrollbar { display: none; }
  .wsb-recap-cards > .wrc-card { flex: 0 0 84%; align-self: flex-start; scroll-snap-align: start; padding: 12px 14px; }
}

.ss-switch {
  display: inline-flex; gap: 2px; padding: 3px; margin: 12px var(--gutter) 0;
  background: var(--row); border: 1px solid var(--rule); border-radius: 999px;
}
.ss-pill {
  padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 var(--fs-2)/1.2 var(--body); color: var(--mute);
}
.ss-pill:hover { background: var(--pill-hover); color: var(--ink); }
.ss-pill[aria-pressed="true"] { background: var(--pill-on); color: var(--gold); }
@media (max-width: 640px), (pointer: coarse) {
  .ss-pill { min-height: 32px; }
}
.ss-page { padding-bottom: 16px; max-width: 980px; }
.ss-verdict { font: 700 var(--fs-1)/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.ss-verdict.is-strong { color: var(--good); }
.ss-verdict.is-good { color: var(--gold); }
.ss-verdict.is-risky { color: var(--bad); }
.ss-meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; min-width: 0; }
.pr2-row-body > .ss-meta { justify-content: flex-start; }
.ss-pick { font: 600 var(--fs-1)/1.3 var(--body); color: var(--mute); white-space: nowrap; }
.ss-pick.is-often { color: var(--ink); }
.ss-pick.is-rarely { color: var(--dim); }
.ss-vs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; min-width: 0; }
.pr2-row-body > .ss-vs { justify-content: flex-start; }
.ss-vs-part { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; min-width: 0; max-width: 100%; }
.ss-vs-label { font: 600 var(--fs-1)/1.3 var(--body); white-space: nowrap; }
.ss-vs-part.is-best .ss-vs-label { color: var(--good); }
.ss-vs-part.is-worst .ss-vs-label { color: var(--bad); }
.ss-row-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ss-band {
  --b: var(--band-f);
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--r-sm);
  font: 700 var(--fs-2)/1 var(--cond); color: var(--b);
  background: color-mix(in srgb, var(--b) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b) 45%, transparent);
}
.pr2-pod-link > .ss-band { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; font-size: var(--fs-3); }
.ss-band[data-band="S"] { --b: var(--band-s); }
.ss-band[data-band="A"] { --b: var(--band-a); }
.ss-band[data-band="B"] { --b: var(--band-b); }
.ss-band[data-band="C"] { --b: var(--band-c); }
.ss-band[data-band="D"] { --b: var(--band-d); }
.ss-most { padding-bottom: 8px; }
.ss-strip {
  list-style: none; margin: 0; padding: 0 var(--gutter) 8px; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
.ss-strip-link {
  display: grid; justify-items: center; gap: 6px; padding: 10px 6px; min-width: 0;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none; border: 1px solid transparent; text-align: center;
}
.ss-strip-link:hover, .ss-strip-link:focus-visible { border-color: var(--rule); }
.ss-strip-name { max-width: 100%; font: 600 var(--fs-1)/1.25 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .ss-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 30%; overflow-x: auto; scrollbar-width: none; }
  .ss-strip::-webkit-scrollbar { display: none; }
}

html.nav-d .top, html.nav-eh .top { flex-wrap: nowrap; }
html.nav-d .top .nav, html.nav-eh .top .nav { display: none; }
html.nav-d .top .omni, html.nav-eh .top .omni {
  flex: 1 1 auto; min-width: 0; width: auto; justify-content: center;
  margin: 0 auto; padding: 0 12px; align-self: center;
}
html.nav-d .top .omni input, html.nav-eh .top .omni input { width: min(560px, 100%); box-sizing: border-box; padding: 10px 18px; }
html.nav-d .omni-results, html.nav-eh .omni-results { left: 50%; right: auto; translate: -50% 0; }
html.nav-d .top .acct, html.nav-eh .top .acct { border-top: 0; }

html.nav-d .chrome, html.nav-eh .chrome { position: relative; }
html.nav-d .chrome > .nav-d-row, html.nav-eh .chrome > .nav-d-row { flex: 1 1 100%; }
html.nav-d .chrome > .nav-d-row.is-solo, html.nav-eh .chrome > .nav-d-row.is-solo { flex: 0 0 auto; overflow: visible; }
html.nav-d .chrome > .nav-d-inner, html.nav-eh .chrome > .nav-d-inner { flex: 1 1 100%; }
html.nav-d .chrome.is-tierlist > .nav-d-row, html.nav-eh .chrome.is-tierlist > .nav-d-row { margin-bottom: 2px; }
.nav-d-inner button { font-size: var(--fs-1); padding: 4px 10px; color: var(--dim); }
.subnav.nav-d-inner button[aria-pressed="true"] { color: var(--gold); }

.subnav > .nav-switch-pin {
  position: sticky; left: 0; z-index: 3; flex: 0 0 auto; align-self: stretch;
  display: flex; align-items: center; padding-right: 8px; background: var(--row);
}
.subnav .nav-switch-pin > button.nav-switch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(var(--pill-on), var(--pill-on)), var(--row); color: var(--gold);
  font: 700 var(--fs-3) var(--body);
  box-shadow: 0 0 0 1px var(--hairline-2) inset;
}
.subnav .nav-switch-pin > button.nav-switch:hover {
  background: linear-gradient(var(--pill-hover), var(--pill-hover)), var(--row); color: var(--ink);
}
.subnav .nav-switch-pin > button.nav-switch[aria-expanded="true"] { color: var(--ink); }
.subnav .nav-switch-pin > button.nav-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-caret {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-switch[aria-expanded="true"] .nav-caret { transform: translateY(2px) rotate(-135deg); }
html.nav-d .chrome > .nav-d-row.is-solo > .nav-switch-pin, html.nav-eh .chrome > .nav-d-row.is-solo > .nav-switch-pin { padding-right: 0; position: static; }
.nav-switch-name.is-short, .nav-name-short { display: none; }

.subnav.has-edge-fade.has-pin.is-more-start {
  -webkit-mask-image: linear-gradient(to right, #000 var(--pin), transparent var(--pin), transparent calc(var(--pin) + 10px), #000 calc(var(--pin) + 40px));
  mask-image: linear-gradient(to right, #000 var(--pin), transparent var(--pin), transparent calc(var(--pin) + 10px), #000 calc(var(--pin) + 40px));
}
.subnav.has-edge-fade.has-pin.is-more-start.is-more-end {
  -webkit-mask-image: linear-gradient(to right, #000 var(--pin), transparent var(--pin), transparent calc(var(--pin) + 10px), #000 calc(var(--pin) + 40px), #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 var(--pin), transparent var(--pin), transparent calc(var(--pin) + 10px), #000 calc(var(--pin) + 40px), #000 calc(100% - 28px), transparent);
}

.nav-panel {
  position: absolute; left: 12px; right: 12px; z-index: 39; margin: 0 auto; max-width: 1100px;
  background: var(--panel); box-shadow: var(--shadow-3); border-radius: var(--r-lg);
  padding: 20px 24px 22px; border: 1px solid var(--hairline-2);
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-panel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; }
.nav-panel-head {
  margin: 0 0 8px; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel a {
  display: block; padding: 6px 10px; margin-left: -10px; border-radius: var(--r);
  color: var(--mute); font: 500 var(--fs-3) var(--body);
}
.nav-panel a { min-height: 32px; box-sizing: border-box; display: flex; align-items: center; }
.nav-panel a:hover { color: var(--ink); background: var(--pill-hover); }
.nav-panel a[aria-current="page"] { color: var(--gold); background: var(--pill-on); }
.nav-panel a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.nav-panel a.nav-panel-sub { color: var(--ink); font-weight: 600; }
.nav-panel ul.nav-panel-inner { padding-left: 12px; margin: 2px 0 4px; border-left: 1px solid var(--hairline-2); }
.nav-panel ul.nav-panel-inner a { font-size: var(--fs-2); padding: 4px 10px; margin-left: 0; }
html.nav-panel-open #view { opacity: .35; }

@media (prefers-reduced-motion: no-preference) {
  .nav-caret { transition: transform 150ms ease; }
  html.nav-d #view, html.nav-eh #view { transition: opacity 150ms ease; }
  .nav-panel { animation: nav-drop 160ms var(--ease) both; }
  @keyframes nav-drop { from { opacity: 0; transform: translateY(-4px); } }
}

@media (min-width: 641px) and (max-width: 900px) {
  html.nav-d .top .omni, html.nav-eh .top .omni { padding: 0 8px; }
}

@media (max-width: 640px) {
  html.nav-d .top .brand, html.nav-eh .top .brand { order: 0; font-size: var(--fs-3); padding: 12px 8px 12px 14px; }
  html.nav-d .top .omni, html.nav-eh .top .omni { order: 1; flex: 1 1 0; position: static; padding: 0; margin: 0; }
  html.nav-d .top .omni input, html.nav-eh .top .omni input { width: 100%; padding: 9px 14px; margin: 0 4px; }
  html.nav-d .omni-results, html.nav-eh .omni-results { left: 8px; right: 8px; translate: none; }
  html.nav-d .top .acct, html.nav-eh .top .acct { order: 2; width: 42px; }
  .subnav .nav-switch-pin > button.nav-switch { padding: 6px 10px 6px 12px; }
  .subnav > .nav-switch-pin { padding-right: 6px; }
  .nav-switch-name.is-long, .nav-name-long { display: none; }
  .nav-switch-name.is-short, .nav-name-short { display: inline; }
  .nav-panel { left: 8px; right: 8px; padding: 16px 16px 18px; }
  .nav-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .subnav.nav-d-inner button { min-height: 32px; }
}
@media (pointer: coarse) {
  .subnav .nav-switch-pin > button.nav-switch { padding-top: 10px; padding-bottom: 10px; }
}


.eh-icon {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.eh-bar, .eh-tabbar, .eh-scrim, .eh-sheet { display: none; }
html.nav-eh .eh-sheet[hidden], html.nav-eh .eh-scrim[hidden], .eh-menu[hidden] { display: none; }
html.nav-eh .chrome > .eh-row { flex: 1 1 100%; }
html.nav-eh .chrome.is-tierlist > .eh-row { margin-bottom: 2px; }

html.nav-eh .top .omni { flex: 1 1 auto; justify-content: flex-end; margin: 0; padding: 0 4px 0 12px; }
html.nav-eh .omni-results { left: auto; right: 6px; translate: none; }
@media (min-width: 641px) {
  html.nav-eh .top .omni { flex: 0 1 auto; margin-left: auto; }
  html.nav-eh .top .omni input { width: min(340px, calc(100vw - 1075px)); max-width: 100%; flex: 0 1 auto; }
}
html.nav-eh .top .omni-kbd { position: absolute; right: 20px; top: 50%; translate: 0 -50%; margin: 0; }
@media (min-width: 961px) and (pointer: fine) {
  html.nav-eh .top .omni input { padding-right: 44px; }
}

html.nav-eh .eh-bar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.eh-dd { position: relative; }
.eh-tile {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; box-sizing: border-box;
  padding: 0 8px 0 12px; border: 0; border-radius: var(--r-lg); cursor: pointer;
  background: linear-gradient(var(--hairline-2), var(--hairline-2)), var(--panel);
  box-shadow: 0 0 0 1px var(--hairline-2) inset, var(--shadow-card);
  color: var(--mute); font: 600 var(--fs-3) var(--body); white-space: nowrap;
}
.eh-tile:hover, .eh-tile[aria-expanded="true"] {
  color: var(--ink); background: linear-gradient(var(--lift), var(--lift)), var(--panel);
}
.eh-tile[aria-current] {
  color: var(--gold); background: linear-gradient(var(--pill-on), var(--pill-on)), var(--panel);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent) inset, var(--shadow-card);
}
.eh-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.eh-tile-link { padding-right: 12px; text-decoration: none; }
.eh-tile-link, .eh-tab { position: relative; }
.eh-new {
  position: absolute; top: -3px; right: -14px; z-index: 1;
  display: inline-flex; align-items: center; height: 17px; padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; overflow: hidden; pointer-events: none;
  font: 700 var(--fs-1)/1 var(--body); letter-spacing: .02em; color: var(--bg); background: var(--gold);
  box-shadow: 0 0 0 2px var(--panel), 0 3px 10px color-mix(in srgb, var(--gold) 40%, transparent);
}
.eh-new::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.7) 50%, transparent 75%);
}
@media (prefers-reduced-motion: no-preference) {
  .eh-new::after { animation: eh-new-sheen 4s ease-in-out 1s infinite; }
}
@keyframes eh-new-sheen { 0% { transform: translateX(-130%); } 30%, 100% { transform: translateX(130%); } }
@media (min-width: 961px) {
  .eh-tile-link:has(.eh-new) { padding-right: 26px; }
}
.eh-tile-short { display: none; }
.eh-chev { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .6; }
.eh-tile[aria-expanded="true"] .eh-chev { transform: rotate(180deg); }

.eh-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 45; min-width: 232px;
  padding: 8px 8px 10px; background: var(--panel); border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
}
.eh-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.eh-menu-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px;
  font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.eh-menu-head .eh-icon { width: 16px; height: 16px; }
.eh-menu-head:hover { color: var(--ink); }
.eh-menu-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--r); }

.eh-list, .eh-inner { list-style: none; margin: 0; padding: 0; }
.eh-list a {
  display: flex; align-items: center; min-height: 34px; box-sizing: border-box; padding: 6px 10px;
  border-radius: var(--r); color: var(--mute); font: 500 var(--fs-3) var(--body); white-space: nowrap;
}
.eh-list a:hover { color: var(--ink); background: var(--pill-hover); }
.eh-list a[aria-current="page"] { color: var(--gold); background: var(--pill-on); }
.eh-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.eh-list a.eh-sub { color: var(--ink); font-weight: 600; }
.eh-inner { padding-left: 12px; margin: 0 0 4px; }
.eh-list li.eh-divide { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.eh-inner a { font-size: var(--fs-2); min-height: 32px; }
.eh-list a.is-featured, .subnav button.is-featured { font-weight: 700; }
.eh-list a.is-featured:not([aria-current="page"]), .subnav button.is-featured:not([aria-pressed="true"]) { color: var(--ink); }
.eh-list a.is-featured::after, .subnav button.is-featured::after {
  content: ""; flex: none; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--gold);
}
.subnav button.is-featured::after { display: inline-block; vertical-align: middle; margin-left: 6px; translate: 0 -1px; }

@media (min-width: 641px) and (max-width: 1179px) {
  .eh-tile-name.has-short { display: none; }
  .eh-tile-short { display: inline; }
  .eh-tile { padding: 0 11px; }
  .eh-chev { display: none; }
  html.nav-eh .top .omni input { width: min(260px, calc(100vw - 865px)); }
}
@media (min-width: 641px) and (max-width: 960px) {
  html.nav-eh .top .brand { padding-left: 16px; padding-right: 10px; }
  html.nav-eh .omni-kbd { display: none; }
  html.nav-eh .eh-bar { gap: 4px; }
  .eh-tile {
    flex-direction: column; justify-content: center; gap: 2px; height: 44px; min-width: 52px;
    padding: 0 6px; font-size: var(--fs-1);
  }
  .eh-tile .eh-icon { width: 17px; height: 17px; }
  .eh-chev { display: none; }
  .eh-new { top: -1px; right: -22px; }
  html.nav-eh .top .omni { padding: 0 4px 0 8px; }
  html.nav-eh .top .omni input { width: min(260px, calc(100vw - 617px)); }
}

@media (max-width: 640px) {
  html.nav-eh .eh-bar { display: none; }
  html.nav-eh .top .omni { padding: 0; }
  html.nav-eh .top .omni input { width: min(340px, 100%); }
  html.nav-eh .omni-results { left: 8px; right: 8px; }
  html.nav-eh body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  html.nav-eh .eh-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 62;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: var(--panel); box-shadow: 0 -1px 0 var(--hairline-2), 0 -8px 18px -14px rgba(0,0,0,.9);
  }
  .eh-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 50px; padding: 4px 0; border: 0; border-radius: var(--r); background: none; cursor: pointer;
    color: var(--dim); font: 600 var(--fs-1) var(--body); text-decoration: none;
  }
  .eh-tab .eh-icon { width: 22px; height: 22px; }
  .eh-tab .eh-new { top: -14px; right: auto; left: 50%; translate: -50% 0; }
  .eh-tab[aria-current], .eh-tab.is-on, .eh-tab[aria-expanded="true"] { color: var(--gold); background: var(--pill-on); }
  .eh-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  html.nav-eh .eh-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
  html.nav-eh .eh-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 78vh;
    overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0 8px;
    padding: 14px max(12px, env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: var(--panel); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3);
  }
  .eh-sheet-head {
    display: flex; align-items: center; gap: 9px; margin: 0 0 4px; padding: 0 10px;
    font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  }
  .eh-sheet-head .eh-icon { width: 17px; height: 17px; }
  .eh-sheet-head[aria-current] { color: var(--gold); }
  .eh-sheet .eh-list a { white-space: normal; min-height: 44px; }
  html.eh-sheet-open { overflow: hidden; }
  html.nav-eh .to-top { bottom: calc(74px + env(safe-area-inset-bottom)); }
  html.nav-eh .ad-anchor { bottom: calc(62px + env(safe-area-inset-bottom)); }
  html.nav-eh .pv2-jump { bottom: calc(76px + env(safe-area-inset-bottom)); }
  html.nav-eh .toast[popover] { inset: auto auto calc(84px + env(safe-area-inset-bottom)) 50%; }
  html.nav-eh .wr-strat .wr-strat-row { bottom: calc(62px + env(safe-area-inset-bottom)); padding-bottom: 8px; }
  html.nav-eh body:has(.wr-strat) { padding-bottom: calc(126px + env(safe-area-inset-bottom)); }
  html.nav-eh body:has(.wr-strat) .to-top { bottom: calc(136px + env(safe-area-inset-bottom)); }
  html.nav-eh body.has-ad-anchor .to-top { bottom: calc(136px + env(safe-area-inset-bottom)); }
  html.nav-eh body.has-ad-anchor footer { padding-bottom: 116px; }
  html.nav-eh .wr-strat .wr-strat-row .ws-more-area[open] { bottom: calc(126px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: no-preference) {
  .eh-chev { transition: transform 150ms ease; }
  .eh-menu { animation: nav-drop 150ms var(--ease) both; }
  .eh-sheet { animation: eh-rise 200ms var(--ease) both; }
  @keyframes eh-rise { from { transform: translateY(100%); } }
}

.wr2-band, .wr2-hero, .wr2-stats, .wr2-tabs { max-width: 960px; }
.wr2-band {
  --war-hub-accent: var(--gold);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px;
  margin: 16px var(--gutter) 0; padding: 16px 18px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--war-hub-accent) 14%, transparent) 0%, transparent 60%),
    var(--panel);
  box-shadow: var(--shadow-card);
}
.wr2-band .crest { filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.wr2-id { display: grid; gap: 2px; min-width: 0; }
.wr2-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 var(--fs-1) var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
}
.wr2-kicker .war-home { width: 26px; height: 26px; }
.wr2-beta {
  padding: 1px 8px; border-radius: 999px; background: var(--pill-on); color: var(--gold);
  font: 600 var(--fs-1) var(--body); letter-spacing: .04em; text-transform: none; text-decoration: none;
}
.wr2-beta:hover { color: var(--ink); }
.wr2-name {
  margin: 0; font: 700 var(--fs-5)/1.05 var(--cond); text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr2-name a { color: var(--ink); text-decoration: none; }
.wr2-name a:hover { color: var(--gold); }
.wr2-record { margin: 0; font: 500 var(--fs-3) var(--body); color: var(--mute); }
.wr2-places { display: flex; gap: 8px; }
.wr2-places .war-hub-place {
  padding: 8px 14px; background: var(--row); border: 1px solid var(--rule);
}

.wr2-hero { margin: 12px var(--gutter) 0; }
.wr2-hero-kicker {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.war-hub-live.wr2-live {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "k k go" "sides s go" "bar bar go";
  gap: 6px 16px; padding: 16px 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--war-hub-accent, var(--gold)) 16%, var(--panel)), var(--panel));
  box-shadow: 0 0 0 1px var(--rule), var(--shadow-card);
}
.war-hub-live.wr2-live:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, var(--rule)), var(--shadow-card); }
.wr2-live .war-hub-live-go { color: var(--gold); }
.wr2-live .war-hub-live-meta { grid-column: 1 / -2; }
.wr2-live-sides { grid-area: sides; display: flex; align-items: center; gap: 12px; min-width: 0; }
.wr2-live-names { display: grid; gap: 1px; min-width: 0; }
.wr2-live-us, .wr2-live-them {
  font: 700 var(--fs-4)/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr2-live-them { color: var(--mute); }
.wr2-live-v { font: 600 var(--fs-1) var(--body); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.wr2-live-crest.is-blank { width: 44px; height: 44px; border-radius: 50%; background: var(--row); flex: none; }
.wr2-live .war-hub-live-score { font-size: var(--fs-5); }
.wr2-live-bar {
  grid-area: bar; display: block; height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--bad) 55%, var(--row));
}
.wr2-live-bar[hidden] { display: none; }
.wr2-live-bar-us { display: block; height: 100%; width: 50%; background: var(--good); transition: width .4s var(--ease); }
.wr2-next {
  display: grid; gap: 4px; padding: 18px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: var(--panel); box-shadow: 0 0 0 1px var(--rule), var(--shadow-card);
}
.wr2-next:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, var(--rule)), var(--shadow-card); }
.wr2-next-title { font: 700 var(--fs-4)/1.2 var(--body); }
.wr2-next-when { font: var(--fs-3) var(--body); color: var(--mute); }

.wr2-tabs { margin: 18px var(--gutter) 0; }
.wr2-tabbar { margin-bottom: 10px; }
.wr2-panel > * { margin-left: 0; margin-right: 0; }
.wr2-panel .war-hub-leaders, .wr2-panel .war-hub-roster, .wr2-panel .wrs-wrap { padding-left: 0; padding-right: 0; border: 0; }
.wr2-history-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; }
.wr2-wars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wr2-war {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 52px 28px; align-items: center; column-gap: 12px;
  padding: 9px 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
}
a.wr2-war:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
a.wr2-war:hover .wr2-war-name { color: var(--gold); }
.wr2-war-crest.is-blank { width: 32px; height: 32px; border-radius: 50%; background: var(--row); }
.wr2-war-who { display: grid; gap: 1px; min-width: 0; }
.wr2-war-name { font: 500 var(--fs-3)/1.25 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr2-war-sub { display: flex; gap: 8px; min-width: 0; overflow: hidden; font: var(--fs-2) var(--body); color: var(--mute); }
.wr2-war-sub:empty { display: none; }
.wr2-war-subdate { display: none; color: var(--ink); white-space: nowrap; }
.wr2-war-subtext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr2-war-score { font: 600 var(--fs-3) var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--mute); }
.wr2-war-score .hi { color: var(--good); }
.wr2-war-score .lo { color: var(--bad); }
.wr2-dash { margin: 0 4px; color: var(--dim); }
.wr2-war-date { font: var(--fs-2) var(--body); color: var(--mute); text-align: right; white-space: nowrap; }
.wr2-war.is-b .wr2-war-name { color: var(--mute); }

.wr2-stats {
  margin: 12px var(--gutter) 0; padding: 14px 16px; display: grid; gap: 10px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
}
.wr2-stats-title {
  margin: 0; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.wr2-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.wr2-tile {
  display: grid; gap: 2px; padding: 9px 12px; border-radius: var(--r); background: var(--row); border: 1px solid var(--rule);
}
.wr2-tile b { font: 600 var(--fs-4)/1.15 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.wr2-tile b.hi { color: var(--good); }
.wr2-tile b.lo { color: var(--bad); }
.wr2-tile.is-tier b { font-family: var(--body); }
.wr2-tile span { display: inline-flex; align-items: center; gap: 4px; font: var(--fs-2) var(--body); color: var(--mute); }

.wr2-next .war-phase { margin: 6px 0 0; padding: 0; border: 0; background: none; box-shadow: none; }

.wr2-war .wr-gift { width: 28px; height: 28px; }
.wr2-war-gift.is-blank { width: 28px; }

@media (max-width: 640px) {
  .wr2-band { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .wr2-band .crest { width: 52px; height: 52px; }
  .wr2-name { white-space: normal; overflow-wrap: anywhere; }
  .wr2-places { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .wr2-places .war-hub-place { min-width: 0; padding: 8px 10px; justify-content: start; }
  .wr2-places .war-hub-place-label { white-space: normal; letter-spacing: .08em; }
  .war-hub-live.wr2-live { grid-template-areas: "k k go" "sides sides go" "s s go" "bar bar bar"; padding: 14px; }
  .wr2-live .war-hub-live-meta { grid-column: 1 / -1; }
  .wr2-war { grid-template-columns: 28px minmax(0, 1fr) auto auto 28px; padding: 8px 10px; column-gap: 8px; }
  .wr2-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wr2-tile { padding: 8px 10px; min-width: 0; }
  .wr2-tile b { font-size: var(--fs-3); overflow-wrap: anywhere; }
  .wr2-tiles { grid-auto-flow: dense; }
  .wr2-tile.is-power { grid-column: 1 / -1; }
  .wr2-war .crest { width: 28px; height: 28px; }
  .wr2-war-date { display: none; }
  .wr2-war-subdate { display: inline; }
}

.al2-band {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 20px;
  margin: 16px var(--gutter) 0; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card);
}
.al2-band .crest { filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.al2-id { display: grid; gap: 4px; min-width: 0; }
.al2-kicker {
  font: 700 var(--fs-1) var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
.al2-id .title-row { margin: 0; }
.al2-id .title-row h1 { margin: 0; overflow-wrap: anywhere; }
.al2-desc { margin: 0; color: var(--mute); max-width: 640px; white-space: pre-line; font: var(--fs-3)/1.4 var(--body); }
.al2-pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.al2-pill {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: var(--pill-on); font: var(--fs-2) var(--body); color: var(--mute);
}
.al2-pill b { font: 600 var(--fs-3) var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.al2-pill b.hi { color: var(--good); }
.al2-pill b.lo { color: var(--bad); }
.al2-band .board-badges { grid-column: 1 / -1; margin-top: 0; }

.al2-role {
  display: inline-flex; padding: 1px 8px; border-radius: 999px; font: 600 var(--fs-1) var(--body);
  background: var(--hairline-2); color: var(--ink);
}
.al2-role.is-leader { background: var(--pill-on); color: var(--gold); }
.cellflex .al2-role { flex: none; }

.al2-card {
  margin: 12px var(--gutter) 0; padding: 12px 0 10px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card); overflow: hidden;
}
.al2-card > .section-title { margin-top: 0; }
.al2-card.territory-move { padding: 0; }

.al2-mcards { display: none; list-style: none; margin: 0 var(--gutter); padding: 0; gap: 6px; }
.al2-mcard {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
}
.al2-mcard-pic { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.al2-mcard-who { display: grid; gap: 2px; min-width: 0; }
.al2-mcard-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.al2-mcard-name { font: 500 var(--fs-3)/1.25 var(--body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al2-mcard-sub { font: var(--fs-2) var(--body); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al2-mcard-fig { display: grid; justify-items: end; gap: 1px; }
.al2-mcard-fig b { font: 600 var(--fs-3) var(--mono); font-variant-numeric: tabular-nums; }
.al2-mcard-delta { font: var(--fs-2) var(--mono); }
.al2-mcard-delta.hi { color: var(--good); }
.al2-mcard-delta.lo { color: var(--bad); }
.al2-mcard-delta.support { color: var(--dim); }

@media (max-width: 640px) {
  .al2-band { padding: 14px; gap: 10px 14px; }
  .al2-band .crest { width: 60px; height: 60px; }
  .al2-members .al2-mcards { display: grid; }
  .al2-card { margin-left: 0; margin-right: 0; border-radius: 0; }
  .al2-members > :not(.section-title):not(.al2-mcards) { display: none; }
}
@media (max-width: 430px) {
  .al2-id .title-row h1 { font-size: clamp(var(--fs-4), 6vw, var(--fs-5)); }
}

.cl-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left;
  cursor: pointer;
}
.cl-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm); }
.cl-chev {
  flex: none; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: translateY(-2px) rotate(45deg);
  opacity: 0;
}
.cl-toggle:focus-visible .cl-chev { opacity: 1; }
@media (hover: hover) {
  .cl-toggle:hover .cl-chev { opacity: 1; }
}
.cl-hidden { display: none !important; }
#view h2.cl-head.is-collapsed {
  margin: 6px var(--gutter); padding: 0; flex: 1 1 100%; align-self: stretch;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel);
}
.cl-head.is-collapsed > :not(.cl-toggle) { display: none; }
.cl-head.is-collapsed > .cl-toggle {
  width: 100%; min-height: 44px; padding: 10px 14px; justify-content: space-between;
}
.cl-head.is-collapsed .cl-chev { transform: rotate(-45deg); }
.cl-head.is-collapsed > .cl-toggle:hover { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .cl-chev { transition: opacity 120ms ease, transform 160ms ease; }
}

.wr-ptable > .wrap {
  max-width: 760px; max-height: min(64vh, 560px); overflow: auto;
  margin: 0 var(--gutter); border: 1px solid var(--rule); border-radius: var(--r-lg);
  overscroll-behavior: contain;
}
.wr-ptable > .wrap > table { min-width: 0; }
.wr-ptable thead th { position: sticky; top: 0; z-index: 1; padding: 7px 10px; }
.wr-ptable tbody td { padding: 4px 10px; }

.wrg { position: relative; isolation: isolate; min-height: 520px; overflow: hidden; }
.wrg:has(.wr2-band) { max-width: calc(960px + 2 * var(--gutter)); }
.wrg-preview {
  max-height: 760px; overflow: hidden; pointer-events: none; user-select: none;
  filter: blur(7px) saturate(.85); opacity: .75;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.wrg-card {
  position: absolute; z-index: 1; top: 96px; left: 50%; transform: translateX(-50%);
  width: min(400px, calc(100% - 2 * var(--gutter)));
  display: grid; justify-items: center; gap: 10px; padding: 22px 20px; text-align: center;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
#view .wrg-title { margin: 0; font: 700 var(--fs-5) var(--cond); letter-spacing: .02em; }
.wrg-line { margin: 0; color: var(--mute); font-size: var(--fs-3); }
.wrg-go { margin-top: 4px; }
@media (max-width: 560px) {
  .wrg-card { top: 64px; padding: 18px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .wrg-card { animation: wrg-in 220ms ease-out both; }
  @keyframes wrg-in { from { opacity: 0; } to { opacity: 1; } }
}

.ag { padding: 8px var(--gutter) 28px; max-width: 1180px; }
.ag-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ag-card { padding: 0; gap: 0; }
.ag-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 80%, #090B12), color-mix(in srgb, var(--a2) 75%, #090B12)); }
.ag-art.is-plain { aspect-ratio: auto; height: 72px; }
.ag-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-stage { position: absolute; left: 50%; bottom: 4%; width: 78%; max-height: 46%; object-fit: contain;
  transform: translateX(-50%); filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.ag-head { display: grid; gap: 6px; padding: 12px 14px 0; }
#view .ag-name { margin: 0; font: 700 var(--fs-5)/1.15 var(--cond); }
.ag-boost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ag-k { font-family: var(--cond); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ag-bonus { padding: 2px 9px; border-radius: 999px; background: var(--pill-on);
  font: 600 var(--fs-2)/1.4 var(--mono);
  color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
.ag-body { display: grid; gap: 8px; padding: 10px 14px 0; }
.ag-effect { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r); background: var(--row); }
.ag-effect p { margin: 0; font-size: var(--fs-3); color: var(--ink); }
.ag-lore { margin: 0; font-size: var(--fs-2); color: var(--mute); font-style: italic; }
.ag-body .art-credit { margin: 0; }
.ag-card .dl-figs { padding-block: 12px; }
.ag-more { display: inline-flex; margin: 10px 0 4px; padding: 6px 14px; border-radius: 999px;
  background: var(--pill-on); color: var(--ink); font-size: var(--fs-2); font-weight: 600; text-decoration: none; }
.ag-more:hover, .ag-more:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }

.ag .ag-wrap { margin-inline: 0; }

.dm { padding: 8px var(--gutter) 28px; max-width: 1180px; display: grid; gap: 14px; }
.dm-scope { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.dm-pill { padding: 6px 14px; border: 0; border-radius: 999px; background: var(--row); color: var(--mute);
  font: 600 var(--fs-2)/1.3 var(--body); cursor: pointer; }
.dm-pill.is-on { background: var(--pill-on); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); }
.dm-pill:focus-visible, .dm-chip:focus-visible, .dm-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dm-pick { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow-card); min-width: 0; }
.dm-search { width: 100%; box-sizing: border-box; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--row); color: var(--ink); font: var(--fs-3)/1.3 var(--body); }
.dm-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.dm-chip { flex: 0 0 auto; scroll-snap-align: start; display: flex; padding: 8px 12px 8px 8px; border: 0;
  border-radius: var(--r-lg); background: var(--row); color: var(--ink); cursor: pointer; text-align: left; }
.dm-chip.is-on { background: var(--pill-on); box-shadow: inset 0 0 0 1px var(--gold); }
.dm-face { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dm-face .thumb, .dm-noart { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; border-radius: var(--r); }
.dm-face.is-big .thumb, .dm-face.is-big .dm-noart { width: 64px; height: 64px; flex-basis: 64px; border-radius: var(--r-lg); }
.dm-face.is-big { gap: 12px; }
.dm-face-t { display: grid; gap: 3px; min-width: 0; }
.dm-name { font: 600 var(--fs-3)/1.2 var(--body); overflow-wrap: anywhere; }
.dm-face.is-big .dm-name { font: 700 var(--fs-5)/1.15 var(--cond); }
.dm-result { display: grid; gap: 14px; min-width: 0; }
.dm-result[aria-busy="true"] { opacity: .6; }
.dm-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px; border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%), var(--panel); }
.dm-lists { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.dm-list { display: grid; gap: 8px; align-content: start; min-width: 0; }
#view .dm-h { margin: 0; font: 700 var(--fs-1)/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.dm-rows { display: grid; gap: 8px; }
.dm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; }
.dm-fig { display: grid; gap: 4px; justify-items: end; min-width: 92px; }
.dm-win { padding: 2px 10px; border-radius: 999px; background: var(--pill-on);
  font: 600 var(--fs-2)/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-row.is-good .dm-win { color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
.dm-row.is-bad .dm-win { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); }
.dm-bar { position: relative; display: block; width: 100%; height: 4px; border-radius: 999px; overflow: hidden; background: var(--row); }
.dm-bar-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--v, 0));
  background: var(--tone, var(--gold)); }
.dm-row.is-good .dm-bar-fill { --tone: var(--good); }
.dm-row.is-bad .dm-bar-fill { --tone: var(--bad); }
.dm-thin { margin: 0; color: var(--dim); font-size: var(--fs-2); }
@media (hover: hover) {
  .dm-row:hover { box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
}
@media (min-width: 720px) {
  .dm-chips { flex-wrap: wrap; overflow: visible; }
}
@media (prefers-reduced-motion: no-preference) {
  .dm-row { animation: rise 320ms cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
}

.h2h-host { display: grid; gap: 14px; padding-top: 8px; max-width: 1180px; }
.h2h-tools { padding-inline: var(--gutter); }
.h2h { display: grid; gap: 14px; min-width: 0; padding: 0 var(--gutter) 28px; }
.h2h-top { display: flex; flex-wrap: wrap; gap: 8px; }
.h2h-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.h2h-pill { padding: 6px 14px; min-height: 32px; border: 0; border-radius: 999px; background: var(--row); color: var(--mute);
  font: 600 var(--fs-2)/1.3 var(--body); cursor: pointer; }
.h2h-pill.is-on { background: var(--pill-on); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); }
.h2h-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.h2h-card { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow-card); min-width: 0; }
.h2h-them { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%), var(--panel); }
.h2h-h-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#view .h2h-h { margin: 0; font: 700 var(--fs-1)/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.h2h-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.h2h-who .thumb { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; object-fit: cover; }
.h2h-who-t { display: grid; gap: 2px; min-width: 0; }
.h2h-who-t strong { font: 700 var(--fs-4)/1.15 var(--cond); overflow-wrap: anywhere; }
.h2h-who-t small { color: var(--mute); font-size: var(--fs-2); }
.h2h-find { margin: 0; }
.h2h-search { width: 100%; box-sizing: border-box; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--row); color: var(--ink); font: var(--fs-3)/1.3 var(--body); }
.h2h-squad { display: flex; flex-wrap: wrap; gap: 6px; }
.h2h-squad .h2h-face { padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--row); }
.h2h-squad .h2h-face .thumb, .h2h-squad .h2h-noart { width: 24px; height: 24px; flex-basis: 24px; }
.h2h-squad .h2h-face-t { display: flex; align-items: center; gap: 6px; }
.h2h-face { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.h2h-face .thumb, .h2h-noart { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.h2h-face-t { display: grid; gap: 3px; min-width: 0; }
.h2h-face-t b { font: 600 var(--fs-3)/1.2 var(--body); overflow-wrap: anywhere; }
.h2h-list { display: grid; gap: 8px; min-width: 0; }
.h2h-cols, .h2h-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.h2h-col { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.h2h-col .thumb, .h2h-col .h2h-noart { width: 28px; height: 28px; object-fit: contain; }
.h2h-col small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); font-size: var(--fs-1); }
.h2h-ball { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.h2h-ball-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.h2h-won { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; background: var(--pill-on);
  font: 600 var(--fs-2)/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h2h-cell { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 40px; padding: 4px 2px;
  border-radius: var(--r); background: var(--row); }
.h2h-cell b { font: 600 var(--fs-3)/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.h2h-cell small { color: var(--mute); font-size: var(--fs-1); line-height: 1; }
.h2h-cell.is-up { background: color-mix(in srgb, var(--good) 16%, var(--row)); }
.h2h-cell.is-up b { color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
.h2h-cell.is-down { background: color-mix(in srgb, var(--bad) 14%, var(--row)); }
.h2h-cell.is-down b { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); }
.h2h-cell.is-few b { color: var(--dim); font: 600 var(--fs-2)/1.1 var(--body); }
.h2h-cell.is-stats { outline: 1px dashed var(--rule); outline-offset: -1px; }
.h2h-cell.is-stats b, .h2h-pick-v.is-stats b { font: 600 var(--fs-2)/1.1 var(--body); }
.h2h-lead { margin: 0; font: 600 var(--fs-3)/1.3 var(--body); }
.h2h-thin { margin: 0; color: var(--dim); font-size: var(--fs-2); }
@media (prefers-reduced-motion: no-preference) {
  .h2h-ball { animation: rise 320ms cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
}
.h2h-cell.is-best { outline: 2px solid var(--gold); outline-offset: -2px; }
.h2h-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.h2h-best, .h2h-bonus { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  font: 600 var(--fs-2)/1.4 var(--body); white-space: nowrap; }
.h2h-best { background: color-mix(in srgb, var(--gold) 20%, var(--row)); color: var(--ink); }
.h2h-bonus { background: var(--row); color: var(--mute); box-shadow: inset 0 0 0 1px var(--rule); }
.h2h-arena-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; max-width: 100%; }
.h2h-arena-pills .h2h-pill { flex: 0 0 auto; }
.h2h-arena-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.h2h-targets { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.h2h-target { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.h2h-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: var(--r); background: var(--row); min-width: 0; }
.h2h-pick .h2h-face .thumb, .h2h-pick .h2h-noart { width: 24px; height: 24px; flex-basis: 24px; }
.h2h-pick .h2h-face-t { display: flex; align-items: center; gap: 6px; }
.h2h-pick-v { display: grid; justify-items: end; gap: 1px; flex: 0 0 auto; }
.h2h-pick-v b { font: 600 var(--fs-3)/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.h2h-pick-v small { color: var(--mute); font-size: var(--fs-1); line-height: 1; }
.h2h-pick-v.is-up b { color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
.h2h-pick-v.is-down b { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); }
@media (min-width: 720px) {
  .h2h-arena-pills { flex-wrap: wrap; overflow: visible; }
}

.lr { position: relative; display: grid; gap: 28px; padding: 0 var(--gutter) 48px; max-width: 1180px; margin-inline: auto; overflow-x: clip; }
.lr-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.lr-hero { position: relative; margin-inline: calc(-1 * var(--gutter)); min-height: clamp(260px, 52vw, 460px);
  display: grid; align-items: end; overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--panel); }
.lr-hero-art { position: absolute; inset: 0; }
.lr-hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lr-hero-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--bg) 92%, transparent) 100%); }
.lr-cast { position: absolute; inset: auto 0 18% 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2vw, 22px); z-index: 1; }
.lr-cast-art { width: clamp(64px, 16vw, 150px); height: auto; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.lr-cast-art:nth-child(odd) { margin-bottom: clamp(8px, 3vw, 28px); }
#view .lr-hero-h { position: relative; z-index: 2; margin: 0; padding: 0 var(--gutter) 18px;
  font: 800 var(--fs-5)/.9 var(--cond); font-size: clamp(44px, 11vw, 96px); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
#view .lr-hero-h.is-plain { padding: 24px 0 0; font-size: var(--fs-5); }

.lr-jumps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.lr-jumps::-webkit-scrollbar { display: none; }
.lr-jump { flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--panel); color: var(--ink);
  font: 600 var(--fs-3)/1.2 var(--body); box-shadow: var(--shadow-card); cursor: pointer; }
.lr-jump:hover, .lr-jump:focus-visible { background: var(--pill-on); }

.lr-sec { display: grid; gap: 18px; scroll-margin-top: 72px; }
.lr-open { position: relative; display: grid; align-items: center; min-height: 128px; padding: 22px 18px;
  border-radius: var(--r-lg); overflow: hidden; background: var(--panel); box-shadow: var(--shadow-card); }
.lr-wash { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: center; gap: 0; opacity: .5; }
.lr-wash-art { height: 140%; width: auto; max-width: 34%; object-fit: cover; margin-left: -6%;
  filter: blur(1px) saturate(1.1); mask-image: linear-gradient(90deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); }
.lr-sec.is-arenas .lr-wash-art { max-width: 40%; margin-left: -12%; }
.lr-sec.is-balls .lr-wash-art { height: 92px; max-width: none; margin-left: -10px; filter: none; }
#view .lr-h { position: relative; margin: 0; font: 800 var(--fs-5)/1 var(--cond); font-size: clamp(34px, 8vw, 60px); letter-spacing: .02em; text-transform: uppercase; }
#view .lr-sub { margin: 6px 0 0; font: 700 var(--fs-4)/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

.lr-story { display: grid; gap: 0; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); overflow: hidden; }
.lr-stage { position: relative; display: grid; place-items: center; min-height: 220px; padding: 18px;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--gold) 14%, var(--row)), var(--row) 70%); }
.lr-glow { position: absolute; left: 50%; bottom: 12%; width: 62%; height: 18%; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); }
.lr-sprite { position: relative; width: min(240px, 70%); height: auto; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.lr-body { display: grid; gap: 12px; padding: 16px 16px 18px; min-width: 0; }
.lr-who { display: grid; gap: 8px; }
#view .lr-title { font: 800 var(--fs-5)/1.05 var(--cond); color: var(--ink); text-decoration: none; }
#view .lr-title:hover { color: var(--gold); }
.lr-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-pill { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--row);
  font: 600 var(--fs-2)/1.5 var(--body); color: var(--mute); }
.lr-pill.is-age { background: var(--pill-on); color: var(--ink); }
.lr-quote { position: relative; margin: 0; padding: 0; }
.lr-quote p { margin: 0; font: 400 var(--fs-3)/1.65 var(--body); color: var(--ink); }
.lr-mark { display: block; width: 30px; height: 22px; margin-bottom: 6px; background: var(--gold); opacity: .8;
  -webkit-mask: var(--lr-q) no-repeat 0 0 / contain; mask: var(--lr-q) no-repeat 0 0 / contain;
  --lr-q: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M0 22V13C0 5 4 1 12 0l1 4c-4 1-6 4-6 8h6v10zm17 0V13c0-8 4-12 12-13l1 4c-4 1-6 4-6 8h6v10z'/%3E%3C/svg%3E"); }
#view .lr-name { color: var(--gold); text-decoration: none; font-weight: 600; }
#view .lr-name:hover { text-decoration: underline; }
.lr-named { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lr-k { font: 700 var(--fs-1)/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-right: 2px; }
.lr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px;
  background: var(--row); color: var(--ink); text-decoration: none; font: 600 var(--fs-2)/1.3 var(--body); }
.lr-chip:hover, .lr-chip:focus-visible { background: var(--pill-on); }
.lr-chip-art { width: 24px; height: 24px; object-fit: contain; }
.lr-credit { margin: 0; }

.lr-arena { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); box-shadow: var(--shadow-card); }
.lr-arena-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.lr-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lr-platform { position: absolute; left: 50%; bottom: 8%; width: 56%; max-height: 34%; object-fit: contain;
  transform: translateX(-50%); filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.lr-arena-cap { display: grid; gap: 10px; padding: 14px 16px 16px; }
.lr-arena-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#view .lr-arena-name { margin: 0; font: 800 var(--fs-5)/1.05 var(--cond); }
.lr-quote.is-arena p { font-size: var(--fs-4); line-height: 1.5; font-style: italic; }

.lr-bosses { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); }
.lr-boss { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 8px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; text-align: center; min-width: 0; }
.lr-boss:hover, .lr-boss:focus-visible { background: color-mix(in srgb, var(--gold) 8%, var(--panel)); }
.lr-boss-art { display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 12%, transparent), transparent); }
.lr-boss-sprite { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.lr-boss-name { font: 700 var(--fs-3)/1.2 var(--cond); overflow-wrap: anywhere; }
.lr-boss-floor { font-size: var(--fs-1); color: var(--mute); }

.lr-region { display: grid; gap: 12px; }
.lr-balls { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lr-ball { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; min-width: 0; }
.lr-ball:hover, .lr-ball:focus-visible { background: color-mix(in srgb, var(--gold) 6%, var(--panel)); }
.lr-ball-art { flex: 0 0 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--row); }
.lr-ball-sprite { width: 48px; height: 48px; object-fit: contain; }
.lr-ball-text { display: grid; gap: 4px; min-width: 0; }
.lr-ball-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lr-ball-name { font: 700 var(--fs-4)/1.2 var(--cond); }
.lr-ball-quote { font-size: var(--fs-2); line-height: 1.5; color: var(--mute); quotes: "\201C" "\201D"; }
.lr-more { justify-self: start; padding: 7px 16px; border: 0; border-radius: 999px; background: var(--pill-on); color: var(--ink);
  font: 600 var(--fs-3)/1.2 var(--body); cursor: pointer; }
.lr-more:hover, .lr-more:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }

.lr-skinballs { display: grid; gap: 18px; }
.lr-skinball { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow-card); min-width: 0; }
.lr-skinball-head { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; justify-self: start; }
.lr-skinball-head:hover .lr-ball-name, .lr-skinball-head:focus-visible .lr-ball-name { color: var(--gold); }
.lr-skins { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.lr-skin { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: var(--r);
  background: var(--row); color: var(--ink); text-decoration: none; min-width: 0; }
.lr-skin:hover, .lr-skin:focus-visible { background: color-mix(in srgb, var(--gold) 8%, var(--row)); }
.lr-skin-art { flex: 0 0 72px; height: 72px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 70%, transparent); }
.lr-skin-sprite { width: 64px; height: 64px; object-fit: contain; }
.lr-skin-name { font: 700 var(--fs-3)/1.25 var(--cond); }
.lr-sec.is-skins .lr-wash-art { height: 92px; max-width: none; margin-left: -10px; filter: none; }

@media (min-width: 760px) {
  .lr-story { grid-template-columns: minmax(240px, 38%) 1fr; }
  .lr-story.is-flip { grid-template-columns: 1fr minmax(240px, 38%); }
  .lr-story.is-flip .lr-stage { order: 2; }
  .lr-stage { min-height: 300px; }
  .lr-arena-art { aspect-ratio: 16 / 9; }
  .lr-body { align-content: center; padding: 22px 24px; }
  .lr-arena-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 24px 20px;
    background: linear-gradient(180deg, transparent, rgba(5,7,11,.82) 55%); }
  .lr-arena-cap, .lr-arena-cap .lr-arena-name, .lr-arena-cap .lr-quote p { color: #F2F4F8; }
  .lr-arena-cap .ac-k { color: #C9D0DB; }
  .lr-platform { bottom: 36%; width: 34%; }
}

@media (prefers-reduced-motion: no-preference) {
  .lr.is-moving .lr-rise { opacity: 0; transform: translateY(26px);
    transition: opacity 640ms cubic-bezier(.22,.9,.3,1) var(--d, 0ms), transform 640ms cubic-bezier(.22,.9,.3,1) var(--d, 0ms); }
  .lr.is-moving .lr-rise.is-in { opacity: 1; transform: none; }
  .lr.is-moving .lr-arena .lr-scene { transform: scale(1.08); transition: transform 2400ms cubic-bezier(.2,.7,.2,1); }
  .lr.is-moving .lr-arena.is-in .lr-scene { transform: scale(1); }
  .lr.is-moving .lr-sprite, .lr.is-moving .lr-cast-art { animation: lr-drift 6s ease-in-out infinite alternate; }
  .lr.is-moving .lr-cast-art { animation-delay: calc(var(--k, 0) * -1.3s); }
  .lr.is-moving .lr-story.is-flip .lr-sprite { animation-delay: -3s; }
  .lr.is-moving .lr-open .lr-wash-art { transform: translateX(18px); transition: transform 1600ms cubic-bezier(.2,.7,.2,1); }
  .lr.is-moving .lr-open.is-in .lr-wash-art { transform: none; }
  .lr-boss .lr-boss-sprite { transition: transform 220ms ease; }
  .lr-boss:hover .lr-boss-sprite { transform: translateY(-4px) scale(1.04); }
}
@keyframes lr-drift { from { transform: translateY(0); } to { transform: translateY(-10px); } }

.dv-crest { position: relative; display: inline-flex; align-items: center; justify-content: center;
            flex: none; isolation: isolate; }
.dv-col-foot .dv-crest { height: 38px; align-items: flex-end; }
.dv-col-foot .dv-crest .div-crest { width: calc(14px + var(--rank, 1) * 3px); height: calc(14px + var(--rank, 1) * 3px); }
.dv-head .dv-crest .div-crest { width: calc(24px + var(--rank, 1) * 4px); height: calc((24px + var(--rank, 1) * 4px) * 0.82); }
.dv-dist-line { bottom: 74px; }
.dv-dist-key { margin-top: 8px; font: var(--fs-1) var(--mono); color: var(--dim); text-align: center; }
.dv-label .dv-unit { display: block; font: var(--fs-1) var(--body); letter-spacing: 0; text-transform: none; color: var(--dim); }
@media (max-width: 560px) {
  .dv-label .dv-unit { display: inline; margin-left: 6px; }
  .dv-col-name { letter-spacing: 0; text-transform: none; }
}

.ss-unit, .pr2-row-side > small { color: var(--dim); font: var(--fs-1) var(--body); }

.dv-col.is-top .dv-crest::after, .dv-block.is-top .dv-crest::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  inset: -14%; pointer-events: none;
  background: conic-gradient(from 0deg, #C58BFF, #7FE3FF, #FF9AD5, #C58BFF);
  filter: blur(9px); opacity: .45;
}
.dv-block.is-top .dv-head { position: relative; isolation: isolate; }
.dv-block.is-top { overflow-x: clip; }
.dv-block.is-top .dv-head::after {
  content: ""; position: absolute; z-index: -1; inset: -10px -14px; pointer-events: none;
  border-radius: var(--r-lg);
  background:
    radial-gradient(40% 90% at 10% 50%, color-mix(in srgb, #C58BFF 22%, transparent), transparent 72%),
    radial-gradient(40% 80% at 34% 50%, color-mix(in srgb, #7FE3FF 10%, transparent), transparent 75%);
  opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
  .dv-col.is-top .dv-crest::after, .dv-block.is-top .dv-crest::after {
    animation: dv-halo 9s linear infinite, dv-breathe 3.6s ease-in-out infinite alternate;
  }
  .dv-block.is-top .dv-head::after { animation: dv-breathe 4.2s ease-in-out infinite alternate; }
}
@keyframes dv-halo { to { rotate: 360deg; } }
@keyframes dv-breathe { from { opacity: .3; scale: .94; } to { opacity: .65; scale: 1.04; } }

.ty-ball { display: grid; gap: 8px; align-content: start; }
.ty-ball-search { display: grid; gap: 6px; }
.ty-ball-search[hidden] { display: none; }
.ty-ball-q { width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 10px; background: var(--row);
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r); font: inherit; }
.ty-ball-list { display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.ty-ball-card, .ty-ball-opt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ty-ball-card { background: var(--row); border-radius: var(--r); padding: 6px 8px; }
.ty-ball-opt { background: var(--row); border: 1px solid transparent; border-radius: var(--r); padding: 5px 8px;
  cursor: pointer; color: var(--ink); font: inherit; min-height: 44px; text-align: left; }
.ty-ball-opt:hover, .ty-ball-opt:focus-visible { border-color: var(--gold); }
.ty-ball-art { width: 40px; height: 40px; flex: none; object-fit: contain; }
.ty-ball-opt .ty-ball-art { width: 32px; height: 32px; }
.ty-ball-words { display: grid; gap: 3px; min-width: 0; flex: 1; }
.ty-ball-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ty-ball-words .chip { font-size: var(--fs-1); }
.ty-ball-change { flex: none; min-height: 36px; }
.ty-ball .ty-item { background: transparent; border: 0; padding: 0; }
.ty-ball .mu-attack { margin-top: 0; }
.ty-item-none { justify-content: flex-start; color: var(--mute); }
.ty-h2h { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 12px; margin-top: 10px; }
.ty-h2h-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ty-h2h-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--row);
  border-radius: var(--r); font-size: var(--fs-3); }
.ty-h2h-label { flex: 1; min-width: 0; color: var(--mute); }
.ty-h2h-value { font-variant-numeric: tabular-nums; }
.ty-h2h-scope { margin: -4px 0 0; color: var(--mute); font-size: var(--fs-1); }
.ty-h2h-row.is-few .ty-h2h-value { color: var(--dim); font-weight: 400; }

.pc { display: grid; gap: 10px; min-width: 0; max-width: 720px; padding: 0 var(--gutter) 24px; }
.pc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#view .pc-title { margin: 0; font: 700 var(--fs-4)/1.1 var(--cond); letter-spacing: .02em; }
.pc-pills { display: inline-flex; gap: 6px; }
.pc-pill { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--row); color: var(--mute);
  font: 600 var(--fs-3)/1.2 var(--body); cursor: pointer; }
.pc-pill.is-on { background: var(--pill-on); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); }
.pc-pill:focus-visible, .pc-opt:focus-visible, .pc-arena:focus-visible, .pc-arena-chip:focus-visible, .pc-go:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; }
.pc-card { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow-card); min-width: 0; }
.pc-them { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%), var(--panel); }
.pc-h-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#view .pc-h { margin: 0; color: var(--mute); font: 600 var(--fs-2)/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; }
.pc-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc-who .thumb { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; object-fit: cover; }
.pc-who-t { display: grid; gap: 2px; min-width: 0; }
.pc-who-t strong { font: 700 var(--fs-4)/1.15 var(--cond); overflow-wrap: anywhere; }
.pc-who-t small { color: var(--mute); font-size: var(--fs-1); }
.pc-find { margin: 0; }
.pc-search { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--row); color: var(--ink); font: var(--fs-3)/1.3 var(--body); }
.pc-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pc-mini { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 6px 2px; border-radius: var(--r); background: var(--row); }
.pc-mini .thumb, .pc-mini .pc-noart { width: 36px; height: 36px; object-fit: contain; }
.pc-mini small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); color: var(--mute); }
.pc-noart { display: inline-block; border-radius: 50%; background: var(--row); }
.pc-thin { margin: 0; color: var(--dim); font-size: var(--fs-2); }

.pc-odds { justify-items: start; }
.pc-odds .pc-h-row { width: 100%; }
.pc-chance b { font: 700 var(--fs-4)/1 var(--mono); font-variant-numeric: tabular-nums; }
.pc-chance.is-big b { font-size: var(--fs-5); }
.pc-chance.is-up b { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.pc-chance.is-down b { color: color-mix(in srgb, var(--bad) 75%, var(--ink)); }
.pc-chance.is-stats b { font-family: var(--body); }
.pc-chance.is-few b { color: var(--dim); font: 600 var(--fs-2)/1.2 var(--body); }
.pc-odds-pair { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: end; column-gap: 28px; }
.pc-odds-fig { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.pc-odds-fig > small { color: var(--mute); font: 600 var(--fs-1)/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; }
.pc-arena-odds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
.pc-arena-odd { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px;
  align-items: center; min-width: 0; padding: 6px; border-radius: var(--r); background: var(--row); }
.pc-arena-odd .pc-arena-img { grid-row: span 2; width: 28px; height: 28px; aspect-ratio: 1; border-radius: 50%; }
.pc-arena-odd small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); color: var(--mute); }
.pc-arena-odd .pc-chance b { font-size: var(--fs-3); }
.pc-arena-odd .pc-chance.is-few b { font-size: var(--fs-1); }

.pc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; min-width: 0; }
.pc-row-r { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pc-cp { font: 600 var(--fs-1)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--mute); }
.pc-face { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pc-face .thumb, .pc-face .pc-noart { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; }
.pc-face-t { display: grid; gap: 3px; min-width: 0; }
.pc-face-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-3)/1.2 var(--body); }
.pc-face.is-small .thumb, .pc-face.is-small .pc-noart { width: 32px; height: 32px; flex-basis: 32px; }
.pc-face.is-small .pc-face-t b { font-size: var(--fs-1); }

.pc-item { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%; background: var(--row); }
.pc-item .thumb { width: 20px; height: 20px; object-fit: contain; }
.pc-item.is-hot { background: color-mix(in srgb, var(--gold) 30%, var(--panel));
  box-shadow: 0 0 0 2px var(--gold), 0 0 10px 2px color-mix(in srgb, var(--gold) 70%, transparent); }
@keyframes pc-glow { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 16px 5px color-mix(in srgb, var(--gold) 55%, transparent); } }

.pc-cues { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 40px; flex: 0 0 40px; }
.pc-cue { display: grid; gap: 1px; }
.pc-cue-bar { display: block; height: 4px; border-radius: var(--r-sm); background: var(--row); position: relative; overflow: hidden; }
.pc-cue-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); border-radius: var(--r-sm); }
.pc-cue.is-def .pc-cue-bar::after { background: var(--band-d); }
.pc-cue.is-off .pc-cue-bar::after { background: var(--acc-amber); }
.pc-cue-bar.is-mid::after { opacity: .7; }
.pc-cue-bar.is-lo::after { opacity: .35; }

.pc-go { width: 100%; min-height: 48px; justify-content: center; font: 700 var(--fs-4)/1.2 var(--body); }

.pc-arenas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-arena { display: grid; gap: 6px; padding: 6px; min-height: 96px; border: 0; border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow-card); color: var(--ink); text-align: left; cursor: pointer; }
.pc-arena.is-on { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--gold); }
.pc-arena-img { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.pc-arena-img.is-blank { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--row)), var(--row)); }
.pc-arena-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; padding: 0 2px 2px; }
.pc-arena-t b { font: 600 var(--fs-3)/1.2 var(--body); }

.pc-battle-top { position: sticky; top: var(--sticky-top); z-index: 3; padding: 6px 0; background: var(--bg); }
.pc-arena-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border: 0;
  border-radius: 999px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-card); font: 600 var(--fs-3)/1.2 var(--body); cursor: pointer; }
.pc-arena-chip .pc-arena-img { width: 32px; height: 32px; aspect-ratio: 1; border-radius: 50%; }
.pc-tiles { display: grid; gap: 6px; }
.pc-tile { display: grid; gap: 0; padding: 6px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.pc-tile.is-up { background: color-mix(in srgb, var(--good) 18%, var(--panel));
  box-shadow: var(--shadow-card), inset 0 0 0 1px color-mix(in srgb, var(--good) 55%, transparent); }
.pc-tile.is-down { background: color-mix(in srgb, var(--bad) 16%, var(--panel));
  box-shadow: var(--shadow-card), inset 0 0 0 1px color-mix(in srgb, var(--bad) 50%, transparent); }
.pc-tile-head { display: grid; grid-template-columns: auto 40px minmax(0, 1fr) auto; grid-template-rows: auto auto;
  align-items: center; column-gap: 6px; row-gap: 2px; min-width: 0; padding: 0 2px 6px; }
.pc-tile-head > .pc-side { grid-column: 1; grid-row: 1; }
.pc-tile-head > .pc-pos { grid-column: 1; grid-row: 2; justify-self: center; }
.pc-tile-head > .pc-opt-art { grid-column: 2; grid-row: 1 / span 2; }
.pc-tile-name { grid-column: 3; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 var(--fs-3)/1.2 var(--body); }
.pc-tile-head > .chips { grid-column: 3; grid-row: 2; justify-self: start; flex-wrap: nowrap; gap: 2px; min-width: 0; overflow: hidden; }
.pc-tile-head > .pc-cues { grid-column: 4; grid-row: 1 / span 2; }
.pc-tile-you { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px;
  padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.pc-tile.is-first { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--gold); }
.pc-tile.is-likely .pc-tile-head { opacity: .75; }
.pc-side { flex: 0 0 auto; padding: 1px 6px; border-radius: 999px; font: 700 var(--fs-1)/1.4 var(--body);
  text-transform: uppercase; letter-spacing: .04em; }
.pc-side.is-them { background: color-mix(in srgb, var(--acc-violet) 28%, var(--row)); color: var(--ink); }
.pc-side.is-you { background: color-mix(in srgb, var(--gold) 26%, var(--row)); color: var(--ink); }
.pc-tile-you .pc-side { writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 1px; }
.pc-pos { display: inline-grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--row); color: var(--mute); font: 700 var(--fs-1)/1 var(--mono); }

.pc-mini.is-known { border: 0; color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); }
.pc-mini.is-known small { color: var(--ink); }
.pc-mini.is-likely { opacity: .6; outline: 1px dashed var(--rule); outline-offset: -1px; background: transparent; }
.pc-mini.is-editing, .pc-row.is-editing { box-shadow: inset 0 0 0 2px var(--gold); }
.pc-mini .pc-pos { width: 18px; height: 18px; flex-basis: 18px; }
button.pc-row { width: 100%; padding: 4px 6px; border: 0; border-radius: var(--r); background: none; color: var(--ink);
  text-align: left; cursor: pointer; font: inherit; }
button.pc-row:focus-visible, .pc-mini.is-known:focus-visible, .pc-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pc-row-l { display: inline-flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.pc-order { display: grid; gap: 4px; }
.pc-slot { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; border-radius: var(--r);
  background: var(--panel); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pc-slot + .pc-slot { border-top: 1px solid var(--hairline); border-radius: 0 0 var(--r) var(--r); }
.pc-slot > .pc-row { flex: 1 1 auto; }
.pc-grip { display: grid; place-items: center; flex: 0 0 36px; width: 36px; min-height: 44px; padding: 0; border: 0;
  border-radius: var(--r); background: none; color: var(--dim); cursor: grab; touch-action: none; }
.pc-grip-dots { display: block; width: 10px; height: 16px; opacity: .8;
  background: radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 0 / 5px 5.4px; }
.pc-grip:hover { color: var(--ink); }
@media (max-width: 360px) {
  .pc-slot .pc-grip { flex-basis: 32px; width: 32px; }
  .pc-slot .pc-row { gap: 4px; padding: 4px 2px; }
  .pc-slot .pc-row-l, .pc-slot .pc-row-r, .pc-slot .pc-face { gap: 4px; }
  .pc-slot .pc-face .thumb, .pc-slot .pc-face .pc-noart { width: 30px; height: 30px; flex-basis: 30px; }
  .pc-slot .pc-cues { width: 30px; flex-basis: 30px; }
}
.pc-grip:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pc-slot.is-grabbed, .pc-slot.is-target { box-shadow: inset 0 0 0 2px var(--gold); }
.pc-slot.is-grabbed .pc-grip { color: var(--gold); }
.pc-slot.is-dragging { z-index: 2; background: var(--pill-on); box-shadow: var(--shadow-card), inset 0 0 0 2px var(--gold); }
.pc-slot.is-dragging .pc-grip { cursor: grabbing; }
@media (prefers-reduced-motion: no-preference) { .pc-order.is-sorting .pc-slot:not(.is-dragging) { transition: transform .16s ease; } }
.pc-picker { display: grid; gap: 6px; }
.pc-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.pc-pick { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center;
  min-height: 44px; padding: 4px 8px 4px 4px; border: 0; border-radius: var(--r); background: var(--row); color: var(--ink);
  text-align: left; cursor: pointer; }
.pc-pick .thumb, .pc-pick .pc-noart { grid-row: span 2; width: 32px; height: 32px; object-fit: contain; }
.pc-pick b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-1)/1.25 var(--body); }
.pc-pick small { font: 600 var(--fs-1)/1.2 var(--mono); color: var(--mute); }

.pc-headline { margin-left: auto; }
.pc-headline b { font-size: var(--fs-4); }
.pc-head-call { margin-left: 8px; color: var(--ink); font: 700 var(--fs-2)/1 var(--body); }
.pc-head-call.is-up { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.pc-head-call.is-down { color: color-mix(in srgb, var(--bad) 75%, var(--ink)); }
.pc-arena .pc-chance { padding: 0 2px 2px; }
.pc-opening { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px;
  padding: 8px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card), inset 0 0 0 2px var(--gold); }
.pc-opening.is-up { background: color-mix(in srgb, var(--good) 18%, var(--panel)); }
.pc-opening.is-down { background: color-mix(in srgb, var(--bad) 16%, var(--panel)); }
.pc-opening-side { display: grid; justify-items: center; gap: 3px; min-width: 0; }
.pc-opening-side b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--fs-3)/1.2 var(--body); }
.pc-opening-mid { display: grid; justify-items: center; gap: 2px; }
.pc-opening-mid small { color: var(--mute); font: 700 var(--fs-1)/1 var(--mono); }
.pc-opening-mid b { font: 700 var(--fs-4)/1 var(--mono); }
.pc-opening.is-stats .pc-opening-mid b { font-family: var(--body); }
.pc-opening.is-up .pc-opening-mid b { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.pc-opening.is-down .pc-opening-mid b { color: color-mix(in srgb, var(--bad) 75%, var(--ink)); }
.pc-opt-art.is-big { width: 56px; height: 52px; }
.pc-opt-art.is-big > .thumb, .pc-opt-art.is-big > .pc-noart { width: 48px; height: 48px; }
.pc-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.pc-opt { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 64px; padding: 4px 2px;
  border: 0; border-radius: var(--r); background: var(--row); color: var(--ink); cursor: pointer; }
.pc-opt.is-up { background: color-mix(in srgb, var(--good) 22%, var(--row)); }
.pc-opt.is-down { background: color-mix(in srgb, var(--bad) 18%, var(--row)); }
.pc-opt.is-stats { outline: 1px dashed var(--rule); outline-offset: -1px; }
.pc-opt.is-picked { box-shadow: inset 0 0 0 2px var(--gold); }
.pc-opt-art { position: relative; display: inline-grid; place-items: center; width: 40px; height: 34px; }
.pc-opt-art > .thumb, .pc-opt-art > .pc-noart { width: 32px; height: 32px; object-fit: contain; }
.pc-opt-art .pc-item { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; flex-basis: 20px; }
.pc-opt-art .pc-item .thumb { width: 16px; height: 16px; }
.pc-opt-t { display: grid; justify-items: center; gap: 0; max-width: 100%; }
.pc-opt-t b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-1)/1.25 var(--body); }
.pc-opt-t small { font: 600 var(--fs-1)/1.2 var(--mono); color: var(--mute); }
.pc-opt.is-up .pc-opt-t small { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.pc-opt.is-down .pc-opt-t small { color: color-mix(in srgb, var(--bad) 75%, var(--ink)); }
.pc-opt-t small.pc-opt-call { color: var(--ink); font-family: var(--body); white-space: normal; text-align: center; line-height: 1.15; }
.pc-opt .pc-opt-t small.pc-measured, .pc-opening-mid small.pc-measured { color: var(--mute); font: 500 var(--fs-1)/1.2 var(--body); }
.pc-opening.is-stats .pc-opening-mid b { text-align: center; }
.pc-opt .pc-cues { width: 44px; flex-basis: 44px; }
.pc-tile-head > .pc-tile-cp { grid-column: 3; grid-row: 2; justify-self: end; }
.pc-opt .pc-opt-t small.pc-cp, .pc-opt.is-up .pc-opt-t small.pc-cp, .pc-opt.is-down .pc-opt-t small.pc-cp { color: var(--mute); font: 600 var(--fs-1)/1.2 var(--mono); }
.pc-opening-side .pc-cp { line-height: 1.2; }
@media (min-width: 560px) {
  .pc-arena-odds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .pc-tiles { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .pc-item.is-hot { animation: pc-glow 1.6s ease-in-out infinite; }
}
.pc-odds .pc-h-row .share-btn.pc-report-share { margin-left: auto; min-height: 36px; }
.pr-head { gap: 6px; }
.pr-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.pr-pair .pc-who:last-child { justify-content: flex-end; text-align: right; }
.pr-pair .pc-who-t { justify-items: start; }
.pr-pair .pc-who:last-child .pc-who-t { justify-items: end; }
.pr-vs { color: var(--mute); font: 700 var(--fs-2)/1 var(--cond); text-transform: uppercase; }
.pr-where { color: var(--mute); font-size: var(--fs-1); }
.pc-arena-odd.is-on { box-shadow: inset 0 0 0 2px var(--gold); border-radius: var(--r); }
.pr span.pc-opt { cursor: default; }
.pr .pc-tile-head .pc-cp { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
.pr > .pc-go { display: flex; align-items: center; text-decoration: none; }
.pr-expired { margin: 0; font: 700 var(--fs-4)/1.3 var(--cond); }
@media (max-width: 360px) {
  .pr-pair .pc-who .thumb { display: none; }
}

.lrc { --lrc: #F5B000; --lrc-ink: color-mix(in srgb, var(--lrc) 72%, #fff);
  display: flex; margin: 4px var(--gutter) 12px; }
.lrc[data-rarity="common"]   { --lrc: #7C8798; }
.lrc[data-rarity="uncommon"] { --lrc: #4E9E6A; }
.lrc[data-rarity="rare"]     { --lrc: #3E7FD0; }
.lrc[data-rarity="epic"]     { --lrc: #9B5FD0; }
:root[data-theme="light"] .lrc { --lrc-ink: color-mix(in srgb, var(--lrc) 62%, #000); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lrc { --lrc-ink: color-mix(in srgb, var(--lrc) 62%, #000); } }
.lrc .lrc-tile { flex-direction: row; align-items: center; gap: 12px; max-width: 100%; box-sizing: border-box;
  padding: 8px 16px 8px 10px; border-radius: var(--r-lg); }
.lrc[data-rarity=""] .lrc-tile { padding-left: 16px; }
.lrc:not(.is-red) .lrc-tile { border-color: color-mix(in srgb, var(--lrc) 55%, var(--rule));
  background: linear-gradient(135deg, color-mix(in srgb, var(--lrc) 18%, transparent), color-mix(in srgb, var(--lrc) 5%, transparent));
  box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--lrc) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.06); }
.lrc.is-red:not(.is-fire) .lrc-tile { border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,.26), rgba(220,38,38,.10));
  box-shadow: 0 0 22px -6px rgba(239,68,68,.6); }
.lrc.is-red:not(.is-fire) .lrc-digits { color: #ff5d52; }
:root[data-theme="light"] .lrc.is-red:not(.is-fire) .lrc-digits { color: #c0261c; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lrc.is-red:not(.is-fire) .lrc-digits { color: #c0261c; } }
.lrc-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--lrc) 20%, transparent); border: 1px solid color-mix(in srgb, var(--lrc) 45%, transparent); }
.lrc-badge[hidden] { display: none; }
.lrc .lrc-gem { width: 12px; height: 12px; --rar: var(--lrc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lrc) 28%, transparent), 0 0 10px color-mix(in srgb, var(--lrc) 70%, transparent); }
.lrc-name { font: 700 var(--fs-2) var(--cond); line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--lrc-ink); }
.lrc-clock { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lrc .lrc-label { font-size: var(--fs-1); letter-spacing: .12em; }
.lrc .lrc-digits { font-size: clamp(20px, 6vw, 26px); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrc:not(.is-red) .lrc-digits { color: var(--lrc-ink); }
.lrc-part + .lrc-part { margin-left: .3em; }
.lrc-u { font-size: .6em; margin-left: 1px; opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  .lrc .lrc-tile { transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
}
@media (max-width: 380px) {
  .lrc .lrc-tile { gap: 10px; padding-right: 12px; }
  .lrc-badge { padding: 5px 9px 5px 8px; }
}

.ac-pill i { color: var(--mute); }
.al2-pill b.hi { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.wnote-tag { color: color-mix(in srgb, var(--wnote-c, var(--gold)) 85%, var(--ink)); }
@media (pointer: coarse) {
  .ad-link { position: relative; }
  .ad-link::after { content: ""; position: absolute; inset: -4px 0; border-radius: 999px; }
  .dm-pill { position: relative; }
  .dm-pill::after { content: ""; position: absolute; inset: -3px 0; border-radius: 999px; }
  .eq-filter { min-height: 32px; }
  .eq-name { padding: 7px 0; margin: -7px 0; }
  .eqb-top .eqb-ally > a { padding: 2px 0 13px; margin: -2px 0 -13px; }
}

:root { --chip-ink-2: #AEB6C3; --chip-fill-2: 10%; --chip-edge-2: 32%; }
:root[data-theme="light"] { --chip-ink-2: #555E6C; --chip-fill-2: 5%; --chip-edge-2: 30%; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --chip-ink-2: #555E6C; --chip-fill-2: 5%; --chip-edge-2: 30%; }
}
.chip.is-secondary {
  color: var(--chip-ink-2);
  background: color-mix(in srgb, var(--c, #555) var(--chip-fill-2), var(--chip-base));
  border-color: color-mix(in srgb, var(--c, #555) var(--chip-edge-2), var(--chip-base));
}
.chips .chip.is-secondary:hover { color: var(--chip-ink); }

.info { position: relative; }
.info::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }

.mm-history th.stars, .mm-history td.stars { width: 1%; white-space: nowrap; }
@media (max-width: 640px) {
  .mm-history th.stars, .mm-history td.stars { padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 640px) {
  .wr-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "a b" "score score" "tug tug" "live tools" "line share" "strat strat";
    row-gap: 6px;
  }
  .wr-band .wr-hero-side .war-side-name { overflow-wrap: normal; word-break: normal; }
}

@media (max-width: 640px) {
  .to-top {
    width: 24px; height: 34px; right: 0;
    border-right: 0; border-radius: var(--r) 0 0 var(--r);
  }
  html.nav-eh .to-top { bottom: calc(68px + env(safe-area-inset-bottom)); }
}

@media (pointer: coarse) {
  .whf-pod-name, .whf-pod-ally { padding-block: 8px; margin-block: -3px; }
  .wrc-card .wrt-main > a { position: relative; z-index: 1; padding-block: 7px; margin-block: -7px; }
  .whl-more { position: relative; }
  .whl-more::after { content: ""; position: absolute; inset: -5px 0; }
  .wpod-toggle { position: relative; }
  .wpod-toggle::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
  .war-room-signin-go { min-height: 32px; }
  .wr-link { position: relative; }
  .wr-link::after { content: ""; position: absolute; inset: -9px 0; }
  .effect-term { position: relative; }
  .effect-term::after { content: ""; position: absolute; inset: -8px -2px; }
  .first-clear-crew { row-gap: 0; margin-top: 3px; }
  .first-clear-crew > * { padding-block: 7px; }
  .ag-more { min-height: 32px; align-items: center; }
}

.tpp-trigger {
  position: relative; display: inline-flex; align-items: center;
  padding: 0; margin: 0; border: 0; background: transparent; color: inherit;
  font: inherit; cursor: pointer; border-radius: var(--r-sm);
}
.tpp-trigger::after { content: ""; position: absolute; inset: -7px -4px; }
.tpp-trigger:hover .chip, .tpp-link:hover .chip { filter: brightness(1.15); }
.tpp-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

dialog.tpp {
  margin: auto; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-lg);
  width: min(720px, calc(100vw - 32px)); max-height: min(82vh, 760px);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-3); overflow: hidden;
}
dialog.tpp::backdrop { background: var(--scrim); }
.tpp-sheet { display: flex; flex-direction: column; max-height: inherit; }
.tpp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 10px;
}
.tpp-title { display: flex; align-items: center; gap: 10px; min-width: 0; font: 700 var(--fs-4)/1.2 var(--body); }
.tpp-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpp-close {
  flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--row); color: var(--mute); font: 600 var(--fs-4)/1 var(--body); cursor: pointer;
}
.tpp-close:hover, .tpp-close:focus-visible { color: var(--gold); border-color: var(--gold); }
.tpp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 12px; border-bottom: 1px solid var(--rule); }
.tpp-scope { font-size: var(--fs-1); color: var(--mute); }
.tpp-pill {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; margin-left: auto;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--row);
  color: var(--gold); font-size: var(--fs-2); font-weight: 600; text-decoration: none;
}
.tpp-pill:hover, .tpp-pill:focus-visible { border-color: var(--gold); }
.tpp-body { overflow: auto; padding: 14px 16px 18px; overscroll-behavior: contain; }
.tpp-empty { color: var(--mute); font-size: var(--fs-3); padding: 18px 0; text-align: center; }
.tpp-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.tpp-tile {
  display: grid; justify-items: center; gap: 6px; height: 100%; min-height: 32px;
  padding: 12px 10px; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--row); color: var(--ink); text-decoration: none; text-align: center;
}
.tpp-tile:hover, .tpp-tile:focus-visible { border-color: var(--gold); }
.tpp-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tpp-art { display: grid; place-items: center; width: 72px; height: 72px; }
.tpp-art .thumb { width: 72px; height: 72px; object-fit: contain; }
.tpp-name { font-size: var(--fs-3); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tpp-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.tpp-rarity {
  --rar: #7C8798; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-1); color: var(--ink);
  background: color-mix(in srgb, var(--rar) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent);
}
.tpp-rarity.is-uncommon  { --rar: #4E9E6A; }
.tpp-rarity.is-rare      { --rar: #3E7FD0; }
.tpp-rarity.is-epic      { --rar: #9B5FD0; }
.tpp-rarity.is-legendary { --rar: #D9A23B; }
.tpp-rarity.is-mythical  { --rar: #D4585E; }
.tpp-rate { font: 600 var(--fs-2) var(--mono); color: var(--ink); }
.tpp-rate.is-thin { font: var(--fs-1) var(--body); color: var(--dim); }
@media (max-width: 560px) {
  dialog.tpp {
    position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%;
    max-height: 88vh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tpp-head { padding-top: 18px; }
  .tpp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tpp-art, .tpp-art .thumb { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.tpp[open] { animation: tpp-in 200ms var(--ease) both; }
}
@keyframes tpp-in { from { transform: translateY(16px); opacity: 0; } }


.pr2-move.is-up, .pr2-pill.is-up { color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
.pr2-move.is-down, .pr2-pill.is-down { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); }
tbody tr.rank-1:not(.thin-xs) td.wr.hi, tbody tr.rank-2:not(.thin-xs) td.wr.hi, tbody tr.rank-3:not(.thin-xs) td.wr.hi { color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
tbody tr.rank-1:not(.thin-xs) td.wr.lo, tbody tr.rank-2:not(.thin-xs) td.wr.lo, tbody tr.rank-3:not(.thin-xs) td.wr.lo { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); }
.whf-crow.is-gold .whf-fig small { color: var(--mute); }
.whf-crow .whf-pill.is-new { color: color-mix(in srgb, var(--medal-gold) 70%, var(--ink)); }
.tc-grid { grid-template-columns: minmax(0, 1fr); }
.lr-sec:focus { outline: none; }
@media (pointer: coarse) {
  .lr-jump, .lr-chip { position: relative; }
  .lr-jump::after, .lr-chip::after { content: ""; position: absolute; inset: -3px 0; border-radius: 999px; }
  #view .lr-title { padding: 2px 0; margin: -2px 0; }
  .rh-boss-line > .rh-boss, .rd-run-title > .rh-boss { padding: 6px 0; margin: -6px 0; }
  .pv2-switch-btn, .wsb-fx, .wr-refresh-btn { position: relative; }
  .pv2-switch-btn::after, .wsb-fx::after, .wr-refresh-btn::after { content: ""; position: absolute; inset: -4px 0; border-radius: 999px; }
}

.hl { display: grid; gap: 12px; margin-top: 18px; min-width: 0; }
.hl-grid { display: grid; gap: 12px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.hl-card { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card); }
.hl-card .dm-row { background: var(--row); box-shadow: none; }
#view .hl-h { margin: 0; font: 700 var(--fs-1)/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.hl-split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--row); }
.hl-split-a { flex: 0 1 0; background: var(--gold); }
.hl-split-w { flex: 0 1 0; background: color-mix(in srgb, var(--bad) 75%, var(--panel)); }
.hl-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--row);
  font: 600 var(--fs-2)/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.hl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.hl-pill.is-w .hl-dot { background: color-mix(in srgb, var(--bad) 75%, var(--panel)); }
.hl-rounds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; }
.hl-round { display: grid; gap: 4px; justify-items: center; }
.hl-round-v { font: 600 var(--fs-2)/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.hl-round-l { font-size: var(--fs-1); color: var(--dim); white-space: nowrap; }
.hl-stem { position: relative; display: block; width: 100%; max-width: 44px; height: 72px; border-radius: var(--r); overflow: hidden;
  background: var(--row); }
.hl-stem-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: bottom; transform: scaleY(var(--v, 0));
  background: var(--gold); }

.wwt { padding: 8px var(--gutter) 4px; }
.wwt-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 10px; }
.wwt-title, .wwt-sub {
  margin: 0; font: 700 var(--fs-2) var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center;
}
.wwt > .wwt-sub-head:first-child { justify-content: flex-start; gap: 0; }
.wwt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.wwt-match, .wwt-player {
  --wa: var(--gold); --wb: var(--gold);
  position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-sm);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--rule);
}
.wwt-match {
  display: flex; flex-direction: column;
  background:
    linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent), color-mix(in srgb, var(--ink) 14%, transparent)) 0 4px / 100% 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent), color-mix(in srgb, var(--ink) 14%, transparent)) 0 calc(100% - 4px) / 100% 1px no-repeat,
    linear-gradient(90deg, var(--wa) 50%, var(--wb) 50%) top / 100% 4px no-repeat,
    linear-gradient(90deg, var(--wa) 50%, var(--wb) 50%) bottom / 100% 4px no-repeat,
    linear-gradient(103deg, color-mix(in srgb, var(--wa) 12%, var(--panel)) 0 calc(50% - 1px),
      color-mix(in srgb, var(--ink) 18%, var(--panel)) calc(50% - 1px) calc(50% + 1px),
      color-mix(in srgb, var(--wb) 12%, var(--panel)) calc(50% + 1px));
}
.wwt-match-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; padding: 6px 12px;
  background: color-mix(in srgb, var(--ink) 6%, var(--panel));
  font: 700 var(--fs-1) var(--mono); text-transform: uppercase; letter-spacing: .1em;
}
.wwt-power-k, .wwt-k { color: var(--mute); font-size: var(--fs-1); }
.wwt-match-head .wwt-power-k { font: inherit; }
.wwt-power { font: 600 var(--fs-2) var(--mono); color: var(--ink); letter-spacing: .04em; }
.wwt-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; padding: 12px 12px 6px; }
.wwt-vs-word {
  padding: 4px 6px; border-radius: var(--r-sm); transform: skewX(-12deg);
  background: var(--ink); color: var(--panel); font: 700 var(--fs-2) var(--cond); text-transform: uppercase; letter-spacing: .06em;
}
.wwt-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wwt-side-top { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.wwt-crest { flex: none; }
.wwt-side .wwt-crest { width: 44px; height: 44px; --size: 44px; }
.wwt-vs > .wwt-side:last-child { align-items: flex-end; text-align: right; }
.wwt-vs > .wwt-side:last-child .wwt-side-top { flex-direction: row-reverse; }
.wwt-vs > .wwt-side:last-child .wwt-who, .wwt-vs > .wwt-side:last-child .wwt-lead { align-items: flex-end; }
.wwt-vs > .wwt-side:last-child .wwt-form { justify-content: flex-end; }
.wwt-side.is-pick .wwt-side-top::after { content: "\25B6" / ""; flex: none; color: var(--gold); font: 700 var(--fs-2)/1 var(--body); }
.wwt-vs > .wwt-side:last-child.is-pick .wwt-side-top::after { content: "\25C0" / ""; }
.wwt-dot {
  --size: 40px; --dot: var(--mute); display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;
  background: color-mix(in srgb, var(--dot) 30%, var(--panel)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dot) 65%, var(--ink));
  color: var(--ink); font: 700 calc(var(--size) * .42)/1 var(--cond);
}
.wwt-who { display: flex; flex-direction: column; min-width: 0; }
.wwt-name {
  max-width: 100%; font: 700 var(--fs-4)/1.05 var(--cond); text-transform: uppercase; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wwt-tier { color: var(--mute); font: 600 var(--fs-1) var(--mono); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wwt-form { display: flex; gap: 3px; flex-wrap: wrap; }
.wwt-chip {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border-radius: var(--r-sm); transform: skewX(-12deg);
  font: 700 var(--fs-1)/1 var(--mono); color: var(--ink);
}
.wwt-chip.is-w { background: color-mix(in srgb, var(--good) 55%, var(--panel)); }
.wwt-chip.is-l { background: color-mix(in srgb, var(--bad) 45%, var(--panel)); }
.wwt-chip.is-d { background: var(--lift); box-shadow: inset 0 0 0 1px var(--rule); }
.wwt-none { color: var(--mute); font-size: var(--fs-1); }
.wwt-lead { display: flex; flex-direction: column; min-width: 0; max-width: 100%; font-size: var(--fs-2); }
.wwt-lead a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wwt-meter {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 3.2em; align-items: center; gap: 8px;
  padding: 4px 12px 8px; font: 600 var(--fs-2) var(--mono); color: var(--ink);
}
.wwt-meter-b { text-align: right; }
.wwt-meter-bar {
  position: relative; height: 8px; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(90deg, var(--wa) calc(var(--a) * 100%), var(--wb) calc(var(--a) * 100%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
}
.wwt-meter-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100% - 1px); width: 2px; background: var(--panel); }
.wwt-meter.is-toss .wwt-meter-bar { background: var(--lift); }
.wwt-meet { padding: 0 12px 8px; text-align: center; color: var(--mute); font: 600 var(--fs-1) var(--mono); }
.wwt-score { display: flex; justify-content: center; align-items: baseline; gap: 10px; padding: 0 12px 6px;
  font: 700 var(--fs-3) var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.wwt-score-dash { color: var(--mute); font-weight: 600; }
.wwt.is-strip { padding-bottom: 8px; }
.wwc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.wwc-head .wwt-title { margin-right: auto; }
.wwc-nav { display: inline-flex; align-items: center; gap: 6px; }
.wwc-arrow {
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer; display: grid; place-items: center;
  font: 700 var(--fs-4)/1 var(--body); color: var(--ink); background: transparent; border: 1px solid var(--rule);
}
.wwc-pause {
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer; display: grid; place-items: center;
  color: var(--mute); background: transparent; border: 0;
}
.wwc-pause::after {
  content: ""; width: 8px; height: 10px;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px);
}
.wwc-pause[aria-pressed="true"]::after { width: 9px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.wwc-pause:hover, .wwc-pause:focus-visible { color: var(--ink); }
.wwc-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: max(440px, calc((100% - 20px) / 3)); gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.wwc-track::-webkit-scrollbar { display: none; }
@media (max-width: 360px) {
  .wwc-head { column-gap: 4px; }
}
@media (max-width: 640px) {
  .wwc-track { grid-auto-columns: 88%; }
  .wwc-arrow { display: none; }
  .wwc-match .wwc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 2px; }
  .wwc-match .wwc-mid { grid-column: 1 / -1; grid-row: 2; min-height: 28px; }
}
.wwc-slide { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.wwc-match {
  --wa: var(--gold); --wb: var(--gold);
  position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-sm);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--rule);
  background:
    linear-gradient(90deg, var(--wa) 50%, var(--wb) 50%) top / 100% 3px no-repeat,
    linear-gradient(103deg, color-mix(in srgb, var(--wa) 12%, var(--panel)) 0 calc(50% - 1px),
      color-mix(in srgb, var(--ink) 18%, var(--panel)) calc(50% - 1px) calc(50% + 1px),
      color-mix(in srgb, var(--wb) 12%, var(--panel)) calc(50% + 1px));
}
.wwc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.wwc-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wwc-side.is-b { flex-direction: row-reverse; text-align: right; }
.wwc-side .wwt-crest { width: 24px; height: 24px; --size: 24px; }
.wwc-name {
  min-width: 0; overflow: hidden; overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  font: 700 var(--fs-3)/1.15 var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--ink);
}
.wwc-player .wwc-name {
  display: block; white-space: nowrap; -webkit-line-clamp: none; line-clamp: none;
  min-height: 32px; padding-top: calc(32px - 1.15em);
}
.wwc-side.is-pick .wwc-name { color: var(--gold); }
.wwc-mid { display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 4px; }
.wwc-mid .wwt-score { padding: 0; gap: 6px; font-size: var(--fs-3); }
.wwc-vs { font: 700 var(--fs-1) var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }
.wwc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.wwc-foot .wwt-pick { padding: 0; border-top: 0; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.wwc-foot .wwt-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: var(--fs-2); }
.wwc-meet { color: var(--mute); font: 600 var(--fs-1) var(--mono); }
.wwc-slide .wwt-yours { padding: 6px 0 0; gap: 6px; }
.wwc-slide .wwt-pick-btn { min-height: 32px; padding: 2px 10px; font-size: var(--fs-1); }
.wwc-votes { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wwc-votes .wwt-k { font: 700 var(--fs-1) var(--mono); text-transform: uppercase; letter-spacing: .08em; flex: none; }
.wwc-votes-meter {
  flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 2px;
  font: 600 var(--fs-1) var(--mono); color: var(--ink); font-variant-numeric: tabular-nums;
}
.wwc-votes-b { text-align: right; }
.wwc-votes-bar {
  position: relative; height: 6px; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(90deg, var(--wa) calc(var(--a) * 100%), var(--wb) calc(var(--a) * 100%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
}
.wwc-votes-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100% - 1px); width: 2px; background: var(--panel); }
.wwc-votes-n { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; color: var(--mute); font-weight: 600; }
.wwc-votes-few, .wwc-votes-total { color: var(--mute); font: 600 var(--fs-1) var(--mono); }
.wwc-votes-total { margin-left: auto; }
.wwc-player {
  --wa: var(--gold);
  position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-sm);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--rule);
  flex-direction: row; align-items: center; gap: 10px;
  background:
    linear-gradient(90deg, var(--wa), var(--wa)) bottom / 100% 3px no-repeat,
    linear-gradient(103deg, color-mix(in srgb, var(--wa) 12%, var(--panel)) 0 62%, var(--panel) 62%);
}
.whf-ball.wwc-art {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--wa) 22%, var(--row)); box-shadow: inset 0 0 0 1px var(--rule);
}
.wwc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wwc-player { padding-block: 4px; }
.wwc-player .wwc-who { gap: 0; }
.wwc-player .wwt-player-ally { min-height: 32px; align-items: flex-start; padding-top: 2px; }
.wwc-player .wwt-led { flex: none; }
.wwc-player .wwt-led b { font-size: var(--fs-3); }
.wwt-pick, .wwt-yours { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--rule); }
.wwt-yours { padding-bottom: 13px; }
.wwt-pick .wwt-k, .wwt-yours .wwt-k { font: 700 var(--fs-1) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.wwt-pick-name { font: 700 var(--fs-3) var(--cond); text-transform: uppercase; letter-spacing: .02em; }
.wwt-pill, .wsb-pick, .wsb-verdict {
  display: inline-flex; align-items: center; white-space: nowrap; width: fit-content;
  font: 700 var(--fs-1) var(--mono); letter-spacing: .04em; padding: 2px 8px; border-radius: 999px;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.wwt-pill { border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 12%, var(--panel)); }
.wwt-pill.is-toss { color: var(--mute); background: color-mix(in srgb, var(--ink) 6%, var(--panel)); }
.wwt-yours-btns { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.wwt-pick-btn {
  min-height: 32px; max-width: 100%; padding: 4px 12px; border-radius: var(--r-sm); cursor: pointer;
  font: 600 var(--fs-2) var(--body); color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, var(--panel)); border: 1px solid var(--rule);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wwt-pick-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.wwt-pick-btn:disabled { cursor: default; color: var(--mute); border-style: dashed; }
.wwt-players { margin-top: 6px; }
.wwt-tabs { display: inline-flex; gap: 6px; }
.wwt-tab {
  min-height: 32px; padding: 4px 14px; border-radius: 999px; cursor: pointer;
  font: 600 var(--fs-2) var(--body); color: var(--mute); background: transparent; border: 1px solid var(--rule);
}
.wwt-tab[aria-selected="true"] { color: var(--ink); background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.wwt-player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.wwt-player {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
  column-gap: 10px; row-gap: 2px; padding: 8px 12px 11px 8px; text-align: left;
  background:
    linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent), color-mix(in srgb, var(--ink) 14%, transparent)) 0 calc(100% - 3px) / 100% 1px no-repeat,
    linear-gradient(90deg, var(--wa), var(--wa)) bottom / 100% 3px no-repeat,
    linear-gradient(103deg, color-mix(in srgb, var(--wa) 12%, var(--panel)) 0 calc(62% - 1px),
      color-mix(in srgb, var(--ink) 18%, var(--panel)) calc(62% - 1px) calc(62% + 1px), var(--panel) calc(62% + 1px));
}
.whf-ball.wwt-art {
  grid-row: 1 / 3; width: 64px; height: 64px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--wa) 22%, var(--row)); box-shadow: inset 0 0 0 1px var(--rule);
}
.wwt-player-name {
  grid-column: 2; align-self: end; min-width: 0; max-width: 100%;
  font: 700 var(--fs-4)/1.05 var(--cond); text-transform: uppercase; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wwt-player-ally { grid-column: 2; align-self: start; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: var(--fs-1); color: var(--mute); }
.wwt-player-ally span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wwt-player-ally .wwt-dot { --size: 20px; }
.wwt-led { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.wwt-led b { font: 600 var(--fs-4)/1 var(--mono); color: var(--ink); }
.wwt-led small { color: var(--mute); font: 600 var(--fs-1) var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.wsb-pick { margin-top: 3px; padding: 1px 7px; }
.wsb-verdict.is-upset { color: var(--ink); background: color-mix(in srgb, var(--bad) 45%, transparent); letter-spacing: .1em; }
@media (prefers-reduced-motion: no-preference) {
  .wwt-meter-bar { animation: wwt-fill .9s ease .2s both; }
  .wwt-match, .wwt-player { transition: transform .2s ease, box-shadow .2s ease; }
  .wwt-match:hover, .wwt-player:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--rule), 0 10px 24px -14px color-mix(in srgb, var(--wa) 70%, transparent);
  }
}
@keyframes wwt-fill { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 640px) {
  .wwt { padding: 6px var(--gutter) 2px; }
  .wwt-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wwt-player-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wwt-vs { gap: 4px; padding-inline: 10px; }
  .wwt-side .wwt-crest { width: 34px; height: 34px; --size: 34px; }
  .wwt-name { font-size: var(--fs-3); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: normal; }
}
@media (max-width: 480px) {
  .wwt-side-top { flex-wrap: wrap; row-gap: 4px; }
  .wwt-side-top > .wwt-who { order: 1; flex: 1 0 100%; }
}

.duel-toggle {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--dim); cursor: pointer; font: 600 var(--fs-3)/1 var(--body);
}
.duel-toggle-chev { display: block; transform: translateY(-1px); }
.duel-toggle:hover, .duel-toggle[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }
.duel-toggle[aria-expanded="true"] .duel-toggle-chev { transform: rotate(90deg); }
.duel-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .duel-toggle-chev { transition: transform 160ms var(--ease); }
}
.wnotes-pause {
  position: relative; display: inline-grid; place-items: center; width: 22px; height: 18px;
  padding: 0; border: 0; background: none; color: var(--dim); cursor: pointer;
}
.wnotes-pause-glyph {
  display: block; width: 8px; height: 9px;
  background: linear-gradient(to right, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px);
}
.wnotes-pause[aria-pressed="true"] .wnotes-pause-glyph {
  height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.wnotes-pause:hover, .wnotes-pause[aria-pressed="true"] { color: var(--gold); }
.wnotes-pause:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: var(--r-sm); }
.upd-notice.is-section { padding: 12px 0; gap: 6px; }
.upd-notice.is-section .btn { margin-top: 0; }
@media (pointer: coarse) {
  .duel-toggle::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; }
  .wnotes-pause::after { content: ""; position: absolute; inset: -7px -5px; }
  a.rowlink { padding-block: 7px; margin-block: -7px; }
  .strip .who { padding-block: 7px; margin-block: -7px; }
  .strip .who-link { padding-block: 7px; }
  .whf-row-name, .whf-champ-name { padding-block: 6px 2px; margin-block: -6px -2px; }
  .whf-row-sub { padding-block: 2px 7px; margin-block: -2px -7px; }
}

@property --pc-angle { syntax: "<angle>"; initial-value: 45deg; inherits: false; }
.tc-card.pc-look {
  --pc-frame: linear-gradient(135deg, #F3D27A, var(--tc-tint) 50%, #9C7A2E);
  --pc-sheen: linear-gradient(transparent, transparent);
  background: linear-gradient(180deg, #1B2130, #0E1118) padding-box,
              var(--pc-sheen) border-box, var(--pc-frame) border-box;
}
.tc-card.pc-frame-gold { --pc-glow: #F3D27A;
  --pc-frame: linear-gradient(135deg, #F8E7A8, #C8933C 35%, #F3D27A 65%, #8C6A22); }
.tc-card.pc-frame-holo { --pc-glow: #B9A3F5;
  --pc-frame: linear-gradient(135deg, #7FE3F0, #B9A3F5 25%, #F5A3D0 50%, #F5E39A 75%, #9AF0B8); }
.tc-card.pc-frame-ember { --pc-glow: #FF8A3D;
  --pc-frame: linear-gradient(135deg, #FFC15A, #FF8A3D 35%, #E0453A 65%, #8C2A1E); }
.tc-card.pc-frame-frost { --pc-glow: #8FD3F4;
  --pc-frame: linear-gradient(135deg, #FFFFFF, #BDE8FA 35%, #8FD3F4 65%, #4F95C2); }
.tc-card.pc-frame-alliance { --pc-glow: var(--tc-tint);
  --pc-frame: linear-gradient(135deg, color-mix(in srgb, var(--tc-tint) 55%, #FFFFFF), var(--tc-tint) 50%, color-mix(in srgb, var(--tc-tint) 55%, #000000)); }

.tc-card.pc-border-shimmer {
  --pc-sheen: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  background-size: auto, 300% 100%, auto; background-position: 0 0, 50% 0, 0 0;
}
.tc-card.pc-border-orbit {
  --pc-sheen: conic-gradient(from var(--pc-angle), transparent 0 18%, rgba(255,255,255,.9) 26%, transparent 34% 68%, rgba(255,255,255,.65) 76%, transparent 84%);
}
.tc-card.pc-border-pulse {
  box-shadow: var(--shadow-2), 0 0 18px 3px color-mix(in srgb, var(--pc-glow, var(--tc-tint)) 55%, transparent);
}
@keyframes pc-shimmer { from { background-position: 0 0, 100% 0, 0 0; } to { background-position: 0 0, 0% 0, 0 0; } }
@keyframes pc-orbit { to { --pc-angle: 405deg; } }
@keyframes pc-pulse {
  0%, 100% { box-shadow: var(--shadow-2), 0 0 6px 0 color-mix(in srgb, var(--pc-glow, var(--tc-tint)) 30%, transparent); }
  50% { box-shadow: var(--shadow-2), 0 0 26px 5px color-mix(in srgb, var(--pc-glow, var(--tc-tint)) 65%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .tc-card.pc-border-shimmer { animation: pc-shimmer 3.2s linear infinite; }
  .tc-card.pc-border-orbit { animation: pc-orbit 5s linear infinite; }
  .tc-card.pc-border-pulse { animation: pc-pulse 2.6s ease-in-out infinite; }
}

.player-banner .pc-hero { position: absolute; inset: 0; opacity: .55; }
:root[data-theme="light"] .player-banner .pc-hero { opacity: .4; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .player-banner .pc-hero { opacity: .4; }
}
.pc-hero-dusk, .pc-chip-hero-dusk { background: linear-gradient(115deg, #6B3FA0, #D2644F); }
.pc-hero-aurora, .pc-chip-hero-aurora { background: linear-gradient(115deg, #1F8A70, #4FC98A 50%, #3FA7D6); }
.pc-hero-ember, .pc-chip-hero-ember { background: linear-gradient(115deg, #8C2A1E, #FF8A3D); }
.pc-hero-ocean, .pc-chip-hero-ocean { background: linear-gradient(115deg, #1B4E8C, #35C6E0); }

.pc-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 5px;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--row); color: var(--ink);
  font: 600 var(--fs-2) var(--body); cursor: pointer; }
.pc-swatch:hover:not(:disabled) { border-color: var(--gold); }
.pc-swatch.is-chosen { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pc-swatch.is-locked { opacity: .55; cursor: not-allowed; }
.pc-chip { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: var(--panel); }
.pc-chip-frame-none, .pc-chip-border-none, .pc-chip-hero-none { background: var(--panel); border-style: dashed; border-color: var(--rule); }
.pc-chip-frame-gold { background: linear-gradient(135deg, #F8E7A8, #C8933C 35%, #F3D27A 65%, #8C6A22); }
.pc-chip-frame-holo { background: linear-gradient(135deg, #7FE3F0, #B9A3F5 25%, #F5A3D0 50%, #F5E39A 75%, #9AF0B8); }
.pc-chip-frame-ember { background: linear-gradient(135deg, #FFC15A, #FF8A3D 35%, #E0453A 65%, #8C2A1E); }
.pc-chip-frame-frost { background: linear-gradient(135deg, #FFFFFF, #BDE8FA 35%, #8FD3F4 65%, #4F95C2); }
.pc-chip-frame-alliance { background: conic-gradient(#3FA7D6 0 25%, #D2644F 0 50%, #4FC98A 0 75%, #C8933C 0); }
.pc-chip-border-shimmer { background: linear-gradient(115deg, #1B2130 35%, #F4F7FA 50%, #1B2130 65%); }
.pc-chip-border-pulse { background: #1B2130; box-shadow: 0 0 8px 2px color-mix(in srgb, var(--gold) 70%, transparent); }
.pc-chip-border-orbit { background: conic-gradient(from 45deg, #1B2130 0 20%, #F4F7FA 28%, #1B2130 36% 70%, #C9D2DE 78%, #1B2130 86%); }
.pcos-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: middle;
  font: 700 var(--fs-1) var(--body); letter-spacing: .02em; text-decoration: none; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.pcos-pill:hover { text-decoration: underline; }
.pe-summary .pcos-pill { display: inline-flex; align-items: center; box-sizing: border-box; height: 22px; min-height: 0; margin: 0 auto 0 8px; padding: 0 8px; text-transform: none; line-height: 1; }

.alerts-title { display: flex; align-items: center; gap: 8px; }
.alerts-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 700 var(--fs-1) var(--body); letter-spacing: .02em; text-decoration: none; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.alerts-pill:hover { text-decoration: underline; }
.alerts-list { display: grid; gap: 6px; margin-top: 10px; }
.alerts-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px;
  padding: 6px 12px; border-radius: var(--r-sm); background: var(--row); cursor: pointer; }
.alerts-row.is-locked { cursor: default; }
.alerts-row.is-locked .alerts-name { color: var(--mute); }
.alerts-name { font-size: var(--fs-2); color: var(--ink); }
.alerts-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0;
  border-radius: 999px; background: color-mix(in srgb, var(--mute) 45%, transparent); cursor: pointer; transition: background .15s; }
.alerts-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .15s; }
.alerts-switch:checked { background: var(--gold); }
.alerts-switch:checked::after { transform: translateX(16px); }
.alerts-switch:disabled { opacity: .45; cursor: default; }
.alerts-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .alerts-switch, .alerts-switch::after { transition: none; } }

.perk-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 700 var(--fs-1) var(--body); letter-spacing: .02em; text-decoration: none; color: var(--gold); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent); }
a.perk-pill:hover { text-decoration: underline; }
.perk-lock { display: grid; gap: 6px; margin: 14px var(--gutter); padding: 14px 16px; border: 1px solid var(--rule);
  border-radius: var(--r-lg); background: var(--panel); }
.perk-lock-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.perk-lock-title { margin: 0; font: 700 var(--fs-5) var(--body); }
.compare-link { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-2) var(--body); color: var(--mute);
  border: 1px solid var(--rule); border-radius: var(--r); padding: 4px 10px; text-decoration: none; }
.compare-link:hover { color: var(--gold); border-color: var(--gold); }
.compare-link .perk-pill { height: 18px; padding: 0 6px; }

.cmp-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px var(--gutter) 24px; }
.cmp-title { margin: 0; font: 700 var(--fs-5) var(--body); }
.cmp-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cmp-form .psuggest { flex: 1 1 180px; min-width: 0; }
.cmp-input { flex: 1 1 180px; min-width: 0; box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--row); color: var(--ink); font: 500 var(--fs-3) var(--body); }
.cmp-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cmp-vs { font: 700 var(--fs-2) var(--body); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.cmp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 10px; }
.cmp-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 12px;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); color: var(--ink); text-decoration: none; text-align: center; }
.cmp-side:hover { border-color: var(--gold); }
.cmp-side .thumb { width: 64px; height: 64px; object-fit: contain; }
.cmp-name { font: 700 var(--fs-4) var(--body); overflow-wrap: anywhere; }
.cmp-sub { font-size: var(--fs-1); color: var(--mute); }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.cmp-tile { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); }
.cmp-tile-wide { grid-column: 1 / -1; }
.cmp-label { font: 700 var(--fs-1) var(--body); color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.cmp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cmp-cell { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: var(--r); background: var(--row); }
.cmp-cell.is-b { text-align: right; }
.cmp-value { font: 700 var(--fs-4) var(--body); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cmp-cell.is-ahead { background: color-mix(in srgb, var(--gold) 12%, var(--row)); }
.cmp-cell.is-ahead .cmp-value { color: var(--gold); }
.cmp-cell.is-thin .cmp-value { font-size: var(--fs-3); color: var(--dim); }
.cmp-balls { display: grid; gap: 6px; align-content: start; }
.cmp-ball { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 8px; border-radius: var(--r); background: var(--row); }
.cmp-ball .thumb { width: 36px; height: 36px; object-fit: contain; }
.cmp-ball-name { font-size: var(--fs-2); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-ball-fig { font: 700 var(--fs-2) var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .cmp-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-form .psuggest, .cmp-form > .cmp-input { flex: 1 1 100%; }
  .cmp-head .cmp-vs { display: none; }
  .cmp-form .cmp-vs { display: none; }
  .cmp-go { flex: 1 1 100%; justify-content: center; }
  .cmp-ball { grid-template-columns: 28px 1fr; }
  .cmp-ball .thumb { width: 28px; height: 28px; }
  .cmp-ball-fig { grid-column: 2; }
}

.perks-title { display: flex; align-items: center; gap: 8px; }
.perks-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 10px; }
.perks-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 12px;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--row); color: var(--ink); font: 600 var(--fs-2) var(--body); cursor: pointer; }
.perks-file:hover:not(:disabled) { border-color: var(--gold); }
.perks-file:disabled { opacity: .5; cursor: default; }
.perks-file:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.perks-file-type { font: 700 var(--fs-1) var(--mono); color: var(--mute); }

.fx-page { --fx-bad-ink: #FFB4B4; --fx-good-ink: #8FE0C8; --fx-warn-ink: #F2C98A;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px var(--gutter) 28px; max-width: 1180px; margin: 0 auto; box-sizing: border-box; width: 100%; }
:root[data-theme="light"] .fx-page { --fx-bad-ink: #A23A2E; --fx-good-ink: #1F6B5B; --fx-warn-ink: #7A5410; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .fx-page { --fx-bad-ink: #A23A2E; --fx-good-ink: #1F6B5B; --fx-warn-ink: #7A5410; }
}
.fx-mast { display: grid; gap: 10px; }
.fx-mast-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.fx-title { margin: 0; font: 700 var(--fs-5)/1.1 var(--cond); font-size: clamp(24px, 6.4vw, 28px); letter-spacing: .02em; color: var(--ink); }
.fx-title.has-mark { display: flex; align-items: center; gap: 10px; }
.fx-title-words { display: grid; gap: 3px; min-width: 0; }
.fx-title-sub { font: 600 var(--fs-3)/1.2 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.wc-mark { flex: none; display: block; width: 34px; height: 34px; }
.fx-mast-pills, .fx-line-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fx-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; box-sizing: border-box;
  font: 600 var(--fs-1) var(--body); color: var(--mute); background: var(--lift); border: 1px solid var(--rule); }
.fx-pill.is-open { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.fx-pill.is-live { color: var(--fx-bad-ink); border-color: color-mix(in srgb, var(--bad) 55%, var(--rule)); background: color-mix(in srgb, var(--bad) 18%, transparent); }
.fx-pill.is-final, .fx-pill.is-won { color: var(--fx-good-ink); border-color: color-mix(in srgb, var(--good) 55%, var(--rule)); background: color-mix(in srgb, var(--good) 20%, transparent); }
.fx-pill.is-warn { color: var(--fx-warn-ink); border-color: color-mix(in srgb, var(--acc-amber) 50%, var(--rule)); background: color-mix(in srgb, var(--acc-amber) 12%, transparent); }
.fx-pill.is-lost { color: var(--mute); }
.fx-pill.is-score { font-family: var(--mono); color: var(--ink); }
.fx-pill.is-demo { color: var(--fx-warn-ink); border-color: color-mix(in srgb, var(--acc-amber) 55%, var(--rule)); background: color-mix(in srgb, var(--acc-amber) 16%, transparent); }
.fx-pill.is-big { min-height: 32px; padding: 4px 14px; font-size: var(--fs-3); }
.fx-tabs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px; }
.fx-tab, .fx-seg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; box-sizing: border-box;
  cursor: pointer; white-space: nowrap; text-decoration: none; font: 600 var(--fs-2) var(--body); color: var(--mute); background: transparent; border: 1px solid var(--rule); }
.fx-tab:hover, .fx-seg-btn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.fx-tab[aria-current="page"], .fx-seg-btn[aria-current="true"], .fx-seg-btn[aria-pressed="true"] {
  color: var(--ink); background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.fx-tab-short { display: none; }
.fx-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-seg-btn { min-height: 32px; padding: 4px 12px; }
.fx-card { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card); min-width: 0; }
.fx-empty { justify-items: start; padding: 22px 18px; }
.fx-big { margin: 0; font: 700 var(--fs-4) var(--body); color: var(--ink); }
.fx-muted { color: var(--mute); font-size: var(--fs-1); }
.fx-k { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.fx-h2 { margin: 0; font: 700 var(--fs-2) var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.fx-sub-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.fx-link { color: var(--mute); font-size: var(--fs-2); min-height: 32px; display: inline-flex; align-items: center; }
.fx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 18px; border-radius: 999px; cursor: pointer; box-sizing: border-box;
  text-decoration: none; white-space: nowrap; font: 700 var(--fs-3) var(--body); color: var(--bg); background: var(--gold); border: 1px solid var(--gold); }
.fx-btn:hover { filter: brightness(1.08); }
.fx-btn:disabled { opacity: .45; cursor: default; filter: none; }
.fx-btn-ghost { color: var(--ink); background: var(--lift); border-color: var(--rule); }
.fx-btn:focus-visible, .fx-tab:focus-visible, .fx-seg-btn:focus-visible, .fx-pick:focus-visible, .fx-league:focus-visible, .fx-slot:focus-visible,
.fx-cap:focus-visible, .fx-x:focus-visible, .fx-dock-sum:focus-visible, .fx-beta-pill:focus-visible, .fx-beta-close:focus-visible, .fx-parts summary:focus-visible,
.fx-scoring summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fx-input { box-sizing: border-box; flex: 1 1 160px; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--r);
  font: 500 var(--fs-3) var(--body); color: var(--ink); background: var(--row); border: 1px solid var(--rule); }
.fx-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (pointer: coarse) { .fx-input { font-size: 1rem; } }
.fx-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fx-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.fx-dot { --size: 36px; --dot: var(--mute); display: grid; place-items: center; flex: none; width: var(--size); height: var(--size); border-radius: 50%;
  background: color-mix(in srgb, var(--dot) 30%, var(--panel)); box-shadow: inset 0 0 0 2px var(--dot); color: var(--ink); font: 700 calc(var(--size) * .42)/1 var(--cond);
  font-size: clamp(var(--fs-1), calc(var(--size) * .42), 40px); }
.fx-dot-player { --dot: var(--acc-violet); border-radius: 30%; }
.fx-crest { flex: none; }

.fx-stage { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
.fx-stage-main { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.fx-stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fx-stage-count { font: 700 var(--fs-5)/1.05 var(--cond); font-size: clamp(26px, 7.5vw, 34px); font-variant-numeric: tabular-nums; color: var(--ink); }
.fx-stage-note { color: var(--mute); font-size: var(--fs-2); }
.fx-stage.is-draft { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }

.fx-beta { display: grid; justify-items: end; gap: 8px; min-width: 0; }
.fx-beta-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 12px; border-radius: 999px; cursor: pointer; box-sizing: border-box; max-width: 100%;
  font: 700 var(--fs-1) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fx-warn-ink);
  background: transparent; border: 1px dashed color-mix(in srgb, var(--acc-amber) 60%, var(--rule)); }
.fx-beta-pill:hover { background: color-mix(in srgb, var(--acc-amber) 10%, transparent); }
.fx-beta-pill[aria-expanded="true"] { background: color-mix(in srgb, var(--acc-amber) 14%, transparent); }
.fx-beta-status { padding: 1px 8px; border-radius: 999px; font: 600 var(--fs-1) var(--body); letter-spacing: 0; text-transform: none; color: var(--ink);
  background: color-mix(in srgb, var(--acc-amber) 18%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-beta-panel { justify-self: end; width: min(100%, 560px); display: grid; gap: 10px; padding: 12px; border-radius: var(--r-lg); box-sizing: border-box; min-width: 0;
  border: 1px dashed color-mix(in srgb, var(--acc-amber) 55%, var(--rule)); background: color-mix(in srgb, var(--acc-amber) 5%, var(--bg)); }
.fx-beta-panel[hidden] { display: none; }
@media (min-width: 720px) {
  .fx-beta { position: relative; }
  .fx-beta-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 520px; box-shadow: var(--shadow-2); }
}
.fx-beta-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-beta-title { font: 700 var(--fs-1) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fx-warn-ink); }
.fx-beta-close { margin-left: auto; min-height: 32px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font: 600 var(--fs-2) var(--body);
  color: var(--ink); background: var(--lift); border: 1px solid var(--rule); }
.fx-beta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.fx-beta-k { flex: 0 0 84px; font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.fx-beta-run { min-height: 36px; padding: 6px 16px; color: var(--bg); background: var(--acc-amber); border-color: var(--acc-amber); }
.fx-beta-link { color: var(--fx-warn-ink); font-size: var(--fs-2); min-height: 32px; display: inline-flex; align-items: center; }
.fx-beta-act { min-height: 36px; padding: 6px 14px; font-size: var(--fs-2); }
.fx-beta-confirm { flex: 1 1 220px; min-width: 0; font: 600 var(--fs-2) var(--body); color: var(--ink); }
.fx-beta-danger { min-height: 36px; padding: 6px 16px; font-size: var(--fs-2); color: var(--fx-bad-ink);
  background: color-mix(in srgb, var(--bad) 18%, transparent); border-color: color-mix(in srgb, var(--bad) 55%, var(--rule)); }
.fx-beta-card { border-style: dashed; border-color: color-mix(in srgb, var(--acc-amber) 50%, var(--rule)); background: color-mix(in srgb, var(--acc-amber) 4%, var(--panel)); }
.fx-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.fx-fact { display: grid; gap: 2px; }
.fx-fact b { font: 600 var(--fs-3) var(--body); }

.fx-draft { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.fx-board { display: grid; gap: 10px; min-width: 0; align-content: start; }
.fx-board-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.fx-board-tabs .fx-seg-btn { min-height: 40px; padding: 4px 18px; font-size: var(--fs-3); }
.fx-toolbar { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fx-find { flex: 1 1 200px; }
.fx-select { flex: 0 1 210px; cursor: pointer; }
.fx-chips { gap: 6px; }
.fx-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fx-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 64px;
  padding: 10px 12px; border-radius: var(--r-lg); box-sizing: border-box; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
.fx-pick:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.fx-pick.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.fx-pick.is-blocked { opacity: .5; cursor: not-allowed; box-shadow: none; }
.fx-pick.is-over .fx-pick-price b { color: var(--mute); }
.fx-pick-who { display: grid; gap: 1px; min-width: 0; }
.fx-pick-name { font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-pick-sub, .fx-pick-line { color: var(--mute); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-pick-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fx-pick-tags .fx-pill { min-height: 20px; padding: 0 8px; }
.fx-pick-price { display: grid; justify-items: end; gap: 2px; line-height: 1; }
.fx-pick-price b { font: 700 var(--fs-4) var(--mono); color: var(--gold); }
.fx-pick-price span { font-size: var(--fs-1); color: var(--mute); }
.fx-more { display: flex; justify-content: center; }
.fx-more:empty { display: none; }
.fx-none-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border-radius: var(--r-lg); border: 1px dashed var(--rule); }

.fx-tray { gap: 14px; align-content: start; }
.fx-tray-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.fx-meter { display: grid; gap: 6px; }
.fx-meter-nums { display: flex; align-items: baseline; gap: 8px; }
.fx-meter-left { font: 700 var(--fs-5)/1 var(--cond); font-size: clamp(30px, 8vw, 36px); color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-meter-left.is-over { color: var(--fx-bad-ink); }
.fx-meter-word { color: var(--mute); font-size: var(--fs-2); }
.fx-bar { height: 8px; border-radius: 999px; background: var(--row); overflow: hidden; }
.fx-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.fx-bar-fill.is-over { background: var(--bad); }
.fx-slot-group { display: grid; gap: 6px; }
.fx-slot-head { display: flex; align-items: center; gap: 8px; }
.fx-slot-count { font: 700 var(--fs-2) var(--mono); color: var(--mute); }
.fx-slot-count.is-full { color: var(--gold); }
.fx-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fx-slot:not(.is-empty) { grid-column: 1 / -1; }
.fx-slot { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px 4px 8px; border-radius: var(--r); background: var(--row); border: 1px solid var(--rule);
  min-width: 0; box-sizing: border-box; font: inherit; color: var(--ink); }
.fx-slot.is-empty { justify-content: center; border-style: dashed; background: transparent; cursor: pointer; color: var(--dim); font: 600 var(--fs-2) var(--body); }
.fx-slot.is-empty:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.fx-slot-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fx-slot-name { font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-slot-price { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.fx-cap { min-height: 32px; padding: 2px 10px; border-radius: 999px; cursor: pointer; font: 600 var(--fs-1) var(--body); color: var(--mute);
  background: transparent; border: 1px solid var(--rule); white-space: nowrap; }
.fx-cap.is-on { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--rule)); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.fx-x { min-width: 32px; min-height: 32px; border-radius: 999px; cursor: pointer; font: 700 var(--fs-3) var(--body); color: var(--mute);
  background: transparent; border: 1px solid transparent; }
.fx-x:hover { color: var(--ink); border-color: var(--rule); }
.fx-remove { font-size: var(--fs-1); padding: 0 10px; border-color: var(--rule); }
.fx-remove[data-armed="1"] { color: var(--fx-bad-ink); border-color: color-mix(in srgb, var(--bad) 55%, var(--rule)); }
.fx-check { margin: 0; font: 600 var(--fs-3) var(--body); color: var(--mute); }
.fx-check.is-bad { color: var(--fx-bad-ink); }
.fx-check.is-ok { color: var(--fx-good-ink); }
.fx-tray-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-tray > .fx-save { width: 100%; }
.fx-tray > .fx-save { display: none; }
.fx-scoring { border-top: 1px solid var(--rule); padding-top: 4px; }
.fx-scoring summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--mute); font: 600 var(--fs-2) var(--body); }
.fx-scoring[open] { display: grid; gap: 10px; }
.fx-scoring-group { display: grid; gap: 4px; }

.fx-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--panel); box-shadow: 0 -1px 0 var(--rule), 0 -10px 24px -16px rgba(0, 0, 0, .7); }
.fx-dock-sum { flex: 1; min-width: 0; min-height: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 6px; padding: 0;
  cursor: pointer; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; }
.fx-dock-left { font: 700 var(--fs-5)/1 var(--cond); font-size: clamp(24px, 7vw, 26px); font-variant-numeric: tabular-nums; }
.fx-dock-left.is-over { color: var(--fx-bad-ink); }
.fx-dock-word { color: var(--mute); font-size: var(--fs-2); }
.fx-dock-counts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--mute); font-size: var(--fs-1); }
.fx-dock .fx-save { flex: none; }
body:has(.fx-dock) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
body:has(.fx-dock) .to-top { bottom: 84px; }

.fx-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%), var(--panel); }
.fx-hero-main { display: grid; gap: 2px; }
.fx-hero-pts { font: 700 var(--fs-5)/1 var(--cond); font-size: clamp(44px, 14vw, 56px); font-variant-numeric: tabular-nums; }
.fx-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fx-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fx-line { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card); min-width: 0; }
.fx-line.is-captain { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.fx-line-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-line-right { display: flex; flex-direction: column; align-items: flex-end; }
.fx-line-pts { font: 700 var(--fs-5)/1 var(--cond); font-variant-numeric: tabular-nums; }
.fx-side-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fx-side-name { font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-parts summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--mute); font-size: var(--fs-2); }
.fx-parts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fx-parts-list li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--row); font-size: var(--fs-2); }
.fx-parts-list b { font-family: var(--mono); }
.fx-parts-list li.is-cap b { color: var(--gold); }

.fx-lgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fx-league { display: grid; gap: 8px; padding: 14px; min-height: 44px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
.fx-league:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.fx-league.is-public { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--acc-violet) 16%, transparent), transparent 60%), var(--panel); }
.fx-league-name, .fx-lname { margin: 0; font: 700 var(--fs-4) var(--body); overflow-wrap: anywhere; }
.fx-forms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fx-form { align-content: start; }
.fx-invite { display: grid; gap: 6px; }
.fx-invite-url { flex: 1 1 200px; min-width: 0; padding: 9px 12px; border-radius: var(--r); background: var(--row); border: 1px solid var(--rule);
  font: 500 var(--fs-2) var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fx-row-card { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: var(--r); background: var(--row); border: 1px solid transparent; box-sizing: border-box; }
.fx-row-card.is-me { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); background: color-mix(in srgb, var(--gold) 9%, var(--row)); }
.fx-row-card.is-bot { border-style: dashed; border-color: color-mix(in srgb, var(--acc-amber) 40%, var(--rule)); }
.fx-place { min-width: 28px; font: 700 var(--fs-3) var(--mono); color: var(--dim); text-align: center; }
.fx-row-card.is-p1 .fx-place { color: var(--medal-gold); }
.fx-row-card.is-p2 .fx-place { color: var(--medal-silver); }
.fx-row-card.is-p3 .fx-place { color: var(--medal-bronze); }
.fx-row-name { flex: 1; min-width: 0; font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-row-pts { font: 700 var(--fs-4) var(--cond); font-variant-numeric: tabular-nums; }
.fx-me-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.fx-admin .fx-k { margin-top: 4px; }
.fx-join { justify-items: start; padding: 22px 18px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%), var(--panel); }
.fx-note-card { justify-items: start; color: var(--mute); font-size: var(--fs-2); }
.fx-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fx-leave { justify-items: start; }
.fx-leave-note { font-size: var(--fs-2); }

.wc-invite-card { gap: 10px; }
.wc-invite-url { display: block; font-size: var(--fs-3); padding: 12px 14px; white-space: normal; overflow-wrap: anywhere; user-select: all; }
.wc-invite-acts, .wc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-invite-acts .fx-btn { flex: 1 1 120px; }
.wc-settings { gap: 14px; scroll-margin-top: calc(var(--sticky-top, 0px) + 12px); }
.wc-sec { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule); min-width: 0; }
.wc-sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wc-h3 { margin: 0; font: 700 var(--fs-3) var(--body); color: var(--ink); }
.wc-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; min-width: 0; }
.wc-field { display: grid; gap: 6px; flex: 1 1 200px; min-width: 0; }
.wc-field .fx-input { width: 100%; flex: none; }
.wc-select { cursor: pointer; }
.wc-et, .wc-read { font-size: var(--fs-2); }
.wc-read { font-weight: 600; color: var(--ink); min-height: 40px; display: flex; align-items: center; }
.wc-list .fx-row-card { flex-wrap: wrap; }
.wc-confirm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.wc-confirm { flex: 1 1 100%; font: 600 var(--fs-2) var(--body); color: var(--fx-warn-ink); }
.wc-danger { color: var(--fx-bad-ink); background: color-mix(in srgb, var(--bad) 16%, transparent); border-color: color-mix(in srgb, var(--bad) 55%, var(--rule)); }
.wc-confirm-row .fx-btn, .wc-confirm-row .fx-input { min-height: 44px; }
.wc-sec.is-co .fx-btn, .wc-sec.is-owner .fx-btn, .wc-sec.is-co .fx-select, .wc-sec.is-owner .fx-select { min-height: 44px; }
.wc-typed { font-family: var(--mono); letter-spacing: .08em; }
.wc-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wc-order-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border-radius: var(--r); background: var(--row); border: 1px solid transparent; min-width: 0; }
.wc-order-row.is-dragging { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); background: color-mix(in srgb, var(--gold) 10%, var(--row)); }
.wc-handle { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); cursor: grab; touch-action: none;
  color: var(--mute); background: transparent; border: 1px solid var(--rule); }
.wc-handle:active { cursor: grabbing; }
.wc-handle:focus-visible, .wc-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wc-grip { width: 14px; height: 10px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
  linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
.wc-num { min-width: 20px; font: 700 var(--fs-2) var(--mono); color: var(--dim); text-align: center; }
.wc-name { flex: 1; min-width: 0; font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-order-acts { display: flex; gap: 4px; flex: none; }
.wc-order-acts .fx-x:disabled { opacity: .35; cursor: default; }
.wc-premium { padding: 10px 12px; border-radius: var(--r); background: var(--row); }
@media (pointer: coarse) { .wc-order-acts .fx-x, .wc-handle { min-width: 44px; min-height: 44px; } }

.fx-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.fx-pod { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border-radius: var(--r-lg); text-align: center; min-width: 0;
  background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
.fx-pod.is-p1 { order: 2; padding-top: 22px; background: radial-gradient(100% 120% at 50% 0%, rgba(242,193,78,.22), transparent 70%), var(--panel); }
.fx-pod.is-p2 { order: 1; background: radial-gradient(100% 120% at 50% 0%, rgba(201,209,220,.16), transparent 70%), var(--panel); }
.fx-pod.is-p3 { order: 3; background: radial-gradient(100% 120% at 50% 0%, rgba(208,140,90,.18), transparent 70%), var(--panel); }
.fx-pod.is-me { border-color: var(--gold); }
.fx-pod-place { font: 700 var(--fs-4) var(--cond); color: var(--mute); }
.fx-pod.is-p1 .fx-pod-place { color: var(--medal-gold); font-size: var(--fs-5); }
.fx-pod-name { max-width: 100%; font: 700 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-pod-pts { font: 600 var(--fs-1) var(--mono); color: var(--mute); }

.fx-share { justify-items: stretch; }
.fx-share-img { width: 100%; height: auto; border-radius: var(--r); background: var(--row); aspect-ratio: 1200 / 630; }

@media (max-width: 520px) {
  .fx-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .fx-tab { padding: 4px 6px; }
  .fx-tab-long { display: none; }
  .fx-tab-short { display: inline; }
  .fx-stage { grid-template-columns: minmax(0, 1fr); }
  .fx-stage-go { width: 100%; }
  .fx-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
}
@media (max-width: 640px) {
  html.nav-eh .fx-dock { bottom: calc(62px + env(safe-area-inset-bottom)); padding-bottom: 8px; }
  html.nav-eh body:has(.fx-dock) { padding-bottom: calc(134px + env(safe-area-inset-bottom)); }
  html.nav-eh body:has(.fx-dock) .to-top { bottom: calc(144px + env(safe-area-inset-bottom)); }
}
@media (min-width: 640px) {
  .fx-picks { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .fx-slots { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .fx-slot:not(.is-empty) { grid-column: auto; }
}
@media (min-width: 720px) {
  .fx-lines { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .fx-lgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .fx-forms { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .fx-draft { grid-template-columns: minmax(0, 1fr) 340px; }
  .fx-tray { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--sticky-top) + 12px);
    max-height: calc(100vh - var(--sticky-top) - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .fx-board { grid-column: 1; grid-row: 1; }
  .fx-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-slot:not(.is-empty) { grid-column: 1 / -1; }
  .fx-dock { display: none; }
  .fx-tray > .fx-save { display: inline-flex; }
  body:has(.fx-dock) { padding-bottom: 0; }
  body:has(.fx-dock) .to-top { bottom: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .fx-bar-fill { transition: width .25s ease; }
}

body:has(.fx-page) #view.is-swapping { animation-fill-mode: backwards; }

.fx-glyph { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.fx-ball { --size: 36px; display: grid; place-items: center; flex: none; width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden; box-sizing: border-box;
  background: color-mix(in srgb, var(--acc-violet) 14%, var(--row)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc-violet) 55%, var(--rule)); }
.fx-ball .thumb { width: 92%; height: 92%; object-fit: contain; background: none; border: 0; }
.fx-pick-pic .fx-ball { box-shadow: none; }

.fx-pick-pic { position: relative; display: grid; place-items: center; flex: none; padding: 3px; border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ally, var(--rule)) 70%, transparent); }
.fx-pick-mark { position: absolute; right: -4px; bottom: -4px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: var(--fs-1); color: var(--bg); background: var(--gold); box-shadow: 0 0 0 2px var(--panel); }
.fx-pick.is-on .fx-pick-mark { display: grid; }
.fx-pick.is-on .fx-pick-pic { box-shadow: 0 0 0 2px var(--gold); }
.fx-pick.is-full { opacity: .62; }
.fx-pick.is-full .fx-pick-price b { color: var(--mute); }
.fx-pick:hover:not(:disabled) { box-shadow: var(--shadow-1); }
.fx-pick.is-on .fx-pick-price b { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .fx-pick { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease; }
}
@media (prefers-reduced-motion: no-preference) {
  .fx-pick:hover:not(:disabled) { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .fx-pick.is-pop { animation: fx-pop .32s cubic-bezier(.2, .9, .3, 1.3); }
}
@media (prefers-reduced-motion: no-preference) {
  .fx-pick.is-pop .fx-pick-mark { animation: fx-stamp .36s .06s cubic-bezier(.2, .9, .3, 1.4) both; }
}
@keyframes fx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes fx-stamp { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

.fx-meter-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.fx-progress { display: inline-flex; align-items: center; }
.fx-pips { display: inline-flex; align-items: center; gap: 4px; }
.fx-pip { display: block; width: 14px; height: 8px; border-radius: 999px; background: var(--row); box-shadow: inset 0 0 0 1px var(--rule); }
.fx-pip.is-on { background: var(--gold); box-shadow: none; }
.fx-pip.is-opt { width: 10px; }
.fx-pip.is-opt.is-on { background: var(--acc-violet); }
.fx-pip-gap { display: block; width: 4px; }
.fx-pip-cap { display: inline-grid; place-items: center; margin-left: 4px; font-size: var(--fs-3); color: var(--dim); }
.fx-pip-cap.is-on { color: var(--medal-gold); }
.fx-progress.is-complete .fx-pip.is-on:not(.is-opt) { background: var(--good); }
.fx-ready { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r); font-size: var(--fs-4);
  color: var(--fx-good-ink); background: color-mix(in srgb, var(--good) 14%, transparent); border: 1px solid color-mix(in srgb, var(--good) 45%, var(--rule)); }
.fx-ready b { font: 700 var(--fs-3) var(--body); }
.fx-save.is-ready { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .fx-save.is-ready { animation: fx-ready 1.2s ease-out 1; }
}
@keyframes fx-ready { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); } }
.fx-slot { --ally: var(--rule); }
.fx-slot > .fx-crest { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--ally) 65%, transparent); border-radius: 50%; }
.fx-slot.is-captain { border-color: color-mix(in srgb, var(--medal-gold) 55%, var(--rule)); background: color-mix(in srgb, var(--medal-gold) 8%, var(--row)); }
.fx-cap { display: inline-flex; align-items: center; gap: 5px; }
.fx-cap.is-on { color: var(--medal-gold); border-color: color-mix(in srgb, var(--medal-gold) 55%, var(--rule)); background: color-mix(in srgb, var(--medal-gold) 14%, var(--panel)); }
.fx-cap-crown { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .fx-cap.is-crowned .fx-cap-crown { animation: fx-crown .5s cubic-bezier(.2, .9, .3, 1.4) both; }
}
@media (prefers-reduced-motion: no-preference) {
  .fx-slot.is-pop { animation: fx-slot-in .28s ease-out both; }
}
@keyframes fx-crown { 0% { transform: translateY(-9px) scale(.4) rotate(-18deg); opacity: 0; } 70% { transform: translateY(1px) scale(1.18); opacity: 1; } 100% { transform: none; } }
@keyframes fx-slot-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fx-dock-pips { grid-column: 1 / -1; margin-top: 3px; }
.fx-dock-pips .fx-pip { width: 10px; height: 6px; }
.fx-dock-pips .fx-pip.is-opt { width: 7px; }
.fx-dock-pips .fx-pip-cap { font-size: var(--fs-1); }
.fx-dock.is-ready { box-shadow: 0 -1px 0 color-mix(in srgb, var(--good) 60%, var(--rule)), 0 -10px 24px -16px rgba(0, 0, 0, .7); }

.fx-stage-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.fx-clock { display: inline-flex; align-items: baseline; gap: 10px; color: var(--ink); }
.fx-clock-seg { display: inline-flex; align-items: baseline; gap: 2px; }
.fx-clock-seg b { font: 700 var(--fs-5)/1 var(--cond); font-size: clamp(30px, 8.5vw, 40px); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.fx-clock-seg span { font: 700 var(--fs-2) var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.fx-stage.is-draft .fx-stage-note { font-weight: 600; }
@media (max-width: 520px) {
  .fx-stage-side { justify-content: stretch; }
  .fx-stage-side .fx-btn { flex: 1 1 140px; }
}

.fx-walk, .fx-saved { position: fixed; inset: 0; z-index: 70; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--ink); overflow: visible; }
.fx-walk::backdrop, .fx-saved::backdrop { background: transparent; }
.fx-walk:not([open]), .fx-saved:not([open]) { display: none; }
.fx-walk-hole { position: fixed; border-radius: var(--r-lg); pointer-events: none; box-shadow: 0 0 0 200vmax rgba(5, 8, 12, .66), 0 0 0 2px var(--gold); }
.fx-walk.is-docked .fx-walk-hole { inset: 0; border-radius: 0; box-shadow: none; background: rgba(5, 8, 12, .66); }
.fx-walk-card { position: fixed; width: min(360px, calc(100vw - 24px)); box-sizing: border-box; display: grid; gap: 10px; padding: 16px;
  border-radius: var(--r-lg); background: var(--panel); color: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); box-shadow: var(--shadow-3); }
.fx-walk.is-docked .fx-walk-card, .fx-walk.is-bottom .fx-walk-card { top: auto; left: 12px; right: 12px; width: auto; margin: 0 auto; max-width: 460px;
  bottom: calc(12px + env(safe-area-inset-bottom)); }
.fx-walk.is-top .fx-walk-card { top: calc(var(--sticky-top) + 8px); left: 12px; right: 12px; width: auto; margin: 0 auto; max-width: 460px; }
.fx-walk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-walk-count { font: 700 var(--fs-1) var(--mono); letter-spacing: .06em; color: var(--gold); text-transform: uppercase; }
.fx-walk-skip { min-height: 32px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font: 600 var(--fs-2) var(--body); color: var(--mute); background: none; border: 1px solid var(--rule); }
.fx-walk-skip:hover { color: var(--ink); }
.fx-walk-title { margin: 0; font: 700 var(--fs-4)/1.15 var(--body); color: var(--ink); }
.fx-walk-title:focus { outline: none; }
.fx-walk-body { margin: 0; font: 500 var(--fs-3)/1.5 var(--body); color: var(--ink); }
.fx-walk-note { margin: 0; font: 500 var(--fs-1)/1.4 var(--body); color: var(--mute); }
.fx-walk-note[hidden] { display: none; }
.fx-walk-foot { display: flex; align-items: center; gap: 8px; }
.fx-walk-dots { display: inline-flex; gap: 5px; margin-right: auto; }
.fx-walk-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.fx-walk-dots i.is-done { background: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.fx-walk-dots i.is-on { width: 20px; border-radius: 999px; background: var(--gold); }
.fx-walk-back[hidden], .fx-walk-skip[hidden] { display: none; }
.fx-walk-skip:focus-visible, .fx-walk-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) {
  html.nav-eh .fx-walk.is-bottom .fx-walk-card, html.nav-eh .fx-walk.is-docked .fx-walk-card { bottom: calc(74px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .fx-walk-hole { transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease; }
}
@media (prefers-reduced-motion: no-preference) {
  .fx-walk-card { animation: fx-walk-in .22s ease-out both; }
}
@keyframes fx-walk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fx-saved[open] { display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: rgba(5, 8, 12, .66); }
.fx-saved-card { width: min(520px, 100%); box-sizing: border-box; display: grid; justify-items: center; gap: 12px; padding: 24px 18px; text-align: center;
  border-radius: var(--r-lg); background: var(--panel); color: var(--ink); border: 1px solid color-mix(in srgb, var(--medal-gold) 45%, var(--rule)); box-shadow: var(--shadow-3); }
.fx-saved-crown { width: 40px; height: 40px; color: var(--medal-gold); }
.fx-saved-title { margin: 0; font: 700 var(--fs-5)/1.05 var(--cond); letter-spacing: .02em; }
.fx-saved-title:focus { outline: none; }
.fx-saved-row { list-style: none; margin: 0; padding: 12px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 10px; }
.fx-saved-pick { position: relative; display: grid; justify-items: center; gap: 4px; width: 76px; }
.fx-saved-name { max-width: 100%; font: 600 var(--fs-1) var(--body); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-saved-cap { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: var(--fs-4); color: var(--medal-gold); }
.fx-saved-pick.is-captain .fx-crest { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--medal-gold); border-radius: 50%; }
.fx-saved-note { margin: 0; font: 600 var(--fs-3) var(--body); color: var(--mute); }
.fx-saved-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .fx-saved-pick { animation: fx-saved-rise .42s calc(var(--i, 0) * 70ms + 120ms) cubic-bezier(.2, .8, .3, 1.15) both; }
}
@media (prefers-reduced-motion: no-preference) {
  .fx-saved-crown { animation: fx-crown .6s cubic-bezier(.2, .9, .3, 1.4) both; }
}
@keyframes fx-saved-rise { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
.fx-soon { padding: 12px var(--gutter) 28px; max-width: 1180px; margin: 0 auto; box-sizing: border-box; width: 100%; }
.fx-soon-stage {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-content: center; justify-items: center; text-align: center;
  min-height: max(420px, calc(100svh - 200px)); padding: 48px 16px; box-sizing: border-box;
  border-radius: var(--r-lg); color: #F4F7FB;
  background: radial-gradient(120% 90% at 50% 40%, #0F2433 0%, #0A111A 55%, #05070B 100%);
  box-shadow: 0 0 0 1px rgba(53, 198, 224, .18) inset, var(--shadow-card);
}
.fx-soon-glow {
  position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(53, 198, 224, .24), transparent 42%);
}
.fx-soon-mark { width: clamp(60px, 11vw, 84px); height: auto; margin: 0 0 14px; }
.fx-soon-name {
  margin: 0 0 14px; padding-left: .5em;
  font-family: var(--cond); font-weight: 700; font-size: clamp(14px, 2.2vw, 20px); line-height: 1;
  letter-spacing: .5em; text-transform: uppercase; color: #35C6E0;
}
.fx-soon-title {
  margin: 0; display: grid; justify-items: center;
  font-family: var(--cond); font-weight: 700; font-size: clamp(72px, 19vw, 216px); line-height: .84;
  letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 0 48px rgba(53, 198, 224, .35);
}
.fx-soon-word:last-child {
  background: linear-gradient(180deg, #F4F7FB 10%, #35C6E0 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fx-soon-rule { display: block; width: min(260px, 60%); height: 2px; margin-top: 30px;
  background: linear-gradient(90deg, transparent, #35C6E0, transparent); }
.fx-soon-tag { margin: 26px auto 0; max-width: 22em; padding-left: .16em;
  font-family: var(--cond); font-weight: 600; font-size: clamp(15px, 2.2vw, 22px); line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; text-align: center; color: #DCE3EC; }
@media (prefers-reduced-motion: no-preference) {
  .fx-soon-glow { animation: fx-soon-breathe 7s ease-in-out 3 forwards; }
  .fx-soon-name, .fx-soon-mark { animation: fx-soon-in 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  .fx-soon-word { animation: fx-soon-rise 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .fx-soon-word:first-child { animation-delay: .5s; }
  .fx-soon-word:last-child { animation-delay: .9s; }
  .fx-soon-rule { animation: fx-soon-sweep 1.6s 1.5s cubic-bezier(.2, .7, .2, 1) both; }
  .fx-soon-tag { animation: fx-soon-in-tag 1.2s 2.4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes fx-soon-in-tag { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fx-soon-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes fx-soon-in { from { opacity: 0; letter-spacing: 1.1em; } to { opacity: 1; letter-spacing: .5em; } }
@keyframes fx-soon-rise { from { opacity: 0; transform: translateY(.18em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fx-soon-sweep { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@media (max-width: 639px), (max-height: 500px) { .fx-page .fx-btn { min-height: 44px; } }
.fx-page .fx-form .perk-pill { min-height: 32px; box-sizing: border-box; }
.fx-row-card.is-me .fx-pill.is-open { background: color-mix(in srgb, var(--gold) 14%, var(--panel)); }
.fx-row-card.is-me .fs-wchip { color: var(--ink); }
.fs-otc .fx-pill.is-live { background: color-mix(in srgb, var(--bad) 18%, var(--panel)); }
.wcs-who-btn.is-on .fx-pill.is-demo { background: color-mix(in srgb, var(--acc-amber) 16%, var(--panel)); }
html:has(.fs-page .fx-dock) { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) { html.nav-eh:has(.fs-page .fx-dock) { scroll-padding-bottom: calc(146px + env(safe-area-inset-bottom)); } }
@media (max-height: 420px) and (max-width: 640px) {
  html.nav-eh .fx-dock { bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  html.nav-eh body:has(.fx-dock) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  html.nav-eh body:has(.fx-dock) .to-top { bottom: 84px; }
  html.nav-eh .fx-walk.is-bottom .fx-walk-card, html.nav-eh .fx-walk.is-docked .fx-walk-card { bottom: calc(12px + env(safe-area-inset-bottom)); }
  html.nav-eh:has(.fs-page .fx-dock), html.nav-eh:has(.fs-page .fx-dock):has(.fs-page .wcs-dchat:not([open])) {
    scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}
.fx-wl { --size: 32px; --wl-rim: color-mix(in srgb, var(--gold) 62%, var(--rule)); --wl-face: color-mix(in srgb, var(--gold) 10%, var(--panel));
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--size); height: calc(var(--size) * 1.15); }
.fx-wl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-wl-face { fill: var(--wl-face); stroke: var(--wl-rim); stroke-width: 2.4; }
.fx-wl-initial { position: relative; margin-top: -12%; font: 700 calc(var(--size) * .46)/1 var(--cond); color: var(--ink); }
.fx-wl-pic { position: absolute; inset: 0; clip-path: polygon(50% 9.9%, 88.3% 19.1%, 88.3% 42.8%, 86.3% 55.7%, 80.9% 67.1%, 72.6% 76.7%,
  62.1% 84.5%, 50% 90.1%, 37.9% 84.5%, 27.4% 76.7%, 19.1% 67.1%, 13.7% 55.7%, 11.7% 42.8%, 11.7% 19.1%); }
.fx-wl-img { position: absolute; left: 5%; top: 5.4%; width: 90%; height: 78.3%; object-fit: contain; }
.fx-wl.has-pic .fx-wl-initial { visibility: hidden; }
.fx-wl.is-me { --wl-rim: var(--medal-gold); --wl-face: color-mix(in srgb, var(--medal-gold) 14%, var(--panel)); }
.fx-wl.is-me .fx-wl-initial { color: var(--medal-gold); }
.fx-wl.is-bot .fx-wl-face { stroke: #C8933C; stroke-dasharray: 4 2.5; }
.fx-wl.is-open .fx-wl-face { fill: var(--row); stroke: var(--rule); stroke-dasharray: 3 3; }
.fs-turn > .fx-wl { grid-row: 1 / span 2; }
.fs-my-form .fx-inline { flex-wrap: nowrap; }
.fs-my-form .fx-input { flex: 1 1 auto; min-width: 0; min-height: 40px; }

.fx-pod.fs-lb-open { text-align: center; }
.fx-row-card.fs-lb-open:hover, .fx-pod.fs-lb-open:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.fx-row-card.is-me .fs-lb-wk { color: var(--ink); }
.fs-stat-seg .fx-seg-btn { min-height: 28px; padding: 2px 10px; font-size: var(--fs-1); }
.fs-entry-pick.is-captain .fx-crest { box-shadow: 0 0 0 2px var(--row), 0 0 0 4px var(--medal-gold); border-radius: 50%; }
.fs-help-row, .fs-room-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.fs-room-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fs-help { min-height: 36px; padding: 6px 14px; font-size: var(--fs-2); }

.fs-teams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fs-team { align-content: start; }
.fs-team-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fs-team-name { margin: 0; font: 700 var(--fs-4) var(--body); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.fs-team-name:hover { color: var(--gold); }
.fs-team-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-self: start; }
.fs-draft-card.is-done > summary { cursor: pointer; list-style: none; min-height: 32px; }
.fs-draft-card.is-done > summary::-webkit-details-marker { display: none; }
.fs-draft-card.is-done > summary::after { content: "\25BE" / ""; margin-left: auto; color: var(--mute); font: 700 var(--fs-3)/1 var(--body); }
.fs-draft-card.is-done[open] > summary::after { content: "\25B4" / ""; }
.fs-draft-card.is-done > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); }
.fs-section-head { margin-top: 4px; }
.fs-choice { align-content: start; }
.fs-cap-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fs-cap-note { margin: 0; color: var(--mute); font-size: var(--fs-2); }

.fs-ctx { grid-template-columns: minmax(0, 1fr); align-items: center; gap: 10px 16px; border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.fs-ctx.is-public { border-color: color-mix(in srgb, var(--acc-violet) 45%, var(--rule)); }
.fs-ctx-main { display: grid; gap: 6px; min-width: 0; }
.fs-ctx-name { font: 700 var(--fs-5)/1.1 var(--cond); font-size: clamp(22px, 6vw, 30px); color: var(--ink); overflow-wrap: anywhere; }
.fs-ctx-draft { display: contents; }
.fs-ctx-side { display: grid; min-width: 0; }
.fs-ctx-switch { width: 100%; min-height: 40px; }
.fs-ctx-slot:empty { display: none; }

.fs-leagues { display: grid; gap: 18px; }
.fs-lsection { display: grid; gap: 10px; min-width: 0; }
.fs-kind-line { margin: 0; color: var(--mute); font-size: var(--fs-2); }
.fs-none { margin: 0; }
.fs-my { gap: 24px; }
.fs-my .fs-section-head { min-height: 36px; margin-top: 0; }
.fs-my-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-my-act { min-height: 36px; padding: 6px 14px; font-size: var(--fs-2); }
.fs-my-act[aria-expanded="true"] { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); background: color-mix(in srgb, var(--gold) 12%, var(--lift)); }
.fs-my-panel { padding: 12px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
.fs-my-panel[hidden] { display: none; }
.fs-my-form { display: grid; gap: 8px; margin: 0; }
.fs-my-form-note { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fs-tile { align-content: start; gap: 12px; padding: 14px 16px; }
.fs-tile-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; }
.fs-lmark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; box-sizing: border-box; border-radius: var(--r-lg);
  background: #0E1B2B; box-shadow: inset 0 0 0 2px rgba(53, 198, 224, .7); color: #E9EDF3; font: 700 var(--fs-4)/1 var(--cond); font-size: clamp(18px, 5vw, 22px); letter-spacing: .02em; }
.fs-lmark-img { display: block; width: 30px; height: 30px; }
.fs-tile.is-past .fs-lmark { box-shadow: inset 0 0 0 2px rgba(201, 210, 222, .35); color: #C9D2DE; }
.fs-tile-who { display: grid; gap: 3px; min-width: 0; }
.fs-tile-name { margin: 0; font: 700 var(--fs-4)/1.2 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.fs-tile-line { color: var(--mute); font-size: var(--fs-2); }
.fs-tile-stat { display: grid; justify-items: end; gap: 2px; text-align: right; }
.fs-tile-big { font: 700 var(--fs-5)/1 var(--cond); letter-spacing: .01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-tile-small { color: var(--mute); font-size: var(--fs-1); white-space: nowrap; }
.fs-tile-pills { gap: 6px; }
.fs-tile-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-tile .fs-past-seasons { margin-top: -2px; }


.fs-room { display: grid; gap: 14px; min-width: 0; }
.fs-room-stage, .fs-room-body { display: grid; gap: 14px; min-width: 0; }
.fs-room-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.fs-room-main, .fs-room-side { display: grid; gap: 14px; min-width: 0; align-content: start; }

.fs-turns { display: grid; gap: 8px; min-width: 0; }
.fs-turns-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.fs-turns-k { margin: 0; font: 700 var(--fs-2) var(--body); color: var(--mute); }
.fs-turns-list { list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; min-width: 0; }
.fs-turn { flex: 0 0 auto; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 1px 8px; width: 148px; min-height: 48px;
  padding: 6px 10px; box-sizing: border-box; border-radius: var(--r); background: var(--row); border: 1px solid var(--rule); }
.fs-turn-no { grid-row: 1 / span 2; font: 700 var(--fs-1) var(--mono); color: var(--dim); }
.fs-turn-name { font: 700 var(--fs-2) var(--body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fs-turn-tag { font: 600 var(--fs-1) var(--body); color: var(--mute); white-space: nowrap; }
.fs-turn.is-now { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--row)); }
.fs-turn.is-now .fs-turn-tag, .fs-turn.is-mine .fs-turn-name { color: var(--gold); }
.fs-turn.is-mine:not(.is-now) { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.fs-turn-round { flex: 0 0 auto; display: grid; place-items: center; align-content: center; min-width: 68px; padding: 4px 8px; box-sizing: border-box;
  border-radius: var(--r); border: 1px dashed var(--rule); color: var(--mute); }
.fs-turn-round b { font: 700 var(--fs-1) var(--body); white-space: nowrap; }
.fs-turn-dir { font: 700 var(--fs-4) var(--body); line-height: 1; color: var(--ink); }

.fs-otc { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; border-color: color-mix(in srgb, var(--gold) 35%, var(--rule)); }
.fs-otc.is-mine { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), var(--shadow-card); }
.fs-otc-main { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.fs-otc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.fs-otc-name { font: 700 var(--fs-5)/1.05 var(--cond); font-size: clamp(26px, 7vw, 36px); letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; }
.fs-otc-meta { color: var(--mute); font-size: var(--fs-2); }
.fs-otc-side { display: grid; justify-items: end; gap: 8px; }
.fs-otc-clock { display: flex; align-items: center; gap: 12px; }
.fs-snd { position: relative; display: inline-flex; }
.fs-snd-btn { width: 44px; min-height: 44px; padding: 0; font-size: var(--fs-4); color: var(--ink); }
.fs-snd-btn.is-off { color: var(--mute); }
.fs-snd-btn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.fs-snd-tray { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; box-sizing: border-box; width: 232px; max-width: calc(100vw - 48px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-radius: var(--r-lg); background: var(--panel);
  border: 1px solid var(--rule); box-shadow: var(--shadow-2); }
.fs-snd-tray[hidden] { display: none; }
.fs-snd-opt { gap: 6px; min-height: 44px; padding: 4px 10px; }
.fs-snd-opt svg { font-size: var(--fs-4); }
.fs-snd-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-left: 10px; }
.fs-snd-k { font: 600 var(--fs-2) var(--body); color: var(--mute); }
.fs-vol { box-sizing: border-box; flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0; background: transparent; accent-color: var(--gold); cursor: pointer; }
.fs-vol:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); }
@media (max-width: 639px) {
  .fs-otc-clock { flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
}
.fs-finale { position: fixed; inset: 0; z-index: 150; cursor: default; touch-action: none; -webkit-tap-highlight-color: transparent; }
.fs-finale canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fs-finale.is-fading canvas { opacity: 0; }
#view.fs-arriving > * { opacity: 0; }
@keyframes fs-arrive {
  from { opacity: 0; transform: translate3d(56px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .fs-finale canvas { transition: opacity .6s ease-out; }
  #view.fs-arrive > * { animation: fs-arrive 1100ms cubic-bezier(.16, 1, .3, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-finale { display: none; }
  #view.fs-arriving > * { opacity: 1; }
}
.fs-count { font: 700 var(--fs-5)/1 var(--cond); font-size: clamp(44px, 13vw, 64px); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ink); }
.fs-count.is-mine { color: var(--gold); }
.fs-count.is-low { color: var(--fx-bad-ink); }
.fs-auto { min-height: 36px; padding: 4px 14px; font-size: var(--fs-2); }
.fs-start { min-height: 44px; padding: 8px 22px; font-size: var(--fs-3); }
.fs-commish { gap: 8px; align-content: start; }
.fs-commish-confirm { flex-basis: 100%; color: var(--ink); font-size: var(--fs-2); }
.fs-autobar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--fx-warn-ink);
  border-color: color-mix(in srgb, var(--acc-amber) 60%, var(--rule)); background: color-mix(in srgb, var(--acc-amber) 12%, var(--panel)); }
.fs-autobar-k { font: 700 var(--fs-3) var(--body); }
.fs-autobar-off { min-height: 40px; }
.fs-draft.is-busy { opacity: .8; }
.fs-lrow.is-open { border: 1px dashed var(--rule); background: transparent; }
.fs-lrow .fs-open-name { color: var(--mute); }
.fs-auto.is-on { color: var(--fx-warn-ink); border-color: color-mix(in srgb, var(--acc-amber) 55%, var(--rule)); background: color-mix(in srgb, var(--acc-amber) 12%, transparent); }

.fs-avail, .fs-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fs-arow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; min-height: 52px; padding: 8px 10px;
  border-radius: var(--r); background: var(--row); border: 1px solid transparent; box-sizing: border-box; }
.fs-arow.is-queued { border-color: color-mix(in srgb, var(--acc-violet) 50%, var(--rule)); }
.fs-arow.is-over { opacity: .62; }
.fs-arow-who { display: grid; gap: 1px; min-width: 0; }
.fs-arow-kind { font: 700 var(--fs-1) var(--mono); color: var(--mute); white-space: nowrap; }
.fs-arow.has-rank { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.fs-arow-rank { min-width: 2ch; font: 700 var(--fs-1) var(--mono); color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.fs-arow-price { display: grid; justify-items: end; gap: 2px; line-height: 1; }
.fs-arow-price b { font: 700 var(--fs-4) var(--mono); color: var(--gold); }
.fs-arow-price span { font-size: var(--fs-1); color: var(--mute); }
.fs-arow-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fs-act { min-height: 32px; padding: 4px 14px; font-size: var(--fs-2); }
.fs-q.is-on { color: var(--ink); border-color: color-mix(in srgb, var(--acc-violet) 55%, var(--rule)); background: color-mix(in srgb, var(--acc-violet) 14%, transparent); }
.fs-qrow { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px 4px 10px; border-radius: var(--r); background: var(--row); min-width: 0; }
.fs-qname { flex: 1; min-width: 0; font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-qrow.is-gone .fs-qname { color: var(--dim); text-decoration: line-through; }
.fs-qrow .fs-arow-acts { grid-column: auto; flex-wrap: nowrap; }
.fs-qrow .fs-draft { margin-right: 4px; }
.fs-queue-card .fs-qrow { flex-wrap: wrap; }
.fs-queue-card .fs-qname { flex: 1 1 120px; }
.fs-queue-card .fs-qrow .fs-arow-acts { margin-left: auto; }

.fs-rslots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fs-rslot { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px; border-radius: var(--r); background: var(--row); border: 1px solid var(--rule); min-width: 0; }
.fs-rslot.is-empty { border-style: dashed; background: transparent; }
.fs-rslot-k { font: 600 var(--fs-1) var(--body); color: var(--dim); }
.fs-rslot-name { font: 600 var(--fs-2) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.fs-board-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -4px; padding: 0 4px 6px; }
.fs-board-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fs-turns-list .sr-only, .fs-board-scroll .sr-only { left: 0; top: 0; }
.fs-grid { display: grid; gap: 4px; width: 100%; min-width: calc(40px + var(--seats, 4) * 122px); }
.fs-grow { display: grid; grid-template-columns: 40px repeat(var(--seats, 4), minmax(0, 1fr)); gap: 4px; }
.fs-gcorner, .fs-gr { display: grid; place-items: center; font: 700 var(--fs-1) var(--mono); color: var(--dim); }
.fs-ghead { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px;
  border-radius: var(--r-sm); background: var(--lift); min-width: 0; }
.fs-ghead-who { display: grid; gap: 1px; min-width: 0; }
.fs-ghead b { font: 700 var(--fs-2) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-ghead.is-me b { color: var(--gold); }
.fs-ghead.is-now { box-shadow: inset 0 0 0 1px var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--lift)); }
.fs-gcell.is-col { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 38%, transparent); }
.fs-gdir { font: 700 var(--fs-2) var(--body); line-height: 1; color: var(--mute); }
.fs-gcell { --ally: var(--rule); display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 8px; border-radius: var(--r-sm); box-sizing: border-box; min-width: 0;
  background: var(--row); border: 1px solid transparent; }
.fs-gcell.is-a { background: color-mix(in srgb, var(--ally) 12%, var(--row)); }
.fs-gcell.is-p { background: color-mix(in srgb, var(--acc-violet) 12%, var(--row)); }
.fs-gcell.is-mine { border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.fs-gcell.is-now { border: 1px dashed var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.fs-gname { font: 600 var(--fs-1) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--ink); }
.fs-gcell.is-now .fs-gname { color: var(--gold); }
.fs-gtag { margin-left: auto; font: 700 var(--fs-1) var(--mono); color: var(--mute); }
.fs-here { position: absolute; right: -2px; bottom: 0; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%;
  background: var(--good); border: 2px solid var(--panel); }
.fs-here.is-away { background: var(--panel); border: 2px solid var(--mute); }
.fs-here-pill { gap: 6px; }
.fs-here-pill .fs-here { position: static; flex: none; border-color: transparent; }
.fs-here-pill.is-away .fs-here { border-color: var(--mute); }
.fs-here-pill.is-in { color: var(--fx-good-ink); border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); }
.fs-turn-tag.is-away, .fs-gtag.is-away { color: var(--mute); font-family: var(--body); }

.fs-settings { align-content: start; }
.fs-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fs-fieldbox { display: grid; gap: 6px; min-width: 0; }
.fs-field { display: block; }

.fs-lineup { display: grid; gap: 12px; min-width: 0; }
.fs-lgroup { gap: 8px; }
.fs-lrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fs-lrow { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 6px 10px; min-height: 52px; padding: 8px 10px;
  border-radius: var(--r); background: var(--row); border: 1px solid transparent; box-sizing: border-box; }
.fs-lrow:has(.fs-lnum) { grid-template-columns: auto auto minmax(0, 1fr); }
.fs-lrow.is-captain { border-color: color-mix(in srgb, var(--medal-gold) 55%, var(--rule)); background: color-mix(in srgb, var(--medal-gold) 7%, var(--row)); }
.fs-lrow.is-nowar { border-color: color-mix(in srgb, var(--acc-amber) 45%, var(--rule)); }
.fs-lrow.is-moving { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.fs-lnum { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 var(--fs-1) var(--mono); color: var(--mute); background: var(--lift); }
.fs-lrow-who { display: grid; gap: 3px; min-width: 0; }
.fs-lrow-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.fs-here { color: var(--bg); }
.fs-order { border-color: var(--rule); }
.fs-lineup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-save-inline { display: none; }
.fs-lineup-dock { justify-content: space-between; }
.fs-dock-note { color: var(--mute); font-size: var(--fs-2); }
.fs-swap { border-color: color-mix(in srgb, var(--acc-violet) 45%, var(--rule)); }
.fs-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fs-week { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border-radius: var(--r); background: var(--row); }
.fs-week > span:first-child { flex: 1; color: var(--mute); font-size: var(--fs-2); }
.fs-week b { font: 700 var(--fs-3) var(--mono); }
.fs-week.is-sim { border: 1px dashed color-mix(in srgb, var(--acc-amber) 45%, var(--rule)); }
.fs-week.is-beta b { color: var(--mute); }

.fs-cover.is-warn { color: var(--fx-warn-ink); }

.fs-page .share-btn.fs-share { min-height: 40px; padding: 8px 18px; gap: 8px; color: var(--ink); background: var(--lift);
  font: 700 var(--fs-3) var(--body); letter-spacing: 0; text-transform: none; }
.fs-page .share-btn.fs-share.is-head { min-height: 36px; padding: 6px 14px; margin-left: auto; font-size: var(--fs-2); }
.fs-card { gap: 12px; }

.fs-league { display: grid; gap: 14px; }
.fs-wchips { display: none; gap: 4px; flex-wrap: wrap; }
.fs-wchip { padding: 2px 8px; border-radius: 999px; font: 600 var(--fs-1) var(--mono); color: var(--mute); background: var(--lift); }

.fs-pclock { display: none; }
.fs-turn.is-now .fs-turn-no, .fs-turn.is-mine .fs-turn-no { color: var(--mute); }
.fs-gcell .fs-gtag, .fs-ghead.is-now .fs-gtag { color: var(--ink); }
.fs-turns-list:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 639px), (max-height: 500px) {
  .fs-pclock { position: sticky; top: var(--sticky-top); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 44px; padding: 6px 12px; box-sizing: border-box; border-radius: var(--r); background: var(--panel); border: 1px solid var(--rule);
    box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .8); }
  .fs-pclock.is-mine { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); }
  .fs-pclock-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--fs-3) var(--body); color: var(--ink); }
  .fs-pclock.is-mine .fs-pclock-who { color: var(--gold); }
  .fs-pclock-count { flex: none; font: 700 var(--fs-5)/1 var(--cond); font-size: clamp(22px, 7vw, 26px); font-variant-numeric: tabular-nums; color: var(--ink); }
  .fs-pclock-count.is-low { color: var(--fx-bad-ink); }
  .fs-avail-card .fs-arow-acts .fs-act { min-height: 44px; padding-inline: 18px; }
  .fs-queue-card .fs-arow-acts .fs-act { min-height: 44px; padding-inline: 18px; }
}
.fs-team-name { display: inline-flex; align-items: center; min-height: 32px; }

@media (min-width: 640px) {
  .fs-teams { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .fs-tiles { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .fs-ctx { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); }
  .fs-ctx-slot { grid-column: 1 / -1; }
  .fs-arow { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .fs-arow.has-rank { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
  .fs-arow-acts { grid-column: auto; flex-wrap: nowrap; }
  .fs-lrow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fs-lrow:has(.fs-lnum) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .fs-lrow-acts { grid-column: auto; flex-wrap: nowrap; }
  .fs-fields { grid-template-columns: 1fr 1fr; }
  .fs-rslots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-wchips { display: inline-flex; }
}
@media (min-width: 960px) {
  .fs-room-cols { grid-template-columns: minmax(0, 1fr) 340px; }
  .fs-rslots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-room-side { position: sticky; top: calc(var(--sticky-top) + 12px); }
  .fs-save-inline { display: inline-flex; }
}
@media (prefers-reduced-motion: no-preference) {
  .fs-gcell.is-new { animation: fs-drop .42s cubic-bezier(.2, .9, .3, 1.3) both; }
  .fs-otc.is-new { animation: fs-flash .6s ease-out 1; }
  .fs-gcell.is-now { animation: fs-breathe 1.6s ease-in-out infinite; }
  .fs-count.is-low { animation: fs-tick 1s steps(2, end) infinite; }
  .fs-lrow, .fs-arow { transition: border-color .14s ease, background-color .14s ease; }
  .fs-turns.is-new .fs-turn { animation: fs-slide .32s ease-out both; }
  .fs-snd-tray.is-in { animation: fs-snd-in .14s ease-out both; }
}
@keyframes fs-snd-in { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
@keyframes fs-slide { 0% { opacity: .35; transform: translateX(16px); } 100% { opacity: 1; transform: none; } }
@keyframes fs-drop { 0% { opacity: 0; transform: translateY(-8px) scale(.92); } 60% { opacity: 1; transform: translateY(1px) scale(1.03); } 100% { transform: none; } }
@keyframes fs-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent), var(--shadow-card); } 100% { box-shadow: 0 0 0 10px transparent, var(--shadow-card); } }
@keyframes fs-breathe { 0%, 100% { background-color: color-mix(in srgb, var(--gold) 4%, transparent); } 50% { background-color: color-mix(in srgb, var(--gold) 14%, transparent); } }
@keyframes fs-tick { 0% { opacity: 1; } 100% { opacity: .55; } }

.wcs-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin-top: -4px; }
.wcs-tabs::-webkit-scrollbar { display: none; }
.wcs-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 16px; border-radius: 999px;
  white-space: nowrap; text-decoration: none; box-sizing: border-box; font: 700 var(--fs-3) var(--cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); background: var(--panel); border: 1px solid var(--rule); }
.wcs-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.wcs-tab[aria-current="page"] { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.wcs-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcs-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; box-sizing: border-box;
  font: 700 var(--fs-1)/1 var(--mono); letter-spacing: 0; color: var(--bg); background: var(--medal-gold); }
.wcs-page { display: grid; gap: 14px; min-width: 0; }
.wcs-dot { --dot: var(--gold); }

.wcs-mview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 440px; }
.wcs-mview-btn { min-height: 44px; font: 700 var(--fs-3) var(--body); }
.wcs-mbody { display: grid; gap: 14px; min-width: 0; }
.wcs-mbody[aria-busy="true"] { opacity: .55; }
.wcs-weeks { display: grid; gap: 8px; }
.wcs-week-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.wcs-week-seg::-webkit-scrollbar { display: none; }
.wcs-sim-btn { border-style: dashed; }
.wcs-week { gap: 6px; }
.wcs-week-tag { padding: 1px 6px; border-radius: 999px; font: 700 var(--fs-1) var(--body); color: var(--medal-gold);
  background: color-mix(in srgb, var(--medal-gold) 16%, transparent); }
.wcs-week-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wcs-week-title { margin: 0; font: 700 var(--fs-4)/1.1 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.wcs-refresh { min-height: 32px; padding: 4px 14px; font-size: var(--fs-2); margin-left: auto; }
.wcs-game { gap: 12px; }
.wcs-game.is-mine { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.wcs-game.is-playoff { border-color: color-mix(in srgb, var(--medal-gold) 45%, var(--rule)); }
.wcs-game-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wcs-face { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.wcs-vs { font: 700 var(--fs-1) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.wcs-side { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.wcs-side.is-right { justify-items: end; text-align: right; }
.wcs-side-who { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.wcs-side.is-right .wcs-side-who { flex-direction: row-reverse; }
.wcs-side-name { display: grid; min-width: 0; }
.wcs-side-name b { font: 600 var(--fs-3) var(--body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcs-side-bye { font: 600 var(--fs-3) var(--body); color: var(--mute); }
.wcs-side-meta { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.wcs-score { font: 700 var(--fs-5)/1 var(--cond); font-size: clamp(30px, 9vw, 40px); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: .01em; }
.wcs-score.is-live { color: var(--gold); }
.wcs-side.is-win .wcs-score { color: var(--medal-gold); }
.wcs-side.is-loss .wcs-score { color: var(--mute); }
.wcs-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--mute) 30%, transparent); overflow: hidden; }
.wcs-bar-home { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.wcs-cap { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; font: 700 var(--fs-1)/1 var(--cond);
  color: var(--bg); background: var(--gold); }
.wcs-line-pts { font: 700 var(--fs-2) var(--mono); color: var(--ink); }
.wcs-proj { color: var(--mute); font-size: var(--fs-1); }
.wcs-hh { display: grid; gap: 12px; min-width: 0; }
.wcs-hh-switch { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; max-width: 560px; }
.wcs-hh-step { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; cursor: pointer; box-sizing: border-box;
  color: var(--ink); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
.wcs-hh-step:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.wcs-hh-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcs-hh-chev { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wcs-hh-pick { display: block; min-width: 0; }
.wcs-hh-select { display: block; width: 100%; height: 44px; cursor: pointer; font-weight: 600; text-overflow: ellipsis; }
.wcs-hh-card { gap: 14px; }
.wcs-hh-card:focus { outline: none; }
.wcs-hh-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcs-hh-card .wcs-face { align-items: start; }
.wcs-hh-lines { display: grid; gap: 12px; min-width: 0; }
.wcs-hh-group { display: grid; gap: 6px; min-width: 0; }
.wcs-hh-k { margin: 0; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wcs-hh-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wcs-hh-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.wcs-hh-lines.is-solo .wcs-hh-row { grid-template-columns: minmax(0, 1fr); }
.wcs-hh-cell { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; min-height: 40px; padding: 4px 8px;
  border-radius: var(--r); box-sizing: border-box; background: var(--row); }
.wcs-hh-cell.is-away { flex-direction: row-reverse; }
.wcs-hh-cell.is-empty { background: transparent; }
.wcs-hh-cell.is-captain { background: color-mix(in srgb, var(--gold) 10%, var(--row)); }
.wcs-hh-who { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.wcs-hh-cell.is-away .wcs-hh-who { flex-direction: row-reverse; text-align: right; }
.wcs-hh-words { display: grid; min-width: 0; }
.wcs-hh-name { font-size: var(--fs-2); line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wcs-hh-cell.is-idle .wcs-hh-name { color: var(--mute); }
.wcs-hh-tag { font: 600 var(--fs-1) var(--body); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcs-hh-pts { flex: none; font-variant-numeric: tabular-nums; }
.wcs-hh-group.is-bench .wcs-hh-cell:not(.is-empty) { background: transparent; border: 1px dashed var(--rule); }
.wcs-hh-total { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px;
  padding: 4px 10px; border-radius: var(--r); box-sizing: border-box; background: var(--lift); }
.wcs-hh-lines.is-solo .wcs-hh-total { grid-template-columns: minmax(0, 1fr) auto; }
.wcs-hh-sum { justify-self: end; font: 700 var(--fs-4) var(--cond); font-variant-numeric: tabular-nums; color: var(--ink); }
.wcs-hh-sum ~ .wcs-hh-sum { justify-self: start; }
.wcs-hh-sum-k { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wcs-sb { display: grid; gap: 14px; min-width: 0; }
.wcs-sb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.wcs-stat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wcs-stat { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 10px 12px; border-radius: var(--r); background: var(--row); }
.wcs-stat-k { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wcs-stat-v b { font: 700 var(--fs-5)/1.1 var(--cond); font-variant-numeric: tabular-nums; color: var(--ink); }
.wcs-stat-unit { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.wcs-stat-sub { font-size: var(--fs-1); line-height: 1.35; color: var(--mute); overflow-wrap: anywhere; }
.wcs-results-title { margin: 0; }
.wcs-rlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.wcs-rgame { display: grid; gap: 4px; min-height: 44px; padding: 8px 10px; border-radius: var(--r); box-sizing: border-box; text-decoration: none;
  color: var(--ink); background: var(--row); border: 1px solid transparent; }
.wcs-rgame:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.wcs-rgame:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcs-rgame.is-mine { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.wcs-rgame.is-playoff:not(.is-mine) { border-color: color-mix(in srgb, var(--medal-gold) 35%, var(--rule)); }
.wcs-rgame-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wcs-rgame-k { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wcs-rside { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; }
.wcs-rname { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wcs-rname b { font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcs-rrec { flex: none; font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.wcs-rpts { font: 700 var(--fs-4) var(--cond); font-variant-numeric: tabular-nums; color: var(--ink); }
.wcs-rside.is-win .wcs-rpts { color: var(--medal-gold); }
.wcs-rside.is-loss .wcs-rname b, .wcs-rside.is-loss .wcs-rpts { color: var(--mute); }
.wcs-rbye { min-height: 30px; display: flex; align-items: center; font-size: var(--fs-2); color: var(--mute); }
.wcs-table { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wcs-tcols { display: none; }
.wcs-trow { position: relative; display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 44px;
  padding: 6px 10px; border-radius: var(--r); background: var(--row); border: 1px solid transparent; }
.wcs-trow.is-me { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.wcs-trow.is-in .wcs-place { color: var(--medal-gold); }
.wcs-place { font: 700 var(--fs-4) var(--cond); color: var(--mute); text-align: center; }
.wcs-trow-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wcs-trow-name b { font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcs-rec { font: 700 var(--fs-4) var(--cond); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.wcs-tvals { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.wcs-tval { display: inline-flex; align-items: baseline; gap: 4px; font: 600 var(--fs-1) var(--body); color: var(--mute); }
.wcs-tval-v { font: 700 var(--fs-1) var(--mono); color: var(--ink); }
.wcs-cutline { list-style: none; display: flex; align-items: center; gap: 8px; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase;
  color: var(--medal-gold); }
.wcs-cut-rule { flex: 1; height: 1px; background: color-mix(in srgb, var(--medal-gold) 40%, transparent); }
.wcs-bracket-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wcs-round { display: grid; gap: 8px; align-content: start; }
.wcs-bgame { display: grid; gap: 2px; padding: 6px; border-radius: var(--r); background: var(--row); border: 1px solid var(--rule); }
.wcs-bgame.is-final { border-color: color-mix(in srgb, var(--medal-gold) 50%, var(--rule)); }
.wcs-bgame-k { font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 0 4px; }
.wcs-bnote { font-size: var(--fs-1); color: var(--mute); padding: 2px 4px 0; }
.wcs-result { margin: 0; font-size: var(--fs-2); color: var(--mute); text-align: center; }
.wcs-bside { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; padding: 0 4px; border-radius: var(--r-sm); }
.wcs-bside.is-win { background: color-mix(in srgb, var(--medal-gold) 14%, transparent); }
.wcs-bside.is-win .wcs-bname { color: var(--ink); font-weight: 700; }
.wcs-seed { font: 700 var(--fs-1) var(--mono); color: var(--mute); text-align: center; }
.wcs-bname { font-size: var(--fs-2); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcs-bpts { font: 700 var(--fs-2) var(--mono); }
.wcs-champ { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border-radius: var(--r);
  background: color-mix(in srgb, var(--medal-gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--medal-gold) 45%, var(--rule)); }
.wcs-champ-k { font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--medal-gold); }
.wcs-champ-name { font: 700 var(--fs-5)/1 var(--cond); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .wcs-mbody { transition: opacity .15s ease; }
}
@media (max-width: 719px) {
  .wcs-matchups .wcs-week-seg, .wcs-matchups .wcs-season-seg { flex-wrap: wrap; overflow: visible; }
  .wcs-matchups .wcs-week, .wcs-matchups .wcs-sim-btn, .wcs-matchups .wcs-season { flex: 1 1 auto; min-height: 44px; }
  .wcs-matchups .wcs-refresh, .wcs-matchups .wcs-premium { min-height: 44px; }
}
@media (min-width: 720px) {
  .wcs-bracket-cols { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .wcs-stat-list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .wcs-tcols, .wcs-trow { grid-template-columns: 24px 26px minmax(0, 1fr) 64px 72px 72px 56px; }
  .wcs-totals .wcs-tcols, .wcs-totals .wcs-trow { grid-template-columns: 24px 26px minmax(0, 1fr) 104px 88px; }
  .wcs-tcols { display: grid; gap: 0 10px; padding: 0 11px; font: 700 var(--fs-1) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
  .wcs-tcols span:nth-child(2) { grid-column: 2 / 4; }
  .wcs-tcols span:nth-child(n+3) { text-align: right; }
  .wcs-tvals { display: contents; }
  .wcs-tval { justify-content: flex-end; }
  .wcs-tval-v { font-size: var(--fs-2); }
  .wcs-tval-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 720px) and (max-width: 1039px) {
  .wcs-rlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .wcs-sb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.wcs-tsection { display: grid; gap: 8px; }
.wcs-trade-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.wcs-none { margin: 0; }
.wcs-trade { gap: 10px; }
.wcs-trade.is-proposed { border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.wcs-trade.is-accepted { border-color: color-mix(in srgb, var(--acc-amber) 45%, var(--rule)); }
.wcs-trade-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.wcs-trade-when { font: 600 var(--fs-1) var(--mono); color: var(--mute); margin-left: auto; }
.wcs-trade-cols, .wcs-build-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.wcs-trade-col, .wcs-build-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.wcs-trade-who { font: 700 var(--fs-2) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.wcs-assets { display: grid; gap: 6px; }
.wcs-asset { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px; border-radius: var(--r); box-sizing: border-box; width: 100%;
  text-align: left; font: inherit; color: var(--ink); background: var(--row); border: 1px solid var(--rule); }
button.wcs-asset { cursor: pointer; }
button.wcs-asset:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
button.wcs-asset:disabled { opacity: .45; cursor: default; }
.wcs-asset.is-on { background: color-mix(in srgb, var(--gold) 16%, var(--row)); border-color: var(--gold); }
.wcs-asset.is-out .wcs-asset-meta { color: var(--fx-warn-ink); }
.wcs-asset:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcs-asset-words { display: grid; min-width: 0; flex: 1; }
.wcs-asset-words b { font: 600 var(--fs-3) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcs-asset-meta { font-size: var(--fs-1); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcs-asset-price { flex: none; font: 700 var(--fs-2) var(--mono); color: var(--medal-gold); }
.wcs-trade-note { margin: 0; padding: 8px 10px; border-radius: var(--r); background: var(--lift); color: var(--ink); font-size: var(--fs-2); }
.wcs-votes { margin: 0; }
.wcs-danger { color: var(--ink); background: color-mix(in srgb, var(--bad) 60%, var(--panel)); border-color: var(--bad); }
.wcs-builder { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.wcs-close { min-height: 32px; padding: 4px 14px; font-size: var(--fs-2); }
.wcs-who { display: flex; flex-wrap: wrap; gap: 6px; }
.wcs-who-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 6px; border-radius: 999px; cursor: pointer;
  font: 600 var(--fs-3) var(--body); color: var(--ink); background: var(--row); border: 1px solid var(--rule); }
.wcs-who-btn.is-on { background: color-mix(in srgb, var(--gold) 16%, var(--row)); border-color: var(--gold); }
.wcs-who-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcs-check { margin: 0; font: 600 var(--fs-2) var(--body); }
.wcs-check.is-bad { color: var(--fx-warn-ink); }
.wcs-check.is-ok { color: var(--fx-good-ink); }
.wcs-note { display: grid; gap: 4px; }
@media (min-width: 720px) {
  .wcs-trade-cols, .wcs-build-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1040px) {
  .wcs-trade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wcs-chat { display: grid; gap: 8px; min-width: 0; }
.wcs-chat-card { padding: 10px; }
.wcs-msgs { list-style: none; margin: 0; padding: 0 2px; display: grid; gap: 8px; align-content: start; max-height: min(62vh, 560px); overflow-y: auto;
  overscroll-behavior: contain; }
.wcs-chat.is-compact .wcs-msgs { max-height: 300px; }
.wcs-msg { display: grid; gap: 2px; padding: 6px 10px; border-radius: var(--r); background: var(--row); min-width: 0; }
.wcs-msg.is-me { background: color-mix(in srgb, var(--gold) 9%, var(--row)); }
.wcs-msg-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wcs-msg-who { font: 600 var(--fs-2) var(--body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcs-msg.is-me .wcs-msg-who { color: var(--gold); }
.wcs-msg-time { font: 500 var(--fs-1) var(--mono); color: var(--dim); white-space: nowrap; }
.wcs-msg.is-me .wcs-msg-time { color: var(--mute); }
.wcs-msg-body { margin: 0; font: 400 var(--fs-3)/1.45 var(--body); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.wcs-msg.is-deleted .wcs-msg-body { color: var(--dim); font-style: italic; }
.wcs-msg.is-system { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; background: transparent;
  border: 1px dashed var(--rule); }
.wcs-msg.is-trade { border-color: color-mix(in srgb, var(--medal-gold) 45%, var(--rule)); }
.wcs-msg-tag { padding: 1px 8px; border-radius: 999px; font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); background: var(--lift); }
.wcs-msg.is-trade .wcs-msg-tag { color: var(--medal-gold); background: color-mix(in srgb, var(--medal-gold) 14%, transparent); }
.wcs-msg-sys { font-size: var(--fs-2); color: var(--mute); overflow-wrap: anywhere; }
.wcs-msg-del { margin-left: auto; min-height: 32px; padding: 2px 10px; border-radius: 999px; cursor: pointer; font: 600 var(--fs-1) var(--body);
  color: var(--mute); background: transparent; border: 1px solid transparent; }
.wcs-msg-del:hover, .wcs-msg-del:focus-visible { color: var(--ink); border-color: var(--rule); }
.wcs-msg-del.is-armed { color: var(--ink); background: color-mix(in srgb, var(--bad) 40%, transparent); border-color: var(--bad); }
.wcs-msg-del:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcs-msg-none { list-style: none; color: var(--mute); font-size: var(--fs-2); padding: 8px 2px; }
.wcs-older { justify-self: center; min-height: 32px; padding: 4px 14px; font-size: var(--fs-2); }
.wcs-older[hidden], .wcs-compose[hidden] { display: none; }
.wcs-compose { display: grid; gap: 4px; }
.wcs-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.wcs-text { flex: 1 1 auto; height: auto; min-height: 40px; padding: 8px 12px; resize: vertical; line-height: 1.4; }
.wcs-send { flex: none; }
.wcs-count { justify-self: end; font: 500 var(--fs-1) var(--mono); color: var(--dim); }
.wcs-dchat { border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
.wcs-dchat-sum { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none; }
.wcs-dchat-sum::-webkit-details-marker { display: none; }
.wcs-dchat-sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcs-dchat-k { font: 700 var(--fs-2) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.wcs-dchat-icon { display: none; }
.wcs-dchat[open] .wcs-dchat-sum { border-bottom: 1px solid var(--rule); }
.wcs-dchat > .wcs-chat { padding: 10px; }
@media (min-width: 960px) {
  .wcs-dchat { position: fixed; right: 16px; bottom: 16px; z-index: 25; width: 340px; max-width: calc(100vw - 32px); box-shadow: var(--shadow-2); }
  .wcs-dchat .wcs-msgs { max-height: min(46vh, 380px); }
}
.wcs-bell { position: relative; margin-left: auto; }
.wcs-bell-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; box-sizing: border-box;
  color: var(--ink); background: var(--panel); border: 1px solid var(--rule); }
.wcs-bell-btn:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.wcs-bell-btn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.wcs-bell-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcs-bell-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wcs-bell-count { position: absolute; top: -4px; right: -6px; }
.wcs-bell-count[hidden], .wcs-badge[hidden] { display: none; }
.wcs-bell-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(360px, calc(100vw - 32px)); box-sizing: border-box;
  display: grid; gap: 6px; padding: 10px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-2); }
.wcs-bell-panel[hidden] { display: none; }
.wcs-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.wcs-bell-title { font: 700 var(--fs-2) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.wcs-bell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.wcs-alert-link { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--row);
  border: 1px solid transparent; }
.wcs-alert-link:hover { border-color: var(--rule); }
.wcs-alert-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.wcs-alert.is-new .wcs-alert-link { background: color-mix(in srgb, var(--gold) 10%, var(--row)); border-color: color-mix(in srgb, var(--gold) 35%, var(--rule)); }
.wcs-alert-text { font: 500 var(--fs-2)/1.35 var(--body); }
.wcs-alert-meta { font: 500 var(--fs-1) var(--mono); color: var(--mute); }
.wcs-alert-none { color: var(--mute); font-size: var(--fs-2); padding: 8px 4px; }
@media (max-width: 480px) {
  .wcs-bell { position: static; }
  .wcs-bell-panel { left: 16px; right: 16px; width: auto; top: auto; margin-top: 8px; }
}
.wcs-bell-view, .wcn { display: grid; gap: 6px; }
.wcs-bell-panel.is-prefs { width: min(420px, calc(100vw - 32px)); }
.wcs-bell-view[hidden], .wcn[hidden], .wcs-bell-clear[hidden] { display: none; }
.wcs-bell-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.wcs-bell-clear, .wcn-back { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 14px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--row); color: var(--ink); cursor: pointer;
  font: 700 var(--fs-2) var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.wcs-bell-gear { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; box-sizing: border-box; cursor: pointer;
  border: 1px solid var(--rule); background: var(--row); color: var(--ink); }
.wcs-bell-gear-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wcs-bell-clear:hover, .wcn-back:hover, .wcs-bell-gear:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.wcs-bell-clear:focus-visible, .wcn-back:focus-visible, .wcs-bell-gear:focus-visible, .wcn-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wcn-head { gap: 10px; justify-content: flex-start; }
.wcn-body { display: grid; gap: 8px; max-height: min(64vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.wcn-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; min-height: 44px; box-sizing: border-box;
  padding: 6px 10px; border-radius: var(--r); background: var(--row); }
.wcn-switch-row { cursor: pointer; }
.wcn-name { font: 600 var(--fs-2)/1.3 var(--body); color: var(--ink); }
.wcn-group { display: grid; gap: 4px; }
.wcn-group-title { margin: 6px 4px 0; font: 700 var(--fs-1) var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wcn-chips { display: grid; grid-template-columns: repeat(2, 72px); gap: 6px; margin-left: auto; }
.wcn.has-push .wcn-chips { grid-template-columns: repeat(3, 72px); }
.wcn-chip[data-channel="bell"] { grid-column: 1; }
.wcn-chip[data-channel="email"], .wcn-chip[data-channel="push"] { grid-column: 2; }
.wcn.has-push .wcn-chip[data-channel="push"] { grid-column: 3; }
.wcn-chip { min-height: 44px; min-width: 0; padding: 4px 8px; box-sizing: border-box; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--panel); color: var(--mute); font: 600 var(--fs-2) var(--body); }
.wcn-chip[aria-pressed="true"] { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--rule));
  background: color-mix(in srgb, var(--gold) 14%, var(--panel)); }
.wcn-chip:disabled { opacity: .45; cursor: default; }
.wcn-line { margin: 0; padding: 6px 4px; color: var(--mute); font-size: var(--fs-2); }
.wcn-device { display: grid; gap: 4px; }
@media (max-width: 480px) {
  .wcs-bell-panel.is-prefs { width: auto; }
  .wcn-type { flex-direction: column; align-items: stretch; }
  .wcn-chips { margin-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcn.has-push .wcn-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-ctx > .wcs-tabs { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid var(--rule); }
@media (max-width: 480px) {
  .wcs-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .wcs-tab { justify-content: center; gap: 4px; padding: 4px 4px; font-size: var(--fs-2); letter-spacing: .03em; }
  .wcs-badge { min-width: 18px; height: 18px; padding: 0 4px; }
}
.wcs-msg.is-system { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tag time del" "body body body"; }
.wcs-msg.is-system .wcs-msg-tag { grid-area: tag; justify-self: start; }
.wcs-msg.is-system .wcs-msg-time { grid-area: time; }
.wcs-msg.is-system .wcs-msg-sys { grid-area: body; }
.wcs-msg.is-system .wcs-msg-del { grid-area: del; }
@media (hover: hover) {
  .wcs-msg .wcs-msg-del { opacity: 0; }
  .wcs-msg:hover .wcs-msg-del, .wcs-msg .wcs-msg-del:focus-visible, .wcs-msg .wcs-msg-del.is-armed { opacity: 1; }
}
@media (max-width: 959px) {
  .wcs-dchat:not([open]) { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 20; box-shadow: var(--shadow-2); }
  html.nav-eh .wcs-dchat:not([open]) { bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (min-width: 641px) and (max-width: 959px) { html.nav-eh .wcs-dchat:not([open]) { bottom: calc(8px + env(safe-area-inset-bottom)); } }
@media (max-width: 959px) and (max-height: 500px) { .wcs-dchat:not([open]) { position: static; } }
@media (max-width: 640px) and (min-height: 501px) {
  .wcs-dchat:not([open]) { width: 44px; margin: 0 -16px 0 auto; border-right: 0; border-radius: 999px 0 0 999px;
    bottom: calc(54px + env(safe-area-inset-bottom)); }
  html.nav-eh .wcs-dchat:not([open]) { bottom: calc(110px + env(safe-area-inset-bottom)); }
  .wcs-dchat:not([open]) .wcs-dchat-sum { position: relative; justify-content: center; min-height: 40px; padding: 0 0 0 2px; }
  .wcs-dchat:not([open]) .wcs-dchat-icon { display: block; width: 20px; height: 20px; color: var(--gold); }
  .wcs-dchat:not([open]) .wcs-dchat-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wcs-dchat:not([open]) .wcs-badge { position: absolute; top: -7px; left: -7px; }
}
html:has(.fs-page) { scroll-padding-top: calc(var(--sticky-top) + 12px); scroll-padding-bottom: 16px; }
html:has(.fs-page .wcs-dchat:not([open])) { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
  html.nav-eh:has(.fs-page) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  html.nav-eh:has(.fs-page .wcs-dchat:not([open])) { scroll-padding-bottom: calc(158px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) and (min-height: 501px) { html:not(.nav-eh):has(.fs-page .wcs-dchat:not([open])) { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom)); } }
@media (max-width: 639px), (max-height: 500px) { html:has(.fs-pclock) { scroll-padding-top: calc(var(--sticky-top) + 60px); } }
.wcs-move-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wcs-move { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; padding: 8px 10px; border-radius: var(--r);
  background: var(--row); }
.wcs-move-tag { padding: 1px 8px; border-radius: 999px; font: 700 var(--fs-1) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
  background: var(--lift); }
.wcs-move.is-trade .wcs-move-tag { color: color-mix(in srgb, var(--medal-gold) 80%, var(--ink)); background: color-mix(in srgb, var(--medal-gold) 14%, transparent); }
.wcs-move-words { font-size: var(--fs-2); color: var(--ink); overflow-wrap: anywhere; }
.wcs-move-time { font: 500 var(--fs-1) var(--mono); color: var(--dim); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .wcs-bar-home { transition: width .5s cubic-bezier(.2, .9, .3, 1); }
  .wcs-score.is-live { animation: wcs-pulse 2.4s ease-in-out infinite; }
  .wcs-tab, .wcs-trow { transition: border-color .14s ease, background-color .14s ease, color .14s ease; }
}
@keyframes wcs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.badge.is-drought { cursor: default; border-color: color-mix(in srgb, var(--acc-amber) 45%, var(--rule)); }
.badge.is-drought .badge-kind { color: var(--acc-amber); }
.badge-count { flex: none; display: grid; place-items: center; min-width: 32px; padding: 0 2px;
  font: 700 var(--fs-3)/1 var(--cond); color: var(--acc-amber); font-variant-numeric: tabular-nums; }
.tcx-glyph.is-count { color: var(--acc-amber); font-size: var(--fs-1); letter-spacing: -.02em; }

.pw-dialog {
  margin: auto; padding: 0; box-sizing: border-box;
  width: min(580px, calc(100vw - 28px)); max-height: min(86vh, 760px);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%), var(--panel);
  color: var(--ink); box-shadow: var(--shadow-3); overflow: auto;
}
.pw-dialog::backdrop { background: var(--scrim); }
.pw-head { display: grid; justify-items: center; gap: 10px; padding: 26px var(--gutter) 6px; text-align: center; }
.pw-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.pw-mark .pw-icon { width: 26px; height: 26px; fill: color-mix(in srgb, var(--gold) 30%, transparent); }
.pw-title { margin: 0; font: 700 var(--fs-5)/1.2 var(--body); }
.pw-grid { list-style: none; margin: 0; padding: 14px var(--gutter);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pw-item { min-width: 0; }
.pw-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; height: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--row); color: var(--ink); text-decoration: none; }
.pw-tile .pw-icon { width: 36px; height: 36px; padding: 7px; box-sizing: border-box; border-radius: var(--r);
  color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.pw-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pw-text { display: grid; gap: 2px; min-width: 0; }
.pw-label { font: 700 var(--fs-2)/1.3 var(--body); overflow-wrap: anywhere; }
.pw-where { font-size: var(--fs-1); color: var(--mute); }
a.pw-tile:hover { border-color: var(--gold); }
a.pw-tile:hover .pw-label { color: var(--gold); }
a.pw-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pw-foot { display: flex; justify-content: center; padding: 4px var(--gutter) 22px; }
.pw-done { min-width: 160px; min-height: 44px; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .pw-dialog[open] { animation: pw-in .22s ease-out; }
  @keyframes pw-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) {
  .pw-dialog { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .pw-head { gap: 8px; padding-top: 16px; }
  .pw-mark { width: 40px; height: 40px; }
  .pw-mark .pw-icon { width: 22px; height: 22px; }
  .pw-title { font-size: var(--fs-4); }
  .pw-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 10px; }
  .pw-tile { grid-template-columns: 30px minmax(0, 1fr); padding: 6px 10px; }
  .pw-tile .pw-icon { width: 30px; height: 30px; padding: 6px; }
  .pw-text { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px; }
  .pw-where { text-align: right; }
  .pw-foot { padding-bottom: 16px; }
  .pw-done { width: 100%; }
  @media (prefers-reduced-motion: no-preference) {
    .pw-dialog[open] { animation: pw-up .24s ease-out; }
    @keyframes pw-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
  }
}
.pw-foot { flex-direction: column; align-items: center; gap: 10px; }
.pw-thanks { margin: 0; font-size: var(--fs-2); color: var(--mute); text-align: center; }

.blast-compose { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .blast-compose { grid-template-columns: minmax(0, 1fr) minmax(0, 680px); } }
.mp { display: grid; gap: 8px; min-width: 0; }
.mp-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-toggle { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--row); }
.mp-opt { padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--mute); font: inherit; cursor: pointer; }
.mp-opt[aria-pressed="true"] { background: var(--pill-on); color: var(--ink); }
.mp-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mp-stage { overflow-x: auto; padding: 12px; border-radius: var(--r-lg); background: #eef1f5; }
.mp-stage[data-theme="dark"] { background: #0B0D12; }
.mp-frame { display: block; max-width: none; height: 560px; margin: 0 auto; border: 0; border-radius: var(--r); background: transparent; }
.mp-note { margin: 0; color: var(--bad); font-size: var(--fs-2); }
.mp-note:empty { display: none; }


.tc-card { --tc-tint: #35C6E0;
  --pc-frame-free: linear-gradient(135deg, color-mix(in srgb, var(--tc-tint) 55%, #FFFFFF), var(--tc-tint) 50%, color-mix(in srgb, var(--tc-tint) 55%, #000000));
  background: linear-gradient(180deg, #1B2130, #0E1118) padding-box, var(--pc-frame-free) border-box; }
.tc-card.pc-look:not([class*="pc-frame-"]) { --pc-frame: var(--pc-frame-free); }
.tcx { border-width: 5px; }
.tcx-initials { display: grid; place-items: center; box-sizing: border-box; font: 700 var(--fs-4) var(--cond); color: #9AA4B4; }

.tc-card.pc-frame-obsidian, .pc-chip-frame-obsidian { --pc-glow: #8A90A2;
  --pc-frame: linear-gradient(135deg, #8A90A2, #2A2D36 35%, #4B5060 65%, #121318); }
.tc-card.pc-frame-royal, .pc-chip-frame-royal { --pc-glow: #8E5CE6;
  --pc-frame: linear-gradient(135deg, #D9C2FF, #8E5CE6 35%, #5B2DA8 65%, #2E1660); }
.tc-card.pc-frame-emerald, .pc-chip-frame-emerald { --pc-glow: #2FBF71;
  --pc-frame: linear-gradient(135deg, #B8F5D2, #2FBF71 35%, #13804A 65%, #0A4A2B); }
.tc-card.pc-frame-sakura, .pc-chip-frame-sakura { --pc-glow: #F7A8C4;
  --pc-frame: linear-gradient(135deg, #FFE4EE, #F7A8C4 35%, #E46A9A 65%, #A8406B); }
.tc-card.pc-frame-carbon, .pc-chip-frame-carbon { --pc-glow: #6B7383;
  --pc-frame: linear-gradient(135deg, #9AA4B4, #3A404C 35%, #6B7383 65%, #1E2229); }
.tc-card.pc-frame-laurel, .pc-chip-frame-laurel { --pc-glow: #D9B24A;
  --pc-frame: linear-gradient(135deg, #FFF2B8, #D9B24A 35%, #7FA650 65%, #5C4A1A); }
.pc-chip-frame-obsidian, .pc-chip-frame-royal, .pc-chip-frame-emerald,
.pc-chip-frame-sakura, .pc-chip-frame-carbon, .pc-chip-frame-laurel { background: var(--pc-frame); }
.pc-chip-frame-none { border-style: solid; border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc-tint, #35C6E0) 55%, #FFFFFF), var(--pc-tint, #35C6E0) 50%, color-mix(in srgb, var(--pc-tint, #35C6E0) 55%, #000000)); }

.tc.tc-compact { container-type: inline-size; }
.tc.tc-compact.is-horizontal { grid-template-columns: minmax(0, 720px); }
.tcx-side, .tcx-main { display: grid; gap: 8px; align-content: start; min-width: 0; }
@container (min-width: 540px) {
  .tcx.is-horizontal { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px; padding: 8px 8px 10px; }
  .tcx.is-horizontal .tcx-side { grid-template-rows: minmax(0, 1fr) auto; }
  .tcx.is-horizontal .tcx-head { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center;
    gap: 8px; min-height: 196px; padding: 18px 12px 14px; text-align: center; }
  .tcx.is-horizontal .tcx-head::after { background: linear-gradient(180deg, rgba(14,17,24,.3), rgba(14,17,24,.88) 70%); }
  .tcx.is-horizontal .tcx-avatar { width: 92px; height: 92px; }
  .tcx.is-horizontal .tcx-who { justify-items: center; padding-right: 0; max-width: 100%; }
  .tcx.is-horizontal .tcx-name { text-align: center; max-width: 100%; }
  .tcx.is-horizontal .tcx-tier, .tcx.is-horizontal .tcx-stats,
  .tcx.is-horizontal .tcx-extras, .tcx.is-horizontal .tcx-badges { margin: 0; }
}

.tc-wrap { container: tcwrap / inline-size; }
@container tcwrap (min-width: 760px) {
  .tc-row.has-moments:not(.is-horizontal) { display: grid; align-items: start;
    grid-template-columns: minmax(0, calc(380px + 2 * var(--gutter))) minmax(0, 1fr); }
  .tc-row.has-moments:not(.is-horizontal) > .tc-moments { padding: 12px var(--gutter) 0 0; }
  .tc-row.has-moments:not(.is-horizontal) .tc-moments-title { margin-top: 0; }
  .tc-row.has-moments:not(.is-horizontal) .tc-moment-row { grid-template-columns: minmax(0, 1fr); }
}
@container tcwrap (min-width: 1100px) {
  .tc-row.has-moments.is-horizontal { display: grid; align-items: start;
    grid-template-columns: minmax(0, calc(720px + 2 * var(--gutter))) minmax(0, 1fr); }
  .tc-row.has-moments.is-horizontal > .tc-moments { padding: 12px var(--gutter) 0 0; }
  .tc-row.has-moments.is-horizontal .tc-moments-title { margin-top: 0; }
  .tc-row.has-moments.is-horizontal .tc-moment-row { grid-template-columns: minmax(0, 1fr); }
}

.pe-card.is-horizontal { grid-template-columns: minmax(0, 1fr); }
.pe-card.is-horizontal .ce-preview { justify-content: center; }
.pe-card.is-horizontal .ce-preview .tc-card { max-width: 640px; margin-inline: auto; width: 100%; }

.pc-hero-dusk, .pc-chip-hero-dusk { --pc-hero-g: linear-gradient(115deg, #6B3FA0, #D2644F); }
.pc-hero-aurora, .pc-chip-hero-aurora { --pc-hero-g: linear-gradient(115deg, #1F8A70, #4FC98A 50%, #3FA7D6); }
.pc-hero-ember, .pc-chip-hero-ember { --pc-hero-g: linear-gradient(115deg, #8C2A1E, #FF8A3D); }
.pc-hero-ocean, .pc-chip-hero-ocean { --pc-hero-g: linear-gradient(115deg, #1B4E8C, #35C6E0); }
.pc-chip.pc-chip-hero-dusk, .pc-chip.pc-chip-hero-aurora, .pc-chip.pc-chip-hero-ember, .pc-chip.pc-chip-hero-ocean { background: var(--pc-hero-g); }
.player-hero > .pc-hero, .pe-hero-preview > .pc-hero { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: none; opacity: 1; }
.pc-hero-glow, .pc-hero-band { position: absolute; background: var(--pc-hero-g); }
.pc-hero-glow { inset: 0; opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
.pc-hero-band { left: 0; right: 0; bottom: 0; height: 4px; }
:root[data-theme="light"] .pc-hero-glow { opacity: .3; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pc-hero-glow { opacity: .3; }
}
@media (max-width: 640px) {
  .pc-hero-glow { -webkit-mask-image: linear-gradient(90deg, transparent 60%, #000); mask-image: linear-gradient(90deg, transparent 60%, #000); }
}
.pe-hero-preview { position: relative; display: flex; align-items: center; height: 76px; margin-bottom: 8px; padding: 0 14px;
  border-radius: var(--r); border: 1px solid var(--rule); background: var(--panel); overflow: hidden; }
.pe-hero-name { position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 var(--fs-4) var(--cond); color: var(--ink); }

.share-sheet-pic.is-tall { width: auto; max-width: 100%; max-height: min(62vh, 560px); margin-inline: auto; }

.player-hero .title-row { flex-wrap: wrap; row-gap: 8px; }
.ball-hero.has-cs { position: relative; z-index: 2; }
.hl-grid, .hl > .dm-thin { margin-inline: var(--gutter); }
@media (pointer: coarse) {
  .compare-link, .pvp-guide-pill { position: relative; }
  .compare-link::after, .pvp-guide-pill::after { content: ""; position: absolute; inset: -3px 0; border-radius: inherit; }
}

.pcf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-width: 0;
  padding: 6px 6px 6px 12px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); }
#view .pcf-h { margin: 0; color: var(--mute); font: 600 var(--fs-2)/1.2 var(--body); }
.pcf-btns { display: inline-flex; gap: 6px; }
.pcf-btn { min-height: 32px; min-width: 64px; padding: 4px 12px; border: 0; border-radius: 999px; background: var(--row);
  color: var(--ink); font: 600 var(--fs-2)/1.2 var(--body); cursor: pointer; }
.pcf-btn.is-won:hover { background: color-mix(in srgb, var(--good) 24%, var(--row)); }
.pcf-btn.is-lost:hover { background: color-mix(in srgb, var(--bad) 20%, var(--row)); }
.pcf-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pcf-btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.pcf-done { margin: 0; min-height: 32px; display: flex; align-items: center; color: var(--mute); font: 600 var(--fs-2)/1.2 var(--body); }
.pcf-done:focus { outline: none; }
.pcf-dialog { margin: auto; padding: 0; box-sizing: border-box; width: min(380px, calc(100vw - 32px)); max-height: 90vh;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-3); overflow: hidden auto; }
.pcf-dialog::backdrop { background: var(--scrim); }
.pcf-head { position: relative; display: grid; justify-items: center; gap: 6px; padding: 20px 16px 2px; text-align: center; }
.pcf-dialog.is-victory .pcf-head { padding-top: 26px;
  background: radial-gradient(110% 100% at 50% 0%, color-mix(in srgb, var(--medal-gold) 20%, transparent), transparent 70%); }
.pcf-title { margin: 0; font: 700 var(--fs-4)/1.25 var(--body); }
.pcf-dialog.is-victory .pcf-title { color: var(--medal-gold); font: 700 var(--fs-5)/1.1 var(--cond); letter-spacing: .02em; }
.pcf-line { margin: 0; color: var(--mute); font: var(--fs-3)/1.45 var(--body); }
.pcf-form { display: grid; gap: 6px; padding: 12px 16px 16px; }
.pcf-label { color: var(--mute); font: 600 var(--fs-2)/1.2 var(--body); }
.pcf-notes { width: 100%; box-sizing: border-box; min-height: 72px; resize: vertical; padding: 8px 10px; border: 1px solid var(--rule);
  border-radius: var(--r); background: var(--row); color: var(--ink); font: var(--fs-3)/1.4 var(--body); }
.pcf-notes:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pcf-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pcf-actions .btn { min-height: 36px; min-width: 80px; justify-content: center; }
.pcf-actions .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pcf-confetti { position: absolute; left: 50%; top: 44px; width: 0; height: 0; pointer-events: none; }
.pcf-title, .pcf-line, .pcf-form { position: relative; z-index: 1; }
.pcf-bit { position: absolute; left: -3px; top: -4px; width: 6px; height: 9px; border-radius: 0; opacity: 0; background: var(--medal-gold); }
.pcf-bit.is-b { background: var(--good); }
.pcf-bit.is-c { background: var(--gold); }
.pcf-bit.is-d { background: var(--acc-violet); }
.pcf-bit.is-round { width: 7px; height: 7px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .pcf-dialog[open] { animation: pcf-in .2s ease-out; }
  .pcf-bit { animation: pcf-burst 1.3s cubic-bezier(.2, .7, .3, 1) var(--t, 0ms) both; }
  @keyframes pcf-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes pcf-burst {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.4); }
    55% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 64px)) rotate(calc(var(--r) * 2)) scale(1); }
  }
}

.rt { --rt-gold: #E7B95B; --rt-cyan: #35C6E0; --rt-ink: #E9EDF3; --rt-mute: #A9B3C3; --rt-shadow: .6;
  --rt-open: #10151D; --rt-open-line: rgba(255, 255, 255, .1); --rt-open-back: #171D27;
  position: relative; min-width: 0; padding: 6px clamp(2px, 2.5%, 28px) 10px; overflow-x: clip; }
:root[data-theme="light"] .rt { --rt-shadow: .32; --rt-open: transparent; --rt-open-line: rgba(17, 22, 31, .3); --rt-open-back: rgba(17, 22, 31, .16); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rt { --rt-shadow: .32; --rt-open: transparent; --rt-open-line: rgba(17, 22, 31, .3); --rt-open-back: rgba(17, 22, 31, .16); }
}
.rt-board { position: relative; width: min(100%, 680px); margin: 0 auto; aspect-ratio: 1 / 1; container-type: inline-size; }
.rt-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.rt-shadow { fill: #000; opacity: var(--rt-shadow); }
.rt-chair-seat { fill: #1B2330; stroke: rgba(231, 185, 91, .42); stroke-width: 2; }
.rt-chair-back { fill: none; stroke: #263040; stroke-width: 11; stroke-linecap: round; }
.rt-chair.is-me .rt-chair-seat { stroke: var(--rt-gold); stroke-width: 2.6; }
.rt-chair.is-open .rt-chair-seat { fill: var(--rt-open); stroke: var(--rt-open-line); stroke-dasharray: 5 6; }
.rt-chair.is-open .rt-chair-back { stroke: var(--rt-open-back); }
.rt-top { stroke: #05080D; stroke-width: 3; }
.rt-grain { opacity: .06; }
.rt-rings circle { fill: none; stroke: #fff; stroke-width: .8; }
.rt-bevel { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 2; }
.rt-inlay { fill: none; stroke: var(--rt-gold); stroke-opacity: .5; stroke-width: 1.6; }
.rt-inlay.is-fine { stroke-opacity: .2; stroke-width: .9; }
.rt-inlay.is-map { stroke-opacity: .62; stroke-width: 1.8; }
.rt-ticks { fill: none; stroke: var(--rt-gold); stroke-opacity: .3; stroke-width: 1.1; }
.rt-ticks.is-band { stroke-opacity: .42; stroke-width: .9; }
.rt-dividers { fill: none; stroke: var(--rt-gold); stroke-opacity: .2; stroke-width: 1.2; }
.rt-band { fill: #0B1119; }
.rt-diamonds path { fill: var(--rt-gold); opacity: .75; }
.rt-engrave { fill: var(--rt-gold); fill-opacity: .92; font-family: var(--cond); font-weight: 600; letter-spacing: 5px; }
.rt-map .rt-ink { fill: none; stroke: var(--rt-cyan); stroke-linejoin: round; stroke-linecap: round; }
.rt-map .rt-grat { stroke-opacity: .12; stroke-width: 1; }
.rt-map .rt-rhumb { stroke-opacity: .08; stroke-width: .9; }
.rt-map .rt-water { stroke-width: 1; }
.rt-map .rt-water.is-w1 { stroke-opacity: .34; }
.rt-map .rt-water.is-w2 { stroke-opacity: .2; }
.rt-map .rt-water.is-w3 { stroke-opacity: .11; }
.rt-land { fill: #132A42; }
.rt-map .rt-contour { stroke-width: 1; stroke-opacity: .3; }
.rt-map .rt-contour.is-c3, .rt-map .rt-contour.is-c4 { stroke-opacity: .38; }
.rt-map .rt-coast { stroke: #86E1F0; stroke-width: 2.3; stroke-opacity: .92; }
.rt-map .rt-ridge { stroke: #A8E6F2; stroke-width: 1.5; stroke-opacity: .6; }
.rt-rose circle { fill: none; stroke: var(--rt-gold); stroke-opacity: .5; stroke-width: 1.1; }
.rt-map .rt-rose .rt-ink { stroke: var(--rt-gold); stroke-opacity: .7; stroke-width: 1.4; }
.rt-rose-ticks { fill: none; stroke: var(--rt-gold); stroke-opacity: .55; stroke-width: 1; }
.rt-rose-lit { fill: var(--rt-gold); fill-opacity: .88; }
.rt-rose-dark { fill: #0B1726; stroke: var(--rt-gold); stroke-opacity: .75; stroke-width: 1; stroke-linejoin: round; }
.rt-rose .rt-rose-hub { fill: var(--rt-gold); stroke: none; }
.rt-rose-n { fill: var(--rt-gold); font-family: var(--cond); font-weight: 700; }
.rt-space { fill: #070C14; }
.rt-map .rt-limb { stroke: #86E1F0; stroke-opacity: .5; stroke-width: 1.4; }
.rt-limb-in { fill: none; stroke: var(--rt-cyan); stroke-opacity: .14; stroke-width: .8; }
.rt-other { fill: #11253A; stroke: var(--rt-cyan); stroke-opacity: .2; stroke-width: .8; stroke-linejoin: round; }
.rt-globe .rt-land { fill: #142D45; }
.rt-map .rt-border { stroke-width: .8; stroke-opacity: .24; }
.rt-globe .rt-coast { stroke-width: 1.7; }

.rt-seats { position: absolute; inset: 0; }
.rt-seat { --sh: clamp(32px, 7.4cqw, 52px); position: absolute; left: var(--x); top: var(--y); z-index: 1; box-sizing: border-box;
  width: var(--sh); height: calc(var(--sh) * 1.15); padding: 0; margin: 0; border: 0; background: none; color: var(--rt-ink);
  font: inherit; cursor: pointer; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; }
.rt-seat.is-open { cursor: default; }
.rt-shield { position: absolute; inset: 0; display: grid; place-items: center; }
.rt-shield .fs-here { right: 6%; bottom: 10%; width: 12px; height: 12px; border-color: #1A2433; }
.rt-shield .fs-here.is-away { background: #1A2433; border-color: var(--mute); }
.rt-shield-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
.rt-shield-face { fill: #1A2433; stroke: rgba(53, 198, 224, .62); stroke-width: 1.8; }
.rt-shield-line { fill: none; stroke: var(--rt-gold); stroke-opacity: .36; stroke-width: 1.4; }
.rt-initial { position: relative; margin-top: -10%; font: 700 calc(var(--sh) * .46)/1 var(--cond); letter-spacing: .02em; color: var(--rt-ink); }
.rt-shield.has-pic .rt-initial { visibility: hidden; }
.rt-shield.has-pic .rt-shield-line { stroke-opacity: .22; }
.rt-place { position: absolute; right: -14%; top: -8%; min-width: 1.6em; height: 1.6em; box-sizing: border-box; display: grid; place-items: center;
  padding: 0 3px; border-radius: 999px; font: 700 var(--fs-1)/1 var(--mono); color: #0B0D12; background: #C9D2DE; box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.rt-place.is-p1 { background: #E7B95B; }
.rt-place.is-p2 { background: #B8C2CC; }
.rt-place.is-p3 { background: #C98C5C; }
.rt-crown { position: absolute; left: 50%; bottom: calc(100% - 3px); width: calc(var(--sh) * .52); transform: translateX(-50%); }
.rt-crown svg { display: block; width: 100%; fill: var(--rt-gold); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.rt-plate { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); box-sizing: border-box; width: max-content; max-width: var(--pw, 24cqw);
  display: grid; justify-items: center; gap: 1px; padding: 3px 9px 4px; border-radius: var(--r-sm); white-space: nowrap;
  background: rgba(9, 13, 20, .9); border: 1px solid rgba(231, 185, 91, .28); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.rt-seat.is-low .rt-plate { top: auto; bottom: calc(100% + 3px); }
.rt-seat.is-right .rt-plate { left: auto; right: -12%; transform: none; }
.rt-seat.is-left .rt-plate { left: -12%; transform: none; }
.rt-seat.is-mid.is-right .rt-plate { top: 50%; bottom: auto; left: auto; right: calc(100% + 4px); transform: translateY(-50%); }
.rt-seat.is-mid.is-left .rt-plate { top: 50%; bottom: auto; left: calc(100% + 4px); transform: translateY(-50%); }
.rt-seat.is-low.is-manager .rt-plate { bottom: calc(100% + 3px + var(--sh) * .36); }
.rt-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 600 var(--fs-3)/1.15 var(--cond); font-size: clamp(13px, 2.5cqw, 17px); letter-spacing: .03em; }
.rt-sub { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: 600 var(--fs-1)/1.2 var(--body); color: var(--rt-mute); }
.rt-tag { padding: 0 6px; border-radius: 999px; border: 1px solid rgba(200, 147, 60, .6); color: #F2C98A; font: 600 var(--fs-1)/1.3 var(--body); }
.rt-seat.is-me .rt-shield-face { fill: #2A2416; stroke: var(--rt-gold); stroke-width: 2.4; }
.rt-seat.is-me .rt-initial, .rt-seat.is-me .rt-name { color: var(--rt-gold); }
.rt-seat.is-me .rt-plate { border-color: rgba(231, 185, 91, .8); }
.rt-seat.is-clock .rt-shield-face { stroke: var(--rt-cyan); stroke-width: 2.6; }
.rt-seat.is-clock .rt-shield-svg { filter: drop-shadow(0 0 7px rgba(53, 198, 224, .6)) drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
.rt-seat.is-clock .rt-sub { color: var(--rt-cyan); }
.rt-seat.is-bot .rt-shield-face { stroke: #C8933C; stroke-dasharray: 4 2.5; }
.rt-seat.is-kicked .rt-shield-face { fill: #121821; stroke: rgba(255, 255, 255, .2); stroke-dasharray: 3 3; }
.rt-seat.is-kicked .rt-name { color: var(--rt-mute); }
.rt-seat.is-open .rt-plate { background: rgba(9, 13, 20, .55); border: 1px dashed rgba(255, 255, 255, .16); box-shadow: none; }
.rt-seat.is-open .rt-name { color: #7D889A; }
.rt-seat:not(.is-open):hover, .rt-seat.is-active, .rt-seat:focus-visible { z-index: 3; transform: translate(-50%, calc(-50% - 4px)); }
.rt-seat:not(.is-open):hover .rt-shield-svg, .rt-seat.is-active .rt-shield-svg { filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .6)); }
.rt-seat:focus-visible { outline: none; }
.rt-seat:focus-visible .rt-shield { outline: 2px solid var(--rt-cyan); outline-offset: 5px; border-radius: var(--r); }

.rt-card { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); z-index: 5; box-sizing: border-box; width: min(250px, 64cqw);
  display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r); transform: translate(-50%, -50%); text-align: left;
  color: var(--rt-ink); background: rgba(9, 13, 20, .96); border: 1px solid rgba(231, 185, 91, .42); box-shadow: 0 16px 36px rgba(0, 0, 0, .6); }
.rt-card[hidden] { display: none; }
.rt-card { scroll-margin: calc(var(--sticky-top) + 8px) 8px calc(70px + env(safe-area-inset-bottom)); }
.rt-card-head { display: grid; gap: 6px; }
.rt-card-name { font: 700 var(--fs-4)/1.15 var(--cond); letter-spacing: .02em; overflow-wrap: anywhere; }
.rt-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-chip { padding: 1px 8px; border-radius: 999px; font: 600 var(--fs-1)/1.45 var(--body); color: #C9D2DE; border: 1px solid rgba(255, 255, 255, .16); }
.rt-chip.is-gold { color: var(--rt-gold); border-color: rgba(231, 185, 91, .5); }
.rt-chip.is-cyan { color: var(--rt-cyan); border-color: rgba(53, 198, 224, .5); }
.rt-card-facts { display: flex; gap: 18px; }
.rt-fact { display: grid; gap: 2px; }
.rt-k { font: 600 var(--fs-1) var(--body); color: var(--rt-mute); }
.rt-fact b { font: 600 var(--fs-4) var(--mono); color: var(--rt-ink); }
.rt-card-links { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-card-link { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border-radius: 999px; box-sizing: border-box;
  font: 600 var(--fs-2) var(--body); color: var(--rt-ink); text-decoration: none; background: rgba(53, 198, 224, .12); border: 1px solid rgba(53, 198, 224, .45); }
.rt-card-link:hover { background: rgba(53, 198, 224, .22); }
.rt-card-link:focus-visible { outline: 2px solid var(--rt-cyan); outline-offset: 2px; }

@container (max-width: 460px) {
  .rt.is-many .rt-plate, .rt.is-big .rt-seat.is-open .rt-plate { display: none; }
  .rt-plate { padding: 2px 6px 3px; }
  .rt-name { font-size: var(--fs-1); }
  .rt-pts { display: none; }
  .rt-sub:not(:has(.rt-now, .rt-tag)) { display: none; }
  .rt-place { min-width: 16px; height: 16px; right: -26%; top: -18%; }
}
@media (max-width: 520px) { .rt { margin: 0 -8px; padding-left: 0; padding-right: 0; } }

.rt-wrap { display: grid; gap: 14px; min-width: 0; }
.rt-list { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rt-list-h { margin: 0; font: 700 var(--fs-3) var(--body); color: var(--ink); scroll-margin-top: calc(var(--sticky-top) + 12px); }
.rt-list-h:focus { outline: none; }
@media (min-width: 1100px) {
  .rt-wrap { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: start; }
  .rt-list .fs-wchips { display: none; }
}
.fs-table-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-table-nav a { min-height: 36px; padding: 6px 14px; }
@media (min-width: 1100px) {
  .fs-table-nav .fs-jump { display: none; }
  .fs-table-nav:not(:has(a:not(.fs-jump))) { display: none; }
}
.fs-crown { display: inline-flex; align-items: center; color: var(--medal-gold); }
.fs-crown svg { width: 16px; height: 16px; }

.fs-season-view { display: grid; gap: 14px; min-width: 0; }
.fs-board-view { display: contents; }
.fs-seasons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.fs-champ { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "crown k pts" "crown name pts";
  align-items: center; gap: 2px 12px; padding: 12px 14px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--medal-gold) 45%, var(--rule)); background: color-mix(in srgb, var(--medal-gold) 10%, var(--lift)); }
.fs-champ .fs-champ-crown { grid-area: crown; width: 32px; height: 32px; color: var(--medal-gold); }
.fs-champ-k { grid-area: k; font: 600 var(--fs-1) var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.fs-champ-name { grid-area: name; font: 700 var(--fs-4) var(--body); color: var(--ink); overflow-wrap: anywhere; }
.fs-champ-pts { grid-area: pts; font: 700 var(--fs-3) var(--mono); color: var(--ink); white-space: nowrap; }
.fs-champ-mark { gap: 4px; }
.fs-champ-mark svg { width: 14px; height: 14px; }
.fs-hrosters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fs-hroster { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: var(--r-lg); background: var(--lift);
  border: 1px solid var(--rule); min-width: 0; scroll-margin-top: calc(var(--sticky-top) + 12px); }
.fs-hroster.is-me { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.fs-hroster-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fs-hroster-name { font: 700 var(--fs-3) var(--body); color: var(--ink); overflow-wrap: anywhere; }
.fs-hitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fs-hitem { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-2); color: var(--ink); }
.fs-hitem-name, .fs-hpick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-hboard-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 36px; cursor: pointer; }
.fs-hround { display: grid; gap: 6px; }
.fs-hround-h { margin: 4px 0 0; font: 700 var(--fs-1) var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.fs-hpicks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fs-hpick { display: grid; grid-template-columns: 2.8em auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: var(--r); background: var(--lift); font-size: var(--fs-2); color: var(--ink); min-width: 0; }
.fs-hpick.is-me { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.fs-hpick-no { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.fs-hpick-by { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); color: var(--mute); }
.fs-past-seasons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fs-past-season { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px;
  background: var(--lift); font: 600 var(--fs-1) var(--body); color: var(--ink); }
.fs-past-season-k { color: var(--mute); font-weight: 600; }
.fs-past-season.is-champ { color: var(--medal-gold); }
.fs-past-season svg { width: 14px; height: 14px; }

.fs-lb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.fs-lb-main, .fs-lb-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.fs-lb-side[hidden] { display: none; }
@media (min-width: 900px) {
  .fs-lb { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; }
  .fs-lb-side { position: sticky; top: calc(var(--sticky-top) + 12px); }
}
.fs-lb-item { display: block; min-width: 0; }
.fs-lb-open { width: 100%; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fs-lb-open:focus-visible, .fs-entry-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fs-lb-wk { flex: none; padding: 2px 8px; border-radius: 999px; font: 600 var(--fs-1) var(--mono); color: var(--mute); background: var(--lift); white-space: nowrap; }
.fs-lb-note { margin: 0; }
.fs-lb-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fs-lb-range { font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.fs-lb-entrants-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.fs-lb-entrants-k { font: 700 var(--fs-3) var(--body); color: var(--ink); }
.fs-lb-dash { color: var(--dim); }
.fs-join-prompt { justify-items: start; gap: 8px; padding: 20px 18px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%), var(--panel);
  border-color: color-mix(in srgb, var(--gold) 35%, var(--rule)); }
.fs-join-title { margin: 0; font: 700 var(--fs-5)/1.1 var(--cond); letter-spacing: .01em; color: var(--ink); }
.fs-join-line { margin: 0; font-size: var(--fs-3); color: var(--mute); }
.fs-join-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 639px) {
  .fs-join-acts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}
.fs-stat { gap: 8px; padding: 12px; }
.fs-stat.is-bloodiest { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--bad) 16%, transparent), transparent 70%), var(--panel); }
.fs-stat.is-strongest { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--medal-gold) 14%, transparent), transparent 70%), var(--panel); }
.fs-stat.is-stealthy { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--acc-violet) 16%, transparent), transparent 70%), var(--panel); }
.fs-stat-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; min-height: 28px; }
.fs-stat-h { margin: 0; font: 700 var(--fs-2) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.fs-stat-seg { gap: 4px; }
.fs-stat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fs-stat-row { display: grid; grid-template-columns: 1.3em auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 4px 10px;
  border-radius: var(--r); background: var(--row); box-sizing: border-box; }
.fs-stat-rank { font: 700 var(--fs-2) var(--mono); color: var(--dim); text-align: center; }
.fs-stat-row:first-child .fs-stat-rank { color: var(--medal-gold); }
.fs-stat-who { display: grid; min-width: 0; }
.fs-stat-name, .fs-stat-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-stat-name { font: 600 var(--fs-2) var(--body); color: var(--ink); }
.fs-stat-sub { font: 500 var(--fs-1) var(--body); color: var(--mute); }
.fs-stat-val { display: flex; align-items: baseline; justify-content: end; gap: 3px; line-height: 1.1; }
.fs-stat.is-stealthy .fs-stat-val { display: grid; justify-items: end; gap: 0; }
.fs-stat-val b { font: 700 var(--fs-3) var(--cond); font-variant-numeric: tabular-nums; color: var(--ink); }
.fs-stat-val span { font: 600 var(--fs-1) var(--body); color: var(--mute); white-space: nowrap; }
.fs-entry { position: fixed; inset: 0; z-index: 70; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--ink); overflow: visible; }
.fs-entry::backdrop { background: transparent; }
.fs-entry:not([open]) { display: none; }
.fs-entry[open] { display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: rgba(5, 8, 12, .66); }
.fs-entry-card { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; display: grid; gap: 12px;
  align-content: start; padding: 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-3); }
.fs-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.fs-entry-title { margin: 0; min-width: 0; font: 700 var(--fs-5)/1.05 var(--cond); letter-spacing: .02em; overflow-wrap: anywhere; }
.fs-entry-title:focus { outline: none; }
.fs-entry-close { flex: none; min-height: 36px; padding: 4px 14px; }
.fs-entry-body { display: grid; gap: 12px; min-width: 0; }
.fs-entry-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fs-entry-total { font: 700 var(--fs-4) var(--cond); font-variant-numeric: tabular-nums; }
.fs-entry-weeks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fs-entry-place.is-p1 { color: var(--medal-gold); border-color: color-mix(in srgb, var(--medal-gold) 50%, var(--rule)); }
.fs-entry-place.is-p2 { color: var(--medal-silver); }
.fs-entry-place.is-p3 { color: var(--medal-bronze); }
.fs-entry-lineup { display: grid; gap: 10px; }
.fs-entry-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fs-entry-h { margin: 0; font: 700 var(--fs-2) var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.fs-entry-group { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-lg); background: var(--lift); }
.fs-entry-gh { margin: 0; font: 700 var(--fs-3) var(--body); color: var(--ink); }
.fs-entry-slot { margin: 4px 0 0; font: 600 var(--fs-1) var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.fs-entry-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fs-entry-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px;
  border-radius: var(--r); background: var(--row); box-sizing: border-box; }
.fs-entry-who { display: grid; gap: 2px; min-width: 0; }
.fs-entry-name { font: 600 var(--fs-2) var(--body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-entry-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font: 500 var(--fs-1) var(--body); color: var(--mute); }
.fs-entry-ally { min-width: 0; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-entry-price { white-space: nowrap; }
.fs-entry-cap { color: var(--medal-gold); font-size: var(--fs-4); display: inline-flex; }
.fs-entry-val { display: flex; align-items: baseline; justify-content: end; gap: 3px; line-height: 1.1; grid-column: 4; }
.fs-entry-val b { font: 700 var(--fs-3) var(--cond); font-variant-numeric: tabular-nums; }
.fs-entry-val span { font: 600 var(--fs-1) var(--body); color: var(--mute); }
@media (max-width: 639px) {
  .fs-entry[open] { place-items: end stretch; padding: 0; }
  .fs-entry-card { width: 100%; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .fs-lb-row .fs-lb-wk { padding: 1px 6px; }
}
@media (min-width: 640px) {
  .fs-hrosters { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .fs-hpicks { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.fs-ctx-slot { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-ctx-go { min-height: 36px; padding: 6px 16px; }

.wc-settings { display: grid; gap: 14px; min-width: 0; }
.wc-title { font: 700 var(--fs-5)/1.1 var(--cond); font-size: clamp(22px, 6vw, 28px); letter-spacing: .02em; }
.wc-settings > .wc-sec { padding: 14px 16px 16px; gap: 12px; }
.wc-sec-head { min-height: 28px; }
.wc-saved { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 var(--fs-1) var(--body); color: var(--mute); }
.wc-saved.is-done { color: var(--fx-good-ink); }
.wc-saved svg { width: 14px; height: 14px; }
.wc-invite { display: grid; gap: 8px; min-width: 0; }

@media (prefers-reduced-motion: no-preference) {
  .rt-seat { transition: transform .16s ease; }
  .rt.is-intro .rt-seat { animation: rt-seat-in .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(260ms + var(--i) * 90ms); }
  .rt.is-intro .rt-map .rt-ink { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rt-ink 2.4s cubic-bezier(.45, .1, .2, 1) .15s forwards; }
  .rt.is-intro .rt-land, .rt.is-intro .rt-other { animation: rt-fade 1.1s ease 1.3s backwards; }
  .rt.is-intro .rt-engrave, .rt.is-intro .rt-diamonds { animation: rt-fade 1s ease .5s backwards; }
  .rt-seat.is-clock .rt-shield-svg { animation: rt-glow 1.8s ease-in-out infinite; }
  .rt-card:not([hidden]) { animation: rt-card-in .14s ease-out; }
  .wc-saved.is-done { animation: rt-fade .3s ease-out; }
}
@keyframes rt-seat-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes rt-ink { to { stroke-dashoffset: 0; } }
@keyframes rt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rt-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(53, 198, 224, .35)) drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
  50% { filter: drop-shadow(0 0 10px rgba(53, 198, 224, .7)) drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
}
@keyframes rt-card-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); } to { opacity: 1; transform: translate(-50%, -50%); } }

.al2-id .title-row { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 560px) {
  td .cellflex:has(> .ball-link + .chips) {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 4px;
  }
  td .cellflex:has(> .ball-link + .chips) > .thumb { grid-row: span 2; }
  td .cellflex > .ball-link + .chips { justify-self: start; flex-wrap: wrap; max-width: 100%; row-gap: 3px; }
}
.compact-table .wr-pill .wr-bound, .detail-list .wr-pill .wr-bound { color: var(--mute); }
.compact-table .wr-pill b.hi, .detail-list .wr-pill b.hi,
.compact-table tbody tr:hover .wr-pill b.hi, .detail-list tbody tr:hover .wr-pill b.hi {
  color: color-mix(in srgb, var(--good) 75%, var(--ink));
}
.compact-table .wr-pill b.lo, .detail-list .wr-pill b.lo,
.compact-table tbody tr:hover .wr-pill b.lo, .detail-list tbody tr:hover .wr-pill b.lo {
  color: color-mix(in srgb, var(--bad) 75%, var(--ink));
}
@media (max-height: 420px) {
  .eh-menu { max-height: calc(100vh - 60px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (pointer: coarse) {
  .rr-top > .rr-boss { padding-block: 6px; margin-block: -6px; }
  .rr-foe { display: inline-flex; align-items: center; min-height: 32px; }
  .rr-refresh-btn, .pv2-mate, .pv2-more { position: relative; }
  .rr-refresh-btn::after { content: ""; position: absolute; inset: -3px 0; border-radius: 999px; }
  .pv2-mate::after, .pv2-more::after { content: ""; position: absolute; inset: -1px 0; border-radius: 999px; }
  td .cellflex > a.plain { padding-block: 7px; margin-block: -7px; }
}

@media (max-width: 560px) {
  .strip li:has(> .who + .strip-roll) {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; align-items: center;
  }
  .strip li:has(> .who + .strip-roll) > .pos { grid-column: 1; grid-row: 1 / span 2; }
  .strip li:has(> .who + .strip-roll) > .thumb { grid-column: 2; grid-row: 1 / span 2; }
  .strip li:has(> .who + .strip-roll) > .who { grid-column: 3; grid-row: 1; }
  .strip li:has(> .who + .strip-roll) > .strip-roll { grid-column: 3; grid-row: 2; justify-self: start; }
  .strip li:has(> .who + .strip-roll) > .val { grid-column: 4; grid-row: 1 / span 2; }
  .strip li:has(> .who + .strip-roll) > .roll-split { grid-column: 1 / -1; grid-row: 3; padding-left: 0; }
}
.wr-band .wlive-strip { display: block; }
.wr-band .wlive-strip .wlive-dot { display: inline-block; vertical-align: middle; }
@media (min-width: 1024px) {
  #view > .war-rivalry-line, #view > .war-locked-foot {
    width: min(1240px, calc(100% - 2 * var(--gutter))); box-sizing: border-box; margin-inline: auto;
  }
}
.wrs-role { color: var(--mute); }
@media (pointer: coarse) {
  .wr2-beta { position: relative; }
  .wr2-beta::after { content: ""; position: absolute; inset: -7px -2px; border-radius: 999px; }
  .rv2-run-top > a.rv2-run-boss { padding-block: 10px 2px; margin-block: -10px -2px; }
}

@media (max-height: 420px) {
  .top { position: relative; }
  .wr-band { position: relative; }
  aside.wr-side { position: static; max-height: none; overflow: visible; }
}
@media (max-height: 420px) and (max-width: 1023px) {
  .wr-strat .wr-strat-row, html.nav-eh .wr-strat .wr-strat-row {
    position: static; flex-wrap: wrap; padding: 0;
    background: none; border-top: 0; box-shadow: none; backdrop-filter: none;
  }
  .wr-strat .wr-strat-row .ws-more-area[open] { position: static; max-height: none; overflow: visible; box-shadow: none; }
  body:has(.wr-strat) { padding-bottom: 0; }
  body:has(.wr-strat) .to-top { bottom: max(12px, calc(8px + env(safe-area-inset-bottom))); }
}
@media (max-height: 420px) and (max-width: 640px) {
  html.nav-eh .eh-tabbar { position: static; }
  html.nav-eh body, html.nav-eh body:has(.wr-strat) { padding-bottom: 0; }
  html.nav-eh .to-top, html.nav-eh body:has(.wr-strat) .to-top { bottom: max(12px, calc(8px + env(safe-area-inset-bottom))); }
  html.nav-eh .ad-anchor { bottom: 0; }
  html.nav-eh body.has-ad-anchor .to-top { bottom: 72px; }
  html.nav-eh body.has-ad-anchor footer { padding-bottom: 80px; }
  html.nav-eh .pv2-jump { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  html.nav-eh .toast[popover] { inset: auto auto 24px 50%; }
  html.nav-eh .eh-sheet { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  html.nav-eh:has(.fs-page), html.nav-eh:has(.fs-page .wcs-dchat:not([open])) { scroll-padding-bottom: 16px; }
}
.pane.has-more > .badges { padding-top: 26px; }
.pane.has-more > .badges-more { top: 4px; }
.tr-side-body > a.tr-ball-name { position: relative; z-index: 1; padding-bottom: 8px; margin-bottom: -8px; }
@media (pointer: coarse) {
  .tr-who { padding-top: 16px; margin-top: -16px; }
  .tr-who > a.plain { padding-top: 16px; }
  .tr-side-body > a.tr-ball-name { position: relative; z-index: 1; padding-block: 2px 14px; margin-block: -2px -14px; }
  td:has(> .tr-and) > a.plain { padding-block: 8px; }
}

.fs-rec { font: 600 var(--fs-2) var(--mono); color: var(--mute); }
.wc-open-teams { margin-top: 10px; }
.wc-was { font-size: var(--fs-2); }
.wcs-season-seg { justify-self: start; flex-wrap: wrap; }

.wc-kick { flex: none; min-height: 32px; }
@media (pointer: coarse) { .wc-kick { min-width: 44px; min-height: 44px; padding-inline: 14px; } }
@media (max-width: 639px), (pointer: coarse) {
  .fs-ctx { row-gap: 12px; }
  .fs-ctx-switch, .fs-ctx-go { min-height: 44px; }
}

.wm {
  --wm-atk: var(--gold);
  --wm-def: var(--acc-violet);
  display: grid; gap: 22px; max-width: 1180px; margin: 0 auto; padding: 8px var(--gutter) 36px;
  box-sizing: border-box; width: 100%; min-width: 0;
}
.wm *, .wm-sheet * { min-width: 0; }

.wm-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 12px; justify-items: start;
  padding: 22px 18px 18px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
}
.wm-hero-glow {
  position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--wm-atk) 22%, transparent), transparent 62%);
}
.wm-hero-glow::after {
  content: ""; position: absolute; inset: 55% auto auto -80%; width: 90%; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--wm-def) 18%, transparent), transparent 60%);
}
.wm-title {
  margin: 0; font: 700 var(--fs-5)/.95 var(--cond); font-size: clamp(34px, 7vw, 56px); letter-spacing: .01em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--ink) 30%, var(--wm-atk) 75%, var(--wm-def));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.wm-pill {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--row); color: var(--mute); font: 600 var(--fs-1) var(--body); letter-spacing: .03em;
  box-shadow: inset 0 0 0 1px var(--hairline-2);
}
.wm-pill.is-phase { color: var(--ink); }
.wm-pill.is-attack::after {
  content: ""; order: -1; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent);
}
.wm-pill.is-finished { color: var(--good); }
.wm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 4px; }
@media (min-width: 760px) { .wm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wm-kpi {
  display: grid; justify-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: var(--r-lg);
  background: var(--row); text-align: center;
}
.wm-ring { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.wm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wm-ring-track { fill: none; stroke: var(--hairline-2); stroke-width: 6; }
.wm-ring-arc {
  fill: none; stroke: var(--wm-atk); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0));
}
.wm-ring-fig { position: relative; font: 700 var(--fs-4) var(--mono); font-variant-numeric: tabular-nums; }
.wm-kpi-label { color: var(--mute); font: 500 var(--fs-1)/1.3 var(--body); }

.wm-jump {
  position: sticky; top: var(--sticky-top, 49px); z-index: 4; display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px; margin: -8px 0; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px);
}
.wm-jump-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--panel); color: var(--ink); text-decoration: none; font: 600 var(--fs-2) var(--body);
  box-shadow: var(--shadow-card);
}
.wm-jump-link:hover, .wm-jump-link:focus-visible { color: var(--gold); background: var(--pill-on); }
@media (max-width: 639px) {
  .wm-jump { gap: 4px; padding: 6px 0; flex-wrap: nowrap; justify-content: space-between; }
  .wm-jump-link { padding: 0 9px; font-size: var(--fs-2); }
}

.wm-sec { display: grid; gap: 12px; scroll-margin-top: calc(var(--sticky-top, 49px) + 56px); }
.wm-h { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; font: 700 var(--fs-5)/1.1 var(--cond); letter-spacing: .01em; }
.wm-h { scroll-margin-top: calc(var(--sticky-top, 49px) + 56px); }
.wm-sub-h { display: flex; align-items: center; margin: 6px 0 0; font: 700 var(--fs-4)/1.2 var(--cond); }
.wm .info, .wm-sheet .info { position: relative; width: 22px; height: 22px; margin-left: 8px; }
.wm .info::after, .wm-sheet .info::after { content: ""; position: absolute; inset: -6px; }
.wm-sec-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wm-sec-tools.is-in-card { margin-bottom: 4px; }
.wm-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--row); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.wm-switch-btn {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--mute); font: 600 var(--fs-2) var(--body);
}
.wm-switch-btn:hover { color: var(--ink); }
.wm-switch-btn[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-card); }
.wm-switch-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wm-duo { display: grid; gap: 12px; }
@media (min-width: 900px) { .wm-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.wm-card {
  position: relative; display: grid; gap: 10px; padding: 14px; border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-card);
}
.wm-card-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 var(--fs-4)/1.2 var(--cond); letter-spacing: .02em; }
.wm-card.is-attack > .wm-card-h::after, .wm-card.is-defense > .wm-card-h::after {
  content: ""; order: -1; width: 10px; height: 10px; border-radius: 50%; background: var(--wm-atk);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wm-atk) 20%, transparent);
}
.wm-card.is-defense > .wm-card-h::after { background: var(--wm-def); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wm-def) 20%, transparent); }
.wm-card-sub { margin: -4px 0 0; color: var(--dim); font: 500 var(--fs-1) var(--body); letter-spacing: .04em; text-transform: uppercase; }
.wm-card-note { display: flex; justify-content: flex-end; }
.wm-empty { margin: 0; padding: 14px 0; color: var(--dim); font: 600 var(--fs-2) var(--body); text-align: center; }
.wm-fig { font: 700 var(--fs-4) var(--mono); font-variant-numeric: tabular-nums; }
.wm-fig.is-thin, .wm-row-fig.is-thin, .wm-trow-fig.is-thin, .wm-mini-fig.is-thin, .wm-edge-fig.is-thin,
.wm-test-fig.is-thin, .wm-ring-fig.is-thin, .wm-versus-fig.is-thin, .wm-inline-fig.is-thin {
  color: var(--dim); font: 600 var(--fs-1) var(--body); letter-spacing: .02em;
}
.wm-chip-pill {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--hairline-2); color: var(--mute); font: 600 var(--fs-1) var(--mono); font-variant-numeric: tabular-nums;
}

.wm-bar { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--hairline-2); overflow: hidden; }
.wm-bar-fill {
  display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left;
  transform: scaleX(var(--w, 0)); background: var(--wm-atk);
}
.wm-bar.is-gold .wm-bar-fill, .wm-bar.is-attack .wm-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--wm-atk) 45%, transparent), var(--wm-atk)); }
.wm-bar.is-defense .wm-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--wm-def) 45%, transparent), var(--wm-def)); }
.wm-bar.is-good .wm-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--good) 45%, transparent), var(--good)); }
.wm-bar.is-bad .wm-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 45%, transparent), var(--bad)); }
.wm-bar.is-mute .wm-bar-fill { background: color-mix(in srgb, var(--mute) 55%, transparent); }
.wm-bar.is-first .wm-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--medal-gold) 40%, transparent), var(--medal-gold)); }
.wm-bar.has-mark::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bg); opacity: .8;
}
.wm-bar.is-thin { background: repeating-linear-gradient(135deg, var(--hairline-2) 0 4px, transparent 4px 8px); }

.wm-art {
  position: relative; display: grid; place-items: center; flex: none; border-radius: var(--r);
  background: var(--row); box-shadow: inset 0 0 0 1px var(--hairline-2);
}
.wm-art.is-sm { width: 42px; height: 42px; }
.wm-art.is-sm .thumb { width: 36px; height: 36px; border: 0; background: transparent; border-radius: var(--r-sm); }
.wm-art.is-lg { width: 72px; height: 72px; border-radius: var(--r-lg); }
.wm-art.is-lg .thumb { width: 64px; height: 64px; border: 0; background: transparent; border-radius: var(--r); }
.wm-art.is-typing { width: auto; min-width: 72px; padding: 6px 8px; }
.wm-art.is-typing .chips { flex-direction: column; gap: 4px; }
.wm-p4 {
  position: absolute; right: -4px; bottom: -4px; padding: 0 4px; border-radius: 999px;
  background: var(--medal-gold); color: var(--bg); font: 700 var(--fs-1)/1.35 var(--mono);
}

.wm-ranked { display: grid; gap: 8px; }
.wm-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.wm-pod {
  --medal: var(--rule);
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 6px 10px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--medal) 45%, transparent); cursor: pointer; color: var(--ink); text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 20%, var(--panel)), var(--panel) 70%);
  font: inherit;
}
.wm-pod.is-gold { --medal: var(--medal-gold); order: 2; padding-top: 30px; padding-bottom: 14px; }
.wm-pod.is-silver { --medal: var(--medal-silver); order: 1; }
.wm-pod.is-bronze { --medal: var(--medal-bronze); order: 3; }
.wm-pod:hover, .wm-pod:focus-visible { border-color: var(--medal); box-shadow: var(--shadow-1); }
.wm-pod:focus-visible, .wm-row:focus-visible, .wm-trow:focus-visible, .wm-prow:focus-visible, .wm-pairbar:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.wm-medal {
  position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--medal); color: var(--bg); font: 700 var(--fs-2) var(--cond);
}
.wm-pod .wm-art.is-lg { width: 60px; height: 60px; }
.wm-pod .wm-art.is-lg .thumb { width: 52px; height: 52px; }
.wm-pod.is-gold .wm-art.is-lg { width: 72px; height: 72px; }
.wm-pod.is-gold .wm-art.is-lg .thumb { width: 64px; height: 64px; }
.wm-pod-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--fs-3)/1.2 var(--cond); }
.wm-pod-fig { display: grid; justify-items: center; line-height: 1; }
.wm-pod-fig small { color: var(--dim); font: 500 var(--fs-1) var(--body); margin-top: 3px; }
.wm-pod > .wm-bar { justify-self: stretch; }
.wm-pod .chips { flex-wrap: wrap; justify-content: center; }
@media (max-width: 420px) { .wm-pod .chip { padding: 1px 4px 1px 2px; } .wm-pod .wm-chip-pill { display: none; } }
.wm-rows { display: grid; gap: 6px; }
.wm-row, .wm-irow, .wm-prow {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px 6px 6px; border-radius: var(--r-lg);
  background: var(--row); border: 1px solid transparent; color: var(--ink); text-align: left; font: inherit; width: 100%;
  box-sizing: border-box;
}
.wm-row, .wm-prow { cursor: pointer; }
.wm-row:hover, .wm-prow:hover { border-color: var(--rule); background: color-mix(in srgb, var(--row) 70%, var(--panel)); }
.wm-rank { width: 20px; flex: none; text-align: center; color: var(--dim); font: 700 var(--fs-3) var(--cond); }
.wm-row-body { display: grid; gap: 6px; flex: 1 1 auto; }
.wm-row-name { display: flex; align-items: center; gap: 6px; font: 600 var(--fs-3)/1.2 var(--body); }
.wm-row-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.wm-row-name { flex-wrap: wrap; row-gap: 4px; }
.wm-row-text, .wm-pod-name {
  white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.wm-row-name .chips { flex: none; }
.wm-row-side { display: grid; justify-items: end; gap: 2px; flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wm-row-fig { font: 700 var(--fs-3) var(--mono); }
.wm-row-side small { color: var(--dim); font: 500 var(--fs-1) var(--body); white-space: nowrap; }
@media (max-width: 420px) { .wm-row-name .chips { display: none; } }
.wm-roll {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; margin: 0;
  color: var(--mute); font: 500 var(--fs-1)/1.35 var(--body);
}
.wm-roll .chips { flex: none; }
.wm-roll.has-edge { color: var(--ink); }
.wm-roll-figs { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wm-roll-figs b { font-weight: 700; }
.wm-pod .wm-roll { justify-content: center; text-align: center; }
.wm-sheet-stats .wm-roll { padding-top: 8px; border-top: 1px solid var(--hairline-2); font-size: var(--fs-2); }
.wm-more {
  justify-self: center; min-height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--row); color: var(--gold); font: 600 var(--fs-2) var(--body); cursor: pointer;
}
.wm-more:hover, .wm-more:focus-visible { border-color: var(--gold); }

.wm-tchart { display: grid; gap: 4px; }
.wm-trow {
  display: grid; grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) 54px; align-items: center; gap: 10px;
  min-height: 34px; padding: 2px 6px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.wm-trow:hover { background: var(--row); }
.wm-trow-name { display: flex; }
.wm-trow-name .chips { flex-wrap: wrap; }
.wm-trow-fig { justify-self: end; font: 700 var(--fs-2) var(--mono); font-variant-numeric: tabular-nums; }
.wm-card.is-wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .wm-card.is-wide > .wm-tchart { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }

.wm-art.is-item .thumb { object-fit: contain; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wm-key { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); font: 500 var(--fs-1) var(--body); }
.wm-key::after { content: ""; order: -1; width: 10px; height: 10px; border-radius: var(--r-sm); background: var(--wm-atk, var(--gold)); }
.wm-key.is-defense::after { background: var(--acc-violet); }
.wm-key.is-gold::after, .wm-key.is-first::after { background: var(--medal-gold); }
.wm-key.is-clear::after { background: var(--good); }
.wm-key.is-wipe::after { background: var(--bad); }
.wm-key.is-forfeit::after { background: var(--acc-amber); }
.wm-key.is-other::after { background: var(--dim); }
.wm-pairbars { display: grid; gap: 6px; }
@media (min-width: 760px) { .wm-pairbars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } }
.wm-pairbar {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px;
  padding: 4px 6px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.wm-pairbar:hover { background: var(--row); }
.wm-pairbar-bars, .wm-zrow-lines { display: grid; gap: 4px; }
.wm-pairbar-line { display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: center; gap: 8px; }
.wm-mini-fig { justify-self: end; font: 700 var(--fs-2) var(--mono); font-variant-numeric: tabular-nums; }
.wm-match { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.wm-match-col { display: grid; justify-items: center; gap: 8px; text-align: center; }
.wm-match-label { color: var(--mute); font: 600 var(--fs-1)/1.3 var(--body); }
.wm-cols { display: flex; gap: 8px; align-items: flex-end; }
.wm-col-wrap { display: grid; justify-items: center; gap: 4px; }
.wm-col {
  position: relative; display: block; width: 26px; height: 120px; border-radius: var(--r); overflow: hidden;
  background: var(--hairline-2);
}
.wm-col-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: bottom;
  transform: scaleY(var(--h, 0)); border-radius: inherit;
  background: linear-gradient(0deg, color-mix(in srgb, var(--wm-atk) 40%, transparent), var(--wm-atk));
}
.wm-col.is-defense .wm-col-fill { background: linear-gradient(0deg, color-mix(in srgb, var(--wm-def) 40%, transparent), var(--wm-def)); }
.wm-col.is-gold .wm-col-fill { background: linear-gradient(0deg, color-mix(in srgb, var(--medal-gold) 35%, transparent), var(--medal-gold)); }
.wm-col.is-thin { background: repeating-linear-gradient(135deg, var(--hairline-2) 0 4px, transparent 4px 8px); }
.wm-col-v { min-height: 18px; }
.wm-col-x { color: var(--mute); font: 700 var(--fs-2) var(--mono); }
.wm-prow-pair { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.wm-plus { color: var(--dim); font: 700 var(--fs-3) var(--mono); }
.wm-prow .wm-row-body { flex: 1 1 auto; }
.wm-prow-names { display: grid; gap: 1px; }
.wm-prow-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font: 500 var(--fs-1) var(--body); }
@media (max-width: 639px) {
  .wm-prow {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "rank pair side" "rank body side";
    column-gap: 10px; row-gap: 6px; padding-top: 8px; padding-bottom: 8px;
  }
  .wm-prow > .wm-rank { grid-area: rank; }
  .wm-prow > .wm-prow-pair { grid-area: pair; }
  .wm-prow > .wm-row-body { grid-area: body; }
  .wm-prow > .wm-row-side { grid-area: side; }
}

.wm-edges { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.wm-edge .wm-card-h { font-size: var(--fs-3); }
.wm-edge-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wm-edge-side { display: grid; gap: 4px; }
.wm-edge-fig { font: 700 var(--fs-5)/1 var(--mono); font-variant-numeric: tabular-nums; }
.wm-edge-side.is-without .wm-edge-fig { color: var(--mute); }
.wm-edge-label { color: var(--mute); font: 500 var(--fs-1) var(--body); }
.wm-gap {
  justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--hairline-2); color: var(--mute);
  font: 700 var(--fs-2) var(--mono);
}
.wm-gap.is-up { color: color-mix(in srgb, var(--good) 55%, var(--ink)); background: color-mix(in srgb, var(--good) 16%, transparent); }
.wm-gap.is-down { color: color-mix(in srgb, var(--bad) 55%, var(--ink)); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.wm-heat-wrap { display: grid; gap: 6px; }
.wm-heat-axis { margin: 0; color: var(--mute); font: 600 var(--fs-1) var(--body); text-align: right; }
.wm-heat { display: grid; gap: 3px; }
.wm-heat-row { display: grid; grid-template-columns: minmax(72px, 128px) repeat(var(--cols, 6), minmax(0, 1fr)); gap: 3px; align-items: stretch; }
.wm-heat-corner { color: var(--dim); font: 600 var(--fs-1)/1.2 var(--body); align-self: end; }
.wm-heat-col { text-align: center; color: var(--mute); font: 700 var(--fs-2) var(--mono); align-self: end; }
.wm-heat-band { display: flex; align-items: center; color: var(--mute); font: 600 var(--fs-1)/1.2 var(--body); }
.wm-heat-cell {
  display: grid; place-items: center; min-height: 36px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--wm-atk) calc(var(--v, 0) * 46%), var(--row));
  color: var(--ink); font: 700 var(--fs-1) var(--mono); font-variant-numeric: tabular-nums;
}
.wm-heat-cell.is-thin { color: var(--dim); background: repeating-linear-gradient(135deg, var(--hairline-2) 0 4px, transparent 4px 8px); }
.wm-heat.is-two .wm-heat-row { grid-template-columns: minmax(72px, 128px) repeat(2, minmax(0, 1fr)); }
.wm-heat.is-two .wm-heat-cell { background: color-mix(in srgb, var(--wm-def) calc(var(--v, 0) * 46%), var(--row)); }
.wm-heat.is-two .wm-heat-cell.is-thin { background: repeating-linear-gradient(135deg, var(--hairline-2) 0 4px, transparent 4px 8px); }

.wm-versus { gap: 12px; padding: 18px 16px; }
.wm-versus-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wm-versus-side { font: 700 var(--fs-4)/1 var(--cond); font-size: clamp(18px, 3.4vw, 26px); letter-spacing: .02em; text-transform: uppercase; }
.wm-versus-side.is-def { color: var(--wm-def); }
.wm-versus-side.is-atk { color: var(--wm-atk); text-align: right; }
.wm-versus-vs { color: var(--dim); font: 700 var(--fs-2) var(--mono); }
.wm-versus-bar {
  position: relative; display: grid; grid-template-columns: calc(var(--w, .5) * 100%) 1fr; height: 46px;
  border-radius: 999px; overflow: hidden; background: var(--row);
}
.wm-versus-l, .wm-versus-r { display: flex; align-items: center; padding: 0 14px; color: #fff; }
.wm-versus-l { background: linear-gradient(90deg, color-mix(in srgb, var(--wm-def) 55%, #000), var(--wm-def)); }
.wm-versus-r { justify-content: flex-end; background: linear-gradient(90deg, var(--wm-atk), color-mix(in srgb, var(--wm-atk) 55%, #000)); }
.wm-versus-fig { font: 700 var(--fs-4) var(--mono); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.wm-versus-foot { margin: 0; text-align: center; color: var(--dim); font: 600 var(--fs-1) var(--body); letter-spacing: .06em; text-transform: uppercase; }
.wm-versus-close { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 6px; color: var(--mute); font: 500 var(--fs-2) var(--body); }
.wm-inline-fig { font: 700 var(--fs-3) var(--mono); color: var(--ink); }
.wm-tests { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.wm-test { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); }
.wm-test.is-base { background: var(--row); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.wm-test-h { margin: 0; color: var(--mute); font: 600 var(--fs-2)/1.3 var(--body); }
.wm-test-fig { font: 700 var(--fs-5)/1 var(--mono); font-variant-numeric: tabular-nums; }
.wm-test .wm-chip-pill { justify-self: start; }

.wm-zrows { display: grid; gap: 12px; }
.wm-zrow { display: grid; gap: 6px; }
.wm-zrow-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wm-zrow-name { font: 700 var(--fs-3) var(--cond); letter-spacing: .03em; text-transform: uppercase; }
.wm-size { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; justify-items: center; }
.wm-stack { display: flex; height: 22px; border-radius: 999px; overflow: hidden; background: var(--row); }
.wm-seg { flex: 0 0 calc(var(--w, 0) * 100%); transform-origin: left; background: var(--dim); }
.wm-seg.is-clear { background: var(--good); }
.wm-seg.is-wipe { background: var(--bad); }
.wm-seg.is-forfeit { background: var(--acc-amber); }

.wm-admin { padding: 10px 14px; border-radius: var(--r-lg); background: var(--row); color: var(--mute); font: 500 var(--fs-2) var(--body); }
.wm-admin summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.wm-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 8px 0 0; }
.wm-admin-grid dt { font-size: var(--fs-1); color: var(--dim); }
.wm-admin-grid dd { margin: 0; color: var(--ink); font: 700 var(--fs-3) var(--mono); }

dialog.wm-sheet {
  margin: auto; padding: 0 0 16px; border: 1px solid var(--rule); border-radius: var(--r-lg);
  width: min(640px, calc(100vw - 28px)); max-height: min(86vh, 860px); overflow: auto; overscroll-behavior: contain;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-3);
}
dialog.wm-sheet::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
@media (max-width: 639px) {
  dialog.wm-sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88vh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
}
.wm-sheet-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px;
  background: var(--panel); border-bottom: 1px solid var(--hairline-2);
}
.wm-sheet-title { flex: 1 1 auto; margin: 0; font: 700 var(--fs-4)/1.15 var(--body); overflow-wrap: anywhere; }
.wm-sheet-close {
  flex: none; min-width: 64px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--row); color: var(--mute); font: 600 var(--fs-2) var(--body); cursor: pointer;
}
.wm-sheet-close:hover, .wm-sheet-close:focus-visible { color: var(--gold); border-color: var(--gold); }
.wm-sheet-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px 0; }
.wm-rarity { padding: 2px 9px; border-radius: 999px; background: var(--row); color: var(--mute); font: 600 var(--fs-1) var(--body); text-transform: capitalize; }
.wm-sheet-wars, .wm-sheet-chart, .wm-sheet-cs { display: grid; gap: 10px; padding: 14px 16px 0; }
.wm-sheet-kicker, .wm-sheet-h { display: flex; align-items: center; margin: 0; font: 700 var(--fs-3) var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.wm-sheet-two { display: grid; gap: 10px; }
@media (min-width: 520px) { .wm-sheet-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wm-sheet-stats { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--row); }
.wm-sheet-stats .wm-sheet-h { color: var(--ink); }
.wm-sheet-stats.is-attack .wm-sheet-h::after, .wm-sheet-stats.is-defense .wm-sheet-h::after {
  content: ""; order: -1; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--gold);
}
.wm-sheet-stats.is-defense .wm-sheet-h::after { background: var(--acc-violet); }
.wm-sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; align-items: baseline; }
.wm-sheet-grid dt { color: var(--mute); font: 500 var(--fs-2) var(--body); }
.wm-sheet-grid dd { margin: 0; text-align: right; font: 700 var(--fs-3) var(--mono); font-variant-numeric: tabular-nums; }
.wm-sheet-grid dd.is-thin { color: var(--dim); font: 600 var(--fs-1) var(--body); }
.wm-sheet-items { display: grid; gap: 8px; }
.wm-sheet-itemrow { display: grid; gap: 6px; }
.wm-sheet-itemtiles { display: flex; flex-wrap: wrap; gap: 8px; }
.wm-sheet-item { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--row); font: 600 var(--fs-2) var(--body); }
.wm-sheet-item .wm-art.is-sm { width: 32px; height: 32px; border-radius: 50%; }
.wm-sheet-item .wm-art.is-sm .thumb { width: 26px; height: 26px; }
.wm-sheet-item .wm-p4 { right: -6px; bottom: -6px; }
.wm-chart-group { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-lg); background: var(--row); }
.wm-chart-title { margin: 0; font: 700 var(--fs-2) var(--body); color: var(--ink); }
.wm-chart-type { margin: 4px 0 0; }
.wm-chart-line { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: start; }
.wm-chart-line .chips { flex-wrap: wrap; }
.wm-chart-k { color: var(--mute); font: 600 var(--fs-1)/1.6 var(--body); }
.wm-chart-line.is-good .wm-chart-k { color: var(--good); }
.wm-chart-line.is-bad .wm-chart-k { color: var(--bad); }
.wm-chart-none { color: var(--dim); font: 500 var(--fs-1)/1.6 var(--body); }
.wm-sheet-chart .chip.is-double { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 70%, transparent); }
.wm-sheet-chart .is-good .chip.is-double { box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 70%, transparent); }
.wm-sheet-cs .cs { max-width: none; }
.wm-feeds { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; padding: 12px; border-radius: var(--r-lg); background: var(--row); }
.wm-feeds dt { color: var(--ink); font: 700 var(--fs-2) var(--body); }
.wm-feeds dd { margin: 0; color: var(--mute); font: 500 var(--fs-2)/1.35 var(--body); }
@media (max-width: 420px) { .wm-sheet-cs .cs { grid-template-columns: 1fr; justify-items: center; } }
.wm-sheet-link {
  display: inline-flex; align-items: center; min-height: 34px; margin: 14px 16px 0; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--row); color: var(--gold); text-decoration: none; font: 600 var(--fs-2) var(--body);
}
.wm-sheet-link:hover, .wm-sheet-link:focus-visible { border-color: var(--gold); }

.wm-soon { padding: 12px var(--gutter) 28px; max-width: 1180px; margin: 0 auto; box-sizing: border-box; width: 100%; }
.wm-soon-stage {
  position: relative; overflow: hidden; isolation: isolate; display: grid; place-content: center; justify-items: center;
  min-height: max(380px, calc(100svh - 220px)); padding: 48px 16px; box-sizing: border-box; text-align: center;
  border-radius: var(--r-lg); color: #F4F7FB;
  background: radial-gradient(120% 90% at 50% 40%, #13213A 0%, #0A111A 55%, #05070B 100%);
  box-shadow: 0 0 0 1px rgba(155, 123, 212, .2) inset, var(--shadow-card);
}
.wm-soon-glow {
  position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 42% 50%, rgba(53, 198, 224, .2), transparent 40%),
    radial-gradient(circle at 60% 55%, rgba(155, 123, 212, .2), transparent 42%);
}
.wm-soon-name {
  margin: 0 0 14px; padding-left: .5em; font: 700 var(--fs-3)/1 var(--cond); font-size: clamp(14px, 2.2vw, 20px);
  letter-spacing: .5em; text-transform: uppercase; color: #35C6E0;
}
.wm-soon-title {
  margin: 0; display: grid; justify-items: center; font: 700 var(--fs-5)/.84 var(--cond); font-size: clamp(64px, 17vw, 196px);
  letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 0 48px rgba(53, 198, 224, .3);
}
.wm-soon-word:last-child { background: linear-gradient(180deg, #F4F7FB 10%, #9B7BD4 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm-soon-rule { display: block; width: min(260px, 60%); height: 2px; margin-top: 30px; background: linear-gradient(90deg, transparent, #9B7BD4, #35C6E0, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .wm-jump-link { transition: color .15s, background .15s; }
  .wm-switch-btn { transition: background .2s, color .2s, box-shadow .2s; }
  .wm-pod { transition: transform .2s var(--ease, ease), border-color .2s, box-shadow .2s; }
  .wm-row, .wm-irow, .wm-prow { transition: transform .18s var(--ease, ease), border-color .18s, background .18s; }
  .wm-trow { transition: background .15s; }
  .wm-pod:hover, .wm-pod:focus-visible { transform: translateY(-2px); }
  .wm-row:hover, .wm-prow:hover { transform: translateX(2px); }
  .wm-anim.wm-rise { transition: opacity .55s var(--ease, ease), transform .55s var(--ease, ease); }
  .wm-anim.wm-rise:not(.is-in) { opacity: 0; transform: translateY(18px); }
  .wm-bar-fill { transition: transform .9s var(--ease, ease) .1s; }
  .wm-anim:not(.is-in) .wm-bar-fill { transform: scaleX(0); }
  .wm-col-fill { transition: transform .9s var(--ease, ease) .15s; }
  .wm-anim:not(.is-in) .wm-col-fill { transform: scaleY(0); }
  .wm-seg { transition: transform .8s var(--ease, ease); transition-delay: calc(var(--i, 0) * 120ms); }
  .wm-anim:not(.is-in) .wm-seg { transform: scaleX(0); }
  .wm-ring-arc { transition: stroke-dashoffset 1.2s var(--ease, ease) .15s; }
  .wm-anim:not(.is-in) .wm-ring-arc { stroke-dashoffset: 100; }
  .wm-heat-cell { transition: opacity .45s ease, transform .45s var(--ease, ease); transition-delay: calc(var(--i, 0) * 18ms); }
  .wm-anim:not(.is-in) .wm-heat-cell { opacity: 0; transform: scale(.8); }
  .wm-pod, .wm-row, .wm-trow, .wm-irow, .wm-prow, .wm-test, .wm-pairbar, .wm-zrow {
    animation: wm-in .5s var(--ease, ease) backwards; animation-delay: calc(var(--i, 0) * 45ms);
  }
  .wm-anim:not(.is-in) :is(.wm-pod, .wm-row, .wm-trow, .wm-irow, .wm-prow, .wm-test, .wm-pairbar, .wm-zrow) { animation-play-state: paused; }
  .wm-versus-bar { transition: grid-template-columns 1.1s var(--ease, ease) .2s; }
  .wm-anim:not(.is-in) .wm-versus-bar { grid-template-columns: 50% 1fr; }
  .wm-hero-glow { animation: wm-drift 14s ease-in-out 2 alternate; }
  .wm-pill.is-attack::after { animation: wm-pulse 1.8s ease-in-out 4; }
  dialog.wm-sheet[open] { animation: wm-sheet-in .32s var(--ease, ease) both; }
  dialog.wm-sheet[open]::backdrop { animation: wm-fade .3s ease both; }
  .wm-soon-glow { animation: fx-soon-breathe 7s ease-in-out 3 forwards; }
  .wm-soon-name { animation: fx-soon-in 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  .wm-soon-word { animation: fx-soon-rise 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .wm-soon-word:first-child { animation-delay: .5s; }
  .wm-soon-word:last-child { animation-delay: .9s; }
  .wm-soon-rule { animation: fx-soon-sweep 1.6s 1.5s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  dialog.wm-sheet[open] { animation-name: wm-sheet-up; }
}
@keyframes wm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wm-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6%, 8%) scale(1.12); } }
@keyframes wm-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 8%, transparent); } }
@keyframes wm-sheet-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wm-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes wm-fade { from { opacity: 0; } to { opacity: 1; } }

.upd {
  display: grid; gap: 26px; max-width: 1180px; margin: 0 auto; padding: 8px var(--gutter) 40px;
  box-sizing: border-box; width: 100%; min-width: 0;
}
.upd * { min-width: 0; }
.upd-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 10px; justify-items: start;
  padding: 24px 20px 22px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card);
}
.upd-hero::after {
  content: ""; position: absolute; inset: -60% -10% auto auto; width: 60%; aspect-ratio: 1; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%);
}
.upd-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0;
  font: 600 var(--fs-2) var(--mono); color: var(--mute); }
.upd-pill {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px;
  font: 700 var(--fs-1) var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.upd-hero .upd-title {
  margin: 0; font: 700 var(--fs-5)/.95 var(--cond); font-size: clamp(34px, 7vw, 56px); letter-spacing: .01em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--ink) 35%, var(--gold) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (forced-colors: active) { .upd-hero .upd-title { color: CanvasText; background: none; } }
.upd-callout {
  margin: 4px 0 0; padding: 10px 14px; border-radius: var(--r); max-width: 62ch;
  font: 500 var(--fs-3)/1.45 var(--body); color: var(--ink);
  background: color-mix(in srgb, var(--gold) 10%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.upd-callout strong { font-weight: 700; }
.upd-callout a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.upd-lead { margin: 0; max-width: 62ch; font: 400 var(--fs-3)/1.45 var(--body); color: var(--mute); }
.upd-sec { display: grid; gap: 12px; }
.upd-h2 { margin: 0; font: 700 var(--fs-4) var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

.upd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1024px) { .upd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .upd-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.upd-tile {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px 12px; border-radius: var(--r-lg); border: 1px solid var(--rule);
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 7%, var(--panel)), var(--panel) 60%);
  box-shadow: var(--shadow-card);
}
.upd-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.upd-name { color: var(--ink); text-decoration: none; font: 700 var(--fs-4)/1.2 var(--body); outline: none; }
.upd-name::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.upd-tile:has(.upd-name:focus-visible), .upd-row:has(.upd-name:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.upd-line { color: var(--mute); font-size: var(--fs-3); line-height: 1.45; }
.upd-where {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--hairline-2); font: 600 var(--fs-1)/1.4 var(--body); color: var(--dim);
}
.upd-crumb { color: var(--mute); }
.upd-sep { color: var(--dim); }
.upd-prem, .upd-new {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  font: 700 var(--fs-1)/1 var(--body); letter-spacing: .02em; white-space: nowrap;
}
.upd-prem { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prem-c) 55%, transparent);
  background: color-mix(in srgb, var(--prem-c) 10%, transparent); }
.upd-new { color: var(--bg); background: var(--gold); }
.upd-tile:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.upd-tile:hover .upd-name, .upd-row:hover .upd-name { color: var(--gold); }

.upd-groups { columns: 2; column-gap: 14px; }
@media (max-width: 899px) { .upd-groups { columns: 1; } }
.upd-group { break-inside: avoid; margin: 0 0 14px; padding: 12px 10px 6px; border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
@media (max-width: 899px) { .upd-group { margin-bottom: 10px; } }
.upd-h3 { margin: 0 6px 6px; font: 700 var(--fs-3) var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.upd-list { list-style: none; margin: 0; padding: 0; }
.upd-row { position: relative; display: grid; gap: 2px; padding: 9px 8px; border-radius: var(--r); }
.upd-row + .upd-row { border-top: 1px solid var(--hairline-2); }
.upd-row:hover { background: var(--row); }
.upd-row .upd-name { font-size: var(--fs-3); }
.upd-row .upd-line { font-size: var(--fs-2); }
.upd-row .upd-where { margin-top: 2px; padding-top: 0; border-top: 0; }
.upd-more { margin: 0; }
.upd-more a { color: var(--gold); }
@media (max-width: 640px) {
  .upd { gap: 20px; padding-top: 4px; }
  .upd-hero { padding: 18px 16px 16px; }
  .upd-tile { padding: 12px 14px 10px; }
  .upd-name { font-size: var(--fs-3); }
}
@media (prefers-reduced-motion: no-preference) {
  .upd-tile { animation: upd-in .45s ease backwards; animation-delay: calc(var(--i, 0) * 40ms);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .upd-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), 0 10px 26px -12px color-mix(in srgb, var(--gold) 45%, transparent); }
}
@keyframes upd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.whl-line { overflow: hidden; }
.whl-line > .whl-text { flex-basis: 0; }
.whl-line > .whl-kind { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wwc-name { overflow-wrap: normal; text-overflow: ellipsis; }
.whl-kind.is-mad { color: color-mix(in srgb, var(--k) 80%, var(--ink)); }
:root[data-theme="light"] .wnote.is-sweep .wnote-tag,
:root[data-theme="light"] .wnote.is-mad .wnote-tag { color: color-mix(in srgb, var(--wnote-c) 50%, var(--ink)); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .wnote.is-sweep .wnote-tag,
  :root:not([data-theme="dark"]) .wnote.is-mad .wnote-tag { color: color-mix(in srgb, var(--wnote-c) 50%, var(--ink)); }
}
.account-who { flex-wrap: wrap; row-gap: 8px; }
.account-who > span:not(.premium-badge) { min-width: 0; overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .wwc-side { position: relative; }
  .wwc-side > .wwc-name::after { content: ""; position: absolute; inset: -6px 0 -2px; }
  .wwc-mid { position: relative; }
  .wwc-mid::after { content: ""; position: absolute; inset: -2px 0; }
  .whl-now { position: relative; }
  .whl-now > .whl-line::after { content: ""; position: absolute; inset: -2px 0; }
}

.bn-pick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bn-isel .isel-button { min-width: 184px; max-width: 280px; }
.bn-face { gap: 8px; }
.bn-thumb { width: 48px; height: 24px; flex: none; object-fit: cover; border-radius: var(--r-sm); background: var(--row); }
.bn-words { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bn-date { font: var(--fs-1) var(--mono); color: var(--mute); white-space: nowrap; }
.isel-button .bn-date { display: none; }
.fx-tools.has-sort { flex-wrap: wrap; row-gap: 10px; }
.dex-stat, .tl-stat { font: 600 var(--fs-1) var(--mono); color: var(--gold); white-space: nowrap; }
.tl-stat { display: block; }
.bn-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--panel); border-bottom: 1px solid var(--rule); }
.bn-head-art { width: 96px; height: 40px; flex: none; object-fit: cover; border-radius: var(--r-sm); background: var(--row); }
.bn-head-name { font: 600 var(--fs-3) var(--body); color: var(--ink); }
.bn-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-filter.has-banner { gap: 12px; flex-wrap: wrap; }
.ss-page > .bn-strip { margin: 12px var(--gutter) 0; }
.bn-cell { white-space: nowrap; }
.fa { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.fa-art { width: 112px; height: 48px; flex: none; object-fit: cover; border-radius: var(--r); background: var(--row); }
.fa-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fa-k { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--fs-1) var(--cond);
  letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.fa-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fa-name { display: inline-block; padding: 8px 0; margin: -8px 0; font: 600 var(--fs-3) var(--body);
  color: var(--ink); text-decoration: none; }
.fa-name:hover, .fa-name:focus-visible { color: var(--gold); }
.fa-date { font: var(--fs-1) var(--mono); color: var(--mute); }
@media (max-width: 640px) {
  .bn-pick { flex: 1 1 100%; }
  .bn-isel { flex: 1; min-width: 0; }
  .bn-isel .isel-button, .tl-filter .bn-isel .isel-button { min-width: 0; max-width: none; width: 100%; }
  .bn-head-art { width: 72px; height: 32px; }
  .fa-art { width: 88px; height: 38px; }
}

.tsel-combo .isel-list { min-width: max(100%, 210px); }
.tsel-combo .isel-row { min-height: 36px; }
.tsel-check {
  position: relative; flex: none; width: 16px; height: 16px; margin-left: auto;
  border-radius: var(--r-sm); box-shadow: inset 0 0 0 1.5px var(--dim);
}
.isel-row[aria-selected="true"] .tsel-check { background: var(--gold); box-shadow: none; }
.isel-row[aria-selected="true"] .tsel-check::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tsel-combo .isel-list.is-kbd .isel-row.is-active { box-shadow: inset 0 0 0 2px var(--gold); }
.tsel-two .chips { gap: 3px; }
@media (max-width: 640px) {
  .fx-tools > .tsel-combo { flex: 1 1 100%; }
  .fx-tools > .tsel-combo .isel-button { min-width: 0; }
}
@media (pointer: coarse) {
  .tsel-combo .isel-row { min-height: 40px; }
}

.srt { min-width: 0; }
.srt .isel-button { min-width: 168px; }
.srt-face { gap: 8px; }
.srt-k {
  flex: none; font: 700 var(--fs-1) var(--cond); letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute);
}
.srt .isel-list { min-width: max(100%, 220px); }
.srt-row { min-height: 36px; }
.srt-row .isel-name { flex: 1 1 auto; }
.srt-code { flex: none; font: 600 var(--fs-1) var(--mono); color: var(--mute); }
.srt-radio {
  position: relative; flex: none; width: 16px; height: 16px; margin-left: auto;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--dim);
}
.isel-row[aria-selected="true"] .srt-radio { box-shadow: inset 0 0 0 1.5px var(--gold); }
.isel-row[aria-selected="true"] .srt-radio::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--gold);
}
.srt-first { position: relative; margin-top: 9px; }
.srt-first::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: -5px; height: 1px; background: var(--rule);
}
.srt .isel-list.is-kbd .isel-row.is-active { box-shadow: inset 0 0 0 2px var(--gold); }
@media (max-width: 640px) {
  .fx-tools > .srt { flex: 1 1 auto; }
  .fx-tools > .srt .isel-button { min-width: 0; }
}
@media (pointer: coarse) {
  .srt-row { min-height: 40px; }
}

.fxp {
  display: grid; margin: 0 var(--gutter) 16px; padding: 4px 18px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0;
}
.fxp.is-flat { margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }

.fxp-lines { display: grid; gap: 4px; padding: 12px 0; }
.fxp-line { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 4px 0; }
.fxp-when {
  font: 700 var(--fs-2)/1.4 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
  overflow-wrap: anywhere;
}
.fxp-text { margin: 0; font: 500 var(--fs-4)/1.45 var(--body); color: var(--ink); }
.fxp-term { font-weight: 700; }
.fxp-tag {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-sm); vertical-align: 2px;
  background: var(--pill-on); color: var(--ink); font: 600 var(--fs-1)/1.6 var(--body); white-space: nowrap;
}

.fxp-list {
  list-style: none; margin: 0; padding: 14px 0 16px; display: grid; gap: 16px 32px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
.fxp-lines + .fxp-list { border-top: 1px solid var(--rule); }
.fxp-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.fxp-icon { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: contain; }
.fxp-icon.is-empty { display: block; }
.fxp-body { display: grid; gap: 3px; min-width: 0; }
.fxp-name { font: 600 var(--fs-3)/1.3 var(--body); color: var(--ink); }
.fxp-desc { margin: 0; font: 400 var(--fs-3)/1.5 var(--body); color: var(--mute); }
.fxp-facts { margin: 0; font: 400 var(--fs-2)/1.5 var(--body); color: var(--mute); }
.fxp-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; }
.fxp-pair { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.fxp-meta dt {
  font: 700 var(--fs-1)/1.5 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); flex: none;
}
.fxp-meta dd { margin: 0; font: 400 var(--fs-2)/1.5 var(--body); color: var(--ink); min-width: 0; }
.fxp-meta dd.fxp-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.fxp-group {
  margin: 0; padding: 14px 0 0; border-top: 1px solid var(--rule);
  font: 700 var(--fs-2)/1.4 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute);
}
.fxp > .fxp-group:first-child { border-top: 0; }
.fxp-group + .fxp-list { padding-top: 10px; }
.fxp.is-flat .fxp-list { grid-template-columns: minmax(0, 1fr); padding: 6px 0 12px; }
.fxp.is-flat > .fxp-group:first-child { padding-top: 4px; }

@media (max-width: 560px) {
  .fxp { padding: 2px 14px; }
  .fxp.is-flat { padding: 0; }
  .fxp-line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fxp-text { font-size: var(--fs-3); line-height: 1.5; }
  .fxp-row { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .fxp-icon { width: 32px; height: 32px; }
}

.cmb {
  display: grid; margin: 0 var(--gutter) 16px; padding: 4px 18px;
  border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0;
}
.cmb-row {
  display: grid; grid-template-columns: minmax(170px, 1.1fr) 112px 104px 80px minmax(0, 3fr);
  gap: 6px 16px; align-items: center; padding: 10px 0; min-width: 0;
}
.cmb-row + .cmb-row { border-top: 1px solid var(--rule); }
.cmb-head { padding: 10px 0 8px; }
.cmb-h {
  font: 700 var(--fs-1)/1.3 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute);
}
.cmb-head > :nth-child(2), .cmb-head > :nth-child(3), .cmb-head > :nth-child(4),
.cmb-adds, .cmb-share { text-align: right; }
.cmb-head > [title] { cursor: help; }
.cmb-typing { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmb-name { font: 600 var(--fs-3)/1.3 var(--body); color: var(--ink); min-width: 0; }
.cmb-num { font: 500 var(--fs-3)/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.cmb-adds .cmb-num { font-weight: 600; }
.cmb-unit { margin-left: 4px; font: 500 var(--fs-1) var(--body); color: var(--mute); }
.cmb-share.is-hi .cmb-num { color: var(--good); }
.cmb-share.is-quiet .cmb-num { color: var(--mute); }
.cmb-k { display: none; }
.cmb-balls { min-width: 0; }
.cmb-balls .pair-ball { min-height: 32px; }
.cmb-balls .pair-ball .thumb { width: 22px; height: 22px; }

@media (max-width: 760px) {
  .cmb { padding: 2px 14px; }
  .cmb-head { display: none; }
  .cmb-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ty ty adds" "gap res res" "balls balls balls";
    gap: 6px 18px; padding: 12px 0;
  }
  .cmb-head + .cmb-row { border-top: 0; }
  .cmb-typing { grid-area: ty; flex-wrap: wrap; row-gap: 4px; }
  .cmb-name { overflow-wrap: anywhere; }
  .cmb-adds { grid-area: adds; justify-self: end; white-space: nowrap; }
  .cmb-share { text-align: left; display: flex; align-items: baseline; gap: 6px; }
  .cmb-share.is-gap { grid-area: gap; }
  .cmb-share.is-quiet { grid-area: res; }
  .cmb-k {
    display: inline; font: 700 var(--fs-1)/1.3 var(--cond); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--mute);
  }
  .cmb-balls { grid-area: balls; }
  .cmb-balls .pair-ball { gap: 5px; padding: 3px 8px 3px 6px; font-size: var(--fs-2); }
  .cmb-balls .pair-ball .chips { gap: 2px; }
  .cmb-balls .pair-ball .chip { font-size: 0; gap: 0; padding: 2px 3px; }
}

.bv { --bv-a: var(--gold); --bv-b: var(--acc-amber); }
.bv .title-row { flex-wrap: wrap; row-gap: 8px; }
.bv-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px;
  padding: 16px 12px; border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--bv-a) 14%, transparent), transparent 60%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--bv-b) 14%, transparent), transparent 60%), var(--panel); }
.bv-side { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 6px; border-radius: var(--r-lg);
  color: var(--ink); text-align: center; text-decoration: none; }
.bv-side .thumb, .bv-side .dm-noart { width: 88px; height: 88px; object-fit: contain; }
.bv-side:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bv-name { font: 700 var(--fs-4)/1.15 var(--cond); overflow-wrap: anywhere; }
.bv-vs { align-self: center; justify-self: center; font: 700 var(--fs-3)/1 var(--cond); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); }
.bv-cards { display: grid; gap: 12px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.bv-nums { display: flex; justify-content: space-between; gap: 12px; }
.bv-num { display: grid; gap: 2px; min-width: 0; }
.bv-num.is-b { text-align: right; }
.bv-num-v { font: 700 var(--fs-5)/1 var(--cond); font-variant-numeric: tabular-nums; }
.bv-num.is-a .bv-num-v { color: color-mix(in srgb, var(--bv-a) 85%, var(--ink)); }
.bv-num.is-b .bv-num-v { color: color-mix(in srgb, var(--bv-b) 85%, var(--ink)); }
.bv-num-l { font-size: var(--fs-2); color: var(--mute); overflow-wrap: anywhere; }
.bv-split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--row); }
.bv-split-a { flex: 0 1 0; background: var(--bv-a); }
.bv-split-b { flex: 0 1 0; background: var(--bv-b); }
.bv-attack .dm-row.is-a .dm-bar-fill { --tone: var(--bv-a); }
.bv-attack .dm-row.is-b .dm-bar-fill { --tone: var(--bv-b); }
.bv-arena .dm-fig { min-width: 128px; }
.bv-arena .bv-split { width: 100%; height: 6px; }
.bv-chart-row { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--row); }
.bv-outs { display: flex; flex-wrap: wrap; gap: 6px; }
.bv-out { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px;
  background: var(--panel); font: 600 var(--fs-2)/1.4 var(--body); }
.bv-out.is-good .bv-out-w { color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
.bv-out.is-bad .bv-out-w { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); }
.bv-pickers { display: grid; gap: 10px; min-width: 0; }
.bv-pickers > .bv-vs { padding: 2px 0; }
.bv-pick { align-content: start; }
.bv-slot { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; }
.bv-slot .thumb, .bv-slot .dm-noart { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; border-radius: var(--r-lg); }
.bv-slot-mark { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: var(--r-lg);
  border: 1px dashed var(--rule); color: var(--dim); font: 700 var(--fs-5)/1 var(--cond); }
.bv-slot.is-empty .bv-name { color: var(--mute); }
.bv-pick .dm-chip:disabled { opacity: .4; cursor: not-allowed; }
.bv-pick .dm-chips.is-hits { flex-wrap: wrap; overflow: visible; }
.ball-hero .title-row { flex-wrap: wrap; row-gap: 8px; }
.ball-hero .compare-link, .bv .compare-link { white-space: nowrap; }
@media (min-width: 720px) {
  .bv-pickers { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
  .bv-pickers > .bv-vs { align-self: start; padding-top: 38px; }
  .bv-side .thumb, .bv-side .dm-noart { width: 112px; height: 112px; }
  .bv-name { font-size: var(--fs-5); }
}
@media (hover: hover) {
  .bv-side:hover { background: var(--lift); }
}