/* ── THEME VARIABLES ── */
    :root {
      --bg-primary:       #0d1117;
      --bg-secondary:     #161b22;
      --bg-tertiary:      #1c2128;
      --border-subtle:    #21262d;
      --border-default:   #30363d;
      --text-muted:       #6e7681;
      --text-secondary:   #8b949e;
      --text-primary:     #c9d1d9;
      --text-bright:      #e6edf3;
      --accent-blue:      #58a6ff;
      --accent-blue-dark: #388bfd;
      --accent-green:     #3fb950;
      --accent-green-dark:#238636;
      --accent-red:       #f85149;
      --accent-amber:     #e3a000;
      /* v1.0.147 — `--accent-primary` was referenced 18 times across
         .collab-* and .challenge-* rules (Watch Together + Live Challenge)
         but never declared. Browsers silently fell back to the property's
         initial value (transparent / currentColor / canvastext), making
         focus rings and accent buttons invisible. Alias it to the existing
         brand accent. Same alias in body.light-mode below. */
      --accent-primary:   var(--accent-blue);
      /* `--border-color` referenced by .social-play-card rules — alias to
         the standard border so the cards actually have a visible edge. */
      --border-color:     var(--border-default);
      /* Tells browsers to render native form controls (select, scrollbar,
         checkbox, date picker) in dark theme. Without this, macOS Chrome
         renders <select> in light-mode regardless of CSS color values —
         which gave us black-on-dark text on the LC platform dropdown. */
      color-scheme: dark;
    }

    body.light-mode {
      --bg-primary:       #ffffff;
      --bg-secondary:     #f6f8fa;
      --bg-tertiary:      #eaeef2;
      --border-subtle:    #d0d7de;
      --border-default:   #d0d7de;
      --text-muted:       #57606a;
      --text-secondary:   #656d76;
      --text-primary:     #24292f;
      --text-bright:      #1f2328;
      --accent-blue:      #0969da;
      --accent-blue-dark: #0550ae;
      --accent-green:     #1a7f37;
      --accent-green-dark:#1a7f37;
      --accent-red:       #cf222e;
      --accent-amber:     #9a6700;
      --accent-primary:   var(--accent-blue);
      --border-color:     var(--border-default);
      color-scheme: light;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    /* v1.0.147 — Honour OS-level reduced-motion preference. Vestibular-
       sensitive users (and battery-saver / data-saver modes on many
       platforms) ask the system to suppress motion; spinner, fade-ins,
       hover transforms, sync-pulse, taste-spin all keep playing without
       this. The !important guards against transition shorthand overrides
       deeper in the cascade. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: var(--bg-primary);
      color: var(--text-bright);
      /* 100dvh respects the *dynamic* viewport on iOS Safari / Android Chrome
         (collapses the URL bar correctly). 100vh is the pre-2022 fallback. */
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    header {
      width: 100%;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-default);
      /* Safe-area padding so the header isn't clipped under a notch/status bar
         in TWA or on iOS PWA. env() falls back to 0 on browsers without support. */
      padding: calc(8px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 8px calc(24px + env(safe-area-inset-left));
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      min-height: 0;
    }
    @keyframes sync-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
    .sync-pulse { animation: sync-pulse 1.4s ease-in-out infinite; }

    .header-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    header h1 {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--accent-blue);
      line-height: 1;
      margin: 0;
    }
    .header-logo {
      width: 40px;
      height: 40px;
      border-radius: 9px;
      display: block;
      flex-shrink: 0;
    }
    .beta-chip {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #e3b341;
      background: rgba(227,179,65,0.12);
      border: 1px solid rgba(227,179,65,0.35);
      border-radius: 4px;
      padding: 2px 6px;
      line-height: 1;
      align-self: center;
      flex-shrink: 0;
      margin-right: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s, border-color 0.15s;
    }
    @media (hover: hover) {
      .beta-chip:hover {
        background: rgba(227,179,65,0.22);
        border-color: rgba(227,179,65,0.55);
      }
    }
    .beta-chip:focus-visible {
      outline: 2px solid #e3b341;
      outline-offset: 2px;
    }
    .tab-new-badge {
      display: inline-block;
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #3fb950;
      background: rgba(63,185,80,0.12);
      border: 1px solid rgba(63,185,80,0.4);
      border-radius: 4px;
      padding: 1px 5px;
      line-height: 1.4;
      vertical-align: middle;
      margin-left: 5px;
      flex-shrink: 0;
    }
    .manage-feedback-section { border-top: 1px solid var(--border-subtle); }
    .manage-btn-feedback {
      display: inline-block;
      text-decoration: none;
      text-align: center;
      color: var(--text-primary);
      border-color: var(--border-default);
    }
    @media (hover: hover) {
    .manage-btn-feedback:hover { background: var(--bg-tertiary); color: var(--text-bright); }
    }

    #progress-info {
      font-size: 0.85rem;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    #main {
      width: 100%;
      max-width: 1000px;
      padding: 32px 16px;
      flex: 1;
      overflow-x: hidden;
    }

    /* LOADING STATE */
    #loading-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 80px 0;
    }

    .spinner {
      width: 48px; height: 48px;
      border: 4px solid var(--border-default);
      border-top-color: var(--accent-blue);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    #loading-cancel-btn {
      margin-top: 4px;
      padding: 8px 24px;
      background: transparent;
      border: 1px solid var(--border-default);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.85rem;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
    }
    @media (hover: hover) {
    #loading-cancel-btn:hover { border-color: var(--accent-red); color: var(--accent-red); }
    }

    /* USERNAME INPUT */
    #username-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding: 48px 0 64px;
      text-align: center;
    }

    #username-screen h2 { font-size: 1.5rem; color: var(--accent-blue); }
    #username-screen > p { color: var(--text-secondary); }

    .onboarding-tagline {
      font-size: 0.97rem;
      color: var(--text-secondary);
      max-width: 400px;
      line-height: 1.5;
      margin-top: 2px;
    }
    .onboarding-steps {
      display: flex;
      gap: 10px;
      margin: 4px 0 8px;
      max-width: 500px;
      width: 100%;
    }
    .onboarding-step {
      flex: 1;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .step-icon { font-size: 1.4rem; }
    .onboarding-step strong { font-size: 0.82rem; color: var(--text-bright); display: block; }
    .onboarding-step span   { font-size: 0.73rem; color: var(--text-secondary); line-height: 1.45; }
    .onboarding-divider {
      width: 100%;
      max-width: 500px;
      border: none;
      border-top: 1px solid var(--border-default);
      margin: 4px 0;
    }
    @media (max-width: 520px) {
      .onboarding-steps { flex-direction: column; }
    }

    .input-row {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }

    input[type="text"] {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      color: var(--text-bright);
      padding: 10px 16px;
      font-size: 1rem;
      width: 240px;
      min-width: 0;
      outline: none;
      transition: border-color 0.2s;
    }
    input[type="text"]:focus { border-color: var(--accent-blue); }

    button {
      cursor: pointer;
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 500;
      padding: 10px 20px;
      transition: all 0.15s;
    }

    .btn-primary {
      background: var(--accent-green-dark);
      color: #fff;
    }
    @media (hover: hover) {
    .btn-primary:hover { background: #2ea043; }
    }

    .btn-secondary {
      background: var(--border-subtle);
      color: var(--text-bright);
      border: 1px solid var(--border-default);
    }
    @media (hover: hover) {
    .btn-secondary:hover { background: var(--border-default); }
    }
    /* Mode toggle — single button replaces the old settle-btn + blind-btn pair (§5.2.3).
       Colour-coded when a mode is active so the battle bar reflects the current state
       at a glance. The popover lives in .mode-control; see #mode-popover below. */
    #mode-btn.active-settle { background: #1a2d1a; border-color: var(--accent-green-dark); color: var(--accent-green); }
    #mode-btn.active-blind  { background: #1a1230; border-color: #6e40c9; color: #a371f7; }
    #filter-btn.has-filter  { border-color: #d29922; color: #e3b341; }

    #filter-popover {
      display: none; position: absolute; top: calc(100% + 6px); right: 0;
      background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 8px;
      padding: 12px; z-index: 100; min-width: 200px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    #filter-popover.open { display: block; }
    .filter-popover-title { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
    .filter-format-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .filter-fmt-btn {
      padding: 4px 10px; font-size: 0.8rem; border-radius: 6px; cursor: pointer;
      border: 1px solid var(--border-default); background: var(--border-subtle); color: var(--text-bright);
      transition: all 0.1s;
    }
    .filter-fmt-btn.active { background: #1f4070; border-color: var(--accent-blue-dark); color: #79b8ff; }
    .filter-fmt-btn.hidden-fmt { background: var(--border-subtle); border-color: var(--border-default); color: var(--text-muted); text-decoration: line-through; }
    .filter-popover-hint { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }
    .mode-control { position: relative; display: inline-flex; align-items: stretch; }
    #mode-popover {
      display: none;
      position: absolute;
      bottom: calc(100% + 6px);
      right: 0;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      padding: 4px;
      z-index: 100;
      min-width: 240px;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    #mode-popover.open { display: block; }
    #mode-popover button[role="menuitemradio"] {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 10px;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--text-bright);
      cursor: pointer;
      text-align: left;
      font-size: 0.85rem;
      font-family: inherit;
    }
    #mode-popover button[role="menuitemradio"]:hover  { background: var(--border-subtle); }
    #mode-popover button[role="menuitemradio"]:focus  { outline: 2px solid var(--accent-blue-dark); outline-offset: -2px; }
    #mode-popover button[aria-checked="true"]         { background: #1f2937; }
    #mode-popover .mode-icon { font-size: 1.1rem; flex: 0 0 auto; }
    #mode-popover .mode-text { display: flex; flex-direction: column; gap: 2px; }
    #mode-popover .mode-name { font-weight: 600; }
    #mode-popover .mode-desc { font-size: 0.72rem; color: var(--text-secondary); }
    .mode-popover-divider { border: none; border-top: 1px solid var(--border-default); margin: 4px 0; }
    .mode-popover-action {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 8px 10px; border-radius: 6px;
      background: none; border: none; cursor: pointer; color: var(--text-bright);
      text-align: left;
    }
    .mode-popover-action:hover { background: var(--border-subtle); }
    #mode-btn.active-tower { background: #1c1a0a; border-color: #9e6a03; color: #e3b341; }

    .btn-danger {
      background: #da3633;
      color: #fff;
    }
    @media (hover: hover) {
    .btn-danger:hover { background: var(--accent-red); }
    }

    /* BATTLE SCREEN */
    #battle-screen { display: none; }

    .battle-prompt {
      text-align: center;
      margin-bottom: 28px;
    }
    .battle-prompt h2 {
      font-size: 1.4rem;
      color: var(--text-bright);
      margin-bottom: 4px;
    }
    .battle-prompt p {
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    .battle-arena {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 16px;
      align-items: center;
    }

    .anime-card {
      background: var(--bg-secondary);
      border: 2px solid var(--border-default);
      border-radius: 16px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      cursor: pointer;
      transition: all 0.18s;
      text-align: center;
    }
    @media (hover: hover) {
      .anime-card:hover {
        border-color: var(--accent-blue);
        background: var(--bg-tertiary);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(88, 166, 255, 0.15);
      }
    }
    .anime-card:active { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(88,166,255,0.2); }

    /* Fast tap — no 300ms delay on touch */
    .anime-card, .btn-primary, .btn-secondary, .btn-danger,
    .res-tab, .rank-card, .battle-actions button, .util-btn,
    .fuzzy-btn, .synopsis-btn, .exclude-btn, .card-anilist-link {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .anime-card img {
      width: 160px;
      height: 225px;
      object-fit: cover;
      border-radius: 8px;
      background: var(--border-subtle);
    }

    .anime-card .title {
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.3;
      color: var(--text-bright);
    }

    .anime-card .elo-badge {
      font-size: 0.78rem;
      color: var(--text-secondary);
      background: var(--border-subtle);
      padding: 3px 10px;
      border-radius: 20px;
    }

    .vs-divider {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--border-default);
      text-align: center;
    }

    .skip-row {
      text-align: center;
      margin-top: 20px;
    }

    /* PROGRESS BAR */
    #progress-bar-wrap {
      background: var(--border-subtle);
      border-radius: 8px;
      height: 6px;
      margin-bottom: 28px;
      overflow: hidden;
    }
    #progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-blue));
      transition: width 0.4s ease;
      border-radius: 8px;
    }

    /* RESULTS SCREEN */
    #results-screen { display: none; }

    .results-header {
      text-align: center;
      margin-bottom: 32px;
    }
    .results-header h2 {
      font-size: 1.8rem;
      color: var(--accent-blue);
      margin-bottom: 8px;
    }
    .results-header p { color: var(--text-secondary); }

    /* ── Results hero + tabs ─────────────────────────────────────────────── */
    .results-hero {
      text-align: center;
      margin-bottom: 20px;
    }
    .btn-keep-ranking {
      display: inline-block;
      background: var(--accent-green-dark);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 1.15rem;
      font-weight: 700;
      padding: 14px 44px;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
      letter-spacing: 0.01em;
      margin-bottom: 10px;
    }
    @media (hover: hover) {
    .btn-keep-ranking:hover { background: #2ea043; transform: translateY(-1px); }
    }
    .results-util-bar {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .util-btn {
      background: transparent;
      border: 1px solid var(--border-default);
      color: var(--text-secondary);
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 0.82rem;
      cursor: pointer;
      transition: all 0.15s;
    }
    @media (hover: hover) {
      @media (hover: hover) {
      .util-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: #1c2940; }
      }
      @media (hover: hover) {
      .util-btn.util-danger:hover { border-color: var(--accent-red); color: var(--accent-red); background: #3d0f0a; }
      }
    }

    /* MANAGE TAB */
    .manage-tab-content { display: flex; flex-direction: column; gap: 24px; max-width: 480px; }
    .manage-section { display: flex; flex-direction: column; gap: 8px; }
    .manage-section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 2px; }
    .manage-btn {
      background: var(--border-subtle); border: 1px solid var(--border-default); color: var(--text-bright);
      border-radius: 8px; padding: 10px 16px; font-size: 0.9rem; cursor: pointer;
      text-align: left; transition: border-color 0.15s, background 0.15s;
    }
    @media (hover: hover) {
    .manage-btn:hover { border-color: var(--accent-blue); background: #1c2940; }
    }
    .manage-btn-anilist { border-color: #1a6fd4; color: var(--accent-blue); }
    @media (hover: hover) {
    .manage-btn-anilist:hover { background: #1c2940; border-color: var(--accent-blue); }
    }
    .manage-btn-danger { border-color: #6e3232; color: var(--accent-red); }
    @media (hover: hover) {
    .manage-btn-danger:hover { border-color: var(--accent-red); background: #3d0f0a; }
    }
    .manage-danger-box { background: #1a0d0d; border: 1px solid #6e3232; border-radius: 10px; padding: 16px; }

    .results-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 24px;
      overflow-x: auto;
      padding: 4px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      scrollbar-width: none;        /* Firefox */
      -ms-overflow-style: none;     /* IE/Edge */
    }
    .results-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
    .res-tab {
      background: none;
      border: 1px solid transparent;
      border-radius: 7px;
      color: var(--text-secondary);
      padding: 8px 18px;
      font-size: 0.88rem;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      white-space: nowrap;
      flex: 1;
    }
    @media (hover: hover) { .res-tab:hover { background: var(--border-subtle); color: var(--text-primary); } }
    .res-tab.active {
      background: var(--bg-primary);
      border-color: var(--border-default);
      color: var(--accent-blue);
      font-weight: 600;
      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    @media (max-width: 600px) {
      .res-tab { padding: 8px 10px; font-size: 0.8rem; }
      .btn-keep-ranking { font-size: 1rem; padding: 12px 32px; }
    }

    /* ── Synopsis panel on battle cards ─────────────────────────────────── */
    .synopsis-btn {
      background: transparent;
      border: 1px solid var(--border-default);
      color: var(--text-secondary);
      font-size: 0.7rem;
      padding: 3px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
    }
    @media (hover: hover) {
    .synopsis-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: #1c2940; }
    }
    .synopsis-panel {
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 0.78rem;
      color: var(--text-secondary);
      line-height: 1.55;
      text-align: left;
      margin-top: 8px;
      max-height: 130px;
      overflow-y: auto;
      width: 100%;
    }

    /* ── Tower of Power first-use tip (§5.2.2) ────────────────────────────
       Shown once per browser the first time the user opens the Tower modal.
       Pulls the kb-first-tip aesthetic but inline (not fixed-position) so it
       flows above the anime list inside the existing modal. */
    #tower-first-tip {
      background: #0d1a2d;
      border: 1px solid var(--accent-blue-dark);
      border-radius: 8px;
      padding: 12px 14px;
      margin-bottom: 14px;
      text-align: left;
      font-size: 0.85rem;
    }
    #tower-first-tip h5  { color: var(--accent-blue); font-size: 0.9rem;  margin-bottom: 8px; }
    #tower-first-tip p   { color: var(--text-primary); font-size: 0.82rem; margin-bottom: 8px; }
    #tower-first-tip ul  { margin: 6px 0 10px 18px; color: var(--text-secondary); font-size: 0.78rem; }
    #tower-first-tip ul li { margin-bottom: 3px; }

    /* ── Keyboard shortcut first-use tip ─────────────────────────────────── */
    #kb-first-tip,
    #long-press-tip {
      position: fixed;
      bottom: 110px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--bg-secondary);
      border: 1px solid var(--accent-blue-dark);
      border-radius: 12px;
      padding: 14px 20px;
      z-index: 500;
      text-align: center;
      box-shadow: 0 4px 24px rgba(0,0,0,0.6);
      animation: fadeInUp 0.3s ease;
      max-width: 90vw;
    }
    #long-press-tip h5 { font-size: 0.85rem; color: var(--accent-blue); margin-bottom: 8px; }
    @keyframes fadeInUp {
      from { opacity:0; transform: translateX(-50%) translateY(10px); }
      to   { opacity:1; transform: translateX(-50%) translateY(0); }
    }
    #kb-first-tip h5 { font-size: 0.85rem; color: var(--accent-blue); margin-bottom: 8px; }
    .kb-tip-rows {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin-bottom: 10px;
      font-size: 0.8rem;
      color: var(--text-primary);
      flex-wrap: wrap;
    }

    /* ── Session summary modal ───────────────────────────────────────────── */
    #session-summary-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(4px);
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    .session-summary-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 16px;
      max-width: 460px;
      width: 100%;
      padding: 24px;
      position: relative;
    }
    .session-summary-box h3 { font-size: 1.05rem; color: var(--accent-blue); margin-bottom: 4px; }
    .session-mover {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid var(--border-subtle);
      font-size: 0.85rem;
    }
    .session-mover:last-child { border-bottom: none; }
    .session-mover img { width: 34px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    .mover-up   { color: var(--accent-green); font-weight: 700; }
    .mover-down { color: var(--accent-red); font-weight: 700; }

    /* ── Rivalry section ─────────────────────────────────────────────────── */
    #rivalry-section {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 20px;
    }
    #rivalry-section h3 { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 6px; }
    .rivalry-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 0.82rem;
      padding: 7px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .rivalry-item:last-child { border-bottom: none; }
    .rivalry-item-names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rivalry-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 0.72rem;
      padding: 2px 8px;
      border-radius: 20px;
      background: rgba(248,81,73,0.12);
      border: 1px solid rgba(248,81,73,0.28);
      color: #ff7b72;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* Help modal */
    #help-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(4px);
      padding: 40px 16px;
      overflow-y: auto;
      justify-content: center;
      align-items: flex-start;
    }
    .help-modal-box {
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: 16px;
      max-width: 580px;
      width: 100%;
      padding: 28px 24px 24px;
      position: relative;
    }
    .help-modal-box h3 { font-size: 1.1rem; color: var(--text-bright); margin-bottom: 4px; }
    .help-modal-box > p { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 16px; }
    .help-sections {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .help-section {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      padding: 12px 14px;
    }
    .help-section h4 { font-size: 0.85rem; color: var(--accent-blue); margin-bottom: 6px; }
    .help-section p  { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
    .help-section strong { color: var(--text-primary); }
    @media (max-width: 560px) { .help-sections { grid-template-columns: 1fr; } }

    /* ── Taste Story Modal ─────────────────────────────────────────────────── */
    #taste-story-modal {
      position: fixed; inset: 0; z-index: 1600;
      background: rgba(0,0,0,0.92);
      display: flex; align-items: center; justify-content: center; padding: 20px;
    }
    .ts-card {
      background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 20px;
      max-width: 480px; width: 100%; padding: 28px 28px 20px;
      display: flex; flex-direction: column; gap: 20px; position: relative;
      min-height: 320px;
    }
    .ts-top { display: flex; align-items: center; justify-content: space-between; }
    .ts-dots { display: flex; gap: 6px; }
    .ts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); transition: background 0.2s; }
    .ts-dot.active { background: var(--accent-blue); }
    .ts-close { background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: 4px; }
    @media (hover: hover) {
    .ts-close:hover { color: var(--text-bright); }
    }
    .ts-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
    .ts-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }
    .ts-headline { font-size: 1.8rem; font-weight: 800; line-height: 1.2; color: var(--accent-blue); }
    .ts-archetype { font-size: 2rem; }
    .ts-sub { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }
    .ts-covers { display: flex; gap: 12px; justify-content: center; margin: 8px 0; }
    .ts-cover-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100px; }
    .ts-cover-wrap img { width: 100px; height: 140px; object-fit: cover; border-radius: 8px; }
    .ts-cover-title { font-size: 0.72rem; color: var(--text-secondary); text-align: center; line-height: 1.3;
      overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .ts-share-actions { display: flex; justify-content: center; margin-top: 8px; }
    .ts-champion-wrap { display: flex; gap: 16px; align-items: center; }
    .ts-champion-cover { width: 90px; height: 126px; object-fit: cover; border-radius: 8px; flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
    .ts-champion-info { display: flex; flex-direction: column; gap: 10px; }
    .ts-nav { display: flex; justify-content: space-between; align-items: center; }
    .ts-profile-link {
      background: none; border: none; color: var(--accent-blue); font-size: 0.82rem;
      cursor: pointer; padding: 0; text-align: left; margin-top: 4px;
    }
    @media (hover: hover) {
    .ts-profile-link:hover { text-decoration: underline; }
    }

    .ts-prev, .ts-next {
      background: none; border: 1px solid var(--border-default); color: var(--text-secondary);
      border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 0.88rem;
      transition: all 0.15s;
    }
    .ts-prev:hover, .ts-next:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

    /* Welcome modal */
    #welcome-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1100;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(6px);
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
    }
    .welcome-box {
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: 20px;
      max-width: 420px;
      width: 100%;
      padding: 32px 28px 28px;
      text-align: center;
    }
    .welcome-box .welcome-emoji { font-size: 2.4rem; margin-bottom: 12px; }
    .welcome-logo { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 12px; }
    .welcome-box h2 { font-size: 1.4rem; color: var(--text-bright); margin-bottom: 8px; }
    .welcome-box .welcome-subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.5; }
    .welcome-steps {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 28px;
      text-align: left;
    }
    .welcome-step {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      padding: 12px 14px;
    }
    .welcome-step-num {
      background: #1f6feb;
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .welcome-step-text strong { font-size: 0.88rem; color: var(--text-primary); display: block; margin-bottom: 2px; }
    .welcome-step-text span { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; }
    .welcome-cta {
      width: 100%;
      padding: 13px 24px;
      font-size: 1rem;
      font-weight: 700;
      background: linear-gradient(135deg, #1f6feb, var(--accent-blue-dark));
      color: #fff;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    @media (hover: hover) {
    .welcome-cta:hover { opacity: 0.9; }
    }

    .welcome-page { width: 100%; }

    .welcome-elo-explainer {
      display: flex; flex-direction: column; gap: 12px;
      margin-bottom: 24px; text-align: left;
    }
    .welcome-elo-row {
      display: flex; align-items: flex-start; gap: 12px;
      background: var(--bg-secondary); border: 1px solid var(--border-default);
      border-radius: 8px; padding: 12px;
    }
    .welcome-elo-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
    .welcome-elo-row span:last-child { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

    .welcome-login-link {
      width: 100%; background: transparent; border: none;
      color: var(--accent-blue); font-size: 0.88rem; padding: 10px;
      cursor: pointer; margin-top: 8px;
    }
    @media (hover: hover) {
    .welcome-login-link:hover { text-decoration: underline; }
    }

    .ranking-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px;
    }

    .rank-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
      position: relative;
      content-visibility: auto;
      contain-intrinsic-block-size: 340px;
    }

    /* Global image fallback — grey background shown while loading or if src fails */
    img { background: var(--border-subtle); }
    img.img-broken { opacity: 0.3; }

    /* Franchise view in list mode — single column */
    .ranking-list.franchise-view {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Franchise grouping cards — base */
    .franchise-group {
      overflow: hidden;
      contain-intrinsic-block-size: auto;
      content-visibility: visible;
    }

    /* List-mode franchise cards */
    .franchise-group:not(.franchise-grid-card) {
      align-items: stretch !important;
      text-align: left !important;
      padding: 0 !important;
      width: 100%;
    }

    /* Grid-mode franchise cards — same look as regular rank-cards */
    .franchise-grid-card {
      position: relative;
      cursor: pointer;
    }
    .franchise-grid-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .franchise-detail-members { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
    .franchise-detail-member {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 8px;
      padding: 8px 10px; cursor: pointer;
    }
    @media (hover: hover) {
    .franchise-detail-member:hover { background: var(--bg-tertiary); }
    }
    .franchise-detail-member img { width: 36px; height: 50px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    .franchise-detail-member-info { flex: 1; min-width: 0; }
    .franchise-detail-member-title { font-size: 0.85rem; font-weight: 600; color: var(--text-bright); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .franchise-detail-member-stats { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-secondary); flex-wrap: wrap; }

    .franchise-table-group { cursor: pointer; }
    .franchise-table-group:hover td { background: var(--bg-tertiary); }
    .franchise-table-member:hover td { background: #1a1f25; }
    .franchise-table-member td { background: var(--bg-primary); border-top: none; }
    .franchise-table-chevron { display: inline-block; transition: transform 0.15s; }

    .franchise-expand-btn {
      font-size: 0.72rem;
      color: var(--accent-blue);
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 2px 0;
      margin-top: 2px;
    }
    @media (hover: hover) {
    .franchise-expand-btn:hover { text-decoration: underline; }
    }
    .franchise-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      cursor: pointer;
    }
    @media (hover: hover) {
    .franchise-header:hover { background: var(--bg-tertiary); }
    }
    .franchise-group .franchise-header img {
      width: 48px !important;
      height: 68px !important;
      max-width: none !important;
      object-fit: cover;
      border-radius: 4px;
      flex-shrink: 0;
    }
    .franchise-info { flex: 1; min-width: 0; }
    .franchise-name { font-size: 0.9rem; font-weight: 600; color: var(--text-bright); margin-bottom: 4px; }
    .franchise-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .franchise-elo { font-size: 0.78rem; color: var(--text-secondary); }
    .franchise-count { font-size: 0.75rem; color: var(--accent-blue); background: #1a2d4d; border-radius: 10px; padding: 1px 7px; }
    /* v1.0.165 — Fuzzy-member count pill on franchise cards. Same shape as
       .franchise-count but amber so users skimming the rankings can
       immediately spot franchises with uncertain entries. Margin-left keeps
       it from butting against the "X entries" pill that always precedes it. */
    .franchise-fuzzy-count {
      font-size: 0.75rem;
      color: var(--accent-amber);
      background: #2d1b00;
      border-radius: 10px;
      padding: 1px 7px;
      margin-left: 6px;
    }
    .franchise-coherence { font-size: 0.72rem; font-weight: 600; border-radius: 10px; padding: 1px 7px; }
    .coherence-consistent { color: #3fb950; background: rgba(63,185,80,0.12); }
    .coherence-mixed      { color: #e3a000; background: rgba(227,160,0,0.12); }
    .coherence-divisive   { color: #f85149; background: rgba(248,81,73,0.12); }
    .franchise-chevron { color: var(--text-muted); font-size: 0.8rem; transition: transform 0.15s; flex-shrink: 0; }
    /* List-mode franchise members (horizontal row with image) */
    .franchise-members { border-top: 1px solid var(--border-default); }
    .franchise-member {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--border-subtle);
    }
    .franchise-member:last-child { border-bottom: none; }
    @media (hover: hover) {
    .franchise-member:hover { background: var(--bg-tertiary); }
    }
    .franchise-group .franchise-member img { width: 28px !important; height: 40px !important; max-width: none !important; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
    .franchise-member-title { flex: 1; font-size: 0.82rem; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .franchise-member-elo { font-size: 0.75rem; color: var(--text-secondary); flex-shrink: 0; }

    /* Grid-mode franchise members — compact stacked list, no image */
    .franchise-grid-card .franchise-members {
      border-top: 1px solid var(--border-default);
      width: 100%;
    }
    .franchise-grid-card .franchise-member {
      padding: 5px 8px;
      gap: 6px;
    }
    .franchise-grid-card .franchise-member img { display: none !important; }
    .franchise-grid-card .franchise-member-title { font-size: 0.75rem; white-space: normal; line-height: 1.3; }
    .franchise-grid-card .franchise-member-elo { font-size: 0.7rem; }

    .rank-card img {
      width: 100%;
      max-width: 130px;
      height: 180px;
      object-fit: cover;
      border-radius: 6px;
    }

    .rank-number {
      position: absolute;
      top: 10px;
      left: 10px;
      background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
      border-radius: 6px;
      font-size: 0.85rem;
      font-weight: 700;
      padding: 2px 7px;
      color: var(--text-bright);
    }

    .rank-number.gold   { background: #b8860b; color: #fff; }
    .rank-number.silver { background: var(--text-muted); color: #fff; }
    .rank-number.bronze { background: #7d4a1a; color: #fff; }

    .rank-title {
      font-size: 0.85rem;
      font-weight: 600;
      line-height: 1.3;
      color: var(--text-bright);
    }

    .rank-elo {
      font-size: 0.78rem;
      color: var(--text-secondary);
    }

    .ep-badge {
      display: inline-block;
      font-size: 0.68rem;
      background: var(--border-subtle);
      border: 1px solid var(--border-default);
      border-radius: 4px;
      padding: 1px 5px;
      color: var(--text-secondary);
      margin-top: 2px;
    }
    .status-badge {
      display: inline-block;
      font-size: 0.68rem;
      border-radius: 4px;
      padding: 1px 5px;
      margin-top: 2px;
      margin-left: 3px;
    }
    .status-badge.watching   { background: #1a2d1a; border: 1px solid var(--accent-green-dark); color: var(--accent-green); }
    .status-badge.rewatching { background: #1a2237; border: 1px solid var(--accent-blue-dark); color: var(--accent-blue); }

    /* BATTLE ACTIONS ROW */
    .battle-actions {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    button:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    /* CONFIDENCE DOTS */
    .confidence {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.72rem;
      padding: 2px 8px;
      border-radius: 20px;
      font-weight: 500;
    }
    .confidence.uncertain { background: #2d1b00; color: var(--accent-amber); }
    .confidence.settling  { background: #1f2a00; color: #9acd32; }
    .confidence.confident { background: #0d2a1a; color: var(--accent-green); }

    /* ERROR */
    #error-msg {
      color: var(--accent-red);
      font-size: 0.9rem;
      text-align: center;
      display: none;
    }

    /* Export textarea */
    #export-area {
      width: 100%;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      color: var(--text-bright);
      font-size: 0.8rem;
      padding: 12px;
      resize: vertical;
      margin-top: 16px;
      display: none;
      font-family: monospace;
    }

    /* HISTORY */
    #history-section {
      margin-top: 32px;
    }
    #history-section h3 {
      font-size: 1rem;
      color: var(--text-secondary);
      margin-bottom: 14px;
      text-align: center;
    }
    .history-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .history-item {
      display: grid;
      grid-template-columns: auto 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.82rem;
    }
    .history-item .history-num { color: var(--text-muted); font-size: 0.72rem; min-width: 32px; }
    .history-item .winner { color: var(--accent-green); font-weight: 600; }
    .history-item .loser  { color: var(--text-secondary); text-align: right; }
    .history-item .elo-change { text-align: center; color: var(--accent-blue); font-size: 0.75rem; white-space: nowrap; }

    /* CARD ACTIONS (fuzzy + anilist on battle cards) */
    .card-actions {
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    /* Long-press "more" chip — visible affordance for the hidden actions on
       touch devices (§5.3). On desktop the chip is hidden and the full action
       row shows inline as before. On coarse pointers the row is collapsed and
       this chip plus a long-press gesture reveals it. */
    .card-more-chip {
      display: none;
      align-self: center;
      margin-top: 6px;
      background: transparent;
      border: 1px dashed var(--border-default);
      color: var(--text-secondary);
      font-size: 0.72rem;
      padding: 4px 12px;
      border-radius: 999px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    @media (hover: hover) {
    .card-more-chip:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
    }
    .anime-card.actions-expanded .card-more-chip {
      border-color: var(--accent-blue);
      color: var(--accent-blue);
      border-style: solid;
    }
    .fuzzy-btn {
      background: transparent;
      border: 1px solid var(--border-default);
      color: var(--text-secondary);
      font-size: 0.7rem;
      padding: 3px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
    }
    /* Hover only on real pointer devices — without this guard, mobile
       browsers leave :hover "stuck" on the last-tapped element until the
       user taps elsewhere, which made the fuzzy toggle look unable to
       deselect because :hover and .active had identical styles. */
    @media (hover: hover) {
      .fuzzy-btn:hover { border-color: var(--accent-amber); color: var(--accent-amber); background: #2d1b00; }
    }
    .fuzzy-btn.active { border-color: var(--accent-amber); color: var(--accent-amber); background: #2d1b00; }
    .card-anilist-link {
      color: var(--text-secondary);
      font-size: 0.7rem;
      text-decoration: none;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid var(--border-default);
      transition: all 0.15s;
    }
    @media (hover: hover) {
    .card-anilist-link:hover { color: var(--accent-blue); border-color: var(--accent-blue); background: #1c2940; }
    }

    /* FUZZY TAG on rank cards */
    .fuzzy-tag {
      font-size: 0.7rem;
      color: var(--accent-amber);
      background: #2d1b00;
      padding: 2px 8px;
      border-radius: 20px;
    }
    /* v1.0.164 — Amber fuzzy outline is reserved for individual member rows
       inside the franchise detail modal, where it pinpoints which member
       of a multi-entry franchise is flagged. The Rankings page itself no
       longer outlines cards (per beta-tester feedback that the outline on
       a whole franchise card mis-implied the entire group was uncertain).
       On the Rankings page, fuzzy is communicated by the inline pill in
       the badge row; in the anime detail modal, by the .modal-fuzzy-notice
       banner. Earlier .rank-card.is-fuzzy rule removed. */
    .franchise-detail-member.is-fuzzy {
      border-color: var(--accent-amber);
      box-shadow: 0 0 0 1px var(--accent-amber);
    }
    /* v1.0.167 — same treatment for the inline expand list on Rankings */
    .franchise-member.is-fuzzy {
      border-color: var(--accent-amber);
      box-shadow: 0 0 0 1px var(--accent-amber);
      border-radius: 4px;
    }
    /* v1.0.167 — amber outline on fuzzy rows in the franchise table expand
       (list-view collapsable) AND on flat list-view rows when not in franchise
       mode. Uses box-shadow inset so the line follows the row's content area
       instead of overlapping neighbouring rows. */
    tr.franchise-table-member.is-fuzzy td,
    tr.ranking-table-row.is-fuzzy td {
      box-shadow: inset 0 1px 0 var(--accent-amber),
                  inset 0 -1px 0 var(--accent-amber);
    }
    tr.franchise-table-member.is-fuzzy td:first-child,
    tr.ranking-table-row.is-fuzzy td:first-child {
      box-shadow: inset 1px 1px 0 var(--accent-amber),
                  inset 1px -1px 0 var(--accent-amber);
    }
    tr.franchise-table-member.is-fuzzy td:last-child,
    tr.ranking-table-row.is-fuzzy td:last-child {
      box-shadow: inset -1px 1px 0 var(--accent-amber),
                  inset -1px -1px 0 var(--accent-amber);
    }
    .member-fuzzy-tag {
      display: inline-block;
      margin-left: 4px;
      font-size: 0.85em;
      vertical-align: baseline;
      filter: saturate(1.2);
    }
    /* Fuzzy notice inside the detail modal — explicit affordance so the
       user can see "this is flagged" without parsing the small pill that
       lives in the rank-card badge row. */
    .modal-fuzzy-notice {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #2d1b00;
      border: 1px solid var(--accent-amber);
      color: var(--accent-amber);
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 12px;
      font-size: 0.85rem;
      line-height: 1.4;
    }
    .modal-fuzzy-notice .icon { font-size: 1.1rem; flex-shrink: 0; }
    .modal-fuzzy-notice .text { flex: 1; }
    .modal-fuzzy-notice button {
      flex-shrink: 0;
      background: var(--accent-amber);
      color: #1a1100;
      border: none;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
    }
    .modal-fuzzy-notice button:hover { filter: brightness(1.1); }
    .streak-badge {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      line-height: 1.4;
    }
    .streak-hot  { background: rgba(248,81,73,0.18); color: #ff7b72; border: 1px solid rgba(248,81,73,0.3); }
    .streak-cold { background: rgba(88,166,255,0.15); color: #79c0ff; border: 1px solid rgba(88,166,255,0.25); }

    /* GENRE / ERA CHARTS */
    .genre-chart-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 7px;
      font-size: 0.82rem;
    }
    .genre-chart-label {
      width: 120px;
      flex-shrink: 0;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .genre-chart-track {
      flex: 1;
      height: 12px;
      background: var(--border-subtle);
      border-radius: 4px;
      overflow: hidden;
    }
    .genre-chart-fill {
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--accent-blue-dark), var(--accent-blue));
      transition: width 0.4s ease;
    }
    .genre-chart-fill.era-fill {
      background: linear-gradient(90deg, #2ea043, var(--accent-green));
    }
    .genre-chart-fill.format-fill {
      background: linear-gradient(90deg, #6e40c9, #a371f7);
    }
    .score-dist-row .genre-chart-fill {
      border-radius: 4px;
      opacity: 0.85;
    }
    .studio-affinity-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    /* min-width:0 on the grid children lets the 1fr columns actually shrink to
       half the container width. Without it, grid items default to min-content
       sizing, so a long anime title in an expanded studio panel pushes its
       column wider and clips the negative numbers in the opposite column. */
    .studio-affinity-grid > * { min-width: 0; }
    @media (max-width: 600px) { .studio-affinity-grid { grid-template-columns: 1fr; } }

    .studio-affinity-row {
      cursor: pointer;
      border-radius: 6px;
      padding: 5px 6px;
      margin: 0 -6px;
      transition: background 0.12s;
      user-select: none;
    }
    @media (hover: hover) {
    .studio-affinity-row:hover { background: var(--border-subtle); }
    }

    .studio-anime-panel {
      margin: 2px 0 6px 0;
      border-left: 2px solid var(--border-subtle);
      padding-left: 10px;
    }

    .studio-anime-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.12s;
      font-size: 0.84rem;
    }
    @media (hover: hover) {
    .studio-anime-item:hover { background: var(--border-subtle); }
    }

    .studio-anime-rank {
      width: 36px;
      flex-shrink: 0;
      color: var(--text-secondary);
      font-size: 0.78rem;
      text-align: right;
    }

    .studio-anime-cover {
      width: 28px;
      height: 40px;
      object-fit: cover;
      border-radius: 3px;
      flex-shrink: 0;
      background: var(--border-subtle);
    }

    .studio-anime-title {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-bright);
    }

    .studio-anime-elo {
      flex-shrink: 0;
      color: var(--text-secondary);
      font-size: 0.78rem;
    }

    .studio-anime-empty {
      color: var(--text-secondary);
      font-size: 0.82rem;
      padding: 6px 0;
    }
    .genre-chart-value {
      width: 100px;
      flex-shrink: 0;
      text-align: right;
      color: var(--text-secondary);
      font-size: 0.78rem;
    }
    .stats-breakdown {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 20px;
    }
    @media (max-width: 700px) { .stats-breakdown { grid-template-columns: 1fr; } }

    /* SEARCH */
    #search-wrap { margin-bottom: 20px; }
    #search-input {
      width: 100%;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      color: var(--text-bright);
      padding: 10px 16px;
      font-size: 0.95rem;
      outline: none;
      transition: border-color 0.2s;
    }
    #search-input:focus { border-color: var(--accent-blue); }

    /* STATS SECTION */
    #stats-section { margin: 24px 0; }
    #stats-section h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 16px; text-align: center; }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }
    .stat-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      padding: 16px;
      text-align: center;
    }
    .stat-number { font-size: 1.8rem; font-weight: 700; color: var(--accent-blue); }
    .stat-label  { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }
    .stats-lists {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .stats-list-section {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      padding: 14px;
    }
    .stats-list-section h4 { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; }
    .stat-anime-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.8rem;
      padding: 5px 0;
      border-bottom: 1px solid var(--border-subtle);
      gap: 8px;
    }
    .stat-anime-row:last-child { border-bottom: none; }
    .stat-anime-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stat-anime-row span:last-child  { color: var(--accent-blue); white-space: nowrap; }

    /* TASTE PROFILE (§6.4.1) */
    .taste-empty, .taste-loading {
      text-align: center;
      padding: 40px 16px;
      color: var(--text-secondary);
    }
    .taste-empty h3 { color: var(--text-bright); margin-bottom: 8px; }
    .taste-empty p  { max-width: 460px; margin: 0 auto; line-height: 1.5; font-size: 0.9rem; }
    .taste-loading .taste-spinner {
      font-size: 2rem;
      margin-bottom: 12px;
      animation: taste-spin 2s linear infinite;
      display: inline-block;
    }
    @keyframes taste-spin { to { transform: rotate(360deg); } }
    .taste-hero {
      background: linear-gradient(135deg, rgba(56,139,253,0.12), rgba(163,113,247,0.12));
      border: 1px solid var(--border-default);
      border-radius: 14px;
      padding: 24px 20px;
      text-align: center;
      margin-bottom: 24px;
    }
    .taste-hero-emoji { font-size: 2.4rem; margin-bottom: 4px; }
    .taste-hero h2 {
      margin: 6px 0 8px;
      font-size: 1.35rem;
      color: var(--text-bright);
      line-height: 1.25;
    }
    .taste-hero p {
      color: var(--text-primary);
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.5;
      font-size: 0.9rem;
    }
    .taste-meta {
      margin-top: 14px;
      color: var(--text-secondary);
      font-size: 0.82rem;
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }
    /* ── Identity card ──────────────────────────────────────────────────── */
    .taste-identity-card {
      background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
      border: 1px solid var(--border-default); border-radius: 16px;
      padding: 22px; margin-bottom: 18px;
    }
    .taste-identity-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
    .taste-identity-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
    .taste-identity-type { font-size: 1.6rem; font-weight: 800; color: var(--accent-blue); margin: 0; line-height: 1.2; }
    .taste-identity-insights { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
    .taste-insight-pill { background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 8px; padding: 10px 14px; }
    .taste-insight-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 3px; }
    .taste-insight-headline { display: block; font-size: 0.92rem; font-weight: 700; color: var(--text-bright); margin-bottom: 2px; }
    .taste-insight-text { font-size: 0.85rem; color: var(--text-primary); line-height: 1.5; }

    /* ── Mood grid ──────────────────────────────────────────────────────── */
    .taste-mood-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .taste-mood-tile {
      background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 10px;
      overflow: hidden; cursor: pointer; transition: border-color 0.15s;
    }
    @media (hover: hover) {
    .taste-mood-tile:hover { border-color: var(--accent-blue); }
    }
    .taste-mood-tile.active { border-color: var(--accent-blue); background: var(--bg-tertiary); }
    #moods-section { margin-bottom: 20px; }
    .taste-mood-covers { display: flex; height: 70px; overflow: hidden; }
    .taste-mood-covers img { flex: 1; object-fit: cover; min-width: 0; }
    .taste-mood-footer { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
    .taste-mood-emoji { font-size: 1rem; }
    .taste-mood-label { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--text-bright); }
    .taste-mood-arrow { font-size: 0.75rem; color: var(--accent-blue); }

    /* ── Drift ──────────────────────────────────────────────────────────── */
    /* TASTE EVOLUTION */
    .evo-timeline { display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
    .evo-arrow { color: var(--border-default); font-size: 1.2rem; padding-top: 32px; flex-shrink: 0; }
    /* Gap-arrow: shown between non-consecutive snapshots so the user knows
       intermediate milestones weren't recorded (rather than thinking the
       timeline is broken). Slightly dimmer + ellipsis. */
    .evo-arrow.evo-arrow-gap {
      color: var(--accent-amber, #d29922);
      font-size: 1rem;
      letter-spacing: -1px;
      cursor: help;
    }
    .evo-card { background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 10px; padding: 12px; min-width: 150px; flex-shrink: 0; }
    .evo-card-current { border-color: var(--accent-blue); }
    .evo-card-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px; }
    .evo-card-current .evo-card-label { color: var(--accent-blue); }
    .evo-entry { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); }
    .evo-entry:last-child { border-bottom: none; }
    .evo-rank { font-size: 0.65rem; color: var(--text-muted); width: 12px; flex-shrink: 0; }
    .evo-title { font-size: 0.78rem; color: var(--text-primary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .evo-entry.evo-new .evo-title { color: var(--accent-green); }
    .evo-badge { font-size: 0.6rem; background: var(--bg-tertiary); color: var(--accent-green); border: 1px solid var(--accent-green-dark); border-radius: 4px; padding: 1px 4px; flex-shrink: 0; }

    .taste-drift-placeholder { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; font-style: italic; }
    .taste-drift-since { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
    .taste-drift-rows { display: flex; flex-direction: column; gap: 6px; }
    .taste-drift-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: var(--bg-primary); }
    .taste-drift-row.up .drift-arrow { color: var(--accent-green); }
    .taste-drift-row.down .drift-arrow { color: var(--accent-red); }
    .drift-genre { flex: 1; font-size: 0.85rem; color: var(--text-primary); }
    .drift-arrow { font-size: 0.75rem; }
    .drift-delta { font-size: 0.78rem; color: var(--text-secondary); min-width: 60px; text-align: right; }

    /* ── Deep dive collapsible ──────────────────────────────────────────── */
    .taste-deepdive { margin-bottom: 18px; }
    .taste-deepdive-toggle {
      font-size: 0.88rem; color: var(--text-secondary); cursor: pointer; padding: 10px 0;
      list-style: none; user-select: none;
    }
    .taste-deepdive-toggle::-webkit-details-marker { display: none; }
    .taste-deepdive[open] .taste-deepdive-toggle { color: var(--text-bright); }
    .taste-section-title { margin: 0 0 4px; font-size: 1rem; color: var(--text-bright); }

    .taste-section {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 12px;
      padding: 18px;
      margin-bottom: 18px;
    }
    .taste-section h3 {
      margin: 0 0 4px;
      font-size: 1rem;
      color: var(--text-bright);
    }
    .taste-sub {
      color: var(--text-secondary);
      font-size: 0.82rem;
      margin: 0 0 14px;
      line-height: 1.4;
    }
    .taste-pair-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    @media (max-width: 600px) { .taste-pair-grid { grid-template-columns: 1fr; gap: 24px; } }
    .taste-col-hdr {
      font-size: 0.8rem;
      font-weight: 600;
      margin-bottom: 10px;
      letter-spacing: 0.02em;
    }
    .taste-col-hdr.pos { color: var(--accent-green); }
    .taste-col-hdr.neg { color: var(--accent-red); }
    .taste-bar-col {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .taste-bar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 0;
      font-size: 0.84rem;
    }
    .taste-bar-label {
      flex: 0 0 34%;
      min-width: 0;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .taste-bar-track {
      flex: 1;
      height: 10px;
      background: var(--border-subtle);
      border-radius: 999px;
      overflow: hidden;
    }
    .taste-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-blue-dark), var(--accent-blue));
      border-radius: 999px;
      transition: width 0.4s ease;
    }
    .taste-pos .taste-bar-fill { background: linear-gradient(90deg, #2ea043, var(--accent-green)); }
    .taste-neg .taste-bar-fill { background: linear-gradient(90deg, #da3633, var(--accent-red)); }
    .taste-bar-value {
      flex: 0 0 auto;
      min-width: 64px;
      text-align: right;
      font-size: 0.8rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .taste-pos .taste-bar-value { color: var(--accent-green); }
    .taste-neg .taste-bar-value { color: var(--accent-red); }
    .taste-bar-sub {
      color: var(--text-muted);
      font-weight: 400;
      font-size: 0.75rem;
    }
    .taste-empty-row {
      color: var(--text-secondary);
      font-size: 0.8rem;
      padding: 8px 0;
    }
    @media (max-width: 520px) {
      .taste-bar-row   { font-size: 0.78rem; gap: 8px; }
      .taste-bar-label { flex-basis: 42%; }
      .taste-bar-value { min-width: 54px; font-size: 0.75rem; }
    }

    /* DETAIL MODAL */
    #detail-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(4px);
      padding: 40px 16px;
      overflow-y: auto;
    }
    .modal-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 16px;
      max-width: 560px;
      margin: 0 auto;
      padding: 24px;
      position: relative;
      display: flex;
      gap: 20px;
      /* v1.0.146 — cap the modal box at viewport so franchise-detail content
         (members list + sparkline + recent battles) all stay inside the
         rounded card. Without this cap, multi-entry franchises like AoT (9+
         members) made the box outgrow the viewport on Mac laptops and the
         sparkline / battles appeared to break out of the bottom border. */
      max-height: calc(100vh - 80px);
      overflow-y: auto;
    }
    .modal-close {
      position: absolute;
      top: 12px; right: 12px;
      background: var(--border-subtle);
      border: 1px solid var(--border-default);
      color: var(--text-secondary);
      font-size: 0.9rem;
      width: 28px; height: 28px;
      border-radius: 50%;
      padding: 0;
      cursor: pointer;
    }
    .modal-close:hover { color: var(--accent-red); border-color: var(--accent-red); }
    #modal-cover {
      width: 110px; height: 155px;
      object-fit: cover;
      border-radius: 8px;
      flex-shrink: 0;
    }
    .modal-content { flex: 1; min-width: 0; }
    .modal-content h2 { font-size: 1.05rem; margin-bottom: 6px; line-height: 1.3; padding-right: 24px; }
    .modal-rank-line { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 12px; }
    .modal-stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-bottom: 12px;
    }
    .modal-stat {
      background: var(--bg-primary);
      border-radius: 8px;
      padding: 8px 4px;
      text-align: center;
    }
    .modal-stat .val { font-size: 1rem; font-weight: 700; color: var(--text-bright); display: block; }
    .modal-stat label { font-size: 0.62rem; color: var(--text-secondary); }
    .modal-anilist-btn {
      display: inline-block;
      background: #02a9ff;
      color: #fff;
      text-decoration: none;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 0.8rem;
      margin-bottom: 14px;
    }
    .modal-anilist-btn:hover { background: #0090d9; }
    #modal-unfuzzy-btn {
      margin-left: 8px;
      background: #2d1b00;
      border: 1px solid var(--accent-amber);
      color: var(--accent-amber);
      font-size: 0.8rem;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
    }
    #modal-unfuzzy-btn:hover { background: #3d2800; }
    .modal-recent h4 { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
    .modal-recent-item {
      font-size: 0.78rem;
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
      border-bottom: 1px solid var(--border-subtle);
      gap: 8px;
    }
    .modal-recent-item:last-child { border-bottom: none; }
    .modal-win, .modal-loss { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .modal-win  { color: var(--accent-green); }
    .modal-loss { color: var(--accent-red); }
    .modal-recent-item > span:last-child { flex-shrink: 0; }
    .modal-meta-line {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-bottom: 10px;
    }
    .modal-genres {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 12px;
    }
    .modal-genre-tag {
      background: var(--border-subtle);
      border: 1px solid var(--border-default);
      border-radius: 20px;
      padding: 2px 9px;
      font-size: 0.7rem;
      color: var(--text-secondary);
    }

    /* TIER BADGE on rank cards */
    .tier-badge {
      position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
      border-radius: 4px; font-size: 0.68rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
    }
    /* In table cells, reset positioning so the badge is visible inline */
    td .tier-badge {
      position: static; display: inline-flex;
    }
    .tier-badge.t-s { background: #b22222; color: #fff; }
    .tier-badge.t-a { background: #b86000; color: #fff; }
    .tier-badge.t-b { background: #1e6e30; color: #fff; }
    .tier-badge.t-c { background: #1355a0; color: #fff; }
    .tier-badge.t-d { background: #444c56; color: #ccc; }

    /* SPARKLINE in detail modal */
    .sparkline-wrap { margin: 10px 0; background: var(--bg-primary); border-radius: 8px; padding: 8px 10px; }
    .sparkline-wrap h4 { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 4px; }
    .sparkline-wrap svg { display: block; width: 100%; overflow: visible; }

    /* SHARE MODAL */
    #share-modal {
      display: none; position: fixed; inset: 0; z-index: 1500;
      background: rgba(0,0,0,0.8); backdrop-filter: blur(4px);
      align-items: center; justify-content: center; padding: 20px;
      overflow-y: auto;
    }
    .share-box {
      background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 16px;
      padding: 28px; max-width: 440px; width: 100%; position: relative;
    }
    .share-box h3 { font-size: 1.15rem; color: var(--accent-blue); margin-bottom: 6px; text-align: center; }
    .share-box p.share-subtitle { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 18px; text-align: center; }

    .share-primary {
      width: 100%; font-size: 1rem; padding: 14px 20px;
      margin-bottom: 10px; min-height: 48px;
    }
    .share-copy-image {
      width: 100%; min-height: 44px; font-size: 0.88rem; margin-bottom: 16px;
    }

    #share-url {
      width: 100%; background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 6px;
      color: var(--text-bright); font-size: 0.72rem; padding: 8px 10px; box-sizing: border-box;
      font-family: monospace; resize: none; height: 60px; display: block; margin-bottom: 8px;
    }
    .share-copy-link { width: 100%; min-height: 40px; margin-bottom: 12px; }

    .share-close-bottom {
      width: 100%; background: transparent; border: none; color: var(--text-muted);
      font-size: 0.85rem; padding: 8px; cursor: pointer; margin-top: 4px;
    }
    .share-close-bottom:hover { color: var(--text-bright); }

    .share-close {
      position: absolute; top: 12px; right: 12px; background: var(--border-subtle);
      border: 1px solid var(--border-default); color: var(--text-secondary); font-size: 0.9rem;
      width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
    }
    .share-close:hover { color: var(--accent-red); border-color: var(--accent-red); }

    /* SHARED VIEW */
    #shared-screen { display: none; }
    .shared-header { text-align: center; margin-bottom: 28px; }
    .shared-header h2 { font-size: 1.6rem; color: var(--accent-blue); margin-bottom: 6px; }
    .shared-header p { color: var(--text-secondary); }

    /* WARM START OPTION */
    .warm-start-row {
      display: flex; align-items: center; gap: 8px; margin-top: 6px;
      font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; user-select: none;
    }
    .warm-start-row input[type="checkbox"] { accent-color: var(--accent-blue); width: 15px; height: 15px; cursor: pointer; }
    .warm-start-info { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 4px; }

    /* GUEST MODE DIVIDER */
    .or-divider {
      display: flex; align-items: center; gap: 12px;
      color: var(--text-muted); font-size: 0.82rem; margin: 20px 0 8px;
      width: 320px; max-width: 100%;
    }
    .or-divider::before, .or-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--border-default);
    }

    /* EXCLUDE BUTTON on battle cards */
    .exclude-btn {
      background: transparent; border: 1px solid var(--border-default); color: var(--text-secondary);
      font-size: 0.7rem; padding: 3px 8px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
    }
    @media (hover: hover) {
      @media (hover: hover) {
      .exclude-btn:hover { border-color: var(--accent-red); color: var(--accent-red); background: #2a0a0a; }
      }
    }

    /* EXCLUDED SECTION */
    #excluded-section { margin: 24px 0; }
    #excluded-section h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 14px; text-align: center; }
    .excluded-list { display: flex; flex-direction: column; gap: 8px; }
    .excluded-item {
      display: flex; align-items: center; gap: 12px;
      background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 10px; padding: 10px 14px;
    }
    .excluded-item img { width: 36px; height: 50px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    .excluded-item-title { flex: 1; font-size: 0.85rem; color: var(--text-secondary); }
    .excluded-item button { flex-shrink: 0; }

    /* LANGUAGE TOGGLE */

    /* KEYBOARD HINT ROW */
    .kb-hints {
      text-align: center; font-size: 0.72rem; color: var(--text-muted); margin-top: 10px;
    }
    @media (hover: none) and (pointer: coarse) {
      .kb-hints { display: none; }
    }
    .kb-hints kbd {
      background: var(--border-subtle); border: 1px solid var(--border-default); border-radius: 4px;
      padding: 1px 5px; font-size: 0.7rem; color: var(--text-secondary); font-family: inherit;
    }

    /* SORT + FILTER ROW */
    .list-controls {
      display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
    }
    .sort-btn {
      background: var(--border-subtle); border: 1px solid var(--border-default); color: var(--text-secondary);
      font-size: 0.78rem; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
      line-height: 1; display: inline-flex; align-items: center;
    }
    @media (hover: hover) { .sort-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); } }
    .sort-btn.active { background: #1c2940; border-color: var(--accent-blue); color: var(--accent-blue); font-weight: 600; }
    #ranking-controls-right {
      display: flex; align-items: center; gap: 6px; margin-left: auto;
    }
    .fuzzy-filter-btn {
      background: var(--border-subtle); border: 1px solid var(--border-default); color: var(--text-secondary);
      font-size: 0.78rem; padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
      line-height: 1; display: inline-flex; align-items: center; gap: 4px;
    }
    @media (hover: hover) { .fuzzy-filter-btn:hover { border-color: var(--accent-amber); color: var(--accent-amber); } }
    .fuzzy-filter-btn.active { background: #2d1b00; border-color: var(--accent-amber); color: var(--accent-amber); }

    /* FORMAT FILTER BUTTONS */
    .format-row {
      display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
    }
    .format-row-label { font-size: 0.72rem; color: var(--text-secondary); margin-right: 4px; }
    .format-btn {
      background: var(--border-subtle); border: 1px solid var(--border-default); color: var(--text-secondary);
      font-size: 0.72rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
    }
    @media (hover: hover) { .format-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); } }
    .format-btn.active { background: #1c2940; border-color: var(--accent-blue); color: var(--accent-blue); font-weight: 600; }
    .format-btn.hidden-fmt { background: var(--border-subtle); border-color: var(--border-default); color: #484f58; text-decoration: line-through; }

    /* DISAGREEMENTS SECTION */
    /* PREDICTOR */
    .predictor-result {
      display: flex; gap: 14px; align-items: flex-start;
      background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 12px; padding: 16px;
    }
    .predictor-cover { width: 64px; min-width: 64px; border-radius: 6px; aspect-ratio: 2/3; object-fit: cover; }
    .predictor-body { flex: 1; min-width: 0; }
    .predictor-title { font-size: 0.95rem; font-weight: 700; color: var(--text-bright); margin-bottom: 6px; }
    .predictor-tier-badge {
      display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 1rem;
      font-weight: 800; letter-spacing: 1px; margin-bottom: 8px;
    }
    .predictor-tier-badge.t-s { background:#2d1b69; color:#b388ff; border:1px solid #7c4dff; }
    .predictor-tier-badge.t-a { background:#1a2d1a; color:#69f0ae; border:1px solid #00e676; }
    .predictor-tier-badge.t-b { background:#1a2237; color:#82b1ff; border:1px solid #448aff; }
    .predictor-tier-badge.t-c { background:#2d2200; color:#ffd54f; border:1px solid #ffc107; }
    .predictor-tier-badge.t-d { background:#2d1a1a; color:#ff8a80; border:1px solid #ff5252; }
    .predictor-reasons { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; }
    .predictor-reasons span { color: var(--text-primary); }
    .predictor-already { color: var(--accent-green); font-size: 0.88rem; padding: 8px 0; }
    .predictor-dropdown {
      position: absolute; top: calc(100% + 4px); left: 0;
      width: calc(100% - 90px); /* align under input, not button */
      background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 8px;
      z-index: 200; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .predictor-dropdown-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; cursor: pointer; transition: background 0.1s;
    }
    .predictor-dropdown-item:hover,
    .predictor-dropdown-item.focused { background: var(--border-subtle); }
    .predictor-dropdown-item img { width: 32px; height: 46px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
    .predictor-dropdown-item-info { min-width: 0; }
    .predictor-dropdown-item-title { font-size: 0.82rem; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .predictor-dropdown-item-meta  { font-size: 0.7rem; color: var(--text-secondary); }

    #disagree-section { margin-top: 28px; overflow: hidden; }
    #disagree-section h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 16px; }
    .disagree-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 600px) { .disagree-cols { grid-template-columns: 1fr; } }
    .disagree-col { min-width: 0; overflow: hidden; }
    .disagree-col h4 { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; font-weight: 600; word-break: break-word; }
    .disagree-item {
      display: flex; align-items: center; gap: 10px; padding: 8px 10px;
      background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 8px; margin-bottom: 6px; cursor: pointer;
      transition: border-color 0.15s; min-width: 0; overflow: hidden;
    }
    .disagree-item:hover { border-color: var(--accent-blue); }
    .disagree-item img { width: 36px; height: 50px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    .disagree-item-info { flex: 1; min-width: 0; }
    .disagree-item-title { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .disagree-item-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; word-break: break-word; }
    .disagree-delta { font-size: 0.78rem; font-weight: 700; flex-shrink: 0; }
    .delta-up   { color: var(--accent-green); }
    .delta-down { color: var(--accent-red); }

    /* ── ANILIST AUTH ───────────────────────────────────────────────────── */
    .btn-anilist-login {
      background: linear-gradient(135deg, #1a6ef5, #0ea5e9);
      color: #fff;
      font-size: 0.95rem;
      padding: 11px 28px;
      border-radius: 10px;
      margin-bottom: 4px;
      width: 240px;
    }
    @media (hover: hover) {
    .btn-anilist-login:hover { background: linear-gradient(135deg, #2d7cf7, #22b8ff); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(26,110,245,0.35); }
    }
    .btn-mal-login {
      background: linear-gradient(135deg, #2e51a2, #4a74d8);
      color: #fff;
      font-size: 0.95rem;
      padding: 11px 28px;
      border-radius: 10px;
      margin-bottom: 4px;
      width: 240px;
    }
    @media (hover: hover) {
    .btn-mal-login:hover { background: linear-gradient(135deg, #3d62b8, #5a84e8); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(46,81,162,0.4); }
    }

    .auth-logged-in-row {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      padding: 10px 14px;
      width: 240px;
      margin-bottom: 4px;
    }
    .auth-logged-in-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .auth-logged-in-name { flex: 1; font-size: 0.87rem; font-weight: 600; color: var(--text-bright); }
    .auth-logout-btn { background: none; border: none; color: var(--text-secondary); font-size: 0.72rem; padding: 2px 6px; cursor: pointer; border-radius: 4px; }
    @media (hover: hover) {
    .auth-logout-btn:hover { color: var(--accent-red); background: var(--border-subtle); }
    }

    .auth-setup-panel {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 14px;
      padding: 20px 22px;
      max-width: 440px;
      width: 100%;
      text-align: left;
      position: relative;
      margin-bottom: 8px;
    }
    .auth-setup-panel h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 16px; color: var(--text-bright); text-align: center; }
    .auth-panel-close {
      position: absolute; top: 12px; right: 12px;
      background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; padding: 2px 8px;
    }
    .auth-panel-close:hover { color: var(--text-bright); }
    .auth-step {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 14px;
    }
    .auth-step-num {
      width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
      background: var(--border-subtle); border: 1px solid var(--accent-blue-dark); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.72rem; font-weight: 700; color: var(--accent-blue);
    }
    .auth-step strong { font-size: 0.84rem; display: block; margin-bottom: 4px; }
    .auth-step p { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
    .auth-step a { color: var(--accent-blue); text-decoration: none; }
    .auth-step a:hover { text-decoration: underline; }
    .auth-step code { background: var(--border-subtle); padding: 1px 5px; border-radius: 4px; font-size: 0.77rem; color: var(--text-primary); }
    .auth-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 4px 0 14px; }
    #auth-error-msg { color: var(--accent-red); font-size: 0.78rem; margin-top: 6px; display: none; }

    /* header auth badge */
    #mal-header-badge {
      display: none;
      align-items: center;
      gap: 6px;
      background: #1c2333;
      border: 1px solid var(--border-default);
      border-radius: 20px;
      padding: 4px 10px 4px 6px;
    }
    #mal-header-badge img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
    #auth-header-badge {
      display: none;
    }
    /* Avatar dropdown shared styles */
    .avatar-badge-wrap { position: relative; cursor: pointer; flex-shrink: 0; }
    .avatar-badge-wrap img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
    .avatar-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      padding: 8px;
      z-index: 200;
      min-width: 140px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      flex-direction: column;
      gap: 6px;
      white-space: nowrap;
    }
    .avatar-dropdown.open { display: flex; }
    .avatar-dropdown-name {
      font-size: 0.85rem; font-weight: 600;
      color: var(--text-primary); padding: 2px 4px;
    }
    .avatar-dropdown-logout {
      background: none; border: 1px solid var(--border-default);
      color: var(--text-secondary); border-radius: 5px;
      padding: 5px 10px; cursor: pointer; font-size: 0.8rem;
      width: 100%; text-align: left;
    }
    @media (hover: hover) { .avatar-dropdown-logout:hover { border-color: var(--accent-red); color: var(--accent-red); } }

    /* redirect URI display */
    .auth-redirect-row {
      display: flex; gap: 6px; align-items: center; margin-top: 6px;
    }
    .auth-redirect-row code {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      background: var(--bg-primary); border: 1px solid var(--border-default); padding: 5px 8px; border-radius: 6px;
      font-size: 0.74rem; color: var(--accent-blue);
    }
    .auth-copy-btn {
      background: var(--border-subtle); border: 1px solid var(--border-default); color: var(--text-primary);
      padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 0.74rem; white-space: nowrap;
    }
    @media (hover: hover) {
    .auth-copy-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
    }

    /* manual fallback collapsible */
    .auth-manual-details { margin-top: 12px; }
    .auth-manual-details summary {
      font-size: 0.77rem; color: var(--text-secondary); cursor: pointer; padding: 6px 0; list-style: none;
    }
    .auth-manual-details summary::before { content: '▶ '; font-size: 0.65rem; }
    .auth-manual-details[open] summary::before { content: '▼ '; }
    .auth-manual-details p { font-size: 0.77rem; color: var(--text-secondary); margin: 6px 0; line-height: 1.5; }

    /* ── SYNC TO ANILIST MODAL ───────────────────────────────────────────── */
    #sync-modal, #mal-sync-modal {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 200;
      align-items: center; justify-content: center;
      padding: 16px;
    }
    .sync-modal-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 16px;
      padding: 28px 24px;
      max-width: 560px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      position: relative;
    }
    .sync-modal-box h3 { font-size: 1.1rem; margin-bottom: 4px; }
    .sync-modal-sub { font-size: 0.83rem; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.5; }
    /* ── Confirm modal ── */
    #confirm-modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.7); z-index: 9999;
      align-items: center; justify-content: center; padding: 16px;
    }
    #confirm-modal.open { display: flex; }
    .confirm-modal-box {
      background: var(--bg-secondary); border: 1px solid var(--border-default);
      border-radius: 12px; padding: 24px 22px;
      max-width: 360px; width: 100%;
    }
    .confirm-modal-box h3 { font-size: 1rem; color: var(--text-bright); margin-bottom: 8px; }
    .confirm-modal-box p  { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; }
    .confirm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
    .confirm-btn-cancel  { padding: 7px 16px; border-radius: 6px; border: 1px solid var(--border-default); background: transparent; color: var(--text-primary); cursor: pointer; font-size: 0.85rem; }
    @media (hover: hover) {
    .confirm-btn-cancel:hover  { background: var(--border-subtle); }
    }
    .confirm-btn-danger  { padding: 7px 16px; border-radius: 6px; border: none; background: #da3633; color: #fff; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
    @media (hover: hover) {
    .confirm-btn-danger:hover  { background: var(--accent-red); }
    }
    .sync-preview-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 20px; }
    .sync-preview-table th {
      text-align: left; font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;
      padding: 4px 8px; border-bottom: 1px solid var(--border-default);
    }
    .sync-preview-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
    .sync-preview-table tr:last-child td { border-bottom: none; }
    .sync-preview-table img { width: 28px; height: 38px; object-fit: cover; border-radius: 3px; vertical-align: middle; }
    .sync-score-pill {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-weight: 700; font-size: 0.78rem;
    }
    .sync-score-10 { background: #1a3a1a; color: var(--accent-green); }
    .sync-score-9  { background: #1a3a1a; color: #56d364; }
    .sync-score-8  { background: #1f2f14; color: #a5d96a; }
    .sync-score-7  { background: #2a2614; color: #e3c96a; }
    .sync-score-6  { background: #2a2010; color: var(--accent-amber); }
    .sync-score-5  { background: #2a1a10; color: #f0883e; }
    .sync-score-low { background: #3d0f0a; color: var(--accent-red); }
    .sync-progress-wrap { margin: 16px 0; }
    .sync-progress-bar-track {
      width: 100%; height: 8px; background: var(--border-subtle); border-radius: 4px; overflow: hidden; margin-bottom: 8px;
    }
    .sync-progress-bar-fill { height: 100%; background: var(--accent-green); border-radius: 4px; transition: width 0.3s; }
    .sync-progress-text { font-size: 0.82rem; color: var(--text-secondary); text-align: center; }
    .sync-done-msg { font-size: 0.95rem; text-align: center; padding: 16px 0; color: var(--accent-green); }
    .sync-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
    .util-btn-anilist {
      background: linear-gradient(135deg, #1a6ef5, #0ea5e9);
      color: #fff;
      border: none;
      font-size: 0.8rem;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      display: none; /* shown only when authed */
    }
    @media (hover: hover) {
    .util-btn-anilist:hover { background: linear-gradient(135deg, #2d7cf7, #22b8ff); }
    }

    /* SETTLE MODE BANNER */
    #pool-warning-banner {
      display: none;
      background: linear-gradient(90deg, #2d1f0e, #241808);
      border: 1px solid #bb8009;
      border-radius: 8px;
      padding: 8px 14px;
      margin-bottom: 12px;
      font-size: 0.82rem;
      color: var(--accent-amber);
      align-items: center;
      gap: 8px;
    }
    #pool-warning-banner.active { display: flex; }
    #settle-banner {
      display: none;
      background: linear-gradient(90deg, #1a2d1a, #162416);
      border: 1px solid var(--accent-green-dark);
      border-radius: 8px;
      padding: 8px 14px;
      margin-bottom: 12px;
      font-size: 0.82rem;
      color: var(--accent-green);
      align-items: center;
      gap: 8px;
      justify-content: space-between;
    }
    #settle-banner.active { display: flex; }

    #blind-banner {
      display: none;
      background: linear-gradient(90deg, #1a1230, #160f2a);
      border: 1px solid #6e40c9;
      border-radius: 8px;
      padding: 8px 14px;
      margin-bottom: 12px;
      font-size: 0.82rem;
      color: #a371f7;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
    }
    #blind-banner.active { display: flex; }

    /* Blind mode — ELO ratings hidden so you pick on instinct, not numbers */
    #battle-screen.blind .elo-badge { visibility: hidden; }

    /* ── Notification Centre ── */
    #notif-bell {
      position: relative;
      background: none;
      border: 1px solid var(--border-default);
      border-radius: 8px;
      cursor: pointer;
      font-size: 1rem;
      padding: 4px 8px;
      line-height: 1;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 4px;
      transition: border-color 0.15s, color 0.15s;
      flex-shrink: 0;
    }
    @media (hover: hover) {
    #notif-bell:hover { border-color: var(--accent-blue); color: var(--text-bright); }
    }

    #notif-badge {
      background: #f85149;
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
      border-radius: 10px;
      padding: 1px 5px;
      min-width: 16px;
      text-align: center;
      line-height: 1.4;
    }

    #notif-centre-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 1100;
      align-items: flex-start;
      justify-content: flex-end;
    }
    #notif-centre-modal.open { display: flex; }

    .nc-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-left: 1px solid var(--border-default);
      border-radius: 12px 0 0 12px;
      width: min(380px, 92vw);
      max-height: calc(100vh - 56px);
      margin-top: 56px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: -4px 4px 24px rgba(0,0,0,0.4);
    }

    .nc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-subtle);
      flex-shrink: 0;
    }
    .nc-header h3 { margin: 0; font-size: 0.95rem; }

    .nc-clear-btn {
      background: none;
      border: 1px solid var(--border-default);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.75rem;
      padding: 3px 10px;
      cursor: pointer;
    }
    @media (hover: hover) {
    .nc-clear-btn:hover { border-color: var(--accent-red); color: var(--accent-red); }
    }

    .nc-close-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 1rem;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 6px;
    }
    .nc-close-btn:hover { color: var(--text-bright); }

    .nc-list {
      overflow-y: auto;
      flex: 1;
      padding: 8px 0;
    }

    /* v1.0.168 — phone push settings inside the notification centre modal.
       Sits below the in-app bell list as a distinct configuration section,
       so the bell stays the entry point for "all notification stuff" without
       needing a separate Settings modal. */
    .nc-push-section {
      border-top: 1px solid var(--border-default);
      padding: 14px 16px;
      background: var(--bg-primary);
    }
    .nc-push-title {
      margin: 0 0 6px;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-bright);
    }
    .nc-push-blurb {
      margin: 0 0 10px;
      font-size: 0.78rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }
    .nc-push-master {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--text-primary);
      cursor: pointer;
      padding: 6px 0;
      min-height: 28px;
    }
    .nc-push-master input[type="checkbox"] {
      width: 18px; height: 18px; cursor: pointer; flex-shrink: 0;
    }
    .nc-push-categories {
      display: none;
      flex-direction: column;
      gap: 4px;
      margin: 8px 0 0 14px;
      padding-left: 12px;
      border-left: 2px solid var(--border-subtle);
    }
    .nc-push-categories.show { display: flex; }
    .nc-push-categories label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 4px 0;
      min-height: 24px;
    }
    .nc-push-categories input[type="checkbox"] {
      width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
    }
    /* Greyed-out master toggle when push isn't supported or is blocked */
    .nc-push-section.is-unavailable .nc-push-master { opacity: 0.55; cursor: not-allowed; }
    .nc-push-section.is-unavailable .nc-push-master input { pointer-events: none; }

    .nc-empty {
      padding: 32px 20px;
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.88rem;
    }

    .nc-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .nc-item:last-child { border-bottom: none; }

    .nc-item-body { display: flex; flex-direction: column; gap: 3px; }
    .nc-item-msg  { font-size: 0.86rem; color: var(--text-bright); line-height: 1.4; }
    .nc-item-time { font-size: 0.75rem; color: var(--text-secondary); }

    .nc-item-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .nc-action-btn {
      background: var(--border-subtle);
      border: 1px solid var(--border-default);
      border-radius: 6px;
      color: var(--text-bright);
      font-size: 0.8rem;
      padding: 5px 12px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .nc-action-btn:hover { border-color: var(--accent-blue); background: #1c2940; }

    .nc-dismiss-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 0.8rem;
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 6px;
      margin-left: auto;
    }
    .nc-dismiss-btn:hover { color: var(--accent-red); }

    /* Post-finish Tower prompt banner — gold, matches Tower ⚡ branding */
    #finish-prompt-banner {
      display: none;
      background: linear-gradient(90deg, #2a2200, #211b00);
      border: 1px solid #f0c040;
      border-radius: 8px;
      padding: 8px 14px;
      margin: 0 auto 12px;
      max-width: 900px;
      width: calc(100% - 32px);
      font-size: 0.82rem;
      color: #f0c040;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      box-sizing: border-box;
    }
    #finish-prompt-banner.active { display: flex; }

    #new-anime-banner {
      display: none;
      background: linear-gradient(90deg, #1a2237, #161e2e);
      border: 1px solid var(--accent-blue-dark);
      border-radius: 8px;
      padding: 8px 14px;
      margin: 0 auto 12px;
      max-width: 900px;
      width: calc(100% - 32px);
      font-size: 0.82rem;
      color: var(--accent-blue);
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      box-sizing: border-box;
    }
    #new-anime-banner.active { display: flex; }

    /* Real-time cross-device sync banner (blue, same shape as new-anime-banner) */
    #realtime-sync-banner {
      display: none;
      background: linear-gradient(90deg, #1a2237, #161e2e);
      border: 1px solid var(--accent-blue-dark);
      border-radius: 8px;
      padding: 8px 14px;
      margin: 0 auto 12px;
      max-width: 900px;
      width: calc(100% - 32px);
      font-size: 0.82rem;
      color: var(--accent-blue);
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      box-sizing: border-box;
    }
    #realtime-sync-banner.active { display: flex; }

    /* §5.2.7 — Removed-anime banner (amber, parallel to new-anime-banner) */
    #removed-anime-banner {
      display: none;
      background: linear-gradient(90deg, #2a1f0d, #211a0e);
      border: 1px solid #d29922;
      border-radius: 8px;
      padding: 8px 14px;
      margin: 0 auto 12px;
      max-width: 900px;
      width: calc(100% - 32px);
      font-size: 0.82rem;
      color: #e3b341;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      box-sizing: border-box;
    }
    #removed-anime-banner.active { display: flex; }

    /* §5.2.7 — Archive confirmation modal · §5.2.12 — Guest merge modal */
    #archive-confirm-modal,
    #guest-merge-modal {
      display: none; position: fixed; inset: 0; z-index: 1500;
      background: rgba(0,0,0,0.8); backdrop-filter: blur(4px);
      align-items: center; justify-content: center; padding: 20px;
      overflow-y: auto;
    }
    #guest-merge-modal .archive-confirm-box h3 { color: var(--accent-blue); }
    .archive-confirm-box {
      background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 16px;
      padding: 28px; max-width: 520px; width: 100%; position: relative;
      max-height: calc(100vh - 40px); overflow-y: auto;
    }
    .archive-confirm-box h3 { font-size: 1.1rem; color: #e3b341; margin-bottom: 8px; text-align: center; }
    .archive-confirm-sub { color: var(--text-primary); font-size: 0.9rem; margin-bottom: 14px; }
    .archive-confirm-list {
      list-style: none; padding: 10px 14px; margin: 0 0 14px;
      background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 8px;
      max-height: 220px; overflow-y: auto;
      font-size: 0.85rem; color: var(--text-bright);
    }
    .archive-confirm-list li {
      padding: 4px 0; border-bottom: 1px solid var(--border-subtle);
      display: flex; justify-content: space-between; gap: 8px;
    }
    .archive-confirm-list li:last-child { border-bottom: none; }
    .archive-confirm-list .arch-elo { color: var(--text-secondary); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
    .archive-confirm-hint { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 14px; line-height: 1.5; }
    .archive-confirm-actions {
      display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    }
    .archive-confirm-actions .btn-primary,
    .archive-confirm-actions .btn-secondary { min-height: 44px; }

    /* TOWER OF POWER */
    #tower-modal {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.8);
      z-index: 200;
      align-items: center;
      justify-content: center;
    }
    #tower-modal.open { display: flex; }
    .tower-modal-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 16px;
      padding: 28px;
      width: 90%;
      max-width: 480px;
      max-height: 80vh;
      overflow-y: auto;
    }
    .tower-modal-box h2 { font-size: 1.3rem; color: var(--accent-amber); margin-bottom: 6px; }
    .tower-modal-box p  { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 16px; }
    #tower-search {
      width: 100%; margin-bottom: 10px;
      background: var(--bg-primary); border: 1px solid var(--border-default);
      border-radius: 8px; color: var(--text-bright);
      padding: 9px 14px; font-size: 0.9rem;
    }
    #tower-search:focus { outline: none; border-color: var(--accent-amber); }
    .tower-anime-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
    .tower-anime-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; background: var(--bg-primary);
      border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer;
      transition: border-color 0.15s;
    }
    .tower-anime-item:hover { border-color: var(--accent-amber); }
    .tower-anime-item img { width: 32px; height: 44px; object-fit: cover; border-radius: 4px; }
    .tower-anime-item span { font-size: 0.85rem; flex: 1; }
    .tower-anime-elo { font-size: 0.75rem; color: var(--text-secondary); }

    /* TOWER PROGRESS BAR */
    #tower-progress-wrap {
      display: none;
      background: var(--border-subtle); border-radius: 6px; height: 5px;
      margin-bottom: 8px; overflow: hidden;
    }
    #tower-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-amber), #f0c040);
      transition: width 0.3s ease;
    }
    #tower-status { display: none; }

    /* TOWER SUMMARY */
    #tower-summary-screen { display: none; }
    .tower-summary-header { text-align: center; margin-bottom: 24px; }
    .tower-summary-header h2 { font-size: 1.6rem; color: var(--accent-amber); }
    .tower-summary-header p  { color: var(--text-secondary); margin-top: 6px; }
    .tower-results-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
    .tower-result-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; border-radius: 10px;
      border: 1px solid var(--border-default);
    }
    .tower-result-row.won  { background: #0d2a0d; border-color: var(--accent-green-dark); }
    .tower-result-row.lost { background: #2a0d0d; border-color: #da3633; }
    .tower-result-row img  { width: 32px; height: 44px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    .tower-result-info { flex: 1; }
    .tower-result-info .name { font-size: 0.85rem; font-weight: 600; }
    .tower-result-info .meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
    .tower-result-outcome { font-size: 1.1rem; flex-shrink: 0; }

    /* LIST VIEW */
    .ranking-table {
      width: 100%; border-collapse: collapse; font-size: 0.82rem;
    }
    .ranking-table th {
      text-align: left; padding: 8px 10px;
      color: var(--text-secondary); border-bottom: 1px solid var(--border-default);
      white-space: nowrap; cursor: pointer; user-select: none;
    }
    .ranking-table th:hover { color: var(--accent-blue); }
    .ranking-table th.sorted { color: var(--accent-blue); }
    .ranking-table td {
      padding: 7px 10px; border-bottom: 1px solid var(--border-subtle);
      vertical-align: middle;
    }
    .ranking-table tr:hover td { background: var(--bg-secondary); }
    .ranking-table tr.hidden-row { display: none; }
    .tbl-cover { width: 28px; height: 40px; object-fit: cover; border-radius: 3px; display: block; }

    /* Table virtual-scroll wrapper */
    #ranking-table-wrap {
      max-height: 70vh;
      overflow-y: auto;
      overflow-x: auto;
      border: 1px solid var(--border-default);
      border-radius: 8px;
    }
    #ranking-table-wrap .ranking-table { border-radius: 0; }
    #ranking-table-wrap thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg-secondary);
      box-shadow: 0 1px 0 var(--border-default);
    }
    .tbl-rank  { color: var(--text-secondary); font-weight: 700; width: 36px; }
    .tbl-title { font-weight: 600; color: var(--text-bright); cursor: pointer; }
    .tbl-title:hover { color: var(--accent-blue); text-decoration: underline; }
    #view-toggle-wrap { display: flex; gap: 6px; align-items: center; }
    .view-btn {
      background: var(--border-subtle); border: 1px solid var(--border-default); color: var(--text-secondary);
      font-size: 0.78rem; padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
      line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    }
    @media (hover: hover) { .view-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--bg-tertiary); } }
    .view-btn.active { background: #1c2940; border-color: var(--accent-blue); color: var(--accent-blue); }

    /* DESCRIPTION in detail modal */
    .modal-description {
      font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5;
      max-height: 80px; overflow-y: auto; margin-bottom: 12px;
      border-left: 2px solid var(--border-default); padding-left: 10px;
    }
    /* v1.0.142 — When the description column is hosting the franchise member
       list, the 80px synopsis-preview cap clamps it to one visible member.
       v1.0.146 — the parent .modal-box now caps itself at viewport height
       with internal scrolling, so the description column doesn't need its
       own cap. Members flow naturally and the whole modal-box scrolls if
       the combined content (description + sparkline + recent battles)
       exceeds the viewport. */
    .modal-description:has(.franchise-detail-members) {
      max-height: none;
      overflow-y: visible;
      border-left: none;
      padding-left: 0;
    }
    /* v1.0.146 — keep the cover image visible while the modal-box scrolls
       its content. Without sticky positioning the cover scrolls up off
       screen alongside the members, leaving the franchise stats orphaned. */
    #modal-cover {
      position: sticky;
      top: 0;
      align-self: flex-start;
    }

    /* LOGIN CARDS */
    .login-cards {
      display: flex;
      gap: 14px;
      width: 100%;
      max-width: 560px;
    }
    .login-card {
      flex: 1;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 12px;
      padding: 20px 16px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .login-card-heading {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .login-card .btn-anilist-login,
    .login-card .btn-mal-login { width: 100%; }
    .login-card .auth-logged-in-row { width: 100%; }
    /* "Having trouble signing in?" disclosure */
    .login-trouble { width: 100%; margin-top: 4px; }
    .login-trouble summary {
      font-size: 0.75rem; color: var(--accent-blue); cursor: pointer;
      list-style: none; text-align: center; padding: 4px 0;
      user-select: none; opacity: 0.75; transition: opacity 0.15s;
    }
    .login-trouble summary::-webkit-details-marker { display: none; }
    .login-trouble summary::after { content: ' ›'; }
    .login-trouble[open] summary::after { content: ' ‹'; }
    .login-trouble summary:hover { opacity: 1; }
    .login-trouble-content {
      display: flex; flex-direction: column; align-items: center;
      gap: 8px; padding: 10px; margin-top: 4px; width: 100%;
      background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 8px;
    }
    @media (max-width: 520px) {
      .login-cards { flex-direction: column; }
    }

    /* MAL IMPORT */
    #mal-upload-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 340px;
    }
    .mal-drop-zone {
      width: 100%;
      border: 2px dashed var(--border-default);
      border-radius: 10px;
      padding: 24px 16px;
      text-align: center;
      cursor: pointer;
      color: var(--text-secondary);
      font-size: 0.88rem;
      transition: all 0.2s;
    }
    .mal-drop-zone:hover, .mal-drop-zone.drag-over { border-color: var(--accent-blue); color: var(--accent-blue); background: #1c2940; }
    .mal-drop-zone input[type="file"] { display: none; }
    /* MANAGE SUB-TABS (Settings / Achievements) */
    #tab-panel-manage .source-tabs {
      display: flex;
      gap: 0;
      border: 1px solid var(--border-default);
      border-radius: 8px;
      overflow: hidden;
      margin: 0 auto 20px;
      max-width: 360px;
    }
    #tab-panel-manage .source-tab {
      flex: 1;
      padding: 9px 20px;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: all 0.15s;
    }
    #tab-panel-manage .source-tab.active { background: var(--border-subtle); color: var(--text-bright); }
    @media (hover: hover) { #tab-panel-manage .source-tab:hover:not(.active) { background: var(--bg-tertiary); color: var(--text-primary); } }

    /* PROFILE SUB-TABS (Taste / Achievements) */
    #tab-panel-profile .source-tabs {
      display: flex;
      gap: 0;
      border: 1px solid var(--border-default);
      border-radius: 8px;
      overflow: hidden;
      margin: 0 auto 24px;
      max-width: 300px;
    }
    #tab-panel-profile .source-tab {
      flex: 1;
      padding: 9px 20px;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: all 0.15s;
    }
    #tab-panel-profile .source-tab.active { background: var(--border-subtle); color: var(--text-bright); }
    @media (hover: hover) { #tab-panel-profile .source-tab:hover:not(.active) { background: var(--bg-tertiary); color: var(--text-primary); } }

    /* DISCOVER SUB-TABS (For You / This Season / Predict) */
    #tab-panel-discover .source-tabs {
      display: flex;
      gap: 0;
      border: 1px solid var(--border-default);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 4px;
    }
    #tab-panel-discover .source-tab {
      flex: 1;
      padding: 9px 20px;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: all 0.15s;
    }
    #tab-panel-discover .source-tab.active { background: var(--border-subtle); color: var(--text-bright); }
    @media (hover: hover) { #tab-panel-discover .source-tab:hover:not(.active) { background: var(--bg-tertiary); color: var(--text-primary); } }

    /* RECOMMENDATIONS SECTION */
    #recs-section { margin: 24px 0; }
    #recs-section h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 6px; text-align: center; }
    #recs-section p.recs-sub { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-bottom: 16px; }
    .recs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    @media (max-width: 600px) {
      .recs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    }
    .recs-group { margin-bottom: 24px; }
    .recs-group-label { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; }
    .recs-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    @media (max-width: 600px) { .recs-row { grid-template-columns: repeat(2, 1fr); } }

    .rec-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 12px;
      overflow: hidden;
      text-align: center;
      transition: all 0.18s;
      text-decoration: none;
      display: block;
      color: inherit;
    }
    .rec-card:hover { border-color: var(--accent-blue); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(88,166,255,0.12); }
    /* Discover tab skeleton loader */
    @keyframes skeleton-pulse {
      0%, 100% { background-color: var(--border-subtle); }
      50%       { background-color: var(--border-default); }
    }
    .skeleton-card {
      background: var(--bg-secondary); border: 1px solid var(--border-default);
      border-radius: 12px; overflow: hidden;
    }
    .skeleton-img  { width: 100%; padding-top: 150%; background: var(--border-subtle); animation: skeleton-pulse 1.4s ease-in-out infinite; }
    .skeleton-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
    .skeleton-line { height: 10px; border-radius: 4px; background: var(--border-subtle); animation: skeleton-pulse 1.4s ease-in-out infinite; }
    .skeleton-line.short { width: 55%; }
    .skeleton-line.shorter { width: 35%; }
    .rec-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
    .rec-card-body { padding: 8px; }
    .rec-card-title { font-size: 0.78rem; font-weight: 600; line-height: 1.3; color: var(--text-bright); margin-bottom: 4px;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .rec-card-meta { font-size: 0.7rem; color: var(--text-secondary); }
    .rec-score-pill {
      display: inline-block;
      background: var(--border-subtle);
      border-radius: 10px;
      padding: 2px 7px;
      font-size: 0.68rem;
      color: var(--accent-blue);
      margin-top: 3px;
    }

    .rec-relation-note {
      font-size: 0.68rem;
      color: var(--accent-blue);
      background: var(--bg-tertiary);
      border: 1px solid var(--border-default);
      border-radius: 5px;
      padding: 4px 7px;
      margin-top: 5px;
      line-height: 1.35;
      display: block;
    }
    .rec-relation-note strong { color: var(--accent-blue); }

    /* GROUPED RECOMMENDATIONS */
    .recs-group { margin-bottom: 28px; }
    .recs-group-heading { font-size: 0.88rem; color: var(--text-primary); margin: 0 0 12px; font-weight: 600; }
    .recs-group-heading em { color: var(--accent-blue); font-style: normal; }
    .recs-subgrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .recs-extra-section { margin-top: 32px; }
    .recs-extra-heading { font-size: 0.88rem; color: var(--text-primary); margin: 0 0 4px; font-weight: 600; }
    .recs-extra-sub { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 12px; }
    @media (max-width: 600px) {
      .recs-subgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .recs-group-heading, .recs-extra-heading { font-size: 0.82rem; }
    }
    @media (max-width: 360px) {
      .recs-subgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    }
    .btn-small {
      background: var(--border-subtle);
      color: var(--text-secondary);
      border: 1px solid var(--border-default);
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 0.72rem;
      cursor: pointer;
    }
    @media (hover: hover) { .btn-small:hover { background: var(--border-default); color: var(--text-primary); } }

    /* ACHIEVEMENTS */
    .achievements-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
    .achievement-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .achievement-card.has-bronze { border-color: #cd7f32; }
    .achievement-card.has-silver { border-color: #a0a0a0; }
    .achievement-card.has-gold   { border-color: #ffd700; }
    .achievement-header { display: flex; align-items: center; gap: 10px; }
    .achievement-emoji { font-size: 1.6rem; line-height: 1; }
    .achievement-name { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
    .achievement-desc { font-size: 0.72rem; color: var(--text-muted); margin: 0; }
    .achievement-tiers { display: flex; gap: 8px; flex-wrap: wrap; }
    .ach-tier {
      display: flex; flex-direction: column; align-items: center;
      gap: 3px; padding: 8px 10px;
      border-radius: 8px; border: 1px solid var(--border-default);
      background: var(--bg-primary); min-width: 70px; flex: 1;
      opacity: 0.4;
    }
    .ach-tier.unlocked { opacity: 1; }
    .ach-tier.unlocked.bronze { border-color: #cd7f32; background: #1a1208; }
    .ach-tier.unlocked.silver { border-color: #a0a0a0; background: #111418; }
    .ach-tier.unlocked.gold   { border-color: #ffd700; background: #181400; }
    .ach-tier .ach-icon  { font-size: 1.3rem; }
    .ach-tier .ach-label { font-size: 0.68rem; font-weight: 700; color: #484f58; }
    .ach-tier .ach-req   { font-size: 0.65rem; color: #484f58; text-align: center; }
    .ach-tier.unlocked.bronze .ach-label { color: #cd7f32; }
    .ach-tier.unlocked.silver .ach-label { color: #c0c0c0; }
    .ach-tier.unlocked.gold   .ach-label { color: #ffd700; }
    .ach-tier.unlocked .ach-req { color: var(--text-secondary); }
    .achievement-unlock-date { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }
    .achievements-summary {
      text-align: center; padding: 12px 0 4px;
      font-size: 0.8rem; color: var(--text-secondary);
    }
    @media (max-width: 600px) {
      .achievements-grid { grid-template-columns: 1fr; }
    }

    /* SAVED COMPARISONS */
    .saved-comp-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .saved-comp-card {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg-secondary); border: 1px solid var(--border-default);
      border-radius: 8px; padding: 8px 12px;
    }
    .saved-comp-card .scc-name  { font-size: 0.85rem; color: var(--text-primary); font-weight: 600; }
    .saved-comp-card .scc-meta  { font-size: 0.72rem; color: var(--text-secondary); }
    .saved-comp-card .scc-delta { font-size: 0.72rem; margin-top: 2px; }
    .saved-comp-card { align-items: flex-start; }
    .challenge-pill-btn { font-size: 1rem; padding: 2px 8px; }

    /* ── WATCH TOGETHER / COLLABORATIVE MODE ── */
    /* v1.0.89 — reverted from full-screen back to a centered modal, bumped
       from 520→720px max-width with more vertical room so the polished vote
       cards fit comfortably on desktop and the panel feels less cramped on
       mobile. Dimmed overlay restored. */
    #collab-modal {
      position: fixed; inset: 0; z-index: 1100;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.75);
    }
    .collab-box {
      position: relative;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 14px;
      padding: 28px 26px 24px;
      width: min(94vw, 720px);
      max-height: 92vh;
      overflow-y: auto;
    }
    /* Mode selection */
    .collab-mode-btns { display: flex; gap: 10px; }
    .collab-mode-btn {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 4px; padding: 16px 10px;
      background: var(--bg-tertiary); border: 2px solid var(--border-default);
      border-radius: 10px; cursor: pointer; text-align: center;
      transition: border-color 0.15s;
    }
    .collab-mode-btn strong { font-size: 0.88rem; color: var(--text-primary); }
    .collab-mode-btn span   { font-size: 0.72rem; color: var(--text-secondary); }
    .collab-mode-btn:hover  { border-color: var(--accent-primary); }
    /* Name inputs */
    .collab-name-row { display: flex; flex-direction: column; gap: 4px; }
    .collab-name-row label { font-size: 0.75rem; color: var(--text-secondary); }
    .collab-name-input {
      background: var(--bg-tertiary); border: 1px solid var(--border-default);
      border-radius: 8px; padding: 8px 10px; font-size: 0.9rem;
      color: var(--text-primary); outline: none; width: 100%; box-sizing: border-box;
    }
    .collab-name-input:focus { border-color: var(--accent-primary); }
    /* Session code display */
    .collab-session-code {
      /* v1.0.176 — clamp font + min-width so the 7-char code with letter-
         spacing 0.2em doesn't force the flex container wider than the
         viewport on narrow phones. Previously the "Copy link" button got
         pushed off-screen. clamp scales between 1.5rem (very narrow) and
         2.8rem (desktop). min-width:0 lets the flex item actually shrink. */
      font-size: clamp(1.5rem, 6.5vw, 2.8rem);
      font-weight: 800; letter-spacing: 0.18em;
      text-align: center; color: var(--accent-primary);
      background: var(--bg-tertiary); border-radius: 10px;
      padding: 18px 10px; margin: 12px 0;
      min-width: 0;
      overflow: hidden;
    }
    /* v1.0.173 — Invite by AniList username inside the lobby. */
    .invite-by-name {
      margin-top: 4px;
      padding: 10px 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
    }
    .invite-by-name label {
      display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 6px;
    }
    .invite-row {
      display: flex; gap: 6px; align-items: stretch;
    }
    .invite-row input {
      flex: 1; min-width: 0;
      background: var(--bg-tertiary); border: 1px solid var(--border-default);
      color: var(--text-primary); border-radius: 6px; padding: 8px 10px; font-size: 0.85rem;
    }
    .invite-row button {
      flex-shrink: 0; padding: 8px 14px;
    }
    .invite-status {
      margin: 6px 0 0;
      font-size: 0.75rem; color: var(--text-secondary); min-height: 1em;
    }
    .invite-status.ok    { color: var(--accent-green); }
    .invite-status.warn  { color: var(--accent-amber); }
    .invite-status.error { color: var(--accent-red); }
    /* Search */
    .collab-search-wrap { position: relative; }
    .collab-search-results {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10;
      background: var(--bg-secondary); border: 1px solid var(--border-default);
      border-radius: 8px; overflow: hidden; max-height: 220px; overflow-y: auto;
    }
    .collab-search-item {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; cursor: pointer; font-size: 0.82rem;
    }
    .collab-search-item:hover { background: var(--bg-tertiary); }
    .collab-search-item img { width: 28px; height: 38px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
    .collab-search-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .collab-added-badge { font-size: 0.72rem; color: #3fb950; flex-shrink: 0; }
    .collab-taken-badge { font-size: 0.68rem; color: var(--accent-primary); flex-shrink: 0; opacity: 0.85; }
    .collab-search-added { opacity: 0.5; cursor: default; }
    .collab-search-manual { color: var(--accent-primary); }
    .collab-search-empty { padding: 10px; font-size: 0.8rem; color: var(--text-secondary); text-align: center; }
    .collab-search-no-cover { width: 28px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); border-radius: 3px; font-size: 1rem; flex-shrink: 0; }
    .collab-search-source { font-size: 0.65rem; color: var(--accent-primary); opacity: 0.75; flex-shrink: 0; border: 1px solid currentColor; border-radius: 3px; padding: 1px 4px; }
    .collab-search-loading { padding: 8px 10px; font-size: 0.78rem; color: var(--text-secondary); font-style: italic; }
    /* Nominations list */
    .collab-nominations-list { display: flex; flex-direction: column; gap: 6px; }
    .collab-nom-item {
      display: flex; align-items: center; gap: 8px;
      background: var(--bg-tertiary); border-radius: 8px; padding: 6px 8px;
    }
    .collab-nom-item img { width: 28px; height: 38px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
    .collab-nom-cover-placeholder { width: 28px; height: 38px; border-radius: 3px; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; }
    .collab-nom-title { flex: 1; min-width: 0; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .collab-nom-remove { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; padding: 2px 4px; flex-shrink: 0; }
    .collab-nom-remove:hover { color: #f85149; }
    .collab-nom-empty { font-size: 0.8rem; color: var(--text-secondary); text-align: center; padding: 8px 0; margin: 0; }
    /* Round picker */
    .collab-rounds-picker {
      display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0;
    }
    .collab-rounds-btn {
      width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent-primary);
      background: transparent; color: var(--accent-primary); font-size: 1.4rem; font-weight: 700;
      cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
      transition: background 0.15s, color 0.15s;
    }
    .collab-rounds-btn:hover { background: var(--accent-primary); color: #fff; }
    .collab-rounds-display {
      font-size: 2.4rem; font-weight: 800; min-width: 56px; text-align: center;
      color: var(--text-primary);
    }
    .collab-rounds-stats {
      background: var(--bg-secondary); border-radius: 10px; padding: 12px 14px;
      display: flex; flex-direction: column; gap: 8px; font-size: 0.8rem;
    }
    .collab-rounds-stat-row { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
    .collab-rounds-stat-icon { flex-shrink: 0; }
    .rounds-acc-high  { color: #3fb950; }
    .rounds-acc-med   { color: #d29922; }
    .rounds-acc-low   { color: #e3b341; }
    .rounds-acc-gut   { color: #8b949e; }
    .collab-rounds-rec-badge {
      margin-top: 4px; font-size: 0.75rem; color: var(--accent-primary);
      text-align: center; font-style: italic;
    }
    /* Rejoin banner */
    .collab-rejoin-box {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg-secondary); border: 1px solid var(--accent-primary);
      border-radius: 10px; padding: 10px 12px;
    }
    .collab-rejoin-icon { font-size: 1.4rem; flex-shrink: 0; }
    .collab-rejoin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; }
    .collab-rejoin-text strong { font-size: 0.85rem; }
    .collab-rejoin-btn { flex-shrink: 0; padding: 6px 14px; font-size: 0.8rem; }
    .collab-rejoin-dismiss { display: block; width: 100%; background: none; border: none; color: var(--text-secondary); font-size: 0.75rem; margin-top: 6px; cursor: pointer; text-align: center; }
    .collab-rejoin-dismiss:hover { color: var(--text-primary); }
    /* Lobby player list */
    .collab-player-list { display: flex; flex-direction: column; gap: 8px; }
    .collab-lobby-player {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg-secondary); border-radius: 8px; padding: 8px 12px;
      transition: opacity 0.2s;
    }
    .collab-lobby-disconnected { opacity: 0.45; }
    .collab-lobby-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--accent-primary); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
    }
    .collab-lobby-disconnected .collab-lobby-avatar { background: #6e7681; }
    .collab-lobby-name { font-size: 0.85rem; }
    .collab-lobby-name em { color: var(--text-secondary); font-style: normal; }
    .collab-disconnected-badge {
      font-size: 0.65rem; color: #f85149; border: 1px solid currentColor;
      border-radius: 3px; padding: 1px 4px; margin-left: 4px; vertical-align: middle;
    }
    /* Friend pill badges in nomination screen */
    .collab-friend-pill {
      display: inline-block; background: var(--bg-secondary);
      border-radius: 12px; padding: 2px 8px; font-size: 0.72rem;
      margin: 2px 3px 2px 0;
    }
    .collab-pill-offline { opacity: 0.5; }
    /* Voter breakdown in reveal */
    .collab-voter-breakdown {
      display: flex; flex-direction: column; gap: 3px;
      margin-top: 8px; font-size: 0.75rem; color: var(--text-secondary);
    }
    .collab-voter-line { display: block; }
    /* Pass screen */
    .collab-pass-screen { text-align: center; padding: 16px 0; }
    /* Vote heading */
    .collab-vote-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
    .collab-vote-who { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); text-align: center; min-height: 1.4em; }
    .collab-vote-sub { font-size: 0.75rem; color: var(--text-secondary); text-align: center; margin-bottom: 4px; min-height: 1.2em; }
    /* Watch Together vote cards — scoped polish to make them feel weightier
       and more deliberate than the static Challenge Mode card. Larger cover,
       bolder title, stronger card outline + shadow. The container .challenge-pair
       gap is widened to give each card room to breathe inside the collab modal. */
    .collab-vote-card {
      min-height: 240px;
      padding: 18px 14px;
      gap: 14px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    .collab-vote-card img {
      width: 150px;
      height: 210px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    }
    .collab-vote-card .challenge-card-title {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.25;
    }
    @media (hover: hover) {
      .collab-vote-card:hover:not(:disabled) {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(88,166,255,0.22);
      }
    }
    /* "VS" separator made slightly more subtle so the cards lead the eye. */
    .challenge-pair:has(.collab-vote-card) .challenge-vs {
      opacity: 0.55;
      font-size: 0.68rem;
    }
    .collab-no-cover { width: 80px; height: 110px; background: var(--bg-primary); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
    /* Split vote colours */
    .collab-split-a { border-color: #58a6ff !important; background: rgba(88,166,255,0.08) !important; }
    .collab-split-b { border-color: #f78166 !important; background: rgba(247,129,102,0.08) !important; }
    .collab-split-msg { color: #e3a000; font-weight: 700; margin-right: 4px; }
    .collab-coinflip  { font-size: 0.78rem; color: #8b949e; }
    /* Results */
    .collab-results-list { display: flex; flex-direction: column; gap: 8px; }
    .collab-result-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 10px;
      background: var(--bg-tertiary); border: 1px solid var(--border-default);
    }
    .collab-result-winner {
      background: rgba(255,155,0,0.08); border-color: rgba(255,155,0,0.4);
    }
    .collab-result-medal { font-size: 1.4rem; flex-shrink: 0; width: 28px; text-align: center; }
    .collab-result-item img { width: 36px; height: 50px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    .collab-result-info { flex: 1; min-width: 0; }
    .collab-result-title { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .collab-result-wins { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }
    .collab-result-ties { opacity: 0.7; }

    /* ── CHALLENGE MODE ── */
    /* v1.0.89 — both async Challenge Mode and Live Challenge share the same
       modal shell. Live Challenge bumped to 720px (same as Watch Together)
       so the head-to-head cards have proper room; async Challenge stays at
       540 because it's a lightweight self-contained mini-game. */
    #challenge-modal, #lc-modal {
      position: fixed; inset: 0; z-index: 1100;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.75);
    }
    .challenge-box {
      position: relative;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 14px;
      padding: 24px 20px 20px;
      width: min(92vw, 540px);
      max-height: 90vh;
      overflow-y: auto;
    }
    #lc-modal .challenge-box {
      padding: 28px 26px 24px;
      width: min(94vw, 720px);
      max-height: 92vh;
    }
    .challenge-hud {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 14px;
    }
    .challenge-round   { font-size: 0.78rem; color: var(--text-secondary); }
    .challenge-diff    { font-size: 0.75rem; font-weight: 600; flex: 1; }
    .challenge-pts-live { font-size: 0.82rem; color: var(--accent-primary); font-weight: 700; }
    .challenge-pair {
      display: flex; align-items: stretch; gap: 10px;
      margin-bottom: 14px;
    }
    .challenge-vs {
      display: flex; align-items: center; justify-content: center;
      font-size: 0.72rem; font-weight: 700; color: var(--text-secondary);
      flex-shrink: 0; width: 28px;
    }
    .challenge-card {
      flex: 1; min-width: 0;
      background: var(--bg-secondary);
      border: 2px solid var(--border-default);
      border-radius: 14px;
      padding: 14px 10px;
      cursor: pointer;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      text-align: center;
      transition: border-color 0.18s, transform 0.1s, box-shadow 0.18s;
    }
    .challenge-card:hover:not(:disabled) {
      border-color: var(--accent-primary);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(88,166,255,0.15);
    }
    .challenge-card img {
      width: 120px; height: 170px; object-fit: cover; border-radius: 8px;
      display: block;
    }
    .challenge-card-title {
      font-size: 0.88rem; font-weight: 600;
      color: var(--text-bright);
      line-height: 1.3;
    }
    .challenge-card-meta {
      display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
    }
    .challenge-card-elo {
      font-size: 0.68rem; color: var(--text-secondary);
    }
    .challenge-card.challenge-correct {
      border-color: #3fb950;
      background: rgba(63,185,80,0.1);
    }
    .challenge-card.challenge-wrong {
      border-color: #f85149;
      background: rgba(248,81,73,0.08);
      opacity: 0.6;
    }
    /* Applied to the card the player chose while waiting for others — keeps it
       visible and highlighted even though the button is disabled */
    .challenge-card.challenge-card-chosen {
      opacity: 1 !important;
      border-color: var(--accent-primary);
      background: rgba(88,166,255,0.08);
    }
    .challenge-card.challenge-card-unchosen {
      opacity: 0.35;
    }

    /* Mobile: stack vote cards vertically (Watch Together + Live Challenge +
       async Challenge Mode all use .challenge-pair) to match the main battle.
       Each card uses a 2×2 grid so the image spans both rows on the left and
       title+meta stack to its right — without this, the .challenge-card's
       child siblings (img + title + meta with no wrapper) would all become
       row items and make the card too tall and oddly shaped. Compact 70×98
       cover so the reveal text + Next button stay above the fold.

       MUST stay AFTER the desktop .challenge-* rules so the cascade resolves
       in favour of the mobile declarations — they have the same specificity
       so source order decides the winner, and @media doesn't bump specificity.
       (v1.0.95 placed this block before the desktop rules and the desktop
       declarations silently won, leaving the cards in column layout and the
       VS divider stuck at 28px wide on phones — fixed in v1.0.100.) */
    @media (max-width: 600px) {
      .challenge-pair {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .challenge-vs {
        /* width:100% (not auto) so the flex container spans the column —
           without an explicit width, display:flex + content-only would
           collapse to "VS" text width and justify-content:center couldn't
           push the text away from the left edge. */
        width: 100%; height: auto;
        padding: 4px 0;
        font-size: 0.85rem;
      }
      .challenge-card {
        display: grid;
        grid-template-columns: 70px 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 2px;
        padding: 10px 12px;
        text-align: left;
        min-height: 0;
        gap: 2px 12px;
      }
      .challenge-card img {
        grid-row: 1 / span 2;
        width: 70px; height: 98px;
        border-radius: 6px;
      }
      .challenge-card .challenge-card-title {
        grid-column: 2;
        align-self: end;
        font-size: 0.92rem;
        text-align: left;
        line-height: 1.25;
      }
      .challenge-card-meta {
        grid-column: 2;
        align-self: start;
        justify-content: flex-start;
      }
      /* Watch Together's polish overrides — adapt for the compact row layout */
      .collab-vote-card { min-height: 0; padding: 10px 12px; gap: 2px 12px; box-shadow: none; }
      .collab-vote-card img { width: 70px; height: 98px; box-shadow: none; }
      .collab-vote-card .challenge-card-title { font-size: 0.92rem; }
    }

    .challenge-reveal-text {
      font-size: 0.82rem; color: var(--text-primary);
      padding: 10px 12px;
      background: var(--bg-primary);
      border-radius: 8px;
      line-height: 1.5;
    }
    .ch-correct-msg { color: #3fb950; font-weight: 700; margin-right: 4px; }
    .ch-wrong-msg   { color: #f85149; font-weight: 700; margin-right: 4px; }

    /* End screen */
    .challenge-end-score {
      text-align: center; padding: 20px 0 8px;
    }
    .ch-end-score {
      font-size: 3rem; font-weight: 800; color: var(--text-primary);
      line-height: 1;
    }
    .ch-end-pts   { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; }
    .ch-end-label { font-size: 1rem; font-weight: 600; color: var(--accent-primary); margin-top: 10px; }

    /* Breakdown */
    .challenge-breakdown { display: flex; flex-direction: column; gap: 6px; }
    .ch-breakdown-item {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 7px 10px;
      border-radius: 8px;
      font-size: 0.78rem;
      background: var(--bg-tertiary);
    }
    .ch-b-correct { border-left: 3px solid #3fb950; }
    .ch-b-wrong   { border-left: 3px solid #f85149; }
    .ch-b-icon    { font-weight: 700; flex-shrink: 0; width: 14px; }
    .ch-b-correct .ch-b-icon { color: #3fb950; }
    .ch-b-wrong   .ch-b-icon { color: #f85149; }
    .ch-b-text    { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .ch-b-winner  { font-weight: 600; color: var(--text-primary); }
    .ch-b-loser   { color: var(--text-secondary); }
    .ch-b-ranks   { font-size: 0.68rem; color: var(--text-secondary); }
    .ch-b-pts     { font-weight: 700; color: var(--accent-primary); flex-shrink: 0; }

    /* Challenge history rows */
    .lc-history-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      font-size: 0.78rem;
    }
    .lc-history-row:last-child { border-bottom: none; }
    .lc-history-outcome { font-size: 1rem; flex-shrink: 0; width: 20px; }
    .lc-history-opponent { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
    .lc-history-score { font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
    .lc-history-date { font-size: 0.7rem; color: #8b949e; flex-shrink: 0; }

    .compat-delta {
      font-size: 0.82rem;
      margin-top: 10px;
      font-weight: 500;
    }

    /* ── SOCIAL TAB LAYOUT ── */
    .social-group { margin-bottom: 8px; }
    .social-group-title {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--text-secondary);
      margin: 0 0 12px;
    }
    .social-group-sub { margin-top: -6px; margin-bottom: 14px; }

    /* Play cards grid */
    .social-play-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    .social-play-card {
      background: var(--bg-secondary); border-radius: 12px;
      padding: 16px; display: flex; flex-direction: column; gap: 14px;
      border: 1px solid var(--border-color, #21262d);
    }
    .social-play-card-top { display: flex; gap: 12px; align-items: flex-start; }
    .social-play-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
    .social-play-text { display: flex; flex-direction: column; gap: 4px; }
    .social-play-text strong { font-size: 0.9rem; }
    .social-play-text span { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
    .social-play-action-btn { width: 100%; }
    .social-challenge-row { display: flex; gap: 8px; }
    .social-challenge-divider {
      font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
      margin: 6px 0 6px; padding-top: 8px;
      border-top: 1px solid var(--border-color, #21262d);
    }
    .social-challenge-input {
      flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
      border: 1px solid var(--border-color, #30363d);
      background: var(--bg-primary); color: var(--text-primary); font-size: 0.82rem;
    }
    .social-challenge-input:focus { outline: none; border-color: var(--accent-primary); }

    /* Compare section */
    #compat-results { margin-top: 16px; }
    #friend-recs-results:not(:empty) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #21262d; }

    /* SOCIAL PLATFORM TOGGLE */
    .social-platform-row {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; margin-bottom: 24px;
    }
    .sp-btn {
      padding: 7px 20px; border-radius: 20px; font-size: 0.82rem;
      font-weight: 600; border: 2px solid transparent;
      transition: all 0.18s; cursor: pointer; background: var(--bg-primary);
    }
    #sp-anilist          { border-color: #1a6ef5; color: var(--accent-blue); }
    #sp-anilist.active   { background: linear-gradient(135deg, #1a6ef5, #0ea5e9); color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(26,110,245,0.35); }
    #sp-anilist:hover:not(.active) { background: rgba(26,110,245,0.12); }
    #sp-mal              { border-color: #2e51a2; color: #4a74d8; }
    #sp-mal.active       { background: linear-gradient(135deg, #2e51a2, #4a74d8); color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(46,81,162,0.35); }
    #sp-mal:hover:not(.active) { background: rgba(46,81,162,0.12); }

    /* COMPATIBILITY SECTION */
    .compat-input-row {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 20px;
    }
    #compat-results { }
    .compat-score-box {
      text-align: center;
      padding: 24px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 14px;
      margin-bottom: 20px;
    }
    .compat-pct {
      font-size: 3rem;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 4px;
    }
    .compat-label { font-size: 0.85rem; color: var(--text-secondary); }
    .compat-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 6px; }
    .compat-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .compat-col {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      padding: 14px;
      min-width: 0;
      overflow: hidden;
    }
    .compat-col h4 { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 10px; }
    .compat-col-full { grid-column: 1 / -1; }
    .compat-anime-row {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 0;
      border-bottom: 1px solid var(--border-subtle);
      font-size: 0.78rem;
      min-width: 0;
    }
    .compat-anime-row:last-child { border-bottom: none; }
    .compat-anime-row img { width: 32px; height: 44px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    .compat-anime-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .compat-ranks { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
    .compat-anime-row:hover { background: var(--bg-tertiary); border-radius: 6px; }
    .compat-detail-row {
      display: none;
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      padding: 10px 12px;
      margin: 2px 0 6px;
      font-size: 0.75rem;
      color: var(--text-secondary);
      gap: 16px;
      flex-wrap: wrap;
    }
    .compat-detail-row.open { display: flex; }
    .compat-detail-stat { display: flex; flex-direction: column; gap: 2px; }
    .compat-detail-stat .val { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
    .compat-detail-stat .lbl { font-size: 0.68rem; color: var(--text-muted); }

    /* FRIEND RECS */
    #friend-recs-section { margin-top: 32px; border-top: 1px solid var(--border-subtle); padding-top: 24px; }
    #friend-recs-section h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 6px; text-align: center; }
    #friend-recs-section p.recs-sub { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-bottom: 16px; }
    .friend-rec-card { position: relative; }
    .friend-score-badge {
      position: absolute; top: 6px; right: 6px;
      background: rgba(13,17,23,0.85);
      border: 1px solid var(--border-default);
      border-radius: 6px;
      font-size: 0.65rem;
      color: var(--accent-blue);
      padding: 2px 5px;
      font-weight: 600;
    }

    @media (max-width: 600px) {
      .battle-arena {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }
      .vs-divider { order: 2; font-size: 1rem; padding: 2px 0; }
      .anime-card:first-child { order: 1; }
      .anime-card:last-child  { order: 3; }
      .compat-cols { grid-template-columns: 1fr; }

      /* Tighter battle cards on mobile */
      .anime-card { padding: 14px 12px; gap: 8px; flex-direction: row; align-items: flex-start; text-align: left; }
      .anime-card img { width: 80px; height: 112px; flex-shrink: 0; }
      .anime-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 6px; }
      .anime-card .title { font-size: 0.95rem; }
      .anime-card .elo-badge { align-self: flex-start; }
      .card-actions { justify-content: flex-start; gap: 5px; flex-wrap: wrap; }
      .fuzzy-btn, .synopsis-btn, .card-anilist-link, .exclude-btn { font-size: 0.65rem; padding: 4px 7px; }
      .synopsis-panel { font-size: 0.76rem; }

      /* Battle action buttons */
      .battle-actions { gap: 6px; }
      .battle-actions .btn-secondary { font-size: 0.78rem; padding: 7px 10px; }

      /* On mobile the Mode/Filter buttons sit near the right edge of the toolbar.
         Keep right:0 so the popovers open leftward and stay on-screen. */
      #filter-popover,
      #mode-popover {
        right: 0;
        left: auto;
      }

      /* Main padding */
      #main { padding: 16px 12px; }

      /* Header */
      header h1 { font-size: 1rem; }
      #change-user-btn { font-size: 0.72rem; padding: 5px 8px; }

      /* Results hero */
      .results-util-bar { gap: 5px; }
      .util-btn { font-size: 0.75rem; padding: 4px 9px; }

      /* Rankings grid — 2 columns on mobile */
      .ranking-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

      /* Modal stacks vertically on mobile */
      .modal-box { flex-direction: column; }
      /* v1.0.167 — mobile cover treatment.
         (1) Drop sticky positioning so the cover scrolls away with the rest
             of the content (the desktop column-sticky pattern overlaps content
             when the modal stacks vertically).
         (2) Render as a centered portrait thumbnail at natural cover aspect
             ratio (~0.71). The previous full-width 200px-tall hero used
             `object-fit: cover` on AniList's portrait images, which cropped
             them to a thin middle slice with no title or characters visible. */
      #modal-cover {
        width: 140px;
        height: 200px;
        object-fit: cover;
        position: static;
        align-self: center;
        margin-bottom: 4px;
        border-radius: 10px;
      }
      .modal-stats-row { grid-template-columns: repeat(2, 1fr); }

      /* ── Rankings tab controls ── */
      #search-wrap input { width: 100%; box-sizing: border-box; }
      #search-wrap { width: 100%; }

      /* Collapsible filters toggle — shown only on mobile */
      .mobile-filter-toggle {
        display: flex !important;
        align-items: center;
        gap: 6px;
        background: var(--border-subtle);
        border: 1px solid var(--border-default);
        color: var(--text-secondary);
        font-size: 0.78rem;
        padding: 5px 12px;
        border-radius: 6px;
        cursor: pointer;
        margin-bottom: 8px;
        width: 100%;
        justify-content: center;
      }
      .mobile-filter-toggle.active { border-color: var(--accent-blue); color: var(--accent-blue); }
      #collapsible-filters { display: none; }
      #collapsible-filters.open { display: block; }

      /* Format/length rows — horizontal scroll on mobile */
      .format-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
      }
      .format-row::-webkit-scrollbar { display: none; }
      .format-btn { flex-shrink: 0; font-size: 0.7rem; padding: 4px 10px; }

      /* Sort/control row — horizontal scroll on mobile */
      .list-controls {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 5px;
        padding-bottom: 4px;
      }
      .list-controls::-webkit-scrollbar { display: none; }
      .sort-btn { flex-shrink: 0; font-size: 0.72rem; padding: 4px 8px; }
      .fuzzy-filter-btn { flex-shrink: 0; font-size: 0.72rem; padding: 4px 8px; }
      #franchise-btn { flex-shrink: 0; }
      #ranking-controls-right { flex-shrink: 0; gap: 4px; }
      #view-toggle-wrap { flex-shrink: 0; }

      /* ── Results util bar — allow wrapping ── */
      .results-util-bar { flex-wrap: wrap; }
      .util-btn { font-size: 0.72rem; padding: 5px 9px; }

      /* ── Tab bar — let tabs scroll naturally instead of squashing ── */
      .results-tabs { gap: 4px; padding: 3px; }
      .res-tab { flex: 0 0 auto; padding: 7px 10px; font-size: 0.75rem; }

      /* ── Stats tab ── */
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .stats-lists,
      .stats-breakdown,
      .disagree-cols { grid-template-columns: 1fr !important; }

      /* Shrink chart row fixed widths so they fit in a narrow card */
      .genre-chart-label { width: 80px; font-size: 0.75rem; }
      .genre-chart-value { width: 52px; font-size: 0.72rem; }
      .genre-chart-row   { font-size: 0.75rem; gap: 6px; }

      /* Stop any content in a stats card overflowing the card */
      .stats-list-section { overflow: hidden; }

      /* Wrap long meta text in disagreements */
      .disagree-item-meta { white-space: normal; }
      .disagree-item { flex-wrap: wrap; }

      /* ── Social / Compat tab ── */
      .social-play-grid { grid-template-columns: 1fr; }
      .social-challenge-label { display: none; }
      .social-challenge-row { flex-direction: column; }
      .compat-input-row { flex-direction: column; align-items: stretch; }
      .compat-input-row input { width: 100% !important; }
      .compat-input-row .btn-primary { width: 100%; }
      .compat-ranks { white-space: normal; max-width: 80px; text-align: right; }
      .compat-anime-row { flex-wrap: wrap; }

      /* ── Battle prompt ── */
      .battle-prompt { margin-bottom: 16px; }
      .battle-prompt h2 { font-size: 1.1rem; }
      .battle-prompt p  { font-size: 0.82rem; }

      /* ── Minimum touch target for in-card utility buttons ── */
      .card-actions button, .card-actions a {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
      }

      /* ── Header: avatar only — name + logout live in Manage tab ── */
      header { padding: 10px 14px; }
      #progress-info { font-size: 0.75rem; }

      /* ── Manage tab ── */
      .manage-btn { width: 100%; }
    }

    /* ── Touch-device tap targets ──────────────────────────────────────────────
       Apple HIG says 44×44 pt, Android says 48×48 dp. These rules use a coarse
       pointer (touchscreens) rather than width so touch laptops / tablets also
       get the enlarged targets. Visual styling stays the same; buttons just
       center their content inside a 44-px minimum box. */
    @media (pointer: coarse) {
      .sort-btn,
      .format-btn,
      .fuzzy-filter-btn,
      .util-btn,
      .view-btn,
      .res-tab,
      .btn-small,
      .modal-close,
      .share-close,
      .fuzzy-btn,
      .synopsis-btn,
      .card-anilist-link,
      .exclude-btn,
      /* v1.0.147 — newer surfaces missed by the original list */
      .notification-bell,
      .franchise-expand-btn,
      .review-banner button,
      .sync-banner button,
      .new-anime-banner button {
        min-height: 44px;
        min-width:  44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      /* Collapse the secondary action row on touch (§5.3). The long-press
         gesture (or a tap on the "⋯ More" chip) toggles
         .actions-expanded on the card, which un-collapses the row. */
      .anime-card .card-actions { display: none; }
      .anime-card.actions-expanded .card-actions {
        display: flex;
        margin-top: 6px;
      }
      .card-more-chip { display: inline-flex; }
    }

    /* ── Very small screens (≤ 400px) ─────────────────────────────────────── */
    @media (max-width: 400px) {
      /* Tighter battle action buttons */
      .battle-actions .btn-secondary { font-size: 0.72rem; padding: 6px 8px; }
      .battle-actions { gap: 4px; }

      /* Ranking grid: force 2 columns even at narrow width */
      .ranking-list { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }

      /* Slightly smaller battle-card image to give text more room */
      .anime-card img { width: 68px; height: 96px; }

      /* Header already hides name + logout at 600px; nothing extra needed here */

      /* Stats grid 1-col */
      .stats-grid { grid-template-columns: 1fr !important; }
    }

  /* ── Toast notification ───────────────────────────────────────────────── */
  #toast {
    position: fixed;
    /* v1.0.147 — bottom respects the Android nav bar / iOS home indicator
       (env(safe-area-inset-bottom)). Previously toasts slid under the
       gesture bar on touch devices. */
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-bright);
    font-size: 0.85rem;
    padding: 10px 20px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    /* v1.0.147 — was `white-space: nowrap`, which made long messages (the
       slim-cache fallback notice, sync-error explanations) overflow a 360px
       Android viewport horizontally. Wrap and cap width instead. */
    white-space: normal;
    max-width: calc(100vw - 32px);
    text-align: center;
    line-height: 1.4;
  }
  #toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

    /* ── LIGHT MODE SPECIFIC OVERRIDES ───────────────────────────────── */
    /* Elements that use one-off hardcoded dark colours not covered by vars */

    body.light-mode .manage-danger-box {
      background: #fff0f0;
      border-color: #f1aeb5;
    }
    body.light-mode .manage-btn-danger:hover { background: #fff0f0; }

    body.light-mode .confidence.uncertain { background: #fff8e1; color: #9a6700; }
    body.light-mode .confidence.settling  { background: #e8f5e9; color: #1a7f37; }

    body.light-mode .ach-tier.unlocked.bronze { background: #fdf3e7; }
    body.light-mode .ach-tier.unlocked.silver { background: #f5f5f5; }
    body.light-mode .ach-tier.unlocked.gold   { background: #fffbea; }
    body.light-mode .ach-tier .ach-label,
    body.light-mode .ach-tier .ach-req { color: #57606a; }

    body.light-mode #mode-popover button[aria-checked="true"] { background: #dbeafe; }
    body.light-mode .franchise-table-member:hover td { background: #f0f6ff; }

    body.light-mode input,
    body.light-mode textarea,
    body.light-mode select {
      background: var(--bg-primary);
      color: var(--text-bright);
      border-color: var(--border-default);
    }
    body.light-mode input::placeholder,
    body.light-mode textarea::placeholder { color: var(--text-muted); }

    /* Active/hover states that use hardcoded dark blues */
    body.light-mode .sort-btn.active,
    body.light-mode .format-btn.active,
    body.light-mode .view-btn.active,
    body.light-mode #franchise-btn.active { background: #dbeafe; }

    body.light-mode .util-btn:hover,
    body.light-mode .manage-btn:hover,
    body.light-mode .manage-btn-anilist:hover,
    body.light-mode .synopsis-btn:hover,
    body.light-mode .card-anilist-link:hover { background: #dbeafe; }

    body.light-mode .fuzzy-filter-btn.active,
    body.light-mode .fuzzy-btn.active { background: #fff8e1; }
    @media (hover: hover) {
      body.light-mode .fuzzy-btn:hover { background: #fff8e1; }
    }

    body.light-mode .util-btn.util-danger:hover,
    body.light-mode .manage-btn-danger:hover { background: #fff0f0; }

    body.light-mode .nc-box { background: #fff; }
    body.light-mode .nc-action-btn { background: #f1f5f9; }
    body.light-mode .nc-action-btn:hover { background: #dbeafe; }

    body.light-mode .mal-drop-zone:hover,
    body.light-mode .mal-drop-zone.drag-over { background: #dbeafe; }

    body.light-mode .sync-score-low { background: #fff0f0; }

    /* Explicit overrides to beat any inheritance/caching issues */
    body.light-mode .util-btn {
      background: var(--bg-primary);
      color: var(--text-secondary);
    }
    body.light-mode .sort-btn { background: var(--bg-primary); color: var(--text-primary); }
    body.light-mode .format-btn { background: var(--bg-primary); color: var(--text-primary); }
    body.light-mode .view-btn { background: var(--bg-primary); color: var(--text-primary); }

    body.light-mode .sort-btn.active,
    body.light-mode .format-btn.active,
    body.light-mode .view-btn.active { background: #dbeafe !important; color: var(--accent-blue); }

    body.light-mode .fuzzy-filter-btn { background: var(--bg-primary); }
    body.light-mode .fuzzy-filter-btn.active { background: #fff8e1 !important; }

    body.light-mode .view-btn:hover { background: #dbeafe; }

    /* ── TRIO MODE ──────────────────────────────────────────────────────────── */
    #trio-banner {
      display: none;
      background: linear-gradient(90deg, #2a1d0a, #241608);
      border: 1px solid #c9913a;
      border-radius: 8px;
      padding: 8px 14px;
      margin-bottom: 12px;
      font-size: 0.82rem;
      color: #e3a444;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
    }
    #trio-banner.active { display: flex; }

    /* Three cards side by side, each stretching to fill its column */
    .trio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      align-items: start;
    }

    /* Cards reuse .anime-card — these are positional/size overrides only */
    .trio-grid .anime-card {
      position: relative; /* so the badge can sit in the corner */
      width: 100%;
      box-sizing: border-box;
      padding: 14px 12px;
    }

    /* Shrink the cover image to fit 3 across */
    .trio-grid .anime-card img {
      width: 110px;
      height: 155px;
    }

    /* Gold/silver/bronze border when ranked */
    .trio-card.trio-ranked-1 {
      border-color: #f0c040 !important;
      box-shadow: 0 0 16px rgba(240,192,64,0.3) !important;
    }
    .trio-card.trio-ranked-2 {
      border-color: #9e9e9e !important;
      box-shadow: 0 0 12px rgba(158,158,158,0.25) !important;
    }
    .trio-card.trio-ranked-3 {
      border-color: #c8824a !important;
      box-shadow: 0 0 12px rgba(200,130,74,0.25) !important;
    }

    /* Medal badge pinned to top-left of each card */
    .trio-badge {
      position: absolute;
      top: 8px;
      left: 8px;
      font-size: 1.5rem;
      line-height: 1;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,0.8));
      z-index: 2;
      pointer-events: none;
    }

    /* Ep meta row inside trio cards */
    .ep-meta-trio {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
    }

    /* Mobile: vertical compact list matching the normal mobile card layout */
    @media (max-width: 600px) {
      .trio-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .trio-grid .anime-card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 14px 12px;
        gap: 10px;
      }
      .trio-grid .anime-card img {
        width: 80px;
        height: 112px;
        flex-shrink: 0;
      }
      .trio-grid .anime-card .anime-card-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        gap: 5px;
      }
      .trio-grid .anime-card .elo-badge { align-self: flex-start; }
      .ep-meta-trio { justify-content: flex-start; }
      .trio-badge { font-size: 1.25rem; top: 6px; left: 6px; }
    }