/* Fixed scene coordinates keep artwork and destinations aligned at every size. */
html,body{background:#1b120d}.lobby{height:100svh;min-height:0;background:#1b120d}
#map-stage{position:absolute;left:50%;top:50%;width:min(100vw,177.68svh);aspect-ratio:1672/941;transform:translate(-50%,-50%);isolation:isolate}
#map-canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#map-stage .map{inset:0;height:100%;top:0}
.map .marker{opacity:0;min-width:0;width:6.2%;padding:0;transform:translate(-50%,-50%);filter:drop-shadow(3px 5px 2px #24170b66)}
.marker .label{display:none!important}
.marker .seal,.marker.village .seal{position:relative;width:100%;height:auto;aspect-ratio:78/90;background:#bca064;box-shadow:none;isolation:isolate;clip-path:polygon(0 0,100% 0,100% 64%,90% 64%,90% 77%,76% 77%,76% 88%,60% 88%,60% 100%,40% 100%,40% 88%,24% 88%,24% 77%,10% 77%,10% 64%,0 64%)}
.marker .seal:before{content:"";position:absolute;inset:5%;z-index:-1;background:#76372c;clip-path:inherit;box-shadow:inset 0 4px #f7d39c22}
.marker.village .seal:before{background:#4c6244}
.marker .seal svg,.marker.village .seal svg{width:59%;height:59%;fill:#efe0b2;transform:translateY(-7%);shape-rendering:crispEdges}
.marker .cut{fill:#76372c}.marker.village .cut{fill:#4c6244}
.map .marker.selected::before{content:none;display:none}
.marker:hover .seal{filter:brightness(1.2);transform:none}
.map .marker:focus,.map .marker:focus-visible{outline:none}
.map .marker.selected .seal{background:transparent}
.map .marker.selected::after{content:'';position:absolute;left:50%;top:-21px;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid #ffdf9e;filter:drop-shadow(0 2px 1px #1b120d);pointer-events:none}
.marker.village{left:26.6%;top:21.5%}.marker[data-region=infinite]{left:78.2%;top:22.3%}.marker[data-region=contract]{left:68.6%;top:65.7%}.marker[data-region=normal]{left:26%;top:63.8%}
.lobby[data-phase=ready] .marker .seal{animation:badge-float 3.5s ease-in-out infinite}
.marker:nth-of-type(2) .seal{animation-delay:-.65s!important}.marker:nth-of-type(3) .seal{animation-delay:-1.4s!important}.marker:nth-of-type(4) .seal{animation-delay:-2.1s!important}
@keyframes badge-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.scene-controls{position:absolute;left:20px;top:18px;z-index:5;display:flex;gap:8px;opacity:.55;transition:opacity .2s}
.scene-controls:hover,.scene-controls:focus-within{opacity:1}
.scene-controls a,.scene-controls button{display:grid;place-items:center;background:#21180dd9;border:1px solid #b29a5c66;color:#e5d4a6;width:38px;height:36px;font:23px Georgia,serif;cursor:pointer}
#skip-intro[hidden]{display:none}#intro-status{position:absolute;bottom:7%;left:0;right:0;margin:0;text-align:center;font-size:12px;color:#dfc899;letter-spacing:.1em;pointer-events:none}
.dossier{max-height:80svh;top:12%;right:3%;width:310px;bottom:auto;z-index:6}
@media(max-width:700px){.lobby{min-height:0;height:100svh}.scene-controls{left:12px;top:12px}#map-stage{width:100vw}.map .marker{width:8%}.marker.village{left:26.6%;top:21.5%}.marker[data-region=infinite]{left:78.2%;top:22.3%}.marker[data-region=contract]{left:68.6%;top:65.7%}.marker[data-region=normal]{left:26%;top:63.8%}.dossier{left:5%;right:5%;top:auto;bottom:5%;width:90%;margin:0;max-height:75svh;min-height:0}.marker.selected:before{inset:-6%}}
@media(prefers-reduced-motion:reduce){.lobby[data-phase=ready] .marker .seal{animation:none}}
/* Reuse the approved heraldry artwork without redrawing its symbols. */
.map .marker{width:4.95%}
.marker .seal,.marker.village .seal{background:transparent;aspect-ratio:83/98}
.marker .seal:before{display:none}
.marker .seal svg,.marker.village .seal svg{width:100%;height:100%;transform:none;image-rendering:pixelated}
@media(max-width:700px){.map .marker{width:6.1%}}
/* Independent vector badges avoid raster resampling inside an SVG viewport. */
.marker .seal,.marker.village .seal{aspect-ratio:80/96;clip-path:none;overflow:visible}
.badge-art{display:block;width:100%;height:auto;image-rendering:auto;pointer-events:none}
.map .marker{filter:drop-shadow(2px 3px 0 #24170b66)}

.game-brand{position:absolute;top:auto;bottom:14px;right:20px;z-index:5;width:clamp(140px,18vw,240px);mix-blend-mode:normal;opacity:1}.game-brand img{display:block;width:100%;height:auto;image-rendering:pixelated}@media(max-width:700px){.game-brand{top:auto;bottom:12px;right:12px;width:140px}}

/* Every destination shares the same shield geometry and rendered dimensions. */
#map-stage .marker{width:4.95%;aspect-ratio:80/96}
#map-stage .marker .seal{display:block;width:100%;height:100%;aspect-ratio:80/96}
#map-stage .badge-art{width:100%;height:100%;object-fit:contain}

/* Light stays in scene coordinates, so the lantern aligns in fullscreen too. */
#map-stage{overflow:hidden}
#map-stage .map{z-index:2}
.lantern-light{position:absolute;inset:0;z-index:1;pointer-events:none}
.lantern-light::before,.lantern-light::after{content:"";position:absolute;inset:0;pointer-events:none}
.lantern-light::before{background:radial-gradient(ellipse at 93% 4%,#ffbb51aa 0%,#ffac4938 23%,#e9992910 60%,transparent 85%);mix-blend-mode:screen;opacity:.24;animation:lantern-light-breathe 6.7s ease-in-out infinite}
.lantern-light::after{background:linear-gradient(215deg,transparent 15%,#24120444 100%);opacity:.13;animation:lantern-shadow-breathe 6.7s ease-in-out infinite}
.lantern-flame{position:absolute;left:92.7%;top:1.4%;width:.9%;height:3.4%;transform-origin:50% 95%;border-radius:65% 35% 45% 45%;background:radial-gradient(ellipse at 50% 76%,#fff4b9 0%,#ffdf6aaa 35%,#ff9f2433 65%,transparent 75%);mix-blend-mode:screen;opacity:.65;filter:blur(.7px);animation:lantern-flame-sway 2.3s ease-in-out infinite,lantern-light-breathe 6.7s ease-in-out infinite}
@keyframes lantern-flame-sway{0%,100%{transform:rotate(-5deg) scale(.95,1)}24%{transform:rotate(4deg) scale(1.06,.92)}53%{transform:rotate(-3deg) scale(.94,1.07)}78%{transform:rotate(6deg) scale(1.02,.96)}}
@keyframes lantern-light-breathe{0%,100%{opacity:.24}17%{opacity:.31}29%{opacity:.22}43%{opacity:.28}61%{opacity:.20}76%{opacity:.30}89%{opacity:.25}}
@keyframes lantern-shadow-breathe{0%,100%{opacity:.13}17%{opacity:.08}29%{opacity:.15}43%{opacity:.10}61%{opacity:.17}76%{opacity:.09}89%{opacity:.12}}
@media(prefers-reduced-motion:reduce){.lantern-flame,.lantern-light::before,.lantern-light::after{animation:none}}

/* Keep the scene covered until all artwork is decoded, then reveal from black. */
.lobby-loader{opacity:1;transition:opacity 1.2s ease-in-out}
.loader-content{text-align:center;font:14px Georgia,serif;letter-spacing:.08em;padding:24px}
.loader-content p{margin:14px 0}
#loading-detail{font-size:11px;color:#9d8c70}
#lobby-progress{display:block;width:min(240px,65vw);height:4px;margin:22px auto;appearance:none;border:0;background:#292119;accent-color:#d4af65}
#lobby-progress::-webkit-progress-bar{background:#292119}
#lobby-progress::-webkit-progress-value{background:#d4af65;transition:width .15s linear}
#lobby-progress::-moz-progress-bar{background:#d4af65}
#loading-retry{color:#dec38a}
.lobby-loader[data-state=black] .loader-content,.lobby-loader[data-state=reveal] .loader-content{visibility:hidden}
.lobby-loader[data-state=reveal]{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.lobby-loader{transition:none}}

.destination-name{position:absolute;top:2.5%;left:50%;transform:translate(-50%,-4px);z-index:3;margin:0;color:#f6e3b4;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(16px,2.1vw,30px);font-weight:700;letter-spacing:.18em;line-height:1.4;text-align:center;white-space:nowrap;text-shadow:0 2px 4px #000,0 0 15px #000;pointer-events:none;opacity:0;transition:opacity .16s ease,transform .16s ease}
.destination-name[data-visible=true]{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.destination-name{transition:none}}

/* Gold rules frame every destination name as one fading ornament. */
.destination-name{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.8vw,30px);width:48%}
.destination-name::before,.destination-name::after{content:'';display:block;flex:1;min-width:0;height:2px;background:linear-gradient(90deg,transparent,#9c7334 18%,#e5c779 78%,#fff0bb);box-shadow:0 1px 0 #2b190c,0 0 6px #e6bc5933}
.destination-name::after{background:linear-gradient(90deg,#fff0bb,#e5c779 22%,#9c7334 82%,transparent)}
@media(max-width:700px){.destination-name{width:58%;gap:12px}.destination-name::before,.destination-name::after{height:1px}}