@charset "utf-8";
/* ========================================================================
 * File: assets/css/tokyo-map.css
 * Role: 東京エリアMAP検索画面専用コンポーネント (完全密着テトリスGrid)
 * ======================================================================== */

.tokyo-map-search {
  width: fit-content;
  max-width: 100%;
  margin: 40px auto;
  border-radius: 16px;
  padding: 12px 16px; /* 上下12px、左右16pxでバランス取り */
  
  /* しっかりした極上のシルバー（青みを抜いた完全なグレー）で立体的な金属プレートを表現 */
  background: linear-gradient(135deg, #ffffff 0%, #ebebeb 30%, #d6d6d6 50%, #f5f5f5 60%, #e0e0e0 100%);
  background-size: 200% 200%;
  animation: tokyoMapWave 15s ease infinite; /* ゆっくりと光が反射して走る効果 */
  
  /* 金属的なエッジと圧倒的な立体感を強調する枠・シャドウ群 */
  border: 1px solid #b3b3b3;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.12),           /* 板の下に落ちる深い影 */
    inset 0 2px 0 rgba(255, 255, 255, 0.9),      /* 天面のハイライト（光の反射） */
    inset 0 0 20px rgba(0, 0, 0, 0.05),        /* 面全体に丸みを持たせる影 */
    inset 0 -4px 0 rgba(0, 0, 0, 0.1);         /* 底面の厚みの暗がり */
}

@keyframes tokyoMapWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================
   インナータイトル（マップ内表示）
============================ */
.tokyo-map-inner-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-accent, #c9a84e);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 3px rgba(0,0,0,0.05); /* メタリック盤面での絶妙な浮き上がり */
  /* ここはgrid-area: 4 / 7 / 5 / 14 でHTML側で指定済 */
  z-index: 2;
}



.tokyo-map-wrap {
  overflow-x: auto;
  padding-bottom: 8px; /* 大枠の上paddingと視覚的に高さを合わせるため24px→8pxへ縮小 */
  -webkit-overflow-scrolling: touch;
}

.tokyo-map-grid {
  display: grid;
  /* 19列 × 12行 (山手線全30駅網羅のトポロジーマップ)
     - 左郊外: 4列 (C1-C4)
     - 左余白: 14px (C5) ※今の1/3に変更
     - 山手線: 9列 (C6-C14)
     - 右余白: 14px (C15) ※今の1/3に変更
     - 右郊外: 4列 (C16-C19) */
  grid-template-columns: repeat(4, 44px) 14px repeat(9, 44px) 14px repeat(4, 44px);
  grid-auto-rows: 44px;
  gap: 8px 4px; /* 上下の隙間を広げてソリッドシャドウの空間を確保 */
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: 4px; /* ここも減らして全体の左右余白を1/3に調整 */
}

/* ============================
   路線装飾（背景枠）
============================ */
/* 山手線（緑と白の2色の交互ループ線路） */
.yamanote-loop-bg {
  /* 行: 3〜10(終了11)、列: 6〜14(終了15) に被せる */
  grid-area: 3 / 6 / 11 / 15;
  border: 4px solid #ffffff; /* ベースの白い線 */
  border-radius: 12px;
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -8px; /* 影の分、下側に少し余裕をもたせる */
  z-index: 0;
  pointer-events: none;
  background-color: rgba(132, 192, 66, 0.03); /* 中をほんのり緑に */
}

/* 白線の上に緑の点線を重ねることで、線路のような2色の交互ボーダーを実現 */
.yamanote-loop-bg::after {
  content: "";
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px; /* 親の枠線にぴったり重ねる */
  border: 4px dashed #84c042; /* 山手線カラーの破線 */
  border-radius: 12px;
  pointer-events: none;
}

/* 中央線（オレンジと白の2色の交互ライン線路） - Gridの中央を貫くように設定 */
.chuo-line-bg {
  grid-area: 7 / 1 / 8 / 20;
  position: absolute;
  top: -4px; /* 6行目と7行目の間にラインを引く */
  left: 0;
  right: 0;
  height: 4px;
  /* オレンジと白が交互に続くストライプで線路を表現 */
  background: repeating-linear-gradient(90deg, #f37021, #f37021 12px, #ffffff 12px, #ffffff 24px);
  z-index: 0;
  pointer-events: none;
  border-radius: 3px;
}

/* ============================
   各エリアボタン
============================ */
.t-map-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
  border: 1px solid var(--color-accent, #c9a84e);
  border-radius: 6px;
  padding: 1px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent, #c9a84e);
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
  transition: all 0.35s ease;
  z-index: 1;
  position: relative;
  overflow: hidden;
  /* デフォルトを押し込まれた状態（薄い影）に固定 */
  box-shadow: 0 2px 0 #d9d9d9, 0 3px 6px rgba(0,0,0,0.06);
  transform: translateY(2px);
}

/* ホバーでふわっと色を変えるためのフェードイン用レイヤー（全ボタン共通設定） */
.t-map-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #ffffff 0%, #fceed3 100%); /* 一般ボタン用グラデ */
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}
.t-map-btn:hover::before {
  opacity: 1;
}

/* ボタン内のテキストがレイヤーの裏に隠れないように前面に出す */
.t-map-btn span {
  position: relative;
  z-index: 1;
}

.t-map-btn--lg {
  font-size: 0.8rem; /* 外周の大きなエリアボタン用 */
}

/* ============================
   中央特大ボタン（東京23区）
============================ */
.t-map-btn--center-special {
  background: linear-gradient(180deg, #dfc386 0%, var(--color-accent, #c9a84e) 100%);
  border: 1px solid #bea04a;
  color: #fff !important;
  font-size: 1.05rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  /* 特大ボタン用・デフォルトを押し込まれた状態に */
  box-shadow: 0 2px 0 #a38539, 0 4px 10px rgba(201, 168, 78, 0.4);
  transform: translateY(3px);
  z-index: 2; /* 山手線装飾より上に */
}

/* 特大ボタン用：独自のホバーグラデーション色を上書き定義 */
.t-map-btn--center-special::before {
  background: linear-gradient(180deg, var(--color-accent, #c9a84e) 0%, #c19f42 100%);
}

.t-map-btn--center-special:hover {
  /* 飛び出る動き・分厚い影をなくし、基本位置のまま内側に明るい光沢を追加 */
  transform: translateY(3px);
  box-shadow: 0 2px 0 #a38539, 0 4px 10px rgba(201, 168, 78, 0.4), inset 0 0 15px rgba(255, 240, 180, 0.4);
}

.t-map-btn:hover {
  border-color: var(--color-accent, #c9a84e);
  color: var(--color-accent, #c9a84e);
  /* 飛び出る動きをなくし、基本位置のまま */
  transform: translateY(2px);
  box-shadow: 0 2px 0 #d9d9d9, 0 3px 6px rgba(0,0,0,0.06);
}

/* 登録なし（グレーアウト）状態 */
.t-map-btn.is-disabled {
  background-color: #fbfbfb;
  color: #b0b0b0;
  border-color: #ebebeb;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* ============================
   電車弾けるパーティクル（JS動作用）
============================ */
.t-map-train-particle {
  position: absolute;
  pointer-events: none; /* クリックを邪魔しない */
  font-size: 0.8rem;    /* 現在の半分（コンパクト）なサイズに変更 */
  z-index: 9999;        /* 最前面に出す */
  line-height: 1;
  user-select: none;
}

/* ============================
   モバイル向けスクロール案内
============================ */
.t-map-scroll-hint {
  display: none;
  text-align: right;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 8px;
}

@media (max-width: 1024px) {
  .t-map-scroll-hint {
    display: block;
  }
}

@keyframes pulse-horizontal {
  0% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(-8px); opacity: 1; }
  100% { transform: translateX(0); opacity: 0.7; }
}