:root {
  --ink: rgba(54, 62, 64, .72);
  --ghost: rgba(71, 81, 84, .22);
  --line: rgba(174, 214, 220, .52);
  --glow: rgba(207, 241, 245, .78);
  --surface: rgba(244, 247, 247, .72);
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#edf1f1; color:var(--ink); font-family: Inter, "Noto Sans JP", system-ui, sans-serif; }
button { font: inherit; }
#app, #viewport, #ambient { position:fixed; inset:0; }
#app { opacity:0; transition:opacity 1s ease; }
body.ready #app { opacity:1; }
#ambient { background: radial-gradient(circle at 48% 35%, rgba(255,255,255,.96), rgba(224,232,233,.82) 68%, rgba(207,219,221,.82)); transition: background 1.8s ease, filter 1.8s ease; }
#viewport { overflow:hidden; touch-action:none; cursor:grab; }
#viewport.dragging { cursor:grabbing; }
#world { position:absolute; left:0; top:0; width:2200px; height:1500px; transform-origin:0 0; will-change:transform; }
#mapLayer, #contentLayer, #surfaceTexture, #routeLayer { position:absolute; inset:0; width:100%; height:100%; }
#mapLayer { z-index:1; pointer-events:none; }
#routeLayer { z-index:2; overflow:visible; pointer-events:auto; }
#contentLayer { z-index:4; pointer-events:none; }
#surfaceTexture { z-index:3; pointer-events:none; opacity:.88; mix-blend-mode:screen; background:
 radial-gradient(ellipse at 8% 12%, rgba(121,139,141,.12) 0 1px, transparent 2px),
 radial-gradient(ellipse at 88% 18%, rgba(99,114,116,.09) 0 1.5px, transparent 2.5px),
 radial-gradient(ellipse at 13% 82%, rgba(82,96,98,.08) 0 1px, transparent 2px),
 linear-gradient(111deg, transparent 0 11%, rgba(120,137,140,.05) 11.1%, transparent 11.4% 100%),
 linear-gradient(67deg, transparent 0 83%, rgba(105,122,124,.06) 83.1%, transparent 83.35% 100%),
 radial-gradient(circle at 50% 50%, rgba(255,255,255,.36), rgba(239,244,244,.18) 48%, rgba(211,221,222,.24)); }
#surfaceTexture::after { content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 50% 48%, transparent 0 43%, rgba(255,255,255,.18) 67%, rgba(150,164,166,.06)); backdrop-filter: blur(.3px); }

#intro { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:rgba(246,248,248,.88); backdrop-filter:blur(8px); transition:opacity .85s ease, filter .85s ease; }
#intro div { font-size:clamp(9px, .75vw, 12px); letter-spacing:.12em; color:rgba(70,76,78,.42); }
body.ready #intro { opacity:0; filter:blur(10px); pointer-events:none; }

.map-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.map-svg path { fill:none; stroke:rgba(79,92,95,.17); stroke-width:2; vector-effect:non-scaling-stroke; filter:blur(.15px); }
.region-name { position:absolute; transform:translate(-50%,-50%); font-size:13px; letter-spacing:.22em; color:rgba(54,63,65,.18); text-transform:uppercase; pointer-events:none; }

.route { fill:none; pointer-events:stroke; stroke:var(--line); stroke-width:2.2; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px var(--glow)); cursor:pointer; transition:stroke .35s ease, opacity .35s ease; }
.route-hit { fill:none; pointer-events:stroke; stroke:rgba(255,255,255,.001); stroke-width:44; vector-effect:non-scaling-stroke; cursor:pointer; }
.route-group:hover .route, .route-group:focus .route { stroke:rgba(198,236,241,.92); }
.route-label { position:fixed; z-index:30; padding:0; color:rgba(58,66,68,.52); font-size:10px; letter-spacing:.2em; pointer-events:none; opacity:0; transition:opacity .6s ease; }
.route-label.show { opacity:1; }

.item { position:absolute; pointer-events:auto; transform-origin:center; user-select:none; }
.photo-stack { width:230px; height:190px; cursor:pointer; }
.film { position:absolute; width:210px; padding:9px 9px 28px; background:rgba(250,252,251,.82); border:1px solid rgba(255,255,255,.68); box-shadow:0 10px 28px rgba(55,67,69,.08); backdrop-filter:blur(3px); }
.film img, .film .placeholder { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:linear-gradient(145deg,#b8c6c6,#e5eaea 45%,#889b9d); }
.film .scribble { position:absolute; left:14px; bottom:10px; width:44%; height:4px; opacity:.22; background:linear-gradient(90deg,currentColor 0 70%,transparent 70% 78%,currentColor 78%); filter:blur(.4px); }
.report { width:205px; min-height:278px; padding:28px 25px; background:rgba(251,252,251,.7); border:1px solid rgba(255,255,255,.7); box-shadow:0 14px 32px rgba(64,73,75,.055); backdrop-filter:blur(4px); cursor:pointer; }
.report h3 { margin:0 0 24px; font-size:13px; line-height:1.5; font-weight:450; letter-spacing:.035em; }
.report .lines { opacity:.2; background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 11px); height:120px; }
.note { width:170px; min-height:105px; padding:20px; background:rgba(248,250,249,.48); border:1px solid rgba(255,255,255,.52); backdrop-filter:blur(5px); cursor:pointer; font-size:11px; line-height:1.7; color:rgba(54,62,64,.48); }
.item:hover { filter:drop-shadow(0 5px 8px rgba(60,72,74,.06)); }

#hud { position:fixed; z-index:20; right:max(22px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); text-align:right; color:rgba(220,239,241,.88); text-shadow:0 0 9px rgba(178,223,229,.9); font-variant-numeric:tabular-nums; letter-spacing:.15em; pointer-events:none; }
#counter { font-size:11px; margin-bottom:8px; transition:filter .14s ease; }
#clock { appearance:none; border:0; background:none; padding:0; color:inherit; font-size:12px; letter-spacing:.18em; text-shadow:inherit; pointer-events:auto; cursor:pointer; transition:filter .14s ease; }
.blur-tick { filter:blur(4px); }
#regionWhisper { position:fixed; z-index:18; left:50%; bottom:7vh; transform:translateX(-50%); font-size:10px; letter-spacing:.28em; color:rgba(69,78,80,.3); opacity:0; transition:opacity .7s ease; text-transform:uppercase; pointer-events:none; }
#regionWhisper.show { opacity:1; }
#resetView { position:fixed; z-index:20; left:18px; bottom:14px; width:28px; height:28px; border:0; background:transparent; color:rgba(65,75,77,.18); font-size:22px; cursor:pointer; }

#viewer { width:min(88vw, 1040px); height:min(88vh, 820px); border:0; padding:0; background:rgba(247,249,248,.9); color:var(--ink); box-shadow:0 30px 100px rgba(30,42,44,.18); backdrop-filter:blur(22px); overflow:hidden; }
#viewer::backdrop { background:rgba(225,231,231,.58); backdrop-filter:blur(8px); }
#viewerClose { position:absolute; z-index:3; right:18px; top:14px; border:0; background:none; color:rgba(45,55,57,.5); font-size:25px; cursor:pointer; }
#viewerBody { height:100%; overflow:auto; display:grid; place-items:center; padding:60px 80px; }
.viewer-photo { max-width:100%; max-height:calc(88vh - 150px); display:block; object-fit:contain; box-shadow:0 15px 45px rgba(40,50,52,.08); }
.viewer-caption { margin-top:18px; max-width:720px; font-size:12px; line-height:1.9; color:rgba(50,60,62,.62); }
.viewer-doc { width:min(720px,100%); min-height:100%; padding:8vh 7vw; background:rgba(255,255,255,.62); }
.viewer-doc h2 { font-weight:450; font-size:clamp(21px,3vw,34px); line-height:1.35; }
.viewer-doc p { font-size:14px; line-height:2; }
.viewer-nav { position:absolute; z-index:3; top:50%; border:0; background:none; color:rgba(54,64,66,.35); font-size:24px; cursor:pointer; }
.viewer-nav.prev { left:18px; transform:translateY(-50%) rotate(-90deg); }
.viewer-nav.next { right:18px; transform:translateY(-50%) rotate(90deg); }
.viewer-nav[hidden] { display:none; }

body.traveling #world { transition:filter .7s ease; filter:blur(4px); }
body.traveling #regionWhisper { opacity:1; }

@media (max-width: 700px) {
  #world { width:1500px; height:1100px; }
  .photo-stack { transform:scale(.86); transform-origin:top left; }
  .report { width:180px; min-height:245px; }
  #viewer { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; }
  #viewerBody { padding:58px 46px 38px; }
  .viewer-nav { font-size:20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* v3 visual direction: white glacier-film surface */
html, body { background:#fbfcfc; }
#ambient { background:radial-gradient(circle at 50% 42%, #ffffff 0%, #f8faf9 48%, #edf2f2 100%); }
#surfaceTexture { opacity:.72; mix-blend-mode:multiply; }
#surfaceTexture::after { backdrop-filter:blur(1.4px); }
.map-svg path { stroke:rgba(66,78,80,.15); filter:blur(.55px); }
.route { stroke:rgba(132,180,187,.34); stroke-width:2; filter:blur(.45px) drop-shadow(0 0 10px rgba(155,211,219,.62)); }
.route-group:hover .route, .route-group:focus .route { stroke:rgba(112,181,191,.66); filter:blur(.25px) drop-shadow(0 0 13px rgba(143,214,224,.78)); }
#hud { color:rgba(93,137,143,.66); text-shadow:0 0 10px rgba(150,210,218,.6); }
body.traveling #world { filter:blur(8px); }