/* 同一入口兼容独立页面与 iframe。所有断点都以当前页面/iframe 的视口为准。 */
:root {
	--page-gutter: 48px;
	--header-offset: 104px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: auto;
	scroll-padding-top: var(--header-offset);
	scrollbar-gutter: stable;
}

.wrap {
	width: min(1240px, calc(100% - 2 * var(--page-gutter)));
	min-width: 0;
}

.header.wrap {
	position: sticky;
	top: 0;
	z-index: 5;
	width: 100%;
	min-height: 88px;
	padding: 12px max(var(--page-gutter), calc((100% - 1240px) / 2));
	padding-top: max(12px, env(safe-area-inset-top));
	background: var(--paper);
	box-shadow: 0 3px 12px #202b3905;
}

.mode-nav button { min-height: 44px; }
.search input { font-size: 16px; }
.mark-learned, .card-detail-link { min-height: 44px; }
.card-art img { width: auto; }
.character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.question-layout > *, .quiz-setup > *, .detail-layout > * { min-width: 0; }
.setup-field select { font-size: 16px; }
.footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.standalone-link { display: none; }
.toast { bottom: max(18px, env(safe-area-inset-bottom)); }
.question-stage img { width: auto; }

/* 答题本身就是主内容，切换模式后收起介绍，减少来回滚动。 */
html[data-mode="quiz"] .hero { display: none; }
html[data-phase="question"][data-mode="quiz"] .workspace-heading { display: none; }
html[data-phase="question"][data-mode="quiz"] .workspace { padding-top: 20px; }
.question-stage { min-height: 300px; }
.question-stage img { height: clamp(240px, 52svh, 400px); }

/* 原生 dialog 在 iframe 内使用自身视口；工具栏不会随长笔记滚走。 */
html.dialog-open { overflow: hidden; }
dialog {
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	overscroll-behavior: contain;
}
.dialog-toolbar {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 6px 12px 6px 22px;
	background: #fffefa;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
}
.dialog-toolbar .dialog-close {
	position: static;
	width: 44px;
	height: 44px;
	flex: none;
}
.detail-art { min-height: 420px; }
.detail-art img { height: 350px; }
.compare-button, .source-link { min-height: 44px; }
.source-link { display: inline-flex; align-items: center; }

/* 内嵌：直接展示学习工具，不重复展示完整站点首屏。 */
html[data-context="embedded"] { --page-gutter: 22px; }
html[data-context="embedded"] .hero { display: none; }
html[data-context="embedded"] .header { min-height: 72px; }
html[data-context="embedded"] .brand small,
html[data-context="embedded"] .header-note { display: none; }
html[data-context="embedded"] .brand { font-size: 16px; }
html[data-context="embedded"] .brand-mark { width: 34px; height: 34px; font-size: 28px; }
html[data-context="embedded"] .workspace { padding-top: 20px; }
html[data-context="embedded"] .workspace-heading { margin-bottom: 16px; }
html[data-context="embedded"] h2 { font-size: 23px; }
html[data-context="embedded"] .memory-strip { padding: 12px 16px; margin-bottom: 18px; }
html[data-context="embedded"] .memory-strip small { display: none; }
html[data-context="embedded"] .footer > div:first-child { display: none; }
html[data-context="embedded"] .footer { justify-content: center; padding-top: 20px; }
html[data-context="embedded"] .footer-source { text-align: center; margin-top: 0; }
html[data-context="embedded"] .standalone-link {
	display: block;
	padding: 10px;
	margin-top: 5px;
	color: var(--blue);
	font-size: 13px;
}

@media (max-width: 1100px) {
	:root { --page-gutter: 28px; }
	.character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hero { gap: 12px; }
	h1 { font-size: clamp(34px, 4.2vw, 48px); }
}

@media (max-width: 760px) {
	:root { --page-gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
	.header.wrap {
		justify-content: center;
		gap: 7px;
		min-height: 0;
		padding-top: max(8px, env(safe-area-inset-top));
		padding-bottom: 8px;
	}
	.brand { font-size: 16px; }
	.brand small { display: none; }
	.brand-mark { width: 26px; height: 26px; border-radius: 7px; font-size: 24px; }
	.mode-nav { width: 100%; padding: 3px; border-radius: 10px; }
	.mode-nav button { flex: 1; min-height: 44px; padding: 8px 12px; font-size: 15px; }
	.mode-nav button span { display: inline; }

	/* 手机首屏压成图文并排，不让装饰占据一整屏。 */
	.hero { grid-template-columns: minmax(0, 1fr) 145px; gap: 12px 6px; padding-block: 22px; }
	.hero-copy { display: contents; }
	.hero-copy > .eyebrow, .hero-meta { display: none; }
	.hero h1 { grid-column: 1; grid-row: 1; font-size: clamp(27px, 6.7vw, 39px); margin: 0; text-align: left; align-self: center; }
	.hero-art { grid-column: 2; grid-row: 1; width: 100%; height: 180px; overflow: clip; }
	.hero-description { grid-column: 1 / -1; grid-row: 2; font-size: 14px; text-align: left; line-height: 1.8; }
	.desktop-break { display: none; }
	.hero-actions { grid-column: 1 / -1; grid-row: 3; margin: 0; justify-content: flex-start; gap: 16px; }
	.hero-actions .primary { padding: 12px 17px; font-size: 15px; }
	.hero-actions .text-button { font-size: 13px; min-height: 44px; }
	.hero-art .orbit-one { width: 138px; height: 138px; }
	.hero-art .orbit-two { width: 160px; height: 160px; }
	.hero-tiga { height: 163px; bottom: 3px; }
	.hero-seven { height: 130px; left: 3%; bottom: 14px; }
	.hero-zero { height: 140px; right: 1%; bottom: 14px; }
	.art-label, .art-caption, .art-star { display: none; }
	.hero-art:after { width: 100px; bottom: 3px; }

	.workspace { padding-top: 20px; }
	.workspace-heading { gap: 9px; margin-bottom: 16px; align-items: center; }
	h2 { font-size: 21px; }
	.learned-summary { padding: 5px 10px; }
	.memory-strip { padding: 12px; gap: 8px 15px; margin-bottom: 18px; }
	.memory-title { display: none; }
	.memory-strip > span:not(:first-child) { font-size: 13px; }
	.library-toolbar { gap: 11px; }
	.filters { flex-wrap: nowrap; overflow-x: auto; padding: 3px 2px 6px; scroll-padding-inline: 2px; }
	.filters button { flex: none; min-height: 44px; font-size: 13px; padding: 8px 12px; }
	.search { min-width: 0; padding-block: 10px; }
	.search input { font-size: 16px; }
	.character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.card-art { height: clamp(170px, 48vw, 240px); }
	.card-info { padding: 12px 10px; }
	.card-info h3 { font-size: 17px; }
	.card-clue { font-size: 14px; min-height: 48px; }
	.card-tags span { font-size: 11px; }
	.card-bottom { margin-inline: 10px; padding-block: 4px; flex-wrap: wrap; gap: 2px; }
	.mark-learned { font-size: 13px; }
	.card-detail-link { font-size: 12px; }
	.library-caption { margin-top: 12px; }

	/* 缩短设置说明，把范围选择和开始按钮放在主要位置。 */
	.quiz-setup { padding: 18px; gap: 20px; }
	.quiz-intro { padding: 16px; }
	.quiz-intro .big-star, .quiz-intro .eyebrow { display: none; }
	.quiz-intro h3 { font-size: 19px; margin: 0 0 8px; }
	.quiz-intro h3 br { display: none; }
	.quiz-intro p { font-size: 13px; }
	.quiz-rules { margin-top: 12px; }
	.setup-field label { font-size: 16px; }
	.setup-note { font-size: 13px; }
	.setup-field { margin-bottom: 16px; }

	/* 保持完整题图，同时让四个答案尽量在一屏内出现。 */
	html[data-phase="question"][data-mode="quiz"] .workspace { padding-top: 12px; }
	.quiz-topline { margin: 0 0 10px; gap: 10px; }
	.quiz-topline .text-button { min-height: 44px; padding: 8px 0; font-size: 13px; }
	.progress-track { margin-bottom: 14px; }
	.question-layout { gap: 14px; }
	.question-stage { min-height: 0; height: 230px; height: clamp(185px, 30svh, 260px); padding: 15px; }
	.question-stage img { height: 100%; max-width: 90%; }
	.question-stage:before { font-size: 210px; }
	.stage-tag { top: 12px; left: 12px; font-size: 9px; }
	.question-copy h3 { font-size: 22px; margin-top: 3px; }
	.question-subtitle { display: none; }
	.answers { margin-top: 14px; gap: 10px; }
	.answer { min-height: 64px; padding: 12px 9px; font-size: 16px; gap: 8px; }
	.answer-letter { width: 25px; height: 25px; }
	.feedback { margin-top: 18px; padding: 16px; }
	.feedback p { font-size: 15px; }
	.question-actions { gap: 8px; margin-top: 14px; }
	.question-actions .text-button { min-height: 44px; }
	.result-actions .primary, .result-actions .secondary { width: 100%; }

	dialog { width: calc(100% - 20px); border-radius: 14px; }
	.detail-art { min-height: 0; padding: 18px; }
	.detail-art img { height: 185px; }
	.detail-copy { padding: 22px; }
	.detail-features li, .detail-block { font-size: 15px; }
	.detail-bottom .primary { width: 100%; min-height: 48px; font-size: 15px; }
	.footer-source { font-size: 12px; }

	html[data-context="embedded"] { --page-gutter: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); }
	html[data-context="embedded"] .header { min-height: 0; }
	html[data-context="embedded"] .brand { font-size: 15px; }
	html[data-context="embedded"] .brand-mark { width: 26px; height: 26px; font-size: 24px; }
	html[data-context="embedded"] .memory-strip { padding: 10px; }
	html[data-context="embedded"] h2 { font-size: 20px; }
}

@media (max-width: 359px) {
	.hero { grid-template-columns: minmax(0, 1fr) 118px; }
	.hero h1 { font-size: 26px; }
	.hero-art { height: 160px; }
	.hero-tiga { height: 149px; }
	.hero-seven { height: 115px; }
	.hero-zero { height: 127px; }
	.hero-actions { gap: 9px; }
	.hero-actions .primary { font-size: 14px; padding-inline: 12px; }
	.hero-actions .text-button { font-size: 12px; }
	.character-grid { grid-template-columns: minmax(0, 1fr); }
	.card-open { display: grid; grid-template-columns: 43% minmax(0, 1fr); align-items: center; }
	.card-art { height: 180px; }
	.card-info h3 { font-size: 18px; }
	.card-clue { min-height: 0; }
	.card-bottom { justify-content: flex-end; gap: 20px; }
	.answer { font-size: 14px; }
	.quiz-topline { flex-wrap: wrap; }
	.quiz-topline > strong, .quiz-topline > span { font-size: 13px; }
	.memory-strip { gap: 8px; }
}

/* 矮 iframe 或手机横屏，限制图示高度，避免超出视口的弹窗。 */
@media (min-width: 761px) and (max-height: 640px) {
	.question-stage { min-height: 240px; padding: 22px; }
	.question-stage img { height: clamp(190px, 48svh, 285px); }
	.question-layout { gap: 24px; }
	.question-copy { padding-top: 0; }
	.question-copy h3 { font-size: 24px; }
	.question-subtitle { margin-block: 5px 14px; }
	.answer { min-height: 66px; }
	.detail-art { min-height: 270px; }
	.detail-art img { height: 230px; }
	.quiz-setup { padding: 24px; gap: 25px; }
	.quiz-intro { padding: 23px; }
	.quiz-intro .big-star { font-size: 40px; }
	.quiz-intro h3 { font-size: 23px; }
}