:root {
    --body-background-color: radial-gradient(circle at center, #330000 0%, #0a0000 70%, #000000 100%);
    --body-text-color: #ffdddd;

    --button-background-primary-color: #ff1a1a;
    --button-background-primary-color-hover: #ff3300;
    --button-text-primary-color: #fff2f2;
    --button-shadow-primary-color: 0 0 10px rgba(255, 51, 0, 0.6);

    --button-background-secondary-color: rgba(50, 0, 0, 0.8);
    --button-background-secondary-color-border: 1px solid rgba(255, 80, 80, 0.4);
    --button-text-secondary-color: #ffb3b3;
    --button-shadow-secondary-color: 0 0 6px rgba(255, 80, 80, 0.3);
    --button-background-secondary-color-hover: rgba(70, 0, 0, 0.9);
    --button-text-secondary-color-hover: #ffe6e6;
    --button-shadow-secondary-color-hover: 0 0 12px rgba(255, 80, 80, 0.5);
    --button-shadow-secondary-color-active: 0 0 14px rgba(255, 100, 100, 0.7) inset;

    --logo-text-shadow-color: 0 0 14px rgba(255, 20, 20, 0.85),
    0 0 28px rgba(255, 50, 0, 0.75),
    0 0 40px rgba(255, 80, 0, 0.65);
    --logo-text-fill-color: black;


    --soft-panel-shadow-color: 7px 0 14px rgba(255, 40, 40, 0.3),
    -7px 0 14px rgba(255, 40, 40, 0.3),
    0 0 14px rgba(255, 40, 40, 0.15);
    --panel-section-fill: #ff9999;
    --panel-section-color: #ff9999;
    --panel-section-сolor-active: #ffffff;
    --panel-section-shadow-active: 0 0 12px rgba(255, 60, 60, 0.4),
    0 0 18px rgba(255, 60, 60, 0.3);

    --loader-border-color: 6px solid rgba(255, 0, 0, 0.1);
    --loader-border-top-color: 6px solid #ff3300;
    --loader-shadow-color: 0 0 10px #ff3300,
    0 0 20px #ff3300,
    0 0 30px #ff3300;

    --swal-background-color: #1a0000;
    --swal-border-color: 2px solid #ff4d4d;
    --swal-box-shadow: 0 0 20px #ff4d4d;
    --swal-text-color: #fff0f0;


    --select2-text-color: #ffbdbd;
    --select2-highlight-bg: #ff3300;
    --select2-highlight-text: #ffffff;
    --select2-border-top-color: #ff6666;
    --select2-bg: rgba(20, 0, 0, 0.9);
    --select2-border-color: #ff3300;
    --select2-shadow-1: 0 0 12px rgba(255, 51, 0, 0.3);
    --select2-shadow-2: 0 0 30px rgba(255, 51, 0, 0.2);
    --select2-dropdown-bg: rgba(15, 0, 0, 0.95);
    --select2-dropdown-shadow-1: 0 0 20px rgba(255, 51, 0, 0.25);
    --select2-dropdown-shadow-2: 0 0 40px rgba(255, 51, 0, 0.15);
    --select2-search-bg: #220000;
    --select2-search-border: #ff3300;
    --select2-search-shadow: 0 0 12px rgba(255, 51, 0, 0.25),
    inset 0 0 6px rgba(255, 51, 0, 0.15);
    --select2-clear-color: #ffeaea;
    --select2-clear-bg: #ff9999;
    --select2-scrollbar-track: rgba(30, 0, 0, 0.85);
    --select2-scrollbar-thumb: linear-gradient(180deg, #ff3300, #ff6600);
    --select2-scrollbar-thumb-border: 2px solid rgba(40, 0, 0, 1);
    --select2-scrollbar-thumb-shadow: 0 0 8px rgba(255, 51, 0, 0.6);
    --select2-scrollbar-thumb-hover: linear-gradient(180deg, #ff4400, #ff7744);
    --select2-scrollbar-thumb-hover-shadow: 0 0 12px rgba(255, 80, 0, 0.9);
    --select2-scrollbar-color-firefox: #ff3300 rgba(30, 0, 0, 0.85);
    --select2-disabled-bg: #330000;
    --select2-disabled-border: #ff6666;
    --select2-disabled-text: #ff9999;
    --select2-disabled-shadow: 0 0 8px #ff6666;
    --select2-disabled-choice-bg: #440000;
    --select2-disabled-choice-border: #ff6666;
    --select2-disabled-choice-text: #ffc2c2;
    --select2-disabled-choice-shadow: 0 0 4px #ff6666;
    --accent-border-soft: 1px solid rgba(255, 60, 0, 0.3);
    --accent-shadow-soft: 0 0 8px rgba(255, 60, 0, 0.4);

    /*!* Happy New Year*!*/
    /*--body-background-color: radial-gradient(*/
    /*    circle at center,*/
    /*    #001424 0%,*/
    /*    #000a14 55%,*/
    /*    #00060c 100%*/
    /*);*/
    /*--body-text-color: #dff6ff; !* ледяной голубой *!*/

    /*!* ======= КНОПКИ — ОСНОВНЫЕ ======= *!*/
    /*--button-background-primary-color: #0dbbff; !* яркий неон *!*/
    /*--button-background-primary-color-hover: #19caff;*/
    /*--button-text-primary-color: #e6faff;*/
    /*--button-shadow-primary-color: 0 0 16px rgba(0, 180, 255, 0.7);*/

    /*!* ======= КНОПКИ — ВТОРИЧНЫЕ ======= *!*/
    /*--button-background-secondary-color: rgba(0, 40, 70, 0.55);*/
    /*--button-background-secondary-color-border: 1px solid rgba(90, 210, 255, 0.35);*/
    /*--button-text-secondary-color: #9dd8f9;*/
    /*--button-shadow-secondary-color: 0 0 12px rgba(0, 170, 255, 0.25);*/

    /*--button-background-secondary-color-hover: rgba(0, 55, 95, 0.75);*/
    /*--button-text-secondary-color-hover: #e8faff;*/
    /*--button-shadow-secondary-color-hover: 0 0 18px rgba(0, 190, 255, 0.45);*/

    /*--button-shadow-secondary-color-active: inset 0 0 14px rgba(0, 180, 255, 0.6);*/

    /*!* ======= ЛОГОТИП ======= *!*/
    /*--logo-text-shadow-color:*/
    /*    0 0 18px rgba(100, 200, 255, 0.9),*/
    /*    0 0 34px rgba(70, 170, 255, 0.7),*/
    /*    0 0 60px rgba(50, 150, 255, 0.6);*/
    /*--logo-text-fill-color: #bfeaff;*/

    /*!* ======= ПАНЕЛИ / КАРТОЧКИ ======= *!*/
    /*--soft-panel-shadow-color:*/
    /*    0 0 20px rgba(0, 150, 255, 0.25),*/
    /*    0 0 40px rgba(0, 150, 255, 0.15),*/
    /*    0 0 60px rgba(0, 150, 255, 0.1);*/

    /*--panel-section-fill: rgba(0, 40, 70, 0.6);*/
    /*--panel-section-color: #9cd9ff;*/
    /*--panel-section-сolor-active: #e6faff;*/
    /*--panel-section-shadow-active:*/
    /*    0 0 14px rgba(0, 190, 255, 0.4),*/
    /*    0 0 28px rgba(0, 190, 255, 0.3);*/

    /*!* ======= ЛОАДЕР ======= *!*/
    /*--loader-border-color: 6px solid rgba(0, 150, 255, 0.15);*/
    /*--loader-border-top-color: 6px solid #32d4ff;*/
    /*--loader-shadow-color:*/
    /*    0 0 12px #32d4ff,*/
    /*    0 0 24px #32d4ff,*/
    /*    0 0 36px #32d4ff;*/

    /*!* ======= SWEETALERT ======= *!*/
    /*--swal-background-color: rgba(0, 20, 40, 0.9);*/
    /*--swal-border-color: 2px solid #43caff;*/
    /*--swal-box-shadow: 0 0 30px #2ebeff;*/
    /*--swal-text-color: #dff7ff;*/

    /*!* ======= SELECT2 ======= *!*/
    /*--select2-text-color: #c8ecff;*/
    /*--select2-highlight-bg: #14c7ff;*/
    /*--select2-highlight-text: #ffffff;*/

    /*--select2-border-top-color: #2bb7ff;*/
    /*--select2-bg: rgba(0, 25, 45, 0.9);*/
    /*--select2-border-color: #14c7ff;*/
    /*--select2-shadow-1: 0 0 14px rgba(0, 180, 255, 0.35);*/
    /*--select2-shadow-2: 0 0 32px rgba(0, 180, 255, 0.25);*/

    /*--select2-dropdown-bg: rgba(0, 20, 40, 0.95);*/
    /*--select2-dropdown-shadow-1: 0 0 22px rgba(0, 180, 255, 0.3);*/
    /*--select2-dropdown-shadow-2: 0 0 44px rgba(0, 180, 255, 0.2);*/

    /*--select2-search-bg: #001622;*/
    /*--select2-search-border: #19caff;*/
    /*--select2-search-shadow:*/
    /*    0 0 14px rgba(0, 180, 255, 0.35),*/
    /*    inset 0 0 8px rgba(0, 150, 255, 0.2);*/

    /*--select2-clear-color: #e8faff;*/
    /*--select2-clear-bg: #66d7ff;*/

    /*--select2-scrollbar-track: rgba(0, 25, 45, 0.8);*/
    /*--select2-scrollbar-thumb: linear-gradient(180deg, #14c7ff, #32baff);*/
    /*--select2-scrollbar-thumb-border: 2px solid rgba(0, 15, 25, 1);*/
    /*--select2-scrollbar-thumb-shadow: 0 0 12px rgba(0, 155, 255, 0.7);*/

    /*--select2-scrollbar-thumb-hover: linear-gradient(180deg, #1fd4ff, #59e2ff);*/
    /*--select2-scrollbar-thumb-hover-shadow: 0 0 16px rgba(0, 200, 255, 0.9);*/

    /*--select2-scrollbar-color-firefox: #19caff rgba(0, 25, 45, 0.85);*/

    /*--select2-disabled-bg: #001a2d;*/
    /*--select2-disabled-border: #3fb9ff;*/
    /*--select2-disabled-text: #89c7e9;*/

    /*--select2-disabled-shadow: 0 0 10px #3fb9ff;*/

    /*--select2-disabled-choice-bg: #002033;*/
    /*--select2-disabled-choice-border: #3fb9ff;*/
    /*--select2-disabled-choice-text: #bfeaff;*/

    /*--accent-border-soft: 1px solid rgba(40, 190, 255, 0.4);*/
    /*--accent-shadow-soft: 0 0 10px rgba(0, 170, 255, 0.55);*/
}

.color{
    color: #ff6b26;
    text-shadow: 0 0 3px #ff6b26;
    font-weight: 500;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1em;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    border-bottom: 1px solid #ff6b26;

    /*color: #6fe7ff;*/
    /*text-shadow: 0 0 6px rgba(111, 231, 255, 0.75);*/
    /*border-bottom: 1px solid rgba(43, 183, 255, 0.8);*/
}
.button-primary{
    height: fit-content;
    padding: 6px 30px;
}

.styled-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    color: var(--select2-highlight-text);
    cursor: pointer;
    user-select: none;
    margin-top: 8px;
}
.styled-checkbox input {
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}
.checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid var(--select2-border-color);
    background-color: var(--select2-disabled-bg);
    box-shadow: var(--select2-shadow-1);
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}
.styled-checkbox:hover .checkmark {
    background-color: var(--select2-highlight-bg);
    box-shadow: var(--select2-shadow-2);
}
.styled-checkbox input:checked + .checkmark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid var(--select2-highlight-text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.label-text {
    font-weight: 400;
    color: var(--select2-clear-color);
    line-height: 1;
}


/** akame **/
.akame-img{
    display: none;
}
.akame_container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.akame_error{
    margin-top: 100px;
    max-height: 60vh;
    cursor: pointer;
}
.akame_error:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 100px #ff3300);
}

.akame_error.glow {
    animation: flash-glow 0.8s ease-out;
    filter: drop-shadow(0 0 50px #ff3300) brightness(1.3);
}
@keyframes flash-glow {
    0% {
        filter: drop-shadow(0 0 20px #ff3300) brightness(1);
    }
    40% {
        filter: drop-shadow(0 0 80px #ff3300) brightness(1.8);
    }
    70% {
        filter: drop-shadow(0 0 50px #ff3300) brightness(1.4);
    }
    100% {
        filter: drop-shadow(0 0 30px #ff3300) brightness(1.1);
    }
}
/** akame **/

/** Containers **/
.container_hidden{
    display:none;
}
.mainContainer{
    gap: 20px;
    justify-content: center;
}
.containerNeon{
    border: var(--accent-border-soft);
    box-shadow: var(--accent-shadow-soft);
    padding: 1em 1.5em;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);

    display: flex;
    flex-direction: row;
    min-width: 50%;
    max-width: 900px;
    justify-content: space-between;
}
.select_container{
    display: flex;
    flex-direction: column;

    gap: 30px;
    width: calc(50%);
}
.info_container{
    display: flex;
    flex-direction: column;

    gap: 12px;
    justify-content: center;
}
.container_column{
    width: calc(100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.container_column_text{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.divider {
    width: 1px;
    height: 100%;
    background-color: rgba(255, 60, 0, 0.3);
    box-shadow: 0 0 8px rgba(255, 60, 0, 0.4);

    /*background-color: rgba(0, 170, 255, 0.18);*/
    /*box-shadow: 0 0 10px rgba(0, 190, 255, 0.55);*/
    margin: 0 10px;
}
.card-wrapper {
    position: relative;
    width: 100%;
}
.container_card_animation {
    position: absolute;
    left: 50%;
    top: 50%;
}

.container_card_static{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
}
/** Containers **/

/** card **/
.card_preload{
    width: 230px;
    height: 320px;
    border: 2px solid rgba(255, 60, 60, 0.9); /* насыщенный красный */
    border-radius:  5%;
    box-shadow:
        0 0 10px rgba(255, 60, 60, 0.7),
        0 0 20px rgba(255, 0, 0, 0.5),
        inset 0 0 10px rgba(255, 60, 60, 0.4);

    /*background-color: rgba(0, 170, 255, 0.18);*/
    /*box-shadow: 0 0 10px rgba(0, 190, 255, 0.55);*/
    transition: box-shadow 0.3s ease;
}
.arc-rotate {
    transform: translate(-50%, -50%);
    animation: arcSpin 4s linear infinite;
}
@keyframes arcSpin {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.adamantine_video{
    width: 100%;
    height: 100%;
}

.card-appear {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.card-appear.show {
  opacity: 1;
  transform: scale(1);
}
.card-move {
    transition: left 0.6s ease, top 0.6s ease;
}
@keyframes popInCard {
    0% {
        opacity: 0;
        transform: scale(0.2) translate(-50%, -50%);
        box-shadow: 0 0 0px red;
    }
    50% {
        opacity: 1;
        transform: scale(1.1) translate(-50%, -50%);
        box-shadow: 0 0 20px 10px red;
    }
    100% {
        opacity: 1;
        transform: scale(1.0) translate(-50%, -50%);
        box-shadow: 0 0 10px 5px red;
    }
}
.card-pop {
    animation: popInCard 0.8s ease-out forwards;
    z-index: 10;
}
.card-move-smooth {
    transition: left 0.8s ease-in-out, top 0.8s ease-in-out, transform 0.5s ease;
    z-index: 1;
}

.image_container{
    width: 100%;
}
.card-with-crack{
    position: relative;
    display: inline-block;
}
.card-with-crack::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/img/crack_overlay.png') center/cover no-repeat;
    pointer-events: none;
    z-index: 10;
    opacity: 0.8;
}

.card_container_basic{
    width: 230px;
    height: 320px;
    border-radius: 8%;
}
.img_card_style{
    width: 100%;
    height: 100%;
    border-radius: 8%;
}
/** card **/

/** animation **/
.flip-container {
    position: absolute;
    width: 230px;
    height: 320px;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 0.6s ease, left 1s ease, top 1s ease, z-index 0.6s ease, opacity 0.6s ease;
    will-change: transform;
}
.flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
    border-radius: 8%;
}


.border-MYTHICAL {
    border: 3px solid #a020f0 !important;
    box-shadow: 0 0 25px rgba(160, 32, 240, 0.6) !important;
    --glow-color: rgba(160, 32, 240, 0.85);
}

.border-LEGENDARY {
    border: 3px solid #1e90ff !important;
    box-shadow: 0 0 25px rgba(30, 144, 255, 0.6) !important;
    --glow-color: rgba(30, 144, 255, 0.85);
}

.border-EPIC {
    border: 3px solid #32cd32 !important;
    box-shadow: 0 0 25px rgba(50, 205, 50, 0.6) !important;
    --glow-color: rgba(50, 205, 50, 0.85);
}

.border-RARE {
    border: 3px solid #ffd700 !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6) !important;
    --glow-color: rgba(255, 215, 0, 0.85);
}

.border-COMMON {
    border: 3px solid #dcdcdc !important;
    box-shadow: 0 0 20px rgba(220, 220, 220, 0.5) !important;
    --glow-color: rgba(255, 255, 255, 0.85);
}



@keyframes containerZoom {
  0%   { transform: translate(-50%, -50%) scale(1); }
  30%  { transform: translate(-50%, -50%) scale(1.3); }
  50%  { transform: translate(-50%, -50%) scale(1.3); }
  80%  { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.flip-container.flipping {
  animation: containerZoom 0.9s ease forwards;
}

@keyframes flipYOnly {
    0%   { transform: rotateY(0deg); }
    30%  { transform: rotateY(90deg); }
    50%  { transform: rotateY(180deg); }
    100% { transform: rotateY(180deg); }
}

.flip-container.flipping .flip-inner {
    animation: flipYOnly 0.9s ease forwards;
}

@keyframes flipYWithTilt {
  0%   { transform: rotateY(0deg) rotateX(0deg); }
  30%  { transform: rotateY(90deg) rotateX(15deg); }
  50%  { transform: rotateY(180deg) rotateX(0deg); }
  100% { transform: rotateY(180deg) rotateX(0deg); }
}
.flip-container.flipping .flip-inner {
  animation: flipYWithTilt 0.9s ease forwards;
}
.flip-container.flipped .flip-inner {
  transform: rotateY(180deg);
}
.flip-container.zoomed {
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 20;
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
}
.flip-front img, .flip-back img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8%;
}
.flip-back {
    transform: rotateY(180deg);
    background: #111;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 8%;
}
.hidden {
    opacity: 0;
    visibility: hidden;
}

.flip-container.zoomed-hype {
    z-index: 9999;
    transition: transform 0.6s ease, z-index 0.3s ease;
    box-shadow: 0 0 40px #ffcc00, 0 0 80px #ffaa00;
    transform-origin: center center;
}
.firework-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, #fff9c4, #ff9800, transparent);
    border-radius: 50%;
    pointer-events: none;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(var(--angle));
    opacity: 0.95;
    z-index: 1;
    filter:
        drop-shadow(0 0 4px #ffd700)
        drop-shadow(0 0 8px #ffa500);
}
.firework-spark.animate {
    animation: spark-burst-true 1.8s ease-out forwards;
}
@keyframes spark-burst-true {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle));
        opacity: 1;
    }
    60% {
        transform: translate(
            calc(-50% + var(--dx)),
            calc(-50% + var(--dy))
        ) rotate(var(--angle));
        opacity: 0.85;
    }
    100% {
        transform: translate(
            calc(-50% + var(--dx)),
            calc(-50% + var(--dy))
        ) rotate(var(--angle)) scaleY(0.4);
        opacity: 0;
        filter: blur(1.5px);
    }
}
@keyframes pulse-waiting {
  0%   { transform: translate(-50%, -50%) scale(1);     box-shadow: 0 0 12px rgba(255, 100, 50, 0.4); }
  50%  { transform: translate(-50%, -50%) scale(1.05);  box-shadow: 0 0 24px rgba(255, 150, 80, 0.7); }
  100% { transform: translate(-50%, -50%) scale(1);     box-shadow: 0 0 12px rgba(255, 100, 50, 0.4); }
}
.card-highlighted.pulse-waiting {
  animation: pulse-waiting 1.2s infinite ease-in-out;
  z-index: 2;
    border-radius: 8%;
}
.icon-header{
    width: 20px;
    height: 20px;
}
@media (max-width: 1000px) {
    .card_container_basic{
        width: 180px;
        height: 240px;
    }
    .flip-container{
        width: 160px;
        height: 240px;
    }
    .container_card_static{
        gap: 10px;
    }
}
@media (max-width: 500px) {
    body{
        overflow-x: hidden;
    }
    .card_container_basic{
        width: 130px;
        height: 180px;
    }
    .flip-container{
        width: 130px;
        height: 180px;
    }
    .container_card_static{
        gap: 20px;
    }
    .containerNeon{
        flex-direction: column;
    }
    .divider{
        width: 100%;
        height: 1px;
        margin: 10px 0;
    }
    .select_container{
        width: calc(100%);
        gap: 8px;
    }
    .info_container{
        gap: 8px;
    }
    .container_column_text{
        gap: 8px;
        flex-direction: row;
    }
    .color{
        margin-bottom: 0;
    }
    h6{
        font-size: 0.8rem!important;
        min-width: 50%;
    }
    .container_column{
        gap: 8px;
         flex-direction: row;
    }
    .mainContainer{
        gap: 12px;
    }
    .card-wrapper{
        margin-bottom: 140px;
    }
    .mobile-hide{
        display: none;
    }
    header{
        padding: 20px 0;
    }
    .containerNeon{
        min-width: 90%;
        padding: 0.8em 1em;
    }
    .select2{
        min-width: 50%;
    }
}