/* ===================================================================
 * Trivia Flashcards — refined monochrome interface.
 * Black accents on white, dark text. Green/red used ONLY for
 * correct/incorrect feedback. Display serif: Fraunces. UI: Hanken Grotesk.
 *
 * Every interactive selector is scoped under `.tflash-app` so it always
 * out-specifies generic theme rules (button/a/input/h3/p) — no white-on-white,
 * no theme bleed. Every hover sets BOTH background and colour explicitly.
 * ================================================================ */

.tflash-app,
.tflash-app *,
.tflash-app *:before,
.tflash-app *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.tflash-app {
	--tf-ink: #f3f4f6;
	--tf-muted: #9ca3af;
	--tf-accent: #047E64;
	--tf-accent-dark: #036551;
	--tf-subtle: #6b7280;
	--tf-surface: #1f2937;
	--tf-soft: #374151;
	--tf-soft-deep: #4b5563;
	--tf-line: #374151;
	--tf-correct: #10b981;
	--tf-correct-bg: rgba(16, 185, 129, 0.15);
	--tf-wrong: #ef4444;
	--tf-wrong-bg: rgba(239, 68, 68, 0.15);
	--tf-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
	--tf-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.15);
	--tf-radius: 20px;
	--tf-radius-sm: 12px;

	position: relative;
	max-width: 860px;
	margin: 28px auto;
	padding: 0;
	font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--tf-ink);
	line-height: 1.55;
	text-align: left;
	background: #111827;
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-radius);
	box-shadow: var(--tf-shadow);
	overflow: hidden;
}

/* Element resets so theme styles can't leak in. */
.tflash-app button { font-family: inherit; margin: 0; }
.tflash-app input { font-family: inherit; }
.tflash-app h3,
.tflash-app p { margin: 0; }
.tflash-app a { box-shadow: none; }

/* Top gradient accent stripe removed for clean dark mode */
.tflash-app > * { position: relative; z-index: 1; }

/* Inner content padding wrapper */
.tflash-app .tflash-inner {
	padding: 28px 32px 32px;
}

.tflash-loading,
.tflash-empty {
	padding: 40px 24px;
	text-align: center;
	color: var(--tf-muted);
	font-style: italic;
}

/* ---- Animations ---- */

@-webkit-keyframes tf-rise { from { opacity: 0; -webkit-transform: translateY(14px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes tf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tflash-bar,
.tflash-stage,
.tflash-controls,
.tflash-toolbar,
.tflash-quiz,
.tflash-test-q,
.tflash-match,
.tflash-done {
	-webkit-animation: tf-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation: tf-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.tflash-stage { -webkit-animation-delay: 0.06s; animation-delay: 0.06s; }
.tflash-controls { -webkit-animation-delay: 0.12s; animation-delay: 0.12s; }
.tflash-toolbar { -webkit-animation-delay: 0.16s; animation-delay: 0.16s; }

/* ===================================================================
 * Tab bar — pill-style grouped tabs
 * ================================================================ */

.tflash-tabs {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 4px;
	margin: 0 0 24px;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	background: #1f2937;
	border-radius: 12px;
	padding: 6px;
	border: 1px solid #374151;
}

.tflash-app .tflash-tab {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	position: relative;
	padding: 9px 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #9ca3af;
	cursor: pointer;
	border-radius: 8px;
	-webkit-transition: all 0.18s ease;
	transition: all 0.18s ease;
	white-space: nowrap;
}
.tflash-app .tflash-tab:hover {
	color: #f3f4f6;
	background: #374151;
}
.tflash-app .tflash-tab.is-active {
	background: #4b5563;
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.tflash-app .tflash-tab.is-active:after { display: none; }

.tflash-panel { min-height: 380px; }

/* ===================================================================
 * Progress + counter
 * ================================================================ */

.tflash-bar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.tflash-counter {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tf-muted);
	white-space: nowrap;
}
.tflash-progress {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	height: 6px;
	background: var(--tf-soft-deep);
	border-radius: 999px;
	overflow: hidden;
}
.tflash-progress-fill {
	height: 100%;
	width: 0;
	background: var(--tf-accent);
	border-radius: 999px;
	-webkit-transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Streak badge (Learn mode) */
.tflash-streak {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #d97706;
	white-space: nowrap;
	padding: 3px 10px;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-radius: 999px;
	-webkit-animation: tf-rise 0.3s ease both;
	animation: tf-rise 0.3s ease both;
}

/* Typed-answer wrapper */
.tflash-typed {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 12px;
}

/* ===================================================================
 * Flashcard (flip) — white front, charcoal answer back
 * ================================================================ */

.tflash-stage {
	position: relative;
	-webkit-perspective: 1800px;
	perspective: 1800px;
}
.tflash-card {
	position: relative;
	width: 100%;
	min-height: 340px;
	cursor: pointer;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 0.62s cubic-bezier(0.34, 1.2, 0.34, 1);
	transition: transform 0.62s cubic-bezier(0.34, 1.2, 0.34, 1);
	outline: none;
}
.tflash-card.is-flipped {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
.tflash-card:focus-visible .tflash-face-front {
	box-shadow: var(--tf-shadow), 0 0 0 3px rgba(0, 0, 0, 0.28);
}

.tflash-face {
	position: absolute;
	inset: 0;
	min-height: 340px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: var(--tf-radius);
	padding: 40px 36px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
.tflash-face-front {
	background: var(--tf-surface);
	border: 1px solid var(--tf-line);
	box-shadow: var(--tf-shadow);
}
.tflash-face-front:before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--tf-accent);
	border-radius: var(--tf-radius) var(--tf-radius) 0 0;
}
.tflash-face-back {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
	background: -webkit-linear-gradient(top, #262626, #141414);
	background: linear-gradient(180deg, #262626, #141414);
	color: #f6f6f4;
	border: 1px solid #000000;
	box-shadow: var(--tf-shadow);
}

.tflash-tag {
	position: absolute;
	top: 20px;
	left: 24px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tf-subtle);
}
.tflash-face-back .tflash-tag { color: rgba(255, 255, 255, 0.55); }

.tflash-text {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-size: 27px;
	line-height: 1.28;
	font-weight: 500;
	margin: 0;
	letter-spacing: -0.01em;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}
.tflash-face-back .tflash-text { font-size: 23px; font-weight: 400; }

.tflash-hint { margin-top: 22px; min-height: 20px; }
.tflash-app .tflash-hint-btn {
	background: var(--tf-surface);
	border: 1px solid var(--tf-line);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--tf-muted);
	cursor: pointer;
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
.tflash-app .tflash-hint-btn:hover { border-color: var(--tf-accent); color: var(--tf-accent); background: var(--tf-surface); }

.tflash-flip-hint {
	position: absolute;
	bottom: 18px; left: 0; right: 0;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tf-muted);
	opacity: 0.7;
}

/* ===================================================================
 * Buttons & controls
 * ================================================================ */

.tflash-controls {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.tflash-app .tflash-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--tf-line);
	background: var(--tf-surface);
	color: var(--tf-ink);
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1;
	text-decoration: none;
	-webkit-transition: all 0.16s ease;
	transition: all 0.16s ease;
}
.tflash-app .tflash-btn:hover {
	border-color: var(--tf-accent);
	background: var(--tf-surface);
	color: var(--tf-accent);
	-webkit-transform: translateY(-1px);
	transform: translateY(-1px);
}
.tflash-app .tflash-btn:disabled {
	opacity: 0.4;
	cursor: default;
	-webkit-transform: none;
	transform: none;
}

.tflash-app .tflash-btn-primary {
	background: var(--tf-accent);
	border-color: var(--tf-accent);
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.tflash-app .tflash-btn-primary:hover {
	background: var(--tf-accent-dark);
	border-color: var(--tf-accent-dark);
	color: #ffffff;
}

.tflash-app .tflash-btn-round {
	width: 50px; height: 50px;
	padding: 0;
	font-size: 20px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.tflash-judge {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}
.tflash-app .tflash-btn-know { border-color: var(--tf-correct); color: var(--tf-correct); background: var(--tf-surface); }
.tflash-app .tflash-btn-know:hover { background: var(--tf-correct); border-color: var(--tf-correct); color: #ffffff; }
.tflash-app .tflash-btn-still { border-color: var(--tf-muted); color: var(--tf-ink); background: var(--tf-surface); }
.tflash-app .tflash-btn-still:hover { background: var(--tf-ink) !important; border-color: var(--tf-ink) !important; color: #111827 !important; }

.tflash-toolbar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 20px;
	margin-top: 18px;
}
.tflash-app .tflash-link {
	background: none;
	border: 0;
	color: var(--tf-muted);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0 0 2px;
	border-bottom: 1px solid transparent;
}
.tflash-app .tflash-link:hover { color: var(--tf-accent); background: none; border-bottom-color: var(--tf-accent); }

/* ===================================================================
 * Done / summary
 * ================================================================ */

.tflash-done {
	text-align: center;
	padding: 48px 28px;
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-radius);
	background: var(--tf-surface);
	box-shadow: var(--tf-shadow);
}
.tflash-done h3 {
	font-family: "Fraunces", Georgia, serif;
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--tf-ink);
}
.tflash-done .tflash-stat { font-size: 16px; color: var(--tf-muted); margin: 5px 0; }
.tflash-done .tflash-stat strong { color: var(--tf-ink); }
.tflash-done .tflash-controls { margin-top: 24px; }

/* ===================================================================
 * Learn / Test shared
 * ================================================================ */

.tflash-quiz,
.tflash-test-q {
	position: relative;
	background: var(--tf-surface);
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-radius);
	box-shadow: var(--tf-shadow-sm);
	padding: 30px;
	margin-bottom: 16px;
}
.tflash-q-prompt {
	font-family: "Fraunces", Georgia, serif;
	font-size: 23px;
	line-height: 1.32;
	font-weight: 500;
	margin-bottom: 22px;
	color: var(--tf-ink);
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.tflash-q-num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tf-subtle);
	margin-bottom: 10px;
}

.tflash-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 620px) { .tflash-options { grid-template-columns: minmax(0, 1fr); } }

.tflash-app .tflash-option {
	text-align: left;
	background: var(--tf-soft);
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-radius-sm);
	padding: 16px 18px;
	font-size: 15px;
	cursor: pointer;
	color: var(--tf-ink);
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0;
	width: 100%;
	white-space: normal !important;
	-webkit-transition: all 0.13s ease;
	transition: all 0.13s ease;
}
.tflash-app .tflash-option:hover:not(:disabled) {
	border-color: var(--tf-accent);
	background: var(--tf-surface);
	color: var(--tf-ink);
	-webkit-transform: translateY(-1px);
	transform: translateY(-1px);
}
.tflash-app .tflash-option.is-correct { border-color: var(--tf-correct); background: var(--tf-correct-bg); color: var(--tf-correct); font-weight: 600; }
.tflash-app .tflash-option.is-wrong { border-color: var(--tf-wrong); background: var(--tf-wrong-bg); color: var(--tf-wrong); }

.tflash-app .tflash-input {
	width: 100%;
	padding: 15px 18px;
	font-size: 16px;
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-radius-sm);
	margin-bottom: 14px;
	color: var(--tf-ink);
	background: var(--tf-soft);
}
.tflash-app .tflash-input:focus {
	outline: none;
	border-color: var(--tf-accent);
	background: var(--tf-surface);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.tflash-feedback {
	margin: 18px 0;
	padding: 15px 18px;
	border-radius: var(--tf-radius-sm);
	font-size: 15px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	width: 100%;
	white-space: normal !important;
}
.tflash-feedback.is-correct { background: var(--tf-correct-bg); color: var(--tf-correct); }
.tflash-feedback.is-wrong { background: var(--tf-wrong-bg); color: var(--tf-wrong); }

/* ===================================================================
 * Test mode
 * ================================================================ */

.tflash-test-intro { margin-bottom: 14px; }
.tflash-test-q.is-correct { border-color: var(--tf-correct); }
.tflash-test-q.is-wrong { border-color: var(--tf-wrong); }

.tflash-app .tflash-test-option {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 11px;
	padding: 13px 16px;
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-radius-sm);
	margin-bottom: 8px;
	cursor: pointer;
	font-size: 15px;
	color: var(--tf-ink);
	background: var(--tf-surface);
	-webkit-transition: border-color 0.13s ease;
	transition: border-color 0.13s ease;
}
.tflash-app .tflash-test-option:hover { border-color: var(--tf-accent); background: var(--tf-surface); color: var(--tf-ink); }
.tflash-app .tflash-test-option input { margin: 0; -webkit-appearance: radio; appearance: radio; accent-color: #141414; }

.tflash-tf-claim {
	background: var(--tf-soft);
	border-left: 3px solid var(--tf-accent);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 15px;
	color: var(--tf-ink);
}
.tflash-q-answer {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--tf-line);
	font-size: 14px;
	color: var(--tf-ink);
}
.tflash-test-submit { margin-top: 8px; }

/* ===================================================================
 * Match game
 * ================================================================ */

.tflash-match {
	display: grid;
	/* minmax(0, 1fr) stops long unbroken answers from blowing a column wider
	 * than its share (which pushed the whole grid to the right). */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 640px) { .tflash-match { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tflash-app .tflash-tile {
	min-height: 116px;
	min-width: 0;
	width: 100%;
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-radius-sm);
	background: var(--tf-surface);
	box-shadow: var(--tf-shadow-sm);
	padding: 14px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--tf-ink);
	word-wrap: break-word;
	overflow-wrap: break-word;
	overflow: hidden;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	-webkit-transition: all 0.13s ease;
	transition: all 0.13s ease;
}
.tflash-app .tflash-tile:hover { border-color: var(--tf-accent); background: var(--tf-surface); color: var(--tf-ink); -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.tflash-app .tflash-tile.is-sel { border-color: var(--tf-accent); background: var(--tf-accent); color: #ffffff; }
.tflash-app .tflash-tile.is-bad { border-color: var(--tf-wrong); background: var(--tf-wrong-bg); color: var(--tf-wrong); }
.tflash-app .tflash-tile.is-gone { visibility: hidden; opacity: 0; -webkit-transform: scale(0.6); transform: scale(0.6); }
.tflash-app .tflash-tile span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; max-width: 100%; overflow-wrap: break-word; word-break: break-word; }

/* ===================================================================
 * Terms list
 * ================================================================ */

.tflash-terms {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--tf-line);
}
.tflash-terms-title {
	font-family: "Fraunces", Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 16px;
	color: var(--tf-ink);
}
.tflash-term-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 18px;
	background: var(--tf-surface);
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-radius-sm);
	padding: 16px 20px;
	margin-bottom: 10px;
	-webkit-transition: box-shadow 0.15s ease, -webkit-transform 0.15s ease;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tflash-term-row:hover { box-shadow: var(--tf-shadow-sm); -webkit-transform: translateX(3px); transform: translateX(3px); }
.tflash-term-q {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 42%;
	flex: 0 0 42%;
	font-family: "Fraunces", Georgia, serif;
	font-weight: 500;
	font-size: 16px;
	color: var(--tf-ink);
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.tflash-term-a {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	color: var(--tf-muted);
	border-left: 1px solid var(--tf-line);
	padding-left: 18px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
@media (max-width: 540px) {
	.tflash-term-row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; }
	.tflash-term-q { -ms-flex: 1; flex: 1; }
	.tflash-term-a { border-left: 0; padding-left: 0; }
}

/* ===================================================================
 * Legacy grid mode
 * ================================================================ */

.tflash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.tflash-grid .tflash-stage { -webkit-perspective: 1200px; perspective: 1200px; }
.tflash-grid .tflash-card, .tflash-grid .tflash-face { min-height: 184px; }
.tflash-grid .tflash-text { font-size: 18px; }

/* ===================================================================
 * Responsive + motion preferences
 * ================================================================ */

/* ---- Tablet ---- */
@media (max-width: 820px) {
	.tflash-app { padding: 26px 22px; }
	.tflash-match { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Make tabs swipeable instead of wrapping on narrow screens ---- */
@media (max-width: 560px) {
	.tflash-tabs {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.tflash-tabs::-webkit-scrollbar { display: none; }
	.tflash-app .tflash-tab {
		padding: 9px 13px 12px;
		font-size: 12px;
		letter-spacing: 0.07em;
		white-space: nowrap;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}
}

/* ---- Phone ---- */
@media (max-width: 600px) {
	.tflash-app {
		padding: 20px 15px;
		margin: 14px auto;
		border-radius: 16px;
	}

	/* Flashcard */
	.tflash-text { font-size: 21px; line-height: 1.3; }
	.tflash-face { padding: 30px 22px; }
	.tflash-card, .tflash-face { min-height: 290px; }
	.tflash-tag { top: 16px; left: 18px; }
	.tflash-flip-hint { bottom: 14px; }

	/* Controls: bigger touch targets, flip stretches */
	.tflash-controls { gap: 8px; margin-top: 18px; }
	.tflash-app .tflash-btn { padding: 13px 18px; font-size: 14px; }
	.tflash-app .tflash-btn-round { width: 52px; height: 52px; }
	.tflash-app .tflash-btn-primary { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }
	.tflash-judge { gap: 8px; }
	.tflash-app .tflash-btn-know,
	.tflash-app .tflash-btn-still { -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; padding: 13px 10px; }
	.tflash-toolbar { gap: 16px; }

	/* Learn / Test */
	.tflash-quiz, .tflash-test-q { padding: 22px 18px; }
	.tflash-q-prompt { font-size: 19px; }
	.tflash-app .tflash-option { padding: 16px; font-size: 15px; }
	.tflash-app .tflash-input { font-size: 16px; } /* keep >=16px to stop iOS zoom */

	/* Match: 2 roomy columns */
	.tflash-match { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.tflash-app .tflash-tile { min-height: 104px; padding: 12px; font-size: 13.5px; }

	/* Terms list stacks */
	.tflash-terms { margin-top: 30px; padding-top: 22px; }
	.tflash-terms-title { font-size: 18px; }
	.tflash-term-row {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 6px;
		padding: 14px 16px;
	}
	.tflash-term-q { -ms-flex: 1; flex: 1; font-size: 15.5px; }
	.tflash-term-a { border-left: 0; padding-left: 0; }

	.tflash-done { padding: 36px 20px; }
	.tflash-done h3 { font-size: 25px; }
}

/* ---- Small phone ---- */
@media (max-width: 380px) {
	.tflash-text { font-size: 19px; }
	.tflash-card, .tflash-face { min-height: 270px; }
	.tflash-app .tflash-tile { min-height: 94px; font-size: 13px; }
	.tflash-app .tflash-btn { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.tflash-card { -webkit-transition: none; transition: none; }
	.tflash-bar, .tflash-stage, .tflash-controls, .tflash-toolbar,
	.tflash-quiz, .tflash-test-q, .tflash-match, .tflash-done {
		-webkit-animation: none; animation: none;
	}
}

/* ===================================================================
 * Inner content wrapper (padding)
 * ================================================================ */
.tflash-inner {
	padding: 28px 32px 36px;
}

/* ===================================================================


.tflash-set-switcher {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	-webkit-box-pack: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
	gap: 10px;
	padding: 18px 0;
	background: transparent;
	max-width: 860px !important;
	margin: 0 auto 28px !important;
	width: 100% !important;
}

.tflash-set-switcher__pills {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	gap: 8px;
	-ms-flex-wrap: nowrap !important;
	flex-wrap: nowrap !important;
}

/* Individual pill button */
.tflash-set-pill {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: -webkit-inline-box !important;
	display: -ms-inline-flexbox !important;
	display: inline-flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 9px 20px !important;
	background: #1f2937 !important;
	border: 1px solid #374151 !important;
	border-radius: 999px !important;
	font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #9ca3af !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	-webkit-transition: all 0.18s ease !important;
	transition: all 0.18s ease !important;
	line-height: 1 !important;
}

.tflash-set-pill:hover:not(.is-active) {
	background: #374151 !important;
	border-color: #4b5563 !important;
	color: #f3f4f6 !important;
}

/* Active pill — green */
.tflash-set-pill.is-active {
	background: #047E64 !important;
	border-color: #047E64 !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(4, 126, 100, 0.3) !important;
}

/* Card count badge */
.tflash-set-pill__count {
	display: -webkit-inline-box !important;
	display: -ms-inline-flexbox !important;
	display: inline-flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	padding: 2px 8px !important;
	border-radius: 999px !important;
	background: #374151 !important;
	color: #9ca3af !important;
	letter-spacing: 0.04em !important;
	-webkit-transition: all 0.15s ease !important;
	transition: all 0.15s ease !important;
}
.tflash-set-pill.is-active .tflash-set-pill__count {
	background: #ffffff !important;
	color: #047E64 !important;
}
.tflash-set-pill:hover:not(.is-active) .tflash-set-pill__count {
	background: #4b5563 !important;
	color: #ffffff !important;
}

/* Mobile */
@media (max-width: 600px) {
	.tflash-set-switcher {
		padding: 14px 20px;
	}
	.tflash-set-switcher__pills {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.tflash-inner {
		padding: 20px 18px 28px;
	}
	.tflash-set-pill {
		font-size: 12.5px;
		padding: 8px 14px;
	}
}

@media (max-width: 860px) {
	.tflash-inner {
		padding: 22px 24px 30px;
	}
}

/* ============================================================
 * Mode 5 — Blast Game Intro Screen
 * ============================================================ */
.tflash-blast-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 30px;
	text-align: center;
	background: radial-gradient(ellipse at 50% 60%, #0e2a45 0%, #0d1b2a 100%);
	border-radius: 8px;
	min-height: 460px;
	color: #fff;
}

.tflash-blast-intro-rocket {
	font-size: 72px;
	margin-bottom: 16px;
	filter: drop-shadow(0 4px 20px rgba(251,191,36,.4));
}

.tflash-blast-intro-title {
	font-size: 42px;
	font-weight: 800;
	letter-spacing: 1px;
	margin-bottom: 10px;
	color: #fff;
}

.tflash-blast-intro-deck {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #fbbf24;
	margin-bottom: 14px;
}

.tflash-blast-intro-desc {
	font-size: 15px;
	color: rgba(255,255,255,0.7);
	margin-bottom: 6px;
	max-width: 340px;
}

.tflash-blast-intro-time {
	font-size: 15px;
	color: rgba(255,255,255,0.6);
	margin-bottom: 28px;
}

.tflash-blast-intro-time strong {
	color: #fbbf24;
	font-size: 17px;
}

.tflash-blast-intro-stats {
	display: flex;
	gap: 40px;
	margin-bottom: 36px;
}

.tflash-blast-intro-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: rgba(255,255,255,0.55);
	font-weight: 500;
	letter-spacing: .5px;
}

.tflash-blast-intro-num {
	font-size: 32px;
	font-weight: 800;
	color: #fbbf24;
	line-height: 1;
}

.tflash-blast-intro-num--green {
	color: #057E65;
}

.tflash-blast-btn-launch {
	background: #fbbf24;
	color: #0d1b2a;
	border: none;
	border-radius: 999px;
	padding: 16px 44px;
	font-size: 18px;
	font-weight: 800;
	cursor: pointer;
	letter-spacing: .5px;
	box-shadow: 0 4px 32px rgba(251,191,36,.4);
	transition: background .15s, transform .15s, box-shadow .15s;
}

.tflash-blast-btn-launch:hover {
	background: #f59e0b;
	transform: scale(1.04);
	box-shadow: 0 6px 40px rgba(251,191,36,.6);
}



.tflash-sound-btn{position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.6;transition:all 0.2s;z-index:5;color:var(--tf-ink, #f3f4f6);}
.tflash-sound-btn svg{width:18px;height:18px;}
.tflash-sound-btn:hover{opacity:1;background:rgba(255,255,255,0.15);transform:scale(1.05);}
.tflash-star-btn{position:absolute;top:12px;right:52px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.6;transition:all 0.2s;z-index:5;color:var(--tf-ink, #f3f4f6);}
.tflash-star-btn svg{width:18px;height:18px;}
.tflash-star-btn:hover{opacity:1;background:rgba(255,255,255,0.15);transform:scale(1.05);}
.tflash-star-btn.is-starred{opacity:1;color:#fbbf24;border-color:rgba(251,191,36,0.5);background:rgba(251,191,36,0.15);}
.tflash-q-prompt{padding-right: 45px;}

/* ============================================================
 * Autoplay & Shuffle Toggle Controls
 * ============================================================ */
.tflash-app .tflash-btn.is-active {
	background: var(--tf-accent);
	border-color: var(--tf-accent);
	color: #ffffff;
}
.tflash-app .tflash-btn.is-active:hover {
	background: var(--tf-accent-dark);
	border-color: var(--tf-accent-dark);
	color: #ffffff;
}
.tflash-banner {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(31, 41, 55, 0.95);
	border-top: 1px solid var(--tf-line);
	color: #ffffff;
	text-align: center;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	z-index: 10;
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
	pointer-events: none;
}
.tflash-banner.is-visible {
	transform: translateY(0);
	opacity: 1;
}

/* ============================================================
 * Track Progress Toggle Switch & Round Buttons
 * ============================================================ */
.tflash-toggle-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tf-muted);
}
.tflash-toggle-input {
	display: none;
}
.tflash-toggle-slider {
	position: relative;
	width: 44px;
	height: 24px;
	background-color: var(--tf-soft-deep);
	border-radius: 999px;
	transition: background-color 0.2s ease;
}
.tflash-toggle-slider:before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	bottom: 3px;
	background-color: #ffffff;
	border-radius: 50%;
	transition: transform 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.tflash-toggle-input:checked + .tflash-toggle-slider {
	background-color: #3b82f6; /* Quizlet blue */
}
.tflash-toggle-input:checked + .tflash-toggle-slider:before {
	transform: translateX(20px);
}

.tflash-btn-still-round {
	border-color: #ea580c !important; /* orange */
	color: #ea580c !important;
}
.tflash-btn-still-round:hover {
	background: #ea580c !important;
	color: #ffffff !important;
}
.tflash-btn-know-round {
	border-color: #057e65 !important; /* green */
	color: #057e65 !important;
}
.tflash-btn-know-round:hover {
	background: #057e65 !important;
	color: #ffffff !important;
}

.tflash-shortcut-tip {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #a8b1ff;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	color: #1e1b4b;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	z-index: 10;
	pointer-events: none;
}
.tflash-shortcut-tip kbd {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	color: #1e1b4b;
	display: inline-block;
	font-family: inherit;
	font-size: 11px;
	line-height: 1;
	padding: 3px 6px;
	font-weight: 700;
}

/* ============================================================
 * Terms List Floating Control Bar & Dropdown
 * ============================================================ */
.tflash-floating-bar {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: rgba(15, 23, 42, 0.95);
	border: 1px solid #334155;
	border-radius: 999px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	z-index: 2147483647 !important;
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
	pointer-events: none;
}
.tflash-floating-bar.is-visible {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.tflash-floating-btn {
	background: transparent;
	border: none;
	color: #f1f5f9;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border-radius: 999px;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.tflash-floating-btn:hover {
	background: #1e293b;
	color: #ffffff;
}
.tflash-floating-btn-blue {
	background: #2563eb;
	color: #ffffff;
	font-weight: 700;
}
.tflash-floating-btn-blue:hover {
	background: #1d4ed8;
	color: #ffffff;
}
.tflash-floating-btn-blue:active {
	background: #1e40af;
}
.tflash-floating-sep {
	width: 1px;
	height: 18px;
	background: #334155;
}
.tflash-floating-swap {
	font-size: 16px;
	color: #94a3b8;
	cursor: pointer;
	padding: 2px;
	border-radius: 4px;
	transition: color 0.2s, background 0.2s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tflash-floating-swap:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
}

.tflash-floating-dropdown {
	position: absolute;
	bottom: calc(100% + 10px);
	right: 6px;
	background: #0f172a;
	border: 1px solid #334155;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	display: none;
	flex-direction: column;
	padding: 6px;
	min-width: 180px;
	z-index: 2147483647 !important;
}
.tflash-floating-dropdown.is-open {
	display: flex;
}
.tflash-floating-item {
	background: transparent;
	border: none;
	color: #94a3b8;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	padding: 10px 16px;
	border-radius: 8px;
	transition: all 0.15s ease;
	display: flex;
	align-items: center;
	gap: 12px;
}
.tflash-floating-item:hover {
	background: #1e293b;
	color: #ffffff;
}
.tflash-floating-item.is-active {
	color: #3b82f6;
	background: rgba(59, 130, 246, 0.1);
}

/* Hidden Card / Placeholder Mode */
.tflash-term-hidden {
	color: transparent !important;
	background: transparent !important;
	border-left-color: transparent !important;
	cursor: pointer;
	user-select: none;
}
.tflash-term-hidden * {
	color: transparent !important;
	background: transparent !important;
	border-color: transparent !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ============================================================
 * Quizlet-like Footer Controls & Options Modal
 * ============================================================ */

/* Footer Controls Bar */
.tflash-app .tflash-controls-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-top: 1px solid var(--tf-line);
	margin-top: 24px;
	width: 100%;
}

.tflash-app .tflash-controls-left,
.tflash-app .tflash-controls-center,
.tflash-app .tflash-controls-right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tflash-app .tflash-controls-center {
	gap: 18px;
}

@media (max-width: 680px) {
	.tflash-app .tflash-controls-bar {
		flex-direction: column;
		gap: 18px;
		align-items: center;
	}
}

/* Modal Overlay & Backdrop */
.tflash-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(10, 12, 30, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	animation: tf-fade-in 0.22s ease-out;
}

/* Modal Container (Quizlet Style) */
.tflash-modal {
	background-color: #0c0d21;
	color: #ffffff;
	width: 540px;
	max-width: 90%;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8);
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-family: "Hanken Grotesk", -apple-system, sans-serif;
	position: relative;
	animation: tf-slide-up 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
	box-sizing: border-box;
}

.tflash-modal * {
	box-sizing: border-box;
}

/* Modal Header */
.tflash-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tflash-modal-title {
	font-size: 25px;
	font-weight: 800;
	margin: 0;
	color: #ffffff;
	letter-spacing: -0.015em;
}

.tflash-modal-close {
	background: rgba(255, 255, 255, 0.08);
	border: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.tflash-modal-close:hover {
	background: rgba(255, 255, 255, 0.18);
}

/* Modal Option Row */
.tflash-modal-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tflash-modal-label-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	padding-right: 24px;
}

.tflash-modal-option-title {
	font-weight: 700;
	font-size: 15.5px;
	color: #ffffff;
}

.tflash-modal-option-desc {
	font-size: 13px;
	color: #94a3b8;
	line-height: 1.45;
}

/* Dropdown Select Field */
.tflash-select {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 8px 18px;
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
	outline: none;
	font-size: 13.5px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tflash-select:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.2);
}

.tflash-select option {
	background-color: #0c0d21;
	color: #ffffff;
}

/* Collapsible Keyboard Shortcuts Accordion */
.tflash-modal-row-shortcuts {
	flex-direction: column;
	align-items: stretch;
}

.tflash-shortcuts-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tflash-link-view {
	background: none;
	border: none;
	color: #3b82f6;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	padding: 0;
	transition: color 0.15s ease;
}

.tflash-link-view:hover {
	color: #60a5fa;
}

.tflash-shortcuts-list {
	margin-top: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	padding: 12px 18px;
}

.tflash-shortcut-item {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	padding: 6px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

.tflash-shortcut-item:last-child {
	border-bottom: none;
}

.tflash-shortcut-item span:first-child {
	font-weight: 700;
	color: #3b82f6;
}

.tflash-shortcut-item span:last-child {
	color: #94a3b8;
}

/* Action Links (Restart & Privacy) */
.tflash-modal-row-actions {
	display: flex;
	gap: 24px;
	margin-top: 8px;
}

.tflash-modal-action-btn {
	background: none;
	border: none;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	padding: 0;
	transition: color 0.15s ease;
	text-decoration: none;
}

.tflash-btn-restart {
	color: #f87171;
}

.tflash-btn-restart:hover {
	color: #ef4444;
}

.tflash-btn-privacy {
	color: #60a5fa;
}

.tflash-btn-privacy:hover {
	color: #3b82f6;
}

/* Animations */
@keyframes tf-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes tf-slide-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Get a hint premium styles */
.tflash-get-hint-btn {
	background: none !important;
	border: none !important;
	color: var(--tf-muted) !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	transition: color 0.15s ease !important;
}

.tflash-get-hint-btn:hover {
	color: #ffffff !important;
}

.tflash-hint-text {
	color: #fbbf24 !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
}

/* Quiz hint layout positioning */
.tflash-quiz.has-hint .tflash-tag {
	position: absolute !important;
	top: 18px !important;
	left: 24px !important;
}
.tflash-quiz.has-hint .tflash-q-num {
	margin-top: 24px !important;
}
.tflash-quiz.has-hint .tflash-q-prompt {
	margin-top: 24px !important;
}
.tflash-quiz.has-hint .tflash-q-num ~ .tflash-q-prompt {
	margin-top: 0 !important;
}

/* Flashcard hint layout positioning (spacing at bottom of top-left hint) */
.tflash-face-front.has-hint .tflash-text {
	margin-top: 30px !important;
}

/* Ellipsis (More Options) Dropdown and Print Feature Styles */
.tflash-header-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 24px !important;
	gap: 16px !important;
}

.tflash-app .tflash-tabs {
	margin-bottom: 0 !important;
	flex-grow: 1 !important;
}

.tflash-more-wrapper {
	position: relative !important;
	display: inline-block !important;
}

.tflash-more-btn {
	background: #1f2937 !important;
	border: 1px solid #374151 !important;
	color: #f3f4f6 !important;
	font-size: 20px !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s !important;
	padding: 0 0 6px 0 !important; /* Center the ellipsis vertically */
}

.tflash-more-btn:hover {
	background: #374151 !important;
	border-color: #4b5563 !important;
}

.tflash-more-dropdown {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	right: 0 !important;
	background: #111827 !important;
	border: 1px solid #374151 !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
	z-index: 99 !important;
	min-width: 150px !important;
	overflow: hidden !important;
	padding: 6px !important;
	backdrop-filter: blur(8px) !important;
}

.tflash-dropdown-item {
	background: none !important;
	border: none !important;
	color: #d1d5db !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-align: left !important;
	width: 100% !important;
	padding: 10px 14px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	transition: all 0.15s ease !important;
}

.tflash-dropdown-item:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
}

.tflash-dropdown-icon {
	font-size: 16px !important;
	display: inline-flex !important;
}

@media (max-width: 600px) {
	.tflash-header-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.tflash-more-wrapper {
		align-self: flex-end !important;
	}
}

/* Blast Launch Overlay Styles */
.tflash-blast-start {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	max-width: 600px !important;
	margin: 100px auto 0 !important;
	padding: 40px 24px !important;
	background: #111827 !important;
	border: 1px solid #374151 !important;
	border-radius: 20px !important;
	box-shadow: 0 15px 30px rgba(0,0,0,0.3) !important;
}

.tflash-blast-illustration {
	margin-bottom: 24px !important;
	background: rgba(251, 191, 36, 0.1) !important;
	padding: 20px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.tflash-blast-title {
	font-size: 24px !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	margin-bottom: 12px !important;
}

.tflash-blast-subtitle {
	font-size: 15px !important;
	color: #9ca3af !important;
	line-height: 1.6 !important;
	margin-bottom: 32px !important;
}

.tflash-blast-play-btn {
	background: #2563eb !important;
	color: #ffffff !important;
	border: none !important;
	padding: 14px 48px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border-radius: 30px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

.tflash-blast-play-btn:hover {
	background: #1d4ed8 !important;
	transform: scale(1.05) !important;
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6) !important;
}