/* ====== クロゼッタ シンプル版: バトルの見た目(ステージ・レーン・HUD) ======
   対象: docs/specs/DANCE_ARCH.md §3 のバトルの土台DOM
   - 色・文字は tokens.css の変数だけを使う(canvas の中の色も battle.js が変数から読む)
   - グラデーション文字・文字の発光・絵文字は使わない(文字の影は、読みやすくするためのベタの影だけ)
   - 主役は動画。文字と部品は少なく、画面の端へ寄せる */

/* ===== 土台 =====
   :where() は優先度が0。画面担当の screens.css が同じものを決めたら、そちらが必ず勝つ */
:where(html, body) {
  height: 100%; margin: 0; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--font-jp); font-synthesis: none;
  touch-action: manipulation; overscroll-behavior: none;
  -webkit-touch-callout: none; -webkit-text-size-adjust: 100%;
}
:where(#app) {
  position: relative; height: 100%; height: 100dvh;
  max-width: 480px; margin: 0 auto; overflow: hidden;
  background: var(--bg);
}
:where(#app, #app *) { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ===== ステージ(動画): 全画面 ===== */
#stage { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
#stage video, #stage img.poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0;
  transition: filter .3s;
}
/* 絵がまだ決まっていないときは、こわれた絵の印を出さない */
#stage img.poster:not([src]) { visibility: hidden; }
/* コンボ4未満・よろけ・負けのときに動画を暗くする */
#stage .dimmed { filter: brightness(.45) saturate(.6); }
#stage.shake { animation: cdbStageShake .5s ease-out; }
@keyframes cdbStageShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px) rotate(-.6deg); }
  40% { transform: translateX(8px) rotate(.5deg); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

/* ===== レーン(動画に重ねる全画面。画面そのものがタップする場所) ===== */
#laneWrap {
  position: absolute; inset: 0; z-index: 3;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ===== HUD(バトル中だけ出す。タップはレーンへ通す) ===== */
#hud {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  font-family: var(--font-jp); color: var(--text);
}

/* ミスの赤いふち */
#missFlash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 35%, var(--miss) 100%);
}
#missFlash.on { animation: cdbMissFlash .5s ease-out; }
@keyframes cdbMissFlash { 0% { opacity: .5; } 100% { opacity: 0; } }

/* キメを当てた光(決めポーズと同じ瞬間) */
#finishFlash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at 50% 46%, var(--text) 0%, var(--gold) 28%, transparent 72%);
  mix-blend-mode: screen;
}
#finishFlash.on { animation: cdbFinishFlash .6s ease-out; }
#finishFlash.on.cpu { animation-name: cdbFinishFlashCpu; }
@keyframes cdbFinishFlash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes cdbFinishFlashCpu { 0% { opacity: .35; } 100% { opacity: 0; } }

/* 3・2・1 と GO! */
#countdown {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-num); font-size: calc(var(--fs-xl) * 2.8); line-height: 1;
  color: var(--text); opacity: 0; white-space: nowrap;
  text-shadow: 0 4px 0 var(--bg);
}
/* ターンの切り替わりの合図は小さく、レーンの近くに出す(決めポーズを隠さない) */
#countdown.mini { top: 60%; font-size: calc(var(--fs-xl) * 1.6); text-shadow: 0 3px 0 var(--bg); }
#countdown.pop { animation: cdbCountPop .42s ease-out forwards; }
@keyframes cdbCountPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
  30% { opacity: 1; }
  100% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
}

/* ターンの帯 */
#turnBanner {
  position: absolute; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  min-height: 36px; padding: 7px 18px; border-radius: 999px;
  display: flex; align-items: center;
  font-size: var(--fs-m); font-weight: 900; letter-spacing: .08em; white-space: nowrap;
  background: var(--pink); color: var(--text);
}
#turnBanner.cpu { background: var(--cyan); color: var(--bg); }
#turnBanner:empty { display: none; }

/* 点(左=自分 / 右=相手) */
#scores {
  position: absolute; top: calc(58px + var(--safe-t)); left: 0; right: 0;
  display: flex; justify-content: space-between; gap: var(--gap);
  padding: 0 var(--gap);
}
.scoreBox {
  min-width: 116px; padding: 6px 12px 7px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  opacity: .78; transition: opacity .2s, border-color .2s;
}
.scoreBox.active { opacity: 1; }
#p1Box.active { border-color: var(--pink); }
#cpuBox { text-align: right; }
#cpuBox.active { border-color: var(--cyan); }
.scoreBox .name {
  font-family: var(--font-num); font-size: var(--fs-s); letter-spacing: .1em;
  color: var(--text-dim); line-height: 1.2;
}
.scoreBox .val {
  font-family: var(--font-num); font-size: calc(var(--fs-l) * 1.3); line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.scoreBox .tag {
  font-size: var(--fs-s); font-weight: 700; line-height: 1.3; color: var(--gold);
}
.scoreBox .tag:empty { display: none; }

/* 点差の帯(左=自分・右=相手。まんなかの線より右まで桃色が伸びていれば、自分が勝っている) */
#leadBar {
  position: absolute; top: calc(134px + var(--safe-t)); left: var(--gap); right: var(--gap);
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--cyan); border: 1px solid var(--line);
}
#leadFill {
  display: block; height: 100%; width: 50%;
  background: var(--pink);
  transition: width .25s ease-out;
}
#leadBar::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; background: var(--text);
}

/* コンボと判定(レーンの少し上) */
/* 判定とコンボは、判定の線に着く直前のマークに重ならない高さに出す(線は下から14%)。
   コンボは白(キメの帯が金色なので、重なっても読めるように) */
#combo {
  position: absolute; bottom: 39%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-num); font-size: var(--fs-l); letter-spacing: .06em;
  color: var(--text); white-space: nowrap;
  text-shadow: 0 2px 0 var(--bg);
}
#judge {
  position: absolute; bottom: 31%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-num); font-size: var(--fs-xl); letter-spacing: .06em; line-height: 1;
  opacity: 0; white-space: nowrap;
  text-shadow: 0 3px 0 var(--bg);
}
#judge.perfect { color: var(--perfect); }
#judge.good { color: var(--good); }
#judge.miss { color: var(--miss); font-size: calc(var(--fs-xl) * 1.3); }
/* 相手の判定は小さく(主役はダンス) */
#judge.cpu { font-size: var(--fs-l); }
#judge.cpu.miss { font-size: var(--fs-l); }
#judge.pop { animation: cdbJudgePop .45s ease-out; }
#judge.cpu.pop { animation-name: cdbJudgePopCpu; }
@keyframes cdbJudgePop {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}
@keyframes cdbJudgePopCpu {
  0% { opacity: 0; transform: translateX(-50%) scale(.8); }
  25% { opacity: .7; transform: translateX(-50%) scale(1); }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}

/* 一時停止ボタン(縦棒2本の図形。HUDはタップを通すので、ここだけ受ける) */
#pauseBtn {
  position: absolute; top: calc(8px + var(--safe-t)); left: 8px;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  cursor: pointer; pointer-events: auto; z-index: 6;
  -webkit-appearance: none; appearance: none;
}
#pauseBtn::before, #pauseBtn::after {
  content: ''; position: absolute; top: 14px; width: 5px; height: 14px;
  border-radius: 2px; background: currentColor;
}
#pauseBtn::before { left: 13px; }
#pauseBtn::after { right: 13px; }
#pauseBtn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* 幅のせまい画面では、点の箱を少し小さくする */
@media (max-width: 340px) {
  .scoreBox { min-width: 100px; padding: 5px 9px 6px; }
  #turnBanner { font-size: var(--fs-s); padding: 7px 12px; }
}

/* 高さの低い画面(スマホを横にしたとき等)では、判定とコンボを受け皿から離す */
@media (max-height: 520px) {
  #combo { bottom: 44%; }
  #judge { bottom: 33%; }
  #countdown.mini { top: 50%; }
}

/* ===== 動きを減らす設定のときは、揺れ・点滅を止める ===== */
@media (prefers-reduced-motion: reduce) {
  #stage.shake, #missFlash.on, #finishFlash.on { animation: none !important; }
  #judge.pop, #countdown.pop { animation: none !important; opacity: 1; }
  #judge.cpu.pop { opacity: .7; }
  #stage video, #stage img.poster, #leadFill, .scoreBox { transition: none; }
}