/* FLOATING */
.gb-bullet-floating-login {
    display: none;
    opacity: 0;
    position: fixed;
    top: 2%;
    left: 1%;
    z-index: 3;
    width: 12%;
    transition: opacity 0.4s ease;
}

.gb-bullet-floating-login.visible {
    display: block !important;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .gb-bullet-floating-login,
    .gb-bullet-floating-login.visible {
        display: none !important;
    }
}
/* END FLOATING */

/* FOOTER */
.gb-web-footer {
    border-top: 0.2vw #3e1302 solid;
    background: #1d0e07;
}

.gb-web-footer-content {
    border-top: 0.2vw #0c0a0c solid;
}
/* END FOOTER */

/* ANIMATION */
@keyframes glow {
  0% {
    filter: brightness(1.2) saturate(1.3)
            drop-shadow(0 0 6px #ff9900)  
            drop-shadow(0 0 12px #ff9900); 
  }
  50% {
    filter: brightness(1.5) saturate(1.6)
            drop-shadow(0 0 20px #ffae00) 
            drop-shadow(0 0 35px #ffae00);
  }
  100% {
    filter: brightness(1.2) saturate(1.3)
            drop-shadow(0 0 6px #ff9900)
            drop-shadow(0 0 12px #ff9900);
  }
}

@keyframes glow-purple {
    0% {
        filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 6px #ff9900) /* cahaya oranye terang */ drop-shadow(0 0 12px #ff00ff);
    }
    50% {
        filter: brightness(1.5) saturate(1.6) drop-shadow(0 0 20px #ffae00) drop-shadow(0 0 35px #d400ff);
    }
    100% {
        filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 6px #ff9900) drop-shadow(0 0 12px #ff00ff);
    }
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes metal-shine {
  0%   { left: -50%; opacity: 0; }
  50%  { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes metal-glow {
  0% {
    filter: brightness(1) saturate(1)
            drop-shadow(0 0 2px rgba(255, 215, 0, 0.3))
            drop-shadow(0 0 4px rgba(255, 215, 0, 0.2));
  }
  40% {
    filter: brightness(1.6) saturate(1.5)
            drop-shadow(0 0 6px rgba(255, 215, 0, 0.8))
            drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
  }
  60% {
    filter: brightness(2) saturate(1.8)
            drop-shadow(0 0 10px rgba(255, 215, 0, 1))
            drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
  }
  80% {
    filter: brightness(1.4) saturate(1.3)
            drop-shadow(0 0 6px rgba(255, 215, 0, 0.5))
            drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
  }
  100% {
    filter: brightness(1) saturate(1)
            drop-shadow(0 0 2px rgba(255, 215, 0, 0.2))
            drop-shadow(0 0 4px rgba(255, 215, 0, 0.1));
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes glow {
  0% {
    filter:
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3))
      drop-shadow(0 0 10px rgba(255, 215, 0, 0.4))
      drop-shadow(0 0 20px rgba(255, 215, 0, 0.2));
  }
  100% {
    filter:
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3))
      drop-shadow(0 0 20px rgba(255, 230, 100, 0.8))
      drop-shadow(0 0 40px rgba(255, 215, 0, 0.6));
  }
}

@keyframes floatBreath {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        filter: brightness(1);
    }
    25% {
        transform: translate(0, -10px) rotate(-1deg) scale(1.03);
        filter: brightness(1.1);
    }
    50% {
        transform: translate(0, 0) rotate(1deg) scale(1);
        filter: brightness(1);
    }
    75% {
        transform: translate(0, -6px) rotate(-1deg) scale(1.02);
        filter: brightness(1.05);
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        filter: brightness(1);
    }
}

@keyframes moveForwardBackward {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(15px);
    }
    50% {
        transform: translateX(25px);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes moveBackwardForward {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateX(-25px);
    }
    75% {
        transform: translateX(-15px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes eyeGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px #ad7dd4);
    }
    50% {
        filter: drop-shadow(0 0 40px #594080);
    }
}

@keyframes eyeGlowRed {
    0%, 100% {
        filter: drop-shadow(0 0 10px #7f2712);
    }
    50% {
        filter: drop-shadow(0 0 40px #5c1d0d);
    }
}
/* END ANIMATION */

/* SECTION 1 */
.gb-flare-container {
    position: relative;
}

.gb-flare-sc-1 {
    background: url('../../images/event/blackflareday/EN/Section1/bg.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.gb-flare-sc-1-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.2vw;
    padding-top: 2vw;
    padding-bottom: 5vw;
}

.gb-midgard-sc-1-buttons {
    display: flex;
    font-size: 1.2vw;
    gap: 1.6vw;
    font-family: 'Anton Regular', 'Calibri';
    text-shadow: 0 0 6px black;
    color: #ffffff;
    margin-top: 0.6vw;
}

.gb-midgard-sc-1-buttons > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.gb-midgard-sc-1-login-btn {
    background: url(../../images/event/conquer-2/Section2/btn-login.png) center center / 100% 100% no-repeat;
    padding: 0 5vw;
    padding-bottom: 0.5vw;
}

.gb-midgard-sc-1-logout-btn {
    background: url(../../images/event/conquer-2/Section2/btn-logout.png) center center / 100% 100% no-repeat;
    padding: 0 5vw;
    padding-bottom: 0.5vw;
}

.gb-midgard-sc-1-update-progress {
    background: url(../../images/event/boundtothegun/Section2/btn-update.png) center center / 100% 100% no-repeat;
    word-break: break-all;
    padding: 1vw 4vw;
}

.gb-bound-sc-1-update-rules {
    background: url(../../images/event/rtg-3/Section2/btn-claim.png) center center / 100% 100% no-repeat;
    padding: 0 5.5vw;
    padding-bottom: 0.5vw;
}

.gb-flare-sc-1-logo {
    display: block;
    width: 19vw;
    margin-bottom: -4%;
}

.gb-flare-sc-1-title {
    display: block;
    width: 50vw;
}

.gb-flare-sc-1-schedule {
    display: block;
    width: 42vw;
}

.gb-flare-sc-1-desc {
    display: block;
    width: 48vw;
}

.gb-bullet-sc-1-floating {
    position: absolute;
    left: 2%;
    top: 1%;
    width: 12vw;
}

@media screen and (max-width: 768px) {
    .gb-midgard-sc-1-buttons {
        flex-direction: column;
        font-size: 6.3vw;
    }

    .gb-midgard-sc-1-login-btn {
        padding: 5vw 5vw;
        padding-bottom: 7vw;
    }

    .gb-midgard-sc-1-logout-btn {
        padding: 5vw 5vw;
        padding-bottom: 7vw;
    }

    .gb-midgard-sc-1-update-progress {
        padding: 4vw 13vw;
        padding-bottom: 7vw;
    }

    .gb-bound-sc-1-update-rules {
        padding: 5vw 5.5vw;
        padding-bottom: 7vw;
    }

    .gb-flare-sc-1-logo {
        width: 58vw;
    }

    .gb-flare-sc-1-title {
        width: 88vw;
    }

    .gb-flare-sc-1-schedule {
        width: 92vw;
    }

    .gb-flare-sc-1-desc {
        width: 91vw;
    }

    .gb-bullet-sc-1-floating {
        width: 28vw;
    }

    .gb-flare-sc-1-content {
        padding-top: 9vw;
        padding-bottom: 15vw;
    }

    .gb-flare-sc-1 {
        background: url(../../images/event/blackflareday/EN/Section1/bg-mobile.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: bottom;
    }
}
/* END SECTION 1 */

/* SECTION 2 */
.gb-flare-sc-2 {
    position: relative;
    background: url('../../images/event/blackflareday/EN/Section2/bg.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top;
}

.gb-flare-sc-2-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3vw;
    padding-top: 7vw;
    padding-bottom: 8vw;
    margin-left: 24%;
}

.gb-flare-sc-2-title {
    display: block;
    width: 45vw;
}

.gb-flare-sc-2-desc {
    display: block;
    width: 45vw;
}

.gb-flare-sc-2-reward {
    display: block;
    width: 57vw;
}

.gb-flare-sc-2-reward-container {
    position: relative;
}

.gb-flare-sc-2-char {
    position: absolute;
    width: 42vw;
    top: 11%;
    left: 2%;

    animation: floatBreath 3s 
                ease-in-out infinite, moveForwardBackward 6s 
                ease-in-out infinite, eyeGlowRed 2.5s 
                ease-in-out infinite;
}

.gb-flare-sc-2-detail {
    display: block;
}

.gb-flare-sc-2-1-login-stamp {
    position: absolute;
    top: 4.3vw;
    left: 5.4%;
    width: 5vw;
}

.gb-flare-sc-2-2-login-stamp {
    position: absolute;
    top: 4.3vw;
    left: 21.7%;
    width: 5vw;
}

.gb-flare-sc-2-3-login-stamp {
    position: absolute;
    top: 4.3vw;
    left: 37.9%;
    width: 5vw;
}

.gb-flare-sc-2-5-login-stamp {
    position: absolute;
    top: 4.3vw;
    left: 53.9%;
    width: 5vw;
}

.gb-flare-sc-2-7-login-stamp {
    position: absolute;
    top: 4.3vw;
    left: 70%;
    width: 5vw;
}

.gb-flare-sc-2-10-login-stamp {
    position: absolute;
    top: 4.3vw;
    left: 86.5%;
    width: 5vw;
}

.gb-flare-sc-2-reward-mobile {
    display: none
}

.gb-flare-sc-2-detail {
    font-family: 'Anton Regular';
    color: white;
    text-transform: uppercase;
    font-size: 1.5vw;
    text-shadow: 0 0 23px red;
    white-space: nowrap;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .gb-flare-sc-2-reward {
        display: none;
    }

    .gb-flare-sc-2-content {
        margin-left: unset;
        gap: 9vw;

        padding-top: 25vw;
        padding-bottom: 25vw;
    }

    .gb-flare-sc-2-title {
        display: block;
        width: 92vw;
    }

    .gb-flare-sc-2-desc {
        display: block;
        width: 90vw;
    }

    .gb-flare-sc-2-reward-mobile {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .gb-flare-sc-2-char {
        display: none;
    }

    .gb-flare-sc-2 {
        position: relative;
        background: url(../../images/event/blackflareday/EN/Section2/bg-mobile.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: top;
    }

    .gb-flare-sc-2-1-login-stamp {
        position: absolute;
        top: 9.3vw;
        left: 16%;
        width: 19vw;
    }

    .gb-flare-sc-2-2-login-stamp {
        position: absolute;
        top: 9.3vw;
        left: 41.3%;
        width: 19vw;
    }

    .gb-flare-sc-2-3-login-stamp {
        position: absolute;
        top: 9.3vw;
        left: 65.9%;
        width: 19vw;
    }

    .gb-flare-sc-2-5-login-stamp {
        position: absolute;
        top: 47.3vw;
        left: 16.1%;
        width: 19vw;
    }

    .gb-flare-sc-2-7-login-stamp {
        position: absolute;
        top: 47.3vw;
        left: 41.3%;
        width: 19vw;
    }

    .gb-flare-sc-2-10-login-stamp {
        position: absolute;
        top: 47.3vw;
        left: 65.9%;
        width: 19vw;
    }

    .gb-flare-sc-2-detail {
        font-family: 'Anton Regular';
        color: white;
        text-transform: uppercase;
        font-size: 5.5vw;
        text-shadow: 0 0 23px red;
        white-space: nowrap;
        text-align: center;
        width: 90vw;
        white-space: unset;
    }
}
/* END SECTION 2 */

/* SECTION 3 */
.gb-flare-sc-3 {
    position: relative;
    background: url('../../images/event/blackflareday/EN/Section3/bg.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top;
}

.gb-flare-sc-3-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vw;
    padding-top: 7vw;
    padding-bottom: 8vw;
}

.gb-flare-sc-3-gacha {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3vw;
}

.gb-flare-sc-3-title {
    display: block;
    width: 39vw;
}

.gb-flare-sc-3-desc {
    display: block;
    width: 40vw;
}

.gb-flare-sc-3-history {
    position: relative;
    background: url(../../images/event/blackflareday/EN/Section3/frame.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: 'Anton Regular';
    text-transform: uppercase;
    font-size: 11pt;
    padding: 2vw;
}

.gb-sc-hl-sc-5-history-list table th,
.gb-sc-hl-sc-5-history-list table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #000;
    white-space: nowrap;
}

.gb-sc-hl-sc-5-history-list table th {
    color: #000;
    white-space: nowrap;
}

.gb-sc-hl-sc-5-history-title {
    position: relative;
    text-align: center;
    font-size: 38pt;
    color: #ffffff;
    text-shadow: 0 4px #ab2223;
}

.gb-sc-hl-sc-5-username {
    position: relative;
    text-align: center;
    font-size: 22pt;
    color: #ffe7b2;
    text-shadow: 0 4px #4e3305;
}

#list-history_filter > label {
    margin-left: 50%;
}

.gb-sc-hl-sc-5-history-list {
    overflow: auto;
    width: 43vw;
    height: 82vh;
    padding: 1vw;
}

.gb-sc-hl-sc-5-key {
    position: absolute;
    bottom: 14.6%;
    color: #9a0503;
    font-size: 1.5vw;
    font-family: 'BostonTraffic';
}

/* SPIN WHEEL */
.gb-flare-sc-3-wheel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.gb-flare-sc-3-wheel > .grid-item {
    transition: transform 0.3s;
}

.gb-flare-sc-3-wheel >.grid-item>img,
.gb-flare-sc-3-wheel >.grid-item-button>img {
    display: block;
    width: 12vw;
}

.gb-sc-hl-sc-5-play-btn {
    grid-column: 2;
    grid-row: 2;
    cursor: url(../../images/preregis/Global/pointer.png), auto !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlight {
    transform: scale(1.2);
}

.gb-sc-hl-sc-5-key {
    position: absolute;
}
/* END SPIN WHEEL */

@media screen and (max-width: 768px) {
    .gb-flare-sc-3-gacha {
        flex-direction: column;
    }

    .gb-sc-hl-sc-5-history-list {
        width: 80vw;
        height: 85vh;
    }

    .gb-sc-hl-sc-5-history-title {
        position: relative;
        text-align: center;
        font-size: 24pt;
        color: #ffffff;
        text-shadow: 0 4px #ab2223;
    }

    .gb-sc-hl-sc-5-username {
        position: relative;
        text-align: center;
        font-size: 20pt;
        color: #ffe7b2;
        text-shadow: 0 4px #4e3305;
    }

    .gb-flare-sc-3-wheel >.grid-item>img, .gb-flare-sc-3-wheel >.grid-item-button>img {
        width: 30vw;
    }

    .gb-flare-sc-3-title {
        width: 92vw;
    }

    .gb-flare-sc-3-desc {
        width: 88vw;
    }

    .gb-flare-sc-3-content {
        gap: 5vw;
    }

    .gb-flare-sc-3 {
        position: relative;
        background: url(../../images/event/blackflareday/EN/Section3/bg-mobile.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: top;
    }

    .gb-sc-hl-sc-5-key {
        font-size: 4.1vw;
    }
}
/* END SECTION 3 */