/* 抓狂指數測驗（/quiz/boss-rage/）— 獨立沉浸式頁面，mobile-first。
 * 色彩、字級與間距皆使用 design-tokens.css。遊戲動效提供 reduced-motion 靜態流程。 */

/* 這個測驗頁要用獨立的紫色，不是 design-tokens.css 裡全站共用的 --color-accent
   （那個變數被全站幾乎每一頁、每封信件模板、後台都在用，改了會動到這個測驗以外的地方）。
   新色本身（--color-quiz-boss-accent 系列）定義在 design-tokens.css，這裡只是用
   body.quiz-body 把 --color-accent 系列局部指向那組新值——頁面上所有原本吃
   var(--color-accent*) 的地方（按鈕、連結、強調字、focus ring）就會自動套用，
   不用逐一找出來改，也不會外溢到別頁。 */
body.quiz-body {
	--color-accent: var(--color-quiz-boss-accent);
	--color-accent-hover: var(--color-quiz-boss-accent-hover);
	--color-accent-active: var(--color-quiz-boss-accent-active);
	--color-accent-tint-hover: var(--color-quiz-boss-accent-tint-hover);
	--color-accent-tint-active: var(--color-quiz-boss-accent-tint-active);
}

html,
body.quiz-body {
	margin: 0;
	padding: 0;
	background: var(--color-surface-base);
}

/* 結局集覽頁：背景跟排行榜頁同一個淺灰（--color-surface-light），不用白底。
   html 也一起換，不然視窗比內容高、或捲到底回彈時，露出來的會是 html 的白底 */
html:has(body.quiz-body [data-screen="gallery"]:not([hidden])),
body.quiz-body:has([data-screen="gallery"]:not([hidden])) {
	background: var(--color-surface-light);
}

.boss-quiz {
	font-family: var(--font-family-zh);
	color: var(--color-gray-900);
	min-height: 100dvh;
	position: relative;
}

.boss-quiz *,
.boss-quiz *::before,
.boss-quiz *::after {
	box-sizing: border-box;
}

/* ---------- 版面骨架 ---------- */

/* 各畫面內的底部 logo（首頁貼畫面下緣、結果頁在內容結尾），不額外撐高頁面 */
.quiz-footer {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	padding: var(--space-4);
}

/* 首頁的 logo 離下緣遠一點 */
.quiz-landing .quiz-footer {
	padding-bottom: var(--space-12);
}

/* 題目較短時貼近視窗底部；內容超過一頁時自然接在內容後方。 */
.quiz-question-footer {
	margin-top: auto;
	padding-top: var(--space-8);
	padding-bottom: var(--space-6);
}

.quiz-footer-logo img {
	height: 40px;
	display: block;
}

.quiz-screen {
	position: relative;
	z-index: 1;
}

.quiz-screen[hidden] {
	display: none !important;
}

/* 射箭頁、兩段轉場（分數轉場／離職信拍臉）、結果頁：互動內容（HUD 木牌、提前結束鍵、主管跑動範圍、
   結果卡等）不管裝置寬度多寬都固定呈現手機版寬度置中，手感跟手機上一致。加 transform 讓裡面原本用
   position:fixed 定位的元素改成相對這個容器定位，而不是對齊整個瀏覽器視窗。
   場景背景圖則不在這層裡——見 .quiz-stage-backdrop，讓寬螢幕兩側不會留白 */
.quiz-arrows-transition,
.quiz-archery,
.quiz-result,
.quiz-gallery {
	max-width: 480px;
	margin: 0 auto;
	position: relative;
	transform: translateZ(0);
}

/* 場景背景：貼齊真正的瀏覽器視窗（不受上面手機寬度鎖定影響），寬螢幕也能看到完整構圖；
   疊在最底層，互動內容的半透明鎖定框蓋在上面。哪張圖顯示由下面各 .quiz-stage-bg-* 搭配
   :has() 判斷目前作用中的畫面決定，手機／平板／桌機三種構圖跟各頁原本的斷點一致 */
.quiz-stage-backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.quiz-stage-bg {
	position: absolute;
	inset: 0;
	background: var(--color-surface-base) center / cover no-repeat;
	opacity: 0;
	transition: opacity var(--transition-duration) var(--transition-easing);
}

.quiz-stage-bg-arrows-transition {
	background-image: url('/static/site/images/quiz/arrows-transition-bg-mobile.webp?v=20261001a');
}

.quiz-stage-bg-archery {
	background-image: url('/static/site/images/quiz/archery-bg-mobile.webp?v=20261001e');
}

/* 求饒收尾背景：疊在射箭場景之上，顯示與否由 JS 直接切換 hidden，不走 :has() 那一套 */
.quiz-stage-bg-archery-reveal {
	opacity: 1;
	background-image: url('/static/site/images/quiz/result-reveal-bg-mobile.webp?v=20261001a');
}

.quiz-stage-bg-result {
	background-image: url('/static/site/images/quiz/result-page-bg-mobile.webp');
}

.quiz-stage-backdrop:has(~ [data-screen="arrows-transition"]:not([hidden])) .quiz-stage-bg-arrows-transition,
.quiz-stage-backdrop:has(~ [data-screen="archery"]:not([hidden])) .quiz-stage-bg-archery,
.quiz-stage-backdrop:has(~ [data-screen="result"]:not([hidden])) .quiz-stage-bg-result {
	opacity: 1;
}

@media (min-width: 768px) {
	.quiz-stage-bg-arrows-transition {
		background-image: url('/static/site/images/quiz/arrows-transition-bg-tablet.webp?v=20261001a');
	}
	.quiz-stage-bg-archery {
		background-image: url('/static/site/images/quiz/archery-bg-tablet.webp?v=20261001e');
	}
	.quiz-stage-bg-archery-reveal {
		background-image: url('/static/site/images/quiz/result-reveal-bg-tablet.webp?v=20261001a');
	}
	.quiz-stage-bg-result {
		background-image: url('/static/site/images/quiz/result-page-bg-tablet.webp');
	}
}

@media (min-width: 1200px) {
	.quiz-stage-bg-arrows-transition {
		background-image: url('/static/site/images/quiz/arrows-transition-bg-desktop.webp?v=20261001a');
	}
	.quiz-stage-bg-archery {
		background-image: url('/static/site/images/quiz/archery-bg-desktop.webp?v=20261001e');
	}
	.quiz-stage-bg-archery-reveal {
		background-image: url('/static/site/images/quiz/result-reveal-bg-desktop.webp?v=20261001a');
	}
	.quiz-stage-bg-result {
		background-image: url('/static/site/images/quiz/result-page-bg-desktop.webp');
	}
}

/* ---------- 上景（辦公室場景）＋下卡（白色圓角卡）版型 ---------- */

.quiz-landing,
.quiz-question,
.quiz-archery {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.quiz-hero {
	position: relative;
	background: var(--color-surface-base);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.quiz-hero-inner {
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
	padding: 52px var(--space-4) 0;
	display: flex;
	align-items: center;
	gap: var(--space-4);
}


.quiz-hero-question {
	min-height: 0;
	justify-content: flex-start;
}

.quiz-hero-question .quiz-hero-inner {
	/* 從固定位置往下長，作答後追加對話時原主管訊息不會重新置中而跳動。 */
	margin-top: var(--space-12);
	margin-bottom: var(--space-4);
	padding-top: 0;
}


/* 對話框欄：情境標籤在框外上方 */
.quiz-bubble-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* 多對話框直排：一列＝主管小頭像＋對話框，像對話串 */
.quiz-bubble-group {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-2);
	width: 100%;
}

.quiz-bubble-row {
	display: flex;
	align-items: flex-start; /* 頭像對齊框的上緣（直角尾巴指向頭） */
	gap: var(--space-3);
	width: 100%;
}

.quiz-bubble-row.bubble-row-you {
	justify-content: flex-end;
}

.quiz-bubble-face {
	display: block;
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	object-fit: contain;
	object-position: center;
}

.quiz-bubble-row .quiz-hero-bubble {
	flex: 1;
	max-width: none; /* 與忍耐值列、回答區同寬 */
}

.quiz-bubble-row.bubble-row-you .quiz-hero-bubble {
	flex: 0 1 auto;
}

/* 情境行移進對話欄：靠左，下方以灰線與對話切開 */
/* 情境行：仿「新訊息」分隔線設計——左右各一條線夾住置中文字，線色同文字 */
.quiz-bubble-col .quiz-ctx-line {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 0;
	margin: 0 0 var(--space-6); /* 情境與對話間距 24px */
	max-width: none;
	text-align: center;
}

.quiz-bubble-col .quiz-ctx-line::before,
.quiz-bubble-col .quiz-ctx-line::after {
	content: '';
	flex: 1;
	min-width: 24px; /* 長情境折行時線仍保有最小寬度 */
	border-top: 1px solid currentColor; /* 線色與文字同 */
}

/* 對話中的「@你」：品牌紫強調 */
.quiz-mention {
	color: var(--color-accent);
	font-weight: 700;
}

/* 你方的對話框：灰底、無尾巴、靠右 */
.quiz-hero-bubble.quiz-bubble-you {
	background: var(--color-gray-100);
	border-color: transparent;
	align-self: flex-end;
	width: auto;
	max-width: 480px;
	border-top-left-radius: 24px;
	border-top-right-radius: 0;
}

/* 場景內的對話氣泡：白底、朝主管的小尾巴 */
.quiz-hero-bubble {
	position: relative;
	width: 100%;
	max-width: 560px;
	background: var(--color-surface-base);
	border: 2px solid var(--color-border-divider);
	border-radius: 24px;
	padding: var(--space-4) var(--space-6);
}

/* 主管回嗆時對話框輕彈一下 */
.quiz-hero-bubble.bubble-reaction {
	animation: quiz-bubble-reaction 0.3s ease;
}

@keyframes quiz-bubble-reaction {
	0% { transform: translateY(4px) scale(0.97); opacity: 0.6; }
	100% { transform: none; opacity: 1; }
}

/* 尾巴感：主管框左上角直角（朝向左側的主管頭） */
.quiz-hero-bubble {
	border-top-left-radius: 0;
}

/* ---------- 首頁開場：滿版臉部特寫 ---------- */

.quiz-intro-closeup {
	position: fixed;
	inset: 0;
	z-index: 6;
	/* 頭像 SVG 四角透明；同膚色底圖確保任何螢幕比例都不會透出白角。 */
	background: url('/static/site/images/quiz/boss2/skin-bg.svg') center / cover no-repeat;
	cursor: pointer;
	transition: opacity 0.5s ease;
	overflow: hidden;
}

/* 滿版裁切靠 SVG 自己的 preserveAspectRatio="xMidYMid slice"，object-fit 對內嵌 svg 沒有作用 */
.quiz-intro-closeup svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: scale(1.08);
}

/* 特寫眼珠左右飄：inline SVG 才能讓 CSS 動到內部圖層 */
.quiz-closeup-iris {
	animation: quiz-eyes-dart 2.4s ease-in-out infinite;
	transform-origin: center;
}

@keyframes quiz-eyes-dart {
	0%, 16% { transform: translateX(0); }
	26%, 44% { transform: translateX(-5px); }
	56%, 74% { transform: translateX(5px); }
	86%, 100% { transform: translateX(0); }
}

.quiz-intro-closeup.closeup-out {
	opacity: 0;
	pointer-events: none;
}

.quiz-intro-closeup[hidden] {
	display: none !important;
}

.quiz-intro-skip {
	position: absolute;
	bottom: var(--space-6);
	right: var(--space-4);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-gray-600);
}

/* 首頁主內容：上方 logo＋文字＋按鈕，下半部主管大臉，四周撒嘲諷對話框 */
.quiz-landing-main {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 0;
	text-align: center;
	overflow: hidden;
}

.quiz-landing-logo {
	position: relative;
	z-index: 4;
	display: flex;
	justify-content: center;
	padding: var(--space-6) 0 0;
}

.quiz-landing-logo img {
	height: 32px;
	display: block;
}

/* 下半部主管大臉：只露出上半顆頭（眼鏡＋眼睛為主）
 * --face-size/--face-bottom 統一控制尺寸與露出高度，對話框靠它算頭頂位置 */
.quiz-landing-main {
	--face-size: min(158vw, 780px);
	--face-bottom: max(-68vw, -340px);
}

/* 英文提示頁沒有開場動畫，主管臉往下留出完整文案與 CTA 空間。 */
.quiz-availability-page .quiz-landing-main {
	--face-bottom: max(-70vw, -360px);
}

.quiz-landing-face {
	position: absolute;
	left: 50%;
	bottom: var(--face-bottom);
	margin-left: calc(var(--face-size) / -2);
	width: var(--face-size);
	height: var(--face-size);
	pointer-events: none;
	z-index: 2;
}

.quiz-landing-face svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* 首頁大臉眼珠跟著滑鼠移動；位移由 JS 算好寫進 transform，這裡只負責緩動 */
.quiz-landing-iris {
	transition: transform 0.12s ease-out;
}

/* 嘲諷對話框層（手機版也顯示） */
.quiz-landing-taunts {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3; /* 單顆對話框顯示在主管圖前方 */
}

/* 單一嘲諷句：水平擺正，貼在主管眉毛上方的額頭區 */
.quiz-landing-taunt {
	position: absolute;
	left: 50%;
	bottom: min(calc(0.9 * var(--face-size) + var(--face-bottom)), calc(100dvh - 360px)); /* 略遮住頭頂；視窗矮時停在按鈕下方 */
	transform: translateX(-50%);
	max-width: min(420px, 80vw);
	background: var(--color-surface-base);
	border: none;
	border-radius: 999px;
	padding: var(--space-2) var(--space-4);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--color-gray-800);
	text-align: center;
	border: var(--border-width) solid var(--color-border-divider);
}

.quiz-landing-main .quiz-container {
	position: relative;
	z-index: 3;
}

.quiz-landing-main .quiz-landing-inner,
.quiz-landing-main .quiz-landing-face,
.quiz-landing-main .quiz-landing-taunts {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.quiz-landing-main.main-in .quiz-landing-face {
	opacity: 1;
	transform: none;
}

.quiz-landing-main.main-in .quiz-landing-inner {
	opacity: 1;
	transform: none;
	transition-delay: 0.45s;
}

.quiz-landing-main.main-in .quiz-landing-taunts {
	opacity: 1;
	transform: none;
	transition-delay: 0.8s;
}


/* 白色圓角卡：蓋在場景下緣 */
.quiz-sheet {
	position: relative;
	z-index: 2;
	flex: 1;
	background: var(--color-surface-base);
	border-radius: 28px 28px 0 0;
	margin-top: -28px;
	border-top: var(--border-width) solid var(--color-border-divider);
	padding-top: var(--space-6);
}

.quiz-question-next {
	max-width: 360px;
	margin: var(--space-2) auto 0;
}

.quiz-question-next[hidden] {
	display: none !important;
}

/* 尚未回答時維持置中的選項卡；送出後，選擇才會進入上方的右側對話泡泡。 */
.quiz-question .quiz-sheet {
	flex: 0 0 auto;
	align-self: center;
	width: calc(100% - var(--space-8));
	max-width: 720px;
	background: var(--color-surface-base);
	box-shadow: none;
	border: var(--border-width) solid var(--color-border-divider);
	border-radius: var(--radius-card);
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	padding-top: var(--space-4);
}

.quiz-question .quiz-container {
	padding-bottom: var(--space-4);
}

.quiz-container {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--space-4) var(--space-8);
}

.quiz-container-narrow {
	max-width: 560px;
}

.quiz-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- 共用元件 ---------- */

.quiz-eyebrow {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-accent);
	background: var(--color-accent-tint-hover);
	border-radius: 999px;
	padding: var(--space-1) var(--space-3);
}

.quiz-btn {
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	border: none;
	border-radius: var(--radius-button);
	padding: var(--space-3) var(--space-6);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	transition: background-color var(--transition-duration) var(--transition-easing);
}

.quiz-btn-primary {
	background: var(--color-accent);
	color: var(--color-on-accent);
}

.quiz-btn-primary:hover {
	background: var(--color-accent-hover);
}

.quiz-btn-primary:disabled {
	background: var(--color-gray-400);
	cursor: default;
}

.quiz-btn-secondary {
	background: var(--color-surface-base);
	color: var(--color-gray-700);
	border: var(--border-width) solid var(--color-accent);
}

.quiz-btn-secondary:hover {
	background: var(--color-accent-tint-active);
}

.quiz-btn-neutral {
	background: transparent;
	color: var(--color-gray-600);
	border: 1px solid var(--color-border-interactive);
}

/* 白底版本：目前給「回首頁再戰一輪」使用 */
.quiz-btn-white {
	background: var(--color-surface-base);
	color: var(--color-gray-600);
	border: 1px solid var(--color-border-interactive);
}

.quiz-btn-white:hover {
	background: var(--color-gray-100);
}

.quiz-btn-neutral:hover,
.quiz-gallery-preview .quiz-btn-neutral:hover {
	background: var(--color-gray-100);
	color: var(--color-gray-600);
}

.quiz-btn-outline {
	background: transparent;
	color: var(--color-gray-900);
	border: var(--border-width) solid var(--color-accent);
}

.quiz-btn-outline:hover {
	background: var(--color-accent-tint-hover);
}

.quiz-btn-lg {
	font-size: 18px;
	padding: var(--space-4) var(--space-8);
	width: 100%;
}

.quiz-btn:focus-visible,
.quiz-card-gender-toggle:focus-visible,
.quiz-option-btn:focus-visible,
.quiz-share-option:focus-visible,
.quiz-share-sheet-backdrop:focus-visible,
.quiz-snackbar-close:focus-visible,
.quiz-archery-exit:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: var(--focus-ring-offset);
}

.quiz-snackbar {
	position: fixed;
	left: 50%;
	bottom: var(--space-6);
	transform: translateX(-50%);
	background: var(--color-state-success-bg);
	color: var(--color-state-success-text);
	font-size: 14px;
	border-radius: var(--radius-snackbar);
	padding: var(--space-3) var(--space-4);
	z-index: 10;
	max-width: calc(100vw - var(--space-8));
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.quiz-snackbar.is-error {
	background: var(--color-state-error-bg);
	color: var(--color-state-error-text);
}

.quiz-snackbar-close {
	min-width: var(--touch-target-min);
	min-height: var(--touch-target-min);
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.quiz-snackbar[hidden] {
	display: none !important;
}

/* ---------- 主管插畫（SVG 裁切為半身） ---------- */

.quiz-boss-figure {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	pointer-events: none;
}

/* 題目頁主管：表情頭像（置中對齊對話框） */
.quiz-boss-figure-question {
	width: 96px;
	height: 96px;
	flex: 0 0 auto;
}

/* 射箭場的主管：全身圖。寬度跟著視窗寬度縮放（手機版縮到 70px），
 * 避免窄螢幕上固定尺寸的主管佔掉太大比例的畫面、變得太好瞄準；高度依原圖比例（110:324）等比換算。 */
.quiz-boss-figure-target {
	width: clamp(70px, 18vw, 110px);
	height: clamp(206px, 53vw, 324px);
	background-image: url('/static/site/images/quiz/boss2/allbody.svg');
}

/* ---------- 首頁 ---------- */

.quiz-landing-inner {
	text-align: center;
	margin-top: 72px; /* 手機版文案離 logo 遠一點 */
}

.quiz-landing-eyebrow {
	margin: 0 0 var(--space-3);
}

.quiz-landing-title {
	font-size: 28px; /* 手機一行放得下完整標題 */
	font-weight: 900;
	line-height: 36px;
	margin: 0 0 var(--space-4);
}

.quiz-title-accent {
	font-style: normal;
	color: var(--color-accent);
}

.quiz-landing-subtitle {
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-8);
}

/* 首頁主按鈕高度落 8 格（56px） */
.quiz-landing .quiz-btn-outline {
	background: transparent;
	color: var(--color-gray-900);
	border: 1.5px solid var(--color-accent);
}

.quiz-btn-outline:hover {
	background: var(--color-accent-tint-hover);
}

.quiz-btn-lg {
	height: 56px;
	padding-top: 0;
	padding-bottom: 0;
}

.quiz-landing-actions {
	max-width: 360px;
	margin: 0 auto;
}

.quiz-start-hint {
	font-size: 14px;
	line-height: 20px;
	color: var(--color-gray-500);
	margin-top: var(--space-4);
}

/* ---------- 抓狂指數量表 ---------- */

.quiz-rage-track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--color-gray-200);
	overflow: visible;
}

.quiz-rage-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--color-warning);
	transition: width 0.45s ease, background 0.45s ease;
}

/* 火焰色系（取自 Fire.svg）：黃 → 橘 → 紅 */
.quiz-rage-fill.heat-low { background: var(--color-warning); }
.quiz-rage-fill.heat-mid { background: var(--color-quiz-heat-mid, var(--color-warning)); }
.quiz-rage-fill.heat-high { background: var(--color-error); }
.quiz-rage-fill.heat-max { background: var(--color-error); }

/* ---------- 題目頁：對話框內容 ---------- */

.quiz-bubble-text p {
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	margin: 0;
}

.quiz-bubble-text p + p {
	margin-top: var(--space-2);
}

/* ---------- 作答區 ---------- */

/* 頂部狀態列：仿照「標籤＋題數」一行、進度條在下一行的做法，兩項資訊都常駐顯示，不用使用者自己猜。 */
.quiz-status-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
	padding: var(--space-6) var(--space-4) 0;
}

/* 第一行：頁面標題（點了跳回測驗首頁）＋題數，同一列置頂 */
.quiz-page-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
}

/* 跟首頁的「職場抓狂指數測驗」文字顏色／字級一致，但不要底色，這裡加上按鈕重置＋可點擊回首頁
   拿掉左邊 padding，讓文字跟下面「抓狂指數」標籤靠左對齊 */
.quiz-page-title-btn {
	border: none;
	background: none;
	padding-left: 0;
	font-family: inherit;
	font-size: 18px;
	cursor: pointer;
}

/* 第二行：抓狂指數標籤＋進度條同一行，中間留間距 */
.quiz-status-labels {
	display: flex;
	align-items: center;
	gap: 4px; /* 標籤跟數字的距離；數字到進度條的距離靠 .quiz-rage-value 自己的 margin-right 補回原本間距 */
}

.quiz-rage-label {
	flex: 0 0 auto;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-gray-900);
	white-space: nowrap;
}

/* 抓狂指數的即時數字，夾在標籤跟進度條中間 */
.quiz-rage-value {
	flex: 0 0 auto;
	margin-right: 12px; /* 4px（gap）+ 12px = 跟進度條維持原本 16px 間距 */
	font-family: var(--font-family-en);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-quiz-hud-number);
}

/* 選完當下跳在剛剛按下的選項卡右上角，讓回饋出現在使用者視線正在看的地方 */
.quiz-score-pop {
	position: absolute;
	top: var(--space-2);
	right: var(--space-3);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-error);
	white-space: nowrap;
	pointer-events: none;
	animation: quiz-score-pop 0.9s ease forwards;
}

/* 忍住了（中立選項）的回饋用測驗專用紫，跟加分的紅色區分開 */
.quiz-score-pop.score-pop-neutral {
	color: var(--color-quiz-boss-accent);
	font-weight: 600;
}

@keyframes quiz-score-pop {
	0% { opacity: 0; transform: translateY(0) scale(0.8); }
	15% { opacity: 1; transform: translateY(0) scale(1.05); }
	30% { transform: translateY(0) scale(1); }
	75% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-10px) scale(1); }
}

/* 題數指示跟頁面標題同一列，沿用 .quiz-eyebrow 的淡紫底／紫字 pill 樣式 */
.quiz-question-progress {
	white-space: nowrap;
	flex-shrink: 0;
}

.quiz-rage-top {
	flex: 1;
	min-width: 0;
	overflow: visible;
}

.quiz-rage-fire {
	position: absolute;
	top: 50%;
	left: 0;
	width: 36px;
	height: 36px;
	transform: translate(-50%, -58%);
	background: url('/static/site/images/quiz/icon-fire.svg') center / contain no-repeat;
	transition: left 0.45s ease;
	pointer-events: none;
}

/* 情境整行粗體文字（不做膠囊） */
.quiz-ctx-line {
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
	padding: var(--space-4) var(--space-4) 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--color-gray-600); /* 文字與左右線同色 */
}

.quiz-ctx-line[hidden] {
	display: none !important;
}

.quiz-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.quiz-option-btn {
	position: relative;
	font-family: inherit;
	text-align: left;
	background: var(--color-gray-100);
	border: 1px solid transparent;
	border-radius: var(--radius-card);
	padding: var(--space-4) var(--space-4);
	min-height: 72px;
	width: 100%;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}

.quiz-option-btn:hover:not(:disabled) {
	border-color: var(--color-accent);
	background: var(--color-accent-tint-hover);
}

.quiz-option-text {
	font-size: 16px;
	line-height: 24px;
	color: var(--color-gray-800);
}

.quiz-option-btn.option-picked {
	border-color: var(--color-accent);
	background: var(--color-selected-bg);
}

.quiz-option-btn.option-mine {
	border-color: var(--color-error);
	background: var(--color-state-error-bg);
}

.quiz-option-btn.option-dim {
	opacity: 0.45;
}

/* 作答後只留下完整對話與題數；選項區連同桌機外框一起收合，不留下空白卡片。 */
.quiz-question.question-answered .quiz-sheet {
	flex: 0 0 auto;
	align-self: stretch;
	width: 100%;
	max-width: none;
	margin-right: 0;
	padding-top: 0;
	border: 0;
	border-radius: 0;
}

.quiz-question.question-answered .quiz-container {
	padding-bottom: 0;
}

.quiz-question.question-answered .quiz-question-next {
	padding-bottom: var(--space-4);
}

/* 矮螢幕（iPhone SE 等高度 700px 以下的機型）：題目頁整頁塞不進一屏，要滑動才看得到最後一個選項跟底部 logo。
   跟寬度斷點分開判斷，只收緊垂直間距／縮小底部 logo，不影響一般手機的寬鬆版面 */
@media (max-height: 700px) {
	.quiz-status-row {
		padding-top: var(--space-4);
	}

	.quiz-hero-question .quiz-hero-inner {
		margin-top: var(--space-6);
	}

	.quiz-options {
		gap: var(--space-2);
	}

	.quiz-option-btn {
		padding: var(--space-3) var(--space-4);
		min-height: 56px;
	}

	.quiz-question-footer {
		padding-top: var(--space-2);
		padding-bottom: var(--space-2);
	}

	.quiz-footer-logo img {
		height: 24px;
	}
}

/* ---------- 分數轉場：抓狂指數換算箭數 ---------- */

.quiz-arrows-transition {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
	padding: var(--space-6);
	text-align: center;
}

.quiz-arrows-transition-inner {
	max-width: 420px;
}

/* 標題文字比照首頁主標題（quiz-landing-title）的字級／字重 */
.quiz-arrows-transition-title {
	font-size: 28px;
	font-weight: 900;
	line-height: 36px;
	margin: 0 0 var(--space-4);
}

.quiz-arrows-transition-title span {
	font-family: var(--font-family-en);
	color: var(--color-quiz-highlight);
}

/* 其餘兩行文字比照首頁副標題（quiz-landing-subtitle）的字級／字重／顏色 */
.quiz-arrows-transition-value,
.quiz-arrows-transition-cta {
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-2);
}

.quiz-arrows-transition-value strong {
	font-family: var(--font-family-en);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-quiz-highlight);
}

.quiz-arrows-transition-cta {
	margin: 0;
}

/* ---------- 結果轉場：離職信拍臉 ---------- */

/* 離職信拍臉轉場：這一頁只有插畫、沒有任何互動內容，所以跟 .quiz-stage-backdrop 一樣貼齊整個
   瀏覽器視窗，不跟著其他畫面鎖手機寬度 —— 鎖在 480px 直條裡的話，為寬螢幕畫的橫式構圖會被
   裁到只剩主管的臉，左邊手拿的離職信整個被切掉。 */
.quiz-result-transition {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--color-gray-100);
	z-index: 1;
}

.quiz-result-transition img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.quiz-result-transition-scene2 {
	opacity: 0;
}

/* 圖 1：離職信揚起靠近主管臉 */
.quiz-result-transition.slap-playing .quiz-result-transition-scene1 {
	animation: quiz-resignation-approach 0.45s cubic-bezier(0.3, 0.6, 0.3, 1) both;
}

/* 圖 2：信拍上臉的瞬間硬切進場，再定格出衝擊感 */
.quiz-result-transition.slap-playing .quiz-result-transition-scene2 {
	animation: quiz-resignation-slap 1.6s cubic-bezier(0.2, 0.75, 0.25, 1) 0.45s both;
}

@keyframes quiz-resignation-approach {
	0% {
		transform: translate3d(38%, 8%, 0) scale(0.72) rotate(10deg);
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		transform: translate3d(-3%, 1%, 0) scale(1.04) rotate(-2deg);
		opacity: 1;
	}
}

@keyframes quiz-resignation-slap {
	0% {
		opacity: 1;
		transform: translate3d(-7%, 5%, 0) scale(1.24) rotate(-4deg);
	}
	22% {
		transform: translate3d(2%, -1%, 0) scale(1.08) rotate(1deg);
	}
	38% {
		transform: translate3d(-1%, 0, 0) scale(1.03) rotate(-0.5deg);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* 踩地雷時整頁震動 */
.quiz-shake {
	animation: quiz-shake 0.5s ease;
}

@keyframes quiz-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-8px); }
	40% { transform: translateX(8px); }
	60% { transform: translateX(-5px); }
	80% { transform: translateX(5px); }
}

/* ---------- 射箭釋放 ---------- */

/* 場地背景、求饒收尾背景：見最上面的 .quiz-stage-backdrop / .quiz-stage-bg-archery(-reveal)，
   改成貼齊真正視窗寬度，不再卡在這個畫面本身的手機寬度鎖定框裡 */

/* 箭數／命中數 HUD：直接用提供的木牌插畫當背景，標籤＋數字置中疊在圖片留白區（圖示佔左側，留白從約 34% 開始）
   整排行高跟木牌本身一樣高（60px），數字＋標籤都在同一條基準線上對齊 */
.quiz-hud-banner {
	position: fixed;
	top: var(--space-6);
	z-index: 3;
	width: 150px;
	height: 60px;
	background: center / contain no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	/* 用固定 px 而非百分比：banner 是 position:fixed，padding 百分比會對到 viewport 寬度而不是 150px banner 本身寬度 */
	padding-left: 51px;
	padding-right: 6px;
	white-space: nowrap;
	line-height: 60px;
}

.quiz-hud-label {
	font-family: var(--font-family-zh);
	font-size: 12px;
	font-weight: 700;
	color: var(--color-quiz-hud-label);
	line-height: normal;
}

.quiz-hud-banner strong {
	font-family: var(--font-family-en);
	font-weight: 900;
	font-size: 26px;
	color: var(--color-quiz-hud-number);
	line-height: 60px;
}

.quiz-hud-arrows {
	left: var(--space-6);
	background-image: url('/static/site/images/quiz/hud-arrows-remaining.webp?v=20261001a');
}

/* 文字疊圖位置微調：整組再往左 4px */
.quiz-hud-arrows .quiz-hud-label {
	margin-left: -4px;
}

.quiz-hud-hits {
	right: var(--space-6);
	background-image: url('/static/site/images/quiz/hud-hit-count.webp?v=20261001a');
}

/* 退出鍵改用提供的木牌插畫當背景，文字整個置中疊在圖片上；縮小尺寸避免擋到底部的弓箭 */
.quiz-archery-exit {
	position: fixed;
	bottom: var(--space-2);
	right: var(--space-2);
	z-index: 3;
	width: 90px;
	height: 33px;
	background: url('/static/site/images/quiz/hud-quit1.webp') center / contain no-repeat;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-family-zh);
	font-size: 12px;
	font-weight: 700;
	color: var(--color-quiz-hud-label);
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease;
}

/* 文字往右移，避開木牌插畫左側的圖示；再往左收 4px */
.quiz-archery-exit span {
	display: inline-block;
	transform: translateX(12px);
}

.quiz-archery-exit:hover {
	transform: scale(1.05);
}

/* 可見區域跟著視窗裁切；場地的最小尺寸不撐大頁面，也不讓焦點捲動場地。 */
.quiz-archery {
	height: 100dvh;
	overflow: clip;
}

/* 整頁都是射擊區：鼠標換成瞄準鏡 */
.quiz-range {
	position: relative;
	display: block;
	width: 100%;
	min-height: 100dvh;
	overflow: hidden; /* 裁去弓的下半與場地外特效，不讓它們撐高頁面。 */
	cursor: crosshair;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: none; /* 長按連發時不觸發頁面捲動 */
}

/* 桌機標靶獨立於主管的動畫合成層，避免主管移動時 SVG 游標被瀏覽器短暫重繪掉。 */
.quiz-aim-reticle {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.quiz-range {
		/* 桌機縮小視窗不能壓縮主管的活動範圍；手機沿用原本尺寸。 */
		min-width: 320px;
		min-height: max(600px, 100dvh);
		cursor: none;
	}

	/* 弓仍貼著可見視窗底部，不跟著較大的主管場地被裁到畫面外。 */
	.quiz-range .quiz-bow {
		position: fixed;
	}

	.quiz-aim-reticle {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 40px;
		height: 40px;
		background: url('/static/site/images/quiz/target-cursor.svg') center / contain no-repeat;
		pointer-events: none;
		z-index: 20;
		will-change: transform;
		contain: strict;
	}

	.quiz-aim-reticle[hidden] {
		display: none;
	}

	/* 求饒收尾這時不用瞄準了，滑鼠游標恢復正常箭頭 */
	.quiz-range.quiz-range-revealing {
		cursor: auto;
	}
}

/* 求饒收尾這時不用瞄準了，滑鼠游標恢復正常箭頭（涵蓋沒有 hover/fine pointer 的情況） */
.quiz-range.quiz-range-revealing {
	cursor: auto;
}

.quiz-range:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: -3px;
}

/* COMBO／嘴砲整組距離畫面頂端 24px（不是相對主管，是相對整個介面上緣）：
   木牌中間空隙太窄，COMBO 貼齊 24px 會蓋到木牌，維持安全距離 92px */
.quiz-archery-head {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 88px var(--space-4) 0; /* HUD 木牌底邊 84px + 4px 間距 */
	max-width: 560px;
	margin: 0 auto;
}

/* 主管嘴砲堆疊在標題下方：新的堆最上面，舊的往下沉、變淡 */
.quiz-taunt-stack {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-1);
	pointer-events: none;
}

.quiz-taunt-stack-item {
	max-width: min(380px, calc(100vw - var(--space-8)));
	background: var(--color-surface-base);
	border-radius: var(--radius-card);
	padding: var(--space-2) var(--space-3);
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--color-gray-800);
	border: var(--border-width) solid var(--color-border-divider);
	animation: quiz-taunt-stack-in 0.25s ease;
	transition: opacity 0.3s ease;
}

/* 連點 4 次還沒長按的提醒：跟「射歪啦！連擊中斷」（.quiz-combo-break-pill）同一套
   黃底咖啡字警示色，跟一般白底的開場提示／主管嘴砲區分開 */
.quiz-taunt-stack-item-warning {
	background: var(--color-warning);
	color: var(--color-quiz-combo-outline);
	border-color: var(--color-warning);
}

.quiz-taunt-stack-item:nth-last-child(1) { opacity: 1; }
.quiz-taunt-stack-item:nth-last-child(2) { opacity: 0.7; }
.quiz-taunt-stack-item:nth-last-child(3) { opacity: 0.45; }
.quiz-taunt-stack-item:nth-last-child(n+4) { opacity: 0.25; }

/* 被擠出堆疊、準備移除的泡泡：淡出到 0 再真的從 DOM 拿掉，不要瞬間消失 */
.quiz-taunt-stack-item.quiz-taunt-stack-item-leaving {
	opacity: 0 !important;
}

@keyframes quiz-taunt-stack-in {
	0% { opacity: 0; transform: translateY(-6px) scale(0.94); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.quiz-btn-sm {
	font-size: 13px;
	padding: var(--space-1) var(--space-3);
}

/* 主管（會跑的箭靶）：站在畫面中段；z-index 要蓋過上方嘴砲堆疊，不能被文字擋住
   固定用手機版地板線比例，JS 的 BOSS_BASE_TOP_PCT 要跟著保持一致（見該檔案） */
.quiz-boss-runner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	pointer-events: none;
}

/* 弓：固定在頁面底端中央，射擊時轉向目標 */
.quiz-bow {
	position: absolute;
	bottom: -108px; /* 弓只露出上半，下半被畫面底緣裁掉；上移一點讓露出的比例多一些 */
	left: 50%;
	width: 256px;
	height: 256px;
	background: url('/static/site/images/quiz/bowandarrow.svg') center / contain no-repeat;
	transform: translateX(-50%) rotate(105deg); /* 圖檔箭頭朝左，轉成朝上微傾 */
	transform-origin: 50% 50%;
	pointer-events: none;
	z-index: 2;
}

.quiz-bow.bow-recoil {
	animation: quiz-bow-recoil 0.18s ease;
}

@keyframes quiz-bow-recoil {
	0% { scale: 1; }
	40% { scale: 0.92; }
	100% { scale: 1; }
}

/* 飛行中的箭 */
.quiz-flying-arrow {
	position: absolute;
	width: 84px;
	height: 84px;
	background: url('/static/site/images/quiz/arrow.svg') center / contain no-repeat;
	pointer-events: none;
	z-index: 3;
}

.quiz-miss-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* 沒中提示：固定掛在主管頭上，跟著他一起跑 */
.quiz-miss-pop {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translate(-50%, -100%);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-error);
	background: var(--color-surface-base);
	border-radius: 999px;
	padding: 2px 10px;
	white-space: nowrap;
	pointer-events: none;
	animation: quiz-miss-pop 0.95s ease forwards;
}

@keyframes quiz-miss-pop {
	0% { opacity: 0; margin-bottom: -4px; }
	25% { opacity: 1; margin-bottom: 0; }
	100% { opacity: 0; margin-bottom: 12px; }
}

/* COMBO／斷連擊提示固定共用同一行高度：兩個都疊在這格裡用絕對定位置中，
   不管哪個顯示、或兩個都沒顯示，這格高度都不變，下面的嘴砲泡泡不會被推上推下 */
.quiz-combo-slot {
	position: relative;
	height: 36px; /* 紅膠囊 28px，靠內部 flex 置中自然留出上下各 4px */
}

/* COMBO 常駐 HUD：跟對話框同一套語彙，膠囊形狀、紅底白字，達 2 連擊才出現，維持到斷連擊或箭射完 */
.quiz-combo-hud {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: quiz-combo-hud-in 0.25s ease;
}

/* display:flex 的優先度會蓋掉瀏覽器預設的 [hidden]，要明講蓋回去 */
.quiz-combo-hud[hidden] {
	display: none !important;
}

.quiz-combo-pill {
	position: relative; /* 加碼箭數膠囊要貼齊這顆的右邊外側 */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	background: var(--color-quiz-combo-fire-red);
	border-radius: 999px;
	padding: var(--space-1) var(--space-4); /* 跟「射歪啦！連擊中斷」膠囊同一套 padding，泡泡厚度看起來一致 */
}

/* COMBO 數字／文字：字級字重跟「射歪啦！連擊中斷」一致（14px／700） */
.quiz-combo-pill strong {
	font-family: var(--font-family-en);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-surface-base);
}

.quiz-combo-label {
	font-family: var(--font-family-en);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-surface-base);
}

/* 加碼箭數：絕對定位貼在 COMBO 膠囊右邊外側、相距 4px，不佔版面空間，不會把 COMBO 本身推走
   樣式／跳出效果都比照題目頁的加分回饋（quiz-score-pop）：純文字無底色，彈出、停留、往上淡出 */
.quiz-combo-bonus {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 4px;
	display: block;
	font-family: var(--font-family-zh);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-error);
	white-space: nowrap;
}

.quiz-combo-bonus.quiz-combo-bonus-anim {
	animation: quiz-score-pop 0.9s ease forwards;
}

.quiz-combo-bonus[hidden] {
	display: none !important;
}

@keyframes quiz-combo-hud-in {
	0% { opacity: 0; transform: scale(0.7); }
	60% { opacity: 1; transform: scale(1.1); }
	100% { transform: scale(1); }
}

/* 連擊中斷：跟 COMBO HUD 共用同一格位置，斷連擊瞬間短暫取代它；單行膠囊，黃底深字 */
.quiz-combo-break {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quiz-combo-break-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-family-zh);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-quiz-combo-outline);
	background: var(--color-warning);
	border-radius: 999px;
	padding: var(--space-1) var(--space-4);
	white-space: nowrap;
}

.quiz-combo-break[hidden] {
	display: none !important;
}

.quiz-combo-break.quiz-combo-break-anim {
	animation: quiz-combo-break-in 1.8s ease forwards;
}

/* 拉長停留時間到 1.8s（原本 0.9s 太短，中文句子來不及看完）：
   彈出／回穩各佔約 180ms，中間維持完全不透明約 1.3s，最後 180ms 淡出 */
@keyframes quiz-combo-break-in {
	0% { opacity: 0; transform: scale(0.85); }
	10% { opacity: 1; transform: scale(1.05); }
	18% { transform: scale(1); }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

/* 求饒收尾揭曉：箭數／命中數木牌、嘴砲堆疊、角落遞離職信小圖示、底部的弓這時都先收起來，
   主管本尊（含插在身上的箭）也收起來，改用卡片下方的求饒插圖，畫面讓給徽章／命中率／本局戰績卡／底部遞離職信按鈕 */
.quiz-range.quiz-range-revealing .quiz-hud-banner,
.quiz-range.quiz-range-revealing .quiz-archery-exit,
.quiz-range.quiz-range-revealing .quiz-taunt-stack,
.quiz-range.quiz-range-revealing .quiz-bow,
.quiz-range.quiz-range-revealing .quiz-boss-runner {
	display: none;
}

/* 徽章固定距畫面上緣 40px，其餘命中率／本局戰績卡／遞離職信按鈕依序往下排。
   手機版視窗矮（或桌機視窗被縮得很小）時，這些內容疊起來的總高度可能超過畫面，
   原本 overflow: hidden 會直接把超出的部分裁掉——最底下的暱稱欄位、「遞離職信」按鈕
   可能整個看不到也點不到，等於卡住送不出成績。改成可以垂直捲動，裝得下就跟原本一樣
   不會出現捲軸，裝不下才讓人捲上去看到完整內容。
   pointer-events 原本是 none（讓背景在這層蓋住整個畫面時還能被點到），但這個畫面出現時
   射箭場景本身（弓、提前結束鈕、主管本尊）已經全部隱藏，沒有東西需要被點穿透到，
   改成 auto 讓這一層自己可以捲動／接收觸控滑動。 */
.quiz-reveal-stats {
	position: fixed;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-2);
	padding: 40px var(--space-4) var(--space-6);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	pointer-events: auto;
}

.quiz-reveal-stats::-webkit-scrollbar {
	display: none;
}

/* display:flex 的優先度會蓋掉瀏覽器預設的 [hidden]，要明講蓋回去 */
.quiz-reveal-stats[hidden] {
	display: none !important;
}

/* 徽章疊在命中率卡片上緣，要蓋在卡片前面；距畫面上緣固定 40px（靠 .quiz-reveal-stats 的 padding-top） */
.quiz-reveal-badge {
	width: 220px;
	height: 220px;
	background: center / contain no-repeat;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	margin-bottom: -55px;
}

.quiz-reveal-badge[hidden] {
	display: none !important;
}

/* 命中率＋一句話吐槽自己一張卡片；上面留白讓徽章疊上去也不會蓋到文字 */
.quiz-reveal-hitrate-card {
	width: 100%;
	max-width: 350px;
	background: var(--color-quiz-card-bg);
	border-radius: var(--radius-card);
	border: var(--border-width) solid var(--color-quiz-card-border);
	padding: 64px var(--space-4) var(--space-4);
	flex-shrink: 0;
}

.quiz-hitrate-reveal {
	margin: -24px 0 0;
	font-family: var(--font-family-zh);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-quiz-card-text);
	white-space: nowrap;
	text-align: center;
}

.quiz-hitrate-reveal strong,
.quiz-hitrate-reveal-percent {
	font-family: var(--font-family-en);
	font-size: 44px;
	font-weight: 900;
	color: var(--color-error);
}

/* 命中率下方的一句話吐槽，跟徽章同一個等級資料（HIT_RATE_TIERS.tagline）；固定一行不換行 */
.quiz-hitrate-tagline {
	margin: var(--space-2) 0 0;
	font-family: var(--font-family-zh);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-quiz-card-text);
	text-align: center;
	white-space: nowrap;
}

/* 本局戰績卡：卡片，每行左右對齊 */
.quiz-reveal-summary {
	width: 100%;
	max-width: 350px;
	background: var(--color-quiz-card-bg);
	border-radius: var(--radius-card);
	border: var(--border-width) solid var(--color-quiz-card-border);
	padding: var(--space-3) var(--space-4);
	flex-shrink: 0;
}

.quiz-reveal-summary-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-family-zh);
	font-size: 24px;
	font-weight: 700;
	color: var(--color-quiz-card-text);
	text-align: center;
}

.quiz-reveal-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-1) 0;
	font-family: var(--font-family-zh);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-quiz-card-text);
	border-top: var(--border-width) solid var(--color-quiz-card-border);
}

.quiz-reveal-summary-row:first-of-type {
	border-top: none;
}

.quiz-reveal-summary-row strong {
	font-family: var(--font-family-en);
	font-size: 16px;
	font-weight: 900;
	color: var(--color-quiz-card-text);
}

/* 暱稱：純前端存在 localStorage，排行榜頁的「你的名次」列會讀這裡存的值；
   父層 .quiz-reveal-stats 是 pointer-events: none，輸入框要自己拿回點擊／輸入能力。
   標籤在上、輸入框在下，寬度跟上面的本局戰績卡一致（同一個 350px） */
.quiz-reveal-nickname-field {
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-2);
	width: 100%;
	max-width: 350px;
	flex-shrink: 0;
}

.quiz-reveal-nickname-label {
	flex: 0 0 auto;
	text-align: center;
	font-family: var(--font-family-zh);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-quiz-card-text);
}

.quiz-reveal-nickname-input {
	width: 100%;
	height: 40px;
	font-family: inherit;
	font-size: 14px;
	color: var(--color-quiz-card-text);
	background: var(--color-surface-base);
	border: var(--border-width) solid var(--color-quiz-card-border);
	border-radius: var(--radius-input);
	padding: 0 var(--space-3);
}

.quiz-reveal-nickname-input[aria-invalid="true"] {
	border-color: var(--color-error);
}

.quiz-reveal-nickname-input:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* 提前結束才出現的提示：跟按鈕之間維持容器本來的 8px gap 就好，清掉 <p> 瀏覽器預設的
   上下 margin，不然 margin 會疊加在 gap 上面，兩個按鈕之間就不只 8px 了 */
/* 跟暱稱欄位之間要留 24px：容器本身的 gap 已經有 8px，這裡只需要再加 16px。
   這句提示字只會在提前結束時出現，而且永遠緊接在暱稱欄位後面，不像按鈕還要分
   「提前結束／正常完賽」兩種情況，可以直接寫死 margin-top，不用 JS 切換 class。 */
.quiz-reveal-early-end-note {
	margin: var(--space-4) 0 0;
	width: 100%;
	max-width: 350px;
	text-align: center;
	font-family: var(--font-family-zh);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-gray-600);
}

.quiz-reveal-early-end-note[hidden] {
	display: none !important;
}

/* 首輪「遞離職信」、重射完成的「拿新戰績回去」共用同一顆實心按鈕（不再用插畫素材）。
   父層停用 pointer-events，這顆要自己取回操作能力。 */
.quiz-reveal-continue-btn {
	pointer-events: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 350px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-on-accent);
	background: var(--color-quiz-boss-resign-btn-bg);
	border: none;
	border-radius: var(--radius-button);
	padding: var(--space-4) var(--space-8);
	cursor: pointer;
	transition: transform 0.15s ease;
}

/* 跟暱稱欄位之間要留 24px：容器本身的 gap 已經有 8px，這裡只需要再加 16px。
   不能用 CSS 的「+」相鄰選擇器判斷（提前結束的提示字就算 hidden，DOM 結構上還是
   緊接在暱稱欄位後面，+ 選擇器只看結構不看有沒有顯示，永遠不會命中），改由 JS 依
   renderNicknameFieldMode() 判斷的提前結束狀態切換這個 class */
.quiz-reveal-continue-btn-spaced {
	margin-top: var(--space-4);
}

.quiz-reveal-continue-btn:hover {
	transform: scale(1.03);
}

.quiz-reveal-continue-btn[hidden] {
	display: none !important;
}

/* 中箭反應動畫放在內層插畫，避免蓋掉外層置中/跑動的 transform */
.quiz-boss-runner.target-hit .quiz-boss-figure-target {
	animation: quiz-target-hit 0.5s ease;
}

@keyframes quiz-target-hit {
	0% { transform: translateX(0) rotate(0); }
	30% { transform: translateX(-7px) rotate(-4deg) scale(0.97); }
	60% { transform: translateX(6px) rotate(3deg); }
	100% { transform: translateX(0) rotate(0); }
}

/* 箭射完：主管本尊直接換成求饒圖，不再另外做暈眩/倒地動畫 */
.quiz-boss-runner.surrendered .quiz-boss-figure-target {
	opacity: 0;
}

.quiz-arrow-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.quiz-stuck-arrow {
	position: absolute;
	width: 64px;
	height: 64px;
	background: url('/static/site/images/quiz/arrow.svg') center / contain no-repeat;
	pointer-events: none;
}

/* 命中主管後留下的 OK 繃：故意做得很小，同一位置命中好幾次也只留一張，不會擋住臉。
   12px 是對著主管身形挑的：他的小腿只有 12.5px 寬，再大一點 OK 繃就會比腿還寬、邊緣溢出身體。 */
.quiz-hit-bandage {
	width: 12px;
	height: 12px;
	background-image: url('/static/site/images/quiz/boss-hit-bandage.webp?v=20261002a');
}

/* 沒中的箭留 2 秒後淡出消失，畫面上不再越插越亂 */
.quiz-missed-arrow {
	opacity: 0.75;
	transition: opacity 0.35s ease;
}

.quiz-missed-arrow.is-fading {
	opacity: 0;
}

/* 命中插著的箭：比沒中的箭淡出快一點，淡完就只留 OK 繃痕跡。
   36px 比沒中的箭（64px 方框）小一截是故意的：插箭素材自帶尾羽和陰影，
   同尺寸下尾羽會比射出去的細箭粗兩倍多，一插上主管就胖一圈。 */
.quiz-hit-arrow-fade {
	width: 36px;
	height: 36px;
	transition: opacity 0.3s ease;
}

.quiz-hit-arrow-fade.is-fading {
	opacity: 0;
}

/* 求饒圖：箭射完後依命中率換成對應的主管狀態圖，排在本局戰績卡下方，稍微疊住卡片下緣 */
.quiz-hit-pop {
	background: center / contain no-repeat;
	pointer-events: none;
	flex-shrink: 0;
}

.quiz-hit-pop.surrender {
	width: 170px;
	height: 170px;
	opacity: 1;
	position: relative;
	z-index: 1;
	margin-top: -40px;
}

.quiz-hit-pop[hidden] {
	display: none !important;
}

/* 全箭命中彩蛋：以高對比卡片蓋在射擊區中央，先讓玩家看清楚再進求饒收尾。 */
.quiz-perfect-hit {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(360px, calc(100% - var(--space-8)));
	min-height: 180px;
	padding: var(--space-6);
	background: var(--color-surface-base);
	border: var(--border-width) solid var(--color-accent);
	border-radius: var(--radius-card);
	text-align: center;
	animation: quiz-perfect-hit-pop 0.45s ease both;
}

.quiz-perfect-hit[hidden] {
	display: none !important;
}

.quiz-perfect-hit strong {
	font-size: var(--text-landing-h2-size-mobile);
	line-height: 1.3;
	color: var(--color-accent);
}

.quiz-perfect-hit span {
	margin-top: var(--space-2);
	font-size: var(--text-landing-body-s-size-desktop);
	font-weight: 700;
	color: var(--color-gray-800);
}

@keyframes quiz-perfect-hit-pop {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.75); }
	70% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- 最終結果 ---------- */

.quiz-result {
	position: relative;
	min-height: 100dvh;
}

.quiz-result-card-stage {
	width: min(360px, calc(100% - var(--space-8)));
	margin: 0 auto;
	padding-top: var(--space-8);
}

.quiz-result-body {
	max-width: 392px; /* 內容寬 360，與分享卡同寬 */
	padding-top: var(--space-6);
}

.quiz-result-hero {
	text-align: center;
}

/* ---------- 結果分享卡：設計稿拍平的整張圖，只疊 3 個動態數字 ---------- */

.quiz-card-wrap {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	border: var(--border-width) solid var(--color-border-divider);
	outline: none;
	background: var(--color-quiz-boss-card-bg);
}

.quiz-card-img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-touch-callout: default;
	user-select: auto;
}

.quiz-card-wrap.card-rendered .quiz-card-overlay {
	display: none;
}

/* 三個動態數字：上班抓狂指數／心裡罵幾句／想離職程度，疊在底圖同一列示範數字的位置上蓋過去 */
.quiz-card-overlay-stats {
	position: absolute;
	left: 0;
	top: 79.6%;
	width: 100%;
	height: 9%;
	display: flex;
	align-items: baseline;
}

.quiz-card-stat {
	flex: 1;
	text-align: center;
	white-space: nowrap;
}

.quiz-card-stat strong {
	font-size: 26px;
	font-weight: 900;
	color: var(--color-quiz-boss-accent);
}

.quiz-card-stat small {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-gray-900);
	margin-left: 2px;
}

/* 男生／女生角色切換：貼在存圖提示下方，置中呈現 */
.quiz-card-gender-toggle {
	display: block;
	margin: 0 auto var(--space-4);
	font: 600 12px/16px var(--font-family-zh);
	color: var(--color-gray-700);
	background: var(--color-surface-base);
	border: var(--border-width) solid var(--color-border-divider);
	border-radius: 999px;
	padding: 4px var(--space-3);
	cursor: pointer;
}

.quiz-card-gender-toggle:hover {
	background: var(--color-surface-base);
}

/* 主管頭像（對應等級情緒） */
.quiz-result-face {
	width: 144px;
	height: 144px;
	margin: var(--space-4) auto var(--space-2);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* 主管原話放大呈現（引號強調） */
.quiz-result-bossline {
	font-size: 20px;
	line-height: 28px;
	font-weight: 900;
	color: var(--color-gray-900);
	margin: 0 auto var(--space-6);
	max-width: 420px;
}

.quiz-result-bossline::before { content: '「'; }
.quiz-result-bossline::after { content: '」'; }

/* ---------- 分享與 CTA ---------- */

.quiz-share-section {
	text-align: center;
	margin: var(--space-8) 0;
}

.quiz-share-heading {
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	margin: 0 0 var(--space-4);
}

.quiz-cta-banner {
	background: var(--color-surface-base);
	border: 1px solid var(--color-border-divider);
	border-radius: var(--radius-card);
	border: var(--border-width) solid var(--color-border-divider);
	padding: var(--space-6);
	text-align: center;
	margin-bottom: var(--space-6);
}

.quiz-cta-title {
	font-size: 20px;
	line-height: 28px;
	font-weight: 800;
	margin: 0 0 var(--space-2);
}

.quiz-cta-text {
	font-size: 14px;
	line-height: 20px;
	color: var(--color-gray-600);
	margin: 0 0 var(--space-4);
}

.quiz-restart-row {
	text-align: center;
	padding-bottom: var(--space-8);
}

/* ---------- 戰利品展示區 ---------- */

/* 比較文案：完成紀錄足以計算真實比例時才顯示 */
/* 暱稱列：疊在「贏過 N% 的人」上方，字刻意比它小很多（16px vs 24px），
   不會搶走下面那行大數字的視覺重點，純粹是「這是我的結果」的標記 */
.quiz-result-nickname {
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-gray-900);
	margin: 0;
	padding: var(--space-8) var(--space-4) 0;
}

.quiz-result-nickname[hidden] {
	display: none !important;
}

.quiz-percentile-hint {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: var(--color-gray-900);
	margin: 0;
	padding: var(--space-8) var(--space-4) 0;
}

/* 暱稱列有顯示時，跟它的間距縮小成一般行距，不要重複兩次大留白 */
.quiz-result-nickname:not([hidden]) + .quiz-percentile-hint {
	padding-top: var(--space-2);
}

.quiz-percentile-hint[hidden],
.quiz-score-retry[hidden] {
	display: none !important;
}

.quiz-percentile-hint strong {
	font-family: var(--font-family-en);
	font-size: 32px;
	font-weight: 900;
	color: var(--color-accent);
}

/* 存圖提示：貼在結果卡下方 24px（由 .quiz-result-body 的 padding-top 撐開），取代原本的「發 Threads 討拍」整塊區 */
.quiz-save-hint {
	text-align: center;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: var(--color-gray-900);
	margin: 0 0 var(--space-3);
}

/* 重玩誘因：貼在「再被酸一輪」上方，帶點挑釁語氣；跟上面（幹話回顧）多留 16px */
.quiz-replay-hint {
	text-align: center;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: var(--color-gray-900);
	margin: var(--space-4) 0 var(--space-3);
}

/* 平行入口：主次以按鈕樣式區分（primary / secondary / neutral） */
/* 對外動作一排並排，減少按鈕直疊的份量感 */
.quiz-loot-actions {
	display: flex;
	flex-direction: row;
	gap: var(--space-3);
	max-width: 360px;
	margin: 0 auto var(--space-6);
}

.quiz-loot-actions > .quiz-btn {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 56px;
	padding-left: var(--space-3);
	padding-right: var(--space-3);
	font-size: 15px;
	white-space: normal;
	text-align: center;
}

/* 「再射主管一輪！」獨立一行、滿版主色按鈕：跟上面那句吐槽文案直接綁定，是這個區塊最主要的動作 */
.quiz-loot-primary {
	margin: 0 0 var(--space-4);
}

/* 重新測驗／看看其他結局／查看排行榜：三個份量相同的次要動作放同一排，
   跟上面「再射一輪」的主色大按鈕做出層次區分，一樣是實體按鈕（不是純文字連結），觸控範圍更穩定好點 */
.quiz-loot-explore {
	display: flex;
	flex-direction: row;
	gap: var(--space-3);
	padding-bottom: var(--space-8);
}

.quiz-loot-explore > .quiz-btn {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	font-size: 14px;
	white-space: normal;
	text-align: center;
}

/* 這三顆單獨指定外框／文字色，不動 .quiz-btn-neutral 本身（其他地方的「重新載入」
   「關閉」等中性按鈕不受影響，維持原本的灰色） */
.quiz-loot-explore > .quiz-btn-neutral {
	color: var(--color-quiz-boss-loot-border);
	border-color: var(--color-quiz-boss-loot-border);
}

/* 結果頁互動區及其文字／圖示都固定使用手形。透明偽元素補滿圓角按鈕的矩形命中區，
 * 避免游標掠過四個圓角像素時短暫退回一般箭頭。 */
.quiz-result-body button:not(:disabled),
.quiz-result-body button:not(:disabled) *,
.quiz-result-body a,
.quiz-result-body a * {
	cursor: pointer;
}

.quiz-result-body button:not(:disabled),
.quiz-result-body a {
	position: relative;
}

.quiz-result-body button:not(:disabled)::after,
.quiz-result-body a::after {
	content: '';
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.quiz-jobs-cta {
	display: flex;
}

/* 分享方式選單：點背景、取消或往下滑都能收起 */
.quiz-share-sheet {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.quiz-share-sheet[hidden] {
	display: none !important;
}

.quiz-share-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: var(--color-overlay-scrim);
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--transition-duration) var(--transition-easing);
}

.quiz-share-sheet.is-open .quiz-share-sheet-backdrop {
	opacity: 1;
}

.quiz-share-sheet-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100dvh - var(--space-4));
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-surface-base);
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	padding: var(--space-3) var(--space-4) var(--space-8);
	transform: translateY(100%);
	transition: transform var(--transition-duration) var(--transition-easing);
	touch-action: pan-y;
}

.quiz-share-sheet.is-open .quiz-share-sheet-panel {
	transform: translateY(0);
}

.quiz-share-sheet-panel.is-dragging {
	transition: none;
}

.quiz-share-sheet-handle {
	touch-action: none;
	width: 36px;
	height: 4px;
	background: var(--color-gray-300);
	border-radius: 999px;
	margin: 0 auto var(--space-3);
}

.quiz-share-sheet-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-gray-900);
	margin: 0 0 var(--space-3);
	text-align: center;
}

.quiz-share-option {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: var(--border-width) solid var(--color-border-divider);
	border-radius: var(--radius-button);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-2);
	cursor: pointer;
	font-family: inherit;
}

.quiz-share-option:last-child {
	margin-bottom: 0;
}

.quiz-share-option:hover {
	background: var(--color-gray-50);
}

.quiz-share-option-main {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.quiz-share-option-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-gray-900);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.quiz-share-option-badge {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-accent);
	background: var(--color-accent-tint-hover);
	border-radius: 999px;
	padding: 2px var(--space-2);
}

.quiz-share-option-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-gray-600);
}

/* 結果頁連到集覽頁的低強度文字連結，不跟職缺／分享搶視覺 */
/* ---------- 結局集覽頁：一次瀏覽全部 6 種結局，跟結果卡共用同一套產圖邏輯 ---------- */

.quiz-gallery-body {
	padding-top: var(--space-8);
	text-align: center;
}

/* 父層 .quiz-gallery-body 是 text-align: center，用來置中標題／副標；
   這顆改回 display: block 讓它跳出那個置中規則，貼齊左邊——
   跟排行榜頁的「‹ 返回結果」同一個位置邏輯 */
.quiz-gallery-back {
	display: block;
	text-align: left;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-gray-600);
	padding: var(--space-2) 0;
	margin: 0 0 var(--space-2);
	cursor: pointer;
}

.quiz-gallery-title {
	font-size: 24px;
	font-weight: 900;
	margin: 0 0 var(--space-2);
}

.quiz-gallery-subtitle {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-4);
}

.quiz-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

/* 延伸原有卡片：結局名稱與分數在圖片外即可閱讀。四角圓角統一跟分享圖一致（16px），
   跟 .quiz-gallery-media 的下緣圓角對齊，不然兩層圓角對不起來會露一圈底色；
   底色也統一用分享圖的留白色，不要上面文字區是白的、下面圖片區是另一個顏色。 */
.quiz-gallery-card {
	min-width: 0;
	border: var(--border-width) solid var(--color-border-divider);
	border-radius: var(--radius-card);
	background: var(--color-quiz-boss-card-bg);
}

/* 你這次的結局：外框改成跟「你這次的結局」徽章文字同色的紫，標出這張卡跟其他 5 張不一樣 */
.quiz-gallery-card.is-current {
	border: var(--border-width) solid var(--color-quiz-boss-accent);
}

/* 分數列改到圖片上方，圖片變成卡片最底下那塊，圓角改留給下緣；
   比例跟分享卡底圖（1080×1238）一致，不是舊版 9:16 的通知函圖 */
.quiz-gallery-media {
	position: relative;
	aspect-ratio: 1080 / 1238;
	overflow: hidden;
	border-radius: 0 0 var(--radius-card) var(--radius-card);
	background: var(--color-quiz-boss-card-bg);
}

.quiz-gallery-open {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.quiz-gallery-open:disabled {
	cursor: default;
}

.quiz-gallery-open:focus-visible,
.quiz-gallery-preview-content:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: calc(-1 * var(--focus-ring-width));
}

.quiz-gallery-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.quiz-gallery-feedback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-3);
	pointer-events: none;
}

.quiz-gallery-feedback .quiz-btn {
	pointer-events: auto;
	min-height: var(--touch-target-min);
	padding: var(--space-3);
}

.quiz-gallery-card[data-gallery-state="ready"] .quiz-gallery-feedback {
	display: none;
}

/* 放在圖片上方：只露出分數區間（跟「你這次的結局」標記），結局名稱留給螢幕閱讀器
   跟放大按鈕的 aria-label，畫面上不重複印一次 */
.quiz-gallery-details {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-2);
}

.quiz-gallery-card-title {
	margin: 0;
	font-size: var(--text-landing-h6-size-mobile);
	font-weight: var(--text-landing-h6-weight);
	line-height: var(--text-landing-h6-line-height);
}

.quiz-gallery-range,
.quiz-gallery-status {
	margin: 0;
	font-size: var(--text-landing-caption-size-mobile);
	font-weight: var(--text-landing-caption-weight);
	line-height: var(--text-landing-caption-line-height);
	color: var(--color-gray-700);
}

.quiz-gallery-details .quiz-eyebrow,
.quiz-gallery-preview-heading .quiz-eyebrow {
	margin: 0;
}

/* 分數區間跟「你這次的結局」徽章同一行，徽章縮小一點才不會比分數區間本身還搶眼；
   卡片很窄時兩個字串仍可能擠不下，用 wrap 讓徽章整個掉到下一行，
   不要讓文字被逐字截斷（white-space: nowrap 保住每個字串本身不斷行）。 */
.quiz-gallery-range-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--space-1) var(--space-2);
	min-width: 0;
}

.quiz-gallery-range-row .quiz-gallery-range {
	white-space: nowrap;
}

.quiz-eyebrow-sm {
	font-size: 11px;
	padding: 2px var(--space-2);
	white-space: nowrap;
}

/* 沿用 dialog 系統與 dialog-content 結構，僅安排大圖預覽的尺寸與捲動區域。 */
.dialog.dialog-with-tabs.quiz-gallery-preview {
	position: fixed;
	inset: 0;
	width: min(560px, calc(100vw - var(--space-8)));
	max-width: 560px;
	max-height: calc(100dvh - var(--space-8));
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius-modal);
	color: var(--color-gray-900);
	background: var(--color-surface-base);
}

.quiz-gallery-preview:not([open]),
.quiz-gallery [hidden],
.quiz-gallery-preview [hidden] {
	display: none !important;
}

.quiz-gallery-preview::backdrop {
	background: var(--color-overlay-scrim);
}

.quiz-gallery-preview-layout {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - var(--space-8));
}

.quiz-gallery-preview-header,
.quiz-gallery-preview-footer {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-4);
}

.quiz-gallery-preview-header {
	align-items: flex-start;
	border-bottom: var(--border-width) solid var(--color-border-divider);
}

.quiz-gallery-preview-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	min-width: 0;
}

.quiz-gallery-preview-heading h2 {
	margin: 0;
	font-size: var(--text-backend-h2-size);
	font-weight: var(--text-backend-h2-weight);
	line-height: var(--text-backend-h2-line-height);
}

.quiz-gallery-preview .quiz-btn {
	flex-shrink: 0;
	min-height: var(--touch-target-min);
	padding: var(--space-3) var(--space-4);
}

.quiz-gallery-preview-content {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.quiz-gallery-preview-img {
	display: block;
	width: 100%;
	height: auto;
}

.quiz-gallery-preview-feedback {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.quiz-gallery-preview-feedback:has(:not([hidden])) {
	padding: var(--space-8) var(--space-4);
}

.quiz-gallery-preview-footer {
	border-top: var(--border-width) solid var(--color-border-divider);
}

/* ---------- 桌機向上增強 ---------- */

@media (min-width: 768px) {
	.quiz-landing-main {
		--face-bottom: max(-56vw, -280px);
	}

	.quiz-intro-closeup svg {
		transform: scale(1.46);
	}

	.quiz-landing-inner {
		margin-top: var(--space-12);
	}

	/* 電腦版嘲諷對話框放大 */
	.quiz-landing-taunt {
		font-size: 17px;
		line-height: 26px;
		padding: var(--space-3) var(--space-6);
		max-width: 520px;
	}

	.quiz-landing-title {
		font-size: 44px;
		line-height: 52px;
	}

	.quiz-title-br {
		display: none;
	}

	.quiz-boss-figure-question {
		width: 112px;
		height: 112px;
	}

	.quiz-sheet {
		max-width: 680px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 28px;
		margin-bottom: var(--space-8);
		border: var(--border-width) solid var(--color-border-divider);
	}

	/* 題目頁回答框在送出前維持置中，不再延伸填滿剩餘高度。 */
	.quiz-question .quiz-sheet {
		max-width: 720px;
		margin-bottom: 0;
	}

}

/* 矮螢幕（如 iPhone SE，667px 高）：固定間距在矮螢幕上占比過大，會把對話框跟主管臉擠壓掉；
 * 這裡連同主管臉一起縮小一號（等比例，露出比例維持跟原本一樣的 43%，構圖不變只是整體小一號），
 * 多出來的垂直空間讓對話框跟主管臉有地方喘息。 */
@media (max-height: 700px) {
	.quiz-landing-main {
		--face-size: min(130vw, 640px);
		--face-bottom: max(-56vw, -280px);
	}

	.quiz-landing-inner {
		margin-top: var(--space-8);
	}

	.quiz-landing-eyebrow {
		margin-bottom: var(--space-2);
	}

	.quiz-landing-title {
		margin-bottom: var(--space-2);
	}

	.quiz-landing-subtitle {
		margin-bottom: var(--space-4);
	}

	.quiz-start-hint {
		margin-top: var(--space-2);
	}
}

/* 遊戲動效是本頁的功能性回饋；偏好減少動態時直接顯示每個穩定狀態。 */
@media (prefers-reduced-motion: reduce) {
	.boss-quiz *,
	.boss-quiz *::before,
	.boss-quiz *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

}

/* 最窄場地保留兩塊計分木牌之間的間距。 */
@media (max-width: 360px) {
	.quiz-hud-arrows { left: var(--space-2); }
	.quiz-hud-hits { right: var(--space-2); }
}