/* Battle欄のミニゲーム（UNDERTALE風）。
   黒い枠の中で赤いハートを動かし、流れてくる白い骨を避ける。
   動きは js/battle-game.js が担当し、ここでは見た目だけを指定する */

/* ミニゲーム。Battle欄（.profile-card）の下に、囲みを付けずに並べる。

   幅を .profile-card と同じ計算式にしているのは、左右の位置を揃えるため。
   パネル(.sidebar_2ndnav)は left:3.4em ずれて配置されるのに幅はサイドバーと同じで、
   右端の 3.4em 分はサイドバーの overflow-x:hidden で切り取られる。
   詳しい理由は css/profile-card.css の .profile-card を参照 */
.battle-game {
  /* ゲーム画面の幅。高さは .battle-game__box の縦横比から決まる（4:3） */
  --battle-width: 320px;
  width: calc(100% - 3.4em - 6px);
  max-width: 100%;
  /* 上の 8px は Battle欄の枠との間隔。
     Battle欄は下側に16pxの内側余白を持っており、24px空けると
     見た目の隙間が合わせて40px以上になって離れて見えた。

     左右の 4px は nes-container（Battle欄）の margin と同じ値。
     揃えないと、左右が4pxずつずれて並ぶ */
  margin: 8px 4px 0;
}

/* 戦闘枠。黒い背景を白い枠で囲んだ、元の画像と同じ作り。

   position: relative は、中のハートと骨を枠の中の座標で置くため。
   overflow: hidden で、枠の外へ出た骨を隠す。
   cursor: none は、マウスカーソルの代わりにハートを見せるための指定である。
   touch-action: none は、指でなぞったときに画面が一緒に動かないようにする */
.battle-game__box {
  position: relative;
  /* 横長の 4:3 にする。元の画像（UNDER1.png）の戦闘枠も
     371x314（約1.18:1）の横長である。

     幅に上限を設けているのは、Profileパネルの残りの高さに収めるため。
     上限を外して枠の幅いっぱい（PCで429px）にすると、
     縦横比のぶん縦に伸びてパネルからはみ出す */
  width: min(100%, var(--battle-width));
  aspect-ratio: 4 / 3;
  /* 幅を絞ったぶん、Battle欄の中央に合わせる */
  margin: 0 auto;
  border: 4px solid #fff;
  background: #000;
  overflow: hidden;
  cursor: none;
  touch-action: none;
}

/* ハート（プレイヤー）。
   マウスの位置に合わせて js が left / top を書き換える。
   画像ではなく図形で描いているのは、外部ファイルを増やさないため。
   shape-rendering: crispEdges によりドットの輪郭がぼけない */
.battle-game__soul {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 14px;
  margin: -7px 0 0 -8px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Cg fill='%23ff0000'%3E%3Crect x='1' y='0' width='2' height='1'/%3E%3Crect x='5' y='0' width='2' height='1'/%3E%3Crect x='0' y='1' width='8' height='3'/%3E%3Crect x='1' y='4' width='6' height='1'/%3E%3Crect x='2' y='5' width='4' height='1'/%3E%3Crect x='3' y='6' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* 攻撃を受けた直後の無敵時間。点滅で分かるようにする */
.battle-game__soul.is-hurt {
  animation: battle-game-blink 0.12s steps(1) infinite;
}

@keyframes battle-game-blink {
  50% {
    opacity: 0.2;
  }
}

/* 骨（障害物）。右から左へ流れる。位置と高さは js が指定する */
.battle-game__bone {
  position: absolute;
  width: 8px;
  background: #fff;
  pointer-events: none;
}

/* 枠の中央に出す案内とゲームオーバーの表示 */
.battle-game__message {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 8px;
  color: #fff;
  font-family: "Press Start 2P", cursive;
  font-size: 8px;
  line-height: 1.8;
  text-align: center;
  pointer-events: none;
}

.battle-game__message.is-hidden {
  display: none;
}

/* LVとHPの表示。元の画像と同じ並びにしている */
.battle-game__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 0;
  color: #fff;
  font-family: "Press Start 2P", cursive;
  font-size: 10px;
  line-height: 1;
}

/* style2.css の `.sidebar_nav .sidebar_2ndnav span` が margin-left: 0.5em を付けており、
   そのままだと項目の間隔が二重（gap 8px ＋ margin 8px）になり、
   帯の中の黄色も左端から8pxずれる。間隔は gap だけで決める。
   打ち消すには元の指定と同じクラス2つ＋要素の組み合わせが要る */
.sidebar_2ndnav .battle-game span {
  margin: 0;
}

/* HPの帯。
   左端から残っている分だけが黄、そこから右の失った分が赤になる。
   HPが0になると黄の部分がなくなり、帯全体が赤になる。
   黄の幅は js/battle-game.js が指定する */
.battle-game__hp-bar {
  flex: 0 0 auto;
  width: 60px;
  height: 14px;
  background: #ff0000;
}

.battle-game__hp-fill {
  display: block;
  width: 5%;
  height: 100%;
  background: #ffdd00;
}

/* HPの表示のすぐ下に置くコマンドの並び。

   幅はゲーム画面（--battle-size）に合わせず、Battle欄と同じ幅いっぱいに広げる。
   黒い画面より左右へはみ出して並ぶ形になる */
.battle-game__menu {
  /* 4つを必ず同じ幅にする。
     flexで割り付けると、絵文字の幅が「⚔」12px・他22pxと違うため
     枠の幅が最大9pxずれる（実測 75/84/84/83） */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 間隔は UNDER2.png の比率に合わせている。
     元画像を実測すると枠が168px・間隔が約68pxで、枠の幅のおよそ4割。
     割合で指定しているため、パネルの幅が変わっても見た目の比率が保たれる。

     元画像どおりの比率は間隔8%にあたるが、それだと枠の中身が77pxしか使えず、
     絵文字と4文字（80px）が収まらないため6%に抑えている */
  gap: 6%;
  width: 100%;
  margin: 8px 0 0;
}

/* コマンド1つ分。黒地にだいだい色の枠と文字。

   文字は「JF Dot Shinonome Gothic 14」で、14ドットで設計されているため
   必ず14pxで使う（css/fonts.css の注意書きを参照）。
   日本語だけの版を先に指定し、範囲外の文字は Press Start 2P へ流す。

   flex: 1 1 0 で4つを均等に割り付ける。
   1つあたり文字4文字＝56pxと枠線4pxで計60px必要になるが、
   並び全体がBattle欄の幅いっぱい（PCで429px）に広がるため十分に収まる */
.battle-game__cmd {
  /* 均等な列幅を保つため、中身の幅に押し広げられないようにする */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 0;
  border: 2px solid #ff8000;
  background: #000;
  color: #ff8000;
  font-family: "JF Dot Shinonome Gothic 14 JP", "Press Start 2P", cursive;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* コマンドの頭に付ける絵文字。
   文字と同じ大きさに揃え、幅が足りないときも縮まないようにする */
.battle-game__icon {
  flex: 0 0 auto;
  line-height: 1;
}

/* 文字サイズは style2.css の `.sidebar_nav .sidebar_2ndnav span` が16pxを指定しており、
   打ち消すにはクラス3つの組み合わせが要る（profile-card.css と同じ書き方）。
   14ドットのフォントのため、必ず14pxで使う。
   16pxのままだとドットの割り切れず輪郭がにじむ */
.sidebar_nav .sidebar_2ndnav .battle-game__cmd {
  font-size: 14px;
}

/* LVとHPの表示も同じ理由で16pxにされてしまうため、
   親（.battle-game__status）に指定した大きさを継がせる */
.sidebar_nav .sidebar_2ndnav .battle-game__status span {
  font-size: inherit;
}

/* 狭い画面では文字を小さくして収める。
   枠の大きさは正方形を保つため変えない */
@media screen and (max-width: 768px) {
  .battle-game__box {
    /* 指で操作するため、カーソルを消す必要がない */
    cursor: default;
  }

  /* 狭い画面ではパネルの幅がそのまま並びの幅になるため、
     6%のままだと絵文字と4文字が枠に収まらない（要 80px に対し 71px）。
     間隔をさらに詰めて枠の幅を確保する */
  .battle-game__menu {
    gap: 3%;
  }

  .battle-game__status {
    gap: 6px;
    font-size: 8px;
  }

  .battle-game__hp-bar {
    width: 44px;
    height: 12px;
  }
}

/* さらに狭い画面では、絵文字と4文字を横に並べる幅が取れない
   （360px時の枠は約69px、必要な幅は80px）。
   絵文字を消さずに済むよう、絵文字を文字の上へ積む */
@media screen and (max-width: 360px) {
  .battle-game__cmd {
    flex-direction: column;
    gap: 0;
  }
}

/* PC表示（1051px以上）でのゲーム画面の大きさ。

   Profileパネルは position:absolute でサイドバーの高さいっぱいに置かれ、
   はみ出した分はサイドバーの overflow で切り取られる。
   使える高さは「画面の高さ − ヘッダー − 下の帯」で決まるため、
   ウィンドウの高さによって変わる。

   320px固定にすると、画面の高さが1000px未満の環境で
   ミニゲームの下（コマンドの並び）が切れて見えなくなる
   （実測: 高さ900pxのウィンドウで111px不足）。

   画面の高さに追従させ、収まる範囲で最大の大きさにする。
   計算式は実測から導いた。
   下限120pxは、これ以下だと遊べる大きさにならないため。
   それでも入りきらない低いウィンドウでは、パネル内のスクロールで到達できる */
@media screen and (min-width: 1051px) {
  .battle-game {
    --battle-width: clamp(120px, calc(145vh - 1092px), 320px);
  }
}