@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans KR',sans-serif;color:#243c34;background:#f6f5ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #e29241;outline-offset:3px}header{height:100px;border-bottom:1px solid #dedfd5;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:25px;font-weight:800;letter-spacing:-1px}.brand b{font-weight:900}.brand small{display:block;font-size:8px;letter-spacing:1.9px;font-weight:600;margin-top:4px}.mark{background:#254536;color:#f1edda;width:42px;height:49px;display:grid;place-items:center;font-size:38px;border-radius:15px 15px 3px 3px}.edition{font-size:10px;letter-spacing:1.4px;display:flex;gap:12px;align-items:center}.edition i,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#dca164}.edition span{border-left:1px solid #d5d6cb;padding-left:14px;color:#92988c}header button{border:1px solid #cdd2c6;background:none;border-radius:30px;padding:9px 16px;font-size:12px}main{max-width:1500px;margin:auto;padding:40px 5vw 0}.intro{display:flex;justify-content:space-between;align-items:end;padding-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#829078}h1{font-size:42px;letter-spacing:-2.2px;line-height:1.28;margin:17px 0 15px;font-weight:800}h1 em{font-style:normal;color:#74856d}.intro p{font-size:12px;line-height:1.9;color:#839080;margin:0}.walk-card{width:360px;padding:20px 23px;border:1px solid #d9ddce;border-radius:8px;background:#eeefe5;margin-bottom:2px}.tiny{font-size:10px;color:#818c77}.walk-card strong{display:block;font-size:13px;margin:10px 0 17px}.walk-card strong span{float:right;font-size:12px;color:#718363}.stamps{display:flex;gap:14px;font-size:10px;color:#919885}.stamps .found{color:#315a39;font-weight:800}.game-shell{height:clamp(400px,51vw,650px);position:relative;border:8px solid #e6e7dc;border-radius:12px;overflow:hidden;background:#abb599;box-shadow:0 16px 35px #26392812}#game{width:100%;height:100%;outline:none}#game canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}.scene-label{position:absolute;top:22px;left:24px;padding:9px 13px;background:#faf9e9ef;font-size:11px;border-radius:4px;box-shadow:0 2px 0 #0002;display:flex;align-items:center;gap:9px}.live-dot{background:#71955b}.tag{font-size:9px;color:#849076;border-left:1px solid #d5d9c9;padding-left:9px}.zoom{position:absolute;right:22px;top:22px;background:#faf9e9ed;border-radius:4px;display:flex;align-items:center;box-shadow:0 2px 0 #0002}.zoom button{border:0;background:none;width:32px;height:34px;font-size:20px}.zoom span{font-size:9px;width:34px;text-align:center}.zoom button:last-child{border-left:1px solid #dedfcd;margin-left:5px}.place{position:absolute;top:76px;left:24px;display:flex;flex-direction:column;gap:5px;text-shadow:0 1px 3px #f7f5dc}.place span{font-size:8px;color:#586949}.place strong{font-size:12px}.game-caption{position:absolute;bottom:22px;left:25px;font-size:13px;font-weight:500;color:#f4f5dc;text-shadow:0 1px 4px #283b25}.game-caption b{font-weight:900}.game-caption span{display:block;font-size:8px;margin-top:4px;letter-spacing:1px;opacity:.8}#prompt{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);white-space:nowrap}#prompt button{background:#f6edc9;border:1px solid #a18b5b;box-shadow:0 3px 0 #4a5937;padding:11px 20px;font-weight:bold;border-radius:5px;font-size:13px}#prompt span{margin-left:10px}#toast{position:absolute;left:50%;top:25px;transform:translateX(-50%);background:#2c493dea;color:#fff5d9;font-size:12px;padding:10px 18px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .25s}#toast.show{opacity:1}.under{display:flex;align-items:center;justify-content:space-between;padding:22px 0;color:#818c7b;font-size:10px}.under>div{display:flex;align-items:center;gap:5px}.under>div span{margin-left:5px}.under i{height:10px;border-left:1px solid #d3d9cb;margin:0 13px}kbd{border:1px solid #cfd5c7;border-bottom-width:2px;padding:3px 5px;border-radius:3px;font:9px monospace;background:#eeefe7}.footnote{font-size:11px}.footnote span{margin-left:20px}footer{max-width:1500px;padding:15px 5vw 28px;margin:auto;display:flex;justify-content:space-between;border-top:1px solid #e3e4da;color:#a0a695;font-size:8px;letter-spacing:.6px}dialog{border:1px solid #c2ccae;border-radius:12px;padding:36px;max-width:440px;width:calc(100% - 32px);background:#f6f5ea;color:#294536;box-shadow:0 25px 100px #132b3455}dialog::backdrop{background:#172f2c88;backdrop-filter:blur(4px)}dialog h2{font-size:27px;letter-spacing:-1px}dialog p{font-size:13px;line-height:1.9;color:#75816b}.close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:26px}.primary{background:#294c3d;color:#faf4db;border:0;border-radius:5px;padding:13px 20px;margin-top:10px;width:100%;font-size:12px}.shop-note{border-top:1px solid #dce0cf;padding-top:15px;font-size:11px!important}#pad{display:none;position:absolute;left:20px;bottom:20px;width:132px;height:132px;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px;touch-action:none}#pad button{border:1px solid #f4edcb88;background:#faf2d5bd;box-shadow:0 2px 0 #364c3655;border-radius:7px;touch-action:none;user-select:none}#pad button.active{background:#b7ce91}#pad [data-dir=up]{grid-area:1/2}#pad [data-dir=left]{grid-area:2/1}#pad [data-dir=down]{grid-area:2/2}#pad [data-dir=right]{grid-area:2/3}#loading{position:absolute;inset:0;background:#869474;display:grid;place-items:center;font-size:14px;color:#fff9df}#loading[hidden]{display:none}@media(pointer:coarse){#pad{display:grid}.game-caption{display:none}}@media(max-width:760px){header{height:76px;padding:0 5vw}.brand{font-size:20px}.mark{width:34px;height:41px;font-size:30px}.edition{display:none}main{padding-top:28px}h1{font-size:33px}.intro{display:block}.intro p{font-size:11px}.walk-card{width:100%;margin-top:22px;padding:14px 17px}.walk-card strong{margin:6px 0 12px}.game-shell{height:530px;border-width:5px;margin:0 -2vw}.scene-label{left:12px;top:14px;font-size:10px}.zoom{right:12px;top:14px}.zoom button{width:27px}.place{top:65px;left:14px}#pad{display:grid;left:12px;bottom:16px}.game-caption{display:none}.under>div{flex-wrap:wrap;font-size:9px}.under i{margin:0 5px}.footnote{display:none}.under{padding:17px 0}footer{font-size:7px;gap:20px}#prompt{bottom:165px}#toast{top:110px;max-width:90%;text-align:center;width:max-content}.stamps{gap:20px}}

/* Volume 02: the artwork becomes the main stage. */
header{height:78px}main{max-width:1600px;padding-top:25px}.intro{padding-bottom:22px}h1{font-size:30px;line-height:1.25;margin:10px 0}.intro p{font-size:11px}.walk-card{padding:17px 22px}.game-shell{height:auto;aspect-ratio:4/3;max-height:none;border:5px solid #dce0d2;background:#263b38}.game-caption{color:#fff3d4}.scene-label{background:#f5f0dce6}.place{text-shadow:0 1px 3px #131d17;color:#faf0d6}.place span{color:#e1d9bd}.zoom{background:#f5f0dce6}#game{position:absolute;inset:0}#game canvas{width:100%;height:100%}.game-shell #loading{z-index:10}.game-caption{pointer-events:none}.under{padding:16px 0}#prompt{bottom:110px}.stamps .found:before{content:'✓ ';color:#476c46}
@media(max-width:760px){header{height:68px}h1{font-size:25px}.intro p{display:none}.walk-card{margin-top:15px;padding:12px 16px}.game-shell{height:570px;aspect-ratio:auto}.intro{padding-bottom:16px}.scene-label{font-size:9px;left:9px;top:12px;padding:8px}.scene-label .tag{display:none}.zoom{top:12px;right:9px}#prompt{bottom:164px}.place{top:56px}main{padding-top:18px}#pad{z-index:2}}

/* Fit the playable area to the browser; the world scrolls inside the canvas. */
html,body{height:100%;height:100dvh;overflow:hidden}body{display:flex;flex-direction:column}header{height:64px;flex:0 0 64px;padding:0 3vw}main{flex:1;min-height:0;width:100%;max-width:1800px;padding:12px 3vw 0;display:flex;flex-direction:column}.intro{flex:0 0 auto;align-items:center;padding-bottom:12px;gap:20px}.intro .eyebrow{font-size:8px}h1{font-size:23px;line-height:1.2;margin:5px 0}.intro p{display:none}.walk-card{margin:0;width:360px;padding:10px 16px}.walk-card strong{margin:5px 0 8px}.stamps{flex-wrap:wrap;gap:5px 13px;max-height:42px;overflow:auto}.game-shell{flex:1;min-height:0;height:auto;aspect-ratio:auto;margin:0}.under{flex:0 0 auto;padding:9px 0}footer{display:none}.brand{font-size:21px}.mark{height:42px;width:36px;font-size:32px}
@media(max-width:760px){header{height:56px;flex-basis:56px}.brand{font-size:17px;gap:8px}.brand small{font-size:6px;letter-spacing:1px}.mark{height:34px;width:29px;font-size:27px}header button{padding:6px 10px;font-size:11px}main{padding:8px 2vw 0}.intro{display:block;padding-bottom:8px}.intro>div:first-child{display:none}.walk-card{width:100%;padding:7px 12px}.walk-card .tiny{display:none}.walk-card strong{font-size:11px;margin:0 0 5px}.stamps{font-size:9px}.game-shell{height:auto;margin:0;min-height:0}.under{padding:6px 2px}.under>div{font-size:8px}.under i{margin:0 3px}#pad{width:120px;height:120px}#prompt{bottom:145px}#toast{top:90px}}
@media(max-height:520px){.intro,.under{display:none}header{height:45px;flex-basis:45px}.brand small{display:none}.mark{height:30px;width:26px;font-size:25px}main{padding:5px 1vw}.place{display:none}#pad{width:99px;height:99px}#prompt{bottom:40px}}

/* Mobile joystick: selection, callout and browser panning are disabled. */
.game-shell,.game-shell *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}.game-shell{touch-action:none}.game-shell button{touch-action:none}
#joystick{display:none;position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));width:142px;height:142px;border-radius:50%;border:2px solid #f2e3b5aa;background:#243e37a6;box-shadow:inset 0 0 0 16px #f9eac512,0 5px 20px #102a2a33;touch-action:none;z-index:3;overflow:visible}#joystick.active{border-color:#f9e3a0;background:#274d40bb}.stick-arrows{position:absolute;inset:0;display:grid;place-items:center;font-size:120px;line-height:1;color:#e8dbb945;pointer-events:none}#stickKnob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:#f0e5bf;border:3px solid #fff5d8;box-shadow:0 4px 9px #0c201755;pointer-events:none}
#mobileInteract{display:none;position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:91px;height:91px;border-radius:50%;background:#f2e3b5;border:3px solid #fff4d5;box-shadow:0 4px 12px #102c2a55;font-size:12px;font-weight:700;line-height:1.5;z-index:3}#mobileInteract:disabled{opacity:.42;background:#d2d6be;color:#4d6658}
@media(pointer:coarse),(max-width:760px){#joystick{display:block}#mobileInteract{display:block}#prompt{display:none!important}.game-caption{display:none}#toast{max-width:85%;white-space:normal;top:82px}.under>div{font-size:8px}}
@media(max-height:520px){#joystick{width:112px;height:112px;bottom:12px;left:12px}#stickKnob{width:46px;height:46px}.stick-arrows{font-size:92px}#mobileInteract{width:76px;height:76px;bottom:14px;right:14px;font-size:10px}}

#soundToggle{position:absolute;top:66px;right:22px;z-index:3;background:#f5f0dce6;border:1px solid #d9d7ba;border-radius:5px;padding:8px 12px;font-size:10px;min-height:34px;box-shadow:0 2px 0 #0002}#soundToggle[aria-pressed=false]{color:#78816e;background:#e7e9ddda}
@media(pointer:coarse),(max-width:760px){#soundToggle{top:55px;right:9px;padding:6px 9px;min-height:32px}}
@media(max-height:520px){#soundToggle{top:53px}}

.room-tools{display:flex;align-items:center;gap:8px}.room-tools #roomStatus{font-size:11px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-tools~.edition{display:none}.room-tools button{font-size:10px;padding:7px 10px}#joinDialog form{display:flex;flex-direction:column}#joinDialog label{font-size:12px;margin:10px 0 6px;font-weight:700}#joinDialog input{width:100%;padding:12px;border:1px solid #b8c6aa;border-radius:6px;background:#fffdf2;color:#264738;font:16px sans-serif}#joinDialog small{font-size:10px;color:#7b886f;line-height:1.6;margin-top:6px}#joinError{min-height:20px;color:#a24f39;font-size:12px;margin:10px 0 0}.primary:disabled{opacity:.5;cursor:wait}#solo{background:transparent;border:1px solid #b8c6aa;border-radius:5px;margin-top:9px;padding:11px;font-size:12px}#joinDialog{max-height:90dvh;overflow:auto}#shopDialog .shop-note{font-size:10px}#shopDialog::backdrop{background:#172f2ca8}
@media(max-width:760px){.room-tools{gap:5px}.room-tools #roomStatus{position:absolute;top:61px;left:24px;max-width:260px;z-index:4;font-size:9px;pointer-events:none}.intro{padding-top:15px}.room-tools button{font-size:9px;padding:5px 7px}.brand small{display:none}header{padding:0 2vw}header>button span{display:none}#joinDialog{padding:23px}#joinDialog h2{font-size:25px}}
@media(max-height:520px){.room-tools #roomStatus{position:static;max-width:180px}.intro{padding-top:0}}

#catActions{position:absolute;z-index:12;left:50%;bottom:100px;transform:translateX(-50%);background:#173c35ed;color:#fff1d0;border:1px solid #d5bf86;border-radius:12px;padding:10px 14px;text-align:center;white-space:nowrap;font-size:13px;box-shadow:0 5px 20px #0003}#catActions[hidden]{display:none}#catActions div{display:flex;gap:8px;margin-top:8px}#catActions button{min-height:44px;background:#f1dfae;color:#203f36;border:0;border-radius:6px;padding:8px 14px;font:inherit;cursor:pointer}#catActions button:disabled{opacity:.55;cursor:default}.admin-entry{display:flex!important;align-items:center;gap:8px;margin-top:14px!important}.admin-entry input{width:18px!important;height:18px!important}#adminPassword[hidden]{display:none}button:focus-visible{outline:3px solid #edb968;outline-offset:3px}@media(max-width:600px){#catActions{bottom:160px;font-size:12px}}

#bikeAction{position:absolute;z-index:12;left:50%;transform:translateX(-50%);top:58px;color:#fff8e5;background:#205943;border:2px solid #b8df9b;border-radius:9px;padding:9px 14px;min-height:44px;font-weight:bold;white-space:nowrap;cursor:pointer}#bikeAction[hidden]{display:none}

@media(hover:hover) and (pointer:fine){#bikeAction[data-riding=true]::after{content:'B';display:inline-block;margin-left:8px;padding:1px 5px;border:1px solid #cfe6ca;border-radius:3px;font-size:.8em}}

@media(max-width:760px){#joystick{width:110px;height:110px;left:14px;bottom:22px;opacity:.72}#stickKnob{width:42px;height:42px;margin:0}#mobileInteract{width:72px;height:72px;right:14px;bottom:22px;opacity:.78}}


#locationCheck{position:absolute;top:108px;right:12px;min-height:34px;padding:6px 12px;border:1px solid #b6c0a4;border-radius:5px;background:#faf9e9;color:#294536;font-size:12px;font-weight:700}
#locationMap{width:calc(100% - 24px);max-width:1100px;padding:12px 16px 16px}
#locationMap h2{font-size:18px;margin:4px 0 10px}
#overview{position:relative;width:min(100%, calc((100dvh - 90px) * var(--map-ratio)));margin:auto}
#overview canvas{display:block;width:100%;height:auto;border-radius:4px}
#mapPin{position:absolute;width:16px;height:16px;border:3px solid white;border-radius:50%;transform:translate(-50%,-50%);background:#ef483b;box-shadow:0 0 0 2px #841f18}
#mapPin span{position:absolute;top:50%;left:17px;transform:translateY(-50%);white-space:nowrap;padding:3px 7px;border-radius:4px;background:#841f18;color:white;font-size:12px;font-weight:700}
#mapPin.label-left span{left:auto;right:17px}

#swingAction{position:absolute;z-index:12;top:108px;left:50%;transform:translateX(-50%);min-height:44px;padding:8px 15px;border:2px solid #205943;border-radius:12px;background:#fff8e5;color:#205943;font-size:13px;font-weight:700;white-space:nowrap}
#swingAction:not(.riding)::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top-color:#205943}
#swingAction.riding{background:#205943;color:#fff8e5}
@media(pointer:coarse),(max-width:760px){#locationCheck{top:96px}#swingAction{top:140px}}