/* みなとみらい鬼ごっこ4 — 公式サイト
   すりガラス＋暗い背景。アクセントは赤1色のみ。 */

:root{
  --bg:#0a0a0c;
  --fg:#f3f3f5;
  --muted:rgba(243,243,245,.64);
  --faint:rgba(243,243,245,.38);
  --accent:#e3312c;
  --accent-soft:rgba(227,49,44,.16);
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.09);
  --glass-border:rgba(255,255,255,.12);
  --glass-shine:rgba(255,255,255,.12);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --line:rgba(255,255,255,.10);
  --stripe:rgba(255,255,255,.11);
  --ok:#f3f3f5;
  --panel:#000;
  --radius:22px;
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3f3f6;
  --fg:#141418;
  --muted:rgba(20,20,24,.64);
  --faint:rgba(20,20,24,.42);
  --accent:#c9231f;
  --accent-soft:rgba(201,35,31,.10);
  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.78);
  --glass-border:rgba(20,20,24,.10);
  --glass-shine:rgba(255,255,255,.85);
  --shadow:0 18px 50px rgba(20,20,24,.10);
  --line:rgba(20,20,24,.10);
  --stripe:rgba(20,20,24,.09);
  --ok:#141418;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
b{font-weight:700}

/* 背景：アクセント1色のごく薄いグローだけ */
.bgwash{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% -6%, rgba(227,49,44,.22), transparent 70%),
    var(--bg);
}
:root[data-theme="light"] .bgwash{
  background:
    radial-gradient(60% 40% at 50% -6%, rgba(201,35,31,.13), transparent 70%),
    var(--bg);
}

/* ガラス */
.glass{
  position:relative;isolation:isolate;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
}
.glass::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, var(--glass-shine), transparent 38%);
  opacity:.55;
}

/* ヘッダー */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  padding:10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.brand-oni{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:#000;color:var(--accent);font-family:var(--serif);font-weight:800;font-size:19px;line-height:1;
  border:1px solid rgba(255,255,255,.14);
}
.brand-text b{color:var(--accent);margin-left:2px}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--muted);
  padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.nav a:hover{color:var(--fg);background:var(--glass-strong)}
.theme-toggle{
  flex:none;width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid var(--glass-border);background:var(--glass);color:var(--fg);
  display:grid;place-items:center;font-size:17px;line-height:1;
}
.theme-toggle:hover{background:var(--glass-strong)}
.tt-icon::before{content:"☀"}
:root[data-theme="light"] .tt-icon::before{content:"☾"}
@media (max-width:640px){
  .nav{display:none}
  .theme-toggle{margin-left:auto}
  .brand-text{font-size:.95rem}
}

/* レイアウト */
main{max-width:1080px;margin:0 auto;padding:0 16px 40px}
.section{padding:56px 0 8px;scroll-margin-top:64px}
.sec-head{margin-bottom:22px}
.kicker{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.3em;color:var(--accent);
  text-transform:uppercase;margin-bottom:6px;
}
h2{
  font-family:var(--serif);font-weight:800;letter-spacing:.04em;
  font-size:clamp(1.55rem, 3.6vw, 2.25rem);line-height:1.3;margin:0 0 8px;
}
h3{font-size:1.15rem;font-weight:700;margin:0 0 10px;letter-spacing:.02em}
h4{font-size:.85rem;font-weight:700;color:var(--muted);letter-spacing:.08em;margin:18px 0 4px}
.sec-desc{margin:0;color:var(--muted);max-width:62ch}
.sec-desc b{color:var(--fg)}
.pc{display:none}
@media (min-width:720px){.pc{display:inline}}

/* ヒーロー */
.hero{padding:34px 0 12px;text-align:center}
.hero-logo{
  background:var(--panel);border-radius:26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.6) inset;
  max-width:900px;margin:0 auto;
}
.hero-logo img{width:100%;height:auto}
.hero-lead{margin:26px auto 26px;color:var(--muted);max-width:44em;font-size:1.02rem}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  max-width:900px;margin:0 auto;list-style:none;padding:0;
}
.stat{padding:16px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:2px}
.stat-k{font-size:.74rem;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.stat-v{font-family:var(--serif);font-weight:800;font-size:1.45rem;letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.stat-v i{font-style:normal;color:var(--faint);margin:0 3px}
.stat-v b{color:var(--accent);font-size:1.7rem;margin:0 2px}
.stat-s{font-size:.78rem;color:var(--faint)}
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat-v{font-size:1.25rem}
}

/* 進行状況 */
.now{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:16px auto 0;padding:10px 18px;border-radius:999px;font-size:.92rem;
}
.now[hidden]{display:none}
.now-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.now-phase{font-weight:700}
.now-sub{color:var(--muted)}

/* 地図 */
.map-card{overflow:hidden}
.map{height:clamp(360px, 62vh, 620px);width:100%;background:#111;border-radius:var(--radius) var(--radius) 0 0}
:root[data-theme="light"] .map{background:#e9e9ee}
.map-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-top:1px solid var(--line);
}
.loc-status{flex:1 1 220px;font-size:.88rem;color:var(--muted);min-width:0}
.loc-status b{color:var(--fg)}
.loc-status .in{color:var(--fg);font-weight:700}
.loc-status .out{color:var(--accent);font-weight:700}
.btn{
  appearance:none;cursor:pointer;text-decoration:none;font:inherit;font-weight:700;font-size:.9rem;
  padding:9px 16px;border-radius:999px;border:1px solid transparent;
  background:var(--accent);color:#fff;white-space:nowrap;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--glass-strong);color:var(--fg);border-color:var(--glass-border)}
.btn.ghost:hover{filter:none;background:var(--glass-border)}
.btn.active{background:var(--fg);color:var(--bg)}
/* OSM タイル：ダークモードでは反転して暗い地図にする */
.osm-tiles{filter:invert(1) hue-rotate(180deg) brightness(.78) contrast(1.02) saturate(.42)}
:root[data-theme="light"] .osm-tiles{filter:saturate(.75) contrast(.98)}
/* Leaflet の見た目をガラスに寄せる */
.leaflet-container{font-family:var(--sans)}
.leaflet-bar{border:1px solid var(--glass-border) !important;box-shadow:var(--shadow) !important;border-radius:12px !important;overflow:hidden}
.leaflet-bar a{
  background:color-mix(in srgb, var(--bg) 78%, transparent) !important;color:var(--fg) !important;
  border-bottom:1px solid var(--line) !important;width:34px !important;height:34px !important;line-height:34px !important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.leaflet-bar a:last-child{border-bottom:0 !important}
.leaflet-bar a.leaflet-disabled{opacity:.4}
.leaflet-control-attribution{
  background:color-mix(in srgb, var(--bg) 72%, transparent) !important;color:var(--faint) !important;
  font-size:10px !important;padding:2px 6px !important;
}
.leaflet-control-attribution a{color:var(--muted) !important}
.leaflet-tooltip.area-label{
  background:color-mix(in srgb, var(--bg) 80%, transparent);color:var(--fg);border:1px solid var(--glass-border);
  border-radius:10px;padding:4px 10px;font-weight:700;font-size:.8rem;letter-spacing:.06em;box-shadow:none;
}
.leaflet-tooltip.area-label::before{display:none}

/* チーム */
.teams{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.teams{grid-template-columns:1fr}}
.team{padding:22px 22px 20px}
.team-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.team-head h3{margin:0;font-size:1.25rem}
.team-mark{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none;
  font-family:var(--serif);font-weight:800;font-size:24px;line-height:1;
  background:#000;color:#fff;border:1px solid rgba(255,255,255,.14);
}
.team.oni .team-mark{color:var(--accent)}
.team.oni{border-color:color-mix(in srgb, var(--accent) 40%, var(--glass-border))}
.team-goal{margin:0;font-size:1.05rem}
.team-goal b{color:var(--accent)}
.team.runner .team-goal b{color:var(--fg);border-bottom:2px solid var(--accent)}
.team-note{margin:14px 0 0;font-size:.88rem;color:var(--muted)}
.list{margin:0;padding-left:1.25em}
.list li{margin:4px 0}
.list li::marker{color:var(--accent)}
.ok{font-weight:700;border-bottom:2px solid var(--accent)}
.ng{font-weight:700;color:var(--accent)}

/* タイムライン */
.timeline{padding:24px 22px 18px}
.tl-bar{position:relative;display:flex;height:48px;border-radius:12px;overflow:hidden;border:1px solid var(--glass-border)}
.tl-seg{
  flex:0 0 var(--w);display:grid;place-items:center;font-size:.85rem;font-weight:700;letter-spacing:.1em;
  background:var(--accent-soft);border-right:1px solid var(--line);
}
.tl-seg:last-of-type{border-right:0}
.tl-seg.truce{
  color:var(--muted);
  background:repeating-linear-gradient(135deg, transparent 0 7px, var(--stripe) 7px 14px);
}
.tl-now{position:absolute;top:0;bottom:0;left:var(--x,0%);width:0;pointer-events:none}
.tl-now[hidden]{display:none}
.tl-now i{position:absolute;top:-2px;bottom:-2px;left:-1.5px;width:3px;background:var(--accent);border-radius:2px;box-shadow:0 0 0 3px var(--accent-soft)}
.tl-ticks{position:relative;height:22px;margin-top:6px;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-ticks span{position:absolute;left:var(--x);transform:translateX(-50%);white-space:nowrap}
.tl-ticks span:first-child{transform:none}
.tl-ticks span:last-child{transform:translateX(-100%)}
/* 休戦の前後のラベルは目盛りの外側に寄せて、重ならないようにする */
.tl-ticks span:nth-child(2){transform:translateX(calc(-100% - 4px))}
.tl-ticks span:nth-child(3){transform:translateX(4px)}
.tl-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px;margin:18px 0 0}
.tl-list > div{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
.tl-list dt{font-family:var(--serif);font-weight:800;font-size:1.15rem;min-width:3.4em;font-variant-numeric:tabular-nums}
.tl-list dd{margin:0;color:var(--muted);font-size:.93rem}
@media (max-width:640px){.tl-list{grid-template-columns:1fr}}

/* ミッションとチーム */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.card{padding:20px 22px}
.card small{display:block;color:var(--faint);font-size:.8rem}
.flow{margin-top:14px;padding:18px 22px 20px;overflow:hidden}
.flow-title{font-size:.85rem;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
.flow-track{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.flow-step{
  flex:0 0 auto;min-width:132px;padding:10px 14px;border-radius:14px;
  border:1px solid var(--glass-border);background:var(--glass-strong);
  display:flex;flex-direction:column;gap:2px;position:relative;
}
.flow-step + .flow-step::before{
  content:"›";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  color:var(--faint);font-size:1.1rem;line-height:1;
}
.flow-step.lock{border-color:color-mix(in srgb, var(--accent) 45%, var(--glass-border));background:var(--accent-soft)}
.flow-step.more{opacity:.7;border-style:dashed}
.fs-k{font-size:.78rem;color:var(--muted);white-space:nowrap}
.fs-v{font-weight:700;font-size:.95rem;white-space:nowrap}
.fs-v.ok{border-bottom:0}
.fs-v.ok::before{content:"○ ";color:var(--fg)}
.fs-v.ng::before{content:"✕ "}
.fs-v small{display:block;font-weight:500;font-size:.72rem;color:var(--faint)}

/* 変更点 */
.changes{padding:6px 10px;overflow-x:auto}
.changes table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:420px}
.changes th,.changes td{padding:12px 12px;text-align:left;border-top:1px solid var(--line)}
.changes thead th{border-top:0;font-size:.78rem;letter-spacing:.14em;color:var(--muted);font-weight:700}
.changes thead th:last-child{color:var(--accent)}
.changes tbody th{font-weight:700;white-space:nowrap;width:22%}
.changes td{color:var(--muted)}
.changes td b{color:var(--fg)}
.changes td:last-child{border-left:1px solid var(--line)}

/* これまで */
.history{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.history{grid-template-columns:1fr}}
.hist{margin:0;padding:10px 10px 12px}
.hist-img{background:#000;border-radius:14px;overflow:hidden;aspect-ratio:1226/658;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1)}
.hist-img img{width:100%;height:100%;object-fit:contain}
.hist figcaption{padding:10px 6px 0;font-weight:700;font-size:.95rem;white-space:nowrap}
.hist figcaption small{display:block;font-weight:500;color:var(--faint);font-size:.7rem;letter-spacing:.14em;white-space:normal;margin-top:2px}

/* フッター */
.footer{text-align:center;padding:30px 16px 48px;border-top:1px solid var(--line);color:var(--faint);font-size:.85rem}
.footer p{margin:2px 0}
.foot-brand{font-weight:700;letter-spacing:.06em;color:var(--muted)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}