:root{
  --bg:#0f3d8c; --fg:#fff; --panel:rgba(255,255,255,.94); --ink:#15223b; --muted:#5b6780;
  --accent:#1e6cff; --line:rgba(21,34,59,.14);
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#dfe7f2;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;color:var(--ink)}
button{font:inherit;color:inherit}

#map{position:fixed;inset:0;z-index:1;background:#dfe7f2}

/* 上部：3社切替 */
#top{position:fixed;left:0;right:0;top:0;z-index:1000;padding:calc(var(--st) + 8px) 10px 8px;
  background:linear-gradient(180deg,rgba(15,61,140,.96),rgba(15,61,140,.88));box-shadow:0 2px 10px rgba(0,0,0,.2)}
#src{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:6px;background:rgba(255,255,255,.14);padding:4px;border-radius:12px}
#src>*{display:flex;align-items:center;justify-content:center;gap:3px;height:38px;border:0;border-radius:9px;
  background:transparent;color:#fff;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap}
#src>.on{background:#fff;color:var(--bg)}
#src .ext{font-size:12px;opacity:.75}

/* 右側ボタン */
#side{position:fixed;right:10px;top:calc(var(--st) + 70px);z-index:1000;display:flex;flex-direction:column;gap:8px}
#side button{width:46px;height:46px;border-radius:12px;border:0;background:var(--panel);color:var(--ink);
  font-size:22px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer}
#side button:active{transform:scale(.95)}
#btn-locate{color:var(--accent)!important}
#btn-locate.busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#status{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--st) + 66px);z-index:1001;
  background:rgba(21,34,59,.88);color:#fff;font-size:13px;padding:7px 12px;border-radius:20px;max-width:calc(100% - 90px);text-align:center}

/* 下部：タイムライン */
#bar{position:fixed;left:0;right:0;bottom:0;z-index:1000;padding:8px 10px calc(var(--sb) + 8px);
  background:var(--panel);box-shadow:0 -2px 12px rgba(0,0,0,.18);border-radius:16px 16px 0 0}
#timeline{display:flex;align-items:center;gap:10px}
#btn-play{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:20px;cursor:pointer}
#btn-now{flex:none;height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px;cursor:pointer}
#tl-body{flex:1;min-width:0}
#tl-label{display:flex;align-items:baseline;gap:8px}
#tl-time{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
#tl-kind{font-size:13px;font-weight:700;color:var(--muted)}
#tl-kind.fc{color:#d9480f}
#tl-kind.now{color:var(--accent)}
#slider{width:100%;margin:4px 0 0;height:28px;accent-color:var(--accent)}
#tl-marks{position:relative;display:flex;justify-content:space-between;font-size:11px;color:var(--muted);height:14px}
#tl-now{position:absolute;transform:translateX(-50%);color:var(--accent);font-weight:700}
#legend{display:flex;margin-top:6px;border-radius:6px;overflow:hidden;font-size:10px;line-height:16px}
#legend span{flex:1;text-align:center;background:var(--c);color:#15223b}
#legend span:nth-child(n+3):nth-child(-n+4),#legend span:nth-child(n+7){color:#fff}

/* Leaflet 調整 */
.leaflet-control-attribution{font-size:9px!important;max-width:70vw;white-space:normal}
.leaflet-bottom{bottom:var(--barh,140px)!important}
.leaflet-top{top:var(--toph,60px)!important}
.here{width:18px;height:18px;border-radius:50%;background:#1e6cff;border:3px solid #fff;box-shadow:0 0 0 2px rgba(30,108,255,.35),0 1px 4px rgba(0,0,0,.4)}
.here.stale{background:#8a94a8}
@media (max-width:360px){#src>*{font-size:13px}#tl-time{font-size:19px}}