/**
 * @file        danmaku.css
 * @module      UI / Danmaku Styles
 * @role        Developer
 * @session     2026-06-13
 * @description 弹幕 DLC 的专用样式：弹幕层、弹幕项、动画
 * @handoff     与 danmaku.js 配合使用
 */

/* ==============================================================
   弹幕层
   ============================================================== */
.danmaku-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  touch-action: none;
}

/* ==============================================================
   弹幕项
   ============================================================== */
.danmaku-item {
  position: absolute;
  right: 0;
  white-space: nowrap;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #FFFFFF;
  text-shadow:
    -1px -1px 1px rgba(0, 0, 0, 0.8),
     1px -1px 1px rgba(0, 0, 0, 0.8),
    -1px  1px 1px rgba(0, 0, 0, 0.8),
     1px  1px 1px rgba(0, 0, 0, 0.8);
  will-change: transform;
  line-height: 1.4;
  pointer-events: none;
  z-index: 51;
}

/* ==============================================================
   弹幕溢出保护 — 弹幕过多时不卡顿
   ============================================================== */
.danmaku-layer.danmaku-paused .danmaku-item {
  animation-play-state: paused;
}

/* ==============================================================
   响应式：移动端弹幕字号缩小
   ============================================================== */
@media (max-width: 520px) {
  .danmaku-item {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .danmaku-item {
    font-size: 14px;
  }
}