:root{color-scheme:light;--cream:#faf2e2;--paper:#fff9ec;--ink:#514b3c;--muted:#92816a;--teal:#416f66;--edge:#d9c8a8;--accent:#b77b44;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Georgia,'Times New Roman','Microsoft YaHei',serif}
*{box-sizing:border-box}html{min-width:280px;min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 82% 20%,#fffae9 0,transparent 45%),linear-gradient(155deg,#f8f0df,#ecddc1);color:var(--ink)}body[data-scene=garden]{background:radial-gradient(ellipse at 80% 15%,#f8f7db,transparent 48%),linear-gradient(150deg,#edf1dd,#e0e6ca)}body[data-scene=seaside]{background:radial-gradient(ellipse at 80% 20%,#fcf6df,transparent 45%),linear-gradient(155deg,#e6efea,#cddfd9)}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}a{color:var(--teal)}button:focus-visible,a:focus-visible{outline:3px solid #cb9459;outline-offset:4px}button svg,a svg{width:22px;height:22px;vertical-align:middle}button[hidden],[hidden]{display:none!important}.topbar{max-width:1100px;margin:auto;padding:calc(20px + var(--safe-top)) max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;gap:14px}.brand{font-size:26px;letter-spacing:4px;font-weight:bold;text-decoration:none;display:flex;align-items:center;gap:16px;min-height:44px}.brand small{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:normal}.header-actions{display:flex;align-items:center;gap:8px}.icon-button{width:44px;height:44px;border:1px solid var(--edge);background:#fff9ebaa;border-radius:50%;color:var(--teal);padding:9px}.icon-button svg{width:23px;height:23px}.quiet,.text-button{border:0;background:none;min-height:44px;min-width:44px;padding:10px 12px;font-size:13px;color:var(--teal)}.quiet:hover,.text-button:hover{text-decoration:underline}.primary,.secondary{display:inline-flex;gap:15px;justify-content:center;align-items:center;border-radius:9px;min-height:48px;padding:12px 20px;text-decoration:none;font-size:15px;border:1px solid var(--teal)}.primary{background:var(--teal);color:#fff8e5;box-shadow:0 3px 0 #244e4930}.secondary{background:#fffaf080;color:var(--teal);border-color:#c2c5ad}.primary:hover{background:#355f57}.secondary:hover{background:#fffaf1}.primary:disabled,.secondary:disabled{opacity:.5}.eyebrow{font:10px/1.6 system-ui,sans-serif;letter-spacing:2.4px;color:var(--muted);margin:0 0 10px}.fineprint{font:12px/1.8 system-ui,sans-serif;color:var(--muted)}h1,h2,p{margin-top:0}h1{font-size:46px;line-height:1.3;letter-spacing:1px;margin-bottom:20px;font-weight:600}h2{font-size:23px;font-weight:600}.description{font-size:16px;line-height:2.05;color:#7f725f}.hero{max-width:920px;margin:35px auto 20px;min-height:540px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding:20px 30px}.hero h1 em{font-style:normal;color:var(--accent)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 18px}.hero-art{position:relative;display:flex;min-height:350px;flex-direction:column;align-items:center;justify-content:center;border-radius:48% 48% 9px 9px;background:linear-gradient(95deg,transparent 49.5%,#e4ce9c50 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,#e4ce9c50 50%,transparent 50.5%),linear-gradient(#fff7d6,#f5e7c1);border:1px solid #decda9;box-shadow:0 18px 25px #9d7c4520,inset 0 0 0 10px #fff6dd8a}.hero-art:after{content:'';position:absolute;bottom:45px;left:15%;right:15%;height:20px;border-radius:50%;background:#bc9c6930;filter:blur(5px)}.cat{width:150px;height:150px;flex-shrink:0;background:url('./assets/xiaoju-expressions-v2.webp') 0 0/300% 200% no-repeat;position:relative;z-index:1}.cat[data-mood=thinking]{background-position:50% 0}.cat[data-mood=surprise]{background-position:100% 0}.cat[data-mood=sad]{background-position:0 100%}.cat[data-mood=celebrate]{background-position:50% 100%}.hero-art>.cat{width:275px;height:275px}.little-note{font-size:12px;color:#a08c67;letter-spacing:1px;margin:0;z-index:1}.collection{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.collection span{display:flex;gap:5px;align-items:center;font-size:11px;color:#927e62}.collection svg{width:25px;height:25px}.collection .earned{color:var(--teal)}main{padding:0 max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left));min-height:calc(100svh - 150px)}footer{max-width:1060px;margin:auto;padding:20px 24px calc(20px + var(--safe-bottom));display:flex;justify-content:space-between;gap:20px;font:9px/1.5 system-ui,sans-serif;letter-spacing:1px;color:#a1937a}footer span{letter-spacing:1.2px}.level-page{max-width:850px;margin:30px auto}.level-page h1{font-size:34px}.scene-section{margin:28px 0}.scene-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.scene-heading h2{font-size:20px}.scene-heading span{font-size:11px;color:var(--muted)}.level-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.level-button{border:1px solid var(--edge);border-radius:12px;background:#fffaedbb;min-height:120px;display:flex;align-items:center;flex-direction:column;padding:12px;gap:5px;box-shadow:0 3px 0 #9c784d16}.level-button:disabled{opacity:.46}.level-number{font-size:28px;color:var(--accent)}.level-name{font-size:12px}.stars{height:15px;font-size:11px;color:var(--accent)}.select-footer{display:flex;justify-content:space-between;margin-top:25px;gap:10px}.game-heading{max-width:850px;margin:12px auto 18px;text-align:center}.game-heading .eyebrow{margin-bottom:5px}.game-heading h1{font-size:27px;line-height:1.3;margin-bottom:5px}.game-heading p:last-child{font-size:12px;color:var(--muted);margin:0}.game-layout{max-width:940px;margin:auto;display:grid;grid-template-columns:minmax(0,550px) 230px;justify-content:center;align-items:center;gap:35px}.board-shell{background:#fff8e8cc;border:1px solid #d5bd96;border-radius:22px;padding:16px;box-shadow:0 5px 0 #ac8b5512,0 14px 28px #997b4310}.goalbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 5px}.goals{display:flex;align-items:center;gap:9px;font:12px/1.5 system-ui,sans-serif}.goals>svg{width:36px;height:36px}.goals b{display:block;font:600 20px/1.2 Georgia,serif;color:var(--teal)}.steps{text-align:right;border-left:1px solid var(--edge);padding-left:18px;min-width:75px}.steps strong{font-size:29px;line-height:1;color:var(--accent)}.steps small{display:block;font:10px/1.6 system-ui,sans-serif;color:var(--muted)}.board{--cols:4;--rows:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:9px;touch-action:pinch-zoom}.memory-card{position:relative;min-width:0;height:88px;border:1px solid #b6b9a0;border-radius:11px;padding:4px;color:#f7e6bd;background:repeating-linear-gradient(45deg,#ffffff05 0 1px,transparent 1px 10px),linear-gradient(145deg,#678d7e,#416e65);box-shadow:0 3px 0 #31584e45,inset 0 0 0 4px #f9e9c016;display:flex;align-items:center;justify-content:center;transition:background-color .15s,transform .12s,opacity .15s}.memory-card:hover:not(:disabled){transform:translateY(-1px)}.memory-card:active:not(:disabled){transform:scale(.96)}.memory-card svg{width:52px;height:52px;max-height:90%;max-width:82%;pointer-events:none;filter:drop-shadow(0 2px 1px #283a2914)}.memory-card:not(.revealed) svg{width:41px;opacity:.8}.memory-card.revealed{background:#fff9eb;color:var(--ink);border-color:#d7c3a2;box-shadow:0 3px 0 #9b7f4c24,inset 0 0 0 3px #fffcf5}.memory-card.selected{outline:2px solid #ce995a;outline-offset:1px}.memory-card.matched{background:#e8edda;border-color:#bdc7a7;box-shadow:none;opacity:.76}.memory-card.matched:after{content:'✓';position:absolute;right:5px;top:3px;color:#5a897b;font:11px system-ui}.board-help{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:44px;font:11px/1.6 system-ui,sans-serif;color:var(--muted)}#peek{font:12px system-ui;min-height:44px;min-width:110px;border:0;background:none;color:var(--teal);padding:8px}#peek:disabled{opacity:.45}.look-actions{display:flex;align-items:center;justify-content:space-between;margin-top:10px;min-height:44px;font:12px/1.5 system-ui;color:var(--teal)}.look-actions button{font-size:12px;min-height:44px;padding:8px 12px}.companion{display:flex;align-items:center;flex-direction:column;gap:14px}.companion .cat{width:155px;height:155px}.bubble{font:13px/1.9 system-ui,sans-serif;padding:16px;background:#fff9edb3;border-radius:15px;color:#8b7659;position:relative;max-width:240px}.bubble:after{content:'';position:absolute;top:-7px;left:50%;width:14px;height:14px;background:inherit;transform:rotate(45deg)}.scene-progress{font:10px/1.5 system-ui;letter-spacing:1px;color:var(--muted);margin:0}.warning{font:12px/1.8 system-ui;background:#fff3ce;color:#8c6348;padding:12px 20px;max-width:850px;margin:10px auto;border-radius:8px}.toast{position:fixed;bottom:calc(26px + var(--safe-bottom));left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#416f66;color:#fff7e4;padding:12px 18px;border-radius:12px;box-shadow:0 5px 20px #355a4926;z-index:20;font:12px/1.7 system-ui;width:max-content;max-width:calc(100vw - 36px);transition:.16s}.toast.show{opacity:1;transform:translate(-50%,0)}body.modal-open{overflow:hidden}dialog{border:1px solid #d7c4a1;border-radius:22px;background:#fff8e8;padding:24px;width:440px;max-width:calc(100vw - 28px);max-height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 28px);overflow-y:auto;color:var(--ink);box-shadow:0 25px 80px #4c49383b}dialog::backdrop{background:#42544875;backdrop-filter:blur(3px)}#modal-content{text-align:center}dialog .cat{width:110px;height:110px;margin:-10px auto 2px}dialog h2{margin-bottom:12px}dialog p{font:14px/1.9 system-ui;color:#89785e}.dialog-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}.result-stars{font-size:30px;letter-spacing:8px;color:#c8934e;margin:12px 0}.reward-note{padding:12px;background:#eef0d9;border-radius:10px;color:var(--teal)!important}.tutorial-example{display:flex;gap:8px;justify-content:center}.tutorial-example svg{width:50px;height:50px;padding:5px;background:#fffaf1;border:1px solid #dfcdae;border-radius:8px}.ending{max-width:700px;text-align:center;margin:25px auto}.ending>.cat{margin:auto;width:230px;height:230px}.ending h1{font-size:32px}.ending p{font:15px/2 system-ui;color:var(--muted)}.ending .collection,.ending .hero-actions{justify-content:center}
@media(max-width:767px){.topbar{padding-top:calc(12px + var(--safe-top));padding-bottom:10px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.brand{font-size:22px;letter-spacing:3px}.brand small{display:none}.header-actions{gap:4px}main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.hero{margin:12px auto;min-height:0;gap:20px;padding:6px 12px;grid-template-columns:1fr;text-align:center}.hero>div:first-child{order:2}.hero-art{order:1;min-height:200px;width:230px;margin:auto;box-shadow:0 10px 20px #9d7c4517}.hero-art>.cat{width:175px;height:175px}.hero-art:after{bottom:27px}.little-note{font-size:10px;padding-bottom:12px}.hero h1{font-size:32px;margin-bottom:12px}.description{font-size:14px;line-height:1.8}.hero-actions,.hero .collection{justify-content:center;margin-top:18px}.hero .fineprint{font-size:11px}.collection{gap:10px}.collection span{font-size:10px}.game-heading{margin:3px auto 10px}.game-heading h1{font-size:23px}.game-heading .eyebrow{font-size:9px;margin-bottom:3px}.game-heading p:last-child{font-size:11px}.game-layout{display:flex;flex-direction:column;gap:14px;max-width:440px}.board-shell{width:100%;padding:12px;border-radius:18px}.goalbar{margin-bottom:10px;padding:0}.goals>svg{width:30px;height:30px}.goals b{font-size:19px}.steps strong{font-size:27px}.steps small{font-size:9px}.board{gap:7px}.memory-card{height:clamp(44px,calc((100svh - 228px - (var(--rows) - 1)*7px)/var(--rows)),82px);border-radius:9px}.memory-card svg{width:44px;height:44px}.memory-card:not(.revealed) svg{width:33px}.board-help{margin-top:8px;font-size:10px;gap:3px}.companion{width:100%;flex-direction:row;gap:10px;justify-content:center}.companion .cat{width:75px;height:75px;order:2}.companion .bubble{order:1;max-width:290px;font-size:11px;padding:10px 12px;line-height:1.75;flex:1}.bubble:after{left:auto;top:calc(50% - 6px);right:-6px;width:12px;height:12px}.scene-progress{display:none}footer{font-size:8px;gap:10px;padding:18px 16px calc(18px + var(--safe-bottom))}.level-page{margin:15px 8px}.level-page h1{font-size:28px}.level-row{gap:9px}.level-button{padding:10px 5px;min-height:110px}.level-name{font-size:10px}.scene-heading{align-items:center}.scene-heading h2{font-size:17px;margin-bottom:12px}.scene-heading span{font-size:9px}.level-page .fineprint{font-size:11px}.select-footer .secondary{font-size:12px;padding:10px 14px}.ending>.cat{width:190px;height:190px}.ending h1{font-size:27px}.ending p{font-size:13px}}
@media(max-width:400px){.hero-art{min-height:170px;width:205px}.hero-art>.cat{width:145px;height:145px}.hero h1{font-size:30px}.hero .description{font-size:13px}.hero-actions{gap:8px}.hero .primary,.hero .secondary{font-size:13px;padding:10px 13px}.collection span{font-size:9px}.collection svg{width:20px;height:20px}}
@media(orientation:landscape) and (max-height:550px){.topbar{padding-top:calc(7px + var(--safe-top));padding-bottom:4px}.brand{font-size:21px}.brand small{display:none}main{min-height:0}.game-heading{margin:0 auto 7px}.game-heading h1{font-size:20px;display:inline;margin:0 10px}.game-heading .eyebrow{display:inline;font-size:8px}.game-heading p:last-child{display:none}.game-layout{max-width:900px;display:grid;grid-template-columns:minmax(0,1fr) 140px;align-items:center;gap:14px}.board-shell{padding:10px 12px}.goalbar{margin-bottom:7px}.goals>svg{width:26px;height:26px}.goals b{font-size:17px}.goals{font-size:10px}.steps strong{font-size:22px}.steps small{font-size:8px}.board{--cols:6!important;gap:6px}.memory-card{height:clamp(44px,calc((100svh - 167px - (var(--land-rows) - 1)*6px)/var(--land-rows)),64px);border-radius:8px}.memory-card svg{width:40px;height:40px}.memory-card:not(.revealed) svg{width:30px}.board-help{margin-top:4px;min-height:44px;font-size:9px}.board-help #peek{font-size:10px;min-width:100px}.companion{flex-direction:column;gap:4px}.companion .cat{width:85px;height:85px;order:1}.companion .bubble{order:2;font-size:10px;padding:9px;line-height:1.7}.bubble:after{display:none}.scene-progress{display:none}.look-actions{margin-top:4px;font-size:10px}.look-actions button{font-size:11px;padding:5px 10px}footer{padding-top:12px}.hero{grid-template-columns:1fr 1fr;max-width:800px;text-align:left;align-items:center;gap:35px;min-height:0}.hero>div:first-child{order:1}.hero-art{order:2;width:205px;min-height:200px}.hero-art>.cat{width:175px;height:175px}.hero-actions,.hero .collection{justify-content:flex-start}.hero h1{font-size:28px;margin-bottom:10px}.hero .description{font-size:12px}.hero .fineprint{font-size:10px}.hero .collection{display:none}.hero .eyebrow{font-size:8px}.hero-actions{margin:14px 0 12px}.hero .primary,.hero .secondary{font-size:12px;padding:8px 12px}.hero .little-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.memory-card:hover:not(:disabled){transform:none}}
/* Keep the 24-card board and its controls visible on short phones. */
@media(max-width:767px) and (max-height:680px) and (orientation:portrait){.topbar{padding-top:calc(8px + var(--safe-top));padding-bottom:4px}.game-heading{margin-bottom:7px}.game-heading .eyebrow{font-size:8px;line-height:1.2}.game-heading h1{font-size:20px}.game-heading p:last-child{display:none}.memory-card{height:clamp(44px,calc((100svh - 260px - (var(--rows) - 1)*7px)/var(--rows)),82px)}}
@media(orientation:landscape) and (max-height:550px){.game-heading{display:none}.game-layout{position:relative;align-items:start}.goalbar{position:absolute;right:0;top:0;width:140px;padding:3px 0}.goals{gap:5px;font-size:9px}.goals>svg{display:none}.steps{min-width:50px;padding-left:10px}.companion{padding-top:65px}.memory-card{height:clamp(44px,calc((100svh - 128px - (var(--land-rows) - 1)*6px)/var(--land-rows)),64px)}}

/* Sound controls stay large enough for thumbs, including the smallest phone header. */
.audio-options{display:grid;gap:9px;margin:16px 0}.audio-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;padding:12px 15px;border:1px solid var(--edge);border-radius:11px;background:#fffcf2;text-align:left;font:14px/1.5 system-ui,sans-serif}.audio-option b{font-size:12px;font-weight:500;color:var(--muted);border-radius:20px;padding:3px 12px;background:#ede6d7;white-space:nowrap}.audio-option[aria-checked=true] b{background:#e2eddf;color:#355f57}#audio-test:disabled{opacity:.45;text-decoration:none}
.cat{transform-origin:50% 90%;will-change:auto}.hero-art>.cat[data-mood=idle]{animation:cat-breathe 6s ease-in-out infinite}.companion .cat[data-mood=surprise]{animation:cat-delight .36s ease-out}.cat[data-mood=celebrate]{animation:cat-celebrate .65s ease-in-out 2}.hero-art{isolation:isolate}.hero-art:before{content:'';position:absolute;inset:10px;border-radius:inherit;background:radial-gradient(ellipse at 70% 20%,#fffdf280,transparent 60%);pointer-events:none}.hero-art>.cat{filter:drop-shadow(0 7px 5px #94704518)}
@keyframes cat-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes cat-delight{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-6px) rotate(-3deg)}100%{transform:translateY(0) rotate(0)}}@keyframes cat-celebrate{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px) rotate(2deg)}}
@media(max-width:767px){.topbar{gap:8px}.brand{font-size:20px;letter-spacing:2px}.header-actions{gap:3px}#home{padding-left:6px;padding-right:6px;min-width:44px}.companion .cat{width:104px;height:104px}}
/* Account for cutouts/home indicators; this is also checked with simulated inset variables. */
@media(max-width:767px) and (orientation:portrait){.memory-card{height:clamp(44px,calc((100svh - 272px - var(--safe-top) - var(--safe-bottom) - (var(--rows) - 1)*7px)/var(--rows)),82px)}}
@media(orientation:landscape) and (max-height:550px){.companion .cat{width:85px;height:85px}.memory-card{height:clamp(44px,calc((100svh - 128px - var(--safe-top) - var(--safe-bottom) - (var(--land-rows) - 1)*6px)/var(--land-rows)),64px)}}
@media(prefers-reduced-motion:reduce){.cat{animation:none!important;transform:none!important}}

@media(max-width:767px) and (orientation:portrait){.board-help{font-size:11px}.companion .bubble{font-size:12px;color:#786449}}