/* 論理サイズ 1080×1920。--scale は app.js がウィンドウに合わせて入れる */
:root { --scale: 1; }

html, body {
  touch-action: manipulation; /* スマホでダブルタップの拡大をしない */
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
}

/* ステージ（1080px 幅）がレイアウト上はみ出すと、スマホのブラウザはページの幅を広げてしまうので、
   画面に固定した入れ物で切り取る */
#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1080px;
  height: 1920px;
  transform: translate(-50%, -50%) scale(var(--scale));
  overflow: hidden;
  background: #000;
}

/* レイヤー1: 背景動画 */
#video-layer, #video-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#video-layer video {
  object-fit: cover;
  opacity: 0;
}

/* 字幕帯: 画面の端から端まで、y 630〜766（あごの下〜盤の上）。半透明なので顔にかかっても透ける
   帯の高さは2行ぶんで固定（1行でも変えない）。文字は上下中央 */
:root { --subtitle-bg-opacity: 0.55; }
#subtitle {
  position: absolute;
  left: 0;
  right: 0;
  top: 630px;
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, var(--subtitle-bg-opacity));
  color: #fff;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  /* 明るい背景（白いシャツ・壁）の上でも読めるように、薄い縁取りと影 */
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  z-index: 15;
  pointer-events: none;
}
#subtitle.show {
  opacity: 1;
}
/* BudouX: 文節の間（<wbr>）でだけ折り返す。1文節が1行に収まらないときだけ途中で折る */
#subtitle-text.budoux {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* レイヤー2: 取った駒の帯（上）＋評価値バー＋盤（下半分。盤は 920px 角） */
#board-frame {
  position: absolute;
  left: 34px;   /* 枠の幅 1012px を左右中央に */
  top: 814px;   /* 枠は y 814〜1766、盤は y 830〜1750 */
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(24, 16, 36, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  z-index: 10;
}
#board {
  width: 920px;
  height: 920px;
}
/* マス目（と盤の縁）だけ半透明にして背景の動画を透かす。駒・升の印は別の層なので不透明のまま */
:root { --board-opacity: 0.7; }
#board .board {
  opacity: var(--board-opacity);
}

/* 評価値バー: 白（人間）が下。白が良いほど白い部分が伸びる */
#evalbar {
  position: relative;
  width: 48px;
  height: 920px;
  border-radius: 8px;
  overflow: hidden;
  background: #2b2730;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
#evalbar-white {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: #f4f1ea;
  transition: height 0.6s ease-in-out;
}
/* 真ん中の目印 */
#evalbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(200, 60, 60, 0.7);
}
#evalbar-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  color: #f4f1ea;
  font: 700 19px/1 "Noto Sans Mono", monospace;
  text-align: center;
  letter-spacing: -0.04em;
  z-index: 1;
}
#evalbar-label.white-side {
  top: auto;
  bottom: 8px;
  color: #2b2730;
}

/* 取った駒（lichess 方式）。同じ種類は重ねて詰める */
.captured {
  display: flex;
  align-items: center;
  height: 44px;
  box-sizing: border-box;
}
.captured .group {
  display: flex;
  margin-right: 10px;
}
.captured svg {
  width: 40px;
  height: 40px;
  flex: none;
}
.captured .group svg + svg {
  margin-left: -25px;
}
.captured .advantage {
  margin-left: 4px;
  color: #fff;
  font: 700 32px/1 "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.6);
}
/* 盤の上: エルマー（黒）が取った白の駒。字幕帯（〜766）と盤の枠（814〜）の間（y 768〜812）、盤の左端（x 110）から */
#captured-top {
  position: absolute;
  left: 110px;
  top: 768px;
  max-width: 936px;
  padding: 0 12px;
  border-radius: 24px;
  z-index: 10;
}
#captured-top.has {
  background: rgba(0, 0, 0, 0.45); /* 白い駒が明るい背景（シャツ・壁）に埋もれないように */
}
/* 盤の下: 人間（白）が取った黒の駒。盤の枠の右下のすぐ下（y 1769〜1813）、枠の右端（x 1046）に右揃え */
#captured-bottom {
  position: absolute;
  right: 34px;
  top: 1769px;
  justify-content: flex-end;
  max-width: 1012px;
  z-index: 10;
}
#captured-bottom .inner {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 22px;
}
#captured-bottom.has .inner {
  background: rgba(255, 255, 255, 0.82); /* 黒い駒を暗い帯の上で見えるように */
}
#captured-bottom .group:last-of-type {
  margin-right: 0;
}
#captured-bottom .advantage {
  color: #241a10;
  text-shadow: none;
}

/* ドラッグ中の駒は body 直下に作られるので、ステージの拡縮に合わせる */
.cm-chessboard-draggable-piece {
  transform: scale(var(--scale));
  transform-origin: center;
  z-index: 100;
}

/* レイヤー3: 状態表示の帯（最下部） */
#status-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;   /* y 1824〜1920 */
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  z-index: 20;
}
#status {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 36px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#status-band button {
  flex: none;
  font: 700 34px/1 "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  padding: 18px 30px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
#status-band button:hover {
  background: rgba(255, 255, 255, 0.25);
}
#btn-again {
  background: #e8a33a;
  border-color: #e8a33a;
  color: #241a10;
}
#btn-again:hover {
  background: #f0b555;
}
#status-band button[hidden] {
  display: none;
}

/* 開始画面（Web 版だけ。config.startScreen.enabled） */
#start-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 300px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(10, 6, 18, 0) 0%, rgba(10, 6, 18, 0.35) 40%, rgba(10, 6, 18, 0.85) 75%);
  color: #fff;
  text-align: center;
  z-index: 50;
}
#start-screen[hidden] {
  display: none;
}
#start-screen h1 {
  margin: 0 0 24px;
  font-size: 110px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}
#start-screen .lead {
  margin: 0 0 64px;
  font-size: 46px;
  line-height: 1.5;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
#start-button {
  font: 800 60px/1 "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  padding: 40px 80px;
  border-radius: 999px;
  border: none;
  background: #e8a33a;
  color: #241a10;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
#start-button:disabled {
  background: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
  cursor: default;
}
#start-progress {
  margin: 40px 0 0;
  font-size: 36px;
  color: rgba(255, 255, 255, 0.85);
}
#start-licenses {
  position: absolute;
  right: 32px;
  bottom: 28px;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.75);
}

/* デバッグ表示（キー D）: 左上の小さな板 */
#debug {
  display: none;
  position: absolute;
  left: 16px;
  top: 16px;
  max-width: 640px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(10, 10, 20, 0.72);
  color: #d8f5d0;
  font: 19px/1.5 "Noto Sans Mono", "Noto Sans CJK JP", monospace;
  z-index: 30;
}
#debug.show {
  display: block;
}
#debug b {
  display: inline-block;
  min-width: 3.5em;
  color: #9fd3ff;
  font-weight: 700;
}