@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
body.page-fullscreen { overflow: hidden; background: #000; }
#videoShell.page-fullscreen-active { position: fixed; inset: 0; max-width: none; width: 100vw; z-index: 999; background: #000; }
.glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.45); }
.glass-chat { background: rgba(255,255,255,0.45); }
.loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 30; background: radial-gradient(circle, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.65) 100%); opacity: 0; transition: opacity 0.2s ease; }
.loading-overlay.visible { opacity: 1; }
.loading-spinner { width: 56px; height: 56px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.25); border-top-color: #00a1d6; animation: spin 1s linear infinite; box-shadow: 0 0 12px rgba(0,0,0,0.4); }
.player-control-wrap { position: absolute; bottom: 0; left: 0; right: 0; z-index: 35; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); padding: 40px 16px 12px; transition: opacity 0.3s ease; pointer-events: auto; }
.player-control-wrap.hidden { opacity: 0; pointer-events: none; }
.player-top-right-controls { position: absolute; top: 12px; right: 12px; z-index: 40; pointer-events: auto; opacity: 1; transition: opacity 0.2s ease; display: flex; gap: 6px; }
.player-top-right-controls.hidden { opacity: 0; pointer-events: none; }
.danmaku-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 25; contain: layout paint; }
.danmaku-item { position: absolute; left: 100%; max-width: 80%; white-space: nowrap; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 2px #000, 1px 0 2px #000, -1px 0 2px #000, 0 -1px 2px #000; animation: danmaku-move var(--danmaku-duration, 8s) linear forwards; will-change: transform; }
.danmaku-name { margin-right: 6px; font-size: 0.85em; opacity: 0.9; }
@keyframes danmaku-move { to { transform: translateX(calc(-100vw - 100%)); } }
.seek-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.7); color: #fff; padding: 8px 16px; border-radius: 16px; font-size: 24px; font-weight: bold; z-index: 50; pointer-events: none; display: none; }
.seek-indicator.visible { display: block; }
video::cue { background-color: transparent; color: white; text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black; }
.playlist-item.playing { background-color: #e0f5ff; color: #006d9e; font-weight: 600; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #00a1d6; cursor: pointer; border: 2px solid #fff; }
.volume-slider { width: 0; overflow: hidden; transition: width 0.2s ease; }
.volume-wrap:hover .volume-slider { width: 80px; }
@media (max-width: 640px) { .player-control-wrap { padding: 30px 8px 8px; } .danmaku-item { font-size: 14px; } }