/* GLOBAL */
.gb-solar-wrapper {
    position: relative;
}

.gb-web-footer {
    border-top: 0.2vw #301005 solid;
    background: #36190c;
}

.gb-web-footer-content {
    border-top: 0.2vw #321b12 solid;
}

.detail-title {
    text-align: center;
    font-size: 2.5rem;
    color: orange;
    text-shadow: 3px 5px #1d1300;
}

#detailModal1, #detailModal2, #detailModal3, #detailModal4 {
    text-transform: uppercase;
    font-family: 'Anton Regular';
    font-size: 1.4rem;
    text-align: left;
}
/* END GLOBAL */

/* SECTION 1 */
.gb-solar-sc-1 {
    position: relative;

    background: url('../../images/event/solarflare/EN/sc1/bg.jpg');
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}

.gb-solar-sc-1-content {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 1.3vw;
    padding-bottom: 6vw;
}

.gb-solar-sc-1-logo {
    position: relative;
    display: block;
    width: 17vw;
    margin-bottom: -1vw;
    margin-top: -2vw;
}

.gb-solar-sc-1-title {
    position: relative;
    display: block;
    width: 48vw;
    margin-top: -1vw;
    margin-bottom: -1.9vw;
}

.gb-solar-sc-1-desc {
    position: relative;
    display: block;
    width: 37vw;
}

.gb-solar-sc-1-buttons {
    display: flex;
    justify-content: center;
    gap: 2vw;
}

.gb-solar-sc-1-buttons > a > img {
    display: block;
    width: 15vw;
}

.gb-solar-sc-1-char-left {
    position: absolute;
    display: block;
    left: 3vw;
    top: 8vw;
    width: 20.6vw;
}

.gb-solar-sc-1-char-right {
    position: absolute;
    display: block;
    right: 3vw;
    top: 10.4vw;
    width: 21.5vw;
}

.gb-solar-sc-1-schedule {
    position: relative;
    display: block;
    width: 30vw;
    margin-top: -3vw;
    margin-bottom: -2.3vw;
}

@media(max-width: 768px) {
    .gb-solar-sc-1-logo {
        width: 53vw;
    }

    .gb-solar-sc-1-schedule {
        width: 97vw;
    }

    .gb-solar-sc-1-title {
        width: 87vw;
    }

    .gb-solar-sc-1-desc {
        width: 87vw;
        margin-top: 3vw;
    }

    .gb-solar-sc-1-buttons {
        flex-direction: column;
        z-index: 2;
    }

    .gb-solar-sc-1-buttons > a > img {
        width: 55vw;
    }

    .gb-solar-sc-1 {
        position: relative;

        background: url('../../images/event/solarflare/EN/sc1/bg-mobile.png');
        background-size: 100% 100%;
        background-position: bottom;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .gb-solar-sc-1-char-left {
        left: 0;
        top: 114vw;
        width: 32.6vw;
        z-index: 0;
    }

    .gb-solar-sc-1-char-right {
        right: 0;
        top: 120.4vw;
        width: 32.6vw;
    }
}
/* END SECTION 1 */

/* SECTION 2 */
.gb-solar-sc-2 {
    position: relative;

    background: url('../../images/event/solarflare/EN/sc2/bg.jpg');
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}

.gb-solar-sc-2-content {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 1.3vw;
    padding: 8vw;
}

.gb-solar-sc-2-desc-container {
    position: relative;
}

.gb-solar-sc-2-desc {
    display: block;
    width: 74vw;
}

.gb-solar-sc-2-team-container {
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 1.1vw;
}

.gb-solar-sc-2-team-container > div > img {
    display: block;
    width: 13vw;
    filter: grayscale(0.8);
}

.gb-solar-sc-2-collect-gp {
    display: block;
    width: 51vw;
    margin-top: 2vw;
}

.gb-solar-sc-2-detail-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5vw;
    margin-top: 5vw;
}

.gb-solar-sc-2-total-gp-container {
    position: relative;
}

.gb-solar-sc-2-detail {
    position: relative;
    width: 13vw; 
}

.gb-solar-sc-2-total-gp-container > span {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    font-family: 'Anton Regular';
    color: white;
    text-shadow: 0 0 5px black;
    font-size: 2.2vw;
}

.gb-solar-sc-2-total-gp-title {
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    top: -72%;
    width: 8.6vw;
}

.gb-solar-sc-2-total-gp {
    display: block;
    width: 17vw;
}

.gb-solar-sc-2-team-gp-count {
    position: absolute;
    left: 50%;
    bottom: -114%;
    transform: translateX(-50%);
    color: white;
    font-family: 'Anton Regular';
    font-size: 1.4vw;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gb-solar-sc-2-total-gp-title-team {
    display: block;
    width: 8vw;
}

@media(max-width: 768px) {
    .gb-solar-sc-2-desc {
        width: 151vw;
    }

    .gb-solar-sc-2-team-container {
        position: absolute;
        bottom: -33%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: unset;
        row-gap: 8vw;
        width: 86vw;
        flex-wrap: wrap;
        align-items: center;
    }

    .gb-solar-sc-2-team-container > div {
        flex: 0 0 50%;
    }

    .gb-solar-sc-2-team-container > img {
        display: block;
        width: 23vw;
        filter: grayscale(0.8);
        flex: 0 0 50%;
    }

    .gb-solar-sc-2-collect-gp {
        width: 98vw;
        margin-top: 35vw;
    }

    .gb-solar-sc-2-total-gp-container > span {
        font-size: 6.2vw;
    }

    .gb-solar-sc-2-total-gp {
        width: 44vw;
    }

    .gb-solar-sc-2-total-gp-title {
        width: 19.6vw;
    }

    .gb-solar-sc-2-detail {
        width: 33vw;
    }

    .gb-solar-sc-2-detail-container {
        margin-top: 12vw;
    }

    .gb-solar-sc-2-team-container > div > img {
        display: block;
        width: 39vw;
        filter: grayscale(0.8);
        margin: 0 auto;
    }

    .gb-solar-sc-2-team-gp-count {
        font-size: 5.4vw;
    }

    .gb-solar-sc-2-total-gp-title-team {
        width: 20vw;
    }
}
/* END SECTION 2 */

/* SECTION 3 */
.gb-solar-sc-3 {
    position: relative;

    background: url('../../images/event/solarflare/EN/sc3/bg.jpg');
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}

.gb-solar-sc-3-content {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 1.3vw;
    padding: 8vw;
}

.gb-solar-sc-3-title-container {
    position: relative;
}

.gb-solar-sc-3-title {
    display: block;
    width: 67vw;
}

.gb-solar-sc-3-puzzle {
    background: url(../../images/event/solarflare/EN/sc3/board.png);
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;

    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: fit-content;
    gap: 0.2vw;
    padding: 1vw 1.7vw;
    padding-bottom: 2.5vw;
}

.gb-solar-sc-3-puzzle > div {
    aspect-ratio: 158 / 141;
    width: 5.7vw;
}

.gb-solar-sc-3-piece {
    display: block;
    width: 100%
}

.gb-solar-sc-3-title-content {
    position: absolute;
    top: 17%;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vw;
}

.gb-solar-sc-3-rule {
    display: block;
    width: 45vw;
}

.gb-solar-sc-3-total-login-container {
    position: relative;
    margin-top: 2vw;
}

.gb-solar-sc-3-total-login {
    display: block;
    width: 17vw;
}

.gb-solar-sc-3-total-login-container > span {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    font-family: 'Anton Regular';
    color: white;
    text-shadow: 0 0 5px black;
    font-size: 2.2vw;
}

.gb-solar-sc-3-login {
    position: absolute;
    top: -72%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 5.1vw;
}

.gb-solar-sc-3-detail {
    display: block;
    width: 12vw;
}

.gb-solar-sc-3-total-logins {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
}

@media(max-width: 768px) {
    .gb-solar-sc-3-title {
        width: 132vw;
    }

    .gb-solar-sc-3-rule {
        width: 98vw;
    }

    .gb-solar-sc-3-puzzle > div {
        aspect-ratio: 158 / 141;
        width: 20.7vw;
    }

    .gb-solar-sc-3-total-login {
        width: 43vw;
    }

    .gb-solar-sc-3-total-login-container > span {
        font-size: 6.2vw;
    }

    .gb-solar-sc-3-login {
        width: 12.1vw;
    }

    .gb-solar-sc-3-total-login-container {
        margin-top: 3.5vw;
    }

    .gb-solar-sc-3 {
        padding: 12vw 0;
    }

    .gb-solar-sc-3-detail {
        width: 33vw;
    }
}
/* END SECTION 3 */

/* SECTION 4 */
.gb-solar-sc-4 {
    position: relative;

    background: url('../../images/event/solarflare/EN/sc4/bg.jpg');
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}

.gb-solar-sc-4-content {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 1.3vw;
    padding: 8vw;
}

.gb-solar-sc-4-reward-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
}

.gb-solar-sc-4-reward-1-container,
.gb-solar-sc-4-reward-2-container {
    position: relative;
}

.gb-solar-sc-4-title {
    display: block;
    width: 23vw;
}

.gb-solar-sc-4-mission1,
.gb-solar-sc-4-mission2 {
    position: relative;
    display: block;
    width: 28vw;
}

.gb-solar-sc-4-char-left {
    position: absolute;
    left: 5%;
    top: 10%;
    width: 23vw;
}

.gb-solar-sc-4-char-right {
    position: absolute;
    right: 5%;
    top: 10%;
    width: 23vw;
}

.gb-solar-sc-4-reward-1-container > span {
    position: absolute;
    bottom: 0.2%;
    left: 51.7%;
    transform: translate(-50%, -50%) rotate(-2deg);
    font-size: 2.3vw;
    font-family: 'Anton Regular';
    color: white;
    text-shadow: 0 0 12px #000000;
}

.gb-solar-sc-4-reward-2-container > span {
    position: absolute;
    bottom: 0.2%;
    left: 48.9%;
    transform: translate(-50%, -50%) rotate(2.1deg);
    font-size: 2.3vw;
    font-family: 'Anton Regular';
    color: white;
    text-shadow: 0 0 12px #000000;
}

.gb-solar-sc-4-detail {
    display: block;
    width: 14vw;
}

@media(max-width: 768px) {
    .gb-solar-sc-4-reward-container {
        flex-direction: column;
        gap: 2vw;
    }

    .gb-solar-sc-4-title {
        position: relative;
        display: block;
        width: 63vw;
        z-index: 2;
        margin-bottom: 5vw;
    }

    .gb-solar-sc-4-mission1, .gb-solar-sc-4-mission2 {
        width: 68vw;
    }

    .gb-solar-sc-4-reward-1-container > span {
        font-size: 5.3vw;
    }

    .gb-solar-sc-4-reward-2-container > span {
        font-size: 5.3vw;
    }

    .gb-solar-sc-4-char-left {
        position: absolute;
        left: 5%;
        top: 0%;
        width: 37vw;
    }

    .gb-solar-sc-4-char-right {
        position: absolute;
        right: 5%;
        top: 0;
        width: 37vw;
    }

    .gb-solar-sc-4 {
        position: relative;

        background: url('../../images/event/solarflare/EN/sc4/bg-mobile.jpg');
        background-size: 100% 100%;
        background-position: bottom;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .gb-solar-sc-4-content {
        padding: 18vw 8vw;
    }

    .gb-solar-sc-4-detail {
        width: 51vw;
        margin-top: 2vw;
    }
}
/* END SECTION 4 */

/* SECTION 5 */
.gb-solar-sc-5 {
    position: relative;

    background: url('../../images/event/solarflare/EN/sc5/bg.jpg');
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}

.gb-solar-sc-5-content {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 1.3vw;
    padding: 8vw;
}

.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: 32vw;
}

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

.gb-flare-sc-3-history {
    position: relative;
    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;
}

@media(max-width: 768px) {
    .gb-solar-sc-5 {
        position: relative;

        background: url('../../images/event/solarflare/EN/sc5/bg-mobile.jpg');
        background-size: 120% 100%;
        background-position: bottom;
        background-repeat: no-repeat;
        overflow: hidden;
    }
}
/* 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: 99vw;
    }

    .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 5 */