:root {
    /* ── 顏色 Colors ── */
    --color-primary: #022169;
    --color-primary-dark: #021D5A;
    --color-primary-light: #3993C1;
    --color-gold: #FECF13;
    --color-gold-hover: #f0c310;
    --color-blue: #0549E8;
    --color-white: #ffffff;
    --color-gray: #D9D9D9;
    --color-gray-light: #f0f2f5;
    --color-black: #000000;
    --color-text-dark: #222222;
    --color-text-body: #333333;
    --color-timer-urgent: #ff4444;
    --color-deco-ring: #7DE8FA;
    --color-deco-star: #FEEEB1;
    --color-disabled-text: #939598;
    --color-selected-bg: #e8efff;
    --color-shadow-dark: rgba(0, 18, 60, 0.4);
    --color-shadow-gold: rgba(254, 207, 19, 0.35);
    --color-shadow-gold-strong: rgba(254, 207, 19, 0.7);
    --color-shadow-blue: rgba(5, 73, 232, 0.35);
    --color-shadow-white: rgba(255, 255, 255, 0.15);
    --color-shadow-soft: rgba(5, 73, 232, 0.12);
    --color-white-alpha-08: rgba(255, 255, 255, 0.08);
    --color-white-alpha-12: rgba(255, 255, 255, 0.12);
    --color-white-alpha-20: rgba(255, 255, 255, 0.2);
    --color-white-alpha-25: rgba(255, 255, 255, 0.25);
    --color-white-alpha-30: rgba(255, 255, 255, 0.3);
    --color-white-alpha-40: rgba(255, 255, 255, 0.4);
    --color-white-alpha-60: rgba(255, 255, 255, 0.6);
    --color-white-alpha-80: rgba(255, 255, 255, 0.8);
    --color-white-alpha-90: rgba(255, 255, 255, 0.9);
    --color-gold-alpha-60: rgba(254, 207, 19, 0.6);
    --color-white-alpha-05: rgba(255, 255, 255, 0.05);
    --color-white-alpha-15: rgba(255, 255, 255, 0.15);
    --color-white-alpha-50: rgba(255, 255, 255, 0.5);
    --color-white-alpha-92: rgba(255, 255, 255, 0.92);
    --color-deco-ring-alpha-30: rgba(125, 232, 250, 0.3);
    --color-deco-ring-alpha-25: rgba(180, 201, 248, 0.25);
    --color-deco-ring-alpha-20: rgba(125, 232, 250, 0.2);

    /* ── 字體 Fonts ── */
    --font-family-en: 'Red Hat Text', sans-serif;
    --font-family-zh: 'Noto Sans TC', sans-serif;

    /* ── 字型大小 Font Sizes ── */
    --font-size-xs: 10px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-normal: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 24px;
    --font-size-4xl: 32px;
    --font-size-5xl: 40px;
    --font-size-6xl: 48px;
    --font-size-7xl: 72px;
    --font-size-8xl: 96px;

    /* ── 間距 Spacing ── */
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
    --spacing-xl: 12px;
    --spacing-2xl: 16px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 36px;
    --spacing-6xl: 40px;
    --spacing-7xl: 48px;
    --spacing-8xl: 130%;

    /* ── 尺寸 Sizing ── */
    --btn-height: 46px;
    --max-width: 576px;
    --header-height: 60px;
    --score-circle-size: 180px;
    --timer-icon-size: 20px;
    --logo-height: 36px;
    --logo-mark-size: 30px;

    /* ── 邊框半徑 Border Radius ── */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 24px;
    --radius-full: 50%;

    /* ── 陰影 Shadows ── */
    --shadow-card: 12px -12px 20px var(--color-shadow-dark);
    --shadow-btn-gold: 0 6px 20px var(--color-shadow-gold);
    --shadow-btn-gold-sm: 0 2px 8px var(--color-shadow-gold);
    --shadow-btn-blue: 0 4px 16px var(--color-shadow-blue);
    --shadow-btn-white: 0 6px 20px var(--color-shadow-white);
    --shadow-btn-white-sm: 0 2px 8px var(--color-shadow-white);
    --shadow-hover-blue: 0 4px 16px var(--color-shadow-soft);
    --shadow-glow-gold: 0 0 20px var(--color-shadow-gold);
    --shadow-glow-gold-strong: 0 0 60px var(--color-shadow-gold-strong);

    /* ── 動畫時長 Animation Durations ── */
    --duration-fast: 0.15s;
    --duration-medium: 0.3s;
    --duration-slow: 0.45s;
    --duration-slower: 0.8s;
    --duration-shimmer: 2.2s;
    --duration-pulse: 0.8s;
    --duration-glow: 2.5s;
    --duration-countup: 1800ms;

    /* ── 過渡曲線 Easing ── */
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce: cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Z-index ── */
    --z-base: 0;
    --z-content: 1;
    --z-overlay: 2;
}

/* ── RESET ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── 修復：html, body 佔滿視口，禁止雙重滾動 ── */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    font-size: 16px;
}

body {
    font-family: var(--font-family-en), var(--font-family-zh), sans-serif;
    background: var(--color-primary);
   /* display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    min-height: 100%;
    overflow: hidden;*/
    
}

.jc-common-header-nav-left {
	display: flex;
    flex-direction: row;
    align-items: center;
}

/* ── 所有 screen 改為全屏可滾動容器 ── */
.screen {
    display: none;
    width: 100%;
    max-width: var(--max-width);
    flex-direction: column;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 93.4svh;
    /*height: 100dsvh;*/
	background:#369bb8!important;
  /*  overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: var(--z-content);
    overscroll-behavior: contain;
    touch-action: pan-y;*/
    
}

.screen.active {
    display: flex;
}

/* ── 自定義滾動條 — 移動設備上更自然 ── */
.screen::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.screen::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.screen::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.30);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

.screen::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.50);
}

.screen::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.65);
}

/* ── GRADIENTS (使用變數) ── */

/*
.bg-gradient {
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}*/

.bg-gradient-landing {
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 71.675%);
}

/* ── LOGO ── */
.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 700;
    color: var(--color-white);
    font-size: var(--font-size-sm);
    letter-spacing: 0.5px;
}

.logo-mark {
    width: var(--logo-mark-size);
    height: var(--logo-height);
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    color: var(--color-gold);
    font-weight: 900;
    flex-shrink: 0;
}

.logo svg {
    width: 120px;
    height: var(--logo-height);
}

/* ── FOOTER ── */
.footer {
   /* background: var(--color-primary);*/
    padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-2xl);
    width: 100%;
}

.footer p {
    font-family: var(--font-family-zh), sans-serif;
    font-size: var(--font-size-xs);
    color: var(--color-white);
    line-height: 1.4;
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.2px;
}

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

/* ── BUTTONS ── */
.btn-primary {
    display: block;
    width: 100%;
    height: var(--btn-height);
    background: var(--color-gold);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family-en), sans-serif;
    font-weight: 500;
    font-size: var(--font-size-base);
    cursor: pointer;
    text-align: center;
    line-height: var(--btn-height);
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease,
        background var(--duration-fast) ease;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    background: var(--color-gold-hover);
  /*  transform: translateY(-2px);*/
    box-shadow: var(--shadow-btn-gold);
}

.btn-primary:active {
    transform: scale(0.96);
    box-shadow: var(--shadow-btn-gold-sm);
}

.btn-primary:disabled {
    background: var(--color-gray);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-secondary {
    display: block;
    width: 100%;
    height: var(--btn-height);
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    border-radius: var(--radius-md);
    font-family: var(--font-family-en), sans-serif;
    font-weight: 500;
    font-size: var(--font-size-base);
    cursor: pointer;
    text-align: center;
    line-height: calc(var(--btn-height) - 4px);
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease,
        background var(--duration-fast) ease, border-color var(--duration-fast) ease;
    position: relative;
    overflow: hidden;
    margin: 0 !important;
	
}

.btn-secondary:hover {
    background: var(--color-white-alpha-12);
   /* transform: translateY(-2px);*/
    box-shadow: var(--shadow-btn-white);
}

.btn-secondary:active {
    transform: scale(0.96);
    box-shadow: var(--shadow-btn-white-sm);
}

.btn-secondary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ══════════════════════ SCREEN 1 — LANDING ══════════════════════════════ */
#screen-landing {
   /* background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 72%);*/
    justify-content: flex-start;
   /* overflow-y: auto;
    -webkit-overflow-scrolling: touch;*/
}


#screen-landing.screen {
   background: #022169!important;
   
}

.landing-hero {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--spacing-7xl);
    gap: var(--spacing-5xl);
    position: relative;
    z-index: var(--z-content);
    width: 100%;
}

.landing-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.prize-row {
	display:none!important;
}

.trophy-icon {
    width: 44px;
    height: 55px;
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-5xl);
	display:none!important;
}

.landing-zh-title {
    font-size: var(--font-size-4xl);
    font-weight: 900;
    color: var(--color-white);
    text-align: center;
    line-height: 1.1;
    text-shadow: 3px 3px 0 var(--color-primary-dark), -1px -1px 0 var(--color-primary-dark),
        1px -1px 0 var(--color-primary-dark), -1px 1px 0 var(--color-primary-dark);
    letter-spacing: 1px;
    font-family: var(--font-family-zh), sans-serif;
}

.landing-en-title {
    font-family: var(--font-family-en), sans-serif;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-white);
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 var(--color-primary-dark);
}

.landing-period {
    text-align: center;
    color: var(--color-white);
}

.landing-period .label {
    font-size: var(--font-size-normal);
    font-weight: 500;
    line-height: var(--spacing-3xl);
    display: block;
    font-family: var(--font-family-zh), sans-serif;
}

.landing-period .date {
    font-family: var(--font-family-en), sans-serif;
    font-size: var(--font-size-2xl);
    font-weight: 600;
    line-height: var(--spacing-4xl);
    display: block;
}

.deco-ring {
    position: absolute;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-deco-ring);
    opacity: 0.4;
    pointer-events: none;
}

.landing-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6xl);
    align-items: center;
    padding-bottom: var(--spacing-3xl);
    z-index: var(--z-content);
    padding-top: var(--spacing-8xl);
    flex: 0 0 auto;
   /* margin-top: auto;*/
}

.landing-bottom-btn {
    width: calc(100% - var(--spacing-4xl));
}

.landing-card-bg {
    width: 100%;
   /* background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-card);*/
}

/* ══════════════════════ SCREEN 2 — INTRODUCTION ══════════════════════════════ */
#screen-intro {
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    justify-content: flex-start;
  /*  overflow-y: auto;
    -webkit-overflow-scrolling: touch;*/
}


#screen-intro.screen {
    background: #369bb8!important;
    justify-content: flex-start;
	height: 130vh!important;
  /*  overflow-y: auto;
    -webkit-overflow-scrolling: touch;*/
}

@media (min-width: 576px) {
	#screen-intro.screen {
 background: #369bb8!important;
    justify-content: flex-start;
	height: 180vh!important;
}
}

.intro-content {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
   /* padding: var(--spacing-7xl) var(--spacing-2xl) 0;
    gap: var(--spacing-3xl);*/
    width: 100%;
}

.intro-rule-text {
   /* font-size: var(--font-size-xl);
    font-weight: 500;*/
    color: var(--color-white);
    /*text-align: center;*/
    line-height: 1.5;
    width: 100%;
    max-width: 390px;
    font-family: var(--font-family-zh), sans-serif;
	margin: 0 auto;
}

.intro-rule-text .highlight {
    color: var(--color-gold);
    font-size: var(--font-size-3xl);
    font-weight: 900;
    font-family: var(--font-family-en), sans-serif;
}

.intro-rule-en {
    /*font-size: var(--font-size-normal);*/
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    line-height: 1.6;
    width: 100%;
    max-width: 320px;
    margin-top: -12px;
    font-family: var(--font-family-en), sans-serif;
}

.intro-rule-en .highlight {
    color: var(--color-gold);
}

.intro-prizes {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-5xl);
}

.prizes-heading {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    line-height: 1.5;
    font-family: var(--font-family-en), var(--font-family-zh), sans-serif;
}

.prize-row {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.prize-img {
    width: 84px;
    height: 52px;
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-hover));
    border-radius: var(--radius-md);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    overflow: hidden;
}

.prize-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prize-info {
    flex: 1;
}

.prize-rank {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-white);
    line-height: 1.5;
    font-family: var(--font-family-en), var(--font-family-zh), sans-serif;
}

.prize-desc {
    font-size: var(--font-size-base);
    color: var(--color-white);
    line-height: 1.5;
    font-family: var(--font-family-zh), sans-serif;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.intro-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6xl);
    align-items: center;
    padding-bottom: var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
    flex: 0 0 auto;
   /* margin-top: auto;*/
}

.intro-bottom-btn {
    width: calc(100% - var(--spacing-4xl));
}

/* ══════════════════════ SCREEN 3 — QUIZ ══════════════════════════════ */
#screen-quiz {
    /*background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);*/
    justify-content: flex-start;
  /*  overflow-y: auto;
    -webkit-overflow-scrolling: touch;*/
}

.quiz-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xl);
    padding: var(--spacing-7xl) var(--spacing-2xl) 0;
    width: 100%;
    min-height: 0;
}

.quiz-header {
     width: 100%;
    display: flex;
   flex-direction: column;
    gap: var(--spacing-3xl);
    flex: 0 0 auto;
}

.quiz-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.quiz-q-label {
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--color-white);
    font-family: var(--font-family-en), var(--font-family-zh), sans-serif;
}

.quiz-q-label span.qnum {
    font-family: var(--font-family-en), sans-serif;
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-white);
}

.quiz-timer {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-white);
}

.timer-icon {
    width: var(--timer-icon-size);
    height: var(--timer-icon-size);
    border: 1.5px solid var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.timer-icon::after {
    content: '';
    position: absolute;
    width: 1.5px;
    height: 5px;
    background: var(--color-white);
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(1px) rotate(45deg);
}

.timer-text {
    font-size: var(--font-size-lg);
    font-weight: 500;
    font-family: var(--font-family-en), sans-serif;
    line-height: 1;
    min-width: 48px;
    transition: color var(--duration-medium) ease;
}

.timer-text.urgent {
    color: var(--color-timer-urgent);
    animation: pulseTimer var(--duration-pulse) ease-in-out infinite;
}

@keyframes pulseTimer {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

.progress-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.progress-bar-track {
    width: 100%;
    height: 4px;
    background: var(--color-gray);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: var(--color-gold);
    border-radius: var(--radius-sm);
    transition: width var(--duration-slower) var(--ease-spring);
    width: 0%;
    position: relative;
    overflow: hidden;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-white-alpha-50), transparent);
    animation: shimmerProgress var(--duration-shimmer) ease-in-out infinite;
}

@keyframes shimmerProgress {
    0% {
        left: -30%;
    }

    100% {
        left: 130%;
    }
}

.progress-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.progress-completed {
    font-family: var(--font-family-en), sans-serif;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.4px;
}

.progress-count {
    font-family: var(--font-family-en), sans-serif;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.4px;
}

/* ── QUESTION CARD ── */
.question-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    will-change: transform, opacity;
    margin-bottom: var(--spacing-5xl);
    flex: 0 0 auto;
}

.question-card.slide-in {
    animation: slideInCard var(--duration-slow) var(--ease-spring) forwards;
}

@keyframes slideInCard {
    0% {
        opacity: 0;
        transform: translateY(32px) scale(0.97);
    }

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

.q-image-wrap {
    width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    position: relative;
}

.q-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 200px;
    object-fit: cover;
}

.q-image-placeholder {
    width: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-6xl);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-weight: 600;
    text-shadow: 0 2px 8px var(--color-shadow-dark);
}

.q-image-placeholder .label {
    font-size: var(--font-size-base);
    font-weight: 400;
    opacity: 0.9;
    font-family: var(--font-family-zh), sans-serif;
}

.question-text-zh {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-black);
    line-height: 1.6;
    font-family: var(--font-family-en), var(--font-family-zh), sans-serif;
    margin-bottom: var(--spacing-xs);
}

.question-text-en {
    font-size: 18px;
    color: var(--color-black);
    line-height: 1.6;
    font-family: var(--font-family-en), sans-serif;
    font-weight: 400;
    letter-spacing: 0.2px;
    margin-top: -8px;
}

.answers-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.answer-btn {
    width: 100%;
    min-height: var(--spacing-7xl);
    padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-md) var(--spacing-2xl);
    border: 1px solid var(--color-gray);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    text-align: left;
    font-size: var(--font-size-base);
    color: var(--color-black);
    font-family: var(--font-family-zh), sans-serif;
    font-weight: 400;
    cursor: pointer;
    line-height: 1.5;
    letter-spacing: 0.2px;
    transition: background var(--duration-fast), color var(--duration-fast),
        border-color var(--duration-fast), transform var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease;
    position: relative;
}

.answer-btn:hover {
    border-color: var(--color-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover-blue);
}

.answer-btn:active {
    transform: scale(0.97);
}

.answer-btn.selected {
    background: var(--color-blue);
    color: var(--color-white);
    border-color: var(--color-blue);
    box-shadow: var(--shadow-btn-blue);
    transform: scale(1.02);
}

.answer-btn.selected::after {
   /* content: '✓';*/
    position: absolute;
    right: var(--spacing-2xl);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-white);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1;
}

/* ── IMAGE GRID ANSWERS ── */
.answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.answer-img-btn {
    border: 2px solid var(--color-gray);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
    transition: border-color var(--duration-fast), background var(--duration-fast),
        transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    font-family: var(--font-family-zh), sans-serif;
    gap: var(--spacing-sm);
    min-height: 100px;
    text-align: center;
    position: relative;
}

.answer-img-btn:hover {
    border-color: var(--color-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover-blue);
}

.answer-img-btn:active {
    transform: scale(0.96);
}

.answer-img-btn.selected {
    border-color: var(--color-blue);
    border-width: 2px;
    background: var(--color-selected-bg);
    box-shadow: var(--shadow-btn-blue);
    transform: scale(1.04);
}

.answer-img-btn.selected .label {
    color: var(--color-blue);
    font-weight: 500;
}

.answer-img-btn.selected::after {
    content: '✓';
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-md);
    color: var(--color-blue);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 4px var(--color-white-alpha-60);
}

.answer-img-btn .img-placeholder {
    width: 100%;
    min-height: 60px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4xl);
    background: var(--color-gray-light);
    padding: var(--spacing-xs);
    overflow: hidden;
}

.answer-img-btn .img-placeholder img {
    width: 100%;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.answer-img-btn .label {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-dark);
    line-height: 1.4;
    letter-spacing: 0.2px;
    transition: color var(--duration-fast);
    font-family: var(--font-family-zh), sans-serif;
}

/* ── QUIZ FOOTER ── */
.quiz-footer {
    width: 100%;
    padding: 0 var(--spacing-2xl) var(--spacing-3xl);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    /*margin-top: auto;*/
}

.quiz-footer .btn-row {
    display: flex;
    gap: var(--spacing-lg);
}

.quiz-footer .btn-row .btn-secondary,
.quiz-footer .btn-row .btn-primary {
    flex: 1;
    width: auto;
}

/* ══════════════════════ SCREEN 4 — RESULT ══════════════════════════════ */
#screen-result {
   /* background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;*/
}

@media (min-width: 576px) {
div#screen-result {
    height: 140svh;
}
}


.result-hero {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xl);
    padding: var(--spacing-7xl) var(--spacing-2xl) var(--spacing-4xl);
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    max-width: 400px;
}

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

.result-title-zh {
    font-family: var(--font-family-zh), sans-serif;
    font-size: var(--font-size-lg);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.6;
    letter-spacing: 1px;
    display: block;
}

.result-title-en {
    font-family: var(--font-family-en), sans-serif;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 1px;
    display: block;
}

.score-circle {
    width: var(--score-circle-size);
    height: var(--score-circle-size);
    border-radius: var(--radius-full);
    background: var(--color-white-alpha-08);
    border: 3px solid var(--color-gold-alpha-60);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    position: relative;
}

@keyframes scorePop {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }

    60% {
        transform: scale(1.15);
        opacity: 1;
    }

    80% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 20px var(--color-shadow-gold), inset 0 0 20px var(--color-white-alpha-05);
    }

    50% {
        box-shadow: var(--shadow-glow-gold-strong), inset 0 0 40px var(--color-white-alpha-15);
    }

    100% {
        box-shadow: 0 0 20px var(--color-shadow-gold), inset 0 0 20px var(--color-white-alpha-05);
    }
}

.score-circle.animate-in {
    animation: scorePop var(--duration-slower) var(--ease-spring) forwards,
        glowPulse var(--duration-glow) ease-in-out calc(var(--duration-slower)) infinite;
}

.score-number {
    font-family: var(--font-family-en), sans-serif;
    font-size: var(--font-size-8xl);
    font-weight: 900;
    color: var(--color-gold);
    line-height: 1;
    text-shadow: 0 0 30px var(--color-shadow-gold), 0 0 60px var(--color-shadow-gold);
    transition: text-shadow var(--duration-medium) ease;
    min-width: 100px;
    text-align: center;
}

.score-label {
    font-family: var(--font-family-en), sans-serif;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-white-alpha-90);
    letter-spacing: 0.4px;
    text-align: center;

    margin-top: -8px;
}

.result-subtitle {
    font-size: var(--font-size-normal);
    color: var(--color-white-alpha-80);
    text-align: center;
    line-height: 1.5;
    font-family: var(--font-family-en), var(--font-family-zh), sans-serif;
}

.result-time {
    font-size: var(--font-size-normal);
    color: var(--color-white-alpha-92);
    text-align: center;
    line-height: 1.5;
    font-family: var(--font-family-en), var(--font-family-zh), sans-serif;
    margin-top: var(--spacing-2xs);
    letter-spacing: 0.5px;
    font-weight: 500;
}

.result-bottom {
    width: 100%;
    padding: 0 0 var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    flex: 0 0 auto;
    z-index: var(--z-content);
    max-width: 400px;
    margin-top: var(--spacing-lg);
}

/* ══════════════════════ SCREEN 5 — TIMEOUT ══════════════════════════════ */
#screen-timeout {
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


#screen-timeout .btn-secondary {

    margin: 0 !important;
	max-width: 360px;
}





.timeout-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4xl);
    padding: var(--spacing-7xl) var(--spacing-2xl) var(--spacing-4xl);
    z-index: var(--z-content);
    width: 100%;
    max-width: 400px;
}

.timeout-icon {
    font-size: var(--font-size-7xl);
    line-height: 1;
    text-align: center;
    animation: timeoutPulse 1.2s ease-in-out infinite;
}

@keyframes timeoutPulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.08) rotate(2deg);
    }
}

.timeout-text {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    line-height: 1.6;
    font-family: var(--font-family-en), var(--font-family-zh), sans-serif;
    max-width: 320px;
}

.timeout-text .highlight {
    color: var(--color-gold);
}

.timeout-text-en {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    line-height: 1.6;
    font-family: var(--font-family-en), sans-serif;
    max-width: 320px;
    margin-top: -20px;
}

.timeout-text-en .highlight {
    color: var(--color-gold);
}

.timeout-bottom {
    width: 100%;
    padding: 0 var(--spacing-2xl) var(--spacing-3xl);
    z-index: var(--z-content);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6xl);
    align-items: center;
    max-width: 400px;
}

/* ── DECORATIVE ── */
.deco-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: var(--z-base);
	display:none;
}

.deco-ring-1 {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-deco-ring-alpha-30);
    top: -80px;
    right: -100px;
	display:none;
}

.deco-ring-2 {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-deco-ring-alpha-25);
    bottom: 80px;
    left: -60px;
	display:none;
}

.deco-ring-3 {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-deco-ring-alpha-20);
    top: 200px;
    left: -30px;
	display:none;
}

.deco-star {
    position: absolute;
    color: var(--color-deco-star);
    font-size: var(--font-size-base);
    opacity: 0.7;
    display: none;
}

.deco-diamond {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-gold);
    transform: rotate(45deg);
    opacity: 0.6;
	display:none;
}

.deco-ring-1 {
    border-color: rgba(125, 232, 250, 0.3);
}

.deco-ring-2 {
    border-color: rgba(180, 201, 248, 0.25);
}

.deco-ring-3 {
    border-color: rgba(125, 232, 250, 0.2);
}

.quiz-body::-webkit-scrollbar {
    width: 0;
}

.intro-content::-webkit-scrollbar {
    width: 0;
}

.screen {
    transition: opacity var(--duration-medium) ease;
    opacity: 1;
}

/* ── 響應式 ── */
@media (max-width: 375px) {
    .screen {
        width: 100vw;
    }

    .footer {
        width: 100%;
    }
}

.landing-cover-image {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: auto;
    pointer-events: none;
}

img.gift-cover-image {
    width: 100%;
}

.hkjc-logo-for-game {
    width: 100%;
    max-width: 144px;
}

.answer-img-btn .img-placeholder img {
    object-fit: cover;
    max-height: 72px;
    width: 100%;
}

.q-image-wrap img {
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}
  .intro-content {
       padding-top: var(--spacing-5xl);
    }

/* ── 修復：小屏設備上確保 footer 卡片完整顯示 ── */
@media (max-width: 480px) {
    .landing-hero {
        padding-top: var(--spacing-5xl);
        gap: var(--spacing-3xl);
    }

    .landing-bottom {
       /* padding-top: var(--spacing-5xl);*/
        gap: var(--spacing-4xl);
    }

  
    .quiz-body {
        padding-top: var(--spacing-5xl);
    }

    .result-hero {
        padding-top: var(--spacing-5xl);
    }

    .timeout-body {
        padding-top: var(--spacing-5xl);
    }

    .score-circle {
        width: 150px;
        height: 150px;
    }

    .score-number {
        font-size: var(--font-size-7xl);
    }
}

/* 額外安全：screen 內所有內容不溢出 */
.screen>* {
    max-width: 100%;
    flex-shrink: 0;
}

/* 修復 result 頁面按鈕寬度 */
#screen-result .result-bottom .btn-primary,
#screen-result .result-bottom .btn-secondary {
    width: 100%;
}






/* survey start */

/* ── RESET / BASE ── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    min-height: 100svh;
    min-height: 100dsvh;
    /* dynamic viewport height for mobile */
    font-family: 'Red Hat Text', 'Noto Sans TC', sans-serif;
    background: #022169;
    /* display: flex;
   justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;*/
    /* smooth iOS scroll */
  /*  padding: 0 0 20px 0;*/
}

/* ── SCROLLBAR STYLING (mobile‑native look) ── */
body::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ── PAGES ── */
.page {
    display: none;
    width: 100%;
    max-width: 576px;
    min-height: 100svh;
    min-height: 100dsvh;
    flex-direction: column;
    flex-shrink: 0;
    margin: 0 auto;
    /* horizontal center */
    padding: 0 0 20px 0;
    /* extra bottom space for scroll */
    position: relative;
}

.page.active {
    display: flex;
}

/* ── HEADER ── */
.header {
    padding: 24px 12px 0;
    /*display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    width: 100%;
    flex-shrink: 0;*/
}

.title-row {
    display: flex;
   
}

.star {
    color: #FECF13;
    font-size: 18px;
}

.title-text {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.title-text span {
    font-size: 20px;
    font-weight: 500;
}

.score-row {
 
	    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
   
    display: flex;
    padding: var(--spacing-16, 16px);
    /* flex-direction: column; */
    align-items: flex-start;
    gap: var(--spacing-16, 16px);
    align-self: stretch;
    margin-top: 20px;
    border-radius: var(--radius-MD, 8px);
background: var(--background-lightBlue, rgba(230, 233, 243, 0.40));
}

.score-label {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.4px;
}

#survey .score-label {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.4px;
	margin-top: 0px!important;
}

.score-num {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

/* ── CARD ── */
.card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    width: calc(100% - 32px);
    margin: 24px auto 0;
    /* center horizontally */
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

.card-subtitle {
    font-size: 14px;
    color: #000;
    line-height: 20px;
}

/* ── FIELD ── */
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.field-label .req {
    color: #d0021b;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
    width: 100%;
    height: 48px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 14px;
    color: #000;
    outline: none;
    transition: border-color .2s;
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
    border-color: #022169;
}

input.error {
    border-color: #d0021b !important;
}

.phone-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    height: 48px;
    overflow: hidden;
    transition: border-color .2s;
    background: #fff;
}

.phone-wrapper:focus-within {
    border-color: #022169;
}

.phone-wrapper.error {
    border-color: #d0021b;
}

.phone-prefix {
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    border-right: 1px solid #c4c4c4;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    background: #f7f7f7;
}

.phone-wrapper input {
    border: none;
    border-radius: 0;
    flex: 1;
    height: 100%;
    min-width: 0;
    background: transparent;
}

.phone-wrapper input:focus {
    outline: none;
}

.err-msg {
    font-size: 12px;
    color: #d0021b;
    margin-top: 2px;
    display: none;
	font-weight: 500;
}

.err-msg.show {
    display: block;
}

/* ── RADIO GROUP ── */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
}

.radio-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-circle {
    width: 20px;
    height: 20px;
    border: 2px solid #c4c4c4;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s;
}

.radio-item input[type="radio"]:checked+.radio-circle {
    border-color: #022169;
}

.radio-item input[type="radio"]:checked+.radio-circle::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #022169;
    border-radius: 50%;
}

.radio-item-label {
    font-size: 14px;
    color: #000;
    line-height: 20px;
}

.radio-group.error .radio-circle {
    border-color: #d0021b;
}

/* ── SURVEY (6 options horizontal-ish) ── */
.survey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.survey-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    transition: border-color .2s, background .2s;
    background: #fff;
}

.survey-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.survey-item input[type="radio"]:checked~.survey-label {
    color: #022169;
    font-weight: 600;
}

.survey-item:has(input:checked) {
    border-color: #022169;
    background: #eef1f9;
}

.survey-circle {
    width: 20px;
    height: 20px;
    border: 2px solid #c4c4c4;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s;
}

.survey-item:has(input:checked) .survey-circle {
    border-color: #022169;
}

.survey-item:has(input:checked) .survey-circle::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #022169;
    border-radius: 50%;
}

.survey-label {
    font-size: 13px;
    color: #333;
    line-height: 18px;
}

.survey-grid.error .survey-item {
    border-color: #ffb3b3;
}

.survey-grid.error .survey-item:has(input:checked) {
    border-color: #022169;
}

/* ── CHECKBOXES ── */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid #c4c4c4;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: border-color .2s, background .2s;
    background: #fff;
}

.checkbox-item input:checked+.checkbox-box {
    background: #022169;
    border-color: #022169;
}

.checkbox-item input:checked+.checkbox-box::after {
    content: '✓';
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.checkbox-text {
    font-size: 12px;
    color: #333;
    line-height: 18px;
	font-weight: 500;
}

.checkbox-text a {
    color: #022169;
    text-decoration: underline;
}

.checkbox-group.error .checkbox-box {
    border-color: #d0021b;
}

.checkbox-group.error .checkbox-item input:checked+.checkbox-box {
    border-color: #022169;
}

/* ── DIVIDER ── */
.divider {
    height: 1px;
    background: #e8e8e8;
    width: 100%;
    flex-shrink: 0;
}

/* ── SUBMIT AREA ── */
.submit-area {
    padding: 24px 16px 12px;
    width: 100%;
    max-width: 576px;
    margin: 0 auto;
    flex-shrink: 0;
}

.btn-primary {
    width: 100%;
    height: 46px;
    background: #FECF13;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #022169;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: opacity .2s;
    -webkit-tap-highlight-color: transparent;
}


#screen-landing .btn-primary {
    
	max-width: 360px;
   
}

#screen-intro .btn-primary {
   
	max-width: 360px;
   
}



.btn-primary:hover {
    opacity: 0.9;
}

.btn-primary:hover {
    color: #022169!important;
   
}

.btn-secondary {
    width: 100%;
    height: 46px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: opacity .2s;
    margin-top: 12px;
    -webkit-tap-highlight-color: transparent;
}

.btn-secondary:hover {
    opacity: 0.8;
}

/* ── SUCCESS PAGE ── */
.success-header {
    padding: 48px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /*align-items: center;*/
    width: 100%;
    flex-shrink: 0;
}

.success-icon {
    font-size: 44px;
    text-align: center;
}

.success-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
   /* align-items: center;*/
}

.success-title p {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 32px;
}

.success-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
   /* padding: 16px;*/
    width: calc(100% - 32px);
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

.success-card p {
    font-size: 12px;
    color: #fff;
    line-height: 16px;
    letter-spacing: 0.2px;
}

.success-images {
    width: calc(100% - 32px);
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

.success-images .img-placeholder {
    width: 100%;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
}

.success-images .img-placeholder:nth-child(1) {
    height: 200px;
}

.success-images .img-placeholder:nth-child(2) {
    height: 160px;
}

/* ── SPACER ── */
.spacer {
    flex: 1;
    min-height: 8px;
}

/* ── RESPONSIVE TWEAKS ── */
@media (max-width: 480px) {
    .card {
        padding: 14px;
        gap: 18px;
    }

    .survey-grid {
        gap: 6px;
    }

    .survey-item {
        padding: 6px 8px;
    }

    .survey-label {
        font-size: 12px;
    }

    .title-text {
        font-size: 20px;
    }

    .title-text span {
        font-size: 17px;
    }

    .score-label,
    .score-num {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .survey-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .survey-item {
        padding: 4px 6px;
    }

    .survey-label {
        font-size: 11px;
        line-height: 14px;
    }

    .card {
        padding: 12px;
        gap: 14px;
    }

    input[type="text"],
    input[type="tel"],
    input[type="email"] {
        height: 42px;
        font-size: 13px;
        padding: 0 12px;
    }

    .phone-wrapper {
        height: 42px;
    }

    .phone-prefix {
        font-size: 13px;
        padding: 0 10px;
    }

    .btn-primary,
    .btn-secondary {
        height: 42px;
        font-size: 13px;
    }
}

/* ── LANDSCAPE PHONE ── */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding-top: 12px;
        gap: 12px;
    }

    .card {
        margin-top: 12px;
        gap: 14px;
        padding: 12px;
    }

    .submit-area {
        padding: 12px 16px 8px;
    }

    .success-header {
        padding-top: 20px;
    }

    .success-images .img-placeholder:nth-child(1) {
        height: 120px;
    }

    .success-images .img-placeholder:nth-child(2) {
        height: 100px;
    }

    .spacer {
        min-height: 4px;
    }
}



@media (max-width: 576px) {
.intro-bottom {

    margin-top: auto;
}

.quiz-footer {
 
    margin-top:auto;
}
	
	.screen {
		background:#369bb8!important;
	}
	
	
	body.screen-intro-stage {
		background:#369bb8!important;
	}
	
	body.screen-quiz-stage {
		background:#369bb8!important;
	}
	
	body.screen-result-stage {
		background:#369bb8!important;
	}
	
	body.screen-timeout-stage {
		background:#369bb8!important;
	}

}

#survey .card {
        width: 100%;
        margin: 0px!important;
    }

/* ── LARGER TABLETS / DESKTOP ── */
@media (min-width: 768px) {
    body {
       /* padding: 30px 20px 40px;*/
    }

    .page {
        max-width: 576px;
        min-height: auto;
        padding-bottom: 30px;
    }

    .card {
        width: 100%;
        margin: 24px 0 0;
    }

    .submit-area {
        max-width: 100%;
        padding: 24px 0 0;
    }

    .success-card {
        width: 100%;
        margin: 24px 0 0;
    }

    .success-images {
        width: 100%;
        margin: 24px 0 0;
    }
}

/* ── FIREFOX SCROLLBAR ── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.08);
}

/* survey end */


/* start of header */	

.pageHeader  {
	background-color: #021d5a;
}

.quiz-main-header {
    background-color: #021d5a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 40px;
    height: 84px;
	max-width:1440px;
	margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: white;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid white;
    padding-bottom: 2px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.nav-link .arrow {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
}
.nav-link:hover {
    text-decoration: none;
    color: white!important;

}	
	
	    .jc-common-header-brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        flex-shrink: 0;
       /*height: 36px;*/
		height:48px;	
/*background:rgba(255, 255, 255, 0.2);*/
			 margin: 0 8px;
      /*  --jc-common-header-brand-sep-bg: var(--jc-common-header-border);
        --jc-common-header-brand-sep-margin-x: 8px;*/
    }
	
	
    .jc-common-header-brand-sep {
        width: 1px!important;
        height: 100%!important;
        border-radius: 999px;
		        background-color: rgba(255, 255, 255, 0.2)!important;
       height:48px;
        margin: 0 8px;
        flex-shrink: 0;
    }
	
	
	
	
	.jc-common-header-logo-link.is-mobile{
	
	    
        display:none!important;
    }
	
	  .jc-common-header-logo-link.is-desktop {
        display: inline-flex!important;
		    display: flex;
  align-items: center;
  justify-content: center;
		  heigh:48px;
    }

    @media (min-width: 1200px) {
        .jc-common-header-secondary-logo {
            height: 40px!important;
			  display: flex;
  align-items: center;
  justify-content: center;
        }
		
    }
	
	
	
	
	
@media (max-width: 1200px) {
	    .jc-common-header-logo-link.is-desktop {
        display: none!important;
    }
		
		    .jc-common-header-logo-link.is-mobile {
        display: inline-flex!important;
    }
	
	.jc-common-header-secondary-logo {
            height: 36px!important;
		
        }
	
	.quiz-main-header {
    background-color: #021d5a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 6px 8px;
    height: 56px;
		}
		
		.jc-common-header-brand {
        
		height:36px;	

    }
	
	.jc-common-header-secondary-logo {
        height: 28px !important;
		  display: flex;
  align-items: center;
  justify-content: center;
    }
	
/* ── Nav link ── */
.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid white;
    padding-bottom: 2px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.nav-link .arrow {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
}	 
	
	}

@media (min-width: 680px) {

.jc-common-header-logo-link img {
    max-width: 200px;
}
	
	


}
/* end of header */	

.form-page-bg {
	padding:0px;
}

#result-msg {
	display:none!important;
}

.btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
	background: var(--color-gray)!important;
    color: var(--color-disabled-text)!important;
}


.landing-card-bg.footer .logo {
	display:none!important;
}


.game-subtitle {
	font-size:24px;
	font-weight: 600;
	font-family: var(--font-family-zh), sans-serif;
}

.quiz-remark {
	margin-top:16px;
}

.regist-title-text {
	
	color: var(--text-generalTitle, #022169);

/* desktopTC/header/SM */
font-family: var(--font-family-zh), sans-serif;
font-size: var(--fontSize-4XLDesktop, 36px);
font-style: normal;
font-weight: 700;
line-height: var(--fontLineHeight-44Desktop, 44px); /* 122.222% */
}


.mobile-remark {
	font-size:12px;
	color:#fff;
}

#btnHome {
	margin-bottom:20px;
}

button#btnOncourse {
    
    display: none!important;
}

.popup-overlay-html-content .popup-footer {
  
    display: none!important;
}




a {
    color: #fff;
    text-decoration: underline;
}

a:focus {
    color: #fff;
    text-decoration: underline;
}

a:hover {
    color: #fff;
    text-decoration: underline;
}

body.screen-quiz-stage .nav-link {
   display:none!important;
}


body.survey-stage {
	background:#fff!important;
}


body.survey-stage a {
    color: #022169;
    text-decoration: underline;
}

body.survey-stage a:hover {
    color: #022169;
    text-decoration: underline;
}

body.survey-stage a.nav-link {
    color: #fff!important;
    text-decoration: none!important;
}

body.survey-stage a.nav-link:hover {
    color: #fff!important;
    text-decoration: none!important;
}

.btn-primary:active:hover {
    color: #022169;
    background-color: #FECF13;
}

.btn-primary.focus, .btn-primary:focus {
    color: #022169;
    background-color: #FECF13;
    border-color: #122b40;
}

.req {
    color: #d0021b;
}


.survey-stage .btn-primary {
max-width: 360px;
    margin: 0 auto;
}

.coupon-image {

	display:flex;
	 justify-content: center; 
}

.coupon-image img {
	max-width:80%;
	 
}

@media (max-width: 429px) {

    .intro-rule-text {
       
         max-width: 340px;
        
     }

     #screen-intro .btn-primary {
        width: 94%;
        min-width: inherit!important;



    }

    #screen-landing .btn-primary {
        width: 94%;
        min-width: inherit!important;



    }

    .survey-stage .btn-primary {
        width: 94%;
        min-width: inherit!important;



    }
    }


@media (max-width: 375px) {

    .intro-rule-text {
       
         max-width: 300px;
        
     }

	
body {
 
    font-size: 14px;
}	
	
	
.game-subtitle {
	font-size:20px;
	font-weight: 600;
}	
	
.question-text-zh {
    font-size: 16px;
   
}

.question-text-en {
    font-size: 16px;
 
}
	
	
}


@media (max-width: 350px) {

    .intro-rule-text {
       
         max-width: 260px;
        
     }

#screen-intro.screen {
    
    height: 140svh;
}
	
}