:root {
  --ink: #2c2018;
  --paper: #eadbb7;
  --gold: #d7aa45;
  --gold2: #f3d98a;
  --shadow: rgba(15, 8, 3, .55);
  --glass: rgba(41, 28, 18, .62);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #130f11; color: #f9edd0; font-family: ui-serif, Georgia, "Songti SC", serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.loading { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 50% 42%, #5b4028, #151011 70%); transition: opacity .7s ease, visibility .7s; }
.loading.hide { opacity: 0; visibility: hidden; }
.sigil { font-size: 52px; color: var(--gold2); filter: drop-shadow(0 0 22px #f5c55c); animation: pulse 1.8s infinite; }
.loading-title { margin-top: 12px; font-size: clamp(26px, 4vw, 48px); letter-spacing: .12em; }
.loading-copy { margin-top: 10px; opacity: .78; }
@keyframes pulse { 50% { transform: scale(1.08) rotate(8deg); opacity: .7; } }
.app { position: relative; width: 100%; height: 100%; isolation: isolate; }
.map-stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, #3f2c22 0, #171113 68%, #090708 100%); }
.sky-noise { position:absolute; inset:0; opacity:.24; background-image: radial-gradient(circle at 20% 15%, rgba(244,212,132,.22), transparent 24%), radial-gradient(circle at 80% 85%, rgba(100,59,24,.38), transparent 30%); pointer-events:none; }
.map-shell { position: relative; width: min(94vw, 1500px); aspect-ratio: 1376 / 768; transform: translate3d(0,0,0) scale(1); transform-origin: center center; transition: transform .18s ease-out; filter: drop-shadow(0 28px 55px rgba(0,0,0,.5)); user-select: none; }
.base-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; box-shadow: inset 0 0 80px rgba(40,20,5,.5), 0 0 0 1px rgba(236,201,113,.22); }
.base-map::selection { background: transparent; }
.ambient { position: absolute; inset: 0; pointer-events:none; overflow:hidden; border-radius: 22px; }
.spark { position:absolute; width:4px; height:4px; border-radius:99px; background:#f8d886; opacity:.0; animation: drift var(--dur) linear infinite; box-shadow:0 0 12px #f3c65b; }
@keyframes drift { 0%{ transform:translateY(18px) scale(.6); opacity:0; } 15%{ opacity:.62; } 100%{ transform:translateY(-80px) translateX(30px) scale(1.2); opacity:0; } }
.markers { position:absolute; inset:0; }
.marker { position:absolute; width: var(--size); height: var(--size); transform: translate(-50%, -50%); border:0; background: transparent; padding:0; filter: drop-shadow(0 7px 10px rgba(25,10,2,.5)); transition: transform .2s ease, filter .2s ease; }
.marker::before { content:""; position:absolute; inset:10%; border-radius:50%; border:2px solid rgba(248,210,104,.78); box-shadow:0 0 18px rgba(241,192,71,.75), inset 0 0 18px rgba(241,192,71,.18); opacity:.75; animation:ring 2.8s ease-in-out infinite; }
.marker img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform: translateY(-4%); }
.marker:hover, .marker:focus-visible { z-index: 10; transform: translate(-50%, -50%) scale(1.23); filter: drop-shadow(0 12px 18px rgba(10,4,1,.78)); outline: none; }
.marker:hover::before, .marker:focus-visible::before { opacity:1; border-width:3px; }
@keyframes ring { 50% { transform: scale(1.12); opacity:.38; } }
.hud { position:absolute; z-index:5; backdrop-filter: blur(18px); background: linear-gradient(145deg, rgba(49,33,22,.76), rgba(21,15,12,.58)); border:1px solid rgba(233,196,104,.25); box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.top-left { top:24px; left:24px; width:min(410px, calc(100vw - 48px)); padding:22px 24px; border-radius:22px; }
.eyebrow { margin:0 0 8px; text-transform: uppercase; letter-spacing:.18em; font-size:12px; color: var(--gold2); }
h1 { margin:0; font-size: clamp(28px, 4vw, 48px); line-height:1.02; }
.sub { margin:12px 0 0; line-height:1.55; color:#eadcbd; font-size:14px; }
.legend { right:24px; top:24px; width:310px; max-height: calc(100vh - 48px); padding:14px; border-radius:20px; display:flex; flex-direction:column; gap:10px; }
.legend-head { display:flex; align-items:center; justify-content:space-between; color:#f9e8c5; font-size:14px; letter-spacing:.08em; }
.legend-head button, .controls button, .close { background:rgba(247,205,97,.13); border:1px solid rgba(247,205,97,.32); border-radius:999px; padding:8px 12px; }
.location-list { display:grid; gap:7px; overflow:auto; padding-right:4px; scrollbar-width:none; }
.location-list::-webkit-scrollbar { display:none; }
.loc-item { display:grid; grid-template-columns:34px 1fr; gap:9px; align-items:center; border:1px solid transparent; background:rgba(255,244,216,.06); border-radius:14px; padding:7px; text-align:left; }
.loc-item:hover { border-color:rgba(245,208,112,.35); background:rgba(255,244,216,.1); }
.loc-thumb { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.loc-name { display:block; font-size:13px; line-height:1.18; }
.loc-region { display:block; color:#cfbd98; font-size:11px; margin-top:2px; }
.controls { left:24px; bottom:24px; display:flex; gap:8px; padding:8px; border-radius:999px; }
.controls button { width:42px; height:42px; font-size:24px; display:grid; place-items:center; padding:0; }
.detail { position:absolute; z-index:9; inset:32px; display:grid; grid-template-columns: minmax(320px, 54%) minmax(300px, 1fr); gap:22px; padding:22px; border-radius:28px; background: radial-gradient(circle at 15% 20%, rgba(94,58,32,.94), rgba(21,14,12,.96) 62%); border:1px solid rgba(246,208,112,.35); box-shadow:0 30px 90px rgba(0,0,0,.72); transform: translateY(18px) scale(.98); opacity:0; pointer-events:none; transition: .28s ease; }
.detail.open { opacity:1; transform:none; pointer-events:auto; }
.close { position:absolute; right:22px; top:18px; z-index:2; }
.detail-media { min-height:0; display:grid; place-items:center; background:rgba(255,238,194,.07); border-radius:22px; overflow:hidden; border:1px solid rgba(245,206,107,.18); }
.detail-media img { width:100%; height:100%; object-fit:cover; }
.detail-copy { overflow:auto; scrollbar-width:none; padding:28px 14px 10px 4px; }
.detail-copy::-webkit-scrollbar { display:none; }
.detail h2 { margin:0 0 12px; font-size: clamp(30px, 4vw, 56px); line-height:1.02; color:#fff1c9; }
.detail p { line-height:1.65; color:#eadabc; }
.feature-row { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0; }
.chip { border:1px solid rgba(244,207,111,.28); background:rgba(244,207,111,.1); color:#f8e6bb; border-radius:999px; padding:7px 10px; font-size:12px; }
.detail h3 { margin-top:22px; color:var(--gold2); letter-spacing:.08em; }
#poiList { padding-left:20px; color:#f3e5c6; line-height:1.7; }
.mood { margin-top:22px; padding:14px 16px; border-left:3px solid var(--gold); background:rgba(0,0,0,.22); border-radius:12px; }
.toast { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:6; background:rgba(24,16,12,.78); border:1px solid rgba(244,207,111,.3); border-radius:999px; padding:10px 16px; color:#f8e9ca; font-size:13px; opacity:.9; transition:.25s; }
.toast.hide { opacity:0; }
@media (max-width: 900px) {
  .legend { display:none; }
  .top-left { width:calc(100vw - 32px); left:16px; top:16px; padding:16px; }
  .map-shell { width: 140vw; }
  .detail { inset:12px; grid-template-columns:1fr; grid-template-rows:45% 1fr; padding:14px; }
  .detail-copy { padding-top:18px; }
}