/* Classic's retired public URLs share the site's theme and brand. */
    .classic-status-page { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.65 var(--font-ui); }
    .classic-status-page .site-header-inner { justify-content: space-between; }
    .classic-status-page .brand { text-decoration: none; }
    .classic-status-controls, .classic-status-languages { display: flex; align-items: center; gap: 16px; }
    .classic-status-languages a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-muted); font-size: 12px; text-decoration: none; }
    .classic-status-languages a[aria-current] { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
    .classic-status-theme { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
    .classic-status-theme:hover { background: var(--surface-2); color: var(--text); }
    .classic-status-page a:focus-visible, .classic-status-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
    .classic-status-main { max-width: 720px; margin: 0 auto; padding: 112px 24px 64px; }
    .classic-status-eyebrow { margin: 0 0 16px; color: var(--text-muted); font-size: 12px; }
    .classic-status-main h1 { margin: 0 0 20px; font-size: 28px; font-weight: 600; line-height: 1.3; }
    .classic-status-reason { margin: 0 0 32px; color: var(--text-muted); font-size: 15px; line-height: 1.9; }
    .classic-status-details { margin: 0; border-top: 1px solid var(--border); }
    .classic-status-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--border); }
    .classic-status-details dt { color: var(--text-muted); }
    .classic-status-details dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
    .classic-status-resume { margin: 20px 0 28px; color: var(--text-muted); font-size: 13px; }
    .classic-status-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
    .classic-status-actions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); text-decoration: none; }
    .classic-status-actions a:hover { color: var(--text); text-decoration: underline; }
    .classic-status-actions .classic-status-primary { gap: 20px; padding: 10px 16px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-on); font-weight: 600; }
    .classic-status-actions .classic-status-primary:hover { color: var(--accent-on); }
    .classic-status-note { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
    @media (max-width: 640px) {
        .classic-status-page .site-header-inner { min-height: 56px; flex-wrap: nowrap; }
        .classic-status-controls, .classic-status-languages { gap: 12px; }
        .classic-status-main { padding: 88px 20px 40px; }
        .classic-status-main h1 { font-size: 24px; }
        .classic-status-reason { font-size: 14px; }
        .classic-status-details > div { gap: 12px; font-size: 13px; }
    }
    @media (max-width: 360px) {
        .classic-status-page .brand-title { font-size: 20px; }
        .classic-status-controls, .classic-status-languages { gap: 8px; }
        .classic-status-languages a { font-size: 11px; white-space: nowrap; }
    }

    /* ===== Theme tokens.  Dark is the default; [data-theme="light"] flips
       the palette.  New chrome (header, nav, views, settings, column) is
       authored entirely against these vars so both themes are correct.  The
       dense legacy tier-list surfaces keep their hardcoded dark values and
       get a curated set of light overrides further down (search
       "[data-theme=light]"). ===== */
    :root {
        color-scheme: dark;
        /* Near-black charcoal with a faint cool slate bias (tool-site dark,
           not violet/luxury). Reference direction: TFT Academy-style
           #0a0b0d → #0e151d, gold accent on neutral black. */
        --bg: #0a0b0d;
        --surface: #101114;
        --surface-2: #161a20;
        --surface-sunken: #0b0d0f;
        --surface-raised: #1a1d21;
        --chip-bg: #1a1d21;
        --overlay: #1e2329;
        --text: #e8eaed;
        --text-muted: #9aa0a6;
        --text-dim: #6b7280;
        --font-ui: "Noto Sans TC", -apple-system, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif;
        --font-caption: "Noto Serif TC", "Source Han Serif TC", "PingFang TC", "PMingLiU", "Songti TC", serif;
        /* Translucent-white borders read as a top-lit edge and auto-adapt to
           every elevation + the light theme (premium-dark technique). */
        --border: rgba(255, 255, 255, 0.09);
        --border-strong: rgba(255, 255, 255, 0.15);
        --accent: #f5c518;
        --accent-soft: #f5d780;
        --accent-on: #14110a;
        /* Zen data surfaces: one quiet elevation for panels, one for their
           contents, and low-chroma status colors so the numbers stay legible
           without turning every row into a traffic light. */
        --panel-surface: oklch(0.235 0.012 255);
        --panel-inner: oklch(0.195 0.012 255);
        --panel-quiet: oklch(0.175 0.01 255);
        /* Augment artwork needs a dark backing in either theme. */
        --augment-icon-surface: #0b0e13;
        --tip-surface: oklch(0.155 0.008 255);
        --desc-ap: oklch(0.76 0.13 296);
        --desc-ad: oklch(0.8 0.12 55);
        --desc-magic: oklch(0.81 0.105 220);
        --desc-physical: oklch(0.8 0.12 55);
        --desc-true: oklch(0.91 0.04 210);
        --desc-health: oklch(0.8 0.12 155);
        --desc-speed: oklch(0.86 0.12 90);
        --desc-haste: oklch(0.84 0.09 175);
        --desc-shield: oklch(0.81 0.105 220);
        --desc-crit: oklch(0.81 0.11 60);
        --desc-mana: oklch(0.79 0.1 245);
        --tier-op-frame: linear-gradient(135deg,
            #ffffff 0%, #e7d5ff 18%, #bcd6ff 36%,
            #ffd5ec 58%, #fff1c8 78%, #ffffff 100%);
        --panel-line: color-mix(in oklab, var(--text) 11%, transparent);
        --panel-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
        --wr-positive: oklch(0.78 0.055 155);
        --wr-negative: oklch(0.79 0.05 18);
        --wr-neutral: var(--text-muted);
        --wr-5: oklch(0.723 0.192 149.6);
        --wr-4: oklch(0.871 0.136 154.4);
        --wr-3: var(--text-muted);
        --wr-2: oklch(0.802 0.086 11.8);
        --wr-1: oklch(0.676 0.213 19.8);
        --pick-quiet: var(--text-muted);
        --radar-grid: rgba(255, 255, 255, 0.10);
        --radar-baseline: rgba(255, 255, 255, 0.32);
        --radar-label: #d4d8de;
        --radar-compare-stroke: rgba(196, 200, 208, 0.90);
        --radar-compare-fill: rgba(160, 166, 176, 0.14);
        --radar-compare-dot: rgba(210, 214, 220, 0.95);
        --header-h: 56px;
        --container: 1320px;
        --r-sm: 8px;
        --r-md: 12px;
        --r-lg: 16px;
        --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
        /* One ease-out curve + a 4-step duration scale = coherent motion. */
        --ease: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --dur-1: 120ms;
        --dur-2: 180ms;
        --dur-3: 240ms;
        --dur-4: 320ms;
    }
    :root[data-theme="light"] {
        color-scheme: light;
        --bg: #f3f5f9;
        --surface: #ffffff;
        --surface-2: #eef0f3;
        --surface-sunken: #eef1f6;
        --surface-raised: #ffffff;
        --tip-surface: oklch(0.99 0.004 255);
        --desc-ap: oklch(0.45 0.16 296);
        --desc-ad: oklch(0.44 0.1 55);
        --desc-magic: oklch(0.43 0.08 220);
        --desc-physical: oklch(0.44 0.1 55);
        --desc-true: oklch(0.4 0.035 210);
        --desc-health: oklch(0.42 0.09 155);
        --desc-speed: oklch(0.43 0.08 90);
        --desc-haste: oklch(0.42 0.07 175);
        --desc-shield: oklch(0.43 0.08 220);
        --desc-crit: oklch(0.45 0.1 60);
        --desc-mana: oklch(0.44 0.1 245);
        --chip-bg: #eceff4;
        --overlay: #ffffff;
        --text: #1a1e26;
        --text-muted: #5b6472;
        --text-dim: #818b99;
        --border: rgba(0, 0, 0, 0.10);
        --border-strong: rgba(0, 0, 0, 0.16);
        /* Vivid gold for fills/underline; the darker soft tone is text-only. */
        --accent: #e0a500;
        --accent-soft: #9a7100;
        --accent-on: #14110a;
        --panel-surface: oklch(0.99 0.006 250);
        --panel-inner: oklch(0.965 0.008 250);
        --panel-quiet: oklch(0.95 0.008 250);
        --panel-line: color-mix(in oklab, var(--text) 14%, transparent);
        --panel-shadow: 0 10px 32px rgba(31, 41, 55, 0.10);
        --tier-op-frame: linear-gradient(135deg,
            oklch(0.52 0.18 295) 0%, oklch(0.58 0.16 260) 36%,
            oklch(0.55 0.17 335) 68%, oklch(0.52 0.18 295) 100%);
        --wr-positive: oklch(0.53 0.09 155);
        --wr-negative: oklch(0.56 0.09 18);
        --wr-neutral: var(--text-muted);
        --wr-5: oklch(0.500 0.137 150.1);
        --wr-4: oklch(0.490 0.092 155.3);
        --wr-3: var(--text-muted);
        --wr-2: oklch(0.530 0.126 10.2);
        --wr-1: oklch(0.530 0.199 21.6);
        --pick-quiet: var(--text-muted);
        --radar-grid: rgba(26, 30, 38, 0.14);
        --radar-baseline: rgba(26, 30, 38, 0.32);
        --radar-label: #46505e;
        --radar-compare-stroke: rgba(91, 100, 114, 0.86);
        --radar-compare-fill: rgba(91, 100, 114, 0.12);
        --radar-compare-dot: rgba(70, 80, 94, 0.92);
        --shadow: 0 18px 50px rgba(31,41,55,0.16);
    }
    :root:lang(zh-Hans), :root:lang(zh-CN) {
        --font-ui: "Noto Sans SC", "Noto Sans TC", "Microsoft YaHei", "PingFang SC", -apple-system, "Segoe UI", sans-serif;
        --font-caption: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    }
    * { box-sizing: border-box; }
    /* During a theme flip, kill every transition for one tick so var()-driven
       backgrounds snap to the new palette instead of getting stuck mid-
       transition on the `background` shorthand. */
    .no-theme-transition * { transition: none !important; }
    body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        /* Body = locale-specific Noto Sans (readable in dense UI).  Serif
           is reserved for small captions — see `.subtitle`,
           `.aug .alift`. */
        font-family: var(--font-ui);
        padding: 0;
    }
    /* Soft vertical wash: pure near-black most of the way, then a faint cool
       slate at the footer — same idea as TFT Academy's body gradient, without
       a colored radial that reads as purple/luxury. */
    :root:not([data-theme="light"]) body {
        background: linear-gradient(#0a0b0d, #0a0b0d 74%, #0e151d) 0 0 / cover no-repeat fixed;
    }
    h1 { margin: 0; font-weight: 600; font-size: 22px; line-height: 1.1; }
    /* Mincho-only captions — opt-in serif for the three small metadata
       lines the user picked out: page subtitle, detail-panel sub-heading,
       and augment card's lift/games row. */
    .subtitle,
    .aug .alift {
        font-family: var(--font-caption);
    }
    .subtitle { color: var(--text-muted); font-size: 13px; }
    .title-patch {
        font-family: var(--font-ui);
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        color: #8d96a0;
    }
    /* Top header row — title on the left, GitHub star CTA on the right. */
    .page-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px 12px;
        margin-bottom: 14px;
    }
    .page-header > div:first-child { min-width: 0; }
    .title-meta {
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 0;
    }
    .page-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        justify-self: end;
        align-self: start;
    }
    .page-actions .icon-btn,
    .page-actions .gh-star {
        min-height: auto;
        padding: 0 0 2px;
        background: transparent;
        border: 0;
        border-radius: 0;
    }
    .page-actions .icon-btn:hover,
    .page-actions .gh-star:hover {
        background: transparent;
        border-color: transparent;
        color: #e6e8eb;
    }
    .tool-btn.header-update-tab {
        min-height: auto;
        padding: 0 0 2px;
        font-size: 11px;
        font-weight: 600;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #f5d780;
        border-radius: 0;
        color: #f5d780;
        line-height: 1.2;
    }
    .app-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
    .app-shell.with-side-panel {
        grid-template-columns: minmax(0, 1fr) minmax(480px, 520px);
    }
    .main-col { min-width: 0; }
    .icon-btn,
    .gh-star {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: var(--surface-raised);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.12s, border-color 0.12s;
    }
    .icon-btn {
        cursor: pointer;
        font: inherit;
    }
    .icon-btn:hover,
    .gh-star:hover { background: var(--overlay); border-color: var(--border-strong); }
    .icon-btn svg,
    .gh-star svg { flex-shrink: 0; }
    .gh-star {
        width: 36px;
        justify-content: center;
        padding: 6px 0;
    }
    .page-actions .gh-star {
        width: auto;
        justify-content: flex-start;
    }
    .lang-toggle { min-width: 56px; justify-content: center; }
    .lang-toggle span { font-size: 12px; letter-spacing: 0; }
    .lang-menu { position: relative; display: inline-flex; }
    /* Shared row height so chips + sticky search sit on one baseline. */
    .view-home .main-col {
        --filter-row-h: 40px;
    }
    /* Role chips + shown-count: one row; reserve right gutter for sticky search.
       Search-rail is the *next sibling* under .main-col (not nested here) so
       sticky pin lasts for the whole tier/detail scroll. */
    .filter-bar {
        position: static;
        z-index: auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        align-items: center;
        min-height: var(--filter-row-h, 40px);
        margin: 0;
        /* Room for sticky search chip on the right (count lives after Tank). */
        padding: 0 max(260px, calc(min(280px, 32vw) + 112px)) 0 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
    }
    .filter-bar .role-chips {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }
    /* Inline after the last role chip (坦克 / Tank), not a floating pill by search. */
    .filter-bar .role-chips .shown-count {
        flex: 0 0 auto;
        margin-left: 4px;
        padding: 0 2px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted, #9aa0a6);
        background: none;
        border: 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .filter-bar .role-chips .shown-count #shown-n {
        color: var(--text-muted, #9aa0a6);
        font-weight: 600;
    }
    /* Sticky search: fixed pin under site header (list + detail). Overlays
       content with z-index — never reserves a second sticky band that shoves
       detail chrome down. Negative margin pulls the rail into the filter
       chips row at rest; chips may scroll away, search stays put on the right. */
    .search-rail {
        position: sticky;
        top: var(--header-h, 56px);
        z-index: 32;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: fit-content;
        max-width: 100%;
        margin: calc(-1 * var(--filter-row-h, 40px)) 0 16px auto;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        pointer-events: none;
    }
    .search-rail .search-wrap {
        pointer-events: auto;
        flex: 0 1 280px;
        width: min(280px, 32vw);
        max-width: 280px;
        min-width: 150px;
        background: color-mix(in srgb, var(--bg) 78%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 0;
    }
    .search-rail .search {
        background: transparent;
        border-color: transparent;
    }
    .search-rail .search:focus {
        box-shadow: none;
    }
    .search-rail .search-control {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: 100%;
    }
    .role-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .chip {
        padding: 5px 12px;
        background: var(--chip-bg);
        color: var(--text-muted);
        border: 1px solid transparent;
        border-radius: 18px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.1s;
    }
    .chip:hover { background: var(--overlay); }
    .chip.active {
        background: var(--role-color, #f5c518);
        color: #0e1116;
        border-color: var(--role-color, #f5c518);
    }
    .chip[data-role=""]              { --role-color: #f5c518; }
    .chip[data-role="Assassin"]      { --role-color: #ef4444; }
    .chip[data-role="Fighter"]       { --role-color: #f97316; }
    .chip[data-role="Mage"]          { --role-color: #3b82f6; }
    .chip[data-role="Marksman"]      { --role-color: #22c55e; }
    .chip[data-role="Support"]       { --role-color: #ec4899; }
    .chip[data-role="Tank"]          { --role-color: #a855f7; }
    .filter-tools {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
        flex: 1;
        justify-content: flex-end;
    }
    .tool-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 6px 12px;
        background: var(--surface-raised);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .tool-btn:hover { background: var(--overlay); border-color: var(--border-strong); }
    .tool-btn.active {
        background: #f5d780;
        border-color: #f5d780;
        color: #231802;
    }
    .tool-btn.ghost {
        background: transparent;
        color: #c5cad3;
    }
    .tool-btn.ghost:hover {
        background: rgba(255,255,255,0.04);
    }
    .tool-btn.update-tab {
        position: relative;
        border-color: #f5d780;
        color: #f5d780;
    }
    .tool-btn.update-tab[aria-expanded="true"] {
        background: transparent;
        color: #f8e39f;
    }
    .tool-btn.header-update-tab:hover {
        background: transparent;
        border-color: #f8e39f;
        color: #f8e39f;
    }
    .search-row { display: contents; }
    .updates-panel {
        margin: 0 0 18px;
        padding: 14px 16px 16px;
        background: #11151d;
        border: 1px solid #30363d;
        border-radius: 10px;
        box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    }
    .updates-panel.is-hidden { display: none; }
    .updates-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 10px;
    }
    .updates-kicker {
        display: block;
        margin-bottom: 2px;
        color: #f5d780;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
    }
    .updates-title {
        margin: 0;
        color: #e6e8eb;
        font-size: 15px;
        font-weight: 700;
    }
    .updates-close {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border: 1px solid #30363d;
        border-radius: 999px;
        background: #1b2030;
        color: #c5cad3;
        font: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
    }
    .updates-close:hover {
        background: #2a3142;
        border-color: #58606b;
    }
    .updates-list {
        display: grid;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .updates-list li {
        position: relative;
        padding-left: 14px;
        color: #c5cad3;
        font-size: 12px;
        line-height: 1.6;
    }
    .updates-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.72em;
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: #f5d780;
    }
    .change-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 12px;
    }
    .change-chip {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 3px 8px;
        border: 1px solid rgba(245, 215, 128, 0.28);
        border-radius: 999px;
        color: #d8dce3;
        background: rgba(245, 215, 128, 0.06);
        font-size: 11px;
        line-height: 1.2;
    }
    .change-tabs {
        display: flex;
        gap: 6px;
        margin: 2px 0 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .change-tabs::-webkit-scrollbar { display: none; }
    .change-tab {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 5px 10px;
        border: 1px solid #30363d;
        border-radius: 999px;
        background: #1b2030;
        color: #c5cad3;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }
    .change-tab:hover {
        border-color: #58606b;
        background: #21283a;
    }
    .change-tab.active {
        border-color: #f5d780;
        background: #f5d780;
        color: #231802;
    }
    .change-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .change-column-title {
        margin: 0 0 8px;
        color: #e6e8eb;
        font-size: 12px;
        font-weight: 800;
    }
    .change-list {
        display: grid;
        gap: 6px;
    }
    .change-row {
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 9px;
        align-items: center;
        min-height: 44px;
        padding: 7px 9px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.025);
        color: inherit;
        text-align: left;
        font: inherit;
    }
    button.change-row {
        cursor: pointer;
    }
    button.change-row:hover {
        border-color: rgba(245, 215, 128, 0.38);
        background: rgba(245, 215, 128, 0.045);
    }
    .change-icon,
    .change-duo img {
        width: 34px;
        height: 34px;
        border-radius: 6px;
        object-fit: cover;
        background: #0e1116;
    }
    .change-duo {
        display: inline-flex;
        align-items: center;
    }
    .change-duo img + img {
        margin-left: -9px;
        box-shadow: -2px 0 0 #11151d;
    }
    .change-name {
        min-width: 0;
        color: #e6e8eb;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .change-meta {
        display: block;
        margin-top: 2px;
        color: #8d96a0;
        font-size: 10px;
        line-height: 1.35;
    }
    .change-delta {
        justify-self: end;
        min-width: 56px;
        padding: 3px 6px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        text-align: center;
    }
    .change-delta.up {
        color: #11151d;
        background: #7ddc8a;
    }
    .change-delta.down {
        color: #180f12;
        background: #ff9aa5;
    }
    .change-empty {
        color: #9aa0a6;
        font-size: 12px;
        line-height: 1.6;
    }
    .search-wrap {
        position: relative;
        max-width: none;
        min-width: 0;
    }
    .search-wrap svg {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
        pointer-events: none;
    }
    .search-wrap:focus-within svg { color: #9aa0a6; }
    .search {
        width: 100%;
        height: 40px;
        padding: 0 12px 0 30px;
        background: color-mix(in oklab, var(--surface-sunken) 88%, transparent);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 12px;
        font-size: 14px;
        font-family: inherit;
        outline: none;
        transition: border-color .12s, box-shadow .12s;
    }
    .search:focus {
        border-color: rgba(148, 163, 184, 0.4);
        box-shadow: 0 0 0 3px rgba(88,96,107,0.16);
    }
    .shown-count {
        color: #9fb3d9;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .shown-count #shown-n {
        color: #e6e8eb;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
    .side-panel {
        position: sticky;
        top: 24px;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        background: #11151d;
        border: 1px solid #1f2530;
        border-radius: 12px;
        padding: 14px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    }
    .side-panel.is-modal-open {
        display: block;
    }
    .side-panel.is-hidden {
        display: none;
    }
    .side-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }
    .side-head h2 {
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 600;
    }
    .side-close,
    .rec-fab {
        border: 1px solid #30363d;
        background: #1b2030;
        color: #e6e8eb;
        font-family: inherit;
        font-weight: 700;
        cursor: pointer;
    }
    .side-close {
        display: none;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        flex-shrink: 0;
    }
    .rec-fab {
        display: none;
        position: fixed;
        right: 14px;
        bottom: 14px;
        z-index: 40;
        min-height: 46px;
        padding: 0 16px;
        border-radius: 999px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.36);
    }
    .rec-fab:not(.is-hidden) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .side-sub {
        color: #9aa0a6;
        font-size: 12px;
        line-height: 1.55;
    }
    /* Always one horizontal row of up to 5 pick chips (full ARAM roster). */
    .pick-slots {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 6px;
        margin: 10px 0 6px;
        min-width: 0;
    }
    .side-panel.is-full-team .pick-slots {
        margin: 8px 0 4px;
    }
    .side-panel.is-full-team .side-sub {
        font-size: 11px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .side-panel.is-full-team .pick-note {
        min-height: 0;
        margin-bottom: 6px;
        font-size: 10px;
    }
    .pick-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1 1 0;
        min-width: 0;
        min-height: 32px;
        padding: 4px 5px;
        border-radius: 999px;
        border: 1px solid #30363d;
        background: #1b2030;
        color: #e6e8eb;
        font-size: 11px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
    }
    .pick-chip img {
        width: 20px;
        height: 20px;
        border-radius: 999px;
        display: block;
        object-fit: cover;
        background: #2a3142;
        border: 1px solid rgba(255,255,255,0.08);
        flex-shrink: 0;
    }
    /* Name / empty label: shrink + ellipsis so 5 chips stay on one line. */
    .pick-chip > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pick-chip.empty {
        border-style: dashed;
        color: #6b7280;
        background: transparent;
        cursor: default;
    }
    .pick-note {
        min-height: 18px;
        color: #9aa0a6;
        font-size: 11px;
        margin-bottom: 10px;
    }
    .rec-list {
        display: grid;
        gap: 8px;
    }
    .panel-empty {
        color: #6b7280;
        font-size: 12px;
        line-height: 1.6;
        padding: 8px 0 4px;
    }
    /* Full 5-man team evaluation — dense layout so one viewport can show all. */
    /* Team eval: one flat surface — sections split by hairlines, no card-in-card.
       The WR header is a horizontal stat row (number · label+meta · breakdown)
       so it holds up in the wide draft panel and wraps in the narrow side card. */
    .team-eval {
        display: grid;
        gap: 0;
    }
    .team-eval-wr {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 14px;
        padding: 2px 0 12px;
    }
    .team-wr-num {
        font-size: 27px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .team-eval-wr.is-good .team-wr-num { color: #22c55e; }
    .team-eval-wr.is-bad .team-wr-num { color: #ff4d5e; }
    .team-eval-wr.is-even .team-wr-num { color: var(--text, #e6e8ea); }
    .team-wr-side {
        display: grid;
        gap: 2px;
        min-width: 0;
    }
    .team-wr-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted, #9aa0a6);
        line-height: 1.2;
    }
    .team-wr-breakdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 14px;
        margin-left: auto;
        font-size: 11px;
        color: var(--text-secondary, #c4c8ce);
        font-variant-numeric: tabular-nums;
    }
    .team-wr-breakdown .team-delta {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    /* 陣容搭配 / pair lift: 正綠 → 淺綠 → 無色 → 淺紅 → 正紅 */
    .team-delta.tone-pos-2 { color: #22c55e; }
    .team-delta.tone-pos-1 { color: #86efac; }
    .team-delta.tone-zero  { color: var(--text-secondary, #c4c8ce); font-weight: 600; }
    .team-delta.tone-neg-1 { color: #f0a8b0; }
    .team-delta.tone-neg-2 { color: #ff4d5e; }
    [data-theme="light"] .team-delta.tone-pos-2 { color: #15803d; }
    [data-theme="light"] .team-delta.tone-pos-1 { color: #3d9b5f; }
    [data-theme="light"] .team-delta.tone-zero  { color: var(--text-muted); }
    [data-theme="light"] .team-delta.tone-neg-1 { color: #d98992; }
    [data-theme="light"] .team-delta.tone-neg-2 { color: #d32f3f; }
    .team-wr-meta {
        font-size: 10px;
        color: var(--text-dim, #6a6f77);
        line-height: 1.2;
    }
    .team-eval-block {
        padding: 11px 0 2px;
        border-top: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    }
    .team-eval-h {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted, #9aa0a6);
        margin: 0 0 8px;
    }
    /* Radar left + dim bars right — halves the vertical stack. */
    .team-dims-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 6px 10px;
        align-items: center;
    }
    .team-eval-radar {
        margin: 0;
        min-width: 0;
    }
    .team-eval-radar .comp-radar {
        display: block;
        width: 100%;
        height: auto;
        max-height: 168px;
    }
    .team-comp-list {
        display: grid;
        gap: 4px;
        min-width: 0;
        align-content: center;
    }
    .team-comp-row {
        display: grid;
        grid-template-columns: 32px 1fr 24px auto;
        gap: 5px;
        align-items: center;
        font-size: 10px;
    }
    .team-comp-row .ab-val {
        text-align: right;
        font-variant-numeric: tabular-nums;
        color: var(--text-secondary, #c4c8ce);
        font-weight: 600;
    }
    .team-comp-name {
        color: var(--text-muted, #9aa0a6);
        font-weight: 600;
    }
    .team-comp-tag {
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }
    /* Narrow panel / mobile modal: stack dims if split gets too tight. */
    @media (max-width: 420px) {
        .team-dims-split {
            grid-template-columns: 1fr;
            gap: 8px;
        }
        .team-eval-radar .comp-radar {
            max-height: 180px;
            margin: 0 auto;
            max-width: 220px;
        }
    }
    /* Dim grade: 偏弱 / 普通 / 充足 (bad / mid / good) from mean capability pct.
       Tags are text-only (pills ×6 read as noise); 普通 recedes into slate so
       only outliers pop. Track carries 1px ticks at the 40/65 grade cuts. */
    .team-comp-row.is-bad .team-comp-tag { color: #f87171; }
    .team-comp-row.is-mid .team-comp-tag { color: var(--text-dim, #6a6f77); }
    .team-comp-row.is-good .team-comp-tag { color: #4ade80; }
    [data-theme="light"] .team-comp-row.is-bad .team-comp-tag { color: #d32f3f; }
    [data-theme="light"] .team-comp-row.is-mid .team-comp-tag { color: var(--text-muted); }
    [data-theme="light"] .team-comp-row.is-good .team-comp-tag { color: #15803d; }
    .team-comp-row .ab-bar {
        --tick: rgba(255, 255, 255, 0.22);
        height: 5px;
        border-radius: 999px;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.07);
        background-image:
            linear-gradient(90deg, transparent calc(40% - 0.5px), var(--tick) calc(40% - 0.5px), var(--tick) calc(40% + 0.5px), transparent calc(40% + 0.5px)),
            linear-gradient(90deg, transparent calc(65% - 0.5px), var(--tick) calc(65% - 0.5px), var(--tick) calc(65% + 0.5px), transparent calc(65% + 0.5px));
    }
    [data-theme="light"] .team-comp-row .ab-bar {
        --tick: rgba(0, 0, 0, 0.22);
        background-color: rgba(0, 0, 0, 0.07);
    }
    .team-comp-row .ab-bar > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #74839a;
    }
    .team-comp-row.is-bad .ab-bar > span { background: #ef4444; }
    .team-comp-row.is-good .ab-bar > span { background: #22c55e; }
    /* Dual-endpoint early↔late continuum (not a good/bad grade). */
    .team-tempo-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
    }
    .team-tempo-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        align-items: center;
    }
    .team-tempo-end {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted, #9aa0a6);
        min-width: 0;
        line-height: 1.2;
    }
    .team-tempo-end small {
        font-size: 10px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--text-dim, #6a6f77);
    }
    .team-tempo-end.is-early { color: #7fc8ff; }
    .team-tempo-end.is-late { color: #c4a0ff; }
    .team-tempo-end.is-early small { color: #5fa6e0; }
    .team-tempo-end.is-late small { color: #a78bfa; }
    .team-tempo-track {
        position: relative;
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        overflow: visible;
    }
    /* Fill grows from the 50/50 mark toward the lean side: length = lean
       strength (deviation from balanced), colour = which side. */
    .team-tempo-fill {
        position: absolute;
        top: 0;
        bottom: 0;
        border-radius: 999px;
    }
    .team-tempo-fill.is-early { background: #6cb8f2; }
    .team-tempo-fill.is-late { background: #a78bfa; }
    .team-tempo-mid {
        position: absolute;
        top: -2px;
        bottom: -2px;
        left: 50%;
        width: 1px;
        transform: translateX(-0.5px);
        background: rgba(255, 255, 255, 0.25);
        pointer-events: none;
    }
    .team-tempo-marker {
        position: absolute;
        top: 50%;
        width: 10px;
        height: 10px;
        margin-left: -5px;
        transform: translateY(-50%);
        border-radius: 50%;
        background: var(--text, #e6e8ea);
        border: 2px solid var(--surface, #101114);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
        z-index: 1;
    }
    .team-tempo-lean {
        margin: 0;
        text-align: right;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-secondary, #c4c8ce);
        white-space: nowrap;
    }
    [data-theme="light"] .team-tempo-track {
        background: rgba(0, 0, 0, 0.07);
    }
    [data-theme="light"] .team-tempo-mid {
        background: rgba(0, 0, 0, 0.25);
    }
    [data-theme="light"] .team-tempo-fill.is-early { background: #2563eb; }
    [data-theme="light"] .team-tempo-fill.is-late { background: #7c3aed; }
    [data-theme="light"] .team-tempo-marker {
        background: var(--text);
        border-color: #ffffff;
        box-shadow: 0 1px 5px rgba(31, 41, 55, 0.2);
    }
    .rec-row {
        display: grid;
        grid-template-columns: 22px 40px 1fr;
        gap: 8px;
        align-items: center;
        width: 100%;
        padding: 8px;
        border-radius: 10px;
        background: #1b2030;
        border: 1px solid rgba(255,255,255,0.05);
        cursor: pointer;
        font: inherit;
        text-align: left;
        transition: background 0.12s, border-color 0.12s, transform 0.08s;
    }
    .rec-row:hover {
        background: #20263a;
        border-color: rgba(245,215,128,0.28);
        transform: translateY(-1px);
    }
    .rec-row.least-fit {
        background: linear-gradient(135deg, rgba(54, 24, 30, 0.82), #1b2030 72%);
        border-color: rgba(255,138,138,0.22);
    }
    .rec-row.least-fit:hover {
        background: linear-gradient(135deg, rgba(66, 28, 35, 0.9), #20263a 72%);
        border-color: rgba(255,138,138,0.38);
    }
    .rec-rank {
        color: #9aa0a6;
        font-size: 11px;
        font-weight: 700;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .rec-row.least-fit .rec-rank { color: #ff8a8a; }
    .rec-row img {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: block;
        background: #2a3142;
    }
    .rec-main {
        display: grid;
        gap: 4px;
        min-width: 0;
    }
    .rec-titleline {
        display: grid;
        grid-template-columns: minmax(96px, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .rec-name {
        display: block;
        color: #e6e8eb;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rec-meta {
        display: grid;
        gap: 3px;
        margin-top: 2px;
        color: #9aa0a6;
        font-size: 11px;
        line-height: 1.35;
        font-variant-numeric: tabular-nums;
        min-width: 0;
    }
    .rec-scoreline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
    }
    .rec-score {
        color: oklch(0.76 0.09 92);
        font-weight: 700;
        justify-self: end;
        white-space: nowrap;
    }
    .rec-score.fit-top {
        color: oklch(0.91 0.13 92);
        text-shadow: 0 0 12px rgba(245, 215, 128, 0.24);
    }
    .rec-score.fit-strong { color: oklch(0.84 0.12 92); }
    .rec-score.fit-solid { color: oklch(0.76 0.09 92); }
    .rec-score.fit-soft { color: oklch(0.68 0.06 92); }
    .rec-score.fit-floor { color: #9aa0a6; }
    .rec-score.fit-worst { color: #ff8a8a; }
    .rec-detail {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: start;
        gap: 8px;
        align-items: center;
        min-width: 0;
        white-space: nowrap;
    }
    .rec-detail .good,
    .rec-meta .z {
        color: #6bd16b;
        font-weight: 700;
    }
    .rec-detail .bad {
        color: #ff8a8a;
        font-weight: 700;
    }
    .rec-detail .muted {
        color: #9aa0a6;
    }
    /* Empty filter state — surfaces when role × search yields zero champs.
       Mincho italic to match the caption typography elsewhere, deliberately
       gentle (not an error) since nothing actually broke. */
    .empty-state {
        display: none;
        margin: 32px auto;
        max-width: 480px;
        padding: 24px;
        text-align: center;
        color: #9aa0a6;
        font-family: var(--font-caption);
        font-size: 14px;
        font-style: italic;
        line-height: 1.6;
    }
    .empty-state.visible { display: block; }
    .empty-state strong {
        display: block;
        margin-bottom: 4px;
        color: #c5cad3;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
    }
    /* Padding lives on the BASE rule, not just on the OP/T1 washes below, because
       .tier-grid derives its column COUNT from container width via auto-fill.
       Padding only some blocks made those 12px narrower, which flipped them to
       one column fewer at ~15% of desktop widths (e.g. 974-983px: 11 cols vs 12)
       and 1fr then spread the freed space, rendering OP/T1 icons ~7% larger than
       every other tier.  On mobile, where the grid is locked to 6 fixed columns,
       the same 12px made them consistently SMALLER instead.  Every block must
       reserve the same width; only the background may differ. */
    .tier-block {
        margin-bottom: 22px;
        position: relative;
        border-radius: 12px;
        padding: 2px 6px 8px;
    }
    .tier-block.hidden { display: none; }
    /* Tier name on its own line above the grid (replaces the old left-side
       full-height ornament bar).  A hairline rule tinted with the tier's
       colour trails the heading, visually anchoring the grid to the pill. */
    .tier-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 16px 0 10px;
        padding-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid color-mix(in oklab, var(--tier-color, #555) 30%, transparent);
    }
    /* OP block: faint radial wash behind the grid to elevate the apex tier
       without resorting to a full coloured backdrop.  Same trick on T1 with
       warmer hue and lower alpha. */
    .tier-block[data-tier="OP"] {
        background:
            radial-gradient(ellipse 70% 60% at 50% 60%,
                rgba(216,184,255,0.045) 0%, transparent 75%);
    }
    .tier-block[data-tier="T1"] {
        background:
            radial-gradient(ellipse 70% 60% at 50% 60%,
                rgba(255,120,80,0.028) 0%, transparent 75%);
    }
    .tier-pill {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 16px;
        border-radius: 6px;
        color: #0e1116;
        background: var(--tier-bg);
        font-size: 16px;
        font-weight: 700;
        text-shadow: 0 1px 0 rgba(255,255,255,0.25);
        letter-spacing: 0.3px;
    }
    .tier-pill > span { position: relative; z-index: 2; }
    .tier-count { color: #9aa0a6; font-size: 12px; font-weight: 400; }
    /* Prismatic / pearl shine for the OP tier — animated highlight sweep +
       outer halo glow, matching the iridescent augment-card look. */
    .tier-block[data-tier="OP"] .tier-pill {
        background-size: 200% 200%;
        animation: prismShift 6s ease-in-out infinite;
        box-shadow:
            0 0 12px rgba(220,180,255,0.55),
            0 0 28px rgba(170,210,255,0.30),
            inset 0 0 0 1px rgba(255,255,255,0.55);
        color: #2a1a4a;
        text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    }
    .tier-block[data-tier="OP"] .tier-pill::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg,
            transparent 35%,
            rgba(255,255,255,0.75) 50%,
            transparent 65%);
        background-size: 220% 100%;
        animation: shineSweep 3.2s linear infinite;
        z-index: 1;
        pointer-events: none;
    }
    @keyframes prismShift {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    @keyframes shineSweep {
        from { background-position: 220% 0; }
        to   { background-position: -120% 0; }
    }
    .tier-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 10px;
    }
    /* ===== 增幅榜 (augment tier) — reuses .tier-block / .tier-pill / .aug card,
       with a wider grid (aug cards carry more text than champ thumbnails) and a
       rarity-filter chip row above the category chips. ===== */
    .aug-tier-filters { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 20px; }
    /* Compact board: tighter card gap + shorter icon→name plinth so the grid
       doesn't read as loose empty chrome.  Floor ~86px so phones / narrow
       tablets already fit 4 before the mobile fixed-col override kicks in. */
    .aug-tier-grid {
        grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
        gap: 5px;
    }
    /* content-visibility for the 增幅榜 board only (hundreds of .aug cards): skip
       offscreen ones until scrolled near.  Scoped to the board grid so the detail
       panel's horizontal-scroll .aug lists are untouched. */
    .aug-tier-grid .aug {
        content-visibility: auto;
        contain-intrinsic-size: auto 148px;
        border-radius: 8px;
        /* Grid items default min-width:auto (= min-content).  Long zh names or
           light-theme disc icons can inflate min-content and overflow the track
           so the row effectively shows ~3 fat cards.  Zero the floor. */
        min-width: 0;
        max-width: 100%;
    }
    .aug-tier-grid .aug img,
    .aug-tier-grid .aug .aicon-ph {
        height: 52px;
        padding: 5px 0 1px;
    }
    .aug-tier-grid .aug .aname {
        min-height: 26px;
        padding: 1px 4px 3px;
        font-size: 10.5px;
        line-height: 1.2;
    }
    .aug-tier-grid .aug .awr {
        font-size: 12px;
    }
    .aug-tier-grid .aug .alift {
        font-size: 10.5px;
    }
    /* Narrow / tablet portrait: guarantee ≥4 cols even if auto-fill floor
       undershoots (padding + scrollbar can leave only 3×108px tracks). */
    @media (max-width: 900px) {
        .tier-grid.aug-tier-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 4px !important;
        }
        .tier-grid.aug-tier-grid > .aug {
            min-width: 0 !important;
        }
    }
    .aug.hidden { display: none; }
    .aug-rarity-chip.rarity-kPrismatic.is-active { border-color: #d36bff; color: #efd6ff; background: color-mix(in srgb, #d36bff 18%, transparent); }
    .aug-rarity-chip.rarity-kGold.is-active { border-color: #f5c518; color: #ffe9a3; background: color-mix(in srgb, #f5c518 18%, transparent); }
    .aug-rarity-chip.rarity-kSilver.is-active { border-color: #c0c5cc; color: #eef1f5; background: color-mix(in srgb, #c0c5cc 22%, transparent); }
    .champ {
        position: relative;
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        overflow: visible;
        /* content-visibility: skip layout/paint for the ~170 offscreen champion
           thumbnails until they scroll near the viewport, cutting the work every
           filter / language / theme invalidation triggers.  contain-intrinsic-size
           reserves each card's real footprint (grid cell is a ~72-110px square,
           aspect-ratio 1/1) so the scrollbar + tier layout stay stable while cards
           are still virtualized.  Note: .champ.hidden (display:none) filtering is
           unaffected -- display:none removes the box entirely, ahead of this. */
        content-visibility: auto;
        contain-intrinsic-size: auto 96px;
        background: var(--chip-bg);
        /* Champion thumbnail wears its tier's colour as a 2px frame.
           Non-OP tiers use a solid border; OP gets a prismatic gradient
           via the .tier-block[data-tier="OP"] .champ rule below. */
        border: 2px solid var(--tier-color, #555);
        cursor: pointer;
        display: block;
        color: inherit;
        text-decoration: none;
        transition: transform .08s, box-shadow .08s, filter .08s;
    }
    @media (hover: hover) {
        .champ:hover {
            transform: translateY(-3px) scale(1.015);
            border-color: color-mix(in srgb, var(--accent) 55%, var(--tier-color, #555));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                        0 8px 24px -8px rgba(245, 197, 24, 0.35);
            z-index: 1;
        }
    }
    .champ.pick-selected {
        box-shadow:
            inset 0 0 0 2px rgba(245,215,128,0.95),
            0 0 0 1px rgba(245,215,128,0.35),
            0 6px 16px rgba(0,0,0,0.38);
    }
    .champ.pick-selected::before {
        content: attr(data-pick-rank);
        position: absolute;
        top: 4px;
        left: 4px;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        background: #f5d780;
        color: #231802;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        z-index: 4;
        box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    }
    /* OP-tier champions get the "棱彩飾框" — Prismatic decorative frame —
       so they're as visually distinct from T1 as Prismatic augments are
       from Gold ones.  Double-background trick: inner dark colour clips to
       padding-box, iridescent gradient renders on border-box, the transparent
       2px border lets the gradient show.  prismShift animates the hue. */
    .tier-block[data-tier="OP"] .champ {
        border-color: transparent;
        background:
            linear-gradient(#1f2530, #1f2530) padding-box,
            var(--tier-op-frame) border-box;
        background-size: auto, 220% 220%;
        animation: prismShift 6s ease-in-out infinite;
        box-shadow: 0 0 8px rgba(220,180,255,0.45);
    }
    /* T1 = "premium red" — solid red would just look like a flat tier band,
       so promote it with a hot-coal gradient (orange-red → deep crimson →
       warm highlight), a slow shimmer (slower than OP so the hierarchy is
       legible), and a subtle red halo.  Reads as "valuable but not OP". */
    .tier-block[data-tier="T1"] .champ {
        border-color: transparent;
        background:
            linear-gradient(#1f2530, #1f2530) padding-box,
            linear-gradient(135deg,
                #ffb380 0%,   /* hot orange highlight */
                #ff5a3c 32%,  /* main red-orange */
                #c8262c 62%,  /* deep crimson */
                #ff8050 100%  /* warm trailing highlight */
            ) border-box;
        background-size: auto, 220% 220%;
        animation: prismShift 9s ease-in-out infinite;
        box-shadow: 0 0 6px rgba(255,90,60,0.42);
    }
    /* Classic's independent renderer still emits an unwrapped image. */
    .champ > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 6px;
    }
    /* Clip only the portrait so role tooltips and the tier frame remain visible.
       DDragon squares include a dark rim; the approved 114% crop removes it. */
    .champ-portrait {
        position: absolute;
        inset: 0;
        display: block;
        overflow: hidden;
        border-radius: 6px;
    }
    .champ .champ-portrait img,
    .draft-champ .champ-portrait img,
    .champ-hero-avatar img {
        width: 114%;
        height: 114%;
        max-width: none;
        margin: -7%;
        object-fit: cover;
        display: block;
        border-radius: 0;
    }
    .alt-role-badge {
        --badge-color: #f5d780;
        position: absolute;
        top: 4px;
        right: 4px;
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid var(--badge-color);
        background: rgba(9, 14, 22, 0.9);
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.18),
            0 2px 8px rgba(0,0,0,0.34);
        opacity: 0;
        transform: translateY(-1px) scale(0.96);
        transition: opacity 0.12s ease-out, transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out;
        pointer-events: auto;
        z-index: 4;
        cursor: help;
    }
    .alt-role-badge svg {
        width: 10px;
        height: 10px;
        display: block;
        color: var(--badge-color);
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22));
    }
    .alt-role-badge[data-alt-role="Assassin"] { --badge-color: #D94A5F; }
    .alt-role-badge[data-alt-role="Fighter"] { --badge-color: #D9822B; }
    .alt-role-badge[data-alt-role="Mage"] { --badge-color: #9B7CF6; }
    .alt-role-badge[data-alt-role="Marksman"] { --badge-color: #4FB06D; }
    .alt-role-badge[data-alt-role="Support"] { --badge-color: #D96BAA; }
    .alt-role-badge[data-alt-role="Tank"] { --badge-color: #5B8DEF; }
    .champ.secondary-role-match .alt-role-badge {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .champ.secondary-role-match:hover .alt-role-badge,
    .champ.secondary-role-match:focus-visible .alt-role-badge {
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.18),
            0 0 10px color-mix(in srgb, var(--badge-color) 28%, transparent),
            0 2px 8px rgba(0,0,0,0.34);
    }
    .alt-role-tooltip {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: max-content;
        max-width: min(260px, calc(100vw - 28px));
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.08);
        background: #0b0e13;
        box-shadow: 0 6px 18px rgba(0,0,0,0.55);
        color: #c5cad3;
        font-size: 11px;
        line-height: 1.35;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateY(2px);
        transition: opacity 0.12s ease-out, transform 0.12s ease-out;
        z-index: 56;
    }
    .alt-role-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 10px;
        border: 6px solid transparent;
        border-top-color: #0b0e13;
    }
    .alt-role-badge.tip-right .alt-role-tooltip {
        left: 0;
        right: auto;
    }
    .alt-role-badge.tip-right .alt-role-tooltip::after {
        left: 10px;
        right: auto;
    }
    .alt-role-badge.tip-below .alt-role-tooltip {
        top: calc(100% + 8px);
        bottom: auto;
    }
    .alt-role-badge.tip-below .alt-role-tooltip::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: #0b0e13;
    }
    .champ.secondary-role-match:hover .alt-role-tooltip,
    .champ.secondary-role-match:focus-visible .alt-role-tooltip,
    .alt-role-badge:hover .alt-role-tooltip {
        opacity: 1;
        transform: translateY(0);
    }
    .alt-role-tooltip-style {
        color: #e6e8eb;
        font-weight: 600;
    }
    .alt-role-tooltip-pick {
        color: #9aa0a6;
        font-variant-numeric: tabular-nums;
    }
    .alt-role-tooltip-lift {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .alt-role-tooltip-lift.is-good { color: #6bd16b; }
    .alt-role-tooltip-lift.is-bad { color: #ff8a8a; }
    .alt-role-tooltip-lift.is-even { color: #d7dde7; }
    .champ.hidden { display: none; }
    .champ .wr {
        position: absolute;
        left: 2px;
        bottom: 2px;
        font-size: 10px;
        font-weight: 700;
        font-variant-numeric: tabular-nums lining-nums;
        padding: 1px 4px;
        border-radius: 6px;
        color: #e6e8eb;
        background: rgba(14,17,22,0.9);
    }
    .champ .name {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        padding: 2px 4px;
        font-size: 10px;
        text-align: center;
        background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
        color: #e6e8eb;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s;
    }
    .champ:hover .name { opacity: 1; }
    /* Visually hidden but kept in the DOM as text — so browser Find on Page
       (Ctrl+F / Cmd+F) can still match English aliases like "Aatrox" while
       only the localized zh-TW name is visually drawn. */
    .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;
    }
    .champion-list-intro { margin: 0 0 20px; }
    .champion-list-intro h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
    .champion-list-intro p { margin: 0; font-size: 13px; color: var(--text-muted); }
    .champion-list-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 6px; }
    .champion-list-heading h1 { margin: 0; }
    .champion-layout-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; }
    .champion-layout-toggle[hidden] { display: none; }
    .champion-layout-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; }
    .champion-layout-toggle button:hover { color: var(--text); background: var(--surface-2); }
    .champion-layout-toggle button[aria-pressed="true"] { background: var(--surface-2); color: var(--accent); }
    .champion-layout-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .view-home[data-view="champions"][data-champion-layout="table"] .tier-block,
    .view-home[data-view="champions"][data-champion-layout="table"] .cutoffs { display: none; }
    .champion-table-wrap { overflow-x: auto; margin-top: 20px; }
    .champion-table-wrap[hidden] { display: none; }
    .champion-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
    .champion-table th,
    .champion-table td { padding: 12px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: right; }
    .champion-table thead th { padding: 0; font-weight: 500; color: var(--text-muted); border-bottom-color: var(--border-strong); }
    .champion-table thead button { display: block; width: 100%; min-height: 44px; padding: 12px 18px; background: none; border: 0; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
    .champion-table thead [aria-sort] { color: var(--text); }
    .champion-table thead button:hover { color: var(--accent-soft); }
    .champion-table th:first-child,
    .champion-table th:nth-child(n+5),
    .champion-table td:nth-child(n+5) { text-align: left; }
    .champion-table-heading { display: block; padding: 12px 18px; }
    .champion-table-icons { display: flex; align-items: center; gap: 8px; }
    .champion-table-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-muted); cursor: pointer; }
    .champion-table-icon img { width: 32px; height: 32px; object-fit: contain; border-radius: 3px; }
    .champion-table-augment { border-radius: 50%; }
    .champion-table-icon:hover { border-color: var(--border-strong); background: var(--surface-2); }
    .champion-table-item,
    .champion-table-item:hover { padding: 4px; border: 0; background: transparent; }
    .champion-table th:first-child { width: 20%; }
    .champion-table tbody th { font-weight: 600; }
    .champion-table tbody tr:hover > * { background: var(--surface-2); }
    .champion-table td { color: var(--text-muted); }
    .champion-table .champion-table-wr { color: var(--text); font-weight: 600; }
    .champion-table-link { display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--text); text-decoration: none; }
    .champion-table-link:hover { color: var(--accent-soft); }
    .champion-table-avatar { display: block; width: 36px; height: 36px; border: 2px solid var(--tier-color); border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
    .champion-table [data-tier="OP"] .champion-table-avatar {
        border-color: transparent;
        background: linear-gradient(var(--surface), var(--surface)) padding-box,
            var(--tier-op-frame) border-box;
    }
    .champion-table-avatar img { width: 125%; height: 125%; margin: -12.5%; max-width: none; object-fit: cover; }
    .champion-table :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
    @media (max-width: 700px) {
        .champion-table th,
        .champion-table td { padding: 10px 12px; }
        .champion-table thead th { padding: 0; }
        .champion-table thead button { padding: 12px; }
        .champion-table-heading { padding: 12px; }
        .champion-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
        .champion-table-link { gap: 9px; min-width: 130px; }
    }
    .detail-host { grid-column: 1 / -1; min-width: 0; }
    .tier-block .champ.detail-selected {
        border-color: var(--accent);
        background: var(--surface);
        outline: 2px solid var(--accent);
        outline-offset: -2px;
        box-shadow: none;
        animation: none;
    }
    .detail.detail-inline { background: var(--surface-raised); border: 1px solid var(--border-strong); }
    /* Inline head = one row: identity left, quiet actions right.  The link is
       secondary navigation and the close is a compact chevron, so neither
       competes with the champion name. */
    .inline-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-left: auto; flex: 0 0 auto; }
    .detail-inline > .inline-detail-actions { margin-bottom: 10px; }
    .inline-detail-actions a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 8px; border-radius: 6px; color: var(--accent-soft); font-size: 13px; text-decoration: none; white-space: nowrap; }
    .inline-detail-actions a:hover { background: var(--surface-2); }
    /* Close is a circled-X badge straddling the card's top-right corner, so the
       full-analysis link can take the real top-right of the header row. */
    .inline-detail-close { position: absolute; top: -12px; right: -12px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text-muted); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
    .inline-detail-close::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
    .inline-detail-close:hover { background: var(--surface-2); color: var(--text); }
    .inline-detail-actions :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    @media (pointer: coarse) { .inline-detail-actions a { min-height: 40px; } }
    @media (pointer: coarse) and (max-width: 600px) { .inline-detail-actions a { width: 40px; } }
    .detail-inline .detail-head { flex-wrap: wrap; row-gap: 4px; margin-bottom: 4px; }
    .detail-inline .detail-head .inline-detail-actions { align-self: flex-start; margin-top: -6px; }
    /* Two rows: name + role, then win rate + sample size. */
    .inline-champ-id { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
    .inline-champ-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
    .detail-inline .cname { margin: 0; font-size: 18px; line-height: 1.25; }
    .inline-champ-stats { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
    .inline-champ-stats b { font-weight: 600; color: var(--text); }
    /* Phone: both actions collapse to icons on the identity row. */
    @media (max-width: 600px) {
        .detail-inline .detail-head { flex-wrap: nowrap; align-items: center; }
        .detail-inline .detail-head .inline-champ-id { flex: 1 1 auto; }
        .inline-detail-link-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        /* Pin to the top-right corner (name row), not the vertical middle;
           the negative margins cancel the hit-area padding so glyphs sit on the card edge. */
        .detail-inline .detail-head .inline-detail-actions { gap: 0; align-self: flex-start; margin: -6px -4px 0 auto; }
        .inline-detail-actions a { justify-content: center; width: 32px; padding: 0; }
    }
    .detail-inline .detail-main-tabs > .detail-tab-rail { position: static; }
    .detail {
        margin: 6px 0 4px;
        background: #1b2030;
        border-radius: 10px;
        padding: 16px 18px 18px;
        position: relative;
        animation: slideDown .18s ease-out;
    }
    /* Two-phase open (INP): a skeleton is painted synchronously on click, then
       replaced with the real content after a yield.  Reserve a plausible panel
       height so swapping in the full detail does not shove the grid (no CLS). */
    .detail-loading { min-height: 320px; }
    .detail-skeleton {
        height: 260px;
        border-radius: 8px;
        background: linear-gradient(100deg,
            rgba(255,255,255,0.04) 30%,
            rgba(255,255,255,0.09) 50%,
            rgba(255,255,255,0.04) 70%);
        background-size: 220% 100%;
        animation: detailSkeletonSweep 1.1s ease-in-out infinite;
    }
    @keyframes detailSkeletonSweep {
        from { background-position: 180% 0; }
        to   { background-position: -80% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .detail-skeleton { animation: none; }
    }
    .detail-load-error {
        min-height: 160px;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 12px;
        text-align: center;
    }
    .detail-retry {
        min-height: 34px;
        padding: 7px 14px;
        border-radius: 8px;
        border: 1px solid rgba(106, 166, 255, 0.42);
        background: rgba(72, 132, 220, 0.16);
        color: #c7ddff;
        font: inherit;
        font-weight: 650;
        cursor: pointer;
    }
    .detail-retry:hover { background: rgba(72, 132, 220, 0.24); }
    .detail-retry:focus-visible {
        outline: 2px solid #8bbcff;
        outline-offset: 2px;
    }
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .detail-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        min-width: 0;
    }
    /* ddragon squares bake in a dark ~4% vignette edge; a 125% crop inside
       an overflow-clipped frame drops it and centres the face.  Frame is a
       neutral hairline (no gold: DESIGN.md reserves gold for focus) drawn as
       an inset shadow on ::after so it paints OVER the clipped image edge;
       an outer ring leaves the anti-aliased image corner showing through as
       a ragged seam.  Background = ring colour for the same reason.  Crop via
       oversize+negative margin, not transform, so the rounded clip stays
       crisp. */
    .detail-avatar {
        --avatar-ring: var(--border-strong);
        position: relative;
        display: block;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        overflow: hidden;
        isolation: isolate;
        background: var(--avatar-ring);
        box-shadow: 0 0 12px rgba(200, 210, 230, 0.08);
        flex: 0 0 auto;
    }
    .detail-avatar img {
        display: block;
        width: 125%;
        height: 125%;
        max-width: none;
        margin: -12.5%;
        object-fit: cover;
    }
    .detail-avatar::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px var(--avatar-ring);
    }
    .detail-head .cname { font-size: 16px; font-weight: 600; }
    .detail-roles {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    /* Roles are metadata: neutral text, without decorative colour or corners. */
    .detail-role-tag {
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        color: var(--text-muted);
        background: none;
        white-space: nowrap;
    }
    .detail-role-tag::before,
    .detail-role-tag::after {
        content: none;
    }
    .detail-tab-input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
    /* Sticky chrome for main detail: champ icon/name + 概覽/出裝/… tabs.
       Same pin line as search (header-h only). Search overlays the right;
       do NOT add --search-rail-h — that shoved the whole panel down. */
    .detail-main-tabs > .detail-tab-rail {
        position: sticky;
        top: var(--header-h, 56px);
        z-index: 25;
        background: color-mix(in srgb, #1b2030 94%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        margin: 0 -6px;
        padding: 10px 6px 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .detail-tab-list {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow-x: auto;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        scrollbar-width: none;
    }
    .detail-main-tabs > .detail-tab-rail .detail-tab-list {
        border-bottom: 0;
    }
    .detail-tab-list::-webkit-scrollbar {
        display: none;
    }
    .detail-tab-label {
        flex: 0 0 auto;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border-bottom: 2px solid transparent;
        color: #9aa0a6;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }
    .detail-tab-label:hover {
        color: #dce4ef;
        background: rgba(255,255,255,0.03);
    }
    .detail-tab-label:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
        outline-offset: -2px;
    }
    /* Divider before a tab that opens a new group (增幅裝置 | 增幅池). */
    .detail-tab-label.is-group-start {
        position: relative;
    }
    /* Centered in the list gap; bottom offset spans the 2px underline so it matches the active box. */
    .detail-tab-label.is-group-start::before {
        content: "";
        position: absolute;
        left: -3.5px;
        top: 0;
        bottom: -2px;
        width: 1px;
        background: rgba(255,255,255,0.16);
        pointer-events: none;
    }
    .detail-tabset > .detail-tab-input:nth-of-type(1):focus-visible ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(1),
    .detail-tabset > .detail-tab-input:nth-of-type(2):focus-visible ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(2),
    .detail-tabset > .detail-tab-input:nth-of-type(3):focus-visible ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(3),
    .detail-tabset > .detail-tab-input:nth-of-type(4):focus-visible ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(4),
    .detail-tabset > .detail-tab-input:nth-of-type(5):focus-visible ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(5),
    .detail-tabset > .detail-tab-input:nth-of-type(6):focus-visible ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(6) {
        outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
        outline-offset: -2px;
    }
    .detail-tab-panels {
        min-width: 0;
    }
    .detail-tab-panel {
        display: none;
        padding-top: 16px;
    }
    .detail-sub-tabs {
        margin-top: 0;
    }
    .detail-sub-tabs .detail-tab-list {
        border-bottom-color: rgba(255,255,255,0.055);
    }
    .detail-sub-tabs .detail-tab-label {
        min-height: 34px;
        padding: 0 11px;
        font-size: 11px;
        font-weight: 700;
    }
    .detail-tabset > .detail-tab-input:nth-of-type(1):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(1),
    .detail-tabset > .detail-tab-input:nth-of-type(2):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(2),
    .detail-tabset > .detail-tab-input:nth-of-type(3):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(3),
    .detail-tabset > .detail-tab-input:nth-of-type(4):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(4),
    .detail-tabset > .detail-tab-input:nth-of-type(5):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(5),
    .detail-tabset > .detail-tab-input:nth-of-type(6):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(6) {
        color: var(--text);
        border-bottom-color: var(--accent);
        background: transparent;
    }
    .detail-tabset > .detail-tab-input:nth-of-type(1):checked ~ .detail-tab-panels > .detail-tab-panel:nth-child(1),
    .detail-tabset > .detail-tab-input:nth-of-type(2):checked ~ .detail-tab-panels > .detail-tab-panel:nth-child(2),
    .detail-tabset > .detail-tab-input:nth-of-type(3):checked ~ .detail-tab-panels > .detail-tab-panel:nth-child(3),
    .detail-tabset > .detail-tab-input:nth-of-type(4):checked ~ .detail-tab-panels > .detail-tab-panel:nth-child(4),
    .detail-tabset > .detail-tab-input:nth-of-type(5):checked ~ .detail-tab-panels > .detail-tab-panel:nth-child(5),
    .detail-tabset > .detail-tab-input:nth-of-type(6):checked ~ .detail-tab-panels > .detail-tab-panel:nth-child(6) {
        display: block;
    }
    .detail-tab-panel > .detail-section:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
    .detail-section + .detail-section {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .detail-section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }
    .detail-section-head h3 {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }
    .section-meta {
        color: #9aa0a6;
        font-size: 11px;
        font-family: var(--font-caption);
    }
    .cf-skill {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        padding: 2px 9px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.04);
        color: #c2c7ce;
        white-space: nowrap;
    }
    .cf-skill b { font-weight: 600; }
    .detail-overview-head {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(132px, 0.8fr);
        border-bottom: 1px solid var(--border);
    }
    .ovr-stat {
        min-width: 0;
        padding: 14px 18px;
    }
    .ovr-stat + .ovr-stat {
        border-left: 1px solid var(--border);
    }
    .ovr-stat:first-child { padding-left: 0; }
    .ovr-stat:last-child { padding-right: 0; }
    .ovr-stat-line {
        display: flex;
        align-items: baseline;
        gap: 9px;
        min-width: 0;
    }
    .ovr-value {
        color: var(--text);
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .ovr-stat-primary .ovr-value {
        font-size: 30px;
        font-weight: 800;
    }
    .ovr-rank {
        color: var(--accent-soft);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.01em;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .ovr-label {
        display: block;
        margin-top: 7px;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0.04em;
    }
    @media (max-width: 560px) {
        .detail-overview-head {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .ovr-stat { padding: 13px 12px; }
        .ovr-stat:first-child { padding-left: 0; }
        .ovr-stat:nth-child(2) { padding-right: 0; }
        .ovr-stat-primary .ovr-value { font-size: 26px; }
        .ovr-value { font-size: 22px; }
        .ovr-stat-games {
            grid-column: 1 / -1;
            padding: 12px 0 13px;
            border-top: 1px solid var(--border);
            border-left: 0 !important;
        }
    }
    .comp-fit-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 24px;
    }
    .comp-fit-radar {
        flex: 1 1 250px;
        min-width: 220px;
    }
    .comp-fit-radar .comp-radar {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    .comp-fit-side {
        flex: 1 1 200px;
        min-width: 190px;
        max-width: 280px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: visible;
    }
    .cf-side-card {
        padding: 12px 14px;
        border-radius: 10px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
    }
    .cf-side-card.cf-side-muted {
        opacity: 0.72;
    }
    .cf-side-kicker {
        font-size: 11px;
        color: #6b7280;
        letter-spacing: 0.02em;
        margin-bottom: 4px;
    }
    .cf-side-value {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.15;
        font-variant-numeric: tabular-nums;
        color: #e8eaed;
    }
    .cf-side-label {
        font-size: 13px;
        font-weight: 600;
        margin-top: 2px;
    }
    .cf-side-sub {
        font-size: 11px;
        color: #8b919a;
        margin-top: 4px;
        line-height: 1.4;
    }
    .cf-side-empty {
        font-size: 13px;
        color: #6b7280;
        padding: 4px 0 2px;
    }
    .cf-stage-early { color: #f0a060; }
    .cf-stage-late { color: #7fc8ff; }
    .cf-stage-balanced { color: #c2c7ce; }
    .cf-stage-rank {
        margin-left: 0.35em;
        font-size: 0.78em;
        font-weight: 700;
        opacity: 0.88;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em;
    }
    .cf-stage-bars {
        display: flex;
        flex-direction: column;
        gap: 7px;
        margin-top: 10px;
    }

    /* Game-tempo card hover panel (early type is the visual reference). */
    .cf-side-card.cf-stage-host {
        position: relative;
        cursor: help;
        outline: none;
        transition: border-color 0.14s ease-out, background 0.14s ease-out;
    }
    .cf-side-card.cf-stage-host-early:hover,
    .cf-side-card.cf-stage-host-early:focus-visible {
        border-color: rgba(240, 160, 96, 0.42);
        background: rgba(240, 160, 96, 0.06);
    }
    .cf-side-card.cf-stage-host-late:hover,
    .cf-side-card.cf-stage-host-late:focus-visible {
        border-color: rgba(127, 200, 255, 0.38);
        background: rgba(127, 200, 255, 0.05);
    }
    .cf-side-card.cf-stage-host-balanced:hover,
    .cf-side-card.cf-stage-host-balanced:focus-visible {
        border-color: rgba(194, 199, 206, 0.28);
        background: rgba(255, 255, 255, 0.04);
    }
    .cf-stage-tip {
        /* Drop below the card so side-panel overflow does not clip a left flyout. */
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        width: auto;
        padding: 11px 12px 10px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: #101114;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(0, 0, 0, 0.4);
        color: #c2c7ce;
        font-size: 11px;
        line-height: 1.4;
        text-align: left;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-3px);
        transition: opacity 0.14s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 60;
    }
    .cf-stage-tip::before {
        content: "";
        position: absolute;
        left: 22px;
        bottom: 100%;
        border: 6px solid transparent;
        border-bottom-color: #101114;
    }
    .cf-stage-host:hover .cf-stage-tip,
    .cf-stage-host:focus-visible .cf-stage-tip,
    .cf-stage-host:focus-within .cf-stage-tip {
        opacity: 1;
        transform: translateY(0);
    }
    .cf-stage-tip-gap {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 0 1px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        margin-bottom: 10px;
        color: #7a808a;
        font-size: 11px;
    }
    .cf-stage-tip-gap b {
        font-size: 13px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: #e8eaed;
    }
    .cf-stage-tip-gap.is-early b { color: #e2a36e; }
    .cf-stage-tip-gap.is-late b { color: #8ec4e8; }
    .cf-stage-tip-rail {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    .cf-stage-tip-rail-end {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: #6b7280;
    }
    .cf-stage-tip-rail-track {
        position: relative;
        height: 4px;
        border-radius: 99px;
        /* Neutral slate track — accent only on the marker. */
        background: #1c1f24;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    .cf-stage-tip-rail-band {
        position: absolute;
        left: 40%;
        width: 20%;
        top: 0;
        bottom: 0;
        border-radius: 99px;
        /* Balanced band: soft fill, no dashed outline. */
        background: rgba(255, 255, 255, 0.12);
    }
    .cf-stage-tip-rail-dot {
        position: absolute;
        top: 50%;
        width: 9px;
        height: 9px;
        margin-left: -4.5px;
        margin-top: -4.5px;
        border-radius: 50%;
        background: #c2c7ce;
        border: 2px solid #101114;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
    }
    .cf-stage-host-early .cf-stage-tip-rail-dot {
        background: #e2a36e;
        box-shadow: 0 0 0 1px rgba(226, 163, 110, 0.35);
    }
    .cf-stage-host-late .cf-stage-tip-rail-dot {
        background: #8ec4e8;
        box-shadow: 0 0 0 1px rgba(142, 196, 232, 0.32);
    }
    .cf-stage-tip-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        font-variant-numeric: tabular-nums;
        margin-bottom: 8px;
    }
    .cf-stage-tip-pr {
        color: #8b919a;
        font-size: 11px;
    }
    .cf-stage-tip-rank {
        color: #e8eaed;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.01em;
    }
    .cf-stage-tip-foot {
        color: #6b7280;
        font-size: 10px;
        line-height: 1.5;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 7px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .cf-stage-tip-foot-line {
        display: block;
        white-space: normal;
    }

    [data-theme="light"] .cf-stage-tip {
        background: #f4f6f9;
        border-color: rgba(15, 20, 28, 0.1);
        color: #3a4250;
        box-shadow: 0 10px 24px rgba(15, 20, 28, 0.12);
    }
    [data-theme="light"] .cf-stage-tip::before {
        border-bottom-color: #f4f6f9;
    }
    [data-theme="light"] .cf-stage-tip-foot { color: #6b7280; }
    [data-theme="light"] .cf-stage-tip-rail-track {
        background: #e4e7ec;
        box-shadow: inset 0 0 0 1px rgba(15, 20, 28, 0.06);
    }
    [data-theme="light"] .cf-stage-tip-rail-band {
        background: rgba(15, 20, 28, 0.08);
    }
    [data-theme="light"] .cf-stage-tip-rail-dot { border-color: #f4f6f9; }
    [data-theme="light"] .cf-stage-tip-pr { color: #6b7280; }
    [data-theme="light"] .cf-stage-tip-rank { color: #1a1d21; }
    .cf-cap {
        font-size: 11px;
        color: #6b7280;
        margin-bottom: 2px;
    }
    .ab-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .ab-label {
        flex: 0 0 38px;
        font-size: 12px;
        color: #c2c7ce;
    }
    .ab-bar {
        flex: 1;
        height: 8px;
        background: rgba(255,255,255,0.06);
        border-radius: 999px;
        overflow: hidden;
    }
    .ab-bar > span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #3aa0ff, #7fc8ff);
        border-radius: 999px;
    }
    .ab-bar-early > span {
        background: linear-gradient(90deg, #c47a3a, #f0a060);
    }
    .ab-bar-late > span {
        background: linear-gradient(90deg, #3aa0ff, #7fc8ff);
    }
    .ab-val {
        flex: 0 0 24px;
        text-align: right;
        font-size: 11px;
        color: #9aa0a6;
        font-variant-numeric: tabular-nums;
    }
    .comp-advice {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .comp-advice-item {
        font-size: 12px;
        line-height: 1.5;
    }
    .comp-advice-item .ca-tag {
        color: #cfe4ff;
        font-weight: 600;
        margin-right: 6px;
    }
    .comp-advice-item .ca-tag-avoid {
        color: #f0998a;
    }
    .comp-advice-item .ca-desc {
        color: #9aa0a6;
        font-family: var(--font-caption);
    }
    .comp-fit-empty {
        color: #6b7280;
        font-size: 12px;
        padding: 6px 0 0;
    }
    .detail-col .augment-rank-title {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.4px;
    }
    .meta-help-tip.meta-help-tip-short {
        width: max-content;
        white-space: nowrap;
    }
    .meta-help-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
    }
    .meta-help {
        width: 15px;
        height: 15px;
        border-radius: 999px;
        border: 1px solid rgba(154,160,166,0.58);
        background: #1b2030;
        color: #c5cad3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font: inherit;
        font-size: 10px;
        line-height: 1;
        cursor: help;
    }
    .meta-help:hover,
    .meta-help:focus-visible {
        border-color: rgba(245,215,128,0.72);
        color: #f5d780;
    }
    .meta-help-tip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 7px);
        transform: translateX(-50%);
        width: min(260px, calc(100vw - 32px));
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.08);
        background: #0b0e13;
        color: #d4dae4;
        box-shadow: 0 6px 18px rgba(0,0,0,0.55);
        font-family: var(--font-ui);
        font-size: 11px;
        line-height: 1.5;
        text-align: left;
        pointer-events: none;
        opacity: 0;
        z-index: 52;
        transition: opacity 0.12s ease-out;
    }
    .meta-help-tip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #0b0e13;
    }
    .meta-help-wrap:hover .meta-help-tip,
    .meta-help:focus-visible + .meta-help-tip {
        opacity: 1;
    }
    .aug-set-summary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(143, 216, 244, 0.10);
        border: 1px solid rgba(143, 216, 244, 0.24);
        color: #c9eefa;
        font-size: 10px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: help;
    }
    .aug-set-summary.bad {
        background: rgba(255, 125, 125, 0.09);
        border-color: rgba(255, 125, 125, 0.24);
        color: #ffd1d1;
    }
    .aug-set-summary .sum-item {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fit-chip-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        min-height: 24px;
    }
    .item-build-carousel {
        display: flex;
        gap: 8px;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
        padding: 0 4px 8px 0;
        -webkit-overflow-scrolling: touch;
    }
    .item-build-carousel::-webkit-scrollbar { height: 7px; }
    .item-build-carousel::-webkit-scrollbar-track { background: transparent; }
    .item-build-carousel::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.35);
        border-radius: 999px;
    }
    .item-build-carousel.item-build-grid {
        display: grid;
        align-items: stretch;
        overflow-x: visible;
        scroll-snap-type: none;
        padding: 0;
    }
    .item-build-carousel.single-item-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }
    .item-build-carousel.item-pair-grid {
        grid-template-columns: repeat(auto-fill, minmax(76px, 92px));
        justify-content: start;
    }
    .item-build-carousel.item-cluster-grid {
        grid-template-columns: repeat(auto-fill, minmax(176px, 176px));
        justify-content: start;
    }
    .item-build-card {
        flex: 0 0 76px;
        scroll-snap-align: start;
        display: grid;
        grid-template-rows: auto auto auto 1fr;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid rgba(107, 209, 107, 0.24);
        background: #11151d;
        color: #e6e8eb;
        text-align: center;
        outline: none;
    }
    .item-build-card.search-hit {
        border-color: #f5c518;
        background: #171711;
        box-shadow:
            0 0 0 2px rgba(245, 197, 24, 0.36),
            0 10px 24px rgba(245, 197, 24, 0.16);
        transform: translateY(-2px);
    }
    .item-build-card.search-hit .item-build-icons {
        background: rgba(245, 197, 24, 0.14);
    }
    .item-build-card.search-hit .item-build-name span,
    .item-build-card.search-hit .item-build-wr {
        color: #ffe58a;
    }
    .item-build-card:focus-visible {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.32);
    }
    .item-build-card.single-item-card {
        flex-basis: 68px;
    }
    .item-build-grid .item-build-card {
        flex: initial;
        min-width: 0;
        scroll-snap-align: unset;
    }
    .item-build-card.item-cluster-card {
        flex-basis: 176px;
        text-align: left;
        grid-template-rows: auto auto auto 1fr;
    }
    /* Core-3 build cards: full-colour core row, desaturated flex row, coloured stats. */
    .item-build-icon.is-flex {
        opacity: 0.4;
        filter: grayscale(0.7);
    }
    .item-cluster-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 6px 8px 0;
        min-height: 18px;
    }
    .lane-badge {
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        padding: 3px 7px;
        border-radius: 999px;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    .lane-badge.lane-popular { background: rgba(96, 165, 250, 0.18); color: #8ec3ff; }
    .lane-badge.lane-winrate { background: rgba(107, 209, 107, 0.20); color: #7fe07f; }
    .lane-badge.lane-combined { background: rgba(255, 255, 255, 0.10); color: #c7cede; }
    .cluster-games {
        font-size: 10px;
        color: #8b93a7;
        font-variant-numeric: tabular-nums;
    }
    .item-cluster-stats {
        display: flex;
        align-items: stretch;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .item-cluster-stats .item-build-wr {
        flex: 1;
        border: 0;
        min-height: 26px;
    }
    .item-build-wr.is-good { color: #6bd16b; }
    .item-build-wr.is-bad { color: #ff8a8a; }
    .item-build-wr.is-even { color: #c7cede; }
    .cluster-pick {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 26px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.15;
        font-variant-numeric: tabular-nums;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        color: #94a3b8;
        background: none;
        text-shadow: none;
    }
    /* Pick-rate ("選取率") — 5 solar tiers, colour + weight only (no border).
       青 → 亮黃 → 枯葉黃 → 白 → 灰.  Frequency only; WR keeps green/red.
       Cuts in site.js: ≥50% / 20% / 5% / 1% / <1%. */
    .cluster-pick.pick-1, .cg-option-pick.pick-1, .item-build-pick.pick-1, .boot-rail-pick.pick-1, .cg-core-share.pick-1 { color: #7c8aa1; font-weight: 500; }
    .cluster-pick.pick-2, .cg-option-pick.pick-2, .item-build-pick.pick-2, .boot-rail-pick.pick-2, .cg-core-share.pick-2 { color: #e6e8eb; font-weight: 600; }
    .cluster-pick.pick-3, .cg-option-pick.pick-3, .item-build-pick.pick-3, .boot-rail-pick.pick-3, .cg-core-share.pick-3 { color: #c4a35a; font-weight: 650; }
    .cluster-pick.pick-4, .cg-option-pick.pick-4, .item-build-pick.pick-4, .boot-rail-pick.pick-4, .cg-core-share.pick-4 { color: #fde047; font-weight: 700; }
    .cluster-pick.pick-5, .cg-option-pick.pick-5, .item-build-pick.pick-5, .boot-rail-pick.pick-5, .cg-core-share.pick-5 { color: #67e8f9; font-weight: 700; }
    /* Core build groups: shared rush (core 2) + all qualifying pairing items + finish tail. */
    .core-group-list { display: flex; flex-direction: column; gap: 12px; }
    .core-group {
        border: 1px solid rgba(107, 209, 107, 0.18);
        border-radius: 10px;
        background: #11151d;
        padding: 12px;
    }
    .cg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .cg-core { display: flex; align-items: center; gap: 4px; }
    .cg-core-icon { width: 48px; height: 48px; border-radius: 6px; background: #2a3142; object-fit: contain; }
    .cg-arrow { color: #6b7280; font-size: 13px; }
    .cg-core-meta { display: flex; flex-direction: column; gap: 2px; }
    .cg-core-wr { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
    .cg-core-wr.is-good { color: #6bd16b; }
    .cg-core-wr.is-bad { color: #ff8a8a; }
    .cg-core-wr.is-even { color: #c7cede; }
    .cg-core-share { font-size: 12px; font-weight: 600; line-height: 1.15; color: #94a3b8; font-variant-numeric: tabular-nums; background: none; text-shadow: none; }
    .cg-options-label { margin: 10px 0 6px; font-size: 11px; color: #8b93a7; }
    .cg-options { display: flex; flex-wrap: wrap; gap: 8px; }
    .cg-option {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 6px; border-radius: 8px; min-width: 60px;
        background: #0f131b; border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cg-option:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); outline: none; }
    .cg-option-icon { width: 40px; height: 40px; border-radius: 6px; background: #2a3142; object-fit: contain; }
    .cg-option-wr { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .cg-option-pick { font-size: 10px; line-height: 1.15; font-variant-numeric: tabular-nums; background: none; text-shadow: none; }
    .cg-option-wr.is-good { color: #6bd16b; }
    .cg-option-wr.is-bad { color: #ff8a8a; }
    .cg-option-wr.is-even { color: #c7cede; }
    /* (.cg-option-pick pick-rate colour comes from the shared .pick-* ramp above) */
    .cg-option .lane-badge { font-size: 9px; padding: 1px 5px; }
    .cg-tail { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
    .cg-tail-label { font-size: 10px; color: #6b7280; }
    .cg-tail-icon { width: 28px; height: 28px; border-radius: 5px; background: #2a3142; object-fit: contain; opacity: 0.65; filter: grayscale(0.35); }
    .overview-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(208px, 24%, 284px);
        gap: 18px;
        align-items: start;
        margin-top: 18px;
        padding-top: 0;
        border-top: 0;
    }
    .overview-split > .detail-section,
    .overview-split .overview-split-main > .detail-section {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
    .overview-split-main { min-width: 0; }
    .overview-rail-col { min-width: 0; }
    .boot-rail-section .detail-section-head { flex-wrap: wrap; }
    .boot-rail { display: flex; flex-direction: column; gap: 6px; }
    .boot-rail-row {
        display: flex; align-items: center; gap: 8px;
        padding: 6px 8px; border-radius: 8px;
        background: #0f131b; border: 1px solid rgba(255, 255, 255, 0.06);
        outline: none;
    }
    .boot-rail-row.is-top { border-color: rgba(107, 209, 107, 0.32); background: #11151d; }
    .boot-rail-row:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); }
    .boot-rail-icons { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
    .boot-rail-icon { width: 32px; height: 32px; border-radius: 6px; background: #2a3142; object-fit: contain; flex: 0 0 auto; }
    .boot-rail-name { flex: 1 1 auto; min-width: 0; font-size: 12px; color: #e6e8eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .boot-rail-wr { flex: 0 0 auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .boot-rail-wr.is-good { color: #6bd16b; }
    .boot-rail-wr.is-bad { color: #ff8a8a; }
    .boot-rail-wr.is-even { color: #c7cede; }
    .boot-rail-pick { flex: 0 0 auto; min-width: 36px; text-align: right; font-size: 11px; line-height: 1.15; color: #94a3b8; font-variant-numeric: tabular-nums; background: none; text-shadow: none; }
    @media (max-width: 760px) {
        .overview-split { grid-template-columns: 1fr; gap: 0; }
        .overview-split .overview-split-main > .detail-section { margin-top: 0; }
        .overview-split > .overview-rail-col { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
    }
    .item-build-icons {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 4px;
        min-height: 90px;
        padding: 4px;
        background: #0f131b;
    }
    .single-item-card .item-build-icons {
        grid-template-columns: 1fr;
        min-height: 50px;
    }
    .item-cluster-card .item-build-icons {
        grid-template-columns: repeat(3, 1fr);
        min-height: 112px;
        padding: 8px;
        gap: 6px;
    }
    .item-build-icon {
        display: block;
        width: 40px;
        height: 40px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        background: #2a3142;
    }
    .single-item-card .item-build-icon {
        width: 42px;
        height: 42px;
    }
    .item-cluster-card .item-build-icon {
        width: 44px;
        height: 44px;
    }
    .item-build-wr {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        border-top: 1px solid rgba(255,255,255,0.08);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        color: #c7cede; /* even / unknown; is-good / is-bad override */
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .item-build-wr.is-good { color: #6bd16b; }
    .item-build-wr.is-bad { color: #ff8a8a; }
    .item-build-wr.is-even { color: #c7cede; }
    .item-build-pick {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 18px;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.15;
        font-variant-numeric: tabular-nums;
        background: none;
        text-shadow: none;
    }
    .item-build-name {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 3px 3px;
        color: #e6e8eb;
        font-size: 9px;
        font-weight: 600;
        line-height: 1.35;
        overflow: hidden;
    }
    .item-cluster-card .item-build-name {
        justify-content: flex-start;
        min-height: 36px;
        padding: 5px 8px;
        font-size: 10px;
    }
    .item-build-name span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .fit-chip-wrap {
        position: relative;
        display: inline-flex;
        max-width: 100%;
        border-radius: 999px;
        outline: none;
    }
    .fit-chip-wrap:focus-visible .fit-chip {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.32);
    }
    .fit-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(107, 209, 107, 0.10);
        border: 1px solid rgba(107, 209, 107, 0.25);
        color: #b9f6b9;
        font-size: 11px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: help;
    }
    .fit-chip.item-build-chip {
        padding: 4px 9px 4px 5px;
    }
    .fit-chip-tooltip {
        position: absolute;
        left: 0;
        bottom: calc(100% + 8px);
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: max-content;
        max-width: min(300px, calc(100vw - 28px));
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.08);
        background: #0b0e13;
        box-shadow: 0 6px 18px rgba(0,0,0,0.55);
        color: #c5cad3;
        font-size: 12px;
        line-height: 1.35;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateY(2px);
        transition: opacity 0.12s ease-out, transform 0.12s ease-out;
        z-index: 62;
    }
    .fit-chip-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 18px;
        border: 6px solid transparent;
        border-top-color: #0b0e13;
    }
    .fit-chip-wrap.tip-left .fit-chip-tooltip {
        left: auto;
        right: 0;
    }
    .fit-chip-wrap.tip-left .fit-chip-tooltip::after {
        left: auto;
        right: 18px;
    }
    .fit-chip-wrap.tip-below .fit-chip-tooltip {
        top: calc(100% + 8px);
        bottom: auto;
    }
    .fit-chip-wrap.tip-below .fit-chip-tooltip::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: #0b0e13;
    }
    .fit-chip-wrap:hover .fit-chip-tooltip,
    .fit-chip-wrap:focus-within .fit-chip-tooltip {
        opacity: 1;
        transform: translateY(0);
    }
    .fit-tip-name {
        color: #e6e8eb;
        font-weight: 600;
    }
    .fit-tip-pick {
        color: #9aa0a6;
        font-variant-numeric: tabular-nums;
    }
    .fit-tip-lift {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .fit-tip-lift.is-good { color: #6bd16b; }
    .fit-tip-lift.is-bad { color: #ff8a8a; }
    .fit-tip-lift.is-even { color: #d7dde7; }
    .item-pair-icons {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }
    .item-pair-icon-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.16);
        background: #0f131b;
        box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    }
    .item-pair-icon-wrap + .item-pair-icon-wrap {
        margin-left: -4px;
    }
    .item-pair-icon-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .fit-chip-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fit-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
        gap: 8px;
    }
    .fit-card {
        background: #11151d;
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 8px;
        padding: 8px;
        min-width: 0;
    }
    .fit-card.good {
        border-color: rgba(107, 209, 107, 0.22);
        background: linear-gradient(180deg, rgba(107, 209, 107, 0.08), #11151d 42%);
    }
    .fit-card.bad {
        border-color: rgba(255, 107, 107, 0.22);
        background: linear-gradient(180deg, rgba(255, 107, 107, 0.07), #11151d 42%);
    }
    .fit-name {
        color: #e6e8eb;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fit-score {
        margin-top: 4px;
        font-size: 12px;
        font-weight: 700;
    }
    .fit-card.good .fit-score { color: #6bd16b; }
    .fit-card.bad .fit-score { color: #ff8b8b; }
    .fit-meta {
        margin-top: 2px;
        color: #9aa0a6;
        font-size: 10px;
        line-height: 1.35;
    }
    .detail-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .detail-col h3 {
        margin: 0 0 8px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }
    .detail-col-heading {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 8px;
        min-width: 0;
        flex-wrap: wrap;
    }
    .detail-col-heading h3 { margin: 0; }
    .detail-col.best h3 { color: #6bd16b; }
    .detail-col.worst h3 { color: #ff6b6b; }
    [data-theme="light"] .detail-col.best h3 { color: #1f7a3a; }
    [data-theme="light"] .detail-col.worst h3 { color: #b42318; }
    /* Single-item strength filter (出裝 tab): pick-share knob + 6 role chips. */
    .item-role-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 12px;
    }
    .item-role-chip,
    .champ-pool-rarity-chip,
    .item-scope-chip {
        padding: 4px 11px;
        background: #1f2530;
        color: #c5cad3;
        border: 1px solid #2f3645;
        border-radius: 14px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.1s, border-color 0.1s, color 0.1s;
        --role-color: #9aa0a6;
    }
    .item-role-chip:hover,
    .champ-pool-rarity-chip:hover,
    .item-scope-chip:hover { background: #2a3142; border-color: #3a4252; }
    .item-role-chip.is-active,
    .champ-pool-rarity-chip.is-active,
    .item-scope-chip.is-active {
        background: var(--role-color);
        color: #0e1116;
        border-color: var(--role-color);
    }
    .item-role-chip:focus-visible,
    .champ-pool-rarity-chip:focus-visible,
    .item-scope-chip:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }
    /* Cycling pick-share knob: dots say how many states there are and where
       you are, so a label that silently changes on click still reads as one
       control rather than three chips collapsing. */
    .item-scope-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: 4px;
        --role-color: #f5c518;
    }
    .item-scope-dots {
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }
    .item-scope-dots i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.3;
        transition: opacity 0.1s;
    }
    .item-scope-dots i.is-on { opacity: 1; }
    .item-role-chip.role-Assassin { --role-color: #ef4444; }
    .item-role-chip.role-Fighter  { --role-color: #f97316; }
    .item-role-chip.role-Mage     { --role-color: #3b82f6; }
    .item-role-chip.role-Marksman { --role-color: #22c55e; }
    .item-role-chip.role-Support  { --role-color: #ec4899; }
    .item-role-chip.role-Tank     { --role-color: #a855f7; }
    .single-item-card.item-filter-hidden { display: none; }
    .item-filter-empty { margin: 4px 0 8px; }

    /* Augment category filter chips (above the per-champion ranking).  OR
       multi-select; .is-active fills with the per-category accent. */
    .aug-cat-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 12px;
    }
    .aug-cat-chip {
        padding: 4px 11px;
        background: #1f2530;
        color: #c5cad3;
        border: 1px solid #2f3645;
        border-radius: 14px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.1s, border-color 0.1s, color 0.1s;
        --cat-color: #f5c518;
    }
    .aug-cat-chip:hover { background: #2a3142; border-color: #3a4252; }
    .aug-cat-chip.is-active {
        background: var(--cat-color);
        color: #0e1116;
        border-color: var(--cat-color);
    }
    .aug-cat-chip:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }
    /* New is a status filter; keep it visually separate from purpose filters. */
    .aug-cat-chip.cat-new { margin-inline-start: 10px; }
    .aug-cat-chip.cat-ap       { --cat-color: #3b82f6; }
    .aug-cat-chip.cat-ad       { --cat-color: #f97316; }
    .aug-cat-chip.cat-tank     { --cat-color: #a855f7; }
    .aug-cat-chip.cat-gold     { --cat-color: #f5c518; }
    .aug-cat-chip.cat-mechanic { --cat-color: #14b8a6; }
    .aug-cat-chip.cat-cd       { --cat-color: #38bdf8; }
    .aug-cat-chip.cat-new      { --cat-color: #ec4899; }
    .aug-cat-chip.cat-crit     { --cat-color: #fbbf24; }
    .aug-cat-chip.cat-amp      { --cat-color: #ef4444; }
    .aug-cat-all               { --cat-color: #9aa0a6; }
    .aug.cat-hidden { display: none; }
    .rarity-row.cat-empty { display: none; }
    .rarity-row {
        margin-bottom: 10px;
        min-width: 0;
    }
    /* Shared height token: left-rail sort keys + card WR/pick rows. */
    .rarity-row,
    .aug-list,
    .aug,
    .rlabel-rail {
        --aug-stat-h: 28px;
    }
    /*
      Left control is a PEER card inside .aug-list (not a separate grid column).
      Same flex column recipe as .aug:
        rlabel-head  ≈ icon + name (flex-grow, centered label)
        rlabel-sort  ≈ .awr / .alift (fixed --aug-stat-h each)
      Being in the same flex row guarantees identical height → perfect align.
    */
    .rlabel-rail,
    .rlabel {
        flex: 0 0 72px;
        align-self: stretch;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 9px;
        text-align: center;
        position: relative;
        min-height: 0;
        box-sizing: border-box;
        color: var(--accent-on);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.2px;
    }
    .rlabel-head {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        padding: 8px 4px;
        box-sizing: border-box;
        /* Matches the dark icon+name plinth height region of data cards;
           colour comes from the rarity gradient on .rlabel-rail itself. */
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    }
    .rlabel-name {
        font-size: 13px;
        font-weight: 800;
        line-height: 1.25;
        padding: 0 2px;
    }
    .rlabel-sort {
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--aug-stat-h);
        width: 100%;
        height: var(--aug-stat-h);
        min-height: var(--aug-stat-h);
        margin: 0;
        padding: 0 2px;
        border: 0;
        border-radius: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
        font: inherit;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1;
        color: inherit;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.10);
        opacity: 0.82;
        box-sizing: border-box;
        transition: opacity var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),
                    box-shadow var(--dur-1) var(--ease);
    }
    /* Mirror .awr border between the two foot rows. */
    .rlabel-sort[data-sort="wr"] {
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    }
    .rlabel-sort:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.16);
    }
    .rlabel-sort.is-active {
        opacity: 1;
        background: rgba(0, 0, 0, 0.24);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
    }
    .rlabel-sort:focus-visible {
        outline: 2px solid rgba(37, 99, 235, 0.65);
        outline-offset: -2px;
    }
    .rlabel.prismatic,
    .rlabel-rail.prismatic {
        background: linear-gradient(135deg,#ffffff 0%,#e7d5ff 25%,#bcd6ff 50%,#ffd5ec 75%,#fff1c8 100%);
        background-size: 220% 220%;
        animation: prismShift 6s ease-in-out infinite;
        color: #2a1a4a;
        box-shadow: 0 0 6px rgba(220,180,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.6);
    }
    .rlabel.gold,
    .rlabel-rail.gold {
        background: linear-gradient(135deg,#ffe87a,#f5c518,#d99908);
        color: #3a2600;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
    }
    .rlabel.silver,
    .rlabel-rail.silver {
        background: linear-gradient(135deg,#eef0f4,#c0c5cc,#9aa0a6);
        color: #2a2e35;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
    }
    .aug-list {
        display: flex;
        align-items: stretch;
        gap: 6px;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
        padding: 0 4px 6px 0;
        -webkit-overflow-scrolling: touch;
    }
    .aug-list::-webkit-scrollbar { height: 7px; }
    .aug-list::-webkit-scrollbar-track { background: transparent; }
    .aug-list::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.35);
        border-radius: 999px;
    }
    .aug-list-empty {
        flex: 1 1 auto;
        align-self: center;
        color: var(--text-dim);
        font-size: 11px;
        padding: 8px 4px;
    }
    /* Augment card: icon → name (flex grow) → WR% → pick%.
       Foot rows share --aug-stat-h with .rlabel-sort so they share a baseline. */
    .aug {
        flex: 0 0 92px;
        align-self: stretch;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--surface-sunken);
        border-radius: 8px;
        text-align: center;
        position: relative;
        border: 1px solid rgba(255,255,255,0.08);
        min-height: 0;
    }
    .aug img,
    .aug .aicon-ph {
        display: block;
        flex: 0 0 auto;
        width: 100%;
        height: 48px;
        padding: 5px 0 1px;
        object-fit: contain;
        background: var(--surface-deep);
        box-sizing: border-box;
    }
    /* Name absorbs any height delta across the row so WR/pick stay bottom-pinned.
       Keep top padding tiny so icon and label sit as one plinth, not two bands. */
    .aug .aname {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 26px;
        padding: 1px 4px 3px;
        font-size: 10px;
        color: var(--text);
        line-height: 1.2;
        background: var(--surface-deep);
        border-bottom: 1px solid rgba(255,255,255,0.06);
        box-sizing: border-box;
    }
    .aug .aname span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .aug .awr {
        flex: 0 0 var(--aug-stat-h);
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--aug-stat-h);
        min-height: var(--aug-stat-h);
        font-size: 12px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        box-sizing: border-box;
        color: var(--text-secondary); /* wr-3 無色 default */
    }
    /* WR tone: 正綠 → 淺綠 → 無色 → 淺紅 → 正紅.
       Bad side stays pure red (not orange — orange is reserved for pick heat).
       wr-2 is desaturated pink-red; wr-1 is brighter saturated red so the step
       is obvious on dark chrome without looking brown/muddy. */
    .aug .awr.wr-5 { color: var(--wr-5); } /* 正綠 */
    .aug .awr.wr-4 { color: var(--wr-4); } /* 淺綠 */
    .aug .awr.wr-3 { color: var(--wr-3); font-weight: 600; } /* 無色 */
    .aug .awr.wr-2 { color: var(--wr-2); } /* 淺紅：粉紅偏淡 */
    .aug .awr.wr-1 { color: var(--wr-1); } /* 正紅：飽和、明顯比 wr-2 重 */
    .aug .alift {
        flex: 0 0 var(--aug-stat-h);
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--aug-stat-h);
        min-height: var(--aug-stat-h);
        font-size: 12px; /* match .awr; was 10px and felt small */
        font-weight: 600;
        color: var(--text-muted);
        margin-top: 0;
        padding: 0 4px;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        box-sizing: border-box;
        /* font-family: Mincho — see top-of-file .aug .alift rule */
    }
    /* Pick heat: 青 → 亮黃 → 枯葉黃 → 白 → 灰 (5 solar tiers, colour only). */
    .aug .alift.pick-1 { color: #7c8aa1; font-weight: 500; }
    .aug .alift.pick-2 { color: #e6e8eb; font-weight: 600; }
    .aug .alift.pick-3 { color: #c4a35a; font-weight: 650; }
    .aug .alift.pick-4 { color: #fde047; font-weight: 700; }
    .aug .alift.pick-5 { color: #67e8f9; font-weight: 700; }
    .aug-hot-badge {
        position: absolute;
        top: 4px;
        left: 4px;
        font-size: 8px;
        font-weight: 700;
        color: #1a1205;
        background: #ffcf4d;
        border-radius: 4px;
        padding: 1px 4px;
        line-height: 1.3;
        z-index: 2;
    }
    /* Custom hover popup with augment description.  Native title is kept too
       as an accessibility/fallback path. */
    .aug-tip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        width: 220px;
        padding: 8px 10px;
        background: #0b0e13;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.55);
        color: #e6e8eb;
        font-size: 11px;
        line-height: 1.45;
        text-align: left;
        z-index: 50;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease-out;
    }
    .aug-tip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #0b0e13;
    }
    /* When an augment sits near the top of the viewport, JS sets .flip-tip
       so the tooltip drops below the card instead of clipping above. */
    .aug.flip-tip .aug-tip {
        bottom: auto;
        top: calc(100% + 8px);
    }
    .aug.flip-tip .aug-tip::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: #0b0e13;
    }
    .aug:hover .aug-tip,
    .aug:focus-visible .aug-tip { opacity: 1; }
    .aug-tip-name {
        font-weight: 700;
        font-size: 12px;
        margin-bottom: 4px;
        color: #f5d780;
    }
    .aug-tip-desc {
        color: #c5cad3;
        margin-bottom: 6px;
        white-space: normal;
    }
    .aug-tip-stat {
        color: #9aa0a6;
        font-size: 10px;
        border-top: 1px solid rgba(255,255,255,0.08);
        padding-top: 4px;
    }
    .aug-tip-set {
        color: #8fd8f4;
        font-size: 10px;
        margin-bottom: 4px;
    }
    /* No per-rarity ring: the coloured icon art already encodes rarity, and a
       2px colour frame double-codes it and fights the icon.  The rarity-* class
       stays on the card — applyAugTierFilters() reads it for the board filter. */
    .aug.search-hit {
        background: rgba(245, 197, 24, 0.12);
        box-shadow:
            inset 0 0 0 2px #f5c518,
            0 0 0 2px rgba(245, 197, 24, 0.28),
            0 10px 22px rgba(245, 197, 24, 0.12);
    }
    .mate-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
        gap: 10px;
    }
    .mate-list.empty-list { color: #6b7280; font-size: 11px; padding: 8px 0; }
    .mate-card {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 8px;
        align-items: center;
        padding: 8px;
        background: #11151d;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.04);
    }
    .mate-card img {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        display: block;
        background: #2a3142;
    }
    .mate-card .mname {
        font-size: 12px;
        font-weight: 600;
        color: #e6e8eb;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mate-card .mwr {
        margin-top: 2px;
        font-size: 11px;
        font-weight: 700;
    }
    .mate-card.good .mwr { color: #6bd16b; }
    .mate-card.bad .mwr { color: #ff6b6b; }
    .mate-card .mmeta {
        margin-top: 2px;
        font-size: 10px;
        color: #9aa0a6;
        font-family: var(--font-caption);
        font-variant-numeric: tabular-nums;
        line-height: 1.35;
    }
    .mate-card .mmeta .mmeta-z { white-space: nowrap; }
    .empty { color: #6b7280; font-size: 12px; }
    .footer {
        margin-top: 40px;
        padding-top: 24px;
        border-top: 1px solid #1f2530;
        color: #6b7280;
        font-size: 11px;
        text-align: center;
        line-height: 1.7;
    }
    .footer .cutoffs {
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
    }
    .footer .cutoffs b {
        color: #c5cad3;
        font-weight: 600;
        margin-right: 2px;
    }
    .footer .freshness {
        margin-top: 6px;
        color: #555a63;
    }
    .footer .site-links {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 16px;
        margin-top: 10px;
    }
    .footer .site-links a {
        color: var(--text-muted, #8d96a0);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        text-underline-offset: 3px;
        transition: color var(--dur-1) var(--ease);
    }
    .footer .site-links a:hover {
        color: var(--text, #e6e8eb);
        text-decoration: underline;
    }
    .footer .site-links a:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--accent, #48b868) 60%, transparent);
        outline-offset: 3px;
        border-radius: 3px;
    }
    /* Footer GitHub star: still meta-level, but reads as a real control
       (pill + border + hover lift) so it is not mistaken for plain text. */
    .footer .gh-star {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: auto;
        min-height: 34px;
        margin-top: 14px;
        padding: 0 14px;
        background: color-mix(in srgb, var(--surface-2, #21262d) 88%, transparent);
        border: 1px solid var(--border, #30363d);
        border-radius: 999px;
        color: var(--text-muted, #8d96a0);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
        cursor: pointer;
        transition: color var(--dur-2) var(--ease),
                    background-color var(--dur-2) var(--ease),
                    border-color var(--dur-2) var(--ease),
                    transform var(--dur-1) var(--ease),
                    box-shadow var(--dur-2) var(--ease);
    }
    .footer .gh-star:hover {
        color: var(--text, #e6e8eb);
        background: var(--surface-2, #30363d);
        border-color: var(--border-strong, #58606b);
        box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.55);
    }
    .footer .gh-star:active { transform: scale(0.97); }
    .footer .gh-star svg { flex-shrink: 0; opacity: 0.95; }
    .footer .gh-star .gh-star-label { font-weight: 600; }
    .footer .gh-star .gh-star-cta {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding-left: 8px;
        margin-left: 2px;
        border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent);
        color: color-mix(in srgb, var(--accent, #48b868) 78%, var(--text-muted, #8d96a0));
        font-weight: 700;
    }
    .footer .gh-star:hover .gh-star-cta {
        color: var(--accent, #48b868);
    }
    /* Footer open-source action. */
    .footer .footer-actions {
        position: relative;
        min-height: 48px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
    }
    .footer .footer-actions > .gh-star { margin-top: 0; }
    /* Feedback occupies the right end of the home footer action row. */
    .feedback-fab {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid var(--border-strong);
        background: var(--surface-raised);
        color: var(--accent);
        box-shadow: var(--panel-shadow);
        text-decoration: none;
        transition: color var(--dur-2) var(--ease),
                    border-color var(--dur-2) var(--ease),
                    background-color var(--dur-2) var(--ease);
    }
    .feedback-fab > svg { transform: translate(-1px, 1px); }
    body.rec-modal-open .feedback-fab { visibility: hidden; }
    .feedback-fab:hover {
        color: var(--accent);
        border-color: var(--accent);
        background: var(--surface-2);
    }
    .feedback-fab:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }
    .feedback-fab-tip {
        position: absolute;
        right: 0;
        bottom: calc(100% + 10px);
        width: max-content;
        max-width: calc(100vw - 48px - env(safe-area-inset-right, 0px));
        padding: 10px 14px;
        border: 1px solid var(--border-strong);
        border-radius: var(--r-sm);
        background: var(--surface-raised);
        color: var(--text);
        box-shadow: var(--panel-shadow);
        font-size: 13px;
        line-height: 1.5;
        visibility: hidden;
        opacity: 0;
        transition: opacity var(--dur-1) var(--ease);
    }
    /* Bridge the gap so the tooltip remains visible when hovered. */
    .feedback-fab-tip::after {
        content: "";
        position: absolute;
        inset: 100% 0 auto;
        height: 11px;
    }
    .feedback-fab:is(:hover, :focus-visible):not(.tip-dismissed) .feedback-fab-tip {
        visibility: visible;
        opacity: 1;
    }
    @media (max-width: 600px) {
        .footer .footer-actions { justify-content: space-between; gap: 12px; }
        .footer .footer-actions > .gh-star { max-width: calc(100% - 60px); }
        .footer .gh-star-label { white-space: normal; }
        .feedback-fab { position: relative; top: auto; transform: none; flex-shrink: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .feedback-fab, .feedback-fab-tip { transition: none; }
    }
    .footer .disclaimer {
        max-width: 760px;
        margin: 20px auto 0;
        padding-top: 14px;
        border-top: 1px solid #16191f;
        color: #555a63;
        font-size: 10px;
    }
    @media (max-width: 1180px) {
        .app-shell,
        .app-shell.with-side-panel { grid-template-columns: 1fr; }
        .side-panel {
            position: static;
            max-height: none;
            overflow: visible;
            order: -1;
        }
    }
    /* Mobile / narrow viewport: switch the detail panel from two columns
       (best / worst) to a single stack so prismatic / gold / silver rows
       stay readable, and shrink the tier-row label so champions get more
       space.  ~700px is around where the two-column layout starts looking
       cramped on most phones. */
    @media (max-width: 700px) {
        /* Body padding is 0; .site-main owns content padding (see chrome CSS). */
        body.rec-modal-open { overflow: hidden; }
        h1 { font-size: 18px; }
        .subtitle { font-size: 12px; }
        .title-patch { font-size: 12px; }
        /* Keep the header compact: title + patch/update chip on the left,
           utility actions on the right. */
        .page-header {
            gap: 6px 8px;
            margin-bottom: 10px;
        }
        .title-meta { gap: 6px; margin-top: 0; }
        .page-actions {
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .page-actions .icon-btn,
        .page-actions .gh-star,
        .tool-btn.header-update-tab {
            min-height: auto;
            padding: 0 0 2px;
        }
        .page-actions .gh-star { width: auto; }
        /* Phone: chips only (search rail hidden); drop desktop right gutter. */
        .filter-bar {
            padding: 0;
            gap: 8px;
            position: static;
            box-shadow: none;
            min-height: 0;
            margin: 0 0 10px;
        }
        .filter-bar .role-chips { flex-wrap: wrap; }
        .role-chips { gap: 4px; }
        .chip { padding: 4px 10px; font-size: 11px; }
        .search-rail { margin: 0 !important; }
        .filter-tools {
            margin-left: 0;
            width: 100%;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px 10px;
            align-items: center;
        }
        /* Keep search available on phone: this is often used during champion
           select, when role chips alone are slower than typing a name. */
        .filter-tools,
        #recommend-mode,
        .shown-count { display: none !important; }
        .search-rail {
            display: flex !important;
            position: static;
            width: 100%;
            max-width: none;
            justify-content: stretch;
            margin: 0 0 12px !important;
        }
        .search-rail .search-control { width: 100%; }
        .search-rail .search-wrap {
            display: block !important;
            flex: 1 1 auto;
            width: auto;
            max-width: none;
            min-width: 0;
        }
        .tool-btn { min-height: 36px; }
        .updates-panel {
            margin: 0 0 14px;
            padding: 12px;
        }
        .updates-title { font-size: 14px; }
        .updates-list li { font-size: 11px; }
        .change-summary { margin-bottom: 10px; }
        .change-grid { grid-template-columns: 1fr; gap: 12px; }
        .change-row {
            min-height: 42px;
            grid-template-columns: auto minmax(0, 1fr) auto;
            padding: 6px 8px;
        }
        .change-icon,
        .change-duo img {
            width: 30px;
            height: 30px;
        }
        .change-delta {
            min-width: 50px;
            font-size: 10px;
        }
        .side-panel {
            position: fixed;
            z-index: 60;
            left: 12px;
            right: 12px;
            top: 56px;
            bottom: 18px;
            max-height: none;
            overflow: auto;
            padding: 14px;
            border-radius: 14px;
            box-shadow: 0 22px 60px rgba(0,0,0,0.58);
        }
        /* The veil must live INSIDE the active view's stacking context: the
           .view carries view-transition-name, which creates a stacking context
           that traps the fixed side-panel (60) z-index.
           A body::before veil sits in the ROOT context and paints ABOVE those
           trapped modals — the modal ends up UNDER the veil and every tap
           lands on body, so the page looks frozen (mobile has no Escape).
           Anchored to the view, 55 < 60/70 resolves in the same context and
           the modals correctly sit on top. */
        body.rec-modal-open .view.is-active::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 55;
            background: rgba(5, 8, 13, 0.72);
        }
        .side-close { display: inline-flex; }
        .rec-titleline {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .rec-name { flex: 1 1 86px; }
        .rec-score { justify-self: auto; }
        .rec-detail {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 8px;
            white-space: normal;
        }
        .rec-fab { display: none; }
        .rec-fab:not(.is-hidden) { display: inline-flex; }
        .side-sub { font-size: 11px; }
        .pick-slots { gap: 4px; }
        .pick-chip { font-size: 10px; padding: 4px 5px; min-height: 34px; }
        .pick-chip img { width: 18px; height: 18px; }
        .search-wrap { max-width: none; min-width: 0; }
        .search { max-width: none; min-width: 0; }
        .shown-count { justify-self: end; font-size: 12px; }
        /* Tier heading slimmer; pill stays inline. */
        .tier-heading { margin: 6px 0; gap: 6px; }
        .tier-pill { padding: 3px 12px; font-size: 14px; }
        .tier-count { font-size: 11px; }
        /* Lock to 6 champions per row on mobile (instead of auto-fill which
           packs 7-8 in and makes icons tiny).  minmax(0, 1fr) — NOT 1fr — so the
           tracks may shrink below each .champ's min-content (its aspect-ratio /
           contain-intrinsic-size floor is ~96px); with plain 1fr the six tracks
           refuse to shrink, the grid overflows to ~600px, the page zooms out and
           icons render huge (~4 fit the viewport instead of 6). */
        .tier-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
        /* .tier-grid is locked to 6 champ cols above; the board also has class
           tier-grid.  Force a denser 增幅榜 (5 equal cols that may shrink).
           !important: beats any later .tier-grid / auto-fill floor that made
           phones stick at ~3 wide cards. */
        .tier-grid.aug-tier-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
            gap: 3px !important;
        }
        .tier-grid.aug-tier-grid > .aug {
            min-width: 0 !important;
            max-width: none;
            width: auto;
            flex: none;
        }
        .detail-head {
            flex-direction: row;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .detail-avatar {
            display: block;
            width: 42px;
            height: 42px;
            border-radius: 8px;
        }
        .detail-section-head {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
            margin-bottom: 12px;
        }
        .detail-section-head h3 {
            font-size: 14px;
        }
        .detail-tab-list {
            gap: 6px;
        }
        .detail-tab-label {
            min-height: 38px;
            padding-inline: 10px;
            font-size: 11px;
        }
        .detail-tab-panel {
            padding-top: 18px;
        }
        .detail-sub-tabs {
            margin-top: 2px;
        }
        .detail-sub-tabs .detail-tab-label {
            min-height: 34px;
            padding-inline: 10px;
            font-size: 11px;
        }
        .detail-sub-tabs .detail-tab-panel {
            padding-top: 18px;
        }
        .aug-set-summary {
            max-width: 100%;
            white-space: normal;
        }
        .section-meta {
            font-size: 10px;
            line-height: 1.4;
        }
        .detail-cols { grid-template-columns: 1fr; gap: 14px; }
        .detail-cols.pair-cols { grid-template-columns: 1fr; gap: 14px; }
        .detail-cols.pair-cols .detail-col h3 { margin-bottom: 6px; font-size: 12px; }
        .detail-cols.pair-cols .detail-col-heading h3 { margin-bottom: 0; }
        /* Drop the rarity colored bar (label) on mobile to recover horizontal
           space.  The coloured icon art encodes rarity per card, and row order
           (prismatic → gold → silver) is fixed, so which row is which stays
           obvious. */
        /* Each rarity row is a horizontal carousel; rail stays a peer card. */
        .aug-list {
            gap: 4px;
            padding-bottom: 6px;
            scroll-snap-type: x mandatory;
        }
        .rlabel-rail,
        .rlabel {
            flex-basis: 56px;
            min-width: 52px;
        }
        .rlabel-name { font-size: 11px; }
        .rlabel-sort { font-size: 9.5px; }
        .aug {
            flex-basis: calc((100% - 16px) / 5);
            min-width: 58px;
        }
        .item-build-carousel {
            gap: 8px;
            padding-bottom: 10px;
            scroll-snap-type: x mandatory;
        }
        .item-build-carousel.item-build-grid {
            gap: 7px;
            padding-bottom: 0;
            overflow-x: visible;
            scroll-snap-type: none;
        }
        .item-build-carousel.single-item-grid {
            grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
        }
        .item-build-carousel.item-pair-grid {
            grid-template-columns: repeat(auto-fill, minmax(58px, 76px));
            justify-content: start;
        }
        .item-build-carousel.item-cluster-grid {
            grid-template-columns: 1fr;
            justify-content: start;
        }
        .item-build-card {
            flex-basis: calc((100% - 20px) / 6);
            min-width: 48px;
        }
        .item-build-card.single-item-card {
            flex-basis: calc((100% - 20px) / 6);
            min-width: 48px;
        }
        .item-build-grid .item-build-card {
            flex-basis: auto;
            min-width: 0;
        }
        .item-build-card.item-cluster-card {
            flex: 0 0 auto;
            min-width: 0;
            width: 100%;
        }
        .item-build-icons {
            min-height: 66px;
            padding: 3px;
            gap: 2px;
        }
        .single-item-card .item-build-icons {
            min-height: 42px;
        }
        .item-cluster-card .item-build-icons {
            min-height: 116px;
            grid-template-columns: repeat(3, 1fr);
            padding: 8px;
            gap: 6px;
        }
        .item-build-icon {
            width: 29px;
            height: 29px;
        }
        .single-item-card .item-build-icon {
            width: 34px;
            height: 34px;
        }
        .item-cluster-card .item-build-icon {
            width: 42px;
            height: 42px;
        }
        .item-build-wr {
            min-height: 22px;
            font-size: 10px;
        }
        .item-build-pick {
            min-height: 15px;
            font-size: 9px;
        }
        .item-build-name {
            min-height: 24px;
            padding: 2px 2px;
            font-size: 9px;
        }
        .item-cluster-card .item-build-name {
            min-height: 36px;
            padding: 5px 8px;
            font-size: 10px;
        }
        .mate-list { grid-template-columns: 1fr; gap: 6px; }
        .mate-card {
            grid-template-columns: 34px 1fr;
            gap: 5px;
            padding: 5px;
            min-width: 0;
        }
        .mate-card > div { min-width: 0; }
        .mate-card img {
            width: 34px;
            height: 34px;
            border-radius: 6px;
        }
        .mate-card .mname { font-size: 11px; }
        .mate-card .mwr { font-size: 10px; }
        .mate-card .mmeta { font-size: 9px; }
        .mate-card .mmeta .mmeta-label,
        .mate-card .mmeta .mmeta-z,
        .mate-card .mmeta .mmeta-games { display: none; }
        .aug img,
        .aug .aicon-ph { height: 52px; padding: 6px 0 3px; }
        .aug .aname { font-size: 9.5px; min-height: 28px; padding: 4px 3px 5px; }
        .aug .awr { font-size: 11px; min-height: 22px; }
        /* Pick bare % matches WR size on mobile. */
        .aug .alift { font-size: 11px; margin-top: 0; padding: 0 3px; }
        /* Re-assert denser board + compact type for ~70–80px tracks. */
        .tier-grid.aug-tier-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
            gap: 3px !important;
        }
        .aug-tier-grid .aug img,
        .aug-tier-grid .aug .aicon-ph { height: 40px; padding: 3px 0 0; }
        .aug-tier-grid .aug .aname {
            min-height: 20px;
            padding: 0 2px 2px;
            font-size: 9px;
            line-height: 1.15;
        }
        .aug-tier-grid .aug .awr,
        .aug-tier-grid .aug .alift { font-size: 10.5px; }
        .aug-tip,
        .alt-role-tooltip,
        .fit-chip-tooltip,
        .cf-stage-tip,
        .item-float-tip { display: none !important; }
        /* Touch-target floor (WCAG 2.5.5).  Chips were 4×10 padding on 11px
           font ≈ 32 px tall.  Bump to a real 44 px tap area without growing
           the visual pill, by adding transparent vertical padding. */
        .chip { min-height: 34px; }
        .icon-btn { min-height: 36px; }
        .lang-toggle { min-width: 0; }
    }
    @media (min-width: 520px) and (max-width: 700px) {
        .item-build-carousel.item-cluster-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (min-width: 320px) and (max-width: 359px) {
        .mate-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 360px) and (max-width: 700px) {
        .mate-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    /* Keyboard a11y: every interactive element gets a visible focus ring
       when focused via keyboard (not mouse click).  Uses the tier accent
       (or a neutral white when no tier is in scope) and stays well clear
       of the resting border colour. */
    .chip:focus-visible,
    .icon-btn:focus-visible,
    .gh-star:focus-visible,
    .tool-btn:focus-visible,
    .side-close:focus-visible,
    .meta-help:focus-visible,
    .rec-fab:focus-visible,
    .pick-chip:focus-visible,
    .rec-row:focus-visible,
    .search:focus-visible,
    .champ:focus-visible,
    .item-build-card:focus-visible,
    .aug:focus-visible {
        outline: 2px solid #f5e8ff;
        outline-offset: 2px;
    }
    .nav-tab:focus-visible,
    .brand:focus-visible,
    .theme-toggle:focus-visible,
    .article-card:focus-visible,
    .article-back:focus-visible {
        outline: 2px solid var(--accent-soft);
        outline-offset: 2px;
    }
    /* ============================================================
       Site chrome: fixed header + tab nav + view switching.
       ============================================================ */
    .site-header {
        position: sticky;
        top: 0;
        /* z 45: above page content + sticky search-rail (32) / detail tabs
           (25) and rec FAB (40), below the mobile modals / backdrops (55-70)
           so detail and recommend overlays cover the header. */
        z-index: 45;
        background: color-mix(in srgb, var(--bg) 72%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid var(--border);
        transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    /* Opaque-ish fallback where backdrop-filter is unsupported. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .site-header,
        .detail-main-tabs > .detail-tab-rail {
            background: color-mix(in srgb, var(--bg) 94%, transparent);
        }
        .search-rail .search-wrap {
            background: color-mix(in srgb, var(--bg) 94%, transparent);
        }
    }
    /* Lift the header once the page scrolls under it (JS toggles .scrolled). */
    .site-header.scrolled {
        border-bottom-color: transparent;
        box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.55);
    }
    .site-header-inner {
        display: flex;
        align-items: center;
        gap: 16px;
        /* Fixed height, NOT var(--header-h): JS overwrites that var with the
           measured header height (syncHeaderHeight) for sticky offsets, so
           deriving our own height from it would feed back on itself. */
        height: 56px;
        max-width: var(--container);
        width: 100%;
        margin: 0 auto;
        padding: 0 24px;
    }
    .brand {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: var(--text);
        flex-shrink: 0;
        border: 0;
        background: none;
        cursor: pointer;
        padding: 0;
        font: inherit;
        min-width: 0;
    }
    /* Latin brand face only — Outfit reads as a product mark, not body UI.
       Header is wordmark-only (no logo tile, no patch chip). */
    .brand-title {
        font-family: "Outfit", var(--font-ui);
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.035em;
        line-height: 1;
        white-space: nowrap;
        color: var(--text);
    }
    .brand-aram {
        font-weight: 500;
        color: var(--text-muted);
    }
    .brand-meta {
        font-weight: 700;
        color: var(--text);
    }
    .brand:hover .brand-aram { color: var(--text-secondary, var(--text-muted)); }
    .brand:hover .brand-meta { color: var(--text); }
    /* Game-mode switcher. It intentionally matches the Classic page so the
       control keeps one learned location, shape and state vocabulary. */
    .site-header .mode-menu {
        position: relative;
        display: inline-flex;
        flex: none;
    }
    .site-header .mode-menu > summary { list-style: none; }
    .site-header .mode-menu > summary::-webkit-details-marker { display: none; }
    .site-header .mode-menu > summary::marker { content: ''; }
    .site-header .mode-select {
        display: inline-flex;
        min-height: 32px;
        align-items: center;
        gap: 6px;
        padding: 6px 9px;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        background: transparent;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        user-select: none;
        box-shadow: none;
        transition: background-color var(--dur-2) var(--ease),
                    color var(--dur-2) var(--ease),
                    border-color var(--dur-2) var(--ease),
                    transform var(--dur-1) var(--ease);
    }
    .site-header .mode-select svg {
        flex: none;
        transition: transform var(--dur-2) var(--ease);
    }
    .site-header .mode-menu[open] .mode-select svg { transform: rotate(180deg); }
    .site-header .mode-select:hover,
    .site-header .mode-menu[open] .mode-select {
        background: var(--surface-2);
        color: var(--text);
        border-color: var(--border-strong);
    }
    .site-header .mode-select:active { transform: scale(0.97); }
    .site-header .mode-select:focus-visible {
        outline: 2px solid color-mix(in oklab, var(--accent) 58%, var(--text));
        outline-offset: 2px;
    }
    .site-header .mode-options {
        position: absolute;
        top: calc(100% + 7px);
        right: 0;
        z-index: 90;
        display: grid;
        min-width: 144px;
        padding: 5px;
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        background: var(--surface-raised);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.50);
    }
    .site-header .mode-option {
        display: flex;
        min-height: 34px;
        align-items: center;
        justify-content: space-between;
        padding: 7px 10px;
        border-radius: var(--r-sm);
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 650;
        text-decoration: none;
        white-space: nowrap;
    }
    .site-header .mode-option:hover,
    .site-header .mode-option:focus-visible {
        background: var(--surface-2);
        color: var(--text);
    }
    .site-header .mode-option:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }
    .site-header .mode-option[aria-current="page"] {
        background: color-mix(in oklab, var(--accent) 12%, var(--surface-2));
        color: var(--text);
    }
    .site-header .mode-option[aria-current="page"]::after {
        content: '';
        width: 6px;
        height: 6px;
        flex: none;
        margin-left: 12px;
        border-radius: 50%;
        background: var(--accent);
    }
    :root[data-theme="light"] .site-header .mode-options {
        box-shadow: 0 18px 50px rgba(31, 41, 55, 0.16);
    }
    .nav-tabs {
        position: relative;
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0 auto 0 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tab {
        appearance: none;
        border: 0;
        background: none;
        color: var(--text-muted);
        font: inherit;
        font-size: 16px;
        font-weight: 600;
        padding: 7px 14px;
        border-radius: 8px;
        cursor: pointer;
        white-space: nowrap;
        position: relative;
        transition: color 0.14s, background-color 0.14s;
    }
    .nav-tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
    /* Keep the active fill neutral; the gold underline already carries state. */
    .nav-tab.active { color: var(--text); background: color-mix(in oklab, var(--surface-raised) 72%, transparent); }
    /* One shared underline that slides between tabs (JS sets --ind-x / --ind-w in
       moveTabIndicator).  It's a real element, not a ::after, so it can carry a
       view-transition-name and morph ABOVE the frozen root snapshot during a tab
       View Transition.  transition:none until .ui-ready so it doesn't grow from
       width:0 on first paint. */
    .nav-ind {
        position: absolute;
        bottom: 0;
        left: var(--ind-x, 0);
        width: var(--ind-w, 0);
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--accent);
        box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
        pointer-events: none;
        view-transition-name: tab-ind;
        transition: none;
    }
    .ui-ready .nav-ind { transition: left var(--dur-3) var(--ease), width var(--dur-3) var(--ease); }
    /* During a tab View Transition the indicator is morphed by the VT.
       Suppress its CSS transition then, so the real element jumps to the
       final geometry the new snapshot captures. */
    .vt-running .nav-ind { transition: none; }
    .nav-tab:active,
    .chip:active,
    .theme-toggle:active,
    .site-header .lang-toggle:active { transform: scale(0.96); transition-duration: var(--dur-1); }
    .header-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .site-header .theme-toggle,
    .site-header .lang-toggle {
        width: auto; min-width: 0; padding: 6px 10px;
        background: transparent;
        color: var(--text-muted);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        font-size: 12px; font-weight: 600;
        transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
    }
    .site-header .theme-toggle {
        padding: 6px 8px;
        line-height: 0;
    }
    /* Dark → show sun (switch to light); light → show moon (switch to dark). */
    .site-header .theme-toggle .icon-moon { display: none; }
    [data-theme="light"] .site-header .theme-toggle .icon-sun { display: none; }
    [data-theme="light"] .site-header .theme-toggle .icon-moon { display: block; }
    .site-header .theme-toggle:hover,
    .site-header .lang-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }

    /* Language dropdown (aramkit-style <details>): 繁體 / 简体 / English. */
    .site-header .lang-menu {
        position: relative;
        display: inline-flex;
    }
    .site-header .lang-menu > summary {
        list-style: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        user-select: none;
    }
    .site-header .lang-menu > summary::-webkit-details-marker { display: none; }
    .site-header .lang-menu > summary::marker { content: ''; }
    .site-header .lang-menu[open] > summary {
        color: var(--text);
        background: var(--surface-2);
        border-color: var(--border-strong);
    }
    .site-header .lang-menu-list {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 80;
        min-width: 132px;
        padding: 4px;
        /* Solid panel — never use undefined tokens like --surface-1 (was transparent). */
        background: var(--surface-raised, #1a1d21);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md, 10px);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        gap: 2px;
        isolation: isolate;
        opacity: 1;
    }
    .site-header .lang-menu-list [data-lang] {
        appearance: none;
        border: 0;
        background: transparent;
        color: var(--text-muted);
        text-align: left;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        padding: 8px 10px;
        border-radius: var(--r-sm, 6px);
        cursor: pointer;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .site-header .lang-menu-list [data-lang]:hover {
        color: var(--text);
        background: var(--surface-2);
    }
    /* Selected = accent tint + accent text + check; no outline box. */
    .site-header .lang-menu-list [data-lang].is-active {
        color: var(--accent-soft);
        background: color-mix(in srgb, var(--accent) 18%, transparent);
    }
    .site-header .lang-menu-list [data-lang].is-active::after {
        content: '';
        width: 10px;
        height: 5px;
        margin-bottom: 3px;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        flex-shrink: 0;
    }

    /* Header search popover: name box + segmented role bar (All + 6 classes).
       Segments proxy the champion list's role chips. */
    .site-header .header-search {
        position: relative;
        display: inline-flex;
    }
    .site-header .header-search > summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
        display: inline-flex;
        align-items: center;
        padding: 6px 8px;
        line-height: 0;
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        color: var(--accent);
        border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
        border-radius: var(--r-sm);
        transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
    }
    .site-header .header-search > summary::-webkit-details-marker { display: none; }
    .site-header .header-search > summary::marker { content: ''; }
    .site-header .header-search > summary:hover {
        background: color-mix(in srgb, var(--accent) 20%, transparent);
        border-color: var(--accent);
    }
    .site-header .header-search[open] > summary {
        color: var(--accent-on);
        background: var(--accent);
        border-color: var(--accent);
    }
    .site-header .header-search > summary:active { transform: scale(0.96); transition-duration: var(--dur-1); }
    .site-header .header-search-panel {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 80;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        max-width: calc(100vw - 32px);
        background: var(--surface-raised, #1a1d21);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md, 10px);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
        isolation: isolate;
    }
    .site-header .header-search-input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 8px 10px;
        font: inherit;
        font-size: 13px;
        color: var(--text);
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--r-sm, 6px);
    }
    .site-header .header-search-input:focus { outline: none; border-color: var(--accent); }
    .role-seg-bar {
        display: inline-flex;
        align-self: flex-start;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--r-sm, 6px);
        overflow: hidden;
    }
    .role-seg {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 38px;
        padding: 0;
        border: 0;
        border-left: 1px solid var(--border);
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
    }
    .role-seg:first-child { border-left: 0; }
    .role-seg:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
    .role-seg.is-active {
        color: var(--accent-soft);
        background: color-mix(in srgb, var(--accent) 22%, transparent);
    }
    .role-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .role-seg-icon {
        width: 22px;
        height: 22px;
        background: currentColor;
        -webkit-mask: var(--role-mask) center / contain no-repeat;
        mask: var(--role-mask) center / contain no-repeat;
    }
    .header-role-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
        gap: 4px;
        max-height: min(320px, 55vh);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 2px;
    }
    .header-role-grid[hidden] { display: none; }
    .header-role-empty {
        grid-column: 1 / -1;
        margin: 6px 0;
        color: var(--text-muted, var(--text));
        font-size: 13px;
        text-align: center;
    }
    .header-role-champ {
        display: block;
        aspect-ratio: 1;
        border-radius: var(--r-sm, 6px);
        overflow: hidden;
        background: var(--surface-2);
        /* Tier-coloured square frame, drawn inside the box so it never adds layout. */
        outline: 2px solid var(--tier-color, var(--border));
        outline-offset: -2px;
        transition: outline-color var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
    }
    .header-role-champ img { display: block; width: 100%; height: 100%; object-fit: cover; }
    /* No scale on hover: a scaled edge tile overflows the scrolling grid,
       flashes a scrollbar and reflows the grid out from under the cursor. */
    .header-role-champ:hover,
    .header-role-champ:focus-visible { outline-color: var(--text); filter: brightness(1.12); }
    /* Home role filter reuses the header's connected segments; active tint
       keeps each role's own color. (0,4,0) beats the light-theme chip rules. */
    .role-chips .role-chip-bar { align-self: center; flex: 0 0 auto; }
    .filter-bar .role-chip-bar .chip.role-seg {
        width: auto;
        min-height: 0;
        height: 34px;
        gap: 6px;
        padding: 0 12px;
        border: 0;
        border-left: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }
    .filter-bar .role-chip-bar .chip.role-seg:first-child { border-left: 0; }
    .filter-bar .role-chip-bar .chip.role-seg:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
    .filter-bar .role-chip-bar .chip.role-seg.active {
        color: var(--role-color);
        background: color-mix(in srgb, var(--role-color) 20%, transparent);
    }
    .role-chip-bar .role-seg-icon { width: 18px; height: 18px; flex: none; }
    /* Labels only fit beside the sticky search rail on wide screens. */
    @media (max-width: 1080px) {
        .filter-bar .role-chip-bar .chip.role-seg { width: 42px; height: 36px; padding: 0; }
        .role-chip-bar .chip-label { display: none; }
        .role-chip-bar .role-seg-icon { width: 20px; height: 20px; }
    }
    .role-seg-all { --role-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9'/%3E%3C/g%3E%3C/svg%3E"); width: 18px; height: 18px; }
    .role-seg-assassin { --role-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAFEElEQVR42q3YXYwdZRkH8N/MnO1qt27Nsu22mFJtitINFWxaP0hqA9oGJVEsGAXRopFEYmJiDEaj3phgonitJqi3JmrUiKGBGCCAJIg2trXSAhqCLbLCGgNddXvOzOPFvGd6Zre73W53zs0578fzf5+v//ufw1KffJFfK/AUeKNve9Lv3WMsjazY08FWx0T6HPe2NLpip7/SC8IZpdIZ4UVXrxREgR2mhF7jQU94xa6VCFSOy73UMn8WYvJi053JrXF0nvk+xHGjctnFJfdbwpl55iON3nMxYcqw1j+VqnMCVCrTxtLKJbXPfIC3WLdgEDKZMVsWt3I+gFWL+hgYvhACmP+MolpwtkorXEyIFgMIbFl+DmDneUthRwJaVhUNOSGU56yhSDPPWbW4DwtTRGbPoub7EPtky+mFDu4TukKpN6cXKj1l6ucHlkN7HXwwnbBsjMacb/3ZD10oRIFL/V2l1BMed8BMA1UK/3W7R4SeUuWUTRdCGQU2OiqUSuExa3Gd083If+zDGzzSjBzzpoUhslaxFtiQGLRSecH61K/Xek2ozNibRsY933h5zKVzIBLF5I3Zs+YPN8kNN6b4drDH/3S9b2DkhpTorvDnFkTR77Mh99qFXK7AhCNpQ094IhVsP/F7Xd8kNNPBoy2IjSjkcrzbjw3B38z6QsKdaE5fb/tsq4nyOd2fyRxorqOucNTGNPdFXX+tvx4SwkGbjA2Yr7dcgTebbPKUN65nJm3BVrNN4dYQ4zZ7UAiHaoAjqqQUnm5OUymFk9biVj+YV+cdfM8BrPF8U0v17me8JMyqHOm7mymUNrpClU6YCZw2g9VusUY5EKpMabVbrcGM04imWCqXm1DqDNZQPRUqucC0BxUoFHjVqDvEQAnmwmes9e8maIWHTSegqrUWf2hRWiW8ZtJxYco67FZ52YaBPOTWm1K5FmNOCc/a7tUWnZTCUzXAz1uypBJK494jdO3AOi8LP8WQTGYIPxH+ZQO2mxXe6xJlC6Ar/KwGuKtVOZXQsw3fED4nw6+Uwucbn+8USvcj82nhm9imNw/grnr5Vap5wmRSjof8EXxY6Orab8SIG3V1hZvBEx5D7spziJqr+s3ylGpOkHajcIlnvBNDDjeFezIV5THDuNpz1suxu3X+nsqTMlld0Z+aJ21vS5Jll+/Kkw9nL52ecBMy33FNWnnbPBufrPslk3udvwz40BXuRkeOa7wV/CJB1Nz5axm2Jk87uHsgkzW7Dvf5tEi31+D0/alHcqxW4JYWR92OwsjAqoMDHnSF6wfJu8CPGgOVMGU00VyWePNI60Z72qqBWUZNtRjph+27IZMb8afmDKWwt9EKRSrldoS/1pgoZPY18F3hkJE+yeeNQpux34sKZdJyN7fk1JaWvApsbim8j6VdpY6TPmJGzJVjBd7uH0JXJbxirC4zGSZMN4xZKVMXZ6nMx00Lla5wyvaFbucC25xITRW+3JB0gS81QeqluaIh7q80e+r3z2IxPTHhoFDqmjKWLr+6lE+olEqVZ70+lWAuN25KVyn8xrrzyZcCma+nl6bvU9+qCuwXenrCRxszQ7hXCLO+urT/AOq47/SQSJriLMTDQni0Zf4mIfzWO5q9S5RefMJRYU9KZoGdKuFd6VeO64TDPt6SPkt8P84w7E6/8wGFPBn4pfsa84UbPO6OJN/z5b3jM2yfzbL02eSy5vtl3j8QvmW+gnSWoMMXjfv/AU871EFo9EIpAAAAAElFTkSuQmCC"); }
    .role-seg-fighter { --role-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAGYklEQVR42pXYW4wddR0H8M9ctpfdsiylhYaWQGsroFyKRi6hlHgBC6lE0YBPBgkPxFJsFC+QIDFYogkBX4jiizaBSFRotYGGirRCuSSgRSihQSEixRKhLbe2u2fOzN+H+Z+zc86eRZxJ9sz+5jff3/0yQ30kph6pzIc5MukAatL/z5mGB7JlDYGJ5ZZLGoDZQNWGndkUkUgM2+aYBjHFlS7t0SXDZpvj1eSdS10Zn+jQjrHdiKTzZIYvCU5tsOW4RrDFRQ2Ri02YsLjBd5EHBdfEJzp8pwgum1QkxSaVqyQ9bEuMC4Kt5kkM4TZBcBuGJObZKggmLOlRLfF1ld93aClO8L5gU5+hmeeNa3nHGFik0NZWWATGvKNl3POyPkduFBysLU2luMSIymctFKKIIFfaaaYhz3hbJnXQfTKZ+xyUyrztGUNm2qmUC9HyynE+pzJsda1wigdVxgU39vnyDGtd53yJNGp4s5u7icF51lrr9L7Y3SAYV9nSoY/ZJ2irvO7ILtTUdB2KwpOBHPWd1KjXVdqCfdG1VggqQVvw44YNZHKzndZhjLRMLpNKZHJ5oypyrI9IlWBFTV4jKASVtpazGnme4XalvXb4hTVWWthX63mjEDN8yoS2KiKuqWWe0ii4Ifc4xz6ZMlJPk1pggfPAe161yy5/s9se46oGfOkod5uh6rowIm+KRoX4u81w1Keu3cJh48ZNKCNXnf2v2OInLpPH5jHbn/qQNtUCdjTI9dUj5nX70NYGaFBpOeywiQZtBVLzPTIFZ0ftojk9vS9T+rQdrvaEIPEtH7PUEosd71ijhgxFzkpQys3BbH90hnYjQZIaOR/Yfksn2e5k/8AuuyJ9pvmOcaITLbXEBWYJEqmA2ZapBrX3HIeIdTh5lJ72qsSoMXu1wIQ99vgrmOtfPfzBuOEelFAj53hzoBU/V+BOX/SaN7zsn/5uj9ccUGhbbUQpa0AOGjoR+Y6YtZ2zFPzbkRInONgT4uA93wW/VCki7+dxtAOxuDpnIbijtmBn34CrpO72Dr5mWCEToqaZOf6COVZJprh16sjcWV8u1eqRXplwssQsL0cdJ7XaIJf4uJfirCgFFw2woK7lpR3fPRHbUyd/HwBfiQBtwf1OcqplyAwZMssytyoVShdjrrd6BLRVnqzRc1zdKJFS5UIp/hD9XAjuGRjEmwXBuZhrf5+A4Oo6SxOJEa+oojPagm+ASxpiW1632+Pud5f11rnciMyI990pk/iksgFfqrwyOfYzXNHNpErlkJPAT/vyq3l+D7lPRCdv7GkTheCKRleW4V5Bq2vDYxKZ2V7ohrlUxolcGNf2eCP3b+1RpCW4twnfmUTPRrZSIcTReI527O+9LS/Y72jkjvPrngoqBM8a7Z+MKRZ5sWvFbq85T4JbBrqpFKwE3xcEr3qpq/2LFg2q7BQL7RD82VlmmuujcSg+3VcNHS9/O7pnt4uNmOlsjwp2WDhN45BiluuN9m2mpzvckyMdAb9BYoVju/yjrjdrOng9m2nSXXFz3NiTIx0XvdSdDFmD31TfN1tsIpOoBKnK8a5VSUxMaegJFluMoTh6gio+HaYXIOpWD50xD0lU+PKUN4hEKXcmZlgtxJTsPP0/jxSjnlQ6Fosd7mvFnSjcDjb6kcGz8QPhHxVsBVdNicBkOYpr/nUfXkSKIzwqKH0H/G5gJVSCfebjLG3BNz+ciHrL2C5oKS3HUf4zoA46IlZizBsqwdr43jBwsa03zhRH2SaYEOwyhFXTwNdWrQMPxxq+Fon8A9Zjq7wgaCuUMYQ/i71pkIDSfWC9Sksp+GHPZpTULpnnFKlRp1nlfJQybaktSJwq7e6p/SmdWiBVeUYilar8wGp3ethexWTCbuzxaxnN/a0ZUomlnhsY5ELwnI9IJRZ4M+ZVnW0H7faUx11fG/JVE0otRbxdCDZFTyaY57EpIgrBY3GDTXG2AzFWZSOlf9VJyy841A1lIXjAjG6gMgzb3COiEGzu7uD13xXe7WJUJgQbOi8nOT7j3Rjc4KG+jpgis6ErohBskPXw5LjA+42hc1ez8eU411tC9+0g7Su+pLsBxo2t54NCB+NCh1RasYn0zLQcy+33lCMG9vN6MtwkCG6a5htFjosVglsGcWRYZv6046IWsc66aT+B1CIud8N0HOm0H3Z6OdL/h+O/dTpvQJQZXcgAAAAASUVORK5CYII="); }
    .role-seg-mage { --role-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAEA0lEQVR42sXXTahVVRQH8N/5eC+l8qMSgyCcKEUFUkgflOAkkAZFXxThIAozI5sVVIMGQdGwQRAEfUBgUdGjpCAisQZREIXYpDAVxRJTE18+7z177wZnv+O9Vr6X90J7weXsc/dee63/Wv+112F+o1KC2n8c1TzWFCpBcq1NDvtNYayjVbfWNjM2kD0Zq/qFXpEkG+bp8X9SX1hihyR5BxPGPEqFjyUzohsV47a/wv2SU5JfLUKhHGcMSnwp6El+s1A1Xg8KLHNUEgXJA2C9NePKpBKrBEkUJTO2mhJ9oxyPJyVWmJFEqZNG8vi5MPrfGLBHEiRJ1NcIgmMuV4wDpgrvZsVxyIcPxkO5CndJepJkeuiIO8dxRKGwwG7Jdg/a10UjiPZarBy97JVY7z68kC1vpS95eTyhbsctA6GOGabgxvHANGGhH7L9MR/Szr4zoRoVpgpPZ1AayWtez099yZOj+lDiCn8Koij43VIXO9LNp60cjREl3s/W9iUPg00Db7aO4kOJy82IokbyBSqVwg5JI4qmXXbuxa/C+pz30bSryIXuGn9mkJJbz+7DXGcvyNQqvG2XShRUdtqqyDm1YG4YzjYOdEH8sUvJQmkXklLhwOilIupJPu6YW+NTSU/0k/MU586FChslfU3OoVqd86jRkzw0GhPaPuI9SU8w43pwk1P5pt46/wyqBmSwShZKi/yYi/ZeF1piX57tdMHf1g7qmSP4dbatwtWOC/qSj2yT9AV/uLKD5/TqfwxkMukGlYTkpGN+dbyzKag17vWOJndFUVS72/tqjUqUwCKXWmKhAoXgaz1Fa8O6gWs9Cfb73LNWd4fUeDFb3nryPOoOoNWe8bn9uaTPyrrWwxoviU6JmbOzC6LP3JYTs1b4RNJocspWOWlv89nQnlbLKdFLbUoXSt8P3VdR0Ojn2ZSVmFC4xC+S5GcXKUxgpanujmuEM1qD72c9XKUnZOvjkA+NIDniHkxijaDvujy7xxFJGDJtVoKgZ1Ub6C1DyLVRON2qtNufwAI85tH89MTAv1Gjf0YEkmRLe8CbDjnoUJajQ5d76GzcnO1ufzd3/oUOzKRxtNNz0CFvtf3bUmVONAq1RVa41jo3Ox9BJYkqd5gyiZ7bfSgoFYIK077yhe/scVwzoCs6ejayrfCU3V0nFJywBqxxIr9Jkt2esmLuqjkopapj5mLPOdnBccByyx3oYDvpOYs7LrdFZljmLBetxbs6Bnzr2+55V/aoHuXaL0xime0ZqNR9kGy3DJPj+2qeytndMmZqvtvqOYp4sNYjkiazskBSKL2hVnjVDpVwrlbX+Uabpd9pmX23cS4j5+6P41kbhDgaRAmH7dT847pG7XBe9f+NvwAOuj7MXee/zwAAAABJRU5ErkJggg=="); }
    .role-seg-marksman { --role-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAEZklEQVR42s3YS6hVVRgH8N/e+5zrzeyiUKkIQqQYZKWDTGnWQHqgEx9JClFa2ayBEDQRGjRIKKMoiqiJAzFCCAoh6trISYQQ1cB8NQj1JpbezHvO2ftrcNbd3Zd6Dt2gdWCz9l7re/2/9T3W4X80ciy3PM36IOpn74te7JOqj5HJnXBCLpsNdsUUNgXWqFTWpLeJoot+IcqVYhJZhidlMk+mt39Eh/L6ImYW+oC95qBIKmQYdEoIpwzWInIFbvGq+3r3TZfZb773eA1OIbNeKJXC+gRKV+sn/OC8ObLefVPgLSEctKz+8pHQ1hY+rpnf7aAQ3kCjHwfzmEpb+MPLBjDkglCphAuG0LTHJaGt8ug0x98UpCHnhL+EswbwjNAR6fksBpwVrgnnDE1x/E1OUShcNpyIvtDCLYi0yiBaPk/7v3FZkVZ7Dim2CVeVtqGJT4WOjvBp+rJV6ZqwnX7CL8dcDFhhmeUGNTTl5vtZCD+bL9fUMGi5Fe4xkCh6OqYNbLJZPmV7hjVKpTXT8M7lNtvUy0kqsNLVZHR3LPaCD82VY489yM31oRcsnmDzdletvNlZyrHQSeFbq91qiad84qIQDifcu8/DQrjoE09Z4larfSuctPBGQGUKhWGhLVTOuCyE0DYm7MeAAbwpjGmn1cvOqBLVsGJampyE/n6hJZSJuKOjSkLCS+Cl9BaqdKoiUbSSGo3rob+lJg2VMrGOmllYb72ohU7f2Ra2zOSJXGapiymZzfyrhFGjaTbzr1S6aGmKpCn6H6mTwWS2bW1tZc24Esr0dbqojnBkqg0Fnp4ET6eeTxU3s/btCbC1hafHRWTpWC3wgztSJftHesic84UrTnvERpUcldxnvnaX2zxukahPTZe2woh7XUI1rv++pEVXhyu+sl9LqTRiBdgwKZtuACuMKJVa9vvKaA1SW9g3rmjXvaM1nsOetxS8L4wJI1ZpWD0BnMpqDauMpB3vg6WeM1z7bXTc1Q3sUwmVA9bWXmma74RwVXgHt08qOLfj7bR6wnzNGta1DiRu+8YjYp5fhaPW1fGcJ8+sdF5oOYbMd3VN/k4mc0xLOG9l2p3XMbzOUeFX87oyNwuvyCb0EBMT34/C7xbiUF0PDuFOl4SfpiW4bp+ReUXY3NX4A7vrhenRscC7wka8Vhf91/CE8J4FM+bPrqK7fSCj6YEZ+rjJJfVha7GjtmAHHvLwDYput625P+XfG1aibIL7xp287jrt5XXqfdZDG1NgiT+F8Kcl9bebdyd9NDLNuiYP9E7ca6cfcm2/gF+05L02Kb1fJXKcJj3z/+KGkzkOjveDbT8CwoPgwX56uH7a4S11HGztr9Xtxc7MIhdUSqXKBYumF8V/e4E9PKkeHJ7Nu2aBnRMKane2c/ZgyvFlalu6qaKj8mVvNvRq5phMpSOT6ahkxnoj7PVeVSk1MYY5KLvlfPYsGFI443WrrPK6MwpDs/kXQmavXeMFEPPssrefa2uvoyGX93Nd5W+5WCba0lBLawAAAABJRU5ErkJggg=="); }
    .role-seg-support { --role-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAFFUlEQVR42rXYX4gddxUH8M/M3HXdGMsSEy1LMW2KhO2GpfbNIA2IaaHVotA2D1JoY8GIfSn65kPoQ1+yFCqFEDCNz/aplqQ2hUZqKUo3+hCoSkmCxiRNmkpjAjG3d2aOD/O7s/fu3pveYPz94HLnzPmdf79zvr/zG5qRudUjW/3wgHWfsSAfmDc2aMYDgypybHfK1C3xJEPHKdsbyRly4Q8WfcVVmRi5KHzRQbepkbvi6c/gveiEb8jUFHhI6JlP3qwdHTwlBubuRF07cszrCQ+haAhH1cLjsrGLMstK3TRLy7KxxmQeF2pv9g2+U1clHGg0rhkFdghVa38l7LgB9wGh0nVnQ3pS+FQ4Y0Y2YpsLvCKUrjjiiCtK4ZWRCjKZGWeSxCcb4n6hpxQeGxHZHFv8Rym8CF4UStdsGbFnHTwmlHrC/oZ4VChVwrJsjVUdPC/01O5VKNyr1hOeH2FOIbMsVErhaENcTlEtk1OdVVk960O18BZyOd4Sah+aXVU5nRTwMkn8U+Nipkwaa/vMKYccz1Sug6qlNf+uq4bE50pz9qlTRMr+i+ND2XFMkexcseq5FNWtYGvaseeGvM3lCseGsm25yYNpl73jPVdtFrb4qldlA3UazvuRXMcF72CPbwulH/sXiStH7ZDvq4Tf+a3jTjrivb7+BUtOq4We8HJClJU8ekMIJ+RyJ4TwxkAONZwvp9W105YsrMR4zrtDMNATDtuIjnygNkthm23pX7/ucx1sdDitXJnvmpOR+YJzal31kIqTHmwTj/XOqoW99gq1s9bTJvWDTg6Jb6SdtU7WuPdToatUKpOaUggH3d2G4AWhct55lfBCG5i7HRxY0Z+l8LOGJ5PZ4NLQ6yajauGqJVMKLLbKa6VFFKYsuSrUbebUKpVS5SMb+oBY4Am/d8zrXvXBqt0ImxPP20JPT3g7UTYPcK2ePxnEqn65fN0vnFMP7EapshPTbY32630aO1OBrsxz/uxv/uE3imGcKnzea63QsnW5JzyLKcymQF4ymyjPDthf6en5wM99zW2jj5Rdap+u2oOe8Ct0FHhJCC+h0MGhNvOrAS8uuWulRvrFVMv92nq/dMpfcY8tico8qoSTDThmMhXuQa6Wy5z2F2x1l73+rhhAriHkX0zNy4wnXEzp9nEbkt3tedyE7OPEccEPzKR1izdqOfK0H0WCjwtCqXYfPtce/E+lp/vUSfzC0Lp8rUgDgcpUKkx738OuC5n5NR1ThnmZcN3D3jeNSiWTq8croE7omOm6ww+TqMWRCvrUp92hm97HsPhxvU1zjr1pXqiwjVUL60QN0/bYYbt/j27ERvc2hbDLvG4q9gXrVs4nUFpnIaV317xdYmQTM0ZBA2KlIrWCm3xpjQcbbBIyFKoEihMrCBzXUav0ZP7p4qpgdlx0RqanUiscb8+2CTvk3JQjLXQ8krBnpQ6m8UiLQ4dNjWvpO2M96PmePb7lkkP+mCq3anuKSuY137TbJscc0BvTa094Q8mTKc8I4Zn0lI+7z0y2ySHTUego1Ckxd5J+G0qROG7a+tH+bPSJED6xcfK7UD6hggL3m1WpzI5t3f8HBYHvtoj/nZtLyskC1HT9lSrdJG7p1bcJULRdRbh/0iDlE3vwaAI+KuHRST3IJ/ai216vMpnurf8scLvL6jQvu/1Wf34osE/o6gpLk6fppCOXmXNNCNfMjb0lj7RssjooXBG+7CP7vZ7g4//2geYmov9felV3ZYNqp6wAAAAASUVORK5CYII="); }
    .role-seg-tank { --role-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAFvUlEQVR42q3XYYxVxRUH8N+977HLbgOkgFjQpS40QFJUaCmxISamX7QtbUraJqStpKYxTSRtJG1aP/HFxNQEjbFpQvRDU02bkNqmYgwVsEYMacWuUdwaMKi7QAkUIqCysOy7d/rhzc67b3m77jad+fLenTP//zlnzjlzhqlHrj7lel0+NUA2xUouKJH7vC+61Wddpxcjzhr2pgH/iuuZUjDtkampxd+3eMhhY0KHOeawh9wSJWtqU6jbwSUL3WOf0QrgRSccccQJFytfR+1zj4WTuSxrcwkFuN33fNOSuPKBV/zN697zoSuYba5lvuArbjc/ypyy2x+8Em0x0WUtvW+yzaGkXeGg+xJRU8PqoS9xn4OKJH/INjdda0vTih4b7XIhCR/3mPUVBZrQuz2HWeoVgPUeczztu2CXjXpayBlWe9CRJHLZ8zabF0XqUYEcjwqCR+O/6uo8mz3vcsI44kGrxymerBg5aLtVKS7yGFO5XO7hJPWwXC6LsZanmFtlu8GKg59sfn5BcMVZT7tLV9qSRQ3HxzoH7LXfi/Y6YF1SIkuh3bSqy12edtYVwQtNoUeUgjsnHM74wXf5oQ1qutuir1vNzXFPrUOw3CkoPdL05bAMvWq6ZRpKuZpSw3W2GfBbn1EYbSMYVZjrr3aYo0h2lBoy3Wp6kRmmjvfBSoVMQKbECj9yt8UorHbWLGVbYI9Zg5/5qvvtQy3mUFAorCQhW6sQ7NSky7DWUy4JgkYlAK6dZSwivzav4qo6dgoKa5sfrndBsAe5HCuMxFpTJqBSqWibZVwtlIKjvl6xjj2CC65vfpjlHcGgPGpxq7ICPp3ZtOM3emQy5AYF75g1zveS4IyF8V+Xd4UpXXPtLDQEX8MsLHRG8BLyplOOY4FF0cCr3mQm9T06d9TxuG+RBRE1b8b8u6hZmmrqP2ZMUMoc83YM16VqETUm1fuxkoqBeqgtfaZHwAFl3HVTCzUXMAT6k+igC5Fq+rcgL6Z/TaQhhCbBKZexDEGQOeftSCUmT+fZWq+55O/polmGy/7dIviPc+iLoDW81gaQTTJbDgped0oW24Qbcc5ZhLog85Ez+izRayRuOyRTJKAxY9e0J0FNVwQfM9uBWC6CXktwxkcyoY5c4bh1FlhkKFaig0b0Ru1K93tOV6w1rVr0Zb+PuV/DbgSZYJGF40GqGK8+Q+hxg6Go+bANvuFLbnajug+c6HCwy9Rx0qDX7I0213CDnoiYSfX7PWSWOiiLmrzhDfT4nPUOd4ycIT/2T0ddiucUorJLZRExVr6QMmF5xcO5XHDZW97yqdT3VMd5T6QsDhUHLk9ZEFoEJzXU9bdFRhkTsdtB/cq2Yw4yH1rjfJJsRVw/Gk62E5xy0QJ9bcE5ngGFueZ2rD+FckK7GAR9uOhUEzlP5p5WWmWeokM/ParhaqW+FsY0XOnQaxfmWaV02vnqQg0vCwoDllOhyNDl9CT32afbms86lhlQCF5ur2a5zG1OCoKTNrRRkPuOe23xRKr7u2xxrx/EJqcFvyFh3Bbrcts1129AUBqxudLxtMYmQcOYYGuHhp/NRpSCAf1c+zCpY45nBQ3BA+luaLpwtrq7E8Ev1M1OLshleCDufNacCR5oOwkej3fsTrUJncL3E8HPKxBNqZ1x1+MTWrEOFx/boi57zE9AkxHUMd+euGNbwpji4qhjk48FwWErIkhngjpWOiwIPraJ1G1/wsuRdYYFwWl3pGfHRII67oghPGzdZJ6fjKLPq4LSFVvQJWsjyHRji1Gl4FV9M4EfP6Zez8Sj2w6VKPol2B5Xn9E74yYhxfGOCPI7fDsR/ARPxZUdFekZjmYebFUqBH/205TJv/Kn2JVuTXngf6OoY2N8F1+tVKHmu3njdOPmkw58jWOChoZCEd10zJqZHuxUFIvtb6uk+y2eHnw2zZgq8F3fshJH/cUfK2+a/8vIp/Gl4/gvtmjBhzgOIZsAAAAASUVORK5CYII="); }

    /* Shared content rail: chrome + grid align to one max-width on wide
       monitors so the brand and header actions don't drift to far corners. */
    .site-main { max-width: var(--container); margin: 0 auto; padding: 24px 24px 64px; }
    .view { display: none; }
    .view.is-active { display: block; view-transition-name: view; }
    /* Tab switches cross-fade + slide the active panel via the View Transitions
       API (see setActiveView).  Root is pinned (animation:none) so only the named
       `view` (panel) and `tab-ind` (underline) groups morph -- the fixed header
       never flickers and the scrollTo during the swap can't drag the page.  The
       old/new panels keep their own heights (height:auto) so a tall->short swap
       cross-fades instead of squashing.  No-API browsers fall back to an instant
       swap. */
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    ::view-transition-group(view) { animation-duration: var(--dur-3); }
    ::view-transition-old(view), ::view-transition-new(view) { height: auto; }
    ::view-transition-old(view) { animation: vt-out 90ms var(--ease) both; }
    ::view-transition-new(view) { animation: vt-in var(--dur-3) var(--ease) 60ms both; }
    @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
    @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
    .view-narrow { max-width: 920px; margin: 0 auto; }

    /* ===== Draft tab: ally rail | champion pool | enemy rail (draftgap-style).
       Rails are sticky team columns; the middle pool reuses the home board's
       icon-tile language (square thumb + WR pill, sorted by Bayes WR desc).
       Rails use a neutral (achromatic) chrome; --pick-color / --pool-ring mark
       picks without blue/red team paint. */
    /* Full-bleed draft rails. Avoid bare 100vw without overflow-x:hidden —
       on Windows 100vw includes the scrollbar gutter and creates a fake
       horizontal scrollbar even when nothing is off-screen.
       Shell is locked to one viewport so both 5-slot rails always fit;
       the middle column scrolls if the pool/analysis needs more room. */
    body:has(.view-draft.is-active) {
        overflow-x: hidden;
        overflow-y: hidden;
    }
    .view-draft.is-active {
        /* Break out of .site-main padding + max-width centering to viewport edges. */
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        /* Cancel site-main vertical padding so header + rails ≈ one screen
           (fixed 100vh side height was stacking under the header → page scroll). */
        margin-top: -24px;
        margin-bottom: -64px;
        padding: 0;
        height: calc(100dvh - var(--header-h, 56px));
        min-height: 0;
        max-height: calc(100dvh - var(--header-h, 56px));
        overflow: hidden;
    }
    .draft-shell {
        display: grid;
        grid-template-columns: minmax(200px, 17vw) minmax(0, 1fr) minmax(200px, 17vw);
        gap: 0;
        align-items: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        --pick-color: rgba(232, 234, 237, 0.92);
    }
    .draft-shell.is-target-enemy { --pick-color: rgba(180, 186, 194, 0.95); }
    .draft-mode-tabs {
        display: flex;
        align-items: center;
        gap: 22px;
        min-height: 48px;
        flex: none;
        /* Spacing below comes from .draft-main gap — avoid double margin. */
        margin-bottom: 0;
        border-bottom: 1px solid var(--border);
    }
    .draft-mode-tab {
        position: relative;
        min-height: 48px;
        padding: 0 2px;
        border: 0;
        background: transparent;
        color: var(--text-muted);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }
    .draft-mode-tab::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: transparent;
    }
    .draft-mode-tab:hover { color: var(--text); }
    .draft-mode-tab.is-active { color: var(--text); }
    .draft-mode-tab.is-active::after { background: var(--accent); }
    .draft-pane[hidden] { display: none !important; }
    .draft-pane {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }
    .draft-analysis-intro {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin: 4px 0 14px;
    }
    .draft-analysis-intro h2 {
        margin: 3px 0 0;
        font-size: 20px;
        letter-spacing: -0.02em;
    }
    .draft-analysis-kicker {
        color: var(--accent-soft);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
    .draft-analysis-intro p {
        max-width: 46ch;
        margin: 0;
        color: var(--text-muted);
        font-size: 11px;
        line-height: 1.6;
        text-align: right;
    }
    .draft-metrics {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1px;
        margin-bottom: 18px;
        background: var(--border);
        border: 1px solid var(--border);
    }
    .draft-metrics:empty { display: none; }
    .draft-metric {
        min-width: 0;
        min-height: 136px;
        padding: 18px 20px 16px;
        background: var(--surface, #11151d);
    }
    .draft-metric-label,
    .draft-metric-note {
        display: block;
    }
    .draft-metric-label {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
    }
    .draft-metric-value {
        display: block;
        margin-top: 9px;
        color: var(--text);
        font-size: clamp(32px, 4vw, 44px);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.04em;
        line-height: 1;
    }
    .draft-metric.is-good .draft-metric-value { color: #69d982; }
    .draft-metric.is-bad .draft-metric-value { color: #f0838d; }
    .draft-metric.is-empty .draft-metric-value { color: var(--text-dim); }
    .draft-metric-note {
        margin-top: 8px;
        overflow: hidden;
        color: var(--text-dim);
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Broadcast-style lock-in: flush edges, fill shell height.
       Shell is viewport-locked so all 5 slots always share the rail — no more
       clipping the last pick when the middle column is taller. */
    .draft-side {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        max-height: none;
        background: var(--surface-sunken);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        min-width: 0;
        overflow: hidden;
        /* Neutral chrome only — no blue/red team paint. */
        --side-color: var(--text);
    }
    .draft-side.is-enemy {
        --side-color: var(--text);
    }
    .draft-side.is-ally,
    .draft-side.is-enemy {
        box-shadow: none;
    }
    .draft-side.is-targeting .draft-side-select {
        background: var(--surface-2);
    }
    .draft-side-select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-height: 52px;
        padding: 14px 16px;
        margin: 0;
        border: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        background: var(--surface);
        color: inherit;
        font: inherit;
        cursor: pointer;
        text-align: left;
        flex: none;
    }
    .draft-side.is-enemy .draft-side-select {
        text-align: right;
        flex-direction: row-reverse;
    }
    .draft-side-select:hover {
        background: var(--surface-2);
    }
    .draft-side-select.is-active {
        background: var(--surface-2);
    }
    .draft-side-select:focus-visible,
    .draft-slot:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }
    .draft-side-label {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .draft-side-wr {
        font-size: 22px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
        line-height: 1;
        color: var(--text);
        text-shadow: none;
    }
    .draft-slots {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0;
        min-height: 0;
        overflow: hidden;
    }
    .draft-slot {
        position: relative;
        display: block;
        flex: 1 1 0;
        width: 100%;
        /* Allow equal shrink so 5 picks always fit the rail height. */
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        cursor: pointer;
        min-width: 0;
        overflow: hidden;
        text-align: left;
    }
    .draft-slot:last-child { border-bottom: 0; }
    .draft-slot.is-empty {
        background: var(--surface-sunken);
        color: var(--text-muted);
    }
    .draft-side.is-enemy .draft-slot.is-empty {
        background: var(--surface-sunken);
    }
    /*
     * Lock-in splash crop (broadcast bars)
     * ------------------------------------
     * Landscape splash + cover fill, then ~1.38× zoom into the face band so
     * the portrait reads large (previous height-first crop was too wide/small).
     * transform-origin upper-left keeps the head in frame while zooming.
     * Both sides use natural art orientation (no enemy flip).
     * is-source-mirrored = splash actually faces LEFT (crop editor): flip once
     * so portrait matches the default right-facing crop intent.
     * Crop vars: --slot-art-x / --slot-art-y / --slot-art-zoom
     */
    .draft-slot-art-wrap {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        background: #0c0e14;
    }
    /* Left-facing source (editor toggle): flip so portrait faces right. */
    .draft-slot-art-wrap.is-source-mirrored {
        transform: scaleX(-1);
    }
    .draft-slot.is-filled:hover .draft-slot-art {
        filter: brightness(1.08);
    }
    .draft-slot-art {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--slot-art-x, 22%) var(--slot-art-y, 20%);
        transform: scale(var(--slot-art-zoom, 1.38));
        transform-origin: var(--slot-art-x, 22%) var(--slot-art-y, 20%);
        pointer-events: none;
        transition: filter 160ms var(--ease-out, ease);
        user-select: none;
        -webkit-user-drag: none;
    }
    /* Square icon fallback if splash 404s — no extra zoom. */
    .draft-slot-art.is-icon-fallback {
        object-position: center 18%;
        transform: none;
        transform-origin: center center;
    }
    .draft-slot-shade {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.28) 42%,
            rgba(0, 0, 0, 0.08) 100%
        );
    }
    .draft-side.is-enemy .draft-slot-shade {
        background: linear-gradient(
            270deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.28) 42%,
            rgba(0, 0, 0, 0.08) 100%
        );
    }
    .draft-slot.is-empty .draft-slot-shade {
        background: transparent;
    }
    .draft-slot-ph {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 800;
        color: var(--text-muted);
        background: var(--surface-2);
        border: 1px solid var(--border);
    }
    .draft-side.is-enemy .draft-slot-ph {
        left: auto;
        right: 12px;
    }
    .draft-slot-name {
        position: absolute;
        left: 12px;
        right: 28px;
        bottom: 8px;
        z-index: 1;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
        color: #fff;
    }
    .draft-side.is-enemy .draft-slot-name {
        left: 28px;
        right: 12px;
        text-align: right;
    }
    /* Empty + filled share bottom-left name baseline (enemy: bottom-right). */
    .draft-slot.is-empty .draft-slot-name {
        bottom: 8px;
        top: auto;
        transform: none;
        left: 12px;
        right: 28px;
        color: var(--text-muted);
        text-shadow: none;
        font-weight: 600;
    }
    .draft-side.is-enemy .draft-slot.is-empty .draft-slot-name {
        left: 28px;
        right: 12px;
        text-align: right;
    }
    .draft-slot-x {
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 2;
        font-size: 16px;
        line-height: 1;
        color: #fff;
        opacity: 0;
        transition: opacity .12s;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
    }
    .draft-side.is-enemy .draft-slot-x {
        right: auto;
        left: 8px;
    }
    .draft-slot.is-filled:hover .draft-slot-x { opacity: 1; }
    .draft-main {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
        min-height: 0;
        height: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Keep pool/analysis readable while side rails hug the screen edges. */
        padding: 0 clamp(12px, 1.6vw, 28px);
    }
    .draft-vsbar {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 10px;
        padding: 7px 12px;
        border-radius: 12px;
        background: var(--surface, #11151d);
        border: 1px solid var(--border, #30363d);
    }
    .draft-vsbar[hidden] { display: none; }
    .draft-vs-label {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        color: var(--text-muted, #9aa0a6);
    }
    .draft-vs-wr {
        font-size: 20px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }
    .draft-vs-wr.is-good { color: #7ddc8a; }
    .draft-vs-wr.is-bad { color: #ff9aa5; }
    .draft-vs-wr.is-even { color: var(--text, #e6e8eb); }
    .draft-vs-sub {
        font-size: 11px;
        color: var(--text-muted, #9aa0a6);
    }
    .draft-picker-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        /* Equal air above/below the control row (paired with .draft-pane gap). */
        padding: 0;
        margin: 0;
    }
    .draft-search-wrap {
        position: relative;
        flex: 1 1 190px;
        min-width: 150px;
    }
    .draft-search-wrap svg {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
        pointer-events: none;
    }
    .draft-search-wrap:focus-within svg { color: var(--text-muted, #9aa0a6); }
    .draft-search { width: 100%; max-width: none; }
    .draft-role-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
    }
    .draft-role-chips .chip {
        padding: 4px 10px;
        font-size: 11px;
    }
    /* Always site accent gold when active (not Fighter orange / role tints). */
    .draft-role-chips .chip.active {
        background: var(--accent, #f5c518);
        color: var(--accent-on, #14110a);
        border-color: var(--accent, #f5c518);
        font-weight: 700;
    }
    .draft-pool {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 8px;
        /* Pack rows to the top — free height was stretching gaps between rows. */
        align-content: start;
        justify-content: start;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        /* Vertical scroll only — horizontal bar was a subpixel / badge leak fake. */
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        /* Horizontal only — vertical air comes from .draft-pane gap (symmetric). */
        padding: 0 2px;
        min-width: 0;
        background: color-mix(in srgb, var(--surface, #11151d) 58%, transparent);
    }
    .draft-pool .panel-empty { grid-column: 1 / -1; }
    /* Zero-size full-width breaker: next tier starts on a new grid row. */
    .draft-tier-break {
        grid-column: 1 / -1;
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        pointer-events: none;
    }
    .draft-champ {
        position: relative;
        aspect-ratio: 1 / 1;
        min-width: 0;
        padding: 0;
        border-radius: 8px;
        /* Match home tier-list: solid tier colour frame (OP/T1 use gradient below). */
        border: 2px solid var(--tier-color, #555);
        background: var(--chip-bg, #1a1d21);
        cursor: pointer;
        transition: transform .08s, border-color .08s, box-shadow .08s, filter .08s;
    }
    /* OP / T1: same prismatic / premium frames as home .champ cards. */
    .draft-champ[data-tier="OP"] {
        border-color: transparent;
        background:
            linear-gradient(#1f2530, #1f2530) padding-box,
            var(--tier-op-frame) border-box;
        background-size: auto, 220% 220%;
        animation: prismShift 6s ease-in-out infinite;
        box-shadow: 0 0 8px rgba(220,180,255,0.45);
    }
    .draft-champ[data-tier="T1"] {
        border-color: transparent;
        background:
            linear-gradient(#1f2530, #1f2530) padding-box,
            linear-gradient(135deg,
                #ffb380 0%,
                #ff5a3c 32%,
                #c8262c 62%,
                #ff8050 100%) border-box;
        background-size: auto, 220% 220%;
        animation: prismShift 9s ease-in-out infinite;
        box-shadow: 0 0 6px rgba(255,90,60,0.42);
    }
    .draft-champ img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 6px;
        transition: filter .12s ease;
    }
    /* Selected in either roster: grey out the portrait (tier frame stays). */
    .draft-champ.is-ally img,
    .draft-champ.is-enemy img {
        filter: grayscale(1) brightness(0.72);
        opacity: 0.88;
    }
    .draft-champ-ph {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 6px;
        background: color-mix(in srgb, var(--text, #e6e8eb) 6%, transparent);
    }
    .draft-champ .wr {
        position: absolute;
        left: 2px;
        bottom: 2px;
        font-size: 10px;
        font-weight: 700;
        font-variant-numeric: tabular-nums lining-nums;
        padding: 1px 4px;
        border-radius: 6px;
        color: #e6e8eb;
        background: rgba(14,17,22,0.9);
        pointer-events: none;
    }
    .draft-champ .name {
        position: absolute;
        left: 0; right: 0; top: 0;
        padding: 2px 4px;
        font-size: 10px;
        text-align: center;
        background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0));
        color: #e6e8eb;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s;
    }
    @media (hover: hover) {
        .draft-champ:hover {
            transform: translateY(-2px);
            filter: brightness(1.06);
            z-index: 1;
        }
        .draft-champ:hover:not([data-tier="OP"]):not([data-tier="T1"]) {
            border-color: color-mix(in srgb, var(--tier-color, #555) 70%, #fff);
            box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--tier-color, #555) 55%, transparent);
        }
        .draft-champ:hover .name { opacity: 1; }
    }
    /* Selected: keep tier frame; mark with corner dot + soft outer ring only. */
    .draft-champ.is-ally,
    .draft-champ.is-enemy {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--pool-ring, rgba(232, 234, 237, 0.9)) 55%, transparent),
            0 0 10px color-mix(in srgb, var(--pool-ring, rgba(232, 234, 237, 0.9)) 28%, transparent);
    }
    .draft-champ[data-tier="OP"].is-ally,
    .draft-champ[data-tier="OP"].is-enemy {
        box-shadow:
            0 0 8px rgba(220,180,255,0.45),
            0 0 0 1px color-mix(in srgb, var(--pool-ring, rgba(232, 234, 237, 0.9)) 55%, transparent);
    }
    .draft-champ[data-tier="T1"].is-ally,
    .draft-champ[data-tier="T1"].is-enemy {
        box-shadow:
            0 0 6px rgba(255,90,60,0.42),
            0 0 0 1px color-mix(in srgb, var(--pool-ring, rgba(232, 234, 237, 0.9)) 55%, transparent);
    }
    .draft-champ.is-ally { --pool-ring: rgba(240, 242, 245, 0.92); }
    .draft-champ.is-enemy { --pool-ring: rgba(160, 166, 176, 0.95); }
    .draft-champ.is-ally::after,
    .draft-champ.is-enemy::after {
        content: '';
        position: absolute;
        /* Inset — negative offsets used to poke past the cell and force a
           phantom horizontal scrollbar on the pool at some zoom/widths. */
        top: 3px;
        right: 3px;
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: var(--pool-ring, rgba(232, 234, 237, 0.92));
        border: 2px solid var(--surface, #11151d);
        z-index: 2;
        pointer-events: none;
    }
    .draft-result {
        min-width: 0;
        background: transparent;
        border: 0;
        padding: 0;
    }
    /* The team-eval component was sized for the narrow side card; in the wide
       draft panel give it room deliberately: radar pinned left at fixed width,
       dim bars run 2-up beside it, tempo track capped so the marker travel
       stays readable. */
    @media (min-width: 901px) {
        .draft-result .team-dims-split {
            grid-template-columns: 200px minmax(0, 1fr);
            gap: 4px 24px;
        }
        .draft-result .team-eval-radar .comp-radar { max-height: 195px; }
        .draft-result .team-comp-list {
            grid-template-columns: 1fr 1fr;
            gap: 8px 28px;
        }
        .draft-result .team-comp-row {
            font-size: 11px;
            grid-template-columns: 40px 1fr 26px 34px;
            gap: 8px;
        }
        .draft-result .team-comp-tag { font-size: 11px; text-align: right; }
        .draft-result .team-tempo-row { max-width: 660px; }
    }
    .draft-eval-block + .draft-eval-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #30363d); }
    .draft-eval-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted, #9aa0a6);
        margin-bottom: 8px;
    }
    .draft-eval-block.is-enemy .draft-eval-label { color: #ff9aa5; }

    /* ---- Draft Analysis: dual-team radar overlay + dual bar compare ---- */
    .draft-matchup {
        display: grid;
        gap: 18px;
        min-width: 0;
    }
    @media (min-width: 901px) {
        .draft-matchup {
            grid-template-columns: minmax(220px, 0.95fr) minmax(0, 1.15fr);
            gap: 20px 28px;
            align-items: start;
        }
    }
    .draft-matchup-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .draft-matchup-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted, #9aa0a6);
    }
    .draft-matchup-legend {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-dim, #6a6f77);
    }
    .draft-leg {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .draft-leg i {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }
    .draft-leg.is-ally { color: var(--accent-soft, #f5d780); }
    .draft-leg.is-ally i {
        background: var(--accent, #f5c518);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #f5c518) 40%, transparent);
    }
    .draft-leg.is-enemy { color: #b0b5bd; }
    .draft-leg.is-enemy i {
        background: linear-gradient(135deg, #c4c8d0, #8b919c);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    }
    .draft-matchup-svg {
        min-width: 0;
    }
    .draft-matchup-svg .comp-radar {
        display: block;
        width: 100%;
        height: auto;
        max-height: 280px;
        margin: 0 auto;
    }
    .draft-cmp-list {
        display: grid;
        gap: 10px;
        min-width: 0;
    }
    .draft-cmp-row {
        display: grid;
        grid-template-columns: minmax(64px, 88px) minmax(0, 1fr);
        gap: 6px 12px;
        align-items: center;
    }
    .draft-cmp-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted, #9aa0a6);
        line-height: 1.25;
    }
    .draft-cmp-bars {
        display: grid;
        gap: 5px;
        min-width: 0;
    }
    /* Value sits outside the bar (right), not overlaid on the fill. */
    .draft-cmp-line {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 3.6em;
        gap: 10px;
        align-items: center;
        min-width: 0;
    }
    .draft-cmp-track {
        position: relative;
        height: 14px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--text, #e6e8eb) 6%, transparent);
        overflow: hidden;
        min-width: 0;
    }
    .draft-cmp-fill {
        display: block;
        height: 100%;
        border-radius: 4px;
        min-width: 0;
        transition: width 120ms var(--ease-out, ease);
    }
    .draft-cmp-line.is-ally .draft-cmp-fill {
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--accent, #f5c518) 42%, transparent),
            var(--accent, #f5c518)
        );
    }
    .draft-cmp-line.is-enemy .draft-cmp-fill {
        background: linear-gradient(90deg, rgba(140, 146, 156, 0.38), rgba(196, 200, 208, 0.92));
    }
    .draft-cmp-val {
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        text-align: right;
        color: var(--text-muted, #9aa0a6);
        white-space: nowrap;
    }
    .draft-cmp-line.is-ally .draft-cmp-val {
        color: var(--accent-soft, #f5d780);
    }
    .draft-cmp-line.is-enemy .draft-cmp-val {
        color: #b0b5bd;
    }
    [data-theme="light"] .draft-cmp-line.is-ally .draft-cmp-val {
        color: var(--accent-soft, #9a7100);
    }
    [data-theme="light"] .draft-cmp-track {
        background: color-mix(in srgb, var(--text) 8%, transparent);
    }
    @media (max-width: 520px) {
        .draft-cmp-row {
            grid-template-columns: 56px minmax(0, 1fr);
            gap: 6px 8px;
        }
        .draft-cmp-line { grid-template-columns: minmax(0, 1fr) 3.2em; gap: 8px; }
        .draft-cmp-track { height: 12px; }
        .draft-cmp-val { font-size: 10px; }
        .draft-matchup-svg .comp-radar { max-height: 240px; }
    }
    .draft-rec-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .draft-rec-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 6px 8px;
        border: 0;
        border-radius: 8px;
        background: color-mix(in srgb, var(--text, #e6e8eb) 3%, transparent);
        color: inherit;
        font: inherit;
        cursor: pointer;
        text-align: left;
    }
    .draft-rec-row:hover { background: color-mix(in srgb, var(--text, #e6e8eb) 7%, transparent); }
    .draft-rec-row img {
        width: 26px;
        height: 26px;
        border-radius: 6px;
    }
    @media (max-width: 900px) {
        .view-draft.is-active {
            width: calc(100% + 32px);
            max-width: none;
            margin-left: -16px;
            margin-right: -16px;
            margin-top: -16px;
            margin-bottom: -48px;
            padding: 0;
            min-height: 0;
            overflow: hidden;
        }
        body:has(.view-draft.is-active) {
            overflow-y: auto;
        }
        .view-draft.is-active {
            height: auto;
            max-height: none;
            min-height: 0;
            overflow: visible;
        }
        .draft-shell {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 0;
            height: auto;
            max-height: none;
            min-height: 0;
            overflow: visible;
        }
        .draft-side.is-ally { order: 1; }
        .draft-side.is-enemy { order: 2; }
        .draft-main {
            order: 3;
            grid-column: 1 / -1;
            height: auto;
            max-height: none;
            overflow: visible;
            padding: 12px 14px 16px;
        }
        .draft-side {
            position: static;
            min-height: 260px;
            max-height: none;
            height: auto;
            border-radius: 0;
            border: 0;
            box-shadow: none;
            overflow: hidden;
        }
        .draft-side-select { min-height: 44px; padding: 11px 12px; }
        .draft-side-label { font-size: 13px; }
        .draft-side-wr { font-size: 18px; }
        .draft-slot { min-height: 52px; }
        .draft-pane {
            overflow: visible;
            flex: none;
        }
        .draft-pool {
            grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
            gap: 6px;
            flex: none;
            max-height: 46vh;
            overflow-x: hidden;
            overflow-y: auto;
            min-width: 0;
        }
        .draft-analysis-intro {
            align-items: flex-start;
            flex-direction: column;
            gap: 8px;
        }
        .draft-analysis-intro p { max-width: none; text-align: left; }
        .draft-metrics { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 700px) {
        .view-draft.is-active {
            width: calc(100% + 24px);
            margin-left: -12px;
            margin-right: -12px;
        }
    }
    @media (max-width: 520px) {
        .draft-mode-tabs { gap: 16px; }
        .draft-main { padding: 10px 10px 0; }
        .draft-metric { min-height: 112px; padding: 13px 12px; }
        .draft-metric-value { font-size: 32px; }
        .draft-metric-note { font-size: 9px; }
    }
    /* The 專欄 view is wider than the other narrow views so the card grid can
       run 3-up like an editorial guide index; the reader self-caps at 720. */
    .view-column-host { max-width: 1180px; margin: 0 auto; }
    .section-head { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
    .section-sub { margin: 0 0 22px; color: var(--text-muted); font-size: 14px; }

    /* Augment tier — placeholder until the global augment rollup ships. */
    .coming-soon { text-align: center; padding: 96px 20px; }
    .coming-soon-mark {
        width: 64px; height: 64px; margin: 0 auto 18px;
        border-radius: var(--r-lg); display: grid; place-items: center;
        background: color-mix(in srgb, var(--accent) 14%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
        color: var(--accent);
        filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 38%, transparent));
        animation: csBreathe 3.2s var(--ease) infinite;
    }
    @keyframes csBreathe {
        0%, 100% { transform: scale(1); opacity: 0.9; }
        50% { transform: scale(1.06); opacity: 1; }
    }
    .coming-soon h2 { margin: 0 0 8px; font-size: 22px; }
    .coming-soon p { margin: 0 auto; max-width: 440px; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
    .coming-soon .cs-cta {
        display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
        padding: 9px 18px; border: 1px solid var(--border); border-radius: var(--r-sm);
        background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
        transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
    }
    .coming-soon .cs-cta:hover { background: var(--surface-2); border-color: var(--border-strong); }
    .coming-soon .cs-cta:active { transform: scale(0.97); }

    /* Column — editorial card grid (auto-generated cover on top, text below)
       + single-article reader.  Mirrors the layout of guide sites like
       TFTAcademy: a 16:9 cover image leads each card, then kicker/title/
       summary/date.  Covers are vector SVG built by articleCover(). */
    .article-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 24px 20px;
    }
    .article-card {
        text-align: left; cursor: pointer;
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
        padding: 0; color: var(--text); font: inherit;
        display: flex; flex-direction: column; overflow: hidden;
    }
    .article-card:hover { border-color: var(--accent-soft); transform: translateY(-3px); box-shadow: var(--shadow); }
    .article-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b0e14; }
    .article-cover .cover-svg { display: block; width: 100%; height: 100%; }
    .article-card-body {
        display: flex; flex-direction: column; gap: 7px;
        padding: 14px 16px 16px; flex: 1 1 auto;
        border-top: 1px solid var(--border);
    }
    .article-kicker { font-size: 11px; font-weight: 700; color: var(--accent-soft); letter-spacing: 0.06em; text-transform: uppercase; }
    .article-card h3 { margin: 0; font-size: 16px; line-height: 1.4; }
    .article-card p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
    .article-meta { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--text-dim); }
    /* Inline SVG text doesn't inherit the page font on every engine; force it
       (same fix the scatter chart needs). */
    .cover-svg text { font-family: inherit; }
    /* Reader hero banner reuses the same generated cover, anchored bottom-left
       (xMinYMax) so the headline survives the max-height crop. */
    .article-hero {
        width: 100%; aspect-ratio: 16 / 9; max-height: 300px;
        border-radius: var(--r-lg); overflow: hidden; margin: 0 0 24px;
        background: #0b0e14; border: 1px solid var(--border);
    }
    .article-hero .cover-svg { display: block; width: 100%; height: 100%; }
    /* Hand-made image covers fill the same 16:9 slot; the banner is already
       16:9 so object-fit:cover crops nothing. */
    .article-cover .cover-img,
    .article-hero .cover-img { display: block; width: 100%; height: 100%; object-fit: cover; }
    /* A designed banner is a complete composition — show it whole (drop the
       generated-cover crop cap). */
    .article-hero--img { max-height: none; }
    .article-reader { max-width: 720px; margin: 0 auto; }
    /* Back on the left, copy-link on the right — one row above the hero. */
    .article-toolbar {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin-bottom: 18px;
    }
    .article-back {
        display: inline-flex; align-items: center; gap: 6px;
        background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .article-back:hover { color: var(--text); }
    .article-share {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 11px;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600;
        cursor: pointer;
        transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
                    border-color var(--dur-2) var(--ease);
    }
    .article-share:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
    .article-share.copied {
        color: var(--accent-soft);
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
    }
    .article-share:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
    .article-reader h1 { font-size: 28px; margin: 0 0 8px; line-height: 1.25; }
    .article-reader .article-meta { margin: 0 0 24px; padding: 0; }
    .article-body { font-size: 15px; line-height: 1.8; color: var(--text); }
    .article-body h2 { font-size: 19px; margin: 28px 0 10px; }
    .article-body p { margin: 0 0 16px; }
    .article-body ul { margin: 0 0 16px; padding-left: 22px; }
    .article-body li { margin: 4px 0; }
    .article-body b { color: var(--text); font-weight: 700; }
    .art-rank { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
    .art-rank:last-of-type { border-bottom: 0; margin-bottom: 16px; }
    .art-rank .rk { flex: 0 0 auto; width: 16px; text-align: center; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .art-face { flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-2); }
    .art-meta { flex: 1 1 auto; min-width: 0; }
    .art-meta .nm { font-weight: 700; color: var(--text); }
    .art-meta .sb { color: var(--text-muted); font-size: 13px; }
    .art-rank .lf { flex: 0 0 auto; font-weight: 700; font-size: 18px; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .art-rank .lf small { font-size: 11px; color: var(--text-muted); margin-left: 2px; font-weight: 400; }
    .art-build { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 6px 0 16px; }
    .art-item { width: 74px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
    .art-item img { width: 52px; height: 52px; border-radius: var(--r-sm); display: block; background: var(--surface-2); }
    .art-item .it-nm { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.2; }
    .art-item .it-tag { font-size: 11px; color: var(--text-muted); }

    /* Scaling x snowball scatter (column article). */
    .scatter-wrap { margin: 14px 0 8px; }
    .scatter-chart { position: relative; width: 100%; }
    .scatter-chart svg text { font-family: inherit; }
    .sc-dot {
        position: absolute; border-radius: 50%; border: 2px solid var(--ring, #555);
        box-sizing: border-box; object-fit: cover; background: var(--surface-2);
        transform: translate(-50%, -50%); z-index: 5; cursor: pointer;
        box-shadow: 0 1px 4px rgba(0,0,0,0.4); transition: transform .09s var(--ease);
    }
    .sc-dot:hover { transform: translate(-50%, -50%) scale(1.95); z-index: 60; border-color: var(--text); }
    .scatter-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 12px; color: var(--text-muted); font-size: 13px; }
    .scatter-legend .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; vertical-align: -1px; margin-right: 4px; }

    /* Search sticky under header (list + detail); chips scroll away; one row at rest. */
    .view-home .filter-bar {
        top: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .view-home .search-rail {
        top: var(--header-h);
        background: transparent;
        border: 0;
    }
    @media (max-width: 700px) {
        /* Two-row header: brand + actions on top, the primary tabs as a
           full-bleed scrollable strip underneath.  Primary navigation stays
           visible on mobile — no hamburger / drawer layer.  JS keeps
           --header-h in sync with the real height (syncHeaderHeight). */
        .site-header-inner {
            flex-wrap: wrap;
            height: auto;
            padding: 8px 12px 0;
            gap: 0 10px;
        }
        .brand-title { font-size: 22px; }
        .header-actions { margin-left: auto; gap: 6px; }
        .site-header .mode-select {
            min-height: 30px;
            padding: 5px 8px;
            font-size: 11px;
        }
        .site-header .theme-toggle,
        .site-header .header-search > summary,
        .site-header .lang-toggle { padding: 5px 8px; }
        /* Toggle sits mid-header here, so right-anchoring would push the
           panel off the left edge; pin it to the viewport gutters instead. */
        .site-header .header-search-panel {
            position: fixed;
            top: calc(var(--header-h, 56px) + 6px);
            left: 16px;
            right: 16px;
            max-width: none;
        }
        .nav-tabs {
            order: 10;
            flex-basis: 100%;
            margin: 4px -12px 0;
            padding: 0 12px;
        }
        .nav-tab { font-size: 15px; padding: 9px 11px 10px; }
        .site-main { padding: 16px 12px 48px; }
        .section-head { font-size: 19px; }
        .article-reader h1 { font-size: 23px; }
    }

    /* The `background` shorthand transition permanently wedges when a var()
       palette flips on a theme switch (the engine can't interpolate the
       substitution and gets stuck on the old colour).  Transition
       background-color instead for the interactive chrome, which IS
       interpolable, so theme switches always land. */
    .chip, .icon-btn, .gh-star, .tool-btn, .search, .change-tab,
    .pick-chip, .meta-help, .detail-tab-label, .rec-fab, .side-close,
    .nav-tab, .champ, .article-card, .setting-card {
        transition: background-color var(--dur-2) var(--ease),
                    color var(--dur-2) var(--ease),
                    border-color var(--dur-2) var(--ease),
                    box-shadow var(--dur-2) var(--ease),
                    transform var(--dur-2) var(--ease);
    }
    /* "Top-highlight" inner hairline: a 1px translucent-white top edge fakes a
       light source above and makes flat outlined surfaces read as physical
       cards (the signature premium-dark depth cue). */
    .champ, .article-card, .setting-card, .segmented {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    [data-theme="light"] .champ,
    [data-theme="light"] .article-card,
    [data-theme="light"] .setting-card,
    [data-theme="light"] .segmented {
        box-shadow: 0 1px 2px rgba(31, 41, 55, 0.06);
    }
    /* ===== Light theme: curated overrides for the legacy dark surfaces.
       Chrome (header/nav/settings/column) already uses theme vars.  These
       overrides retarget the tier-list, 增幅榜, champion detail panel, and
       recommend side-panel so light mode is a real palette throughout. ===== */
    /* Sticky search input keeps glass in both themes. */
    [data-theme="light"] .search-rail .search-wrap {
        background: color-mix(in srgb, var(--bg) 82%, transparent);
        border-color: var(--border);
    }
    [data-theme="light"] .detail-main-tabs > .detail-tab-rail {
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        border-bottom-color: var(--border);
    }
    [data-theme="light"] .chip:not(.active) { background: var(--chip-bg); color: var(--text-muted); }
    [data-theme="light"] .chip:not(.active):hover { background: #e2e6ee; }
    [data-theme="light"] .search { background: #ffffff; color: var(--text); border: 1px solid var(--border-strong); }
    [data-theme="light"] .filter-bar .role-chips .shown-count,
    [data-theme="light"] .filter-bar .role-chips .shown-count #shown-n {
        color: var(--text-muted);
    }
    [data-theme="light"] .tier-count,
    [data-theme="light"] .tier-count-unit,
    [data-theme="light"] .tier-count-num { color: var(--text-muted); }
    [data-theme="light"] .footer { border-top-color: var(--border); color: var(--text-dim); }
    [data-theme="light"] .footer .cutoffs,
    [data-theme="light"] .footer .freshness { color: var(--text-muted); }
    [data-theme="light"] .footer .gh-star {
        color: var(--text-muted);
        background: #ffffff;
        border-color: var(--border-strong);
        box-shadow: 0 1px 2px rgba(31, 41, 55, 0.06);
    }
    [data-theme="light"] .footer .gh-star:hover {
        color: var(--text);
        background: var(--surface-2);
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
    }
    [data-theme="light"] .empty-state { color: var(--text-muted); }
    [data-theme="light"] .empty-state strong { color: var(--text); }

    /* --- Home champion tiles --- */
    [data-theme="light"] .champ {
        background: var(--surface);
    }
    [data-theme="light"] .tier-block[data-tier="OP"] .champ {
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            var(--tier-op-frame) border-box;
        background-size: auto, 220% 220%;
        box-shadow: 0 0 8px rgba(180, 140, 230, 0.35);
    }
    [data-theme="light"] .tier-block[data-tier="T1"] .champ {
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            linear-gradient(135deg,
                #ffb380 0%,
                #ff5a3c 32%,
                #c8262c 62%,
                #ff8050 100%) border-box;
        background-size: auto, 220% 220%;
        box-shadow: 0 0 6px rgba(255, 90, 60, 0.28);
    }
    [data-theme="light"] .tier-block .champ.detail-selected {
        border-color: var(--accent);
        background: var(--surface);
        box-shadow: none;
    }
    /* Draft pool mirrors home tier frames under light theme. */
    [data-theme="light"] .draft-champ {
        background: var(--surface);
    }
    [data-theme="light"] .draft-champ[data-tier="OP"] {
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            var(--tier-op-frame) border-box;
        background-size: auto, 220% 220%;
        box-shadow: 0 0 8px rgba(180, 140, 230, 0.35);
    }
    [data-theme="light"] .draft-champ[data-tier="T1"] {
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            linear-gradient(135deg,
                #ffb380 0%,
                #ff5a3c 32%,
                #c8262c 62%,
                #ff8050 100%) border-box;
        background-size: auto, 220% 220%;
        box-shadow: 0 0 6px rgba(255, 90, 60, 0.28);
    }
    [data-theme="light"] .tier-block[data-tier="OP"] {
        background:
            radial-gradient(ellipse 70% 60% at 50% 60%,
                rgba(160, 120, 220, 0.08) 0%, transparent 75%);
    }
    [data-theme="light"] .tier-block[data-tier="T1"] {
        background:
            radial-gradient(ellipse 70% 60% at 50% 60%,
                rgba(255, 120, 80, 0.07) 0%, transparent 75%);
    }

    /* --- Augment cards (board + detail carousel) --- */
    [data-theme="light"] .aug {
        background: var(--surface);
        border-color: var(--border);
        box-shadow: 0 1px 2px rgba(31, 41, 55, 0.06);
    }
    /* Dark circular disc under the icon (Riot client style) so prismatic /
       pastel augment art stays legible on light cards — transparent PNG edges
       no longer blend into a pale plinth. */
    [data-theme="light"] .aug img,
    [data-theme="light"] .aug .aicon-ph {
        width: 44px;
        height: 44px;
        margin: 6px auto 2px;
        padding: 4px;
        box-sizing: border-box;
        border-radius: 50%;
        object-fit: contain;
        background:
            radial-gradient(circle at 50% 42%, #222836 0%, #12151c 62%, #07090d 100%);
        box-shadow:
            0 0 0 2px #2c3444,
            0 0 0 4px rgba(70, 80, 100, 0.28),
            0 2px 8px rgba(0, 0, 0, 0.28);
    }
    [data-theme="light"] .aug-tier-grid .aug img,
    [data-theme="light"] .aug-tier-grid .aug .aicon-ph {
        width: 42px;
        height: 42px;
        margin: 5px auto 1px;
        padding: 4px;
    }
    /* 增幅池 chips reuse the same disc, scaled to the 22px pill icon so the
       pastel art keeps an edge against the pale chip. */
    [data-theme="light"] .apool-aug img {
        padding: 2px;
        box-sizing: border-box;
        background:
            radial-gradient(circle at 50% 42%, #222836 0%, #12151c 62%, #07090d 100%);
        box-shadow:
            0 0 0 1px #2c3444,
            0 1px 3px rgba(0, 0, 0, 0.25);
    }
    /* Detail popup header icon (.augch-icon) uses the same disc treatment
       in base CSS (always-on) — no light-only override needed. */
    [data-theme="light"] .aug .aname {
        color: var(--text);
        background: transparent;
        border-bottom-color: var(--border);
    }
    [data-theme="light"] .aug .awr {
        border-bottom-color: var(--border);
    }
    [data-theme="light"] .aug .alift {
        color: var(--text-muted);
    }
    [data-theme="light"] .rlabel-sort {
        background: rgba(0, 0, 0, 0.08);
    }
    [data-theme="light"] .rlabel-sort:hover {
        background: rgba(0, 0, 0, 0.12);
    }
    [data-theme="light"] .rlabel-sort.is-active {
        background: rgba(0, 0, 0, 0.16);
    }
    [data-theme="light"] .aug .awr.wr-5 { color: var(--wr-5); } /* 正綠 */
    [data-theme="light"] .aug .awr.wr-4 { color: var(--wr-4); } /* 淺綠 */
    [data-theme="light"] .aug .awr.wr-3 { color: var(--wr-3); }
    [data-theme="light"] .aug .awr.wr-2 { color: var(--wr-2); } /* 淺紅 */
    [data-theme="light"] .aug .awr.wr-1 { color: var(--wr-1); } /* 正紅 */
    /* Light: solar ladder deepened for paper contrast (same order). */
    [data-theme="light"] .aug .alift.pick-1 { color: #94a3b8; font-weight: 500; }
    [data-theme="light"] .aug .alift.pick-2 { color: #374151; font-weight: 600; }
    [data-theme="light"] .aug .alift.pick-3 { color: #8a6a2f; font-weight: 650; }
    [data-theme="light"] .aug .alift.pick-4 { color: #ca8a04; font-weight: 700; }
    [data-theme="light"] .aug .alift.pick-5 { color: #0e7490; font-weight: 700; }

    /* Category + rarity filter chips */
    [data-theme="light"] .aug-cat-chip:not(.is-active),
    [data-theme="light"] .item-role-chip:not(.is-active),
    [data-theme="light"] .champ-pool-rarity-chip:not(.is-active),
    [data-theme="light"] .item-scope-chip:not(.is-active),
    [data-theme="light"] .apool-role-chip:not(.is-active) {
        background: var(--chip-bg);
        color: var(--text-muted);
        border-color: var(--border);
    }
    [data-theme="light"] .aug-cat-chip:not(.is-active):hover,
    [data-theme="light"] .item-role-chip:not(.is-active):hover,
    [data-theme="light"] .champ-pool-rarity-chip:not(.is-active):hover,
    [data-theme="light"] .item-scope-chip:not(.is-active):hover,
    [data-theme="light"] .apool-role-chip:not(.is-active):hover {
        background: #e2e6ee;
        border-color: var(--border-strong);
        color: var(--text);
    }
    [data-theme="light"] .aug-rarity-chip.rarity-kPrismatic.is-active {
        border-color: #a855f7;
        color: #6b21a8;
        background: color-mix(in srgb, #d36bff 18%, #ffffff);
    }
    [data-theme="light"] .aug-rarity-chip.rarity-kGold.is-active {
        border-color: #c99600;
        color: #7a5a00;
        background: color-mix(in srgb, #f5c518 22%, #ffffff);
    }
    [data-theme="light"] .aug-rarity-chip.rarity-kSilver.is-active {
        border-color: #8b939e;
        color: #3f4754;
        background: color-mix(in srgb, #c0c5cc 28%, #ffffff);
    }

    /* --- Champion detail panel --- */
    [data-theme="light"] .detail {
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
        box-shadow: 0 10px 32px rgba(31, 41, 55, 0.08);
    }
    [data-theme="light"] .detail-skeleton {
        background: linear-gradient(100deg,
            rgba(0, 0, 0, 0.04) 30%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0.04) 70%);
        background-size: 220% 100%;
    }
    [data-theme="light"] .side-close,
    [data-theme="light"] .rec-fab {
        background: var(--surface-2);
        border-color: var(--border-strong);
        color: var(--text);
    }
    [data-theme="light"] .side-close:hover {
        background: var(--chip-bg);
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
    }
    [data-theme="light"] .detail-avatar {
        box-shadow: 0 2px 8px rgba(31, 41, 55, 0.10);
    }
    [data-theme="light"] .detail-role-tag {
        color: var(--text-muted);
        background: none;
    }
    [data-theme="light"] .detail-tab-list {
        border-bottom-color: var(--border);
    }
    [data-theme="light"] .detail-tab-label {
        color: var(--text-muted);
    }
    [data-theme="light"] .detail-tab-label:hover {
        color: var(--text);
        background: rgba(0, 0, 0, 0.03);
    }
    [data-theme="light"] .detail-tab-label.is-group-start::before {
        background: var(--border);
    }
    [data-theme="light"] .detail-tabset > .detail-tab-input:nth-of-type(1):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(1),
    [data-theme="light"] .detail-tabset > .detail-tab-input:nth-of-type(2):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(2),
    [data-theme="light"] .detail-tabset > .detail-tab-input:nth-of-type(3):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(3),
    [data-theme="light"] .detail-tabset > .detail-tab-input:nth-of-type(4):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(4),
    [data-theme="light"] .detail-tabset > .detail-tab-input:nth-of-type(5):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(5),
    [data-theme="light"] .detail-tabset > .detail-tab-input:nth-of-type(6):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(6) {
        color: var(--text);
        border-bottom-color: var(--accent);
        background: transparent;
    }
    [data-theme="light"] .detail-section + .detail-section {
        border-top-color: var(--border);
    }
    [data-theme="light"] .section-meta,
    [data-theme="light"] .cg-options-label,
    [data-theme="light"] .cg-tail-label,
    [data-theme="light"] .cg-core-share,
    [data-theme="light"] .cg-arrow,
    [data-theme="light"] .ab-val,
    [data-theme="light"] .cf-cap {
        color: var(--text-muted);
    }
    [data-theme="light"] .ovr-value { color: var(--text); }
    [data-theme="light"] .ab-label { color: var(--text-muted); }
    [data-theme="light"] .ab-bar { background: rgba(0, 0, 0, 0.06); }
    [data-theme="light"] .cf-skill {
        border-color: var(--border-strong);
        background: var(--chip-bg);
        color: var(--text-muted);
    }
    [data-theme="light"] .overview-split,
    [data-theme="light"] .cg-tail {
        border-top-color: var(--border);
    }
    @media (max-width: 760px) {
        [data-theme="light"] .overview-split > .overview-rail-col {
            border-top-color: var(--border);
        }
    }
    [data-theme="light"] .meta-help {
        background: var(--surface);
        color: var(--text-muted);
        border-color: var(--border-strong);
    }
    [data-theme="light"] .aug-set-summary {
        background: rgba(14, 165, 233, 0.10);
        border-color: rgba(14, 165, 233, 0.28);
        color: #0c4a6e;
    }
    [data-theme="light"] .aug-set-summary.bad {
        background: rgba(239, 68, 68, 0.08);
        border-color: rgba(239, 68, 68, 0.24);
        color: #991b1b;
    }
    [data-theme="light"] .fit-chip {
        background: rgba(34, 197, 94, 0.10);
        border-color: rgba(34, 197, 94, 0.28);
        color: #166534;
    }
    [data-theme="light"] .fit-card {
        background: var(--surface-2);
        border-color: var(--border);
    }
    [data-theme="light"] .fit-card.good {
        border-color: rgba(34, 197, 94, 0.28);
        background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), var(--surface) 42%);
    }
    [data-theme="light"] .fit-card.bad {
        border-color: rgba(239, 68, 68, 0.24);
        background: linear-gradient(180deg, rgba(239, 68, 68, 0.06), var(--surface) 42%);
    }
    [data-theme="light"] .fit-name { color: var(--text); }

    /* Build / boot surfaces inside detail */
    [data-theme="light"] .core-group {
        background: var(--surface-2);
        border-color: rgba(34, 140, 60, 0.22);
    }
    [data-theme="light"] .cg-option {
        background: var(--surface);
        border-color: var(--border);
    }
    [data-theme="light"] .cg-core-icon,
    [data-theme="light"] .cg-option-icon,
    [data-theme="light"] .boot-rail-icon,
    [data-theme="light"] .cg-tail-icon,
    [data-theme="light"] .item-build-icon {
        background: #1a1f2a;
    }
    [data-theme="light"] .boot-rail-row {
        background: var(--surface-2);
        border-color: var(--border);
    }
    [data-theme="light"] .boot-rail-row.is-top {
        background: color-mix(in srgb, #22c55e 9%, var(--surface));
        border-color: rgba(34, 140, 60, 0.35);
    }
    [data-theme="light"] .boot-rail-name { color: var(--text); }
    [data-theme="light"] .boot-rail-pick,
    [data-theme="light"] .item-build-pick,
    [data-theme="light"] .cluster-pick,
    [data-theme="light"] .cluster-games {
        color: var(--text-muted);
    }
    [data-theme="light"] .item-build-card {
        background: var(--surface);
        border-color: rgba(34, 140, 60, 0.28);
        color: var(--text);
        box-shadow: 0 1px 2px rgba(31, 41, 55, 0.05);
    }
    [data-theme="light"] .item-build-icons {
        background: var(--surface-2);
    }
    [data-theme="light"] .item-build-name { color: var(--text); }
    [data-theme="light"] .item-build-wr,
    [data-theme="light"] .item-cluster-stats {
        border-color: var(--border);
    }
    [data-theme="light"] .item-cluster-stats .item-build-wr,
    [data-theme="light"] .cluster-pick {
        border-color: var(--border);
    }
    [data-theme="light"] .item-build-wr.is-good,
    [data-theme="light"] .cg-core-wr.is-good,
    [data-theme="light"] .cg-option-wr.is-good,
    [data-theme="light"] .boot-rail-wr.is-good { color: #1f9a4a; }
    [data-theme="light"] .item-build-wr.is-bad,
    [data-theme="light"] .cg-core-wr.is-bad,
    [data-theme="light"] .cg-option-wr.is-bad,
    [data-theme="light"] .boot-rail-wr.is-bad { color: #d64545; }
    [data-theme="light"] .item-build-wr.is-even,
    [data-theme="light"] .cg-core-wr.is-even,
    [data-theme="light"] .cg-option-wr.is-even,
    [data-theme="light"] .boot-rail-wr.is-even { color: var(--text-muted); }
    [data-theme="light"] .item-pair-icon-wrap {
        background: #1a1f2a;
        border-color: var(--border-strong);
    }
    [data-theme="light"] .lane-badge.lane-popular {
        background: rgba(37, 99, 235, 0.12);
        color: #1d4ed8;
    }
    [data-theme="light"] .lane-badge.lane-winrate {
        background: rgba(34, 197, 94, 0.12);
        color: #166534;
    }
    [data-theme="light"] .lane-badge.lane-combined {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-muted);
    }
    /* Light: solar ladder deepened for paper (same order as dark). */
    [data-theme="light"] .cluster-pick.pick-1,
    [data-theme="light"] .cg-option-pick.pick-1,
    [data-theme="light"] .item-build-pick.pick-1,
    [data-theme="light"] .boot-rail-pick.pick-1,
    [data-theme="light"] .cg-core-share.pick-1 { color: #94a3b8; font-weight: 500; }
    [data-theme="light"] .cluster-pick.pick-2,
    [data-theme="light"] .cg-option-pick.pick-2,
    [data-theme="light"] .item-build-pick.pick-2,
    [data-theme="light"] .boot-rail-pick.pick-2,
    [data-theme="light"] .cg-core-share.pick-2 { color: #374151; font-weight: 600; }
    [data-theme="light"] .cluster-pick.pick-3,
    [data-theme="light"] .cg-option-pick.pick-3,
    [data-theme="light"] .item-build-pick.pick-3,
    [data-theme="light"] .boot-rail-pick.pick-3,
    [data-theme="light"] .cg-core-share.pick-3 { color: #8a6a2f; font-weight: 650; }
    [data-theme="light"] .cluster-pick.pick-4,
    [data-theme="light"] .cg-option-pick.pick-4,
    [data-theme="light"] .item-build-pick.pick-4,
    [data-theme="light"] .boot-rail-pick.pick-4,
    [data-theme="light"] .cg-core-share.pick-4 { color: #ca8a04; font-weight: 700; }
    [data-theme="light"] .cluster-pick.pick-5,
    [data-theme="light"] .cg-option-pick.pick-5,
    [data-theme="light"] .item-build-pick.pick-5,
    [data-theme="light"] .boot-rail-pick.pick-5,
    [data-theme="light"] .cg-core-share.pick-5 { color: #0e7490; font-weight: 700; }

    /* Recommend side panel */
    [data-theme="light"] .side-panel {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text);
        box-shadow: 0 10px 32px rgba(31, 41, 55, 0.10);
    }

    /* --- 版本變動 (patch changes) --- */
    [data-theme="light"] .updates-panel {
        background: var(--surface);
        border-color: var(--border);
        box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
    }
    [data-theme="light"] .updates-kicker {
        color: var(--accent-soft);
    }
    [data-theme="light"] .updates-title {
        color: var(--text);
    }
    [data-theme="light"] .updates-close {
        background: var(--surface-2);
        border-color: var(--border-strong);
        color: var(--text-muted);
    }
    [data-theme="light"] .updates-close:hover {
        background: var(--chip-bg);
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
        color: var(--text);
    }
    [data-theme="light"] .updates-list li {
        color: var(--text-muted);
    }
    [data-theme="light"] .updates-list li::before {
        background: var(--accent);
    }
    [data-theme="light"] .change-chip {
        color: var(--text-muted);
        background: color-mix(in srgb, var(--accent) 10%, var(--surface));
        border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    }
    [data-theme="light"] .change-tab {
        background: var(--chip-bg);
        border-color: var(--border);
        color: var(--text-muted);
    }
    [data-theme="light"] .change-tab:hover {
        background: #e2e6ee;
        border-color: var(--border-strong);
        color: var(--text);
    }
    [data-theme="light"] .change-tab.active {
        border-color: var(--accent);
        background: var(--accent);
        color: var(--accent-on);
    }
    [data-theme="light"] .change-column-title {
        color: var(--text);
    }
    [data-theme="light"] .change-row {
        background: var(--surface);
        border-color: var(--border);
        box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
    }
    [data-theme="light"] button.change-row:hover {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
        background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    }
    [data-theme="light"] .change-icon,
    [data-theme="light"] .change-duo img {
        background: #1a1f2a;
    }
    /* Stacked duo icons: hairline must match light card, not dark #11151d. */
    [data-theme="light"] .change-duo img + img {
        box-shadow: -2px 0 0 var(--surface);
    }
    [data-theme="light"] .change-name {
        color: var(--text);
    }
    [data-theme="light"] .change-meta {
        color: var(--text-dim);
    }
    [data-theme="light"] .change-empty {
        color: var(--text-muted);
    }
    /* .change-delta.up/.down keep their green/red pills — already readable. */

    /* ===== 增幅榜 → 適配英雄 popup (click an augment card on the board).
       The host doubles as the backdrop and lives INSIDE #view-augments so its
       z-index resolves in the view's stacking context (same trap as the
       mobile detail / rec-panel veil — see that comment).  Authored against
       theme vars so light mode is correct for free. ===== */
    body.augch-open { overflow: hidden; }
    #view-augments .aug { cursor: pointer; }
    .aug-tip-hint { margin-top: 4px; color: var(--accent-soft); font-size: 11px; }

    /* ----- Rich item hover (floating, never clipped by carousels) ----- */
    .item-tip-src { display: none !important; }
    .has-item-tip { -webkit-tap-highlight-color: transparent; }
    .cg-icon-host {
        position: relative;
        display: inline-flex;
        vertical-align: middle;
        border-radius: 6px;
        outline: none;
    }
    .cg-icon-host:focus-visible {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32);
    }
    .item-float-tip {
        position: fixed;
        z-index: 80;
        left: 0;
        top: 0;
        width: min(380px, calc(100vw - 24px));
        box-sizing: border-box;
        /* Height follows content.  JS only applies max-height + scroll when the
           tip would otherwise overflow the viewport after flip positioning. */
        max-height: none;
        overflow: visible;
        padding: 0;
        pointer-events: none;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
        filter: none;
        border-radius: var(--r-sm);
        box-shadow: var(--shadow);
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
    }
    .item-float-tip.is-scrollable {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .item-float-tip.is-visible {
        display: block !important;
        pointer-events: auto;
        opacity: 1;
        transform: translateY(0);
    }
    .item-float-tip[hidden] { display: none !important; }
    .item-tip-card {
        position: relative;
        padding: 20px;
        border-radius: var(--r-sm);
        border: 1px solid var(--border-strong);
        background: var(--tip-surface);
        color: var(--text);
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
        overflow-wrap: anywhere;
        font-variant-numeric: tabular-nums;
    }
    .item-tip-card::after {
        content: "";
        position: absolute;
        left: var(--item-tip-arrow-x, 50%);
        bottom: -6px;
        width: 10px;
        height: 10px;
        margin-left: -5px;
        background: var(--tip-surface);
        border-right: 1px solid var(--border-strong);
        border-bottom: 1px solid var(--border-strong);
        transform: rotate(45deg);
    }
    .item-float-tip.flip-below .item-tip-card::after {
        bottom: auto;
        top: -6px;
        border-right: none;
        border-bottom: none;
        border-left: 1px solid var(--border-strong);
        border-top: 1px solid var(--border-strong);
    }
    /* A transparent bridge makes the pointer's path to the reading surface safe. */
    .item-float-tip::before { content: ""; position: absolute; top: 100%; inset-inline: 0; height: 12px; }
    .item-float-tip.flip-below::before { top: auto; bottom: 100%; }
    .item-float-tip.is-scrollable .item-tip-card::after { display: none; }
    .item-tip-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    .item-tip-icons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        flex: 0 0 auto;
        max-width: 104px;
    }
    .item-tip-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--r-sm);
        border: 1px solid var(--border);
        background: var(--augment-icon-surface);
        object-fit: contain;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    }
    .item-tip-head-text {
        min-width: 0;
        flex: 1 1 auto;
        padding-top: 1px;
    }
    .item-tip-name {
        font-weight: 700;
        font-size: 16px;
        color: var(--text);
        line-height: 1.3;
    }
    .item-tip-sub {
        margin-top: 2px;
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.3;
    }
    .item-tip-gold {
        display: inline-block;
        margin-top: 3px;
        font-size: 13px;
        font-variant-numeric: tabular-nums;
        color: var(--accent-soft);
        font-weight: 600;
    }
    .item-tip-desc {
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 16px;
        white-space: normal;
    }
    .item-tip-line + .item-tip-line { margin-top: 2px; }
    .item-tip-section + .item-tip-section { margin-top: 14px; }
    .item-tip-effect-name { margin-bottom: 3px; color: var(--text); font-weight: 700; }
    .desc-value { color: var(--text); font-weight: 700; }
    .desc-tone { font-weight: 500; }
    .desc-ap { color: var(--desc-ap); }
    .desc-ad { color: var(--desc-ad); }
    .desc-magic { color: var(--desc-magic); }
    .desc-physical { color: var(--desc-physical); }
    .desc-true { color: var(--desc-true); }
    .desc-health { color: var(--desc-health); }
    .desc-speed { color: var(--desc-speed); }
    .desc-haste { color: var(--desc-haste); }
    .desc-shield { color: var(--desc-shield); }
    .desc-crit { color: var(--desc-crit); }
    .desc-mana { color: var(--desc-mana); }
    .item-tip-parts {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 8px;
    }
    .item-tip-part {
        padding-top: 6px;
        border-top: 1px solid var(--border);
    }
    .item-tip-part:first-child {
        padding-top: 0;
        border-top: 0;
    }
    .item-tip-part-name {
        font-weight: 650;
        font-size: 11.5px;
        color: var(--text);
        margin-bottom: 3px;
    }
    .item-tip-parts-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 8px;
    }
    .item-tip-chip {
        display: inline-block;
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        color: var(--text);
        font-size: 10.5px;
    }
    .item-tip-stats {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
        font-size: 12px;
    }
    .item-tip-row {
        display: contents;
    }
    .item-tip-row > span {
        color: var(--text-muted);
    }
    .item-tip-row > b {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--text);
        text-align: right;
    }
    .item-tip-row > b.is-good { color: var(--wr-positive); }
    .item-tip-row > b.is-bad { color: var(--wr-negative); }
    .item-tip-row > b.is-even { color: var(--text); }
    .item-tip-delta.is-good {
        color: color-mix(in oklch, var(--wr-5) var(--tip-lift-strength, 0%), var(--wr-positive));
    }
    .item-tip-delta.is-bad {
        color: color-mix(in oklch, var(--wr-1) var(--tip-lift-strength, 0%), var(--wr-negative));
    }
    .item-tip-delta.is-even { color: var(--wr-neutral); }
    .item-tip-note {
        margin-top: 7px;
        padding-top: 6px;
        border-top: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.4;
    }
    /* Keep statistical evidence secondary to the game description. */
    .item-tip-row > b.pick-1 { color: #7c8aa1; font-weight: 500; }
    .item-tip-row > b.pick-2 { color: #e6e8eb; font-weight: 600; }
    .item-tip-row > b.pick-3 { color: #c4a35a; font-weight: 650; }
    .item-tip-row > b.pick-4 { color: #fde047; font-weight: 700; }
    .item-tip-row > b.pick-5 { color: #67e8f9; font-weight: 700; }
    [data-theme="light"] .item-tip-row > b[class*="pick-"] { color: var(--text); }
    @media (prefers-reduced-motion: reduce) {
        .item-float-tip { transition: none; transform: none; }
    }
    #augch-host {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: calc(var(--header-h) + 16px) 14px 20px;
        background: rgba(5, 8, 13, 0.62);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .augch-card {
        position: relative;
        width: min(660px, 100%);
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow);
        padding: 16px 16px 12px;
    }
    /* Rarity reads as a coloured top edge, matching the board's chip hues. */
    .augch-card.rarity-kGold      { border-top: 3px solid #f5c518; }
    .augch-card.rarity-kSilver    { border-top: 3px solid #c0c5cc; }
    .augch-card.rarity-kPrismatic { border-top: 3px solid #d36bff; }
    .augch-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--text-muted);
        font: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
    }
    .augch-close:hover { background: var(--surface-raised); color: var(--text); }
    .augch-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 30px 12px 0;
    }
    /* Icon sits on a dark circular disc (Riot client style) so prismatic /
       pastel art stays legible on both light and dark card surfaces. */
    .augch-icon {
        width: 56px;
        height: 56px;
        flex: 0 0 auto;
        padding: 6px;
        box-sizing: border-box;
        border-radius: 50%;
        object-fit: contain;
        background:
            radial-gradient(circle at 50% 42%, #222836 0%, #12151c 62%, #07090d 100%);
        box-shadow:
            0 0 0 2px #2c3444,
            0 0 0 4px rgba(70, 80, 100, 0.28),
            0 2px 8px rgba(0, 0, 0, 0.28);
    }
    /* List-size augment icons share the .augch-icon disc: silver and pastel
       art vanishes on light surfaces without a dark backing. */
    .champ-pool-augment img,
    .recommended-pool-members img,
    .aug-tier-name img,
    .aug-tier-name .aicon-ph,
    .aug-draft-icon,
    .aug-settle-icon {
        padding: 3px;
        box-sizing: border-box;
        border-radius: 50%;
        object-fit: contain;
        background:
            radial-gradient(circle at 50% 42%, #222836 0%, #12151c 62%, #07090d 100%);
        box-shadow: 0 0 0 1px #2c3444;
    }
    .aug-settle-icon { padding: 2px; }
    .augch-name { color: var(--text); font-size: 17px; font-weight: 700; }
    .augch-sub { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
    .augch-stat { margin-top: 2px; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
    .augch-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 16px;
    }
    .augch-colhead { color: var(--text); font-size: 13px; font-weight: 700; }
    .augch-colsub { margin: 2px 0 8px; color: var(--text-dim); font-size: 11px; }
    .augch-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0 0 4px;
        padding: 5px 6px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }
    .augch-row:hover { background: var(--surface-2); border-color: var(--border); }
    .augch-row img {
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        border-radius: 6px;
        background: var(--surface-sunken);
    }
    .augch-nm {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .augch-meta {
        flex: 1 1 auto;
        color: var(--text-dim);
        font-size: 11px;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .augch-val {
        flex: 0 0 auto;
        min-width: 52px;
        font-weight: 700;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .augch-val.up   { color: #48b868; }
    .augch-val.down { color: #d64545; }
    .augch-empty { padding: 6px 0; color: var(--text-dim); font-size: 12px; }
    .augch-foot {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        color: var(--text-dim);
        font-size: 11px;
    }
    @media (max-width: 700px) {
        #augch-host { padding: calc(var(--header-h) + 8px) 10px 14px; }
        .augch-cols { grid-template-columns: 1fr; }
        .augch-card { padding: 14px 12px 10px; }
    }
    /* ===== Meta Pick mini-game (/game) — dense, data-first, match site chrome ===== */
    .view-game.is-active {
        padding-bottom: 28px;
    }
    .game-shell {
        max-width: 720px;
        margin: 0 auto;
        padding: 4px 0 20px;
    }
    /* ---- Mini-game switcher (Meta Pick / 選增幅) ---- */
    .game-mode-tabs {
        display: flex;
        gap: 6px;
        max-width: 720px;
        margin: 0 auto 14px;
        padding: 4px;
        border-radius: 12px;
        background: var(--surface-raised, #1a1f29);
        border: 1px solid var(--border, #2f3645);
    }
    .game-mode-tab {
        flex: 1;
        padding: 8px 12px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--text-muted, #9aa0a6);
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
    }
    .game-mode-tab:hover { color: var(--text, #e6e9ef); }
    .game-mode-tab.is-active {
        background: var(--accent, #f5c518);
        color: #0e1116;
    }
    .game-mode-tab:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }

    /* ---- 增幅 view submodes (增幅榜 / 增幅池): same segmented control as the
       Game view, on its own class so the Game click handler never sees it. ---- */
    .aug-mode-tabs {
        display: flex;
        gap: 6px;
        max-width: 360px;
        margin: 10px 0 18px;
        padding: 4px;
        border-radius: 12px;
        background: var(--surface-raised);
        border: 1px solid var(--border);
    }
    .aug-mode-tab {
        flex: 1;
        padding: 8px 12px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--text-muted);
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
        cursor: pointer;
        transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
    }
    .aug-mode-tab:link,
    .aug-mode-tab:visited { color: var(--text-muted); }
    .aug-mode-tab:hover { color: var(--text); }
    .aug-mode-tab.is-active,
    .aug-mode-tab.is-active:link,
    .aug-mode-tab.is-active:visited { background: var(--accent); color: var(--accent-on); }
    .aug-mode-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .aug-mode-panel[hidden] { display: none !important; }

    /* ---- 增幅池: one flat lookup panel + hairline-separated reference sections.
       Weight bars carry a scan-aid hue (AD / AP / CD / support / function / gold / tank).
       Brand gold still only marks the selected champion. ---- */
    #aug-pools-host {
        --apool-bar: color-mix(in oklab, var(--text) 52%, transparent);
        --apool-track: color-mix(in oklab, var(--text) 9%, transparent);
        --apool-hue-ad: oklch(0.70 0.145 28);
        --apool-hue-ap: oklch(0.70 0.12 255);
        --apool-hue-cd: oklch(0.74 0.11 220);
        --apool-hue-support: oklch(0.74 0.10 175);
        --apool-hue-function: oklch(0.76 0.12 355);
        --apool-hue-gold: oklch(0.78 0.13 85);
        --apool-hue-tank: oklch(0.71 0.10 132);
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
    :root[data-theme="light"] #aug-pools-host {
        --apool-hue-ad: oklch(0.52 0.17 28);
        --apool-hue-ap: oklch(0.48 0.15 255);
        --apool-hue-cd: oklch(0.46 0.16 215);
        --apool-hue-support: oklch(0.46 0.12 175);
        --apool-hue-function: oklch(0.52 0.16 355);
        --apool-hue-gold: oklch(0.52 0.14 80);
        --apool-hue-tank: oklch(0.46 0.12 132);
    }
    #aug-pools-host [data-hue="ad"] { --apool-bar: var(--apool-hue-ad); }
    #aug-pools-host [data-hue="ap"] { --apool-bar: var(--apool-hue-ap); }
    #aug-pools-host [data-hue="cd"] { --apool-bar: var(--apool-hue-cd); }
    #aug-pools-host [data-hue="support"] { --apool-bar: var(--apool-hue-support); }
    #aug-pools-host [data-hue="function"] { --apool-bar: var(--apool-hue-function); }
    #aug-pools-host [data-hue="gold"] { --apool-bar: var(--apool-hue-gold); }
    #aug-pools-host [data-hue="tank"] { --apool-bar: var(--apool-hue-tank); }
    .apool-status { margin: 0; padding: 32px 0; color: var(--text-muted); font-size: 14px; }
    .apool-intro { display: flex; flex-direction: column; gap: 4px; }
    .apool-lede { margin: 0; max-width: 70ch; font-size: 14px; line-height: 1.6; }
    .apool-meta { margin: 0; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .apool-frozen {
        margin: 4px 0 0;
        padding: 8px 12px;
        border-left: 3px solid var(--accent);
        font-size: 13px;
        line-height: 1.55;
        color: var(--text);
    }
    .apool-panel {
        display: grid;
        grid-template-columns: 256px minmax(0, 1fr);
        background: var(--panel-surface);
        border: 1px solid var(--panel-line);
        border-radius: var(--r-md);
        box-shadow: none;
        overflow: hidden;
    }
    .apool-picker {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 0;
        padding: 12px;
        border-right: 1px solid var(--panel-line);
    }
    .apool-search {
        box-sizing: border-box;
        width: 100%;
        height: 40px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 14px;
    }
    .apool-search:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
    .apool-role-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .apool-role-chip {
        padding: 6px 8px;
        min-height: 36px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--text-muted);
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
        --role-color: var(--accent);
    }
    .apool-role-chip:hover { background: var(--overlay); color: var(--text); }
    .apool-role-chip.is-active {
        background: color-mix(in oklab, var(--accent) 10%, var(--surface));
        color: var(--text);
        border-color: var(--accent);
    }
    .apool-role-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .apool-role-chip.role-Assassin { --role-color: #ef4444; }
    .apool-role-chip.role-Fighter  { --role-color: #f97316; }
    .apool-role-chip.role-Mage     { --role-color: #3b82f6; }
    .apool-role-chip.role-Marksman { --role-color: #22c55e; }
    .apool-role-chip.role-Support  { --role-color: #ec4899; }
    .apool-role-chip.role-Tank     { --role-color: #a855f7; }
    .apool-champs {
        display: flex;
        flex-direction: column;
        gap: 1px;
        max-height: 420px;
        margin: 0 -4px;
        padding: 0 4px;
        overflow-y: auto;
    }
    .apool-champ {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px;
        min-height: 40px;
        border: 0;
        border-radius: var(--r-sm);
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }
    .apool-champ[hidden] { display: none; }
    .apool-champ-empty { flex: 1 1 100%; margin: 8px 4px; }
    .apool-champ img { flex: none; width: 24px; height: 24px; border-radius: 6px; }
    .apool-champ:hover { background: var(--surface-2); }
    .apool-champ.is-active {
        background: color-mix(in oklab, var(--accent) 14%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent);
    }
    .apool-champ:focus-visible,
    .apool-row:focus-visible,
    .apool-pool:focus-visible,
    .apool-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .apool-detail { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; }
    .apool-detail-head { display: flex; align-items: center; gap: 12px; }
    .apool-detail-head img { width: 44px; height: 44px; border-radius: 10px; }
    .apool-detail-name { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.1; }
    .apool-detail-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .apool-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
    }
    .apool-legend li { flex: none; white-space: nowrap; }
    .apool-legend li,
    .apool-row-name,
    .apool-pool-name,
    .apool-pool-detail-head h4 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .apool-legend li::before,
    .apool-row-name::before,
    .apool-pool-name::before,
    .apool-pool-detail-head h4::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 2px;
        background: var(--apool-bar);
        flex: none;
    }
    .apool-row,
    .apool-scale {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(90px, 1.6fr) 64px;
        align-items: center;
        gap: 12px;
    }
    .apool-scale { padding: 0 8px; font-size: 11px; color: var(--text-dim); }
    .apool-scale-label { grid-column: 1; }
    .apool-scale-track { grid-column: 2; position: relative; height: 14px; font-variant-numeric: tabular-nums; }
    .apool-scale-track span { position: absolute; top: 0; transform: translateX(-50%); }
    .apool-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
    .apool-row-item + .apool-row-item { border-top: 1px solid var(--panel-line); }
    .apool-row {
        width: 100%;
        padding: 12px 8px;
        min-height: 44px;
        border: 0;
        border-radius: var(--r-sm);
        background: transparent;
        color: var(--text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .apool-row:hover,
    .apool-row-item.is-open .apool-row { background: var(--surface-2); }
    .apool-row-name { display: block; min-width: 0; font-size: 14px; font-weight: 500; }
    .apool-row-name::before { display: inline-block; margin-right: 6px; }
    .apool-row-name .apool-tag { display: inline-block; margin-left: 6px; }
    .apool-bar { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--apool-track); }
    .apool-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--apool-bar); }
    .apool-w { white-space: nowrap; font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
    .apool-row[data-hue] .apool-w {
        color: color-mix(in oklab, var(--apool-bar) 70%, var(--text));
    }
    .apool-tag {
        padding: 0 7px;
        border: 1px solid var(--panel-line);
        border-radius: 999px;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.6;
        white-space: nowrap;
    }
    .apool-footnote { margin: 0; max-width: 72ch; font-size: 12px; color: var(--text-muted); }
    .apool-augs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; padding: 0 8px; list-style: none; }
    .apool-aug {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 9px 3px 4px;
        border-radius: var(--r-sm);
        background: var(--surface-2);
        min-height: 36px;
        font-size: 12px;
    }
    .apool-aug img { width: 22px; height: 22px; border-radius: 50%; }
    .apool-aug:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
    .apool-aug:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .apool-empty { margin: 4px 8px 10px; font-size: 13px; color: var(--text-muted); }
    .apool-section { display: flex; flex-direction: column; gap: 16px; }
    .apool-h { margin: 0; font-size: 18px; font-weight: 600; }
    #apool-all { gap: 0; }
    #apool-all > .apool-h { margin-bottom: 12px; }
    .apool-picker-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
    .apool-chevron { display: inline-block; width: 16px; margin-left: 8px; color: var(--text-muted); font-weight: 400; }
    .apool-family { border-top: 1px solid var(--panel-line); }
    .apool-family:last-child { border-bottom: 1px solid var(--panel-line); }
    .apool-family > summary { cursor: pointer; padding: 16px 4px; list-style: none; }
    .apool-family > summary::-webkit-details-marker { display: none; }
    .apool-family > summary::after { content: "+"; margin-left: auto; color: var(--text-muted); }
    .apool-family[open] > summary::after { content: "−"; }
    .apool-family > summary:hover { color: var(--accent-soft); }
    .apool-family > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .apool-family-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
    .apool-family-count { color: var(--text-muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
    .apool-family-desc { font-size: 12px; color: var(--text-muted); }
    .apool-family-body { display: flex; flex-direction: column; gap: 16px; padding: 0 0 20px; }
    .apool-family-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
    .apool-family-head h4 { margin: 0; font-size: 14px; font-weight: 600; }
    .apool-family-head p { margin: 0; font-size: 12px; color: var(--text-muted); }
    .apool-pool-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1px;
        overflow: hidden;
        background: var(--panel-line);
        border: 1px solid var(--panel-line);
        border-radius: var(--r-md);
    }
    .apool-pool {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border: 0;
        background: var(--panel-surface);
        color: var(--text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .apool-pool:hover,
    .apool-cell:hover { background: var(--surface-2); }
    .apool-pool.is-active,
    .apool-cell.is-active { box-shadow: inset 0 0 0 1px var(--accent); }
    .apool-pool-name { font-size: 13px; font-weight: 600; }
    .apool-pool-meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .apool-matrix-wrap { overflow-x: auto; }
    .apool-matrix { min-width: 520px; border-collapse: separate; border-spacing: 4px; }
    .apool-matrix th { padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: left; white-space: nowrap; }
    .apool-cell {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
        min-width: 96px;
        padding: 9px 12px;
        border: 1px solid var(--panel-line);
        border-radius: var(--r-sm);
        background: var(--panel-surface);
        color: var(--text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .apool-cell-n { font-size: 18px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .apool-cell[data-hue] .apool-cell-n {
        color: color-mix(in oklab, var(--apool-bar) 62%, var(--text));
    }
    .apool-cell-s { font-size: 11px; color: var(--text-muted); }
    .apool-pool-detail {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
        border: 1px solid var(--panel-line);
        border-radius: var(--r-md);
        background: var(--panel-inner);
    }
    .apool-pool-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
    .apool-pool-detail-head h4 { margin: 0; font-size: 16px; font-weight: 600; }
    .apool-pool-detail h5 { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
    .apool-pool-detail .apool-augs { padding: 0; }
    .apool-wgroup {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 12px;
        padding: 6px 0;
        border-top: 1px solid var(--panel-line);
        font-size: 13px;
        line-height: 1.6;
    }
    .apool-wgroup .apool-w { text-align: left; }
    .apool-diff { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
    .apool-diff b { font-weight: 600; }
    .apool-notes {
        gap: 14px;
        margin: 0;
        padding-top: 16px;
        border-top: 1px solid var(--border);
        font-size: 13px;
        line-height: 1.7;
    }
    .apool-notes > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
    .apool-notes dt { font-weight: 600; color: var(--text); }
    .apool-notes dd { margin: 0; max-width: 75ch; color: var(--text-muted); }
    .apool-notes strong { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
    @media (max-width: 560px) {
        .apool-notes > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    }
    @media (max-width: 760px) {
        .apool-panel { grid-template-columns: minmax(0, 1fr); }
        .apool-picker { border-right: 0; border-bottom: 1px solid var(--panel-line); }
        .apool-role-chip { padding: 6px 10px; min-height: 32px; }
        .apool-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 144px; }
        .apool-champ span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .apool-role-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
        .apool-role-chip { flex: none; }
        .apool-family-desc { display: none; }
        .apool-champ { width: auto; }
        .apool-row,
        .apool-scale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 60px; }
        /* The wider track leaves less room for the label; 13px keeps pool names on one line. */
        .apool-row-name { font-size: 13px; }
        .apool-scale-label { display: none; }
        /* Hide the crowded 75 tick on phones; every row still prints its exact weight. */
        .apool-scale-track { grid-column: 2; font-size: 10px; }
        .apool-scale-track span:first-child { display: none; }
        .apool-detail { padding: 14px 12px; }
    }

    /* ---- 選增幅: compact, explicit decision flow ---- */
    #aug-draft-host {
        --aug-silver: oklch(0.79 0.024 258);
        --aug-gold: oklch(0.82 0.16 88);
        --aug-prismatic: oklch(0.72 0.19 305);
        --aug-good: oklch(0.75 0.17 148);
        --aug-bad: oklch(0.7 0.17 25);
    }
    .aug-ladder {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        margin: 0 0 18px;
        padding: 10px 12px;
        border: 1px solid var(--border, oklch(0.34 0.02 260));
        border-radius: 14px;
        background: color-mix(in oklch, var(--surface-raised) 72%, transparent);
    }
    .aug-champ-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 3px 10px 3px 3px;
        border-radius: 999px;
        background: var(--chip-bg, oklch(0.25 0.018 260));
        border: 1px solid var(--border, oklch(0.34 0.02 260));
        font-size: 12px;
        font-weight: 750;
        white-space: nowrap;
    }
    .aug-champ-badge img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        flex: none;
    }
    .aug-ladder-progress {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        min-width: 0;
    }
    .aug-ladder-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted, oklch(0.7 0.015 260));
        white-space: nowrap;
    }
    .aug-ladder-pips {
        display: grid;
        grid-template-columns: repeat(4, minmax(42px, 1fr));
        gap: 5px;
        width: min(100%, 220px);
    }
    .aug-ladder-pip {
        --aug-colour: var(--aug-gold);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 42px;
        height: 30px;
        padding: 0 7px;
        border-radius: 8px;
        border: 1px solid color-mix(in oklch, var(--aug-colour) 58%, var(--border));
        background: color-mix(in oklch, var(--aug-colour) 16%, var(--surface-raised));
        color: var(--text, oklch(0.93 0.01 260));
        opacity: 0.45;
        transition: opacity 180ms var(--ease-out), background 180ms var(--ease-out),
                    border-color 180ms var(--ease-out);
    }
    .aug-ladder-pip.is-silver { --aug-colour: var(--aug-silver); }
    .aug-ladder-pip.is-gold { --aug-colour: var(--aug-gold); }
    .aug-ladder-pip.is-prismatic { --aug-colour: var(--aug-prismatic); }
    .aug-ladder-pip.is-done { opacity: 0.68; }
    .aug-ladder-pip.is-now {
        opacity: 1;
        border-color: var(--aug-colour);
        background: color-mix(in oklch, var(--aug-colour) 27%, var(--surface-raised));
        box-shadow: 0 0 0 2px color-mix(in oklch, var(--aug-colour) 18%, transparent);
    }
    .aug-ladder-n { font-size: 11px; font-weight: 800; }
    .aug-ladder-rarity {
        font-size: 10px;
        font-weight: 800;
        color: var(--aug-colour);
    }

    /* ---- 選增幅: phases ---- */
    .aug-phase { max-width: 720px; margin: 0 auto; }
    .aug-phase-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 7px;
    }
    .aug-phase-title {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }
    .aug-phase-total {
        font-size: 11px;
        font-weight: 650;
        color: var(--text-muted, oklch(0.7 0.015 260));
        letter-spacing: 0;
    }
    .aug-phase-sub {
        margin: 0 0 14px;
        max-width: 58ch;
        font-size: 13px;
        line-height: 1.5;
        color: var(--text-muted, oklch(0.7 0.015 260));
    }
    .aug-phase-rarity {
        --aug-colour: var(--aug-gold);
        padding: 3px 9px;
        border: 1px solid color-mix(in oklch, var(--aug-colour) 55%, var(--border));
        border-radius: 999px;
        background: color-mix(in oklch, var(--aug-colour) 17%, transparent);
        color: var(--aug-colour);
        font-size: 11px;
        font-weight: 800;
    }
    .aug-phase-rarity.is-silver { --aug-colour: var(--aug-silver); }
    .aug-phase-rarity.is-gold { --aug-colour: var(--aug-gold); }
    .aug-phase-rarity.is-prismatic { --aug-colour: var(--aug-prismatic); }
    .aug-pick-hint {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        margin: 0 0 12px;
        color: var(--text-muted, oklch(0.7 0.015 260));
        font-size: 12px;
        line-height: 1.45;
    }
    .aug-pick-hint > span {
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--chip-bg, oklch(0.25 0.018 260));
        color: var(--text, oklch(0.93 0.01 260));
        font-size: 10px;
        font-weight: 700;
    }

    .aug-champ-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .aug-champ-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 14px 8px;
        border-radius: 12px;
        border: 1px solid var(--border, oklch(0.34 0.02 260));
        background: var(--surface-raised, oklch(0.23 0.016 260));
        color: var(--text, oklch(0.93 0.01 260));
        font-family: inherit;
        cursor: pointer;
        transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out),
                    background 180ms var(--ease-out);
    }
    .aug-champ-card:hover {
        border-color: var(--accent, var(--aug-gold));
        background: color-mix(in oklch, var(--accent) 7%, var(--surface-raised));
        transform: translateY(-2px);
    }
    .aug-champ-card:focus-visible {
        outline: 2px solid var(--focus-ring, oklch(0.72 0.14 250));
        outline-offset: 2px;
    }
    .aug-champ-img { width: 56px; height: 56px; border-radius: 12px; }
    .aug-champ-name { font-size: 13px; font-weight: 750; }
    .aug-champ-meta {
        font-size: 11px;
        color: var(--text-muted, oklch(0.7 0.015 260));
        font-variant-numeric: tabular-nums;
    }

    .aug-draft-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
    }
    .aug-draft-slot {
        min-width: 0;
    }
    .aug-draft-slot.is-pick-slot {
        --aug-colour: var(--aug-gold);
        position: relative;
        display: flex;
    }
    .aug-draft-slot.is-pick-slot.is-silver { --aug-colour: var(--aug-silver); }
    .aug-draft-slot.is-pick-slot.is-gold { --aug-colour: var(--aug-gold); }
    .aug-draft-slot.is-pick-slot.is-prismatic { --aug-colour: var(--aug-prismatic); }
    .aug-draft-choice-label {
        position: absolute;
        z-index: 2;
        top: 19px;
        left: 16px;
        color: var(--text-dim, oklch(0.58 0.015 260));
        font-size: 10px;
        font-weight: 800;
    }
    .aug-draft-card {
        --aug-colour: var(--aug-gold);
        position: relative;
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 11px;
        padding: 16px;
        overflow: hidden;
        text-align: left;
        border-radius: 14px;
        border: 1px solid color-mix(in oklch, var(--aug-colour) 38%, var(--border));
        background: var(--surface-raised, oklch(0.23 0.016 260));
        box-shadow: inset 0 3px 0 color-mix(in oklch, var(--aug-colour) 74%, transparent);
        color: var(--text, oklch(0.93 0.01 260));
        font-family: inherit;
        cursor: default;
        transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out),
                    background 180ms var(--ease-out), opacity 180ms var(--ease-out);
    }
    .aug-draft-card.is-silver { --aug-colour: var(--aug-silver); }
    .aug-draft-card.is-gold { --aug-colour: var(--aug-gold); }
    .aug-draft-card.is-prismatic { --aug-colour: var(--aug-prismatic); }
    button.aug-draft-card {
        min-height: 250px;
        padding-top: 52px;
        cursor: pointer;
    }
    button.aug-draft-card:hover {
        transform: translateY(-2px);
        border-color: var(--aug-colour);
        background: color-mix(in oklch, var(--aug-colour) 7%, var(--surface-raised));
    }
    .aug-draft-card:focus-visible {
        outline: 2px solid var(--focus-ring, oklch(0.72 0.14 250));
        outline-offset: 2px;
    }
    .aug-draft-card.is-picked {
        border-color: var(--aug-good);
        box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--aug-good) 52%, transparent),
                    inset 0 3px 0 var(--aug-good);
    }
    .aug-draft-card.is-stale { opacity: 0.48; }
    .aug-draft-card.is-stale:has(.is-best-badge) { opacity: 0.84; }
    .aug-pick-context {
        margin: 0 0 7px;
        color: var(--text, oklch(0.93 0.01 260));
        font-size: 11px;
        font-weight: 750;
        letter-spacing: 0.01em;
    }
    .aug-pick-context-prior {
        display: block;
        margin-top: 3px;
        color: var(--text-muted, oklch(0.7 0.015 260));
        font-size: 10px;
        font-weight: 650;
        line-height: 1.45;
    }
    .aug-rank-note {
        margin: -2px 0 7px;
        color: var(--aug-good);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.04em;
    }
    .aug-draft-projected {
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid color-mix(in oklch, var(--aug-colour) 30%, var(--border));
        border-radius: 10px;
        background: color-mix(in oklch, var(--aug-colour) 8%, var(--chip-bg));
        font-variant-numeric: tabular-nums;
    }
    .aug-draft-projected-label {
        color: var(--text-muted, oklch(0.7 0.015 260));
        font-size: 10px;
        font-weight: 700;
    }
    .aug-draft-projected-value {
        color: var(--aug-colour);
        font-size: 17px;
        font-weight: 850;
        letter-spacing: -0.02em;
    }
    .aug-draft-card-head {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }
    .aug-draft-art {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        border-radius: 11px;
        background: color-mix(in oklch, var(--aug-colour) 16%, var(--chip-bg));
    }
    .aug-draft-icon { width: 40px; height: 40px; }
    .aug-draft-heading {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        min-width: 0;
    }
    .aug-draft-name {
        font-size: 15px;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -0.005em;
    }
    .aug-draft-cat {
        padding: 2px 7px;
        border-radius: 999px;
        background: color-mix(in oklch, var(--aug-colour) 13%, transparent);
        color: var(--aug-colour);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
    }
    .aug-draft-desc {
        flex: 1;
        font-size: 12px;
        line-height: 1.55;
        color: var(--text-muted, oklch(0.7 0.015 260));
    }
    .aug-draft-val { color: var(--aug-colour); font-weight: 750; }
    .aug-draft-select-hint {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px solid var(--border, oklch(0.34 0.02 260));
        color: var(--text-muted, oklch(0.7 0.015 260));
        font-size: 11px;
        font-weight: 750;
        transition: color 180ms var(--ease-out);
    }
    button.aug-draft-card:hover .aug-draft-select-hint { color: var(--aug-colour); }

    /* The swap is a secondary action attached to the card it replaces. */
    .aug-slot-reroll {
        position: absolute;
        z-index: 2;
        top: 12px;
        right: 12px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 5px 8px;
        border-radius: 8px;
        border: 1px solid var(--border, oklch(0.34 0.02 260));
        background: var(--chip-bg, oklch(0.25 0.018 260));
        color: var(--text-muted, oklch(0.7 0.015 260));
        font-family: inherit;
        font-size: 10px;
        font-weight: 750;
        cursor: pointer;
        transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out),
                    background 180ms var(--ease-out);
    }
    .aug-slot-reroll:hover:not([disabled]) {
        color: var(--text, oklch(0.93 0.01 260));
        border-color: var(--aug-colour, var(--aug-gold));
        background: color-mix(in oklch, var(--aug-colour, var(--aug-gold)) 11%, var(--chip-bg));
    }
    .aug-slot-reroll:focus-visible {
        outline: 2px solid var(--focus-ring, oklch(0.72 0.14 250));
        outline-offset: 2px;
    }
    .aug-slot-reroll[disabled] { opacity: 0.58; cursor: not-allowed; }
    .aug-slot-reroll .aug-reroll-icon { width: 13px; height: 13px; }
    .aug-reroll-icon { width: 14px; height: 14px; flex: none; }

    /* Reveal: three columns, each pairing one original with its swap. */
    .aug-draft-compare {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        padding-top: 18px;
    }
    .aug-draft-compare-n {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        color: var(--text-dim, oklch(0.58 0.015 260));
        font-size: 10px;
        font-weight: 800;
    }
    .aug-draft-compare-option {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }
    .aug-draft-compare-label {
        color: var(--text-muted, oklch(0.7 0.015 260));
        font-size: 10px;
        font-weight: 750;
        text-align: center;
    }
    .aug-draft-compare .aug-draft-card { min-height: 215px; }
    .aug-draft-badges {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        min-height: 20px;
    }
    .aug-draft-badge {
        white-space: nowrap;
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--chip-bg, oklch(0.25 0.018 260));
        color: var(--text-muted, oklch(0.7 0.015 260));
        font-size: 9px;
        font-weight: 800;
    }
    .aug-draft-badge.is-pick-badge {
        background: color-mix(in oklch, var(--aug-good) 18%, transparent);
        color: var(--aug-good);
    }
    .aug-draft-badge.is-rank-badge {
        background: color-mix(in oklch, var(--aug-colour) 18%, var(--chip-bg));
        color: var(--aug-colour);
    }
    .aug-draft-badge.is-best-badge {
        background: var(--aug-good);
        color: oklch(0.2 0.025 150);
    }
    .aug-draft-badge.is-stale-badge { opacity: 0.82; }
    .aug-draft-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin-top: auto;
        padding: 8px;
        border-radius: 10px;
        background: var(--chip-bg, oklch(0.25 0.018 260));
        font-variant-numeric: tabular-nums;
    }
    .aug-draft-stat {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .aug-draft-stat-label {
        color: var(--text-dim, oklch(0.58 0.015 260));
        font-size: 9px;
        font-weight: 650;
    }
    .aug-draft-wr,
    .aug-draft-pick,
    .aug-draft-combo { font-size: 12px; font-weight: 800; }
    .aug-draft-wr.is-good { color: var(--aug-good); }
    .aug-draft-wr.is-bad { color: var(--aug-bad); }
    .aug-draft-pick { color: var(--text, oklch(0.93 0.01 260)); }
    .aug-draft-combo { color: var(--text-muted, oklch(0.7 0.015 260)); }
    .aug-draft-combo.is-good { color: var(--aug-good); }
    .aug-draft-combo.is-bad { color: var(--aug-bad); }
    .aug-verdict {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 8px;
        padding: 9px 11px;
        border: 1px solid var(--border, oklch(0.34 0.02 260));
        border-radius: 10px;
        background: var(--surface-raised, oklch(0.23 0.016 260));
        color: var(--text, oklch(0.93 0.01 260));
        font-size: 12px;
        font-variant-numeric: tabular-nums;
    }
    .aug-verdict-mark {
        min-width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--chip-bg, oklch(0.25 0.018 260));
        color: var(--text-muted, oklch(0.7 0.015 260));
        font-size: 10px;
        font-weight: 850;
    }
    .aug-verdict.is-hit {
        border-color: color-mix(in oklch, var(--aug-good) 46%, var(--border));
        background: color-mix(in oklch, var(--aug-good) 7%, var(--surface-raised));
    }
    .aug-verdict.is-hit .aug-verdict-mark {
        background: var(--aug-good);
        color: oklch(0.2 0.025 150);
    }
    .aug-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
    }

    .aug-settle-champ {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 10px 0 14px;
        font-size: 13px;
        font-weight: 700;
    }
    .aug-settle-champ img { width: 30px; height: 30px; border-radius: 50%; }
    .aug-settle-total {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted, #9aa0a6);
    }
    .aug-settle-total .is-good { color: #4ade80; }
    .aug-settle-total .is-bad  { color: #f87171; }
    .aug-settle-chips { display: flex; flex-direction: column; gap: 6px; }
    .aug-settle-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 10px;
        background: var(--chip-bg, #1f2530);
        font-size: 12px;
    }
    .aug-settle-chip.is-hit { box-shadow: inset 2px 0 0 #4ade80; }
    .aug-settle-n { font-weight: 700; color: var(--text-muted, #9aa0a6); flex: none; }
    .aug-settle-icon { width: 22px; height: 22px; flex: none; }
    .aug-settle-name { font-weight: 600; }
    .aug-settle-score {
        margin-left: auto;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    @media (max-width: 560px) {
        .aug-ladder {
            grid-template-columns: 1fr;
            gap: 8px;
            padding: 9px;
        }
        .aug-ladder-progress { justify-content: space-between; }
        .aug-ladder-pips { width: min(100%, 230px); }
        .aug-draft-row { grid-template-columns: 1fr; }
        button.aug-draft-card { min-height: 0; }
        .aug-draft-card { padding: 14px 12px 12px; }
        .aug-draft-card-head { padding-right: 76px; }
        .aug-draft-art { width: 44px; height: 44px; flex-basis: 44px; }
        .aug-draft-icon { width: 36px; height: 36px; }
        .aug-draft-compare {
            padding: 23px 0 12px;
            border-bottom: 1px solid var(--border, oklch(0.34 0.02 260));
        }
        .aug-draft-compare:last-child { border-bottom: 0; }
        .aug-draft-compare .aug-draft-card { min-height: 0; }
        .aug-champ-row { gap: 6px; }
        .aug-champ-img { width: 46px; height: 46px; }
    }
    .game-header {
        margin-bottom: 14px;
    }
    .game-header-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px 14px;
    }
    .game-header-text {
        min-width: 0;
        flex: 1 1 auto;
    }
    .game-kicker {
        display: block;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--text-dim);
        margin-bottom: 2px;
    }
    .game-header h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.15;
    }
    .game-sub {
        margin: 6px 0 0;
        color: var(--text-muted);
        font-size: 13px;
        line-height: 1.45;
        max-width: 40em;
    }
    /* Meta Pick play-tips tooltip (header) */
    .game-help-btn {
        position: relative;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        margin: 2px 0 0;
        padding: 0;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text-muted);
        cursor: help;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font: inherit;
    }
    .game-help-btn:hover,
    .game-help-btn:focus-visible {
        color: var(--text);
        border-color: var(--border-strong);
        background: var(--surface-raised);
        outline: none;
    }
    .game-help-icon {
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
    }
    .game-help-tip {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 40;
        width: min(320px, calc(100vw - 32px));
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--surface-raised);
        color: var(--text);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        text-align: left;
        white-space: pre-line;
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition: opacity 0.12s var(--ease-out), transform 0.12s var(--ease-out),
                    visibility 0.12s;
    }
    .game-help-tip::before {
        content: '';
        position: absolute;
        top: -5px;
        right: 10px;
        width: 9px;
        height: 9px;
        background: var(--surface-raised);
        border-left: 1px solid var(--border);
        border-top: 1px solid var(--border);
        transform: rotate(45deg);
    }
    .game-help-btn:hover .game-help-tip,
    .game-help-btn:focus-visible .game-help-tip,
    .game-help-btn:focus-within .game-help-tip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* 手機：貼在問號下方（不要 fixed 到螢幕底，會割裂） */
    @media (max-width: 560px) {
        .game-header-top {
            position: relative;
            z-index: 5;
        }
        .game-help-tip {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            left: auto;
            bottom: auto;
            width: min(calc(100vw - 28px), 340px);
            max-width: none;
            transform: translateY(-4px);
        }
        .game-help-tip::before {
            display: block;
            right: 10px;
        }
        .game-help-btn:hover .game-help-tip,
        .game-help-btn:focus-visible .game-help-tip,
        .game-help-btn:focus-within .game-help-tip {
            transform: translateY(0);
        }
    }
    .game-progress {
        font-size: 12px;
        color: var(--text-muted);
        margin: 0 0 8px;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
    }
    .game-progress[hidden] { display: none !important; }
    .game-notice {
        margin: 0 0 12px;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        font-size: 12px;
        line-height: 1.45;
    }
    .game-notice.is-miss {
        border-color: rgba(255, 77, 94, 0.28);
    }
    .game-notice.is-ok {
        border-color: rgba(245, 197, 24, 0.35);
    }
    .game-notice-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }
    /* Selected roster (pick phase) + compare faces (reveal) */
    .game-slots {
        margin: 0 0 12px;
    }
    .game-slots[hidden] { display: none !important; }
    .game-faces {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        align-items: start;
    }
    .game-face {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--surface-sunken);
        overflow: hidden;
        min-width: 0;
        box-sizing: border-box;
        /* 避免被 grid stretch 拉成非正方形 */
        align-self: start;
    }
    .game-face.is-empty {
        border-style: dashed;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-dim);
        font-size: 11px;
        background: transparent;
    }
    .game-face img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
        border-radius: 0;
    }
    /* 陣容對照：正方形 tier 框，頭像貼滿內緣（與主頁 .champ 同結構） */
    .game-face.is-home {
        overflow: hidden;
        border: 3px solid var(--tier-color, #555);
        background: var(--chip-bg, #1a1d21);
        /* 外框圓角；內緣由 overflow:hidden 裁切，icon 不服帖問題來自可見縫 */
        border-radius: 8px;
    }
    .game-face.is-home[data-tier="OP"] {
        border: 3px solid transparent;
        background:
            linear-gradient(#1f2530, #1f2530) padding-box,
            linear-gradient(135deg,
                #ffffff 0%, #e7d5ff 18%, #bcd6ff 36%,
                #ffd5ec 58%, #fff1c8 78%, #ffffff 100%) border-box;
        background-size: auto, 220% 220%;
        animation: prismShift 6s ease-in-out infinite;
        box-shadow: 0 0 8px rgba(220,180,255,0.45);
    }
    .game-face.is-home[data-tier="T1"] {
        border: 3px solid transparent;
        background:
            linear-gradient(#1f2530, #1f2530) padding-box,
            linear-gradient(135deg,
                #ffb380 0%,
                #ff5a3c 32%,
                #c8262c 62%,
                #ff8050 100%) border-box;
        background-size: auto, 220% 220%;
        animation: prismShift 9s ease-in-out infinite;
        box-shadow: 0 0 6px rgba(255,90,60,0.42);
    }
    .game-face.is-home img {
        /* 填滿 padding-box，圓角交給外層 overflow 裁 */
        border-radius: 0;
    }
    .game-face .wr {
        position: absolute;
        left: 2px;
        bottom: 2px;
        font-size: 10px;
        font-weight: 700;
        font-variant-numeric: tabular-nums lining-nums;
        padding: 1px 4px;
        border-radius: 6px;
        color: #e6e8eb;
        background: rgba(14,17,22,0.9);
        pointer-events: none;
        z-index: 2;
    }
    .game-face-mark {
        position: absolute;
        left: 3px;
        bottom: 3px;
        font-size: 9px;
        font-weight: 700;
        line-height: 1.2;
        padding: 1px 4px;
        border-radius: 3px;
        background: rgba(10, 11, 13, 0.78);
        color: #e8eaed;
        border: 1px solid rgba(255, 255, 255, 0.08);
        max-width: calc(100% - 6px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        z-index: 3;
    }
    .game-face-mark.is-hint {
        background: var(--accent);
        color: var(--accent-on);
        border-color: transparent;
    }
    /* 未選=灰階；正解=主頁 tier 框 + 全彩；選中未中=更灰（無額外外框） */
    .game-face.is-neither img {
        filter: grayscale(1);
        opacity: 0.55;
    }
    .game-face.is-neither .wr {
        opacity: 0.72;
    }
    /* 正解：僅主頁 tier 框 + 全彩，無額外外框 */
    .game-face.is-both img,
    .game-face.is-best img {
        filter: none;
        opacity: 1;
    }
    /* 選中未答對：肖像更灰（tier 框保留主頁色） */
    .game-face.is-yours img {
        filter: grayscale(0.95) brightness(0.7);
        opacity: 0.55;
    }
    .game-face.is-yours .wr {
        opacity: 0.65;
        color: #b8bcc2;
    }
    .game-face.is-pinned:not(.is-home) {
        border-color: var(--accent);
    }

    /* Pick pool — compact champ-like tiles */
    .game-pool {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }
    .game-pool[hidden] { display: none !important; }
    @media (max-width: 560px) {
        .game-pool { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    }
    .game-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 0 0 6px;
        margin: 0;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
        overflow: hidden;
        text-align: center;
        font: inherit;
        transition: border-color 0.12s, background 0.12s;
    }
    .game-tile:hover:not(:disabled) {
        border-color: var(--border-strong);
        background: var(--surface-raised);
    }
    .game-tile:disabled { cursor: default; }
    .game-tile.is-picked {
        border-color: rgba(245, 197, 24, 0.55);
        background: rgba(245, 197, 24, 0.06);
    }
    .game-tile.is-pinned {
        border-color: rgba(245, 197, 24, 0.65);
    }
    .game-tile-art {
        aspect-ratio: 1;
        background: var(--surface-sunken);
        overflow: hidden;
    }
    .game-tile-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .game-tile-name {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        padding: 0 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .game-tile-mark {
        position: absolute;
        top: 4px;
        left: 4px;
        font-size: 9px;
        font-weight: 700;
        padding: 1px 4px;
        border-radius: 3px;
        background: var(--accent);
        color: var(--accent-on);
    }

    /* Footer actions — no sticky black pad; primary CTA is clearly pressable */
    .game-footer {
        margin-top: 12px;
        padding: 0;
        border-top: 0;
        position: static;
        background: transparent;
        box-shadow: none;
    }
    .game-footer[hidden] { display: none !important; }
    .game-footer.is-miss {
        border-top: 0;
    }
    .game-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: stretch;
    }
    .game-actions .tool-btn {
        flex: 1 1 160px;
        min-height: 40px;
    }
    .game-actions .tool-btn[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
    }
    /* 下一回合／鎖定／結算：金色實心主按鈕 */
    .game-actions .tool-btn.game-cta:not([disabled]) {
        background: var(--accent, #f5c518);
        border-color: var(--accent, #f5c518);
        color: var(--accent-on, #14110a);
        font-size: 14px;
        font-weight: 800;
        border-radius: 10px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                    0 4px 14px -4px rgba(245, 197, 24, 0.45);
    }
    .game-actions .tool-btn.game-cta:not([disabled]):hover {
        filter: brightness(1.06);
        background: var(--accent-soft, #f5d780);
        border-color: var(--accent-soft, #f5d780);
        color: var(--accent-on, #14110a);
    }
    .game-actions .tool-btn.game-cta:not([disabled]):active {
        filter: brightness(0.96);
        transform: translateY(1px);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12) inset;
    }
    .game-actions .tool-btn.game-cta:not([disabled]):focus-visible {
        outline: 2px solid var(--accent, #f5c518);
        outline-offset: 2px;
    }
    :root[data-theme="light"] .game-actions .tool-btn.game-cta:not([disabled]) {
        color: #14110a;
    }
    .game-miss-bar {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .game-miss-score {
        font-size: 15px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--text);
        text-align: center;
    }
    .game-miss-btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .game-miss-btns .tool-btn {
        flex: none;
        min-width: 0;
        width: 100%;
    }

    /* Reveal panel — flat sections, hairline splits (team-eval style) */
    .game-result {
        margin-top: 4px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .game-result[hidden] { display: none !important; }
    .game-result-banner {
        margin: 0 0 12px;
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--surface);
        font-size: 12px;
        color: var(--text-muted);
    }
    .game-result-banner.is-ok {
        border-color: rgba(245, 197, 24, 0.3);
        color: var(--text);
    }
    .game-result-banner.is-miss {
        border-color: rgba(255, 77, 94, 0.28);
    }
    .game-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin-bottom: 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        overflow: hidden;
    }
    .game-metric {
        padding: 14px 16px;
        border-right: 1px solid var(--border);
        min-width: 0;
    }
    .game-metric:last-child { border-right: 0; }
    /* 手機：兩行 — 上你的/最佳並排，下 PR 全寬（橫向緊湊） */
    @media (max-width: 560px) {
        .game-metrics {
            grid-template-columns: 1fr 1fr;
        }
        .game-metric {
            padding: 10px 12px;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }
        .game-metric:nth-child(2) { border-right: 0; }
        .game-metric:nth-child(3) {
            grid-column: 1 / -1;
            border-right: 0;
            border-bottom: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 4px 10px;
            padding: 10px 12px;
        }
        .game-metric:nth-child(3) .game-metric-label {
            margin-bottom: 0;
            flex: 0 0 auto;
        }
        .game-metric:nth-child(3) .game-metric-value {
            flex: 1 1 auto;
            min-width: 0;
        }
        .game-metric:nth-child(3) .game-metric-sub {
            margin-top: 0;
            margin-left: auto;
        }
        .game-metric-label { font-size: 11px; margin-bottom: 4px; }
        .game-metric-value { font-size: clamp(18px, 5.2vw, 24px); }
        .game-metric-sub { font-size: 11px; margin-top: 3px; }
    }
    .game-metric-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-dim);
        margin-bottom: 6px;
    }
    .game-metric-value {
        display: block;
        font-size: clamp(22px, 3.2vw, 28px);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        color: var(--text);
        letter-spacing: -0.02em;
    }
    .game-metric-value.is-good { color: #7fe07f; }
    .game-metric-value.is-bad { color: #ff8a96; }
    /* #1/252 gold when Meta Pick is perfect / sole best */
    .game-metric-value.is-rank-top {
        color: var(--accent, #f5c518);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }
    .game-metric-sub.is-rank-top {
        color: var(--accent-soft, #f5d780);
        font-weight: 800;
        letter-spacing: 0.04em;
    }
    .game-metric-grade {
        display: inline-block;
        margin-left: 8px;
        font-size: 0.72em;
        font-weight: 800;
        color: var(--accent-soft);
        vertical-align: 0.05em;
    }
    .game-metric-grade.is-grade-s,
    .game-metric-sub.is-grade-s { color: #f5c518; }
    .game-metric-grade.is-grade-a,
    .game-metric-sub.is-grade-a { color: #4ade80; }
    .game-metric-grade.is-grade-b,
    .game-metric-sub.is-grade-b { color: #7dd3fc; }
    .game-metric-grade.is-grade-c,
    .game-metric-sub.is-grade-c { color: #d1d5db; }
    .game-metric-grade.is-grade-d,
    .game-metric-grade.is-grade-f,
    .game-metric-sub.is-grade-d,
    .game-metric-sub.is-grade-f { color: #f87171; }
    [data-theme="light"] .game-metric-grade.is-grade-a,
    [data-theme="light"] .game-metric-sub.is-grade-a { color: #15803d; }
    [data-theme="light"] .game-metric-grade.is-grade-b,
    [data-theme="light"] .game-metric-sub.is-grade-b { color: #0369a1; }
    [data-theme="light"] .game-metric-grade.is-grade-c,
    [data-theme="light"] .game-metric-sub.is-grade-c { color: #4b5563; }
    [data-theme="light"] .game-metric-grade.is-grade-d,
    [data-theme="light"] .game-metric-grade.is-grade-f,
    [data-theme="light"] .game-metric-sub.is-grade-d,
    [data-theme="light"] .game-metric-sub.is-grade-f { color: #c62828; }
    .game-metric-sub {
        display: block;
        margin-top: 5px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-dim);
        font-variant-numeric: tabular-nums;
    }

    .game-compare {
        margin: 0 0 16px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        overflow: hidden;
    }
    .game-compare-head {
        padding: 8px 12px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--text-dim);
        border-bottom: 1px solid var(--border);
        background: var(--surface-2);
    }
    .game-compare-row {
        padding: 10px 12px 12px;
        border-bottom: 1px solid var(--border);
    }
    .game-compare-row:last-of-type { border-bottom: 0; }
    .game-compare-row.is-yours,
    .game-compare-row.is-best {
        background: transparent;
    }
    .game-compare-meta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }
    .game-compare-label {
        font-size: 13px;
        font-weight: 650;
        color: var(--text);
    }
    .game-compare-wr {
        font-size: 14px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }
    /* Keep mild WR tone only on the number, not on roster identity colors */
    .game-compare-wr.is-good { color: var(--text); }
    .game-compare-wr.is-bad { color: var(--text-muted); }
    .game-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 14px;
        padding: 8px 12px 10px;
        border-top: 1px solid var(--border);
        background: var(--surface-2);
    }
    /* 圖例只放在「英雄池」列表下方；隊伍分析不顯示這行 */
    .game-legend-under-pool {
        margin: 0;
        border-top: 1px solid var(--border);
        border-radius: 0 0 10px 10px;
    }
    .game-tab-panel[data-game-tab-panel="pool"] .game-review-list {
        border-bottom: 0;
    }
    .game-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: var(--text-muted);
    }
    .game-legend-item i {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        border: 1px solid var(--border);
        background: #6b7280;
        display: inline-block;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .game-legend-item.is-neither i {
        background: #6b7280;
        border-color: #4b5563;
        filter: grayscale(1);
    }
    /* legend color rules live near .game-review-row below */

    /* Reveal sub-tabs: 英雄池 | 隊伍分析 */
    .game-panels {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        overflow: hidden;
    }
    .game-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid var(--border);
        background: var(--surface-2);
        padding: 0 4px;
    }
    .game-tab {
        appearance: none;
        border: 0;
        background: transparent;
        color: var(--text-muted);
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.03em;
        padding: 10px 14px;
        margin: 0;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }
    .game-tab:hover { color: var(--text); }
    .game-tab.is-active {
        color: var(--text);
        border-bottom-color: var(--accent, #f5c518);
    }
    .game-tab-panel {
        padding: 0;
    }
    .game-tab-panel[hidden] { display: none !important; }
    .game-tab-panel.is-active { display: block; }

    .game-review-list {
        margin: 0;
        padding: 6px;
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    /* Team analysis tab — best team only: radar + grade card */
    .game-analysis {
        padding: 10px 14px 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .draft-result .game-analysis.is-draft-analysis {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--surface);
    }
    .game-an-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 4px 16px;
    }
    /* 左欄：標題列 + 傷害 bar 緊貼；右欄大字勝率不再把 bar 往下推 */
    .game-an-head-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        min-width: 0;
        flex: 1 1 200px;
    }
    .game-an-head-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
        min-width: 0;
    }
    .game-an-head-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: 0.02em;
    }
    /* 雷達圖例：固定在圖表正下方置中 */
    .game-an-legend {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px 16px;
        margin: 2px 0 0;
        padding: 0 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
    }
    .game-an-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .game-an-swatch {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        display: inline-block;
        flex-shrink: 0;
    }
    .game-an-swatch.is-yours { background: rgba(196, 200, 208, 0.9); }
    .game-an-swatch.is-best { background: var(--accent, #f5c518); }
    /* 右上角大字勝率 */
    .game-an-wr-hero {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        line-height: 1;
        flex-shrink: 0;
        margin-left: auto;
        text-align: right;
    }
    .game-an-wr-num {
        font-size: clamp(28px, 6vw, 40px);
        font-weight: 800;
        font-variant-numeric: tabular-nums lining-nums;
        letter-spacing: -0.02em;
        color: var(--text);
    }
    .game-an-wr-hero.is-good .game-an-wr-num { color: #22c55e; }
    .game-an-wr-hero.is-bad .game-an-wr-num { color: #ff4d5e; }
    .game-an-wr-hero.is-even .game-an-wr-num { color: var(--text); }
    .game-an-wr-hero.is-empty .game-an-wr-num { color: var(--text-dim); }
    .game-an-wr-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--text-dim);
    }
    .game-an-wr-note {
        margin: 0;
        color: var(--text-muted);
        font-size: 11px;
        line-height: 1.5;
    }
    .draft-result .game-analysis.is-draft-analysis {
        width: 100%;
        padding: 8px 0 0;
    }
    /* 手機：標題放大、勝率放大、bar 再縮短 */
    @media (max-width: 560px) {
        .game-an-head-title {
            font-size: 15px;
            letter-spacing: 0.01em;
        }
        .game-an-wr-num {
            font-size: clamp(36px, 11vw, 48px);
        }
        .game-an-wr-label {
            font-size: 12px;
        }
        .game-an-mix {
            max-width: min(100%, 260px);
        }
        .game-an-mix-bar {
            height: 10px;
        }
        .game-an-mix-labels {
            font-size: 10px;
            gap: 4px 8px;
        }
    }
    /* 紅 AD · 藍 AP · 白 True — bar 縮短；用 flex-grow 比例填滿，不靠 width% */
    .game-an-mix {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
        max-width: min(100%, 360px);
        margin: 0;
        padding: 0;
    }
    .game-an-mix-main {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
        width: 100%;
    }
    .game-an-mix-bar {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        height: 12px;
        width: 100%;
        border-radius: 999px;
        overflow: hidden;
        background: color-mix(in srgb, var(--text) 8%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
    }
    .game-an-mix-bar > .game-an-mix-seg {
        display: block;
        height: 100%;
        /* flex-basis set inline as N% — three segments sum to 100% */
        flex-grow: 0;
        flex-shrink: 0;
        box-sizing: border-box;
        min-width: 0;
    }
    /* is-phys (not is-ad): class names with "ad" get nuked by adblockers */
    .game-an-mix-bar > .game-an-mix-seg.is-phys { background: #ef4444; }
    .game-an-mix-bar > .game-an-mix-seg.is-magic { background: #3b82f6; }
    .game-an-mix-bar > .game-an-mix-seg.is-true {
        background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
        box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.45);
    }
    [data-theme="light"] .game-an-mix-bar > .game-an-mix-seg.is-true {
        background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
        box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.35);
    }
    .game-an-mix-labels {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
    }
    .game-an-mix-labels > .game-an-mix-lab {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .game-an-mix-labels i {
        width: 8px;
        height: 8px;
        border-radius: 2px;
        display: inline-block;
        flex-shrink: 0;
    }
    .game-an-mix-labels .game-an-mix-lab.is-phys { color: #f87171; }
    .game-an-mix-labels .game-an-mix-lab.is-phys i { background: #ef4444; }
    .game-an-mix-labels .game-an-mix-lab.is-magic { color: #60a5fa; }
    .game-an-mix-labels .game-an-mix-lab.is-magic i { background: #3b82f6; }
    .game-an-mix-labels .game-an-mix-lab.is-true { color: var(--text-muted); }
    .game-an-mix-labels .game-an-mix-lab.is-true i {
        background: #e2e8f0;
        box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.5);
    }
    [data-theme="light"] .game-an-mix-labels .game-an-mix-lab.is-phys { color: #dc2626; }
    [data-theme="light"] .game-an-mix-labels .game-an-mix-lab.is-magic { color: #2563eb; }
    /* 雷達靠左貼齊；多出的寬度給右側評分（字要大） */
    .game-an-dims-split.is-best-only {
        display: grid;
        grid-template-columns: minmax(0, max-content) minmax(200px, 1fr);
        gap: 8px 14px;
        align-items: center;
        justify-content: start;
        margin-top: 0;
        padding-top: 0;
    }
    /* bar 已掛在 head-left 內，與雷達之間只留小縫 */
    .game-analysis > .game-an-head + .game-an-dims-split {
        margin-top: 2px;
    }
    @media (max-width: 560px) {
        .game-an-dims-split.is-best-only { grid-template-columns: 1fr; }
    }
    .game-an-radar-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 靠左，不水平撐滿留空洞 */
        gap: 4px;
        min-width: 0;
        width: max-content;
        max-width: 100%;
    }
    .game-an-radar {
        min-width: 0;
        overflow: visible;
        width: min(100%, 300px);
    }
    .game-an-radar .comp-radar {
        display: block;
        width: 100%;
        height: auto;
        max-height: 300px;
        margin: 0; /* 不置中 */
        overflow: visible;
    }
    .game-an-radar-col .game-an-legend {
        justify-content: flex-start; /* 圖例跟著雷達靠左 */
        width: 100%;
        padding-left: 8px;
    }
    .game-an-grades {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        min-width: 0;
        width: 100%;
    }
    @media (max-width: 400px) {
        .game-an-grades { grid-template-columns: 1fr; }
    }
    .game-an-grade {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 14px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--surface-2);
        min-width: 0;
    }
    .game-an-grade-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .game-an-grade-val {
        font-size: 24px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        color: var(--text);
        flex-shrink: 0;
    }
    .game-an-grade.is-num .game-an-grade-val {
        font-size: 20px;
        color: var(--accent, #f5c518);
    }
    .game-an-grade.is-grade-s .game-an-grade-val { color: #f5c518; }
    .game-an-grade.is-grade-ap .game-an-grade-val,
    .game-an-grade.is-grade-a .game-an-grade-val { color: #4ade80; }
    .game-an-grade.is-grade-bp .game-an-grade-val,
    .game-an-grade.is-grade-b .game-an-grade-val { color: #7dd3fc; }
    .game-an-grade.is-grade-cp .game-an-grade-val,
    .game-an-grade.is-grade-c .game-an-grade-val { color: #d1d5db; }
    .game-an-grade.is-grade-d .game-an-grade-val,
    .game-an-grade.is-grade-f .game-an-grade-val { color: #f87171; }
    [data-theme="light"] .game-an-grade.is-grade-a .game-an-grade-val,
    [data-theme="light"] .game-an-grade.is-grade-ap .game-an-grade-val { color: #15803d; }
    [data-theme="light"] .game-an-grade.is-grade-b .game-an-grade-val,
    [data-theme="light"] .game-an-grade.is-grade-bp .game-an-grade-val { color: #0369a1; }
    [data-theme="light"] .game-an-grade.is-grade-c .game-an-grade-val,
    [data-theme="light"] .game-an-grade.is-grade-cp .game-an-grade-val { color: #4b5563; }
    [data-theme="light"] .game-an-grade.is-grade-d .game-an-grade-val,
    [data-theme="light"] .game-an-grade.is-grade-f .game-an-grade-val { color: #c62828; }
    /* 手機也維持 2 欄；列更緊湊以免擠 */
    @media (max-width: 520px) {
        .game-review-list {
            grid-template-columns: 1fr 1fr;
            gap: 2px 4px;
            padding: 4px;
        }
        .game-review-row {
            grid-template-columns: 16px minmax(0, 1fr) auto;
            gap: 3px;
            padding: 5px 4px;
        }
        .game-review-rank { font-size: 10px; }
        .game-review-face {
            width: 24px;
            height: 24px;
        }
        .game-review-face img,
        .game-review-ph {
            width: 24px;
            height: 24px;
        }
        .game-review-name { font-size: 12px; }
        .game-review-wr {
            font-size: 11px;
            min-width: 2.8em;
        }
        .game-review-main { gap: 5px; padding: 3px 6px 3px 3px; }
        .game-review-doodle {
            left: -3px;
            top: -4px;
            width: calc(100% + 10px);
            height: calc(100% + 8px);
        }
    }
    .game-review-row {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
        padding: 8px 8px;
        margin: 0;
        border-radius: 8px;
        border: 1px solid transparent;
        background: transparent;
        box-sizing: border-box;
        min-width: 0;
    }
    /* 頭像 + 名字；寬度跟內容走（勿被 grid 1fr 拉滿，否則黃圈會爆大） */
    .game-review-main {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        width: max-content;
        max-width: 100%;
        justify-self: start;
        padding: 4px 10px 4px 4px;
        box-sizing: border-box;
        min-width: 0;
    }
    .game-review-face {
        position: relative;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        display: block;
        z-index: 1;
    }
    .game-review-face img,
    .game-review-ph {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        object-fit: cover;
        display: block;
        background: var(--surface-sunken);
        border: 1px solid var(--border);
        box-sizing: border-box;
    }
    .game-review-main.is-picked .game-review-face img,
    .game-review-main.is-picked .game-review-ph {
        border-color: transparent;
    }
    /* 選取：緊貼頭像+名字的白塗鴉圈（彩度/強度約降 20%） */
    .game-review-doodle {
        position: absolute;
        left: -5px;
        top: -6px;
        width: calc(100% + 14px);
        height: calc(100% + 12px);
        pointer-events: none;
        overflow: visible;
        /* 純白 → 略灰且 opacity 0.92×0.8≈0.74 */
        color: rgba(210, 214, 220, 0.74);
        filter: drop-shadow(0 0 1.5px rgba(210, 214, 220, 0.2));
        z-index: 0;
    }
    [data-theme="light"] .game-review-doodle {
        color: rgba(55, 65, 81, 0.62);
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
    }
    .game-review-rank {
        font-size: 11px;
        color: var(--text-dim);
        font-variant-numeric: tabular-nums;
        text-align: center;
    }
    .game-review-name {
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        color: var(--text);
        z-index: 1;
        position: relative;
    }
    .game-review-wr {
        font-size: 12px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        min-width: 3.5em;
        text-align: right;
        color: var(--text-muted);
    }
    /* 未選（非正解）：灰階 */
    .game-review-row.is-neither {
        color: var(--text-dim);
    }
    .game-review-row.is-neither img,
    .game-review-row.is-neither .game-review-ph {
        filter: grayscale(1);
        opacity: 0.62;
    }
    .game-review-row.is-neither .game-review-name,
    .game-review-row.is-neither .game-review-wr,
    .game-review-row.is-neither .game-review-rank {
        color: var(--text-dim);
        opacity: 0.85;
    }
    /* 選取未中：白圈 + 灰階 */
    .game-review-row.is-yours .game-review-name,
    .game-review-row.is-yours .game-review-wr,
    .game-review-row.is-yours .game-review-rank {
        color: var(--text-dim);
        opacity: 0.85;
    }
    .game-review-row.is-yours img,
    .game-review-row.is-yours .game-review-ph {
        filter: grayscale(1);
        opacity: 0.62;
    }
    /* 正解（含選中）：黃字 + 全彩 */
    .game-review-row.is-best .game-review-name,
    .game-review-row.is-best .game-review-wr,
    .game-review-row.is-both .game-review-name,
    .game-review-row.is-both .game-review-wr {
        color: var(--accent, #f5c518);
    }
    .game-review-row.is-best img,
    .game-review-row.is-both img {
        filter: none;
        opacity: 1;
    }
    .game-review-row.is-best .game-review-rank,
    .game-review-row.is-both .game-review-rank {
        color: color-mix(in srgb, var(--accent, #f5c518) 55%, var(--text-dim));
    }
    /* 圖例 */
    .game-legend-item.is-picked i {
        display: inline-block;
        background: transparent;
        border: 2px solid rgba(210, 214, 220, 0.74);
        border-radius: 50%;
        box-shadow: none;
        transform: rotate(-8deg);
    }
    .game-legend-item.is-picked {
        color: var(--text);
    }
    .game-legend-item.is-correct {
        color: var(--accent, #f5c518);
        font-weight: 700;
    }
    .game-legend-item.is-correct i {
        display: none;
    }

    :root[data-theme="light"] .game-face-mark {
        background: rgba(255, 255, 255, 0.9);
        color: #1a1e26;
        border-color: rgba(0, 0, 0, 0.08);
    }
    :root[data-theme="light"] .game-legend-item.is-picked i {
        border-color: rgba(17, 24, 39, 0.75);
    }
    :root[data-theme="light"] .game-footer { background: transparent; }

    /* Meta Pick 5-round settlement + global leaderboard */
    .game-settle[hidden] { display: none !important; }
    .game-settle { margin-top: 12px; }
    .game-settle-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        padding: 16px 14px 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .game-settle-kicker {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-dim);
        text-align: center;
    }
    .game-settle-avg {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
        line-height: 1;
    }
    .game-settle-avg-prefix {
        font-size: clamp(14px, 3.2vw, 18px);
        font-weight: 800;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        transform: translateY(-0.15em);
    }
    .game-settle-avg-num {
        font-size: clamp(40px, 9vw, 56px);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--accent, #f5c518);
        letter-spacing: -0.02em;
    }
    .game-settle-avg-sub {
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-dim);
        font-variant-numeric: tabular-nums;
        margin-top: -2px;
    }
    /* Rank grade tones (same ladder as analysis letter grades / Meta Pick PR). */
    .game-settle-avg-num.is-grade-s,
    .game-settle-chip-r.is-grade-s,
    .game-board-avg.is-grade-s,
    .game-board-rk.is-grade-s { color: #f5c518; }
    .game-settle-avg-num.is-grade-a,
    .game-settle-chip-r.is-grade-a,
    .game-board-avg.is-grade-a,
    .game-board-rk.is-grade-a { color: #4ade80; }
    .game-settle-avg-num.is-grade-b,
    .game-settle-chip-r.is-grade-b,
    .game-board-avg.is-grade-b,
    .game-board-rk.is-grade-b { color: #7dd3fc; }
    .game-settle-avg-num.is-grade-c,
    .game-settle-chip-r.is-grade-c,
    .game-board-avg.is-grade-c,
    .game-board-rk.is-grade-c { color: #d1d5db; }
    .game-settle-avg-num.is-grade-d,
    .game-settle-avg-num.is-grade-f,
    .game-settle-chip-r.is-grade-d,
    .game-settle-chip-r.is-grade-f,
    .game-board-avg.is-grade-d,
    .game-board-avg.is-grade-f,
    .game-board-rk.is-grade-d,
    .game-board-rk.is-grade-f { color: #f87171; }
    [data-theme="light"] .game-settle-avg-num.is-grade-a,
    [data-theme="light"] .game-settle-chip-r.is-grade-a,
    [data-theme="light"] .game-board-avg.is-grade-a,
    [data-theme="light"] .game-board-rk.is-grade-a { color: #15803d; }
    [data-theme="light"] .game-settle-avg-num.is-grade-d,
    [data-theme="light"] .game-settle-avg-num.is-grade-f,
    [data-theme="light"] .game-settle-chip-r.is-grade-d,
    [data-theme="light"] .game-settle-chip-r.is-grade-f,
    [data-theme="light"] .game-board-avg.is-grade-d,
    [data-theme="light"] .game-board-avg.is-grade-f,
    [data-theme="light"] .game-board-rk.is-grade-d,
    [data-theme="light"] .game-board-rk.is-grade-f { color: #c62828; }
    .game-settle-avg-den {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-muted);
    }
    .game-settle-avg-label {
        text-align: center;
        font-size: 12px;
        color: var(--text-muted);
        margin-top: -4px;
    }
    .game-settle-ranks {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin: 4px 0 2px;
    }
    .game-settle-chip {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 56px;
        padding: 6px 8px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--text) 4%, transparent);
    }
    .game-settle-chip-n {
        font-size: 10px;
        font-weight: 600;
        color: var(--text-dim);
    }
    .game-settle-chip-r {
        font-size: 15px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }
    .game-board-rk {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .game-board-rk-sep {
        color: var(--text-dim);
        font-weight: 500;
    }
    .game-board-avg {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .game-settle-form {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 4px;
    }
    .game-settle-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
    }
    .game-settle-input {
        width: 100%;
        box-sizing: border-box;
        min-height: 40px;
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        font-size: 15px;
    }
    .game-settle-input:focus {
        outline: 2px solid color-mix(in srgb, var(--accent, #f5c518) 55%, transparent);
        outline-offset: 1px;
    }
    .game-board-nick {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .game-board-nick-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .game-main-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .game-main-hint {
        margin-left: 8px;
        font-weight: 500;
        font-size: 11px;
        color: var(--text-muted);
    }
    .game-main-selected {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
    }
    .game-main-selected-name {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .game-main-none {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 4px 10px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text-muted);
        font-size: 12px;
        cursor: pointer;
    }
    .game-main-none.is-active {
        border-color: color-mix(in srgb, var(--accent, #f5c518) 70%, var(--border));
        color: var(--text);
        background: color-mix(in srgb, var(--accent, #f5c518) 14%, var(--bg));
    }
    .game-main-none:disabled { opacity: 0.7; cursor: default; }
    .game-main-search { min-height: 36px; font-size: 13px; }
    .game-main-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
        gap: 6px;
        max-height: 148px;
        overflow: auto;
        padding: 6px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--bg) 88%, var(--panel, var(--bg)));
    }
    .game-main-chip {
        width: 100%;
        aspect-ratio: 1;
        padding: 0;
        border-radius: 8px;
        border: 1px solid transparent;
        background: color-mix(in srgb, var(--text) 6%, transparent);
        overflow: hidden;
        cursor: pointer;
        line-height: 0;
    }
    .game-main-chip img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .game-main-chip.is-active {
        border-color: color-mix(in srgb, var(--accent, #f5c518) 85%, var(--border));
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #f5c518) 45%, transparent);
    }
    .game-main-chip.is-hidden { display: none; }
    .game-main-chip:disabled { opacity: 0.7; cursor: default; }
    .game-main-avatar {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: color-mix(in srgb, var(--text) 10%, transparent);
        border: 1px solid var(--border);
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1;
    }
    .game-main-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .game-main-avatar.is-preview {
        width: 40px;
        height: 40px;
        font-size: 16px;
        font-weight: 700;
    }
    .game-main-avatar.is-board {
        width: 26px;
        height: 26px;
    }
    .game-main-avatar.is-empty {
        opacity: 0.45;
    }
    .game-settle-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .game-settle-actions .tool-btn { width: 100%; min-height: 36px; }
    .game-settle-status {
        font-size: 12px;
        text-align: center;
        color: var(--text-muted);
        padding: 6px 8px;
        border-radius: 8px;
        border: 1px solid var(--border);
    }
    .game-settle-status.is-ok {
        border-color: rgba(245, 197, 24, 0.35);
        color: var(--text);
    }
    .game-settle-status.is-miss {
        border-color: rgba(255, 77, 94, 0.28);
        color: var(--text-muted);
    }

    .game-board {
        margin-top: 28px;
        padding-top: 18px;
        border-top: 1px solid var(--border);
    }
    .game-board-head { margin-bottom: 10px; }
    .game-board-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text);
    }
    .game-board-sub {
        margin: 4px 0 0;
        font-size: 12px;
        color: var(--text-muted);
    }
    .game-board-meta {
        font-size: 11px;
        color: var(--text-dim);
        margin-bottom: 8px;
    }
    .game-board-empty {
        margin: 0;
        padding: 14px 12px;
        border-radius: 8px;
        border: 1px dashed var(--border);
        color: var(--text-muted);
        font-size: 13px;
        text-align: center;
    }
    .game-board-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        font-variant-numeric: tabular-nums;
    }
    .game-board-table th,
    .game-board-table td {
        padding: 8px 6px;
        text-align: left;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }
    .game-board-table th {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-dim);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .game-board-pos { width: 2.2em; color: var(--text-dim); }
    .game-board-nick { font-weight: 600; color: var(--text); word-break: break-word; }
    .game-board-avg { font-weight: 700; color: var(--accent, #f5c518); white-space: nowrap; }
    .game-board-ranks { color: var(--text-muted); font-size: 12px; }
    @media (max-width: 520px) {
        .game-board-ranks { display: none; }
        .game-settle-actions { grid-template-columns: 1fr; }
    }

    /* ===== Zen panel pass ==================================================
       Keep the information architecture intact, but make the surfaces quiet:
       the panel is one elevation, its rows are one step below, and color is
       reserved for the headline state.  Pick-rate tiers still differ by
       weight, not hue. */
    .detail,
    .side-panel {
        background: var(--panel-surface);
        border: 1px solid var(--panel-line);
        box-shadow: var(--panel-shadow);
    }
    .detail-main-tabs > .detail-tab-rail {
        background: color-mix(in oklab, var(--panel-surface) 94%, transparent);
        border-bottom-color: var(--panel-line);
    }
    .core-group,
    .item-build-card,
    .boot-rail-row,
    .cg-option,
    .rec-row {
        background: var(--panel-inner);
        border-color: var(--panel-line);
    }
    .item-build-card,
    .core-group,
    .boot-rail-row.is-top {
        border-color: color-mix(in oklab, var(--accent) 18%, var(--panel-line));
    }
    .boot-rail-row.is-top {
        background: color-mix(in oklab, var(--accent) 5%, var(--panel-inner));
    }
    .item-build-icons,
    .cg-option,
    .boot-rail-row,
    .rec-row:hover {
        background: var(--panel-quiet);
    }
    .item-build-card:hover,
    .rec-row:hover {
        border-color: color-mix(in oklab, var(--accent) 30%, var(--panel-line));
        transform: none;
    }
    .rec-row.least-fit,
    .rec-row.least-fit:hover {
        background: var(--panel-inner);
        border-color: var(--panel-line);
    }

    /* WR carries meaning; item and augment values use the shared five-step
       champion-relative lift scale instead of collapsing to three tones. */
    .team-eval-wr.is-good .team-wr-num,
    .item-build-wr.is-good,
    .cg-core-wr.is-good,
    .cg-option-wr.is-good,
    .boot-rail-wr.is-good {
        color: var(--wr-positive);
    }
    .team-eval-wr.is-bad .team-wr-num,
    .item-build-wr.is-bad,
    .cg-core-wr.is-bad,
    .cg-option-wr.is-bad,
    .boot-rail-wr.is-bad {
        color: var(--wr-negative);
    }
    .team-eval-wr.is-even .team-wr-num,
    .item-build-wr.is-even,
    .cg-core-wr.is-even,
    .cg-option-wr.is-even,
    .boot-rail-wr.is-even {
        color: var(--wr-neutral);
    }
    .item-build-wr.wr-5, .cg-core-wr.wr-5, .cg-option-wr.wr-5,
    .boot-rail-wr.wr-5, .aug .awr.wr-5 { color: var(--wr-5); }
    .item-build-wr.wr-4, .cg-core-wr.wr-4, .cg-option-wr.wr-4,
    .boot-rail-wr.wr-4, .aug .awr.wr-4 { color: var(--wr-4); }
    .item-build-wr.wr-3, .cg-core-wr.wr-3, .cg-option-wr.wr-3,
    .boot-rail-wr.wr-3, .aug .awr.wr-3 { color: var(--wr-3); }
    .item-build-wr.wr-2, .cg-core-wr.wr-2, .cg-option-wr.wr-2,
    .boot-rail-wr.wr-2, .aug .awr.wr-2 { color: var(--wr-2); }
    .item-build-wr.wr-1, .cg-core-wr.wr-1, .cg-option-wr.wr-1,
    .boot-rail-wr.wr-1, .aug .awr.wr-1 { color: var(--wr-1); }
    .team-delta.tone-pos-2,
    .team-delta.tone-pos-1,
    .team-delta.tone-neg-1,
    .team-delta.tone-neg-2,
    .team-delta.tone-zero {
        color: var(--wr-neutral);
    }
    .team-delta.tone-pos-2,
    .team-delta.tone-neg-2 { font-weight: 700; }

    /* Selection frequency is useful context, not a second heatmap. */
    .cluster-pick.pick-1,
    .cg-option-pick.pick-1,
    .item-build-pick.pick-1,
    .boot-rail-pick.pick-1,
    .cg-core-share.pick-1,
    .aug .alift.pick-1,
    .cluster-pick.pick-2,
    .cg-option-pick.pick-2,
    .item-build-pick.pick-2,
    .boot-rail-pick.pick-2,
    .cg-core-share.pick-2,
    .aug .alift.pick-2,
    .cluster-pick.pick-3,
    .cg-option-pick.pick-3,
    .item-build-pick.pick-3,
    .boot-rail-pick.pick-3,
    .cg-core-share.pick-3,
    .aug .alift.pick-3,
    .cluster-pick.pick-4,
    .cg-option-pick.pick-4,
    .item-build-pick.pick-4,
    .boot-rail-pick.pick-4,
    .cg-core-share.pick-4,
    .aug .alift.pick-4,
    .cluster-pick.pick-5,
    .cg-option-pick.pick-5,
    .item-build-pick.pick-5,
    .boot-rail-pick.pick-5,
    .cg-core-share.pick-5,
    .aug .alift.pick-5 {
        color: var(--pick-quiet);
    }
    .cluster-pick.pick-1,
    .cg-option-pick.pick-1,
    .item-build-pick.pick-1,
    .boot-rail-pick.pick-1,
    .cg-core-share.pick-1,
    .aug .alift.pick-1 { font-weight: 500; }
    .cluster-pick.pick-5,
    .cg-option-pick.pick-5,
    .item-build-pick.pick-5,
    .boot-rail-pick.pick-5,
    .cg-core-share.pick-5,
    .aug .alift.pick-5 { font-weight: 700; }
    .lane-badge.lane-popular,
    .lane-badge.lane-winrate,
    .lane-badge.lane-combined {
        background: transparent;
        color: var(--text-muted);
        border: 1px solid var(--panel-line);
    }

    /* The leading rail row is a recommendation, not an active selection.
       Use neutral elevation and type weight instead of a full accent outline. */
    .boot-rail-row.is-top {
        background: color-mix(in oklab, var(--panel-inner) 84%, var(--text) 16%);
        border-color: color-mix(in oklab, var(--panel-line) 58%, var(--text-muted) 42%);
    }
    [data-theme="light"] .boot-rail-row.is-top {
        background: color-mix(in oklab, var(--panel-inner) 84%, var(--text) 16%);
        border-color: color-mix(in oklab, var(--panel-line) 58%, var(--text-muted) 42%);
    }
    .boot-rail-row.is-top .boot-rail-name { font-weight: 650; }

    /* Reduced-motion override.  Disables prismShift / shineSweep /
       slideDown so vestibular-sensitive users don't get hue drift and
       sweep effects across the page. */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }
        ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
            animation: none !important;
        }
    }

    /* Unique augments grouped by primary purpose, then highest source-pool weight. */
.champ-pools { padding: 0 0 16px; color: var(--text); }
.champ-pools-summary { font-weight: 600; margin: 0 0 8px; }
.champ-pools-rank { padding: 4px 2px; border: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: help; margin-left: 6px; color: var(--text-muted); }
.champ-pools-rank:hover { color: var(--text); }
.champ-pools-rank:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.champ-pools-help { margin-top: 24px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.champ-pools-help > summary { cursor: pointer; width: fit-content; padding: 6px 0; }
.champ-pools-help > p { margin: 8px 0 0; max-width: 70ch; }
.champ-pools-frequency { margin-top: 2px; }
.champ-pool-frequency-body { width: 100%; max-width: 580px; padding: 12px 0 8px; }
.champ-pool-frequency-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 18px; font-size: 12px; }
.champ-pool-frequency-chart { display: grid; grid-template-columns: 44px minmax(0, 1fr) 76px; gap: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.champ-pool-frequency-labels, .champ-pool-frequency-bars, .champ-pool-frequency-values { display: grid; grid-template-rows: repeat(5, 26px); gap: 14px; align-items: center; }
.champ-pool-frequency-values { text-align: right; font-weight: 500; }
.champ-pool-frequency-bars { position: relative; }
.champ-pool-frequency-bars::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border-strong); }
.champ-pool-frequency-bars > span { position: relative; display: flex; align-items: center; height: 26px; }
.champ-pool-frequency-bars i { display: block; height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 68%, var(--panel-inner)); }
.champ-pool-frequency-bars i.is-baseline { background: color-mix(in srgb, var(--accent) 35%, var(--panel-inner)); }
.champ-pool-frequency-axis { position: relative; display: flex; justify-content: space-between; margin: 10px 88px 0 56px; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.champ-pool-frequency-axis > span:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); }
.champ-pool-frequency-body > p { margin: 18px 0 0; max-width: 70ch; }
.champ-pools-status { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; }
.champ-pools-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Pool-complexity tooltip: a compact quantity instrument. */
.item-float-tip:has(.champ-pool-complexity-tip) { filter: none; }
.item-float-tip.is-visible:has(.champ-pool-complexity-tip) { display: block !important; }
.item-float-tip .item-tip-card.champ-pool-complexity-tip { padding: 16px 18px 14px; border-radius: var(--r-md); background: var(--panel-surface); border-color: var(--panel-line); color: var(--text); box-shadow: var(--panel-shadow); }
.item-float-tip .item-tip-card.champ-pool-complexity-tip::after { background: var(--panel-surface); border-color: var(--panel-line); }
.champ-pool-complexity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-muted); }
.champ-pool-complexity-head > b { color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.champ-pool-complexity-head small { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.champ-pool-complexity-scale { margin-top: 14px; }
.champ-pool-complexity-chart { position: relative; padding: 40px 4px 0; }
.champ-pool-complexity-current { position: absolute; top: 0; left: var(--pool-label-position); transform: translateX(-50%); display: flex; align-items: baseline; gap: 4px; color: var(--accent-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.champ-pool-complexity-current > b { font-size: 22px; line-height: 1; font-weight: 600; }
.champ-pool-complexity-current > span { font-size: 11px; font-weight: 400; }
.champ-pool-complexity-track { position: relative; height: 3px; border-radius: 99px; background: var(--panel-line); }
.champ-pool-complexity-fill { position: absolute; inset: 0 auto 0 0; width: var(--pool-position); border-radius: inherit; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.champ-pool-complexity-tick { position: absolute; top: -3px; width: 1px; height: 9px; background: var(--panel-line); }
.champ-pool-complexity-dot { position: absolute; left: var(--pool-position); top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--panel-surface); }
.champ-pool-complexity-dot::before { content: ""; position: absolute; bottom: 13px; left: 3.5px; width: 1px; height: 7px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.champ-pool-complexity-ends { display: flex; justify-content: space-between; gap: 16px; margin-top: 13px; color: var(--text-muted); font-size: 10px; }
.champ-pool-complexity-ends > span:last-child { text-align: right; }
.champ-pool-complexity-ends b { display: block; margin-top: 3px; color: var(--text); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

.champ-pools-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.champ-pools-purpose-filters { margin-top: 8px; }
.champ-pool-rarity-chip { --role-color: var(--accent); min-height: 40px; }
.champ-pool-category { margin-top: 28px; }
.champ-pool-category > h3 { display: flex; align-items: baseline; gap: 12px; font-size: 20px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.champ-pool-category > h3 small { margin-left: auto; color: var(--text-muted); font-weight: 400; font-size: 12px; }
.champ-pool-weight-group { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.champ-pool-weight-group > h4 { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); }
.champ-pool-weight-group > h4 b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.champ-pool-weight-group > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 12px; list-style: none; margin: 0; padding: 0; }
.champ-pool-augment { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; text-align: left; padding: 6px; border: 1px solid transparent; border-radius: 6px; color: var(--text); background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.champ-pool-augment img { flex: 0 0 32px; width: 32px; height: 32px; }
.champ-pool-augment small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.champ-pool-augment:hover { background: var(--panel-inner); border-color: var(--border); }
.champ-pool-augment:focus-visible, .champ-pools-help > summary:focus-visible, .champ-pools-source > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.item-float-tip:has(.champ-pool-tip) { filter: none; pointer-events: auto; }
.item-float-tip.is-visible:has(.champ-pool-tip) { display: block !important; }
.item-tip-card.champ-pool-tip { background: var(--panel-surface); border-color: var(--panel-line); color: var(--text); box-shadow: var(--panel-shadow); padding: 14px 16px; }
.champ-pool-tip::after { background: var(--panel-surface); border-color: var(--panel-line); }
.champ-pool-tip .item-tip-name { color: var(--accent-soft); font-size: 14px; }
.champ-pool-tip .item-tip-icon { background: var(--augment-icon-surface); border-color: var(--border); box-shadow: none; }
.champ-pool-tip .item-tip-sub { color: var(--text-muted); font-size: 11px; }
.champ-pool-tip-stats { margin: 12px 0; padding: 12px 0; border-top: 1px solid var(--panel-line); border-bottom: 1px solid var(--panel-line); }
.champ-pool-tip-context { color: var(--text-muted); font-size: 11px; margin-bottom: 8px; }
.champ-pool-tip-stats dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.champ-pool-tip-stats dt { color: var(--text-muted); font-size: 11px; margin-bottom: 2px; }
.champ-pool-tip-note { margin: 8px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.champ-pool-tip-stats dd { margin: 0; color: var(--text); font-size: 22px; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
.champ-pool-tip .item-tip-desc, .champ-pool-tip .item-tip-desc .item-tip-line { color: color-mix(in srgb, var(--text) 72%, var(--text-muted)); font-size: 12px; line-height: 1.6; }
.champ-pool-tip-sources { padding: 12px 0 0; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--panel-line); }
.champ-pool-tip-sources > strong { font-weight: 500; }
.champ-pool-tip-sources ul { padding: 0; margin: 8px 0 0; list-style: none; }
.champ-pool-tip-sources li { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; }
.champ-pool-tip-sources b { font-variant-numeric: tabular-nums; }
.champ-pools-source { margin-top: 24px; font-size: 13px; color: var(--text-muted); }
.champ-pools-source > summary { cursor: pointer; padding: 12px 0; }
@media (max-width: 560px) {
    .champ-pool-weight-group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .champ-pool-weight-group > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .champ-pool-augment { font-size: 12px; overflow-wrap: anywhere; }
}

    /* Neutral tag + a small win-green dot: the green marks "recommended"
       without the whole pill glowing mint, and the hairline border stays
       quiet next to the panel lines instead of reading as a halo. */
    .fit-chip.recommended-pool-chip {
        font: inherit;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.02em;
        gap: 7px;
        padding: 5px 12px;
        background: var(--panel-inner);
        border-color: var(--panel-line);
        color: var(--text);
        cursor: pointer;
        transition: background-color var(--dur-2) var(--ease),
                    border-color var(--dur-2) var(--ease);
    }
    .fit-chip.recommended-pool-chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--wr-5);
        flex: none;
    }
    .fit-chip.recommended-pool-chip:hover {
        background: var(--panel-surface);
        border-color: var(--border-strong);
    }
    .recommended-pool-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .item-float-tip.is-pool-tip { pointer-events: auto; }
    .recommended-pool-members { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
    .recommended-pool-members li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
    .recommended-pool-members img { width: 28px; height: 28px; flex: 0 0 28px; }
    .item-float-tip.is-pool-tip.is-visible { display: block !important; }
    .item-float-tip.is-pool-tip { filter: none; box-shadow: var(--panel-shadow); }
    .is-pool-tip .item-tip-card { background: var(--surface-raised); color: var(--text); border-color: var(--border-strong); }
    .is-pool-tip .item-tip-card::after { background: var(--surface-raised); border-color: var(--border-strong); }
    .is-pool-tip .item-tip-name { color: var(--text); }
    .is-pool-tip .item-tip-sub { color: var(--text-muted); }

    /* ===== Champion page (/champions/<slug>) ===========================================
       One champion per URL for the "look up the champ I just got" flow.  Reuses
       the detail panel (page mode: h1 name, no ×); the bar above it is search-
       first so the next game's lookup is one keystroke away. */
    .champ-page { max-width: 1080px; margin: 0 auto; }
    .champ-page-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        margin-bottom: 12px;
    }
    .champ-page-search {
        position: relative;
        flex: 1 1 320px;
        max-width: 420px;
    }
    .champ-page-results {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 40;
        list-style: none;
        margin: 0;
        padding: 6px;
        background: var(--surface-raised);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    }
    .champ-page-opt {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        padding: 5px 8px;
        border-radius: var(--r-sm);
        cursor: pointer;
        color: var(--text);
    }
    .champ-page-opt img {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        flex: 0 0 auto;
    }
    .champ-page-opt.is-active,
    .champ-page-opt:hover {
        background: color-mix(in oklab, var(--accent) 14%, transparent);
    }
    .champ-page-opt-name { font-weight: 600; }
    .champ-page-opt-alt {
        margin-left: auto;
        color: var(--text-muted);
        font-size: 12px;
        white-space: nowrap;
    }
    .champ-page-noresult {
        padding: 8px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .champ-page-recent {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1 1 240px;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .champ-page-recent::-webkit-scrollbar { display: none; }
    .champ-page-recent[hidden] { display: none; }
    .champ-page-recent-label {
        color: var(--text-muted);
        font-size: 12px;
        flex: 0 0 auto;
    }
    .champ-page-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        height: 32px;
        padding: 0 10px 0 4px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        font-size: 13px;
        text-decoration: none;
        white-space: nowrap;
    }
    .champ-page-chip:hover { border-color: var(--border-strong); }
    .champ-page-chip img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }
    .champ-page-empty {
        padding: 56px 16px;
        text-align: center;
        color: var(--text-muted);
    }
    /* The champion page IS the page — no floating panel surface around it.
       The sticky tab rail blends into the page background instead. */
    .detail.detail-page {
        margin: 0;
        padding: 0;
        animation: none;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .detail-page .detail-main-tabs > .detail-tab-rail {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        background: color-mix(in oklab, var(--bg) 92%, transparent);
    }

    /* 增幅裝置 on the champion page: rarity segmented control + vertical table. */
    .aug-tier-table { margin-top: 10px; }
    .aug-tier-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .aug-tier-top .aug-tier-seg { flex: 1 1 auto; margin-bottom: 0; }
    /* Even an invisible centered tooltip can widen the viewport. */
    .aug-tier-rank-head .meta-help-tip {
        left: 0;
        transform: none;
        max-width: calc(100vw - 24px);
    }
    .aug-tier-rank-head .meta-help-tip::after { display: none; }
    .aug-tier-rank-head {
        position: relative;
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 4px;
    }
    .aug-tier-rank-head .meta-help-wrap { position: static; flex: 0 0 auto; }
    .aug-tier-seg {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 4px;
        margin-bottom: 10px;
        border: 1px solid var(--border);
        border-radius: var(--r-md, 10px);
        background: var(--surface);
    }
    .aug-tier-seg-btn {
        min-height: 36px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--text-muted);
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
    /* Rarity labels are lettered in their own metal. Idle tabs sit dimmed;
       the active one becomes a plate of that material with the label
       engraved. All three plates share one recipe (uneven light pools plus
       fractal-noise grain, each rarity its own seed) and only the dials
       escalate: silver quietest, gold warmer, prismatic brightest. */
    .aug-tier-seg-btn {
        --rar-ink: linear-gradient(180deg, var(--text), var(--text-muted));
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transition: background .25s, box-shadow .25s;
    }
    .aug-tier-seg-btn.rarity-silver {
        --rar-ink: linear-gradient(180deg, #ffffff 0%, #c3ccd8 45%, #8e99a8 100%);
        --plate:
            radial-gradient(45% 160% at 18% 20%, #d3dae3 0, transparent 70%),
            radial-gradient(40% 150% at 62% 90%, #8f9aa8 0, transparent 70%),
            radial-gradient(35% 140% at 90% 15%, #c6ced8 0, transparent 70%),
            linear-gradient(90deg, #aab4c0, #a3adb9);
        --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.006 0.07' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.2 1.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        --grain-alpha: .30;
        --sheen-at: 30% 10%;
        --ring: .30;
        --glow: 0 2px 8px -4px rgba(0, 0, 0, .55);
        --engrave: #161b22;
    }
    .aug-tier-seg-btn.rarity-gold {
        --rar-ink: linear-gradient(180deg, #fff1b8 0%, #f5c645 45%, #c08a1c 100%);
        --plate:
            radial-gradient(45% 160% at 15% 85%, #f7d06a 0, transparent 70%),
            radial-gradient(40% 150% at 55% 10%, #d49a28 0, transparent 70%),
            radial-gradient(35% 150% at 88% 80%, #f3c955 0, transparent 70%),
            linear-gradient(90deg, #eab845, #e0aa36);
        --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.008 0.06' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.2 1.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        --grain-alpha: .40;
        --sheen-at: 65% 0%;
        --ring: .35;
        --glow: 0 3px 14px -4px rgba(240, 193, 75, .7);
        --engrave: #1a1408;
    }
    .aug-tier-seg-btn.rarity-prismatic {
        --rar-ink: linear-gradient(100deg, #7fd8ff 0%, #c9a4ff 40%, #ff9ad5 70%, #ffd98a 100%);
        --plate:
            radial-gradient(38% 150% at 8% 30%, #8fe6ff 0, transparent 70%),
            radial-gradient(34% 160% at 30% 95%, #a99bff 0, transparent 70%),
            radial-gradient(34% 150% at 50% 0%, #e59cf0 0, transparent 70%),
            radial-gradient(30% 150% at 70% 100%, #ffb8d2 0, transparent 70%),
            radial-gradient(30% 150% at 86% 10%, #ffe29a 0, transparent 70%),
            radial-gradient(30% 150% at 100% 85%, #a8f0c8 0, transparent 70%),
            linear-gradient(90deg, #b9c6ff, #d7b6ff 50%, #c9d4ff);
        --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.01 0.05' numOctaves='4' seed='27'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.4 1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        --grain-alpha: .55;
        --sheen-at: 40% 0%;
        --ring: .45;
        --glow: 0 3px 16px -4px rgba(190, 140, 255, .75), 0 0 22px -8px rgba(120, 220, 255, .6);
        --engrave: #2a1245;
    }
    .aug-tier-seg-text {
        background: var(--rar-ink);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        letter-spacing: .08em;
        opacity: .62;
        filter: saturate(.8);
        transition: opacity .2s, filter .2s;
    }
    .aug-tier-seg-btn:hover .aug-tier-seg-text { opacity: .8; filter: none; }
    .aug-tier-seg-btn.is-active {
        background: var(--plate);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .45),
            inset 0 0 0 1px rgba(255, 255, 255, var(--ring)),
            var(--glow);
    }
    .aug-tier-seg-btn.is-active::before,
    .aug-tier-seg-btn.is-active::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }
    .aug-tier-seg-btn.is-active::before {
        background: var(--grain) center / 100% 100% no-repeat;
        opacity: var(--grain-alpha);
        mix-blend-mode: overlay;
    }
    .aug-tier-seg-btn.is-active::after {
        background: radial-gradient(60% 120% at var(--sheen-at), rgba(255, 255, 255, calc(var(--grain-alpha) * .9)), transparent 70%);
        mix-blend-mode: soft-light;
    }
    .aug-tier-seg-btn.is-active .aug-tier-seg-text {
        background: none;
        color: var(--engrave);
        opacity: .92;
        filter: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    }
    [data-theme="light"] .aug-tier-seg-btn.rarity-silver {
        --rar-ink: linear-gradient(180deg, #7b8898 0%, #4c5868 100%);
        --glow: 0 2px 6px -3px rgba(40, 50, 65, .45);
    }
    [data-theme="light"] .aug-tier-seg-btn.rarity-gold {
        --rar-ink: linear-gradient(180deg, #c99212 0%, #8a5a00 100%);
        --glow: 0 3px 10px -4px rgba(168, 116, 10, .55);
    }
    [data-theme="light"] .aug-tier-seg-btn.rarity-prismatic {
        --rar-ink: linear-gradient(100deg, #1f8fc9 0%, #8a3fd1 50%, #cc3d8f 100%);
        --glow: 0 3px 12px -4px rgba(138, 63, 209, .5);
    }

    /* Podium: the three strongest augments as cards above the full list. */
    .aug-pick-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 4px 0 18px;
        padding: 0;
        list-style: none;
    }
    .aug-pick-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 20px 16px 16px;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        background:
            radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--verdict, var(--text-muted)) 12%, transparent), transparent 70%),
            var(--surface);
        text-align: center;
        transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    }
    .aug-pick-card.is-good { --verdict: var(--wr-5); }
    .aug-pick-card.is-bad { --verdict: var(--wr-1); }
    .aug-pick-card:hover,
    .aug-pick-card:focus-visible {
        transform: translateY(-2px);
        border-color: color-mix(in oklab, var(--verdict, var(--text-muted)) 45%, var(--border));
        outline: none;
    }
    .aug-pick-card:focus-visible,
    .aug-tier-row:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }
    @media (prefers-reduced-motion: reduce) {
        .aug-pick-card { transition: none; }
        .aug-pick-card:hover,
        .aug-pick-card:focus-visible { transform: none; }
    }
    .aug-pick-rank {
        position: absolute;
        top: 10px;
        left: 12px;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }
    .aug-pick-card:first-child .aug-pick-rank { color: var(--text); }
    .aug-pick-icon {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        border-radius: var(--r-sm);
        box-shadow: 0 0 0 2px color-mix(in oklab, var(--rar, var(--border)) 55%, transparent), 0 6px 18px rgba(0, 0, 0, .28);
    }
    .aug-pick-icon.rarity-silver { --rar: #c9d1dc; }
    .aug-pick-icon.rarity-gold { --rar: #f0c14b; }
    .aug-pick-icon.rarity-prismatic { --rar: #d7a8ff; }
    .aug-pick-icon img,
    .aug-pick-icon .aicon-ph { width: 64px; height: 64px; border-radius: var(--r-sm); }
    .aug-pick-name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 700;
    }
    .aug-pick-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        min-height: 2.9em;
        color: var(--text-muted);
        font-size: 12.5px;
        line-height: 1.45;
    }
    .aug-pick-foot {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: auto;
    }
    .aug-pick-wr { display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
    .aug-pick-wr b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
    .aug-pick-wr small { color: var(--text-muted); font-size: 11px; font-weight: 600; }
    .aug-pick-wr.wr-5 b { color: var(--wr-5); }
    .aug-pick-wr.wr-4 b { color: var(--wr-4); }
    .aug-pick-wr.wr-3 b { color: var(--wr-3); }
    .aug-pick-wr.wr-2 b { color: var(--wr-2); }
    .aug-pick-wr.wr-1 b { color: var(--wr-1); }

    /* Verdict chip: the one word a casual player needs. */
    .aug-verdict {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.5;
        white-space: nowrap;
        color: var(--text-muted);
        background: color-mix(in oklab, var(--text-muted) 14%, transparent);
    }
    .aug-verdict.is-good { color: var(--wr-5); background: color-mix(in oklab, var(--wr-5) 16%, transparent); }
    .aug-verdict.is-bad { color: var(--wr-1); background: color-mix(in oklab, var(--wr-1) 16%, transparent); }
    @media (max-width: 700px) {
        .aug-pick-cards {
            grid-template-columns: minmax(0, 1fr);
            gap: 8px;
        }
        .aug-pick-card {
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr) auto;
            column-gap: 12px;
            row-gap: 4px;
            padding: 16px 12px 12px;
            text-align: left;
        }
        .aug-pick-rank { top: 4px; left: 6px; font-size: 11px; }
        .aug-pick-icon { grid-column: 1; grid-row: 1 / 3; }
        .aug-pick-name {
            grid-column: 2;
            white-space: normal;
            overflow-wrap: anywhere;
            font-size: 14px;
        }
        .aug-pick-desc { grid-column: 2 / -1; min-height: 0; }
        .aug-pick-foot { grid-column: 3; grid-row: 1; margin-top: 0; }
        .aug-pick-wr b { font-size: 18px; }
        .aug-pick-icon, .aug-pick-icon img, .aug-pick-icon .aicon-ph { width: 52px; height: 52px; }
    }
    .aug-tier-head,
    .aug-tier-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 84px 72px;
        align-items: center;
    }
    .aug-tier-head { border-bottom: 1px solid var(--border); }
    .aug-tier-sort {
        min-height: 36px;
        padding: 0 8px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        color: var(--text-muted);
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        cursor: pointer;
    }
    .aug-tier-sort.col-name { text-align: left; }
    .aug-tier-sort.is-active { color: var(--accent); }
    .aug-tier-sort.is-active::after { content: " \25BE"; font-size: 10px; }
    [data-theme="light"] .aug-tier-sort.is-active { color: #8a6400; }
    .aug-tier-list { list-style: none; margin: 0; padding: 0; counter-reset: aug-tier 3; }
    .aug-tier-list.is-full { counter-reset: aug-tier 0; }
    .aug-tier-row[hidden] { display: none; }
    .aug-tier-more { display: block; width: 100%; margin-top: 8px; justify-content: center; }
    .aug-tier-row {
        min-height: 56px;
        border-bottom: 1px solid var(--border);
        cursor: default;
        counter-increment: aug-tier;
    }
    .aug-tier-row:hover,
    .aug-tier-row:focus-visible { background: var(--surface); }
    .aug-tier-idx { display: none; }
    .aug-tier-row .aug-tier-idx::before { content: counter(aug-tier); }
    .aug-tier-name {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 6px 8px;
        font-size: 14px;
        font-weight: 600;
    }
    .aug-tier-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .aug-tier-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .aug-tier-set,
    .aug-tier-desc,
    .aug-tier-bar { display: none; }
    .aug-tier-name img,
    .aug-tier-name .aicon-ph {
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        border-radius: var(--r-sm);
    }
    .aug-tier-pick {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.25;
        font-variant-numeric: tabular-nums;
    }
    .aug-tier-pick b { font-size: 14px; }
    .aug-tier-pick small { font-size: 11px; color: var(--text-muted); }
    .aug-tier-wr {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.25;
        font-size: 14px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .aug-tier-wr .aug-verdict { margin-top: 3px; padding: 0 6px; font-size: 10.5px; }
    .aug-tier-wr.wr-5 { color: var(--wr-5); }
    .aug-tier-wr.wr-4 { color: var(--wr-4); }
    .aug-tier-wr.wr-3 { color: var(--wr-3); }
    .aug-tier-wr.wr-2 { color: var(--wr-2); }
    .aug-tier-wr.wr-1 { color: var(--wr-1); }

    /* PC: the row has room for a description, a pick bar on one scale per
       rarity, and the win rate with its plain-word verdict. */
    @media (min-width: 900px) {
        .aug-tier-head,
        .aug-tier-row {
            grid-template-columns: 36px minmax(0, 1fr) 150px 150px;
            column-gap: 12px;
        }
        .aug-tier-head { padding: 0 12px; }
        .aug-tier-row { min-height: 76px; padding: 8px 12px; }
        .aug-tier-idx {
            display: block;
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 700;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        .aug-tier-head .aug-tier-idx { font-size: 12px; }
        .aug-tier-row:nth-child(-n + 3) .aug-tier-idx { color: var(--text); }
        .aug-tier-name { gap: 14px; padding: 0; font-size: 15px; }
        .aug-tier-name img,
        .aug-tier-name .aicon-ph { width: 48px; height: 48px; }
        .aug-tier-title { display: flex; align-items: baseline; gap: 8px; }
        .aug-tier-set {
            display: inline-block;
            flex: 0 0 auto;
            padding: 1px 7px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
        }
        .aug-tier-desc {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 400;
            line-height: 1.45;
        }
        .aug-tier-pick {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: baseline;
            column-gap: 8px;
            row-gap: 6px;
        }
        .aug-tier-pick b,
        .aug-tier-wr b { font-size: 15px; }
        .aug-tier-pick small { justify-self: end; font-size: 12px; }
        /* Fixed chip slot so the win rate lines up whether or not a row has a verdict. */
        .aug-tier-wr { display: grid; grid-template-columns: auto 44px; justify-content: end; align-items: center; column-gap: 10px; }
        .aug-tier-wr b { grid-column: 1; }
        .aug-tier-wr .aug-verdict { grid-column: 2; margin-top: 0; justify-content: center; font-size: 11px; }
        .aug-tier-bar {
            display: block;
            grid-column: 1 / -1;
            position: relative;
            height: 5px;
            border-radius: 3px;
            background: color-mix(in oklab, var(--text-muted) 16%, transparent);
        }
        .aug-tier-bar::after {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: calc(var(--w) * 100%);
            border-radius: inherit;
            background: color-mix(in oklab, var(--text-muted) 70%, transparent);
        }
    }
    .detail-page .detail-main-tabs > .detail-tab-rail { top: calc(var(--header-h, 56px) - 10px); }

    /* Champion hero: splash art fading into the page, name, tier word and the
       three numbers a player checks first. */
    .champ-hero {
        position: relative;
        isolation: isolate;
        margin: 0 0 4px;
        padding: 56px 0 22px;
    }
    .champ-hero-art {
        position: absolute;
        inset: 0 0 0 18%;
        z-index: -1;
        opacity: 0;
        transition: opacity .5s ease;
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0%, #000 35%, #000 82%, transparent 100%),
            linear-gradient(180deg, transparent 0%, #000 28%, #000 58%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(90deg, transparent 0%, #000 35%, #000 82%, transparent 100%),
            linear-gradient(180deg, transparent 0%, #000 28%, #000 58%, transparent 100%);
        mask-composite: intersect;
    }
    .champ-hero-art.is-loaded { opacity: 1; }
    .champ-hero-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 70% 22%;
    }
    .champ-hero-art::after {
        content: "";
        position: absolute;
        inset: 0;
        background: color-mix(in oklab, var(--bg) 25%, transparent);
    }
    [data-theme="light"] .champ-hero-art::after { background: none; }
    .champ-hero-body {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px 22px;
    }
    .champ-hero-avatar {
        display: block;
        overflow: hidden;
        width: 88px;
        height: 88px;
        border-radius: 18px;
        border: 1px solid var(--border-strong);
    }
    .champ-hero-id {
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
    }
    .champ-hero-kicker {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 0;
    }
    .champ-hero-tier {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }
    .champ-hero-tier b {
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0 7px;
        border-radius: 5px;
        background: color-mix(in oklab, var(--tier-color) 12%, var(--bg));
        color: color-mix(in oklab, var(--tier-color) 70%, var(--text));
        font-size: 11px;
        font-weight: 800;
    }
    .champ-hero .detail-role-tag {
        height: 22px;
        padding: 0;
        color: var(--text-muted);
        background: none;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .06em;
    }
    .champ-hero .detail-role-tag::before,
    .champ-hero .detail-role-tag::after { content: none; }
    .champ-hero .cname {
        margin: 0;
        font-size: clamp(30px, 4.2vw, 46px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .champ-hero-stats {
        display: flex;
        gap: 6px;
        margin: 0;
        padding: 6px;
        border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
        border-radius: 14px;
        background: color-mix(in oklab, var(--bg) 62%, transparent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .champ-hero-stat { min-width: 92px; padding: 8px 12px; }
    .champ-hero-stat + .champ-hero-stat { border-left: 1px solid color-mix(in oklab, var(--text) 10%, transparent); }
    .champ-hero-stat dt {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
    }
    .champ-hero-stat dd {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin: 4px 0 0;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .champ-hero-stat dd b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
    .champ-hero-stat.is-wr dd b { font-size: 26px; }
    .champ-hero-stat.wr-hi dd b { color: var(--wr-5); }
    .champ-hero-stat.wr-lo dd b { color: var(--wr-1); }
    .champ-hero-stat dd small { color: var(--text-muted); font-size: 11px; font-weight: 700; }
    [data-theme="light"] .champ-hero-tier b {
        color: color-mix(in oklab, var(--tier-color) 40%, var(--text));
    }
    @media (max-width: 900px) {
        .champ-hero-body { grid-template-columns: auto minmax(0, 1fr); }
        .champ-hero-stats { grid-column: 1 / -1; }
        .champ-hero-stat { flex: 1 1 0; min-width: 0; }
    }
    @media (max-width: 700px) {
        .champ-hero { padding: 40px 0 12px; }
        .champ-hero-art { left: 25%; }
        .champ-hero-body { gap: 14px; }
        .champ-hero-avatar { width: 64px; height: 64px; border-radius: 14px; }
        .champ-hero .cname { font-size: 28px; }
        .champ-hero-stat { padding: 6px 8px; }
        .champ-hero-stat dd b, .champ-hero-stat.is-wr dd b { font-size: 19px; }
        .champ-hero-stat dd { flex-wrap: wrap; gap: 2px 6px; }
    }
    @media (max-width: 700px) {
        .champ-page-bar { gap: 8px; margin-bottom: 10px; }
        .champ-page-search { flex-basis: 100%; max-width: none; }
        .champ-page-recent { flex-basis: 100%; }
    }

    /* Light theme: augment icons are pale line art, give them a dark disc. */
    [data-theme="light"] .aug-pick-icon,
    [data-theme="light"] .aug-tier-name img { background: #1b2030; }

    /* Champion page tabs follow the site's gold accent, at a readable size. */
    .detail-page .detail-main-tabs > .detail-tab-rail {
        background: color-mix(in oklab, var(--bg) 90%, transparent);
    }
    .detail-page .detail-tab-label { font-size: 14px; min-height: 40px; }
    .detail-page .detail-sub-tabs .detail-tab-label { font-size: 13px; min-height: 36px; }
    .detail-page .detail-tabset > .detail-tab-input:nth-of-type(1):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(1),
    .detail-page .detail-tabset > .detail-tab-input:nth-of-type(2):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(2),
    .detail-page .detail-tabset > .detail-tab-input:nth-of-type(3):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(3),
    .detail-page .detail-tabset > .detail-tab-input:nth-of-type(4):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(4),
    .detail-page .detail-tabset > .detail-tab-input:nth-of-type(5):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(5),
    .detail-page .detail-tabset > .detail-tab-input:nth-of-type(6):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(6) {
        color: var(--accent);
        border-bottom-color: var(--accent);
        background: color-mix(in oklab, var(--accent) 10%, transparent);
    }
    [data-theme="light"] .detail-page .detail-tabset > .detail-tab-input:nth-of-type(1):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(1),
    [data-theme="light"] .detail-page .detail-tabset > .detail-tab-input:nth-of-type(2):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(2),
    [data-theme="light"] .detail-page .detail-tabset > .detail-tab-input:nth-of-type(3):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(3),
    [data-theme="light"] .detail-page .detail-tabset > .detail-tab-input:nth-of-type(4):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(4),
    [data-theme="light"] .detail-page .detail-tabset > .detail-tab-input:nth-of-type(5):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(5),
    [data-theme="light"] .detail-page .detail-tabset > .detail-tab-input:nth-of-type(6):checked ~ .detail-tab-rail .detail-tab-list .detail-tab-label:nth-child(6) {
        color: #8a6400;
        border-bottom-color: var(--accent);
    }

/* Transparent augment art requires the same black backing in both themes.
   Keep new augment surfaces here rather than inheriting a light card surface. */
:root :is(.champion-table-icon.champion-table-augment,
    .aug img, .aug .aicon-ph, .aug-pick-icon,
    .aug-tier-name img, .aug-tier-name .aicon-ph,
    .aug-settle-icon, .aug-draft-icon, .aug-reroll-icon,
    .apool-aug img, .champ-pool-augment img,
    .recommended-pool-members img) {
    background: var(--augment-icon-surface);
}

    /* Stacked mana items share one statistic; the inset identifies the base item. */
    .item-family-icon {
        display: inline-block;
        position: relative;
        flex-shrink: 0;
        vertical-align: middle;
        overflow: visible;
    }
    .item-family-icon > .item-family-main {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: inherit;
    }
    .item-family-icon > .item-family-base {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 46%;
        height: 46%;
        box-sizing: border-box;
        margin: 0;
        box-shadow: none;
        object-fit: contain;
        border: 2px solid var(--surface);
        border-radius: 3px;
    }
    .champion-table-item-icon { width: 32px; height: 32px; }
    .item-pair-image { width: 100%; height: 100%; }
    .change-duo .change-item-icon { width: 34px; height: 34px; margin-left: -9px; border-radius: 6px; }
    @media (max-width: 640px) {
        .change-duo .change-item-icon { width: 30px; height: 30px; }
    }

/* Champion quick overview shares the detail panel's flat surface. */
.champ-overview [hidden] { display: none !important; }
.quick-route-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.quick-route-choices button {
    color: var(--text-muted); background: transparent; border: 0; cursor: pointer;
    font: inherit; min-height: 40px; padding: 8px 12px; border-radius: var(--r-sm);
}
.quick-route-choices { margin: 8px 0 12px; }
.quick-route-choices button { display: grid; gap: 2px; font-size: 12px; border: 1px solid var(--border); text-align: left; }
.quick-route-choices button small { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.quick-route-choices button[aria-pressed="true"] { color: var(--accent-soft); background: var(--surface-2); border-color: var(--accent); }
.champ-overview button:hover { background-color: var(--surface-2); }
.champ-overview button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quick-overview h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text); }
.quick-loadout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
.quick-build { min-width: 0; }
.quick-build-line { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.quick-build-line > .quick-items { flex: 1 1 300px; }
.quick-build-rate { display: grid; gap: 4px; min-width: 114px; padding: 4px 0; color: var(--text-muted); font-size: 12px; }
.quick-build-rate strong { color: var(--text); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Core items are marked by an accent ring; the text label stays for screen readers only. */
.quick-core-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quick-item { position: relative; }
.quick-item.is-core .quick-item-icon { box-shadow: 0 0 0 2px var(--accent); }
/* Follow-up items sit back so the ringed core reads first. */
.quick-build-line .quick-item:not(.is-core) .quick-item-icon { filter: brightness(.62) saturate(.75); transition: filter .15s; }
.quick-build-line .quick-item:not(.is-core):is(:hover, :focus-visible) .quick-item-icon { filter: none; }
.quick-build-line .quick-item:not(.is-core) > span:last-of-type { color: var(--text-dim); }
.quick-items { display: flex; flex-wrap: wrap; align-items: start; gap: 10px; }
.quick-item { width: 68px; min-height: 72px; padding: 4px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; }
.quick-item-icon { display: block; width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 6px; }
.quick-item > span:last-of-type { display: block; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.quick-utilities { display: grid; grid-template-columns: auto auto; align-content: start; gap: 24px; padding-left: 24px; border-left: 1px solid var(--border); }
.quick-empty { color: var(--text-dim); font-size: 12px; margin: 12px 0 0; }
.quick-augments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.quick-rarity { min-width: 0; }
.quick-rarity h3 { display: flex; align-items: baseline; gap: 8px; }
.quick-rarity h3 small { font-size: 10px; font-weight: 400; color: var(--text-dim); }
.quick-top-narrow { display: none; }
.quick-rarity ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
/* Capped width keeps each win rate next to its name instead of the column's far edge. */
.quick-augment { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; max-width: 240px; min-height: 48px; padding: 6px 0; background: transparent; border: 0; border-radius: var(--r-sm); font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.quick-augment-icon { width: 36px; height: 36px; background: var(--augment-icon-surface); border-radius: 6px; }
.quick-augment-icon img { width: 100%; height: 100%; object-fit: contain; }
.quick-augment-name { min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-augment b { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; }
@media (max-width: 1000px) {
    .quick-loadout { grid-template-columns: 1fr; gap: 20px; }
    .quick-utilities { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--border); grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .quick-route-choices button { flex: 1 1 100%; }
    .quick-build-line > .quick-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .quick-build-line > .quick-items .quick-item { width: 100%; }
    .quick-build-rate { grid-template-columns: auto auto; align-items: baseline; width: 100%; }
    .quick-utilities { gap: 12px; }
    .quick-augments { grid-template-columns: 1fr; gap: 16px; }
    .quick-rarity { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
    .quick-rarity h3 { flex-direction: column; gap: 4px; margin: 6px 0; }
    .quick-rarity ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    /* Desktop lists five per rarity; the phone row fits three. */
    .quick-rarity li:nth-child(n+4), .quick-top-wide { display: none; }
    .quick-top-narrow { display: inline; }
    .quick-augment { display: flex; flex-direction: column; text-align: center; gap: 6px; max-width: none; }
    .quick-augment-name { width: 100%; }
}