body {
    margin: 0;
    font-family: 'Georgia', serif;
    background: linear-gradient(135deg, #1a1410, #2a1f1a, #3a2a22);
    color: #f5e6c8;
    text-align: center;
    overflow-x: hidden;
}

/* delikatne złote światło */
.background-glow {
    position: fixed;
    top: -150px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,215,0,0.25), transparent 70%);
    filter: blur(70px);
    animation: floatGlow 10s infinite alternate ease-in-out;
    z-index: -1;
}

@keyframes floatGlow {
    from { transform: translate(0,0); }
    to { transform: translate(250px, 200px); }
}

header {
    padding: 50px 20px 10px;
}

header h1 {
    font-size: 3em;
    margin: 0;
    color: #ffd700;
    text-shadow: 0 0 25px rgba(255,215,0,0.5);
}

header p {
    opacity: 0.85;
    margin-top: 10px;
    font-size: 1.1em;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 45px;
    padding: 40px 15px 80px;
}

/* 🎬 karta filmu */
.video-card {
    width: 92%;
    max-width: 900px;
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.video-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 60px rgba(0,0,0,0.6);
}

/* 🎥 KLUCZOWE: responsywne wideo */
video {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    background: black;
    outline: none;
}

/* podpis */
.caption {
    margin-top: 10px;
    font-style: italic;
    color: #e8d7b0;
    font-size: 0.95em;
}

/* footer */
footer {
    padding: 40px;
    opacity: 0.75;
    font-size: 0.9em;
}

/* 📱 mobile tuning */
@media (max-width: 600px) {
    header h1 {
        font-size: 2.2em;
    }

    .video-card {
        width: 95%;
        padding: 10px;
    }
}
video.rotate90 {
    transform: rotate(-90deg);
    transform-origin: center;
    max-height: 40vh;
    height: 700px;!important
    width:700px;
}

.video-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* normalny video */
.video-wrapper video {
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
}

/* po obrocie */
.video-wrapper.rotate90 {
    transform: rotate(-90deg);
    transform-origin: center;
    transition: transform 0.4s ease;
}

/* KLUCZ: dajemy miejsce na pion po obrocie */
.video-wrapper.rotate90 video {
    width: 270vh;   /* ważne: wysokość ekranu steruje szerokością po obrocie */
    max-width: none;
}

#wrap1 {
width:100%;
}