:root {
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --ink: #2d2442;
  --muted: #756b8c;
  --panel: rgba(255, 255, 255, .9);
  --line: rgba(78, 54, 109, .16);
  --accent: #a957d8;
  --accent2: #e07d62;
  --gold: #f2b83d;
  --good: #3d9b73;
  --danger: #d8485c;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 2%, #fff0bf, transparent 28%),
    radial-gradient(circle at 88% 7%, #ffd7ec, transparent 32%),
    linear-gradient(145deg, #fbf7ff, #eadfff 68%, #fff2ea);
  overscroll-behavior: none;
}

button,
a,
input { font: inherit; }

button:disabled { cursor: not-allowed; }
.hidden { display: none !important; }

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.app-shell { min-height: 100svh; }

.map-screen {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.map-card {
  width: min(1180px, 100%);
  padding: clamp(18px, 4vw, 36px);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 32px;
  background: var(--panel);
  box-shadow: 0 26px 70px rgba(73, 46, 93, .16);
  backdrop-filter: blur(18px);
}

.top-row,
.play-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.small-btn,
.secondary-btn {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.small-btn:disabled {
  opacity: .66;
  background: #f5efe9;
}

.reset-btn {
  border-color: rgba(216, 72, 92, .2);
  background: #fff5f6;
  color: #9d3a49;
}

.helper-btn:not(:disabled) {
  border-color: rgba(224, 125, 98, .35);
  background: #fff3e4;
  color: #714426;
}

.primary-btn {
  min-height: 46px;
  border: 0;
  border-radius: 15px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  font-weight: 950;
  box-shadow: 0 12px 25px rgba(169, 87, 216, .23);
  cursor: pointer;
}

.brand-lockup {
  display: grid;
  place-items: center;
  margin: 18px 0 8px;
}

.brand-lockup img {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  box-shadow: 0 13px 28px rgba(97, 58, 162, .24);
}

.brand-lockup span {
  margin-top: 10px;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.map-card h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(2.45rem, 7vw, 5rem);
  line-height: .94;
  letter-spacing: -.06em;
}

.lead {
  max-width: 820px;
  margin: 14px auto 20px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(.98rem, 2vw, 1.15rem);
  line-height: 1.5;
}

.device-note {
  width: min(760px, 100%);
  margin: -6px auto 18px;
  padding: 10px 14px;
  border: 1px solid rgba(169, 87, 216, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #775b91;
  text-align: center;
  font-size: .88rem;
  font-weight: 900;
}

.mode-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(720px, 100%);
  margin: 0 auto 14px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
}

.mode-btn {
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  background: #f1eaff;
  color: #60449b;
  font-weight: 950;
  cursor: pointer;
}

.mode-btn.active {
  background: linear-gradient(135deg, #9e65e6, #e27b62);
  color: white;
}

.challenge-card,
.daily-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 auto 18px;
  width: min(720px, 100%);
  padding: 14px;
  border: 1px dashed rgba(169, 87, 216, .28);
  border-radius: 20px;
  background: #fff8ed;
}

.challenge-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  border-style: solid;
  border-color: rgba(224, 125, 98, .25);
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, .9), transparent 24%),
    linear-gradient(135deg, #fff2d6, #ffe0ef);
  box-shadow: 0 14px 34px rgba(194, 105, 76, .14);
}

.challenge-card::before {
  content: "RUSH";
  position: absolute;
  right: -18px;
  top: 14px;
  transform: rotate(14deg);
  padding: 6px 34px;
  background: rgba(216, 72, 92, .12);
  color: #b84654;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .16em;
}

.ticket-stack {
  display: flex;
  align-items: center;
  isolation: isolate;
}

.ticket-stack span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 18px rgba(83, 55, 68, .13);
  font-size: 1.55rem;
}

.ticket-stack span + span { margin-left: -10px; }
.ticket-stack span:nth-child(2) { transform: rotate(-5deg); }
.ticket-stack span:nth-child(3) { transform: rotate(6deg); }

.daily-card strong,
.daily-card span,
.challenge-card strong,
.challenge-card span,
.challenge-card small { display: block; }

.daily-card span,
.challenge-card span,
.challenge-card small { margin-top: 3px; color: var(--muted); font-size: .86rem; }

.challenge-card small { color: #a26826; font-weight: 900; }

.progress-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 18px 0;
}

.progress-strip div,
.stat-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  text-align: center;
}

.progress-strip span,
.stat-grid span {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.progress-strip strong,
.stat-grid strong { display: block; margin-top: 4px; font-size: 1.25rem; }

.timer-stat.urgent {
  border-color: rgba(216, 72, 92, .45);
  background: #fff0f1;
  animation: timerUrgent .7s ease-in-out infinite alternate;
}

.timer-stat.urgent strong { color: var(--danger); }

.chapter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.chapter-card {
  position: relative;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 245, 237, .9));
  box-shadow: 0 12px 30px rgba(76, 52, 92, .1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.chapter-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--room-a, #a957d8), var(--room-b, #e07d62));
}

.chapter-card.locked { opacity: .56; filter: grayscale(.2); cursor: not-allowed; }
.chapter-card .num { align-self: flex-start; padding: 6px 9px; border-radius: 999px; background: #f1e8ff; color: #6a43ad; font-size: .7rem; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.chapter-card .icon { font-size: 2.2rem; }
.chapter-card h3 { margin: 0; font-size: 1.05rem; }
.chapter-card p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.35; }
.chapter-card .card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: #a26826; font-size: .82rem; font-weight: 950; }

.journal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .58);
}

.journal h2 { margin: 0; }
.clue-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.clue-chip { padding: 8px 10px; border-radius: 999px; background: #f1e8ff; color: #65459a; font-size: .78rem; font-weight: 900; }

.play-screen {
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

.play-header {
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 20px;
  background: rgba(255, 250, 246, .94);
  box-shadow: 0 12px 30px rgba(74, 49, 91, .12);
}

.room-title { min-width: 0; text-align: center; }
.room-title strong,
.room-title span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-title span { color: var(--muted); font-size: .78rem; }

.story-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 244, 235, .92));
  box-shadow: 0 10px 25px rgba(70, 45, 90, .08);
  transform-origin: center;
}

.story-panel.story-pop { animation: storyPop .72s ease; }

#storyIcon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  font-size: 1.9rem;
}

.story-panel h2 { margin: 0; font-size: 1.08rem; }
.story-panel p:last-child { margin: 3px 0 0; color: var(--muted); line-height: 1.35; }

.hunt-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 10px;
}

.target-panel,
.scene-wrap {
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 24px;
  background: rgba(255, 250, 246, .94);
  box-shadow: 0 16px 40px rgba(74, 49, 91, .13);
  overflow: hidden;
}

.target-panel { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.anger-meter { padding: 9px; border: 1px solid rgba(61, 155, 115, .24); border-radius: 15px; background: #f1fbf5; transition: background .25s ease, border-color .25s ease; }
.anger-copy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.mood-cats { display: flex; align-items: center; min-width: 54px; }
.mood-cats b { display: block; font-size: 1.45rem; line-height: 1; animation: moodCatBob .8s ease-in-out infinite alternate; }
.mood-cats b + b { margin-left: -6px; animation-delay: -.4s; }
.anger-copy > span:nth-child(2) strong,
.anger-copy > span:nth-child(2) small { display: block; }
.anger-copy > span:nth-child(2) strong { margin: 0; font-size: .75rem; }
.anger-copy > span:nth-child(2) small { margin-top: 2px; color: var(--muted); font-size: .61rem; line-height: 1.2; }
#angerPercent { margin: 0; color: var(--good); font-size: .72rem; }
.anger-track { height: 8px; margin-top: 7px; border-radius: 999px; overflow: hidden; background: rgba(67, 42, 79, .11); }
.anger-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #54b884, #f2b83d 58%, #d8485c); transition: width .25s linear; }
.anger-meter[data-mood="annoyed"] { background: #fff8df; border-color: rgba(242, 184, 61, .4); }
.anger-meter[data-mood="grumpy"],
.anger-meter[data-mood="furious"] { background: #fff0f1; border-color: rgba(216, 72, 92, .4); }
.anger-meter[data-mood="grumpy"] #angerPercent,
.anger-meter[data-mood="furious"] #angerPercent { color: var(--danger); }
.target-panel h2 { margin: 4px 0 0; font-size: 1.05rem; }
.target-list { display: grid; gap: 8px; overflow: auto; padding-right: 2px; }

.target-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white;
  transition: .2s ease;
}

.target-card .pic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: #f5eaff; font-size: 1.45rem; }
.target-card strong { font-size: .9rem; }
.target-card span { display: block; color: var(--muted); font-size: .7rem; }
.target-card .check { font-size: 1rem; }
.target-card.found { background: #eefaf4; border-color: rgba(61, 155, 115, .25); transform: scale(.98); }
.target-card.found .check { color: var(--good); }
.target-card.order-card {
  background: linear-gradient(135deg, #fffaf4, #fff0dc);
  border-color: rgba(224, 125, 98, .24);
}
.target-card.order-card .pic { background: #fff1df; }
.target-card.order-card strong { color: #8a4f25; }

.helper-box {
  width: 100%;
  margin-top: auto;
  padding: 9px;
  border: 0;
  border-radius: 16px;
  background: #fff1df;
  color: #7b5429;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.helper-box:not(:disabled):hover { background: #ffe7c9; transform: translateY(-1px); }
.helper-box:disabled { opacity: .72; }
.helper-face { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: white; font-size: 1.5rem; }
.helper-box strong,
.helper-box small { display: block; }
.helper-box strong { font-size: .78rem; }
.helper-box small { margin-top: 2px; color: #8b6b49; font-size: .67rem; line-height: 1.25; }

.scene-wrap { padding: 10px; background: linear-gradient(145deg, #f8e9ff, #fff4df); }

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 5px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--room-a, #f8d5ff), var(--room-b, #fff2c9));
  box-shadow: inset 0 0 0 2px rgba(99, 65, 134, .08);
  transition: filter .2s ease;
}

.room-decor { position: absolute; inset: 0; pointer-events: none; }
.wall-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .42); box-shadow: 30px 20px rgba(255, 255, 255, .2), 64px -4px rgba(255, 255, 255, .25), 112px 24px rgba(255, 255, 255, .18); }
.room-sign {
  position: absolute;
  left: 3.5%;
  top: 4%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 15px;
  background: rgba(255, 250, 246, .62);
  color: rgba(50, 35, 70, .72);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
}
.room-sign span { font-size: 1.1rem; letter-spacing: 0; }
.room-shelf {
  position: absolute;
  right: 5%;
  top: 6%;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 190px;
  padding: 9px 12px 13px;
  border-bottom: 8px solid rgba(105, 66, 48, .24);
  border-radius: 17px 17px 8px 8px;
  background: rgba(255, 255, 255, .28);
  box-shadow: inset 0 -1px rgba(255, 255, 255, .52);
}
.room-shelf span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 5px 12px rgba(54, 36, 65, .1);
  font-size: 1.32rem;
}
.room-window {
  position: absolute;
  left: 50%;
  top: 9%;
  z-index: 0;
  width: 132px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 8px solid rgba(255, 255, 255, .38);
  border-radius: 28px 28px 42px 42px;
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .55), transparent 44%), rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .72);
  font-size: 2.2rem;
  transform: translateX(-50%);
}
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(176, 97, 70, .28), rgba(143, 77, 61, .33)); border-top: 5px solid rgba(255, 255, 255, .55); }
.rug { position: absolute; left: 50%; bottom: 3%; width: 46%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse, #f6c7ef 0 48%, #b98ce8 49% 64%, transparent 65%); transform: translateX(-50%); }
.scene[data-room="living"] .rug { background: radial-gradient(ellipse, #ffe4c7 0 48%, #c9a0ff 49% 64%, transparent 65%); }
.scene[data-room="yarn"] .rug { background: radial-gradient(ellipse, #ffe0f5 0 42%, #f2b83d 43% 54%, #ac7cf0 55% 66%, transparent 67%); }
.scene[data-room="castle"] .floor { background: linear-gradient(180deg, rgba(181, 112, 53, .34), rgba(112, 74, 45, .36)); }
.scene[data-room="zoomies"] .floor,
.scene[data-room="attic"] .floor { background: linear-gradient(180deg, rgba(53, 48, 92, .34), rgba(37, 31, 68, .46)); }
.scene[data-room="rainy"] .room-window { box-shadow: inset 12px -10px rgba(81, 105, 150, .15); }
.scene[data-room="garden"] .floor { background: linear-gradient(180deg, rgba(85, 148, 95, .3), rgba(66, 113, 75, .38)); }
.scene[data-room="library"] .floor { background: linear-gradient(180deg, rgba(128, 80, 52, .28), rgba(92, 58, 39, .34)); }
.scene[data-room="finale"] .room-window { background: radial-gradient(circle, rgba(255, 222, 91, .62), transparent 62%), rgba(255, 255, 255, .16); }
.scene[data-room="cat-cafe-challenge"] .floor { background: linear-gradient(180deg, rgba(207, 117, 70, .3), rgba(132, 77, 48, .34)); }
.chase-lane {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  z-index: 1;
  height: 72px;
  overflow: hidden;
}
.play-cat,
.chase-toy {
  position: absolute;
  bottom: 8px;
  line-height: 1;
  filter: drop-shadow(0 7px 5px rgba(65, 44, 75, .23));
}
.play-cat { font-size: 3.25rem; }
.chase-toy { font-size: 1.85rem; animation: chaseToy 5.2s ease-in-out infinite alternate; }
.play-cat-one { animation: bottomCatRunOne 6.1s ease-in-out infinite alternate; }
.play-cat-two { animation: bottomCatRunTwo 7.4s ease-in-out infinite alternate; transform: scaleX(-1); }
.watch-cat {
  --watch-speed: 6.2s;
  position: absolute;
  z-index: 1;
  width: 104px;
  height: 48px;
  border-radius: 50%;
  background: rgba(67, 42, 79, .15);
  pointer-events: none;
  animation-duration: var(--watch-speed);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.watch-cat span { position: absolute; left: 20px; top: -38px; font-size: 58px; line-height: 1; filter: drop-shadow(0 7px 5px rgba(65, 44, 75, .22)); }
.watch-cat::after { content: "♪"; position: absolute; left: 62px; top: -48px; padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #4f8b6d; font-size: .67rem; font-style: normal; font-weight: 950; opacity: .8; }
.watch-cat-one { left: 5%; bottom: 23%; animation-name: catPatrolOne; }
.watch-cat-two { right: 8%; bottom: 14%; animation-name: catPatrolTwo; animation-delay: -2.1s; }
.watch-cat-two span { transform: scaleX(-1); }
.scene[data-mood="watchful"] .watch-cat { --watch-speed: 4.8s; }
.scene[data-mood="annoyed"] .watch-cat { --watch-speed: 3.4s; }
.scene[data-mood="grumpy"] .watch-cat { --watch-speed: 2.1s; }
.scene[data-mood="furious"] .watch-cat { --watch-speed: .8s; animation-timing-function: linear; }
.scene[data-mood="watchful"] .watch-cat::after { content: "?"; color: #9a6e2e; }
.scene[data-mood="annoyed"] .watch-cat::after { content: "Mrrp!"; color: #b46b29; }
.scene[data-mood="grumpy"] .watch-cat::after { content: "MEOW!"; color: var(--danger); transform: rotate(-6deg); }
.scene[data-mood="furious"] .watch-cat::after { content: "😾"; color: var(--danger); animation: angryBubble .32s linear infinite alternate; }

.hidden-object {
  position: absolute;
  width: 46px;
  height: 43px;
  border: 0;
  border-radius: 15px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 7px 16px rgba(50, 35, 70, .15), inset 0 1px rgba(255, 255, 255, .95);
  font-size: 1.7rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(var(--turn, 0deg)) scale(var(--size, 1));
  transition: left .58s cubic-bezier(.2, .8, .2, 1), top .58s cubic-bezier(.2, .8, .2, 1), box-shadow .14s ease, opacity .2s ease, filter .2s ease;
  touch-action: manipulation;
}

.hidden-object > span { display: grid; place-items: center; line-height: 1; }

.hidden-object small {
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(43, 36, 66, .82);
  color: white;
  font-size: .52rem;
  font-weight: 900;
  white-space: nowrap;
  opacity: 0;
  transition: .14s;
}

.hidden-object:hover,
.hidden-object:focus-visible { box-shadow: 0 12px 25px rgba(50, 35, 70, .24), 0 0 0 3px rgba(169, 87, 216, .2); z-index: 20 !important; }
.hidden-object:hover small,
.hidden-object:focus-visible small,
.hidden-object.helper-target small { opacity: 1; }
.hidden-object.found { pointer-events: none; opacity: .25; filter: grayscale(.55); }
.hidden-object.bonus { background: #fff9d8; }
.hidden-object.wrong { animation: wrongTap .38s ease-in-out; }
.hidden-object.noticed { filter: grayscale(.7); opacity: .58; }
.hidden-object.noticed::after { content: "×"; position: absolute; right: -5px; top: -7px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--danger); color: white; font-size: .8rem; font-weight: 950; box-shadow: 0 2px 6px rgba(60, 20, 30, .2); }
.hidden-object.helper-target { z-index: 35 !important; animation: helperPulse .72s ease-in-out 4; box-shadow: 0 0 0 10px rgba(255, 214, 82, .3), 0 12px 25px rgba(50, 35, 70, .22); }
.hidden-object.cat-covered { opacity: .08; filter: blur(3px); }

.scene.room-shuffle .hidden-object:not(.found) { animation: objectScoot .66s ease; }
.scene.lights-blink { animation: lightsBlink 1.25s ease; }
.scene.is-paused .watch-cat,
.scene.is-paused .helper-body,
.scene.is-paused .mischief-cat,
.scene.is-paused .play-cat,
.scene.is-paused .chase-toy,
.scene.is-paused .hidden-object { animation-play-state: paused !important; }
.scene.is-paused { filter: saturate(.88) brightness(.98); }

.sparkle { position: absolute; pointer-events: none; z-index: 45; font-size: 1.15rem; animation: spark .82s ease-out forwards; }
.paw-step { position: absolute; z-index: 31; pointer-events: none; transform: translate(-50%, -50%) scale(.3) rotate(-18deg); opacity: 0; font-size: 1.15rem; filter: drop-shadow(0 2px 2px rgba(70, 45, 80, .2)); animation: pawAppear 3.2s ease forwards; }

.helper-cat {
  position: absolute;
  z-index: 38;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  pointer-events: none;
  transition: left .8s cubic-bezier(.2, .8, .2, 1), top .8s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, transform .38s cubic-bezier(.18, .9, .35, 1.35);
}

.helper-cat.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.helper-body { display: block; font-size: 3.8rem; filter: drop-shadow(0 8px 6px rgba(48, 32, 62, .24)); animation: helperBounce .75s ease-in-out infinite alternate; }
.helper-point { position: absolute; right: -17px; top: 28px; font-size: 1.7rem; animation: pointPaw .55s ease-in-out infinite alternate; }
.helper-speech { position: absolute; left: 50%; bottom: calc(100% + 5px); width: max-content; max-width: 190px; transform: translateX(-50%); padding: 8px 10px; border-radius: 14px 14px 14px 3px; background: #fffaf1; color: #674a2c; box-shadow: 0 7px 18px rgba(51, 33, 63, .18); font-size: .72rem; font-weight: 900; text-align: center; }

.mischief-cat { position: absolute; z-index: 41; left: -18%; top: 48%; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; }
.mischief-cat span { font-size: 4rem; filter: drop-shadow(0 8px 5px rgba(43, 27, 55, .3)); }
.mischief-cat b { padding: 6px 9px; border-radius: 999px; background: #392b4d; color: white; font-size: .72rem; transform: rotate(-8deg); }
.mischief-cat.pounce { animation: catPounce .85s cubic-bezier(.1, .7, .4, 1); }

.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 18px; background: rgba(39, 28, 55, .58); backdrop-filter: blur(10px); }
.modal-card { width: min(520px, 100%); max-height: calc(100svh - 36px); overflow: auto; padding: 26px; border-radius: 26px; background: #fffaf4; text-align: center; box-shadow: 0 30px 80px rgba(41, 25, 18, .35); }
.result-face { font-size: 3.3rem; }
.modal-card h2 { margin: 4px 0; font-size: clamp(1.75rem, 5vw, 2.5rem); letter-spacing: -.04em; }
.stars { min-height: 34px; color: var(--gold); font-size: 1.9rem; letter-spacing: .07em; filter: drop-shadow(0 2px 1px rgba(111, 61, 19, .2)); }
.modal-card p { color: var(--muted); line-height: 1.45; }
.result-clue { margin: 12px 0; padding: 12px; border-radius: 17px; background: #f3eaff; color: #5f438e; font-weight: 900; }
.modal-actions { display: flex; gap: 9px; justify-content: center; }
.modal-actions button { min-width: 160px; }
.pause-card {
  width: min(560px, 100%);
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .85);
  background:
    radial-gradient(circle at 14% 0, #fff0bf, transparent 38%),
    linear-gradient(145deg, #fffaf4, #f8edff);
}
.pause-card .result-face,
.pause-card .eyebrow,
.pause-card h2,
.pause-card p { text-align: center; }
.pause-card h2 { margin-top: 0; }
.how-list {
  display: grid;
  gap: 7px;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
}
.how-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid rgba(78, 54, 109, .11);
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  color: #58496f;
  font-weight: 850;
  line-height: 1.28;
}
.how-list li::before {
  content: "🐾";
  line-height: 1.1;
}
.pause-card .primary-btn {
  width: 100%;
  position: sticky;
  bottom: -1px;
  margin-top: 4px;
  box-shadow: 0 -8px 18px rgba(255, 250, 244, .82), 0 12px 25px rgba(169, 87, 216, .23);
}

.toast { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 80; transform: translate(-50%, 18px); opacity: 0; padding: 10px 15px; border-radius: 999px; background: #35283f; color: white; font-size: .82rem; font-weight: 850; text-align: center; transition: .18s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes storyPop {
  35% { transform: scale(1.018); border-color: rgba(169, 87, 216, .36); box-shadow: 0 12px 34px rgba(169, 87, 216, .18); }
}

@keyframes wrongTap {
  30% { margin-left: -7px; }
  65% { margin-left: 7px; }
}

@keyframes helperPulse {
  50% { transform: translate(-50%, -50%) rotate(var(--turn, 0deg)) scale(1.22); box-shadow: 0 0 0 13px rgba(242, 184, 61, .25); }
}

@keyframes objectScoot {
  45% { transform: translate(-50%, -50%) rotate(calc(var(--turn, 0deg) + 12deg)) scale(.78); }
}

@keyframes lightsBlink {
  20%, 55% { filter: brightness(.38) saturate(.7); }
  35%, 75% { filter: brightness(1.25); }
}

@keyframes spark {
  to { transform: translateY(-34px) scale(1.45) rotate(18deg); opacity: 0; }
}

@keyframes pawAppear {
  10% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-18deg); }
  30%, 78% { opacity: .82; transform: translate(-50%, -50%) scale(1) rotate(-8deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.8) rotate(4deg); }
}

@keyframes helperBounce { to { transform: translateY(-7px) rotate(2deg); } }
@keyframes pointPaw { to { transform: translateX(8px) rotate(13deg); } }
@keyframes catPounce { 0% { left: -18%; opacity: 0; transform: rotate(-6deg); } 12% { opacity: 1; } 72% { opacity: 1; } 100% { left: 118%; opacity: 0; transform: rotate(4deg); } }
@keyframes catPatrolOne { 0% { transform: translateX(0) translateY(0) rotate(-2deg); } 45% { transform: translateX(88px) translateY(-8px) rotate(2deg); } 100% { transform: translateX(160px) translateY(2px) rotate(-1deg); } }
@keyframes catPatrolTwo { 0% { transform: translateX(0) translateY(0); } 55% { transform: translateX(-82px) translateY(-7px); } 100% { transform: translateX(-150px) translateY(3px); } }
@keyframes bottomCatRunOne { 0% { left: -6%; transform: translateY(0) rotate(-2deg); } 35% { transform: translateY(-8px) rotate(4deg); } 100% { left: 78%; transform: translateY(1px) rotate(-3deg); } }
@keyframes bottomCatRunTwo { 0% { right: -7%; transform: scaleX(-1) translateY(2px) rotate(3deg); } 45% { transform: scaleX(-1) translateY(-7px) rotate(-4deg); } 100% { right: 66%; transform: scaleX(-1) translateY(0) rotate(2deg); } }
@keyframes chaseToy { 0% { left: 18%; transform: translateY(0) rotate(0); } 50% { left: 52%; transform: translateY(-12px) rotate(160deg); } 100% { left: 82%; transform: translateY(1px) rotate(330deg); } }
@keyframes moodCatBob { to { transform: translateY(-3px) rotate(5deg); } }
@keyframes timerUrgent { to { transform: scale(1.025); box-shadow: 0 0 0 3px rgba(216, 72, 92, .09); } }
@keyframes angryBubble { to { transform: translateX(4px) rotate(6deg); } }

@media (max-width: 980px) {
  .chapter-grid { grid-template-columns: repeat(2, 1fr); }
  .hunt-layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .target-panel { order: 2; max-height: 39svh; }
  .scene-wrap { order: 1; }
  .scene { min-height: 46svh; }
  .target-list { grid-template-columns: repeat(2, 1fr); }
  .helper-box { margin-top: 0; }
}

@media (max-width: 640px) {
  .map-card { border-radius: 24px; padding: 16px; }
  .top-row { align-items: flex-start; }
  .top-actions { flex-direction: column; align-items: stretch; }
  .chapter-grid,
  .progress-strip { grid-template-columns: 1fr; }
  .mode-row { grid-template-columns: 1fr; }
  .daily-card,
  .challenge-card,
  .journal { flex-direction: column; align-items: stretch; }
  .device-note { border-radius: 16px; font-size: .78rem; }
  .ticket-stack { justify-content: center; }
  .clue-list { justify-content: flex-start; }
  .play-screen { grid-template-rows: auto auto minmax(0, 1fr); }
  .play-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .small-btn { min-height: 38px; padding: 7px 8px; font-size: .72rem; }
  .helper-btn { max-width: 124px; }
  .room-title span { display: none; }
  .story-panel { grid-template-columns: auto 1fr; min-height: 61px; padding: 7px; text-align: left; }
  #storyIcon { width: 43px; height: 43px; border-radius: 13px; font-size: 1.5rem; }
  .story-panel h2 { font-size: .88rem; }
  .story-panel p:last-child { font-size: .67rem; line-height: 1.2; }
  .story-panel .eyebrow { display: none; }
  .hunt-layout { gap: 7px; }
  .target-panel { padding: 7px; max-height: 42svh; gap: 6px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .stat-grid div { padding: 6px 2px; border-radius: 10px; }
  .stat-grid span { font-size: .43rem; letter-spacing: .04em; }
  .stat-grid strong { font-size: .75rem; }
  .anger-meter { padding: 6px; border-radius: 11px; }
  .anger-copy { gap: 4px; }
  .mood-cats { min-width: 43px; }
  .mood-cats b { font-size: 1.15rem; }
  .anger-copy > span:nth-child(2) strong { font-size: .65rem; }
  .anger-copy > span:nth-child(2) small { font-size: .54rem; }
  #angerPercent { font-size: .62rem; }
  .anger-track { height: 6px; margin-top: 5px; }
  .target-panel h2 { display: none; }
  .target-list { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .target-card { grid-template-columns: auto 1fr; padding: 5px; gap: 5px; border-radius: 10px; }
  .target-card .pic { width: 29px; height: 29px; border-radius: 9px; font-size: 1.12rem; }
  .target-card strong { font-size: .68rem; }
  .target-card div span,
  .target-card .check { display: none; }
  .helper-box { padding: 5px; border-radius: 11px; }
  .helper-face { width: 29px; height: 29px; font-size: 1.15rem; }
  .helper-box strong { font-size: .67rem; }
  .helper-box small { font-size: .59rem; }
  .scene-wrap { padding: 5px; border-radius: 18px; }
  .scene { min-height: 42svh; border-width: 3px; border-radius: 17px; }
  .room-sign { left: 3%; top: 3%; max-width: 52%; padding: 5px 7px; font-size: .52rem; }
  .room-shelf { right: 3%; top: 4%; min-width: 126px; gap: 5px; padding: 6px 7px 9px; border-bottom-width: 5px; }
  .room-shelf span { width: 24px; height: 24px; border-radius: 8px; font-size: 1rem; }
  .room-window { width: 90px; height: 58px; top: 14%; border-width: 5px; font-size: 1.55rem; }
  .chase-lane { bottom: 8%; height: 48px; }
  .play-cat { font-size: 2.3rem; }
  .chase-toy { font-size: 1.35rem; }
  .hidden-object { width: 39px; height: 37px; border-radius: 12px; font-size: 1.42rem; }
  .hidden-object small { display: none; }
  .hidden-object.noticed::after { width: 15px; height: 15px; font-size: .65rem; }
  .helper-body { font-size: 3rem; }
  .helper-speech { max-width: 145px; font-size: .62rem; }
  .modal-actions { flex-direction: column; }
  .modal-card { padding: 18px; max-height: calc(100svh - 24px); }
  .how-list li { padding: 7px 8px; font-size: .82rem; }
  .modal-actions button { width: 100%; min-width: 0; }
  .toast { width: max-content; max-width: calc(100vw - 24px); font-size: .72rem; }
}

@media (max-width: 390px) {
  .target-list { grid-template-columns: 1fr 1fr; }
  .scene { min-height: 38svh; }
  .brand-lockup img { width: 70px; height: 70px; }
  .map-card h1 { font-size: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}