:root {
  --ink: #4a3a3c;
  --ink-soft: #746366;
  --paper: #fffaf8;
  --paper-blue: #effaff;
  --pink: #ffb6ce;
  --pink-deep: #f486aa;
  --pink-pale: #ffe8f0;
  --blue: #b8e5f5;
  --blue-mid: #7fc8e4;
  --blue-deep: #4e9fc2;
  --cream: #fff1df;
  --mint: #c9ebdb;
  --line: rgba(74, 58, 60, .18);
  --shadow-soft: 0 18px 45px rgba(90, 121, 143, .18);
  --shadow-card: 0 8px 0 rgba(74, 58, 60, .08), 0 16px 34px rgba(102, 133, 155, .16);
  --font: "YouYuan", "幼圆", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-display: "STHupo", "华文琥珀", "YouYuan", "Microsoft YaHei UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #e8f7fd;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:focus-visible, [role="button"]:focus-visible { outline: 3px solid #7fc8e4; outline-offset: 4px; }
img, svg { display: block; }
p, h1, h2, h3 { margin: 0; }
::selection { background: #ffc9dc; color: var(--ink); }

/* ---------- dreamy shared sky ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 13% 6%, rgba(255,255,255,.9), transparent 37%),
    radial-gradient(ellipse at 88% 12%, rgba(255,236,244,.78), transparent 42%),
    linear-gradient(155deg, #eaf9ff 0%, #f5fbff 38%, #fff4f8 74%, #ffeaf2 100%);
}
.sky-glow { position: absolute; border-radius: 50%; filter: blur(4px); opacity: .7; }
.sky-glow-a { width: 44vw; height: 44vw; left: -14vw; top: -17vw; background: radial-gradient(circle, rgba(169,225,246,.66), transparent 68%); }
.sky-glow-b { width: 55vw; height: 55vw; right: -22vw; bottom: -35vw; background: radial-gradient(circle, rgba(255,183,208,.48), transparent 68%); }
.cloud {
  position: absolute;
  height: 76px;
  width: 240px;
  border-radius: 999px;
  background: rgba(255,255,255,.54);
  filter: blur(.4px);
  box-shadow: 46px 15px 0 -8px rgba(255,255,255,.45), -58px 12px 0 -14px rgba(255,255,255,.4);
  animation: cloudDrift 26s ease-in-out infinite alternate;
}
.cloud::after, .cloud::before {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.52);
}
.cloud::before { width: 100px; height: 100px; left: 28px; top: -45px; }
.cloud::after { width: 72px; height: 72px; right: 42px; top: -30px; }
.cloud-a { left: 4vw; top: 17vh; transform: scale(.84); opacity: .55; }
.cloud-b { right: 2vw; top: 35vh; transform: scale(1.08); opacity: .38; animation-delay: -7s; }
.cloud-c { left: 28vw; bottom: 3vh; transform: scale(.6); opacity: .42; animation-delay: -14s; }
.float-heart, .float-sparkle { position: absolute; color: rgba(244,134,170,.38); font-size: 22px; animation: floaty 6s ease-in-out infinite; }
.float-heart { font-size: 16px; }
.fh-a { left: 9vw; top: 39vh; animation-delay: -2s; }
.fh-b { right: 12vw; top: 22vh; color: rgba(127,200,228,.35); animation-delay: -4s; }
.fh-c { right: 22vw; bottom: 12vh; animation-delay: -1s; }
.fs-a { left: 20vw; top: 20vh; color: rgba(90,160,190,.38); }
.fs-b { right: 7vw; bottom: 30vh; font-size: 28px; color: rgba(244,134,170,.3); animation-delay: -3s; }
.fs-c { left: 7vw; bottom: 22vh; color: rgba(127,200,228,.45); animation-delay: -5s; }
.grain {
  position: absolute; inset: 0; opacity: .17; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---------- app shell ---------- */
#app { position: relative; z-index: 2; height: 100dvh; }
.screen { display: none; width: 100%; height: 100dvh; overflow: hidden; }
.screen.is-active { display: flex; animation: screenIn .46s cubic-bezier(.22,1,.36,1); }
.screen-room, .screen-levels { overflow-y: auto; overflow-x: hidden; }

.sound-toggle {
  position: fixed; z-index: 80; right: clamp(14px, 2vw, 26px); top: clamp(12px, 2vw, 20px);
  width: 45px; height: 45px; border-radius: 50%;
  border: 2.5px solid var(--ink); background: rgba(255,250,248,.9);
  box-shadow: 0 5px 0 rgba(74,58,60,.14), 0 9px 20px rgba(89,128,149,.16);
  display: grid; place-items: center; transition: transform .18s, box-shadow .18s, background .18s;
}
.sound-toggle:hover { transform: translateY(-2px) rotate(-5deg); background: #fff; }
.sound-toggle:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(74,58,60,.14); }
.sound-toggle .sound-on { font-size: 21px; font-weight: 900; line-height: 1; color: var(--pink-deep); }
.sound-toggle .sound-off { display: none; font-size: 19px; font-weight: 900; color: var(--ink-soft); }
.sound-toggle.is-muted .sound-on { display: none; }
.sound-toggle.is-muted .sound-off { display: block; }
.result-open .sound-toggle { opacity: 0; pointer-events: none; }

/* ---------- shared type / buttons ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .24em; font-weight: 800; color: #8d7a7e;
  text-transform: uppercase;
}
.eyebrow span { color: var(--blue-deep); }
.eyebrow i { color: var(--pink-deep); font-style: normal; font-size: 12px; }
.eyebrow em { font-style: normal; letter-spacing: .14em; color: #a18d90; }
.pill-btn, .soft-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: rgba(255,250,248,.82); border: 2px solid var(--ink);
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 4px 0 rgba(74,58,60,.1);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.pill-btn:hover, .soft-btn:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 6px 0 rgba(74,58,60,.1); }
.pill-btn:active, .soft-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(74,58,60,.1); }
.pill-btn span, .soft-btn span { color: var(--pink-deep); font-size: 15px; }
.primary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 26px; border-radius: 16px;
  border: 2.5px solid var(--ink); color: var(--ink);
  background: linear-gradient(180deg, #ffcfe0, #ffaac8);
  box-shadow: 0 6px 0 #d97596, 0 10px 24px rgba(228,124,157,.28);
  font-size: 15px; font-weight: 900; letter-spacing: .04em;
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.primary-btn:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 8px 0 #d97596, 0 13px 26px rgba(228,124,157,.3); }
.primary-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #d97596; }
.primary-btn span { font-size: 18px; }
.wide { width: 100%; }

.page-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 10px 58px 8px 2px;
}
.page-title { text-align: center; display: grid; gap: 2px; flex: 1; }
.page-title small { font-size: 9px; letter-spacing: .3em; font-weight: 900; color: #9aaeb9; }
.page-title b { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .08em; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; min-width: 148px; gap: 8px; }
.room-play-top em { font-style: normal; }
.happy-pill, .progress-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff9f7;
  box-shadow: 0 4px 0 rgba(74,58,60,.09); font-size: 12px; font-weight: 800;
}
.happy-pill span, .progress-pill span { color: var(--pink-deep); font-size: 15px; }
.happy-pill b { color: var(--pink-deep); }
.progress-pill em { font-style: normal; color: #a69598; font-size: 10px; }

/* ============================================================
   LANDING
   ============================================================ */
.screen-landing { align-items: stretch; justify-content: center; }
.landing-wrap {
  width: min(1240px, 100%); height: 100%; margin: 0 auto; min-width: 0;
  padding: clamp(14px, 2.4vh, 26px) clamp(18px, 3.5vw, 52px) clamp(10px, 1.8vh, 18px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: clamp(6px, 1.2vh, 14px);
}
.title-lockup { text-align: center; position: relative; z-index: 3; padding-top: 4px; }
.game-title {
  position: relative; display: inline-flex; align-items: baseline; justify-content: center;
  gap: .03em; margin: 4px 0 0; line-height: .98;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(48px, 7.4vw, 94px); letter-spacing: .02em;
  color: var(--ink); filter: drop-shadow(0 4px 0 rgba(255,255,255,.9));
}
.title-save {
  position: relative; z-index: 1;
  font-size: .72em; letter-spacing: .08em;
  background: none;
  color: #4e9fbe;
  -webkit-text-stroke: 0;
  text-shadow: 0 3px 0 rgba(255,255,255,.72), 0 6px 0 rgba(74,58,60,.08);
  filter: drop-shadow(0 3px 0 rgba(73,125,145,.08));
}
.title-name {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, #ffb9d0 3%, #f47fa6 72%, #e46e98 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 0 rgba(255,255,255,.5);
}
.title-swoosh {
  position: absolute; left: 7%; right: 2%; bottom: -2px; height: 12px;
  color: #f6a3bd; opacity: .78; z-index: -1;
}
.tagline {
  margin-top: 7px; color: #856f73; font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: .12em; font-weight: 700;
}
.hero-stage {
  position: relative; width: 100%; height: 100%; min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.hero-halo {
  position: absolute; width: min(56vw, 660px); aspect-ratio: 1.35;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.93) 0%, rgba(255,232,241,.68) 37%, rgba(184,229,245,.24) 62%, transparent 72%);
  filter: blur(1px);
}
.hero-ring {
  position: absolute; width: min(43vw, 510px); aspect-ratio: 1.32;
  border: 2px dashed rgba(244,134,170,.24); border-radius: 50%;
  transform: rotate(-8deg);
}
.hero-pair {
  position: relative; z-index: 4; height: clamp(230px, 44vh, 430px); width: auto; max-width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  filter: drop-shadow(0 20px 20px rgba(103,98,104,.15));
  animation: pairBob 4.8s ease-in-out infinite;
}
.pair-wrap { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; width: max-content; max-width: 100%; min-width: 0; }
.lumu-cutout { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.hero-pair > .pair-wrap { height: 100%; }
.hero-pair .lumu-cutout { height: 100%; filter: drop-shadow(0 16px 13px rgba(100,98,108,.16)); }
.pair-person { height: 100%; position: relative; transition: transform .35s; }
.pair-person svg { height: 100%; width: auto; overflow: visible; }
.pair-person:first-child { transform: rotate(-3deg) translateX(8px); z-index: 2; }
.pair-person:last-child { transform: rotate(3deg) translateX(-8px); z-index: 1; }
.pair-wrap .pair-heart {
  position: absolute; z-index: 5; left: 50%; top: 55%; transform: translate(-50%, -50%);
  width: clamp(42px, 5vw, 62px); height: clamp(38px, 4.6vw, 57px);
  background: #ff829f; border: 3px solid var(--ink); color: #fff;
  clip-path: polygon(50% 94%, 7% 51%, 7% 29%, 21% 14%, 37% 13%, 50% 26%, 63% 13%, 79% 14%, 93% 29%, 93% 51%);
  display: grid; place-items: center; filter: drop-shadow(0 4px 0 rgba(74,58,60,.14));
  animation: heartBeat 2.4s ease-in-out infinite;
}
.hero-pair .pair-heart span { font-size: clamp(12px, 1.55vw, 19px); font-weight: 900; letter-spacing: -.02em; transform: translateY(-8%); }
.hero-shadow {
  position: absolute; bottom: 2%; width: min(34vw, 380px); height: 26px;
  border-radius: 50%; background: rgba(111,145,160,.15); filter: blur(8px); z-index: 1;
}
.hero-spark { position: absolute; color: var(--pink-deep); z-index: 5; animation: twinkle 3.2s ease-in-out infinite; }
.hs-1 { left: 17%; top: 18%; font-size: 28px; color: #79c2df; }
.hs-2 { right: 18%; top: 24%; font-size: 22px; color: #f78fae; animation-delay: -1.6s; }
.hs-3 { right: 11%; bottom: 23%; font-size: 15px; color: #f78fae; animation-delay: -.7s; }
.name-tag {
  position: absolute; z-index: 6; bottom: 8%; font-size: 9px; font-weight: 900;
  letter-spacing: .14em; color: #8e777c; background: rgba(255,250,248,.8);
  border: 1.5px solid rgba(74,58,60,.2); border-radius: 99px; padding: 5px 10px;
  white-space: nowrap;
}
.tag-lulu { left: calc(50% - clamp(150px, 20vw, 240px)); transform: rotate(-4deg); }
.tag-mu { right: calc(50% - clamp(150px, 20vw, 240px)); transform: rotate(4deg); }
.sticker {
  position: absolute; z-index: 5; filter: drop-shadow(0 9px 10px rgba(100,112,120,.13));
  transition: transform .25s;
}
.sticker img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 8px rgba(85,102,112,.18)); transform: rotate(-2deg); }
.sticker svg { width: 100%; height: auto; }
.sticker:hover { transform: translateY(-5px) rotate(3deg) scale(1.04); }
.sticker-owl { width: clamp(72px, 8.2vw, 106px); left: clamp(3%, 8vw, 14%); bottom: 18%; transform: rotate(-7deg); animation: floaty 6s ease-in-out infinite; }
.sticker-emo { width: clamp(66px, 7.6vw, 98px); right: clamp(3%, 8vw, 13%); bottom: 22%; transform: rotate(6deg); animation: floaty 6.5s ease-in-out -2s infinite; }
.sticker-blue { width: clamp(66px, 7.8vw, 100px); right: 8%; top: 16%; transform: rotate(4deg); animation: floaty 5.6s ease-in-out -1.2s infinite; }
.sticker-owl::after, .sticker-emo::after, .sticker-blue::after { display: none; }

.mode-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.8vw, 22px);
  width: min(860px, 100%); margin: 0 auto; z-index: 7;
}
.mode-card {
  position: relative; display: flex; align-items: center; gap: clamp(10px, 1.4vw, 16px);
  min-height: clamp(78px, 11vh, 102px); padding: 13px clamp(14px, 2vw, 24px);
  border: 2.5px solid var(--ink); border-radius: 22px; text-align: left;
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.mode-card::before {
  content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%;
  right: -45px; top: -61px; opacity: .5; background: rgba(255,255,255,.6);
}
.mode-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 12px 0 rgba(74,58,60,.08), 0 22px 38px rgba(102,133,155,.2); }
.mode-card:active { transform: translateY(1px); }
.mode-home { background: linear-gradient(135deg, #fff0d9, #ffe4ee 68%, #ffd7e5); }
.mode-play { background: linear-gradient(135deg, #e0f7ff, #d9effb 55%, #f9e8f7); }
.mode-icon {
  flex: none; width: clamp(48px, 5vw, 60px); height: clamp(48px, 5vw, 60px);
  border-radius: 17px; background: rgba(255,255,255,.68); border: 2px solid rgba(74,58,60,.7);
  display: grid; place-items: center; box-shadow: 0 4px 0 rgba(74,58,60,.08);
}
.mode-icon svg { width: 76%; height: 76%; }
.mode-copy { display: grid; gap: 4px; flex: 1; position: relative; z-index: 1; }
.mode-copy b { font-size: clamp(20px, 2.2vw, 27px); letter-spacing: .06em; }
.mode-copy small { font-size: clamp(9px, .95vw, 11px); color: #8a7478; letter-spacing: .03em; }
.mode-go {
  font-size: 24px; font-weight: 900; color: var(--ink); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.6);
  transition: transform .2s;
}
.mode-card:hover .mode-go { transform: translateX(4px) rotate(-8deg); }
.mode-badge {
  position: absolute; right: 13px; top: 9px; font-size: 8px; letter-spacing: .1em;
  color: #9b8186; font-weight: 900; opacity: .85;
}
.door-pets {
  position: absolute; z-index: 4; left: 2.5%; bottom: 12.5%; display: flex; align-items: flex-end; gap: 1px;
  filter: drop-shadow(0 6px 6px rgba(80,100,110,.16)); pointer-events: none;
}
.door-pets img:first-child { width: clamp(48px, 5.3vw, 76px); }
.door-pets img:nth-child(2) { width: clamp(34px, 3.8vw, 54px); margin-left: -2px; }
.door-pets span {
  align-self: flex-end; margin-left: 4px; margin-bottom: 3px; padding: 2px 6px; border-radius: 99px;
  background: rgba(255,250,248,.88); border: 1.5px solid rgba(74,58,60,.18); color: #98858b;
  font-size: 7px; font-weight: 900; white-space: nowrap;
}
.landing-foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  color: #968286; font-size: clamp(9px, .95vw, 11px); letter-spacing: .05em;
  font-weight: 700; padding-top: 2px;
}
.save-flower { color: var(--pink-deep); }
.foot-dot { opacity: .5; }

/* ============================================================
   ROOM
   ============================================================ */
.screen-room { background: transparent; }
.room-page {
  width: min(1320px, 100%); height: 100dvh; margin: 0 auto; min-width: 0;
  padding: 8px clamp(14px, 2.4vw, 30px) 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.room-scene {
  position: relative; flex: 1; min-height: 540px; min-width: 0; border-radius: 30px;
  border: 2.5px solid rgba(74,58,60,.66); overflow: hidden;
  background:
    linear-gradient(180deg, #fff8fa 0%, #fff5f7 58%, #d8eef7 58.2%, #bfe2f0 100%);
  box-shadow: 0 18px 0 rgba(74,58,60,.05), 0 28px 55px rgba(96,132,153,.14);
  isolation: isolate;
}
.room-scene::after {
  content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 42%;
  background:
    repeating-linear-gradient(116deg, transparent 0 48px, rgba(255,255,255,.18) 48px 50px),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%);
  pointer-events: none; z-index: 1;
}
.room-backdrop {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%; display: block;
}
.room-scene::after { display: none; }
.room-scene > .wallpaper, .room-scene > .window, .room-scene > .wall-art,
.room-scene > .shelf, .room-scene > .rug, .room-scene > .cat-bed,
.room-scene > .toy-basket, .room-scene > .tea-table, .room-scene > .floor-cushions,
.room-scene > .room-lamp { display: none !important; }
.room-pets {
  position: absolute; z-index: 9; left: 7%; bottom: 23.5%; display: flex; align-items: flex-end; gap: 0;
  filter: drop-shadow(0 7px 6px rgba(83,102,112,.2)); pointer-events: none;
  animation: petRoam 17s ease-in-out infinite alternate;
}
.room-pets img { display: block; height: auto; }
.room-pets::after {
  content: "豚豚 & 兔兔"; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
  white-space: nowrap; padding: 2px 7px; border-radius: 99px; background: rgba(255,250,248,.9);
  border: 1.5px solid rgba(74,58,60,.16); color: #8b7a80; font-size: 7px; font-weight: 900;
  letter-spacing: .04em; box-shadow: 0 2px 0 rgba(74,58,60,.04);
}
.pet-capy { width: clamp(62px, 6.7vw, 94px); }
.pet-bun { width: clamp(42px, 4.4vw, 62px); margin-left: -3px; margin-bottom: -1px; animation: petBob 1.8s ease-in-out infinite; }
.room-bee {
  position: absolute; z-index: 8; right: 9%; top: 19%; width: clamp(30px, 3.5vw, 48px); height: auto;
  filter: drop-shadow(0 5px 5px rgba(90,90,90,.12)); animation: beeFloat 5.5s ease-in-out infinite; pointer-events: none;
}
.room-capybun {
  position: absolute; z-index: 9; right: 11%; bottom: 24%; width: clamp(62px, 6.8vw, 96px); height: auto;
  filter: drop-shadow(0 7px 6px rgba(83,102,112,.18)); animation: capyBunBob 3.4s ease-in-out infinite; pointer-events: none;
}
.room-plush { position: absolute; z-index: 8; height: auto; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(80,99,108,.16)); }
.room-plush-owl { left: 20%; bottom: 36%; width: clamp(52px, 5.3vw, 78px); transform: rotate(-4deg); }
.room-plush-emo { right: 20%; bottom: 37%; width: clamp(46px, 4.9vw, 72px); transform: rotate(3deg); }
@keyframes petRoam {
  0% { transform: translateX(0) translateY(0) rotate(-1deg); }
  48% { transform: translateX(min(21vw, 280px)) translateY(-5px) rotate(1deg); }
  100% { transform: translateX(min(38vw, 500px)) translateY(0) rotate(-1deg); }
}
@keyframes petRoamMobile {
  0% { transform: translateX(0) translateY(0) rotate(-1deg); }
  50% { transform: translateX(75px) translateY(-4px) rotate(1deg); }
  100% { transform: translateX(132px) translateY(0) rotate(-1deg); }
}
@keyframes petBob { 0%,100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes beeFloat { 0%,100% { transform: translate(0,0) rotate(-4deg); } 50% { transform: translate(-14px,-16px) rotate(5deg); } }
@keyframes capyBunBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
.wallpaper { position: absolute; inset: 0 0 42% 0; z-index: 0; pointer-events: none; }
.wall-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgba(249,170,196,.2); }
.wd1 { left: 7%; top: 12%; } .wd2 { left: 31%; top: 8%; } .wd3 { left: 66%; top: 11%; } .wd4 { left: 91%; top: 9%; }
.wall-heart { position: absolute; color: rgba(249,170,196,.15); font-size: 17px; }
.wh1 { left: 45%; top: 18%; } .wh2 { left: 16%; top: 40%; } .wh3 { left: 81%; top: 34%; color: rgba(130,198,224,.2); }
.window {
  position: absolute; z-index: 2; right: 7.3%; top: 7%; width: 26%; height: 42%;
  border-radius: 18px 18px 12px 12px;
}
.window-sky {
  position: absolute; inset: 7px; border-radius: 13px 13px 8px 8px; overflow: hidden;
  background: linear-gradient(180deg, #bfeaf8, #eaf8fd 57%, #ffe4ef 100%);
  border: 2px solid rgba(74,58,60,.45);
}
.win-cloud { position: absolute; height: 15px; width: 52px; border-radius: 99px; background: rgba(255,255,255,.8); }
.win-cloud::before { content: ""; position: absolute; width: 25px; height: 25px; background: rgba(255,255,255,.8); border-radius: 50%; left: 7px; top: -12px; }
.q1 { left: 12%; top: 45%; animation: cloudDrift 14s ease-in-out infinite alternate; }
.q2 { right: 4%; top: 23%; transform: scale(.7); opacity: .8; animation: cloudDrift 17s ease-in-out -4s infinite alternate; }
.win-star { position: absolute; left: 18%; top: 18%; color: #fff4bd; font-size: 13px; text-shadow: 0 0 8px #fff3aa; }
.win-moon { position: absolute; right: 16%; top: 11%; color: #ffe8a5; font-size: 44px; line-height: 1; transform: rotate(-15deg); }
.window-frame {
  position: absolute; inset: 0; border: 4px solid #fff9f4; border-radius: 18px;
  box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px rgba(74,58,60,.2);
  pointer-events: none;
}
.window-frame::before, .window-frame::after {
  content: ""; position: absolute; background: #fff9f4; box-shadow: 0 0 0 2px var(--ink);
}
.window-frame::before { left: 50%; top: 4px; bottom: 4px; width: 5px; transform: translateX(-50%); }
.window-frame::after { top: 54%; left: 4px; right: 4px; height: 5px; }
.curtain {
  position: absolute; top: -8px; width: 18%; height: 106%;
  background: linear-gradient(90deg, #ffdbe7, #fff0f5 55%, #ffd3e2);
  border: 2px solid rgba(74,58,60,.55); border-radius: 50% 20% 35% 10%;
  transform-origin: top center; z-index: 3;
}
.curtain::after {
  content: ""; position: absolute; inset: 0 34%; background: rgba(237,147,177,.16); border-radius: 50%;
}
.curtain-l { left: -9%; transform: rotate(3deg); }
.curtain-r { right: -9%; transform: rotate(-3deg); }
.window-sill {
  position: absolute; left: -5%; right: -5%; bottom: -7px; height: 11px;
  background: #fff8f2; border: 2.5px solid var(--ink); border-radius: 6px; z-index: 4;
}
.sill-plant { position: absolute; right: 10%; bottom: 3px; width: 38px; height: 34px; z-index: 3; }
.sill-plant span {
  position: absolute; left: 8px; top: 4px; width: 22px; height: 20px; border-radius: 60% 40% 55% 45%;
  background: #a9d8c2; border: 2px solid var(--ink); transform: rotate(-12deg);
  box-shadow: -8px 7px 0 -3px #bfe5d2, 8px 5px 0 -4px #96ccb2;
}
.sill-plant::after {
  content: ""; position: absolute; left: 4px; bottom: -1px; width: 30px; height: 15px;
  border-radius: 4px 4px 9px 9px; background: #ffd8e4; border: 2px solid var(--ink);
}
.wall-art {
  position: absolute; z-index: 2; right: 39%; top: 12%; width: 100px; height: 66px;
  border: 2px solid rgba(74,58,60,.5); border-radius: 12px; background: #fffdf8;
  box-shadow: 4px 5px 0 rgba(74,58,60,.05); display: flex; align-items: center; justify-content: center; gap: 8px;
  transform: rotate(2deg);
}
.wall-art span { font-size: 24px; font-weight: 900; color: #7ec4df; }
.wall-art span:last-child { color: #f58eae; }
.wall-art i { font-size: 10px; color: #f58eae; font-style: normal; }
.shelf { position: absolute; z-index: 4; left: 5.4%; top: 11%; width: 26%; height: 27%; }
.shelf-board {
  position: absolute; left: 0; right: 0; bottom: 10%; height: 12px;
  border: 2px solid var(--ink); border-radius: 5px; background: #f6dcc1;
  box-shadow: 0 5px 0 rgba(74,58,60,.08);
}
.shelf-board::before, .shelf-board::after {
  content: ""; position: absolute; top: 10px; width: 7px; height: 26px;
  background: #e7c6a8; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 4px 4px;
}
.shelf-board::before { left: 11%; } .shelf-board::after { right: 11%; }
.plush { position: absolute; bottom: calc(10% + 11px); display: grid; place-items: end center; }
.plush svg, .plush img { width: 100%; height: auto; object-fit: contain; display: block; border-radius: 9px; box-shadow: 0 5px 10px rgba(82,91,101,.2); }
.plush-owl { left: 1%; width: 40%; transform: rotate(-3deg); }
.plush-emo { right: 1%; width: 38%; transform: rotate(2deg); }
.shelf-book { position: absolute; bottom: calc(10% + 11px); width: 12px; border: 2px solid var(--ink); border-radius: 3px 3px 0 0; }
.book-a { left: 48%; height: 41px; background: #ffcadb; transform: rotate(-4deg); }
.book-b { left: 55%; height: 34px; background: #b9e3f3; transform: rotate(3deg); }
.book-c { left: 61%; height: 45px; background: #ffe6b7; transform: rotate(-1deg); }
.room-lamp { position: absolute; z-index: 2; left: 43%; top: 6%; width: 100px; height: 128px; }
.room-lamp::before {
  content: ""; position: absolute; left: 38px; top: 32px; width: 3px; height: 88px;
  background: rgba(74,58,60,.55); border-radius: 2px;
}
.room-lamp i {
  position: absolute; left: 0; top: 0; width: 100px; height: 48px;
  border: 2.5px solid var(--ink); border-radius: 50% 50% 10px 10px;
  background: linear-gradient(180deg, #ffe3ab, #ffc37f); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -7px 0 rgba(255,255,255,.35);
}
.room-lamp span {
  position: absolute; left: 24px; top: 43px; width: 52px; height: 72px;
  background: radial-gradient(ellipse at top, rgba(255,229,167,.38), transparent 70%);
  filter: blur(2px);
}
.room-lamp::after {
  content: ""; position: absolute; left: 29px; bottom: 3px; width: 20px; height: 8px;
  border-radius: 50%; background: #ffe8be; border: 2px solid var(--ink);
}
.rug {
  position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 57%; height: 29%; border-radius: 50% 50% 16px 16px;
  background: radial-gradient(ellipse at 50% 20%, #ffeaf1 0 27%, #ffd8e5 28% 47%, #f7c6d9 48% 51%, #ffdce8 52% 100%);
  border: 2px solid rgba(74,58,60,.3);
  box-shadow: inset 0 0 0 9px rgba(255,255,255,.25);
  opacity: .9;
}
.rug-heart { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%); color: rgba(244,134,170,.44); font-size: 34px; }
.room-cat {
  position: absolute; z-index: 8; left: auto; right: 5.2%; bottom: 34%; width: 88px;
  cursor: pointer; transform-origin: bottom center; transition: transform .22s;
  filter: drop-shadow(0 14px 9px rgba(100,135,155,.17));
}
.room-cat:hover { transform: translateY(-5px) rotate(-2deg); }
.room-cat img { width: 100%; height: auto; display: block; border-radius: 9px; transform: rotate(2deg); }
.cat-name {
  position: absolute; z-index: 9; left: auto; right: 5%; bottom: 43%; transform: rotate(3deg);
  font-size: 8px; letter-spacing: .08em; color: #8b7d83; font-weight: 900;
  background: rgba(255,250,248,.9); padding: 3px 8px; border-radius: 99px; border: 1.5px solid rgba(74,58,60,.18);
  box-shadow: 0 2px 0 rgba(74,58,60,.05);
}
.cat-bed {
  position: absolute; z-index: 7; left: 4.8%; bottom: 23.3%; width: clamp(155px, 17vw, 235px); height: 39px;
  border-radius: 50%; border: 2px solid rgba(74,58,60,.5);
  background: linear-gradient(90deg, #c8e9f4 0 50%, #ffd8e4 50% 100%);
  box-shadow: inset 0 7px 0 rgba(255,255,255,.45), 0 8px 12px rgba(93,126,144,.12);
}
.cat-bed::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 12px; bottom: 8px;
  border-radius: 50%; background: rgba(255,255,255,.55);
}
.bed-heart { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; color: #ef8eae; font-size: 15px; }
.toy-basket {
  position: absolute; z-index: 7; left: 19.5%; bottom: 20.5%; width: 72px; height: 58px;
  border: 2px solid rgba(74,58,60,.55); border-radius: 8px 8px 18px 18px;
  background: repeating-linear-gradient(90deg, #f4d7b8 0 7px, #e8c49f 7px 14px);
  transform: rotate(-4deg); box-shadow: 0 6px 9px rgba(104,120,128,.12);
}
.basket-handle {
  position: absolute; left: 15%; right: 15%; top: -20px; height: 30px; border: 4px solid #d9b28a;
  border-bottom: 0; border-radius: 50% 50% 0 0;
}
.yarn-ball {
  position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink);
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(126,84,99,.22) 4px 5px);
}
.yarn-blue { left: 4px; top: -9px; background-color: #a9e0f2; }
.yarn-pink { right: 4px; top: -5px; background-color: #ffc2d5; }
.tea-table { position: absolute; z-index: 6; right: 2.3%; bottom: 26%; width: 176px; height: 150px; }
.table-top {
  position: absolute; left: 0; right: 0; top: 55px; height: 19px; border-radius: 10px;
  border: 2px solid var(--ink); background: linear-gradient(180deg, #ffe6ef, #f5c7d8);
  box-shadow: 0 5px 0 rgba(74,58,60,.08);
}
.table-top::after { content: ""; position: absolute; left: 14%; right: 14%; top: 4px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.6); }
.table-leg { position: absolute; top: 71px; width: 9px; height: 70px; background: #d8b08a; border: 2px solid var(--ink); border-radius: 0 0 5px 5px; }
.leg-l { left: 28px; } .leg-r { right: 28px; }
.tea-cup { position: absolute; width: 38px; height: 31px; border: 2px solid var(--ink); border-radius: 7px 7px 14px 14px; top: 29px; }
.tea-cup::before { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }
.tea-cup::after { content: ""; position: absolute; right: -11px; top: 6px; width: 11px; height: 14px; border: 2px solid var(--ink); border-left: 0; border-radius: 0 9px 9px 0; }
.cup-blue { left: 12px; background: #b6e6f6; } .cup-pink { right: 12px; background: #ffc2d5; }
.tea-saucer { position: absolute; top: 58px; width: 53px; height: 13px; border: 2px solid var(--ink); border-radius: 50%; background: rgba(255,255,255,.72); }
.saucer-blue { left: 4px; } .saucer-pink { right: 4px; }
.table-plant { position: absolute; right: 68px; top: 18px; width: 22px; height: 15px; border: 2px solid var(--ink); border-radius: 50% 50% 40% 40%; background: #a6d7bf; transform: rotate(-9deg); }
.table-plant::after { content: ""; position: absolute; left: 7px; bottom: -13px; width: 8px; height: 13px; background: #c8e8d8; border: 2px solid var(--ink); border-radius: 2px; }
.floor-cushions { position: absolute; z-index: 6; left: 50%; bottom: 22.8%; transform: translateX(-50%); width: 330px; height: 50px; pointer-events: none; }
.floor-cushion { position: absolute; bottom: 0; width: 120px; height: 39px; border: 2px solid var(--ink); border-radius: 50%; box-shadow: inset 0 6px 0 rgba(255,255,255,.45); }
.cushion-blue { left: 22px; background: #bfe8f4; transform: rotate(-4deg); }
.cushion-pink { right: 22px; background: #ffd0df; transform: rotate(4deg); }
.room-hero {
  position: absolute; z-index: 7; left: 50%; bottom: 14%; transform: translateX(-50%);
  height: clamp(230px, 32vh, 330px); width: min(90%, 540px); display: flex; align-items: flex-end; justify-content: center;
  filter: drop-shadow(0 16px 12px rgba(104,102,108,.15));
  cursor: grab; touch-action: none; user-select: none;
}
.room-hero.is-dragging { cursor: grabbing; }
.room-hero .lumu-cutout { height: 100%; width: auto; max-width: 100%; animation: none; }
.room-hero .lumu-cutout.is-eat { animation: lumuEat .6s cubic-bezier(.22,1,.36,1); }
.room-hero .lumu-cutout.is-happy { animation: lumuHappy .75s cubic-bezier(.22,1,.36,1); }
.room-hero > .pair-wrap { height: 100%; }
.room-hero .pair-person { height: 100%; }
.room-hero .pair-person svg { height: 100%; width: auto; }
.room-hero .pair-person:first-child { transform: rotate(-2deg) translateX(4px); }
.room-hero .pair-person:last-child { transform: rotate(2deg) translateX(-4px); }
.room-hero .pair-heart { width: 36px; height: 33px; top: 58%; }
.room-hero .pair-heart span { font-size: 11px; }
.room-bubble {
  position: absolute; z-index: 11; left: 50%; top: 6.8%; transform: translateX(-50%);
  min-width: 190px; max-width: 32%; background: #fffdf9; border: 2.5px solid var(--ink);
  border-radius: 17px; padding: 10px 15px; box-shadow: 4px 5px 0 rgba(74,58,60,.08);
  transition: opacity .25s, transform .25s;
}
.room-bubble p { font-size: 12px; line-height: 1.45; text-align: center; font-weight: 700; color: #6d5b5e; }
.bubble-tail { position: absolute; left: 50%; bottom: -12px; width: 15px; height: 15px; background: #fffdf9; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.room-bubble.is-pop { animation: bubblePop .38s cubic-bezier(.22,1,.36,1); }
.room-sparkles { position: absolute; z-index: 6; right: 35%; top: 18%; color: #f28dab; font-size: 15px; pointer-events: none; }
.room-sparkles span { position: absolute; animation: twinkle 3s ease-in-out infinite; }
.room-sparkles span:nth-child(1) { left: 32px; top: 4px; color: #7ec6e0; }
.room-sparkles span:nth-child(2) { left: 2px; top: 31px; font-size: 11px; animation-delay: -.8s; }
.room-sparkles span:nth-child(3) { left: 66px; top: 43px; animation-delay: -1.8s; }
.room-deco-hearts { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.room-pet {
  position: absolute; z-index: 8; width: clamp(58px, 6.4vw, 90px); height: auto;
  transition: none; filter: drop-shadow(0 8px 7px rgba(80,100,110,.18));
  pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
  animation: petBounce 1.9s ease-in-out infinite;
}
#pet-bun { width: clamp(40px, 4.4vw, 60px); animation-duration: 2.15s; }
.room-pet.is-dragging { animation: none; cursor: grabbing; }
@keyframes petBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.room-plush {
  position: absolute; z-index: 9; filter: drop-shadow(0 6px 5px rgba(80,100,110,.15));
  pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
}
.room-plush.is-dragging { cursor: grabbing; }
.room-plush img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.plush-hedwig { left: 2.5%; right: auto; bottom: 47.5%; width: clamp(46px, 4.6vw, 68px); height: clamp(46px, 4.6vw, 68px); transform: none; }
.plush-emo { left: 6%; right: auto; bottom: 46%; width: clamp(38px, 4vw, 58px); height: clamp(38px, 4vw, 58px); transform: none; }
.duo-dialogue { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.speech {
  position: absolute; top: 43%; width: min(43%, 300px); padding: 7px 11px 8px;
  border: 2px solid var(--ink); border-radius: 16px; background: #fffdf9;
  box-shadow: 4px 5px 0 rgba(74,58,60,.08); opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .24s, transform .24s;
}
.speech.is-show { opacity: 1; transform: translateY(0) scale(1); }
.speech span {
  display: inline-block; font-size: 7px; font-weight: 900; letter-spacing: .12em; color: #fff;
  background: linear-gradient(90deg, #7bc7e3, #f29ab6); border-radius: 99px; padding: 1px 6px; margin-bottom: 2px;
}
.speech p { font-size: clamp(7px, .78vw, 10px); line-height: 1.35; font-weight: 700; color: #6d5b5e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speech::after {
  content: ""; position: absolute; bottom: -9px; width: 13px; height: 13px;
  background: #fffdf9; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.speech-lulu { left: 23%; }
.speech-lulu::after { left: 30%; }
.speech-mu { right: 21%; }
.speech-mu::after { right: 30%; }
.speech-mu span { background: linear-gradient(90deg, #f29ab6, #b8a9e8); }
.room-status {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 28px; padding: 0 4px; color: #8c787e; font-size: 9px; font-weight: 800;
}
.love-quote { flex: 1; min-width: 0; text-align: center; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-status-right { display: flex; align-items: center; gap: 5px; flex: none; color: #a18c91; font-size: 8px; }
.status-heart { color: #f08cab; }
.hunger-mini { display: flex; align-items: center; gap: 5px; }
.hunger-item { display: flex; align-items: center; gap: 3px; font-size: 7px; font-weight: 900; color: #937f85; }
.hunger-item > span { width: 16px; }
.hunger-item i { width: clamp(34px, 4vw, 58px); height: 7px; border-radius: 99px; background: rgba(74,58,60,.12); overflow: hidden; display: block; }
.hunger-item b { display: block; height: 100%; width: 80%; border-radius: inherit; background: linear-gradient(90deg, #8ed5ea, #f6a7bf); transition: width .5s; }
.hunger-item em { font-style: normal; min-width: 15px; text-align: right; color: #a18c91; }
.hunger-item.is-low i { box-shadow: 0 0 0 2px rgba(242,154,182,.22); }
.hunger-item.is-low em { color: #e27596; }
.coin-chip {
  position: fixed; z-index: 92; right: 18px; top: 69px; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px 6px 7px; border: 2px solid var(--ink); border-radius: 99px;
  background: rgba(255,252,249,.92); font-size: 11px; font-weight: 900; color: #776267;
  box-shadow: 0 4px 0 rgba(74,58,60,.07); transition: transform .18s;
}
.coin-chip.is-bump { animation: coinBump .42s cubic-bezier(.22,1,.36,1); }
.coin-art {
  width: 19px; height: 19px; border-radius: 50%; display: inline-block; position: relative;
  background: linear-gradient(135deg, #9fe0f2 0 48%, #ffc4d8 52% 100%);
  border: 1.5px solid rgba(74,58,60,.45); box-shadow: inset 0 2px 0 rgba(255,255,255,.55);
}
.coin-art::after { content: "♥"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 9px; text-shadow: 0 1px 0 rgba(120,80,94,.3); }
@keyframes coinBump { 0%,100% { transform: scale(1); } 45% { transform: scale(1.15) rotate(-3deg); } }
.food-drawer {
  position: fixed; z-index: 120; left: 50%; bottom: 0; width: min(1120px, calc(100% - 18px));
  transform: translate(-50%, 108%); transition: transform .38s cubic-bezier(.22,1,.36,1);
  background: #fffaf7; border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 12px 14px 14px; box-shadow: 0 -18px 50px rgba(74,58,60,.16);
}
.food-drawer.is-open { transform: translate(-50%, 0); }
.food-drawer .food-tray { position: relative; left: auto; right: auto; bottom: auto; width: auto; z-index: 1; border-radius: 16px; padding: 10px 12px 12px; }
.food-drawer .tray-head { margin-bottom: 8px; }
.food-close {
  position: absolute; right: 12px; top: 9px; z-index: 3; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--ink); background: #fffdf9; font-size: 17px; font-weight: 900; line-height: 1; cursor: pointer;
}
.food-drawer-backdrop {
  position: fixed; inset: 0; z-index: 119; background: rgba(67,52,59,.2); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.food-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.food-price {
  position: absolute; right: 4px; top: 4px; z-index: 2; display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 99px; background: rgba(255,250,248,.94); border: 1px solid rgba(74,58,60,.22);
  font-size: 8px; font-weight: 900; color: #7d696f;
}
.food-price .coin-art { width: 11px; height: 11px; }
.food-price .coin-art::after { font-size: 6px; }
.food-card.is-locked .food-art { opacity: .82; filter: saturate(.85); }
.food-card.is-bought .food-price { background: #e5f8ef; color: #5a9b7c; border-color: rgba(90,155,124,.3); }
.food-card.is-eaten .food-price { background: #fff0f5; color: #c6758f; border-color: rgba(198,117,143,.28); }
.feed-heart {
  position: absolute; font-size: 18px; font-weight: 900; line-height: 1;
  animation: heartFloat 1.55s cubic-bezier(.18,.72,.38,1) forwards;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.6));
}
.feed-heart.blue { color: #7ac6e4; }
.feed-heart.pink { color: #f98eb0; }
.feed-heart.small { font-size: 12px; }

.food-tray {
  position: absolute; z-index: 12; left: 1.8%; right: 1.8%; bottom: 1.8%;
  border: 2px solid rgba(74,58,60,.62); border-radius: 22px;
  background: rgba(255,251,247,.9); backdrop-filter: blur(10px);
  box-shadow: 0 8px 0 rgba(74,58,60,.07), 0 18px 35px rgba(99,139,159,.12);
  padding: 10px 14px 11px;
}
.tray-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 3px 7px; }
.tray-head div { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tray-happy { display: none; font-size: 9px; color: var(--pink-deep); font-weight: 900; white-space: nowrap; }
.tray-head small { font-size: 8px; letter-spacing: .2em; font-weight: 900; color: #a0b1b9; }
.tray-head b { font-size: 14px; letter-spacing: .04em; }
.tray-note { font-size: 9px; color: #a08d91; font-weight: 700; white-space: nowrap; }
.food-scroll { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; scrollbar-color: #f2b9cb transparent; }
.food-scroll::-webkit-scrollbar { height: 5px; }
.food-scroll::-webkit-scrollbar-thumb { background: #f2b9cb; border-radius: 9px; }
.food-card {
  --food-art: 84px;
  flex: 1 0 88px; max-width: 154px; min-width: 84px; min-height: 126px;
  border: 2px solid rgba(74,58,60,.7); border-radius: 16px;
  background: linear-gradient(180deg, #fffdfb, var(--food-bg, #fff4f8));
  padding: 5px 4px 6px; display: grid; grid-template-rows: 1fr auto; align-items: center;
  position: relative; overflow: hidden; box-shadow: 0 4px 0 rgba(74,58,60,.08);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.food-card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 8px 0 rgba(74,58,60,.08); }
.food-card:active { transform: translateY(1px); }
.food-card .food-art {
  height: var(--food-art); display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.95) 0 36%, rgba(255,255,255,.38) 60%, rgba(255,255,255,0) 74%);
}
.food-card .food-art svg, .food-card .food-art img {
  width: var(--food-art); height: var(--food-art); object-fit: contain; transition: transform .2s;
  filter: drop-shadow(0 0 1px #fffdf8) drop-shadow(0 0 1.4px #fffdf8) drop-shadow(0 0 1.4px #fffdf8) drop-shadow(0 7px 5px rgba(74,58,60,.2));
}
.food-card:hover .food-art svg, .food-card:hover .food-art img { transform: scale(1.08) rotate(2deg); }
.food-card .food-name { font-size: 10px; line-height: 1.2; font-weight: 900; text-align: center; letter-spacing: .02em; color: #665256; }
.food-card .food-name em { display: block; font-style: normal; font-size: 7px; letter-spacing: .08em; color: #b19b9f; font-weight: 700; margin-top: 2px; }
.food-card .food-check {
  position: absolute; right: 5px; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: #9ed7be; border: 1.5px solid var(--ink); color: #fff; font-size: 9px; font-weight: 900;
  display: none; place-items: center;
}
.food-card.is-eaten { filter: saturate(.72); background: linear-gradient(180deg,#fbfff9,#eef9f2); }
.food-card.is-eaten .food-check { display: grid; }
.food-card.is-eaten::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18); pointer-events: none; }
.food-card.is-feeding { animation: feedWiggle .45s ease; }
.food-card:disabled { cursor: default; }
.flying-food {
  position: fixed; z-index: 100; pointer-events: none; width: 100px; height: 100px;
  filter: drop-shadow(0 8px 8px rgba(74,58,60,.15));
  transition: transform .72s cubic-bezier(.34,.02,.2,1), opacity .2s .56s;
  transform-origin: center;
}
.flying-food svg, .flying-food img { width: 100%; height: 100%; object-fit: contain; }
.nom-pop {
  position: absolute; z-index: 23; left: 50%; top: 32%; transform: translate(-50%,-50%);
  font-size: 17px; font-weight: 900; color: var(--pink-deep); background: #fffaf8;
  padding: 4px 12px; border: 2px solid var(--ink); border-radius: 99px;
  animation: nomPop .85s ease forwards; pointer-events: none;
}
.play-cta {
  position: absolute; z-index: 13; right: 2.4%; bottom: 27%;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: linear-gradient(135deg, #c9edf9, #ffe6f0); border: 2px solid var(--ink);
  border-radius: 99px; font-size: 13px; font-weight: 900;
  box-shadow: 0 5px 0 rgba(74,58,60,.1); transition: transform .18s, box-shadow .18s;
}
.play-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(74,58,60,.1); }
.play-cta span { color: var(--pink-deep); }
.play-cta small { font-size: 8px; letter-spacing: .06em; color: #9c8589; font-weight: 800; }
.room-foot {
  display: flex; justify-content: space-between; gap: 12px; padding: 5px 9px 0;
  color: #99878b; font-size: 9px; font-weight: 700; letter-spacing: .03em;
}

/* ============================================================
   LEVELS
   ============================================================ */
.screen-levels { background: transparent; }
.levels-page {
  width: min(1240px, 100%); min-height: 100dvh; margin: 0 auto; min-width: 0;
  padding: 8px clamp(14px, 2.6vw, 34px) 18px;
  display: flex; flex-direction: column; gap: 7px;
}
.levels-head {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: clamp(12px, 2vw, 24px);
  padding: clamp(10px, 1.8vh, 18px) 4px clamp(9px, 1.5vh, 15px);
}
.levels-copy { display: grid; gap: 4px; }
.chapter-kicker { font-size: 8px; letter-spacing: .24em; font-weight: 900; color: #9babba; }
.levels-copy h2 { font-size: clamp(23px, 3vw, 36px); letter-spacing: .03em; line-height: 1.15; }
.levels-copy p { max-width: 590px; font-size: 10px; line-height: 1.55; color: #867378; font-weight: 700; }
.levels-mascots { display: flex; align-items: flex-end; }
.levels-mascots > div { width: clamp(48px, 5.2vw, 68px); filter: drop-shadow(0 5px 5px rgba(90,100,110,.12)); }
.levels-mascots > div + div { margin-left: -13px; }
.levels-mascots svg, .levels-mascots img { width: 100%; height: auto; display: block; object-fit: contain; }
.levels-stat-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 15px;
  border: 2px solid var(--ink); border-radius: 18px; background: rgba(255,250,248,.82);
  box-shadow: var(--shadow-card);
}
.levels-stat-card > div:not(.stat-divider) { display: grid; gap: 1px; text-align: center; }
.levels-stat-card b { font-size: 20px; line-height: 1; }
.levels-stat-card small { font-size: 7px; color: #9b888c; font-weight: 800; white-space: nowrap; }
.stat-heart { color: var(--pink-deep); font-size: 22px; }
.stat-divider { width: 1.5px; height: 28px; background: rgba(74,58,60,.14); }
.level-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px);
  padding-bottom: 4px; min-width: 0; width: 100%;
}
.level-card {
  position: relative; min-height: clamp(128px, 18.3vh, 172px); padding: 12px 13px 11px;
  border: 2.5px solid var(--ink); border-radius: 19px; text-align: left;
  background: linear-gradient(145deg, rgba(255,255,255,.72), var(--card-bg, #fff2f7));
  box-shadow: 0 6px 0 rgba(74,58,60,.09), 0 12px 22px rgba(97,135,154,.1);
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, filter .2s;
}
.level-card::before {
  content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%;
  right: -38px; top: -48px; background: rgba(255,255,255,.7); pointer-events: none;
}
.level-card:hover:not(.is-locked) { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 11px 0 rgba(74,58,60,.08), 0 18px 30px rgba(97,135,154,.16); }
.level-card:active:not(.is-locked) { transform: translateY(1px); }
.level-card.is-locked { filter: grayscale(.38) saturate(.58); opacity: .8; cursor: pointer; background: #f4edef; }
.level-card.is-locked .level-thumb { filter: grayscale(.5); }
.level-card.is-current { animation: currentGlow 2.8s ease-in-out infinite; }
.level-card.is-current::after {
  content: "现在去"; position: absolute; right: 10px; top: 9px; font-size: 7px; letter-spacing: .12em;
  background: var(--ink); color: #fff; border-radius: 99px; padding: 3px 7px; font-weight: 900;
}
.level-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; position: relative; z-index: 1; }
.level-index { font-size: 10px; font-weight: 900; letter-spacing: .12em; color: #a28e93; }
.level-diff { display: flex; gap: 2px; padding-top: 1px; }
.level-diff i { width: 4px; height: 4px; border-radius: 50%; background: rgba(74,58,60,.18); }
.level-diff i.on { background: var(--diff-color, #f38dad); }
.level-lock { position: absolute; right: 11px; top: 10px; width: 15px; height: 15px; color: #a18b91; }
.level-lock svg { width: 100%; height: 100%; }
.level-main { display: flex; align-items: center; gap: 9px; position: relative; z-index: 1; }
.level-thumb {
  flex: none; width: clamp(53px, 5.2vw, 68px); height: clamp(53px, 5.2vw, 68px);
  border-radius: 16px; border: 1.8px solid rgba(74,58,60,.48);
  background: rgba(255,255,255,.55); display: grid; place-items: center;
  box-shadow: inset 0 -4px 0 rgba(255,255,255,.3);
}
.level-thumb svg { width: 85%; height: 85%; }
.level-info { display: grid; gap: 3px; min-width: 0; }
.level-info b { font-size: clamp(12px, 1.15vw, 15px); line-height: 1.2; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.level-info small { font-size: 8px; line-height: 1.35; color: #938084; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.level-mechanic {
  width: max-content; max-width: 100%; margin-top: 1px; padding: 1px 6px;
  font-style: normal; font-size: 7px; line-height: 1.4; font-weight: 900; letter-spacing: .04em;
  color: #648fa4; background: rgba(217,244,252,.74); border: 1px solid rgba(94,157,182,.2);
  border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.level-card.is-locked .level-mechanic { color: #9b8d92; background: rgba(255,255,255,.42); border-color: rgba(74,58,60,.1); }
.level-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; position: relative; z-index: 1; }
.level-stars { display: flex; gap: 2px; color: #d9c4c9; font-size: 12px; letter-spacing: 1px; }
.level-stars .earned { color: #f7a9be; text-shadow: 0 1px 0 #fff; }
.level-go { font-size: 8px; letter-spacing: .1em; font-weight: 900; color: #9d858b; }
.level-card.is-locked .level-go::after { content: "还没解锁"; }
.level-card.is-locked .level-index, .level-card.is-locked .level-info { opacity: .7; }
.levels-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 6px 5px 0; margin-top: auto; font-size: 9px; color: #9b898d; font-weight: 700;
}

/* ============================================================
   PLAYROOM / MINI GAMES
   ============================================================ */
.screen-games, .screen-catch, .screen-memory { overflow-y: auto; overflow-x: hidden; background: transparent; }
.hub-page {
  width: min(1220px, 100%); min-height: 100dvh; margin: 0 auto; padding: 8px clamp(14px, 2.6vw, 34px) 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.hub-head { padding: clamp(8px, 2vh, 20px) 3px 2px; display: grid; gap: 4px; }
.hub-head h2 { font-size: clamp(27px, 3.2vw, 42px); line-height: 1.1; letter-spacing: .02em; }
.hub-head p { max-width: 690px; font-size: 10px; line-height: 1.6; color: #867378; font-weight: 700; }
.game-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 18px); }
.game-hub-card {
  position: relative; min-height: clamp(205px, 28vh, 280px); padding: 18px;
  border: 2.5px solid var(--ink); border-radius: 24px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  box-shadow: 0 8px 0 rgba(74,58,60,.09), 0 16px 30px rgba(90,126,146,.12);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.game-hub-card::before {
  content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%;
  right: -70px; top: -95px; background: rgba(255,255,255,.56);
}
.game-hub-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 14px 0 rgba(74,58,60,.08), 0 22px 38px rgba(90,126,146,.18); }
.game-hub-card:active { transform: translateY(1px); }
.hub-draw { background: linear-gradient(150deg, #ffe2ec, #fff3e2 65%, #ffd7e5); }
.hub-catch { background: linear-gradient(150deg, #ddf4ff, #e9f8ff 58%, #ffe4ef); }
.hub-memory { background: linear-gradient(150deg, #efe7ff, #e8f6ff 55%, #ffe9f3); }
.hub-art {
  position: relative; z-index: 1; width: clamp(78px, 8vw, 104px); height: clamp(78px, 8vw, 104px);
  border: 2px solid rgba(74,58,60,.6); border-radius: 26px; background: rgba(255,255,255,.58);
  display: flex; align-items: center; justify-content: center; gap: 2px; overflow: hidden; box-shadow: 0 5px 0 rgba(74,58,60,.06);
}
.hub-art svg { width: 72%; height: 72%; }
.hub-art img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.hub-art img:not(:only-child) { width: 48%; padding: 1px; }
.hub-art .hub-lumu { object-fit: contain; }
.hub-copy { position: relative; z-index: 1; display: grid; gap: 3px; padding-top: 9px; }
.hub-copy em { font-style: normal; font-size: 8px; letter-spacing: .17em; font-weight: 900; color: #a18a90; }
.hub-copy b { font-size: clamp(22px, 2.2vw, 29px); letter-spacing: .04em; }
.hub-copy small { max-width: 300px; font-size: 9px; line-height: 1.5; color: #877378; font-weight: 700; }
.hub-play {
  position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 13px; border: 2px solid var(--ink); border-radius: 99px;
  background: rgba(255,250,248,.65); font-size: 10px; font-weight: 900; box-shadow: 0 3px 0 rgba(74,58,60,.08);
}
.hub-play i { font-style: normal; font-size: 14px; color: var(--pink-deep); }
.hub-photo-row { display: flex; gap: 9px; margin-top: auto; padding: 8px 2px 0; align-items: flex-end; }
.hub-photo-row img { width: clamp(58px, 6.2vw, 82px); height: auto; border-radius: 9px; box-shadow: 0 5px 9px rgba(74,58,60,.14); transform: rotate(-2deg); }
.hub-photo-row img:nth-child(2) { transform: rotate(2deg) translateY(-5px); }
.hub-photo-row img:nth-child(3) { transform: rotate(-1deg); }
.hub-bottom {
  margin-top: auto; padding: 8px 10px 0; display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(14px, 3vw, 38px); min-height: 0;
}
.hub-bottom-copy { display: grid; gap: 4px; text-align: right; padding-bottom: 12px; }
.hub-bottom-copy span { font-size: 8px; letter-spacing: .18em; font-weight: 900; color: #a38f94; }
.hub-bottom-copy b { font-size: 13px; color: #776267; }
.hub-duo { height: clamp(140px, 21vh, 210px); display: flex; align-items: flex-end; filter: drop-shadow(0 12px 10px rgba(95,110,120,.15)); }
.hub-duo-img { height: 100%; width: auto; max-width: 100%; }

.mini-page {
  width: min(1240px, 100%); height: 100dvh; margin: 0 auto; padding: 7px clamp(12px, 2vw, 26px) 8px;
  display: flex; flex-direction: column; gap: 5px;
  position: relative;
}
.mini-page::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("../assets/ui/scene-decor.svg") no-repeat right -36px bottom 2px / min(54vw, 620px) auto,
    radial-gradient(circle at 12% 32%, rgba(255,255,255,.8) 0 2px, transparent 2.5px),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.7) 0 1.5px, transparent 2px),
    radial-gradient(ellipse 150px 60px at 8% 20%, rgba(255,255,255,.72), transparent 70%),
    radial-gradient(ellipse 110px 46px at 28% 12%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 170px 58px at 88% 17%, rgba(255,255,255,.62), transparent 70%),
    radial-gradient(ellipse 90px 38px at 68% 9%, rgba(255,255,255,.45), transparent 70%);
}
.mini-page::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 8% 115%, rgba(183,227,242,.42), transparent 68%),
    radial-gradient(ellipse 70% 55% at 95% 118%, rgba(255,203,221,.4), transparent 68%);
}
.mini-page > * { position: relative; z-index: 1; }
.select-page { gap: 10px; overflow-y: auto; }
.select-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 22px; border: 2.5px solid var(--ink); border-radius: 24px;
  background: linear-gradient(135deg, #e8f8ff, #fff0f7 70%);
  box-shadow: 0 10px 0 rgba(74,58,60,.06), 0 18px 40px rgba(91,128,148,.12);
  position: relative; overflow: hidden;
}
.select-hero::after { content: "✦"; position: absolute; right: 28%; top: 12px; color: #f3b5c9; font-size: 22px; opacity: .6; }
.select-eyebrow { display: block; color: #b28e9b; font-size: 8px; font-weight: 900; letter-spacing: .18em; margin-bottom: 4px; }
.select-copy h2 { font-family: var(--font-round); font-size: clamp(22px, 2.6vw, 32px); color: #5a474b; letter-spacing: .06em; line-height: 1.2; }
.select-copy p { margin-top: 3px; color: #9a8288; font-size: clamp(9px, .9vw, 11px); font-weight: 700; }
.select-art { display: flex; align-items: flex-end; gap: 2px; flex: none; }
.select-art img { width: clamp(44px, 5vw, 72px); height: clamp(48px, 5.5vw, 82px); object-fit: contain; filter: drop-shadow(0 5px 4px rgba(74,58,60,.12)); }
.select-art svg { width: clamp(66px, 7vw, 96px); height: clamp(66px, 7vw, 96px); filter: drop-shadow(0 5px 4px rgba(74,58,60,.1)); }
.select-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; padding: 2px 0 8px; }
.select-card {
  position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 1fr auto;
  gap: 8px 10px; text-align: left;
  padding: 12px 12px 10px; border: 2.5px solid var(--ink); border-radius: 18px;
  min-height: 124px;
  background: rgba(255,250,248,.82); box-shadow: 0 5px 0 rgba(74,58,60,.06);
  cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.select-card:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(74,58,60,.07); }
.select-card:nth-child(odd) { background: linear-gradient(120deg, #eefaff, #fffaf8); }
.select-card:nth-child(even) { background: linear-gradient(120deg, #fff1f7, #fffaf8); }
.select-card-num { position: absolute; top: 7px; right: 10px; font-size: 6.5px; letter-spacing: .12em; color: #b7a0a6; font-weight: 900; }
.select-card-art { width: 64px; height: 64px; display: grid; place-items: center; grid-row: span 2; }
.select-card-art svg { width: 100%; height: 100%; }
.select-card-art img { width: 44px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(74,58,60,.1)); }
.select-card-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 2px; }
.select-card-copy b { font-family: var(--font-round); color: #5f4b50; font-size: clamp(12px, 1.15vw, 15px); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select-card-copy em { font-style: normal; color: #9a8288; font-size: 7px; font-weight: 700; line-height: 1.35; }
.select-card-copy small { color: #b39bb0; font-size: 6.5px; font-weight: 800; letter-spacing: .04em; }
.select-card-go { grid-column: 2; justify-self: end; align-self: end; color: #a98992; font-size: 7.5px; font-weight: 900; white-space: nowrap; }
.select-card.is-done .select-card-go { color: #e189a4; }
.catch-pills { display: flex; gap: 6px; justify-content: flex-end; flex: none; }
.catch-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 99px;
  background: rgba(255,250,248,.82); border: 2px solid var(--ink); font-size: 9px; font-weight: 800;
  box-shadow: 0 3px 0 rgba(74,58,60,.08); white-space: nowrap;
}
.catch-pill b { color: var(--pink-deep); font-size: 11px; }
.catch-board {
  position: relative; width: min(100%, calc((100dvh - 126px) * 1.6129)); aspect-ratio: 1000 / 620;
  margin: 0 auto; border: 2.5px solid rgba(74,58,60,.76); border-radius: 26px; overflow: hidden;
  box-shadow: 0 13px 0 rgba(74,58,60,.06), 0 22px 50px rgba(91,128,148,.15);
  background: #e9f8ff; touch-action: none; user-select: none;
}
#catch-canvas { width: 100%; height: 100%; display: block; cursor: none; }
.catch-hint {
  position: absolute; z-index: 4; left: 50%; top: 11%; transform: translateX(-50%);
  max-width: 86%; padding: 7px 13px; border: 2px solid rgba(74,58,60,.65); border-radius: 99px;
  background: rgba(255,250,248,.85); font-size: 9px; font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.catch-overlay, .memory-overlay {
  position: absolute; z-index: 12; inset: 0; display: grid; place-items: center;
  background: rgba(239,249,255,.72); backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.catch-overlay.is-show, .memory-overlay.is-show { opacity: 1; pointer-events: auto; }
.mini-result-card {
  width: min(390px, calc(100% - 28px)); max-height: 92%; overflow-y: auto;
  border: 2.5px solid var(--ink); border-radius: 22px; padding: 18px 22px 20px; text-align: center;
  background: linear-gradient(160deg, #fffdf9, #fff3f7 60%, #eaf8ff);
  box-shadow: 0 9px 0 rgba(74,58,60,.08), 0 22px 40px rgba(92,128,146,.2);
}
.mini-result-art { height: 92px; display: flex; align-items: center; justify-content: center; margin-top: -9px; }
.mini-result-art img { height: 100%; width: auto; border-radius: 8px; box-shadow: 0 5px 12px rgba(74,58,60,.15); }
.mini-result-kicker { font-size: 7px; letter-spacing: .25em; color: #9db0bb; font-weight: 900; margin-top: 4px; }
.mini-result-card h3 { font-size: 23px; margin-top: 3px; }
.mini-result-card > p { max-width: 300px; margin: 5px auto 10px; font-size: 9px; line-height: 1.55; color: #8b777c; font-weight: 700; }
.mini-result-card .result-stats { margin: 8px 0 12px; }
.mini-result-card .result-actions { display: flex; gap: 8px; }
.mini-result-card .result-actions .soft-btn, .mini-result-card .result-actions .primary-btn { min-height: 42px; font-size: 11px; border-radius: 12px; }
.mini-foot {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; color: #9b898d; font-size: 8px; font-weight: 700;
}
.page-quote {
  text-align: center; color: #b28e9b; font-size: clamp(9px, .9vw, 12px); letter-spacing: .18em;
  font-weight: 700; padding: 12px 0 2px; opacity: .82;
}
.catch-extra { display: none; }
.memory-page { gap: 8px; }
.memory-board { position: relative; flex: 1; width: min(830px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.memory-grid { width: 100%; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); perspective: 1000px; }
.memory-card {
  position: relative; aspect-ratio: 4 / 5; border: 0; background: none; padding: 0;
  perspective: 800px; cursor: pointer;
}
.memory-inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.memory-card.is-flipped .memory-inner { transform: rotateY(180deg); }
.memory-face {
  position: absolute; inset: 0; backface-visibility: hidden; border: 2px solid var(--ink); border-radius: 16px;
  display: grid; place-items: center; overflow: hidden; box-shadow: 0 5px 0 rgba(74,58,60,.08);
}
.memory-back {
  background: linear-gradient(145deg, #9fd8ec, #ffc9da);
  background-image:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.9) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 73% 30%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 76%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.75) 0 2.5px, transparent 3.5px),
    linear-gradient(145deg, #9fd8ec, #ffc9da);
  color: #fff; font-size: clamp(24px, 3.6vw, 45px); font-weight: 900;
}
.memory-back::after {
  content: "LM"; display: grid; place-items: center; width: 48%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9); background: rgba(255,255,255,.55);
  font-family: var(--font-display); color: #5d8ea5; font-size: .45em; letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.memory-card:nth-child(3n) .memory-back { background: linear-gradient(145deg, #ffd2e1, #a9dced); }
.memory-card:nth-child(3n+2) .memory-back { background: linear-gradient(145deg, #bde7f2, #e9d8ff); }
.memory-card:nth-child(odd) .memory-back { background: linear-gradient(145deg, #a9dff0, #ffd3e2); }
.memory-card:nth-child(even) .memory-back { background: linear-gradient(145deg, #ffd2e1, #b7e6f2); }
.memory-card:nth-child(odd) .memory-front { background: linear-gradient(160deg, #dcf4ff, #f7fcff); }
.memory-card:nth-child(even) .memory-front { background: linear-gradient(160deg, #ffe2ee, #fff8fb); }
.memory-front { transform: rotateY(180deg); background: #fffaf7; padding: 7px; }
.memory-front img, .memory-front svg { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.memory-front svg { overflow: visible; }
.memory-card.is-matched .memory-face { border-color: #7fc8a7; box-shadow: 0 5px 0 rgba(72,150,112,.14); }
.memory-card.is-matched .memory-front::after {
  content: "✓"; position: absolute; right: 6px; bottom: 4px; font-size: 14px; font-weight: 900; color: #5da986;
}
.memory-overlay { position: absolute; inset: -6px; border-radius: 22px; }
.memory-page .hub-photo-row { display: none; }

@media (max-width: 900px) {
  .game-hub-grid { grid-template-columns: 1fr; gap: 9px; }
  .game-hub-card { min-height: 108px; padding: 12px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
  .game-hub-card::before { width: 130px; height: 130px; }
  .hub-art { width: 68px; height: 68px; border-radius: 18px; }
  .hub-copy { padding-top: 0; }
  .hub-copy b { font-size: 20px; }
  .hub-copy small { font-size: 8px; }
  .hub-play { align-self: center; min-height: 29px; padding: 0 9px; font-size: 8px; }
  .hub-photo-row { display: none; }
  .hub-bottom { display: none; }
}
@media (max-width: 640px) {
  .hub-page { padding: 6px 10px 12px; }
  .hub-head { padding-top: 8px; }
  .hub-head h2 { font-size: 25px; }
  .hub-head p { font-size: 9px; }
  .game-hub-card { min-height: 94px; grid-template-columns: auto 1fr; }
  .hub-art { width: 57px; height: 57px; border-radius: 15px; }
  .hub-copy b { font-size: 18px; }
  .hub-play { display: none; }
  .mini-page { height: 100dvh; padding: 4px 6px 5px; gap: 4px; }
  .mini-page .page-title b { font-size: 16px; }
  .catch-pills { gap: 3px; }
  .catch-pill { padding: 5px 7px; font-size: 7px; }
  .catch-pill b { font-size: 9px; }
  .catch-board { width: 100%; aspect-ratio: 1000 / 620; border-radius: 17px; }
  .catch-hint { top: 8%; font-size: 7px; padding: 5px 8px; }
  .catch-overlay .mini-result-card { max-height: 96%; padding: 14px 14px 15px; }
  .mini-result-art { height: 58px; }
  .mini-result-card h3 { font-size: 19px; }
  .mini-result-card > p { font-size: 8px; }
  .mini-result-card .result-actions { flex-direction: column-reverse; }
  .mini-foot { font-size: 7px; gap: 7px; }
  .memory-page { overflow-y: auto; }
  .memory-board { flex: 1; align-items: flex-start; padding-top: 6px; }
  .memory-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 7px; }
  .memory-card { aspect-ratio: 4 / 5; }
  .memory-overlay { position: fixed; inset: 0; z-index: 95; }
  .memory-page .catch-pills .catch-pill { font-size: 7px; }
  .hub-art img { padding: 2px; }
  .catch-extra {
    display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px; padding: 10px 4px 14px;
  }
  .catch-extra-card {
    width: min(100%, 350px); padding: 10px 12px; border: 1.8px solid rgba(74,58,60,.3); border-radius: 18px;
    background: rgba(255,251,247,.68); display: flex; align-items: center; gap: 11px; text-align: left;
    box-shadow: 0 5px 0 rgba(74,58,60,.05);
  }
  .catch-extra-card img { width: 92px; height: auto; border-radius: 9px; transform: rotate(-2deg); box-shadow: 0 5px 9px rgba(74,58,60,.14); }
  .catch-extra-card div { display: grid; gap: 3px; }
  .catch-extra-card b { font-size: 13px; }
  .catch-extra-card span { font-size: 8px; line-height: 1.5; color: #8b777c; font-weight: 700; }
  .hub-bottom { display: none; }
  .hub-bottom-copy { text-align: center; padding-bottom: 2px; }
  .hub-bottom-copy span { font-size: 6.5px; }
  .hub-bottom-copy b { font-size: 10px; }
  .hub-duo { height: 145px; }
  .screen-adventure .page-title { min-width: 0; }
  .screen-adventure .page-title small { display: none; }
  .screen-adventure .page-title b { font-size: 14px; letter-spacing: 0; white-space: nowrap; }
  .screen-adventure .catch-pill { padding: 4px 5px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hub-page { padding: 4px 18px; }
  .hub-head { display: none; }
  .game-hub-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
  .game-hub-card { min-height: 200px; padding: 11px; display: flex; }
  .hub-art { width: 58px; height: 58px; border-radius: 16px; }
  .hub-copy b { font-size: 18px; }
  .hub-copy small { font-size: 7px; }
  .hub-play { min-height: 27px; font-size: 7px; }
  .hub-photo-row { display: none; }
  .hub-bottom { display: none; }
  .mini-page { padding: 2px 8px 3px; gap: 2px; }
  .catch-board { width: min(100%, calc((100dvh - 49px) * 1.6129)); }
  .catch-board { border-radius: 15px; }
  .catch-hint { top: 5%; font-size: 7px; padding: 4px 8px; }
  .memory-board { width: min(650px, 100%); }
  .memory-grid { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 6px; }
  .memory-card { aspect-ratio: 4 / 5; }
  .memory-page .page-top { min-height: 35px; }
  .mini-foot { display: none; }
  .catch-pill { padding: 4px 7px; font-size: 7px; }
}

/* ============================================================
   MATCH / JUMP / ADVENTURE
   ============================================================ */
.hub-match { background: linear-gradient(150deg, #efe6ff, #ffe8f2 62%, #e1f5ff); }
.hub-jump { background: linear-gradient(150deg, #dff5ff, #ecf8ff 52%, #ffe2ed); }
.hub-adventure { background: linear-gradient(150deg, #ffe3ef, #e8f8ff 55%, #dfeeff); }
.hub-whack { background: linear-gradient(150deg, #fff2d9, #ffe7f0 60%, #dff4ff); }
.hub-maze { background: linear-gradient(150deg, #ddf6ee, #e9f5ff 55%, #ffe4ef); }
.hub-race { background: linear-gradient(150deg, #ffddea, #e9f7ff 56%, #e5e2ff); }
.game-hub-card { min-height: 150px; padding: 12px 14px; }
.game-hub-card .hub-art { width: 60px; height: 60px; border-radius: 18px; }
.game-hub-card .hub-copy { padding-top: 5px; }
.game-hub-card .hub-copy b { font-size: 20px; }
.game-hub-card .hub-copy small { font-size: 8px; }
.game-hub-card .hub-play { min-height: 28px; padding: 0 10px; font-size: 8px; }
.hub-photo-row, .hub-bottom { display: none; }
.screen-whack, .screen-maze, .screen-race { overflow-y: auto; overflow-x: hidden; }
.whack-board { position: relative; width: min(100%, calc((100dvh - 125px) * 1.05)); max-width: 640px; margin: 0 auto; padding: 14px; border: 2.5px solid rgba(74,58,60,.76); border-radius: 26px; background: linear-gradient(160deg, #e8f9ff, #fff0f6); box-shadow: 0 13px 0 rgba(74,58,60,.06), 0 22px 50px rgba(91,128,148,.15); }
.whack-board::after { content: "✿   ♥   ✿"; position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; color: rgba(238,145,175,.55); font-size: 9px; letter-spacing: 14px; pointer-events: none; }
.whack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; aspect-ratio: 4 / 3; }
.whack-hole { position: relative; border: 2px solid rgba(74,58,60,.3); border-radius: 50%; background: radial-gradient(circle at 50% 42%, #d6f2fb, #a7d8e8 70%); box-shadow: inset 0 8px 0 rgba(255,255,255,.3); cursor: pointer; overflow: hidden; }
.whack-hole:nth-child(even) { background: radial-gradient(circle at 50% 42%, #ffe1eb, #f3b6cb 70%); }
.whack-hole::after { content: ""; position: absolute; left: 13%; right: 13%; bottom: 6%; height: 20%; border-radius: 50%; background: rgba(47,79,91,.2); }
.whack-hole img { position: absolute; z-index: 1; left: 50%; bottom: 110%; width: 72%; height: auto; transform: translate(-50%, 0); transition: bottom .14s cubic-bezier(.22,1,.36,1); pointer-events: none; filter: drop-shadow(0 4px 3px rgba(74,58,60,.2)); }
.whack-hole.is-up img { bottom: 10%; }
.whack-hole.is-up { border-color: rgba(74,58,60,.62); }
.whack-hole.is-hit img { animation: whackHit .28s ease-out forwards; }
.whack-ink { position: absolute; z-index: 1; left: 50%; bottom: 22%; transform: translateX(-50%); width: 52%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8d7a94, #5d4b65); color: #fff; font-size: 11px; font-weight: 900; box-shadow: inset 0 4px 0 rgba(255,255,255,.15); }
@keyframes whackHit { 0% { transform: translate(-50%,0) scale(1); } 100% { transform: translate(-50%,40%) scale(.5); opacity: 0; } }
.maze-board { position: relative; width: min(100%, calc((100dvh - 160px) * 1.29)); aspect-ratio: 800 / 620; margin: 0 auto; border: 2.5px solid rgba(74,58,60,.76); border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, #e6f8ff, #fff0f7); box-shadow: 0 13px 0 rgba(74,58,60,.06), 0 22px 50px rgba(91,128,148,.15); }
#maze-canvas { width: 100%; height: 100%; display: block; }
.maze-controls { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.maze-controls button { width: 36px; height: 34px; border: 2px solid rgba(74,58,60,.6); border-radius: 10px; background: #fffdf9; font-size: 15px; font-weight: 900; cursor: pointer; touch-action: none; }
.maze-hint-btn { width: 54px !important; font-size: 9px !important; background: linear-gradient(120deg, #ffd8e5, #e5f7ff) !important; color: #a77484 !important; }
.maze-controls span { font-size: 8px; color: #a18d92; font-weight: 700; }
.race-board { position: relative; width: min(100%, 900px); margin: 0 auto; border: 2.5px solid rgba(74,58,60,.76); border-radius: 26px; background: linear-gradient(165deg, #e7f8ff, #fff0f7); padding: 18px; box-shadow: 0 13px 0 rgba(74,58,60,.06), 0 22px 50px rgba(91,128,148,.15); }
.race-track { display: grid; gap: 14px; position: relative; padding: 3px 0; }
.race-lane { position: relative; height: 78px; border-radius: 18px; border: 1.8px solid rgba(74,58,60,.22); background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,255,255,.55) 42px 45px), linear-gradient(90deg, #cfeef7, #ffd9e5); overflow: hidden; }
.race-lane::after { content: ""; position: absolute; inset: auto 0 10px 0; height: 3px; background: rgba(74,58,60,.12); }
.race-runner { position: absolute; left: 0%; bottom: 6px; width: 70px; height: 64px; transition: left .12s linear; display: flex; align-items: flex-end; justify-content: center; }
.race-runner img { width: 100%; height: 100%; object-fit: contain; }
.race-flag { position: absolute; right: 10px; top: -9px; z-index: 3; font-size: 26px; color: #e06f93; }
.race-push { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 12px 0 2px; }
.race-push button { min-width: 210px; height: 48px; border: 2.5px solid var(--ink); border-radius: 99px; background: linear-gradient(90deg, #bdeaf6, #ffd2e0); font-size: 13px; font-weight: 900; cursor: pointer; touch-action: none; box-shadow: 0 4px 0 rgba(74,58,60,.08); }
.race-push button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(74,58,60,.08); }
.race-push span { font-size: 8px; color: #9d898f; font-weight: 700; }
@media (max-width: 640px) {
  .whack-board { width: 100%; padding: 8px; border-radius: 18px; }
  .whack-grid { gap: 6px; }
  .maze-board { width: 100%; border-radius: 17px; }
  .maze-controls { gap: 5px; }
  .maze-controls button { width: 42px; height: 38px; }
  .race-board { width: 100%; padding: 10px; border-radius: 18px; }
  .race-lane { height: 62px; }
  .race-runner { width: 54px; height: 50px; }
  .race-push button { width: 100%; }
  .game-hub-card { min-height: 94px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .whack-board { width: min(100%, calc((100dvh - 64px) * 1.05)); }
  .maze-board { width: min(100%, calc((100dvh - 70px) * 1.29)); }
  .race-board { width: min(100%, 700px); padding: 8px; }
  .race-lane { height: 52px; }
  .race-runner { width: 44px; height: 42px; }
}
.match-board, .jump-board, .adventure-board {
  position: relative; margin: 0 auto; border: 2.5px solid rgba(74,58,60,.76); border-radius: 26px;
  overflow: hidden; box-shadow: 0 13px 0 rgba(74,58,60,.06), 0 22px 50px rgba(91,128,148,.15);
  background: #eaf8ff; touch-action: none; user-select: none;
}
.match-board { width: min(100%, calc((100dvh - 118px) * .94)); max-width: 640px; padding: clamp(8px, 1.2vw, 15px); background: linear-gradient(160deg, #e7f7ff, #fff1f7); }
.match-board::before, .whack-board::before, .race-board::before {
  content: "✦   ♥   ✦"; position: absolute; z-index: 0; top: 2px; left: 0; right: 0;
  text-align: center; letter-spacing: 18px; font-size: 8px; color: rgba(240,154,181,.7); pointer-events: none;
}
.match-grid { display: grid; grid-template-columns: repeat(var(--match-cols, 7), minmax(0, 1fr)); gap: clamp(4px, .62vw, 8px); aspect-ratio: 1; }
.match-tile {
  border: 2px solid rgba(74,58,60,.46); border-radius: 14px; padding: 2px; background: linear-gradient(160deg, #d8f3ff, #f7fcff);
  display: grid; place-items: center; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .13s, border-color .13s, box-shadow .13s;
}
.match-tile:nth-child(even) { background: linear-gradient(160deg, #ffe0ec, #fff7fa); }
.match-tile img { width: 92%; height: 92%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(74,58,60,.18)); }
.match-tile:hover { transform: translateY(-2px); border-color: rgba(74,58,60,.8); }
.match-tile.is-picked { border-color: #f18dac; box-shadow: 0 0 0 3px rgba(244,156,182,.28), 0 0 0 6px rgba(255,255,255,.4); transform: scale(1.04); }
.match-tile.is-pop { animation: tilePop .25s ease-in forwards; }
.match-tile.is-bad { animation: tileBad .3s ease-in; }
.match-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.5), transparent 55%); pointer-events: none; }
@keyframes tilePop { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.2) rotate(18deg); opacity: 0; } }
@keyframes tileBad { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-3deg); } 75% { transform: translateX(5px) rotate(3deg); } }
.match-grid.is-busy { pointer-events: none; }
.jump-board { width: min(100%, calc((100dvh - 128px) * 1.6129)); aspect-ratio: 1000 / 620; }
#jump-canvas, #adventure-canvas { width: 100%; height: 100%; display: block; }
#jump-canvas { cursor: pointer; }
.jump-hint, .adventure-hint {
  position: absolute; z-index: 5; left: 50%; top: 4%; transform: translateX(-50%);
  padding: 6px 12px; border: 1.8px solid rgba(74,58,60,.58); border-radius: 99px;
  background: rgba(255,250,248,.82); font-size: 8px; font-weight: 800; white-space: nowrap;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.jump-extra { display: none; }
.adventure-page { gap: 5px; }
.adventure-board { width: min(100%, calc((100dvh - 188px) * 1.935)); aspect-ratio: 1200 / 620; }
.adventure-hint { top: 3%; }
.adventure-controls { display: flex; justify-content: center; gap: clamp(16px, 4vw, 44px); align-items: center; }
.adv-pad { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1.5px solid rgba(74,58,60,.28); border-radius: 14px; background: rgba(255,250,248,.58); }
.adv-label { font-size: 8px; font-weight: 900; color: #88757b; margin-right: 4px; }
.adv-pad button {
  min-width: 32px; height: 29px; padding: 0 7px; border: 1.8px solid rgba(74,58,60,.62); border-radius: 9px;
  background: #fffdf9; font-size: 10px; font-weight: 900; touch-action: none; cursor: pointer;
}
.adv-pad button:active { transform: translateY(2px); background: #ffe8f2; }
.p2-pad button { background: #eefaff; }
.adv-pad button:active { background: #ffe4ee; }
.screen-match, .screen-jump, .screen-adventure { overflow-y: auto; overflow-x: hidden; }
.game-levels { display: flex; justify-content: center; align-items: center; gap: 5px; min-height: 26px; flex-wrap: wrap; }
.game-level-btn {
  min-width: 64px; height: 36px; padding: 2px 7px; border: 1.8px solid rgba(74,58,60,.45); border-radius: 11px;
  background: rgba(255,250,248,.72); color: #8c787e; font-size: 8px; font-weight: 900; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  transition: transform .15s, background .15s, color .15s;
}
.game-level-btn b { font-size: 8px; line-height: 1; color: #a18d92; }
.game-level-btn em { font-style: normal; font-size: 7.2px; line-height: 1.2; white-space: nowrap; color: #806d73; }
.game-level-btn:hover { transform: translateY(-1px); }
.game-level-btn.is-active { background: linear-gradient(90deg, #bde9f5, #ffd0df); color: #5e4c51; border-color: var(--ink); box-shadow: 0 2px 0 rgba(74,58,60,.08); }
.game-level-btn.is-done::after { content: " ✓"; color: #5b9e7d; }
.game-levels-label { font-size: 7px; font-weight: 900; letter-spacing: .12em; color: #a28e93; margin-right: 3px; }

@media (max-width: 900px) {
  .match-board { width: min(100%, 540px); }
  .game-hub-card { min-height: 112px; }
}
@media (max-width: 640px) {
  .catch-overlay { position: fixed; inset: 0; z-index: 95; }
  .match-board { width: 100%; padding: 6px; border-radius: 17px; }
  .match-grid { gap: 4px; }
  .match-tile { border-radius: 10px; border-width: 1.5px; }
  .match-tile img { width: 94%; height: 94%; }
  .jump-board { width: 100%; border-radius: 17px; }
  .jump-hint, .adventure-hint { font-size: 6.5px; padding: 4px 8px; top: 2%; }
  .jump-extra { display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 4px; }
  .adventure-page { overflow-y: auto; }
  .adventure-board { width: 100%; border-radius: 17px; }
  .adventure-controls { gap: 8px; flex-direction: column; padding: 3px 0; }
  .adv-pad { width: min(100%, 340px); justify-content: center; }
  .adv-pad button { min-width: 44px; height: 35px; }
  .adventure-page .mini-foot { display: none; }
  .game-hub-card { min-height: 94px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .match-board { width: min(100%, calc((100dvh - 55px) * .94)); }
  .jump-board { width: min(100%, calc((100dvh - 62px) * 1.6129)); }
  .adventure-board { width: min(100%, calc((100dvh - 95px) * 1.935)); }
  .adventure-controls { display: none; }
  .match-grid { gap: 3px; }
  .match-tile { border-radius: 8px; }
}

/* ============================================================
   PLAY
   ============================================================ */
.screen-play { background: transparent; }
.play-page {
  width: min(1240px, 100%); height: 100dvh; margin: 0 auto;
  padding: 6px clamp(12px, 2vw, 26px) 7px;
  display: flex; flex-direction: column; gap: 5px;
}
.play-top {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 48px; padding: 2px 58px 2px 0;
}
.play-title { display: grid; gap: 1px; text-align: center; flex: 1; }
.play-title small { font-size: 8px; letter-spacing: .24em; font-weight: 900; color: #9aaab5; }
.play-title b { font-size: clamp(17px, 2vw, 24px); letter-spacing: .07em; }
.play-actions { display: flex; gap: 7px; justify-content: flex-end; min-width: 143px; }
.play-actions .soft-btn { min-height: 37px; padding: 0 13px; font-size: 11px; }
.play-board {
  position: relative; width: min(100%, calc((100dvh - 122px) * 1.6129));
  aspect-ratio: 1000 / 620; margin: 0 auto; border-radius: 26px; overflow: hidden;
  border: 2.5px solid rgba(74,58,60,.76);
  background: #e9f8ff; box-shadow: 0 13px 0 rgba(74,58,60,.06), 0 22px 50px rgba(91,128,148,.15);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#game-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.game-hud {
  position: absolute; z-index: 5; inset: 12px 14px auto; display: flex;
  align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none;
}
.hud-left, .hud-right {
  display: flex; align-items: center; gap: 7px; min-height: 35px; padding: 4px 10px;
  border: 2px solid rgba(74,58,60,.72); border-radius: 99px;
  background: rgba(255,250,248,.82); backdrop-filter: blur(8px);
  box-shadow: 0 3px 0 rgba(74,58,60,.08); font-size: 10px; font-weight: 800;
}
.hud-level { width: 25px; height: 25px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; font-size: 10px; font-weight: 900; border: 1.5px solid var(--ink); }
.hud-label { letter-spacing: .02em; }
.hud-heart { color: var(--pink-deep); font-size: 15px; }
.hud-right #hud-heart-count { letter-spacing: .02em; }
.boss-hp { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 99px; background: #e6edf8; color: #596884; font-size: 8px; font-weight: 900; border: 1px solid rgba(74,58,60,.16); }
.boss-hp b { font-size: 10px; color: #d87698; }
.boss-hp[hidden] { display: none; }
.hud-right.boss-mode .hud-heart, .hud-right.boss-mode #hud-heart-count, .hud-right.boss-mode .hud-diff { display: none; }
.hud-right.boss-mode .boss-hp { font-size: 10px; padding: 2px 10px; background: #fff0f5; }
.hud-right.boss-mode .boss-hp b { font-size: 13px; }
.hud-diff { font-size: 7px; letter-spacing: 1px; color: #e980a2; margin-left: 2px; }
.hud-center {
  display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 5px;
  border: 2px solid rgba(74,58,60,.72); border-radius: 99px;
  background: rgba(255,250,248,.86); backdrop-filter: blur(8px);
  box-shadow: 0 3px 0 rgba(74,58,60,.08);
}
.timer-ring { position: relative; width: 39px; height: 39px; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 5; }
.ring-bg { stroke: rgba(74,58,60,.12); }
.ring-fill { stroke: #f794b2; stroke-linecap: round; stroke-dasharray: 144.5; stroke-dashoffset: 0; transition: stroke-dashoffset .15s linear; }
.timer-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #635055; }
.hud-timer-copy { display: none; }
.hud-timer-copy b { font-size: 9px; } .hud-timer-copy small { font-size: 7px; color: #978389; }
.ink-hud {
  position: absolute; z-index: 6; left: 15px; right: 15px; bottom: 12px;
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border: 2px solid rgba(74,58,60,.72); border-radius: 14px;
  background: rgba(255,250,248,.86); backdrop-filter: blur(8px);
  box-shadow: 0 3px 0 rgba(74,58,60,.07);
}
.ink-label { display: flex; align-items: center; gap: 7px; flex: none; font-size: 9px; font-weight: 800; white-space: nowrap; }
.ink-label b { color: var(--pink-deep); font-size: 10px; }
.ink-stars { font-style: normal; font-size: 8px; font-weight: 900; color: #5eabc8; background: rgba(224,246,253,.8); border: 1px solid rgba(74,58,60,.12); padding: 1px 6px; border-radius: 99px; letter-spacing: .02em; }
.ink-stars.is-full { background: #fff2b8; color: #a1772f; border-color: rgba(185,141,55,.35); }
.ink-bar { height: 10px; flex: 1; border-radius: 99px; background: rgba(74,58,60,.1); overflow: hidden; position: relative; border: 1px solid rgba(74,58,60,.08); }
.ink-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #8dd3ea, #f6a7c0); transition: width .1s linear; }
.ink-bar.is-low i { background: linear-gradient(90deg, #f0a2b9, #e97091); }
.ink-bar.is-low { animation: lowInk 1.2s ease-in-out infinite; }
.happy-pill.is-full { background: #fff2bd; border-color: #c8943d; }
.happy-pill.is-full span { color: #e7a63b; }
.timer-ring.is-danger { animation: timerPulse .85s ease-in-out infinite; }
.ink-shine { position: absolute; left: 3px; right: 3px; top: 2px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.46); pointer-events: none; }
.ink-clear {
  flex: none; border: 1.5px solid rgba(74,58,60,.5); border-radius: 99px; min-height: 25px;
  padding: 0 10px; font-size: 9px; font-weight: 800; background: rgba(255,255,255,.65);
  transition: background .15s, transform .15s;
}
.ink-clear:hover { background: #fff; transform: translateY(-1px); }
.ink-clear:active { transform: translateY(1px); }
.game-toast {
  position: absolute; z-index: 7; left: 50%; top: 13.5%; transform: translate(-50%, -8px);
  display: flex; align-items: center; gap: 7px; padding: 8px 15px;
  border: 2px solid rgba(74,58,60,.72); border-radius: 99px;
  background: rgba(255,250,248,.9); backdrop-filter: blur(8px);
  box-shadow: 0 5px 0 rgba(74,58,60,.06); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; max-width: 90%;
}
.game-toast span { color: var(--pink-deep); font-size: 13px; }
.game-toast p { font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.hint-card {
  position: absolute; z-index: 9; right: 15px; top: 60px; max-width: 290px;
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px;
  border: 2px solid var(--ink); border-radius: 15px; background: #fffaf6;
  box-shadow: 4px 5px 0 rgba(74,58,60,.09); opacity: 0; transform: translateY(-8px);
  pointer-events: none; transition: opacity .22s, transform .22s;
}
.hint-card.is-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hint-star { color: var(--pink-deep); font-size: 16px; }
.hint-card div { display: grid; gap: 4px; padding-right: 7px; }
.hint-card small { font-size: 7px; letter-spacing: .16em; color: #a69498; font-weight: 900; }
.hint-card b { font-size: 10px; line-height: 1.55; color: #665357; }
.hint-card button { font-size: 17px; line-height: 1; color: #a18d92; padding: 0 2px; }
.countdown {
  position: absolute; z-index: 10; inset: 0; display: grid; place-content: center; text-align: center;
  background: rgba(255,249,247,.2); backdrop-filter: blur(1px); pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.countdown.is-show { opacity: 1; }
.countdown span { font-size: 11px; letter-spacing: .4em; font-weight: 900; color: #8c9ca7; display: block; margin-bottom: 6px; }
.countdown b {
  display: block; font-family: var(--font-display); font-size: clamp(44px, 7vw, 80px); line-height: 1;
  color: #f58eae; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  filter: drop-shadow(0 6px 0 rgba(74,58,60,.1)); animation: countPop .85s cubic-bezier(.22,1,.36,1) both;
}
.result-overlay {
  position: absolute; z-index: 20; inset: 0; display: grid; place-items: center;
  background: rgba(237,249,255,.68); backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.result-overlay.is-show { opacity: 1; pointer-events: auto; }
.result-card {
  width: min(425px, calc(100% - 34px)); border: 2.5px solid var(--ink); border-radius: 25px;
  background: linear-gradient(160deg, #fffdf9 0%, #fff5f8 58%, #eef9ff 100%);
  box-shadow: 0 10px 0 rgba(74,58,60,.08), 0 25px 50px rgba(99,136,156,.2);
  padding: 19px 25px 20px; text-align: center; position: relative;
  transform: translateY(12px) scale(.97); transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.result-overlay.is-show .result-card { transform: translateY(0) scale(1); }
.result-art { --art-h: 118px; height: var(--art-h); display: grid; place-items: center; margin-top: -59px; margin-bottom: 1px; }
.result-art svg, .result-art img { height: auto; max-height: 100%; width: auto; filter: drop-shadow(0 6px 5px rgba(74,58,60,.11)); }
.result-art .lumu-cutout { height: var(--art-h); width: auto; max-width: 100%; }
.result-art .pair-wrap { height: 100%; }
.result-art .pair-person svg { height: 100%; }
.result-art .pair-heart { width: 25px; height: 23px; top: 58%; }
.result-art .pair-heart span { font-size: 8px; }
.result-stars { display: flex; justify-content: center; gap: 5px; height: 37px; align-items: center; }
.result-stars span { font-size: 29px; line-height: 1; color: #e0cbd0; }
.result-stars span.earned { color: #f599b7; text-shadow: 0 3px 0 rgba(255,255,255,.8); animation: starPop .5s cubic-bezier(.22,1,.36,1) both; }
.result-stars span:nth-child(2) { animation-delay: .12s; transform: translateY(-4px); }
.result-stars span:nth-child(3) { animation-delay: .24s; }
.result-kicker { font-size: 7px; letter-spacing: .28em; color: #9fb0bb; font-weight: 900; margin-top: 2px; }
.result-card h3 { font-size: 25px; margin-top: 3px; letter-spacing: .04em; }
.result-card > p { margin: 5px auto 11px; max-width: 310px; font-size: 10px; line-height: 1.55; color: #887579; font-weight: 700; }
.result-stats { display: flex; justify-content: center; gap: 8px; margin: 9px 0 14px; }
.result-stats div {
  flex: 1; padding: 7px 5px; border: 1.5px solid rgba(74,58,60,.18); border-radius: 11px;
  background: rgba(255,255,255,.55); display: grid; gap: 2px;
}
.result-stats small { font-size: 7px; color: #9b898e; font-weight: 800; }
.result-stats b { font-size: 12px; color: #725e63; }
.result-actions { display: flex; gap: 8px; }
.result-actions .primary-btn, .result-actions .soft-btn { min-height: 45px; font-size: 12px; border-radius: 13px; }
.result-actions .soft-btn { box-shadow: 0 5px 0 rgba(74,58,60,.09); }
.play-foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px;
  width: 100%; padding: 2px 3px 0; color: #9d8b8f; font-size: 8px; font-weight: 700;
}
.mobile-play-extra { display: none; }
.play-foot b { color: #776368; }
.play-foot-hearts { color: #ef9ab4; letter-spacing: 2px; margin-left: auto; }

/* ---------- toast / modal ---------- */
.toast {
  position: fixed; z-index: 120; left: 50%; bottom: 27px; transform: translate(-50%, 15px);
  padding: 10px 18px; border-radius: 99px; border: 2px solid var(--ink);
  background: rgba(255,250,248,.95); box-shadow: 0 7px 0 rgba(74,58,60,.08), 0 15px 30px rgba(87,124,144,.16);
  font-size: 11px; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  max-width: min(90vw, 460px); text-align: center;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center;
  background: rgba(51,49,52,.25); backdrop-filter: blur(6px); padding: 18px;
  animation: fadeIn .2s ease;
}
.modal-card {
  width: min(450px, 100%); background: #fffaf7; border: 2.5px solid var(--ink);
  border-radius: 24px; box-shadow: 0 14px 0 rgba(74,58,60,.1), 0 30px 60px rgba(44,62,72,.22);
  padding: 22px; text-align: center;
}
.modal-card h3 { font-size: 22px; margin-bottom: 7px; }
.modal-card p { font-size: 11px; line-height: 1.6; color: #826e73; font-weight: 700; }
.modal-card .modal-actions { display: flex; gap: 8px; margin-top: 15px; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-height: 760px) and (min-width: 900px) {
  .landing-wrap { padding-top: 10px; padding-bottom: 8px; gap: 4px; }
  .tagline { margin-top: 4px; }
  .hero-pair { height: clamp(215px, 40vh, 330px); }
  .mode-card { min-height: 72px; }
  .mode-copy b { font-size: 21px; }
  .level-card { min-height: 108px; padding: 8px 10px; }
  .levels-head { padding-top: 7px; padding-bottom: 6px; }
  .food-card { min-height: 98px; --food-art: 61px; }
  .food-card .food-art { height: var(--food-art); }
  .room-scene { min-height: 500px; }
  .room-hero { height: clamp(230px, 36vh, 330px); }
}
@media (max-width: 920px) {
  .screen { overflow-y: auto; }
  body { overflow: hidden; }
  .landing-wrap { grid-template-rows: auto minmax(220px, 1fr) auto auto; }
  .sticker-owl { left: 1%; bottom: 22%; }
  .sticker-emo { right: 1%; bottom: 25%; }
  .sticker-blue { right: 3%; }
  .name-tag { display: none; }
  .levels-head { grid-template-columns: 1fr auto; }
  .levels-mascots { display: none; }
  .level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room-page { height: auto; min-height: 100dvh; }
  .room-scene { min-height: 750px; }
  .room-hero { height: clamp(260px, 34vh, 330px); }
  .food-tray { position: absolute; }
  .window { width: 31%; }
  .shelf { width: 30%; }
  .room-lamp { left: 46%; }
}
@media (max-width: 640px) {
  .screen-landing { align-items: flex-start; }
  .landing-wrap {
    height: auto; min-height: 100dvh; padding: 16px 14px 12px;
    grid-template-rows: auto auto auto auto; gap: 10px; align-content: center;
  }
  body[data-screen="landing"] .sound-toggle { top: auto; bottom: 18px; right: 14px; }
  .eyebrow { font-size: 8px; letter-spacing: .16em; }
  .eyebrow em { display: none; }
  .game-title { font-size: clamp(45px, 14vw, 68px); margin-top: 2px; }
  .tagline { font-size: 10px; letter-spacing: .05em; }
  .hero-stage { height: auto; min-height: 245px; margin: 0 -10px; }
  .hero-pair { height: clamp(205px, 28vh, 238px); width: 100%; max-height: none; }
  .hero-halo { width: 100%; }
  .hero-ring { width: 86%; }
  .sticker-owl { width: 42px; left: 0; bottom: 1%; }
  .sticker-emo { width: 40px; right: 0; bottom: 3%; }
  .sticker-blue { display: none; }
  .door-pets { display: none; }
  .sticker-owl::after, .sticker-emo::after, .sticker-blue::after { display: none; }
  .mode-row { grid-template-columns: 1fr; gap: 9px; width: 100%; }
  .mode-card { min-height: 70px; padding: 9px 14px; border-radius: 18px; }
  .mode-icon { width: 44px; height: 44px; border-radius: 13px; }
  .mode-copy b { font-size: 19px; }
  .mode-copy small { font-size: 9px; }
  .mode-badge { display: none; }
  .landing-foot { font-size: 8px; margin-top: 2px; }
  .sound-toggle { width: 39px; height: 39px; right: 11px; top: 10px; }

  .room-page { padding: 7px 9px 7px; }
  .page-top { padding: 5px 47px 5px 1px; gap: 7px; }
  .page-title small { display: none; }
  .page-title b { font-size: 19px; }
  .top-actions { min-width: 0; gap: 5px; }
  .top-actions .happy-pill { display: none; }
  .tray-happy { display: inline-block; margin-left: auto; font-size: 10px; }
  .happy-pill, .progress-pill { padding: 0 10px; min-height: 34px; font-size: 10px; }
  .pill-btn { min-height: 34px; padding: 0 10px; font-size: 10px; }
  .room-play-top { padding: 0 9px; }
  .room-play-top .play-label { display: inline; }
  .room-scene { min-height: 640px; border-radius: 22px; }
  .window { right: 5%; top: 5%; width: 37%; height: 30%; }
  .shelf { left: 4%; top: 7%; width: 36%; height: 22%; }
  .wall-art { display: none; }
  .room-bubble { top: 19%; max-width: 66%; min-width: 170px; padding: 8px 11px; }
  .room-bubble p { font-size: 10px; }
  .room-hero { height: 200px; bottom: 14%; }
  .room-hero .lumu-cutout { max-width: 100%; }
  .select-hero { padding: 12px 14px; gap: 8px; }
  .select-copy h2 { font-size: 21px; }
  .select-copy p { font-size: 8px; }
  .select-art svg { width: 62px; height: 62px; }
  .select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .select-card { grid-template-columns: 46px 1fr; gap: 5px 6px; padding: 8px 8px 7px; }
  .select-card-art { width: 46px; height: 46px; }
  .select-card-copy b { font-size: 11px; }
  .select-card-copy em { font-size: 6px; }
  .select-card-copy small { font-size: 5.8px; }
  .select-card-go { font-size: 6.5px; }
  .select-card-num { font-size: 5.5px; top: 5px; right: 6px; }
  .room-page .page-title b { font-size: 15px; }
  .room-page .page-title small { display: none; }
  .room-page .top-actions { gap: 3px; }
  .room-page .pill-btn { padding: 5px 7px; font-size: 8px; }
  .room-page .food-toggle, .room-page .room-play-top { width: 30px; height: 30px; padding: 0; font-size: 0; justify-content: center; }
  .room-page .food-toggle span, .room-page .room-play-top span { font-size: 13px; }
  .room-page .play-label { display: none; }
  .hunger-mini { gap: 3px; }
  .hunger-item { gap: 2px; font-size: 6px; }
  .hunger-item > span { width: 11px; }
  .hunger-item i { width: 25px; height: 6px; }
  .hunger-item em { display: none; }
  .speech { top: 48%; width: 44%; padding: 5px 7px 6px; }
  .speech-lulu { left: 2%; }
  .speech-mu { right: 2%; }
  .speech span { font-size: 6px; padding: 1px 5px; }
  .speech p { font-size: 6px; }
  .memory-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.in-minigame .coin-chip { display: none; }
  .room-cat { width: 58px; left: auto; right: .5%; bottom: 30%; }
  .cat-name { display: block; left: auto; right: .5%; bottom: 38%; font-size: 7px; padding: 2px 5px; letter-spacing: .03em; }
  .room-pets { left: 2%; bottom: 23%; animation: petRoamMobile 15s ease-in-out infinite alternate; }
  .pet-capy { width: 47px; }
  .pet-bun { width: 31px; }
  .room-bee { width: 27px; right: 4%; top: 13%; }
  .room-capybun { width: 48px; right: 3%; bottom: 23%; }
  .room-plush-owl { width: 37px; left: 12%; bottom: 35%; }
  .room-plush-emo { width: 33px; right: 12%; bottom: 36%; }
  .tea-table, .floor-cushions, .toy-basket { display: none; }
  .play-cta { right: 3%; bottom: 25.5%; font-size: 11px; min-height: 38px; padding: 0 12px; }
  .play-cta small { display: none; }
  .food-tray { padding: 8px 9px; left: 1.2%; right: 1.2%; bottom: 1.2%; border-radius: 18px; }
  .tray-head { padding-bottom: 5px; }
  .tray-head b { font-size: 12px; }
  .tray-note { display: none; }
  .tray-head small { font-size: 7px; }
  .food-card { flex: 0 0 86px; min-height: 104px; --food-art: 64px; }
  .food-card .food-art { height: var(--food-art); }
  .food-card .food-name { font-size: 9px; }
  .food-card .food-name em { display: none; }
  .flying-food { width: 84px; height: 84px; }
  .room-foot { font-size: 7px; gap: 5px; flex-direction: column; align-items: center; }

  .levels-page { padding: 6px 10px 14px; }
  .levels-head { grid-template-columns: 1fr; padding: 8px 2px; }
  .levels-stat-card { display: none; }
  .levels-copy h2 { font-size: 23px; }
  .levels-copy p { font-size: 9px; }
  .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; min-width: 0; }
  .level-card { min-height: 113px; padding: 8px 9px; border-radius: 16px; min-width: 0; }
  .level-thumb { width: 45px; height: 45px; border-radius: 12px; }
  .level-main { gap: 7px; }
  .level-info b { font-size: 12px; }
  .level-info small { font-size: 7px; }
  .level-mechanic { font-size: 6px; padding: 1px 4px; }
  .levels-foot { font-size: 7px; }

  .screen-play { overflow: hidden; }
  .play-page { height: 100dvh; padding: 4px 6px 4px; gap: 4px; }
  .play-top { min-height: 43px; padding-right: 46px; }
  .play-title small { font-size: 7px; }
  .play-title b { font-size: 16px; }
  .play-actions .soft-btn { min-height: 32px; padding: 0 9px; font-size: 9px; }
  .play-actions .soft-btn span { font-size: 11px; }
  .play-actions { min-width: 0; gap: 4px; }
  .play-board { width: 100%; aspect-ratio: 1000 / 620; border-radius: 17px; }
  .mobile-play-extra {
    display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 9px 4px 12px; text-align: center; position: relative;
  }
  .mobile-play-extra::before {
    content: "☁"; position: absolute; left: 8%; top: 18%; color: rgba(255,255,255,.78); font-size: 38px;
    text-shadow: 34px 12px 0 rgba(255,255,255,.6), -18px 24px 0 rgba(255,255,255,.45);
    pointer-events: none;
  }
  .mobile-guardian-card {
    position: relative; z-index: 1; width: min(100%, 350px); padding: 11px 13px 12px;
    border: 1.8px solid rgba(74,58,60,.32); border-radius: 19px;
    background: rgba(255,251,247,.66); backdrop-filter: blur(4px);
    box-shadow: 0 5px 0 rgba(74,58,60,.05);
  }
  .mobile-guardian-art { height: 174px; display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 8px 7px rgba(100,112,123,.12)); }
  .mobile-guardian-art .lumu-cutout { height: 100%; width: auto; }
  .mobile-guardian-art .pair-wrap { height: 100%; }
  .mobile-guardian-art .pair-person svg { height: 100%; }
  .mobile-guardian-art .pair-heart { width: 26px; height: 24px; top: 58%; }
  .mobile-guardian-art .pair-heart span { font-size: 8px; }
  .mobile-guardian-copy { display: grid; gap: 3px; margin-top: 4px; }
  .mobile-guardian-copy small { font-size: 6.5px; letter-spacing: .2em; color: #a3b2ba; font-weight: 900; }
  .mobile-guardian-copy b { font-size: 13px; letter-spacing: .02em; }
  .mobile-guardian-copy span { font-size: 9px; line-height: 1.45; color: #8b797e; font-weight: 700; }
  .mobile-play-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .mobile-play-chips span {
    font-size: 7.5px; font-weight: 800; color: #8e7a7f; border: 1px solid rgba(74,58,60,.18);
    background: rgba(255,255,255,.48); border-radius: 99px; padding: 4px 8px;
  }
  .result-overlay { position: fixed; inset: 0; z-index: 95; }
  .result-card { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; width: min(92vw, 400px); }
  .game-hud { inset: 7px 8px auto; gap: 5px; }
  .hud-left, .hud-right { min-height: 27px; padding: 2px 7px; font-size: 8px; }
  .hud-level { width: 20px; height: 20px; font-size: 8px; }
  .hud-diff { display: none; }
  .boss-hp { font-size: 7px; padding: 1px 5px; }
  .ink-stars { font-size: 6.5px; padding: 1px 4px; }
  .hud-center { padding: 3px 9px 3px 4px; }
  .timer-ring { width: 29px; height: 29px; }
  .timer-ring span { font-size: 10px; }
  .ink-hud { left: 7px; right: 7px; bottom: 7px; padding: 5px 7px; gap: 6px; border-radius: 10px; }
  .ink-label { font-size: 7px; gap: 3px; }
  .ink-label b { font-size: 8px; }
  .ink-clear { min-height: 21px; font-size: 7px; padding: 0 7px; }
  .game-toast { top: 11%; padding: 6px 10px; }
  .game-toast p { font-size: 8px; white-space: normal; text-align: center; }
  .hint-card { top: 46px; right: 8px; max-width: 220px; padding: 8px 10px; }
  .hint-card b { font-size: 8px; }
  .result-card { padding: 17px 17px 16px; }
  .result-art { --art-h: 66px; height: var(--art-h); margin-top: -33px; }
  .result-card h3 { font-size: 21px; }
  .result-card > p { font-size: 9px; }
  .result-stats { gap: 5px; }
  .result-stats b { font-size: 10px; }
  .result-actions { flex-direction: column-reverse; }
  .play-foot { display: none; }
}
@media (max-width: 390px) {
  .game-title { font-size: 43px; }
  .hero-stage { min-height: 230px; }
  .mode-card { min-height: 65px; }
  .level-card { min-height: 107px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .landing-wrap {
    height: 100%; padding: 5px 18px 6px; gap: 2px;
    grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch;
  }
  .eyebrow, .tagline, .landing-foot { display: none; }
  .game-title { font-size: clamp(30px, 5.6vw, 46px); margin: 0; }
  .title-swoosh { display: none; }
  .hero-stage { height: 100%; min-height: 0; margin: 0; }
  .hero-pair { height: min(43vh, 170px); }
  .hero-halo { width: 330px; }
  .hero-ring { width: 280px; }
  .sticker-owl, .sticker-emo { width: 46px; bottom: 6%; }
  .sticker-blue { width: 40px; top: 4%; }
  .name-tag { bottom: 3%; }
  .mode-row { width: min(680px, 100%); gap: 10px; }
  .mode-card { min-height: 52px; padding: 6px 15px; border-radius: 16px; }
  .mode-icon { width: 36px; height: 36px; border-radius: 11px; }
  .mode-copy { gap: 1px; }
  .mode-copy b { font-size: 17px; }
  .mode-copy small { font-size: 8px; }
  .mode-badge { display: none; }
  .mode-go { font-size: 18px; width: 27px; height: 27px; }
  .screen-play { overflow: hidden; }
  .play-page { padding: 3px 8px 4px; gap: 2px; }
  .play-top { min-height: 36px; padding-right: 48px; }
  .play-title small { font-size: 6px; }
  .play-title b { font-size: 15px; }
  .play-actions .soft-btn { min-height: 29px; font-size: 9px; padding: 0 9px; }
  .play-board { width: min(calc((100dvh - 50px) * 1.6129), calc(100vw - 18px)); }
  .play-foot, .mobile-play-extra { display: none; }
  .ink-hud { bottom: 6px; padding: 4px 7px; }
  .game-hud { inset: 6px 8px auto; }
  .hint-card { top: 43px; }
  .result-card { padding: 14px 18px; max-height: 94dvh; overflow-y: auto; }
  .result-art { --art-h: 68px; height: var(--art-h); margin-top: -34px; }
  .result-stars { height: 28px; }
  .result-stars span { font-size: 23px; }
  .result-card h3 { font-size: 21px; }
  .result-card > p { margin-bottom: 7px; }
  .result-stats { margin: 6px 0 9px; }
  .result-actions .primary-btn, .result-actions .soft-btn { min-height: 37px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- keyframes ---------- */
@keyframes screenIn { from { opacity: 0; transform: scale(.992) translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pairBob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(.2deg); } }
@keyframes heartBeat { 0%,100% { transform: translate(-50%,-50%) scale(1); } 45% { transform: translate(-50%,-50%) scale(1.08); } 60% { transform: translate(-50%,-50%) scale(.98); } }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -11px; } }
@keyframes cloudDrift { from { translate: -12px 0; } to { translate: 18px 0; } }
@keyframes twinkle { 0%,100% { opacity: .35; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.12) rotate(12deg); } }
@keyframes currentGlow { 0%,100% { box-shadow: 0 6px 0 rgba(74,58,60,.09), 0 0 0 0 rgba(244,134,170,.2); } 50% { box-shadow: 0 6px 0 rgba(74,58,60,.09), 0 0 0 5px rgba(244,134,170,.16); } }
@keyframes bubblePop { 0% { transform: translateX(-50%) scale(.94); } 55% { transform: translateX(-50%) scale(1.035); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes feedWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-1.6deg) translateY(-2px); } 65% { transform: rotate(1.3deg) translateY(-1px); } }
@keyframes nomPop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.7); } 25% { opacity: 1; transform: translate(-50%,-65%) scale(1.05); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-105%) scale(.96); } }
@keyframes heartFloat {
  0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -140px)) scale(1.1) rotate(var(--rot, 20deg)); }
}
@keyframes countPop { 0% { opacity: 0; transform: scale(.55) rotate(-6deg); } 45% { opacity: 1; transform: scale(1.08) rotate(1deg); } 100% { opacity: 1; transform: scale(1); } }
@keyframes starPop { from { opacity: 0; transform: scale(.2) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes lowInk { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes timerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes lumuEat {
  0%,100% { transform: translateY(0) scale(1) rotate(0); }
  30% { transform: translateY(-10px) scale(1.035,.97) rotate(-1deg); }
  58% { transform: translateY(-2px) scale(.98,1.02) rotate(1deg); }
  78% { transform: translateY(-5px) scale(1.01,.99); }
}
@keyframes lumuHappy {
  0%,100% { transform: translateY(0) scale(1) rotate(0); }
  35% { transform: translateY(-14px) scale(1.02,.98) rotate(-1.4deg); }
  68% { transform: translateY(-3px) scale(.99,1.01) rotate(1deg); }
}