:root{color-scheme:light;--ink:#35452d;--cream:#fff9e9;--green:#476b39;--wood:#a66c35}*{box-sizing:border-box}body{margin:0;background:#f0e3c7;color:var(--ink);font-family:"BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif}.map-town{max-width:1300px;margin:auto}.map-town button,dialog button{font:inherit;font-weight:700;cursor:pointer;min-height:44px;border:1.5px solid #ae8858;border-radius:13px;background:#fff9e9;color:#453a24;padding:9px 15px;line-height:1.4;touch-action:manipulation}.map-town button:hover,dialog button:hover{filter:brightness(1.04);box-shadow:0 2px 4px #52351b22}.map-town button:disabled{opacity:.55;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:4px solid #2357a1;outline-offset:3px}button[aria-pressed=true]{box-shadow:inset 0 0 0 3px #517b36;background:#e8f0d7}.map-town [hidden],dialog [hidden]{display:none!important}h1,h2,p{margin:0}button img{pointer-events:none}.title-screen{min-height:640px;height:min(790px,calc(100svh - 65px));position:relative;background:url('./assets/images/background-title.webp') center center/cover;display:flex;align-items:center;flex-direction:column;padding:20px;isolation:isolate}.title-screen h1{width:min(580px,78%);margin:0}.title-screen h1 img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 4px #47210730)}.title-copy{background:#fff9e9ed;padding:12px 24px;border-radius:30px;font-weight:700;letter-spacing:.07em}.title-bottom{margin-top:auto;text-align:center;max-width:100%;padding:10px 22px 12px;border-radius:24px;background:#fff7e3e8;box-shadow:0 5px 28px #5f3a2b26}.title-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:0 6px}.map-town .art-button{background:url('./assets/images/button-cream.webp') center/contain no-repeat;border:0;border-radius:0;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:235px;max-width:100%;aspect-ratio:3;height:auto;min-height:44px;padding:12px 22px;font-size:22px;white-space:nowrap}.map-town .art-button.green{background-image:url('./assets/images/button-green.webp');color:#fff;text-shadow:0 1px 2px #223812}.title-note{font-size:13px;line-height:1.8;margin-top:5px}.draft-tag{font-size:11px;color:#756650}#progress-summary{font-size:13px;font-weight:700}#game-screen{background:url('./assets/images/background-desk.webp') center/cover;padding:14px 24px 18px;min-height:650px}.game-header{display:grid;grid-template-columns:130px minmax(0,1fr) 72px;gap:12px;align-items:center;margin-bottom:12px}.mini-logo{width:100%;height:auto}.question-panel{background:linear-gradient(#fffbee,#f9e8c5);border:5px ridge #ce944e;border-radius:20px;box-shadow:0 3px 4px #67442c44;min-height:76px;text-align:center;padding:7px 15px}.question-panel h2{font-size:clamp(17px,2vw,24px);line-height:1.5;overflow-wrap:anywhere}.question-panel h2:focus{outline:none}#stage-label{font-size:12px;color:#6d5b3f;margin-bottom:1px}.progress{border:2px solid #c69760;border-radius:18px;background:var(--cream);padding:17px 5px;text-align:center;white-space:nowrap;font-weight:700;font-size:22px}.progress small{font-size:13px}.board-toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 auto 6px;max-width:1000px}.view-tabs{display:flex;gap:6px}.board-toolbar button{padding:7px 12px;font-size:14px}.zoom-tools{display:flex;align-items:center;gap:4px;background:#fff9e9e0;border-radius:14px}.zoom-tools button{font-size:19px;padding:4px 10px}.zoom-tools output{font-size:12px;min-width:42px;text-align:center}.direction-note{max-width:900px;margin:5px auto 8px;padding:7px 12px;border-radius:12px;background:#fffbe9;text-align:center;font-size:14px}.board-shell{position:relative;max-width:1000px;margin:auto;background:#f3f0d9;border:6px solid #bc874e;border-radius:18px;box-shadow:0 8px 18px #4b2e1933;overflow:hidden}.board-scroll{overflow:auto;max-height:430px;overscroll-behavior:contain}.board-content{position:relative;height:410px;width:100%;min-width:100%}.town-3d{position:absolute;inset:0}.town-3d canvas{display:block;width:100%;height:100%;touch-action:pan-x pan-y}.board-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:3}.compass{position:absolute;top:12px;left:14px;z-index:4;pointer-events:none;background:#fffaf1e8;border:1px solid #c5ad80;border-radius:15px;text-align:center;padding:8px;font-size:12px;line-height:1.1;color:#463d29;box-shadow:0 2px 4px #0001}.compass b{display:block;font-size:22px;color:#855024}.compass span{display:block}.town-map{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:6px;position:absolute;inset:18px max(12px,calc((100% - 570px)/2));padding:6px;background:#c5c3af;border:3px solid #e3d6b2;border-radius:8px}.map-town .map-cell{position:relative;padding:5px;border:1px solid #849565;border-radius:5px;background:#e3eacb;min-height:0;min-width:0;display:grid;place-items:center}.map-cell img{width:75%;height:75%;object-fit:contain;max-height:42px}.map-cell .cell-coord{font-size:9px;color:#61714d;position:absolute;top:1px;left:3px}.map-cell.empty::after{content:'＋';color:#829668;font-size:20px}.map-cell.found{box-shadow:inset 0 0 0 3px #467437;background:#f6f8e8}.map-cell.found::after{content:'✓';position:absolute;right:3px;bottom:0;color:#2d5c28;font-size:14px;font-weight:700}.map-cell.anchor{outline:3px solid #b17a19;outline-offset:0}.map-town .cell-key{position:absolute;transform:translate(-50%,-50%);width:10%;height:10%;padding:0;min-height:0;background:transparent;color:transparent;border:0;border-radius:6px;z-index:2;box-shadow:none}@media(hover:hover) and (pointer:fine){.map-town .show-coordinates .cell-key:hover{background:#f7e7a140;outline:2px solid #ad882f}.show-coordinates .cell-key:hover span{opacity:1;color:#253c21;background:#fff9e9;padding:2px}}.map-town .cell-key:focus-visible{background:#e3edff80;outline:3px solid #2357a1;z-index:4}.map-town .cell-key.anchor{border:3px dashed #926119}.cell-key span{font-size:11px;opacity:0;pointer-events:none}.show-coordinates .cell-key:focus-visible span{opacity:1;color:#253c21;background:#fff9e9;padding:2px}.model-status{font-size:12px;text-align:center;margin:6px 0;min-height:16px;background:#fff9e9d9;border-radius:12px}.model-status:empty{display:none}.small-button{display:block;margin:8px auto}.play-controls{max-width:1000px;margin:8px auto 0;text-align:center;background:#fff9e9ed;border:1px solid #c5a877;border-radius:20px;padding:10px 16px}.play-controls>p{font-size:15px;font-weight:700;line-height:1.6}.cards{display:flex;gap:12px;justify-content:center;margin:4px auto 0}.map-town .symbol-card{position:relative;flex:0 1 128px;width:128px;aspect-ratio:1;padding:18px 22px 24px;min-height:0;border:0;border-radius:20px;background:url('./assets/images/card-blank.webp') center/contain no-repeat;box-shadow:none}.symbol-card img{width:100%;height:100%;object-fit:contain}.map-town .symbol-card[aria-pressed=true]{outline:4px solid #4a7534;outline-offset:-9px;filter:drop-shadow(0 4px 3px #354d2c35)}.symbol-card[aria-pressed=true]::after{content:'✓';position:absolute;bottom:9px;right:10px;border-radius:50%;background:#476b39;color:white;width:23px;height:23px;font-size:17px}.card-tools{display:flex;gap:8px;justify-content:center;margin-top:4px}.card-tools button{font-size:13px;min-height:36px;padding:5px 12px}.feedback{line-height:1.7;margin-top:7px;font-weight:700;overflow-wrap:anywhere;min-height:26px}.feedback.success{display:flex;justify-content:center;align-items:center;gap:10px;color:#315a2d}.feedback.success img{height:45px;width:45px}.feedback small{display:block;font-weight:400;font-size:14px}.feedback.error{color:#8c431c}.next-button{margin-top:7px;background:#e5edce!important}.game-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px auto 0}.game-actions button{font-size:13px}.save-area{background:#faf5e9;padding:12px 18px;font-size:12px;line-height:1.7}.save-area>p{display:inline-block;margin-right:12px}.save-area label{display:inline-flex;align-items:center;gap:5px;min-height:35px}.save-area details{margin-top:5px}.save-area input{width:18px;height:18px}.save-area button{font-size:12px}dialog{border:4px solid #bd884b;border-radius:24px;padding:0;width:min(680px,calc(100% - 24px));max-height:calc(100svh - 32px);color:var(--ink);background:#fff9e9;box-shadow:0 12px 60px #261a1a55}dialog::backdrop{background:#29342680;backdrop-filter:blur(3px)}.dialog-inner{padding:24px}.dialog-inner h2{text-align:center;font-size:23px;margin-bottom:15px;line-height:1.5}.dialog-inner p{line-height:1.9}.dialog-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.dialog-actions .primary{background:#4b7138;color:#fff;border-color:#324c26}.facility-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}.facility-intro article{background:#f3eddc;border-radius:15px;padding:12px 8px;min-width:0}.facility-intro img{display:block;width:76px;height:76px;margin:0 auto 10px}.facility-intro h3{font-size:17px;margin:0 0 5px}.facility-intro rt{font-size:10px}.facility-intro p{font-size:12px;line-height:1.65}.facility-detail{display:flex;align-items:center;gap:22px;padding:10px 0}.facility-detail img{width:110px;height:110px}.enlarged-symbols{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.enlarged-symbols img{width:140px;height:140px;background:#f5eed8;border-radius:12px;padding:14px}.stage-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.stage-steps div{padding:9px;background:#e6edd8;border-radius:10px;text-align:center;font-size:13px}.clear-heading{color:#3f682b}.town-complete{text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:700px){.title-screen{min-height:600px;padding:25px 12px;background-position:46% center}.title-screen h1{width:min(520px,98%)}.title-copy{font-size:14px;padding:9px 13px}.title-bottom{padding:8px;max-width:100%}.map-town .art-button{width:220px;font-size:19px;padding:12px 20px}.title-actions{gap:0}#game-screen{padding:8px 8px 14px}.game-header{grid-template-columns:65px minmax(0,1fr) 54px;gap:5px;margin-bottom:8px}.question-panel{border-width:4px;border-radius:14px;padding:6px 5px;min-height:76px}.question-panel h2{font-size:16px;line-height:1.5}#stage-label{font-size:10px}.progress{font-size:19px;padding:17px 2px;border-radius:12px}.progress small{font-size:11px}.board-toolbar button{font-size:12px;padding:6px 8px;min-height:40px}.zoom-tools{gap:0}.zoom-tools button{font-size:18px;padding:4px 9px}.zoom-tools output{font-size:10px;min-width:35px}.view-tabs{gap:4px}.board-shell{border-width:4px;border-radius:13px}.board-content{height:330px}.board-scroll{max-height:330px}.board-frame{display:none}.compass{font-size:10px;top:5px;left:5px;padding:5px}.compass b{font-size:18px}.town-map{inset:45px 8px 10px;gap:4px;padding:4px}.play-controls{padding:9px 8px;border-radius:14px}.play-controls>p{font-size:13px}.cards{gap:4px}.map-town .symbol-card{flex-basis:102px;width:102px;padding:17px 20px 21px}.feedback{font-size:14px}.feedback small{font-size:12px}.game-actions{gap:5px}.game-actions button{padding:7px 9px;font-size:11px}.dialog-inner{padding:20px 14px}.dialog-inner h2{font-size:21px}.facility-intro{gap:6px}.facility-intro article{padding:10px 5px}.facility-intro img{width:60px;height:60px}.facility-intro h3{font-size:14px}.facility-intro p{font-size:11px}.facility-detail{gap:12px}.facility-detail img{width:80px;height:80px}.stage-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:370px){.title-screen{min-height:560px}.title-actions{flex-direction:column;align-items:center}.map-town .art-button{width:220px;margin:0}.game-header{grid-template-columns:52px minmax(0,1fr) 49px}.question-panel h2{font-size:14px}.board-content,.board-scroll{height:300px;max-height:300px}.zoom-tools output{display:none}.town-map{gap:3px}.map-town .symbol-card{flex-basis:91px;width:91px}.facility-intro{grid-template-columns:1fr}.facility-intro article{display:grid;grid-template-columns:64px 1fr;align-items:center}.facility-intro img{grid-row:span 2;margin:0}.facility-intro h3,.facility-intro p{text-align:left}}
.asset-notice{background:#fff8d9;text-align:center;font-size:13px;line-height:1.6}.asset-notice p:not(:empty){padding:10px}.asset-notice button{margin:0 8px 10px}.asset-error .art-button{background:#fff4d6;border:2px solid #a97c3b;border-radius:15px;aspect-ratio:auto;padding:16px;margin:5px}.asset-error .art-button.green{background:#4e713c}.question-panel rt{font-size:10px;letter-spacing:0}.question-panel ruby{ruby-align:center}.question-panel h2{padding-top:4px}.skip-link{position:absolute;left:8px;top:-50px;z-index:100;background:white;padding:8px}.skip-link:focus{top:5px}.board-content{max-height:none!important}.board-scroll{height:auto}
@media(min-width:701px) and (max-height:850px){#game-screen{padding-top:8px}.game-header{margin-bottom:6px}.question-panel{min-height:68px}.board-scroll{max-height:300px}.board-content{height:300px}.map-town .symbol-card{flex-basis:94px;width:94px;padding:15px 18px 20px}.cards{margin-top:0}.play-controls{padding:7px 12px}.feedback{min-height:20px;margin-top:3px}.game-actions{margin-top:7px}.game-actions button{min-height:36px;padding:6px 12px}.title-screen{min-height:580px}}
.board-scroll{position:relative;z-index:1}.board-frame{z-index:0}.map-cell.anchor{outline-style:dashed}
.camera-controls{max-width:1000px;margin:6px auto;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:6px 10px;background:#fff9e9ed;border-radius:13px}.camera-buttons{display:flex;gap:6px}.camera-buttons button{font-size:13px;padding:7px 12px}.camera-controls p{font-size:12px;line-height:1.6;text-align:center}.town-3d.can-rotate,.town-3d.can-rotate canvas,.town-3d.can-rotate .cell-key{touch-action:pan-y pinch-zoom;cursor:grab}.town-3d.is-rotating,.town-3d.is-rotating canvas,.town-3d.is-rotating .cell-key{cursor:grabbing}.town-3d{user-select:none}.compass{width:66px;height:66px;padding:0;border-radius:50%;line-height:1}.compass svg{display:block;width:100%;height:100%;overflow:visible}.compass text{font-size:12px;font-weight:bold;fill:#593b23;paint-order:stroke;stroke:#fffaf1;stroke-width:4px;stroke-linejoin:round}
@media(min-width:701px) and (max-height:850px){.board-scroll{max-height:340px}.board-content{height:340px}}
@media(max-width:700px){.camera-controls{gap:4px;padding:5px}.camera-buttons{gap:5px}.camera-buttons button{font-size:12px;padding:7px 10px;min-height:44px}.camera-controls p{flex-basis:100%;font-size:11px}.compass{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.board-scroll{max-height:none!important;scrollbar-gutter:stable;touch-action:none;overflow-anchor:none}.board-content{min-width:0;min-height:0;margin-left:auto;margin-right:auto}.town-3d,.town-map{transform-origin:0 0}.town-map{inset:0;padding:45px max(10px,calc((100% - 570px)/2)) 12px;border:0;background:#f3f0d9}.zoom-help{max-width:1000px;margin:5px auto;padding:5px 8px;border-radius:10px;background:#fff9e9ed;text-align:center;font-size:12px;line-height:1.6}.town-3d,.town-3d canvas,.town-3d .cell-key,.town-3d.can-rotate,.town-3d.can-rotate canvas,.town-3d.can-rotate .cell-key,.town-map,.town-map .map-cell{touch-action:none}
@media(max-width:700px){.zoom-help{font-size:11px}.town-map{padding:45px 8px 10px}}
@media(max-width:370px){.zoom-tools output{display:inline-block}.board-scroll{max-height:none;height:auto}}
.completion-marker{position:absolute;z-index:5;display:flex;align-items:center;gap:6px;max-width:calc(100% - 12px);padding:7px 11px;background:#fff8d8;border:2px solid #b88724;border-radius:13px;color:#355527;box-shadow:0 3px 7px #533c2533;transform:translate(-50%,-100%);pointer-events:none;font-size:14px;font-weight:700;line-height:1.45;white-space:nowrap}.completion-marker::after{content:'';position:absolute;left:calc(50% - 6px);bottom:-8px;width:12px;height:12px;background:#fff8d8;border-right:2px solid #b88724;border-bottom:2px solid #b88724;transform:rotate(45deg)}.completion-marker img{width:25px;height:25px;object-fit:contain}.map-town .map-cell.just-completed{outline:4px solid #a86f0b;outline-offset:-2px;background:#fff0ac;box-shadow:inset 0 0 0 3px #fff9df}.map-cell.just-completed::after{background:#3e672b;color:#fff;border-radius:50%;width:19px;height:19px;line-height:19px;text-align:center}.title-bottom [data-sound]{font-size:13px;padding:6px 15px;margin:2px 0 6px;min-height:44px}.game-actions [data-sound]{min-height:44px}
@media(max-width:700px){.completion-marker{font-size:12px;padding:5px 8px;gap:4px}.completion-marker img{width:21px;height:21px}}

.board-shell.is-closeup .board-frame{visibility:hidden}

.town-3d{overflow:clip}
.board-scroll.can-rotate{cursor:grab;user-select:none}
.board-scroll.is-rotating,.board-scroll.is-rotating *{cursor:grabbing!important}

/* Reserve the coordinate row; intrinsic SVG dimensions cannot enlarge a cell. */
.town-map{grid-template-rows:repeat(6,minmax(0,1fr))}
.map-symbol-slot{position:absolute;inset:13px 6px 5px;overflow:hidden;pointer-events:none}
.map-symbol-slot img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:100%;height:100%;max-width:42px;max-height:42px;object-fit:contain}
.map-morph-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
.map-morph-symbol{position:absolute;object-fit:contain;filter:drop-shadow(0 2px 2px #fff8d8);transform:translate(-50%,-50%)}
.map-morph-caption{position:absolute;top:7px;left:50%;transform:translateX(-50%);padding:7px 15px;background:#fff9e9f5;border:2px solid #79914e;border-radius:18px;color:#3e652e;font-weight:700;white-space:nowrap;font-size:15px;z-index:1}
.is-map-morph .map-symbol-slot img,.is-map-morph .completion-marker{visibility:hidden}
@media(max-width:700px){.map-morph-caption{font-size:12px;padding:5px 9px;top:8px}}

/* Keep the answer directly beside the town in the reading / keyboard order. */
.selected-symbol{position:absolute;right:8px;top:8px;z-index:4;display:flex;align-items:center;gap:6px;padding:5px 9px;background:#fffaf1f5;border:2px solid #517b36;border-radius:12px;font-size:12px;font-weight:700;pointer-events:none}
.selected-symbol img{width:29px;height:29px;object-fit:contain}
.compass{width:76px;height:76px;top:8px;left:8px}
.compass text{font-size:11px;stroke-width:3px}
#compass-north{fill:#8b4017;font-size:12px}
.town-map{padding-top:82px}
.feedback:empty{display:none}
.card-tools:has(button:not([hidden])){min-height:44px}
.card-tools button{min-height:44px}
.town-result{max-width:1000px;margin:8px auto;background:#fff9e9f5;border:2px solid #a4b583;border-radius:18px;padding:15px 18px;text-align:center;line-height:1.8}
.town-result h2{font-size:22px;color:#3e652e}
.town-result>p{font-size:14px}
#review-status{font-weight:700}
.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0}
.result-actions button{font-size:14px}
.result-actions .primary{background:#476b39;color:#fff;border-color:#345429}
#symbol-review{border-top:1px solid #d9d3b7;margin-top:12px;padding-top:5px}
#symbol-review summary{cursor:pointer;padding:8px;min-height:44px;font-weight:700}
.learned-symbols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:8px 0}
.map-town .learned-symbol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-size:15px;padding:12px 5px;min-width:0}
.learned-symbol img{width:42px;height:42px;object-fit:contain}
.learned-symbol rt{font-size:10px}
@media(max-width:360px){.board-toolbar{flex-wrap:wrap;row-gap:6px}.game-header{grid-template-columns:42px minmax(0,1fr) 50px;gap:4px}.question-panel{padding-inline:5px}.progress{padding-inline:3px}#stage-label{font-size:10px}}
@media(max-width:700px){
 .game-header{grid-template-columns:48px minmax(0,1fr) 50px;margin-bottom:5px}
 .question-panel{min-height:64px;padding:4px}
 .question-panel h2{font-size:15px;line-height:1.4}
 .board-toolbar{margin-bottom:4px}
 .direction-note{font-size:12px;line-height:1.5;margin:4px auto;padding:5px 8px}
 .compass{width:64px;height:64px;top:4px;left:4px}
 .selected-symbol{right:5px;top:5px;font-size:10px;padding:4px 6px;gap:4px}
 .selected-symbol img{width:25px;height:25px}
 .town-map{padding-top:70px}
 .play-controls{margin-top:5px;padding:5px 6px}
 .play-controls>p{font-size:12px;line-height:1.5}
 .cards{margin-top:0;gap:8px}
 .map-town .symbol-card{flex:0 1 82px;width:82px;height:82px;padding:13px 16px 18px}
 .symbol-card[aria-pressed=true]::after{width:19px;height:19px;font-size:14px;right:8px;bottom:7px}
 .card-tools{margin-top:0}
 .town-result{padding:10px}
 .town-result h2{font-size:19px}
 .town-result>p{font-size:12px}
 .result-actions button{font-size:12px;padding:8px 10px}
 .learned-symbols{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .map-town .learned-symbol{font-size:13px}
}