/* Height-aware play surface; keep touch targets independent of the board scale. */
body,body.cat-level{background:#f6ead4;color:#533927}
main{max-width:520px;min-height:100svh;padding: max(10px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
header{gap:8px;min-height:44px;margin-bottom:8px}
.heading{margin:0!important;flex:1;justify-content:center;text-align:center;min-width:0}
.heading p{margin:0;font-weight:800;font-size:16px;color:#533927;line-height:1.35}
.small{min-height:44px;padding:8px 12px;background:#fff9ed;border:1px solid #dfc6a4;font-weight:700;white-space:nowrap}
.status{font-size:14px;line-height:20px;margin:0 6px}.status.reward-warning{color:#a14f35}.progress{margin:6px 6px 10px;height:5px;flex-shrink:0}
.board-space{display:flex;justify-content:center;align-items:center;flex:1;min-height:0}
.cat-level .case{position:relative;width:var(--box-width,300px);max-width:100%;padding:8px;border:2px solid #ab7744;border-radius:16px;box-shadow:0 5px 0 #a87541,0 12px 22px #795b3620;background:#d5ad75;flex-shrink:0;transition:border-color .12s,box-shadow .12s,transform .12s}
.cat-level .case.drop-valid{border-color:#71804e;box-shadow:0 5px 0 #71804e,0 0 0 5px #a9b77b3d,0 12px 22px #795b3620}.cat-level .case.drop-invalid{border-color:#b85c4b;box-shadow:0 5px 0 #9e493b,0 0 0 5px #d8776630,0 12px 22px #795b3620}.cat-level .case.drop-reject{animation:boxReject .24s ease-out}.cat-level .case.drop-success{animation:boxSettle .3s ease-out}
#dropBurst{display:none;position:absolute;z-index:3;left:var(--burst-x,50%);top:var(--burst-y,50%);width:36px;height:36px;margin:-18px;color:#fff4b0;font-size:30px;line-height:36px;text-align:center;text-shadow:0 2px 0 #9c6737;pointer-events:none}.drop-success #dropBurst{display:block;animation:sparkle .5s ease-out both}.drop-reject #dropBurst{display:block;color:#fff;font-size:0;text-shadow:none}.drop-reject #dropBurst::before{content:"×";display:block;width:34px;height:34px;border-radius:50%;font-size:20px;line-height:31px;background:#b85c4b;border:2px solid #fff5e8}
@keyframes boxReject{25%{transform:translateX(-5px)}60%{transform:translateX(4px)}}@keyframes boxSettle{45%{transform:scale(1.012)}}@keyframes sparkle{from{opacity:0;transform:scale(.35) rotate(-20deg)}45%{opacity:1}to{opacity:0;transform:scale(1.8) rotate(20deg)}}
#message{font-size:14px;line-height:20px;min-height:40px;margin:10px 3px 4px;display:flex;align-items:center;justify-content:center}
.connection-status{position:fixed;z-index:10;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);margin:0;padding:9px 14px;border-radius:999px;background:#6c7650;color:#fff;font-size:13px;font-weight:800;line-height:18px;box-shadow:0 4px 16px #53392735;text-align:center}.connection-status.offline{background:#8a6243}.connection-status[hidden]{display:none}
.storage-status{top:max(58px,calc(env(safe-area-inset-top) + 52px));background:#a14f35}.storage-status.recovered{background:#6c7650}
.shelf{margin:0;background:#e5dcc0;border:1px solid #d1c6a5;border-radius:20px;padding:8px}
.shelf-title{margin:0 2px 6px;min-height:44px}.shelf-title b{font-size:14px}.shelf-title span{font-size:12px;color:#67543d}.tray-pages{display:flex;align-items:center;gap:4px}.tray-pages button{width:44px;height:44px;border-radius:12px;background:#f6eedb;font-size:24px}.tray-pages button:disabled{opacity:.3}
#tray{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.piece{height:84px;min-height:44px;padding:3px 2px;border-radius:12px;background:#f6eedb;border:2px solid transparent}
.piece canvas{height:56px;width:100%;object-fit:contain}.piece span{margin:1px 0 0;line-height:16px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piece.packed{background:#d0d4b5;opacity:.62}.piece.active{background:#fff8e6;border-color:#a56132}.piece.hinted{background:#fff2c8;border-color:#d59b37;box-shadow:0 0 0 3px #f2c96845,inset 0 1px #fff}
.piece.active:not(.packed) span{color:#8d512e;font-weight:900}
.toolbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:10px}.toolbar button{min-height:48px;border-radius:16px;background:#fff9ed;border:1px solid #dfc6a4;box-shadow:0 3px 0 #ddc5a1}.toolbar button:first-child{background:#6c7650;color:#fff;border-color:#59623e;box-shadow:0 3px 0 #515b38}.toolbar span{font-size:16px}
footer{display:none}#pause #saveStatus{display:block;margin-top:16px;font-size:14px;color:#755b43}
.preference-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 2px}.preference-row button{margin:0;min-width:0;padding:10px 5px;font-size:13px;background:#e8dfc8}.preference-row button[aria-checked="false"]{background:#eee8dc;color:#8b7d6d;box-shadow:inset 0 0 0 1px #d5cab9}.motion-off *,body.motion-off *::before,body.motion-off *::after{animation:none!important;transition:none!important}
.compact .piece{height:72px}.compact .piece canvas{height:44px}.compact main{padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}.compact header{margin-bottom:4px}.compact #message{margin-top:8px;margin-bottom:2px}.compact .toolbar{margin-top:8px}
.tiny-screen main{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}.tiny-screen header{min-height:40px;margin-bottom:2px}.tiny-screen .small{min-height:40px;padding:6px 10px}.tiny-screen .status{font-size:13px;line-height:18px}.tiny-screen .progress{margin:3px 6px 6px}.tiny-screen #message{min-height:28px;margin:4px 3px 2px;font-size:13px;line-height:17px}.tiny-screen .shelf{padding:6px}.tiny-screen .shelf-title{min-height:38px;margin-bottom:3px}.tiny-screen #tray{grid-template-columns:repeat(3,minmax(0,1fr))}.tiny-screen .piece{height:64px}.tiny-screen .piece canvas{height:38px}.tiny-screen .toolbar{margin-top:6px}.tiny-screen .toolbar span{font-size:14px}
dialog{box-sizing:border-box;max-width:calc(100vw - 16px);background:#fff8eb;border:1px solid #d5b990;padding:24px;max-height:calc(100dvh - 32px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:16px;color:#533927}
dialog::backdrop{background:#493a2a99;backdrop-filter:blur(4px)}dialog h2{font-size:24px}dialog p{color:#755b43}dialog button{min-height:48px;background:#efe2c9}dialog .primary{background:#6c7650}.help{font-size:14px}#levelgrid button{min-height:48px}#levelgrid .done{background:#dde3c8}dialog[open]{animation:arrive .18s ease-out}
.art-status{position:fixed;z-index:2;top:64px;left:50%;transform:translateX(-50%);width:min(90vw,420px);box-shadow:0 4px 16px #795b3620}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-height:540px) and (orientation:landscape){main{min-height:540px}}

/* Game-native home and level map. */
.home-dialog{width:min(calc(100vw - 16px),520px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border:0;border-radius:24px;padding:max(22px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;background:linear-gradient(#f7e7c9 0 42%,#fff8eb 42%);text-align:left;box-shadow:0 16px 60px #53392733}
.home-dialog::backdrop{background:#f6ead4}.home-room{height:min(35dvh,290px);min-height:205px;position:relative;border-radius:28px;background:linear-gradient(180deg,#d8b98a,#c9975d);border:2px solid #9c6a3a;overflow:hidden;box-shadow:inset 0 -24px #b77943,0 8px 0 #9e6939}
.home-room:after{content:"";position:absolute;left:0;right:0;bottom:28px;height:10px;background:#8d5e38}.home-room .window{position:absolute;right:24px;top:20px;width:78px;height:72px;background:#b9d2c9;border:7px solid #f4d8a9;border-radius:36px 36px 8px 8px;box-shadow:0 0 0 3px #9d7045}.home-room .window:before,.home-room .window:after{content:"";position:absolute;background:#f4d8a9}.home-room .window:before{width:6px;height:100%;left:29px}.home-room .window:after{height:6px;width:100%;top:31px}.home-room .window i{position:absolute;width:19px;height:19px;border-radius:50%;background:#fff1b3;left:8px;top:7px}
#homeCats{position:absolute;z-index:2;width:100%;height:100%;inset:0}.box-label{position:absolute;z-index:3;left:18px;bottom:7px;font-size:11px;font-weight:900;letter-spacing:2px;color:#704524}
.eyebrow{margin:24px 0 5px!important;font-size:13px!important;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#91643d!important}.home-dialog h1{font-size:48px;line-height:.92;letter-spacing:-3px;margin:0;color:#553823}.home-dialog h1 span{color:#b85f32}.home-copy{font-size:15px;line-height:1.65;margin:14px 0 18px!important;color:#765941!important}.home-dialog button{margin-top:8px}.home-primary{font-size:18px;box-shadow:0 4px 0 #4e5937}.home-progress{text-align:center;font-size:13px!important;margin:14px 0 0!important;color:#896f55!important}
.picker-dialog{width:min(94vw,460px);padding:24px 18px}.picker-dialog .eyebrow{margin-top:0!important}.picker-dialog h2{margin-top:4px}.picker-dialog #mapProgress{margin:5px 0 9px}.achievements{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px}.achievement{min-height:42px;padding:7px 4px;border-radius:11px;background:#eee7dc;color:#9a8e80;font-size:11px;line-height:1.3;font-weight:800}.achievement.unlocked{background:#fff0ca;color:#855624;box-shadow:inset 0 0 0 1px #e5bd70}.achievement b{display:block;font-size:15px;line-height:1}.picker-dialog #levelgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}.level-card{position:relative;min-height:82px!important;margin:0!important;padding:12px 12px 10px!important;text-align:left;background:#f1e2c9!important;border:1px solid #dfc39d}.level-card.done{background:#e0e4c9!important;border-color:#b9c08e}.level-card.current{box-shadow:0 0 0 3px #b8663533;border-color:#b86635}.level-no{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;color:#a2693d}.level-tier{padding:2px 6px;border-radius:999px;background:#e8d6bb;color:#806448;font-size:9px;font-style:normal;letter-spacing:.5px}.tier-挑战 .level-tier{background:#edc9ad;color:#934b2d}.tier-进阶 .level-tier{background:#e1dfb9;color:#687348}.level-name{display:block;font-size:15px;font-weight:900;margin-top:4px}.level-best{display:block;min-height:17px;font-size:11px;color:#806a54;margin-top:4px}.level-check{position:absolute;right:10px;top:9px;color:#687348;font-weight:900}
@media(max-height:700px){.home-dialog{padding-top:12px}.home-room{height:30dvh;min-height:170px}.home-dialog .eyebrow{margin-top:18px!important}.home-dialog h1{font-size:42px}.home-copy{margin:10px 0 12px!important;line-height:1.45}.home-dialog button{min-height:44px;padding:10px 16px}.home-progress{margin-top:8px!important}}
@media(max-width:350px){.home-dialog{padding-left:16px;padding-right:16px}.picker-dialog #levelgrid{gap:7px}.level-card{padding:10px!important}.level-name{font-size:14px}}

.win-dialog{text-align:center;overflow-x:hidden;overflow-y:auto;position:relative}.win-dialog .win-icon{width:64px;height:64px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;background:#e6ddbd;color:#69744d;font-size:20px;font-weight:900;transform:rotate(-5deg)}.win-sparkles{position:absolute;inset:10px 18px auto;pointer-events:none}.win-sparkles i{position:absolute;left:50%;top:34px;opacity:0;font-style:normal;font-size:15px}.win-dialog.celebrate .win-sparkles i{animation:winBurst .62s cubic-bezier(.18,.78,.28,1) both}.win-sparkles i:nth-child(1){--x:-112px;--y:-20px}.win-sparkles i:nth-child(2){--x:-76px;--y:-43px;animation-delay:.04s!important}.win-sparkles i:nth-child(3){--x:-35px;--y:-55px;animation-delay:.08s!important}.win-sparkles i:nth-child(4){--x:38px;--y:-53px;animation-delay:.02s!important}.win-sparkles i:nth-child(5){--x:80px;--y:-39px;animation-delay:.07s!important}.win-sparkles i:nth-child(6){--x:112px;--y:-16px;animation-delay:.11s!important}.win-dialog>p:first-of-type{margin:5px 0;color:#a05e36;font-weight:900;letter-spacing:1px}.win-paws{display:flex;justify-content:center;gap:8px;margin:10px 0 6px}.win-paws i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e5d8bd;color:#b9a98d;font-style:normal;font-size:23px;transform:scale(.85)}.win-paws i.earned{background:#dfe5c5;color:#687348;animation:pawIn .35s cubic-bezier(.2,.9,.3,1.35) both}.win-paws i:nth-child(2){animation-delay:.08s}.win-paws i:nth-child(3){animation-delay:.16s}.win-progress{margin:4px 0 8px!important;padding:8px 10px;border-radius:12px;background:#f1e5cd;color:#76563c!important;font-size:13px;font-weight:800}.win-collection{margin:5px 0!important;color:#806448!important;font-size:12px;font-weight:800}.win-collection.improved{color:#855624!important}.win-collection.complete{padding:7px 10px;border-radius:12px;background:#fff0ca;color:#855624!important;box-shadow:inset 0 0 0 1px #e5bd70}.win-achievement{margin:6px 0 8px!important;padding:9px 12px;border-radius:12px;background:#fff0ca;color:#855624!important;font-size:13px;font-weight:900;box-shadow:inset 0 0 0 1px #e5bd70;animation:achievementIn .4s cubic-bezier(.2,.9,.3,1.2) both}.win-achievement[hidden]{display:none}#winCats{width:100%;height:88px;object-fit:contain;margin:2px 0 7px}@keyframes winBurst{0%{opacity:0;transform:translate(-50%,10px) scale(.4) rotate(-12deg)}35%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),var(--y)) scale(1.05) rotate(12deg)}}@keyframes pawIn{from{opacity:0;transform:scale(.35) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes achievementIn{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}

.tutorial-dialog{width:min(90vw,390px);padding:18px 20px 22px;overflow-x:hidden;overflow-y:auto}.tutorial-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:900;color:#8b6848}.tutorial-top button{width:auto;min-height:40px;margin:0;padding:6px 10px;background:transparent;color:#80654d}.tutorial-visual{position:relative;height:190px;margin:8px 0 16px;border-radius:24px;background:#ead7b5;overflow:hidden;border:1px solid #d5b98e}.demo-rug{position:absolute;left:18px;bottom:23px;width:126px;height:82px;border-radius:50%;background:#d2d0a7}.demo-rug canvas{position:absolute;width:118px;height:85px;left:4px;bottom:4px}.demo-box{position:absolute;right:18px;bottom:24px;width:120px;height:108px;padding:9px;display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#bc8047;border:3px solid #86552e;border-radius:13px;box-shadow:0 5px 0 #8f5b31}.demo-box i{background:#efd2a3;border-radius:5px}.demo-arrow{position:absolute;left:139px;top:84px;font-size:32px;color:#a85b31;animation:nudge 1.2s ease-in-out infinite}.demo-action{display:none;position:absolute;font-size:58px;font-weight:900;color:#fff;background:#6c7650;width:90px;height:90px;line-height:90px;text-align:center;border-radius:50%;right:30px;top:48px;box-shadow:0 6px 0 #515b38}.tutorial-visual.step-2 .demo-arrow,.tutorial-visual.step-2 .demo-box{display:none}.tutorial-visual.step-2 .demo-rug{left:33px;bottom:38px;transform:scale(1.16)}.tutorial-visual.step-2 .demo-action{display:block}.tutorial-visual.step-3 .demo-rug,.tutorial-visual.step-3 .demo-box{opacity:.45}.tutorial-visual.step-3 .demo-arrow{left:123px;top:68px;font-size:52px;transform:rotate(180deg);animation:none}.tutorial-visual.step-3 .demo-action{display:block;right:28px;top:50px;background:#fff8eb;color:#76563c;box-shadow:0 5px 0 #d8c3a3}.tutorial-dialog h2{margin:6px 0;font-size:25px}.tutorial-dialog>p{margin:7px 0 14px;min-height:52px;line-height:1.55}.tutorial-dots{display:flex;justify-content:center;gap:7px;margin-bottom:8px}.tutorial-dots i{width:7px;height:7px;border-radius:50%;background:#d7c3a5}.tutorial-dots i.active{width:20px;border-radius:8px;background:#7d875d}.tutorial-dialog #tutorialNext{margin-top:5px}.coach{animation:coachPulse 1s ease-in-out 3;position:relative;z-index:1}.toolbar button.coach,.piece.coach{box-shadow:0 0 0 4px #e59a493f,0 0 0 7px #fff7e8!important}
@keyframes nudge{50%{transform:translateX(8px)}}@keyframes coachPulse{50%{filter:brightness(1.12)}}
@media(prefers-reduced-motion:reduce){.demo-arrow{animation:none}.coach{animation:none}}

/* V25 mobile-game finish: clearer hierarchy without reducing play space. */
body,body.cat-level{background:linear-gradient(180deg,#f3dfbd 0,#f8edda 34%,#f7ead4 100%);overscroll-behavior:none}
main{position:relative;background:linear-gradient(180deg,#fff9edaa,#fff9ed00 28%)}
header{padding:4px;border-radius:18px;background:#fff9edb8;border:1px solid #ead6b7;box-shadow:0 5px 18px #76543912}
.heading{display:flex!important;flex-direction:column;gap:1px;align-items:center}
.heading p{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#levelnum{display:block;font-size:10px;font-weight:900;line-height:1.2;letter-spacing:1.2px;color:#a46d42}
.small{box-shadow:0 2px 0 #dfc6a4;transition:transform .12s,box-shadow .12s}
.small:active,.toolbar button:active,.tray-pages button:active{transform:translateY(2px);box-shadow:none}
.cat-level .case{background:linear-gradient(145deg,#d8b37e,#bf8249);box-shadow:0 6px 0 #9d6636,0 14px 25px #6f4a2a25,inset 0 1px #f6d6a8}
.cat-level .case:before{display:block;content:"";position:absolute;z-index:2;top:-7px;left:50%;width:72px;height:14px;transform:translateX(-50%) rotate(-1deg);border-radius:3px;background:#ead0a2cc;box-shadow:inset 0 0 0 1px #c99f68;pointer-events:none}
.shelf{background:linear-gradient(135deg,#e7ddbd,#ddd2ad);box-shadow:inset 0 1px #fff9e8,0 5px 14px #6d573016}
.piece{box-shadow:inset 0 1px #fff,0 2px 6px #6e543015;transition:border-color .15s,background-color .15s,transform .15s,box-shadow .15s}
.piece.active{transform:translateY(-2px);box-shadow:0 0 0 2px #c57b4328,0 5px 12px #6e543025}
.toolbar{padding-bottom:1px}.toolbar button{font-weight:800}.toolbar button:first-child{background:linear-gradient(#78835a,#626d47);box-shadow:0 3px 0 #4e5837}
.progress{box-shadow:inset 0 1px 2px #795b3620}.progress i{background:linear-gradient(90deg,#ce7a3b,#e3a756)}
#message{padding:0 8px;border-radius:12px;color:#6d523d}
.home-dialog{background:linear-gradient(#f3dcae 0 42%,#fff9ed 42%)}
.home-primary{background:linear-gradient(#7b865d,#667249)!important}
dialog button{font-weight:800}
@media(max-height:620px){.home-room{height:26dvh;min-height:138px}.home-dialog{padding-top:8px;padding-bottom:10px}.home-dialog .eyebrow{margin-top:11px!important}.home-dialog h1{font-size:36px}.home-copy{margin:7px 0 8px!important;font-size:14px}.home-dialog button{min-height:42px;margin-top:6px;padding:8px 14px}.home-progress{margin-top:6px!important}.tutorial-visual{height:152px;margin-bottom:9px}.tutorial-dialog>p{min-height:42px;margin-bottom:8px}}
@media(max-width:340px){.heading p{font-size:14px}.small{padding-left:8px;padding-right:8px}.toolbar button{padding-left:3px;padding-right:3px}}

/* Preserve controls and reading order when users enlarge text or use very narrow windows. */
dialog h1,dialog h2,dialog p,dialog button,dialog label,.achievement,.level-card{overflow-wrap:anywhere}
@media(max-width:300px){dialog{padding-inline:14px}.preference-row,.achievements,.picker-dialog #levelgrid{grid-template-columns:1fr}.home-dialog{padding-inline:14px}.home-room{min-height:128px}.home-dialog h1{font-size:34px;letter-spacing:-2px}.tutorial-visual{height:128px}.win-paws{gap:3px}}

/* Keyboard users get both an outer focus ring and an in-grid cursor. */
#board:focus-visible{outline:4px solid #4c3424;outline-offset:4px;border-radius:12px}
.win-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.win-actions button{margin-bottom:0}
.level-card.shared{box-shadow:0 0 0 3px #e6aa3966;border-color:#c48325}.level-shared{position:absolute;right:8px;bottom:7px;padding:2px 5px;border-radius:999px;background:#fff0ca;color:#855624;font-size:9px;font-weight:900}