/* Shared navigation for the Speaking meadow and Written blossom garden. */
.expression-map-toggle { display:flex; align-items:center; justify-content:center; gap:9px; background:#214f3d; color:#fffbee; border-color:#214f3d; }
.expression-map-toggle:hover { background:#163e2e; color:#fffbee; }
.expression-map-toggle svg { width:21px; height:21px; }
.expression-map { --forest:#193f2f; --cream:#fffae9; overflow:hidden; border:1px solid #a7b99b; border-radius:28px; background:var(--cream); color:var(--forest); box-shadow:0 24px 60px #071c2840; font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; }
.expression-map button, .expression-map select { font:inherit; }
.expression-map button { cursor:pointer; }
.expression-map button:focus-visible, .expression-map select:focus-visible, .expression-map-viewport:focus-visible { outline:3px solid #123e73; outline-offset:3px; }
.expression-map-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:22px 26px 16px; background:linear-gradient(110deg,#fffbed,#f3eed7); }
.expression-map-heading p { margin:0 0 5px; font-size:10px; font-weight:800; letter-spacing:.19em; }
.expression-map-heading h2 { margin:0; font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(24px,3vw,34px); line-height:1.2; }
.expression-map-heading h2 small { font-family:ui-sans-serif,system-ui,sans-serif; font-size:12px; font-weight:500; display:block; margin-top:5px; color:#56704f; }
.expression-map-characters { display:flex; gap:8px; border:0; padding:0; margin:0; }
.expression-map-characters legend { font-size:11px; font-weight:700; margin-bottom:6px; color:#566849; }
.expression-map-character { display:flex; align-items:center; gap:5px; min-height:55px; padding:3px 12px 3px 4px; border:1px solid #b4c1a3; border-radius:15px; background:#ffffff91; font-size:12px!important; font-weight:700!important; }
.expression-map-character[aria-pressed=true] { border-color:#345938; background:#e5edce; box-shadow:inset 0 0 0 1px #345938; }
.expression-map-character canvas { width:37px; height:48px; }
.expression-map-closet-button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:55px; padding:5px 11px; border:1px solid #554b43; border-radius:15px; color:#fff6e8; background:linear-gradient(145deg,#433832,#211d1b); box-shadow:inset 0 0 0 1px #ac7b5140,0 4px 10px #2b20161c; font-size:12px!important; font-weight:750!important; }
.expression-map-closet-button:hover { background:linear-gradient(145deg,#55463d,#2b2421); }
.expression-map-closet-button svg { width:24px; height:29px; fill:#332925; stroke:#c99c70; stroke-width:1.4; }
.expression-map-closet-button span { display:grid; text-align:left; line-height:1.05; }
.expression-map-closet-button small { margin-top:4px; color:#d8bfa5; font-size:9px; font-weight:600; letter-spacing:.12em; }
.expression-map-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 26px; border-top:1px solid #254e2e1a; border-bottom:1px solid #254e2e40; }
.expression-map-picker { display:flex; align-items:center; gap:10px; min-width:0; font-size:12px; font-weight:700; }
.expression-map-picker select { min-width:0; width:300px; max-width:100%; font-size:16px; border:1px solid #b5c1a3; padding:9px 30px 9px 10px; border-radius:9px; color:#254632; background:#fffdf5; }
.expression-map-zoom { display:flex; gap:6px; flex-shrink:0; }
.expression-map-zoom button { min-width:40px; min-height:40px; padding:7px 10px; border:1px solid #b5c1a3; border-radius:9px; background:#fffdf5; font-size:14px; font-weight:700; }
.expression-map-viewport { position:relative; height:clamp(380px,64dvh,780px); overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; -webkit-overflow-scrolling:touch; background:#85b660; scrollbar-color:#517444 #a6c78e; scrollbar-width:thin; }
.expression-map-viewport[data-dragging=true] { cursor:grabbing; user-select:none; }
.expression-map-space { position:relative; }
.expression-map-world { position:absolute; top:0; left:0; width:1600px; height:1950px; transform-origin:top left; isolation:isolate; }
.expression-map-terrain { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.expression-map-stone { position:absolute; width:180px; height:104px; padding:0; margin:-45px 0 0 -90px; border:0; background:none; z-index:2; color:#24402b; }
.expression-map-stone::before { content:""; position:absolute; width:88px; height:63px; left:46px; top:0; border-radius:50%; background:linear-gradient(165deg,#fffae2 4%,#e7d6a5 66%,#b6a579); border:3px solid #fff5ce; box-shadow:0 7px 0 #7b8256,0 11px 0 #476044,0 18px 14px #20472359,inset 0 -4px 2px #b8b080; transition:filter .15s; }
.expression-map-stone:hover::before { filter:brightness(1.13); }
.expression-map-stone[data-complete=true]::before { background:linear-gradient(165deg,#d8f29e,#87bd64); border-color:#f1ffbc; box-shadow:0 7px 0 #5f8847,0 11px 0 #365636,0 18px 14px #20472359; }
.expression-map-stone[aria-pressed=true]::before { outline:4px solid #fffce7; outline-offset:6px; }
.expression-map-stone-number { position:absolute; top:11px; left:0; width:100%; font:700 30px/1.2 Georgia,serif; text-shadow:0 1px #fffaf0; }
.expression-map-stone-caption { display:block; position:absolute; left:-5px; top:83px; width:190px; padding:5px 7px 6px; color:#183b2b; border:1px solid #f8f4d499; border-radius:11px; background:linear-gradient(135deg,#fffbe9e8,#f3efcef0); box-shadow:0 3px 8px #35552c1f; font:500 18px/1.24 Georgia,serif; text-wrap:pretty; }
.expression-map-stone[data-arrived=true] .expression-map-stone-caption { opacity:0; }
.expression-map-stone[data-arrived=true]::before { animation:expression-stone-land 380ms ease-out; }
.expression-map-stone-status { position:absolute; top:45px; right:24px; min-width:36px; padding:4px 6px; border-radius:10px; font-size:13px; font-weight:800; background:#fff9df; box-shadow:0 2px 5px #21482a30; }
.expression-map-horse { position:absolute; width:136px; height:165px; margin-left:-68px; margin-top:-157px; pointer-events:none; z-index:4; }
.expression-map-shadow { position:absolute; width:60px; height:19px; margin-left:-30px; margin-top:-7px; border-radius:50%; background:#25452651; filter:blur(3px); pointer-events:none; z-index:3; }
.expression-map-stage { position:relative; }
.expression-map-lesson-card { position:absolute; z-index:10; width:min(286px,calc(100% - 20px)); border:1px solid #b8c39d; border-radius:17px; background:linear-gradient(125deg,#fffdf2,#f2eed7); box-shadow:0 12px 28px #274c333b,0 2px 6px #274c331f; animation:expression-arrival 260ms ease-out both; transform-origin:var(--pointer-x,50%) top; }
.expression-map-lesson-card::before { content:""; position:absolute; top:-7px; left:calc(var(--pointer-x,50%) - 7px); width:13px; height:13px; transform:rotate(45deg); background:#fffbee; border-top:1px solid #b8c39d; border-left:1px solid #b8c39d; }
.expression-map-selected { display:grid; grid-template-columns:27px minmax(0,1fr); align-items:start; gap:8px; padding:10px; }
.expression-map-selected-number { flex-shrink:0; width:27px; height:27px; display:grid; place-items:center; background:#254e39; color:#fff7d9; border-radius:8px; font:700 16px Georgia,serif; }
.expression-map-selected-copy { flex:1; min-width:0; }
.expression-map-selected-copy h3 { margin:0; font:600 19px/1.18 Georgia,serif; }
.expression-map-selected-copy p { margin:4px 0 0; font-size:12px; line-height:1.4; color:#526646; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.expression-map-open { grid-column:1 / -1; width:100%; display:flex; align-items:center; justify-content:center; gap:15px; min-height:40px; padding:8px 13px; flex-shrink:0; color:#fffbea!important; background:#25513c; border:1px solid #153b29; border-radius:12px; box-shadow:0 4px 0 #123824; font-weight:750!important; }
.expression-map-open small { display:inline; margin-left:5px; font-size:10px; font-weight:500; opacity:.85; }
.expression-map-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px; padding:11px 26px; font-size:11px; color:#5f7256; }
.expression-map-message { margin:0; }
.expression-map-legend { display:flex; gap:12px; }
.expression-map-legend span::before { content:""; display:inline-block; width:9px; height:9px; margin-right:4px; border-radius:50%; background:#d2c18c; border:1px solid #899262; }
.expression-map-legend span:last-child::before { background:#8fbc65; }
.expression-map-error { padding:20px; }
@media (max-width:650px) {
 .expression-map { border-radius:20px; }
 .expression-map-lesson-card { width:min(340px,calc(100% - 20px)); }
 .expression-map-header { padding:16px; gap:13px; }
 .expression-map-heading { width:100%; }
 .expression-map-heading h2 small { display:inline; margin-left:10px; }
 .expression-map-characters { width:100%; }
 .expression-map-character { flex:1; justify-content:center; }
 .expression-map-closet-button { flex:0 0 68px; padding-inline:7px; }
 .expression-map-closet-button span { display:none; }
 .expression-map-tools { padding:10px; gap:7px; }
 .expression-map-picker { flex:1; }
 .expression-map-picker > span { display:none; }
 .expression-map-picker select { width:100%; font-size:16px; }
 .expression-map-zoom { gap:3px; }
 .expression-map-zoom button { min-width:36px; padding:5px 7px; }
 .expression-map-viewport { height:55dvh; min-height:320px; }
 .expression-map-open { width:100%; min-height:44px; padding:8px 15px; }
 .expression-map-open small { display:inline; margin-left:5px; }
 .expression-map-footer { padding:10px 13px; font-size:10px; }
 .expression-map-desktop-hint { display:none; }
}
.expression-closet { width:min(1480px,calc(100vw - 28px)); max-width:none; max-height:calc(100dvh - 28px); padding:0; overflow:auto; overscroll-behavior:contain; border:1px solid #715743; border-radius:24px; color:#f7eee4; background:#121110; box-shadow:0 34px 110px #000c; }
.expression-closet::backdrop { background:#090807d9; backdrop-filter:blur(7px) saturate(.65); }
.expression-closet-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 21px 13px; border-bottom:1px solid #9a714b4d; background:linear-gradient(115deg,#29231f,#161514 70%); }
.expression-closet-header p { margin:0 0 3px; color:#cba77e; font-size:9px; font-weight:800; letter-spacing:.23em; }
.expression-closet-header h2 { margin:0; color:#fff8ee; font:500 clamp(23px,3vw,34px)/1.1 Georgia,serif; }
.expression-closet-header h2 small { margin-left:8px; color:#bda993; font:600 11px/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.12em; }
.expression-closet-close { width:43px; height:43px; flex:0 0 43px; border:1px solid #8d735d; border-radius:50%; color:#fff4e8; background:#2d2723; font:300 29px/1 ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
.expression-closet-close:hover { background:#4a3c34; }
.expression-closet-close:focus-visible,.expression-closet-controls button:focus-visible,.expression-closet-item:focus-visible { outline:3px solid #e8b77c; outline-offset:2px; }
.expression-closet-controls { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:9px 17px; border-bottom:1px solid #765a433b; background:#1d1a18; }
.expression-closet-controls button { min-height:35px; padding:6px 10px; border:1px solid #665346; border-radius:8px; color:#f9eee1; background:#302925; font:650 11px/1.2 ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
.expression-closet-controls button:hover { border-color:#ad825e; background:#44372f; }
.expression-closet-controls span { margin-left:auto; color:#ae9c8c; font:500 10px/1.35 ui-sans-serif,system-ui,sans-serif; }
.expression-closet-workspace { display:grid; grid-template-columns:minmax(0,1fr) 270px; align-items:stretch; }
.expression-closet-stage { position:relative; min-width:0; min-height:390px; overflow:hidden; background:#0b0c0e; }
.expression-closet-stage canvas { display:block; width:100%; touch-action:none; }
.expression-closet-loading { position:absolute; z-index:2; left:50%; top:50%; margin:0; padding:10px 14px; transform:translate(-50%,-50%); border:1px solid #9a76593d; border-radius:10px; color:#e8d6c2; background:#171412d9; font:600 12px/1.4 ui-sans-serif,system-ui,sans-serif; pointer-events:none; }
.expression-closet-inventory { padding:19px 15px; border-left:1px solid #765a4359; background:linear-gradient(160deg,#241e1a,#161412); }
.expression-closet-inventory-kicker { margin:0 0 4px; color:#cba77e; font:800 8px/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.2em; }
.expression-closet-inventory h3 { margin:0 0 14px; color:#fff7ed; font:500 22px/1.15 Georgia,serif; }
.expression-closet-inventory h3 small { color:#b9a38e; font:650 10px/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.1em; }
.expression-closet-inventory table { width:100%; table-layout:fixed; border-spacing:7px; margin:-7px; }
.expression-closet-inventory td { width:50%; padding:0; vertical-align:top; }
.expression-closet-item,.expression-closet-empty { width:100%; min-height:132px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px; border:1px solid #6b5544; border-radius:12px; color:#e9ddcf; background:#2a2420; text-align:center; }
.expression-closet-item { cursor:pointer; font:inherit; }
.expression-closet-item:hover { border-color:#c18d60; background:#3a2f28; }
.expression-closet-item:disabled { cursor:not-allowed; opacity:.48; filter:saturate(.35); }
.expression-closet-item[aria-pressed=true] { border-color:#efbd7d; background:#493529; box-shadow:inset 0 0 0 2px #efbd7d3d; }
.expression-closet-item img { display:block; width:100%; height:74px; object-fit:contain; filter:drop-shadow(0 7px 7px #0008); }
.expression-closet-item strong { color:#fff8ef; font:700 11px/1.2 ui-sans-serif,system-ui,sans-serif; }
.expression-closet-item span,.expression-closet-empty span { color:#bba997; font:600 9px/1.2 ui-sans-serif,system-ui,sans-serif; }
.expression-closet-empty { border-style:dashed; color:#846d59; background:#1d1917; font:300 22px/1 ui-sans-serif,system-ui,sans-serif; }
.expression-closet-inventory-help { margin:17px 2px 0; color:#ad9a88; font:500 10px/1.5 ui-sans-serif,system-ui,sans-serif; }
@media (max-width:900px) {
 .expression-closet-workspace { grid-template-columns:1fr; }
 .expression-closet-inventory { border-left:0; border-top:1px solid #765a4359; }
 .expression-closet-inventory table { max-width:360px; }
 .expression-closet-item,.expression-closet-empty { min-height:112px; }
}
@media (max-width:650px) {
 .expression-closet { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); border-radius:17px; }
 .expression-closet-header { padding:13px 14px 11px; }
 .expression-closet-header h2 small { display:block; margin:4px 0 0; }
 .expression-closet-controls { padding:8px; gap:5px; }
 .expression-closet-controls button { flex:1 1 auto; padding-inline:6px; }
 .expression-closet-controls span { width:100%; margin:2px 2px 0; text-align:center; }
 .expression-closet-stage { min-height:300px; }
}
.expression-map-zoom button:disabled { opacity:.4; cursor:default; }
.expression-map-zoom [data-save-location][aria-pressed=true] { color:#fffbee; background:#315d42; border-color:#315d42; }
.expression-map-flag { position:absolute; z-index:3; overflow:visible; pointer-events:none; }
.expression-map-flag-cloth { transform-origin:9px 24px; animation:expression-flag-breeze 3.6s ease-in-out infinite alternate; }
.expression-map-flag.is-planted { animation:expression-flag-plant 300ms ease-out; }
.expression-map-chimney-smoke { animation:expression-chimney 5s ease-in-out infinite; }
@keyframes expression-arrival { from { opacity:0; transform:translateY(-7px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes expression-stone-land { 0% { transform:scale(1); } 40% { transform:scale(1.055,.97); } 100% { transform:scale(1); } }
@keyframes expression-flag-breeze { from { transform:skewY(-2deg) scaleX(.96); } to { transform:skewY(2deg) scaleX(1); } }
@keyframes expression-flag-plant { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
@keyframes expression-chimney { 0%,100% { opacity:.3; transform:translateY(1px); } 50% { opacity:.65; transform:translateY(-5px); } }
@media (prefers-reduced-motion:reduce) { .expression-map * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

.expression-map[data-animating="false"] * { animation-play-state:paused!important; }
.closet-equipment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.closet-equipment-grid .expression-closet-item{width:100%;min-height:180px;cursor:pointer;border:1px solid #cfb993;border-radius:12px;background:#fffaf0;color:#49381f;padding:10px;display:flex;align-items:center;flex-direction:column;gap:5px}
.closet-equipment-grid .expression-closet-item[aria-pressed=true]{border:2px solid #a16d24;background:#f9edce;box-shadow:0 0 0 2px #d8bd7b44}
.closet-equipment-grid img{width:100%;height:82px;object-fit:contain}
.closet-equipment-grid .expression-closet-item strong{color:#3d2d16;font-size:12px}
.closet-equipment-grid .expression-closet-item span{color:#5b4724}
.expression-closet-inventory .closet-save-status{color:#f0dfbf}
.expression-closet-inventory form label,.expression-closet-inventory h4,[data-outfit-sets]{color:#f0dfbf}
.closet-equipped-status{font-weight:700;color:#5b4724;font-size:12px}
.closet-coin-balance{display:flex;justify-content:space-between;align-items:center;margin:8px 0 14px;padding:11px 14px;border:1px solid #bfa36d;border-radius:12px;background:linear-gradient(135deg,#fff1c9,#f8dfaa);color:#563f17;font-weight:750}.closet-coin-balance strong{font-variant-numeric:tabular-nums;font-size:18px}.closet-equipment-grid .expression-closet-item:not([aria-pressed=true]):hover{transform:translateY(-2px);box-shadow:0 7px 16px #26190e20}.closet-equipment-grid .expression-closet-item{transition:transform .2s,box-shadow .2s,border-color .2s}
.closet-outfit-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.expression-closet-inventory form{display:grid;gap:8px;margin-top:18px}
.expression-closet-inventory input{width:100%;box-sizing:border-box;border:1px solid #b9aa92;border-radius:8px;padding:10px;background:white;color:#312a20}
.closet-outfit-actions button,.expression-closet-inventory form button,[data-outfit-sets] button{border:1px solid #ad8c53;border-radius:8px;padding:10px 12px;background:#f8edce;color:#46371f;cursor:pointer}
[data-outfit-sets]{display:flex;flex-wrap:wrap;gap:8px}
.closet-save-status{min-height:3em;font-size:13px;line-height:1.5;color:#493c29}
.expression-closet-inventory button:focus-visible{outline:3px solid #286858;outline-offset:3px}

/* Garment catalog photography and wardrobe actions. */
.closet-item-picture{display:block;position:relative;width:100%;height:auto;aspect-ratio:1;overflow:hidden;border-radius:12px;background:#262626;margin-bottom:12px}
.closet-item-picture img{width:100%;height:100%;object-fit:contain;max-height:none!important;margin:0!important;filter:none!important}
.closet-item-picture.cream-cable-knit img,.closet-item-picture.charcoal-turtleneck img{position:absolute;width:200%;max-width:none;height:100%;object-fit:fill;left:0}
.closet-item-picture.charcoal-turtleneck img{left:-100%}
.closet-item-picture.white-fedora{background:transparent}
.closet-outfit-actions button,.expression-closet-inventory form button,[data-outfit-sets] button{background:linear-gradient(135deg,#fff6da,#e9cd8d);border:1px solid #bd9450;border-radius:14px;box-shadow:inset 0 1px #fff9e8,0 3px 0 #75572d,0 5px 12px #0002;font:600 14px/1.4 system-ui;transition:transform .15s,box-shadow .15s;min-height:44px}
.closet-outfit-actions button:hover,.expression-closet-inventory form button:hover,[data-outfit-sets] button:hover{transform:translateY(-2px);box-shadow:inset 0 1px #fff9e8,0 4px 0 #75572d,0 7px 14px #0003}
.closet-saved-set{display:flex;gap:8px;margin:12px 0}.closet-saved-set [data-outfit]{flex:1;text-align:left}.closet-saved-set [data-favorite]{min-width:46px;font-size:24px;color:#a23952}
.expression-closet-loading{min-width:230px;text-align:center}.expression-closet-loading progress{display:block;width:100%;height:12px;margin-top:10px;accent-color:#e7bb68}

.closet-startup{position:fixed;z-index:10000;top:50%;left:50%;transform:translate(-50%,-50%);padding:24px;border:1px solid #bd9450;border-radius:16px;background:#231e18;color:#fff1cb;box-shadow:0 10px 60px #0008;font:600 15px system-ui}.closet-startup progress{display:block;margin-top:14px;width:240px;accent-color:#e7bb68}

.expression-map-characters{flex-wrap:wrap;align-items:center}.expression-map-character{min-width:82px}

.expression-map-coin-badge{display:inline-flex;align-items:center;gap:3px;margin-left:5px;padding:2px 5px;border-radius:10px;background:#fff2bd;color:#725210;font-size:10px;white-space:nowrap}.expression-map-coin-badge b{font-variant-numeric:tabular-nums}