/* Game Day Phase 1: shared design tokens, shell, and all interactive engines.
   Colours and font confirmed against AwkwardConversationChildTheme/style.css
   (code_backup_24Sep.zip copy, see REPORT_PHASE1.md for the Oct 1 backup gap). */

.ac-game-root {
	--ac-teal: #00799E;
	--ac-red: #F00018;
	--ac-text: #3A3938;
	--ac-tint: #F0EEE3;
	--ac-white: #FFFFFF;
	--ac-focus: #00454F;
	--ac-radius: 10px;
	--ac-touch: 44px;

	font-family: "Noto Sans", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--ac-text);
	background: var(--ac-white);
	max-width: 760px;
	margin: 0 auto;
	box-sizing: border-box;
	line-height: 1.5;
}

.ac-game-root[lang="zh-TW"],
.ac-game-root[lang="zh-CN"] {
	font-family: "Noto Sans TC", "Noto Sans SC", "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.ac-game-root * {
	box-sizing: border-box;
}

.ac-game-root button {
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
	white-space: normal;
}
/* Browsers still apply :hover/:focus styling to disabled buttons unless
   told not to, so a locked-in (answered) button stayed exposed to the
   site theme's own button:hover/:focus rule (pink, not an AC colour).
   Disabled controls shouldn't react to the mouse at all, so this closes
   it for every button in the game at once rather than per component. */
.ac-game-root button:disabled {
	pointer-events: none;
}

.ac-game-root :focus-visible {
	outline: 3px solid var(--ac-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ac-game-root * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* High-contrast / accessibility mode: never rely on colour alone, so icons
   and shapes layer on top rather than replacing colour entirely. */
.ac-game-root.ac-a11y {
	--ac-teal: #005266;
	--ac-red: #B8000F;
	--ac-text: #000000;
	--ac-tint: #FFFFFF;
	--ac-white: #FFFFFF;
}
.ac-game-root.ac-a11y .ac-game-card,
.ac-game-root.ac-a11y .ac-topbar {
	border: 2px solid var(--ac-text);
}

/* ---------- Top bar ---------- */
.ac-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	background: var(--ac-tint);
	border-radius: var(--ac-radius) var(--ac-radius) 0 0;
	flex-wrap: wrap;
}
.ac-topbar__left,
.ac-topbar__right {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.ac-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: var(--ac-touch);
	min-height: var(--ac-touch);
	padding: 0 10px;
	background: transparent;
	border: 2px solid transparent;
	border-radius: 8px;
	color: var(--ac-text);
	font-size: 0.9rem;
}
/* .ac-game-root prefix on every hover rule below: a plain class+:hover
   selector (e.g. .ac-icon-btn:hover) ties in specificity with the theme's
   own button:hover/[type="button"]:hover rule, so which one wins becomes a
   coin flip decided by stylesheet load order rather than a real fix. The
   extra ancestor class makes ours win outright, regardless of order. */
.ac-game-root .ac-icon-btn:hover {
	background: var(--ac-tint);
	border-color: var(--ac-teal);
	color: var(--ac-text);
}
.ac-icon-btn[aria-pressed="true"] {
	background: var(--ac-teal);
	color: var(--ac-white);
	border-color: var(--ac-teal);
}
.ac-score-pill {
	font-weight: 700;
	font-size: 0.9rem;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ac-white);
	border: 1px solid var(--ac-teal);
	color: var(--ac-teal);
}
/* ---------- Body / cards ---------- */
.ac-game-body {
	border: 1px solid var(--ac-tint);
	border-top: none;
	border-radius: 0 0 var(--ac-radius) var(--ac-radius);
	padding: 20px 16px 24px;
	min-height: 220px;
}
.ac-game-card h2 {
	font-size: 1.15rem;
	margin: 0 0 12px;
}
.ac-chapter-label {
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: none;
	color: var(--ac-teal);
	margin: 0 0 6px;
}
.ac-game-root .ac-question-text {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 16px;
}

/* ---------- Nav ---------- */
.ac-nav-row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 20px;
	gap: 10px;
}
.ac-btn {
	min-height: var(--ac-touch);
	padding: 0 18px;
	border-radius: 8px;
	border: 2px solid var(--ac-teal);
	background: var(--ac-white);
	color: var(--ac-teal);
	font-weight: 700;
}
.ac-btn--primary {
	background: var(--ac-teal);
	color: var(--ac-white);
}
.ac-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}
.ac-btn--text {
	border-color: transparent;
	background: none;
}
/* The site theme's own reset stylesheet puts a blanket button:hover rule
   (pink/magenta, not an AC colour) on every plain <button>; override it
   explicitly rather than relying on source order, since both rules land
   at the same specificity otherwise. */
.ac-game-root .ac-btn:hover {
	background: var(--ac-white);
	border-color: var(--ac-focus);
	color: var(--ac-focus);
}
.ac-game-root .ac-btn--primary:hover {
	background: var(--ac-focus);
	border-color: var(--ac-focus);
	color: var(--ac-white);
}

/* ---------- True/False + Multiple choice ---------- */
.ac-choice-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ac-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: var(--ac-touch);
	text-align: left;
	padding: 10px 14px;
	border: 2px solid var(--ac-teal);
	border-radius: 8px;
	background: var(--ac-white);
	color: var(--ac-text);
}
.ac-game-root .ac-choice:hover {
	border-color: var(--ac-teal);
	background: var(--ac-tint);
	color: var(--ac-text);
}
.ac-choice[aria-pressed="true"] {
	background: var(--ac-tint);
	border-width: 3px;
}
.ac-choice.is-correct {
	border-color: var(--ac-teal);
	background: #E4F2F6;
}
.ac-choice.is-correct::before {
	content: "\2713";
	font-weight: 900;
	color: var(--ac-teal);
}
.ac-choice.is-wrong {
	border-color: var(--ac-red);
	background: #FDE7E8;
}
.ac-choice.is-wrong::before {
	content: "\2715";
	font-weight: 900;
	color: var(--ac-red);
}
.ac-truefalse-row {
	display: flex;
	gap: 12px;
}
.ac-truefalse-row .ac-choice {
	justify-content: center;
	flex: 1 1 0;
}

.ac-why {
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--ac-tint);
	border-left: 4px solid var(--ac-teal);
	border-radius: 6px;
	font-size: 0.95rem;
}
/* ---------- Hotspot ---------- */
.ac-hotspot-figure {
	position: relative;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--ac-tint);
}
.ac-hotspot-figure img {
	display: block;
	width: 100%;
	height: auto;
}
.ac-hotspot {
	position: absolute;
	display: block;
	padding: 0;
	margin: 0;
	min-width: var(--ac-touch);
	min-height: var(--ac-touch);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}
/* Hotspot areas are never drawn: not at rest, on hover, on focus, or after
   a click. !important is deliberate, it must also beat the theme's own
   button:hover / button:focus colours. */
.ac-game-root .ac-hotspot:hover,
.ac-game-root .ac-hotspot:focus,
.ac-game-root .ac-hotspot:focus-visible,
.ac-game-root .ac-hotspot:active,
.ac-game-root .ac-hotspot.is-correct,
.ac-game-root .ac-hotspot.is-wrong {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}
.ac-game-root .ac-hotspot[aria-disabled="true"] {
	cursor: default;
}
.ac-hotspot-focus {
	min-height: 1.5em;
	margin: 8px 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ac-teal);
}
.ac-hotspot-alt-list {
	margin-top: 14px;
	padding: 0;
	list-style: none;
}
.ac-hotspot-alt-list .ac-choice {
	margin-bottom: 8px;
}

/* ---------- Drag & sort ---------- */
.ac-dragsort-zones {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ac-dragsort-zone {
	border: 2px dashed var(--ac-teal);
	border-radius: 8px;
	padding: 10px;
	min-height: 60px;
}
.ac-dragsort-zone__label {
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 8px;
	color: var(--ac-teal);
}
.ac-dragsort-zone.is-droptarget {
	background: var(--ac-tint);
}
.ac-dragsort-items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ac-dragsort-pool {
	border: 2px solid var(--ac-text);
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ac-drag-item {
	min-height: var(--ac-touch);
	min-width: var(--ac-touch);
	padding: 8px 10px;
	border: 2px solid var(--ac-teal);
	border-radius: 8px;
	background: var(--ac-white);
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: grab;
	font-size: 1rem;
}
.ac-drag-item img {
	max-width: 64px;
	max-height: 44px;
	display: block;
}
.ac-game-root .ac-drag-item:hover {
	border-color: var(--ac-teal);
	background: var(--ac-white);
	color: var(--ac-text);
}
/* The theme's default :active (mouse-held-down) button colour is off-brand,
   and unlike :hover it was never overridden here. Every other control in
   this file is only ever :active for an instant on click, so it never
   showed; a drag keeps the source button :active for the whole gesture,
   which is exactly when the off-brand colour became visible. */
.ac-game-root .ac-drag-item:active {
	border-color: var(--ac-teal);
	background: var(--ac-white);
	color: var(--ac-text);
}
.ac-drag-item[aria-pressed="true"] {
	border-color: var(--ac-red);
	box-shadow: 0 0 0 2px var(--ac-red);
}
.ac-drag-item.is-correct {
	border-color: var(--ac-teal);
	background: #E4F2F6;
}
.ac-drag-item.is-correct::before {
	content: "\2713";
	font-weight: 900;
	color: var(--ac-teal);
	margin-right: 4px;
}
.ac-drag-item.is-wrong {
	border-color: var(--ac-red);
	background: #FDE7E8;
}
.ac-drag-item.is-wrong::before {
	content: "\2715";
	font-weight: 900;
	color: var(--ac-red);
	margin-right: 4px;
}
.ac-dragsort-extra {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--ac-tint);
	font-size: 0.92rem;
}
.ac-dragsort-extra p {
	margin: 0 0 8px;
}

/* ---------- Scenario (branching slides) ---------- */
.ac-scenario-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}
.ac-scenario-outcome {
	background: var(--ac-tint);
	border-radius: 8px;
	padding: 14px;
	margin-top: 14px;
}

/* ---------- Result card ---------- */
.ac-result-card {
	text-align: center;
	padding: 10px 0 4px;
}
.ac-result-score {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--ac-teal);
	margin: 6px 0;
}
.ac-share-row {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 14px 0;
}
/* Circular brand-colour icon buttons, matching the share bar already live
   on the site's article pages (article-features-and-bookmark plugin):
   solid platform colour, white icon, brighten + lift on hover. */
.ac-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--ac-white);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.ac-share-btn svg {
	display: block;
	width: 20px;
	height: 20px;
}
.ac-share-btn:hover,
.ac-share-btn:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(58, 57, 56, 0.2);
}
.ac-share-btn--linkedin,
.ac-game-root .ac-share-btn--linkedin:hover { background: #0A66C2; }
.ac-share-btn--instagram,
.ac-game-root .ac-share-btn--instagram:hover { background: #E1306C; }
.ac-share-btn--whatsapp,
.ac-game-root .ac-share-btn--whatsapp:hover { background: #25D366; }
.ac-share-btn--copy,
.ac-game-root .ac-share-btn--copy:hover { background: var(--ac-text); color: var(--ac-white); }
.ac-signup-invite {
	margin-top: 18px;
	padding: 14px;
	border: 1px solid var(--ac-teal);
	border-radius: 8px;
	background: var(--ac-tint);
}
.ac-signup-invite p {
	margin: 0 0 12px;
}
.ac-signup-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* ---------- Modal (how-to-play) ---------- */
.ac-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(58, 57, 56, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 999999;
}
.ac-modal {
	background: var(--ac-white);
	border-radius: var(--ac-radius);
	max-width: 420px;
	width: 100%;
	padding: 22px;
}
.ac-modal h3 {
	margin: 0 0 10px;
}
.ac-modal-steps {
	margin: 0 0 16px;
	padding-left: 20px;
}
.ac-modal-steps li {
	margin-bottom: 8px;
}
.ac-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

/* ---------- Live region (visually hidden) ---------- */
.ac-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Mobile first ---------- */
@media (max-width: 420px) {
	.ac-truefalse-row {
		flex-direction: column;
	}
	.ac-topbar {
		padding: 8px;
	}
	.ac-game-body {
		padding: 16px 10px 20px;
	}
}

/* ---------- v0.1.6 consistency and fixes ---------- */
/* Answers: the theme forces nowrap on buttons, so long answers ran past
   their box. Let them wrap at any width. */
.ac-game-root .ac-choice {
	height: auto;
	line-height: 1.4;
}
.ac-game-root .ac-choice > span {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.ac-game-root .ac-choice::before {
	flex: 0 0 auto;
}
.ac-game-root .ac-btn {
	line-height: 1.4;
}
.ac-game-root .ac-chapter-label {
	letter-spacing: 0;
}

/* Caregiving: three boxes */
.ac-dragsort-zones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.ac-dragsort-zone {
	min-height: 96px;
}
.ac-dragsort-zone .ac-dragsort-items {
	flex-direction: column;
	align-items: stretch;
}
.ac-dragsort-zone.is-droptarget {
	border-color: var(--ac-red);
}
.ac-dragsort-pool .ac-drag-item {
	flex: 1 1 220px;
}
.ac-game-root .ac-drag-item {
	text-align: left;
	line-height: 1.4;
	flex-wrap: wrap;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.ac-drag-text {
	flex: 1 1 0;
	min-width: 0;
	overflow-wrap: anywhere;
}
.ac-drag-why {
	flex: 0 0 100%;
	font-size: 0.875rem;
	margin-top: 2px;
}
.ac-drag-item.is-dragging,
.ac-drag-item.is-dragging:active {
	opacity: 0.4;
	cursor: grabbing;
}
.ac-drag-ghost {
	cursor: grabbing;
}
.ac-drag-item:disabled {
	cursor: default;
}
.ac-drag-ghost {
	position: fixed;
	pointer-events: none;
	z-index: 999998;
	margin: 0;
	opacity: 0.95;
	box-shadow: 0 6px 16px rgba(58, 57, 56, 0.3);
}

/* Culture: tap-to-swap flag row, 8 across on desktop */
.ac-swap-grid {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 8px;
}
.ac-swap-slot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	margin: 0;
	padding: 0;
}
.ac-swap-rank {
	text-align: center;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--ac-teal);
}
.ac-swap-flag {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	width: 100%;
	min-height: var(--ac-touch);
	padding: 8px 2px;
	border: 2px solid var(--ac-teal);
	border-radius: 8px;
	background: var(--ac-white);
	color: var(--ac-text);
	text-align: center;
	line-height: 1.25;
	-webkit-tap-highlight-color: transparent;
}
.ac-swap-flag img {
	display: block;
	width: 100%;
	max-width: 52px;
	height: auto;
	max-height: 40px;
	object-fit: contain;
}
.ac-swap-name {
	font-size: 0.8125rem;
	font-weight: 400;
	overflow-wrap: break-word;
	max-width: 100%;
}
.ac-game-root .ac-swap-flag:hover {
	background: var(--ac-tint);
	border-color: var(--ac-teal);
	color: var(--ac-text);
}
.ac-swap-flag[aria-pressed="true"] {
	border-color: var(--ac-red);
	box-shadow: 0 0 0 2px var(--ac-red);
	background: var(--ac-tint);
}
.ac-swap-flag.is-correct {
	border-color: var(--ac-teal);
	background: #E4F2F6;
}
.ac-swap-flag.is-wrong {
	border-color: var(--ac-red);
	background: #FDE7E8;
}
.ac-swap-flag.is-correct::after {
	content: "\2713";
	font-weight: 900;
	color: var(--ac-teal);
}
.ac-swap-flag.is-wrong::after {
	content: "\2715";
	font-weight: 900;
	color: var(--ac-red);
}
@media (min-width: 761px) and (max-width: 900px) {
	.ac-swap-name {
		font-size: 0.75rem;
	}
}
@media (max-width: 760px) {
	.ac-swap-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
/* ---------- Reveal (Phase 2: Q + tap-to-reveal answer) ---------- */
.ac-reveal-btn {
	max-width: 280px;
}
.ac-reveal-answer {
	margin-top: 14px;
	padding: 14px;
	background: var(--ac-tint);
	border-left: 4px solid var(--ac-teal);
	border-radius: 6px;
	font-size: 0.95rem;
}

/* ---------- Image reveal (Phase 2: Agamotto-style before/after) ---------- */
.ac-evidence-figure {
	margin-top: 14px;
	text-align: center;
}
.ac-evidence-figure .ac-evidence-image,
img.ac-evidence-image {
	display: inline-block;
	max-width: 130px !important;
	width: 130px !important;
	height: auto !important;
	border-radius: 8px;
	border: 1px solid var(--ac-tint);
}
.ac-evidence-caption {
	margin-top: 6px;
	font-size: 0.8rem;
	opacity: 0.75;
}

.ac-imagereveal-figure {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--ac-tint);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--ac-tint);
	margin-bottom: 14px;
}
.ac-imagereveal-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ac-imagereveal-toggle {
	max-width: 320px;
}
.ac-imagereveal-callouts {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ac-imagereveal-callouts[hidden] {
	display: none;
}
.ac-imagereveal-callout {
	margin: 0;
	padding: 10px 14px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--ac-tint);
	border-left: 4px solid var(--ac-teal);
	border-radius: 6px;
	font-size: 0.9rem;
}
.ac-imagereveal-callout-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ac-teal);
	color: var(--ac-white);
	font-size: 0.8rem;
	font-weight: 800;
}
.ac-imagereveal-pins {
	position: absolute;
	inset: 0;
}
.ac-imagereveal-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 2px solid var(--ac-white);
	border-radius: 50%;
	background: var(--ac-red);
	color: var(--ac-white);
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.ac-imagereveal-pin:hover,
.ac-game-root .ac-imagereveal-pin:focus-visible {
	background: var(--ac-focus);
}
.ac-imagereveal-pin.is-open {
	background: var(--ac-teal);
}
.ac-imagereveal-panel {
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--ac-tint);
	border-left: 4px solid var(--ac-teal);
	border-radius: 6px;
	font-size: 0.95rem;
}
.ac-imagereveal-panel-text {
	margin: 0;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.ac-imagereveal-panel-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ac-teal);
	color: var(--ac-white);
	font-size: 0.8rem;
	font-weight: 800;
}

/* ---------- Branching (Phase 2: multi-step scenario, KELY) ---------- */
.ac-branching-prog {
	display: flex;
	gap: 5px;
	margin-bottom: 14px;
}
.ac-branching-prog span {
	height: 5px;
	flex: 1 1 0;
	background: var(--ac-tint);
	border-radius: 3px;
}
.ac-branching-prog span.on {
	background: var(--ac-teal);
}
.ac-branching-scene {
	font-size: 1rem;
	line-height: 1.55;
	margin-bottom: 14px;
}
.ac-branching-scene .who {
	font-weight: 700;
}
.ac-branching-scene .said {
	display: block;
	background: var(--ac-tint);
	border-left: 4px solid var(--ac-teal);
	padding: 10px 14px;
	border-radius: 0 6px 6px 0;
	margin: 10px 0;
	font-style: italic;
}
.ac-branching-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ac-branching-choice {
	text-align: left;
}
.ac-branching-fb {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 0.95rem;
}
.ac-branching-fb b {
	display: block;
	margin-bottom: 4px;
}
.ac-branching-fb--good {
	background: #E4F2F6;
	border-left: 4px solid var(--ac-teal);
}
.ac-branching-fb--miss {
	background: #FDE7E8;
	border-left: 4px solid var(--ac-red);
}
.ac-branching-fb--soft {
	background: var(--ac-tint);
	border-left: 4px solid var(--ac-text);
}
.ac-branching-continue {
	margin-top: 12px;
	max-width: 220px;
}
.ac-branching-end {
	text-align: center;
	padding: 10px 4px;
}
.ac-branching-badge {
	display: inline-block;
	background: var(--ac-teal);
	color: var(--ac-white);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border-radius: 12px;
	text-transform: uppercase;
}
.ac-branching-end h3 {
	font-size: 1.3rem;
	margin: 14px 0 8px;
}
.ac-branching-end p {
	font-size: 0.95rem;
	margin-bottom: 10px;
}
.ac-branching-takeaway {
	background: var(--ac-tint);
	border-left: 4px solid var(--ac-red);
	padding: 14px 16px;
	text-align: left;
	font-size: 0.9rem;
	margin: 14px 0;
	border-radius: 6px;
}

/* ---------- Phrase pick (Phase 2: Quarks "crossed a line") ---------- */
.ac-phrasepick-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ac-phrasepick-wrap {
	display: flex;
	flex-direction: column;
}
.ac-phrasepick-item {
	text-align: left;
}
/* Visual state (is-correct/is-wrong) comes from the shared .ac-choice
   rules, same as every other engine's answered state. A separate
   .is-open background here would fight is-wrong's red on a clicked
   decoy: same specificity, last-in-file wins, so a wrong pick would
   render as if it were right. */
.ac-phrasepick-reason {
	margin-top: 6px;
	padding: 10px 14px;
	background: var(--ac-tint);
	border-left: 4px solid var(--ac-teal);
	border-radius: 0 6px 6px 0;
	font-size: 0.9rem;
}
.ac-phrasepick-item.ac-phrasepick-missed {
	border-style: dashed;
}
.ac-phrasepick-missed-tag {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ac-white);
	border: 1px solid var(--ac-teal);
	color: var(--ac-teal);
	font-size: 0.75rem;
	font-weight: 700;
}
.ac-phrasepick-done {
	margin-top: 16px;
}