@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root{--ink:#1c433a;--text:#263f39;--muted:#7a8982;--paper:#f7f7f2;--line:#dfe5dd;--orange:#cd7645;--panel:#fffefa;font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--text);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #dc9d61;outline-offset:3px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.topbar{height:92px;display:flex;align-items:center;gap:28px;padding:0 36px;border-bottom:1px solid var(--line);background:var(--panel)}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:43px;height:45px;display:grid;place-items:center;background:var(--ink);color:#fffbea;border-radius:13px 13px 13px 2px;font:34px Georgia}.brand strong{font-size:19px;letter-spacing:2px}.brand small{display:block;font-size:10px;letter-spacing:3.5px;margin-top:4px}.header-divider{height:30px;border-left:1px solid var(--line)}.project-title{font-family:Georgia,serif;font-size:22px}.project-title span{font:14px 'Noto Sans SC',sans-serif;margin-left:12px;color:var(--muted)}.header-actions{margin-left:auto;display:flex;gap:26px;align-items:center}.device-note{color:var(--muted);font-size:13px}.button,.icon-button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;min-height:38px;padding:8px 13px;font-size:14px;transition:background .15s,transform .15s}.button:hover,.icon-button:hover{background:#eaf0e8}.button:active,.icon-button:active{transform:translateY(1px)}.subtle{background:transparent;border-color:transparent;display:flex;gap:10px;align-items:center}.subtle>span{border:1px solid #98a59e;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;font-size:12px}.workspace{height:calc(100dvh - 92px);min-height:610px;display:grid;grid-template-columns:minmax(0,1fr) 322px}.map-panel{padding:26px 26px 0 34px;display:flex;flex-direction:column;min-width:0;min-height:0}.map-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 20px 3px;min-height:66px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--muted);margin:0 0 9px}h1{font:34px Georgia,serif;letter-spacing:-.8px;margin:0}h1 span{font:16px 'Noto Sans SC',sans-serif;letter-spacing:.7px;color:#7b8880;margin-left:12px}kbd{font:11px 'DM Sans',sans-serif;display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:25px;padding:0 5px;border-radius:4px;background:#f4f5ee;border:1px solid #d4dcd2;box-shadow:0 2px 0 #e1e5dc;color:#5c6d62;white-space:nowrap}.back{display:flex;gap:10px;align-items:center;border:0;background:transparent}.back kbd{font-size:10px;height:22px}.map-stage{position:relative;min-height:380px;flex:1;border-radius:15px;overflow:hidden;border:1px solid #dde4da;background:#edf0e6;isolation:isolate;box-shadow:0 2px 4px #234c3603,0 10px 34px #26432f04}.map-stage>canvas{width:100%;height:100%;display:block;outline:none}.stage-label{position:absolute;top:22px;left:22px;background:#fffff4e8;backdrop-filter:blur(8px);padding:9px 13px;font-size:12px;border:1px solid #dfe4d5;border-radius:7px;display:flex;gap:8px;align-items:center;pointer-events:none}.location-dot{height:6px;width:6px;background:var(--orange);border-radius:50%}.map-tools{position:absolute;right:18px;top:18px;display:flex;gap:5px;align-items:center}.map-tools .button{display:flex;gap:7px;align-items:center}.map-tools kbd{height:20px;min-width:18px;font-size:10px}.icon-button{font-size:20px;width:36px;padding:4px}.hint-bar{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);border-radius:11px;background:#1c433af2;color:#fffdf0;padding:13px 19px;display:flex;gap:12px;align-items:center;font-size:14px;box-shadow:0 8px 24px #18382e25;white-space:nowrap;max-width:calc(100% - 26px)}.hint-bar kbd{margin:0 4px;background:#416257;border-color:#6b8275;box-shadow:none;color:#fff9e8}.hint-icon{font-size:21px;color:#edb785}.hint-bar.is-ready{background:#b96036}.map-footer{min-height:62px;display:flex;align-items:center;gap:28px;font-size:12px;color:#77847d}.map-footer kbd{margin-right:3px;height:22px;min-width:19px;font-size:10px}.muted{margin-left:5px}.footer-caption{margin-left:auto;font-size:11px;letter-spacing:.4px}.learning-panel{border-left:1px solid var(--line);background:var(--panel);padding:30px 25px 22px;display:flex;flex-direction:column;overflow-y:auto;min-height:0}.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.panel-top .eyebrow{font-size:10px;letter-spacing:1.7px;margin:0}.chapter-number{font-size:11px;color:#99a297}.welcome-card{padding-top:15px}.mini-map-symbol{font-size:36px;color:#92a78d;margin-bottom:24px}.welcome-card h2{font-size:29px;line-height:1.6;letter-spacing:-1px;font-weight:500;margin:0}.welcome-card h2 em{font:italic 44px Georgia;color:var(--orange);letter-spacing:-1px}.welcome-card>p{font-size:14px;line-height:1.9;color:#7e8a80;margin:20px 0 27px}.chapter-facts{display:flex;padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px}.chapter-facts>div{flex:1;display:flex;gap:10px;align-items:baseline}.chapter-facts>div+div{padding-left:20px;border-left:1px solid var(--line)}.chapter-facts strong{font:33px Georgia}.chapter-facts span{font-size:12px;color:var(--muted)}.destination{display:flex;gap:10px;align-items:center}.destination-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#f0eee0;color:var(--orange);font-size:20px}.destination strong{font-size:14px;font-weight:500}.destination div>span{display:block;font-size:11px;color:var(--muted);margin-top:6px}.destination>kbd{margin-left:auto;font-size:10px}.welcome-card .quiet-note{font-size:11px;margin-top:22px;color:#97a096}.panel-bottom{margin-top:auto;padding-top:28px;font-size:11px;color:#91a08e;display:flex;align-items:center;gap:9px}.tiny-star{color:#76936d;font-size:23px}.word-category{font-size:11px;color:#81937e;letter-spacing:1px;margin:0 0 13px}.word-visual{position:relative;background:#fff;border:1px solid #e9ebe2;border-radius:12px;height:194px;display:grid;place-items:center;overflow:hidden}.word-visual canvas{width:100%;height:100%;object-fit:contain}.word-index{position:absolute;bottom:12px;right:12px;font-size:10px;color:#9aab91;letter-spacing:1px}.word-copy{padding-top:23px}.word-state{font-size:10px;color:#91a088;letter-spacing:1px}.word-copy h2{font-size:30px;letter-spacing:-.7px;margin:9px 0 7px;line-height:1.2;font-weight:600;overflow-wrap:anywhere}.pronunciation{display:flex;gap:10px;align-items:center;color:#7e9080;font:16px Arial,sans-serif;min-height:23px}.accent-label{font:10px 'Noto Sans SC',sans-serif;border:1px solid #dce2d5;border-radius:3px;padding:2px 4px}.word-copy p{font-size:18px;margin:15px 0 20px}.speak-button{width:100%;background:var(--ink);color:#fff9ec;border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;min-height:45px;font-size:14px}.speak-button:hover{background:#295747}.speak-button svg{width:20px;height:20px}.speak-button kbd{margin-left:auto;background:#3b5d4e;color:#e9eedc;border:0;box-shadow:none;height:21px;min-width:21px}.speak-button svg{margin-right:auto}.audio-status{font-size:11px;color:#8c9988;min-height:18px;margin:9px 0 0;line-height:1.4}.map-directory{border-top:1px solid var(--line);margin-top:16px;padding-top:18px}.directory-heading{display:flex;justify-content:space-between;align-items:center}.directory-heading h3{font-weight:500;font-size:13px;margin:0}.directory-heading>span{font-size:10px;color:#91a088}#minimap{width:100%;height:110px;margin-top:7px;display:block}.region-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:10px}.region-item{font-size:11px;color:#7e8c7d;display:flex;align-items:center;gap:7px}.region-item i{height:6px;width:6px;border-radius:2px;background:var(--region-color)}.region-item.active{color:var(--ink);font-weight:600}.learning-panel:has(.word-card:not([hidden])) .panel-top{margin-bottom:18px}.learning-panel:has(.word-card:not([hidden])) .panel-bottom{padding-top:18px}.loading{position:absolute;inset:0;background:#edf0e6;display:flex;gap:14px;align-items:center;justify-content:center;font-size:14px}.loading-ring{width:24px;height:24px;border:2px solid #cbd6c4;border-top-color:#426c4c;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:1px solid #dce3d5;border-radius:20px;padding:38px;width:480px;max-width:calc(100% - 32px);color:var(--text);background:var(--panel);box-shadow:0 25px 100px #132f3555}dialog::backdrop{background:#1a33296b;backdrop-filter:blur(3px)}dialog h2{font-size:25px;margin:15px 0}dialog .help-intro,dialog .help-note{color:var(--muted);font-size:14px;line-height:1.8}.dialog-close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:27px;color:#728274}dl{margin:26px 0}dl>div{display:flex;justify-content:space-between;align-items:center;margin:15px 0;font-size:13px}dd{margin:0}.help-note{padding-top:14px;border-top:1px solid var(--line)}.primary{background:var(--ink);color:#fff;border:0;width:100%;margin-top:15px}.primary:hover{background:#2c5b49}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff8e8;padding:12px 22px;border-radius:9px;font-size:14px;z-index:50}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 365px}.learning-panel{padding:32px}.map-panel{padding:30px 34px 0 42px}.word-visual{height:230px}.word-copy h2{font-size:36px}.word-copy{padding-top:27px}.map-directory{margin-top:25px}#minimap{height:145px}}
@media(max-height:820px) and (min-width:901px){.topbar{height:76px}.workspace{height:calc(100dvh - 76px);min-height:550px}.map-panel{padding-top:20px}.map-heading{margin-bottom:12px;min-height:57px}h1{font-size:30px}.map-footer{min-height:50px}.learning-panel{padding-top:24px}.word-visual{height:145px}.word-copy{padding-top:15px}.word-copy h2{font-size:27px}.word-copy p{margin:11px 0 14px}.panel-top{margin-bottom:20px}.map-directory{margin-top:7px;padding-top:12px}#minimap{height:85px}.region-list{gap:6px;margin-top:4px}.panel-bottom{padding-top:18px}.welcome-card{padding-top:0}.welcome-card .mini-map-symbol{margin-bottom:16px}.welcome-card>p{margin:17px 0 23px}.chapter-facts{padding:18px 0}.footer-caption{display:none}}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 280px}.topbar{padding:0 24px}.map-panel{padding-left:20px;padding-right:18px}.learning-panel{padding-left:21px;padding-right:21px}.footer-caption{display:none}.hint-bar{font-size:12px;padding:11px}.map-heading h1 span{font-size:14px}.word-copy h2{font-size:26px}.map-tools{top:62px}}
@media(max-width:760px){.topbar{height:72px;padding:0 16px;gap:15px}.brand strong{font-size:16px}.brand small{font-size:8px}.brand-mark{width:35px;height:38px;font-size:29px}.header-divider,.project-title,.device-note{display:none}.header-actions{gap:0}.workspace{height:auto;min-height:calc(100dvh - 72px);grid-template-columns:1fr}.map-panel{padding:18px 13px 0}.map-stage{height:57dvh;min-height:370px;flex:none}.map-heading{margin-bottom:12px}.learning-panel{border-left:0;border-top:1px solid var(--line);padding:24px}.welcome-card{padding-top:0}.welcome-card h2 br{display:none}.welcome-card h2 em{font-size:32px}.mini-map-symbol,.chapter-facts,.quiet-note,.panel-bottom{display:none}.welcome-card>p{margin:12px 0 20px}.word-card{display:grid;grid-template-columns:130px 1fr;gap:10px 20px}.word-category{grid-column:1/-1}.word-visual{height:140px;grid-row:2/4}.word-copy{padding:0}.speak-button{grid-column:2}.audio-status{grid-column:1/-1}.map-directory{display:none!important}.map-heading h1{font-size:29px}.back{font-size:12px;padding:5px}.back kbd{display:none}.stage-label{left:14px;top:14px;font-size:10px}.hint-bar{bottom:15px;white-space:normal;width:max-content}.map-footer{gap:14px;font-size:10px;flex-wrap:wrap;padding:12px 0}.map-tools{top:12px;right:12px}.map-tools button{min-height:30px;height:30px;padding:4px 8px}.map-tools kbd{display:none}.region-list{grid-template-columns:repeat(4,1fr)}}
.word-visual canvas{position:absolute;inset:0;min-width:0;min-height:0}.word-visual.empty:after{content:'走近一个物品';position:absolute;inset:0;display:grid;place-items:center;color:#98a78f;font-size:14px}.word-visual.empty canvas{display:none}.word-visual.empty .word-index{font-size:10px}.region-item{font-size:12px}.word-category{font-size:12px}.word-state{font-size:12px}.audio-status{font-size:12px}.stage-label{font-size:13px}.directory-heading h3{font-size:14px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#minimap{height:auto;aspect-ratio:26/17;cursor:pointer;border-radius:8px;margin-top:10px}
.minimap-legend{display:flex;justify-content:center;gap:16px;margin:7px 0;color:#7b897a;font-size:11px}.minimap-legend span{display:flex;align-items:center;gap:5px}.minimap-legend i{width:7px;height:7px;display:block;border-radius:50%}.player-dot{background:#204c3c}.goal-dot{background:#c28146}
.route-hint{display:flex;gap:8px;align-items:center;min-height:35px;margin:6px 0}.route-hint p{margin:0;font-size:12px;line-height:1.6;color:#48684f}.route-hint button{margin-left:auto;padding:4px 6px;border:0;background:transparent;color:#8c7760;font-size:11px;white-space:nowrap;text-decoration:underline}
.region-list{gap:6px;margin-top:2px}.region-item{background:transparent;border:1px solid #e1e6da;border-radius:6px;padding:7px 8px;text-align:left;min-height:31px;transition:background .15s,border-color .15s}.region-item:hover{background:#edf2e7;border-color:#aabb9f}.region-item.active{background:#e9f0e1;border-color:#aabc9d}.region-item.selected{background:#fff3e3;border-color:#c4905c;color:#7b572f}
.compact-area-picker{display:none;width:100%;min-height:34px;border:1px solid #ccd7c3;border-radius:6px;background:#fffef8;color:#385d43;font:12px 'Noto Sans SC',sans-serif;padding:6px 9px}.compact-area-picker:focus-visible{outline:3px solid #dc9d61;outline-offset:2px}
@media(max-height:900px) and (min-width:901px){.learning-panel{padding-top:18px}.learning-panel:has(.word-card:not([hidden])) .panel-top{margin-bottom:10px}.word-category{font-size:11px;margin-bottom:8px}.word-visual{height:104px}.word-copy{padding-top:8px}.word-state{font-size:11px}.word-copy h2{font-size:24px;margin:4px 0}.pronunciation{font-size:14px;min-height:19px}.word-copy p{font-size:16px;margin:7px 0 10px}.speak-button{min-height:41px;padding:10px}.audio-status{font-size:11px;min-height:16px;margin-top:7px}.map-directory{margin-top:7px;padding-top:9px}#minimap{margin-top:7px}.minimap-legend{font-size:10px;margin:5px 0}.route-hint{min-height:27px;margin:4px 0}.route-hint p{font-size:11px}.compact-area-picker{display:block}.region-list{display:none}.learning-panel:has(.word-card:not([hidden])) .panel-bottom{display:none}}

.room-announcement{font-size:11px!important;letter-spacing:1px;color:#568064!important;margin:0 0 16px!important}.welcome-card h2 em{font-size:38px}.secondary-destination{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

.nearby-card{position:absolute;width:280px;max-width:calc(100% - 24px);display:grid;grid-template-columns:76px minmax(0,1fr);gap:11px;align-items:center;padding:13px;background:#fffef7f5;border:1px solid #d3ddc8;border-radius:14px;box-shadow:0 8px 30px #243f3626;pointer-events:none;z-index:3;animation:nearby-arrive .15s ease-out}
.nearby-card:before{content:'';position:absolute;left:-5px;top:50%;width:9px;height:9px;transform:rotate(45deg);background:#fffef7;border-left:1px solid #d3ddc8;border-bottom:1px solid #d3ddc8}
.nearby-card canvas{width:76px;height:76px;border-radius:10px;background:white}.nearby-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.nearby-copy>span:first-child{font-size:10px;color:#7f9075}.nearby-copy strong{font-size:18px;line-height:1.2;color:#214a3b;overflow-wrap:anywhere}#nearby-ipa{font:13px Arial,sans-serif;color:#69826e}#nearby-meaning{font-size:13px;line-height:1.4;color:#385540}.nearby-copy small{font-size:9px;color:#83917c;margin-top:2px}.nearby-copy kbd{font-size:9px;min-width:15px;height:16px;padding:0 3px;box-shadow:none}
@keyframes nearby-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.nearby-card{animation:none}}

.nearby-card[data-side="left"]:before{left:auto;right:-5px;transform:rotate(225deg)}.nearby-card[data-side="above"]:before{left:calc(50% - 5px);top:auto;bottom:-5px;transform:rotate(-45deg)}

.home-room-list{display:grid;gap:12px;margin:22px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;line-height:1.7;color:#536c5e}

/* Compact Home map spacing; retain the original shared responsive sidebar. */
@media(min-width:901px){
 .is-home .map-panel{padding:16px 18px 0 20px}
 .is-home .map-heading{min-height:50px;margin-bottom:10px}
 .is-home .map-footer{min-height:40px;gap:20px}
}
@media(min-width:1600px){.is-home .map-panel{padding:20px 24px 0}}

.theme-choices{display:grid;gap:12px;margin-bottom:25px}.theme-choice{padding:16px 14px;border:1px solid #becdb8;border-radius:10px;background:#f2f5e9;color:#254e3c;font:500 17px 'DM Sans','Noto Sans SC',sans-serif;text-align:left}.theme-choice:hover{background:#e2ecd8}.theme-room-list{display:grid;gap:10px;padding:18px 0;border-block:1px solid var(--line);font-size:13px;line-height:1.6;color:#536c5e}.loading{flex-direction:column;text-align:center;padding:30px}.loading p{max-width:440px;overflow-wrap:anywhere}.is-world .welcome-card h2{font-size:25px}.is-world .stage-label{font-size:12px}@media(max-width:1100px){.map-heading{gap:10px}.map-heading h1{font-size:27px}.back{font-size:12px;padding:4px}.hint-bar{white-space:normal;text-align:center}}

/* New theme instructions sit below the image: never cover the player or exit. */
.is-theme .map-panel > .hint-bar{position:static;transform:none;align-self:center;margin:8px 0 0;max-width:100%;font-size:12px;padding:8px 15px;box-shadow:none}.is-theme .map-stage{min-height:340px}.is-theme .map-footer{min-height:32px}.is-theme .map-panel>.hint-bar .hint-icon{font-size:18px}.is-theme .map-panel>.hint-bar kbd{height:20px}

.word-copy .image-note{font-size:12px;line-height:1.6;color:#785737;margin:8px 0;padding:8px;background:#fbf2dc;border-radius:6px}
.directory-heading{gap:8px}.directory-heading>span{flex-shrink:0;white-space:nowrap}

/* New-theme diagrams need readable detail inside the existing memory card. */
@media(min-width:761px){.is-new-room .word-visual{height:236px}.is-new-room .word-visual canvas{min-height:0}.is-new-room .word-index{bottom:6px;right:8px;background:#ffffffdd;padding:1px 4px;border-radius:3px}}