/* ==========================================================================
   DailyPlay — application styles
   Sections: reset · layout · header · panels · sections · tiles · footer
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

/* Column layout so a short page still pushes its footer to the bottom of
   the viewport instead of leaving it stranded mid-screen. */
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

/* The auto margin alone pushes the footer to the bottom of a short page.
   Growing <main> instead would stretch its grid rows and pull the content
   apart, which is not what a short page needs. */
body > .site-footer { margin-top: auto; }

/* Must outrank the display rules below, or `el.hidden = true` does nothing
   to anything that sets its own display — panels, sections, the scrim. */
[hidden] { display: none !important; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --- Layout --------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 18px;
}

.site-main {
  padding-block: clamp(20px, 5vw, 44px) 64px;
  display: grid;
  gap: clamp(28px, 5vw, 44px);
}

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: var(--bg-veil);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.site-header[data-stuck="true"] { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
}
.site-header__actions {
  display: flex;
  flex: 0 0 94px;
  align-items: center;
  gap: 6px;
}
.site-header__actions--right { justify-content: flex-end; }
.site-header__actions--right .site-volume {
  position: relative;
  inset: auto;
  transform: none;
}
.site-header__inner .wordmark {
  flex: 1;
  min-width: 0;
  text-align: center;
}

/* One site-wide audio level, shared by games and any future sound effects. */
.site-header .shell { position: relative; }
.site-volume {
  position: absolute;
  z-index: 2;
  right: 66px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}
.site-volume .site-volume__toggle { display: grid; }
.site-volume__speaker {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}
.site-volume__speaker--fill {
  color: var(--accent);
  clip-path: inset(0 calc(100% - var(--volume-level, 25%)) 0 0);
}
.site-volume__speaker--muted { display: none; }
.site-volume[data-muted="true"] .site-volume__speaker:not(.site-volume__speaker--muted) { display: none; }
.site-volume[data-muted="true"] .site-volume__speaker--muted { display: block; }
.site-volume__speaker svg { width: 20px; height: 20px; display: block; }
.site-volume__controls {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: -42px;
  min-width: 192px;
  justify-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-hi);
}
.site-volume[data-open="true"] .site-volume__controls { display: grid; }
.site-volume__level { display: flex; align-items: center; justify-content: center; width: 100%; gap: 7px; }
.site-volume__level input { width: 100px; accent-color: var(--accent); cursor: pointer; }
.site-volume__controls output { min-width: 3ch; text-align: right; color: var(--ink); font-size: .75rem; font-variant-numeric: tabular-nums; }
.site-volume__effects { display: flex; align-items: center; justify-content: center; width: 100%; gap: 8px; white-space: nowrap; color: var(--ink); font-size: .8rem; cursor: pointer; }
.site-volume__effects input { appearance: none; display: grid; place-items: center; width: 17px; height: 17px; margin: 0; border: 1px solid var(--line-hi); border-radius: 5px; background: var(--surface-hi); cursor: pointer; }
.site-volume__effects input:checked { border-color: var(--accent); background: var(--accent); }
.site-volume__effects input::after { content: ""; width: 8px; height: 5px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: translateY(-1px) rotate(-45deg) scale(0); }
.site-volume__effects input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.site-volume__effects input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  border: 1px solid transparent;
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--surface-hi); border-color: var(--line); }
.icon-btn svg { width: 20px; height: 20px; display: block; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 5.6vw, 2.1rem);
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark b { font-weight: 800; color: var(--accent); }
@media (max-width: 420px) {
  .site-header__inner { gap: 4px; }
  .site-header__actions { flex-basis: 80px; gap: 0; }
  .site-header__inner .wordmark { font-size: clamp(1.1rem, 5.6vw, 1.45rem); }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  /* Tucked up under the header (was clamp(8px, 4vw, 26px)) to give the
     games grid more room. */
  padding-top: 0;
  margin-top: clamp(-10px, -1.5vw, -4px);
}

.hero__lede {
  /* An h1 (the page's headline for search), styled as the quiet lede it
     always was. */
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: inherit;
  font-size: clamp(0.98rem, 2.6vw, 1.1rem);
  color: var(--ink-2);
  max-width: 38ch;
  /* Honours the line break written into SITE.lede, while still wrapping
     when a phone is too narrow for a line to fit. */
  white-space: pre-line;
}

.reset-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.reset-chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  35%           { box-shadow: 0 0 0 6px transparent; }
}
.reset-chip time {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* --- Section headings ----------------------------------------------------- */
.section { display: grid; gap: 14px; }

.section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.section__count {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.section--favourites .section__title { color: var(--accent); }

/* --- Game grid ------------------------------------------------------------ */
.game-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 680px) {
  .game-grid { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tile-wrap { position: relative; display: flex; }

.tile {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 146px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
@media (min-width: 680px) { .tile { min-height: 172px; padding: 18px 18px 16px; } }

a.tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  background: var(--surface-hi);
  box-shadow: var(--shadow-hi);
}
a.tile:active { transform: translateY(-1px); }

.tile--soon { cursor: default; }

.tile__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--title-size);
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding-right: 30px;          /* clears the favourite button */
}

.tile__art {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 46px;
  color: var(--ink-2);
  transition: opacity var(--dur) var(--ease);
}

.tile__soon {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-align: center;
}
.tile__art svg { height: 44px; width: auto; }
.tile__art .tile__songless-icon { display: block; height: 58px; width: auto; }
.tile[data-game="songless-unlimited"] .tile__songless-icon { transform: scale(1.12); }
:root[data-palette="cb"] .tile__songless-icon { filter: hue-rotate(60deg); }
@media (min-width: 680px) {
  .tile__art svg { height: 54px; }
  .tile__art .tile__songless-icon { height: 68px; }
}

.tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
}

/* Status pill — state is carried by shape and label, not colour alone. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.status__mark {
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}
.status__mark svg { width: 9px; height: 9px; }

.status[data-state="completed"] { color: var(--accent); }
.status[data-state="completed"] .status__mark {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.status[data-state="in-progress"] { color: var(--pending); }
.status[data-state="in-progress"] .status__mark::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status[data-state="unplayed"] .status__mark { border-style: dashed; }

.tile__go {
  color: var(--ink-muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tile__go svg { width: 16px; height: 16px; display: block; }
a.tile:hover .tile__go { color: var(--accent); transform: translateX(3px); }

/* --- Favourite button ----------------------------------------------------- */
/* The star is centred on the first line of the tile title, whatever size
   the title is at this viewport: 1px border + 16px padding + half the
   title's line box, minus half the button. Keep --title-size in sync with
   .tile__title's font-size. */
.tile-wrap { --title-size: clamp(1.02rem, 3.4vw, 1.32rem); --fav-size: 34px; }
.fav-btn {
  position: absolute;
  top: calc(17px + var(--title-size) * 1.15 / 2 - var(--fav-size) / 2);
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--fav-size); height: var(--fav-size);
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.fav-btn:hover { color: var(--accent); background: var(--accent-soft); }
.fav-btn svg { width: 18px; height: 18px; display: block; }
.fav-btn .star-on { display: none; }
.fav-btn[aria-pressed="true"] { color: var(--accent); }
.fav-btn[aria-pressed="true"] .star-on { display: block; }
.fav-btn[aria-pressed="true"] .star-off { display: none; }
.fav-btn.is-popping { animation: pop var(--dur-slow) var(--ease); }
@keyframes pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* --- More games (peek preview, expands to the full row) -------------------
   Collapsed, the next row of tiles peeks through at full opacity up top and
   fades into the page background toward the bottom. A floating button
   straddles the fade line; open, the peek grows to the grid's full height
   and the fade disappears. */
.more-games {
  position: relative;
  padding-bottom: 22px;
}
.more-games__peek {
  position: relative;
  /* The peek has to clip (that's the fade effect), which also clipped the
     tiles' hover lift and shadow. A little padding, cancelled out by an equal
     negative margin, gives them room without moving anything. */
  padding: 8px 12px 0;
  margin: -8px -12px 0;
  max-height: calc(96px + 8px);
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease);
}
.more-games__peek::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 84px;
  background: linear-gradient(to bottom, transparent, var(--bg) 88%);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.more-games.is-open .more-games__peek { max-height: 2400px; padding-bottom: 14px; margin-bottom: -14px; }
.more-games.is-open .more-games__peek::after { opacity: 0; }

.more-games__toggle {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-hi);
  border: 1px solid var(--line);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  z-index: 2;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.more-games__toggle:hover { color: var(--accent); border-color: var(--accent-line); }
.more-games__toggle svg { width: 18px; height: 18px; display: block; transition: transform var(--dur) var(--ease); }
.more-games.is-open .more-games__toggle svg { transform: rotate(180deg); }

/* --- Empty state ---------------------------------------------------------- */
/* --- Daily streak pill ------------------------------------------------------
   Sits on its own, centred, at the bottom of the page's content — a single
   wide-and-short capsule rather than a grid card, so it reads as a little
   badge you glance at on the way out rather than another stats panel.
   On phones and small tablets it stays in normal flow, after the games grid.
   From "pc/laptop" width up it's `position: sticky` (not `fixed`): it rides
   along pinned near the bottom of the viewport while you scroll through the
   games, but — because it's still a normal child of <main>, right before
   the footer — it can never stick past <main>'s own bottom edge. So as the
   page runs out of content it settles into place just above the footer and
   stops, rather than floating on top of it forever the way a fixed bar
   would. */
.streak-banner {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}
@media (min-width: 940px) {
  .streak-banner {
    position: sticky;
    bottom: 18px;
    z-index: 20;
  }
}

.streak-pill {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px 14px;
  max-width: 100%;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.streak-pill__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.streak-pill__count {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.streak-pill__unit {
  font-family: var(--font-display);
  color: var(--ink-2);
  font-size: 0.86rem;
}

/* One square per day, oldest on the left, today always last. Never wraps —
   see the responsive day-count rules below instead. */
.streak {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  flex-wrap: nowrap;
}
.streak li {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
}
.streak li[data-on="yes"] { background: var(--accent); border-color: var(--accent); }
/* Today is ringed whether or not it's been played, so "where am I" is clear. */
.streak li[data-today="yes"] { outline: 2px solid var(--ink-muted); outline-offset: 1px; }
.streak li[data-on="yes"][data-today="yes"] { outline-color: var(--accent); }

/* Fewer squares at narrow widths so the strip always fits on one line
   instead of wrapping onto a second row inside the pill — history.recent()
   always hands back 14 days; this just hides the oldest of them, keeping
   the most recent (today is always the last <li>, so it never disappears).
   Each tier re-shows what the narrower tier hid, then hides further back. */
.streak li:nth-last-child(n+6) { display: none; }
@media (min-width: 420px) {
  .streak li:nth-last-child(n+6) { display: block; }
  .streak li:nth-last-child(n+8) { display: none; }
}
@media (min-width: 680px) {
  .streak li:nth-last-child(n+8) { display: block; }
  .streak li:nth-last-child(n+11) { display: none; }
}
@media (min-width: 940px) {
  .streak li:nth-last-child(n+11) { display: block; }
}

/* --- Scrim + panels ------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(3, 6, 3, 0.62);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.scrim.is-open { opacity: 1; }

.panel {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 60;
  width: min(330px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline: 1px solid var(--line);
  box-shadow: var(--shadow-hi);
  transition: transform var(--dur-slow) var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.panel--left  { left: 0;  transform: translateX(-102%); }
.panel--right { right: 0; transform: translateX(102%); }
.panel.is-open { transform: translateX(0); }

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 12px 14px 20px;
  border-bottom: 1px solid var(--line);
}
.panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: grid;
  gap: 22px;
  align-content: start;
}
.panel__foot {
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* --- Menu list ------------------------------------------------------------ */
.menu-list { display: grid; gap: 2px; }
.menu-list a,
.menu-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  margin-inline: -12px;
  width: calc(100% + 24px);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.menu-list a:hover,
.menu-list button:hover { background: var(--surface-hi); color: var(--accent); }
.menu-list svg { width: 17px; height: 17px; flex: none; color: var(--ink-muted); }
.menu-list a:hover svg,
.menu-list button:hover svg { color: var(--accent); }

/* --- Settings controls ---------------------------------------------------- */
.field { display: grid; gap: 9px; }
.field__label {
  font-size: 0.82rem;
  font-weight: 500;
}
.field__note {
  font-size: 0.76rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.segmented button {
  padding: 8px 4px;
  border-radius: calc(var(--r-md) - 4px);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.switch {
  flex: none;
  position: relative;
  width: 42px; height: 24px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--line-hi);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.switch[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-pressed="true"]::after { transform: translateX(18px); background: var(--accent-ink); }

.btn-quiet {
  justify-self: start;
  padding: 9px 15px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn-quiet:hover { color: var(--ink); border-color: var(--ink-muted); background: var(--surface-hi); }

.divider { height: 1px; background: var(--line); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 22px calc(30px + env(safe-area-inset-bottom, 0px));
  color: var(--ink-muted);
  font-size: 0.8rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}
/* Homepage footer: just the note, centred. (About and Contact live in
   the menu panel.) */
.site-footer__inner:has(.site-footer__note) { justify-content: center; }
.site-footer__note { text-align: center; line-height: 1.5; }
.site-footer__note span { display: block; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--accent); }

/* --- Ad rails -------------------------------------------------------------
   Fixed in the empty margin either side of the game. assets/js/ads.js
   measures the room and sets each rail's size and position (300 × 600,
   160 × 600 or 300 × 250); where no rail fits, the inline unit below the
   game is used instead. Nothing is ever placed over the game. */
.ad-rails {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  overflow: hidden;
  pointer-events: none;
}
.ad-rails:not([hidden]) { display: block; }

.ad-rail {
  position: absolute;
  pointer-events: auto;
}
.ad-rail[hidden] { display: none !important; }

/* Inline unit: phones and small tablets, below everything the game shows.
   `min-height` reserves the space so the footer doesn't jump when the ad
   arrives. */
.ad-inline {
  display: none;
  place-items: center;
  width: min(100% - 32px, 728px);
  min-height: 100px;
  margin: 28px auto 24px;
}
.ad-inline:not([hidden]) { display: grid; }
/* Responsive units size themselves from their own width, which centring
   would shrink to zero ("No slot size for availableWidth=0"). */
.ad-inline > ins.adsbygoogle { width: 100%; }
/* AdSense marks a slot it had nothing to show for; collapse it rather than
   leave an empty box (common before approval, and now and then after). */
.ad-inline:has(ins[data-ad-status="unfilled"]),
.ad-rail:has(ins[data-ad-status="unfilled"]) { display: none; }

/* Debug outlines. Red on purpose — it is a development affordance, not part
   of the palette, and it should be impossible to mistake for real UI or to
   leave switched on by accident. Only ADS.debug reaches these rules. */
.ad-rail.is-placeholder,
.ad-inline.is-placeholder {
  display: grid;
  place-items: center;
  border: 2px dashed #ff4d4d;
  border-radius: var(--r-md);
  background: rgba(255, 77, 77, 0.06);
}
.ad-placeholder {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 2;
  text-align: center;
  color: #ff6b6b;
  padding: 8px 12px;
}

/* --- Touch devices --------------------------------------------------------
   Fingers need more than a mouse does. Phones and tablets get full-size
   targets; the visual weight stays the same. */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .tile-wrap { --fav-size: 44px; }
  .fav-btn  { right: 4px; }
  /* Only the 18px star needs clearing, not the whole 44px tap target, so
     longer names like "IMDb Higher or Lower" still fit on two lines. */
  .tile__title { padding-right: 30px; }
  .menu-list a,
  .menu-list button { padding-block: 13px; }
  .segmented button { padding-block: 11px; }
  .switch { width: 48px; height: 28px; }
  .switch::after { width: 22px; height: 22px; }
  .switch[aria-pressed="true"]::after { transform: translateX(20px); }
}

/* --- Long-form pages (privacy, about, how to play) ------------------------ */
.prose {
  display: grid;
  gap: 16px;
  max-width: 65ch;
  padding-block: clamp(24px, 6vw, 48px) 72px;
}
.prose h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 6vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}
.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-top: 12px;
}
.prose p, .prose li { color: var(--ink-2); }
.prose ul { display: grid; gap: 7px; padding-left: 20px; list-style: disc; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { font-size: 0.8rem; color: var(--ink-muted); }

/* --- Toast ---------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  transform: translate(-50%, 140%);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--surface-hi);
  border: 1px solid var(--line-hi);
  box-shadow: var(--shadow-hi);
  font-size: 0.84rem;
  transition: transform var(--dur-slow) var(--ease);
}
.toast.is-open { transform: translate(-50%, 0); }