/* 配信・ゲームらしい演出。自動で動くものは最小限にし、押す・乗せるへの反応を中心にする */

/* 極太の見出し：マウスを乗せると、配信画面の色ずれのように一瞬ぶれる */
h1,.d1,.hero h1{position:relative}
h1:hover,.d1:hover{animation:glitch .38s steps(2,end) 1}
@keyframes glitch{
  0%{text-shadow:none;transform:none}
  25%{text-shadow:3px 0 #9146FF,-3px 0 #000;transform:translateX(-1px)}
  50%{text-shadow:-3px 0 #9146FF,3px 0 #000;transform:translateX(1px) skewX(-2deg)}
  75%{text-shadow:2px 0 #9146FF;transform:none}
  100%{text-shadow:none}
}

/* 映像の枠：配信ソフトの画面のような四隅の印 */
.player,.origin .pv,.shot,.feature .img,.quote,.mo .box{position:relative}
.player::before,.origin .pv::before,.shot::before,.feature .img::before{
  content:"";position:absolute;inset:-6px;pointer-events:none;z-index:3;
  background:
    linear-gradient(#9146FF,#9146FF) left top/18px 3px no-repeat,
    linear-gradient(#9146FF,#9146FF) left top/3px 18px no-repeat,
    linear-gradient(#9146FF,#9146FF) right top/18px 3px no-repeat,
    linear-gradient(#9146FF,#9146FF) right top/3px 18px no-repeat,
    linear-gradient(#9146FF,#9146FF) left bottom/18px 3px no-repeat,
    linear-gradient(#9146FF,#9146FF) left bottom/3px 18px no-repeat,
    linear-gradient(#9146FF,#9146FF) right bottom/18px 3px no-repeat,
    linear-gradient(#9146FF,#9146FF) right bottom/3px 18px no-repeat;
}

/* 年表の暗い画面：ブラウン管のような細い走査線（ごく薄く） */
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}

/* 一覧の行：チャットで自分の発言が強調されるように、左に紫の線が伸びる */
.index a,.ur,.rows > *,.lin a,.miss a{position:relative}
.index a::before,.lin a::before,.miss a::before{content:"";position:absolute;left:-14px;top:12%;bottom:12%;width:4px;background:#9146FF;transform:scaleY(0);transform-origin:center;transition:transform .15s}
.index a:hover::before,.lin a:hover::before,.miss a:hover::before{transform:scaleY(1)}

/* 「いま」「急上昇」の印：配信中の赤丸の代わりに紫の点が脈打つ */
.live-dot{display:inline-block;width:.55em;height:.55em;border-radius:50%!important;background:#9146FF;margin-right:.4em;vertical-align:.1em;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(145,70,255,.6)!important}50%{box-shadow:0 0 0 6px rgba(145,70,255,0)!important}}

@media (prefers-reduced-motion:reduce){h1:hover,.d1:hover{animation:none}.live-dot{animation:none}}