/*
  Gumbuli — page shell.

  Palette (art direction, binding): eleven named colours, nothing else.
  Shadows are plum or rose; highlights are gold-tinted cream. Nothing here
  is neutral — no black, no white, no grey, ever.
*/

:root {
  --cream: #FFF7F2;
  --blush: #FFE4EC;
  --petal: #FFC2D6;
  --rose: #FF8FB1;
  --deep-rose: #E5628A;
  --plum: #7A3B54;
  --gold-light: #FFE9A8;
  --gold: #F5C451;
  --bronze: #C99038;
  --sage: #A8C6A1;
  --cocoa: #4A3038;

  /* Animated by render/scene.js (Task 12): the whole-scene tint that
     cross-fades through the five day phases, and how far night has dimmed
     the world. Defaults sit at an ordinary daylight moment. */
  --phase-tint: var(--gold-light);
  --phase-dim: 0;

  --font-display: 'Baloo 2', 'Segoe UI Rounded', 'Comic Sans MS', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

  --shadow-soft: rgba(122, 59, 84, 0.28);
  --shadow-deep: rgba(122, 59, 84, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--plum);
  font-family: var(--font-display);
  color: var(--cocoa);
}

/* ---- stage: the one SVG every render module mounts a layer into ---- */

#stage {
  width: 100vw;
  height: 100dvh;
  display: block;
}

/* ---- HUD: non-SVG overlay for the hug heart, mute toggle, letter box,
   and toasts (Tasks 18+). Empty in this task — the layout contract below
   is what later controls are built against. ---- */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-display);
  color: var(--cocoa);
}

/* Re-enable pointer events only on actual interactive leaves — never on
   layout-only wrappers like .hud-controls, whose flex gaps sit directly
   over the café/cats/roses scene beneath #hud and must stay click-through. */
#hud button,
#hud a,
#hud [role="button"],
#hud .hud-control {
  pointer-events: auto;
}

/* Landscape / desktop default: controls rest in a loose stack near the
   top-right corner, within easy mouse or thumb reach. */
.hud-controls {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.hud-control {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 82%, var(--blush));
  color: var(--cocoa);
  box-shadow: 0 6px 14px -8px var(--plum);
  cursor: pointer;
  pointer-events: auto;
}

/* Portrait phone is first-class: below 900px the controls leave the
   corner and gather into a low arc within thumb reach at the bottom of
   the screen, clear of the home-indicator safe area. */
@media (max-width: 900px) {
  .hud-controls {
    top: auto;
    right: 0.9rem;
    bottom: calc(2.4vh + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }

  /* a gentle hand-arranged stack, not a ruled column */
  .hud-controls > *:nth-child(odd) { transform: translateX(-7px); }
  .hud-controls > *:nth-child(even) { transform: translateX(3px); }
}

/* ---- focus ---- */

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- motion ----
   render/scene.js drives the sunbeam, phase tint, and lantern light every
   frame via JS, not CSS animation — so reduced motion never stops the
   world living, only the decorative flourish layered on top of it. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .decorative-motion,
  .decorative-motion * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   The window glass, the light wash and the paper grain are painted over the
   rose field and the room, but they are scenery, not surfaces. Clicks pass
   straight through them to the plot, the cat or the counter underneath.
   --------------------------------------------------------------------------- */
#cafe-glass,
#glass-sheen,
#glass-wet,
#glass-rain,
#scene-light,
#paper,
#sunbeam,
#layer-particles {
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Anything the world offers to her hand lifts a little when touched.

   The lift is on an INNER group, never on the element that positions itself.
   A CSS `transform` completely replaces the SVG `transform` attribute rather
   than composing with it, so putting the hover scale on the positioned group
   teleported every rose plot, dish, ingredient and cat to the top-left corner
   of the stage the instant the cursor reached it — it then flicked back, and
   nothing in the game could be clicked at all. `scale: 1.05` is no better:
   the individual property applies in the parent's space and drags the
   position with it.

   So: `.touchable` is the thing you point at, `.pop` is the thing that grows,
   and `.pop` must never carry a transform attribute of its own.
   --------------------------------------------------------------------------- */
.touchable { cursor: pointer; }

/* ---------------------------------------------------------------------------
   The only tutorial this game has. Nothing wears a label, so a thing that can
   be touched right now says so by breathing gold underneath itself — and
   stops the moment she has learned it: bare earth only calls while the whole
   field is bare, the counter only until she has cooked once.
   --------------------------------------------------------------------------- */
.call-halo {
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}
.calls > .pop > .call-halo {
  animation: call-breathe 3s ease-in-out infinite;
}
@keyframes call-breathe {
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 0.34; }
}
@media (prefers-reduced-motion: reduce) {
  .calls > .pop > .call-halo { animation: none; opacity: 0.22; }
}

.pop {
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-box: fill-box;
  transform-origin: center;
}
.touchable:hover > .pop,
.touchable:focus-visible > .pop {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .pop { transition-duration: 1ms; }
  .touchable:hover > .pop, .touchable:focus-visible > .pop { transform: none; }
}

/* ===========================================================================
   THE FEW THINGS SHE CAN TOUCH
   A heart, a crane, a drawer, the gramophone, the sound. Nothing else, and
   none of them wear a word.
   =========================================================================== */

/* High, not low. At 16vh from the floor a toast sat exactly across the two
   of them — every rose name, every welcome back, printed on their chests.
   The top of the frame is the one band of the room with nothing in it. */
#toasts {
  position: absolute;
  left: 50%; top: 6vh;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(88vw, 30rem);
}
.toast {
  background: color-mix(in srgb, var(--cream) 94%, var(--petal));
  color: var(--plum);
  border-radius: 1.4rem 1.2rem 1.5rem 1.1rem;
  padding: 0.7rem 1.2rem;
  box-shadow: 0 10px 26px -12px var(--plum);
  font-family: var(--font-display);
  text-align: center;
  opacity: 0; transform: translateY(-10px) scale(0.97);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.toast.is-in { opacity: 1; transform: none; }
.toast-gold {
  background: color-mix(in srgb, var(--gold-light) 88%, var(--cream));
  color: var(--bronze);
}
.toast-text { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.toast-sub {
  margin: 0.3rem 0 0; font-family: var(--font-hand);
  font-size: 1.15rem; color: var(--deep-rose);
}

/* --- the crane on the sill --------------------------------------------- */
/* left/top are written every frame by letters.js from the sill's real
   position on this screen — a fixed percentage put it in mid-air. */
.crane {
  position: absolute; left: 50%; top: 50%;
  width: 74px; height: 56px;
  border: 0; background: none; padding: 0; cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--plum) 45%, transparent));
  animation: crane-bob 3.4s ease-in-out infinite;
}
.crane svg { width: 100%; height: 100%; }
@keyframes crane-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-7px) rotate(2deg); }
}
/* the window keeps a gold rim while a letter is waiting */
.has-letter #cafe-glass { filter: drop-shadow(0 0 18px var(--gold)); }

/* --- the letter --------------------------------------------------------- */
.letter {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  /* Padded at the foot so the paper settles above centre: dead centre put it
     exactly across both their faces, and she should be able to see who is
     talking to her while she reads it. */
  padding-bottom: 13vh;
  background: color-mix(in srgb, var(--plum) 32%, transparent);
  opacity: 0; transition: opacity 380ms ease;
  pointer-events: auto;
}
.letter.is-open { opacity: 1; }
.letter-paper {
  position: relative;
  width: min(90vw, 34rem);
  max-height: 72vh; overflow-y: auto;
  background: var(--cream);
  color: var(--bronze);
  padding: 2rem 1.9rem 1.7rem;
  border-radius: 0.6rem 1.4rem 0.7rem 1.5rem;
  box-shadow: 0 24px 60px -22px var(--plum);
  transform: scaleY(0.02) rotate(-1deg); transform-origin: top center;
  transition: transform 520ms cubic-bezier(0.22, 1.3, 0.5, 1);
}
.letter.is-open .letter-paper { transform: none; }
.letter.is-sacred .letter-paper {
  box-shadow: 0 24px 60px -22px var(--plum), 0 0 0 3px var(--gold) inset;
}
.letter-title {
  margin: 0 0 0.8rem; font-family: var(--font-display);
  font-size: 1.1rem; color: var(--deep-rose); font-weight: 600;
}
.letter-body p {
  margin: 0 0 0.9rem;
  font-family: var(--font-hand);
  font-size: 1.5rem; line-height: 1.5; color: var(--bronze);
}
.letter-body p:last-child { margin-bottom: 0; }
.letter-close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  border-radius: 50%;
}
.letter-close svg { width: 22px; height: 22px; }

/* --- the letter box ----------------------------------------------------- */
.letterbox {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--plum) 28%, transparent);
  opacity: 0; transition: opacity 320ms ease; pointer-events: auto;
  display: grid; place-items: center;
}
.letterbox.is-open { opacity: 1; }
.letterbox-panel {
  width: min(90vw, 26rem); max-height: 72vh; overflow-y: auto;
  background: var(--cream); border-radius: 1.2rem;
  padding: 0.8rem; box-shadow: 0 20px 50px -20px var(--plum);
}
.letterbox-list { list-style: none; margin: 0; padding: 0; }
.letterbox-item {
  display: flex; gap: 0.6rem; align-items: baseline;
  width: 100%; min-height: 48px; text-align: left;
  border: 0; background: none; cursor: pointer;
  padding: 0.55rem 0.7rem; border-radius: 0.8rem;
  font-family: var(--font-hand); font-size: 1.15rem; color: var(--bronze);
}
.letterbox-item:hover, .letterbox-item:focus-visible {
  background: color-mix(in srgb, var(--blush) 70%, var(--cream));
}
.letterbox-when { color: var(--gold); }
.letterbox-empty {
  padding: 1rem; font-family: var(--font-hand);
  font-size: 1.15rem; color: var(--deep-rose); text-align: center;
}

/* --- the hug ------------------------------------------------------------ */
.hug {
  position: absolute; left: 50%; bottom: 3.2vh;
  transform: translateX(-50%);
  width: 68px; height: 62px;
  border: 0; background: none; padding: 0; cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--deep-rose) 55%, transparent));
  animation: hug-beat 2.9s ease-in-out infinite;
}
.hug svg { width: 100%; height: 100%; }
.hug:hover, .hug:focus-visible { transform: translateX(-50%) scale(1.07); }
.hug:active { transform: translateX(-50%) scale(0.94); }
@keyframes hug-beat {
  0%, 100% { transform: translateX(-50%) scale(1); }
  14%      { transform: translateX(-50%) scale(1.07); }
  28%      { transform: translateX(-50%) scale(1); }
}
.hug.is-pulsing { animation: hug-pulse 1.4s cubic-bezier(0.22, 1.2, 0.4, 1); }
@keyframes hug-pulse {
  0%   { transform: translateX(-50%) scale(1); }
  30%  { transform: translateX(-50%) scale(1.34); }
  100% { transform: translateX(-50%) scale(1); }
}

/* --- the warmth heart --------------------------------------------------- */
.warmth {
  position: absolute; left: 1.4rem; top: 1.2rem;
  width: 34px; height: 32px; opacity: 0.9;
}
.warmth svg { width: 100%; height: 100%; }

/* --- the small controls -------------------------------------------------
   Layout and position live in the one rule near the top of this file. There
   used to be a second `.hud-controls` block here, later in the cascade and
   at equal specificity, quietly re-pinning `top` and `right` — so the phone
   media query had never once taken effect and the controls sat in the top
   corner on every handset, out of thumb reach. */
.hud-control svg { width: 24px; height: 24px; }
.gram.is-spinning circle:first-of-type { animation: spin 3.4s linear infinite; transform-origin: 12px 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  #toasts { top: 8vh; }
  .crane { width: 62px; height: 48px; }
  .hug { width: 76px; height: 70px; bottom: calc(2.4vh + env(safe-area-inset-bottom, 0px)); }
  .letter-body p { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .crane, .hug, .hug.is-pulsing, .gram.is-spinning circle:first-of-type { animation: none; }
  .toast, .letter, .letter-paper, .letterbox { transition-duration: 1ms; }
}

/* ---------------------------------------------------------------------------
   `display: grid` beats the `hidden` attribute, so a closed letter or letter
   box stayed a full-screen invisible sheet over the whole room and swallowed
   every click in it — the garden, the cats, the counter, all of it. Only the
   HUD still worked. Nothing that is hidden may be laid out.
   --------------------------------------------------------------------------- */
#hud [hidden] { display: none !important; }