/* The Daily Set
   Layout: one calm column on cool porcelain paper for the home screen;
   game screens are full-height app views with a slim top bar.
   Each game owns one solid color (--accent); the shell stays ink and paper. */
:root {
  --paper: #EEF1F0;
  --surface: #FFFFFF;
  --wash: #E3E8E6;
  --ink: #15201D;
  --ink-soft: #2C3834;
  --muted: #5B6864;
  --line: #D6DDDA;
  --line-strong: #B4BFBB;
  --on-ink: #F4F7F6;
  --warn: #A1461B;
  --solved: #2F7D5B;
  --coach-bg: #15201D;
  --coach-ink: #F4F7F6;
  --coach-ring: #E3A21A;
  --scrim: rgba(13, 20, 18, 0.42);
  --shadow-pop: 0 14px 34px rgba(21, 32, 29, 0.16), 0 2px 6px rgba(21, 32, 29, 0.08);
  --accent: #15201D;
  --sq-green: #2F7D5B;
  --sq-yellow: #B8890F;
  --sq-orange: #E5703A;
  --sq-red: #B3302C;
  --sq-blue: #3E8FD8;
  --sq-purple: #9B6BC4;
  --sq-blank: transparent;
  --sun: #FFF1C2;
  --sun-line: #F0D37A;
  --press: rgba(21, 32, 29, 0.22);

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: 14px;
  --bar-h: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1513;
    --surface: #18201D;
    --wash: #222C29;
    --ink: #E7EDEA;
    --ink-soft: #C9D3CF;
    --muted: #94A29D;
    --line: #2A3430;
    --line-strong: #3E4A46;
    --on-ink: #0F1513;
    --warn: #E58A5C;
    --solved: #4FA27B;
    --coach-bg: #E7EDEA;
    --coach-ink: #0F1513;
    --coach-ring: #F0B53A;
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 14px 34px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --accent: #E7EDEA;
    --sun: #2B2715;
    --sun-line: #4D4422;
    --press: rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1513;
  --surface: #18201D;
  --wash: #222C29;
  --ink: #E7EDEA;
  --ink-soft: #C9D3CF;
  --muted: #94A29D;
  --line: #2A3430;
  --line-strong: #3E4A46;
  --on-ink: #0F1513;
  --warn: #E58A5C;
  --solved: #4FA27B;
  --coach-bg: #E7EDEA;
  --coach-ink: #0F1513;
  --coach-ring: #F0B53A;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 14px 34px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --accent: #E7EDEA;
  --sun: #2B2715;
  --sun-line: #4D4422;
  --press: rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  height: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}
@supports (height: 100dvh) {
  html { height: 100dvh; }
}
body {
  height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.app { height: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--coach-ring); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.boot { padding: 40px 16px; text-align: center; color: var(--muted); }
.error { padding: 24px 0; color: var(--warn); text-align: center; }
.icon { display: inline-flex; width: 22px; height: 22px; flex: none; }
.icon svg { width: 100%; height: 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 90ms ease, background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.btn { box-shadow: 0 3px 0 var(--line-strong); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-strong); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
.btn .icon { width: 19px; height: 19px; }
.btn-primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--press); }
.btn-primary:active { box-shadow: 0 1px 0 var(--press); }
.btn-sm { height: 38px; padding: 0 13px; font-size: 0.88rem; border-radius: 9px; }
.btn-sm .icon { width: 17px; height: 17px; }
.btn-wide { width: 100%; }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink-soft); box-shadow: none; }
.btn-quiet:active { box-shadow: none; }
.btn-danger { color: var(--warn); border-color: currentColor; background: transparent; }
.btn-coach { background: var(--coach-ink); color: var(--coach-bg); border-color: var(--coach-ink); box-shadow: none; }
@media (hover: hover) {
  .btn:not(:disabled):hover { border-color: var(--ink-soft); }
  .btn-primary:not(:disabled):hover { background: var(--ink-soft); border-color: var(--ink-soft); }
  .btn-coach:not(:disabled):hover { opacity: 0.9; border-color: var(--coach-ink); }
}
.icon-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex: none;
  transition: background-color 140ms ease;
}
.icon-btn-sm { width: 36px; height: 36px; background: var(--surface); border: 1px solid var(--line); }
.icon-btn-sm .icon { width: 18px; height: 18px; }
@media (hover: hover) { .icon-btn:hover { background: var(--wash); } }
.link-btn {
  border: 0;
  background: none;
  padding: 8px 6px;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
@media (hover: hover) { .link-btn:hover { text-decoration-color: currentColor; } }

/* ---------- Game tile (the colored square for each game) ---------- */
.game-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  flex: none;
  background: var(--accent);
  color: #FFFFFF;
}
.game-tile svg { width: 26px; height: 26px; }
.game-tile-sm { width: 26px; height: 26px; border-radius: 7px; }
.game-tile-sm svg { width: 16px; height: 16px; }

/* ---------- Home ---------- */
.home-wrap {
  max-width: 660px;
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  padding-block: 14px 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { display: inline-flex; gap: 3px; }
.brand-mark i { display: block; width: 9px; height: 18px; border-radius: 3px; background: var(--accent); animation: hop 520ms cubic-bezier(.3,.7,.4,1.4) both; }
.brand-mark i:nth-child(2) { animation-delay: 90ms; }
.brand-mark i:nth-child(3) { animation-delay: 180ms; }
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.masthead-tools { display: flex; align-items: center; gap: 2px; }

.dateline { display: grid; gap: 8px; padding-block: 6px 2px; }
.archive-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.archive-tag .icon { width: 14px; height: 14px; }
.archive-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.archive-link {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: 600 0.95rem var(--font-body);
  cursor: pointer;
}
.archive-link .icon { width: 17px; height: 17px; }
.archive-link:hover { color: var(--ink); background: var(--wash); }
.archive-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.date-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 8.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.date-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 0.95rem;
}
.dot { color: var(--line-strong); }
.notice {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--wash);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.section-note { color: var(--muted); font-size: 0.95rem; text-wrap: pretty; }

.sprint-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 18px;
  background: var(--sun);
  border: 1.5px solid var(--sun-line);
}
.sprint-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--ink);
  color: var(--on-ink);
}
.sprint-icon .icon { width: 19px; height: 19px; }
.sprint-text { display: grid; gap: 1px; min-width: 0; }
.sprint-title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.sprint-sub { color: var(--muted); font-size: 0.88rem; }
.sprint-card .btn-sm { height: 40px; padding: 0 16px; }
.sprint-card.is-done { background: var(--surface); border-color: var(--line); }
.sprint-summary { display: grid; gap: 14px; }
.splits { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.split-name { font-weight: 700; }
.split-result { color: var(--muted); font-size: 0.9rem; text-align: right; }
.split-result.is-missed { color: var(--warn); }
.split-time { min-width: 4.5ch; text-align: right; font-weight: 700; }
.splits li { list-style: none; }
.split-btn {
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  margin: 0;
  padding: 9px 4px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
}
.split-btn:hover { background: var(--wash); }
.split-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 8px; }
.split-go { width: 16px; height: 16px; color: var(--muted); }

.game-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.game-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 18%, var(--line));
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 140ms ease;
}
.game-row:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 18%, var(--line)); }
.game-row .game-tile { transition: transform 220ms cubic-bezier(.3,.7,.4,1.5); }
@media (hover: hover) {
  .game-row:not(.is-disabled):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .game-row:not(.is-disabled):hover .game-tile { transform: rotate(-6deg) scale(1.05); }
}
.game-row.is-disabled { cursor: default; }
.game-row.is-disabled .game-tile { opacity: 0.45; }
.game-row.is-disabled .game-row-text { opacity: 0.6; }
.game-row-text { display: grid; gap: 1px; min-width: 0; }
.game-row-name { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -0.01em; }
.game-row-tag { color: var(--muted); font-size: 0.92rem; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--wash);
  color: var(--ink-soft);
  white-space: nowrap;
}
.status-chip .icon { width: 16px; height: 16px; }
.status-chip.is-play { background: var(--accent); color: var(--paper); }
.game-row-result { font-weight: 700; }
.game-row-result.is-solved { color: var(--solved); }
.game-row-result.is-missed { color: var(--warn); }
.status-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--paper);
  background: var(--solved);
}
.status-badge.is-missed { background: var(--warn); }
.status-badge .icon { width: 19px; height: 19px; }
.game-row-compact { padding: 12px; }
.row-arrow { color: var(--muted); }

.done-card {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}
.done-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; text-align: center; }
.done-card .btn { margin-top: 8px; }

@media (max-width: 380px) {
  .game-row { grid-template-columns: auto minmax(0, 1fr); }
  .game-row .status-chip { grid-column: 2; justify-self: start; }
}

/* ---------- App screens (game, sprint, tutorial) ---------- */
.screen.game-screen, .screen.sprint-screen, .screen.tutorial-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.topbar {
  flex: none;
  height: var(--bar-h);
  display: grid;
  grid-template-columns: minmax(42px, 1fr) auto minmax(42px, 1fr);
  align-items: center;
  gap: 8px;
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.topbar > :first-child { justify-self: start; }
.topbar-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-num { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.topbar-right { justify-self: end; display: flex; align-items: center; gap: 4px; }
.game-host {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.finish-bar {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  padding-block: 10px;
}
.finish-bar-inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.finish-bar-text { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sprint */
.sprint-progress { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sprint-progress li { width: 20px; height: 6px; border-radius: 3px; background: var(--line); transition: background-color 200ms ease; }
.sprint-progress li.is-current { background: var(--accent); }
.sprint-progress li.is-done { background: var(--ink); }
.sprint-clock { font-weight: 700; font-size: 1.05rem; min-width: 4.4ch; text-align: right; }
.cover {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--bar-h);
  bottom: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--paper);
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  animation: fade-in 180ms ease-out;
}
.cover-card { display: grid; gap: 10px; justify-items: center; text-align: center; width: min(320px, 100%); }
.cover-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cover-time { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.cover-note { color: var(--muted); }
.cover-card .btn { margin-top: 10px; }
.count-num { font-size: 5.5rem; font-weight: 700; line-height: 1; }
.count-num.pop, .between-mark { animation: count-pop 360ms cubic-bezier(.2,.9,.3,1.3); }
@keyframes count-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.between-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  background: var(--solved);
}
.between-mark.is-missed { background: var(--warn); }
.between-mark .icon { width: 34px; height: 34px; }
.sprint-final {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding-block: 32px 40px;
  display: grid;
  gap: 18px;
  text-align: left;
}
.sprint-final > .cover-eyebrow { text-align: center; }
.final-time { font-size: 4rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; text-align: center; }
.final-actions { display: flex; gap: 10px; }
.final-actions .btn { flex: 1; }

/* Tutorial coach */
.coach {
  flex: none;
  margin: 12px auto 0;
  width: calc(100% - 32px);
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--coach-bg);
  color: var(--coach-ink);
}
.coach-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.coach-step { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.coach-text { font-size: 0.98rem; line-height: 1.4; text-wrap: pretty; }
.coach-actions { flex: none; }
.coach-actions:empty { display: none; }
.coach.nudge { animation: coach-in 300ms cubic-bezier(.2,.8,.3,1); }
@keyframes coach-in { from { transform: translateY(-4px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.coach-target {
  position: relative;
  z-index: 2;
  animation: coach-ring 1.3s ease-in-out infinite;
}
@keyframes coach-ring {
  0%, 100% { box-shadow: 0 0 0 2px var(--coach-ring); }
  50% { box-shadow: 0 0 0 5px var(--coach-ring); }
}

/* ---------- Sheets ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 200ms ease;
}
.scrim.is-open { opacity: 1; }
.sheet {
  width: 100%;
  max-width: 520px;
  max-height: 88%;
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border-radius: 26px 26px 0 0;
  padding: 18px var(--gutter-r) calc(20px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  box-shadow: var(--shadow-pop);
  transform: translateY(24px);
  transition: transform 240ms cubic-bezier(.2,.8,.3,1);
  outline: none;
}
.scrim.is-open .sheet { transform: none; }
.scrim.is-leaving .sheet { transform: translateY(24px); }
@media (min-width: 640px) {
  .scrim { align-items: center; padding: 24px; }
  .sheet { border-radius: 26px; padding: 22px 24px 24px; }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sheet-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.sheet-close { margin-right: -8px; }
.sheet-body { display: grid; gap: 14px; }
.sheet-body > p { color: var(--ink-soft); }
.sheet-actions { display: flex; gap: 10px; margin-top: 20px; }
.sheet-actions .btn { flex: 1; }
.picker { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.copybox {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-size: 1rem;
  resize: none;
}

.result-head { display: grid; gap: 2px; }
.result-verdict { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; letter-spacing: -0.03em; line-height: 1.05; }
.result-head.is-solved .result-verdict { color: var(--solved); }
.result-summary { color: var(--muted); font-weight: 700; }
.result-detail { color: var(--ink-soft); }
.result-grid { display: grid; gap: 5px; justify-content: start; }
.result-grid-row { display: flex; gap: 5px; }
.sq { width: 22px; height: 22px; border-radius: 5px; background: var(--sq-blank); }
.sq-green { background: var(--sq-green); }
.sq-yellow { background: var(--sq-yellow); }
.sq-orange { background: var(--sq-orange); }
.sq-red { background: var(--sq-red); }
.sq-blue { background: var(--sq-blue); }
.sq-purple { background: var(--sq-purple); }
.sq-blank { background: transparent; box-shadow: inset 0 0 0 2px var(--line-strong); }

/* Settings */
.setting { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.setting-text { display: grid; gap: 2px; min-width: 0; }
.setting-label { font-weight: 700; }
.setting-hint { color: var(--muted); font-size: 0.88rem; }
legend.setting-label { padding: 0; margin-bottom: 10px; }
.about { gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.about h3 { margin: 0; font-size: 1rem; }
.about-text { margin: 0; color: var(--muted); line-height: 1.45; }
.about-credit { margin: 4px 0 0; font-family: var(--font-display); font-weight: 800; }
.seg { display: flex; padding: 4px; gap: 4px; border-radius: 11px; background: var(--wash); }
.seg-option { flex: 1; position: relative; }
.seg-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-option span {
  display: block;
  text-align: center;
  padding: 9px 6px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--muted);
}
.seg-option input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.seg-option input:focus-visible + span { outline: 3px solid var(--coach-ring); }
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 50px;
  height: 30px;
  margin: 0;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 160ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch:checked { background: var(--solved); }
.switch:checked::after { transform: translateX(20px); }

/* ---------- Confetti ---------- */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 300; }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + 12px);
  z-index: 200;
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.toast {
  max-width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  box-shadow: var(--shadow-pop);
  animation: toast-in 180ms ease-out;
}
.toast.is-leaving { opacity: 0; transition: opacity 240ms ease; }
@keyframes toast-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .coach-target { box-shadow: 0 0 0 4px var(--coach-ring); }
}

/* ---------- Set tabs (Daily / Geography) ---------- */
.set-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 18px;
  background: var(--wash);
}
.set-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.set-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--line-strong);
}
.set-tab-dots { display: inline-flex; gap: 2px; }
.set-tab-dots i { width: 5px; height: 13px; border-radius: 2px; background: var(--accent); opacity: 0.35; }
.set-tab-dots i.is-done { opacity: 1; }
.set-tab.is-active .set-tab-dots i { opacity: 0.55; }
.set-tab.is-active .set-tab-dots i.is-done { opacity: 1; }
.set-tab-count { font-family: var(--font-body); font-size: 0.8rem; font-variant-numeric: tabular-nums; opacity: 0.8; }
.set-panel { display: flex; flex-direction: column; gap: 22px; }
.done-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.done-card .btn { margin-top: 0; }
.picker-group { display: grid; gap: 8px; }
.picker-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 380px) {
  .set-tab-dots { display: none; }
}
@media (max-width: 430px) {
  .set-tab { gap: 6px; padding-inline: 8px; }
}
.cover.is-tappable { cursor: pointer; }
.cover-summary { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.1; }
.cover-stay { margin-top: 6px; }