/* screens/kabu-board.css — KABUTO EXCHANGE 株価ボード */
.sp-stage--kabu-board .sp-stage__canvas {
  background: #0a0d13;
  color: #d8dae0;
  font-family: "SF Mono", "Menlo", "Consolas", "Roboto Mono", monospace;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.kb-wrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}

/* ── ヘッダー ── */
.kb-head {
  flex: 0 0 auto;
  padding: 14px 24px;
  background: linear-gradient(180deg, #101418 0%, #0a0d13 100%);
  border-bottom: 2px solid #ff4444;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  letter-spacing: .05em;
}
.kb-head__left, .kb-head__right {
  display: flex; align-items: center; gap: 14px;
  color: #8b8d93;
}
.kb-head__right { justify-content: flex-end; }
.kb-head__ex { color: #ff4444; font-weight: 700; letter-spacing: .12em; }
.kb-head__mode {
  background: rgba(255,68,68,.15); color: #ffb1b1;
  padding: 2px 8px; border-radius: 2px;
  font-size: 10px; letter-spacing: .18em;
}
.kb-head__status {
  color: #4ade80;
  display: inline-flex; align-items: center; gap: 6px;
}
.kb-head__status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, .8);
  animation: kb-pulse 1.6s ease-in-out infinite;
}
@keyframes kb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.kb-head__center {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.kb-head__index-name {
  font-size: 11px; color: #8b8d93; letter-spacing: .15em;
}
.kb-head__index-val {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #f2f2f4;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kb-head__index-chg {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.kb-head__index-chg.up { color: #4ade80; }
.kb-head__index-chg.down { color: #ff6b6b; }
.kb-head__time { color: #d8dae0; font-variant-numeric: tabular-nums; }

/* ── カラム見出し ── */
.kb-cols {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1fr 0.8fr;
  padding: 8px 24px;
  font-size: 11px;
  color: #6a6c72;
  letter-spacing: .1em;
  border-bottom: 1px solid #1a1c20;
  background: #101418;
}
.kb-cols .ta-right, .kb-row .ta-right { text-align: right; }

/* ── 行 ── */
.kb-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}
.kb-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1fr 0.8fr;
  align-items: center;
  padding: 10px 24px;
  border-bottom: 1px solid #14171c;
  font-size: clamp(13px, 1.4vw, 17px);
  transition: background-color .18s ease;
}
.kb-row__name { color: #e6e8ec; font-weight: 600; letter-spacing: .04em; }
.kb-row__price, .kb-row__chg, .kb-row__vol, .kb-row__status {
  font-variant-numeric: tabular-nums;
}
.kb-row__chg.up   { color: #4ade80; }
.kb-row__chg.down { color: #ff6b6b; }
.kb-row__vol { color: #8b8d93; }
.kb-row__status { color: #6a6c72; font-size: 0.85em; letter-spacing: .06em; }

/* フラッシュ */
.kb-row.kb-flash-up   { background: rgba(74, 222, 128, .08); }
.kb-row.kb-flash-down { background: rgba(255, 107, 107, .08); }
.kb-row.kb-flash-stop_h {
  background: rgba(255, 178, 71, .18);
  animation: kb-stopflash-h .5s ease-in-out;
}
.kb-row.kb-flash-stop_h .kb-row__status { color: #ffb247; font-weight: 700; }
.kb-row.kb-flash-stop_l {
  background: rgba(140, 100, 255, .18);
  animation: kb-stopflash-l .5s ease-in-out;
}
.kb-row.kb-flash-stop_l .kb-row__status { color: #b28cff; font-weight: 700; }
@keyframes kb-stopflash-h {
  0% { background: rgba(255, 178, 71, .5); }
  100% { background: rgba(255, 178, 71, .18); }
}
@keyframes kb-stopflash-l {
  0% { background: rgba(140, 100, 255, .5); }
  100% { background: rgba(140, 100, 255, .18); }
}

@media (max-width: 800px) {
  .kb-head { grid-template-columns: 1fr; gap: 8px; text-align: center; padding: 10px 16px; }
  .kb-head__left, .kb-head__right { justify-content: center; }
  .kb-cols, .kb-row { padding-left: 12px; padding-right: 12px; font-size: 12px; }
}