/* =========================================================
   改版內容前瞻 / GV Update Preview
   此檔僅控制 gv_update.html，避免影響既有官網區塊。
========================================================= */

/* ---------- Section / Background ---------- */
.gv-update {
    --gv-max-width: 1500px;
    --gv-text: #63372e;
    --gv-title: #9f3e56;
    --gv-subtitle: #a85265;
    position: relative;
    width: 100%;
    min-height: clamp(720px, 61vw, 100vh);
    overflow: hidden;
    isolation: isolate;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    color: var(--gv-text);
}

.gv-update__bg {
    position: absolute;
    inset: 0;
    z-index: -5;
    background: #172653 url('../img/gv_update/panle_bg.webp') center center / cover no-repeat;
}

.gv-update__inner {
    position: relative;
    z-index: 2;
    width: min(92%, var(--gv-max-width));
    margin: 0 auto;
    padding: clamp(44px, 4.2vw, 82px) 0 clamp(90px, 8vw, 150px);
}

/* ---------- Heading ---------- */
.gv-update__header {
    position: relative;
    z-index: 5;
    text-align: center;
}

.gv-update__title {
    width: clamp(290px, 25vw, 660px);
    margin: 0 auto;
}

.gv-update__title img {
    display: block;
    width: 100%;
    height: auto;
}

.gv-update__date {
    /* margin: 8px 0 0; */
    color: #fff3e6;
    font-size: clamp(17px, 1vw, 25px);
    font-weight: 700;
    letter-spacing: .08em;
    text-shadow: 0 2px 5px rgba(31, 24, 70, .75);
}

/* ---------- Tabs ---------- */
.gv-update__tabs {
    position: relative;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1vw, 24px);
    width: 90%;
    margin: clamp(22px, 2vw, 5px) auto clamp(-8px, -.5vw, -2px);
}

.gv-update__tab {
    width: 24%;
    max-width: 165px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}

.gv-update__tab img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.gv-update__tab:not(.is-active) {
    opacity: .78;
    filter: saturate(.8) brightness(.9);
}

.gv-update__tab:hover,
.gv-update__tab:focus-visible,
.gv-update__tab.is-active {
    opacity: 1;
    filter: drop-shadow(0px 0px 6px #fff);
    transform: translateY(-5px) scale(1.035);
}

.gv-update__tab:focus-visible {
    outline: none;
    outline-offset: 4px;
    border-radius: 18px;
}

/* ---------- Scroll Panel ---------- */
.gv-update__panel {
    position: relative;
    width: 100%;
    aspect-ratio: 2100 / 1150;
    margin: -8% auto;
    margin-left: -2%;
    transition: opacity .16s ease, transform .16s ease;
}

.gv-update__panel.is-changing {
    opacity: .25;
    transform: translateY(7px);
}

.gv-update__scroll {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

.gv-update__content {
    position: absolute;
    z-index: 2;
    inset:18% 12.5% 15% 17.5%;
    display: grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(0, .75fr);
    align-items: center;
    gap: clamp(28px, 4vw, 0px);
}

/* ---------- Visual / Banner ---------- */
.gv-update__visual {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.gv-update__banner {
    display: block;
    width: min(100%, 640px);
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(76, 42, 78, .18));
}

.gv-update__character {
    position: absolute;
    /* right: -35%;
    top: 15%; */
    z-index: 99;
    object-fit: contain;
    /* transform: translate(-50%, -50%); */
    pointer-events: none;
}

    /* ==================================================
    各頁籤角色位置
    ================================================== */

    /* 浮空之島 */
    .gv-update__character.character-01 {
        right: -10%;
        top: -20%;
        /* bottom: -10px; */
        width: 150px;
    }

    /* 戰天使擂台 */
    .gv-update__character.character-02 {
        right: -12%;
        top: -5%;
        /* bottom: 0%; */
        width: 140px;
    }

    /* 房屋系統 */
    .gv-update__character.character-03 {
        right: -10%;
        top: -5%;
        /* bottom: -3%; */
        width:140px;
    }

    /* 敬請期待 */
    .gv-update__character.character-04 {
        right: 10%;
        top: -100%;
        width:150px;
    }






/* ---------- Copy ---------- */
.gv-update__copy {
    position: relative;
    z-index: 3;
    min-width: 0;
    padding-right: 3%;
}

.gv-update__content-title {
    margin: 0;
    color: var(--gv-title);
    font-size: clamp(27px, 1.8vw, 45px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .03em;
    text-shadow: 0 2px 0 rgba(255, 255, 255, .8);
}

.gv-update__subtitle {
    margin: clamp(8px, .8vw, 14px) 0 0;
    color: var(--gv-subtitle);
    font-size: clamp(18px, 1.1vw, 27px);
    font-weight: 800;
    line-height: 1.5;
}

.gv-update__line {
    display: block;
    width: min(100%, 540px);
    height: auto;
    margin: clamp(10px, 1vw, 10px) 0;
    opacity: .85;
}

.gv-update__description {
    font-size: clamp(15px, .9vw, 23px);
    font-weight: 600;
    line-height: 1.85;
    text-align: justify;
}

.gv-update__description p {
    margin: 0 0 .7em;
}

.gv-update__description p:last-child {
    margin-bottom: 0;
}

/* ---------- Foreground Decoration ---------- */
.gv-update__light,
.gv-update__cloud {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.gv-update__light {
    z-index: 999;
    width: clamp(300px, 35vw, 720px);
    animation: gvLightFloat 6s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

.gv-update__light--left {
    left: 5%;
    bottom: 4%;
}

.gv-update__light--right {
    width: clamp(300px, 45vw, 850px);
    right: 7%;
    top: 26%;
    animation-delay: -2.5s;
}

.gv-update__cloud {
    z-index: 8;
    right: -2%;
    bottom: -2%;
    /* width: clamp(520px, 25vw, 1200px); */
    width: 40%;
}

@keyframes gvLightFloat {
    from { transform: translate3d(0, 0, 0); opacity: .72; }
    to   { transform: translate3d(0, -12px, 0); opacity: 1; }
}


/* =========================================================
   1440px以下
========================================================= */
@media (max-width: 1441px) {
  .gv-update__light--left{
    left: 0;
  }
  .gv-update__light--right{
    right: 0;
    top: 35%;
  }
  .gv-update__tab{
    width: 140px;
  }
  .gv-update__banner{
    min-width: min(95%, 640px);
  }

/* 角色各位置調整 */
    /* 浮空之島 */
    .gv-update__character.character-01 {
        right: -10%;
        top: -20%;
        width: 140px;
    }

    /* 戰天使擂台 */
    .gv-update__character.character-02 {
        right: -10%;
        top: -15%;
        width: 140px;
    }

    /* 房屋系統 */
    .gv-update__character.character-03 {
        right: -10%;
        top: -15%;
        width:140px;
    }
}



@media (max-width: 1280px) {
    .gv-update__scroll{
        width: 130%;
        height: 120%;
        object-fit: fill;
    }
    .gv-update__content{
        margin-top: 4rem;
    }
}



/* =========================================================
   Tablet
========================================================= */
@media (max-width: 991.98px) {
    .gv-update {
        min-height: 0;
    }

    .gv-update__inner {
        width: 100%;
        padding-bottom: 110px;
    }

    .gv-update__tabs {
        width: 95%;
        gap: 8px;
        margin-bottom: 18px;
    }

    .gv-update__panel {
        aspect-ratio: auto;
        min-height: 900px;
        margin-left: 0;
        padding: 0 5%;
    }

    .gv-update__scroll {
        /* height: 100%; */
        object-fit:cover;
        width: 125%;
        height: 125%;
    }

    .gv-update__content {
        inset: 9% 13% 10% ;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
    }

    .gv-update__visual {
        flex: 0 0 auto;
        width: 88%;
        min-height: 390px;
        margin: 0 auto;
    }

    .gv-update__copy {
        width: 88%;
        padding: 0;
    }

    .gv-update__content-title,
    .gv-update__subtitle {
        text-align: center;
    }

    .gv-update__line {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ==================================================
   手機版
================================================== */

@media (max-width: 768px) {
    .gv-update__content{
        margin-top: 0;
    }
    /* 浮空之島 */
    .gv-update__character.character-01 {
        right: -10%;
        top: -35%;
        width: 110px;
    }

    /* 戰天使擂台 */
    .gv-update__character.character-02 {
        right: -12%;
        top: -40%;
        width: 120px;
    }

    /* 房屋系統 */
    .gv-update__character.character-03 {
        right: -10%;
        top: -45%;
        width:120px;
    }

    /* 敬請期待 */
    .gv-update__character.character-04 {
        right: -10%;
        top: -60%;
        width:120px;
    }

}


/* =========================================================
   Mobile
========================================================= */
@media (max-width: 575.98px) {
    .gv-update__inner {
        width: 100%;
        padding-top: 34px;
        /* padding-bottom: 72px; */
        padding-bottom: 50px;
    }

    .gv-update__title {
        width: 76%;
    }

    .gv-update__date {
        padding: 0 16px;
        font-size: 15px;
    }

    .gv-update__tabs {
        /* display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)); */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* width: 90%; */
        gap: 7px 9px;
        margin-top: 18px;
        margin-bottom: 12px;
    }

    .gv-update__tab {
        width: 100%;
        max-width: none;
        max-width: 80px;

    }

    .gv-update__tab:hover,
    .gv-update__tab:focus-visible,
    .gv-update__tab.is-active {
        transform: translateY(-2px) scale(1.02);
    }

    .gv-update__panel {
        width: 100%;
        min-height: 760px;
        margin-left: auto;
    }

    .gv-update__scroll {
        /* left: -31%;
        width: 162%; */
        top: -5%;
        left: -200%;
        width: 403%;
        height: unset;
        max-width: none;
    }

    .gv-update__content {
        inset: 6% 7.5% 6%;
        gap: 12px;
    }

    .gv-update__visual {
        width: 100%;
        min-height: 300px;
    }

    .gv-update__banner {
        width: 95%;
        min-width: 100%;
        margin-bottom: .5rem;
    }

    .gv-update__character {
        width: 40%;
        /* max-height: 108%; */
        right: -35%;
        top: -20%;
    }

    .gv-update__copy {
        width: 100%;
        padding: 0 4%;
    }

    .gv-update__content-title {
        font-size: clamp(24px, 6vw, 32px);
    }

    .gv-update__subtitle {
        font-size: clamp(16px, 4vw, 20px);
    }

    .gv-update__description {
        font-size: 15px;
        line-height: 1.75;
        text-align: justify;
    }
    .gv-update__line{
        margin: clamp(5px, 1vw, 5px) 0;
        margin-left:auto;
        margin-right: autow;
    }

    .gv-update__light {
        width: 75vw;
        opacity: .65;
    }
    .gv-update__light--left{
        left: -4%;
        top: 21%;
    }
    .gv-update__light--right{
        width: 110%;
        right: -2%;
        top: 60%;
        z-index: 1;
    }

    .gv-update__cloud {
        /* right: -30%;
        width: 115vw; */
        width: 100%;
        right: -22%;
        bottom: 0%;
    }

}

/* 使用者偏好減少動態效果時停止裝飾動畫 */
@media (prefers-reduced-motion: reduce) {
    .gv-update__light {
        animation: none;
    }

    .gv-update__panel,
    .gv-update__tab {
        transition: none;
    }
}