/* =========================================================
   トラック合体バトル / 対戦モード スタイル
   テーマ: オレンジ暖色を洗練 × やわらかフロート × まるっとポップ
   色は theme.css の CSS変数を使用（ハードコードは最小限）
   body は transparent 維持（#parallax-bg を見せる）、#app は z-index:1
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  background: transparent; /* パララックス背景を見せるため透過維持 */
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

body::before {
  display: none;
}

#app {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-2) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  /* ★画面が高いとき（全画面表示など）に中身が上へ寄らないよう、
     最低でもビューポート高を確保する。フッターは margin-top:auto で下に付く。 */
  min-height: 100vh;
  min-height: 100dvh;
}

.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 余った縦スペースを .screen が受け取り、中身を縦中央に置く */
  justify-content: center;
  flex: 1 0 auto;
  gap: var(--space-3);
  width: 100%;
}

.hidden {
  display: none !important;
}

/* ---------- 見出し / テキスト ---------- */
.game-title {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 1.9rem;
  font-weight: var(--fw-black);
  text-align: center;
  color: var(--text);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

.game-tagline {
  margin: 0 auto var(--space-2);
  max-width: 460px;
  padding: var(--space-2) var(--space-3);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--text);
  text-align: center;
  line-height: 1.7;
  background: rgba(255, 250, 244, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.title-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 340px;
}

/* ---------- ボタン ---------- */
.btn {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
  touch-action: manipulation;
  text-decoration: none;
}

.btn--big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding-block: 14px;
  font-size: 1.08rem;
}

.btn-icon {
  display: inline-flex;
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--r-pill);
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  box-shadow: var(--shadow-sm);
}

.btn.primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: var(--text-on-primary);
  border: 1px solid transparent;
  text-shadow: 0 1px 2px rgba(120, 60, 20, 0.25);
  box-shadow: var(--shadow);
}

.btn.secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-press);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--shadow);
}

/* ---------- 難易度セレクター ---------- */
.difficulty-selector {
  width: 100%;
  max-width: 380px;
  text-align: center;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.difficulty-label {
  margin: 0 0 var(--space-2);
  font-size: 0.92rem;
  font-weight: var(--fw-bold);
  color: var(--text);
}

.difficulty-options {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.difficulty-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--r);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  /* 「むずかしい」が2行に折り返してボタンだけ縦に伸びるのを防ぐ */
  white-space: nowrap;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t),
    background var(--t);
}

.difficulty-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.difficulty-btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-press);
}

.difficulty-btn.selected {
  border-color: transparent;
  background: linear-gradient(180deg, var(--secondary), var(--primary));
  color: var(--text-on-primary);
  box-shadow: var(--shadow), var(--ring);
}

.difficulty-icon {
  font-size: 1.45rem;
  line-height: 1;
}

/* ---------- バトルエリア ---------- */
.battle-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

/* バトルレーンの枠（canvas 自体の背景は JS 描画なので触らない） */
.battle-lane-wrapper {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

#battle-canvas {
  display: block;
}

.fields-row {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  align-items: flex-start;
}

.player-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

/* =========================================================
   PC：タイトル画面を2カラムに（左＝ロゴ＋キャラ／右＝操作パネル）
   ★元の1カラムに戻したいときは、このブロックを丸ごと削除するだけでよい。
     HTMLの .title-visual / .title-panel は下の display:contents によって
     レイアウト上いないことになるので、残しておいても影響しない。
   ========================================================= */

/* 既定（スマホ含む）：ラッパーを無かったことにして従来の縦積みを保つ */
.title-visual,
.title-panel {
  display: contents;
}

.title-characters {
  display: none; /* 狭い画面では場所を取るので出さない */
}

@media (min-width: 900px) {
  /* .hidden は display:none !important なので、画面切替は従来どおり効く */
  #battle-title-screen {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    /* ★stretch にして左右の列を同じ高さにする。
       左は「ロゴ上端〜キャラ下端」が右パネルと同じ高さになる。 */
    align-items: stretch;
    /* ★align-content も必須。これが無いと、.screen が画面いっぱいに
       伸びた高さまで行が広がり、右パネルの下に大きな余白ができる
       （＝カードだけ間延びして見える）。中身の高さで行を作り、
       その行を縦中央に置く。 */
    align-content: center;
    justify-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
  }

  .title-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    height: 100%;
  }

  .title-characters {
    display: block;
    /* ロゴの下に残った高さをすべて受け取る */
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    /* 比率を保ったまま枠に収め、下端を枠の底に合わせる
       （＝キャラの足元が右パネルの下端と揃う） */
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 10px 18px rgba(90, 45, 10, 0.32));
  }

  /* 右側は1枚のカードにまとめる */
  .title-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-3);
    border-radius: var(--r-xl);
    background: rgba(255, 250, 244, 0.9);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }

  .title-panel .game-tagline {
    margin: 0;
  }
}

/* ---------- プレイヤーラベル ---------- */
.player-label {
  font-size: 0.9rem;
  font-weight: var(--fw-black);
  padding: 5px 16px;
  border-radius: var(--r-pill);
  color: var(--text-on-primary);
  border: 1px solid transparent;
  text-shadow: 0 1px 2px rgba(90, 50, 25, 0.3);
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-sm);
}

.player-label--p1 {
  background: var(--p1);
}

.player-label--p2 {
  background: var(--p2);
}

/* ---------- プレイヤー HUD ---------- */
.player-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}

.hud-item .label {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.hud-item .value {
  font-size: 0.98rem;
  font-weight: var(--fw-bold);
  color: var(--text);
}

/* ---------- 合体 → レーンへ光が飛ぶ演出のオーバーレイ ----------
   盤面キャンバスとレーンキャンバスをまたいで描くので、画面全体に敷く。
   z-index はポーズ(100)・セレブレーション(120)より後ろ、ゲーム画面より前。 */
#merge-flight-canvas {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* クリックは下に素通しする */
}

/* ---------- てっきょアイテム（ストックを構えるボタン） ---------- */
.item-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), opacity var(--t);
}

/* ストックが無いときは押せない。アイコンも沈めて分かるようにする */
.item-button:disabled {
  cursor: default;
  opacity: 0.32;
}

.item-button.is-ready {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* 構えている状態。もう一度押すと元のオブジェクトに戻せる */
.item-button.is-armed {
  background: var(--primary);
  border-color: var(--primary-strong);
  box-shadow: var(--ring), var(--shadow);
}

.item-button.is-ready:hover {
  box-shadow: var(--shadow);
}

.item-button:not(:disabled):active {
  transform: scale(0.93);
}

.item-button canvas {
  display: block;
}

/* 残数バッジ */
.item-stock {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--primary-strong);
  color: var(--text-on-primary);
  font-size: 0.66rem;
  font-weight: var(--fw-black);
  line-height: 16px;
  text-align: center;
}

/* ---------- フィールド枠（canvas 自体の背景は JS 描画なので触らない） ---------- */
.field-wrapper {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.field-wrapper canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- オーバーレイ（ポーズ） ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(90, 60, 35, 0.5);
  backdrop-filter: blur(2px);
  z-index: 100;
}

.overlay-content {
  background: var(--surface);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  min-width: 260px;
}

.overlay-content h2 {
  color: var(--text);
  font-weight: var(--fw-black);
  margin: 0 0 var(--space-1);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

.overlay-content .btn {
  width: 100%;
}

/* ---------- リザルト ---------- */
.result-winner {
  font-size: 1.6rem;
  font-weight: var(--fw-black);
  margin: var(--space-1) 0;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.winner-p1 {
  color: var(--p1);
}

.winner-p2 {
  color: var(--p2);
}

.result-stats {
  width: 100%;
  max-width: 380px;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.result-stats p {
  margin: var(--space-1) 0;
  font-size: 1rem;
  color: var(--text);
}

#battle-result-screen .game-title {
  color: var(--text);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

/* ---------- サブリンク（ソロ/図鑑への移動。ボタン化して横並び） ---------- */
.sub-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-1);
  width: 100%;
  max-width: 340px;
}

.sub-link {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.92rem;
  padding: 11px 14px;
  white-space: nowrap;
}

/* ---------- レスポンシブ ---------- */
/* =========================================================
   PC：ウィンドウサイズに追従させる
   ★このブロックは .field-wrapper canvas の基本ルール（height:auto）より
     必ず後ろに置くこと。同じ詳細度なので、前に置くと上書きされて効かない。
   ★盤面の大きさは --field-h だけで決まる。ここを変えればレーン幅も
     自動で追随する（下の calc が参照しているため）。
   ========================================================= */
@media (min-width: 781px) {
  :root {
    /* 縦にも横にも収まる値を選ぶ。
       49vw は「盤面2枚＋すき間」が画面幅を超えないための上限
       （盤面は 360:403 なので 横 44vw ≒ 縦 49vw）。 */
    --field-h: min(50vh, 49vw, 640px);
  }

  #app {
    max-width: min(1180px, 94vw);
  }

  .field-wrapper canvas {
    width: auto;
    height: var(--field-h);
  }

  /* レーンの幅＝盤面2枚＋すき間。1.786 は (360/403)×2 */
  #battle-canvas {
    width: min(94vw, calc(1.786 * var(--field-h) + 24px));
  }
}

@media (max-width: 780px) {
  #battle-canvas {
    width: 94vw;
  }

  /* ---------- スマホ：1Pを大きく、2P(CPU)は約半分に ----------
     2P は見るだけなので小さくてよい。自分の盤面を広げて狙いやすくする。
     ★幅は vw ではなく flex 比で決めること。vw だと #app の余白や
       gap を考慮できず、合計が画面幅を超えてはみ出す。 */
  .fields-row {
    gap: var(--space-2);
    width: 100%;
  }

  .player-column {
    /* これが無いと canvas の実寸(360px)に押し広げられて比率が効かない */
    min-width: 0;
  }

  .player-column--p1 {
    flex: 62 1 0;
  }

  .player-column--p2 {
    flex: 34 1 0;
  }

  .field-wrapper {
    width: 100%;
  }

  .field-wrapper canvas {
    width: 100%;
  }

  /* ★「1P あなた」と「2P CPU」のラベルは 1P/2P で同じ見た目にすること。
     ここでフォントや padding を変えると、角丸のカーブと高さがズレて
     並びの違和感が大きくなる（実機で指摘あり）。縮めるのは下のHUDだけ。 */

  /* 2P の HUD は詰める。ここを縮めないと HUD が列幅の下限になり、
     盤面だけ小さくしても列が細くならない。 */
  .player-column--p2 .player-hud {
    padding: 2px var(--space-1);
  }

  .player-column--p2 .hud-item {
    min-width: 0;
  }

  .player-column--p2 .hud-item .label {
    font-size: 0.55rem;
  }

  .player-column--p2 .hud-item .value {
    font-size: 0.78rem;
  }

  .player-column--p2 #next-preview-p2 {
    width: 26px;
    height: 26px;
  }
}