/* Dr.Yの古典文法 ─ 和紙の上に、墨と細い罫線。花を添えて。 */

:root {
	--paper: #f7f4ee;
	--card: #fffdf9;
	--ink: #25222c;
	--ink-2: #5a5461;
	--ink-3: #6f6878;
	--line: #e8e2d7;
	--line-2: #d3cbbd;
	--beni: #a23b57;          /* 紅 */
	--beni-pale: #f5e8ec;
	--fuji: #675c9f;          /* 藤 */
	--fuji-pale: #eeecf5;
	--moss: #46765d;          /* 苔 */
	--moss-pale: #e6efe9;
	--shu: #b24f39;           /* 朱 */
	--shu-pale: #f7e7e1;
	--kiku: #dcb94f;          /* 菊 */
	--kiku-pale: #f5ebc6;
	--font-ui: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Noto Sans JP', sans-serif;
	--font-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
	--font-kobun: var(--font-serif);
	--ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100dvh;
	color: var(--ink);
	background: var(--paper);
	font-family: var(--font-ui);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: .03em;
	-webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--fuji); outline-offset: 3px; border-radius: 4px; }

.app {
	max-width: 720px;
	margin: 0 auto;
	padding: max(22px, env(safe-area-inset-top)) 20px calc(56px + env(safe-area-inset-bottom));
}

.flower { display: block; flex: none; overflow: visible; }

/* ───────────── ボタン ───────────── */

.btn-sticker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 58px;
	padding: 12px 26px;
	border: 1px solid var(--ink);
	border-radius: 4px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .16em;
	cursor: pointer;
	transition: background .2s, color .2s, transform .1s var(--ease);
}
.btn-sticker:hover { background: #3d3946; }
.btn-sticker:active { transform: translateY(1px); }
.btn-sticker.small { min-height: 46px; font-size: 15px; width: auto; padding: 8px 26px; }
.btn-sticker .btn-count {
	padding: 0 10px;
	border-left: 1px solid rgb(247 244 238 / 40%);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .06em;
	opacity: .9;
}

.btn-ghost {
	min-height: 44px;
	padding: 8px 22px;
	border: 1px solid var(--line-2);
	border-radius: 4px;
	background: transparent;
	color: var(--ink-2);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .1em;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s;
}
.btn-ghost:hover { background: var(--card); border-color: var(--ink); color: var(--ink); }

.text-btn {
	flex: none;
	padding: 4px 2px;
	border: 0;
	border-bottom: 1px solid var(--line-2);
	background: none;
	color: var(--ink-2);
	font-size: 13px;
	letter-spacing: .12em;
	cursor: pointer;
}
.text-btn:hover { color: var(--beni); border-color: var(--beni); }
.text-btn:disabled { opacity: .5; cursor: default; }

.icon-btn {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: var(--card);
	color: var(--ink-2);
	cursor: pointer;
	transition: border-color .2s, color .2s;
}
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ───────────── 読み込み ───────────── */

.view-loading { display: grid; place-items: center; min-height: 70dvh; }
.loading-box { text-align: center; display: grid; gap: 12px; justify-items: center; }
.loading-title { font-family: var(--font-serif); font-weight: 700; font-size: 19px; letter-spacing: .14em; }
.loading-sub { color: var(--ink-2); font-size: 13px; max-width: 24em; }
.loading-bar { width: min(240px, 70vw); height: 2px; background: var(--line-2); overflow: hidden; }
.loading-bar > div { height: 100%; width: 8%; background: var(--beni); transition: width .3s var(--ease); }
.loading-box .flower { animation: spin 9s linear infinite; }

/* ───────────── ホーム ───────────── */

.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 30px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: 21px; font-weight: 700; letter-spacing: .16em; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.stat-chips { display: flex; gap: 16px; }
.stat-chip {
	display: inline-flex; align-items: baseline; gap: 5px; letter-spacing: .08em;
	font-weight: 500; font-size: 12px; color: var(--ink-2);
}
.stat-chip b { color: var(--ink); font-family: var(--font-serif); font-size: 17px; font-weight: 700; }
.dot-s { display: none; }

.hero {
	position: relative;
	padding: 28px 24px 26px;
	border: 1px solid var(--line-2);
	border-radius: 6px;
	background: var(--card);
}
.hero::before {
	content: '';
	position: absolute; inset: 5px;
	border: 1px solid var(--line);
	border-radius: 3px;
	pointer-events: none;
}
.hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hero-mascot { flex: none; order: 2; }
.hero-copy { order: 1; }
.hero h2 { font-family: var(--font-serif); font-size: clamp(20px, 5.4vw, 28px); line-height: 1.5; font-weight: 700; letter-spacing: .08em; text-wrap: balance; word-break: auto-phrase; }
.hero-sub { margin-top: 4px; color: var(--ink-2); font-weight: 500; font-size: 14px; letter-spacing: .1em; }
.hero-sub b { color: var(--beni); font-family: var(--font-serif); font-size: 22px; font-weight: 700; }

.flower-trio { position: relative; display: flex; align-items: flex-end; height: 84px; width: 118px; }
.flower-trio .flower { position: absolute; transform-origin: 50% 90%; animation: sway 6s ease-in-out infinite; }
.flower-trio .flower:nth-child(1) { left: 0; bottom: 4px; animation-delay: -1.5s; }
.flower-trio .flower:nth-child(2) { left: 28px; bottom: 16px; z-index: 2; }
.flower-trio .flower:nth-child(3) { left: 66px; bottom: 2px; animation-delay: -3s; }

.dotmap { position: relative; display: grid; gap: 14px; margin: 24px 0 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.dg { display: grid; gap: 6px; }
.dg-label { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; font-size: 12.5px; color: var(--ink-2); letter-spacing: .08em; }
.dg-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.dot {
	display: inline-block;
	width: 11px; height: 11px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	background: transparent;
}
.dot.ok { background: var(--beni); border-color: var(--beni); }
.dot.ng { background: var(--shu); border-color: var(--shu); box-shadow: inset 0 0 0 2px var(--card); }
.dot.pop { animation: pop .5s var(--ease) both; animation-delay: var(--d, 0ms); }
.legend { position: relative; display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 4px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); letter-spacing: .08em; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

.cta-note { text-align: center; font-size: 12.5px; color: var(--ink-3); letter-spacing: .06em; }
.resume-area { position: relative; display: grid; gap: 10px; justify-items: center; margin-top: 22px; }
.resume-area .btn-sticker { background: transparent; color: var(--ink); }
.resume-area .btn-sticker:hover { background: var(--ink); color: var(--paper); }
.resume-area .btn-sticker .btn-count { border-left-color: currentColor; }

.section-title {
	display: flex; align-items: center; gap: 16px;
	margin-bottom: 14px;
	font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: .16em;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.section-head .section-title { flex: 1; margin-bottom: 0; }

.rounds { margin-top: 44px; }
.round-card { margin-top: 22px; }
.round-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.round-flower { width: 30px; height: 30px; }
.round-name { font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: .12em; }
.round-num { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--ink-3); letter-spacing: .08em; }
.round-num b { color: var(--ink); font-family: var(--font-serif); font-size: 16px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.step-btn {
	display: grid; gap: 7px; align-content: start;
	padding: 16px 18px 16px;
	border: 1px solid var(--line-2); border-radius: 6px;
	background: var(--card); color: var(--ink); text-align: left; cursor: pointer;
	transition: border-color .2s, transform .12s var(--ease), box-shadow .2s;
}
.step-btn:hover { border-color: var(--ink); box-shadow: 0 10px 22px -16px rgb(37 34 44 / 55%); transform: translateY(-1px); }
.step-btn:active { transform: translateY(0); }
.step-name { font-family: var(--font-serif); font-size: 19px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; line-height: 1.3; }
.step-prog { font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: .06em; white-space: nowrap; }
.step-bar { height: 2px; background: var(--line); overflow: hidden; }
.step-bar > i { display: block; height: 100%; background: var(--beni); transition: width .6s var(--ease); }
.step-btn.done { border-color: var(--moss); background: var(--moss-pale); }
.step-btn.done .step-prog { color: var(--moss); font-weight: 700; }
.step-btn.done .step-bar > i { background: var(--moss); }

.card {
	margin-top: 44px;
	padding: 24px 22px;
	border-radius: 6px;
	background: var(--card);
	border: 1px solid var(--line-2);
}
.portal-lead { font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }

/* ポータル連携の入力欄（portal-client が作る部品の見た目を合わせる） */
.portal-card .pc-box { display: grid; gap: 10px; }
.portal-card .pc-box input {
	min-height: 46px; width: 100%; padding: 9px 14px;
	border: 1px solid var(--line-2); border-radius: 4px;
	background: var(--paper); color: var(--ink);
	font-family: var(--font-ui); font-weight: 500; letter-spacing: .1em;
}
.portal-card .pc-box input:focus { border-color: var(--ink); outline: 2px solid rgb(103 92 159 / 25%); outline-offset: 0; }
.portal-card .pc-box button {
	min-height: 44px; padding: 8px 24px; margin: 0 8px 0 0;
	border: 1px solid var(--ink); border-radius: 4px;
	background: var(--ink); color: var(--paper); font-weight: 700; letter-spacing: .14em; cursor: pointer;
}
.portal-card .pc-box button + button { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.portal-card .pc-box button:disabled { opacity: .5; cursor: not-allowed; }

/* ───────────── ランキング ───────────── */

.ranking { margin-top: 44px; }
.rank-list { border-top: 1px solid var(--ink); }
.rank-row {
	display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: 10px;
	padding: 12px 8px 12px 4px;
	border-bottom: 1px solid var(--line-2);
	animation: rise .4s var(--ease) both;
	animation-delay: var(--d, 0ms);
}
.rank-no { font-family: var(--font-serif); font-weight: 700; font-size: 20px; line-height: 1; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rank-row.top .rank-no { color: var(--beni); font-size: 24px; }
.rank-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; letter-spacing: .06em; }
.rank-name .flower { width: 24px; height: 24px; }
.rank-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { font-family: var(--font-serif); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.rank-val small { margin-left: 2px; font-family: var(--font-ui); font-weight: 500; font-size: 11.5px; color: var(--ink-3); }
.rank-me { margin-left: 2px; padding: 0 8px 1px; border: 1px solid var(--beni); border-radius: 999px; color: var(--beni); font-size: 11px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.rank-row.me { background: var(--beni-pale); box-shadow: inset 2px 0 0 var(--beni); }
.rank-gap { padding: 6px 0; text-align: center; color: var(--ink-3); letter-spacing: .5em; line-height: 1; }
.rank-msg { padding: 22px 8px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); text-align: center; color: var(--ink-2); font-size: 14px; }
.rank-msg .flower { width: 34px; height: 34px; margin: 0 auto 8px; }
.rank-msg .btn-ghost { margin-top: 10px; }
.rank-skel { height: 48px; border-bottom: 1px solid var(--line-2); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 70%), transparent) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.rank-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.rank-note a { color: var(--beni); text-underline-offset: 3px; }

.rounds .cta-note { margin-top: 24px; }
.foot { margin-top: 48px; text-align: center; font-size: 12px; color: var(--ink-3); letter-spacing: .12em; }

/* ───────────── クイズ ───────────── */

.quiz-top {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 -20px;
	padding: max(10px, env(safe-area-inset-top)) 20px 12px;
	background: linear-gradient(var(--paper) 80%, rgb(247 244 238 / 0));
}
.progress { position: relative; flex: 1; height: 2px; background: var(--line-2); }
.progress-fill { height: 100%; width: 0; background: var(--beni); transition: width .45s var(--ease); }
.progress-petal { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; transform: translate(-50%, -50%); transition: left .45s var(--ease); filter: drop-shadow(0 0 0 var(--paper)); }
.quiz-count { flex: none; font-family: var(--font-serif); font-weight: 700; font-size: 15px; letter-spacing: .08em; min-width: 4.6em; text-align: right; }

.passage {
	position: sticky;
	top: calc(max(10px, env(safe-area-inset-top)) + 54px);
	z-index: 20;
	margin: 6px 0 18px;
	border: 1px solid var(--line-2);
	border-radius: 6px;
	background: var(--card);
	box-shadow: 0 14px 28px -22px rgb(37 34 44 / 45%);
	overflow: hidden;
}
.passage-head {
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	padding: 9px 18px 8px;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-serif); font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--fuji);
}
.passage-hint { font-family: var(--font-ui); font-weight: 400; font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
.passage-scroll {
	position: relative;
	max-height: clamp(140px, 30dvh, 300px);
	overflow-y: auto;
	padding: 10px 18px 12px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--line-2) transparent;
	background:
		linear-gradient(var(--card) 30%, transparent) 0 0 / 100% 34px no-repeat local,
		linear-gradient(transparent, var(--card) 70%) 0 100% / 100% 34px no-repeat local,
		radial-gradient(farthest-side at 50% 0, rgb(37 34 44 / 14%), transparent) 0 0 / 100% 12px no-repeat scroll,
		radial-gradient(farthest-side at 50% 100%, rgb(37 34 44 / 14%), transparent) 0 100% / 100% 12px no-repeat scroll,
		var(--card);
}
.passage-text {
	font-family: var(--font-kobun);
	font-weight: 500;
	font-size: 17.5px;
	line-height: 2.4;
	letter-spacing: .06em;
	text-align: left;
}
ruby { ruby-align: center; }
ruby rt { font-family: var(--font-ui); font-size: .48em; letter-spacing: 0; color: var(--ink-2); font-weight: 400; }

.qcard { position: relative; margin-top: 8px; }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.chip { display: inline-block; padding: 1px 12px 2px; border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: .12em; }
.chip-tag { border: 1px solid var(--fuji); color: var(--fuji); }
.chip-new { background: var(--kiku-pale); color: var(--ink); border: 1px solid var(--kiku); padding: 0 10px 1px; }
.q-ref { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: .06em; }

.q-prompt { font-family: var(--font-serif); font-size: clamp(20px, 5.4vw, 25px); line-height: 1.6; font-weight: 700; letter-spacing: .06em; }

.q-visual { margin-top: 16px; }
.q-visual:empty { display: none; }
.q-sentence {
	padding: 14px 18px 12px;
	border-radius: 6px;
	background: var(--card);
	border: 1px solid var(--line-2);
	font-family: var(--font-kobun);
	font-weight: 500;
	font-size: clamp(19px, 5.2vw, 23px);
	line-height: 2.3;
	letter-spacing: .06em;
}
.q-sentence + .notes { margin-top: 8px; padding-left: 4px; }

.tbl-q { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--line-2); }
.tbl-cap { width: 100%; text-align: center; font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: .1em; margin-bottom: 4px; }
.tbl-wrap { display: grid; gap: 8px; width: 100%; }
.tbl-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tbl-cell { display: grid; justify-items: center; min-width: 92px; padding: 8px 14px 6px; border-radius: 4px; background: var(--fuji-pale); }
.tbl-cell small { font-size: 11.5px; font-weight: 500; color: var(--fuji); letter-spacing: .1em; }
.tbl-cell b { font-family: var(--font-serif); font-weight: 700; font-size: 32px; line-height: 1.3; }
.tbl-cell.ask { background: var(--kiku-pale); outline: 1px dashed var(--kiku); outline-offset: -4px; }
.tbl-cell.ask small { color: var(--ink-2); }
.tbl-arrow { color: var(--ink-3); font-size: 20px; }

/* 傍線・番号・《》 */
.ul {
	padding: 0 .08em;
	font-weight: 700;
	background: linear-gradient(transparent 62%, var(--kiku-pale) 62%, var(--kiku-pale) 94%, transparent 94%);
	text-decoration: underline;
	text-decoration-color: var(--beni);
	text-decoration-thickness: 1.5px;
	text-underline-offset: .2em;
	text-decoration-skip-ink: none;
}
.bk { padding: 0 .1em; font-weight: 700; background: linear-gradient(transparent 62%, var(--kiku-pale) 62%, var(--kiku-pale) 94%, transparent 94%); }
.blank {
	display: inline-flex; align-items: baseline; gap: .18em;
	margin: 0 .12em; padding: 0 .34em .04em .16em;
	border-radius: .3em;
	background: var(--fuji-pale);
	font-weight: 700;
	transition: background .2s, box-shadow .2s;
}
.blank .bn {
	align-self: center;
	display: inline-grid; place-items: center;
	width: 1.45em; height: 1.45em;
	border-radius: 50%;
	background: var(--fuji); color: #fff;
	font: 700 .66em/1 var(--font-ui);
}
.blank.is-active { background: var(--kiku-pale); box-shadow: 0 0 0 1.5px var(--kiku); }
.blank.is-active .bn { background: var(--beni); }
.fn { border-bottom: 1px dotted var(--ink-3); }
.fn sup { margin-left: 1px; font: 700 .55em/1 var(--font-ui); color: var(--beni); vertical-align: super; letter-spacing: 0; }

.notes { display: grid; gap: 2px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: 13px; line-height: 1.7; color: var(--ink-2); font-weight: 400; }
.notes:empty { display: none; }
.q-sentence + .notes { border-top: 0; padding-top: 0; }
.notes b { color: var(--beni); font-weight: 700; margin-right: .3em; }
.notes span.w { font-weight: 700; color: var(--ink); }

/* 選択肢 */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); gap: 10px; margin-top: 18px; }
.choice {
	display: flex; align-items: center; gap: 12px;
	min-height: 56px;
	padding: 10px 14px 10px 12px;
	border: 1px solid var(--line-2);
	border-radius: 6px;
	background: var(--card);
	text-align: left;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.35;
	letter-spacing: .05em;
	cursor: pointer;
	transition: transform .08s var(--ease), border-color .2s, background .2s, opacity .2s;
}
.choice:hover { border-color: var(--ink); }
.choice:active { transform: scale(.985); }
.choice .key {
	flex: none; display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--line-2); color: var(--ink-2);
	font-family: var(--font-serif); font-size: 13px; font-weight: 700;
	transition: background .2s, color .2s, border-color .2s;
}
.choice:hover .key { border-color: var(--ink); color: var(--ink); }
.choice[disabled] { cursor: default; }
.choice[disabled]:hover { border-color: var(--line-2); }
.choice.is-correct, .choice.is-correct[disabled]:hover { border-color: var(--moss); background: var(--moss-pale); }
.choice.is-correct .key { background: var(--moss); border-color: var(--moss); color: #fff; }
.choice.is-wrong, .choice.is-wrong[disabled]:hover { border-color: var(--shu); background: var(--shu-pale); }
.choice.is-wrong .key { background: var(--shu); border-color: var(--shu); color: #fff; }
.choice.is-dim { opacity: .45; }
.choice.shake { animation: shake .32s linear; }

/* ふりかえり */
.feedback {
	display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
	margin-top: 20px; padding: 16px 18px 18px 14px;
	border-radius: 6px;
	background: var(--moss-pale); border: 1px solid var(--moss);
	animation: rise .32s var(--ease) both;
}
.feedback.ng { background: var(--shu-pale); border-color: var(--shu); }
.fb-face .flower { animation: bloom .6s var(--ease) both; }
.fb-title { font-family: var(--font-serif); font-weight: 700; font-size: 20px; letter-spacing: .12em; line-height: 1.4; }
.fb-ans { margin-top: 2px; font-weight: 500; }
.fb-ans b { font-family: var(--font-serif); font-size: 19px; padding: 0 .3em; background: linear-gradient(transparent 62%, var(--kiku-pale) 62%); }
.fb-note { margin-top: 6px; font-size: 15px; line-height: 1.85; white-space: pre-line; }
.conj-strip { margin-top: 12px; }
.cs-title { font-size: 12px; font-weight: 500; color: var(--ink-2); margin-bottom: 4px; letter-spacing: .08em; }
.cs-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.cs-cell { display: grid; justify-items: center; padding: 4px 2px 3px; border-radius: 4px; background: rgb(255 253 249 / 80%); min-width: 0; }
.cs-cell small { font-size: 10.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.cs-cell b { font-family: var(--font-serif); font-weight: 700; font-size: 15px; line-height: 1.5; word-break: keep-all; }
.cs-cell.hit { background: var(--kiku-pale); outline: 1px solid var(--kiku); }
.cs-cell.hit small { color: var(--ink); }

.next-bar {
	position: sticky; bottom: 0; z-index: 25;
	margin: 14px -20px 0;
	padding: 22px 20px calc(14px + env(safe-area-inset-bottom));
	background: linear-gradient(rgb(247 244 238 / 0), var(--paper) 42%);
}
.btn-next { display: flex; max-width: 420px; margin: 0 auto; }

/* ふぶき */
.fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.petal-fx {
	position: absolute; top: 40%; left: var(--x, 50%);
	width: 16px; height: 16px;
	animation: fall 1.2s ease-out forwards;
	animation-delay: var(--d, 0ms);
	opacity: 0;
}
.petal-fx svg { display: block; width: 100%; height: 100%; }

/* ───────────── 結果 ───────────── */

.result { display: grid; gap: 20px; justify-items: center; text-align: center; padding-top: 10px; }
.result-hero {
	position: relative;
	width: 100%; padding: 28px 18px 28px;
	border: 1px solid var(--line-2); border-radius: 6px; background: var(--card);
	display: grid; gap: 10px; justify-items: center;
}
.result-hero::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--line); border-radius: 3px; pointer-events: none; }
.result-flowers { display: flex; gap: 8px; align-items: flex-end; min-height: 56px; }
.result-flowers .flower { width: 46px; height: 46px; }
.result-flowers .flower.bloom { animation: bloom .7s var(--ease) both; animation-delay: var(--d, 0ms); }
.result-flowers .flower.wait { opacity: .38; filter: grayscale(.6); }
.result h2 { font-family: var(--font-serif); font-size: 24px; font-weight: 700; letter-spacing: .16em; }
.score-ring { position: relative; width: 140px; height: 140px; margin: 4px 0; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .bg { stroke: var(--line); }
.score-ring .fg { stroke: var(--beni); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.score-ring circle { stroke-width: 4; }
.score-ring .num { position: absolute; inset: 0; display: grid; place-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 30px; line-height: 1.2; }
.score-ring .num small { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: .14em; }
.result-lines { display: grid; gap: 4px; font-weight: 500; font-size: 14.5px; }
.result-lines b { color: var(--beni); font-family: var(--font-serif); font-size: 20px; }
.result-actions { display: grid; gap: 10px; width: 100%; max-width: 420px; justify-items: center; }
.result-actions .btn-ghost { width: 100%; }
.wrong-list { width: 100%; text-align: left; }
.wrong-list summary { cursor: pointer; font-family: var(--font-serif); font-weight: 700; letter-spacing: .1em; padding: 10px 6px; list-style: none; }
.wrong-list summary::-webkit-details-marker { display: none; }
.wrong-list summary::before { content: '＋'; display: inline-block; width: 1.4em; color: var(--beni); }
.wrong-list[open] summary::before { content: '－'; }
.wrong-list ul { display: grid; gap: 8px; }
.wrong-list li { padding: 12px 16px; border-radius: 6px; background: var(--card); border: 1px solid var(--line-2); }
.wl-ref { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.wl-q { font-weight: 700; }
.wl-s { font-family: var(--font-kobun); color: var(--ink-2); font-size: 15px; }
.wl-a { margin-top: 2px; font-weight: 500; }
.wl-a b { font-family: var(--font-serif); padding: 0 .3em; background: linear-gradient(transparent 62%, var(--kiku-pale) 62%); }

/* ───────────── ダイアログ・トースト ───────────── */

.dialog {
	width: min(420px, calc(100% - 40px));
	padding: 28px 26px 24px;
	border: 1px solid var(--ink);
	border-radius: 6px;
	background: var(--card);
	color: var(--ink);
	box-shadow: 0 30px 60px -28px rgb(37 34 44 / 55%);
}
.dialog::backdrop { background: rgb(37 34 44 / 45%); }
.dialog h2 { font-family: var(--font-serif); font-size: 19px; font-weight: 700; letter-spacing: .12em; margin-bottom: 8px; }
.dialog p { color: var(--ink-2); font-size: 14.5px; }
.dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.toast {
	position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 100;
	transform: translateX(-50%);
	max-width: calc(100% - 36px);
	padding: 10px 22px;
	border-radius: 4px;
	background: var(--ink); color: var(--paper); font-weight: 500; font-size: 13.5px; letter-spacing: .08em;
	box-shadow: 0 14px 30px -14px rgb(37 34 44 / 60%);
	animation: rise .3s var(--ease) both;
}

/* ───────────── 動き ───────────── */

@keyframes pop { 0% { transform: scale(.2); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes bloom { from { opacity: 0; transform: scale(.4) rotate(-50deg); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes fall {
	0% { opacity: 0; transform: translate(0, -10px) rotate(0) scale(.6); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx, 0px), 130px) rotate(var(--rot, 200deg)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ───────────── 広い画面 ───────────── */

@media (min-width: 640px) {
	.app { padding-top: max(34px, env(safe-area-inset-top)); }
	.hero { padding: 32px 34px 32px; }
	.passage-text { font-size: 19px; }
	.choices { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 480px) {
	.hero-mascot { margin-right: -14px; }
	.flower-trio { transform: scale(.78); transform-origin: right center; }
}

@media (max-width: 380px) {
	.brand { font-size: 18px; letter-spacing: .1em; }
	.cs-cell b { font-size: 13px; }
	.btn-sticker { font-size: 16px; }
}