/* focuscat — responsive layout pinned to paper aspect ratio.
   Paper = 1104 × 1420 in source units. All positions/sizes are % of paper.
   Font sizes use cqh (1cqh = 1% of paper height) so type scales with paper. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #d3d5de;
  overflow: hidden;
  font-family: 'Darumadrop One', system-ui, sans-serif;
  color: #1c67ad;
}

body {
  display: flex;
  align-items: flex-start;          /* paper anchors to top edge */
  justify-content: center;
  padding-top: 5.33vh;               /* gap above paper matching Figma frame */
  padding-left:  env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* ===== PAPER — fixed aspect, fills viewport while preserving ratio.
   Figma frame is 2100×1500 with paper at top:80px → 80/1500 = 5.33% top gap.
   Paper height = 1420/1500 = 94.67% of frame, so max-height matches. ===== */
.paper {
  position: relative;
  aspect-ratio: 1104 / 1420;
  width: min(100%, calc(94.67vh * 1104 / 1420));
  max-height: 94.67vh;
  container-type: size;
  /* isolation creates a stacking context so blend modes only affect the paper */
  isolation: isolate;
}

@media (max-width: 767px) {
  body {
    align-items: center;
    padding: max(12px, env(safe-area-inset-top, 0px))
             max(12px, env(safe-area-inset-right, 0px))
             max(12px, env(safe-area-inset-bottom, 0px))
             max(12px, env(safe-area-inset-left, 0px));
  }

  .paper {
    width: min(calc(100vw - 24px), calc((100vh - 24px) * 1104 / 1420));
    max-height: calc(100vh - 24px);
  }
}

/* Layer 0: paper SVG (cream rect + 23 binding holes + bottom dimple + inner shadow) */
.paper-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Content group sits ABOVE the paper SVG. */
.content {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.content > * {
  position: absolute;
  pointer-events: none;
}

img {
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}

/* ===== TEXTURE — paper grain, multiply at 50% opacity. ===== */
.paper-texture {
  position: absolute;
  inset: 0;
  background-image: url('img/figma/paper_texture_grain.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 50;
  /* Mask to the paper shape (which is paper-minus-holes), so neither the
     texture nor the tint covers the binding-hole cutouts — the lavender bg
     reads through cleanly. */
  -webkit-mask-image: url('img/figma/paper.svg');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-image: url('img/figma/paper.svg');
          mask-size: 100% 100%;
          mask-repeat: no-repeat;
}

/* ===== TINT — blue #2066e9, lighten blend at 100% opacity. ===== */
.paper-tint {
  position: absolute;
  inset: 0;
  background: #2066e9;
  mix-blend-mode: lighten;
  opacity: 1;
  pointer-events: none;
  z-index: 51;
  /* same mask as texture so holes stay untinted */
  -webkit-mask-image: url('img/figma/paper.svg');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-image: url('img/figma/paper.svg');
          mask-size: 100% 100%;
          mask-repeat: no-repeat;
}

/* ===== TITLE ===== */
.title {
  left: 50%;
  /* bottom-anchored at y=115px / 1420 = 8.1% (matches Figma's -translate-y-full) */
  top: 8.1%;
  transform: translate(-50%, -100%);
  font-size: 5.36cqh;
  line-height: 1.19;
  letter-spacing: -0.06em;
  font-weight: 400;
  white-space: nowrap;
  color: #1c67ad;
  z-index: 10;
}
/* Dots are absolute-positioned to the right of "focusing" so they don't
   contribute to the title's box width. That keeps "focusing" perfectly
   centered (via translateX(-50%) on .title) while the dots appear one by
   one to the right via JS (typewriter effect). */
.t-dots {
  position: absolute;
  left: 100%;
  top: 0;
  white-space: pre;
  pointer-events: none;
}
.title { display: inline-block; }

/* ===== TIMER ===== */
.timer {
  left: 24.27%;
  top: 10.56%;
  width: 53.93%;
  height: 18.65%;
  z-index: 9;
}
.timer-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* default (colon): centered via flex */
.slot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Digit slots: absolutely-position the img so we can compensate for each
   PNG having a different glyph-vs-canvas ratio + bottom padding. Result:
   uniform GLYPH height with a shared baseline at the slot bottom. */
.s-mt, .s-mo, .s-st, .s-so { display: block; }
.s-mt > img, .s-mo > img, .s-st > img, .s-so > img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: none;
  object-fit: contain;
}
/* Computed per digit: height = canvas_h / glyph_h × ~98% so the visible
   glyph fills ~98% of the slot height; bottom = -bottom_gap/canvas_h × scaled-height
   so the glyph bottom lands exactly on the slot baseline. */
.slot img[src$="/0.png"] { height: 102.5%; bottom: -3.10%; }
.slot img[src$="/1.png"] { height: 101.5%; bottom: -1.05%; }
.slot img[src$="/2.png"] { height: 105.2%; bottom: -4.56%; }
.slot img[src$="/3.png"] { height: 103.6%; bottom: -2.63%; }
.slot img[src$="/4.png"] { height: 102.4%; bottom: -2.36%; }
.slot img[src$="/5.png"] { height:  99.7%; bottom: -1.37%; }
.slot img[src$="/6.png"] { height: 103.2%; bottom: -3.13%; }
.slot img[src$="/7.png"] { height: 100.6%; bottom: -0.33%; }
.slot img[src$="/8.png"] { height: 102.2%; bottom: -2.58%; }
.slot img[src$="/9.png"] { height: 104.1%; bottom: -4.67%; }
/* slot positions relative to timer container (595.404 × 264.888).
   All four digit slots share the same height and top so digits read at a
   uniform height across MM:SS. Colon stays at its Figma height. */
.s-mt    { left: 13.36%; top: 30.79%; width: 16.29%; height: 36.62%; }
.s-mo    { left: 28.65%; top: 30.79%; width: 14.44%; height: 36.62%; }
.s-colon { left: 47.80%; top: 26.26%; width:  3.86%; height: 45.30%; }
.s-st    { left: 56.36%; top: 30.79%; width: 14.44%; height: 36.62%; }
.s-so    { left: 71.98%; top: 30.79%; width: 14.44%; height: 36.62%; }

.timer-hit {
  position: absolute;
  display: none;
  inset: 8% 5%;
  z-index: 20;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
body.ready .timer-hit,
body.cancelled .timer-hit { display: block; }

.time-setter {
  position: absolute;
  display: none;
  inset: 0;
  z-index: 30;
  padding: 14% 0 10%;
  background: transparent;
  border: 0;
  pointer-events: auto;
}
body.time-setting .time-setter { display: block; }
body.time-setting .timer-hit { display: none; }
.time-setter-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
}
.time-setter-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6%;
  width: 62%;
  height: 52%;
  margin: 0 auto;
  font-size: 3.7cqh;
  white-space: nowrap;
}
.time-setter-row button,
.time-setter-close {
  border: 0;
  background: transparent;
  color: #1c67ad;
  font: inherit;
  cursor: pointer;
}
.time-setter-row button {
  width: 1.4em;
  height: 1.4em;
  font-size: 1.25em;
  line-height: 1;
}
.time-setter input[type="range"] {
  position: relative;
  z-index: 1;
  display: block;
  width: 62%;
  margin: 2.5% auto 0;
  accent-color: #1c67ad;
  cursor: pointer;
}
.time-setter-close {
  position: absolute;
  top: 14%;
  right: 9%;
  width: 8%;
  aspect-ratio: 1;
  z-index: 2;
}
.time-setter-close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== BACKGROUND DECORATIONS ===== */
.dec    { object-fit: contain; }
.grass2  { left: 23.73%; top: 69.01%; width:  4.27%; height:  2.66%; z-index: 3; }
.grass3  { left: 35.96%; top: 69.93%; width:  9.10%; height:  4.14%; z-index: 3; }
.grass1  { left: 68.21%; top: 69.86%; width:  5.73%; height:  3.61%; z-index: 3; }

.grown-garden,
.butterfly-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.grown-garden-back { z-index: 5; }
.grown-garden-front { z-index: 17; }
.butterfly-layer {
  z-index: 18;
  overflow: hidden;
}
.grown-flower-slot {
  position: absolute;
  transform-origin: 50% 100%;
  animation: flower-grow 0.75s cubic-bezier(.2,.8,.2,1) both;
}
.grown-flower-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 100%;
  animation: flower-sway 4.8s ease-in-out 0.75s infinite;
}
.grown-flower-slot.mirror img { scale: -1 1; }
@keyframes flower-grow {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

.flying-butterfly {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: left, transform;
}
.flying-butterfly img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 55%;
  will-change: transform;
}

.grown-flower-slot.editor-flower {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  animation: none;
}
.grown-flower-slot.editor-flower:active { cursor: grabbing; }
.grown-flower-slot.editor-flower::after {
  content: attr(data-number);
  position: absolute;
  left: 50%;
  bottom: -0.9em;
  transform: translateX(-50%);
  min-width: 1.35em;
  height: 1.35em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1c67ad;
  color: #1c67ad;
  font-size: 2cqh;
  line-height: 1;
}
.grown-flower-slot.editor-flower img { animation: none; }

@keyframes flower-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate( 3deg); }
}

/* ===== DESK — two clipped copies of 44_table to match Figma compositing ===== */
/* MAIN BODY: shows bottom portion of source (drawers + legs).
   Figma: container 384×129, img h:217.31% w:100% top:-119.03% left:0 */
.desk-body {
  left: 26.81%;
  top: 59.65%;
  width: 34.78%;
  height: 9.08%;
  overflow: hidden;
  z-index: 4;
}
.desk-body img {
  position: absolute;
  left: 0;
  top: -119.03%;
  width: 100%;
  height: 217.31%;
  max-width: none;
}

/* TOP EDGE: shows top sliver (desktop surface line), rotated 0.62deg.
   Figma: outer 413.065×52.047, inner 412.574×47.581 rotated 0.62deg,
   img h:525.04% w:100% top:-0.27% left:0 */
.desk-edge-wrap {
  left: 25.91%;
  top: 56.34%;
  width: 37.42%;
  height: 3.67%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.desk-edge {
  position: relative;
  width: 99.88%;
  height: 91.42%;
  transform: rotate(0.62deg);
  overflow: hidden;
}
.desk-edge img {
  position: absolute;
  left: 0;
  top: -0.27%;
  width: 100%;
  height: 525.04%;
  max-width: none;
}

/* ===== COMPUTER ===== */
/* Figma: container 276×222, img overflow with left:-0.14% top:0 size 100.29%×100% */
.computer-clip {
  left: 29.17%;
  top: 41.48%;
  width: 25.00%;
  height: 15.63%;
  overflow: hidden;
  z-index: 6;
}
.computer-clip img {
  position: absolute;
  left: -0.14%;
  top: 0;
  width: 100.29%;
  height: 100%;
  max-width: none;
}

/* ===== SCREEN — the area inside the computer where typed symbols appear.
   Lines stack top-down; each line is a centered flex row. */
.screen {
  left: 37%;
  top: 44.5%;
  width: 14%;
  height: 7%;
  z-index: 7;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  /* % padding here resolves to parent width, which collapses the screen.
     Use no padding; lines fill the screen top-down. */
}
.screen .line {
  display: flex;
  flex-direction: row;
  align-items: center;              /* glyphs Y-centered within the line */
  gap: 5%;
  width: 100%;
  height: 33%;                      /* matches LINE_H_PCT in script.js (3 lines fit) */
  flex: 0 0 auto;
}
.screen .glyph {
  position: relative;
  display: inline-block;
  pointer-events: none;
  animation: glyph-in 0.18s ease-out;
}
.screen .glyph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@keyframes glyph-in {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== KEYBOARD ===== */
.keys {
  position: absolute;
  inset: 0;
  z-index: 6;
}
.key {
  position: absolute;
  width: 3.48%;
  height: 2.30%;
  object-fit: contain;
  top: 52.89%;
  animation: key-bob 1.5s ease-in-out infinite;
}
.k1 { left: 42.84%; top: 53.24%; animation-delay:  0.00s; }
.k2 { left: 45.74%; top: 52.89%; animation-delay: -0.25s; }
.k3 { left: 48.73%; top: 53.10%; animation-delay: -0.50s; }
.k4 { left: 51.81%; top: 52.89%; animation-delay: -0.75s; }
.k5 { left: 54.62%; top: 52.89%; animation-delay: -1.00s; }
.k6 { left: 57.52%; top: 52.89%; animation-delay: -1.25s; }

.kb-base {
  left: 41.67%;
  top: 53.87%;
  width: 20.29%;
  height: 3.66%;
  /* match Figma: image stretched to fill slot (figma uses w-full h-100.74%) */
  object-fit: fill;
  z-index: 7;
}

@keyframes key-bob {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(40%); }
  40%      { transform: translateY(0); }
}

/* ===== CAT ===== */
.chair {
  left: 51.31%;
  top: 61.91%;
  width: 15.78%;
  height: 9.79%;
  /* figma stretches to fill (97.5% h, slight x offset) */
  object-fit: fill;
  z-index: 8;
}
.leg-r {
  left: 58.70%; top: 58.87%;
  width: 5.05%; height: 4.98%;
  object-fit: contain;
  transform: rotate(-1.4deg);
  transform-origin: 50% 0;
  z-index: 9;
}
.leg-l {
  left: 55.25%; top: 58.94%;
  width: 5.01%; height: 4.91%;
  object-fit: contain;
  z-index: 9;
}
/* TAIL — moved a little to the left, rotation pivot now at left-near-bottom of
   the tail image (the spot where the tail joins the body). z above body. */
.tail-wrap {
  position: absolute;
  left: 58.5%; top: 48%;
  width: 15.34%; height: 11.93%;
  z-index: 11;
  transform-origin: 45% 100%;
}
.tail-img {
  position: absolute;
  left: 13.5%;                     /* offset inside wrap to match the 73% scale */
  bottom: 13.5%;
  width: 73%; height: 73%;
  object-fit: contain;
  transform-origin: 0% 99%;       /* pivot near the tail base */
  animation: tail-sway 5s ease-in-out infinite;
}
@keyframes tail-sway {
  0%, 100% { transform: rotate(40deg); }
  50%      { transform: rotate(26deg); }
}

.cat-body-grp {
  position: absolute;
  inset: 0;
  z-index: 10;
  /* breathing scales Y only, anchored at the bottom so the seat stays put */
  transform-origin: 58% 100%;
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.01); }
}

/* BODY — three asset variants, one visible at a time.
   default (typing):  body-back  (19_bodyb)
   pause-step1:       body-side  (18_bodyl)
   paused:            body-front (17_bodyf) */
.body {
  position: absolute;
  left: 50.99%; top: 52.75%;
  width: 15.40%; height: 8.40%;
  object-fit: fill;
  transform-origin: 50% 100%;
  transform: scaleY(1.03);
}
.body-side, .body-front { display: none; object-fit: contain; }
body.pause-step1 .body-back  { display: none; }
body.pause-step1 .body-side  { display: block; }
body.paused      .body-back  { display: none; }
body.paused      .body-front { display: block; }
body.ready       .body-back,
body.cancel-confirm .body-back,
body.cancelled   .body-back,
body.complete    .body-back  { display: none; }
body.ready       .body-front,
body.cancel-confirm .body-front,
body.cancelled   .body-front,
body.complete    .body-front { display: block; }

/* Both typing paws sit behind the cat body and face. */
.hand {
  position: absolute;
  width: 5.32%;
  height: 3.77%;
  object-fit: contain;
  top: 50.85%;
}
.hand-l {
  left: 46.29%;
  z-index: -1;
  transform-origin: center bottom;
  animation: type-bob 0.5s ease-in-out infinite;
}
.hand-r {
  left: 51.54%;
  z-index: -1;                        /* right paw sits behind body+face */
  transform-origin: center bottom;
  transform: scaleX(-1);
  animation: type-bob-mirror 0.5s ease-in-out infinite;
  animation-delay: -0.25s;
}
@keyframes type-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-35%); }
}
@keyframes type-bob-mirror {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-35%); }
}

/* FACE — three variants, swap on pause state. */
.face {
  position: absolute;
  left: 46.20%; top: 33.5%;
  width: 27.73%; height: 20.69%;
  object-fit: contain;
  transform-origin: 45% 95%;        /* pivot at the neck */
  animation: head-bob 4s ease-in-out infinite;
}
.face-side, .face-front, .face-long-pause { display: none; }
body.pause-step1 .face-back  { display: none; }
body.pause-step1 .face-side  { display: block; }
body.paused      .face-back  { display: none; }
body.paused      .face-front { display: block; }
body.long-pause  .face-front { display: none; }
body.long-pause  .face-long-pause { display: block; }
body.ready       .face-back,
body.cancel-confirm .face-back,
body.cancelled   .face-back { display: none; }
body.ready       .face-front { display: block; }
body.cancel-confirm .face-long-pause,
body.cancelled   .face-long-pause { display: block; }
body.complete .face-back { display: none; }
body.complete .face-front { display: block; }
@keyframes head-bob {
  0%, 100% { transform: rotate(4deg); }
  50%      { transform: rotate(6deg); }
}

/* EXPRESSION overlay (22_exp1) — only visible in fully-paused state.
   Follows the face's head-bob: same animation + a transform-origin that
   maps to the face's pivot point in paper coordinates, so the expression
   rotates with the face instead of staying static.

   Face pivot (paper coords) = face.left + 45% × face.w,  face.top + 95% × face.h
                             = 46.20% + 45% × 27.73%      = 58.68%   (x)
                             = 33.5%  + 95% × 20.69%      = 53.16%   (y)
   Exp origin (in exp coords) = (58.68% - exp.left) / exp.w,
                                (53.16% - exp.top)  / exp.h
                              = (58.68 - 52) / 16  = 41.75%,
                                (53.16 - 47) / 4.5 = 136.9%          */
.exp {
  position: absolute;
  left: 52%; top: 47%;
  width: 16%; height: 4.5%;
  object-fit: contain;
  transform-origin: 41.75% 137%;
  animation: head-bob 4s ease-in-out infinite;
  display: none;
  z-index: 3;
}
body.paused .exp-1 { display: block; }
body.ready .exp-1 { display: block; }
body.long-pause .exp-1 { display: none; }
body.long-pause .exp-2,
body.long-pause .brow { display: block; }
body.cancel-confirm .exp-2,
body.cancelled .exp-2,
body.cancel-confirm .tear,
body.cancelled .tear { display: block; }
body.complete .exp-1 { display: block; }
body.complete .exp-2 { display: none; }

.exp-2 {
  left: 51.2%;
  top: 46.2%;
  width: 17.5%;
  height: 5.2%;
  transform-origin: 42.74% 133.85%;
}
.brow {
  position: absolute;
  display: none;
  left: 51.7%;
  top: 42.7%;
  width: 16.5%;
  height: 4.2%;
  object-fit: contain;
  transform-origin: 43% 220%;
  scale: 0.9;
  animation: head-bob 4s ease-in-out infinite;
  z-index: 4;
}
.tear {
  position: absolute;
  display: none;
  left: 68%;
  top: 50%;
  width: 3%;
  height: 5%;
  object-fit: contain;
  /* Same paper-space neck pivot as the face and expression (58.68%, 53.16%). */
  transform-origin: -244% 83.2%;
  rotate: -16deg;
  animation: head-bob 4s ease-in-out infinite;
  z-index: 5;
}

.star-eye {
  position: absolute;
  display: none;
  width: 7%;
  height: 6%;
  object-fit: contain;
  z-index: 6;
  transform-origin: 50% 50%;
  animation: head-bob 4s ease-in-out infinite;
}
.star-eye-l { left: 49.5%; top: 44.5%; transform-origin: 105% 168%; }
.star-eye-r { left: 63.5%; top: 45%; transform-origin: -45% 168%; }
body.complete .star-eye { display: block; }

/* PAUSED LAYER ORDER + HAND POSITIONS:
   - tail drops behind the body group
   - leg-r in front of leg-l
   - hands jump above everything and reposition to body's two sides */
body.paused .tail-wrap { z-index: 6; }
body.ready .tail-wrap,
body.cancel-confirm .tail-wrap,
body.cancelled .tail-wrap,
body.complete .tail-wrap { z-index: 6; }
body.paused .leg-r     { z-index: 10; }
body.paused .leg-l     { z-index: 9; }
/* ===== PAUSED HAND POSITION KNOBS =====================================
   When paused, both paws sit on the body's two sides.
   - body.paused .hand-l   left/top → move LEFT paw
   - body.paused .hand-r   left/top → move RIGHT paw (keep scaleX(-1) for mirror)
   ===================================================================== */
body.paused .hand-l {
  z-index: 100;
  left: 53.5%;          /* ← left paw X position */
  top: 52%;         /* ← left paw Y position */
  animation: none;
  transform: none;
}
body.paused .hand-r {
  z-index: 100;
  left: 58.4%;        /* ← right paw X position */
  top: 52.4%;         /* ← right paw Y position */
  animation: none;
  transform: scaleX(-1);
}

body.ready .hand-l,
body.cancel-confirm .hand-l,
body.complete .hand-l {
  z-index: 100;
  left: 53.5%;
  top: 52%;
  animation: none;
  transform: none;
}
body.ready .hand-r,
body.cancel-confirm .hand-r,
body.complete .hand-r {
  z-index: 100;
  left: 58.4%;
  top: 52.4%;
  animation: none;
  transform: scaleX(-1);
}

/* After ten paused minutes, the cat slumps and spreads both paws wider. */
body.long-pause .hand-l {
  left: 50.8%;
  top: 55.2%;
}
body.long-pause .hand-r {
  left: 61.1%;
  top: 55.2%;
}
body.cancelled .hand-l {
  z-index: 100;
  left: 50.8%;
  top: 55.2%;
  animation: none;
  transform: none;
}
body.cancelled .hand-r {
  z-index: 100;
  left: 61.1%;
  top: 55.2%;
  animation: none;
  transform: scaleX(-1);
}
body.long-pause .tail-img {
  animation: none;
  transform: rotate(70deg);
}
body.cancelled .tail-img {
  animation: none;
  transform: rotate(70deg);
}

/* Front-facing idle poses breathe with the body; the short-pause tail sits higher. */
body.ready .tail-wrap,
body.paused .tail-wrap,
body.cancel-confirm .tail-wrap,
body.cancelled .tail-wrap,
body.complete .tail-wrap {
  top: 46.8%;
  animation: breathe 4s ease-in-out infinite;
}

/* ===== PAUSED FACE POSITION KNOB =====================================
   The paused face (30_facef2) uses the same slot as .face by default.
   Override here if you want to nudge it independently. */
body.paused .face-front {
  left: 46.20%;       /* ← face X (default matches .face) */
  top: 33.5%;         /* ← face Y */
  width: 27.73%;
  height: 20.69%;
}
body.long-pause .face-long-pause {
  left: 46.2%;
  top: 33.5%;
  width: 27.73%;
  height: 20.69%;
}
body.cancel-confirm .face-long-pause,
body.cancelled .face-long-pause {
  left: 46.2%;
  top: 33.5%;
  width: 27.73%;
  height: 20.69%;
}

/* Keys go back to default position when paused (no press-down stuck) */
body.paused .key {
  animation: none;
  transform: none;
}

/* ===== UI WINDOW ===== */
.ui-window {
  left: 11.41%;
  top: 79.51%;
  width: 79.53%;
  height: 12.04%;
  object-fit: contain;
  z-index: 11;
}

.ui-controls {
  position: absolute;
  left: 11.41%;
  top: 79.51%;
  width: 79.53%;
  height: 12.04%;
  display: flex;
  justify-content: center;
  align-items: center;           /* row vertically centered inside ui-window */
  gap: 0%;
  padding: 0 2%;
  z-index: 12;
  pointer-events: auto;
}

/* ===== BUTTON SIZE KNOBS ============================================
   - text  : .ctrl       font-size      (currently 4.3cqh = 4.3% of paper height)
   - icon  : .ctrl img   height + max-width (currently 1.2em / 1.4em → em = ctrl font-size)
   - gap   : .ctrl       gap            (between icon and label)
   ===================================================================== */
.ctrl {
  font-family: inherit;
  color: #1c67ad;
  background: transparent;
  border: 0;
  font-size: 4cqh;                  /* TEXT SIZE — bump down to shrink everything */
  line-height: 1;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: flex-top;
  gap: 0.2em;
  cursor: pointer;
  padding: 0.3em 0.4em;
  border-radius: 0.4em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* no hover background, no active-press shift */
.ctrl img {
  height: 1.1em;                      /* ICON HEIGHT (relative to text size) */
  width: auto;
  max-width: 1.3em;                   /* ICON WIDTH CAP (relative to text size) */
  object-fit: contain;
}
.ctrl span {
  pointer-events: none;
}
.ctrl:disabled {
  cursor: default;
  pointer-events: none;
}

.long-pause-reminder {
  position: absolute;
  display: none;
  left: 11.41%;
  top: 79.51%;
  width: 79.53%;
  height: 12.04%;
  z-index: 20;
  pointer-events: auto;
  cursor: pointer;
}
.long-pause-reminder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.long-pause-reminder p {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1c67ad;
  font-size: 4cqh;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-4%);
}
body.long-pause:not(.long-pause-dismissed) .long-pause-reminder { display: block; }
body.cancel-confirm .long-pause-reminder { display: block; }

.reminder-close {
  position: absolute;
  top: 50%;
  right: 4.5%;
  width: 7%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.reminder-close img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.completion-reminder {
  position: absolute;
  display: none;
  left: 11.41%;
  top: 79.51%;
  width: 79.53%;
  height: 12.04%;
  z-index: 21;
  pointer-events: auto;
  cursor: pointer;
}
.completion-reminder > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.completion-reminder p {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1c67ad;
  font-size: 4cqh;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-3%, -4%);
}
.completion-close {
  position: absolute;
  top: 50%;
  right: 4.5%;
  width: 7%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.completion-close img { width: 100%; height: 100%; object-fit: contain; }
body.complete .completion-reminder { display: block; }

.site-credit {
  left: 50%;
  top: 93.8%;
  transform: translateX(-50%);
  z-index: 12;
  color: #1c67ad;
  font-size: 2.1cqh;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0.6;
}
.site-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.debug-skip {
  position: absolute;
  display: none;
  right: 5.5%;
  top: 5.5%;
  z-index: 25;
  border: 2px solid #1c67ad;
  background: #fff;
  color: #1c67ad;
  font: inherit;
  font-size: 2.1cqh;
  line-height: 1;
  padding: 0.28em 0.5em;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto;
}
body.pause-debug-enabled.paused:not(.long-pause) .debug-skip { display: block; }

.focus-debug-toggle,
.focus-debug-panel {
  position: absolute;
  display: none;
  right: 5.5%;
  z-index: 25;
  pointer-events: auto;
  border: 2px solid #1c67ad;
  background: #fff;
  color: #1c67ad;
  font: inherit;
  font-size: 2.1cqh;
  border-radius: 4px;
}
.focus-debug-toggle {
  top: 5.5%;
  padding: 0.28em 0.5em;
  cursor: pointer;
}
.focus-debug-panel {
  top: 9.4%;
  width: 31%;
  padding: 0.45em 0.6em 0.55em;
  flex-direction: column;
  gap: 0.25em;
}
.focus-debug-panel span { white-space: nowrap; }
.focus-debug-panel input {
  width: 100%;
  accent-color: #1c67ad;
  cursor: pointer;
}
body.flower-debug-enabled.is-running .focus-debug-toggle { display: block; }
body.flower-debug-enabled.is-running.focus-debugging .focus-debug-panel { display: flex; }

.garden-debug-toggle,
.garden-debug-panel {
  position: absolute;
  display: none;
  left: 5.5%;
  z-index: 25;
  pointer-events: auto;
  border: 2px solid #1c67ad;
  background: #fff;
  color: #1c67ad;
  font: inherit;
  font-size: 2.1cqh;
  border-radius: 4px;
}
.garden-debug-toggle {
  top: 5.5%;
  padding: 0.28em 0.5em;
  cursor: pointer;
}
body.garden-debug-enabled.ready .garden-debug-toggle { display: block; }
.garden-debug-panel {
  top: 9.5%;
  width: 36%;
  padding: 0.55em;
  flex-direction: column;
  gap: 0.4em;
}
body.garden-editing .garden-debug-panel { display: flex; }
body.garden-editing .garden-debug-toggle { display: none; }
body.garden-editing .grown-garden {
  z-index: 24;
  pointer-events: auto;
}
body.garden-editing .timer-hit,
body.garden-editing .ui-controls { pointer-events: none; }
.garden-debug-counts,
.garden-debug-actions { display: flex; gap: 0.35em; }
.garden-debug-panel button {
  flex: 1;
  border: 1px solid #1c67ad;
  background: #fff;
  color: #1c67ad;
  font: inherit;
  cursor: pointer;
}
.garden-debug-panel button.active {
  background: #1c67ad;
  color: #fff;
}
.garden-debug-panel textarea {
  display: none;
  width: 100%;
  height: 8em;
  resize: none;
  border: 1px solid #1c67ad;
  color: #1c67ad;
  font: 11px/1.25 monospace;
}
.garden-debug-panel.exported textarea { display: block; }

.audio-debug-toggle,
.audio-debug-panel {
  position: absolute;
  display: none;
  left: 5.5%;
  z-index: 26;
  pointer-events: auto;
  border: 2px solid #1c67ad;
  background: #fff;
  color: #1c67ad;
  font: inherit;
  font-size: 2.1cqh;
  border-radius: 4px;
}
.audio-debug-toggle {
  top: 5.5%;
  padding: 0.28em 0.5em;
  cursor: pointer;
}
body.audio-debug-enabled .audio-debug-toggle { display: block; }
.audio-debug-panel {
  top: 9.5%;
  width: 34%;
  padding: 0.55em;
  flex-direction: column;
  gap: 0.45em;
}
body.audio-debugging .audio-debug-panel { display: flex; }
.audio-debug-panel label { display: grid; gap: 0.15em; }
.audio-debug-panel label span {
  display: flex;
  justify-content: space-between;
}
.audio-debug-panel input {
  width: 100%;
  accent-color: #1c67ad;
}
.audio-debug-actions { display: flex; gap: 0.35em; }
.audio-debug-panel button {
  flex: 1;
  border: 1px solid #1c67ad;
  background: #fff;
  color: #1c67ad;
  font: inherit;
  cursor: pointer;
}
.audio-debug-panel textarea {
  display: none;
  width: 100%;
  height: 5em;
  resize: none;
  border: 1px solid #1c67ad;
  color: #1c67ad;
  font: 11px/1.25 monospace;
}
.audio-debug-panel.exported textarea { display: block; }

/* ===== STATE: paused / done =====
   When paused: kill the typing-related animations entirely (so keys + hands
   snap back to their default/paused positions, not frozen mid-press).
   Cat idle breathing, head bob, tail sway, and flower sway keep running. */
body.paused .key,
body.paused .hand-l,
body.paused .hand-r {
  animation: none;
}
body.ready .key,
body.cancel-confirm .key,
body.cancelled .key,
body.complete .key { animation: none; }
body.done .key,
body.done .hand-l,
body.done .hand-r {
  animation-play-state: paused;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .key, .hand, .cat-body-grp, .tail-img, .flying-butterfly,
  .flying-butterfly img, .grown-flower-slot, .grown-flower-slot img,
  .flower1, .flower2, .flower4, .flower8 { animation: none !important; }
  .screen .glyph { animation: none !important; }
}