/* Player overlays + danmaku layer.
   The video element uses the browser's native <video controls> bar for
   play/mute/volume/fullscreen — that's what handles touch/iOS/Android best.
   We only add two small corner overlays: LIVE badge (top-left), danmaku
   toggle (top-right). Plus the danmaku scroll layer in the middle. */

/* Restore full 16:9 video region — titlebar is now an overlay, not a flex sibling */
.live-player-shell { display: block; position: relative; }
.live-player-video { flex: none; width: 100%; height: 100%; min-height: 0; position: absolute; inset: 0; border-radius: 18px; }
.live-player-video #videoPlayer,
.live-player-video #agoraRemotePlayer { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Make .game-wrapper_agbox a true 16:9 container so shell can fill it */
.game-wrapper_ag.is-player { display: block; position: relative; height: 100%; }

/* Titlebar → floating top overlay, hover/active to reveal */
.live-player-titlebar {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 7;
  padding: 10px 14px 24px;
  background: linear-gradient(180deg, rgba(8,8,20,.72) 0%, rgba(8,8,20,0) 100%);
  border-radius: 18px 18px 0 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.live-player-shell:hover .live-player-titlebar,
.live-player-shell.is-controls-visible .live-player-titlebar {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== Corner overlays ==================== */
.player-corner {
  position: absolute;
  z-index: 8;
  display: flex; align-items: center; gap: 6px;
  pointer-events: none;
}
.player-corner.top-left  { top: 10px; left: 12px; }
.player-corner.top-right { top: 10px; right: 12px; }
.player-corner > * { pointer-events: auto; }

/* LIVE badge — red pill with pulsing dot */
.player-live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  background: rgba(255, 47, 47, .92);
  color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; border-radius: 4px;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.player-live-badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: dmu-live-pulse 1.4s ease-in-out infinite;
}
@keyframes dmu-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

/* Danmaku toggle: small circular overlay button, top-right.
   touch-action: manipulation removes the 300ms tap delay on mobile.
   Selector specificity (0,2,1) matches main.css's `.home-top-entry .game-wrapper_ag button`
   rule (legacy "start game" button) which would otherwise paint our overlay buttons
   solid white with big padding. Same specificity → load order wins → we win
   because player-controls.css loads after main.css. */
.player-corner button.player-danmaku-toggle {
  background: rgba(0,0,0,.55);
  border: 0; padding: 0;
  width: 36px; height: 36px;
  color: #fff; cursor: pointer; line-height: 1;
  font-size: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .15s ease, transform .1s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.player-corner button.player-danmaku-toggle svg { width: 20px; height: 20px; display: block; }
.player-corner button.player-danmaku-toggle:hover { background: rgba(0,0,0,.75); color: #fff; }
.player-corner button.player-danmaku-toggle:active { background: rgba(0,0,0,.85); transform: scale(.92); }
.player-corner button.player-danmaku-toggle.is-off { color: #888; background: rgba(0,0,0,.55); }
.player-corner button.player-danmaku-toggle.is-off:hover { color: #fff; background: rgba(0,0,0,.75); }

/* Same fix for the retry button inside error overlay — also caught by the
   legacy `.home-top-entry .game-wrapper_ag button` rule. */
.live-player-overlay button.retry-btn {
  margin-top: 8px;
  padding: 7px 18px;
  background: #5a4cdb;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}
.live-player-overlay button.retry-btn:hover { background: #6f63e6; }

/* ==================== Danmaku layer ==================== */
/* Sits over video but below corner overlays/controls. Top region clipped so
   it doesn't overlap LIVE badge / danmaku toggle; bottom clipped so it doesn't
   collide with the native <video> controls bar (~32-40px tall depending on UA). */
.player-danmaku-layer {
  position: absolute;
  top: 44px; left: 0; right: 0; bottom: 44px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.player-danmaku-item {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.5);
  padding: 0 8px;
  animation: dmu-flow 9s linear forwards;
  will-change: transform;
}
.player-danmaku-item.is-self { color: #ffe187; }
@keyframes dmu-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100vw - 100%)); }
}

/* When agoraRemotePlayer is active, ensure danmaku/overlays still sit above it */
#agoraRemotePlayer { z-index: 1; }

/* Overlay layers (placeholder/loading/error) sit above video but BELOW corner
   overlays — otherwise their full-bleed inset:0 background absorbs all clicks
   and intercepts user interaction. Their interior buttons (retry, etc.) keep
   pointer-events via the rule below. */
.live-player-overlay { z-index: 6; pointer-events: none; }
.live-player-overlay button,
.live-player-overlay .retry-btn { pointer-events: auto; }

/* Mobile: bigger danmaku toggle target */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .player-corner button.player-danmaku-toggle { width: 40px; height: 40px; }
  .player-corner button.player-danmaku-toggle svg { width: 22px; height: 22px; }
  .player-live-badge { height: 24px; font-size: 12px; }
  .player-danmaku-item { font-size: 13px; }
}

/* Buffering indicator — corner spinner used while playing.
   Standalone (not .live-player-overlay), so HLS rebuffer events don't
   blur out the entire player like #playerLoading does. */
.player-buffering {
  position: absolute;
  top: 12px; right: 56px;
  z-index: 7;
  width: 24px; height: 24px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dmu-spin 0.8s linear infinite;
  pointer-events: none;
}
@keyframes dmu-spin { to { transform: rotate(360deg); } }

/* ==================== 常驻底部控件条 ====================
   Driven by player.js:89-243 (initCustomControls). Visible only during
   video/agora playback states — showLayer() toggles display.
   Selector specificity (0,2,1) matches main.css's
   `.home-top-entry .game-wrapper_ag button { background:#fff; ... }`;
   load order wins since player-controls.css loads after main.css. */
.player-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  z-index: 5;
  display: flex; align-items: center;
  padding: 0 10px; gap: 6px;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 100%);
  border-radius: 0 0 18px 18px;
  pointer-events: none;
}
.player-controls > * { pointer-events: auto; }

.player-controls button.player-ctrl-btn {
  background: transparent;
  border: 0; padding: 0; margin: 0;
  width: 40px; height: 40px;
  color: #fff; cursor: pointer; line-height: 1;
  font-size: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .15s ease, transform .1s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.player-controls button.player-ctrl-btn:hover { background: rgba(255,255,255,.15); }
.player-controls button.player-ctrl-btn:active { background: rgba(255,255,255,.25); transform: scale(.92); }
.player-controls button.player-ctrl-btn svg { width: 22px; height: 22px; display: block; }

/* Specificity bumped to (0,2,1) so it beats the `margin: 0` shorthand on
   `.player-controls button.player-ctrl-btn` above — otherwise margin-left:auto
   loses and the fs button clusters next to play/mute instead of right-aligning. */
.player-controls button.player-ctrl-fs { margin-left: auto; }

.player-volume-bar {
  -webkit-appearance: none; appearance: none;
  width: 88px; height: 4px;
  background: rgba(255,255,255,.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  margin: 0 4px;
}
.player-volume-bar::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
  cursor: pointer;
}
.player-volume-bar::-moz-range-thumb {
  width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
  border: 0; cursor: pointer;
}

/* Bottom bar pushes danmaku layer up so messages don't slide under it */
.player-danmaku-layer { bottom: 52px; }

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  /* Bar 44px (was 52) — at mobile 16:9 the shell is only ~190px tall, a 52px
     bar ate ~27% of the frame. 44px keeps WCAG/HIG 44pt touch targets while
     leaving more of the video visible. */
  .player-controls { height: 44px; padding: 0 6px; gap: 2px; }
  .player-controls button.player-ctrl-btn { width: 44px; height: 44px; }
  .player-controls button.player-ctrl-btn svg { width: 22px; height: 22px; }
  .player-volume-bar { display: none; }
  .player-danmaku-layer { bottom: 48px; }
}