#mascot-greet { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#mascot-greet.delight-away { opacity: 0; animation: none; }
.delight-flyer {
position: fixed; left: 0; top: 0; z-index: 225; pointer-events: none; touch-action: none;
will-change: transform; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25));
}
.delight-flyer.grabbable { pointer-events: auto; cursor: grab; }
.delight-flyer-squash, .delight-flyer-spin, .delight-face { width: 100%; height: 100%; }
.delight-face[hidden] { display: none; }
.delight-face > svg { display: block; width: 100%; height: 100%; }
.delight-fart-sky {
position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 224; pointer-events: none;
--fart-cloud: #C8F858; --fart-hi: #E6FBAE; --fart-ink: #2A1606; --fart-stink: #7E9A1A;
--fart-sneeze: #EAF6FF; --fart-sneeze-hi: #FFFFFF; --fart-drop: #8FD3FF; --fart-pollen: #FFD43B;
}
body.theme-night .delight-fart-sky, body.theme-contrast .delight-fart-sky, body.theme-low-lume .delight-fart-sky { --fart-stink: #A9C93A; }
.delight-fart-word {
position: fixed; left: 0; top: 0; z-index: 224; pointer-events: none; white-space: nowrap;
font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .02em;
color: #FFC93C; -webkit-text-stroke: 2.5px #2A1606; paint-order: stroke fill; text-shadow: 3px 3px 0 #2A1606;
}
.delight-fart-word.small { font-size: 24px; -webkit-text-stroke-width: 2px; text-shadow: 2px 2px 0 #2A1606; }
.delight-fart-word.big { font-size: 48px; }
.delight-fart-word.pink { color: #FF9EC7; }
.delight-fart-word.blue { color: #9AD8FF; }
.delight-stars { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 226; pointer-events: none; }
.delight-stars svg { position: absolute; left: 0; top: 0; width: 19px; height: 19px; overflow: visible; }
.delight-stars path { fill: #FFC93C; stroke: #2A1606; stroke-width: 2.2; stroke-linejoin: round; }
.delight-bell { position: fixed; left: 0; top: 0; width: 64px; height: 22px; z-index: 226; pointer-events: none; }
.delight-bell svg { display: block; width: 100%; height: 100%; overflow: visible; }
.delight-bell rect { fill: #E5484D; stroke: #2A1606; stroke-width: 1.5; }
.delight-bell rect.bar { fill: #C9CED6; }
.delight-piano-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; }
.delight-piano-keys button {
font: inherit; font-weight: 800; font-size: .82rem; line-height: 1.1; min-height: 64px; padding: 4px; border-radius: 12px;
border: 2px solid #2A1606; background: #FFFFFF; color: #2A1606; cursor: pointer;
box-shadow: 0 4px 0 #2A1606; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.delight-piano-keys button:active { transform: translateY(3px); box-shadow: 0 1px 0 #2A1606; background: #F3FFD9; }
.delight-piano-keys button:focus-visible { outline: 3px solid #FFC93C; outline-offset: 2px; }
#rexGardenTitleBtn.delight-roll { animation: delightRoll .9s ease-in-out; }
@keyframes delightRoll { 40% { transform: rotate(-200deg) translateY(-6px); } 70% { transform: rotate(-360deg); } 100% { transform: rotate(-360deg); } }
.delight-emoji-confetti {
position: fixed; top: -40px; z-index: 230; font-size: 28px; line-height: 1;
pointer-events: none; animation: delightFall 2.3s ease-in forwards;
}
@keyframes delightFall { to { transform: translateY(calc(100vh + 80px)) rotate(540deg); } }
#mealHeaderTotal.delight-jelly { display: inline-block; animation: delightJelly .5s; }
@keyframes delightJelly { 30% { transform: scale(1.15, .85); } 50% { transform: scale(.9, 1.1); } 70% { transform: scale(1.05, .95); } }
.delight-sky { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 3; }
.delight-snow i {
position: absolute; top: -10px; width: 6px; height: 6px; border-radius: 50%;
background: #fff; opacity: .85; animation: delightSnow 6s linear infinite;
}
@keyframes delightSnow { to { transform: translate(18px, 460px); } }
.delight-fireworks i {
position: absolute; width: 6px; height: 6px; border-radius: 50%;
box-shadow: 0 -22px #FFC93C, 16px -16px #FF5D8F, 22px 0 #3FA9F5, 16px 16px #2EC4B6,
0 22px #9B6BFF, -16px 16px #FFC93C, -22px 0 #FF5D8F, -16px -16px #3FA9F5;
opacity: 0; animation: delightBurst 3s ease-out infinite;
}
@keyframes delightBurst { 0% { opacity: 0; transform: scale(.1); } 15% { opacity: 1; } 60% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1.6); } }
body.delight-swapped #mascot-greet > * { visibility: hidden; }
body.delight-swapped #mascot-greet::after {
content: ''; position: absolute; inset: 4px;
background: url('../images/rex/poses/rex-calm.webp') center / contain no-repeat;
}
body.delight-swapped #rexGardenTitleBtn { position: relative; }
body.delight-swapped #rexGardenTitleBtn .rex-garden-title-icon { visibility: hidden; }
.delight-swap-sprout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.delight-swap-sprout svg { width: 44px; height: 44px; }
.delight-flash { position: fixed; inset: 0; z-index: 400; background: #fff; pointer-events: none; animation: delightFlash .45s ease-out forwards; }
@keyframes delightFlash { from { opacity: .95; } to { opacity: 0; } }
.delight-selfie { z-index: 300; }
.delight-selfie-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.delight-selfie-note { margin: 4px 0 0; color: #fff; font: 700 .95rem/1.2 'Baloo 2', sans-serif; }
@font-face { font-family: 'Gochi Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/gochi-hand-latin-400-normal.woff2') format('woff2'); }
.delight-polaroid {
width: min(80vw, 300px); padding: 5.5% 5.5% 0; border-radius: 2px;
background: #FBF9F3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.28), 0 22px 44px rgba(0,0,0,.22);
transform: rotate(-3deg); animation: delightDrop .5s cubic-bezier(.34,1.56,.64,1);
}
.delight-polaroid-foot {
position: relative; aspect-ratio: 79 / 22; display: flex; flex-direction: column; justify-content: center; padding: 2% 2% 3%;
}
.delight-cap { margin: 0; text-align: center; color: #26324F; font: 400 1.4rem/1.05 'Gochi Hand', 'Baloo 2', cursive; transform: rotate(-1.2deg); }
.delight-date { margin: 2px 4% 0 0; text-align: right; color: #4E5872; opacity: .85; font: 400 .95rem/1 'Gochi Hand', 'Baloo 2', cursive; transform: rotate(-2deg); }
@keyframes delightDrop { from { transform: translateY(-40px) rotate(-12deg); opacity: 0; } }
.delight-photo {
position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 4%;
aspect-ratio: 1; min-width: 0; padding: 6% 6% 5%; background-size: cover; background-position: center bottom;
filter: saturate(.94) contrast(1.04) sepia(.1);
}
.delight-photo::before, .delight-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.delight-photo::before { background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(50,30,10,.30) 100%); }
.delight-photo::after {
background: linear-gradient(128deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 34%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), inset 0 2px 7px rgba(0,0,0,.32);
}
.delight-photo-develop { position: absolute; inset: 0; z-index: 3; background: #2E3A33; pointer-events: none; animation: delightDevelop 3.2s ease-in forwards; }
@keyframes delightDevelop { 0% { opacity: 1; } 25% { opacity: .92; background: #4A4A3A; } 100% { opacity: 0; background: #C9B98F; } }
.delight-photo-sprout { width: 44%; flex: none; }
.delight-photo-sprout svg { width: 100%; height: auto; display: block; overflow: visible; }
.delight-photo-rex { flex: none; display: block; }
.delight-photo-rex.is-face { width: 38%; height: auto; }
.delight-photo-rex.is-body { height: 78%; width: 42%; min-width: 0; object-fit: contain; object-position: bottom; }
.scene-sky { background-color: #8FD3FF; background-image: url('../images/delights/meadow.svg'); }
.scene-sunset { background-color: #C46B86; background-image: url('../images/delights/sunset.svg'); }
.scene-night { background-color: #1A2150; background-image: url('../images/delights/night.svg'); }
.scene-party { background-color: #FFDDEB; background-image: url('../images/delights/party.svg'); }
.scene-beach { background-color: #8FD3FF; background-image: url('../images/delights/beach.svg'); }
.scene-space { background-color: #26174F; background-image: url('../images/delights/space.svg'); }
.scene-snow { background-color: #CFE8F8; background-image: url('../images/delights/snow.svg'); }
.scene-sea { background-color: #1C6FB0; background-image: url('../images/delights/sea.svg'); }
.scene-rainbow { background-color: #A8DDFB; background-image: url('../images/delights/rainbow.svg'); }
.scene-garden { background-color: #8CCB6A; }
.delight-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.delight-btn {
min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
background: var(--sky, #3FA9F5); color: #fff; font: 800 1rem/1 'Baloo 2', sans-serif;
}
.delight-btn.is-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }
#photoBookHeader { margin-top: 10px; }
.delight-book-cover {
display: flex; flex-direction: column; width: min(92vw, 420px); max-height: 86vh; padding: 10px 10px 12px; border-radius: 18px;
background: radial-gradient(circle at 30% 0%, #8A5434, #5A321D 70%);
box-shadow: inset 0 0 0 5px #5A321D, inset 0 0 0 7px rgba(255,226,180,.45), 0 18px 46px rgba(0,0,0,.5);
}
.delight-book-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 10px 10px; }
.delight-book-head h3 { margin: 0; color: #FCEBC8; font: 800 1.2rem/1.1 'Baloo 2', sans-serif; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.delight-book-x {
width: 44px; height: 44px; flex: none; border: none; border-radius: 50%; cursor: pointer;
background: rgba(252,235,200,.18); color: #FCEBC8; font-size: 1.1rem;
}
.delight-book-page {
flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; border-radius: 8px; padding: 12px 14px 20px;
background: #F6EBD3 url('../images/sticker-book/paper.webp') center / 240px;
box-shadow: inset 6px 0 10px -6px rgba(90,50,29,.35);
}
.delight-book-count { margin: 0 0 12px; text-align: center; color: #7A6248; font: 700 .9rem/1.2 'Baloo 2', sans-serif; }
.delight-book-empty { margin: 30px 10px; text-align: center; color: #3A2F1E; font: 700 1.05rem/1.4 'Baloo 2', sans-serif; }
.delight-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.delight-book-tile {
position: relative; display: block; width: 100%; padding: 6% 6% 0; border: none; border-radius: 2px; cursor: pointer;
background: #FBF9F3; box-shadow: 0 1px 2px rgba(58,47,30,.2), 0 4px 10px rgba(58,47,30,.22); transform: rotate(var(--tilt, 0deg));
content-visibility: auto; contain-intrinsic-size: auto 210px;
}
.delight-book-foot { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 3px 0 5px; }
.delight-book-corners {
position: absolute; inset: -3px; z-index: 2; pointer-events: none;
background:
linear-gradient(135deg, #2B2118 50%, transparent 50%) top left / 18px 18px no-repeat,
linear-gradient(225deg, #2B2118 50%, transparent 50%) top right / 18px 18px no-repeat,
linear-gradient(45deg, #2B2118 50%, transparent 50%) bottom left / 18px 18px no-repeat,
linear-gradient(315deg, #2B2118 50%, transparent 50%) bottom right / 18px 18px no-repeat;
}
.delight-book-cap { display: block; text-align: center; color: #26324F; font: 400 .92rem/1.05 'Gochi Hand', 'Baloo 2', cursive; transform: rotate(-1deg); }
.delight-book-date { display: block; margin-right: 4%; text-align: right; color: #4E5872; opacity: .85; font: 400 .72rem/1.2 'Gochi Hand', 'Baloo 2', cursive; }
.delight-book-one { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.delight-book-one .delight-polaroid { width: min(74vw, 300px); animation: none; transform: rotate(-1.5deg); box-shadow: 0 1px 2px rgba(58,47,30,.2), 0 8px 18px rgba(58,47,30,.3); }
.delight-book-who { margin: 6px 0 0; text-align: center; color: #3A2F1E; font: 800 1.05rem/1.3 'Baloo 2', sans-serif; }
.delight-book-one .delight-btn.is-ghost { background: transparent; color: #5A321D; border-color: #A98763; }
#footerVersion { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: default; }
.delight-dev .modal-content { max-width: 340px; }
.delight-dev h3 { margin: 0 0 10px; font-family: 'Baloo 2', sans-serif; }
.delight-dev ul { margin: 0 0 16px; padding-left: 20px; line-height: 1.7; font-weight: 700; }
.delight-dev .go-btn { width: 100%; }
.delight-dev .go-btn + .go-btn { margin-top: 8px; }
.delight-piano .modal-content { max-width: 360px; }
.delight-piano h3 { margin: 0; font-family: 'Baloo 2', sans-serif; }
.delight-piano .go-btn { width: 100%; }
@media (prefers-reduced-motion: reduce) {
#rexGardenTitleBtn.delight-roll, #mealHeaderTotal.delight-jelly, .delight-polaroid { animation: none; }
.delight-photo-develop { display: none; }
}