@import url("/tokens.css");
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; background: var(--ground); scroll-behavior: smooth; }
body {
  font-family: "Source Serif 4", Georgia, serif;
  background-color: var(--ground);
  background-image:
    radial-gradient(ellipse 900px 650px at 10% 0%, rgba(var(--copper-rgb), 0.035), transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 35%, rgba(var(--navy-rgb), 0.028), transparent 60%),
    radial-gradient(ellipse 700px 550px at 25% 100%, rgba(var(--amber-rgb), 0.022), transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 20px;
}

/* READING PROGRESS */
.reading-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--blue); width: 0%; z-index: 100; transition: width 0.1s linear; }

/* NEW EDITION BANNER */
.new-edition-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--wash);
  border-bottom: 1px solid var(--copper);
  color: var(--copper);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  text-align: center;
}
.new-edition-banner.show { display: flex; }
.new-edition-btn {
  background: none;
  border: 1px solid var(--copper);
  color: var(--copper);
  border-radius: 20px;
  padding: 3px 12px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.new-edition-btn:hover { background: rgba(var(--copper-rgb), 0.12); }
.new-edition-close {
  background: none;
  border: none;
  color: var(--copper);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.75;
}
.new-edition-close:hover { opacity: 1; }

/* ADD TO HOME SCREEN STAMP - a charming little corner detail, not a
   tech call-to-action, so it's styled like a vintage wax seal or
   rubber stamp: a circle with the text curved around the top arc. */
.install-stamp-wrap { position: absolute; top: 6px; right: 6px; }
.install-stamp {
  display: none;
  position: relative;
  width: 80px;
  height: 80px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transform: rotate(-5deg);
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.install-stamp:hover { transform: rotate(-5deg) scale(1.06); }
.install-stamp-svg { width: 100%; height: 100%; filter: drop-shadow(1px 2px 2px rgba(var(--ink-rgb), 0.2)); }
.install-stamp-logo-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ios-install-tip-stamp {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--ink);
  color: var(--ground);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 5;
}
/* Add to Home Screen is a mobile concept - keep this off desktop
   entirely regardless of what the install-prompt logic decides. */
@media (min-width: 481px) {
  .install-stamp-wrap { display: none; }
}


/* SECTION MARKERS */
.section-marker { margin: 64px 0 28px; scroll-margin-top: 56px; }
.section-marker:first-of-type { margin-top: 14px; }
.section-marker-top { padding-top: 16px; }
.section-label { display: inline; font-weight: 400; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); }
.section-accent { height: 2px; width: 56px; margin-top: 12px; border-radius: 2px; }

/* News gets a more dramatic break than the other section markers - a
   thicker top rule and a wider, taller accent bar - since it's the
   lead into the whole edition. */
.section-marker-dramatic .section-marker-top { padding-top: 22px; border-top: 3px solid var(--ink); }
.section-marker-dramatic .section-label { font-size: 13px; letter-spacing: 0.3em; }
.section-marker-dramatic .section-accent { height: 4px; width: 96px; margin-top: 14px; }

/* SECTION SHARE */
.section-share-row { text-align: right; margin-top: 10px; }
.section-share {
  background: none;
  border: none;
  padding: 0;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(var(--copper-rgb), 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.section-share:hover { color: var(--copper); }

/* DID YOU KNOW */
.dyk-card { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0; margin: 8px 0 0; text-align: center; }
.dyk-fact { font-family: "Playfair Display", serif; font-style: italic; font-weight: 500; font-size: clamp(20px, 5vw, 27px); line-height: 1.42; color: var(--ink); word-break: break-word; }

/* DESTINATION GRID — deliberately understated: a compact app-dock
   style nav aid, not a feature in its own right. */
.dest-grid-label { font-family: "DM Mono", monospace; font-variant-caps: small-caps; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); text-align: center; margin: 18px 0 8px; }
.dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dest-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; text-align: center; text-decoration: none;
  background: var(--ground); border: 1px solid rgba(var(--copper-rgb), 0.3); border-radius: 6px;
  padding: 10px 6px; cursor: pointer;
  transition: border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.dest-tile:hover, .dest-tile:active, .dest-tile:focus-visible { border-color: var(--copper); }
.dest-tile-icon { font-size: 20px; line-height: 1; margin-bottom: 4px; }
.dest-tile-label {
  font-family: "DM Mono", monospace; font-variant-caps: small-caps; font-weight: 600;
  font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); line-height: 1.3;
}

/* ARGUMENT TEASER */
.argument-teaser-card {
  display: block; text-decoration: none;
  background: var(--ground); border: 1px solid var(--rule); border-radius: 4px;
  padding: 20px 18px; margin-top: 22px; cursor: pointer;
  transition: border-color 0.15s ease; -webkit-tap-highlight-color: transparent;
}
.argument-teaser-card:hover, .argument-teaser-card:active, .argument-teaser-card:focus-visible { border-color: var(--copper); }
.argument-teaser-label {
  font-family: "DM Mono", monospace; font-variant-caps: small-caps; font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper);
  margin-bottom: 10px;
}
.argument-teaser-question { font-family: "Playfair Display", serif; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.argument-teaser-cta {
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--copper); margin-top: 12px;
}

/* WORD OF THE DAY */
.word-card { border-top: 3px solid var(--purple); padding: 6px 0 0; }
.word-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.word-itself { font-family: "Playfair Display", serif; font-style: italic; font-size: clamp(42px, 10vw, 58px); font-weight: 700; letter-spacing: -1px; line-height: 0.95; color: var(--ink); }
.word-pron { font-family: "DM Mono", monospace; font-size: 12px; color: var(--grey); }
.word-pos { font-family: "DM Mono", monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--purple); border: 1px solid var(--purple); padding: 2px 7px; border-radius: 2px; }
.word-origin { font-size: 13px; color: var(--grey); font-style: italic; margin: 8px 0 14px; }
.word-def { font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 18px 4px; padding-left: 18px; border-left: 2px solid var(--rule); }
.word-challenge { background: var(--wash); border-left: 3px solid var(--copper); padding: 14px 18px; font-size: 13px; color: var(--ink-brown); line-height: 1.6; border-radius: 0 4px 4px 0; }
.word-challenge strong { font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); display: block; margin-bottom: 5px; }

/* YOUR STARS */
.horoscope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.horoscope-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
  padding: 16px 8px; cursor: pointer; font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.horoscope-tile:hover { background: var(--card-soft); border-color: var(--plum); transform: translateY(-2px); }
.horoscope-symbol { font-family: "Playfair Display", serif; font-size: 28px; color: var(--ink); line-height: 1; }
.horoscope-name { font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mid); }

.horoscope-overlay {
  position: fixed; inset: 0; background: rgba(var(--ink-rgb), 0.55);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.horoscope-overlay.open { opacity: 1; pointer-events: auto; }
.horoscope-modal {
  /* position: fixed (not absolute/relative) so centring is always
     relative to the viewport itself, never to the page's content
     height or an oversized ancestor caused by unbroken long words
     elsewhere on the page. */
  position: fixed; top: 50%; left: 50%;
  background: var(--ground); border-radius: 8px;
  padding: 36px 28px 28px; max-width: 340px; width: calc(100% - 40px);
  text-align: center; box-shadow: 0 20px 50px rgba(var(--black-rgb), 0.25);
  word-break: break-word;
  transform: translate(-50%, -50%) scale(0.94);
  transition: transform 0.25s ease;
}
.horoscope-overlay.open .horoscope-modal { transform: translate(-50%, -50%) scale(1); }
.horoscope-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--grey-faint); cursor: pointer; padding: 6px;
  -webkit-tap-highlight-color: transparent;
}
.horoscope-close:hover { color: var(--ink); }
.horoscope-modal-symbol { font-family: "Playfair Display", serif; font-size: 56px; color: var(--plum); line-height: 1; margin-bottom: 8px; }
.horoscope-modal-name { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.horoscope-modal-text { font-family: "Playfair Display", serif; font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }

/* NEWS STORIES */
.story { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.story:last-of-type { border-bottom: none; padding-bottom: 6px; }
/* The lead story gets a full-width rule in its category colour above
   it (border-top) and noticeably more breathing room than the tighter,
   compact stories that follow it - it's the magazine-style hero. */
.story.lead { border-top: 3px solid var(--cat-color, var(--ink)); padding: 34px 0 44px; }
.story-eyebrow { margin-bottom: 12px; }
.story.lead .story-eyebrow { margin-bottom: 18px; }
.story-cat {
  display: inline-block;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cat-color, var(--ink-mid));
  background: color-mix(in srgb, var(--cat-color, var(--ink-mid)) 12%, var(--white));
  padding: 4px 10px;
  border-radius: 3px;
  line-height: 1.3;
}
/* The lead's category label reads as a kicker - larger, no pill
   background, and a coloured left border - so it's unmistakably more
   prominent than the small tags on the stories below it. */
.story.lead .story-cat {
  font-size: 12px;
  letter-spacing: 0.14em;
  background: none;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--cat-color, var(--ink-mid));
  border-radius: 0;
  line-height: 1.4;
}
.story-desk {
  display: block;
  margin-top: 4px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-style: italic;
  color: var(--grey);
}
.story h2 {
  font-family: "Playfair Display", serif; font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.22; margin-bottom: 14px; color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: left 100%; background-size: 0% 2px; transition: background-size 0.35s ease;
}
.story h2:hover { background-size: 100% 2px; }
.story.lead h2 { font-size: 38px; letter-spacing: -0.6px; margin-bottom: 18px; }
.story h2 em { font-style: italic; font-weight: 500; }
.story p { font-size: 18px; color: var(--ink-soft); line-height: 1.9; font-weight: 300; }
.story p + p { margin-top: 13px; }
/* Drop cap only on the featured story's first paragraph - on the
   compact stories below it, a giant dropped initial would fight with
   the "just one sentence visible" treatment rather than complement it. */
.story.lead > p:first-of-type::first-letter {
  font-family: "Playfair Display", serif;
  font-size: 62px;
  font-weight: 700;
  float: left;
  line-height: 0.78;
  margin-top: -2px;
  padding: 0 8px 0 0;
  color: var(--cat-color, var(--ink));
}
.story-more { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.story-more.expanded { max-height: 5000px; padding-bottom: 8px; }
.read-more-btn { display: inline-block; margin-top: 10px; background: none; border: none; padding: 0; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease; }
.read-more-btn:hover { color: var(--blue-deep); text-decoration: underline; }

/* Stories beyond the first 5 start collapsed via a max-height
   animation. Padding/border are zeroed while collapsed so no stray
   hairline shows before they're expanded; border-bottom is restored
   on expand except for the very last story, matching
   .story:last-of-type's "no trailing rule" behaviour above. */
.more-front-stories-toggle-row { text-align: center; border-top: 1px solid var(--rule); padding: 20px 0 4px; }
.more-front-stories-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  background: none; border: none; font-family: "DM Mono", monospace; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--copper);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease;
}
.more-front-stories-btn:hover { color: var(--copper-hover); text-decoration: underline; }
.story.hidden-front-story { max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; border-bottom: none; transition: max-height 0.4s ease; }
.story.hidden-front-story.expanded { max-height: 20000px; padding-top: 22px; padding-bottom: 22px; }
.story.hidden-front-story.expanded:not(:last-of-type) { border-bottom: 1px solid var(--rule); }

.more-stories-row { text-align: center; padding: 28px 0 8px; }
.more-stories-link {
  display: inline-block; font-family: "DM Mono", monospace; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper);
  text-decoration: none; border: 1px solid var(--copper); border-radius: 20px;
  padding: 10px 22px; min-height: 44px; line-height: 24px;
  transition: background 0.15s ease, color 0.15s ease;
}
.more-stories-link:hover { background: var(--copper); color: var(--ground); }

/* STORY REACTIONS */
.reaction-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.reaction-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: "DM Mono", monospace; font-size: 12px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 20px;
  padding: 4px 10px; color: var(--ink-mid); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.reaction-btn:hover { background: var(--card-soft); border-color: var(--copper); }
.reaction-btn.selected { background: rgba(var(--copper-rgb), 0.14); border-color: var(--copper); color: var(--copper); }
.reaction-emoji { font-size: 13px; line-height: 1; }
.reaction-count { font-weight: 500; }

/* ELEMENT OF THE DAY */
/* No card box - sits directly on the page's own cream background like
   a story card, with a small floated periodic-table tile and the
   Learn more/less toggle wrapping beside it. */
.element-card {
  background: none; padding: 0;
}
.element-card::after { content: ""; display: table; clear: both; }
.element-tile {
  float: left; width: 70px; height: 70px; margin: 1px 14px 6px 0;
  background: var(--ground); border: 1.5px solid var(--copper); border-radius: 4px;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.element-tile-atomic {
  position: absolute; top: 4px; left: 5px;
  font-family: "DM Mono", monospace; font-size: 9px; color: var(--grey);
}
.element-tile-symbol {
  font-family: "Playfair Display", serif; font-weight: 700; font-size: 32px;
  color: var(--copper); line-height: 1;
}
.element-tile-name {
  position: absolute; bottom: 4px; left: 2px; right: 2px; text-align: center;
  font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--olive); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.element-name { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); font-weight: 700; }
.element-atomic { font-family: "DM Mono", monospace; font-size: 11px; color: var(--grey); margin-top: 2px; }
.element-tagline { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-top: 6px; }
.element-expand-btn {
  display: inline-block; margin-top: 6px; background: none; border: none; padding: 0; cursor: pointer;
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--copper); font-weight: 600;
}
.element-expand-btn:hover { text-decoration: underline; }
.element-body-wrap { display: none; margin-top: 10px; clear: left; }
.element-body-wrap.expanded { display: block; }
.element-body { font-family: "Source Serif 4", Georgia, serif; font-size: 16px; line-height: 1.85; color: var(--ink-soft); }

/* THE NUMBER */
.number-card { border-top: 3px solid var(--amber); padding: 6px 0 0; }
.number-display { font-family: "Playfair Display", serif; font-size: clamp(56px, 15vw, 84px); font-weight: 700; letter-spacing: -2px; line-height: 0.9; color: var(--ink); }
.number-context { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.05em; color: var(--olive); text-transform: uppercase; margin: 12px 0 16px; line-height: 1.5; }
.number-significance { font-size: 16px; line-height: 1.75; color: var(--ink-soft); }

/* ON THIS DAY */
.otd-card { border-top: 3px solid var(--navy); padding: 6px 0 0; }
.otd-year { font-family: "Playfair Display", serif; font-style: italic; font-size: clamp(40px, 10vw, 54px); font-weight: 700; color: var(--navy); line-height: 0.95; margin-bottom: 10px; }
.otd-event { font-family: "Playfair Display", serif; font-size: clamp(19px, 3.6vw, 22px); font-weight: 700; line-height: 1.3; color: var(--ink); margin-bottom: 10px; }
.otd-detail { font-size: 16px; line-height: 1.75; color: var(--ink-soft); }

/* SHORT HISTORY */
.short-history-card { border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; }
.short-history-topic { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; }
.short-history-headline { font-family: "Playfair Display", serif; font-size: clamp(19px, 3.6vw, 22px); font-weight: 700; line-height: 1.3; color: var(--ink); margin-bottom: 10px; }
.short-history-body { font-family: "Source Serif 4", Georgia, serif; font-size: 16px; line-height: 1.75; color: var(--ink-soft); }

/* QUIZ */
.quiz-intro { font-size: 14px; color: var(--grey); font-style: italic; margin-bottom: 20px; }
.quiz-item { margin-bottom: 16px; border-left: 3px solid var(--blue); background: var(--card); border-radius: 0 6px 6px 0; overflow: hidden; }
.quiz-question { padding: 18px 20px 14px; font-size: 16px; line-height: 1.55; color: var(--ink); display: flex; gap: 12px; }
.quiz-n { font-family: "DM Mono", monospace; font-size: 11px; color: var(--blue); font-weight: 500; flex-shrink: 0; padding-top: 3px; }
.quiz-answer-block { display: flex; flex-direction: column; cursor: pointer; -webkit-tap-highlight-color: transparent; background: none; border: none; margin: 0; padding: 0; width: 100%; font: inherit; text-align: inherit; color: inherit; }
.quiz-flip-hint { order: -1; padding: 0 20px 12px; font-family: "Playfair Display", serif; font-style: italic; font-size: 13px; color: var(--grey-quiet); text-align: left; transition: opacity 0.25s ease; }
.quiz-answer-block.flipped .quiz-flip-hint { opacity: 0; height: 0; padding-bottom: 0; overflow: hidden; }
.quiz-answer-wrap { padding: 18px 20px; background: var(--blue-tint); transform: rotate(180deg); transition: transform 0.4s ease; }
.quiz-answer-block.flipped .quiz-answer-wrap { transform: rotate(0deg); }
.quiz-answer-text { font-size: 16px; font-weight: 600; color: var(--blue-deep); margin-bottom: 6px; }
.quiz-fact { font-size: 13px; color: var(--blue-ink); font-style: italic; line-height: 1.6; }

/* TODAY'S WATCH — a compact editorial recommendation (magazine
   "what to watch" blurb), not a feature banner: a small floated
   thumbnail with text wrapping beside it, roughly the footprint of a
   single story card. Thumbnail link and the bottom text link are
   separate tap targets (both open the same YouTube URL), so the card
   itself is a plain div rather than one big wrapping <a>. */
.watch-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
  padding: 14px 16px;
}
.watch-card::after { content: ""; display: table; clear: both; }
.watch-thumb-link {
  float: left; width: 80px; height: 60px; margin: 2px 12px 6px 0;
  border-radius: 4px; overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.watch-thumb-wrap { position: relative; width: 100%; height: 100%; background: var(--ground); }
.watch-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.watch-thumb-fallback-icon {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  font-size: 18px; color: var(--copper); background: var(--ground);
}
.watch-thumb-wrap.watch-thumb-fallback .watch-thumb-fallback-icon { display: flex; }
.watch-title { font-family: "Playfair Display", serif; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.watch-meta { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.03em; color: var(--grey); margin-top: 4px; }
.watch-description { font-family: "Source Serif 4", Georgia, serif; font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin-top: 6px; }
.watch-link {
  display: inline-block; margin-top: 6px;
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--copper); text-decoration: none; font-weight: 600;
}
.watch-link:hover { text-decoration: underline; }

/* MATCHY MATCHY — a deck of playing cards
   5:7 cards on a grid that carries the perspective, so every card turns
   in the same space. Each card is a button (flat, so its focus ring stays
   flat) holding an inner that rotates in 3D; the two faces sit back to
   back with their backfaces hidden. The wren back is a repeated motif in
   a bordered field, like a real card back. */
.game-status {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey); text-align: center; margin-bottom: 18px;
}
.game-status.game-complete { letter-spacing: normal; text-transform: none; animation: game-status-in 0.5s ease both; }
.game-complete-line {
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 500;
  font-size: 19px; color: var(--copper);
}
.game-complete-comment {
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 400;
  font-size: 15px; color: var(--ink-mid); margin-top: 6px;
}
@keyframes game-status-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.game-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 420px; margin: 0 auto; padding: 6px 0 10px;
  perspective: 1100px; -webkit-perspective: 1100px;
}
.game-card {
  aspect-ratio: 5 / 7; background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 10px;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform 0.12s ease;
}
.game-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Press: the card moves down into its shadow. */
.game-card:active:not(.matched):not(.flipped) { transform: translateY(2px); }
.game-card:active:not(.matched):not(.flipped) .game-card-back { box-shadow: 0 1px 1px rgba(var(--black-rgb), 0.08), 0 2px 4px -2px rgba(var(--black-rgb), 0.16), inset 0 0 0 1px rgba(var(--copper-rgb), 0.22); }
.game-card.matched { cursor: default; }
.game-card-inner {
  display: block; position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.3, 1.25, 0.5, 1);
}
.game-card.flipped .game-card-inner { transform: rotateY(180deg); }
.game-card-back, .game-card-face {
  display: block; position: absolute; inset: 0; border-radius: 10px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
/* The back: a cream card with a fine copper edge and a bordered field of
   small wrens, offset row by row into a lattice. */
.game-card-back {
  background: var(--card);
  box-shadow: 0 1px 2px rgba(var(--black-rgb), 0.08), 0 8px 14px -6px rgba(var(--black-rgb), 0.24), inset 0 0 0 1px rgba(var(--copper-rgb), 0.22);
}
.game-card-back::before {
  content: ""; position: absolute; inset: 6px; border-radius: 6px;
  border: 1px solid rgba(var(--copper-rgb), 0.35);
  background-color: rgba(var(--copper-rgb), 0.06);
  background-image: url(/wren-logo.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: space;
  background-origin: content-box; padding: 5px;
  opacity: 0.6; filter: saturate(0.8);
}
/* Alternative back: one large wren, centred. Switch by adding
   .game-grid.back-single. */
.game-grid.back-single .game-card-back::before { background-size: 46% auto; background-repeat: no-repeat; opacity: 0.9; filter: none; }
/* The face: white, a fine inner edge, and the emoji nudged up a touch,
   since emoji ink sits low in its line box. */
.game-card-face {
  display: flex; align-items: center; justify-content: center;
  background: var(--white); transform: rotateY(180deg);
  box-shadow: 0 1px 2px rgba(var(--black-rgb), 0.08), 0 8px 14px -6px rgba(var(--black-rgb), 0.24), inset 0 0 0 1px var(--rule);
}
.game-card-emoji { display: block; font-size: 48px; line-height: 1; transform: translateY(-4%); }
/* Match: brighten and pulse once, then settle lifted with a gold edge. */
.game-card.match-flash .game-card-inner { animation: game-match-pulse 0.45s ease-out both; }
.game-card.match-flash .game-card-face { background: #FFFBEF; box-shadow: 0 2px 4px rgba(var(--black-rgb), 0.08), 0 12px 20px -8px rgba(var(--gold-rgb), 0.45), 0 0 0 2px rgba(var(--gold-rgb), 0.45), inset 0 0 0 1px rgba(var(--gold-rgb), 0.6); }
.game-card.matched .game-card-inner { transform: rotateY(180deg) translateY(-2px); }
.game-card.matched .game-card-face { background: #FFFDF6; box-shadow: 0 2px 3px rgba(var(--black-rgb), 0.06), 0 12px 18px -8px rgba(var(--black-rgb), 0.28), inset 0 0 0 1.5px var(--gold); }
@keyframes game-match-pulse {
  0% { transform: rotateY(180deg) scale(1); }
  40% { transform: rotateY(180deg) scale(1.07); }
  100% { transform: rotateY(180deg) scale(1); }
}
/* Mismatch: a quiet rose edge while both stay up. */
.game-card.mismatch .game-card-face { box-shadow: 0 1px 2px rgba(var(--black-rgb), 0.08), 0 8px 14px -6px rgba(var(--black-rgb), 0.24), inset 0 0 0 1.5px var(--bad); }

@media (prefers-reduced-motion: reduce) {
  .game-card, .game-card-inner, .game-card-back, .game-card-face { transition: none; }
  .game-card.match-flash .game-card-inner { animation: none; }
  .game-status.game-complete { animation: none; }
}

/* ANAGRAM */
.anagram-status {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey); text-align: center; margin-bottom: 16px;
}
.anagram-status.anagram-complete { letter-spacing: normal; text-transform: none; }
.anagram-complete-line {
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 500;
  font-size: 19px; color: var(--copper); line-height: 1.4;
}

.anagram-answer, .anagram-pool {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
}
.anagram-answer { margin-bottom: 18px; transition: transform 0.05s ease; }
.anagram-pool { margin-bottom: 4px; }

.anagram-tile {
  min-width: 44px; min-height: 44px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground); border: 1px solid var(--copper); border-radius: 8px;
  font-family: "DM Mono", monospace; font-size: 22px; font-weight: 500; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.anagram-tile:hover { transform: translateY(-2px); }
.anagram-tile:active { transform: scale(0.94); }
.anagram-tile.placeholder {
  background: transparent; border-style: dashed; border-color: var(--rule); cursor: default;
}
.anagram-tile.placeholder:hover { transform: none; }
.anagram-tile.used { visibility: hidden; }
.anagram-tile.hint-locked {
  background: var(--tint-amber); border-color: var(--gold); color: var(--gold); cursor: default;
}
.anagram-tile.hint-locked:hover { transform: none; }

.anagram-hint-row { text-align: center; margin-top: 4px; }
.anagram-hint-btn {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule); color: var(--grey); border-radius: 20px;
  padding: 10px 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 44px;
}
.anagram-hint-btn:disabled { opacity: 0.5; cursor: default; }

.anagram-answer.anagram-shake { animation: anagram-shake 0.4s ease; }
@keyframes anagram-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.anagram-answer.anagram-correct-flash .anagram-tile {
  background: var(--ok); border-color: var(--green);
}

/* CONNECTIONS */
.connections-help {
  font-family: "Playfair Display", serif; font-style: italic; font-size: 13px;
  color: var(--grey-quiet); text-align: center; margin-bottom: 12px; line-height: 1.4;
}
.connections-status {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey); text-align: center; margin-bottom: 16px;
}
.connections-status.connections-complete {
  letter-spacing: normal; text-transform: none; color: var(--copper);
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 500; font-size: 17px;
}

.connections-solved { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.connections-solved-group { border-radius: 8px; padding: 10px 14px; text-align: center; }
.connections-cat-a { background: #F5E9CE; border: 1px solid #D9B872; color: var(--amber); }
.connections-cat-b { background: #DCEBEA; border: 1px solid #6FA8A6; color: #1F5C5C; }
.connections-cat-c { background: #F3E1E8; border: 1px solid #C98CA8; color: #8A3F5C; }
.connections-cat-d { background: #E3E0F0; border: 1px solid #A594C9; color: #4A3A7A; }
.connections-solved-name {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 600;
}
.connections-solved-words {
  font-family: "Playfair Display", serif; font-style: italic; font-size: 14px; margin-top: 2px;
}

.connections-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.connections-tile {
  min-height: 44px; padding: 8px 4px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--ground); border: 1px solid var(--rule); border-radius: 8px;
  font-family: "DM Mono", monospace; font-size: 13px; font-weight: 500; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.connections-tile:hover { transform: translateY(-2px); }
.connections-tile:active { transform: scale(0.95); }
.connections-tile.selected { border: 2px solid var(--copper); background: var(--wash); }

.connections-grid.connections-shake { animation: connections-shake 0.4s ease; }
@keyframes connections-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.connections-actions { text-align: center; }
.connections-submit {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--copper); color: var(--ground); border: none; border-radius: 20px;
  padding: 10px 24px; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 44px;
}

/* LIAR LIAR — "climb the tower" layout. Row 1 (2 squares) sits at the
   bottom and is where play starts; row 5 (2 squares) sits at the top
   as the goal. Rendered top-to-bottom as rows 5,4,3,2,1 - the reverse
   of data/play order - so the tower reads correctly on screen while
   gameplay still advances in plain 1->5 order underneath. */
.liar-title { font-family: "DM Mono", monospace; font-variant-caps: small-caps; font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); text-align: center; margin-bottom: 8px; }
.liar-help { font-family: "Playfair Display", serif; font-style: italic; font-size: 13px; color: var(--grey-quiet); text-align: center; margin-bottom: 14px; line-height: 1.4; }
.liar-progress { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); text-align: center; min-height: 14px; margin-bottom: 18px; }

/* The ladder: a static muted line spans the tower's full height, and
   a terracotta fill grows up from the bottom (anchored with
   bottom:0, animated via height) to track how many rows are done.
   Both sit at z-index:0 so the rows - z-index:1 - visually sit on
   top of the line like rungs. */
.liar-tower { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 6px 0; }
.liar-tower-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--rule); z-index: 0; }
.liar-tower-fill { position: absolute; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--copper); z-index: 0; height: 0%; transition: height 0.5s ease; }
.liar-tower-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; position: relative; z-index: 1; }

@keyframes liarRowFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.liar-tower-row-active { animation: liarRowFadeIn 0.4s ease; }

/* 80px fixed width, but height is min-height:80px + auto so a square
   grows to fit whatever the statement actually needs - text is never
   truncated or clipped, so overflow is left visible (there's nothing
   to hide once the box itself grows to contain the content). */
.liar-square {
  box-sizing: border-box; width: 80px; min-height: 80px; height: auto;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px; border-radius: 8px; position: relative;
  background: var(--ground); border: 1px solid var(--rule);
  font-family: "Source Serif 4", Georgia, serif; font-size: 11px; line-height: 1.25; color: var(--ink-soft);
  word-break: break-word; hyphens: auto;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.3s ease;
}

/* Active row - tappable, cream background with a prominent terracotta
   border so it reads as "alive". Deliberately doesn't reset font/color
   via "font: inherit" the way other buttons in this file do - that
   shorthand would wipe out .liar-square's own font-size/family/colour
   (same specificity, later in the cascade), which is exactly the bug
   that had these squares silently rendering at the body's 17px
   instead of their intended small size, when this game first shipped. */
.liar-square-tappable {
  background: var(--ground); border: 2px solid var(--copper); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.liar-square-tappable:hover { background: var(--card); }
.liar-square-tappable:active { transform: scale(0.97); }

/* Locked / future rows - no statement text at all (not even hidden
   off-screen), just a small faint wren mark, so the climb ahead stays
   a genuine surprise. */
.liar-square-locked { border-style: dashed; border-color: var(--rule-strong); background: var(--ground); }
.liar-locked-wren { width: 20px; height: 20px; object-fit: contain; opacity: 0.2; }

/* Resolved rows - the truth turns soft green with a check; lies fade
   down rather than disappearing outright. */
.liar-square-correct { border: 2px solid var(--green); background: #E8F5E9; }
.liar-square-muted-lie { opacity: 0.45; }
.liar-square-wrong-lie { opacity: 0.6; }

/* Badges sit as small circles tucked into the square's own top-right
   corner - kept inside its bounds (not overhanging the edge) since
   .liar-square has overflow:hidden and would clip anything
   positioned outside it. */
.liar-square-correct::after, .liar-square-wrong-lie::after {
  position: absolute; top: 3px; right: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--ground);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 10px; font-family: "DM Mono", monospace;
}
.liar-square-correct::after { content: "✓"; color: var(--green); border: 1.5px solid var(--green); }
.liar-square-wrong-lie::after { content: "✗"; color: var(--bad-deep); border: 1.5px solid var(--bad-deep); }

@keyframes liarFlashGreen { 0%, 100% { background-color: var(--ground); } 40% { background-color: #B7E4C7; } }
@keyframes liarFlashRed { 0%, 100% { background-color: var(--ground); } 40% { background-color: #F4B8B8; } }
.liar-flash-green { animation: liarFlashGreen 0.6s ease; }
.liar-flash-red { animation: liarFlashRed 0.6s ease; opacity: 0.6; }

.liar-result { text-align: center; }
.liar-gameover { padding: 22px 10px 6px; margin-top: 14px; border-top: 1px solid var(--rule); }
.liar-gameover-heading { font-family: "Playfair Display", serif; font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.liar-gameover-note { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey); margin-top: 4px; }
.liar-fact { font-family: "Source Serif 4", Georgia, serif; font-size: 14px; line-height: 1.65; color: var(--ink-soft); max-width: 440px; margin: 16px auto 0; }
.liar-share-btn {
  display: inline-block; margin-top: 18px; background: none; cursor: pointer;
  font-family: "DM Mono", monospace; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--copper); border: 1.5px solid var(--copper); border-radius: 28px;
  padding: 12px 26px; -webkit-tap-highlight-color: transparent; min-height: 44px;
  transition: background 0.15s ease;
}
.liar-share-btn:hover { background: rgba(var(--copper-rgb), 0.1); }

.liar-reset-btn {
  display: block; margin: 16px auto 0; background: none; border: none; cursor: pointer;
  font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grey-pale); -webkit-tap-highlight-color: transparent; padding: 6px;
}
.liar-reset-btn:hover { color: var(--copper); }

/* SAVE THE WREN */
.wren-help {
  font-family: "Playfair Display", serif; font-style: italic; font-size: 13px;
  color: var(--grey-quiet); text-align: center; margin-bottom: 12px; line-height: 1.4;
}
.wren-status {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey); text-align: center; margin-bottom: 16px;
}
.wren-status.wren-complete {
  letter-spacing: normal; text-transform: none; color: var(--copper);
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 500; font-size: 17px;
}

.wren-svg-wrap { display: flex; justify-content: center; margin-bottom: 18px; }
.wren-stage-svg { width: 200px; height: 140px; max-width: 100%; }
.wren-hop-anim { transform-box: fill-box; transform-origin: center; animation: wren-hop 0.6s ease-in-out infinite; }
@keyframes wren-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.wren-word-display { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.wren-letter-box {
  min-width: 38px; min-height: 48px; padding: 0 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground); border: 2px solid var(--rule); border-radius: 6px;
  font-family: "DM Mono", monospace; font-size: 22px; font-weight: 600; color: var(--ink); text-transform: uppercase;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.wren-letter-box.revealed { border-color: var(--copper); background: var(--wash); }

.wren-keyboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 480px; margin: 0 auto; }
.wren-key {
  min-width: 36px; min-height: 36px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground); border: 1px solid var(--copper); border-radius: 6px;
  font-family: "DM Mono", monospace; font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}
.wren-key:hover:not(:disabled) { transform: translateY(-1px); }
.wren-key:active:not(:disabled) { transform: scale(0.94); }
.wren-key.correct { background: var(--ok-tint); border-color: var(--green); color: var(--green); }
.wren-key.wrong { background: var(--bad-tint); border-color: var(--bad); color: var(--bad); }
.wren-key:disabled { opacity: 0.55; cursor: default; }

/* SERIAL */
.serial-meta { margin-bottom: 16px; }
.serial-ep { font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.serial-title { font-family: "Playfair Display", serif; font-size: 21px; font-style: italic; font-weight: 500; line-height: 1.3; color: var(--ink); }
.serial-body { font-size: 17px; color: var(--ink-soft); line-height: 1.85; font-weight: 300; }
.serial-body p + p { margin-top: 13px; }
.cliffhanger { margin-top: 20px; padding: 16px 18px; background: var(--white); border-left: 3px solid var(--ink); font-family: "Playfair Display", serif; font-style: italic; font-size: 15px; color: var(--ink); line-height: 1.55; border-radius: 0 4px 4px 0; }

/* TONIGHT'S TABLE */
.tonights-table-card { border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; }
.tonights-table-name { font-family: "Playfair Display", serif; font-size: clamp(26px, 7vw, 34px); font-weight: 700; color: var(--ink); line-height: 1.15; }
.tonights-table-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tonights-table-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.04em;
  color: var(--amber); background: rgba(var(--gold-rgb), 0.12); border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 20px; padding: 4px 11px;
}
.tonights-table-story { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.6; color: var(--ink-mid); margin-top: 14px; }
.tonights-table-expand-btn {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px;
  background: none; border: none; padding: 8px 0 0;
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tonights-table-expand-btn:hover { text-decoration: underline; }
.tonights-table-expand-body { display: none; }
.tonights-table-expand-body.expanded { display: block; }
.tonights-table-shoplist-label {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; color: var(--gold); margin-top: 22px; margin-bottom: 4px;
}
.tonights-table-tick-hint { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.03em; color: var(--grey-faint); margin-bottom: 10px; }
.tonights-table-shoplist { list-style: none; padding: 0; margin: 0; }
.tonights-table-shop-item { border-bottom: 1px solid var(--rule-light); }
.tonights-table-shop-item:last-child { border-bottom: none; }
.tonights-table-shop-item label {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  font-size: 16px; color: var(--ink); line-height: 1.4; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tonights-table-shop-item input[type="checkbox"] {
  width: 19px; height: 19px; flex: none; accent-color: var(--copper); cursor: pointer;
}
.tonights-table-shop-item.checked span { color: var(--grey-faint); }
.tonights-table-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tonights-table-share-btn {
  font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--copper);
  background: none; border: 1px solid var(--copper); border-radius: 20px; padding: 7px 13px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent;
}
.tonights-table-share-btn:hover { background: rgba(var(--copper-rgb), 0.1); }
.tonights-table-view-full {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px;
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; font-weight: 600;
}
.tonights-table-view-full:hover { text-decoration: underline; }

/* DAILY PUZZLE */
.puzzle-difficulty-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.puzzle-diff-btn {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ground); color: var(--copper); border: 1px solid var(--copper); border-radius: 20px;
  padding: 6px 18px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.puzzle-diff-btn.selected { background: var(--copper); color: var(--ground); }
.puzzle-diff-warning {
  font-family: "DM Mono", monospace; font-size: 10px; font-style: italic;
  color: var(--grey-faint); text-align: center; margin: -6px 0 14px;
}
.puzzle-status {
  font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey); text-align: center; margin-bottom: 16px;
}
.puzzle-status.puzzle-complete { letter-spacing: normal; text-transform: none; }
.puzzle-complete-line {
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 500;
  font-size: 19px; color: var(--copper);
}
.puzzle-fact {
  font-family: "Playfair Display", serif; font-weight: 400;
  font-size: 15px; color: var(--copper); margin-top: 14px; line-height: 1.55;
  max-width: 320px; margin-left: auto; margin-right: auto;
}
.puzzle-grid {
  position: relative; margin: 0 auto;
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
}
/* Width/height are set inline in px by startPuzzle() (size * the
   difficulty's tile size), since background-position/background-size
   on each tile are computed in matching px - a responsive/percentage
   grid would throw that alignment off on every resize. */
.puzzle-tile {
  position: absolute; top: 0; left: 0;
  padding: 0; margin: 0; border: 1px solid var(--ground); border-radius: 2px;
  background-repeat: no-repeat;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}
.puzzle-tile-empty {
  background-image: none; background-color: var(--ground);
  border: 1px dashed var(--rule-strong); cursor: default;
}
/* Once solved, the empty slot is filled in with the image's final
   piece (see showPuzzleComplete()) so the picture reads as complete -
   swap its dashed placeholder border for the same border every other
   tile uses. */
.puzzle-tile-empty.revealed { border: 1px solid var(--ground); }
.puzzle-grid.puzzle-solved-flash .puzzle-tile { animation: puzzle-flash 0.6s ease; }
@keyframes puzzle-flash {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(var(--green-rgb), 0); }
  45% { box-shadow: inset 0 0 0 3px rgba(var(--green-rgb), 0.85); }
}
.puzzle-result { text-align: center; }
.puzzle-share-btn {
  display: inline-block; margin-top: 12px; background: none; cursor: pointer;
  font-family: "DM Mono", monospace; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--copper); border: 1.5px solid var(--copper); border-radius: 28px;
  padding: 12px 26px; -webkit-tap-highlight-color: transparent; min-height: 44px;
  transition: background 0.15s ease;
}
.puzzle-share-btn:hover { background: rgba(var(--copper-rgb), 0.1); }
.puzzle-actions { text-align: center; margin-top: 14px; }
.puzzle-reset-btn {
  font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule); color: var(--grey); border-radius: 20px;
  padding: 6px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.puzzle-reset-btn:hover { border-color: var(--copper); color: var(--copper); }


/* SITE NAV — shared across every page */

/* ARCHIVE NOTICE — shown when viewing a past edition */
.archive-notice {
  text-align: center; font-family: "DM Mono", monospace; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-quiet);
  background: var(--wash); border: 1px solid var(--rule); border-radius: 4px;
  padding: 9px 14px; margin: 0 0 24px;
}
.archive-notice a { color: var(--copper); text-decoration: underline; }

/* FOOTER ACTIONS — install + share */

/* COMING SOON */
.coming-soon { text-align: center; padding: 70px 20px; }
.coming-soon h2 { font-family: "Playfair Display", serif; font-size: 23px; font-style: italic; color: var(--grey); margin-bottom: 8px; }
.coming-soon p { font-family: "DM Mono", monospace; font-size: 10px; color: var(--grey-faint); letter-spacing: 0.1em; text-transform: uppercase; }

/* DESKTOP MEASURE — slightly wider reading column once there's room
   to spare; phones stay on the narrower, mobile-first default above. */
@media (min-width: 700px) {
  body { max-width: 680px; }
}

/* MOBILE */
@media (max-width: 480px) {
  body { padding: 0 16px; }
  .install-stamp-wrap { right: 54px; }
  .section-marker { margin: 44px 0 20px; }
  .story { padding: 18px 0; }
  .story.lead { padding: 24px 0 30px; }
  .story.lead h2 { font-size: 30px; }
  .story.lead > p:first-of-type::first-letter { font-size: 46px; margin-top: -1px; padding: 0 6px 0 0; }
  .quiz-question, .quiz-answer-wrap, .quiz-flip-hint { padding-left: 16px; padding-right: 16px; }
  .word-def { margin-left: 0; padding-left: 14px; }
  .dyk-card { padding: 14px 0; margin-top: 2px; }
  .dyk-fact { font-size: 20px; }
  .horoscope-modal { max-width: 90vw; }
  .section-marker:first-of-type { margin-top: 6px; }
  .section-marker:first-of-type .section-marker-top { padding-top: 6px; }
  .new-edition-banner { font-size: 11px; padding: 8px 12px; gap: 8px; }
  /* Phones: the deck runs a little wider than the measure (12px each
     side of the 20px gutter), giving 85x119 cards at 375. */
  .game-grid { gap: 6px; margin: 0 -12px; max-width: none; }
  .connections-tile { font-size: 12px; padding: 6px 3px; }
  .wren-letter-box { min-width: 32px; min-height: 42px; font-size: 18px; }
  .wren-key { min-width: 36px; min-height: 36px; padding: 0 4px; font-size: 13px; }
  .wren-stage-svg { width: 160px; height: 112px; }
}

/* ── PLATFORM TILE GRID (home page) ──────────────────────────
   Twelve square destination tiles, three across on every screen
   size. Each tile carries its own solid colour inline from the
   markup, so this only handles shape, type and the lift on tap. */
.tile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 10px 0 34px;
}
.tile {
  aspect-ratio: 1 / 1; border-radius: 16px; box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 10px 8px; text-decoration: none; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tile:hover, .tile:focus-visible, .tile:active {
  transform: scale(1.03); box-shadow: 0 8px 26px rgba(var(--black-rgb), 0.32);
}
.tile-icon { font-size: 48px; line-height: 1; }

/* PICTURE TILE — the Wild Tiles card is the puzzle itself rather than
   an emoji on a coloured square: nine cells each framing their own
   ninth of the quokka picture, one square short of solved, running
   edge to edge with the label as a caption bar over the bottom of it.
   The card's own colour still shows through the missing square. */
.tile.tile-photo { display: block; position: relative; padding: 0; }
.tile-puzzle {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 1px; width: 100%; height: 100%; background: rgba(var(--black-rgb), 0.22);
}
/* A picture tile whose art is one illustration rather than the nine
   puzzle cells. Same card, same caption bar over the bottom of it. */
.tile-photo-img {
  display: block; width: 100%; height: 100%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Cut-out art rather than a full-bleed illustration: a transparent
   PNG that has to sit whole on the card's own colour instead of being
   cropped to fill it. Centred on the card. */
.tile-photo-img.is-cutout {
  padding: 10px;
  background-origin: content-box;
  background-size: contain;
  background-position: center center;
}
.tile-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 20%; min-height: min-content;
  background: rgba(var(--black-rgb), 0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3px 6px; text-align: center;
}
.tile-caption .tile-name { margin-top: 0; }
.tile-puzzle-cell {
  /* A 240px copy, not the 2MB original the game itself loads. */
  background-image: url("/puzzles/Quokka-thumb.jpg");
  background-size: 300% 300%;
  background-repeat: no-repeat;
}
/* The missing square - the tile colour showing through, lifted. */
.tile-puzzle-gap { background: rgba(var(--white-rgb), 0.22); }
.tile-name {
  font-family: "Playfair Display", serif; font-weight: 700; font-size: 15px;
  line-height: 1.15; color: var(--white); margin-top: 8px;
}

/* BACK LINK — sits directly under the masthead on every page that
   isn't the home grid. Same treatment as the one recipe.html has
   always used, so the pages read as one set. */

/* A square tile three-across on a narrow phone is only about 100px
   wide, which a 48px emoji above the name overflows - so the icon
   and the name step down rather than spilling. */
@media (max-width: 560px) {
  .tile-grid { gap: 8px; }
  .tile { padding: 8px 5px; border-radius: 14px; }
  .tile-icon { font-size: 34px; }
  .tile-caption { padding: 2px 4px; }
  .tile-caption .tile-name { font-size: 11px; }
  .tile-name { font-size: 12px; margin-top: 6px; }
}