:root {
    --primary-color: #4361ee;
    --secondary-color: #3a0ca3;
    --accent-color: #4cc9f0;
    --text-color: #e9ecef;
    --dark-bg: #121212;
    --card-bg: #1e1e1e;
    --input-bg: #2d2d2d;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --border-color: #333333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Familjen Grotesk', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    background: #000;
    overscroll-behavior: auto;
    /* Enable pull-to-refresh */
}

#main-container {
    position: relative;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}

/* ==================== TOGGLE SWITCH (ENHANCED GLASS) ==================== */
.view-toggle-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    animation: slideDown 0.5s ease-out;
    width: auto;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.view-toggle-switch {
    position: relative;
    display: flex;
    /* Enhanced Apple-style glassmorphism */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    padding: 5px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.toggle-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-radius: 25px;
}

.toggle-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.toggle-btn.active {
    color: #000;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.toggle-btn.active svg {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.toggle-slider {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
    border-radius: 25px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.toggle-slider.photos-active {
    transform: translateX(calc(100% + 0px));
}

/* ==================== CONTENT VIEWS ==================== */
.content-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    flex-direction: column;
}

.content-view.active {
    opacity: 1;
    visibility: visible;
}

/* ==================== VIDEO VIEW (3D POP-OUT EFFECT) ==================== */
#video-view {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
    /* Video + share button are grouped as one flex unit and centered together, so the
       gap between them stays proportionate on any screen height instead of the button
       being pinned to the true viewport bottom (which left a dead gap on tall screens). */
    gap: clamp(6px, 1.5dvh, 24px);
    padding: clamp(24px, 6dvh, 90px) clamp(10px, 3vw, 20px) clamp(6px, 1.5dvh, 20px);
    box-sizing: border-box;
    perspective: 1200px;
}

.video-download-btn {
    position: absolute;
    right: clamp(12px, 2vw, 18px);
    bottom: clamp(60px, 8vw, 50px);
    z-index: 25;
}

.video-container {
    position: relative;
    /* flex-basis: 0 + flex-grow hands this box exactly the vertical space left over
       after the toggle padding, gap, and share bar are accounted for — width is then
       derived from that resolved height via aspect-ratio, instead of the old width-first
       layout that overflowed short viewports and clipped the share button. */
    flex: 1 1 0%;
    min-height: 0;
    width: auto;
    /* Height-derived width (see above) has no inherent tie to viewport width, so on
       tall/wide screens it can exceed the available horizontal space — cap it at
       whichever is smaller, the design max or the actual space we have. */
    max-width: min(500px, 100%);
    max-height: 100%;
    aspect-ratio: 9 / 16;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: visible;

    /* 3D Pop-out effect — preserve-3d removed: it breaks 2D z-index on children */
    border-radius: 24px;
    transform: translateZ(50px);
    transform-style: flat;

    /* Dramatic layered shadows for depth */
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.9),
        0 30px 60px rgba(0, 0, 0, 0.7),
        0 15px 30px rgba(0, 0, 0, 0.5),
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.08);

    /* Subtle gradient for depth */
    background: linear-gradient(145deg, rgba(30, 30, 30, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.video-buffer-overlay {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
}

.buffer-spinner {
    width: 48px;
    height: 48px;
}

/* Enhanced glow and rim light effect */
.video-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 30%,
            transparent 70%,
            rgba(255, 255, 255, 0.15) 100%);
    pointer-events: none;
    opacity: 0.6;
    z-index: 10;
}

/* Subtle ambient glow */
.video-container::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 44px;
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 60%);
    pointer-events: none;
    opacity: 0.5;
    z-index: -1;
    filter: blur(20px);
}

#video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    border-radius: 24px;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-init-overlay {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    z-index: 8;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(25, 25, 25, 1) 0%, rgba(0, 0, 0, 1) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 24px;
}

.video-init-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.play-overlay.hidden {
    opacity: 0;
}

.play-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.288);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* ==================== PHOTOS VIEW ==================== */
#photos-view {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 90px;
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
}


.photos-carousel-container {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    max-height: 75vh;
}

/* ==================== SWIPER STYLES ==================== */
.swiper {
    width: 100%;
    height: 100%;
    padding-bottom: 30px !important;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.35s ease;
    position: relative;
    /* Important for button positioning */
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100vw;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    object-fit: cover;
}

/* ==================== SCOREBOARD SLIDE (16:9 landscape) ==================== */
.swiper-slide--scoreboard {
    flex-direction: column;
    gap: 10px;
}

.swiper-slide--scoreboard img {
    object-fit: contain;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 55vw;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
}

.scoreboard-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 4px 12px;
    z-index: 10;
    white-space: nowrap;
    text-transform: uppercase;
}



/* ==================== PHOTO SKELETON LOADER ==================== */
.photo-skeleton {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    z-index: 3;
    overflow: hidden;
    background: linear-gradient(135deg, #1c1c2e 0%, #0d0d1a 100%);
    pointer-events: none;
}

.photo-skeleton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 40% at 50% 50%,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 70%);
    animation: skeleton-pulse 2s ease-in-out infinite;
}

.photo-skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.06) 60%,
        transparent 80%
    );
    animation: photo-shimmer 1.8s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

@keyframes photo-shimmer {
    0%   { left: -100%; }
    100% { left: 160%; }
}

.swiper-slide--scoreboard .photo-skeleton {
    border-radius: 14px;
}

.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.4;
}

.swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
}

/* Photo buttons positioned at bottom-right corner */
.swiper-slide button {
    position: absolute;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 20;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
}

.swiper-slide button:active {
    transform: scale(0.9);
}

.swiper-slide button[title="Download photo"] {
    right: 75px;
}

.swiper-slide button[title="Share photo"] {
    right: 20px;
}

.photos-controls {
    flex: 0 0 auto;
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
    z-index: 100;
}

/* ==================== ACTION BUTTONS ==================== */
.action-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #000;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    font-family: 'Familjen Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease;
}

.action-button:active {
    transform: scale(0.98);
}

/* ==================== SHARE BUTTON BAR (BELOW VIDEO, IN-FLOW) ==================== */
.video-actions-bar {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 1dvh, 16px);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
}

.action-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    /* Changed to black for contrast */
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0;
    margin: 0;
    outline: none;
}

.action-fab:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.85);
}

.action-fab svg {
    width: 24px;
    height: 24px;
    stroke: #000;
}

@keyframes download-bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.video-download-btn .icon-state svg {
    animation: download-bounce 1s infinite;
}

.action-fab .icon-state,
.action-fab .loader-state {
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-fab .loader-state {
    display: none;
}

/* Loader spinner for download button */
.action-fab .loader-state svg circle {
    stroke: #000 !important;
}

/* ==================== SHARE BUTTON (CENTERED, IN-FLOW BELOW VIDEO) ==================== */
.share-btn {
    width: 85%;
    max-width: 360px;
    /* Sized to the tallest state (icon-state: 26px svg + text) so swapping to
       loader-state (20px spinner) or share-progress-state (text-only) never
       shrinks/shifts the button — avoids layout shift on load. */
    min-height: clamp(44px, 7dvh, 54px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(6px, 1.5dvh, 10px) clamp(18px, 5vw, 28px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #000;
    font-size: 16px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    font-family: 'Familjen Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 100;
    transition: transform 0.2s ease;
    animation: share-cta-pulse 2.8s ease-in-out infinite;
    overflow: hidden;
}

.share-btn-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(67, 97, 238, 0.25) 0%, rgba(76, 201, 240, 0.25) 100%);
    border-radius: 50px;
    transition: width 0.3s ease;
    z-index: 0;
    pointer-events: none;
}

.share-btn .share-progress-state,
.share-btn .icon-state,
.share-btn .loader-state {
    position: relative;
    z-index: 1;
}

.share-progress-state {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.share-btn:active {
    transform: scale(0.95);
    animation: none;
}

@keyframes share-cta-pulse {

    0%,
    100% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 24px 6px rgba(255, 255, 255, 0.18);
    }
}

.share-btn svg {
    width: 30px;
    height: 30px;
}

.share-btn .icon-state {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-btn .loader-state {
    display: none;
    align-items: center;
    justify-content: center;
}

.share-btn .icon-state svg {
    flex-shrink: 0;
}

.share-btn .loader-state {
    display: none;
}

.btn-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==================== NOTICES & TOAST ==================== */
.auto-delete-notice {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-align: center;
    padding: 10px 20px 0;
    width: 100%;
    z-index: 999;
}

#video-auto-delete {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translate(-50%);
}

.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ==================== RESPONSIVE (Mobile Only) ==================== */
@media (max-height: 700px) {
    .view-toggle-container {
        top: 10px;
    }

    .photos-carousel-container {
        max-height: 60vh;
    }
}

@media (max-height: 667px) {

    /* iPhone SE, iPhone 8 */
    .video-container {
        border-radius: 20px;
    }
}

@media (max-height: 580px) {

    /* Very small / landscape-ish phones — shrink the toggle reserve further
       so the video keeps a usable height instead of squeezing to a sliver. */
    #video-view {
        padding-top: 20px;
    }

    .share-btn span {
        font-size: 13px;
    }
}

@media (min-height: 800px) {

    /* Taller phones */
    .video-container {
        max-width: min(450px, 100%);
    }
}

@media (min-height: 900px) {

    /* Very tall phones */
    .video-container {
        max-width: min(420px, 100%);
    }
}

/* clip-path clips the actual rendered video frames — border-radius alone doesn't on mobile WebKit */
#video-player {
    clip-path: inset(0 round 24px);
}

/* ==================== VIDEO TOP GRADIENT (partial logo fade) ==================== */
.video-top-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 10;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    pointer-events: none;
}

/* ==================== VIDEO SEEK BAR (overlay inside video frame) ==================== */
.video-seekbar-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 60px 18px 20px;
    border-radius: 0 0 24px 24px;
    box-sizing: border-box;
    cursor: pointer;
    /* Always interactive — no two-tap needed */
    pointer-events: auto;
    /* Subtle rest-state gradient */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.48) 0%, transparent 60%);
    transition: background 0.25s ease;
}

/* Expanded state — triggered by JS .active class on tap/seek */
.video-seekbar-container.active {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 100%);
}

.video-time-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.video-seekbar-container.active .video-time-row {
    opacity: 1;
    transform: translateY(0);
}

.video-time {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Track wrapper adds invisible 18px touch zone above + below the actual bar */
.video-seekbar-track-wrapper {
    position: relative;
    padding: 18px 0;
    margin: -18px 0;
    pointer-events: none;
}

.video-seekbar-track {
    position: relative;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.38);
    border-radius: 4px;
    pointer-events: none;
    transition: height 0.18s ease, background 0.18s ease;
    will-change: height;
}

.video-seekbar-container.active .video-seekbar-track {
    height: 7px;
    background: rgba(255, 255, 255, 0.45);
}

.video-seekbar-fill {
    height: 100%;
    width: 0%;
    background: #ffffff;
    border-radius: 4px;
}

.video-seekbar-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.1s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    /* Extra invisible tap area — large fingers */
    outline: 16px solid transparent;
}

.video-seekbar-container.active .video-seekbar-thumb {
    opacity: 1;
}

/* Thumb grows while dragging */
.video-seekbar-container.dragging .video-seekbar-thumb {
    transform: translate(-50%, -50%) scale(1.35);
}

/* ==================== DOWNLOAD SUCCESS STATE ==================== */
.download-success-toast {
    position: fixed;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(17, 17, 17, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.download-success-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.download-success-toast .toast-icon {
    width: 28px;
    height: 28px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.download-success-toast .toast-icon svg {
    width: 16px;
    height: 16px;
}

.download-success-toast .toast-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.download-success-toast .toast-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.download-success-toast .toast-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.2;
}

/* ==================== ERROR SCREEN ==================== */
#error-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: errorFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes errorFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.error-bg-blur {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(60, 0, 80, 0.7) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 80% 90%, rgba(0, 20, 80, 0.6) 0%, transparent 55%),
        #050508;
    z-index: 0;
}

/* Floating ambient orbs */
.error-bg-blur::before,
.error-bg-blur::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: errorOrb 8s ease-in-out infinite alternate;
}

.error-bg-blur::before {
    width: 300px;
    height: 300px;
    top: -80px;
    left: -60px;
    background: radial-gradient(circle, rgba(120, 0, 180, 0.35), transparent 70%);
}

.error-bg-blur::after {
    width: 250px;
    height: 250px;
    bottom: -60px;
    right: -40px;
    background: radial-gradient(circle, rgba(0, 60, 200, 0.3), transparent 70%);
    animation-delay: -4s;
}

@keyframes errorOrb {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(30px, 20px) scale(1.15);
    }
}

.error-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 48px 32px 40px;
    width: 88%;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: errorCardSlide 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes errorCardSlide {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.error-moments-logo {
    width: 130px;
    opacity: 0.9;
    filter: drop-shadow(0 2px 12px rgba(255, 255, 255, 0.15));
}

.error-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 12px rgba(255, 80, 80, 0.05),
        0 0 0 24px rgba(255, 80, 80, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: errorIconPulse 3s ease-in-out infinite;
}

@keyframes errorIconPulse {

    0%,
    100% {
        box-shadow: 0 0 0 12px rgba(255, 80, 80, 0.05), 0 0 0 24px rgba(255, 80, 80, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    50% {
        box-shadow: 0 0 0 16px rgba(255, 80, 80, 0.08), 0 0 0 32px rgba(255, 80, 80, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

.error-icon-svg {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 0 8px rgba(255, 80, 80, 0.6));
}

.error-text-wrap {
    text-align: center;
}

.error-title {
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.error-subtitle {
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.error-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    opacity: 0.5;
}

.error-footer span {
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
}

.error-fog-logo {
    width: 52px;
    filter: brightness(0) invert(1);
}