/* CRT の物理を作り込む層。
 *
 * 画面の物理だけをここに閉じ込めてある。切り離したくなったら
 * index.html から <link> を1行外せばよく、他のファイルには何も残らない。
 * 走査線だけは style.css 側にある（この層より前からある表現のため）。
 */

/* 画面の湾曲。CSS だけでは本物の樽型は作れないので、角の丸みで近似する。
   ponytail: 近似。本物の歪みが要るなら SVG フィルタか WebGL に上げる */
#win {
  border-radius: 26px / 20px;
  animation: crt-flicker 9s steps(1, end) infinite;
}

/* ビネットとガラスの反射。走査線は ::after が使っているので ::before を使う */
#win::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(116deg, rgba(190, 255, 215, 0.05) 0%, rgba(190, 255, 215, 0) 34%),
    radial-gradient(135% 105% at 50% 44%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.8) 100%);
}

/* 蛍光体のにじみ。文字の周りに光が回り込む */
#line { text-shadow: 0 0 10px currentColor, 0 0 28px currentColor; }
h1,
#r-main,
#rk-letter,
#r-letter { text-shadow: 0 0 12px currentColor, 0 0 34px currentColor; }
#hud,
#foot,
#rail,
#titlebar { text-shadow: 0 0 6px currentColor; }

/* 残光。打った瞬間だけ強く光って減衰する。
   .fresh は直前に打った1文字にだけ付く（render が毎回張り直す） */
.fresh {
  animation: crt-burn 0.45s ease-out;
}
@keyframes crt-burn {
  from {
    color: #e2fff0;
    text-shadow: 0 0 14px #9effc4, 0 0 34px #46ff86;
  }
}

/* 電源のゆらぎ。常時ではなく、たまに一瞬だけ */
@keyframes crt-flicker {
  0%, 96%, 100% { filter: brightness(1); }
  96.5% { filter: brightness(1.13); }
  97% { filter: brightness(0.92); }
  97.5% { filter: brightness(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  #win { animation: none; }
  .fresh { animation: none; }
}