/**
 * DMA Übungen Plugin Styles
 * Version: 1.0.0
 *
 * Styles for interactive German language exercises.
 * Follows WordPress CSS Coding Standards and BEM methodology.
 *
 * @package    DMA_Uebungen
 * @since      1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens - version-2.md)
   ========================================================================== */

:root {
  /* Primary - Indigo */
  --dma-primary-50: #eef2ff;
  --dma-primary-100: #e0e7ff;
  --dma-primary-200: #c7d2fe;
  --dma-primary-400: #818cf8;
  --dma-primary-500: #6366f1;
  --dma-primary-600: #4f46e5;
  --dma-primary-700: #4338ca;
  --dma-primary-800: #3730a3;
  --dma-primary-900: #312e81;

  /* Success - Emerald */
  --dma-success-50: #ecfdf5;
  --dma-success-100: #d1fae5;
  --dma-success-300: #6ee7b7;
  --dma-success-400: #34d399;
  --dma-success-500: #10b981;
  --dma-success-600: #059669;
  --dma-success-700: #047857;
  --dma-success-800: #065f46;
  --dma-success-900: #064e3b;

  /* Error - Rose */
  --dma-error-50: #fff1f2;
  --dma-error-100: #ffe4e6;
  --dma-error-300: #fda4af;
  --dma-error-400: #fb7185;
  --dma-error-500: #f43f5e;
  --dma-error-600: #e11d48;
  --dma-error-800: #9f1239;
  --dma-error-900: #881337;

  /* Neutral - Slate */
  --dma-slate-50: #f8fafc;
  --dma-slate-100: #f1f5f9;
  --dma-slate-200: #e2e8f0;
  --dma-slate-300: #cbd5e1;
  --dma-slate-400: #94a3b8;
  --dma-slate-500: #64748b;
  --dma-slate-600: #475569;
  --dma-slate-700: #334155;
  --dma-slate-800: #1e293b;
  --dma-slate-900: #0f172a;

  /* Accent - Amber */
  --dma-amber-50: #fffbeb;
  --dma-amber-100: #fef3c7;
  --dma-amber-200: #fde68a;
  --dma-amber-400: #fbbf24;
  --dma-amber-500: #f59e0b;
  --dma-amber-600: #d97706;
  --dma-amber-700: #b45309;

  /* Purple (cheatsheet) */
  --dma-purple-50: #faf5ff;
  --dma-purple-100: #f3e8ff;
  --dma-purple-600: #9333ea;
  --dma-purple-700: #7e22ce;

  /* Orange (warnings) */
  --dma-orange-50: #fff7ed;
  --dma-orange-500: #f97316;

  /* Background - Warm Cream */
  --dma-bg-warm: #fdfbf7;
  --dma-border-warm: #f3e9d2;

  /* Spacing */
  --dma-radius-sm: 8px;
  --dma-radius-md: 12px;
  --dma-radius-lg: 16px;
  --dma-radius-xl: 20px;
  --dma-radius-2xl: 24px;
  --dma-radius-3xl: 24px;

  /* Shadows */
  --dma-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --dma-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --dma-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --dma-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --dma-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Milestone Color Schemes (BUG-039) */
  /* Milestone 1: Soft blue - calm encouragement */
  --milestone-1-bg-start: #E3F2FD;
  --milestone-1-bg-end: #BBDEFB;
  --milestone-1-accent: #2196F3;

  /* Milestone 2: Warm orange - rising momentum */
  --milestone-2-bg-start: #FFF3E0;
  --milestone-2-bg-end: #FFE0B2;
  --milestone-2-accent: #FF9800;

  /* Milestone 3: Victory gold - celebration */
  --milestone-3-bg-start: #FFF8E1;
  --milestone-3-bg-end: #FFECB3;
  --milestone-3-accent: #FFC107;
}

/* ==========================================================================
   Animation Utilities
   ========================================================================== */

@keyframes dma-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dma-slide-in-bottom {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes dma-zoom-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes dma-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.dma-animate-fade-in {
  animation: dma-fade-in 0.3s ease-out;
}

.dma-animate-slide-in {
  animation: dma-slide-in-bottom 0.5s ease-out;
}

.dma-animate-zoom-in {
  animation: dma-zoom-in 0.3s ease-out;
}

.dma-animate-bounce {
  animation: dma-bounce 1s ease-in-out infinite;
}

/* ==========================================================================
   Typography Utilities
   ========================================================================== */

.dma-font-black {
  font-weight: 900;
}

.dma-text-8xl {
  font-size: 6rem; /* 96px */
  line-height: 1;
}

.dma-text-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 1.2;
}

/* ==========================================================================
   Container Styles
   ========================================================================== */

.dma-uebung {
	max-width: 800px;
	margin: 0 auto;
	padding: 1rem;
}

/* ==========================================================================
   Noscript Warning
   ========================================================================== */

.dma-noscript {
	padding: 1rem;
	background-color: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #856404;
	text-align: center;
	margin-bottom: 1rem;
	font-weight: 500;
}

/* ==========================================================================
   Exercise Section
   ========================================================================== */

.dma-exercise {
	margin-bottom: 2rem;
	padding: 1.5rem;
	border: 1px solid #e0e0e0;
	border-radius: var(--dma-radius-3xl);
	background-color: #ffffff;
	box-shadow: var(--dma-shadow-sm);
}

.dma-exercise__title {
	margin: 0 0 1rem 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
}

.dma-exercise__question {
	margin-bottom: 1.5rem;
	font-size: 1rem;
	line-height: 1.6;
	color: #555;
}

/* ==========================================================================
   Choice Buttons (Single/Multiple Choice)
   ========================================================================== */

/* Single Choice Container */
.dma-single-choice {
	margin-top: 1rem;
}

/* Category/Instruction Tag */
.dma-category-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--dma-primary-50);
	border: 1px solid var(--dma-primary-200);
	border-radius: var(--dma-radius-lg);
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--dma-primary-700);
}

.dma-choice-options {
	display: flex;
	flex-direction: column;
	gap: 1rem; /* Increased from 0.75rem for card spacing */
}

/* Choice Buttons - Mobile-First with 48px min height (R-27) */
.dma-choice-button {
	display: flex;
	align-items: center;
	justify-content: space-between; /* Push radio to right */
	width: 100%;
	min-height: 48px;
	padding: 0.875rem 1.25rem;
	border: 2px solid var(--dma-slate-300);
	border-radius: var(--dma-radius-2xl); /* 16px for card style */
	background: #ffffff;
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 1rem;
	font-weight: 500;
	font-family: inherit;
	color: #333;
	box-shadow: var(--dma-shadow-sm); /* Elevated card effect */
}

/* Radio Button Indicator - Positioned on RIGHT */
.dma-choice-button::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--dma-slate-300);
	border-radius: 50%;
	margin-left: 12px; /* Changed from margin-right */
	flex-shrink: 0;
	order: 2; /* Move to right side */
}

.dma-choice-button:hover:not(:disabled) {
	border-color: var(--dma-primary-600);
	background-color: #f8f9fa;
	transform: translateY(-1px);
	box-shadow: var(--dma-shadow-md);
}

.dma-choice-button:focus {
	outline: none;
	border-color: var(--dma-primary-600);
	box-shadow: 0 0 0 3px var(--dma-primary-200);
}

.dma-choice-button:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

/* Selected State (before submission) - matches version-2 OptionButton */
.dma-choice-button--selected {
	border-color: var(--dma-primary-600);
	border-width: 2px;
	background-color: var(--dma-primary-50);
	color: var(--dma-primary-900);
	box-shadow: var(--dma-shadow-md), 0 0 0 1px var(--dma-primary-200); /* ring-1 ring-indigo-200 */
}

.dma-choice-button--selected::before {
	border-color: var(--dma-primary-600);
	background-color: var(--dma-primary-600);
}

/* Correct Answer State - matches version-2 OptionButton */
.dma-choice-button--correct {
	border-color: var(--dma-success-500);
	border-width: 2px;
	background-color: var(--dma-success-50);
	color: var(--dma-success-900);
	box-shadow: var(--dma-shadow-sm);
}

.dma-choice-button--correct::before {
	border-color: var(--dma-success-500);
	background-color: var(--dma-success-500);
	display: none; /* Remove redundant circle - background + icon is sufficient */
}

.dma-choice-button--correct::after {
	content: '✓';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background-color: #ffffff;
	border-radius: 50%;
	color: var(--dma-success-600);
	font-weight: bold;
	font-size: 0.875rem;
	margin-left: 0.5rem;
	order: 3;
}

/* Incorrect Answer State - matches version-2 OptionButton */
.dma-choice-button--incorrect {
	border-color: var(--dma-error-400);
	border-width: 2px;
	background-color: var(--dma-error-50);
	color: var(--dma-error-900);
	box-shadow: var(--dma-shadow-sm);
}

.dma-choice-button--incorrect::before {
	border-color: var(--dma-error-400);
	background-color: var(--dma-error-400);
	display: none; /* Remove redundant circle - background + icon is sufficient */
}

.dma-choice-button--incorrect::after {
	content: '✗';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background-color: #ffffff;
	border-radius: 50%;
	color: var(--dma-error-600);
	font-weight: bold;
	font-size: 0.875rem;
	margin-left: 0.5rem;
	order: 3;
}

/* BUG-022: Show correct answer when user selects wrong answer */
.dma-choice-button--show-correct {
	border-color: var(--dma-success-500) !important;
	border-width: 2px !important;
	background-color: rgba(34, 197, 94, 0.08) !important;
}

.dma-choice-button--show-correct::before {
	border-color: var(--dma-success-500);
	background-color: var(--dma-success-50);
	display: none; /* Remove redundant circle - background + icon is sufficient */
}

.dma-choice-button--show-correct::after {
	content: '✓';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background-color: #ffffff;
	border-radius: 50%;
	color: var(--dma-success-600);
	font-weight: bold;
	font-size: 0.875rem;
	margin-left: 0.5rem;
	order: 3;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.dma-check-button {
	padding: 0.75rem 2rem;
	background-color: var(--dma-primary-600);
	color: #ffffff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	margin-top: 1rem;
	transition: background-color 0.2s ease;
}

.dma-check-button:hover {
	background-color: #0052a3;
}

.dma-check-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

.dma-check-button:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

.dma-next-button {
	padding: 0.75rem 2rem;
	background-color: var(--dma-success-500);
	color: #ffffff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	margin-top: 1rem;
	transition: background-color 0.2s ease;
}

.dma-next-button:hover {
	background-color: #218838;
}

/* ==========================================================================
   Error & Success Messages
   ========================================================================== */

.dma-error {
	color: var(--dma-error-400);
	padding: 0.75rem;
	background: var(--dma-error-50);
	border: 1px solid #f5c6cb;
	border-radius: 4px;
	margin: 1rem 0;
}

.dma-success {
	color: var(--dma-success-900);
	padding: 0.75rem;
	background: var(--dma-success-50);
	border: 1px solid #c3e6cb;
	border-radius: 4px;
	margin: 1rem 0;
}

/* ==========================================================================
   Progress Bar
   ========================================================================== */

.dma-progress-bar {
	height: 8px;
	background-color: #e0e0e0;
	border-radius: 4px;
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.dma-progress-fill {
	height: 100%;
	background-color: var(--dma-success-500);
	transition: width 0.3s ease;
}

/* ==========================================================================
   Word Marking Exercise (Legacy - keeping for backward compatibility)
   ========================================================================== */

.dma-word {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	margin: 0.125rem;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	user-select: none;
}

.dma-word:hover {
	background-color: #e0e0e0;
}

.dma-word--marked {
	background-color: var(--dma-primary-600);
	color: #ffffff;
}

.dma-word--correct {
	background-color: var(--dma-success-500);
	color: #ffffff;
}

.dma-word--incorrect {
	background-color: var(--dma-error-400);
	color: #ffffff;
}

/* ==========================================================================
   Mark Words Exercise (React Component - R-26 Granular Feedback)
   ========================================================================== */

/* Container for mark words exercise */
.dma-mark-words {
	margin-top: 1rem;
}

/* Flexbox container for words with gap */
.dma-mark-words-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: transparent;
	border-radius: var(--dma-radius-3xl);
	border: none;
}

/* Individual word spans - Mobile-First with min 48px height (R-27) */
.dma-mark-word {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1rem;
	border: 2px solid var(--dma-slate-300);
	border-radius: var(--dma-radius-3xl);
	background: #ffffff;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 1rem;
	font-weight: 500;
	color: #333;
	user-select: none;
	box-shadow: var(--dma-shadow-sm);
}

.dma-mark-word:hover:not([aria-disabled="true"]) {
	border-color: var(--dma-primary-600);
	background-color: #f8f9fa;
	transform: translateY(-1px);
	box-shadow: var(--dma-shadow-md);
}

.dma-mark-word:focus {
	outline: none;
	border-color: var(--dma-primary-600);
	box-shadow: 0 0 0 3px var(--dma-primary-200);
}

.dma-mark-word[aria-disabled="true"] {
	cursor: not-allowed;
}

/* Selected State (before submission) */
.dma-mark-word--selected {
	border-color: var(--dma-primary-600);
	border-width: 3px;
	background-color: var(--dma-primary-50);
	box-shadow: var(--dma-shadow-lg);
	font-weight: 600;
}

/* BUG-027: Four Distinct Visual States After Submission */

/* 1. Correct Hit (True Positive): Selected AND is target word */
/* Green background + checkmark */
.dma-mark-word--correct-hit {
	border-color: var(--dma-success-500);
	border-width: 3px;
	background-color: var(--dma-success-50);
	color: var(--dma-success-900);
	box-shadow: var(--dma-shadow-lg);
	font-weight: 600;
}

.dma-mark-word--correct-hit::after {
	content: ' ✓';
	color: var(--dma-success-500);
	font-weight: bold;
	font-size: 1.125rem;
	margin-left: 0.25rem;
}

/* 2. False Positive: Selected BUT NOT a target word */
/* Red background + X + strikethrough */
.dma-mark-word--false-positive {
	border-color: var(--dma-error-400);
	border-width: 3px;
	background-color: var(--dma-error-50);
	color: var(--dma-error-900);
	box-shadow: var(--dma-shadow-lg);
	font-weight: 600;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.dma-mark-word--false-positive::after {
	content: ' ✗';
	color: var(--dma-error-400);
	font-weight: bold;
	font-size: 1.125rem;
	margin-left: 0.25rem;
	text-decoration: none;
}

/* 3. Missed (False Negative): NOT selected BUT is a target word */
/* Amber/yellow background + arrow indicator + pulse animation */
.dma-mark-word--missed {
	border-color: #f59e0b;
	border-width: 3px;
	background-color: #fef3c7;
	color: #92400e;
	box-shadow: var(--dma-shadow-lg);
	font-weight: 600;
	animation: dma-pulse-missed 2s ease-in-out infinite;
}

.dma-mark-word--missed::after {
	content: ' →';
	color: #f59e0b;
	font-weight: bold;
	font-size: 1.125rem;
	margin-left: 0.25rem;
}

@keyframes dma-pulse-missed {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
	}
}

/* 4. Neutral (True Negative): NOT selected AND NOT a target */
/* Faded gray - baseline state, NOT an achievement */
.dma-mark-word--neutral {
	opacity: 0.4;
	cursor: default;
	border-color: var(--dma-slate-200);
	background-color: #f9fafb;
	color: #6b7280;
}

/* Legacy classes for backward compatibility - map to new states */
.dma-mark-word--correct {
	border-color: var(--dma-success-500);
	border-width: 3px;
	background-color: var(--dma-success-50);
	color: var(--dma-success-900);
	box-shadow: var(--dma-shadow-lg);
	font-weight: 600;
}

.dma-mark-word--correct::after {
	content: ' ✓';
	color: var(--dma-success-500);
	font-weight: bold;
	font-size: 1.125rem;
	margin-left: 0.25rem;
}

.dma-mark-word--incorrect {
	border-color: var(--dma-error-400);
	border-width: 3px;
	background-color: var(--dma-error-50);
	color: var(--dma-error-900);
	box-shadow: var(--dma-shadow-lg);
	font-weight: 600;
}

.dma-mark-word--incorrect::after {
	content: ' ✗';
	color: var(--dma-error-400);
	font-weight: bold;
	font-size: 1.125rem;
	margin-left: 0.25rem;
}

/* Submit button */
.dma-mark-words-submit {
	width: 100%;
	min-height: 48px;
}

/* ==========================================================================
   Mark Words - Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.dma-mark-word {
		font-size: 0.9rem;
		padding: 0.625rem 0.875rem;
		min-height: 44px;
	}

	.dma-mark-words-container {
		gap: 0.375rem;
		padding: 0.75rem;
	}
}

@media (max-width: 480px) {
	.dma-mark-word {
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
		min-height: 40px;
	}

	.dma-mark-words-container {
		gap: 0.25rem;
		padding: 0.5rem;
	}
}

/* ==========================================================================
   Mark Words - Accessibility
   ========================================================================== */

/* Focus visible for keyboard navigation */
.dma-mark-word:focus-visible {
	outline: 2px solid var(--dma-primary-600);
	outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-mark-word {
		border-width: 3px;
	}

	.dma-mark-word--selected,
	.dma-mark-word--correct,
	.dma-mark-word--incorrect {
		border-width: 4px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.dma-mark-word {
		transition: none;
	}

	.dma-mark-word:hover:not([aria-disabled="true"]) {
		transform: none;
	}
}

/* ==========================================================================
   Cloze/Dropdown Exercises (React Component - T30)
   ========================================================================== */

/* Container for cloze exercise */
.dma-cloze-dropdown {
	margin-top: 1rem;
}

/* Cloze sentence container */
.dma-cloze-container {
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	background: transparent;
	border-radius: var(--dma-radius-3xl);
	border: none;
}

.dma-cloze-sentence {
	font-size: 1.125rem;
	line-height: 2.5;
	color: #333;
}

/* Text segments */
.dma-cloze-text {
	display: inline;
}

/* Inline gap buttons - Mobile-First with min 48px (R-27) */
.dma-cloze-gap {
	display: inline-block;
	min-height: 48px;
	min-width: 60px;
	padding: 0.5rem 1rem;
	margin: 0 0.25rem;
	border: 2px solid #cbd5e1;
	border-radius: 12px;
	background: #f8fafc;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	vertical-align: middle;
	box-shadow: var(--dma-shadow-sm);
}

.dma-cloze-gap:hover:not(:disabled) {
	border-color: #6366f1;
	background: #eef2ff;
	transform: translateY(-1px);
	box-shadow: var(--dma-shadow-md); /* Original: 0 4px 8px rgba(99, 102, 241, 0.15); */
}

.dma-cloze-gap:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.dma-cloze-gap:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

/* Filled state (before submission) */
.dma-cloze-gap--filled {
	border-color: #6366f1;
	border-width: 3px;
	background: #eef2ff;
	color: #4338ca;
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(99, 102, 241, 0.25); */
}

/* Correct state (R-26: Individual feedback after submission) */
.dma-cloze-gap--correct {
	border-color: #22c55e;
	border-width: 3px;
	background: #dcfce7;
	color: #166534;
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(34, 197, 94, 0.25); */
}

.dma-cloze-gap--correct::after {
	content: ' ✓';
	color: #22c55e;
	font-weight: bold;
	font-size: 1.125rem;
	margin-left: 0.25rem;
}

/* Incorrect state (R-26: Individual feedback after submission) */
.dma-cloze-gap--incorrect {
	border-color: #ef4444;
	border-width: 3px;
	background: #fee2e2;
	color: #991b1b;
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(239, 68, 68, 0.25); */
}

.dma-cloze-gap--incorrect::after {
	content: ' ✗';
	color: #ef4444;
	font-weight: bold;
	font-size: 1.125rem;
	margin-left: 0.25rem;
}

/* Submit button */
.dma-cloze-submit {
	width: 100%;
	min-height: 48px;
	margin-top: 1rem;
}

/* Bottom Sheet Overlay (R-22) */
.dma-bottom-sheet-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(15, 23, 42, 0.4);
	/* backdrop-filter removed - BUG-049: sentence must remain readable */
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Bottom Sheet Container */
.dma-bottom-sheet {
	position: relative;
	width: 100%;
	max-width: 600px;
	background: #ffffff;
	border-radius: 24px 24px 0 0;
	padding: 24px;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
	animation: slideInFromBottom 0.3s ease-out;
	max-height: 80vh;
	overflow-y: auto;
}

@keyframes slideInFromBottom {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

/* Handle bar at top of sheet */
.dma-bottom-sheet-handle {
	width: 48px;
	height: 6px;
	background: #e2e8f0;
	border-radius: 3px;
	margin: 0 auto 24px;
}

/* Bottom sheet title */
.dma-bottom-sheet-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #1e293b;
	text-align: center;
	margin-bottom: 20px;
}

/* Options container */
.dma-bottom-sheet-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Option buttons - Large touch targets (R-27) */
.dma-bottom-sheet-option {
	width: 100%;
	min-height: 56px;
	padding: 16px 20px;
	font-size: 1.25rem;
	font-weight: 600;
	font-family: inherit;
	color: #1e293b;
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: var(--dma-radius-3xl);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	box-shadow: var(--dma-shadow-sm);
}

.dma-bottom-sheet-option:hover {
	border-color: #6366f1;
	background: #eef2ff;
	transform: translateY(-2px);
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(99, 102, 241, 0.2); */
}

.dma-bottom-sheet-option:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.dma-bottom-sheet-option:active {
	transform: translateY(0);
}

/* ========================================
   Desktop Dropdown (≥768px)
   ======================================== */

.dma-dropdown-overlay {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: transparent;
}

.dma-dropdown-menu {
	z-index: 100;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	padding: 8px;
	max-height: 280px;
	overflow-y: auto;
}

.dma-dropdown-options {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dma-dropdown-option {
	width: 100%;
	padding: 12px 16px;
	font-size: 1rem;
	font-weight: 500;
	color: #1e293b;
	text-align: left;
	background: #ffffff;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.dma-dropdown-option:hover {
	background: #eef2ff;
	border-color: #6366f1;
}

.dma-dropdown-option:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.dma-dropdown-option:active {
	transform: scale(0.98);
}

/* Legacy styles (backward compatibility) */
.dma-cloze-select {
	padding: 0.25rem 0.5rem;
	border: 2px solid var(--dma-primary-600);
	border-radius: 4px;
	background: #ffffff;
	font-size: inherit;
	font-family: inherit;
	cursor: pointer;
	margin: 0 0.25rem;
}

.dma-cloze-select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.dma-cloze-select--correct {
	border-color: var(--dma-success-500);
	background-color: var(--dma-success-50);
}

.dma-cloze-select--incorrect {
	border-color: var(--dma-error-400);
	background-color: var(--dma-error-50);
}

/* ==========================================================================
   Fill Gap Input
   ========================================================================== */

.dma-fill-input {
	padding: 0.5rem;
	border: 2px solid #e0e0e0;
	border-radius: 4px;
	font-size: inherit;
	font-family: inherit;
	min-width: 150px;
	transition: border-color 0.2s ease;
}

.dma-fill-input:focus {
	border-color: var(--dma-primary-600);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.dma-fill-input--correct {
	border-color: var(--dma-success-500);
	background-color: var(--dma-success-50);
}

.dma-fill-input--incorrect {
	border-color: var(--dma-error-400);
	background-color: var(--dma-error-50);
}

/* ==========================================================================
   Drag and Drop / Sorting (React Component - T31)
   ========================================================================== */

/* Container for drag sort exercise */
.dma-drag-sort {
	margin-top: 1rem;
}

/* Pool area (unplaced items) */
.dma-drag-pool {
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: transparent;
	border-radius: 12px;
	border: none;
}

.dma-drag-pool-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 1rem;
}

.dma-drag-pool-items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	min-height: 60px;
}

.dma-drag-pool-empty {
	color: #94a3b8;
	font-style: italic;
	padding: 1rem;
	text-align: center;
}

/* Individual draggable items - Mobile-First with min 48px (R-27) */
.dma-drag-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	background: #ffffff;
	border: 2px solid #94a3b8;
	border-radius: var(--dma-radius-3xl);
	cursor: grab;
	transition: all 0.2s ease;
	user-select: none;
	font-size: 1rem;
	font-weight: 500;
	color: #334155;
	box-shadow: var(--dma-shadow-sm);
}

.dma-drag-item:hover {
	border-color: #6366f1;
	background: #fefefe;
	transform: translateY(-2px);
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(99, 102, 241, 0.2); */
}

.dma-drag-item:active {
	cursor: grabbing;
}

/* Item being dragged (original element becomes semi-transparent) */
.dma-drag-item--dragging {
	opacity: 0.3;
	cursor: grabbing;
}

/* Per-item feedback after submission (R-26) */
.dma-drag-item--correct {
	border-color: #22c55e;
	border-width: 3px;
	background: #dcfce7;
	color: #166534;
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(34, 197, 94, 0.25); */
	cursor: not-allowed;
}

.dma-drag-item--correct::after {
	content: ' ✓';
	color: #22c55e;
	font-weight: bold;
	font-size: 1.125rem;
	margin-left: 0.25rem;
}

.dma-drag-item--incorrect {
	border-color: #ef4444;
	border-width: 3px;
	background: #fee2e2;
	color: #991b1b;
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(239, 68, 68, 0.25); */
	cursor: not-allowed;
}

.dma-drag-item--incorrect::after {
	content: ' ✗';
	color: #ef4444;
	font-weight: bold;
	font-size: 1.125rem;
	margin-left: 0.25rem;
}

/* Ghost element (follows pointer with 80px offset) */
.dma-drag-ghost {
	padding: 0.75rem 1.25rem;
	background: #6366f1;
	color: #ffffff;
	border: 2px solid #4f46e5;
	border-radius: var(--dma-radius-3xl);
	font-size: 1rem;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
	white-space: nowrap;
	pointer-events: none;
}

/* Buckets container */
.dma-drag-buckets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

/* Individual bucket (drop zone) */
.dma-drag-bucket {
	min-height: 150px;
	padding: 1rem;
	background: transparent;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	transition: all 0.2s ease;
}

.dma-drag-bucket-label {
	font-size: 1rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 0.75rem;
	text-align: center;
	padding: 0.5rem;
	background: #e2e8f0;
	border-radius: 6px;
}

.dma-drag-bucket-items {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 80px;
}

.dma-drag-bucket-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	color: #94a3b8;
	font-style: italic;
	font-size: 0.875rem;
	text-align: center;
	padding: 1rem;
}

/* Bucket highlighted during drag */
.dma-drag-bucket--hovered {
	border-color: #6366f1;
	border-style: solid;
	background: #eef2ff;
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

/* Color variants for buckets */
.dma-drag-bucket--blue .dma-drag-bucket-label {
	background: #dbeafe;
	color: #1e40af;
}

.dma-drag-bucket--blue.dma-drag-bucket--hovered {
	background: #dbeafe;
	border-color: #3b82f6;
}

.dma-drag-bucket--orange .dma-drag-bucket-label {
	background: #fed7aa;
	color: #9a3412;
}

.dma-drag-bucket--orange.dma-drag-bucket--hovered {
	background: #fed7aa;
	border-color: #f97316;
}

.dma-drag-bucket--green .dma-drag-bucket-label {
	background: #d1fae5;
	color: #065f46;
}

.dma-drag-bucket--green.dma-drag-bucket--hovered {
	background: #d1fae5;
	border-color: #10b981;
}

.dma-drag-bucket--red .dma-drag-bucket-label {
	background: #fecaca;
	color: #991b1b;
}

.dma-drag-bucket--red.dma-drag-bucket--hovered {
	background: #fecaca;
	border-color: #ef4444;
}

.dma-drag-bucket--purple .dma-drag-bucket-label {
	background: #e9d5ff;
	color: #6b21a8;
}

.dma-drag-bucket--purple.dma-drag-bucket--hovered {
	background: #e9d5ff;
	border-color: #a855f7;
}

/* Submit button */
.dma-drag-sort-submit {
	width: 100%;
	min-height: 48px;
	margin-top: 1rem;
}

/* ==========================================================================
   Drag Sort - Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
	/* BUG-048: Horizontal swipeable bucket carousel for mobile
	   - Eliminates need for page scrolling during drag
	   - Native scroll-snap works perfectly on iOS Safari
	   - Natural mobile UX pattern (carousel) */
	.dma-drag-buckets {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 1rem;
		padding: 1rem 0.5rem;
		margin: 0;
		width: 100%;
		/* Hide scrollbar but keep functionality */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.dma-drag-buckets::-webkit-scrollbar {
		display: none;
	}

	.dma-drag-bucket {
		flex: 0 0 calc(100vw - 2.5rem);
		scroll-snap-align: center;
		min-height: 180px;
		max-height: 280px;
		overflow-y: auto;
		position: relative;
		padding: 1rem 2.5rem;
	}

	/* Visual hint that there are more buckets (right edge indicator) */
	.dma-drag-bucket:not(:last-child)::after {
		content: '›';
		position: absolute;
		right: 0.5rem;
		top: 50%;
		transform: translateY(-50%);
		font-size: 2.5rem;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.4);
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50px;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 8px 16px rgba(39, 39, 39, 0.1);
		pointer-events: none;
		line-height: 1;
		z-index: 10;
	}

	/* Left hint on non-first buckets */
	.dma-drag-bucket:not(:first-child)::before {
		content: '‹';
		position: absolute;
		left: 0.5rem;
		top: 50%;
		transform: translateY(-50%);
		font-size: 2.5rem;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.4);
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50px;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 8px 16px rgba(39, 39, 39, 0.1);
		pointer-events: none;
		line-height: 1;
		z-index: 10;
	}

	.dma-drag-pool {
		padding: 1rem;
	}

	.dma-drag-item {
		font-size: 0.9rem;
		padding: 0.625rem 1rem;
		min-height: 44px;
	}

	.dma-drag-ghost {
		font-size: 0.9rem;
		padding: 0.625rem 1rem;
	}

	/* BUG-048: Allow horizontal swiping on bucket content area
	   The bucket-items container allows pan-x so horizontal swipes pass through
	   to the parent carousel. Items inside still capture touch for drag. */
	.dma-drag-bucket-items {
		touch-action: pan-x;
	}

	/* Empty bucket area should also allow swipe */
	.dma-drag-bucket-empty {
		touch-action: pan-x;
	}

	/* Pool highlight when dragging (visual feedback for return-to-pool) */
	.dma-drag-sort[data-dragging="true"] .dma-drag-pool {
		border: 2px dashed #94a3b8;
		border-radius: 12px;
		background: #f8fafc;
	}
}

@media (max-width: 480px) {
	.dma-drag-pool-items {
		gap: 0.5rem;
	}

	.dma-drag-item {
		font-size: 0.875rem;
		padding: 0.5rem 0.875rem;
		min-height: 40px;
	}

	.dma-drag-ghost {
		font-size: 0.875rem;
		padding: 0.5rem 0.875rem;
	}

	/* Smaller bucket on very small screens */
	.dma-drag-bucket {
		flex: 0 0 calc(100vw - 2rem);
		min-height: 160px;
		max-height: 250px;
		padding: 0.75rem;
	}
}

/* ==========================================================================
   Drag Sort - Edge Scroll Indicators (BUG-048)
   Desktop only - mobile uses horizontal carousel instead
   ========================================================================== */

/* Edge-scroll indicators (shown during drag) - DESKTOP ONLY */
@media (min-width: 769px) {
	.dma-drag-sort[data-dragging="true"]::before,
	.dma-drag-sort[data-dragging="true"]::after {
		content: '';
		position: fixed;
		left: 0;
		right: 0;
		height: 80px;
		pointer-events: none;
		opacity: 0.5;
		z-index: 10;
		transition: opacity 0.3s ease;
	}

	.dma-drag-sort[data-dragging="true"]::before {
		top: 0;
		background: linear-gradient(to bottom, rgba(59, 130, 246, 0.3), transparent);
	}

	.dma-drag-sort[data-dragging="true"]::after {
		bottom: 0;
		background: linear-gradient(to top, rgba(59, 130, 246, 0.3), transparent);
	}
}

/* ==========================================================================
   Drag Sort - Accessibility
   ========================================================================== */

/* Focus visible for keyboard navigation */
.dma-drag-item:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-drag-item {
		border-width: 3px;
	}

	.dma-drag-bucket {
		border-width: 4px;
	}

	.dma-drag-item--correct,
	.dma-drag-item--incorrect {
		border-width: 4px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.dma-drag-item,
	.dma-drag-bucket {
		transition: none;
	}

	.dma-drag-item:hover {
		transform: none;
	}
}

/* ==========================================================================
   DragOrder - Position-Based Feedback (T63)
   ========================================================================== */

/* Per-position feedback - correct position */
.dma-drag-position--correct {
	border-color: #22c55e;
	border-width: 3px;
	background: #dcfce7;
	box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

/* Per-position feedback - incorrect position */
.dma-drag-position--incorrect {
	border-color: #ef4444;
	border-width: 3px;
	background: #fee2e2;
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

/* Solution display - position list */
.dma-inline-feedback-solution-positions {
	margin-top: 0.75rem;
}

.dma-inline-solution-position {
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	background: #f8fafc;
	border-radius: 6px;
}

.dma-inline-solution-position-label {
	font-weight: 600;
	color: #1e293b;
	display: block;
	margin-bottom: 0.25rem;
}

.dma-inline-solution-position-item {
	font-size: 0.95rem;
	color: #475569;
}

/* ==========================================================================
   Legacy Drag and Drop Styles (kept for backward compatibility)
   ========================================================================== */

.dma-bucket {
	min-height: 100px;
	padding: 1rem;
	margin: 0.5rem 0;
	background: transparent;
	border: 2px solid #e2e8f0;
	border-radius: var(--dma-radius-3xl);
	transition: all 0.2s ease;
}

.dma-bucket--active {
	border-color: var(--dma-primary-600);
	background-color: var(--dma-primary-50);
}

.dma-bucket-label {
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #333;
}

/* ==========================================================================
   Media Elements
   ========================================================================== */

.dma-exercise-audio,
.dma-exercise-image {
	max-width: 100%;
	margin-bottom: 1rem;
}

.dma-exercise-image {
	max-height: 40vh;
	height: auto;
	display: block;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dma-exercise-audio {
	width: 100%;
}

/* ==========================================================================
   Anna Messages (Tips, Intro, Success)
   ========================================================================== */

.dma-anna-tip,
.dma-anna-intro,
.dma-anna-success {
	padding: 1rem;
	background-color: var(--dma-primary-50);
	border-left: 4px solid var(--dma-primary-600);
	border-radius: 0 4px 4px 0;
	margin: 1rem 0;
	line-height: 1.6;
}

.dma-anna-label,
.dma-anna-tip-label {
	font-weight: 600;
	color: var(--dma-primary-600);
	display: block;
	margin-bottom: 0.5rem;
}

.dma-anna-success {
	background-color: var(--dma-success-50);
	border-left-color: var(--dma-success-500);
}

.dma-anna-success .dma-anna-label {
	color: var(--dma-success-500);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
	.dma-uebung {
		padding: 0.5rem;
	}

	.dma-exercise {
		padding: 1rem;
	}

	.dma-choice-button {
		font-size: 0.9rem;
	}

	.dma-check-button,
	.dma-next-button {
		width: 100%;
		padding: 0.75rem 1rem;
	}

	.dma-drag-item {
		display: block;
		margin: 0.5rem 0;
	}
}

/* ==========================================================================
   Accessibility Improvements
   ========================================================================== */

/* Focus visible for keyboard navigation */
.dma-choice-button:focus-visible,
.dma-check-button:focus-visible,
.dma-word:focus-visible,
.dma-fill-input:focus-visible {
	outline: 2px solid var(--dma-primary-600);
	outline-offset: 2px;
}

/* Screen reader only text */
.dma-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-choice-button {
		border-width: 3px;
	}

	.dma-choice-button--selected {
		border-width: 3px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.dma-choice-button,
	.dma-check-button,
	.dma-next-button,
	.dma-progress-fill,
	.dma-word,
	.dma-drag-item,
	.dma-bucket {
		transition: none;
	}
}

/* ==========================================================================
   React Component Styles
   ========================================================================== */

/* Loading State */
.dma-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
	text-align: center;
}

.dma-loading-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #e0e0e0;
	border-top-color: var(--dma-primary-600);
	border-radius: 50%;
	animation: dma-spin 1s linear infinite;
	margin-bottom: 1rem;
}

@keyframes dma-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Intro Screen */
.dma-intro-screen {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: auto;
	padding: 1.5rem 1rem 2rem;
	background: linear-gradient(135deg, var(--dma-primary-50) 0%, #ffffff 100%);
	border-radius: var(--dma-radius-3xl);
	margin-bottom: 2rem;
}

.dma-intro-content {
	max-width: 600px;
	width: 100%;
	text-align: center;
}

.dma-intro-title,
.dma-finish-title {
	font-size: 2.25rem; /* 36px - text-4xl */
	font-weight: 900; /* font-black */
	color: var(--dma-slate-800);
	margin-bottom: 1.5rem;
}

.dma-intro-emoji,
.dma-finish-emoji {
	font-size: 6rem; /* 96px - text-8xl */
	line-height: 1;
	margin-bottom: 1rem;
}

.dma-intro-anna {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 1rem;
	margin: 0.5rem 0 1.5rem;
	text-align: left;
}

.dma-anna-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--dma-primary-200);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dma-anna-bubble {
	background: #ffffff;
	padding: 1rem 1.5rem;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	flex: 1;
	max-width: 400px;
}

.dma-anna-bubble::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 20px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid #ffffff;
}

.dma-anna-bubble p {
	margin: 0;
	line-height: 1.6;
	color: #555;
}

.dma-intro-meta {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin: 2rem 0;
	flex-wrap: wrap;
}

.dma-meta-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #555;
}

.dma-meta-icon {
	font-size: 1.5rem;
}

.dma-meta-text {
	font-weight: 500;
}

/* ==========================================================================
   Intro Screen Preview (T61)
   ========================================================================== */

.dma-intro-preview {
	margin: 2rem 0;
	text-align: left;
}

.dma-intro-preview-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--dma-slate-700);
	margin-bottom: 1rem;
	text-align: center;
}

.dma-intro-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.dma-meta-card {
	background: white;
	border: 1px solid var(--dma-slate-200);
	border-radius: var(--dma-radius-md);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	box-shadow: var(--dma-shadow-sm);
	transition: all 0.2s ease;
}

.dma-meta-card:hover {
	box-shadow: var(--dma-shadow-md);
	transform: translateY(-2px);
}

.dma-meta-card--full {
	grid-column: 1 / -1;
}

.dma-meta-icon {
	font-size: 1.5rem;
}

.dma-meta-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dma-slate-500);
	font-weight: 600;
}

.dma-meta-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--dma-primary-600);
}

.dma-meta-types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 0.5rem;
}

.dma-meta-type-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--dma-primary-50);
	color: var(--dma-primary-700);
	border-radius: var(--dma-radius-sm);
	font-size: 0.875rem;
	font-weight: 500;
	border: 1px solid var(--dma-primary-200);
}

/* Button Styles */
.dma-btn {
	padding: 0.875rem 2rem;
	border: none;
	border-radius: var(--dma-radius-3xl);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	font-family: inherit;
}

.dma-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

.dma-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dma-btn-primary {
	background-color: var(--dma-primary-600);
	color: #ffffff;
}

.dma-btn-primary:hover:not(:disabled) {
	background-color: #0052a3;
	transform: translateY(-1px);
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(0, 102, 204, 0.3); */
}

.dma-btn-success {
	background-color: var(--dma-success-500);
	color: #ffffff;
}

.dma-btn-success:hover:not(:disabled) {
	background-color: #218838;
}

.dma-btn-danger {
	background-color: var(--dma-error-400);
	color: #ffffff;
}

.dma-btn-danger:hover:not(:disabled) {
	background-color: #c82333;
}

/* Enhanced Start Button - BUG-025 */
.dma-btn-start {
	/* Size & Typography */
	font-size: 1.125rem;
	font-weight: 700;
	padding: 1rem 2.5rem;
	min-width: 240px;

	/* Visual Enhancement - subtle gradient */
	background: linear-gradient(135deg, var(--dma-primary-600) 0%, var(--dma-primary-700) 100%);
	box-shadow:
		0 2px 8px rgba(79, 70, 229, 0.25),
		0 1px 3px rgba(79, 70, 229, 0.15);

	/* Spacing */
	margin-top: 2rem;
}

.dma-btn-start:hover:not(:disabled) {
	background: linear-gradient(135deg, var(--dma-primary-500) 0%, var(--dma-primary-600) 100%);
	transform: translateY(-2px) scale(1.02);
	box-shadow:
		0 6px 20px rgba(79, 70, 229, 0.35),
		0 3px 10px rgba(79, 70, 229, 0.2);
}

.dma-btn-start:active:not(:disabled) {
	transform: translateY(0) scale(0.98);
	box-shadow:
		0 1px 4px rgba(79, 70, 229, 0.3);
}

/* Other action buttons - keep original sizing */
.dma-btn-continue,
.dma-btn-restart,
.dma-btn-next {
	min-width: 200px;
}

/* Exercise Container - Main Wrapper */
.dma-exercise-container {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	min-height: 100vh;
	background: var(--dma-bg-warm); /* #fdfbf7 - warm cream */
	/* NO border on container - handled by inner elements */
	/* NO border-radius - handled by header/footer */
	/* NO padding - handled by inner elements */
}

/* Exercise Content - Middle Section */
.dma-exercise-content {
	position: relative;
	padding: 1.5rem;
	border-left: 1px solid var(--dma-border-warm); /* #f3e9d2 */
	border-right: 1px solid var(--dma-border-warm); /* #f3e9d2 */
	min-height: calc(100vh - 80px - 96px); /* Full height minus header/footer */
	background: var(--dma-bg-warm); /* #fdfbf7 - ensure continuous background */
}

/* BUG-009 FIX: Nested exercise-content inside wrapper should be transparent */
.dma-exercise-wrapper .dma-exercise-content {
	background: transparent;
	border: none;
	padding: 1rem 0 0 0;
	min-height: auto;
}

/* ==========================================================================
   Exercise Header with Pause Button (T39)
   ========================================================================== */

/* OLD CLASS - DEPRECATED - Use .dma-exercise-header with sticky positioning instead */
/* Exercise header - contains progress bar and pause button */
.dma-exercise-header-OLD {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

/* Progress bar takes up remaining space */
.dma-exercise-header .dma-progress-container {
	flex: 1;
	margin-bottom: 0;
}

/* Pause button */
.dma-pause-button {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	min-height: 48px;
	padding: 0;
	border: 2px solid #6c757d;
	border-radius: var(--dma-radius-3xl);
	background: #ffffff;
	color: #333;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: var(--dma-shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 20;
}

.dma-pause-button:hover {
	border-color: var(--dma-primary-600);
	background-color: #f8f9fa;
	transform: translateY(-1px);
	box-shadow: var(--dma-shadow-md); /* Original: 0 4px 8px rgba(0, 0, 0, 0.12); */
}

.dma-pause-button:active {
	transform: translateY(0);
	box-shadow: var(--dma-shadow-sm);
}

.dma-pause-button:focus {
	outline: none;
	border-color: var(--dma-primary-600);
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

/* Progress Bar (React Version - T36) */
.dma-progress-container {
	margin-bottom: 2rem;
}

/* Text label above progress bar (Frage X von Y) */
.dma-progress-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 0.5rem;
	text-align: center;
}

/* Progress bar track */
.dma-progress-bar {
	height: 8px;
	background-color: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Progress bar fill - animates smoothly with CSS transition */
.dma-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
	transition: width 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 0.5rem;
	position: relative;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(79, 70, 229, 0.3);
}

/* Percentage text inside fill bar */
.dma-progress-percentage {
	font-size: 0.625rem;
	font-weight: 700;
	color: #ffffff;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Legacy class for backward compatibility */
.dma-progress-text {
	font-size: 0.75rem;
	font-weight: 600;
	color: #ffffff;
	white-space: nowrap;
}

/* ==========================================================================
   Segmented Progress Bar Header (T49 - Version 2 Design)
   ========================================================================== */

/* Exercise Header - Top Section (Pause + Progress) */
.dma-exercise-header {
	/* Sticky positioning - stays in flow, sticks to top while scrolling */
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;

	/* Layout */
	height: 80px;
	padding: 0;

	/* Visual - integrated with container */
	background: var(--dma-bg-warm); /* #fdfbf7 - same as container */
	border: 1px solid var(--dma-border-warm); /* #f3e9d2 */
	border-bottom: none; /* No bottom border - flows into content */
	border-radius: var(--dma-radius-3xl) var(--dma-radius-3xl) 0 0; /* 24px rounded TOP corners only */

	/* Subtle shadow for depth */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Header content wrapper - flex container */
.dma-header-content {
	height: 100%;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem; /* BUG-020: Reduced from 1rem after pause button removal */
	max-width: 100%; /* Contained within header */
	margin: 0 auto;
}

/* Pause button - left side */
.dma-pause-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0.5rem;
	background: transparent;
	border: none;
	color: #94a3b8;
	cursor: pointer;
	transition: color 0.2s ease;
	flex-shrink: 0;
}

.dma-pause-btn:hover {
	color: #475569;
}

.dma-pause-btn:focus {
	outline: none;
	color: #6366f1;
}

.dma-pause-btn:active {
	transform: scale(0.95);
}

/* Segmented progress bar container - center, flex-grow */
.dma-progress-segments {
	flex: 1;
	display: flex;
	gap: 0.25rem;
	height: 8px;
}

/* Individual progress segment */
.dma-progress-segment {
	flex: 1;
	border-radius: 9999px;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	min-width: 4px;
}

/* Completed segment - indigo-400 */
.dma-progress-segment--completed {
	background-color: #818cf8;
}

/* Current segment - indigo-600 */
.dma-progress-segment--current {
	background-color: #4f46e5;
}

/* Pending segment - slate-200 */
.dma-progress-segment--pending {
	background-color: #e2e8f0;
}

/* ==========================================================================
   T59: Continuous Progress Bar - Motivational Redesign
   ========================================================================== */

/* Continuous progress bar container */
.dma-progress-bar-continuous {
	flex: 1;
	height: 10px; /* Increased from 8px (+20%) */
	background-color: #e2e8f0; /* slate-200 */
	border-radius: 9999px;
	position: relative;
	overflow: visible; /* Allow counter tooltip to overflow */
}

/* Progress fill with indigo gradient + glow effect */
.dma-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
	border-radius: 9999px;
	transition: width 0.3s ease, background 0.5s ease, box-shadow 0.3s ease;
	position: relative;
	will-change: width, transform; /* GPU acceleration hint */
	overflow: hidden;
	/* Glow effect - dopamine signal */
	box-shadow:
		0 0 8px rgba(99, 102, 241, 0.5),
		inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Color progression - gradient shifts as progress advances */
.dma-progress-fill[data-milestone="25"] {
	background: linear-gradient(90deg, #5b51e9 0%, #7377f3 100%);
}

.dma-progress-fill[data-milestone="50"] {
	background: linear-gradient(90deg, #6b5eee 0%, #8b7ef5 100%);
}

.dma-progress-fill[data-milestone="75"] {
	background: linear-gradient(90deg, #7b6af3 0%, #a285f7 100%);
}

/* Near completion - hint of success green */
.dma-progress-fill[data-milestone="100"] {
	background: linear-gradient(90deg, #6366f1 0%, #10b981 100%);
	box-shadow:
		0 0 12px rgba(16, 185, 129, 0.6),
		0 0 20px rgba(16, 185, 129, 0.3),
		inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Milestone markers (subtle white dividers at 25%, 50%, 75%) */
.dma-progress-bar-continuous::before,
.dma-progress-bar-continuous::after {
	content: '';
	position: absolute;
	top: 0;
	height: 100%;
	width: 1px;
	background: rgba(255, 255, 255, 0.3);
	z-index: 1;
	pointer-events: none;
}

.dma-progress-bar-continuous::before {
	left: 25%;
}

.dma-progress-bar-continuous::after {
	left: 50%;
}

/* 75% marker - using a pseudo-element on a wrapper would be cleaner,
   but we'll use a data attribute approach in JS instead */

/* Pulse animation at milestone completion */
@keyframes dma-progress-pulse {
	0%, 100% {
		transform: scaleY(1);
	}
	50% {
		transform: scaleY(1.15);
	}
}

/* Glow pulse animation for milestones - intensified reward */
@keyframes dma-glow-pulse {
	0%, 100% {
		box-shadow:
			0 0 8px rgba(99, 102, 241, 0.5),
			inset 0 1px 2px rgba(255, 255, 255, 0.3);
	}
	50% {
		box-shadow:
			0 0 16px rgba(99, 102, 241, 0.8),
			0 0 24px rgba(99, 102, 241, 0.4),
			inset 0 1px 3px rgba(255, 255, 255, 0.5);
	}
}

.dma-progress-fill--milestone {
	animation: dma-progress-pulse 300ms ease, dma-glow-pulse 300ms ease;
}

/* On-demand question counter (hover/tap tooltip) */
.dma-progress-counter {
	position: absolute;
	bottom: calc(100% + 8px); /* 8px above progress bar */
	left: 50%;
	transform: translateX(-50%);
	background: #1e293b; /* slate-800 */
	color: white;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	white-space: nowrap;
	z-index: 10;
}

/* Show counter on hover or active (tap) */
.dma-progress-bar-continuous:hover .dma-progress-counter,
.dma-progress-bar-continuous:active .dma-progress-counter {
	opacity: 1;
}

/* Screen reader only counter (always accessible) */
.dma-progress-counter-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Progress Bar Navigation Markers (T61) - DEPRECATED in BUG-024
   Navigation moved to footer arrows for better mobile UX
   ========================================================================== */

/* Markers removed - keeping CSS commented for reference
.dma-progress-markers { display: none; }
.dma-progress-marker { display: none; }
*/

/* ==========================================================================
   Review Mode UI (T61)
   ========================================================================== */

/* Review Mode Banner */
.dma-review-banner {
	padding: 0.75rem 1rem;
	background: var(--dma-amber-50);
	border: 1px solid var(--dma-amber-300);
	border-radius: var(--dma-radius-md);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.dma-review-banner-text {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--dma-amber-800);
}

.dma-review-banner-icon {
	font-size: 1.25rem;
}

.dma-review-return-btn {
	padding: 0.5rem 1rem;
	background: var(--dma-primary-600);
	color: white;
	border: none;
	border-radius: var(--dma-radius-md);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.dma-review-return-btn:hover {
	background: var(--dma-primary-700);
	transform: translateY(-1px);
	box-shadow: var(--dma-shadow-sm);
}

.dma-review-return-btn:active {
	transform: translateY(0);
}

/* Review Answer Display */
.dma-review-answer {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: var(--dma-radius-md);
	background: var(--dma-slate-50);
	border: 1px solid var(--dma-slate-200);
}

.dma-review-result {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.dma-review-result--correct {
	color: var(--dma-success-700);
}

.dma-review-result--incorrect {
	color: var(--dma-error-700);
}

.dma-review-icon {
	font-size: 1.5rem;
}

.dma-review-user-answer {
	font-size: 0.9375rem;
	color: var(--dma-slate-700);
}

.dma-review-user-answer strong {
	color: var(--dma-slate-900);
}

/* Mobile adjustments for review banner */
@media (max-width: 640px) {
	.dma-review-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.dma-review-return-btn {
		width: 100%;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.dma-progress-fill {
		transition: none;
		box-shadow: none; /* Remove glow for reduced motion */
	}

	.dma-progress-fill::before {
		animation: none; /* Disable shimmer */
	}

	.dma-progress-fill--milestone {
		animation: none;
	}
}

/* Streak badge - right side */
.dma-streak-badge {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background-color: #fef3c7;
	color: #b45309;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 0.875rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	flex-shrink: 0;
}

/* Streak count */
.dma-streak-count {
	line-height: 1;
}

/* Pulse animation for streak > 1 */
.dma-streak-badge--pulse {
	animation: streak-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.dma-streak-flame--pulse {
	animation: flame-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes streak-pulse {
	0%, 100% {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
	}
}

@keyframes flame-pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.1);
	}
}

/* ==========================================================================
   T59: Rocket Progress Bar - Header Momentum Indicator
   ========================================================================== */

/* Rocket icon container - positioned left of progress bar */
.dma-progress-rocket {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 18px; /* Small size for header */
	height: 18px;
	color: #6366f1; /* indigo-500 - default/low state */
	transition: all 0.3s ease;
	transform-origin: center center;
}

/* Low momentum state (0-33% progress) - static, indigo */
.dma-progress-rocket--low {
	transform: rotate(0deg);
	color: #6366f1; /* indigo-500 */
}

/* Medium momentum state (34-66% progress) - tilted 15°, purple */
.dma-progress-rocket--medium {
	transform: rotate(15deg);
	color: #8b5cf6; /* purple-500 */
}

/* High momentum state (67%+ progress) - tilted 25°, pink/magenta */
.dma-progress-rocket--high {
	transform: rotate(25deg);
	color: #ec4899; /* pink-500 */
}

/* Boost animation - triggers on ANY answer submission */
.dma-progress-rocket--boost {
	animation: rocket-boost-header 0.3s ease;
}

@keyframes rocket-boost-header {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2) translateY(-2px);
	}
	100% {
		transform: scale(1);
	}
}

/* Launch animation - completion state (rocket flies up off screen) */
.dma-progress-rocket--launch {
	animation: rocket-launch-header 0.8s ease forwards;
}

@keyframes rocket-launch-header {
	0% {
		transform: rotate(25deg) translateY(0) scale(1);
		opacity: 1;
	}
	100% {
		transform: rotate(-15deg) translateY(-60px) scale(0.4);
		opacity: 0;
	}
}

/* Flame trail container - positioned below rocket */
.dma-progress-rocket-flame {
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 2px;
	pointer-events: none;
}

/* Individual flame particles (3 particles) */
.dma-flame-particle {
	width: 3px;
	height: 6px;
	background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); /* amber gradient */
	border-radius: 50% 50% 0 0; /* Teardrop shape */
	animation: flame-flicker-header 0.3s ease infinite alternate;
}

.dma-flame-particle:nth-child(2) {
	animation-delay: 0.1s;
}

.dma-flame-particle:nth-child(3) {
	animation-delay: 0.2s;
}

@keyframes flame-flicker-header {
	0% {
		transform: scaleY(1);
		opacity: 1;
	}
	100% {
		transform: scaleY(0.6);
		opacity: 0.6;
	}
}

/* ==========================================================================
   Progress Fill Momentum States - Color Transitions
   ========================================================================== */

/* Low momentum fill (0-33%) - indigo gradient */
.dma-progress-fill--low {
	background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%); /* indigo-500 to indigo-400 */
	box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

/* Medium momentum fill (34-66%) - purple gradient */
.dma-progress-fill--medium {
	background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%); /* purple-500 to purple-400 */
	box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

/* High momentum fill (67%+) - pink/magenta gradient with glow */
.dma-progress-fill--high {
	background: linear-gradient(90deg, #ec4899 0%, #f472b6 100%); /* pink-500 to pink-400 */
	box-shadow:
		0 0 12px rgba(236, 72, 153, 0.6),
		0 0 20px rgba(236, 72, 153, 0.2);
}

/* Pulse animation on answer submission */
.dma-progress-fill--pulse {
	animation: fill-pulse-header 0.3s ease;
}

@keyframes fill-pulse-header {
	0%, 100% {
		transform: scaleY(1);
	}
	50% {
		transform: scaleY(1.15);
	}
}

/* ==========================================================================
   Speed Lines - Visible at High Momentum
   ========================================================================== */

/* Speed line container - overlays progress bar */
.dma-progress-speedlines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	border-radius: 9999px;
}

/* Individual speed lines (3 lines) */
.dma-speedline {
	position: absolute;
	top: 50%;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.6);
	animation: speedline-move-header 0.5s linear infinite;
}

.dma-speedline:nth-child(1) {
	width: 16px;
	transform: translateY(-2px);
	animation-delay: 0ms;
}

.dma-speedline:nth-child(2) {
	width: 12px;
	transform: translateY(0);
	animation-delay: 0.15s;
}

.dma-speedline:nth-child(3) {
	width: 8px;
	transform: translateY(2px);
	animation-delay: 0.3s;
}

@keyframes speedline-move-header {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	100% {
		transform: translateX(-24px);
		opacity: 0;
	}
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Disable all animations */
	.dma-progress-rocket,
	.dma-progress-rocket--boost,
	.dma-progress-fill--pulse {
		animation: none !important;
		transition: none;
	}

	/* Static rocket at completion */
	.dma-progress-rocket--launch {
		animation: none !important;
		opacity: 0.3;
		transform: rotate(0deg);
	}

	/* Remove flame particles */
	.dma-flame-particle {
		animation: none !important;
		display: none;
	}

	/* Remove speed lines */
	.dma-speedline {
		animation: none !important;
		display: none;
	}

	/* Simplified transforms for low/medium/high states */
	.dma-progress-rocket--low {
		transform: rotate(0deg);
	}

	.dma-progress-rocket--medium {
		transform: rotate(10deg);
	}

	.dma-progress-rocket--high {
		transform: rotate(15deg);
	}
}

/* Header Stats Container - BUG-003 fix: unified stats in header */
.dma-header-stats {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
	flex-shrink: 0;
}

/* Points Pill - BUG-003 fix: integrated into header */
.dma-points-pill {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 0.875rem;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	color: #475569; /* slate-600 */
	flex-shrink: 0;
}

.dma-points-pill svg {
	color: #f59e0b; /* amber-500 for star icon */
}

.dma-points-value {
	line-height: 1;
	min-width: 1.25rem;
	text-align: center;
}

/* Score Display - DEPRECATED (BUG-003 fix: now integrated in ProgressBar) */
.dma-score-display {
	display: none; /* Hidden - points/streak now in header */
}

.dma-score-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #ffffff;
	padding: 0.75rem 1rem;
	border-radius: var(--dma-radius-3xl);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	min-width: 70px;
}

.dma-score-icon {
	font-size: 1.5rem;
	margin-bottom: 0.25rem;
}

.dma-score-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: #333;
}

.dma-score-label {
	font-size: 0.75rem;
	color: #666;
	font-weight: 500;
}

.dma-score-streak {
	background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
}

.dma-score-streak .dma-score-value,
.dma-score-streak .dma-score-label {
	color: #ffffff;
}

/* Anna Mascot */
.dma-anna-mascot {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: var(--dma-primary-50);
	padding: 1rem;
	border-radius: var(--dma-radius-3xl);
	margin: 1rem 0 2rem 0;
	border-left: 4px solid var(--dma-primary-600);
}

.dma-anna-mascot .dma-anna-avatar {
	font-size: 2rem;
	flex-shrink: 0;
}

.dma-anna-tip-bubble {
	flex: 1;
	line-height: 1.6;
	color: #333;
}

.dma-anna-tip-bubble strong {
	color: var(--dma-primary-600);
	display: block;
	margin-bottom: 0.25rem;
}

/* Anna Mascot Enhanced (with Lightbulb - R-25) */
.dma-anna-mascot-enhanced {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: #fff8e1;
	padding: 1rem;
	padding-right: 3.5rem; /* Space for lightbulb button */
	border-radius: var(--dma-radius-3xl);
	margin: 1rem 0 2rem 0;
	border: 2px solid #ffc107;
	box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.dma-anna-mascot-enhanced .dma-anna-avatar {
	font-size: 2.5rem;
	flex-shrink: 0;
	line-height: 1;
}

.dma-anna-tip-content {
	flex: 1;
	min-width: 0; /* Prevent flex item overflow */
}

.dma-anna-name-label {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #f57c00;
	margin-bottom: 0.25rem;
}

.dma-anna-tip-message {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: #333;
}

/* Lightbulb Button (Grammar Help Icon - R-25) */
.dma-anna-lightbulb {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dma-anna-lightbulb:hover {
	background: rgba(255, 255, 255, 0.95);
	border-color: #ffc107;
	box-shadow: 0 3px 6px rgba(255, 193, 7, 0.3);
	transform: scale(1.05);
}

.dma-anna-lightbulb:active {
	transform: scale(0.98);
}

.dma-anna-lightbulb:focus {
	outline: 2px solid #ffc107;
	outline-offset: 2px;
}

.dma-lightbulb-icon {
	font-size: 1.25rem;
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Exercise Wrapper */
.dma-exercise-wrapper {
	background: #ffffff;
	padding: 2rem;
	border-radius: var(--dma-radius-3xl);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	margin-bottom: 2rem;
	min-height: 400px;
}

.dma-exercise-number {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--dma-primary-600);
	color: #ffffff;
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.dma-exercise-instruction {
	font-size: 0.875rem;
	color: #666;
	margin-bottom: 1rem;
	font-style: italic;
}

.dma-exercise-question {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 1.5rem;
	line-height: 1.5;
}

/* ==========================================================================
   Shared Question Text Styling (BUG-033)
   Used by all exercise types that display a question
   ========================================================================== */

.dma-question-text {
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	background-color: #f8f9fa;
	border-left: 4px solid var(--dma-primary-600);
	border-radius: 4px;
	font-size: 1.125rem; /* 18px */
	font-weight: 500;
	color: #333;
	line-height: 1.6;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
	.dma-question-text {
		font-size: 1rem; /* 16px on small screens */
		padding: 0.875rem 1rem;
	}
}

/* Placeholder Exercise */
.dma-placeholder-exercise {
	padding: 2rem;
	background: transparent;
	border-radius: var(--dma-radius-3xl);
	border: none;
}

.dma-placeholder-info {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #ffffff;
	border-radius: 4px;
}

.dma-placeholder-info p {
	margin: 0.5rem 0;
}

.dma-placeholder-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}

.dma-placeholder-actions p {
	margin: 0 0 0.5rem 0;
	font-weight: 600;
}

.dma-placeholder-actions button {
	max-width: 250px;
}

.dma-placeholder-debug {
	margin-top: 1rem;
	padding: 1rem;
	background: #ffffff;
	border-radius: 4px;
}

.dma-placeholder-debug summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--dma-primary-600);
}

.dma-placeholder-debug pre {
	margin-top: 0.5rem;
}

.dma-exercise-unknown {
	padding: 2rem;
	text-align: center;
	color: #666;
}

.dma-exercise-unknown code {
	background: #f0f0f0;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-family: 'Courier New', monospace;
}

/* Feedback Overlay */
.dma-feedback-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: dma-fade-in 0.3s ease;
	padding: 1rem;
}

@keyframes dma-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.dma-feedback-content {
	background: #ffffff;
	padding: 2.5rem;
	border-radius: 12px;
	text-align: center;
	max-width: 500px;
	width: 100%;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	animation: dma-slide-up 0.3s ease;
}

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

.dma-feedback-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	margin: 0 auto 1.5rem;
	font-weight: bold;
}

.dma-feedback-correct {
	background: var(--dma-success-50);
	color: var(--dma-success-500);
}

.dma-feedback-incorrect {
	background: var(--dma-error-50);
	color: var(--dma-error-400);
}

.dma-feedback-message {
	font-size: 1.125rem;
	line-height: 1.6;
	color: #333;
	margin-bottom: 1.5rem;
}

/* BUG-012 Fix: Solution display in feedback overlay */
.dma-feedback-solution {
	margin: 16px 0;
	padding: 16px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	text-align: left;
}

.dma-feedback-solution-label {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
	opacity: 0.9;
	color: #333;
}

.dma-feedback-solution-sentence {
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

.dma-feedback-solution-gap {
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
}

.dma-solution-correct {
	color: #10b981;
}

.dma-solution-incorrect {
	color: #ef4444;
	text-decoration: underline;
}

/* DragSort solution display - BUG-013 fix */
.dma-feedback-solution-buckets {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dma-feedback-solution-bucket {
	font-size: 15px;
	line-height: 1.6;
}

.dma-feedback-bucket-label {
	font-weight: 600;
}

.dma-feedback-bucket-item.dma-solution-correct {
	color: #10b981;
}

.dma-feedback-bucket-item.dma-solution-incorrect {
	color: #ef4444;
	font-weight: 600;
}

/* ==========================================================================
   Pause Overlay (T39)
   ========================================================================== */

/* Pause overlay - full screen with backdrop blur */
.dma-pause-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1100;
	animation: dma-fade-in 0.3s ease;
	padding: 1rem;
}

/* Pause content card */
.dma-pause-content {
	background: #ffffff;
	padding: 3rem 2.5rem;
	border-radius: var(--dma-radius-3xl);
	text-align: center;
	max-width: 500px;
	width: 100%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	animation: dma-slide-up 0.3s ease;
}

/* Pause title */
.dma-pause-title {
	font-size: 2.5rem;
	font-weight: 800;
	color: #333;
	margin: 0 0 2rem 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Action buttons container */
.dma-pause-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

/* Resume button - Primary, green, most prominent */
.dma-pause-button-primary {
	background-color: #22c55e;
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 700;
	padding: 1.125rem 2rem;
	min-height: 56px;
	width: 100%;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(34, 197, 94, 0.3); */
}

.dma-pause-button-primary:hover {
	background-color: #16a34a;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.dma-pause-button-primary:active {
	transform: translateY(0);
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(34, 197, 94, 0.3); */
}

.dma-pause-button-primary:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3), 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Secondary button - Grammar help */
.dma-pause-button-secondary {
	background-color: var(--dma-primary-600);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.875rem 1.5rem;
	min-height: 48px;
	width: 100%;
	border: none;
	border-radius: var(--dma-radius-3xl);
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
}

.dma-pause-button-secondary:hover {
	background-color: #0052a3;
	transform: translateY(-1px);
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(0, 102, 204, 0.3); */
}

.dma-pause-button-secondary:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
}

.dma-pause-button-secondary:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3), 0 2px 8px rgba(0, 102, 204, 0.2);
}

/* Cheatsheet button - Purple (T53) */
.dma-pause-button-cheatsheet {
	background-color: #f3f0ff;
	color: #9474ab;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.875rem 1.5rem;
	min-height: 48px;
	width: 100%;
	border: 2px solid #e9d5ff;
	border-radius: var(--dma-radius-3xl);
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(148, 116, 171, 0.15);
}

.dma-pause-button-cheatsheet:hover {
	background-color: #9474ab;
	color: #ffffff;
	border-color: #9474ab;
	transform: translateY(-1px);
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(148, 116, 171, 0.3); */
}

.dma-pause-button-cheatsheet:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(148, 116, 171, 0.2);
}

.dma-pause-button-cheatsheet:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(148, 116, 171, 0.3), 0 2px 8px rgba(148, 116, 171, 0.2);
}

/* Streak warning - Orange (T53) */
.dma-pause-streak-warning {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: #fff7ed;
	border: 2px solid #fdba74;
	border-radius: var(--dma-radius-3xl);
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	animation: dma-pulse 2s ease-in-out infinite;
}

.dma-pause-streak-icon {
	font-size: 1.125rem;
	line-height: 1;
}

.dma-pause-streak-text {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #ea580c;
	letter-spacing: 0.01em;
}

/* Pulse animation for streak warning */
@keyframes dma-pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 2px 8px rgba(234, 88, 12, 0.2);
	}
	50% {
		transform: scale(1.02);
		box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(234, 88, 12, 0.3); */
	}
}

/* Quit button - Danger, red, at bottom */
.dma-pause-button-quit {
	background-color: #ef4444;
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.875rem 1.5rem;
	min-height: 48px;
	width: 100%;
	border: none;
	border-radius: var(--dma-radius-3xl);
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
	margin-top: 0.5rem;
}

.dma-pause-button-quit:hover {
	background-color: #dc2626;
	transform: translateY(-1px);
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(239, 68, 68, 0.3); */
}

.dma-pause-button-quit:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.dma-pause-button-quit:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3), 0 2px 8px rgba(239, 68, 68, 0.2);
}

/* Hint text below buttons */
.dma-pause-hint {
	font-size: 0.875rem;
	color: #6c757d;
	margin: 0;
	line-height: 1.5;
}

/* ==========================================================================
   Pause Overlay - Responsive Styles
   ========================================================================== */

/* Tablets and below */
@media screen and (max-width: 768px) {
	.dma-pause-content {
		padding: 2.5rem 2rem;
		max-width: 90%;
	}

	.dma-pause-title {
		font-size: 2rem;
		margin-bottom: 1.75rem;
	}

	.dma-pause-button-primary {
		font-size: 1.125rem;
		padding: 1rem 1.75rem;
		min-height: 52px;
	}
}

/* Mobile devices */
@media screen and (max-width: 480px) {
	.dma-pause-overlay {
		padding: 0.75rem;
	}

	.dma-pause-content {
		padding: 2rem 1.5rem;
		max-width: 100%;
		border-radius: 12px;
	}

	.dma-pause-title {
		font-size: 1.75rem;
		margin-bottom: 1.5rem;
	}

	.dma-pause-actions {
		gap: 0.875rem;
		margin-bottom: 1.25rem;
	}

	.dma-pause-button-primary {
		font-size: 1rem;
		padding: 0.875rem 1.5rem;
		min-height: 48px;
	}

	.dma-pause-button-secondary,
	.dma-pause-button-cheatsheet,
	.dma-pause-button-quit {
		font-size: 0.9375rem;
		padding: 0.75rem 1.25rem;
	}

	.dma-pause-streak-warning {
		padding: 0.625rem 0.875rem;
		margin-bottom: 1.25rem;
	}

	.dma-pause-streak-text {
		font-size: 0.875rem;
	}

	.dma-pause-hint {
		font-size: 0.8125rem;
	}
}

/* Small mobile devices (320px) */
@media screen and (max-width: 360px) {
	.dma-pause-title {
		font-size: 1.5rem;
	}

	.dma-pause-button-primary {
		font-size: 0.9375rem;
	}
}

/* ==========================================================================
   Pause Overlay - Accessibility & Preferences
   ========================================================================== */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.dma-pause-overlay,
	.dma-pause-content {
		animation: none;
	}

	.dma-pause-button-primary:hover,
	.dma-pause-button-secondary:hover,
	.dma-pause-button-cheatsheet:hover,
	.dma-pause-button-quit:hover {
		transform: none;
	}

	.dma-pause-overlay {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Disable streak warning pulse animation */
	.dma-pause-streak-warning {
		animation: none;
	}
}

/* High contrast mode */
@media (prefers-contrast: high) {
	.dma-pause-title {
		text-shadow: none;
	}

	.dma-pause-button-primary,
	.dma-pause-button-secondary,
	.dma-pause-button-cheatsheet,
	.dma-pause-button-quit {
		border: 3px solid currentColor;
	}

	.dma-pause-overlay {
		background: rgba(0, 0, 0, 0.9);
	}
}

/* Checkpoint Screen - Legacy (kept for backward compatibility) */
.dma-checkpoint-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 2rem 1rem;
	background: linear-gradient(135deg, #fff3cd 0%, #ffffff 100%);
	border-radius: var(--dma-radius-3xl);
}

.dma-checkpoint-content {
	max-width: 500px;
	width: 100%;
	text-align: center;
}

.dma-checkpoint-hand {
	font-size: 6rem;
	margin-bottom: 1rem;
	animation: dma-wave 0.6s ease-in-out 2;
}

@keyframes dma-wave {
	0%, 100% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-20deg);
	}
	75% {
		transform: rotate(20deg);
	}
}

.dma-checkpoint-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #333;
	margin-bottom: 1rem;
}

.dma-checkpoint-message {
	font-size: 1.25rem;
	color: #555;
	margin-bottom: 2rem;
}

.dma-checkpoint-stats {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin: 2rem 0;
}

.dma-checkpoint-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #ffffff;
	padding: 1rem 1.5rem;
	border-radius: var(--dma-radius-3xl);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dma-checkpoint-stat-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--dma-primary-600);
	margin-bottom: 0.25rem;
}

.dma-checkpoint-stat-label {
	font-size: 0.875rem;
	color: #666;
	font-weight: 500;
}

/* ==========================================================================
   IntermissionScreen Component (T38 - R-24 Micro-Learning Checkpoints)
   ========================================================================== */

/**
 * IntermissionScreen (Checkpoint after Q5 and Q10)
 * Milestone screens with progressive visual escalation (BUG-039).
 * Resets attention span and provides psychological break (R-24).
 */

/* Screen container - full-screen takeover with milestone-specific backgrounds */
/* BUG-047 FIX: Use 100vh to match exercise-container height, preventing scroll to WP content below */
.dma-intermission-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 2rem 1rem;
	background: linear-gradient(135deg, #fff8e1 0%, #fffde7 50%, #ffffff 100%);
	border-radius: var(--dma-radius-3xl);
	animation: dma-intermission-fade-in 0.4s ease-out;
	position: relative;
}

/* Milestone-specific backgrounds (BUG-039) */
.dma-intermission-screen[data-milestone="1"] {
	background: linear-gradient(135deg, var(--milestone-1-bg-start) 0%, var(--milestone-1-bg-end) 100%);
}

.dma-intermission-screen[data-milestone="2"] {
	background: linear-gradient(135deg, var(--milestone-2-bg-start) 0%, var(--milestone-2-bg-end) 100%);
}

.dma-intermission-screen[data-milestone="3"] {
	background: linear-gradient(135deg, var(--milestone-3-bg-start) 0%, var(--milestone-3-bg-end) 100%);
}

@keyframes dma-intermission-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Content container - centered, max-width for readability */
.dma-intermission-content {
	max-width: 600px;
	width: 100%;
	text-align: center;
	animation: dma-intermission-zoom-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Milestone-specific content animations (BUG-039) */
.dma-intermission-screen[data-milestone="1"] .dma-intermission-content {
	animation: milestone-fade-in 0.3s ease-out;
}

.dma-intermission-screen[data-milestone="2"] .dma-intermission-content {
	animation: milestone-zoom-bounce 0.5s ease-out;
}

.dma-intermission-screen[data-milestone="3"] .dma-intermission-content {
	animation: milestone-zoom-bounce 1.0s ease-out;
}

@keyframes dma-intermission-zoom-in {
	from {
		transform: scale(0.85);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes milestone-fade-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes milestone-zoom-bounce {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	70% {
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Emoji - milestone-specific sizes (BUG-039) */
.dma-intermission-emoji {
	font-size: 8rem;
	line-height: 1;
	margin-bottom: 1.5rem;
	animation: dma-intermission-bounce 1s ease-in-out;
	filter: drop-shadow(0 4px 12px rgba(255, 193, 7, 0.3));
}

.dma-intermission-screen[data-milestone="1"] .dma-intermission-emoji {
	font-size: 5rem;
}

.dma-intermission-screen[data-milestone="2"] .dma-intermission-emoji {
	font-size: 6.5rem;
}

.dma-intermission-screen[data-milestone="3"] .dma-intermission-emoji {
	font-size: 8rem;
}

@keyframes dma-intermission-bounce {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	25% {
		transform: translateY(-20px) scale(1.05);
	}
	50% {
		transform: translateY(0) scale(1);
	}
	75% {
		transform: translateY(-10px) scale(1.02);
	}
}

/* Title - "High Five!" */
.dma-intermission-title {
	font-size: 3rem;
	font-weight: 800;
	color: #333;
	margin-bottom: 1rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Encouraging message with round number */
.dma-intermission-message {
	font-size: 1.375rem;
	font-weight: 500;
	color: #555;
	line-height: 1.6;
	margin-bottom: 2.5rem;
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
}

/* Continue button - large tap target (R-27) */
.dma-intermission-continue {
	width: 100%;
	max-width: 400px;
	min-height: 56px;
	padding: 1rem 2rem;
	font-size: 1.25rem;
	font-weight: 700;
	border-radius: var(--dma-radius-3xl);
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(0, 102, 204, 0.25); */
	transition: all 0.2s ease;
}

.dma-intermission-continue:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
}

.dma-intermission-continue:active {
	transform: translateY(0);
}

/* Arrow icon in button */
.dma-intermission-arrow {
	display: inline-block;
	margin-left: 0.5rem;
	transition: transform 0.2s ease;
}

.dma-intermission-continue:hover .dma-intermission-arrow {
	transform: translateX(4px);
}

/* Progress ring (BUG-039) - shown at milestone 2 and 3 */
.dma-milestone-progress-ring {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 48px;
	height: 48px;
	color: var(--dma-primary-500);
}

.dma-milestone-progress-ring svg {
	width: 100%;
	height: 100%;
}

.dma-milestone-progress-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--dma-slate-700);
}

/* ==========================================================================
   IntermissionScreen - Responsive Styles
   ========================================================================== */

/* Tablet (768px) */
@media (max-width: 768px) {
	.dma-intermission-screen {
		min-height: 100vh; /* BUG-047 FIX: Match exercise container to prevent WP content showing */
		padding: 1.5rem 1rem;
	}

	.dma-intermission-emoji {
		font-size: 6rem;
		margin-bottom: 1.25rem;
	}

	.dma-intermission-title {
		font-size: 2.5rem;
	}

	.dma-intermission-message {
		font-size: 1.25rem;
		margin-bottom: 2rem;
	}

	.dma-intermission-continue {
		font-size: 1.125rem;
		min-height: 52px;
		max-width: 100%;
	}
}

/* Mobile (480px) */
@media (max-width: 480px) {
	.dma-intermission-screen {
		min-height: 100vh; /* BUG-047 FIX: Match exercise container to prevent WP content showing */
		padding: 1.5rem 0.75rem;
		border-radius: 12px;
	}

	.dma-intermission-emoji {
		font-size: 5rem;
		margin-bottom: 1rem;
	}

	.dma-intermission-title {
		font-size: 2rem;
		margin-bottom: 0.75rem;
	}

	.dma-intermission-message {
		font-size: 1.125rem;
		margin-bottom: 1.75rem;
		padding: 0 0.5rem;
	}

	.dma-intermission-continue {
		font-size: 1rem;
		min-height: 48px;
		padding: 0.875rem 1.5rem;
	}
}

/* Very small mobile (320px minimum) */
@media (max-width: 360px) {
	.dma-intermission-emoji {
		font-size: 4rem;
	}

	.dma-intermission-title {
		font-size: 1.75rem;
	}

	.dma-intermission-message {
		font-size: 1rem;
	}
}

/* ==========================================================================
   IntermissionScreen - Accessibility
   ========================================================================== */

/* Reduced motion support - disable animations */
@media (prefers-reduced-motion: reduce) {
	.dma-intermission-screen,
	.dma-intermission-content,
	.dma-intermission-emoji {
		animation: none;
	}

	.dma-intermission-continue:hover:not(:disabled) {
		transform: none;
	}

	.dma-intermission-continue:hover .dma-intermission-arrow {
		transform: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-intermission-title {
		text-shadow: none;
	}

	.dma-intermission-continue {
		border: 3px solid #0052a3;
	}
}

/* Celebrating Screen - T59: 1000ms pause at 100% completion */
.dma-celebrating-screen {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.dma-celebrating-screen .dma-exercise-content {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Result Screen */
.dma-result-screen {
	display: flex;
	align-items: flex-start; /* Changed from center to allow content to expand */
	justify-content: center;
	min-height: 70vh;
	padding: 2rem 1rem;
	background: linear-gradient(135deg, var(--dma-primary-50) 0%, #ffffff 100%);
	border-radius: var(--dma-radius-3xl);
	position: relative;
	overflow: visible; /* Changed from hidden to allow review accordion to expand */
}

.dma-result-content {
	max-width: 600px;
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 10;
}

.dma-result-title {
	font-size: 2rem;
	font-weight: 700;
	color: #333;
	margin-bottom: 2rem;
}

.dma-result-score {
	margin: 2rem 0;
}

.dma-result-circle {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
	border: 8px solid var(--dma-primary-600);
}

.dma-result-percentage {
	font-size: 3rem;
	font-weight: 700;
	color: var(--dma-primary-600);
	line-height: 1;
}

.dma-result-fraction {
	font-size: 1.25rem;
	color: #666;
	margin-top: 0.5rem;
}

.dma-result-performance {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.dma-result-emoji {
	font-size: 3rem;
}

.dma-result-message {
	font-size: 1.5rem;
	font-weight: 600;
	color: #333;
}

.dma-result-anna {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 1rem;
	margin: 2rem 0;
	text-align: left;
}

.dma-result-anna .dma-anna-avatar {
	font-size: 3rem;
}

.dma-result-anna .dma-anna-bubble {
	max-width: 450px;
}

/* Debug Info */
.dma-debug-info {
	margin-top: 2rem;
	padding: 1rem;
	background: #f0f0f0;
	border-radius: 4px;
	font-size: 0.875rem;
	font-family: 'Courier New', monospace;
	line-height: 1.8;
}

/* ==========================================================================
   Responsive Design - React Components
   ========================================================================== */

@media (max-width: 768px) {
	/* Progress Bar - tablet adjustments */
	.dma-progress-label {
		font-size: 0.8125rem;
	}

	.dma-progress-bar {
		height: 6px;
	}

	.dma-progress-percentage {
		font-size: 0.5625rem;
	}

	.dma-intro-title {
		font-size: 1.5rem;
	}

	.dma-intro-anna {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.dma-anna-bubble {
		text-align: left;
	}

	.dma-anna-bubble::before {
		left: 50%;
		top: -8px;
		transform: translateX(-50%);
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #ffffff;
		border-top: none;
	}

	.dma-score-display {
		position: static;
		justify-content: center;
		margin-bottom: 1rem;
	}

	.dma-score-item {
		min-width: 60px;
		padding: 0.5rem 0.75rem;
	}

	.dma-score-icon {
		font-size: 1.25rem;
	}

	.dma-score-value {
		font-size: 1rem;
	}

	.dma-anna-mascot {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.dma-anna-tip-bubble {
		text-align: left;
	}

	/* Enhanced mascot mobile adjustments */
	.dma-anna-mascot-enhanced {
		padding: 0.875rem;
		padding-right: 3rem;
	}

	.dma-anna-mascot-enhanced .dma-anna-avatar {
		font-size: 2rem;
	}

	.dma-anna-name-label {
		font-size: 0.5625rem;
	}

	.dma-anna-tip-message {
		font-size: 0.9375rem;
	}

	.dma-anna-lightbulb {
		width: 2.25rem;
		height: 2.25rem;
		top: 0.375rem;
		right: 0.375rem;
	}

	.dma-lightbulb-icon {
		font-size: 1.125rem;
	}

	.dma-exercise-wrapper {
		padding: 1.5rem;
	}

	.dma-exercise-question {
		font-size: 1.125rem;
	}

	.dma-feedback-content {
		padding: 2rem 1.5rem;
	}

	.dma-feedback-icon {
		width: 60px;
		height: 60px;
		font-size: 2rem;
	}

	.dma-checkpoint-hand {
		font-size: 4rem;
	}

	.dma-checkpoint-title {
		font-size: 2rem;
	}

	.dma-checkpoint-message {
		font-size: 1rem;
	}

	.dma-checkpoint-stats {
		flex-direction: column;
		gap: 1rem;
	}

	/* IntermissionScreen mobile adjustments */
	.dma-intermission-screen {
		min-height: 100vh; /* BUG-047 FIX: Match exercise container to prevent WP content showing */
	}

	.dma-intermission-emoji {
		font-size: 4.5rem;
	}

	.dma-intermission-title {
		font-size: 1.875rem;
	}

	.dma-intermission-message {
		font-size: 1rem;
	}

	.dma-intermission-continue {
		min-height: 48px;
		font-size: 1rem;
	}

	.dma-result-circle {
		width: 150px;
		height: 150px;
		border-width: 6px;
	}

	.dma-result-percentage {
		font-size: 2.5rem;
	}

	.dma-result-fraction {
		font-size: 1rem;
	}

	.dma-result-emoji {
		font-size: 2rem;
	}

	.dma-result-message {
		font-size: 1.25rem;
	}

	.dma-result-anna {
		flex-direction: column;
		align-items: center;
	}

	.dma-btn {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
}

@media (max-width: 480px) {
	/* Progress Bar - mobile (320px minimum) */
	.dma-progress-label {
		font-size: 0.75rem;
		margin-bottom: 0.375rem;
	}

	.dma-progress-bar {
		height: 6px;
	}

	.dma-progress-percentage {
		font-size: 0.5rem;
	}

	.dma-intro-screen,
	.dma-checkpoint-screen,
	.dma-result-screen {
		min-height: auto;
		padding: 1rem 0.5rem 1.5rem;
	}

	.dma-exercise-container {
		background-color: transparent; /* Remove cream outer box on mobile */
		padding: 0; /* Remove horizontal padding */
		padding-top: 64px; /* Keep header clearance */
		padding-bottom: 80px; /* Keep footer clearance */
	}

	.dma-exercise-wrapper {
		padding: 0.5rem; /* Further reduced for tighter mobile layout (total: container 0.5 + wrapper 0.5 = 1rem) */
	}

	.dma-meta-item {
		font-size: 0.875rem;
	}

	.dma-meta-icon {
		font-size: 1.25rem;
	}

	/* Cloze dropdown - smaller on very small screens */
	.dma-cloze-container {
		padding: 1rem;
	}

	.dma-cloze-sentence {
		font-size: 1rem;
		line-height: 2.25;
	}

	.dma-cloze-gap {
		font-size: 0.9rem;
		padding: 0.4rem 0.75rem;
		min-height: 44px;
		min-width: 50px;
	}

	/* Bottom sheet - take full width on small screens */
	.dma-bottom-sheet {
		padding: 20px 16px;
		border-radius: 20px 20px 0 0;
	}

	.dma-bottom-sheet-title {
		font-size: 1rem;
	}

	.dma-bottom-sheet-option {
		font-size: 1.125rem;
		min-height: 52px;
		padding: 14px 18px;
	}
}

/* ==========================================================================
   Accessibility - React Components
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Progress Bar - disable smooth animation */
	.dma-progress-fill {
		transition: none;
	}

	.dma-loading-spinner,
	.dma-checkpoint-hand,
	.dma-feedback-overlay,
	.dma-feedback-content {
		animation: none;
	}

	.dma-btn-primary:hover:not(:disabled) {
		transform: none;
	}

	/* Cloze dropdown - disable animations */
	.dma-cloze-gap:hover:not(:disabled),
	.dma-bottom-sheet-option:hover {
		transform: none;
	}

	.dma-bottom-sheet {
		animation: none;
	}
}

/* High contrast mode support for bottom sheet */
@media (prefers-contrast: high) {
	.dma-cloze-gap {
		border-width: 3px;
	}

	.dma-cloze-gap--filled,
	.dma-cloze-gap--correct,
	.dma-cloze-gap--incorrect {
		border-width: 4px;
	}

	.dma-bottom-sheet-option {
		border-width: 3px;
	}

	.dma-bottom-sheet-overlay {
		backdrop-filter: none;
		background: rgba(15, 23, 42, 0.5);
	}
}

/* ==========================================================================
   AudioChoice Component (T32)
   ========================================================================== */

/**
 * AudioChoice exercise component
 * Audio player + multiple choice options
 * NO autoplay (R-01e requirement)
 */

.dma-audio-choice {
	margin-top: 1rem;
}

/* Audio player container */
.dma-audio-player-container {
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border: 2px solid #dee2e6;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Native HTML5 audio element styling */
.dma-audio-player {
	width: 100%;
	height: 48px;
	outline: none;
	border-radius: var(--dma-radius-3xl);
}

/* Firefox audio element styling */
.dma-audio-player:focus {
	outline: 2px solid var(--dma-primary-600);
	outline-offset: 2px;
}

/* Question text below audio player */
/* DEPRECATED: Use .dma-question-text instead (BUG-033) */
.dma-audio-question {
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	background-color: #f8f9fa;
	border-left: 4px solid var(--dma-primary-600);
	border-radius: 4px;
	font-size: 1.125rem;
	font-weight: 500;
	color: #333;
	line-height: 1.6;
}

/* Options list - reuses .dma-choice-options from SingleChoice */
/* Options buttons - reuses .dma-choice-button styles from SingleChoice */

/* Mobile responsiveness - larger audio player on small screens */
@media (max-width: 480px) {
	.dma-audio-player-container {
		padding: 1rem;
		margin-bottom: 1.25rem;
	}

	.dma-audio-player {
		height: 52px;
	}

	.dma-audio-question {
		font-size: 1rem;
		padding: 0.875rem 1rem;
	}
}

/* Tablet and desktop - enhance visual hierarchy */
@media (min-width: 768px) {
	.dma-audio-player-container {
		padding: 1.5rem;
		margin-bottom: 2rem;
	}

	.dma-audio-question {
		font-size: 1.25rem;
		padding: 1.25rem 1.5rem;
		margin-bottom: 1.5rem;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-audio-player-container {
		border-width: 3px;
		border-color: #000;
	}

	.dma-audio-question {
		border-left-width: 6px;
	}
}

/* Reduced motion - disable gradient animation if any future animations added */
@media (prefers-reduced-motion: reduce) {
	.dma-audio-player-container {
		background: #e9ecef;
	}
}

/* ==========================================================================
   Image Choice Styles
   ========================================================================== */

/* Image Choice Container */
.dma-image-choice {
	margin-top: 1rem;
}

/* Image container with responsive sizing */
.dma-image-container {
	position: relative;
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border: 2px solid #dee2e6;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
}

/* Responsive image with aspect ratio preservation (R-01f) */
.dma-image-content {
	max-width: 100%;
	max-height: 40vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--dma-radius-3xl);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Loading state */
.dma-image-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	color: #6c757d;
	text-align: center;
}

.dma-image-loading p {
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
}

/* Error state */
.dma-image-error {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	background-color: #fff3cd;
	border: 2px solid #ffc107;
	border-radius: var(--dma-radius-3xl);
	color: #856404;
	text-align: center;
}

.dma-image-error p {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
}

/* Question text below image */
/* DEPRECATED: Use .dma-question-text instead (BUG-033) */
.dma-image-question {
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	background-color: #f8f9fa;
	border-left: 4px solid var(--dma-primary-600);
	border-radius: 4px;
	font-size: 1.125rem;
	font-weight: 500;
	color: #333;
	line-height: 1.6;
}

/* Mobile responsiveness - optimize for small screens */
@media (max-width: 480px) {
	.dma-image-container {
		padding: 1rem;
		margin-bottom: 1.25rem;
		min-height: 150px;
	}

	/* Ensure image remains usable on 320px screens */
	.dma-image-content {
		max-height: 35vh;
	}

	.dma-image-question {
		font-size: 1rem;
		padding: 0.875rem 1rem;
	}
}

/* Tablet and desktop - enhance visual hierarchy */
@media (min-width: 768px) {
	.dma-image-container {
		padding: 1.5rem;
		margin-bottom: 2rem;
		min-height: 250px;
	}

	.dma-image-content {
		max-height: 45vh;
	}

	.dma-image-question {
		font-size: 1.25rem;
		padding: 1.25rem 1.5rem;
		margin-bottom: 1.5rem;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-image-container {
		border-width: 3px;
		border-color: #000;
	}

	.dma-image-question {
		border-left-width: 6px;
	}

	.dma-image-content {
		border: 2px solid #000;
	}
}

/* Reduced motion - disable gradient animation */
@media (prefers-reduced-motion: reduce) {
	.dma-image-container {
		background: #e9ecef;
	}
}

/* ==========================================================================
   Fill Gap Component (T34)
   Text input exercise with answer matching
   ========================================================================== */

/* Container */
.dma-fill-gap {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Input wrapper with error state support */
.dma-fill-gap-input-wrapper {
	position: relative;
	width: 100%;
}

/* Text input field - large font, clear borders (R-27) */
.dma-fill-gap-input {
	display: block;
	width: 100%;
	min-height: 48px; /* R-27 tap target */
	padding: 0.875rem 1.25rem;
	border: 2px solid #6c757d;
	border-radius: var(--dma-radius-3xl);
	background: #ffffff;
	font-size: 1.125rem; /* 18px - large for readability */
	font-weight: 500;
	font-family: inherit;
	color: #333;
	box-shadow: var(--dma-shadow-sm);
	transition: all 0.2s ease;
}

/* Focus state - high contrast for accessibility */
.dma-fill-gap-input:focus {
	outline: none;
	border-color: var(--dma-primary-600);
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Disabled state */
.dma-fill-gap-input:disabled {
	background-color: #f8f9fa;
	color: #6c757d;
	cursor: not-allowed;
	opacity: 0.7;
}

/* Error state - validation failed */
.dma-fill-gap-input--error {
	border-color: var(--dma-error-400);
	box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.dma-fill-gap-input--error:focus {
	border-color: var(--dma-error-400);
	box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25), 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Error message */
.dma-fill-gap-error {
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	background-color: var(--dma-error-50);
	border: 1px solid #f5c2c7;
	border-radius: 4px;
	color: #842029;
	font-size: 0.875rem;
	font-weight: 500;
}

/* Submit button */
.dma-fill-gap-submit {
	width: 100%;
	min-height: 48px;
}

/* Placeholder text */
.dma-fill-gap-input::placeholder {
	color: #adb5bd;
	opacity: 1;
}

/* ==========================================================================
   Fill Gap - Responsive Styles
   ========================================================================== */

/* Small mobile (320px+) - ensure usability on smallest screens */
@media (max-width: 480px) {
	.dma-fill-gap-input {
		font-size: 1rem; /* 16px to prevent zoom on iOS */
		padding: 0.75rem 1rem;
	}

	.dma-fill-gap {
		gap: 0.875rem;
	}
}

/* Tablet and desktop - larger fonts and spacing */
@media (min-width: 768px) {
	.dma-fill-gap-input {
		font-size: 1.25rem; /* 20px - larger for desktop */
		padding: 1rem 1.5rem;
		min-height: 56px;
	}

	.dma-fill-gap {
		gap: 1.25rem;
	}

	.dma-fill-gap-submit {
		min-height: 56px;
		font-size: 1.125rem;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-fill-gap-input {
		border-width: 3px;
		border-color: #000;
	}

	.dma-fill-gap-input:focus {
		border-color: var(--dma-primary-600);
		box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.3);
	}

	.dma-fill-gap-input--error {
		border-color: var(--dma-error-400);
	}

	.dma-fill-gap-error {
		border-width: 2px;
	}
}

/* ==========================================================================
   Review Accordion Component (T40 - R-28)
   ========================================================================== */

/**
 * ReviewAccordion - Collapsible review section on result screen
 * Shows wrong answers with Anna's tips (rose/red theme) and correct answers (gray)
 * Features smooth height transition and mobile-responsive design
 */

/* Container */
.dma-review-accordion {
	margin: 2rem 0;
	width: 100%;
}

/* Perfect Score Message (Zero Errors) */
.dma-review-accordion--perfect {
	margin: 2rem auto;
	max-width: 500px;
}

.dma-review-perfect {
	background: linear-gradient(135deg, var(--dma-success-50) 0%, #c3e6cb 100%);
	border: 2px solid var(--dma-success-500);
	border-radius: var(--dma-radius-3xl);
	padding: 2rem;
	text-align: center;
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(40, 167, 69, 0.15); */
}

.dma-review-perfect-icon {
	font-size: 4rem;
	line-height: 1;
	margin-bottom: 1rem;
	animation: dma-review-sparkle 2s ease-in-out infinite;
}

@keyframes dma-review-sparkle {
	0%, 100% {
		transform: scale(1) rotate(0deg);
		filter: brightness(1);
	}
	50% {
		transform: scale(1.1) rotate(5deg);
		filter: brightness(1.2);
	}
}

.dma-review-perfect-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--dma-success-900);
	margin-bottom: 0.5rem;
	line-height: 1.2;
}

.dma-review-perfect-message {
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--dma-success-900);
	margin: 0;
	line-height: 1.5;
}

/* Accordion Header - Clickable */
.dma-review-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: #ffffff;
	border: 2px solid #cbd5e1;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	user-select: none;
}

.dma-review-header:hover {
	border-color: #94a3b8;
	background-color: #f8fafc;
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(0, 0, 0, 0.12); */
	transform: translateY(-1px);
}

.dma-review-header:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.dma-review-header:focus {
	outline: 2px solid var(--dma-primary-600);
	outline-offset: 2px;
}

.dma-review-header--open {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
	box-shadow: none;
}

.dma-review-header--open:hover {
	transform: none;
}

/* Header Icon */
.dma-review-header-icon {
	font-size: 1.75rem;
	line-height: 1;
	flex-shrink: 0;
}

/* Header Title */
.dma-review-header-title {
	flex: 1;
	font-size: 1.125rem;
	font-weight: 700;
	color: #334155;
	margin: 0;
	line-height: 1.3;
}

/* Chevron Icon - Rotates 180° when open */
.dma-review-chevron {
	font-size: 1rem;
	color: #64748b;
	transition: transform 0.3s ease;
	flex-shrink: 0;
	line-height: 1;
}

.dma-review-chevron--open {
	transform: rotate(180deg);
}

/* Accordion Content - Smooth height transition */
.dma-review-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
	opacity: 0;
	background: #ffffff;
	border: 2px solid #cbd5e1;
	border-top: none;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(0, 0, 0, 0.08); */
}

.dma-review-content--open {
	max-height: 15000px; /* Increased to accommodate up to 20+ wrong answers */
	opacity: 1;
	transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
}

.dma-review-content-inner {
	padding: 1.5rem;
}

/* Section Titles */
.dma-review-section-title {
	font-size: 1rem;
	font-weight: 700;
	color: #334155;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 1rem 0;
}

.dma-review-section-title--correct {
	color: #64748b;
}

/* Wrong Answers Section - Rose/Red Theme */
.dma-review-wrong-section {
	margin-bottom: 2rem;
}

.dma-review-wrong-item {
	background: linear-gradient(135deg, #fff5f5 0%, #ffe4e6 100%);
	border: 2px solid #fecaca;
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1rem;
	box-shadow: 0 2px 6px rgba(220, 53, 69, 0.1);
}

.dma-review-wrong-item:last-child {
	margin-bottom: 0;
}

/* Question Badge */
.dma-review-question-badge {
	display: inline-block;
	background: var(--dma-error-400);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.375rem 0.75rem;
	border-radius: 20px;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Question Text */
.dma-review-question {
	margin-bottom: 1rem;
}

.dma-review-instruction {
	font-size: 0.875rem;
	color: #991b1b;
	font-style: italic;
	margin: 0 0 0.5rem 0;
}

.dma-review-question-text {
	font-size: 1.0625rem;
	font-weight: 600;
	color: #7f1d1d;
	margin: 0;
	line-height: 1.5;
	word-wrap: break-word;
}

/* Anna's Tip - Rose/Red Theme */
.dma-review-anna-tip {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: #ffffff;
	border: 2px solid #fca5a5;
	border-radius: 12px;
	padding: 1rem;
	margin-top: 0.75rem;
	box-shadow: 0 2px 4px rgba(220, 53, 69, 0.08);
}

.dma-review-tip-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.dma-review-tip-content {
	flex: 1;
	min-width: 0; /* Prevent flex overflow */
}

.dma-review-tip-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--dma-error-400);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.375rem;
}

.dma-review-tip-text {
	font-size: 0.9375rem;
	font-weight: 500;
	color: #7f1d1d;
	margin: 0;
	line-height: 1.6;
	word-wrap: break-word;
}

/* Answer Comparison Cards */
.dma-review-comparison {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

@media (max-width: 640px) {
	.dma-review-comparison {
		grid-template-columns: 1fr;
	}
}

.dma-review-answer-card {
	padding: 1rem;
	border-radius: 8px;
	border: 2px solid;
}

.dma-review-answer-card--user {
	background-color: #fff5f5; /* Light rose */
	border-color: #feb2b2; /* Rose-300 */
}

.dma-review-answer-card--correct {
	background-color: #f0fdf4; /* Light green */
	border-color: #86efac; /* Green-300 */
}

.dma-review-answer-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.dma-review-answer-icon {
	font-size: 1.25rem;
}

.dma-review-answer-label {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dma-review-answer-content {
	font-size: 1rem;
	line-height: 1.5;
	color: #1f2937; /* Gray-800 */
	font-weight: 500;
}

/* Divider Between Sections */
.dma-review-divider {
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, #e2e8f0 50%, transparent 100%);
	margin: 2rem 0;
}

/* Correct Answers Section - Compact Gray List */
.dma-review-correct-section {
	margin-top: 2rem;
}

.dma-review-correct-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dma-review-correct-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem;
	margin-bottom: 0.5rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: var(--dma-radius-3xl);
	transition: background-color 0.2s ease;
}

.dma-review-correct-item:hover {
	background: #f1f5f9;
}

.dma-review-correct-item:last-child {
	margin-bottom: 0;
}

.dma-review-correct-badge {
	font-size: 1rem;
	color: var(--dma-success-500);
	flex-shrink: 0;
	line-height: 1.5;
}

.dma-review-correct-text {
	font-size: 0.9375rem;
	color: #64748b;
	line-height: 1.5;
	word-wrap: break-word;
	flex: 1;
}

/* ==========================================================================
   Review Accordion - Mobile Responsive
   ========================================================================== */

/* Tablets (768px and below) */
@media (max-width: 768px) {
	.dma-review-header {
		padding: 1rem 1.25rem;
		gap: 0.75rem;
	}

	.dma-review-header-icon {
		font-size: 1.5rem;
	}

	.dma-review-header-title {
		font-size: 1rem;
	}

	.dma-review-content-inner {
		padding: 1.25rem;
	}

	.dma-review-wrong-item {
		padding: 1rem;
	}

	.dma-review-question-text {
		font-size: 1rem;
	}

	.dma-review-anna-tip {
		padding: 0.875rem;
		gap: 0.625rem;
	}

	.dma-review-tip-icon {
		font-size: 1.25rem;
	}

	.dma-review-tip-text {
		font-size: 0.875rem;
	}
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
	.dma-review-accordion {
		margin: 1.5rem 0;
	}

	.dma-review-header {
		padding: 0.875rem 1rem;
		gap: 0.625rem;
		border-radius: 10px;
	}

	.dma-review-header-icon {
		font-size: 1.25rem;
	}

	.dma-review-header-title {
		font-size: 0.9375rem;
	}

	.dma-review-chevron {
		font-size: 0.875rem;
	}

	.dma-review-content {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.dma-review-content-inner {
		padding: 1rem;
	}

	.dma-review-section-title {
		font-size: 0.875rem;
	}

	.dma-review-wrong-item {
		padding: 0.875rem;
		margin-bottom: 0.875rem;
		border-radius: 10px;
	}

	.dma-review-question-badge {
		font-size: 0.6875rem;
		padding: 0.3125rem 0.625rem;
	}

	.dma-review-question-text {
		font-size: 0.9375rem;
	}

	.dma-review-anna-tip {
		padding: 0.75rem;
		gap: 0.5rem;
		border-radius: 10px;
	}

	.dma-review-tip-icon {
		font-size: 1.125rem;
	}

	.dma-review-tip-label {
		font-size: 0.6875rem;
	}

	.dma-review-tip-text {
		font-size: 0.8125rem;
	}

	.dma-review-correct-item {
		padding: 0.625rem;
		gap: 0.625rem;
		border-radius: 6px;
	}

	.dma-review-correct-text {
		font-size: 0.875rem;
	}

	.dma-review-perfect {
		padding: 1.5rem;
		border-radius: 12px;
	}

	.dma-review-perfect-icon {
		font-size: 3rem;
	}

	.dma-review-perfect-title {
		font-size: 1.5rem;
	}

	.dma-review-perfect-message {
		font-size: 1rem;
	}
}

/* Very small mobile (360px and below) */
@media (max-width: 360px) {
	.dma-review-header {
		padding: 0.75rem 0.875rem;
	}

	.dma-review-header-title {
		font-size: 0.875rem;
	}

	.dma-review-content-inner {
		padding: 0.875rem;
	}

	.dma-review-question-text {
		font-size: 0.875rem;
	}

	.dma-review-tip-text {
		font-size: 0.8125rem;
	}
}

/* ==========================================================================
   Review Accordion - Accessibility
   ========================================================================== */

/* Reduced motion support - disable animations */
@media (prefers-reduced-motion: reduce) {
	.dma-review-perfect-icon {
		animation: none;
	}

	.dma-review-header {
		transition: none;
	}

	.dma-review-header:hover {
		transform: none;
	}

	.dma-review-chevron {
		transition: none;
	}

	.dma-review-content {
		transition: max-height 0.2s linear;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-review-header {
		border-width: 3px;
	}

	.dma-review-wrong-item {
		border-width: 3px;
	}

	.dma-review-anna-tip {
		border-width: 3px;
	}

	.dma-review-perfect {
		border-width: 3px;
	}
}

/* Focus visible for keyboard navigation */
.dma-review-header:focus-visible {
	outline: 3px solid var(--dma-primary-600);
	outline-offset: 3px;
}

/* ==========================================================================
   Recommendations Component (T41 - R-12)
   ========================================================================== */

/**
 * Recommendations Component Styles
 *
 * Displays recommended related exercises on the result screen.
 * Grid layout: 2 columns desktop, 1 column mobile.
 * Cards are fully clickable with hover states and arrow indicators.
 *
 * Requirements:
 * - Mobile-first with 48px min tap targets (R-27)
 * - High contrast for accessibility
 * - Smooth hover transitions
 * - Responsive grid layout
 */

/* Container */
.dma-recommendations {
	margin: 2rem 0;
	padding: 0;
}

/* Heading */
.dma-recommendations-heading {
	font-size: 1.375rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 1.25rem 0;
	text-align: center;
	line-height: 1.3;
}

/* Grid Container - Mobile-First (1 column) */
.dma-recommendations-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
}

/* Desktop: 2 columns */
@media (min-width: 640px) {
	.dma-recommendations-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
}

/* Card - Fully clickable link */
.dma-recommendation-card {
	display: block;
	min-height: 48px; /* R-27: Mobile tap target */
	padding: 1.25rem 1.5rem;
	background: #ffffff;
	border: 2px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.dma-recommendation-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 102, 204, 0.2);
	border-color: var(--dma-primary-600);
	background: #f8faff;
}

.dma-recommendation-card:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
	border-color: var(--dma-primary-600);
}

.dma-recommendation-card:active {
	transform: translateY(0);
	box-shadow: var(--dma-shadow-lg); /* Original: 0 4px 12px rgba(0, 102, 204, 0.15); */
}

/* Card Content */
.dma-recommendation-card-content {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Icon */
.dma-recommendation-card-icon {
	flex-shrink: 0;
	font-size: 2rem;
	line-height: 1;
}

/* Title */
.dma-recommendation-card-title {
	flex: 1;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.dma-recommendation-card:hover .dma-recommendation-card-title {
	color: var(--dma-primary-600);
}

/* Arrow Icon (navigation hint) */
.dma-recommendation-card-arrow {
	flex-shrink: 0;
	font-size: 1.5rem;
	color: #6b7280;
	line-height: 1;
	transition: transform 0.2s ease, color 0.2s ease;
}

.dma-recommendation-card:hover .dma-recommendation-card-arrow {
	transform: translateX(4px);
	color: var(--dma-primary-600);
}

/* ==========================================================================
   Recommendations - Mobile Responsive
   ========================================================================== */

/* Tablet and below */
@media (max-width: 768px) {
	.dma-recommendations {
		margin: 1.5rem 0;
	}

	.dma-recommendations-heading {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}

	.dma-recommendation-card {
		padding: 1rem 1.25rem;
	}

	.dma-recommendation-card-title {
		font-size: 1rem;
	}

	.dma-recommendation-card-icon {
		font-size: 1.75rem;
	}

	.dma-recommendation-card-arrow {
		font-size: 1.25rem;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.dma-recommendations {
		margin: 1.25rem 0;
	}

	.dma-recommendations-heading {
		font-size: 1.125rem;
		margin-bottom: 0.875rem;
	}

	.dma-recommendations-grid {
		gap: 0.875rem;
	}

	.dma-recommendation-card {
		padding: 0.875rem 1rem;
		border-radius: 10px;
	}

	.dma-recommendation-card-content {
		gap: 0.75rem;
	}

	.dma-recommendation-card-title {
		font-size: 0.9375rem;
	}

	.dma-recommendation-card-icon {
		font-size: 1.5rem;
	}

	.dma-recommendation-card-arrow {
		font-size: 1.125rem;
	}
}

/* Very small mobile (360px and below) */
@media (max-width: 360px) {
	.dma-recommendations-heading {
		font-size: 1rem;
	}

	.dma-recommendation-card-title {
		font-size: 0.875rem;
	}
}

/* ==========================================================================
   Recommendations - Accessibility
   ========================================================================== */

/* Reduced motion support - disable animations */
@media (prefers-reduced-motion: reduce) {
	.dma-recommendation-card {
		transition: none;
	}

	.dma-recommendation-card:hover {
		transform: none;
	}

	.dma-recommendation-card-arrow {
		transition: none;
	}

	.dma-recommendation-card:hover .dma-recommendation-card-arrow {
		transform: none;
	}
}

/* ==========================================================================
   Responsive Styles - Segmented Progress Bar Header (T49)
   ========================================================================== */

/* Tablet and mobile adjustments */
@media (max-width: 768px) {
	.dma-exercise-header {
		padding: 0;
	}

	.dma-exercise-content {
		padding: 1rem;
	}

	.dma-header-content {
		padding: 0 1rem;
		gap: 0.625rem; /* BUG-020: Proportionally reduced from 0.75rem */
	}

	.dma-streak-badge {
		padding: 0.25rem 0.625rem;
		font-size: 0.8125rem;
	}

	/* BUG-003 fix: responsive header stats */
	.dma-header-stats {
		gap: 0.625rem;
	}

	.dma-points-pill {
		padding: 0.375rem 0.75rem;
		font-size: 0.8125rem;
		gap: 0.3125rem;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.dma-exercise-header {
		height: 64px;
		padding: 0;
	}

	.dma-exercise-content {
		padding: 0.75rem;
	}

	.dma-header-content {
		padding: 0 0.75rem;
		gap: 0.5rem; /* BUG-020: Proportionally reduced */
	}

	.dma-pause-btn {
		min-width: 40px;
		min-height: 40px;
		padding: 0.375rem;
	}

	.dma-pause-btn svg {
		width: 20px;
		height: 20px;
	}

	.dma-progress-segments {
		gap: 0.1875rem;
		height: 6px;
	}

	/* T59: Continuous progress bar mobile adjustments */
	.dma-progress-bar-continuous {
		height: 8px; /* Increased from 6px (+20%) */
	}

	.dma-progress-counter {
		bottom: calc(100% + 6px);
		font-size: 0.688rem;
		padding: 0.1875rem 0.375rem;
	}

	.dma-streak-badge {
		padding: 0.1875rem 0.5rem;
		font-size: 0.75rem;
		gap: 0.1875rem;
	}

	.dma-streak-badge svg {
		width: 14px;
		height: 14px;
	}

	/* BUG-003 fix: smaller stats on mobile */
	.dma-header-stats {
		gap: 0.5rem;
	}

	.dma-points-pill {
		padding: 0.3125rem 0.625rem;
		font-size: 0.75rem;
		gap: 0.25rem;
	}

	.dma-points-pill svg {
		width: 14px;
		height: 14px;
	}

	/* Note: No padding adjustment needed on container - sticky positioning handles it */
}

/* Very small mobile (360px and below) */
@media (max-width: 360px) {
	.dma-exercise-header {
		padding: 0;
	}

	.dma-header-content {
		padding: 0 0.5rem;
		gap: 0.375rem; /* BUG-020: Proportionally reduced */
	}

	.dma-progress-segments {
		gap: 0.125rem;
		min-width: 2px;
	}

	.dma-streak-badge {
		padding: 0.125rem 0.375rem;
		font-size: 0.6875rem;
	}

	/* BUG-003 fix: very small screens */
	.dma-header-stats {
		gap: 0.375rem;
	}

	.dma-points-pill {
		padding: 0.25rem 0.5rem;
		font-size: 0.6875rem;
		gap: 0.1875rem;
	}

	.dma-points-pill svg {
		width: 12px;
		height: 12px;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-recommendation-card {
		border-width: 3px;
	}

	.dma-recommendation-card:hover,
	.dma-recommendation-card:focus {
		border-width: 4px;
	}
}

/* Focus visible for keyboard navigation */
.dma-recommendation-card:focus-visible {
	outline: 3px solid var(--dma-primary-600);
	outline-offset: 3px;
}

/* ==========================================================================
   BuddyHeader Component (T50 - Version 2 Design)
   ========================================================================== */

/**
 * BuddyHeader Component Styles
 *
 * Enhanced mascot component with dynamic mood states and visual feedback.
 * This component replaces/supplements AnnaMascot for the v2 layout.
 *
 * Features:
 * - Dynamic emoji avatars based on mood state (idle, happy, sad, proud)
 * - Color-coded themed backgrounds per mood
 * - Speech bubble with mascot name and message
 * - Lightbulb hint button for grammar help
 * - Smooth 500ms transitions between mood states
 * - Hover animations for avatar and hint button
 * - Accessible keyboard navigation
 *
 * Design Reference: version-2.md lines 225-244
 */

/* Base Container - Speech Bubble Style (matches version-2 BuddyHeader) */
.dma-buddy-header {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	border-radius: var(--dma-radius-3xl); /* 24px - matches version-2 rounded-3xl */
	border: 2px solid;
	margin: 0 0 1.5rem 0;
	box-shadow: var(--dma-shadow-sm); /* Consistent card shadow */
	transition: all 0.5s ease;
	user-select: none;
	background: #ffffff; /* Ensure white background for card style */
}

/* Mood-based themes */

/* Idle mood - White background, slate border (default/neutral) */
.dma-buddy-header--idle {
	background-color: #ffffff; /* White card - matches version-2 */
	border-color: var(--dma-border-warm); /* #f3e9d2 - subtle warm cream, not gray */
	color: var(--dma-slate-700);
}

/* Happy mood - Green background (success/celebration) */
.dma-buddy-header--happy {
	background-color: var(--dma-success-50);
	border-color: var(--dma-success-300);
	color: var(--dma-success-900);
}

/* Sad mood - Orange background (needs attention/coaching) */
.dma-buddy-header--sad {
	background-color: var(--dma-orange-50);
	border-color: #fdba74; /* orange-300 */
	color: #7c2d12; /* orange-900 */
}

/* Proud mood - Indigo background (achievement) */
.dma-buddy-header--proud {
	background-color: var(--dma-primary-50);
	border-color: #a5b4fc; /* indigo-300 */
	color: var(--dma-primary-900);
}

/* Avatar - Anna Image with hover animation */
.dma-buddy-avatar {
	width: 2.5rem;          /* 40px base size */
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: 50%;     /* Circular crop */
	object-fit: cover;      /* Maintain aspect ratio */
	transition: transform 0.3s ease;
	cursor: default;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.dma-buddy-avatar:hover {
	transform: scale(1.1);
}

/* Content - Name and Message */
.dma-buddy-content {
	flex: 1;
	min-width: 0; /* Prevent flex item overflow */
}

/* Name Label - Uppercase, small, tracking-wider */
.dma-buddy-name {
	font-size: 0.625rem; /* 10px */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.6;
	margin-bottom: 0.25rem;
}

/* Message Text - Large, bold, with quotes */
.dma-buddy-message {
	font-size: 1.125rem; /* 18px */
	font-weight: 700;
	line-height: 1.4;
	word-wrap: break-word;
}

/* Lightbulb Hint Button - Absolute positioned top-right */
.dma-buddy-hint-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dma-buddy-hint-btn:hover {
	background: rgba(255, 255, 255, 0.95);
	border-color: #f59e0b; /* amber-500 */
	box-shadow: 0 3px 6px rgba(245, 158, 11, 0.3);
	transform: scale(1.05);
}

.dma-buddy-hint-btn:active {
	transform: scale(0.98);
}

.dma-buddy-hint-btn:focus {
	outline: 2px solid #f59e0b;
	outline-offset: 2px;
}

/* Lightbulb Icon - Emoji */
.dma-buddy-hint-icon {
	font-size: 1.25rem;
	line-height: 1;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* ==========================================================================
   BuddyHeader - Mobile Responsive
   ========================================================================== */

/* Tablet and below */
@media (max-width: 768px) {
	.dma-buddy-header {
		padding: 0.875rem;
		padding-right: 3rem; /* Make room for hint button */
		border-radius: 20px;
		gap: 0.875rem;
	}

	.dma-buddy-avatar {
		width: 2rem;
		height: 2rem;
	}

	.dma-buddy-message {
		font-size: 1rem;
	}

	.dma-buddy-hint-btn {
		width: 2.25rem;
		height: 2.25rem;
		top: 0.375rem;
		right: 0.375rem;
	}

	.dma-buddy-hint-icon {
		font-size: 1.125rem;
	}
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
	.dma-buddy-header {
		padding: 0.75rem;
		padding-right: 2.75rem;
		border-radius: 18px;
		gap: 0.75rem;
		margin-bottom: 1.25rem;
	}

	.dma-buddy-avatar {
		width: 1.75rem;
		height: 1.75rem;
	}

	.dma-buddy-name {
		font-size: 0.5625rem; /* 9px */
	}

	.dma-buddy-message {
		font-size: 0.9375rem; /* 15px */
	}

	.dma-buddy-hint-btn {
		width: 2rem;
		height: 2rem;
		top: 0.25rem;
		right: 0.25rem;
	}

	.dma-buddy-hint-icon {
		font-size: 1rem;
	}
}

/* Very small mobile (360px and below) */
@media (max-width: 360px) {
	.dma-buddy-header {
		padding: 0.625rem;
		padding-right: 2.5rem;
	}

	.dma-buddy-avatar {
		width: 1.5rem;
		height: 1.5rem;
	}

	.dma-buddy-message {
		font-size: 0.875rem; /* 14px */
	}
}

/* ==========================================================================
   BuddyHeader - Accessibility
   ========================================================================== */

/* Reduced motion support - disable animations */
@media (prefers-reduced-motion: reduce) {
	.dma-buddy-header {
		transition: background-color 0.3s ease, border-color 0.3s ease;
	}

	.dma-buddy-avatar {
		transition: none;
	}

	.dma-buddy-avatar:hover {
		transform: none;
	}

	.dma-buddy-hint-btn {
		transition: none;
	}

	.dma-buddy-hint-btn:hover {
		transform: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-buddy-header {
		border-width: 3px;
	}

	.dma-buddy-hint-btn {
		border-width: 2px;
	}

	.dma-buddy-hint-btn:hover,
	.dma-buddy-hint-btn:focus {
		border-width: 3px;
	}
}

/* Focus visible for keyboard navigation */
.dma-buddy-hint-btn:focus-visible {
	outline: 3px solid #f59e0b;
	outline-offset: 3px;
}

/* ==========================================================================
   CheatsheetOverlay Component (T51)
   Full-screen grammar help overlay with slide-in animation
   ========================================================================== */

/* Main overlay container - full screen with slide-in from bottom */
.dma-cheatsheet-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	z-index: 1200; /* Above pause overlay (1100) and feedback (1000) */
	display: flex;
	flex-direction: column;
	animation: dma-slide-in-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sticky header with backdrop blur */
.dma-cheatsheet-header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	background: rgba(248, 250, 252, 0.8); /* slate-50/80 */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid #f1f5f9; /* slate-100 */
	z-index: 10;
}

/* Title with icon */
.dma-cheatsheet-title {
	font-size: 1.125rem; /* 18px */
	font-weight: 700;
	color: #1e293b; /* slate-800 */
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Icon wrapper */
.dma-cheatsheet-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3e8ff; /* purple-100 */
	color: #9333ea; /* purple-600 */
	padding: 0.375rem;
	border-radius: 0.5rem; /* 8px */
}

/* Close button */
.dma-cheatsheet-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem; /* 40px */
	height: 2.5rem; /* 40px */
	min-height: 40px;
	background: #e2e8f0; /* slate-200 */
	border: none;
	border-radius: 9999px; /* fully rounded */
	cursor: pointer;
	transition: all 0.2s ease;
	color: #475569; /* slate-600 */
}

.dma-cheatsheet-close:hover {
	background: #cbd5e1; /* slate-300 */
	transform: scale(1.05);
}

.dma-cheatsheet-close:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.3); /* slate-400 */
}

.dma-cheatsheet-close:active {
	transform: scale(0.95);
}

/* Scrollable content area */
.dma-cheatsheet-content {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem; /* 24px */
	background: rgba(248, 250, 252, 0.5); /* slate-50/50 */
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px spacing between cards */
}

/* Grammar rule cards */
.dma-cheatsheet-card {
	background: #ffffff;
	padding: 1.25rem; /* 20px */
	border-radius: 1rem; /* 16px */
	border: 1px solid #f1f5f9; /* slate-100 */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dma-cheatsheet-card-title {
	font-size: 1rem; /* 16px */
	font-weight: 800;
	color: #1e293b; /* slate-800 */
	margin: 0 0 0.75rem 0;
}

.dma-cheatsheet-card-content {
	color: #475569; /* slate-600 */
	line-height: 1.6;
}

.dma-cheatsheet-card p {
	margin: 0;
	color: #475569; /* slate-600 */
	line-height: 1.6;
}

/* Examples list */
.dma-cheatsheet-examples {
	list-style: disc;
	padding-left: 1.5rem;
	margin: 0.75rem 0 0 0;
	color: #475569; /* slate-600 */
}

.dma-cheatsheet-examples li {
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

.dma-cheatsheet-examples li:last-child {
	margin-bottom: 0;
}

.dma-cheatsheet-examples li strong {
	color: #6366f1; /* indigo-600 */
	font-weight: 600;
}

/* Sticky footer */
.dma-cheatsheet-footer {
	position: sticky;
	bottom: 0;
	padding: 1rem 1.5rem;
	background: #ffffff;
	border-top: 1px solid #f1f5f9; /* slate-100 */
	z-index: 10;
}

/* Primary button (Verstanden) */
.dma-cheatsheet-button-primary {
	width: 100%;
	padding: 0.875rem 1.5rem; /* 14px 24px */
	min-height: 48px;
	background: #0f172a; /* slate-900 */
	color: #ffffff;
	border: none;
	border-radius: 0.75rem; /* 12px */
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dma-cheatsheet-button-primary:hover {
	background: #1e293b; /* slate-800 */
	transform: translateY(-1px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dma-cheatsheet-button-primary:active {
	transform: translateY(0);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dma-cheatsheet-button-primary:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.3), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   CheatsheetOverlay - Animations
   ========================================================================== */

/* Slide in from bottom animation */
@keyframes dma-slide-in-bottom {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* ==========================================================================
   CheatsheetOverlay - Responsive Styles
   ========================================================================== */

/* Tablets and below */
@media screen and (max-width: 768px) {
	.dma-cheatsheet-header,
	.dma-cheatsheet-footer {
		padding: 1rem;
	}

	.dma-cheatsheet-content {
		padding: 1rem;
		gap: 1rem;
	}

	.dma-cheatsheet-card {
		padding: 1rem;
	}

	.dma-cheatsheet-title {
		font-size: 1rem; /* 16px on mobile */
	}
}

/* Mobile devices */
@media screen and (max-width: 480px) {
	.dma-cheatsheet-header,
	.dma-cheatsheet-footer {
		padding: 0.875rem;
	}

	.dma-cheatsheet-content {
		padding: 0.875rem;
	}

	.dma-cheatsheet-card {
		padding: 0.875rem;
		border-radius: 0.75rem; /* 12px on mobile */
	}

	.dma-cheatsheet-close {
		width: 2.25rem; /* 36px */
		height: 2.25rem; /* 36px */
		min-height: 36px;
	}

	.dma-cheatsheet-button-primary {
		padding: 0.75rem 1.25rem;
		font-size: 0.9375rem; /* 15px */
	}
}

/* ==========================================================================
   CheatsheetOverlay - Accessibility
   ========================================================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.dma-cheatsheet-overlay {
		animation: none;
	}

	.dma-cheatsheet-close,
	.dma-cheatsheet-button-primary {
		transition: none;
	}

	.dma-cheatsheet-close:hover,
	.dma-cheatsheet-button-primary:hover {
		transform: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-cheatsheet-header {
		border-bottom-width: 2px;
	}

	.dma-cheatsheet-footer {
		border-top-width: 2px;
	}

	.dma-cheatsheet-card {
		border-width: 2px;
	}

	.dma-cheatsheet-close,
	.dma-cheatsheet-button-primary {
		border: 2px solid currentColor;
	}
}

/* Focus visible for keyboard navigation */
.dma-cheatsheet-close:focus-visible,
.dma-cheatsheet-button-primary:focus-visible {
	outline: 3px solid #6366f1; /* indigo-600 */
	outline-offset: 3px;
}

/* ==========================================================================
   Fixed Footer with Action Button (T52)
   Design Reference: version-2.md lines 618-625
   ========================================================================== */

/* Exercise Footer - Bottom Section (Action Button) */
.dma-exercise-footer {
	/* Sticky positioning - stays in flow, sticks to bottom while scrolling */
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;

	/* Layout */
	height: 96px; /* h-24 from design */
	padding: 0 1.5rem;

	/* Visual - integrated with container */
	background: var(--dma-bg-warm); /* #fdfbf7 - same as container */
	border: 1px solid var(--dma-border-warm); /* #f3e9d2 */
	border-top: none; /* No top border - flows from content */
	border-radius: 0 0 var(--dma-radius-3xl) var(--dma-radius-3xl); /* 24px rounded BOTTOM corners only */

	/* Subtle shadow for depth */
	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.02);

	/* Center button */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Action button base styles */
.dma-footer-btn {
	width: 100%;
	max-width: 600px; /* Prevent button from being too wide on desktop */
	min-height: 48px; /* Ensure tap target (R-27) */
	padding: 1rem 2rem; /* py-4 = 16px */
	margin: 0 1rem; /* Horizontal margins inside footer - doesn't touch edges */
	border-radius: 9999px; /* Pill-shaped - fully rounded (rounded-full) */
	font-family: inherit;
	font-size: 1.25rem; /* text-xl */
	font-weight: 900; /* font-black */
	letter-spacing: 0.02em;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm - subtle shadow */
	-webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Disabled state - gray when no selection */
.dma-footer-btn--disabled {
	background-color: #e2e8f0; /* Light gray/slate when disabled */
	color: #94a3b8; /* Gray text (slate-400) */
	cursor: not-allowed;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm - subtle shadow */
}

/* Active state - indigo when selection made */
.dma-footer-btn--active {
	background-color: #4f46e5; /* indigo-600 */
	color: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* shadow-md - slightly more prominent */
}

.dma-footer-btn--active:hover:not(:disabled) {
	background-color: #4338ca; /* indigo-700 on hover */
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); /* shadow-lg on hover */
}

.dma-footer-btn--active:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* shadow-md on press */
}

/* Focus state for keyboard accessibility */
.dma-footer-btn:focus-visible {
	outline: 3px solid #818cf8; /* indigo-400 */
	outline-offset: 3px;
}

/* Tablet adjustments */
@media (max-width: 768px) {
	.dma-exercise-footer {
		padding: 0 1rem;
	}

	.dma-footer-btn {
		font-size: 1.125rem; /* Slightly smaller on tablet */
	}
}

/* Mobile adjustments */
@media (max-width: 480px) {
	.dma-exercise-footer {
		height: 80px; /* Slightly shorter on mobile */
		padding: 0 0.75rem;
	}

	.dma-footer-btn {
		font-size: 1rem;
		padding: 0.875rem 1.5rem;
		margin: 0 0.25rem; /* Reduced from 0.5rem to maximize screen usage */
		max-width: 240px; /* BUG-031: Constrain button width to leave space for navigation arrows */
	}

	/* Note: No padding adjustment needed on container - sticky positioning handles it */
}

/* Very small mobile - edge-to-edge layout */
@media (max-width: 360px) {
	/* Edge-to-edge container on very small screens */
	.dma-exercise-container {
		background-color: transparent; /* Inherited from 480px, ensure consistent */
		padding: 0;
		padding-top: 64px;
		padding-bottom: 80px;
	}

	/* Keep inner wrapper padding for content breathing room */
	.dma-exercise-wrapper {
		padding: 0.5rem;
		border-radius: 0; /* Edge-to-edge, no rounded corners */
	}

	.dma-exercise-footer {
		padding: 0 0.5rem;
	}

	.dma-footer-btn {
		font-size: 0.9375rem; /* 15px */
		padding: 0.75rem 1rem;
		margin: 0; /* Full width spacing for edge-to-edge */
		border-radius: var(--dma-radius-md); /* Keep button rounded */
		max-width: 220px; /* BUG-031: Even tighter constraint for very small screens to ensure arrow visibility */
	}
}

/* ==========================================================================
   Navigation Arrows in Footer (BUG-024)
   ========================================================================== */

/**
 * Ghost arrow navigation buttons
 * Flanking the main footer button for question-to-question navigation
 * Replace progress bar dots which were too small on mobile
 */

.dma-footer__nav-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.dma-nav-arrow {
	width: 44px;
	height: 44px;
	min-width: 44px;
	background: transparent;
	border: 1.5px solid rgba(99, 102, 241, 0.25);
	border-radius: 8px;
	color: rgba(107, 114, 128, 0.5);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10; /* BUG-031: Ensure arrows render above button */
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

.dma-nav-arrow--prev {
	left: 8px;
}

.dma-nav-arrow--next {
	right: 8px;
}

.dma-nav-arrow:hover:not(:disabled) {
	border-color: rgba(99, 102, 241, 0.5);
	color: rgba(107, 114, 128, 0.8);
	background: rgba(99, 102, 241, 0.03);
}

.dma-nav-arrow:active:not(:disabled) {
	transform: translateY(-50%) scale(0.95);
}

.dma-nav-arrow:focus-visible {
	outline: 2px solid var(--dma-primary-400);
	outline-offset: 2px;
}

.dma-nav-arrow:disabled,
.dma-nav-arrow--disabled {
	border-color: rgba(107, 114, 128, 0.1);
	color: rgba(107, 114, 128, 0.2);
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Mobile adjustments - smaller arrows */
@media (max-width: 480px) {
	.dma-nav-arrow {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	.dma-nav-arrow--prev {
		left: 4px;
	}

	.dma-nav-arrow--next {
		right: 4px;
	}

	.dma-nav-arrow svg {
		width: 18px;
		height: 18px;
	}
}

/* Very small screens - position arrows closer */
@media (max-width: 360px) {
	.dma-nav-arrow--prev {
		left: 2px;
	}

	.dma-nav-arrow--next {
		right: 2px;
	}
}

/* ==========================================================================
   Collapsible Hint System (T60)
   ========================================================================== */

/**
 * HintCollapsible Component Styles (T60 Revised)
 *
 * Inline collapsible hint display positioned BELOW answer options (not above).
 * Matches BuddyHeader visual design when expanded.
 *
 * Features:
 * - Collapsed: Circular lightbulb icon button (48x48px)
 * - Expanded: BuddyHeader-style with Anna avatar, quoted text, lightbulb to close
 * - Auto-expand for first exercise with onboarding message
 * - Pulse animation for discoverability (first 3 exercises)
 * - Full accessibility with ARIA attributes
 */

.dma-hint-collapsible {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

/* COLLAPSED STATE: Circular lightbulb icon button */
.dma-hint-trigger-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: #fff;
	border: 2px solid var(--dma-slate-200, #e2e8f0);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.dma-hint-trigger-icon:hover {
	border-color: var(--dma-amber-400, #fbbf24);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	transform: translateY(-2px);
}

.dma-hint-trigger-icon:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

.dma-hint-bulb {
	font-size: 1.25rem;
	line-height: 1;
}

/* Pulse animation for first 3 exercises */
@keyframes dma-hint-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
	50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

.dma-hint-trigger--pulse {
	animation: dma-hint-pulse 2s ease-in-out infinite;
}

/* EXPANDED STATE: BuddyHeader-style box */
.dma-hint-expanded {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 2px solid var(--dma-amber-200, #fde68a);
	border-radius: 1.5rem; /* rounded-3xl */
	animation: dma-hint-expand 300ms ease-out;
	position: relative;
}

@keyframes dma-hint-expand {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Anna avatar */
.dma-hint-avatar {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--dma-amber-300, #fcd34d);
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dma-hint-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content body */
.dma-hint-body {
	flex: 1;
	min-width: 0;
}

.dma-hint-name {
	font-size: 0.625rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--dma-primary-600, #4f46e5);
	margin-bottom: 0.25rem;
}

.dma-hint-text {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--dma-slate-800, #1e293b);
}

.dma-hint-onboarding {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--dma-slate-500, #64748b);
	font-style: italic;
}

/* Collapse button (lightbulb on right) */
.dma-hint-collapse-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.7);
	border: 1px solid var(--dma-amber-200, #fde68a);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
}

.dma-hint-collapse-btn:hover {
	background: #fff;
	border-color: var(--dma-amber-400, #fbbf24);
}

.dma-hint-collapse-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

/* Mobile adjustments */
@media (max-width: 640px) {
	.dma-hint-expanded {
		padding: 0.875rem 1rem;
	}

	.dma-hint-avatar {
		width: 40px;
		height: 40px;
	}

	.dma-hint-text {
		font-size: 0.9375rem;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.dma-hint-trigger--pulse {
		animation: none;
		box-shadow: 0 0 0 2px var(--dma-amber-400);
	}

	.dma-hint-expanded {
		animation: none;
	}
}

/* Screen Reader Only - Announces state changes */
.dma-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Hint Collapsible - Mobile Responsive
   ========================================================================== */

/* Tablet and below */
@media (max-width: 768px) {
	.dma-hint-collapsible {
		margin-bottom: 1.25rem;
	}

	.dma-hint-content {
		padding: 0.875rem;
	}

	.dma-hint-text {
		font-size: 0.875rem;
	}
}

/* Mobile (640px and below) - Full width button */
@media (max-width: 640px) {
	.dma-hint-trigger {
		width: 100%;
		justify-content: center;
	}

	.dma-hint-onboarding {
		padding: 0.625rem;
		font-size: 0.8125rem;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.dma-hint-collapsible {
		margin-bottom: 1rem;
	}

	.dma-hint-trigger {
		padding: 0.625rem 0.875rem;
		font-size: 0.8125rem;
	}

	.dma-hint-icon {
		font-size: 1rem;
	}

	.dma-hint-content {
		margin-top: 0.625rem;
		padding: 0.75rem;
	}
}

/* ==========================================================================
   Hint Collapsible - Accessibility
   ========================================================================== */

/* Reduced motion support - disable animations */
@media (prefers-reduced-motion: reduce) {
	.dma-hint-trigger--pulse {
		animation: none;
		/* Use static ring instead of pulse for first 3 exercises */
		box-shadow: 0 0 0 2px var(--dma-amber-400);
	}

	.dma-hint-content {
		animation: none;
	}

	.dma-hint-trigger:hover {
		transform: none;
	}

	.dma-hint-trigger:active {
		transform: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dma-hint-trigger {
		border-width: 3px;
	}

	.dma-hint-content {
		border-width: 2px;
	}

	.dma-hint-onboarding {
		border-left-width: 5px;
	}
}

/* Focus visible for keyboard navigation */
.dma-hint-trigger:focus-visible {
	outline: 3px solid var(--dma-amber-500, #f59e0b);
	outline-offset: 3px;
}

/* ==========================================================================
   Inline Feedback (T62) - Spatial Contiguity Principle
   ========================================================================== */

/* Container - positioned below answers, above button */
.dma-inline-feedback {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--dma-radius-lg);
	animation: dma-inline-slide-in 200ms ease-out;
	border-width: 2px;
	border-style: solid;
	position: relative;
	overflow: visible;
}

/* BUG-028: Confetti wrapper - positioned at center of feedback */
.dma-confetti-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1000;
}

/* BUG-028: Fix confetti screen dimensions - library's inset:0 computes to 0x0 */
.dma-confetti-wrapper [class*="confetti"][class*="screen"] {
	width: 100vw !important;
	height: 100vh !important;
}

/* Slide-in animation */
@keyframes dma-inline-slide-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Correct feedback - success colors */
.dma-inline-feedback--correct {
	background-color: var(--dma-success-50);
	border-color: var(--dma-success-400);
}

/* Incorrect feedback - error colors */
.dma-inline-feedback--incorrect {
	background-color: var(--dma-error-50);
	border-color: var(--dma-error-400);
}

/* Header - icon + message */
.dma-inline-feedback-header {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

/* Feedback icon */
.dma-inline-feedback-icon {
	flex-shrink: 0;
	font-size: 1.5rem;
	line-height: 1;
}

.dma-inline-feedback--correct .dma-inline-feedback-icon {
	color: var(--dma-success-600);
}

.dma-inline-feedback--incorrect .dma-inline-feedback-icon {
	color: var(--dma-error-600);
}

/* Feedback message */
.dma-inline-feedback-message {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--dma-slate-800);
}

/* Solution display */
.dma-inline-feedback-solution {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--dma-slate-200);
}

.dma-inline-feedback-solution-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--dma-slate-700);
	margin-bottom: 0.5rem;
}

/* Solution sentence (ClozeDropdown) */
.dma-inline-feedback-solution-sentence {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--dma-slate-800);
}

.dma-inline-solution-gap {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	font-weight: 600;
	margin: 0 0.25rem;
}

.dma-inline-solution-gap.dma-solution-correct {
	background-color: var(--dma-success-100);
	color: var(--dma-success-800);
}

.dma-inline-solution-gap.dma-solution-incorrect {
	background-color: var(--dma-error-100);
	color: var(--dma-error-800);
}

/* Solution buckets (DragSort) */
.dma-inline-feedback-solution-buckets {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dma-inline-solution-bucket {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--dma-slate-700);
}

.dma-inline-solution-bucket-label {
	font-weight: 600;
	color: var(--dma-slate-800);
}

.dma-inline-solution-bucket-item {
	display: inline;
}

.dma-inline-solution-bucket-item.dma-solution-correct {
	color: var(--dma-success-700);
	font-weight: 600;
}

.dma-inline-solution-bucket-item.dma-solution-incorrect {
	color: var(--dma-error-700);
	font-weight: 600;
}

/* ==========================================================================
   Button Transformation (T62) - Fitts's Law
   ========================================================================== */

/* Button transformation states */
.dma-footer-btn--check {
	/* "Checken!" state - default indigo */
	background: var(--dma-primary-600);
}

.dma-footer-btn--continue {
	/* "Weiter" state - success green */
	background: var(--dma-success-600);
}

.dma-footer-btn--continue:hover:not(:disabled) {
	background: var(--dma-success-700);
}

/* Smooth label transition */
.dma-footer-btn {
	transition: background-color 0.2s ease, transform 0.1s ease;
}

/* ==========================================================================
   Inline Feedback - Responsive Styles
   ========================================================================== */

/* Mobile adjustments */
@media (max-width: 640px) {
	.dma-inline-feedback {
		padding: 0.875rem 1rem;
		margin-top: 1.25rem;
	}

	.dma-inline-feedback-message {
		font-size: 0.875rem;
	}

	.dma-inline-feedback-icon {
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   Inline Feedback - Accessibility
   ========================================================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.dma-inline-feedback {
		animation: none;
	}
}

/* ==========================================================================
   BUG-026 FIX: Large Screen Layout Optimization
   ========================================================================== */

/* On large screens (1200px+), remove viewport-based heights
   to prevent excessive empty space below content */
@media (min-width: 1200px) {
	.dma-exercise-container {
		min-height: auto; /* Remove forced 100vh height */
	}

	.dma-exercise-content {
		min-height: auto; /* Remove forced viewport-based height */
		/* Content should determine natural height, not viewport */
	}
}

/* ==========================================================================
   BUG-028: Celebration Effects on Correct Answers
   ========================================================================== */

/**
 * TIER 1: CSS Success Pulse (0KB added)
 * Immediate visual feedback on correct answer button.
 * Rewarding but not overwhelming - educational, not casino.
 */
@keyframes dma-success-pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(16, 185, 129, 0.2);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
}

.dma-choice-button--success-pulse {
	animation: dma-success-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/**
 * TIER 2: Enhanced Checkmark Pop (0KB added)
 * Bouncy animation on checkmark icon in feedback.
 * Adds delight and positive reinforcement for learning.
 */
@keyframes dma-check-pop {
	0% {
		transform: scale(0) rotate(-45deg);
		opacity: 0;
	}
	50% {
		transform: scale(1.2) rotate(5deg);
	}
	100% {
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
}

.dma-inline-feedback--correct .dma-inline-feedback-icon {
	display: inline-block;
	animation: dma-check-pop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/**
 * ACCESSIBILITY: Respect prefers-reduced-motion
 * Disable all celebration animations for users who need reduced motion
 */
@media (prefers-reduced-motion: reduce) {
	.dma-choice-button--success-pulse,
	.dma-inline-feedback--correct .dma-inline-feedback-icon {
		animation: none !important;
	}
}

/* ==========================================================================
   BUG-032: Progress Bar Test Page Styles
   ========================================================================== */

/* Test Page Container */
.progress-bar-test {
	max-width: 900px;
	margin: 2rem auto;
	padding: 2rem;
	background: #fdfbf7;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.progress-bar-test-header {
	text-align: center;
	margin-bottom: 3rem;
	padding-bottom: 1.5rem;
	border-bottom: 2px solid #e2e8f0;
}

.progress-bar-test-header h1 {
	font-size: 2rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 0.5rem;
}

.progress-bar-test-header p {
	font-size: 1rem;
	color: #64748b;
}

/* Variant Container */
.progress-bar-test-variant {
	margin-bottom: 3rem;
	padding: 1.5rem;
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	border: 2px solid #e2e8f0;
}

.progress-bar-test-variant-header {
	margin-bottom: 1.5rem;
}

.progress-bar-test-variant-header h2 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.variant-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
	color: white;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 50%;
}

.variant-description {
	font-size: 0.875rem;
	color: #64748b;
	line-height: 1.5;
	margin-left: 42px;
}

/* Preview Area */
.progress-bar-test-preview {
	padding: 2rem;
	background: #f8fafc;
	border-radius: 8px;
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}

/* Controls */
.progress-bar-test-controls {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.progress-bar-test-state {
	font-size: 0.875rem;
	font-weight: 600;
	color: #475569;
	text-align: center;
	padding: 0.5rem;
	background: #e2e8f0;
	border-radius: 6px;
}

.progress-bar-test-buttons {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}

.test-btn {
	padding: 0.625rem 1.25rem;
	border: 2px solid;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 100px;
}

.test-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.test-btn-correct {
	background: #10b981;
	color: white;
	border-color: #10b981;
}

.test-btn-correct:hover:not(:disabled) {
	background: #059669;
	border-color: #059669;
	transform: translateY(-1px);
}

.test-btn-wrong {
	background: #ef4444;
	color: white;
	border-color: #ef4444;
}

.test-btn-wrong:hover:not(:disabled) {
	background: #dc2626;
	border-color: #dc2626;
	transform: translateY(-1px);
}

.test-btn-next {
	background: white;
	color: #4f46e5;
	border-color: #4f46e5;
}

.test-btn-next:hover:not(:disabled) {
	background: #4f46e5;
	color: white;
	transform: translateY(-1px);
}

.test-btn-reset {
	background: white;
	color: #64748b;
	border-color: #cbd5e1;
}

.test-btn-reset:hover:not(:disabled) {
	background: #f1f5f9;
	border-color: #94a3b8;
	transform: translateY(-1px);
}

/* Instructions */
.progress-bar-test-instructions {
	margin-top: 2rem;
	padding: 1.5rem;
	background: #fffbeb;
	border-left: 4px solid #fbbf24;
	border-radius: 8px;
}

.progress-bar-test-instructions h3 {
	font-size: 1.125rem;
	font-weight: 600;
	color: #92400e;
	margin-bottom: 0.75rem;
}

.progress-bar-test-instructions ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem 0;
}

.progress-bar-test-instructions li {
	font-size: 0.875rem;
	color: #78350f;
	line-height: 1.6;
	margin-bottom: 0.5rem;
	padding-left: 1.5rem;
	position: relative;
}

.progress-bar-test-instructions li::before {
	content: '•';
	position: absolute;
	left: 0.5rem;
	font-weight: 700;
}

.progress-bar-test-instructions p {
	font-size: 0.875rem;
	color: #78350f;
	line-height: 1.6;
	margin: 0;
}

/* Mobile Responsive */
@media (max-width: 640px) {
	.progress-bar-test {
		padding: 1rem;
		margin: 1rem;
	}

	.progress-bar-test-header h1 {
		font-size: 1.5rem;
	}

	.progress-bar-test-variant {
		padding: 1rem;
	}

	.variant-description {
		margin-left: 0;
	}

	.test-btn {
		min-width: auto;
		flex: 1;
	}
}

/* ==========================================================================
   BUG-032: Concept 1 - Checkpoint Journey Map Styles
   ========================================================================== */

.progress-checkpoint {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-height: 60px;
	padding: 0.5rem 0;
}

/* Start and Finish Icons */
.progress-checkpoint-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
	transition: all 0.3s ease;
}

.progress-checkpoint-start {
	color: #4f46e5;
}

.progress-checkpoint-finish {
	color: #94a3b8;
}

.progress-checkpoint-finish--unlocked {
	color: #10b981;
	animation: trophy-sparkle 1s ease;
}

@keyframes trophy-sparkle {
	0%, 100% { transform: scale(1) rotate(0deg); }
	25% { transform: scale(1.2) rotate(-5deg); }
	75% { transform: scale(1.2) rotate(5deg); }
}

/* Progress Track */
.progress-checkpoint-track {
	flex: 1;
	height: 10px;
	position: relative;
	background: #e2e8f0;
	border-radius: 9999px;
}

/* Dotted path background */
.progress-checkpoint-path {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background-image: repeating-linear-gradient(
		90deg,
		#cbd5e1 0px,
		#cbd5e1 4px,
		transparent 4px,
		transparent 8px
	);
	border-radius: 9999px;
}

/* Progress Fill */
.progress-checkpoint-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
	border-radius: 9999px;
	transition: width 0.3s ease;
	overflow: visible;
	box-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
}

/* Shimmer animation */
.progress-checkpoint-fill::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.3) 50%,
		transparent 100%
	);
	animation: checkpoint-shimmer 2s infinite;
}

@keyframes checkpoint-shimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

/* Runner Icon */
.progress-checkpoint-runner {
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	animation: runner-bounce 0.6s ease infinite;
}

@keyframes runner-bounce {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50% { transform: translateY(-50%) translateX(2px); }
}

/* Checkpoint Badges */
.progress-checkpoint-badge {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.progress-checkpoint-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd5e1;
	border: 2px solid #e2e8f0;
}

.progress-checkpoint-badge--active .progress-checkpoint-dot {
	background: #6366f1;
	animation: checkpoint-pulse 1s ease infinite;
}

@keyframes checkpoint-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.3); opacity: 0.7; }
}

.progress-checkpoint-badge--completed {
	color: #fbbf24;
	animation: checkpoint-unlock 0.4s ease;
}

@keyframes checkpoint-unlock {
	0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); }
	60% { transform: translate(-50%, -50%) scale(1.3) rotate(10deg); }
	100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

/* Confetti Burst */
.progress-checkpoint-confetti {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.confetti-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: #fbbf24;
	border-radius: 50%;
	animation: confetti-burst 0.6s ease-out forwards;
}

.confetti-particle-0 { animation-delay: 0ms; --angle: 0deg; }
.confetti-particle-1 { animation-delay: 50ms; --angle: 60deg; }
.confetti-particle-2 { animation-delay: 100ms; --angle: 120deg; }
.confetti-particle-3 { animation-delay: 150ms; --angle: 180deg; }
.confetti-particle-4 { animation-delay: 200ms; --angle: 240deg; }
.confetti-particle-5 { animation-delay: 250ms; --angle: 300deg; }

@keyframes confetti-burst {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(
			calc(cos(var(--angle)) * 20px),
			calc(sin(var(--angle)) * 20px)
		) scale(0);
		opacity: 0;
	}
}

/* ==========================================================================
   BUG-032: Concept 2 - Energy Charge System Styles
   ========================================================================== */

.progress-energy {
	width: 100%;
	max-height: 60px;
}

.progress-energy-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.progress-energy-label {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #1e293b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.progress-energy-icon {
	color: #3b82f6;
}

.progress-energy-icon--shake {
	animation: energy-shake 0.5s ease infinite;
}

@keyframes energy-shake {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-5deg); }
	75% { transform: rotate(5deg); }
}

.progress-energy-counter {
	font-size: 0.75rem;
	font-weight: 700;
	color: #475569;
}

/* Energy Bar Container */
.progress-energy-container {
	height: 24px;
	background: #1e293b;
	border-radius: 12px;
	padding: 3px;
	position: relative;
	overflow: hidden;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-energy-segments {
	display: flex;
	gap: 2px;
	height: 100%;
}

/* Energy Segment */
.progress-energy-segment {
	flex: 1;
	border-radius: 4px;
	transition: all 0.3s ease;
}

.progress-energy-segment--active {
	background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
	box-shadow: 0 0 4px rgba(59, 130, 246, 0.6);
}

.progress-energy-segment--depleted {
	background: #334155;
}

/* Critical State (last 2 segments) */
.progress-energy-bar--critical .progress-energy-segment--active {
	background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
	animation: energy-flash 1s ease infinite;
}

@keyframes energy-flash {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* Refilling State */
.progress-energy-bar--refilling .progress-energy-segment {
	animation: energy-refill 800ms ease forwards;
}

@keyframes energy-refill {
	0% {
		background: #334155;
		transform: scaleY(0.8);
	}
	50% {
		background: #60a5fa;
		transform: scaleY(1.1);
	}
	100% {
		background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
		transform: scaleY(1);
		box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
	}
}

/* Complete State */
.progress-energy-bar--complete .progress-energy-segment--active {
	background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
	box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
}

/* Electric Spark Trail */
.progress-energy-spark {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.8) 50%,
		transparent 100%
	);
	animation: spark-trail 800ms ease forwards;
}

@keyframes spark-trail {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* ==========================================================================
   BUG-032: Concept 3 - Star Collection Constellation Styles
   ========================================================================== */

.progress-stars {
	width: 100%;
	max-height: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.progress-stars-constellation {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	position: relative;
	min-height: 100px;
}

/* Star Rows */
.progress-stars-row {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.progress-stars-row-0 { gap: 0; } /* Row 1: 1 star */
.progress-stars-row-1 { gap: 0.75rem; } /* Row 2: 2 stars */
.progress-stars-row-2 { gap: 0.75rem; } /* Row 3: 3 stars */
.progress-stars-row-3 { gap: 0.75rem; } /* Row 4: 4 stars */

/* Individual Star */
.progress-star {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.progress-star--empty {
	color: #cbd5e1;
	animation: star-pulse 2s ease infinite;
}

@keyframes star-pulse {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 0.8; }
}

.progress-star--filled {
	color: #fbbf24;
	filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}

/* Bounce animation on fill */
.progress-star--bounce {
	animation: star-bounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes star-bounce {
	0% { transform: scale(0) rotate(-45deg); }
	60% { transform: scale(1.3) rotate(10deg); }
	100% { transform: scale(1) rotate(0deg); }
}

/* Twinkle Effect */
.progress-star-twinkle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
	border-radius: 50%;
	animation: star-twinkle 2s ease infinite;
	pointer-events: none;
}

@keyframes star-twinkle {
	0%, 100% { opacity: 0; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); }
}

/* Particle Burst on Fill */
.progress-star-particles {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.star-particle {
	position: absolute;
	width: 3px;
	height: 3px;
	background: #fbbf24;
	border-radius: 50%;
	animation: star-particle-burst 0.5s ease-out forwards;
}

.star-particle-0 { animation-delay: 0ms; --angle: 0deg; }
.star-particle-1 { animation-delay: 50ms; --angle: 90deg; }
.star-particle-2 { animation-delay: 100ms; --angle: 180deg; }
.star-particle-3 { animation-delay: 150ms; --angle: 270deg; }

@keyframes star-particle-burst {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(
			calc(cos(var(--angle)) * 15px),
			calc(sin(var(--angle)) * 15px)
		) scale(0);
		opacity: 0;
	}
}

/* Constellation Outline */
.progress-stars-outline {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
}

.progress-stars-constellation--complete .progress-stars-outline {
	animation: constellation-reveal 0.8s ease forwards;
}

@keyframes constellation-reveal {
	0% {
		opacity: 0;
		stroke-dashoffset: 100;
	}
	100% {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}

.constellation-line {
	stroke: #10b981;
	stroke-dasharray: 100;
	animation: line-draw 0.8s ease forwards;
}

@keyframes line-draw {
	0% { stroke-dashoffset: 100; }
	100% { stroke-dashoffset: 0; }
}

/* Progress Counter */
.progress-stars-counter {
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	text-align: center;
}

/* ==========================================================================
   BUG-032: Concept 4 - Momentum Speedometer Styles
   ========================================================================== */

.progress-momentum {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-height: 60px;
	padding: 0.5rem 0;
}

/* Rocket Icon */
.progress-momentum-rocket {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #6366f1;
	transition: all 0.3s ease;
	transform-origin: center;
}

.progress-momentum-rocket--low {
	transform: rotate(0deg);
}

.progress-momentum-rocket--medium {
	transform: rotate(15deg);
	color: #8b5cf6;
}

.progress-momentum-rocket--high {
	transform: rotate(30deg);
	color: #ec4899;
}

.progress-momentum-rocket--launch {
	animation: rocket-launch 0.8s ease forwards;
}

/* Boost animation - triggers on EVERY answer (Concept 5) */
.progress-momentum-rocket--boost {
	animation: rocket-boost 0.3s ease;
}

@keyframes rocket-boost {
	0% { transform: scale(1); }
	50% { transform: scale(1.3) translateY(-3px); }
	100% { transform: scale(1); }
}

@keyframes rocket-launch {
	0% { transform: rotate(30deg) translateY(0) scale(1); opacity: 1; }
	100% { transform: rotate(-15deg) translateY(-100px) scale(0.5); opacity: 0; }
}

/* Flame Trail */
.progress-momentum-flame {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 2px;
}

.flame-particle {
	width: 4px;
	height: 8px;
	background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
	border-radius: 50% 50% 0 0;
	animation: flame-flicker 0.3s ease infinite alternate;
}

.flame-particle:nth-child(2) { animation-delay: 0.1s; }
.flame-particle:nth-child(3) { animation-delay: 0.2s; }

@keyframes flame-flicker {
	0% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(0.7); opacity: 0.7; }
}

/* Progress Container */
.progress-momentum-container {
	flex: 1;
	position: relative;
	height: 10px;
}

.progress-momentum-track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: #e2e8f0;
	border-radius: 9999px;
}

/* Progress Fill */
.progress-momentum-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 9999px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

.progress-momentum-fill--low {
	background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
}

.progress-momentum-fill--medium {
	background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
	box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.progress-momentum-fill--high {
	background: linear-gradient(90deg, #ec4899 0%, #f472b6 100%);
	box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}

.progress-momentum-fill--pulse {
	animation: momentum-pulse 0.3s ease;
}

@keyframes momentum-pulse {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(1.2); }
}

/* Speed Lines */
.progress-momentum-speedlines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.speedline {
	position: absolute;
	top: 50%;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.6);
	animation: speedline-move 0.5s linear infinite;
}

.speedline-1 {
	width: 20px;
	transform: translateY(-3px);
	animation-delay: 0ms;
}

.speedline-2 {
	width: 15px;
	transform: translateY(0);
	animation-delay: 0.1s;
}

.speedline-3 {
	width: 10px;
	transform: translateY(3px);
	animation-delay: 0.2s;
}

@keyframes speedline-move {
	0% { transform: translateX(0); opacity: 1; }
	100% { transform: translateX(-30px); opacity: 0; }
}

/* Particle Trail */
.progress-momentum-trail {
	position: absolute;
	top: 50%;
	right: -4px;
	transform: translateY(-50%);
	display: flex;
	gap: 4px;
}

.trail-particle {
	width: 3px;
	height: 3px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	animation: trail-fade 0.4s ease infinite;
}

.trail-particle:nth-child(2) {
	animation-delay: 0.2s;
}

@keyframes trail-fade {
	0%, 100% { opacity: 0; transform: scale(0); }
	50% { opacity: 1; transform: scale(1); }
}

/* Percentage Counter */
.progress-momentum-percentage {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: #1e293b;
	min-width: 40px;
	text-align: right;
	transition: all 0.3s ease;
}

.progress-momentum-percentage--grow {
	animation: percentage-grow 0.3s ease;
}

@keyframes percentage-grow {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); }
}

/* Completion Message */
.progress-momentum-complete {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
	color: white;
	padding: 0.375rem 0.75rem;
	border-radius: 8px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
	animation: complete-bounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes complete-bounce {
	0% { transform: translateX(-50%) scale(0) rotate(-10deg); }
	60% { transform: translateX(-50%) scale(1.1) rotate(5deg); }
	100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}

/* ==========================================================================
   Reduced Motion Support for All Variants
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.progress-checkpoint-fill::before,
	.progress-checkpoint-runner,
	.progress-checkpoint-badge--active .progress-checkpoint-dot,
	.progress-energy-icon--shake,
	.progress-star--empty,
	.progress-star-twinkle,
	.progress-momentum-speedlines,
	.progress-momentum-trail,
	.flame-particle {
		animation: none !important;
	}

	.progress-checkpoint-badge--completed {
		animation: none !important;
		transform: translate(-50%, -50%) scale(1);
	}

	.progress-star--bounce {
		animation: none !important;
		transform: scale(1);
	}

	.progress-momentum-rocket--launch {
		animation: none !important;
		opacity: 0.3;
	}

	.progress-journey-feedback,
	.progress-journey-milestone-celebration,
	.progress-journey-glow {
		animation: none !important;
	}
}


/* ==========================================================================
   Progress Bar Concept 5: Journey Progress (BUG-032)
   Focus on progress - encouraging feedback for ALL answers
   ========================================================================== */

.progress-journey {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
	border-radius: 12px;
	position: relative;
	overflow: visible;
}

/* Footsteps Icon */
.progress-journey-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	flex-shrink: 0;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.progress-journey-icon--correct {
	animation: journey-icon-correct 0.5s ease;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.progress-journey-icon--wrong {
	animation: journey-icon-wrong 0.5s ease;
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
	box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
}

.progress-journey-icon--complete {
	animation: journey-icon-complete 0.8s ease;
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	box-shadow: 0 0 25px rgba(251, 191, 36, 0.6);
	transform: scale(1.2);
}

@keyframes journey-icon-correct {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.3); }
}

@keyframes journey-icon-wrong {
	0%, 100% { transform: scale(1); }
	25% { transform: scale(1.15) rotate(-5deg); }
	75% { transform: scale(1.15) rotate(5deg); }
}

@keyframes journey-icon-complete {
	0% { transform: scale(1); }
	50% { transform: scale(1.4) rotate(10deg); }
	100% { transform: scale(1.2) rotate(0deg); }
}

/* Progress Bar Container */
.progress-journey-container {
	flex: 1;
	height: 24px;
	position: relative;
}

.progress-journey-track {
	position: absolute;
	inset: 0;
	background: #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
}

/* Milestone markers on track */
.progress-journey-milestone {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.progress-journey-milestone .milestone-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9ca3af;
	border: 2px solid white;
	display: block;
	transition: all 0.3s ease;
}

.progress-journey-milestone--reached .milestone-dot {
	background: #10b981;
	box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

/* Progress fill */
.progress-journey-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
	border-radius: 12px;
	min-width: 24px;
	overflow: hidden;
}

.progress-journey-fill--correct {
	animation: journey-fill-correct 0.5s ease;
}

.progress-journey-fill--wrong {
	animation: journey-fill-wrong 0.5s ease;
	background: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #10b981 100%);
}

@keyframes journey-fill-correct {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.3); box-shadow: 0 0 15px rgba(34, 197, 94, 0.6); }
}

@keyframes journey-fill-wrong {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.2); }
}

/* Glow effect at progress edge */
.progress-journey-glow {
	position: absolute;
	right: -2px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
	animation: journey-glow 2s ease-in-out infinite;
}

@keyframes journey-glow {
	0%, 100% { opacity: 0.7; transform: translateY(-50%) scale(1); }
	50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

/* Feedback popup */
.progress-journey-feedback {
	position: absolute;
	top: -30px;
	transform: translateX(-50%);
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	animation: journey-feedback-appear 0.8s ease forwards;
	z-index: 10;
}

.progress-journey-feedback--correct {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	color: white;
	box-shadow: 0 2px 10px rgba(34, 197, 94, 0.4);
}

.progress-journey-feedback--wrong {
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
	color: white;
	box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4);
}

@keyframes journey-feedback-appear {
	0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.8); }
	20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
	40% { transform: translateX(-50%) translateY(-5px) scale(1); }
	100% { opacity: 0; transform: translateX(-50%) translateY(-15px) scale(0.9); }
}

/* Milestone celebration */
.progress-journey-milestone-celebration {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 8px 16px;
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	box-shadow: 0 4px 15px rgba(251, 191, 36, 0.5);
	animation: journey-milestone-celebrate 1.5s ease forwards;
	z-index: 15;
}

@keyframes journey-milestone-celebrate {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
	20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
	40% { transform: translate(-50%, -50%) scale(1); }
	80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) translateY(-20px); }
}

/* Counter */
.progress-journey-counter {
	font-size: 0.875rem;
	font-weight: 600;
	color: #374151;
	min-width: 40px;
	text-align: right;
	transition: all 0.3s ease;
}

.progress-journey-counter--correct {
	color: #16a34a;
	animation: journey-counter-pulse 0.3s ease;
}

.progress-journey-counter--wrong {
	color: #ea580c;
	animation: journey-counter-pulse 0.3s ease;
}

@keyframes journey-counter-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}

/* Completion overlay */
.progress-journey-complete {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px 24px;
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	color: white;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 24px;
	box-shadow: 0 4px 20px rgba(251, 191, 36, 0.5);
	animation: journey-complete 0.8s ease;
	z-index: 20;
}

@keyframes journey-complete {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-10deg); }
	50% { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

/* Test page: Featured variant styling */
.progress-bar-test-variant--featured {
	border: 2px solid #10b981;
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}

.variant-number--new {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.variant-badge {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 2px 8px;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: white;
	font-size: 0.625rem;
	font-weight: 700;
	border-radius: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	vertical-align: middle;
}

/* ==========================================================================
   SortWords Exercise Type
   ========================================================================== */

/**
 * SortWords: Drag-and-drop sentence building exercise
 *
 * Design Principles:
 * - Mobile-first with 48px minimum touch targets (R-27)
 * - Clear visual hierarchy: Pool above, sentence zone below
 * - Reuses existing drag patterns from .dma-drag-item
 * - Green (#10b981) for correct, Red (#ef4444) for incorrect
 * - Follows existing spacing system (8px, 16px, 24px)
 * - Border radius: 24px for containers, 24px for word chips (matches --dma-radius-3xl)
 */

/* Main exercise wrapper */
.dma-sortwords {
	display: flex;
	flex-direction: column;
	gap: 20px; /* Spacing between pool and zone boxes */
}

/* Main Container */
.dma-sortwords-container {
	display: flex;
	flex-direction: column;
	gap: 24px; /* Large spacing between pool and zone */
	margin-bottom: 24px;
}

/* Word Pool Section (Scrambled Words) */
.dma-sortwords-pool {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--dma-slate-50); /* #f8fafc */
	border: 2px solid var(--dma-slate-200); /* #e2e8f0 */
	border-radius: var(--dma-radius-3xl); /* 24px */
	min-height: 100px;
}

.dma-sortwords-pool-label {
	font-size: 0.875rem; /* 14px */
	font-weight: 700;
	color: var(--dma-slate-700); /* #334155 */
	margin-bottom: 4px;
}

.dma-sortwords-pool-words {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-start;
}

/* Sentence Building Zone (Drop Area) */
.dma-sortwords-zone {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: #ffffff;
	border: 2px solid var(--dma-primary-200); /* #c7d2fe */
	border-radius: var(--dma-radius-3xl); /* 24px */
	min-height: 120px;
	transition: all 0.2s ease;
}

/* Zone highlighted during drag */
.dma-sortwords-zone--drag-over {
	border-color: var(--dma-primary-600); /* #4f46e5 */
	background: var(--dma-primary-50); /* #eef2ff */
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

.dma-sortwords-zone-label {
	font-size: 0.875rem; /* 14px */
	font-weight: 700;
	color: var(--dma-primary-700); /* #4338ca */
	margin-bottom: 4px;
}

.dma-sortwords-zone-words {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	min-height: 60px;
}

/* Empty state placeholder */
.dma-sortwords-zone-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	color: var(--dma-slate-400); /* #94a3b8 */
	font-style: italic;
	font-size: 0.875rem; /* 14px */
	text-align: center;
	padding: 8px;
}

/* Individual Word Chips */
.dma-sortwords-word {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 48px; /* R-27: Mobile touch target */
	padding: 12px 20px;
	background: #ffffff;
	border: 2px solid var(--dma-slate-300); /* #cbd5e1 */
	border-radius: var(--dma-radius-3xl); /* 24px */
	cursor: grab;
	transition: all 0.2s ease;
	user-select: none;
	font-size: 1rem; /* 16px */
	font-weight: 500;
	color: var(--dma-slate-700); /* #334155 */
	box-shadow: var(--dma-shadow-sm); /* 0 1px 2px rgba(0, 0, 0, 0.05) */
	position: relative;
}

/* Word in pool (not yet placed) */
.dma-sortwords-word--pool {
	/* Inherits base styles */
}

.dma-sortwords-word--pool:hover {
	border-color: var(--dma-primary-600); /* #4f46e5 */
	background: #fefefe;
	transform: translateY(-2px);
	box-shadow: var(--dma-shadow-lg); /* 0 10px 15px -3px rgba(0, 0, 0, 0.1) */
}

.dma-sortwords-word--pool:active {
	cursor: grabbing;
}

/* Word in zone (placed in sentence) */
.dma-sortwords-word--zone {
	background: var(--dma-primary-50); /* #eef2ff */
	border-color: var(--dma-primary-400); /* #818cf8 */
}

.dma-sortwords-word--zone:hover {
	border-color: var(--dma-primary-600); /* #4f46e5 */
	transform: translateY(-2px);
	box-shadow: var(--dma-shadow-md); /* 0 4px 6px -1px rgba(0, 0, 0, 0.1) */
}

/* Word being dragged (original becomes semi-transparent) */
.dma-sortwords-word--dragging {
	opacity: 0.3;
	cursor: grabbing;
}

/* Feedback States (After Submission) */
.dma-sortwords-word--correct {
	border-color: var(--dma-success-500); /* #10b981 - matches .dma-solution-correct */
	border-width: 3px;
	background: var(--dma-success-50); /* #ecfdf5 */
	color: var(--dma-success-800); /* #065f46 */
	box-shadow: var(--dma-shadow-lg);
	cursor: not-allowed;
}

.dma-sortwords-word--correct::after {
	content: '✓';
	color: var(--dma-success-500); /* #10b981 */
	font-weight: bold;
	font-size: 1.125rem; /* 18px */
	margin-left: 4px;
}

.dma-sortwords-word--incorrect {
	border-color: var(--dma-error-500); /* #f43f5e - matches .dma-solution-incorrect */
	border-width: 3px;
	background: var(--dma-error-50); /* #fff1f2 */
	color: var(--dma-error-800); /* #9f1239 */
	box-shadow: var(--dma-shadow-lg);
	cursor: not-allowed;
}

.dma-sortwords-word--incorrect::after {
	content: '✗';
	color: var(--dma-error-500); /* #f43f5e */
	font-weight: bold;
	font-size: 1.125rem; /* 18px */
	margin-left: 4px;
}

/* Remove Button (X) on Zone Words */
.dma-sortwords-word-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	margin-left: 4px;
	background: var(--dma-slate-300); /* #cbd5e1 */
	border: none;
	border-radius: 50%;
	color: var(--dma-slate-700); /* #334155 */
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.dma-sortwords-word-remove:hover {
	background: var(--dma-error-500); /* #f43f5e */
	color: #ffffff;
	transform: scale(1.1);
}

.dma-sortwords-word-remove:active {
	transform: scale(0.95);
}

/* Ghost Element (Follows Finger During Drag) */
.dma-sortwords-ghost {
	padding: 12px 20px;
	background: var(--dma-primary-600); /* #4f46e5 */
	color: #ffffff;
	border: 2px solid var(--dma-primary-700); /* #4338ca */
	border-radius: var(--dma-radius-3xl); /* 24px */
	font-size: 1rem; /* 16px */
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
	white-space: nowrap;
	pointer-events: none;
	z-index: 1000;
}

/* Insertion Marker (Shows Where Word Will Be Dropped) */
.dma-sortwords-insertion-marker {
	width: 4px;
	height: 48px;
	background: var(--dma-primary-600); /* #4f46e5 */
	border-radius: 2px;
	animation: insertion-pulse 0.8s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes insertion-pulse {
	0%, 100% {
		opacity: 1;
		transform: scaleX(1);
	}
	50% {
		opacity: 0.5;
		transform: scaleX(1.5);
	}
}

/* ==========================================================================
   SortWords Responsive Adjustments
   ========================================================================== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
	.dma-sortwords-container {
		gap: 20px;
	}

	.dma-sortwords-pool,
	.dma-sortwords-zone {
		padding: 14px;
	}

	.dma-sortwords-word {
		padding: 10px 18px;
		font-size: 0.9375rem; /* 15px */
	}
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
	.dma-sortwords-container {
		gap: 16px;
	}

	.dma-sortwords-pool,
	.dma-sortwords-zone {
		padding: 12px;
		min-height: 80px;
	}

	.dma-sortwords-zone {
		min-height: 100px;
	}

	.dma-sortwords-word {
		padding: 10px 16px;
		font-size: 0.9375rem; /* 15px */
		min-height: 48px; /* Maintain touch target */
	}

	.dma-sortwords-pool-label,
	.dma-sortwords-zone-label {
		font-size: 0.8125rem; /* 13px */
	}

	.dma-sortwords-ghost {
		padding: 10px 16px;
		font-size: 0.9375rem; /* 15px */
	}
}

/* Small Mobile (< 576px) */
@media (max-width: 575px) {
	.dma-sortwords-pool-words,
	.dma-sortwords-zone-words {
		gap: 6px; /* Tighter spacing on small screens */
	}

	.dma-sortwords-word {
		padding: 8px 14px;
		font-size: 0.875rem; /* 14px */
	}

	.dma-sortwords-word-remove {
		width: 18px;
		height: 18px;
		font-size: 11px;
	}
}