:root {
  /* Dark (default): a friendly deep navy with the logo's teal-green and pink-purple as soft glows. */
  --bg: #172039;
  --bg-glow-1: rgba(63, 217, 173, 0.2);
  --bg-glow-2: rgba(217, 139, 255, 0.2);
  --panel: #202e4a;
  --panel-ring: rgba(255, 255, 255, 0.08);
  --text: #f4f6fb;
  --muted: rgba(244, 246, 251, 0.62);
  --tile-bg: #25355a;
  --tile-ring: rgba(255, 255, 255, 0.07);
  --tile-shadow: 0 4px 14px rgba(5, 10, 25, 0.35);
  --button: rgba(255, 255, 255, 0.1);
  --button-hover: rgba(255, 255, 255, 0.18);
  --mint: #7fe6c2;
  color-scheme: dark;
}
:root[data-theme="light"] {
  /* Light: soft pastel teal fading into pastel pink-purple, calmer than Poki's bright cyan. */
  --bg: #d6eef0;
  --bg-glow-1: rgba(120, 225, 195, 0.55);
  --bg-glow-2: rgba(232, 185, 255, 0.6);
  --panel: #ffffff;
  --panel-ring: rgba(20, 60, 80, 0.08);
  --text: #16304a;
  --muted: rgba(22, 48, 74, 0.65);
  --tile-bg: #e4f2f4;
  --tile-ring: rgba(20, 60, 80, 0.08);
  --tile-shadow: 0 4px 12px rgba(20, 70, 90, 0.18);
  --button: rgba(22, 48, 74, 0.08);
  --button-hover: rgba(22, 48, 74, 0.15);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background:
    radial-gradient(1100px 800px at 0% 0%, var(--bg-glow-1), transparent 70%),
    radial-gradient(1100px 800px at 100% 100%, var(--bg-glow-2), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Fredoka', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Poki-style mosaic that fills the screen: square cells, as many columns as fit. app.js sets --cols and
   --cell from the screen size.
   Tile sizes are `size` in games.js: 'xl' 4x4 (featured), 'md' 2x2, 'sm' 1x1. */
main { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left)); }
.grid {
  --gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), var(--cell, 90px));
  grid-auto-rows: var(--cell, 90px);
  grid-auto-flow: dense;
  gap: var(--gap);
  justify-content: center;
}
.grid > li { grid-column: span 2; grid-row: span 2; }
.grid > [data-size="xl"] { grid-column: span 4; grid-row: span 4; }
.grid > [data-size="sm"] { grid-column: span 1; grid-row: span 1; }
#solo { margin-top: var(--gap); }
/* A family block (e.g. the three Fieldfall games): its own little grid of 2x2 tiles. */
.grid > li.family { display: block; }
.fam { list-style: none; margin: 0; padding: 0; height: 100%; display: grid; grid-template-columns: repeat(var(--fam-cols, 4), var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); }
.fam > li { grid-column: span 2; grid-row: span 2; }
.grid > li.grow { grid-column: span 2; grid-row: span 2; }   /* added by app.js to fill the last row */
.grid > li.wide { grid-column: span 2; grid-row: span 1; }
.grid > li.tall { grid-column: span 1; grid-row: span 2; }

/* Logo card (2x2, top-left): the mark and name, and the light/dark switch in its corner. */
.logo-card {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--panel-ring), var(--tile-shadow);
  container-type: inline-size;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4cqi;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.95rem, 15cqi, 1.8rem);
  line-height: 1;
}
.mark { width: 36cqi; height: auto; display: block; }

.theme {
  position: absolute;
  top: 6cqi;
  right: 6cqi;
  display: grid;
  place-items: center;
  width: clamp(24px, 18cqi, 34px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--button);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
}
.theme:hover { background: var(--button-hover); }
.theme svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme .moon { fill: currentColor; stroke: none; }
.theme .sun, [data-theme="light"] .theme .moon { display: none; }
[data-theme="light"] .theme .sun { display: block; }

.tile {
  --accent: var(--mint);
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  container-type: inline-size;
  border-radius: 16px;
  overflow: hidden;
  background: var(--tile-bg);
  box-shadow: 0 0 0 1px var(--tile-ring), var(--tile-shadow);
  color: #fff;
  text-decoration: none;
  outline: none;
  transform: translateZ(0);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s;
  animation: rise 0.5s cubic-bezier(.2,.8,.2,1) backwards;
}
li:nth-child(2) .tile { animation-delay: 0.06s; }
li:nth-child(3) .tile { animation-delay: 0.12s; }
li:nth-child(n+4) .tile { animation-delay: 0.18s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

.tile img, .tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease;
}
.tile video { opacity: 0; }
.tile.playing video { opacity: 1; }

/* No words until you hover: the name and player badge fade in over a dark fade at the
   bottom (on touch screens, for the tile most in view). */
.shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 14, 0.82) 0%, rgba(8, 9, 14, 0.3) 32%, transparent 55%);
}
.shade, .info { opacity: 0; transition: opacity 0.25s, transform 0.25s cubic-bezier(.2,.8,.2,1); }
.info {
  position: absolute;
  left: clamp(12px, 4cqi, 22px);
  right: clamp(10px, 3.5cqi, 18px);
  bottom: clamp(10px, 3.5cqi, 18px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px 12px;
  transform: translateY(8px);
}
.name {
  font-size: clamp(1.15rem, 6.2cqi, 2.4rem);
  font-weight: 600;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.players {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(10, 12, 18, 0.62);
  backdrop-filter: blur(6px);
  font-weight: 500;
  font-size: clamp(0.8rem, 3.6cqi, 1rem);
}
.players svg { width: 1.1em; height: 1.1em; fill: currentColor; opacity: 0.9; }
.players .one, .players.solo .two { display: none; }
.players.solo .one { display: block; }
/* Someone is in the game right now. */
.players.live { background: rgba(22, 120, 70, 0.85); box-shadow: 0 0 12px rgba(61, 220, 132, 0.45); }

.tile:hover :is(.shade, .info),
.tile:focus-visible :is(.shade, .info),
.tile.active :is(.shade, .info) { opacity: 1; transform: none; }

/* Status dot, only when there's something to know: pulsing amber while a sleeping server wakes up,
   green while people are playing that game right now. No dot = click and play. */
.status {
  position: absolute;
  top: clamp(6px, 6cqi, 12px);
  right: clamp(6px, 6cqi, 12px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(10, 12, 18, 0.5);
  display: none;
}
.tile[data-status="waking"] .status { display: block; background: #ffbf3c; animation: pulse 1.1s ease-in-out infinite; }
.tile[data-live] .status { display: block; background: #3ddc84; box-shadow: 0 0 10px rgba(61, 220, 132, 0.8); animation: none; }
@keyframes pulse { 50% { transform: scale(0.7); opacity: 0.5; } }

@media (hover: hover) {
  .tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--mint), 0 16px 40px rgba(0, 0, 0, 0.45); }
  .tile:hover img, .tile:hover video { transform: scale(1.04); }
}
.tile:focus-visible { box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px var(--mint); }
.tile:active { transform: scale(0.985); }

/* Footer: a single quiet line under the games (Poki-style). */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  padding: 6px 16px max(22px, env(safe-area-inset-bottom));
  font-size: 0.9rem;
  color: var(--muted);
}
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }

/* Patch notes button: top-left of the logo card, mirrors the light/dark switch; dot = unseen notes. */
.notes-btn {
  position: absolute;
  top: 6cqi;
  left: 6cqi;
  display: grid;
  place-items: center;
  width: clamp(24px, 18cqi, 34px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--button);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.notes-btn:hover { background: var(--button-hover); transform: scale(1.08); }
.notes-btn .scroll { font-size: calc(clamp(24px, 18cqi, 34px) * 0.6); line-height: 1; }
.new-dot { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #ff5d8f; box-shadow: 0 0 0 2px var(--panel); }

/* Patch notes overlay (opens over the games). */
#notes { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
#notes::backdrop { background: rgba(8, 12, 24, 0.6); backdrop-filter: blur(4px); }
.notes-panel {
  display: flex;
  flex-direction: column;
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100dvh - 40px);
  margin: 20px auto;
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--panel-ring), 0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.notes-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 4px; }
.notes-top h2 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.notes-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--button); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.notes-close:hover { background: var(--button-hover); }
.notes-updated { margin: 0; padding: 0 18px 8px; color: var(--muted); font-size: 0.9rem; }
.notes-body { overflow-y: auto; padding: 0 18px 18px; overscroll-behavior: contain; }
.notes-day { margin: 14px 0 8px; font-size: 1rem; font-weight: 600; color: var(--muted); }
.note { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--tile-bg); }
.note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.note-head strong { font-weight: 600; }
.note-pic img, .note-pic.hub, .note-pic.emoji { width: 52px; height: 34px; border-radius: 8px; display: grid; place-items: center; object-fit: cover; }
.note-pic.hub { background: var(--panel); } .note-pic.hub .mark { width: 24px; }
.note-pic.emoji { background: var(--panel); font-size: 1.2rem; }
.note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.note li { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 6px; line-height: 1.35; font-family: system-ui, sans-serif; font-size: 0.95rem; }
.chg-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--panel); font-size: 0.95rem; }
.note.milestone { background: linear-gradient(135deg, rgba(63, 217, 173, 0.28), rgba(217, 139, 255, 0.28)); }
.milestone-banner { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
#updated { opacity: 0.85; }
@media (max-width: 600px) {
  .notes-panel { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
}

/* About / Terms / Privacy / 404 pages. */
.doc { max-width: 720px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 16px 8px; }
.doc .back { display: inline-flex; flex-direction: row; gap: 8px; margin-bottom: 18px; font-size: 1.4rem; }
.doc .mark { width: 32px; }
.doc article {
  padding: clamp(20px, 5vw, 40px);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--panel-ring), var(--tile-shadow);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-size: 1.05rem;
}
.doc h1 { margin: 0 0 12px; font-size: clamp(1.7rem, 5vw, 2.2rem); font-weight: 600; line-height: 1.15; }
.doc h2 { margin: 26px 0 6px; font-size: 1.2rem; font-weight: 600; }
.doc p, .doc ul { margin: 0 0 12px; }
.doc ul { padding-left: 1.2em; }
.doc a { color: var(--mint); }
[data-theme="light"] .doc a { color: #0d8a64; }
.doc .updated { color: var(--muted); font-size: 0.92rem; }
.doc .button { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--mint); color: #102034; text-decoration: none; font-weight: 600; }

@media (max-width: 600px) {
  .grid { --gap: 10px; }
  .tile, .logo-card { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}