:root{
  --ocean:#0c2935;
  --ocean-deep:#071d27;
  --paper:#d2bd86;
  --paper-light:#e1cf9d;
  --ink:#342b1e;
  --cream:#f1e8d2;
  --muted:#bfb49a;
  --gold:#b99b60;
  --panel:rgba(13,20,21,.94);
  --panel-2:#151e1e;
  --line:rgba(242,232,210,.14);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ocean-deep);color:var(--cream);font-family:Georgia,'Times New Roman',serif}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
#mapViewport{position:absolute;inset:0;overflow:hidden;touch-action:none;background:radial-gradient(circle at 48% 38%,#174553 0,#0c2e3a 46%,#071f29 100%);user-select:none;-webkit-user-select:none}
.ocean-grain{position:absolute;inset:-15%;pointer-events:none;opacity:.17;background-image:radial-gradient(circle at 23% 31%,rgba(255,255,255,.15) 0 1px,transparent 1.5px),radial-gradient(circle at 72% 67%,rgba(255,255,255,.08) 0 1px,transparent 1.5px),repeating-radial-gradient(ellipse at center,transparent 0 30px,rgba(255,255,255,.018) 31px 32px);background-size:37px 37px,53px 53px,100% 100%;transform:rotate(4deg)}
#fallbackMap{position:absolute;inset:50% auto auto 50%;width:min(90vw,90vh);height:min(90vw,90vh);object-fit:contain;transform:translate(-50%,-50%);opacity:.22;filter:sepia(.2) saturate(.7);pointer-events:none;transition:opacity .5s ease}
#app.data-ready #fallbackMap{opacity:0}
#mapCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.topbar{position:absolute;z-index:20;left:16px;right:16px;top:max(12px,var(--safe-top));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.brand,.top-actions{pointer-events:auto}
.brand{border:1px solid rgba(255,255,255,.12);background:rgba(7,23,29,.76);color:var(--cream);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-radius:12px;padding:9px 12px 10px;text-align:left;box-shadow:0 7px 28px rgba(0,0,0,.24)}
.brand span{display:block;font:700 9px system-ui,-apple-system,sans-serif;letter-spacing:.2em;color:#c6b897;margin-bottom:2px}
.brand strong{font-size:15px;letter-spacing:.13em;font-weight:600}
.top-actions{display:flex;gap:8px}
.glass-button,.zoom-stack button,.preset-row button{border:1px solid rgba(255,255,255,.13);background:rgba(7,23,29,.78);color:var(--cream);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);box-shadow:0 5px 20px rgba(0,0,0,.2)}
.glass-button{height:42px;border-radius:11px;padding:0 15px;font:650 13px system-ui,-apple-system,sans-serif}
.zoom-stack{position:absolute;z-index:20;right:17px;bottom:20px;display:grid;gap:6px}
.zoom-stack button{width:45px;height:45px;border-radius:11px;font:650 20px system-ui,-apple-system,sans-serif}
.zoom-stack #northBtn{font-size:12px;letter-spacing:.05em}
.scale-badge{position:absolute;z-index:16;right:17px;top:72px;max-width:240px;padding:7px 10px;border-radius:999px;background:rgba(6,20,26,.62);border:1px solid rgba(255,255,255,.09);color:#d4c8ae;font:600 10px system-ui,-apple-system,sans-serif;letter-spacing:.04em;pointer-events:none;transition:opacity .2s}
.map-hint{position:absolute;z-index:15;left:50%;bottom:23px;transform:translateX(-50%);padding:8px 12px;border-radius:999px;background:rgba(6,20,26,.58);color:#d5cab1;font:12px system-ui,-apple-system,sans-serif;pointer-events:none;white-space:nowrap;transition:opacity .35s ease}
.mobile-dock{display:none}
.sheet{position:absolute;z-index:40;left:16px;top:84px;bottom:16px;width:348px;border:1px solid var(--line);border-radius:17px;background:var(--panel);backdrop-filter:blur(20px) saturate(1.08);-webkit-backdrop-filter:blur(20px) saturate(1.08);box-shadow:0 22px 60px rgba(0,0,0,.48);padding:18px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;transform:translateX(calc(-100% - 30px));transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.sheet.open{transform:translateX(0)}
.sheet-grabber{display:none}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.eyebrow{display:block;font:800 10px system-ui,-apple-system,sans-serif;letter-spacing:.19em;color:#bba67b}
.sheet-head h1,.place-card h2{margin:2px 0 0;font-size:27px;font-weight:500}
.close-sheet,#closeCard{border:0;background:transparent;color:#e9dfc9;font:28px/1 system-ui,-apple-system,sans-serif;padding:2px 4px}
.search-box span{display:block;font:11px system-ui,-apple-system,sans-serif;color:#c7bda7;margin-bottom:7px}
.search-box input{width:100%;height:46px;border-radius:11px;border:1px solid rgba(255,255,255,.15);background:#0d1516;color:#f4ecd9;padding:0 12px;outline:none;font:15px system-ui,-apple-system,sans-serif;-webkit-appearance:none}
.search-box input:focus{border-color:#b59961;box-shadow:0 0 0 3px rgba(181,153,97,.14)}
.preset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 12px}
.preset-row button{height:35px;border-radius:9px;font:650 11px system-ui,-apple-system,sans-serif;padding:0 5px}
.result-meta{display:flex;justify-content:space-between;gap:10px;color:#998f7a;font:10px system-ui,-apple-system,sans-serif;padding:2px 1px 10px;border-bottom:1px solid var(--line)}
.place-list{display:grid;padding:6px 0 18px}
.place-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:55px;padding:8px 7px;border:0;border-bottom:1px solid rgba(255,255,255,.075);background:transparent;color:#eee5d1;text-align:left}
.place-row:hover{background:rgba(255,255,255,.045)}
.place-row strong{display:block;font-size:15px;font-weight:500}.place-row small{display:block;color:#a99e86;font:11px system-ui,-apple-system,sans-serif;margin-top:3px}.place-row .row-side{display:flex;align-items:center;gap:7px;color:#b9aa88;font:12px system-ui,-apple-system,sans-serif}.confirm-dot{font-size:10px}.confirm-dot.spec{opacity:.55}
.layer-list{display:grid;gap:2px;margin-top:4px}
.layer-list label{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 3px;border-bottom:1px solid rgba(255,255,255,.075);font-family:system-ui,-apple-system,sans-serif}.layer-list strong{display:block;font-size:14px;color:#ece3cf}.layer-list small{display:block;font-size:11px;line-height:1.35;color:#9f9683;margin-top:3px}.layer-list input{width:21px;height:21px;accent-color:#b4965e;flex:none}.detail-key{display:flex;flex-wrap:wrap;gap:8px 13px;margin:17px 0 13px;color:#b8ae99;font:11px system-ui,-apple-system,sans-serif}.detail-key span{display:flex;align-items:center;gap:6px}.swatch{width:17px;height:8px;border-radius:3px;display:inline-block}.swatch.forest{background:#657353}.swatch.mountain{background:#85775b}.swatch.river{background:#5f8d9a;height:3px}.swatch.road{background:#997c55;height:2px}.license-note{margin:0;color:#8f8777;font:10px/1.45 system-ui,-apple-system,sans-serif}
.place-card{position:absolute;z-index:35;right:18px;bottom:18px;width:min(360px,calc(100vw - 36px));border:1px solid var(--line);border-radius:16px;background:rgba(14,21,21,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 48px rgba(0,0,0,.44);padding:18px 18px 16px;transform:translateY(calc(100% + 40px));opacity:0;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .16s ease}.place-card.open{transform:none;opacity:1}.place-card #closeCard{position:absolute;right:11px;top:10px}.place-card h2{padding-right:28px}.card-chips{display:flex;gap:7px;margin:10px 0}.card-chips span{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);border-radius:999px;padding:5px 8px;color:#c6bba4;font:650 10px system-ui,-apple-system,sans-serif}.place-card p{margin:9px 0 15px;color:#c9bfaa;font:13px/1.5 system-ui,-apple-system,sans-serif}.place-card #cardZoom{height:38px;border-radius:9px;border:1px solid rgba(185,155,96,.34);background:rgba(185,155,96,.12);color:#e7d7b6;padding:0 12px;font:650 12px system-ui,-apple-system,sans-serif}
.loading-panel{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:13px;width:min(335px,calc(100vw - 36px));padding:14px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(8,24,29,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 50px rgba(0,0,0,.35);transition:opacity .35s ease,transform .35s ease}.loading-panel.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-44%)}.loading-panel strong{display:block;font:600 14px Georgia,serif}.loading-panel small{display:block;color:#aaa08b;font:11px/1.4 system-ui,-apple-system,sans-serif;margin-top:3px}.loader-ring{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.13);border-top-color:#cfb67b;animation:spin .8s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:700px){
  .desktop-only{display:none!important}.topbar{left:10px;right:10px;top:max(9px,var(--safe-top))}.brand{padding:8px 10px 9px;border-radius:11px}.brand span{font-size:8px}.brand strong{font-size:13px}.scale-badge{right:10px;top:max(63px,calc(var(--safe-top) + 55px));font-size:9px;max-width:185px}.map-hint{bottom:calc(72px + var(--safe-bottom));font-size:10px;padding:7px 10px}.mobile-dock{position:absolute;z-index:24;left:10px;right:10px;bottom:max(9px,var(--safe-bottom));height:59px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:rgba(7,21,26,.84);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);box-shadow:0 8px 30px rgba(0,0,0,.33)}.mobile-dock button{border:0;border-radius:11px;background:transparent;color:#e7ddc8;display:grid;place-content:center;gap:1px;font-family:system-ui,-apple-system,sans-serif}.mobile-dock button:active{background:rgba(255,255,255,.08)}.mobile-dock span{font-size:20px;line-height:20px}.mobile-dock b{font-size:9px;letter-spacing:.03em}.sheet{left:0;right:0;top:auto;bottom:0;width:100%;height:min(72vh,620px);border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;padding:8px 16px calc(18px + var(--safe-bottom));transform:translateY(105%);transition:transform .24s cubic-bezier(.2,.8,.2,1)}.sheet.open{transform:none}.sheet-grabber{display:block;width:38px;height:4px;border-radius:999px;background:rgba(255,255,255,.18);margin:2px auto 10px}.sheet-head{margin-bottom:12px}.sheet-head h1{font-size:25px}.place-list{padding-bottom:8px}.place-row{min-height:52px}.place-card{right:10px;left:10px;bottom:calc(76px + var(--safe-bottom));width:auto;padding:15px 16px 14px;border-radius:15px}.place-card h2{font-size:23px}.place-card p{font-size:12px}.loading-panel{top:46%}
}
@media (prefers-reduced-motion:reduce){.sheet,.place-card,.loading-panel,.map-hint,#fallbackMap{transition:none}.loader-ring{animation-duration:1.4s}}

.card-art-wrap{height:158px;margin:-18px -18px 14px;border-radius:16px 16px 0 0;overflow:hidden;background:radial-gradient(circle at 50% 64%,rgba(213,193,151,.18),rgba(7,17,19,.04) 58%,rgba(7,17,19,.42));border-bottom:1px solid rgba(255,255,255,.08)}
.card-art-wrap[hidden]{display:none}
.card-art-wrap img{width:100%;height:100%;object-fit:contain;display:block;padding:5px 12px 0;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
@media(max-width:700px){.card-art-wrap{height:128px;margin:-15px -16px 12px}}