/* ============================================
   基本設定
============================================ */
:root{
    --black:#111111;
    --white:#f7f7f7;
    --orange:#f7941d;
    --blue:#24589b;
    --gray:#b8b8b8;
}
*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    overflow-x:hidden;

    background:#0d0d0d;
    color:#fff;

    font-family:"Noto Sans TC", sans-serif;
}

button,
a{
    font:inherit;
}

button{
    border:0;
}

a{
    color:inherit;
    text-decoration:none;
}


/* ============================================
   畫面切換
============================================ */

.quiz-screen{
    display:none;
    position:relative;

    width:100%;
    min-height:100svh;

    overflow:hidden;
}

.quiz-screen.active{
    display:flex;
    animation:screenEnter .65s ease both;
}

@keyframes screenEnter{
    from{
        opacity:0;
        transform:translateY(22px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ============================================
   共用元件
============================================ */

.eyebrow{
    margin:0 0 30px;

    font-size:13px;
    font-weight:700;
    letter-spacing:5px;
}

.main-button{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;

    min-width:220px;
    padding:17px 26px;

    border:1px solid #fff;
    border-radius:999px;

    background:#fff;
    color:#111;

    font-weight:600;

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.main-button{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;

    min-width:220px;
    padding:17px 26px;

    border:1px solid var(--orange);
    border-radius:999px;

    background:var(--orange);
    color:#111;

    font-weight:700;
    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.main-button:hover{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
    transform:translateY(-4px);
}

.secondary-button{
    min-width:170px;
    padding:17px 26px;

    border:1px solid rgba(255,255,255,.65);
    border-radius:999px;

    background:transparent;
    color:#fff;

    font-weight:600;
    cursor:pointer;

    transition:.3s ease;
}

.secondary-button:hover{
    background:#fff;
    color:#111;
    transform:translateY(-4px);
}


/* ============================================
   開場
============================================ */

#intro-screen{
    align-items:center;
    padding:100px 8%;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(247,148,29,.32),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 85%,
            rgba(36,88,155,.35),
            transparent 32%
        ),
        var(--black);
}

.intro-content{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1250px;

    margin:auto;
}

.intro-content h1{
    max-width:1150px;
    margin:0 0 45px;

    font-family:"Noto Serif TC", serif;
    font-size:clamp(55px, 8.5vw, 135px);
    font-weight:500;
    line-height:1.15;
    letter-spacing:-5px;
}

.intro-description{
    max-width:620px;
    margin:0 0 50px;

    color:#aaa;

    font-size:18px;
    line-height:1.9;
}

.close-button{
    position:absolute;
    top:35px;
    right:45px;
    z-index:5;

    display:grid;
    place-items:center;

    width:52px;
    height:52px;

    border:1px solid rgba(255,255,255,.4);
    border-radius:50%;

    font-size:30px;
    line-height:1;

    transition:.3s ease;
}

.close-button:hover{
    background:#fff;
    color:#111;
    transform:rotate(90deg);
}

.intro-number{
    position:absolute;
    right:5%;
    bottom:35px;

    margin:0;

    color:#777;
    letter-spacing:3px;
}

.intro-decoration{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.decoration-one{
    top:-100px;
    right:-100px;

    width:350px;
    height:350px;

    border:70px solid var(--orange);

    opacity:.18;
    transform:rotate(20deg);
}

.decoration-two{
    left:-70px;
    bottom:-100px;

    width:260px;
    height:260px;

    border:50px solid var(--blue);

    opacity:.18;
}


/* ============================================
   Header
============================================ */

.quiz-header{
    position:absolute;
    top:0;
    left:0;
    z-index:10;

    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;
    padding:32px 5%;
}

.quiz-brand{
    font-family:"Noto Serif TC", serif;
    font-size:20px;
    font-weight:600;
}

.exit-button{
    padding:10px 18px;

    border:1px solid rgba(255,255,255,.4);
    border-radius:999px;

    background:transparent;
    color:#fff;

    cursor:pointer;
    transition:.3s ease;
}

.exit-button:hover{
    background:#fff;
    color:#111;
}


/* ============================================
   題目
============================================ */

#question-screen{
    align-items:center;

    padding:120px 8% 80px;

    background:#101010;

    transition:background-color .55s ease;
}

#question-screen.theme-dark{
    background:#111111;
}

#question-screen.theme-blue{
    background:#24589b;
}

#question-screen.theme-orange{
    background:#f7941d;
}

.question-container{
    width:100%;
    max-width:1250px;
    margin:auto;
}

.progress-area{
    margin-bottom:70px;
}

#question-number{
    margin:0 0 18px;

    color:rgba(255,255,255,.65);

    font-size:13px;
    font-weight:600;
    letter-spacing:4px;
}

.progress-track{
    width:100%;
    height:3px;
    overflow:hidden;
    background:rgba(255,255,255,.25);
}

#progress-bar{
    width:20%;
    height:100%;
    background:var(--orange);
    transition:width .45s ease;
}

.question-content{
    animation:questionEnter .5s ease both;
}

.question-content.leaving{
    animation:questionLeave .3s ease both;
}

@keyframes questionEnter{
    from{
        opacity:0;
        transform:translateX(45px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes questionLeave{
    from{
        opacity:1;
        transform:translateX(0);
    }

    to{
        opacity:0;
        transform:translateX(-45px);
    }
}

#question-text{
    max-width:1000px;
    margin:0 0 55px;

    font-family:"Noto Serif TC", serif;
    font-size:clamp(42px, 6.5vw, 92px);
    font-weight:500;
    line-height:1.28;
    letter-spacing:-3px;
}

.answer-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.answer-button{
    position:relative;

    min-height:105px;
    padding:25px 70px 25px 28px;

    border:1px solid rgba(255,255,255,.45);
    border-radius:20px;

    background:rgba(0,0,0,.12);
    color:#fff;

    font-size:18px;
    font-weight:600;
    text-align:left;

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}
.answer-button{
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.7);
    color:#fff;

    backdrop-filter:blur(4px);
}

/* 黑色背景：橘藍交替 */
.theme-dark .answer-button:nth-child(odd):hover{
    background:var(--orange);
    border-color:var(--orange);
    color:#111;
}

.theme-dark .answer-button:nth-child(even):hover{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
}

/* 藍色背景：全部改用橘色 */
.theme-blue .answer-button:hover{
    background:var(--orange);
    border-color:var(--orange);
    color:#111;
}

/* 橘色背景：全部改用深藍色 */
.theme-orange .answer-button:hover{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
}
.theme-dark #progress-bar{
    background:var(--orange);
}

.theme-blue #progress-bar{
    background:var(--orange);
}

.theme-orange #progress-bar{
    background:var(--blue);
}
.theme-orange .answer-button{
    background:rgba(0,0,0,.28);
    border-color:rgba(0,0,0,.45);
    color:#111;
}

.theme-orange .answer-button:hover{
    color:#fff;
}
/* ============================================
   Loading
============================================ */

#loading-screen{
    align-items:center;
    justify-content:center;

    padding:80px 8%;

    text-align:center;

    background:#0b0b0b;
}

.loading-content{
    width:100%;
}

.loading-content h2{
    margin:0;

    font-family:"Noto Serif TC", serif;
    font-size:clamp(62px, 10vw, 150px);
    font-weight:500;
    line-height:1.15;
}

.loading-symbol{
    position:relative;

    width:150px;
    height:150px;

    margin:50px auto 35px;
}

.loading-circle{
    position:absolute;
    inset:0;

    margin:auto;

    border-radius:50%;
}

.circle-one{
    width:140px;
    height:140px;

    border:3px solid var(--orange);

    animation:loadingRotate 2s linear infinite;
}

.circle-two{
    width:100px;
    height:100px;

    border:3px dashed var(--blue);

    animation:loadingRotateReverse 1.5s linear infinite;
}

.circle-three{
    width:35px;
    height:35px;

    background:var(--orange);

    animation:loadingPulse .8s ease infinite alternate;
}

@keyframes loadingRotate{
    to{
        transform:rotate(360deg);
    }
}

@keyframes loadingRotateReverse{
    to{
        transform:rotate(-360deg);
    }
}

@keyframes loadingPulse{
    to{
        transform:scale(1.6);
        border-radius:15%;
    }
}

.loading-text{
    color:#888;
    font-size:12px;
    letter-spacing:5px;
}


/* ============================================
   結果
============================================ */

#result-screen{
    padding:130px 7% 100px;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(247,148,29,.20),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(36,88,155,.25),
            transparent 30%
        ),
        var(--black);
}

.result-container{
    width:100%;
    max-width:1100px;
    margin:auto;
}

.result-title-area{
    margin-bottom:50px;
}

.result-title-area h2{
    display:inline-block;

    margin:0 25px 0 0;

    font-family:"Noto Serif TC", serif;
    font-size:clamp(65px, 10vw, 145px);
    font-weight:500;
    line-height:1;
}

.result-english{
    display:inline-block;

    margin:0;

    font-size:clamp(20px, 3vw, 42px);
    font-weight:700;
    letter-spacing:4px;
}

.result-image-wrapper{
    width:min(100%, 900px);
    margin:auto;
}

.result-image-wrapper img{
    display:block;

    width:100%;
    height:auto;

    border-radius:28px;

    box-shadow:0 35px 100px rgba(0,0,0,.5);

    animation:resultImageEnter .85s ease both;
}

@keyframes resultImageEnter{
    from{
        opacity:0;
        transform:translateY(35px) scale(.95);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.result-information{
    width:min(100%, 900px);
    margin:45px auto 0;
}

#result-summary{
    max-width:760px;
    margin:0;

    color:#ccc;

    font-size:20px;
    line-height:1.9;
}

.result-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;

    margin-top:40px;
}
.result-image-wrapper img{
    display:block;
    width:100%;
    height:auto;

    border:3px solid transparent;
    border-radius:28px;

    background:
        linear-gradient(#111,#111) padding-box,
        linear-gradient(135deg,var(--orange),var(--blue)) border-box;

    box-shadow:
        0 35px 100px rgba(0,0,0,.5),
        0 0 45px rgba(36,88,155,.18);

    animation:resultImageEnter .85s ease both;
}
/* ============================================
   與你呼應的小組
============================================ */

.result-groups{
    margin-top:44px;
    padding-top:36px;

    border-top:1px solid rgba(255,255,255,.2);
}

.result-groups-title{
    margin:0 0 20px;

    color:#fff;

    font-size:20px;
    font-weight:700;
}

.result-groups-title span{
    color:var(--orange);
}

.result-groups-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:16px;
}

.result-group-item{
    display:flex;
    flex-direction:column;
    gap:14px;

    padding:20px 22px;

    border:1px solid rgba(255,255,255,.35);
    border-radius:20px;

    background:rgba(255,255,255,.04);
    color:#fff;

    text-decoration:none;

    backdrop-filter:blur(4px);

    transition:
        border-color .3s ease,
        background-color .3s ease,
        transform .3s ease;
}

.result-group-item:hover{
    border-color:var(--orange);
    background:rgba(247,148,29,.12);

    transform:translateY(-4px);
}

.result-group-head{
    display:flex;
    align-items:center;
    gap:14px;
}

.result-group-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;

    width:48px;
    height:48px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;

    background:#1a1a1a;
}

.result-group-logo img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    border-radius:50%;
}

.result-group-heading{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.result-group-no{
    color:var(--orange);

    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
}

.result-group-title{
    font-family:"Noto Serif TC", serif;
    font-size:19px;
    font-weight:600;
    line-height:1.3;
}

.result-group-note{
    color:var(--gray);

    font-size:14px;
    line-height:1.7;
}

/* ============================================
   結果分享功能
============================================ */

.result-buttons{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;

    margin-top:42px;
}

.result-buttons .main-button,
.result-action-button,
.result-buttons .secondary-button{
    width:100%;
    min-height:58px;

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

    margin:0;
    padding:16px 22px;

    border-radius:999px;

    font-family:"Noto Sans TC", sans-serif;
    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:
        transform .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        color .3s ease;
}

.result-action-button{
    border:1px solid rgba(255,255,255,.6);

    background:transparent;
    color:#fff;
}

.result-action-button:hover{
    border-color:#f7941d;

    background:#f7941d;
    color:#101010;

    transform:translateY(-4px);
}

.share-button{
    border-color:#24589b;

    background:#24589b;
    color:#fff;
}

.share-button:hover{
    border-color:#f7941d;

    background:#f7941d;
    color:#101010;
}

.result-action-button i{
    font-size:17px;
}

.share-message{
    min-height:27px;
    margin:20px 0 0;

    color:#f7941d;

    font-size:14px;
    font-weight:600;
    text-align:center;

    opacity:0;
    transform:translateY(6px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.share-message.visible{
    opacity:1;
    transform:translateY(0);
}

.share-message.error{
    color:#ff7a7a;
}


/* 手機版 */

@media(max-width:700px){

    .result-buttons{
        grid-template-columns:1fr;
    }

    .result-buttons .main-button,
    .result-action-button,
    .result-buttons .secondary-button{
        min-height:56px;
    }

}

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

@media(max-width:768px){

    #intro-screen{
        padding:95px 6% 70px;
    }

    .intro-content h1{
        font-size:clamp(48px, 15vw, 78px);
        letter-spacing:-2px;
    }

    .intro-description{
        font-size:16px;
    }

    .close-button{
        top:22px;
        right:22px;

        width:44px;
        height:44px;
    }

    .quiz-header{
        padding:22px 6%;
    }

    .quiz-brand{
        font-size:16px;
    }

    #question-screen{
        padding:110px 6% 60px;
    }

    .progress-area{
        margin-bottom:50px;
    }

    #question-text{
        margin-bottom:38px;

        font-size:clamp(38px, 11vw, 62px);
        letter-spacing:-1px;
    }

    .answer-list{
        grid-template-columns:1fr;
    }

    .answer-button{
        min-height:82px;
        padding:20px 58px 20px 20px;

        font-size:16px;
    }

    #result-screen{
        padding:110px 5% 70px;
    }

    .result-title-area{
        text-align:center;
    }

    .result-title-area h2,
    .result-english{
        display:block;
    }

    .result-title-area h2{
        margin:0 0 14px;
    }

    .result-image-wrapper img{
        border-radius:18px;
    }

    #result-summary{
        font-size:17px;
    }

    .result-groups-title{
        font-size:18px;
    }

    .result-groups-list{
        grid-template-columns:1fr;
    }

    .result-buttons{
        flex-direction:column;
    }

    .main-button,
    .secondary-button{
        width:100%;
    }

}


/* 動畫敏感使用者 */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}/* Speci⁺ v2.2: the quiz remains a secondary experience within the exhibition. */
:root{--orange:#f7941d;--blue:#24589b;--white:#f3f2ee;--black:#0a0a0a}
body{font-weight:400}h1,h2,h3,.intro-content h1,.result-title-area h2,.loading-content h2{font-family:'Noto Serif TC',serif!important;letter-spacing:-.03em}
.eyebrow,.result-english,#question-number{font-family:'Noto Sans TC',sans-serif}
#intro-screen{background:#0a0a0a}#question-screen.theme-blue{background:#24589b}#question-screen.theme-orange{background:#f7941d;color:#0a0a0a}
.theme-orange .quiz-brand,.theme-orange .exit-button,.theme-orange #question-number{color:#0a0a0a}
.main-button,.secondary-button,.answer-button,.result-image-wrapper img,.result-group-card{border-radius:2px!important}
.answer-button:focus-visible{outline:3px solid #fff;outline-offset:5px}.theme-orange .answer-button:focus-visible{outline-color:#0a0a0a}
.main-button:hover{background:#f7941d;color:#0a0a0a}.intro-circle{animation:none!important}
:focus-visible{outline:3px solid #3b6cff;outline-offset:5px}h1:focus,h2:focus,main:focus{outline:none}
.skip-link{position:fixed;top:-100px;left:16px;padding:12px 20px;background:#f3f2ee;color:#0a0a0a;z-index:1000}.skip-link:focus{top:12px}
.quiz-footer{padding:28px 6%;display:flex;gap:20px 40px;flex-wrap:wrap;background:#f3f2ee;color:#0a0a0a;font-size:13px}.quiz-footer a{min-height:44px;display:flex;align-items:center}
@media(max-width:767px){.intro-content h1{font-size:clamp(36px,8.5vw,60px);line-height:1.5;letter-spacing:-.03em}.quiz-header{gap:16px}.quiz-footer{flex-direction:column}}

#result-screen{background:#101010}.quiz-footer{background:#d8d8d8}.theme-orange .answer-button{color:#111}.theme-blue .answer-button{color:#fff}
/* All quiz controls share the site's button corner radius. */
button,[role="button"],.main-button,.secondary-button,.answer-button{border-radius:12px!important}
/* Avoid enlarging the ~714px result artwork beyond its native resolution. */
.result-image-wrapper,.result-information{width:min(100%,700px)}