@font-face{font-family:'Zen Maru Gothic';src:url('fonts/ZenMaruGothic-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter.woff2') format('woff2');font-weight:600 800;font-display:swap;}
:root{
  --navy:#1b2a4a; --sub:#5c6b84; --accent:#f08c00; --paper:#f5f7fa;
  --grid:#e2e7ef; --grid2:#d2dae7; --sea:#cfe5f7; --blue:#2d7de0; --ink:#16233d;
  --w1:126,182,240; --w2:22,78,172;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  color:var(--ink); background:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
}
body::before{content:""; position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid2) 1px, transparent 1px);
  background-size:240px 240px;}
.top{position:relative; padding:14px 16px 4px; z-index:2;}
.badge{display:inline-block; background:var(--navy); color:#fff; font-size:14px; font-weight:700; padding:5px 14px; border-radius:10px;}
.langs{position:absolute; top:12px; right:14px; display:flex; gap:6px;}
.langs button{border:1.5px solid var(--navy); background:#fff; color:var(--navy); font:inherit; font-size:13px; font-weight:700; padding:4px 10px; border-radius:9px; cursor:pointer;}
.langs button[aria-pressed="true"]{background:var(--navy); color:#fff;}
h1{margin:.35em 0 .1em; font-size:clamp(20px,4.6vw,30px); line-height:1.25;}
.sub{margin:0 0 6px; color:var(--sub); font-size:14px;}
main{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:4px 12px 32px;}
@media(min-width:820px){ main{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:18px; align-items:start;} }

.mapwrap{position:relative;}
.cityname{position:absolute; top:8px; left:10px; z-index:3; background:rgba(255,255,255,.93); border:1.5px solid rgba(27,42,74,.4); border-radius:9px; padding:3px 12px; font-weight:700; font-size:15px;}
#map-outer{position:relative; border:2px solid rgba(27,42,74,.35); border-radius:14px; overflow:hidden; background:#cfe5f7; touch-action:none;}
#map{display:block; width:100%; height:auto; cursor:grab;}
#map.drag{cursor:grabbing;}
#tap-pop{position:absolute; transform:translate(-50%,-130%); background:rgba(255,255,255,.96); border:2px solid var(--navy); border-radius:10px; padding:6px 12px; font-size:13px; font-weight:700; line-height:1.45; pointer-events:none; white-space:nowrap; box-shadow:0 2px 8px rgba(20,35,60,.18);}
#tap-pop .ff{color:var(--accent); font-size:15px;}
.legend{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; margin-top:8px; font-size:12.5px; color:var(--navy); background:rgba(255,255,255,.75); border-radius:9px; padding:6px 10px;}
.legend .sw{display:inline-block; width:22px; height:14px; border-radius:3px; border:1px solid rgba(27,42,74,.4); margin-right:5px; vertical-align:-2px;}
.legend .li{display:inline-flex; align-items:center; gap:0;}
.legend .lw{display:inline-block; width:22px; height:4px; border-radius:2px; margin-right:5px;}

.controls{background:rgba(255,255,255,.82); border:1.5px solid rgba(27,42,74,.25); border-radius:16px; padding:14px 14px 12px; backdrop-filter:blur(2px);}
.gauge-row{display:flex; align-items:center; gap:12px;}
.level-big{font-variant-numeric:tabular-nums; font-size:clamp(34px,7vw,46px); font-weight:800; color:var(--navy); font-family:Inter,system-ui,sans-serif; min-width:0; flex:1;}
.play,.ten{border:none; border-radius:12px; font:inherit; font-weight:800; cursor:pointer; padding:12px 16px; font-size:17px;}
.play{background:var(--navy); color:#fff; min-width:58px;}
.play.on{background:var(--accent);}
.ten{background:#fff; color:var(--navy); border:2px solid var(--navy);}
.slider-row{margin:10px 0 2px;}
.track{position:relative; height:38px; border-radius:10px; background:#e7edf6; border:1.5px solid rgba(27,42,74,.3); cursor:pointer; touch-action:none;}
.track .fill{position:absolute; left:0; top:0; bottom:0; border-radius:9px 0 0 9px; background:linear-gradient(90deg, rgba(var(--w1),.65), rgba(var(--w2),.85));}
.track .mark3{position:absolute; top:-4px; bottom:-4px; width:3px; background:var(--accent); border-radius:2px;}
.track .knob{position:absolute; top:3px; width:32px; height:32px; border-radius:50%; background:#fff; border:3px solid var(--navy); transform:translateX(-50%); box-shadow:0 1px 4px rgba(20,35,60,.3); pointer-events:none;}
#slider{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.scale-row{display:flex; justify-content:space-between; font-size:12px; color:var(--sub); font-variant-numeric:tabular-nums; margin-bottom:10px;}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px;}
.stat{background:#fff; border:1.5px solid rgba(27,42,74,.22); border-radius:12px; padding:8px 10px; min-width:0;}
.stat .k{font-size:12.5px; color:var(--sub); font-weight:700;}
.stat .v{font-size:clamp(19px,3.4vw,24px); font-weight:800; color:#b45309; font-family:Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap;}
.stat .s{font-size:11.5px; color:var(--sub); min-height:1.1em;}

.ghost{margin:-4px 0 8px; font-size:13px; color:var(--sub);}
.ghost b{color:var(--navy);}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.chip-group{width:100%; font-size:12px; font-weight:800; color:var(--sub); margin:6px 0 0; letter-spacing:.04em;}
.chip{border:1.5px solid rgba(27,42,74,.45); background:#fff; color:var(--navy); font:inherit; font-size:13.5px; font-weight:700; padding:8px 12px; border-radius:999px; cursor:pointer; min-height:44px;}
.chip[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy);}
.chip small{font-weight:600; opacity:.75; font-size:11px;}

.mission{background:#fff; border:2px solid var(--accent); border-radius:14px; padding:10px 12px; margin-bottom:12px;}
.m-head{font-weight:800; color:#b45309; font-size:14px; margin-bottom:4px;}
.m-now{font-size:14.5px; font-weight:700; line-height:1.5;}
.m-stamps{display:flex; gap:8px; margin-top:8px;}
.stamp{width:42px; height:42px; border-radius:10px; border:2.5px dashed rgba(27,42,74,.4); display:flex; align-items:center; justify-content:center; font-size:19px; color:rgba(27,42,74,.35); background:#fff;}
.stamp.done{border:2.5px solid var(--accent); background:var(--accent); color:#fff; font-weight:900;}
.m-all{margin-top:10px; border-top:1.5px dashed rgba(27,42,74,.3); padding-top:8px;}
.m-all .q{display:flex; gap:8px; align-items:flex-start; margin:7px 0; font-size:13.5px; line-height:1.5;}
.m-all .q .stamp{width:32px; height:32px; font-size:14px; flex:none;}

.notes{font-size:13.5px; color:var(--navy); margin-bottom:12px;}
.notes summary{cursor:pointer; font-weight:800; color:var(--sub);}
.notes div{margin-top:6px; line-height:1.65; color:var(--sub);}
.notes b{color:var(--navy);}

.share-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.share-row button{border:2px solid var(--navy); background:#fff; color:var(--navy); font:inherit; font-weight:800; font-size:14px; padding:10px 14px; border-radius:11px; cursor:pointer; min-height:44px;}
#share-msg{font-size:13px; color:var(--sub);}

footer{position:relative; z-index:1; text-align:center; padding:10px 12px 26px; color:var(--sub); font-size:12.5px; line-height:1.7;}
footer a{color:var(--blue);}
.stat[hidden]{display:none}