/* Meowdoku Solver — warm, calm, and legible in both themes. */

:root {
  --bg: #f6efe9;
  --bg-tint: #efe4da;
  --surface: #fffdfb;
  --surface-2: #f7f1ec;
  --ink: #3a2f2a;
  --ink-soft: #7c6a60;
  --ink-faint: #a3928a;
  --line: #e6d9cf;
  --accent: #2f8f5b;
  --accent-soft: #e3f2e8;
  --accent-ink: #1f6b42;
  --warn: #9a6416;
  --warn-soft: #fdf0d8;
  --danger: #b23c2f;
  --shadow: 0 1px 2px rgba(58, 47, 42, .05), 0 8px 24px rgba(58, 47, 42, .07);
  --shadow-lg: 0 2px 4px rgba(58, 47, 42, .06), 0 18px 48px rgba(58, 47, 42, .12);
  --radius: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171310;
    --bg-tint: #201a16;
    --surface: #241d19;
    --surface-2: #2c2420;
    --ink: #f2e8e1;
    --ink-soft: #bcaaa0;
    --ink-faint: #8d7b72;
    --line: #3a2f29;
    --accent: #4bb37b;
    --accent-soft: #1e3b2b;
    --accent-ink: #7fd7a4;
    --warn: #e0ac5c;
    --warn-soft: #372a15;
    --danger: #e08072;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--bg-tint), transparent 70%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
        "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; }

/* ---------------------------------------------------------------- header */

header { text-align: center; padding: 56px 0 32px; }
@media (max-width: 900px) {
  header { padding: 28px 0 20px; }
  header p { font-size: .95rem; }
  .cols { gap: 16px; }
}

h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
}

header p {
  margin: 10px auto 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

/* ---------------------------------------------------------------- upload */

.drop {
  background: var(--surface);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 44px 24px;
  text-align: center;
  transition: border-color .18s, background .18s, transform .18s;
  cursor: pointer;
}
.drop:hover, .drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drop.over { transform: scale(1.008); }
.drop h2 { margin: 0 0 6px; font-size: 1.12rem; font-weight: 650; }
.drop p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.drop .kbd {
  font: inherit; font-size: .85em; padding: 1px 6px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
}

.samples {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px;
}
.samples span { color: var(--ink-faint); font-size: .9rem; align-self: center; }

/* --------------------------------------------------------------- buttons */

button {
  font: inherit;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--accent);
  color: #fff;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s, transform .08s, background .15s, border-color .15s;
}
button:hover:not(:disabled) { filter: brightness(1.06); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .42; cursor: default; }
button.ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  font-weight: 500;
}
button.ghost:hover:not(:disabled) { border-color: var(--ink-faint); }
button.icon {
  width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center;
  font-size: 1.1rem;
}

/* ---------------------------------------------------------------- layout */

.stage { display: none; }
.stage.on { display: block; animation: riseIn .4s ease both; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ----------------------------------------------------------------- board */

.board-card { padding: 18px; position: sticky; top: 20px; }

/* On a phone the panel sits under the board, so pin the board to the top and
   cap its height — otherwise it scrolls away while you read the step. */
@media (max-width: 900px) {
  .board-card {
    top: 0; border-radius: 0 0 var(--radius) var(--radius);
    z-index: 5; padding: 12px; margin: 0 -20px;
    box-shadow: var(--shadow-lg);
  }
  #board { max-width: min(100%, 52vh); margin: 0 auto; }
}

#board {
  display: grid;
  gap: 2.2%;
  aspect-ratio: 1;
  width: 100%;
}

.cell {
  position: relative;
  border-radius: 17%;
  display: grid;
  place-items: center;
  transition: opacity .28s ease, box-shadow .25s ease, transform .28s ease;
  animation: tileIn .45s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 7ms);
}

/* Dimming must still read as a board: enough contrast to follow the cats and
   crosses already earned in earlier steps. */
.cell.dim { opacity: .46; }

/* The ring is INSET. An outset ring bleeds past the tile edge, and because the
   grid gap is only ~2px the rings of neighbouring focused cells overlap each
   other into a solid black blob. Inset keeps every ring inside its own tile.
   Two tones so it stays visible on both pale and dark tiles. */
.cell.focus {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .92),
    inset 0 0 0 4px rgba(28, 22, 18, .62);
  z-index: 2;
}

.cell.pulse { animation: pulse .85s ease-out; z-index: 3; }

@keyframes tileIn {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

/* Kept under the 2.2% grid gap so a pulsing tile never laps its neighbour. */
@keyframes pulse {
  0% { transform: scale(1); }
  38% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.cell .mark {
  width: 62%; height: 62%;
  opacity: 0;
  transform: scale(.4) rotate(-30deg);
  transition: opacity .22s ease, transform .34s cubic-bezier(.34, 1.56, .64, 1);
}
.cell.cat .mark, .cell.out .mark { opacity: 1; transform: scale(1) rotate(0); }
.cell.out .mark { width: 46%; height: 46%; opacity: .62; }

.cell .mark svg { width: 100%; height: 100%; display: block; }
.cell.cat .mark svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }

.cell .coord {
  position: absolute; inset: auto 6% 4% auto;
  font-size: clamp(7px, 1.1vw, 11px);
  font-weight: 600;
  color: rgba(0, 0, 0, .3);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.cell:hover .coord { opacity: 1; }

/* ----------------------------------------------------------------- panel */

.panel { padding: 22px 22px 20px; }

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}
.seg button {
  background: transparent; color: var(--ink-soft); border: 0;
  padding: 9px 10px; font-weight: 550; font-size: .93rem;
}
.seg button.on {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.pane { display: none; }
.pane.on { display: block; animation: riseIn .32s ease both; }

h3.sec {
  margin: 0 0 4px; font-size: 1.06rem; font-weight: 650; letter-spacing: -.01em;
}
.sub { margin: 0 0 16px; color: var(--ink-soft); font-size: .92rem; }

/* answer list */
ol.cells {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px;
}
ol.cells li {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 11px; font-size: .92rem;
  font-variant-numeric: tabular-nums;
}

.swatch {
  width: 13px; height: 13px; border-radius: 4px; flex: none;
  display: inline-block; vertical-align: -2px; margin-right: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* step card */
.step {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 16px 18px;
  min-height: 158px;
}
.step.enter { animation: riseIn .34s ease both; }
.step .badge {
  display: inline-block; font-size: .72rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}
.step h4 { margin: 0 0 7px; font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.step p b { color: var(--ink); font-weight: 600; }

.controls { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.controls .spacer { flex: 1; }
.count {
  color: var(--ink-faint); font-size: .87rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.track {
  height: 4px; background: var(--surface-2); border-radius: 999px;
  overflow: hidden; margin-top: 14px; border: 1px solid var(--line);
}
.track i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }

/* --------------------------------------------------------------- notices */

.notice {
  margin-top: 18px; padding: 12px 15px; border-radius: 12px;
  font-size: .9rem; line-height: 1.55;
}
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

#status { text-align: center; margin-top: 20px; color: var(--ink-soft); }

details.read {
  margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px;
  font-size: .9rem; color: var(--ink-soft);
}
details.read summary { cursor: pointer; color: var(--ink); font-weight: 550; }
details.read ul { margin: 10px 0 0; padding-left: 18px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.legend span { font-size: .87rem; }

/* ----------------------------------------------------------- about/SEO */

.about {
  max-width: 68ch; margin: 72px auto 0; color: var(--ink-soft);
}
.about h2 {
  color: var(--ink); font-size: 1.18rem; font-weight: 650;
  letter-spacing: -.015em; margin: 34px 0 8px;
}
.about h2:first-child { margin-top: 0; }
.about p { margin: 0 0 12px; }
.about ul { margin: 0 0 12px; padding-left: 20px; }
.about li { margin-bottom: 6px; }
.about strong { color: var(--ink); font-weight: 600; }

.foot {
  max-width: 68ch; margin: 48px auto 0; padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: .88rem; text-align: center;
}

.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite; display: inline-block; vertical-align: -5px;
  margin-right: 9px;
}
@keyframes spin { to { transform: rotate(360deg); } }

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