/* พม.โดนี่ — curriculum reader + word-ordering game
   Theme: indigo/blue (matches design.md). Font: Sarabun (from head.php). */

/* ---------- reading content ---------- */
.dony-content {
	color: #1f2937;
	line-height: 1.85;
	font-size: calc(1.05rem * var(--reading-scale, 1));
}
.dony-content h1 {
	font-size: calc(1.6rem * var(--reading-scale, 1));
	font-weight: 800;
	color: #111827;
	margin: 0 0 1rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid #eef2ff;
}
.dony-content h2 { font-size: calc(1.25rem * var(--reading-scale, 1)); font-weight: 700; color: #312e81; margin: 1.6rem 0 .6rem; }
.dony-content p { margin: 0 0 1rem; }
.dony-content strong { color: #4338ca; font-weight: 700; }
.dony-content hr { border: 0; border-top: 1px dashed #e5e7eb; margin: 1.5rem 0; }
.dony-hi {
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	border-radius: .38rem;
	padding: .03rem .18rem .05rem;
	font-weight: 700;
}
.dony-hi--target {
	background: #eef2ff;
	color: #3730a3;
	box-shadow: inset 0 -2px 0 #c7d2fe;
}
.dony-hi--cue {
	background: #ecfdf5;
	color: #047857;
	box-shadow: inset 0 -2px 0 #a7f3d0;
}
.dony-hi--when {
	background: #fef3c7;
	color: #92400e;
	box-shadow: inset 0 -2px 0 #fde68a;
}
.dony-hi--passive {
	background: #f5f3ff;
	color: #6d28d9;
	box-shadow: inset 0 -2px 0 #ddd6fe;
}

/* Numbered rule list — clear separation between rules.
   (Tailwind preflight resets list-style:none, so set it explicitly.) */
.dony-content ol { list-style: decimal outside; padding-left: 1.9rem; margin: 0 0 1rem; }
.dony-content ol > li { display: list-item; margin-bottom: 1.9rem; padding-left: .45rem; }
.dony-content ol > li::marker { font-weight: 800; color: #4f46e5; }
.dony-content ol > li > p:first-child { margin-bottom: .55rem; }

/* Pali example — white card with a blue frame; Pali on top line, Thai below */
.dony-content blockquote {
	margin: .55rem 0;
	padding: .7rem .95rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #4f46e5;
	border-radius: .5rem;
}
.dony-content blockquote p { margin: 0; }
/* first line = Pali (bold, dark) */
.dony-content blockquote p:first-child {
	color: #1e1b4b;
	font-weight: 600;
	font-size: calc(1.08rem * var(--reading-scale, 1));
	line-height: 1.6;
	margin-bottom: .3rem;
}
.dony-content blockquote p.dony-pali-line {
	color: #1e1b4b;
	font-weight: 700;
	font-size: calc(1.08rem * var(--reading-scale, 1));
	line-height: 1.6;
}
.dony-content blockquote p.dony-translation-line {
	color: #4b5563;
	font-weight: 400;
	line-height: 1.7;
	margin-top: .25rem;
}
.dony-content blockquote p:first-child strong { color: #1e1b4b; }
.dony-content blockquote p:first-child .dony-hi--target {
	color: #312e81;
	background: #e0e7ff;
}
/* following line(s) = Thai translation (gray) */
.dony-content blockquote p + p { color: #4b5563; }
.dony-content blockquote p + p strong { color: #4338ca; font-weight: 700; }
.dony-content blockquote p:not(.dony-pali-line) .dony-hi {
	font-weight: 600;
}

/* ---------- game: pali prompt ---------- */
.dony-pali-callout {
	background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
	border: 1px solid #e0e7ff;
	border-radius: .75rem;
	padding: .85rem 1rem;
}
.dony-pali {
	font-size: 1.2rem;
	font-weight: 600;
	color: #1e1b4b;
	line-height: 1.7;
	margin: 0;
}
.dony-answer {
	font-size: 1.05rem;
	color: #3730a3;
	line-height: 1.7;
	margin: 0;
}

/* ---------- game: tray (answer being built) ---------- */
.dony-tray {
	min-height: 60px;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: .75rem;
	border: 2px dashed #c7d2fe;
	border-radius: .75rem;
	background: #fbfbff;
	margin-bottom: 1rem;
	transition: border-color .2s, background .2s;
}
.dony-tray.is-correct { border-color: #86efac; border-style: solid; background: #f0fdf4; }
.dony-tray.is-wrong   { border-color: #fda4af; border-style: solid; background: #fff1f2; animation: donyShake .4s ease; }
@keyframes donyShake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

/* ---------- game: bank (available chips) ---------- */
.dony-bank {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	min-height: 44px;
	align-items: center;
}

/* ---------- chips ---------- */
.dony-chip {
	display: inline-flex;
	align-items: center;
	font-family: 'Sarabun', sans-serif;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.2;
	padding: .5rem .8rem;
	border-radius: .6rem;
	border: 1.5px solid #c7d2fe;
	background: #fff;
	color: #3730a3;
	cursor: pointer;
	transition: transform .08s, box-shadow .15s, background .15s, border-color .15s;
	box-shadow: 0 1px 2px rgba(79, 70, 229, .06);
	-webkit-user-select: none;
	user-select: none;
}
.dony-chip:hover { background: #eef2ff; border-color: #a5b4fc; }
.dony-chip:active { transform: translateY(1px) scale(.98); }
.dony-chip--placed { background: #eef2ff; border-color: #a5b4fc; }
.dony-chip--ok  { background: #dcfce7 !important; border-color: #4ade80 !important; color: #15803d !important; }
.dony-chip--bad { background: #ffe4e6 !important; border-color: #fb7185 !important; color: #be123c !important; }

@media (max-width: 640px) {
	.dony-pali { font-size: 1.08rem; }
	.dony-chip { font-size: .98rem; padding: .45rem .65rem; }
}

/* ===================================================================
   Game CTA card + immersive popup (theme matches /lesson/6 game)
   =================================================================== */

/* --- gradient "เริ่มเล่นเกม" card on the reading page --- */
.dony-game-cta {
	position: relative;
	display: grid;
	width: 100%;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	text-align: left;
	border: 2px solid #7dd3fc;
	cursor: pointer;
	border-radius: 1rem;
	padding: 1.1rem 1.15rem;
	background: linear-gradient(135deg, #4338ca 0%, #4f46e5 45%, #059669 100%);
	color: #fff;
	box-shadow: 0 18px 38px -22px rgba(49, 46, 129, .9);
	transition: transform .14s, box-shadow .14s, border-color .14s, filter .14s;
}
.dony-game-cta::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: .85rem;
	background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,0) 44%, rgba(255,255,255,.16));
	pointer-events: none;
}
.dony-game-cta:hover { transform: translateY(-2px); border-color: #bae6fd; box-shadow: 0 22px 44px -20px rgba(49,46,129,.95); }
.dony-game-cta:active { transform: translateY(0); filter: brightness(.97); }
.dony-game-cta__icon {
	display: grid; place-items: center;
	width: 3.4rem; height: 3.4rem;
	border-radius: .9rem; background: #fff; color: #4f46e5;
	font-size: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.dony-game-cta__body { min-width: 0; }
.dony-game-cta__badge {
	display: inline-flex; align-items: center; gap: .35rem;
	margin-bottom: .3rem; padding: .2rem .65rem;
	border-radius: 999px; background: rgba(255,255,255,.2);
	font-size: .72rem; font-weight: 800; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.dony-game-cta__title { display: block; font-size: 1.18rem; font-weight: 800; line-height: 1.3; }
.dony-game-cta__sub { display: block; margin-top: .2rem; font-size: .82rem; line-height: 1.5; color: #e0f2fe; }
.dony-game-cta__go {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .65rem 1rem; border-radius: .8rem;
	background: #fff; color: #4338ca; font-weight: 800; font-size: .9rem;
	box-shadow: 0 2px 8px rgba(0,0,0,.1); white-space: nowrap;
}
.dony-game-cta:hover .dony-game-cta__go { background: #f8fafc; }
.dony-vocab-cta {
	border-color: #fcd34d;
	background: linear-gradient(135deg, #312e81 0%, #4f46e5 48%, #d97706 100%);
	box-shadow: 0 18px 38px -22px rgba(120, 53, 15, .9);
}
.dony-vocab-cta .dony-game-cta__icon { color: #d97706; }
.dony-vocab-cta .dony-game-cta__sub { color: #fef3c7; }
.dony-vocab-cta .dony-game-cta__go { color: #7c2d12; }
.dony-vocab-cta:hover { border-color: #fde68a; box-shadow: 0 22px 44px -20px rgba(120,53,15,.95); }
@media (max-width: 640px) {
	.dony-game-cta { grid-template-columns: auto minmax(0, 1fr); }
	.dony-game-cta__go { grid-column: 1 / -1; justify-content: center; }
}

/* --- full-screen popup overlay holding the word-order game --- */
.dony-game-overlay {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	background: rgba(15, 23, 42, .58);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	padding: 14px;
	animation: donyFadeIn .15s ease both;
}
@keyframes donyFadeIn { from { opacity: 0; } to { opacity: 1; } }
.dony-game-modal {
	position: relative;
	width: 100%; max-width: 660px;
	height: min(92vh, 860px);
	background: #f8fafc;
	border-radius: 1.1rem; overflow: hidden;
	box-shadow: 0 24px 60px -12px rgba(0,0,0,.5);
	display: flex; flex-direction: column;
	animation: donyPopIn .18s ease both;
}
@keyframes donyPopIn { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.dony-game-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
	padding: .95rem 1.1rem;
	background: linear-gradient(135deg, #4338ca 0%, #4f46e5 45%, #059669 100%);
	color: #fff;
}
.dony-vocab-head {
	background: linear-gradient(135deg, #312e81 0%, #4f46e5 52%, #d97706 100%);
}
.dony-game-head__badge {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .15rem .6rem; border-radius: 999px;
	background: rgba(255,255,255,.2); font-size: .68rem; font-weight: 800;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.dony-game-head__title { font-size: 1.12rem; font-weight: 800; line-height: 1.3; margin-top: .25rem; }
.dony-game-head__meta { font-size: .8rem; color: #e0e7ff; margin-top: .15rem; }
.dony-game-x {
	flex: none; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px;
	background: rgba(255,255,255,.92); color: #475569; font-size: 1.2rem; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: background .15s, color .15s;
}
.dony-game-x:hover { background: #fff; color: #0f172a; }
.dony-game-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.1rem 1.5rem; }

/* ---------- vocabulary flashcard game ---------- */
.dony-vocab-modal { max-width: 620px; }
.dony-vocab-card {
	position: relative;
	overflow: hidden;
	min-height: 310px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .9rem;
	padding: 1.25rem;
	border-radius: 1rem;
	border: 1px solid #e0e7ff;
	background:
		radial-gradient(circle at top left, rgba(251,191,36,.22), transparent 34%),
		linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #eef2ff 100%);
	box-shadow: 0 18px 40px -28px rgba(49, 46, 129, .7);
}
.dony-vocab-card::after {
	content: "";
	position: absolute;
	inset: auto -3rem -5rem auto;
	width: 12rem;
	height: 12rem;
	border-radius: 999px;
	background: rgba(79,70,229,.08);
	pointer-events: none;
}
.dony-vocab-card.is-known { border-color: #86efac; }
.dony-vocab-card__label {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	color: #6366f1;
	font-size: .78rem;
	font-weight: 800;
}
.dony-vocab-card__known {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .18rem .55rem;
	border-radius: 999px;
	background: #dcfce7;
	color: #15803d;
}
.dony-vocab-card__term {
	position: relative;
	z-index: 1;
	color: #1e1b4b;
	font-size: clamp(2.4rem, 8vw, 4.5rem);
	font-weight: 800;
	line-height: 1.22;
	padding-bottom: .08em;
	text-align: center;
	letter-spacing: 0;
	word-break: break-word;
}
.dony-vocab-card__hint {
	position: relative;
	z-index: 1;
	text-align: center;
	color: #64748b;
	font-size: .95rem;
}
.dony-vocab-card__meaning {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: .35rem;
	text-align: center;
}
.dony-vocab-card__meaning-label {
	display: inline-flex;
	padding: .18rem .6rem;
	border-radius: 999px;
	background: #eef2ff;
	color: #4338ca;
	font-size: .72rem;
	font-weight: 800;
}
.dony-vocab-card__meaning strong {
	color: #047857;
	font-size: 1.65rem;
	line-height: 1.25;
}
.dony-vocab-card__sample {
	position: relative;
	z-index: 1;
	padding: .8rem .95rem;
	border-radius: .8rem;
	border: 1px solid #e5e7eb;
	background: rgba(255,255,255,.78);
}
.dony-vocab-card__sample span {
	display: block;
	margin-bottom: .2rem;
	color: #94a3b8;
	font-size: .72rem;
	font-weight: 800;
}
.dony-vocab-card__sample p {
	margin: 0;
	color: #312e81;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.55;
}
.dony-vocab-actions {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: .6rem;
	margin: .9rem 0 1rem;
}
.dony-vocab-actions button {
	min-height: 2.8rem;
	border: 0;
	border-radius: .8rem;
	font-family: 'Sarabun', sans-serif;
	font-weight: 800;
	cursor: pointer;
	transition: transform .08s, filter .15s, background .15s;
}
.dony-vocab-actions button:active { transform: translateY(1px); }
.dony-vocab-nav {
	width: 2.8rem;
	background: #eef2ff;
	color: #4338ca;
}
.dony-vocab-reveal {
	grid-column: 2 / 4;
	background: #4f46e5;
	color: #fff;
}
.dony-vocab-known {
	background: #059669;
	color: #fff;
}
.dony-vocab-weak {
	background: #fff7ed;
	color: #c2410c;
	border: 1px solid #fed7aa !important;
}
.dony-vocab-actions button:hover { filter: brightness(.98); }
.dony-vocab-bank {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: .55rem;
}
.dony-vocab-bank button {
	display: grid;
	gap: .12rem;
	text-align: left;
	padding: .65rem .75rem;
	border-radius: .75rem;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #312e81;
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .08s;
}
.dony-vocab-bank button:hover,
.dony-vocab-bank button.is-active {
	border-color: #a5b4fc;
	background: #eef2ff;
}
.dony-vocab-bank button.is-known {
	border-color: #86efac;
	background: #f0fdf4;
}
.dony-vocab-bank span {
	font-size: .96rem;
	font-weight: 800;
	line-height: 1.25;
}
.dony-vocab-bank small {
	color: #64748b;
	font-size: .75rem;
	line-height: 1.25;
}
.dony-vocab-stage {
	display: grid;
	gap: .9rem;
}
.dony-vocab-stage__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem 1rem;
	border-radius: .9rem;
	background: #eef2ff;
	color: #312e81;
	font-weight: 800;
}
.dony-vocab-stage__head span {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}
.dony-vocab-stage__head strong {
	flex: none;
	padding: .18rem .65rem;
	border-radius: 999px;
	background: #fff;
	color: #4f46e5;
	font-size: .85rem;
}
.dony-vocab-study-list {
	display: grid;
	gap: .65rem;
}
.dony-vocab-study-guide {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .65rem .85rem;
	border-radius: .8rem;
	background: #fff7ed;
	color: #9a3412;
	font-size: .92rem;
	font-weight: 800;
	text-align: center;
}
.dony-vocab-study-guide i {
	color: #d97706;
}
.dony-vocab-study-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .75rem;
	padding: .85rem .95rem;
	border-radius: .85rem;
	border: 1px solid #bfdbfe;
	background: linear-gradient(135deg, #fff 0%, #eff6ff 100%);
}
.dony-vocab-study-item.is-known {
	border-color: #86efac;
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}
.dony-vocab-study-check {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1.5px solid #a5b4fc;
	border-radius: 999px;
	background: #fff;
	color: #4f46e5;
	font-size: .82rem;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.dony-vocab-study-check:hover { background: #eef2ff; }
.dony-vocab-study-check:active { transform: scale(.96); }
.dony-vocab-study-item.is-known .dony-vocab-study-check {
	border-color: #059669;
	background: #059669;
	color: #fff;
}
.dony-vocab-study-item strong {
	display: block;
	color: #1e1b4b;
	font-size: 1.35rem;
	line-height: 1.35;
}
.dony-vocab-study-item small {
	display: block;
	margin-top: .1rem;
	color: #9a3412;
	font-size: .76rem;
	font-weight: 700;
}
.dony-vocab-study-item span {
	justify-self: end;
	padding: .3rem .78rem;
	border-radius: 999px;
	background: #ecfdf5;
	color: #047857;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.25;
	white-space: nowrap;
}
.dony-vocab-stage__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	color: #64748b;
	font-size: .9rem;
	text-align: center;
}
.dony-vocab-primary,
.dony-vocab-secondary {
	width: 100%;
	min-height: 3rem;
	border: 0;
	border-radius: .9rem;
	font-family: 'Sarabun', sans-serif;
	font-weight: 800;
	cursor: pointer;
}
.dony-vocab-primary {
	background: #4f46e5;
	color: #fff;
	box-shadow: 0 12px 24px -18px rgba(49,46,129,.8);
}
.dony-vocab-primary--teal {
	background: #0f766e;
}
.dony-vocab-secondary {
	background: #f8fafc;
	color: #475569;
	border: 1px solid #e5e7eb;
}
.dony-vocab-mode-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem;
}
.dony-vocab-match {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
}
.dony-vocab-match__col {
	display: grid;
	gap: .55rem;
}
.dony-vocab-match__col button {
	min-height: 4rem;
	padding: .65rem .75rem;
	border-radius: .8rem;
	border: 1.5px solid #dbeafe;
	background: #fff;
	color: #312e81;
	font-family: 'Sarabun', sans-serif;
	font-weight: 800;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .08s, color .15s;
}
.dony-vocab-match__col:first-child button {
	border-color: #c7d2fe;
	background: #eef2ff;
	color: #312e81;
}
.dony-vocab-match__col:nth-child(2) button {
	border-color: #fde68a;
	background: #fffbeb;
	color: #92400e;
}
.dony-vocab-match__col:first-child button:hover { border-color: #818cf8; background: #e0e7ff; }
.dony-vocab-match__col:nth-child(2) button:hover { border-color: #fbbf24; background: #fef3c7; }
.dony-vocab-match__col button.is-selected {
	border-color: #4f46e5;
	background: #eef2ff;
	box-shadow: inset 0 0 0 1px #4f46e5;
}
.dony-vocab-match__col button.is-done {
	border-color: #86efac;
	background: #dcfce7;
	color: #15803d;
	cursor: default;
}
.dony-vocab-match__col button.is-wrong {
	border-color: #fb7185;
	background: #fff1f2;
	color: #be123c;
	animation: donyShake .35s ease;
}
.dony-vocab-match__col strong {
	display: block;
	font-size: 1.2rem;
	line-height: 1.28;
}
.dony-vocab-match__col small {
	display: block;
	margin-top: .12rem;
	color: #9a3412;
	font-size: .72rem;
}
.dony-vocab-complete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	padding: .85rem;
	border-radius: .9rem;
	background: #ecfdf5;
	color: #047857;
	font-weight: 800;
}
.dony-vocab-complete button {
	border: 0;
	border-radius: .7rem;
	background: #059669;
	color: #fff;
	padding: .55rem .9rem;
	font-family: 'Sarabun', sans-serif;
	font-weight: 800;
	cursor: pointer;
}
.dony-vocab-type-card {
	display: grid;
	gap: .85rem;
	padding: 1rem;
	border-radius: 1rem;
	border: 1px solid #bfdbfe;
	background: linear-gradient(135deg, #fff 0%, #eff6ff 100%);
}
.dony-vocab-type-card__label {
	color: #6366f1;
	font-size: .82rem;
	font-weight: 800;
	text-align: center;
}
.dony-vocab-type-card__word {
	color: #1e1b4b;
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
}
.dony-vocab-type-input {
	width: 100%;
	min-height: 3.2rem;
	padding: .65rem .85rem;
	border-radius: .8rem;
	border: 1.5px solid #c7d2fe;
	background: #fff;
	color: #111827;
	font-family: 'Sarabun', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
	outline: none;
}
.dony-vocab-type-input:focus {
	border-color: #4f46e5;
	box-shadow: 0 0 0 3px #e0e7ff;
}
.dony-vocab-type-input::placeholder { color: #64748b; font-weight: 600; }
.dony-vocab-type-feedback,
.dony-vocab-type-answer {
	padding: .7rem .85rem;
	border-radius: .75rem;
	font-weight: 800;
	text-align: center;
}
.dony-vocab-type-feedback.is-correct {
	background: #dcfce7;
	color: #15803d;
}
.dony-vocab-type-feedback.is-wrong {
	background: #fff1f2;
	color: #be123c;
}
.dony-vocab-type-answer {
	background: #fff7ed;
	color: #9a3412;
}
.dony-vocab-type-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem;
}
@media (max-width: 640px) {
	.dony-game-overlay { padding: 8px; }
	.dony-game-modal { height: 94vh; border-radius: .9rem; }
	.dony-game-scroll { padding: .85rem .85rem 1.5rem; }
	.dony-vocab-card { min-height: 280px; padding: 1rem; }
	.dony-vocab-actions { grid-template-columns: auto minmax(0,1fr) minmax(0,1fr) auto; gap: .45rem; }
	.dony-vocab-actions button { font-size: .88rem; }
	.dony-vocab-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dony-vocab-study-item {
		grid-template-columns: auto minmax(0, 1fr) minmax(7.5rem, auto);
		min-height: 4.6rem;
		gap: .65rem;
		padding: .8rem .9rem;
	}
	.dony-vocab-study-check {
		width: 2.15rem;
		height: 2.15rem;
	}
	.dony-vocab-study-item strong {
		font-size: 1.55rem;
		line-height: 1.25;
	}
	.dony-vocab-study-item span {
		justify-self: end;
		align-self: center;
		max-width: 100%;
		padding: .42rem .85rem;
		border-radius: .7rem;
		font-size: 1.12rem;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
	}
	.dony-vocab-match { gap: .5rem; }
	.dony-vocab-match__col button { min-height: 3.8rem; padding: .55rem .6rem; }
	.dony-vocab-match__col strong { font-size: 1.05rem; }
	.dony-vocab-mode-grid,
	.dony-vocab-type-actions { grid-template-columns: 1fr; }
	.dony-vocab-type-card__word { font-size: 2.5rem; }
}