/* 全画面のネオン心電図モニターのスタイル。
   レイアウト・グリッド・演出（フラッシュ／ふち発光／バイタルのパルス）を担い、
   波形そのものの色や強さの調整は src/config.js の ecg に置いている。 */

:root {
  --bg: #04070c;
  --ecg: #5cff9d; /* 心電図グリーン（config の color と揃える） */
  --ecg-soft: rgba(92, 255, 157, 0.5);
  --fg: #e6fff1;
  --muted: rgba(230, 255, 241, 0.6);
  --grid-minor: rgba(92, 255, 157, 0.05);
  --grid-major: rgba(92, 255, 157, 0.09);
  --beat: 0.6; /* 直近の拍の強さ(0弱..1強)。JS が拍ごとに更新し、発光の派手さを変える */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background-color: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* スマホでのバウンス/選択を抑え、没入感を優先する */
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
}

/* ECGペーパー風のグリッド＋中央ベースライン＋ビネットを背景に敷く。
   先に並べた層ほど手前に重なる（中央線→ビネット→細目→太目の順）。 */
body {
  background-image:
    /* 中央のベースライン（波の中心線を薄く示す） */
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(92, 255, 157, 0.16) 50%, transparent calc(50% + 1px)),
    /* 四隅を沈めるビネット（奥行き） */
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 100%),
    /* 細目グリッド */
    repeating-linear-gradient(0deg, var(--grid-minor) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, var(--grid-minor) 0 1px, transparent 1px 30px),
    /* 太目グリッド */
    repeating-linear-gradient(0deg, var(--grid-major) 0 1px, transparent 1px 150px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 150px);
}

/* 全画面の心電図キャンバス。背景グリッドの上、演出・UIより下に重なる。
   波形の描画のみを行い、入力は受けない（pointer-events:none） */
#ecg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* 拍のたびに中央がドクンと発光するフラッシュ。加算合成(screen)で下の波形を明るくする */
.flash {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, var(--ecg-soft) 0%, rgba(92, 255, 157, 0) 55%);
  mix-blend-mode: screen;
}

.flash.flash {
  /* .flash クラス再付与でドクンを毎回発火させる（JS がクラスを付け直す） */
  animation: flashPulse 0.5s ease-out;
}

@keyframes flashPulse {
  0% {
    /* 深い拍ほど中央フラッシュを強く灯す（弱拍0.55〜強拍0.95） */
    opacity: calc(0.55 + 0.4 * var(--beat));
    transform: scale(0.96);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

/* 画面ふちの発光。拍のたびに一瞬だけ内側へグリーンが灯る */
.edge {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 150px 22px rgba(92, 255, 157, 0.35);
}

.edge.surge {
  animation: edgeSurge 0.55s ease-out;
}

@keyframes edgeSurge {
  0% {
    /* 深い拍ほど画面ふちの発光を強く灯す（弱拍0.5〜強拍0.95） */
    opacity: calc(0.5 + 0.45 * var(--beat));
  }
  100% {
    opacity: 0;
  }
}

/* 左上のモニターHUD（タイトルとリード表示） */
.hud {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  top: max(20px, env(safe-area-inset-top));
  z-index: 5;
  pointer-events: none;
}

.hud__title {
  font-size: clamp(13px, 3.4vw, 17px);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--ecg);
  text-shadow: 0 0 12px rgba(92, 255, 157, 0.55), 0 0 30px rgba(92, 255, 157, 0.3);
}

.hud__lead {
  margin-top: 6px;
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* 右上のバイタル表示。♥ と BPM が拍のたびにパルスする */
.vitals {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  top: max(20px, env(safe-area-inset-top));
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 8px;
  pointer-events: none;
  color: var(--ecg);
  text-shadow: 0 0 14px rgba(92, 255, 157, 0.5);
}

.vitals__heart {
  font-size: clamp(20px, 6vw, 34px);
  line-height: 1;
  transform-origin: center;
}

.vitals__bpm {
  font-size: clamp(34px, 11vw, 68px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform-origin: center;
}

.vitals__unit {
  font-size: clamp(11px, 3vw, 14px);
  letter-spacing: 0.18em;
  color: var(--muted);
  text-shadow: none;
}

/* ♥ と BPM のパルス（拍ごとに JS が .beat を付け直して発火させる） */
.vitals__heart.beat {
  animation: beatPop 0.5s ease-out;
}

.vitals__bpm.beat {
  animation: beatNudge 0.5s ease-out;
}

@keyframes beatPop {
  0% {
    transform: scale(1);
  }
  22% {
    /* 深い拍ほど♥を大きく弾ませる（弱拍1.28〜強拍1.62） */
    transform: scale(calc(1.28 + 0.34 * var(--beat)));
  }
  100% {
    transform: scale(1);
  }
}

@keyframes beatNudge {
  0% {
    transform: scale(1);
  }
  22% {
    transform: scale(calc(1.08 + 0.1 * var(--beat)));
  }
  100% {
    transform: scale(1);
  }
}

/* 画面下中央の音楽コントロール。ガラス調ピルで「同期／再生／状態」を横に並べる */
.audio {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(88vw, 360px);
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(8, 16, 12, 0.55);
  border: 1px solid rgba(92, 255, 157, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.audio__btn {
  border: 0;
  border-radius: 999px;
  background: rgba(92, 255, 157, 0.12);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.audio__btn:hover {
  background: rgba(92, 255, 157, 0.24);
}

.audio__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 再生/一時停止の丸アイコンボタン */
.audio__btn--icon {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-content: center;
}

/* 状態表示（自走中／曲名）。長い場合は省略記号で切る */
.audio__name {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2Dキャンバス非対応時のフォールバック。既定では隠し、body.no-canvas のときだけ中央表示する */
.fallback {
  display: none;
}

body.no-canvas #ecg,
body.no-canvas .flash,
body.no-canvas .edge,
body.no-canvas .hud,
body.no-canvas .vitals,
body.no-canvas .audio {
  display: none;
}

body.no-canvas .fallback {
  display: grid;
  place-content: center;
  height: 100%;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}