:root {
  --pink: #FF5FA2;
  --pink-d: #E23D86;
  --pink-l: #FFE3F0;
  --purple: #8B6CFF;
  --ink: #4A2B4F;
  --muted: #806284;
  --card: #FFFFFF;
  --radius: 22px;
  --shadow: 0 6px 18px rgba(160, 60, 120, .16);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, "Segoe UI", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: radial-gradient(circle at 20% 0%, #FFF0F7, var(--pink-l) 60%, #FFD6EA);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
input, select { font: inherit; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }

/* ---------- top bar ---------- */
.top {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 6px;
}
.lvl { flex: 1; min-width: 0; background: #fff; border-radius: 16px; padding: 6px 10px; box-shadow: var(--shadow); }
.lvl-badge { font-size: 14px; white-space: nowrap; }
.lvl-badge b { font-size: 16px; color: var(--pink-d); }
.lvl-badge small { color: var(--muted); font-size: 12px; }
.bar { height: 7px; border-radius: 6px; background: #FBE1EE; margin-top: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #FF8CC0, var(--pink)); transition: width .6s; }
.belt-chip { width: 48px; height: 40px; display: grid; place-items: center; background: #fff; border-radius: 14px; box-shadow: var(--shadow); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 14px; background: #fff; box-shadow: var(--shadow);
  font-size: 18px; font-weight: 700; display: grid; place-items: center; color: var(--pink-d);
}
.icon-btn:active, .act:active, .btn:active { transform: scale(.94); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px 12px; }
.stat { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 14px; padding: 5px 7px; box-shadow: var(--shadow); min-width: 0; }
.s-ico { font-size: 18px; }
.s-body { flex: 1; min-width: 0; }
.s-name { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-bar { height: 7px; border-radius: 5px; background: #F4E6F0; overflow: hidden; }
.s-bar i { display: block; height: 100%; border-radius: 5px; transition: width .8s; background: var(--b); }
.stat[data-k=hunger] { --b: linear-gradient(90deg, #FFB25B, #FF8A3D); }
.stat[data-k=fun] { --b: linear-gradient(90deg, #FF9CCB, #FF5FA2); }
.stat[data-k=clean] { --b: linear-gradient(90deg, #8FE3FF, #4DB8FF); }
.stat[data-k=energy] { --b: linear-gradient(90deg, #FFE36B, #FFC21A); }
.stat.low { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 90%, 100% { transform: none; } 94% { transform: rotate(-3deg); } 97% { transform: rotate(3deg); } }

/* ---------- scene ---------- */
.scene {
  flex: 1; position: relative; overflow: hidden; margin: 8px 12px 0;
  border-radius: 30px; box-shadow: var(--shadow), inset 0 0 0 4px #fff;
}
.bg, .bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dusk { position: absolute; inset: 0; background: linear-gradient(#6B4BA8, #FF9A6C 70%); opacity: 0; transition: opacity 2s; pointer-events: none; mix-blend-mode: multiply; }
.scene.evening .dusk { opacity: .28; }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }

/* 'left' is where his middle is. He is centred with a margin, not a transform: a transform would be turned with
   him, so every spin (a binky, a roll, a handstand) swung him a whole body width to the side. */
.lucky {
  position: absolute; left: 50%; bottom: 7%; --lw: min(64%, 300px); width: var(--lw); margin-left: calc(var(--lw) / -2); aspect-ratio: 200 / 210;
  transition: left var(--go, .8s) cubic-bezier(.4, 1.4, .5, 1), width .6s, margin-left .6s, bottom .6s, opacity .5s, scale .5s;
  z-index: 3; cursor: pointer;
}
.lucky svg { width: 100%; height: 100%; overflow: visible; }
.lucky .body, .lucky .head { transform-box: fill-box; transform-origin: 50% 100%; }
.lucky .head { animation: breathe 3.6s ease-in-out infinite; }
.lucky .ear { transform-box: fill-box; transform-origin: 50% 0; animation: ear 5s ease-in-out infinite; }
.lucky .ear-r { animation-delay: .4s; }
.lucky .eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .988); } }
@keyframes ear { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(5deg); } 92% { transform: rotate(-3deg); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.lucky.hop, .dog-body.hop { animation: hop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 0% { translate: 0 0; } 40% { translate: 0 -14%; } 100% { translate: 0 0; } }
.lucky.zoom, .dog-body.zoom { animation: zoom 2.2s ease-in-out; }
@keyframes zoom {
  0% { translate: 0 0; } 15% { translate: -30% -10%; } 30% { translate: 20% 0; } 45% { translate: 35% -12%; }
  60% { translate: -10% 0; } 75% { translate: -25% -8%; } 100% { translate: 0 0; }
}

.scene.has-dog .lucky { left: 36%; --lw: min(56%, 270px); }
.dog { position: absolute; right: 3%; bottom: 6%; width: min(36%, 170px); z-index: 4; }
.dog-body { aspect-ratio: 200 / 210; cursor: pointer; }
.dog-body svg { width: 100%; height: 100%; overflow: visible; }
.dog-body .tail { transform-box: fill-box; transform-origin: 0% 100%; animation: wag .5s ease-in-out infinite alternate; }
.dog-body .dog-head { transform-box: fill-box; transform-origin: 50% 100%; animation: tilt 4s ease-in-out infinite; }
@keyframes wag { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes tilt { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-7deg); } 90% { transform: rotate(4deg); } }
.dog-body.enter { animation: enter 1s cubic-bezier(.3, 1.3, .5, 1); }
.dog-body.leave { animation: leave 1s ease-in forwards; }
@keyframes enter { from { translate: 160% 0; } to { translate: 0 0; } }
@keyframes leave { to { translate: 170% 0; } }
.gift {
  position: absolute; top: -22%; left: -12%; font-size: 38px;
  animation: bob 1.6s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .15));
}
@keyframes bob { 50% { transform: translateY(-8px) rotate(6deg); } }
.pill {
  position: absolute; bottom: -6%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: #fff; color: var(--pink-d); font-weight: 700; font-size: 13px;
  padding: 7px 12px; border-radius: 999px; box-shadow: var(--shadow);
}

.word-btn {
  position: absolute; left: 12px; top: 12px; z-index: 7; width: 48px; height: 48px; font-size: 24px;
  background: #fffc; border-radius: 16px; box-shadow: var(--shadow);
  animation: bob 3s ease-in-out infinite;
}

/* ---------- speech bubble ---------- */
.bubble {
  position: absolute; left: 50%; top: 70px; transform: translate(-50%, 10px) scale(.9); z-index: 8;
  width: max-content; max-width: calc(100% - 24px); background: #fff; border-radius: 22px; padding: 11px 15px;
  box-shadow: var(--shadow); font-size: 17px; font-weight: 600; line-height: 1.3; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; background: #fff;
  transform: translateX(-50%) rotate(45deg); border-radius: 3px;
}
.bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.bubble.show.aloft { opacity: 0; transition: opacity .15s; } /* Lucky is up in a big jump, right where the bubble is */
.scene.has-dog .bubble.b-lucky { left: 42%; max-width: calc(84% - 24px); }
.bubble.b-dog { left: 58%; max-width: calc(84% - 24px); background: #F4EEFF; }
.bubble.b-dog::after { background: #F4EEFF; left: 72%; }
.b-sub { margin-top: 5px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.spk { font-size: 12px; opacity: .6; }

/* ---------- particles ---------- */
.float { position: absolute; font-size: 26px; transform: translate(-50%, -50%); animation: floatUp 1.3s ease-out forwards; }
@keyframes floatUp { to { transform: translate(calc(-50% + var(--dx)), -130px) scale(1.3); opacity: 0; } }
.float.soap {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #BDEBFF 45%, #8FD8FF88 70%, transparent 72%);
  border: 1.5px solid #fff; animation-duration: 1.1s;
}
.float.spark { font-size: 24px; }
.fly { position: absolute; left: 0; top: 0; font-size: 44px; margin: -22px 0 0 -22px; z-index: 7; }
.scene.washing { cursor: grab; }
.scene.washing .lucky { filter: drop-shadow(0 0 16px #8FD8FF); }

.confetti {
  position: fixed; top: -12px; width: 9px; height: 14px; border-radius: 3px; z-index: 60; pointer-events: none;
  animation: fall 2.6s ease-in forwards;
}
@keyframes fall { to { transform: translateY(105vh) rotate(var(--r)); } }

/* ---------- action buttons ---------- */
.actions {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  padding: 10px 10px calc(env(safe-area-inset-bottom) + 10px);
}
.act {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px;
  background: #fff; border-radius: 20px; box-shadow: var(--shadow); min-width: 0;
}
.a-ico { font-size: 28px; line-height: 1; }
.a-name { font-size: 11px; font-weight: 700; color: var(--pink-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.btn {
  padding: 12px 18px; border-radius: 16px; font-weight: 700; font-size: 16px;
  background: #F4ECF7; color: var(--ink); box-shadow: 0 3px 0 #0000000f;
}
.btn.pink { background: linear-gradient(180deg, #FF7DB6, var(--pink)); color: #fff; box-shadow: 0 4px 0 var(--pink-d); text-shadow: 0 1px 1px #0000004d; }
.btn.purple { background: linear-gradient(180deg, #A48BFF, var(--purple)); color: #fff; box-shadow: 0 4px 0 #6B4FE0; text-shadow: 0 1px 1px #0000004d; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--muted); text-decoration: underline; }
.btn.danger { color: #D0455B; }
.btn.big { font-size: 20px; padding: 14px 32px; }
.btn:disabled { opacity: .75; }
.btn.ready { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.row { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 12px; }
.row.wrap { flex-wrap: wrap; }

/* ---------- bottom sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; background: #4A2B4F55; z-index: 35; opacity: 0; pointer-events: none; transition: opacity .25s; }
.sheet-wrap.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 86%;
  background: #FFF8FB; border-radius: 30px 30px 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom) + 18px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(100%); transition: transform .35s cubic-bezier(.3, 1.2, .5, 1);
}
.sheet-wrap.show .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; font-size: 21px; }
.x { width: 44px; height: 44px; border-radius: 14px; background: #F4ECF7; font-size: 17px; flex: none; }
.muted { color: var(--muted); font-size: 13.5px; }
.center { text-align: center; }

.food-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.food { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 4px; background: #fff; border-radius: 20px; box-shadow: var(--shadow); }
.fe { font-size: 40px; }
.fn { font-weight: 700; font-size: 14px; }
.treat { position: absolute; top: 6px; right: 10px; font-style: normal; color: #FFB400; }

.card { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); margin-top: 12px; }
.card-title { font-weight: 800; color: var(--pink-d); margin-bottom: 8px; }
.task { display: flex; gap: 12px; align-items: center; }
.t-emoji { font-size: 40px; }
.bi-main { font-size: 17px; font-weight: 700; line-height: 1.3; }
.bi-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.done-note { font-weight: 700; color: #3BAA66; margin: 4px 0; }

.belt-box { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.belt-name { font-size: 19px; font-weight: 800; }
.dots { display: flex; gap: 6px; margin: 6px 0 3px; }
.dots i { width: 16px; height: 16px; border-radius: 50%; background: #F1E3EE; }
.dots i.on { background: var(--pink); box-shadow: 0 0 0 3px #FFD1E6; }

.tabs { display: flex; gap: 6px; background: #F4ECF7; padding: 4px; border-radius: 16px; margin: 8px 0 12px; }
.tab { flex: 1; padding: 9px 0; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--muted); }
.tab.on { background: #fff; color: var(--pink-d); box-shadow: var(--shadow); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tiles.places { grid-template-columns: repeat(2, 1fr); }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border-radius: 20px; padding: 8px 6px 10px; box-shadow: var(--shadow); font-size: 12.5px; font-weight: 700; }
.tile.sel { box-shadow: 0 0 0 3px var(--pink), var(--shadow); }
.tile-art { width: 100%; aspect-ratio: 1; }
.tile-art svg { width: 100%; height: 100%; }
.tile-art.place { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; }
.tile-art.place svg { position: absolute; inset: 0; }
.tile.locked .tile-art { filter: grayscale(1) brightness(1.15); opacity: .45; }
.lock { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); font-style: normal; background: #fff; border-radius: 10px; padding: 3px 7px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap; }
.stickers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stk { aspect-ratio: 1; display: grid; place-items: center; font-size: 30px; border-radius: 16px; background: #F4ECF7; color: #D8C6DB; font-weight: 800; }
.stk.on { background: #fff; box-shadow: var(--shadow); }

.phrase { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.phrase .big-emoji { text-align: center; }
.say-line { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 18px; font-weight: 700; }
.say-line .spk { margin-left: auto; font-size: 18px; opacity: .8; }
.flag { flex: none; font-size: 11px; font-weight: 800; color: #fff; background: var(--purple); border-radius: 8px; padding: 3px 6px; }
.ga { display: flex; align-items: center; gap: 10px; background: #E9FBEF; border-radius: 18px; padding: 10px 14px; }
.ga .flag { background: #3BAA66; font-size: 16px; }
.quiz-box { margin-top: 14px; text-align: center; }
.quiz { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.opt { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); font-weight: 600; text-align: left; font-size: 15.5px; }
.opt.right { background: #DDF7E6; box-shadow: 0 0 0 2px #3BAA66; }
.opt.wrong { background: #FFE1E6; }
.q-res { text-align: center; margin-top: 6px; }

.form { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; background: #fff; border-radius: var(--radius); padding: 6px 14px; box-shadow: var(--shadow); }
.form label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #F4ECF7; font-weight: 600; font-size: 15px; }
.form label:last-child { border: 0; }
.form select, .form input[type=text] { border: 0; background: #F4ECF7; border-radius: 10px; padding: 7px 10px; color: var(--ink); max-width: 50%; }
.switch { position: relative; }
.switch input { position: absolute; opacity: 0; }
.switch i { display: block; width: 48px; height: 28px; border-radius: 14px; background: #E6DAE8; position: relative; transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: left .2s; }
.switch input:checked + i { background: var(--pink); }
.switch input:checked + i::after { left: 23px; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: #4A2B4F66; padding: 20px; }
.modal.show { display: grid; }
.modal-card {
  width: min(340px, 100%); background: #FFF8FB; border-radius: 30px; padding: 22px 20px; text-align: center;
  box-shadow: 0 20px 50px #4A2B4F55; animation: popIn .45s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }
.modal-card h2 { margin: 8px 0 4px; font-size: 23px; }
.modal-card p { margin: 4px 0 8px; color: var(--muted); font-weight: 600; }
.m-art { display: grid; place-items: center; }
.m-art svg { width: 160px; max-height: 170px; }
.m-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.big-emoji { font-size: 72px; line-height: 1.1; animation: popIn .6s cubic-bezier(.3, 1.6, .5, 1); }
/* her birthday card from Lucky and Tali: what they have done together, in small tiles */
.bd-card { background: linear-gradient(#FFF8FC, #F1FBFF); padding-top: 18px; }
.bd-card .m-art svg { width: 108px; max-height: 114px; }
.bd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 4px; }
.bd-tile { display: flex; flex-direction: column; align-items: center; padding: 6px 3px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #FFE1EF; }
.bd-tile span { font-size: 19px; line-height: 1.15; }
.bd-tile b { font-size: 20px; line-height: 1.1; color: var(--pink-d); }
.bd-tile small { font-size: 11.5px; font-weight: 700; line-height: 1.15; color: var(--muted); }
.modal-card .bd-belt { margin: 6px 0 2px; color: var(--ink); font-weight: 800; }
.modal-card .bd-sign { margin: 6px 0 0; color: var(--pink-d); font-weight: 800; font-style: italic; }

.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); z-index: 50; width: min(92%, 420px);
  transform: translate(-50%, -30px); opacity: 0; pointer-events: none;
  background: #fff; border-radius: 20px; padding: 12px 16px; box-shadow: 0 10px 30px #4A2B4F33;
  font-size: 15px; line-height: 1.35; transition: opacity .3s, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal.show ~ .toast { visibility: hidden; } /* a hint never sits on top of a window */
/* with a sheet open the hint shows at the bottom, clear of the sheet's title and ✕ */
.sheet-wrap.show ~ .toast { top: auto; bottom: calc(env(safe-area-inset-bottom) + 16px); transform: translate(-50%, 30px); }
.sheet-wrap.show ~ .toast.show { transform: translate(-50%, 0); }
/* a game, a mission or sleep fills the screen: the scene under it isn't drawn (its animations cost nothing) */
body.covered #app { visibility: hidden; }

/* ---------- overlays: game and sleep ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: none; }
.overlay.show { display: block; }
.game { position: absolute; inset: 0; touch-action: none; }
.game canvas { display: block; touch-action: none; }
.game-hud {
  position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 12px; right: 12px;
  display: flex; justify-content: space-between; pointer-events: none;
}
.game-hud span { background: #fff; border-radius: 16px; padding: 8px 16px; font-weight: 800; font-size: 20px; box-shadow: var(--shadow); }
.game-card {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(320px, 88%);
  background: #FFF8FB; border-radius: 30px; padding: 22px; text-align: center; box-shadow: 0 20px 50px #4A2B4F44;
}
.game-card[hidden] { display: none; }
.game-card h2 { margin: 6px 0; }
.game-card p { color: var(--muted); font-weight: 600; margin: 0 0 16px; }
.game-emoji { font-size: 44px; }

.sleep-bg, .sleep-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sleep-content {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 20px); color: #fff; text-align: center;
}
.sleep-content h1 { margin: 0 0 6px; font-size: 30px; }
.sleep-content p { margin: 0; opacity: .9; font-weight: 600; max-width: 340px; line-height: 1.4; }
.sleep-lucky { position: relative; width: min(60%, 250px); margin: 18px 0; }
.sleep-lucky svg { width: 100%; animation: breathe 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
.zzz { position: absolute; right: -4%; top: 0; font-weight: 800; color: #FFF3C4; }
.zzz span { position: absolute; animation: zzz 3s ease-in infinite; opacity: 0; font-size: 22px; }
.zzz span:nth-child(2) { animation-delay: 1s; font-size: 28px; }
.zzz span:nth-child(3) { animation-delay: 2s; font-size: 36px; }
@keyframes zzz { 0% { transform: translate(0, 20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(30px, -70px); opacity: 0; } }
.card.idea { color: var(--ink); text-align: left; width: min(360px, 100%); background: #FFFFFFEE; }
.gear-sleep { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 12px; z-index: 2; background: #FFFFFF33; box-shadow: none; }

/* ---------- background animations ---------- */
.cloud { animation: drift 40s linear infinite alternate; }
.cloud.slow { animation-duration: 60s; }
@keyframes drift { to { transform: translateX(60px); } }
.twinkle { animation: tw 2.4s ease-in-out infinite; }
.twinkle.t1 { animation-delay: .8s; }
.twinkle.t2 { animation-delay: 1.6s; }
@keyframes tw { 50% { opacity: .25; } }
.petal { animation: petal 9s linear infinite; }
.petal.p1 { animation-delay: -1s; } .petal.p2 { animation-delay: -2.5s; } .petal.p3 { animation-delay: -4s; }
.petal.p4 { animation-delay: -5.5s; } .petal.p5 { animation-delay: -7s; } .petal.p6 { animation-delay: -3s; }
.petal.p7 { animation-delay: -6s; } .petal.p8 { animation-delay: -8s; } .petal.p9 { animation-delay: -.5s; }
@keyframes petal { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-60px, 720px) rotate(540deg); } }

/* ---------- portrait only ----------
   iOS web apps can't lock the orientation, so in landscape on a phone we cover the game with a hint. */
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 540px) {
  .rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: radial-gradient(circle at 50% 40%, #FFF0F7, var(--pink-l) 60%, #FFD6EA); color: var(--ink); text-align: center;
  }
  .rotate-hint p { margin: 0; font-size: 20px; font-weight: 800; }
  .rotate-hint small { color: var(--muted); font-weight: 600; }
  .rh-phone { font-size: 56px; animation: rhTurn 2s ease-in-out infinite; }
  #app, .sheet-wrap, .overlay, .modal, .toast { visibility: hidden; }
}
@keyframes rhTurn { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }

/* Reduce Motion (iOS accessibility setting): keep short tap feedback, which is how the child
   sees Lucky react, but stop the ambient loops that drift or spin in the background. */
@media (prefers-reduced-motion: reduce) {
  .cloud, .petal, .snow, .waves, .gull, .comet, .rays, .shooting, .word-btn, .twinkle, .sky-pet { animation: none !important; }
  .pl.super { animation: none; filter: drop-shadow(0 0 6px #FFD23Fbb); }
  .confetti { display: none; }
}

/* ---------- game picker and mini-games ---------- */
.game-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.game-item { display: flex; align-items: center; gap: 14px; text-align: left; background: #fff; border-radius: 20px; padding: 12px 14px; box-shadow: var(--shadow); }
.game-item:disabled { opacity: .45; }
.gi-emoji { font-size: 38px; }
.gi-text b { display: block; font-size: 17px; }
.gi-text small { color: var(--muted); font-size: 13px; line-height: 1.3; }

.game { background: linear-gradient(#FFE3F0, #E9DDFF); }
.game-stage { position: absolute; inset: 0; }
.game-hud { align-items: center; }
.game-hud .g-exit, .m-head .g-exit { pointer-events: auto; width: 44px; height: 44px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); font-size: 18px; font-weight: 800; color: var(--pink-d); }
.g-info { background: #fff; border-radius: 16px; padding: 8px 16px; font-weight: 800; font-size: 18px; box-shadow: var(--shadow); }
.game-card .row + .row { margin-top: 4px; }

.mem {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); width: min(94%, 420px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
}
.mem-card { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; perspective: 600px; }
.mem-card span {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; font-size: 38px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .35s; box-shadow: var(--shadow);
}
.mc-back { background: linear-gradient(135deg, #FF8CC0, var(--purple)); color: #fff; font-size: 28px; }
.mc-face { background: #fff; transform: rotateY(180deg); }
.mem-card.flip .mc-back { transform: rotateY(180deg); }
.mem-card.flip .mc-face { transform: rotateY(0); }
.mem-card.match .mc-face { background: #DDF7E6; box-shadow: 0 0 0 3px #3BAA66; }

.simon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 70px 20px 30px; }
.simon-lucky { width: min(38%, 160px); }
.simon-lucky svg { width: 100%; }
.simon-msg { min-height: 28px; font-size: 20px; font-weight: 800; color: var(--pink-d); }
.simon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(88%, 340px); }
.pad {
  aspect-ratio: 1; border-radius: 28px; font-size: 46px; background: var(--c);
  box-shadow: 0 6px 0 #0000001f, var(--shadow); opacity: .6; transition: opacity .12s, transform .12s;
}
.pad.lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 6px #fff, 0 0 30px var(--c); }
/* eight pads, for a whole song: two rows of four, from the lowest note to the highest */
.simon-grid.many { grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(94%, 380px); }
.simon-grid.many .pad { border-radius: 20px; font-size: min(9vw, 36px); }

.talk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 76px 18px 30px; }
.talk-lucky { width: min(34%, 140px); }
.talk-lucky svg { width: 100%; }
.talk-q { position: relative; background: #fff; border-radius: 22px; padding: 14px 18px; font-size: 20px; font-weight: 800; box-shadow: var(--shadow); max-width: 100%; }
.talk-q::before { content: ""; position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.talk-hint { font-size: 14px; font-weight: 700; color: var(--purple); padding: 4px 10px; }
.talk-hint[hidden] { display: none; }
.talk-tr { font-size: 15px; color: var(--muted); font-weight: 600; }
.talk-opts { display: flex; flex-direction: column; gap: 10px; width: min(100%, 400px); margin-top: 4px; }
.talk-opt { background: #fff; border-radius: 18px; padding: 14px 16px; font-size: 17px; font-weight: 700; box-shadow: 0 4px 0 #E6D6EA; text-align: left; }
.talk-opt.right { background: #DDF7E6; box-shadow: 0 0 0 3px #3BAA66; }
.talk-opt.wrong { background: #FFE1E6; opacity: .7; animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }


/* ---------- decorations and placement ---------- */
.decor { position: absolute; inset: 0; pointer-events: none; z-index: 2; container-type: inline-size; }
.decor-front { z-index: 4; }
.pl { position: absolute; width: calc(var(--w) * 1%); transform: translate(-50%, -50%) scale(var(--s)) scaleX(var(--f)); pointer-events: auto; cursor: pointer; touch-action: none; }
.pl svg { width: 100%; height: auto; display: block; overflow: visible; }
.pl-emoji { width: auto; font-size: calc(var(--w) * 1cqw); line-height: 1; }
.pl-in { transform-origin: 50% 90%; }
.pl.wiggle .pl-in { animation: wiggle .5s ease-in-out; }
.pl.bounce .pl-in { animation: ballBounce .7s cubic-bezier(.3, 1.5, .5, 1); }
.dec-lantern .pl-in { transform-origin: 50% 0; animation: swing 4s ease-in-out infinite; }
.dec-lantern.swingfast .pl-in { animation: swing .6s ease-in-out 3; }
@keyframes swing { 50% { transform: rotate(6deg); } 0%, 100% { transform: rotate(-6deg); } }
@keyframes ballBounce { 30% { transform: translateY(-60%) rotate(120deg); } 60% { transform: translateY(0) rotate(240deg); } 80% { transform: translateY(-15%) rotate(300deg); } }
@keyframes wiggle { 25% { transform: rotate(-10deg) scale(1.08); } 75% { transform: rotate(10deg) scale(1.08); } }
.tile-art.dec-tile { display: grid; place-items: center; padding: 10px; }
.tile-art.dec-tile svg { width: 80%; height: auto; }
.deco-tiles { margin-top: 12px; }

.edit-btn { left: 68px; animation-delay: -1.2s; }
body.editing .word-btn, body.editing .actions { display: none; }
body.editing .lucky, body.editing .dog { pointer-events: none; opacity: .8; }
body.editing .dog button { display: none; } /* Tali's joke, twister, gift and play buttons wait until Decorate is done */
body.editing .scene { box-shadow: var(--shadow), inset 0 0 0 4px var(--pink); }
body.editing .pl { outline: 2px dashed #ffffffaa; outline-offset: 2px; border-radius: 10px; }
body.editing .pl.sel { outline: 3px solid var(--pink); background: #ffffff33; }
.edit-tools {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; gap: 6px;
  background: #fff; padding: 6px; border-radius: 18px; box-shadow: var(--shadow);
}
.edit-tools[hidden] { display: none; }
.edit-tools button { width: 46px; height: 42px; border-radius: 13px; background: #F4ECF7; font-size: 20px; }
.tray { padding: 8px 10px calc(env(safe-area-inset-bottom) + 10px); }
.tray[hidden] { display: none; }
.tray-it { flex: none; width: 58px; height: 58px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); font-size: 32px; display: grid; place-items: center; padding: 6px; }
.tray-it svg { width: 100%; height: 100%; }

/* ---------- Lucky's gestures ---------- */
.lucky.hug { animation: hug .9s ease-in-out; }
@keyframes hug { 30% { scale: 1.12 .9; } 60% { scale: .95 1.06; } }
.lucky.binky { animation: binky .9s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes binky { 0% { translate: 0 0; rotate: 0deg; } 45% { translate: 0 -30%; rotate: 200deg; } 100% { translate: 0 0; rotate: 360deg; } }
.lucky .ear.wiggle { animation: earWiggle .6s ease-in-out; }
@keyframes earWiggle { 25% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } }

/* ---------- living scene ---------- */
[data-tap] { transform-box: fill-box; transform-origin: center; cursor: pointer; }
[data-tap].tapped { animation: tapped .6s cubic-bezier(.3, 1.6, .5, 1); }
[data-tap="sun"].tapped { animation: sunSpin 1s ease-in-out; }
[data-tap="gong"].tapped { animation: gong .6s ease-in-out; }
@keyframes tapped { 40% { transform: scale(1.25); } }
@keyframes sunSpin { 50% { transform: scale(1.2) rotate(30deg); } }
@keyframes gong { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.float.drop { animation: dropFall 1.3s ease-in forwards; font-size: 20px; }
.float.petal-fx { font-size: 18px; }
@keyframes dropFall { to { transform: translate(calc(-50% + var(--dx)), 140px) rotate(160deg); opacity: 0; } }
.float.fly-up { font-size: 30px; animation: flyUp 2s ease-out forwards; }
@keyframes flyUp { 30% { transform: translate(-30%, -60px) rotate(-10deg); } to { transform: translate(40%, -220px) rotate(15deg); opacity: 0; } }
.float.ripple { width: 30px; height: 30px; border-radius: 50%; border: 4px solid #FF5C8A; animation: ripple .9s ease-out forwards; }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(6); opacity: 0; } }

.visitor { position: absolute; z-index: 6; font-size: 34px; width: 56px; height: 56px; display: grid; place-items: center; filter: drop-shadow(0 4px 6px #0003); }
.surprise {
  position: absolute; bottom: 5%; z-index: 6; font-size: 44px; transform: translateX(-50%);
  filter: drop-shadow(0 8px 12px #0004); animation: surprise 1.4s ease-in-out infinite;
}
@keyframes surprise { 0%, 60%, 100% { translate: 0 0; rotate: 0deg; } 70% { translate: 0 -14px; rotate: -10deg; } 85% { translate: 0 -18px; rotate: 10deg; } }

/* ---------- night ---------- */
.sleep-content { pointer-events: none; }
.sleep-content > * { pointer-events: auto; }
.shooting { position: absolute; top: 12%; left: -10%; z-index: 1; font-size: 30px; animation: shoot 14s linear infinite; }
.shooting.caught { animation-play-state: paused; filter: drop-shadow(0 0 12px #FFF3C4); }
@keyframes shoot { 0%, 70% { left: -10%; top: 12%; opacity: 0; } 72% { opacity: 1; } 88% { left: 110%; top: 30%; opacity: 1; } 100% { left: 110%; top: 30%; opacity: 0; } }

/* ---------- ninja breathing ---------- */
.breath { width: min(340px, 92vw); background: #FFF8FB; border-radius: 30px; padding: 22px; text-align: center; box-shadow: 0 20px 50px #4A2B4F55; }
.breath h2 { margin: 0 0 14px; }
.b-circle { width: 200px; height: 200px; margin: 0 auto; display: grid; place-items: center; }
.b-circle span {
  width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFD1EC, #FF7AB8 60%, #B78CFF);
  box-shadow: 0 0 40px #FF7AB888; transition: transform 4s ease-in-out;
}
.b-circle.in span { transform: scale(2.1); }
.b-circle.out span { transform: scale(1); }
.b-text { font-size: 22px; font-weight: 800; color: var(--pink-d); min-height: 58px; margin: 10px 0; }

/* ---------- level-up present ---------- */
.modal.reveal-host { padding: 0; background: radial-gradient(circle at 50% 42%, #7A4FD6 0%, #3B2466 60%, #24163F 100%); }
.reveal { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; }
.rays {
  position: absolute; left: 50%; top: 42%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax;
  background: repeating-conic-gradient(from 0deg, #FFFFFF22 0deg 10deg, transparent 10deg 24deg);
  animation: spin 24s linear infinite;
}
.rv-glow { position: absolute; left: 50%; top: 42%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(#FFD1EC, #FF5FA255 45%, transparent 70%); animation: glow 2.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { 50% { transform: scale(1.12); opacity: .8; } }
.rv-content { position: relative; z-index: 2; width: min(360px, 92vw); display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; padding: 20px; }
.rv-level { font-size: 30px; font-weight: 900; text-shadow: 0 3px 0 #E23D86, 0 8px 24px #0006; animation: popIn .6s cubic-bezier(.3, 1.6, .5, 1); }
.rv-level.small { font-size: 18px; opacity: .9; text-shadow: 0 2px 0 #E23D86; }
.rv-gift { font-size: 130px; line-height: 1; margin: 26px 0 8px; filter: drop-shadow(0 14px 22px #0008); animation: giftWiggle 1.3s ease-in-out infinite; }
.rv-gift span { display: block; transition: transform .45s cubic-bezier(.5, -0.4, .7, 1.4), opacity .45s; }
.rv-gift.open span { transform: scale(2.2) rotate(-12deg); opacity: 0; }
@keyframes giftWiggle { 0%, 60%, 100% { transform: rotate(0) translateY(0); } 70% { transform: rotate(-9deg) translateY(-8px); } 80% { transform: rotate(9deg) translateY(-12px); } 90% { transform: rotate(-5deg); } }
.rv-tap { font-weight: 800; font-size: 18px; opacity: .92; animation: pulse 1.2s ease-in-out infinite; }
.rv-kind { margin-top: 6px; background: #FFFFFF26; border: 1px solid #FFFFFF55; border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 14px; }
.rv-art { position: relative; width: 200px; margin: 14px 0 4px; display: grid; place-items: center; animation: rise .7s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 12px 22px #0007); }
.rv-art > svg { width: 100%; }
.rv-place { width: 170px; aspect-ratio: 4 / 5; position: relative; border-radius: 22px; overflow: hidden; border: 4px solid #fff; }
.rv-place svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv-decor { width: 160px; }
.rv-decor svg { width: 100%; height: auto; }
.rv-art .big-emoji { font-size: 110px; }
@keyframes rise { from { transform: translateY(40px) scale(.3); opacity: 0; } }
.spark { position: absolute; font-style: normal; font-size: 26px; animation: twinkleBig 1.6s ease-in-out infinite; }
.spark.s1 { top: 0; left: -4px; } .spark.s2 { top: 30%; right: -10px; animation-delay: .5s; } .spark.s3 { bottom: 4%; left: 8%; animation-delay: 1s; }
@keyframes twinkleBig { 50% { transform: scale(1.5) rotate(20deg); opacity: .5; } }
.reveal h2 { margin: 6px 0 2px; font-size: 26px; text-shadow: 0 2px 0 #0003; }
.rv-extra { margin: 2px 0; font-weight: 700; opacity: .9; }
.rv-next { margin: 6px 0 4px; font-size: 13.5px; opacity: .75; font-weight: 600; }
.reveal .btn:not(.pink) { background: #FFFFFF2E; color: #fff; box-shadow: none; }

/* ---------- today's plan ---------- */
.lvl { text-align: left; font: inherit; color: inherit; }
.lvl-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.plan { display: flex; gap: 2px; }
.plan i { font-style: normal; font-size: 13px; filter: grayscale(1); opacity: .35; }
.plan i.on { filter: none; opacity: 1; }
.plan-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.plan-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 16px; text-align: left; }
.plan-item.on { background: #E9FBEF; }
.pi-e { font-size: 28px; }
.pi-c { margin-left: auto; font-size: 20px; color: var(--muted); }

/* ---------- daytime rest: Lucky naps in his garden ---------- */
.sleep-ov.rest .sleep-bg { container-type: inline-size; }
.rest-decor { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; }
.rest-decor .pl { pointer-events: none; }
.rest-veil { position: absolute; inset: 0; background: linear-gradient(#B9A7FF66, #FFD6EC99); backdrop-filter: saturate(.8); }
.sleep-ov.rest .sleep-content { color: var(--ink); }
.sleep-ov.rest .sleep-content h1, .sleep-ov.rest .sleep-content > p { background: #FFFFFFD9; padding: 6px 14px; border-radius: 16px; }
.sleep-ov.rest .sleep-content h1 { margin-bottom: 8px; }
.sleep-ov.rest .shooting { display: none; }
.sleep-ov.rest .gear-sleep { background: #FFFFFFAA; }
.rest-note { margin-top: 8px !important; font-size: 14px; }
.float.snore { font-size: 28px; }

.lucky.sulk { animation: sulk .9s ease-in-out; }
@keyframes sulk { 20% { scale: -1 1; } 70% { scale: -1 1; rotate: -4deg; } 100% { scale: 1 1; rotate: 0deg; } }

/* ---------- review fixes ---------- */
.scene.washing, .scene.washing .lucky { touch-action: none; }

/* ---------- Lucky's questions ---------- */
.choices {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9;
  width: min(calc(100% - 24px), 380px); display: flex; flex-direction: column; gap: 8px;
}
.choices[hidden] { display: none; }
.choice {
  background: #fff; border-radius: 18px; padding: 10px 14px; text-align: left; box-shadow: 0 4px 0 #E6D6EA, var(--shadow);
  display: flex; flex-direction: column; gap: 1px; animation: popIn .35s cubic-bezier(.3, 1.6, .5, 1) backwards;
}
.choice:nth-child(2) { animation-delay: .06s; } .choice:nth-child(3) { animation-delay: .12s; } .choice:nth-child(4) { animation-delay: .18s; }
.choice b { font-size: 17px; }
.choice small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.choice:active { transform: scale(.97); }
.choice.wrong { opacity: .45; animation: shake .4s; }

/* ---------- riddle frog ---------- */
.frog {
  position: absolute; left: 6%; bottom: 4%; z-index: 6; font-size: 50px; filter: drop-shadow(0 6px 8px #0003);
  animation: frogIdle 2.2s ease-in-out infinite;
}
.frog.in { animation: frogIn .8s cubic-bezier(.3, 1.4, .5, 1); }
.frog.jump { animation: frogJump .6s cubic-bezier(.3, 1.6, .5, 1); }
.frog.away { animation: frogAway .9s ease-in forwards; }
@keyframes frogIn { from { transform: translate(-150%, -60%) scale(.6); } }
@keyframes frogIdle { 50% { transform: translateY(-6px) scaleY(1.05); } }
@keyframes frogJump { 40% { transform: translateY(-40%) rotate(-8deg); } }
@keyframes frogAway { 40% { transform: translate(-40%, -60%); } to { transform: translate(-220%, 0); opacity: 0; } }
.bubble.b-frog { left: 42%; background: #E6F9E2; }
.bubble.b-frog::after { background: #E6F9E2; left: 18%; }

/* ---------- parents ---------- */
.turbo-badge { background: linear-gradient(90deg, #FFB400, #FF5FA2); color: #fff; font-weight: 900; font-size: 11px; padding: 5px 7px; border-radius: 10px; letter-spacing: .5px; }
.turbo-badge[hidden] { display: none; }
.pw-card .pw { width: 100%; border: 0; background: #F4ECF7; border-radius: 14px; padding: 13px 14px; font-size: 18px; text-align: center; margin-top: 4px; }
.pw-card .pw.shake { animation: shake .4s; }
.mode-tabs { margin: 4px 0 8px; }
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #FFF3DA; border-radius: 14px; padding: 9px 4px; font-size: 12.5px; font-weight: 700; }
.tool span { font-size: 22px; }
.frog.asking { bottom: auto; top: 44%; left: 4%; transition: top .5s, left .5s; }
.choice { padding: 8px 13px; }
.choice b { font-size: 16px; }

/* ---------- worlds: tappable details ---------- */
.snow { animation: snowFall 9s linear infinite; }
.snow.p1 { animation-delay: -1s; } .snow.p2 { animation-delay: -2.2s; } .snow.p3 { animation-delay: -3.4s; } .snow.p4 { animation-delay: -4.6s; }
.snow.p5 { animation-delay: -5.8s; } .snow.p6 { animation-delay: -7s; } .snow.p7 { animation-delay: -8.2s; } .snow.p8 { animation-delay: -.5s; } .snow.p9 { animation-delay: -6.4s; }
@keyframes snowFall { from { transform: translate(0, 0); } to { transform: translate(-30px, 720px); } }
.waves { animation: waves 6s ease-in-out infinite alternate; }
@keyframes waves { to { transform: translateX(-30px); } }
.gull { animation: gull 14s linear infinite; }
@keyframes gull { from { transform: translateX(-200px); } to { transform: translateX(300px); } }
.comet { animation: comet 7s linear infinite; }
@keyframes comet { 0%, 80% { transform: translate(-100px, -40px); opacity: 0; } 85% { opacity: .9; } 100% { transform: translate(340px, 110px); opacity: 0; } }
[data-tap="crab"].tapped { animation: crab 1.2s ease-in-out; }
@keyframes crab { 25% { transform: translateX(-40px); } 50% { transform: translateX(20px); } 75% { transform: translateX(-20px); } }
[data-tap="planet"].tapped { animation: sunSpin 1.2s ease-in-out; }
[data-tap="bamboo"].tapped { transform-origin: 50% 100%; animation: sway 1s ease-in-out; }
[data-tap="sheep"].tapped { animation: tapped .5s cubic-bezier(.3, 1.6, .5, 1) 2; }
@keyframes sway { 30% { transform: rotate(-4deg); } 70% { transform: rotate(3deg); } }
.flame { transform-box: fill-box; transform-origin: 50% 0; animation: flame .3s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scaleY(.7); } }

/* ---------- collection ---------- */
.coll-tabs { overflow-x: auto; }
.coll-tabs .tab { font-size: 12.5px; padding: 9px 2px; white-space: nowrap; }
.ward-top { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 8px 12px; box-shadow: var(--shadow); margin-bottom: 12px; }
.ward-preview { width: 92px; flex: none; }
.ward-preview svg { width: 100%; overflow: visible; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { background: #F4ECF7; border-radius: 12px; padding: 7px 10px; font-size: 13px; font-weight: 700; }
.chip.on { background: var(--pink); color: #fff; }
.tile.rare { box-shadow: 0 0 0 2px #8FD8FF, var(--shadow); }
.tile.gold { box-shadow: 0 0 0 2px #FFD23F, var(--shadow); }
.tile.sel.rare, .tile.sel.gold { box-shadow: 0 0 0 3px var(--pink), var(--shadow); }
.tile.wiggle, .stk.wiggle, .badge.wiggle { animation: wiggle .5s; }
.tile-art svg { overflow: visible; }
.album { background: #fff; border-radius: 20px; padding: 10px 12px; box-shadow: var(--shadow); margin-top: 12px; }
.album.done { box-shadow: 0 0 0 3px #3BAA66, var(--shadow); }
.album-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.album-head span { color: var(--muted); font-size: 13px; font-weight: 700; }
.album-prize { margin-left: auto; font-size: 12px !important; }
.album .stickers { gap: 6px; }
.album .stk { font-size: 26px; border-radius: 12px; }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #F4ECF7; border-radius: 16px; padding: 10px 6px; text-align: center; font-size: 12px; }
.badge .b-emoji { font-size: 32px; filter: grayscale(1); opacity: .4; }
.badge.on { background: #fff; box-shadow: var(--shadow); }
.badge.on .b-emoji { filter: none; opacity: 1; }
.badge small { color: var(--muted); font-weight: 700; }
.b-bar { width: 80%; height: 6px; border-radius: 4px; background: #E6DAE8; overflow: hidden; }
.b-bar i { display: block; height: 100%; background: var(--pink); }
.rv-kind.rare { background: #8FD8FF55; border-color: #8FD8FF; }
.rv-kind.gold { background: #FFD23F55; border-color: #FFD23F; color: #FFF3A8; }

/* ---------- humour ---------- */
.lucky.sneeze { animation: sneezeAnim .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sneezeAnim { 20% { scale: .92 1.08; } 45% { translate: 0 -6%; scale: 1.1 .9; rotate: -4deg; } }
.lucky.heli { animation: heli 2.4s ease-in-out; }
/* propeller: both ears spin around the top of the head (SVG user units) */
.lucky.heli .ear { transform-box: view-box; transform-origin: 100px 50px; animation: propeller .32s linear infinite; }
@keyframes heli { 25% { translate: 0 -26%; } 60% { translate: 8% -30%; } 85% { translate: -4% -12%; } 100% { translate: 0 0; } }
@keyframes propeller { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.lucky.roll { animation: roll 1.4s ease-in-out; }
@keyframes roll { 0% { rotate: 0deg; } 20% { rotate: -15deg; } 60% { rotate: 360deg; translate: 0 -8%; } 100% { rotate: 360deg; translate: 0 0; } }
.lucky.chase { animation: chase 2s ease-in-out; }
@keyframes chase { 15% { scale: -1 1; } 30% { scale: 1 1; } 45% { scale: -1 1; } 60% { scale: 1 1; rotate: 8deg; } 100% { scale: 1 1; rotate: 0deg; } }
.lucky.rumble { animation: rumbleAnim .7s ease-in-out; }
@keyframes rumbleAnim { 20%, 60% { translate: -1% 0; scale: 1.02 .98; } 40%, 80% { translate: 1% 0; scale: .98 1.02; } }
.lucky.hic { animation: hicAnim .3s ease-out; }
@keyframes hicAnim { 50% { translate: 0 -5%; } }
.dog-body.sneeze { animation: dogSneeze .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dogSneeze { 30% { transform: scale(.9, 1.1); } 55% { transform: scale(1.1, .9) rotate(-5deg); } }
.flies { position: absolute; left: 50%; bottom: 40%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.flies span { position: absolute; font-size: 18px; animation: fly 3s linear infinite; }
.flies span:nth-child(2) { animation-duration: 2.3s; animation-direction: reverse; }
@keyframes fly { from { transform: rotate(0deg) translateX(70px) rotate(0deg); } to { transform: rotate(360deg) translateX(70px) rotate(-360deg); } }
.pw-card .pw + .pw { margin-top: 8px; }
.pw-err { min-height: 18px; margin: 6px 0 0 !important; color: #D0455B !important; font-size: 13px; }

.pw-card .pw-forgot { margin-top: 6px; font-size: 14px; }

/* ---------- question: Lucky above the answer choices (--askW: what fits under the bubble, set by fitAsk) ---------- */
.scene.asking .lucky { --lw: var(--askW, min(40%, 190px)); bottom: calc(var(--choicesH, 180px) + 14px); }
.scene.asking .dog { width: min(24%, 110px, var(--askW, 110px)); bottom: calc(var(--choicesH, 180px) + 14px); }
.scene.asking .pill, .scene.asking .gift { display: none; }
.choices.compact { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.choices.compact .choice { flex: 1 1 28%; align-items: center; text-align: center; padding: 8px 6px; }
.choices.compact .choice b { font-size: 15px; }
.choices.compact.c4 .choice { flex-basis: 40%; }
/* the rainbow covers the sky: let taps reach the sun and clouds (it stays draggable in Decorate) */
body:not(.editing) .dec-rainbow { pointer-events: none; }

/* ---------- Lucky's antics: props layer, poses and scene effects ---------- */
/* the finger can stroke Lucky and hold things without iOS taking it for a scroll */
.lucky, .bg [data-tap], .dog-body { touch-action: none; }
.l-art, .l-props, .l-back { position: absolute; inset: 0; }
.l-props { pointer-events: none; z-index: 1; }
.l-back { pointer-events: none; overflow: visible; }
.lucky .nose, .lucky .feet { transform-box: fill-box; transform-origin: 50% 50%; }
.lucky.p-eyes .w-face, .lucky.p-eyes .w-under, .lucky.p-head .w-head { opacity: 0; }
.pp { transform-box: fill-box; transform-origin: 50% 50%; }
.pp-in { animation: ppIn .35s cubic-bezier(.3, 1.6, .5, 1); }
.pp-out { animation: ppOut .3s ease-in forwards; }
@keyframes ppIn { from { transform: scale(.2); opacity: 0; } }
@keyframes ppOut { to { transform: scale(.3); opacity: 0; } }
.pp-net { transform-box: view-box; transform-origin: 150px 176px; animation: netSwing .32s ease-in-out 4 alternate; }
@keyframes netSwing { from { transform: rotate(-35deg); } to { transform: rotate(25deg); } }
.pp-orbit { transform-box: fill-box; transform-origin: 50% 50%; animation: spin .9s linear infinite; }
.pp-drip { animation: drip 1s ease-in infinite; }
@keyframes drip { to { transform: translateY(9px); opacity: .35; } }
.pp-ring { transform-box: fill-box; transform-origin: 50% 50%; animation: ringWobble .5s ease-in-out infinite; }
@keyframes ringWobble { 0%, 100% { transform: translateX(-9px) rotate(-3deg); } 50% { transform: translateX(9px) rotate(3deg); } }

.lucky.walk { animation: walk .3s ease-in-out infinite; }
@keyframes walk { 50% { translate: 0 -5%; rotate: 2deg; } }
.lucky.sniff { animation: leanIn 1.5s ease-in-out; }
.lucky.sniff .nose { animation: noseTwitch .16s ease-in-out 8; }
@keyframes leanIn { 30%, 80% { rotate: -6deg; translate: -2% 3%; } }
@keyframes noseTwitch { 50% { transform: scale(1.25, .85); } }
.lucky.squash { animation: squash .7s ease-out; }
@keyframes squash { 30% { scale: 1.12 .85; translate: 0 5%; } 60% { scale: .96 1.05; } }
.lucky.startle { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
.lucky.startle .ear-l { animation: earUpL 1s ease-out; }
.lucky.startle .ear-r { animation: earUpR 1s ease-out; }
@keyframes earUpL { 15%, 70% { transform: rotate(150deg); } }
@keyframes earUpR { 15%, 70% { transform: rotate(-150deg); } }
.lucky.kick { animation: kick 1s ease-in-out; }
@keyframes kick { 20% { rotate: -8deg; } 45% { rotate: 14deg; translate: 8% -8%; } 75% { rotate: 0deg; translate: 0 0; } }
.lucky.levitate { animation: levitate 4.2s ease-in-out; }
.lucky.levitate .l-art { filter: drop-shadow(0 0 14px #FFFFFFCC); }
@keyframes levitate { 20%, 80% { translate: 0 -12%; } 50% { translate: 0 -15%; } }
.lucky.bask { animation: bask 3.8s ease-in-out; }
.lucky.bask .l-art { filter: drop-shadow(0 0 18px #FFE066); }
@keyframes bask { 15%, 85% { scale: 1.06 .92; translate: 0 4%; } }
.lucky.wet .l-art { filter: saturate(.7) brightness(.95); }
.lucky.wet .ear { animation: none; transform: translateY(6px) scaleY(1.06); }
.lucky.shakeOff { transform-origin: 50% 90%; animation: shakeOff 1s ease-in-out; }
@keyframes shakeOff { 10% { rotate: -14deg; } 25% { rotate: 14deg; } 40% { rotate: -12deg; } 55% { rotate: 10deg; } 70% { rotate: -6deg; } 85% { rotate: 4deg; } }
.lucky.shiver, .lucky.scared { animation: shiver .12s linear infinite; }
@keyframes shiver { 25% { translate: -1% 0; } 75% { translate: 1% 0; } }
.lucky.dance { animation: dance .55s ease-in-out 4; }
@keyframes dance { 25% { rotate: -10deg; translate: -4% -4%; } 50% { rotate: 0deg; translate: 0 0; } 75% { rotate: 10deg; translate: 4% -4%; } }
.lucky.bigjump { animation: bigjump 1.1s ease-in-out; }
@keyframes bigjump { 40% { translate: 0 -45%; scale: .95 1.08; } 70% { translate: 0 0; scale: 1.1 .9; } }
.lucky.paddle { animation: paddle .6s ease-in-out 3; }
@keyframes paddle { 25% { translate: -3% -6%; rotate: -5deg; } 50% { translate: 0 0; rotate: 0deg; } 75% { translate: 3% -6%; rotate: 5deg; } }
.lucky.clap { animation: clap .7s ease-in-out; }
@keyframes clap { 25%, 75% { translate: 0 -6%; } 50% { translate: 0 0; } }
.lucky.wave { transform-origin: 50% 100%; animation: waveHi 1.2s ease-in-out; }
@keyframes waveHi { 25% { rotate: -6deg; } 50% { rotate: 6deg; } 75% { rotate: -6deg; } }
.lucky.throw { animation: throwIt .6s ease-in-out; }
@keyframes throwIt { 30% { rotate: -10deg; translate: -3% 0; } 60% { rotate: 8deg; translate: 3% 0; } }
.lucky.proud { animation: proud 1.2s ease-in-out; }
@keyframes proud { 30%, 70% { scale: 1.08; translate: 0 -3%; } }
.lucky.skate { animation: skate 1s ease-in-out; }
@keyframes skate { 30% { rotate: -10deg; } 70% { rotate: 8deg; } }
.lucky.pirouette { animation: pirouette .75s ease-in-out 2; }
@keyframes pirouette { 25% { scale: .08 1; } 50% { scale: -1 1; } 75% { scale: -.08 1; } 100% { scale: 1 1; } }
.lucky.slip { animation: slip 1.8s ease-in-out; }
@keyframes slip { 15% { rotate: -18deg; translate: -6% 0; } 35% { rotate: 24deg; translate: 2% 6%; scale: 1.06 .86; } 70% { rotate: 0deg; translate: 0 5%; scale: 1.08 .86; } 100% { rotate: 0deg; translate: 0 0; scale: 1 1; } }
.lucky.zeroG { animation: zeroG 3.5s ease-in-out; }
@keyframes zeroG { 35% { translate: 0 -24%; rotate: -14deg; } 65% { translate: 2% -28%; rotate: 12deg; } 100% { translate: 0 0; rotate: 0deg; } }
.lucky.hula { animation: hula .5s ease-in-out infinite; }
@keyframes hula { 25% { translate: -3% 0; rotate: -3deg; } 75% { translate: 3% 0; rotate: 3deg; } }
.lucky.moonjump { animation: moonjump 2.1s ease-in-out; }
@keyframes moonjump { 45% { translate: 0 -48%; rotate: -10deg; } 55% { translate: 0 -48%; rotate: 10deg; } 100% { translate: 0 0; rotate: 0deg; } }
.lucky.jig { animation: jig 1.9s linear; }
@keyframes jig {
  12% { translate: 0 -9%; rotate: -7deg; } 25% { translate: 0 0; rotate: 0deg; } 37% { translate: 0 -9%; rotate: 7deg; } 50% { translate: 0 0; rotate: 0deg; }
  62% { translate: 0 -9%; rotate: -7deg; } 75% { translate: 0 0; rotate: 0deg; } 87% { translate: 0 -9%; rotate: 7deg; }
}
.lucky.strain { animation: strain .25s ease-in-out infinite; }
@keyframes strain { 50% { scale: 1.05 .92; translate: .5% 0; } }
.lucky.bow { animation: bowDown 1.5s ease-in-out; }
.lucky.bow .head { animation: headDip 1.5s ease-in-out; }
@keyframes bowDown { 30%, 70% { scale: 1 .92; translate: 0 5%; } }
@keyframes headDip { 30%, 70% { transform: translateY(12px) scale(.97); } }
.lucky.vanish { opacity: .12; }
.lucky.hiding { opacity: .35; scale: .88; }
.lucky.intohouse { opacity: 0; scale: .4; }
.lucky.blastoff { animation: blastoff 1.2s ease-in forwards; }
@keyframes blastoff { 20% { translate: 0 4%; } to { translate: 0 -260%; } }
.lucky.land { animation: land .9s ease-out; }
@keyframes land { from { translate: 0 -120%; } 70% { translate: 0 3%; scale: 1.1 .9; } to { translate: 0 0; } }
.lucky.glow .l-art { filter: drop-shadow(0 0 16px #FFB347) brightness(1.08); }
.lucky.listen .head { animation: listenTilt 3s ease-in-out; }
@keyframes listenTilt { 20%, 80% { transform: rotate(-8deg); } }
.lucky.think .head { animation: thinkTilt 2.4s ease-in-out infinite; }
@keyframes thinkTilt { 50% { transform: rotate(-5deg); } }
.lucky.balance { animation: balance .8s ease-in-out infinite; }
@keyframes balance { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.lucky.sway { transform-origin: 50% 100%; animation: swayL 1.3s ease-in-out; }
@keyframes swayL { 30% { rotate: -7deg; } 70% { rotate: 6deg; } }
.lucky.climb { animation: climb 1.8s ease-in-out; }
@keyframes climb { 20% { translate: 0 -8%; } 40% { translate: 0 -4%; } 60% { translate: 0 -12%; } 80% { translate: 0 -6%; } }
/* Lucky's own body parts */
.lucky.pat, .lucky.jiggle { animation: hop .5s cubic-bezier(.3, 1.6, .5, 1); }
.lucky.pat .head { animation: headPat .5s ease-out; }
@keyframes headPat { 40% { transform: scale(1.05, .9); } }
.lucky.jiggle .body { animation: jiggle .6s ease-out; }
.lucky.drum .body { animation: jiggle .45s ease-out 2; }
@keyframes jiggle { 20% { transform: scale(1.06, .94); } 45% { transform: scale(.96, 1.04); } 70% { transform: scale(1.02, .98); } }
.lucky.paws .feet { animation: pawWiggle .5s ease-in-out; }
@keyframes pawWiggle { 25% { transform: translateY(-3px) rotate(-3deg); } 75% { transform: translateY(-3px) rotate(3deg); } }
.lucky.thump { animation: thump .5s ease-out; }
@keyframes thump { 25%, 75% { scale: 1.03 .95; translate: 0 2%; } 50% { scale: 1 1; translate: 0 0; } }
.lucky.melt { animation: melt 2.4s ease-in-out; }
.lucky.melt .ear-l { animation: earMeltL 2.4s ease-in-out; }
.lucky.melt .ear-r { animation: earMeltR 2.4s ease-in-out; }
@keyframes melt { 25%, 80% { scale: 1.04 .93; translate: 0 3%; } }
@keyframes earMeltL { 25%, 80% { transform: rotate(10deg) translateY(4px); } }
@keyframes earMeltR { 25%, 80% { transform: rotate(-10deg) translateY(4px); } }
.lucky.boop .nose { animation: boop .22s ease-in-out 3; }
@keyframes boop { 50% { transform: scale(1.35); } }
.lucky.kiss { animation: kiss 1s ease-in-out; }
@keyframes kiss { 40%, 60% { scale: 1.08; translate: 0 2%; } }
.lucky.purr { animation: purr .08s linear 14; }
@keyframes purr { 50% { translate: .5% 0; } }

/* things flying around the scene */
.fly-fx { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; line-height: 1; }
.rain-cloud { filter: drop-shadow(0 4px 6px #0002); }
.pop-stay { animation: popStay var(--ms, 2s) ease-in-out forwards; }
@keyframes popStay { 0% { transform: translate(-50%, -50%) scale(0); } 15% { transform: translate(-50%, -50%) scale(1.25); } 25%, 80% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; } }
.pop-rise { animation: popRise var(--ms, 2s) ease-in-out forwards; }
@keyframes popRise { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20%, 80% { transform: translate(-50%, -100%) scale(1); opacity: 1; } 100% { transform: translate(-50%, 0) scale(.6); opacity: 0; } }
.fx-rainbow { position: absolute; left: 6%; right: 6%; top: 14%; pointer-events: none; animation: rainbowIn var(--ms, 4s) ease-in-out forwards; }
.fx-rainbow svg { width: 100%; height: auto; display: block; }
@keyframes rainbowIn { 0% { opacity: 0; transform: translateY(20px) scale(.9); } 15%, 80% { opacity: .9; transform: none; } 100% { opacity: 0; } }
.sky-pet { position: absolute; left: 56%; top: 9%; font-size: 64px; line-height: 1; filter: brightness(0) invert(1) drop-shadow(0 4px 8px #0002); opacity: .92; animation: skyDrift 18s ease-in-out infinite alternate; cursor: pointer; }
@keyframes skyDrift { to { translate: -45% 12px; } }

/* scene things */
[data-tap].bloom { animation: bloom 1.8s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bloom { 30%, 70% { transform: scale(1.9); } }
[data-tap="crab"].crabdance { animation: crabDance 2.2s ease-in-out; }
@keyframes crabDance { 12%, 37%, 62% { transform: rotate(-12deg) translateY(-6px); } 25%, 50%, 75% { transform: rotate(12deg); } 87% { transform: rotate(-8deg); } }
[data-tap="lamp"].lit { animation: litPulse 4.2s ease-in-out; }
@keyframes litPulse { 10%, 90% { filter: drop-shadow(0 0 10px #FFD23F) brightness(1.35); } }
[data-tap].swingfast { transform-origin: 50% 0; animation: swing .6s ease-in-out 3; }
.pl.launch .pl-in { animation: launch 3.6s ease-in-out; }
@keyframes launch { 6% { transform: translateX(-2px); } 12% { transform: translateX(2px); } 18% { transform: none; } 45%, 60% { transform: translateY(-900%); opacity: 0; } 62% { transform: translateY(-900%); opacity: 1; } 95% { transform: translateY(3%); } }
.pl.floaty .pl-in { animation: floaty 2.4s ease-in-out; }
@keyframes floaty { 50% { transform: translateY(-40%) rotate(-6deg); } }
.dog-body.dogspin { animation: dogSpin 1.4s ease-in-out; }
@keyframes dogSpin { 25%, 75% { scale: -1 1; } 50% { scale: 1 1; } }
.dog-body.belly { animation: belly 2s ease-in-out; }
@keyframes belly { 20%, 80% { rotate: 180deg; translate: 0 18%; } 35%, 65% { rotate: 170deg; translate: 0 18%; } 50% { rotate: 190deg; translate: 0 18%; } }

/* ---------- ninja missions ---------- */
.ninja-mission {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 16px);
  background: linear-gradient(#FFE3F0, #E9DDFF); text-align: center;
}
.m-head { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.m-skill { background: #fff; border-radius: 14px; padding: 8px 12px; font-weight: 800; font-size: 14px; box-shadow: var(--shadow); }
.m-top { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.m-lucky { position: relative; width: min(40vw, 170px); aspect-ratio: 200 / 210; }
.m-lucky svg { width: 100%; height: 100%; overflow: visible; }
.m-lucky .head, .m-lucky .body { transform-box: fill-box; transform-origin: 50% 100%; }
.m-lucky .ear { transform-box: fill-box; transform-origin: 50% 0; }
.m-say { background: #fff; border-radius: 20px; padding: 10px 14px; box-shadow: var(--shadow); max-width: 340px; min-height: 46px; cursor: pointer; }
.m-main { font-size: 18px; font-weight: 700; line-height: 1.3; }
.m-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; font-weight: 500; }
.m-sub:empty { display: none; }
.m-stage { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; }
.m-emoji { font-size: 64px; line-height: 1.1; }
.m-note { color: var(--muted); font-weight: 600; font-size: 14px; max-width: 300px; margin: 0; }
.pop { animation: popIn .35s cubic-bezier(.3, 1.6, .5, 1); }
.m-big { font-size: 104px; font-weight: 900; color: var(--pink-d); line-height: 1; }
.m-of { color: var(--muted); font-weight: 800; font-size: 18px; }
.m-ring { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow);
  background: conic-gradient(var(--pink) calc(var(--p) * 1turn), #fff 0); transition: background .3s; }
.m-ring span { width: 118px; height: 118px; border-radius: 50%; background: #FFF6FB; display: grid; place-items: center; font-size: 48px; font-weight: 900; color: var(--pink-d); }
.m-sign { font-size: 38px; font-weight: 900; padding: 22px 28px; border-radius: 28px; color: #fff; box-shadow: var(--shadow); animation: popIn .3s cubic-bezier(.3, 1.6, .5, 1); }
.m-sign.go { background: #3CBF6B; }
.m-sign.stop { background: #4D9BFF; }
.m-slots { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.m-slot { width: 90px; height: 104px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); border: 3px dashed #FFB3D6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.m-slot span { font-size: 40px; }
.m-slot small { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.m-slot.on { border: 3px solid #3CBF6B; animation: popIn .35s cubic-bezier(.3, 1.6, .5, 1); }
.m-pal { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72%; overflow-y: auto; z-index: 3; background: #fff; border-radius: 26px 26px 0 0;
  padding: 14px 12px calc(env(safe-area-inset-bottom) + 14px); box-shadow: 0 -8px 30px #a03c7833; animation: mSlide .3s ease-out; }
@keyframes mSlide { from { transform: translateY(100%); } }
.m-pal h3 { margin: 0 0 10px; font-size: 17px; }
.m-pal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-pal-it { background: #F4ECF7; border-radius: 16px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.m-pal-it span { font-size: 30px; }
.m-pal-it b { font-size: 13px; }
.m-pal-it small { font-size: 11px; color: var(--muted); font-weight: 600; }
.m-pal-it.sel { background: #FFD6EA; box-shadow: inset 0 0 0 3px var(--pink); }
.m-pal-it.wrong { animation: shake .4s; opacity: .5; }
.m-pal .m-btns { margin: 12px auto 0; }
.m-btns { display: flex; flex-direction: column; gap: 8px; width: min(100%, 340px); }
.m-btns .btn { width: 100%; }
.m-btns .btn:disabled { opacity: .6; }
.m-btns .btn.ready { animation: pulse 1.2s ease-in-out infinite; }
/* Lucky does the moves */
.m-lucky.mv-hop { animation: mvHop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mvHop { 40% { translate: 0 -18%; } }
.m-lucky.mv-star { animation: mvStar .6s ease-out; }
.m-lucky.mv-star .ear-l { animation: earUpL .6s ease-out; }
.m-lucky.mv-star .ear-r { animation: earUpR .6s ease-out; }
@keyframes mvStar { 40% { scale: 1.22 .9; translate: 0 -10%; } }
.m-lucky.mv-squat { animation: mvSquat 2s ease-in-out; }
@keyframes mvSquat { 50% { scale: 1.08 .8; translate: 0 10%; } }
.m-lucky.mv-punch { animation: mvPunch .4s ease-out; }
@keyframes mvPunch { 40% { rotate: 10deg; translate: 6% 0; } }
.m-lucky.mv-frog { animation: mvFrog 1s ease-in-out; }
@keyframes mvFrog { 20% { scale: 1.1 .85; translate: 0 6%; } 55% { translate: 0 -30%; scale: .95 1.1; } }
.m-lucky.mv-run { animation: mvRun .3s ease-in-out; }
@keyframes mvRun { 50% { translate: 0 -8%; } }
.m-lucky.ps-oneleg { animation: balance 1.4s ease-in-out infinite; }
.m-lucky.ps-plane { rotate: 12deg; animation: balance 1.6s ease-in-out infinite; }
.m-lucky.ps-stretch { scale: .95 1.1; translate: 0 -5%; transition: scale .6s, translate .6s; }
.m-lucky.ps-statue { filter: grayscale(1) contrast(.9); }
.m-lucky.ps-sip::after { content: "🥛"; position: absolute; right: 2%; bottom: 14%; font-size: 36px; }
.m-lucky.ps-sneak { animation: sneakStep 1s ease-in-out infinite; }
@keyframes sneakStep { 25% { translate: -4% -2%; rotate: -4deg; } 75% { translate: 4% -2%; rotate: 4deg; } }
.m-lucky.ps-frozen { filter: hue-rotate(160deg) saturate(.6) brightness(1.1); }
.m-lucky.ps-frozen::after { content: "❄️"; position: absolute; right: 4%; top: 4%; font-size: 28px; }
.m-lucky.ps-dance { animation: dance .55s ease-in-out infinite; }
.m-lucky.ps-listen .head { animation: listenTilt 3s ease-in-out infinite; }
/* dojo */
.m-pick { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border-radius: 18px; padding: 10px 12px; margin-top: 8px; box-shadow: 0 3px 0 #E6D6EA, var(--shadow); }
.m-pick:active { transform: scale(.98); }
.mp-text { display: flex; flex-direction: column; gap: 3px; }
.mp-skill { font-size: 12px; font-weight: 800; color: var(--pink-d); }
.skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.skill { display: flex; flex-direction: column; align-items: center; background: #F4ECF7; border-radius: 14px; padding: 8px 4px; }
.skill span { font-size: 24px; filter: grayscale(1); opacity: .5; }
.skill.on { background: #fff; box-shadow: var(--shadow); }
.skill.on span { filter: none; opacity: 1; }
.skill b { font-size: 18px; }
.skill small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.ninja-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; background: #FFF6E4; border-radius: 14px; margin-top: 8px; }
.stamp-mini { flex: none; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stamp-mini span { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #E23D5B; display: grid; place-items: center; font-size: 22px; transform: rotate(-8deg); background: #FFF0F2; }
.stamp-mini small { font-size: 12px; }
.stamp-card .scroll-paper { width: 180px; height: 120px; margin: 0 auto 8px; border-radius: 12px; background: linear-gradient(#FFF6E4, #F7E3C0); box-shadow: inset 0 0 0 3px #E9CFA0; display: grid; place-items: center; }
.stamp-card .stamp { width: 84px; height: 84px; border-radius: 50%; border: 5px solid #E23D5B; display: grid; place-items: center; font-size: 40px; color: #E23D5B; background: #FFF0F2cc;
  animation: stampIn .5s cubic-bezier(.5, 1.8, .5, 1) .35s backwards; transform: rotate(-10deg); }
@keyframes stampIn { from { transform: scale(2.4) rotate(-30deg); opacity: 0; } }
.stamp-card .skill-up { font-weight: 800; color: var(--pink-d); }
.stamp-card .dots { justify-content: center; margin: 6px 0 12px; }

/* ---------- parent password ---------- */
.pw-row { display: flex; gap: 6px; align-items: center; }
.pw-row .pw-new { flex: 1; min-width: 0; border: 0; background: #F4ECF7; border-radius: 14px; padding: 12px; font-size: 17px; }
.pw-row .btn { flex: none; padding: 11px 14px; }
.pw-change .pw-err:empty { display: none; }

/* ---------- Tali's jokes ---------- */
.joke-btn {
  position: absolute; top: -14%; right: 2%; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow); font-size: 26px; display: grid; place-items: center;
  animation: bob 1.8s ease-in-out infinite;
}
.scene.asking .joke-btn { display: none; }
.lucky.lol { animation: lol .25s ease-in-out 4; }
@keyframes lol { 50% { scale: 1.05 .94; translate: 0 2%; } }
.joke-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.joke-card { background: #fff; border-radius: 18px; padding: 10px 14px; text-align: left; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.joke-card:active { transform: scale(.98); }
.jk-q { font-size: 15px; font-weight: 600; }
.jk-a { font-size: 16px; color: var(--pink-d); }
.jk-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.35; }
.jokes-empty { font-weight: 600; line-height: 1.4; }

/* ---------- idioms acted out ---------- */
.lucky.bigears .ear { animation: bigEars 1.9s ease-in-out; }
@keyframes bigEars { 20%, 80% { transform: scale(1.3, 1.25); } }
.flop { animation: flop var(--ms, 2s) ease-in-out forwards; }
@keyframes flop { 0% { transform: translate(-50%, -50%) scale(0); } 10% { transform: translate(-50%, -50%) scale(1); } 20%, 40%, 60% { transform: translate(-50%, -90%) rotate(-25deg); } 30%, 50%, 70% { transform: translate(-50%, -50%) rotate(20deg); } 85% { transform: translate(-50%, -50%) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; } }
.blue-moon { filter: hue-rotate(185deg) saturate(2.2) drop-shadow(0 0 14px #8FD8FF); }
.twist-btn { right: calc(2% + 52px); }
.book-chips { justify-content: center; margin: 2px 0 8px; }
.twist-card .jk-a { font-size: 17px; }
.tw-speeds { display: flex; gap: 8px; margin-top: 4px; }
.tw-speed { width: 44px; height: 38px; border-radius: 12px; background: #F4ECF7; font-size: 20px; }
.idiom-card { flex-direction: row; align-items: center; gap: 12px; }
.id-e { font-size: 34px; flex: none; min-width: 48px; text-align: center; }
.id-txt { display: flex; flex-direction: column; gap: 3px; }

/* ---------- Decorate tray: categories and a grid ---------- */
.tray { padding: 6px 10px calc(env(safe-area-inset-bottom) + 8px); }
.tray-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tray-cats { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tray-cats::-webkit-scrollbar { display: none; }
.tray-cat { flex: none; padding: 8px 11px; border-radius: 14px; background: #F4ECF7; font-size: 13px; font-weight: 800; white-space: nowrap; }
.tray-cat.on { background: var(--pink); color: #fff; }
.tray-cat { min-width: 42px; font-size: 17px; padding: 6px 10px; }
.tray-cat .tc-label { font-size: 13px; }
.tray-cat:not(.on) .tc-label { display: none; }
.tray-top .tray-done { min-width: 48px; font-size: 18px; }
.tray-top .tray-done { flex: none; padding: 9px 13px; }
.tray-note { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); grid-auto-rows: min-content; align-content: start; gap: 8px;
  height: 132px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 4px 6px; -webkit-overflow-scrolling: touch; }
.tray-grid .tray-note { grid-column: 1 / -1; margin: 0; }
.tray-h { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--muted); margin: 2px 0 -2px; }
.tray-grid .tray-it { position: relative; width: auto; height: 56px; }
.tray-it.super { background: linear-gradient(#FFF8D6, #fff); box-shadow: 0 0 0 2px #FFD23F, 0 0 12px 2px #FFD23F99; }
.tray-it.super::after { content: "✨"; position: absolute; top: -7px; left: -5px; font-size: 14px; }
.tray-it.locked { opacity: .45; filter: grayscale(1); }
.tray-n { position: absolute; right: -5px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--pink); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; display: grid; place-items: center; }
.tray-lock { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 10px; font-style: normal; font-weight: 800; color: var(--ink); }
/* super things glow softly on the scene too */
.pl.super { animation: superGlow 2.8s ease-in-out infinite alternate; }
@keyframes superGlow { from { filter: drop-shadow(0 0 2px #FFE06666); } to { filter: drop-shadow(0 0 10px #FFD23Fcc); } }

/* ---------- super things in action ---------- */
.pl.juggle .pl-in { animation: juggle 1.2s ease-out; }
@keyframes juggle { 35% { transform: translateY(-230%) rotate(200deg); } 70% { transform: translateY(0) rotate(360deg); } 85% { transform: translateY(-18%) rotate(360deg); } 100% { transform: rotate(360deg); } }
.pl.wobble .pl-in { transform-origin: 50% 100%; animation: wobble 1.5s ease-in-out; }
@keyframes wobble { 15%, 45%, 75% { transform: rotate(-12deg); } 30%, 60%, 90% { transform: rotate(10deg); } }
.pl.hover .pl-in { animation: hover 1.6s ease-in-out; }
@keyframes hover { 25% { transform: translateY(-25%) rotate(-8deg); } 50% { transform: translateY(-10%) rotate(8deg); } 75% { transform: translateY(-30%); } }
.pl.throw .pl-in { animation: throwIt .6s ease-in-out; }
.pl .pl-in { transition: opacity .25s, scale .25s; }
.pl.popped .pl-in { opacity: 0; scale: .2; }
.pl.regrow .pl-in { animation: regrow .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes regrow { from { scale: .1; } }
.bobber { animation: bobber var(--ms, 1.5s) ease-in-out forwards; }
@keyframes bobber { 0% { transform: translate(-50%, -50%) scale(0); } 10%, 30%, 50% { transform: translate(-50%, -50%) scale(1); } 20%, 40% { transform: translate(-50%, -30%) scale(1); } 70% { transform: translate(-50%, 10%) scale(1); opacity: 1; } 100% { transform: translate(-50%, 40%) scale(.6); opacity: 0; } }
.kite-loop { animation: kiteLoop var(--ms, 3s) ease-in-out forwards; }
@keyframes kiteLoop { 0% { transform: translate(-50%, -50%) scale(0); } 10% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-10%, -80%) rotate(40deg); } 60% { transform: translate(-90%, -60%) rotate(-40deg); } 85% { transform: translate(-50%, -70%) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -140%); opacity: 0; } }
.beam { position: absolute; width: 150px; transform: translateX(-50%); pointer-events: none; z-index: 2;
  background: linear-gradient(#C8FFB2cc, #C8FFB222); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); animation: beam 3.3s ease-in-out forwards; }
@keyframes beam { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.lucky.beamup { animation: beamup 2.4s ease-in-out forwards; }
@keyframes beamup { to { translate: 0 -38%; rotate: 360deg; } }
.lucky.balloonfly { animation: balloonfly 2s ease-in forwards; }
@keyframes balloonfly { 30% { translate: 0 -8%; rotate: -4deg; } to { translate: 0 -60%; rotate: 5deg; } }
.lucky.parachute { animation: parachute 2.7s ease-out; }
@keyframes parachute { from { translate: 0 -60%; } 30% { rotate: -6deg; } 60% { rotate: 6deg; } to { translate: 0 0; rotate: 0deg; } }
.lucky.tiny { scale: .42; transform-origin: 50% 100%; }
.lucky.groom .head { animation: groom .4s ease-in-out 4; }
@keyframes groom { 25% { transform: rotate(-6deg) scale(1.02, .97); } 75% { transform: rotate(6deg) scale(1.02, .97); } }
.lucky.stretchUp { animation: stretchUp 1.6s ease-in-out; }
@keyframes stretchUp { 35% { scale: .94 1.12; translate: 0 -4%; } 70% { scale: 1.06 .94; } }
.lucky.flop { animation: flop 2.6s ease-in-out; }
@keyframes flop { 20%, 80% { rotate: 78deg; translate: 8% 16%; } }
.lucky.look { animation: look 1.5s ease-in-out; }
@keyframes look { 20%, 40% { scale: -1 1; } 60%, 100% { scale: 1 1; } }

/* ---------- Tali's entrances ---------- */
.dog-body.enterJump { animation: enterJump 1.1s cubic-bezier(.3, 1.2, .5, 1); }
@keyframes enterJump { from { translate: 0 -170%; } 60% { translate: 0 5%; } 80% { translate: 0 -8%; } to { translate: 0 0; } }
.dog-body.enterDig { animation: enterDig 1s ease-out; }
@keyframes enterDig { from { translate: 0 60%; scale: .3; opacity: 0; } 60% { translate: 0 -10%; scale: 1.05; opacity: 1; } to { translate: 0 0; scale: 1; } }
.dog-body.enterSpin { animation: enterSpin 1.2s ease-out; }
@keyframes enterSpin { from { translate: 170% 0; rotate: 720deg; } to { translate: 0 0; rotate: 0deg; } }
.dog-body.enterSkate { animation: enterSkate 1.4s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes enterSkate { from { translate: 180% 0; } 70% { translate: -6% 0; } to { translate: 0 0; } }
.skate { position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%); font-size: 40px; pointer-events: none; animation: enterSkate 1.4s cubic-bezier(.3, 1.3, .5, 1); }
/* the daily present on a parachute */
.surprise .chute { position: absolute; left: 50%; bottom: 80%; transform: translateX(-50%); font-size: 40px; pointer-events: none; }
/* while decorating, Lucky's speech bubble doesn't get in the way of dragging */
body.editing .bubble { pointer-events: none; opacity: .88; }

/* ---------- more ways things react (1.7.0) ---------- */
.puddle { position: absolute; width: 150px; height: 28px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, #D6F1FF, #7FCBFF 65%, #4FA8E8); opacity: .78; animation: puddle var(--ms, 4s) ease-in-out forwards; }
@keyframes puddle { 0% { transform: translate(-50%, -50%) scale(0); } 18%, 82% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
[data-tap="crab"].scuttle { animation: scuttle 2.4s ease-in-out; }
@keyframes scuttle { 15% { transform: translateX(-36px); } 35% { transform: translateX(24px); } 55% { transform: translateX(-30px); } 75% { transform: translateX(14px); } }
.lucky.sidestep { animation: sidestep 2.2s ease-in-out; }
@keyframes sidestep { 15% { translate: -7% 0; rotate: -5deg; } 35% { translate: 6% 0; rotate: 5deg; } 55% { translate: -6% 0; rotate: -4deg; } 75% { translate: 3% 0; rotate: 2deg; } }
[data-tap="planet"].whirl { animation: whirl 2s ease-in-out; }
@keyframes whirl { to { transform: rotate(720deg); } }
[data-tap="sheep"].sheephop { animation: sheepHop .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sheepHop { 40% { transform: translateY(-16px) rotate(-8deg); } }
[data-tap="bamboo"].windsway { transform-origin: 50% 100%; animation: windSway 2s ease-in-out; }
@keyframes windSway { 20% { transform: rotate(-7deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
.bell-ring { animation: bellRing var(--ms, 2s) ease-in-out forwards; }
@keyframes bellRing {
  0% { transform: translate(-50%, -50%) scale(0); } 12% { transform: translate(-50%, -50%) scale(1.2); }
  25% { transform: translate(-50%, -50%) rotate(-28deg); } 40% { transform: translate(-50%, -50%) rotate(24deg); }
  55% { transform: translate(-50%, -50%) rotate(-16deg); } 70% { transform: translate(-50%, -50%) rotate(10deg); }
  85% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
.pl.header .pl-in { animation: headerShot 1.8s ease-in-out; }
@keyframes headerShot { 25% { transform: translateY(-220%) rotate(180deg); } 50% { transform: translate(calc(var(--dir, 1) * 520%), -140%) rotate(420deg) scale(.5); opacity: 0; } 70% { transform: scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pl.toss .pl-in { animation: toss 2.1s ease-in-out; }
@keyframes toss { 30% { transform: translateY(-140%) scale(1.7); } 55% { transform: translateY(-90%) scale(3.2); } 78% { transform: translateY(-60%) scale(2); } }
.lucky.sled { animation: sledBump .35s ease-in-out infinite; }
@keyframes sledBump { 50% { translate: 0 -2%; rotate: -3deg; } }
/* acted-out chats and new bunny habits */
.lucky.dig { transform-origin: 50% 100%; animation: dig 1.8s ease-in-out; }
@keyframes dig { 10%, 40%, 70% { rotate: 9deg; translate: 0 5%; scale: 1.04 .94; } 25%, 55%, 85% { rotate: 5deg; translate: 0 2%; scale: 1 1; } }
.lucky.sneak { animation: sneak 2.3s ease-in-out; }
@keyframes sneak { 20% { translate: -5% 3%; scale: 1 .9; rotate: -3deg; } 40% { translate: -9% 3%; scale: 1 .9; rotate: 2deg; } 60% { translate: -13% 3%; scale: 1 .9; rotate: -3deg; } 80% { translate: -8% 2%; scale: 1 .95; } }
.lucky.wagtry { transform-origin: 50% 100%; animation: wagtry 1.9s ease-in-out; }
@keyframes wagtry { 15%, 45%, 75% { rotate: -6deg; translate: -2% 0; } 30%, 60%, 90% { rotate: 6deg; translate: 2% 0; } }
.dog-body .ear { transform-box: fill-box; transform-origin: 50% 100%; }
.dog-body.perk .ear { animation: perkEar .45s ease-in-out 3; }
@keyframes perkEar { 50% { transform: scaleY(1.18) translateY(-3px); } }
.fx-dark { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 74%, transparent 24%, #1B1740d9 64%); animation: fxDark var(--ms, 5s) ease-in-out forwards; }
@keyframes fxDark { 0% { opacity: 0; } 18%, 78% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- holidays (events.js): body.ev-<id> and ev-s1…ev-s4 for the stages reached ---------- */
.bg svg.ev-layer { pointer-events: none; }
.ev-top { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.ev-bunting { position: absolute; left: -10px; right: -10px; top: 0; height: 30px; background-repeat: repeat-x; filter: drop-shadow(0 2px 2px #0002); transform-origin: 50% 0; animation: evSway 5s ease-in-out infinite alternate; }
@keyframes evSway { to { transform: translateY(2px) rotate(.5deg); } }
.bg svg.ev-web { position: absolute; inset: 0 0 auto auto; width: 84px; height: 84px; transform: scaleX(-1); }
.ev-spider { position: absolute; left: 58%; top: 0; width: 1.5px; height: 60px; background: #ffffffcc; transform-origin: 50% 0; animation: evSpider 6s ease-in-out infinite; }
.ev-spider span { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); font-size: 22px; line-height: 1; }
@keyframes evSpider { 0%, 100% { height: 40px; } 50% { height: 96px; } }
.ev-pumpkin.lit { filter: drop-shadow(0 0 6px #FFB347); }
.ev-pumpkin.lit .ev-face { animation: evFlicker 1.8s ease-in-out infinite; }
@keyframes evFlicker { 0%, 100% { opacity: 1; } 40% { opacity: .7; } 60% { opacity: .95; } }
.ev-bat { animation: evBatFly var(--d, 14s) linear var(--delay, 0s) infinite; }
.ev-wing { transform-box: fill-box; transform-origin: 50% 50%; animation: evFlap .22s ease-in-out infinite alternate; }
@keyframes evFlap { to { transform: scaleY(.45); } }
@keyframes evBatFly { 0% { transform: translate(-40px, var(--y)); } 25% { transform: translate(100px, calc(var(--y) - 22px)); } 50% { transform: translate(200px, calc(var(--y) + 12px)); } 75% { transform: translate(300px, calc(var(--y) - 16px)); } 100% { transform: translate(440px, var(--y)); } }
.ev-ghost { animation: evGhost 3.6s ease-in-out infinite; }
@keyframes evGhost { 50% { transform: translate(-3px, -9px) rotate(-5deg); } }
/* Lucky's holiday hat hides under a real hat or a head prop */
.lucky.has-hat .pp.season, .lucky.p-head .pp.season { display: none; }
/* the interface in the last week: an icon in sheet titles, a decoration on the speech bubble, a watermark in missions */
.ev-s3 .sheet-head h2::after { content: " " var(--ev-icon); }
.ev-s3 .bubble::before { content: var(--ev-deco, none); position: absolute; right: -10px; top: -14px; font-size: 22px; transform: rotate(16deg); pointer-events: none; }
.ev-s3 .ninja-mission::after { content: var(--ev-icon); position: absolute; right: 12px; bottom: 12px; font-size: 84px; opacity: .14; pointer-events: none; }
.dog-body { position: relative; }
.pl-in { position: relative; }
/* Halloween */
body.ev-halloween.ev-s3 { --ev-deco: "🕸️"; background: radial-gradient(circle at 20% 0%, #FFF4E8, #FFE2C9 55%, #EAD9FF); }
.ev-halloween.ev-s3 .dog-body::after { content: "🦇"; position: absolute; left: 36%; top: -2%; font-size: min(8vw, 32px); pointer-events: none; }
.ev-halloween.ev-s2 .pl.dec-hutch .pl-in::after, .ev-halloween.ev-s2 .pl.dec-igloo .pl-in::after, .ev-halloween.ev-s2 .pl.dec-tent .pl-in::after,
.ev-halloween.ev-s2 .pl.dec-castle .pl-in::after { content: "🎃"; position: absolute; left: -8%; bottom: -4%; font-size: calc(var(--w) * .26cqw); pointer-events: none; }
.ev-halloween.ev-s3 .pl.dec-rocket .pl-in::after, .ev-halloween.ev-s3 .pl.dec-snowman .pl-in::after { content: "🦇"; position: absolute; left: 40%; top: -10%; font-size: calc(var(--w) * .5cqw); pointer-events: none; }
/* Christmas and New Year */
.bg svg.ev-lights { position: absolute; inset: 0 0 auto 0; width: 100%; height: 34px; }
.bg svg.ev-tinsel { position: absolute; inset: 2px 0 auto 0; width: 100%; height: 26px; }
.ev-bulb { animation: evBulb 1.8s ease-in-out infinite; }
.ev-bulb.b1 { animation-delay: -.6s; } .ev-bulb.b2 { animation-delay: -1.2s; }
@keyframes evBulb { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.ev-burst { transform-box: fill-box; transform-origin: center; animation: evBurst 3.6s ease-out var(--delay, 0s) infinite; }
@keyframes evBurst { 0%, 55% { transform: scale(.1); opacity: 0; } 60% { opacity: 1; } 85% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
.ev-sleigh { animation: evSleigh 24s linear infinite; }
@keyframes evSleigh { 0%, 70% { transform: translate(470px, var(--y)); opacity: 0; } 71% { opacity: 1; } 100% { transform: translate(-170px, calc(var(--y) - 40px)); opacity: 1; } }
.ev-star { transform-box: fill-box; transform-origin: center; animation: evStar 2.4s ease-in-out infinite; }
@keyframes evStar { 50% { transform: scale(1.18) rotate(8deg); } }
.ev-year { animation: evYear 2.4s ease-in-out infinite; }
@keyframes evYear { 50% { opacity: .7; } }
body.ev-christmas.ev-s3 { --ev-deco: "❄️"; background: radial-gradient(circle at 20% 0%, #FFFFFF, #E4F3FF 55%, #FFE3EC); }
.ev-christmas.ev-s3 .dog-body::after { content: "🔔"; position: absolute; left: 44%; top: 58%; font-size: min(6vw, 24px); pointer-events: none; }
.ev-christmas.ev-s2 .pl.dec-hutch .pl-in::after, .ev-christmas.ev-s2 .pl.dec-igloo .pl-in::after, .ev-christmas.ev-s2 .pl.dec-tent .pl-in::after,
.ev-christmas.ev-s2 .pl.dec-castle .pl-in::after { content: "🎄"; position: absolute; left: -8%; bottom: -2%; font-size: calc(var(--w) * .26cqw); pointer-events: none; }
.ev-christmas.ev-s3 .pl.dec-rocket .pl-in::after { content: "⭐"; position: absolute; left: 30%; top: -14%; font-size: calc(var(--w) * .45cqw); pointer-events: none; }
.ev-christmas.ev-s3 .pl.dec-snowman .pl-in::after { content: "🧣"; position: absolute; left: 22%; top: 36%; font-size: calc(var(--w) * .5cqw); pointer-events: none; }
body.ev-newyear.ev-s3 { --ev-deco: "✨"; background: radial-gradient(circle at 20% 0%, #FFFBEA, #FFF0C2 55%, #E9E4FF); }
.ev-newyear.ev-s3 .dog-body::after { content: "🎉"; position: absolute; left: 40%; top: -4%; font-size: min(7vw, 28px); pointer-events: none; }
.ev-newyear.ev-s3 .pl.dec-hutch .pl-in::after, .ev-newyear.ev-s3 .pl.dec-igloo .pl-in::after, .ev-newyear.ev-s3 .pl.dec-tent .pl-in::after,
.ev-newyear.ev-s3 .pl.dec-castle .pl-in::after { content: "🎁"; position: absolute; left: -6%; bottom: -2%; font-size: calc(var(--w) * .24cqw); pointer-events: none; }
/* Valentine's Day, St Patrick's Day, Easter */
.bg svg.ev-layer [data-tap] { pointer-events: auto; }
/* the things to find sit above the decorations (but not in the way while decorating) */
.hunt { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hunt svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hunt [data-tap] { pointer-events: auto; cursor: pointer; touch-action: none; }
body.editing .hunt { opacity: .55; }
body.editing .hunt [data-tap] { pointer-events: none; }
.ev-egg { animation: evEgg 4s ease-in-out infinite; transform-origin: 50% 90%; }
.ev-egg.gold { filter: drop-shadow(0 0 4px #FFD23F); }
.ev-egg.found { opacity: 0; pointer-events: none; transition: opacity .5s; }
@keyframes evEgg { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 92% { transform: rotate(6deg); } }
.ev-rise { animation: evRise 7s ease-in var(--delay, 0s) infinite; }
@keyframes evRise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(18px, -360px); opacity: 0; } }
.ev-bob { animation: evBob 2.6s ease-in-out infinite; }
@keyframes evBob { 50% { transform: translateY(-5px) rotate(3deg); } }
.pp-boing { transform-box: fill-box; transform-origin: 50% 100%; animation: evBoing 1.4s ease-in-out infinite; }
@keyframes evBoing { 25% { transform: rotate(-6deg) translateY(-2px); } 75% { transform: rotate(6deg) translateY(1px); } }
body.ev-valentine.ev-s3 { --ev-deco: "💕"; background: radial-gradient(circle at 20% 0%, #FFF0F5, #FFD3E4 55%, #FFC2D6); }
.ev-valentine.ev-s3 .dog-body::after { content: "💘"; position: absolute; left: 40%; top: -3%; font-size: min(7vw, 28px); pointer-events: none; }
body.ev-patrick.ev-s3 { --ev-deco: "🍀"; background: radial-gradient(circle at 20% 0%, #F2FFF4, #D4F5DA 55%, #FFE8CC); }
.ev-patrick.ev-s3 .dog-body::after { content: "☘️"; position: absolute; left: 40%; top: -3%; font-size: min(7vw, 28px); pointer-events: none; }
.ev-patrick.ev-s2 .pl.dec-hutch .pl-in::after, .ev-patrick.ev-s2 .pl.dec-tent .pl-in::after, .ev-patrick.ev-s2 .pl.dec-castle .pl-in::after { content: "☘️"; position: absolute; left: -6%; bottom: -2%; font-size: calc(var(--w) * .22cqw); pointer-events: none; }
body.ev-easter.ev-s3 { --ev-deco: "🌸"; background: radial-gradient(circle at 20% 0%, #FFFDF2, #E8F6FF 55%, #FCE3F3); }
.ev-easter.ev-s3 .dog-body::after { content: "🌷"; position: absolute; left: 30%; top: 2%; font-size: min(7vw, 28px); transform: rotate(-20deg); pointer-events: none; }
.ev-easter.ev-s2 .pl.dec-hutch .pl-in::after, .ev-easter.ev-s2 .pl.dec-tent .pl-in::after, .ev-easter.ev-s2 .pl.dec-igloo .pl-in::after { content: "🥚"; position: absolute; left: -4%; bottom: -2%; font-size: calc(var(--w) * .2cqw); pointer-events: none; }
/* the birthday: a cake whose candles blow out, a banner of letters */
body.ev-birthday.ev-s3 { --ev-deco: "🎈"; background: radial-gradient(circle at 20% 0%, #FFF7FB, #FFE1EF 55%, #DDF6FF); }
.ev-birthday.ev-s3 .dog-body::after { content: "🎈"; position: absolute; left: 52%; top: -12%; font-size: min(7vw, 28px); transform: rotate(14deg); pointer-events: none; }
.bg svg.ev-banner { position: absolute; inset: 60px 0 auto 0; width: 100%; height: 46px; filter: drop-shadow(0 2px 2px #0002); } /* under the buttons, so it can be read */
.ev-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: evFlame .8s ease-in-out infinite alternate; }
@keyframes evFlame { to { transform: scale(.82, 1.12) rotate(5deg); } }
.ev-cake.out .ev-flame { display: none; }
/* Songkran: water everywhere, a garland of jasmine and marigolds */
body.ev-songkran.ev-s3 { --ev-deco: "💦"; background: radial-gradient(circle at 20% 0%, #F2FCFF, #D3F1FF 55%, #FFE6F1); }
.ev-songkran.ev-s3 .dog-body::after { content: "🌺"; position: absolute; left: 30%; top: -4%; font-size: min(6.5vw, 26px); transform: rotate(-16deg); pointer-events: none; }
.bg svg.ev-garland { position: absolute; inset: 0 0 auto 0; width: 100%; height: 40px; filter: drop-shadow(0 2px 2px #0002); }
.ev-tassel { transform-box: fill-box; transform-origin: 50% 0; animation: swing 3s ease-in-out infinite; }
.ev-spray circle { transform-box: fill-box; animation: evSpray 1.6s ease-out infinite; }
.ev-spray circle:nth-child(2) { animation-delay: -.4s; } .ev-spray circle:nth-child(3) { animation-delay: -.8s; }
.ev-spray circle:nth-child(4) { animation-delay: -1.1s; } .ev-spray circle:nth-child(5) { animation-delay: -1.4s; }
@keyframes evSpray { 0% { transform: translate(4px, 8px) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-6px, -10px) scale(1.1); opacity: 0; } }
.ev-elephant.squirt .ev-spray circle { animation-duration: .45s; }
.ev-petals { transform-box: fill-box; transform-origin: center; animation: twirlIt 16s linear infinite; }
.ev-gun.squirt { animation: rattle .2s ease-in-out 2; }
/* Ukrainian Independence Day: sunflowers, wheat, the flag, an embroidered towel along the top */
body.ev-ukraine.ev-s3 { --ev-deco: "🌻"; background: radial-gradient(circle at 20% 0%, #F4F9FF, #DCE9FF 50%, #FFF4BF); }
.ev-ukraine.ev-s3 .dog-body::after { content: ""; position: absolute; left: 41%; top: 56%; width: min(7vw, 28px); aspect-ratio: 1.6; background: linear-gradient(#0057B7 50%, #FFD700 50%);
  clip-path: polygon(0 0, 50% 38%, 100% 0, 100% 100%, 50% 62%, 0 100%); pointer-events: none; }
.ev-rushnyk { position: absolute; left: 0; right: 0; top: 0; height: 18px; background-repeat: repeat-x; filter: drop-shadow(0 2px 2px #0002); }
.ev-rushnyk + .ev-bunting { top: 16px; }
.ev-sfhead { transform-box: fill-box; transform-origin: center; animation: evNod 6s ease-in-out infinite; }
@keyframes evNod { 50% { transform: rotate(10deg); } }
.ev-sunflower.turn .ev-sfhead { animation: twirlIt 1.3s ease-in-out; }
.ev-stalks { transform-box: fill-box; transform-origin: 50% 100%; animation: evStalks 4s ease-in-out infinite; }
@keyframes evStalks { 50% { transform: rotate(4deg); } }
.ev-wheat.rustle .ev-stalks { animation: rattle .3s ease-in-out 3; }
.ev-wave { transform-box: fill-box; transform-origin: 0 50%; animation: evWave 2.2s ease-in-out infinite; }
@keyframes evWave { 50% { transform: skewY(-5deg) scaleX(.94); } }
.ev-flag.flutter .ev-wave { animation-duration: .5s; }
/* missions in a holiday's last week */
.ev-halloween.ev-s3 .ninja-mission { background: linear-gradient(#FFE8D1, #E6D6FF); }
.ev-christmas.ev-s3 .ninja-mission { background: linear-gradient(#F2FAFF, #FFE1E6); }
.ev-newyear.ev-s3 .ninja-mission { background: linear-gradient(#FFF7DB, #E4E0FF); }
.ev-valentine.ev-s3 .ninja-mission { background: linear-gradient(#FFE6EF, #FFD0E1); }
.ev-patrick.ev-s3 .ninja-mission { background: linear-gradient(#E9FBEC, #FFF1DE); }
.ev-easter.ev-s3 .ninja-mission { background: linear-gradient(#FFFBE6, #E6F4FF); }
.ev-birthday.ev-s3 .ninja-mission { background: linear-gradient(#FFF0F7, #E2F7FF); }
.ev-songkran.ev-s3 .ninja-mission { background: linear-gradient(#E6F7FF, #FFEAF3); }
.ev-ukraine.ev-s3 .ninja-mission { background: linear-gradient(#E3EEFF, #FFF6CC); }
@media (prefers-reduced-motion: reduce) {
  .ev-bat, .ev-sleigh, .ev-burst, .ev-rise { display: none; }
  .ev-ghost, .ev-bunting, .ev-spider, .ev-bulb, .ev-star, .ev-year, .ev-pumpkin .ev-face, .ev-egg, .ev-bob, .pp-boing { animation: none !important; }
  .ev-flame, .ev-tassel, .ev-spray circle, .ev-petals, .ev-sfhead, .ev-stalks, .ev-wave { animation: none !important; }
}

/* ---------- Lucky's drawing (1.8.0): paws in front of him, a pom-pom tail, faces that sparkle ---------- */
/* Paws are drawn last, so they can wave by his cheek, clap, cover his eyes; they rest on his tummy.
   Offsets are in the drawing's own units (viewBox 0 0 200 210): paw-l rests at (84,177), paw-r at (116,177). */
.lucky .paw, .m-lucky .paw { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s ease-out; }
.lucky .paws { transform-box: view-box; transform-origin: 100px 204px; } /* the same point the body squashes from */
.lucky .tail { transform-box: fill-box; transform-origin: 15% 60%; animation: tailWag 7s ease-in-out infinite; }
@keyframes tailWag { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(12deg) scale(1.05); } 94% { transform: rotate(-8deg); } 97% { transform: rotate(6deg) scale(1.04); } }
@keyframes tailWagFast { 25% { transform: rotate(16deg) scale(1.1); } 75% { transform: rotate(-12deg) scale(.96); } }
.lucky.wagtry .tail { animation: tailWagFast .32s ease-in-out 6; }
.lucky .face-eyes .fx { transform-box: fill-box; transform-origin: center; }
.lucky .f-stars .fx { animation: starTwinkle .6s ease-in-out infinite alternate; }
@keyframes starTwinkle { to { transform: scale(1.2) rotate(14deg); } }
.lucky .f-hearts .fx { animation: heartBeat .7s ease-in-out infinite; }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.22); } 45% { transform: scale(1.04); } 65% { transform: scale(1.16); } }
.lucky .f-dizzy .fx { animation: spin .9s linear infinite; }
/* the old moves, now with paws */
.lucky.jiggle .paws { animation: jiggle .6s ease-out; }
.lucky.drum .paw-l { animation: pawDrum .225s ease-in-out 4; }
.lucky.drum .paw-r { animation: pawDrum .225s ease-in-out .11s 4; }
@keyframes pawDrum { 50% { transform: translateY(-9px) rotate(-8deg); } }
.lucky.clap .paw-l { animation: clapL .35s ease-in-out 2; }
.lucky.clap .paw-r { animation: clapR .35s ease-in-out 2; }
@keyframes clapL { 50% { transform: translate(8px, -8px) rotate(18deg); } }
@keyframes clapR { 50% { transform: translate(-8px, -8px) rotate(-18deg); } }
.lucky.wave .paw-r { animation: pawWave 1.2s ease-in-out; }
@keyframes pawWave { 15%, 85% { transform: translate(30px, -62px) rotate(-12deg); } 32%, 66% { transform: translate(32px, -64px) rotate(18deg); } 49% { transform: translate(30px, -62px) rotate(-18deg); } }
.lucky.proud .paw-l { animation: pawHipL 1.2s ease-in-out; }
.lucky.proud .paw-r { animation: pawHipR 1.2s ease-in-out; }
@keyframes pawHipL { 25%, 75% { transform: translate(-14px, -10px) rotate(-25deg); } }
@keyframes pawHipR { 25%, 75% { transform: translate(14px, -10px) rotate(25deg); } }
.lucky.groom .paw-l { animation: groomL 1.6s ease-in-out; }
.lucky.groom .paw-r { animation: groomR 1.6s ease-in-out; }
@keyframes groomL { 15%, 85% { transform: translate(4px, -72px) rotate(20deg); } 35%, 65% { transform: translate(6px, -80px) rotate(10deg); } 50% { transform: translate(4px, -70px) rotate(20deg); } }
@keyframes groomR { 15%, 85% { transform: translate(-4px, -72px) rotate(-20deg); } 35%, 65% { transform: translate(-6px, -80px) rotate(-10deg); } 50% { transform: translate(-4px, -70px) rotate(-20deg); } }
.lucky.hug .paw-l { animation: hugL .9s ease-in-out; }
.lucky.hug .paw-r { animation: hugR .9s ease-in-out; }
@keyframes hugL { 30% { transform: translate(-16px, -16px) rotate(-30deg); } 60% { transform: translate(8px, -14px) rotate(20deg); } }
@keyframes hugR { 30% { transform: translate(16px, -16px) rotate(30deg); } 60% { transform: translate(-8px, -14px) rotate(-20deg); } }
.lucky.startle .paw-l { animation: cheekL 1s ease-out; }
.lucky.startle .paw-r { animation: cheekR 1s ease-out; }
@keyframes cheekL { 15%, 70% { transform: translate(-10px, -60px) rotate(-10deg); } }
@keyframes cheekR { 15%, 70% { transform: translate(10px, -60px) rotate(10deg); } }
.lucky.kiss .paw-r { animation: blowKiss 1s ease-in-out; }
@keyframes blowKiss { 30%, 45% { transform: translate(-12px, -60px) rotate(-10deg); } 75% { transform: translate(16px, -66px) rotate(20deg); } }
.lucky.dance .paw-l { animation: danceL .55s ease-in-out 4; }
.lucky.dance .paw-r { animation: danceR .55s ease-in-out 4; }
@keyframes danceL { 25% { transform: translate(-14px, -36px) rotate(-30deg); } 50% { transform: none; } }
@keyframes danceR { 75% { transform: translate(14px, -36px) rotate(30deg); } }
.lucky.binky .paw-l, .lucky.bigjump .paw-l { animation: pawsOutL .9s ease-in-out; }
.lucky.binky .paw-r, .lucky.bigjump .paw-r { animation: pawsOutR .9s ease-in-out; }
@keyframes pawsOutL { 30%, 60% { transform: translate(-14px, -26px) rotate(-35deg); } }
@keyframes pawsOutR { 30%, 60% { transform: translate(14px, -26px) rotate(35deg); } }
.lucky.balance .paw-l { transform: translate(-18px, -20px) rotate(-40deg); }
.lucky.balance .paw-r { transform: translate(18px, -20px) rotate(40deg); }
.lucky.think .paw-r { transform: translate(-6px, -42px) rotate(-20deg); }
.lucky.bow .paw-l { transform: translate(8px, -4px) rotate(14deg); }
.lucky.bow .paw-r { transform: translate(-8px, -4px) rotate(-14deg); }
/* missions: the moves she copies */
.m-lucky.mv-star .paw-l { animation: pawsOutL .6s ease-out; }
.m-lucky.mv-star .paw-r { animation: pawsOutR .6s ease-out; }
.m-lucky.mv-punch .paw-r { animation: pawPunch .4s ease-out; }
@keyframes pawPunch { 40% { transform: translate(6px, -34px) scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .lucky .tail { animation: none; }
}

/* ---------- Lucky's tricks (tricks.js): everyday ways to answer a touch ---------- */
.lucky.bounce { animation: bounce2 .8s ease-out; }
@keyframes bounce2 { 20% { translate: 0 -10%; } 40% { translate: 0 0; scale: 1.06 .94; } 60% { translate: 0 -6%; scale: 1 1; } 80% { translate: 0 0; scale: 1.03 .97; } }
.lucky.twirl { animation: pirouette .75s ease-in-out; }
.lucky.shimmy { transform-origin: 50% 100%; animation: shimmy .8s ease-in-out; }
@keyframes shimmy { 15%, 45%, 75% { rotate: -4deg; translate: -2% 0; } 30%, 60%, 90% { rotate: 4deg; translate: 2% 0; } }
.lucky.shimmy .tail, .lucky.tailwag .tail { animation: tailWagFast .32s ease-in-out 4; }
.lucky.tailwag { animation: shimmy .8s ease-in-out; transform-origin: 50% 100%; }
.lucky.shy { animation: shySway 1.6s ease-in-out; transform-origin: 50% 100%; }
@keyframes shySway { 25%, 75% { rotate: -3deg; } 50% { rotate: 2deg; } }
.lucky.shy .paw-l { animation: shyL 1.6s ease-in-out; }
.lucky.shy .paw-r { animation: shyR 1.6s ease-in-out; }
@keyframes shyL { 15%, 85% { transform: translate(-4px, -62px) rotate(24deg); } }
@keyframes shyR { 15%, 85% { transform: translate(4px, -62px) rotate(-24deg); } }
.lucky.tilt .head { animation: listenTilt 1.4s ease-in-out; }
.lucky.highfive .paw-r { animation: highFive 1s ease-in-out; }
@keyframes highFive { 25%, 70% { transform: translate(28px, -72px) rotate(-12deg) scale(1.35); } 35% { transform: translate(30px, -76px) rotate(-6deg) scale(1.45); } }
.lucky.highten .paw-r { animation: highFive 1s ease-in-out; }
.lucky.highten .paw-l { animation: highFiveL 1s ease-in-out; }
@keyframes highFiveL { 25%, 70% { transform: translate(-28px, -72px) rotate(12deg) scale(1.35); } 35% { transform: translate(-30px, -76px) rotate(6deg) scale(1.45); } }
.lucky.pawshake .paw-r { animation: pawShake 1.4s ease-in-out; }
@keyframes pawShake { 15%, 85% { transform: translate(10px, -22px) scale(1.5); } 30%, 60% { transform: translate(10px, -30px) scale(1.5); } 45%, 75% { transform: translate(10px, -14px) scale(1.5); } }
.lucky.loaf { animation: loaf 2.6s ease-in-out; transform-origin: 50% 100%; }
@keyframes loaf { 15%, 85% { scale: 1.08 .88; translate: 0 5%; } }
.lucky.loaf .paws, .lucky.loaf .feet { animation: tuck 2.6s ease-in-out; }
@keyframes tuck { 15%, 85% { opacity: 0; } }
.lucky.backflip { animation: backflip .95s cubic-bezier(.3, 1.1, .5, 1); }
@keyframes backflip { 18% { translate: 0 4%; scale: 1.08 .9; rotate: 0deg; } 55% { translate: 0 -34%; scale: 1 1; rotate: -200deg; } 82% { translate: 0 -4%; rotate: -360deg; } 100% { translate: 0 0; rotate: -360deg; } }
.lucky.starjump { animation: starJump .75s ease-out; }
@keyframes starJump { 40% { translate: 0 -16%; scale: 1.18 .94; } }
.lucky.starjump .paw-l { animation: pawsOutL .75s ease-out; }
.lucky.starjump .paw-r { animation: pawsOutR .75s ease-out; }
.lucky.starjump .ear-l { animation: earUpL .75s ease-out; }
.lucky.starjump .ear-r { animation: earUpR .75s ease-out; }
.lucky.tapdance { animation: tapBody 1.2s ease-in-out; }
@keyframes tapBody { 12%, 37%, 62%, 87% { translate: 0 -3%; } 25%, 50%, 75% { translate: 0 0; } }
.lucky.tapdance .feet { animation: feetTap .15s ease-in-out 8 alternate; }
@keyframes feetTap { to { transform: translateY(-4px) rotate(3deg); } }
.lucky.tapdance .paw-l { animation: danceL .6s ease-in-out 2; }
.lucky.tapdance .paw-r { animation: danceR .6s ease-in-out 2; }
.lucky.pancake { transform-origin: 50% 100%; animation: pancake 1.3s ease-in-out; }
@keyframes pancake { 12%, 68% { scale: 1.3 .48; } 80% { scale: .9 1.14; } 92% { scale: 1.04 .97; } }
.lucky.slideL { animation: slideL 1.4s ease-in-out; }
.lucky.slideR { animation: slideR 1.4s ease-in-out; }
@keyframes slideL { 30% { translate: -34% 0; rotate: -8deg; } 60% { translate: -26% 0; rotate: 4deg; } }
@keyframes slideR { 30% { translate: 34% 0; rotate: 8deg; } 60% { translate: 26% 0; rotate: -4deg; } }
.lucky.dodge { animation: dodge 1.1s ease-in-out; }
@keyframes dodge { 20% { translate: -16% 0; rotate: -6deg; } 45% { translate: 16% 0; rotate: 6deg; } 70% { translate: -8% 0; rotate: -3deg; } }
.lucky.static { animation: puffUp 1.5s ease-in-out; }
@keyframes puffUp { 15%, 80% { scale: 1.07; } }
.lucky.static .l-art { animation: staticBuzz .1s linear 14; filter: drop-shadow(0 0 2px #FFFFFF) drop-shadow(0 0 5px #FFE066); }
@keyframes staticBuzz { 25% { translate: -1px 1px; } 75% { translate: 1px -1px; } }

/* ---------- the rare big tricks: each is a scene that holds its class ---------- */
/* Super Bunny: a crouch, a flight off one side and back in from the other, a superhero landing */
.lucky.crouch { animation: crouch .6s ease-in forwards; transform-origin: 50% 100%; }
@keyframes crouch { to { scale: 1.08 .86; translate: 0 5%; } }
.lucky.heroflight { animation: heroFly 2.7s ease-in-out forwards; }
@keyframes heroFly {
  0% { translate: 0 5%; rotate: 0deg; } 12% { translate: 0 -20%; rotate: -6deg; } 36% { translate: 135% -18%; rotate: 20deg; }
  37% { translate: -135% -18%; rotate: 20deg; } 72% { translate: -10% -16%; rotate: 16deg; } 88% { translate: 0 -8%; rotate: 0deg; } 100% { translate: 0 0; rotate: 0deg; }
}
.lucky.heroflight .paw-r { transform: translate(24px, -48px) rotate(-30deg) scale(1.1); }
.lucky.heroflight .paw-l { transform: translate(-6px, -10px) rotate(20deg); }
.lucky.herolanding { animation: heroLand .9s ease-out; transform-origin: 50% 100%; }
@keyframes heroLand { 0% { scale: 1.16 .8; translate: 0 4%; } 55% { scale: .95 1.05; translate: 0 -2%; } 100% { scale: 1 1; translate: 0 0; } }
.pp-cape { transform-box: view-box; transform-origin: 100px 126px; animation: capeFlutter .45s ease-in-out infinite alternate; }
@keyframes capeFlutter { to { transform: skewX(-4deg) scaleX(1.04); } }
.lucky.heroflight .pp-cape { animation: capeFly .25s ease-in-out infinite alternate; }
@keyframes capeFly { from { transform: rotate(38deg) scaleY(1.05); } to { transform: rotate(46deg) scaleY(.95) skewX(6deg); } }
/* the Cheshire bunny: all of him fades away but the grin, which floats a little */
.lucky.cheshire .l-art svg > :not(.head), .lucky.cheshire .head > :not(.face-mouth), .lucky.cheshire .l-props, .lucky.cheshire .l-back { animation: fadeAway 1.3s ease-in forwards; }
@keyframes fadeAway { to { opacity: 0; } }
.lucky.cheshire .face-mouth { transform-box: fill-box; transform-origin: center; animation: grinFloat 2.4s ease-in-out infinite alternate; }
@keyframes grinFloat { from { transform: scale(1.25); } to { transform: translateY(-6px) scale(1.4) rotate(-4deg); } }
.lucky.reappear .l-art svg > :not(.head), .lucky.reappear .head > :not(.face-mouth), .lucky.reappear .l-props, .lucky.reappear .l-back { animation: fadeBack .7s ease-out; }
@keyframes fadeBack { from { opacity: 0; } }
/* ninja clones: two copies poof up beside him and everyone shuffles */
.lucky-clone { position: absolute; z-index: 3; aspect-ratio: 200 / 210; cursor: pointer; animation: cloneIn .4s cubic-bezier(.3, 1.5, .5, 1); filter: saturate(.9); }
.lucky-clone svg { width: 100%; height: 100%; overflow: visible; }
@keyframes cloneIn { from { scale: .2; opacity: 0; } }
.lucky-clone.shuffle, .lucky.shuffle { animation: cloneHop .5s ease-in-out infinite; }
@keyframes cloneHop { 50% { translate: 0 -4%; } }
.lucky-clone.out { animation: cloneOut .4s ease-in forwards; pointer-events: none; }
@keyframes cloneOut { to { scale: .2; opacity: 0; } }
/* a bunny out of a hat */
.hat-fx { z-index: 6; }
.hat-in { display: inline-block; transform-origin: 50% 90%; }
.hat-fx.wobble .hat-in { animation: hatWobble .3s ease-in-out 3; }
@keyframes hatWobble { 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
.lucky.intohat { animation: intoHat .8s ease-in forwards; transform-origin: 50% 100%; }
@keyframes intoHat { 30% { translate: 0 -10%; scale: 1 1; } to { translate: 0 22%; scale: .2; opacity: 0; } }
.lucky.outofhat { animation: outOfHat .9s cubic-bezier(.3, 1.4, .5, 1); transform-origin: 50% 100%; }
@keyframes outOfHat { from { translate: 0 22%; scale: .2; opacity: 0; } 50% { translate: 0 -14%; scale: 1.08; opacity: 1; } }
/* a giant (who stomps the ground), then tiny */
.lucky.giant { scale: 1.3; transform-origin: 50% 100%; }
.lucky.stomp { animation: stomp .5s ease-in-out; }
@keyframes stomp { 40% { translate: 0 -4%; } 70% { translate: 0 1%; } }
.scene.quake { animation: quake .45s ease-in-out; }
@keyframes quake { 20%, 60% { translate: -3px 1px; } 40%, 80% { translate: 3px -1px; } }
/* a balloon bunny: puffs up, then lets the air out and zips around */
.lucky.puff { animation: puffUpBig 1.8s ease-out forwards; transform-origin: 50% 70%; }
@keyframes puffUpBig { 60% { scale: 1.2 1.12; translate: 0 -3%; } 80% { scale: 1.16 1.1; translate: 0 -4%; } 100% { scale: 1.2 1.12; translate: 0 -3%; } }
.lucky.deflate { animation: deflate 1.7s ease-in-out; }
@keyframes deflate {
  0% { scale: 1.2 1.12; } 15% { translate: -28% -4%; rotate: -40deg; scale: 1.14 1.08; } 30% { translate: 26% -6%; rotate: 50deg; scale: 1.1 1.05; }
  45% { translate: -20% -2%; rotate: -30deg; } 60% { translate: 18% -5%; rotate: 25deg; scale: 1.04 1.02; } 80% { translate: -6% -2%; rotate: -10deg; } 100% { translate: 0 0; rotate: 0deg; scale: 1 1; }
}
/* Robo-Bunny: antenna ears, moves in jerky steps */
.lucky.robot { animation: robotMove 2.4s steps(1, end) infinite; }
@keyframes robotMove { 0% { rotate: 0deg; } 12.5% { rotate: 6deg; } 25% { rotate: 0deg; translate: 3% 0; } 37.5% { rotate: -6deg; translate: 3% 0; } 50% { rotate: 0deg; translate: 0 0; } 62.5% { rotate: 6deg; translate: -3% 0; } 75% { rotate: 0deg; translate: -3% 0; } 87.5% { rotate: -6deg; translate: 0 0; } }
.lucky.robot .ear-l { animation: none; transform: rotate(150deg) scale(.6, .68); }
.lucky.robot .ear-r { animation: none; transform: rotate(-150deg) scale(.6, .68); }
.lucky.robot .paw-l { animation: robotArm .6s steps(1, end) infinite; }
.lucky.robot .paw-r { animation: robotArm .6s steps(1, end) .3s infinite; }
@keyframes robotArm { 0% { transform: translate(-6px, -30px) rotate(-90deg); } 50% { transform: none; } }
/* a handstand: over, a wobble upside down, back again */
.lucky.handstand { animation: handstand 3.6s ease-in-out; }
@keyframes handstand {
  0% { rotate: 0deg; } 12% { translate: 0 -12%; rotate: 90deg; } 22% { translate: 0 2%; rotate: 180deg; } 32% { rotate: 172deg; } 42% { rotate: 188deg; }
  52% { rotate: 174deg; } 62% { rotate: 186deg; } 72% { rotate: 180deg; } 84% { translate: 0 -12%; rotate: 300deg; } 100% { translate: 0 0; rotate: 360deg; }
}
.lucky.handstand .l-art svg > ellipse:first-of-type { opacity: 0; }
/* a statue: grey and still, one paw up; a tap makes him laugh */
.lucky.statue .l-art { filter: grayscale(1) contrast(.85) brightness(1.08); }
.lucky.statue *, .lucky.statue { animation-play-state: paused !important; }
.lucky.statue .paw-r { transform: translate(24px, -62px) rotate(-20deg); }
/* disco: a mirror ball, coloured lights, dancing */
.lucky.disco { animation: dance .55s ease-in-out infinite; }
.lucky.disco .paw-l { animation: danceL .55s ease-in-out infinite; }
.lucky.disco .paw-r { animation: danceR .55s ease-in-out infinite; }
.fx-disco { position: absolute; inset: 0; pointer-events: none; opacity: .38; animation: discoLights 1.2s linear infinite;
  background: radial-gradient(circle at 20% 30%, #FF5FA2 0, transparent 22%), radial-gradient(circle at 75% 35%, #4CD37B 0, transparent 22%),
    radial-gradient(circle at 40% 72%, #6FD3FF 0, transparent 24%), radial-gradient(circle at 82% 78%, #FFD23F 0, transparent 22%); }
@keyframes discoLights { to { filter: hue-rotate(360deg); } }
.disco-ball { animation: popStay var(--ms, 2s) ease-in-out forwards, discoSpin .8s linear infinite; }
@keyframes discoSpin { 50% { rotate: 20deg; } }
/* a cartwheel that goes wrong */
.lucky.cartwheel { animation: cartwheel 2s ease-in-out; }
@keyframes cartwheel { 25% { rotate: 60deg; translate: 10% -10%; } 42% { rotate: 96deg; translate: 22% 8%; } 72% { rotate: 92deg; translate: 22% 8%; } 88% { rotate: -6deg; translate: 6% -6%; } 100% { rotate: 0deg; translate: 0 0; } }
/* peekaboo: paws over his eyes */
.lucky.peek .paw-l { transform: translate(-4px, -82px) scale(1.55); }
.lucky.peek .paw-r { transform: translate(4px, -82px) scale(1.55); }
/* meditation: eyes closed, a little float, a soft glow */
.lucky.meditate { animation: meditate 3.6s ease-in-out; }
@keyframes meditate { 20%, 80% { translate: 0 -8%; } 50% { translate: 0 -10%; } }
.lucky.meditate .l-art { filter: drop-shadow(0 0 12px #FFFFFFAA); }
.lucky.meditate .paw-l { transform: translate(8px, -6px) rotate(14deg); }
.lucky.meditate .paw-r { transform: translate(-8px, -6px) rotate(-14deg); }
/* spinning till he's dizzy */
.lucky.spinout { animation: pirouette .35s linear 4; }

/* ---------- starting up: a waking bunny instead of an empty level 1 until the game has started ---------- */
.boot { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(circle at 50% 40%, #FFF0F7, var(--pink-l) 60%, #FFD6EA); color: var(--ink); text-align: center; }
body.ready .boot { display: none; }
body:not(.ready) #app { visibility: hidden; }
.boot-bunny { font-size: 72px; animation: bootHop 1.1s ease-in-out infinite; }
@keyframes bootHop { 40% { transform: translateY(-14px) rotate(-4deg); } 60% { transform: translateY(-14px) rotate(4deg); } }
.boot-text { margin: 0; font-size: 20px; font-weight: 800; }
.boot-text small, .boot-retry small { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--muted); }
/* if it takes long, a way to try again */
.boot-retry { margin-top: 18px; padding: 12px 20px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); color: var(--pink-d); font-weight: 800;
  text-decoration: none; opacity: 0; pointer-events: none; animation: bootRetry .4s ease-out 10s forwards; }
@keyframes bootRetry { to { opacity: 1; pointer-events: auto; } }

/* ---------- holidays on every screen (1.9.0): from the first day the whole interface wears the holiday ----------
   Each holiday sets its colours and decorations in custom properties; the rules below use them on the top bar,
   the stat bars, the scene frame, the action buttons, buttons, sheets, windows, hints, questions and games. */
body.ev-halloween.ev-s3 {
  --ev-1: #FF8A1F; --ev-ink: #5A2A86; --ev-card: #FFF7EF; --ev-line: #FFC994; --ev-frame: #FFB061; --ev-sheet: #FFF8F2;
  --ev-pat: repeating-linear-gradient(-45deg, #FFFFFF80 0 3px, transparent 3px 8px);
  --ev-bar: linear-gradient(90deg, #FFD23F, #FF8A1F 55%, #8B4FD6);
  --ev-btn: linear-gradient(180deg, #FFA24C, #FF7A12); --ev-btn-edge: #C2560A;
  --ev-head: linear-gradient(90deg, #FFE2C4, #EBDCFF);
  --ev-reveal: radial-gradient(circle at 50% 42%, #8A4FD6 0%, #3B1F66 60%, #1E1233 100%);
  --ev-a1: "🦇"; --ev-a2: "🍭"; --ev-a3: "🕸️"; --ev-a4: "👻"; --ev-a5: "🍬";
  --ev-s1: "🍬"; --ev-s2: "🎃"; --ev-s3: "👻"; --ev-s4: "🌙"; --ev-lvl: "🕷️";
}
body.ev-christmas.ev-s3 {
  --ev-1: #E2313B; --ev-ink: #B3202A; --ev-card: #F1F7FF; --ev-line: #F6B9BD; --ev-frame: #F6B9BD; --ev-sheet: #FBFDFF;
  --ev-pat: repeating-linear-gradient(-45deg, #FFFFFFB0 0 3px, transparent 3px 7px);
  --ev-bar: linear-gradient(90deg, #2E9E4E, #E2313B);
  --ev-btn: linear-gradient(180deg, #F0525B, #D62531); --ev-btn-edge: #9E1520;
  --ev-head: linear-gradient(90deg, #E4F6EA, #FFE4E6);
  --ev-reveal: radial-gradient(circle at 50% 42%, #2E9E4E 0%, #145A2B 60%, #0B3319 100%);
  --ev-a1: "❄️"; --ev-a2: "🎁"; --ev-a3: "🔔"; --ev-a4: "⭐"; --ev-a5: "🧦";
  --ev-s1: "🍪"; --ev-s2: "🎁"; --ev-s3: "❄️"; --ev-s4: "⭐"; --ev-lvl: "🎄";
}
body.ev-newyear.ev-s3 {
  --ev-1: #E2A800; --ev-ink: #8A5A00; --ev-card: #FFFDF5; --ev-line: #FFE08A; --ev-frame: #FFE066; --ev-sheet: #FFFDF6;
  --ev-pat: radial-gradient(circle, #FFFFFFB0 1.2px, transparent 1.6px) 0 0 / 6px 6px;
  --ev-bar: linear-gradient(90deg, #FFD23F, #FF5FA2 50%, #8B6CFF);
  --ev-btn: linear-gradient(180deg, #FFD23F, #F0A800); --ev-btn-edge: #B07A00;
  --ev-head: linear-gradient(90deg, #FFF3C4, #E9E4FF);
  --ev-reveal: radial-gradient(circle at 50% 42%, #4B3FA0 0%, #221A5A 60%, #0F0B2E 100%);
  --ev-a1: "🎉"; --ev-a2: "✨"; --ev-a3: "🎈"; --ev-a4: "🎆"; --ev-a5: "🕛";
  --ev-s1: "🍰"; --ev-s2: "🎉"; --ev-s3: "✨"; --ev-s4: "🎆"; --ev-lvl: "🎊";
}
body.ev-valentine.ev-s3 {
  --ev-1: #FF3F7F; --ev-ink: #C21F5B; --ev-card: #FFF5F8; --ev-line: #FFB3CC; --ev-frame: #FF9EC0; --ev-sheet: #FFF6F9;
  --ev-pat: radial-gradient(circle at 30% 50%, #FFFFFF99 1.5px, transparent 2px) 0 0 / 7px 7px;
  --ev-bar: linear-gradient(90deg, #FF9EC0, #FF3F7F 60%, #E2313B);
  --ev-btn: linear-gradient(180deg, #FF6FA0, #F0306E); --ev-btn-edge: #B51650;
  --ev-head: linear-gradient(90deg, #FFE0EA, #FFD0DE);
  --ev-reveal: radial-gradient(circle at 50% 42%, #E2477E 0%, #8A1F48 60%, #4A0F27 100%);
  --ev-a1: "💗"; --ev-a2: "💌"; --ev-a3: "🌹"; --ev-a4: "💘"; --ev-a5: "🧸";
  --ev-s1: "🍫"; --ev-s2: "💝"; --ev-s3: "🌹"; --ev-s4: "💘"; --ev-lvl: "💞";
}
body.ev-patrick.ev-s3 {
  --ev-1: #2E9E4E; --ev-ink: #1E7A3A; --ev-card: #F6FFF7; --ev-line: #A8E0B6; --ev-frame: #8FD6A0; --ev-sheet: #F7FFF8;
  --ev-pat: repeating-linear-gradient(90deg, #FFFFFF66 0 4px, transparent 4px 9px);
  --ev-bar: linear-gradient(90deg, #2E9E4E, #FFFFFF 50%, #FF8A1F);
  --ev-btn: linear-gradient(180deg, #45B866, #2E9E4E); --ev-btn-edge: #1E6B35;
  --ev-head: linear-gradient(90deg, #DDF5E2, #FFEBD4);
  --ev-reveal: radial-gradient(circle at 50% 42%, #2E9E4E 0%, #155C2A 60%, #0A3317 100%);
  --ev-a1: "☘️"; --ev-a2: "🌈"; --ev-a3: "🪙"; --ev-a4: "🎩"; --ev-a5: "🍀";
  --ev-s1: "🍀"; --ev-s2: "🌈"; --ev-s3: "☘️"; --ev-s4: "🪙"; --ev-lvl: "🍀";
}
body.ev-easter.ev-s3 {
  --ev-1: #B78CFF; --ev-ink: #7A52C7; --ev-card: #FFFDF7; --ev-line: #E2D2FF; --ev-frame: #FFE7A8; --ev-sheet: #FFFEF8;
  --ev-pat: radial-gradient(circle, #FFFFFFB0 1.5px, transparent 2px) 0 0 / 7px 7px;
  --ev-bar: linear-gradient(90deg, #FFB3D6, #FFE066 35%, #B5E8FF 70%, #C7F2B5);
  --ev-btn: linear-gradient(180deg, #C9A6FF, #A27BF0); --ev-btn-edge: #7550C2;
  --ev-head: linear-gradient(90deg, #FFF3C4, #E3F4FF);
  --ev-reveal: radial-gradient(circle at 50% 42%, #B78CFF 0%, #6E4FB8 60%, #3A2770 100%);
  --ev-a1: "🐣"; --ev-a2: "🥚"; --ev-a3: "🌷"; --ev-a4: "🦋"; --ev-a5: "🐰";
  --ev-s1: "🥚"; --ev-s2: "🐣"; --ev-s3: "🌷"; --ev-s4: "🌞"; --ev-lvl: "🐰";
}
body.ev-birthday.ev-s3 {
  --ev-1: #FF5FA2; --ev-ink: #C2185B; --ev-card: #FFF8FC; --ev-line: #FFC2DE; --ev-frame: #9FE3F7; --ev-sheet: #FFFBFD;
  --ev-pat: radial-gradient(circle, #FFFFFFB0 1.4px, transparent 1.8px) 0 0 / 7px 7px;
  --ev-bar: linear-gradient(90deg, #FF5FA2, #FFD23F 35%, #36C5F0 70%, #9BE15D);
  --ev-btn: linear-gradient(180deg, #FF7AB5, #F0478F); --ev-btn-edge: #B8236A;
  --ev-head: linear-gradient(90deg, #FFE1EF, #DDF6FF);
  --ev-reveal: radial-gradient(circle at 50% 42%, #FF7AB5 0%, #A23E8C 60%, #4A1D52 100%);
  --ev-a1: "🎈"; --ev-a2: "🎁"; --ev-a3: "🧁"; --ev-a4: "🎉"; --ev-a5: "🎀";
  --ev-s1: "🧁"; --ev-s2: "🎈"; --ev-s3: "✨"; --ev-s4: "⭐"; --ev-lvl: "🎂";
}
body.ev-songkran.ev-s3 {
  --ev-1: #1E9FE0; --ev-ink: #0B6FA8; --ev-card: #F3FBFF; --ev-line: #A9DDF5; --ev-frame: #8FD3F2; --ev-sheet: #F7FCFF;
  --ev-pat: radial-gradient(circle at 50% 100%, #FFFFFF90 2px, transparent 2.6px) 0 0 / 8px 6px;
  --ev-bar: linear-gradient(90deg, #36C5F0, #1E9FE0 55%, #FF8FC0);
  --ev-btn: linear-gradient(180deg, #2BA6E6, #1580C2); --ev-btn-edge: #0E5F92;
  --ev-head: linear-gradient(90deg, #DDF4FF, #FFE6F1);
  --ev-reveal: radial-gradient(circle at 50% 42%, #36C5F0 0%, #0E6FA8 60%, #073A5C 100%);
  --ev-a1: "💦"; --ev-a2: "🌺"; --ev-a3: "🐘"; --ev-a4: "🥭"; --ev-a5: "🌴";
  --ev-s1: "🥭"; --ev-s2: "💦"; --ev-s3: "🌺"; --ev-s4: "☀️"; --ev-lvl: "🐘";
}
body.ev-ukraine.ev-s3 {
  --ev-1: #0057B7; --ev-ink: #0B3F8A; --ev-card: #F5F9FF; --ev-line: #B7CFF2; --ev-frame: #FFE066; --ev-sheet: #FAFCFF;
  --ev-pat: repeating-linear-gradient(90deg, #FFFFFF66 0 4px, transparent 4px 9px);
  --ev-bar: linear-gradient(90deg, #0057B7, #2E77D0 48%, #FFD700 52%, #FFE066);
  --ev-btn: linear-gradient(180deg, #2E77D0, #0057B7); --ev-btn-edge: #003F86;
  --ev-head: linear-gradient(180deg, #DCE9FF 50%, #FFF4BF 50%);
  --ev-reveal: radial-gradient(circle at 50% 42%, #2E77D0 0%, #0B3F8A 60%, #061F47 100%);
  --ev-a1: "🌻"; --ev-a2: "🌾"; --ev-a3: "🍒"; --ev-a4: "🕊️"; --ev-a5: "🥟";
  --ev-s1: "🥟"; --ev-s2: "🌻"; --ev-s3: "🌾"; --ev-s4: "☀️"; --ev-lvl: "🌻";
}
/* the top bar, the stat bars and the action buttons */
.ev-s3 .lvl, .ev-s3 .stat, .ev-s3 .act, .ev-s3 .icon-btn, .ev-s3 .belt-chip, .ev-s3 .word-btn { background: var(--ev-card); box-shadow: inset 0 0 0 2px var(--ev-line), var(--shadow); }
.ev-s3 .lvl, .ev-s3 .stat, .ev-s3 .act { position: relative; }
.ev-s3 .lvl-badge b, .ev-s3 .a-name { color: var(--ev-ink); }
.ev-s3 .bar i { background: var(--ev-pat), var(--ev-bar); }
.ev-s3 .s-bar i { background: var(--ev-pat), var(--b); }
.ev-s3 .lvl::after, .ev-s3 .stat::after, .ev-s3 .act::after { position: absolute; pointer-events: none; line-height: 1; filter: drop-shadow(0 1px 1px #0002); }
.ev-s3 .lvl::after { content: var(--ev-lvl); right: 6px; bottom: -6px; font-size: 16px; transform: rotate(-10deg); }
.ev-s3 .stat::after { right: -4px; top: -7px; font-size: 13px; transform: rotate(14deg); }
.ev-s3 .stat[data-k=hunger]::after { content: var(--ev-s1); }
.ev-s3 .stat[data-k=fun]::after { content: var(--ev-s2); }
.ev-s3 .stat[data-k=clean]::after { content: var(--ev-s3); }
.ev-s3 .stat[data-k=energy]::after { content: var(--ev-s4); }
.ev-s3 .act::after { right: -2px; top: -8px; font-size: 16px; transform: rotate(12deg); }
.ev-s3 .act:nth-child(1)::after { content: var(--ev-a1); }
.ev-s3 .act:nth-child(2)::after { content: var(--ev-a2); }
.ev-s3 .act:nth-child(3)::after { content: var(--ev-a3); }
.ev-s3 .act:nth-child(4)::after { content: var(--ev-a4); }
.ev-s3 .act:nth-child(5)::after { content: var(--ev-a5); }
/* Christmas: snow on top of every card */
.ev-christmas.ev-s3 .lvl::before, .ev-christmas.ev-s3 .stat::before, .ev-christmas.ev-s3 .act::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: -3px; height: 10px; pointer-events: none;
  background: radial-gradient(circle at 6px 4px, #fff 5px, transparent 5.5px) 0 2px / 12px 9px repeat-x, linear-gradient(#fff, #fff) 0 0 / 100% 5px no-repeat;
  border-radius: 8px 8px 0 0; filter: drop-shadow(0 1px 1px #9DB8D866);
}
/* Halloween: a little cobweb in a corner of the scene's buttons and a spider on the level card */
.ev-halloween.ev-s3 .lvl::after { bottom: auto; top: 100%; right: 18px; transform: none; animation: evDangle 3s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes evDangle { 50% { translate: 0 4px; rotate: 6deg; } }
/* the scene, buttons, sheets, windows, hints and questions */
.ev-s3 .scene { box-shadow: var(--shadow), inset 0 0 0 4px var(--ev-frame); }
.ev-s3 .btn.pink { background: var(--ev-btn); box-shadow: 0 4px 0 var(--ev-btn-edge); }
.ev-s3 .sheet { background: var(--ev-sheet); }
.ev-s3 .sheet-head { background: var(--ev-head); border-radius: 18px; padding: 8px 8px 8px 14px; }
.ev-s3 .tab.on, .ev-s3 .tray-cat:not(.on) { color: var(--ev-ink); }
.ev-s3 .chip.on, .ev-s3 .tray-cat.on { background: var(--ev-1); }
.ev-s3 .modal-card { position: relative; box-shadow: inset 0 0 0 3px var(--ev-line), 0 20px 50px #4A2B4F55; }
.ev-s3 .modal-card::before { content: var(--ev-icon); position: absolute; left: 50%; top: -24px; translate: -50% 0; font-size: 40px; filter: drop-shadow(0 3px 4px #0003); pointer-events: none; }
.ev-s3 .modal.reveal-host { background: var(--ev-reveal); }
.ev-s3 .toast { box-shadow: inset 0 0 0 2px var(--ev-line), 0 10px 30px #4A2B4F33; }
.ev-s3 .toast::before { content: var(--ev-icon); float: right; margin-left: 8px; font-size: 22px; }
.ev-s3 .choice { box-shadow: 0 4px 0 var(--ev-line), var(--shadow); }
.ev-s3 .game-card { box-shadow: inset 0 0 0 3px var(--ev-line), var(--shadow); }
/* Halloween: a touch of dusk over the scene all season (full dusk on the day itself) */
.ev-halloween.ev-s3 .dusk { opacity: .14; }
.ev-halloween.ev-s4 .scene .dusk { opacity: .3; }
/* holiday things answer taps (art.js eventScene, antics.js) */
.ev-top [data-tap] { pointer-events: auto; cursor: pointer; }
.ev-pumpkin.glow { filter: drop-shadow(0 0 7px #FFB347); }
.ev-pumpkin.glow .ev-face { fill: #FFE066; }
.ev-sweet { transition: opacity .3s; }
.ev-sweet.eaten { opacity: 0; pointer-events: none; }
.ev-brew circle { animation: evBrew 1.8s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.ev-brew circle:nth-child(2) { animation-delay: -.6s; } .ev-brew circle:nth-child(3) { animation-delay: -1.2s; }
@keyframes evBrew { 0% { transform: translateY(4px) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px) scale(1.1); opacity: 0; } }
.ev-cauldron.boil .ev-brew circle { animation-duration: .5s; }
.lucky.potion .l-art { filter: hue-rotate(var(--potion, 200deg)) saturate(1.3); }
.ev-bat.fast { animation-duration: 2.5s; }
[data-tap].spook { animation: spook .9s ease-in-out; }
@keyframes spook { 30% { transform: scale(1.35) translateY(-6px); } 60% { transform: scale(.9); } }
[data-tap].twirl { animation: twirlIt 1.3s ease-in-out; }
@keyframes twirlIt { to { transform: rotate(360deg); } }
.ev-spider.drop { animation: evSpiderDrop 1.7s ease-in-out; }
@keyframes evSpiderDrop { 0% { height: 60px; } 40%, 60% { height: 150px; } 100% { height: 60px; } }
.ev-spider.climb { animation: evSpiderUp 1.3s ease-in-out; }
@keyframes evSpiderUp { 50% { height: 12px; } }
.ev-tree.sparkle .ev-orn circle { animation: evOrn .3s ease-in-out infinite alternate; }
@keyframes evOrn { to { opacity: .35; } }
.ev-tree.sparkle { filter: drop-shadow(0 0 6px #FFE066); }
.ev-star.off { display: none; }
.ev-lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.ev-present.open .ev-lid { transform: translate(-6px, -12px) rotate(-24deg); }
[data-tap].rattle { animation: rattle .3s ease-in-out 3; }
@keyframes rattle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
[data-tap].wobble { transform-origin: 50% 100%; animation: wobble 1s ease-in-out; }
.ev-lights.flash .ev-bulb { animation: evBulb .25s ease-in-out infinite; }
.ev-balloon { transition: opacity .25s, transform .25s; }
.ev-balloon.popped { opacity: 0; transform: scale(.3); pointer-events: none; }
.ev-coin.found { opacity: 0; pointer-events: none; transition: opacity .5s; }
.ev-coin { animation: evEgg 4.5s ease-in-out infinite; transform-origin: 50% 90%; }
[data-tap].hopIt { animation: hopIt .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hopIt { 40% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .ev-brew circle, .ev-coin { animation: none !important; }
}
/* the holiday calendar: a button on the scene with the days to go, and a sheet of windows, one a day */
.ev-btn { left: auto; right: 12px; width: auto; min-width: 48px; padding: 0 9px; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 22px; animation-delay: -.6s; }
.ev-btn[hidden] { display: none; }
.ev-btn b { font-size: 15px; color: var(--ev-ink, var(--pink-d)); }
.ev-btn.waiting { box-shadow: 0 0 0 3px var(--ev-1, var(--pink)), var(--shadow); }
.ev-btn.waiting::after { content: ""; position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: #FF3B4E; box-shadow: 0 0 0 2px #fff; }
.cal-head small { color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; margin-top: 10px; }
.cal-day { position: relative; aspect-ratio: 1; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--ev-line, #F0D8E8), var(--shadow); display: grid; place-items: center; }
.cal-day .cd-num { position: absolute; left: 6px; top: 4px; font-size: 11px; font-weight: 800; color: var(--muted); }
.cal-day .cd-in { font-size: 26px; line-height: 1; }
.cal-day.future { opacity: .55; }
.cal-day.missed { background: var(--ev-card, #FFF0F7); box-shadow: 0 0 0 2px var(--ev-1, var(--pink)), 0 3px 0 var(--ev-line, #F0D8E8); } /* a window she missed waits */
.cal-day.now { background: var(--ev-card, #FFF0F7); box-shadow: 0 0 0 3px var(--ev-1, var(--pink)), 0 3px 0 var(--ev-line, #F0D8E8); animation: pulse 1.1s ease-in-out infinite; }
.cal-day.open { background: var(--ev-card, #FFF8FB); opacity: 1; filter: none; }
.cal-day.big { grid-column: span 2; aspect-ratio: auto; box-shadow: 0 0 0 3px #FFD23F, 0 3px 0 #E6A800; }
.cal-day.big .cd-in { font-size: 34px; }
.cal-day.opening { animation: calOpen .38s ease-in; }
@keyframes calOpen { 50% { transform: rotateY(90deg) scale(1.1); } }
/* ---------- the holiday games (arcade.js, holigames.js): a difficulty to choose, stars and records ---------- */
.g-holi-head { margin: 4px 0 0; font-weight: 800; color: var(--ev-ink, var(--pink-d)); }
.game-item { position: relative; }
.gi-best { position: absolute; right: 10px; top: 8px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); }
.g-levels { display: flex; gap: 8px; justify-content: center; margin: 4px 0 6px; }
.g-level { flex: 1; max-width: 104px; padding: 8px 4px; border-radius: 16px; background: #F4ECF7; font-size: 13px; font-weight: 800; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.g-level b { font-size: 24px; line-height: 1; }
.g-level.on { background: #fff; color: var(--ev-ink, var(--pink-d)); box-shadow: inset 0 0 0 3px var(--ev-1, var(--pink)), var(--shadow); }
.g-best { min-height: 18px; margin: 2px 0 6px !important; font-weight: 800; color: var(--muted); }
.g-record { margin: 4px 0 8px !important; font-size: 18px; font-weight: 900; color: #A06A00 !important; animation: pulse 1s ease-in-out infinite; }
/* three stars on this difficulty: the next one is suggested */
.g-next { display: inline-block; margin-top: 3px; font-size: 13px; color: var(--ev-ink, var(--pink-d)); }
.g-level.suggest:not(.on) { animation: pulse 1.4s ease-in-out infinite; box-shadow: inset 0 0 0 2px var(--ev-1, var(--pink)); }
.g-stars { display: flex; justify-content: center; gap: 6px; font-size: 44px; }
.g-stars i { font-style: normal; filter: grayscale(1) opacity(.35); }
.g-stars i.on { filter: none; animation: starPop .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.g-stars i.on:nth-child(2) { animation-delay: .2s; } .g-stars i.on:nth-child(3) { animation-delay: .4s; }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); } }
.g-mult { color: #A06A00; }
.arcade { display: block; touch-action: none; }
.mem.mem-8 .mem-card, .mem.mem-10 .mem-card { aspect-ratio: 1; }
.mem.mem-10 { grid-template-columns: repeat(5, 1fr); gap: 7px; }
.mem.mem-10 .mem-card span { font-size: 30px; border-radius: 14px; }

/* ---------- review 1.9.1: the same look everywhere, and the smallest phones ---------- */
/* New Year's yellow buttons and chips carry dark text (white on yellow was 1.4–2:1) */
body.ev-newyear.ev-s3 .btn.pink, body.ev-newyear.ev-s3 .chip.on, body.ev-newyear.ev-s3 .tray-cat.on, body.ev-newyear.ev-s3 .g-level.on { color: #4A2B00; text-shadow: none; }
.ev-s3 .chip.on, .ev-s3 .tray-cat.on { text-shadow: 0 1px 1px #0000004d; } /* white on the holiday colour reads better */
.ev-s3 .tile.sel, .ev-s3 .tile.sel.rare, .ev-s3 .tile.sel.gold { box-shadow: 0 0 0 3px var(--ev-1), var(--shadow); }
/* the mood check-in and other windows: a translation under a button's words */
.m-btns .btn small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.m-btns .btn.pink small { color: #ffffffd9; }
.game-card p small.g-sub { display: block; font-size: 13px; margin-top: 4px; }
/* a long line on a short screen: smaller text instead of covering Lucky's head */
.bubble.tight { font-size: 15px; padding: 8px 12px; line-height: 1.25; }
.bubble.tight .b-sub { font-size: 12px; margin-top: 3px; }
.bubble.tighter { font-size: 14px; line-height: 1.2; }
.bubble.tighter .b-sub { font-size: 11.5px; }
/* the best score in the Play list keeps clear of the game's name */
.game-item:has(.gi-best) .gi-text { padding-right: 56px; }
/* Collection and the phrase of the day keep one height: the tabs and the quiz don't make the sheet jump */
.sheet:has(.coll-tabs), .sheet:has(.quiz-box) { height: 86%; }
/* Home tiles in Collection are one height */
.tile-art.dec-tile { min-height: 0; overflow: hidden; }
.tile-art.dec-tile svg { width: 80%; height: 100%; }
/* the memory game's end card stands out from the cards */
.game:has(.game-card:not([hidden])) .game-stage { opacity: .35; }
/* the holiday's memory and Jingle Bells games in the holiday's colours */
.ev-s3 .g-holiday .mc-back { background: var(--ev-btn); }
.ev-s3 .g-holiday .simon-msg { color: var(--ev-ink); }
.ev-s3 .g-holiday .game-stage { background: var(--ev-head); }

@media (max-width: 340px) {
  .a-name { font-size: 10px; letter-spacing: -.2px; }
  .stat { padding: 5px; gap: 2px; }
  .s-ico { font-size: 15px; }
  .coll-tabs { flex-wrap: wrap; overflow-x: visible; }
  .coll-tabs .tab { flex: 1 0 30%; }
  .tray-cats { gap: 4px; }
  .tray-cat { min-width: 34px; padding: 6px; }
}
@media (max-height: 600px) {
  .sleep-content { justify-content: flex-start; overflow-y: auto; padding-top: calc(env(safe-area-inset-top) + 58px); }
  .sleep-lucky { width: min(42%, 180px); margin: 8px 0; }
  .sleep-content h1 { font-size: 24px; }
}