:root{--ink:#10231d;--paper:#f5f2e9;--green:#0f684c;--lime:#d7ff5f;--orange:#ff6c3a;--blue:#3975ff;--line:#17352c;--muted:#64716c;--white:#fff;--shadow:0 24px 70px rgba(18,45,36,.18)}
*{box-sizing:border-box}body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;color:var(--ink);background:var(--paper);overflow:hidden}button,select{font:inherit}button{color:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(245,242,233,.9);border-bottom:1px solid rgba(16,35,29,.12);backdrop-filter:blur(16px)}.brand{border:0;background:none;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ink);color:var(--lime);font-weight:900}.brand b{display:block;font-size:15px;letter-spacing:.06em}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.top-actions{display:flex;align-items:center;gap:10px}.progress-chip,.select-wrap{height:42px;border:1px solid rgba(16,35,29,.15);border-radius:13px;background:#fff;display:flex;align-items:center;padding:0 14px}.progress-chip{gap:5px}.progress-chip span:first-child{color:var(--orange)}select{border:0;background:transparent;outline:0;font-weight:700;cursor:pointer}
.screen{position:absolute;inset:76px 0 0;display:none}.screen.active{display:flex}.japan-screen{background:radial-gradient(circle at 76% 36%,#eef8d3 0,transparent 32%),linear-gradient(135deg,#f7f4eb,#e9efe8);align-items:center;padding:5vw 8vw;overflow:hidden}.japan-screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(16,35,29,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,35,29,.035) 1px,transparent 1px);background-size:32px 32px}.intro-card{position:relative;z-index:2;width:min(430px,42vw)}.eyebrow{font-size:12px;letter-spacing:.2em;font-weight:900;color:var(--green)}h1{font-size:clamp(38px,5vw,70px);line-height:1.05;margin:14px 0 20px;letter-spacing:-.04em}.intro-card>p:not(.eyebrow){font-size:18px;line-height:1.8;color:var(--muted)}.legend{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;margin-top:38px}.legend i{width:13px;height:13px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 7px rgba(255,108,58,.15)}.japan-stage{position:relative;z-index:2;flex:1;height:100%;display:grid;place-items:center}.japan-map{height:min(78vh,680px);max-width:100%;overflow:visible}.islands path,.okinawa circle{fill:#cdd8cf;stroke:#fff;stroke-width:4}.saitama-target{cursor:pointer;outline:none}.saitama-target>path:first-child{fill:var(--orange);stroke:#fff;stroke-width:4}.pulse{fill:none;stroke:var(--orange);stroke-width:3;transform-origin:421px 365px;animation:pulse 2s infinite}.pin{fill:var(--ink);transform:translateY(-38px);transform-origin:center;transition:.25s}.saitama-target:hover .pin{transform:translateY(-45px) scale(1.07)}@keyframes pulse{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.5);opacity:0}}.location-tag{position:absolute;left:64%;top:38%;transform:translate(60px,-30px);border:0;border-radius:17px;background:#fff;box-shadow:var(--shadow);padding:13px 20px;display:grid;grid-template-columns:auto auto;gap:0 9px;text-align:left;cursor:pointer}.location-tag span{grid-row:1/3;background:var(--lime);padding:7px;border-radius:9px;font-weight:900}.location-tag b{font-size:18px}.location-tag small{font-size:10px;color:var(--muted);letter-spacing:.14em}
.saitama-screen{grid-template-columns:270px 1fr 340px;background:#e6ece6}.mission-panel{background:var(--ink);color:white;padding:26px 20px;overflow:auto}.mission-panel h1{font-size:30px;margin:12px 0}.mission-panel .eyebrow{color:var(--lime)}.mission-copy{color:#a9bbb4;font-size:13px;line-height:1.6}.back-link{border:0;background:none;color:#b8c7c1;padding:0;margin-bottom:22px;cursor:pointer}.category-list{display:grid;gap:9px;margin-top:24px}.category{display:grid;grid-template-columns:42px 1fr;text-align:left;align-items:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:white;border-radius:15px;padding:11px;cursor:pointer;transition:.2s}.category:hover{background:rgba(255,255,255,.09);transform:translateX(3px)}.category.active{background:var(--lime);color:var(--ink);border-color:var(--lime)}.category>span{grid-row:1/3;font-size:22px}.category b{font-size:14px}.category small{font-size:10px;opacity:.65;margin-top:2px}.map-workspace{min-width:0;padding:22px;display:flex;flex-direction:column}.map-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.map-toolbar b{display:block}.map-toolbar small{color:var(--muted)}.zoom-controls{display:flex;align-items:center;background:#fff;border-radius:12px;padding:4px;box-shadow:0 6px 20px rgba(16,35,29,.08)}.zoom-controls button{border:0;background:none;width:34px;height:32px;font-size:20px;cursor:pointer}.zoom-controls span{font-size:11px;font-weight:800;width:50px;text-align:center}.saitama-map-frame{position:relative;flex:1;overflow:hidden;border-radius:24px;background:#cbe4ee;box-shadow:inset 0 0 0 1px rgba(16,35,29,.1)}.map-canvas{position:absolute;inset:0;transform-origin:center;transition:transform .3s}.pref-map{width:100%;height:100%}.pref-shape{fill:#ecf0df;stroke:#fff;stroke-width:8}.river{fill:none;stroke:#65b9db;stroke-width:14;opacity:.75}.rail{fill:none;stroke:#536761;stroke-width:4;stroke-dasharray:8 7}.rail-2{stroke:var(--orange)}.rail-3{stroke:var(--blue)}.marker{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;cursor:pointer;animation:markerIn .35s both}.marker-pin{width:42px;height:42px;display:grid;place-items:center;border-radius:14px 14px 14px 3px;transform:rotate(-45deg);background:#fff;box-shadow:0 9px 20px rgba(16,35,29,.25);border:3px solid var(--accent)}.marker-pin span{transform:rotate(45deg);font-size:19px}.marker-label{display:block;margin-top:8px;background:var(--ink);color:#fff;padding:5px 8px;border-radius:7px;font-size:11px;font-weight:800;white-space:nowrap}.marker:hover{z-index:10;transform:translate(-50%,-54%) scale(1.08)}@keyframes markerIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}.compass{position:absolute;top:18px;left:18px;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:10px;font-weight:900;box-shadow:0 5px 18px rgba(16,35,29,.12)}.compass span{position:absolute;font-size:22px;top:13px}.map-legend{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-radius:12px;padding:9px 12px;font-size:11px;font-weight:700}.map-legend i{display:inline-block;width:22px;height:3px;margin-right:6px;vertical-align:middle;background:var(--orange)}
.detail-panel{background:#fff;border-left:1px solid rgba(16,35,29,.1);overflow:auto;position:relative}.close-card{position:absolute;z-index:2;right:14px;top:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:23px;cursor:pointer}.detail-image{height:220px;display:grid;place-items:center;background:linear-gradient(135deg,#ffd67e,#ff7a4b);overflow:hidden}.detail-image.has-photo{background-size:cover;background-position:center}.detail-image.has-photo:after{content:"";position:absolute}.detail-image>span{font-size:70px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}.detail-content{padding:24px}.detail-meta{display:flex;gap:8px}.detail-meta span{background:#eef2ea;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800}.detail-content h2{font-size:27px;margin:15px 0 10px}.detail-content p{font-size:14px;line-height:1.8;color:var(--muted)}dl{border-top:1px solid #e2e6e1;margin:20px 0}dl div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #e2e6e1;font-size:12px}dt{color:var(--muted)}dd{margin:0;font-weight:800}.stamp-btn{width:100%;border:0;border-radius:13px;padding:14px;background:var(--ink);color:#fff;cursor:pointer}.stamp-btn span{color:var(--lime);margin-right:7px}.stamp-btn.collected{background:#dfe6e0;color:#64716c}.toast{position:fixed;z-index:99;bottom:25px;left:50%;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:white;border-radius:999px;padding:12px 18px;font-size:13px;font-weight:800;transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:900px){body{overflow:auto}.screen{position:relative;inset:auto;padding-top:76px;min-height:100vh}.topbar{padding:0 14px}.japan-screen{flex-direction:column;align-items:stretch;padding:110px 25px 25px}.intro-card{width:100%}.intro-card h1{font-size:42px}.japan-stage{min-height:520px}.saitama-screen{grid-template-columns:1fr}.mission-panel{padding:22px}.category-list{grid-template-columns:repeat(5,minmax(96px,1fr));overflow-x:auto}.category{min-width:110px}.map-workspace{height:620px}.detail-panel{border-left:0}.detail-image{height:260px}.close-card{display:none}}
@media(max-width:560px){.brand small,.progress-chip span:last-child{display:none}.japan-stage{min-height:430px}.location-tag{left:52%;top:36%;transform:translate(40px,-20px)}.category-list{grid-template-columns:repeat(5,110px)}.map-workspace{padding:12px;height:540px}.map-toolbar{align-items:flex-end}.saitama-map-frame{border-radius:18px}.detail-panel{min-height:500px}}

/* Travel picture-book edition */
:root{--paper:#f4eddd;--ink:#17382d;--green:#174e3e;--lime:#e4f27a;--orange:#e95f39}
body{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
.topbar{background:rgba(248,243,231,.92);border-bottom:2px solid var(--ink);height:82px}.brand-mark{border-radius:50%;border:2px solid var(--lime);transform:rotate(-7deg)}.progress-chip,.select-wrap{border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:7px}.screen{inset:82px 0 0}
.japan-screen{background:radial-gradient(circle at 72% 40%,rgba(228,242,122,.42),transparent 31%),linear-gradient(110deg,#f8f1df,#e6edda);padding:4vw 8vw}.japan-screen:before{background-image:linear-gradient(rgba(23,56,45,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,56,45,.045) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(90deg,#000,transparent 80%)}
.passport-kicker{display:flex;align-items:center;gap:12px;margin-bottom:26px}.passport-kicker>span{display:grid;place-items:center;width:58px;height:58px;border:3px double var(--orange);border-radius:50%;color:var(--orange);font-family:serif;font-size:28px;font-weight:900;transform:rotate(-8deg)}.passport-kicker b{font:800 11px/1.25 ui-monospace,monospace;letter-spacing:.16em}.intro-card h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:900;text-shadow:2px 2px 0 #fff}.travel-note{margin-top:34px;display:inline-flex;flex-direction:column;gap:4px;padding:12px 16px;border-left:5px solid var(--orange);background:rgba(255,255,255,.52);transform:rotate(-1deg)}.travel-note b{font:900 11px ui-monospace,monospace;letter-spacing:.16em}.travel-note span{font-size:10px;color:var(--muted)}.japan-map{filter:drop-shadow(0 24px 18px rgba(23,56,45,.12))}.islands path,.okinawa circle{fill:#bdcbb6;stroke:#fbf6e9}.location-tag{border:2px solid var(--ink);border-radius:8px;box-shadow:6px 6px 0 var(--ink);transform:translate(60px,-30px) rotate(2deg)}.location-tag:after{content:"↗";position:absolute;right:-12px;top:-14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:white;border:2px solid white}
.saitama-screen{grid-template-columns:286px 1fr 348px;background:#dbe5d4}.mission-panel{background:#17382d;padding:24px;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:15px 15px}.passport-stamp{width:104px;height:104px;margin:2px auto 24px;border:3px double rgba(228,242,122,.8);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--lime);font:800 9px ui-monospace,monospace;letter-spacing:.13em;transform:rotate(-8deg)}.passport-stamp b{font-family:"Yu Mincho",serif;font-size:18px;letter-spacing:.05em}.passport-stamp small{font-size:7px;margin-top:3px}.mission-panel h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif}.category{border-radius:8px;border:1px solid rgba(255,255,255,.25)}.category.active{box-shadow:4px 4px 0 #0d271f;transform:translate(-2px,-2px)}.category>span{filter:saturate(.8)}
.map-workspace{padding:18px}.saitama-map-frame{border:7px solid #f9f4e9;border-radius:5px;background:#c9e0dd;box-shadow:0 15px 38px rgba(23,56,45,.2),0 0 0 1px var(--ink);transform:rotate(-.3deg)}.map-canvas{background:url('images/saitama-diorama.png') center/cover no-repeat}.pref-map{opacity:.12;mix-blend-mode:multiply}.pref-shape{fill:#fff;stroke:#fff}.river,.rail{opacity:0}.paper-label{position:absolute;z-index:5;top:18px;left:20px;padding:10px 15px;background:#fffaf0;border-left:5px solid var(--orange);box-shadow:3px 4px 0 rgba(23,56,45,.25);transform:rotate(-2deg)}.paper-label b{display:block;font:900 20px "Yu Mincho",serif}.paper-label span{font:800 8px ui-monospace,monospace;letter-spacing:.14em}.route-ticket{position:absolute;z-index:4;right:18px;bottom:16px;width:160px;padding:10px 13px;background:#f8d9a2;border:1px dashed #7d5d31;box-shadow:3px 4px 0 rgba(23,56,45,.22);transform:rotate(2deg);display:flex;flex-direction:column}.route-ticket small,.route-ticket span{font:800 7px ui-monospace,monospace;letter-spacing:.12em}.route-ticket b{font:900 20px Georgia,serif;letter-spacing:.08em}.map-legend{bottom:18px;left:18px;border:1px solid var(--ink);border-radius:5px;box-shadow:3px 3px 0 rgba(23,56,45,.35)}
.marker-pin{background:#fff9e9;border:3px solid var(--accent);border-radius:50% 50% 50% 4px;box-shadow:3px 5px 0 rgba(23,56,45,.45)}.marker-label{border-radius:3px;background:#fff9e9;color:var(--ink);border:1px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}.detail-panel{background:#faf5e9}.detail-image{height:240px;background:linear-gradient(rgba(15,45,35,.08),rgba(15,45,35,.22)),url('images/saitama-diorama.png') center/cover}.detail-image>span{width:78px;height:78px;display:grid;place-items:center;background:rgba(255,250,240,.9);border:3px double var(--ink);border-radius:50%;font-size:40px}.detail-content h2{font-family:"Yu Mincho","Hiragino Mincho ProN",serif}.detail-meta span{border-radius:3px;border:1px solid rgba(23,56,45,.25)}.stamp-btn{border-radius:5px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--orange)}.stamp-btn.collected{box-shadow:none}
@media(max-width:900px){.screen{inset:auto;padding-top:82px}.saitama-screen{grid-template-columns:1fr}.passport-stamp{float:right;margin:0;width:72px;height:72px}.mission-panel h1{font-size:27px}.map-workspace{height:650px}.route-ticket{display:none}}