:root{color-scheme:light;--ink:#40564a;--muted:#7c7864;--cream:#faf3e4;--teal:#426f65;--edge:#d8c9ad;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:system-ui,'Microsoft YaHei',sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 80% 5%,#fffbed,transparent 55%),linear-gradient(150deg,#f7efdf,#e8dcc3);color:var(--ink)}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.42;cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #be8b4c;outline-offset:3px}[hidden]{display:none!important}.topbar{max-width:1050px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(18px + var(--safe-top)) max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left))}.brand{min-height:44px;font:700 26px Georgia,serif;letter-spacing:3px;text-decoration:none;color:var(--teal);display:flex;align-items:center}.header-actions{display:flex;align-items:center;gap:7px}.icon-button{position:relative;min-width:44px;height:44px;border:1px solid var(--edge);border-radius:50%;background:#fff9e9aa;font-size:22px;color:var(--teal)}.mute-slash{position:absolute;left:17px;top:4px;font-size:30px}.primary,.secondary,.text-button{min-height:46px;border-radius:9px;padding:10px 18px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-size:14px;text-decoration:none}.primary{border:1px solid var(--teal);background:var(--teal);color:#fff9e9;box-shadow:0 3px 0 #36534717}.primary:hover{background:#34594f}.secondary{border:1px solid #c0c6ac;background:#fff9e9a0;color:var(--teal)}.secondary:hover{background:#fffdf5}.text-button{border:0;background:transparent;color:var(--teal);padding:8px 12px}main{max-width:1050px;margin:auto;padding:0 max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left));min-height:calc(100svh - 150px)}h1,h2,p{margin-top:0}h1{font:600 38px/1.4 Georgia,'Microsoft YaHei',serif;letter-spacing:1px;margin-bottom:15px}h2{font:600 24px/1.4 Georgia,'Microsoft YaHei',serif}.eyebrow{font:10px/1.6 system-ui;letter-spacing:2px;color:var(--muted);margin-bottom:9px}.description{font-size:15px;line-height:2;color:var(--muted)}.fineprint{font-size:12px;line-height:1.9;color:var(--muted)}.hero{max-width:900px;min-height:590px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px}.hero h1 em{font-style:normal;color:#b47c48}.hero-art{min-height:360px;display:flex;align-items:center;flex-direction:column;justify-content:center;background:radial-gradient(ellipse at 68% 28%,#fffdf5aa,transparent 70%),linear-gradient(95deg,transparent 49.4%,#e3cda25c 50%,transparent 50.6%),linear-gradient(#fff7dc,#f3e4bd);border:1px solid #dac8a6;border-radius:48% 48% 14px 14px;box-shadow:0 16px 30px #82634117;position:relative}.hero-art:after{content:'';width:65%;height:15px;background:#b5956336;filter:blur(6px);position:absolute;bottom:54px;border-radius:50%}.hero-art .cat{width:280px;height:280px;animation:breathe 6s ease-in-out infinite}.cat{width:150px;height:150px;background:url('../assets/xiaoju-canonical.webp') 0 0/300% 200% no-repeat;flex-shrink:0;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%;animation:celebrate .6s ease-in-out 2}.hero-art p{font-size:12px;color:#8a7a5b;z-index:1}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 15px}.chapter-tags{display:flex;flex-wrap:wrap;gap:8px}.chapter-tags span{font-size:11px;padding:5px 10px;border-radius:20px;background:#fff6e677;border:1px solid #dccaab}.game-heading{text-align:center;margin:10px auto 16px}.game-heading h1{font-size:27px;margin-bottom:6px}.game-heading p{font-size:12px;color:var(--muted);margin-bottom:0}.play-layout{display:grid;grid-template-columns:minmax(0,460px) 205px;align-items:center;justify-content:center;gap:35px}.game-panel{background:#fff8e8bb;border:1px solid #d6c29e;padding:17px;border-radius:20px;box-shadow:0 6px 0 #a17e4110}.stats{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:13px}.stat{font-size:10px;color:var(--muted)}.stat strong{display:block;font:600 24px/1.25 Georgia,serif;color:var(--teal)}.stat.right{text-align:right}.game-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}.game-actions button{font-size:12px;min-height:44px}.board{width:100%;user-select:none;-webkit-user-select:none;touch-action:pinch-zoom;outline-offset:5px}.merge-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:9px;border-radius:13px;background:#c4b794}.merge-tile{height:88px;min-width:0;border-radius:9px;background:#ded2b7;display:flex;align-items:center;justify-content:center;position:relative;font:700 32px/1 Georgia,serif;color:#5d614c;box-shadow:inset 0 1px 0 #fff6}.merge-tile[data-value="0"]{color:transparent;box-shadow:none}.merge-tile[data-value="2"]{background:#f8edd2}.merge-tile[data-value="4"]{background:#efdfb8}.merge-tile[data-value="8"]{background:#ebc38d;color:#5b563d}.merge-tile[data-value="16"]{background:#e4a66f;color:#fff9e8}.merge-tile[data-value="32"]{background:#d28b61;color:#fff9e8}.merge-tile[data-value="64"]{background:#bd7655;color:#fff9e8}.merge-tile[data-value="128"]{background:#a9b78a;color:#fffbed;font-size:28px}.merge-tile[data-value="256"]{background:#8ba783;color:#fffbed;font-size:28px}.merge-tile[data-value="512"]{background:#6c9275;color:#fffbed;font-size:28px}.merge-tile[data-value="1024"]{background:#507c68;color:#fffbed;font-size:24px}.merge-tile[data-value="2048"],.merge-tile.large{background:#c19a49;color:#fff9e3;font-size:24px}.merge-tile.spawn{animation:pop .18s ease-out}.merge-tile.merged{animation:merge .22s ease-out}.board-note{font-size:11px;line-height:1.7;color:var(--muted);margin:12px 0 0}.companion{display:flex;flex-direction:column;align-items:center;gap:10px}.bubble{font-size:12px;line-height:1.9;background:#fff9ebcc;padding:15px;border-radius:15px;position:relative;color:#7c6d54}.bubble:before{content:'';position:absolute;top:-6px;left:50%;width:12px;height:12px;background:inherit;transform:rotate(45deg)}.dpad{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:12px}.dpad>div{display:flex;gap:5px}.dpad button{width:52px;height:48px;border:1px solid #c0c9af;border-radius:10px;background:#f9f6e8;color:var(--teal);font-size:25px;box-shadow:0 2px 0 #456b4d17}.dpad button:active{transform:translateY(1px);background:#e6eddc}.soko-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:3px;padding:5px;border-radius:12px;background:#d5cead}.soko-cell{aspect-ratio:1;border-radius:5px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;background:#f4edd7;box-shadow:inset 0 1px 0 #fff8}.soko-cell.wall{background:repeating-linear-gradient(0deg,#92a287 0 18px,#82977c 18px 20px);box-shadow:inset 0 2px 0 #b7c2a2;color:transparent}.soko-cell.goal:before{content:'';position:absolute;inset:12%;border:2px dashed #ae9b60;border-radius:50%;background:#e4d49d55}.soko-cell svg{width:55%;height:55%;position:relative;z-index:1}.crate{width:83%;height:83%;border:2px solid #ae7f49;border-radius:5px;background:linear-gradient(45deg,transparent 47%,#c89d6266 48% 53%,transparent 54%),#e2bc83;box-shadow:inset 0 0 0 3px #f4d69b;display:flex;align-items:center;justify-content:center;z-index:2;position:relative}.crate svg{width:60%;height:60%;filter:drop-shadow(0 1px 0 #fff8)}.soko-cell.filled .crate{border-color:#7b9c6e;background-color:#bcd09d;box-shadow:inset 0 0 0 3px #dbe7ba}.soko-cell .cat{width:140%;height:140%;position:absolute;top:-34%;left:-20%;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 1px #5f6f4b22)}.soko-cell.player{box-shadow:inset 0 0 0 2px #b9ba84}.level-select{max-width:800px;margin:24px auto}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.level-card{min-height:105px;padding:13px 8px;border:1px solid var(--edge);background:#fff8e9;border-radius:12px;display:flex;flex-direction:column;justify-content:center;gap:5px}.level-card strong{font:25px Georgia,serif;color:#ac7c46}.level-card span{font-size:12px}.level-card small{font-size:10px;color:var(--muted)}.guide{max-width:650px;margin:30px auto;font-size:15px;line-height:2}.guide ul{padding-left:20px}.warning{max-width:850px;margin:12px auto;padding:12px;background:#fff0c9;border-radius:10px;color:#816348;font-size:12px}.toast{position:fixed;bottom:calc(20px + var(--safe-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content;background:var(--teal);color:#fff9e5;padding:12px 17px;border-radius:12px;font-size:12px;line-height:1.8;z-index:5;pointer-events:none}.modal-open{overflow:hidden}dialog{border:1px solid var(--edge);border-radius:22px;background:#fff8e7;color:var(--ink);width:410px;max-width:calc(100vw - 28px);max-height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 28px);overflow:auto;padding:22px;box-shadow:0 20px 60px #3c4c3840}dialog::backdrop{background:#405c4c73;backdrop-filter:blur(3px)}#modal-body{text-align:center}dialog .cat{width:120px;height:120px;margin:-8px auto 0}dialog h2{margin-bottom:12px}dialog p{font-size:13px;line-height:1.9;color:var(--muted)}.dialog-actions{display:flex;flex-direction:column;gap:9px;margin-top:20px}.audio-options{display:grid;gap:9px;margin-top:16px}.audio-option{min-height:48px;border:1px solid var(--edge);border-radius:9px;display:flex;align-items:center;justify-content:space-between;background:#fffbf1;padding:10px 13px;font-size:13px}.audio-option b{font-size:11px;color:#8c7d67;background:#ece4d3;padding:3px 10px;border-radius:20px}.audio-option[aria-checked=true] b{color:#416f55;background:#deead7}footer{max-width:1000px;margin:auto;padding:18px 24px calc(18px + var(--safe-bottom));display:flex;justify-content:space-between;gap:14px;font-size:9px;color:#8c806a;letter-spacing:.8px}footer a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes breathe{50%{transform:translateY(-3px)}}@keyframes celebrate{50%{transform:translateY(-7px) rotate(2deg)}}@keyframes pop{from{transform:scale(.83);opacity:.5}to{transform:scale(1);opacity:1}}@keyframes merge{50%{transform:scale(1.07)}}
@media(max-width:767px){.topbar{padding:calc(10px + var(--safe-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}.brand{font-size:22px;letter-spacing:2px}.header-actions{gap:5px}main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.hero{min-height:0;margin:10px auto 0;grid-template-columns:1fr;gap:22px;text-align:center}.hero>div:first-child{order:2}.hero-art{order:1;width:225px;min-height:225px;margin:auto}.hero-art .cat{width:190px;height:190px}.hero-art:after{bottom:38px}.hero-art p{font-size:10px}.hero h1{font-size:31px;margin-bottom:12px}.description{font-size:14px;line-height:1.9}.hero .actions,.chapter-tags{justify-content:center}.hero .fineprint{font-size:11px}.game-heading{margin:4px auto 12px}.game-heading h1{font-size:23px;margin-bottom:4px}.game-heading p{font-size:11px}.play-layout{display:flex;flex-direction:column;max-width:440px;margin:auto;gap:16px}.game-panel{width:100%;padding:12px;border-radius:17px}.merge-board{gap:7px;padding:7px}.merge-tile{height:clamp(54px,calc((100svh - 350px - var(--safe-top) - var(--safe-bottom))/4),82px);font-size:30px;border-radius:8px}.stats{margin-bottom:11px}.stat strong{font-size:24px}.game-actions{margin-top:10px}.game-actions button{font-size:11px;padding:8px 12px}.board-note{font-size:11px;margin-top:9px}.companion{width:100%;display:grid;grid-template-columns:1fr 100px;gap:9px;align-items:center}.companion>.cat{grid-column:2;grid-row:1;width:100px;height:100px}.companion>.bubble{grid-column:1;grid-row:1;font-size:11px;padding:11px 12px}.bubble:before{top:calc(50% - 6px);left:auto;right:-6px}.companion .dpad{grid-column:1/3;margin-top:0}.level-select{margin:15px 0}.level-select h1{font-size:29px}.level-card span{font-size:11px}.level-grid{gap:9px}.level-card{min-height:108px}footer{font-size:8px;padding:18px 16px calc(18px + var(--safe-bottom))}.guide{font-size:14px}.soko-board{gap:2px;padding:4px}.crate{border-width:1px;box-shadow:inset 0 0 0 2px #f4d69b}.soko-cell .cat{width:150%;height:150%;top:-40%;left:-25%}}
@media(orientation:landscape) and (max-height:600px){.topbar{padding-top:calc(5px + var(--safe-top));padding-bottom:5px}.game-heading{display:none}.play-layout{display:grid;grid-template-columns:minmax(0,390px) 180px;max-width:800px;gap:18px;align-items:start}.game-panel{padding:10px}.merge-tile{height:clamp(44px,calc((100svh - 200px - var(--safe-top) - var(--safe-bottom))/4),68px);font-size:25px}.merge-board{gap:5px;padding:5px}.stats{margin-bottom:8px}.stat strong{font-size:20px}.board-note{display:none}.companion{display:flex;flex-direction:column;gap:3px}.companion>.cat{width:100px;height:100px}.companion>.bubble{font-size:10px;padding:8px}.bubble:before{display:none}.dpad{gap:3px;margin-top:7px}.dpad>div{gap:3px}.dpad button{width:48px;height:44px}.soko-board{max-height:calc(100svh - 170px);width:fit-content;margin:auto;grid-template-columns:repeat(var(--cols),clamp(23px,calc((100svh - 183px)/var(--rows)),42px))}.hero{min-height:0;grid-template-columns:1fr 220px;gap:35px;text-align:left;max-width:800px}.hero>div:first-child{order:1}.hero-art{order:2;width:210px;min-height:215px}.hero-art .cat{width:175px;height:175px}.hero h1{font-size:29px}.hero .actions,.chapter-tags{justify-content:flex-start}.hero .description{font-size:12px}.hero .fineprint{font-size:10px}.chapter-tags{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Thumb controls stay in view: a single clear arrow row on portrait phones. */
@media(max-width:767px) and (orientation:portrait){.companion{grid-template-columns:1fr 88px}.companion>.cat{width:88px;height:88px}.companion .dpad{flex-direction:row;justify-content:center;gap:8px}.companion .dpad>div{display:contents}.companion .dpad button{width:54px;height:48px}.companion .dpad [data-dir=left]{order:1}.companion .dpad [data-dir=up]{order:2}.companion .dpad [data-dir=down]{order:3}.companion .dpad [data-dir=right]{order:4}}
@media(max-width:767px) and (max-height:680px) and (orientation:portrait){.topbar{padding-top:calc(6px + var(--safe-top));padding-bottom:5px}.game-heading{margin:2px auto 7px}.game-heading .eyebrow,.game-heading p:last-child{display:none}.game-heading h1{font-size:20px;margin:0}.board-note{display:none}.merge-tile{height:clamp(44px,calc((100svh - 370px - var(--safe-top) - var(--safe-bottom))/4),60px)}.companion{grid-template-columns:68px 1fr;gap:8px}.companion>.cat{grid-column:1;grid-row:1;width:68px;height:68px}.companion>.bubble{display:none}.companion>.dpad{grid-column:2;grid-row:1;gap:4px}.companion .dpad button{width:44px;height:44px}.game-actions{margin-top:8px}.stat strong{font-size:22px}}