/* Metric-matched local fallbacks so the page doesn't reflow when the web fonts swap in (measured at 412px: hero and welcome box within 1px). */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Liberation Sans'), local('Arimo'); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); size-adjust: 108%; }
@font-face{font-family:'Inter Fallback R';src:local('Roboto');size-adjust:106.7%;}@font-face{font-family:'Inter Fallback D';src:local('DejaVu Sans');size-adjust:94.5%;}@font-face{font-family:'Fraunces Fallback L';src:local('Liberation Serif'),local('Tinos');size-adjust:117%;}@font-face{font-family:'Fraunces Fallback D';src:local('DejaVu Serif');size-adjust:92%;}
  :root{
    --walnut:#2b211b; --felt:#35493b; --brass:#b08d57; --parchment:#ede3d3; --brick:#a63a32;
    --felt-light:#42604f; --walnut-light:#3a2d24;

    --bg-page: var(--parchment);
    --bg-card: #fff;
    --bg-card-alt: #fdfbf6;
    --border-color: #dccfb6;
    --border-color-soft: #f0e9da;
    --text-primary: var(--walnut);
    --text-secondary: #7a705f;
    /* Darkened from #9a9078 -- that value was 2.49:1 on --bg-page and 3.17:1
       on --bg-card, both failing the 4.5:1 normal-text minimum. This passes
       4.74:1 / 6.02:1 respectively. See accessibility-audit-game-shelf.md
       finding #1. Dark mode's --text-muted (#a89c84, 6.61:1) was already
       fine and is untouched. */
    --text-muted: #6b6250;
    --shadow-color: rgba(43,33,27,.14);
    --text-accent-green: var(--felt);
    --text-accent-red: var(--brick);
    /* Darker than decorative --brass specifically for small text (avatar
       monogram initials) -- the brand-literal brass fails 4.5:1 on light
       card backgrounds (~3:1) even though it happens to pass in dark mode,
       so this needs its own light/dark pair rather than reusing --brass
       directly. See accessibility-audit-game-shelf.md finding #2. */
    --avatar-mono-color: #8a6a3f;
    color-scheme: light;
  }
  [data-theme="dark"] {
    --bg-page: #1c1611;
    --bg-card: #2a221b;
    --bg-card-alt: #241d17;
    --border-color: #43392c;
    --border-color-soft: #362d23;
    --text-primary: #f5efe3;
    --text-secondary: #cfc4ac;
    --text-muted: #a89c84;
    --shadow-color: rgba(0,0,0,.45);
    --text-accent-green: #7fcb9c;
    --text-accent-red: #ec8375;
    --avatar-mono-color: #c9a565;
    color-scheme: dark;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* ---- Global polish: form controls, focus states, scrollbar, skeletons ---- */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg-card-alt); }
  ::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 10px; border: 2px solid var(--bg-card-alt); }
  ::-webkit-scrollbar-thumb:hover { background: var(--felt); }
  html { scrollbar-width: thin; scrollbar-color: var(--brass) var(--bg-page); }

  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px;
  }

  input[type=date], input[type=number], input[type=text], input[type=email], input[type=password], select, textarea {
    font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; border: 1px solid var(--border-color); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: var(--text-primary); background: var(--bg-card-alt);
  }
  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; }
  input[type=date]::-webkit-calendar-picker-indicator { filter: sepia(1) saturate(2) hue-rotate(60deg) opacity(.65); cursor: pointer; }
  select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b211b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  }

  .skel-card { background: linear-gradient(90deg, #ece7d8 0%, #f5f0e2 50%, #ece7d8 100%); background-size: 200% 100%; animation: skelShimmer 1.4s ease infinite; border-radius: 12px; }
  @keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .skel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
  .skel-card.skel-coll { height: 190px; }
  .skel-card.skel-row { height: 64px; grid-column: 1 / -1; margin-bottom: 12px; }
  body { background: var(--bg-page); font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; color: var(--text-primary); padding-bottom: 60px; }
  html { scrollbar-color: var(--brass) var(--bg-page); scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--bg-page); }
  ::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 8px; border: 2px solid var(--bg-page); }
  ::-webkit-scrollbar-thumb:hover { background: var(--brick); }
  h1,h2,h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; }
  nav { background: var(--walnut); color: var(--parchment); padding: 18px 32px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; transition: padding .3s ease, box-shadow .3s ease, background-color .3s ease; }
  nav.nav-scrolled { padding: 10px 32px; box-shadow: 0 6px 22px rgba(0,0,0,.28); background: rgba(43,33,27,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  nav .brand { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 20px; display: inline-flex; align-items: center; }
  nav .brand-text {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 27px;
    letter-spacing: .02em;
    /* Metallic brass sheen: a repeating light/dark/light gradient clipped to
       the text, same background-clip:text technique as the photography
       nav wordmark and hero accent-word (see photography/index.html) --
       just tuned toward a brushed-metal brass look instead of a soft blend. */
    background: linear-gradient(115deg, #6e5527 0%, var(--brass) 22%, #f0dba9 42%, var(--brass) 58%, #7a5c34 76%, #d9bd85 92%, #8a6d3f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  nav ul { list-style: none; display: flex; gap: 26px; }
  nav a { color: var(--parchment); text-decoration: none; font-size: 13.5px; font-weight: 600; letter-spacing: .03em; opacity: .85; }
  nav a:hover { opacity: 1; }
  nav a.nav-tab { transition: background .25s ease, padding .25s ease; }
  .owner-only { display: none !important; }
  body.is-owner .owner-only { display: revert !important; }
  .signed-out-only { display: revert; }
  body.is-owner .signed-out-only { display: none !important; }
  /* tab-sections that are also owner-only (e.g. Piece ID) must still obey
     tab switching — otherwise "revert" above forces them visible on every
     tab once signed in, not just their own. */
  body.is-owner .tab-section.owner-only { display: none !important; }
  body.is-owner .tab-section.owner-only.active { display: block !important; }
  /* Same pattern, narrower gate: exclusive to Norman's account specifically
     (isSiteOwner), not just "anyone signed in" (isOwner above). Used for
     the AI features -- Piece ID and Shelf Scan -- which stay Norman-only
     regardless of how many other accounts exist, matching the Worker's own
     server-side owner check on those routes. */
  .site-owner-only { display: none !important; }
  body.is-site-owner .site-owner-only { display: revert !important; }
  body.is-site-owner .tab-section.site-owner-only { display: none !important; }
  body.is-site-owner .tab-section.site-owner-only.active { display: block !important; }

  /* Game detail modal */
  .game-modal { position: fixed; inset: 0; background: rgba(26,20,16,.72); z-index: 60; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 20px; }
  .game-modal.open { display: flex; }
  .rt-list { display: flex; flex-direction: column; gap: 14px; }
  .rt-card { padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
  .rt-card:last-child { border-bottom: none; }
  .rt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
  .rt-game { font-weight: 700; font-size: 13.5px; color: var(--text-primary); }
  .rt-plays { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
  .rt-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 70px 46px; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
  .rt-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .rt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
  .rt-head + .rt-row .rt-name { color: var(--text-primary); font-weight: 600; }
  .rt-bar { height: 5px; border-radius: 3px; background: var(--border-color); overflow: hidden; }
  .rt-bar i { display: block; height: 100%; background: var(--brass); border-radius: 3px; }
  .rt-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); }
  .rt-prov .rt-num, .rt-prov .rt-name { opacity: .6; }
  .rt-foot { font-size: 11px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
  .bga-paste-panel { border: 1px dashed var(--border-color); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; }
  .bga-paste-panel > label { display: block; margin-bottom: 6px; color: var(--text-secondary); }
  .bga-name-map:empty { display: none; }
  .bga-name-map { border-left: 3px solid var(--felt); padding: 6px 10px; margin-bottom: 10px; font-size: 12.5px; }
  .bga-map-title { font-weight: 700; margin-bottom: 4px; }
  .bga-map-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; }
  .bga-map-user { font-weight: 600; min-width: 110px; }
  .bga-map-row select { width: auto; min-height: 34px; }
  .bygame-toggle { display: inline-flex; border: 1px solid var(--border-color); border-radius: 999px; overflow: hidden; }
  .bygame-toggle button { background: none; border: none; padding: 5px 12px; font: 600 11.5px 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; color: var(--text-secondary); cursor: pointer; min-height: 30px; }
  .bygame-toggle button[aria-pressed="true"] { background: var(--felt); color: #fff; }
  /* Teach mode: full-screen, big type, one step at a time */
  .teach-overlay { position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column; background: var(--bg-card-alt); color: var(--text-primary); padding: max(14px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom)); }
  .teach-overlay.open { display: flex; }
  .teach-top { display: flex; align-items: center; gap: 12px; max-width: 860px; width: 100%; margin: 0 auto; }
  .teach-game { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .teach-count { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
  .teach-close { background: none; border: none; font-size: 30px; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 4px 8px; min-width: 44px; min-height: 44px; }
  .teach-bar { height: 4px; border-radius: 2px; background: var(--border-color); max-width: 860px; width: 100%; margin: 10px auto 0; overflow: hidden; }
  .teach-bar span { display: block; height: 100%; background: var(--felt); transition: width .25s ease; }
  .teach-card { flex: 1; overflow-y: auto; max-width: 860px; width: 100%; margin: 0 auto; padding: clamp(20px, 5vh, 56px) 2px; }
  .teach-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: clamp(28px, 6vw, 46px); line-height: 1.15; margin-bottom: 18px; }
  .teach-title.teach-house { color: var(--brick); }
  .teach-body { font-size: clamp(20px, 3.6vw, 30px); line-height: 1.5; }
  .teach-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .teach-nav { display: flex; justify-content: space-between; gap: 12px; max-width: 860px; width: 100%; margin: 0 auto; }
  .teach-nav button { min-height: 52px; min-width: 120px; font-size: 16px; }
  .teach-nav button[disabled] { opacity: .35; cursor: default; }
  .teach-open-btn { margin-top: 10px; }
  .game-modal-inner { background: var(--bg-card-alt); border-radius: 18px; max-width: 720px; width: 100%; position: relative; padding: 34px 36px 40px; box-shadow: 0 24px 60px rgba(0,0,0,.4); animation: gmIn .3s cubic-bezier(.2,.8,.2,1); }
  .barcode-video-wrap { position: relative; width: 100%; aspect-ratio: 4/3; background: #000; border-radius: 12px; overflow: hidden; }
  .barcode-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
  .barcode-video-wrap::after { content: ""; position: absolute; left: 10%; right: 10%; top: 42%; bottom: 42%; border: 2px solid var(--brass); border-radius: 6px; box-shadow: 0 0 0 2000px rgba(0,0,0,.35); pointer-events: none; }
  .dna-modal-inner { max-width: 620px; text-align: center; }
  .dna-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--brass); margin-bottom: 6px; }
  .dna-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 18px; }
  .dna-empty { padding: 30px 10px; color: var(--text-secondary); font-size: 13.5px; }
  .dna-chart-wrap { display: flex; justify-content: center; margin-bottom: 6px; }
  .dna-chart-wrap svg { width: 100%; max-width: 400px; height: auto; overflow: visible; }
  .dna-shape { transform-origin: center; transform-box: fill-box; transform: scale(.6); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
  .dna-shape.grown { transform: scale(1); opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .dna-shape { transition: none; transform: scale(1); opacity: 1; } }
  .dna-axis-label { font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; fill: var(--text-primary); }
  .dna-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; text-align: left; }
  .dna-stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; }
  .dna-stat .dna-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--brass); margin-bottom: 3px; }
  .dna-stat .dna-stat-val { font-size: 13.5px; color: var(--text-primary); font-weight: 600; }
  .dna-people { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; text-align: left; }
  .dna-people h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 15px; color: var(--text-primary); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
  .dna-people-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-color-soft); font-size: 13px; color: var(--text-secondary); }
  .dna-people-row .dna-people-count { color: var(--brass); font-weight: 700; flex-shrink: 0; }
  @media (max-width: 520px) { .dna-people { grid-template-columns: 1fr; } }

  /* First-visit welcome tour */
  .welcome-modal-inner { max-width: 460px; text-align: center; }
  .welcome-eyebrow { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--brass); margin-bottom: 8px; }
  .welcome-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--text-primary); margin-bottom: 12px; }
  .welcome-lede { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 22px; }
  .welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; margin-bottom: 24px; }
  @media (max-width: 480px) { .welcome-grid { grid-template-columns: 1fr; } }
  .welcome-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; }
  .welcome-item-label { display: block; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 13.5px; color: var(--text-primary); margin-bottom: 4px; }
  .welcome-item-desc { display: block; font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }
  .welcome-dismiss { width: 100%; }
  .welcome-cta-line { font-size: 12.5px; color: var(--text-secondary); margin-top: 12px; }
  .welcome-cta-line a { color: var(--felt); font-weight: 600; text-decoration: underline; }
  @keyframes gmIn { from { opacity:0; transform: translateY(16px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
  .gm-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink, var(--walnut)); color: #fff; border: none; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }

  /* Site search */
  .search-modal { align-items: flex-start; padding-top: 90px; }
  .search-modal-inner { max-width: 560px; padding: 20px 20px 12px; max-height: 72vh; display: flex; flex-direction: column; }
  .search-input-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 14px; margin-bottom: 8px; color: var(--text-muted); }
  .search-input-row svg { flex-shrink: 0; }
  #siteSearchInput { flex: 1; border: none; background: none; outline: none; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 16px; color: var(--text-primary); }
  .search-results { overflow-y: auto; flex: 1; }
  .search-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brass); padding: 12px 6px 6px; }
  .search-result-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 8px; cursor: pointer; }
  .search-result-row img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: var(--bg-card-alt); }
  .search-result-row .sr-icon { width: 34px; height: 34px; border-radius: 7px; background: var(--bg-card-alt); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
  .search-result-row .sr-icon svg { width: 16px; height: 16px; }
  .search-result-row .sr-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
  .search-result-row .sr-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
  .search-result-row:hover, .search-result-row.selected { background: var(--bg-card-alt); }
  .search-empty { font-size: 13px; color: var(--text-muted); padding: 20px 6px; text-align: center; }
  .search-hint { font-size: 11.5px; color: var(--text-muted); padding: 20px 6px; text-align: center; }
  .search-hint kbd { background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 6px; font-family: inherit; font-size: 11px; }

  /* Pick a Game for Tonight — deliberately always-dark "felt table" treatment
     (like Wrapped), so every color here is a brand literal, never a
     semantic token that would go dark-on-dark if the site is in light mode. */
  .picker-modal-inner { background: linear-gradient(160deg, var(--walnut) 0%, #3a4a37 55%, var(--walnut) 100%); border: 1px solid rgba(176,141,87,.35); box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
  .picker-modal-inner .gm-close { background: rgba(0,0,0,.35); border: 1px solid rgba(176,141,87,.3); }
  .picker-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #d9bd85; margin-bottom: 8px; }
  .picker-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-size: 24px; color: var(--parchment); margin-bottom: 20px; }
  .picker-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
  .picker-pills:last-of-type { margin-bottom: 20px; }
  .picker-pills-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: rgba(237,227,211,.5); margin-bottom: 6px; }
  .picker-pill { background: rgba(255,255,255,.06); border: 1px solid rgba(176,141,87,.4); color: var(--parchment); font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
  .picker-pill:hover { background: rgba(176,141,87,.18); }
  .picker-pill.active { background: var(--brass); border-color: var(--brass); color: var(--walnut); transform: scale(1.04); }
  .picker-reel { position: relative; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.22); border: 1px solid rgba(176,141,87,.3); border-radius: 16px; margin-bottom: 20px; overflow: hidden; transition: box-shadow .3s ease, border-color .3s ease; }
  .picker-reel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(176,141,87,.16), transparent 65%); pointer-events: none; }
  .picker-reel.spinning { box-shadow: 0 0 0 3px rgba(176,141,87,.22), inset 0 0 34px rgba(176,141,87,.16); border-color: var(--brass); animation: pickerPulse 1.1s ease-in-out infinite; }
  @keyframes pickerPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(176,141,87,.16), inset 0 0 26px rgba(176,141,87,.1); } 50% { box-shadow: 0 0 0 7px rgba(176,141,87,.26), inset 0 0 38px rgba(176,141,87,.2); } }
  /* Slot-window framing: top/bottom edges darken like the reel is being
     viewed through a narrow window -- purely decorative (z-index below the
     cover/name) so it reads as machine dressing without competing with the
     content. No payline here -- that trope marks where three reels line up,
     and this is a single reel, so a payline would just be a decorative lie. */
  .picker-reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.32) 0%, transparent 24%, transparent 76%, rgba(0,0,0,.32) 100%); pointer-events: none; z-index: 1; }
  .picker-cover { width: 108px; height: 108px; object-fit: contain; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: 0 8px 22px rgba(0,0,0,.4); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; color: #d9bd85; font-size: 13px; text-align: center; padding: 6px; transform: scale(1); transition: transform .2s ease; position: relative; z-index: 2; }
  .picker-cover.picker-landed { animation: pickerLand .5s cubic-bezier(.2,.8,.3,1.4); }
  @keyframes pickerLand { 0% { transform: scale(.7); } 60% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(176,141,87,.2); } 100% { transform: scale(1); } }
  .picker-name { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 19px; color: var(--parchment); padding: 0 14px; position: relative; z-index: 2; }
  .picker-spin-btn { background: linear-gradient(135deg, var(--brass), #c9a86a) !important; color: var(--walnut) !important; font-size: 14px !important; padding: 13px 16px !important; letter-spacing: .02em; }
  .picker-spin-btn:hover { background: linear-gradient(135deg, #c9a86a, var(--brass)) !important; }
  @media (prefers-reduced-motion: reduce) { .picker-pill.active { transform: none; } }

  /* Signature moment: instead of a die, the cover+name genuinely reads as a
     slot-machine reel advancing -- spinPicker() (content.js) restarts this
     "drop into place" animation on every tick and fades a motion-blur
     amount down from the JS-computed spin progress, so the blur visibly
     tracks the same deceleration curve the reel is already slowing on,
     rather than being a fixed overlay unrelated to the actual spin speed. */
  .picker-cover.reel-tick { animation: reelAdvance .16s ease-out; }
  @keyframes reelAdvance { 0% { transform: translateY(-16px); opacity: .5; } 60% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .picker-cover.reel-tick { animation: none; } }

  /* Wrapped recap */
  .wrapped-inner { position: relative; width: 100%; max-width: 420px; height: 720px; max-height: 90vh; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, var(--walnut) 0%, #3a4a37 45%, var(--walnut) 100%); box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: gmIn .3s cubic-bezier(.2,.8,.2,1); }
  .wrapped-bars { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 5px; z-index: 4; }
  .wrapped-bars .bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
  .wrapped-bars .bar-fill { display: block; height: 100%; width: 0%; background: var(--brass); }
  .wrapped-bars .bar.done .bar-fill { width: 100%; transition: none; }
  .wrapped-bars .bar.active .bar-fill { width: 100%; transition: width linear; }
  .wrapped-tap-zone { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 3; cursor: pointer; }
  .wrapped-tap-left { left: 0; }
  .wrapped-tap-right { right: 0; }
  .wrapped-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 34px; color: var(--parchment); animation: wrappedFade .5s ease; }
  @keyframes wrappedFade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
  .wrapped-slide .ws-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--brass); margin-bottom: 18px; }
  .wrapped-slide .ws-num { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 64px; line-height: 1; margin-bottom: 14px; }
  .wrapped-slide .ws-headline { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 26px; font-weight: 600; line-height: 1.25; margin-bottom: 10px; }
  .wrapped-slide .ws-sub { font-size: 14px; opacity: .85; line-height: 1.6; max-width: 300px; }
  .wrapped-slide img.ws-cover { width: 130px; height: 130px; object-fit: cover; border-radius: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.4); margin-bottom: 18px; }
  .wrapped-slide .ws-share-btn { margin-top: 26px; background: var(--brass); color: var(--walnut); border: none; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; }
  @media (prefers-reduced-motion: reduce) { .wrapped-slide { animation: none; } }
  @media (prefers-reduced-motion: reduce) { .picker-reel.spinning, .picker-reel.spinning .picker-cover, .picker-cover.picker-landed { animation: none; } }
  .gm-header { display: flex; gap: 20px; margin-bottom: 22px; }
  .gm-cover { width: 120px; height: 120px; border-radius: 12px; object-fit: contain; background: var(--bg-card-alt); flex-shrink: 0; }
  .gm-header h2 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 26px; margin-bottom: 6px; }
  .gm-header .meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
  .gm-bgg-link { font-size: 12px; font-weight: 700; color: var(--text-accent-green); text-decoration: underline; }
  .gm-buy-link { font-size: 12px; font-weight: 700; color: var(--brass); text-decoration: underline; margin-left: 16px; }
  .gm-section { margin-top: 26px; }
  .gm-section h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 17px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
  .gm-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-color-soft); font-size: 13.5px; }
  .gm-row:last-child { border-bottom: none; }
  .gm-empty { font-size: 13px; color: var(--text-muted); padding: 8px 0; }

  /* Toasts */
  .toast-stack { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
  .toast { background: var(--ink, var(--walnut)); color: #fdfbf6; padding: 13px 20px; border-radius: 10px; font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 26px rgba(0,0,0,.3); max-width: 340px; display: flex; align-items: center; gap: 10px; animation: toastIn .3s cubic-bezier(.2,.8,.2,1); }
  .toast.error { background: var(--brick, #a63a2a); }
  .toast.leaving { animation: toastOut .25s ease forwards; }
  @keyframes toastIn { from { opacity:0; transform: translateX(30px); } to { opacity:1; transform: translateX(0); } }
  @keyframes toastOut { to { opacity:0; transform: translateX(30px); } }

  /* Custom confirm modal */
  .confirm-modal { position: fixed; inset: 0; background: rgba(26,20,16,.6); z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
  .confirm-modal.open { display: flex; }
  .confirm-inner { background: var(--bg-card-alt); border-radius: 16px; max-width: 360px; width: 100%; padding: 26px 28px; box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: gmIn .25s cubic-bezier(.2,.8,.2,1); }
  .own-now-btn { margin-left: 8px; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--felt, #355e3b); background: transparent; color: var(--felt, #355e3b); cursor: pointer; vertical-align: 1px; }
  .own-now-btn:hover { background: var(--felt, #355e3b); color: #fff; }
  .confirm-inner .prompt-input { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; margin: -6px 0 18px; border: 1px solid var(--border-color, rgba(0,0,0,.2)); border-radius: 8px; background: var(--bg-card, #fff); color: var(--text-primary); }
  .confirm-inner p { font-size: 14.5px; color: var(--text-primary); line-height: 1.5; margin-bottom: 20px; }
  .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
  nav a.nav-tab.active { opacity: 1; background: var(--brick); color: var(--parchment); padding: 5px 10px; border-radius: 999px; }

  /* showTab() calls scrollIntoView({block:'start'}) on every tab switch,
     which puts the section flush at viewport y=0 with no allowance for the
     sticky nav sitting on top of it -- the section's own heading (the
     small .eyebrow label) ends up rendered partly behind the nav on every
     single tab switch. scroll-margin-top tells scrollIntoView to stop short
     by the nav's height instead. 64px covers the nav both at its resting
     size (padding: 18px 32px) and its shrunk .nav-scrolled size (10px 32px)
     with a little room to spare, so this doesn't need to track which state
     the nav happens to be in when the switch occurs. */
  .tab-section { display: none; scroll-margin-top: 64px; }
  .tab-section.active { animation: tabFadeIn .35s cubic-bezier(.2,.8,.2,1); }
  @keyframes tabFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .tab-section.active { display: block; }
  .conn-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
  .conn-ok { background: var(--felt); color: var(--parchment); }
  .conn-err { background: var(--brick); color: #fff; }

  .news-ticker { display: flex; align-items: center; height: 40px; background: linear-gradient(90deg, var(--walnut-light) 0%, var(--felt) 100%); border-bottom: 1px solid var(--border-color); overflow: hidden; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.18); }
  .news-ticker::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: .55; pointer-events: none; }
  .news-ticker .nt-label { flex-shrink: 0; display: flex; align-items: center; gap: 7px; background: var(--brass); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.12), 2px 0 10px rgba(0,0,0,.22); color: var(--walnut); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 0 16px; height: 100%; border-radius: 0 10px 10px 0; z-index: 1; }
  .news-ticker .nt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brick); flex-shrink: 0; animation: ntPulse 1.6s ease-in-out infinite; }
  @keyframes ntPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
  .news-ticker .nt-track-wrap { flex: 1; overflow: hidden; position: relative; height: 100%; mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
  .news-ticker .nt-track { position: absolute; white-space: nowrap; top: 50%; transform: translateY(-50%); left: 0; will-change: left; }
  .news-ticker .nt-track.paused { animation-play-state: paused; }
  .news-ticker a { color: var(--parchment); text-decoration: none; font-size: 12.5px; opacity: .9; transition: color .15s ease, opacity .15s ease; }
  .news-ticker a:hover { opacity: 1; color: var(--brass); text-decoration: underline; }
  .news-ticker .nt-src { display: inline-block; background: rgba(176,141,87,.22); color: var(--brass); font-weight: 700; font-size: 9.5px; letter-spacing: .03em; border-radius: 999px; padding: 2px 9px; margin-right: 8px; vertical-align: middle; }
  .news-ticker .nt-sep { color: var(--brass); margin: 0 26px; opacity: .5; }
  /* The ticker keeps its 40px from first paint (it used to be display:none until the
     headlines loaded, which pushed the whole hero down 40px: most of the page's CLS). */
  .news-ticker.nt-empty .nt-track { position: static; transform: none; color: var(--parchment); opacity: .6; font-size: 12.5px; white-space: nowrap; }
  .news-ticker.reduced .nt-track-wrap { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .news-ticker.reduced .nt-track { position: relative; top: auto; transform: none; left: auto !important; }

  .hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--walnut) 0%, #3a4a37 45%, var(--walnut) 100%); background-size: 300% 300%; animation: meshMove 14s ease infinite; color: var(--parchment); padding: 92px 32px 76px; }
  @keyframes meshMove { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
  @media (prefers-reduced-motion: reduce) { .hero { animation: none; } }
  .hero-inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; }
  .hero-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
  .hero-ambient span { position: absolute; font-size: 46px; opacity: .16; filter: blur(.5px); animation: driftFloat 18s ease-in-out infinite; }
  .hero-ambient span:nth-child(1) { top: 8%; left: 6%; font-size: 40px; animation-duration: 16s; }
  .hero-ambient span:nth-child(2) { top: 58%; left: 16%; font-size: 34px; animation-duration: 22s; animation-delay: -4s; }
  .hero-ambient span:nth-child(3) { top: 15%; left: 70%; font-size: 58px; animation-duration: 20s; animation-delay: -9s; }
  .hero-ambient span:nth-child(4) { top: 68%; left: 84%; font-size: 32px; animation-duration: 17s; animation-delay: -12s; }
  .hero-ambient span:nth-child(5) { top: 40%; left: 42%; font-size: 36px; animation-duration: 24s; animation-delay: -6s; }
  .hero-ambient span:nth-child(6) { top: 22%; left: 92%; font-size: 26px; animation-duration: 19s; animation-delay: -2s; }
  .hero-ambient span:nth-child(7) { top: 78%; left: 48%; font-size: 22px; animation-duration: 21s; animation-delay: -14s; }
  .hero-ambient span:nth-child(8) { top: 32%; left: 4%; font-size: 24px; animation-duration: 18s; animation-delay: -8s; }
  .hero-ambient span:nth-child(9) { top: 85%; left: 66%; font-size: 28px; animation-duration: 23s; animation-delay: -10s; }
  @keyframes driftFloat { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(14px,-18px) rotate(8deg); } 66% { transform: translate(-10px,10px) rotate(-6deg); } }
  @media (prefers-reduced-motion: reduce) { .hero-ambient span { animation: none; } }
  .hero .label { display: flex; align-items: center; gap: 10px; color: var(--brass); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
  .hero .label::before { content: ''; display: inline-block; width: 26px; height: 1.5px; background: var(--brass); flex-shrink: 0; }
  .hero h1 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-size: clamp(34px, 5.5vw, 58px); line-height: .98; margin-bottom: 16px; letter-spacing: -.01em; }
  .hero h1 .accent-word { background: linear-gradient(120deg, var(--parchment) 0%, #c9a06c 50%, var(--parchment) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .hero p { max-width: 460px; font-size: 15px; opacity: .85; line-height: 1.6; margin-bottom: 24px; }
  .hero .hero-cta { background: var(--brick); color: var(--parchment); border: none; border-radius: 8px; padding: 12px 22px; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer; position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
  .hero .hero-cta::before { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; }
  .hero .hero-cta:hover::before { left: 130%; }
  .hero .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.3); }
  @media (prefers-reduced-motion: reduce) { .hero .hero-cta::before { display: none; } .hero .hero-cta:hover { transform: none; } }
  /* Trust signal for a cold, anonymous visitor: the only existing proof
     this is a real, actively-used site (the "About this shelf" stat strip)
     lived way down at the page bottom, below every tab's content -- most
     first-time visitors would never scroll far enough to see it. This is
     the same three numbers (ownedCollection/sessions/plays-this-year),
     computed identically, just placed where a first impression actually
     forms. Populated by heroStats() in misc.js, called from init(). */
  .hero-stats { min-height: 1.6em; margin-top: 18px; font-size: 12px; color: rgba(237,227,211,.7); font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; }
  .hero-stats strong { color: var(--parchment); font-weight: 700; }

  section { max-width: 1000px; margin: 0 auto; padding: 54px 32px 0; }
  .section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
  .section-head h2 { font-size: 26px; }
  .section-head .eyebrow { color: var(--text-accent-red); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; display: block; margin-bottom: 6px; }
  /* Discover's header reads as one line ("What's out there Discover")
     instead of the usual small-caps-eyebrow-over-big-title stack -- the
     eyebrow here is styled to match the h2 it sits beside rather than
     the small red label used everywhere else. */
  .section-head .inline-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
  .section-head .inline-head .eyebrow { display: inline; text-transform: none; letter-spacing: normal; font-weight: 600; font-size: 26px; color: var(--text-primary); margin-bottom: 0; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; }

  .add-btn { background: var(--felt); color: var(--parchment); border: none; border-radius: 8px; padding: 9px 16px; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; position: relative; overflow: hidden; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
  .add-btn::before { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg); transition: left .5s ease; pointer-events: none; }
  .add-btn:hover::before { left: 130%; }
  .add-btn:hover { background: var(--felt-light); transform: translateY(-1px); box-shadow: 0 6px 14px var(--shadow-color); }
  .add-btn:active { transform: scale(.94); }
  .add-btn:disabled { opacity: .5; cursor: wait; }
  .add-btn--brick { background: var(--brick); }
  .add-btn--brick:hover { background: #8a2f29; }
  .add-btn--brass { background: var(--brass); color: var(--walnut); }
  .add-btn--brass:hover { background: #c29d63; }
  .add-btn--bronze { background: #6e5429; }
  .add-btn--bronze:hover { background: #82642f; }
  .add-btn--dna { background: linear-gradient(135deg, var(--felt), var(--brass)); }
  .add-btn--dna:hover { background: linear-gradient(135deg, var(--felt-light), var(--brass)); }
  .add-btn--sm { padding: 6px 14px; font-size: 12px; }
  .add-btn--xs { padding: 4px 10px; font-size: 11px; }
  @media (prefers-reduced-motion: reduce) { .add-btn::before { display: none; } .add-btn:hover { transform: none; } }
  .add-form { display: none; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px 24px; margin-bottom: 22px; }
  .add-form.open { display: block; }
  .add-form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 14px; }
  .add-form label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); display: block; margin-bottom: 5px; }
  .add-form input, .add-form select, .add-form textarea {
    width: 100%; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 13.5px; padding: 8px 10px;
    border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-card-alt); color: var(--text-primary);
  }
  .add-form textarea { resize: vertical; min-height: 60px; }
  .bgg-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; margin-top: 4px; max-height: 220px; overflow-y: auto; z-index: 30; box-shadow: 0 10px 24px rgba(43,33,27,.18); }
  .bgg-dropdown .bgg-opt { padding: 9px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border-color-soft); }
  .bgg-dropdown .bgg-opt:last-child { border-bottom: none; }
  .bgg-dropdown .bgg-opt:hover { background: var(--border-color-soft); }
  .bgg-dropdown .bgg-opt .yr { color: var(--text-muted); font-size: 11.5px; margin-left: 6px; }
  .bgg-dropdown .bgg-loading { padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); }
  .add-form .submit-row { display: flex; justify-content: flex-end; gap: 10px; }
  .add-form .cancel-btn { background: none; border: none; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; }

  /* Game Stores tab */
  #storeMap { height: 340px; border-radius: 12px; margin-bottom: 24px; background: var(--bg-card-alt); overflow: hidden; }
  /* OpenStreetMap tiles are always light — invert them in dark mode so the
     map doesn't look like a bright hole in an otherwise dark page. */
  [data-theme="dark"] #storeMap .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); }
  .store-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; transition: box-shadow .3s ease, border-color .3s ease; }
  .store-card.search-highlight { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(176,141,87,.25); }
  .store-card .sc-name { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 15.5px; color: var(--text-primary); margin-bottom: 4px; }
  .store-card .sc-addr { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 6px; }
  .store-card .sc-links { display: flex; gap: 12px; font-size: 12px; }
  .store-card .sc-links a { color: var(--brass); text-decoration: none; font-weight: 600; }
  .store-card .sc-links a:hover { text-decoration: underline; }
  .store-card .sc-note { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; font-style: italic; }
  .store-card .sc-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .store-card .sc-actions button { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-card-alt); border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; font-size: 11px; }
  .store-card .sc-actions .sc-del:hover { background: var(--brick); color: #fff; border-color: var(--brick); }
  .store-card .sc-actions .sc-edit:hover { background: var(--felt); color: var(--parchment); border-color: var(--felt); }
  .store-search-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
  .store-search-box input { flex: 1; min-width: 180px; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-card-alt); color: var(--text-primary); }
  .store-search-box .or-sep { font-size: 12px; color: var(--text-muted); }
  .nearby-store-card { background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
  .nearby-store-card .nc-name { font-weight: 700; font-size: 13.5px; color: var(--text-primary); margin-bottom: 3px; }
  .nearby-store-card .nc-meta { font-size: 11.5px; color: var(--text-secondary); }
  .nearby-store-card .nc-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brass); background: rgba(176,141,87,.15); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }

  /* Shelf Scan */
  #shelfScanThumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); }
  .ss-row { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
  .ss-row.ss-owned { opacity: .6; }
  .ss-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .ss-row-head input[type="checkbox"] { width: auto; flex-shrink: 0; }
  .ss-row-title { font-weight: 700; font-size: 13.5px; color: var(--text-primary); flex: 1; }
  .ss-confidence { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }
  .ss-confidence.high { background: rgba(53,73,59,.18); color: var(--felt); }
  .ss-confidence.medium { background: rgba(176,141,87,.18); color: var(--brass); }
  .ss-confidence.low { background: rgba(166,58,50,.15); color: var(--brick); }
  .ss-row-note { font-size: 11px; color: var(--text-muted); font-style: italic; margin-bottom: 8px; }
  .ss-row-match { font-size: 11.5px; color: var(--text-accent-green); margin-top: 6px; }
  .ss-owned-note { font-size: 11.5px; color: var(--text-secondary); }

  /* Piece ID */
  .pieceid-scope-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 999px; padding: 8px 8px 8px 16px; margin-bottom: 14px; font-size: 12px; color: var(--text-secondary); }
  .pieceid-scope-bar strong { color: var(--text-primary); }
  .pieceid-chip-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--brass); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
  .pieceid-chip-btn:hover { background: var(--felt); color: var(--parchment); border-color: var(--felt); box-shadow: 0 4px 10px var(--shadow-color); }
  .pieceid-chip-btn:active { transform: scale(.94); }

  .pieceid-game-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease; }
  .pieceid-game-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px var(--shadow-color); }
  .pieceid-game-card.selected { border-color: var(--brass); background: linear-gradient(135deg, var(--bg-card), rgba(176,141,87,.08)); }
  .pieceid-game-card label { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; min-width: 0; }
  .pieceid-game-card input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--brass); cursor: pointer; }
  .pieceid-game-card .pgc-title { font-weight: 700; font-size: 13.5px; color: var(--text-primary); font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; }
  .pieceid-game-card .pgc-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
  .pieceid-comp-count { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: rgba(176,141,87,.16); color: var(--brass); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }

  .pieceid-match { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-left: 3px solid var(--felt); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1); }
  .pieceid-match:hover { transform: translateY(-2px); box-shadow: 0 8px 18px var(--shadow-color); }
  .pieceid-match.medium { border-left-color: var(--brass); }
  .pieceid-match.low { border-left-color: var(--brick); }
  .pieceid-match .pm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pieceid-match .pm-game { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 14px; color: var(--text-primary); }
  .pieceid-confidence { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; }
  .pieceid-confidence.high { background: rgba(53,73,59,.18); color: var(--felt); }
  .pieceid-confidence.medium { background: rgba(176,141,87,.18); color: var(--brass); }
  .pieceid-confidence.low { background: rgba(166,58,50,.15); color: var(--brick); }
  .pieceid-match .pm-reason { font-size: 12px; color: var(--text-secondary); margin-top: 5px; line-height: 1.5; }
  .pieceid-match .pm-matched { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 4px; }
  .pieceid-note { font-size: 12px; color: var(--text-muted); font-style: italic; margin-top: 8px; padding: 10px 12px; background: var(--bg-card-alt); border-radius: 10px; border: 1px dashed var(--border-color); }
  @media (prefers-reduced-motion: reduce) { .pieceid-game-card:hover, .pieceid-match:hover { transform: none; } }

  .player-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
  .player-row input { flex: 1; }
  .player-row .score-input { max-width: 90px; }
  .player-row input[type=checkbox] { width: auto; }
  .rm-player { background: none; border: none; color: var(--text-accent-red); cursor: pointer; font-size: 16px; line-height: 1; }
  .add-player-btn { font-size: 12px; font-weight: 700; color: var(--text-accent-green); background: none; border: none; cursor: pointer; margin-bottom: 12px; }

  /* Saved parties -- a reusable roster, one level up from the quick-pick
     chips below (those fill one player at a time; a party fills the whole
     row set in one click). */
  .party-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
  .party-bar select { max-width: 220px; }
  .party-manage-list { margin-bottom: 12px; padding: 8px 10px; background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 10px; }
  .party-manage-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border-color-soft); font-size: 12.5px; }
  .party-manage-row:last-child { border-bottom: none; }
  .party-manage-name { color: var(--text-primary); }
  .party-manage-members { color: var(--text-muted); font-size: 11.5px; }

  /* Session-logging quick picks -- one-tap chips for your most frequent
     opponents, so the common case (same three or four people you always
     play with) doesn't mean retyping a name every single time. */
  .quick-players { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
  .quick-player-chip { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card-alt); color: var(--text-primary); cursor: pointer; transition: background .15s, border-color .15s; }
  .quick-player-chip:hover { background: var(--felt); border-color: var(--felt); color: #fdfbf6; }
  .quick-player-chip:disabled { opacity: .4; cursor: default; }
  .quick-player-chip:disabled:hover { background: var(--bg-card-alt); border-color: var(--border-color); color: var(--text-primary); }

  .coll-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
  /* ---- Collection: collapsing type groups (same recipe as the Play Log's
     collapsing month groups below) so a big shelf doesn't turn into one
     long scroll -- collapsed groups still show a count, one click away. ---- */
  .coll-group { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; margin-bottom: 12px; overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
  .coll-group.visible { opacity: 1; transform: translateY(0); }
  .coll-group-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
  .coll-group-toggle h4 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 15.5px; color: var(--text-primary); }
  .coll-group-toggle .cg-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .coll-group-toggle .cg-count { font-size: 11.5px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
  .coll-group-toggle .cg-caret { transition: transform .25s cubic-bezier(.2,.8,.2,1); color: var(--text-muted); flex-shrink: 0; }
  .coll-group.open .coll-group-toggle .cg-caret { transform: rotate(180deg); }
  .coll-group-body { display: none; padding: 0 20px 20px; }
  .coll-group.open .coll-group-body { display: block; }
  /* ---- Collection: parent groups, one level up from the type groups above
     -- a small set of broad categories (Strategy & Economy, Party & Social,
     etc.) each containing several type groups, so 30+ BGG type strings
     don't turn into 30+ top-level accordion headers. Uses --bg-card-alt
     instead of --bg-group's --bg-card so the nesting reads visually: a
     slightly recessed outer shell holding the same card-styled type groups
     inside it. */
  .coll-parent-group { background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 16px; margin-bottom: 14px; overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
  .coll-parent-group.visible { opacity: 1; transform: translateY(0); }
  .coll-parent-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
  .coll-parent-toggle h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 18px; color: var(--text-primary); }
  .coll-parent-toggle .cg-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .coll-parent-toggle .cg-count { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
  .coll-parent-toggle .cg-caret { transition: transform .25s cubic-bezier(.2,.8,.2,1); color: var(--text-muted); flex-shrink: 0; }
  .coll-parent-group.open .coll-parent-toggle .cg-caret { transform: rotate(180deg); }
  .coll-parent-body { display: none; padding: 0 16px 16px; }
  .coll-parent-group.open .coll-parent-body { display: block; }
  .coll-show-more { display: block; width: 100%; margin-top: 12px; background: var(--felt); color: var(--parchment); border: none; border-radius: 8px; padding: 10px 16px; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
  .coll-show-more:hover { transform: translateY(-1px); box-shadow: 0 4px 10px var(--shadow-color); }
  .coll-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; background: linear-gradient(135deg, var(--walnut), var(--walnut-light)); cursor: pointer; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
  .coll-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px var(--shadow-color); }
  /* Subtle pointer-tilt + glare, added via JS only for hover-capable/fine-pointer
     devices with no reduced-motion preference (see initTiltEffect). A prior,
     stronger version of this was removed sitewide after accessibility feedback;
     this one keeps rotation small and stays fully inert for anyone who hasn't
     opted in via those media checks. */
  @media (hover: hover) and (pointer: fine) {
    .coll-card.tilting { transition: transform .12s ease-out, box-shadow .3s cubic-bezier(.2,.8,.2,1); }
    .coll-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 55%); }
    .coll-card.tilting::after { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .coll-card::after { display: none; }
  }
  .coll-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
  .coll-card:hover .coll-cover-img { transform: scale(1.06); }
  .coll-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 14px; color: var(--brass); }
  /* Kickstarter's own project pages block requests from this site's server
     (confirmed via testing, not assumed), so the only image available for
     these cards is Kicktraq's fixed 160x90 RSS thumbnail -- far smaller
     than the box it needs to fill. Rather than stretching that sharp
     (visibly blurry), it's shown small and centered over a blurred,
     enlarged copy of itself, the same "blurred backdrop" treatment music
     and video apps use for low-res artwork -- the softness reads as a
     style choice instead of a broken image. */
  .ks-img-wrap { position: absolute; inset: 0; overflow: hidden; }
  .ks-img-blur { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(20px) brightness(.72) saturate(1.15); transform: scale(1.1); }
  .ks-img-fg { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-height: 62%; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 22px rgba(10,7,5,.5); transition: transform .4s ease; }
  .coll-card:hover .ks-img-fg { transform: translate(-50%, -50%) scale(1.04); }
  .coll-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,15,10,0) 40%, rgba(15,11,8,.92) 100%); }
  .coll-card .score-badge { position: absolute; top: 8px; left: 8px; width: 42px; height: 42px; font-size: 13.5px; z-index: 2; }
  .coll-card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; color: #fdfbf6; z-index: 2; }
  .coll-card-content .expansion-tag { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--brick); color: #fff; padding: 2px 7px; border-radius: 999px; margin-bottom: 5px; }
  .coll-card-content .loaned-tag { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--felt-light); color: #fff; padding: 2px 7px; border-radius: 999px; margin-bottom: 5px; margin-right: 4px; }
  .coll-card-content .name { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 15px; line-height: 1.25; margin-bottom: 4px; }
  .coll-card-content .meta { font-size: 11px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s ease, max-height .25s ease; }
  .coll-card:hover .coll-card-content .meta { opacity: .88; max-height: 3.6em; }
  .coll-card-content .meta.always { opacity: .88; max-height: none; }
  /* Gamefound campaign titles run much longer than our own game names and
     aren't curated by us, so unlike every other .coll-card use on this page
     they can wrap past the card's fixed 3/4 aspect ratio and break the
     grid's uniform row height. Clamp to 2 lines with an ellipsis instead. */
  #gfHotGrid .coll-card-content .name, #gfNewGrid .coll-card-content .name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .coll-rank-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(15,11,8,.75); color: #fdfbf6; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
  .rating-badge { display: inline-block; background: var(--felt); color: var(--parchment); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
  /* While a list is still showing its loading placeholders, hold a full
     screen of space for it so the footer/About block below doesn't sit in
     view and then get shoved down when the real list arrives. */
  .tab-section.active :has(> .skel-card) { min-height: 110vh; }
  .coll-filters { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
  /* Fixed width so filling in the game types after load can't widen it and wrap the row. */
  .coll-filters #cType { width: 150px; text-overflow: ellipsis; }
  .coll-filters .coll-filter-btn{font-family:'Inter','Inter Fallback','Inter Fallback R','Inter Fallback D',sans-serif;font-size:13px;font-weight:600;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-color);border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;}
  .coll-filters .coll-filter-btn:hover{border-color:var(--brass);}
  .coll-filters .coll-filter-btn.on{background:var(--felt);border-color:var(--felt);color:#fdfbf6;}
  .coll-filters select { font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; padding: 9px 16px; cursor: pointer; }

  .alpha-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 22px; }
  .alpha-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font-size: 12.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .alpha-btn:hover { border-color: var(--brass); }
  .alpha-btn.active { background: var(--felt); color: var(--parchment); border-color: var(--text-accent-green); }
  .alpha-btn.disabled { opacity: .3; cursor: default; pointer-events: none; }

  .del-btn { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; border: none; cursor: pointer; font-size: 13px; line-height: 1; z-index: 2; display: flex; align-items: center; justify-content: center; }
  .del-btn:hover { background: var(--brick); }
  .edit-btn { position: absolute; top: 6px; right: 34px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; border: none; cursor: pointer; font-size: 11px; line-height: 1; z-index: 2; display: flex; align-items: center; justify-content: center; }
  .edit-btn:hover { background: var(--felt); }
  /* Collection cards specifically need a real 44x44 touch target (WCAG
     2.5.5) -- the shared 22px .del-btn/.edit-btn base above is reused
     as a plain text button elsewhere (the party-bar's "Save as Party" /
     "Manage Parties" buttons) and by the Play Log's inline row actions,
     so enlarging the base rule itself would break those. Scoped overrides
     here instead, same pattern as .challenge-card .del-btn below. Stacked
     vertically along the right edge (rather than side-by-side) so a bigger
     edit button doesn't collide with the score badge sitting in the top-left
     corner. */
  .coll-card .del-btn, .coll-card .edit-btn { width: 44px; height: 44px; right: 6px; }
  .coll-card .del-btn { top: 6px; }
  .coll-card .edit-btn { top: 56px; }

  .con-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
  .con-card { background: var(--walnut); color: var(--parchment); border-radius: 16px; padding: 22px; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1); }
  .con-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(43,33,27,.3); }
  .con-card::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--brass); }
  .con-card .date { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--brass); font-weight: 700; margin-bottom: 10px; }
  .con-card h3 { font-size: 19px; margin-bottom: 6px; }
  .con-card .loc { font-size: 13px; opacity: .75; margin-bottom: 12px; }
  .con-card .note { font-size: 13px; line-height: 1.5; opacity: .9; }
  .con-card .badge { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700; background: var(--brick); color: var(--parchment); padding: 4px 10px; border-radius: 999px; }
  /* "Also going" -- reuses .con-card's own dark walnut/parchment palette
     (a deliberately fixed-look card, not theme-adaptive -- see
     focus-and-fun-design-system) rather than a semantic token. */
  .con-attending { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--parchment); opacity: .85; }
  /* Con Prep -- countdown + games-to-bring + packing checklist, shown only
     on upcoming conventions, right on the existing dark walnut card. */
  .con-prep { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(237,227,211,.15); }
  .con-prep-countdown { font-size: 13px; font-weight: 700; color: var(--brass); margin-bottom: 10px; }
  .con-prep-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(237,227,211,.55); font-weight: 700; margin-bottom: 6px; }
  .con-prep-games { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .con-prep-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(237,227,211,.1); border: 1px solid rgba(237,227,211,.2); color: var(--parchment); font-size: 12px; padding: 4px 8px; border-radius: 999px; }
  .con-prep-chip button { background: none; border: none; color: rgba(237,227,211,.6); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
  .con-prep-chip button:hover { color: var(--brick); }
  .con-prep-add { display: flex; gap: 6px; margin-bottom: 14px; }
  .con-prep-add input { flex: 1; min-width: 0; background: rgba(237,227,211,.08); border: 1px solid rgba(237,227,211,.2); color: var(--parchment); padding: 6px 9px; border-radius: 6px; font-size: 12.5px; }
  .con-prep-add button { background: var(--brass); color: var(--walnut); border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
  .con-prep-checklist { display: flex; flex-direction: column; gap: 5px; }
  .con-prep-checklist label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(237,227,211,.85); cursor: pointer; }
  .con-prep-checklist input[type=checkbox] { accent-color: var(--brass); width: 15px; height: 15px; flex-shrink: 0; }
  .con-prep-checklist label.checked { color: rgba(237,227,211,.45); text-decoration: line-through; }
  .shelf-gap-box { background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; }
  .shelf-gap-box .sg-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
  .shelf-gap-box .sg-body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
  .shelf-gap-box .sg-body strong { color: var(--text-primary); }
  /* Collapsed to a single-line teaser bar (2026-10-05) -- the full
     quote+essay+cover layout these rules used to style was pushing "My
     Game Collection" well below the fold on every visit to the default
     tab. The full content still renders exactly that way on /games/table;
     this bar is just a pointer to it from the Collection tab. */
  .phil-card { box-sizing: border-box; width: min(1100px, calc(100% - 32px)); margin: 16px auto 0; padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-primary); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .phil-teaser-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--brass); flex-shrink: 0; }
  .phil-teaser-quote { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-size: 13.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 200px; min-width: 0; }
  .phil-teaser-link { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; flex-shrink: 0; text-decoration: none; }
  .phil-teaser-link:hover { color: var(--brass); }
  .dna-visitor-form { margin: 0 0 14px; }
  .dna-visitor-note { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 10px; }
  .dna-visitor-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .dna-visitor-row input { flex: 1 1 200px; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card-alt, var(--bg-card)); color: var(--text-primary); font: 500 14px 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; }
  .dna-visitor-fine { font-size: 11.5px; color: var(--text-muted); margin: 8px 0 0; }
  .dna-visitor-error { font-size: 13px; color: var(--text-accent-red, var(--brick)); margin: 8px 0 0; }
  .dna-visitor-divider { font: 700 10.5px 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 6px 0 8px; padding-top: 12px; border-top: 1px solid var(--border-color); }
  .dna-visitor-overlap { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 14px 0 0; }
  .dna-visitor-cta { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border-color); border-left: 4px solid var(--brass); border-radius: 10px; background: var(--bg-card-alt, var(--bg-card)); display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-primary); }
  .phil-admin textarea, .phil-admin input { width: 100%; }
  .phil-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--border-color); }
  .phil-row-date { color: var(--text-muted); white-space: nowrap; }
  .phil-row-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* .edit-btn/.del-btn default to position:absolute (built for a card with
     its own position:relative, like .coll-card) -- inside this plain flex
     row that just made them fly off to whatever positioned ancestor was
     nearest, invisible rather than sitting next to the row they belong to.
     Same fix as .log-detail-row above: reset to static, plain-text style. */
  .phil-row .edit-btn, .phil-row .del-btn { position: static; width: auto; height: auto; border-radius: 6px; background: none; color: var(--text-secondary); font-size: 11px; font-weight: 600; padding: 3px 7px; flex-shrink: 0; }
  .phil-row .edit-btn:hover { color: var(--felt); background: none; }
  .phil-row .del-btn:hover { color: var(--brick); background: none; }
  .visitor-welcome { box-sizing: border-box; width: min(1100px, calc(100% - 32px)); margin: 22px auto 0; padding: 20px 22px; background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--brass); border-radius: 14px; position: relative; color: var(--text-primary); }
  .visitor-welcome h2 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 20px; margin: 0 0 6px; padding-right: 30px; }
  .visitor-welcome .vw-lede { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 14px; max-width: 720px; }
  .visitor-welcome .vw-doors { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  .visitor-welcome .vw-doors a, .visitor-welcome .vw-doors button { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 8px; font: 600 13px 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; text-decoration: none; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-card-alt, var(--bg-card)); color: var(--text-primary); }
  .visitor-welcome .vw-doors .vw-primary { background: var(--felt); border-color: var(--felt); color: #fff; }
  .visitor-welcome .vw-lede { min-height: 4.65em; }
  @media (min-width: 701px) { .visitor-welcome .vw-lede { min-height: 3.1em; } }
  .visitor-welcome .vw-new { min-height: 3em; align-content: flex-start; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
  .visitor-welcome .vw-new a { color: var(--text-primary); font-weight: 600; }
  .visitor-welcome .vw-friends { font-size: 12.5px; color: var(--text-secondary); margin: 0; }
  .visitor-welcome .vw-friends a { color: var(--text-primary); font-weight: 600; }
  .visitor-welcome .vw-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: none; background: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; border-radius: 50%; }
  .visitor-welcome .vw-close:hover { background: var(--border-color-soft, var(--border-color)); }
  @media (max-width: 700px) { .visitor-welcome { margin-top: 16px; padding: 18px 16px; } }
  .starter-path-box { background: linear-gradient(135deg, var(--felt), var(--brass)); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; color: #fff; }
  .starter-path-box .sp-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 16px; margin-bottom: 4px; }
  .starter-path-box .sp-sub { font-size: 12.5px; opacity: .85; margin-bottom: 14px; }
  .starter-path-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
  .starter-path-card { flex: 0 0 auto; width: 120px; cursor: pointer; }
  .starter-path-card img, .starter-path-card .sp-fallback { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; display: block; background: rgba(255,255,255,.15); }
  .starter-path-card .sp-fallback { display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 13px; text-align: center; padding: 8px; }
  .starter-path-card .sp-name { font-size: 12px; font-weight: 700; margin-top: 6px; text-align: center; }
  .starter-pick-btn { position: absolute; top: 0; right: 96px; }
  .starter-pick-btn.active { color: #c99a2e; }
  .campaign-track-btn { position: absolute; top: 0; right: 64px; }
  .campaign-track-btn.active { color: var(--text-accent-red); }
  .campaign-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--text-accent-red); color: #fff; padding: 2px 7px; border-radius: 5px; margin-bottom: 4px; }
  .campaign-progress-box textarea { width: 100%; min-height: 70px; resize: vertical; }
  .campaign-progress-box .cp-saved-note { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
  .loan-box textarea { width: 100%; min-height: 50px; resize: vertical; }
  .loan-box input[type="text"], .loan-box input[type="date"] { width: 100%; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card-alt); color: var(--text-primary); font-family: inherit; font-size: 12.5px; margin-bottom: 6px; box-sizing: border-box; }
  .loaned-out-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 20px; margin-bottom: 24px; }
  .loaned-out-box h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
  .loaned-out-list { display: flex; flex-direction: column; gap: 8px; }
  .loaned-out-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; background: var(--bg-card-alt); }
  .loaned-out-chip img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
  .loaned-out-chip .lo-name { font-weight: 600; font-size: 13px; color: var(--text-primary); flex: 1; }
  .loaned-out-chip .lo-to { font-size: 12px; color: var(--text-muted); }

  .live-score-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; max-width: 480px; }
  .live-score-panel h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
  .live-score-panel input { width: 100%; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card-alt); color: var(--text-primary); font-family: inherit; font-size: 13px; box-sizing: border-box; }
  .live-player-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
  .live-player-row input { flex: 1; margin-bottom: 0; }
  .live-player-row .del-row-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; }

  .live-board-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 22px; margin-bottom: 22px; }
  .live-board-head h2 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 20px; margin-bottom: 4px; }
  .live-board-code { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 30px; font-weight: 600; letter-spacing: .08em; color: var(--brass); }
  .live-board-qr { text-align: center; }
  .live-board-qr img { width: 140px; height: 140px; border-radius: 10px; background: #fff; padding: 6px; }
  .live-board-qr .lbq-caption { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
  .live-board-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

  .live-player-list { display: flex; flex-direction: column; gap: 12px; }
  .live-score-card { display: flex; align-items: center; gap: 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 18px; }
  .live-score-card .lsc-name { font-weight: 700; font-size: 15px; color: var(--text-primary); flex: 1; min-width: 90px; }
  .live-score-card .lsc-score { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 28px; font-weight: 600; color: var(--felt-light); min-width: 54px; text-align: center; }
  .live-score-card .lsc-btns { display: flex; gap: 6px; }
  .live-score-card .lsc-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-card-alt); color: var(--text-primary); font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .live-score-card .lsc-btn:active { transform: scale(.92); }
  .live-score-card .lsc-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 4px 6px; }
  .live-add-player-row { display: flex; gap: 8px; margin-top: 14px; max-width: 360px; }
  .live-add-player-row input { flex: 1; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card-alt); color: var(--text-primary); font-family: inherit; font-size: 13px; }

  /* ---- Score Sheet: section chrome ---- */
  .ss-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .ss-section-head h3 { display: flex; align-items: center; }
  .ss-builder-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .ss-scan-btn { background: var(--brass) !important; color: var(--walnut) !important; border-color: transparent !important; font-weight: 700; }
  [data-theme="dark"] .ss-scan-btn { color: var(--walnut) !important; }
  .ss-scan-btn:hover { filter: brightness(1.08); }
  .ss-scan-status { font-size: 11.5px; color: var(--text-secondary); margin-top: 6px; min-height: 1em; }
  .ss-add-player-btn { margin-top: 10px; padding: 6px 12px; font-size: 12px; }
  .game-notes-fields { margin: 4px 0 14px; border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; background: var(--bg-card); }
  .game-notes-fields summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-primary); }
  .game-notes-fields[open] summary { margin-bottom: 10px; }
  .game-notes-fields textarea { width: 100%; }
  .gm-notes p { white-space: pre-wrap; margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--text-primary); }
  .gm-notes h4 { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 4px; }
  .gm-copy-details { font-size: 12.5px; color: var(--text-secondary); }
  .ss-log-session-btn { margin-top: 10px; margin-left: 8px; padding: 6px 12px; font-size: 12px; }

  /* ---- Score Sheet: builder ---- */
  .ss-builder { display: flex; flex-direction: column; gap: 10px; }
  .ss-cat-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 10px 10px 8px;
    border: 1px solid var(--border-color); border-left: 3px solid var(--brass); border-radius: 8px;
    background: var(--bg-card-alt); transition: border-color .2s ease, box-shadow .2s ease;
  }
  .ss-cat-row:focus-within { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(176,141,87,.18); }
  .ss-cat-badge {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--felt); color: var(--parchment);
    font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .ss-cat-row input[type="text"], .ss-cat-row input[type="number"], .ss-cat-row select { padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 12.5px; transition: border-color .15s ease; }
  .ss-cat-row input[type="text"]:focus, .ss-cat-row input[type="number"]:focus, .ss-cat-row select:focus { border-color: var(--brass); outline: none; }
  .ss-cat-label-input { font-weight: 600; }
  .ss-cat-row input[type="text"]:not(.ss-formula-input) { flex: 1; min-width: 120px; }
  .ss-formula-input { flex: 1; min-width: 160px; font-family: 'Courier New', monospace; }
  .ss-pts-input { width: 80px; }
  .ss-key-hint { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; font-style: italic; }
  .ss-exclude-label { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
  .ss-remove-row { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 6px; transition: color .15s ease, background .15s ease; }
  .ss-remove-row:hover { color: var(--brick); background: rgba(166,58,50,.1); }

  /* ---- Score Sheet: calculator ---- */
  .ss-calc-wrap {
    overflow-x: auto; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card);
    padding: 4px; box-shadow: 0 2px 10px var(--shadow-color);
  }
  .ss-calc-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
  .ss-calc-table th, .ss-calc-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-color-soft); text-align: center; white-space: nowrap; }
  .ss-calc-table thead th { padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--border-color); }
  .ss-calc-table tbody tr:nth-child(even) { background: var(--bg-card-alt); }
  .ss-calc-table tbody tr:hover { background: rgba(176,141,87,.08); }
  .ss-calc-table .ss-cat-name { text-align: left; color: var(--text-secondary); font-weight: 600; }
  .ss-calc-table .ss-player-name {
    width: 96px; padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 6px;
    background: var(--bg-card-alt); color: var(--text-primary); font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600;
    font-size: 12.5px; text-align: center; transition: border-color .15s ease;
  }
  .ss-calc-table .ss-player-name:focus { border-color: var(--brass); outline: none; }
  .ss-calc-table .ss-input {
    width: 64px; padding: 6px 7px; border: 1px solid var(--border-color); border-radius: 6px;
    background: var(--bg-card-alt); color: var(--text-primary); font-family: inherit; font-size: 12.5px;
    text-align: center; transition: border-color .15s ease, box-shadow .15s ease;
  }
  .ss-calc-table .ss-input:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px rgba(176,141,87,.16); }
  .ss-computed { font-size: 11px; color: var(--text-muted); display: block; margin-top: 2px; }
  .ss-computed-main { font-size: 13px; color: var(--text-primary); font-weight: 600; }
  .ss-remove-player { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; margin-left: 4px; }
  .ss-total-row td { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 16px; color: var(--felt-light); border-top: 2px solid var(--border-color); border-bottom: none; padding-top: 10px; padding-bottom: 10px; }
  .ss-trophy { display: none; width: 13px; height: 13px; margin-left: 5px; vertical-align: -2px; color: var(--brass); }
  .ss-total-row td.ss-leading { color: var(--brick); position: relative; }
  .ss-total-row td.ss-leading .ss-trophy { display: inline-block; }
  th.ss-leading .ss-player-name { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(176,141,87,.25); }

  .plays-import-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; }
  .plays-import-panel h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
  .plays-import-panel .pi-status { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }
  .plays-import-panel .pi-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
  .plays-import-panel .pi-stat { font-size: 12px; color: var(--text-muted); }
  .plays-import-panel .pi-stat strong { display: block; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 20px; color: var(--text-primary); }
  .plays-import-panel .pi-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .plays-import-panel .pi-sample { font-size: 11.5px; color: var(--text-muted); margin-top: 10px; line-height: 1.6; }
  .con-attending-avatars { display: flex; }
  .con-attending-avatars > * { margin-left: -7px; border: 2px solid var(--walnut); border-radius: 50%; }
  .con-attending-avatars > *:first-child { margin-left: 0; }
  .con-card .con-photos { padding-left: 0; margin-top: 14px; }

  .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
  .filters select { font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; padding: 9px 30px 9px 16px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a705f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease; }
  .filters select:hover { border-color: var(--brass); box-shadow: 0 2px 8px var(--shadow-color); }
  .filters select:focus { outline: none; border-color: var(--brass); }

  .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin-bottom: 28px; }
  .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 18px 20px; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1); }
  .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(43,33,27,.14); }
  .stat-card .num { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 30px; font-weight: 700; color: var(--text-accent-green); }
  .stat-card .lbl { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

  /* View Transitions: tab-switch cross-fade. Purely additive — remove this
     block plus the startViewTransition() wrapper in showTab() to fully revert. */
  /* The root-level crossfade is nearly invisible on its own since the nav/hero
     chrome is pixel-identical between old and new snapshots — only the small
     swapped tab content actually differs. Naming the active tab-section gives
     it its own transition pair so the motion is clearly visible: a quick
     fade + slide instead of a whole-page crossfade nobody can perceive. */
  .tab-section.active { view-transition-name: tab-content; }
  ::view-transition-old(tab-content) { animation: tab-content-out .28s cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(tab-content) { animation: tab-content-in .32s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes tab-content-out { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes tab-content-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  .dash-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-bottom: 30px; align-items: stretch; }
  .dash-bento > * { margin-bottom: 0 !important; height: 100%; }
  .bento-podium { grid-column: span 7; }
  /* Height is set in px by JS (syncShelfShameHeight), read directly off the
     Most Played card's actual rendered height — an exact match that can't
     drift, unlike relying on the grid's own "stretch to match" auto-sizing,
     which let the open list's content height leak back into the row-sizing
     pass and resize the whole row. overflow:hidden + a fixed px height means
     opening the list can never change the card's size; only its scrollbar. */
  /* height (not min-height) is the fallback here deliberately — it's both a
     floor and a ceiling, so if the JS height-sync ever fails to land (e.g.
     measures the podium card before it has painted), the card still can't
     grow past a fixed size and the list still has to scroll instead of just
     expanding to fit everything. JS overrides this with an exact match once
     it can measure the real podium height. */
  .bento-shelfshame { grid-column: span 5; display: flex; flex-direction: column; height: 320px; overflow: hidden; }
  .bento-heatmap { grid-column: span 12; }
  .bento-sessionlog { grid-column: span 12; }
  .log-grid-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 15px; color: var(--text-primary); margin-bottom: 14px; }
  .bento-h2h { grid-column: span 6; }
  .bento-bygame { grid-column: span 6; }
  .bento-compare { grid-column: span 12; }
  /* Full-width row of its own, sitting between the Most Played/Shelf of
     Shame row and Play Activity — span 12 forces the grid's auto-placement
     to start a fresh row here rather than trying to squeeze in beside the
     5-span Shelf of Shame card. */
  .bento-unownedplayed { grid-column: span 12; }
  @media (max-width: 900px) {
    .bento-podium, .bento-shelfshame, .bento-heatmap, .bento-sessionlog, .bento-h2h, .bento-bygame, .bento-compare, .bento-unownedplayed { grid-column: span 12; }
  }

  /* Insights tab -- six BGG-metadata-derived panels, laid out on the same
     12-col bento grid as the Games Played dashboard. No charting library
     anywhere in this codebase (see the heatmap/h2h-bar/DNA-radar patterns
     above), so every visualization here is hand-rolled from the same
     div-bars/manual-SVG toolkit rather than pulling in a new dependency. */
  .insights-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-bottom: 30px; align-items: stretch; }
  .insights-bento > * { margin-bottom: 0 !important; }
  .insight-card { grid-column: span 6; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 18px 20px; }
  .insight-card.insight-wide { grid-column: span 12; }
  .insight-card h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 15px; color: var(--text-primary); margin-bottom: 3px; }
  .insight-sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 14px; }
  .insight-empty { font-size: 12.5px; color: var(--text-muted); padding: 10px 2px; }
  @media (max-width: 900px) {
    .insight-card { grid-column: span 12; }
  }

  /* Ranked bar rows -- reused across the cost-per-play leaderboard, the
     weight histogram, the mechanics/category frequency list, and the
     publication-year timeline. Mirrors .h2h-row's grid shape below. */
  .insight-bar-row { display: grid; grid-template-columns: 120px 1fr 56px; align-items: center; gap: 10px; padding: 6px 2px; }
  .insight-bar-label { font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .insight-bar-track { height: 8px; border-radius: 5px; background: var(--border-color-soft); overflow: hidden; }
  .insight-bar-fill { height: 100%; background: var(--brass); border-radius: 5px; }
  .insight-bar-val { font-size: 11.5px; color: var(--text-secondary); text-align: right; }

  /* Player-count coverage -- two bars per count (owned-games coverage vs.
     actual logged group sizes), same swatch colors as .compare-side below
     so the "two data series" convention stays consistent site-wide. */
  .insight-pc-row { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; padding: 5px 2px; }
  .insight-pc-count { font-size: 11.5px; color: var(--text-secondary); font-weight: 700; }
  .insight-pc-bars { display: flex; flex-direction: column; gap: 3px; }
  .insight-pc-bar-track { display: flex; align-items: center; height: 9px; border-radius: 5px; background: var(--border-color-soft); overflow: hidden; }
  .insight-pc-bar-fill { height: 100%; border-radius: 5px; }
  .insight-pc-bar-fill.owned { background: var(--brass); }
  .insight-pc-bar-fill.played { background: var(--felt); }
  .insight-pc-legend { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
  .insight-pc-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .insight-pc-swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

  /* Weight-vs-plays scatter -- manual SVG coordinates, same approach as
     buildDnaSvg() in share-cards.js since there's no charting library. */
  .insight-scatter-wrap svg { width: 100%; height: auto; }
  .insight-scatter-dot { fill: var(--brass); fill-opacity: .78; stroke: var(--bg-card); stroke-width: 1; }
  .insight-scatter-axis { stroke: var(--border-color); stroke-width: 1; }
  .insight-scatter-label { font-size: 9px; fill: var(--text-muted); font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; }


  /* Play heatmap */
  .heatmap-wrap { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 22px; margin-bottom: 28px; }
  .heatmap-wrap h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 15px; color: var(--text-primary); margin-bottom: 3px; }
  .gotm-card { background: var(--walnut, var(--walnut)); color: var(--parchment, var(--parchment)); border: 1px solid var(--brass); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; }
  .gotm-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); font-weight: 700; margin-bottom: 10px; }
  .gotm-main { display: flex; gap: 16px; align-items: flex-start; }
  .gotm-cover { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; }
  .gotm-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 22px; font-weight: 600; }
  .gotm-blurb { font-size: 13px; opacity: .85; margin: 4px 0 8px; }
  .gotm-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
  .gotm-stats b { font-size: 17px; }
  .gotm-badge { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--felt); border-radius: 8px; padding: 10px 14px; }
  .gotm-badge.earned { border: 1px solid var(--brass); }
  .gotm-badge-text { display: flex; flex-direction: column; font-size: 12px; gap: 2px; }
  .gotm-badge-text strong { font-size: 14px; }
  .gotm-left { color: #e0b86f; font-size: 12px; white-space: nowrap; }
  .gotm-link { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--brass); }
  .finder-box { margin-bottom: 32px; }
  .finder-bar { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 8px; align-items: center; }
  .finder-label { font-size: 12px; color: var(--text-muted); margin-right: 8px; }
  .finder-chip { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 999px; padding: 4px 13px; font-size: 12.5px; cursor: pointer; margin-right: 4px; }
  .finder-chip.active { background: var(--brass); border-color: var(--brass); color: var(--walnut); font-weight: 600; }
  .finder-note { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
  .plays-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
  .plays-share-toggle { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 999px; padding: 4px 14px; font-size: 12px; cursor: pointer; }
  .plays-share-toggle.active { background: var(--brass); border-color: var(--brass); color: var(--walnut); font-weight: 600; }
  .plays-share select { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px 8px; font-size: 12px; }
  .plays-share-btn { margin-left: auto; background: var(--brass); color: var(--walnut); border: 0; border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
  .plays-share-btn:disabled { opacity: .6; cursor: default; }
  .heatmap-sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 14px; }
  .heatmap-scroll { overflow-x: auto; padding-bottom: 4px; }
  .heatmap-months { display: flex; gap: 3px; font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
  .heatmap-month-cell { flex: 1 1 0; min-width: 0; overflow: visible; white-space: nowrap; }
  .heatmap-grid { display: flex; gap: 3px; }
  .heatmap-week { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 0; }
  .heatmap-cell { width: 100%; aspect-ratio: 1; min-width: 6px; border-radius: 2px; background: var(--border-color-soft); }
  .heatmap-cell.level-1 { background: rgba(176,141,87,.35); }
  .heatmap-cell.level-2 { background: rgba(176,141,87,.62); }
  .heatmap-cell.level-3 { background: rgba(176,141,87,.85); }
  .heatmap-cell.level-4 { background: var(--brass); }
  .heatmap-legend { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-muted); margin-top: 10px; }
  .heatmap-legend .heatmap-cell { width: 10px; height: 10px; }
  .heatmap-legend-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .heatmap-legend-count { font-size: 9px; line-height: 1; color: var(--text-muted); }

  /* Shelf of Shame reuses .unowned-played-box/-list/-chip below */
  .shelf-shame-box .up-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shelf-shame-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; margin-bottom: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
  .shelf-shame-toggle h3 { margin-bottom: 0; display: flex; align-items: center; gap: 8px; }
  .shelf-shame-count { font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 11px; font-weight: 700; color: var(--brass); background: rgba(176,141,87,.14); border-radius: 999px; padding: 2px 9px; }
  .shelf-shame-caret { color: var(--text-muted); flex-shrink: 0; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  .shelf-shame-box.open .shelf-shame-caret { transform: rotate(180deg); }
  .shelf-shame-box .unowned-played-list { margin-top: 12px; flex: none; overflow-y: auto; padding-right: 2px; align-content: flex-start; }

  /* Rotating showcase of never-played covers, filling the card while
     collapsed instead of leaving it as a bare header row. Swaps to the
     scrollable chip list (above) when expanded — the card itself never
     changes size either way, since .dash-bento already stretches it to
     match the podium card's height. */
  .shelf-shame-rotator { position: relative; flex: none; margin-top: 12px; border-radius: 10px; overflow: hidden; background: var(--bg-card-alt); }
  .shelf-shame-box.open .shelf-shame-rotator { display: none; }
  .shelf-shame-box:not(.open) .unowned-played-list { display: none !important; }
  .ssr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
  .ssr-img.ssr-active { opacity: 1; }
  .shelf-shame-rotator::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); pointer-events: none; }
  .ssr-caption { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; color: #fdfbf6; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 12.5px; text-shadow: 0 1px 4px rgba(0,0,0,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { .ssr-img { transition: none; } }

  /* Podium */
  .podium-wrap-outer { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px 22px 20px; margin-bottom: 28px; overflow: hidden; }
  .podium-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 15px; color: var(--text-primary); margin-bottom: 18px; position: relative; z-index: 1; }
  .podium-wrap { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; position: relative; z-index: 1; }
  .podium-slot { text-align: center; transition: transform .3s cubic-bezier(.2,.8,.2,1); cursor: pointer; position: relative; }
  .podium-slot:hover { transform: translateY(-6px); }
  .podium-slot img { width: 84px; height: 84px; object-fit: contain; border-radius: 10px; background: var(--bg-card-alt); margin-bottom: 10px; box-shadow: 0 8px 18px rgba(43,33,27,.18); position: relative; z-index: 1; }
  .podium-slot .pname { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 12.5px; color: var(--text-primary); margin-bottom: 4px; max-width: 100px; }
  .podium-slot .pcount { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
  .podium-block { position: relative; overflow: hidden; border-radius: 10px 10px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 900; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 16px rgba(0,0,0,.16); }
  .podium-block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) 40%, transparent 60%); background-size: 220% 220%; background-position: 120% 0; animation: podiumSheen 5s ease-in-out infinite; }
  @keyframes podiumSheen { 0%, 40% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
  @media (prefers-reduced-motion: reduce) { .podium-block::after { animation: none; display: none; } }
  .p1 .podium-block { height: 108px; background: linear-gradient(160deg,#f0cb5c,#d4af37 45%,#8c6b1f); width: 124px; font-size: 30px; }
  .p2 .podium-block { height: 70px; background: linear-gradient(160deg,#d4d4d4,#b0b0b0 45%,#7a7a7a); width: 104px; font-size: 22px; }
  .p3 .podium-block { height: 50px; background: linear-gradient(160deg,#dba374,#c9895a 45%,#8c5a2f); width: 104px; font-size: 22px; }
  .p1 img { width: 96px; height: 96px; box-shadow: 0 10px 24px rgba(140,107,31,.35), 0 0 0 3px rgba(212,175,55,.55); }
  .p1::before { content: ''; position: absolute; top: -14px; left: 50%; width: 190px; height: 190px; transform: translateX(-50%); background: radial-gradient(circle, rgba(212,175,55,.32) 0%, rgba(212,175,55,.14) 45%, transparent 72%); pointer-events: none; z-index: 0; animation: podiumGlowPulse 3.2s ease-in-out infinite; }
  @keyframes podiumGlowPulse { 0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
  @media (prefers-reduced-motion: reduce) { .p1::before { animation: none; } }
  .p1 .pcrown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 20px; color: var(--brass); filter: drop-shadow(0 2px 3px rgba(43,33,27,.35)); z-index: 1; }
  .rest-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .rest-item { display: flex; align-items: center; gap: 10px; background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 12px; padding: 9px 14px; font-size: 12px; transition: transform .25s; cursor: pointer; }
  .rest-item:hover { transform: translateY(-3px); }
  .rest-item img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; background: var(--bg-card-alt); }
  .rest-item .rname { font-weight: 700; color: var(--text-primary); }
  .rest-item .rcount { color: var(--text-muted); }

  /* Wishlist & Players */
  .move-btn { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 3; background: var(--felt); color: var(--parchment); border: none; border-radius: 8px; padding: 7px; font-size: 11px; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity .2s; }
  .coll-card:hover .move-btn { opacity: 1; }
  .wish-buy-links { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
  .wish-buy-link { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fdfbf6; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 4px 10px; text-decoration: none; }
  .wish-buy-link:hover { background: rgba(255,255,255,.28); }
  /* Players tab — unified "member's ledger" panel system: quiet cards,
     a brass rule beside every heading, serif numerals, monogram avatars
     instead of photos. Deliberately restrained (no gradients/glow/emoji)
     so the tab reads as considered rather than gamified. */
  .player-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
  .player-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
  .player-panel h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 16px; letter-spacing: .01em; color: var(--text-primary); margin: 0; padding-left: 13px; position: relative; }
  .player-panel h3::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: var(--brass); border-radius: 2px; }
  .player-panel .pp-lede { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; max-width: 60ch; margin: 8px 0 16px; }

  /* Top Rated panel -- one block per person (you, then each public friend),
     each a plain ranked list rather than a card grid so 20 rows stays
     scannable instead of turning into a wall of thumbnails. Only the first
     five rows show by default (.top-rated-wrap.collapsed, sized in JS by
     sizeTopRatedWraps) with a fade at the cutoff and a "View Top N" toggle,
     the same collapse-then-expand mechanic as achieve-grid-wrap above --
     an uncapped 20-row list ran a single person's block past 800px tall. */
  .top-rated-grid { display: flex; flex-direction: column; gap: 22px; }
  .top-rated-block + .top-rated-block { padding-top: 18px; border-top: 1px solid var(--border-color); }
  .top-rated-name { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 14px; color: var(--text-primary); margin: 0 0 10px; }
  .top-rated-wrap { position: relative; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
  .top-rated-wrap.collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(to bottom, transparent, var(--bg-card)); pointer-events: none; }
  .top-rated-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .top-rated-row { display: grid; grid-template-columns: 22px 34px 1fr auto; align-items: center; gap: 10px; padding: 5px 2px; border-radius: 8px; }
  .top-rated-row:hover { background: var(--bg-card-alt); }
  .top-rated-rank { font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
  .top-rated-cover { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
  .top-rated-cover-fallback { background: var(--bg-card-alt); border: 1px solid var(--border-color); }
  .top-rated-title { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Secondary/settings panels (Sharing, Friends, Gift Ideas, Belts, Friend
     Activity, Site) default to collapsed -- the Players tab was a long
     scroll of always-open panels most visits don't need. Primary content
     (Achievements, Leaderboard, House Shows) stays open. */
  .player-panel.collapsible .player-panel-head { cursor: pointer; user-select: none; margin-bottom: 0; }
  /* Players page group labels (2026-10-16 reorganization). */
  .pp-group-label { display: flex; align-items: center; gap: 12px; margin: 34px 0 14px; font: 700 11.5px/1 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
  .pp-group-label::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
  #players .pp-group-label:first-of-type { margin-top: 8px; }
  #playersGrid { margin-bottom: 18px; }
  /* Players as compact name buttons; the full card opens under the row (2026-10-16). */
  .player-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .pchip { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
  .pchip:hover, .pchip:focus-visible { border-color: var(--brass); }
  .pchip.on { border-color: var(--brass); background: var(--bg-card-alt); }
  .pchip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pchip-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pchip-rival { color: var(--brass); }
  .pchip-sub { font-size: 11.5px; color: var(--text-secondary); }
  .pchip-caret { color: var(--brass); flex-shrink: 0; transition: transform .2s ease; }
  .pchip.on .pchip-caret { transform: rotate(180deg); }
  .pdetail { grid-column: 1 / -1; }
  .pdetail .player-card { border-color: var(--brass); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  .pdetail .player-card:hover { transform: none; box-shadow: none; }
  .pdetail .player-card > .pname-row, .pdetail .player-card > div:not(.prow), .pdetail .player-card > button { grid-column: 1 / -1; }
  .pdetail .player-card .prow:last-of-type { border-bottom: 1px solid var(--border-color-soft); }
  .pcard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
  @media (max-width: 560px) { .player-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pdetail .player-card { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .pchip-caret { transition: none; } }
  .site-admin-wrap { width: min(1100px, calc(100% - 32px)); margin: 32px auto 0; }
  .ach-head { align-items: center; flex-wrap: nowrap; }
  .ach-head h3 { flex-shrink: 0; }
  .ach-summary { margin-left: auto; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ach-summary b { color: var(--text-primary); }
  #achievementsPanel.collapsed > *:not(.player-panel-head) { display: none !important; }
  @media (max-width: 560px) { .ach-latest { display: none; } }
  .player-panel.collapsible .pp-caret { transition: transform .25s cubic-bezier(.2,.8,.2,1); flex-shrink: 0; color: var(--text-muted); }
  .player-panel.collapsible.collapsed .pp-caret { transform: rotate(-90deg); }
  .player-panel.collapsible.collapsed > *:not(.player-panel-head) { display: none; }

  .avatar-mono { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-card-alt); border: 1px solid var(--border-color); display: inline-flex; align-items: center; justify-content: center; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 13px; color: var(--avatar-mono-color); flex-shrink: 0; letter-spacing: 0; }
  .avatar-mono.avatar-inverse { background: rgba(237,227,211,.1); border-color: rgba(237,227,211,.28); color: var(--parchment); }
  /* Real uploaded photo, sized/shaped to match .avatar-mono exactly so the
     two are interchangeable wherever avatarHtml() is used -- swapping one
     for the other never shifts layout. */
  .avatar-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); flex-shrink: 0; display: inline-block; }
  .avatar-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color-soft); }
  .avatar-upload-row .avatar-photo, .avatar-upload-row .avatar-mono { width: 56px; height: 56px; font-size: 20px; }

  .player-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 22px 18px; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1); }
  .player-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brass); opacity: .55; }
  .player-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px var(--shadow-color); }
  .player-card .pname-row { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
  .player-card .pname { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 16.5px; color: var(--text-primary); }
  .player-card .prow { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-color-soft); }
  .player-card .prow:last-of-type { border-bottom: none; }
  .player-card .plabel { color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; font-weight: 600; }
  .player-card .pval { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }

  .belt-pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; }
  .belt-pill.holds { background: var(--brass); color: var(--walnut); }
  .belt-pill.held-by-them { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }

  /* Achievements as medallions in a lit display case: a dark walnut/felt
     panel (brand literals, deliberately identical in both themes, like the
     rival plaque) so the brass rings and coin-struck seals actually have
     something to glow against, instead of gray-on-white minimalism. */
  #achievementsPanel.player-panel {
    background: radial-gradient(130% 160% at 12% -25%, rgba(176,141,87,.22), transparent 55%), linear-gradient(165deg, #2f251d, #201811 65%);
    border-color: rgba(176,141,87,.4);
  }
  #achievementsPanel h3 { color: #f3ead9; }
  #achievementsPanel h3::before { background: var(--brass); box-shadow: 0 0 8px rgba(176,141,87,.7); }
  #achievementsPanel .pp-lede { color: rgba(237,227,211,.62); }

  .achieve-grid-wrap { position: relative; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
  .achieve-grid-wrap.collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(to bottom, transparent, #201811); pointer-events: none; }
  .achieve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 14px; }
  .achieve-card { background: rgba(255,255,255,.03); border: 1px solid rgba(237,227,211,.1); border-radius: 12px; padding: 24px 12px 18px; text-align: center; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s; }
  .achieve-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.05); box-shadow: 0 12px 26px rgba(0,0,0,.35); }
  .achieve-card.complete { border-color: rgba(176,141,87,.55); background: rgba(176,141,87,.07); }

  .achieve-medallion { width: 62px; height: 62px; margin: 0 auto 14px; position: relative; }
  .achieve-medallion .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .achieve-medallion .ring-track { fill: none; stroke: rgba(237,227,211,.14); stroke-width: 2.5; }
  .achieve-medallion .ring-fill { fill: none; stroke: var(--brass); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
  .achieve-card.complete .achieve-medallion .ring-fill { filter: drop-shadow(0 0 5px rgba(176,141,87,.7)); }
  .achieve-seal { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(237,227,211,.16); background: rgba(0,0,0,.22); display: flex; align-items: center; justify-content: center; transition: border-color .3s, background .3s, box-shadow .3s; }
  .achieve-card.complete .achieve-seal {
    border-color: transparent;
    background: radial-gradient(circle at 34% 28%, #f6dfa0, var(--brass) 58%, #86672f 100%);
    box-shadow: 0 0 0 1px rgba(176,141,87,.6), 0 4px 14px rgba(176,141,87,.4);
  }

  /* Embossed meeple mark: the same CC0 meeple silhouette used in the hero
     background, struck three times (shadow/base/highlight, each nudged a
     hair off-center) so it reads as raised metal rather than a flat icon.
     One shared mark for every achievement -- the ring, label and hint are
     what differentiate badges, not the glyph. */
  .meeple-emboss { width: 26px; height: 26px; position: relative; }
  .meeple-emboss svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .meeple-emboss .m-shadow { fill: rgba(0,0,0,.45); transform: translate(0.7px, 0.9px); }
  .meeple-emboss .m-base { fill: rgba(237,227,211,.32); }
  .meeple-emboss .m-highlight { fill: rgba(255,255,255,.4); transform: translate(-0.6px, -0.7px); }
  .achieve-card.complete .meeple-emboss .m-shadow { fill: rgba(43,33,27,.55); }
  .achieve-card.complete .meeple-emboss .m-base { fill: #6b4f28; }
  .achieve-card.complete .meeple-emboss .m-highlight { fill: rgba(255,244,222,.75); }
  .achieve-label { font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(237,227,211,.85); margin-bottom: 5px; }
  .achieve-card.complete .achieve-label { color: #f3ead9; }
  .achieve-hint { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-size: 11.5px; color: rgba(237,227,211,.6); line-height: 1.35; }
  .achieve-card.complete .achieve-hint { color: #9fd8ab; font-style: normal; font-weight: 600; }

  /* Friend Activity feed (Players tab) -- recent plays/reviews from public
     friends, plus your own trophy wins/losses. Read-only for now, same
     row treatment as .log-detail-row so it feels native to the rest of
     the site rather than a bolted-on widget. */
  .activity-feed-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  .activity-feed-row { display: flex; align-items: center; gap: 12px; background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; }
  .activity-feed-row .afr-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--felt); color: var(--parchment); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .activity-feed-row.afr-trophy .afr-icon { background: var(--brass); color: var(--walnut); }
  .activity-feed-row .afr-body { flex: 1; min-width: 0; font-size: 13px; color: var(--text-primary); line-height: 1.4; }
  .activity-feed-row .afr-body strong { font-weight: 700; }
  .activity-feed-row .afr-when { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
  .activity-feed-empty { font-size: 13px; color: var(--text-muted); padding: 6px 0; }

  /* Game Nights (Players tab) -- no-login poll model, see
     feature-game-night-polls.sql / game-night-scheduling-poll-plan.md */
  .gn-card { background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; }
  .gn-card + .gn-card { margin-top: 10px; }
  .gn-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
  .gn-card-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 15px; color: var(--text-primary); }
  .gn-card-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
  .rsvp-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
  .rsvp-pill.rsvp-yes { background: var(--text-accent-green); color: #0d1f14; }
  .rsvp-pill.rsvp-no { background: var(--text-accent-red); color: #fff; }
  .rsvp-pill.rsvp-maybe { background: var(--brass); color: var(--walnut); }
  .rsvp-pill.rsvp-pending { background: var(--border-color-soft); color: var(--text-muted); }
  .gn-rsvp-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
  .gn-rsvp-row button { padding: 5px 12px; font-size: 11.5px; }
  .gn-polling-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--brass); color: var(--walnut); white-space: nowrap; }
  .gn-event-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
  .gn-event-house { background: var(--brass); color: var(--walnut); }
  .gn-event-dark { background: var(--felt); color: var(--parchment); }
  .gn-event-premium { background: var(--brick); color: #fff; }
  .gn-event-tournament { background: var(--walnut-light); color: var(--brass); }
  .gn-poll-link-row { display: flex; gap: 8px; margin: 6px 0 4px; }
  .gn-poll-link-input { flex: 1; font-size: 12px; color: var(--text-secondary); background: var(--bg-card); cursor: text; }
  .gn-responses-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
  .gn-responses-table th, .gn-responses-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-color-soft); vertical-align: top; }
  .gn-responses-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
  .gn-fit-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color-soft); }
  .gn-fit-section h4 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
  .gn-fit-note { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
  .gn-fit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .gn-fit-chips-scroll { max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid var(--border-color-soft); border-radius: 10px; background: var(--bg-card-alt); }
  .gn-fit-chip { font-size: 11.5px; font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color-soft); border-radius: 999px; padding: 4px 11px; }
  .gn-tables-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .gn-tables-controls input[type=number] { padding: 6px 8px; }
  .gn-host-toggle-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .gn-host-toggle { cursor: pointer; }
  .gn-host-toggle input[type=checkbox] { cursor: pointer; }
  .gn-host-arrival-input { font-size: 11.5px; padding: 4px 7px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); }
  .gn-host-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; background: var(--brass); color: var(--walnut); white-space: nowrap; }
  .gn-host-row td:first-child { font-weight: 600; }
  .gn-grid-section { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color-soft); }
  .gn-grid-section h4 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
  .gn-grid-scroll { overflow-x: auto; border: 1px solid var(--border-color-soft); border-radius: 10px; }
  .gn-grid { display: grid; grid-template-columns: 64px repeat(var(--gn-cols), minmax(150px, 1fr)); min-width: 420px; background: var(--bg-card); }
  .gn-grid-corner { background: var(--bg-card-alt); border-bottom: 1px solid var(--border-color-soft); border-right: 1px solid var(--border-color-soft); }
  .gn-grid-colhead { background: var(--bg-card-alt); border-bottom: 1px solid var(--border-color-soft); border-right: 1px solid var(--border-color-soft); padding: 8px 10px; }
  .gn-grid-colhead h5 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }
  .gn-grid-roster { display: flex; flex-wrap: wrap; gap: 4px; }
  .gn-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: 0 0 0 2px var(--bg-card-alt); }
  .gn-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
  .gn-avatar-host { box-shadow: 0 0 0 2px var(--brass); }
  .gn-grid-time { border-right: 1px solid var(--border-color-soft); border-bottom: 1px solid var(--border-color-soft); padding: 8px 6px; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); background: var(--bg-card-alt); display: flex; align-items: flex-start; }
  .gn-grid-cell { border-right: 1px solid var(--border-color-soft); border-bottom: 1px solid var(--border-color-soft); padding: 6px; }
  .gn-grid-cell-empty { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-muted); font-style: italic; }
  .gn-grid-card { display: flex; gap: 8px; align-items: center; background: var(--bg-page); border: 1px solid var(--border-color-soft); border-radius: 8px; padding: 6px; }
  .gn-grid-art { width: 32px; height: 32px; border-radius: 5px; flex-shrink: 0; background: var(--felt); display: flex; align-items: center; justify-content: center; font-size: 14px; overflow: hidden; }
  .gn-grid-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gn-grid-name { font-size: 11.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
  .gn-grid-len { font-size: 10px; color: var(--text-muted); }
  .gn-table-select { font-size: 11.5px; padding: 4px 7px; border-radius: 6px; }
  .gn-fit-chip-add { cursor: pointer; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; }
  .gn-fit-chip-add:hover { border-color: var(--felt); color: var(--felt); }
  .gn-fit-chip-added { background: rgba(53,73,59,.12); border-color: var(--felt); color: var(--felt); cursor: default; }
  .gn-shortlist-section { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color-soft); }
  .gn-shortlist-section h5 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
  .gn-manual-add { display: flex; gap: 8px; margin-bottom: 10px; }
  .gn-manual-add-input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 11.5px; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); }
  .gn-shortlist-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 5px 0; }
  .gn-shortlist-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
  .gn-shortlist-tally { display: flex; gap: 6px; }
  .gn-sched-controls { display: flex; align-items: center; gap: 6px; }
  .gn-sched-time { padding: 4px 7px; font-size: 11.5px; }
  .gn-sched-added { font-size: 11px; font-weight: 600; color: var(--felt); }
  .gn-timeline-section { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color-soft); }
  .gn-timeline-section h5 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
  .gn-timeline-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
  .gn-timeline-time { font-size: 12px; font-weight: 700; color: var(--brass); min-width: 62px; }
  .gn-timeline-name { font-size: 12.5px; color: var(--text-primary); flex: 1; }

  .rival-panel-inner { display: flex; align-items: center; gap: 16px; }
  .rival-name { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-size: 23px; margin-bottom: 3px; color: var(--parchment); }
  .rival-sub { font-size: 12px; opacity: .72; letter-spacing: .01em; }
  .otd-banner { background: linear-gradient(135deg, var(--brass), #8c6b1f); color: #fff; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
  .otd-banner .otd-icon { display: inline-flex; color: var(--brass); }
  .otd-banner .otd-icon svg { width: 22px; height: 22px; }
  .otd-banner .otd-text { font-size: 13.5px; line-height: 1.5; }
  .otd-banner .otd-text strong { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; }
  .challenge-hero { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; }
  .ring-wrap { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
  .ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .ring-track { fill: none; stroke: var(--border-color); stroke-width: 6; }
  .ring-fill { fill: none; stroke: var(--felt); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
  .challenge-hero-ring { width: 128px; height: 128px; }
  .challenge-hero-ring .ring-track, .challenge-hero-ring .ring-fill { stroke-width: 8; }
  .challenge-hero-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .challenge-hero-label .num { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 24px; color: var(--text-primary); }
  .challenge-hero-label .lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
  .challenge-hero .stat-row { flex: 1; margin-bottom: 0; min-width: 220px; }

  .challenge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
  .challenge-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px 14px 16px; text-align: center; position: relative; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1); }
  .challenge-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px var(--shadow-color); }
  .challenge-card.complete { border-color: #d4af37; }
  .challenge-card.complete .ring-fill { stroke: #d4af37; }
  .ring-cover { position: absolute; top: 13px; left: 13px; right: 13px; bottom: 13px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--walnut), var(--walnut-light)); display: flex; align-items: center; justify-content: center; }
  .ring-cover img { width: 100%; height: 100%; object-fit: cover; }
  .ring-cover .fallback { font-size: 9.5px; padding: 4px; color: var(--brass); font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; line-height: 1.2; }
  .ring-count { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; color: var(--text-primary); }
  .challenge-card.complete .ring-count { border-color: #d4af37; background: linear-gradient(135deg, #d4af37, #8c6b1f); color: #fff; }
  .cc-name { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 13.5px; color: var(--text-primary); margin-top: 14px; line-height: 1.3; }
  .cc-trophy { display: inline-flex; color: var(--brass); vertical-align: -2px; }
  .challenge-card .del-btn { top: 8px; right: 8px; }

  .h2h-wrap { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 18px 20px; margin-bottom: 30px; }
  .h2h-wrap h3 { font-size: 15px; margin-bottom: 10px; color: var(--text-primary); }
  .h2h-empty { color: var(--text-muted); font-size: 13px; padding: 6px 0; }
  .h2h-row { display: grid; grid-template-columns: 110px 1fr 80px; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border-color-soft); }
  .h2h-row:last-child { border-bottom: none; }
  .h2h-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .h2h-bar-wrap { display: flex; flex-direction: column; gap: 5px; }
  .h2h-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--border-color-soft); }
  .h2h-bar-mine { background: var(--text-accent-green); height: 100%; }
  .h2h-bar-tie { background: var(--text-muted); opacity: .5; height: 100%; }
  .h2h-bar-theirs { background: var(--text-accent-red); height: 100%; }
  .h2h-record { font-size: 11px; color: var(--text-muted); }
  .h2h-record .my-rec { color: var(--text-accent-green); font-weight: 700; }
  .h2h-record .their-rec { color: var(--text-accent-red); font-weight: 700; }
  .h2h-together { font-size: 12px; color: var(--text-secondary); text-align: right; }

  .compare-wrap { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 18px 20px; margin-bottom: 30px; }
  .compare-wrap h3 { font-size: 15px; margin-bottom: 4px; color: var(--text-primary); }
  .compare-wrap .sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; }
  .compare-controls { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; margin-bottom: 14px; }
  .compare-side { display: flex; gap: 8px; flex: 1 1 160px; min-width: 160px; }
  .compare-side select { flex: 1; min-width: 0; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-primary); background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 7px; padding: 8px 6px; }
  .compare-vs { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; color: var(--brass); font-size: 15px; text-align: center; flex: 0 0 auto; padding: 0 2px 9px; }
  .compare-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
  .compare-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 4px; }
  .compare-col .compare-label { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
  .compare-col .stat-row { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 560px) { .compare-stats { grid-template-columns: 1fr; } }

  .log-grid { display: grid; gap: 12px; }
  .log-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px 20px; display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; position: relative; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
  .log-card.visible { opacity: 1; transform: translateY(0); }
  .log-card.visible:hover { transform: translateY(-3px); box-shadow: 0 10px 22px var(--shadow-color); border-color: var(--brass); }
  .log-card .date-block { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .log-card:hover .date-block { transform: scale(1.06); }
  .log-card .date-block { text-align: center; background: var(--felt); color: var(--parchment); border-radius: 8px; padding: 8px 4px; }
  .log-card .date-block .day { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 20px; font-weight: 700; line-height: 1; }
  .log-card .date-block .mon { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
  .log-card .game-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
  .log-card .players { font-size: 12.5px; color: var(--text-secondary); }
  .log-card .players .winner { color: var(--text-accent-red); font-weight: 700; }
  .log-card .scores { text-align: right; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
  .log-card .scores .win-score { color: var(--text-accent-red); font-weight: 700; }
  .log-card .type-tag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--brass); color: var(--text-primary); padding: 3px 8px; border-radius: 999px; margin-top: 6px; }
  .log-card .type-tag.tx-in { background: var(--felt); color: #fff; }
  .log-card .type-tag.tx-out { background: var(--brick); color: #fff; }
  .log-card.has-cover { grid-template-columns: 90px 46px 1fr auto; }
  .log-card .tx-cover, .log-card .sess-cover { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }

  /* ---- Session log: collapsing month groups + compact game grid ---- */
  .log-month { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; margin-bottom: 12px; overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
  .log-month.visible { opacity: 1; transform: translateY(0); }
  .log-month-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
  .log-month-toggle h4 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 15.5px; color: var(--text-primary); }
  .log-month-toggle .lm-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .log-month-toggle .lm-count { font-size: 11.5px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
  .log-month-toggle .lm-caret { transition: transform .25s cubic-bezier(.2,.8,.2,1); color: var(--text-muted); flex-shrink: 0; }
  .log-month.open .log-month-toggle .lm-caret { transform: rotate(180deg); }
  .log-month-body { display: none; padding: 0 20px 20px; }
  .log-month.open .log-month-body { display: block; }
  .log-past-years .log-month-toggle h4 { color: var(--text-secondary, var(--text-muted)); }
  .log-past-years > .log-month-body { padding: 0 16px 16px; }
  .log-past-years > .log-month-body .log-month { margin-bottom: 10px; }
  .log-past-years > .log-month-body .log-month:last-child { margin-bottom: 0; }
  .log-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; }
  .log-game-card { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, var(--walnut), var(--walnut-light)); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
  .log-game-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px var(--shadow-color); }
  .log-game-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .log-game-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,15,10,.85) 0%, rgba(20,15,10,.15) 55%, transparent 75%); }
  .log-game-card .lgc-name { position: absolute; left: 8px; right: 8px; bottom: 22px; z-index: 1; font-size: 11.5px; font-weight: 700; color: #fdfbf6; text-shadow: 0 1px 3px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .log-game-card .lgc-count { position: absolute; left: 8px; bottom: 6px; z-index: 1; font-size: 10px; font-weight: 600; color: rgba(253,251,246,.85); }
  .log-detail-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-accent-green); background: none; border: none; cursor: pointer; padding: 0 0 14px; }
  /* Cross-tab shortcut links (Games Played <-> Players) -- same visual
     language as .log-detail-back: small, bold, brand-green, arrow icon,
     no button box, so it reads as "related" rather than competing with
     the real call-to-action buttons in the section head. */
  .cross-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text-accent-green); background: none; border: none; cursor: pointer; padding: 0; margin-top: 6px; }
  .cross-link:hover { text-decoration: underline; }
  .cross-link svg { flex-shrink: 0; }
  .log-detail-list { display: flex; flex-direction: column; gap: 8px; }
  .log-detail-row { display: flex; align-items: center; gap: 12px; background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 10px; padding: 9px 12px; position: relative; }
  .log-detail-row .ldr-cover { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
  .log-detail-row .ldr-date { font-size: 11px; color: var(--text-muted); width: 52px; flex-shrink: 0; }
  .log-detail-row .ldr-via { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); margin-top: 2px; }
  .log-detail-row .ldr-players { font-size: 12.5px; color: var(--text-secondary); flex: 1; min-width: 0; }
  .log-detail-row .ldr-players .winner { color: var(--text-accent-red); font-weight: 700; }
  .log-detail-row .ldr-score { font-size: 12px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
  .log-detail-row .ldr-score .win-score { color: var(--text-accent-red); font-weight: 700; }
  .log-detail-row .ldr-actions { display: flex; gap: 4px; flex-shrink: 0; }
  .log-detail-row .del-btn, .log-detail-row .edit-btn { position: static; background: none !important; color: var(--text-muted); width: 20px; height: 20px; }
  .log-detail-row .del-btn:hover, .log-detail-row .edit-btn:hover { color: var(--text-primary); }
  .log-detail-row { flex-wrap: wrap; }
  .ldr-photos { display: flex; align-items: center; gap: 5px; flex-basis: 100%; order: 5; margin-top: 2px; padding-left: 44px; }
  .ldr-photo-thumb { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; cursor: pointer; border: 1px solid var(--border-color); transition: transform .18s ease; flex-shrink: 0; }
  .ldr-photo-thumb:hover { transform: scale(1.06); }
  .ldr-photo-more { width: 34px; height: 34px; border-radius: 7px; background: var(--border-color-soft); color: var(--text-secondary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
  .ldr-photo-add { width: 34px; height: 34px; border-radius: 7px; border: 1px dashed var(--border-color); background: none; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
  .ldr-note { font-size: 12.5px; font-style: italic; color: var(--text-secondary); flex-basis: 100%; order: 6; margin-top: 2px; padding-left: 44px; line-height: 1.4; }
  .ldr-photo-add:hover { color: var(--text-primary); border-color: var(--text-muted); }

  /* Session photo lightbox -- same visual language as the photography
     lightbox (dark scrim, arrow nav, counter) but its own instance scoped
     to the Game Shelf page. */
  .sp-lightbox { position: fixed; inset: 0; background: rgba(10,10,8,.92); z-index: 80; display: none; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
  .sp-lightbox.open { display: flex; }
  .sp-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); border-radius: 4px; cursor: default; }
  .sp-lightbox .sp-lb-close { position: absolute; top: 24px; right: 34px; color: #fdfbf6; font-size: 32px; background: none; border: none; cursor: pointer; line-height: 1; }
  .sp-lightbox .sp-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #fdfbf6; font-size: 20px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; }
  .sp-lightbox .sp-lb-arrow:hover { background: rgba(255,255,255,.18); transform: translateY(-50%) scale(1.06); }
  .sp-lightbox .sp-lb-prev { left: 24px; }
  .sp-lightbox .sp-lb-next { right: 24px; }
  .sp-lightbox .sp-lb-count { position: absolute; top: 28px; left: 34px; color: #cfc4ac; font-size: 12px; letter-spacing: .08em; }
  .sp-lightbox .sp-lb-by { position: absolute; top: 52px; left: 34px; color: #cfc4ac; font-size: 11.5px; opacity: .8; }
  .sp-lightbox .sp-lb-delete { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); background: rgba(166,58,50,.85); border: none; color: #fff; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
  .sp-lightbox .sp-lb-delete:hover { background: var(--brick); }

  /* Games In/Out balance bar */
  .balance-bar-wrap { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 22px; margin-bottom: 20px; }
  .balance-bar-wrap .bb-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
  .balance-bar-wrap .bb-head .bb-in { color: var(--text-accent-green); font-weight: 700; }
  .balance-bar-wrap .bb-head .bb-out { color: var(--text-accent-red); font-weight: 700; }
  .balance-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--border-color-soft); }
  .balance-bar .bb-spent { background: var(--text-accent-red); height: 100%; }
  .balance-bar .bb-earned { background: var(--text-accent-green); height: 100%; }

  .review-grid { display: grid; gap: 18px; }
  .review-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 22px 26px; display: grid; grid-template-columns: 96px 1fr; gap: 20px; position: relative; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1); cursor: pointer; }
  .review-grid .review-card:nth-child(1) { transition-delay: 0s; }
  .review-grid .review-card:nth-child(2) { transition-delay: .08s; }
  .review-grid .review-card:nth-child(3) { transition-delay: .16s; }
  .review-card.visible { opacity: 1; transform: translateY(0); }
  .review-card.highlight-flash { animation: highlightFlash 2.2s ease; }
  @keyframes highlightFlash {
    0%, 100% { box-shadow: none; border-color: var(--border-color); }
    15%, 60% { box-shadow: 0 0 0 3px var(--brass); border-color: var(--brass); }
  }
  .review-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px var(--shadow-color); transition-delay: 0s; }
  .review-cover { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--walnut), var(--walnut-light)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .review-cover img { width: 100%; height: 100%; object-fit: cover; }
  .review-cover .fallback { color: var(--brass); font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 12px; text-align: center; padding: 6px; }
  .review-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; flex-wrap: wrap; gap: 10px; }
  .review-head h3 { font-size: 17px; }
  /* Collection page score badge: struck as a small coin -- a beveled rim
     (::before, no extra markup for the rim itself) around a recessed face
     with an embossed number. Color is a continuous red-to-green gradient
     computed per rating in JS (see scoreBadgeGradient()) rather than fixed
     high/mid/low buckets, so a 5.8 and a 6.2 read as close neighbors
     instead of jumping color tiers. .score-none below still covers the
     unrated case. */
  .score-badge { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
  .score-badge::before {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(255,255,255,.05) 40%, rgba(0,0,0,.35) 75%, rgba(0,0,0,.55));
  }
  .score-badge .sb-face {
    position: relative; width: 100%; height: 100%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 13.5px; color: #fff;
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.6),
      inset 0 -3px 4px rgba(0,0,0,.4),
      inset 2px 0 2px rgba(255,255,255,.15),
      0 3px 8px rgba(0,0,0,.35);
    text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 -1px 0 rgba(255,255,255,.3);
  }
  .score-badge.score-none .sb-face { background: linear-gradient(135deg, var(--text-muted), var(--text-secondary)); font-size: 12px; }

  /* Review score medallions: a coin-struck alternative to .score-badge,
     used on the Reviews tab and the review detail hero -- deliberately NOT
     applied to .coll-card .score-badge on the Collection page, which keeps
     its green/amber/red at-a-glance tier coloring untouched. Three layers
     give the 3D read: a thin brass progress ring (rating out of 10), a
     beveled metal rim with a light-catch highlight, and a recessed dark
     face with an engraved numeral. */
  .score-medallion { position: relative; flex-shrink: 0; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
  .score-medallion .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .score-medallion .ring-track { fill: none; stroke: rgba(0,0,0,.18); stroke-width: 2; }
  .score-medallion .ring-fill { fill: none; stroke: #c9a565; stroke-width: 2.4; stroke-linecap: round; }
  .score-medallion .sm-bezel {
    position: absolute; inset: 12%; border-radius: 50%;
    background: linear-gradient(145deg, #f3d9a0 0%, var(--brass) 42%, #6e5330 75%, #4a3620 100%);
    box-shadow:
      inset 0 1px 1px rgba(255,250,230,.7),
      inset 0 -2px 3px rgba(0,0,0,.55),
      inset 2px 0 2px rgba(255,255,255,.12),
      inset -2px 0 3px rgba(0,0,0,.25);
  }
  .score-medallion .sm-seal {
    position: absolute; inset: 20%; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #4a3826 0%, #241a10 65%, #150e08 100%);
    box-shadow:
      inset 0 2px 4px rgba(0,0,0,.75),
      inset 0 -1px 0 rgba(255,255,255,.06),
      0 0 0 1px rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-style: italic;
    color: #f3d9a0;
    text-shadow: 0 1px 1px rgba(0,0,0,.85), 0 -1px 0 rgba(255,244,214,.3);
  }
  .review-pull { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--text-primary); margin: 6px 0 8px; }
  .review-rest { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
  .review-rest.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card-more-btn { font-size: 12px; font-weight: 700; color: var(--text-accent-green); background: none; border: none; cursor: pointer; padding: 6px 0 0; }

  /* ---- Review detail: editorial layout ---- */
  .review-hero { position: relative; margin: -34px -36px 22px; border-radius: 18px 18px 0 0; overflow: hidden; height: 260px; background: linear-gradient(135deg, var(--walnut), var(--walnut-light)); }
  .review-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .review-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,15,10,.88) 0%, rgba(20,15,10,.35) 45%, transparent 70%); }
  .review-hero .rh-content { position: absolute; left: 24px; right: 24px; bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; z-index: 1; }
  .review-hero h2 { color: #fdfbf6; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 28px; line-height: 1.15; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
  .review-hero .rh-meta { color: rgba(253,251,246,.82); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: 6px; }
  .review-score-big { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
  .review-score-big .rsb-circle { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 18px; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.18); }
  .review-score-big .rsb-verdict { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #fdfbf6; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
  .review-more { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-color); }
  .review-more-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
  .review-more-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
  .review-more-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--text-primary); transition: transform .2s ease, border-color .2s ease; }
  .review-more-item:hover { transform: translateY(-2px); border-color: var(--brass); }
  .review-more-item img { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
  .review-more-item .rmi-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; flex: 1; }
  .review-more-item .rmi-score { font-size: 12px; font-weight: 700; color: var(--text-accent-green); }
  @media (prefers-reduced-motion: reduce) { .review-more-item { transition: none; } .review-more-item:hover { transform: none; } }
  .review-specs { display: flex; gap: 20px; flex-wrap: wrap; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 22px; }
  .review-specs .rs-item { display: flex; flex-direction: column; gap: 3px; }
  .review-specs .rs-label { text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-size: 9.5px; font-weight: 700; }
  .review-specs .rs-val { font-weight: 700; color: var(--text-primary); font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 13.5px; }
  .review-body-lede { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-size: 17px; line-height: 1.55; color: var(--text-primary); margin-bottom: 16px; }
  .review-body p { font-size: 14.5px; line-height: 1.75; color: var(--text-primary); margin-bottom: 14px; }
  .review-body p:last-child { margin-bottom: 0; }

  /* ---- Reactions, share, comments ---- */
  .engagement-preview { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
  .reaction-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color-soft); }
  .reaction-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: transform .15s ease, border-color .2s, color .2s; }
  .reaction-btn:hover { border-color: var(--brass); color: var(--text-primary); }
  .reaction-btn:active { transform: scale(.94); }
  .reaction-btn.reacted { border-color: var(--brass); background: var(--brass); color: #fff; }
  .reaction-btn .rcount { font-variant-numeric: tabular-nums; }
  .share-btn { margin-left: auto; }

  .comments-panel { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color-soft); }
  .comments-panel.open { display: block; }
  .comment-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
  .comment-item { background: var(--bg-card-alt); border: 1px solid var(--border-color-soft); border-radius: 10px; padding: 10px 12px; position: relative; }
  .comment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
  .comment-author { font-weight: 700; font-size: 12.5px; color: var(--text-primary); }
  .comment-date { font-size: 10.5px; color: var(--text-muted); }
  .comment-body { font-size: 13px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; }
  .comment-del { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; }
  .comment-del:hover { color: var(--brick); }
  .comment-empty { font-size: 12.5px; color: var(--text-muted); }
  .comment-loading { font-size: 12.5px; color: var(--text-muted); }
  .comment-form { display: flex; flex-direction: column; gap: 8px; }
  .comment-form input, .comment-form textarea { font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-card-alt); color: var(--text-primary); }
  .comment-form textarea { resize: vertical; min-height: 56px; }
  .comment-form .card-more-btn { align-self: flex-start; background: var(--felt); color: var(--parchment); padding: 7px 14px; border-radius: 7px; }

  /* ---- Community rating ---- */
  .community-badge { display: inline-flex; align-items: center; gap: 3px; background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
  .community-rating-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color-soft); }
  .community-avg { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
  .community-avg strong { color: var(--text-primary); }
  .community-count { color: var(--text-muted); }
  .community-thanks { font-size: 13px; color: var(--text-accent-green); font-weight: 600; }
  .community-rate-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .community-rate-form label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
  .community-rate-form input { width: 70px; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback R', 'Inter Fallback D', sans-serif; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-card-alt); color: var(--text-primary); }
  .new-badge { display: inline-block; background: var(--brick); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
  .review-head .stars { color: var(--text-accent-red); font-size: 14px; letter-spacing: 1px; }

  /* ---- Blog: magazine layout ---- */
  .blog-featured { position: relative; border-radius: 20px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; background: linear-gradient(135deg, var(--walnut), var(--walnut-light)); box-shadow: 0 14px 30px var(--shadow-color); opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); margin-bottom: 20px; cursor: pointer; }
  .blog-featured.visible { opacity: 1; transform: translateY(0); }
  .blog-featured img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .blog-featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,15,10,0) 15%, rgba(15,11,8,.94) 100%); }
  .blog-featured-content { position: relative; z-index: 2; padding: 30px 32px; color: #fdfbf6; }
  .blog-featured .eyebrow { display: inline-block; color: var(--brass); background: rgba(15,11,8,.82); text-shadow: 0 1px 2px rgba(0,0,0,.5); backdrop-filter: blur(2px); padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
  .blog-featured h2 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: clamp(22px, 3.2vw, 34px); font-weight: 700; margin-bottom: 10px; max-width: 640px; }
  .blog-featured .meta { font-size: 12.5px; opacity: .85; margin-bottom: 12px; }
  .blog-featured p { font-size: 14px; line-height: 1.6; max-width: 600px; opacity: .92; }
  .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
  .blog-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; position: relative; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1); cursor: pointer; }
  .blog-grid .blog-card:nth-child(1) { transition-delay: 0s; }
  .blog-grid .blog-card:nth-child(2) { transition-delay: .08s; }
  .blog-grid .blog-card:nth-child(3) { transition-delay: .16s; }
  .blog-card.visible { opacity: 1; transform: translateY(0); }
  .blog-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px var(--shadow-color); transition-delay: 0s; }
  .blog-card .cover { height: 140px; background: linear-gradient(135deg, var(--felt), var(--felt-light)); display: flex; align-items: center; justify-content: center; color: var(--parchment); font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 14px; text-align: center; padding: 10px; overflow: hidden; }
  .blog-card .cover img { width: 100%; height: 100%; object-fit: cover; }
  .blog-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
  .blog-card .body h3 { font-size: 16px; }
  .blog-card .meta { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
  .blog-card .excerpt { font-size: 13px; line-height: 1.6; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .review-date { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: 8px; }
  .review-body { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); }

  .empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13.5px; }
  footer { text-align: center; padding: 40px 20px 0; font-size: 12px; color: var(--text-muted); }
  /* Full-strength color (the old faded look failed contrast) and a real tap area. */
  footer .footer-link { color: inherit; font-size: 12px; text-decoration: none; display: inline-block; padding: 8px 7px; }
  footer .footer-link:hover { text-decoration: underline; }
  .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brick); color: var(--parchment); padding: 10px 18px; font-weight: 700; font-size: 13px; text-decoration: none; border-radius: 0 0 8px 0; }
  .skip-link:focus { left: 0; }
  .about-block { max-width: 900px; margin: 50px auto 0; padding: 0 32px; }
  .concierge-box, .compare-box { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px 22px; margin-bottom: 22px; transition: border-color .25s ease, box-shadow .25s ease; }
  .compare-box { margin-top: 30px; }
  .concierge-box::before, .compare-box::before { content: ''; position: absolute; top: -50%; right: -8%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(176,141,87,.15), transparent 70%); pointer-events: none; }
  .concierge-box:focus-within, .compare-box:focus-within { border-color: rgba(176,141,87,.5); box-shadow: 0 8px 24px rgba(176,141,87,.1); }
  /* Collapsed to a single line by default (see toggleSilasBox() in
     content.js) -- a full-height "ask Silas" box was the very first thing
     every visitor saw above their actual collection. Reuses the same
     collapsible/caret pattern as the Players-tab panels (.player-panel.
     collapsible) rather than inventing a new one. */
  .concierge-box.collapsible { padding-top: 14px; padding-bottom: 14px; cursor: default; }
  .concierge-head { display: none; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; user-select: none; position: relative; z-index: 1; }
  .concierge-box.collapsible .concierge-head { display: flex; min-height: 36px; }
  .concierge-head-label { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 14.5px; color: var(--text-primary); }
  .concierge-head-label em { font-style: italic; font-weight: 500; color: var(--text-secondary); }
  .concierge-caret { transition: transform .25s cubic-bezier(.2,.8,.2,1); flex-shrink: 0; color: var(--text-muted); }
  .concierge-box.collapsible.collapsed .concierge-caret { transform: rotate(-90deg); }
  .concierge-box.collapsible:not(.collapsed) .concierge-head { margin-bottom: 16px; }
  .concierge-box.collapsible.collapsed > *:not(.concierge-head) { display: none; }
  .smart-box-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; position: relative; z-index: 1; }
  .smart-box-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--brass), #c9a86a); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(176,141,87,.35); }
  .smart-box-tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6a38; margin-bottom: 2px; }
  [data-theme="dark"] .smart-box-tag { color: var(--brass); }
  .smart-box-title { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 16px; color: var(--text-primary); }
  .silas-header { text-align: center; margin-bottom: 20px; position: relative; z-index: 1; animation: conciergeIn .45s cubic-bezier(.2,.8,.3,1); }
  .silas-tag { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }
  .silas-signature { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-weight: 600; font-size: 27px; color: var(--text-primary); margin-bottom: 14px; line-height: 1; }
  .silas-rule { width: 34px; height: 1px; background: var(--brass); opacity: .55; margin: 0 auto 16px; }
  .silas-greeting { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; max-width: 380px; margin: 0 auto; }
  .concierge-label { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
  .concierge-input { flex: 1; min-width: 240px; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card-alt); color: var(--text-primary); font-size: 13.5px; font-family: inherit; position: relative; z-index: 1; transition: border-color .2s ease, box-shadow .2s ease; }
  .concierge-input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(176,141,87,.18); }
  #conciergeBtn:disabled { opacity: .6; cursor: default; }
  .example-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; position: relative; z-index: 1; }
  .example-chip { font-size: 11.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; background: var(--bg-card-alt); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
  .example-chip:hover { border-color: var(--brass); color: var(--brass); background: rgba(176,141,87,.08); }
  .concierge-result { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--bg-card-alt); border: 1px solid var(--border-color); display: flex; gap: 14px; align-items: center; animation: conciergeIn .4s cubic-bezier(.2,.8,.3,1); position: relative; z-index: 1; }
  @keyframes conciergeIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .concierge-result img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
  .concierge-result .cr-name { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 15px; color: var(--text-primary); margin-bottom: 4px; cursor: pointer; }
  .concierge-result .cr-name:hover { color: var(--brass); }
  .concierge-result .cr-reason { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
  .concierge-result.error .cr-reason { color: var(--text-accent-red); }
  .unowned-played-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 20px; margin-bottom: 24px; }
  .unowned-played-box h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
  .unowned-played-list { display: flex; flex-wrap: wrap; gap: 10px; }
  /* Standalone "Played, Not Owned" box (not the Shelf of Shame reuse, which
     sets its own scroll behavior above) — caps how tall the list can grow
     and scrolls internally once there's more content than fits, rather than
     letting the list push the rest of the page down indefinitely. */
  #unownedPlayedList { max-height: 260px; overflow-y: auto; padding-right: 4px; align-content: flex-start; }
  .unowned-played-chip { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-card-alt); cursor: pointer; transition: border-color .15s ease; }
  .unowned-played-chip:hover { border-color: var(--brass); }
  .unowned-played-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
  .unowned-played-chip .up-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
  .unowned-played-chip .up-badge { font-size: 13px; }
  .gift-section { margin-top: 18px; }
  .gift-section:first-child { margin-top: 0; }
  .gift-section-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 8px; }
  .gift-grid { display: flex; flex-wrap: wrap; gap: 10px; }
  .gift-chip { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 8px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card-alt); text-decoration: none; max-width: 260px; }
  .gift-chip img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
  .gift-chip-text { min-width: 0; }
  .gift-chip .gc-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gift-chip .gc-sub { font-size: 11px; color: var(--text-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gift-progress { font-size: 12px; color: var(--text-secondary); margin: 6px 0; }
  .interest-btns { display: flex; gap: 8px; margin-bottom: 10px; }
  .interest-btn { flex: 1; padding: 9px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card-alt); color: var(--text-primary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
  .interest-btn:hover { border-color: var(--brass); }
  .interest-btn.active { background: var(--felt); border-color: var(--felt); color: #fff; }
  .gm-section textarea { width: 100%; min-height: 60px; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card-alt); color: var(--text-primary); font-family: inherit; font-size: 12.5px; resize: vertical; }
  .compare-result { margin-top: 20px; animation: conciergeIn .4s cubic-bezier(.2,.8,.3,1); }
  .compare-score { text-align: center; margin-bottom: 22px; }
  .compare-score .cs-num { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 700; font-size: 42px; color: var(--brass); line-height: 1; }
  .compare-score .cs-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
  .compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .compare-col h4 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 13px; color: var(--text-primary); margin-bottom: 10px; }
  .compare-list { list-style: none; padding: 0; margin: 0; max-height: 220px; overflow-y: auto; }
  .compare-list li { font-size: 12.5px; color: var(--text-secondary); padding: 5px 0; border-bottom: 1px solid var(--border-color-soft); }
  .compare-list li:last-child { border-bottom: none; }
  .compare-empty { font-size: 12px; color: var(--text-muted); }
  @media (max-width: 560px) { .compare-cols { grid-template-columns: 1fr; } }
  .stat-strip { display: flex; gap: 40px; margin-top: 22px; flex-wrap: wrap; }
  .stat-item { text-align: left; }
  .stat-num { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-weight: 600; font-size: 30px; color: var(--brass); line-height: 1; }
  .stat-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 5px; }
  .about-inner { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 26px 30px; }
  .about-inner h3 { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-size: 17px; margin-bottom: 10px; color: var(--text-primary); }
  .about-inner p { font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 12px; }
  .about-link { font-size: 12.5px; font-weight: 700; color: var(--felt); text-decoration: none; }
  .about-link:hover { text-decoration: underline; }

  /* ---- Theme toggle + responsive nav ---- */
  .icon-btn { background: none; border: 1px solid rgba(244,241,232,.3); color: var(--parchment); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; flex-shrink: 0; }
  .icon-btn:hover { background: rgba(244,241,232,.12); }
  .nav-toggle { display: none; }

  /* "More" dropdown — groups the lower-priority tabs (Games In/Out,
     Conventions, Games Played, Players, 10x10, Game Stores) out of the
     primary row. Desktop: a real dropdown, closed by default. Mobile
     (below): always expanded inline, since the whole nav is already a
     full-width vertical list behind the hamburger there. */
  .nav-more { position: relative; }
  .nav-more-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; font: inherit; cursor: pointer; }
  .nav-more-caret { font-size: 10px; transition: transform .2s; }
  .nav-more.open .nav-more-caret { transform: rotate(180deg); }
  .nav-more-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 10px; list-style: none; flex-direction: column; gap: 2px; min-width: 170px; padding: 6px; background: var(--walnut-light); border: 1px solid rgba(244,241,232,.15); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); z-index: 20; }
  .nav-more.open .nav-more-menu { display: flex; }
  .nav-more-menu li { width: 100%; }
  .nav-more-menu a.nav-tab { display: block; padding: 8px 10px; border-radius: 6px; }
  .nav-more-menu a.nav-tab:hover { background: rgba(244,241,232,.1); }

  /* Notification bell (friend requests + belt-flip trophies waiting on you) */
  .notif-badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brick); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--walnut); }
  .notif-panel { display: none; position: absolute; top: 100%; right: 0; margin-top: 10px; width: 300px; max-width: 82vw; max-height: 70vh; overflow-y: auto; background: var(--walnut-light); border: 1px solid rgba(244,241,232,.15); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); z-index: 30; padding: 6px; }
  #notifBellWrap.open .notif-panel { display: block; }
  .notif-item { padding: 10px 10px; border-radius: 8px; }
  .notif-item + .notif-item { border-top: 1px solid rgba(244,241,232,.1); }
  .notif-empty { padding: 16px 10px; font-size: 13px; color: rgba(244,241,232,.65); text-align: center; }
  .notif-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(244,241,232,.5); padding: 8px 10px 4px; }

  /* Install prompt (PWA) -- fixed bottom bar, hidden until beforeinstallprompt
     fires (or, on iOS, a manual "Add to Home Screen" hint after a short
     delay) and dismissed for good once the user installs or closes it. */
  .install-banner { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; align-items: center; justify-content: space-between; gap: 14px; background: var(--walnut); color: var(--parchment); border-radius: 12px; padding: 12px 16px; box-shadow: 0 12px 30px rgba(0,0,0,.3); font-size: 13px; }
  .install-banner.open { display: flex; }
  @media (max-width: 560px) { .install-banner { flex-wrap: wrap; } }

  /* Public profiles (?u=<id>) -- a plain strip under the nav saying whose
     shelf is on screen, so browsing a friend's public link never gets
     mistaken for your own collection. */
  .public-profile-banner { background: var(--brass); color: var(--walnut); text-align: center; font-size: 13px; font-weight: 600; padding: 8px 16px; }
  .nav-more-menu a.nav-tab.active { padding: 8px 10px; }

  @media (max-width: 900px) {
    nav { flex-wrap: wrap; row-gap: 12px; }
    nav ul { display: none; width: 100%; flex-direction: column; gap: 4px; order: 4; }
    nav ul.open { display: flex; }
    nav ul li { width: 100%; }
    nav a.nav-tab { display: block; padding: 8px 4px; }
    .nav-toggle { display: inline-flex; }
    /* Flatten the More dropdown into the regular list on mobile — no
       separate toggle interaction needed when the whole nav is already
       one tap away behind the hamburger. */
    .nav-more-toggle { pointer-events: none; opacity: .6; font-size: 12px; padding: 8px 4px 2px; }
    .nav-more-caret { display: none; }
    .nav-more-menu { display: flex !important; position: static; margin-top: 0; box-shadow: none; border: none; background: none; padding: 0 0 0 14px; }
  }

  /* Narrow-viewport pass: modals, head-to-head/win-by-game rows, and the
     compare-periods controls all assumed comfortable desktop widths
     (fixed-px grid columns, generous modal padding) that get cramped or
     force horizontal scrolling under ~480px. */
  @media (max-width: 600px) {
    .game-modal { padding: 20px 12px; }
    .game-modal-inner { padding: 24px 18px 28px; border-radius: 14px; }
    .search-modal { padding-top: 50px; }
    /* Icon buttons (search, dark mode, nav toggle, export) are 32x32 by
       default -- fine for a mouse pointer, tight for a thumb. Grow the tap
       target on narrow/touch viewports without changing the icon's own
       visual size (the SVG inside stays whatever width/height it was
       given; this only adds more padding around it). */
    .icon-btn { width: 40px; height: 40px; }
  }
  @media (max-width: 480px) {
    .h2h-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 4px; }
    .h2h-together { text-align: left; }
    .compare-vs { align-self: center; }
    .compare-side { flex-direction: column; min-width: 100%; }
  }

  /* Utility classes replacing repeated inline styles */
  .u-hint { font-size: 12.5px; color: var(--text-muted); }
  .u-note { font-size: 13px; color: var(--text-secondary); }
  .u-empty-note { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
  .u-err { color: var(--text-accent-red); }
  .u-span-all { grid-column: 1 / -1; }
  .shame-tabs { flex: 0 0 100%; display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
  .recaps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
  .recaps-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-right: 6px; }
  .flash-highlight { outline: 2px solid var(--brass); outline-offset: 4px; transition: outline-color .4s; }
  .nav-more-menu li.nav-more-group { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--brass); padding: 8px 10px 2px; opacity: .9; pointer-events: none; }
  .nav-more-menu li.nav-more-group:first-child { padding-top: 2px; }
  a.finder-chip { text-decoration: none; display: inline-block; }

  /* Reserve the hero's height on small screens so the web-font swap can't push the page below it (measured real vs fallback heights: 461-531px at 320-440px wide, 445-495px at 441-900px). */
  @media (max-width: 440px) { .hero { min-height: 540px; } }
  @media (min-width: 441px) and (max-width: 900px) { .hero { min-height: 480px; } }
  .finder-plays { color: var(--brass); font-weight: 600; margin-top: 2px; }
  /* Hover used to win on specificity and clamp "always" lines to 20px, cutting wrapped text in half. */
  .coll-card:hover .coll-card-content .meta.always { max-height: none; opacity: .88; }
/* Philosopher's Table admin row: "Card" is a link styled like its buttons. */
.phil-row a.edit-btn { text-decoration: none; display: inline-block; }

/* Cover-wall hero (2026-10-15 redesign): a tilted wall of real box covers behind the
   headline, filled in by buildHeroWall() after load. Absolutely positioned, so it can't
   shift layout; it fades in once enough covers have arrived. */
.hero-wall{position:absolute;inset:-70px -60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));grid-auto-rows:auto;align-content:start;gap:14px;transform:rotate(-6deg);opacity:0;transition:opacity 1.4s ease;pointer-events:none;z-index:0;}
.hero-wall.on{opacity:.62;}
.hero-wall.drift{display:flex;flex-direction:column;gap:var(--hw-gap,14px);}
.hw-row{display:flex;}
.hw-track{display:flex;flex:0 0 auto;width:max-content;animation:hwDrift 110s linear infinite;will-change:transform;}
.hw-row:nth-child(even) .hw-track{animation-direction:reverse;}
.hw-set{display:flex;flex:0 0 auto;gap:var(--hw-gap,14px);padding-right:var(--hw-gap,14px);}
.hw-set img{flex:0 0 auto;}
.hero-wall.paused .hw-track{animation-play-state:paused;}
@keyframes hwDrift{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@media (prefers-reduced-motion:reduce){.hw-track{animation:none;}}
.hero-wall img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.5);display:block;background:#2b211b;}
.hero-shade{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease;background:linear-gradient(90deg,rgba(24,18,14,.96) 0%,rgba(24,18,14,.88) 40%,rgba(24,18,14,.5) 72%,rgba(24,18,14,.3) 100%),linear-gradient(180deg,rgba(24,18,14,0) 62%,rgba(24,18,14,.85) 100%);}
.hero.has-wall .hero-shade{opacity:1;}
.hero.has-wall .hero-ambient{opacity:0;transition:opacity 1s ease;}
@media (max-width:640px){.hero-wall{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;}.hero-shade{background:linear-gradient(180deg,rgba(24,18,14,.82) 0%,rgba(24,18,14,.9) 55%,rgba(24,18,14,.95) 100%);}}
/* Big hero numbers. min-height reserves the final height so filling them in can't shift the page. */
.hero-stats{display:flex;flex-wrap:wrap;gap:12px 40px;min-height:66px;}
.hs-stat{display:flex;flex-direction:column;gap:4px;}
.hs-num{font:700 40px/1 'Fraunces','Fraunces Fallback','Fraunces Fallback L','Fraunces Fallback D',serif;color:var(--parchment);}
.hs-lbl{font:600 11px/1.2 'Inter','Inter Fallback','Inter Fallback R','Inter Fallback D',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,227,211,.72);}
@media (max-width:640px){.hero-stats{flex-wrap:nowrap;gap:16px;}.hs-stat{flex:1 1 0;min-width:0;}.hs-num{font-size:28px;}.hs-lbl{font-size:9.5px;letter-spacing:.08em;}}
/* "This week on the shelf" becomes one swipeable row of cover cards. */
#shelfActivity .sa-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:2px 2px 10px;scrollbar-width:thin;}
#shelfActivity .sa-item,#shelfActivity .sa-skel{flex:0 0 232px;scroll-snap-align:start;height:232px;}
#shelfActivity .sa-item{flex-direction:column;gap:0;padding:0;overflow:hidden;border-radius:14px;}
#shelfActivity .sa-img,#shelfActivity .sa-ico{width:100%;height:118px;border-radius:0;}
#shelfActivity .sa-ico{font-size:40px;background:linear-gradient(160deg,var(--felt-light),var(--felt));}
#shelfActivity .sa-txt{padding:12px 14px 14px;}
#shelfActivity .sa-title{font-size:15px;}
#shelfActivity .sa-new{top:10px;right:10px;box-shadow:0 0 0 2px rgba(0,0,0,.35);}
@media (max-width:560px){#shelfActivity .sa-item,#shelfActivity .sa-skel{flex:0 0 70%;}}
/* The Welcome card and Game of the Month live in the swipe strip when it's showing. */
body.strip-has-welcome #visitorWelcome,body.strip-has-gotm #gotmCard{display:none !important;}
/* Scroll reveal (initScrollReveal in misc.js). */
.rv-on .rv{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1) !important;}
.rv-on .rv:not(.rv-in){opacity:0;transform:translateY(18px);}
/* Ask Silas as an open card between the swipe strip and the collection. */
.silas-card{box-sizing:border-box;width:min(1100px,calc(100% - 32px));margin:16px auto 0;display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:8px 32px;align-items:center;}
.silas-card > .silas-header{grid-row:1 / span 3;margin:0;}
.silas-card > form,.silas-card > .example-chips,.silas-card > button{grid-column:2;}
.silas-card > button{justify-self:start;}
.silas-card > .concierge-result{grid-column:1 / -1;}
@media (max-width:720px){.silas-card{grid-template-columns:1fr;}.silas-card > .silas-header{grid-row:auto;}.silas-card > form,.silas-card > .example-chips,.silas-card > button{grid-column:1;}}

@media (prefers-reduced-motion:reduce){.hero-wall,.hero-shade{transition:none;}}

/* ---- Menu option B: "All sections" panel + search pill (Oct 2026) ---- */
.nav-more{position: static;}
.nav-more-toggle{color: var(--parchment); opacity: .85; padding: 5px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 600; letter-spacing: .03em;}
.nav-more-toggle:hover,.nav-more.open .nav-more-toggle{opacity: 1; background: rgba(244,241,232,.12);}
.nav-more-toggle.active{opacity: 1; background: var(--brick);}
.nav-more-icon{flex-shrink: 0;}
.nav-all-panel{display: none; position: absolute; top: 100%; left: 0; right: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 22px 32px 26px; background: var(--walnut-light); border-top: 1px solid rgba(244,241,232,.12); border-bottom: 1px solid rgba(244,241,232,.15); box-shadow: 0 22px 44px rgba(0,0,0,.4); z-index: 20;}
.nav-more.open .nav-all-panel{display: grid;}
nav .nav-col ul{display: flex; flex-direction: column; gap: 2px; width: auto; margin: 0; padding: 0;}
.nav-col-label{font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--brass); padding: 0 10px 6px;}
nav a.nav-sec{display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; opacity: 1; letter-spacing: 0;}
nav a.nav-sec:hover{background: rgba(244,241,232,.08);}
nav a.nav-sec.current{background: rgba(244,241,232,.13);}
.ns-name{font-size: 13.5px; font-weight: 600;}
.ns-desc{font-size: 12px; font-weight: 400; opacity: .72;}
.nav-join{align-self: start; background: var(--walnut); border: 1px solid rgba(244,241,232,.14); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px;}
.nav-join-title{font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 700; font-size: 17px;}
.nav-join p{margin: 0; font-size: 12.5px; line-height: 1.5; opacity: .8;}
.signed-in-only{display: none !important;}
body.is-signed-in .signed-in-only{display: block !important;}
body.is-signed-in .visitor-only{display: none !important;}
.search-pill-text{display: none;}
@media (min-width: 1200px){#searchToggle.search-pill{width: auto; min-width: 190px; padding: 0 14px; gap: 8px; justify-content: flex-start; border-radius: 999px;}
.search-pill-text{display: inline; font-size: 12.5px; font-weight: 500; opacity: .8;}}
@media (max-width: 900px){.nav-more-toggle{background: none !important;}
.nav-more-icon{display: none;}
.nav-all-panel{display: grid !important; position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 4px 0 0 4px; background: none; border: 0; box-shadow: none;}
.ns-desc{display: none;}
.nav-join{grid-column: 1 / -1;}}

/* ---- Quick log: + button, panel, waiting-to-sync note (Oct 2026) ---- */
.ql-fab { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--brick); color: #fdfbf6; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,.32); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.ql-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.36); }
.ql-fab:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.ql-fab[hidden] { display: none; }
.ql-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--brass); color: var(--walnut); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ql-fab-badge[hidden] { display: none; }
body.has-ql .toast-stack { bottom: 92px; }
body.ql-open .ql-fab { display: none; }
@media print { .ql-fab { display: none; } }

.ql-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(20,14,10,.55); display: none; align-items: flex-end; justify-content: center; }
.ql-backdrop.open { display: flex; }
.ql-sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; box-sizing: border-box; background: var(--bg-card); color: var(--text-primary); border-radius: 18px 18px 0 0; padding: 18px 18px max(18px, env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px rgba(0,0,0,.35); animation: qlUp .2s ease; }
@keyframes qlUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ql-sheet { animation: none; } }
@media (min-width: 700px) { .ql-backdrop { align-items: center; } .ql-sheet { border-radius: 18px; max-height: 86vh; } }
.ql-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ql-head h2 { margin: 0; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 22px; }
.ql-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.ql-x { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.ql-sec { padding: 12px 0; border-top: 1px solid var(--border-color-soft); }
.ql-sec:first-child { border-top: 0; }
.ql-sec h3 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.ql-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ql-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ql-search, .ql-add input, .ql-score, .ql-date input { box-sizing: border-box; min-height: 44px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card-alt); color: var(--text-primary); font: inherit; font-size: 16px; padding: 0 12px; }
.ql-search { width: 100%; }
.ql-results { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ql-result { text-align: left; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font: inherit; font-size: 15px; cursor: pointer; }
.ql-result:hover, .ql-result:focus-visible { background: var(--bg-card-alt); }
.ql-muted { color: var(--text-muted); font-size: 13px; }
.ql-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ql-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card-alt); color: var(--text-primary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ql-chip.is-tonight { border-color: var(--brass); }
.ql-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.ql-person.on { background: var(--felt); border-color: var(--felt); color: #fdfbf6; }
.ql-add { display: flex; gap: 8px; margin-top: 10px; }
.ql-add input { flex: 1; min-width: 0; }
.ql-picked { display: flex; align-items: center; gap: 12px; }
.ql-picked img, .ql-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.ql-thumb { background: var(--walnut-light); color: var(--brass); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.ql-picked strong { flex: 1; font-size: 16px; }
.ql-link { background: none; border: 0; padding: 8px 4px; min-height: 36px; color: var(--text-accent-red); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ql-hint { margin: 0 0 8px; font-size: 12.5px; color: var(--text-secondary); }
.ql-win-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ql-win { flex: 1; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card-alt); color: var(--text-primary); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.ql-win svg { color: var(--text-muted); }
.ql-win.on { background: var(--brass); border-color: var(--brass); color: var(--walnut); }
.ql-win.on svg { color: var(--walnut); }
.ql-score { width: 96px; }
.ql-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ql-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.ql-seg button { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ql-seg button + button { border-left: 1px solid var(--border-color); }
.ql-seg button.on { background: var(--walnut); color: var(--parchment); }
/* Dark mode (Oct 2026): walnut on a walnut sheet was invisible, so the
   chosen "where you played" option couldn't be seen. Brass, like the
   winner buttons above it. */
[data-theme="dark"] .ql-seg button.on { background: var(--brass); color: var(--walnut); }
.ql-offline { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-card-alt); border: 1px dashed var(--brass); font-size: 13px; }
.ql-foot { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 12px; }
.ql-save { min-height: 50px; font-size: 16px; }
.ql-save:disabled { opacity: .55; cursor: not-allowed; }
.ql-foot .ql-link { align-self: center; text-align: center; }
.ql-done { text-align: center; padding: 18px 4px 6px; }
.ql-done-icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--felt); color: #fdfbf6; display: flex; align-items: center; justify-content: center; }
.ql-done-title { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 22px; font-weight: 700; }
.ql-done-sub { margin: 6px 0 16px; font-size: 14px; color: var(--text-secondary); }
.ql-done-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ql-done-actions button { min-height: 44px; }

.ql-queue-note { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--brass); background: var(--bg-card-alt); font-size: 13.5px; }
.ql-qn-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ql-queue-note ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ql-queue-note li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ql-qn-err { display: block; font-style: normal; font-size: 12px; color: var(--text-accent-red); }
.ql-ghost { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ql-ghost:hover { background: var(--bg-card-alt); }
.ql-ghost--sm { min-height: 36px; padding: 0 12px; font-size: 13px; flex-shrink: 0; }

/* ---- Insights page (Oct 2026 redesign, games/js/insights.js) ---- */
:root { --ix-played: #3f8f63; --ix-owned: #b98d3a; --ix-none: #d8ccb6; --ix-track: #efe7d8; }
[data-theme="dark"] { --ix-none: #5a4a3c; --ix-track: #3a2d24; }
#insights .section-head { display: none; }
.ix-hero { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid #3a2d24; background: #241c16; color: #ede3d3; margin-bottom: 18px; }
.ix-hero-wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; padding: 6px; opacity: .22; pointer-events: none; }
.ix-hero-wall img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.ix-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,28,22,.5) 0%, #241c16 42%); pointer-events: none; }
.ix-hero-inner { position: relative; padding: 32px 30px 28px; display: flex; flex-direction: column; gap: 22px; }
.ix-hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ix-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #d9bd85; }
.ix-title { margin: 6px 0 0; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 700; font-size: 46px; line-height: 1.05; color: #ede3d3; }
.ix-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ix-seg { display: inline-flex; border: 1px solid #5a4636; border-radius: 10px; overflow: hidden; }
.ix-seg button { min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: #ede3d3; font: 600 13.5px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
.ix-seg button + button { border-left: 1px solid #5a4636; }
.ix-seg button.on { background: #5a4636; }
.ix-share, .ix-ghost { min-height: 44px; padding: 0 16px; border-radius: 10px; font: 600 13.5px 'Inter', 'Inter Fallback', sans-serif; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ix-share { border: 0; background: #35493b; color: #fdfbf6; }
.ix-ghost { border: 1px solid #5a4636; background: transparent; color: #ede3d3; }
.ix-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ix-stat { background: rgba(31,24,19,.78); border: 1px solid #3a2d24; border-radius: 16px; padding: 16px 18px; }
.ix-stat-v { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 700; font-size: 40px; line-height: 1; color: #f2e6cf; }
.ix-stat-l { margin-top: 8px; font-size: 13px; font-weight: 600; }
.ix-stat-n { margin-top: 2px; font-size: 12px; color: rgba(237,227,211,.7); }
.ix-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ix-lines li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.ix-lines li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--ix-owned); }

.ix-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 30px; }
.ix-span2 { grid-column: span 2; }
.ix-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 18px; padding: 22px; min-width: 0; color: var(--text-primary); }
.ix-h { margin: 0; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 21px; color: var(--text-primary); }
.ix-sub { margin: 4px 0 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.ix-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ix-card-head .ix-sub { margin-bottom: 0; }
.ix-link { font-size: 13px; font-weight: 600; color: var(--text-accent-red); white-space: nowrap; }
.ix-mini { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.ix-plain { color: inherit; text-decoration: none; }
.ix-plain:hover { text-decoration: underline; }
.ix-take { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; }
.ix-take strong { color: var(--text-accent-red); }
.ix-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; margin-bottom: 14px; color: var(--text-secondary); }
.ix-legend > span { display: inline-flex; gap: 6px; align-items: center; }
.ix-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.ix-yaxis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--text-muted); text-align: right; width: 34px; flex-shrink: 0; }
.ix-plot-wrap { flex: 1; min-width: 0; }

.ix-health { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ix-ring { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.ix-ring svg { width: 140px; height: 140px; }
.ix-ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ix-ring-mid span { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 700; font-size: 28px; }
.ix-ring-mid small { font-size: 11px; color: var(--text-secondary); }
.ix-legend-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.ix-legend-list li { display: flex; gap: 8px; align-items: center; }
.ix-dust { margin-top: 18px; border-top: 1px solid var(--border-color-soft); padding-top: 14px; }
.ix-dust ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.ix-dust li { display: flex; justify-content: space-between; gap: 10px; }
.ix-dust li > span { color: var(--text-secondary); white-space: nowrap; font-size: 12.5px; }
.ix-dust-name { color: var(--text-primary); font-weight: 600; text-decoration: none; }

.ix-favs { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.ix-fav { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text-primary); }
.ix-fav-cover { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--walnut-light); display: block; }
.ix-fav-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.ix-fav:hover .ix-fav-cover img { transform: scale(1.04); }
.ix-fav-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; color: var(--brass); font-weight: 700; font-size: 13px; }
.ix-fav-rate { position: absolute; left: 8px; bottom: 8px; background: rgba(31,24,19,.88); border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; color: #f2e6cf; }
.ix-fav-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.ix-fav-plays { font-size: 12px; color: var(--text-secondary); }

.ix-scatter { display: flex; gap: 10px; }
.ix-scatter .ix-yaxis { padding-bottom: 0; height: 300px; }
.ix-plot { position: relative; height: 300px; border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.ix-q-v { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--border-color); }
.ix-q-h { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-color); }
.ix-q { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); opacity: .8; pointer-events: none; }
.ix-q.tl { left: 10px; top: 8px; } .ix-q.tr { right: 10px; top: 8px; } .ix-q.bl { left: 10px; bottom: 8px; } .ix-q.br { right: 10px; bottom: 8px; }
.ix-trend { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ix-trend line { stroke: var(--brass); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ix-dot { position: absolute; width: 11px; height: 11px; transform: translate(-50%, 50%); border-radius: 50%; border: 2px solid var(--bg-card); background: var(--ix-played); padding: 0; cursor: pointer; transition: transform .12s ease; z-index: 1; }
.ix-dot::after { content: ''; position: absolute; inset: -8px; }
.ix-dot.big { width: 14px; height: 14px; background: var(--ix-owned); z-index: 2; }
.ix-dot:hover, .ix-dot:focus-visible { transform: translate(-50%, 50%) scale(1.35); z-index: 5; outline: none; }
.ix-tip { display: none; position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); background: var(--text-primary); color: var(--bg-card); border-radius: 10px; padding: 7px 11px; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; text-align: left; box-shadow: 0 10px 24px rgba(0,0,0,.3); pointer-events: none; z-index: 10; }
.ix-tip strong { display: block; font-size: 13px; }
.ix-tip-left { left: auto; right: -6px; transform: none; }
.ix-dot:hover .ix-tip, .ix-dot:focus-visible .ix-tip, .ix-mcol:hover .ix-tip, .ix-mcol:focus-visible .ix-tip { display: block; }
.ix-dot:hover .ix-tip, .ix-dot:focus-visible .ix-tip { transform: translateX(-50%) scale(.74); transform-origin: bottom center; }
.ix-dot:hover .ix-tip-left, .ix-dot:focus-visible .ix-tip-left { transform: scale(.74); transform-origin: bottom right; }
.ix-callout { position: absolute; transform: translate(12px, 50%); font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--bg-card), 0 0 3px var(--bg-card); z-index: 3; }
.ix-callout.left { transform: translate(calc(-100% - 12px), 50%); }
.ix-xaxis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.ix-axis-title { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.ix-bars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ix-bars li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ix-thumb { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; display: block; }
.ix-thumb-txt { display: flex; align-items: center; justify-content: center; background: var(--walnut-light); color: var(--brass); font-weight: 700; font-size: 13px; }
.ix-bar-main { min-width: 0; }
.ix-bar-name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1f1813; background: #d9bd85; border-radius: 999px; padding: 2px 7px; flex-shrink: 0; }
.ix-bar { display: block; margin-top: 5px; height: 8px; border-radius: 0 4px 4px 0; }
.ix-bar-val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

.ix-pc { display: flex; gap: 10px; }
.ix-yaxis-pc { height: 200px; }
.ix-pc-grid { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.ix-pc-col { display: flex; flex-direction: column; gap: 6px; }
.ix-pc-bars { height: 200px; border-bottom: 1px solid var(--border-color); display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.ix-pc-bars span { width: 40%; max-width: 22px; border-radius: 4px 4px 0 0; display: block; }
.ix-pc-n { text-align: center; font-weight: 700; font-size: 14px; }
.ix-pc-best { text-align: center; font-size: 11px; color: var(--text-secondary); line-height: 1.3; }
.ix-pc-best strong { color: var(--text-primary); }

.ix-des { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ix-des-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.ix-des-top span:first-child { font-weight: 600; }
.ix-des-top span:last-child { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ix-kpi { font-size: 13px; color: var(--text-secondary); }
.ix-kpi strong { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 24px; color: var(--text-primary); margin-right: 4px; }
.ix-hours { display: flex; gap: 10px; margin-top: 16px; }
.ix-hours .ix-yaxis { height: 200px; }
.ix-area { position: relative; height: 200px; border-bottom: 1px solid var(--border-color); }
.ix-area svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ix-area-fill { fill: var(--ix-played); fill-opacity: .25; }
.ix-area-line { fill: none; stroke: var(--ix-played); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ix-mcols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ix-mcol { position: relative; outline: none; }
.ix-mline, .ix-mdot { display: none; position: absolute; left: 50%; }
.ix-mline { top: 0; bottom: 0; border-left: 1px solid var(--text-muted); }
.ix-mdot { width: 10px; height: 10px; border-radius: 50%; background: var(--ix-played); border: 2px solid var(--bg-card); transform: translate(-50%, 50%); }
.ix-mcol:hover .ix-mline, .ix-mcol:hover .ix-mdot, .ix-mcol:focus-visible .ix-mline, .ix-mcol:focus-visible .ix-mdot { display: block; }
.ix-tip-top { bottom: auto; top: 4px; }
.ix-mcol:first-child .ix-tip { left: 0; transform: none; }
.ix-mcol:last-child .ix-tip { left: auto; right: 0; transform: none; }
.ix-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: 11px; color: var(--text-muted); margin-top: 6px; text-align: center; }

.ix-dec { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ix-dec li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; }
.ix-dec-l { font-weight: 600; }
.ix-dec-bar { display: flex; gap: 2px; height: 12px; }
.ix-dec-bar span { display: block; height: 100%; }
.ix-dec-bar span:last-child { border-radius: 0 4px 4px 0; }
.ix-dec-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

.ix-crowd { display: flex; flex-direction: column; gap: 10px; }
.ix-crowd-row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: 13px; }
.ix-crowd-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-crowd-track { position: relative; height: 12px; }
.ix-crowd-mid { position: absolute; left: 50%; top: -5px; bottom: -5px; border-left: 1px solid var(--border-color); }
.ix-crowd-bar { position: absolute; top: 0; bottom: 0; }
.ix-crowd-bar.pos { background: var(--ix-played); border-radius: 0 4px 4px 0; }
.ix-crowd-bar.neg { background: var(--ix-owned); border-radius: 4px 0 0 4px; }
.ix-crowd-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ix-crowd-axis { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 46px; gap: 10px; font-size: 11.5px; color: var(--text-muted); }
.ix-crowd-axis-mid { display: flex; justify-content: space-between; gap: 8px; }
#insRoot section { margin: 0; max-width: none; padding: 22px; }
#insRoot .ix-hero { padding: 0; margin-bottom: 18px; }

.ix-you { background: #35493b; border-color: #35493b; color: #fdfbf6; display: flex; flex-direction: column; gap: 10px; }
.ix-you .ix-h { color: #fdfbf6; font-size: 23px; }
.ix-you p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(253,251,246,.88); }
.ix-you form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ix-you label { font-size: 12.5px; font-weight: 600; }
.ix-you input { min-height: 46px; box-sizing: border-box; border-radius: 10px; border: 1px solid rgba(253,251,246,.4); background: rgba(31,24,19,.35); color: #fdfbf6; font: 400 16px 'Inter', 'Inter Fallback', sans-serif; padding: 0 14px; }
.ix-you input::placeholder { color: rgba(253,251,246,.6); }
.ix-you button { min-height: 46px; border-radius: 10px; border: 0; background: #fdfbf6; color: #1f1813; font: 700 14px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
.ix-you button:disabled { opacity: .7; cursor: progress; }
.ix-you-msg:empty { display: none; }
.ix-you-foot { font-size: 12.5px !important; }
.ix-you a { color: #fdfbf6; }

@media (max-width: 900px) {
  .ix-grid { grid-template-columns: minmax(0, 1fr); }
  .ix-span2 { grid-column: auto; }
  .ix-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-title { font-size: 38px; }
  .ix-stat-v { font-size: 32px; }
  .ix-hero-inner { padding: 24px 18px 22px; }
  .ix-hero-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ix-q { display: none; }
  .ix-pc-grid { gap: 4px; }
  .ix-crowd-row, .ix-crowd-axis { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 40px; }
  .ix-favs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
  .ix-months span:nth-child(even) { visibility: hidden; }
  .ix-pc-best { font-size: 10px; }
  .ix-crowd-axis-mid { font-size: 10.5px; }
}

/* ---- Reviews page (Oct 2026 redesign, games/js/reviews.js) ---- */
.rv-lede { margin: 6px 0 0; font-size: 14.5px; color: var(--text-secondary); }
.rv-stats { display: flex; flex-wrap: wrap; gap: 22px; font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 0; }
.rv-stats strong { display: block; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 24px; color: var(--text-primary); line-height: 1.1; }
#reviews .rv-feature { max-width: none; margin: 0 0 30px; padding: 26px; }
.rv-feature { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 30px; background: #241c16; color: #ede3d3; border: 1px solid #3a2d24; border-radius: 22px; }
.rv-feature-cover { position: relative; align-self: start; }
.rv-feature-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.rv-feature-fallback { display: flex; aspect-ratio: 1; align-items: center; justify-content: center; border-radius: 16px; background: #3a2d24; color: #d9bd85; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 24px; text-align: center; padding: 20px; }
.rv-verdict { position: absolute; left: 12px; top: 12px; background: rgba(31,24,19,.9); color: #ede3d3; border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.rv-verdict.top { background: #d9bd85; color: #1f1813; }
.rv-feature-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rv-feature-kicker { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d9bd85; }
.rv-rule { flex: 1; height: 1px; background: #3a2d24; }
.rv-feature-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rv-feature-titlerow h3 { margin: 0; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 700; font-size: 36px; line-height: 1.1; color: #f2e6cf; }
.rv-feature-quote { margin: 0; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-style: italic; font-weight: 600; font-size: 23px; line-height: 1.35; color: #f2e6cf; border: 0; padding: 0; }
.rv-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-pill { background: #3a2d24; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: #ede3d3; }
.rv-pill.strong { font-weight: 700; }
.rv-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rv-quick-box { background: #1f1813; border: 1px solid #3a2d24; border-radius: 12px; padding: 12px; }
.rv-quick-l { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d9bd85; }
.rv-quick-v { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
.rv-feature-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.rv-read { min-height: 46px; padding: 0 20px; border-radius: 10px; background: var(--brick); color: #fdfbf6 !important; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; text-decoration: none; }
.rv-btn { min-height: 46px; padding: 0 16px; border-radius: 10px; border: 1px solid #5a4636; background: transparent; color: #ede3d3; font: 600 14px 'Inter', 'Inter Fallback', sans-serif; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.rv-spacer { flex: 1; }
.rv-take { font-size: 13px; color: rgba(237,227,211,.75); }
.rv-seg { display: inline-flex; border: 1px solid #5a4636; border-radius: 10px; overflow: hidden; }
.rv-seg button { min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: #ede3d3; font: 600 13.5px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
.rv-seg button + button { border-left: 1px solid #5a4636; }
.rv-seg button.on { background: #35493b; }
.rv-seg-light { border-color: var(--border-color); }
.rv-seg-light button { color: var(--text-primary); }
.rv-seg-light button + button { border-left-color: var(--border-color); }
.rv-seg-light button.on { background: var(--brick); color: #fdfbf6; }

.rv-controls-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.rv-h { margin: 0; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 24px; color: var(--text-primary); }
.rv-count { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }
.rv-sub { margin: 4px 0 14px; font-size: 13.5px; color: var(--text-secondary); }
.rv-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-secondary); }
.rv-search input { border: 0; background: transparent; color: var(--text-primary); font: 400 15px 'Inter', 'Inter Fallback', sans-serif; outline: none; width: 170px; min-height: 0; padding: 0; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rv-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font: 600 13px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
.rv-chip span { color: var(--text-muted); font-weight: 500; margin-left: 2px; }
.rv-chip.on { background: var(--brick); border-color: var(--brick); color: #fdfbf6; }
.rv-chip.on span { color: rgba(253,251,246,.8); }

#reviewGrid.review-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 20px; margin-bottom: 34px; }
.rv-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-card-link { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text-primary); border-radius: 14px; }
.rv-cover { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--walnut-light); }
.rv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.rv-cover-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; text-align: center; color: var(--brass); font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 17px; }
.rv-medal { position: absolute; right: 8px; top: 8px; }
.rv-quote { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; background: linear-gradient(180deg, rgba(31,24,19,.1), rgba(31,24,19,.94) 55%); color: #f2e6cf; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-style: italic; font-size: 14.5px; line-height: 1.35; opacity: 0; transition: opacity .2s ease; }
.rv-card-link:hover .rv-quote, .rv-card-link:focus-visible .rv-quote { opacity: 1; }
.rv-card-link:hover .rv-cover img, .rv-card-link:focus-visible .rv-cover img { transform: scale(1.03); }
.rv-name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.rv-proof, .rv-readers { font-size: 12.5px; color: var(--text-secondary); }
.rv-readers strong { color: var(--text-primary); }
.rv-card .engagement-preview { margin: 0; font-size: 12px; }
.rv-owner { gap: 10px; }
.rv-owner button + button { margin-left: 12px; }
.rv-owner button { background: none; border: 0; padding: 4px 0; color: var(--text-muted); font: 600 12px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; text-decoration: underline; }
.rv-none { grid-column: 1 / -1; font-size: 14px; color: var(--text-secondary); }

#reviews .rv-hof, #reviews .rv-soon { max-width: none; margin: 0 0 30px; padding: 0; }
#reviews .rv-hof { padding: 26px; }
.rv-hof { background: #241c16; color: #ede3d3; border: 1px solid var(--brass); border-radius: 22px; }
.rv-hof-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.rv-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #d9bd85; }
.rv-hof-head h3 { margin: 4px 0 0; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 30px; color: #f2e6cf; }
.rv-hof-head p { margin: 0; font-size: 13.5px; color: rgba(237,227,211,.75); max-width: 420px; }
.rv-hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.rv-hof-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: #ede3d3; }
.rv-hof-item img, .rv-hof-fallback { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 2px var(--brass); display: block; }
.rv-hof-fallback { display: flex; align-items: center; justify-content: center; background: #3a2d24; color: #d9bd85; font-size: 13px; text-align: center; padding: 8px; box-sizing: border-box; }
.rv-hof-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.rv-hof-score { font-size: 12px; color: #d9bd85; font-weight: 700; }
.rv-soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.rv-soon-item { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 10px; text-decoration: none; color: var(--text-primary); }
.rv-soon-item img, .rv-soon-fallback { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.rv-soon-fallback { display: flex; align-items: center; justify-content: center; background: var(--walnut-light); color: var(--brass); font-weight: 700; }
.rv-soon-item > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--text-secondary); }
.rv-soon-item strong { font-size: 14px; color: var(--text-primary); }
.rv-form-quick { margin-top: 12px; }
.rv-form-quick summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-secondary); }
.rv-form-quick .grid { margin-top: 10px; }
.review-quick-modal { margin: 16px 0 18px; }
.review-quick-modal .rv-quick-box { background: var(--bg-card-alt); border-color: var(--border-color); }
.review-quick-modal .rv-quick-v { color: var(--text-primary); }
.review-quick-modal .rv-quick-l { color: var(--text-accent-red); }

@media (max-width: 820px) {
  .rv-feature { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #reviews .rv-feature, #reviews .rv-hof { padding: 18px; }
  .rv-feature-titlerow h3 { font-size: 28px; }
  .rv-feature-quote { font-size: 19px; }
  #reviewGrid.review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .rv-hof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-search input { width: 120px; }
  .rv-quote { display: none; }
}

/* You vs. the Crowd moved to Insights (Oct 2026); renderHipsterScore() still sets display:block. */
#hipsterPanel { display: none !important; }

/* ---- Plays page (Oct 2026 redesign, games/js/plays.js) ---- */
#dashboard .section-head { align-items: flex-end; }
.pl-actions { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; }
.pl-log-btn { min-height: 46px; padding: 0 20px; border-radius: 10px; border: 0; background: var(--brick); color: #fdfbf6; font: 700 14px 'Inter', 'Inter Fallback', sans-serif; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.pl-ghost { min-height: 46px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font: 600 14px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
.pl-more { position: relative; }
.pl-more > summary { list-style: none; min-height: 46px; width: 46px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font-weight: 700; font-size: 18px; cursor: pointer; }
.pl-more > summary::-webkit-details-marker { display: none; }
.pl-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 14px 30px var(--shadow-color); padding: 6px; display: flex; flex-direction: column; }
.pl-more-menu button, .pl-more-menu a { text-align: left; padding: 10px 12px; border-radius: 8px; border: 0; background: none; color: var(--text-primary); font: 600 13.5px 'Inter', 'Inter Fallback', sans-serif; text-decoration: none; cursor: pointer; }
.pl-more-menu button:hover, .pl-more-menu a:hover { background: var(--bg-card-alt); }
#dashboard #onThisDayBanner.otd-banner { margin-bottom: 18px; }

.pl-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; margin: 0 0 26px; }
#dashboard .pl-top > section { max-width: none; margin: 0; padding: 22px; }
.pl-month { background: #241c16; color: #ede3d3; border: 1px solid #3a2d24; border-radius: 20px; display: flex; flex-direction: column; gap: 16px; }
.pl-month-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pl-month-head h3 { margin: 0; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 24px; color: #f2e6cf; }
.pl-month-head span { font-size: 12.5px; color: rgba(237,227,211,.7); }
.pl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.pl-kpi { background: #2b211b; border: 1px solid #3a2d24; border-radius: 14px; padding: 14px 16px; }
.pl-kpi-v { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 700; font-size: 32px; line-height: 1; color: #f2e6cf; }
.pl-kpi-l { margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.pl-kpi-d { margin-top: 2px; font-size: 12px; color: rgba(237,227,211,.68); }
.pl-kpi-d.up { color: #7fcb9c; } .pl-kpi-d.down { color: #ec8375; }
.pl-mini { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,227,211,.68); margin-bottom: 8px; }
.pl-weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 70px; border-bottom: 1px solid #3a2d24; }
.pl-weeks span { display: block; background: #3f8f63; border-radius: 4px 4px 0 0; }
.pl-weeks span.now { background: #b98d3a; }
.pl-month .recaps-bar { margin: 0; }
.pl-month .recaps-label { color: rgba(237,227,211,.68); }
.pl-recent { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--text-primary); }
.pl-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pl-h { margin: 0; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 24px; color: var(--text-primary); }
.pl-link { background: none; border: 0; padding: 6px 0; color: var(--text-accent-red); font: 600 13px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pl-recent-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; }
.pl-recent-row:hover { background: var(--bg-card-alt); }
.pl-recent-row img, .pl-recent-fallback { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; display: block; }
.pl-recent-fallback { display: flex; align-items: center; justify-content: center; background: var(--walnut-light); color: var(--brass); font-weight: 700; }
.pl-recent-txt { min-width: 0; display: flex; flex-direction: column; }
.pl-recent-txt strong { font-size: 14.5px; }
.pl-recent-txt span { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-recent-end { display: flex; align-items: center; gap: 8px; }
.pl-when { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pl-rematch { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border-color); background: transparent; color: var(--brass); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-empty { margin: 0; font-size: 13.5px; color: var(--text-secondary); }

.pl-tabbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; scroll-margin-top: 90px; }
.pl-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pl-tab { min-height: 46px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--text-secondary); font: 700 14px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; margin-bottom: -1px; }
.pl-tab:hover { color: var(--text-primary); }
.pl-tab.on { color: var(--text-primary); border-bottom-color: var(--brick); }
.pl-tabbar .filters { margin: 0 0 8px; }
.pl-panel[hidden] { display: none !important; }
.pl-panel .dash-bento { margin-bottom: 0; }
.pl-panel-overview .stat-row { margin-bottom: 18px; }
.pl-panel .bento-h2h, .pl-panel .bento-bygame, .pl-panel .bento-heatmap, .pl-panel .bento-sessionlog { grid-column: span 12; }
.pl-panel-games #byGameBody .h2h-row:nth-child(n+11), .pl-panel-games #ratingsBody > *:nth-child(n+11) { display: none; }
.pl-panel-games.show-all #byGameBody .h2h-row, .pl-panel-games.show-all #ratingsBody > * { display: grid; }
.pl-showall { margin-top: 12px; }

@media (max-width: 900px) {
  .pl-top { grid-template-columns: minmax(0, 1fr); }
  .pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-kpi-v { font-size: 26px; }
  .pl-actions { flex-wrap: wrap; }
  .pl-tabs { overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .pl-tab { white-space: nowrap; padding: 0 12px; }
}

/* ---- Read tab: Blog / Reviews switch + blog filters (Oct 2026) ---- */
.read-switch { display: inline-flex; margin-top: 12px; border: 1px solid var(--border-color); border-radius: 999px; overflow: hidden; background: var(--bg-card); }
.read-switch button { min-height: 40px; padding: 0 18px; border: 0; background: transparent; color: var(--text-primary); font: 700 13.5px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
.read-switch button.on { background: var(--brick); color: #fdfbf6; }
#blogControls { margin: 0 0 18px; }
#blogControls .rv-controls-top { margin-bottom: 0; }
.blog-phil-chip { text-decoration: none; display: inline-flex; align-items: center; border-style: dashed; }
.blog-count { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.blog-count:empty { display: none; }
.blog-feat-game { display: inline-block; margin-top: 10px; font-size: 12.5px; background: rgba(15,11,8,.7); padding: 5px 10px; border-radius: 999px; }
#blog .blog-featured { margin-bottom: 22px; }

/* ---- Collection header + group peeks (Oct 2026) ---- */
.coll-manage-btn { width: auto !important; padding: 0 16px; gap: 6px; font: 600 14px 'Inter', 'Inter Fallback', sans-serif !important; }
.coll-menu-file { display: block; text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--text-primary); font: 600 13.5px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
.coll-menu-file:hover { background: var(--bg-card-alt); }
#collection .section-head { align-items: flex-end; }
.cg-peek { display: inline-flex; margin-right: 10px; }
.cg-peek img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; border: 2px solid var(--bg-card); margin-left: -8px; box-shadow: 0 2px 6px var(--shadow-color); }
.cg-peek img:first-child { margin-left: 0; }
.coll-parent-group.open .cg-peek { display: none; }
@media (max-width: 600px) { .cg-peek img:nth-child(n+3) { display: none; } }
.coll-manage .pl-more-menu { min-width: 280px; }

/* ===== Discover tabs (Oct 2026) ===== */
#discover .dc-tabbar { margin-top: 18px; }
#discover .dc-note { margin: 0 0 14px; font-size: 13.5px; color: var(--text-secondary); }
#discover .finder-note { line-height: 1.5; }
#discover .dc-dust-title { display: block; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 19px; color: var(--text-primary); margin: 6px 0 2px; }
#discover [data-dc-panel][hidden] { display: none !important; }
@media (max-width: 560px) {
  #discover .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #discover .coll-card .name { font-size: 15px; }
  #discover .coll-card .meta { font-size: 11px; }
}

/* ===== Wishlist (Oct 2026) ===== */
#wishlist .wl-controls:not(:empty) { margin: 4px 0 18px; }
#wishlist .wl-hot { color: var(--brick); }
#wishGrid .wl-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#wishGrid .wl-added { opacity: .8; }
#wishGrid .wl-at-target { box-shadow: 0 0 0 3px var(--brass); }

/* ===== Conventions (Oct 2026) ===== */
#conGrid.con-grid { display: block; }
#conGrid .cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-bottom: 30px; }
#conGrid .cv-group { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 21px; margin: 6px 0 14px; color: var(--text-primary); display: flex; align-items: baseline; gap: 10px; }
#conGrid .cv-group span { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
#conGrid .badge.cv-when { background: #d9bd85; color: #1f1813; }

/* ===== 10x10 extras (Oct 2026) ===== */
#challenge .ch-pace { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; color: var(--text-secondary); }
#challengeSummary .challenge-hero { margin-bottom: 8px; }
#challengeSummary { display: flex; flex-wrap: wrap; }
.challenge-card .cc-need { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.challenge-card.cc-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; background: transparent; border: 2px dashed var(--border-color); box-shadow: none; }
.challenge-card.cc-slot .cc-slot-plus { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 18px 'Fraunces', 'Fraunces Fallback', serif; color: var(--text-muted); border: 2px solid var(--border-color); }
button.challenge-card.cc-suggest { cursor: pointer; font: inherit; color: var(--text-primary); border-color: var(--brass); }
button.challenge-card.cc-suggest .cc-slot-plus { color: var(--brass); border-color: var(--brass); }
button.challenge-card.cc-suggest:hover { background: var(--bg-card); }
body:not(.is-owner) .challenge-card.cc-suggest { display: none; }
button.challenge-card.cc-slot { display: flex !important; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.challenge-card.cc-slot > span { display: block; }
#challenge .ch-pace.ahead::first-line, #challenge .ch-pace.behind::first-line { font-weight: 600; color: var(--text-primary); }
#challenge .ch-pace span { color: var(--text-muted); }

/* ===== Game Stores (Oct 2026) ===== */
#stores .st-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
#stores .st-layout #storeMap { height: 460px; margin: 0; position: sticky; top: 90px; }
@media (max-width: 820px) {
  #stores .st-layout { grid-template-columns: minmax(0, 1fr); }
  #stores .st-layout #storeMap { position: static; height: 300px; }
}
#curatedStoresList .store-card { cursor: default; justify-content: flex-start; }
#curatedStoresList .store-card.has-pin { cursor: pointer; }
#curatedStoresList .store-card.active { border-color: var(--brick); box-shadow: 0 0 0 3px rgba(166,58,50,.18); }
#curatedStoresList .sc-body { flex: 1; min-width: 0; }
#curatedStoresList .sc-pin { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--brick); color: #fdfbf6; font: 700 13px 'Inter', 'Inter Fallback', sans-serif; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
#curatedStoresList .sc-pin-none { background: transparent; }
#curatedStoresList .sc-links { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#curatedStoresList .sc-links a.sc-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card-alt); color: var(--text-primary); font-size: 12.5px; text-decoration: none; }
#curatedStoresList .sc-links a.sc-chip:hover { border-color: var(--brass); text-decoration: none; }
#curatedStoresList .sc-note { margin: 6px 0 0; }
.st-pin { background: transparent; border: 0; }
.st-pin span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #a63a32; color: #fdfbf6; font: 700 13px 'Inter', sans-serif; border: 2px solid #fdfbf6; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
#storesLede a { color: var(--brick); font-weight: 600; text-decoration: none; }
#storesLede a:hover { text-decoration: underline; }

/* ===== Buy & sell (Oct 2026) ===== */
#txGrid .tx-year { grid-column: 1 / -1; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 21px; margin: 18px 0 4px; color: var(--text-primary); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#txGrid .tx-year:first-child { margin-top: 0; }
#txGrid .tx-year span { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
#txGrid .tx-pair { font-size: 12px; color: var(--text-secondary); margin: 3px 0 4px; }

/* ===== Live Score (Oct 2026) ===== */
#liveNoBoard.ls-start { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
#liveNoBoard.ls-start[style*="none"] { display: none !important; }
#liveNoBoard .live-score-panel { max-width: none; margin: 0; }
@media (max-width: 760px) { #liveNoBoard.ls-start { grid-template-columns: minmax(0, 1fr); } }
#livePicks .ls-picks-label { font-size: 12px; color: var(--text-secondary); margin: 2px 0 8px; }
#livePicks .ls-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#livePicks .rv-chip { min-height: 36px; }
#liveActiveBoard .ls-status { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
#liveActiveBoard .live-score-card.ls-lead { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(176,141,87,.35); }
#liveActiveBoard .ls-lead-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #d9bd85; color: #1f1813; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }
#liveActiveBoard .live-score-card .lsc-btn { width: 44px; height: 44px; }
@media (max-width: 560px) {
  #liveActiveBoard .live-score-card { flex-wrap: wrap; }
  #liveActiveBoard .live-score-card .lsc-btns { width: 100%; justify-content: space-between; }
  #liveActiveBoard .live-score-card .lsc-btn { flex: 1; border-radius: 10px; }
}
#livescore .cancel-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font: 600 13px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
#livescore .cancel-btn:hover { border-color: var(--brass); }
#livescore .cancel-btn.u-err { color: var(--brick); }
#liveActiveBoard .live-score-card { position: relative; }
@media (max-width: 560px) {
  #liveActiveBoard .live-score-card .lsc-remove { position: absolute; top: 6px; right: 6px; }
  #liveActiveBoard .live-score-card .lsc-score { margin-right: 18px; }
}
/* The quick-log button would sit on top of the +5 buttons during a live game. */
body:has(#livescore.active #liveActiveBoard[style*="block"]) .ql-fab { display: none !important; }

/* ===== Philosopher's Table band (Oct 2026) ===== */
.phil-card { display: block !important; padding: 0 !important; overflow: hidden; border-color: var(--brass) !important; }
.phil-card[style*="none"] { display: none !important; }
.phil-band { display: flex; align-items: center; gap: 18px; padding: 16px 20px; text-decoration: none; color: var(--text-primary); background: linear-gradient(90deg, rgba(176,141,87,.12), transparent 70%); }
.phil-band:hover { background: linear-gradient(90deg, rgba(176,141,87,.2), transparent 75%); }
.phil-band-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.phil-band-quote { font-family: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback L', 'Fraunces Fallback D', serif; font-style: italic; font-size: 17px; line-height: 1.4; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phil-band-by { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.phil-band-cover img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.2); display: block; }
.phil-band-go { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--brick); white-space: nowrap; }
@media (max-width: 640px) {
  .phil-band { flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; }
  .phil-band-cover { order: -1; }
  .phil-band-text { flex-basis: calc(100% - 70px); }
  .phil-band-quote { font-size: 15.5px; }
  .phil-band-go { flex-basis: 100%; }
}
.read-switch a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; color: var(--text-primary); font: 700 13.5px 'Inter', 'Inter Fallback', sans-serif; text-decoration: none; border-left: 1px solid var(--border-color); }
.read-switch a:hover { background: var(--bg-card-alt); }
@media (max-width: 420px) { .read-switch button, .read-switch a { padding: 0 12px; font-size: 12.5px; } }
/* CLS (Oct 2026): placeholders sized like the real bands, and the hero
   heading always breaks in the same place whichever font is showing. */
.phil-card { min-height: 150px; }
.phil-skel-line { display: block; height: 16px; margin: 6px 0 2px; border-radius: 6px; background: var(--bg-card-alt); border: 1px solid var(--border-color); max-width: 620px; }
.phil-skel-line.short { max-width: 240px; height: 12px; }
@media (max-width: 640px) { .phil-card { min-height: 184px; } .hero h1 .accent-word { display: block; } }
.hero h1, .hero h1 .accent-word { white-space: nowrap; }

/* Ticker (Oct 2026): this site's own items stand out from outside headlines. */
.news-ticker .nt-shelf{ display: inline-flex; align-items: center; gap: 0; vertical-align: middle; padding: 3px 13px 3px 3px; border-radius: 999px; background: rgba(166,58,50,.32); border: 1px solid rgba(217,189,133,.55); box-shadow: 0 0 0 3px rgba(217,189,133,.08); }
.news-ticker .nt-shelf .nt-src--shelf{ background: var(--brick); color: #fdfbf6; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.news-ticker .nt-shelf .nt-src--shelf::before{ content: "\2605"; margin-right: 5px; color: #f2d79b; }
.news-ticker .nt-shelf a{ color: #fdfbf6; font-weight: 700; opacity: 1; }
.news-ticker .nt-shelf a:hover{ color: #f2d79b; }

/* ===== What should we bring? (Oct 2026) ===== */
.bring-modal-inner { max-width: 1040px; background: #241c16; color: #ede3d3; border: 1px solid #3a2d24; }
.bring-modal-inner .gm-close { background: rgba(0,0,0,.35); border: 1px solid rgba(176,141,87,.3); }
.bring-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #d9bd85; }
.bring-title { margin: 6px 0 14px; font-family: 'Fraunces', 'Fraunces Fallback', serif; font-size: 30px; color: #f2e6cf; }
.bring-context { margin: -6px 0 14px; font-size: 14px; color: rgba(237,227,211,.8); }
.bring-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: start; }
.bring-ask { display: flex; flex-direction: column; gap: 8px; background: #1f1813; border: 1px solid #3a2d24; border-radius: 16px; padding: 16px; }
.bring-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #d9bd85; margin-top: 8px; }
.bring-label:first-child { margin-top: 0; }
.bring-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bring-chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #5a4636; background: transparent; color: #ede3d3; font: 700 13px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
.bring-chip.on { background: #d9bd85; border-color: #d9bd85; color: #1f1813; }
.bring-chip:disabled { cursor: default; opacity: 1; }
.bring-summary { margin: 0 0 12px; font-size: 14px; color: rgba(237,227,211,.8); }
.bring-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.bring-card { background: #1f1813; border: 1px solid #3a2d24; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.bring-cover { position: relative; aspect-ratio: 1 / 1; background: #3a2d24; display: flex; align-items: center; justify-content: center; color: #d9bd85; font: 600 15px 'Fraunces', serif; text-align: center; padding: 0; }
.bring-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bring-slot { position: absolute; left: 8px; top: 8px; background: rgba(31,24,19,.9); color: #f2e6cf; border-radius: 999px; padding: 3px 10px; font: 800 10.5px 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.bring-txt { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bring-txt h3 { margin: 0; font-family: 'Fraunces', serif; font-size: 17px; color: #f2e6cf; }
.bring-facts { font-size: 12px; color: rgba(237,227,211,.65); }
.bring-txt p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; flex: 1; }
.bring-swap { align-self: flex-start; margin-top: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #5a4636; background: transparent; color: #d9bd85; font: 600 12px 'Inter', sans-serif; cursor: pointer; }
.bring-skip { margin: 12px 0 0; font-size: 13px; color: rgba(237,227,211,.75); }
.bring-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bring-ghost, .bring-primary { min-height: 44px; padding: 0 16px; border-radius: 10px; font: 700 14px 'Inter', sans-serif; cursor: pointer; }
.bring-ghost { border: 1px solid #5a4636; background: transparent; color: #ede3d3; }
.bring-primary { border: 0; background: #a63a32; color: #fdfbf6; }
.bring-primary:disabled { opacity: .5; cursor: default; }
@media (max-width: 760px) { .bring-grid { grid-template-columns: minmax(0, 1fr); } .bring-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bring-title { font-size: 25px; } }
.bring-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); font-size: 14px; color: var(--text-secondary); }
.bring-cta strong { color: var(--text-primary); }

/* ===== Conventions: at the table together (Oct 2026) ===== */
.ct { display: flex; flex-direction: column; gap: 10px; }
.ct-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: baseline; }
.ct-who, .ct-count { font-size: 12.5px; color: rgba(237,227,211,.75); }
.ct-rows { display: flex; flex-direction: column; gap: 2px; }
.ct-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 6px; border-radius: 10px; }
.ct-row.ct-k-match { background: rgba(63,143,99,.14); }
.ct-cover { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: block; }
.ct-initial { display: flex; align-items: center; justify-content: center; background: #3a2d24; color: #d9bd85; font: 700 15px 'Fraunces', serif; }
.ct-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-name { font-weight: 700; font-size: 14px; color: #f2e6cf; }
.ct-tag { display: inline-block; margin-left: 6px; border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px; background: #3a2d24; color: #d9bd85; }
.ct-k-match .ct-tag { background: #3f8f63; color: #fdfbf6; }
.ct-k-lib .ct-tag { background: #b98d3a; color: #1f1813; }
.ct-k-open .ct-tag { background: #5a4636; color: #ede3d3; }
.ct-line { font-size: 12px; color: rgba(237,227,211,.72); }
.ct-acts { display: flex; gap: 6px; align-items: center; }
.ct-btn { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #d9bd85; background: transparent; color: #d9bd85; font: 700 12px 'Inter', sans-serif; cursor: pointer; white-space: nowrap; }
.ct-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #5a4636; background: transparent; color: rgba(237,227,211,.75); cursor: pointer; font-size: 16px; line-height: 1; }
.ct-empty { font-size: 12.5px; color: rgba(237,227,211,.6); }
.ct-add, .ct-lib-set { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-add input, .ct-lib-set input { flex: 1; min-width: 150px; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid #5a4636; background: #1f1813; color: #ede3d3; font: 13px 'Inter', sans-serif; }
.ct-add button, .ct-lib-set button { min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid #5a4636; background: transparent; color: #ede3d3; font: 600 12.5px 'Inter', sans-serif; cursor: pointer; }
.ct-lib { margin-top: 6px; padding-top: 10px; border-top: 1px solid #3a2d24; display: flex; flex-direction: column; gap: 8px; }
.ct-lib-line { font-size: 12.5px; color: rgba(237,227,211,.8); }
.ct-finds-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #d9bd85; margin-top: 4px; }
.ct-finds-title span { text-transform: none; letter-spacing: 0; font-weight: 500; color: rgba(237,227,211,.6); margin-left: 6px; }
.ct-find { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid #3a2d24; font-size: 13px; }
.ct-find span span { display: block; font-size: 12px; color: rgba(237,227,211,.65); }
.ct-note { margin: 0; font-size: 11.5px; color: rgba(237,227,211,.55); }
.ct-bag { align-self: flex-start; margin-top: 4px; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 0; background: #a63a32; color: #fdfbf6; font: 700 13.5px 'Inter', sans-serif; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#conGrid .con-card:has(.ct) { grid-column: span 2; }
@media (max-width: 700px) { #conGrid .con-card:has(.ct) { grid-column: auto; } }
.bring-modal-inner section { max-width: none; margin: 0; padding: 0; }
.bring-modal-inner .bring-ask { padding: 16px; }


/* ===== Silas and the Philosopher's Table (Oct 2026) ===== */
.sr-table{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--brass);background:rgba(176,141,87,.10);border-radius:0 8px 8px 0;text-decoration:none;color:var(--text-primary);}
.sr-table:hover{background:rgba(176,141,87,.18);}
.sr-table-k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--brass);}
.sr-table-q{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-size:15px;line-height:1.4;}
.sr-table-by{font-size:12px;color:var(--text-secondary);}
.gm-table .gm-table-entry{display:flex;flex-direction:column;gap:4px;padding:10px 0 12px 14px;margin-bottom:8px;border-left:3px solid var(--brass);text-decoration:none;color:var(--text-primary);}
.gm-table-q{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-size:16px;line-height:1.45;}
.gm-table-by{font-size:12.5px;color:var(--text-secondary);}
.gm-table-go{font-size:12.5px;font-weight:700;color:var(--brass);}
.gm-table-entry:hover .gm-table-go{text-decoration:underline;}
.table-tag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--brass);color:#1f1813;padding:2px 7px;border-radius:999px;margin:0 4px 5px 0;vertical-align:middle;}
.gm-header .table-tag{font-size:10px;margin-top:6px;}
.tq-card{position:relative;text-align:left;margin:16px 0;padding:14px 16px;border:1px solid var(--brass);border-radius:12px;background:linear-gradient(135deg,rgba(176,141,87,.14),transparent 75%);color:var(--text-primary);}
.tq-compact{margin:14px 0 4px;}
.tq-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brass);margin-bottom:6px;}
.tq-q{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-size:17px;line-height:1.45;}
.tq-by{font-size:12.5px;color:var(--text-secondary);margin-top:4px;}
.tq-ask{font-size:14px;font-weight:600;margin-top:10px;}
.tq-go{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--brass);text-decoration:none;}
.tq-go:hover{text-decoration:underline;}
.tq-x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--text-muted);font-size:20px;line-height:1;cursor:pointer;padding:4px;}
#lsTableQ .tq-card{margin:0 0 16px;}
.teach-card .tq-card{max-width:520px;margin:16px auto 6px;}
.silas-log-panel .sl-total{font-size:13px;color:var(--text-secondary);margin:4px 0 12px;}
.silas-log-panel .sl-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.silas-log-panel .sl-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--brass);margin-bottom:6px;}
.silas-log-panel .sl-list{margin:0;padding-left:20px;font-size:13.5px;}
.silas-log-panel .sl-list li{padding:2px 0;}
.silas-log-panel .sl-list li span:first-child{margin-right:6px;}
.silas-log-panel .sl-n{color:var(--text-muted);font-size:12px;}
.silas-log-panel .sl-recent{margin-top:12px;font-size:13px;}
.silas-log-panel .sl-raw{list-style:none;padding:0;margin:8px 0 0;}
.silas-log-panel .sl-raw li{padding:3px 0;border-bottom:1px solid var(--border-color-soft);}
.silas-log-panel .sl-when{color:var(--text-muted);font-size:11.5px;margin-right:6px;}


/* ===== The weekly question (Oct 2026) ===== */
.tq-modal-inner{max-width:560px;text-align:left;}
.tq-h{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:500;font-size:22px;line-height:1.35;margin:8px 0 8px;}
.tq-src{display:block;font-size:12.5px;color:var(--text-secondary);text-decoration:none;margin-bottom:16px;}
.tq-src:hover{color:var(--brass);}
.tq-answers{display:grid;gap:10px;margin-bottom:16px;max-height:44vh;overflow:auto;}
.tq-a{padding:10px 12px;border-left:3px solid var(--brass);background:var(--bg-card-alt);border-radius:0 8px 8px 0;}
.tq-a p{margin:0 0 4px;font-size:14.5px;line-height:1.55;color:var(--text-primary);}
.tq-a-by{font-size:12px;font-weight:700;color:var(--text-muted);}
#tableQBody textarea{width:100%;box-sizing:border-box;}
.tq-form-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;}
.tq-note{font-size:12.5px;color:var(--text-muted);margin:0;}


/* ===== Who's playing tonight (Silas, Oct 2026) ===== */
.silas-who-row{position:relative;z-index:1;padding:10px 12px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-card-alt);}
.sw-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.sw-chip.on{background:var(--felt);border-color:var(--felt);color:#fff;}
.sw-guests{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-secondary);margin-left:4px;}
.sw-step{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);cursor:pointer;font-size:15px;line-height:1;}
.sw-step:hover{border-color:var(--brass);}
.sw-foot{font-size:12px;color:var(--text-muted);margin-top:8px;}
.sw-foot .ql-link{min-height:0;padding:0 4px;font-size:12px;}


/* ===== Invite a friend (Oct 2026) ===== */
.invite-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 16px;}
.invite-row .u-note{font-size:12px;}
.invite-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1200;width:min(640px,calc(100% - 24px));box-sizing:border-box;display:flex;gap:12px 16px;align-items:center;flex-wrap:wrap;padding:14px 16px;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--brass);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.35);}
.invite-text{flex:1 1 280px;font-size:13.5px;line-height:1.5;}
.invite-text strong{font-family:'Fraunces','Fraunces Fallback',serif;font-size:15px;}
.invite-actions{display:flex;align-items:center;gap:8px;}
.invite-x{background:none;border:0;color:var(--text-muted);font-size:22px;line-height:1;cursor:pointer;padding:4px 6px;}
@media (max-width:560px){.invite-bar{bottom:84px;}}


/* ===== Gift ideas: who to shop for (Oct 2026) ===== */
.gift-who{display:flex;flex-wrap:wrap;gap:8px;width:100%;}
.gift-who-btn{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-card-alt);color:var(--text-primary);font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;}
.gift-who-btn:hover:not(:disabled){border-color:var(--brass);}
.gift-who-btn.on{background:var(--felt);border-color:var(--felt);color:#fff;}
.gift-who-btn:disabled{opacity:.45;cursor:not-allowed;}
.gift-who-note{flex-basis:100%;font-size:12px;color:var(--text-muted);margin-top:2px;}