:root {
  --sb: clamp(96px, 10vw, 170px); /* base size for photo stickers */
  --msb: 80px;                    /* ...and on phones */
  --pink: #ffb8d6;
  --pink-deep: #ff6fae;
  --blue-deep: #7cb8ff;
  --lav: #c9b3ff;
  --ink: #5b3b52;
  --ink-soft: #94708b;
  --pix: "Tiny5", ui-monospace, monospace;
  --glitter: linear-gradient(transparent, transparent); /* replaced by a generated glitter texture */
  --px3: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink);
  --px4: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
  background: #ffe3f1;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  font-synthesis: none; /* keep pixel fonts crisp: no fake bold */
}

h1, h2 { font-weight: 400; }

/* ---------- holographic sky + glitter ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(125deg, #ffd6ec, #eadbff, #d2eaff, #fff0da, #ffd6ec, #e4d9ff);
  background-size: 400% 400%;
  animation: holo 40s ease-in-out infinite alternate;
}
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .45) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 75%);
}
@keyframes holo {
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}
#glitter { position: absolute; inset: 0; width: 100%; height: 100%; }

.pcloud {
  position: absolute;
  left: 0;
  top: var(--top);
  width: var(--w);
  aspect-ratio: 24 / 10;
  background: var(--img) center / contain no-repeat;
  filter: drop-shadow(0 6px 0 rgba(190, 160, 230, .22));
  animation: drift var(--t) linear var(--delay) infinite;
}
@keyframes drift {
  from { transform: translateX(-30vw); }
  to { transform: translateX(110vw); }
}

/* ---------- pixel buttons ---------- */
.pbtn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin: 4px;
  padding: .75em 1.2em;
  border: 0;
  font: 700 1.05rem/1 var(--pix);
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  box-shadow: var(--px4), 0 8px 0 0 var(--pink-deep), inset 0 -4px 0 0 #ffe0ee;
  cursor: pointer;
  transition: transform .08s steps(1);
}
.pbtn:hover { background: #fff5fa; transform: translateY(-2px); }
.pbtn:active { transform: translateY(4px); box-shadow: var(--px4), inset 0 -4px 0 0 #ffe0ee; }
.pbtn:focus-visible, .mail-row:focus-visible, .machine:focus-visible, .tb-x:focus-visible, .candle:focus-visible {
  outline: 3px dashed var(--blue-deep);
  outline-offset: 6px;
}

.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.pbtn.party { color: #fff; background: var(--pink-deep); box-shadow: var(--px4), 0 8px 0 0 #c94f8a, inset 0 -4px 0 0 #e8559a; }
.pbtn.party:hover { background: #ff85bb; }
.pbtn.party:active { box-shadow: var(--px4), inset 0 -4px 0 0 #e8559a; }

.blink { animation: blink 1s steps(1) infinite; }
.ico { display: inline-block; vertical-align: middle; image-rendering: pixelated; }
.ico.flip { transform: scaleX(-1); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  /* never shorter than this, so stickers have room around the title on short screens */
  min-height: max(100svh, 640px);
  display: grid;
  place-items: center;
  padding: 90px 16px 120px;
  text-align: center;
  overflow: hidden;
}
.hero-text { position: relative; z-index: 2; max-width: 920px; }

.xp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font: 700 .8rem var(--pix);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
#xpTo { color: var(--pink-deep); }
.xp-bar {
  width: clamp(110px, 28vw, 200px);
  height: 12px;
  margin: 0 2px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
}
.xp-fill {
  display: block;
  width: 0;
  height: 100%;
  background-image: var(--glitter), linear-gradient(90deg, #ffb8d6, #b48cff);
  background-size: 64px 64px, 100% 100%;
  animation: xpFill 1.6s steps(12) .3s forwards;
}
@keyframes xpFill { to { width: 100%; } }

.eyebrow {
  animation: pop .5s steps(4) 1.9s backwards;
  margin: 0 0 16px;
  font: 700 clamp(.85rem, 2.6vw, 1.05rem) var(--pix);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.title { position: relative; margin: 0; line-height: 1.08; }
.title .row { display: block; white-space: nowrap; }
.title .row1 {
  font: 700 min(clamp(2.2rem, 8.5vw, 5rem), 12vh) "Pixelify Sans", var(--pix);
  color: var(--pink-deep);
  text-shadow: 3px 3px 0 #fff, 6px 6px 0 var(--lav);
}
.title .row2 {
  margin-top: -.08em;
  padding: 0 .1em;
  font-family: "Darumadrop One", sans-serif;
  font-weight: 400;
  line-height: 1.15;
  font-size: min(clamp(3rem, 13vw, 8.5rem), calc(90vw / (var(--len) * .62)), 20vh);
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 5px 0 rgba(201, 179, 255, .85))
    drop-shadow(0 10px 14px rgba(160, 120, 200, .25));
}
.row2 .part { display: inline-block; }
@media (max-width: 600px) {
  .title .row2 {
    margin-top: -.04em;
    line-height: .78;
    font-size: min(clamp(3rem, 23vw, 6.5rem), calc(90vw / (var(--plen) * .66)), 14vh);
  }
  .row2 .part { display: block; }
}
.ch { display: inline-block; }
.ch.space { width: .32em; }
.row1 .ch {
  animation:
    hop 1.1s steps(1) calc(var(--i) * -.09s) infinite,
    pop .6s steps(4) calc(var(--i) * .04s) backwards;
}
.row2 .ch {
  color: transparent;
  background-image: var(--glitter-light), linear-gradient(180deg, var(--c2), var(--c) 70%);
  background-size: 72px 72px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation:
    bob 2.6s ease-in-out calc(var(--i) * -.17s) infinite,
    pop .7s cubic-bezier(.3, 1.7, .5, 1) calc(.6s + var(--i) * .05s) backwards;
}
@keyframes hop { 50% { transform: translateY(-5px); } }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-9px) rotate(3deg); }
}
@keyframes pop { from { transform: scale(0) translateY(40px); opacity: 0; } }

.glint {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
  animation: glint .8s steps(4) forwards;
}
@keyframes glint {
  0% { transform: translate(-50%, -50%) scale(0); }
  50% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(0); }
}

.sub {
  margin: 22px auto 30px;
  max-width: 30ch;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 800;
  color: var(--ink-soft);
}

.hint {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0;
  font: 500 .85rem var(--pix);
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/* ---------- stickers ---------- */
.sticker {
  position: absolute;
  z-index: 3;
  left: min(var(--x), calc(100% - var(--size) - 8px));
  top: min(var(--y), calc(100% - var(--size) - 110px));
  width: var(--size);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 10px 12px rgba(150, 100, 170, .25));
}
.sticker .inner {
  display: block;
  transform: rotate(var(--rot));
  animation: float 4.5s ease-in-out var(--delay) infinite;
}
.sticker svg, .sticker img { display: block; width: 100%; height: auto; pointer-events: none; }
.sticker.dragging { cursor: grabbing; }
.sticker.dragging .inner { animation: none; transform: rotate(var(--rot)) scale(1.12); }
.sticker.boing { animation: boing .6s cubic-bezier(.3, 1.6, .5, 1); }
@media (min-width: 601px) and (max-width: 1100px) {
  .sticker.roomy-only { display: none; }
}
@media (max-width: 600px) {
  .hero { min-height: max(100svh, 780px); }
  .sticker.wide-only { display: none; }
  .sticker {
    width: var(--msize, var(--size));
    left: min(var(--mx, var(--x)), calc(100% - var(--msize, var(--size)) - 8px));
    top: min(var(--my, var(--y)), calc(100% - var(--msize, var(--size)) - 100px));
  }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50% { transform: translateY(-12px) rotate(calc(var(--rot) * -1)); }
}
@keyframes boing {
  30% { transform: scale(1.25, .85); }
  55% { transform: scale(.9, 1.12); }
  80% { transform: scale(1.04, .97); }
}

/* ---------- kitten parade ---------- */
.parade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  height: 48px;
  z-index: 2;
  pointer-events: none;
}
.pcat {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: auto;
  cursor: pointer;
  animation: walk var(--t) linear var(--delay) infinite;
}
.pcat.rev { animation-name: walkback; }
@keyframes walk {
  from { transform: translateX(-80px); }
  to { transform: translateX(calc(100vw + 20px)); }
}
@keyframes walkback {
  from { transform: translateX(calc(100vw + 20px)) scaleX(-1); }
  to { transform: translateX(-80px) scaleX(-1); }
}
.pbody { position: relative; display: block; width: 60px; height: 42px; }
.pbody img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pbody .fa { animation: frame .5s steps(1) infinite; }
.pbody .fb { animation: frame .5s steps(1) -.25s infinite; }
@keyframes frame { 50% { opacity: 0; } }
.pcat.hop .pbody { animation: catHop .5s steps(3); }
@keyframes catHop { 50% { transform: translateY(-20px); } }
.bubble {
  position: absolute;
  bottom: 52px;
  left: 50%;
  margin-left: -32px;
  width: 64px;
  padding: 5px 0;
  font: 700 .85rem/1 var(--pix);
  text-align: center;
  background: #fff;
  box-shadow: var(--px3);
  opacity: 0;
  pointer-events: none;
}
.pcat.rev .bubble { transform: scaleX(-1); }
.pcat.talk .bubble { animation: say 1.4s steps(1); }
@keyframes say { 0%, 90% { opacity: 1; } }

/* ---------- cursor kitty ---------- */
.chaser {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}
.chaser img { display: block; }
.zzz {
  position: absolute;
  right: -10px;
  top: -18px;
  display: none;
  font: 700 16px var(--pix);
  color: var(--ink-soft);
  animation: zz 2.4s steps(6) infinite;
}
.zzz small { font-size: 11px; margin-left: 2px; vertical-align: super; }
.chaser.sleep .zzz { display: block; }
@keyframes zz {
  from { transform: translate(0, 4px); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translate(8px, -10px); opacity: 0; }
}

/* ---------- windows ---------- */
.panel { max-width: 820px; margin: 0 auto; padding: clamp(50px, 8vw, 90px) clamp(24px, 5vw, 40px); }

.window {
  position: relative;
  margin: 4px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--px4), 10px 14px 0 0 rgba(170, 130, 220, .35);
}
.titlebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .8) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen {
  0% { background-position: 120% 0; }
  45%, 100% { background-position: -20% 0; }
}
.window.nope { animation: nope .45s steps(2); }
@keyframes nope {
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
}

.titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  background-image: var(--glitter), linear-gradient(90deg, #ffb8d6, #dcc8ff 55%, #bfe0ff);
  background-size: 64px 64px, 100% 100%;
  border-bottom: 4px solid var(--ink);
  font: 700 1rem var(--pix);
  letter-spacing: .03em;
}
.tb-title { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-btns { display: flex; gap: 8px; flex: none; }
.tb-btns i, .tb-x {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 2px;
  padding: 0;
  border: 0;
  font: 700 14px/1 var(--pix);
  font-style: normal;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
}
.tb-x { background: #ffd0e3; cursor: pointer; }

.win-body { padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 40px); text-align: center; }
.win-body h2 {
  margin: 0;
  font-family: "Mochiy Pop One", sans-serif;
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  color: var(--pink-deep);
  text-shadow: 0 3px 0 #fff, 4px 6px 0 rgba(201, 179, 255, .6);
}
.lead {
  max-width: 38ch;
  margin: 12px auto 0;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ink-soft);
}

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s cubic-bezier(.2, .8, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- cake ---------- */
.cake-wrap { width: min(340px, 74vw, max(220px, 40vh)); margin: 0 auto; }
.cake-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.candle { cursor: pointer; outline: none; }
.flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flicker .9s ease-in-out infinite alternate;
  transition: opacity .3s, transform .3s;
}
.candle:nth-child(2n) .flame { animation-delay: -.4s; animation-duration: .7s; }
@keyframes flicker {
  0% { transform: scale(1, 1) rotate(-3deg); }
  100% { transform: scale(.92, 1.1) rotate(3deg); }
}
.candle.out .flame { opacity: 0; transform: scale(0); animation: none; }
.smoke { transform-box: fill-box; transform-origin: center; animation: smoke 1.4s ease-out forwards; }
@keyframes smoke {
  from { opacity: .8; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-40px) scale(3); }
}
.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 18px; }
.cake-msg {
  min-height: 1.6em;
  margin: 12px auto -8px;
  font: 700 clamp(1.1rem, 4vw, 1.4rem) var(--pix);
  color: var(--pink-deep);
}

/* ---------- inbox + letter ---------- */
.mail-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: calc(100% - 8px);
  max-width: 560px;
  margin: 30px auto 0;
  padding: 14px 18px;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: #fff;
  box-shadow: var(--px4), 0 8px 0 0 var(--pink-deep);
  cursor: pointer;
}
.mail-row:hover { background: #fff5fa; }
.mail-row.read { cursor: default; background: #fbf6fa; }
.mail-row.read .badge, .mail-row.read .mail-open { display: none; }
.mail-icon { position: relative; flex: none; width: 56px; animation: wig 1.2s steps(1) infinite; }
.mail-row.read .mail-icon { animation: none; }
.mail-icon img { display: block; width: 100%; height: auto; }
@keyframes wig { 50% { transform: rotate(-8deg); } }
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  font: 700 13px/22px var(--pix);
  text-align: center;
  color: #fff;
  background: var(--pink-deep);
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
}
.mail-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mail-from { font-size: .9rem; color: var(--ink-soft); }
.mail-subj { font-weight: 800; font-size: 1.05rem; }
.mail-open { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 700 1rem var(--pix); color: var(--pink-deep); animation: blink 1.2s steps(1) infinite; }

.letter {
  position: relative;
  max-width: 600px;
  margin: 34px auto 0;
  padding: 44px clamp(20px, 5vw, 44px) 36px;
  text-align: left;
  font-family: "Gaegu", cursive;
  font-size: clamp(1.25rem, 3.6vw, 1.45rem);
  line-height: 34px;
  background: #fffaf2 repeating-linear-gradient(transparent 0 33px, #ffdcea 33px 34px);
  background-position: 0 32px;
  box-shadow: var(--px3), 8px 10px 0 0 rgba(255, 143, 191, .3);
  cursor: pointer;
}
.letter::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 120px;
  height: 28px;
  margin-left: -60px;
  background: repeating-linear-gradient(45deg, rgba(196, 228, 255, .95) 0 8px, rgba(255, 255, 255, .95) 8px 16px);
  transform: rotate(-3deg);
}
.letter p { margin: 0 0 34px; }
.letter .signoff { margin: 0; text-align: right; font-weight: 700; color: var(--pink-deep); }
.letter .signoff img { width: 18px; margin-left: 6px; vertical-align: -2px; }
.caret {
  display: inline-block;
  width: .45em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -3px;
  background: var(--pink-deep);
  animation: blink .8s steps(1) infinite;
}
.skip-hint { margin: 14px 0 0; font: 500 .85rem var(--pix); color: var(--ink-soft); }

/* ---------- gacha ---------- */
.gacha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 36px);
  align-items: center;
  margin-top: 22px;
  text-align: left;
}
@media (max-width: 720px) { .gacha { grid-template-columns: 1fr; } }
.gacha-stage { position: relative; display: flex; justify-content: center; padding-bottom: 56px; }
.machine {
  position: relative;
  display: block;
  width: min(250px, 62vw, max(200px, 36vh));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.machine svg { display: block; width: 100%; height: auto; overflow: visible; }
.knob-g { transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.dome-caps { transform-box: fill-box; transform-origin: center; }
.machine.shake .dome-caps { animation: rattle .6s steps(6); }
@keyframes rattle {
  20% { transform: translate(-4px, -3px) rotate(-3deg); }
  40% { transform: translate(4px, 2px) rotate(3deg); }
  60% { transform: translate(-3px, 3px) rotate(-2deg); }
  80% { transform: translate(3px, -2px) rotate(2deg); }
}
.turnme {
  position: absolute;
  right: -6px;
  top: 100%;
  margin-top: 10px;
  padding: 6px 8px;
  font: 700 .85rem/1 var(--pix);
  color: var(--ink);
  white-space: nowrap;
  background: #fff;
  box-shadow: var(--px3);
  animation: hop 1s steps(1) infinite;
}
.capsule {
  position: absolute;
  left: 37.3%;
  top: 85%;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  pointer-events: none;
}
.capsule span {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  border: 3px solid var(--ink);
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .4s .6s;
}
.cap-top { top: 0; border-radius: 22px 22px 0 0; border-bottom-width: 1.5px !important; background: var(--c); }
.cap-bot { bottom: 0; border-radius: 0 0 22px 22px; border-top-width: 1.5px !important; background: #fff; }
.capsule.open .cap-top { transform: translate(-20px, -24px) rotate(-35deg); opacity: 0; }
.capsule.open .cap-bot { transform: translate(16px, 8px) rotate(25deg); opacity: 0; }

.prize {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  margin: 4px;
  padding: 16px 18px;
  background-image: var(--glitter), linear-gradient(135deg, #fff2f9, #efe8ff 60%, #e6f3ff);
  background-size: 64px 64px, 100% 100%;
  box-shadow: var(--px4), 8px 10px 0 0 rgba(180, 140, 255, .3);
}
.prize.pop { animation: prizePop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes prizePop { from { transform: scale(.85) rotate(-2deg); } }
.p-emoji {
  display: grid;
  place-items: center;
  flex: none;
  width: 68px;
  height: 68px;
  margin: 3px;
  font: 700 2.6rem/1 var(--pix);
  color: #d3c3d9;
  background: #fff;
  box-shadow: var(--px3);
}
.p-emoji:has(img) { background: none; box-shadow: none; }
.p-label { font: 700 .85rem var(--pix); letter-spacing: .08em; text-transform: uppercase; color: #a685f5; }
.p-text { margin-top: 6px; font-weight: 800; font-size: 1.15rem; }

.coll-title { margin: 24px 4px 10px; font: 700 1rem var(--pix); }
.collection {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 104px;
  padding: 12px 6px 10px;
  text-align: center;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: break-word;
  background: rgba(255, 255, 255, .85);
  box-shadow: var(--px3);
}
.slot .s-emoji { display: flex; flex: none; align-items: center; justify-content: center; height: 36px; }
@media (max-width: 720px) { .collection { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot.locked { color: #bca9bb; background: rgba(255, 255, 255, .45); }
.slot.locked .s-emoji { font: 1.6rem/1 var(--pix); color: #d8c8de; }
.slot.new { animation: slotPop .6s steps(3); }
@keyframes slotPop { 50% { transform: scale(1.12); } }

/* ---------- footer ---------- */
.footer { position: relative; overflow: hidden; padding: 20px 16px 100px; text-align: center; font-weight: 800; color: var(--ink-soft); }
.footer .sticker { top: min(var(--y), calc(100% - var(--size))); }
@media (max-width: 600px) {
  /* room above and below the footer text for its stickers */
  .footer { padding-top: 150px; padding-bottom: 120px; }
  .footer .sticker { top: min(var(--my, var(--y)), calc(100% - var(--msize, var(--size)))); }
}
.footer p { margin: 24px 0 0; }
.footer-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }

/* dance party: Chika bottom-left (mirrored to face in), two little scuba cats bottom-right */
.dancers { position: fixed; inset: auto 0 0 0; z-index: 90; pointer-events: none; }
.dancers img { display: block; }
.dancers .flip { transform: scaleX(-1); }
.dancers .chika,
.dance-cats {
  position: absolute;
  bottom: 0;
  transform: translateY(110%);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.dancers .chika { left: max(0px, calc(50% - 640px)); height: min(44vh, 400px); transform: translateY(110%) scaleX(-1); }
.dance-cats { --cat: min(24vh, 215px); right: max(0px, calc(50% - 640px)); display: flex; align-items: flex-end; transition-delay: .12s; }
.dance-cats img { height: var(--cat); }
/* the gif has empty space on its right, so the mirrored second cat tucks in close */
.dance-cats img + img { margin-left: calc(var(--cat) * -.35); }
.dancers.on .chika { transform: translateY(0) scaleX(-1); }
.dancers.on .dance-cats { transform: translateY(0); }
@media (max-width: 600px) {
  /* phones: one little group in the bottom centre instead of two corners */
  .dancers { display: flex; justify-content: center; align-items: flex-end; }
  .dancers .chika, .dance-cats { position: relative; left: auto; right: auto; }
  .dancers .chika { height: min(28vh, 220px, 56vw); margin-right: -10px; }
  .dance-cats { --cat: min(16vh, 120px, 31vw); }
}
.lovebar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 4px 28px;
  padding: 10px 14px;
  font: 700 1rem var(--pix);
  color: var(--ink);
  background: rgba(255, 255, 255, .8);
  box-shadow: var(--px3);
}
.hearts { display: flex; gap: 3px; }
.hearts img { display: block; width: 18px; opacity: .2; }
.hearts img.on { opacity: 1; animation: slotPop .3s steps(2); }
.max { color: var(--pink-deep); visibility: hidden; }
.max.on { visibility: visible; animation: blink 1s steps(1) infinite; }

.stamp {
  display: inline-block;
  margin: 26px 4px 0 !important;
  padding: 6px 12px;
  font: 700 .9rem var(--pix);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pink-deep);
  border: 3px dashed var(--pink-deep);
  transform: rotate(-3deg);
}

/* ---------- birthday lock screen ---------- */
.booting > header, .booting > main, .booting > footer, .booting > .chaser { visibility: hidden; }
body.locked { overflow: hidden; }
body.locked > header, body.locked > main, body.locked > footer, body.locked > .chaser { display: none; }
.lock {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.lock-win { width: min(520px, 100%); }
.lock.leaving { animation: lockOut .6s steps(5) forwards; }
@keyframes lockOut { to { opacity: 0; transform: scale(1.08); } }
.lock-cat {
  position: relative;
  display: block;
  margin: 0 auto 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lock-cat img { display: block; width: 112px; height: auto; }
.lock-cat .zzz { display: block; right: -22px; top: -20px; font-size: 22px; }
.lock-cat.boing { animation: boing .6s cubic-bezier(.3, 1.6, .5, 1); }
.countdown { display: flex; justify-content: center; gap: 10px; margin: 26px 0 6px; }
.countdown div {
  flex: 1;
  max-width: 84px;
  margin: 3px;
  padding: 12px 4px 8px;
  background: #fff;
  box-shadow: var(--px3);
}
.countdown b { display: block; font: 700 clamp(1.5rem, 7vw, 2.2rem)/1 var(--pix); color: var(--pink-deep); }
.countdown span { font: 500 .72rem var(--pix); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.bake {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  font: 500 .85rem var(--pix);
  color: var(--ink-soft);
}
.bake-bar {
  width: 140px;
  height: 14px;
  background: #fff;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
}
.bake-fill {
  display: block;
  width: var(--p, 5%);
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--pink-deep) 0 8px, #ff9fc6 8px 12px);
}

/* ---------- effects ---------- */
.fx {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  line-height: 1;
  will-change: transform, opacity;
}
.fx-sq { width: var(--s); height: var(--s); background: var(--c); box-shadow: 0 0 6px rgba(255, 255, 255, .8); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .pcloud, .parade, .chaser { display: none; }
}