/* 全画面のネオン心電図モニターのスタイル。
   レイアウト・グリッド・演出（フラッシュ／ふち発光／バイタルのパルス）を担う。
   色そのものは「色温度(--heat)」で統一し、波形側の色・強さは src/config.js の ecg に置く。

   【緩急の要】背景・グリッド・HUD・演出のすべてが --heat と --intensity を参照する。
   JS(main.js)が毎フレーム両変数を更新するため、安静↔高揚で画面全体が別の空気に変わる。 */

:root {
  --bg: #04070c;
  /* 現在の色温度[r,g,b]。JS が毎フレーム更新（冷たい安静→熱いピーク）。
     rgb(var(--heat)) / rgba(var(--heat), a) の形で全体に配る */
  --heat: 92, 255, 157;
  --intensity: 0; /* 現在の高まり(0落ち着き..1高ぶり)。JS が更新し、発光量・密度を動かす */
  --fg: #e9fff5;
  --muted: rgba(233, 255, 245, 0.55);
  --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ペーパー風のグリッド＋中央ベースライン＋色温度アンビエント＋ビネットを背景に敷く。
   先に並べた層ほど手前に重なる（中央線→アンビエント→ビネット→細目→太目の順）。
   グリッド・中央線・アンビエントは --heat/--intensity を参照し、高まるほど温かく濃く灯る。 */
body {
  background-image:
    /* 中央のベースライン（波の中心線）。高まると少し濃く色づく */
    linear-gradient(0deg, transparent calc(50% - 1px),
      rgba(var(--heat), calc(0.1 + 0.14 * var(--intensity))) 50%, transparent calc(50% + 1px)),
    /* 色温度のアンビエント発光：高まるほど画面全体が温かく灯る（緩急の空気） */
    radial-gradient(ellipse 92% 72% at 50% 52%,
      rgba(var(--heat), calc(0.04 + 0.2 * var(--intensity))) 0%, rgba(var(--heat), 0) 62%),
    /* 四隅を沈めるビネット（奥行き） */
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.62) 100%),
    /* 細目グリッド（色温度でうっすら色づく） */
    repeating-linear-gradient(0deg, rgba(var(--heat), 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(var(--heat), 0.05) 0 1px, transparent 1px 30px),
    /* 太目グリッド */
    repeating-linear-gradient(0deg, rgba(var(--heat), 0.09) 0 1px, transparent 1px 150px),
    repeating-linear-gradient(90deg, rgba(var(--heat), 0.09) 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%, rgba(var(--heat), 0.5) 0%, rgba(var(--heat), 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(var(--heat), 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: rgb(var(--heat));
  text-shadow: 0 0 12px rgba(var(--heat), 0.55), 0 0 30px rgba(var(--heat), 0.3);
}

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

/* 状態語（STILL/CALM/…/PEAK）。色つきドット＋語で「いまの高まり」を示す */
.hud__state {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--heat));
  box-shadow: 0 0 10px rgba(var(--heat), 0.9), 0 0 18px rgba(var(--heat), 0.5);
}

.hud__mood {
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 700;
  letter-spacing: 0.26em;
  color: rgb(var(--heat));
  text-shadow: 0 0 12px rgba(var(--heat), 0.5);
}

/* テンションメーター：高まり(0..1)ぶんを色温度で満たす細い横バー */
.meter {
  margin-top: 8px;
  width: clamp(120px, 34vw, 168px);
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--heat), 0.12);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgb(var(--heat));
  box-shadow: 0 0 10px rgba(var(--heat), 0.7);
  /* 高まりの伸縮を滑らかに見せる（JS は width を離散的に更新する） */
  transition: width 0.24s ease-out;
}

/* 右上のバイタル表示。♥ と 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: rgb(var(--heat));
  text-shadow: 0 0 14px rgba(var(--heat), 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(var(--heat), 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.audio__btn {
  border: 0;
  border-radius: 999px;
  background: rgba(var(--heat), 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(var(--heat), 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;
}