/* kweb-player.css — custom video player UI */
/* 2026-06-11: Play, progress, volume, fullscreen with premium glass controls */

.scp-player { position: relative; width: 100%; height: 100%; background: #0a0f1a; color: #fff; font-family: var(--site-font-family, system-ui, sans-serif); overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent; }
.scp-player--landscape { aspect-ratio: 16 / 9; }
.scp-player--portrait { aspect-ratio: 9 / 16; max-width: min(100%, 420px); margin: 0 auto; }
.scp-player-stage { position: relative; width: 100%; height: 100%; cursor: pointer; }
.scp-player-media { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: #000; }
.scp-player-media video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.scp-player-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.scp-player-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(2, 6, 23, 0.08) 0%, rgba(2, 6, 23, 0) 28%, rgba(2, 6, 23, 0) 55%, rgba(2, 6, 23, 0.82) 100%); pointer-events: none; opacity: 1; transition: opacity 0.25s ease; }
.scp-player-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 0 14px 12px; opacity: 1; transform: translateY(0); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: auto; }
/* kweb-player.css — 2026-06-17: YouTube-style auto-hide controls while playing */
.scp-player:not(.is-playing) .scp-player-shade { opacity: 1; }
.scp-player:not(.is-playing) .scp-player-controls,
.scp-player:not(.is-playing) .scp-player-center-btn { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
.scp-player.is-playing .scp-player-center-btn { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%); }
.scp-player.is-playing:not(.is-idle) .scp-player-shade { opacity: 1; }
.scp-player.is-playing:not(.is-idle) .scp-player-controls { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scp-player.is-playing.is-idle .scp-player-shade { opacity: 0; }
.scp-player.is-playing.is-idle .scp-player-controls { opacity: 0; transform: translateY(10px); pointer-events: none; }
.scp-player-center-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: 72px; height: 72px; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: 1.35rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-left: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.2s ease, background 0.2s ease; }
.scp-player-center-btn:hover { background: rgba(255, 255, 255, 0.22); transform: translate(-50%, -50%) scale(1.04); }
.scp-player-progress-wrap { position: relative; height: 18px; display: flex; align-items: center; margin-bottom: 4px; cursor: pointer; }
.scp-player-progress-track { position: absolute; left: 0; right: 0; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; transition: height 0.15s ease; }
.scp-player-progress-wrap:hover .scp-player-progress-track { height: 6px; }
.scp-player-progress-buffer { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.22); }
.scp-player-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--site-accent, #0d9488), color-mix(in srgb, var(--site-accent, #0d9488) 70%, #fff)); box-shadow: 0 0 12px color-mix(in srgb, var(--site-accent, #0d9488) 55%, transparent); }
.scp-player-progress-thumb { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; margin-left: -6px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); opacity: 0; transform: scale(0.8); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; }
.scp-player-progress-wrap:hover .scp-player-progress-thumb { opacity: 1; transform: scale(1); }
.scp-player-progress-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scp-player-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28); }
.scp-player-btn { flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 10px; background: transparent; color: #fff; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; }
.scp-player-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--site-accent, #5eead4); }
.scp-player-time { flex-shrink: 0; font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.88); letter-spacing: 0.02em; min-width: 88px; }
.scp-player-spacer { flex: 1 1 auto; min-width: 4px; }
/* kweb-player.css — volume control vertical align */
.scp-player-volume { display: inline-flex; align-items: center; gap: 2px; height: 36px; flex-shrink: 0; }
.scp-player-volume .scp-player-btn { flex-shrink: 0; }
.scp-player-volume-slider { display: flex; align-items: center; justify-content: center; width: 0; height: 36px; opacity: 0; overflow: hidden; transition: width 0.25s ease, opacity 0.25s ease; }
.scp-player-volume:hover .scp-player-volume-slider,
.scp-player-volume.is-open .scp-player-volume-slider { width: 80px; opacity: 1; }
.scp-player-volume-input { display: block; width: 72px; height: 14px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; accent-color: var(--site-accent, #0d9488); -webkit-appearance: none; appearance: none; }
.scp-player-volume-input::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
.scp-player-volume-input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.scp-player-volume-input::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); border: 0; }
.scp-player-volume-input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.scp-player.is-loading .scp-player-center-btn { opacity: 0.6; pointer-events: none; }
.scp-player.is-embed-fallback .scp-player-controls,
.scp-player.is-embed-fallback .scp-player-center-btn,
.scp-player.is-embed-fallback .scp-player-shade { display: none !important; }
.scp-player.is-embed-fallback .scp-player-media iframe { pointer-events: auto; }
.board-video-modal-body [data-scp-modal-player-mount] { position: relative; width: 100%; height: 100%; min-height: 220px; flex: 1 1 auto; display: flex; }
.board-video-modal-body [data-scp-modal-player-mount] .scp-player { flex: 1 1 auto; width: 100%; min-height: 220px; }
.scp-player-poster { position: absolute; inset: 0; z-index: 3; border: none; padding: 0; margin: 0; cursor: pointer; background: #0f172a; }
.scp-player-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scp-player-poster-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255, 255, 255, 0.75); }
.board-video-modal-body .scp-player { border-radius: 0; }
.board-video-modal-body .scp-player--landscape { aspect-ratio: unset; height: 100%; min-height: 0; }
.board-video-modal-body .scp-player--portrait { aspect-ratio: unset; height: 100%; max-width: none; }
.grid-widget.has-video .scp-player { flex: 1 1 auto; min-height: 0; border-radius: 0; aspect-ratio: unset; height: 100%; }
.grid-widget.has-video .scp-player--portrait { max-width: none; }
@media (max-width: 640px) {
  .scp-player-controls { padding: 0 8px 8px; }
  .scp-player-bar { gap: 6px; padding: 6px 8px; }
  .scp-player-btn { width: 32px; height: 32px; font-size: 0.82rem; }
  .scp-player-time { font-size: 0.7rem; min-width: 72px; }
  .scp-player-volume-slider { display: none; }
  .scp-player-center-btn { width: 58px; height: 58px; font-size: 1.1rem; }
}