/* ─────────────────────────────────────────────────────────
   ชูก้า Love Love · Kawaii Cloudland edition
   ───────────────────────────────────────────────────────── */

:root {
  color-scheme: light;
  /* Backgrounds */
  --paper: #fdf6ee;
  --paper-2: #fce8d8;
  --polaroid: #fffcf8;

  /* Accent palette */
  --hot-pink: #ff3d7f;
  --soft-pink: #ffb8cc;
  --lavender: #c9aff5;
  --lavender-deep: #9060e0;
  --mint: #9ee8c8;
  --mint-deep: #2aa870;
  --peach: #ffcba0;
  --yolk: #ffeaa0;
  --sky: #a8d8f0;

  /* Text */
  --ink: #3a2840;
  --ink-soft: #8a7090;

  /* Semantic aliases kept for backward compat with JS */
  --rose: #ff3d7f;
  --rose-deep: #c0003c;
  --teal: #2aa870;
  --highlighter: #ffeaa0;
  --rule-red: rgba(255,61,127,.2);

  /* Tape colors */
  --tape-yellow: #ffeaa0;
  --tape-pink: #ffb8cc;
  --tape-blue: #a8d8f0;
  --tape-mint: #9ee8c8;
  --tape-lavender: #c9aff5;

  /* Shadows */
  --card-shadow: rgba(180,120,160,.18);
  --card-shadow-deep: rgba(180,120,160,.3);

  /* Fonts */
  --f-hand:   "Playpen Sans Thai", "Itim", cursive;
  --f-title:  "Mali", "Playpen Sans Thai", cursive;
  --f-script: "Playpen Sans Thai", "Mali", cursive;
  --f-marker: "Mali", "Playpen Sans Thai", cursive;
  --f-italic: "Itim", "Playpen Sans Thai", cursive;
  --f-label:  "Itim", cursive;
}

/* ─── palette variants ─── */
.palette-blossom {
  --paper: #fdf6ee; --paper-2: #fce8d8;
  --rose: #ff3d7f; --rose-deep: #c0003c;
  --highlighter: #ffeaa0; --teal: #2aa870;
  --rule-red: rgba(255,61,127,.2);
}
.palette-cloud {
  --paper: #f4eeff; --paper-2: #e8d8ff;
  --polaroid: #faf6ff;
  --rose: #9060e0; --rose-deep: #6030b0;
  --highlighter: #c9aff5; --teal: #6040c0;
  --rule-red: rgba(144,96,224,.25);
  --soft-pink: #c9aff5; --tape-pink: #c9aff5;
}
.palette-meadow {
  --paper: #edfaf3; --paper-2: #d6f0e4;
  --polaroid: #f4fdf8;
  --rose: #2aa870; --rose-deep: #1a7850;
  --highlighter: #9ee8c8; --teal: #2aa870;
  --rule-red: rgba(42,168,112,.25);
  --soft-pink: #9ee8c8; --tape-pink: #9ee8c8;
}
.palette-sunshine {
  --paper: #fffae8; --paper-2: #fff0c4;
  --polaroid: #fffef4;
  --rose: #d07030; --rose-deep: #a04010;
  --highlighter: #ffeaa0; --teal: #c08030;
  --rule-red: rgba(208,112,48,.25);
  --soft-pink: #ffcba0; --tape-pink: #ffcba0;
}

/* ─── base ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; }
.about, .cat-story, .tarot, .gallery { scroll-margin-top: 20px; }

body {
  font-family: var(--f-hand);
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 50% at 20% 15%, rgba(201,175,245,.22), transparent),
    radial-gradient(ellipse 50% 40% at 80% 75%, rgba(158,232,200,.2), transparent),
    radial-gradient(ellipse 40% 35% at 70% 10%, rgba(255,184,204,.25), transparent),
    radial-gradient(ellipse 35% 30% at 15% 80%, rgba(255,203,160,.18), transparent),
    var(--paper);
  min-height: 100vh;
  line-height: 1.4;
  transition: background .6s ease, color .6s ease;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='28' height='28'><path d='M15 26 C 4 17,5 8,10 8 C 13 8,15 10,15 12 C 15 10,17 8,20 8 C 25 8,26 17,15 26 Z' fill='%23ff3d7f' stroke='%23fff' stroke-width='1.5'/></svg>") 14 14, auto;
}

a, button, .pettable, .draw-btn, .dl-button, .gallery-polaroid {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='28' height='28'><path d='M15 26 C 4 17,5 8,10 8 C 13 8,15 10,15 12 C 15 10,17 8,20 8 C 25 8,26 17,15 26 Z' fill='%23ff3d7f' stroke='%23fff' stroke-width='1.5'/></svg>") 14 14, pointer;
}

/* ─── shell ─── */
.shell {
  position: relative; z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  padding: 36px 30px 80px;
}
.shell-paper { position: relative; }
/* No notebook lines on shell — lines only inside reading panel */
.shell-paper::before { display: none; }
.shell-paper::after  { display: none; }

/* ─── floating bg ─── */
.bg-float {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.bg-float .glyph {
  position: absolute; bottom: -40px; opacity: 0;
  animation: float-up linear infinite;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(180,120,160,.2));
}
@keyframes float-up {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .25; }
  90%  { opacity: .18; }
  100% { transform: translateY(-110vh) rotate(var(--rot,360deg)); opacity: 0; }
}

/* ─── washi divider ─── */
.washi-divider {
  width: 100%;
  height: 22px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,184,204,.65) 0px,  rgba(255,184,204,.65) 15px,
    rgba(201,175,245,.65) 15px, rgba(201,175,245,.65) 30px,
    rgba(158,232,200,.65) 30px, rgba(158,232,200,.65) 45px,
    rgba(255,234,160,.65) 45px, rgba(255,234,160,.65) 60px
  );
  margin: 16px 0 40px;
  position: relative;
  overflow: visible;
}
.washi-divider::before,
.washi-divider::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  background: var(--paper);
  transform: skewX(-8deg);
}
.washi-divider::before { left: -12px; }
.washi-divider::after  { right: -12px; }

/* ─── heart burst ─── */
.heart-burst {
  position: fixed; pointer-events: none; z-index: 50;
  font-size: 28px;
  animation: heart-rise 1.4s ease-out forwards;
}
@keyframes heart-rise {
  0%   { transform: translate(-50%,-50%) scale(.4) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx,0px)), calc(-50% - 140px)) scale(1.2) rotate(var(--rot,30deg)); opacity: 0; }
}

/* confetti on download */
.confetti {
  position: fixed; pointer-events: none; z-index: 60;
  font-size: 24px;
  animation: confetti-fall var(--dur, 1.6s) ease-out forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(-50%,-50%) scale(.2) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,260px))) scale(1) rotate(var(--rot,180deg)); opacity: 0; }
}

/* ─── top bar ─── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 36px;
  position: relative; z-index: 2;
}

/* ── brand / logo ── */
.brand {
  display: inline-flex; align-items: center; gap: 16px;
  text-decoration: none;
}
.brand-logo {
  position: relative;
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: var(--polaroid);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink), 0 5px 12px var(--card-shadow);
  transform: rotate(-3deg);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.brand-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 11px;
  display: block;
}
.brand:hover .brand-logo { transform: rotate(3deg) scale(1.05); }
.brand-dot {
  position: absolute; top: -4px; right: -4px;
  width: 13px; height: 13px;
  background: var(--hot-pink);
  border: 2.5px solid var(--polaroid);
  border-radius: 50%;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b {
  font-family: var(--f-title); font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px); color: var(--ink);
}
.brand-text i {
  font-style: normal; font-family: var(--f-label);
  font-size: 11px; letter-spacing: .22em; color: var(--ink-soft);
}

/* ── center nav ── */
.topnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.topnav-link {
  font-family: var(--f-title); font-weight: 600;
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--ink); text-decoration: none;
  padding: 8px 18px; border-radius: 50px;
  transition: background .2s ease, color .2s ease;
}
.topnav-link:hover { background: var(--soft-pink); }
.topnav-link.active {
  background: var(--ink); color: var(--polaroid);
  box-shadow: 0 3px 10px var(--card-shadow-deep);
}

.topbar-right { display: flex; gap: 10px; align-items: center; }

/* clock chip */
.clock-chip {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--f-title);
  font-size: 20px;
  letter-spacing: .02em;
  background: var(--polaroid);
  color: var(--ink);
  border: 2.5px solid var(--lavender);
  border-radius: 50px;
  padding: 5px 14px;
  box-shadow: 0 3px 0 var(--lavender), 0 4px 12px var(--card-shadow);
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  font-variant-numeric: tabular-nums;
}
.clock-chip .meridian {
  font-family: var(--f-label); font-size: 11px;
  color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase;
}

/* ─── greeting sticker ─── */
.greet-sticker {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 14px;
  background: var(--polaroid);
  border: 2.5px solid var(--soft-pink);
  border-radius: 16px;
  padding: 8px 18px 10px;
  box-shadow: 0 4px 0 var(--soft-pink), 0 6px 18px var(--card-shadow);
  font-family: var(--f-script);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.greet-sticker:hover { transform: translateY(-2px) rotate(1deg); }
.greet-sticker .greet-ico {
  font-size: 26px; line-height: 1;
  transform: rotate(-6deg); display: inline-block;
}
.greet-sticker .greet-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.greet-sticker .greet-text b {
  font-family: var(--f-title); font-weight: 700; font-size: 20px; color: var(--ink);
}
.greet-sticker .greet-text i {
  font-family: var(--f-italic); font-style: normal;
  font-size: 13px; color: var(--hot-pink); letter-spacing: .03em;
}

/* ─── HEADLINE ─── */
.headline {
  text-align: center; margin-bottom: 36px; position: relative;
}
.headline .date-stamp {
  display: inline-block;
  font-family: var(--f-label);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: .08em;
  background: var(--yolk);
  border-radius: 50px;
  padding: 4px 16px;
  box-shadow: 0 3px 0 rgba(180,120,160,.2), 0 4px 12px var(--card-shadow);
  transform: rotate(-1.5deg);
  margin-bottom: 8px;
}
.headline h1 {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(56px,8vw,90px);
  line-height: .88;
  margin: 10px 0 6px;
  transform: rotate(-1deg);
}
.headline h1 .ink { color: var(--ink); }
.headline h1 .pink { color: var(--hot-pink); }
.headline .sub {
  font-family: var(--f-italic);
  color: var(--ink-soft); font-size: 20px;
  transform: rotate(.5deg); display: inline-block; margin-top: 2px;
}

/* ─── SECTION HEAD ─── */
.section-head {
  text-align: center; margin-bottom: 28px; position: relative;
}
.section-head .label {
  font-family: var(--f-label);
  color: var(--hot-pink); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-block;
  background: var(--soft-pink);
  padding: 3px 14px; border-radius: 50px;
  opacity: .85;
  margin-bottom: 6px;
}
.section-head .label::before,
.section-head .label::after { content: none; }
.section-head h2 {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(36px,4.5vw,52px);
  line-height: .9; margin: 6px 0 4px;
  color: var(--ink);
}
.section-head h2 em {
  font-style: normal; color: var(--hot-pink); position: relative;
}
.section-head h2 em::before {
  content: ""; position: absolute; left: -3%; right: -3%;
  bottom: 10%; height: 12px;
  background: var(--yolk); z-index: -1; opacity: .9; border-radius: 4px;
}
.section-head .sub {
  font-family: var(--f-italic); color: var(--ink-soft); font-size: 17px;
}

/* ─── tape ─── */
.tape {
  position: absolute;
  background: var(--tape-yellow);
  opacity: .9;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.45) 8px 9px);
  z-index: 2;
  border-radius: 2px;
}
.tape.pink     { background: var(--tape-pink);     background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.45) 8px 9px); }
.tape.blue     { background: var(--tape-blue);     background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.45) 8px 9px); }
.tape.mint     { background: var(--tape-mint);     background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.45) 8px 9px); }
.tape.lavender { background: var(--tape-lavender); background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.45) 8px 9px); }

/* ─── HERO ─── */
.hero {
  display: grid; grid-template-columns: 360px 1fr; gap: 36px;
  align-items: start; margin-bottom: 60px;
  position: relative; z-index: 1;
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
}
@media (max-width: 820px) {
  .topbar { justify-content: center; }
  .topnav { order: 3; width: 100%; }
}
@media (max-width: 540px) {
  .shell { padding: 24px 16px 64px; }
  .topbar { justify-content: center; margin-bottom: 24px; }
  .topnav-link { padding: 7px 13px; }
  .topbar-right { flex-wrap: wrap; justify-content: center; }
  .clock-chip { font-size: 17px; padding: 4px 12px; }
  .hero-polaroid { width: 100%; max-width: 320px; }
  .hero-polaroid .corner-note { right: 6px; bottom: -16px; }
}

.hero-polaroid {
  position: relative;
  background: var(--polaroid);
  padding: 18px;
  border-radius: 20px;
  border: 3px solid var(--soft-pink);
  box-shadow: 0 6px 0 var(--soft-pink), 0 12px 36px var(--card-shadow);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
  width: 340px; margin: 0 auto;
  transform: rotate(-2deg);
}
.hero-polaroid:hover {
  transform: rotate(-1deg) scale(1.02);
  box-shadow: 0 8px 0 var(--soft-pink), 0 18px 48px var(--card-shadow-deep);
}
.hero-polaroid .photo-frame {
  width: 100%; aspect-ratio: 3/4;
  background: var(--paper-2);
  border-radius: 12px;
  overflow: hidden;
}
.hero-polaroid .photo-frame image-slot { width: 100%; height: 100%; display: block; }
.hero-polaroid .caption {
  text-align: center; margin-top: 14px;
  font-family: var(--f-title); font-weight: 700; font-size: 28px;
  color: var(--ink); line-height: 1;
}
.hero-polaroid .caption .heart { color: var(--hot-pink); }
.hero-polaroid .corner-note {
  position: absolute; bottom: -20px; right: -20px;
  background: var(--yolk);
  border-radius: 8px;
  transform: rotate(8deg);
  padding: 5px 14px;
  font-family: var(--f-label); color: var(--ink); font-size: 13px;
  box-shadow: 0 3px 10px var(--card-shadow); z-index: 3;
}
.hero-polaroid .heart-stamp {
  position: absolute; top: -16px; right: -8px;
  color: var(--hot-pink); font-size: 36px;
  transform: rotate(15deg); z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(255,61,127,.3));
}
.hero-polaroid .tape.t1 { top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 130px; height: 24px; }
.hero-polaroid .tape.t2 { bottom: 30px; left: -14px; transform: rotate(-12deg); width: 66px; height: 18px; }

/* speech bubble */
.speech {
  position: absolute; top: -24px; left: -16px;
  background: var(--polaroid);
  color: var(--ink);
  padding: 10px 18px;
  border: 2.5px solid var(--soft-pink);
  border-radius: 16px;
  font: 700 20px var(--f-title);
  box-shadow: 0 4px 0 var(--soft-pink), 0 6px 18px var(--card-shadow);
  transform: rotate(4deg);
  white-space: nowrap; z-index: 5;
  animation: pop-in .35s cubic-bezier(.5,1.8,.5,1);
}
.speech::after {
  content: ""; position: absolute; bottom: -12px; left: 22px;
  border: 7px solid transparent; border-top-color: var(--soft-pink);
}
.speech::before {
  content: ""; position: absolute; bottom: -8px; left: 25px;
  border: 5px solid transparent; border-top-color: var(--polaroid); z-index: 1;
}
@keyframes pop-in {
  0%   { transform: rotate(4deg) scale(.5); opacity: 0; }
  100% { transform: rotate(4deg) scale(1); opacity: 1; }
}
.lucky-speech { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
.lucky-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.lucky-nums { font-size: 27px; letter-spacing: 1px; }
.lucky-nums b { color: var(--hot-pink); }

/* hero right text */
.hero-text { padding-top: 8px; position: relative; }
.hero-text .super {
  font-family: var(--f-label);
  color: var(--ink); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--yolk);
  padding: 3px 14px; border-radius: 50px;
  margin-bottom: 12px; display: inline-block;
  box-shadow: 0 2px 8px var(--card-shadow);
}
.hero-text h2 {
  font-family: var(--f-title); font-weight: 700;
  font-size: clamp(34px,3.8vw,48px);
  line-height: .95; margin: 0 0 12px; color: var(--ink);
}
.hero-text h2 em { font-style: normal; color: var(--hot-pink); }
.hero-text p {
  font-family: var(--f-hand); font-size: 17px; line-height: 1.55;
  margin: 0 0 16px; color: var(--ink); max-width: 36ch;
}
.hero-text p .marker { background: var(--yolk); padding: 0 3px; border-radius: 3px; }
.hero-text p .underline {
  text-decoration: underline wavy var(--hot-pink) 1.5px;
  text-underline-offset: 4px;
}

/* chips */
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.scrap-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-label); font-size: 14px; font-weight: 600;
  color: var(--ink);
  background: var(--polaroid);
  border: 2px solid var(--soft-pink);
  border-radius: 50px;
  padding: 4px 14px;
  box-shadow: 0 3px 0 var(--soft-pink), 0 4px 10px var(--card-shadow);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.scrap-chip:hover { transform: translateY(-2px) rotate(-2deg); }
.scrap-chip:nth-child(2n) { border-color: var(--lavender); box-shadow: 0 3px 0 var(--lavender), 0 4px 10px var(--card-shadow); }
.scrap-chip:nth-child(3n) { border-color: var(--mint); box-shadow: 0 3px 0 var(--mint), 0 4px 10px var(--card-shadow); }
.scrap-chip:nth-child(4n) { border-color: var(--peach); box-shadow: 0 3px 0 var(--peach), 0 4px 10px var(--card-shadow); }

/* jok-pung sticker cta */
.jok-pung-cta {
  display: inline-block; position: relative;
  width: 100%; max-width: 230px;
  margin-top: 6px; text-decoration: none;
  font: inherit;
  cursor: pointer;
  transform: rotate(-2deg);
  background: #fff;
  padding: 8px;
  border-radius: 18px;
  border: 3px solid var(--soft-pink);
  box-shadow: 0 5px 0 var(--soft-pink), 0 10px 22px var(--card-shadow);
  animation: jokWiggle 3.2s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.jok-pung-cta img {
  display: block; width: 100%; height: auto;
  border-radius: 10px;
  -webkit-user-drag: none; user-select: none;
}
.jok-pung-cta:hover { transform: rotate(0) scale(1.05); animation-play-state: paused; box-shadow: 0 8px 0 var(--soft-pink), 0 16px 30px var(--card-shadow); }
.jok-pung-cta:active { transform: rotate(1deg) scale(.97); box-shadow: 0 2px 0 var(--soft-pink); }
.jok-pung-hint {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) rotate(-3deg);
  font-family: var(--f-label); font-size: 13px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
  background: var(--yolk);
  border: 2px solid var(--rose-deep);
  border-radius: 50px; padding: 2px 12px;
  box-shadow: 0 3px 0 var(--rose-deep);
  animation: jokPulse 1.6s ease-in-out infinite;
}
@keyframes jokWiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes jokPulse {
  0%, 100% { transform: translateX(-50%) rotate(-3deg) scale(1); }
  50% { transform: translateX(-50%) rotate(-3deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .jok-pung-cta, .jok-pung-hint { animation: none; }
}

/* bite reaction popup */
.bite-pop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(58,40,64,.55);
  backdrop-filter: blur(3px);
  animation: biteFade .2s ease;
}
.bite-card {
  position: relative;
  width: 100%; max-width: 340px;
  background: var(--polaroid);
  border: 3px solid var(--rose-deep);
  border-radius: 20px;
  padding: 16px 16px 18px;
  box-shadow: 0 10px 0 var(--rose-deep), 0 22px 40px rgba(0,0,0,.3);
  text-align: center;
  transform: rotate(-1deg);
  animation: bitePop .45s cubic-bezier(.34,1.8,.5,1);
}
.bite-bang {
  position: absolute; top: -22px; left: -10px;
  font-family: var(--f-title); font-weight: 800; font-size: 34px;
  color: #fff;
  -webkit-text-stroke: 2px var(--rose-deep);
  text-shadow: 0 3px 0 var(--rose-deep);
  transform: rotate(-12deg);
  animation: biteBang .5s cubic-bezier(.34,1.9,.5,1);
}
.bite-x {
  position: absolute; top: 8px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--rose-deep); background: #fff;
  color: var(--rose-deep); font-size: 15px; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.bite-x:hover { background: var(--rose-deep); color: #fff; }
.bite-photo {
  border-radius: 12px; overflow: hidden;
  border: 2px solid var(--soft-pink);
  background: var(--paper-2);
  aspect-ratio: 3 / 4;
}
.bite-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bite-cap {
  font-family: var(--f-label); font-size: 15px; font-weight: 600;
  color: var(--ink); margin: 12px 4px 14px; line-height: 1.5;
}
.bite-acts { display: flex; flex-direction: column; gap: 8px; }
.bite-donate {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--f-title); font-size: 16px; font-weight: 700;
  background: var(--hot-pink); color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 50px;
  box-shadow: 0 4px 0 var(--rose-deep);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.bite-donate:hover { transform: translateY(-2px); }
.bite-donate:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rose-deep); }
.bite-close {
  font-family: var(--f-label); font-size: 14px; font-weight: 600;
  color: var(--ink-soft); background: transparent;
  border: none; cursor: pointer; padding: 4px;
}
.bite-close:hover { color: var(--ink); }
@keyframes biteFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bitePop {
  0% { transform: rotate(-1deg) scale(.7); opacity: 0; }
  60% { transform: rotate(-1deg) scale(1.04); }
  100% { transform: rotate(-1deg) scale(1); opacity: 1; }
}
@keyframes biteBang {
  0% { transform: rotate(-12deg) scale(0); }
  70% { transform: rotate(-12deg) scale(1.25); }
  100% { transform: rotate(-12deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bite-card, .bite-bang, .bite-pop { animation: none; }
}

/* mini polaroids */
.hero-photos-mini { display: flex; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.mini-polaroid {
  background: var(--polaroid);
  padding: 8px 8px 30px; width: 112px;
  border-radius: 14px;
  border: 2.5px solid var(--soft-pink);
  box-shadow: 0 4px 0 var(--soft-pink), 0 8px 18px var(--card-shadow);
  position: relative;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.mini-polaroid:nth-child(1) { transform: rotate(-2deg); }
.mini-polaroid:nth-child(2) { transform: rotate(2.5deg); border-color: var(--lavender); box-shadow: 0 4px 0 var(--lavender), 0 8px 18px var(--card-shadow); }
.mini-polaroid:hover { transform: rotate(0) translateY(-5px) !important; }
.mini-polaroid .mini-photo { position: relative; aspect-ratio: 1; background: var(--paper-2); border-radius: 8px; overflow: hidden; }
.mini-polaroid .mini-photo image-slot { width: 100%; height: 100%; display: block; }
.mini-polaroid .mini-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-polaroid.pressable { cursor: pointer; }
.mini-polaroid .mini-zoom {
  position: absolute; right: 5px; bottom: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; background: rgba(255,255,255,.85);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  opacity: 0; transform: scale(.6); transition: all .2s ease;
}
.mini-polaroid.pressable:hover .mini-zoom { opacity: 1; transform: scale(1); }

/* sleep photos lightbox */
.sleep-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(58,40,64,.6); backdrop-filter: blur(3px);
  animation: biteFade .2s ease;
}
.sleep-frame {
  position: relative; width: 100%; max-width: 380px;
  background: var(--polaroid);
  border: 3px solid var(--soft-pink);
  border-radius: 16px; padding: 14px 14px 16px;
  box-shadow: 0 10px 0 var(--soft-pink), 0 22px 40px rgba(0,0,0,.3);
  transform: rotate(-1deg);
  animation: bitePop .4s cubic-bezier(.34,1.7,.5,1);
}
.sleep-frame .tape.t1 {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 120px; height: 22px;
}
.sleep-x {
  position: absolute; top: 8px; right: 10px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--rose-deep); background: #fff;
  color: var(--rose-deep); font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1;
}
.sleep-x:hover { background: var(--rose-deep); color: #fff; }
.sleep-img { position: relative; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.sleep-img img { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.sleep-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.85); color: var(--ink);
  font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.sleep-nav.prev { left: 8px; }
.sleep-nav.next { right: 8px; }
.sleep-nav:hover { background: #fff; }
.sleep-cap {
  font-family: var(--f-label); font-size: 15px; font-weight: 600;
  color: var(--ink); text-align: center; margin: 12px 4px 2px; line-height: 1.45;
}
.sleep-count {
  display: block; text-align: center; margin-top: 4px;
  font-family: var(--f-label); font-size: 13px; color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .sleep-frame, .sleep-lightbox { animation: none; }
}
.mini-polaroid::after {
  content: attr(data-caption);
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center;
  font-family: var(--f-label); font-size: 11px; color: var(--ink-soft);
}

/* ─── NOTES GRID (about) ─── */
section.about { margin-bottom: 64px; position: relative; }
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 16px;
}
.note {
  background: var(--polaroid);
  padding: 1.2rem 1.2rem 1.4rem;
  border-radius: 16px;
  border: 2.5px solid var(--soft-pink);
  box-shadow: 0 5px 0 var(--soft-pink), 0 8px 20px var(--card-shadow);
  position: relative;
  font-family: var(--f-hand);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.note:nth-child(5n+1) { border-color: var(--soft-pink); box-shadow: 0 5px 0 var(--soft-pink), 0 8px 20px var(--card-shadow); }
.note:nth-child(5n+2) { border-color: var(--lavender);  box-shadow: 0 5px 0 var(--lavender),  0 8px 20px var(--card-shadow); }
.note:nth-child(5n+3) { border-color: var(--mint);      box-shadow: 0 5px 0 var(--mint),      0 8px 20px var(--card-shadow); }
.note:nth-child(5n+4) { border-color: var(--peach);     box-shadow: 0 5px 0 var(--peach),     0 8px 20px var(--card-shadow); }
.note:nth-child(5n+5) { border-color: var(--yolk);      box-shadow: 0 5px 0 var(--yolk),      0 8px 20px var(--card-shadow); }
.note:hover { transform: translateY(-6px) rotate(-1deg); }
.note.sticky { background: var(--yolk); }
.note.sticky.pink { background: rgba(255,184,204,.35); }
.note.sticky.mint { background: rgba(158,232,200,.35); }
.note.sticky.blue { background: rgba(168,216,240,.35); }
.note .doodle { font-size: 26px; line-height: 1; display: inline-block; margin-bottom: 6px; }
.note h3 {
  font-family: var(--f-title); font-weight: 700; font-size: 21px; line-height: 1;
  margin: 0 0 4px; color: var(--ink);
}
.note h3 .marker { background: var(--yolk); padding: 0 3px; border-radius: 3px; }
.note h3 .pink { color: var(--hot-pink); }
.note p { font-family: var(--f-hand); font-size: 14px; line-height: 1.45; color: var(--ink); margin: 0; }
.note p b { color: var(--hot-pink); }
.note .tape { top: -8px; left: 28%; transform: rotate(-8deg); width: 56px; height: 17px; }
.note:nth-child(2n) .tape { transform: rotate(6deg); left: auto; right: 28%; }

/* ─── CAT STORY / DIARY ─── */
section.cat-story { margin-bottom: 64px; }
.diary-intro {
  text-align: center; font-family: var(--f-hand); font-size: 14px;
  color: var(--ink-soft); margin: -10px 0 28px; letter-spacing: .02em;
}
.diary-coming-soon {
  text-align: center; padding: 48px 24px;
}
.diary-coming-soon p {
  font-family: var(--f-hand); font-size: 26px; color: var(--ink-soft);
  letter-spacing: .02em; margin: 0;
}
.diary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px;
}
@media (max-width: 860px) { .diary-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } }
@media (max-width: 540px) { .diary-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; } }

.diary-entry {
  background: var(--polaroid);
  padding: 14px 14px 18px;
  border-radius: 20px;
  border: 2.5px solid var(--soft-pink);
  box-shadow: 0 5px 0 var(--soft-pink), 0 8px 24px var(--card-shadow);
  transform: rotate(var(--angle, 0deg));
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  position: relative;
}
.diary-entry:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 8px 0 var(--soft-pink), 0 16px 36px var(--card-shadow-deep);
}
/* Badge colors */
.diary-entry.badge-rose { border-color: var(--soft-pink); box-shadow: 0 5px 0 var(--soft-pink), 0 8px 24px var(--card-shadow); }
.diary-entry.badge-blue { border-color: var(--sky);       box-shadow: 0 5px 0 var(--sky),       0 8px 24px var(--card-shadow); }
.diary-entry.badge-yellow { border-color: var(--yolk);    box-shadow: 0 5px 0 var(--yolk),      0 8px 24px var(--card-shadow); }
.diary-entry.badge-mint { border-color: var(--mint);      box-shadow: 0 5px 0 var(--mint),      0 8px 24px var(--card-shadow); }
.diary-entry.badge-pink { border-color: var(--soft-pink); box-shadow: 0 5px 0 var(--soft-pink), 0 8px 24px var(--card-shadow); }

.diary-entry .ep-tape {
  position: absolute; top: -9px; left: 50%;
  transform: translateX(-50%) rotate(var(--tape-rot, -2deg));
  width: 70px; height: 20px; z-index: 2;
  background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.45) 8px 9px);
  border-radius: 3px;
}
.diary-entry.badge-rose .ep-tape   { background-color: var(--tape-pink); }
.diary-entry.badge-blue .ep-tape   { background-color: var(--tape-blue); }
.diary-entry.badge-yellow .ep-tape { background-color: var(--tape-yellow); }
.diary-entry.badge-mint .ep-tape   { background-color: var(--tape-mint); }
.diary-entry.badge-pink .ep-tape   { background-color: var(--tape-pink); }

.diary-entry .ep-badge {
  position: absolute; top: -13px; left: 10px;
  font-family: var(--f-label); font-size: 10px;
  padding: 2px 10px; letter-spacing: .06em; z-index: 3;
  border-radius: 50px;
  box-shadow: 0 2px 8px var(--card-shadow);
}
.diary-entry.badge-rose .ep-badge   { background: var(--hot-pink); color: white; }
.diary-entry.badge-blue .ep-badge   { background: var(--sky); color: var(--ink); }
.diary-entry.badge-yellow .ep-badge { background: var(--yolk); color: var(--ink); }
.diary-entry.badge-mint .ep-badge   { background: var(--mint); color: var(--ink); }
.diary-entry.badge-pink .ep-badge   { background: var(--soft-pink); color: var(--ink); }

.diary-entry .photo-slot {
  aspect-ratio: 1; background: var(--paper-2);
  border-radius: 12px; overflow: hidden;
  margin-bottom: 12px;
}
.diary-entry .photo-slot image-slot { width: 100%; height: 100%; display: block; }
.diary-entry .entry-text { padding: 0 2px; }
.diary-entry .entry-text h3 {
  font-family: var(--f-title); font-weight: 700; font-size: 18px;
  margin: 0 0 4px; color: var(--ink); line-height: 1.1;
}
.diary-entry .entry-text p {
  font-family: var(--f-hand); font-size: 13px;
  color: var(--ink-soft); margin: 0 0 8px; line-height: 1.4;
}
.diary-entry .entry-tag {
  display: inline-block;
  font-family: var(--f-label); font-size: 10px; letter-spacing: .08em;
  color: var(--ink-soft); padding: 2px 8px;
  border: 1.5px solid rgba(138,112,144,.3); border-radius: 50px;
}

/* ─── TAROT DRAW ─── */
section.tarot { margin-bottom: 64px; position: relative; padding: 24px 18px 40px; }

/* tarot face */
.tarot-face {
  width: 100%; height: 100%;
  background: var(--polaroid);
  display: grid; grid-template-rows: auto 1fr auto;
  text-align: center; font-family: var(--f-script); position: relative; padding: 10px;
}
.tarot-face .roman { font-family: var(--f-label); font-size: 13px; color: var(--hot-pink); letter-spacing: .08em; }
.tarot-face .symbol { display: grid; place-items: center; font-size: 52px; line-height: 1; }
.tarot-face .symbol.art-symbol { padding: 4px; }
.tarot-face .symbol.art-symbol svg { width: 100%; max-height: 180px; }
.tarot-face .label-th { font-family: var(--f-title); font-weight: 700; font-size: 20px; line-height: 1; color: var(--ink); }
.tarot-face .label-en { font-family: var(--f-label); font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }
.tarot-face[data-tone="yolk"]     { background: linear-gradient(180deg, #fff2c4, var(--polaroid)); }
.tarot-face[data-tone="pink"]     { background: linear-gradient(180deg, #ffd6e3, var(--polaroid)); }
.tarot-face[data-tone="lavender"] { background: linear-gradient(180deg, #e8dcff, var(--polaroid)); }
.tarot-face[data-tone="mint"]     { background: linear-gradient(180deg, #d6efd8, var(--polaroid)); }
.tarot-face[data-tone="peach"]    { background: linear-gradient(180deg, #ffdcb8, var(--polaroid)); }
.tarot-face[data-tone="sky"]      { background: linear-gradient(180deg, #d9eaf8, var(--polaroid)); }
.tarot-face.has-image { padding: 0; display: block; background: var(--polaroid); }
.tarot-face.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* draw button — 3D chunky */
.draw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-title); font-weight: 700; font-size: 17px;
  background: var(--hot-pink); color: white;
  padding: 11px 28px; border: none; border-radius: 50px;
  box-shadow: 0 5px 0 var(--rose-deep), 0 8px 20px rgba(255,61,127,.3);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.draw-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--rose-deep), 0 14px 28px rgba(255,61,127,.35); }
.draw-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-deep), 0 4px 12px rgba(255,61,127,.3); }
.draw-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* lucky keys */
.keys-doodle { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.keys-doodle .k {
  font-family: var(--f-label); font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--polaroid);
  padding: 4px 14px; border-radius: 50px;
  border: 2px solid var(--soft-pink);
  box-shadow: 0 3px 0 var(--soft-pink);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.keys-doodle .k:hover { transform: translateY(-2px); }
.keys-doodle .k:nth-child(2) { border-color: var(--lavender); box-shadow: 0 3px 0 var(--lavender); }
.keys-doodle .k:nth-child(3) { border-color: var(--mint);     box-shadow: 0 3px 0 var(--mint); }
.keys-doodle .k:nth-child(4) { border-color: var(--peach);    box-shadow: 0 3px 0 var(--peach); }

/* download button */
.dl-button {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-title); font-size: 16px; font-weight: 700;
  background: var(--lavender-deep); color: white;
  padding: 10px 24px; border: none; border-radius: 50px;
  box-shadow: 0 5px 0 #4010a0, 0 8px 20px rgba(144,96,224,.3);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.dl-button:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #4010a0, 0 14px 28px rgba(144,96,224,.35); }
.dl-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #4010a0; }
.dl-button::before { content: "✂"; font-size: 14px; }

/* ─── GALLERY ─── */
section.gallery { margin-bottom: 60px; position: relative; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 22px 16px; padding: 20px 0;
}
.gallery-polaroid {
  background: var(--polaroid);
  padding: 10px 10px 24px;
  border-radius: 18px;
  border: 2.5px solid var(--soft-pink);
  box-shadow: 0 4px 0 var(--soft-pink), 0 8px 20px var(--card-shadow);
  transform: rotate(var(--r, -1deg));
  position: relative;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.gallery-polaroid:nth-child(5n+1) { --r: -2deg;   border-color: var(--soft-pink); box-shadow: 0 4px 0 var(--soft-pink), 0 8px 20px var(--card-shadow); }
.gallery-polaroid:nth-child(5n+2) { --r:  1.5deg;  border-color: var(--lavender);  box-shadow: 0 4px 0 var(--lavender),  0 8px 20px var(--card-shadow); }
.gallery-polaroid:nth-child(5n+3) { --r: -1deg;   border-color: var(--mint);      box-shadow: 0 4px 0 var(--mint),      0 8px 20px var(--card-shadow); }
.gallery-polaroid:nth-child(5n+4) { --r:  2deg;    border-color: var(--peach);     box-shadow: 0 4px 0 var(--peach),     0 8px 20px var(--card-shadow); }
.gallery-polaroid:nth-child(5n+5) { --r: -1.5deg;  border-color: var(--yolk);      box-shadow: 0 4px 0 var(--yolk),      0 8px 20px var(--card-shadow); }
.gallery-polaroid:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 8px 0 var(--soft-pink), 0 16px 32px var(--card-shadow-deep); }
.gallery-polaroid .tape { top: -8px; left: 30%; width: 48px; height: 15px; transform: rotate(-8deg); }
.gallery-polaroid:nth-child(2n) .tape { left: auto; right: 30%; transform: rotate(8deg); background: var(--tape-lavender); background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.45) 8px 9px); }
.gallery-polaroid .photo-area { aspect-ratio: 2/3; overflow: hidden; border-radius: 10px; }
.gallery-polaroid::after {
  content: attr(data-caption);
  position: absolute; left: 0; right: 0; bottom: 4px;
  text-align: center; font-family: var(--f-title); font-weight: 700;
  font-size: 12px; color: var(--ink);
}
.gallery-polaroid.facedown { cursor: default; }
.gallery-polaroid.facedown:hover { transform: rotate(var(--r, -1deg)); box-shadow: 0 4px 0 var(--soft-pink), 0 8px 20px var(--card-shadow); }
.gallery-polaroid.facedown::after { content: ""; }
.gallery-polaroid.facedown .photo-area img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-progress {
  display: inline-block; margin-top: 6px;
  font-family: var(--f-title); font-weight: 700; font-size: 13px;
  color: var(--ink); opacity: .75;
}

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(58,40,64,.4);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: 24px;
  animation: fade-in .25s;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--polaroid);
  padding: 28px 28px 36px;
  max-width: 460px; width: 100%;
  border-radius: 24px;
  border: 3px solid var(--soft-pink);
  box-shadow: 0 8px 0 var(--soft-pink), 0 20px 60px rgba(58,40,64,.3);
  position: relative;
  animation: pop-modal .35s cubic-bezier(.34,1.8,.5,1);
}
@keyframes pop-modal {
  0%   { transform: scale(.6) rotate(-4deg); opacity: 0; }
  100% { transform: scale(1)  rotate(0deg);  opacity: 1; }
}
.modal-card .tape.t1 { top: -10px; left: 20%; transform: rotate(-6deg); width: 90px; height: 20px; }
.modal-card .tape.t2 { top: -10px; right: 20%; transform: rotate(8deg); width: 90px; height: 20px; background: var(--tape-lavender); background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.45) 8px 9px); }
.modal-card .preview { aspect-ratio: 2/3; max-width: 240px; margin: 12px auto; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 0 var(--soft-pink), 0 8px 20px var(--card-shadow); }
.modal-card h3 { font-family: var(--f-title); font-weight: 700; font-size: 28px; text-align: center; margin: 8px 0 4px; line-height: 1; color: var(--ink); }
.modal-card h3 .en { display: block; font-family: var(--f-italic); font-size: 17px; color: var(--hot-pink); font-weight: normal; }
.modal-card .meaning { text-align: center; font-family: var(--f-hand); font-size: 14px; color: var(--ink); margin: 6px 12px 14px; line-height: 1.5; }
.modal-card .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.share-btn {
  font-family: inherit; font-weight: 700; font-size: 14px;
  border: 2px solid var(--ink, #3a2840); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; background: #fff; color: var(--ink, #3a2840);
  box-shadow: 2px 2px 0 var(--ink, #3a2840); transition: transform .08s ease;
}
.share-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.modal-card .close-x {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px;
  border: 2px solid var(--soft-pink);
  background: var(--polaroid);
  color: var(--ink); font-size: 14px;
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--soft-pink);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-card .close-x:hover { transform: rotate(90deg) scale(1.1); }

/* ─── SIGNOFF ─── */
.signoff {
  text-align: center; margin-top: 50px;
  font-family: var(--f-title); font-weight: 700; font-size: 26px;
  color: var(--ink); position: relative; z-index: 1;
}
.signoff .heart { color: var(--hot-pink); margin: 0 4px; }
.signoff a {
  font-family: var(--f-label); font-size: 16px; color: var(--hot-pink);
  text-decoration: underline wavy var(--hot-pink) 1px; text-underline-offset: 3px;
}
.signoff .meta { display: block; margin-top: 8px; font-family: var(--f-hand); font-weight: normal; font-size: 13px; color: var(--ink-soft); }

/* ─── audio toggle ─── */
.audio-toggle {
  position: fixed; bottom: 18px; left: 18px; z-index: 80;
  width: 48px; height: 48px;
  background: var(--polaroid);
  border: 2.5px solid var(--soft-pink);
  display: grid; place-items: center;
  font-size: 20px;
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--soft-pink), 0 6px 18px var(--card-shadow);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.audio-toggle:hover { transform: scale(1.12) rotate(10deg); }

/* ── card fan (pick your own) ───────────────────────────── */
.card-fan {
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 300px; margin: 8px auto 4px; padding: 40px 0 20px;
  perspective: 1200px;
}
.fan-card {
  border: none; background: none; padding: 0; cursor: pointer;
  width: 116px; height: 176px; margin: 0 -26px;
  transform: rotate(var(--rot)) translateY(var(--lift));
  transform-origin: bottom center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
}
.fan-card:hover, .fan-card:focus-visible {
  transform: rotate(var(--rot)) translateY(calc(var(--lift) - 28px)) scale(1.06);
  z-index: 5; outline: none;
}
.fan-card-inner {
  display: block; width: 100%; height: 100%;
  border-radius: 12px; overflow: hidden;
  border: 2.5px solid var(--soft-pink); background: var(--polaroid);
}
.fan-card-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-fan.locked { opacity: .55; }
.card-fan.locked .fan-card { pointer-events: none; }
.fan-card:disabled { cursor: default; }
.fan-card:disabled:hover { transform: rotate(var(--rot)) translateY(var(--lift)); }
.draw-locked-note {
  text-align: center; margin: 4px auto 8px; max-width: 320px;
  font-family: var(--f-title); font-weight: 700; color: var(--ink);
}

/* ── cinematic full-screen reveal ───────────────────────── */
.tarot-reveal {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 45%, rgba(58,40,64,.55), rgba(20,12,28,.88));
  backdrop-filter: blur(3px);
  animation: reveal-fade .4s ease both;
}
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }

.reveal-rays {
  position: absolute; top: 50%; left: 50%;
  width: 160vmax; height: 160vmax; transform: translate(-50%,-50%);
  background: repeating-conic-gradient(from 0deg,
    rgba(255,234,160,.16) 0deg 6deg, transparent 6deg 14deg);
  animation: rays-spin 24s linear infinite;
  pointer-events: none; opacity: .8;
}
@keyframes rays-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.reveal-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; width: 100%; max-width: 100%;
}
.reveal-x {
  position: fixed; top: 16px; right: 16px; z-index: 211;
  border: none; background: rgba(255,255,255,.92); color: var(--ink);
  width: 38px; height: 38px; border-radius: 50%; font-size: 18px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}

.reveal-card {
  position: relative; width: min(88vw, 50vh); aspect-ratio: 220 / 332; height: auto;
  transform-style: preserve-3d;
  transform: rotateY(180deg) scale(.4);
  transition: transform 1.1s cubic-bezier(.4,0,.2,1);
}
.reveal-card.flipped { transform: rotateY(0deg) scale(1); }
.reveal-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 16px; overflow: hidden;
  border: 3px solid var(--polaroid);
  box-shadow: 0 0 0 2px var(--soft-pink), 0 12px 40px rgba(0,0,0,.5);
}
.reveal-face.back { transform: rotateY(180deg); }
.reveal-face.back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reveal-face.front { background: var(--polaroid); padding: 12px; }
.reveal-card.flipped[data-tone="yolk"]     { filter: drop-shadow(0 0 22px #ffe08a); }
.reveal-card.flipped[data-tone="pink"]     { filter: drop-shadow(0 0 22px #ffaecb); }
.reveal-card.flipped[data-tone="lavender"] { filter: drop-shadow(0 0 22px #cdb4ff); }
.reveal-card.flipped[data-tone="mint"]     { filter: drop-shadow(0 0 22px #a7ecc4); }
.reveal-card.flipped[data-tone="peach"]    { filter: drop-shadow(0 0 22px #ffc699); }
.reveal-card.flipped[data-tone="sky"]      { filter: drop-shadow(0 0 22px #aed3f2); }

.reveal-paw {
  position: absolute; top: 38%; left: 50%; font-size: 88px;
  transform: translate(-50%,-50%) scale(0); opacity: 0;
  pointer-events: none; z-index: 4;
}
.reveal-card.flipped ~ .reveal-paw { animation: paw-pop .9s ease both; }
@keyframes paw-pop {
  0%   { transform: translate(-50%,-50%) scale(0)   rotate(-20deg); opacity: 0; }
  40%  { transform: translate(-50%,-50%) scale(1.1) rotate(6deg);   opacity: .95; }
  100% { transform: translate(-50%,-50%) scale(1.4) rotate(0);      opacity: 0; }
}

.reveal-result {
  width: 100%; background: var(--polaroid);
  border-radius: 18px; border: 2.5px solid var(--soft-pink);
  padding: 18px 20px 20px; text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  animation: result-up .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes result-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.reveal-result .stamp {
  display: inline-block; font-family: var(--f-label);
  color: var(--hot-pink); font-size: 12px; letter-spacing: .08em;
  background: var(--soft-pink); padding: 3px 14px; border-radius: 50px; margin-bottom: 8px;
}
.reveal-result h3 {
  font-family: var(--f-title); font-weight: 700; font-size: 32px;
  line-height: 1.15; margin: 4px 0 8px; color: var(--ink);
}
.reveal-result h3 .en {
  display: block; font-family: var(--f-italic); color: var(--hot-pink);
  font-size: 18px; font-weight: normal; margin-bottom: 6px;
}
.reveal-result h3 .marker { background: var(--yolk); padding: 0 6px; border-radius: 4px; }
.reveal-result .meaning {
  font-family: var(--f-hand); font-size: 15px; line-height: 1.6;
  color: var(--ink); margin: 0 0 12px;
}
.lucky-block { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 12px; }
.lucky-block .lucky-label { font-family: var(--f-label); font-size: 12px; color: var(--ink-soft); }
.lucky-block .lucky-nums {
  font-family: var(--f-title); font-weight: 700; font-size: 26px;
  color: var(--rose-deep); letter-spacing: .04em;
}
.reveal-result .acts {
  display: flex; flex-direction: column; gap: 10px;
  align-items: stretch; margin-top: 4px;
}
.reveal-result .acts .draw-btn.primary {
  width: 100%; justify-content: center; font-size: 18px; padding: 13px 28px;
}
.reveal-result .acts-secondary {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
}

/* ── full-screen card: floating CTA + reading sheet ─────── */
.reading-cta {
  z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-title); font-weight: 700; font-size: 17px;
  background: var(--hot-pink); color: #fff; border: none;
  padding: 12px 30px; border-radius: 50px; cursor: pointer;
  box-shadow: 0 5px 0 var(--rose-deep), 0 10px 26px rgba(255,61,127,.45);
  animation: cta-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.reading-cta:hover { transform: translateY(-3px); }
.reading-cta:active { transform: translateY(2px); }
@keyframes cta-pop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.reveal-reading {
  position: fixed; inset: 0; z-index: 205;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20,12,28,.5); backdrop-filter: blur(2px);
  animation: reading-fade .25s ease both;
}
@keyframes reading-fade { from { opacity: 0; } to { opacity: 1; } }
.reveal-reading .reveal-result {
  width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto;
  border-radius: 22px 22px 0 0; margin: 0;
  animation: sheet-up .35s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.reading-handle {
  display: block; width: 44px; height: 5px; margin: 2px auto 12px;
  border: none; border-radius: 99px; background: var(--soft-pink);
  cursor: pointer; padding: 0;
}

/* ── reveal/fan responsive + reduced motion ─────────────── */
@media (max-width: 760px) {
  .card-fan { min-height: 240px; padding: 30px 0 10px; }
  .fan-card { width: 92px; height: 140px; margin: 0 -22px; }
  .reveal-result h3 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .tarot-reveal { animation: none; }
  .reveal-rays { animation: none; }
  .reveal-card { transition: none; }
  .reveal-card.flipped ~ .reveal-paw { animation: none; opacity: 0; }
  .reveal-result { animation: none; }
  .ft-panel { animation: none; }
  .reading-cta { animation: none; }
  .reveal-reading { animation: none; }
  .reveal-reading .reveal-result { animation: none; }
  .fan-card { transition: none; }
}

/* ── washi tape on the revealed card ────────────────────── */
.reveal-face.front .tape.t1 { top: -11px; left: 26%; width: 60px; height: 18px; transform: rotate(-6deg); }
.reveal-face.front .tape.t2 { top: -11px; right: 26%; width: 60px; height: 18px; transform: rotate(8deg); }

/* ── fortune tabs in the reveal ─────────────────────────── */
.fortune-tabs {
  width: 100%; text-align: left;
  margin: 4px 0 14px; padding-top: 12px;
  border-top: 2px dashed var(--soft-pink);
}
.ft-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-bottom: 10px;
}
.ft-tab {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--soft-pink); background: rgba(255, 255, 255, .55);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .15s, box-shadow .15s;
}
.ft-tab:hover { transform: translateY(-2px); }
.ft-tab.active {
  background: var(--soft-pink);
  box-shadow: 0 3px 10px rgba(255,61,127,.3);
  transform: translateY(-1px) scale(1.05);
}
.ft-panel {
  background: rgba(255, 255, 255, .55);
  border-left: 4px solid var(--soft-pink);
  border-radius: 10px; padding: 8px 12px;
  animation: ft-fade .22s ease both;
}
@keyframes ft-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fortune-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-label); font-size: 13px; font-weight: 700;
  color: var(--hot-pink); margin-bottom: 3px; letter-spacing: .02em;
}
.fortune-head .fi { font-size: 16px; }
.ft-panel p {
  font-family: var(--f-hand); font-size: 14px; line-height: 1.55;
  color: var(--ink); margin: 0;
}
@media (max-width: 760px) {
  .ft-tab { width: 38px; height: 38px; font-size: 17px; }
  .ft-panel { padding: 7px 10px; }
  .ft-panel p { font-size: 13.5px; }
}

/* ─── Prize wheel page ─────────────────────────────────── */
.wheel-page { max-width: 980px; margin: 0 auto; padding: 0 16px 64px; }
.wheel-back {
  display: inline-block; margin-top: 10px; font-family: "Mali", sans-serif;
  font-size: 14px; color: var(--rose, #ff3d7f); text-decoration: none;
}
.wheel-back:hover { text-decoration: underline; }

.wheel-layout {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start;
  justify-content: center; margin-top: 24px;
}
.name-entry { flex: 1 1 280px; max-width: 360px; }
.name-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 140px;
  padding: 12px 14px; border: 2px dashed #d9c8f5; border-radius: 14px;
  background: rgba(255,255,255,0.7); font-family: "Mali", sans-serif;
  font-size: 15px; color: #3a2840; line-height: 1.6;
}
.name-input:focus { outline: none; border-color: var(--rose, #ff3d7f); }
.name-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 2px; font-family: "Mali", sans-serif; font-size: 13px; color: #6a5a70;
}
.name-clear {
  border: none; background: none; color: var(--rose, #ff3d7f);
  cursor: pointer; font-family: "Mali", sans-serif; font-size: 13px;
}
.name-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.name-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 10px;
  background: #fff; border: 1.5px solid #ffd6e3; border-radius: 999px;
  font-family: "Mali", sans-serif; font-size: 13px; color: #3a2840;
}
.chip-x {
  border: none; background: none; cursor: pointer; color: #c89; font-size: 12px;
  line-height: 1; padding: 0 2px;
}
.chip-x:hover { color: var(--rose, #ff3d7f); }

.wheel-stage-wrap {
  flex: 1 1 340px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.wheel { position: relative; width: 320px; max-width: 86vw; }
.wheel-svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 6px 14px rgba(58,40,64,0.18)); }
.wheel-pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  color: var(--rose, #ff3d7f); font-size: 26px; line-height: 1; z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

.lucky-cat {
  border: none; background: none; cursor: pointer; position: relative;
  width: 96px; height: 96px; padding: 0;
}
.lucky-cat:disabled { cursor: default; opacity: 0.75; }
.lucky-cat-img { width: 100%; height: 100%; object-fit: contain; }
.lucky-cat-paw {
  position: absolute; right: 4px; bottom: 14px; font-size: 20px;
  transform-origin: 80% 80%;
}
.lucky-cat-idle .lucky-cat-paw { animation: paw-wave 1.6s ease-in-out infinite; }
.lucky-cat-spinning { animation: cat-bob 0.5s ease-in-out infinite; }
.lucky-cat-spinning .lucky-cat-paw { animation: paw-wave 0.4s ease-in-out infinite; }
.lucky-cat-won { animation: cat-jump 0.6s ease; }

@keyframes paw-wave {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(18deg); }
}
@keyframes cat-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
@keyframes cat-jump {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-18px) scale(1.08); }
  60% { transform: translateY(0) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

.spin-btn {
  padding: 10px 26px; border: none; border-radius: 999px;
  background: var(--rose, #ff3d7f); color: #fff; cursor: pointer;
  font-family: "Mali", sans-serif; font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
}
.spin-btn:disabled { background: #d8c8d4; cursor: default; box-shadow: none; }
.spin-btn:not(:disabled):active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.12); }
.spin-hint { font-family: "Mali", sans-serif; font-size: 13px; color: #6a5a70; }

.winner-backdrop {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center;
  justify-content: center; background: rgba(40,28,48,0.55); padding: 20px;
}
.winner-card {
  position: relative; background: #fdfaf2; border-radius: 12px; padding: 28px 26px 22px;
  max-width: 340px; width: 100%; text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3); transform: rotate(-1.5deg);
}
.winner-x {
  position: absolute; top: 8px; right: 10px; border: none; background: none;
  cursor: pointer; font-size: 18px; color: #9a8aa0;
}
.winner-stamp {
  display: block; font-family: "Permanent Marker", cursive; color: var(--rose, #ff3d7f);
  font-size: 16px;
}
.winner-name {
  font-family: "Caveat", cursive; font-size: 40px; color: #3a2840; margin: 6px 0 2px;
  word-break: break-word;
}
.winner-sub, .winner-last { font-family: "Mali", sans-serif; font-size: 14px; color: #6a5a70; margin: 0 0 14px; }
.winner-last { color: var(--rose, #ff3d7f); font-weight: 700; }
.winner-acts { display: flex; flex-direction: column; gap: 8px; }
.winner-eliminate {
  padding: 9px 18px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--rose, #ff3d7f); color: #fff; font-family: "Mali", sans-serif;
  font-weight: 700; font-size: 15px;
}
.winner-close {
  padding: 8px 18px; border: 1.5px solid #d9c8f5; border-radius: 999px; cursor: pointer;
  background: #fff; color: #6a5a70; font-family: "Mali", sans-serif; font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .lucky-cat-idle .lucky-cat-paw,
  .lucky-cat-spinning,
  .lucky-cat-spinning .lucky-cat-paw,
  .lucky-cat-won { animation: none; }
}

@media (max-width: 640px) {
  .wheel-layout { gap: 18px; }
  .name-entry { max-width: 100%; }
}