/*
 * Copyright (C) 2026 tixyq 
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 */
:root { --accent-blue: #3b82f6; --gray-light: #a1a1aa; }
body { margin: 0; background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; overflow: hidden; }

.k-player { position: relative; width: 100vw; height: 56.25vw; max-width: 100%; max-height: 100vh; background: #000; overflow: hidden; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
video { width: 100%; height: 100%; object-fit: contain; }

.k-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%); transition: opacity 0.3s ease; z-index: 10; opacity: 0; pointer-events: none; }
.k-player.show-ui .k-overlay, .k-player.is-paused .k-overlay { opacity: 1; pointer-events: auto; }

.k-controls-wrapper { padding: 0 15px 15px 15px; }
.k-progress-container { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.2); margin-bottom: 15px; cursor: pointer; transition: height 0.1s; }
.k-player.show-ui .k-progress-container { height: 6px; }

.k-progress-bar { height: 100%; background: var(--accent-blue); width: 0%; position: relative; pointer-events: none; }

/* ТОЧКА: Полностью скрыта */
.k-progress-bar::after {
    content: ''; position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; background: var(--accent-blue);
    border-radius: 50%; opacity: 0; 
    transition: none !important; /* Никаких плавных исчезновений */
}

/* ТОЧКА: Только при наведении на полоску ИЛИ при перетаскивании */
.k-progress-container:hover .k-progress-bar::after, 
.k-player.is-dragging .k-progress-bar::after { 
    opacity: 1 !important; 
}

.k-bottom-row { display: flex; align-items: center; justify-content: space-between; }
.k-btn-group { display: flex; align-items: center; gap: 15px; }
.k-btn { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; }
.k-btn svg { fill: white; width: 28px; height: 28px; }
.k-time { color: var(--gray-light); font-size: 13px; font-variant-numeric: tabular-nums; }

.k-ripple { position: absolute; top: 0; width: 30%; height: 100%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; color: white; font-weight: bold; z-index: 5; }
.k-ripple.left { left: 0; border-radius: 0 100% 100% 0; }
.k-ripple.right { right: 0; border-radius: 100% 0 0 100%; }
.k-ripple.animate { opacity: 1; }

.k-center-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 15; display: none; }
.k-center-btn.active { display: block; }
.k-replay-bg { background: rgba(0, 0, 0, 0.6); border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.k-center-btn svg { width: 32px; height: 32px; fill: white; }