[hidden]{display:none!important}
.town-nav{width:min(420px,calc(100% - 24px));padding:4px;gap:4px;background:#283e60d9;box-shadow:0 3px 14px #14274238;border-color:#d5b98780}
.district-button{min-height:44px;font-size:15px;gap:6px}
.nav-symbol{font-size:18px}
.motion-button{min-height:44px;min-width:44px}
.tp-toggle{min-height:44px;flex:1;padding:0 10px;border:1px solid transparent;border-radius:4px;background:transparent;color:#f4dfb8;font:inherit;font-size:15px;white-space:nowrap}
.tp-toggle[aria-pressed="true"]{border-color:#ebd3a4;background:#e8c68b22;color:#fff1d0}
.town-intro{bottom:calc(88px + env(safe-area-inset-bottom,0px));padding:7px 11px}
.town-intro p{letter-spacing:0;font-size:12px}
.nameplate{min-height:44px;background:linear-gradient(150deg,#263e5cf7,#172d46f7);color:#fff0d2;border-color:#e4c38ec2;font-size:clamp(15px,2.1vw,18px);font-weight:550;text-shadow:0 1px #122138;box-shadow:0 0 0 2px #172c4166,0 3px 10px #10213f66}
.house.is-near .nameplate,.house:hover .nameplate{background:#334d6bf7;border-color:#ffdfa5}
.house.sign-lifted .nameplate{top:calc(var(--label-y) + 8px - var(--sign-lift))}
.town:not(.ready) .loading-message{top:32vh}
.traveler:not(.sprite-ready) .traveler-sprite{background-image:none!important}
.traveler:not(.sprite-ready):after{content:'●';position:absolute;left:36%;top:55%;color:#ffe0a4;font-size:20px;text-shadow:0 0 8px #382413}
.tp-hud{position:fixed;z-index:44;top:calc(var(--header-height) + 12px + env(safe-area-inset-top,0px));right:max(14px,calc((100vw - 820px)/2 + 14px));max-width:calc(100vw - 28px);padding:9px 12px;background:#243958de;border:1px solid #d5ba839c;border-radius:6px;backdrop-filter:blur(8px);pointer-events:none}
.tp-progress{margin:0;color:#ffe4aa;font-size:13px;font-weight:600;letter-spacing:.3px}
.tp-hint{margin:4px 0 0;font-size:11px;color:#e5d5bd}
.tp-touch-hint{display:none}
@media(max-width:600px){.tp-keyboard-hint{display:none}.tp-touch-hint{display:inline}}
.tp-controls{position:fixed;z-index:46;left:50%;bottom:calc(79px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,minmax(44px,1fr));align-items:center;gap:6px;width:100px;max-width:calc(100vw - 24px)}
.tp-step,.tp-enter{height:44px;min-width:44px;padding:0 12px;border:1px solid #e0c38ead;border-radius:5px;background:#233958ed;color:#fff0cf;box-shadow:0 2px 8px #12213f33;font:inherit}
.tp-step{font-size:21px;touch-action:none}
.tp-step:active{background:#547394}
.tp-enter{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;min-width:100px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(220px,calc(100vw - 24px))}
.tp-purpose{box-sizing:border-box;position:absolute;bottom:calc(100% + 60px);left:50%;transform:translateX(-50%);width:min(300px,calc(100vw - 24px));margin:0;padding:7px 11px;border:1px solid #dfc1919c;border-radius:5px;background:#233958f5;color:#f5e4c6;box-shadow:0 2px 8px #12213f33;font-size:12px;line-height:1.55;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:calc(3.1em + 16px);overflow:hidden;pointer-events:none}
.tp-stamp{position:absolute;z-index:7;width:28px;height:28px;border:1px solid #efce809e;border-radius:50%;display:none;align-items:center;justify-content:center;transform:translate(-50%,-50%);color:#ffe095;background:#5b3c26d9;box-shadow:0 0 12px #ffe6a568;font-size:22px;pointer-events:none}
[data-play="on"] .tp-stamp{display:flex}
.tp-stamp.is-found{color:#e3efd7;font-size:14px;border-color:#b2c69b7d;background:#345347a6;box-shadow:none;opacity:.55}
.tp-complete .door-light{opacity:.45;box-shadow:0 0 28px 12px #ffdd939e}
[data-play="on"] .town-intro{display:none}
[data-play="on"] .toast{bottom:calc(185px + env(safe-area-inset-bottom,0px))}
.tp-toggle:disabled{opacity:.4;cursor:default}
@media(min-width:1200px){.tp-toggle{min-width:52px}}
@media(max-width:480px){.district-button .nav-symbol{display:none}.nameplate{font-size:15px;padding:9px 11px}.tp-hud{right:12px;padding:7px 10px}.tp-hint{font-size:10px}.tp-enter{max-width:190px}.district-button,.tp-toggle{font-size:14px;padding-left:6px;padding-right:6px}.toast{bottom:calc(130px + env(safe-area-inset-bottom,0px))}}
@media(max-width:360px){.nameplate{font-size:14px}.tp-hint{max-width:180px}.tp-enter{max-width:155px}}
@media(orientation:landscape) and (max-height:500px){:root{--header-height:64px}.town-nav{width:min(390px,calc(100% - 24px));bottom:8px}.tp-controls{bottom:66px}.tp-hud{font-size:11px;top:72px}.tp-hint{display:none}}

.tp-toggle:focus-visible,.tp-step:focus-visible,.tp-enter:focus-visible{outline:3px solid #fff0bb;outline-offset:3px}
.tp-step,.tp-enter,.tp-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tp-step{touch-action:none}
.tp-controls{padding-bottom:0}
@media(orientation:landscape) and (max-height:500px){.district-button,.motion-button,.tp-toggle{min-height:44px}.town-nav{bottom:calc(8px + env(safe-area-inset-bottom,0px))}.tp-controls{bottom:calc(66px + env(safe-area-inset-bottom,0px))}.tp-enter{max-width:250px}}
@media(orientation:landscape) and (max-height:350px){.tp-purpose{bottom:calc(100% + 56px);padding:4px 9px;font-size:11px;line-height:1.35;max-height:calc(2.7em + 10px)}}