/*
 * 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; /* 桃 */

  --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;
}
#race-direction {
  font-size: 17px;
  color: var(--white-line);
  opacity: 0.75;
  letter-spacing: 1px;
  white-space: nowrap;
  margin-left: -8px; /* レース名との間隔を詰める(gap 28pxの補正) */
}
#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;
}

#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);
}
.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;
}

/* 公表能力ピップ(速/持/末 各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); }

/* ---------- 下バンド (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; }
}