* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/Anton-Regular.ttf') format('truetype');
}

.install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ff8a80;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

.install-banner.show {
    transform: translateY(0);
}

.install-banner p {
    font-size: 0.95rem;
    font-weight: 500;
}

.install-btn {
    background: #fff;
    color: #f44336;
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.install-btn:hover {
    transform: scale(1.05);
}

.dismiss-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 10px;
    opacity: 0.8;
}

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

:root {
    --primary: #ff8a80;
    --secondary: #82b1ff;
    --accent: #ffff8d;
    --dark: #1a1a2e;
    --light: #fafafa;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #1a1a2e;
    color: #fff;
    line-height: 1.6;
    min-height: 100vh;
    margin: 0;
}

.brick {
    color: #f63;
    background-color: currentColor;
    padding: 6px;
    min-width: 27px;
    min-height: 27px;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,.2), inset 1px 1px 0 rgba(255,255,255,.2);
    background-image: radial-gradient(currentColor 7.5px, transparent 8px),
                        radial-gradient(rgba(255,255,255,.6) 7.5px, transparent 8px),
                      radial-gradient(rgba(0,0,0,.2) 7.5px, transparent 10.5px),
                    radial-gradient(rgba(0,0,0,.2) 7.5px, transparent 10.5px);
    background-size: 27px 27px;
    background-position: 0px 0px, -.5px -.5px, 0px 0px, 3px 3px;
    background-repeat: repeat;
}

.b-red { color: #e53935; }
.b-pink { color: #d81b60; }
.b-purple { color: #8e24aa; }
.b-deep-purple { color: #5e35b1; }
.b-indigo { color: #3949ab; }
.b-blue { color: #1e88e5; }
.b-light-blue { color: #039be5; }
.b-cyan { color: #00acc1; }
.b-teal { color: #00897b; }
.b-green { color: #43a047; }
.b-light-green { color: #7cb342; }
.b-lime { color: #c0ca33; }
.b-yellow { color: #fdd835; }
.b-amber { color: #ffb300; }
.b-orange { color: #fb8c00; }
.b-deep-orange { color: #f4511e; }
.b-brown { color: #6d4c41; }
.b-grey { color: #757575; }
.b-blue-grey { color: #546e7a; }

.b-1x1 { width: 27px; height: 27px; }
.b-2x1 { width: 51px; height: 27px; }
.b-3x1 { width: 75px; height: 27px; }
.b-4x1 { width: 99px; height: 27px; }
.b-5x1 { width: 123px; height: 27px; }
.b-6x1 { width: 147px; height: 27px; }
.b-7x1 { width: 171px; height: 27px; }
.b-8x1 { width: 195px; height: 27px; }

.b-1x2 { width: 27px; height: 51px; }
.b-2x2 { width: 51px; height: 51px; }
.b-3x2 { width: 75px; height: 51px; }
.b-4x2 { width: 99px; height: 51px; }
.b-5x2 { width: 123px; height: 51px; }
.b-6x2 { width: 147px; height: 51px; }

.b-1x3 { width: 27px; height: 75px; }
.b-2x3 { width: 51px; height: 75px; }
.b-3x3 { width: 75px; height: 75px; }
.b-4x3 { width: 99px; height: 75px; }

.b-1x4 { width: 27px; height: 99px; }
.b-2x4 { width: 51px; height: 99px; }
.b-3x4 { width: 75px; height: 99px; }
.b-4x4 { width: 99px; height: 99px; }

.b-1x5 { width: 27px; height: 123px; }
.b-2x5 { width: 51px; height: 123px; }
.b-3x5 { width: 75px; height: 123px; }
.b-4x5 { width: 99px; height: 123px; }

.b-1x6 { width: 27px; height: 147px; }
.b-2x6 { width: 51px; height: 147px; }
.b-3x6 { width: 75px; height: 147px; }
.b-4x6 { width: 99px; height: 147px; }

.b-1x7 { width: 27px; height: 171px; }
.b-2x7 { width: 51px; height: 171px; }
.b-3x7 { width: 75px; height: 171px; }
.b-4x7 { width: 99px; height: 171px; }

.b-1x8 { width: 27px; height: 195px; }
.b-2x8 { width: 51px; height: 195px; }
.b-3x8 { width: 75px; height: 195px; }
.b-4x8 { width: 99px; height: 195px; }

.b-1x9 { width: 27px; height: 219px; }
.b-2x9 { width: 51px; height: 219px; }
.b-3x9 { width: 75px; height: 219px; }
.b-4x9 { width: 99px; height: 219px; }

.b-1x10 { width: 27px; height: 243px; }
.b-2x10 { width: 51px; height: 243px; }
.b-3x10 { width: 75px; height: 243px; }
.b-4x10 { width: 99px; height: 243px; }

.b-1x11 { width: 27px; height: 267px; }
.b-2x11 { width: 51px; height: 267px; }
.b-3x11 { width: 75px; height: 267px; }
.b-4x11 { width: 99px; height: 267px; }

.b-1x12 { width: 27px; height: 291px; }
.b-2x12 { width: 51px; height: 291px; }
.b-3x12 { width: 75px; height: 291px; }
.b-4x12 { width: 99px; height: 291px; }

.b-5x2 { width: 123px; height: 51px; }
.b-5x3 { width: 123px; height: 75px; }
.b-5x4 { width: 123px; height: 99px; }
.b-5x5 { width: 123px; height: 123px; }
.b-5x6 { width: 123px; height: 147px; }
.b-5x7 { width: 123px; height: 171px; }
.b-5x8 { width: 123px; height: 195px; }
.b-5x9 { width: 123px; height: 219px; }
.b-5x10 { width: 123px; height: 243px; }
.b-5x11 { width: 123px; height: 267px; }
.b-5x12 { width: 123px; height: 291px; }

.b-6x2 { width: 147px; height: 51px; }
.b-6x3 { width: 147px; height: 75px; }
.b-6x4 { width: 147px; height: 99px; }
.b-6x5 { width: 147px; height: 123px; }
.b-6x6 { width: 147px; height: 147px; }
.b-6x7 { width: 147px; height: 171px; }
.b-6x8 { width: 147px; height: 195px; }
.b-6x9 { width: 147px; height: 219px; }
.b-6x10 { width: 147px; height: 243px; }
.b-6x11 { width: 147px; height: 267px; }
.b-6x12 { width: 147px; height: 291px; }

.b-7x2 { width: 171px; height: 51px; }
.b-7x3 { width: 171px; height: 75px; }
.b-7x4 { width: 171px; height: 99px; }
.b-7x5 { width: 171px; height: 123px; }
.b-7x6 { width: 171px; height: 147px; }
.b-7x7 { width: 171px; height: 171px; }
.b-7x8 { width: 171px; height: 195px; }
.b-7x9 { width: 171px; height: 219px; }
.b-7x10 { width: 171px; height: 243px; }
.b-7x11 { width: 171px; height: 267px; }
.b-7x12 { width: 171px; height: 291px; }

.b-8x2 { width: 195px; height: 51px; }
.b-8x3 { width: 195px; height: 75px; }
.b-8x4 { width: 195px; height: 99px; }
.b-8x5 { width: 195px; height: 123px; }
.b-8x6 { width: 195px; height: 147px; }
.b-8x7 { width: 195px; height: 171px; }
.b-8x8 { width: 195px; height: 195px; }
.b-8x9 { width: 195px; height: 219px; }
.b-8x10 { width: 195px; height: 243px; }
.b-8x11 { width: 195px; height: 267px; }
.b-8x12 { width: 195px; height: 291px; }

.lego-background {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

.lego-background > header.lego-border {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.floating-bricks {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
}

.floating-bricks .brick {
    position: absolute;
    pointer-events: none;
    animation: float1 6s ease-in-out infinite;
}

.floating-bricks .brick:nth-child(1) { animation-delay: 0s; }
.floating-bricks .brick:nth-child(2) { animation-delay: -1s; }
.floating-bricks .brick:nth-child(3) { animation-delay: -2s; }
.floating-bricks .brick:nth-child(4) { animation-delay: -3s; }
.floating-bricks .brick:nth-child(5) { animation-delay: -4s; }
.floating-bricks .brick:nth-child(6) { animation-delay: -5s; }
.floating-bricks .brick:nth-child(7) { animation-delay: -6s; }
.floating-bricks .brick:nth-child(8) { animation-delay: -7s; }

@keyframes float1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(4deg); }
}

.lego-border {
    position: relative;
    background: rgba(26, 26, 46, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    pointer-events: auto;
}

.header-content {
    padding: 30px 20px 40px;
    text-align: center;
    position: relative;
}

.header-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    font-family: 'Anton', Impact, sans-serif;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 10px;
    text-shadow: 
        4px 4px 0 #c62828,
        -2px -2px 0 #1565c0;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.tagline {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    font-weight: 500;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.sort-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-control label {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
}

.sort-control select {
    padding: 10px 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.sort-control select:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
}

.sort-control select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
}

.sort-control select option {
    background: #1a1a2e;
    color: #fff;
}

.skeleton-card {
    background: #c8e6c9;
    overflow: hidden;
    box-shadow: 0 8px 0 #a5d6a7, 0 10px 20px rgba(0,0,0,0.3);
}

.skeleton-thumb {
    aspect-ratio: 16/10;
    background: linear-gradient(90deg, #c8e6c9 25%, #a5d6a7 50%, #c8e6c9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-info {
    padding: 20px;
    background: #a5d6a7;
}

.skeleton-title {
    height: 24px;
    width: 70%;
    background: linear-gradient(90deg, #81c784 25%, #66bb6a 50%, #81c784 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    margin-bottom: 12px;
}

.skeleton-desc {
    height: 16px;
    width: 90%;
    background: linear-gradient(90deg, #81c784 25%, #66bb6a 50%, #81c784 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

.video-card {
    background: #c8e6c9;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        0 8px 0 #a5d6a7,
        0 12px 20px rgba(0,0,0,0.4);
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
    transform-style: preserve-3d;
}

.video-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-image: 
        radial-gradient(circle, #b9f6ca 8px, transparent 9px),
        radial-gradient(circle, #b9f6ca 8px, transparent 9px),
        radial-gradient(circle, #b9f6ca 8px, transparent 9px),
        radial-gradient(circle, #b9f6ca 8px, transparent 9px),
        radial-gradient(circle, #b9f6ca 8px, transparent 9px),
        radial-gradient(circle, #b9f6ca 8px, transparent 9px),
        radial-gradient(circle, #b9f6ca 8px, transparent 9px),
        radial-gradient(circle, #b9f6ca 8px, transparent 9px),
        radial-gradient(circle, #b9f6ca 8px, transparent 9px);
    background-size: 64px 20px;
    background-position: 0 0, 32px 0;
    background-repeat: repeat-x;
    z-index: 10;
}

.video-card:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 18px 0 #a5d6a7,
        0 25px 40px rgba(0,0,0,0.5);
}

.video-card:nth-child(1) { animation-delay: 0.05s; }
.video-card:nth-child(2) { animation-delay: 0.1s; }
.video-card:nth-child(3) { animation-delay: 0.15s; }
.video-card:nth-child(4) { animation-delay: 0.2s; }
.video-card:nth-child(5) { animation-delay: 0.25s; }
.video-card:nth-child(6) { animation-delay: 0.3s; }
.video-card:nth-child(7) { animation-delay: 0.35s; }
.video-card:nth-child(8) { animation-delay: 0.4s; }
.video-card:nth-child(9) { animation-delay: 0.45s; }
.video-card:nth-child(10) { animation-delay: 0.5s; }
.video-card:nth-child(n+11) { animation-delay: 0.55s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-card:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 18px 0 #1b5e20,
        0 25px 40px rgba(0,0,0,0.5);
}
}

.video-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.1);
}

.video-card:hover::before {
    opacity: 1;
}

.video-thumb {
    aspect-ratio: 16/10;
    background: #1a1a2e;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 5;
    font-family: 'Anton', Impact, sans-serif;
}

.video-thumb video,
.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.video-card:hover .video-thumb video,
.video-card:hover .video-thumb img {
    transform: scale(1.1);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 80px;
    height: 80px;
    background: #ffcc80;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 6px 0 #ffb74d;
    z-index: 2;
}

.play-button::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: #ffcc80;
    box-shadow: 0 4px 0 #ffb74d;
}

.play-button svg {
    width: 36px;
    height: 36px;
    color: #fff;
    margin-left: 6px;
}

.video-card:hover .play-button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.video-info {
    padding: 20px;
    background: #a5d6a7;
    color: #ff5252;
}

.video-info h2 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 8px;
    font-family: 'Anton', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.desc {
    font-size: 0.85rem;
    color: #2e7d32;
    line-height: 1.5;
}

.empty {
    text-align: center;
    padding: 100px 20px;
}

.empty-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.empty-icon .brick {
    box-shadow: 0 6px 0 #616161;
}

.empty p {
    color: rgba(255,255,255,0.8);
    font-size: 1.2rem;
    font-family: 'Anton', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.lego-footer {
    position: relative;
    padding: 30px 20px 40px;
    background: rgba(26, 26, 46, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 3px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    z-index: 100;
    pointer-events: auto;
}

.footer-bricks {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.footer-bricks .peg {
    width: 16px;
    height: 16px;
    background: #ff8a80;
    box-shadow: inset 0 -2px 0 #ff5252;
}

.footer-bricks .peg:nth-child(odd) { background: #82b1ff; box-shadow: inset 0 -2px 0 #448aff; }
.footer-bricks .peg:nth-child(3n) { background: #ffff8d; box-shadow: inset 0 -2px 0 #ffd740; }
.footer-bricks .peg:nth-child(4n) { background: #b9f6ca; box-shadow: inset 0 -2px 0 #69f0ae; }

.lego-footer p {
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    background: #000;
    max-width: 1000px;
    width: 100%;
    overflow: hidden;
    box-shadow: 
        0 25px 80px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.1);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal.active .modal-box {
    transform: scale(1) translateY(0);
}

.modal-box video {
    width: 100%;
    display: block;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.modal-close svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.modal-close:hover {
    background: var(--primary);
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    #floatingBricks,
    #floatingBricks * {
        display: none !important;
    }

    .header-content h1 {
        font-size: 2rem;
    }

    .video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .video-card:hover {
        transform: translateY(-5px);
    }

    .container {
        padding: 30px 15px;
    }
}

@media (max-width: 480px) {
    .header-content {
        padding: 30px 15px 40px;
    }

    .header-content h1 {
        font-size: 1.75rem;
    }

    .tagline {
        font-size: 1rem;
    }

    .video-info {
        padding: 15px;
    }

    .video-info h2 {
        font-size: 1rem;
    }
}