:root {
  color-scheme: light;
  --ink: #322d3b;
  --muted: #817988;
  --cream: #fff9ee;
  --paper: #fffdf8;
  --peach: #ff8d69;
  --peach-dark: #e76f51;
  --pink: #ff6f8e;
  --yellow: #ffc95c;
  --mint: #75c9a5;
  --brown: #82523d;
  --line: rgba(66, 49, 61, 0.1);
  --drawer-peek: 64px;
  --scene-safe-top: 72px;
  --scene-safe-bottom: calc(var(--drawer-peek) + env(safe-area-inset-bottom));
  --z-scene-dog: 10;
  --z-scene-target: 20;
  --z-scene-hud: 40;
  --z-scene-tool: 50;
  --z-drawer: 80;
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  font-synthesis: none;
}

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

html, body { height: 100%; min-height: 100%; margin: 0; }

body {
  background: #e7cdbb;
  color: var(--ink);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

button, input { font: inherit; }
button { color: inherit; }

.app-shell {
  width: min(100%, 720px);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  background: var(--cream);
  box-shadow: 0 0 60px rgba(61, 38, 41, 0.18);
  overflow: hidden;
  position: relative;
}

.topbar {
  height: 58px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 16px 6px;
  background: rgba(255, 253, 248, 0.96);
}

.brand { display: flex; align-items: center; gap: 8px; line-height: .85; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: #ffe7a6; border-radius: 12px 12px 14px 8px; transform: rotate(-4deg); font-size: 19px; }
.brand div { display: flex; flex-direction: column; gap: 4px; }
.brand small { font-size: 9px; letter-spacing: 1.6px; font-weight: 900; color: var(--peach-dark); }
.brand strong { font-size: 21px; letter-spacing: -1px; }
.brand .version-label { font-size: 8px; line-height: 1; color: var(--muted); font-weight: 900; }

.heart-balance {
  min-width: 89px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  background: #fff0f2;
  border: 1px solid rgba(255, 111, 142, .15);
  border-radius: 18px;
  box-shadow: inset 0 -2px 0 rgba(255, 111, 142, .06);
}
.heart-icon { color: var(--pink); font-size: 22px; text-shadow: 0 2px 0 #fff; }
.heart-balance strong { font-size: 18px; font-variant-numeric: tabular-nums; }

.icon-button, .rename-button, .close-button { border: 0; cursor: pointer; }
.icon-button { width: 40px; height: 40px; border-radius: 14px; background: #f0e9e3; font-size: 18px; }
.icon-button:active { transform: scale(.94); }

.unlock-card { min-height: 52px; padding: 6px 14px 8px; background: var(--paper); border-bottom: 1px solid var(--line); }
.unlock-copy { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 8px; margin-bottom: 5px; }
.unlock-copy > div { display: flex; flex-direction: column; line-height: 1.1; }
.unlock-copy small { color: var(--muted); font-weight: 900; font-size: 8px; letter-spacing: 1.3px; }
.unlock-copy strong { font-size: 12px; }
.mini-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #ece6df; filter: grayscale(1); font-size: 16px; }
.unlock-count { font-size: 11px; font-weight: 900; color: var(--peach-dark); font-variant-numeric: tabular-nums; }
.unlock-action { min-height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: #75628f; color: white; font-size: 9px; font-weight: 900; cursor: pointer; }
.progress-track { height: 7px; background: #eee8e2; border-radius: 99px; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--peach), var(--pink)); transition: width .35s ease; box-shadow: 0 0 8px rgba(255, 111, 142, .35); }

.room {
  height: calc(100dvh - 110px);
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#f8d8ba 0 67%, #c99070 67% 69%, #d9ad82 69% 100%);
  isolation: isolate;
  transition: filter .4s ease;
}
.room.is-messy { filter: saturate(.88); }
.room::before { content: ""; position: absolute; inset: 0 0 31%; background-image: radial-gradient(rgba(181, 112, 78, .11) 1px, transparent 1px); background-size: 15px 15px; z-index: -1; }
.room::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 31%; background: repeating-linear-gradient(100deg, transparent 0 42px, rgba(124,75,58,.09) 43px 45px); z-index: -1; }
.sunbeam { position: absolute; width: 150px; height: 260px; left: -15px; top: 25px; background: linear-gradient(110deg, rgba(255,255,225,.42), transparent); transform: skewX(-18deg); }
.window { position: absolute; top: 30px; left: 24px; width: 94px; height: 105px; background: linear-gradient(#a9dddf, #e8efcf); border: 9px solid #fff9e9; border-radius: 45px 45px 8px 8px; box-shadow: 0 5px 0 rgba(126,77,55,.12); overflow: hidden; }
.window::before, .window::after { content: ""; position: absolute; background: rgba(255,255,255,.7); }
.window::before { width: 5px; height: 100%; left: 36px; }
.window::after { height: 5px; width: 100%; top: 50px; }
.cloud { position: absolute; width: 30px; height: 9px; background: #fff; border-radius: 20px; opacity: .75; }
.cloud::before { content: ""; position: absolute; width: 13px; height: 13px; left: 6px; bottom: 2px; border-radius: 50%; background: inherit; }
.cloud-one { top: 25px; left: 5px; }
.cloud-two { top: 70px; left: 53px; transform: scale(.75); }
.wall-art { position: absolute; top: 38px; right: 30px; width: 72px; height: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(3deg); background: #fff7dc; border: 6px solid #b26a55; box-shadow: 0 5px 0 rgba(126,77,55,.15); line-height: 1; }
.wall-art span { font-size: 9px; font-weight: 900; letter-spacing: 1px; color: #8b716e; }
.wall-art strong { font-size: 15px; color: var(--peach-dark); }
.wall-art i { font-style: normal; color: var(--pink); }
.plant { position: absolute; bottom: 29%; right: 12px; width: 52px; height: 92px; }
.plant span { position: absolute; bottom: 0; left: 9px; width: 38px; height: 43px; background: #dd785e; border-radius: 6px 6px 15px 15px; border-top: 6px solid #bd5f4e; }
.plant i { position: absolute; bottom: 38px; left: 22px; width: 20px; height: 42px; background: #62a979; border-radius: 100% 0 100% 0; transform-origin: bottom; }
.plant i:nth-child(1) { transform: rotate(-45deg); }
.plant i:nth-child(2) { transform: rotate(15deg); height: 52px; }
.plant i:nth-child(3) { transform: rotate(58deg); }

.cleanliness { position: absolute; z-index: 8; top: 12px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 5px; padding: 6px 12px; background: rgba(255,253,248,.88); backdrop-filter: blur(7px); border: 1px solid rgba(255,255,255,.7); border-radius: 99px; box-shadow: 0 4px 14px rgba(95,62,55,.1); }
.cleanliness span { grid-row: 1 / 3; width: 8px; height: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(117,201,165,.15); }
.cleanliness small { font-size: 7px; font-weight: 900; color: var(--muted); letter-spacing: 1px; line-height: 1; }
.cleanliness strong { font-size: 10px; line-height: 1.1; }

.tutorial-bubble { position: absolute; z-index: var(--z-scene-hud); top: var(--scene-safe-top); left: 50%; width: min(240px, 68%); padding: 10px 13px; transform: translateX(-50%); background: var(--ink); color: white; border-radius: 13px; text-align: center; box-shadow: 0 8px 22px rgba(50,45,59,.25); transition: opacity .2s, transform .2s; pointer-events: none; }
.tutorial-bubble[hidden] { display: none; }
.tutorial-bubble strong, .tutorial-bubble span { display: block; }
.tutorial-bubble strong { color: #ffd878; font-size: 12px; }
.tutorial-bubble span { font-size: 10px; margin-top: 2px; opacity: .9; }
.tutorial-pointer { position: absolute; top: 100%; left: 50%; width: 12px; height: 12px; background: var(--ink); transform: translate(-50%, -7px) rotate(45deg); }

.dog-stage { position: absolute; z-index: var(--z-scene-dog); left: 9%; right: 9%; bottom: calc(var(--scene-safe-bottom) + 4%); height: 45%; display: flex; justify-content: center; align-items: end; gap: 8px; pointer-events: none; }
.dog-button { position: relative; width: 190px; height: 180px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 10px 5px rgba(73,44,33,.18)); touch-action: manipulation; }
.dog-button.secondary { width: 135px; height: 145px; }
.dog-button:focus-visible { outline: 4px solid white; outline-offset: 3px; border-radius: 50%; }
.dog-shadow { position: absolute; bottom: 1px; left: 17%; width: 70%; height: 17px; border-radius: 50%; background: rgba(72,43,35,.18); }
.dog-body { position: absolute; bottom: 13px; left: 25%; width: 54%; height: 89px; border-radius: 48% 48% 35% 35%; background: #d8894f; }
.dog-belly { position: absolute; inset: 22px 14px 0; background: #fff1d5; border-radius: 50% 50% 30% 30%; }
.dog-head { position: absolute; z-index: 2; top: 21px; left: 21%; width: 60%; height: 100px; border-radius: 48% 48% 45% 45%; background: #df9256; }
.dog-muzzle { position: absolute; left: 23%; bottom: 8px; width: 54%; height: 46px; background: #fff1d5; border-radius: 44% 44% 50% 50%; }
.dog-ear { position: absolute; z-index: -1; top: -20px; width: 43px; height: 63px; background: #c77544; border-radius: 75% 12% 55% 30%; }
.dog-ear::after { content: ""; position: absolute; inset: 10px 9px 14px; background: #ef9c7e; border-radius: inherit; }
.dog-ear.left { left: -7px; transform: rotate(-18deg); }
.dog-ear.right { right: -7px; transform: scaleX(-1) rotate(-18deg); }
.dog-eye { position: absolute; top: 36px; width: 10px; height: 13px; background: var(--ink); border-radius: 50%; transition: transform .12s; }
.dog-eye::after { content: ""; position: absolute; width: 3px; height: 3px; top: 2px; left: 2px; border-radius: 50%; background: white; }
.dog-eye.left { left: 27px; }
.dog-eye.right { right: 27px; }
.dog-nose { position: absolute; z-index: 2; left: 50%; top: 8px; width: 19px; height: 14px; transform: translateX(-50%); border-radius: 50% 50% 45% 45%; background: var(--ink); }
.dog-mouth { position: absolute; top: 22px; left: 50%; width: 28px; height: 14px; transform: translateX(-50%); border-bottom: 3px solid #5d3a38; border-radius: 50%; }
.dog-tongue { position: absolute; top: 33px; left: 50%; width: 15px; height: 20px; transform: translateX(-50%); background: #ff7890; border-radius: 4px 4px 12px 12px; }
.dog-paw { position: absolute; z-index: 3; bottom: 4px; width: 35px; height: 27px; border-radius: 45% 45% 35% 35%; background: #fff1d5; }
.dog-paw.left { left: 35px; }.dog-paw.right { right: 35px; }
.dog-tail { position: absolute; z-index: -1; right: -24px; bottom: 45px; width: 49px; height: 24px; border: 13px solid #c97945; border-left: 0; border-bottom: 0; border-radius: 0 90% 0 0; transform-origin: left bottom; animation: wag .75s ease-in-out infinite alternate; }
.dog-name-tag { position: absolute; z-index: 4; bottom: 30px; left: 50%; transform: translateX(-50%); padding: 3px 8px; background: var(--pink); color: white; border-radius: 5px; font-size: 9px; font-weight: 900; box-shadow: 0 2px 0 #c95670; white-space: nowrap; }
.dog-button.secondary .dog-head { top: 31px; }.dog-button.secondary .dog-body { height: 70px; }.dog-button.secondary .dog-paw { transform: scale(.8); }.dog-button.secondary .dog-tail { transform: scale(.8); }
.dog-button.golden .dog-head, .dog-button.golden .dog-body { background: #e8b95f; }
.dog-button.golden .dog-ear { background: #c79448; height: 72px; border-radius: 80% 35% 80% 40%; }
.dog-button.golden .dog-tail { border-color: #d8a64e; }
.dog-button.is-petted { animation: happy-bop .32s cubic-bezier(.2,.9,.3,1.35); }
.dog-button.is-petted .dog-eye { transform: scaleY(.25); }

.poop-layer { position: absolute; z-index: var(--z-scene-target); inset: 0; pointer-events: none; }
.poop-button { position: absolute; width: 58px; height: 58px; transform: translate(-50%, -50%); border: 0; background: transparent; cursor: pointer; pointer-events: auto; touch-action: manipulation; animation: poop-arrive .45s cubic-bezier(.2,1.3,.5,1); }
.poop-button:focus-visible { outline: 3px solid white; border-radius: 50%; }
.poop-shape { position: absolute; left: 9px; bottom: 7px; width: 40px; height: 24px; border-radius: 50% 50% 42% 42%; background: #71462e; box-shadow: inset -5px -4px 0 rgba(58,28,19,.16), 0 5px 0 rgba(83,47,30,.15); }
.poop-button > * { pointer-events: none; }
.poop-shape::before { content: ""; position: absolute; left: 8px; bottom: 14px; width: 26px; height: 20px; border-radius: 50%; background: inherit; box-shadow: inset -4px -3px 0 rgba(58,28,19,.12); }
.poop-shape::after { content: ""; position: absolute; left: 15px; bottom: 29px; width: 13px; height: 15px; border-radius: 65% 40% 50% 50%; background: inherit; transform: rotate(17deg); }
.poop-face { position: absolute; z-index: 2; left: 24px; bottom: 18px; font-size: 11px; color: white; font-weight: 900; letter-spacing: 3px; }
.poop-button.rare { filter: drop-shadow(0 0 8px #ffe568); animation: poop-arrive .45s cubic-bezier(.2,1.3,.5,1), rare-glow 1s ease-in-out infinite alternate; }
.poop-button.rare .poop-shape { background: linear-gradient(135deg, #ffdc55, #e9a92f); }
.poop-button.rare::before { content: "✦"; position: absolute; right: 2px; top: -2px; color: #fff4a3; font-size: 19px; animation: twinkle .7s infinite alternate; }
.poop-button.is-cleaned { animation: scoop-away .3s ease-in forwards; pointer-events: none; }

.floor-pattern { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; height: 30%; }
.rug { position: absolute; z-index: 2; bottom: 4%; left: 50%; width: 66%; height: 20%; transform: translateX(-50%); background: #ed806e; border: 7px solid #f6aa86; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(255,255,255,.15); }
.rug i { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-7deg); color: rgba(255,245,220,.38); font-size: 45px; font-style: normal; }
.next-mess { position: absolute; z-index: var(--z-scene-hud); left: 12px; bottom: calc(var(--scene-safe-bottom) + 8px); display: grid; grid-template-columns: auto auto; column-gap: 6px; padding: 7px 10px; background: rgba(67,53,55,.76); color: white; border-radius: 11px; backdrop-filter: blur(5px); }
.next-mess > span { grid-row: 1 / 3; align-self: center; color: #ffd76a; }
.next-mess small { font-size: 7px; text-transform: uppercase; letter-spacing: .8px; opacity: .7; }
.next-mess strong { font-size: 11px; }
.mini-progress { grid-column: 1 / -1; width: 100%; height: 3px; margin-top: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.2); }
.mini-progress b { display: block; width: 0; height: 100%; border-radius: inherit; background: #ffd76a; transition: width .2s linear; }
.room-robot { position: absolute; z-index: var(--z-scene-hud); left: 104px; bottom: calc(var(--scene-safe-bottom) + 8px); width: 57px; min-height: 48px; display: grid; grid-template-columns: 23px 1fr; align-items: center; padding: 5px 6px; border: 1px dashed rgba(255,255,255,.55); border-radius: 11px; background: rgba(65,55,66,.58); color: white; opacity: .68; cursor: pointer; backdrop-filter: blur(4px); }
.room-robot span { grid-row: 1 / 3; font-size: 20px; filter: grayscale(1); }.room-robot small { font-size: 5px; font-weight: 900; line-height: 1.1; }.room-robot i { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.2); }.room-robot b { display: block; width: 0; height: 100%; border-radius: inherit; background: #88d5b2; transition: width .2s linear; }
.room-robot.unlocked { border-style: solid; opacity: 1; }.room-robot.unlocked span { filter: none; }.room-robot.active span { animation: robot-work .8s ease-in-out infinite alternate; }
.float-layer { position: absolute; z-index: 30; inset: 0; pointer-events: none; overflow: hidden; }
.float-number { position: absolute; transform: translate(-50%, -50%); color: white; font-weight: 900; font-size: 21px; text-shadow: 0 2px 0 var(--pink), 0 3px 8px rgba(50,45,59,.3); animation: float-up .8s ease-out forwards; }
.float-number.scoop { color: #fff1a4; font-size: 25px; text-shadow: 0 2px 0 #a05c35, 0 3px 8px rgba(50,45,59,.35); }
.float-number.combo::after { content: attr(data-combo); display: block; font-size: 10px; color: white; text-align: center; letter-spacing: .5px; }
.stink-lines { position: absolute; z-index: 5; inset: 35% 12% 20%; opacity: 0; transition: opacity .3s; pointer-events: none; }
.room.is-messy .stink-lines { opacity: .45; }
.stink-lines i { position: absolute; width: 12px; height: 34px; border-left: 3px solid #8fa36d; border-radius: 50%; animation: stink 1.8s ease-in-out infinite; }
.stink-lines i:nth-child(1) { left: 5%; top: 20%; }.stink-lines i:nth-child(2) { right: 10%; top: 44%; animation-delay: -.6s; }.stink-lines i:nth-child(3) { left: 54%; top: 4%; animation-delay: -1.2s; }

.care-panel { position: absolute; z-index: var(--z-drawer); left: 0; right: 0; bottom: 0; padding: 0 16px env(safe-area-inset-bottom); background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: 0 -7px 24px rgba(73,49,46,.16); }
.care-panel-toggle { width: 100%; min-height: var(--drawer-peek); display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 8px 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.care-panel-toggle > span:nth-child(2) { display: flex; flex-direction: column; }.care-panel-toggle strong { font-size: 14px; }.care-panel-toggle small { color: var(--muted); font-size: 8px; }.care-panel-toggle b { color: #75628f; font-size: 9px; }
.drawer-grip { width: 26px; height: 5px; border-radius: 99px; background: #d7cec8; }
.care-panel-body { max-height: min(62dvh, 560px); padding-bottom: 15px; overflow-y: auto; transition: max-height .25s ease, opacity .2s ease; }
.care-panel.is-collapsed .care-panel-body { max-height: 0; padding-bottom: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.dog-tabs { position: static; display: flex; gap: 7px; margin: 0 0 10px; padding: 4px 1px; overflow-x: auto; }
.dog-tab { width: 45px; height: 45px; padding: 0; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: #e5b177; box-shadow: 0 3px 10px rgba(70,45,42,.2); cursor: pointer; font-size: 22px; transition: transform .2s; }
.dog-tab[aria-selected="true"] { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(70,45,42,.22); }
.dog-tab.locked { filter: grayscale(1); background: #ddd4cc; font-size: 17px; }
.pup-heading { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; }
.pup-heading small { font-size: 8px; letter-spacing: 1.2px; color: var(--peach-dark); font-weight: 900; }
.pup-heading h1 { margin: 2px 0 0; font-size: 25px; letter-spacing: -.9px; line-height: 1; }
.rename-button { padding: 6px 9px; border-radius: 9px; background: #f1ebe5; color: #756d72; font-size: 9px; font-weight: 800; }
.level-badge { width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff0cf; border: 1px solid #ffe1a0; border-radius: 15px; }
.level-badge small { font-size: 7px; color: #9b7553; }.level-badge strong { color: #d97a4d; font-size: 20px; line-height: .9; }
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 14px 0 12px; }
.stats-row > div { display: grid; grid-template-columns: 28px 1fr; align-items: center; min-width: 0; padding: 8px 7px; background: #f7f3ed; border: 1px solid rgba(74,50,55,.05); border-radius: 12px; }
.stat-icon { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: white; font-style: normal; font-size: 13px; }
.stat-icon.pink { background: var(--pink); }.stat-icon.brown { background: var(--brown); }.stat-icon.mint { background: var(--mint); }
.stats-row small { font-size: 7px; color: var(--muted); font-weight: 900; letter-spacing: .7px; }.stats-row strong { font-size: 11px; }
.upgrade-button, .primary-button { border: 0; cursor: pointer; background: linear-gradient(135deg, var(--peach), #ff7d73); color: white; box-shadow: 0 5px 0 #d76351, 0 8px 15px rgba(226,98,78,.24); }
.upgrade-button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 16px; border-radius: 16px; text-align: left; }
.upgrade-button > span:first-child { display: flex; flex-direction: column; }.upgrade-button small { font-size: 8px; font-weight: 900; opacity: .75; letter-spacing: 1px; }.upgrade-button strong { font-size: 17px; }.upgrade-button strong i { font-style: normal; }
.upgrade-cost { min-width: 76px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 11px; background: rgba(255,255,255,.18); }
.upgrade-cost i { font-style: normal; color: #ffe8ec; }.upgrade-cost b { font-size: 16px; }
.upgrade-button:active, .primary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #d76351; }
.upgrade-button:disabled { filter: grayscale(.45); opacity: .62; cursor: not-allowed; }
.upgrade-button.can-afford { animation: afford-pulse 1.5s ease-in-out infinite; }

.game-dialog { width: min(calc(100% - 34px), 410px); padding: 0; border: 0; border-radius: 24px; color: var(--ink); background: var(--paper); box-shadow: 0 20px 70px rgba(42,30,39,.34); }
.game-dialog::backdrop { background: rgba(50,42,48,.55); backdrop-filter: blur(3px); }
.game-dialog form { padding: 24px; }
.name-dialog form, .event-dialog form { text-align: center; }
.dialog-dog, .event-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: -3px auto 12px; border-radius: 50%; background: #ffe7bd; font-size: 39px; box-shadow: 0 5px 0 #f3ca91; }
.game-dialog form > small, .dialog-heading small { color: var(--peach-dark); font-size: 9px; letter-spacing: 1.5px; font-weight: 900; }
.game-dialog h2 { margin: 4px 0 7px; font-size: 24px; }.game-dialog p { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.game-dialog label[for="name-input"] { display: block; margin: 18px 0 5px; text-align: left; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.game-dialog input[type="text"], #name-input { width: 100%; height: 49px; padding: 0 14px; border: 2px solid #ece3dc; border-radius: 13px; background: white; color: var(--ink); font-weight: 800; outline: none; }
.game-dialog input:focus { border-color: var(--peach); box-shadow: 0 0 0 4px rgba(255,141,105,.12); }
.primary-button { width: 100%; min-height: 49px; margin-top: 14px; border-radius: 13px; font-weight: 900; }
.primary-button span { margin-left: 6px; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }.dialog-heading h2 { margin-bottom: 0; }
.close-button { width: 36px; height: 36px; border-radius: 50%; background: #eee8e2; font-size: 24px; line-height: 1; }
.toggle-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle-row span { display: flex; flex-direction: column; }.toggle-row strong { font-size: 13px; }.toggle-row small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.toggle-row input { position: absolute; z-index: 2; right: 0; width: 42px; height: 25px; margin: 0; opacity: 0; cursor: pointer; }.toggle-row > i { position: relative; width: 42px; height: 25px; flex: 0 0 auto; border-radius: 99px; background: #ddd5cf; transition: .2s; }.toggle-row > i::after { content: ""; position: absolute; width: 19px; height: 19px; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(50,40,45,.2); transition: .2s; }.toggle-row input:checked + i { background: var(--mint); }.toggle-row input:checked + i::after { transform: translateX(17px); }.toggle-row input:focus-visible + i { outline: 3px solid rgba(255,141,105,.35); }
.stats-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 18px 0; }.stats-summary span { padding: 10px 3px; display: flex; flex-direction: column; align-items: center; background: #f6f1eb; border-radius: 11px; }.stats-summary small { font-size: 7px; font-weight: 900; color: var(--muted); }.stats-summary strong { margin-top: 2px; font-size: 17px; }
.danger-button { width: 100%; height: 42px; border: 1px solid #f1c8c3; border-radius: 11px; background: #fff3f1; color: #b5534d; font-weight: 900; cursor: pointer; font-size: 11px; }.save-note { margin: 11px 0 0 !important; font-size: 9px !important; text-align: center; }
.event-icon { background: #fff0ba; color: var(--pink); font-size: 34px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); max-width: min(340px, calc(100% - 40px)); padding: 10px 15px; transform: translate(-50%, 120px); border-radius: 99px; background: var(--ink); color: white; font-size: 11px; font-weight: 800; box-shadow: 0 8px 24px rgba(42,30,39,.3); opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@keyframes wag { to { transform: rotate(24deg); } }
@keyframes happy-bop { 45% { transform: translateY(-12px) scale(1.04) rotate(-2deg); } }
@keyframes poop-arrive { from { opacity: 0; transform: translate(-50%, -50%) scale(.1) rotate(-20deg); } 70% { transform: translate(-50%, -50%) scale(1.16) rotate(5deg); } }
@keyframes scoop-away { to { opacity: 0; transform: translate(-50%, -90%) scale(.2) rotate(25deg); } }
@keyframes float-up { from { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -85px) scale(1.08); } }
@keyframes rare-glow { to { filter: drop-shadow(0 0 13px #fff39a); } }
@keyframes twinkle { to { transform: scale(1.4) rotate(25deg); opacity: .5; } }
@keyframes stink { 50% { transform: translate(7px,-12px) rotate(15deg); opacity: .35; } }
@keyframes afford-pulse { 50% { filter: brightness(1.08); box-shadow: 0 5px 0 #d76351, 0 8px 22px rgba(226,98,78,.42); } }

@media (max-height: 700px) {
  .topbar { height: 58px; }
  .room { height: 350px; }
  .care-panel { min-height: 225px; padding-top: 11px; }
  .stats-row { margin: 9px 0; }
  .upgrade-button { min-height: 52px; }
  .dog-button { transform: scale(.86); transform-origin: bottom; }
}

/* v0.5: room pages, reserved interaction docks, layered objectives and home memories */
.unlock-card { position: relative; z-index: 90; }
.objective-deck-toggle { position: absolute; right: 14px; bottom: 8px; min-height: 26px; padding: 0 7px; border: 0; border-radius: 8px; background: rgba(117,98,143,.09); color: #75628f; font-size: 7px; font-weight: 900; cursor: pointer; }
.unlock-card .progress-track { margin-right: 58px; }
.objective-deck { position: absolute; z-index: 95; top: calc(100% - 2px); left: 10px; right: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px; border: 1px solid rgba(117,98,143,.18); border-radius: 0 0 15px 15px; background: rgba(255,253,248,.98); box-shadow: 0 12px 24px rgba(61,38,41,.18); }
.objective-deck article { min-width: 0; padding: 7px 8px; border-radius: 10px; background: #f7f3ed; }
.objective-deck small, .objective-deck strong, .objective-deck span { display: block; }
.objective-deck small { color: var(--peach-dark); font-size: 7px; font-weight: 900; letter-spacing: .8px; }
.objective-deck strong { margin: 3px 0; font-size: 10px; }
.objective-deck span { color: var(--muted); font-size: 8px; line-height: 1.35; }

.room.scene-home { background: linear-gradient(#f8d8ba 0 36%, #c99070 36% 38%, #d9ad82 38% 100%); }
.room.scene-home::before { inset: 0 0 62%; }
.room.scene-home::after { height: 62%; }
.room.scene-home .rug { bottom: calc(var(--scene-safe-bottom) + 2%); width: 70%; height: 34%; }
.scene-home .window { top: 18px; width: 82px; height: 91px; }
.scene-home .wall-art { top: 25px; width: 63px; height: 72px; }
.scene-home .plant { bottom: calc(var(--scene-safe-bottom) + 10%); transform: scale(.82); transform-origin: bottom right; }

.scene-home .dog-stage { position: absolute; inset: 30% 0 var(--scene-safe-bottom); width: 100%; height: auto; display: block; pointer-events: none; transition: opacity .2s ease; }
.scene-home .dog-button { position: absolute; width: 150px; height: 168px; bottom: 5%; transform-origin: center bottom; }
.scene-home .dog-button.room-slot-0 { left: -1%; bottom: 49%; transform: scale(.68); }
.scene-home .dog-button.room-slot-1 { left: 50%; bottom: 41%; transform: translateX(-50%) scale(.76); }
.scene-home .dog-button.room-slot-2 { right: -1%; bottom: 49%; transform: scale(.68); }
.scene-home .dog-button[hidden] { display: none !important; }

.pan-controls { inset: 34% 8px auto; align-items: center; }
.pan-controls span { align-self: flex-start; margin-top: -33px; padding: 5px 9px; border-radius: 99px; background: rgba(50,45,59,.62); color: white; font-size: 8px; font-weight: 900; pointer-events: none; }
.pan-controls button { width: 44px; height: 52px; }

.next-mess { left: 10px; bottom: calc(var(--scene-safe-bottom) + 8px); }
.room-robot { left: 105px; bottom: calc(var(--scene-safe-bottom) + 8px); min-height: 48px; }
.scene-button { right: 10px; bottom: calc(var(--scene-safe-bottom) + 8px); min-width: 88px; height: 48px; }
.auto-bag-station { right: 14px; bottom: calc(var(--scene-safe-bottom) + 66px); width: 62px; height: 66px; }
.collection-zone { right: 12px; bottom: calc(var(--scene-safe-bottom) + 154px); }
.scoop-tool { left: 50%; bottom: calc(var(--scene-safe-bottom) + 2%); }
.scoop-instruction { top: 39%; bottom: auto; max-width: min(210px, 56%); }
.effect-strip { bottom: calc(var(--scene-safe-bottom) + 62px); }

.decoration-layer { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.placed-decoration { position: absolute; display: block; object-fit: cover; border-radius: 10px; box-shadow: 0 5px 10px rgba(78,48,36,.2); }
.placed-decoration.wall-decoration { width: clamp(52px, 11vw, 76px); height: clamp(52px, 11vw, 76px); border: 4px solid #fff4df; }
.placed-decoration.floor-decoration { width: clamp(54px, 12vw, 82px); height: clamp(54px, 12vw, 82px); object-fit: contain; border-radius: 50%; box-shadow: none; }
.placed-decoration[data-slot="wallLeft"] { left: 30%; top: 4%; transform: rotate(-2deg); }
.placed-decoration[data-slot="wallCenter"] { left: 50%; top: 5%; transform: translateX(-50%) rotate(1deg); }
.placed-decoration[data-slot="wallRight"] { right: 25%; top: 4%; transform: rotate(2deg); }
.placed-decoration[data-slot="floorLeft"] { left: 2%; bottom: calc(var(--scene-safe-bottom) + 21%); }
.placed-decoration[data-slot="floorRight"] { right: 2%; bottom: calc(var(--scene-safe-bottom) + 21%); }
.placed-decoration[data-slot="floorShelf"] { left: 50%; bottom: calc(var(--scene-safe-bottom) + 34%); transform: translateX(-50%); }

.decoration-action { grid-column: 1 / -1; background: linear-gradient(135deg,#fff4df,#edf8f1) !important; }
.quick-action > img { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.decoration-dialog form { width: min(560px, calc(100vw - 28px)); max-height: min(82dvh, 720px); overflow-y: auto; }
.decoration-set-progress { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; margin: 10px 0; padding: 9px 10px; border-radius: 12px; background: #fff4df; }
.decoration-set-progress span { font-size: 10px; font-weight: 900; }.decoration-set-progress strong { font-size: 11px; color: var(--peach-dark); }
.decoration-set-progress i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: #eadfce; }.decoration-set-progress b { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--yellow),var(--peach)); }
.decoration-preview { display: grid; grid-template-columns: minmax(92px, 34%) 1fr; gap: 12px; margin: 10px 0; padding: 10px; border: 2px solid rgba(117,201,165,.35); border-radius: 15px; background: #f3fbf6; }
.decoration-preview > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }.decoration-preview small,.decoration-preview strong { display: block; }.decoration-preview small { color: #47836a; font-size: 8px; font-weight: 900; }.decoration-preview strong { margin: 3px 0; font-size: 14px; }.decoration-preview p { margin: 0 0 8px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.decoration-slot-actions { display: flex; flex-wrap: wrap; gap: 5px; }.decoration-slot-actions button,.decoration-card button { min-height: 36px; padding: 0 9px; border: 0; border-radius: 9px; background: #75628f; color: white; font-size: 8px; font-weight: 900; cursor: pointer; }
.decoration-list { display: grid; gap: 7px; }
.decoration-card { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: #f9f6f1; }
.decoration-card > img,.collection-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 10px; object-fit: cover; background: #fff4df; }.decoration-card strong,.decoration-card small,.decoration-card em { display: block; }.decoration-card strong { font-size: 10px; }.decoration-card small { margin: 2px 0; color: var(--muted); font-size: 8px; line-height: 1.3; }.decoration-card em { color: var(--peach-dark); font-size: 7px; font-style: normal; font-weight: 900; text-transform: uppercase; }

@media (max-width: 430px) {
  .scene-home .dog-button.room-slot-0 { left: -8%; }
  .scene-home .dog-button.room-slot-2 { right: -8%; }
  .placed-decoration[data-slot="wallLeft"] { left: 35%; }
  .placed-decoration[data-slot="wallRight"] { right: 29%; }
  .scoop-tool { left: 47%; bottom: calc(var(--scene-safe-bottom) + 16%); }
  .scoop-instruction { max-width: 48%; font-size: 7px; }
  .room-robot { left: 99px; width: 55px; }
}

@media (max-height: 700px) {
  .room { height: calc(100dvh - 100px); }
  .scene-home .dog-button.room-slot-0,.scene-home .dog-button.room-slot-2 { bottom: 48%; transform: scale(.62); }
  .scene-home .dog-button.room-slot-1 { bottom: 40%; transform: translateX(-50%) scale(.7); }
  .placed-decoration.floor-decoration { width: 50px; height: 50px; }
}

@media (max-width: 370px) {
  .brand small { display: none; }.brand strong { font-size: 18px; }
  .brand-mark { width: 30px; height: 30px; }
  .heart-balance { min-width: 76px; }
  .room { min-height: 335px; }
  .dog-button { transform: scale(.86); transform-origin: bottom; }
  .stats-row > div { padding-inline: 4px; }.stat-icon { width: 23px; height: 23px; }
}

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

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* v0.2 scenes, pack browsing, items and long-term progression */
.home-environment, .park-environment { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene-home .park-only, .scene-park .home-only { display: none !important; }
.scene-park {
  background: linear-gradient(#9edce6 0 52%, #98ce72 52% 70%, #72b55f 70% 100%);
  filter: none !important;
}
.scene-park::before { display: none; }
.scene-park::after { height: 31%; background: repeating-linear-gradient(104deg, transparent 0 52px, rgba(53,112,51,.08) 53px 55px); }

.park-sun { position: absolute; top: 24px; right: 38px; width: 52px; height: 52px; border-radius: 50%; background: #ffe27c; box-shadow: 0 0 0 12px rgba(255,226,124,.18); }
.park-cloud { position: absolute; width: 76px; height: 20px; border-radius: 30px; background: rgba(255,255,255,.72); }
.park-cloud::before, .park-cloud::after { content: ""; position: absolute; bottom: 3px; border-radius: 50%; background: inherit; }
.park-cloud::before { width: 32px; height: 32px; left: 14px; }.park-cloud::after { width: 24px; height: 24px; right: 9px; }
.park-cloud.one { top: 55px; left: 25px; }.park-cloud.two { top: 116px; right: 74px; transform: scale(.65); opacity: .7; }
.park-hill { position: absolute; left: -15%; width: 130%; border-radius: 50% 50% 0 0; }
.park-hill.far { height: 160px; bottom: 26%; background: #7fbe6d; transform: rotate(-3deg); }
.park-hill.near { height: 130px; bottom: -8%; background: #64a852; transform: rotate(3deg); }
.park-path { position: absolute; left: 50%; bottom: -28px; width: 70%; height: 49%; transform: translateX(-50%) perspective(180px) rotateX(30deg); border-radius: 50% 50% 0 0; background: linear-gradient(#e4c28d, #cfa678); box-shadow: inset 0 0 0 5px rgba(255,255,255,.12); }
.park-tree { position: absolute; bottom: 25%; width: 90px; height: 170px; }
.park-tree.left { left: -22px; transform: scale(.9); }.park-tree.right { right: -34px; transform: scale(1.08); }
.park-tree span { position: absolute; left: 37px; bottom: 0; width: 20px; height: 90px; border-radius: 10px; background: #8a5b3d; }
.park-tree i { position: absolute; z-index: 1; width: 72px; height: 80px; border-radius: 50%; background: #4e9c59; }
.park-tree i:first-child { left: 0; top: 7px; }.park-tree i:nth-child(2) { right: 0; top: 36px; background: #5aae61; }
.park-bench { position: absolute; right: 58px; bottom: 31%; width: 74px; height: 35px; border-top: 10px solid #a25f3f; border-bottom: 7px solid #a25f3f; transform: skewY(-4deg); }
.park-bench::before, .park-bench::after { content: ""; position: absolute; top: 22px; width: 6px; height: 26px; background: #764b38; }.park-bench::before { left: 8px; }.park-bench::after { right: 8px; }
.park-flowers { position: absolute; left: 4%; right: 4%; bottom: 21%; color: #fff1ac; font-size: 18px; letter-spacing: 18px; opacity: .9; }
.scene-chip { position: absolute; z-index: 25; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; align-items: center; padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.82); color: #397850; box-shadow: 0 4px 14px rgba(44,100,63,.16); }
.scene-chip span { color: #f2b73e; }.scene-chip small { font-size: 8px; font-weight: 900; letter-spacing: 1px; }

.room.scene-home { touch-action: pan-y; }
.scene-home .dog-stage { left: 0; right: auto; bottom: calc(var(--scene-safe-bottom) + 4%); height: 45%; justify-content: flex-start; gap: 0; transition: transform .32s ease; }
.scene-home .dog-button { flex: 0 0 150px; width: 150px; height: 168px; }
.dog-button .dog-tail { right: 1px; bottom: 54px; z-index: 0; }
.dog-button.secondary .dog-tail { transform: none; right: 1px; bottom: 48px; }
.dog-name-tag { bottom: 0; min-width: 44px; text-align: center; }
.dog-shadow { bottom: 8px; }
.dog-button.secondary { width: 150px; height: 168px; }
.dog-button.secondary .dog-head { top: 24px; }.dog-button.secondary .dog-body { height: 80px; }
.dog-button.husky .dog-head, .dog-button.husky .dog-body { background: #8b8c98; }
.dog-button.husky .dog-ear { background: #656673; }.dog-button.husky .dog-tail { border-color: #777984; }
.dog-button.husky .dog-muzzle, .dog-button.husky .dog-belly, .dog-button.husky .dog-paw { background: #f5f2ec; }
.dog-button.husky .dog-eye { box-shadow: 0 0 0 2px #a9e8ff; }
.dog-button.beagle .dog-head, .dog-button.beagle .dog-body { background: #b87943; }.dog-button.beagle .dog-ear { height: 73px; background: #754829; }.dog-button.beagle .dog-muzzle, .dog-button.beagle .dog-belly { background: #fff3db; }
.dog-button.shiba .dog-head, .dog-button.shiba .dog-body { background: #d98945; }.dog-button.shiba .dog-ear { height: 54px; background: #b66432; border-radius: 75% 20% 45% 20%; }.dog-button.shiba .dog-tail { width: 38px; height: 38px; border-width: 12px; border-color: #c87337; border-radius: 50%; }
.dog-button.samoyed .dog-head, .dog-button.samoyed .dog-body, .dog-button.samoyed .dog-ear { background: #f5f3ef; }.dog-button.samoyed .dog-tail { border-color: #ece9e4; }.dog-button.samoyed .dog-muzzle, .dog-button.samoyed .dog-belly, .dog-button.samoyed .dog-paw { background: white; }.dog-button.samoyed { filter: drop-shadow(0 4px 3px rgba(75,70,84,.14)); }

.scene-park .dog-stage { inset: 0; height: auto; display: block; pointer-events: none; }
.scene-park .dog-button { position: absolute; width: 150px; height: 168px; transform: translate(-50%, -50%) scale(.62); transform-origin: center bottom; transition: left 1.8s ease-in-out, top 1.8s ease-in-out, transform .55s cubic-bezier(.2,.9,.3,1), opacity .35s, filter .35s; }
.scene-park .dog-button .dog-name-tag { bottom: -2px; }
.scene-park.park-focus .dog-button:not(.is-focused) { opacity: .14; filter: blur(3px); pointer-events: none; }
.scene-park .dog-button.is-focused { z-index: 20; left: 50% !important; top: 62% !important; transform: translate(-50%, -50%) scale(1.13); filter: drop-shadow(0 14px 9px rgba(53,69,46,.24)); }
.scene-park .dog-button.behavior-sniff .dog-head { transform: rotate(13deg) translateY(8px); }
.scene-park .dog-button.behavior-sit .dog-body, .scene-park .dog-button.behavior-stretch .dog-body { transform: scaleY(.82) translateY(10px); }
.scene-park .dog-button.behavior-zoom:not(.is-focused) { animation: park-bounce .55s ease-in-out infinite alternate; }
.scene-park .dog-button.behavior-tail .dog-tail { animation-duration: .2s; }
.scene-park .dog-button.behavior-howl .dog-head { transform: rotate(-12deg) translateY(-8px); }
.scene-park .dog-button.behavior-dig .dog-paw { animation: dig .25s ease-in-out infinite alternate; }
.scene-park .dog-button.behavior-fetch .dog-mouth::after { content: ""; position: absolute; width: 17px; height: 17px; left: 20px; top: 4px; border-radius: 50%; background: #f36f5e; box-shadow: inset -3px -2px rgba(126,43,43,.15); }

.focus-close { position: absolute; z-index: 50; top: 12px; right: 13px; width: 38px; height: 38px; display: none; border: 0; border-radius: 50%; background: rgba(45,70,54,.72); color: white; font-size: 25px; cursor: pointer; }
.park-focus .focus-close { display: grid; place-items: center; }
.behavior-bubble { position: absolute; z-index: 45; left: 50%; top: 78px; max-width: 72%; padding: 8px 13px; transform: translateX(-50%); border-radius: 13px; background: rgba(255,255,255,.9); color: #42654d; font-size: 11px; font-weight: 900; text-align: center; box-shadow: 0 5px 15px rgba(49,88,57,.16); opacity: 0; transition: opacity .25s; }
.park-focus .behavior-bubble { opacity: 1; }

.pan-controls { position: absolute; z-index: 35; inset: 50% 8px auto; display: flex; justify-content: space-between; pointer-events: none; }
.pan-controls button { width: 37px; height: 48px; border: 0; border-radius: 13px; background: rgba(50,45,59,.6); color: white; font-size: 30px; line-height: 1; box-shadow: 0 4px 12px rgba(50,45,59,.18); pointer-events: auto; cursor: pointer; }
.pan-controls button:disabled { opacity: .15; pointer-events: none; }

.scene-button { position: absolute; z-index: var(--z-scene-hud); right: 12px; bottom: calc(var(--scene-safe-bottom) + 8px); min-width: 85px; height: 43px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 2px solid white; border-radius: 14px; background: linear-gradient(135deg,#65b978,#40975d); color: white; box-shadow: 0 4px 0 #33754b, 0 7px 14px rgba(50,97,62,.22); cursor: pointer; }
.scene-park .scene-button { background: linear-gradient(135deg,#ff9b73,#ec775e); box-shadow: 0 4px 0 #c55c4d, 0 7px 14px rgba(123,68,55,.22); }
.scene-button strong { font-size: 11px; }
.scene-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #33754b; }
.effect-strip { position: absolute; z-index: var(--z-scene-hud); left: 50%; bottom: calc(var(--scene-safe-bottom) + 14px); transform: translateX(-50%); display: flex; gap: 5px; pointer-events: none; }
.effect-pill { padding: 5px 8px; border-radius: 99px; background: rgba(255,253,248,.9); color: var(--peach-dark); font-size: 8px; font-weight: 900; box-shadow: 0 3px 10px rgba(70,50,50,.12); white-space: nowrap; }

.poop-button.big { width: 78px; height: 78px; }
.poop-button.big .poop-shape { left: 10px; bottom: 8px; width: 58px; height: 34px; }
.poop-button.big .poop-shape::before { left: 11px; bottom: 20px; width: 38px; height: 28px; }.poop-button.big .poop-shape::after { left: 23px; bottom: 42px; width: 17px; height: 20px; }
.poop-button.big .poop-face { left: 32px; bottom: 25px; }

.treasure-layer { position: absolute; z-index: 34; inset: 0; pointer-events: none; }
.treasure-button { position: absolute; width: 58px; height: 58px; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: radial-gradient(circle,#fff9bd,#ffca57); box-shadow: 0 0 0 7px rgba(255,235,128,.18), 0 6px 12px rgba(73,87,45,.2); font-size: 29px; cursor: pointer; pointer-events: auto; animation: treasure-pop .45s cubic-bezier(.2,1.3,.5,1), treasure-float 1.2s ease-in-out infinite alternate; }
.treasure-button::after { content: "✦"; position: absolute; right: -4px; top: -8px; color: white; font-size: 19px; }

.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.workshop-action { grid-column: 1 / -1; background: linear-gradient(135deg,#f0ebfa,#fff4df) !important; border-color: #ded3ef !important; }
.quick-action { min-height: 52px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 14px; background: #f7f3ed; text-align: left; cursor: pointer; }
.quick-action > span { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: white; font-size: 18px; }.quick-action strong { align-self: end; font-size: 10px; }.quick-action small { align-self: start; font-size: 7px; color: var(--muted); }
.quick-action.locked { filter: grayscale(.65); opacity: .62; }
.quick-action.active { border-color: rgba(117,201,165,.45); background: #eef9f3; }

.park-panel-content { min-height: 214px; text-align: center; }
.park-panel-icon { width: 48px; height: 48px; display: grid; place-items: center; float: left; margin-right: 11px; border-radius: 15px; background: #e7f4d5; font-size: 25px; }
.park-panel-copy { text-align: left; }.park-panel-copy small { color: #4e9970; font-size: 8px; letter-spacing: 1.3px; font-weight: 900; }.park-panel-copy h1 { margin: 2px 0 4px; font-size: 23px; }.park-panel-copy p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.park-summary { clear: both; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding-top: 15px; }
.park-summary div { padding: 10px 5px; display: flex; flex-direction: column; background: #f0f7e8; border-radius: 12px; }.park-summary small { color: #709069; font-size: 7px; font-weight: 900; letter-spacing: .7px; }.park-summary strong { margin-top: 2px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.park-hint { margin: 10px 0 0; padding: 8px 10px; display: flex; gap: 7px; align-items: center; border-radius: 11px; background: #fff7dc; color: #846f4f; font-size: 9px; text-align: left; }.park-hint > span:first-child { color: #e6a936; font-size: 16px; }

.select-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.select-row span { display: flex; flex-direction: column; }.select-row strong { font-size: 13px; }.select-row small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.select-row select { max-width: 122px; height: 35px; padding: 0 28px 0 10px; border: 1px solid #ddd5cf; border-radius: 10px; background: white; color: var(--ink); font-weight: 800; font-size: 11px; }

.item-dialog { width: min(calc(100% - 22px), 450px); }
.item-dialog form { padding: 19px; }.item-intro { margin-top: -5px !important; text-align: left; font-size: 10px !important; }
.item-list { display: grid; gap: 8px; }
.item-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #faf7f1; }
.item-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; background: white; font-size: 25px; box-shadow: inset 0 -3px #f0e8df; }
.item-card > div:nth-child(2) { min-width: 0; }.item-card strong { font-size: 12px; }.item-card p { margin: 2px 0 3px; font-size: 8px; line-height: 1.25; }.item-card small { color: var(--muted); font-size: 8px; }.item-card small b { color: var(--peach-dark); }
.item-buttons { display: grid; gap: 5px; }.item-buttons button { min-width: 58px; height: 28px; padding: 0 8px; border: 0; border-radius: 9px; background: #ffe6df; color: var(--peach-dark); font-size: 9px; font-weight: 900; cursor: pointer; }.item-buttons button:last-child { background: var(--peach); color: white; }.item-buttons button:disabled { opacity: .4; cursor: not-allowed; }

.upgrade-dialog { width: min(calc(100% - 20px), 460px); max-height: min(90vh, 820px); }
.upgrade-dialog form { padding: 18px; }.upgrade-dialog .item-intro { margin-bottom: 10px; }
.upgrade-lab-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 10px; }.upgrade-lab-summary span { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 11px; background: #f2ecfa; }.upgrade-lab-summary small { color: #76628e; font-size: 6px; font-weight: 900; }.upgrade-lab-summary strong { font-size: 16px; }
.system-upgrade-list { display: grid; gap: 7px; max-height: min(61vh, 560px); padding-right: 2px; overflow-y: auto; }
.system-upgrade-card { display: grid; grid-template-columns: 38px 1fr 102px; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: #fbf8f3; }
.system-upgrade-card.locked { filter: grayscale(.5); opacity: .68; }.system-upgrade-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: white; font-size: 20px; box-shadow: inset 0 -3px #eee8e1; }
.system-upgrade-copy { min-width: 0; display: flex; flex-direction: column; }.system-upgrade-copy strong { font-size: 11px; }.system-upgrade-copy small { margin-top: 1px; color: var(--muted); font-size: 7px; line-height: 1.2; }.system-upgrade-copy i { height: 4px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: #e9e2dd; }.system-upgrade-copy i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8bd4b2,#ffcb67); }
.system-upgrade-buy { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }.system-upgrade-buy em { color: #75628f; font-size: 7px; font-style: normal; font-weight: 900; text-align: center; }.system-upgrade-buy button { min-height: 30px; padding: 3px 6px; border: 0; border-radius: 9px; background: #75628f; color: white; font-size: 8px; font-weight: 900; cursor: pointer; }.system-upgrade-buy button:disabled { background: #e4ddd8; color: #999094; cursor: not-allowed; }
.system-upgrade-category { margin: 7px 3px 1px; color: #75628f; font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.system-upgrade-card.revealed { border-style: dashed; background: #f5f1f8; }
.system-upgrade-card.claimable { border-color: rgba(117,98,143,.45); box-shadow: 0 0 0 3px rgba(117,98,143,.08); }
.system-upgrade-card [data-claim-system] { background: linear-gradient(135deg,#75628f,#967ab5); }
.system-upgrade-card [data-repeatable="true"]::after { content: " · HOLD"; opacity: .7; }
.lang-zh .system-upgrade-card [data-repeatable="true"]::after { content: " · 可长按"; }
.next-discovery-card { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; padding: 10px; border: 1px dashed #d8d0dc; border-radius: 13px; background: linear-gradient(135deg,#f5f1f8,#fbf8f3); color: #7f7586; }
.next-discovery-card span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: #e6e0e9; filter: grayscale(1); }
.next-discovery-card strong { display: block; font-size: 10px; }.next-discovery-card small { display: block; margin-top: 2px; font-size: 8px; }
.tool-evolution-card { margin-bottom: 9px; padding: 11px; border: 1px solid #f0c96b; border-radius: 13px; background: linear-gradient(135deg,#fff4cf,#fffaf0); }
.tool-evolution-card strong { display: block; font-size: 12px; }.tool-evolution-card p { margin: 3px 0 8px; font-size: 9px; }.tool-evolution-card button { width: 100%; min-height: 34px; border: 0; border-radius: 9px; background: #d08b36; color: white; font-size: 9px; font-weight: 900; cursor: pointer; }
.scoop-tool.evolution-wide_scoop .scoop-head { left: -2px; width: 64px; background: linear-gradient(#eef4f7,#9fadb8); }

/* v0.3 cleaning experiment */
.scoop-experiment-layer { position: absolute; z-index: var(--z-scene-tool); inset: 0; pointer-events: none; }
.scoop-tool { position: absolute; z-index: 5; left: 48%; bottom: calc(var(--scene-safe-bottom) + 13%); width: 58px; height: 82px; padding: 0; border: 0; background: transparent; color: #724a3b; cursor: grab; pointer-events: auto; touch-action: none; filter: drop-shadow(0 5px 3px rgba(75,48,42,.2)); transform: translate(-50%, 50%) rotate(-12deg); transform-origin: 50% 80%; transition: left .22s ease, top .22s ease, bottom .22s ease, transform .22s ease, filter .2s; }
.scoop-tool:focus-visible { outline: 3px solid rgba(255,255,255,.95); outline-offset: 2px; border-radius: 18px; }
.scoop-tool:active, .scoop-tool.is-dragging { cursor: grabbing; transition: none; filter: drop-shadow(0 8px 5px rgba(75,48,42,.3)); transform: translate(-50%,-50%) rotate(-7deg) scale(1.05); }
.scoop-handle { position: absolute; left: 25px; top: 1px; width: 10px; height: 58px; border: 2px solid #6c493e; border-radius: 8px; background: linear-gradient(90deg,#d29458,#f0bd7a); box-shadow: inset -2px 0 rgba(105,65,50,.18); }
.scoop-handle::before { content: ""; position: absolute; left: -6px; top: -5px; width: 17px; height: 12px; border: 3px solid #6c493e; border-bottom: 0; border-radius: 10px 10px 2px 2px; }
.scoop-head { position: absolute; left: 7px; bottom: 3px; width: 45px; height: 28px; display: grid; place-items: center; border: 3px solid #6d5960; border-radius: 5px 5px 15px 15px; background: linear-gradient(#dfe3e7,#aeb8c1); color: rgba(255,255,255,.75); font-size: 20px; line-height: 1; overflow: hidden; }
.scoop-tool.is-carrying .scoop-head::after { content: "●"; position: absolute; top: -9px; color: #71462e; font-size: 35px; text-shadow: 0 4px #5a3628; }
.cleaning-click .scoop-experiment-layer { display: none !important; }
.scene-park .scoop-experiment-layer { display: none !important; }

.auto-bag-station, .collection-zone { position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 18px; opacity: .72; transition: opacity .2s, transform .2s, box-shadow .2s; }
.auto-bag-station { right: 17px; bottom: calc(var(--scene-safe-bottom) + 12%); width: 58px; height: 62px; background: rgba(255,250,239,.88); border: 2px dashed rgba(118,81,65,.34); }
.auto-bag-station span { font-size: 26px; }.auto-bag-station small, .collection-zone small { font-size: 6px; font-weight: 900; color: #7b6258; }
.collection-zone { right: 16px; bottom: calc(var(--scene-safe-bottom) + 25%); width: 82px; height: 72px; border: 3px dashed rgba(255,255,255,.9); background: rgba(87,169,114,.7); color: white; opacity: 0; transform: scale(.8); }
.collection-zone span { font-size: 31px; line-height: .8; }.collection-zone small { color: white; }
.drag-finish-nearby_zone .collection-zone { opacity: .82; transform: scale(1); }
.drag-finish-nearby_zone .auto-bag-station { opacity: .18; }
.collection-zone.is-ready { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 9px rgba(255,255,255,.2), 0 7px 18px rgba(54,101,67,.25); }
.auto-bag-station.is-finishing { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 9px rgba(255,225,153,.2); }

.scoop-instruction { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--scene-safe-bottom) + 68px); max-width: 220px; margin: 0; padding: 6px 10px; transform: translateX(-50%); border-radius: 99px; background: rgba(52,45,54,.78); color: white; font-size: 8px; font-weight: 900; text-align: center; opacity: .88; }
.poop-button.is-lifted { z-index: 60; pointer-events: none; animation: none; filter: drop-shadow(0 8px 4px rgba(71,45,34,.24)); transform: translate(-50%,-50%) scale(.72) rotate(-6deg); transition: left .04s linear, top .04s linear; }
.poop-button.is-drag-finishing { animation: scoop-bag-finish .28s ease-in forwards; }
.room.high-load .poop-button:not(.big):not(.is-lifted) { transform: translate(-50%,-50%) scale(.7); }
.cleaning-drag .poop-button { cursor: default; }
.cleaning-drag .poop-button:focus-visible { cursor: pointer; }

.dog-button.is-thanking { animation: dog-thank .55s cubic-bezier(.2,1.2,.4,1); }
.dog-button.is-thanking::after { content: "♥"; position: absolute; z-index: 8; left: 50%; top: 2px; color: var(--pink); font-size: 26px; text-shadow: 0 2px white; animation: thank-heart .7s ease-out forwards; }

.experiment-settings { margin: 14px 0; padding: 11px; border: 1px solid rgba(114,92,143,.18); border-radius: 14px; background: linear-gradient(145deg,#f5f1ff,#fff9ef); }
.experiment-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.experiment-heading > span { display: flex; flex-direction: column; }.experiment-heading small { color: #8a73a5; font-size: 7px; font-weight: 900; letter-spacing: 1px; }.experiment-heading strong { font-size: 13px; }
.experiment-heading b { padding: 4px 6px; border-radius: 99px; background: #e7def3; color: #705c8d; font-size: 6px; letter-spacing: .6px; }
.experiment-settings .select-row { padding: 8px 0; }.experiment-settings .select-row strong { font-size: 11px; }.experiment-settings .select-row small { max-width: 190px; font-size: 8px; }
.experiment-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }.experiment-actions button { min-height: 32px; border: 0; border-radius: 9px; background: #75628f; color: white; font-size: 8px; font-weight: 900; cursor: pointer; }.experiment-actions button:last-child { background: #eee6f5; color: #705c8d; }
.experiment-settings > p { margin: 7px 0 0; color: var(--muted); font-size: 7px; text-align: center; }.experiment-settings > p strong { color: #705c8d; }

@keyframes scoop-bag-finish { to { opacity: 0; transform: translate(-50%,-80%) scale(.2) rotate(18deg); } }
@keyframes dog-thank { 50% { transform: translateY(-9px) scale(1.06); } }
@keyframes thank-heart { to { opacity: 0; transform: translateY(-24px) scale(.65); } }
@keyframes robot-work { to { transform: translateY(-3px) rotate(5deg); } }

@keyframes park-bounce { to { margin-top: -5px; } }
@keyframes dig { to { transform: translateY(5px) rotate(12deg); } }
@keyframes treasure-pop { from { opacity: 0; transform: translate(-50%,-50%) scale(.1) rotate(-20deg); } }
@keyframes treasure-float { to { filter: brightness(1.08); box-shadow: 0 0 0 10px rgba(255,235,128,.11), 0 9px 15px rgba(73,87,45,.22); } }

@media (max-height: 700px) {
  :root { --drawer-peek: 58px; --scene-safe-top: 64px; }
  .topbar { height: 52px; }
  .unlock-card { min-height: 48px; padding-block: 5px 7px; }
  .room { height: calc(100dvh - 100px); min-height: 0; }
  .care-panel { min-height: 0; padding-top: 0; }
  .care-panel-toggle { min-height: var(--drawer-peek); }
  .quick-actions { margin-top: 7px; }.quick-action { min-height: 46px; }
  .park-panel-content { min-height: 195px; }
}

/* Keep v0.5 scene safety overrides last so legacy scene rules cannot reopen overlaps. */
.room.scene-home { background: linear-gradient(to bottom, #f8d8ba 0 min(36%, 320px), #c99070 min(36%, 320px) calc(min(36%, 320px) + 20px), #d9ad82 calc(min(36%, 320px) + 20px) 100%); }
.room.scene-home::before { inset: 0 0 auto; height: min(36%, 320px); }
.room.scene-home::after { height: calc(100% - min(36%, 320px) - 20px); }
.scene-home .dog-stage { position: absolute; inset: min(30%, 300px) 0 var(--scene-safe-bottom); width: 100%; height: auto; display: block; pointer-events: none; transform: none !important; }
.scene-home .dog-button { position: absolute; width: 150px; height: 168px; bottom: auto; }
.scene-home .dog-button.room-slot-0 { left: 12%; right: auto; top: 60px; bottom: auto; transform: scale(.72); }
.scene-home .dog-button.room-slot-1 { left: auto; right: 12%; top: 80px; bottom: auto; transform: scale(.78); }
.scene-home .dog-button.room-slot-2 { left: auto; right: -1%; bottom: 49%; transform: scale(.68); }
.pan-controls { inset: min(34%, 330px) 8px auto; align-items: center; }
.scoop-tool { left: 56%; top: auto; bottom: calc(var(--scene-safe-bottom) + 11%); }
.scoop-instruction { top: min(39%, 390px); right: auto; bottom: auto; height: auto; min-height: 0; max-width: min(210px, 56%); }
.auto-bag-station { right: 11px; bottom: calc(var(--scene-safe-bottom) + 58px); width: 50px; height: 50px; }
.collection-zone { right: 12px; bottom: calc(var(--scene-safe-bottom) + 154px); }

@media (max-height: 700px) {
  .scene-home .dog-button.room-slot-0 { left: 8%; top: 0; bottom: auto; transform: scale(.66); }
  .scene-home .dog-button.room-slot-1 { right: 8%; top: 18px; bottom: auto; transform: scale(.72); }
}

/* v0.5.1: one continuous room, direct camera drag, reliable dog hit targets and visible robot sweep. */
.room.scene-home {
  --room-world-width: 100%;
  --room-pan-x: 0px;
  overflow: hidden;
  touch-action: pan-y;
  background: #d9ad82;
}
.room.scene-home::before,.room.scene-home::after { display: none; }
.scene-home .home-environment {
  inset: 0 auto 0 0;
  width: var(--room-world-width);
  overflow: visible;
  transform: translate3d(calc(0px - var(--room-pan-x)),0,0);
  background:
    radial-gradient(circle at 14px 14px,rgba(255,255,255,.18) 0 1px,transparent 1.5px) 0 0/28px 28px,
    linear-gradient(to bottom,#f8d8ba 0 min(36%,320px),#c99070 min(36%,320px) calc(min(36%,320px) + 20px),#d9ad82 calc(min(36%,320px) + 20px) 100%);
  will-change: transform;
}
.scene-home .home-environment .wall-art { right: 38px; }
.scene-home .home-environment .plant { right: 22px; }
.scene-home .home-environment .rug { left: 50%; }
.scene-home .dog-stage {
  z-index: 25;
  left: 0;
  right: auto;
  width: var(--room-world-width);
  transform: translate3d(calc(0px - var(--room-pan-x)),0,0) !important;
  will-change: transform;
}
.scene-home .dog-button {
  --home-dog-scale: .72;
  right: auto;
  bottom: auto;
  transform: translateX(-50%) scale(var(--home-dog-scale));
  transform-origin: center bottom;
  transition: left 4.2s linear,top 4.2s linear,filter .2s;
}
.scene-home .dog-button.is-petted { animation: home-happy-bop .32s cubic-bezier(.2,.9,.3,1.35); }
.scene-home .dog-button.is-thanking { animation: home-dog-thank .55s cubic-bezier(.2,1.2,.4,1); }
.scene-home .poop-layer {
  left: 0;
  right: auto;
  width: var(--room-world-width);
  transform: translate3d(calc(0px - var(--room-pan-x)),0,0);
  will-change: transform;
}
.scene-home .poop-button.is-robot-cleaned { pointer-events: none; animation: robot-vacuum .62s ease-in forwards; }
.scene-park .dog-stage { z-index: 35; }
.pan-controls { inset: min(34%,330px) 8px auto; }
.pan-controls span { min-width: 78px; text-align: center; }
.robot-runner {
  position: absolute;
  z-index: 48;
  left: -132px;
  bottom: calc(var(--scene-safe-bottom) + 58px);
  width: 116px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 7px 5px rgba(75,48,42,.23));
}
.robot-runner img { display: block; width: 100%; height: auto; }
.robot-runner i { position: absolute; left: -24px; right: 70%; bottom: 14px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.48); }
.robot-runner.is-running { animation: robot-sweep .72s cubic-bezier(.22,.72,.35,1) both; }
.reduce-motion .robot-runner.is-running { animation-duration: .08s; }

@keyframes home-happy-bop {
  50% { transform: translateX(-50%) translateY(-9px) scale(var(--home-dog-scale)); filter: brightness(1.08); }
}
@keyframes home-dog-thank {
  50% { transform: translateX(-50%) translateY(-9px) scale(var(--home-dog-scale)); filter: brightness(1.08); }
}
@keyframes robot-sweep {
  0% { left: -132px; opacity: 0; transform: rotate(-2deg); }
  10%,84% { opacity: 1; }
  100% { left: calc(100% + 18px); opacity: 0; transform: rotate(2deg); }
}
@keyframes robot-vacuum {
  to { opacity: 0; transform: translate(-50%,-50%) scale(.18) rotate(12deg); }
}

@media (max-height:700px) {
  .robot-runner { bottom: calc(var(--scene-safe-bottom) + 50px); width: 102px; }
}