:root { color-scheme: light; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
/* Layout: one narrow column, a bubble over a square room, three meters, three round buttons.
   Look: a pale blue wall and oat floor so the cream cat reads, coffee-brown outlines like her drawings. */
:root {
  --page: #f3ebde;
  --wall: #d7e3ec;
  --wall-dot: #c5d5e2;
  --floor: #ecd8b8;
  --floor-line: #dcc39d;
  --rug: #f1c6be;
  --panel: #fffaf2;
  --ink: #54392f;
  --ink-soft: #8c6f63;
  --fish: #8fa3bf;
  --tan: #e7b48a;
  --heart: #e2897d;
  --sun: #f4b04a;
  --alert: #d9645a;
  --hole: #7d90a8;
  --font-display: 'ZCOOL KuaiLe', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --wobble: 20px 24px 22px 26px / 24px 20px 26px 22px;
}
html, body { height: 100%; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  padding-inline: 16px;
  padding-block: 12px 20px;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--fish); outline-offset: 3px; }

.app { max-width: 460px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; min-height: 100%; }

.top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.top h1 { font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: .04em; margin: 0; text-wrap: balance; }
.top .time { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-r { display: flex; align-items: center; gap: 10px; }
.coins { display: inline-flex; align-items: center; gap: 5px; padding: 2px 11px 2px 8px; background: var(--panel); border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--font-display); font-size: 16px; font-variant-numeric: tabular-nums; }
.coins { cursor: pointer; }
.coins svg { width: 18px; height: 18px; }
.coins.bump { animation: bump .5s ease-out; }
@keyframes bump { 40% { transform: scale(1.2); } }

/* ---------- room ---------- */
.stage {
  position: relative; width: 100%; aspect-ratio: 1 / .96; overflow: hidden;
  border: 2.5px solid var(--ink); border-radius: var(--wobble);
  background: var(--wall-bg);
  user-select: none; -webkit-user-select: none;
}
.app.shopping .stage { position: sticky; top: 8px; z-index: 20; }
.room-scene { position: absolute; inset: 0; background: var(--wall-bg); transform-origin: 0 0; touch-action: none; }
.stage.room-ready { touch-action: none; cursor: grab; }
.stage.room-ready .bubble { pointer-events: none; }
.stage.room-dragging { cursor: grabbing; }
.room-tools { display: flex; flex-direction: column; gap: 7px; }
.room-tool-row, .room-edit-row { display: flex; align-items: center; gap: 7px; }
.room-title { margin-right: auto; font-family: var(--font-display); font-size: 20px; }
.room-tools button, .room-tools select { min-height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: var(--panel); padding: 5px 10px; font: inherit; color: var(--ink); cursor: pointer; }
.room-tools button:disabled { opacity: .4; cursor: default; }
.room-tools .room-arrange { background: #e3ecf6; }
.room-tools .room-arrange[aria-pressed="true"] { background: #dceadf; }
.room-zoom { display: flex; align-items: center; gap: 3px; }
.room-zoom button { width: 44px; padding-inline: 0; font-size: 19px; }
.room-zoom output { width: 43px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.room-edit-row select { flex: 1; min-width: 0; width: 0; }
.room-edit-row button { flex: none; padding-inline: 8px; font-size: 13px; }
.room-editor { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--panel); border: 2px solid var(--ink-soft); border-radius: 16px; }
.room-editor select { font-size: 16px; }
.room-size-row { display: flex; align-items: center; gap: 6px; }
.room-size-row label { font-size: 12px; flex: 0 0 43px; text-align: center; }
.room-size-row output { display: block; font-variant-numeric: tabular-nums; }
.room-size-row button { flex: 0 0 44px; padding: 0; font-size: 20px; }
.room-size-row input { flex: 1; min-width: 0; width: 0; height: 44px; margin: 0; accent-color: var(--fish); touch-action: pan-y; }
.room-transform-row { flex-wrap: wrap; gap: 6px; }
.room-nudge { display: flex; flex: 1 0 100%; gap: 6px; }
.room-nudge button { flex: 1; min-width: 44px; font-size: 20px; }
.room-transform-row > button { flex: 1; }
.room-transform-row > button[aria-pressed="true"] { background: #dceadf; border-color: #53735e; }
@media (min-width: 380px) {
  .room-nudge { flex: 0 0 auto; gap: 3px; }
  .room-nudge button { padding: 0; }
  .room-transform-row > button { padding-inline: 3px; font-size: 12px; }
}
.room-tip { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.room-scene.arranging .catbox { pointer-events: none; opacity: .6; }
.room-scene.arranging .props { z-index: 5; }
.room-scene.arranging [data-room-item] { pointer-events: auto; cursor: move; outline: 2px dashed var(--ink-soft); outline-offset: 3px; z-index: 4; }
.room-scene.arranging [data-room-item].room-selected { outline: 3px solid var(--fish); z-index: 6; }
.room-scene.arranging [data-room-item] > * { pointer-events: none; }
.room-scene.arranging ~ .bubble { visibility: hidden; }
.room-ready .room-scene:not(.arranging) [data-room-item] { pointer-events: auto; cursor: pointer; }
.room-ready .room-scene:not(.arranging) [data-room-item] > * { pointer-events: none; }

/* wall papers (shared by the room and the shop swatches) */
[data-wall="dots"] { --wall-bg: radial-gradient(circle at 1px 1px, var(--wall-dot) 1.4px, transparent 1.6px) 0 0 / 22px 22px, var(--wall); }
[data-wall="stripe"] { --wall-bg: repeating-linear-gradient(90deg, #f8e9e1 0 18px, #f3d8d0 18px 36px); }
[data-wall="check"] { --wall-bg: linear-gradient(90deg, rgba(255,255,255,.4) 50%, transparent 50%) 0 0 / 30px 30px, linear-gradient(rgba(255,255,255,.4) 50%, transparent 50%) 0 0 / 30px 30px, #cde5d9; }
[data-wall="sakura"] { --wall-bg: radial-gradient(circle at 7px 7px, #f6c3cd 3px, transparent 3.6px) 0 0 / 30px 30px, radial-gradient(circle at 22px 21px, #f6c3cd 2px, transparent 2.6px) 0 0 / 30px 30px, #fbe8e7; }
[data-wall="night"] { --wall-bg: radial-gradient(circle at 6px 8px, #fff3c0 1.3px, transparent 1.8px) 0 0 / 40px 40px, radial-gradient(circle at 27px 25px, #fff 1px, transparent 1.5px) 0 0 / 40px 40px, linear-gradient(#3b4a6b, #5a6d92); }
.floor { position: absolute; inset: 63% 0 0 0; background: var(--floor); border-top: 2.5px solid var(--ink); }
.floor::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 46px, var(--floor-line) 46px 48px); opacity: .55; }
.rug { position: absolute; left: 50%; top: 71%; width: 58%; height: 14%; transform: translateX(-50%); }
[data-rug="pink"] { border-radius: 50%; background: var(--rug); border: 2px dashed color-mix(in srgb, var(--ink) 55%, transparent); }
[data-rug="cream"] { border-radius: 10px; background: repeating-linear-gradient(90deg, #fff3dc 0 14px, #f6e2bd 14px 28px); border: 2.5px solid var(--ink); }
[data-rug="berry"] { border-radius: 50%; background: radial-gradient(circle, #fff 2.4px, transparent 3px) 0 0 / 16px 16px, #e8807a; border: 2.5px solid var(--ink); }
[data-rug="dot"] { border-radius: 50%; background: radial-gradient(circle, #fff 2.4px, transparent 3px) 0 0 / 16px 16px, #8fa3bf; border: 2.5px solid var(--ink); }
[data-rug="rainbow"] { border-radius: 50%; background: radial-gradient(ellipse at center, #fff3dc 0 20%, #f4b04a 20% 38%, #e2897d 38% 56%, #8fa3bf 56% 74%, #9ccbb0 74% 100%); border: 2.5px solid var(--ink); }
.window { position: absolute; left: 6%; top: 8%; width: 25%; aspect-ratio: 1 / 1.1;
  border: 2.5px solid var(--ink); border-radius: 14px 14px 8px 8px; background: #f2f7fb; overflow: hidden; }
.window::before, .window::after { content: ""; position: absolute; background: var(--ink); }
.window::before { left: 50%; top: 0; bottom: 0; width: 2.5px; transform: translateX(-50%); }
.window::after { top: 50%; left: 0; right: 0; height: 2.5px; transform: translateY(-50%); }
.cloud { position: absolute; top: 18%; left: -40%; width: 44%; height: 16%; border-radius: 999px; background: #fff;
  animation: drift 26s linear infinite; }
@keyframes drift { to { left: 110%; } }
.window > * { position: absolute; z-index: 1; }
.window::before, .window::after { z-index: 2; }
.window > :not(.cloud) { display: none; }
[data-win="moon"] { background: radial-gradient(circle at 20% 24%, #fff 1px, transparent 1.7px), radial-gradient(circle at 30% 72%, #fff 1.2px, transparent 1.9px), radial-gradient(circle at 82% 80%, #fff 1px, transparent 1.7px), #3b4a6b; }
[data-win="moon"] .cloud { display: none; }
[data-win="moon"] .moon { display: block; left: 54%; top: 14%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: #fff3c4; box-shadow: inset -5px -2px 0 #f0d98d; }
[data-win="rain"] { background: #b7c4d2; }
[data-win="rain"] .cloud { background: #8d9bab; }
[data-win="rain"] .rain { display: block; inset: 0; background: linear-gradient(105deg, transparent 44%, rgba(255,255,255,.85) 45% 55%, transparent 56%) 0 0 / 12px 20px; animation: rainfall .55s linear infinite; }
@keyframes rainfall { to { background-position: 0 20px; } }
[data-win="pot"] .wpot { display: block; left: 20%; bottom: 0; width: 60%; height: 42%; z-index: 3; }
.wpot svg { display: block; width: 100%; height: 100%; }
[data-win="curtain"] .curtain { display: block; inset: 0; z-index: 3; pointer-events: none; }
.curtain::before, .curtain::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; background: repeating-linear-gradient(90deg, #f3b6bd 0 6px, #e99ba5 6px 12px); }
.curtain::before { left: 0; border-right: 2px solid var(--ink); border-radius: 0 0 40% 0; }
.curtain::after { right: 0; border-left: 2px solid var(--ink); border-radius: 0 0 0 40%; }

/* room props */
.props { position: absolute; inset: 0; pointer-events: none; }
.prop { position: absolute; }
.prop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.p-lamp { left: 2.5%; top: 58%; width: 11%; aspect-ratio: 4 / 9; }
.p-plant { right: 2.5%; top: 65%; width: 13%; aspect-ratio: 44 / 58; }
.p-lights { left: 0; top: .8%; width: 100%; aspect-ratio: 100 / 12; }
.p-yarn { left: 70%; top: 83%; width: 8%; aspect-ratio: 1; }
.p-cushion { left: 17%; top: 83%; width: 12%; aspect-ratio: 44 / 34; }
.p-frame { left: 5%; top: 40%; width: 12%; aspect-ratio: 40 / 48; }
.p-lights circle { animation: twinkle 2.4s ease-in-out infinite; }
.p-lights circle:nth-of-type(2n) { animation-delay: .8s; }
.p-lights circle:nth-of-type(3n) { animation-delay: 1.5s; }
@keyframes twinkle { 50% { opacity: .35; } }

.catbox { position: absolute; left: 29%; bottom: 22%; width: 42%; aspect-ratio: 503 / 402; transform-origin: 50% 100%; }
.catbtn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .16s ease-out; }
.cat-ground-shadow { position: absolute; z-index: 2; pointer-events: none; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(ellipse, #54392f30 0%, #54392f18 36%, transparent 72%); opacity: .4; filter: blur(1px); transition: opacity .16s; }
.cat-ground-shadow.lifted { opacity: .85; }
.stage:not(.room-ready) .cat-ground-shadow { display: none; }
.room-scene.arranging .cat-ground-shadow { opacity: .2; }
.cat { width: 100%; height: 100%; transform-origin: 50% 99%; }
.cat { position: relative; }
.cat img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.cat .cat-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.cat img, .cat .cat-canvas { transform-origin: 50% 99%; }
.cat img.pop, .cat .cat-canvas.pop { animation: pop .32s ease-out; }
.cat[data-pose="walkSide"] img, .cat[data-pose="walkSide"] .cat-canvas { transform: translateY(1.74%) scaleX(var(--walk-facing, 1)); }
.cat[data-pose="walkFront"] img, .cat[data-pose="walkFront"] .cat-canvas { transform: translateY(1.74%); }
.room-cat-walking .cat img, .room-cat-walking .cat .cat-canvas { animation: none; }
@keyframes pop { 0% { transform: scale(.9, 1.08); } 60% { transform: scale(1.05, .95); } 100% { transform: none; } }

/* Two-frame gestures: slow, small deformations keep the drawings soft. */
.cat[data-pose="ear"] { animation: ear-soft 2.4s ease-in-out infinite; }
.cat[data-pose="rub"] { animation: rub-soft 2.8s ease-in-out infinite; }
.cat[data-pose="chin"] { animation: chin-soft 2.8s ease-in-out infinite; }
.cat[data-pose="nose"] { animation: nose-soft 2.2s ease-in-out infinite; }
.cat[data-pose="paw"] { animation: paw-soft 2.8s ease-in-out infinite; }
.cat[data-pose="sniff"] { animation: sniff-soft 2.6s ease-in-out infinite; }
.cat[data-pose="watch"] { animation: watch-soft 3.2s ease-in-out infinite; }
.cat[data-pose="knead"] { animation: knead-soft 2.2s ease-in-out infinite; }
@keyframes ear-soft { 30% { transform: rotate(-1deg) scale(1.009,.994); } 70% { transform: rotate(.6deg); } }
@keyframes rub-soft { 30% { transform: translateX(-1.2%) rotate(-1deg) scale(1.012,.989); } 75% { transform: translateX(.8%) rotate(.7deg); } }
@keyframes chin-soft { 50% { transform: translateY(-.7%) scale(.995,1.007); } }
@keyframes nose-soft { 55% { transform: scale(.985,1.005) rotate(.5deg); } }
@keyframes paw-soft { 50% { transform: rotate(-.6deg) translateY(-.4%); } }
@keyframes sniff-soft { 45% { transform: rotate(-.8deg) scale(1.009,.99); } }
@keyframes watch-soft { 50% { transform: rotate(-.45deg) scale(1,1.006); } }
@keyframes knead-soft { 25% { transform: rotate(-.5deg) scale(1.008,.989); } 75% { transform: rotate(.5deg) scale(1.008,.989); } }
.cat.shake { animation: shake .4s linear; }
.room-cat-dragging .catbtn { transform: translateY(-12%); cursor: grabbing; }
.room-cat-dragging .cat { animation: none; transform: rotate(-1.5deg); }
/* Landing "duang-duang": squash on impact, stretch, a smaller squash (rebound), then settle. Timed with sound.js `land`. */
.catbtn.duang { transform-origin: 50% 100%; animation: duang-cat .72s .1s ease-in-out; }
.cat-ground-shadow.duang { animation: duang-shadow .72s .1s ease-in-out; }
@keyframes duang-cat { 0% { transform: scale(1.16, .8); } 22% { transform: scale(.94, 1.1); } 40% { transform: scale(1.08, .9); } 62% { transform: scale(.985, 1.03); } 100% { transform: none; } }
@keyframes duang-shadow {
  0% { transform: translate(-50%, -50%) scale(1.3, 1.4); opacity: .9; }
  22% { transform: translate(-50%, -50%) scale(.92, .9); }
  40% { transform: translate(-50%, -50%) scale(1.12, 1.15); }
  100% { transform: translate(-50%, -50%); }
}
@keyframes shake { 20% { transform: translateX(-2.5%); } 40% { transform: translateX(2.5%); } 60% { transform: translateX(-1.6%); } 80% { transform: translateX(1.6%); } }

.zzz { position: absolute; left: 60%; top: 10%; pointer-events: none; }
.zzz span { position: absolute; font-family: var(--font-display); color: var(--fish); font-size: 26px; opacity: 0; animation: zz 2.6s ease-in infinite; }
.zzz span:nth-child(2) { animation-delay: .85s; font-size: 20px; }
.zzz span:nth-child(3) { animation-delay: 1.7s; font-size: 15px; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 10px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -34px); } }

.bubble { position: absolute; z-index: 3; right: 5%; top: 5%; max-width: 56%; padding: 9px 14px;
  background: var(--panel); border: 2.5px solid var(--ink); border-radius: 18px 20px 18px 6px;
  font-size: 14px; line-height: 1.45; text-wrap: balance; }

.fx { position: absolute; z-index: 4; width: 26px; height: 26px; pointer-events: none; animation: rise 1s ease-out forwards; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -70px) scale(1); } }

/* ---------- rhythm hide-and-seek ---------- */
.hs { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 12px; }
.hs > .hs-bar, .hs > .rh-prog, .hs > .rh-info { flex-shrink: 0; }
.hs-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hs-score { font-family: var(--font-display); font-size: 20px; background: var(--panel); border: 2.5px solid var(--ink); border-radius: 16px; padding: 3px 14px; font-variant-numeric: tabular-nums; }
.hs-quit { border: 2.5px solid var(--ink); background: var(--panel); border-radius: 14px; padding: 5px 14px; font-size: 13.5px; cursor: pointer; }
.rh-lives { display: inline-flex; gap: 3px; padding: 3px 8px; background: var(--panel); border: 2px solid var(--ink); border-radius: 14px; }
.rh-lives svg { width: 19px; height: 19px; display: block; }
.rh-lives .off { opacity: .22; filter: grayscale(1); }
.rh-prog { height: 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--panel); overflow: hidden; }
.rh-fill { height: 100%; width: 0; background: var(--fish); }
.rh-judge { flex: 1; min-height: 34px; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-display); font-size: 27px; color: var(--ink); paint-order: stroke fill; -webkit-text-stroke: 6px var(--panel); }
.rh-judge.pop { animation: judgepop .36s ease-out; }
@keyframes judgepop { 0% { transform: scale(.6); opacity: 0; } 40% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.rh-info { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rh-info span { padding: 1px 10px; background: var(--panel); border: 2px solid var(--ink); border-radius: 12px; }
.rh-info span.beat { animation: beatpulse .18s ease-out; }
@keyframes beatpulse { 0% { transform: scale(1.14); } 100% { transform: scale(1); } }
.slots { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr)); gap: 8px; flex: 0 1 auto; min-height: 0;
  height: calc(var(--rows, 1) * 200px + (var(--rows, 1) - 1) * 8px); align-self: stretch; touch-action: none; }
.slots[data-rows="1"] { --rows: 1; } .slots[data-rows="2"] { --rows: 2; } .slots[data-rows="3"] { --rows: 3; }
.slot { position: relative; min-width: 0; min-height: 0; padding: 0; overflow: hidden; cursor: pointer; touch-action: none;
  border: 2.5px solid var(--ink); border-radius: 46% 46% 12px 12px / 30% 30% 12px 12px; background: var(--hole); box-shadow: inset 0 6px 0 rgba(0, 0, 0, .12); }
.slot[hidden] { display: none; }
.slot img { position: absolute; left: 50%; bottom: 3%; height: 92%; width: auto; max-width: none; pointer-events: none; will-change: transform; }
.slot.ok { border-color: var(--heart); animation: slotpop .28s ease-out; }
.slot.bad { border-color: var(--alert); background: color-mix(in srgb, var(--alert) 38%, var(--hole)); animation: slotshake .3s linear; }
@keyframes slotpop { 40% { transform: scale(1.07); } }
@keyframes slotshake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.app.rhmode .stage { aspect-ratio: auto; height: calc(100vh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 0; max-height: 720px; flex-shrink: 0; }
@supports (height: 100svh) { .app.rhmode .stage { height: calc(100svh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } }
.hs > .hs-bar { white-space: nowrap; }
@media (max-width: 360px) {
  .hs > .hs-bar { gap: 4px; }
  .hs .hs-score { padding-inline: 8px; font-size: 18px; }
  .hs .rh-lives { gap: 2px; padding-inline: 5px; }
  .hs .rh-lives svg { width: 16px; height: 16px; }
  .hs > .hs-bar .hs-quit { padding-inline: 8px; font-size: 12.5px; }
}
.stage.playing .window, .stage.playing .rug { opacity: .3; }
.stage.stacking .window, .stage.stacking .rug, .stage.stacking .floor { opacity: 0; }
.fx.txt { width: auto; height: auto; white-space: nowrap; font-family: var(--font-display); font-size: 21px; color: var(--ink);
  paint-order: stroke fill; -webkit-text-stroke: 5px var(--panel); }

.cq-cake-image { object-fit: contain; height: 100%; }

/* ---------- box stacking ---------- */
.sg { position: absolute; inset: 0; z-index: 5; }
.sg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; cursor: pointer; }
.sg-cat { transform-origin: 50% 98.8%; position: absolute; left: 0; top: 0; width: 100px; height: auto; aspect-ratio: 503 / 402; pointer-events: none; -webkit-user-drag: none; }
.sg .hs-bar { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; pointer-events: none; }
.sg .hs-bar > * { pointer-events: auto; }
.sg-hint { position: absolute; left: 0; right: 0; top: 22%; text-align: center; z-index: 2; pointer-events: none; font-size: 14px; }
.sg-hint span { display: inline-block; padding: 6px 14px; background: var(--panel); border: 2.5px solid var(--ink); border-radius: 16px; }
.sg-over { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(84, 57, 47, .3); }
.sg-card { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 6px; text-align: center; padding: 18px 16px 16px;
  background: var(--panel); border: 2.5px solid var(--ink); border-radius: var(--wobble); }
.sg-card h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 27px; text-wrap: balance; }
.sg-card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.sg-card .rew { font-family: var(--font-display); font-size: 21px; }
.sg-btns { display: flex; gap: 10px; margin-top: 8px; }
.sg-btns button { flex: 1; padding: 9px 4px; cursor: pointer; background: var(--panel); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 16px; }
.sg-btns button.main { background: #e3ecf6; }
.sg-btns button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ---------- cat cake shop ---------- */
.cq { position: absolute; inset: 0; z-index: 5; background-color: #f2e7d4;
  background-image: linear-gradient(rgba(84, 57, 47, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(84, 57, 47, .06) 1px, transparent 1px); background-size: 34px 34px; }
.stage.cqmode .window, .stage.cqmode .rug, .stage.cqmode .floor, .stage.cqmode .props { visibility: hidden; }
.cq-play { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 12px; }
.cq-play.idle .cq-bar, .cq-play.idle .cq-foot { visibility: hidden; }
.cq-bar { display: flex; align-items: center; gap: 8px; }
.cq-bar .hs-quit { margin-left: auto; }
.cq-chip.warn { border-color: var(--alert); color: var(--alert); }
.cq-chip { font-family: var(--font-display); font-size: 16px; background: var(--panel); border: 2.5px solid var(--ink); border-radius: 14px; padding: 2px 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cq-shop { position: relative; flex: none; height: clamp(62px, 13vh, 92px); }
.cq-shop svg { width: 100%; height: 100%; display: block; }
.cq-door { position: absolute; left: 50%; bottom: 0; width: 30px; height: 30px; transform: translateX(-50%); pointer-events: none; }
.cq-field { position: relative; flex: 1; min-height: 0; }
.cq-lane { position: absolute; border: 2.5px dashed rgba(84, 57, 47, .3); border-radius: 22px 22px 12px 12px; background: rgba(255, 250, 242, .6); cursor: pointer; touch-action: manipulation;
  transition: background .15s, border-color .15s; }
.cq-lane.can { border-style: solid; border-color: var(--fish); background: rgba(143, 163, 191, .24); }
.cq-lane.from { border-style: solid; border-color: var(--heart); background: rgba(226, 137, 125, .16); }
.cq-lane.shake { animation: slotshake .3s linear; }
.cq-cat { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; --x: 0px; --y: 0px;
  transform: translate(var(--x), var(--y)) translateY(var(--lift, 0px)) scale(var(--s, 1)); transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); will-change: transform; }
.cq-cat .in { width: 100%; height: 100%; }
.cq-cat img { width: 100%; height: 100%; display: block; object-fit: contain; -webkit-user-drag: none; }
.cq-cat.sel { --lift: -10px; --s: 1.22; z-index: 3; }
.cq-cat.sel .in { animation: catwob .5s ease-in-out infinite alternate; }
@keyframes catwob { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.cq-cat.leave { --s: .35; opacity: 0; z-index: 5; transition: transform .55s cubic-bezier(.5, 0, .8, .4), opacity .5s ease-in; }
.cq-pop { position: absolute; z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%); animation: cakepop 1.6s ease-out forwards; }
.cq-pop .pc { width: 58px; height: 58px; display: block; }
.cq-pop svg, .cq-pop .cq-cake-image { width: 100%; height: 100%; display: block; }
.cq-pop b { font-family: var(--font-display); font-weight: 400; font-size: 15px; white-space: nowrap; padding: 1px 10px; background: var(--panel); border: 2px solid var(--ink); border-radius: 12px; }
.cq-pop i { font-style: normal; color: var(--alert); }
@keyframes cakepop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); } 30% { transform: translate(-50%, -80%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } }
.cq-tip { position: absolute; left: 50%; bottom: 2px; z-index: 4; width: max-content; transform: translate(-50%, 8px); max-width: calc(100% - 32px); padding: 5px 14px; text-align: center; font-size: 13px; line-height: 1.35; background: var(--panel); border: 2.5px solid var(--ink); border-radius: 14px; pointer-events: none; opacity: 0; transition: opacity .18s, transform .18s; }
.cq-tip.on { opacity: 1; transform: translate(-50%, 0); }
.cq-foot { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.cq-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; cursor: pointer; background: var(--panel); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 15px; white-space: nowrap; }
.cq-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.cq-btn:disabled { opacity: .45; cursor: default; box-shadow: 0 3px 0 var(--ink-soft); border-color: var(--ink-soft); }
.cq-fish { width: 15px; height: 15px; flex: none; }
.cq-got { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-height: 36px; overflow: hidden; }
.cq-mini { position: relative; width: 30px; height: 30px; display: block; }
.cq-mini svg, .cq-mini .cq-cake-image { width: 100%; height: 100%; display: block; }
.cq-mini i { position: absolute; right: -3px; bottom: -3px; font-style: normal; font-size: 10px; line-height: 1.3; background: var(--panel); border: 1.5px solid var(--ink); border-radius: 8px; padding: 0 3px; }
.cq-mini.big { width: 40px; height: 40px; }
.cq-scroll { max-height: 100%; overflow: auto; }
.cq-menucard { max-width: 340px; }
.cq-lvs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 4px; }
.cq-lvbtn { display: flex; flex-direction: column; align-items: stretch; gap: 1px; text-align: left; padding: 5px 9px 5px; min-width: 0; cursor: pointer; background: var(--panel); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); }
.cq-lvbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.cq-lvbtn:disabled { opacity: .5; cursor: default; box-shadow: 0 3px 0 var(--ink-soft); border-color: var(--ink-soft); }
.cq-lvbtn .nm { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); font-size: 15px; line-height: 1.25; white-space: nowrap; }
.cq-lvbtn .nm b { font-weight: 400; font-size: 19px; }
.cq-lvbtn .st { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.cq-lvbtn em { flex: 0 0 100%; font-style: normal; font-size: 10.5px; color: var(--alert); line-height: 1.2; }
.cq-lvbtn small { margin-left: auto; padding-left: 4px; font-size: 10.5px; color: var(--ink-soft); }
.cq-lvbtn .st i, .cq-stars span { font-style: normal; color: #ddd0bd; }
.cq-lvbtn .st i.on, .cq-stars span.on { color: var(--sun); }
.cq-stars { font-size: 36px; line-height: 1.1; letter-spacing: 4px; }
.cq-stars span.on { -webkit-text-stroke: 1.5px var(--ink); animation: starpop .5s ease-out backwards; }
.cq-stars span:nth-child(2).on { animation-delay: .12s; } .cq-stars span:nth-child(3).on { animation-delay: .24s; }
@keyframes starpop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
.cq-wcakes small { display: block; font-size: 12px; color: var(--ink-soft); }
.cq-wcakes div { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cq-bookcard { max-width: 340px; }
.cq-bookgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0; }
.cq-cake { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px 5px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; min-width: 0; }
.cq-cake .cv { width: 100%; max-width: 64px; aspect-ratio: 1; display: block; }
.cq-cake .cv svg, .cq-cake .cv .cq-cake-image { width: 100%; display: block; }
.cq-cake b { font-size: 11px; font-weight: 700; line-height: 1.25; }
.cq-cake small { font-size: 10.5px; color: var(--ink-soft); }
.cq-cake.lock .cv svg, .cq-cake.lock .cv .cq-cake-image { filter: brightness(0); opacity: .38; }
.cq-sell { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; padding: 1px 5px; font-size: 10.5px; cursor: pointer; background: var(--panel); border: 2px solid var(--ink); border-radius: 9px; white-space: nowrap; }
.cq-sell:disabled { opacity: .4; cursor: default; }
.cq-sell .cq-fish { width: 11px; height: 11px; }
.cq-note { font-size: 11px !important; }

/* ---------- meters ---------- */
.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.meter { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.meter .name { font-size: 13px; display: flex; justify-content: space-between; gap: 6px; }
.meter .num { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.track { height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--panel); overflow: hidden; }
.fill { height: 100%; width: 50%; border-radius: 999px; background: var(--c); transition: width .5s ease, background-color .3s; }
.meter[data-low="1"] .fill { background: var(--alert); }
.meter[data-low="1"] .name b { color: var(--alert); }
.name b { font-weight: 700; }

/* ---------- buttons ---------- */
.actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 2px 9px; cursor: pointer;
  background: var(--panel); border: 2.5px solid var(--ink); border-radius: var(--wobble); box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-display); font-size: 15px; letter-spacing: .02em; white-space: nowrap; transition: transform .08s, box-shadow .08s; }
.act svg { width: 28px; height: 28px; }
.act:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.act[aria-pressed="true"] { background: #e3ecf6; }
.act:disabled { opacity: .45; cursor: default; box-shadow: 0 4px 0 var(--ink-soft); border-color: var(--ink-soft); }
.act.nudge { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-3px); } }
.hint { margin: 0; text-align: center; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- save code ---------- */
.linkbtn { align-self: center; padding: 4px 8px; background: none; border: 0; cursor: pointer; font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: rgba(84, 57, 47, .42); }
.modal-card { width: 100%; max-width: 400px; max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--panel); border: 2.5px solid var(--ink); border-radius: var(--wobble); }
.modal-card h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.modal-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.modal-card label { font-size: 13px; font-weight: 700; }
.modal-card textarea { width: 100%; padding: 8px 10px; resize: none; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 12px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.modal-card .sg-btns { margin-top: 2px; }
.modal-msg { min-height: 1.4em; color: var(--ink); }

/* ---------- shop ---------- */
.shopbtn { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; cursor: pointer;
  background: var(--panel); border: 2.5px solid var(--ink); border-radius: var(--wobble); box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; text-align: left; }
.shopbtn svg { width: 26px; height: 26px; flex: none; }
.shopbtn small { margin-left: auto; font-family: var(--font-body); font-size: 12px; letter-spacing: 0; color: var(--ink-soft); }
.shopbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.shopbtn[data-new="1"]::after { content: "新"; position: absolute; top: -9px; right: 10px; padding: 0 8px; font-family: var(--font-display); font-size: 13px;
  background: var(--heart); color: var(--panel); border: 2px solid var(--ink); border-radius: 999px; }
.shop { display: flex; flex-direction: column; gap: 10px; }
.shop-head { display: flex; align-items: center; gap: 10px; }
.shop-head h2 { margin: 0; margin-right: auto; font-family: var(--font-display); font-weight: 400; font-size: 23px; letter-spacing: .04em; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
.tabs .tab { flex: 0 0 auto; white-space: nowrap; padding-inline: 12px; }
.tab { padding: 6px 0; cursor: pointer; background: var(--panel); border: 2px solid var(--ink); border-radius: 14px; font-family: var(--font-display); font-size: 15px; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--panel); }
.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 5px 7px; cursor: pointer;
  background: var(--panel); border: 2px solid var(--ink); border-radius: 16px; }
.item[aria-pressed="true"] { outline: 3px solid var(--fish); outline-offset: 1px; }
.item[data-eq="1"] { border-color: var(--heart); }
.item .nm { font-size: 13px; line-height: 1.2; text-align: center; }
.item .st { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.item[data-eq="1"] .st { color: var(--heart); font-weight: 700; }
.item .st svg { width: 13px; height: 13px; }
.sw { position: relative; width: 100%; aspect-ratio: 1.4; overflow: hidden; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 10px; }
.sw-wall { background: var(--wall-bg); }
.sw-win, .sw-prop { background: var(--wall); }
.sw-rug { background: var(--floor); }
.sw .rug { position: relative; left: auto; top: auto; transform: none; width: 78%; height: 46%; }
.sw .window { position: relative; left: auto; top: auto; width: 46%; }
.sw .prop { position: static; height: auto; aspect-ratio: auto; }
.sw .p-lamp { width: 17px; } .sw .p-plant { width: 28px; } .sw .p-lights { width: 82%; } .sw .p-yarn { width: 26px; } .sw .p-cushion { width: 38px; } .sw .p-frame { width: 27px; }
.sw .prop svg { width: 100%; height: auto; }
.buy { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 14px; background: var(--panel); border: 2.5px solid var(--ink); border-radius: var(--wobble); }
.buy-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.buy-info b { font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.buy-info span { font-size: 12.5px; color: var(--ink-soft); }
.buybtn { flex: none; display: inline-flex; align-items: center; gap: 4px; min-width: 88px; justify-content: center; padding: 9px 12px; cursor: pointer; background: #e3ecf6; border: 2.5px solid var(--ink); border-radius: 16px;
  box-shadow: 0 3px 0 var(--ink); font-family: var(--font-display); font-size: 16px; }
.buybtn svg { width: 15px; height: 15px; }
.buybtn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.buybtn:disabled { opacity: .5; cursor: default; box-shadow: 0 3px 0 var(--ink-soft); border-color: var(--ink-soft); }

@media (max-width: 400px) { .cq-chip { font-size: 14.5px; padding: 2px 8px; } .cq-bar { gap: 6px; } }
@media (max-width: 340px) { .top h1 { font-size: 24px; } .act { font-size: 13px; } .top .time { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cat, .cat img.pop, .cat .cat-canvas.pop, .cloud, .zzz span, .act.nudge, .catbtn.duang, .cat-ground-shadow.duang { animation: none !important; }
  .zzz span { opacity: .8; }
  .fx { animation-duration: .01s; }
}


/* 40-level cake shop: fixed hidden identities, gentle reveal. */
.cq-blind-note { flex: none; margin: 0; padding: 7px 10px; border-radius: 10px; background: #fff5e7; color: #795944; font-size: 12px; line-height: 1.4; text-align: center; }
.cq-blind-note[hidden] { display: none; }
.cq-covered .in svg { width: 100%; height: 100%; display: block; }
.cq-covered.sel .in { animation: catwob .5s ease-in-out infinite alternate; }
.cq-lane:focus-visible { outline: 3px solid #a77757; outline-offset: 3px; }
.cq-chapter { margin: 15px 0 3px; padding: 4px 2px; font-size: 14px; font-weight: 400; color: #795944; }
.cq-menu-note { font-size: 12px; color: #795944; background: #f4e8d5; padding: 9px 11px; border-radius: 12px; }
.cq-foot .cq-btn { min-height: 42px; }

/* Rhythm game: a level select page, then only the boxes a level needs (3 = one big row, 6 = two rows, 9 = three rows). */
.house-app .hs { background: radial-gradient(ellipse at 50% 10%, #fff9ed 0%, #f0e2cb 65%); gap: 12px; }
#hs > .hs-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.rh-level { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; font: 15px var(--font-display); color: #684a36; }
.rh-right { display: inline-flex; align-items: center; gap: 5px; }
.rh-score { min-width: 2.4em; text-align: right; font-size: 12px; color: #7f624c; font-variant-numeric: tabular-nums; }
.house-app .rh-judge { flex: 0 0 42px; min-height: 42px; font-size: 23px; }
.house-app .rh-prog { height: 10px; border: 1.5px solid #c3ab91; background: #fff8ea; }
.house-app .rh-prog[hidden] { display: none; }
.house-app .rh-fill { background: #b0c7aa; transition: width .12s linear; }
.house-app .slots { grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr)); flex: 1 1 0; height: auto; max-height: 420px; margin: auto 0; gap: 13px 10px; padding: 10px 2px 4px; }
.house-app .slots[data-rows="2"] { max-height: 320px; }
.house-app .slots[data-rows="1"] { flex: 0 0 auto; height: min(200px, 34vh); gap: 10px 8px; }
.house-app .slot { isolation: isolate; border: 2px solid #8c6950; border-radius: 12px 12px 16px 16px; background: linear-gradient(#bb9470, #9c7355); box-shadow: inset 0 7px 0 #72533a33, 0 3px 0 #c5ac8d; }
.house-app .slot::before { content: ''; position: absolute; z-index: 2; left: -2px; right: -2px; top: -1px; height: 10%; border-bottom: 2px solid #8c6950; background: #e4c6a2; transform: skewX(-3deg); transform-origin: 50% 100%; }
.house-app .slot::after { content: ''; position: absolute; z-index: 2; inset: 62% -2px -2px; border-top: 2px solid #8c6950; background: linear-gradient(90deg, #dfbc94 43%, #f5dfb8 43%, #f5dfb8 58%, #dfbc94 58%); border-radius: 0 0 12px 12px; box-shadow: inset 0 4px 0 #efcfaa; }
.house-app .slot img { z-index: 1; bottom: 13%; width: 96%; height: auto; max-width: none; filter: drop-shadow(0 2px 0 #54392f28); }
.house-app .slot:active:not(:disabled) { border-color: #bd8970; }
.house-app .slot.ok { border-color: #b8876c; animation: rh-box-soft .22s ease-out; }
.house-app .slot.ok img { animation: rh-cat-soft .22s ease-out; }
.house-app .slot.bad { border-color: #a67460; }
/* 预告：下一拍有猫的箱子，盖子先轻轻抖一下（约 0.25 秒） */
.house-app .slot.wiggle::before { animation: rh-lid .25s ease-in-out; }
.house-app .slot.wiggle { animation: rh-box-nudge .25s ease-in-out; }
@keyframes rh-lid { 0%, 100% { transform: skewX(-3deg); } 25% { transform: translateY(-6px) rotate(-5deg) skewX(-3deg); background: #f2dcbc; } 55% { transform: translateY(-3px) rotate(4deg) skewX(-3deg); background: #f2dcbc; } 80% { transform: translateY(-1px) rotate(-1.5deg) skewX(-3deg); } }
@keyframes rh-box-nudge { 25% { translate: -2px 0; } 60% { translate: 2px 0; } }

/* 纸片猫：插在小棍上、颜色平平的纸片、右上角折角，升起来以后左右摇晃 ±6° */
.rh-paper { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateY(100%); will-change: transform; }
.rh-sway { position: absolute; left: 16%; right: 16%; top: 4%; bottom: 0; transform-origin: 50% 100%; }
.slot.fake .rh-sway { animation: paper-sway .9s ease-in-out infinite alternate; }
.slot.fake.bad .rh-sway { animation-play-state: paused; }
@keyframes paper-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.rh-stick { position: absolute; left: calc(50% - 2.5px); width: 5px; top: 36%; bottom: -6%; border-radius: 2px; background: #9b6b44; box-shadow: inset -1.5px 0 0 #7a5034; }
.rh-half { position: absolute; left: 0; right: 0; top: 0; height: 40%; overflow: hidden; border: 1.5px solid #cdbfac; border-radius: 4px; background: #fbf8f1; box-shadow: 0 2px 0 #54392f26; }
.rh-half::before { content: ''; position: absolute; inset: 0; background: url(assets/peekc.webp) 50% 30% / 92% auto no-repeat; filter: grayscale(1) brightness(1.12) contrast(.8); }
.rh-half.l { clip-path: polygon(0 0, 52% 0, 47% 18%, 54% 36%, 46% 54%, 53% 72%, 47% 88%, 51% 100%, 0 100%); }
.rh-half.r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 51% 100%, 47% 88%, 53% 72%, 46% 54%, 54% 36%, 47% 18%); }
.rh-half.r::after { content: ''; position: absolute; top: -1px; right: -1px; width: 24%; aspect-ratio: 1; background: linear-gradient(225deg, #a98060 0 50%, #ddd2c2 50% 100%); border-bottom-left-radius: 3px; box-shadow: -1px 1px 1.5px #54392f40; }
.slot.bad .rh-half.l { animation: rh-tear-l .42s ease-in forwards; }
.slot.bad .rh-half.r { animation: rh-tear-r .42s ease-in forwards; }
.slot.bad .rh-stick { animation: rh-fade .42s ease-in forwards; }
@keyframes rh-tear-l { 20% { transform: translateX(-2px) rotate(-3deg); } 100% { transform: translate(-32%, 30%) rotate(-26deg); opacity: 0; } }
@keyframes rh-tear-r { 20% { transform: translateX(2px) rotate(3deg); } 100% { transform: translate(32%, 30%) rotate(26deg); opacity: 0; } }
@keyframes rh-fade { to { opacity: 0; } }
/* assets/peek-paper.webp 存在时（阿琳画的纸片猫）：用这张图代替 CSS 纸片，小棍和摇晃保留 */
.hs.paper-art .rh-half { height: 56%; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hs.paper-art .rh-half::before { background: url(assets/peek-paper.webp) 50% 0 / contain no-repeat; filter: none; }
.hs.paper-art .rh-half.r::after { display: none; }
.hs.paper-art .rh-stick { top: 50%; }

/* 箱子上的反馈：点中 / 溜走 / 纸片 / 空的 */
.rh-impact { position: absolute; z-index: 4; top: 10%; right: 6%; color: #fff2ac; font-size: 26px; opacity: 0; pointer-events: none; }
.slot.ok .rh-impact { animation: rh-spark .22s ease-out; }
.rh-mark { position: absolute; z-index: 4; left: 0; right: 0; top: 30%; font: 15px var(--font-display); color: #684a36; text-shadow: 0 1px 0 #fff8e8, 1px 0 0 #fff8e8, -1px 0 0 #fff8e8, 0 -1px 0 #fff8e8; opacity: 0; pointer-events: none; }
.slot.ok .rh-mark { animation: rh-label .65s ease-out forwards; }
.slot.bad .rh-mark { color: #a0503c; animation: rh-label .72s ease-out forwards; }
.slot.miss .rh-mark { top: 22%; color: #7d6a5c; animation: rh-label .72s ease-out forwards; }
.slot.empty .rh-mark { top: 36%; font-size: 13px; color: #8f7866; animation: rh-label-soft .56s ease-out forwards; }
.rh-smoke { position: absolute; z-index: 3; left: 27%; width: 46%; top: 40%; aspect-ratio: 1.3; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 28% 62%, #f4eee5 0 21%, transparent 22%), radial-gradient(circle at 54% 42%, #ece4d8 0 25%, transparent 26%), radial-gradient(circle at 76% 60%, #f4eee5 0 19%, transparent 20%), radial-gradient(circle at 50% 74%, #e6ddcf 0 18%, transparent 19%); }
.slot.miss .rh-smoke { animation: rh-smoke .72s ease-out; }
.house-app .slot.miss { animation: rh-dim .72s ease-out; }
@keyframes rh-smoke { 0% { opacity: 0; transform: translateY(25%) scale(.5); } 25% { opacity: .95; } 100% { opacity: 0; transform: translateY(-60%) scale(1.15); } }
@keyframes rh-dim { 0%, 55% { filter: brightness(.76) saturate(.8); } 100% { filter: none; } }
@keyframes rh-box-soft { 30% { scale: 1.035 .98; } 70% { scale: .995 1.015; } }
@keyframes rh-cat-soft { 25% { scale: 1.1 .87; } 65% { scale: .95 1.08; } }
@keyframes rh-spark { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(5px,-10px) scale(1.25); } }
@keyframes rh-label { 0% { opacity: 0; transform: translateY(5px) scale(.9); } 18% { opacity: 1; transform: translateY(-3px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-7px); } }
@keyframes rh-label-soft { 0% { opacity: 0; } 25% { opacity: .6; } 70% { opacity: .6; } 100% { opacity: 0; } }
/* 连击 10 / 20 / 30：箱子区域背后闪一圈淡淡的光 */
.slots::before { content: ''; position: absolute; z-index: -1; inset: -16px -10px; border-radius: 30px; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, #fff4c2 0%, #ffe7a066 48%, transparent 72%); }
.slots.glow::before { animation: rh-glow .9s ease-out; }
@keyframes rh-glow { 0% { opacity: 0; transform: scale(.94); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
.house-app .rh-info { margin-top: auto; justify-content: center; color: #7f624c; }
/* 第 1 关倒数时的小提示 */
.rh-tip { position: absolute; z-index: 2; left: 50%; top: 27%; transform: translate(-50%, -50%); white-space: nowrap; padding: 10px 18px; border-radius: 18px;
  background: #fffaf0f2; border: 1.5px solid #d8c4ab; box-shadow: 0 4px 16px #5b403424; font: 18px var(--font-display); color: #684a36; text-align: center; pointer-events: none; animation: judgepop .36s ease-out; }
/* 选关页 */
.rh-menucard { max-width: 340px; max-height: 100%; overflow-y: auto; }
.rh-levels { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; }
.rh-lv { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 50px; padding: 8px 12px; text-align: left; color: inherit; font: inherit;
  background: #fffaf2; border: 1px solid #d5c4b2; border-radius: 14px; box-shadow: 0 2px 0 #d5c4b2; cursor: pointer; }
.rh-lv:active:not(:disabled) { translate: 0 2px; box-shadow: none; }
.rh-lv:disabled { cursor: default; opacity: .6; box-shadow: none; background: #f3eadf; }
.rh-lv .no { font: 400 20px var(--font-display); text-align: center; color: #8c6950; }
.rh-lv .nm { font: 16px var(--font-display); color: #54392f; }
.rh-lv .st { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.rh-lv .stars { font-size: 17px; letter-spacing: 1px; line-height: 1; }
.rh-lv .stars i { font-style: normal; color: #ddd0bd; }
.rh-lv .stars i.on { color: var(--sun); -webkit-text-stroke: .8px #8c6950; }
.rh-lv .lock { font-size: 15px; line-height: 1; }
.rh-lv small { font-size: 11px; color: var(--ink-soft); }
.rh-endless { background: #eef2e6; }
/* 第一次进第 3 关：真奶团和纸片猫并排 */
.rh-papercard { max-width: 320px; }
.rh-demo { display: flex; justify-content: center; gap: 14px; margin: 4px 0 2px; }
.rh-demo figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); }
.rh-demo .slot { position: relative; width: 104px; height: 124px; cursor: default; }
.rh-demo .slot img { transform: translate(-50%, 0); }
.rh-demo .slot .rh-paper { transform: none; }
.rh-resultcard { max-width: 320px; }
.rh-stars[hidden] { display: none; }
.rh-note { color: #8a5a3c !important; font-size: 12.5px !important; white-space: pre-line; }
.rh-btns button { padding-inline: 2px; font-size: 13.5px; }
.cq-chapter { grid-column: 1 / -1; }
.cq-lvbtn .nm { white-space: normal; align-items: flex-start; }

.cq-challenges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 3px 0 8px; }
.cq-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 10px; border: 2px solid #795944; border-radius: 14px; background: #f0ddc4; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #795944; }
.cq-mode:nth-child(2) { background: #e2e9d8; }
.cq-mode b { font: 18px var(--font-display); }
.cq-mode small { font-size: 11px; line-height: 1.4; }
.cq-mode span { font-size: 10.5px; opacity: .7; }
.cq-mode:active { translate: 0 2px; box-shadow: 0 1px 0 #795944; }
.cq-clock[hidden] { display: none; }
.cq-clock { min-width: 48px; text-align: center; padding-inline: 6px; }
.cq-clock.warn { background: #f5d9c8; }
.cq-cat.leave { transition-duration: .48s; }
.cq-blind-note { text-wrap: balance; }