*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
:root{ --sidebar-w: clamp(280px, 32vw, 420px); --carW:128px; --hit:170px; }
@media (max-width: 900px){ :root{ --carW:58px; --hit:190px; } }
@media (max-width: 600px){ :root{ --carW:46px; --hit:210px; } }

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:#0f172a; background:#87ceeb;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action:auto; overscroll-behavior-y:auto; -webkit-overflow-scrolling:touch;
}

/* Splash */
.fullscreen{position:relative;width:100%;min-height:100svh;overflow:auto;background:#87ceeb}
.splash-img{position:relative;display:block;margin:0 auto;max-width:100%;height:auto}
#hotspot{position:absolute;border:0;background:rgba(255,255,255,0.001);cursor:pointer;z-index:5;}

/* Menu / Contact */
.page{min-height:100svh;background:linear-gradient(#74c0fc,#a5d8ff);display:flex;justify-content:center;align-items:flex-start;padding:20px}
.stack{width:min(900px,94vw);display:flex;flex-direction:column;gap:18px;align-items:center}
.stack img{width:100%;height:auto;border-radius:20px;box-shadow:0 10px 22px rgba(0,0,0,.18);border:3px solid #0f172a;background:#cde9ff}
.stack a{display:block;width:100%;border-radius:20px}
.btns{display:flex;flex-direction:column;gap:12px;width:min(720px,92vw);margin-top:8px}
.btn{display:flex;justify-content:center;align-items:center;padding:16px 18px;font-weight:900;font-size:20px;border-radius:14px;border:3px solid #0f172a;text-decoration:none;color:#0f172a;background:#ffd166;box-shadow:0 8px 18px rgba(0,0,0,.15)}
.btn.secondary{background:#b2f2bb}
.note{margin-top:6px;color:#1f2937;opacity:.85}

/* App layout (map + sidebar) */
.app{min-height:100svh;padding:12px;background:linear-gradient(180deg,#fed7aa,#fff7ed)}
.grid{display:grid;grid-template-columns:1fr var(--sidebar-w);gap:12px;min-height:calc(100svh - 24px)}
@media (max-width:780px){
  .grid{grid-template-columns:1fr;grid-template-rows:minmax(60svh,72svh) auto;min-height:auto}
}
.card{background:rgba(255,255,255,.96);border:2px solid #1f2937;border-radius:22px;box-shadow:0 12px 30px rgba(0,0,0,0.15);overflow:hidden;position:relative}
.map-wrap{position:relative;height:100%;width:100%;background:#d3f9d8;touch-action:manipulation}
.map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
#touchBannerImg{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:7;width:min(70%,340px);height:auto;display:block}
@media (min-width:781px){ #touchBannerImg{ display:none; } }

#pins-root{position:absolute;inset:0;z-index:5;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%);width:var(--pin-hit,var(--hit));height:var(--pin-hit,var(--hit));border-radius:50%;border:0;background:rgba(255,255,255,0.001);cursor:pointer;z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:manipulation}
@media (hover:hover){ .pin:hover{cursor:pointer} }

.car{position:absolute;transform:translate(-50%,-50%) scale(1);width:var(--carW);height:auto;z-index:6;pointer-events:none;display:block;opacity:1;filter:drop-shadow(2px 0 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(0 -2px 0 white) drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(0 5px 10px rgba(0,0,0,.22))}
@keyframes car-pop{0%{transform:translate(-50%,-50%) scale(.92)}60%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)}}
.car.pop{animation:car-pop 200ms cubic-bezier(.2,.9,.2,1)}

.sidebar{padding:12px;display:flex;flex-direction:column}
#areaTitle{font-weight:900;color:#0f172a;background:linear-gradient(180deg,#ffe08a,#ffc44d);display:inline-block;padding:6px 12px;border-radius:12px;border:2px solid #0f172a}
#areaHint{color:#374151}
.list{margin-top:10px;overflow:auto;max-height:calc(100% - 90px);padding-right:4px;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.item{border:2px solid #0f172a;border-radius:16px;padding:12px;margin-bottom:10px;background:#fffbe6}
.item .name{font-weight:900;color:#0f172a}
.item .desc{font-size:13px;color:#334155;margin-top:2px}
.item .link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:800;text-decoration:none;color:#005bbb;background:#ffd166;border:2px solid #0f172a;border-radius:999px;padding:6px 10px}
.item .link:hover{text-decoration:underline}
.external{font-size:12px;opacity:.9}
.back{font-size:14px;padding:8px 10px;border:2px solid #0f172a;border-radius:10px;background:#fff;cursor:pointer}

.back-btn{position:fixed;top:14px;right:14px;width:60px;height:auto;cursor:pointer;z-index:9999;transition:transform .12s,opacity .12s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));-webkit-tap-highlight-color:transparent;}
.back-btn:active{transform:scale(.92);opacity:.9;}
@media (min-width:768px){.back-btn{width:64px;}}