/* text */
h1{font-size: 2.75rem!important; line-height: 3.5rem!important; font-weight: 500!important; padding: 0;margin: 0}
h2{font-size: 2rem!important; line-height: 2.5rem!important; font-weight: 700!important;padding: 0;margin: 0}
h3{font-size: 1.75rem!important; line-height: 2.25rem!important; font-weight: 700!important;padding: 0;margin: 0}
h4{font-size: 1.5rem!important; line-height: 2rem!important; font-weight: 700!important;padding: 0;margin: 0}
h5{font-size: 1.25rem!important; line-height: 1.75rem!important; font-weight: 500!important;padding: 0;margin: 0}
h6{font-size: 1.125rem!important;line-height: 1.5rem!important;font-weight: 500!important;padding: 0;margin: 0}
.subtitle{font-family: 'Orbitron', sans-serif;font-size: 1.2em;color: #ba55d3;}
.snowflow-off{
    width: 36px;
    height: 36px;
}
.roulette-info-header{
    display: none;
}

/* buttons */
.button-primary {
    background-color: var(--button-background-primary-color);
    border: none;
    padding: 15px 30px;
    color: var(--button-text-primary-color);
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: var(--button-shadow-primary-color);
    transition: background-color 0.3s ease, transform 0.2s;
}
.button-primary:hover {
    background-color: var(--button-background-primary-color-hover);
    transform: scale(0.9);
}
.button-secondary {
  font-family: 'Orbitron', sans-serif;
  padding: 12px 24px;
  font-size: 1em;
  color:var(--button-text-secondary-color);
  background-color:var(--button-background-secondary-color);
  border: var(--button-background-secondary-color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--button-shadow-secondary-color);
  backdrop-filter: blur(4px);
}
.button-secondary:hover {
  background-color: var(--button-background-secondary-color-hover);
  box-shadow: var(--button-shadow-secondary-color-hover);
  color: var(--button-text-secondary-color-hover);
}
.button-secondary:active {
  transform: scale(0.98);
  box-shadow: var(--button-shadow-secondary-color-active);
}
/* buttons */

/* icons */
.icon-play-icon{
    width: 36px;
    height: 36px;
    fill: var(--panel-section-fill);
}
/* icons */

/* header */
.icons_svg{
    background-image: url("/static/IMG_8268.svg");
    width: 15px;
    height: 15px;
}

/* header */
header {
    text-align: center;
    padding:40px 0;
}
.logo-text {
    font-family: 'Rampart One', cursive;
    font-size: 4em;
    font-weight: 700;
    margin: 0;
    text-shadow: var(--logo-text-shadow-color);

    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--logo-text-fill-color);
}
.anicard-logo__text {
    position: relative;
    text-transform: uppercase;

    background: linear-gradient(
        120deg,
        #ffffff 0%,
        #ffe9a3 30%,
        #ff6b6b 65%,
        #ffe9a3 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

}
/*.anicard-logo__text::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 10%;*/
/*    right: 10%;*/
/*    bottom: -6px;*/
/*    height: 8px;*/
/*    background: radial-gradient(*/
/*        ellipse at center,*/
/*        rgba(255, 255, 255, 0.45),*/
/*        transparent 70%*/
/*    );*/
/*    opacity: 0.7;*/
/*    pointer-events: none;*/
/*}*/

@keyframes logo-glow {
    0% {
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.7),
            0 0 12px rgba(255, 215, 128, 0.5),
            0 0 20px rgba(255, 90, 90, 0.35);
    }
    100% {
        text-shadow:
            0 0 10px rgba(255, 255, 255, 1),
            0 0 20px rgba(255, 215, 128, 0.8),
            0 0 32px rgba(255, 90, 90, 0.6);
    }
}
.anicard-logo {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 18px 26px;
    z-index: 10;
}
.christmas-lights {
    position: absolute;
    bottom: 4px;
    left: -8%;
    width: 116%;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6px; /* плотность лампочек */
    pointer-events: none;
    z-index: 15;
}
.christmas-lights::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        #1f3a2f,
        #1b2c24,
        #1f3a2f
    );
    border-radius: 999px;
    z-index: 1;
    opacity: 0.9;
}
.light {
    --bulb-size: 11px;

    position: relative;
    width: var(--bulb-size);
    height: var(--bulb-size);
    border-radius: 50%;
    z-index: 2;
    margin-top: 4px;
    animation: blink 1.4s infinite alternate;
}
.light::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 6px;
    height: 5px;
    transform: translateX(-50%);
    background: #555;
    border-radius: 2px 2px 0 0;
}
.light::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: 2px;
    height: 4px;
    transform: translateX(-50%);
    background: #1c2b24;
}
.light.red {
    background-color: #ff0000;
    box-shadow: 0 0 10px #ff0000, 0 0 18px #ff0000;
    animation-delay: 0.05s;
}
.light.blue {
    background-color: #0088ff;
    box-shadow: 0 0 10px #0088ff, 0 0 18px #0088ff;
    animation-delay: 0.2s;
}
.light.yellow {
    background-color: #ffdd00;
    box-shadow: 0 0 10px #ffdd00, 0 0 18px #ffdd00;
    animation-delay: 0.35s;
}
.light.green {
    background-color: #00ff6a;
    box-shadow: 0 0 10px #00ff6a, 0 0 18px #00ff6a;
    animation-delay: 0.5s;
}
.light.purple {
    background-color: #a020f0;
    box-shadow: 0 0 10px #a020f0, 0 0 18px #a020f0;
    animation-delay: 0.65s;
}
@keyframes blink {
    0% {
        opacity: 0.4;
        transform: scale(0.9) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1.1) translateY(1px);
    }
}


/* header */


/* footer */

.soft-panel {
    position: fixed;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    max-width: 750px;
    display: flex;
    gap: 12px;
    justify-content: space-around;
    padding: 12px 24px;
    background: rgba(20, 20, 20, 0.9);
    border-radius: 40px;
    box-shadow: var(--soft-panel-shadow-color);
    font-family: 'Orbitron', sans-serif;
    z-index: 100;
    overflow: visible;
}

.panel-section {
    fill: var(--panel-section-fill);
    color: var(--panel-section-color);
    font-size: 1.1em;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 6px;
    transition: color 0.3s, text-shadow 0.3s, transform 0.2s;
    cursor: pointer;
    text-decoration: none !important;
    background: transparent;
    border: none;
}

.panel-section:hover {
    transform: translateY(-1px);
}

.panel-section.active {
    color: var(--panel-section-сolor-active);
    text-shadow: var(--panel-section-shadow-active);
}

.panel-more {
    position: relative;
}

.more-menu {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 18px);
    transform: translateX(-50%) translateY(10px);

    display: flex;
    gap: 12px;
    justify-content: space-around;
    align-items: center;

    padding: 12px 24px;
    border-radius: 40px;

    background: rgba(20, 20, 20, 0.9);
    box-shadow: var(--soft-panel-shadow-color);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: all 0.25s ease;

    width: max-content;
    min-width: 60%;
}

.more-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.more-menu__item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 6px;

    color: var(--panel-section-color);
    text-decoration: none !important;

    font-size: 1.1em;

    transition: color 0.3s, text-shadow 0.3s, transform 0.2s;

    padding: 6px 10px;
    border-radius: 16px;
}

.more-menu__item:hover {
    color: var(--panel-section-сolor-active);
    text-shadow: var(--panel-section-shadow-active);
    transform: translateY(-1px);
}

.more-menu__item i {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}

@media (max-width: 500px) {
    .panel-section span {
        display: none;
    }

    .panel-section {
        justify-content: center;
        gap: 0;
        flex-direction: row;
    }

    .panel-section i {
        width: 34px;
        height: 34px;
    }

    .more-menu {
        min-width: 190px;
        left: auto;
        right: 0;
        transform: translateY(8px);
    }

    .more-menu.open {
        transform: translateY(0);
    }
}
/* footer */

    /* main container */
    body{
        margin: 0;
        min-height: 100vh;
        font-family: 'Cinzel', serif;
        background: var(--body-background-color);
        color: var(--body-text-color);
        overflow-x: hidden;
        position: relative;
    }
    .akame-img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30vw;
        height: auto;
        object-fit: contain;
        z-index: 0;
        opacity: 0.85;
        pointer-events: none;
    }
    .mainContainer {
        display: flex;
        flex-direction: column;
        padding: 0 20px calc(7vh + 100px) 20px;
    }
    .containerAdaptive{
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;

        margin: 0 60px;
    }
    /* main container */

    /* loader */
    .loader {
        width: 64px;
        height: 64px;
        border: var(--loader-border-color);
        border-top:var(--loader-border-top-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        box-shadow:var(--loader-shadow-color) ;
        margin-top: 25px;
    }
    .loader.hidden{
        display: none;
    }
    .loader_text {
        width: 10px;
        height: 10px;
        border: var(--loader-border-color);
        border-top:var(--loader-border-top-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        box-shadow:var(--loader-shadow-color) ;
        margin-left: 10px;
        margin-top: 0px;
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .loader-container {
        width: 150px;
        height: 150px;
        position: relative;
        margin: 0 auto;
        animation: rotate 5s linear infinite;
    }
    .akame-runner {
        width: 150px; /* ширина одного кадра */
        height: 300px;
        background: url('/static/img/Akame-chibi-removebg-preview.png') no-repeat;
        background-size: 490px 300px; /* 8 кадров по 96px */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-49%, -49%);
        animation: run-cycle 0.4s steps(3) infinite;
    }
    @keyframes run-cycle {
        from { background-position: -0 0; }
        to { background-position: -540px 0; }
    }
    /* loader */

    /* snackbar */
    .snackbar{
        visibility: hidden; /* Hidden by default. Visible on click */
        min-width: 250px; /* Set a default minimum width */
        transform: translateX(-50%); /* Divide value of min-width by 2 */
        background: #EC6A71;
        color: #FFF;
        text-align: center; /* Centered text */
        border-radius: 8px; /* Rounded borders */
        padding: 12px 16px; /* Padding */
        position: fixed; /* Sit on top of the screen */
        z-index: 1500; /* Add a z-index if needed */
        left: 50%; /* Center the snackbar */
        top: 30px; /* 30px from the bottom */
        box-shadow: 0 8px 24px 0 rgba(27, 49, 77, 0.35);
    }
    .snackbar.snackbar-warning {
        background: #ffb703;
        color: #000;
    }
    .snackbar.snackbar-success {
        background: #4caf50;
        color: #fff;
    }
    .snackbar.show{
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
        However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    /* snackbar */


    /* Animations to fade the snackbar in and out */
    @-webkit-keyframes fadein {
        from {top: 0; opacity: 0;}
        to {top: 30px; opacity: 1;}
    }
    @keyframes fadein {
        from {top: 0; opacity: 0;}
        to {top: 30px; opacity: 1;}
    }
    @-webkit-keyframes fadeout {
        from {top: 30px; opacity: 1;}
        to {top: 0; opacity: 0;}
    }
    @keyframes fadeout {
        from {top: 30px; opacity: 1;}
        to {top: 0; opacity: 0;}
    }
    /* snackbar */

    /* modals */
    .swal2-popup {
        background-color: var(--swal-background-color);
        border: var(--swal-border-color);
        box-shadow: var(--swal-box-shadow);
        color: var(--swal-text-color);
        border-radius: 16px;
        padding: 2rem;
        font-family: 'Montserrat', sans-serif;
    }
    .swal2-title {
        color: #FFFFFF;
        font-size: 1.8rem;
        text-shadow: 0 0 8px #FFFFFF;
    }
    .swal2-html-container {
        color: #ccc;
        font-size: 1rem;
    }
    .swal2-confirm,
    .swal2-cancel {
        background-color: var(--swal-bg) !important;
        border: none;
        border-radius: 12px;
        padding: 0.6rem 1.4rem;
        font-weight: 600;
        box-shadow: 0 0 20px var(--swal-glow);
        transition: all 0.3s ease;
    }
    .swal2-confirm:hover,
    .swal2-cancel:hover {
        background-color: var(--swal-bg) !important;
        box-shadow: 0 0 20px var(--swal-glow);
    }
    /* modals */
    @media (max-width: 1000px) {
        .containerAdaptive {
            margin: 0 30px;
        }
    }
    @media (max-width: 700px) {
        .logo-text{
            font-size: 3em;
        }
        .subtitle{
            font-size: 0.85em;
        }
        .akame-img{
            width: 50vw;
        }
        .panel-section span{
            display: none;
        }

    }
    @media (max-width: 500px) {
        .containerAdaptive{
            margin: 0;
        }

        .soft-panel {
            bottom: 0;
            left: 0;
            width: calc(100% - 24px);
            max-width: unset;
            border-radius: 0;
            transform: unset;
            padding: 12px;
            justify-content: space-evenly;
        }
        .loader.mobile{
            width: 24px;
            height: 24px;
        }
    }
    .loader.hidden{
        display: none;
    }


    .snow-area {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none;
        z-index: 999;
        overflow: hidden;
    }
    .snowflake {
        position: absolute;
        color: white;
        opacity: 0.85;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        pointer-events: none;

        top: -50px;

        /* падение + обычное покачивание */
        animation-name: fall, sway;
        animation-duration: var(--fall-duration, 10s), var(--sway-duration, 4s);
        animation-timing-function: linear, ease-in-out;
        animation-iteration-count: 1, infinite;

        /* лёгкий хинт браузеру */
        will-change: top, transform;
    }
    .snowflake.snowflake--far {
        opacity: 0.6;
        animation-name: fall, sway-far;
    }
    /* падение по Y */
    @keyframes fall {
        0% {
            top: -50px;
        }
        100% {
            top: 110vh;
        }
    }
    /* покачивание по X */
    @keyframes sway {
        0% {
            transform: translateX(0px);
        }
        50% {
            transform: translateX(40px);
        }
        100% {
            transform: translateX(0px);
        }
    }
    @keyframes sway-far {
        0% {
            transform: translateX(0px);
        }
        50% {
            transform: translateX(-80px);
        }
        100% {
            transform: translateX(0px);
        }
    }


    /** tree loaders **/

    @keyframes treeStroke {
        0% {
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dashoffset: 1000;
        }
        100% {
            stroke-dashoffset: 0;
        }
    }
    .tree-loader {
        margin-top: 10px;
        width: 160px;
        height: 160px;
        display: grid;
        place-items: center;
    }
    .tree-loader__svg {
        width: 100%;
        height: 100%;
        overflow: visible;

        fill: none;
        stroke: rgba(40, 200, 120, 0.95);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter: drop-shadow(0 0 10px rgba(40, 200, 120, 0.35)) drop-shadow(0 0 18px rgba(0, 190, 255, 0.10));
    }
    .tree-loader__p {
        stroke-dasharray: 70;
        stroke-dashoffset: 700;
        animation: treeStroke 14s linear infinite;
    }
    .tree-loader__c {
        stroke: rgba(90, 255, 170, 0.95);
        stroke-dasharray: 13;
        stroke-dashoffset: 1000;
        animation: treeStroke 70s linear infinite;
    }
    .tree-loader__c1 { animation-delay: 0s; }
    .tree-loader__c2 { animation-delay: 0.05s; }
    .tree-loader__c3 { animation-delay: 0.25s; }
    .tree-loader__c4 { animation-delay: 0.30s; }
    .tree-loader__c5 { animation-delay: 0.20s; }
    .tree-loader__c6 { animation-delay: 0.10s; }
    .tree-loader__c7 { animation-delay: 0.15s; }
    .tree-loader__star {
        stroke: rgba(255, 215, 90, 0.98);
        stroke-width: 2.4;
        fill: none;

        stroke-dasharray: 48;
        stroke-dashoffset: 1000;

        /* скорость = как у ёлки */
        animation: treeStroke 14s linear infinite;

        /* поднимаем на самую макушку */
        transform: translate(0px, -8px);
        transform-box: fill-box;
        transform-origin: center;

        filter: drop-shadow(0 0 8px rgba(255, 215, 90, 0.55)) drop-shadow(0 0 16px rgba(255, 180, 60, 0.25));
    }
    .tree-loader__star { paint-order: stroke; }
    @media (prefers-reduced-motion: reduce) {
        .tree-loader__p,
        .tree-loader__c,
        .tree-loader__star {
            animation: none;
            stroke-dashoffset: 0;
        }
    }
    @media (max-width: 768px) {
        .tree-loader {
            --tree-size: 110px;
        }
    }
    @media (max-width: 420px) {
        .tree-loader {
            --tree-size: 92px;
        }
    }
    @media (max-width: 420px) {
        .tree-loader__svg {
            stroke-width: 1.8;
        }

        .tree-loader__star {
            stroke-width: 2.0;
        }
    }
}