/* MoneyHero HK · MoneyHero 智力王 (TI Q4 Tour Campaign) · game styles.
   Derived from the live tax-quiz.css, scope renamed to .mhg-ti-quiz, then
   pruned 2026-10-02 to the rules this game uses (Chrome-parsed; every rule
   that defines a design-system token kept). Verified: computed style of all
   330 game element states unchanged at 390 and 1440px. */
:root { --color-blue-50: #e7ebf6; --color-blue-100: #c2cbe9; --color-blue-700: #2257b8; --color-blue-900: #002981; --color-blue-950: #001a5c; --color-teal-50: #e0f4f8; --color-teal-700: #04709b; --color-teal-900: #004a68; --color-amber-400: #ffaf26; --color-amber-700: #ef6c00; --color-amber-800: #e65100; --color-amber-900: #8d4501; --color-olive-700: #5d8433; --color-olive-900: #3d6a01; --color-green-50: #e8f5e9; --color-green-500: #16a34a; --color-green-700: #33691e; --color-red-50: #ffebee; --color-red-500: #dc2626; --color-red-700: #b71c1c; --color-yellow-50: #fffbeb; --color-yellow-100: #fff9c4; --color-yellow-500: #d97706; --color-yellow-700: #92400e; --color-yellow-800: #6a4a19; --color-orange-50: #fff3e0; --color-orange-700: #bf360c; --color-gray-50: #fafafa; --color-gray-100: #f5f5f5; --color-gray-200: #e0e0e0; --color-gray-300: #bdbdbd; --color-gray-400: #9e9e9e; --color-gray-500: #757575; --color-gray-600: #616161; --color-gray-700: #424242; --color-gray-800: #212121; --color-gray-900: #111111; --color-white: #ffffff; --color-black: #000000; --color-blue-50-rgb: 231, 235, 246; }
:root { --font-sans: 'Albert Sans', 'PingFang HK', 'PingFang TC', 'Noto Sans CJK TC', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-sans-tc: 'Albert Sans', 'PingFang HK', 'PingFang TC', 'Noto Sans CJK TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --display-1-size: 20px; --display-1-lh: 24px; --display-1-weight: 700; --display-1-blog-lh: 26px; --display-2-size: 24px; --display-2-lh: 31px; --display-2-weight: 700; --display-3-size: 28px; --display-3-lh: 36px; --display-3-weight: 700; --display-4-size: 28px; --display-4-lh: 36px; --display-4-weight: 700; --display-5-size: 34px; --display-5-lh: 40px; --display-5-weight: 700; --title-1-size: 18px; --title-1-lh: 22px; --title-1-weight: 700; --title-2-size: 16px; --title-2-lh: 20px; --title-2-weight: 700; --subheading-1-size: 18px; --subheading-1-lh: 22px; --subheading-1-weight: 600; --subheading-2-size: 16px; --subheading-2-lh: 20px; --subheading-2-weight: 600; --subheading-2-blog-lh: 21px; --body-1-size: 16px; --body-1-lh: 20px; --body-1-weight: 500; --body-1-relaxed-lh: 26px; --body-2-size: 14px; --body-2-lh: 18px; --body-2-weight: 500; --body-2-relaxed-lh: 23px; --body-1-blog-size: var(--body-1-size); --body-1-blog-lh: var(--body-1-relaxed-lh); --body-1-blog-weight: 400; --body-2-blog-size: var(--body-2-size); --body-2-blog-lh: var(--body-2-relaxed-lh); --body-2-blog-weight: 400; --bullet-1-size: 16px; --bullet-1-lh: 20px; --bullet-1-weight: 600; --bullet-2-size: 14px; --bullet-2-lh: 18px; --bullet-2-weight: 600; --overline-size: 14px; --overline-lh: 18px; --overline-weight: 600; --caption-size: 12px; --caption-lh: 16px; --caption-weight: 500; --tag-size: 14px; --tag-lh: 19px; --tag-weight: 500; --badge-size: 12px; --badge-lh: 16px; --badge-weight: 500; --breadcrumb-size: 12px; --breadcrumb-lh: 16px; --breadcrumb-weight: 500; --form-input-size: 16px; --form-input-lh: 20px; --form-input-weight: 600; --table-header-size: 14px; --table-header-lh: 18px; --table-header-weight: 700; --table-cell-size: 13px; --table-cell-lh: 17px; --table-cell-weight: 500; --table-cell-primary-size: 14px; --table-cell-primary-lh: 18px; --table-cell-strong-weight: 700; --letter-spacing-normal: 0; --paragraph-spacing-normal: 0; --text-primary: var(--color-gray-800); --text-secondary: var(--color-gray-700); --text-secondary-lighter: var(--color-gray-600); --text-muted: #6b7280; --text-disabled: var(--color-gray-400); --text-link: var(--color-blue-700); --text-on-dark: var(--color-white); --text-on-dark-2: var(--color-blue-100); --text-accent: var(--color-blue-900); --fill-base: var(--color-gray-50); --fill-card: var(--color-white); --fill-primary: var(--color-blue-700); --fill-primary-dark: var(--color-blue-900); --fill-primary-light: var(--color-blue-50); --fill-primary-deeper: var(--color-blue-950); --fill-secondary: var(--color-amber-400); --fill-secondary-dark: var(--color-amber-700); --fill-secondary-light: #FFF3D6; --fill-alternative-1: var(--color-gray-100); --fill-alternative-2: #f7f8fa; --fill-alternative-3: var(--color-gray-200); --border-default: var(--color-gray-200); --border-soft: #e5e7eb; --border-dark: #d1d5db; --border-form-default: #d1d5db; --border-form-hover: var(--color-blue-700); --border-form-error: var(--color-red-500); --brand-primary: var(--fill-primary); --brand-primary-dark: var(--fill-primary-dark); --brand-primary-light: var(--fill-primary-light); --brand-primary-deeper: var(--color-blue-950); --brand-accent-orange: var(--fill-secondary); --brand-cta-orange: var(--fill-secondary-dark); --brand-cta-orange-hover: var(--color-amber-800); --ss-brand: var(--color-teal-700); --ss-brand-dark: var(--color-teal-900); --ss-brand-bg: var(--color-teal-50); --success: var(--color-green-500); --success-dark: var(--color-green-700); --success-bg: #f0fdf4; --success-border: #bbf7d0; --success-light-bg: var(--color-green-50); --warning: var(--color-yellow-500); --warning-bg: var(--color-yellow-50); --warning-border: #fde68a; --warning-text: var(--color-yellow-700); --danger: var(--color-red-500); --danger-bg: #fef2f2; --info: var(--brand-primary); --info-bg: var(--brand-primary-light); --status-success-bg: var(--highlight-green-light); --status-success-fg: var(--highlight-green-dark); --status-warning-bg: var(--highlight-yellow-light); --status-warning-fg: var(--highlight-yellow-dark); --status-danger-bg: var(--highlight-red-light); --status-danger-fg: var(--color-red-500); --highlight-green-dark: var(--color-green-700); --highlight-green-light: var(--color-green-50); --highlight-yellow-dark: var(--color-yellow-800); --highlight-yellow-light: var(--color-yellow-100); --highlight-orange-dark: var(--color-orange-700); --highlight-orange-light: var(--color-orange-50); --highlight-red-dark: var(--color-red-700); --highlight-red-light: var(--color-red-50); --highlight-gray-dark: var(--color-gray-700); --highlight-gray-light: var(--color-gray-100); --fg-primary: var(--text-primary); --fg-secondary: var(--text-secondary); --fg-secondary-lighter: var(--text-secondary-lighter); --fg-muted: var(--text-muted); --fg-disabled: var(--text-disabled); --fg-on-dark: var(--text-on-dark); --fg-on-dark-2: var(--text-on-dark-2); --fg-accent: var(--text-accent); --border: var(--border-default); --neutral-button: var(--color-gray-500); --neutral-button-dark: var(--color-gray-800); --black: var(--color-gray-900); --r-none: 0; --r-button: 6px; --r-tooltip: 6px; --r-table: 6px; --r-card: 10px; --r-card-inner: 12px; --r-pill: 999px; --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-13: 52px; --space-15: 60px; --padding-section-x: 16px; --padding-section-y: 24px; --padding-x: 16px; --padding-x-sm: 12px; --padding-x-xs: 4px; --padding-y: 16px; --padding-y-sm: 12px; --padding-y-xs: 8px; --padding-soft-4: 2px; --padding-soft-6: 4px; --padding-soft-8: 6px; --padding-soft-12: 8px; --gap-x: 16px; --gap-x-sm: 8px; --gap-x-xs: 4px; --gap-y: 16px; --gap-y-sm: 8px; --gap-y-xs: 4px; --gap-section-y: 16px; --gap-section-y-lg: 32px; --gap-soft-4: 2px; --gap-soft-6: 4px; --gap-soft-8: 6px; --gap-soft-12: 8px; --margin-x: 16px; --margin-y: 16px; --form-inner-padding: 10px; --tag-padding-icon: 4px; --button-primary: var(--color-blue-700); --button-primary-hover: var(--color-blue-900); --button-secondary: var(--color-amber-400); --button-secondary-hover: var(--color-amber-900); --button-secondary-text: var(--color-blue-900); --button-outline-hover-bg: var(--color-blue-50); --button-cta: var(--color-amber-700); --button-cta-hover: var(--color-amber-800); --button-neutral: var(--color-gray-500); --button-neutral-hover: var(--color-gray-800); --button-disabled: var(--color-gray-300); --button-base: var(--color-white); --buttons-primary: var(--button-primary); --buttons-primary-hover: var(--button-primary-hover); --buttons-secondary: var(--button-secondary); --buttons-secondary-hover: var(--button-secondary-hover); --buttons-secondary-text: var(--button-secondary-text); --buttons-outline-hover-bg: var(--button-outline-hover-bg); --buttons-cta: var(--button-cta); --buttons-cta-hover: var(--button-cta-hover); --buttons-neutral: var(--button-neutral); --buttons-neutral-hover: var(--button-neutral-hover); --buttons-disable: var(--button-disabled); --buttons-base: var(--button-base); --button-gap: 4px; --button-padding-toggle: 2px; --button-padding-small-x: 8px; --button-padding-small-x-icon: 6px; --button-padding-regular-x: 12px; --button-padding-regular-x-icon: 8px; --button-size-small: 30px; --button-size-regular: 36px; --button-icon-small: 18px; --button-icon-regular: 22px; --button-1-size: 16px; --button-1-lh: 20px; --button-1-weight: 600; --button-2-size: 14px; --button-2-lh: 18px; --button-2-weight: 600; --icon-sm: 18px; --icon-md: 18px; --icon-lg: 24px; --content-max-width: 100%; --content-with-panel: 720px; --narrow-content-width: 328px; --content-panel: 720px; --col-2-width: 100%; --qa-table-width: 100%; --top-nav-height: 48px; --breakpoint-content-lg: 1360px; --section-x: var(--padding-section-x); --section-y: var(--padding-section-y); --shadow-header: 0 1px 0 rgba(0,0,0,.06); --shadow-card: 0 1px 3px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10); --shadow-pop: 0 4px 16px rgba(0,0,0,0.15); --shadow-modal: 0 4px 24px rgba(0,0,0,0.20); --shadow-heavy: 0 0 12px rgba(0,0,0,0.15); --color-blue-1: var(--color-blue-50); --color-blue-2: #c2cbe9; --color-blue-3: #8aa1d6; --color-blue-7: var(--color-blue-700); --color-blue-8: #1d4ba0; --color-blue-9: var(--color-blue-900); --color-blue-10: var(--color-blue-950); --color-blue-11: #001244; --color-blue-12: #000a2b; --spacing-padding-x: var(--padding-x); --spacing-padding-x-sm: var(--padding-x-sm); --spacing-padding-x-xs: var(--padding-x-xs); --spacing-padding-y: var(--padding-y); --spacing-padding-y-sm: var(--padding-y-sm); --spacing-padding-y-xs: var(--padding-y-xs); --spacing-padding-section-x: var(--padding-section-x); --spacing-padding-section-y: var(--padding-section-y); --spacing-padding-soft-4: var(--padding-soft-4); --spacing-padding-soft-6: var(--padding-soft-6); --spacing-padding-soft-8: var(--padding-soft-8); --spacing-padding-soft-12: var(--padding-soft-12); --spacing-gap-x: var(--gap-x); --spacing-gap-x-sm: var(--gap-x-sm); --spacing-gap-x-xs: var(--gap-x-xs); --spacing-gap-y: var(--gap-y); --spacing-gap-y-sm: var(--gap-y-sm); --spacing-gap-y-xs: var(--gap-y-xs); --spacing-gap-section-y: var(--gap-section-y); --spacing-gap-soft-4: var(--gap-soft-4); --spacing-gap-soft-6: var(--gap-soft-6); --spacing-gap-soft-8: var(--gap-soft-8); --spacing-gap-soft-12: var(--gap-soft-12); --spacing-margin-x: var(--margin-x); --radius-none: var(--r-none); --radius-button: var(--r-button); --radius-tooltip: var(--r-tooltip); --radius-tag: var(--r-tag); --radius-input: var(--r-input); --radius-card-inner: var(--r-card-inner); --radius-card: var(--r-card); --radius-modal: var(--r-modal); --radius-pill: var(--r-pill); --shadow-card-floating-x: var(--shadow-card); --shadow-pop-x: var(--shadow-pop); --shadow-modal-x: var(--shadow-modal); --shadow-heavy-x: var(--shadow-heavy); --font-size-display-1: var(--display-1-size); --font-size-display-2: var(--display-2-size); --font-size-display-3: var(--display-3-size); --font-size-display-4: var(--display-4-size); --font-size-display-5: var(--display-5-size); --font-size-title-1: var(--title-1-size); --font-size-title-2: var(--title-2-size); --font-size-subheading-1: var(--subheading-1-size); --font-size-subheading-2: var(--subheading-2-size); --font-size-body-1: var(--body-1-size); --font-size-body-2: var(--body-2-size); --font-size-body-1-blog: var(--body-1-blog-size); --font-size-body-2-blog: var(--body-2-blog-size); --font-size-bullet-1: var(--bullet-1-size); --font-size-bullet-2: var(--bullet-2-size); --font-size-overline: var(--overline-size); --font-size-caption: var(--caption-size); --font-size-tag: var(--tag-size); --font-size-button: var(--button-size); --font-size-button-small: var(--button-2-size, 14px); --line-height-button-small: var(--button-2-lh, 18px); --font-weight-button-small: var(--button-2-weight, 600); --line-height-display-1: var(--display-1-lh); --line-height-display-2: var(--display-2-lh); --line-height-display-3: var(--display-3-lh); --line-height-display-4: var(--display-4-lh); --line-height-display-5: var(--display-5-lh); --line-height-title-1: var(--title-1-lh); --line-height-title-2: var(--title-2-lh); --line-height-subheading-1: var(--subheading-1-lh); --line-height-subheading-2: var(--subheading-2-lh); --line-height-body-1: var(--body-1-lh); --line-height-body-2: var(--body-2-lh); --line-height-body-1-blog: var(--body-1-blog-lh); --line-height-body-2-blog: var(--body-2-blog-lh); --line-height-bullet-1: var(--bullet-1-lh); --line-height-bullet-2: var(--bullet-2-lh); --line-height-overline: var(--overline-lh); --line-height-caption: var(--caption-lh); --line-height-tag: var(--tag-lh); --line-height-button: var(--button-lh); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --general-content-panel: var(--content-panel); --general-narrow-content-3: var(--narrow-content-width); --general-top-nav-height: var(--top-nav-height); --form-input-padding-x: var(--padding-form-x); --form-input-padding-y: var(--padding-form-y); --form-input-radius: var(--r-input); --tag-padding-x: var(--padding-tag-x); --tag-padding-y: var(--padding-tag-y); --tag-radius: var(--r-tag); --spacing-0-5: var(--space-0-5); --spacing-1: var(--space-1); --spacing-2: var(--space-2); --spacing-3: var(--space-3); --spacing-4: var(--space-4); --spacing-5: var(--space-5); --spacing-6: var(--space-6); --spacing-7: var(--space-7); --spacing-8: var(--space-8); --spacing-9: var(--space-9); --spacing-10: var(--space-10); --spacing-11: var(--space-11); --spacing-12: var(--space-12); --spacing-13: var(--space-13); --spacing-15: var(--space-15); --font-size-button-1: var(--button-1-size); --line-height-button-1: var(--button-1-lh); --font-weight-button-1: var(--button-1-weight); --font-size-button-2: var(--button-2-size); --line-height-button-2: var(--button-2-lh); --font-weight-button-2: var(--button-2-weight); --font-size-badge: var(--badge-size); --line-height-badge: var(--badge-lh); --font-weight-badge: var(--badge-weight); --font-weight-display-1: var(--display-1-weight); --font-weight-display-2: var(--display-2-weight); --font-weight-display-3: var(--display-3-weight); --font-weight-title-1: var(--title-1-weight); --font-weight-title-2: var(--title-2-weight); --font-weight-subheading-1: var(--subheading-1-weight); --font-weight-subheading-2: var(--subheading-2-weight); --font-weight-body-1: var(--body-1-weight); --font-weight-body-2: var(--body-2-weight); --font-weight-body-1-blog: var(--body-1-blog-weight); --font-weight-body-2-blog: var(--body-2-blog-weight); --font-weight-bullet-1: var(--bullet-1-weight); --font-weight-bullet-2: var(--bullet-2-weight); --font-weight-bullet: var(--bullet-2-weight); --font-weight-overline: var(--overline-weight); --font-weight-caption: var(--caption-weight); --font-weight-tag: var(--tag-weight); --shapes-icon-size-sm: var(--icon-sm); --shapes-icon-size-md: var(--icon-md); --shapes-icon-size-lg: var(--icon-lg); --font-family-default: var(--font-sans); --font-family-tc: var(--font-sans-tc); --font-font: var(--font-sans); --borders-default: var(--border-default); --borders-input: var(--border-input); --borders-input-active: var(--border-input-active); --borders-form-hover: var(--border-form-hover); --borders-divider: var(--border-divider); --radius-2: 8px; --radius-4: 16px; --stroke-thin: 1px; --stroke-emphasis: 2px; --focus-ring-offset: 2px; --font-size-table-header: var(--bullet-2-size); --line-height-table-header: var(--bullet-2-lh); --font-weight-table-header: var(--font-weight-bold); --font-size-table-cell: var(--body-2-size); --line-height-table-cell: var(--body-2-lh); --font-weight-table-cell-normal: var(--body-2-weight); --font-weight-table-cell-strong: var(--font-weight-bold); --font-size-table-cell-primary: var(--bullet-2-size); --line-height-table-cell-primary: var(--bullet-2-lh); --font-weight-table-cell-primary: var(--font-weight-semibold); --line-height-body-2-relaxed: var(--body-2-relaxed-lh); --borders-soft: var(--border-soft); --borders-dark: var(--border-dark); --borders-form-default: var(--border-form-default); --borders-form-error: var(--border-form-error); --radius-table: var(--r-table); --spacing-margin-y: var(--margin-y); --spacing-gap-section-y-lg: var(--gap-section-y-lg); --spacing-padding-soft-4px: var(--padding-soft-4); --spacing-padding-soft-6px: var(--padding-soft-6); --spacing-padding-soft-8px: var(--padding-soft-8); --spacing-padding-soft-12px: var(--padding-soft-12); --spacing-gap-soft-4px: var(--gap-soft-4); --spacing-gap-soft-6px: var(--gap-soft-6); --spacing-gap-soft-8px: var(--gap-soft-8); --spacing-gap-soft-12px: var(--gap-soft-12); --general-content-max-width: var(--content-max-width); --general-content-with-panel: var(--content-with-panel); --general-narrow-content-width: var(--narrow-content-width); --general-2-col-width: var(--col-2-width); --general-qa-table-width: var(--qa-table-width); --form-inner-element-padding: var(--form-inner-padding); --line-height-body-1-relaxed: var(--body-1-relaxed-lh); --font-size-breadcrumb: var(--breadcrumb-size); --line-height-breadcrumb: var(--breadcrumb-lh); --font-weight-breadcrumb: var(--breadcrumb-weight); --font-size-form-input: var(--form-input-size); --line-height-form-input: var(--form-input-lh); --font-weight-form-input: var(--form-input-weight); --font-weight-display-4: var(--display-4-weight); --font-weight-display-5: var(--display-5-weight); --headline-subheading-2: var(--font-weight-subheading-2) var(--font-size-subheading-2)/var(--line-height-subheading-2) var(--font-font); --body-1-blog: var(--font-weight-body-1-blog) var(--font-size-body-1-blog)/var(--line-height-body-1-blog) var(--font-font); --button-regular: var(--font-weight-button-1) var(--font-size-button-1)/var(--line-height-button-1) var(--font-font); }
.mhg-ti-quiz.brand-moneyhero { --button-primary: var(--color-blue-700); --button-primary-hover: var(--color-blue-900); --button-secondary: var(--color-amber-400); --button-secondary-hover: var(--color-amber-900); --button-secondary-text: var(--color-blue-900); --button-outline-hover-bg: var(--color-blue-50); --buttons-primary: var(--color-blue-700); --buttons-primary-hover: var(--color-blue-900); --buttons-secondary: var(--color-amber-400); --buttons-secondary-hover: var(--color-amber-900); --buttons-secondary-text: var(--color-blue-900); --buttons-outline-hover-bg: var(--color-blue-50); --fill-primary: var(--color-blue-700); --fill-primary-dark: var(--color-blue-900); --fill-primary-light: var(--color-blue-50); --fill-primary-deeper: var(--color-blue-950); --fill-secondary: var(--color-amber-400); --fill-secondary-dark: var(--color-amber-700); --text-link: var(--color-blue-700); --border-form-hover: var(--color-blue-700); }
.mhg-ti-quiz.brand-singsaver, .mhg-ti-quiz[data-brand="singsaver"] { --button-primary: var(--color-teal-700); --button-primary-hover: var(--color-teal-900); --button-secondary: var(--color-olive-700); --button-secondary-hover: var(--color-olive-900); --button-secondary-text: var(--color-white); --button-outline-hover-bg: var(--color-teal-50); --buttons-primary: var(--color-teal-700); --buttons-primary-hover: var(--color-teal-900); --buttons-secondary: var(--color-olive-700); --buttons-secondary-hover: var(--color-olive-900); --buttons-secondary-text: var(--color-white); --buttons-outline-hover-bg: var(--color-teal-50); --fill-primary: var(--color-teal-700); --fill-primary-dark: var(--color-teal-900); --fill-primary-light: var(--color-teal-50); --fill-primary-deeper: var(--color-teal-900); --fill-secondary: var(--color-olive-700); --fill-secondary-dark: var(--color-olive-900); --text-link: var(--color-teal-700); --text-accent: var(--color-teal-900); --border-form-hover: var(--color-teal-700); }
@media (min-width: 768px) {
:root { --display-1-size: 24px; --display-1-lh: 31px; --display-1-blog-lh: 31px; --display-2-size: 28px; --display-2-lh: 36px; --display-3-size: 34px; --display-3-lh: 40px; --display-4-size: 42px; --display-4-lh: 52px; --display-5-size: 48px; --display-5-lh: 58px; --title-1-size: 24px; --title-1-lh: 31px; --title-2-size: 22px; --title-2-lh: 28px; --subheading-1-size: 24px; --subheading-1-lh: 31px; --subheading-2-size: 20px; --subheading-2-lh: 24px; --body-1-size: 18px; --body-1-lh: 22px; --body-1-relaxed-lh: 27px; --body-2-size: 16px; --body-2-lh: 20px; --body-2-relaxed-lh: 26px; --bullet-1-size: 18px; --bullet-1-lh: 22px; --bullet-2-size: 16px; --bullet-2-lh: 20px; --overline-size: 16px; --overline-lh: 20px; --caption-size: 14px; --caption-lh: 18px; --badge-size: 14px; --badge-lh: 18px; --breadcrumb-size: 14px; --breadcrumb-lh: 18px; --form-input-size: 18px; --form-input-lh: 22px; --table-header-size: 15px; --table-header-lh: 21px; --table-cell-size: 14px; --table-cell-lh: 18px; --table-cell-primary-size: 15px; --table-cell-primary-lh: 21px; --padding-section-x: 24px; --padding-section-y: 32px; --padding-x: 16px; --padding-x-sm: 12px; --padding-x-xs: 8px; --padding-y: 20px; --padding-y-sm: 16px; --padding-soft-4: 4px; --padding-soft-6: 6px; --padding-soft-8: 8px; --padding-soft-12: 10px; --gap-x: 20px; --gap-x-sm: 12px; --gap-x-xs: 8px; --gap-y: 24px; --gap-y-sm: 16px; --gap-y-xs: 8px; --gap-section-y: 24px; --gap-section-y-lg: 40px; --gap-soft-4: 4px; --gap-soft-6: 6px; --gap-soft-8: 8px; --gap-soft-12: 10px; --margin-x: 16px; --margin-y: 16px; --form-inner-padding: 12px; --button-padding-small-x: 12px; --button-padding-small-x-icon: 10px; --button-padding-regular-x: 14px; --button-padding-regular-x-icon: 12px; --button-size-small: 36px; --button-size-regular: 40px; --button-icon-small: 20px; --button-icon-regular: 24px; --button-1-size: 20px; --button-1-lh: 24px; --button-2-size: 16px; --button-2-lh: 20px; --r-button: 8px; --r-table: 8px; --r-card: 16px; --icon-md: 22px; --content-max-width: 720px; --content-with-panel: 720px; --narrow-content-width: 720px; --content-panel: 720px; --col-2-width: 168px; --qa-table-width: 720px; --top-nav-height: 64px; }
}
@media (min-width: 1280px) {
:root { --body-1-lh: 27px; --overline-size: 22px; --overline-lh: 28px; --tag-size: 16px; --tag-lh: 23px; --padding-section-x: 32px; --padding-section-y: 48px; --padding-x: 24px; --padding-x-sm: 16px; --padding-x-xs: 12px; --padding-y: 24px; --padding-soft-12: 12px; --gap-soft-12: 12px; --gap-x: 24px; --gap-x-sm: 16px; --gap-section-y: 28px; --gap-section-y-lg: 48px; --margin-x: 24px; --margin-y: 24px; --button-size-regular: 44px; --r-tooltip: 8px; --r-button: 8px; --content-max-width: 1216px; --content-with-panel: 760px; --narrow-content-width: 1130px; --content-panel: 346px; --col-2-width: 184px; --qa-table-width: 760px; --top-nav-height: 72px; }
}
@media (min-width: 1440px) {
:root { --body-1-lh: 22px; --padding-section-x: 40px; --gap-section-y: 32px; --icon-md: 24px; --content-max-width: 1360px; --col-2-width: 206px; --top-nav-height: 80px; }
}
:root { --font-sans: "Albert Sans", "Open Sans", "Noto Sans", "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Segoe UI", SegoeUI, "Microsoft JhengHei", 微軟正黑體, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-sans-tc: "Albert Sans", "Open Sans", "Noto Sans", "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Segoe UI", SegoeUI, "Microsoft JhengHei", 微軟正黑體, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-family-default: "Albert Sans", "Open Sans", "Noto Sans", "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Segoe UI", SegoeUI, "Microsoft JhengHei", 微軟正黑體, "Helvetica Neue", Helvetica, Arial, sans-serif; }
:root { --grid-margin: 16px; --grid-gap: 16px; --grid-max: none; --grid-columns: 4; }
@media (min-width: 768px) {
:root { --grid-margin: 24px; --grid-gap: 16px; --grid-max: 1247px; --grid-columns: 8; }
}
@media (min-width: 1280px) {
:root { --grid-margin: 32px; --grid-gap: 24px; --grid-max: 1130px; --grid-columns: 12; }
}
@media (min-width: 1440px) {
:root { --grid-margin: 40px; --grid-gap: 24px; --grid-max: 1130px; --grid-columns: 12; }
}
@media (min-width: 768px) {
.mhg-ti-quiz .mhg-grid--campaign { --grid-columns: 2; --grid-gap: 16px; }
}
@media (max-width: 767px) {
.mhg-ti-quiz .mhg-grid--campaign { --grid-columns: 1; }
}
.mhg-ti-quiz .mhg-icon--18 { --mhg-icon-size: var(--button-icon-small); }
.mhg-ti-quiz .mhg-icon--22 { --mhg-icon-size: var(--button-icon-regular); }
.mhg-ti-quiz .mhg-icon--16 { --mhg-icon-size: 16px; }
.mhg-ti-quiz .mhg-icon--20 { --mhg-icon-size: 20px; }
:root { --mhi-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M9.55%2017.6534L4.2155%2012.3189L5.2845%2011.2496L9.55%2015.5151L18.7155%206.34961L19.7845%207.41886L9.55%2017.6534Z'%2F%3E%3C%2Fsvg%3E"); }
:root { --mhi-close: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M6.39999%2018.6534L5.34616%2017.5995L10.9462%2011.9995L5.34616%206.39953L6.39999%205.3457L12%2010.9457L17.6%205.3457L18.6538%206.39953L13.0538%2011.9995L18.6538%2017.5995L17.6%2018.6534L12%2013.0534L6.39999%2018.6534Z'%2F%3E%3C%2Fsvg%3E"); }
:root { --mhi-expand_more: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%2015.0387L6.34616%209.38488L7.39999%208.33105L12%2012.9311L16.6%208.33105L17.6538%209.38488L12%2015.0387Z'%2F%3E%3C%2Fsvg%3E"); }
:root { --mhi-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M450-290h60v-230h-60v230Zm52.92-307.75q9.39-9.29%209.39-23.02t-9.29-23.02q-9.29-9.28-23.02-9.28t-23.02%209.28q-9.29%209.29-9.29%2023.02t9.39%2023.02q9.38%209.29%2022.92%209.29%2013.54%200%2022.92-9.29ZM480.07-100q-78.84%200-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1%20100-479.93q0-78.84%2029.92-148.21t81.21-120.68q51.29-51.31%20120.63-81.25Q401.1-860%20479.93-860q78.84%200%20148.21%2029.92t120.68%2081.21q51.31%2051.29%2081.25%20120.63Q860-558.9%20860-480.07q0%2078.84-29.92%20148.21t-81.21%20120.68q-51.29%2051.31-120.63%2081.25Q558.9-100%20480.07-100Zm-.07-60q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z'%2F%3E%3C%2Fsvg%3E"); }
:root { --mhi-open_in_new: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M5.3077%2020.5C4.80257%2020.5%204.375%2020.325%204.025%2019.975C3.675%2019.625%203.5%2019.1974%203.5%2018.6923V5.3077C3.5%204.80257%203.675%204.375%204.025%204.025C4.375%203.675%204.80257%203.5%205.3077%203.5H11.6153V4.99998H5.3077C5.23077%204.99998%205.16024%205.03203%205.09612%205.09613C5.03202%205.16024%204.99997%205.23077%204.99997%205.3077V18.6923C4.99997%2018.7692%205.03202%2018.8397%205.09612%2018.9038C5.16024%2018.9679%205.23077%2019%205.3077%2019H18.6923C18.7692%2019%2018.8397%2018.9679%2018.9038%2018.9038C18.9679%2018.8397%2019%2018.7692%2019%2018.6923V12.3846H20.5V18.6923C20.5%2019.1974%2020.325%2019.625%2019.975%2019.975C19.625%2020.325%2019.1974%2020.5%2018.6923%2020.5H5.3077ZM9.7192%2015.3346L8.66538%2014.2808L17.9461%204.99998H14V3.5H20.5V9.99998H19V6.0538L9.7192%2015.3346Z'%2F%3E%3C%2Fsvg%3E"); }
:root { --mhi-featured_seasonal_and_gifts: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M164.62-100v-435.39H100v-208.45h206.85q-8.46-9.77-11.5-22.01-3.04-12.23-3.04-25.69%200-44.87%2031.41-76.28%2031.41-31.41%2076.28-31.41%2023%200%2042.62%209.65%2019.61%209.66%2035.07%2025.81%2015.46-16.77%2035.08-26.11%2019.61-9.35%2042.61-9.35%2044.88%200%2076.29%2031.41%2031.41%2031.41%2031.41%2076.28%200%2013.31-3.35%2025.31-3.35%2012-11.19%2022.39H860v208.45h-64.62V-100H164.62ZM521.5-825.52q-13.81%2013.71-13.81%2033.98%200%2020.27%2013.71%2033.98%2013.71%2013.72%2033.98%2013.72%2020.27%200%2033.99-13.72%2013.71-13.71%2013.71-33.98%200-20.27-13.81-33.98-13.81-13.71-33.89-13.71-20.07%200-33.88%2013.71Zm-169.19%2033.98q0%2020.27%2013.8%2033.98%2013.81%2013.72%2033.89%2013.72t33.89-13.72q13.8-13.71%2013.8-33.98%200-20.27-13.71-33.98-13.71-13.71-33.98-13.71-20.27%200-33.98%2013.71-13.71%2013.71-13.71%2033.98ZM160-683.85v88.47h290v-88.47H160ZM450-160v-375.39H224.61V-160H450Zm60%200h225.39v-375.39H510V-160Zm290-435.38v-88.47H510v88.47h290Z'%2F%3E%3C%2Fsvg%3E"); }
:root { --mh-blue: var(--fill-primary-dark); --mh-bright-blue: var(--fill-primary); --mh-orange: var(--buttons-cta); --mh-orange-hover: var(--buttons-cta-hover); --mh-orange-deep: var(--buttons-secondary-hover); --mh-yellow: var(--fill-secondary); --mh-green: var(--success); --mh-green-soft: var(--highlight-green-light); --ink: var(--text-primary); --muted: var(--text-muted); --on-dark: var(--text-on-dark-2); --surface-card: var(--fill-card); --surface-tint: var(--fill-primary-light); --surface-tint-2: var(--fill-alternative-2); --surface-panel: var(--fill-alternative-2); --surface-pill: var(--fill-primary-light); --track: var(--fill-alternative-3); --hairline: var(--borders-default); --hairline-soft: var(--borders-form-default); --border-soft: var(--borders-default); --edge: var(--borders-default); --danger: var(--status-danger-fg); --danger-bg: var(--highlight-red-light); --danger-border: var(--highlight-red-light); --warn-bg: var(--warning-bg); --warn-border: var(--warning-border); --warn-ink: var(--warning-text); --shadow-soft: var(--shadow-card); --shell-w: min(100%,520px); --shell-pad-top: 40px; --shell-pad-bottom: 40px; --font-tc: var(--font-sans); --font-num: var(--font-sans); }
.mhg-ti-quiz, .mhg-ti-quiz *, .mhg-ti-quiz ::before, .mhg-ti-quiz ::after { box-sizing: border-box; }
.mhg-ti-quiz [hidden] { display: none !important; }
.mhg-ti-quiz { margin: 0px; color: var(--ink); background: var(--fill-primary-light); font-family: var(--font-tc); font-size: var(--body-1-size); line-height: normal; -webkit-font-smoothing: antialiased; }
.mhg-ti-quiz * { font-family: inherit; }
.mhg-ti-quiz button, .mhg-ti-quiz input { font: inherit; }
.mhg-ti-quiz button { touch-action: manipulation; }
.mhg-ti-quiz img, .mhg-ti-quiz svg { max-width: 100%; display: block; }
.mhg-ti-quiz h1, .mhg-ti-quiz h2, .mhg-ti-quiz h3, .mhg-ti-quiz h4, .mhg-ti-quiz h5 { margin: 0px; }
.mhg-ti-quiz p { margin: 0px; }
.mhg-ti-quiz ul { margin: 0px; padding: 0px; list-style: none; }
.mhg-ti-quiz a { color: var(--mh-bright-blue); font-weight: var(--font-weight-bold); text-decoration: none; }
.mhg-ti-quiz a:hover { text-decoration: underline; }
.mhg-ti-quiz h1, .mhg-ti-quiz h2, .mhg-ti-quiz h3, .mhg-ti-quiz h4, .mhg-ti-quiz h5, .mhg-ti-quiz p, .mhg-ti-quiz li, .mhg-ti-quiz span, .mhg-ti-quiz div, .mhg-ti-quiz button, .mhg-ti-quiz label { word-break: break-word; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
.mhg-ti-quiz { scroll-behavior: auto; }
}
.mhg-ti-quiz .site-shell, .mhg-ti-quiz .below { width: auto; margin-inline: calc(50% - 50vw + var(--mh-sbw, 0px) / 2); }
.mhg-ti-quiz .site-shell { background: var(--fill-primary-light); display: flex; flex-direction: column; align-items: center; --shell-pad-x: 18px; padding: var(--shell-pad-top) var(--shell-pad-x) var(--shell-pad-bottom); }
.mhg-ti-quiz .game-card { width: var(--shell-w); min-height: 650px; overflow: hidden; background: var(--surface-card); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.mhg-ti-quiz .panel { min-height: 650px; padding: 38px 30px 30px; }
.mhg-ti-quiz .panel[hidden] { display: none; }
.mhg-ti-quiz .start-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.mhg-ti-quiz .eyebrow { margin: 0px 0px 8px; color: var(--mh-bright-blue); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .start-panel h1 { margin: 0px; color: var(--mh-blue); font-size: var(--display-5-size); line-height: 1.05; }
.mhg-ti-quiz .start-panel h1 b { color: var(--mh-orange); font-family: var(--font-num); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .lead { margin: 20px 0px 22px; color: var(--muted); font-weight: var(--font-weight-semibold); line-height: 1.75; }
.mhg-ti-quiz .rule-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-bottom: 22px; }
.mhg-ti-quiz .rule-row span { padding: 11px 4px; background: var(--surface-tint-2); border-radius: var(--r-card-inner); color: var(--muted); font-size: var(--caption-size); }
.mhg-ti-quiz .rule-row b { color: var(--mh-blue); font-size: var(--title-1-size); }
.mhg-ti-quiz .primary-button { width: 100%; padding: 16px 20px; border: 0px; border-radius: var(--r-button); background: var(--mh-orange); color: var(--fill-card); font-size: var(--title-2-size); font-weight: var(--font-weight-bold); cursor: pointer; box-shadow: 0 8px var(--mh-orange-deep); transition: transform 0.12s, box-shadow 0.12s; }
.mhg-ti-quiz .primary-button:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 3px var(--mh-orange-deep); }
.mhg-ti-quiz .primary-button:focus-visible { outline: 3px solid var(--mh-bright-blue); outline-offset: 3px; }
.mhg-ti-quiz .primary-button:disabled { background: var(--color-gray-300); box-shadow: 0 8px var(--color-gray-500); cursor: not-allowed; }
.mhg-ti-quiz .primary-button span { margin-left: 10px; }
.mhg-ti-quiz .microcopy { margin: 18px 0px 0px; color: var(--muted); font-size: var(--caption-size); }
.mhg-ti-quiz .text-button { display: block; margin: 14px auto 0px; padding: 0px; background: 0px 0px; border: 0px; color: var(--muted); font-size: var(--caption-size); text-decoration: underline; cursor: pointer; }
.mhg-ti-quiz .scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mhg-ti-quiz .scoreboard > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; background: var(--surface-tint); border-radius: var(--r-card-inner); }
.mhg-ti-quiz .scoreboard span { color: var(--muted); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .scoreboard strong { color: var(--mh-blue); font-family: var(--font-num); font-size: var(--display-3-size); }
.mhg-ti-quiz .scoreboard strong.urgent { color: var(--danger); animation: 0.7s ease 0s infinite alternate none running pulse; }
.mhg-ti-quiz .scoreboard small { margin-left: 3px; font-family: inherit; font-size: var(--caption-size); color: inherit; }
@keyframes pulse { 
  50% { opacity: 0.5; }
}
.mhg-ti-quiz .progress-track { height: 8px; margin: 18px 0px 38px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.mhg-ti-quiz .progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--buttons-cta); transition: width 0.2s linear; }
.mhg-ti-quiz .question-meta { display: flex; align-items: center; justify-content: space-between; }
.mhg-ti-quiz .question-meta .cat { padding: 6px 10px; background: var(--surface-pill); border-radius: var(--r-pill); color: var(--mh-bright-blue); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .question-meta small { color: var(--muted); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .quiz-panel h2 { min-height: 120px; margin: 20px 0px 26px; color: var(--mh-blue); font-size: var(--display-3-size); line-height: 1.38; }
.mhg-ti-quiz .answers { display: grid; gap: 14px; }
.mhg-ti-quiz .answers button { min-height: 70px; padding: 12px 18px; text-align: left; cursor: pointer; background: var(--fill-card); border: 2px solid var(--hairline); border-radius: var(--r-card-inner); color: var(--mh-blue); font-size: var(--title-1-size); font-weight: var(--font-weight-bold); transition: 0.12s; }
@media (hover: hover) and (pointer: fine) {
.mhg-ti-quiz .answers button:hover:not(:disabled) { border-color: var(--mh-bright-blue); background: var(--surface-tint); transform: translateY(-2px); }
}
.mhg-ti-quiz .answers button:focus-visible { border-color: var(--mh-bright-blue); background: var(--surface-tint); outline: none; transform: translateY(-2px); }
.mhg-ti-quiz .answers button:active:not(:disabled) { transform: scale(0.98); }
.mhg-ti-quiz .answers button .k { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 12px; background: var(--mh-blue); color: var(--fill-card); border-radius: var(--r-card-inner); font-family: var(--font-num); font-size: var(--body-1-size); }
.mhg-ti-quiz .speed-note { margin: 18px 0px 0px; color: var(--muted); font-size: var(--caption-size); text-align: center; }
.mhg-ti-quiz .result-panel { text-align: center; }
.mhg-ti-quiz .result-panel > h2 { margin: 0px; color: var(--mh-blue); font-size: var(--display-4-size); }
.mhg-ti-quiz .attempt-note { margin: 0px 0px 14px; padding: 11px 14px; background: var(--surface-tint); border-radius: var(--r-card-inner); color: var(--muted); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .result-msg { margin: 0px 0px 22px; padding: 14px 16px; background: var(--warn-bg); border-radius: var(--r-card-inner); color: var(--warn-ink); font-size: var(--caption-size); font-weight: var(--font-weight-bold); line-height: 1.6; }
.mhg-ti-quiz .rv-box { margin-top: 18px; padding: 2px 16px; background: var(--surface-panel); border-radius: var(--r-card-inner); text-align: left; }
.mhg-ti-quiz .rv-box summary { display: flex; align-items: center; gap: 8px; padding: 13px 0px; color: var(--mh-blue); font-size: var(--body-2-size); font-weight: var(--font-weight-bold); cursor: pointer; list-style: none; }
.mhg-ti-quiz .rv-box summary::-webkit-details-marker { display: none; }
.mhg-ti-quiz .rv-box summary::after { content: ""; margin-left: auto; width: 20px; height: 20px; background: var(--text-secondary); mask: var(--mhi-expand_more) center/contain no-repeat; transition: transform 0.2s; }
.mhg-ti-quiz .rv-box[open] summary::after { transform: rotate(180deg); }
.mhg-ti-quiz .rv-box #reviewCount { color: var(--muted); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .rv-box .review { padding-bottom: 14px; }
.mhg-ti-quiz .review { display: grid; gap: 10px; text-align: left; }
.mhg-ti-quiz .rv { display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--r-button); background: var(--surface-panel); border: 2px solid transparent; }
.mhg-ti-quiz .rv[data-ok="1"] { background: var(--success-bg); border-color: var(--success-border); }
.mhg-ti-quiz .rv[data-ok="0"] { background: var(--danger-bg); border-color: var(--danger-border); }
.mhg-ti-quiz .rv .ico { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-pill); font-size: var(--body-2-size); font-weight: var(--font-weight-bold); color: var(--fill-card); }
.mhg-ti-quiz .rv[data-ok="1"] .ico { background: var(--mh-green); }
.mhg-ti-quiz .rv[data-ok="0"] .ico { background: var(--danger); }
.mhg-ti-quiz .rv .b { min-width: 0px; }
.mhg-ti-quiz .rv .t { margin: 0px 0px 3px; color: var(--mh-blue); font-size: var(--caption-size); font-weight: var(--font-weight-bold); line-height: 1.45; }
.mhg-ti-quiz .rv .d { margin: 0px; color: var(--muted); font-size: var(--caption-size); line-height: 1.5; }
.mhg-ti-quiz .rv .d b { color: var(--mh-blue); }
.mhg-ti-quiz .done-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.mhg-ti-quiz .check-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 22px; background: var(--color-green-50); color: var(--mh-green); border-radius: var(--r-pill); font-size: var(--display-4-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .check-icon[data-state="skipped"] { background: var(--surface-tint); color: var(--mh-bright-blue); }
.mhg-ti-quiz .done-panel h2 { margin: 0px 0px 14px; color: var(--mh-blue); font-size: var(--display-4-size); }
.mhg-ti-quiz .done-lead { margin: 0px 0px 22px; color: var(--muted); line-height: 1.8; }
.mhg-ti-quiz .done-lead b { color: var(--mh-blue); }
.mhg-ti-quiz .proof { width: 100%; text-align: left; background: var(--fill-card); border: 2px solid var(--mh-blue); border-radius: var(--r-card-inner); overflow: hidden; }
.mhg-ti-quiz .proof__codewrap { display: inline-flex; align-items: center; gap: 8px; }
.mhg-ti-quiz .proof__code { font-family: var(--font-num); font-size: var(--display-1-size); font-weight: var(--font-weight-bold); color: var(--mh-blue); user-select: all; }
.mhg-ti-quiz .copy-btn { padding: 4px 10px; background: var(--surface-tint); border: 1px solid var(--hairline); border-radius: var(--r-button); color: var(--mh-bright-blue); font-size: var(--caption-size); font-weight: var(--font-weight-bold); cursor: pointer; white-space: nowrap; }
.mhg-ti-quiz .copy-btn:hover { background: var(--fill-card); border-color: var(--mh-bright-blue); }
.mhg-ti-quiz .copy-btn:focus-visible { outline: 2px solid var(--mh-bright-blue); outline-offset: 2px; }
.mhg-ti-quiz .copy-btn[data-done="1"] { background: var(--success-bg); border-color: var(--success-border); color: var(--success-dark); }
.mhg-ti-quiz .done-panel .primary-button { max-width: 330px; }
.mhg-ti-quiz .inbox-note { margin: 14px 0px 22px; padding: 11px 14px; background: var(--warn-bg); border-radius: var(--r-card-inner); color: var(--warn-ink); font-size: var(--caption-size); font-weight: var(--font-weight-bold); line-height: 1.6; }
.mhg-ti-quiz .field label { display: block; margin-bottom: 7px; color: var(--mh-blue); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .field :is(input[type="email"],input[type="text"]) { width: 100%; padding: 13px 14px; background: var(--fill-card); border: 2px solid var(--hairline-soft); border-radius: var(--r-card-inner); color: var(--ink); font-size: var(--body-1-size); line-height: normal; outline: none; }
.mhg-ti-quiz .field :is(input[type="email"],input[type="text"]):focus { border-color: var(--mh-bright-blue); }
.mhg-ti-quiz .field[data-error="1"] input { border-color: var(--danger); background: var(--danger-bg); }
.mhg-ti-quiz .field .hint { display: block; margin-top: 7px; color: var(--muted); font-size: var(--caption-size); line-height: 1.5; }
.mhg-ti-quiz .consent-row { display: flex; align-items: flex-start; gap: 9px; margin: 13px 0px 0px; color: var(--muted); font-size: var(--caption-size); line-height: 1.45; cursor: pointer; }
.mhg-ti-quiz .consent-row input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--mh-bright-blue); width: 16px; height: 16px; }
.mhg-ti-quiz .consent-row[data-error="1"] { color: var(--danger); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .form-error { margin: 14px 0px 0px; color: var(--danger); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .form-error[hidden] { display: none; }
.mhg-ti-quiz .form-error ul { margin: 4px 0px 0px; padding-inline-start: 1.1em; list-style: disc; }
.mhg-ti-quiz .pics { margin-top: 14px; padding: 13px 15px; background: var(--fill-card); border-radius: var(--r-card-inner); border: 1px solid var(--hairline-soft); }
.mhg-ti-quiz .pics h5 { margin: 0px 0px 5px; color: var(--mh-blue); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .pics p { margin: 0px; color: var(--muted); font-size: var(--caption-size); line-height: 1.55; }
.mhg-ti-quiz .formio-note { margin-bottom: 14px; padding: 11px 13px; background: var(--warn-bg); border-radius: var(--r-card-inner); color: var(--warn-ink); font-size: var(--caption-size); font-weight: var(--font-weight-bold); line-height: 1.5; }
.mhg-ti-quiz .formio-note[hidden] { display: none; }
.mhg-ti-quiz #formio [class*="formio-component-"] { min-width: 0px; }
.mhg-ti-quiz #formio label { display: block; margin: 0px 0px 7px; color: var(--mh-blue); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz #formio input[type="email"], .mhg-ti-quiz #formio input[type="text"], .mhg-ti-quiz #formio textarea { width: 100%; padding: 13px 14px; background: var(--fill-card); border: 2px solid var(--hairline-soft); border-radius: var(--r-card-inner); color: var(--ink); font-size: var(--body-1-size); line-height: normal; outline: none; box-shadow: none; }
.mhg-ti-quiz #formio textarea { height: 48px; resize: none; overflow: auto; }
.mhg-ti-quiz #formio .form-text, .mhg-ti-quiz #formio .text-muted, .mhg-ti-quiz #formio .formio-description { margin-top: 7px; color: var(--muted); font-size: var(--caption-size); line-height: 1.5; }
.mhg-ti-quiz .below { padding: 34px 18px; background: var(--surface-tint-2); }
.mhg-ti-quiz .below:nth-of-type(2n) { background: var(--surface-tint); }
.mhg-ti-quiz .below__in { width: var(--shell-w); margin-inline: auto; }
.mhg-ti-quiz .deck-banner { margin: -38px -30px 22px; padding: 13px 20px; background: var(--warn-bg); border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--warn-border); border-radius: var(--r-card) var(--r-card) 0 0; color: var(--warn-ink); font-size: var(--caption-size); font-weight: var(--font-weight-bold); line-height: 1.5; text-align: center; }
.mhg-ti-quiz .below h2 b { color: var(--mh-orange); }
.mhg-ti-quiz .below h2 { margin: 0px 0px 10px; color: var(--mh-blue); font-size: var(--display-4-size); font-weight: var(--font-weight-bold); line-height: 1.25; text-align: center; }
.mhg-ti-quiz .below .sub { margin: 0px 0px 22px; color: var(--muted); font-size: var(--body-1-size); line-height: 1.7; text-align: center; }
.mhg-ti-quiz .terms details { background: var(--fill-card); border-radius: var(--r-card-inner); margin-bottom: 10px; padding: 16px 20px; }
.mhg-ti-quiz .terms summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--mh-blue); font-size: var(--body-1-size); font-weight: var(--font-weight-bold); cursor: pointer; list-style: none; }
.mhg-ti-quiz .terms summary::-webkit-details-marker { display: none; }
.mhg-ti-quiz .terms summary::after { content: ""; flex: 0 0 auto; width: 20px; height: 20px; background: var(--text-secondary); mask: var(--mhi-expand_more) center/contain no-repeat; transition: transform 0.2s; }
.mhg-ti-quiz .terms details[open] summary::after { transform: rotate(180deg); }
.mhg-ti-quiz .terms details > div { padding-top: 12px; }
.mhg-ti-quiz .terms li { margin-bottom: 8px; padding-left: 16px; position: relative; color: var(--muted); font-size: var(--body-2-size); line-height: 1.75; }
.mhg-ti-quiz .terms li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 4px; height: 4px; border-radius: var(--r-pill); background: var(--mh-bright-blue); }
@media (width <= 540px) {
.mhg-ti-quiz .site-shell { --shell-pad-bottom: 20px; --shell-pad-x: 10px; padding-top: var(--shell-pad-top); }
.mhg-ti-quiz .game-card { border-radius: var(--r-card); min-height: 0px; }
.mhg-ti-quiz .panel { min-height: 0px; padding: 28px 22px 24px; }
.mhg-ti-quiz .deck-banner { margin: -28px -22px 18px; padding: 11px 14px; border-radius: var(--r-card) var(--r-card) 0 0; }
.mhg-ti-quiz .quiz-panel h2 { min-height: 134px; }
}
@media (prefers-reduced-motion: reduce) {
.mhg-ti-quiz *, .mhg-ti-quiz ::before, .mhg-ti-quiz ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
.mhg-ti-quiz .check-icon { font-size: 0px; }
.mhg-ti-quiz .check-icon::before { content: ""; width: 40px; height: 40px; background: currentcolor; mask: var(--mhi-check) center/contain no-repeat; }
.mhg-ti-quiz .check-icon[data-state="skipped"]::before { mask-image: var(--mhi-info); }
.mhg-ti-quiz .rv .ico::before { content: ""; width: 16px; height: 16px; background: currentcolor; mask: var(--mhi-close) center/contain no-repeat; }
.mhg-ti-quiz .rv[data-ok="1"] .ico::before { mask-image: var(--mhi-check); }
.mhg-ti-quiz .primary-button { display: flex; align-items: center; justify-content: center; gap: var(--button-gap); box-sizing: border-box; width: 100%; height: var(--button-size-regular); padding: 0 var(--button-padding-regular-x); border: 1px solid transparent; border-radius: var(--radius-button); background: var(--buttons-cta); color: var(--text-on-dark); font-family: var(--font-sans); font-size: var(--font-size-button-1); line-height: var(--line-height-button-1); font-weight: var(--font-weight-semibold); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transform: none; transition: background-color 0.15s; }
.mhg-ti-quiz .primary-button:hover:not(:disabled) { background: var(--buttons-cta-hover); text-decoration: none; }
.mhg-ti-quiz .primary-button:active:not(:disabled) { transform: none; box-shadow: none; }
.mhg-ti-quiz .primary-button:focus-visible { outline: 2px solid var(--buttons-primary); outline-offset: 2px; }
.mhg-ti-quiz .primary-button:disabled { background: var(--buttons-disable); color: var(--text-on-dark); box-shadow: none; cursor: not-allowed; }
.mhg-ti-quiz .primary-button span { margin-left: 0px; }
.mhg-ti-quiz .copy-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--button-size-small); padding: 0 var(--button-padding-small-x); background: var(--buttons-base); border: 1px solid var(--buttons-primary); border-radius: var(--radius-button); color: var(--buttons-primary); font-size: var(--font-size-button-2); line-height: var(--line-height-button-2); font-weight: var(--font-weight-semibold); }
.mhg-ti-quiz .copy-btn:hover { background: var(--buttons-outline-hover-bg); border-color: var(--buttons-primary-hover); color: var(--buttons-primary-hover); }
.mhg-ti-quiz .field :is(input[type="email"],input[type="text"]) { box-sizing: border-box; padding: var(--form-inner-padding) var(--form-inner-padding); border: 1px solid var(--borders-form-default); border-radius: var(--r-button); background: var(--fill-card); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--form-input-size); line-height: var(--form-input-lh); font-weight: var(--form-input-weight); }
.mhg-ti-quiz .field :is(input[type="email"],input[type="text"])::placeholder { color: var(--text-muted); font-weight: var(--font-weight-regular, 400); }
.mhg-ti-quiz .field :is(input[type="email"],input[type="text"]):hover { border-color: var(--borders-form-hover); }
.mhg-ti-quiz .field :is(input[type="email"],input[type="text"]):focus { border-color: var(--borders-form-hover); outline: none; }
.mhg-ti-quiz .consent-row input { width: 20px; height: 20px; margin-top: 0px; accent-color: var(--buttons-primary); }
.mhg-ti-quiz .result-msg { background: var(--fill-secondary-light); color: var(--text-primary); }
.mhg-ti-quiz .below__in { width: min(100%, 976px); margin-inline: auto; }
.mhg-ti-quiz .below, .mhg-ti-quiz .below:nth-of-type(2n) { background: var(--fill-base); }
.mhg-ti-quiz .below h2 b, .mhg-ti-quiz .start-panel h1 b { color: var(--fill-primary); }
.mhg-ti-quiz .terms { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--fill-card); border: 1px solid var(--borders-default); border-radius: var(--r-card); }
.mhg-ti-quiz .terms details { margin: 0px; padding: 0px; background: var(--fill-alternative-1); border-radius: var(--r-card-inner); }
.mhg-ti-quiz .terms summary { padding: var(--space-3) var(--space-4); font: var(--bullet-1-weight) var(--bullet-1-size)/var(--bullet-1-lh) var(--font-sans); color: var(--text-primary); }
.mhg-ti-quiz .terms summary:hover { background: var(--fill-alternative-3); border-radius: var(--r-card-inner); }
.mhg-ti-quiz .terms summary::after { background: var(--text-primary); }
.mhg-ti-quiz .terms details > div { padding: 0 var(--space-4) var(--space-4); }
.mhg-ti-quiz .terms li { color: var(--text-secondary); font: var(--body-2-weight) var(--body-2-size)/var(--body-2-relaxed-lh) var(--font-sans); }
.mhg-ti-quiz .terms li::before { top: calc(var(--body-2-relaxed-lh) / 2 - 2px); background: var(--text-secondary); }
.mhg-ti-quiz a { color: var(--text-link); }
.mhg-ti-quiz .rule-row--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
.mhg-ti-quiz .rule-row--4 { grid-template-columns: repeat(2, 1fr); }
}
.mhg-ti-quiz .scoreboard--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
.mhg-ti-quiz .scoreboard--3 { gap: 6px; }
.mhg-ti-quiz .scoreboard--3 > div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; }
}
.mhg-ti-quiz .strikes { display: flex; gap: 6px; align-items: center; min-height: 30px; }
.mhg-ti-quiz .strike { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-tint-2); border: 2px solid var(--danger-border); }
.mhg-ti-quiz .strike.is-out { background: var(--danger); border-color: var(--danger); }
.mhg-ti-quiz .scoreboard strong.neg { color: var(--danger); }
.mhg-ti-quiz .quiz-panel { position: relative; }
.mhg-ti-quiz .pts-float { position: absolute; left: 50%; top: 34%; transform: translate(-50%, 0px); font-family: var(--font-num); font-weight: var(--font-weight-bold); font-size: var(--display-3-size); pointer-events: none; animation: 0.7s ease-out 0s 1 normal forwards running tiFloat; }
.mhg-ti-quiz .pts-float--plus { color: var(--mh-green); }
.mhg-ti-quiz .pts-float--minus { color: var(--danger); }
@keyframes tiFloat { 
  0% { opacity: 0; transform: translate(-50%, 8px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -28px); }
}
@media (prefers-reduced-motion: reduce) {
.mhg-ti-quiz .pts-float { animation: auto ease 0s 1 normal none running none; opacity: 0; }
}
.mhg-ti-quiz .ti-hero-wrap { width: min(230px, 62%); margin: 0px auto 14px; aspect-ratio: 4 / 3; background: var(--surface-tint) var(--kv, url('https://mhgprod.blob.core.windows.net/moneyhero/strapi-uploads/xl_ti_kv_da3d9fbefa.webp')) 81% 0 / 400% auto no-repeat; border-radius: var(--r-card-inner); }
.mhg-ti-quiz .start-panel .ti-game-title { margin: 0px; color: var(--mh-blue); font-size: var(--display-5-size); line-height: 1.05; font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .start-panel .ti-game-title b { color: var(--mh-orange); font-family: var(--font-num); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .site-shell { padding-top: 28px; }
.mhg-ti-quiz .site-shell { position: relative; padding-bottom: 84px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V70l120-38 110 30 150-52 140 46 120-24 160 40 150-58 140 44 130-20 120 34V120z' fill='%23C2CBE9'/%3E%3Cpath d='M0 120V92l160-26 150 22 170-34 150 30 170-18 160 26 170-30 140 22 170-8V120z' fill='%2399AADB' opacity='.55'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center bottom; background-size: 100% 90px; }
.mhg-ti-quiz .ti-route { display: flex; align-items: center; gap: 10px; width: min(260px, 80%); margin: 0px auto 12px; color: var(--mh-blue); font-family: var(--font-num); font-size: var(--caption-size); letter-spacing: 1px; }
.mhg-ti-quiz .ti-route__line { flex: 1 1 0%; position: relative; border-top: 2px dashed rgb(153, 170, 219); height: 0px; }
.mhg-ti-quiz .ti-route__line i { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); font-style: normal; color: var(--mh-orange); font-size: 16px; line-height: 1; background: var(--fill-card); padding: 0px 4px; animation: 3.2s ease-in-out 0s infinite normal none running tiFly; }
@keyframes tiFly { 
  0%, 100% { left: 30%; }
  50% { left: 70%; }
}
.mhg-ti-quiz #howto h2 { position: relative; display: table; margin-left: auto; margin-right: auto; }
.mhg-ti-quiz #howto h2::before { content: ""; position: absolute; width: 18px; height: 18px; left: -30px; top: -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFAF26' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E") center center / contain no-repeat; }
.mhg-ti-quiz .bp { display: flex; margin: 18px 0px 6px; border-radius: var(--r-card-inner); background: var(--fill-card); box-shadow: rgba(0, 41, 129, 0.14) 0px 10px 28px; text-align: left; overflow: hidden; position: relative; }
.mhg-ti-quiz .bp__main { flex: 1 1 auto; padding: 14px 16px 12px; min-width: 0px; }
.mhg-ti-quiz .bp__hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -14px -16px 12px; padding: 9px 16px; background: var(--mh-blue); color: rgb(255, 255, 255); font-size: var(--caption-size); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .bp__air { font-family: var(--font-num); letter-spacing: 1.5px; color: var(--mh-yellow); }
.mhg-ti-quiz .bp__route { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mhg-ti-quiz .bp__route b { display: block; font-family: var(--font-num); font-size: var(--display-3-size); line-height: 1; color: var(--mh-blue); }
.mhg-ti-quiz .bp__route small { color: var(--muted); font-size: var(--caption-size); }
.mhg-ti-quiz .bp__path { flex: 1 1 0%; position: relative; border-top: 2px dashed rgb(153, 170, 219); margin-top: -14px; }
.mhg-ti-quiz .bp__path i { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); font-style: normal; color: var(--mh-orange); background: var(--fill-card); padding: 0px 4px; }
.mhg-ti-quiz .bp__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0px; border-top: 1px dashed var(--borders-soft,#e5e7eb); font-size: var(--caption-size); }
.mhg-ti-quiz .bp__k { color: var(--muted); font-weight: var(--font-weight-bold); white-space: nowrap; }
.mhg-ti-quiz .bp__v { color: var(--text-primary); font-weight: var(--font-weight-bold); overflow-wrap: anywhere; text-align: right; }
.mhg-ti-quiz .bp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.mhg-ti-quiz .bp__grid div { padding: 6px 4px; background: var(--surface-tint); border-radius: 8px; text-align: center; }
.mhg-ti-quiz .bp__grid span { display: block; color: var(--muted); font-size: 11px; }
.mhg-ti-quiz .bp__grid strong { color: var(--mh-blue); font-family: var(--font-num); font-size: var(--title-2-size); }
.mhg-ti-quiz .bp__foot { display: flex; justify-content: space-between; margin-top: 9px; color: var(--muted); font-size: 11px; }
.mhg-ti-quiz .bp__stub { flex: 0 0 96px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; background: var(--fill-secondary-light,#fff3d6); border-left: 2px dashed rgb(194, 203, 233); text-align: center; }
.mhg-ti-quiz .bp__stub::before, .mhg-ti-quiz .bp__stub::after { content: ""; position: absolute; left: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-tint); }
.mhg-ti-quiz .bp__stub::before { top: -9px; }
.mhg-ti-quiz .bp__stub::after { bottom: -9px; }
.mhg-ti-quiz .bp__stub-k { color: var(--muted); font-size: 10px; font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .bp__stub-code { color: var(--mh-orange); font-family: var(--font-num); font-size: 15px; letter-spacing: 0.5px; writing-mode: vertical-rl; transform: rotate(180deg); }
.mhg-ti-quiz .bp__barcode { width: 56px; height: 34px; background: repeating-linear-gradient(90deg, rgb(0, 41, 129) 0px, rgb(0, 41, 129) 2px, transparent 2px, transparent 4px, rgb(0, 41, 129) 4px, rgb(0, 41, 129) 5px, transparent 5px, transparent 8px); }
@media (max-width: 640px) {
.mhg-ti-quiz .bp { flex-direction: column; }
.mhg-ti-quiz .bp__stub { flex: 0 0 auto; flex-direction: row; justify-content: space-between; border-left: 0px; border-top: 2px dashed rgb(194, 203, 233); padding: 10px 16px; }
.mhg-ti-quiz .bp__stub::before, .mhg-ti-quiz .bp__stub::after { top: -10px; bottom: auto; }
.mhg-ti-quiz .bp__stub::before { left: -9px; }
.mhg-ti-quiz .bp__stub::after { left: auto; right: -9px; }
.mhg-ti-quiz .bp__stub-code { writing-mode: horizontal-tb; transform: none; }
.mhg-ti-quiz .bp__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.mhg-ti-quiz .ti-route__line i { animation: auto ease 0s 1 normal none running none; }
}
.mhg-ti-quiz .ti-share-btn { display: block; width: 100%; margin-top: 10px; min-height: 46px; border-radius: var(--r-button,8px); border: 2px solid var(--mh-blue); background: var(--fill-card); color: var(--mh-blue); font-family: inherit; font-size: var(--body-1-size); font-weight: var(--font-weight-bold); cursor: pointer; }
.mhg-ti-quiz .ti-share-btn:hover { background: var(--surface-tint); }
.mhg-ti-quiz #howto { background: var(--surface-tint); }
.mhg-ti-quiz .res { padding-top: 18px; padding-bottom: 18px; }
.mhg-ti-quiz .res__kicker { margin: 0px; font-size: 12px; color: var(--muted); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .res__rank { margin: 2px 0px 10px; font-size: 26px; line-height: 1.2; color: var(--mh-blue); }
.mhg-ti-quiz .res__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.mhg-ti-quiz .res__strip div { padding: 7px 2px; background: var(--surface-tint); border-radius: 10px; text-align: center; }
.mhg-ti-quiz .res__strip strong { display: block; font-family: var(--font-num); font-size: 19px; line-height: 1.15; color: var(--mh-blue); }
.mhg-ti-quiz .res__strip span { font-size: 11px; color: var(--muted); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .res .attempt-note { margin: 0px 0px 8px; font-size: 12px; }
.mhg-ti-quiz .res__entry { padding: 12px 14px 10px; background: var(--surface-tint-2); border-radius: 12px; text-align: left; }
.mhg-ti-quiz .res__entry h3 { margin: 0px; font-size: 17px; color: var(--mh-blue); }
.mhg-ti-quiz .res__sub { margin: 2px 0px 8px; font-size: 13px; line-height: 1.45; color: var(--text-secondary,#424242); }
.mhg-ti-quiz .res__sub b { color: var(--mh-blue); }
.mhg-ti-quiz .res__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; }
.mhg-ti-quiz .res .field { margin: 0px; }
.mhg-ti-quiz .res .consent-row { margin-top: 6px; font-size: 12px; line-height: 1.45; }
.mhg-ti-quiz .res #btnEnter { width: 100%; margin-top: 10px; }
.mhg-ti-quiz .res__skip { display: block; margin: 4px auto 0px; font-size: 12.5px; }
.mhg-ti-quiz .res__actions { margin-top: 12px; }
.mhg-ti-quiz .res__actions #resCta { display: block; width: 100%; text-align: center; }
.mhg-ti-quiz .res__pair { display: flex; gap: 8px; margin-top: 8px; }
.mhg-ti-quiz .res__pair .ti-share-btn { flex: 1 1 0%; margin-top: 0px; min-height: 42px; font-size: 14px; }
.mhg-ti-quiz .res__pair [hidden] { display: none; }
.mhg-ti-quiz .ti-steps { list-style: none; max-width: 560px; margin: 18px auto 0px; padding: 6px 18px; background: var(--fill-card); border-radius: var(--r-card-inner); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px; text-align: left; }
.mhg-ti-quiz .ti-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0px; }
.mhg-ti-quiz .ti-steps li + li { border-top: 1px solid var(--borders-soft,#e5e7eb); }
.mhg-ti-quiz .ti-steps__n { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--mh-orange); color: rgb(255, 255, 255); font-family: var(--font-num); font-weight: var(--font-weight-bold); font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.mhg-ti-quiz .ti-steps b { display: block; font-size: 15px; color: var(--mh-blue); }
.mhg-ti-quiz .ti-steps p { margin: 2px 0px 0px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary,#424242); }
.mhg-ti-quiz .ti-steps a { color: var(--mh-bright-blue); font-weight: var(--font-weight-bold); }
.mhg-ti-quiz .done-panel { padding-top: 18px; padding-bottom: 18px; }
.mhg-ti-quiz .done-panel .check-icon, .mhg-ti-quiz .done-panel .eyebrow, .mhg-ti-quiz .done-panel .inbox-note { display: none; }
.mhg-ti-quiz .done-panel h2 { margin: 0px; font-size: 22px; color: var(--mh-blue); }
.mhg-ti-quiz .done-panel .done-lead { margin: 4px 0px 0px; font-size: 13px; line-height: 1.5; }
.mhg-ti-quiz .done-panel .bp { margin-top: 12px; }
.mhg-ti-quiz .done-panel .rv-box { margin-top: 10px; }
@media (max-width: 640px) {
.mhg-ti-quiz .bp__main { padding: 12px 14px 10px; }
.mhg-ti-quiz .bp__hd { margin: -12px -14px 10px; padding: 8px 14px; }
.mhg-ti-quiz .bp__route { margin-bottom: 6px; }
.mhg-ti-quiz .bp__route b { font-size: 24px; }
.mhg-ti-quiz .bp__row { padding: 5px 0px; }
.mhg-ti-quiz .bp__grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mhg-ti-quiz .bp__grid div { padding: 5px 2px; }
.mhg-ti-quiz .bp__grid strong { font-size: 15px; }
.mhg-ti-quiz .bp__stub { padding: 8px 14px; }
}
.mhg-ti-quiz .res__actions .primary-button { display: block; width: 100%; max-width: none; margin-left: 0px; margin-right: 0px; }
.mhg-ti-quiz .res__pair .ti-share-btn { width: auto; max-width: none; margin-left: 0px; margin-right: 0px; }
.mhg-ti-quiz .done-panel .res__actions, .mhg-ti-quiz .result-panel .res__actions { width: 100%; align-self: stretch; }
.mhg-ti-quiz #formio fieldset { border: 0px; margin: 0px; padding: 0px; min-width: 0px; }
.mhg-ti-quiz #formio legend { display: none; }
.mhg-ti-quiz .ti-game-logo { display: block; width: min(250px, 72%); height: auto; margin: 4px auto 6px; }
.mhg-ti-quiz .start-panel .ti-game-title b { display: block; }
.mhg-ti-quiz .res__head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; text-align: left; }
.mhg-ti-quiz .res__head .res__rank { margin: 0px; }
.mhg-ti-quiz .ti-stamp { flex: 0 0 72px; width: 72px; height: 72px; display: block; transform: rotate(-10deg); animation: 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0s 1 normal both running tiStamp; }
.mhg-ti-quiz .ti-stamp svg { width: 100%; height: 100%; display: block; font-family: var(--font-num); }
@keyframes tiStamp { 
  0% { opacity: 0; transform: rotate(-10deg) scale(1.8); }
  100% { opacity: 1; transform: rotate(-10deg) scale(1); }
}
.mhg-ti-quiz .bp__main { position: relative; }
.mhg-ti-quiz .ti-stamp--bp { position: absolute; left: 50%; top: 30px; width: 60px; height: 60px; margin-left: -30px; opacity: 0.85; animation: auto ease 0s 1 normal none running none; pointer-events: none; }
@media (max-width: 640px) {
.mhg-ti-quiz .ti-stamp--bp { top: 30px; width: 52px; height: 52px; margin-left: -26px; }
}
@media (prefers-reduced-motion: reduce) {
.mhg-ti-quiz .ti-stamp { animation: auto ease 0s 1 normal none running none; }
}
.mhg-ti-quiz .bp__air { display: inline-flex; align-items: center; gap: 5px; background: rgb(255, 255, 255); padding: 3px 8px; border-radius: 6px; }
.mhg-ti-quiz .bp__air img { height: 13px; width: auto; display: block; }
.mhg-ti-quiz .bp__air b { font-family: var(--font-num); font-size: 11px; letter-spacing: 1.5px; color: var(--mh-blue); }

/* start-screen rules note: buy to win, first 3 registered attempts count */
.mhg-ti-quiz .ti-start-note{list-style:none; margin:2px 0 14px; padding:9px 12px; background:var(--surface-tint); border-radius:10px; text-align:left; display:grid; gap:4px}
.mhg-ti-quiz .ti-start-note li{font-size:13px; line-height:1.5; color:var(--text-secondary,#424242)}
.mhg-ti-quiz .ti-start-note b{color:var(--mh-blue)}
/* start screen on phones: keep it inside one screen with the rules note */
@media (max-width:640px){
  .mhg-ti-quiz .rule-row--4{grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:14px}
  .mhg-ti-quiz .rule-row--4 > span{padding:8px 2px; font-size:11px; line-height:1.25}
  .mhg-ti-quiz .rule-row--4 b{font-size:16px}
  .mhg-ti-quiz .ti-hero-wrap{width:min(170px,50%); margin-bottom:10px}
  .mhg-ti-quiz .ti-route{margin-bottom:8px}
}

/* boarding-pass stub, upright: destination, barcode, and the entry reference
   shown small like a flight number (nothing the player has to keep) */
.mhg-ti-quiz .bp__stub{gap:4px; padding:14px 10px}
.mhg-ti-quiz .bp__stub-k{font-size:10px; letter-spacing:1.5px; color:var(--muted); font-weight:var(--font-weight-bold)}
.mhg-ti-quiz .bp__stub-dest{font-family:var(--font-num); font-size:28px; line-height:1; color:var(--mh-blue)}
.mhg-ti-quiz .bp__stub-city{font-size:11px; color:var(--muted); margin-bottom:6px}
.mhg-ti-quiz .bp__stub .bp__barcode{width:60px; height:30px}
.mhg-ti-quiz .bp__stub-code{margin-top:4px; font-family:var(--font-num); font-size:10px; letter-spacing:1px; color:var(--muted); writing-mode:horizontal-tb; transform:none}
@media (max-width:640px){
  .mhg-ti-quiz .bp__stub{display:grid; grid-template-columns:auto auto auto 1fr auto; align-items:center; column-gap:8px; padding:10px 14px}
  .mhg-ti-quiz .bp__stub-dest{font-size:20px}
  .mhg-ti-quiz .bp__stub-city{margin:0}
  .mhg-ti-quiz .bp__stub .bp__barcode{justify-self:end; width:70px; height:22px}
  .mhg-ti-quiz .bp__stub-code{margin:0}
}

/* play screen on phones: question block sized for ~3 lines (was a fixed
   134px), and the keyboard hint hidden, so the timer bar and all three answers
   fit on one screen */
@media (max-width:640px){
  .mhg-ti-quiz .quiz-panel h2{min-height:92px; margin:14px 0 18px}
  .mhg-ti-quiz .quiz-panel .speed-note{display:none}
}

/* player name (2026-10-02): prefilled themed name + re-roll */
.mhg-ti-quiz .res .res__name { margin: 0 0 8px; text-align: left; }
.mhg-ti-quiz .res__name label { margin-bottom: 4px; }

/* skipped screen art (2026-10-02): KV crop + rank stamp */
.mhg-ti-quiz .done-art { position: relative; width: min(260px, 72%); margin: 0 auto 14px; }
.mhg-ti-quiz .done-art[hidden] { display: none; }
.mhg-ti-quiz .done-art__stamp { position: absolute; right: -14px; bottom: -14px; width: 76px; height: 76px; background: #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,41,129,.18); display: grid; place-items: center; transform: rotate(-8deg); }
.mhg-ti-quiz .done-art__stamp svg { width: 66px; height: 66px; }

/* player name suggestions (2026-10-02): own name first, chips as the fallback */
.mhg-ti-quiz .res__name label small { font-weight: 500; color: var(--muted); }
.mhg-ti-quiz .res__sugg #nameChips { display: contents; }
.mhg-ti-quiz .res__sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.mhg-ti-quiz .res__chip { font: inherit; font-size: 12px; font-weight: 600; color: var(--mh-blue); background: var(--fill-card); border: 1px dashed var(--color-blue-2, #c2cbe9); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.mhg-ti-quiz .res__chip[aria-pressed="true"] { border-style: solid; border-color: var(--mh-blue); background: var(--fill-secondary-light, #fff3d6); }
.mhg-ti-quiz .res__more { font-size: 16px; line-height: 1; background: none; border: 0; padding: 4px; min-width: 32px; min-height: 32px; cursor: pointer; }

/* returning player on this device (2026-10-08): one-tap confirm or switch email */
.mhg-ti-quiz .res__entry[hidden] { display: none; }
.mhg-ti-quiz .res__quick .primary-button { display: block; width: 100%; margin-top: 10px; }
.mhg-ti-quiz .res__switch { display: block; margin: 10px auto 0; font-size: 13px; font-weight: 700; color: var(--mh-bright-blue); text-decoration: underline; text-underline-offset: 2px; }
.mhg-ti-quiz .res__actions[hidden] { display: none; }