/*
 * chat-derby overlay — 「深夜のナイター競馬場」
 * トークン厳守: docs/design_chat_derby.md §7
 *   ナイター芝 #0E3B24 / 夜空 #0A1018 / 電光アンバー #FFB300 /
 *   白線 #E8E4D8 / 赤ランプ #E5484D / 芝ハイライト #1C5C38
 *   + 枠番色8色（sprites.js の WAKU_COLORS と値を一致させること）
 * 装飾禁止: グラデーション・角丸・ドロップシャドウ・スキャンライン加飾は使わない。
 * 例外: LED掲示板の微グローのみ（led.js 側で shadowBlur を控えめに使用）。
 */

@font-face {
  font-family: 'PixelMplus12';
  src: url('fonts/PixelMplus12-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'PixelMplus12';
  src: url('fonts/PixelMplus12-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: 'PixelMplus10';
  src: url('fonts/PixelMplus10-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}

:root {
  --turf: #0E3B24;
  --night: #0A1018;
  --amber: #FFB300;
  --white-line: #E8E4D8;
  --red-lamp: #E5484D;
  --turf-hi: #1C5C38;

  /* 枠番色（JRA実物）。sprites.js の WAKU_COLORS と同値を保つこと。 */
  --waku1: #E8E4D8; /* 白 */
  --waku2: #1A1A1A; /* 黒 */
  --waku3: #C62828; /* 赤 */
  --waku4: #2A5CAA; /* 青 */
  --waku5: #E8C547; /* 黄 */
  --waku6: #3F9142; /* 緑 */
  --waku7: #E07B39; /* 橙 */
  --waku8: #E38AAE; /* 桃 */

  /* M6第2波オーバーレイ拡張で追加(design SS7準拠・追加は1色のみ):
     鋼青。コンディション低下(調子矢印↓)の表示専用。赤・緑は締切/受付ランプの
     文法と衝突するため使わない方針の代替色。 */
  --steel-blue: #6B7A8C;

  --stage-w: 1920px;
  --stage-h: 1080px;
  --band-h: 84px;
  --ticker-h: 104px;
  --right-w: 480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: 'PixelMplus12', 'DotGothic16', 'MS Gothic', monospace;
  /* TODO(overlay-fonts): PixelMplus10/12 は同梱済み(overlay/fonts/)。
     取得できない配布環境向けに 'DotGothic16' → 'MS Gothic' の順でフォールバックする。
     'DotGothic16' はWebフォントのため配布先にインストールが無ければ 'MS Gothic' に自然降版する。 */
}

#stage-outer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  background: var(--night);
  color: var(--white-line);
  overflow: hidden;
  transform-origin: center center;
  image-rendering: pixelated;
}

/* ---------- 上バンド ---------- */
#top-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--band-h);
  background: var(--night);
  border-bottom: 2px solid var(--turf-hi);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 28px;
}
#race-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  white-space: nowrap;
}
/* ボーナスレース告知(反転プレート)。TV中継の隅テロップ文法通りアニメーションなし。 */
#bonus-badge {
  display: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--night);
  background: var(--amber);
  padding: 3px 10px;
  white-space: nowrap;
  margin-left: -8px; /* レース名との間隔を詰める(gap 28pxの補正・race-directionと同様) */
}
#bonus-badge.show { display: inline-block; }

#race-direction {
  font-size: 17px;
  color: var(--white-line);
  opacity: 0.75;
  letter-spacing: 1px;
  white-space: nowrap;
  margin-left: -8px; /* レース名との間隔を詰める(gap 28pxの補正) */
}
/* 天候/馬場テロップ(隅テロップ文法。右回り/左回り表示と同じ並びに置く)。
   雨・雷雨・重馬場の値のときだけ .warn で電光アンバーを付ける(馬券に効く情報の強調)。 */
#weather-surface {
  display: none;
  font-size: 17px;
  color: var(--white-line);
  opacity: 0.75;
  letter-spacing: 1px;
  white-space: nowrap;
  margin-left: -8px;
}
#weather-surface.show { display: inline-block; }
#weather-surface.warn { color: var(--amber); opacity: 1; }
#race-phase-text {
  font-size: 22px;
  color: var(--amber);
  white-space: nowrap;
}
#countdown-label {
  margin-left: auto;
  font-size: 22px;
  white-space: nowrap;
}
#countdown-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--amber);
  min-width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.phase-lamp {
  width: 22px;
  height: 22px;
  border: 2px solid var(--white-line);
  background: #333;
  flex: none;
}
.phase-lamp.on-green { background: #3F9142; }
.phase-lamp.on-red { background: var(--red-lamp); }
.phase-lamp.on-red.blink { animation: lamp-blink 0.6s steps(1) infinite; }
.phase-lamp.on-amber { background: var(--amber); }

@keyframes lamp-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

/* ---------- メイン行 ---------- */
#main-row {
  position: absolute;
  top: var(--band-h);
  left: 0;
  right: 0;
  bottom: var(--ticker-h);
  display: flex;
}

#course-wrap {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  border-right: 2px solid var(--turf-hi);
  overflow: hidden;
}
#course-canvas {
  position: absolute;
  top: 0; left: 0;
  image-rendering: pixelated;
}
/* M5: 3Dレースビュー(WebGL・下層)。course-canvas(2D・上層)と同じ位置に重ねる。
   既定は非表示(display:none)で、raceView3Dが実際に有効化された時だけ
   #course-wrap に .mode-3d が付き表示される(overlay.js側の判定・自動フォールバック含む)。
   course-canvas(2D)と違い、CSS表示サイズを明示的に100%固定する必要がある:
   raceview.jsの性能ガバナ(pixelRatio自動降格・低fps検知)がrenderer.setPixelRatio()
   経由でcanvasのwidth/height属性(=描画バッファ解像度)を縮小することがあり、
   CSSサイズを明示していないと表示box自体も一緒に縮んでしまう
   (overlay3d/demo.htmlの#gl-canvasも同じ理由でwidth/height:100%を指定している)。 */
#course-canvas-3d {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
#course-wrap.mode-3d #course-canvas-3d { display: block; }
/* 3Dモード中はcourse-canvas(2D)を確定板/写真判定パネル専用のHUDオーバーレイに
   格下げする(トラック/馬体の描画自体はスキップしJS側でclearRectのみ行う=透明)。
   ここではCSS側で何もしない(canvasは未描画=透明が既定のため)。 */

#right-col {
  width: var(--right-w);
  height: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--night);
}

#led-wrap {
  flex: none;
  padding: 14px 14px 8px 14px;
  border-bottom: 2px solid var(--turf-hi);
}
#led-canvas {
  width: 100%;
  display: block;
  image-rendering: pixelated;
  background: #060a06;
  border: 2px solid #050505;
}

#entry-wrap {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 6px 10px;
}
#entry-title {
  font-size: 16px;
  color: var(--white-line);
  opacity: 0.8;
  padding: 4px 6px;
  letter-spacing: 2px;
}
#entry-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.entry-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px;
  border-bottom: 1px solid #16241c;
  font-size: 19px;
}
.entry-num {
  width: 34px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--night);
}
/* 脚質ボックス(競馬新聞の1文字囲み文法)。枠番ゼッケンの右・予想印/馬名の左。
   データが無い馬(v1互換snapshot等)は枠線なしの空ボックスにして列位置だけ揃える。 */
.entry-style-box {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--white-line);
  font-family: 'PixelMplus10', 'PixelMplus12', 'DotGothic16', 'MS Gothic', monospace;
  font-size: 13px;
  color: var(--white-line);
}
.entry-style-box.empty { border-color: transparent; }

.entry-mark {
  width: 22px;
  flex: none;
  text-align: center;
  color: var(--amber);
  font-size: 20px;
}
.entry-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.entry-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 馬主表示(M7先行対応。owner_display_nameがある馬のみ馬名の下段に出す) */
.entry-owner {
  font-family: 'PixelMplus10', 'PixelMplus12', 'DotGothic16', 'MS Gothic', monospace;
  font-size: 12px;
  color: var(--white-line);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 公表能力ピップ(速/持/末 各1〜5・■■■□□風) */
.entry-pips {
  display: flex;
  gap: 12px;
  margin-top: 3px;
}
.pip-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pip-label {
  font-family: 'PixelMplus10', 'PixelMplus12', 'DotGothic16', 'MS Gothic', monospace;
  font-size: 12px;
  color: var(--white-line);
  opacity: 0.75;
  margin-right: 2px;
}
.pip {
  width: 7px;
  height: 7px;
  background: rgba(232, 228, 216, 0.18); /* 白線トークンの低透明度=消灯 */
}
.pip.on { background: var(--amber); }

/* 調子矢印(公表値・ノイズあり)。ピップ行の先頭に1文字。
   赤・緑は締切/受付ランプの文法と衝突するため使わない:
   ↑=電光アンバー / →=白線60% / ↓=鋼青(このoverlay唯一の追加トークン)。 */
.entry-condition {
  font-family: 'PixelMplus10', 'PixelMplus12', 'DotGothic16', 'MS Gothic', monospace;
  font-size: 13px;
  font-weight: 700;
  min-width: 12px;
  text-align: center;
  margin-right: 2px;
}
.entry-condition.up { color: var(--amber); }
.entry-condition.flat { color: var(--white-line); opacity: 0.6; }
.entry-condition.down { color: var(--steel-blue); }

/* ---------- 下バンド (ticker) ---------- */
#bottom-band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--ticker-h);
  background: var(--night);
  border-top: 2px solid var(--turf-hi);
  overflow: hidden;
  display: flex;
  align-items: center;
}
#ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}
.ticker-item {
  display: inline-flex;
  flex: none; /* マーキー項目は縮めない(連続スクロールの幅計算を安定させる) */
  align-items: center;
  padding: 0 46px;
  font-size: 24px;
  border-right: 1px solid #16241c;
}
.ticker-item .tag {
  color: var(--night);
  background: var(--white-line);
  font-size: 15px;
  padding: 2px 8px;
  margin-right: 14px;
  font-weight: 700;
}
.ticker-item.kind-bet .tag { background: var(--amber); }
.ticker-item.kind-reject .tag { background: var(--red-lamp); color: var(--white-line); }
.ticker-item.kind-balance .tag { background: var(--waku6); }
.ticker-item.kind-info .tag { background: var(--white-line); }

/* ---------- DEMOバッジ ---------- */
#demo-badge {
  position: absolute;
  right: 10px;
  bottom: calc(var(--ticker-h) + 8px);
  font-size: 14px;
  color: var(--night);
  background: var(--amber);
  padding: 3px 10px;
  letter-spacing: 2px;
  opacity: 0.9;
  display: none;
}
#demo-badge.show { display: block; }

@media (prefers-reduced-motion: reduce) {
  .phase-lamp.on-red.blink { animation: none; opacity: 1; }
  #ticker-track { transition: none !important; }
}