#mode-dialog.walk-mode{width:min(900px,calc(100vw - 24px))}
#walk-view{padding:0;margin:0}
.walk-title-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px;font-size:13px;color:#6a7959}
#walk-location{font-weight:800}
#walk-clock{font-size:11px;padding:6px 10px;border-radius:20px;background:#eff1e7;color:#82906d}
.walk-scene{--sky:#dceeea;--land:#c6d8a4;--far:#c0d6ae;--near:#aec58a;--path:#ead3a4;position:relative;height:360px;overflow:hidden;isolation:isolate;border:1px solid #dce2c8;border-radius:20px;background:linear-gradient(var(--sky),#f9f2d9)}
.walk-sun{position:absolute;right:15%;top:13%;width:54px;height:54px;border-radius:50%;background:#f8dc91;box-shadow:0 0 0 15px #fff8d42b,0 0 0 30px #fff8d415}
.walk-cloud{position:absolute;top:20%;left:9%;width:94px;height:22px;border-radius:50px;background:#fffdf0c9;animation:cloud-drift 12s ease-in-out infinite alternate}
.walk-cloud:before,.walk-cloud:after{content:'';position:absolute;bottom:6px;border-radius:50%;background:inherit;width:37px;height:30px;left:15px}
.walk-cloud:after{width:42px;height:38px;left:42px}
.walk-cloud.two{top:34%;left:60%;transform:scale(.7);animation-delay:-5s}
.walk-hills{position:absolute;width:140%;height:180px;left:-20%;bottom:19%;border-radius:45% 65% 0 0;background:var(--far);transform:rotate(-8deg)}
.walk-hills.near{height:115px;left:10%;bottom:15%;background:var(--near);transform:rotate(8deg)}
.walk-ground{position:absolute;inset:68% 0 0;background:var(--land);border-radius:45% 25% 0 0}
.walk-path{position:absolute;left:-10%;width:120%;height:38px;bottom:15%;background:var(--path);border-radius:50%;transform:rotate(-2deg);box-shadow:0 7px 0 #ac976b18}
.walk-scenery span{position:absolute;font-size:50px;z-index:1;bottom:30%;filter:saturate(.75)}
.scenery-a{left:3%}.scenery-b{left:28%;font-size:32px!important}.scenery-c{right:17%;font-size:39px!important}.scenery-d{right:1%;bottom:37%!important}
[data-route=meadow] .scenery-a:before{content:'🌳'}[data-route=meadow] .scenery-b:before{content:'🌷'}[data-route=meadow] .scenery-c:before{content:'🌼'}[data-route=meadow] .scenery-d:before{content:'🌳'}
.walk-home,.walk-sign{position:absolute;z-index:2;left:4%;bottom:23%;font-size:43px}.walk-sign{left:auto;right:8%;font-size:30px;bottom:24%}
.walk-traveler{position:absolute;z-index:5;bottom:17%;left:16%;width:110px;height:104px;transform:translateX(-50%);transition:left .3s linear}
.walking-friend{position:relative;width:100%;height:100%;animation:friend-walk .55s ease-in-out infinite;transform-origin:bottom center;z-index:2}
.walking-friend img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 2px #6a674516)}
.walk-traveler.returning .walking-friend img{transform:scaleX(-1)}
.walk-shadow{position:absolute;bottom:-5px;left:21%;width:58%;height:10px;border-radius:50%;background:#78895a25;z-index:1}
#walk-outfit{position:absolute;top:13%;left:50%;transform:translateX(-50%);font-size:22px;z-index:3}#walk-outfit[data-kind=bow]{top:58%;font-size:19px}
#walk-speech{position:absolute;z-index:7;top:15px;left:16px;right:16px;margin:0;padding:11px 14px;border-radius:13px;background:#fffdf1ee;color:#71815d;box-shadow:0 3px 0 #7b865b0d;font-size:12px;line-height:1.7;text-align:center}
.walk-treasure{position:absolute;z-index:4;left:78%;bottom:44%;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:37px;transform:translateX(-50%);animation:treasure-pop .7s ease-out both}
.walk-treasure small{font-size:10px;color:#837044;background:#fff5c8;border-radius:12px;padding:4px 8px}
.walk-leaves{position:absolute;bottom:5%;left:22%;font-size:22px;letter-spacing:20px;color:#fdf7d3;opacity:.8}
.walk-progress-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 12px}.walk-progress-heading strong{font-size:13px;color:#6b7d57}#walk-percent{font-size:12px;color:#9e937b}
#walk-progress{display:block;width:100%;height:9px;border:0;border-radius:20px;overflow:hidden;background:#ece6d8;accent-color:#8da678}#walk-progress::-webkit-progress-bar{background:#ece6d8;border-radius:20px}#walk-progress::-webkit-progress-value{background:#8da678;border-radius:20px;transition:width .3s linear}#walk-progress::-moz-progress-bar{background:#8da678;border-radius:20px}
.walk-steps{display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:15px 0 20px;list-style:none;text-align:center;gap:4px}
.walk-steps li{font-size:11px;color:#b3a68e;padding:7px 3px;border-radius:8px;background:#f5f0e4}.walk-steps li.current{color:#60764a;background:#e7eeda;font-weight:800}.walk-steps li.done{color:#829270}.walk-steps li.done:before{content:'✓ ';font-size:10px}
.walk-reward-preview{font-size:11px;color:#9e8769;line-height:1.7;text-align:center;padding:14px;border:1px dashed #e0d5bc;border-radius:12px;margin-bottom:13px}
#walk-claim{width:100%;min-height:47px}
.walk-complete .walking-friend{animation:none}.walk-complete .walk-traveler{filter:drop-shadow(0 0 12px #fff5ac)}.walk-complete .walk-sun{box-shadow:0 0 0 20px #fff8d439,0 0 0 40px #fff8d420}
.walk-discovering .walking-friend{animation:friend-discover 1.1s ease-in-out infinite}
.walk-sea{display:none}
[data-route=forest]{--sky:#d9e5da;--land:#a9c18f;--far:#aac3a5;--near:#8eac7e;--path:#dac6a1;background:linear-gradient(var(--sky),#c9d9b2)}
[data-route=forest] .walk-sun{background:#f3dfaa;opacity:.7}
[data-route=forest] .scenery-a:before,[data-route=forest] .scenery-d:before{content:'🌲'}[data-route=forest] .scenery-b:before{content:'🍄'}[data-route=forest] .scenery-c:before{content:'🌳'}[data-route=forest] .scenery-a,[data-route=forest] .scenery-d{font-size:94px;bottom:29%}
[data-route=beach]{--sky:#ecd8d2;--land:#ecdbb2;--path:#e5c999;background:linear-gradient(#ead1ce,#f8e7c6)}
[data-route=beach] .walk-hills{display:none}[data-route=beach] .walk-sea{display:block;position:absolute;left:0;right:0;top:48%;height:29%;background:repeating-linear-gradient(0deg,#a6ced1 0 15px,#cce3da 16px 18px,#a6ced1 19px 25px);border-radius:35% 0 0 0;animation:sea-breathe 4s ease-in-out infinite alternate}
[data-route=beach] .walk-sun{background:#f1ad87;width:64px;height:64px;top:25%;right:20%}
[data-route=beach] .scenery-a:before{content:'🌴'}[data-route=beach] .scenery-b:before{content:'🐚'}[data-route=beach] .scenery-c:before{content:'🐚'}[data-route=beach] .scenery-d:before{content:'⛱️'}[data-route=beach] .walk-leaves{color:#fff9e8}
#walk-view:not([hidden])~.panel-note{display:none}
@keyframes friend-walk{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes friend-discover{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes cloud-drift{to{margin-left:25px}}
@keyframes sea-breathe{to{transform:translateY(5px)}}
@keyframes treasure-pop{from{opacity:0;margin-bottom:-12px}to{opacity:1;margin-bottom:0}}
@media(max-width:680px){#mode-dialog.walk-mode{width:calc(100vw - 12px)}.walk-scene{height:320px;border-radius:16px}.walk-traveler{width:87px;height:85px}.walk-home{font-size:34px}.walk-scenery span{font-size:40px}[data-route=forest] .scenery-a,[data-route=forest] .scenery-d{font-size:68px}#walk-speech{font-size:11px;padding:10px;left:10px;right:10px;top:10px}.walk-title-line{font-size:12px}.walk-treasure{font-size:30px;bottom:43%}.walk-steps li{font-size:10px}.walk-progress-heading{margin-top:16px}.walk-progress-heading strong{font-size:12px}.walk-reward-preview{font-size:10px;padding:11px}#walk-outfit{font-size:18px}#walk-outfit[data-kind=bow]{font-size:16px}}
@media(prefers-reduced-motion:reduce){.walk-scene *{animation:none!important;transition:none!important}}