.town-page{--town-green:#32685a;--town-border:#d7ceba}.town-page button,.town-page select{font:inherit}.town-page button{min-height:44px}.town-page button:focus-visible,.town-page a:focus-visible,.town-page select:focus-visible{outline:3px solid #32685a;outline-offset:4px}.town-page #town-stage:focus{outline:none}.town-top,.town-case-bar,.town-controls,.town-modes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.town-top,.town-case-bar{justify-content:space-between;margin-bottom:24px}.town-case-bar{border-bottom:1px solid var(--town-border);padding-bottom:20px}.town-case-bar label{font-size:13px;display:flex;gap:10px;align-items:center}.town-case-bar select{max-width:300px;background:#fffaf0;border:1px solid var(--town-border);border-radius:12px;padding:10px;color:#32685a}.town-welcome,.town-dialogue,.town-finish{display:flex;align-items:center;gap:24px;padding:26px;border:1px solid var(--town-border);border-radius:28px;background:#edf0e1}.town-welcome img{width:150px;height:180px;object-fit:contain}.town-welcome .btn{margin-top:12px}.town-dialogue img{width:100px;height:130px;object-fit:contain}.town-dialogue h2{font-size:29px;margin:8px 0}.town-dialogue p{font-size:19px;margin:8px 0 14px;max-width:850px}.town-dialogue .plain-btn{margin-left:12px}.town-campaign{margin-top:40px}.town-campaign>h2{font-size:30px}.town-campaign>p{margin:8px 0 20px}.town-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.town-case{display:flex;align-items:center;gap:20px;padding:24px;background:#fffaf0;border:1px solid var(--town-border);border-radius:24px;text-decoration:none;color:inherit;box-shadow:0 5px 0 #d7ceba24}.town-case:nth-child(3n+2){background:#eee7f2}.town-case img{width:75px;height:110px;object-fit:contain}.town-case h3{font-size:23px;margin:10px 0 16px}.town-free{background:#e4edf0;border:1px solid #c6d8dc;border-radius:24px;padding:26px;margin:32px 0}.town-free .btn{margin-top:15px}.town-cover{height:285px;background:radial-gradient(#866a3a1c .8px,transparent 1px),#e7eddb;background-size:5px 5px;display:flex;align-items:center;justify-content:center;gap:45px;position:relative;overflow:hidden;text-decoration:none}.town-cover img{height:215px;width:150px;object-fit:contain;position:relative}.town-cover-roads{position:absolute;inset:0;background:linear-gradient(32deg,transparent 43%,#ceb99c 43% 49%,#fff4d4 49% 50%,#ceb99c 50% 56%,transparent 56%)}.town-paper-sign{padding:16px 28px;background:#fff7df;border:3px solid #ad8656;border-radius:5px 12px 8px 4px;box-shadow:5px 6px 0 #75553024;transform:rotate(5deg);color:#32685a;font-size:31px;font-weight:bold;position:relative}.town-task{font-size:18px;margin:22px 0}.town-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(310px,1fr);gap:24px;align-items:start}.town-map-scroll{overflow:auto;border:1px solid #d2c7ac;border-radius:24px;background:#e8edda;box-shadow:0 6px 0 #d7ceba30}.town-map{position:relative;aspect-ratio:1;min-width:500px;background:radial-gradient(#75845b24 .7px,transparent 1px),radial-gradient(ellipse at 22% 6%,#cfdfb7 0 11%,transparent 11.4%),#e7ecd7;background-size:4px 4px,auto,auto;isolation:isolate}.town-river{position:absolute;width:100%;height:15%;top:57%;background:repeating-linear-gradient(-5deg,#abd2d8 0 7px,#c4e4e6 8px 9px);transform:rotate(-4deg);opacity:.85;z-index:-1}.town-north{position:absolute;top:2px;right:9px;font-size:12px;color:#32685a;font-weight:bold}.town-road{position:absolute;display:block;background:repeating-linear-gradient(0deg,#d2bf9b 0 2px,#ddcca9 2px 5px);box-shadow:inset 0 0 0 1px #9b84562b;z-index:0}.town-road.horizontal{height:13px;transform:translateY(-50%)}.town-road.vertical{width:13px;transform:translateX(-50%)}.town-road.planned{background:#76a697;z-index:1;box-shadow:inset 0 0 0 4px #d5e5cc}.town-road.closed{background:repeating-linear-gradient(45deg,#b8554d 0 7px,#ffe8bd 7px 14px);z-index:2}.town-road.closed b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:25px;height:25px;border-radius:50%;text-align:center;line-height:23px;background:#fff8e5;color:#9c413a;border:2px solid #b8554d;font-size:20px}.town-place{position:absolute;transform:translate(-50%,-50%);width:20%;height:22%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border:0;background:transparent;padding:2px;z-index:3;cursor:pointer;color:#354f46;border-radius:14px}.town-place:disabled{opacity:1;cursor:default}.town-place.current{background:#fff8e22b}.town-place.destination strong:after{content:' ⚑';color:#32685a}.town-place strong{font-size:clamp(11px,1.1vw,14px);line-height:1.15;background:#fff9e8ed;border:1px solid #bdaa8144;border-radius:7px;padding:4px 6px;max-width:100%;font-weight:700;box-shadow:0 2px 0 #6e5f3220}.town-place small{font-size:9px;line-height:1.2;opacity:.7}.town-building{position:relative;width:68%;height:51%;display:block;background:repeating-linear-gradient(-15deg,#fff2 0 1px,transparent 1px 4px),#e3c5a1;box-shadow:3px 4px 0 #5e59322b;border-radius:3px 8px 4px 5px;margin-bottom:5px;border:1px solid #ac896044}.town-roof{position:absolute;width:115%;height:30%;background:repeating-linear-gradient(5deg,#fff2 0 1px,transparent 1px 4px),#bd6d61;top:-17%;left:-7%;clip-path:polygon(4% 95%,20% 10%,79% 3%,100% 93%);filter:drop-shadow(1px 2px 0 #63432b22)}.town-window{position:absolute;left:10%;top:24%;width:20%;height:32%;background:#ffe7a3;border:3px solid #856147;border-radius:7px 7px 2px 3px}.town-door{position:absolute;bottom:0;right:15%;width:25%;height:46%;background:#547f86;border:2px solid #41646b;border-radius:12px 10px 0 0}.town-object{position:absolute;right:-8%;top:-9%;width:50%;height:62%;transform:rotate(7deg);filter:drop-shadow(1px 2px 1px #6b533233)}.town-object .little-picture{width:100%;height:100%;object-fit:contain;display:block}.town-lighthouse{width:35%;height:65%;background:repeating-linear-gradient(#f6e7c7 0 15px,#cb7566 15px 24px);transform:rotate(-3deg)}.town-lighthouse .town-roof{background:#7f637e}.town-library .town-roof,.town-hall .town-roof{background-color:#85739b}.town-bakery{background-color:#e5b58b}.town-bakery .town-roof{background-color:#c96b61}.town-market .town-roof{background:repeating-linear-gradient(90deg,#d2a949 0 10px,#fff0cf 10px 20px);height:44%}.town-park,.town-pond,.town-playground{background:#bad4a8;border-radius:45% 50% 35% 40%}.town-park .town-roof,.town-pond .town-roof,.town-playground .town-roof{display:none}.town-pond{background:repeating-linear-gradient(-8deg,#90bccb 0 7px,#abd3dd 8px 9px)}.town-park .town-door,.town-pond .town-door{display:none}.town-bridge{background:repeating-linear-gradient(90deg,#b48d61 0 7px,#cfad7e 8px 10px);border-radius:40% 40% 4px 4px;height:40%;width:80%;border-top:8px solid #946e48}.town-bridge .town-roof,.town-bridge .town-door,.town-bridge .town-window{display:none}.town-fountain{border-radius:50%;background:#8fb7c0;border:5px solid #a6a0a7;height:38%;width:65%}.town-fountain .town-roof{height:55%;width:18%;left:42%;top:-40%;background:#76b1c5;clip-path:none;border-radius:50%}.town-fountain .town-door,.town-fountain .town-window{display:none}.town-post .town-door{background:#bf655a}.town-flowers{background:#d8b7cd}.town-flowers .town-roof{background:#a77b9d}.town-zoo{background:#d7c88e}.town-zoo .town-window{border-radius:50%}.town-map-note{font-size:13px;line-height:1.6;margin-top:14px}.town-marker{position:absolute;z-index:5;pointer-events:none;width:62px;height:65px;transform:translate(-70%,-85%);transition:left .5s ease-in-out,top .5s ease-in-out;filter:drop-shadow(2px 3px 1px #4b4b3330)}.town-marker .character-art{width:100%;height:100%;object-fit:contain;background:#fff8e7;border:2px solid #32685a;border-radius:50%;padding:3px}.town-facing{position:absolute;right:-13px;top:18px;font-size:23px;line-height:26px;width:28px;height:28px;text-align:center;border:2px solid #32685a;background:#f8d671;border-radius:50%;color:#294d42;transition:transform .2s}.town-guide{padding:22px;border:1px solid var(--town-border);border-radius:24px;background:#fffaf0;min-width:0}.town-location{padding-bottom:18px;border-bottom:1px solid var(--town-border);margin-bottom:18px;display:flex;flex-direction:column;gap:10px}.town-location strong{font-size:23px;color:#32685a}.town-location span{font-size:14px;line-height:1.6}.town-modes{margin-bottom:20px;gap:7px}.town-modes .btn{flex:1;white-space:normal}.town-guide h3{font-size:21px;margin-bottom:10px}.town-guide p.muted{font-size:14px;line-height:1.7;margin-bottom:14px}.town-direction-pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.town-direction-pad button{background:#eaf0df;border:1px solid #c9d4bd;border-radius:14px;padding:13px 7px;display:flex;align-items:center;gap:8px;justify-content:center;color:#32685a;cursor:pointer;font-size:14px}.town-direction-pad span{font-size:26px}.town-speak{display:flex;align-items:center;gap:9px;font-size:13px;margin:17px 0;cursor:pointer}.town-speak input{width:20px;height:20px}.town-last{font-size:13px;background:#eee7f2;border-radius:10px;padding:10px}.town-errands{margin-top:23px;padding-top:18px;border-top:1px solid var(--town-border)}.town-errands ol{padding-left:24px}.town-errands li,.town-errands p{font-size:14px;margin:8px 0}.town-feedback{background:#eee7f2;border:1px solid #d8cde0;border-radius:17px;padding:20px;margin:22px 0;line-height:1.7}.town-feedback.good{background:#e3ecd6;border-color:#c3d1b5}.town-help{font-size:14px;margin:25px 0}.town-help summary{cursor:pointer;color:#32685a;padding:12px 0;font-weight:bold}.town-help p{margin:12px 0;max-width:800px}.town-route-text{font-size:12px;line-height:1.7;padding:10px;background:#eaf0df;border-radius:10px;margin:12px 0;overflow-wrap:anywhere}.town-block-tray{display:flex;flex-direction:column;gap:7px;margin-top:18px}.town-block{display:block;background:#eee7f2;border:1px solid #ccbdd7;border-radius:11px;padding:11px 13px;box-shadow:0 3px 0 #ccbdd733;color:#514767;cursor:grab;font-size:13px;line-height:1.6;text-align:left}.town-blocks{padding:13px 10px 13px 26px;border:2px dashed #b9c9ac;border-radius:15px;min-height:70px;margin:17px 0;background:#edf0e15c}.town-blocks li{padding:5px 0;font-size:12px}.town-blocks li>div{display:flex;gap:9px;justify-content:flex-end}.town-blocks .plain-btn{min-width:44px;font-size:20px}.town-drop-note{list-style:none;font-size:13px;color:#65705e}.town-finish{margin:25px 0;background:#e3ecd6}.town-finish img{width:140px;height:160px;object-fit:contain}.town-finish h2{font-size:30px}.town-finish p{margin:15px 0}.town-finish .btn{margin:7px 8px 0 0}
@media(max-width:1000px){.town-layout{grid-template-columns:minmax(0,1fr)}.town-map{min-width:0}.town-map-scroll{max-width:720px;margin:auto}.town-guide{display:block}.town-direction-pad{grid-template-columns:repeat(4,minmax(0,1fr))}.town-place strong{font-size:13px}.town-marker{width:56px;height:60px}}
@media(max-width:600px){.town-case-grid{grid-template-columns:1fr}.town-case{padding:19px;gap:15px}.town-case h3{font-size:21px}.town-welcome,.town-dialogue,.town-finish{padding:18px;gap:14px;align-items:flex-start}.town-welcome{flex-wrap:wrap}.town-welcome img{width:80px;height:95px}.town-dialogue img{width:60px;height:80px;flex:none}.town-dialogue h2{font-size:23px}.town-dialogue p{font-size:16px}.town-dialogue .plain-btn{margin-left:0}.town-case-bar label{width:100%;flex-direction:column;align-items:flex-start}.town-case-bar select{max-width:100%;width:100%;font-size:14px}.town-map-scroll{border-radius:16px}.town-map{min-width:0}.town-place strong{font-size:11px;padding:3px 2px;border-radius:4px;line-height:1.15}.town-place small{font-size:8px}.town-building{height:44%;width:67%;margin-bottom:2px}.town-lighthouse{width:30%;height:58%}.town-road.horizontal{height:8px}.town-road.vertical{width:8px}.town-road.planned{box-shadow:inset 0 0 0 2px #d5e5cc}.town-road.closed b{width:18px;height:18px;font-size:15px;line-height:14px}.town-marker{width:35px;height:38px;transform:translate(-90%,-88%)}.town-facing{font-size:15px;line-height:17px;width:20px;height:20px;right:-10px;top:10px}.town-marker .character-art{padding:1px}.town-window{border-width:1px}.town-door{border-width:1px}.town-direction-pad{grid-template-columns:repeat(2,minmax(0,1fr))}.town-guide{padding:18px}.town-finish{flex-wrap:wrap}.town-finish img{width:85px;height:95px}.town-finish h2{font-size:25px}.town-cover{gap:20px}.town-paper-sign{font-size:27px}.town-north{font-size:9px;right:3px;top:0}.town-map .town-place{min-height:44px}.town-task{font-size:16px}}
@media(prefers-reduced-motion:reduce){.town-marker,.town-facing{transition:none}}
.town-oops{display:flex;align-items:center;gap:16px}.town-oops .character-art{width:65px;height:75px;object-fit:contain;flex:none;animation:town-oops-bob .55s ease-in-out 2}@keyframes town-oops-bob{50%{transform:translateY(-7px) rotate(-4deg)}}@media(prefers-reduced-motion:reduce){.town-oops .character-art{animation:none}}
