/* ── Hima the Cat ────────────────────────────────────────────────────────
   Game-UI styling: chunky rounded shapes, thick ink outlines, hard offset
   shadows. Mobile-first — the realistic case is one thumb on a phone in the
   street, so touch targets stay large and the CTA is always reachable.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --cream: #FFF6EC;
  --peach: #FFD9C0;
  --lilac: #E4DBFF;
  --mint:  #4FBF9F;
  --coral: #FF6B4A;
  --pink:  #F2637F;
  --ink:   #2A2530;
  --ink-soft: #6B6376;
  --white: #FFFFFF;

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  --shadow-hard: 0 4px 0 var(--ink);
  --shadow-soft: 0 12px 30px rgba(42, 37, 48, .16);

  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Nunito",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

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

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;               /* the scene is the page; nothing scrolls */
  overscroll-behavior: none;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body { touch-action: none; }      /* let Matter own the gestures */

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── scene ─────────────────────────────────────────────────────────────── */
#scene { position: fixed; inset: 0; z-index: 0; }

/* Cherry-blossom sunset. The scrim on top is not decoration — the raw render
   goes dusky in its lower half, and the HUD is dark ink on light. Without it
   the wordmark and hint stop being comfortably readable. The last gradient is
   the fallback: if the image 404s the page still looks deliberate. */
.sky {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255,247,240,.34) 0%,
      rgba(255,242,235,.12) 26%,
      rgba(255,240,233,.30) 66%,
      rgba(255,243,238,.52) 100%),
    url('/img/bg-sky.webp') center / cover no-repeat,
    linear-gradient(180deg, #FFE7D8 0%, #F3CBD6 55%, #D9B9CE 100%);
}

/* Parallax. `--px` is set once a frame by app.js from where Hima is, running
   -1 (hard left) to 1 (hard right). Each layer moves by a different amount, so
   walking across the screen actually pushes the world past her — which is what
   the flat middle band of sky was missing.

   The layers move the OPPOSITE way to her, and the further away a layer is, the
   less it shifts. `will-change` keeps each one on its own compositor layer. */
.sky, .hedge, .branch { will-change: transform; }
.sky { transform: translate3d(calc(var(--px, 0) * -6px), 0, 0); }

/* Midground hedge, sitting on the grass line. Repeated horizontally so it
   covers any viewport without stretching the shrubs into ovals. */
.hedge {
  position: absolute; left: -8%; right: -8%;
  bottom: 166px; /* overlaps the top of .floor so it grows out of the grass */
  height: 74px;
  background: url('/img/bg-hedge.webp') repeat-x bottom center / auto 100%;
  /* Small and faded on purpose. At full size the shrubs stood as tall as she
     does and read as foreground clutter she was wading through, rather than as
     something in the distance behind her. */
  opacity: .8;
  transform: translate3d(calc(var(--px, 0) * -22px), 0, 0);
}

/* Foreground branch, framing the top-left. Sized off the viewport width so it
   never eats the screen on a small phone. */
.branch {
  position: absolute; top: -22px; left: -18px;
  width: min(54vw, 262px); aspect-ratio: 620 / 453;
  background: url('/img/bg-branch.webp') no-repeat top left / contain;
  pointer-events: none;
  transform-origin: 8% 0;
  transform: translate3d(calc(var(--px, 0) * -46px), 0, 0);
  animation: branch-sway 9s ease-in-out infinite;
}
@keyframes branch-sway { 0%,100% { rotate: -1.1deg; } 50% { rotate: 1.1deg; } }

/* Falling petals. Twelve elements animating nothing but transform, so this is
   composited on the GPU and costs no bytes. */
.petals { position: absolute; inset: 0; overflow: hidden; }
.petals i {
  position: absolute; top: -10%; display: block;
  width: 13px; height: 10px;
  background: radial-gradient(125% 125% at 30% 28%, #FFDCE8 0%, #F6A9C6 70%, #E88CB0 100%);
  border-radius: 62% 38% 55% 45% / 66% 60% 40% 34%;
  opacity: 0;
  animation: petal-fall linear infinite;
  will-change: transform;
}
.petals i:nth-child(1)  { left:  4%; animation-duration: 15s; animation-delay:  -1s; transform: scale(.7); }
.petals i:nth-child(2)  { left: 13%; animation-duration: 21s; animation-delay:  -9s; }
.petals i:nth-child(3)  { left: 22%; animation-duration: 17s; animation-delay: -14s; transform: scale(.8); }
.petals i:nth-child(4)  { left: 31%; animation-duration: 24s; animation-delay:  -4s; }
.petals i:nth-child(5)  { left: 40%; animation-duration: 19s; animation-delay: -17s; transform: scale(.6); }
.petals i:nth-child(6)  { left: 49%; animation-duration: 26s; animation-delay: -11s; }
.petals i:nth-child(7)  { left: 58%; animation-duration: 16s; animation-delay:  -6s; transform: scale(.75); }
.petals i:nth-child(8)  { left: 67%; animation-duration: 22s; animation-delay: -20s; }
.petals i:nth-child(9)  { left: 76%; animation-duration: 18s; animation-delay:  -3s; transform: scale(.65); }
.petals i:nth-child(10) { left: 85%; animation-duration: 25s; animation-delay: -15s; }
.petals i:nth-child(11) { left: 92%; animation-duration: 20s; animation-delay:  -8s; transform: scale(.85); }
.petals i:nth-child(12) { left: 68%; animation-duration: 28s; animation-delay: -23s; transform: scale(.55); }

@keyframes petal-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  6%   { opacity: .82; }
  50%  { transform: translate3d(34px, 55vh, 0) rotate(280deg); }
  94%  { opacity: .82; }
  100% { transform: translate3d(-8px, 118vh, 0) rotate(560deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
  .branch { animation: none; }
}

#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Height must match FLOOR_H in app.js — this is the surface she stands on, and
   its TOP edge is where her paws land. The grass render is shot at a shallow
   angle, so its far grass lands at that top edge and she reads as standing on
   it. Fade the first few pixels only: any more and she appears to hover. */
.floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 178px;
  background: url('/img/bg-grass.webp') center bottom / cover no-repeat, #9FD293;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px);
          mask-image: linear-gradient(180deg, transparent 0, #000 12px);
}

/* ── intro curtain ─────────────────────────────────────────────────────── */
#intro {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(80% 60% at 50% 30%, #FFF9F2 0%, transparent 70%),
    linear-gradient(180deg, #FFEEDF, #FFD9C7);
}
#intro.gone { opacity: 0; pointer-events: none; }

.intro-inner { text-align: center; max-width: 340px; }

/* A button, because it is genuinely tappable — she squashes and chirps. The
   bob is CSS so it keeps going even if the sprite fails to load; everything
   inside her is driven from cat.js. */
.intro-mark {
  display: block; margin: 0 auto; padding: 0;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: bob 4.4s ease-in-out infinite;
}
.intro-mark:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; border-radius: 18px; }
.intro-cat { display: block; overflow: visible; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.intro-title {
  margin: 10px 0 4px;
  font-size: clamp(46px, 15vw, 66px);
  font-weight: 900; letter-spacing: -.03em; line-height: 1;
  color: var(--ink);
  text-shadow: 0 4px 0 rgba(255,255,255,.7);
}
.intro-sub { margin: 0 0 26px; color: var(--ink-soft); font-size: 16px; font-weight: 700; line-height: 1.45; }

.start-btn {
  font: inherit; font-weight: 900; font-size: 18px;
  padding: 16px 34px; min-height: 56px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--coral); color: var(--white);
  box-shadow: var(--shadow-hard); cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.start-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }

.intro-note { margin-top: 22px; font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.linkish {
  font: inherit; font-weight: 800; font-size: 13px;
  background: none; border: 0; padding: 0;
  color: var(--pink); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

/* ── HUD ───────────────────────────────────────────────────────────────── */
.hud { position: fixed; left: 0; right: 0; z-index: 20; pointer-events: none; }
.hud > * { pointer-events: auto; }

.hud-top {
  top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + var(--safe-t)) 16px 0;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 900; font-size: 19px; letter-spacing: .12em;
  padding: 9px 15px;
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: var(--shadow-hard);
}
.wordmark .ico.paw { width: 17px; height: 17px; }

/* Inline SVG icons inherit the button's text colour via fill="currentColor". */
.ico { width: 22px; height: 22px; display: block; color: inherit; }

.hud-btns { display: flex; gap: 9px; }
.icon-btn {
  width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 18px; background: var(--white);
  border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: var(--shadow-hard); cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.icon-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.icon-btn[aria-pressed="true"] { background: var(--mint); }

.hint {
  position: fixed; z-index: 15; left: 50%; top: calc(84px + var(--safe-t));
  transform: translateX(-50%);
  margin: 0; padding: 8px 16px;
  font-size: 13px; font-weight: 800; color: var(--ink-soft);
  background: rgba(255,255,255,.72); border-radius: 999px;
  white-space: nowrap; pointer-events: none;
  transition: opacity .5s;
}
.hint.gone { opacity: 0; }

/* ── bottom CTAs ───────────────────────────────────────────────────────── */
.hud-bottom {
  bottom: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 0 16px calc(16px + var(--safe-b));
}

.cta {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 18px; min-height: 62px;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--coral); color: var(--white);
  border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--shadow-hard);
  transition: transform .12s, box-shadow .12s;
}
.cta:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.cta-emoji { width: 27px; height: 27px; flex: none; }
.cta-text { display: flex; flex-direction: column; line-height: 1.25; }
.cta-text b { font-size: 17px; font-weight: 900; letter-spacing: .01em; }
.cta-text small { font-size: 12px; font-weight: 700; opacity: .82; }

.cta-ghost { background: var(--white); color: var(--ink); min-height: 56px; }

/* a slow heartbeat on the primary CTA so a panicking finder's eye lands on it */
#found-btn { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 92%, 100% { transform: scale(1); }
  96%           { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  #found-btn, .intro-mark { animation: none; }
}

/* ── sheets / modals ───────────────────────────────────────────────────── */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: grid; }
/* `display: grid` beats the [hidden] UA default, so a closed sheet would stay
   in the layer and silently eat taps meant for the CTA underneath. */
.sheet-wrap[hidden], [hidden] { display: none !important; }
.sheet-bg { position: absolute; inset: 0; background: rgba(42,37,48,.45); backdrop-filter: blur(3px); }

.sheet {
  position: relative; align-self: end; justify-self: center;
  width: 100%; max-width: 460px;
  max-height: min(88dvh, 760px); overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 26px 20px calc(22px + var(--safe-b));
  background: var(--cream);
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-soft);
  animation: rise .3s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (min-width: 620px) {
  .sheet { align-self: center; border-bottom: 3px solid var(--ink); border-radius: var(--r-lg); }
  @keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}

.sheet-x {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; font-size: 22px; line-height: 1;
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 50%;
  cursor: pointer; z-index: 2;
}

.badge {
  display: inline-block; padding: 6px 13px; margin-bottom: 12px;
  font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  background: var(--mint); color: var(--white);
  border: 3px solid var(--ink); border-radius: 999px;
}

.sheet h2 { margin: 0 0 8px; font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.sheet-lead { margin: 0 0 20px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink-soft); }

.contact-row {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 14px 16px; margin-bottom: 10px; min-height: 66px;
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--white);
  border: 3px solid var(--ink); border-radius: var(--r-md);
  box-shadow: var(--shadow-hard);
  transition: transform .12s, box-shadow .12s;
}
.contact-row:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.contact-row.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.cr-ico { width: 25px; height: 25px; flex: none; }
.cr-body { display: flex; flex-direction: column; flex: 1; line-height: 1.3; min-width: 0; }
.cr-body b { font-size: 16px; font-weight: 900; }
.cr-body small { font-size: 13px; font-weight: 700; color: var(--ink-soft); overflow-wrap: anywhere; }
.cr-go { font-size: 18px; font-weight: 900; color: var(--ink-soft); }

#call-link { background: var(--mint); color: var(--white); }
#call-link small, #call-link .cr-go { color: rgba(255,255,255,.9); }

.id-card {
  margin-top: 20px; padding: 16px 18px;
  background: var(--white);
  border: 3px dashed rgba(42,37,48,.25); border-radius: var(--r-md);
}
.id-card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.id-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.id-card dt { font-weight: 800; color: var(--ink-soft); }
.id-card dd { margin: 0; font-weight: 700; }

.sheet-foot {
  margin: 18px 0 0; padding: 14px 16px;
  font-size: 14px; font-weight: 700; line-height: 1.5;
  background: #FFF0D6; border: 3px solid var(--ink); border-radius: var(--r-md);
}

/* ── chat ──────────────────────────────────────────────────────────────── */
.chat-card { display: flex; flex-direction: column; height: min(88dvh, 720px); padding-bottom: calc(14px + var(--safe-b)); overflow: hidden; }

.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 3px solid rgba(42,37,48,.1); }
.chat-ava { width: 52px; height: 52px; display: grid; place-items: center; background: var(--lilac); border: 3px solid var(--ink); border-radius: 50%; flex: none; overflow: hidden; }
/* Her chin sits low in the crop, so nudge the portrait up to centre her face
   in the circle rather than her collar. */
.chat-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.18); }
.chat-head h2 { margin: 0; font-size: 20px; }
.chat-status { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); display: inline-block; }

.chat-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 2px;
}

.msg { max-width: 84%; padding: 11px 15px; font-size: 15px; font-weight: 600; line-height: 1.45; border: 3px solid var(--ink); border-radius: var(--r-md); animation: pop .22s ease-out; overflow-wrap: anywhere; }
@keyframes pop { from { transform: scale(.94) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.msg.bot  { align-self: flex-start; background: var(--white); border-bottom-left-radius: 6px; }
.msg.user { align-self: flex-end;   background: var(--coral); color: var(--white); border-bottom-right-radius: 6px; }

.typing { display: flex; gap: 5px; align-items: center; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.quick-replies { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.quick-replies::-webkit-scrollbar { display: none; }
.qr {
  flex: none; padding: 9px 15px; font: inherit; font-size: 13px; font-weight: 800;
  white-space: nowrap; cursor: pointer;
  background: var(--lilac); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
}
.qr:active { transform: translateY(2px); }

.chat-form { display: flex; gap: 9px; padding-top: 12px; border-top: 3px solid rgba(42,37,48,.1); }
#chat-input {
  flex: 1; min-width: 0; padding: 14px 17px;
  font: inherit; font-size: 16px; font-weight: 600;   /* 16px stops iOS zooming */
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
  outline: none;
}
#chat-input:focus { border-color: var(--coral); }
#chat-send {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  background: var(--coral); color: var(--white);
  border: 3px solid var(--ink); border-radius: 50%;
  cursor: pointer;
}
#chat-send:disabled { opacity: .5; cursor: default; }

/* ── toast ─────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(150px + var(--safe-b)); z-index: 70;
  transform: translateX(-50%);
  padding: 12px 20px; font-size: 14px; font-weight: 800;
  background: var(--ink); color: var(--white); border-radius: 999px;
  box-shadow: var(--shadow-soft);
  animation: pop .22s ease-out;
}