/* The hub: a simple list of games on a warm, peanut-butter page with a dot
   texture. Each game's thumbnail keeps its own colors. */
:root {
  --page: #f4e4c8;        /* peanut butter */
  --dots: rgba(122, 74, 24, 0.16);
  --panel: #fffaf2;
  --line: #e7d2b0;
  --divider: #f0e2c9;
  --hover: #fbf1e2;
  --ink: #2b1d0e;
  --accent: #c8642c;      /* toasted orange: chevrons, focus */
  --muted: #8a6d4b;
  --texture: radial-gradient(var(--dots) 1px, transparent 1.6px);
  --texture-size: 22px 22px;
  --panel-shadow: 0 1px 2px rgba(43, 29, 14, 0.06), 0 8px 24px rgba(43, 29, 14, 0.06);
  /* Star layers cycle through three tile sizes (--texture-size in dark), so the
     sky doesn't visibly repeat. Each star must sit inside its layer's tile. */
  --stars:
    radial-gradient(1.6px 1.6px at 18px 26px, #ffe9a8cc 50%, transparent 51%),
    radial-gradient(1px 1px at 92px 70px, #ffffff99 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 150px 18px, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, #ffffff77 50%, transparent 51%),
    radial-gradient(2px 2px at 128px 120px, #ffd36ecc 50%, transparent 51%),
    radial-gradient(1px 1px at 34px 92px, #ffffff66 50%, transparent 51%),
    radial-gradient(1px 1px at 40px 152px, #ffffff88 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 210px 60px, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 180px, #ffe9a899 50%, transparent 51%),
    radial-gradient(1px 1px at 165px 100px, #ffffff66 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 80px 40px, #ffd36edd 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 300px 150px, #ffffff99 50%, transparent 51%),
    radial-gradient(1px 1px at 110px 8px, #ffffff77 50%, transparent 51%);
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
/* Dark is a night sky: scattered stars instead of dots, and a lifted panel with a
   gold edge. It follows the system unless the appearance switch picked Light or
   Dark (data-theme on <html>, set before paint). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0e0f1d;        /* night sky */
    --panel: #262734;
    --line: #7a6538;        /* gold, mixed into the sky */
    --divider: #353541;
    --hover: #32333f;
    --ink: #f1ecdf;
    --accent: #ffcf5a;      /* star gold */
    --muted: #9c9cb8;
    --texture: var(--stars);
    --texture-size: 180px 160px, 263px 241px, 337px 311px;
    --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0e0f1d;        /* night sky */
  --panel: #262734;
  --line: #7a6538;        /* gold, mixed into the sky */
  --divider: #353541;
  --hover: #32333f;
  --ink: #f1ecdf;
  --accent: #ffcf5a;      /* star gold */
  --muted: #9c9cb8;
  --texture: var(--stars);
  --texture-size: 180px 160px, 263px 241px, 337px 311px;
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--page);
  background-image: var(--texture);
  background-size: var(--texture-size);
  color: var(--ink);
  font: 600 16px/1.4 var(--font);
}

main {
  position: relative; z-index: 1; /* above the twinkling stars */
  max-width: 560px;
  margin: 0 auto;
  padding: max(56px, env(safe-area-inset-top)) 16px max(48px, env(safe-area-inset-bottom));
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding-inline: 4px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* The shared top-right menu (packages/ui), in the hub's colors. */
peanut-menu {
  --pm-bg: var(--panel); --pm-fg: var(--ink); --pm-muted: var(--muted); --pm-line: var(--line);
  --pm-hover: var(--hover); --pm-accent: var(--accent); --pm-font: var(--font);
}
.mark { display: inline-flex; align-items: center; font-size: 30px; line-height: 1; }
.mark span + span { font-size: 20px; margin: -16px 0 0 -6px; }
.brand h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }

.games {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--panel-shadow);
}
.game {
  display: flex; align-items: center; gap: 14px;
  min-height: 72px; padding: 12px 16px;
  color: inherit; text-decoration: none;
  transition: background-color 120ms ease;
}
.game + .game { border-top: 1px solid var(--divider); }
.game:hover { background: var(--hover); }
.game:active { background: var(--divider); }
.game:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.art { flex: none; width: 72px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.art svg { width: 70px; height: auto; display: block; }
.pour .art { background: #1b2048; }
.logic .art { background: #eef1f6; }

.name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; }
.chev { color: var(--accent); font-size: 26px; line-height: 1; transition: transform 120ms ease; }
.game:hover .chev { transform: translateX(3px); }

/* Twinkling stars (sky.js), dark mode only. Each star rests dim and flashes once
   per cycle; sky.js staggers the cycles. */
.twinkles { display: none; position: fixed; inset: 0; pointer-events: none; }
.twinkles i { position: absolute; border-radius: 50%; background: #fff; opacity: 0.15; animation: twinkle ease-in-out infinite; }
.twinkles i.gold { background: #ffd36e; box-shadow: 0 0 4px rgba(255, 211, 110, 0.6); }
@keyframes twinkle {
  0%, 55%, 100% { opacity: 0.15; transform: scale(1); }
  78% { opacity: 1; transform: scale(1.35); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .twinkles { display: block; } }
:root[data-theme="dark"] .twinkles { display: block; }

/* Small phones: keep the wordmark and the switch on one line without touching. */
@media (max-width: 400px) {
  .brand h1 { font-size: clamp(21px, 6.6vw, 26px); }
  .brand { gap: 8px; }
  .mark { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .game, .chev { transition: none; }
  .twinkles i { animation: none; opacity: 0.5; }
}