/* mew.me: one pond, a few stickers. Dusk is the only theme. */

:root {
  color-scheme: dark;
  --ink: #2b2240;
  --paper: #fbf3e4;
  --amber: #ffc46b;
  --amber-warm: #ffa53f;
  --dusk: #1d1838;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html,
body {
  margin: 0;
  background: var(--dusk);
  overflow-x: hidden;
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--paper);
}

main {
  display: block;
}

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

/* ---------- Wordmark: a little peel-off label ---------- */

.wordmark {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  margin: 0;
  padding: 0.2em 0.7em 0.28em;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgb(18 12 38 / 0.35), 0 8px 18px rgb(18 12 38 / 0.45);
  transform: rotate(-3deg);
}

/* ---------- Quiet footer: nearly invisible, still reachable ---------- */

.quiet-links {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 4px;
}

.quiet-links a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--paper);
  border-radius: 50%;
  opacity: 0.32;
  transition: opacity 0.2s ease;
}

.quiet-links a:hover,
.quiet-links a:focus-visible {
  opacity: 1;
}

.quiet-links a:focus-visible,
a.wordmark:focus-visible,
.note a:focus-visible {
  outline: 4px solid var(--paper);
  outline-offset: 3px;
}

.quiet-links svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---------- The scene ---------- */

.scene {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Only hit areas take pointers, so glows and ripples never steal a tap. */
.scene * {
  pointer-events: none;
}

.scene .hit {
  fill: transparent;
  pointer-events: all;
}

.scene [role="button"] {
  cursor: pointer;
  outline: none;
}

/* Focus ring styled as a sticker outline */
.focus-ring {
  fill: none;
  stroke: var(--paper);
  stroke-width: 5;
  opacity: 0;
}

.scene [role="button"]:focus-visible .focus-ring {
  opacity: 1;
}

/* ---------- Palette ---------- */

.star { fill: #fff3d1; }
.moon { fill: #f3ead0; }
.crater { fill: #e3d6b0; }
.ridge { fill: #3a3062; }
.moon-glow { fill: #d9d2ff; opacity: 0.22; }
.reflection { fill: #1c1a45; opacity: 0.45; }
.lily { fill: #5d8f72; }
.lily-notch { stroke: #3f6b55; stroke-width: 2; stroke-linecap: round; fill: none; }
.straw { stroke: #e2c482; stroke-width: 3; stroke-linecap: round; fill: none; opacity: 0.55; }
.wisp path { stroke: #f0d48c; stroke-width: 3; stroke-linecap: round; fill: none; }
.glint { stroke: #d7dcff; stroke-width: 3; stroke-linecap: round; fill: none; opacity: 0.25; }

.bark { fill: #6b4a3a; }
.leaf { fill: #2f5566; }
.leaf--light { fill: #3d6b72; }
.wood { fill: #8a5a3c; }
.wall { fill: #d8b896; }
.roof { fill: #a95c74; }
.door { fill: #7a4b33; }
.door-wood { fill: #8f5a3a; }
.den { fill: #ffcf7a; }
.frame { fill: #5e3f2c; }
.knob { fill: #f2c46b; }
.mound { fill: #8d7a4f; }
.tuft { stroke: #6f8a4e; stroke-width: 4; stroke-linecap: round; fill: none; }
.chimney { fill: #7c5a4a; }
.mullion { stroke: #d8b896; stroke-width: 3; fill: none; }
.rope { stroke: #d9c08a; stroke-width: 3; stroke-linecap: round; fill: none; }
.hammock { fill: #e3a0b6; }
.hammock-stripe { stroke: #f6d9a6; stroke-width: 4; stroke-linecap: round; fill: none; }
.hull { fill: #a45f45; }
.trim { stroke: #f1e2c4; stroke-width: 4; stroke-linecap: round; fill: none; }
.sail { fill: #efe2c8; }
.mast { stroke: #6b4a3a; stroke-width: 5; stroke-linecap: round; fill: none; }
.lantern-cap { fill: #5b4033; }
.log { fill: #7a4b33; }
.stone { fill: #8c86a0; }
.flame--outer { fill: #ff9a3c; }
.flame--inner { fill: #ffe08a; }

/* Critters: species-neutral, four flat colours each */
.fur-mochi   { --fur: #f4b393; --accent: #fde3d3; }
.fur-pip     { --fur: #9fd8c0; --accent: #dff3ea; }
.fur-juno    { --fur: #c3b1ef; --accent: #ece5ff; }
.fur-bramble { --fur: #f0a6bf; --accent: #fde0ea; }
.fur-nova    { --fur: #9cc8f0; --accent: #e1effc; }

.fur { fill: var(--fur); }
.accent { fill: var(--accent); }
.eye { fill: var(--ink); }
.cheek { fill: #f58fa8; opacity: 0.8; }
.antenna { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.antenna-tip { fill: #9ff0d0; }

/* ---------- Homes: lit window = someone is home ---------- */

.light {
  fill: var(--amber);
  transition: fill 0.8s ease;
}

.halo {
  opacity: 0.45;
  transition: opacity 0.8s ease;
}

.is-warm .light {
  fill: var(--amber-warm);
}

.is-warm .halo {
  opacity: 1;
}

.door,
.peeker {
  transform-box: fill-box;
}

.door {
  transform-origin: 0 50%;
  transition: transform 0.45s ease;
}

.is-open .door {
  transform: scaleX(0.1);
}

.peeker {
  transform: translateY(50px);
  transition: transform 0.4s ease 0.15s;
}

.is-open .peeker {
  transform: translateY(0);
}

/* ---------- Critter states ---------- */

.bob,
.ear,
.eye {
  transform-box: fill-box;
}

.bob {
  transform-origin: 50% 100%;
}

.ear {
  transform-origin: 50% 100%;
  transition: transform 0.25s ease;
}

.eye {
  transform-origin: 50% 50%;
  transition: transform 0.08s ease;
}

.select-ring {
  fill: none;
  stroke: var(--amber);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
  opacity: 0;
}

.is-selected .select-ring {
  opacity: 1;
}

.is-selected .bob,
.is-hopping .bob {
  animation: bounce 0.7s ease;
}

.is-blinking .eye {
  transform: scaleY(0.15);
}

.is-twitching .ear--right {
  animation: twitch 0.45s ease;
}

.is-perked .ear--left {
  transform: rotate(-10deg) translateY(-5px);
}

.is-perked .ear--right {
  transform: rotate(10deg) translateY(-5px);
}

/* ---------- Campfire ---------- */

.fire-glow {
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

.flames,
.flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.flames {
  transition: transform 0.25s ease;
}

.flame {
  animation: flicker 1.6s ease-in-out infinite alternate;
}

.flame--inner {
  animation-duration: 1.1s;
}

.is-flaring .flames {
  transform: scale(1.4);
}

.is-flaring .fire-glow {
  opacity: 1;
}

/* ---------- Nudge hints, ripples, paws, hay ---------- */

.nudge.is-hidden {
  display: none;
}

.paw-hint {
  fill: var(--amber);
  opacity: 0.4;
  animation: breathe 3.6s ease-in-out infinite;
}

.ripple {
  transform-box: view-box;
  transform-origin: 0 0;
}

.ripple-ring {
  fill: none;
  stroke: #dfe4ff;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

.bond-shimmer ellipse {
  fill: none;
  stroke: #ffe2a8;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bond 1.8s ease-in-out infinite;
}

.bond-shimmer ellipse:nth-child(2) { animation-delay: 0.3s; }
.bond-shimmer ellipse:nth-child(3) { animation-delay: 0.6s; }

.bond-shimmer {
  transition: opacity 0.9s ease;
}

.bond-shimmer.is-fading {
  opacity: 0;
}

.water-paw {
  fill: #f6a9c0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pop 0.5s ease;
}

.hay-piece path {
  stroke: #f2d48b;
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
}

.hay-piece {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* ---------- Idle life ---------- */

.boat {
  animation: float 6s ease-in-out infinite;
}

.glint {
  animation: glint 6s ease-in-out infinite;
}

.glint:nth-child(2) { animation-delay: -1s; }
.glint:nth-child(3) { animation-delay: -2.2s; }
.glint:nth-child(4) { animation-delay: -3.1s; }
.glint:nth-child(5) { animation-delay: -4s; }
.glint:nth-child(6) { animation-delay: -4.8s; }
.glint:nth-child(7) { animation-delay: -5.5s; }

.star:nth-child(3n) {
  animation: twinkle 4s ease-in-out infinite;
}

.star:nth-child(3n + 1) {
  animation: twinkle 5.5s ease-in-out -2s infinite;
}

.wisp {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: drift 48s linear 4s infinite;
  opacity: 0;
}

.antenna-tip {
  animation: beacon 3s ease-in-out infinite;
}

@keyframes bounce {
  0% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(-14px) scale(0.96, 1.05); }
  50% { transform: translateY(0) scale(1.05, 0.95); }
  70% { transform: translateY(-5px) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes twitch {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(12deg); }
  60% { transform: rotate(-6deg); }
}

@keyframes flicker {
  0% { transform: scale(1, 1) skewX(0deg); }
  50% { transform: scale(0.94, 1.08) skewX(2deg); }
  100% { transform: scale(1.04, 0.95) skewX(-2deg); }
}

@keyframes glint {
  0%, 100% { opacity: 0.08; transform: translateX(0); }
  50% { opacity: 0.5; transform: translateX(8px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.3; }
}

@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  4% { opacity: 0.9; }
  56% { opacity: 0.9; }
  60% { transform: translate(960px, 130px) rotate(540deg); opacity: 0; }
  100% { transform: translate(960px, 130px) rotate(540deg); opacity: 0; }
}

@keyframes breathe {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

@keyframes bond {
  0%, 100% { transform: scale(0.9); opacity: 0.25; }
  50% { transform: scale(1.1); opacity: 0.9; }
}

@keyframes pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes beacon {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Everything still works, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .paw-hint {
    opacity: 0.45;
  }
}

/* ---------- /security: the one page with words ---------- */

.note-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px;
  background: linear-gradient(180deg, #14112b 0%, #2b2453 55%, #53406f 100%);
}

.note-page .wordmark {
  position: static;
  display: inline-block;
}

.note {
  max-width: 34rem;
  margin: 2.5rem auto 2rem;
  padding: 1.5rem 1.5rem 1.25rem;
  color: var(--ink);
  line-height: 1.55;
  background: var(--paper);
  border-radius: 1.5rem;
  box-shadow: 0 0 0 6px #e9dcc4, 0 10px 0 rgb(18 12 38 / 0.35), 0 18px 36px rgb(18 12 38 / 0.5);
  transform: rotate(-0.6deg);
}

.note h1 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.note h2 {
  margin: 1.5rem 0 0.25rem;
  font-size: 1.05rem;
}

.note p {
  margin: 0 0 0.85rem;
}

.note a {
  color: #6a3f9a;
  font-weight: 700;
}

.note-small {
  font-size: 0.9rem;
  opacity: 0.8;
}

.shelf {
  display: block;
  width: 100%;
  height: auto;
  max-width: 22rem;
}

.shelf-plank { fill: #8a5a3c; }
.shelf-bracket { fill: #6b4a3a; }