/* ─────────────────────────────────────────────────────────────────────────
   Ascii — design system

   Mossy greens carry the world; amber carries the cat. If something on
   screen is amber it is either Ascii or something Ascii is telling you
   about. Nothing else may use it. That one rule is what lets her tells be
   readable without a word of UI text.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --moss-900: #0e1f16;
  --moss-800: #12241b;
  --forest-700: #1d3b2a;
  --fern-600: #2f6b45;
  --leaf-500: #4f9e63;
  --lichen-400: #8fce8a;
  --mint-200: #d8f0d2;
  --chalk-50: #f4fbef;
  --amber-500: #f0a93b;
  --amber-300: #ffd27a;
  --clay-500: #c96a4b;
  --ink-900: #0d1a13;

  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --fast: 220ms var(--ease);

  --display: ui-rounded, "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad-t: env(safe-area-inset-top, 0px);
  --pad-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--moss-900);
  color: var(--mint-200);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

body { height: 100dvh; }

h1, h2, h3, .pill, .big, .ghost { font-family: var(--display); }

/* ── screens ─────────────────────────────────────────────────────────── */

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding-top: var(--pad-t);
  padding-bottom: var(--pad-b);
}
.screen.show { display: flex; }

/* ── buttons ─────────────────────────────────────────────────────────── */

button {
  font: inherit;
  color: var(--mint-200);
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.big, .pill {
  background: var(--fern-600);
  color: var(--chalk-50);
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 17px;
  font-weight: 600;
  min-height: 48px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform var(--fast), background var(--fast);
}
.pill { padding: 11px 20px; font-size: 15px; }
.big:active, .pill:active { transform: translateY(2px) scale(.98); }

.ghost {
  background: transparent;
  border: 2px dashed rgba(244, 251, 239, .34);
  box-shadow: none;
  color: var(--lichen-400);
}
.ghost.tiny { font-size: 13px; padding: 8px 16px; align-self: center; opacity: .7; margin: 4px 0 18px; }

.icon {
  width: 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
  border-radius: 999px;
  color: var(--lichen-400);
}
.icon:active { background: rgba(255, 255, 255, .08); }

/* ── title ───────────────────────────────────────────────────────────── */

#s-title { justify-content: flex-end; }
#s-title .art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
}
#s-title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(14, 31, 22, .1) 30%, rgba(14, 31, 22, .92) 78%);
}
.title-inner {
  position: relative;
  z-index: 1;
  padding: 0 26px calc(40px + var(--pad-b));
  text-align: center;
}
#s-title h1 {
  font-size: clamp(48px, 17vw, 92px);
  margin: 0;
  letter-spacing: .06em;
  color: var(--chalk-50);
  text-shadow: 0 0 34px rgba(240, 169, 59, .34);
}
.sub { margin: 2px 0 26px; color: var(--lichen-400); font-size: 17px; }
.title-btns { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.title-btns .big, .title-btns .ghost { min-width: 210px; }
.fine { margin: 22px 0 0; font-size: 13px; color: rgba(216, 240, 210, .5); }

/* ── bars ────────────────────────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  flex: 0 0 auto;
}
.bar h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; text-align: center; color: var(--mint-200); }
/* Not amber — amber belongs to the cat and to nothing else. */
.moon {
  width: 44px;
  text-align: center;
  font-size: 13px;
  color: var(--lichen-400);
  opacity: .75;
  letter-spacing: 1px;
}

/* ── night list ──────────────────────────────────────────────────────── */

#night-list {
  list-style: none;
  margin: 0;
  padding: 4px 16px 8px;
  overflow-y: auto;
  flex: 1;
}
#night-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgba(29, 59, 42, .72);
  border: 2px dashed rgba(244, 251, 239, .16);
  transform: rotate(-.25deg);
}
#night-list li:nth-child(even) { transform: rotate(.25deg); }
#night-list li.locked { opacity: .38; }
#night-list li.done { border-style: solid; border-color: rgba(143, 206, 138, .3); }
#night-list .n {
  width: 30px;
  font-family: var(--display);
  font-size: 19px;
  color: var(--lichen-400);
  flex: 0 0 auto;
}
#night-list .nm { flex: 1; font-size: 16px; }
#night-list .mk { color: var(--amber-500); font-size: 15px; }

/* ── stage ───────────────────────────────────────────────────────────── */

/* id beats .screen's `display:none`, so this has to be qualified with .show.
   The column must be pinned: an `auto` track would be sized by the stage, and
   since fit() sizes the stage from the track that is a widening loop. */
#s-play.show {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

#stage-wrap {
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 2px 8px 6px;
}

/* fit() sets the real pixel size; these are the pre-script fallback */
#stage {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 0 0 2px rgba(244, 251, 239, .1);
  background: var(--moss-900);
}

#bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 500ms ease;
}
/* Dark nights starve you of information — but she still has to be readable,
   so the scene dims much further than she does. */
#stage.dark #bg { filter: brightness(.46) saturate(.72) contrast(1.04); }

#chalk { position: absolute; inset: 0; }

#veil { position: absolute; inset: 0; pointer-events: none; transition: opacity 500ms ease; opacity: 0; }
#stage.dark #veil {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 58%, rgba(6, 14, 10, .10), rgba(4, 10, 7, .70) 82%);
}

#cat {
  position: absolute;
  max-height: 23%;
  max-width: 34%;
  transform-origin: 50% 100%;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
  transition: left 460ms cubic-bezier(.4, .02, .35, 1), top 460ms cubic-bezier(.4, .02, .35, 1);
}
#cat.nomove { transition: none !important; }
#stage.dark #cat { filter: brightness(.62) contrast(1.06) drop-shadow(0 0 16px rgba(240, 169, 59, .34)); }

/* she is the only thing allowed to glow amber */
#cat.hop { animation: hop 360ms var(--ease); }
@keyframes hop {
  0% { translate: 0 0; }
  45% { translate: 0 -16%; }
  100% { translate: 0 0; }
}
#cat.tap { animation: tap 260ms ease-in-out; }
@keyframes tap {
  0%, 100% { rotate: 0deg; }
  50% { rotate: -7deg; }
}
#cat.blink { opacity: .35; }

/* zone markers */
#zonefx { position: absolute; inset: 0; pointer-events: none; }
.marker { position: absolute; border-radius: 20px; }
.m-moon {
  background: radial-gradient(ellipse at center, rgba(226, 242, 226, .30), rgba(226, 242, 226, 0) 70%);
  animation: breathe 6s ease-in-out infinite;
}
.m-ward {
  border: 2px dashed rgba(201, 106, 75, .55);
  background: radial-gradient(ellipse at center, rgba(120, 220, 150, .17), rgba(120, 220, 150, 0) 72%);
}
.m-hers {
  border: 2px dotted rgba(240, 169, 59, .34);
  background: radial-gradient(ellipse at center, rgba(240, 169, 59, .12), rgba(240, 169, 59, 0) 70%);
}
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* the little chalk caption that names what you drew */
.label {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(14, 31, 22, .82);
  border: 2px dashed rgba(244, 251, 239, .3);
  color: var(--chalk-50);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, translate 240ms var(--ease);
}
.label.show { opacity: 1; translate: -50% 0; }
.label.bad { color: var(--clay-500); border-color: rgba(201, 106, 75, .5); }
.label.move { color: var(--amber-300); border-color: rgba(240, 169, 59, .5); }

/* ── dock ────────────────────────────────────────────────────────────── */

#dock { padding: 0 10px 8px; flex: 0 0 auto; }

#rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
#rail::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(29, 59, 42, .8);
  border: 2px dashed rgba(244, 251, 239, .16);
  display: grid;
  place-items: center;
  padding: 0;
}
.chip.fresh { border-color: var(--amber-500); border-style: solid; }
.chip svg { width: 30px; height: 30px; }
.chip svg path { fill: none; stroke: var(--chalk-50); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.chip.fresh svg path { stroke: var(--amber-300); }

.acts { display: flex; gap: 10px; }
.acts .pill { flex: 1; }

/* ── notebook sheet ──────────────────────────────────────────────────── */

#scrim {
  position: fixed;
  inset: 0;
  background: rgba(6, 14, 10, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 8;
}
#scrim.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  max-height: 76dvh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #e9f3e1, #dcecd3);
  color: var(--ink-900);
  padding: 8px 18px calc(26px + var(--pad-b));
  translate: 0 102%;
  transition: translate 300ms var(--ease);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
}
.sheet.open { translate: 0 0; }
.sheet-grab {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(13, 26, 19, .22);
  margin: 6px auto 12px;
}
.nb-head h2 { margin: 0 0 2px; font-size: 18px; }
.nb-head .hint { margin: 0 0 10px; font-size: 13px; color: rgba(13, 26, 19, .55); }

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(13, 26, 19, .12);
  font-size: 14px;
}
.row .drew { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.row .verdict { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.row .where { color: rgba(13, 26, 19, .68); }
.row .amp { color: rgba(13, 26, 19, .4); margin: 0 3px; }
.row .tt { font-size: 12px; color: rgba(13, 26, 19, .55); min-width: 62px; }
.row .cries { color: var(--clay-500); letter-spacing: 3px; font-size: 20px; line-height: 1; }
.row.delight { background: rgba(240, 169, 59, .14); border-radius: 8px; }

.gi { width: 22px; height: 22px; }
.gi-none { display: inline-block; width: 22px; text-align: center; color: rgba(13, 26, 19, .35); }
.gi path { fill: none; stroke: var(--ink-900); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.sd { width: 15px; height: 15px; }
.sd circle { fill: rgba(13, 26, 19, .55); }
.ic { width: 19px; height: 19px; }
.ic path, .ic circle, .ic ellipse { fill: none; stroke: rgba(13, 26, 19, .6); stroke-width: 1.7; }
.ic .fill { fill: rgba(13, 26, 19, .6); stroke: none; }
.ic-delight .fill { fill: var(--amber-500); }
.ic-warm .fill { fill: rgba(13, 26, 19, .7); }

.nb-notes { margin-top: 18px; border-top: 2px dashed rgba(13, 26, 19, .18); padding-top: 12px; }
.nb-notes h3 { margin: 0 0 8px; font-size: 14px; color: rgba(13, 26, 19, .55); }
.note { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: rgba(13, 26, 19, .8); }
.note b { color: var(--ink-900); }

/* ── overlay cards ───────────────────────────────────────────────────── */

#overlay {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(6, 14, 10, .82);
  backdrop-filter: blur(3px);
}
#overlay.show { display: grid; }
#overlay .card {
  max-width: 420px;
  width: 100%;
  text-align: center;
  background: var(--forest-700);
  border: 2px dashed rgba(244, 251, 239, .22);
  border-radius: 20px;
  padding: 26px 22px;
  animation: rise 300ms var(--ease);
}
@keyframes rise { from { transform: translateY(14px) scale(.97); opacity: 0; } }
.eyebrow { margin: 0 0 4px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--lichen-400); }
#overlay h2 { margin: 0 0 12px; font-size: 25px; color: var(--chalk-50); }
#overlay p#ov-text { margin: 0 0 18px; line-height: 1.6; font-size: 16px; color: var(--mint-200); }

.learn { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.learn figure { margin: 0; text-align: center; }
.learn svg { width: 62px; height: 62px; }
.learn svg path {
  fill: none;
  stroke: var(--amber-300);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: trace 1.6s ease forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }
.learn figcaption { font-size: 12px; color: var(--lichen-400); margin-top: 2px; }

/* ── landscape ───────────────────────────────────────────────────────── */

@media (orientation: landscape) and (max-height: 620px) {
  #s-play.show { grid-template-rows: auto 1fr; grid-template-columns: 1fr minmax(150px, 210px); }
  #s-play .bar { grid-column: 1 / -1; }
  #stage-wrap { grid-row: 2; grid-column: 1; }
  #dock { grid-row: 2; grid-column: 2; display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
  #rail { flex-wrap: wrap; overflow-y: auto; justify-content: center; }
  .acts { flex-direction: column; }
  .sheet { max-height: 92dvh; }
}

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