/* Layout: a home screen listing the games, each opening on its own screen in
   its own colours (games.css). Home is a dusk slate between the games'
   own backgrounds, with each game's colour only in its little picture. Single dark
   look by design: these are for the evening. */
:root {
  --bg: #11141c;      /* dusk */
  --card: #181c27;
  --card-hover: #1e2330;
  --ink: #e2e6ef;
  --muted: #9aa3b5;
  --faint: #6c7486;
  --line: rgba(226, 230, 239, 0.08);
  --mend: #7fd1b9;
  --oneline: #ffc857;
  --font: "Lexend", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
p, h1 { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.screen { height: 100%; }
.screen-home { background: radial-gradient(50rem 34rem at 50% -8%, #1b2030, transparent 70%), var(--bg); }
.screen-mend { background: radial-gradient(60rem 40rem at 50% -10%, #1d2532, transparent 70%), var(--bg); color: var(--ink); }
.screen-ol { background: radial-gradient(60rem 40rem at 50% -10%, #1a2140, transparent 70%), var(--bg); color: var(--ink); }

/* ---------- home ---------- */

/* Five cards can be taller than a small phone: home grows and scrolls. */
.screen-home { height: auto; }
.home {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(28px, 9vh, 80px) 16px clamp(18px, 4vh, 32px);
  display: flex; flex-direction: column;
  gap: clamp(22px, 5vh, 40px);
}
.title { font-weight: 500; font-size: clamp(34px, 7vh, 44px); letter-spacing: -0.01em; }
.sub { margin-top: 8px; color: var(--muted); font-weight: 300; max-width: 34ch; }

.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.game {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--card);
  color: inherit; text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.game:hover { background: var(--card-hover); }
.game:active { transform: scale(0.99); }
.game:focus-visible { outline: 2px solid var(--muted); outline-offset: 3px; }
.g-pic { width: 56px; height: 56px; fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.game[data-game="mend"] .g-pic { stroke: var(--mend); }
.game[data-game="mend"] .g-pic .loose { stroke: var(--faint); }
.game[data-game="oneline"] .g-pic { stroke: var(--oneline); }
.game[data-game="oneline"] .g-pic circle { fill: var(--oneline); stroke: none; }
.g-text { min-width: 0; display: grid; gap: 2px; }
.g-text b { font-weight: 500; font-size: 18px; }
.g-text span { color: var(--muted); font-size: 14px; font-weight: 300; }
.g-state { color: var(--faint); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.game.done .g-state { color: var(--ink); }
.game[data-game="mend"].done .g-state { color: var(--mend); }
.game[data-game="oneline"].done .g-state { color: var(--oneline); }
.game[data-game="pour"].done .g-state { color: #f2c46d; }
.game[data-game="thread"].done .g-state { color: #7fd1b9; }
.game[data-game="untangle"].done .g-state { color: #8fd3ff; }

.home-foot { margin-top: auto; color: var(--faint); font-size: 14px; font-weight: 300; text-align: center; text-wrap: balance; }
.home-foot.rest { color: var(--ink); }

/* ---------- inside a game ---------- */

.back {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; padding: 6px 8px 6px 0;
  color: var(--muted); font-size: 16px; font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer;
}
.back span { font-size: 22px; line-height: 1; }
.back:hover { color: var(--ink); }
.back:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; border-radius: 6px; }