@font-face { font-family: 'Bagel'; src: url('./assets/fonts/BagelFatOne-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('./assets/fonts/Nunito-Variable.ttf') format('truetype'); font-weight: 200 1000; font-display: swap; }
:root {
  color-scheme: light;
  --ink: #624d75; --plum: #67405d; --cream: #fff8e9; --blush: #fde3e1; --rose: #f5acb9; --rose-deep: #a66c87;
  font-family: 'Nunito', ui-rounded, system-ui, sans-serif; color: var(--ink); background: var(--blush);
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: var(--blush); }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #805899; outline-offset: 3px; }
[hidden] { display: none !important; }
.world { width: 100%; height: 100svh; height: 100dvh; min-height: 480px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: clip; background: var(--blush); transition: background .6s; }
.world[data-period="night"], .world[data-period="latenight"] { background: #e9dcef; }

/* ---------- Intestazione ---------- */
.world-header { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: max(14px, env(safe-area-inset-top)) 56px 10px; text-align: center; }
h1 { margin: 0; font: 400 36px/1.1 'Bagel', 'Nunito', ui-rounded, sans-serif; color: var(--plum); letter-spacing: .01em; animation: title-in .7s cubic-bezier(.34,1.56,.64,1) both; }
h1.long { font-size: 27px; max-width: 13ch; }
.subtitle { margin: 0; font-size: 13px; font-weight: 800; color: #8e6f8a; }
.countdown { min-height: 32px; padding: 4px 14px; border: 1.5px solid #e7a9ba; border-radius: 999px; background: linear-gradient(#fff6f8, #ffe3ea); box-shadow: 0 2px 0 #eab3c1; color: #9b4f72; font-size: 13px; font-weight: 900; animation: countdown-glow 2.8s ease-in-out infinite; }
.countdown:active { transform: translateY(1px); box-shadow: 0 1px 0 #eab3c1; }
.sound-toggle { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid #e2bfc6; border-radius: 50%; background: var(--cream); }
.sound-toggle svg { width: 20px; height: 20px; fill: #b07a96; stroke: #b07a96; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .off, .sound-toggle[aria-pressed="false"] .on { display: none; }
.sound-toggle[aria-pressed="false"] .off { display: block; }

/* ---------- Stanza ---------- */
.playground { position: relative; min-height: 0; }
.scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--blush); overflow: hidden; }
.room { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter .6s; }
.window { position: absolute; top: 9%; left: 4%; width: min(26%, 150px); height: auto; }
.sky { fill: url(#sky-day); }
.sky-stars { display: none; }
.cloud { animation: cloud-drift 14s ease-in-out infinite alternate; }
.cloud.c2 { animation-duration: 18s; animation-delay: -6s; }
.scene[data-period="dinner"] .sky { fill: url(#sky-dusk); }
.scene[data-period="dinner"] .sky-sun { transform: translateY(46px); }
.scene[data-period="night"] .sky, .scene[data-period="latenight"] .sky { fill: url(#sky-night); }
.scene[data-period="night"] .sky-sun, .scene[data-period="night"] .sky-clouds, .scene[data-period="latenight"] .sky-sun, .scene[data-period="latenight"] .sky-clouds { display: none; }
.scene[data-period="night"] .sky-stars, .scene[data-period="latenight"] .sky-stars { display: block; }
.tw { animation: twinkle 2.4s ease-in-out infinite; }
.tw:nth-child(2n) { animation-delay: -1.2s; }
.tw:nth-child(3n) { animation-delay: -.6s; }
.scene[data-period="night"] .room, .scene[data-period="latenight"] .room { filter: saturate(.7) brightness(.93) hue-rotate(10deg); }
.garland { position: absolute; top: 2%; left: 32%; width: 44%; height: auto; }
.bulbs circle { animation: bulb 2.2s ease-in-out infinite; }
.bulbs circle:nth-child(2n) { animation-delay: -1.1s; }
.bulbs circle:nth-child(3n) { animation-delay: -.5s; }
.scene[data-period="night"] .bulbs circle, .scene[data-period="dinner"] .bulbs circle, .scene[data-period="latenight"] .bulbs circle { filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 5px #fff3b0); }
.frame { position: absolute; top: 15%; right: 5%; width: min(20%, 110px); height: auto; transform: rotate(3deg); }
.plant { position: absolute; right: 3%; bottom: calc(5% + 18px); width: min(15%, 80px); height: auto; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite; }
.character { position: absolute; top: 0; left: max(0px, calc(50% - 280px)); width: min(100%, 560px); height: 94%; object-fit: contain; object-position: center 75%; pointer-events: none; user-select: none; transform-origin: 50% 90%; filter: drop-shadow(2px 0 #fff8e9) drop-shadow(-2px 0 #fff8e9) drop-shadow(0 2px #fff8e9); animation: breathe 4s ease-in-out infinite; }
.scene[data-weekday="0"][data-mood="good"] .character { animation: sleepy 4.5s ease-in-out infinite; }
.scene[data-weekday="5"][data-mood="good"] .character { animation: dance 1.2s ease-in-out infinite; }
.scene[data-mood="tired"] .character { animation: sleepy 5s ease-in-out infinite; }
.scene[data-mood="angry"] .character { animation: grumpy 2.6s ease-in-out infinite; }
.sleep-note { display: none; position: absolute; right: 22%; bottom: 13%; padding: 4px 8px; border: 1.5px solid #b78e9c; border-radius: 7px; background: #fff3c7; font-size: 10px; font-weight: 800; transform: rotate(-7deg); }
.scene[data-weekday="0"][data-mood="good"]:not(.kissing) .sleep-note { display: block; }
.scene-fallback { position: absolute; inset: 0; display: grid; place-content: center; font-size: 14px; background: var(--cream); line-height: 1.5; }

/* ---------- Fumetto ---------- */
.note { position: absolute; z-index: 6; bottom: 32px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(84%, 340px); margin: 0; padding: 11px 18px; border: 2px solid #e7a9ba; border-radius: 22px 22px 22px 6px; background: #fff; box-shadow: 0 4px 0 #f3c9d3, 0 10px 24px -10px #b0708d66; color: var(--plum); font-size: 14px; font-weight: 800; line-height: 1.35; text-align: center; pointer-events: none; }
.note.pop { animation: note-pop .45s cubic-bezier(.34,1.56,.64,1) both; }

/* ---------- Controlli ---------- */
.controls { position: relative; z-index: 4; margin-top: -18px; padding: 16px 14px max(12px, env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(#fff6dc, #ffefc4); border-radius: 26px 26px 0 0; box-shadow: 0 -6px 18px -8px #c9918f66; }
.kiss { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; min-width: 196px; padding: 10px 26px; border: 2px solid var(--rose-deep); border-radius: 22px; background: linear-gradient(#f9bdc8, #f2a1b1); box-shadow: 0 4px #b57597; color: #713d5f; font-size: 17px; font-weight: 900; transition: transform 120ms, box-shadow 120ms; }
.kiss::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, #ffffff88, transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; }
.kiss svg { width: 22px; height: 22px; fill: #fff1e6; stroke: var(--rose-deep); stroke-width: 1.5; animation: heartbeat 1.6s ease-in-out infinite; }
.kiss:active { transform: translateY(3px) scale(.98); box-shadow: 0 1px #b57597; }
.support { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: 13px auto 0; }
.support button { min-height: 44px; padding: 8px 14px; border: 1.5px solid #e2c3cc; border-radius: 16px; background: #fffaf0; color: #7b617b; font-size: 13px; font-weight: 800; transition: transform 120ms, background 200ms; }
.support button:active { transform: scale(.95); }
.support button[aria-pressed="true"] { border-color: #a786b8; background: #eadcf2; }
.support #reset-mood { border-color: #a9d2b5; background: #e3f4e6; }
.meal { margin: 6px auto 0; width: min(100%, 480px); }
.meal-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 10px; }
.meal-line p { margin: 0 4px 0 0; font-size: 13px; font-weight: 800; }
.meal button { min-height: 44px; padding: 7px 14px; border: 1.5px solid #e2cfa8; border-radius: 14px; background: #fffaf0; font-size: 12px; font-weight: 800; }
.meal button[aria-pressed="true"] { border-color: #9fbf86; background: #e6f1d6; }
.meal-response { margin: 5px 0 0; font-size: 12px; line-height: 1.3; color: #806878; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Bacino ---------- */
.scene.kissing .character { animation: kiss-pose 1.8s cubic-bezier(.22,1,.36,1) both; }
.scene.cheering .character { animation: cheer-pose 1s ease-in-out; }
.kiss-flight { position: absolute; z-index: 2; width: 32px; height: 32px; margin: -16px 0 0 -16px; opacity: 0; pointer-events: none; }
.kiss-flight svg { width: 100%; height: 100%; fill: #ef94a7; stroke: #b7738c; stroke-width: 1.1; }
.scene.kissing .kiss-flight { animation: kiss-flight 1.8s cubic-bezier(.2,.7,.3,1) both; }

/* ---------- Stelline e gattino ---------- */
.star-game { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.star-progress { position: absolute; top: 10px; right: 12px; display: flex; gap: 3px; padding: 2px 10px; border: 1.5px solid #ecc6b6; border-radius: 16px; background: #fffaf0; color: #c9b1b6; font-size: 21px; line-height: 1.4; }
.star-progress .collected { color: #e0a73d; animation: star-pop .5s cubic-bezier(.34,1.56,.64,1); }
.star-target { position: absolute; left: 12%; top: 25%; width: 64px; min-height: 74px; padding: 0; border: 0; background: transparent; pointer-events: auto; transition: left .35s cubic-bezier(.34,1.56,.64,1), top .35s cubic-bezier(.34,1.56,.64,1); }
.star-target.appear { animation: star-appear .45s cubic-bezier(.34,1.56,.64,1); }
.star-target svg { display: block; width: 58px; height: 58px; margin: 0 auto; filter: drop-shadow(0 0 6px #fff1b8); animation: star-float 2.6s ease-in-out infinite; }
.star-target span { display: block; padding: 1px 4px; border-radius: 7px; background: #fffaf0; color: #896477; font-size: 10px; font-weight: 900; white-space: nowrap; }
.star-target:active svg { transform: scale(.88); }
.cat { position: absolute; left: 2%; bottom: calc(2% + 18px); width: min(24%, 130px); padding: 0; border: 0; background: transparent; pointer-events: auto; }
.cat svg { display: block; width: 100%; height: auto; overflow: visible; }
.cat-head { transform-origin: 29px 50px; animation: cat-breathe 3.5s ease-in-out infinite; }
.cat-tail { transform-origin: 80px 52px; animation: tail 3s ease-in-out infinite; }
.cat-open { display: none; }
.cat.awake .cat-open { display: inline; }
.cat.awake .cat-closed, .cat.awake .cat-zzz { display: none; }
.cat.awake svg { animation: cat-hop .6s cubic-bezier(.34,1.56,.64,1); }
.cat.awake .cat-tail { animation-duration: .5s; }
.cat-zzz { position: absolute; top: -6px; left: 30%; font-size: 12px; font-weight: 900; color: #a58bb8; }
.cat-zzz i { display: inline-block; font-style: normal; animation: zzz 2.6s ease-in-out infinite; }
.cat-zzz i:nth-child(2) { font-size: 1.2em; animation-delay: .4s; }
.cat-zzz i:nth-child(3) { font-size: 1.45em; animation-delay: .8s; }

/* ---------- Particelle ---------- */
.fx { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.particle { position: absolute; margin: -.6em 0 0 -.4em; line-height: 1; font-weight: 900; pointer-events: none; text-shadow: 0 1px 0 #ffffffaa; will-change: transform, opacity; }
.particle.burst { animation: burst 1s cubic-bezier(.2,.8,.3,1) forwards; }
.particle.float { opacity: 0; animation: float 6s ease-in-out forwards; }
.particle.fall { animation: fall 2.5s cubic-bezier(.3,.4,.6,1) forwards; }

/* ---------- Buono d'amore ---------- */
.reward { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 16px; background: #fde3e1aa; backdrop-filter: blur(3px); }
.reward-card { position: relative; width: min(100%, 320px); padding: 22px 20px 20px; border: 2.5px dashed #e79ab0; border-radius: 24px; background: radial-gradient(circle at 0 50%, transparent 12px, #fff 13px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 12px, #fff 13px) right / 51% 100% no-repeat; box-shadow: 0 14px 40px -14px #b0708d88; text-align: center; animation: reward-in .6s cubic-bezier(.34,1.56,.64,1) both; }
.reward-kicker { margin: 0; color: #e0a73d; font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.reward-card h2 { margin: 4px 0 10px; font: 400 28px/1.1 'Bagel', 'Nunito', sans-serif; color: var(--plum); }
.reward-text { margin: 0 auto; max-width: 24ch; padding: 12px 14px; border-radius: 16px; background: #fff0f3; color: #9b4f72; font-size: 18px; font-weight: 900; line-height: 1.3; text-wrap: balance; }
.reward-small { margin: 10px 0 14px; font-size: 12px; font-weight: 700; color: #8e6f8a; }
.star-replay { min-height: 48px; padding: 8px 22px; border: 2px solid var(--rose-deep); border-radius: 18px; background: linear-gradient(#f9bdc8, #f2a1b1); box-shadow: 0 3px #b57597; color: #713d5f; font-size: 15px; font-weight: 900; }
.star-replay:active { transform: translateY(2px); box-shadow: 0 1px #b57597; }

.world.paused * { animation-play-state: paused !important; }
.no-script { position: fixed; z-index: 9; inset: auto 12px 12px; padding: 12px; background: var(--cream); border: 2px solid #9a7c9a; border-radius: 12px; }

/* ---------- Animazioni ---------- */
@keyframes title-in { from { opacity: 0; transform: translateY(-8px) scale(.9); } }
@keyframes countdown-glow { 0%,100% { box-shadow: 0 2px 0 #eab3c1; } 50% { box-shadow: 0 2px 0 #eab3c1, 0 0 14px #ffb7c9; } }
@keyframes breathe { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-3px) rotate(.5deg); } }
@keyframes sleepy { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes dance { 0%,100% { transform: rotate(-3deg) translateX(-2px); } 50% { transform: rotate(3deg) translateX(2px); } }
@keyframes grumpy { 0%,88%,100% { transform: translateX(0); } 91% { transform: translateX(-2px); } 94% { transform: translateX(2px); } 97% { transform: translateX(-1px); } }
@keyframes kiss-pose {
  0% { transform: translateY(0) scale(1) rotate(0); }
  14% { transform: translateY(2px) scale(.98) rotate(2deg); }
  36% { transform: translateY(-6px) scale(1.065) rotate(-3deg); }
  64% { transform: translateY(-3px) scale(1.035) rotate(-1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
@keyframes kiss-flight {
  0% { opacity: 0; transform: translate(0,6px) scale(.4) rotate(-15deg); }
  10% { opacity: 1; }
  28% { opacity: 1; transform: translate(-8px,-10px) scale(1) rotate(-8deg); }
  65% { opacity: .95; transform: translate(-23px,calc(var(--kiss-rise, -85px) * .65)) scale(1.35) rotate(-15deg); }
  100% { opacity: 0; transform: translate(-32px,var(--kiss-rise, -85px)) scale(1.55) rotate(-20deg); }
}
@keyframes cheer-pose { 0%,100% { transform: scale(1); } 35% { transform: scale(1.03) rotate(-1deg) translateY(-4px); } }
@keyframes note-pop { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.8); } }
@keyframes shine { 0%,70% { left: -60%; } 100% { left: 130%; } }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes star-float { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
@keyframes star-appear { from { transform: scale(.3); opacity: 0; } }
@keyframes star-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes cloud-drift { from { transform: translateX(-6px); } to { transform: translateX(8px); } }
@keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes bulb { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes cat-breathe { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-2deg) translateY(1px); } }
@keyframes tail { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes cat-hop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-12px) scale(1.04); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0,4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px,-10px); } }
@keyframes burst { 0% { opacity: 0; transform: translate(0,0) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(1.1) rotate(var(--rot)); } }
@keyframes float { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: .8; } 80% { opacity: .6; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)); } }
@keyframes fall { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--rot)); } }
@keyframes reward-in { from { opacity: 0; transform: scale(.6) rotate(-6deg); } }

@media (min-width: 760px) { h1 { font-size: 44px; } .controls { padding-block: 18px 16px; } .sleep-note { right: 32%; } }
@media (max-height: 680px) {
  .world-header { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 6px; gap: 2px; }
  h1 { font-size: 28px; }
  .countdown { min-height: 28px; font-size: 12px; padding-block: 2px; }
  .controls { padding-top: 14px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .kiss { min-height: 46px; font-size: 15px; padding-block: 8px; }
  .support { margin-top: 9px; gap: 4px; }
  .support button { font-size: 12px; padding-inline: 10px; }
  .note { padding: 8px 14px; font-size: 13px; }
  .meal-response { font-size: 11px; }
}
@media (max-width: 340px) { .world-header { padding-inline: 48px; } h1 { font-size: 28px; } .countdown { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }