/* 須磨シーワールド マップ — 海と空の明るいデザイン */
:root{
  --deep:#0b6f8b; --sky:#17a5c9; --sea:#1f7fc0; --sand:#f6ead2;
  --ink:#12303c; --sub:#517483; --card:#ffffff; --line:#d5e8ee;
  --orca:#12303c; --coral:#ff6b6b; --green:#12b886;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  --shadow:0 3px 12px rgba(10,60,80,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  display:flex; flex-direction:column; background:#dff2f8; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  font-size:16px; overflow:hidden; -webkit-font-smoothing:antialiased;
}

/* ヘッダー */
.bar{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:linear-gradient(135deg,var(--deep),var(--sky)); color:#fff;
  padding:calc(8px + var(--safe-top)) 14px 8px; box-shadow:var(--shadow); z-index:30}
.bar__t{font-size:17px; font-weight:900; letter-spacing:.01em}
.bar__gps{font-size:11.5px; font-weight:800; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:4px 10px; white-space:nowrap}
.bar__gps.on{background:#12b886; border-color:#12b886}

/* タブ */
.tabs{flex:0 0 auto; display:flex; gap:8px; padding:8px 10px 6px; background:#fff;
  border-bottom:1px solid var(--line); z-index:29}
.tab{flex:1; border:0; border-radius:11px; padding:10px 6px; font-size:14.5px; font-weight:900;
  background:#eef4f7; color:var(--sub); cursor:pointer}
.tab.is-active{background:linear-gradient(135deg,var(--deep),var(--sky)); color:#fff}

/* 現在地バナー */
.here-banner{flex:0 0 auto; font-size:13.5px; font-weight:800; color:#8a5a00;
  background:#fff7e0; border-bottom:1px solid #ffe1a1; padding:7px 14px; min-height:20px; z-index:20}
.here-banner.here{color:#0b6f8b; background:#e2f6fb; border-color:#bfe9f4}
body.pam-mode .here-banner{display:none}
body.pam-mode .dock{display:none}

/* ビュー共通（マップ／パンフ） */
.stage{flex:1 1 auto; position:relative; overflow:hidden}
.view-wrap{position:absolute; inset:0; overflow:hidden; touch-action:none; background:#cfeaf3}
.view-wrap.is-hidden{display:none}
.view-wrap svg, .view-wrap img{position:absolute; left:0; top:0; transform-origin:0 0; cursor:grab; user-select:none; -webkit-user-drag:none}
#pam-wrap{background:#e9eef2}
.pam-credit{position:absolute; left:0; right:0; bottom:0; z-index:22; font-size:11.5px; color:#3c5a66;
  background:rgba(255,255,255,.92); border-top:1px solid var(--line); padding:7px 12px}
.pam-credit a{color:var(--deep); font-weight:800}
.pam-credit.is-hidden{display:none}

/* SVG内の色 */
.g-road{fill:#e8eef2}
.g-roadline{stroke:#c3d2da; stroke-width:2; stroke-dasharray:14 10}
.g-site{fill:#f2fafd}
.g-beach{fill:var(--sand)}
.g-sea{fill:#8fd4ec}
.g-wave{fill:#6ec4e2}
.b-aqua{fill:#bfe4f7; stroke:#5aa8d5}
.b-dolphin{fill:#b5e3ef; stroke:#4fa3c0}
.b-plaza{fill:#d8f2df; stroke:#7cc79a}
.b-orca{fill:#c4d9f5; stroke:#5f8ed0}
.b-hotel{fill:#e6e0f5; stroke:#9a8bd0}
.bshape{stroke-width:3; cursor:pointer}
.bshape.active{stroke:var(--coral); stroke-width:5}
.blabel{font-weight:900; fill:#12455c; text-anchor:middle; pointer-events:none}
.blabel--en{font-size:11px; fill:#517483; font-weight:700}
.poi{cursor:pointer}
.poi text{text-anchor:middle}
.poi .bg{fill:#fff; stroke:#c9dde6; stroke-width:1.5}
.gate .bg{fill:#ffe9ec; stroke:#f2a7b3}

/* 現在地マーカー */
.you-acc{fill:rgba(26,115,232,.15); stroke:rgba(26,115,232,.35); stroke-width:1}
.you-dot{fill:#1a73e8; stroke:#fff; stroke-width:3.5}
.you-pulse{fill:none; stroke:#1a73e8; stroke-width:2; opacity:.7; animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{r:10; opacity:.7}100%{r:34; opacity:0}}
.you-label{font-size:13px; font-weight:900; fill:#1a73e8; text-anchor:middle; paint-order:stroke; stroke:#fff; stroke-width:4}

/* ズーム */
.zoom{position:absolute; right:10px; top:calc(96px + var(--safe-top)); display:flex; flex-direction:column; gap:7px; z-index:25}
.zbtn{width:44px; height:44px; border:0; border-radius:12px; background:#fff; color:var(--deep);
  font-size:22px; font-weight:900; box-shadow:var(--shadow); cursor:pointer}
.zbtn--fit{font-size:12px}

/* 下部ドック */
.dock{flex:0 0 auto; display:flex; gap:8px; padding:8px 10px calc(8px + var(--safe-bottom));
  background:#fff; border-top:1px solid var(--line); z-index:30}
.dbtn{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; border:0;
  background:#f1f8fb; border-radius:12px; padding:8px 4px; font-size:11.5px; font-weight:800;
  color:var(--deep); cursor:pointer; text-decoration:none}
.dbtn span{font-size:20px; line-height:1}
.dbtn--gps.on{background:#12b886; color:#fff}

/* ボトムシート */
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff;
  border-radius:20px 20px 0 0; box-shadow:0 -6px 24px rgba(10,60,80,.25);
  padding:8px 16px calc(14px + var(--safe-bottom)); max-height:62vh; overflow-y:auto}
.sheet__grab{width:44px; height:5px; border-radius:3px; background:#d5e0e6; margin:4px auto 10px}
.sheet__close{width:100%; margin-top:10px; border:0; border-radius:12px; background:#eef4f7;
  color:var(--deep); font-size:15px; font-weight:800; padding:12px; cursor:pointer}
.sh-name{font-size:19px; font-weight:900}
.sh-en{font-size:12px; color:var(--sub); font-weight:700; margin-bottom:8px}
.sh-floor{font-size:14px; padding:7px 10px; background:#f1f8fb; border-radius:9px; margin-bottom:6px; line-height:1.5}
.sh-tip{font-size:13.5px; color:#8a5a00; background:#fff7e0; border:1px solid #ffe1a1;
  border-radius:10px; padding:9px 12px; margin-top:8px; line-height:1.55; font-weight:600}
.sh-note{font-size:12px; color:var(--sub); margin-top:8px}