/* =========================================================
   map.css — 会場マップ（three.js）
   style.css の色・書体・.hero・.card などをそのまま使う。
   ========================================================= */

body.page-map{ overflow:hidden }

.map-hero{ z-index:20 }
.map-hero .hero-back{ margin-top:28px }

/* 見出しの後ろにマップが来ると字が読めなくなるので、
   左端だけ黒へ落とす。四角い板を敷くとサイトの静けさが壊れるので、
   輪郭の出ないぼかしにする。 */
.map-hero::before{
  content:''; position:fixed; left:0; top:0; bottom:0; width:min(620px,52vw);
  z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.42) 66%, rgba(0,0,0,0) 100%);
}
@media (max-width:820px){
  .map-hero::before{ width:100%; height:46vh; bottom:auto;
    background:linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%) }
}

.mapstage{
  position:fixed; inset:0; z-index:6;
}
.mapstage canvas{ display:block; width:100%; height:100%; touch-action:none }

/* =============== ゾーンの説明カード =============== */
.zonecard{
  position:fixed; right:var(--pad); top:104px; z-index:70;
  width:300px; max-width:calc(100vw - var(--pad) * 2);
  padding:24px 24px 22px; border-radius:var(--rad);
  border:1px solid var(--line);
  background:var(--surface);
  opacity:1; transform:translateX(0);
  transition:opacity .35s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.zonecard.off{ opacity:0; transform:translateX(18px); pointer-events:none }
.zonecard .x{
  position:absolute; right:16px; top:16px; width:28px; height:28px;
  display:grid; place-items:center; border-radius:50%; color:var(--muted);
  transition:color .2s ease, background .2s ease;
}
.zonecard .x:hover{ color:#fff; background:rgba(255,255,255,.08) }
.zonecard .x svg{ width:15px; height:15px }

.zonecard-kick{ margin:0; font:400 12px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--c, var(--ink-2)) }
.zonecard-title{ margin:14px 28px 0 0; font-size:22px; letter-spacing:0; line-height:1.35 }
.zonecard-desc{ margin:14px 0 0; font-size:14px; line-height:1.85; letter-spacing:.04em; color:var(--ink-2) }

.zonecard-gear{ margin-top:16px; display:flex; flex-wrap:wrap; gap:7px }
.zonecard-gear span{
  padding:6px 12px; border-radius:var(--rad-btn); font-size:12.5px; color:var(--ink-2);
  border:1px solid var(--line); background:transparent;
}
.zonecard-staff{ margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px; color:var(--faint) }

/* =============== 下部：順路 =============== */
.route{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; gap:2px; overflow-x:auto;
  padding:14px var(--pad) 16px; -webkit-overflow-scrolling:touch;
  background:linear-gradient(0deg, rgba(0,0,0,.7) 0%, transparent 100%);
}
.route-chip{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:9px 14px 9px 10px; border-radius:var(--rad-btn); white-space:nowrap;
  border:1px solid var(--line); background:rgba(5,7,6,.9);
  color:var(--ink-2); font-size:13px; transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.route-chip b{
  display:grid; place-items:center; width:19px; height:19px; border-radius:50%;
  background:rgba(255,255,255,.08); font:700 10.5px var(--font-num); color:#fff; flex:none;
}
.route-chip:hover{ color:#fff; border-color:rgba(255,255,255,.28) }
.route-chip.on{ border-color:var(--c, var(--acid)); color:#fff; background:rgba(255,255,255,.06) }
.route-chip.on b{ background:var(--c, var(--acid)); color:#04120d }
.route-arrow{ flex:none; color:rgba(255,255,255,.22); font-size:13px }

/* 入口・出口は押せない目印なので、少し控えめに */
.route-door{
  padding:9px 14px; color:var(--faint); border-style:dashed;
  background:transparent; cursor:default;
}
.route-door:hover{ color:var(--faint); border-color:rgba(255,255,255,.1) }

/* 読み込み中は、うっすら暗いままにしておく */
.mapstage{ opacity:0; transition:opacity .8s ease }
.mapstage.is-ready{ opacity:1 }
.mapstage.is-error::after{
  content:'会場マップを読み込めませんでした。通信環境を確かめて、ページを開き直してください。';
  position:absolute; inset:auto 0 40% 0; text-align:center; padding:0 24px;
  color:var(--muted); font-size:13.5px; line-height:1.9;
}
.mapstage.is-error{ opacity:1 }

@media (max-width:820px){
  .zonecard{ left:var(--pad); right:var(--pad); width:auto; top:auto; bottom:96px }
  .map-hero{ width:min(320px,68vw) }
}

@media (prefers-reduced-motion: reduce){
  .zonecard{ transition-duration:.01ms }
}