:root {
    --bg-deep:    #07080f;
    --bg-card:    #0d0f1c;
    --bg-panel:   #111428;
    --accent-gold:   #f0c040;
    --accent-blue:   #3a8fff;
    --accent-cyan:   #00e5ff;
    --accent-purple: #8b5cf6;
    --text-primary:   #e8eaf6;
    --text-secondary: #7986cb;
    --text-dim:       #3949ab;
    --border-subtle:  rgba(90,110,200,0.18);
    --border-glow:    rgba(58,143,255,0.4);
    --glow-blue: 0 0 20px rgba(58,143,255,0.5), 0 0 60px rgba(58,143,255,0.15);
    --glow-gold: 0 0 20px rgba(240,192,64,0.5), 0 0 60px rgba(240,192,64,0.1);
    --nav-bg: rgba(7,8,15,0.88);
    --font-display: 'Bebas Neue', sans-serif;
    --font-ui:      'Rajdhani', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --nav-h: 64px;
    --radius: 12px;
    --radius-lg: 20px;

    /* Compare/Find Similar card-strip + stats table shared sizing (item 6,
       2026-10-xx direct request: "columns should always be the same width.
       This width is the width of cards on the screen in compare and similar
       views" + "columns should be center aligned to corresponding cards").
       --cmp-colw is READ by two places that must always agree: the card
       image panels themselves (boxDims/sizeCss in
       _renderCardStripOverlay, quartett-overlay.js) and the stats table's
       own data-column width below (.cmp-colhead/.cmp-cell) — defining it
       once here, instead of duplicating the same calc() in both the JS and
       the CSS, is what guarantees a table column can never drift out of
       sync with the card width above it. --cmp-labelw/--cmp-gap exist
       alongside it so the table's own centering math (see .cmp-table below)
       has the same values to work from without re-deriving them. */
    --cmp-colw: min(240px, calc((92vw - 100px) / 4));
    --cmp-labelw: 130px;
    --cmp-gap: 14px;
  }

  /* Self-hosted flag-icons (vendor/flag-icons/) — see isoToFlag()'s comment
     in js/state.js for why this replaced emoji flags app-wide. `.fi`'s own
     sizing (width:1.333333em, an inline-block) already comes from the
     vendored stylesheet; this just nudges vertical alignment to sit on the
     text baseline like a normal character would, and gives white-heavy
     flags (Japan, Poland, …) a hairline edge so they don't disappear
     against this app's dark panels. */
  .fi { vertical-align: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
  /* Dual/multi-country flag (direct request): a card with a combined code
     like "USA/GB" shows ONE flag-shaped box split into equal vertical
     strips — left-to-right in the same order as the code's parts — rather
     than only ever the first country's flag, mirroring a real physical
     Quartett card's split flag. isoToSplitFlag() (state.js) now builds this
     as ONE inline `<svg>` with `preserveAspectRatio="none"` per `<image>`
     strip — see state.js's comment on isoToSplitFlag for the two earlier
     attempts (CSS `background-size:100% 100%`, then `<img>` +
     `object-fit:fill`) that both measured correctly in THIS app's own
     testing but still came back letterboxed in the user's own testing.
     `preserveAspectRatio="none"` on an SVG `<image>` is the oldest, most
     explicit, most consistently-implemented way to force non-uniform
     stretch there is — it's an attribute on the image element itself, not
     a CSS box-model calculation a browser's cascade/layout engine can get
     out of sync on. `.fi-dual` just sizes/clips/frames the svg exactly like
     one normal `.fi` (same width/height/radius/shadow as the plain `.fi`
     rule above); the svg fills it at width:100%;height:100%; and every
     stretching decision happens inside the svg's own viewBox math. */
  .fi-dual {
    display: inline-block; width: 1.333333em; height: 1em; overflow: hidden;
    vertical-align: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.14);
  }
  .fi-dual svg { display: block; width: 100%; height: 100%; }

  /* DDR/"dd" — custom addition, not part of the vendored flag-icons package
     (added 2026-09-30, direct request): the German Democratic Republic
     isn't a current ISO 3166-1 country, so flag-icons has no SVG for it.
     vendor/flag-icons/flags/4x3/dd.svg is a hand-built simplified rendering
     of the historical flag, added here (not to the vendor package's own
     generated CSS) so a future vendor re-sync can't silently drop it. */
  .fi-dd { background-image: url("../vendor/flag-icons/flags/4x3/dd.svg"); }

  /* "ANT"/"USB" — two more alternate Quartett country codes (alongside
     "AG"/"UZ") whose raw data values aren't current ISO 3166-1 codes
     flag-icons ships an SVG for. vendor/flag-icons/flags/4x3/an.svg and
     ub.svg are custom hand-added flags (added here, not to the vendor
     package's own generated CSS, so a future vendor re-sync can't silently
     drop them) — same mechanism as .fi-dd above. Direct request, 2026-10-02. */
  .fi-an { background-image: url("../vendor/flag-icons/flags/4x3/an.svg"); }
  .fi-ub { background-image: url("../vendor/flag-icons/flags/4x3/ub.svg"); }

  /* ── THEME: BLACK — near-pure-black backgrounds, pure white text/accents,
     strong borders and glows so edges and hover states read clearly. ── */
  [data-theme="black"] {
    --bg-deep:       #000000;
    --bg-card:       #060606;
    --bg-panel:      #0d0d0d;
    --accent-gold:   #ffffff;
    --accent-blue:   #cfcfcf;
    --accent-cyan:   #ffffff;
    --accent-purple: #333333;
    --text-primary:   #ffffff;
    --text-secondary: #b0b0b0;
    --text-dim:       #666666;
    --border-subtle:  rgba(255,255,255,0.18);
    --border-glow:    rgba(255,255,255,0.55);
    --glow-blue: 0 0 24px rgba(255,255,255,0.4), 0 0 70px rgba(255,255,255,0.15);
    --glow-gold: 0 0 24px rgba(255,255,255,0.35), 0 0 65px rgba(255,255,255,0.12);
    --nav-bg: rgba(0,0,0,0.96);
  }
  [data-theme="black"] #starfield {
    background:
      radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.035) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 70%, rgba(255,255,255,0.02) 0%, transparent 60%),
      var(--bg-deep);
  }

  /* Monochrome + Black share the same hover/glow overrides — a lot of hover
     and glow effects in the base stylesheet hardcode the default theme's
     blue/cyan as literal rgba() values rather than reading the CSS
     variables above, so without these, hovering anything (sidebar rows,
     cards, nav links, buttons…) still glowed blue even in these themes.
     Swaps those specific hardcoded tints for neutral white, leaving
     everything else (which already reads the variables) alone. */
  [data-theme="black"] .theme-option.active { background: rgba(255,255,255,.08); }
  [data-theme="black"] .nav-links li a:hover { background: rgba(255,255,255,.08); }
  [data-theme="black"] .btn-primary { box-shadow: 0 4px 24px rgba(255,255,255,.2); }
  [data-theme="black"] .btn-primary:hover { box-shadow: 0 8px 32px rgba(255,255,255,.3); }
  [data-theme="black"] .btn-secondary:hover { background: rgba(255,255,255,.08); }
  [data-theme="black"] .year-btn:hover { background: rgba(255,255,255,.06); }
  [data-theme="black"] .year-btn.active { background: rgba(255,255,255,.08); }
  [data-theme="black"] .year-btn .badge { background: rgba(255,255,255,.12); }
  [data-theme="black"] .coll-btn.active { background: rgba(255,255,255,.06); }
  [data-theme="black"] .coll-card:hover { box-shadow: 0 8px 28px rgba(255,255,255,.1); }
  [data-theme="black"] .qcard:hover { box-shadow: 0 16px 48px rgba(255,255,255,.18), 0 0 0 1px var(--accent-blue); }
  [data-theme="black"] .grade-badge { border-color: rgba(255,255,255,.2); }
  [data-theme="black"] .modal-nav:hover { background: rgba(255,255,255,.16); }
  [data-theme="black"] .modal-info-box { background: rgba(255,255,255,.05); }
  [data-theme="black"] .sort-btn.on { background: rgba(255,255,255,.1); }
  [data-theme="black"] .cmap-list-col { border-right-color: rgba(255,255,255,.12); }
  [data-theme="black"] .cmap-list-sort { border-bottom-color: rgba(255,255,255,.12); }
  [data-theme="black"] .cmap-sort-btn.on { background: rgba(255,255,255,.1); }
  [data-theme="black"] .cmap-list-item.active { background: rgba(255,255,255,.08); }
  [data-theme="black"] .cmap-list-item.active .cmap-list-count { background: rgba(255,255,255,.14); }
  [data-theme="black"] #cmap-header { border-bottom-color: rgba(255,255,255,.12); }

  /* ── THEME: WHITE — direct request, 2026-10-01: "similar to Black, but
     inverted" for visitors who struggle with the default theme's contrast.
     Every variable/selector below is Black's block above with light↔dark
     swapped: near-white backgrounds, near-black text/accents, and every
     rgba(255,255,255,X) hover/glow tint flipped to rgba(0,0,0,X) at the SAME
     opacity (a light tint reads on a dark surface, a dark tint reads on a
     light one — same idea, opposite direction). Text colors were chosen for
     real contrast against the white backgrounds, not just inverted hex
     values: --text-secondary #4a4a4a is ~9:1 against white, --text-dim
     #707070 is ~5.2:1 — both clear AA (4.5:1) for normal text, so "dim"
     text stays legible here rather than fading into illegibly-light gray
     the way a naive bitwise invert of Black's #666666 would. */
  [data-theme="white"] {
    --bg-deep:       #ffffff;
    --bg-card:       #f7f7f7;
    --bg-panel:      #eeeeee;
    --accent-gold:   #000000;
    --accent-blue:   #2b2b2b;
    --accent-cyan:   #000000;
    --accent-purple: #cccccc;
    --text-primary:   #000000;
    --text-secondary: #4a4a4a;
    --text-dim:       #707070;
    --border-subtle:  rgba(0,0,0,0.18);
    --border-glow:    rgba(0,0,0,0.55);
    --glow-blue: 0 0 24px rgba(0,0,0,0.25), 0 0 70px rgba(0,0,0,0.1);
    --glow-gold: 0 0 24px rgba(0,0,0,0.22), 0 0 65px rgba(0,0,0,0.08);
    --nav-bg: rgba(255,255,255,0.96);
  }
  [data-theme="white"] #starfield {
    background:
      radial-gradient(ellipse at 20% 30%, rgba(0,0,0,0.035) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 70%, rgba(0,0,0,0.02) 0%, transparent 60%),
      var(--bg-deep);
  }
  [data-theme="white"] .theme-option.active { background: rgba(0,0,0,.08); }
  [data-theme="white"] .nav-links li a:hover { background: rgba(0,0,0,.08); }
  [data-theme="white"] .btn-primary { box-shadow: 0 4px 24px rgba(0,0,0,.2); }
  [data-theme="white"] .btn-primary:hover { box-shadow: 0 8px 32px rgba(0,0,0,.3); }
  [data-theme="white"] .btn-secondary:hover { background: rgba(0,0,0,.08); }
  [data-theme="white"] .year-btn:hover { background: rgba(0,0,0,.06); }
  [data-theme="white"] .year-btn.active { background: rgba(0,0,0,.08); }
  [data-theme="white"] .year-btn .badge { background: rgba(0,0,0,.12); }
  [data-theme="white"] .coll-btn.active { background: rgba(0,0,0,.06); }
  [data-theme="white"] .coll-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.1); }
  [data-theme="white"] .qcard:hover { box-shadow: 0 16px 48px rgba(0,0,0,.18), 0 0 0 1px var(--accent-blue); }
  [data-theme="white"] .grade-badge { border-color: rgba(0,0,0,.2); }
  [data-theme="white"] .modal-nav:hover { background: rgba(0,0,0,.16); }
  [data-theme="white"] .modal-info-box { background: rgba(0,0,0,.05); }
  [data-theme="white"] .sort-btn.on { background: rgba(0,0,0,.1); }
  [data-theme="white"] .cmap-list-col { border-right-color: rgba(0,0,0,.12); }
  [data-theme="white"] .cmap-list-sort { border-bottom-color: rgba(0,0,0,.12); }
  [data-theme="white"] .cmap-sort-btn.on { background: rgba(0,0,0,.1); }
  [data-theme="white"] .cmap-list-item.active { background: rgba(0,0,0,.08); }
  [data-theme="white"] .cmap-list-item.active .cmap-list-count { background: rgba(0,0,0,.14); }
  [data-theme="white"] #cmap-header { border-bottom-color: rgba(0,0,0,.12); }
  [data-theme="white"] .theme-btn:hover { background: rgba(0,0,0,.05); }
  /* These two have NO border of their own (unlike most of the rows/buttons
     above, which stay visible via var(--border-subtle) regardless) — just a
     flat rgba(255,255,255,X) fill marking the bar's track, so on a white
     background it would've been completely invisible rather than merely
     less on-theme. */
  [data-theme="white"] .db-loading-bar { background: rgba(0,0,0,.08); }
  [data-theme="white"] .collection-progress-bar { background: rgba(0,0,0,.08); }

  /* Swatch updates */
  .swatch-black   { background: linear-gradient(135deg, #000000 45%, #ffffff 100%); }
  .swatch-white   { background: linear-gradient(135deg, #ffffff 45%, #000000 100%); }
  /* Specificity note: base rule is `.theme-option .swatch` (two classes), so
     a bare `.swatch-white` border rule would lose to it — this matches that
     specificity instead. Needed because the White theme's own panel
     background (--bg-panel) is itself near-white, which would otherwise
     let this swatch's white half blend straight into it. */
  .theme-option .swatch-white { border: 1px solid rgba(0,0,0,.3); }
  .theme-btn {
    margin-left: 16px;
    background: none; border: 1px solid var(--border-subtle);
    border-radius: 8px; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary);
    transition: border-color .2s, color .2s, background .2s;
    position: relative; flex-shrink: 0;
  }
  .theme-btn:hover { border-color: var(--accent-blue); color: var(--text-primary); background: rgba(255,255,255,.05); }
  .theme-btn svg { width:18px; height:18px; transition: transform .4s ease; }
  .theme-btn:hover svg { transform: rotate(60deg); }

  .theme-panel {
    display: none; position: absolute; top: calc(var(--nav-h) + 8px); right: 40px;
    background: var(--bg-card); border: 1px solid var(--border-glow);
    border-radius: var(--radius); padding: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5), var(--glow-blue);
    z-index: 1100; min-width: 180px;
    animation: fadeUp .2s ease;
  }
  .theme-panel.open { display: block; }
  .theme-panel-label { font-family: var(--font-ui); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--text-dim); padding: 4px 8px 8px; }
  .theme-option {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 7px; cursor: pointer;
    transition: background .18s;
    font-family: var(--font-ui); font-size: .88rem; font-weight: 600;
    letter-spacing: .06em; color: var(--text-secondary);
    border: none; background: none; width: 100%; text-align: left;
  }
  .theme-option:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
  .theme-option.active { color: var(--accent-cyan); background: rgba(58,143,255,.08); }
  .theme-option .swatch {
    width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.15);
  }
  .swatch-default { background: linear-gradient(135deg, #07080f 50%, #3a8fff 100%); }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--bg-deep); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; }

  /* STARFIELD */
  #starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 20% 30%, rgba(58,143,255,0.06) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 70%, rgba(139,92,246,0.05) 0%, transparent 60%), var(--bg-deep); }
  #starfield::before { content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6) 0%, transparent 100%),
      radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,0.5) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 45% 90%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 92% 50%, rgba(255,255,255,0.6) 0%, transparent 100%),
      radial-gradient(2px 2px at 60% 30%, rgba(200,220,255,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,0.4) 0%, transparent 100%);
    animation: twinkle 6s ease-in-out infinite alternate; }
  @keyframes twinkle { 0%{opacity:.5} 100%{opacity:1} }

  /* NAV */
  nav { position: sticky; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; padding: 0 40px; background: var(--nav-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); }
  .nav-logo { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.08em; color: var(--accent-gold); text-shadow: var(--glow-gold); margin-right: auto; cursor: pointer; user-select: none; }
  .nav-logo span { color: var(--text-secondary); font-size: 0.9rem; display: block; letter-spacing: 0.2em; font-family: var(--font-ui); font-weight: 500; margin-top: -4px; }
  .nav-links { display: flex; gap: 4px; list-style: none; }
  .nav-links li a { display: block; padding: 8px 18px; font-family: var(--font-ui); font-size: .95rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); text-decoration: none; border-radius: 6px; transition: color .2s, background .2s; position: relative; }
  .nav-links li a::after { content: ''; position: absolute; bottom: 4px; left: 50%; right: 50%; height: 2px; background: var(--accent-blue); transition: left .25s, right .25s; border-radius: 2px; }
  .nav-links li a:hover { color: var(--text-primary); background: rgba(58,143,255,0.08); }
  .nav-links li a:hover::after, .nav-links li a.active::after { left: 18px; right: 18px; }
  .nav-links li a.active { color: var(--accent-cyan); }
  /* The narrow gap just above the 680px mobile breakpoint (through roughly
     740px — a resized browser window or a small tablet, not a specific
     device) still used the full desktop nav sizing above, which overflowed
     there with the longer translated nav labels (German "Datenbank",
     Croatian "Baza podataka") — same bug/same 2026-10-04 discovery as the
     mobile nav fix a bit further down in this file, just the other side of
     the breakpoint. A light shrink closes it; verified with Playwright at
     681/700/720/740px in German and Croatian — zero overflow. */
  @media(min-width:681px) and (max-width:760px) {
    nav { padding: 0 16px; gap: 6px; }
    .nav-logo { font-size: 1.3rem; }
    .nav-logo span { font-size: .72rem; }
    .nav-links li a { padding: 7px 10px; font-size: .78rem; letter-spacing: .05em; }
    .theme-btn { width: 34px; height: 34px; }
  }

  /* SECTIONS */
  .section { display: none; position: relative; z-index: 1; }
  .section.active { display: block; animation: fadeUp .4s ease; }
  @keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

  /* HOME
     2026-09-28: shrunk from a full-viewport-height, vertically-centered hero
     (min-height:100vh + justify-content:center) down to a compact,
     top-aligned block. The old version pushed the trivia panels below the
     fold on most screens — a person had to scroll before seeing Card of the
     Day/Did You Know/Record Holders at all, which is what prompted this.
     Kept min-height low rather than removing layout centering entirely, so
     very short pages (e.g. very few stat/trivia items) still look composed
     rather than jammed against the nav bar. */
  #home { display:none; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center; padding: 44px 24px 40px; min-height:0; }
  #home.active { display:flex; }
  /* "RAVENSBURGER QUARTETT ARCHIVE" on one row (direct request, 2026-10-04)
     — used to be three stacked lines (one word per <br>), each sized by the
     old clamp's much larger max (4.4rem). index.html now runs the three
     words together as one text node (space-separated, QUARTETT still its
     own gold <span>) with only ONE <br> left — before "by Andreas", which
     stays its own line. The clamp here is scaled down and leans harder on
     its vw term (5.4vw vs the old 6vw, off a much smaller min/max) so the
     full ~30-character title actually fits one row rather than wrapping —
     white-space:nowrap is the actual enforcement (wrapping would silently
     undo the one-line request the moment a translation/width combination
     ran even slightly long); letter-spacing dropped slightly too since the
     old .02em reads looser than one line of this length wants.
     2026-10-04: the original clamp(1.3rem,5.4vw,3.1rem) here was never
     actually checked against this specific string's real rendered width —
     it turned out to overflow the viewport (clipped on both edges, body's
     overflow-x:hidden just hid the horizontal scrollbar rather than
     preventing it) at every width from ~570px up to ~1040px, i.e. most of
     the "desktop" range right above the 680px mobile breakpoint, including
     the 768px this file's own earlier comment claimed was verified.
     Replaced with a calc()-based formula (vw term scaled down + a small
     fixed px offset) derived from this exact string's measured
     width-per-font-size ratio in var(--font-display) at this letter-spacing
     (≈19.17), solved to always leave a ~40px safety margin against the
     viewport width minus #home's left+right padding (24px+24px here) —
     verified with Playwright at 681/768/900/1024/1280px, no overflow at
     any of them (see the mobile override below for the <=680px half of
     this same fix). */
  .home-title { font-family:var(--font-display); font-size:clamp(1.3rem, calc(5.2vw - 4.5px), 3.1rem); line-height:1.1; letter-spacing:.01em; color:var(--text-primary); margin-bottom:14px; white-space:nowrap; }
  .home-title .gold { color:var(--accent-gold); text-shadow:var(--glow-gold); }
  .home-title .home-by { font-family:var(--font-body); font-size:clamp(.8rem,1.6vw,1.05rem); font-weight:300; letter-spacing:.25em; color:var(--text-secondary); text-shadow:none; text-transform:none; display:block; margin-top:5px; }
  .home-subtitle { font-weight:300; font-size:clamp(.92rem,2vw,1.08rem); color:var(--text-secondary); max-width:520px; margin-bottom:28px; line-height:1.6; }
  .home-ctas { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .btn-primary { font-family:var(--font-ui); font-weight:700; font-size:.86rem; letter-spacing:.15em; text-transform:uppercase; padding:12px 28px; border-radius:8px; border:none; background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color:#fff; cursor:pointer; box-shadow:0 4px 24px rgba(58,143,255,.35); transition:transform .2s, box-shadow .2s; }
  .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(58,143,255,.5); }
  .btn-secondary { font-family:var(--font-ui); font-weight:600; font-size:.86rem; letter-spacing:.15em; text-transform:uppercase; padding:11px 24px; border-radius:8px; border:1px solid var(--border-glow); background:transparent; color:var(--accent-blue); cursor:pointer; transition:all .2s; }
  .btn-secondary:hover { background:rgba(58,143,255,.08); border-color:var(--accent-blue); color:var(--text-primary); }
  @keyframes loadingPulse { 0%,100%{opacity:.25} 50%{opacity:.85} }

  /* TRIVIA — Card of the Day (js/trivia.js). Was a 3-column grid (Card of
     the Day / an "Archive by the Numbers" stats panel / Record Holders);
     the other two panels, and the hero .home-stats counters that had
     briefly lived in the middle one, were all removed 2026-09-30 per
     explicit request, leaving Card of the Day as the section's only panel
     — see trivia.js's header comment. .trivia-wrap now holds just the one
     .trivia-panel directly (no .trivia-grid wrapper needed for a single
     column), capped to a comfortable reading width instead of the old
     three-column max-width. Width itself (420px) is UNCHANGED as of
     2026-10-02's size-down (direct request, "covering too much screen
     space") — narrowing it too, on top of shrinking .trivia-cotd-img below,
     was tried first and reverted the same round: at a narrower panel the
     name/set toprow had too little room and started eliding longer card
     names ("Oasis of the S…"). The image is no longer tied to the panel's
     width at all (fixed 110px — see below), so the real fix for "too much
     screen space" — the image's HEIGHT — didn't actually need a narrower
     panel to work; keeping 420px here just gives the toprow its space back
     at no cost to the size reduction. */
  .trivia-wrap { width:100%; max-width:420px; margin-top:8px; }
  /* Top padding is intentionally smaller than the other three sides (direct
     request, 2026-10-01) so .trivia-panel-title sits closer to the panel's
     top edge; left/right/bottom are untouched. */
  .trivia-panel { background:linear-gradient(160deg, var(--bg-panel), var(--bg-card)); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:12px 22px 24px; min-height:196px; display:flex; flex-direction:column; box-shadow:0 8px 28px rgba(0,0,0,.18); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden; }
  .trivia-panel:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.28); border-color:rgba(255,255,255,.14); }
  /* margin-bottom shrunk from 16px (direct request, 2026-10-01) so
     .trivia-cotd-toprow — the title's very next sibling, inside
     .trivia-cotd-body right below it — sits closer underneath the title. */
  /* justify-content:center added 2026-10-02 (Round 36, direct request:
     "center trivia-panel-title with trivia-cotd-img") — the title used to
     sit flush left against the panel's own padding, while .trivia-cotd-img
     below is a fixed-width (250px) element centered via margin:0 auto
     within that SAME panel content width, so centering the title here
     lines its center up with the image's center (both share one parent
     width, so "center within the panel" and "center with the image" are
     the same alignment). */
  .trivia-panel-title { font-family:var(--font-ui); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.82rem; color:var(--accent-cyan); margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:9px; }

  /* Card of the Day — was a full-bleed edge-to-edge image (same visual idea
     as the app's "coll-card" set/collection tiles), which at .trivia-wrap's
     420px width rendered the card scan at ~420×667px — enough to cover most
     of a phone screen before even scrolling. Switched 2026-10-02 (direct
     request, "it is covering too much screen space") to a small FIXED-size
     centered thumbnail instead: .trivia-cotd-img no longer stretches to the
     panel's width (no more -22px bleed margin canceling .trivia-panel's
     side padding). First pass that same round went to 110px wide, which
     overshot ("way too small, tiny") — corrected to 190px the next round.
     2026-10-04 (same direct feedback pattern, one more round): "slightly
     bigger" — 190px → 220px, a smaller nudge than either previous resize
     rather than another big jump, since the 190px size was already close.
     2026-10-02 (Round 33, direct request): one more size-up, 220px → 250px.
     Still well under .trivia-wrap's 420px width (minus 44px of side
     padding), so no other layout change needed.
     Same fixed-width, non-bleeding, rounded-corner treatment throughout;
     aspect-ratio 63/100 still matches the real card ratio used everywhere
     else. Keeps a gold top accent to read as the section's visual anchor. */
  .trivia-panel-cotd { border-top:2px solid var(--accent-gold); }
  .trivia-cotd-body { display:flex; flex-direction:column; align-items:stretch; gap:10px; cursor:pointer; flex:1; }
  .trivia-cotd-img { width:250px; aspect-ratio:63/100; margin:0 auto; flex-shrink:0; background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; position:relative; border-radius:10px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.22); }
  .trivia-cotd-img img { width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .25s; }
  .trivia-cotd-img img.loaded { opacity:1; }
  .trivia-cotd-img .pholder { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:2.6rem; opacity:.3; }
  .trivia-cotd-img .pholder span { font-family:var(--font-ui); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; }
  /* One row, right below .trivia-panel-title — originally held Name (left)
     + year/set (right), 2026-09-30. The year/set side (.trivia-cotd-set)
     was REMOVED outright 2026-10-02 (Round 36, direct request) — its
     content/click-through moved into .trivia-cotd-standout-set below
     instead (see that rule's comment) — so this row now holds just the
     name, and justify-content switched from space-between to center
     (direct request, "center trivia-cotd-name with trivia-cotd-img" — same
     shared-parent-width reasoning as .trivia-panel-title above). */
  .trivia-cotd-toprow { display:flex; align-items:baseline; justify-content:center; gap:10px; }
  .trivia-cotd-name { font-family:var(--font-ui); font-weight:700; font-size:1.08rem; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; text-align:center; }
  /* Moved 2026-10-02 (Round 35, direct request) to sit directly under
     .trivia-cotd-toprow — ABOVE the image — instead of below it inside the
     now-removed .trivia-cotd-info wrapper (that wrapper had no other
     content and no other purpose once this moved out of it, so it's gone
     entirely rather than left as an empty shell). Now a direct child of
     .trivia-cotd-body (same flex column as toprow/img), so its spacing
     above AND below comes from that column's own `gap:10px` — the old
     `margin-top:10px` this rule used to carry (needed back when this sat
     nested a level deeper, outside the gap) is gone too, since it would
     have doubled up with the gap and pushed the line too far from the
     toprow above it. */
  .trivia-cotd-standout { font-family:var(--font-body); font-size:.8rem; color:var(--accent-gold); line-height:1.4; }
  /* The year+collection link, 2026-10-02 (Round 36, direct request) — folded
     IN from the just-removed .trivia-cotd-set (same "{year} {collection}"
     text, no more " · " separator, see triviaStandoutLine's own i18n
     string) rather than the plain, non-clickable `{collection}` text the
     standout sentence used to interpolate. Styled distinctly from the rest
     of the gold standout line so it reads as clickable — underlined,
     app-wide accent-cyan (matching .trivia-panel-title's own color, a
     deliberate "this is a link" signal already used elsewhere) — and wired
     in trivia.js to stopPropagation + _navToSet(), so clicking it jumps
     straight to that quartett set instead of (or as well as) opening THIS
     card's own modal, which is what clicking anywhere else in the panel
     still does. */
  .trivia-cotd-standout-set { color:var(--accent-cyan); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  .trivia-cotd-standout-set:hover { color:var(--accent-blue); }

  /* Loading skeleton — shown from the very first renderTriviaSection() call
     (even with zero data), so the section doesn't just pop into existence;
     real content replaces this in place once ready. */
  .trivia-skeleton-line { height:12px; border-radius:6px; background:rgba(255,255,255,.06); margin-top:10px; animation:loadingPulse 1.6s ease-in-out infinite; }
  .trivia-skeleton-line.short { width:60%; }

  /* DATABASE */
  #database { padding:0; }
  /* height was a flat 100vh until 2026-10-02 (direct bug report, with a
     photo showing the card grid cut off on a smaller desktop screen) — a
     real layout bug, not just a sizing issue: `nav` sits ABOVE this section
     in normal document flow (`position:sticky`, still takes up its own
     var(--nav-h) of vertical space), so giving this section the FULL 100vh
     on top of that pushed its bottom edge var(--nav-h) (64px) past the
     actual viewport bottom — exactly the same mistake `.placeholder-section`
     (below) already correctly avoids with this same calc(). That overflow
     was invisible/silent because `.db-main` below is its own
     `overflow-y:auto` region, so the missing 64px just meant the WHOLE page
     (`body`) also had to scroll slightly before `.db-main`'s own internal
     scrollbar could reach the rest of its content — a confusing "two
     different things scroll" situation on any screen short enough for it to
     matter. Fixed to match `.placeholder-section`'s existing, correct
     pattern. See the `@media(max-width:680px)` block below for the matching
     mobile fix (100dvh had the identical bug), and the `@media(max-height:…)`
     block further down for the actual card-grid-sizing half of that bug
     report — this fix alone recovers the wasted 64px but doesn't by itself
     guarantee a full 32-card quartett fits with no scroll at all; that
     needs smaller cards on a short viewport too. */
  #database.active { display:flex; flex-direction:column; height:calc(100vh - var(--nav-h)); }


  /* LOADER BAR */
  .loader-bar { display:none; align-items:center; gap:14px; padding:10px 40px; border-bottom:1px solid var(--border-subtle); background:rgba(58,143,255,.03); flex-shrink:0; flex-wrap:wrap; }
  .loader-bar label { font-family:var(--font-ui); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); white-space:nowrap; }
  .loader-bar input[type=file] { font-size:.8rem; color:var(--text-secondary); cursor:pointer; }
  .loader-bar input[type=file]::file-selector-button { font-family:var(--font-ui); font-weight:600; font-size:.72rem; letter-spacing:.1em; padding:5px 12px; border-radius:5px; border:1px solid var(--border-glow); background:rgba(58,143,255,.1); color:var(--accent-blue); cursor:pointer; margin-right:10px; transition:background .2s; }
  .loader-bar input[type=file]::file-selector-button:hover { background:rgba(58,143,255,.2); }
  /* TOOLBAR */
  .db-toolbar { display:flex; gap:8px; align-items:center; padding:12px 40px; border-bottom:1px solid var(--border-subtle); flex-wrap:wrap; flex-shrink:0; }
  /* Collapsed by default on DESKTOP too as of 2026-09-30 (previously always
     open there — only mobile collapsed it) — direct request: "Desktop
     version should also have 'expandable' Advanced button like mobile has,
     so advanced buttons are minimized by default". .open (added by
     toggleToolbarFilters(), ui.js — the exact same function/class mobile
     already used) switches back to the original always-inline behavior:
     display:contents flattens this wrapper away entirely so its children
     (By Country/Random/Advanced Sort/Advanced Search/Compare/the quartett-
     name search box) flow as if they were direct children of .db-toolbar's
     own flex row, same as before this round. */
  .toolbar-row2 { display:none; }
  .toolbar-row2.open { display:contents; }
  /* .toolbar-scrollrow only exists as a mobile grouping (search inputs +
     sort buttons, made horizontally scrollable there instead of wrapping to
     several full-height rows) — on desktop it's transparent, same trick as
     .toolbar-row2 above. */
  .toolbar-scrollrow { display:contents; }
  /* Same "transparent on desktop" trick for the sort-controls wrapper (see
     the mobile media query below for its actual mobile-only row layout). */
  .toolbar-sortrow { display:contents; }
  /* The "Advanced" collapse toggle — shown on desktop now too (2026-09-30,
     see .toolbar-row2 above), sized like the other .sort-btn toolbar
     buttons it now sits inline with rather than the mobile layout's
     full-width button (that sizing is scoped to the media query below and
     doesn't reach here). Same #toolbarFiltersToggle element and
     toggleToolbarFilters() (ui.js) as mobile — only this visual sizing
     differs per breakpoint, and the .on/chevron styling right below is
     shared by both (the mobile media query no longer needs its own copy). */
  .toolbar-filters-toggle {
    display:flex; align-items:center; justify-content:center; gap:6px;
    font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    padding:7px 13px; border-radius:6px; border:1px solid var(--border-subtle);
    background:var(--bg-panel); color:var(--text-secondary); cursor:pointer;
    transition:background .18s, border-color .18s, color .18s; white-space:nowrap;
  }
  .toolbar-filters-toggle:hover { border-color:var(--border-glow); color:var(--text-primary); }
  .toolbar-filters-toggle.on { border-color:var(--accent-blue); color:var(--accent-blue); background:rgba(58,143,255,.08); }
  .toolbar-filters-chevron { font-size:.62rem; opacity:.7; }
  /* Wraps the toggle + Clear button — same "transparent on desktop" trick,
     so Clear keeps its original trailing position in the toolbar. */
  .toolbar-persistent-row { display:contents; }
  /* The new quartett-name search box (item 3, same 2026-09-30 round) sits
     among .toolbar-row2's .sort-btn buttons rather than the always-visible
     .toolbar-scrollrow above — it's a cross-set "find a SET" tool like the
     buttons around it, not a per-set one. .search-box's own default sizing
     (flex:0 1 260px, meant for the wider always-visible row) is trimmed
     down here so it doesn't dwarf the compact buttons it's inline with. */
  .toolbar-row2 .search-box { flex:0 1 220px; min-width:150px; }
  .search-box { flex:0 1 260px; min-width:160px; position:relative; }
  .search-box input { width:100%; padding:8px 12px 8px 38px; background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:8px; color:var(--text-primary); font-family:var(--font-body); font-size:.78rem; outline:none; transition:border-color .2s; }
  .search-box input:focus { border-color:var(--accent-blue); }
  .search-box input::placeholder { color:var(--text-secondary); }
  .search-box svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.4; }
  /* LAYOUT */
  .db-layout { display:flex; flex:1; overflow:hidden; }

  /* SIDEBAR */
  .db-sidebar { width:205px; flex-shrink:0; border-right:1px solid var(--border-subtle); overflow-y:auto; padding:10px 0; }
  .db-sidebar::-webkit-scrollbar { width:3px; }
  .db-sidebar::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:3px; }
  .sidebar-label { font-family:var(--font-ui); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--text-dim); padding:5px 16px 2px; margin-top:4px; display:flex; align-items:center; justify-content:space-between; }
  .sidebar-sort-btn { background:none; border:none; cursor:pointer; color:var(--text-dim); padding:0 4px; font-size:.75rem; line-height:1; transition:color .18s; flex-shrink:0; }
  .sidebar-sort-btn:hover { color:var(--accent-blue); }
  .year-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:7px 16px; background:none; border:none; cursor:pointer; font-family:var(--font-ui); font-size:.9rem; font-weight:600; letter-spacing:.04em; color:var(--text-secondary); transition:color .18s, background .18s; text-align:left; }
  .year-btn:hover { color:var(--text-primary); background:rgba(58,143,255,.06); }
  .year-btn.active { color:var(--accent-cyan); background:rgba(0,229,255,.06); }
  .year-btn .badge { font-size:.6rem; background:rgba(58,143,255,.15); color:var(--text-secondary); padding:2px 6px; border-radius:100px; }
  .year-collections { display:none; }
  .year-collections.open { display:block; }
  .coll-btn { display:block; width:calc(100% - 12px); margin-left:12px; padding:5px 8px 5px 16px; background:none; border:none; border-left:2px solid transparent; cursor:pointer; font-size:.78rem; color:var(--text-dim); text-align:left; transition:color .18s, border-color .18s, background .18s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-body); }
  .coll-btn:hover { color:var(--text-secondary); border-left-color:var(--border-glow); }
  .coll-btn.active { color:var(--accent-blue); border-left-color:var(--accent-blue); background:rgba(58,143,255,.05); }

  /* MAIN */
  .db-main { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
  .db-main::-webkit-scrollbar { width:4px; }
  .db-main::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:4px; }

  /* #breadcrumb's trail is fully rebuilt via innerHTML by setBC()
     (quartett-overlay.js) on every navigation. #clearAllBtn is no longer a
     separate row/sibling next to it (that was the previous round's
     approach) — it's now appended as #breadcrumb's own LAST child by
     _updateClearButton() (quartett-overlay.js) every time the trail
     changes, so it reads as a genuine rightmost breadcrumb item rather
     than a boxed-off button beside the trail. */
  .breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 22px; border-bottom:1px solid var(--border-subtle); flex-shrink:0; font-family:var(--font-ui); font-size:.76rem; letter-spacing:.08em; color:var(--text-dim); }
  .breadcrumb span { cursor:pointer; transition:color .15s; }
  .breadcrumb span:hover { color:var(--accent-blue); }
  .breadcrumb .sep { color:var(--border-glow); }
  .breadcrumb .current { color:var(--text-primary); cursor:default; }
  /* Clear — red-tinted at rest (not just on hover) so "this resets things"
     reads at a glance. Deliberately NOT margin-left:auto (tried in an
     earlier round) — that pushed Clear all the way to the far right edge
     of the breadcrumb bar, away from the trail itself. It should instead
     sit on the LEFT side of the bar, immediately after the last crumb, and
     just be the rightmost of the actual items there — which is exactly
     what .breadcrumb's own left-aligned flex row (gap:8px, no
     justify-content override) already gives it as #breadcrumb's last
     child, with no extra margin needed.
     Selectors use #clearAllBtn (not just .clear-all-btn) so this reliably
     wins over the plain .sort-btn rule further down this file — same
     specificity (one class) would otherwise come down to source order,
     and .sort-btn is defined later, so it would silently win instead. */
  .clear-all-btn { flex-shrink: 0; }
  #clearAllBtn.clear-all-btn {
    color: #c62828; border-color: rgba(198,40,40,.4); background: rgba(198,40,40,.1);
  }
  #clearAllBtn.clear-all-btn:hover { color: #fff; background: #c62828; border-color: #c62828; }
  /* Play feature temporarily paused — hidden, not removed */
  .bc-play-btn { display: inline-flex; align-items: center; margin-left:6px; padding:2px 10px; font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.08em; color:var(--bg-base); background:var(--accent-cyan); border:none; border-radius:20px; cursor:pointer; transition:background .15s, transform .1s; vertical-align:middle; }
  .bc-play-btn:hover { background:var(--accent-blue); transform:scale(1.05); }
  /* Small title-card thumbnail in the breadcrumb, between "current" and
     the Play button (direct request, 2026-10-02 — see setBC's
     _bcTitleThumbUrl comment in quartett-overlay.js). Sized to the
     breadcrumb's own text/button scale rather than a full card-grid tile —
     just enough to recognize the set's cover art at a glance. Click opens
     the same lightbox the Extra Images panel's title-card box already
     uses. */
  .bc-title-thumb { display:inline-flex; align-items:center; margin-left:4px; line-height:0; }
  .bc-title-thumb img {
    height: 28px; width: auto; max-width: 46px; object-fit: cover;
    border-radius: 5px; border: 1px solid var(--border-subtle);
    cursor: pointer; transition: transform .15s ease, border-color .15s;
    vertical-align: middle;
  }
  .bc-title-thumb img:hover { transform: scale(1.15); border-color: var(--accent-blue); }
  /* Floating larger preview on hover, desktop only (2026-10-02, Round 36,
     direct request: "on desktop, hovering over bc-title-thumb will show us
     small image of that title card") — same shared-floating-element pattern
     _wireQtableHoverPreview/.qtable-hover-preview (database.js) already
     uses, scoped to its own class since this one is wired in
     quartett-overlay.js's setBC() and already knows its image URL directly
     (no per-grade lookup needed, unlike the qtable case) — see
     _bcWireThumbHoverPreview's own comment. Desktop/real-hover only, by
     direct request — no touch/tap fallback branch was asked for or added
     (the existing scale-up-on-hover treatment above already serves touch
     devices, which can't hover at all). */
  .bc-thumb-hover-preview {
    position: fixed; z-index: 9999; width: 150px; aspect-ratio: 63/100;
    background: var(--bg-card); border: 1px solid var(--border-glow); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4); overflow: hidden; pointer-events: none;
    opacity: 0; transition: opacity .12s ease;
    display: flex; align-items: center; justify-content: center;
  }
  .bc-thumb-hover-preview.show { opacity: 1; }
  .bc-thumb-hover-preview img { width: 100%; height: 100%; object-fit: contain; }
  /* Narrow/Expand — collapses same-name duplicate cards in results grids
     (search / country / category-filter / Advanced Search), see
     _updateNarrowButton() in quartett-overlay.js */
  .bc-narrow-btn { margin-left:6px; padding:2px 10px; font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.08em; color:var(--bg-base); background:var(--accent-blue); border:none; border-radius:20px; cursor:pointer; transition:background .15s, transform .1s; vertical-align:middle; }
  .bc-narrow-btn:hover { background:var(--accent-cyan); transform:scale(1.05); }

  /* COLLECTION GRID — portrait cards */
  .coll-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; padding:20px; }
  .coll-card { background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .22s, border-color .22s, box-shadow .22s; display:flex; flex-direction:column; }
  .coll-card:hover { transform:translateY(-4px); border-color:var(--accent-blue); box-shadow:0 8px 28px rgba(58,143,255,.12); }
  /* Portrait image — aspect ratio of a real Quartett card */
  /* Box ratio matches the real title-card scans (~0.63, measured directly off
     the live images) instead of a generic playing-card 5:7 (0.714) — with
     the old ratio + object-fit:cover, the box was proportionally wider than
     the actual images, so ~10% was being cropped off the bottom of every
     title card. object-fit:contain (instead of cover) is the actual fix:
     it guarantees the full image is always visible even for the small
     per-image ratio variance between scans, rather than relying on every
     title card matching one exact ratio. */
  .coll-card .cimg { width:100%; aspect-ratio:63/100; overflow:hidden; background:var(--bg-card); position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .coll-card .cimg img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
  .coll-card .cimg .cimg-fallback { font-size:2.5rem; color:var(--text-dim); }
  .coll-card .icon-body { padding:8px 12px 10px; display:flex; flex-direction:column; gap:3px; }
  .coll-card h3 { font-family:var(--font-ui); font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--text-primary); }
  .coll-card p { font-size:.7rem; color:var(--text-secondary); }
  .coll-card .cnt { font-family:var(--font-ui); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); margin-top:2px; }
  /* Collection cards (inside a selected year) — just the title image + name,
     no year/card-count line, so the name gets more room and a bigger size. */
  .coll-card--set h3 { font-size:.875rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Years-overview cards — bigger year number, sets/cards on one row
     (sets left, cards right) instead of two stacked lines. */
  .coll-card--year h3 { font-size:1.4rem; line-height:1.1; }
  .year-meta-row { display:flex; align-items:center; justify-content:space-between; font-family:var(--font-ui); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); margin-top:2px; }

  /* CARD GRID — Quartett layout: two super-columns of 4, rows by number */
  .card-grid {
    display: grid;
    /* Cap card columns so images don't balloon on ultra-wide screens */
    grid-template-columns: repeat(4, minmax(130px, 200px)) 32px repeat(4, minmax(130px, 200px));
    gap: 12px;
    padding: 20px;
    animation: fadeUp .3s ease;
    /* width:fit-content (2026-10-02, Round 35, direct bug report on a
       3440×1440 ultrawide monitor): a grid container's own box otherwise
       stretches to fill its parent's FULL width by default — same as
       display:block — regardless of how narrow its actual tracks end up
       being. On a normal/narrow screen the minmax(130px,200px) columns
       above already need most/all of the available width so this was
       invisible, but on an ultrawide screen there's real leftover space
       past the capped columns' right edge, and the grid's own (invisible,
       background-less) box quietly extended into it anyway. That mattered
       because .set-toggles-row/.extra-images-section/.qtable-section (see
       database.js) are plain siblings that center THEIR OWN content within
       their own full-width box — normally indistinguishable from "centered
       under the grid", but on this ultrawide box they visibly drifted
       toward screen-center while the actual (left-anchored, uncentered)
       card columns stayed on the left, exactly the "venture out" the user
       described. Shrinking this box to its own content's width lets those
       siblings measure it directly (see _matchCardGridWidth, database.js)
       and match it instead of guessing at a parallel copy of this same
       minmax() formula. */
    width: fit-content;
  }
  /* The spacer column between the two super-columns */
  .card-grid-divider { grid-column:5; grid-row:1/-1; }

  /* QUARTETT CARD */
  .qcard { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius); overflow:hidden; cursor:pointer; position:relative; transition:transform .3s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s, border-color .3s; display:flex; flex-direction:column; }
  .qcard::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 55%); pointer-events:none; border-radius:inherit; }
  .qcard:hover { transform:translateY(-6px) scale(1.03); box-shadow:0 16px 48px rgba(58,143,255,.25), 0 0 0 1px var(--accent-blue); border-color:var(--accent-blue); }

  /* aspect-ratio drives the height — no max-height needed (grid columns are already capped) */
  .qcard-img { width:100%; aspect-ratio:10/6.54; overflow:hidden; background:var(--bg-panel); position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .qcard-img img {
    position: absolute;
    /* Scale up so the full image is larger than the container, then we shift to show only the crop region */
    width:  calc(100% / 0.8787);   /* inverse of visible width fraction */
    height: calc(100% / 0.3495);   /* inverse of visible height fraction */
    object-fit: fill;
    display: none;
    /* Shift: move left by left-crop%, move up by top-crop% of the scaled image */
    left: calc(-6.36%  / 0.8787);
    top:  calc(-12.97% / 0.3495);
    transition: none;
  }
  .qcard-img img.loaded { display:block; }
  .qcard:hover .qcard-img img { transform: scale(1.04); transform-origin: center center; }
  .qcard-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; font-size:2rem; color:var(--text-dim); gap:4px; position:absolute; inset:0; }
  .qcard-placeholder span { font-family:var(--font-ui); font-size:.55rem; letter-spacing:.15em; color:var(--text-dim); }
  /* "Still loading" placeholder state — toggled by loader.js's
     loadImgForGrade()/loadImgForMiniGrade() for exactly as long as an image
     is actually in flight (see their header comment). Reuses the same
     loadingPulse animation the Database/Advanced Search loading screens use
     elsewhere, and hides the "No Image" text so a slow-loading image never
     reads as a missing one. Shared across every placeholder flavor
     (.qcard-placeholder here, .pholder for the modal/Card of the Day below)
     since they're all driven by the same two loader.js functions. */
  .qcard-placeholder.ph-loading, .pholder.ph-loading { animation: loadingPulse 1.6s ease-in-out infinite; }
  .qcard-placeholder.ph-loading span, .pholder.ph-loading span { display:none; }

  /* grade top-left, country top-right */
  .grade-badge { position:absolute; top:7px; left:7px; z-index:2; font-family:var(--font-display); font-size:1rem; color:var(--accent-gold); text-shadow:var(--glow-gold); background:rgba(7,8,15,.8); padding:1px 7px; border-radius:4px; border:1px solid rgba(240,192,64,.25); }
  .qcard-set-label { display:flex; justify-content:space-between; align-items:center; width:100%; margin-bottom:2px; }
  .qcard-set-name { font-family:var(--font-ui); font-size:.68rem; letter-spacing:.06em; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:72%; }
  .qcard-set-year { font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em; color:var(--accent-gold); opacity:.8; flex-shrink:0; }
  .country-badge { position:absolute; top:7px; right:7px; z-index:2; font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.1em; padding:2px 7px; border-radius:4px; background:rgba(7,8,15,.8); border:1px solid var(--border-glow); color:var(--accent-cyan); display:none; }

  .qcard-body { padding:9px 10px 10px; flex:1; background:var(--bg-card); display:flex; flex-direction:column; }
  /* flex-wrap:wrap removed 2026-10-02 (part of the "32 cards must fit with
     no scroll" fix below) — a long category label (e.g. "HIGHSPEED
     REKORDVERDÄCHTIG") used to wrap onto a second line at narrow card
     widths, silently making THAT card ~14-16px taller than its neighbors
     and making every row's real height unpredictable — exactly the kind of
     per-card variance that makes it hard to reliably fit N rows in a fixed
     vertical budget. Single line + ellipsis instead, same as every other
     truncated label in this app (.coll-card h3, .qcard-set-name, etc.) —
     the full category is still one tap away in the card modal. */
  .qcard-body-row { display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin-bottom:2px; }
  .qcard-cat { font-family:var(--font-ui); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-secondary); flex:1 1 0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Round 102: used directly inside the (column-flex) .qcard-body — advanced search / category / country / map results — flex:1 1 0 made the
     line collapse to height 0 whenever no card in its grid row had a 2-line name (spare height was what it grew into). Fixed size there. */
  .qcard-body > .qcard-cat { flex:0 0 auto; }
  .qcard-grade { font-family:var(--font-display); font-size:.85rem; color:var(--accent-gold); text-shadow:var(--glow-gold); letter-spacing:.02em; flex-shrink:0; margin-left:auto; }
  /* Capped to 2 lines (added 2026-10-02, same "32 cards must fit with no
     scroll" fix as .qcard-cat above) — a longer car name (e.g. "Audi R8
     Coupé V10 Performance", "Italdesign Automobili Speciali Zerouno") was
     wrapping to a full 3 lines at this card width with no limit at all,
     which — since a CSS grid row's height is set by its TALLEST cell — made
     that one long name silently inflate the height of its ENTIRE row,
     including every short-named card sharing it. That's what made row
     height so unpredictable (confirmed by measuring a real set: one row of
     short names stayed compact while the very next row, with one long name
     mixed in, grew by 30px+ for every card in it). The standard
     `-webkit-line-clamp` ellipsis technique (supported in every browser this
     app targets) caps it at a firm, consistent 2 lines — the rare name that
     still doesn't fully fit stays one tap away in the card modal, same
     trade-off `.qcard-cat`'s own truncation above already makes. */
  .qcard-name { font-family:var(--font-ui); font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--text-primary); line-height:1.15; margin-bottom:7px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .qcard-stats { display:none; }
  .srow { display:flex; justify-content:space-between; align-items:center; padding:2px 0; border-bottom:1px solid rgba(90,110,200,.07); font-size:.65rem; }
  .srow:last-child { border:none; }
  .skey { color:var(--text-dim); font-family:var(--font-ui); letter-spacing:.05em; }
  .sval { color:var(--accent-cyan); font-weight:600; font-family:var(--font-ui); }
  .sunit { color:var(--text-dim); font-size:.58rem; margin-left:2px; }

  /* COMPACT CARD GRID — short-viewport fix (added 2026-10-02, direct bug
     report with a photo: on a shorter desktop screen a 32-card quartett's
     4th row was cut off, needing a scroll the user felt desktop visitors
     shouldn't have to do). Gated on viewport HEIGHT, not width — this is a
     vertical-fit problem, not a narrow-screen one, and it was real: measured
     against a real 32-card set (2024/High Speed, the one in the report),
     1920×1080 and similarly-tall screens already fit 4 rows with no scroll,
     but several very common desktop/laptop sizes did not — 1600×900,
     1536×864, 1440×900, 1366×768, 1280×720. 1000px covers all of those
     (and a safety margin above them) while leaving genuinely tall screens
     (1080p+) exactly as they already were. Shrinks three independent things
     together — column width (shrinks the image proportionally, no aspect-
     ratio/crop-math change, see .qcard-img's own comment on why that math
     is NOT touched lightly), grid gap/padding, and the body's own
     padding/margins — rather than any single one alone, since no single
     lever gets there without either shrinking the image to an illegibly
     small sliver or the text to unreadable sizes. Tuned empirically with
     Playwright against that same real set at the narrowest common case in
     range (1280×720) until all 4 rows actually fit with zero scroll. */
  @media (max-height: 1000px) {
    .card-grid {
      grid-template-columns: repeat(4, minmax(76px, 160px)) 16px repeat(4, minmax(76px, 160px));
      gap: 5px;
      padding: 6px;
    }
    .qcard-body { padding:3px 5px 4px; }
    .qcard-body-row { margin-bottom:1px; }
    .qcard-cat { font-size:.52rem; }
    .qcard-grade { font-size:.72rem; }
    .qcard-name { font-size:.72rem; line-height:1.1; margin-bottom:1px; }
    .breadcrumb { padding:4px 22px; }
    .db-toolbar { padding:6px 40px; }
  }

  /* EMPTY STATE */
  .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:300px; color:var(--text-secondary); gap:10px; font-family:var(--font-ui); }
  .empty-state .big { font-size:2.5rem; }
  .empty-state h3 { font-size:1.05rem; letter-spacing:.08em; color:var(--text-primary); }
  .empty-state p { font-size:.8rem; color:var(--text-dim); text-align:center; max-width:260px; }

  /* Database "still loading" screen (renderLoadingState(), database.js) —
     shown before the auto-triggered GitHub fetch (loader.js, always
     re-runs on page load — see report.js) has produced any data yet.
     Reuses .empty-state's centering/spacing; the icon pulses with the same
     loadingPulse animation the Home stat tiles use while loading, and an
     indeterminate sliding bar underneath signals "still working" without
     needing a real byte-accurate progress percentage wired through the
     tree-fetch → stub-creation → search-index multi-step async load. */
  .db-loading-state .big { animation: loadingPulse 1.6s ease-in-out infinite; }
  .db-loading-bar { width:220px; max-width:70%; height:6px; border-radius:100px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:2px; }
  .db-loading-bar-fill { width:40%; height:100%; border-radius:100px; background:linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)); animation: dbLoadingSlide 1.4s ease-in-out infinite; }
  @keyframes dbLoadingSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
  }

  /* In-app-browser hint (theme.js's _isInAppBrowser()) — a small courtesy
     note shown only to visitors detected as being inside Messenger's/
     Instagram's/Facebook's own embedded browser, on the two loading screens
     most likely to make that slowness noticeable (the Database "still
     loading" screen above, and Card of the Day's skeleton, trivia.js).
     Deliberately subtle (dim color, small text) — informative, not alarming,
     since the page still works fine, it's just slower than usual. */
  .in-app-browser-hint { margin:6px auto 0; font-size:.68rem; color:var(--text-dim); text-align:center; max-width:240px; }

  /* MODAL */
  .modal-overlay { display:none; position:fixed; inset:0; z-index:2000; background:rgba(7,8,15,.92); backdrop-filter:blur(14px); align-items:center; justify-content:center; padding:20px; }
  .modal-overlay.open { display:flex; animation:fadeIn .22s ease; }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  /* Nav arrows positioned just outside the modal box edges */
  .modal-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(15,18,40,.9); border:1px solid var(--border-glow); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-primary); font-size:1.4rem; transition:background .2s, border-color .2s, opacity .2s; z-index:2100; user-select:none; }
  .modal-nav:hover { background:rgba(58,143,255,.3); border-color:var(--accent-blue); }
  .modal-nav.prev { left:-60px; }
  .modal-nav.next { right:-60px; }
  .modal-nav.dim { opacity:0.25; pointer-events:none; }
  /* Wrapper needed so arrows can be positioned relative to the modal box */
  .modal-wrapper { position:relative; display:flex; align-items:center; max-width:880px; width:100%; }
  /* height starts at this fallback for the very first paint before modal.js's
     fit-to-content pass (see _renderModal) sets an explicit inline height —
     that pass is what actually determines the box's real height per-card. */
  .modal-box { background:var(--bg-card); border:1px solid var(--border-glow); border-radius:var(--radius-lg); width:100%; box-shadow:0 32px 80px rgba(0,0,0,.6), var(--glow-blue); overflow:hidden; animation:slideUp .28s cubic-bezier(.2,.8,.3,1); display:flex; align-items:stretch; position:relative; height:520px; }
  @keyframes slideUp { from{transform:translateY(28px) scale(.96)} to{transform:none} }
  /* The modal box's height is fixed per viewport size (see modal.js's
     fit-to-content pass — it only ever targets one height per window size,
     never a per-card one, so the box never resizes as you navigate between
     cards). 325x520 was chosen to match the real card scans' ~0.63 aspect
     ratio (same ratio .coll-card's cover image uses), so object-fit:contain
     shows the full, uncropped scan with little to no letterbox in the
     common case — object-fit:cover was tried instead (filling the column
     edge-to-edge) but crops real content off the sides/top whenever a
     card's own scan resolution doesn't happen to match this box's ratio,
     which loses readable text on the card (chassis/motor/driver info) —
     unacceptable for a reference archive. Clicking the image still opens
     the full-size scan in the lightbox either way (#imgLightbox also uses
     object-fit:contain). */
  .modal-img { width:325px; flex-shrink:0; background:#1a1a1a; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .modal-img img { width:100%; height:100%; object-fit:contain; display:none; }
  .modal-img img.loaded { display:block; }
  .modal-img .pholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:3.5rem; color:var(--text-dim); gap:6px; }
  .modal-img .pholder span { font-family:var(--font-ui); font-size:.65rem; letter-spacing:.15em; color:var(--text-dim); }
  .modal-close { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.08); border:1px solid var(--border-subtle); border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); font-size:.9rem; transition:background .2s, color .2s; z-index:10; }
  .modal-close:hover { background:rgba(255,255,255,.15); color:var(--text-primary); }
  .modal-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; margin-bottom:calc(16px * var(--msp, 1)); }
  .modal-meta-grid .meta-item { display:flex; flex-direction:column; gap:2px; }
  .modal-meta-grid .meta-label { font-family:var(--font-ui); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); }
  .modal-meta-grid .meta-val   { font-family:var(--font-ui); font-size:.95rem; font-weight:700; letter-spacing:.06em; color:var(--text-secondary); text-transform:uppercase; }
  .modal-meta-grid .meta-val--link { cursor:pointer; color:var(--accent-blue); transition:color .15s, text-shadow .15s; }
  .modal-meta-grid .meta-val--link:hover { color:var(--text-primary); text-shadow:0 0 12px var(--accent-blue); }
  /* Country flag icon (direct request, 2026-09-30) prepended to the Country
     meta-val's text — .fi/.fi-dual already size themselves off the
     surrounding font-size (see the top-of-file comment on .fi), this just
     adds breathing room before the name and nudges it to sit on the
     uppercase text's baseline rather than the lowercase one. */
  .modal-meta-grid .meta-val .fi,
  .modal-meta-grid .meta-val .fi-dual { margin-right:.4em; vertical-align:-0.15em; }
  /* Tuning factory logo (direct request, 2026-09-30) — see
     tuningLogoHTML()/tuningFactorySlug() in state.js. Sized by height, not
     width, since these are real third-party brand logos the user adds by
     hand (vendor/tuning-logos/<slug>.svg) with their own native aspect
     ratios — unlike the flag strips, nothing here should force-stretch a
     logo's proportions, so object-fit:contain (not the flags' "none") is
     correct here. max-width keeps an unusually wide logo from overrunning
     the meta-grid column. <img onerror> (see tuningLogoHTML) hides this
     element entirely for any factory whose file hasn't been added yet, so
     it never shows a broken-image glyph. */
  /* 2026-10-01's 45°-tilt (transform:rotate(-45deg)) was reverted 2026-10-02,
     same day it shipped — direct request: the user will rotate the source
     SVG files themselves instead of having CSS tilt them. No transform here
     now; logos render at their native orientation. */
  .tuning-logo { height:1.3em; width:auto; max-width:2.6em; object-fit:contain; vertical-align:-0.25em; margin-right:.4em; }
  /* .modal-body is now a flex column: a scrollable content area
     (.modal-body-scroll) plus an optional footer (.modal-body-footer,
     currently just the "Show Quartett" button) pinned to the very bottom of
     the modal window regardless of how much content scrolls above it. */
  .modal-body { flex:1; display:flex; flex-direction:column; padding:0; overflow:hidden; }
  /* --msp (spacing) and --mft (font) are the two knobs modal.js's fit-to-
     content pass turns down — spacing first, then font size — when a
     card's content (extra info boxes, more stat rows) would otherwise need
     more room than the modal box has. Both default to 1 (no compaction);
     see the "Fit content without ever needing to scroll" block in
     _renderModal. overflow-y:auto stays here purely as a last-resort safety
     net for the rare case even the compaction floor isn't enough. */
  .modal-body-scroll { flex:1; min-height:0; overflow-y:auto; padding:calc(28px * var(--msp, 1)) calc(32px * var(--msp, 1)) calc(12px * var(--msp, 1)) calc(44px * var(--msp, 1)); }
  /* display:flex + gap so a second button ("Find Similar", added 2026-10-02
     Round 36) sits beside "Show Quartett" with breathing room instead of
     the two running together edge-to-edge; wraps to its own line on a
     narrow modal rather than overflowing. Each button's own width:100%
     inline style (set in modal.js) still makes a single button fill the
     row exactly as before. */
  .modal-body-footer { flex-shrink:0; padding:calc(12px * var(--msp, 1)) 32px calc(24px * var(--msp, 1)) 44px; border-top:1px solid var(--border-subtle); display:flex; flex-direction:column; gap:8px; }
  .modal-body-footer .mf-row { display:flex; gap:8px; }
  .modal-body-footer .mf-row:empty { display:none; }
  .modal-body-footer .mf-row .sort-btn { flex:1 1 0; width:auto; min-width:0; }
  .modal-body-footer.mf-empty { display:none; }
  .modal-title { font-family:var(--font-display); font-size:2.1rem; letter-spacing:.03em; line-height:1; color:var(--text-primary); margin-bottom:calc(6px * var(--msp, 1)); white-space:nowrap; overflow:hidden; }
  /* Font-size is NOT scaled by --mft here — modal.js's width-shrink pass
     already sets a per-box inline font-size (to keep each info line on one
     row), and the height-fit pass layers its own multiplier on top of that
     inline value directly in JS rather than fighting it via CSS. */
  .modal-info-box { color:var(--text-secondary); font-size:.82rem; font-style:italic; margin-bottom:calc(8px * var(--msp, 1)); padding:calc(6px * var(--msp, 1)) calc(10px * var(--msp, 1)); background:rgba(58,143,255,.05); border-left:2px solid var(--accent-blue); border-radius:0 6px 6px 0; line-height:1.4; white-space:nowrap; overflow:hidden; }
  /* A card missing this particular info field still gets the box (so the
     section's total height never depends on which/how many of the three a
     card happens to have) — just hidden, so it reads as empty space rather
     than a stray highlighted box with nothing in it. visibility:hidden (not
     display:none) is what keeps its height/margin in the layout. */
  .modal-info-box--empty { visibility:hidden; }
  .modal-divider { height:1px; background:var(--border-subtle); margin:calc(16px * var(--msp, 1)) 0; }
  /* Single column — stat name on the left, value on the right, like the
     real printed card's stat rows — instead of a 2-column grid of taller
     boxes. */
  .modal-stats-grid { display:flex; flex-direction:column; gap:calc(6px * var(--msp, 1)); }
  .mstat { background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:8px; padding:calc(7px * var(--msp, 1)) 14px; box-sizing:border-box; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:14px; }
  .mstat .key { font-family:var(--font-ui); font-size:calc(.72rem * var(--mft, 1)); letter-spacing:.16em; text-transform:uppercase; color:var(--text-primary); margin-bottom:0; white-space:nowrap; }
  .mstat .val { font-family:var(--font-ui); font-size:calc(1.05rem * var(--mft, 1)); font-weight:700; color:var(--accent-cyan); white-space:nowrap; text-align:right; }
  .mstat .unit { font-size:.7rem; color:var(--text-secondary); margin-left:3px; }

  /* OTHER SECTIONS */
  .placeholder-section { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100vh - var(--nav-h)); text-align:center; padding:60px 24px; }
  .placeholder-section h2 { font-family:var(--font-display); font-size:3rem; margin-bottom:12px; }
  .placeholder-section p { color:var(--text-secondary); max-width:380px; }
  .coming-badge { font-family:var(--font-ui); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent-purple); border:1px solid rgba(139,92,246,.3); padding:6px 16px; border-radius:100px; margin-bottom:22px; background:rgba(139,92,246,.05); }

  ::-webkit-scrollbar { width:5px; }
  ::-webkit-scrollbar-track { background:var(--bg-deep); }
  ::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:4px; }

  /* IMAGE LIGHTBOX */
  #imgLightbox {
    display: none; position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,.94); align-items: center; justify-content: center;
    cursor: zoom-out;
  }
  #imgLightbox.open { display: flex; animation: fadeIn .18s ease; }
  #imgLightbox img {
    max-width: 90vw; max-height: 90vh;
    object-fit: contain; border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0,0,0,.8);
    pointer-events: none;
  }
  /* Desktop: cap at 2× modal-img width (~650px) */
  @media(min-width:681px) {
    #imgLightbox img { max-width: 650px; max-height: 85vh; }
  }
  /* Fullscreen variant (added 2026-09-29, opened via openLightbox(src,
     {fullscreen:true}) — used for the "Merged" whole-set composite image,
     which the normal ~650px desktop cap above would otherwise shrink far
     more than a single card-sized reference image warrants). Higher
     specificity (#id.class vs #id) wins over the desktop rule above
     regardless of source order. */
  #imgLightbox.lightbox-fullscreen img {
    max-width: 96vw; max-height: 96vh;
  }
  /* Lightbox caption (added 2026-09-30) — names which quartett a fully-
     opened card image is from (e.g. "Car Tuning 2018"), clickable to jump
     there. Fixed to the viewport rather than flowing next to the image in
     #imgLightbox's own flex row — a caption glued to the image's own edge
     would land in a different spot for every image's aspect ratio (and get
     pushed off-screen entirely for a tall image already filling ~90vh);
     pinning it to the bottom of the viewport instead keeps it in the same
     reachable spot regardless. Hidden (inline style, index.html) whenever
     openLightbox() (ui.js) is called with no caption — the reference-image/
     merged-image panels (database.js) still open the plain lightbox with
     none, exactly as before this existed. */
  .lightbox-caption {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 4001; max-width: 88vw;
    padding: 7px 16px; border-radius: 100px;
    background: rgba(15,18,40,.82); border: 1px solid rgba(255,255,255,.12);
    font-family: var(--font-ui); font-size: .78rem; letter-spacing: .04em;
    color: var(--text-secondary); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: default;
  }
  .lightbox-caption--link {
    cursor: pointer; color: var(--accent-cyan); border-color: rgba(0,229,255,.35);
    transition: background .18s, color .18s, border-color .18s;
  }
  .lightbox-caption--link:hover {
    background: rgba(0,229,255,.14); color: #fff; border-color: var(--accent-cyan);
  }
  @media(max-width:680px) {
    .lightbox-caption { bottom: 14px; font-size: .72rem; padding: 6px 13px; max-width: 92vw; }
  }
  /* Modal image is clickable */
  .modal-img { cursor: zoom-in; }
  /* Report Bug temporarily hidden (not removed) — see .settings-report-btn */
  .settings-report-btn {
    display:none !important;
    align-items:center; gap:8px; width:100%;
    font-family:var(--font-ui); font-size:.72rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    padding:9px 14px; margin-top:4px; border-radius:8px;
    border:1px solid rgba(139,92,246,.35);
    background:rgba(139,92,246,.1); color:var(--accent-purple);
    cursor:pointer; transition:all .2s; text-align:left;
  }
  .settings-report-btn:hover { background:rgba(139,92,246,.22); border-color:var(--accent-purple); color:var(--text-primary); }
  .settings-toggle-row {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 14px; margin-top:4px; border-radius:8px;
    border:1px solid var(--border-subtle); background:rgba(255,255,255,.03);
    cursor:pointer; transition:background .15s;
  }
  .settings-toggle-row:hover { background:rgba(255,255,255,.07); }
  .settings-toggle-label { flex:1; font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); }
  .settings-toggle-check { width:16px; height:16px; accent-color:var(--accent-blue); cursor:pointer; flex-shrink:0; }

  /* Collection completion — owned-sets count + a tiny progress bar, right
     under "Show Only My Collection" (direct request). Counts SETS, not
     individual cards, same as the rest of My Collection (isSetOwned() etc,
     collection.js) — there's no per-card ownership concept in this feature.
     Kept deliberately small/quiet (no heading label of its own) rather than
     another full settings-toggle-row, since it's a readout, not a control. */
  .collection-progress { padding:6px 14px 2px; display:flex; align-items:center; gap:8px; }
  .collection-progress-bar { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
  .collection-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)); transition:width .25s ease; }
  .collection-progress-text { font-family:var(--font-ui); font-size:.62rem; font-weight:600; letter-spacing:.06em; color:var(--text-dim); white-space:nowrap; }

  /* Export/Import My Collection — a small side-by-side button pair, distinct
     from the toggle rows above (these aren't on/off settings, they trigger
     an action) and from .settings-report-btn (currently hidden). */
  .settings-mini-btn-row { display:flex; gap:8px; padding:4px 8px 0; margin-top:4px; }
  .settings-mini-btn {
    flex:1; font-family:var(--font-ui); font-size:.66rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    padding:7px 8px; border-radius:7px;
    border:1px solid var(--border-subtle); background:rgba(255,255,255,.03);
    color:var(--text-secondary); cursor:pointer; transition:all .15s; text-align:center;
  }
  .settings-mini-btn:hover { border-color:var(--accent-blue); color:var(--accent-blue); background:rgba(58,143,255,.08); }

  .report-overlay {
    display: none; position: fixed; inset: 0; z-index: 3000;
    background: rgba(7,8,15,.85); backdrop-filter: blur(10px);
    align-items: center; justify-content: center;
  }
  .report-overlay.open { display: flex; animation: fadeIn .2s ease; }
  .report-box {
    background: var(--bg-card); border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg); padding: 28px 32px;
    width: 100%; max-width: 420px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), var(--glow-blue);
    animation: slideUp .25s cubic-bezier(.2,.8,.3,1);
  }
  .report-box h3 {
    font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .05em;
    color: var(--text-primary); margin-bottom: 20px;
  }
  .report-step { display: none; }
  .report-step.active { display: block; }
  .report-field { margin-bottom: 14px; }
  /* .report-field-heading (2026-10-02, direct request, item 6 — accessibility
     console warning fix): same visual rule as .report-field label, but for
     a handful of section headings above a group of controls (e.g. Advanced
     Search's "Quartett Numbers") that don't map to one single form field.
     Using <label> with no `for` there was literally a "No label associated
     with a form field" devtools violation — see index.html's asNumbersGrid
     comment for the full rationale. */
  .report-field label, .report-field-heading {
    display: block; font-family: var(--font-ui); font-size: .68rem;
    letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim);
    margin-bottom: 5px;
  }
  /* input[type=number] added alongside [type=text] — direct bug report,
     2026-10-02 (Round 33, item 11): asYearFrom/asYearTo/asStatMin/asStatMax
     (all type="number") were never matched by this selector, so they fell
     back to the browser's own default white input styling instead of the
     app's theme, the one visible "white box" among otherwise fully themed
     Advanced Search fields. */
  .report-field select, .report-field textarea, .report-field input[type=text], .report-field input[type=number] {
    width: 100%; background: var(--bg-panel);
    border: 1px solid var(--border-subtle); border-radius: 7px;
    color: var(--text-primary); font-family: var(--font-body); font-size: .85rem;
    padding: 8px 11px; outline: none; transition: border-color .2s;
    appearance: none; box-sizing: border-box;
  }
  .report-field select:focus, .report-field textarea:focus, .report-field input[type=text]:focus, .report-field input[type=number]:focus { border-color: var(--accent-blue); }
  .report-field textarea { resize: vertical; min-height: 72px; }
  .report-actions { display: flex; gap: 10px; margin-top: 20px; }
  .report-btn-primary {
    flex: 1; font-family: var(--font-ui); font-weight: 700; font-size: .82rem;
    letter-spacing: .12em; text-transform: uppercase; padding: 10px;
    border-radius: 7px; border: none;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
    color: #fff; cursor: pointer;
    box-shadow: 0 4px 16px rgba(139,92,246,.35); transition: opacity .2s;
  }
  .report-btn-primary:hover { opacity: .85; }
  .report-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
  .report-btn-secondary {
    font-family: var(--font-ui); font-weight: 600; font-size: .82rem;
    letter-spacing: .1em; text-transform: uppercase; padding: 10px 18px;
    border-radius: 7px; border: 1px solid var(--border-subtle);
    background: transparent; color: var(--text-secondary); cursor: pointer;
    transition: all .2s;
  }
  .report-btn-secondary:hover { border-color: var(--border-glow); color: var(--text-primary); }
  /* Review panel */
  .report-review {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 4px;
  }
  .report-review-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 5px 0;
    border-bottom: 1px solid rgba(90,110,200,.08); font-size: .8rem;
  }
  .report-review-row:last-child { border-bottom: none; }
  .report-review-row .rr-key {
    font-family: var(--font-ui); font-size: .64rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--text-dim); white-space: nowrap; flex-shrink: 0;
  }
  .report-review-row .rr-val {
    font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
    color: var(--text-secondary); text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 65%;
  }
  .report-review-row .rr-val.rr-desc {
    white-space: normal; text-align: right; font-weight: 400; font-size: .78rem; color: var(--text-primary);
  }
  .report-status { font-family: var(--font-ui); font-size: .78rem; margin-top: 10px; text-align: center; min-height: 1.2em; letter-spacing: .05em; }

  /* ── ADVANCED SEARCH MODAL ── */
  .advsearch-overlay {
    display: none; position: fixed; inset: 0; z-index: 3000;
    background: rgba(7,8,15,.85); backdrop-filter: blur(10px);
    align-items: center; justify-content: center; padding: 24px; gap: 16px;
  }
  .advsearch-overlay.open { display: flex; animation: fadeIn .2s ease; }
  /* Advanced Search Help image panel (2026-10-05 request) — a sibling of
     .advsearch-box, placed BEFORE it in the DOM so flex's default row
     direction puts it on the left. Hidden by default (toggled by the HELP
     button — see _asToggleHelpImage in advsearch.js); the overlay's own
     `gap` above only takes effect once this becomes a second flex item.
     .modal-close (absolute-positioned) is reused for its "✕" button, hence
     `position:relative` here. */
  .advsearch-help-image-panel {
    position: relative; background: var(--bg-card); border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg); padding: 16px; display: flex;
    align-items: center; justify-content: center;
    max-width: 300px; max-height: 88vh; flex-shrink: 0;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), var(--glow-blue);
    animation: slideUp .25s cubic-bezier(.2,.8,.3,1);
  }
  .advsearch-help-image-panel img { max-width: 100%; max-height: 100%; border-radius: 10px; display: block; }
  .advsearch-box {
    background: var(--bg-card); border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg); width: 100%; max-width: 640px;
    max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), var(--glow-blue);
    animation: slideUp .25s cubic-bezier(.2,.8,.3,1);
  }
  .advsearch-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 28px 0; flex-shrink: 0;
  }
  .advsearch-header h3 {
    font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .05em;
    color: var(--text-primary);
  }
  .advsearch-body { overflow-y: auto; padding: 18px 28px 4px; flex: 1 1 auto; min-height: 0; }
  /* Advanced Search's loading screen — direct request, Round 33 follow-up,
     item 2, 2026-10-02: "add loading visualization to advanced search the
     same way as we have with database loading" — same visual language as
     the Database section's own "still loading" screen (.db-loading-state
     above: a pulsing icon + a bar underneath). Also applied to Advanced
     Sort's #advLoadStatus (advfilter.js) for the same reason — both show
     the exact same "done / total collections" text for the exact same
     underlying hydration call (_advLoadFullDatabase), so leaving one
     plain-text and the other animated would read as an inconsistency
     rather than a deliberate choice. UNLIKE the Database screen's bar
     (deliberately indeterminate — no real progress numbers available
     there, see that comment above), this one IS driven by real numbers:
     _advLoadFullDatabase's onProgress callback already reports actual
     done/total counts, so .as-loading-bar-fill's width is a real
     percentage (a width transition, not the Database screen's infinite
     CSS slide animation). */
  .advsearch-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font-ui); font-size: .82rem; color: var(--text-secondary);
    text-align: center; padding: 30px 10px;
  }
  .advsearch-loading .as-loading-icon, #advLoadStatus .as-loading-icon {
    font-size: 2.2rem; animation: loadingPulse 1.6s ease-in-out infinite;
  }
  .as-loading-bar {
    width: 220px; max-width: 80%; height: 6px; border-radius: 100px;
    background: rgba(255,255,255,.08); overflow: hidden; margin-top: 2px;
  }
  .as-loading-bar-fill {
    width: 0%; height: 100%; border-radius: 100px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    transition: width .3s ease;
  }
  .advsearch-grid {
    /* minmax(0, 1fr), NOT bare 1fr (== minmax(auto, 1fr)) — a bare 1fr
       track's minimum is its item's own min-content size, so a wide-enough
       item (Row 2's Year group, once it gained fixed-width dropdowns
       alongside its inputs) grows the WHOLE TRACK to fit instead of
       shrinking/wrapping inside it, blowing the grid out past the modal
       box entirely. Found via Playwright at 390px: .report-field measured
       554px wide inside a 304px grid. 0 as the floor forces children to
       actually respect the track width instead. */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px;
  }
  .advsearch-span2 { grid-column: 1 / -1; }
  .advsearch-inline { display: flex; align-items: center; gap: 8px; }
  .advsearch-inline input { min-width: 0; flex: 1 1 0; }
  .advsearch-inline select {
    background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 7px;
    color: var(--text-primary); font-family: var(--font-body); font-size: .85rem;
    padding: 8px 9px; outline: none; appearance: none; box-sizing: border-box;
    min-width: 0; flex-shrink: 0; max-width: 40%;
  }
  .advsearch-inline select:focus { border-color: var(--accent-blue); }
  .advsearch-dash { color: var(--text-dim); flex-shrink: 0; }
  /* Row 5's Country/Tuning checkbox multiselect (replaced a plain native
     <select>, 2026-10-xx direct follow-ups — see advsearch.js's
     _asBuildCountryTuningOptions for the full rationale). The trigger button
     reuses .advsearch-inline select's own look (same background/border/
     radius/font) so swapping the control doesn't change Row 5's appearance
     at a glance; the panel below it is a small floating card, same
     background/border/radius as the rest of this modal's panels
     (.advsearch-help-image-panel), positioned absolute so it doesn't push
     any other row down when open. */
  .advsearch-multiselect { position: relative; flex-shrink: 0; max-width: 40%; min-width: 0; }
  .advsearch-multiselect-trigger {
    width: 100%; text-align: left;
    background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 7px;
    color: var(--text-primary); font-family: var(--font-body); font-size: .85rem;
    padding: 8px 9px; outline: none; cursor: pointer; box-sizing: border-box;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: border-color .15s;
  }
  .advsearch-multiselect-trigger:hover,
  .advsearch-multiselect-trigger:focus { border-color: var(--accent-blue); }
  /* Small caret so the trigger still reads as "opens a dropdown" the way a
     native <select> would, even though it's a plain <button> now. */
  .advsearch-multiselect-trigger::after {
    content: '▾'; float: right; color: var(--text-dim); margin-left: 6px;
  }
  .advsearch-multiselect-panel {
    display: none;
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
    width: max(220px, 100%); max-width: min(280px, 90vw);
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    padding: 8px; box-sizing: border-box;
  }
  .advsearch-multiselect-panel.open { display: block; }
  .advsearch-multiselect-toolbar { display: flex; gap: 6px; margin-bottom: 6px; }
  .advsearch-multiselect-toolbar .report-btn-secondary { padding: 5px 10px; font-size: .64rem; flex: 1 1 0; }
  .advsearch-multiselect-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
  .advsearch-multiselect-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; cursor: pointer; user-select: none;
    transition: background .15s;
  }
  .advsearch-multiselect-item:hover { background: rgba(255,255,255,.05); }
  .advsearch-multiselect-item input { accent-color: var(--accent-blue); cursor: pointer; margin: 0; flex-shrink: 0; }
  .advsearch-multiselect-item span {
    font-family: var(--font-body); font-size: .82rem; color: var(--text-secondary);
    white-space: normal; word-break: break-word;
  }
  /* #asStatSelect now shares one .advsearch-inline row with asStatMin/Max
     (direct request, item 10, 2026-10-02 — previously the select had the
     whole row to itself with Min/Max on their own line below). Given a
     fixed width rather than the generic 40%-cap: stat names run longer than
     a year ("— any —"/a 4-digit year), so a %-based cap would either crowd
     out the two number inputs on a narrow modal or look oddly huge on a
     wide one; a fixed width wide enough for most stat labels (ellipsizing
     the rare very long one) leaves Min/Max a consistent, legible width
     either way. */
  #asStatSelect {
    flex: 0 0 180px; max-width: 180px;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  }
  /* Row 2 (Collection+dropdown / Year From-To+dropdowns) and Row 3's
     Separate-mode Info Left/Right/Image boxes — a flex row of equal-ish
     groups that wraps to stacked full-width groups once narrow (mobile's
     single-column .advsearch-grid, or Row 3's three-way split). */
  .advsearch-row { display: flex; gap: 16px; flex-wrap: wrap; }
  .advsearch-row .advsearch-group { flex: 1 1 200px; min-width: 160px; }
  .advsearch-row .advsearch-group label { margin-bottom: 5px; }
  /* #asInfoSeparateWrap's THREE Left/Right/Image groups — direct bug report,
     item 1, 2026-10-02: flex-wrap decides how many items fit a line using
     each item's flex-basis (200px here), not its shrunk-down size, so at
     the modal's ~584px content width two 200px groups (plus one 16px gap)
     fit (416px) but a third doesn't (632px total) and wraps alone onto its
     own full-width line — even though all three would easily fit once
     shrunk. A smaller flex-basis (own, higher-specificity rule so it wins
     over the generic one above) keeps all three considered together:
     3×170px + 2×16px gaps = 542px, comfortably under ~584px. */
  #asInfoSeparateWrap.advsearch-row .advsearch-group { flex: 1 1 170px; min-width: 140px; }
  /* Row 3 (Card Info) and Row 5 (Country/Tuning) — group label on the left,
     the Combine/Separate or Country/Tuning mode toggle on the right. */
  .advsearch-row-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
  .advsearch-row-header label { margin-bottom: 0; }
  .advsearch-segmented { display: flex; border: 1px solid var(--border-subtle); border-radius: 100px; overflow: hidden; flex-shrink: 0; }
  .advsearch-seg-btn {
    font-family: var(--font-ui); font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 12px; border: none; background: transparent; color: var(--text-dim); cursor: pointer;
    transition: background .18s, color .18s;
  }
  .advsearch-seg-btn.on { background: rgba(58,143,255,.15); color: var(--accent-blue); }
  .advsearch-seg-btn:hover:not(.on) { color: var(--text-secondary); }
  #asStatSelect {
    width: 100%; background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 7px; color: var(--text-primary); font-family: var(--font-body);
    font-size: .85rem; padding: 8px 11px; outline: none; appearance: none; box-sizing: border-box;
  }
  #asStatSelect:focus { border-color: var(--accent-blue); }
  .advsearch-numbers-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
  .advsearch-numbers-toolbar .report-btn-secondary { padding: 5px 12px; font-size: .68rem; }
  .advsearch-numbers-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
    margin-bottom: 6px;
  }
  /* 2026-10-02 (Round 36), direct bug report: "move 9A-9D under 8A-8D,
     currently they are under 7A-7D". Root cause: AS_QUARTETT_NUMBERS
     (advsearch.js) is 36 items (9 groups of 4) in a grid that's only 8
     columns wide — 32 items (groups 1-8) fill exactly 4 rows with no
     remainder, each row holding two complete groups side by side (e.g. row
     4 = 7A-7D in columns 1-4, 8A-8D in columns 5-8), but the 9th group (4
     more items) starts a 5th, otherwise-empty row at the grid's default
     auto-placement column 1 — which is directly under 7A-7D (also columns
     1-4), not under 8A-8D (columns 5-8) like the symmetry of a "last group"
     would suggest. Desktop-only: the @media(max-width: 680px) override
     below switches to a 4-column grid, where every row is already exactly
     one full group (36/4 = 9 whole rows, no remainder) — the bug
     straightforwardly doesn't exist there, so this fix is scoped to avoid
     pushing mobile's last row off the 4-column grid entirely.
     2026-10-xx follow-up, direct bug report: "9A-9D checkboxes ... are now
     in separated rows. This is wrong, 9A-9D should be in the same row as
     other numbers have." The ORIGINAL fix here gave all 4 trailing items
     the IDENTICAL `grid-column: 5 / span 4` — which looks right for a
     single item, but auto-placement still has to find a free cell for
     EACH one: the first of the 4 claims columns 5-8 in row 5, so the
     SECOND one (same `5 / span 4` request) finds that cell range already
     taken and drops to row 6 instead, the third to row 7, and so on —
     stacking all 4 checkboxes in their own separate single-item rows
     rather than side by side in one. The actual fix needs each of the 4
     trailing items pinned to its OWN distinct single column (5, 6, 7, 8)
     rather than all 4 claiming the same 4-column span. NOTE: this still
     assumes exactly one trailing partial group of 4 beyond a clean
     multiple of 8 — re-check this rule if AS_QUARTETT_NUMBERS' group count
     changes again (e.g. a 10th group would make the trailing row 8 items
     wide, i.e. no longer partial, and this override would no longer be
     needed at all). */
  .advsearch-numbers-grid .advsearch-num-item:nth-last-child(4) { grid-column: 5; }
  .advsearch-numbers-grid .advsearch-num-item:nth-last-child(3) { grid-column: 6; }
  .advsearch-numbers-grid .advsearch-num-item:nth-last-child(2) { grid-column: 7; }
  .advsearch-numbers-grid .advsearch-num-item:nth-last-child(1) { grid-column: 8; }
  /* 2026-09-30, direct request: "1A-8D text should be centered and bigger"
     — the checkbox used to sit inline before the text (gap:4px, both
     centered as ONE group), which biased the visible text off to the right
     of the box's true center rather than centering the text itself. The
     checkbox is now a small corner indicator (position:absolute) instead,
     taken out of the horizontal flow entirely, so `span` — sized up from
     .68rem — is the only thing left in flow and centers on its own.
     Selector scoped as `.advsearch-numbers-grid .advsearch-num-item` (was
     just `.advsearch-num-item`) — found while verifying this fix: these are
     <label> elements sitting inside a shared `.report-field`-classed
     wrapper (same field-row class the Report Bug form uses), and
     `.report-field label { display:block; ... }` (0,1,1 specificity) was
     silently beating this rule's old single-class 0,1,0 specificity,
     which is exactly why the text never centered — this element was
     actually laid out `display:block` the whole time, never `flex`.
     0,2,0 here beats that regardless of source order. */
  .advsearch-numbers-grid .advsearch-num-item {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 6px; padding: 8px 4px; cursor: pointer; user-select: none;
    transition: border-color .15s, background .15s;
  }
  .advsearch-num-item:has(input:checked) { border-color: var(--accent-blue); background: rgba(58,143,255,.08); }
  .advsearch-num-item input {
    position: absolute; top: 4px; right: 4px; width: 12px; height: 12px;
    accent-color: var(--accent-blue); cursor: pointer; margin: 0;
  }
  .advsearch-num-item span {
    font-family: var(--font-ui); font-size: .92rem; font-weight: 700; letter-spacing: .04em;
    color: var(--text-secondary); text-align: center;
  }
  .advsearch-actions { padding: 16px 28px 24px; margin-top: 0; flex-shrink: 0; }

  /* FEATURES PANEL (js/features.js) — reuses .advsearch-overlay/.advsearch-box
     for the backdrop/frame/header (see index.html's #featuresModal), just
     wider (more room for a tile grid) and with its own body layout. */
  .features-box { max-width: 780px; }
  .features-body { padding: 18px 28px 26px; }
  .feature-tile {
    display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px;
    width: 100%; text-align: left; background: var(--bg-panel);
    border: 1px solid var(--border-subtle); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
    font-family: var(--font-body); color: var(--text-primary);
    transition: border-color .15s, background .15s, transform .15s;
  }
  .feature-tile:hover {
    border-color: var(--accent-blue); background: rgba(58,143,255,.06);
    transform: translateY(-1px);
  }
  /* 2026-10-02 (Round 36, direct request) — Report Bug's tile is rendered
     as a plain <div> (see _renderFeatureTiles(), features.js), not a
     <button>, with no click listener wired to it at all; this just makes
     that inert state LOOK inert too, rather than still inviting a click
     via the normal hover lift/highlight. */
  .feature-tile-disabled { cursor: default; opacity: .6; }
  .feature-tile-disabled:hover { border-color: var(--border-subtle); background: var(--bg-panel); transform: none; }
  .feature-tile-icon { font-size: 1.5rem; line-height: 1; padding-top: 2px; }
  .feature-tile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .feature-tile-name {
    font-family: var(--font-ui); font-weight: 700; font-size: .82rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-primary);
  }
  .feature-tile-desc { font-size: .82rem; color: var(--text-secondary); line-height: 1.4; }
  @media (min-width: 640px) {
    .features-body {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px;
    }
    .feature-tile { margin-bottom: 0; height: 100%; }
  }

  /* ── TOP-LEVEL "ALL" OVERVIEW SECTION HEADINGS ──
     Separates the combined Quartett / Mini Quartett / Promo Quartett grids
     shown together on the top-level database overview (renderYearsOverview). */
  .overview-section-title {
    font-family: var(--font-display); font-size: .82rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: var(--text-secondary);
    padding: 22px 20px 4px; margin: 0;
    display: flex; align-items: center; gap: 10px;
  }
  .overview-section-title::after {
    content: ''; flex: 1; height: 1px; background: var(--border-subtle);
  }
  .overview-section-title:first-child { padding-top: 16px; }

  /* ── MOBILE ── */
  @media(max-width:680px) {

    /* Home — tighter spacing so the trivia panel below fits on screen
       without a big scroll */
    #home { padding: 24px 20px 28px; gap: 0; }
    /* This override used to size the OLD 3-line stacked title (one word per
       row, so a big per-line font was fine) — now that index.html runs the
       title as one line (2026-10-04), the old clamp(2rem,10vw,3rem) would
       overflow a narrow phone badly, and so did a first attempt at
       clamp(.95rem,6.6vw,1.6rem) — it was never actually checked against
       this string's real rendered width either and still clipped at
       360-414px. Replaced with the same calc()-based formula as the
       desktop rule above (same ~19.17 width-per-font-size ratio, re-solved
       for this breakpoint's narrower #home padding — 20px+20px instead of
       24px+24px), also leaving a ~38px safety margin; the two formulas
       meet almost exactly at the 680px handoff, so there's no visible jump
       in title size right at the breakpoint either. Verified with
       Playwright at 320/360/375/390/414/680px — no wrap, no horizontal
       overflow at any of them. */
    .home-title { font-size: clamp(.75rem, calc(5.2vw - 4px), 2rem); margin-bottom: 10px; }
    .home-title .home-by { font-size: .75rem; margin-top: 4px; }
    .home-subtitle { font-size: .85rem; margin-bottom: 18px; }
    .home-ctas { gap: 10px; }
    .btn-primary, .btn-secondary { padding: 10px 20px; font-size: .78rem; }

    /* Direct request, 2026-10-01: Browse Database/Play Now/Features must
       stay in ONE row even on narrow phones, never wrap to a second row.
       flex-wrap:nowrap alone isn't enough — the three buttons' natural
       content width (at the sizing just above) overflows a narrow phone's
       viewport, which is what was forcing the wrap. Shrinks padding/
       font-size/letter-spacing further (just for these three, via
       .home-ctas's own children, so no other button elsewhere is touched)
       until all three reliably fit at once down to a 360px-wide screen —
       verified directly at 360/375/390/414px. */
    .home-ctas { flex-wrap: nowrap; gap: 6px; }
    .home-ctas .btn-primary, .home-ctas .btn-secondary { padding: 9px 8px; font-size: .62rem; letter-spacing: .02em; white-space: nowrap; }
    .trivia-wrap { margin-top: 6px; max-width: 100%; }
    .trivia-panel { padding: 10px 18px 18px; min-height: unset; }

    /* Nav — tighter, hide subtitle.
       2026-10-04: found while visually re-checking item 1 above (the
       home-title one-line fix) with real Playwright measurements instead of
       just eyeballing it — these values were never actually checked against
       real rendered widths either. The nav (logo + Home/Database/Play/
       Contact + the theme-switch gear button) overflowed the viewport at
       EVERY width from 360px up to the 680px breakpoint ceiling, worst with
       the longer translated labels ("Datenbank", Croatian's "Baza
       podataka") — invisible only because body's overflow-x:hidden clips it
       rather than showing a scrollbar, but on a real phone this is exactly
       the condition that makes mobile browsers silently render the WHOLE
       PAGE at a wider zoomed-out virtual viewport instead of the device
       width, which would have undone the home-title fix above along with
       everything else on the page. Retuned (smaller/tighter at every size
       here, plus a second, tighter sub-breakpoint for very narrow phones)
       and verified with Playwright at 340/360/375/390/414/680px in German,
       English AND Croatian (the longest of the three translations) — zero
       horizontal overflow at any of them. (Not one of this round's
       requested items — a bonus fix alongside item 1 since it directly
       affects whether that fix actually holds on a real phone.) */
    nav { padding:0 10px; gap:4px; }
    .nav-logo { font-size:1.08rem; letter-spacing:.03em; }
    .nav-logo span { display:none; }
    .nav-links { gap:1px; }
    .nav-links li a { padding:5px 5px; font-size:.6rem; letter-spacing:.01em; }
    .theme-btn { width:26px; height:26px; margin-left:4px; }

    /* Database section fills viewport cleanly — same 100vh-didn't-subtract-
       nav-height bug as the desktop rule above (see its comment); matching
       fix here. */
    #database.active { height:calc(100dvh - var(--nav-h)); }

    /* Toolbar — a single horizontally-scrolling row for search + sort, with
       everything else (By Country / Random / Advanced Sort / Advanced
       Search / Clear / the per-set Sort By button) collapsed behind a
       "Filters" toggle by default, so cards start visible further up the
       screen instead of behind several stacked rows of controls. */
    .db-toolbar {
      padding:8px 14px; gap:6px; flex-wrap:wrap; overflow-x:visible;
    }
    .db-toolbar::-webkit-scrollbar { display:none; }

    /* Search inputs only share this row — scrolls horizontally instead of
       squeezing (which used to visibly trim the placeholder/typed text).
       Sort controls (Year/A-Z, the years-overview Year sort button) live in
       their own .toolbar-sortrow below, not in this row. */
    .toolbar-scrollrow {
      display:flex;
      flex-wrap:nowrap;
      align-items:center;
      gap:6px;
      width:100%;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .toolbar-scrollrow::-webkit-scrollbar { display:none; }
    .toolbar-scrollrow .search-box { flex:1 1 150px; min-width:150px; }

    /* Sort controls — own row, wraps if needed, never shares space with the
       search boxes above. */
    .toolbar-sortrow {
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:6px;
      width:100%;
      margin-top:4px;
    }
    .toolbar-sortrow .search-sort-btns,
    .toolbar-sortrow #yearSortMobileBtn {
      flex:0 0 auto; width:auto; white-space:nowrap;
    }
    .toolbar-sortrow:empty { display:none; margin-top:0; }

    /* "Advanced" toggle row — always visible regardless of the collapsed
       row below, full-width and centered on mobile instead of the compact
       inline sizing the non-media-query rule above gives it on desktop.
       Used to share this row with Clear too — Clear moved into the
       breadcrumb row 2026-09-29 (see .clear-all-btn above), so
       .toolbar-filters-toggle is the only thing here now and fills the row
       on its own. The .on/chevron look (identical on both breakpoints) and
       the collapsed-by-default behavior itself are shared with desktop —
       see the non-media-query .toolbar-filters-toggle/.toolbar-row2 rules
       above, only this block's own width/flex sizing is mobile-specific. */
    .toolbar-persistent-row {
      display:flex; align-items:center; gap:6px; width:100%; margin-top:4px;
    }
    .toolbar-filters-toggle {
      flex:1; min-width:0;
    }

    /* .open (added by toggleToolbarFilters(), shared with desktop) reveals
       country/random/advanced-sort/advanced-search/quartett-name-search/
       sort-by, wrapping to as many lines as needed — this mobile block only
       overrides ITS OWN layout (a full-width wrapping row instead of
       desktop's inline display:contents); the display:none/.open toggle
       itself is the shared non-media-query rule above. */
    .toolbar-row2.open {
      display:flex;
      flex-wrap:wrap;
      width:100%;
      gap:6px;
      margin-top:6px;
    }
    .toolbar-row2 .sort-btn {
      flex:1 1 45%;
      justify-content:center;
    }

    /* Sidebar — hidden on mobile */
    .db-layout { flex-direction:column; }
    .db-sidebar {
      display:none !important;
    }


    /* Card grid — 4 columns, no divider gap column */
    .card-grid {
      grid-template-columns: repeat(4, 1fr) !important;
      gap:6px; padding:8px;
    }
    /* Hide the blank divider cell on mobile — it would break the 4-col layout */
    .card-grid-divider { display:none !important; }

    /* Smaller card body text */
    .qcard-body { padding:5px 6px 6px; }
    .qcard-name { font-size:.68rem; margin-bottom:3px; }
    .qcard-cat  { font-size:.5rem; }
    .grade-badge { font-size:.72rem; padding:0 4px; top:4px; left:4px; }

    /* Collection grid — 4 cols */
    .coll-grid { grid-template-columns:repeat(4,1fr); gap:8px; padding:10px; }
    .coll-card--set h3 { font-size:.625rem; }
    .coll-card--year h3 { font-size:1.15rem; }
    .year-meta-row { font-size:.56rem; }
    .overview-section-title { font-size:.7rem; letter-spacing:.16em; padding:16px 12px 2px; }
    .overview-section-title:first-child { padding-top:10px; }

    /* Breadcrumb slim */
    .breadcrumb { padding:6px 14px; font-size:.68rem; }
    .bc-title-thumb img { height: 22px; max-width: 36px; }

    /* Modal — vertical stack */
    .modal-overlay { padding:0; align-items:flex-end; }
    .modal-wrapper { max-width:100%; width:100%; }
    /* display:block (not the desktop rule's flex) — a float only ever
       affects NORMAL-FLOW siblings; a flex item (which modal-img/modal-body
       still would be if this stayed display:flex, even column-direction)
       completely ignores float/clear per spec, which is exactly why an
       earlier version of this rule (flex-direction:column, display still
       flex) silently didn't produce the wrap effect below at all. */
    .modal-box {
      display:block; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
      max-height:92dvh; overflow-y:auto; height:auto;
    }
    /* 2026-09-30, direct request: the image used to be full-width, stacked
       ABOVE the title (both modal-img and modal-body were simple block
       siblings in .modal-box's column stack) — "looks weird". Now it's a
       LEFT-floated thumbnail instead, sized to roughly the height of the
       title+meta-grid block it sits beside; .modal-title/.modal-meta-grid
       (both still plain blocks, with no width of their own) wrap around it
       exactly like text wraps around any floated image, because nothing in
       the chain between them — .modal-body, .modal-body-scroll — sets
       overflow other than visible or otherwise starts a new block
       formatting context that would wall the float off from them. The
       divider/stats grid/info boxes are NOT meant to sit beside the image
       per the request ("other stats will be below that like normal") —
       that's what `clear:both` on .modal-divider below is for: it (and
       everything after it, being later in normal flow — stats grid, then
       the reordered info boxes) always starts back at full width once
       clear of the float, regardless of the float's exact height relative
       to the title+meta block's own.
       .modal-img is a preceding DOM sibling of .modal-body (see index.html)
       — floats only ever affect sibling content that comes AFTER them in
       source order, which is exactly the order here.
       Width 155px (2026-09-30, bumped from 128px): the float needs to run
       a bit taller than just the title+meta-grid block so it reaches down
       to the Category meta-val's own line, not stop at the "Category"
       label above it — aspect-ratio:63/100 ties height to width, so widening
       it is what stretches it further down. */
    .modal-img { float:left; width:155px; aspect-ratio:63/100; height:auto; margin:0 14px 10px 0; border-radius:var(--radius); }
    .modal-body { display:block; padding:16px 18px 24px; overflow:visible; }
    .modal-body-scroll { padding:0; overflow:visible; }
    .modal-divider { clear:both; }
    /* flex-direction:column (not the desktop side-by-side row) — mobile's
       narrower width makes two buttons stacked full-width easier to tap
       than shrinking each to fit a shared row. */
    .modal-body-footer { padding:12px 0 0; border-top:1px solid var(--border-subtle); clear:both; }
    .modal-title { font-size:1.6rem !important; white-space:normal; }
    /* Single column, not the desktop 2-column grid — the float above
       already narrows this block's available width well below what two
       side-by-side meta values comfortably fit in. */
    .modal-meta-grid { grid-template-columns:1fr; gap:4px; }
    .modal-nav.prev { left:-8px; }
    .modal-nav.next { right:-8px; }
    .modal-nav { width:36px; height:36px; font-size:1.1rem; }
    .modal-stats-grid { gap:5px; }
    .mstat { padding:6px 10px; }

    /* Hide modal prev/next arrows — swipe handles navigation */
    .modal-nav { display:none !important; }

    .report-box { padding:22px 20px; margin:12px; border-radius:var(--radius); }

    .advsearch-box { max-width:none; margin:8px; max-height:92vh; }
    .advsearch-header { padding:18px 18px 0; }
    .advsearch-body { padding:14px 18px 4px; }
    .advsearch-grid { grid-template-columns:minmax(0,1fr); gap:2px; }
    .advsearch-numbers-grid { grid-template-columns:repeat(4,1fr); }
    .advsearch-actions { padding:12px 18px 18px; }
    /* Row 2 (Collection / Year) and Row 3's Separate-mode Info Left/Right/
       Image — side-by-side groups at desktop, but two (or three) groups
       each needing their OWN multi-control inline row don't fit the
       single-column mobile width even wrapped (Year's 5 inline pieces
       especially) — stack them full-width instead, one group per line. */
    .advsearch-row { flex-direction: column; gap: 10px; }
    /* NOT just `min-width:0` — .advsearch-group's desktop flex-basis (200px)
       is a WIDTH basis for the default row direction above, but once this
       rule flips the row to column, that same basis applies to HEIGHT
       instead (flex-basis always follows the main axis), inflating each
       group to 200px tall with its width left to shrink-to-fit/overflow
       unpredictably — found via Playwright at 390px, where Year's row
       rendered ~554px wide inside a 342px box. flex:0 0 auto + width:100%
       sidesteps the axis swap entirely. */
    .advsearch-row .advsearch-group { flex: 0 0 auto; min-width: 0; width: 100%; }
    .advsearch-row-header { flex-wrap: wrap; row-gap: 6px; }
    /* Help image stacks ABOVE the box instead of beside it at phone widths
       (2026-10-05) — #advSearchModal is targeted by id so this doesn't
       touch #featuresModal, which shares .advsearch-overlay but never has
       a second flex child. */
    #advSearchModal.open { flex-direction: column; }
    .advsearch-help-image-panel { max-width: 100%; max-height: 38vh; }
  }
  /* Very narrow phones (≲390px, and especially the longer translated nav
     labels — Croatian's "Baza podataka" is the worst case) still had a
     little room left after the general <=680px nav shrink just above;
     this second, tighter tier closes that out. See that rule's own comment
     (2026-10-04) for the full story. Verified with Playwright at
     320-390px in German/English/Croatian. */
  @media(max-width:400px) {
    nav { padding:0 6px; gap:2px; }
    .nav-logo { font-size:.88rem; letter-spacing:0; }
    .nav-links { gap:0; }
    .nav-links li a { padding:4px 2px; font-size:.48rem; letter-spacing:0; }
    .theme-btn { width:22px; height:22px; margin-left:2px; }
  }
  .qcard-sort-stat { font-family:var(--font-ui); font-size:.9rem; font-weight:700; color:var(--accent-cyan); letter-spacing:.02em; margin-top:auto; padding-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:baseline; gap:2px; }
  .qcard-sort-stat strong { font-weight:700; }
  .qcard-sort-stat .sstat-label { display:none; }
  .qcard-sort-stat .sunit { font-size:.68rem; color:var(--text-secondary); margin-left:1px; }
  .search-sort-btns { display:flex; }
  .sort-btn {
    font-family:var(--font-ui); font-size:.72rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    padding:5px 10px; border-radius:6px; cursor:pointer; transition:all .18s;
    border:1px solid var(--border-subtle);
    background:rgba(255,255,255,.04); color:var(--text-dim);
    white-space:nowrap;
  }
  .sort-btn.on {
    border-color:var(--border-glow); background:rgba(58,143,255,.12);
    color:var(--accent-blue);
  }

  /* ── COUNTRY MAP ── */
  /* #countryMapBtn intentionally uses the plain .sort-btn look — same as
     Clear/Random — not a special highlighted color. */
  #cmap-svg { touch-action: none; }

  /* Country list — left sidebar of the map modal, sortable via
     .cmap-list-sort's two toggle buttons (renderCountryList/
     _cmapSyncSortButtons in map.js). .cmap-list-col is the fixed-width
     column (sort row + scrolling list); .cmap-country-list is just the
     scrolling part now, so the sort row stays visible while the list
     scrolls under it. */
  .cmap-list-col {
    width: 220px; flex-shrink: 0;
    display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid rgba(58,143,255,.12);
    background: var(--bg-deep);
  }
  .cmap-list-sort {
    flex-shrink: 0;
    display: flex; gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(58,143,255,.12);
  }
  .cmap-sort-btn {
    flex: 1; min-width: 0;
    font-family: var(--font-ui); font-size: .64rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 4px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,.04); color: var(--text-dim);
    transition: all .18s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cmap-sort-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(58,143,255,.08); }
  .cmap-sort-btn.on { border-color: var(--border-glow); background: rgba(58,143,255,.12); color: var(--accent-blue); }
  .cmap-country-list {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 6px 0;
  }
  .cmap-list-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; cursor: pointer;
    font-family: var(--font-ui); font-size: .8rem;
    color: var(--text-secondary);
    transition: background .15s, color .15s;
  }
  .cmap-list-item:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }
  .cmap-list-item.active { color: var(--accent-cyan); background: rgba(58,143,255,.1); }
  .cmap-list-flag { flex-shrink: 0; font-size: .95rem; line-height: 1; }
  .cmap-list-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cmap-list-count {
    flex-shrink: 0; font-size: .68rem; color: var(--text-dim);
    background: rgba(255,255,255,.06); padding: 1px 7px; border-radius: 20px;
  }
  .cmap-list-item.active .cmap-list-count { color: var(--accent-cyan); background: rgba(0,229,255,.12); }

  @media(max-width:680px) {
    /* Country list becomes a slim column so the map still has room */
    .cmap-list-col { width: 128px; }
    .cmap-list-item { padding: 6px 8px; font-size: .68rem; gap: 5px; }
    .cmap-list-count { font-size: .6rem; padding: 1px 5px; }
    .cmap-list-sort { padding: 6px 6px; gap: 4px; }
    .cmap-sort-btn { font-size: .58rem; padding: 4px 2px; }
    /* ── end mobile ── */
  }

  /* SEARCH RESULTS GRID */
  .search-results-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:12px; padding:8px 20px 20px; animation:fadeUp .3s ease;
  }
  @media(max-width:680px) {
    .search-results-grid { grid-template-columns:repeat(4,1fr); gap:6px; padding:6px 10px 16px; }
  }
/* ── GAME ─────────────────────────────────────────────────── */

/* Play picker (year → set chooser, js/game.js's showPlayPicker/
   _renderPickerYears/_renderPickerCollections) — the grid itself reuses
   .coll-grid/.coll-card from the database views, but the header/back-button/
   empty-state around it are unique to Play and had no rules at all. */
.game-picker-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 48px 24px 28px;
}
.game-picker-header h2 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  letter-spacing: .04em;
  color: var(--accent-gold);
  text-shadow: var(--glow-gold);
}
.game-picker-header p {
  color: var(--text-secondary);
  max-width: 420px;
  font-size: .9rem;
}
.game-back-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.game-back-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent-blue);
  background: rgba(255,255,255,.05);
}

/* Difficulty toggle + Cancel — lives outside every <section>, sticky right
   below <nav>, shown only while picking a set to play from the (real)
   Database section; hidden once a game actually starts. See js/game.js's
   _showPlayPickBar/_hidePlayPickBar/_syncPlayPickBar/_renderGameBoard. */
.game-difficulty-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 24px 0;
  flex-wrap: wrap;
}
#game-difficulty-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 900;
  padding: 14px 24px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.game-diff-cancel-btn {
  margin-left: 10px;
  color: var(--text-dim);
}
.game-diff-cancel-btn:hover {
  color: #ef5350;
  border-color: #ef5350;
}
.game-difficulty-label {
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 2px;
}
.game-diff-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.game-diff-btn:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.game-diff-btn.on {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: var(--border-subtle);
}

.game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.5rem 2rem;
  min-height: 80vh;
  position: relative;
  user-select: none;
}

/* Score bar */
.game-scorebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 700px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  gap: 0.5rem;
}
.game-score-mid {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.8;
  padding: 0 0.5rem;
}

/* Arena */
.game-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 700px;
}

.game-card-slot {
  flex: 1;
  max-width: 260px;
  aspect-ratio: 670/1068;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.game-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Card back: decorative pattern */
.game-card-back {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 2px,
      transparent 2px,
      transparent 14px
    ),
    linear-gradient(160deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-card-back::after {
  content: "?";
  font-size: 4rem;
  opacity: 0.12;
  font-weight: 900;
}

.game-card-front {
  width: 100%;
  height: 100%;
}

/* Front card image failed to load after retries (2026-09-28, see
   _gLoadCardFrontImgWithRetry in game.js) — hide the browser's default
   "broken image" icon/alt-text box entirely, and show the same decorative
   gradient + "?" pattern the card BACK's fallback already uses, so a
   failed front image reads as "no art available" rather than a jarring
   broken graphic. `:has()` on the slot keeps this working without any
   extra wrapper markup; a browser without `:has()` support still hides the
   broken icon (the important part) and just shows the slot's own plain
   dark background instead of the decorative pattern. The attribute click
   zones are separate sibling elements, so they keep working regardless of
   whether the image itself loaded. */
.game-img-failed { visibility: hidden; }
.game-card-slot:has(.game-img-failed)::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 900;
  opacity: 0.12;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 2px,
      transparent 2px,
      transparent 14px
    ),
    linear-gradient(160deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
  pointer-events: none;
}


/* VS */
.game-vs {
  font-size: 1.1rem;
  font-weight: 800;
  opacity: 0.3;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

/* Invisible clickable attribute zones on player card */
.game-attr-zone {
  box-sizing: border-box;
  border-radius: 3px;
  transition: background 0.15s, border 0.15s;
  border: 2px solid transparent;
  /* invisible by default */
  background: transparent;
}
.game-attr-zone:hover {
  background: var(--border-subtle);
  border-color: var(--border-glow);
}
.game-attr-zone--active {
  background: var(--border-glow);
  border-color: var(--border-glow) !important;
}

/* H/L button row */
.game-hl-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.game-chosen-attr {
  font-size: 0.8rem;
  opacity: 0.65;
  margin-right: 0.25rem;
}

/* Buttons */
.game-btn {
  padding: 0.55rem 1.4rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: filter 0.15s, transform 0.1s;
}
.game-btn:hover  { filter: brightness(1.15); transform: translateY(-1px); }
.game-btn:active { transform: translateY(0); }
.game-btn--high {
  background: var(--accent-blue);
  color: #000;
}
.game-btn--low {
  background: #e57373;
  color: #fff;
}

/* Result overlay */
.game-result-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 50;
  border-radius: 12px;
  animation: gameFadeIn 0.2s ease;
}
@keyframes gameFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.game-result-box {
  text-align: center;
  padding: 2rem 2.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.game-result-icon {
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
}
.game-result-win  { color: #66bb6a; }
.game-result-lose { color: #ef5350; }
.game-result-tie  { color: #ffb74d; }
.game-result-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.game-result-detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  opacity: 0.75;
}
.game-result-field {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  opacity: 0.6;
}

/* Mobile tweaks */
@media (max-width: 540px) {
  .game-arena     { gap: 0.75rem; }
  .game-card-slot { max-width: 44vw; }
  .game-scorebar  { font-size: 0.8rem; }
}

/* ── COMPARE ──────────────────────────────────────────────── */
/* A selected card in ANY grid (regular/Mini/Promo/search/country/Advanced
   Sort/Advanced Search results) — every card element carries a
   data-comparekey attribute so this one rule covers all of them. */
.compare-selected {
  outline: 3px solid var(--accent-cyan);
  outline-offset: -3px;
}
.compare-selected::after {
  content: '\2713';
  position: absolute;
  top: 6px; left: 6px; z-index: 3;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-cyan);
  color: var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Floating "expand compare view" button — appears once Compare mode is on
   and at least one card has been picked. */
.compare-float-btn {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 900;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 100px;
  border: 1px solid var(--border-glow);
  background: var(--bg-card);
  color: var(--accent-cyan);
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), var(--glow-blue);
  transition: transform .18s, box-shadow .18s;
  animation: fadeUp .25s ease;
}
.compare-float-btn:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.55), var(--glow-blue); }
.compare-float-icon { font-size: .95rem; }
.compare-float-count {
  font-family: var(--font-ui); font-weight: 700; font-size: .7rem;
  padding: 2px 8px; border-radius: 100px;
  background: rgba(0,229,255,.15); color: var(--accent-cyan);
}
/* "✕" inside the floating Compare button, added 2026-10-02 (direct follow-
   up request) to cancel comparing without first opening Compare view.
   Deliberately a bit bigger/more separated than .compare-float-count (its
   own border-radius:50% circle, not the count's pill shape) so it reads as
   a DIFFERENT, separate control rather than part of the count label — its
   own :hover (red, same treatment as Compare's per-card "✕" remove buttons)
   reinforces that this one button, not the whole bar. */
.compare-float-cancel {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--text-secondary);
  font-size: .65rem; font-weight: 700;
  transition: background .15s, color .15s;
}
.compare-float-cancel:hover { background: #ef5350; color: #fff; }

/* Best/worst-highlighted stats table — shared by the Compare view and the
   "show quartett" overlay (see _buildCompareStatsTableHTML in
   quartett-overlay.js). */
/* table-layout:fixed + an explicit .cmp-rowlabel width means the card-name
   columns always split the REMAINING width evenly between them, regardless
   of how long any one card's name is — a long name wraps within its own
   column instead of forcing that column (and the whole table) wider.
   2026-10-xx, item 6.1/6.2 direct request: previously `width:100%` made
   each data column (N of them) split "100% minus the label column" evenly
   — so the exact column width depended on how many cards were being
   compared, and never matched the actual card image width above it. Now
   `width:auto` + an explicit `width: var(--cmp-colw)` on every data th/td
   below (the SAME variable the card panels themselves use) means a column
   is always exactly as wide as the card above it, however many columns
   there are (item 6.1). Switching from the collapsed border model to
   `border-collapse:separate; border-spacing: var(--cmp-gap) 0` gives the
   table the same 14px horizontal gaps between columns that the image strip
   above it already has between cards, and `margin:0 auto` centers the
   whole table — but the table's own visual center sits to the right of its
   true center once the fixed-width label column is added on the left, so
   its data columns alone would land right of where the cards above them
   actually are (item 6.2). A flat CSS `transform: translateX(...)` shifting
   the table left by exactly half of (label column + the one gap column
   that precedes it) was tried first and IS the exact correction — but
   applied unconditionally it can push the table's label column (and part
   of its first data column) off the left edge of `.cmp-tablewrap`'s
   `overflow-x:auto` box on a narrower desktop window, where there isn't
   that much slack on the table's left to absorb a fixed shift (content
   transformed past a scroll container's natural origin isn't reachable by
   scrolling back to it — it's just gone). `_cmpCenterTable` (quartett-
   overlay.js, called right after `_cmpFitRowLabels` once the table is
   actually in the document) applies the identical shift via JS instead,
   clamped to however much space is actually free on each side of the
   table's already-centered position — see its own comment for the full
   derivation and the clamp. No static `transform` here; it's set inline
   per-render by that function (and left unset — i.e. plain `margin:auto`
   centering — on the rare narrow window with no slack to give, same as
   before item 6.2 existed). */
.cmp-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: var(--cmp-gap) 0;
  width: auto;
  margin: 0 auto;
  font-family: var(--font-ui);
  font-size: .95rem;
  background: var(--bg-card);
}
.cmp-table th, .cmp-table td { padding: 10px 16px; text-align: center; white-space: normal; word-break: break-word; overflow-wrap: break-word; }
/* Data columns (header + body) always exactly as wide as the card image
   panel above them — item 6.1. Excludes .cmp-rowlabel, which keeps its own
   fixed width below. */
.cmp-colhead, .cmp-cell { width: var(--cmp-colw); }
.cmp-table thead th {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-glow);
  color: var(--text-secondary);
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700;
  line-height: 1.3;
}
/* Clickable (2026-10-02, direct follow-up request: "cmp-colheads should be
   clickable and when click it should open that cards modal") — click
   wiring itself lives in _renderCardStripOverlay (quartett-overlay.js),
   right after this table's HTML string is inserted; this is purely the
   visual affordance (pointer cursor + a hover tint matching the rest of
   this app's clickable-row convention, e.g. .cmp-table tbody tr:hover
   below) so it reads as clickable before the user tries it. */
.cmp-colhead { white-space: normal; word-break: break-word; cursor: pointer; transition: color .15s, background .15s; }
.cmp-colhead:hover { color: var(--accent-cyan); background: rgba(255,255,255,.05); }
.cmp-table tbody tr { border-bottom: 1px solid var(--border-subtle); }
.cmp-table tbody tr:hover { background: rgba(255,255,255,.05); }
.cmp-rowlabel {
  width: var(--cmp-labelw);
  text-align: left !important;
  color: var(--text-dim);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  /* Item 6.3 direct request: "'cmp-rowlabel's should not be wrapped to 2nd
     row, rather reduce font." Was `white-space:normal`, which let a long
     label (e.g. a German stat name) wrap onto a second line and grow the
     row's height unevenly. nowrap + ellipsis gives _cmpFitRowLabels
     (quartett-overlay.js) a real single-line baseline to shrink the font
     against once the table is actually laid out (it measures
     scrollWidth/clientWidth, which only differ when the label can't wrap);
     the ellipsis is just a safety net for the rare label that still
     doesn't fit once that function hits its own minimum font size. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bg-card);
}
.cmp-cell { color: var(--text-secondary); font-weight: 600; }
.cmp-unit { font-size: .74rem; color: var(--text-dim); margin-left: 3px; font-weight: 400; white-space: nowrap; }
.cmp-best  { color: #66bb6a; font-weight: 700; }
.cmp-worst { color: #ef5350; font-weight: 700; }

/* 2026-10-02, direct request: a clickable "card set and year" label (e.g.
   "1999 Tuning") under each image in the Compare/"show quartett"/Find
   Similar strip overlay (_renderCardStripOverlay, quartett-overlay.js), so a
   visitor can jump straight to any shown card's own set without opening its
   modal or lightbox first. Originally small/dim (it was meant to read as
   secondary context, not the headline the card image itself is), with the
   same underline + accent-cyan hover treatment this app's other inline
   text-links already use (e.g. .trivia-cotd-standout-set).
   2026-10-xx follow-up, direct request: "newly added text (year and set)
   under card images in similar and compare should be lighter/bigger/
   bolder" — bumped from `--text-dim` to `--text-primary` (the brightest
   text color this app has, same one card names/headings use), from .7rem
   to .92rem, and from the browser's normal font-weight to 700, so it reads
   as a real piece of information rather than fine print. .cmp-strip-setlink-
   inert (no resolvable nav target — a blank/missing collection name) drops
   the pointer cursor/hover tint and keeps the underline off, so it reads as
   plain context text rather than a dead link; it keeps the dimmer
   `--text-dim` color on purpose, since it isn't a real link. */
.cmp-strip-setlink {
  font-family: var(--font-ui); font-size: .92rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; text-align: center; transition: color .15s;
}
.cmp-strip-setlink:hover { color: var(--accent-cyan); }
.cmp-strip-setlink-inert { cursor: default; text-decoration: none; color: var(--text-dim); }
.cmp-strip-setlink-inert:hover { color: var(--text-dim); }

/* Solid, non-transparent panel around the table — otherwise it sits
   directly on the near-black overlay backdrop and is hard to read. */
.cmp-tablewrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 4px;
}

@media (max-width: 600px) {
  .compare-float-btn { padding: 10px 18px; font-size: .7rem; bottom: 16px; }
  /* Narrower fixed label column + tighter padding so up to 4 card columns
     actually fit a phone screen without the table forcing the whole page
     to scroll sideways — content wraps (see the base rule above) instead
     of pushing columns wider than the viewport. */
  /* Item 6's equal-column-width/centering treatment (base rules above) is
     desktop-only by design: mobile's card panels are sized with
     `width:100%;aspect-ratio:...` of their own flex item, not
     `var(--cmp-colw)` (see boxDims in _renderCardStripOverlay,
     quartett-overlay.js — --cmp-colw there is explicitly the `isMobile ?
     ... : ...` desktop branch), so forcing mobile's table columns to that
     same (desktop-sized) width would break the "up to 4 card columns
     actually fit a phone screen" layout this block already provides.
     Overriding back to `width:auto` here lets table-layout:fixed keep
     splitting the remaining width evenly on mobile, exactly as before
     item 6; `transform:none` is a safety net in case anything ever sets an
     inline transform here (_cmpCenterTable, quartett-overlay.js, already
     guards itself out on mobile and never does, but this keeps the base
     rule's centering shift from leaking in some future change without
     anyone needing to remember that guard exists). */
  .cmp-table { font-size: .74rem; transform: none; }
  .cmp-table th, .cmp-table td { padding: 6px 5px; }
  .cmp-colhead, .cmp-cell { width: auto; }
  .cmp-rowlabel { width: 58px; font-size: .62rem; letter-spacing: .04em; }
  .cmp-unit { font-size: .64rem; display: block; margin-left: 0; }
}

/* ── EXTRA REFERENCE IMAGES ──────────────────────────────────
   Collapsible "Expand"/"Collapse" panel below a set's card grid, showing
   any Title Card/Box Front, Back, Title Card Back, Set List and Box Back
   reference images the set has (see _renderExtraImagesSection in
   database.js). Inline, not a modal — the panel just appears/disappears
   below the button, in the same normal document flow as the card grid. */
/* Shared row holding BOTH extraImagesToggleBtn and qtableToggleBtn (direct
   request, 2026-10-02: "should be in the same row" + "more visible than
   now, pretty hard to see because they are similar to background and are
   thin") — see _getOrMakeTogglesRow in database.js. Sits right under the
   card grid; each panel (.extra-images-panel/.merged-image-panel/
   .qtable-wrap) still renders in its own full-width section below this
   row, unaffected. flex-wrap so two buttons never get forced to overlap or
   overflow on a narrow phone — they simply stack onto a second line there
   instead (same effect as before this change on mobile, just via wrap
   instead of two separate stacked sections). */
.set-toggles-row {
  padding: 10px 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.extra-images-section {
  padding: 0 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Visibility fix (2026-10-02): these used to be a 1px --border-subtle
   outline, a near-invisible 4%-white fill, and --text-dim label text — on
   the default dark theme --text-dim is a dark blue (#3949ab) only a shade
   or two off the page background, which is exactly why they read as "thin"
   and "similar to background". Switched to a visibly brighter --border-glow
   outline (the same tint the default THEME already reserves for "this is
   interactive/active", just now shown at rest, not only on hover), a solid
   --bg-card fill so the pill actually separates from whatever's behind it
   instead of a near-transparent tint, and --text-secondary label text
   (meaningfully brighter than --text-dim in all three themes — see the
   theme blocks above). Hover/.on keep the existing blue accent treatment,
   just stronger, so the at-rest state no longer reads as the same
   intensity as hover/active. */
.extra-images-toggle-btn {
  font-family: var(--font-ui); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 22px; border-radius: 100px; cursor: pointer; transition: all .18s;
  border: 1.5px solid var(--border-glow);
  background: var(--bg-card); color: var(--text-secondary);
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.extra-images-toggle-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(58,143,255,.12); }
.extra-images-toggle-btn.on { border-color: var(--accent-blue); background: rgba(58,143,255,.18); color: var(--accent-blue); }

/* ── FULL QUARTETT DATA TABLE VIEW ───────────────────────────
   "Table" toggle sitting right next to extraImagesToggleBtn (see
   _renderQuartettTableSection in database.js/mini.js) — a full data table
   of every card in the set, reusing the Compare view's .cmp-cell/.cmp-best/
   .cmp-worst coloring classes (see _buildQuartettDataTableHTML in
   quartett-overlay.js) so a tied min/max stat is painted exactly the same
   way here as in Compare. */
.qtable-section { padding: 0 20px 28px; display: flex; flex-direction: column; align-items: center; }
/* qtable-toggle-btn no longer needs its own spacing rule — it now lives in
   .set-toggles-row alongside extraImagesToggleBtn (see that row's comment
   above), whose own gap/padding handles the spacing instead. */
.qtable-wrap {
  width: 100%; max-width: 100%; overflow-x: auto;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 4px;
}
.qtable { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: .82rem; white-space: nowrap; }
.qtable th, .qtable td { padding: 8px 10px; text-align: center; }
.qtable thead th {
  background: var(--bg-card); border-bottom: 1px solid var(--border-glow);
  color: var(--text-secondary); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; position: sticky; top: 0;
  z-index: 1;
}
.qtable-sortable { cursor: pointer; user-select: none; transition: color .15s, background .15s; }
.qtable-sortable:hover { color: var(--accent-blue); background: rgba(58,143,255,.08); }
.qtable-sort-active { color: var(--accent-cyan); }
.qtable tbody tr { border-bottom: 1px solid var(--border-subtle); }
.qtable tbody tr:hover { background: rgba(255,255,255,.05); }
.qtable .qtable-col-id { font-weight: 700; color: var(--text-dim); }
.qtable .qtable-col-cat { color: var(--text-secondary); font-size: .74rem; }
/* Frozen Name column (direct request, 2026-10-02): on a narrow phone this
   table scrolls horizontally past ID/Category toward Country/Info — losing
   sight of WHICH car's row you're looking at. position:sticky;left:0 pins
   Name to the viewport's left edge as the table scrolls under it (ID/
   Category, which sit before Name in the column order, scroll out of view
   behind it — only Name stays put, which is the one thing actually needed
   to keep a row identifiable). Needs an opaque background (the table has no
   per-cell background otherwise) so scrolled-past cells don't show through,
   and a z-index above the plain body cells so it actually layers on top
   while scrolling — .qtable-colhead's intersecting top-left corner (sticky
   on BOTH axes: top from the rule above, left from this one) needs to be
   one layer higher still, so it stays above the column-sticky body cells
   AND the row-sticky header cells of every other column. A thin right-edge
   shadow marks the frozen column's boundary so it doesn't look like it's
   just floating over the scrolled content with no visual separation. Note:
   the hover tint (.qtable tbody tr:hover, right above) won't show through
   this cell's own opaque background — a known, accepted cosmetic gap since
   touch devices (the actual target here) don't have hover anyway. */
.qtable .qtable-col-name {
  text-align: left; font-weight: 600; color: var(--text-primary);
  position: sticky; left: 0; z-index: 2; background: var(--bg-card);
  box-shadow: 4px 0 6px -2px rgba(0,0,0,.25);
}
.qtable thead .qtable-col-name { z-index: 3; }
/* Country/Tuning column (flag+country name, or tuning-logo+factory name —
   see quartett-overlay.js's countryText) — left-aligned 2026-10-02 (direct
   request), matching .qtable-col-name above rather than the table's default
   centered text; applies to both the header cell (qtable-colhead already
   carries this class too) and the body cells. */
.qtable .qtable-col-country { text-align: left; }
/* cursor:default base + pointer only under (hover:hover) matches
   _wireQtableHoverPreview's own device branch (database.js) exactly: a real
   mouse gets both the small hover-preview image AND a click-straight-to-modal
   shortcut, so it gets the pointer cursor; a touch device still just taps it
   to pop the small preview image (which is itself what's clickable there —
   see .qtable-hover-preview.show above), so default there is correct, not
   misleading. (2026-10-04: restored the hover-preview on desktop alongside
   the click — a 2026-10-03 change had wrongly made the click REPLACE it.) */
.qtable-name-hover { cursor: default; border-bottom: 1px dotted var(--text-dim); }
@media (hover: hover) {
  .qtable-name-hover { cursor: pointer; }
}
@media (max-width: 680px) {
  .qtable { font-size: .68rem; }
  .qtable th, .qtable td { padding: 5px 6px; }
}

/* Small floating card-image preview — one shared element, repositioned/
   re-sourced per row rather than one per row (see _wireQtableHoverPreview in
   database.js). Appears on hover on desktop (mouseenter/mousemove/
   mouseleave) and on tap on a touch/no-hover device — see that function's
   own comment for the 2026-10-04 device-branch details. Base rule keeps
   pointer-events:none so the fixed-position element never blocks clicks to
   whatever's underneath it while hidden; .show flips that to auto (+ a
   pointer cursor) only while it's actually visible, since tapping/clicking
   THIS preview image is also a way to open the card's modal (the primary
   way on mobile; a convenience alongside the direct Name-cell click on
   desktop). */
.qtable-hover-preview {
  position: fixed; z-index: 9999; width: 130px; aspect-ratio: 63/100;
  background: var(--bg-card); border: 1px solid var(--border-glow); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .12s ease;
  display: flex; align-items: center; justify-content: center;
}
.qtable-hover-preview.show { opacity: 1; pointer-events: auto; cursor: pointer; }
.qtable-hover-preview img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s; }
.qtable-hover-preview img.loaded { opacity: 1; }
/* Box width is set inline per-box by _renderExtraImagesSection (database.js),
   read directly off an already-rendered .qcard, so these boxes always match
   the current card-grid column width exactly — including on breakpoints
   where the number of columns/track sizing changes — without having to keep
   a second, independent grid-track definition in sync with .card-grid's. */
.extra-images-panel {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start; /* don't stretch boxes to match the tallest box
    in the row — each box's height should follow only its own image's
    natural aspect ratio at the shared width, per-box, not the row's max */
  gap: 14px;
  animation: fadeUp .3s ease;
}
.extra-image-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s, border-color .3s;
}
.extra-image-box:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(58,143,255,.2), 0 0 0 1px var(--accent-blue); border-color: var(--accent-blue); }
/* No fixed aspect-ratio here on purpose — these are box-art/reference
   scans, not card photos, so they don't share the cards' crop ratio. The
   image just fills the box's width and the box's height follows the
   image's own natural (intrinsic) aspect ratio. */
.extra-image-frame {
  width: 100%;
  background: var(--bg-panel);
  line-height: 0;
}
.extra-image-frame img { display: block; width: 100%; height: auto; cursor: pointer; }
.extra-image-caption {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  text-align: center; color: var(--text-secondary);
  padding: 8px 6px;
}

@media (max-width: 680px) {
  .extra-images-section { padding: 6px 10px 20px; }
  .extra-images-panel { gap: 8px; margin-top: 12px; }
  .extra-image-caption { font-size: .58rem; padding: 5px 4px; }
}

/* ── MERGED OVERVIEW PANEL ───────────────────────────────────
   A second, separate panel below .extra-images-panel (same Expand/Collapse
   toggle — see _renderExtraImagesSection in database.js) for a set's single
   composite/merged image (filename suffix "MERGED"). One big image rather
   than a row of card-width boxes, so it gets its own wider, capped-width
   layout instead of reusing .extra-image-box's card-width sizing. */
.merged-image-panel {
  width: 100%;
  max-width: 900px;
  margin: 18px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeUp .3s ease;
}
.merged-image-frame {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
  transition: transform .3s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s, border-color .3s;
}
.merged-image-frame:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(58,143,255,.2), 0 0 0 1px var(--accent-blue); border-color: var(--accent-blue); }
.merged-image-frame img { display: block; width: 100%; height: auto; cursor: pointer; }

@media (max-width: 680px) {
  .merged-image-panel { margin-top: 12px; }
}

/* ── MY COLLECTION ────────────────────────────────────────────
   While "My Collection Editor" is on, each set box in a year's collection
   list (renderCollections in database.js) is tinted red (not owned) or
   green (owned), with a small checkmark badge as a non-color-dependent
   cue too. See collection.js for the toggle logic. */
.coll-card--not-owned {
  border-color: rgba(239,83,80,.55);
  box-shadow: 0 0 0 1px rgba(239,83,80,.35) inset;
  background: rgba(239,83,80,.05);
}
.coll-card--not-owned:hover {
  border-color: #ef5350;
  box-shadow: 0 8px 28px rgba(239,83,80,.2), 0 0 0 1px rgba(239,83,80,.5) inset;
}
.coll-card--owned {
  border-color: rgba(102,187,106,.6);
  box-shadow: 0 0 0 1px rgba(102,187,106,.4) inset;
  background: rgba(102,187,106,.07);
}
.coll-card--owned:hover {
  border-color: #66bb6a;
  box-shadow: 0 8px 28px rgba(102,187,106,.25), 0 0 0 1px rgba(102,187,106,.55) inset;
}
.coll-owned-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  color: var(--bg-deep);
  background: #66bb6a;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  opacity: 0; /* hidden (but space reserved) when empty/not owned */
  transition: opacity .15s;
}
.coll-card--owned .coll-owned-badge { opacity: 1; }

/* Years overview meta row while the Editor is on — replaces the normal
   "N sets / M cards" two-column row with a single centered owned count. */
.year-meta-row--owned {
  justify-content: center;
  color: #66bb6a;
  font-weight: 700;
}

/* ── DATABASE VIEW MODES (dbview.js) ──────────────────────── */
/* Small Icon view: same .coll-grid the rest of the app uses, just denser
   columns and no .icon-body caption underneath (boxes are built without
   one — see dbview.js's makeSetBox) so each box is just its cover image. */
.coll-grid--small { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.coll-grid--small .coll-card--small { border-radius: 8px; }

/* Details view: a single sortable table (thumbnail, Name, Year) across
   every set kind. The table itself is capped at a comfortable reading
   width and centered — .dbview-details-wrap owns that, rather than letting
   the table stretch edge-to-edge, which was hard to read on very wide
   (e.g. 21:9 ultrawide) screens. */
.dbview-details-wrap {
  width: calc(100% - 40px);
  max-width: 860px;
  margin: 4px auto 28px;
}
.dbview-details-table {
  width: 100%;
  border-collapse: collapse;
}
.dbview-details-table thead th {
  text-align: left;
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.dbview-details-table thead th:hover { color: var(--accent-blue); }
.dbview-details-table thead th.dbview-thumb-col { cursor: default; padding: 10px 4px 10px 14px; }
.dbview-details-table thead th.dbview-thumb-col:hover { color: var(--text-secondary); }
.dbview-details-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: .85rem;
  color: var(--text-primary);
}
.dbview-details-table tbody tr { cursor: pointer; transition: background .15s; }
.dbview-details-table tbody tr:hover { background: var(--bg-panel); }
.dbview-details-table td.dbview-thumb-col { padding: 6px 4px 6px 14px; width: 34px; }
.dbview-thumb {
  display: block;
  width: 28px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--bg-card);
  flex-shrink: 0;
}
.dbview-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: var(--text-dim);
}

@media (max-width: 680px) {
  .coll-grid--small { grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 10px; }
  .dbview-details-wrap { width: calc(100% - 20px); margin: 4px auto 20px; }
  .dbview-details-table thead th, .dbview-details-table tbody td { padding: 8px 10px; font-size: .78rem; }
  .dbview-details-table thead th.dbview-thumb-col, .dbview-details-table td.dbview-thumb-col { padding-left: 10px; padding-right: 2px; }
  .dbview-thumb { width: 22px; height: 32px; }
}


/* ═══════════════════════════════════════════════════════════
   PLAY HUB / BUILD YOUR QUARTETT / STAT QUIZ  (js/play.js, byq.js, quiz.js)
   ═══════════════════════════════════════════════════════════ */
.play-root { max-width: 1360px; margin: 0 auto; padding: 0 16px 56px; }

/* Hub tiles */
.play-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; max-width: 1040px; margin: 8px auto 0; }
.play-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 26px 22px 24px; min-height: 210px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); color: var(--text-primary); cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.3,1.2), box-shadow .25s, border-color .25s; font-family: var(--font-body); }
.play-tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 55%); }
.play-tile:hover:not([disabled]) { transform: translateY(-6px); border-color: var(--accent-blue); box-shadow: 0 16px 48px rgba(58,143,255,.25); }
.play-tile-icon { font-size: 2.6rem; line-height: 1; }
.play-tile-title { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: .05em; color: var(--accent-gold); }
.play-tile-desc { font-size: .88rem; color: var(--text-secondary); line-height: 1.45; }
.play-tile-tag { position: absolute; top: 14px; right: 14px; font-family: var(--font-ui); font-size: .62rem; font-weight: 700; letter-spacing: .14em; padding: 3px 8px; border-radius: 999px; background: var(--accent-cyan); color: #000; }
.play-tile--soon { opacity: .45; cursor: default; border-style: dashed; }

/* Screen frame */
.play-screen-bar { display: flex; align-items: center; gap: 16px; padding: 22px 0 14px; flex-wrap: wrap; }
.play-screen-title { font-family: var(--font-display); font-size: 2rem; letter-spacing: .05em; color: var(--accent-gold); text-shadow: var(--glow-gold); }
.play-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 64px 16px; text-align: center; color: var(--text-secondary); }
.play-loading-title { font-family: var(--font-ui); font-size: 1rem; letter-spacing: .08em; }
.play-loading-bar { width: min(420px, 90%); height: 8px; background: var(--bg-panel); border-radius: 999px; overflow: hidden; border: 1px solid var(--border-subtle); }
.play-loading-bar > div { height: 100%; background: var(--accent-blue); transition: width .2s; }
.play-loading-bar--indet > div { width: 35% !important; animation: playIndet 1.1s ease-in-out infinite; }
@keyframes playIndet { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.play-loading-txt { font-family: var(--font-ui); font-size: .78rem; }
.play-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 4000; background: var(--bg-panel); color: var(--text-primary); border: 1px solid var(--border-glow); border-radius: 10px; padding: 10px 18px; font-family: var(--font-ui); font-size: .85rem; transition: opacity .2s, transform .2s; }
.play-toast.show { opacity: 1; transform: translate(-50%, 0); }
.play-crop { border-radius: 8px; }

/* ── BYQ: start view ── */
.byq-start { max-width: 980px; margin: 0 auto; }
.byq-intro { color: var(--text-secondary); line-height: 1.55; font-size: .92rem; margin-bottom: 18px; }
.byq-h { font-family: var(--font-ui); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-cyan); margin: 26px 0 12px; }
.byq-opt { color: var(--text-secondary); text-transform: none; letter-spacing: .02em; font-weight: 400; }
.byq-draft { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px dashed var(--accent-gold); border-radius: var(--radius); margin-bottom: 8px; font-size: .9rem; }
.byq-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.byq-ch { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); color: var(--text-primary); cursor: pointer; transition: border-color .2s, background .2s; }
.byq-ch:hover { border-color: var(--accent-blue); }
.byq-ch.on { border-color: var(--accent-gold); background: var(--bg-panel); box-shadow: 0 0 0 1px var(--accent-gold) inset; }
.byq-ch-icon { font-size: 1.4rem; }
.byq-ch-title { font-family: var(--font-ui); font-weight: 700; letter-spacing: .04em; }
.byq-ch-desc { font-size: .76rem; color: var(--text-secondary); line-height: 1.35; }
.byq-select, .byq-search, .byq-name { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 9px 12px; font-family: var(--font-ui); font-size: .88rem; max-width: 100%; }
.byq-select { width: 100%; }
.byq-start-actions { margin-top: 22px; }
.byq-empty { color: var(--text-secondary); font-size: .88rem; padding: 14px 0; }
.byq-saved { display: flex; flex-direction: column; gap: 8px; }
.byq-saved-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); }
.byq-saved-main { display: flex; flex-direction: column; min-width: 0; }
.byq-saved-name { font-family: var(--font-ui); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.byq-saved-meta { font-size: .76rem; color: var(--text-secondary); }
.byq-saved-btns { display: flex; gap: 6px; }
.byq-del:hover { border-color: #e55 !important; color: #e55 !important; }

/* ── BYQ: build view ── */
.byq-notice { padding: 10px 14px; border: 1px solid var(--accent-cyan); border-radius: var(--radius); font-size: .86rem; margin-bottom: 12px; color: var(--text-primary); }
.byq-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.byq-name { flex: 1 1 220px; min-width: 160px; font-size: 1rem; }
.byq-count { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .06em; color: var(--accent-gold); }
.byq-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.byq-actions button[disabled] { opacity: .4; cursor: not-allowed; }
.byq-lock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); margin-bottom: 12px; font-family: var(--font-ui); font-size: .85rem; }
.byq-lock--open { color: var(--text-secondary); }
.byq-lock-label { color: var(--text-secondary); }
.byq-chip { padding: 3px 10px; border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--border-glow); color: var(--text-primary); font-size: .8rem; }
.byq-chip i { color: var(--text-secondary); font-style: normal; }
.byq-goal { padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--accent-blue); border-radius: var(--radius); margin-bottom: 14px; }
.byq-goal.ok { border-color: #4caf50; box-shadow: 0 0 18px rgba(76,175,80,.25); }
.byq-goal.over { border-color: #e55; }
.byq-goal-title { font-family: var(--font-ui); font-weight: 700; letter-spacing: .06em; color: var(--accent-gold); }
.byq-goal-lvl { font-size: .72rem; color: var(--text-secondary); margin-left: 6px; letter-spacing: .08em; text-transform: uppercase; }
.byq-goal-line { font-size: 1.05rem; margin: 4px 0 8px; }
.byq-goal-sub, .byq-goal-now { font-size: .82rem; color: var(--text-secondary); }
.byq-goal-bar { height: 8px; border-radius: 999px; background: var(--bg-panel); overflow: hidden; margin-bottom: 6px; }
.byq-goal-bar > div { height: 100%; background: var(--accent-blue); transition: width .25s; }
.byq-goal.ok .byq-goal-bar > div { background: #4caf50; }
.byq-goal.over .byq-goal-bar > div { background: #e55; }

.byq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.byq-group { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 10px; position: relative; }
.byq-group-title { position: absolute; top: -11px; left: 12px; background: var(--bg-deep); padding: 0 8px; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .1em; color: var(--accent-gold); }
.byq-group-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 6px; }
.byq-slot { position: relative; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-panel); cursor: pointer; overflow: hidden; min-height: 96px; transition: border-color .2s, transform .2s; }
.byq-slot:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
.byq-slot.empty { display: flex; align-items: center; justify-content: center; border-style: dashed; aspect-ratio: 10 / 8.6; }
.byq-slot-plus { font-size: 2rem; color: var(--text-dim); }
.byq-slot-label { position: absolute; top: 4px; left: 6px; z-index: 3; font-family: var(--font-display); font-size: .95rem; letter-spacing: .08em; color: var(--accent-gold); text-shadow: 0 1px 3px #000; }
.byq-slot.empty .byq-slot-label { color: var(--text-secondary); text-shadow: none; }
.byq-slot-x { position: absolute; top: 3px; right: 3px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: .7rem; opacity: 0; transition: opacity .15s; }
.byq-slot:hover .byq-slot-x, .byq-slot-x:focus { opacity: 1; }
@media (hover: none) { .byq-slot-x { opacity: .9; } }
.byq-slot-name { padding: 5px 7px 0; font-family: var(--font-ui); font-weight: 700; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.byq-slot-set { padding: 0 7px 6px; font-size: .66rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.byq-totals { margin-top: 22px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); }
.byq-totals-title { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.byq-totals-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.byq-total { display: flex; flex-direction: column; font-family: var(--font-ui); }
.byq-total-l { font-size: .74rem; color: var(--text-secondary); }
.byq-total-v { font-weight: 700; color: var(--accent-gold); }
.byq-total-a { font-size: .74rem; color: var(--text-secondary); }

/* ── BYQ: picker overlay ── */
.byq-picker { position: fixed; inset: 0; z-index: 3600; background: rgba(0,0,0,.8); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 4vh 12px; animation: fadeIn .18s ease; }
.byq-picker-box { width: min(1000px, 100%); background: var(--bg-deep); border: 1px solid var(--border-glow); border-radius: var(--radius-lg); padding: 16px 18px 20px; box-shadow: 0 24px 80px rgba(0,0,0,.7); }
.byq-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.byq-picker-title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .06em; color: var(--accent-gold); }
.byq-picker-cur { font-family: var(--font-ui); font-size: .85rem; letter-spacing: 0; color: var(--text-secondary); }
.byq-picker-x { background: rgba(255,255,255,.08); border: 1px solid var(--border-subtle); border-radius: 50%; width: 32px; height: 32px; color: var(--text-secondary); cursor: pointer; }
.byq-picker-hint { font-size: .8rem; color: var(--text-secondary); margin: 6px 0 12px; }
.byq-picker-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.byq-picker-tools .byq-search { flex: 1 1 220px; }
.byq-picker-tools .byq-select { width: auto; flex: 0 1 auto; }
.byq-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.byq-pick { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color .2s, transform .2s; }
.byq-pick:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
.byq-pick.taken { opacity: .5; }
.byq-pick-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.byq-pick-name { font-family: var(--font-ui); font-weight: 700; }
.byq-pick-grade { font-size: .72rem; color: var(--accent-gold); margin-left: 4px; }
.byq-pick-set { font-size: .72rem; color: var(--text-secondary); }
.byq-pick-stats { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .72rem; color: var(--text-secondary); margin-top: 4px; }
.byq-pick-stats b { color: var(--text-primary); font-weight: 600; }
.xs-i { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 6px; padding: 0; border-radius: 50%; border: 1px solid var(--accent-cyan); background: transparent; color: var(--accent-cyan); font: italic 700 .68rem/1 Georgia, serif; text-transform: none; letter-spacing: 0; cursor: pointer; vertical-align: middle; flex: 0 0 auto; }
.xs-i:hover, .xs-i:focus-visible { background: var(--accent-cyan); color: var(--bg-deep); outline: none; }
.advsearch-xs-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
.xs-help { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.xs-help-box { position: relative; max-width: 460px; width: 100%; max-height: 86vh; overflow: auto; background: var(--bg-deep); border: 1px solid var(--border-glow); border-radius: 12px; padding: 18px 20px; font-family: var(--font-ui); font-size: .82rem; line-height: 1.45; color: var(--text-secondary); box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.xs-help-box h3 { margin: 0 28px 10px 0; font-size: 1rem; color: var(--text-primary); }
.xs-help-box p { margin: 0 0 10px; }
.xs-help-box b { color: var(--text-primary); }
.xs-help-box ul { margin: 0 0 10px; padding-left: 18px; }
.xs-help-box li { margin-bottom: 4px; }
.xs-help-note { font-size: .74rem; opacity: .8; }
.xs-help-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--text-secondary); font-size: 1rem; cursor: pointer; }
.quiz-xnote { margin: -4px 0 10px; font-size: .74rem; color: var(--text-secondary); text-align: center; line-height: 1.3; }
.byq-pick-dv { color: var(--accent-cyan); }
.byq-pick-dv .sunit { margin-left: 2px; }
.byq-slot-dv { padding: 0 7px 6px; margin-top: -3px; font-size: .68rem; font-weight: 600; color: var(--accent-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.byq-pick-alts { font-size: .68rem; color: var(--text-dim); }
.byq-pick-tag { margin-top: 4px; font-size: .7rem; color: var(--accent-cyan); }
.byq-more { grid-column: 1 / -1; justify-self: center; }

/* ── QUIZ ── */
.quiz { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.quiz-progress { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: .82rem; color: var(--text-secondary); }
.quiz-progress-bar { flex: 1; height: 6px; background: var(--bg-panel); border-radius: 999px; overflow: hidden; }
.quiz-progress-bar > div { height: 100%; background: var(--accent-blue); transition: width .3s; }
.quiz-img { position: relative; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-glow); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.quiz-img .qcard-img { border-radius: 0; }
.quiz-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-img-tag { position: absolute; top: 8px; left: 8px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-gold); color: #000; font-family: var(--font-display); font-size: 1.1rem; }
.quiz-question { font-size: 1.15rem; line-height: 1.4; color: var(--text-primary); }
.quiz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-btn { padding: 14px 12px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-primary); font-family: var(--font-ui); font-size: 1rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.quiz-btn:hover:not([disabled]) { border-color: var(--accent-blue); transform: translateY(-2px); }
.quiz-btn.correct { border-color: #4caf50; background: rgba(76,175,80,.18); }
.quiz-btn.wrong { border-color: #e55; background: rgba(229,85,85,.18); }
.quiz-btn.dim { opacity: .45; }
.quiz-btn[disabled] { cursor: default; }
.quiz-reveal { border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 14px; background: var(--bg-card); display: flex; flex-direction: column; gap: 10px; }
.quiz-reveal.ok { border-color: #4caf50; }
.quiz-reveal.bad { border-color: #e55; }
.quiz-verdict { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .06em; }
.quiz-reveal.ok .quiz-verdict { color: #4caf50; }
.quiz-reveal.bad .quiz-verdict { color: #e55; }
.quiz-detail { color: var(--text-secondary); font-size: .9rem; }
.quiz-fulls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.quiz-full { flex: 1 1 260px; max-width: 420px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.quiz-full img { width: 100%; height: auto; border-radius: 10px; display: block; }
.quiz-full-cap { display: flex; flex-direction: column; align-items: center; font-size: .8rem; color: var(--text-secondary); }
.quiz-full-cap b { color: var(--text-primary); font-family: var(--font-ui); }
.quiz-next { align-self: center; }
.quiz-results { align-items: center; text-align: center; }
.quiz-big { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--accent-gold); text-shadow: var(--glow-gold); }
.quiz-big span { font-size: 2.4rem; color: var(--text-secondary); }
.quiz-res-msg { font-size: 1.2rem; }
.quiz-best { font-family: var(--font-ui); color: var(--text-secondary); }
.quiz-rows { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; margin-top: 8px; }
.quiz-row { display: grid; grid-template-columns: 22px 120px 1fr; gap: 4px 10px; align-items: baseline; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-left-width: 3px; border-radius: 8px; font-size: .84rem; }
.quiz-row.ok { border-left-color: #4caf50; } .quiz-row.bad { border-left-color: #e55; }
.quiz-row-mark { font-weight: 700; } .quiz-row.ok .quiz-row-mark { color: #4caf50; } .quiz-row.bad .quiz-row-mark { color: #e55; }
.quiz-row-type { color: var(--text-secondary); font-size: .74rem; }
.quiz-row-set { grid-column: 3; color: var(--text-secondary); font-size: .72rem; }
.quiz-res-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 680px) {
  .play-root { padding: 0 10px 40px; }
  .play-screen-title { font-size: 1.6rem; }
  .byq-grid { grid-template-columns: 1fr; }
  .byq-picker { padding: 0; }
  .byq-picker-box { border-radius: 0; min-height: 100vh; }
  .byq-picker-list { grid-template-columns: 1fr; }
  .quiz-row { grid-template-columns: 22px 1fr; } .quiz-row-type { display: none; } .quiz-row-name { grid-column: 2; } .quiz-row-set { grid-column: 2; }
}

/* BYQ start view: stat-by-stat builder, difficulty cards (Round 41) */
.byq-draft-btns { display: flex; gap: 8px; }
.byq-stats-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-ui); font-size: .85rem; color: var(--text-secondary); margin-bottom: 10px; }
.byq-stats-state b { color: var(--accent-gold); }
.byq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; min-height: 8px; }
.byq-chip--pick { cursor: pointer; border-color: var(--accent-gold); }
.byq-chip--pick:hover { border-color: #e55; }
.byq-chip--auto { opacity: .7; border-style: dashed; }
.byq-stat-title { font-family: var(--font-ui); font-size: .82rem; color: var(--text-secondary); margin-bottom: 8px; }
.byq-stat-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.byq-stat-opt { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-primary); cursor: pointer; font-family: var(--font-ui); font-size: .85rem; transition: border-color .15s, transform .15s; }
.byq-stat-opt:hover { border-color: var(--accent-blue); transform: translateY(-1px); }
.byq-stat-opt span { font-size: .7rem; color: var(--text-secondary); background: var(--bg-panel); border-radius: 999px; padding: 1px 7px; }
.byq-presets { margin-top: 14px; font-size: .85rem; color: var(--text-secondary); }
.byq-presets summary { cursor: pointer; margin-bottom: 8px; }
.byq-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.byq-lvl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); color: var(--text-primary); cursor: pointer; }
.byq-lvl-card.on { border-color: var(--accent-gold); box-shadow: 0 0 0 1px var(--accent-gold) inset; }
.byq-lvl-name { font-family: var(--font-ui); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-gold); }
.byq-lvl-target { font-size: 1rem; }
.byq-lvl-target--unk { font-size: .8rem; color: var(--text-secondary); }
.byq-lvl-avg { font-size: .74rem; color: var(--text-secondary); }
.byq-lvl-note { font-size: .76rem; color: var(--text-secondary); margin-top: 8px; }
.quiz-duo--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 680px) { .quiz-duo--3 { gap: 6px; } .quiz-answers { gap: 6px; } }

/* ═══ MODAL STAT RADAR (Round 41) ═══ */
.modal-overlay { flex-direction: column; overflow-y: auto; }
.modal-overlay > .modal-wrapper { margin-top: auto; flex-shrink: 0; }
.modal-radar { width: 100%; max-width: 880px; margin: 12px auto auto; flex-shrink: 0; }
.modal-radar-toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--bg-card); border: 1px solid var(--border-glow); border-radius: var(--radius); color: var(--text-primary); cursor: pointer; font-family: var(--font-ui); font-weight: 700; letter-spacing: .06em; text-align: left; }
.modal-radar-toggle:hover { border-color: var(--accent-blue); }
.modal-radar-sub { font-weight: 400; font-size: .76rem; color: var(--text-secondary); letter-spacing: 0; flex: 1; }
.modal-radar-chev { color: var(--accent-cyan); }
.modal-radar-body { display: none; margin-top: 8px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 14px 18px 16px; }
.modal-radar.open .modal-radar-body { display: block; animation: fadeIn .2s ease; }
.modal-radar.open .modal-radar-toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.radar-layout { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.radar-chart { flex: 1 1 340px; max-width: 480px; }
.radar-svg { width: 100%; height: auto; display: block; overflow: visible; }
.radar-ring { fill: none; stroke: var(--border-subtle); stroke-width: 1; }
.radar-ring--avg { stroke: var(--text-secondary); stroke-dasharray: 4 3; stroke-width: 1.3; }
.radar-axis { stroke: var(--border-subtle); stroke-width: 1; }
.radar-card { fill: var(--accent-cyan); fill-opacity: .22; stroke: var(--accent-cyan); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--accent-gold); stroke: var(--bg-card); stroke-width: 1.5; }
.radar-dot--clip { fill: #e55; }
.radar-ringlabel { font: 600 9px var(--font-ui); fill: var(--text-dim); }
.radar-label { font: 700 12px var(--font-ui); fill: var(--text-primary); }
.radar-pct { font: 600 11px var(--font-ui); fill: var(--accent-gold); }
.radar-side { flex: 1 1 260px; max-width: 360px; font-family: var(--font-ui); }
.radar-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.radar-table th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 4px 6px 4px 0; }
.radar-table td { padding: 4px 6px; text-align: right; }
.radar-unit, .radar-avg { color: var(--text-secondary); font-size: .74rem; }
.radar-rowpct { font-weight: 700; }
.radar-rowpct.up { color: #4caf50; } .radar-rowpct.down { color: #e5a14a; }
.radar-legend { margin-top: 8px; font-size: .74rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.radar-key { display: inline-block; width: 16px; height: 0; border-top: 3px solid var(--accent-cyan); margin-left: 6px; }
.radar-key--avg { border-top: 2px dashed var(--text-secondary); }
.radar-empty { color: var(--text-secondary); font-size: .85rem; padding: 6px 0; }
@media (max-width: 680px) {
  .modal-overlay { padding: 0; justify-content: flex-start; align-items: stretch; }
  .modal-overlay > .modal-wrapper { margin-top: auto; }
  .modal-overlay .modal-box { max-height: calc(92dvh - 44px); }
  .modal-radar { margin: 0; max-width: 100%; }
  .modal-radar-toggle { border-radius: 0; padding: 10px 14px; }
  .modal-radar-sub { display: none; }
  .modal-radar-body { border-radius: 0; margin-top: 0; }
}

/* Find Similar "Why similar?" explainer (Round 41) */

/* ── Set facts panel (Round 41) ── */
.sf-panel { width: 100%; max-width: 900px; background: rgba(255,255,255,.04); border: 1px solid var(--border-glow, rgba(255,255,255,.15)); border-radius: 12px; padding: 14px 16px; margin-top: 10px; }
.sf-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sf-box { background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 12px; }
.sf-box-h { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.sf-box-n { font-weight: 700; font-size: 1rem; margin: 4px 0; }
.sf-box-d { font-size: .76rem; color: var(--text-secondary); line-height: 1.4; }
.sf-card-link { color: var(--accent-cyan); text-decoration: none; }
.sf-card-link:hover { text-decoration: underline; }
.sf-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.sf-table th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 6px 8px 6px 0; vertical-align: top; }
.sf-table td { padding: 6px 8px; vertical-align: top; }
.sf-table thead th, .sf-table thead td { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,.1); }
.sf-table tbody tr + tr th, .sf-table tbody tr + tr td { border-top: 1px solid rgba(255,255,255,.06); }
.sf-avg { color: var(--text-secondary); white-space: nowrap; }
.sf-who { font-size: .74rem; margin-top: 2px; }
.sf-up { color: #4caf50; } .sf-down { color: #e5a14a; }
@media (max-width: 680px) { .sf-table { font-size: .74rem; } .sf-table th, .sf-table td { padding: 5px 4px 5px 0; } .sf-panel { padding: 10px; } }

/* ── Round 42: quiz picture sizes, smaller play tiles ── */
.quiz-img:not(.quiz-img--duo) { max-width: 420px; margin: 0 auto; }
.quiz-duo { max-width: 520px; margin: 0 auto; width: 100%; }
@media (max-width: 680px) {
  /* single picture = COTD width (250px); pairs/triples stay in ONE row, like Higher/Lower */
  .quiz-img:not(.quiz-img--duo) { width: 250px; max-width: 100%; }
  .quiz-duo { gap: 6px; }
  .quiz-duo--3 { gap: 4px; }
}

/* ── Higher/Lower, mobile only (Round 42): YOUR card centred at COTD size
   (so the five stat zones are actually tappable), the opponent's card
   small, ABOVE it. Desktop keeps the side-by-side arena. ── */
@media (max-width: 680px) {
  .game-arena { flex-direction: column; gap: 6px; }
  .game-arena #slot-ai { order: 1; flex: none; width: 78px; max-width: 78px; border-radius: 6px; }
  .game-arena .game-vs { order: 2; font-size: .8rem; line-height: 1; }
  .game-arena #slot-player { order: 3; flex: none; width: 250px; max-width: min(250px, 80vw); }
  .game-arena #slot-ai .game-card-back::after { font-size: 1.6rem; }
}

/* ── BYQ card picker: compact rows with a small thumbnail (Round 42) ── */
.byq-picker-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.byq-pick { flex-direction: row; align-items: center; gap: 10px; padding: 6px; }
.byq-pick .qcard-img { width: 104px; flex: none; border-radius: 6px; }
.byq-pick .byq-pick-body { flex: 1; min-width: 0; padding: 2px 4px 2px 0; }
.byq-pick .byq-pick-name { font-size: .92rem; }
@media (max-width: 680px) {
  .byq-picker-list { grid-template-columns: 1fr; }
  .byq-pick .qcard-img { width: 88px; }
}

/* ── Play hub: smaller tiles (Round 42) ── */
.play-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; max-width: 760px; }
.play-tile { padding: 16px 14px 14px; min-height: 128px; gap: 5px; }
.play-tile-icon { font-size: 1.8rem; }
.play-tile-title { font-size: 1.25rem; }
.play-tile-desc { font-size: .76rem; line-height: 1.35; }
.play-tile-tag { top: 8px; right: 8px; font-size: .56rem; padding: 2px 6px; }
@media (max-width: 680px) { .play-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; } .play-tile { min-height: 112px; } }
.radar-inv { color: var(--accent-cyan); font-size: .72rem; cursor: help; }

.sf-note { margin-top: 10px; font-size: .72rem; color: var(--text-secondary); line-height: 1.4; }

/* ── BYQ picker, desktop: 4 cards per row (Round 43). Mobile keeps the compact row layout above. ── */
@media (min-width: 681px) {
  .byq-picker-box { width: min(1100px, 100%); }
  .byq-picker-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .byq-pick { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .byq-pick .qcard-img { width: 100%; border-radius: 0; }
  .byq-pick .byq-pick-body { padding: 8px 10px 10px; }
}

/* ── Round 43: compact quiz reveal, results links + hover preview ── */
.quiz-reveal { padding: 10px 12px; gap: 6px; }
.quiz-verdict { font-size: 1.15rem; }
.quiz-detail { font-size: .82rem; }
.quiz-fulls { flex-wrap: nowrap; gap: 8px; }
.quiz-full { flex: 0 1 140px; min-width: 0; max-width: 140px; gap: 3px; }
.quiz-full-cap { font-size: .7rem; text-align: center; }
.quiz-full img { border-radius: 6px; }
.quiz-next { padding: 8px 18px; }
@media (max-width: 680px) { .quiz-full { flex: 1 1 0; max-width: 108px; } .quiz-fulls { gap: 6px; } }
.quiz-link { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 2px; }
.quiz-link:hover { color: var(--accent-cyan); text-decoration-color: var(--accent-cyan); }
.quiz-hover { position: fixed; z-index: 9000; width: 150px; pointer-events: none; display: none; background: var(--bg-deep); border: 1px solid var(--border-glow); border-radius: 8px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.quiz-hover.show { display: block; }
.quiz-hover img { width: 100%; height: auto; display: block; border-radius: 5px; }
.quiz-hover-cap { font-size: .66rem; color: var(--text-secondary); text-align: center; padding-top: 3px; }
@media (hover: none) { .quiz-hover { display: none !important; } }

/* quiz reveal v2 (Round 43): small card thumbnails on the LEFT, verdict / detail / Next on the right */
.quiz-reveal { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: start; }
.quiz-reveal .quiz-fulls { grid-column: 1; grid-row: 1 / span 3; flex-wrap: nowrap; gap: 6px; justify-content: flex-start; }
.quiz-reveal .quiz-verdict, .quiz-reveal .quiz-detail, .quiz-reveal .quiz-next { grid-column: 2; }
.quiz-reveal .quiz-next { align-self: end; justify-self: start; margin-top: 4px; }
.quiz-full { flex: 0 0 96px; max-width: 96px; }
.quiz-full-cap { font-size: .62rem; line-height: 1.25; }
@media (max-width: 680px) {
  .quiz-reveal { grid-template-columns: 1fr; }
  .quiz-reveal .quiz-fulls { grid-column: 1; grid-row: auto; order: 2; justify-content: center; }
  .quiz-reveal .quiz-verdict, .quiz-reveal .quiz-detail, .quiz-reveal .quiz-next { grid-column: 1; }
  .quiz-reveal .quiz-next { justify-self: center; order: 3; }
  .quiz-full { flex: 0 1 30%; max-width: 92px; }
}

/* ── Higher/Lower board v2 (Round 44): counters sit next to their cards; top bar = only the turn message ── */
.game-scorebar { justify-content: center; }
.game-scorebar .game-score-mid { flex: 0 1 auto; font-size: .95rem; opacity: .9; min-height: 1.2em; }
.game-side { display: flex; align-items: center; justify-content: center; gap: .7rem; flex: 1; min-width: 0; }
.game-side .game-card-slot { flex: 1; }
.game-count { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; flex: none; text-align: center; }
.game-count-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.game-count-num { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--accent-blue); }
.game-count-cards { font-size: .62rem; opacity: .45; }
@media (max-width: 680px) {
  .game-arena { flex-direction: column; }
  .game-side { flex: none; width: auto; gap: .6rem; }
  .game-side .game-card-slot { flex: none; }
  .game-side--ai .game-count { order: 2; }
  .game-side--ai .game-count-num { font-size: 1.3rem; }
  .game-side--ai .game-count { min-width: 44px; }
  .game-arena .game-side--ai { order: 1; }
  .game-arena .game-vs { order: 2; }
  .game-arena .game-side--player { order: 3; }
}
@media (max-width: 680px) {
  .game-arena #slot-ai, .game-arena #slot-player { order: 0; }
  .game-side--player .game-count { order: 2; }
  .game-arena #slot-player { max-width: min(250px, 66vw); }
}

/* ── BYQ picker on mobile: 4 per row too (Round 44) — compact vertical cards ── */
@media (max-width: 680px) {
  .byq-picker-box { padding: 10px 8px 16px; }
  .byq-picker-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .byq-pick { flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 8px; }
  .byq-pick .qcard-img { width: 100%; border-radius: 0; }
  .byq-pick .byq-pick-body { padding: 4px 4px 6px; gap: 1px; }
  .byq-pick .byq-pick-name { font-size: .6rem; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .byq-pick .byq-pick-grade { display: none; }
  .byq-pick .byq-pick-set { font-size: .52rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .byq-pick .byq-pick-stats { font-size: .5rem; gap: 0 4px; margin-top: 2px; line-height: 1.2; }
  .byq-pick .byq-pick-alts { display: none; }
  .byq-pick .byq-pick-tag { font-size: .5rem; }
}

/* quiz reveal v3 (Round 44): a single card at COTD size (250px), several cards a bit bigger than before; tappable pictures */
.quiz-full { flex: 0 0 124px; max-width: 124px; }
.quiz-fulls--1 .quiz-full { flex: 0 0 250px; max-width: 250px; }
.quiz-full-cap { font-size: .68rem; }
.quiz-fulls--1 .quiz-full-cap { font-size: .78rem; }
@media (max-width: 680px) {
  .quiz-full { flex: 1 1 0; max-width: 118px; }
  .quiz-fulls--1 .quiz-full { flex: 0 0 250px; max-width: 100%; }
}
.quiz-img--duo { cursor: pointer; transition: transform .15s, border-color .15s; }
.quiz-img--duo:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
.quiz-reveal { grid-template-rows: auto auto 1fr; align-content: start; }
.quiz-reveal .quiz-next { align-self: start; }
@media (max-width: 680px) { .quiz-reveal { grid-template-rows: none; } }

/* ── HL counters v3 (Round 45): AI count centred ON the card back, player count centred BELOW the player's card ── */
.game-side--player { flex-direction: column; gap: .5rem; }
.game-side--player .game-count { min-width: 0; }
.game-card-back#card-ai-back::after { content: none; }
.game-count--onback { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 8px 14px; min-width: 0; backdrop-filter: blur(2px); }
.game-count--onback .game-count-num { font-size: 2.4rem; }
@media (max-width: 680px) {
  .game-arena #slot-player { max-width: min(250px, 80vw); }
  .game-side { gap: .4rem; }
  .game-side--player .game-count { flex-direction: row; gap: 6px; align-items: baseline; }
  .game-side--ai .game-count--onback { padding: 3px 8px; border-radius: 8px; }
  .game-side--ai .game-count--onback .game-count-num { font-size: 1.3rem; }
  .game-side--ai .game-count--onback .game-count-label, .game-side--ai .game-count--onback .game-count-cards { display: none; }
}

/* ── Quiz reveal v4 (Round 45): everything centred, stacked: verdict · detail · cards · button ── */
.quiz-reveal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.quiz-reveal .quiz-fulls { order: 3; justify-content: center; }
.quiz-reveal .quiz-verdict { order: 1; }
.quiz-reveal .quiz-detail { order: 2; }
.quiz-reveal .quiz-next { order: 4; align-self: center; margin-top: 4px; }
@media (max-width: 680px) { .quiz-reveal { display: flex; } }

/* ── Round 46: H/L buttons side by side, chosen-attribute label below ── */
.game-hl-row { flex-direction: column; gap: 0.4rem; }
.game-hl-btns { display: flex; flex-direction: row; gap: 0.75rem; justify-content: center; }
.game-hl-row .game-chosen-attr { margin: 0; text-align: center; }

/* ── Round 46: Cancel buttons, Resume / Experimental tags ── */
.game-foot { display: flex; justify-content: center; margin-top: .6rem; }
.game-cancel-btn { background: none; border: 1px solid var(--border-subtle, rgba(255,255,255,.18)); color: var(--text-secondary, #aaa); font-size: .78rem; padding: .35rem .9rem; border-radius: 6px; cursor: pointer; }
.game-cancel-btn:hover { color: var(--text-primary, #fff); border-color: var(--text-secondary, #aaa); }
.play-tile-tag--resume { background: var(--accent-gold); }
.play-tile-tag--exp { background: transparent; color: var(--accent-gold); border: 1px solid var(--accent-gold); }

/* ── Round 46: quiz slider question ── */
.quiz-slider { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 520px; margin: 0 auto; }
.quiz-slider-val { font-family: var(--font-display); font-size: 2.2rem; color: var(--accent-gold); letter-spacing: .03em; }
.quiz-range { width: 100%; accent-color: var(--accent-blue); height: 28px; cursor: pointer; }
.quiz-slider-ends { display: flex; justify-content: space-between; width: 100%; font-size: .78rem; color: var(--text-secondary); }
.quiz-lock { margin-top: 4px; }

/* ── Round 46: experimental badge, mini games, Daily Quartett ── */
.play-exp-badge { display: inline-block; font-family: var(--font-ui); font-size: .6rem; font-weight: 700; letter-spacing: .14em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--accent-gold); color: var(--accent-gold); vertical-align: middle; }
.play-tile .play-exp-badge { align-self: center; margin-top: 2px; }

.mg-track { position: relative; height: 54px; margin: 6px 14px 0; }
.mg-track-bar { position: absolute; left: 0; right: 0; top: 26px; height: 6px; border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--border-subtle); }
.mg-mark { position: absolute; top: 20px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; }
.mg-mark i { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .68rem; white-space: nowrap; font-family: var(--font-ui); }
.mg-mark--guess { background: var(--accent-blue); } .mg-mark--guess i { top: 22px; color: var(--accent-blue); }
.mg-mark--actual { background: #4caf50; } .mg-mark--actual i { top: -16px; color: #4caf50; }

/* Rank It */
.mg-rk-dir { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-secondary); font-family: var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.mg-rk-dir i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--border-subtle), var(--accent-gold)); }
.mg-rk-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mg-rk-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 2px solid var(--border-subtle); border-radius: 10px; background: var(--bg-card); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; min-width: 0; }
.mg-rk-card .quiz-img { border-radius: 6px; max-width: none; pointer-events: none; }
.mg-rk-card.sel { border-color: var(--accent-gold); }
.mg-rk-card.drop { border-color: var(--accent-blue); transform: scale(1.03); }
.mg-rk-card.drag-src { opacity: .35; }
.mg-rk-card.ok { border-color: #4caf50; } .mg-rk-card.bad { border-color: #e55; }
.mg-rk-n { position: absolute; top: 6px; left: 6px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-gold); color: #000; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mg-rk-name { font-size: .7rem; line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.4em; }
.mg-rk-val { font-size: .72rem; text-align: center; font-weight: 700; color: var(--accent-gold); }
.mg-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: .92; transform: rotate(3deg); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.mg-hint { text-align: center; }

/* Memory */
.mg-mem-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: .84rem; color: var(--text-secondary); }
.mg-mem-set { font-size: .72rem; opacity: .7; text-align: center; }
.mg-mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mg-mem-tile { position: relative; aspect-ratio: 10 / 6.54; padding: 0; border: 2px solid var(--border-subtle); border-radius: 8px; background: var(--bg-card); cursor: pointer; overflow: hidden; color: var(--text-primary); min-width: 0; }
.mg-mem-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.8rem; color: var(--accent-gold); background: repeating-linear-gradient(45deg, var(--bg-panel), var(--bg-panel) 8px, var(--bg-card) 8px, var(--bg-card) 16px); }
.mg-mem-face { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: var(--bg-card); }
.mg-mem-face .qcard-img { width: 100%; height: 100%; aspect-ratio: auto; }
.mg-mem-name { padding: 4px; font-size: .72rem; line-height: 1.15; text-align: center; font-weight: 600; overflow: hidden; }
.mg-mem-tile.open .mg-mem-back, .mg-mem-tile.matched .mg-mem-back { display: none; }
.mg-mem-tile.open .mg-mem-face, .mg-mem-tile.matched .mg-mem-face { display: flex; }
.mg-mem-tile.matched { border-color: #4caf50; opacity: .85; cursor: default; }

/* Streak Run */
.mg-st-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-st-side { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 2px solid var(--border-subtle); border-radius: 12px; background: var(--bg-card); min-width: 0; }
.mg-st-side.ok { border-color: #4caf50; } .mg-st-side.bad { border-color: #e55; }
.mg-st-side .quiz-img { max-width: none !important; width: 100% !important; }
.mg-st-name { font-weight: 700; font-size: .9rem; text-align: center; }
.mg-st-set { font-size: .7rem; color: var(--text-secondary); text-align: center; }
.mg-st-val { font-family: var(--font-display); font-size: 1.7rem; color: var(--accent-gold); }
.mg-st-btns { justify-content: center; }

/* Daily Quartett */
.mg-dl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-ui); font-size: .84rem; color: var(--text-secondary); flex-wrap: wrap; }
.mg-dl-img { overflow: hidden; }
.mg-dl-blur { transition: filter .5s; }
.mg-dl-input { position: relative; }
.mg-dl-input input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-glow); background: var(--bg-card); color: var(--text-primary); font-size: 1rem; box-sizing: border-box; }
.mg-dl-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px; margin-top: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-height: 320px; overflow-y: auto; }
.mg-dl-sug:empty { display: none; }
.mg-dl-opt { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); cursor: pointer; text-align: left; font-size: .88rem; }
.mg-dl-opt:hover { background: var(--bg-panel); }
.mg-dl-opt span { color: var(--text-secondary); font-size: .76rem; white-space: nowrap; }
.mg-dl-none { padding: 10px 12px; color: var(--text-secondary); font-size: .85rem; }
.mg-dl-board { display: flex; flex-direction: column; gap: 6px; }
.mg-dl-head, .mg-dl-row { display: grid; grid-template-columns: minmax(90px, 1.3fr) 5fr; gap: 6px; align-items: stretch; }
.mg-dl-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.mg-dl-h { font-size: .62rem; text-align: center; color: var(--text-secondary); line-height: 1.1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.mg-dl-h small { opacity: .7; }
.mg-dl-name { display: flex; flex-direction: column; justify-content: center; font-size: .74rem; line-height: 1.15; min-width: 0; }
.mg-dl-name b { overflow: hidden; text-overflow: ellipsis; }
.mg-dl-name span { color: var(--text-secondary); font-size: .64rem; }
.mg-dl-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; border-radius: 6px; background: var(--bg-panel); border: 1px solid var(--border-subtle); min-height: 44px; min-width: 0; }
.mg-dl-cell.near { background: rgba(240,170,40,.22); border-color: #e0a030; }
.mg-dl-cell.eq { background: rgba(76,175,80,.28); border-color: #4caf50; }
.mg-dl-v { font-size: .72rem; font-weight: 700; word-break: break-all; text-align: center; }
.mg-dl-a { font-size: .8rem; line-height: 1; }
.mg-dl-row--empty { min-height: 44px; border: 1px dashed var(--border-subtle); border-radius: 6px; opacity: .5; display: block; }
.mg-dl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.mg-dl-stats div { display: flex; flex-direction: column; align-items: center; }
.mg-dl-stats b { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent-gold); }
.mg-dl-stats span { font-size: .68rem; color: var(--text-secondary); }
.mg-dl-dist { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.mg-dl-dist div { display: flex; align-items: center; gap: 6px; font-size: .72rem; }
.mg-dl-dist i { background: var(--accent-blue); color: #000; font-style: normal; padding: 1px 6px; border-radius: 3px; text-align: right; }

@media (max-width: 680px) {
  .mg-rk-row, .mg-mem-grid { gap: 5px; }
  .mg-rk-name { font-size: .62rem; }
  .mg-mem-name { font-size: .62rem; padding: 2px; }
  .mg-st-duo { gap: 6px; }
  .mg-st-name { font-size: .78rem; }
  .mg-st-val { font-size: 1.3rem; }
  .mg-dl-head, .mg-dl-row { grid-template-columns: 72px 1fr; gap: 4px; }
  .mg-dl-cells { gap: 3px; }
  .mg-dl-v { font-size: .62rem; }
  .mg-dl-h { font-size: .54rem; }
}
.mg-rk-card .quiz-img { width: 100% !important; max-width: none !important; margin: 0 !important; }

/* ── Round 48: game chooser for a set, set label on game screens ── */
.play-fixed-set { font-family: var(--font-ui); font-size: .8rem; color: var(--text-secondary); padding: 3px 10px; border: 1px solid var(--border-subtle); border-radius: 999px; }
.play-mode-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.play-mode-box { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; background: var(--bg-deep); border: 1px solid var(--border-glow); border-radius: 14px; padding: 20px 18px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.play-mode-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; }
.play-mode-title { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .05em; color: var(--accent-gold); text-align: center; }
.play-mode-set { text-align: center; color: var(--text-secondary); font-size: .85rem; margin: 2px 0 14px; }
.play-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.play-mode-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; color: var(--text-primary); cursor: pointer; text-align: center; transition: border-color .15s, transform .15s; }
.play-mode-btn:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
.play-mode-icon { font-size: 1.5rem; }
.play-mode-name { font-family: var(--font-ui); font-weight: 700; font-size: .9rem; }
.play-mode-desc { font-size: .68rem; color: var(--text-secondary); line-height: 1.25; }
@media (max-width: 420px) { .play-mode-grid { gap: 7px; } .play-mode-desc { display: none; } }


/* ── Info facts / "Use info stats" (Round 50) ── */
.if-head { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.if-head span { text-transform: none; letter-spacing: 0; opacity: .7; font-size: .62rem; }
.if-chip { display: inline-flex; gap: 5px; align-items: baseline; padding: 3px 9px; border-radius: 999px; font-size: .74rem; color: var(--text-primary); background: rgba(58,143,255,.10); border: 1px solid rgba(58,143,255,.28); max-width: 100%; overflow-wrap: anywhere; }
.if-chip b { font-weight: 600; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.if-chip--link { cursor: pointer; }
.if-chip--link:hover { border-color: var(--accent-cyan); box-shadow: 0 0 10px rgba(0,229,255,.25); }
.sf-info { margin-top: 16px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.14); }
.sf-drivers { font-size: .8rem; margin: 4px 0 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.adv-info-toggle, .advsearch-info-toggle { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: .72rem; color: var(--text-secondary); cursor: pointer; padding: 6px 2px 2px; }
.adv-info-toggle input, .advsearch-info-toggle input { accent-color: var(--accent-cyan); width: auto; flex: 0 0 auto; margin: 0; }


.adv-info-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── HL board (Round 52): desktop — the AI card is centred with the PLAYER'S CARD (the player's counter hangs below the card without taking part in the centring) ── */
@media (min-width: 681px) {
  .game-side--player { position: relative; }
  .game-side--player .game-count { position: absolute; top: 100%; left: 0; right: 0; margin-top: .5rem; }
  .game-arena { margin-bottom: 4.6rem; }
}

/* ── Quiz (Round 52): desktop — several pictures are shown bigger (plenty of room, unlike on a phone); title-card picture ── */
.quiz-img.quiz-img--title:not(.quiz-img--duo) { max-width: 320px; background: rgba(255,255,255,.04); }
.quiz-img--title img { display: block; width: 100%; height: auto; }
@media (min-width: 681px) {
  .quiz--multi { max-width: 1040px; }
  .quiz--multi .quiz-question, .quiz--multi .quiz-answers, .quiz--multi .quiz-progress { max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; }
  .quiz--multi .quiz-duo--2 { max-width: 840px; gap: 18px; }
  .quiz--multi .quiz-duo--3 { max-width: 1000px; gap: 18px; }
  .quiz--multi .quiz-fulls--2 .quiz-full { flex: 0 0 300px; max-width: 300px; }
  .quiz--multi .quiz-fulls--3 .quiz-full { flex: 0 0 260px; max-width: 260px; }
}

/* Round 52: Advanced Search – extra stat rows */
.as-xstat { margin-top:6px; }
.as-xstat-del { background:none; border:1px solid var(--border,#444); color:var(--text-dim); border-radius:6px; padding:2px 8px; cursor:pointer; flex:0 0 auto; }
.as-xstat-del:hover { color:var(--accent-red,#e55); border-color:currentColor; }
.as-addstat-btn { margin-top:8px; font-size:.8rem; padding:4px 10px; }
.qcard-sort-stat--x { font-size:.72rem; opacity:.85; margin-top:2px; }
#asExtraStats .as-xstat-sel { flex:0 0 180px; max-width:180px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
@media (max-width:680px) { #asExtraStats .as-xstat-sel, #asStatSelect { flex-basis:130px; max-width:130px; } }

/* Round 52: Cancel next to the Resume tag on hub tiles */
.play-tile-tags { position:absolute; top:8px; right:8px; display:flex; gap:6px; align-items:center; }
.play-tile-tags .play-tile-tag { position:static; }
.play-tile-tag--cancel { background:transparent; color:var(--text-secondary,#bbb); border:1px solid var(--border-subtle,#555); cursor:pointer; }
.play-tile-tag--cancel:hover { color:#fff; border-color:var(--accent-red,#e55); background:rgba(229,85,85,.25); }
@media (max-width:680px) { .play-tile-tags { gap:3px; } }
.play-tile:has(.play-tile-tags) .play-tile-icon { margin-top: 12px; }
.report-field label.advsearch-info-toggle { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
/* Advanced Search: first stat row reserves the width of the ✕ button so all rows line up */
.advsearch-inline:has(#asStatSelect) { padding-right: 38px; }
.as-xstat-del { width: 30px; flex: 0 0 30px; padding: 2px 0; text-align: center; }

/* Round 53: per-set game records on set tiles (pick mode) and in the breadcrumb Play chooser */
.play-rec { margin-top: 4px; font-family: var(--font-ui); font-size: .7rem; letter-spacing: .04em; color: var(--accent-gold); font-weight: 700; }
.play-rec--none { color: var(--text-dim); font-weight: 400; opacity: .7; }
.play-mode-rec { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .04em; color: var(--accent-gold); font-weight: 700; }
.play-mode-rec.play-rec--none { color: var(--text-dim); font-weight: 400; opacity: .7; }

/* Round 59: the player card slot sits in a column flex (.game-side--player), so its WIDTH came from the picture's own
   pixel size — a small thumbnail made it narrower than the full-size picture does. Explicit width (the mobile rules
   above keep overriding it by id). */
.game-side--player .game-card-slot { width: 260px; }

/* Round 59: lightbox showing the thumbnail first — same on-screen size the full 670x1068 picture gets from the
   max-width/max-height rules above (so the swap to the full picture does not change the size at all). */
#imgLightbox img.lb-thumb { aspect-ratio: 670/1068; height: auto; width: min(90vw, calc(90vh * 670 / 1068)); }
@media (min-width: 681px) { #imgLightbox img.lb-thumb { width: min(650px, calc(85vh * 670 / 1068)); } }

/* ══ Round 61: Higher/Lower polish ══ */
/* board: small set title on top, compact "Your turn" field, smaller counter and buttons */
.game-board-title { font-size: .72rem; opacity: .4; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.game-wrap { gap: .7rem; }
.game-scorebar { width: auto; min-width: 230px; max-width: min(92vw, 460px); padding: .22rem .9rem; border-radius: 6px; }
.game-scorebar .game-score-mid { font-size: .82rem; min-height: 1.15em; padding: 0; }
.game-side--player .game-count-num { font-size: 1.55rem; }
.game-side--player .game-count-label { font-size: .62rem; }
.game-side--player .game-count-cards { font-size: .58rem; }
.game-hl-btns .game-btn { padding: .4rem 1.05rem; font-size: .8rem; }
.game-hl-row .game-chosen-attr { font-size: .78rem; opacity: .75; }
@media (min-width: 681px) { .game-arena { margin-bottom: 4rem; } }

/* the stat the opponent played glows on our card (and on its own card, once revealed) */
.game-attr-zone--static { pointer-events: none; }
.game-attr-zone--glow {
  /* cyan on purpose: card stat rows are yellow/orange, an amber glow vanishes on them */
  border-color: #00e5ff !important;
  background: rgba(0,229,255,.22);
  box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 12px 4px rgba(0,229,255,.9);
  animation: gameZoneGlow .9s ease-in-out infinite alternate;
}
@keyframes gameZoneGlow {
  from { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 5px 1px rgba(0,229,255,.55); background: rgba(0,229,255,.12); }
  to   { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 16px 6px rgba(0,229,255,1);   background: rgba(0,229,255,.34); }
}
@media (prefers-reduced-motion: reduce) { .game-attr-zone--glow { animation: none; } }

/* end-of-game stats panel */
.game-btn--stats { background: transparent; color: var(--text-primary); border: 1px solid var(--border-glow); font-size: .8rem; padding: .42rem 1rem; }
.game-result-box { --gs-you: #3a8fff; --gs-ai: #d9772b; max-width: 100%; box-sizing: border-box; }
[data-theme="white"] .game-result-box { --gs-you: #1f6feb; --gs-ai: #c2570c; }
.game-result-box--stats { width: min(580px, 96%); padding: 1rem 1.1rem 1.1rem; max-height: 96%; overflow-y: auto; text-align: left; }
.gs-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.gs-head .game-result-icon { font-size: 1.6rem; margin: 0; }
.gs-title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .06em; }
.gs-rows { display: flex; flex-direction: column; gap: 3px; font-size: .84rem; margin-bottom: .8rem; }
.gs-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.gs-lbl { color: var(--text-secondary); }
.gs-val b { font-weight: 700; color: var(--text-primary); }
.gs-chart-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.gs-chart-title { font-weight: 700; font-size: .9rem; }
.gs-chart-sub { font-size: .72rem; color: var(--text-secondary); }
.gs-toggle { background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: .72rem; padding: .25rem .6rem; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.gs-toggle:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.gs-chart { position: relative; }
.gs-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gs-grid { stroke: var(--border-subtle); stroke-width: 1; }
.gs-tick { fill: var(--text-secondary); font-size: 11px; font-family: var(--font-body); }
.gs-axis { fill: var(--text-secondary); font-size: 11px; font-family: var(--font-body); }
.gs-lab { fill: var(--text-primary); font-size: 11.5px; font-weight: 600; font-family: var(--font-body); }
.gs-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gs-line--you { stroke: var(--gs-you); }
.gs-line--ai { stroke: var(--gs-ai); }
.gs-end, .gs-hot { stroke: var(--bg-card); stroke-width: 2; }
.gs-end--you, .gs-hot--you { fill: var(--gs-you); }
.gs-end--ai, .gs-hot--ai { fill: var(--gs-ai); }
.gs-cross { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 3 3; }
#gs-hit { touch-action: pan-y; cursor: crosshair; }
.gs-tip { position: absolute; pointer-events: none; background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border-glow); border-radius: 6px; padding: 5px 9px; font-size: .74rem; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.45); white-space: nowrap; z-index: 2; }
.gs-tip-h { color: var(--text-secondary); font-size: .68rem; }
.gs-tablewrap { max-height: 230px; overflow-y: auto; margin-top: .5rem; border: 1px solid var(--border-subtle); border-radius: 6px; }
.gs-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.gs-table th, .gs-table td { padding: 4px 10px; text-align: right; border-bottom: 1px solid var(--border-subtle); }
.gs-table th:first-child, .gs-table td:first-child { text-align: left; }
.gs-table th { position: sticky; top: 0; background: var(--bg-card); color: var(--text-secondary); font-weight: 600; }
.gs-foot { display: flex; justify-content: center; margin-top: .9rem; }
@media (max-width: 680px) { .game-result-box--stats { padding: .8rem .8rem 1rem; } .gs-title { font-size: 1.25rem; } }

/* ══ Round 61b: lead chart, flawless victory, close button ══ */
.game-result-box { position: relative; }
.game-over-x { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: none; background: none; color: var(--text-secondary); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 6px; padding: 0; }
.game-over-x:hover { color: var(--text-primary); background: var(--border-subtle); }
.game-foot { gap: .5rem; flex-wrap: wrap; }
.game-flawless { display: inline-block; margin: .5rem 0 0; padding: .25rem .8rem; border: 1px solid var(--accent-gold); border-radius: 999px; color: var(--accent-gold); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.game-flawless--ai { border-color: var(--text-secondary); color: var(--text-secondary); }
.gs-head + .game-flawless { margin: 0 0 .7rem; }
.gs-area { stroke: none; opacity: .18; }
.gs-area--you { fill: var(--gs-you); }
.gs-area--ai { fill: var(--gs-ai); }
.gs-grid--zero { stroke: var(--text-secondary); opacity: .8; }
.gs-zone { fill: var(--text-secondary); font-size: 10.5px; font-family: var(--font-body); }
.gs-sw-dot.gs-sw--you { fill: var(--gs-you); }
.gs-sw-dot.gs-sw--ai { fill: var(--gs-ai); }
.gs-tip b { font-weight: 700; }

/* ══ Round 62: Slider reveal — the guess/actual track collapsed to 0 width inside the centred flex column of .quiz-reveal ══ */
.quiz-reveal .mg-track { align-self: stretch; }

/* ══ Round 63: Classic / Advanced ══ */
.game-adv-toggle { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: .8rem; color: var(--text-secondary); cursor: pointer; padding: 4px 10px; border: 1px solid var(--border-subtle); border-radius: 999px; }
.game-adv-toggle:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.game-adv-toggle input { accent-color: var(--accent-cyan); margin: 0; width: auto; flex: 0 0 auto; }
.game-hl-row--auto .game-hl-btns { display: none; }

/* Round 66: end-of-game choices (Play again / Change set / Exit) */
.game-end-btns { display: flex; gap: .6rem; margin-top: 1.1rem; justify-content: center; flex-wrap: wrap; }
.game-btn--ghost { background: rgba(255,255,255,.1); color: var(--text-primary); }
[data-theme="white"] .game-btn--ghost { background: rgba(0,0,0,.07); }
.gs-foot .game-end-btns { margin-top: 0; }

/* Round 67: pick bar = two rows (difficulty / actions); on phones the actions (Random game, Cancel) come first */
.gdb-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.game-difficulty-bar { column-gap: 18px; row-gap: 10px; }
@media (max-width: 680px) {
  #game-difficulty-bar { flex-direction: column; padding: 10px 12px; gap: 8px; }
  .gdb-row--actions { order: 1; }
  .gdb-row--diff { order: 2; }
  .game-diff-cancel-btn { margin-left: 0; }
  .gdb-row--diff { gap: 5px; }
  .gdb-row--diff .game-diff-btn { padding: 5px 10px; font-size: .74rem; }
  .gdb-row--diff .game-adv-toggle { padding: 4px 8px; font-size: .74rem; gap: 4px; }
  .gdb-row--diff .game-difficulty-label { font-size: .62rem; margin-right: 0; }
}
/* Round 67: Stop game button under a game screen */
.play-screen-foot { display: flex; justify-content: center; margin-top: 1rem; }

/* Round 68: Daily Card — clues, free start-values row */
.mg-dl-clues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-dl-clue { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 8px; border-radius: 10px; border: 1px dashed var(--border-glow); background: transparent; color: var(--text-primary); font-family: var(--font-ui); cursor: pointer; text-align: center; }
.mg-dl-clue small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.mg-dl-clue b { font-size: .9rem; line-height: 1.15; }
button.mg-dl-clue:hover { border-color: var(--accent-cyan); }
.mg-dl-clue.on { border-style: solid; border-color: var(--accent-gold); background: var(--bg-panel); cursor: default; }
.mg-dl-clue.on b { color: var(--accent-gold); }
.mg-dl-row--probe .mg-dl-name b { color: var(--accent-cyan); }
.mg-dl-pin { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 2px; text-align: center; font-size: .8rem; border-radius: 6px; border: 1px solid var(--border-glow); background: var(--bg-card); color: var(--text-primary); }
.mg-dl-probe-go { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .74rem; color: var(--text-secondary); }
.mg-dl-cell--empty { opacity: .5; }
@media (max-width: 680px) { .mg-dl-clue b { font-size: .8rem; } .mg-dl-pin { font-size: .72rem; padding: 7px 1px; } .mg-dl-probe-go { flex-direction: column; align-items: stretch; text-align: center; } }

/* Round 69: Daily Card — tile status, bonus clue, notes */
.play-tile-tag--solved { background: #3fae5a; color: #031; }
.play-tile-tag--played { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.mg-dl-clue--bonus { border-color: var(--accent-cyan) !important; }
.mg-dl-clue--bonus b { color: var(--accent-cyan) !important; }
.mg-dl-notes { display: flex; flex-direction: column; gap: 6px; }
.mg-dl-probe-go { justify-content: flex-end; }
@media (max-width: 680px) { .mg-dl-probe-go { flex-direction: row; align-items: center; justify-content: center; } }

/* Round 70: Mystery Card locked clues, tile records */
.mg-dl-clue--locked { cursor: default; opacity: .85; }
.mg-dl-clue--locked b { font-size: 1rem; }
.play-tile .play-rec { display: block; margin-top: auto; padding-top: 6px; }

/* Round 70: Real Quartett */
.rq { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; width: 100%; }
.rq-setup { align-items: center; text-align: center; gap: 16px; padding: 10px 0; }
.rq-rules { color: var(--text-secondary); font-size: .92rem; line-height: 1.5; max-width: 520px; }
.rq-count { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: .8rem; color: var(--text-secondary); }
.rq-top { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-ui); font-size: .8rem; color: var(--text-secondary); flex-wrap: wrap; }
.rq-opps { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.rq-opp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-primary); font-family: var(--font-ui); cursor: pointer; }
.rq-opp:disabled { cursor: default; }
.rq-opp b { font-size: .9rem; }
.rq-opp-cards { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-secondary); }
.rq-back { display: inline-block; width: 14px; height: 20px; border-radius: 3px; border: 1px solid var(--border-glow); background: repeating-linear-gradient(45deg, var(--bg-panel), var(--bg-panel) 3px, var(--bg-card) 3px, var(--bg-card) 6px); }
.rq-opp-laid { display: flex; gap: 3px; min-height: 16px; }
.rq-opp-laid u, .rq-mylaid u { text-decoration: none; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--accent-gold); color: #111; }
.rq-opp--turn { border-color: var(--accent-gold); }
.rq-opp--sel { border-color: var(--accent-cyan); box-shadow: 0 0 0 1px var(--accent-cyan) inset; }
.rq-status { text-align: center; font-family: var(--font-ui); font-size: .9rem; color: var(--text-secondary); min-height: 1.4em; }
.rq-status--me { color: var(--accent-cyan); font-weight: 700; }
.rq-log { display: flex; flex-direction: column; gap: 2px; min-height: 3.6em; font-size: .78rem; color: var(--text-dim); text-align: center; }
.rq-log-line--new { color: var(--text-primary); font-weight: 600; }
.rq-over { text-align: center; padding: 14px; border-radius: 12px; border: 1px solid var(--border-glow); background: var(--bg-card); }
.rq-over-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent-gold); margin-bottom: 8px; }
.rq-score { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-family: var(--font-ui); font-size: .8rem; color: var(--text-secondary); }
.rq-score div { display: flex; flex-direction: column; }
.rq-score .win b { color: var(--accent-gold); }

/* Round 71 — Quartett hand: fanned cards in a bar pinned to the bottom (tap = select, drag = reorder) */
.rq-handbar { position: sticky; bottom: 0; z-index: 30; margin: 4px -4px 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--accent-gold); border-radius: 14px 14px 0 0; background: linear-gradient(180deg, var(--bg-card), var(--bg-panel)); box-shadow: 0 -8px 22px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 6px; }
.rq-handhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--accent-gold); }
.rq-mylaid { display: flex; gap: 4px; align-items: center; font-size: .7rem; font-weight: 400; color: var(--text-secondary); }
.rq-mylaid u { text-decoration: none; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--accent-gold); color: #111; }
.rq-hint { text-align: center; font-family: var(--font-ui); font-size: .76rem; color: var(--text-secondary); min-height: 2.1em; display: flex; align-items: center; justify-content: center; }
.rq-ask { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; min-height: 2.1em; }
.rq-ask-lbl { font-family: var(--font-ui); font-size: .74rem; color: var(--text-secondary); }
.rq-ask-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--accent-cyan); background: rgba(255,255,255,.05); color: var(--text-primary); font-family: var(--font-ui); font-size: .78rem; cursor: pointer; }
.rq-ask-btn b { color: var(--accent-cyan); }
.rq-ask-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.rq-ask-btn:hover { background: var(--accent-cyan); color: #000; } .rq-ask-btn:hover b { color: #000; }
.rq-hand { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.rq-hrow { display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap; }
.rq-hc { position: relative; flex: 0 0 var(--rq-cw, 100px); width: var(--rq-cw, 100px); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .12s, box-shadow .12s; will-change: transform; border-radius: 8px; }
.rq-hc .rq-pic { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: none; background: rgba(255,255,255,.04); }
.rq-hrow + .rq-hrow { margin-top: calc(var(--rq-cw, 100px) * -0.62); }   /* second row tucks under the first like a real fan */
.rq-hc:hover { transform: translateY(-6px); z-index: 10; }
.rq-hc--wait { filter: brightness(.82); cursor: grab; }
.rq-hc--grp { transform: translateY(-6px); z-index: 5; }
.rq-hc--sel { transform: translateY(-16px); z-index: 11; box-shadow: 0 0 0 2px var(--accent-gold), 0 6px 14px rgba(0,0,0,.5); filter: none; }
.rq-hc--drag { cursor: grabbing; transition: none; transform: scale(1.06) rotate(-2deg); box-shadow: 0 12px 26px rgba(0,0,0,.55); z-index: 300; }
.rq-ph { background: rgba(255,255,255,.06); border: 2px dashed rgba(240,200,105,.55); box-shadow: none; transform: none !important; pointer-events: none; }
.rq-dots { position: absolute; left: 5px; top: 22px; display: flex; gap: 2px; pointer-events: none; }
.rq-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.rq-dots i.on { background: var(--accent-gold); }

/* Round 72 — cards fly between players */
.rq-fly { position: fixed; z-index: 400; pointer-events: none; will-change: transform; }
.rq-fly img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 12px 26px rgba(0,0,0,.6); }
.rq-hc--hide { visibility: hidden; }


/* Round 79: an unlocked (not yet opened) Mystery Card clue is a button */
.mg-dl-clue--ready { border-style: solid; border-color: var(--accent-cyan); background: var(--bg-panel); cursor: pointer; font: inherit; color: inherit; animation: mgClueReady 1.6s ease-in-out infinite; }
.mg-dl-clue--ready b { font-size: .8rem; color: var(--accent-cyan); }
@keyframes mgClueReady { 0%, 100% { box-shadow: 0 0 0 0 rgba(58,143,255,0); } 50% { box-shadow: 0 0 10px 1px rgba(58,143,255,.45); } }
@media (prefers-reduced-motion: reduce) { .mg-dl-clue--ready { animation: none; } }

/* Round 79: "← Previous question/round" in Quiz / Slider / Rank It, and the read-only review note */
.quiz-prev { align-self: flex-start; background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-family: var(--font-ui); font-size: .78rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.quiz-prev:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.quiz-review-note { align-self: flex-start; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-gold); }

/* ── Settings → Units window (Round 85) ── */
.uv-box { max-width: 560px; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
.uv-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 4px; margin-bottom: 8px; }
.uv-presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.uv-preset { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border-glow); background: transparent; color: var(--text-secondary); font: 600 .82rem var(--font-ui); cursor: pointer; }
.uv-preset.on { background: var(--accent-cyan); color: var(--bg-deep); border-color: var(--accent-cyan); }
.uv-custom { font-size: .74rem; opacity: .75; }
.uv-intro { margin: 0 0 10px; font-size: .76rem; opacity: .85; }
.uv-group { margin-bottom: 12px; }
.uv-ghead { font: 700 .68rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-cyan); margin: 4px 0 6px; border-bottom: 1px solid var(--border-glow); padding-bottom: 3px; }
.uv-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px; }
.uv-rlabel { flex: 0 0 118px; padding-top: 5px; color: var(--text-primary); font-size: .78rem; }
.uv-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.uv-chip { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-glow); background: transparent; color: var(--text-secondary); font: 600 .76rem var(--font-ui); cursor: pointer; }
.uv-chip:hover { border-color: var(--accent-cyan); }
.uv-chip.on { background: var(--accent-cyan); color: var(--bg-deep); border-color: var(--accent-cyan); }
.uv-foot { display: flex; justify-content: space-between; gap: 8px; }
.uv-reset, .uv-done { padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border-glow); background: transparent; color: var(--text-secondary); font: 600 .8rem var(--font-ui); cursor: pointer; }
.uv-done { background: var(--accent-cyan); color: var(--bg-deep); border-color: var(--accent-cyan); }
@media (max-width: 520px) { .uv-row { flex-direction: column; gap: 3px; } .uv-rlabel { flex: none; padding-top: 0; } }

/* ── Card modal: "More stats" fold (Round 86) ── */
.modal-more-btn { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: 1px dashed var(--border-glow); border-radius: 8px; padding: 5px 12px; color: var(--accent-cyan); font: 600 .72rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.modal-more-btn:hover { background: rgba(0, 229, 255, .08); }
.modal-more-btn .mm-arrow { display: inline-block; transition: transform .15s; }
.modal-more-btn.open .mm-arrow { transform: rotate(180deg); }
.modal-more { display: none; flex-direction: column; gap: calc(6px * var(--msp, 1)); }
.modal-more.open { display: flex; }
.mstat--x { border-style: dashed; }
.mstat--x .val { color: var(--text-primary); }
.modal-more-help { display: flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--text-secondary); padding: 0 4px; }
.modal-more-btn .mm-text { font-weight: 400; font-size: .62rem; letter-spacing: .06em; }
.modal-driver { color: var(--accent-cyan); font-style: normal; cursor: pointer; border-bottom: 1px dotted currentColor; }
.modal-driver:hover { text-shadow: 0 0 8px rgba(0,229,255,.5); }
/* Round 88: quiz difficulty */
.quiz-diff-title { font-family: var(--font-ui); font-size: 1.15rem; text-align: center; color: var(--text-primary); }
.quiz-diff-list { display: flex; flex-direction: column; gap: 10px; }
.quiz-diff-btn { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 16px; border-radius: 12px; cursor: pointer; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-subtle); border-left-width: 4px; transition: border-color .15s, transform .15s; }
.quiz-diff-btn:hover { transform: translateY(-1px); border-color: var(--accent-blue); }
.quiz-diff-btn b { font-family: var(--font-ui); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.quiz-diff-btn span { font-size: .8rem; color: var(--text-secondary); line-height: 1.35; }
.quiz-diff-btn--easy { border-left-color: #3ecf8e; }
.quiz-diff-btn--medium { border-left-color: var(--accent-gold); }
.quiz-diff-btn--hard { border-left-color: #ff5d6c; }
.quiz-diff-btn.last { box-shadow: 0 0 0 1px var(--accent-cyan) inset; }
.quiz-diff-tag { align-self: center; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 2px 12px; border-radius: 999px; border: 1px solid currentColor; }
.quiz-diff-tag--easy { color: #3ecf8e; }
.quiz-diff-tag--medium { color: var(--accent-gold); }
.quiz-diff-tag--hard { color: #ff5d6c; }
.mg-dl-board-top { display: flex; flex-direction: column; gap: 6px; }
.settings-hint { padding: 0 10px; font-size: .7rem; line-height: 1.3; color: var(--text-secondary); }
.mg-mem-grid--12 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 680px) { .mg-mem-grid--12 { grid-template-columns: repeat(4, 1fr); } }

  /* Round 95 — favorites + misprints */
  .fav-badge { position:absolute; right:7px; bottom:7px; z-index:2; color:#ff5c7a; background:rgba(7,8,15,.78); border:1px solid rgba(255,92,122,.45); border-radius:50%; padding:4px; line-height:0; }
  #favoritesBtn.on, #modalFavorite.fav-on { border-color: rgba(255,92,122,.5) !important; }
  .fav-view { width:100%; }
  .fav-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 20px 6px; font-family:var(--font-ui); }
  .fav-title { display:flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); }
  .fav-title svg { color:#ff5c7a; }
  .fav-title b { color:var(--accent-gold); }
  .fav-sorts { display:flex; gap:6px; }
  .misprint { display:inline-block; margin:0 6px 0 0; color:#ffb300; cursor:help; font-style:normal; font-weight:700; font-size:.9em; line-height:1; }
  .modal-title .misprint { margin:0 0 0 8px; }
  .misprint:focus-visible { outline:2px solid #ffb300; border-radius:3px; }
  .misprint-pop { position:fixed; z-index:6000; max-width:280px; background:#1b1f2e; color:#fff; border:1px solid #ffb300; border-radius:8px; padding:8px 11px; font:600 .78rem/1.35 var(--font-ui); box-shadow:0 8px 24px rgba(0,0,0,.5); pointer-events:none; }

/* ── Match the Titles (Round 95; Round 96: small items, uncropped title cards, connecting lines) ── */
.quiz.mt { max-width: 760px; }
.mt-board { position: relative; display: grid; grid-template-columns: var(--mtw) 52px calc(var(--mtw) * 1.25); justify-content: center; align-items: start; --mtw: 118px; --mth: calc((var(--mtw) - 10px) * 0.654 + 26px); }
.mt-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#mtRight { align-items: flex-start; }
.mt-item.mt-right.ok, .mt-item.mt-right.bad { width: 100%; }
.mt-lines { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; overflow: visible; }
.mt-item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 3px; height: var(--mth); box-sizing: border-box; border: 2px solid var(--border-subtle); border-radius: 10px; background: var(--bg-card); cursor: pointer; user-select: none; -webkit-user-select: none; min-width: 0; transition: border-color .12s, box-shadow .12s; }
.mt-item:hover { border-color: var(--accent-gold); }
.mt-item.sel { border-color: var(--accent-gold); box-shadow: 0 0 0 2px var(--accent-gold); }
.mt-item.paired { border-color: var(--mtc); }
.mt-item.ok { border-color: #4caf50; } .mt-item.bad { border-color: #e55; }
.mt-left { width: 100%; justify-content: center; }
.mt-pic { flex: none; width: 100%; aspect-ratio: 10 / 6.54; overflow: hidden; border-radius: 6px; }
.mt-pic .quiz-img { width: 100% !important; max-width: none !important; margin: 0 !important; height: 100% !important; border-radius: 0; pointer-events: none; }
.mt-pic .qcard-img { width: 100% !important; height: 100% !important; aspect-ratio: 10 / 6.54 !important; }
.mt-name { font-size: .66rem; line-height: 1.15; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: none; }
.mt-right.mt-item, .mt-item.mt-right { flex-direction: row; align-items: center; gap: 6px; width: auto; max-width: 100%; }
.mt-title { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 4px; pointer-events: none; flex: none; }
.mt-item.mt-right .mt-name { white-space: normal; text-align: left; font-size: .68rem; flex: 1; min-width: 0; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; }
.quiz-lock[disabled] { opacity: .45; cursor: not-allowed; }
@media (min-width: 681px) { .mt-board { grid-template-columns: var(--mtw) 90px calc(var(--mtw) * 1.5); } .mt-col { gap: 10px; } .mt-name { font-size: .74rem; } }

/* ── Globe (Round 96) ── */
.gl { display: flex; flex-direction: column; gap: 10px; max-width: 1100px; margin: 0 auto; width: 100%; }
.gl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-card); font-size: .78rem; cursor: pointer; color: var(--text-primary); }
.gl-chip input { accent-color: var(--accent-gold); }
.gl-sep { flex: 1 1 8px; }
.gl-lbl { font-size: .72rem; color: var(--text-secondary); letter-spacing: .06em; text-transform: uppercase; }
.gl-warp { padding: 5px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .76rem; cursor: pointer; }
.gl-warp.on { border-color: var(--accent-gold); color: var(--accent-gold); font-weight: 700; }
.gl-search { flex: 1 1 160px; min-width: 130px; max-width: 260px; padding: 6px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .8rem; }
.gl-main { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 861px) { .gl-main { grid-template-columns: 1fr 320px; align-items: start; } }
.gl-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 78vh; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, #0d1730 0%, #04060f 70%); border: 1px solid var(--border-subtle); }
@media (max-width: 860px) { .gl-stage { aspect-ratio: 1 / 1.05; } }
.gl-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.gl-stage canvas:active { cursor: grabbing; }
.gl-virtual { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(255,179,0,.16); border: 1px solid #ffb300; color: #ffcf5a; font: 700 .7rem/1 var(--font-ui); letter-spacing: .1em; pointer-events: auto; }
.gl-clock { position: absolute; top: 10px; right: 10px; font: 600 .7rem/1 var(--font-ui); color: rgba(255,255,255,.75); letter-spacing: .04em; pointer-events: none; }
.gl-tip { position: absolute; z-index: 5; display: flex; align-items: center; gap: 7px; max-width: 240px; padding: 5px 9px 5px 5px; border-radius: 9px; background: rgba(10,16,34,.92); border: 1px solid rgba(255,255,255,.25); color: #fff; font: 600 .74rem/1.2 var(--font-ui); pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.gl-tip[hidden] { display: none; }
.gl-tip-pic { width: 54px; flex: none; }
.gl-tip-pic .qcard-img { width: 100% !important; border-radius: 5px; }
.gl-tip-name { min-width: 0; overflow-wrap: anywhere; }
.gl-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.gl-zoom button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,16,34,.7); color: #fff; font-size: 1.1rem; cursor: pointer; }
.gl-panel { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-card); padding: 12px; min-height: 120px; }
.gl-card { display: flex; gap: 10px; align-items: center; }
.gl-card-pic { width: 96px; flex: none; }
.gl-card-pic .qcard-img { width: 100% !important; }
.gl-card-name { font-weight: 700; font-size: .98rem; line-height: 1.2; }
.gl-card-sub { font-size: .72rem; color: var(--text-secondary); margin-top: 3px; }
.gl-badge { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(255,179,0,.16); border: 1px solid #ffb300; color: #ffcf5a; font: 700 .6rem/1.4 var(--font-ui); letter-spacing: .1em; vertical-align: middle; }
.gl-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 10px 0; font-size: .8rem; }
.gl-dl dt { color: var(--text-secondary); } .gl-dl dd { margin: 0; font-weight: 600; }
.gl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gl-actions .on { border-color: var(--accent-gold); color: var(--accent-gold); }
.gl-foot { font-size: .72rem; color: var(--text-secondary); text-align: center; line-height: 1.5; }
.gl-foot > summary { cursor: pointer; list-style: none; display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); }
.gl-foot > summary::-webkit-details-marker { display: none; }
.gl-foot[open] > summary { margin-bottom: 6px; }
body.gl-noscroll { overflow: hidden; }
body.gl-noscroll nav { display: none !important; }
.gl.gl-big { position: fixed; inset: 0; z-index: 1500; max-width: none; margin: 0; padding: 0; background: #07080f; gap: 0; overflow: hidden; }
/* Round 143: enlarged = ONLY the globe, full screen (mode switch, filter bar, vehicle panel and race centre are hidden; Esc / the button brings them back) */
.gl.gl-big > :not(.gl-main), .gl.gl-big .gl-main > :not(.gl-stage) { display: none !important; }
.gl.gl-big .gl-main, .gl.gl-big .gl-main.gl-racing { display: block; flex: 1 1 auto; min-height: 0; height: 100%; }
.gl.gl-big .gl-stage { aspect-ratio: auto; max-height: none; height: 100%; border: 0; border-radius: 0; }

.gl-mil-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff6b5b; }
.gl-ended { margin: 4px 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffb300; background: rgba(255,179,0,.1); font-size: .78rem; line-height: 1.4; }
.gl-ended[hidden] { display: none; }
.gl-dl dd { overflow-wrap: anywhere; }

/* ── Round 106: race-track screens (race.js) ── */
.rc { display: flex; flex-direction: column; gap: 10px; max-width: 1200px; margin: 0 auto; width: 100%; }
.rc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rc-title { font-weight: 800; font-size: 1.15rem; }
.rc-title small { display: block; font-weight: 500; font-size: .72rem; color: var(--text-secondary); }
.rc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--text-secondary); flex: 1 1 200px; }
.rc-dbg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border: 1px dashed var(--border-subtle); border-radius: 12px; background: var(--bg-card); }
.rc-grp { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rc-btn { padding: 6px 14px; }
.rc-seek { flex: 1 1 100%; width: 100%; accent-color: var(--accent-gold); }
.rc-main { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 861px) { .rc-main { grid-template-columns: 1fr 380px; align-items: start; } }
.rc-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 78vh; border-radius: 14px; overflow: hidden; background: #1b2c20; border: 1px solid var(--border-subtle); }
@media (max-width: 860px) { .rc-stage { aspect-ratio: 1 / 1.05; } }
.rc-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.rc-fl { position: absolute; top: 40px; right: 10px; padding: 4px 10px; border-radius: 999px; background: #8a35d6; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 4px 14px rgba(138,53,214,.45); font: 700 .72rem/1.2 var(--font-ui); color: #fff; pointer-events: none; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-flag:not([hidden]) ~ .rc-fl { top: 70px; }   /* below the flag message when there is one */
.rc-clock { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(10,16,34,.7); font: 600 .72rem/1.2 var(--font-ui); color: #fff; pointer-events: none; }
.rc-panel { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-card); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); }
.rc-tab { padding: 6px 12px; border: 0; background: none; color: var(--text-secondary); font-size: .8rem; cursor: pointer; border-bottom: 2px solid transparent; }
.rc-tab.on { color: var(--accent-gold); border-bottom-color: var(--accent-gold); font-weight: 700; }
.rc-tabbody { max-height: 420px; overflow: auto; }
.rc-tbl { width: 100%; border-collapse: collapse; font-size: .76rem; }
.rc-tbl th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 3px 4px; position: sticky; top: 0; background: var(--bg-card); }
.rc-tbl td { padding: 4px; border-top: 1px solid var(--border-subtle); vertical-align: top; }
.rc-tbl tbody tr { cursor: pointer; }
.rc-tbl tbody tr.sel { background: rgba(255,214,102,.14); }
.rc-tbl tbody tr.out { opacity: .5; }
.rc-tbl tr.off td, .rc-tbl tr.clash td { opacity: .55; }
.rc-sub { font-size: .66rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.rc-num { display: inline-block; min-width: 22px; padding: 0 5px; border-radius: 6px; color: #101820; font: 800 .68rem/1.5 var(--font-ui); text-align: center; }
.rc-entryhead { font-size: .8rem; font-weight: 700; margin-bottom: 6px; }
.rc-entryhead .rc-sub { font-weight: 400; }
.rc-ev { list-style: none; margin: 6px 0 0; padding: 0; font-size: .76rem; display: flex; flex-direction: column; gap: 4px; }
.rc-ev time { color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-right: 4px; }
.rc-pitchip { align-self: flex-start; }

/* ── Round 107: Traffic / Racing switch, closable panels, race statistics, podium, weather ── */
/* Round 130: the Traffic / Racing switch is its own row, two big tabs */
.gl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 10px; }
.gl-segbtn { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--bg-card); color: var(--text-secondary); text-align: left; cursor: pointer; transition: transform .15s, border-color .2s, box-shadow .2s, background .2s; }
.gl-segbtn:hover { border-color: var(--accent-gold); color: var(--text-primary); transform: translateY(-1px); }
.gl-seg-ico { font-size: 1.6rem; line-height: 1; flex: none; }
.gl-seg-txt { display: flex; flex-direction: column; min-width: 0; }
.gl-seg-txt b { font-size: .98rem; letter-spacing: .04em; font-weight: 800; }
.gl-seg-txt small { font-size: .72rem; opacity: .75; font-weight: 500; line-height: 1.25; }
.gl-segbtn.on { background: linear-gradient(135deg, #ffd666 0%, #ff9f43 100%); border-color: transparent; color: #1a1205; box-shadow: 0 6px 22px rgba(255,170,60,.35), inset 0 1px 0 rgba(255,255,255,.45); }
.gl-segbtn.on small { opacity: .8; }
.gl-segbtn[data-mode="traffic"].on { background: linear-gradient(135deg, #7fd4ff 0%, #3a8fff 100%); box-shadow: 0 6px 22px rgba(58,143,255,.38), inset 0 1px 0 rgba(255,255,255,.4); color: #06142a; }
.gl-seg-live { position: absolute; top: 8px; right: 10px; padding: 2px 9px; border-radius: 999px; background: #e5383b; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .03em; animation: glLivePulse 1.6s ease-in-out infinite; }
.gl-seg-live[hidden] { display: none; }
@keyframes glLivePulse { 50% { opacity: .65; } }
@media (max-width: 520px) { .gl-segbtn { padding: 9px 10px; gap: 8px; } .gl-seg-ico { font-size: 1.3rem; } .gl-seg-txt small { display: none; } .gl-seg-live { top: auto; bottom: 5px; right: 8px; } }
.gl-main { position: relative; }
.gl-panel[hidden], .rc-sel[hidden], .rc-podium[hidden], .rc-rowtip[hidden] { display: none !important; }
@media (min-width: 861px) {
  .gl-main { grid-template-columns: 1fr; }
  .gl-panel { position: absolute; top: 44px; right: 10px; width: 310px; max-height: calc(100% - 60px); overflow: auto; z-index: 4; box-shadow: 0 8px 28px rgba(0,0,0,.5); }
}
.rc-sel { position: relative; }
@media (max-width: 860px) { .gl-panel { position: relative; } }
.rc-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-primary); font-size: .8rem; line-height: 1; cursor: pointer; z-index: 3; }
.rc-x:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.gl-panel .gl-card-main, .rc-sel .gl-card-main { padding-right: 26px; }
.rc-sel { padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
.rc-wx { position: absolute; top: 40px; left: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(10,16,34,.7); font: 600 .72rem/1.4 var(--font-ui); color: #fff; pointer-events: none; }
.rc-rowtip { position: fixed; z-index: 1700; }
.rc-car { cursor: pointer; }
.rc-car:hover { text-decoration: underline; text-decoration-color: var(--accent-gold); text-underline-offset: 3px; }
.rc-podium { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(6,10,22,.82); padding: 14px 10px 10px; overflow: auto; }
.rc-pod-title { font: 800 1.25rem/1 var(--font-ui); color: #ffd666; letter-spacing: .06em; text-transform: uppercase; }
.rc-pod { display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; max-width: 560px; }
.rc-pod-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.rc-pod-car { text-align: center; color: #fff; padding: 0 2px 6px; }
.rc-pod-pic { width: 100%; max-width: 120px; margin: 0 auto 4px; }
.rc-pod-pic .qcard-img { width: 100% !important; border-radius: 6px; }
.rc-pod-name { font-weight: 700; font-size: .78rem; line-height: 1.2; overflow-wrap: anywhere; }
.rc-pod-drv { font-size: .68rem; color: rgba(255,255,255,.7); overflow-wrap: anywhere; }
.rc-pod-gap { font-size: .68rem; color: #ffd666; margin-top: 2px; }
.rc-pod-step { display: flex; align-items: center; justify-content: center; font: 800 1.8rem/1 var(--font-ui); color: #101820; border-radius: 8px 8px 0 0; }
.p1 .rc-pod-step { height: 96px; background: linear-gradient(#ffe27a, #d9a520); }
.p2 .rc-pod-step { height: 70px; background: linear-gradient(#e6ebf2, #9aa5b4); }
.p3 .rc-pod-step { height: 52px; background: linear-gradient(#e0a070, #a1602f); }
.rc-modal { position: fixed; inset: 0; z-index: 1600; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 12px; }
.rc-modal-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; max-width: 1240px; width: 100%; max-height: 92vh; overflow: auto; padding: 14px 16px 16px; }
.rc-modal-card .rc-x { top: 10px; right: 10px; }
.rc-modal-title { font-weight: 800; font-size: 1.1rem; margin-bottom: 10px; padding-right: 34px; }
.rc-modal-title small { font-weight: 500; font-size: .76rem; color: var(--text-secondary); margin-left: 8px; }
.rc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.rc-tile { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.03); min-width: 0; }
.rc-tile-l { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.rc-tile-v { font-weight: 700; font-size: .95rem; margin-top: 2px; overflow-wrap: anywhere; }
.rc-tile-s { font-size: .7rem; color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.rc-tblwrap { overflow: auto; max-width: 100%; }
.rc-stbl { font-size: .72rem; white-space: nowrap; }
.rc-stbl th.srt { cursor: pointer; } .rc-stbl th.on { color: var(--accent-gold); }
.rc-stbl tbody tr.sel { background: rgba(255,214,102,.14); }
@media (max-width: 860px) { .rc-podium .rc-pod-pic { max-width: 80px; } }

/* Round 108 — race control flag badge, clickable podium */
.rc-flag { position: absolute; top: 40px; right: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(20,20,10,.82); border: 1px solid rgba(255,212,0,.7); color: #ffd400; font: 800 .74rem/1.4 var(--font-ui); letter-spacing: .03em; pointer-events: none; z-index: 2; }
.rc-flag.sc { background: #ffd400; color: #1a1400; border-color: #fff; animation: rcFlagBlink 1.4s ease-in-out infinite; }
.rc-flag.red { background: #e10600; color: #fff; border-color: #fff; }   /* Round 122: red flag */
@keyframes rcFlagBlink { 50% { opacity: .75; } }
.rc-flag[hidden] { display: none !important; }
.rc-pod-col[data-cid]:hover .rc-pod-name { text-decoration: underline; text-decoration-color: var(--accent-gold); text-underline-offset: 3px; }

/* Round 109 — category legend on the race map */
.rc-legend { position: absolute; left: 10px; bottom: 10px; right: 60px; display: flex; flex-wrap: wrap; gap: 4px 10px; pointer-events: none; z-index: 2; }
.rc-leg { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(10,16,34,.75); color: #fff; font: 600 .68rem/1.4 var(--font-ui); }
.rc-leg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.5); }
.rc-leg small { opacity: .65; }
/* Round 115: weather panel under the car panel */
.rc-wxp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 6px 8px; border: 1px solid var(--border-subtle); border-radius: 10px; font: .72rem/1.35 var(--font-ui); }
.rc-wxp > div { display: flex; justify-content: space-between; gap: 6px; min-width: 0; }
.rc-wxp span { color: var(--text-muted, #889); white-space: nowrap; }
.rc-wxp b { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sel .gl-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Round 117: standings table - fixed column widths, one line per car (a long car name wrapping to a second row changed the row height and made the table jump) */
.rc-stand { table-layout: fixed; }
.rc-stand .c-pos { width: 34px; } .rc-stand .c-laps { width: 50px; } .rc-stand .c-gap { width: 64px; }
.rc-stand th, .rc-stand td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-stand td { font-variant-numeric: tabular-nums; }
.rc-stand .rc-sub { min-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

/* Round 119e: phone - the map overlays no longer sit on top of each other (VIRTUAL badge hidden, clock top-left, weather under it, flag at the bottom) */
@media (max-width: 680px) {
  .rc-stage .gl-virtual { display: none; }
  .rc-fl, .rc-flag:not([hidden]) ~ .rc-fl { left: 8px; right: auto; top: 60px; font-size: .66rem; max-width: calc(100% - 16px); }
  .rc-clock { left: 8px; right: auto; top: 8px; font-size: .66rem; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc-wx { top: 34px; left: 8px; font-size: .66rem; }
  .rc-flag { top: auto; bottom: 8px; left: 8px; right: 60px; font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Round 123: start lights */
.rc-lights { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(8,8,10,.88); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; pointer-events: none; }
.rc-lights[hidden] { display: none !important; }
.rc-lpods { display: flex; gap: 10px; }
.rc-lpod { display: flex; flex-direction: column; gap: 7px; padding: 7px; background: #151518; border-radius: 9px; border: 1px solid #2a2a30; }
.rc-bulb { display: block; width: 26px; height: 26px; border-radius: 50%; background: #2a0b0b; box-shadow: inset 0 0 6px rgba(0,0,0,.8); }
.rc-bulb.on.red { background: #ff2222; box-shadow: 0 0 16px 3px rgba(255,34,34,.75); }
.rc-bulb.on.amber { background: #ffb000; box-shadow: 0 0 14px 2px rgba(255,176,0,.7); }
.rc-bulb.amber-dim { background: #3a2a05; }
.rc-bulb.on.green { background: #22e04a; box-shadow: 0 0 16px 3px rgba(34,224,74,.75); }
.rc-lights-txt { font: 800 .8rem/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
@media (max-width: 700px) { .rc-bulb { width: 16px; height: 16px; } .rc-lpods { gap: 6px; } .rc-lpod { padding: 4px; gap: 4px; } .rc-lights { padding: 8px 10px; } }

/* Round 125: time-trial standings (sector times) */
.rc-tt col.c-sec { width: 46px; } .rc-tt col.c-tot { width: 78px; }
.rc-tt td:nth-child(n+3) { font-size: .78em; } .rc-tt td:nth-child(6) { font-size: .86em; }
.rc-tt td:nth-child(n+3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-tt td.rc-best { color: #c58bff; font-weight: 700; }
.rc-tt tr.rc-wait td { opacity: .55; }

/* Round 125: circuit blip tooltip with a tiny outline of the track */
.gl-tip-map { flex: none; width: 100px; height: 70px; border-radius: 6px; background: rgba(120,150,255,.07); display: flex; align-items: center; justify-content: center; }
.gl-tip-map svg { display: block; }
.gl-tip-map:empty { background: rgba(120,150,255,.05); }

.gl-tip:has(.gl-tip-map) { max-width: 310px; }

/* Round 130: race centre (racing globe): live / up next / earlier, focus card with the track outline */
.gl-race { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-card); padding: 12px; min-width: 0; }
@media (min-width: 861px) { .gl-main.gl-racing { grid-template-columns: 1fr 360px; } .gl-race { max-height: 640px; overflow: auto; } }
.gl-rc-card { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 8px; }
.gl-rc-card--live { border-color: rgba(229,56,59,.7); box-shadow: 0 0 0 1px rgba(229,56,59,.25) inset; }
.gl-rc-badge { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; background: var(--bg-panel); color: var(--text-secondary); }
.gl-rc-badge--live { background: #e5383b; color: #fff; animation: glLivePulse 1.6s ease-in-out infinite; }
.gl-rc-badge--next { background: #ffd666; color: #1a1205; }
.gl-rc-card-body { display: flex; gap: 10px; align-items: center; }
.gl-rc-card-body .gl-tip-map { flex: none; }
.gl-rc-card-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .76rem; color: var(--text-secondary); }
.gl-rc-card-info b { color: var(--text-primary); font-size: .92rem; line-height: 1.25; }
.gl-rc-ser { color: var(--accent-gold); font-weight: 700; }
.gl-rc-prog { display: flex; flex-direction: column; gap: 4px; }
.gl-rc-bar { height: 6px; border-radius: 999px; background: var(--bg-panel); overflow: hidden; }
.gl-rc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff9f43, #e5383b); border-radius: 999px; transition: width .4s linear; }
.gl-rc-card-t, .gl-rc-local { font-size: .74rem; color: var(--text-secondary); }
.gl-rc-open { align-self: stretch; }
.gl-rc-h { margin: 8px 0 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); display: flex; gap: 8px; align-items: center; }
.gl-rc-h span { background: var(--bg-panel); border-radius: 999px; padding: 0 8px; font-size: .7rem; }
.gl-rc-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text-primary); text-align: left; cursor: pointer; }
.gl-rc-row:hover, .gl-rc-row.on { background: rgba(255,255,255,.06); border-color: var(--border-subtle); }
.gl-rc-row.on { border-color: var(--accent-gold); }
.gl-rc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.gl-rc-r1 { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gl-rc-r1 b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-rc-r1 small { font-size: .68rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-rc-t { font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); flex: none; }
.gl-rc-row .gl-rc-t[data-k="live"] { color: #ff8a8a; font-weight: 700; }
.gl-rc-empty { font-size: .76rem; color: var(--text-secondary); padding: 4px 2px; }
.gl-tip-live { color: #ff8a8a; font-weight: 700; font-size: .74rem; }
.gl-rc-card--prev .gl-rc-bar i, .gl-rc-card--next .gl-rc-bar i { background: var(--text-secondary); opacity: .5; }

/* Round 131 - "where is this card now" chips in the card modal */
.modal-where { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-where[hidden] { display: none; }
.modal-where-chip { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-panel); color: var(--text-secondary); font-family: var(--font-ui); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.modal-where-chip:hover { border-color: var(--accent-blue); }
.modal-where-chip .mw-ico { font-size: 1.05rem; flex: none; }
.modal-where-chip .mw-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.modal-where-chip .mw-txt b { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--text-primary); }
.modal-where-chip .mw-txt small { font-size: .72rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-where-chip .mw-go { font-size: .8rem; flex: none; opacity: .75; }
.modal-where-chip--live { border-color: rgba(229,56,59,.65); }
.modal-where-chip .mw-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5383b; margin-right: 6px; vertical-align: 1px; animation: glLivePulse 1.6s ease-in-out infinite; }

/* Round 131 - race centre tabs + standings (preview) */
.gl-rc-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--bg-panel); align-self: stretch; }
.gl-rc-tab { flex: 1; border: 0; background: transparent; color: var(--text-secondary); font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.gl-rc-tab.on { background: var(--accent-blue); color: #fff; }
#glRcBody, #glRcSt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#glRcBody[hidden], #glRcSt[hidden] { display: none; }
.st { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-ser { width: 100%; max-width: 100%; }
.st-tabs { display: flex; gap: 6px; }
.st-tab { flex: 1; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); border-radius: 8px; padding: 5px 8px; font-family: var(--font-ui); font-size: .76rem; font-weight: 700; cursor: pointer; }
.st-tab.on { border-color: var(--accent-blue); color: var(--text-primary); background: rgba(58,143,255,.14); }
.st-sub { font-size: .72rem; color: var(--text-dim); }
.st-body { display: flex; flex-direction: column; gap: 2px; min-height: 80px; }
.st-body.st-loading { opacity: .45; }
.st-row { display: grid; grid-template-columns: 20px 30px minmax(0, 1fr) auto 38px; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-family: var(--font-ui); text-align: left; }
button.st-row { cursor: pointer; }
button.st-row:hover { background: rgba(255,255,255,.06); }
.st-head { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.st-pos { font-size: .78rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.st-top1 .st-pos { color: #ffd666; } .st-top2 .st-pos { color: #cfd6e6; } .st-top3 .st-pos { color: #d99a5b; }
.st-pic { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; position: relative; flex: none; background: var(--bg-panel); display: block; }
.st-pic .qcard-img { position: absolute; top: 0; height: 100%; width: auto; aspect-ratio: 10 / 6.54; left: 50%; transform: translateX(-50%); border-radius: 0; }
.st-pic .qcard-placeholder { font-size: .9rem; } .st-pic .qcard-placeholder span { display: none; }
.st-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.st-who b { font-size: .8rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-who small { font-size: .68rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-form { display: inline-flex; gap: 2px; justify-content: flex-end; }
.st-dot { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-style: normal; font-size: .56rem; font-weight: 800; background: rgba(143,152,189,.28); color: var(--text-secondary); }
.st-dot--win { background: #ffd666; color: #1a1205; } .st-dot--pod { background: #7fd4ff; color: #04202d; } .st-dot--pts { background: #6bd68b; color: #06210f; } .st-dot--out { background: transparent; border: 1px solid #e5383b; color: #ff8a8a; }
.st-pts { font-size: .86rem; font-weight: 800; text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.st-n, .st-make { font-size: .76rem; text-align: center; font-variant-numeric: tabular-nums; }
.st-rec { display: grid; grid-template-columns: 1fr; gap: 6px; }
.st-rec-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; color: var(--text-secondary); font-family: var(--font-ui); text-align: left; }
.st-rec-card:hover { border-color: var(--accent-blue); }
.st-rec-card .st-who { flex: 1; } .st-rec-card .st-who small:first-child { text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; }
.st-rec-n { font-size: 1.4rem; font-weight: 800; color: #ffd666; }
.st-all { align-self: stretch; }
.st-overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(7,8,15,.88); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.st-panel { width: min(860px, 100%); min-height: min(640px, 100%); max-height: 100%; overflow: auto; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px 16px 18px; }
.st-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.st-panel-h h3 { margin: 0; font-family: var(--font-ui); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }
.st-x { border: 0; background: transparent; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
.st--full .st-row { grid-template-columns: 24px 30px minmax(0, 1fr) 110px 30px 34px 34px 30px 96px 44px; }
.st--full .st-head + .st-row, .st--full .st-row { font-size: .8rem; }
.st--full .st-rec { grid-template-columns: repeat(2, 1fr); }
.st--full .st-ser { max-width: 420px; }
@media (max-width: 640px) {
  .st--full .st-row { grid-template-columns: 20px 28px minmax(0, 1fr) 24px 30px 38px; }
  .st--full .st-form { display: none; }
    .st--full .st-make, .st--full .st-opt { display: none; }
  .st--full .st-rec { grid-template-columns: 1fr; }
}

/* Round 134 - track type checkboxes, stats icon of earlier races */
.gl-types { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gl-types-l { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-right: 2px; }
.gl-types .gl-chip small { opacity: .65; margin-left: 2px; }
.gl-venues { display: contents; }
.gl-rc-st { opacity: .8; }

/* Round 135 - category checkboxes in the entry list */
.rc-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* Round 135 - period tabs, track records */
.st-per .st-tab { padding: 4px 6px; font-size: .72rem; }
.st-panel-h h3 small { font-size: .72rem; letter-spacing: .04em; text-transform: none; color: var(--text-dim); margin-left: 8px; }
.st-rec--tr { grid-template-columns: 1fr; gap: 10px; }
.st-panel .st-rec--tr { grid-template-columns: repeat(2, 1fr); }
.st-trk { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 12px; }
.st-trk h4 { margin: 0 2px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-gold); }
.st-trk .st-rec-card { background: rgba(255,255,255,.03); }
.st-trk .st-rec-card b { font-size: 1rem; }
@media (max-width: 640px) { .st-panel .st-rec--tr { grid-template-columns: 1fr; } }
.gl-types .gl-typeall { padding: 2px 10px; cursor: pointer; font-size: .72rem; }

/* Round 139: live race row progress line, schedule tab, map tip progress */
.gl-rc-row { position: relative; }
.gl-rc-prog--row { position: absolute; left: 9px; right: 9px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--bg-panel); overflow: hidden; display: block; }
.gl-rc-prog--row i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff9f43, #e5383b); transition: width .4s linear; }
.gl-sch-time { font-size: .78rem; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary); flex: none; width: 3.1em; }
.gl-sch-special .gl-rc-r1 b::after { content: ' ★'; color: var(--accent-gold); }
.gl-sch-tz { font-size: .72rem; color: var(--text-dim); margin: 2px 2px 4px; }
.gl-tip-prog { font-size: .78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Round 140: race map enlarged, mini bar, per-race schedule, schedule search, calendar */
.rc-mini { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 4px; flex-wrap: wrap; z-index: 3; max-width: calc(100% - 60px); }
.rc-mini[hidden] { display: none; }
.rc.rc-big .rc-main { position: fixed; inset: 0; z-index: 1500; margin: 0; padding: 10px; background: #07080f; gap: 8px; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.rc.rc-big .rc-stage { aspect-ratio: auto; max-height: none; height: 100%; }
.rc.rc-big .rc-panel { max-height: 100%; overflow: auto; }
@media (max-width: 860px) { .rc.rc-big .rc-main { grid-template-rows: minmax(0, 1fr) auto; } .rc.rc-big .rc-panel { max-height: 38vh; } }
.rc-sch { border-top: 1px solid var(--border-subtle); padding-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.rc-sch[hidden] { display: none; }
.rc-sch-h { margin: 0 0 2px; font-size: .78rem; letter-spacing: .04em; color: var(--text-secondary); }
.rc-sch-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 7px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text-primary); text-align: left; cursor: pointer; font-size: .78rem; }
.rc-sch-row:hover:not(.on) { background: rgba(255,255,255,.06); border-color: var(--border-subtle); }
.rc-sch-row.on { border-color: var(--accent-gold); background: rgba(255,214,102,.08); cursor: default; }
.rc-sch-d { display: flex; flex-direction: column; flex: none; width: 7.2em; white-space: nowrap; color: var(--text-secondary); font-size: .7rem; line-height: 1.15; }
.rc-sch-d b { color: var(--text-primary); font-size: .8rem; font-variant-numeric: tabular-nums; }
.rc-sch-s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sch-live { color: #ff6b6b; font-style: normal; }
.rc-sch-row i { font-style: normal; flex: none; }
.gl-sch-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.gl-sch-bar .gl-search { flex: 1; min-width: 0; }
.gl-sch-cal { flex: none; padding: 6px 10px; font-size: .76rem; }
.gl-cal { position: fixed; inset: 0; z-index: 2600; background: rgba(3,5,12,.82); display: flex; align-items: center; justify-content: center; padding: 14px; }
.gl-cal-box { width: min(1500px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 8px; background: #0b0f1d; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px; min-height: 0; }
.gl-cal-head { display: flex; align-items: center; justify-content: space-between; }
.gl-cal-head h3 { margin: 0; font-size: 1.05rem; }
.gl-cal-x { border: 0; background: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; }
.gl-cal-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gl-cal-date { margin: 0 6px; font-size: .86rem; }
.gl-cal-views { margin-left: auto; display: flex; gap: 4px; }
.gl-cal-tools .gl-search { min-width: 160px; flex: 0 1 220px; }
.gl-cal-scroll { overflow: auto; min-height: 0; border: 1px solid var(--border-subtle); border-radius: 10px; background: #080b16; }
.gl-cal-grid { width: var(--cal-w); min-width: 100%; }
.gl-cal-axis, .gl-cal-row { display: flex; border-bottom: 1px solid rgba(255,255,255,.05); }
.gl-cal-axis { position: sticky; top: 0; z-index: 4; background: #0b0f1d; height: 26px; }
.gl-cal-lab { position: sticky; left: 0; z-index: 3; flex: none; width: 150px; padding: 4px 8px; background: #0b0f1d; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.gl-cal-lab b { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-cal-lab small { font-size: .65rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-cal-track { position: relative; flex: 1; height: 40px; }
.gl-cal-axis .gl-cal-track { height: 26px; }
.gl-cal-axis span { position: absolute; top: 6px; transform: translateX(3px); font-size: .66rem; color: var(--text-secondary); white-space: nowrap; }
.gl-cal-lines { position: absolute; inset: 0; pointer-events: none; }
.gl-cal-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.05); }
.gl-cal-lines i.day { background: rgba(255,255,255,.16); }
.gl-cal-lines em { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff5d5d; z-index: 2; }
.gl-cal-lines em span { display: none; }
.gl-cal-bar { position: absolute; top: 6px; height: 28px; border: 0; border-radius: 7px; color: #fff; font-size: .68rem; font-weight: 700; padding: 0 6px; cursor: pointer; overflow: hidden; text-align: left; box-shadow: 0 1px 4px rgba(0,0,0,.45); z-index: 1; }
.gl-cal-bar span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-cal-bar:hover { filter: brightness(1.25); z-index: 3; }
.gl-cal-bar.sp { box-shadow: inset 0 0 0 2px var(--accent-gold), 0 1px 4px rgba(0,0,0,.45); }
.gl-cal-bar.live { box-shadow: inset 0 0 0 2px #ff5d5d, 0 0 8px rgba(255,93,93,.55); }
@media (max-width: 640px) { .gl-cal { padding: 0; } .gl-cal-box { border-radius: 0; height: 100%; } .gl-cal-lab { width: 104px; } .gl-cal-views { margin-left: 0; } }
.gl-cal-views + .gl-cal-views { margin-left: 0; }

/* Round 145: hover panel of the "Racing now" chip (card modal) */
.rc-chiptip { position: fixed; z-index: 4000; width: 244px; padding: 10px 12px; border-radius: 12px; background: rgba(10,16,34,.97); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 8px 26px rgba(0,0,0,.55); color: var(--text-primary); pointer-events: none; font-size: .76rem; line-height: 1.3; }
.rct-h { display: flex; flex-direction: column; margin-bottom: 7px; } .rct-h b { font-size: .84rem; } .rct-h small { color: var(--text-secondary); }
.rct-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; } .rct-bar i { display: block; height: 100%; background: #e5383b; }
.rct-lap { margin: 5px 0 2px; font-variant-numeric: tabular-nums; font-weight: 600; } .rct-lap small { color: var(--text-secondary); font-weight: 400; }
.rct-pos { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 4px; } .rct-pos b { font-size: 1.15rem; color: var(--accent-gold); } .rct-pos span { color: var(--text-secondary); }
.rct-map { display: block; margin: 6px auto 0; max-width: 100%; height: auto; } .rct-wait { text-align: center; color: var(--text-secondary); padding: 8px 0; }

/* Round 145: "Virtual globe data" in the card modal */
.virt-sec { margin-bottom: 14px; } .virt-sec h5 { margin: 0 0 8px; font-size: .86rem; letter-spacing: .03em; color: var(--text-primary); }
.virt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.virt-tile { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 2px; }
.virt-tile b { font-size: 1.05rem; color: var(--accent-gold); font-variant-numeric: tabular-nums; } .virt-tile span { font-size: .7rem; color: var(--text-secondary); }
.virt-sub { margin: 10px 0 4px; font-size: .72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.virt-list { display: flex; flex-direction: column; gap: 4px; }
.virt-race { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,.03); color: var(--text-primary); font-size: .76rem; text-align: left; cursor: pointer; }
.virt-race:hover { border-color: var(--accent-blue); } .virt-rd { flex: none; width: 8.2em; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .virt-rn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .virt-rt { flex: none; opacity: .85; }
.virt-note { margin: 10px 0 0; font-size: .72rem; color: var(--text-secondary); line-height: 1.45; }

/* Round 146: calendar race = map only; Custom Race = debug bar + panel; schedule of the circuit under the map; custom race chips */
.rc-view .rc-dbg { display: none; }
.rc-view.rc-wait .rc-panel > :is(.rc-sel, .rc-wxp, .rc-tabs, .rc-tabbody) { display: none; }      /* Round 149 / 152: with no race on the map the panel only keeps the track records and the schedule */
.rc-sch-d2 > summary { cursor: pointer; list-style: none; user-select: none; }
.rc-sch-d2 > summary::-webkit-details-marker { display: none; }
.rc-sch-d2 > summary::after { content: '▾'; float: right; opacity: .7; }
.rc-sch-d2[open] > summary::after { content: '▴'; }
.rc-sch-d2[open] > summary { margin-bottom: 6px; }
.rc.rc-big .rc-stage { aspect-ratio: auto; max-height: none; }
.rc-livebar { font-size: .84rem; color: var(--text-secondary); padding: 2px 2px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-livebar[hidden], .rc-custbar[hidden] { display: none; }
.rc-livebar b { color: var(--text-primary); }
.rc-livebar .mw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff4b4b; box-shadow: 0 0 0 3px rgba(255,75,75,.25); }
.rc-custbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .78rem; color: var(--text-secondary); }
.rc-clbl { font-weight: 700; color: var(--text-primary); }
.rc-chint { opacity: .8; }
.rc-cchip { position: relative; display: inline-flex; align-items: stretch; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-card); overflow: hidden; }
.rc-cchip.on { border-color: var(--accent-gold); }
.rc-cgo { position: relative; padding: 5px 10px; border: 0; background: none; color: var(--text-primary); font-size: .76rem; cursor: pointer; }
.rc-cgo small { color: var(--text-secondary); margin-left: 2px; }
.rc-cgo i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent-gold); }
.rc-cx { padding: 0 9px; border: 0; border-left: 1px solid var(--border-subtle); background: none; color: var(--text-secondary); cursor: pointer; }
.rc-cx:hover { color: #ff6b6b; }
.rc-sch { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-card); padding: 10px; display: flex; flex-direction: column; gap: 3px; max-width: 620px; }
/* Round 147: the card modal's "Virtual globe data" sits right under the radar (the radar's auto bottom margin made a gap), race screen schedule in one column */
.modal-radar:has(+ .modal-virt:not([hidden])) { margin-bottom: 0; }
.modal-virt { margin: 8px auto auto; }
@media (max-width: 680px) { .modal-virt { margin: 0; } }
.virt-rt b { font-weight: 800; color: var(--text-primary); }
.virt-rt .virt-dnf { color: #ff8a8a; }

/* Round 151: heat card of a speedway / ice speedway meeting */
.rc-hc-card { max-width: min(1100px, 96vw); }
.rc-hc { border-collapse: separate; border-spacing: 0; }
.rc-hc th, .rc-hc td { padding: 2px 3px; text-align: center; white-space: nowrap; border-top: 0; }
.rc-hc td.hc-r, .rc-hc th.hc-r { text-align: left; padding-right: 10px; min-width: 150px; }
.rc-hc .hc-n { width: 1.8em; color: var(--text-secondary); }
.rc-hc .hc-p { padding: 2px 8px; }
.rc-hc td.hc { width: 26px; min-width: 26px; height: 26px; background: #2a2e39; border: 2px solid var(--bg-card); border-radius: 5px; font-weight: 800; font-size: .8rem; color: #111; }
.rc-hc td.hc.g1 { background: #e5383b; color: #fff; } .rc-hc td.hc.g2 { background: #3b6bf0; color: #fff; }
.rc-hc td.hc.g3 { background: #f4f4f4; } .rc-hc td.hc.g4 { background: #f2e61e; }
.rc-hc .hc-gap { border-left: 8px solid transparent; }
.rc-hc td.hc.hc-gap { border-left: 8px solid var(--bg-card); }
.rc-hc tbody tr { cursor: default; }
.rc-hc tr.hc-semi td.hc-r, .rc-hc tr.hc-semi td.hc-n { box-shadow: inset 3px 0 0 #3b6bf0; }
.rc-hc tr.hc-fin td.hc-r, .rc-hc tr.hc-fin td.hc-n { box-shadow: inset 3px 0 0 var(--accent-gold); background: rgba(255,214,102,.07); }
.rc-hc .hc-win { color: var(--accent-gold); }
.rc-hc-note { margin: 10px 2px 0; font-size: .72rem; color: var(--text-secondary); line-height: 1.45; }

/* ── Round 152: race screen layout ── */
.rc-top { max-width: 1200px; margin: 0 auto 10px; width: 100%; }
button.rc-title { background: none; border: 0; padding: 0; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
button.rc-title:hover { color: var(--accent-gold); }
.rc-rec { align-self: flex-start; }
.rc-panel .rc-sch { border: 0; border-radius: 0; background: none; padding: 0; max-width: none; }
.rc-panel .rc-sch-d2 { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 7px 9px; }
.rc-panel .rc-wxp:empty { display: none; }