/* ========== ZÁKLADNÍ NASTAVENÍ ========== */
html {
    font-size: 16px; /* základ pro PC - 1em = 16px */
}

body {
    margin: 0;
    background: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
    font-size: 16px;  /* základ pro PC */
}

@media (max-width: 768px) {
    body {
        font-size: 11px;  /* pro mobil */
    }
}

/* ========== VIDEO KONTEJNER ========== */
.video-container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    transform-origin: center center;
}

video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-play-button {
    display: none !important;
}

/* ========== ČAS V LEVÉM HORNÍM ROHU ========== */
#custom-time {
    position: absolute;
    top: 0.667em; /* 10px */
    left: 0.667em; /* 10px */
    z-index: 25;
    font-size: 1em; /* 15px */
    text-shadow: 0 0 0.2em rgba(0,0,0,0.9); /* 3px */
}

/* ========== OFFLINE OVERLAY ========== */
#offline-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11,58,143,0.85);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 30;
}

/* ========== OVLÁDACÍ PANEL ========== */
.controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.667em 1em; /* 10px 15px */
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.133em; /* 2px */
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

.controls.hidden {
    opacity: 0;
    transition: opacity 2.5s ease-out;
    pointer-events: none;
}

.control-row {
    display: flex;
    align-items: center;
}

.spacer {
    flex: 1 1 auto;
}

/* ========== HLAVNÍ ČASOVÝ SLIDER ========== */
.slider {
    position: relative;
    margin-bottom: 1em; /* 15px */
    height: 0.2em; /* 3px */
    background: rgba(255,255,255,0.3);
    border-radius: 0.2em; /* 3px */
    cursor: pointer;
}

.slider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.667em; /* -10px */
    bottom: -0.667em; /* -10px */
    cursor: pointer;
}

.slider-fill {
    position: absolute;
    height: 100%;
    background: #fff;
    border-radius: 0.2em; /* 3px */
    width: 0%;
}

.slider-handle {
    position: absolute;
    top: -0.333em; /* -5px */
    width: 0.8em; /* 12px */
    height: 0.8em; /* 12px */
    background: #fff;
    border-radius: 50%;
    transform: translateX(-50%);
    left: 0%;
}

/* ========== ZÁKLAD VŠECH TLAČÍTEK ========== */
.btn,
.oval-btn,
#foto-btn,
#help-btn,
#play-btn-oval {
    position: relative;
    background: rgba(255,255,255,0.25);
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border: 1px solid rgba(255,255,255,0.7);
    height: 1.25em;
    margin: 0 0.25em;  /* 0 nahoře/dole, 0.25em vlevo/vpravo */
}

.btn:hover,
.oval-btn:hover,
#help-btn:hover,
#play-btn-oval:hover {
    background: rgba(255,255,255,0.25);
}

/* Pevná šířka pro indikátory rychlosti - zabrání poskakování */
#rewind-speed, #forward-speed {
    width: 2em; /* dost místa pro 50× */
    min-width: 2em;
    text-align: center;
    background: red;
}

/* Třída pro skrytí s rezervovaným místem - pro všechna tlačítka */
.oval-btn.speed-hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

/* ========== ZÁKLADNÍ .btn ========== */
.btn {
    font-size: 0.933em; /* 14px */
    padding: 0.4em 0.933em; /* 6px 14px */
    border-radius: 0.267em; /* 4px */
    margin: 0 0.333em; /* 0 5px */
}

/* ========== TOOLTIPY K TLAČÍTKŮM ========== */
.btn-tooltip {
    position: absolute;
    left: 10%;
    bottom: 100%;
    margin-bottom: 0.2em; /* 3px */
    background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.65));
    padding: 0.267em 0.467em; /* 4px 7px */
    border-radius: 0.267em; /* 4px */
    color: #fff;
    font-size: 1em; /* 15px */
    text-align: left;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 50;
}

.btn-tooltip.left {
    left: auto;
    right: 10%;
}

.btn-tooltip.multiline {
    white-space: pre-line;
}

.btn-tooltip::after {
    content: "";
    position: absolute;
    left: 0.533em; /* 8px */
    bottom: -0.4em; /* -6px */
    width: 0;
    height: 0;
    border-left: 0.4em solid transparent; /* 6px */
    border-right: 0.4em solid transparent; /* 6px */
    border-top: 0.4em solid rgba(0,0,0,0.65); /* 6px */
}

.btn-tooltip.left::after {
    left: auto;
    right: 0.533em; /* 8px */
}

.btn-tooltip.visible {
    opacity: 1;
    transform: scale(1);
}

#fs-btn {
    position: relative;  /* aby se tooltip vztahoval k tlačítku, ne k .control-row */
}

/* ========== PŘEPÍNAČ LIVE/ARCHIV ========== */
#btn-live,
#btn-dvr {
    height: 2.133em; /* 32px */
    padding: 0 0.667em; /* 0 10px */
    font-size: 0.867em; /* 13px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.25);
    margin: 0;
    position: relative;
    box-sizing: border-box;
}

/* LIVE – levý oválný, pravý rovný, bez pravého okraje */
#btn-live {
    border-radius: 1.333em 0 0 1.333em; /* 20px 0 0 20px */
    border-right: none;
}

/* ARCHIV – pravý oválný, levý rovný, jen levý okraj */
#btn-dvr {
    border-radius: 0 1.333em 1.333em 0; /* 0 20px 20px 0 */
    border-left: 1px solid rgba(255,255,255,0.5);
}

/* Aktivní stav */
#btn-live[style*="background: red"],
#btn-dvr[style*="background: red"] {
    background: #d93025 !important;
}

/* ========== OVÁLNÁ TLAČÍTKA ========== */
.oval-btn {
    padding: 0.25em 0.6em; /* 4px 10px */
    border-radius: 1.4em; /* 20px */
    font-size: 0.9em; /* 13px */
    white-space: nowrap;
    margin: 0 0.1em; /* 0 2px */
}

.oval-btn.active {
    background: #d93025;
}

.oval-btn.level-fast {
    background: #ff8a80 !important;
}

.oval-btn.level-ultra {
    background: #ff5252 !important;
}

.oval-btn.level-search {
    background: #d93025 !important;
}

/* ========== POSUVOVÁ TLAČÍTKA ========== */
.speed-controls {
    display: flex;
    gap: 0.25em; /* 4px */
    align-items: center;
}

.speed-controls.hidden {
    display: none;
}

/* ========== PLAY/PAUSE ========== */
#play-btn-oval {
    width: 2.133em; /* 32px */
    height: 2.133em; /* 32px */
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#play-icon {
    width: 1.5em; /* 22px */
    height: 1.5em; /* 22px */
    fill: #fff;
}

/* ========== HELP ========== */
#help-btn {
    width: 1.667em; /* 25px */
    height: 1.667em; /* 25px */
    padding: 0;
    border-radius: 50%;
    font-size: 0.9em; /* 14px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.133em; /* 0 2px */
}

/* ========== HELP BUBBLE ========== */
#help-bubble {
    position: absolute;
    bottom: 4em; /* 60px */
    right: 4em; /* 60px */
    background: rgba(0,0,0,0.7);
    padding: 0.667em 0.8em; /* 10px 12px */
    border-radius: 0.533em; /* 8px */
    color: #fff;
    font-size: 0.85em;
    opacity: 0;
    transform: translateY(0.667em); /* 10px */
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    min-width: 13.333em; /* 200px */
}

#help-bubble.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#help-close {
    position: absolute;
    top: 0.4em; /* 6px */
    right: 0.533em; /* 8px */
    cursor: pointer;
    font-size: 1em; /* 15px */
    opacity: 0.8;
}

#help-close:hover {
    opacity: 1;
}

.help-title {
    font-weight: bold;
    margin-bottom: 0.267em; /* 4px */
    text-align: center;
}

.help-section {
    margin-top: 0.8em;
}

.help-subtitle {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 0.3em;
    text-align: left;
}

.help-text {
    text-align: left;
    white-space: normal;
}

.help-text.indent {
    padding-left: 1.2em;
}

.help-text.indent2 {
    padding-left: 7em;
}

/* ========== IKONY ========== */
.icon-btn {
    width: 2.133em; /* 32px */
    height: 2.133em; /* 32px */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: white;
    opacity: 0.9;
}

.icon-btn:hover {
    opacity: 1;
}

/* ========== VOLUME ========== */
#vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 4em; /* 60px */
    height: 0.2em; /* 3px */
    margin-right: 0.667em; /* 10px */
    border-radius: 0.2em; /* 3px */
    cursor: pointer;
    background: linear-gradient(
        to right,
        #fff 0%,
        #fff var(--vol-fill, 0%),
        rgba(255,255,255,0.3) var(--vol-fill, 0%)
    );
}

#vol-slider::-webkit-slider-runnable-track,
#vol-slider::-moz-range-track {
    height: 0.2em; /* 3px */
    background: transparent;
}

#vol-slider::-webkit-slider-thumb,
#vol-slider::-moz-range-thumb {
    width: 0.8em; /* 12px */
    height: 0.8em; /* 12px */
    background: #fff;
    border-radius: 50%;
    border: none;
    margin-top: -0.3em; /* -4.5px */
}

/* ========== PREVIEW (TOOLTIP + SEARCH) ========== */
.preview {
    position: absolute;
    bottom: 5.333em; /* 80px */
    left: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    font-size: 0.85em;
    z-index: 25;
}

.preview-canvas {
    max-width: 24em; /* 360px */
    max-height: auto;
    border: 0.2em solid #ccc; /* 3px */
    border-radius: 0.133em; /* 2px */
    margin: 0.133em 0; /* 2px 0 */
    display: block;
}

.preview-text {
    display: inline-block;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.65)
    );
    padding: 0.267em 0.667em; /* 4px 10px */
    border-radius: 0.267em; /* 4px */
    color: #fff;
    font-size: 0.85em;
    backdrop-filter: blur(0.133em); /* 2px */
    white-space: nowrap;
}

/* ========== ČASOVÝ TOOLTIP ========== */
#time-tooltip {
    pointer-events: none;
}

#time-tooltip .preview-canvas {
    opacity: 0;
}

/* ========== SEARCH WINDOW ========== */
#search-window {
    pointer-events: auto;
}

#search-window .preview-canvas {
    opacity: 1;
}

#search-window canvas {
    pointer-events: auto;
}

#search-tooltip-wrapper {
    position: absolute;
    bottom: calc(100% + 0.533em); /* +8px */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.search-tooltip {
    background: linear-gradient(to bottom, rgba(255,0,0,0.45), rgba(255,0,0,0.65));
    padding: 0.4em 0.667em; /* 6px 10px */
    border-radius: 0.267em; /* 4px */
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 50;
}

.search-tooltip.visible {
    opacity: 1;
    transform: scale(1);
}

.search-tooltip.pulse {
    animation: pulseTooltip 4s ease-in-out infinite;
}

@keyframes pulseTooltip {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ========== SOFT SEEK OVERLAY ========== */
#softseek-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    overflow: hidden;
    display: none;
    z-index: 9999;
}

.softseek-canvas {
    position: absolute;
    pointer-events: auto;
    transform-origin: top left;
    transition: transform 3s cubic-bezier(0.0001, 1, 0.0001, 1);
}

/* ========== MOBIL ========== */
@media (max-width: 768px) {
    html {
        font-size: 11px !important; /* základ pro mobil - 1em = 11px */
    }
}