/* ==========================================================================
   Smooshy - the fluffy menu monster (js/monster.js)
   ========================================================================== */

/* The menu card sits between Smooshy hiding (behind) and Smooshy out (in front).
   Its wrapper carries the shadow, so the shadow follows the bites cut out of the card. */
.card-shell {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  filter: drop-shadow(0 10px 26px rgba(58, 50, 83, 0.12)) drop-shadow(0 1px 2px rgba(58, 50, 83, 0.05));
}

/* --- Switching games (js/monster.js): the card, and Smooshy if she's hiding behind it, fade out
   first; the other game is prefetched, its card pops in, and the floor is the same on both pages --- */
.modal-overlay.is-switching .card-shell,
.modal-overlay.is-switching .smooshy.is-behind {
  animation: menuLeave 0.22s ease-in forwards;
}

@keyframes menuLeave {
  to { opacity: 0; transform: translateY(10px) scale(0.97); }
}

/* --- The menu screen: one shared background for both games (the game behind doesn't show through) --- */
:root {
  --menu-bg:
    radial-gradient(560px 400px at 10% 16%, rgba(255, 190, 210, 0.55), rgba(255, 190, 210, 0) 70%),
    radial-gradient(600px 440px at 90% 22%, rgba(200, 182, 255, 0.6), rgba(200, 182, 255, 0) 70%),
    radial-gradient(500px 360px at 50% 60%, rgba(255, 233, 170, 0.35), rgba(255, 233, 170, 0) 70%),
    linear-gradient(180deg, #fff0f3 0%, #f7eeff 55%, #efe8ff 100%);
}

/* --- Loading: nothing shows until the menu is fully put together (no flash of a half-built page).
   The loader has the menu's own background, so a quick load looks like the menu simply fading in;
   the dots only appear if it takes a moment. If a script fails, the page shows anyway after 5s. --- */
html.is-loading body > :not(.page-loader) {
  visibility: hidden;
  animation: loadFallback 0s 5s forwards;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--menu-bg);
  transition: opacity 0.35s ease, visibility 0.35s;
}

html.is-loading .page-loader {
  animation: loadFallbackOut 0.35s 5s forwards;
}

html:not(.is-loading) .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0;
  animation: loaderIn 0.2s 0.3s forwards, loaderBounce 0.9s 0.3s ease-in-out infinite;
}

.page-loader span:nth-child(2) { background: #a58cf5; animation-delay: 0.3s, 0.45s; }
.page-loader span:nth-child(3) { background: #ffd166; animation-delay: 0.3s, 0.6s; }

@keyframes loaderIn { to { opacity: 1; } }

@keyframes loaderBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-14px) scale(1.1, 0.95); }
}

@keyframes loadFallback { to { visibility: visible; } }
@keyframes loadFallbackOut { to { opacity: 0; visibility: hidden; } }

#welcome-modal {
  background: var(--menu-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Both games' menu cards are exactly the same size (so they sit in exactly the same place) */
.welcome-card:has(#welcome-main:not([hidden])) {
  min-height: var(--menu-card-h, 470px);
}

.welcome-card .welcome-main {
  flex: 1;
  justify-content: space-evenly;
}

@media (max-height: 760px) { :root { --menu-card-h: 440px; } }
@media (max-height: 620px) { :root { --menu-card-h: 390px; } }
/* Phones: text wraps more, so the card is taller (there's room above it) */
@media (max-width: 640px) { :root { --menu-card-h: 470px; } }
@media (max-width: 640px) and (max-height: 700px) { :root { --menu-card-h: 440px; } }

/* --- The magical floor under the menu (js/monster.js builds it) --- */
:root {
  --floor-h: clamp(120px, 24vh, 230px);
}

/* The menu card stands on the floor's surface (55% of its height up from the bottom). If a small
   screen can't fit it, the menu screen scrolls rather than cutting the card off. */
.modal-overlay.has-floor {
  align-items: flex-start;
  padding-bottom: calc(var(--floor-h) * 0.55 - 4px);
  overflow-y: auto;
  touch-action: pan-y;
}

.modal-overlay.has-floor {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.modal-overlay.has-floor > .card-shell {
  margin-top: auto;
  max-height: none;
}

/* The KeySmooshy logo heads the menu screen. It's just a picture: Smooshy peeks in front of it
   (same layer, later in the page), and taps pass through it to her. */
.welcome-logo {
  position: relative;
  z-index: 1;
  pointer-events: none;
  flex: none;
  width: min(440px, 88vw);
  margin: max(4px, 2vh) auto 12px;
  filter: drop-shadow(0 6px 10px rgba(90, 62, 190, 0.18));
}


@media (max-height: 700px) {
  .welcome-logo { width: min(330px, 76vw); margin-bottom: 8px; }
}

@media (max-width: 640px) {
  .welcome-logo { width: min(320px, 86vw); }
}

/* While "How it works" is open, the card may reach down over the floor so it fits without scrolling */
.modal-overlay.has-floor:has(#welcome-info:not([hidden])) {
  padding-bottom: 12px;
}

/* A soft contact shadow where the card meets the ground */
.card-shell::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -16px;
  height: 28px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(76, 54, 150, 0.3) 0%, rgba(76, 54, 150, 0) 70%);
}

.magic-floor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: var(--floor-h);
  pointer-events: none;
}

.floor-art {
  position: absolute;
  inset: 0;
}

/* The site footer lives on the front of the floor, below where the card stands */
.welcome-card > .welcome-foot {
  display: none;   /* until js/monster.js moves it onto the floor */
}

.magic-floor .welcome-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px calc(6px + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  text-align: center;
}

.magic-floor .legal-links {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.magic-floor .legal-links a {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(74, 52, 160, 0.35);
}

.magic-floor .legal-links a:hover {
  color: #fff3c4;
}

.magic-floor .copyright-note {
  max-width: 520px;
  font-size: 11.5px;
  color: #f1ebff;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(74, 52, 160, 0.3);
}

.floor-hills {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.floor-deco {
  position: absolute;
  bottom: calc(55% - 3px);
  width: calc(36px * var(--s));
  transform: translateX(-50%);
  transform-origin: 50% 100%;
}

.floor-deco svg {
  display: block;
  width: 100%;
  height: auto;
}

.floor-grass,
.floor-flower {
  animation: floorSway 3.6s ease-in-out infinite;
}

.floor-flower { animation-duration: 4.4s; }
.floor-deco:nth-child(odd) { animation-delay: -1.5s; }

@keyframes floorSway {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  50% { transform: translateX(-50%) rotate(4deg); }
}

.floor-sparkle {
  position: absolute;
  width: calc(18px * var(--s));
  transform: translate(-50%, 50%);
  animation: floorTwinkle 3.2s ease-in-out infinite;
}

.floor-sparkle svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes floorTwinkle {
  0%, 100% { opacity: 0.25; transform: translate(-50%, 50%) scale(0.6) rotate(0deg); }
  50% { opacity: 1; transform: translate(-50%, 50%) scale(1.1) rotate(45deg); }
}

/* Fireflies drifting just above the ground */
.floor-firefly {
  position: absolute;
  bottom: calc(55% + 30px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffe28a;
  box-shadow: 0 0 10px 4px rgba(255, 214, 102, 0.6);
  animation: floorFirefly 6s ease-in-out infinite;
}

@keyframes floorFirefly {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  25% { transform: translate(14px, -26px); opacity: 1; }
  50% { transform: translate(-8px, -44px); opacity: 0.6; }
  75% { transform: translate(-18px, -18px); opacity: 1; }
}

@media (max-width: 640px) {
  /* Taller on phones too: the site footer sits on its front */
  :root {
    --floor-h: clamp(140px, 20vh, 176px);
  }

  .magic-floor .legal-links { font-size: 13px; }
  .magic-floor .copyright-note { font-size: 10.5px; }

  .floor-deco {
    width: calc(26px * var(--s));
  }

  .floor-firefly {
    bottom: calc(55% + 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floor-grass,
  .floor-flower,
  .floor-sparkle,
  .floor-firefly {
    animation: none;
  }
}

/* --- Smooshy was here: bites out of the card's edges, and purple claw scratches on it --- */
.welcome-card.is-bitten {
  --b: 1;   /* bite size */
  box-shadow: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cg fill='none' stroke='%239d7ef5' stroke-linecap='round'%3E%3Cpath d='M12 72 Q52 44 104 14' stroke-width='5.5'/%3E%3Cpath d='M26 84 Q64 58 112 32' stroke-width='4.5'/%3E%3Cpath d='M8 52 Q40 32 84 8' stroke-width='3.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 12px top 74px / 84px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 70'%3E%3Cg fill='none' stroke='%23b49cff' stroke-linecap='round'%3E%3Cpath d='M78 60 Q48 40 10 26' stroke-width='4.5'/%3E%3Cpath d='M84 44 Q56 26 22 10' stroke-width='3.5'/%3E%3Cpath d='M70 68 Q44 52 14 44' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat left 12px top 76px / 58px auto,
    var(--surface);
  /* Each bite is a few overlapping round "teeth" cut out of an edge */
  -webkit-mask-image:
    radial-gradient(circle at calc(100% - 64px) -2px, transparent calc(var(--b) * 15px), #000 calc(var(--b) * 15px + 0.5px)),
    radial-gradient(circle at calc(100% - 88px) 1px, transparent calc(var(--b) * 12px), #000 calc(var(--b) * 12px + 0.5px)),
    radial-gradient(circle at calc(100% - 42px) 2px, transparent calc(var(--b) * 11px), #000 calc(var(--b) * 11px + 0.5px)),
    radial-gradient(circle at -2px 58%, transparent calc(var(--b) * 13px), #000 calc(var(--b) * 13px + 0.5px)),
    radial-gradient(circle at 1px calc(58% + 21px), transparent calc(var(--b) * 10px), #000 calc(var(--b) * 10px + 0.5px)),
    radial-gradient(circle at 34% calc(100% + 2px), transparent calc(var(--b) * 12px), #000 calc(var(--b) * 12px + 0.5px)),
    radial-gradient(circle at calc(34% + 21px) calc(100% - 1px), transparent calc(var(--b) * 10px), #000 calc(var(--b) * 10px + 0.5px)),
    radial-gradient(circle at 18% -2px, transparent calc(var(--b) * 8px), #000 calc(var(--b) * 8px + 0.5px)),
    radial-gradient(circle at calc(18% + 13px) 1px, transparent calc(var(--b) * 6px), #000 calc(var(--b) * 6px + 0.5px)),
    radial-gradient(circle at calc(100% + 3px) 30%, transparent calc(var(--b) * 18px), #000 calc(var(--b) * 18px + 0.5px)),
    radial-gradient(circle at calc(100% - 1px) calc(30% + 26px), transparent calc(var(--b) * 12px), #000 calc(var(--b) * 12px + 0.5px)),
    radial-gradient(circle at calc(100% + 1px) calc(30% - 22px), transparent calc(var(--b) * 9px), #000 calc(var(--b) * 9px + 0.5px)),
    radial-gradient(circle at -2px 24%, transparent calc(var(--b) * 7px), #000 calc(var(--b) * 7px + 0.5px)),
    radial-gradient(circle at 78% calc(100% + 2px), transparent calc(var(--b) * 16px), #000 calc(var(--b) * 16px + 0.5px)),
    radial-gradient(circle at calc(78% - 24px) calc(100% - 1px), transparent calc(var(--b) * 10px), #000 calc(var(--b) * 10px + 0.5px)),
    radial-gradient(circle at 8% calc(100% + 1px), transparent calc(var(--b) * 6px), #000 calc(var(--b) * 6px + 0.5px));
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at calc(100% - 64px) -2px, transparent calc(var(--b) * 15px), #000 calc(var(--b) * 15px + 0.5px)),
    radial-gradient(circle at calc(100% - 88px) 1px, transparent calc(var(--b) * 12px), #000 calc(var(--b) * 12px + 0.5px)),
    radial-gradient(circle at calc(100% - 42px) 2px, transparent calc(var(--b) * 11px), #000 calc(var(--b) * 11px + 0.5px)),
    radial-gradient(circle at -2px 58%, transparent calc(var(--b) * 13px), #000 calc(var(--b) * 13px + 0.5px)),
    radial-gradient(circle at 1px calc(58% + 21px), transparent calc(var(--b) * 10px), #000 calc(var(--b) * 10px + 0.5px)),
    radial-gradient(circle at 34% calc(100% + 2px), transparent calc(var(--b) * 12px), #000 calc(var(--b) * 12px + 0.5px)),
    radial-gradient(circle at calc(34% + 21px) calc(100% - 1px), transparent calc(var(--b) * 10px), #000 calc(var(--b) * 10px + 0.5px)),
    radial-gradient(circle at 18% -2px, transparent calc(var(--b) * 8px), #000 calc(var(--b) * 8px + 0.5px)),
    radial-gradient(circle at calc(18% + 13px) 1px, transparent calc(var(--b) * 6px), #000 calc(var(--b) * 6px + 0.5px)),
    radial-gradient(circle at calc(100% + 3px) 30%, transparent calc(var(--b) * 18px), #000 calc(var(--b) * 18px + 0.5px)),
    radial-gradient(circle at calc(100% - 1px) calc(30% + 26px), transparent calc(var(--b) * 12px), #000 calc(var(--b) * 12px + 0.5px)),
    radial-gradient(circle at calc(100% + 1px) calc(30% - 22px), transparent calc(var(--b) * 9px), #000 calc(var(--b) * 9px + 0.5px)),
    radial-gradient(circle at -2px 24%, transparent calc(var(--b) * 7px), #000 calc(var(--b) * 7px + 0.5px)),
    radial-gradient(circle at 78% calc(100% + 2px), transparent calc(var(--b) * 16px), #000 calc(var(--b) * 16px + 0.5px)),
    radial-gradient(circle at calc(78% - 24px) calc(100% - 1px), transparent calc(var(--b) * 10px), #000 calc(var(--b) * 10px + 0.5px)),
    radial-gradient(circle at 8% calc(100% + 1px), transparent calc(var(--b) * 6px), #000 calc(var(--b) * 6px + 0.5px));
  mask-composite: intersect;
}

.smooshy {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 210px;
  height: 210px;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
}

/* Invisible until she has taken her place behind the card (no flash of her while the page loads) */
.smooshy:not(.is-ready) {
  visibility: hidden;
}

.smooshy.is-front,
.smooshy.is-out {
  z-index: 3;
}

/* Phones: the menu card covers the whole width, so Smooshy always stays behind it (also once she's
   out). The card makes room for her, and wherever they'd still overlap, its buttons win. She only
   passes in front of it mid-hop. */
@media (max-width: 640px) {
  .smooshy.is-out {
    z-index: 1;
  }
}

.smooshy:focus-visible .smooshy-inner {
  outline: 3px solid var(--sky-ink);
  outline-offset: 4px;
  border-radius: 40%;
}

.smooshy-inner {
  width: 100%;
  height: 100%;
  transform-origin: 50% 95%;
}

.smooshy svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 8px 14px rgba(58, 50, 83, 0.18));
}

/* --- Her colors and little details --- */
.m-shadow { fill: rgba(58, 50, 83, 0.16); }
.m-arm { fill: #9a7ef5; }
.m-bean { fill: #ffb3cf; }
.m-horn { fill: #ffd166; stroke: #eab232; stroke-width: 2; stroke-linejoin: round; }
.m-horn-stripe { fill: none; stroke: #f3a81f; stroke-width: 2.5; stroke-linecap: round; }
.m-lid { fill: #a68cf8; }
.m-cheek { fill: #ff9ec0; opacity: 0.65; }
.m-freckle { fill: #e9799f; opacity: 0.7; }
.m-heart { fill: #ff9ec0; }
.m-fur-lines,
.m-tummy-fluff {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.m-fur-lines { stroke: #cbb8ff; opacity: 0.8; }
.m-tummy-fluff { stroke: #c9b8f5; }
.m-brow {
  fill: none;
  stroke: #5b45b0;
  stroke-width: 4;
  stroke-linecap: round;
  transition: transform 0.2s ease;
}

/* Eyebrows jump up when she talks or is surprised */
.smooshy.is-talking .m-brow {
  transform: translateY(-5px);
}

/* Her curly tail wags slowly */
.m-tail {
  transform-box: view-box;
  transform-origin: 40px 166px;
  animation: smooshyTail 2.6s ease-in-out infinite;
}

@keyframes smooshyTail {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-14deg); }
}

.smooshy.is-walking .m-tail,
.smooshy.is-purring .m-tail {
  animation-duration: 0.6s;
}
.m-mouth-smile path:first-child,
.m-eyes-closed path {
  fill: none;
  stroke: #2d2440;
  stroke-width: 4.5;
  stroke-linecap: round;
}
.m-tooth { fill: #ffffff; stroke: #2d2440; stroke-width: 1.5; stroke-linejoin: round; }

/* --- Faces --- */
.m-eyes-closed,
.m-mouth-open {
  display: none;
}

.smooshy.is-happy .m-eyes-open { display: none; }
.smooshy.is-happy .m-eyes-closed { display: inline; }
.smooshy.is-talking .m-mouth-smile { display: none; }
.smooshy.is-talking .m-mouth-open { display: inline; }

.m-pupil {
  transition: transform 0.15s ease-out;
}

/* Blinking */
.m-lid {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: scaleY(0);
  animation: smooshyBlink 4.6s infinite;
}

.m-eye + .m-eye .m-lid {
  animation-delay: 0.04s;
}

@keyframes smooshyBlink {
  0%, 92%, 100% { transform: scaleY(0); }
  95% { transform: scaleY(1); }
}

/* Breathing: a soft, chubby squish */
.m-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: smooshyBreathe 3s ease-in-out infinite;
}

@keyframes smooshyBreathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.03, 0.97); }
}

.smooshy.is-sleeping .m-body { animation-duration: 4.5s; }
.smooshy.is-purring .m-body { animation: smooshyPurr 0.18s linear infinite; }

@keyframes smooshyPurr {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.2px); }
}

.smooshy.is-purring .m-cheek,
.smooshy .act-blush .m-cheek {
  opacity: 1;
  transition: opacity 0.3s;
}

/* --- Walking: a clumsy waddle, one sway per step, feet lifting in turn and arms swinging --- */
.smooshy.is-walking .smooshy-inner {
  animation: smooshyWaddle calc(var(--step-ms, 340ms) * 2) ease-in-out infinite;
}

.smooshy.is-walking .m-foot-l { animation: smooshyStep calc(var(--step-ms, 340ms) * 2) ease-in-out infinite; }
.smooshy.is-walking .m-foot-r { animation: smooshyStep calc(var(--step-ms, 340ms) * 2) ease-in-out infinite var(--step-ms, 340ms); }

.smooshy.is-walking .m-arm {
  transform-box: fill-box;
  transform-origin: 50% 10%;
  animation: smooshyArmSwing calc(var(--step-ms, 340ms) * 2) ease-in-out infinite;
}

.smooshy.is-walking .m-arm-r { animation-delay: var(--step-ms, 340ms); }

@keyframes smooshyArmSwing {
  0%, 100% { transform: rotate(14deg); }
  50% { transform: rotate(-14deg); }
}

/* Dust puffs where her feet land */
.smooshy-dust {
  position: fixed;
  z-index: 3;
  width: 22px;
  height: 14px;
  margin: -7px 0 0 -11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(201, 184, 245, 0.5);
  pointer-events: none;
  animation: smooshyDust 0.65s ease-out forwards;
}

@keyframes smooshyDust {
  0% { transform: scale(0.3) translateY(0); opacity: 0.9; }
  100% { transform: scale(1.6) translateY(-8px); opacity: 0; }
}

.m-foot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@keyframes smooshyWaddle {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

@keyframes smooshyStep {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* --- Reactions (classes added on .smooshy-inner by monster.js) --- */
.act-wave .m-arm-r {
  transform-box: fill-box;
  transform-origin: 30% 90%;
  animation: smooshyWave 0.4s ease-in-out 4;
}

@keyframes smooshyWave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-45deg) translateY(-6px); }
}

.act-squish { animation: smooshySquish 0.7s ease; }
@keyframes smooshySquish {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.18, 0.8); }
  60% { transform: scale(0.92, 1.1); }
}

.act-bounce { animation: smooshyBounce 0.8s ease; }
@keyframes smooshyBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  15% { transform: translateY(0) scale(1.1, 0.88); }
  45% { transform: translateY(-38%) scale(0.95, 1.06); }
  75% { transform: translateY(0) scale(1.08, 0.92); }
}

.act-blush { animation: smooshyShy 1.1s ease; }
@keyframes smooshyShy {
  0%, 100% { transform: rotate(0deg); }
  30%, 70% { transform: rotate(-8deg) scale(0.96); }
}

.act-wiggle { animation: smooshyWiggle 1.3s ease; }
@keyframes smooshyWiggle {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70% { transform: rotate(-12deg) scale(1.05, 0.95); }
  20%, 40%, 60%, 80% { transform: rotate(12deg) scale(0.95, 1.05); }
}

/* Clumsy: tips over sideways (toward the middle of the screen), lies there dizzy, then wobbles back up */
.act-topple { animation: smooshyTopple 2.2s ease; }
@keyframes smooshyTopple {
  0% { transform: rotate(0deg); }
  18% { transform: rotate(-78deg) translateY(4%); }
  24% { transform: rotate(-70deg) translateY(4%); }
  28%, 70% { transform: rotate(-76deg) translateY(4%); }
  85% { transform: rotate(10deg); }
  93% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.act-twirl { animation: smooshyTwirl 1s cubic-bezier(0.34, 1.3, 0.64, 1); }
@keyframes smooshyTwirl {
  0% { transform: rotate(0deg) scale(1); }
  40% { transform: translateY(-20%) rotate(200deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

.act-yawn { animation: smooshyYawn 1.4s ease; }
@keyframes smooshyYawn {
  0%, 100% { transform: scale(1); }
  40%, 60% { transform: scale(0.95, 1.08); }
}

.act-sneeze { animation: smooshySneeze 0.9s ease; }
@keyframes smooshySneeze {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-8deg) scale(0.96, 1.04); }
  50% { transform: rotate(10deg) translateX(-6%) scale(1.06, 0.94); }
}

.act-stumble { animation: smooshyStumble 0.9s ease; }
@keyframes smooshyStumble {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  30% { transform: rotate(-16deg) translateX(-8%); }
  55% { transform: rotate(8deg) translateX(-4%); }
  75% { transform: rotate(-3deg) translateX(-1%); }
}

/* --- With the Lottie puppet (js/fun-rig.js) she moves herself: no CSS moves on her drawing --- */
.smooshy.has-puppet .smooshy-inner {
  animation: none;
}

/* Her Lottie effects (js/fun-fx.js) stay put over the screen while she moves about */
.smooshy-fx {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* --- Things floating off her --- */
.smooshy-float {
  position: absolute;
  top: 18%;
  font-size: 26px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  animation: smooshyFloat 1.7s ease-out forwards;
}

.smooshy-float.is-zzz {
  left: 70% !important;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--lilac-ink);
}

.smooshy-float.is-dizzy {
  top: 30%;
  animation-name: smooshyDizzy;
}

@keyframes smooshyFloat {
  0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-50%, -110px) scale(1.15); opacity: 0; }
}

@keyframes smooshyDizzy {
  0% { transform: translate(-50%, 0) rotate(0deg) scale(0.6); opacity: 0; }
  20%, 80% { opacity: 1; }
  100% { transform: translate(-50%, -30px) rotate(360deg) scale(1); opacity: 0; }
}

/* --- "Tap me twice" hint while she peeks --- */
.smooshy-bubble {
  position: absolute;
  top: -6%;
  right: -10%;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.smooshy.show-hint .smooshy-bubble {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 640px) {
  /* Smaller bites and scratches: phones have less padding around the menu's content */
  .welcome-card.is-bitten {
    --b: 0.7;
    background-size: 0 0, 0 0, auto;   /* no room for scratches beside the title on phones */
  }

  .smooshy {
    width: 140px;
    height: 140px;
  }

  /* Once she's out, the menu card moves up so she doesn't sit on its links (it scrolls if it must) */
  /* Once she's out, the card sits just above her head (her top ~68% shows above the screen's edge) */
  .modal-overlay.has-smooshy {
    padding-bottom: max(calc(var(--floor-h) * 0.55 - 4px), 102px);
  }

  /* She stands over the footer's right side, so its text moves left to stay readable */
  .modal-overlay.has-smooshy .magic-floor .welcome-foot {
    padding-right: 128px;
    padding-left: 10px;
    align-items: flex-start;
    text-align: left;
  }

  .smooshy-bubble {
    top: -12%;
    right: -4%;
    font-size: 15px;
  }

  .smooshy-float {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-body,
  .m-tail,
  .smooshy.is-walking .smooshy-inner {
    animation: none;
  }
}