/* Layout: a full-bleed 3D scene; the HUD hugs the corners, thoughts float in the upper middle,
   and the title and ending sit low on the left like a film card. One deliberate look: late afternoon. */
:root {
  --ink: #2a1a10;
  --ink-soft: rgba(42, 26, 16, .52);
  --cream: #fff3dd;
  --cream-dim: rgba(255, 243, 221, .72);
  --yuzu: #ffcf3a;
  --moss: #cfe57a;
  --blush: #ff9fb3;
  --pond: #bfe8f2;
  --line: rgba(255, 243, 221, .2);

  --display: "Bricolage Grotesque", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --whisper: "Instrument Serif", Georgia, "Times New Roman", serif;

  --calm: 0;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --top: calc(env(safe-area-inset-top, 0px) + 12px);
  --bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  color-scheme: dark;
}

[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--display);
  overflow: hidden;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-tap-highlight-color: transparent;
}
#stage { position: fixed; inset: 0; z-index: 0; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
button:focus-visible { outline: 3px solid var(--yuzu); outline-offset: 3px; }
kbd {
  font: 600 11px/1 var(--display);
  font-stretch: 85%;
  letter-spacing: .04em;
  padding: 3px 5px 2px;
  border-radius: 5px;
  border: 1px solid currentColor;
  opacity: .6;
}
@media (hover: none), (pointer: coarse) { kbd { display: none; } }

/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud .thought, .hud .trail, .hud .hint { pointer-events: none; }
body.titled .hud > :not(.thought):not(.trail) { opacity: 0; visibility: hidden; }
.hud > .todo, .hud > .dial, .hud > .stick, .hud > .buttons { transition: opacity .6s, visibility .6s; }
body.cinematic .hud > .todo, body.cinematic .hud > .dial, body.cinematic .hud > .stick, body.cinematic .hud > .buttons, body.cinematic .hud > .hint { opacity: 0; visibility: hidden; }

.todo {
  position: absolute;
  top: var(--top);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  max-width: min(330px, calc(100vw - 150px));
}
.todo-toggle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.todo-label {
  font-size: 13px;
  font-weight: 700;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream-dim);
}
.todo-count { font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--yuzu); }
.todo-caret {
  width: 8px; height: 8px;
  border-right: 2px solid var(--cream-dim);
  border-bottom: 2px solid var(--cream-dim);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .3s;
}
.todo.open .todo-caret { transform: translateY(1px) rotate(225deg); }
.todo-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 12px 16px 12px 14px;
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--ink-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform-origin: top left;
  transition: opacity .35s, transform .45s cubic-bezier(.2, 1.3, .4, 1);
}
.todo:not(.open) .todo-list { opacity: 0; transform: scale(.85) translateY(-8px); pointer-events: none; visibility: hidden; }
.todo-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.25; font-weight: 500; }
.task-text { position: relative; min-width: 0; }
.task-text em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--moss); font-stretch: 85%; }
.task-text::after {
  content: "";
  position: absolute;
  left: -2px; top: 54%;
  height: 2px;
  width: 0;
  background: var(--yuzu);
  border-radius: 2px;
  transition: width .7s cubic-bezier(.6, 0, .2, 1) .15s;
}
.tick {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--cream-dim);
  position: relative;
  transition: background .3s, border-color .3s, transform .4s cubic-bezier(.2, 2, .4, 1);
}
.tick::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg) scale(0);
  transition: transform .35s cubic-bezier(.2, 2, .4, 1) .2s;
}
li.done .tick { background: var(--yuzu); border-color: var(--yuzu); transform: scale(1.15); }
li.done .tick::after { transform: rotate(45deg) scale(1); }
li.done .task-text { color: var(--cream-dim); }
li.done .task-text::after { width: calc(100% + 4px); }
li[data-task="sunset"] .task-text { color: var(--yuzu); font-weight: 700; }

.dial {
  position: absolute;
  top: var(--top);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  display: grid;
  justify-items: end;
  gap: 2px;
  padding: 8px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--ink-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.clock {
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.mood { font-size: 15px; white-space: nowrap; }
.mood-label { font-family: var(--whisper); font-style: italic; font-size: 17px; color: var(--cream-dim); }
.mood-word {
  display: inline-block;
  font-weight: calc(420 + var(--calm) * 330);
  font-stretch: calc(76% + var(--calm) * 24%);
  letter-spacing: calc(var(--calm) * .08em);
  color: var(--moss);
  transition: color .6s;
}
.mood-word.bump { animation: mood-bump .7s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes mood-bump { 0% { transform: scale(1.5); } 100% { transform: none; } }
.sound-toggle {
  margin-top: 6px;
  padding: 4px 10px 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-soft);
  color: var(--cream-dim);
}

/* ---------- thoughts ---------- */
.thought {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 104px);
  width: min(calc(100vw - 32px), 860px);
  transform: translateX(-50%);
  z-index: 6;
  transition: top .8s cubic-bezier(.4, 0, .2, 1);
}
.thought.is-cine { top: 30%; }
@media (min-width: 760px) { .thought { top: calc(env(safe-area-inset-top, 0px) + 64px); } }
@media (max-width: 480px) {
  .dial { padding: 6px 12px 8px; }
  .sound-toggle { font-size: 11px; padding: 3px 8px 4px; }
}
.th {
  position: absolute;
  inset: 0 0 auto;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(25px, 6vw, 48px);
  line-height: 1.08;
  font-weight: calc(400 + var(--calm) * 300);
  font-stretch: calc(78% + var(--calm) * 22%);
  letter-spacing: calc(-.01em + var(--calm) * .035em);
  color: var(--cream);
  text-shadow: 0 1px 1px rgba(42, 26, 16, .55), 0 2px 10px rgba(42, 26, 16, .5), 0 4px 34px rgba(42, 26, 16, .55);
}
.th.cine { font-size: clamp(32px, 8.5vw, 80px); line-height: 1.02; }
.beat { display: block; }
.beat + .beat { margin-top: .14em; }
.w { display: inline-block; white-space: nowrap; }
.l {
  display: inline-block;
  animation: l-in .65s cubic-bezier(.2, 1.5, .35, 1) both;
  animation-delay: var(--d);
}
.k { display: inline-block; }
@keyframes l-in {
  0% { opacity: 0; transform: translateY(.6em) rotate(calc(var(--r) * 18deg)) scale(.4); filter: blur(6px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

.e-em { font-weight: 800; font-size: 1.16em; color: var(--yuzu); }
.e-em .l { animation-name: l-pop; animation-duration: .75s; }
@keyframes l-pop {
  0% { opacity: 0; transform: scale(2.6) translateY(-.35em) rotate(calc(var(--r) * 28deg)); filter: blur(5px); }
  55% { opacity: 1; transform: scale(.86); filter: none; }
  100% { opacity: 1; transform: none; }
}
.e-wave { color: var(--pond); }
.e-wave .k { animation: k-wave 1.9s ease-in-out infinite; animation-delay: calc(var(--d) + var(--i) * 110ms); }
@keyframes k-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.17em) rotate(calc(var(--r) * 5deg)); } }
.e-hush { font-family: var(--whisper); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: .01em; font-size: 1.08em; color: var(--cream-dim); }
.e-hush .l { animation-name: l-hush; animation-duration: 1.2s; animation-timing-function: ease-out; }
@keyframes l-hush { 0% { opacity: 0; transform: translateY(-.18em); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } }
.e-jolt { color: var(--blush); font-weight: 800; }
.e-jolt .k { animation: k-jolt .08s linear 12; animation-delay: var(--d); }
@keyframes k-jolt { 0% { transform: translate(.05em, -.04em); } 50% { transform: translate(-.06em, .05em) rotate(-3deg); } 100% { transform: none; } }
.e-wide { font-stretch: 100%; font-weight: 750; color: var(--moss); animation: w-wide 2.6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--wd); }
.e-wide .l { animation-name: l-stretch; animation-duration: 1.3s; animation-timing-function: cubic-bezier(.2, 1.2, .3, 1); }
@keyframes w-wide { from { letter-spacing: -.05em; } to { letter-spacing: .16em; } }
@keyframes l-stretch { 0% { opacity: 0; transform: scaleX(.15) scaleY(1.4); } 100% { opacity: 1; transform: none; } }
.e-drift .k { animation: k-drift 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -400ms); }
@keyframes k-drift { 0%, 100% { transform: none; } 50% { transform: translateY(-.28em) rotate(calc(var(--r) * 9deg)); } }

.th.out .l { animation: l-out .8s cubic-bezier(.5, 0, .75, 0) forwards; animation-delay: calc(var(--i) * 18ms); }
.th.out.fast .l { animation-duration: .3s; animation-delay: 0s; }
@keyframes l-out {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-.9em) rotate(calc(var(--r) * 38deg)) scale(.75); filter: blur(5px); }
}

.trail i {
  position: fixed;
  left: 0; top: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 2px 12px rgba(42, 26, 16, .4);
  opacity: 0;
  z-index: 6;
  transition: opacity .5s;
}
.trail i:nth-child(2) { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.trail i:nth-child(3) { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.trail i.on { opacity: .9; }
.trail i:nth-child(2).on { opacity: .75; }
.trail i:nth-child(3).on { opacity: .6; }

/* ---------- world sounds and stamps ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.pop {
  position: fixed;
  font-size: clamp(22px, 4.6vw, 36px);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(42, 26, 16, .35), 0 0 16px rgba(42, 26, 16, .45);
  animation: pop-rise 1.6s cubic-bezier(.2, .6, .3, 1) forwards;
}
.pop span { display: inline-block; animation: pop-letter .55s cubic-bezier(.2, 1.9, .4, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes pop-rise {
  0% { transform: translate(-50%, -50%) rotate(var(--tilt)); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -260%) rotate(calc(var(--tilt) * -1)); opacity: 0; }
}
@keyframes pop-letter { 0% { transform: scale(0) translateY(.5em) rotate(calc(var(--r) * 50deg)); } 100% { transform: none; } }
.pop-munch { color: var(--moss); }
.pop-blub, .pop-splash { color: var(--pond); }
.pop-boop, .pop-heart { color: var(--blush); }
.pop-bonk, .pop-plop { color: var(--yuzu); }
.pop-thud { color: #f0cfa2; }
.pop-zzz { color: #d6c8ff; font-family: var(--whisper); font-style: italic; font-weight: 400; font-stretch: normal; }
.pop-chirp { color: #fff1a8; font-size: clamp(16px, 3.4vw, 24px); }
.pop-aah { color: var(--cream); font-stretch: 100%; }

.stamp {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 200px);
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .16em .6em .22em .42em;
  border-radius: .4em;
  background: var(--yuzu);
  color: var(--ink);
  font-size: clamp(22px, 5vw, 38px);
  font-weight: 800;
  font-stretch: 88%;
  white-space: nowrap;
  box-shadow: 0 10px 40px rgba(42, 26, 16, .35);
  animation: stamp-life 2.6s cubic-bezier(.2, 1, .3, 1) both;
}
.stamp-text span { display: inline-block; animation: stamp-letter .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.12s + var(--i) * 24ms); }
.stamp-tick {
  width: .5em; height: .82em;
  border-right: .16em solid var(--ink);
  border-bottom: .16em solid var(--ink);
  transform: rotate(45deg) translate(-.06em, -.12em);
}
@keyframes stamp-letter { 0% { opacity: 0; transform: translateX(-.5em) skewX(-24deg); } 100% { opacity: 1; transform: none; } }
@keyframes stamp-life {
  0% { opacity: 0; transform: translateX(-50%) scale(.3) rotate(-14deg); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.08) rotate(-2deg); }
  20% { transform: translateX(-50%) scale(1) rotate(-3deg); }
  82% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(.94) rotate(-3deg); }
}

/* ---------- controls ---------- */
.hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bottom) + 150px);
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 7px 14px 8px;
  border-radius: 999px;
  background: var(--ink-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--cream-dim);
  transition: opacity .8s;
}
.hint:empty, .hint.gone { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .hint { bottom: var(--bottom); } }

.stick {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 20px);
  bottom: var(--bottom);
  width: 136px; height: 136px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: radial-gradient(circle, rgba(255, 243, 221, .08), rgba(42, 26, 16, .3));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  touch-action: none;
}
.knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 46% 54% 50% 50%;
  background: var(--cream);
  box-shadow: 0 6px 18px rgba(42, 26, 16, .4);
  transition: transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.stick.held .knob { transition: none; }
@media (hover: hover) and (pointer: fine) { .stick { display: none; } }

.buttons {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  bottom: var(--bottom);
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.btn-act, .btn-loaf {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border-radius: 50%;
  touch-action: none;
  transition: transform .2s cubic-bezier(.2, 1.8, .4, 1), background .3s, color .3s, opacity .3s;
}
.btn-act {
  width: 112px; height: 112px;
  border: 0;
  background: var(--yuzu);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(42, 26, 16, .35);
}
.btn-act .btn-word { font-size: 20px; font-weight: 800; font-stretch: 80%; line-height: .95; max-width: 92px; text-align: center; }
.btn-act:disabled { background: var(--ink-soft); color: var(--cream-dim); box-shadow: none; cursor: default; backdrop-filter: blur(6px); }
.btn-act:disabled .btn-word { font-family: var(--whisper); font-style: italic; font-weight: 400; font-stretch: normal; font-size: 19px; }
.btn-act.fresh .btn-word { animation: word-swap .5s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes word-swap { 0% { transform: scaleX(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.btn-loaf {
  width: 78px; height: 78px;
  margin-bottom: 4px;
  border: 2px solid var(--line);
  background: var(--ink-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-loaf .btn-word { font-size: 16px; font-weight: 700; font-stretch: 85%; }
.btn-loaf[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-act:not(:disabled):active, .btn-loaf:active { transform: scale(.92); }

/* ---------- title and ending cards ---------- */
.title, .ending {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  padding-left: max(22px, env(safe-area-inset-left, 0px));
  padding-right: max(22px, env(safe-area-inset-right, 0px));
  padding-block: 24px calc(env(safe-area-inset-bottom, 0px) + 34px);
  background: linear-gradient(to top, rgba(42, 26, 16, .82) 0%, rgba(42, 26, 16, .38) 42%, rgba(42, 26, 16, 0) 68%);
  transition: opacity .9s, visibility .9s;
}
.title.leaving { opacity: 0; visibility: hidden; }
.eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--yuzu); }
.title-word {
  margin: 0 0 0 -.04em;
  font-size: clamp(68px, 20vw, 240px);
  line-height: .82;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cream);
  white-space: nowrap;
}
.title-word span {
  display: inline-block;
  animation: breathe 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.38s);
}
.title-word span:nth-child(odd) { color: var(--yuzu); }
@keyframes breathe {
  0%, 100% { font-stretch: 75%; font-weight: 300; transform: translateY(0); }
  50% { font-stretch: 100%; font-weight: 800; transform: translateY(-.04em); }
}
.title-line {
  margin: 0;
  max-width: 34ch;
  font-family: var(--whisper);
  font-style: italic;
  font-size: clamp(22px, 5vw, 32px);
  line-height: 1.15;
  color: var(--cream);
  text-wrap: balance;
}
.title-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.title-keys { margin: 0; font-size: 14px; color: var(--cream-dim); max-width: 46ch; }
.btn-start {
  align-self: flex-start;
  padding: 14px 24px 15px;
  border: 0;
  border-radius: 999px;
  background: var(--yuzu);
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  font-stretch: 85%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: font-stretch .4s, transform .2s;
}
.btn-start:hover { font-stretch: 100%; }
.btn-start:active { transform: scale(.96); }

.ending-title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(44px, 11vw, 112px);
  line-height: .9;
  font-weight: 800;
  font-stretch: 100%;
  text-wrap: balance;
  animation: ending-in 1.4s cubic-bezier(.2, 1, .3, 1) both;
}
@keyframes ending-in { 0% { opacity: 0; letter-spacing: -.08em; font-stretch: 75%; } 100% { opacity: 1; letter-spacing: -.01em; font-stretch: 100%; } }
.ledger {
  margin: 4px 0 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px 22px;
  max-width: 640px;
}
.ledger div { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.ledger dt { font-family: var(--whisper); font-style: italic; font-size: 17px; color: var(--cream-dim); }
.ledger dd { margin: 0; font-size: 26px; font-weight: 750; font-stretch: 85%; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .title-word span, .e-wave .k, .e-drift .k, .e-jolt .k { animation: none; }
  .l, .pop span, .stamp-text span { animation-duration: .01s !important; }
}