/* Finish the Ayah — frontend styles.
   Palette and card treatment intentionally match hat-frontend.css (Hifz & Attendance
   Tracker) so the game reads as part of the same site, not a bolted-on extra. */

/* Bundled (not system-font-dependent) Quranic Arabic typeface. Previously the Arabic text relied on
   "Traditional Arabic", which ships with iOS/macOS but doesn't exist on Android — Android fell all
   the way through to Arial, which has no real Quranic glyph support, hence the reported rendering
   issues there. Self-hosting a proper Quranic font makes every device render identically.
   Went through three choices before this one: plain "Amiri" doesn't have positioning rules for the
   extra combining marks (tanwin next to a superscript alef, small high marks, stop signs, ...) full
   Uthmani Mushaf text carries, so it fell back to tofu boxes; "Amiri Quran" (the same designer's
   Quran-tuned variant) fixed most of those but still rendered some of the rarer marks wrong — e.g.
   the rub el hizb marker (۞) came out as a plain asterisk instead of the ornate rosette it should be.
   "Scheherazade New" (SIL International) fixed that, but its mark-attachment anchors for the small
   raised waqf/pause letters (the small jeem, seen, etc. used to mark pause points) sit too low,
   so on some devices those letters visibly touch/merge into the base letter beside them instead of
   floating clear above it. Noto Naskh Arabic (Google, the same family Android itself ships and tests
   its own text renderer against) positions all of the above correctly with real vertical clearance,
   making it the safest choice for this text across the widest range of devices. */
@font-face {
	font-family: "FTA Quran";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/noto-naskh-arabic-regular.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFC;
}

.fta {
	--fta-bg: #000000;
	--fta-card: #0b0b0b;
	--fta-card-alt: #ffffff0d;
	--fta-border: #2a2a2a;
	--fta-text: #ffffff;
	--fta-muted: #c1c1c1;
	--fta-accent: #bc9868;
	--fta-accent-bg: #2b2114;
	--fta-accent-ink: #1a1409;
	--fta-green: #34d399;
	--fta-green-bg: #14301f;
	--fta-amber: #f5b942;
	--fta-red: #f2565a;
	--fta-red-bg: #3a1618;
	--fta-radius: 16px;
	--fta-display-font: Georgia, "Times New Roman", serif; /* the one serif used for every "Finish the Ayah" title and primary button label, so it reads as one typeface throughout */

	box-sizing: border-box;
	color: var(--fta-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	/* No max-width cap — fills its parent exactly like the rest of the page's content does, so it
	   matches the site's own width rather than an arbitrary guessed number. .fta-card's own 16px
	   side padding (not this) is what keeps Order Mode's draggable rows a safe distance from the
	   true edge of the screen, so removing this cap doesn't affect that. */
	width: 100%;
	margin: 0 auto;
}
.fta *, .fta *::before, .fta *::after {
	box-sizing: border-box;
}
/* `display: block/flex` rules below share specificity with the UA [hidden] rule and,
   being author styles, would otherwise win over it regardless of source order — this
   descendant selector outranks them so hidden="" reliably hides its element. */
.fta [hidden] {
	display: none !important;
}
/* Android Chrome flashes a grey "tap highlight" rectangle on anything tappable unless told not to;
   iOS Safari doesn't do this for custom (non-native) controls, so without this the whole app's tap
   feedback looks and behaves differently between the two — every interaction here already has its
   own :active state, so the native highlight is redundant on top of being inconsistent. */
.fta, .fta * {
	-webkit-tap-highlight-color: transparent;
}
:where(.fta) button {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
	border-radius: 0;
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease, transform .1s ease;
}
:where(.fta) button:active {
	transform: scale(0.96);
}
:where(.fta) button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}
:where(.fta) .fta-btn:active:not(:disabled) {
	filter: brightness(1.12);
}
@media (hover: hover) {
	:where(.fta) .fta-btn:hover:not(:disabled) {
		filter: brightness(1.12);
	}
}
:where(.fta) select {
	font-family: inherit;
	font-size: 14px;
	color: var(--fta-text);
}

/* ---------- Card shell (matches .hat-card) ---------- */
.fta-card {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 460px 480px at 50% 0%, rgba(188, 152, 104, 0.09), transparent 75%),
		radial-gradient(ellipse 400px 340px at 50% 100%, rgba(188, 152, 104, 0.06), transparent 75%),
		linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
		var(--fta-card);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--fta-radius);
	padding: 20px 16px 22px;
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	box-shadow:
		0 24px 48px -16px rgba(0, 0, 0, 0.75),
		0 0 50px -8px rgba(188, 152, 104, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 -1px 0 rgba(255, 255, 255, 0.1),
		inset 1px 0 0 rgba(255, 255, 255, 0.1),
		inset -1px 0 0 rgba(255, 255, 255, 0.1);
}

/* ---------- Header ---------- */
.fta-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.fta-scoreboard {
	display: flex;
	align-items: center;
	gap: 10px;
}
.fta-score-box {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1.5px solid var(--fta-border);
	border-radius: 12px;
	padding: 8px 16px;
	background: var(--fta-card-alt);
}
.fta-score-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
}
.fta-score-value {
	font-size: 17px;
	font-weight: 700;
	color: var(--fta-accent);
	font-variant-numeric: tabular-nums;
}
.fta-score-label {
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fta-muted);
	margin-top: 2px;
}
/* ---------- Front screen: one illustrated hero image; only the tagline + Play button are live HTML,
   overlaid in the image's own empty band (below the baked-in title, above the baked-in book-icon divider). ---------- */
.fta-home {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	margin: -20px -16px -22px; /* bleed to the card's own edge so the image fills it exactly */
	aspect-ratio: 720 / 960; /* the image's own native (taller) ratio — shown in full, no cropping; its own empty band (~29%-85% of height) holds the overlay below */
}
.fta-home-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.fta-home-content {
	position: absolute;
	left: 0;
	right: 0;
	top: 33%;
	height: 48%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 4vw, 28px);
	padding: 0 clamp(28px, 9vw, 48px);
	text-align: center;
}
.fta-home-tagline {
	margin: 0;
	max-width: 30ch;
	font-size: clamp(13px, 3.6vw, 16px);
	line-height: 1.55;
	color: #d7dbea;
}

.fta-play-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: clamp(10px, 2.6vw, 14px) clamp(30px, 7vw, 40px) clamp(10px, 2.6vw, 14px) clamp(10px, 2.6vw, 14px);
	border-radius: 100px;
	border: 1.5px solid #8a641f;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.5),
		0 14px 30px -10px rgba(246, 199, 102, 0.55);
	background: linear-gradient(180deg, #ffe49a 0%, #eab84a 45%, #c8932e 100%);
	font-family: var(--fta-display-font);
	font-size: clamp(16px, 4.2vw, 19px);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #3a2606;
	flex: none;
}
.fta-play-btn-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(28px, 7.5vw, 36px);
	height: clamp(28px, 7.5vw, 36px);
	border-radius: 50%;
	background: #2a1c07;
	color: #f0c463;
}
.fta-play-btn-icon svg {
	margin-left: 1px; /* optically centre the triangle */
}
.fta-play-btn:active {
	filter: brightness(1.08);
}
@media (hover: hover) {
	.fta-play-btn:hover {
		filter: brightness(1.08);
	}
}

/* ---------- Mode title: which of the 3 modes is active, shown on the scope screen and in-game ---------- */
.fta-mode-title {
	margin: 0 0 14px;
	font-family: var(--fta-display-font);
	font-size: 17px;
	font-weight: 700;
	color: var(--fta-accent);
}
.fta-play [data-fta-play-mode-title] {
	margin: 0 0 6px;
	font-size: 15px;
}

/* ---------- Scope picker ---------- */
.fta-scope-hint {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--fta-muted);
}
/* Horizontally-scrolling Juz picker — a strip of toggle pills, swipe/drag to see more, no visible scrollbar. */
.fta-juz-slider {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 10px;
	margin: 0 -2px;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge */
}
.fta-juz-slider::-webkit-scrollbar {
	display: none; /* Chrome, Safari */
}
.fta-juz-pill {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border-radius: 100px;
	border: 1.5px solid var(--fta-border);
	background: var(--fta-card-alt);
	color: var(--fta-muted);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.fta-juz-pill svg {
	opacity: .6;
}
.fta-juz-pill.is-active {
	border-color: var(--fta-accent);
	background: var(--fta-accent-bg);
	color: var(--fta-accent);
	box-shadow: 0 0 0 3px rgba(188, 152, 104, 0.18);
}
.fta-juz-pill.is-active svg {
	opacity: 1;
}

.fta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 16px;
	padding: 13px 16px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 700;
}
.fta-btn-primary {
	background: var(--fta-accent);
	color: var(--fta-accent-ink);
	font-family: var(--fta-display-font);
}
/* Reveal is the "not gold" secondary action — plain neutral surface, plain font, distinct from Check's gold. */
.fta-btn-neutral {
	background: var(--fta-card-alt);
	color: var(--fta-text);
	border: 1.5px solid var(--fta-border);
	font-family: inherit;
}
.fta-start-icon {
	flex: none; /* a fixed-size circle in a flex row would otherwise get its width squished on narrow screens */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fta-accent-ink);
	color: var(--fta-accent);
}
.fta-start-icon svg {
	margin-left: 1px; /* optically centre the triangle */
}
.fta-btn-gold {
	background: var(--fta-accent-bg);
	color: var(--fta-accent);
	border: 1.5px solid var(--fta-accent);
}
.fta-btn-good {
	background: var(--fta-green-bg);
	color: var(--fta-green);
	border: 1.5px solid var(--fta-green);
}
.fta-btn-miss {
	background: var(--fta-red-bg);
	color: var(--fta-red);
	border: 1.5px solid var(--fta-red);
}
.fta-scope-error {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--fta-red);
	text-align: center;
}

/* ---------- Quiz length control ---------- */
.fta-length {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--fta-border);
}
.fta-length-label {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fta-muted);
}
.fta-length-select {
	display: block;
	width: 100%;
	background: var(--fta-bg);
	color: var(--fta-text);
	border: 2px solid var(--fta-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 600;
}
.fta-length-estimate {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--fta-muted);
	font-variant-numeric: tabular-nums;
}
.fta-selected-summary {
	margin: 16px 0 0;
	padding: 10px 14px;
	border: 1.5px solid var(--fta-accent);
	border-radius: 10px;
	background: var(--fta-accent-bg);
	color: var(--fta-accent);
	font-size: 13px;
	font-weight: 600;
}
.fta-selected-summary:empty {
	display: none;
}
.fta-ayah-range-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.fta-ayah-range-row select {
	flex: 1;
	min-width: 0;
}
.fta-ayah-range-sep {
	flex: none;
	font-size: 12px;
	color: var(--fta-muted);
}

/* ---------- Surah filter (step 2, appears once a Juz is picked) ---------- */
.fta-surah-filter {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--fta-border);
}
.fta-surah-filter-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
/* Segmented "All / None" button pair — a real control, not a text link. */
.fta-filter-group {
	display: flex;
	flex: none;
	border: 1.5px solid var(--fta-border);
	border-radius: 8px;
	overflow: hidden;
}
.fta-filter-btn {
	font-size: 12px;
	font-weight: 600;
	color: var(--fta-muted);
	background: var(--fta-card-alt);
	padding: 6px 12px;
	white-space: nowrap;
}
.fta-filter-btn + .fta-filter-btn {
	border-left: 1.5px solid var(--fta-border);
}
.fta-filter-btn:active:not(:disabled) {
	color: var(--fta-accent);
	background: var(--fta-accent-bg);
}
@media (hover: hover) {
	.fta-filter-btn:hover:not(:disabled) {
		color: var(--fta-accent);
		background: var(--fta-accent-bg);
	}
}
.fta-surah-checklist {
	margin-top: 10px;
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid var(--fta-border);
	border-radius: 10px;
	background: rgba(0,0,0,0.3);
}
.fta-surah-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--fta-border);
	font-size: 13.5px;
}
.fta-surah-row:last-child {
	border-bottom: none;
}
.fta-surah-row input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.fta-check-box {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1.5px solid var(--fta-border);
	background: var(--fta-bg);
	color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fta-surah-row input:checked + .fta-check-box {
	background: var(--fta-accent);
	border-color: var(--fta-accent);
	color: var(--fta-accent-ink);
}
.fta-surah-row input:focus-visible + .fta-check-box {
	outline: 2px solid var(--fta-accent);
	outline-offset: 2px;
}
.fta-surah-row .fta-surah-num {
	color: var(--fta-muted);
	font-variant-numeric: tabular-nums;
	width: 1.6em;
	flex: none;
}
.fta-surah-row .fta-surah-name {
	text-transform: uppercase;
	letter-spacing: .02em;
	font-weight: 600;
	font-size: 12.5px;
}
.fta-surah-row .fta-surah-ar {
	margin-left: auto;
	color: var(--fta-accent);
	direction: rtl;
	font-size: 15px;
}

/* ---------- Play screen ---------- */
.fta-play-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--fta-accent);
}
.fta-menu-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fta-accent);
	border: 1.5px solid var(--fta-accent);
	background: transparent;
	border-radius: 100px;
	padding: 7px 14px;
	white-space: nowrap;
}
.fta-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}
.fta-progress-track {
	flex: 1;
	height: 9px;
	border-radius: 100px;
	background: var(--fta-card-alt);
	overflow: hidden;
}
.fta-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--fta-accent), #e0be8d);
	border-radius: 100px;
	transition: width .25s ease;
}
.fta-progress-label {
	flex: none;
	font-size: 11.5px;
	color: var(--fta-muted);
	font-variant-numeric: tabular-nums;
}

.fta-question {
	margin-top: 16px;
	padding: 30px 18px;
	border-radius: 14px;
	border: 1px solid rgba(188, 152, 104, 0.3);
	background: rgba(0,0,0,0.35);
	text-align: center;
}
.fta-ayah-tag {
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--fta-muted);
	margin-bottom: 14px;
}
.fta-ayah {
	margin: 0;
	font-size: clamp(22px, 6vw, 27px);
	line-height: 2.15;
	color: var(--fta-text);
	font-family: "FTA Quran", "Noto Naskh Arabic", "Traditional Arabic", "Amiri", "Arial", serif;
	direction: rtl;
	/* This is a game display, not selectable text — without this, a long-press on Android brings up
	   its text-selection handles/callout (iOS shows its own equivalent), neither of which belongs here. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.fta-ayah .fta-blank {
	display: inline-block;
	min-width: 1.6em;
	border-bottom: 3px dotted var(--fta-accent);
	color: transparent;
	user-select: none;
}
.fta-ayah .fta-revealed {
	color: var(--fta-accent);
}

/* ---------- Word Bank mode: tappable slots inline in the ayah, tiles below ---------- */
.fta-ayah .fta-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4em;
	padding: 0 6px;
	border-radius: 6px;
	font-size: .92em;
}
.fta-ayah .fta-slot.is-empty {
	border-bottom: 3px dotted var(--fta-accent);
	min-height: 1.3em;
}
.fta-ayah .fta-slot.is-filled {
	cursor: grab;
	background: var(--fta-accent-bg);
	color: var(--fta-accent);
	border: 1.5px solid var(--fta-accent);
	touch-action: none; /* stops the page from scrolling while a placed word is being dragged on touch */
}
.fta-ayah .fta-slot.is-dragging-source {
	opacity: .35;
}
.fta-ayah .fta-slot.is-correct {
	background: var(--fta-green-bg);
	color: var(--fta-green);
	border-color: var(--fta-green);
	cursor: default;
}
.fta-ayah .fta-slot.is-wrong {
	background: var(--fta-red-bg);
	color: var(--fta-red);
	border-color: var(--fta-red);
	animation: fta-shake .3s ease;
}
.fta-ayah .fta-slot.is-revealed {
	background: transparent;
	border: none;
	color: var(--fta-accent);
	cursor: default;
}
@keyframes fta-shake {
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
	.fta-ayah .fta-slot.is-wrong { animation: none; }
}

.fta-word-bank {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--fta-border);
}
.fta-tile {
	padding: 9px 16px;
	border-radius: 10px;
	border: 1.5px solid var(--fta-border);
	background: var(--fta-card-alt);
	color: var(--fta-text);
	font-size: clamp(16px, 4.5vw, 19px);
	font-family: "FTA Quran", "Noto Naskh Arabic", "Traditional Arabic", "Amiri", "Arial", serif;
	direction: rtl;
	touch-action: none; /* stops the page from scrolling while a tile is being dragged on touch */
	cursor: grab;
	/* Without this, picking up a tile can instead trigger Android's text-selection handles or iOS's
	   long-press callout — both fight the drag gesture, and neither happens on the other platform. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.fta-tile.is-dragging-source {
	opacity: .35;
}
/* The empty slot currently under the dragged tile — a clear "drop here" cue. */
.fta-ayah .fta-slot.is-drag-over {
	background: var(--fta-accent-bg);
	border-bottom-style: solid;
}

/* ---------- Order Mode: a single reorderable list — drag a card and the others slide to make room ---------- */
.fta-order-slots {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}
.fta-order-slot {
	position: relative;
	display: block;
	min-height: 3em;
	padding: 12px 16px 12px 44px;
	border-radius: 10px;
	font-size: clamp(15px, 4.2vw, 18px);
	font-family: "FTA Quran", "Noto Naskh Arabic", "Traditional Arabic", "Amiri", "Arial", serif;
	direction: rtl;
	/* Quranic text carries a lot of marks that sit above the line (waqf/pause signs, stacked tashkeel) —
	   at Memory Mode's roomier 2.15 line-height they clear the line above fine, but Order Mode's rows
	   often wrap to several lines in a smaller card, and the tighter spacing let them collide. */
	line-height: 2;
	text-align: right;
	background: var(--fta-card-alt);
	border: 1.5px solid var(--fta-accent);
	color: var(--fta-text);
	cursor: grab;
	touch-action: none; /* stops the page from scrolling while a row is being dragged on touch */
	/* Same reasoning as .fta-tile above — a draggable row full of real text is exactly what triggers
	   the platforms' (different) native text-selection UIs if this isn't turned off. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.fta-order-slot::before {
	content: attr(data-position);
	position: absolute;
	left: 12px;
	top: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fta-card-alt);
	border: 1.5px solid var(--fta-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	font-family: inherit;
	color: var(--fta-muted);
}
/* The gap left where the dragged ayah currently would land — an empty slot, not a hole in the list,
   so it's obvious exactly where dropping will place it. */
.fta-order-slot.is-placeholder {
	background: transparent;
	border-style: dashed;
	border-color: var(--fta-accent);
	color: transparent;
}
.fta-order-slot.is-placeholder::before {
	border-style: dashed;
}
.fta-order-slot.is-correct {
	cursor: default;
	background: var(--fta-green-bg);
	border-color: var(--fta-green);
	color: var(--fta-green);
}
.fta-order-slot.is-correct::before {
	border-color: var(--fta-green);
	color: var(--fta-green);
}
.fta-order-slot.is-wrong {
	background: var(--fta-red-bg);
	border-color: var(--fta-red);
	color: var(--fta-red);
	animation: fta-shake .3s ease;
}
.fta-order-slot.is-wrong::before {
	border-color: var(--fta-red);
	color: var(--fta-red);
}
.fta-order-slot.is-revealed {
	cursor: default;
	background: transparent;
	border-color: var(--fta-border);
	color: var(--fta-accent);
}
@media (prefers-reduced-motion: reduce) {
	.fta-order-slot.is-wrong { animation: none; }
}

/* ---------- Mode select (pre-menu) ---------- */
.fta-mode-select {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.fta-mode-select .fta-scope-hint {
	margin-bottom: 6px;
}
.fta-mode-card {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px;
	border-radius: 14px;
	border: 1.5px solid var(--fta-border);
	background: var(--fta-card-alt);
	text-align: left;
}
.fta-mode-card:active {
	filter: brightness(1.1);
}
@media (hover: hover) {
	.fta-mode-card:hover {
		border-color: var(--fta-accent);
		background: var(--fta-accent-bg);
	}
}
.fta-mode-card-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--fta-accent-bg);
	color: var(--fta-accent);
}
.fta-mode-card-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.fta-mode-card-title {
	font-family: var(--fta-display-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--fta-text);
}
.fta-mode-card-desc {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--fta-muted);
}
.fta-scope-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
.fta-icon-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--fta-muted);
	border: 1.5px solid var(--fta-border);
	background: transparent;
}
.fta-icon-btn:active:not(:disabled) {
	background: var(--fta-card-alt);
}
@media (hover: hover) {
	.fta-icon-btn:hover:not(:disabled) {
		background: var(--fta-card-alt);
		color: var(--fta-text);
	}
}

/* ---------- Password modal (Results settings) ---------- */
.fta-modal-backdrop {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: var(--fta-radius);
	z-index: 10;
}
.fta-modal {
	width: 100%;
	max-width: 320px;
	background: var(--fta-card);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--fta-radius);
	padding: 20px 16px;
}
.fta-modal-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}
.fta-modal-actions .fta-btn {
	margin-top: 0;
}
.fta-result-delete-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--fta-red);
	border: 1.5px solid var(--fta-red);
	background: transparent;
}
.fta-result-delete-btn:active:not(:disabled) {
	background: var(--fta-red-bg);
}
@media (hover: hover) {
	.fta-result-delete-btn:hover:not(:disabled) {
		background: var(--fta-red-bg);
	}
}

.fta-hint-text {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--fta-accent);
}
.fta-controls {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}
.fta-controls .fta-btn {
	margin-top: 0;
}
.fta-round-feedback {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
}
.fta-round-feedback.is-good { color: var(--fta-green); }
.fta-round-feedback.is-miss { color: var(--fta-red); }

/* ---------- End of session ---------- */
.fta-end {
	text-align: center;
	padding-top: 6px;
}
.fta-end-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--fta-text);
}
.fta-end-copy {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--fta-muted);
}
.fta-end-stats {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 20px;
}
.fta-end-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.fta-end-stat span {
	font-size: 22px;
	font-weight: 700;
	color: var(--fta-accent);
	font-variant-numeric: tabular-nums;
}
.fta-end-stat label {
	margin-top: 2px;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fta-muted);
}
.fta-end .fta-btn:last-child {
	background: var(--fta-card-alt);
	color: var(--fta-text);
	border: 1px solid var(--fta-border);
}

.fta-loading, .fta-load-error {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--fta-muted);
}
.fta-load-error {
	color: var(--fta-red);
}

/* ---------- Class Mode: class tabs + student grid (roster read from the Attendance Tracker) ---------- */
/* ---------- Password gate (Class Mode / Results) ---------- */
.fta-password-gate input[type="password"] {
	margin-top: 16px;
	letter-spacing: 0.08em;
}
.fta-roster-status {
	margin: 24px 0;
	text-align: center;
	font-size: 13px;
	color: var(--fta-muted);
}
.fta-class-tabs {
	display: flex;
	justify-content: center;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 18px;
}
.fta-class-tab {
	flex: none;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--fta-border);
	background: var(--fta-card-alt);
	color: var(--fta-muted);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.fta-class-tab.is-active {
	border-color: var(--fta-accent);
	background: var(--fta-accent-bg);
	color: var(--fta-accent);
}
.fta-student-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
/* Docked (default): a normal block, right where it belongs after the summary — a short class's list
   ends here with no gap and no floating at all. JS (updateRosterContinuePosition) only adds .is-floating
   when the anchor above has actually scrolled out of view below the screen, at which point the button is
   moved to float over the content instead; it's moved right back the moment that anchor is visible again,
   so it can never end up hovering past where it naturally sits. */
.fta-floating-continue {
	margin-top: 16px;
}
.fta-floating-continue.is-floating {
	position: fixed;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom, 16px));
	transform: translateX(-50%);
	width: calc(100% - 32px);
	max-width: 448px;
	margin: 0;
	z-index: 30;
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(188, 152, 104, 0.35);
}
.fta-student-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 10px;
	border: 1.5px solid var(--fta-border);
	border-radius: 14px;
	background: var(--fta-card-alt);
	text-align: center;
}
.fta-student-card:active {
	border-color: var(--fta-accent);
}
@media (hover: hover) {
	.fta-student-card:hover {
		border-color: var(--fta-accent);
	}
}
/* Picked for this session (solo, or one of up to 3 on a team) — a gold outline and glow rather than a
   checkbox, so the card itself reads as "chosen" instead of adding a separate control to tap. */
.fta-student-card.is-selected {
	border-color: var(--fta-accent);
	background: var(--fta-accent-bg);
	box-shadow: 0 0 0 1px var(--fta-accent), 0 0 18px -2px rgba(188, 152, 104, 0.7);
}
.fta-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex: none;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid var(--fta-border);
}
.fta-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fta-avatar-fallback {
	font-family: var(--fta-display-font);
	font-weight: 700;
	font-size: 18px;
	color: var(--fta-muted);
}
.fta-student-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fta-text);
}
.fta-student-badge {
	margin: -8px 0 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--fta-accent);
}

/* ---------- Results screen: filters + table ---------- */
.fta-results-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.fta-results-filters select {
	flex: 1 1 110px;
	min-width: 0;
}
.fta-results-filters .fta-filter-btn {
	flex: none;
}
.fta-results-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--fta-border);
	border-radius: 12px;
}
.fta-results-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}
.fta-results-table th,
.fta-results-table td {
	padding: 9px 12px;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid var(--fta-border);
}
.fta-results-table th {
	color: var(--fta-muted);
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: .04em;
	background: var(--fta-card-alt);
	position: sticky;
	top: 0;
}
.fta-results-table tr:last-child td {
	border-bottom: none;
}
.fta-results-table td.fta-score-cell {
	font-weight: 700;
	color: var(--fta-accent);
}

/* The floating clone that follows the pointer/finger while a tile or ayah row is being dragged.
   Deliberately `position: absolute` (document-relative), not `fixed`: iOS Safari has a long-standing bug
   where fixed-position elements stay pinned to the layout viewport instead of the zoomed visual viewport
   during pinch-zoom, so a fixed ghost visibly drifts away from the finger once the page is zoomed in.
   Absolute positioning follows normal page content instead and isn't subject to that bug.
   Kept last in the file (rather than reintroduced via specificity hacks) so this always wins the cascade
   over whatever component class (.fta-tile, .fta-order-slot, ...) the cloned element also carries — those
   set their own `position`, and being defined later in the file would otherwise silently override this. */
.fta-tile-ghost {
	position: absolute !important;
	z-index: 1000;
	pointer-events: none;
	transform: scale(1.08) rotate(-2deg);
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6);
	border-color: var(--fta-accent);
}