:root {
  color-scheme: light;
  --ink: #51493f;
  --paper: #fffdf7;
  --mint: #4fc89a;
  --mint-dark: #2f9d75;
  --coral: #ef7f72;
  --cream: #f6e7c4;
  --shadow: 0 7px 0 rgba(91, 71, 51, .18), 0 12px 30px rgba(52, 42, 32, .22);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 50% 15%, #fff4ce, #c2e2ce 68%, #91baa8);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

.game-shell {
  position: relative;
  width: min(100vw, 450px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #9bcf80;
  box-shadow: 0 0 45px rgba(37, 64, 49, .38);
  touch-action: none;
}

.scene-viewport {
  position: absolute;
  inset: 0 0 142px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: #9bcf80;
}

.scene-viewport.dragging { cursor: grabbing; }

.scene-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 720px;
  height: 1200px;
  background-image: url("./assets/cat-town-map.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: 0 0;
  will-change: transform;
}

.scene-world.room { background-image: url("./assets/cozy-room.png"); }

.hotspot-layer { position: absolute; inset: 0; }

.hotspot {
  position: absolute;
  width: 60px;
  height: 60px;
  margin: -30px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  outline: none;
}

.hotspot.found { pointer-events: none; }

.hotspot.found::before,
.hotspot.found::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 4px solid rgba(255,255,255,.95);
  border-radius: 50%;
  animation: found-ring .72s ease-out forwards;
  filter: drop-shadow(0 2px 1px rgba(40,70,50,.45));
}

.hotspot.found::after {
  inset: 25px 17px 16px 17px;
  border: 0;
  border-left: 5px solid white;
  border-bottom: 5px solid white;
  border-radius: 0;
  transform: rotate(-45deg);
  animation: check-pop .45s cubic-bezier(.2,1.8,.4,1) forwards;
}

@keyframes found-ring { 0% { opacity: 0; transform: scale(.25); } 55% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes check-pop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

.top-bar {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 12px;
  display: flex;
  gap: 10px;
  z-index: 10;
  pointer-events: none;
}

.round-icon,
.side-pill,
.hint-tool {
  pointer-events: auto;
  border: 2px solid rgba(112, 91, 70, .35);
  background: rgba(255, 253, 246, .94);
  box-shadow: 0 3px 0 rgba(80, 63, 48, .2), 0 5px 12px rgba(50, 43, 34, .17);
}

.round-icon {
  width: 48px;
  height: 48px;
  padding: 9px;
  border-radius: 50%;
}

.round-icon:active, .side-pill:active, .hint-tool:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(80,63,48,.2); }

.round-icon svg { width: 100%; height: 100%; fill: none; stroke: #666057; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.round-icon svg path:first-child { fill: rgba(244, 233, 210, .7); }
.round-icon.muted .sound-wave { opacity: .18; }

.side-actions {
  position: absolute;
  z-index: 9;
  top: 34%;
  right: 9px;
  display: grid;
  gap: 12px;
}

.side-pill {
  width: 55px;
  min-height: 60px;
  padding: 7px 4px 5px;
  border-radius: 20px;
  display: grid;
  justify-items: center;
  gap: 1px;
}

.side-pill svg { width: 30px; height: 30px; fill: #f8e7c5; stroke: #655c52; stroke-width: 2.3; stroke-linejoin: round; }
.side-pill span { font-size: 10px; font-weight: 800; }
.gift-pill { background: linear-gradient(#fffdf8, #fff2d9); }
.gift-pill svg { fill: #f3b741; stroke: #9c5d3f; }
.gift-pill.ready { animation: gift-bounce 1s ease-in-out infinite; }
@keyframes gift-bounce { 50% { transform: translateY(-4px) rotate(2deg); } }

.hint-tools {
  position: absolute;
  z-index: 11;
  left: 13px;
  bottom: 147px;
  display: flex;
  gap: 8px;
}

.hint-tool {
  position: relative;
  width: 62px;
  height: 58px;
  border-radius: 26px 26px 17px 17px;
  padding: 4px 8px 8px;
}

.hint-tool:disabled { filter: grayscale(1); opacity: .5; }
.lens { display: block; width: 35px; height: 35px; margin: 0 auto; border: 6px solid #e8c735; border-radius: 50%; box-shadow: inset 0 0 0 4px #fff, 0 2px 0 #806d45; }
.lens::after { content: ""; display: block; width: 17px; height: 8px; background: #edca3f; border: 2px solid #806d45; border-radius: 8px; transform: rotate(-36deg) translate(-6px, 22px); }
.lens-violet { border-color: #b57ccc; }
.lens-violet::after { background: #b57ccc; }
.lens-coral { border-color: #ef9571; }
.lens-coral::after { background: #ef9571; }
.hint-number { position: absolute; right: 5px; bottom: 2px; min-width: 19px; height: 19px; line-height: 19px; border-radius: 10px; color: white; background: #35b66f; font-weight: 900; font-size: 11px; }

.mission-panel {
  position: absolute;
  z-index: 12;
  inset: auto 0 0;
  height: 142px;
  padding: 15px 10px max(7px, env(safe-area-inset-bottom));
  background: rgba(255, 254, 249, .98);
  border-top: 2px solid #dccfb9;
  box-shadow: 0 -4px 15px rgba(61, 49, 36, .17);
}

.cat-tabs { position: absolute; width: 94px; height: 28px; top: -25px; left: 50%; transform: translateX(-50%); }
.cat-tabs i { position: absolute; inset: 10px 8px 0; background: #fffef9; border: 2px solid #d4c6af; border-bottom: 0; border-radius: 32px 32px 0 0; }
.cat-tabs span { position: absolute; bottom: 3px; width: 30px; height: 24px; background: #fffef9; border: 2px solid #d4c6af; transform: rotate(38deg); }
.cat-tabs span:first-child { left: 5px; border-radius: 4px 16px 6px 16px; }
.cat-tabs span:last-child { right: 5px; transform: rotate(-38deg); border-radius: 16px 4px 16px 6px; }

.mission-heading { display: flex; justify-content: space-between; align-items: flex-start; height: 44px; padding-left: 2px; }
.mission-heading strong { display: block; font-size: 14px; letter-spacing: .04em; }
.mission-heading small { display: block; margin-top: 3px; color: #928778; font-size: 10px; }
.progress-ring { position: relative; top: -9px; width: 57px; height: 57px; flex: 0 0 57px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--mint) var(--progress, 0%), #ded7cb 0); box-shadow: inset 0 0 0 2px #6f675d; }
.progress-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fffef9; border: 2px solid #81786d; }
.progress-ring span { position: relative; z-index: 1; font-size: 11px; font-weight: 900; }

.target-rail { height: 70px; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 2px 61px 4px 2px; scrollbar-width: none; }
.target-rail::-webkit-scrollbar { display: none; }
.target-card { position: relative; width: 58px; flex: 0 0 58px; height: 63px; border: 2px solid #77d1ad; border-radius: 8px; background: #fbfaf5; overflow: hidden; box-shadow: 0 2px 0 #d4c8b4; transition: .25s ease; }
.target-thumb { position: absolute; inset: 4px 4px 16px; border-radius: 5px; background-repeat: no-repeat; background-size: 500%; background-position: var(--x) var(--y); filter: saturate(1.08); }
.target-card span { position: absolute; inset: auto 3px 2px; text-align: center; font-size: 9px; font-weight: 800; color: #73695e; }
.target-card.found { border-color: #c8c2b7; filter: grayscale(.8); opacity: .6; transform: scale(.94); }
.target-card.found::after { content: ""; position: absolute; left: 19px; top: 17px; width: 20px; height: 10px; border-left: 5px solid var(--mint-dark); border-bottom: 5px solid var(--mint-dark); transform: rotate(-45deg); filter: drop-shadow(0 1px white); }

.feedback-layer { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.wrong-mark { position: absolute; width: 58px; height: 58px; margin: -29px; animation: wrong-pop .75s ease-out forwards; filter: drop-shadow(0 3px 1px rgba(83,36,31,.32)); }
.wrong-mark::before, .wrong-mark::after { content: ""; position: absolute; left: 25px; top: 4px; width: 10px; height: 51px; background: #e94f48; border: 3px solid white; border-radius: 9px; transform: rotate(45deg); }
.wrong-mark::after { transform: rotate(-45deg); }
@keyframes wrong-pop { 0% { opacity: 0; scale: .3; } 30% { opacity: 1; scale: 1.15; } 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .8; } }

.hint-beam { position: absolute; z-index: 8; width: 86px; height: 86px; margin: -43px; border-radius: 50%; border: 6px solid #ffe66d; box-shadow: 0 0 0 8px rgba(255,255,255,.82), 0 0 32px 15px #fff29d; pointer-events: none; animation: hint-pulse .8s ease-in-out infinite alternate; }
@keyframes hint-pulse { to { transform: scale(1.25); opacity: .45; } }

.toast { position: absolute; z-index: 20; top: max(78px, calc(env(safe-area-inset-top) + 66px)); left: 50%; transform: translateX(-50%); padding: 9px 16px; border: 2px solid rgba(91,76,60,.25); border-radius: 18px; color: #655c50; background: rgba(255,253,245,.95); box-shadow: 0 4px 15px rgba(47,42,35,.2); font-weight: 800; font-size: 12px; white-space: nowrap; }
.toast.show { animation: toast-in 1.8s ease forwards; }
@keyframes toast-in { 0% { opacity: 0; transform: translate(-50%,-8px); } 15%,80% { opacity: 1; transform: translate(-50%,0); } 100% { opacity: 0; transform: translate(-50%,-5px); } }

.game-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(37,36,31,.62); }
.game-dialog[open] { display: grid; place-items: center; animation: shade-in .2s ease; }
.game-dialog::backdrop { background: transparent; }
@keyframes shade-in { from { opacity: 0; } }
.dialog-card { width: min(86%, 348px); padding: 25px 24px 22px; text-align: center; border: 4px solid #fffdf6; border-radius: 24px; background: linear-gradient(#fffdf7, #f5e9cf); box-shadow: var(--shadow); }
.dialog-kicker { display: inline-block; color: #9a7154; font-weight: 900; font-size: 11px; letter-spacing: .16em; }
.dialog-card h2 { margin: 6px 0 10px; color: #574c42; font-size: 25px; }
.dialog-card p { margin: 0 0 20px; color: #7b7166; line-height: 1.7; font-size: 13px; }
.primary-btn, .secondary-btn { width: 100%; min-height: 46px; border-radius: 18px; font-weight: 900; letter-spacing: .06em; }
.primary-btn { border: 2px solid #288d68; color: white; background: linear-gradient(#57d09d, #3db281); box-shadow: 0 5px 0 #288d68; }
.secondary-btn { margin-top: 12px; border: 2px solid #baa98d; color: #6c6257; background: #fffaf0; box-shadow: 0 4px 0 #d0c0a5; }
.primary-btn:active, .secondary-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 currentColor; }
.result-medal { width: 92px; height: 92px; margin: 7px auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #ffeaa3 35%, #efb543 36% 57%, #c37a38 58% 64%, transparent 65%); }
.result-medal span { width: 34px; height: 28px; border-left: 8px solid white; border-bottom: 8px solid white; transform: rotate(-45deg) translate(4px,-3px); }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 0 20px; }
.result-stats div { padding: 8px 2px; border-radius: 12px; background: rgba(255,255,255,.62); }
.result-stats dt { font-size: 9px; color: #998e80; }
.result-stats dd { margin: 3px 0 0; font-weight: 900; font-size: 15px; }

@media (min-width: 700px) {
  body::before, body::after { content: ""; position: fixed; width: 180px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.13); filter: blur(2px); }
  body::before { left: 7vw; top: 12vh; }
  body::after { right: 7vw; bottom: 8vh; }
  .game-shell { height: min(940px, 100dvh); }
}

@media (max-height: 650px) {
  .mission-panel { height: 126px; }
  .scene-viewport { bottom: 126px; }
  .hint-tools { bottom: 131px; }
  .target-rail { height: 56px; }
  .target-card { height: 51px; }
  .target-thumb { bottom: 13px; }
}