*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080e14;color:#fff5df;font-family:Georgia,'Noto Sans KR',system-ui,sans-serif}body{display:grid;place-items:center}button,input{font:inherit}button{min-width:44px;min-height:44px;color:#fff5df;border:0;background:transparent;cursor:pointer;touch-action:manipulation}button:hover,button:focus-visible{color:#ffe09b;background:#ffffff12;outline:2px solid #e4d6a1;outline-offset:-3px}button:disabled{opacity:.4;cursor:default}#game{position:relative;width:min(100vw,177.7778vh);height:min(56.25vw,100vh);overflow:hidden;background:#111b23;isolation:isolate}#scene{width:100%;height:100%;display:block;touch-action:none}#scene.soft{filter:blur(.22px)}#scene.sharp{filter:url(#softSharp)}#overlay{position:absolute;inset:0;pointer-events:none}#overlay>*{pointer-events:auto}#fade{position:absolute;inset:0;background:#080e14;opacity:0;pointer-events:none;transition:opacity .22s;z-index:10}#fade.on{opacity:1}.window{background:linear-gradient(145deg,#19385cf5,#0a1935fa);border:2px solid #a6b9c7;border-radius:4px;box-shadow:inset 0 0 0 2px #344e70,0 3px 10px #0008;padding:clamp(10px,1.6vw,24px)}.loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;letter-spacing:6px;background:#111e29;line-height:2}.loading small{font:15px system-ui;letter-spacing:1px}.title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(90deg,#091522b8,#09152230,#09152288)}.title h1{font-size:clamp(32px,5vw,68px);letter-spacing:.22em;text-shadow:0 3px 15px #000;margin:0}.title .subtitle{letter-spacing:.3em;font-size:clamp(14px,1.8vw,24px);margin:12px 0 30px}.title .window{min-width:250px;display:flex;flex-direction:column;text-align:center}.title small{margin-top:20px;font:12px system-ui;color:#cad1cf}.dialogue{position:absolute;left:4%;right:4%;bottom:4%;min-height:23%;display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:center;font-family:system-ui,sans-serif}.dialogue .portrait{height:100px;overflow:hidden;align-self:end}.dialogue .portrait img{width:100%;image-rendering:auto}.dialogue .speaker{color:#ebcd8c;font-size:clamp(14px,1.7vw,22px);margin-bottom:8px}.dialogue .text{font-size:clamp(14px,1.6vw,22px);line-height:1.65;white-space:pre-line}.dialogue .next{position:absolute;right:10px;bottom:2px;font-size:14px;color:#ddc28b}.menu{position:absolute;inset:9% 15%;font:clamp(14px,1.7vw,22px) system-ui;overflow:auto}.menu h2{font-size:1.2em;font-weight:500;color:#ecd39a;margin:0 0 18px}.menu .menurow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px solid #a7b8c222}.menu .choices{display:flex;gap:8px;flex-wrap:wrap}.menu .choices button{border:1px solid #a7b8c244;padding:8px 14px}.menu .choices button.selected{border-color:#e5cd93;background:#a9b9ce22}.menu p{line-height:1.6;color:#cbd7df}.menu .close{float:right}.nameInput{background:#09172b;color:#fff1d4;border:1px solid #b7c8d6;padding:10px;max-width:240px;width:100%;min-height:44px}.title label{font:15px system-ui;margin:10px}.title input{margin:10px auto}#location{position:absolute;left:3%;top:4%;font-size:clamp(13px,1.6vw,22px);color:#fff4de;text-shadow:0 2px 4px #000;pointer-events:none;opacity:0;transition:opacity 1s}#location.show{opacity:1}#menuButton{position:absolute;right:2%;top:2%;font:24px system-ui;text-shadow:0 2px 3px #000;background:#0c1d2c77;border:1px solid #d7e0dd55;border-radius:4px}#controls{position:absolute;inset:0;pointer-events:none}#touchControl{position:absolute;left:max(3%,env(safe-area-inset-left));bottom:3%;display:flex;flex-direction:column;align-items:center;gap:6px}#swipePad{pointer-events:auto;position:relative;display:block;width:132px;height:132px;min-width:132px;min-height:132px;border-radius:50%;border:1px solid #dce9d770;background:radial-gradient(circle,#16304580 0 35%,#11273c66 36% 68%,#c3d9cd18 69%);box-shadow:inset 0 0 20px #08162555,0 2px 10px #0003;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:#e9e3c5}#swipePad.active{border-color:#ead19a;background-color:#1b3a5066}#padKnob{position:absolute;inset:43px;display:grid;place-items:center;border:1px solid #e4d5aa99;background:#b7cfca25;border-radius:50%;box-shadow:0 2px 6px #0004;will-change:transform;font:11px system-ui;pointer-events:none}.pad-mark{position:absolute;pointer-events:none;font:22px system-ui;color:#e5dfc299}.pad-mark.north{top:5px;left:57px}.pad-mark.south{bottom:5px;left:57px}.pad-mark.west{left:9px;top:49px}.pad-mark.east{right:9px;top:49px}#controlHint{font:11px system-ui;color:#e0e6d9cc;text-shadow:0 1px 3px #000;white-space:nowrap;pointer-events:none}#rotate{display:none;position:absolute;inset:0;background:#101d2cf5;z-index:30;align-content:center;text-align:center;font:24px system-ui;line-height:2}#rotate small{font-size:15px}@media(orientation:portrait) and (max-width:700px){#rotate{display:grid}}@media(max-height:500px){.dialogue{left:2%;right:2%;bottom:2%;grid-template-columns:55px 1fr;gap:10px;min-height:28%;padding:10px 14px}.dialogue .portrait{height:68px}.dialogue .text{font-size:14px;line-height:1.45}.dialogue .speaker{margin-bottom:4px}.menu{inset:3% 12%;padding:12px}.menu h2{margin-bottom:8px}.menu .menurow{padding:2px 0}.title .subtitle{margin:5px 0 12px}.title small{margin-top:8px}#touchControl{bottom:2%;gap:2px}}

.title .segment{font:clamp(12px,1.3vw,17px) system-ui;color:#e0d3b2;letter-spacing:.1em;margin:-15px 0 20px}@media(max-height:500px){.title .segment{margin:-3px 0 10px}}

/* Completion is a compact notice, not an empty full-height menu. */
.menu.ending{inset:auto 20%;top:50%;transform:translateY(-50%);height:auto;max-height:70%;overflow:auto}.menu.ending p{margin:12px 0;line-height:1.5}.menu.ending h2{margin-bottom:12px}.menu.ending button{padding:8px 14px;min-height:44px;margin-top:4px}@media(max-height:500px){.menu.ending{left:10%;right:10%;padding:12px 16px}.menu.ending p{margin:8px 0;font-size:14px}.menu.ending h2{margin-bottom:6px}}

#directionPad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:3px;pointer-events:auto}#directionPad button{background:#142b44c9;border:1px solid #e5d3a477;border-radius:8px;touch-action:none;user-select:none}#directionPad [data-direction=up]{grid-column:2}#directionPad [data-direction=left]{grid-row:2;grid-column:1}#directionPad [data-direction=down]{grid-row:2;grid-column:2}#directionPad [data-direction=right]{grid-row:2;grid-column:3}#actionButton{position:absolute;right:max(4%,env(safe-area-inset-right));bottom:6%;pointer-events:auto;width:68px;height:68px;border-radius:50%;background:#142b44dd;border:1px solid #ead69e;font:16px system-ui}#saveNotice{position:absolute;top:12%;left:20%;right:20%;text-align:center;background:#602c20;color:#fff;z-index:12;font:14px system-ui}#saveNotice:empty{display:none}

#actionButton:disabled{opacity:.45}.town-map{width:min(90vw,780px);max-height:92vh;overflow:auto}.town-map-image{position:relative;margin:10px auto;width:min(100%,640px)}.town-map-image img,.town-map-image canvas{display:block;width:100%;border-radius:6px}.town-map-image button{position:absolute;transform:translate(-50%,-50%);font-size:13px;padding:6px 10px;white-space:nowrap;background:#172735ed;border:1px solid #e4c485;border-radius:5px;color:#fff}

.map-browser-link{display:block;color:#f0d69a;text-align:center;padding:12px 16px;min-height:44px;text-decoration:underline}.map-browser-link:focus-visible{outline:3px solid #ffdf8b}
/* Joined village map: current position marker (place buttons live in the list above). */
.town-map-image .here{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#ffd76a;border:2px solid #fff;box-shadow:0 0 0 3px rgba(0,0,0,.45);pointer-events:none;animation:herePulse 1.2s ease-in-out infinite}
@keyframes herePulse{50%{transform:scale(1.35)}}

.shop{max-width:640px}.shop h2 small{margin-left:12px;color:#f0d48e;font-size:.8em}.shop-hint{opacity:.85;margin:4px 0 10px}.shop-list{display:grid;gap:6px;max-height:min(60vh,520px);overflow:auto}.shop-row{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid #ffffff22;border-radius:8px}.shop-row img{width:44px;height:44px;object-fit:contain}.shop-name{display:grid;min-width:0}.shop-name small{opacity:.75}.shop-own{font-size:.85em;opacity:.8}.shop-row button{min-width:76px}

.dialogue .portrait.none{visibility:hidden;width:0;margin:0}