/*
  The Quiet Board design language v3 ("A quiet place to think"): warm paper, deep lagoon accent, Atkinson Hyperlegible
  for reading and Fraunces for titles, 48px targets, 17px body, shapes plus colour, calm motion.
  The tokens below drive everything; the design layer at the end of this file applies them.
*/
:root {
  --paper: #F6F4EF;
  --card: #FCFBF8;
  --sunk: #ECE9E4;
  --line: #DEDAD3;
  --edge: #838078;
  --ink-1: #191F2B;
  --ink-2: #49505E;
  --ink-3: #636976;
  --lagoon: #136868;
  --lagoon-press: #0E5252;
  --lagoon-soft: #D2EFEC;
  --lagoon-ink: #004141;
  --hint: #7B5518;
  --hint-soft: #F9EACA;
  --clay: #9A4729;
  --clay-soft: #FEE5DB;

  /* names the rest of the site already uses */
  --cloud: var(--paper); --mocha: #59554F; --peach: #E9E1D5; --peri: #5C6784; --gray: var(--ink-3);
  --bg: var(--paper);
  --surface: var(--card);
  --soft: var(--paper);
  --board: var(--sunk);
  --line-strong: var(--edge);
  --text: var(--ink-1);
  --muted: var(--ink-2);
  --ink: var(--lagoon);
  --on-ink: #FFFFFF;
  --tile: #59554F;
  --tile-text: #FFFFFF;
  --tile-home: #E9E1D5;
  --tile-home-text: #2A2724;
  --accent: var(--lagoon);
  --accent-2: var(--lagoon-press);
  --on-accent: #FFFFFF;
  --heart: var(--clay);
  --focus: #138080;
  --shadow: 0 1px 2px rgb(25 31 43 / .05), 0 4px 14px rgb(25 31 43 / .06);
  --radius: 24px;
  --font-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-voice: "Fraunces", "Iowan Old Style", Georgia, serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12161E;
    --card: #1B212C;
    --sunk: #242B38;
    --line: #323A49;
    --edge: #8B93A3;
    --ink-1: #ECEEF2;
    --ink-2: #B6BCC8;
    --ink-3: #9BA2B0;
    --lagoon: #5FC4BC;
    --lagoon-press: #7AD3CC;
    --lagoon-soft: #16403F;
    --lagoon-ink: #A8E8E2;
    --hint: #F0CE8A;
    --hint-soft: #3A2F18;
    --clay: #F3B79C;
    --clay-soft: #3F2A20;
    --on-ink: #06302E;
    --on-accent: #06302E;
    --tile: #8A93A4;
    --tile-text: #FFFFFF;
    --tile-home: #3A4252;
    --tile-home-text: #ECEEF2;
    --focus: #8FDCD5;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .3);
    color-scheme: dark;
  }
}
/* the same, when the player chose dark with the toggle */
:root[data-theme="dark"] {
    --paper: #12161E;
    --card: #1B212C;
    --sunk: #242B38;
    --line: #323A49;
    --edge: #8B93A3;
    --ink-1: #ECEEF2;
    --ink-2: #B6BCC8;
    --ink-3: #9BA2B0;
    --lagoon: #5FC4BC;
    --lagoon-press: #7AD3CC;
    --lagoon-soft: #16403F;
    --lagoon-ink: #A8E8E2;
    --hint: #F0CE8A;
    --hint-soft: #3A2F18;
    --clay: #F3B79C;
    --clay-soft: #3F2A20;
    --on-ink: #06302E;
    --on-accent: #06302E;
    --tile: #8A93A4;
    --tile-text: #FFFFFF;
    --tile-home: #3A4252;
    --tile-home-text: #ECEEF2;
    --focus: #8FDCD5;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .3);
    color-scheme: dark;
  }


* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--accent); }

.wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

header.top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
header.top .title { flex: 1; min-width: 0; }

h1 {
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -.01em;
  margin: 0;
}

.sub { color: var(--muted); margin: 2px 0 0; font-size: .95rem; }

.icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 4px;
}
.menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

/* Games menu */
.scrim {
  position: fixed;
  inset: 0;
  background: rgb(34 28 25 / .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 10;
}
.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(300px, 84vw);
  background: var(--bg);
  box-shadow: var(--shadow);
  padding: 20px 12px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  transform: translateX(-104%);
  transition: transform .35s cubic-bezier(.3, .7, .3, 1);
  z-index: 11;
  visibility: hidden;
}
.drawer-open .scrim { opacity: 1; pointer-events: auto; }
.drawer-open .drawer { transform: none; visibility: visible; }
.drawer-open { overflow: hidden; }

.drawer-home {
  display: block;
  padding: 6px 12px 16px;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text);
  text-decoration: none;
}
.drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
}
.drawer-item:hover, .drawer-item:focus-visible { background: var(--surface); outline: none; }
.drawer-item.current { background: var(--surface); box-shadow: var(--shadow); }
.drawer-item b { display: block; font-weight: 600; }
.drawer-item small { color: var(--muted); }
.mini {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tile);
  color: var(--tile-text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .95rem;
}
.mini.small { font-size: .62rem; }

/* How to play */
.howto {
  margin-top: 28px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px 20px;
  scroll-margin-top: 16px;
  line-height: 1.55;
}
.howto summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 14px 0;
  list-style: none;
}
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: '+'; float: right; color: var(--muted); }
.howto[open] summary::after { content: '–'; }
.howto h3 { font-size: .95rem; margin: 14px 0 4px; font-weight: 700; }
.howto p, .howto ul, .howto ol { margin: 0 0 8px; }
.howto ul, .howto ol { padding-left: 20px; }
.howto > :last-child { margin-bottom: 18px; }

/* Shared game pieces */
.stage { position: relative; }
.status {
  text-align: center;
  color: var(--muted);
  min-height: 1.5em;
  margin: 14px 0 0;
}
.status b { color: var(--text); font-weight: 600; }

/* Hub */
.games { display: grid; gap: 14px; }

.card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform .3s ease;
}
.card:hover { transform: translateY(-2px); }
.card.soon { opacity: .55; pointer-events: none; box-shadow: none; }

.card .icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--tile);
  color: var(--tile-text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.2rem;
}
.card.soon .icon { background: var(--board); color: var(--muted); }
.card h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.card p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }

/* Game */
.stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stats b { color: var(--text); font-weight: 600; }

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--board);
  border-radius: calc(var(--radius) + 4px);
  padding: 8px;
  touch-action: none;
  user-select: none;
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--tile);
  color: var(--tile-text);
  font: inherit;
  font-weight: 600;
  box-shadow: 0 2px 6px rgb(74 59 51 / .15);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.3, .7, .3, 1), background-color .6s ease, color .6s ease;
}
.board.instant .tile { transition: none; }
.tile.home { background: var(--tile-home); color: var(--tile-home-text); }
.tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.controls {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.seg {
  display: flex;
  background: var(--board);
  border-radius: 999px;
  padding: 4px;
  max-width: 100%;
}
.seg button, .btn {
  border: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--muted);
  background: transparent;
}
.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.btn {
  margin-left: auto;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 20px;
}

.hint { color: var(--muted); font-size: .85rem; text-align: center; margin-top: 22px; }

/* Win overlay */
.win {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(3px);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;   /* also out of the keyboard order and away from screen readers until it is shown */
  transition: opacity .8s ease, visibility 0s .8s;
}
.win.show { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .8s ease, visibility 0s; }
.win h2 { margin: 0 0 6px; font-weight: 600; font-size: 1.5rem; }
.win p { margin: 0 0 16px; color: var(--muted); }
.win .btn { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .tile, .card, .win { transition: none; }
}

.card .icon.small { font-size: .78rem; }
.controls { align-items: center; }
.btn.ghost { background: var(--board); color: var(--text); }
.btn:disabled { opacity: .45; cursor: default; }

@keyframes shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.shake { animation: shake .25s ease 2; }
.actions { display: flex; gap: 10px; margin-left: auto; }
.actions .btn { margin-left: 0; }

/* Navigation: search, chips, sections, tiles */
.search {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  box-shadow: var(--shadow);
}
.search:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 2px 4px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--board);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.home-section { margin-top: 26px; }
.home-section h2, .more h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.home-section h2 small { color: var(--muted); font-weight: 600; font-size: .85rem; margin-left: 4px; }
.section-blurb { color: var(--muted); font-size: .9rem; margin: 2px 0 0; }
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.tile-link {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  transition: transform .3s ease;
}
.tile-link:hover { transform: translateY(-2px); }
.tile-link > span:last-child { min-width: 0; }
.tile-link b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.tile-link small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.3; margin-top: 2px; }
.kid { font-style: normal; color: #D9905F; font-size: .8em; }
.kids-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tile-home) 35%, var(--surface));
  color: var(--text);
  text-decoration: none;
}
.kids-banner b { display: block; font-weight: 700; }
.kids-banner small { color: var(--muted); }
.kids-star { font-size: 1.6rem; color: #D9905F; }
.empty { color: var(--muted); text-align: center; margin-top: 32px; }

.drawer-search { margin: 0 0 10px; box-shadow: none; background: var(--surface); }
.drawer-kids {
  display: block;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tile-home) 30%, var(--surface));
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.drawer-heading {
  display: block;
  padding: 16px 12px 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.drawer-empty { color: var(--muted); padding: 12px; }

.more { margin-top: 28px; }
.all-link { display: inline-block; margin-top: 14px; color: var(--accent); text-decoration: none; font-weight: 600; }
.sub a { color: inherit; }

/* Install card on the home page */
.install {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 12px 12px 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.install[hidden] { display: none; }
.install img { border-radius: 10px; flex: none; }
.install > div:nth-child(2) { flex: 1; min-width: 0; }
.install b { display: block; font-weight: 700; font-size: .95rem; }
.install small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.install small b { display: inline; font-size: inherit; color: var(--text); }
.install-actions { display: flex; align-items: center; gap: 6px; }
.install-actions .btn { margin: 0; padding: 8px 14px; }
.install-close { border: 0; background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 6px; }

/* Favourites and progress */
.tile-wrap { position: relative; display: flex; min-width: 0; }
.tile-wrap .tile-link { flex: 1; padding-right: 40px; }
.heart {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.heart:hover, .heart:focus-visible { background: var(--board); outline: none; }
.heart[aria-pressed="true"], .fav-btn[aria-pressed="true"] { color: #D9776A; }
.stat-row { display: flex; gap: 10px; margin-top: 12px; }
.stat-row > div { flex: 1; background: var(--surface); border-radius: 16px; padding: 12px 8px; text-align: center; box-shadow: var(--shadow); }
.stat-row b { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-row small { color: var(--muted); font-size: .78rem; }
.progress-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.progress-actions .btn { margin: 0; padding: 8px 14px; font-size: .88rem; }

/* Keep long game names on one line next to the three header buttons */
@media (max-width: 420px) {
  header.top { gap: 10px; }
  header.top .icon-btn { width: 40px; height: 40px; }
  header.top h1 { font-size: 1.4rem; }
}

/* ---- Calmer home page: hero, shelves, lists ---- */
.home { padding-top: 22px; }
.home .search { margin-top: 0; padding: 10px 18px; box-shadow: none; background: var(--surface); }

.gicon {
  display: grid;
  place-items: center;
  flex: none;
  background: var(--tile);
  color: var(--tile-text);
  font-weight: 700;
  font-size: 1.5rem;
  border-radius: 22px;
}
.gicon.small { font-size: 1rem; }

.hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 24px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tile-home) 55%, var(--surface)), color-mix(in srgb, var(--tile) 22%, var(--surface)));
  box-shadow: var(--shadow);
}
.hero .gicon { width: 68px; height: 68px; border-radius: 20px; }
.hero-text { flex: 1; min-width: 0; }
.hero-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero-text b { display: block; font-size: 1.25rem; font-weight: 700; margin-top: 2px; }
.hero-text small { display: block; color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .95rem;
  padding-left: 3px;
}

.shelf { margin-top: 24px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shelf-head h2, .view-title { font-size: 1.1rem; font-weight: 700; margin: 0; }
.view-title small { color: var(--muted); font-size: .85rem; font-weight: 600; margin-left: 4px; }
.see-all { flex: none; font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin: 12px -16px 0;
  padding: 2px 16px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.gcard { flex: none; width: 84px; scroll-snap-align: start; color: var(--text); text-decoration: none; }
.gcard .gicon { width: 84px; height: 84px; box-shadow: var(--shadow); transition: transform .3s ease; }
.gcard:hover .gicon, .gcard:focus-visible .gicon { transform: translateY(-2px); }
.gname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 7px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.25;
}

.topbar { margin-top: 18px; }
.back { color: var(--accent); text-decoration: none; font-weight: 600; font-size: .95rem; }
.view-title { margin-top: 10px; }
.list {
  margin-top: 12px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.item { display: flex; align-items: center; border-top: 1px solid color-mix(in srgb, var(--muted) 16%, transparent); }
.item:first-child { border-top: 0; }
.item-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 4px 10px 12px; color: var(--text); text-decoration: none; }
.item-link .mini { width: 44px; height: 44px; border-radius: 13px; }
.item-text { min-width: 0; }
.item-text b { display: block; font-weight: 600; font-size: .98rem; line-height: 1.25; }
.item-text small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; margin-top: 1px; }
.item .heart { position: static; flex: none; margin-right: 6px; width: 40px; height: 40px; }

/* Install: one slim line */
.install { margin-top: 26px; padding: 8px 8px 8px 12px; border-radius: 16px; box-shadow: none; gap: 10px; }
.install small { font-size: .78rem; }
.install-actions .btn { padding: 7px 14px; font-size: .88rem; }

/* Progress, folded away at the bottom */
#progress { margin-top: 26px; }
#progress[hidden] { display: none; }
#progress .stat-row { margin-top: 0; }

/* Each section has its own colour, so the shelves are easy to tell apart at a glance */
.rail { scroll-padding-left: 16px; }
.sec-logic { --ic-bg: #A47864; --ic-fg: #FBF7F2; }   /* Mocha Mousse */
.sec-math { --ic-bg: #6667AB; --ic-fg: #FFFFFF; }    /* Very Peri */
.sec-moves { --ic-bg: #EBA786; --ic-fg: #4A3B33; }   /* Peach Fuzz, deeper */
.sec-memory { --ic-bg: #5E8F7A; --ic-fg: #FFFFFF; }  /* a calm sage */
.sec-cards { --ic-bg: #92A8D1; --ic-fg: #26334F; }   /* Serenity */
.gicon, .mini { background: var(--ic-bg, var(--tile)); color: var(--ic-fg, var(--tile-text)); }

/* ---- Motion: gentle moves between pages and states. Everything here switches off for people who ask for less motion. ---- */

/* Pages dissolve into each other where the browser supports cross-page transitions. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mg-out .18s ease both; }
::view-transition-new(root) { animation: mg-in .32s .04s ease both; }
@keyframes mg-out { to { opacity: 0; } }
@keyframes mg-in { from { opacity: 0; transform: translateY(6px); } }

/* A page, and the board on it, settle in rather than appearing. */
.wrap { animation: mg-rise .45s cubic-bezier(.2, .7, .3, 1) both; }
.stage { animation: mg-settle .6s .08s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes mg-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes mg-settle { from { opacity: 0; transform: scale(.975); } }

/* Home page: a new view (another list, a search) fades up, one row after another. */
#view.enter > * { animation: mg-rise .4s cubic-bezier(.2, .7, .3, 1) both; }
#view.enter > :nth-child(2) { animation-delay: .05s; }
#view.enter > :nth-child(3) { animation-delay: .1s; }
#view.enter > :nth-child(4) { animation-delay: .15s; }
#view.enter > :nth-child(n+5) { animation-delay: .2s; }
#view.enter .list > .item { animation: mg-rise .35s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * 25ms); }

/* How to play opens and closes smoothly (browsers without this just open at once). */
.howto { interpolate-size: allow-keywords; }
.howto::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .4s cubic-bezier(.2, .7, .3, 1), content-visibility .4s allow-discrete;
}
.howto[open]::details-content { block-size: auto; }
.howto[open] > :not(summary) { animation: mg-rise .45s cubic-bezier(.2, .7, .3, 1) both; }

/* Buttons answer a touch. */
.btn, .seg button, .icon-btn, .heart, .gcard, .hero, .item-link, .tile-link {
  transition: transform .18s ease, background-color .25s ease, color .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.btn:active, .seg button:active, .icon-btn:active, .heart:active { transform: scale(.94); }
.gcard:active, .hero:active, .tile-link:active { transform: scale(.98); }
.heart[aria-pressed="true"], .fav-btn[aria-pressed="true"] { animation: mg-pop .45s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes mg-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---- Reward when a puzzle is solved: a tick that draws itself, a soft ring of petals, and the message in stages. ---- */
.win > div { max-width: min(92%, 22rem); }
.win .reward { position: relative; height: 64px; margin: 0 auto 6px; display: none; }
.win.celebrate .reward { display: block; }
.win .badge { width: 56px; height: 56px; display: block; margin: 4px auto 0; overflow: visible; }
.win .badge circle { fill: color-mix(in srgb, var(--peach) 35%, transparent); stroke: var(--tile-home); stroke-width: 2.5; }
.win .badge path { fill: none; stroke: var(--text); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.win.celebrate .badge circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: mg-draw .7s .1s ease forwards, mg-glow 1.6s .8s ease-out; transform-origin: center; }
.win.celebrate .badge path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: mg-draw .45s .55s ease forwards; }
@keyframes mg-draw { to { stroke-dashoffset: 0; } }
@keyframes mg-glow { 0% { filter: drop-shadow(0 0 0 transparent); } 40% { filter: drop-shadow(0 0 10px var(--peach)); } 100% { filter: drop-shadow(0 0 0 transparent); } }
.win .reward i {
  position: absolute;
  left: 50%; top: 32px;
  width: 7px; height: 7px;
  margin: -3px;
  border-radius: 50%;
  background: var(--peach);
  opacity: 0;
  pointer-events: none;
}
.win.celebrate .reward i { animation: mg-petal 1.5s calc(.55s + var(--d, 0ms)) cubic-bezier(.15, .7, .3, 1) both; }
.win .reward i:nth-of-type(4n+1) { background: var(--peach); }
.win .reward i:nth-of-type(4n+2) { background: var(--peri); }
.win .reward i:nth-of-type(4n+3) { background: var(--mocha); }
.win .reward i:nth-of-type(4n) { background: var(--tile-home); }
@keyframes mg-petal {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(-18px) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-78px) scale(1); }
}
.win.celebrate h2 { animation: mg-rise .5s .35s cubic-bezier(.3, 1.4, .4, 1) both; }
.win.celebrate p { animation: mg-rise .5s .55s ease both; }
.win.celebrate .extra { animation: mg-rise .5s .75s ease both; }
.win.celebrate .btn { animation: mg-rise .5s .95s ease both; }
.win .extra { margin: -8px 0 14px; color: var(--accent); font-weight: 700; font-size: .9rem; }
.win .extra:empty { display: none; }
.win .next { margin-top: 8px; }
.win .next[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  @view-transition { navigation: none; }
  .win .reward i { display: none; }
}

/* History of the game: always visible, under the folded how-to. */
.history { margin: 6px 0 22px; padding: 0 2px; }
.history h2 { font-size: 1rem; margin: 0 0 6px; font-weight: 700; }
.history p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ---- Kids badge: a small smiling face and the age range ---- */
:root { --kid-bg: #FFDCC6; --kid-fg: #5A3A2A; --kid-face: #FFB98F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kid-bg: #5B4337; --kid-fg: #FFDCC6; --kid-face: #D98E66; } }
/* the same, when the player chose dark with the toggle */
:root[data-theme="dark"] { --kid-bg: #5B4337; --kid-fg: #FFDCC6; --kid-face: #D98E66; }
.kidbadge {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 1px 8px 1px 4px; border-radius: 999px;
  background: var(--kid-bg); color: var(--kid-fg);
  font-size: .68rem; font-weight: 800; letter-spacing: .01em; line-height: 1.5; white-space: nowrap;
}
.kidbadge .kface { width: 14px; height: 14px; flex: none; }
.kidbadge.sm { padding: 1px 7px 1px 3px; font-size: .64rem; }
.item-text b .kidbadge, .hero-text b .kidbadge, .tile-link .kidbadge, .drawer-item .kidbadge { margin-left: 4px; }
.sub .kidbadge { margin-left: 6px; }
.gcard { position: relative; }
.gcard .kidbadge { position: absolute; top: 5px; left: 5px; box-shadow: 0 1px 3px rgb(74 59 51 / .25); }
/* the little face, wherever it appears */
.kface circle:first-child { fill: var(--kid-face); stroke: var(--kid-fg); stroke-width: 1; }
.kface circle:not(:first-child) { fill: var(--kid-fg); }
.kface path { fill: none; stroke: var(--kid-fg); stroke-width: 1.2; stroke-linecap: round; }
.drawer-kids .kface { width: 15px; height: 15px; vertical-align: -2px; }
.shelf-head h2 .kface { width: 17px; height: 17px; vertical-align: -2px; }
.kidbar .kface { width: 16px; height: 16px; vertical-align: -3px; }

/* ---- Switches: kid mode in the header, and the menu's switches ---- */
.kidswitch, .switch { font: inherit; color: var(--text); cursor: pointer; border: 0; }
.kidswitch {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px 0 10px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: .8rem; font-weight: 700;
}
.kidswitch .kface { width: 18px; height: 18px; }
.knob { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--board); transition: background-color .25s; }
.knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .25s cubic-bezier(.3, 1.4, .4, 1); }
[aria-checked="true"] > .knob { background: var(--tile-home); }
[aria-checked="true"] > .knob::after { transform: translateX(14px); }
.kidmode .kidswitch { background: var(--kid-bg); color: var(--kid-fg); }
@media (max-width: 360px) { .kidswitch span { display: none; } }
.drawer-switches { display: grid; gap: 8px; margin: 0 0 12px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.switch span { display: block; font-weight: 700; font-size: .92rem; }
.switch small { display: block; color: var(--muted); font-weight: 600; font-size: .76rem; margin-top: 1px; }

/* ---- Lists: the sheet that saves a game, rows, and the Your lists page ---- */
.rowbtn { flex: none; width: 36px; height: 40px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.rowbtn:hover, .rowbtn:focus-visible { background: var(--board); outline: none; }
.listicon { --ic-bg: var(--board); --ic-fg: var(--text); display: grid; place-items: center; font-size: 1.2rem; }
.lists-link { text-align: center; margin: 22px 0 0; }
.lists-link a { color: var(--accent); font-weight: 700; text-decoration: none; font-size: .95rem; }
.list-actions { display: flex; gap: 8px; margin: 10px 0 4px; }
.list-actions .btn { padding: 8px 16px; font-size: .88rem; margin: 0; }
.newlist, .sheet-new { display: flex; gap: 8px; margin: 12px 0; }
.newlist input, .sheet-new input {
  flex: 1; min-width: 0; border: 0; border-radius: 14px; padding: 12px 14px; font: inherit; font-size: .95rem;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.sheet-new input { background: var(--bg); box-shadow: none; }
.newlist input:focus, .sheet-new input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.newlist input.bad, .sheet-new input.bad { outline: 2px solid #D9776A; }
.newlist .btn, .sheet-new .btn { margin: 0; padding: 10px 18px; }

.sheet-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgb(40 30 25 / .38); opacity: 0; transition: opacity .3s; }
.sheet {
  position: relative; width: min(100%, 32rem); max-height: 82dvh; overflow: auto;
  background: var(--surface); color: var(--text); border-radius: 24px 24px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .3, 1);
}
.sheet-wrap.open .sheet-scrim { opacity: 1; }
.sheet-wrap.open .sheet { transform: none; }
.sheet-wrap.leaving .sheet-scrim { opacity: 0; }
.sheet-wrap.leaving .sheet { transform: translateY(100%); }
.sheet h2 { margin: 0; font-size: 1.15rem; }
.sheet-sub { margin: 2px 0 8px; color: var(--muted); }
.sheet-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid color-mix(in srgb, var(--muted) 16%, transparent); cursor: pointer; }
.sheet-row input { width: 22px; height: 22px; accent-color: var(--peri); flex: none; }
.sheet-row span { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.sheet-row small { color: var(--muted); }
.sheet-done { width: 100%; margin: 6px 0 0; }

/* ---- Kid mode notice on a game for older players ---- */
.kidbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 16px; background: var(--kid-bg); color: var(--kid-fg); }
.kidbar p { flex: 1 1 14rem; margin: 0; font-weight: 700; font-size: .9rem; }
.kidbar .btn { margin: 0; padding: 7px 14px; font-size: .85rem; text-decoration: none; }

/* ---- Focus: while playing, only the game ---- */
/* Entering focus is slow and soft: the header and the rules, history and links fade out first (nothing below the board is removed or
   moved, so the board never jumps), then the header's space closes gently. Leaving reverses it. */
header.top { max-height: 200px; transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1), max-height 1s cubic-bezier(.45, 0, .2, 1) .15s, margin 1s cubic-bezier(.45, 0, .2, 1) .15s, padding 1s cubic-bezier(.45, 0, .2, 1) .15s; }
.howto, .more, .history, .kidbar { transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform .9s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s; }
body.focus-in header.top, body.focus header.top { max-height: 0; opacity: 0; transform: translateY(-8px); overflow: hidden; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
body.focus-in .howto, body.focus-in .more, body.focus-in .history, body.focus-in .kidbar { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition: opacity .9s cubic-bezier(.4, 0, .2, 1) .1s, transform .9s cubic-bezier(.4, 0, .2, 1) .1s, visibility 0s linear 1s; }
.focus-dock { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 14px); right: 14px; z-index: 40; display: flex; gap: 8px; animation: mg-rise .9s .6s cubic-bezier(.2, .7, .3, 1) both; }
.focus-dock[hidden] { display: none; }
.focus-handle {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); box-shadow: var(--shadow);
  font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: .75;
}
.focus-handle:hover, .focus-handle:focus-visible { opacity: 1; }
.focus-fav[aria-pressed="true"] { color: var(--clay); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .focus-dock { animation: none; } header.top, .howto, .more, .history, .kidbar, body.focus-in .howto, body.focus-in .more, body.focus-in .history, body.focus-in .kidbar { transition: none !important; } }

/* ---- Gesture tutorial ---- */
.coach { position: fixed; inset: 0; z-index: 50; pointer-events: none; transition: opacity .3s ease; }
.coach.leaving { opacity: 0; }
.coach-layer { position: fixed; inset: 0; }
.coach-layer[hidden] { display: none; }
.coach-dot {
  position: fixed; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; opacity: 0;
  background: color-mix(in srgb, var(--peri) 60%, transparent); border: 3px solid #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .28); will-change: transform;
}
.coach-ring { position: fixed; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--peri); opacity: 0; }
.coach-card {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 30rem; margin: 0 auto;
  background: var(--surface); color: var(--text); border-radius: 20px; padding: 14px 16px; pointer-events: auto;
  box-shadow: var(--shadow), 0 0 0 1px rgb(0 0 0 / .05); animation: mg-rise .4s both;
}
.coach-text { margin: 0 0 10px; font-weight: 700; line-height: 1.4; }
.coach-foot { display: flex; align-items: center; gap: 8px; }
.coach-steps { flex: 1; display: flex; gap: 6px; }
.coach-steps b { width: 8px; height: 8px; border-radius: 50%; background: var(--board); transition: background-color .3s, transform .3s; }
.coach-steps b.on { background: var(--accent); transform: scale(1.25); }
.coach .btn { margin: 0; padding: 8px 16px; }
.coach-glow { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peri) 40%, transparent); border-radius: var(--radius); transition: box-shadow .4s ease; }
.demo-btn { margin: 2px 0 8px; padding: 8px 16px; font-size: .88rem; }

/* Favourites and lists as one row of chips */
.lists-shelf .chips { padding-top: 4px; padding-bottom: 8px; }
.lists-shelf .chip small { opacity: .7; margin-left: 2px; }
.chip-add { text-decoration: none; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 40%, transparent); color: var(--muted); }
.empty-rail { color: var(--muted); margin: 10px 0 0; font-size: .92rem; }

/* Eight levels (Traffic Jam) still fit a 320px phone: buttons narrow a little on small screens. */
.seg button { min-width: 0; padding-left: clamp(9px, 3vw, 14px); padding-right: clamp(9px, 3vw, 14px); }

/* Menu: categories are folded groups */
.drawer-group { margin: 0; }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; border-radius: 12px; padding: 14px 12px 8px; }
.drawer-heading::-webkit-details-marker { display: none; }
.drawer-heading small { font-weight: 700; opacity: .7; letter-spacing: 0; margin-left: auto; margin-right: 10px; }
.drawer-heading::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .25s ease; opacity: .6; }
.drawer-group[open] > .drawer-heading::after { transform: rotate(45deg); }
.drawer-heading:hover, .drawer-heading:focus-visible { background: var(--surface); outline: none; }
.drawer-all { display: block; padding: 4px 12px 8px; font-size: .84rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.drawer-group[open] > :not(summary) { animation: mg-rise .3s ease both; }

/* Puzzle of the day */
.dailybar { margin: 8px 0 2px; padding: 8px 14px; border-radius: 14px; background: color-mix(in srgb, var(--peri) 14%, var(--surface)); color: var(--text); }
.dailybar p { margin: 0; font-size: .88rem; }
.daily { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 14px 10px 10px; border-radius: 18px; background: color-mix(in srgb, var(--peri) 12%, var(--surface)); color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.daily .gicon { width: 46px; height: 46px; border-radius: 14px; flex: none; }
.daily-text { flex: 1; min-width: 0; }
.daily-text small { display: block; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.daily-text b { display: block; font-weight: 700; font-size: 1rem; line-height: 1.25; }
.daily-state { flex: none; font-size: .85rem; font-weight: 700; color: var(--accent); }
.daily.done { background: var(--surface); }
.daily.done .daily-state { color: var(--muted); }
.daily:active { transform: scale(.985); }

/* Stats page */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; }
.stat-tiles.two { grid-template-columns: repeat(2, 1fr); }
.stat-tile { background: var(--surface); border-radius: 16px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow); }
.stat-tile b { display: block; font-size: 1.5rem; line-height: 1.1; }
.stat-tile small { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.stat-head { font-size: 1rem; margin: 22px 0 8px; }
.stat-head small { color: var(--muted); font-weight: 600; margin-left: 6px; }
.stat-sec { margin: 16px 0 4px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.cal i { aspect-ratio: 1; border-radius: 4px; background: var(--board); }
.cal i.cal-on { background: var(--tile-home); }
.cal i.cal-today { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal i.cal-empty { background: transparent; }
.stat-game { padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--muted) 16%, transparent); }
.stat-game > a { color: var(--text); font-weight: 700; text-decoration: none; }
.stat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.stat-chip { background: var(--surface); border-radius: 999px; padding: 3px 12px; font-size: .82rem; box-shadow: var(--shadow); }
.stat-chip small { color: var(--muted); margin-right: 6px; font-weight: 600; }
.stat-chip b { font-weight: 700; }
@media (max-width: 340px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================================================================
   Design layer: typography, controls, artwork, cards, the tab bar. Later rules win, so this sits at the end.
   Quiet by design: neutral surfaces, hairline borders, tonal artwork, ink buttons, coral only for the active tab and hearts.
   ===================================================================================================================== */
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.006em; color: var(--text); }
a { color: inherit; }
.wrap { max-width: 560px; padding: 18px 16px 56px; }
h1 { font-weight: 700; font-size: 1.45rem; letter-spacing: -.03em; }
.sub { font-size: .88rem; color: var(--muted); }

/* Header */
header.top { gap: 12px; margin-bottom: 16px; }
.icon-btn { width: 40px; height: 40px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: none; font-weight: 600; transition: background-color .2s ease, transform .15s ease; }
.icon-btn:hover { background: var(--board); }
.menu-btn span { width: 16px; height: 1.75px; }
.home header.top { margin-bottom: 14px; }
body:has(.tabbar) .home .menu-btn { display: none; }   /* the Menu tab replaces it; without the tab bar (an old shell.js) the button stays */
.home h1 { color: var(--text); font-size: 1.4rem; font-weight: 700; }
.brand-mark {
  display: inline-block; width: 26px; height: 26px; border-radius: 8px; margin-right: 9px; vertical-align: -6px;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 12%, transparent 13%), radial-gradient(circle at 70% 30%, #fff 0 12%, transparent 13%),
    radial-gradient(circle at 30% 70%, #fff 0 12%, transparent 13%), radial-gradient(circle at 70% 70%, #E8445C 0 12%, transparent 13%),
    #1F1F1F;
}

/* Buttons and choices */
.btn { background: var(--ink); color: var(--on-ink); font-weight: 600; padding: 12px 22px; box-shadow: none; }
.btn:hover { filter: brightness(1.15); }
.btn:active { filter: brightness(.9); }
.btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); }
.btn.ghost:hover { background: var(--board); filter: none; }
.seg { background: var(--board); padding: 4px; }
.seg button { font-weight: 600; color: var(--muted); padding: 9px 15px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }

/* Game page pieces */
.stats { justify-content: space-around; gap: 8px; padding: 12px 8px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--muted); }
.stats span { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stats b { font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; text-transform: none; margin-top: 3px; }
.howto { border: 1px solid var(--line); box-shadow: none; border-radius: 20px; background: var(--surface); }
.howto summary { font-weight: 600; }
.history h2, .more h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.status { color: var(--muted); }
.stage > .grid, .board, .maze, .os, .og, .ws, .cw, .seqrow, .table { box-shadow: inset 0 0 0 1px var(--line); }

/* Artwork: soft tonal tiles. The hue comes from the section (a touch different per game) and stays gentle. */
.gicon, .mini {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, hsl(var(--hh, 28) 36% 93%), hsl(var(--hh, 28) 30% 86%));
  color: hsl(var(--hh, 28) 28% 30%);
}
.gicon::before, .mini::before { content: attr(data-g); position: absolute; right: -6%; bottom: -16%; font-weight: 800; line-height: 1; transform: rotate(-10deg); pointer-events: none; white-space: nowrap; color: hsl(var(--hh, 28) 26% 79%); opacity: .75; }
.gicon::before { font-size: 6.2rem; }
.mini::before { font-size: 2.8rem; }
.gicon::after, .mini::after { display: none; }
.gglyph { position: relative; z-index: 1; text-shadow: none; }
.mini { width: 56px; height: 56px; border-radius: 16px; font-size: 1.25rem; }
.mini.small { font-size: .8rem; }
.drawer-item .mini, .tile-link .mini { width: 44px; height: 44px; border-radius: 13px; font-size: 1.05rem; }
.drawer-item .mini.small, .tile-link .mini.small { font-size: .66rem; }
.listicon { background: var(--board); color: var(--text); }
.listicon::before, .listicon::after { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gicon, :root:not([data-theme="light"]) .mini { background: linear-gradient(160deg, hsl(var(--hh, 28) 12% 24%), hsl(var(--hh, 28) 12% 19%)); color: hsl(var(--hh, 28) 30% 84%); }
  :root:not([data-theme="light"]) .gicon::before, :root:not([data-theme="light"]) .mini::before { color: hsl(var(--hh, 28) 12% 30%); }
}
/* the same, when the player chose dark with the toggle */
:root[data-theme="dark"] .gicon, :root[data-theme="dark"] .mini { background: linear-gradient(160deg, hsl(var(--hh, 28) 12% 24%), hsl(var(--hh, 28) 12% 19%)); color: hsl(var(--hh, 28) 30% 84%); }
  :root[data-theme="dark"] .gicon::before, :root[data-theme="dark"] .mini::before { color: hsl(var(--hh, 28) 12% 30%); }

/* Home: search pill, category chips */
.searchbar { position: relative; }
.searchbar svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.home .search { height: 52px; padding: 0 20px 0 50px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); box-shadow: 0 2px 10px rgb(0 0 0 / .06); font-weight: 500; font-size: 1rem; }
.search::placeholder { color: var(--muted); opacity: 1; font-weight: 500; }
.search:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.cats { display: flex; gap: 8px; overflow-x: auto; margin: 14px -16px 0; padding: 4px 16px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.cats::-webkit-scrollbar { display: none; }
.cats[hidden] { display: none; }
.cat { flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: none; color: var(--text); text-decoration: none; font-weight: 500; font-size: .9rem; scroll-snap-align: start; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.cat:hover { background: var(--board); }
.cat[aria-current] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cat-ic { width: auto; height: auto; border-radius: 0; background: none; color: inherit; font-style: normal; font-size: .95rem; opacity: .7; display: inline; }
.cat[aria-current] .cat-ic { opacity: 1; }

/* Home: the two big cards */
.hero, .daily { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 18px 18px 18px 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .05); color: var(--text); text-decoration: none; }
.hero-text, .daily-text { flex: 1; min-width: 0; }
.hero-label { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.hero-text b { display: block; margin-top: 5px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; }
.hero-text small { display: block; margin-top: 2px; color: var(--muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-link { display: block; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.hero .gicon.hero-art { width: 88px; height: 88px; border-radius: 22px; font-size: 2.3rem; transform: none; box-shadow: none; border: 1px solid hsl(var(--hh, 28) 20% 82%); }
.daily-text small { display: block; color: var(--muted); font-size: .78rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.daily-text b { display: block; margin-top: 5px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.daily-go { display: block; margin-top: 8px; color: var(--text); font-size: .86rem; font-weight: 600; }
.daily.done .daily-go { color: var(--muted); font-weight: 500; }
.calart { flex: none; width: 76px; height: 84px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); overflow: hidden; display: flex; flex-direction: column; transform: none; box-shadow: none; }
.calart i { display: block; padding: 6px 0 5px; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.calart b { flex: 1; display: grid; place-items: center; font-size: 2.1rem; font-weight: 700; color: var(--text); letter-spacing: -.03em; }
.daily.done .calart i { background: var(--muted); }
.hero:active, .daily:active { transform: scale(.99); }

/* Home: shelves of cards */
.shelf { margin-top: 30px; }
.shelf-head { align-items: center; }
.shelf-head h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; }
.see-all { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--board); color: var(--text); transition: background-color .2s ease, transform .15s ease; }
.see-all:hover { background: var(--line-strong); }
.see-all:active { transform: scale(.94); }
.see-all svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail { gap: 14px; margin-top: 14px; padding: 2px 16px 10px; }
.gwrap { position: relative; flex: none; width: 156px; scroll-snap-align: start; }
.gcard { display: block; width: 100%; color: var(--text); text-decoration: none; }
.gcard .gicon { width: 100%; height: auto; aspect-ratio: 1; border-radius: 22px; font-size: 3rem; box-shadow: none; border: 1px solid hsl(var(--hh, 28) 22% 84%); transition: transform .25s ease; }
.gcard .gicon.small { font-size: 1.7rem; }
.gcard:hover .gicon, .gcard:focus-visible .gicon { transform: translateY(-2px); }
.gname { display: block; margin-top: 10px; font-size: .94rem; font-weight: 600; line-height: 1.25; -webkit-line-clamp: 1; letter-spacing: -.01em; }
.gmeta { display: block; margin-top: 1px; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard .kidbadge { position: absolute; top: 9px; left: 9px; background: rgb(255 255 255 / .92); color: #3A3733; box-shadow: none; font-size: .68rem; font-weight: 600; }
.gcard .kidbadge .kface circle:first-child { fill: #EBDDB0; stroke: #4A4538; }
.gcard .kidbadge .kface circle:not(:first-child) { fill: #4A4538; }
.gcard .kidbadge .kface path { stroke: #4A4538; }
.gwrap .heart { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; background: transparent; color: rgb(31 31 31 / .35); -webkit-text-stroke: 1.6px rgb(255 255 255 / .95); paint-order: stroke fill; font-size: 1.45rem; filter: none; }
.gwrap .heart:hover, .gwrap .heart:focus-visible { background: transparent; transform: scale(1.1); }
.gwrap .heart[aria-pressed="true"] { color: var(--heart); }
.empty-rail { color: var(--muted); }

/* Lists of games */
.topbar { margin-top: 14px; }
.back { display: inline-flex; align-items: center; padding: 8px 16px 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 500; font-size: .88rem; text-decoration: none; }
.view-title { margin-top: 18px; font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }
.view-title small { font-weight: 500; }
.list { margin-top: 10px; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.item { border-top: 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item-link { padding: 12px 6px 12px 0; gap: 14px; }
.item-text b { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.item-text small { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item .heart { width: 40px; height: 40px; color: var(--muted); }
.item .heart[aria-pressed="true"] { color: var(--heart); }
.chip { border: 1px solid var(--line-strong); background: var(--surface); font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip-add { background: transparent; border-style: dashed; color: var(--muted); box-shadow: none; }
.lists-link a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }
.install { border: 1px solid var(--line); box-shadow: none; }
#progress { border-radius: 20px; }
.cats:not([hidden]) ~ #view .topbar { display: none; }
.cats:not([hidden]) ~ #view .view-title { margin-top: 6px; }

/* Bottom tab bar (home) */
.home { padding-bottom: 112px; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.tab { flex: 1; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .68rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.tab:active svg { transform: scale(.9); }
.tab[aria-current] { color: var(--accent); }
.tab[aria-current] svg { stroke-width: 2; }

/* Menu */
.drawer { width: min(320px, 88vw); border-radius: 0 24px 24px 0; background: var(--bg); box-shadow: 0 0 60px rgb(0 0 0 / .2); padding-top: 24px; }
.drawer-home { font-weight: 700; font-size: 1.25rem; color: var(--text); letter-spacing: -.03em; }
.drawer-item:hover, .drawer-item:focus-visible { background: var(--board); }
.drawer-item.current { background: var(--board); box-shadow: none; }
.drawer-kids { background: var(--surface); border: 1px solid var(--line); font-weight: 500; }
.drawer-search { background: var(--board); border-radius: 14px; }
.drawer-heading { color: var(--text); font-size: .84rem; letter-spacing: .02em; text-transform: none; font-weight: 700; }
.switch { background: var(--board); }
.scrim { background: rgb(0 0 0 / .35); }
.knob { background: var(--line-strong); }
[aria-checked="true"] > .knob { background: var(--ink); }
[aria-checked="true"] > .knob::after { background: var(--on-ink); }

/* Kids badge and kid mode: neutral */
:root { --kid-bg: #F3F1ED; --kid-fg: #4A4538; --kid-face: #EBDDB0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kid-bg: #2C2C2A; --kid-fg: #E5DFC9; --kid-face: #7A6F4B; } }
/* the same, when the player chose dark with the toggle */
:root[data-theme="dark"] { --kid-bg: #2C2C2A; --kid-fg: #E5DFC9; --kid-face: #7A6F4B; }
.kidswitch { border: 1px solid var(--line-strong); box-shadow: none; background: var(--surface); font-weight: 500; }
.kidmode .kidswitch { background: var(--board); border-color: var(--line-strong); }
.kidbadge { font-weight: 600; }
.dailybar { background: var(--board); border: 0; }
.kidbar { background: var(--board); color: var(--text); }
.tile-link { border: 1px solid var(--line); box-shadow: none; border-radius: 18px; }
.tile-link:hover { background: var(--soft); box-shadow: none; }

/* Stats page */
.st-card { margin-top: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.st-card h3 { margin: 0 0 12px; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.st-card h3 small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.st-hero { display: flex; align-items: center; gap: 22px; }
.st-big { flex: none; text-align: left; padding-right: 22px; border-right: 1px solid var(--line); }
.st-big b { display: block; font-size: 3.4rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.st-big span { display: block; margin-top: 6px; color: var(--muted); font-size: .85rem; }
.st-facts { flex: 1; margin: 0; }
.st-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.st-facts > div:first-child { border-top: 0; padding-top: 0; }
.st-facts > div:last-child { padding-bottom: 0; }
.st-facts dt { color: var(--muted); }
.st-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-card .st-facts > div { border-top: 1px solid var(--line); }
.st-card .st-facts > div:first-child { border-top: 0; }
.cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.cal i { aspect-ratio: 1; border-radius: 3px; background: var(--board); }
.cal i.cal-on { background: var(--ink); }
.cal i.cal-today { outline: 1.5px solid var(--accent); outline-offset: 1px; }
.cal i.cal-empty { background: transparent; }
.st-title { margin: 28px 0 2px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; }
.st-title small { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: .85rem; }
.st-sec { margin: 22px 0 2px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.st-row .mini { width: 44px; height: 44px; border-radius: 13px; font-size: 1.05rem; }
.st-row .mini.small { font-size: .66rem; }
.st-name { flex: 1; min-width: 0; font-weight: 600; font-size: .98rem; color: var(--text); text-decoration: none; letter-spacing: -.01em; }
.st-vals { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; font-size: .88rem; }
.st-vals span { display: flex; gap: 10px; }
.st-vals small { color: var(--muted); font-size: .8rem; }
.st-vals b { font-weight: 600; min-width: 3.6em; text-align: right; }

/* Little pieces that took their colours from the old palette */
.stat-tile, .stat-row > div { border: 1px solid var(--line); box-shadow: none; border-radius: 18px; }
.sheet { border-radius: 24px 24px 0 0; }
.coach-dot { background: color-mix(in srgb, var(--ink) 70%, transparent); border-color: var(--surface); }
.coach-ring { border-color: var(--ink); }
.coach-card { border: 1px solid var(--line); box-shadow: 0 8px 30px rgb(0 0 0 / .14); }
.coach-glow { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.coach-steps b.on { background: var(--ink); }
.win .badge circle { fill: var(--board); stroke: var(--text); }
.win .badge path { stroke: var(--text); }
.win .reward i:nth-of-type(4n+1) { background: #D8D3CA; } .win .reward i:nth-of-type(4n+2) { background: #A9A397; }
.win .reward i:nth-of-type(4n+3) { background: #7C776C; } .win .reward i:nth-of-type(4n) { background: var(--heart); }
.win .extra { color: var(--muted); }
.focus-handle { border: 1px solid var(--line-strong); box-shadow: 0 4px 14px rgb(0 0 0 / .12); }
.demo-btn { margin-top: 2px; }

/* Pieces on a game page take a quiet tone of the game's section colour (--sec-h is set by shell.js) */
body[data-game] { --tile: hsl(var(--sec-h, 28) 14% 38%); --tile-home: hsl(var(--sec-h, 28) 42% 86%); --tile-home-text: #2A2724; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-game] { --tile: hsl(var(--sec-h, 28) 12% 52%); --tile-home: hsl(var(--sec-h, 28) 18% 30%); --tile-home-text: #F1F0EC; } }
/* the same, when the player chose dark with the toggle */
:root[data-theme="dark"] body[data-game] { --tile: hsl(var(--sec-h, 28) 12% 52%); --tile-home: hsl(var(--sec-h, 28) 18% 30%); --tile-home-text: #F1F0EC; }

/* Stats and lists are quiet sub-pages: no search or kid switch on top */
body[data-view="sub"] .searchbar, body[data-view="sub"] .kidswitch { display: none; }
body[data-view="sub"] header.top { margin-bottom: 4px; }
.cal i.cal-on { background: color-mix(in srgb, var(--ink) 78%, var(--bg)); }

/* =====================================================================================================================
   Design language v3 applied: type, targets, controls, tab bar, artwork, messages, motion.
   ===================================================================================================================== */
body { font-family: var(--font-ui); font-size: 17px; line-height: 1.5; letter-spacing: 0; background: var(--paper); color: var(--ink-1); }
h1, h2, .view-title, .st-title, .shelf-head h2, .drawer-home { font-family: var(--font-voice); font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: 1.75rem; line-height: 1.2; }
.sub, .status, .gmeta, .item-text small { color: var(--ink-2); font-size: .94rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; }

/* Touch targets: 48 px */
.icon-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); }
header.top .icon-btn { width: 48px; height: 48px; }
.seg button { min-height: 44px; font-size: .95rem; }
.cat { min-height: 48px; }
.chip { min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.item .heart, .gwrap .heart { width: 48px; height: 48px; }
.back { min-height: 48px; }
.btn { min-height: 52px; border-radius: 16px; font-weight: 700; font-size: 1.05rem; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background-color .12s ease, transform .12s ease; }
.btn:hover { filter: none; background: var(--lagoon-press); }
.btn:active { filter: none; background: var(--lagoon-press); transform: scale(.97); }
.btn.ghost { background: var(--card); color: var(--ink-1); border: 1.5px solid var(--edge); }
.btn.ghost:hover { background: var(--sunk); }

/* Choices: selected = tick + heavier weight + bolder edge + soft fill (never colour alone) */
.seg { background: var(--sunk); border-radius: 18px; }
.seg button { border-radius: 14px; color: var(--ink-2); font-weight: 600; border: 1.5px solid transparent; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink-1); font-weight: 700; box-shadow: none; border-color: var(--ink-1); }
.seg button[aria-pressed="true"]::before { content: "\2713"; margin-right: 6px; font-weight: 700; }
.chip { border: 1px solid var(--edge); background: var(--card); color: var(--ink-1); }
.chip[aria-pressed="true"], .cat[aria-current] { background: var(--lagoon-soft); color: var(--lagoon-ink); border: 2px solid var(--lagoon); font-weight: 700; }
.chip[aria-pressed="true"]::before { content: "\2713"; font-weight: 700; }
.cat { border-color: var(--edge); }

/* Cards and surfaces */
.hero, .daily, .st-card, .howto, .stats, .tile-link, .install { background: var(--card); border: 1px solid var(--line); box-shadow: none; }
.hero, .daily { border-radius: 28px; }
.hero-text b, .daily-text b { font-family: var(--font-voice); font-weight: 600; font-size: 1.3rem; line-height: 1.25; }
.hero-label, .daily-text small { color: var(--ink-3); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.daily-go, .hero-link { color: var(--lagoon); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.daily.done .daily-go { color: var(--ink-2); }
.calart i { background: var(--lagoon); color: #fff; }
.daily.done .calart i { background: var(--ink-3); }
.stats b { font-family: var(--font-voice); font-weight: 600; }
.stats span { color: var(--ink-3); }

/* Tonal artwork: flat, calm tiles; the shape glyph carries identity */
.gicon, .mini { background: hsl(var(--hh, 28) 40% 92%); color: hsl(var(--hh, 28) 40% 24%); border: 1px solid hsl(var(--hh, 28) 24% 84%); }
.gicon::before, .mini::before { color: hsl(var(--hh, 28) 34% 82%); opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gicon, :root:not([data-theme="light"]) .mini { background: hsl(var(--hh, 28) 16% 22%); } }
/* the same, when the player chose dark with the toggle */
:root[data-theme="dark"] .gicon, :root[data-theme="dark"] .mini { background: hsl(var(--hh, 28) 16% 22%); }
.gcard .gicon { border-radius: 26px; }
.gname { font-size: 1rem; font-weight: 700; }
.gwrap .heart { color: rgb(25 31 43 / .45); }
.gwrap .heart[aria-pressed="true"], .item .heart[aria-pressed="true"] { color: var(--clay); }
.kidbadge, .gcard .kidbadge { background: var(--card); color: var(--ink-2); border: 1px solid var(--line); }

/* Tab bar: four destinations, the active one gets a pill, a heavier stroke and a bolder label */
.tabbar { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--line); padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); }
.tab { max-width: none; color: var(--ink-2); font-family: var(--font-ui); font-size: .8rem; font-weight: 600; gap: 4px; min-height: 56px; }
.tab svg { width: 24px; height: 24px; stroke-width: 2; }
.tab .pill { width: 64px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background-color .24s ease; }
.tab[aria-current] { color: var(--lagoon-ink); font-weight: 700; }
.tab[aria-current] .pill { background: var(--lagoon-soft); }
.tab[aria-current] svg { stroke: var(--lagoon-ink); stroke-width: 2.25; }
.home { padding-bottom: 120px; }
body:has(.tabbar) .home .menu-btn { display: grid; }

/* Home header and search */
.home h1 { font-family: var(--font-voice); font-size: 1.9rem; }
.brand-mark { background: var(--lagoon); }
.home .search { height: 52px; border: 1.5px solid var(--edge); background: var(--card); box-shadow: none; border-radius: 16px; font-size: 1rem; }
.search:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Lists and stats */
.item-link { min-height: 72px; }
.item-text b { font-size: 1.05rem; font-weight: 700; }
.see-all { width: 48px; height: 48px; background: var(--sunk); }
.st-big b { font-family: var(--font-voice); font-weight: 600; }
.st-card h3 { font-weight: 700; }
.cal i { border-radius: 6px; }
.cal i.cal-on { background: var(--lagoon); }
.cal i.cal-today { outline: 2px solid var(--ink-1); }
.st-sec { color: var(--ink-3); }

/* Messages, win overlay, sheets */
.dailybar, .kidbar { background: var(--lagoon-soft); color: var(--lagoon-ink); border-radius: 16px; }
.empty { color: var(--ink-2); }
.sheet { background: var(--card); border-radius: 28px 28px 0 0; }
.win .badge circle { fill: var(--lagoon-soft); stroke: var(--lagoon); }
.win .badge path { stroke: var(--lagoon); }
.win .reward i:nth-of-type(odd) { background: var(--lagoon-soft); }
.win .reward i:nth-of-type(even) { background: var(--hint-soft); }
.coach-dot { background: color-mix(in srgb, var(--lagoon) 75%, transparent); }
.coach-ring { border-color: var(--lagoon); }
.coach-glow { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lagoon) 25%, transparent); }
.coach-steps b.on { background: var(--lagoon); }
[aria-checked="true"] > .knob { background: var(--lagoon); }
[aria-checked="true"] > .knob::after { background: #fff; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 420px) { .home h1 { font-size: 1.55rem; white-space: nowrap; } .brand-mark { display: none; } }

/* Plates replace the text glyph; and a smaller, calmer scale (15px body) */
[data-plated]::before, [data-plated]::after { display: none !important; }
.gicon[data-plated], .mini[data-plated] { padding: 0; background: none; border: 0; }
.plate { display: block; width: 100%; height: 100%; border-radius: inherit; }
.gicon[data-plated] .plate, .mini[data-plated] .plate { border-radius: inherit; }

body { font-size: 15px; }
h1 { font-size: 1.4rem; }
.home h1 { font-size: 1.5rem; }
@media (max-width: 420px) { .home h1 { font-size: 1.4rem; } }
.sub, .status, .gmeta, .item-text small { font-size: .84rem; }
.wrap { padding: 14px 14px 48px; }
.icon-btn, header.top .icon-btn { width: 42px; height: 42px; }
.btn { min-height: 46px; font-size: .95rem; padding: 0 20px; border-radius: 14px; }
.seg button { min-height: 38px; font-size: .86rem; padding: 6px 12px; }
.cat { min-height: 40px; font-size: .84rem; padding: 6px 13px 6px 10px; }
.chip { min-height: 34px; font-size: .84rem; }
.back { min-height: 40px; font-size: .84rem; }
.home .search { height: 46px; font-size: .92rem; border-radius: 14px; }
.hero, .daily { padding: 14px 14px 14px 18px; gap: 12px; margin-top: 12px; border-radius: 22px; }
.hero-text b, .daily-text b { font-size: 1.1rem; }
.hero-label, .daily-text small { font-size: .7rem; }
.hero .gicon.hero-art { width: 72px; height: 72px; border-radius: 18px; }
.calart { width: 64px; height: 72px; }
.calart b { font-size: 1.7rem; }
.shelf { margin-top: 22px; }
.shelf-head h2, .view-title { font-size: 1.15rem; }
.view-title { font-size: 1.35rem; }
.gwrap { width: 128px; }
.gcard .gicon { border-radius: 22px; }
.gname { font-size: .88rem; margin-top: 8px; }
.mini { width: 48px; height: 48px; border-radius: 14px; }
.drawer-item .mini, .tile-link .mini, .st-row .mini { width: 40px; height: 40px; border-radius: 12px; }
.item-link { min-height: 60px; }
.item-text b { font-size: .95rem; }
.see-all { width: 40px; height: 40px; }
.item .heart, .gwrap .heart { width: 42px; height: 42px; }
.stats { padding: 10px 6px; }
.stats b { font-size: 1.05rem; }
.stats span { font-size: .62rem; }
.howto { border-radius: 18px; }
.tabbar { padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); }
.tab { font-size: .7rem; min-height: 48px; gap: 2px; }
.tab svg { width: 22px; height: 22px; }
.tab .pill { width: 56px; height: 28px; border-radius: 14px; }
.home { padding-bottom: 96px; }
.st-big b { font-size: 2.6rem; }
.st-card { padding: 14px 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plate { filter: brightness(.66) saturate(.8); } }
/* the same, when the player chose dark with the toggle */
:root[data-theme="dark"] .plate { filter: brightness(.66) saturate(.8); }

.sec-seek { --ic-bg: #6FA3A0; --ic-fg: #FFFFFF; }

/* Puzzle of the day and Continue playing sit side by side */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.duo > .daily, .duo > .hero { margin-top: 0; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 22px; min-width: 0; }
.duo > .daily .calart, .duo > .hero .gicon.hero-art { order: -1; width: 52px; height: 52px; border-radius: 14px; }
.duo > .daily .calart { height: 58px; }
.duo > .daily .calart b { font-size: 1.35rem; }
.duo > .daily .calart i { padding: 4px 0 3px; font-size: .56rem; }
.duo > .daily .daily-text, .duo > .hero .hero-text { width: 100%; }
.duo .hero-text b, .duo .daily-text b { font-size: 1rem; line-height: 1.25; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.duo .hero-text small, .duo .hero-link { display: none; }
.duo .hero-label, .duo .daily-text small { font-size: .62rem; }
.duo .daily-go { margin-top: 6px; font-size: .8rem; }
.duo > :only-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.duo > :only-child .hero-text small { display: block; }
@media (max-width: 420px) { .home h1 { font-size: 1.15rem; } .home .kidswitch { padding: 6px 10px; font-size: .78rem; gap: 6px; } .home header.top { gap: 8px; } }

/* The two home cards match: same art size, centred, name only */
.duo > .daily, .duo > .hero { align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 16px 12px; }
.duo > .daily .calart, .duo > .hero .gicon.hero-art { order: -1; width: 60px; height: 60px; border-radius: 16px; flex: none; }
.duo > .daily .calart i { padding: 5px 0 4px; font-size: .56rem; }
.duo > .daily .calart b { font-size: 1.45rem; }
.duo > .daily .daily-text, .duo > .hero .hero-text { text-align: center; }
.duo .hero-text b, .duo .daily-text b { font-size: 1.02rem; margin-top: 4px; -webkit-line-clamp: 2; }
.duo .daily-go { display: none; }
.duo > :only-child { grid-column: 1 / -1; }
@media (max-width: 420px) {
  /* Make room for the full title: the Kid mode label stays for screen readers, the face and the switch remain */
  .home .kidswitch { position: relative; }
  .home .kidswitch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .home h1 { font-size: 1.3rem; }
}
/* Once the fade has finished the final state is set outright (no transition), so nothing depends on animations running. */
body.focus header.top, body.focus .howto, body.focus .more, body.focus .history, body.focus .kidbar { transition: none; }
body.focus .howto, body.focus .more, body.focus .history, body.focus .kidbar { opacity: 0; visibility: hidden; pointer-events: none; }

/* Light/dark toggle in the home header */
.theme-btn { flex: none; display: grid; place-items: center; color: var(--ink-2); }
.theme-btn:hover { background: var(--sunk); color: var(--ink-1); }

/* About page */
.about { padding-bottom: 24px; }
.about h3 { margin: 22px 0 6px; font-family: var(--font-voice); font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; }
.about p { margin: 0 0 4px; color: var(--ink-2); line-height: 1.6; }