/* Compact play surface: space belongs to the words. */
header{height:54px;padding:0 20px}.brand{font-size:17px;display:flex;align-items:center;gap:7px}.brand b{font-weight:650}.brand>span{margin:0}.tools button{padding:7px 12px;font-size:11px}main{height:calc(100dvh - 54px);padding:10px 20px 7px}.playing .heading{display:none}.mode-bar{margin:0 0 8px;gap:10px}.mode-switch{width:100%;border:0;background:transparent;border-radius:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.mode-switch button{background:#e7ecdf;border:1px solid #d1dbc5;box-shadow:0 2px 0 #d3dec933;border-radius:13px;padding:9px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:53px;line-height:1.3}.mode-switch button strong{font-size:13px;font-weight:650}.mode-switch button small{font-size:10px;font-weight:400;opacity:.7}.mode-switch button.active{background:#315b49;border-color:#315b49;color:#fff;box-shadow:0 3px 0 #213e31}.mode-bar>span{display:none}.progress-row{margin:3px 0 9px;gap:12px}.workspace{grid-template-columns:154px minmax(0,1fr);gap:12px}.rail-heading{padding-bottom:7px;font-size:9px}.rail-heading span{display:none}aside{padding:10px 8px 7px;border-radius:15px}.room{gap:5px;padding:5px;flex-direction:row}.room .room-art{width:43px}.room .room-art svg{max-height:48px}.room strong{font-size:11px}.room .translation{font-size:9px}.room .room-count{font-size:9px}.rail-foot{font-size:8px;line-height:1.5;margin-top:6px}.collection{border-radius:15px}.collection-head{padding:10px 13px 8px;flex-direction:row;align-items:center}.collection-head b{font-size:17px}.collection-head #new-count{font-size:9px;margin-top:3px}.filters{padding:3px}.filters button{font-size:10px;padding:6px 10px}.scroll-hint{font-size:9px;padding:0 13px 6px}.feedback{font-size:11px;padding:8px 12px;min-height:36px}#list{padding:10px 12px}#items{grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:9px}#items.memory-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))!important}.item{padding:6px 5px;border-radius:12px}.illustration{height:46px}.illustration svg{width:52px;height:46px}.word{font-size:14px;font-weight:550;line-height:1.35;min-height:39px}.cn{font-size:10px}.learn-tag{font-size:7px;top:4px;right:4px}.memory-card,.card-inner{height:114px;min-height:114px}.card-front{padding:5px}.card-front svg{width:48px;height:43px}.card-front .word{font-size:13px;line-height:1.3;min-height:40px}.card-front .cn{font-size:9px;line-height:1.2}.card-back span{font-size:27px}.card-back small{font-size:6px;letter-spacing:1px}.card-back:before{inset:6px;border-radius:7px}.card-back,.card-front{border-radius:11px}footer{font-size:8px;padding-top:6px}.mode-nudge{animation:nudge 1s ease-in-out 2}@keyframes nudge{50%{filter:drop-shadow(0 0 5px #bb9b5c88);transform:translateY(-2px)}}
.welcome-dialog{max-width:505px}.welcome-languages{margin-bottom:20px;display:flex;flex-direction:column;align-items:center;gap:10px}.welcome-languages>span{font-size:10px;color:#88987a;letter-spacing:1px}.welcome-languages>div{display:flex;gap:5px;background:#e9efdf;border-radius:25px;padding:4px}.welcome-languages button{padding:9px 25px;border-radius:23px;font-size:13px;background:transparent}.welcome-languages button.active{background:#315b49;color:white}.welcome-dialog h2 small{font:12px/1.7 system-ui;display:block;color:#8e9b82;margin-top:7px}.welcome-dialog .mini-house{margin-bottom:12px}.welcome-dialog #welcome-guide{display:inline-block;margin:14px 7px 0}.welcome-dialog #welcome-skip{display:inline-block;margin:14px 7px 0}
.guide-overlay{z-index:170}.guide-dialog{background:#fffcf4;border:1px solid #e5e8d9;box-shadow:0 20px 90px #17372b33;border-radius:23px;max-width:760px;width:100%;max-height:95dvh;overflow:auto;padding:25px}.guide-top{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#91a081;font-size:9px;letter-spacing:1px}.guide-top .text-button{margin:0;font-size:10px}#guide-progress{display:flex;gap:8px;margin:17px 0 23px}#guide-progress span{flex:1;background:#edf1e5;padding:10px;border-radius:11px;font-size:11px;text-align:center;color:#8d9b7d}#guide-progress .active{background:#315b49;color:white}#guide-progress .complete{background:#dce9c9;color:#6b8659}.guide-dialog h2{font-family:Georgia,'Songti SC',serif;font-weight:500;font-size:27px;margin:0 0 11px}#guide-copy{font-size:12px;line-height:1.8;color:#7b8c6c;margin:0 0 20px}.guide-sort{display:grid;grid-template-columns:1fr 1.3fr;gap:15px;background:#e9efdf;border-radius:16px;padding:15px}.guide-zones,.guide-objects{display:grid;grid-template-rows:1fr 1fr;gap:10px}.guide-zones button{background:#f9faef;border:2px dashed #bfcca9;border-radius:13px;min-height:117px;padding:8px;display:flex;align-items:center;justify-content:center;flex-direction:column}.guide-zones svg{width:74px;height:58px}.guide-zones strong{font-size:13px}.guide-zones small{font-size:10px;color:#8a9a77;margin-top:4px}.guide-object{padding:10px;border:2px solid transparent;background:#fffdf4;border-radius:13px}.guide-object .guide-picture{display:block;touch-action:none;cursor:grab}.guide-object svg{width:72px;height:64px;pointer-events:none}.guide-object b{display:block;font-size:14px}.guide-object small{display:block;font-size:11px;color:#829c6d;margin-top:4px}.guide-object.selected{border-color:#d1ac6a;background:#fff2d7}.guide-object.sorted{opacity:.6;background:#e1eacb}.guide-memory{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:435px;margin:auto}.guide-flip{height:137px;border:2px solid #d4dfc7;border-radius:15px;background:repeating-linear-gradient(45deg,#e0e9d5,#e0e9d5 15px,#e5eddf 15px,#e5eddf 16px);display:flex;flex-direction:column;align-items:center;justify-content:center}.guide-flip>span{font:40px Georgia;color:#91a47e}.guide-flip.open{background:#f9f8ee}.guide-flip svg{width:70px;height:68px}.guide-flip b{font-size:13px;margin-top:5px}.guide-speech{text-align:center;background:#f0f3e6;border-radius:17px;padding:25px 15px}.guide-speech>svg{width:90px;height:80px}.guide-speech>strong{display:block;font-size:23px;margin:10px 0 20px}.guide-speech>div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.guide-speech .primary{margin:0}.guide-speech .text-button{margin-top:20px}.guide-finish{text-align:center;font-size:65px;padding:15px}.guide-finish p{font-size:17px;color:#8b9f74}.guide-finish .primary{display:block;margin:auto}.guide-note{font-size:9px;color:#a0aa92;display:block;text-align:center}#guide-feedback{font-size:12px;text-align:center;color:#7c965e;min-height:36px;line-height:1.8;margin:17px 0 5px}.guide-ghost{z-index:185}
@media(min-width:1100px){#items{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}.workspace{grid-template-columns:175px minmax(0,1fr)}#items.memory-grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr))!important}}
@media(max-width:650px){header{height:48px;padding:0 10px}.brand b,.brand small{display:none}.brand>span{font-size:17px;padding:4px 8px}.tools{gap:4px}.tools button{font-size:10px;padding:7px 8px}main{height:calc(100dvh - 48px);padding:8px 8px 5px}.mode-switch{gap:6px}.mode-switch button{padding:7px 4px;border-radius:10px;min-height:49px}.mode-switch button strong{font-size:11px}.mode-switch button small{font-size:8px;line-height:1.35}.progress-row{margin:1px 0 7px;gap:9px}.workspace{grid-template-columns:91px minmax(0,1fr);gap:7px}aside{padding:7px 5px}.rail-heading{display:none}.room{flex-direction:column;gap:2px;padding:4px 2px}.room .room-art{width:34px}.room .room-art svg{max-height:31px}.room strong{font-size:9px;line-height:1.25}.room .translation{font-size:8px;margin-top:2px}.room .room-count{font-size:8px;margin-top:2px}.rail-foot{display:none}.collection-head{padding:7px 8px 5px;gap:4px}.collection-head b{font-size:14px}.collection-head #new-count{display:none}.filters{padding:2px}.filters button{font-size:8px;padding:5px 6px}.filters button span{margin-left:2px}.scroll-hint{font-size:8px;line-height:1.5;padding:0 8px 5px}.feedback{font-size:9px;padding:7px;min-height:33px}#list{padding:7px 6px}#items{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#items.memory-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.illustration{height:35px}.illustration svg{width:37px;height:34px}.item{padding:5px 2px}.word{font-size:11px;min-height:42px;font-weight:550;line-height:1.3;overflow-wrap:anywhere}.cn{font-size:8px}.learn-tag{display:none}.memory-card,.card-inner{height:103px;min-height:103px}.card-front{padding:4px 2px}.card-front svg{width:33px;height:30px}.card-front .word{font-size:11px;min-height:43px;line-height:1.28}.card-front .cn{font-size:8px;line-height:1.2}.card-back span{font-size:24px}.card-back small{font-size:5px;letter-spacing:.5px}.card-back:before{inset:4px}.memory .filters button[data-filter=todo]{min-width:0}footer{font-size:7px;padding-top:5px}.guide-dialog{padding:18px}.guide-dialog h2{font-size:23px}#guide-progress{gap:5px;margin:13px 0 17px}#guide-progress span{font-size:10px;padding:8px 5px}.guide-sort{padding:10px;gap:10px}.guide-zones button{min-height:110px}.guide-zones svg{width:62px;height:50px}.guide-object svg{width:59px;height:54px}.guide-object b{font-size:12px}.guide-flip{height:125px}.guide-memory{gap:9px}.guide-speech>div .secondary,.guide-speech>div .primary{font-size:11px;padding:12px 16px}}
@media(max-width:360px){.workspace{grid-template-columns:79px minmax(0,1fr)}#items,#items.memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.mode-switch button strong{font-size:10px}.mode-switch button small{font-size:7px}.tools button{padding:6px;font-size:9px}}
.save-note{background:#edf1e5;border:1px solid #dce5ce;border-radius:12px;padding:11px 14px;font-size:10px!important;line-height:1.8!important;color:#869776!important}.welcome-dialog #welcome-save{font-size:10px;margin-top:8px}.saves-overlay{z-index:210}.saves-dialog{max-width:510px}.saves-dialog h2{font-size:27px}.saves-dialog>p{font-size:12px;line-height:1.9}.save-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:20px 0}.save-actions .primary{margin:0}.save-actions .secondary{font-size:12px}#save-status{min-height:50px;background:#eef2e5;border-radius:12px;padding:13px;color:#7c9264}#save-confirm{margin:5px 0}.byline{font-size:7px;line-height:1.2;color:#9ba58e;white-space:nowrap;opacity:.7;margin-left:7px}footer>span:first-child{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#footer-saves{background:transparent;font-size:9px;color:#8c9a7c;padding:0 3px;white-space:nowrap;flex-shrink:0}@media(max-width:650px){.byline{font-size:6px;margin-left:3px}#footer-saves{font-size:8px}.save-note{font-size:9px!important;padding:9px 11px}}
.progress-row .mode-bar{display:flex;flex-shrink:0;margin:0;gap:0}.progress-row .mode-switch{display:flex;gap:4px;width:auto;background:transparent;padding:0}.progress-row .mode-switch button{width:26px;height:26px;min-height:26px;border-radius:9px;padding:0;gap:0;border:1px solid #d4ddc9;box-shadow:none;background:#e8eddf;color:#7e9270}.progress-row .mode-switch button strong{font-size:11px;font-weight:600}.progress-row .mode-switch button.active{background:#315b49;color:#fff;border-color:#315b49;box-shadow:0 1px 2px #2d4f3d18}.progress-row .mode-switch button small{display:none}.playing .progress-row{margin-top:0;margin-bottom:8px}.progress-row{gap:10px}#mode-note{display:none}@media(max-width:650px){.progress-row{gap:7px}.progress-row .mode-switch{gap:3px}.progress-row .mode-switch button{width:25px;height:25px;min-height:25px;border-radius:8px}.progress-row .mode-switch button strong{font-size:10px}.round-pill{font-size:8px;padding:4px 7px}.playing .progress-row{margin-bottom:7px}}
@media(max-height:560px){.mode-switch button{min-height:38px;padding:6px}.mode-switch button small{display:none}.mode-bar{margin-bottom:6px}.scroll-hint{display:none}.mode-switch button strong{font-size:11px}.room{flex-direction:row}.room .room-art{width:26px}.room .room-art svg{max-height:26px}.room .translation{display:none}.collection-head{padding:6px 9px}.guide-dialog{padding:15px;max-height:97dvh}}
#garden-toggle{position:relative;background:#e7eedc;border:1px solid #d5dfc8;width:47px;height:42px;border-radius:12px;padding:0;flex-shrink:0}#garden-toggle svg{width:38px;height:38px;display:block;margin:auto}#garden-toggle>span{position:absolute;bottom:-2px;right:-3px;background:#315b49;color:white;border-radius:10px;font:8px/1.5 system-ui;min-width:17px;padding:1px 4px}.garden-overlay{z-index:195}.garden-dialog{max-width:520px}.garden-dialog h2{font-size:25px}.garden-dialog h3{font:18px Georgia;color:#74915c;margin:5px 0}.garden-dialog p{font-size:12px}.garden-dialog .garden-rules{font-size:10px;line-height:1.8;background:#f0f3e5;padding:11px;border-radius:12px;margin-top:20px}.garden-dialog .garden-milestones{font-size:9px;color:#899e73;line-height:1.9}.garden-dialog .fine{font-size:9px}#garden-tree{height:155px;margin:10px auto 0}#garden-tree svg{height:100%;width:160px}.garden-dialog .primary:disabled{opacity:.4;cursor:default}.garden-dialog .primary{margin:5px 0}.growth-toast{position:fixed;top:65px;left:20px;z-index:140;background:#f0f6e4;border:1px solid #cbdcb5;color:#6c8852;border-radius:20px;padding:10px 17px;font-size:12px;pointer-events:none;box-shadow:0 8px 25px #43612918;animation:grow-toast 1.9s ease forwards}@keyframes grow-toast{0%{opacity:0;transform:translateY(10px)}15%,75%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-14px)}}.watered{animation:tree-water .85s ease}@keyframes tree-water{40%{transform:rotate(-3deg) scale(1.08)}70%{transform:rotate(3deg)}}#level-reward{background:#eef4e2;padding:12px;border-radius:13px;color:#6e8d54;font-size:12px}#level-water{font-size:11px;padding:10px 20px;margin:0 10px 10px}@media(max-width:650px){#garden-toggle{width:35px;height:34px;border-radius:10px}#garden-toggle svg{width:31px;height:31px}#garden-toggle>span{font-size:7px}.garden-dialog h2{font-size:22px}.growth-toast{top:54px;left:10px;font-size:10px;padding:9px 13px}.brand{gap:0}}


.room{touch-action:manipulation}.scene-swap-icon{position:absolute;right:5px;top:3px;font-size:12px;color:#8a9d77;opacity:.8;line-height:1;pointer-events:none}