/*
Theme Name: Bookclub Shapeshifter
Theme URI: https://example.com
Author: Jonny Pez's Bookclub
Description: A shapeshifting (Cosmic / Enchanted / Eldritch, plus one unreleased) one-page bookclub site. Requires the Bookclub Core plugin.
Version: 1.6.3
License: GPL-2.0-or-later
Text Domain: bookclub-shapeshifter
*/

:root {
  /* validated chart trio — CVD-safe on dark surfaces */
  --chart-scifi: #2596c4;
  --chart-fantasy: #b3822c;
  --chart-weird: #9d7bd8;
  --chart-fourth: #45b0c4;
  --radius: 14px;
  --maxw: 1120px;
}
body[data-theme="scifi"] {
  --bg: #060a16; --surface: #0d1526; --surface-2: #131e36;
  --ink: #e9eefb; --ink-2: #9fb0d0; --ink-3: #7788ac; /* 4.66:1 on surface-2 — AA */
  --accent: #5ad7ff; --accent-2: #8b7bff; --chart: var(--chart-scifi);
  --border: rgba(90, 215, 255, 0.14);
  --glow: 0 0 24px rgba(90, 215, 255, 0.18);
  --font-display: 'Orbitron', sans-serif;
  --font-quote: 'Inter', sans-serif;
  --hero-grad: radial-gradient(ellipse 80% 60% at 70% 0%, rgba(139,123,255,.14), transparent 60%);
}
body[data-theme="fantasy"] {
  --bg: #120c06; --surface: #1d1409; --surface-2: #291c0d;
  --ink: #f4ead6; --ink-2: #c9b28c; --ink-3: #998562; /* 4.65:1 on surface-2 — AA */
  --accent: #e8b04b; --accent-2: #d0722e; --chart: var(--chart-fantasy);
  --border: rgba(232, 176, 75, 0.16);
  --glow: 0 0 24px rgba(232, 176, 75, 0.14);
  --font-display: 'Cinzel', serif;
  --font-quote: 'Cormorant Garamond', serif;
  --hero-grad: radial-gradient(ellipse 80% 60% at 70% 0%, rgba(208,114,46,.12), transparent 60%);
}

body[data-theme="weird"] {
  --bg: #0e0817; --surface: #1a1026; --surface-2: #251838;
  --ink: #eee8f8; --ink-2: #b6a6d4; --ink-3: #907fb0; /* 4.62:1 on surface-2 — AA */
  --accent: #b78aff; --accent-2: #e070c8; --chart: var(--chart-weird);
  --border: rgba(183, 138, 255, 0.16);
  --glow: 0 0 24px rgba(183, 138, 255, 0.16);
  --font-display: 'Special Elite', 'Courier New', monospace;
  --font-quote: 'Cormorant Garamond', serif;
  --hero-grad: radial-gradient(ellipse 80% 60% at 70% 0%, rgba(224,112,200,.10), transparent 60%);
}

/* ── The fourth mood: The Fifth Season (N.K. Jemisin). Ships hidden; ──
   Club Settings → New theme reveals it.

   Built from the actual Orbit jacket, which Jemisin described as "past ages of
   decadence, now decaying; stone that endures beneath flaking gilt."

   Measured off the cover rather than guessed. A hue histogram of the jacket's
   saturated pixels puts the largest band at 180–195° (22%), with 165–210°
   accounting for roughly half — the stone is blue-cyan, not the green a quick
   glance suggests. It runs as a vertical gradient: blue at the title band
   (h184–198), teal through the upper relief (h167–174), green in the middle
   (h120–132), and gilt at the foot (h58). The base below sits in that dominant
   blue band; the gilt accent is lifted straight from the lower relief.

   The stone grain and the gilt veining under the masthead are procedural SVG
   generated here (feTurbulence), not artwork lifted from the publisher — the
   jacket is a Panepinto design over licensed Arcangel stock, which isn't
   Orbit's to redistribute. This tiles, scales, and carries no such baggage. */
body[data-theme="fourth"] {
  --bg: #0c161a; --surface: #142227; --surface-2: #203438;
  --ink: #e9f2f4; --ink-2: #a8c2c8; --ink-3: #88a2a8; /* 4.83:1 on surface-2 — AA */
  --accent: #d6c983;   /* flaking gilt, off the lower relief — 7.79:1 on surface-2 */
  --accent-2: #6fc2d4; /* the cold blue of the title band — 6.43:1 */
  --chart: var(--chart-fourth);
  --border: rgba(214, 201, 131, 0.16);
  --glow: 0 0 24px rgba(111, 194, 212, 0.16);
  --font-display: 'Marcellus SC', 'Cinzel', Georgia, serif;
  --font-quote: 'Spectral', Georgia, serif;
  /* cold sky above, a Season still smouldering below the horizon */
  --hero-grad:
    radial-gradient(ellipse 90% 55% at 50% 108%, rgba(214,120,74,.16), transparent 64%),
    radial-gradient(ellipse 95% 65% at 50% -10%, rgba(111,194,212,.13), transparent 62%);
}
/* Carved stone: a fine procedural grain over the page, and a slow gilt vein
   under the masthead. Both are generated here (feTurbulence).

   Deliberately a plain background layer rather than a fixed, blended overlay:
   `position: fixed` combined with `mix-blend-mode` is a well-known repaint
   hazard — it forces a full-viewport recomposite on every scroll frame and
   misbehaves on iOS Safari, which is most of this club. A scrolling
   background costs nothing and can't glitch. */
body[data-theme="fourth"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.12'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
body[data-theme="fourth"] header.site {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .05' numOctaves='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='26'/%3E%3C/filter%3E%3Cg filter='url(%23v)' stroke='%23d6c983' stroke-width='1.1' fill='none' opacity='.20'%3E%3Cpath d='M0 30h600M0 58h600M0 74h600'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: bottom;
}
/* ── Marcellus SC housekeeping ──
   It ships a single weight, so every 700/900 the site asks for would be
   synthesised — the browser smears the outlines sideways to fake a bold, which
   looks especially bad on inscriptional capitals. Turn synthesis off and let
   size and letter-spacing carry the hierarchy instead, the way cut lettering
   actually does it. */
body[data-theme="fourth"] .logo,
body[data-theme="fourth"] .eyebrow,
body[data-theme="fourth"] h1,
body[data-theme="fourth"] h2,
body[data-theme="fourth"] h3,
body[data-theme="fourth"] h1.book-title {
  font-synthesis-weight: none;
  -webkit-font-synthesis: none;
}
/* the masthead wordmark, cut into stone */
body[data-theme="fourth"] .logo { letter-spacing: .24em; }
body[data-theme="fourth"] h2 { letter-spacing: .04em; }
body[data-theme="fourth"] h1.book-title { letter-spacing: .015em; }
body[data-theme="fourth"] .blurb, body[data-theme="fourth"] .nb-quote { letter-spacing: .01em; }

/* Marcellus has no tabular figures — its "1" is far narrower than its "0", so
   the once-a-second countdown would visibly shuffle sideways (30.7px of swing
   across a minute at this size). Only these four numbers move, so only these
   four borrow Spectral, which is already loaded and is naturally monospaced in
   its figures. Every heading on the site stays Marcellus. */
body[data-theme="fourth"] .cd-box .n { font-family: 'Spectral', Georgia, serif; }

* { margin: 0; padding: 0; box-sizing: border-box; }
/* stop iOS double-tap-to-zoom on anything tappable (rapid ⌫⌫ in the Tome,
   rate buttons, chat sends) — pinch zoom stays available for accessibility */
button, a, select, input, textarea, .tome-key, .rate-btn, .ch-btn, .poll-opt { touch-action: manipulation; }
/* smooth scrolling is handled in JS now (short hops glide, long jumps land
   instantly instead of a multi-second flythrough) */
main section { scroll-margin-top: 100px; } /* anchors land clear of the masthead */
.off-page { display: none !important; } /* sections that belong to another page */

/* a11y: skip link + a themed focus ring instead of browser blue */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--bg); font-weight: 700;
  padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Inter', sans-serif; line-height: 1.6;
  transition: background .6s ease, color .6s ease; overflow-x: hidden;
}
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
main, header.site, .note-banner { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ─────────── HEADER ─────────── */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
/* Masthead nav: logo + controls on the top line, the section links on their
   own full-width line beneath — like a literary journal. The links keep one
   line down to ~830px, so the burger only appears on true phones/tablets. */
.nav { display: block; padding: 12px 24px 0; }
.nav-top { display: flex; align-items: center; gap: 14px; max-width: var(--maxw); margin: 0 auto; }
.nav-top .logo { margin-right: auto; }
.logo {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.logo b { color: var(--accent); }
.nav-links { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: var(--maxw); margin: 4px auto 0; padding: 4px 0 2px; }
.nav-links a { color: var(--ink-2); font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
/* narrow laptops/tablets: slim the links a touch so the line survives */
@media (max-width: 1000px) {
  .nav-links a { font-size: 12px; padding: 5px 7px; }
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
#themeToggle, #musicToggle, .auth-btn {
  font: 600 12px 'Inter', sans-serif; color: var(--accent);
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  white-space: nowrap; transition: all .2s;
}
#themeToggle:hover, #musicToggle:hover, .auth-btn:hover { box-shadow: var(--glow); }
#musicToggle { font-size: 14px; padding: 6px 12px; }
#musicToggle.on { background: var(--accent); color: var(--bg); }
#authLink { display: flex; gap: 8px; align-items: center; }
#authLink .who { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }

/* ─────────── MOBILE SLIDE-OUT MENU ─────────── */
#navBurger {
  display: none; background: none; border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink); font-size: 18px; width: 40px; height: 40px; cursor: pointer;
}
.nav-backdrop {
  position: fixed; inset: 0; z-index: 390; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 400;
  width: min(78vw, 300px); background: var(--surface);
  border-left: 1px solid var(--border); padding: 60px 18px 24px;
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
  overscroll-behavior: contain;
  /* closed = invisible AND untabbable: visibility pairs with the inert
     attribute JS sets, so keyboard users never wade through 13 hidden links.
     The delayed visibility transition keeps the slide-out animation. */
  visibility: hidden;
  transform: translateX(105%); transition: transform .28s ease, visibility 0s .28s;
}
.nav-drawer.open { visibility: visible; transform: none; box-shadow: -24px 0 60px rgba(0,0,0,.5); transition: transform .28s ease, visibility 0s 0s; }
.nav-drawer a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--ink-2); font-size: 15.5px; font-weight: 500; }
.nav-drawer a:hover { background: var(--surface-2); color: var(--ink); }
.nav-drawer .drawer-close {
  position: absolute; top: 12px; right: 14px; width: 38px; height: 38px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink-2); font-size: 15px; cursor: pointer;
}
.nav-drawer .drawer-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.nav-drawer .drawer-foot .auth-btn { display: inline-block; }

/* ─────────── NOTE BANNER ─────────── */
.note-banner {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  padding: 10px 24px; text-align: center; min-height: 46px;
}
.nb-label {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-3);
}
.nb-quote {
  font-family: var(--font-quote); font-size: 15px; color: var(--ink-2);
  transition: opacity .6s ease; max-width: 900px; margin: 0 auto;
}
body[data-theme="fantasy"] .nb-quote, body[data-theme="weird"] .nb-quote, body[data-theme="fourth"] .nb-quote { font-style: italic; font-size: 17px; }
.nb-quote b { color: var(--accent); font-style: normal; }
.nb-quote .nb-who { font-size: 12.5px; color: var(--ink-3); font-family: 'Inter', sans-serif; font-style: normal; }

/* ─────────── SECTIONS ─────────── */
section { padding: 72px 0 8px; }
.eyebrow {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700; letter-spacing: .02em; margin-bottom: 8px;
}
.section-sub { color: var(--ink-2); font-size: 15px; max-width: 640px; margin-bottom: 32px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.empty-note {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 20px 24px; color: var(--ink-2); font-size: 14.5px; max-width: 640px;
}
.empty-note code, .empty-note b { color: var(--accent); }

/* ─────────── HERO ─────────── */
#now { padding-top: 64px; background: var(--hero-grad); }
.hero-grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.hero-cover .cover { width: 100%; aspect-ratio: 2/3; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.55), var(--glow); }
h1.book-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.12; margin: 6px 0 4px; }
.book-author { font-size: 19px; color: var(--ink-2); margin-bottom: 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink-2); background: var(--surface);
}
.chip.genre-scifi   { color: #7fd0ef; border-color: rgba(37,150,196,.5); background: rgba(37,150,196,.12); }
.chip.genre-fantasy { color: #e3b45e; border-color: rgba(179,130,44,.5); background: rgba(179,130,44,.12); }
.chip.genre-weird   { color: #c3aaee; border-color: rgba(157,123,216,.5); background: rgba(157,123,216,.12); }
.chip.picker { color: var(--ink); }
.chip.picker b { color: var(--accent); font-weight: 700; }
a.chip.playlist { color: #58d68d; border-color: rgba(88,214,141,.4); background: rgba(88,214,141,.08); }
a.chip.playlist:hover { box-shadow: 0 0 14px rgba(88,214,141,.25); }
.blurb { font-family: var(--font-quote); font-size: 17px; color: var(--ink-2); max-width: 60ch; margin-bottom: 14px; }
body[data-theme="fantasy"] .blurb, body[data-theme="weird"] .blurb, body[data-theme="fourth"] .blurb { font-size: 19px; font-style: italic; }
.author-note { font-size: 13.5px; color: var(--ink-3); max-width: 60ch; margin-bottom: 24px; }

.pace-head {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  margin: 20px 0 8px;
}
.pace {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px; max-width: 560px;
}
.pace label { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.pace input {
  width: 90px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--ink); font: 600 15px 'Inter', sans-serif;
}
.pace input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pace-result { font-size: 14px; color: var(--ink-2); }
.pace-result b { color: var(--accent); font-size: 17px; }

/* ─────────── COVERS ─────────── */
.cover {
  position: relative; overflow: hidden; border-radius: 8px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: space-between; padding: 12% 10%; text-align: center; align-items: center;
}
.cover .fallback .f-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 1.4vw, 16px); line-height: 1.25; margin-top: 18%; }
.cover .fallback .f-author { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.cover .fallback .f-rule { width: 32px; height: 2px; background: var(--accent); border-radius: 2px; }

/* ─────────── MEETING ─────────── */
.meeting-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.countdown { display: flex; gap: 12px; margin: 18px 0 22px; flex-wrap: wrap; }
.cd-box { flex: 1; min-width: 86px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 8px; }
.cd-box .n { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cd-box .l { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.meet-line { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); margin-bottom: 8px; }
.meet-line .k { color: var(--ink-3); min-width: 76px; font-weight: 600; font-size: 12.5px; letter-spacing:.06em; text-transform: uppercase; padding-top:2px; }
.meet-line .v b { color: var(--ink); }
.btn {
  display: inline-block; margin-top: 16px; cursor: pointer;
  font: 600 13.5px 'Inter', sans-serif; color: var(--bg);
  background: var(--accent); border: none; border-radius: 10px;
  padding: 11px 18px; transition: all .2s;
}
.btn:hover { box-shadow: var(--glow); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
.btn.small { padding: 7px 13px; font-size: 12.5px; margin-top: 0; }
.food-list { list-style: none; margin-top: 6px; }
.food-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 14.5px; }
.food-list li:last-child { border-bottom: none; }
.food-list .who { color: var(--accent); font-weight: 600; }
.food-list .dish { color: var(--ink-2); text-align: right; }
.food-theme {
  font-family: var(--font-quote); font-size: 17px; color: var(--ink);
  text-align: center; padding: 16px 20px 14px; margin: 5px 5px 20px;
  border: 1px solid var(--border); border-radius: 10px;
  outline: 1px solid var(--border); outline-offset: 4px;
  background: radial-gradient(ellipse 90% 120% at 50% 0%,
    color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%), var(--surface-2);
}
.food-theme .ft-label {
  display: block; font-family: var(--font-display); font-style: normal;
  font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 7px;
}
.food-theme::after {
  content: "❦"; display: block; margin-top: 8px;
  color: var(--ink-3); font-size: 13px; font-style: normal;
}
body[data-theme="fantasy"] .food-theme, body[data-theme="weird"] .food-theme, body[data-theme="fourth"] .food-theme { font-style: italic; font-size: 19px; }
.food-empty { font-size: 13.5px; color: var(--ink-3); }
#dishPrompt { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
#dishPrompt a { cursor: pointer; }

/* ─────────── COMMON ROOM (chat) ─────────── */
.chat-grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; height: 560px;
}
.chat-channels { border-right: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; padding: 12px 8px; scrollbar-width: thin; }
.chat-channels .ch-label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 4px; font-family: var(--font-display); }
.ch-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; color: var(--ink-2); cursor: pointer;
  font: 500 13.5px 'Inter', sans-serif; padding: 8px 10px; border-radius: 8px;
}
.ch-btn:hover { background: var(--surface-2); color: var(--ink); }
.ch-btn.active { background: var(--surface-2); color: var(--accent); font-weight: 600; }
.ch-btn .ch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ch-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex: none; }
.ch-btn .hash { color: var(--ink-3); flex: none; }
.chat-channels select {
  width: calc(100% - 16px); margin: 8px; padding: 7px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2);
  font: 500 12.5px 'Inter', sans-serif;
}
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { padding: 12px 18px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; display: flex; align-items: baseline; gap: 10px; }
.chat-head .sub { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.chat-log {
  flex: 1; min-height: 0; /* without this the log refuses to shrink and shoves
  the composer past the box's clipped edge — the iPhone "cropped input" bug */
  overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; scrollbar-width: thin; scrollbar-color: var(--accent) var(--surface);
}
.msg { margin-bottom: 4px; display: flex; gap: 10px; align-items: baseline; }
.msg .del { opacity: 0; }
.msg:hover .del { opacity: 1; }
.msg-head { margin-top: 14px; }
.msg-head .who { color: var(--accent); font-weight: 700; font-size: 13.5px; }
.msg-head .when { font-size: 12px; color: var(--ink-3); }
.msg .body { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; flex: 1; }
.msg .body .spoiler {
  filter: blur(6px); cursor: pointer; transition: filter .25s;
  background: var(--surface-2); border-radius: 4px; padding: 0 4px;
}
.msg .body .spoiler.shown { filter: none; }
.chat-empty { color: var(--ink-3); font-size: 14px; padding: 24px 0; text-align: center; }
.chat-compose { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-compose textarea {
  flex: 1; min-height: 42px; max-height: 130px; resize: vertical;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); font: 500 14px 'Inter', sans-serif;
}
.chat-compose textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 860px) {
  /* dvh = the viewport Safari ACTUALLY shows (vh hides behind the iOS address
     bar); older browsers fall back to the vh line */
  .chat-grid { grid-template-columns: 1fr; height: 65vh; height: 65dvh; }
  .chat-channels { display: none; }
  .chat-mobile-select { display: block !important; margin: 0 0 10px; }
  .chat-compose { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.chat-mobile-select { display: none; width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 600 14px 'Inter', sans-serif; }

.ics-choices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ─────────── ROTATION ─────────── */
.rotation { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rot-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 10px 20px 10px 12px; }
.rot-card .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font-display); color: var(--ink-3); border: 1px solid var(--border); }
.rot-card.next { border-color: var(--accent); box-shadow: var(--glow); }
.rot-card.next .num { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.rot-card .name { font-weight: 600; font-size: 14.5px; }
.rot-card .tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.rot-hint { font-size: 13px; color: var(--ink-3); }

/* ─────────── FORMS (nominations / notes / profile) ─────────── */
.bc-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.bc-form input[type=text], .bc-form select, .bc-form textarea {
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); font: 500 14px 'Inter', sans-serif;
}
.bc-form input:focus, .bc-form select:focus, .bc-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.bc-form .slots { font-size: 12.5px; color: var(--ink-3); }
.bc-form textarea { width: 100%; min-height: 70px; resize: vertical; }
.bc-msg { font-size: 13px; color: var(--accent-2); margin: -14px 0 20px; min-height: 18px; }
.x-btn { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; }
.x-btn:hover { color: var(--ink); background: var(--surface-2); }

/* ─────────── BALLOT BOX (polls) ─────────── */
.polls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.poll-card { position: relative; }
.poll-q { font-weight: 600; font-size: 16px; margin-bottom: 14px; padding-right: 60px; }
.poll-closed-badge {
  position: absolute; top: 18px; right: 18px;
  font: 700 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
}
.poll-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink); font: 500 14px 'Inter', sans-serif;
  padding: 10px 14px; margin-bottom: 8px; transition: all .15s;
}
.poll-opt:hover { border-color: var(--accent); }
.poll-res {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; margin-bottom: 8px; font-size: 13.5px; color: var(--ink-2);
}
.poll-res .fill {
  position: absolute; inset: 1px auto 1px 1px; border-radius: 8px;
  background: color-mix(in srgb, var(--chart) 30%, transparent);
  width: 0; transition: width .8s cubic-bezier(.2,.7,.2,1);
}
.poll-res > span { position: relative; }
.poll-res .opt-label { flex: 1; color: var(--ink); }
.poll-res .pct { font: 700 13px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.poll-res .cnt { font-size: 12px; color: var(--ink-3); }
.poll-res.mine { border-color: var(--accent); }
.poll-res.mine .opt-label::after { content: " ✓"; color: var(--accent); }
.poll-res.clickable { cursor: pointer; }
.poll-res.clickable:hover { border-color: var(--accent); }
.poll-meta { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ─────────── TBR + WHEEL ─────────── */
.tbr-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
/* the shelf grows to its content — the old fixed-height inner scroller
   hijacked the mouse wheel; long shelves collapse behind a "show all" button */
.tbr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 16px; align-content: start; }
.tbr-more { justify-self: start; margin-top: 4px; grid-column: 1 / -1; }
/* cover-forward shelf: the jackets do the talking */
.tbr-item {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tbr-item:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.tbr-jacket { position: relative; }
.tbr-jacket .cover { width: 100%; aspect-ratio: 2 / 3; border-radius: 0; border: none; border-bottom: 1px solid var(--border); }
.tbr-genre { position: absolute; top: 8px; left: 8px; font-size: 11.5px; padding: 3px 9px; backdrop-filter: blur(6px); }
.tbr-x { position: absolute; top: 6px; right: 6px; background: color-mix(in srgb, var(--bg) 65%, transparent); border-radius: 8px; backdrop-filter: blur(6px); }
.tbr-meta { padding: 10px 12px 12px; min-width: 0; }
.tbr-item:hover .t { color: var(--accent); }
@media (max-width: 640px) {
  .tbr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tbr-meta { padding: 8px 10px 10px; }
}

/* ─────────── YOUR 3 PICKS — one wide row, above the general shelf ─────────── */
.my-picks { margin: 4px 0 28px; }
.mp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mp-eyebrow {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.mp-sub { color: var(--ink-3); font-size: 12.5px; }
.mp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mp-slot {
  display: flex; flex-direction: column; min-width: 0; border-radius: 14px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mp-filled {
  background: var(--surface); border: 1px solid var(--accent); overflow: hidden; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
}
.mp-filled:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.mp-jacket { position: relative; }
.mp-jacket .cover { width: 100%; aspect-ratio: 2 / 3; border-radius: 0; border: none; border-bottom: 1px solid var(--border); }
.mp-jacket .cover .fallback { padding: 14px; }
.mp-genre { position: absolute; top: 10px; left: 10px; font-size: 12px; padding: 3px 10px; backdrop-filter: blur(6px); }
.mp-x { position: absolute; top: 8px; right: 8px; background: color-mix(in srgb, var(--bg) 65%, transparent); border-radius: 8px; backdrop-filter: blur(6px); }
.mp-meta { padding: 12px 14px 14px; min-width: 0; }
.mp-meta .t { font-weight: 700; font-size: 15.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mp-filled:hover .mp-meta .t { color: var(--accent); }
.mp-meta .a { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-empty {
  align-items: center; justify-content: center; text-align: center; gap: 6px;
  padding: 22px 16px; min-height: 168px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1.5px dashed var(--border); cursor: pointer;
}
.mp-empty:hover, .mp-empty:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.mp-empty:hover .mp-plus, .mp-empty:focus-visible .mp-plus { color: var(--accent); transform: scale(1.1); }
.mp-plus { font-size: 26px; line-height: 1; color: var(--ink-3); transition: color .15s, transform .15s; }
.mp-empty-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.mp-empty-sub { font-size: 12px; color: var(--ink-3); max-width: 22ch; }
@media (max-width: 700px) {
  .mp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .mp-row { grid-template-columns: 1fr; }
}

/* Open Library typeahead on the nomination form */
.nom-search { position: relative; }
.nom-search input { width: 100%; }
.nom-sugg {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; min-width: min(340px, 78vw); z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.nom-sugg button {
  display: flex; gap: 10px; width: 100%; align-items: center; padding: 8px 10px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--ink); cursor: pointer; text-align: left; font: 500 13.5px 'Inter', sans-serif;
}
.nom-sugg button:hover, .nom-sugg button:focus-visible { background: var(--surface-2); }
.nom-sugg img, .nom-sugg .noimg { width: 28px; height: 42px; object-fit: cover; border-radius: 4px; flex: none; background: var(--surface-2); }
.nom-sugg .st { flex: 1; min-width: 0; display: grid; }
.nom-sugg .t1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nom-sugg .a1 { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nom-sugg .src { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 6px 10px; background: var(--surface-2); }
.tbr-item .t { font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tbr-item .a { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbr-item .nom { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.tbr-item .nom b { color: var(--accent); }
.wheel-card { text-align: center; }
#wheel { width: 100%; max-width: 320px; height: auto; }
.wheel-pointer {
  width: 0; height: 0; margin: 0 auto -6px;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 16px solid var(--accent); position: relative; z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
#wheelResult { min-height: 48px; margin-top: 14px; font-size: 15px; color: var(--ink-2); }
#wheelResult b { color: var(--accent); font-size: 17px; }

/* ─────────── ARCHIVE ─────────── */
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.book-card { display: flex; gap: 18px; position: relative; flex-wrap: wrap; }
.book-card .cover { flex: 0 0 92px; height: 138px; }
.book-card .bk-main { flex: 1; min-width: 180px; }
.book-card h3 { font-size: 16.5px; line-height: 1.3; margin-bottom: 2px; }
.book-card .a { color: var(--ink-3); font-size: 13px; margin-bottom: 8px; }
.book-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.book-card .meta .chip { font-size: 12px; padding: 3px 9px; }
.book-card .b { font-family: var(--font-quote); font-size: 13.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
body[data-theme="fantasy"] .book-card .b, body[data-theme="weird"] .book-card .b, body[data-theme="fourth"] .book-card .b { font-size: 15px; }
.book-card .food { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.score-badge {
  position: absolute; top: -10px; right: -8px; z-index: 5; /* above the cover art */
  background: var(--surface-2); border: 1px solid var(--accent); border-radius: 999px;
  padding: 5px 12px; font: 700 14px var(--font-display); color: var(--accent); box-shadow: var(--glow);
}
.score-badge span { font-size: 12px; color: var(--ink-3); font-family: 'Inter',sans-serif; font-weight: 600; }
.dnf-badge {
  position: absolute; top: -10px; right: -8px; z-index: 5; /* above the cover art */
  background: var(--surface-2); border: 1px solid var(--ink-3); border-radius: 999px;
  padding: 5px 12px; font: 700 12px var(--font-display); color: var(--ink-3); letter-spacing: .1em;
}
/* podium medals: the club's top 3 rated books, top-left corner */
.rank-badge {
  position: absolute; top: -12px; left: -10px; z-index: 6;
  font-size: 24px; line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
}

/* rating + notes strip along the bottom of each card */
.card-actions { flex-basis: 100%; border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 10px; }
.rate-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rate-row .rl { font-size: 12px; color: var(--ink-3); margin-right: 4px; letter-spacing: .06em; text-transform: uppercase; }
.rate-btn {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--ink-2); font: 600 11.5px 'Inter', sans-serif; transition: all .15s;
}
.rate-btn:hover { border-color: var(--accent); color: var(--ink); }
.rate-btn.mine { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.notes-toggle { font-size: 12.5px; color: var(--accent); cursor: pointer; background: none; border: none; padding: 0; margin-top: 8px; font-weight: 600; }
.notes-panel { margin-top: 10px; display: grid; gap: 8px; }
.note-item { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: start; }
.note-item .nt { flex: 1; }
.note-item .nw { color: var(--accent); font-weight: 600; font-size: 12px; display: block; margin-top: 3px; }

/* ─────────── LEADERBOARD (compact: two columns, slim bars) ─────────── */
/* two newspaper-style columns: ranks run DOWN column one, then column two */
.lb { columns: 2; column-gap: 36px; }
.lb-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(56px, 84px) 36px; align-items: center; gap: 9px; padding: 3px 0; margin-bottom: 4px; break-inside: avoid; }
.lb-row .rank { color: var(--ink-3); font: 700 11px var(--font-display); text-align: right; }
.lb-row .name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .name small { font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 5px; }
.lb-track { background: var(--surface-2); border-radius: 5px; height: 8px; position: relative; overflow: hidden; }
.lb-fill { position: absolute; inset: 1px auto 1px 1px; border-radius: 4px; background: var(--chart); width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.lb-row .val { font: 700 13.5px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.lb-row.crown .name::after { content: " ♛"; color: var(--accent); }
.lb-more { display: none; margin-top: 12px; }
@media (max-width: 720px) {
  .lb { columns: 1; }
  .lb:not(.expanded) .lb-extra { display: none; } /* phones: top 5 + expand */
  .lb-more { display: inline-block; }
}

/* ─────────── ROSTER ─────────── */
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.roster-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; }
.roster-card.retired { opacity: .7; filter: saturate(.6); }
.roster-card.prologue { border-style: dashed; } /* provisional, like their membership */

/* Phones: the roster lists hide behind ONE button; opened cards are full
   cards, bios and all */
.roster-toggle { display: none; }
@media (max-width: 640px) {
  .roster-grid { gap: 10px; }
  .roster-toggle { display: block; margin: -16px 0 16px; }
  #roster:not(.roster-open) #rosterGrid,
  #roster:not(.roster-open) #prologueWrap,
  #roster:not(.roster-open) #retiredWrap { display: none; }
}
.roster-card.me { border-color: var(--accent); }
.roster-card .rn { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.roster-card .rb { font-size: 13.5px; color: var(--ink-2); font-family: var(--font-quote); }
body[data-theme="fantasy"] .roster-card .rb, body[data-theme="weird"] .roster-card .rb, body[data-theme="fourth"] .roster-card .rb { font-size: 15px; }
.roster-card .rc { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.roster-card .rd { font-size: 12.5px; margin-top: 8px; color: var(--ink-2); }
.roster-card .rd b { color: var(--accent); }
.roster-card .edit-link { position: absolute; top: 14px; right: 14px; font-size: 12px; cursor: pointer; color: var(--accent); background: none; border: none; font-weight: 600; }
.roster-card form { display: grid; gap: 8px; margin-top: 8px; }
.roster-card form input, .roster-card form textarea {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); font: 500 13px 'Inter', sans-serif; width: 100%;
}
.roster-card form textarea { min-height: 64px; resize: vertical; }

/* ─────────── STATS ─────────── */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 28px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.tile .n { font-family: var(--font-display); font-size: 27px; font-weight: 700; line-height: 1.2; }
.tile .l { font-size: 12px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.tile .d { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.genre-bar-wrap { max-width: 720px; margin-bottom: 32px; }
.genre-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--bg); }
.genre-bar .seg { border-radius: 4px; }
.genre-legend { display: flex; gap: 22px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); flex-wrap: wrap; }
.genre-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; }
.awards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.award { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.award .aw { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.award .bk { font-weight: 600; font-size: 15px; }
.award .why { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
/* ─────────── BOOK PREVIEW MODAL ─────────── */
.book-card { cursor: pointer; }
.bc-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 24px;
  animation: bcFade .2s ease;
}
@keyframes bcFade { from { opacity: 0; } }
.bc-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.6), var(--glow);
  max-width: 680px; width: 100%; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 28px; position: relative; display: flex; gap: 24px;
  animation: bcPop .22s cubic-bezier(.2,.9,.3,1.2);
  scrollbar-width: thin; scrollbar-color: var(--accent) var(--surface);
}
@keyframes bcPop { from { transform: scale(.94) translateY(10px); opacity: 0; } }
.bc-modal .cover { flex: 0 0 150px; height: 225px; }
.bc-modal .bm-body { min-width: 0; }
.bc-modal h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.25; margin-bottom: 2px; padding-right: 28px; }
.bc-modal .bm-author { color: var(--ink-2); font-size: 14.5px; margin-bottom: 12px; }
.bc-modal .chips { margin-bottom: 14px; }
.bc-modal .bm-blurb { font-family: var(--font-quote); font-size: 15.5px; color: var(--ink-2); }
body[data-theme="fantasy"] .bc-modal .bm-blurb, body[data-theme="weird"] .bc-modal .bm-blurb, body[data-theme="fourth"] .bc-modal .bm-blurb { font-size: 17.5px; }
.bc-modal .bm-food { font-size: 13px; color: var(--ink-3); margin-top: 12px; }
.bc-modal .bm-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%;
  width: 32px; height: 32px; color: var(--ink-2); cursor: pointer; font-size: 15px;
}
.bc-modal .bm-close:hover { color: var(--ink); box-shadow: var(--glow); }
@media (max-width: 560px) {
  .bc-modal { flex-direction: column; padding: 20px; }
  .bc-modal .cover { flex: none; width: 120px; height: 180px; }
}

/* buy / listen links */
.buy-links { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 12.5px; }
.buy-links .gl { color: var(--ink-3); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.buy-links a { color: var(--ink-2); border-bottom: 1px dotted var(--border); }
.buy-links a:hover { color: var(--accent); border-color: var(--accent); }
.hero-links.buy-links { font-size: 13.5px; margin: -8px 0 20px; }

/* list of shame */
.shame-list { display: grid; gap: 10px; max-width: 560px; }
.shame-row {
  display: flex; align-items: baseline; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 18px;
}
.shame-row .sn { font-weight: 600; font-size: 14.5px; }
.shame-row .sc { font-family: var(--font-display); font-weight: 700; color: var(--accent-2); font-size: 17px; margin-left: auto; }
.shame-row .sl { font-size: 12px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.shame-row .sb { font-size: 12px; color: var(--ink-3); flex-basis: 100%; }
.shame-row { flex-wrap: wrap; }

.graveyard { margin-top: 32px; }
.grave {
  border: 1px dashed var(--border); border-radius: 12px; padding: 18px 22px;
  color: var(--ink-2); font-family: var(--font-quote); font-size: 15px;
  max-width: 640px; background: color-mix(in srgb, var(--surface) 50%, transparent);
}
body[data-theme="fantasy"] .grave, body[data-theme="weird"] .grave, body[data-theme="fourth"] .grave { font-style: italic; font-size: 17px; }
.grave .rip { font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; font-style: normal; }

/* ─────────── SIGN-IN MODAL ─────────── */
.login-ov {
  position: fixed; inset: 0; z-index: 900; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(8, 6, 4, .72); backdrop-filter: blur(4px);
}
.login-ov.show { display: flex; }
.login-box { position: relative; width: 100%; max-width: 380px; }
.login-box h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 16px; }
.login-box form { display: grid; gap: 10px; }
.login-box input {
  padding: 11px 13px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); font: 500 14.5px 'Inter', sans-serif;
}
.login-box input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-x { position: absolute; top: 12px; right: 12px; font-size: 17px; }
.login-help { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; }

/* ─────────── VERSION BADGE + CHANGELOG ─────────── */
.ver-badge {
  margin-top: 14px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--border); color: var(--ink-3);
  font: 600 11px var(--font-display); letter-spacing: .12em;
  position: relative; transition: color .15s, border-color .15s;
}
.ver-badge:hover { color: var(--accent); border-color: var(--accent); }
.ver-badge.ver-new { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.ver-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2); margin-left: 7px; vertical-align: 1px;
  animation: bc-pulse 1.6s ease-in-out infinite;
}
@keyframes bc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bc-modal.changelog { max-width: 520px; }
.cl-ver { font: 700 14px var(--font-display); letter-spacing: .08em; color: var(--accent); margin: 18px 0 8px; text-transform: uppercase; }
.cl-ver:first-child { margin-top: 0; }
.cl-list { margin: 0 0 4px 18px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.cl-cur { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-left: 8px; letter-spacing: .1em; }

/* ─────────── @MENTIONS & NOTICES ─────────── */
.mention { color: var(--accent); font-weight: 600; }
.msg .body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.chat-compose { position: relative; }
.mention-box {
  position: absolute; bottom: calc(100% + 6px); left: 12px; z-index: 80;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); min-width: 190px;
}
.mention-box button {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--ink); cursor: pointer; font: 600 13.5px 'Inter', sans-serif;
}
.mention-box button:last-child { border-bottom: none; }
.mention-box button:hover, .mention-box button:focus-visible { background: var(--surface-2); color: var(--accent); }
#mentionBar { max-width: var(--maxw); margin: 14px auto 0; padding: 0 24px; display: grid; gap: 8px; }
.mention-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 12px;
  padding: 10px 14px; font-size: 13.5px; box-shadow: var(--glow);
}
.mention-note .mn-text { flex: 1; min-width: 200px; }
.mention-note .mn-text b { color: var(--accent); }
.msg.flash { animation: bc-flash 2.4s ease; border-radius: 8px; }
@keyframes bc-flash {
  0%, 60% { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { background: transparent; }
}
@media (max-width: 560px) { #mentionBar { padding: 0 16px; } }

/* ─────────── FIRST STEPS (new-member checklist) ─────────── */
#welcome { padding-top: 48px; }
.tips-card { max-width: 640px; }
.tips-count { font: 700 13px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tips-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 8px 0 16px; }
.tips-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.tips-list { display: grid; gap: 8px; }
a.tip {
  display: flex; gap: 10px; align-items: baseline; color: var(--ink-2); font-size: 14px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
a.tip:hover { border-color: var(--accent); color: var(--ink); }
a.tip.done { opacity: .55; }
a.tip.done span:last-child { text-decoration: line-through; }
a.tip .ck { color: var(--accent); font-weight: 700; flex: none; }
.tips-extra { font-size: 12.5px; color: var(--ink-3); margin-top: 14px; }
.tips-dismiss { margin-top: 12px; }

/* ─────────── THE DAILY TOME ─────────── */
.tome-grid-wrap { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
#tomeBoard { display: grid; gap: 6px; }
.tome-row { display: grid; gap: 6px; }
.tome-cell {
  width: 52px; height: 52px; border: 2px solid var(--border); border-radius: 8px;
  display: grid; place-items: center; position: relative;
  font: 700 22px var(--font-display); text-transform: uppercase; color: var(--ink);
  background: var(--surface); transition: background .25s, border-color .25s, transform .12s;
}
.tome-cell.filled { border-color: var(--ink-3); transform: scale(1.04); }
.tome-cell.s2 { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tome-cell.s1 { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg); }
.tome-cell.s1::after { content: "◦"; position: absolute; top: 1px; right: 5px; font-size: 11px; }
.tome-cell.s0 { background: var(--surface-2); border-color: var(--surface-2); color: var(--ink-3); }
#tomeSide { display: grid; gap: 12px; min-width: 220px; flex: 1; align-content: start; }
.tome-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.tome-legend .lg { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.lgc { width: 20px; height: 20px; border-radius: 5px; position: relative; flex: none; }
.lgc.s2 { background: var(--accent); }
.lgc.s1 { background: var(--accent-2); }
.lgc.s1::after { content: "◦"; position: absolute; top: -3px; right: 2px; font-size: 10px; color: var(--bg); }
.lgc.s0 { background: var(--surface-2); border: 1.5px solid var(--ink-3); } /* visible swatch, not a ghost */
.tome-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tome-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 6px; text-align: center; }
.tome-stat .n { font: 700 20px var(--font-display); }
.tome-stat .l { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tome-result { font-family: var(--font-quote); font-size: 16px; }
body[data-theme="fantasy"] .tome-result, body[data-theme="weird"] .tome-result, body[data-theme="fourth"] .tome-result { font-style: italic; font-size: 18px; }
.tome-result b { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-style: normal; }
.tome-def { margin-top: 8px; color: var(--ink-2); }
.tome-hint {
  font-family: var(--font-quote); font-size: 15px; color: var(--ink-2);
  border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px;
}
body[data-theme="fantasy"] .tome-hint, body[data-theme="weird"] .tome-hint, body[data-theme="fourth"] .tome-hint { font-style: italic; font-size: 17px; }
.tome-hint span { color: var(--accent); font-style: normal; font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-right: 4px; }
#tomeLegend .tome-legend { margin-bottom: 14px; }
/* hint box: full-width row under the board+side on desktop… */
#tomeHintBox { flex: 1 1 100%; order: 6; margin-top: 4px; }
#tomeHintBox .tome-hint { display: inline-block; }
.tome-quit { opacity: .7; }
.tome-quit:hover { opacity: 1; border-color: #b3564a; color: #d98a7f; }

/* Tome scoreboard */
.tome-scores { margin-top: 28px; max-width: 680px; }
.ts-title { font: 700 14px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.ts-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; }
.ts-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.ts-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.ts-row:last-child { border-bottom: none; }
.ts-row .rk { color: var(--ink-3); font-size: 12px; width: 16px; flex: none; }
.ts-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-row .s { font-weight: 700; color: var(--accent); flex: none; }
.ts-row .s2 { color: var(--ink-2); font-size: 12px; flex: none; }
.ts-empty { color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 640px) { .ts-grid { grid-template-columns: 1fr; gap: 16px; } }
.tome-book { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.tome-book b { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-size: 13px; }
#tomeKeyboard { margin-top: 18px; display: grid; gap: 6px; max-width: 520px; }
.tome-krow { display: flex; gap: 5px; justify-content: flex-start; }
.tome-key {
  min-width: 32px; height: 46px; padding: 0 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  font: 600 13px 'Inter', sans-serif; text-transform: uppercase;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tome-key:active { transform: scale(.94); }
.tome-key.wide { min-width: 56px; font-size: 12px; }
.tome-key.s2 { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tome-key.s1 { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg); }
/* ruled-out keys: dimmer than live keys but still READABLE (the old
   opacity .55 made them vanish) — recessed look, AA-compliant ink */
.tome-key.s0 { background: var(--bg); border-color: var(--surface-2); color: var(--ink-3); }
/* Phones: the side panel (legend/stats/hint) must NOT wedge itself between
   the grid and the keyboard — reorder it below, and compact everything so
   the full grid + keyboard share one screen. */
@media (max-width: 640px) {
  #tome { padding-top: 44px; }
  #tome .section-sub { margin-bottom: 14px; font-size: 13.5px; }
  #tome .wrap { display: flex; flex-direction: column; }
  .tome-grid-wrap { display: contents; }         /* board + side become flex items */
  #tomeSide { order: 5; margin-top: 22px; min-width: 0; }  /* after the keyboard */
  /* …but on phones it slots RIGHT under the grid, above the keyboard */
  #tomeHintBox { order: 0; flex: none; margin-top: 10px; }
  #tomeBoard { width: 100%; max-width: calc(var(--tome-len, 5) * 48px); gap: 5px; }
  .tome-row { gap: 5px; }
  .tome-cell { width: auto; height: auto; aspect-ratio: 1 / 1; font-size: 18px; }
  #tomeKeyboard { margin-top: 12px; max-width: none; gap: 5px; }
  .tome-krow { gap: 4px; }
  .tome-key { flex: 1 1 0; min-width: 0; height: 44px; padding: 0; font-size: 12px; }
  .tome-key.wide { flex: 1.6 1 0; font-size: 12px; }
}

/* ─────────── THE ARCADE ─────────── */
.arcade-grid { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 24px; align-items: start; }
.arcade-stage {
  position: relative; padding: 0; overflow: hidden;
  /* no long-press text selection / copy callout while mashing the screen */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none;
}
.arcade-stage * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#gameCanvas { display: block; width: 100%; height: auto; background: var(--bg); touch-action: none; }
.arcade-fs {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; z-index: 6;
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  border: 1px solid var(--border); color: var(--ink-2); font-size: 22px;
}
.arcade-fs:hover { color: var(--accent); box-shadow: var(--glow); }
/* fullscreen (native via .fs, iOS fallback via .fs-fallback) */
.arcade-stage.fs, .arcade-stage.fs-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 0; border: none;
}
.arcade-stage.fs-fallback { position: fixed; inset: 0; z-index: 300; }
.arcade-stage.fs #gameCanvas, .arcade-stage.fs-fallback #gameCanvas {
  height: 100vh; height: 100dvh; width: auto; max-width: 100vw;
}
body.arcade-locked { overflow: hidden; touch-action: none; }
/* fullscreen play: EVERYTHING else gets out of the way — the footer especially,
   since as a later sibling of <main> it can legally paint over the fixed stage */
body.arcade-locked header.site, body.arcade-locked .note-banner,
body.arcade-locked .nav-drawer, body.arcade-locked .nav-backdrop,
body.arcade-locked footer, body.arcade-locked #particles { display: none; }
/* and the stage escapes <main>'s stacking context by out-ranking siblings */
body.arcade-locked main { position: relative; z-index: 500; }
.arcade-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(2px);
  padding: 24px;
}
.arcade-overlay.playing { display: none; }
.arcade-overlay .g-title { font-family: var(--font-display); font-size: 26px; font-weight: 900; letter-spacing: .04em; }
.arcade-overlay .g-how { font-size: 13.5px; color: var(--ink-2); max-width: 380px; }
.arcade-overlay .g-score { font-family: var(--font-display); font-size: 34px; color: var(--accent); }
.arcade-overlay .g-note { font-size: 12.5px; color: var(--ink-3); }
.arcade-overlay .g-newbest { color: var(--accent-2); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; }
.arcade-boards { display: grid; gap: 14px; }
.board { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.board h4 { font-family: var(--font-display); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink-2); }
.board h4.live { color: var(--accent); }
.board ol { list-style: none; }
.board li { display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-2); padding: 2.5px 0; }
.board li .rank { color: var(--ink-3); width: 16px; font-variant-numeric: tabular-nums; }
.board li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li .sc { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.board li.me .nm { color: var(--accent); font-weight: 600; }
.board .none { font-size: 12px; color: var(--ink-3); }
@media (max-width: 860px) { .arcade-grid { grid-template-columns: 1fr; } }

footer { padding: 64px 0 48px; text-align: center; color: var(--ink-3); font-size: 13px; position: relative; z-index: 1; }
footer .sig { font-family: var(--font-display); letter-spacing: .18em; text-transform: uppercase; font-size: 12px; margin-top: 6px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-cover { max-width: 230px; }
  .meeting-grid, .tbr-grid { grid-template-columns: 1fr; }
}
/* below ~830px even the slim full-width line can't fit nine links — the
   burger drawer takes over (true phone/tablet territory) */
@media (max-width: 830px) {
  .nav-links { display: none; }
  #navBurger { display: block; }
  .nav { padding-bottom: 12px; }
}

/* small phones: let the header wrap instead of stretching the page */
@media (max-width: 560px) {
  /* one-line header: logo · ♪ · ✦ · ☰ — sign in/out lives in the drawer */
  .nav { padding: 10px 14px; }
  .nav-top { flex-wrap: nowrap; gap: 8px; }
  .logo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #authLink { display: none; }
  #themeToggle .tt-label { display: none; }
  #themeToggle, #musicToggle { padding: 6px 10px; font-size: 13px; flex: none; }
  .wrap { padding: 0 16px; }
}

/* Phones: the archive becomes a cover-and-title grid — tap a book for the
   full preview modal (which carries the rating buttons). */
@media (max-width: 640px) {
  .archive-grid { grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
  .book-card { display: block; padding: 0; background: none; border: none; box-shadow: none; }
  .book-card .cover { width: 100%; height: auto; aspect-ratio: 2 / 3; }
  .book-card .bk-main { min-width: 0; }
  .book-card h3 { font-size: 12px; line-height: 1.3; margin: 7px 0 0; }
  .book-card .a, .book-card .meta, .book-card .b, .book-card .food,
  .book-card .buy-links, .book-card .card-actions { display: none; }
  .book-card .score-badge, .book-card .dnf-badge {
    top: 4px; right: 4px; /* tucked onto the cover itself */
    padding: 3px 8px; font-size: 12px;
    background: rgba(10, 8, 6, .85); backdrop-filter: blur(3px);
  }
  .book-card .rank-badge { top: 2px; left: 3px; font-size: 19px; }
  .book-card .score-badge span { font-size: 11px; }
}
/* (burger visibility now lives with the nav-links hide rule at 830px) */

/* ══════════ RSVP + dish claims ══════════ */
.rsvp-card { margin-top: 18px; }
.rsvp-head { font-weight: 700; font-size: 15px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rsvp-counts { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.rsvp-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rsvp-dish { margin: 0 0 10px; }
.rsvp-list { font-size: 13.5px; line-height: 1.9; }
.rsvp-list.out { color: var(--ink-3); }
.rsvp-list b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.rsvp-name { display: inline-block; background: var(--card-2, rgba(255,255,255,.05)); border: 1px solid var(--line); border-radius: 20px; padding: 2px 11px; margin: 2px 4px 2px 0; }
.rsvp-name small { color: var(--ink-3); }
.rsvp-login { font-size: 13px; color: var(--ink-3); }

/* ══════════ Rating Night + the reveal ══════════ */
.rn-book { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.rn-cover { width: 54px; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.rn-title { font-weight: 700; font-size: 17px; }
.rn-count { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.rn-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 8px; }
.rn-scores { display: flex; gap: 6px; flex-wrap: wrap; }
.rn-num { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; transition: all .15s; }
.rn-num:hover { border-color: var(--accent); transform: translateY(-1px); }
.rn-num.sel { background: var(--accent); color: var(--accent-ink, #14100a); border-color: var(--accent); }
.rn-pred-note { font-size: 12px; color: var(--ink-3); align-self: center; }
.rn-admin { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.rn-launch p { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.rn-results { margin-top: 6px; }
.rn-avg { font-size: 44px; font-weight: 800; line-height: 1; margin: 4px 0 14px; }
.rn-avg small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 6px; }
.rn-verdicts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rn-verdict { background: var(--card-2, rgba(255,255,255,.05)); border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; font-size: 13px; }
.rn-verdict b { margin-right: 5px; }
.rn-champ { font-size: 14px; margin-top: 4px; }
.reveal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(6, 6, 14, .96); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.reveal-overlay[hidden] { display: none; }
.rvl-stage { text-align: center; padding: 24px; animation: rvlIn .35s ease; max-width: 90vw; }
@keyframes rvlIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.rvl-kicker { font-size: 14px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 18px; }
.rvl-score { font-size: min(38vw, 190px); font-weight: 900; line-height: 1; }
.rvl-score.rvl-avg { color: var(--accent); }
.rvl-name { font-size: 22px; margin-top: 14px; }
.rvl-big { font-size: min(9vw, 44px); font-weight: 800; line-height: 1.2; }
.rvl-hint { font-size: 12px; color: var(--ink-3); margin-top: 26px; letter-spacing: .08em; text-transform: uppercase; }

/* ══════════ Tome seasons: three boards + the hall ══════════ */
.ts-grid-3 { grid-template-columns: 1fr 1.1fr 1.4fr; }
.ts-lead .n { font-weight: 700; }
.ts-note { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.5; }
.ts-hall { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
@media (max-width: 720px) { .ts-grid-3 { grid-template-columns: 1fr; } }

/* ══════════ Achievements ══════════ */
.ach { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 6px; }
.ach-chip { position: relative; font-size: 15px; line-height: 1; padding: 3px 5px; border-radius: 6px; cursor: help; background: var(--card-2, rgba(255,255,255,.05)); border: 1px solid var(--line); }
.ach-chip:hover::after, .ach-chip:focus::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
  background: #14121e; color: #efeafc; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: 12px; line-height: 1.45; width: max-content; max-width: 220px;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); pointer-events: none;
}

/* ══════════ Leaderboard prophet line ══════════ */
.lb-prophet { font-size: 13px; color: var(--ink-2); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ══════════ Private Notes: stacks + swipe reader ══════════ */
.pnote-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin-bottom: 22px; }
.pnote-form select, .pnote-form textarea {
  background: var(--card-2, rgba(255,255,255,.05)); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); padding: 9px 11px; font: inherit; font-size: 14px;
}
.pnote-form button { align-self: flex-start; }
.pnote-stacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.pnote-stack {
  position: relative; display: flex; gap: 12px; align-items: center; text-align: left;
  background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; cursor: pointer; color: var(--ink); font: inherit; transition: transform .15s;
}
/* the "stack" illusion: two more cards peeking out beneath */
.pnote-stack::before, .pnote-stack::after {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card, rgba(255,255,255,.03)); z-index: -1; transition: transform .15s;
}
.pnote-stack::before { transform: rotate(-2deg) translateY(4px); }
.pnote-stack::after  { transform: rotate(1.5deg) translateY(7px); z-index: -2; }
.pnote-stack:hover { transform: translateY(-2px); }
.pnote-stack:hover::before { transform: rotate(-3deg) translateY(6px); }
.pnote-stack:hover::after  { transform: rotate(2.5deg) translateY(10px); }
.pnote-stack img { width: 44px; border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.pn-nocover { width: 44px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--card-2, rgba(255,255,255,.06)); border-radius: 4px; }
.pn-title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.pn-count { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

.pnote-viewer { position: fixed; inset: 0; z-index: 310; background: rgba(6,6,14,.96); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; padding: 18px; }
.pnote-viewer[hidden] { display: none; }
.pn-head { display: flex; align-items: center; gap: 14px; width: min(560px, 94vw); padding: 4px 2px 14px; }
.pn-head-title { font-weight: 700; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-head-count { font-size: 13px; color: var(--ink-3); }
.pn-close { font-size: 16px; }
.pn-deck { position: relative; width: min(560px, 94vw); flex: 1; max-height: 62vh; }
.pn-card {
  position: absolute; inset: 0; background: #17141f; border: 1px solid var(--line); border-radius: 16px;
  padding: 22px; display: flex; flex-direction: column; box-shadow: 0 14px 40px rgba(0,0,0,.5);
  touch-action: pan-y; user-select: none;
}
.pn-card.top { cursor: grab; }
.pn-card.top:active { cursor: grabbing; }
.pn-card.ghost { pointer-events: none; }
.pn-card.ghost.g1 { transform: scale(.955) translateY(14px); opacity: .55; }
.pn-card.ghost.g2 { transform: scale(.91) translateY(27px); opacity: .3; }
.pn-card-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; font-size: 16.5px; line-height: 1.65; white-space: pre-wrap; font-family: var(--font-serif, inherit); }
.pn-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-3); padding-top: 12px; border-top: 1px solid var(--line); margin-top: 12px; }
.pn-tools { display: flex; gap: 8px; }
.pn-nav { display: flex; align-items: center; gap: 16px; padding: 16px 0 4px; }
.pn-nav .btn { min-width: 46px; font-size: 17px; }
.pn-hint { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.pn-edit { width: 100%; height: 100%; min-height: 160px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 10px; font: inherit; font-size: 15px; }
.pn-edit-btns { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pn-save-status { display: block; min-height: 16px; margin-top: 8px; font-size: 12px; color: var(--ink-3); font-style: italic; }
.pn-tools [data-pnedit] { min-width: 26px; } /* holds its width steady when the glyph swaps ✏️ → ✅ */
@media (max-width: 640px) {
  .pn-deck { max-height: 58vh; }
  .pn-card { padding: 16px; }
  .pnote-stacks { grid-template-columns: 1fr 1fr; }
}

/* new-note button under the private-notes deck */
.pn-new { margin-top: 2px; }

/* Roll Call, folded: one line once your dish is claimed */
.rsvp-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; color: var(--ink); font: inherit; font-size: 14px;
  cursor: pointer; padding: 2px 0; text-align: left; flex-wrap: wrap;
}
.rsvp-summary b { color: var(--accent); }
.rsvp-summary:hover .rsvp-counts { color: var(--ink-2); }

/* ══════════ Scrollspy: the gliding ink ══════════ */
.nav-links { position: relative; }
.nav-ink {
  position: absolute; bottom: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent) 75%, transparent);
  border-radius: 2px; box-shadow: 0 0 10px var(--accent);
  transition: left .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1), opacity .3s;
}
.nav-links a.active { color: var(--accent); }
.nav-drawer a.active { color: var(--accent); background: var(--surface-2); }

/* ══════════ member links + banner steadiness + modal notes button ══════════ */
.member-link {
  color: inherit; cursor: pointer;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
}
.member-link:hover { border-bottom-style: solid; color: var(--accent); }
.roster-card.flash { animation: rcFlash 1.6s ease; }
@keyframes rcFlash {
  0%, 55% { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent); }
  100% { box-shadow: none; }
}
/* the banner holds exactly two quote-lines of height, so rotating quotes of
   different lengths never nudge the page below */
.nb-quote { height: 3em; line-height: 1.5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nb-inner {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 900px;
}
.bm-pnotes { margin: 10px 0 2px; }

/* the Tome behind the velvet rope (members only) */
.tome-locked { text-align: center; padding: 36px 20px; max-width: 420px; margin: 0 auto; }
.tome-locked .tl-icon { font-size: 34px; margin-bottom: 10px; }
.tome-locked .tl-text { font-size: 14.5px; color: var(--ink-2); margin-bottom: 16px; line-height: 1.6; }

/* ══════════ The Study Guide ══════════ */
.gd-where { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.gd-where label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.gd-where select {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; max-width: 100%;
}
.gd-where select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 1px; }
.gd-secs { display: grid; gap: 18px; max-width: 760px; }
.gd-sec { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--surface); }
.gd-h { font-weight: 600; font-size: 16px; color: var(--ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gd-at { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 500; }
.gd-p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 10px 0 0; }
.gd-list { margin: 10px 0 0; padding-left: 20px; }
.gd-list li { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-bottom: 6px; }
/* a question for the table — the thing you actually meet to argue about */
.gd-q {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 8px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
/* the glossary, folded away until wanted */
.gd-gloss { border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; margin-bottom: 22px; background: var(--surface); max-width: 760px; }
.gd-gloss > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); list-style: none; }
.gd-gloss > summary::-webkit-details-marker { display: none; }
.gd-gloss > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--ink-3); transition: transform .15s ease; }
.gd-gloss[open] > summary::before { transform: rotate(90deg); }
.gd-gloss-n { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.gd-gloss-list { margin: 14px 0 0; display: grid; gap: 10px; }
.gd-gloss-list dt { font-weight: 600; font-size: 13.5px; color: var(--accent); }
.gd-gloss-list dd { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.gd-gloss-more { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); font-style: italic; }

/* answering a question: the box, and the note it becomes */
.gd-done {
  margin-left: 8px; font-size: 11px; font-weight: 500; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em; color: var(--accent);
}
.gd-ans { margin: 8px 0 0 17px; }
.gd-ans textarea {
  width: 100%; font: inherit; font-size: 14px; line-height: 1.55;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  resize: vertical; min-height: 62px;
}
.gd-ans textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.gd-ans-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.gd-ans-msg { font-size: 12.5px; color: var(--ink-3); }

/* not yet reached: heading only, and the body was never sent */
.gd-sec.gd-locked { background: transparent; border-style: dashed; opacity: .72; }
.gd-locked .gd-h { color: var(--ink-3); font-weight: 500; }
.gd-when { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }

/* ══════════ The Crossword ══════════ */
/* the shelf picker: every puzzle the club has ever had, newest first */
.xw-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.xw-pick label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.xw-pick select {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; max-width: 100%;
}
.xw-pick select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 1px; }
/* an older puzzle, opened from the shelf — still a live game */
.xw-shelved {
  display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.xw-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: 26px; align-items: start; }
/* min-width:0 everywhere down the chain, or the letter inputs refuse to
   shrink and shove the grid off the right edge of phones */
.xw-board-wrap, .xw-clues { min-width: 0; }
.xw-grid { display: grid; gap: 2px; background: transparent; width: 100%; }
.xw-cell input { min-width: 0; }
.xw-cell {
  position: relative; aspect-ratio: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: 3px;
}
.xw-cell input {
  width: 100%; height: 100%; border: none; background: transparent; color: var(--ink);
  text-align: center; font: 700 clamp(12px, 2.6vw, 18px) 'Inter', sans-serif; text-transform: uppercase;
  border-radius: 3px; padding: 0; caret-color: var(--accent);
}
.xw-cell input:focus { outline: none; }
.xw-cell.word { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.xw-cell.on { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.xw-cell.wrong input { color: #e5484d; text-decoration: line-through; }
.xw-num { position: absolute; top: 1px; left: 3px; font-size: 10px; color: var(--ink-3); pointer-events: none; }
.xw-block { aspect-ratio: 1; }
.xw-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
/* right margin stays clear so a thumb can grab bare background to scroll the page */
/* the crossword owns a whole page now, so the clue lists simply flow — no
   fixed-height inner scroller truncating clues or hijacking the wheel */
.xw-clues { display: grid; gap: 18px; align-content: start; }
.xw-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 6px; }
.xw-clue { font-size: 13.5px; line-height: 1.5; padding: 4px 8px; border-radius: 6px; cursor: pointer; color: var(--ink-2); }
.xw-clue b { margin-right: 5px; color: var(--ink-3); }
.xw-clue:hover { background: var(--surface-2); }
.xw-clue.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
/* the active clue, pinned to the top of the phone screen while typing */
#xwClueBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400; display: none;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--accent);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
#xwClueBar b { color: var(--accent); margin-right: 6px; }
.xw-clues { position: relative; scroll-behavior: auto; }
/* the unmistakable admin-only banner on an unpublished puzzle */
.admin-banner {
  display: block; margin: 2px 0 10px; padding: 10px 14px; border-radius: 10px;
  border: 1px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--ink); font-size: 13.5px; line-height: 1.55;
}
.admin-banner .ab-tag {
  display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px;
  background: var(--accent); color: var(--bg);
  font-weight: 800; font-size: 12px; letter-spacing: .08em;
}
/* the race: who solved it, in order, with their golf card */
.xw-mine {
  margin-top: 10px; font-size: 13.5px; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-radius: 8px; padding: 8px 12px;
}
.xw-podium { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; }
.xw-pod-row {
  display: flex; align-items: baseline; gap: 10px; padding: 7px 10px;
  border-radius: 8px; font-size: 14px;
}
.xw-pod-row:nth-child(even) { background: var(--surface-2); }
.xw-pod-row.me { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.xw-pod-medal { min-width: 26px; text-align: center; }
.xw-pod-name { font-weight: 600; }
.xw-pod-stats { margin-left: auto; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.xw-pod-note { margin-top: 6px; padding-left: 10px; }
@media (max-width: 800px) {
  .xw-pod-stats { white-space: normal; text-align: right; }
  .xw-layout { grid-template-columns: 1fr; }
  /* the grid bleeds to the screen edges on its own page — every extra pixel
     goes to the cells, which is what thumbs need */
  .xw-board-wrap { margin: 0 -16px; }
  .xw-num { font-size: 9px; top: 0; left: 2px; }
  .xw-grid { gap: 1.5px; }
  .xw-actions, .xw-mine { margin-left: 16px; margin-right: 16px; }
  /* 16px font = iOS never force-zooms on focus, so no zoom-in-out lurching */
  .xw-cell input { font-size: 16px; }
  #xwClueBar.on { display: block; }
}

/* ═══════════ UX review pass (08-12): theme menu, archive tools, wide-screen balance ═══════════ */

/* theme picker — a named menu with the current mood marked, not a blind cycle */
.theme-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 500;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5); padding: 6px; min-width: 170px;
}
.nav-top { position: relative; }
.theme-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; color: var(--ink-2); cursor: pointer;
  font: 500 14px 'Inter', sans-serif; padding: 10px 12px; border-radius: 8px; text-align: left;
}
.theme-menu button:hover { background: var(--surface-2); color: var(--ink); }
.theme-menu button[aria-checked="true"] { color: var(--accent); font-weight: 600; }
.theme-menu .tm-check { margin-left: auto; }
.tm-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid rgba(255,255,255,.25); }
.tm-dot[data-tm="fantasy"] { background: #e8b04b; }
.tm-dot[data-tm="weird"]   { background: #b78aff; }
.tm-dot[data-tm="scifi"]   { background: #5ad7ff; }
.tm-dot[data-tm="fourth"]  { background: #d6c983; }
/* takeover leaves one mood: the button stops pretending to be a menu */
#themeToggle:disabled { cursor: default; opacity: 1; }
#themeToggle:disabled:hover { box-shadow: none; }

/* the rotation, folded into Nominations as a compact strip */
.rot-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: -14px 0 20px; font-size: 13.5px; color: var(--ink-2);
}
.rot-strip .rot-label { color: var(--ink-3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.rot-chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap;
}
.rot-chip.next { border-color: var(--accent); color: var(--ink); }
.rot-chip.next em { color: var(--accent); font-style: normal; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-left: 4px; }
.rot-strip .rot-hint { color: var(--ink-3); font-style: italic; }

/* archive tools — search, filters, sort */
.arch-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 16px; margin-bottom: 22px;
}
.arch-bar input[type="search"], .arch-bar select {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
  color: var(--ink); font: 500 13.5px 'Inter', sans-serif; padding: 9px 12px;
}
.arch-bar input[type="search"] { flex: 1 1 200px; min-width: 160px; }
.arch-bar select { flex: 0 1 auto; }
.arch-count { color: var(--ink-3); font-size: 12.5px; margin-left: auto; }

/* roster empty-state nudges */
.rb-cta { margin-top: 6px; }
.rb-empty { color: var(--ink-3); font-style: italic; }
.pf-vis { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--ink-2); margin: 6px 0 10px; cursor: pointer; }

/* ── wide screens: no more half-empty rows ── */
/* narrow, single-purpose sections read better capped and centered */
#feature .wrap, #rating .wrap { max-width: 780px; }
#feature #featureForm { max-width: none; }
#pnotes .wrap { max-width: 980px; }
/* poll cards center as a group instead of hugging the left rail */
.polls-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 460px)); justify-content: center; }
.awards-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); justify-content: center; }
/* private-note stacks flow into columns on wide screens */
.pnote-stacks { justify-content: center; }
/* Next Gathering: pin Add to Calendar to the card's floor — no void below it */
.meeting-grid > .card:first-child { display: flex; flex-direction: column; }
.meeting-grid > .card:first-child #meetingDetails { flex: 1; }
/* the tome page breathes better slightly narrowed */
.page-tome #tome .wrap { max-width: 980px; }
.page-crossword #puzzle .wrap { max-width: 1020px; }

/* ═══════ the gateway: illustrated doors to the club's other pages ═══════ */
.gateway-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: 6px;
}
.gw-card {
  display: flex; align-items: center; gap: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; color: var(--ink); position: relative; overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.gw-card::before { /* a soft glow tucked behind the artwork */
  content: ""; position: absolute; left: -30px; top: 50%; transform: translateY(-50%);
  width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
}
.gw-card:hover, .gw-card:focus-visible {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), var(--glow);
}
.gw-art { flex: none; width: 120px; position: relative; }
.gw-art svg { display: block; width: 120px; height: 84px; }
.gw-text { min-width: 0; }
.gw-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: .02em; margin-bottom: 5px; }
.gw-sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; font-family: var(--font-quote); font-size: 15px; }
.gw-arrow {
  margin-left: auto; flex: none; font-size: 22px; color: var(--accent);
  transition: transform .18s; opacity: .8;
}
.gw-card:hover .gw-arrow { transform: translateX(5px); opacity: 1; }
.gw-lock {
  display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 8px; border-radius: 6px;
  background: var(--accent); color: var(--bg);
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 11.5px; letter-spacing: .06em;
}
.gw-preview { border-style: dashed; }
@media (max-width: 760px) {
  .gateway-grid { grid-template-columns: 1fr; gap: 14px; }
  .gw-card { padding: 16px 18px; gap: 14px; }
  .gw-art, .gw-art svg { width: 92px; }
  .gw-art svg { height: 64px; }
  .gw-title { font-size: 17px; }
}

/* the club name is the way home */
.logo .logo-link { color: inherit; text-decoration: none; }
.logo .logo-link:hover b { text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }