/* Strona główna (wyniesione z templates/index.tpl) */
    /*body{
        background-image: url('/img/bg_menn.png');
        background-size: cover;
    }
    */
    /* Scena na samym dole ekranu */
    #mikolaj-scene {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120px;
        pointer-events: none; /* nie blokuje klikania w stronę */
        z-index: 99999;
        overflow: visible;
    }

    /* Mikołaj na saniach (emoji), gładki przejazd po samym dole */
    .santa {
        position: absolute;
        bottom: 10px;
        right: -25%;
        font-size: 64px;
        line-height: 1;
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        animation: santa-slide 9s linear forwards;
        white-space: nowrap;
    }
    @media (max-width: 800px) {
        .santa  img{
            height:100px;

        }
    }

    /* Drobna animacja "kołysania" reniferów/sani */
    .santa .sled {
        display: inline-block;
        animation: sled-bob 1.2s ease-in-out infinite;
    }

    @keyframes santa-slide {
        0% { right: -25%; }
        100% { right: 105%; }
    }
    @keyframes sled-bob {
        0%,100% { transform: translateY(0); }
        50% { transform: translateY(-30px); }
    }

    /* Prezent, który wylatuje za Mikołajem i leci na środek ekranu */
    #gift {
        position: fixed;
        bottom: 20px;
        left: -120px; /* start tuż poza ekranem */
        font-size: 64px;
        opacity: 0;
        transition: top 5.2s ease-out, left 1.2s ease-out, bottom 1.2s ease-out, right 1.2s ease-out, transform 1.2s ease-out, opacity .3s ease-in;
        z-index: 100000;
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
        pointer-events: none;
        /* Utrzymujemy rotację jako zmienną, by płynnie ją animować i nie resetować do 0 nagle */
        --gift-rot: 25deg;
        transform-origin: 50% 50%;
        will-change: transform, top, left, opacity;
    }
    /* Krótkie podbicie jakby wyskoczył z prawej krawędzi */
    #gift.pop {
        animation: gift-pop 1.4s ease-out;
    }
    @keyframes gift-pop {
        0% { transform: translate(0, 0) scale(0.7) rotate(-100deg); opacity: .7; }
        60% { transform: translate(-8px, -10px) scale(1.4) rotate(10deg); opacity: 1; }
        100% { transform: translate(0, 0) scale(1) rotate(25deg); opacity: 1; }
    }
    #gift.flying {
        /* Klasa stanu lotu – same wizualne właściwości; pozycjonujemy inline w JS
           na dokładny punkt pizzy, aby najpierw doleciał w to miejsce */
        opacity: 1;
    }

    /* Szybki puls skali – używany 3x przed opadaniem */
    #gift.pulse3 {
        animation: gift-pulse .12s ease-in-out 3;
    }
    @keyframes gift-pulse {
        /* Zachowujemy bieżącą rotację poprzez zmienną --gift-rot,
           aby puls nie resetował obrotu i nie powodował "przeskoku" */
        0%   { transform: translate(-50%, -50%) rotate(var(--gift-rot, 25deg)) scale(1); }
        50%  { transform: translate(-50%, -50%) rotate(var(--gift-rot, 25deg)) scale(1.18); }
        100% { transform: translate(-50%, -50%) rotate(var(--gift-rot, 25deg)) scale(1); }
    }

    /* Prosty efekt wybuchu (flash + iskierki) */
    #explosion {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,200,0,0.8) 40%, rgba(255,120,0,0.6) 60%, rgba(255,0,0,0.0) 70%);
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
        pointer-events: none;
        z-index: 100001;
    }
    #explosion.boom {
        animation: boom .9s ease-out forwards;
    }
    @keyframes boom {
        0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
        30% { opacity: 1; }
        100% { transform: translate(-50%, -50%) scale(28); opacity: 0; }
    }

    /* Kolorowe fajerwerki – kontener i cząsteczki */
    #particles {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        pointer-events: none;
        z-index: 100001; /* nad flashem, pod pizzą */
    }
    .particle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        /* Domyślne wartości zmiennych, by uniknąć problemów, zanim JS je ustawi */
        --dx: 0px;
        --dy: 0px;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: particle-fly 1.9s ease-out forwards;
        filter: drop-shadow(0 0 4px currentColor);
        will-change: transform, opacity;
    }
    @keyframes particle-fly {
        0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        80%  { opacity: .9; }
        100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.6);
            opacity: 0; }
    }

    /* Pizza na środku, pojawia się po wybuchu */
    #pizza {
        position: fixed;
        top: 50%;
        left: 50%;
        /* Sterujemy skalą przez zmienną, żeby dało się jednocześnie rotować w animacji */
        --pizza-scale: 0.9;
        transform: translate(-50%, -50%) rotate(0deg) scale(var(--pizza-scale, 0.9));
        opacity: 0;
        z-index: 100002;
        pointer-events: none;
        max-width: min(70vw, 480px);
        max-height: 70vh;
        transition: opacity .5s ease, transform .5s ease;
    }
    #pizza.show {
        opacity: 1;
        --pizza-scale: 1;
    }
    /* Ciągły obrót pizzy */
    #pizza.spin {
        animation: pizza-rotate 8s linear infinite;
    }
    @keyframes pizza-rotate {
        0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(var(--pizza-scale, 1)); }
        100% { transform: translate(-50%, -50%) rotate(360deg) scale(var(--pizza-scale, 1)); }
    }
    /* Odjazd pizzy w prawo na sam koniec */
    #pizza.exit-right {
        animation: pizza-exit-right 0.7s linear forwards;
    }
    @keyframes pizza-exit-right {
        0% { left: 50%; opacity: 1; }
        100% { left: 120%; opacity: 0; }
    }

    /* Niewielki pasek śniegu przy ziemi dla klimatu (opcjonalnie) */
    #snow-ground {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 12px;
        background: linear-gradient(to top, rgba(255,255,255,.9), rgba(255,255,255,0));
    }

/* Sekcja "Pizza" - wyśrodkowanie od razu w CSS (zamiast verticalMiddle() z JS po załadowaniu), bez przesunięcia układu (CLS) */
.index_pizza > .container.vertical-middle{position:absolute;top:50%;left:0;width:100%;padding-top:0;padding-bottom:0;margin-top:0!important;-webkit-transform:translateY(-50%);transform:translateY(-50%)}