@import url('../shared/stage-screens/tokens.css');
@font-face { font-family: 'DM Sans'; src: url('../shared/stage-screens/dm-sans.woff') format('woff'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('../shared/stage-screens/courier-prime-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--lucy-cream); color: var(--lucy-charcoal); font: 400 16px/1.4 var(--lucy-reading); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.home { min-height: 100%; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); max-width: 1100px; margin: 0 auto; }

.bar { display: flex; align-items: center; gap: 10px; }
.bar h1 { margin: 0; font: 700 clamp(18px, 3.2vw, 26px)/1 var(--lucy-display); letter-spacing: .02em; }
.exit { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 2px solid var(--lucy-charcoal); border-radius: 999px; background: var(--lucy-cream); color: var(--lucy-charcoal); font: 700 14px/1 var(--lucy-display); text-decoration: none; }
.exit svg { width: 18px; height: 18px; }
.dev-toggle { margin-left: auto; }
.tag { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--lucy-butter); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.room { display: grid; grid-template-columns: 1fr auto; gap: 12px; min-height: 0; }
.scene { position: relative; min-height: 0; border: 3px solid var(--lucy-charcoal); border-radius: var(--lucy-radius-dialog); overflow: hidden;
  background: url('../shared/assets/landscape-v03-calm.webp') center bottom / cover no-repeat, var(--world-soft); }  /* the landscape's own meadow is the floor (owner, 17 October 2026: a flat floor hid the trees) */
.home[data-friend="butterfly"] .scene { background-image: url('assets/butterfly-garden.webp'); }  /* the owner's flower garden; care.js slides it to the branch */
.home[data-friend="mabel"] .scene { background-image: url('../farm-stage-6/assets/paddock-trail-background-v03.webp'); background-position: 30% bottom; }  /* the approved Paddock Trail with its mud puddles behind her (owner's pick, 21 October 2026) */
.friend { position: absolute; left: 50%; bottom: 8%; width: min(46%, 58vh); aspect-ratio: 1; transform: translateX(-50%); transform-origin: 50% 100%; }
.friend img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: scale(var(--grow, 1)); transform-origin: 50% 100%; cursor: pointer; }
.home[data-stage="1"] .friend img, .home[data-stage="1"] .friend .peck { --grow: .55; }
.home[data-stage="2"] .friend img, .home[data-stage="2"] .friend .peck { --grow: .7; }
.home[data-stage="3"] .friend img, .home[data-stage="3"] .friend .peck { --grow: .85; }
/* Friends with growth-stage pictures: the picture itself shows the size. */
.home[data-art="true"] .friend img, .home[data-art="true"] .friend .peck { --grow: 1; }

/* Reactions: the picture itself moves (translate/rotate/scale compose with the growth transform). */
.friend img { animation: breathe 3.4s ease-in-out infinite; }
.friend img[data-motion="feed"] { animation: none; }
.friend img[data-motion="pet"] { animation: cuddle 1.8s ease-in-out 1; }
.friend img[data-motion="wash"] { animation: shake .26s ease-in-out 5; }
.friend img[data-motion="bath"] { animation: sway 1.4s ease-in-out 2; }
@keyframes sway { 0%, 100% { rotate: 0deg; } 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
.friend img[data-motion="sleep"] { animation: snooze 4.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.01 1.025; } }
@keyframes cuddle { 0% { rotate: 0deg; scale: 1 1; } 25% { rotate: 5deg; scale: 1.04 .97; } 50% { rotate: -3deg; scale: 1.02 1.02; } 75% { rotate: 4deg; scale: 1.04 .98; } 100% { rotate: 0deg; scale: 1 1; } }
@keyframes shake { 0%, 100% { rotate: 0deg; translate: 0 0; } 25% { rotate: -5deg; translate: -2% 0; } 75% { rotate: 5deg; translate: 2% 0; } }
@keyframes snooze { 0%, 100% { scale: 1 1; } 50% { scale: 1.02 .965; } }
.fx { position: absolute; inset: 0; pointer-events: none; }
.friend .fx .carrot, .friend .fx .mouth { position: absolute; transform: none; animation: none; cursor: default; image-rendering: pixelated; }
.friend { translate: var(--walk, 0px) 0; }
/* Approved Stage 5 hop sheet (4 x 2 frames, facing left); one cell scale so Poppy keeps her size (eye matched to the sitting picture). */
.hopper { position: absolute; left: -2.4%; bottom: -4.5%; width: 101.2%; aspect-ratio: 1; background-size: 400% 200%; background-repeat: no-repeat; pointer-events: none; }
.hopper.right { scale: -1 1; }
.strider { position: absolute; background-size: 600% 500%; background-repeat: no-repeat; pointer-events: none; }
.strider.left { scale: -1 1; }
.hopper[data-frame="0"] { background-position: 0 0; }
.hopper[data-frame="1"] { background-position: 33.333% 0; }
.hopper[data-frame="2"] { background-position: 66.667% 0; }
.friend .fx .happy { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; animation: cuddle 1.8s ease-in-out 1; cursor: default; }
.friend .fx .carrot { height: auto; rotate: -35deg; transition: left .16s ease-out, top .16s ease-out, opacity .3s; }
.friend .fx .carrot.gone { opacity: 0; }
.friend .fx .carrot.level { rotate: none; }
.friend .fx .foam { position: absolute; left: 0; top: 0; width: 100%; height: 112.5%; transform: none; cursor: default; image-rendering: pixelated; animation: foam-in 2.8s ease-out forwards; }
.friend .fx .foam.head { transform-origin: 50% 88.9%; animation: foam-in 2.8s ease-out forwards, sway 1.4s ease-in-out 2; }  /* origin at her feet, like her picture */
/* Bubble wash: each bubble pops in at its own moment (--in), stays, then bursts (--out). */
.friend .fx .bub { position: absolute; height: auto; transform: none; cursor: default; image-rendering: pixelated; scale: 0; animation: bub-in .22s ease-out var(--in) forwards, bub-out .16s ease-in var(--out) forwards; }
@keyframes bub-in { 0% { scale: .2; } 70% { scale: 1.12; } 100% { scale: 1; } }
@keyframes bub-out { 0% { scale: 1; opacity: 1; } 100% { scale: 1.35; opacity: 0; } }
.friend .fx .head-bubbles { position: absolute; inset: 0; transform-origin: 50% 100%; animation: sway 1.4s ease-in-out 2; }
.fx svg.sparkle { position: absolute; aspect-ratio: 1; shape-rendering: crispEdges; scale: 0; filter: drop-shadow(1px 0 0 var(--lucy-charcoal)) drop-shadow(-1px 0 0 var(--lucy-charcoal)) drop-shadow(0 1px 0 var(--lucy-charcoal)) drop-shadow(0 -1px 0 var(--lucy-charcoal)); animation: twinkle .7s ease-in-out forwards; }
@keyframes twinkle { 0% { scale: 0; rotate: 0deg; } 45% { scale: 1.2; rotate: 45deg; } 100% { scale: 0; rotate: 90deg; } }
@keyframes foam-in { 0% { opacity: 0; translate: 0 6%; } 12% { opacity: 1; translate: 0 0; } 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 4%; } }
.friend .fx .soap { position: absolute; height: auto; transform: none; cursor: default; image-rendering: pixelated; opacity: 0; animation: soap 1.5s ease-out forwards; }
@keyframes soap { 0% { opacity: 0; scale: .4; translate: 0 0; } 20% { opacity: 1; scale: 1; } 60% { translate: 8% -110%; } 80% { opacity: 1; } 100% { opacity: 0; scale: 1.05; translate: -6% -210%; } }
.friend img.pecking { visibility: hidden; }
.friend .fx .peck { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(var(--grow, 1)); transform-origin: 50% 100%; }
.fx .crumb { position: absolute; width: 1.2%; aspect-ratio: 1; background: #F08A24; animation: crumb .7s ease-in forwards; animation-delay: calc(var(--i) * .05s); }
@keyframes crumb { to { translate: calc((var(--i) - 1) * 120%) 900%; opacity: 0; } }
.fx svg { position: absolute; width: 18%; aspect-ratio: 1; }
.fx-feed { left: 14%; bottom: 6%; width: 22% !important; animation: bites 1.7s steps(4, end) forwards; transform-origin: 50% 100%; }
.fx-pet { left: calc(30% + var(--i) * 12%); top: 30%; opacity: 0; animation: rise 1.6s ease-out forwards; animation-delay: calc(var(--i) * .25s); }
.fx-wash { left: calc(12% + var(--i) * 20%); bottom: calc(15% + (var(--i) * 17%) - (var(--i) * var(--i) * 4%)); opacity: 0; animation: bubble 1.3s ease-out forwards; animation-delay: calc(var(--i) * .15s); }
@keyframes bites { 0% { scale: 1; opacity: 1; } 100% { scale: .15; opacity: 0; } }
@keyframes rise { 0% { opacity: 0; translate: 0 20%; scale: .6; } 25% { opacity: 1; } 100% { opacity: 0; translate: 0 -160%; scale: 1; } }
@keyframes bubble { 0% { opacity: 0; scale: .4; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.2; translate: 0 -60%; } }

/* The need bubble sits in a fixed top corner of the room, never on the friend (owner, 16 October 2026); its small tail points into the room. */
.bubble { position: absolute; left: 12px; top: 12px; z-index: 2; width: clamp(56px, 10vw, 88px); height: clamp(56px, 10vw, 88px); padding: 10px; border: 3px solid var(--lucy-charcoal); border-radius: 50% 50% 8px 50%; background: var(--lucy-cream); }
.bubble svg { width: 100%; height: 100%; display: block; }

.pop { position: absolute; left: 50%; top: 10%; translate: -50% 0; font: 700 clamp(28px, 5vw, 44px)/1 var(--lucy-display); color: var(--lucy-pink); opacity: 0; pointer-events: none; text-shadow: 0 2px 0 var(--lucy-cream); }
.pop.show { animation: pop 1.1s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }

.night { position: absolute; inset: 0; background: rgba(30, 36, 60, .62); pointer-events: none; }
.zzz { position: absolute; top: 14%; left: 56%; width: 0; height: 0; font: 700 clamp(22px, 4vw, 36px)/1 var(--lucy-display); color: var(--lucy-cream); }
/* Sleep: each z rises from above the friend's head, drifts and fades, one after another. */
.zzz b { position: absolute; left: 0; bottom: 0; opacity: 0; animation: zrise 3s ease-out infinite; }
.zzz b:nth-child(2) { animation-delay: 1s; font-size: 1.25em; }
.zzz b:nth-child(3) { animation-delay: 2s; font-size: 1.5em; }
@keyframes zrise { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; translate: 1.6em -2.6em; } }

.actions { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: center; }
.actions button, .friends button, .dev button { cursor: pointer; }
.actions button { display: grid; justify-items: center; gap: 4px; width: clamp(84px, 11vw, 112px); padding: 10px 6px 8px; border: 3px solid var(--lucy-charcoal); border-radius: var(--lucy-radius-dialog); background: var(--lucy-cream); font-weight: 700; font-size: 15px; transition: transform var(--lucy-feedback-duration); }
.actions button svg { width: 48px; height: 48px; }
.actions button.wanted { background: var(--lucy-butter); }
.actions button:disabled { opacity: .45; cursor: default; }

.friends { display: flex; gap: 10px; overflow-x: auto; padding: 2px 5px 6px 2px; }
.friends button { flex: none; display: grid; grid-template-columns: 48px auto; align-items: center; gap: 8px; min-height: 60px; padding: 4px 14px 4px 6px; border: 2px solid var(--lucy-charcoal); border-radius: 999px; background: var(--lucy-cream); font-weight: 700; }
.friends button[aria-pressed="true"] { background: var(--lucy-leaf); }
.friends img { width: 48px; height: 48px; object-fit: contain; }
.friends button.locked { border-style: dashed; color: #6b6760; font-weight: 400; cursor: default; }
.friends button.locked img { filter: brightness(0) opacity(.25); }
.friends small { display: block; font-size: 12px; }
/* Under the row while a friend is still locked: friends also arrive through care, not only in the Quest (owner, 22 October 2026). */
.friends-row { min-width: 0; }
.friends-note { margin: 2px 4px 0; font-size: 12px; color: #6b6760; }

.dev { position: fixed; z-index: 4; top: calc(max(10px, env(safe-area-inset-top)) + 54px); left: max(12px, env(safe-area-inset-left)); width: min(420px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 2px dashed var(--lucy-charcoal); border-radius: var(--lucy-radius-card); background: var(--lucy-cream); font-size: 13px; }
.dev-toggle { min-height: 36px; padding: 0 12px; border: 2px dashed var(--lucy-charcoal); border-radius: var(--lucy-radius-control); background: var(--lucy-cream); font-size: 13px; font-weight: 700; cursor: pointer; }
.dev-toggle[aria-expanded="true"] { background: var(--lucy-butter); }
.dev button { min-height: 36px; padding: 0 12px; border: 2px solid var(--lucy-charcoal); border-radius: var(--lucy-radius-control); background: var(--lucy-cream); }

.pick { position: fixed; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: clamp(12px, 3vh, 24px); padding: 16px; background: var(--lucy-cream); }
.pick h2 { margin: 0; text-align: center; font: 700 clamp(20px, 4vw, 32px)/1.15 var(--lucy-display); }
.pick-list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2vw, 20px); }
.pick-list button { display: grid; justify-items: center; gap: 6px; width: clamp(104px, 22vw, 200px); padding: 10px 8px 12px; border: 3px solid var(--lucy-charcoal); border-radius: var(--lucy-radius-dialog); background: var(--world-soft); font-weight: 700; font-size: clamp(15px, 2vw, 19px); cursor: pointer; }
/* The website's hard offset shadow on every button and link button (owner, 17 October 2026; world map .btn):
   3 px charcoal shadow, pressed in by 2 px; disabled and locked buttons lie flat. */
.exit, .actions button, .friends button, .dev button, .pick-list button, .surprise, .keep { box-shadow: 3px 3px 0 var(--lucy-charcoal); transition: transform var(--lucy-feedback-duration, 150ms), box-shadow var(--lucy-feedback-duration, 150ms); }
:is(.exit, .actions button, .friends button, .dev button, .pick-list button, .surprise, .keep):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--lucy-charcoal); }
.actions button:disabled, .friends button.locked { box-shadow: none; transform: none; }
.pick-list img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.surprise { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px 0 14px; border: 3px solid var(--lucy-charcoal); border-radius: 999px; background: var(--lucy-butter); font-weight: 700; font-size: 17px; cursor: pointer; }
.surprise svg { width: 34px; height: 34px; }
.pick-main { display: grid; justify-items: center; gap: clamp(12px, 3vh, 24px); }
.draw { display: grid; justify-items: center; gap: 10px; }
.draw img { width: clamp(140px, 30vmin, 260px); aspect-ratio: 1; object-fit: contain; padding: 10px; border: 3px solid var(--lucy-charcoal); border-radius: var(--lucy-radius-dialog); background: var(--world-soft); }
.draw strong { font: 700 clamp(20px, 3.5vw, 28px)/1 var(--lucy-display); }
.draw-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.keep { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px 0 14px; border: 3px solid var(--lucy-charcoal); border-radius: 999px; background: var(--lucy-leaf); font-weight: 700; font-size: 17px; cursor: pointer; }
.keep svg { width: 30px; height: 30px; }
.surprise .left { letter-spacing: 2px; font-size: 12px; }
@media (max-height: 460px) { .draw img { width: 34vh; } .pick { gap: 8px; } }
@media (max-height: 460px) { .pick-list button { width: clamp(96px, 20vw, 150px); } .pick-list img { max-height: 34vh; } }

:focus-visible { outline: 3px solid var(--lucy-charcoal); outline-offset: 3px; box-shadow: 0 0 0 6px var(--lucy-cream); }

/* Portrait phones: actions move under the room as one row. */
@media (max-aspect-ratio: 1/1) {
  .room { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .actions { grid-template-columns: repeat(4, 1fr); }
  .actions button { width: auto; }
  .friend { width: min(64%, 40vh); }  /* room for her to move on a phone (owner, 17 October 2026) */
}
/* Short landscape phones */
@media (max-height: 460px) and (min-aspect-ratio: 1/1) {
  .home { gap: 6px; }
  .actions { grid-template-columns: 1fr 1fr; gap: 6px; }
  .actions button { width: 76px; padding: 6px 4px; font-size: 13px; }
  .actions button svg { width: 34px; height: 34px; }
  .friends button { min-height: 48px; }
  .friends img { width: 38px; height: 38px; }
  .friends button { grid-template-columns: 38px auto; }
  .exit { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .zzz b { animation: none; opacity: 1; position: static; display: inline-block; margin-left: .15em; }
  .pop.show { animation: none; opacity: 1; }
  .friend img, .friend img[data-motion] { animation: none; }
  .fx svg { animation-duration: .01s; }
  .fx .crumb { display: none; }
  .friend .fx .happy { animation: none; }
  .friend .fx .drink, .friend .fx .leaf.nudge { animation: none; }
  .friend .fx .foam, .friend .fx .foam.head, .friend .fx .head-bubbles { animation: none; }
  .friend .fx .bub { animation-duration: .01s; }
  .friend .fx .carrot { transition: none; }
}
/* The chrysalis hangs from its twig, so it breathes and sways from the twig, not from the floor. */
.home[data-friend="butterfly"][data-stage="2"] .friend img, .home[data-friend="butterfly"][data-stage="2"] .friend .fx .head-bubbles { transform-origin: 51% 27%; }
/* Chrysalis dewdrop: falls from the branch onto her shoulder, then three tiny drops splash out. */
.friend .fx svg.dew { position: absolute; aspect-ratio: 5 / 6; height: auto; }
.friend .fx svg.splash { position: absolute; aspect-ratio: 1; height: auto; animation: splash .5s ease-out forwards; }
@keyframes splash { 0% { translate: 0 0; opacity: 1; } 100% { translate: calc(var(--dx) * 260%) calc(-160% + var(--i) * 0%); opacity: 0; } }
/* Caterpillar's leaf: mirrored so the bitten edge faces her mouth; it nudges in at each bite, then fades. */
.friend .fx .leaf { position: absolute; height: auto; transform: none; animation: none; cursor: default; scale: -1 1; image-rendering: pixelated; transition: opacity .4s; }
.friend .fx .leaf.nudge { animation: nudge .3s ease-out; }
.friend .fx .leaf.gone { opacity: 0; }
@keyframes nudge { 0% { translate: 0 0; } 40% { translate: -6% 0; } 100% { translate: 0 0; } }
.fx .crumb.leafy { background: #7DC21E; }
.fx .crumb.apple-bit { background: #F6EAC4; }
/* Butterfly drinking: her drinking picture takes her place and dips gently three times from the flower's stem. */
.friend .fx .drink { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: none; cursor: default; transform-origin: 50% 100%; animation: sip .7s ease-in-out 3; }
@keyframes sip { 0%, 100% { scale: 1 1; } 50% { scale: 1.01 .985; } }

/* Inside the website frame (owner request, 21 October 2026): the site header and band carry the way out and the title. */
.lucy-embed .bar .exit, .lucy-embed .bar h1 { display: none; }
.lucy-embed .bar:not(:has(.dev-toggle:not([hidden]))) { display: none; }
.lucy-embed .home { grid-template-rows: 1fr auto; }
.lucy-embed .home:has(.dev-toggle:not([hidden])) { grid-template-rows: auto 1fr auto; }

/* Friends book (owner, 22 October 2026): every friend by world, up to 3 at home at once. */
.friends .book-btn { position: relative; grid-template-columns: 40px auto; background: var(--world-soft, #F4E9D2); }
.friends .book-btn svg { width: 40px; height: 40px; }
.friends .book-btn .dot { position: absolute; top: 2px; right: 6px; width: 12px; height: 12px; border: 2px solid var(--lucy-charcoal); border-radius: 50%; background: #ED8796; }
.pick.book { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; padding-block: max(16px, env(safe-area-inset-top)) 24px; }
.book-count { margin: -6px 0 0; color: #6b6760; font-weight: 700; }
.book-list { display: flex; flex-direction: column; gap: 8px; width: min(720px, 100%); }
.book-list h3 { margin: 6px 0 0; font: 700 18px/1.2 var(--lucy-display); }
.book-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.book-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: clamp(132px, 30vw, 168px); padding: 8px 8px 10px; border: 3px solid var(--lucy-charcoal); border-radius: var(--lucy-radius-dialog); background: var(--lucy-cream); text-align: center; }
.book-card.at-home { background: var(--lucy-leaf); }
.book-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.book-card small { font-size: 13px; color: #4f4b45; }
.book-card.locked { border-style: dashed; color: #6b6760; }
.book-card.locked img { filter: brightness(0) opacity(.25); }
.book-card button { min-height: 44px; padding: 6px 14px; border: 2px solid var(--lucy-charcoal); border-radius: 999px; background: var(--lucy-cream); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 3px 3px 0 var(--lucy-charcoal); }
.book-card button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--lucy-charcoal); }
.book-card button:disabled { box-shadow: none; transform: none; color: #6b6760; border-style: dashed; cursor: default; }