/* 
 * Food Heroes - CSS Bundle
 * Generated: 2026-02-23T14:19:48.323Z
 * Version: 0.9.0
 * 
 * This file is auto-generated from modular CSS sources.
 * Source files are in the repository for development.
 */


/* Source: src/assets/css/variables.css */

/* ========================================
   COLOR VARIABLES (Theme Configuration)
   Food Heroes - Vibrant & Earthy Theme
   ======================================== */
:root {
	/* Primary Brand Colors - Food Heroes */
	--color-primary: #6A7E0F;
	--color-primary-light: #8BA31A;
	--color-primary-dark: #15803D;
	--color-accent: #EE8D4A;
	--color-accent-hover: #d97a38;
	--color-accent-alt: #FFCF8E;
	
	/* Text Colors */
	--color-text-primary: #2D3309;
	--color-text-secondary: #4A5D12;
	--color-text-light: #6A7E0F;
	--color-text-muted: #6B7280;
	--color-text-muted-dark: #3C4511;
	--color-text-white: #ffffff;
	
	/* Background Colors - Warm & Organic */
	--color-bg-body: #FFFDF7;
	--color-bg-white: #FFFFFF;
	--color-bg-cream: #FBF8F0;
	--color-bg-light: #F5F3EB;
	--color-bg-gray: #EDE9DD;
	--color-bg-dark: #3C4511;
	--color-bg-warm: #FFF9EE;
	
	/* Border Colors */
	--color-border-light: #E8E4D9;
	--color-border-medium: #DDD8CA;
	--color-border-dark: #C4BDA8;
	--color-border-accent: rgba(106, 126, 15, 0.2);
	
	/* State Colors - Success */
	--color-success: #6A7E0F;
	--color-success-hover: #5a6a0c;
	--color-success-alt: #6A7E0F;
	--color-success-light: #8BC34A;
	--color-success-lighter: #a8d96e;
	--color-success-bg: #e8f5d9;
	--color-success-bg-alt: #f0f9e6;
	--color-success-text: #3C4511;
	
	/* State Colors - Error */
	--color-error: #dc3545;
	--color-error-alt: #e74c3c;
	--color-error-bg: #f8d7da;
	--color-error-bg-alt: #fadbd8;
	--color-error-text: #721c24;
	
	/* State Colors - Warning */
	--color-warning-alt: #EE8D4A;
	--color-warning-bg: #fff3e6;
	
	/* State Colors - Info */
	--color-info: #3498db;
	--color-info-bg: #fff5eb;
	--color-info-bg-alt: #fff9f0;
	
	/* State Colors - Critical */
	--color-critical: #c0392b;
	--color-critical-bg: #f5d6d6;
	
	/* Accent Colors */
	--color-gold: #FFD232;
	--color-gold-light: #FFE066;
	--color-warning: #f39c12;
	
	/* Enhanced Gradients */
	--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	--gradient-success: linear-gradient(90deg, var(--color-success-light), var(--color-success-lighter));
	--gradient-warm: linear-gradient(135deg, #FFF9EE 0%, #FFF3E0 50%, #FFFDF7 100%);
	--gradient-hero: linear-gradient(145deg, 
		rgba(106, 126, 15, 0.03) 0%, 
		rgba(238, 141, 74, 0.05) 35%,
		rgba(255, 210, 50, 0.04) 70%,
		rgba(106, 126, 15, 0.02) 100%);
	--gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FDFCF8 100%);
	--gradient-dialog: linear-gradient(180deg, #FFFFFF 0%, #FAF8F3 100%);
	--gradient-frosted: linear-gradient(135deg, 
		rgba(255, 255, 255, 0.95) 0%, 
		rgba(251, 248, 240, 0.9) 100%);
	
	/* Decorative Patterns */
	--pattern-dots: radial-gradient(circle, rgba(106, 126, 15, 0.08) 1px, transparent 1px);
	--pattern-grid: 
		linear-gradient(rgba(106, 126, 15, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(106, 126, 15, 0.03) 1px, transparent 1px);
	
	/* Overlay Colors */
	--overlay-dark-50: rgba(60, 69, 17, 0.5);
	--overlay-dark-60: rgba(60, 69, 17, 0.6);
	--overlay-dark-65: rgba(60, 69, 17, 0.65);
	--overlay-dark-70: rgba(60, 69, 17, 0.7);
	--overlay-dark-80: rgba(60, 69, 17, 0.8);
	--overlay-dark-95: rgba(60, 69, 17, 0.95);
	--overlay-white-10: rgba(255, 255, 255, 0.1);
	--overlay-white-20: rgba(255, 255, 255, 0.2);
	--overlay-white-30: rgba(255, 255, 255, 0.3);
	--overlay-white-50: rgba(255, 255, 255, 0.5);
	--overlay-white-80: rgba(255, 255, 255, 0.8);
	--overlay-white-95: rgba(255, 255, 255, 0.95);
	--overlay-primary-10: rgba(106, 126, 15, 0.1);
	--overlay-primary-20: rgba(106, 126, 15, 0.2);
	--overlay-primary-30: rgba(106, 126, 15, 0.3);
	--overlay-primary-50: rgba(106, 126, 15, 0.5);
	--overlay-gold-30: rgba(255, 210, 50, 0.3);
	--overlay-gold-50: rgba(255, 210, 50, 0.5);
	--overlay-cream: rgba(251, 248, 240, 0.85);
	
	/* Enhanced Shadows - Warmer tones */
	--shadow-sm: 0 2px 8px rgba(60, 69, 17, 0.08);
	--shadow-md: 0 4px 12px rgba(60, 69, 17, 0.1);
	--shadow-lg: 0 8px 24px rgba(60, 69, 17, 0.12);
	--shadow-xl: 0 12px 32px rgba(60, 69, 17, 0.15);
	--shadow-2xl: 0 20px 50px rgba(60, 69, 17, 0.2);
	--shadow-primary: 0 4px 12px var(--overlay-primary-30);
	--shadow-primary-lg: 0 6px 20px rgba(106, 126, 15, 0.4);
	--shadow-glow: 0 0 30px rgba(106, 126, 15, 0.15);
	--shadow-card: 
		0 4px 6px rgba(60, 69, 17, 0.05),
		0 10px 20px rgba(60, 69, 17, 0.08);
	--shadow-dialog: 
		0 20px 50px rgba(60, 69, 17, 0.15),
		0 0 0 1px rgba(106, 126, 15, 0.05);
	
	/* Typography */
	--font-display: 'Nunito', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
	--font-weight-normal: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	
	/* Common Reusable Values */
	--transition-fast: all 0.2s ease;
	--transition-normal: all 0.3s ease;
	--transition-slow: all 0.5s ease;
	--transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 25px;
	--radius-round: 50%;
}

/* Source: src/assets/css/base.css */

/* ========================================
   BASE & SCAFFOLDING STYLES
   Critical layout and structure - Load this FIRST
   ======================================== */

/* Google Fonts - Nunito: Friendly, rounded, perfect for an educational game */
/*@import url('/assets/fonts/Nunito-VariableFont_wght.woff2');*/

@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 200 1000;
	src: url("../fonts/Nunito-VariableFont_wght.woff2") format('woff2-variations');
}
 
/* Base Reset & Body */
* {
	box-sizing: border-box;
}

body { 
	margin: 0; 
	padding: 0; 
	background: var(--color-bg-body);
	background-image: var(--gradient-hero);
	font-family: var(--font-body);
	font-weight: var(--font-weight-normal);
	overflow: hidden;
	color: var(--color-text-primary);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
@media (hover: hover) and (pointer: fine) {
	.btn-primary:hover:not(:disabled) {
		transform: translateY(-2px);
		box-shadow: var(--shadow-primary-lg);
	}
	
	.btn-secondary:hover:not(:disabled) {
		background: var(--color-border-dark);
	}

	.close-btn:hover {
		background: var(--overlay-white-20);
		transform: rotate(90deg);
	}
}

/* ========================================
   UTILITY CLASSES (Reusable Patterns)
   ======================================== */

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.flex-col {
	display: flex;
	flex-direction: column;
}

.text-center {
	text-align: center;
}

.display-none {
	display: none !important;
}

/* Screen reader only - visually hidden but accessible to assistive technology */
.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;
}

/* ========================================
   LAYOUT CONTAINERS
   ======================================== */

/* Main containers */
.main-menu,
.gameplay-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 5000;
}

.gameplay-container {
	overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4000;
    background: var(--color-bg-cream);
}

/* Content wrappers */
.menu-content,
.scene-selector-content {
	max-width: 1200px;
	width: 100%;
	padding: 40px;
	position: relative;
	overflow: hidden;
	max-height: 100vh;
}

/* ========================================
   BASE DIALOG STRUCTURE
   ======================================== */

dialog {
	max-width: 90vw;
	margin: auto;
    background: var(--color-bg-cream);
	display: none;
	grid-template-areas: "header" "body" "footer";
	grid-template-rows: 1fr 10fr auto;
	width: 90%;
	max-height: 90vh;
	height: 90vh;
	border-radius: var(--radius-xl);
	border: none;
	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
	padding: 0;
	overflow: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

::backdrop {
	background: linear-gradient(
		135deg,
		rgba(45, 51, 9, 0.7) 0%,
		rgba(60, 69, 17, 0.75) 50%,
		rgba(45, 51, 9, 0.7) 100%
	);
	backdrop-filter: blur(8px);
	transition: backdrop-filter 0.3s ease;
	z-index: 3000;
}
  
/* ========================================
   BASE BUTTON STYLES
   ======================================== */

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	border-radius: var(--radius-sm);
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	user-select: none;
	text-decoration: none;
}

button:disabled, .btn:disabled, [role="button"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Primary button base */
.btn-primary {
  background-color: var(--color-primary);
  background-image: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  border-color: var(--color-primary);
  color: var(--color-text-white);
  box-shadow: 
    0 2px 4px rgba(106, 126, 15, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  font-weight: var(--font-weight-semibold);
}

/* Secondary button base */
.btn-secondary {
  background: linear-gradient(180deg, #7B8392 0%, var(--color-text-muted) 100%);
  border-color: var(--color-text-muted);
  color: var(--color-text-white);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: var(--font-weight-semibold);
}


/* Close button base */
.close-btn {
	background: transparent;
	border: none;
	font-size: 28px;
	color: inherit;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-round);
	transition: var(--transition-fast);
}

/* ========================================
   LOADING & ERROR STATES
   ======================================== */

.loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 60px 20px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border: 5px solid rgba(52, 152, 219, 0.2);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Error Notification Styles */
.error-notification {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 16px 24px;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-xl);
	font-weight: 500;
	z-index: 10001;
	display: none;
	max-width: 500px;
	animation: errorSlideDown 0.3s ease-out;
}

@keyframes errorSlideDown {
	from {
		transform: translateX(-50%) translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
}

.error-notification.error-info {
	background: var(--color-info);
	color: var(--color-text-white);
}

.error-notification.error-warning {
	background: var(--color-warning);
	color: var(--color-text-white);
}

.error-notification.error-error {
	background: var(--color-error-alt);
	color: var(--color-text-white);
}

.error-notification.error-critical {
	background: var(--color-critical);
	color: var(--color-text-white);
	font-weight: bold;
}

/* ========================================
   ORIENTATION OVERLAY (Portrait Mode Block)
   ======================================== */

.orientation-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--gradient-primary);
	color: var(--color-text-white);
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.orientation-content {
	padding: 30px;
	max-width: 320px;
}

.orientation-icon {
	margin-bottom: 20px;
	animation: rotateHint 2s ease-in-out infinite;
}

.orientation-content h2 {
	font-size: 22px;
	margin: 0 0 10px 0;
	font-weight: 700;
}

.orientation-content p {
	font-size: 16px;
	margin: 0;
	opacity: 0.9;
}

@keyframes rotateHint {
	0%, 100% { transform: rotate(-15deg); }
	50% { transform: rotate(15deg); }
}

/* Show overlay in portrait mode on handheld devices only */
@media (max-width: 900px) and (orientation: portrait) {
	body.is-handheld .orientation-overlay {
		display: flex;
	}
}

/* ========================================
   MOBILE DEVICE DETECTION CLASSES
   ======================================== */

/* Applied via JS for finer control */
body.is-mobile {
	/* Mobile-specific global adjustments */
}

body.is-mobile-landscape {
	/* Mobile landscape specific tweaks */
}

/* ========================================
   RESPONSIVE BASE
   ======================================== */

@media (max-width: 768px) {
	.menu-content,
	.scene-selector-content {
		padding: 20px;
	}

	button {
		padding: 10px 20px;
		font-size: 14px;
	}

	.dialog-header {
		padding: 20px;
	}

	.dialog-body {
		padding: 20px;
	}

	.dialog-footer {
		padding: 15px 20px;
	}
}

/* ========================================
   MOBILE LANDSCAPE SPECIFIC (Phone in Landscape)
   Height-constrained viewport adjustments
   Uses dvh (dynamic viewport height) with vh fallback
   for compatibility with mobile browser UI
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
	/* Reduce base paddings globally for short screens */
	.menu-content,
	.scene-selector-content {
		padding: 10px 16px;
	}
	
	button {
		padding: 6px 14px;
		font-size: 12px;
	}
	
	.dialog-header {
		padding: 8px 12px;
	}
	
	.dialog-header h2 {
		font-size: 14px;
	}
	
	.dialog-body {
		padding: 10px 12px;
	}
	
	.dialog-footer {
		padding: 6px 12px;
	}
}

/* Even smaller phones (very short landscape) */
@media (max-height: 400px) and (orientation: landscape) {
	.menu-content,
	.scene-selector-content {
		padding: 6px 12px;
	}
	
	button {
		padding: 5px 10px;
		font-size: 11px;
	}
	
	.dialog-header {
		padding: 4px 8px;
	}
	
	.dialog-header h2 {
		font-size: 12px;
	}
	
	dialog { /* Fallback */
        max-height: 95svh;
        margin:  auto;
	}
}

/* Source: src/assets/css/utilities/animations.css */

/* ========================================
   ANIMATIONS - Keyframe Definitions
   ======================================== */

/* Quiz button jiggle animation */
@keyframes jiggle {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-3deg); }
	75% { transform: rotate(3deg); }
}

/* Quiz button only: jiggle while keeping translateX(-50%) so removing class doesn't shift position */
@keyframes jiggleCentered {
	0%, 100% { transform: translateX(-50%) rotate(0deg); }
	25% { transform: translateX(-50%) rotate(-3deg); }
	75% { transform: translateX(-50%) rotate(3deg); }
}

/* Play minigame button: opposite wiggle so it stands out from additional-knowledge jiggle */
@keyframes jiggleReverse {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(3deg); }
	75% { transform: rotate(-3deg); }
}

/* Dialog animations */
@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialogBounceIn {
  from {
    transform: scale(0.1);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dialogBounceOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.1);
    opacity: 0;
  }
}

/* Debug hint fade animation */
@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Loading spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Star pulse animation */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Badge notification pulse */
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Minigame animations */
@keyframes correctPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Subtle float animation for decorative elements */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

/* Gentle breathing animation for cards */
@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

/* Entrance animation for cards */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered fade in */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glow pulse for highlights */
@keyframes glowPulse {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(106, 126, 15, 0.2);
    }
    50% { 
        box-shadow: 0 0 20px rgba(106, 126, 15, 0.4);
    }
}

/* Source: src/assets/css/utilities/buttons.css */

/* ========================================
   BUTTONS - Unified Button System
   ======================================== */

/* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
@media (hover: hover) and (pointer: fine) {
	.btn-primary:hover {
		background-color: var(--color-primary-dark);
		background-image: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 100%);
		border-color: var(--color-primary-dark);
		transform: translateY(-2px);
		box-shadow: var(--shadow-xl);
	}

	.btn-accent:hover {
		background: var(--color-accent-hover);
		border-color: var(--color-accent-hover);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(238, 141, 74, 0.4);
	}

	.btn-secondary:hover {
		background: var(--color-text-muted-dark);
		border-color: var(--color-text-muted-dark);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.btn-success:hover {
	  background: var(--color-success-alt);
	  border-color: var(--color-success-alt);
	  transform: translateY(-2px);
	  box-shadow: var(--shadow-md);
	}
	
	.btn-gold:hover {
	  background: #e6c027;
	  border-color: #e6c027;
	  transform: translateY(-2px);
	  box-shadow: var(--shadow-xl);
	}
	
	.btn-outline-primary:hover {
	  background: var(--color-bg-light);
	  border-color: var(--color-primary);
	  transform: translateY(-2px);
	}
	
	.btn-outline-light:hover {
	  background: var(--color-primary);
	  color: var(--color-text-white);
	  border-color: var(--color-primary);
	  transform: translateX(-3px);
	  box-shadow: var(--shadow-md);
	}

	.btn-ghost:hover {
		background: var(--color-bg-white);
		transform: translateY(-2px);
	}
  
	.btn-close:hover {
		background: var(--overlay-white-30);
		transform: rotate(90deg);
	}
}

/* ===== BASE BUTTON ===== */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== COLOR VARIANTS ===== */

/* Primary (Green) */

/* Accent (Orange) */
.btn-accent {
  background: linear-gradient(180deg, #F5A366 0%, var(--color-accent) 100%);
  border-color: var(--color-accent);
  color: var(--color-text-white);
  box-shadow: 
    0 2px 4px rgba(238, 141, 74, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  font-weight: var(--font-weight-semibold);
}

/* Secondary (Gray/Neutral) */


/* Success (Green Alt) */
.btn-success {
  background: linear-gradient(180deg, var(--color-success-light) 0%, var(--color-success) 100%);
  border-color: var(--color-success);
  color: var(--color-text-white);
  box-shadow: 
    0 2px 4px rgba(106, 126, 15, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-weight: var(--font-weight-semibold);
}

/* Gold/Yellow (Badges) */
.btn-gold {
  background: linear-gradient(180deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
  border-color: var(--color-gold);
  box-shadow: 
    0 2px 8px rgba(255, 210, 50, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-weight: var(--font-weight-bold);
}


/* Outlined Primary */
.btn-outline-primary {
  background: var(--color-bg-white);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.btn-outline-primary.active {
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: var(--color-text-white);
  box-shadow: 
    0 2px 4px rgba(106, 126, 15, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Outlined Light (for dark backgrounds) */
.btn-outline-light {
  background: var(--color-bg-cream);
  border: 2px solid var(--color-border-medium);
  font-weight: var(--font-weight-semibold);
}

/* Ghost (transparent) */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  font-weight: var(--font-weight-semibold);
}

.btn-ghost.active {
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: var(--color-text-white);
  border-color: var(--color-primary);
  box-shadow: 
    0 2px 4px rgba(106, 126, 15, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ===== SIZE VARIANTS ===== */
.btn-xs {
	padding: 6px 10px;
	font-size: 10px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}

.btn-md {
  padding: 10px 20px;
  font-size: 16px;
}

.btn-lg {
  padding: 15px 40px;
  font-size: 18px;
}

.btn-xl {
  padding: 16px 50px;
  font-size: 18px;
}

/* ===== SHAPE VARIANTS ===== */

.btn-pill {
  border-radius: var(--radius-pill);
}

.btn-round {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-round.btn-sm {
  width: 40px;
  height: 40px;
}

.btn-round.btn-lg {
  width: 60px;
  height: 60px;
}

/* ===== SPECIAL VARIANTS ===== */

/* Block button (full width) */
.btn-block {
  display: block;
  width: 100%;
}

/* Icon button */
.btn-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Close button (for dialogs) */
.btn-close {
  background: var(--overlay-white-20);
  border: 2px solid var(--overlay-white-30);
  color: var(--color-text-white);
  font-size: 60px;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-round);
  line-height: 0;
  padding: 0;
  cursor: pointer;
  transition: var(--transition-normal);
  align-items: center;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

.btn-close:active {
  transform: rotate(90deg) scale(0.95);
}

.btn-close:focus {
  outline: none;
}

/* ===== BUTTON GROUPS ===== */

.btn-group {
  display: flex;
  gap: 12px;
}

.btn-group.btn-group-end {
  justify-content: flex-end;
}

.btn-group.btn-group-center {
  justify-content: center;
}

.btn-group.btn-group-between {
  justify-content: space-between;
}

/* ===== MOBILE LANDSCAPE BUTTON ADJUSTMENTS ===== */
@media (orientation: landscape) {
	@media (max-height: 500px) {
		.btn-close {
			width: 28px;
			height: 28px;
			font-size: 20px;
		}
	}
	@media (max-height: 400px) {
		.btn-close {
			width: 24px;
			height: 24px;
			font-size: 16px;
		}
	}
}

/* Source: src/assets/css/utilities/scrollbar.css */

/* ========================================
   SCROLLBAR UTILITIES
   ======================================== */

/* Default scrollbar - light theme */
.scrollbar-light::-webkit-scrollbar {
  width: 10px;
}

.scrollbar-light::-webkit-scrollbar-track {
  background: var(--color-bg-light);
  border-radius: 5px;
}

.scrollbar-light::-webkit-scrollbar-thumb {
  background: var(--color-border-medium);
  border-radius: 5px;
}

.scrollbar-light::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-dark);
}

/* Firefox support */
.scrollbar-light {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-medium) var(--color-bg-light);
}

/* Dark scrollbar - for dark backgrounds */
.scrollbar-dark::-webkit-scrollbar {
  width: 10px;
}

.scrollbar-dark::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.scrollbar-dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}

.scrollbar-dark::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Firefox support */
.scrollbar-dark {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Thin scrollbar variant */
.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: var(--color-bg-dark);
  border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--color-border-medium);
  border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-dark);
}

/* Firefox support */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-medium) var(--color-bg-dark);
}

/* Source: src/assets/css/main.css */

/* ========================================
   UTILITY CLASSES (Reusable Patterns)
   ======================================== */


/* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
@media (hover: hover) and (pointer: fine) {

	/* Radial outward transforms for each slice on hover - from center through slice center */
	.scene-section[data-scene-index="0"]:hover {
		/* Top slice: 30° angle, extended to 25px total */
		transform: translate(21.65px, -12.5px);
	}

	.scene-section[data-scene-index="1"]:hover {
		/* Bottom-right slice: 270° angle (straight down), extended to 25px total */
		transform: translate(0, 25px);
	}

	.scene-section[data-scene-index="2"]:hover {
		/* Bottom-left slice: 150° angle, extended to 25px total */
		transform: translate(-21.65px, -12.5px);
	}

	.scene-section:hover .scene-label {
		font-size: 20px;
	}
}

/* Screen reader only - visually hidden but accessible to assistive technology */

/* DIALOG BASE STYLES */

/* DIALOG HEADER - Color inherited by all children */
dialog > header {
	grid-area: header;
	background: var(--gradient-primary);
	color: var(--color-text-white);
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 10;
	gap: 20px;
}

dialog > section {
	padding: 0;
	min-height: 0;
	grid-area: body;
	overflow: hidden;
}

.back-button {
	padding: 8px 16px;
    font-size: 25px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 5px;
}

/* DIALOG CONTENT - White color inherited by children */
#text-content {
  display: block; /* visible by default */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  overflow-y: auto;
  background: var(--overlay-dark-50);
  backdrop-filter: blur(10px);
  color: var(--color-text-white);
  padding: 30px;
  line-height: 1.7;
  font-size: 18px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

#text-content:empty {
  display: none;
}

#show-references {
	animation: jiggle 0.5s ease-in-out infinite;
}

/* DIALOG FOOTER */
dialog > footer {
	grid-area: footer;
	padding: 10px 20px;
	gap: 15px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background: var(--color-bg-cream);
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	border-top: 1px solid var(--color-border-light);
	z-index: 10;
}

/* Default 5px offset from center to create spacing between slices */
.scene-section[data-scene-index="0"] {
    transform: translate(4.33px, -2.5px);
}

.scene-section[data-scene-index="1"] {
    transform: translate(0, 5px);
}

.scene-section[data-scene-index="2"] {
    transform: translate(-4.33px, -2.5px);
}

.scene-overlay {
    transition: fill 0.3s ease;
    pointer-events: none;
}

.scene-label {
    pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    transition: font-size 0.3s ease;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .menu-logo {
        width: 100px;
        height: 100px;
        margin: 0 auto 15px;
    }

    .menu-subtitle {
        font-size: 18px;
    }

    .menu-lang-btn {
        padding: 6px 16px;
        font-size: 13px;
    }
    
    .badge-notification {
        top: 80px;
        right: 20px;
        padding: 15px 20px;
    }
    
    .badge-icon {
        font-size: 44px;
    }

    .badge-icon-svg {
        width: 44px;
        height: 44px;
    }
    
    .badge-text strong {
        font-size: 10px;
    }
    
    .badge-text p {
        font-size: 9px;
    }

    .menu-stats {
        flex-direction: column;
    }

    .scenarios-grid {
        grid-template-columns: 1fr;
    }

    .gallery-header {
        padding: 20px;
    }

    .gallery-header h1 {
        font-size: 28px;
    }
    
    .minigame-container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
        height: auto;
        max-height: none;
    }
    
    .minigame-left-column {
        gap: 12px;
        overflow: visible;
    }
    
    .minigame-right-column {
        overflow: visible;
    }
    
    .minigame-dish {
        max-height: 250px;
    }
    
    .minigame-instructions {
        font-size: 14px;
        padding: 12px;
    }
    
    .minigame-ingredients {
        gap: 8px;
    }
    
    .minigame-ingredient {
        width: 110px;
        height: 110px;
    }
    
    .ingredient-label {
        font-size: 12px;
        padding: 8px 6px;
    }
    
    .minigame-feedback {
        font-size: 15px;
        padding: 12px 16px;
    }
    
        
    .minigame-results-header {
        padding: 15px 15px 0 15px;
    }
    
    .minigame-results-header h2 {
        font-size: 22px;
    }
    
    .minigame-results-header p {
        font-size: 16px;
    }
    
    .minigame-results-grid {
        padding: 0 15px 15px 15px;
        gap: 15px;
    }
    
    .minigame-footer {
        padding: 15px;
    }
    
    .minigame-retry-btn,
    .minigame-close-btn {
        padding: 12px 24px;
        font-size: 15px;
        width: 100%;
        max-width: none;
    }
}

@media (max-height: 500px) {
    .minigame-ingredients {
        gap: 6px;
        justify-content: center;
    }
    
	.back-button {
		padding: 4px 8px;
		font-size: 10px;
	}
    .minigame-ingredient {
        width: 100px;
        height: 100px;
    }
    
    .ingredient-label {
        font-size: 11px;
        padding: 8px 4px;
    }
    
    #minigame-dialog[open] {
        max-width: 95%;
        max-height: 95vh;
    }
}

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

    /* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
	@media (hover: hover) and (pointer: fine) {
		.minigame-ingredient:hover {
			transform: none;
		}
	}

	.minigame-ingredient.correct,
	.minigame-ingredient.incorrect {
		animation: none;
	}
}

/* ========================================
   TOUCH ACCESSIBILITY & MOBILE IMPROVEMENTS
   ======================================== */

/* Ensure minimum touch target sizes */
@media (pointer: coarse) {    
    /* Language and difficulty selectors */
    .language-bar .language-select-trigger,
    .difficulty-selector .btn,
    .menu-language-select .language-select-trigger {
        min-height: 34px;
        padding: 8px 12px;
    }
    
    /* Minigame interactive elements */
    .minigame-ingredient,
    .minigame-country,
    .minigame-dish,
    .memory-card,
    .drop-zone {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Quiz answer buttons */
    .quiz-answer-btn {
        padding: 12px 16px;
    }
    
    /* Scenario cards - ensure entire card is tappable */
    .scenario-card .scenario-button {
        min-height: 44px;
    }
    
    /* Scene selector sections */
    .scene-section {
        min-height: 44px;
    }

	/* Disable hover effects on touch devices for cleaner interaction */
	.minigame-ingredient:hover,
	.minigame-country:hover,
	.minigame-dish:hover,
	.memory-card:hover,
	.scenario-card:hover,
	.drop-zone:hover {
		transform: none;
	}

    /* But keep active state for touch feedback */
    .minigame-ingredient:active,
    .minigame-country:active,
    .minigame-dish:active,
    .memory-card:active,
    .btn:active {
        transform: scale(0.97);
        opacity: 0.9;
    }
}

/* Touch-specific active states for better feedback */
@media (hover: none) {
    /* Provide tap feedback instead of hover */
    button:active,
    .btn:active {
        opacity: 0.85;
        transform: scale(0.98);
    }
    
    .scenario-card:active {
        transform: scale(0.99);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    .btn,
    button {
        border-width: 2px;
    }
    
    .minigame-ingredient,
    .minigame-country,
    .memory-card {
        border-width: 3px;
    }
    
    .quiz-answer-btn {
        border-width: 2px;
    }
}

/* Source: src/assets/css/components/badges.css */

/* ========================================
   BADGES - Badge Gallery & Notifications
   ======================================== */

/* Badge gallery dialog background */
#badge-gallery {
    background: var(--color-bg-cream) url('../images/BG_Badges.webp') center / cover no-repeat;
}

/* ===== BADGE GALLERY DIALOG ===== */
.gallery-body {
    overflow: auto;
}

#badge-gallery > header {
    align-items: flex-start;
}

#badge-gallery > header h2 {
    font-size: 36px;
    padding: 0px;
}

.gallery-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin: 0;
}

/* Gallery body uses .scrollbar-light utility (from utilities/scrollbar.css) */

/* ===== GALLERY STATS ===== */
.gallery-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    padding: 30px 40px;
}

.stat-card {
    background: var(--gradient-card);
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
}

.stat-card.wide {
    grid-column: span 2;
}

.stat-number {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 5px;
}

.stat-label {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
}

.progress-bar-large {
    height: 16px;
    background: var(--color-border-medium);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* ===== BADGES SECTION ===== */
.badges-section {
    padding: 30px 40px;
}

.badges-section h2 {
    font-size: 24px;
    margin: 0 0 20px 0;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* ===== BADGE CARD ===== */
.badge-card {
    background: var(--gradient-card);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    gap: 10px;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.badge-card.earned {
	border-color: var(--color-primary);
	background: linear-gradient(135deg, #f7faf0 0%, var(--color-bg-cream) 100%);
    box-shadow: var(--shadow-card), 0 0 0 1px var(--overlay-primary-20);
}

.badge-card.locked {
    opacity: 1;
}

.difficulty-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.badge-icon-container {
    width: 64px;
    height: 64px;
}

.badge-icon-container svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.badge-icon-container.badge-icon-locked svg {
    filter: blur(2px) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    opacity: 0.25;
}

.locked-icon {
    font-size: 48px;
    opacity: 0.3;
}

.badge-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
    line-height: 1.2;
}

.badge-description {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
    line-height: 1.3;
}

.badge-status {
    font-size: 11px;
    color: var(--color-text-light);
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--color-bg-gray);
}

.badge-status.earned-status {
    color: var(--color-primary);
    background: var(--overlay-primary-10);
    font-weight: 600;
}

/* ===== STACKED BADGE STYLING ===== */
.badge-stack-container {
    width: 72px; /* 48px badge + 24px offset */
    height: 72px; /* 48px badge + 24px offset */
    position: relative;
    margin: 10px auto 0 auto;
}

.badge-stack-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    transition: transform 0.3s ease;
}

.badge-stack-item svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.badge-stack-item.is-locked svg {
    filter: blur(2px) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    opacity: 0.45;
}

.locked-badge-small {
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.gallery-description {
    padding: 20px 40px 40px;
    color: var(--color-text-secondary);
    font-size: 16px;
    margin: 0;
}

/* ===== BADGE NOTIFICATION ===== */
.badge-notification {
    position: fixed;
    top: 100px;
    right: 30px;
    z-index: 4500;
    cursor: pointer;
    background: var(--gradient-primary);
    color: var(--color-text-white);
    padding: 20px 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    transform: translateX(400px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
                opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                top 0.4s ease-out;
	width: 30%;
}

.badge-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.badge-notification-content {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 15px;
}

.badge-icon {
    font-size: 64px;
    animation: badgePulse 0.6s ease-in-out;
}

.badge-icon-svg {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    animation: badgePulse 0.6s ease-in-out;
}

.badge-icon-svg svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.badge-text strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.badge-text p {
    margin: 0px;
    font-size: 14px;
    opacity: 0.9;
}

.badge-grade {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

@media (max-height: 500px) {
    .badge-notification {
        top: 70px;
        right: 16px;
        padding: 7px 9px;
        border-radius: var(--radius-md);
    }

    .badge-notification-content {
        grid-template-columns: 50px 1fr;
        gap: 10px;
    }

    .badge-icon,
    .badge-icon-svg {
        width: 50px;
        height: 50px;
        font-size: 44px;
    }

    .badge-text strong {
        font-size: 9px;
    }

    .badge-text p {
        font-size: 8px;
    }

    .badge-grade {
        font-size: 8px;
    }
}

@media (max-height: 400px) and (orientation: landscape) {
    #badge-gallery > header {
        padding: 10px 20px;
    }
    #badge-gallery > header h2 {
        font-size: 24px;
    }
    .gallery-subtitle {
        font-size: 14px;
    }
	.gallery-stats {
        padding: 10px 20px;
    }
    .stat-card {
        padding: 10px;
    }
    .stat-number {
        font-size: 24px;
    }
    .stat-label {
        font-size: 12px;
    }
    .progress-bar-large {
        height: 12px;
    }
    .badge-card {
        padding: 2px;
		gap: 4px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
    }
    .badge-icon-container {
        width: 48px;
        height: 48px;
    }
    .badge-icon-container svg {
        width: 48px;
        height: 48px;
    }
    .locked-icon {
        font-size: 36px;
    }
    .badge-name {
        font-size: 11px;
    }
    .badge-description {
        font-size: 10px;
	}
	.badge-stack-container {
		height: 48px;
		margin: 0px auto 20px auto
	}
	.badges-section {
		padding: 0px 16px;
	}
	.difficulty-badge {	
		top: -15px;
		right: -15px;
	}
}

/* Source: src/assets/css/components/dialogs.css */

/* ========================================
   DIALOGS - Generic & Gameplay Dialogs
   ======================================== */

/* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
@media (hover: hover) and (pointer: fine) {
	.credits-item:hover {
		border-color: var(--color-accent);
		box-shadow: var(--shadow-sm);
	}
	.credits-detail-value a:hover {
		text-decoration: underline;
	}
}


/* ===== DIALOG STATES ===== */
dialog[open] {
  display: grid;
  opacity: 1;
  transform: scale(1);
  animation: dialogBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== DIALOG HEADER ===== */
dialog > header h2 {
  margin: 0;
  font-size: 26px;
  padding: 10px;
  flex: 1;
  font-weight: var(--font-weight-bold);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.01em;
}

/* ===== DIALOG CONTENT ===== */
/* Text content uses .scrollbar-dark utility (from utilities/scrollbar.css) */
/* Custom track border-radius for text content */
#text-content::-webkit-scrollbar-track {
  border-radius: 0 0 0 24px;
}

#references-content {
  padding: 30px;
  line-height: 1.7;
  font-size: 18px;
}

#references-dialog.additional-knowledge {
  background: transparent;
  position: relative;
  overflow: hidden;
}

#references-dialog.additional-knowledge::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--additional-knowledge-bg);
  background-size: cover;
  background-position: center;
  filter: blur(16px);
  transform: scale(1.05);
  z-index: 0;
}

#references-dialog.additional-knowledge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.78);
  z-index: 0;
}

#references-dialog.additional-knowledge > header,
#references-dialog.additional-knowledge > section,
#references-dialog.additional-knowledge > footer {
  position: relative;
  z-index: 1;
}

/* ===== DIALOG FOOTER ===== */
dialog > footer > button {
	float: inline-end;
	font-size: 15px;
}

/* ===== DIALOG BUTTONS ===== */
/* Show references and quiz next use: .btn.btn-primary */
/* Play minigame button uses: .btn.btn-accent.btn-lg - wiggles opposite to additional-knowledge to stand out */

.play-minigame-btn {
  margin-right: 10px;
  animation: jiggleReverse 0.5s ease-in-out infinite;
}
/* Dialog close button uses: .btn-close (from utilities/buttons.css) */


/* Closing animation */
dialog.closing {
  display: grid !important;
  animation: dialogBounceOut 0.4s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

/* ===== ZONE DIALOG ===== */
#text-dialog > section {
    position: relative;
    padding: 0px;
}

.zone-image-container {
    height: 100%;
    background: var(--color-bg-light);
}

#zone-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#zone-image.loading {
    opacity: 0;
}

#zone-image.fade-out {
    opacity: 0;
}

.image-caption {
    /* Hidden - zone name now appears in dialog header */
    display: none;
}

/* Zone dialog loading spinner */
.zone-image-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--color-accent);
    animation: spin 1s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.zone-image-container.loading::before {
    opacity: 1;
}

/* ===== DEBUG MODE ===== */
.debug-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--overlay-dark-70);
  color: var(--color-text-white);
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 2000;
  display: none;
  transition: opacity 0.3s ease;
}

.debug-hint.visible {
  display: block;
  animation: fadeInOut 2s;
}

/* ===== RESPONSIVE DIALOGS ===== */
@media (max-width: 768px) {
  dialog {
    width: 95%;
    max-width: 95%;
  }

  #text-content {
    font-size: 16px;
    padding: 20px;
    height: 35%;
  }

  #references-content {
    font-size: 16px;
    padding: 20px;
  }

  dialog > footer {
    bottom: 15px;
    right: 15px;
  }
}

/* ========================================
   ABOUT DIALOG
   ======================================== */

/* About dialog content */
.about-logo {
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto 20px;
}

/* ========================================
   CREDITS DIALOG
   ======================================== */

#credits-dialog {
  width: 95%;
}

#credits-dialog footer {
	background: var(--color-bg-body);
}

.credits-content {
  padding: 30px; 
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-bg-cream);
}

.credits-category {
  margin-bottom: 30px;
}

.credits-category h3 {
  color: var(--color-accent);
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent-light);
}

.credits-category p {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  font-style: italic;
}

.credits-item {
  background: var(--gradient-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 15px;
  transition: var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.credits-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.credits-item-name {
  font-weight: 600;
  font-size: 16px;
}

.credits-item-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.credits-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.credits-detail-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.credits-detail-value {
  font-size: 14px;
}

.credits-detail-value a {
  color: var(--color-accent);
  text-decoration: none;
}

.credits-description {
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Responsive credits */
@media (max-width: 768px) {
  .credits-content {
    padding: 20px;
  }
  
  .credits-item-details {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .credits-item-header {
    flex-direction: column;
    gap: 8px;
  }
}

.about-body {
  background: var(--color-bg-cream);
  padding: 2em;
}

.about-body h3 {
  font-size: 22px;
  color: var(--color-primary);
  margin: 0 0 15px 0;
  text-align: center;
  font-weight: var(--font-weight-bold);
}

.about-body h4 {
  font-size: 18px;
  color: var(--color-primary);
  margin: 25px 0 10px 0;
  font-weight: var(--font-weight-semibold);
}

.about-body p {
  line-height: 1.7;
  margin-bottom: 15px;
}

.about-logos {
  text-align: center;
}

.about-cofunded-logo {
  width: 200px;
  height: auto;
}

/* ========================================
   MOBILE LANDSCAPE DIALOG ADAPTATIONS
   Uses dvh (dynamic viewport height) with vh fallback
   to properly account for mobile browser UI (address bar, etc.)
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Base dialog adjustments - aggressive height reduction for mobile browser UI */
    /* Use svh (smallest viewport height) for best browser UI accommodation */
    dialog { /* Conservative fallback */
        max-height: 95svh; /* Smallest viewport - accounts for all browser UI */
        margin: auto;
    }
    
    dialog > header {
        padding: 6px 10px;
        flex-shrink: 0;
    }
    
    dialog > header h2 {
        font-size: 12px;
    }
    
    dialog > footer {
        padding: 5px 10px;
        flex-shrink: 0;
    }

	dialog > footer .quiz-controls button {
		padding: 6px 10px;
		font-size: 10px;
	}
	
    /* ===== ZONE TEXT DIALOG - CRITICAL FIX ===== */
    /* Change from absolute bottom positioning to flex layout */
    #text-dialog[open] {
        max-height: 95svh;
    }
    
    #text-dialog > section {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    
    /* Zone image - constrained height, not greedy */
    .zone-image-container {
        flex: 0 1 auto;
        max-height: 95svh;
        min-height: 80px;
        position: relative;
    }
    
    #zone-image {
        width: 100%;
        object-fit: cover;
    }
    
    /* Text content - scrollable, reasonable height */
    #text-content {
        position: relative;
        height: auto;
        max-height: 30svh;
        min-height: 60px;
        font-size: 12px;
        padding: 8px 12px;
        line-height: 1.4;
        flex-shrink: 0;
        border-radius: 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
    }
    
    /* Footer positioned in flex flow, not absolute */
    #text-dialog > footer {
        position: static; /* Override absolute positioning */
        padding: 6px 10px;
        background: var(--color-bg-body);
        flex-shrink: 0;
    }
    
    #text-dialog > footer .btn {
        padding: 5px 10px;
        font-size: 10px;
    }
    
    .play-minigame-btn {
        padding: 5px 12px;
        font-size: 11px;
    }
    
    /* References dialog */
    #references-dialog > section {
        padding: 10px 14px;
    }
    
    #references-content {
        font-size: 13px;
        padding: 10px;
        line-height: 1.4;
    }
    
    .reference-item {
        margin: 5px 0;
        font-size: 12px;
    }
    
    /* About dialog */
    #about-dialog {
		height: 90vh;
    }
    
    dialog > section {
        padding: 12px;
    }
    
    .about-logo {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }
    
    .about-body h3 {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    .about-body h4 {
        font-size: 13px;
        margin: 12px 0 6px 0;
    }
    
    .about-body p {
        font-size: 12px;
        line-height: 1.4;
        margin-bottom: 8px;
    }
    
    .about-cofunded-logo {
        width: 100px;
    }
    
    /* Credits dialog */
    #credits-dialog {
        max-height: 95dvh;
    }
    

	#credits-dialog footer button {
		padding: 4px 7px;
		font-size: 8pt;
	}
    .credits-content {
        padding: 10px;
    }
    
    .credits-category {
        margin-bottom: 12px;
    }
    
    .credits-category h3 {
        font-size: 14px;
        margin-bottom: 5px;
        padding-bottom: 3px;
    }
    
    .credits-category p {
        font-size: 11px;
        margin-bottom: 10px;
    }
    
    .credits-item {
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .credits-item-name {
        font-size: 13px;
    }
	
    .credits-item-details {
        gap: 8px;
        margin-top: 8px;
    }
    
    .credits-detail-label {
        font-size: 9px;
    }
    
    .credits-detail-value {
        font-size: 11px;
    }
    
    /* Debug hint */
    .debug-hint {
        bottom: 6px;
        padding: 3px 8px;
        font-size: 10px;
    }
}

/* Very short phones (under 400px height) */
@media (max-height: 400px) and (orientation: landscape) {
    
    dialog > header {
        padding: 4px 8px;
    }
    
    dialog > header h2 {
        font-size: 10px;
    }
    
    dialog > footer {
        padding: 4px 8px;
    }
    
    /* Zone image - very constrained */
    .zone-image-container {
        max-height: 95svh;
        min-height: 60px;
    }
    
    /* Zone text - even more compact */
    #text-content {
        min-height: 50px;
        font-size: 10px;
        padding: 6px 8px;
        line-height: 1.3;
    }
    
    #text-dialog > footer {
        position: static;
        padding: 4px 8px;
    }
    
    #text-dialog > footer .btn {
        padding: 4px 8px;
        font-size: 9px;
    }
    
    .play-minigame-btn {
        padding: 4px 10px;
        font-size: 10px;
    }
    
    .about-logo {
        width: 30px;
        height: 30px;
    }
    
    .about-body h3 {
        font-size: 12px;
    }
    
    .about-body p {
        font-size: 9px;
    }
    
}

/* Source: src/assets/css/components/feedback.css */

.feedback-trigger {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 5500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#feedback-dialog.feedback-dialog {
  width: min(560px, 95vw);
  max-width: 560px;
  height: auto;
  max-height: min(550px, 85vh);
  grid-template-rows: auto 1fr auto;
  transition: max-height 0.3s ease;
}

#feedback-dialog.feedback-dialog.gdpr-visible {
  max-height: min(620px, 85vh);
}

#feedback-dialog > section {
  padding: 20px;
  overflow-y: auto;
  background: var(--gradient-dialog);
}

/* Hidden-attribute overrides -- these classes set display explicitly,
   so the native [hidden] { display: none } gets trumped without this. */
#feedback-dialog [hidden] {
  display: none !important;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.feedback-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.feedback-form fieldset:disabled {
  opacity: 0.6;
}

.feedback-question {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feedback-label {
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.feedback-stars {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.feedback-star {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-border-dark);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}

.feedback-star.active,
.feedback-star.preview {
  color: var(--color-gold);
}

.feedback-star:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.feedback-textarea {
  width: 100%;
  resize: vertical;
  min-height: 120px;
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 15px;
  background: var(--color-bg-white);
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.feedback-text-meta {
  display: flex;
  justify-content: flex-end;
}

.feedback-char-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.feedback-field-error,
.feedback-submit-error {
  margin: 0;
  color: var(--color-error-text);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 14px;
}

.feedback-key-loading,
.feedback-key-error {
  margin: 0;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  padding: 16px;
}

.feedback-key-loading p,
.feedback-key-error p {
  margin: 0;
}

.feedback-key-error {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-key-error .btn {
  align-self: flex-start;
}

.feedback-success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  height: 100%;
}

.feedback-success-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  display: grid;
  place-items: center;
  font-size: 30px;
  color: var(--color-text-white);
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
}

.feedback-gdpr {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
}

.feedback-gdpr-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.feedback-gdpr-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

/*
 * Non-modal stacking (keeps lang bar clickable above):
 *   backdrop  6000
 *   dialog    6500
 *   lang bar  7000  (z-index in menu.css)
 */
#feedback-dialog[open] ~ .feedback-backdrop {
  display: block;
}

.feedback-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: linear-gradient(
    135deg,
    rgba(45, 51, 9, 0.7) 0%,
    rgba(60, 69, 17, 0.75) 50%,
    rgba(45, 51, 9, 0.7) 100%
  );
  backdrop-filter: blur(8px);
}

#feedback-dialog[open]:not(:modal) {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 6500;
}

.feedback-submit-btn[disabled] {
  opacity: 0.65;
}

@media (max-width: 768px) {
  .feedback-trigger {
    left: 14px;
    bottom: 14px;
    padding-inline: 14px;
  }

  .feedback-star {
    font-size: 28px;
  }
}

/* Source: src/assets/css/components/gameplay.css */

/* ========================================
   GAMEPLAY - Game Rendering & UI
   ======================================== */

/* ===== GAME CONTAINER ===== */
#game-container { 
	display: block; 
	margin: 0 auto; 
	max-width: 100%;
}

/* ===== REFERENCE LINKS ===== */
.ref-link {
	color: var(--color-accent-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

/* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
@media (hover: hover) and (pointer: fine) {
	.ref-link:hover {
		text-decoration-thickness: 2px;
	}
}

#reference-panel {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	background: var(--gradient-frosted);
	backdrop-filter: blur(10px);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 20px;
	z-index: 1000;
	display: none;
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid var(--color-border-accent);
}

.reference-item {
	margin: 8px 0;
	line-height: 1.5;
}

.reference-item strong {
	min-width: 24px;
	display: inline-block;
}

/* ===== STARS DISPLAY ===== */
.stars-display {
	position: fixed;
	top: 80px;
	right: 16px;
	font-size: 24px;
	z-index: 5000;
    background: var(--gradient-frosted);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 30px;
    box-shadow: var(--shadow-card);
    gap: 15px;
    border: 1px solid var(--color-border-accent);
}

/* ===== LOADING SCREEN ===== */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-warm);
    z-index: 9999;
}

.loading-content h2 {
    margin-bottom: 20px;
}

/* ===== STAR ANIMATION ===== */
.star-pulse {
    animation: pulse 0.6s ease-in-out;
}

/* ===== GAMEPLAY CONTAINER ===== */

/* ===== LANGUAGE SELECTOR ===== */
.gameplay-container .language-bar {
    display: none;
}

/* ===== SCENE WRAPPER (Canvas Renderer) ===== */
.scene-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--color-bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== BLURRED BACKGROUND ===== */
.scene-background-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(40px);
    transform: scale(1.1);
    opacity: 0.6;
    z-index: 0;
}

/* ===== MAIN CANVAS ===== */
.scene-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    cursor: default;
    object-fit: contain;
    z-index: 1;
}

/* ========================================
   GAMEPLAY HUD - Responsive Mobile Layout
   ======================================== */

/* Default HUD element positions are set via absolute positioning in their respective files.
   These mobile overrides create a more compact layout for phone landscape screens. */

/* Mobile landscape: Compact HUD */
@media (max-width: 600px) and (orientation: landscape) {
    /* Hide text labels, show only icons for very narrow screens */
    .menu-btn,
    .scenes-btn {
        padding: 6px 10px;
    }
}

/* Height-constrained viewports - collapse nav into a hamburger */
@media (max-height: 500px) {
    #gameplay-container > header {
        position: relative;
    }

    #gameplay-container > header nav {
        position: fixed;
        top: 10px;
        left: 12px;
        z-index: 6000;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: var(--gradient-frosted);
        backdrop-filter: blur(10px);
        border-radius: 14px;
        box-shadow: var(--shadow-card);
        min-width: 40px;
        min-height: 40px;
        overflow: visible;
        transition: width 0.24s ease, height 0.24s ease, padding 0.24s ease, box-shadow 0.24s ease, opacity 0.2s ease, background-color 0.2s ease, transform 0.24s ease;
        cursor: pointer;
        align-items: center;
        color: var(--color-text-primary, #111);
        border: 1px solid var(--color-border-accent);
        transform-origin: top left;
        transform: scale(1);
    }

    /* Inline SVG icon for hamburger/X */
    #gameplay-container > header nav::before {
        content: "";
        display: block;
        align-self: center;
        margin-top: 4px;
        width: 26px;
        height: 20px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg width='26' height='20' viewBox='0 0 26 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h20M3 10h20M3 16h20' stroke='currentColor' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
        transition: opacity 0.2s ease, background-image 0.2s ease;
        position: absolute;
        top: 5px;
        left: 5px;
    }

    #gameplay-container > header nav .menu-btn,
    #gameplay-container > header nav .scenes-btn {
        position: static;
        width: 100%;
        justify-content: flex-start;
        padding: 12px;
        font-size: 15px;
        box-shadow: inset 0 0 0 1px var(--color-border-light);
        margin-top: 8px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
    }

    /* Hide children until nav is opened */
    #gameplay-container > header nav > * {
        display: none;
        opacity: 0;
        pointer-events: none;
    }

    #gameplay-container > header nav.nav-open {
        top: 0;
        left: 0;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        padding: 60px 18px 22px;
        border-radius: 0;
        box-shadow: var(--shadow-xl);
        cursor: default;
        gap: 12px;
        align-items: stretch;
        overflow-y: auto;
        background: var(--overlay-dark-60);
        animation: gameplay-nav-expand 0.24s ease forwards;
        transform: scale(1);
    }

    #gameplay-container > header nav.nav-closing {
        top: 0;
        left: 0;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        padding: 60px 18px 22px;
        border-radius: 0;
        box-shadow: var(--shadow-xl);
        align-items: stretch;
        background: var(--overlay-dark-60);
        animation: gameplay-nav-collapse 0.2s ease forwards;
        transform-origin: top left;
    }

    /* Swap icon to X when expanded */
    #gameplay-container > header nav.nav-open::before {
        background-image: url("data:image/svg+xml,%3Csvg width='26' height='20' viewBox='0 0 26 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4l18 12M22 4L4 16' stroke='currentColor' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
        transform: none;
    }

    #gameplay-container > header nav.nav-closing::before {
        background-image: url("data:image/svg+xml,%3Csvg width='26' height='20' viewBox='0 0 26 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4l18 12M22 4L4 16' stroke='currentColor' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
        animation: hamburger-reset 0.18s ease forwards;
    }

    #gameplay-container > header nav.nav-open > * {
        display: block;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    #gameplay-container > header nav.nav-closing > * {
        display: none;
        opacity: 0;
        pointer-events: none;
        transform: none;
    }

    /* Expand nav buttons and bring in difficulty inside the overlay */
    #gameplay-container > header nav.nav-open .menu-btn,
    #gameplay-container > header nav.nav-open .scenes-btn {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    /* Collapse and move difficulty selector into the overlay */
    #gameplay-container .difficulty-selector {
        position: initial;
        top: auto;
        left: auto;
        bottom: auto;
        right: auto;
        z-index: 6001;
        gap: 10px;
        flex-wrap: wrap;
        display: none;
    }

    #gameplay-container > header nav.nav-open ~ .difficulty-selector {
        display: flex;
    }

    #gameplay-container > header nav.nav-closing ~ .difficulty-selector {
        display: none;
    }

    @keyframes gameplay-nav-expand {
        from { transform: scale(0.1); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    @keyframes gameplay-nav-collapse {
        from { transform: scale(1); opacity: 1; }
        to { transform: scale(0.1); opacity: 0; }
    }

    #gameplay-container .difficulty-selector .btn {
        flex: 1 1 30%;
        min-width: 120px;
        padding: 10px 12px;
        font-size: 14px;
        min-height: 36px;
    }
	
    /* Menu and Scenes buttons - top right, smaller */
    .menu-btn {
        top: 8px;
        right: 8px;
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .scenes-btn {
        top: 8px;
        right: 90px;
        padding: 6px 12px;
        font-size: 12px;
    }
    
    /* Stars display - smaller and repositioned */
    .stars-display {
        top: 4px;
        right: 10px;
        font-size: 16px;
        padding: 6px 12px;
        border-radius: 20px;
    }
    
    /* Quiz button - moved to bottom right corner to avoid blocking scene */
    #start-quiz-btn {
        top: 8px;
        left: 50%;
        transform: none;
        padding: 3px 6px;
        font-size: 12px;
    }
    
    /* Difficulty selector - left side, compact */
    .difficulty-selector {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 5000;
        gap: 4px;
    }
    
    .difficulty-selector .btn {
        padding: 4px 8px;
        font-size: 10px;
        min-height: 28px;
    }
    
    /* Language bar - bottom left corner */
    .language-bar {
        position: absolute;
        bottom: 8px;
        left: 8px;
        top: auto;
        z-index: 5000;
        gap: 4px;
    }
    
    .language-bar .language-select-trigger {
        padding: 4px 8px;
        font-size: 10px;
        min-height: 28px;
    }
}


/* Very short phones (under 400px height) */
@media (max-height: 400px) and (orientation: landscape) {
    .menu-btn,
    .scenes-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .scenes-btn {
        right: 70px;
    }
    
    .stars-display {
        font-size: 14px;
        padding: 4px 10px;
    }
    
    #start-quiz-btn {
        padding: 5px 12px;
        font-size: 11px;
    }
    
    .difficulty-selector .btn,
    .language-bar .language-select-trigger {
        padding: 3px 6px;
        font-size: 9px;
        min-height: 24px;
    }
}

/* Source: src/assets/css/components/intro.css */

#intro-dialog.intro-dialog {
  width: min(520px, 95vw);
  max-width: 520px;
  height: auto;
  max-height: min(520px, 85vh);
  grid-template-rows: 1fr auto;
}

#intro-dialog > section {
  padding: 28px 24px 20px;
  overflow-y: auto;
  background: var(--gradient-dialog);
}

#intro-dialog-title {
  margin: 0 0 12px;
  text-align: center;
}

.intro-body {
  margin: 0 0 20px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  text-align: center;
}

.intro-questions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.intro-star {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-border-dark);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}

.intro-star.active,
.intro-star.preview {
  color: var(--color-gold);
}

.intro-star:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.intro-sync {
  grid-area:header;
  text-align: center;
}

.intro-sync-heading {
  margin: 0px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
}

.intro-sync-input {
  width: 100%;
  max-width: 320px;
  padding: 8px 12px;
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: 16px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  background: var(--color-bg-white);
}

.intro-sync-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.intro-sync-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-muted);
  opacity: 0.6;
}

.intro-sync-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.intro-sync-error {
  margin: 6px 0 0;
  color: var(--color-error-text);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
}

#intro-dialog > footer {
  justify-content: center;
}

#intro-play-btn[disabled] {
  opacity: 0.55;
}

/*
 * Stacking within #main-menu's context:
 *   backdrop  6000  – sibling shown when dialog is [open]
 *   dialog    6500  – centered intro dialog
 *   lang bar  7000  – stays clickable (z-index in menu.css)
 */
#intro-dialog[open] ~ .intro-backdrop {
  display: block;
}

.intro-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(0, 0, 0, 0.6);
}

#intro-dialog[open]:not(:modal) {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 6500;
}

@media (max-width: 768px) {
  .intro-star {
    font-size: 28px;
  }
}

/* Source: src/assets/css/components/menu.css */

/* ========================================
   MENU - Main Menu Interface
   ======================================== */


/* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
@media (hover: hover) and (pointer: fine) {
	.about-btn:hover {
		box-shadow: var(--shadow-lg);
	}
	
	.menu-logo:hover {
		transform: scale(1.05);
	}

	.scenario-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 12px 32px rgba(0,0,0,0.3);
	}
	
	.scenario-card.locked:hover {
		transform: none;
	}

	/* Hover effects */
	.scenario-card:hover .star-layer-bronze {
		transform: translate(-1px, 1px);
	}

	.scenario-card:hover .star-layer-silver {
		transform: translate(0px, 0px);
	}

	.scenario-card:hover .star-layer-gold {
		transform: translate(1px, -1px);
	}

	.scenario-card:hover .scenario-button:not(:disabled) {
		background: var(--color-primary-dark);
	}

	.scenario-button:hover {
		background: var(--color-primary-dark);
	}
}


/* ===== MENU BUTTON (Return to Menu) ===== */
/* Uses: .btn.btn-primary.btn-pill with custom positioning */
.menu-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* ===== SCENES BUTTON ===== */
/* Uses: .btn.btn-primary.btn-pill with custom positioning */
.scenes-btn {
    position: absolute;
    top: 20px;
    right: 140px;
    z-index: 1000;
}

/* ===== MAIN MENU CONTAINER ===== */
.main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-bg-cream) url('../images/BG_Menu.webp') center / cover no-repeat;
    z-index: 5000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Decorative background layer */
.main-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Subtle organic shapes */
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(106, 126, 15, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(238, 141, 74, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 70% 80%, rgba(255, 210, 50, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 10% 70%, rgba(106, 126, 15, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Subtle dot pattern overlay */
.main-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--pattern-dots);
    background-size: 24px 24px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.menu-content {
    max-width: 1200px;
    width: 100%;
    padding: 0;
    position: relative;
    max-height: 100vh;
    z-index: 1;
    margin-top: -8px;
}

/* Show vertical scroll bar when viewport height is below 825px */
@media (max-height: 825px) {
    .menu-content {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* ===== ABOUT BUTTON ===== */
/* Uses: .btn.btn-primary.btn-round with custom positioning */
.about-btn {
	position: fixed;
	z-index: 2000;
	outline: 3px rgba(255, 255, 255, 0.8) solid;
    bottom: 20px;
    right: 40px;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

/* ===== SETTINGS BUTTON ===== */
/* Uses: .btn.btn-primary.btn-round with custom positioning */
.settings-btn {
	position: fixed;
	z-index: 2000;
	outline: 3px rgba(255, 255, 255, 0.8) solid;
    top: 20px;
    right: 40px;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

dialog#about-dialog footer {
	background: var(--color-bg-body);
}

.about-btn svg {
    display: block;
}

/* ===== MENU HEADER ===== */
.menu-header {
    margin-bottom: 4px;
    margin-top: 0;
}

/* Wrapper gives logo room to scale on hover without being clipped by overflow */
.menu-logo-wrapper {
    display: inline-block;
    padding: 8px;
    box-sizing: content-box;
}

.menu-logo {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
}

.menu-subtitle {
    font-size: 24px;
    margin: 0;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* ===== MENU LANGUAGE BAR ===== */
.menu-language-bar {
    position: fixed;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 10px;
    background: var(--overlay-cream);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 25px;
    z-index: 7000;
    border: 1px solid var(--color-border-accent);
    box-shadow: var(--shadow-sm);
}

/* Language select */
.menu-language-select {
    min-width: 160px;
}

/* ===== MENU STATS ===== */
.menu-stats {
    background: var(--gradient-frosted);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    border: 1px solid var(--color-border-accent);
    box-shadow: var(--shadow-card);
}

.stat-item {
    flex: 1;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
}

.progress-bar {
    height: 12px;
    background: linear-gradient(90deg, var(--color-bg-gray) 0%, var(--color-border-light) 100%);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(106, 126, 15, 0.3);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    border-radius: 6px 6px 0 0;
}

/* Badges button uses: .btn.btn-gold.btn-lg */
.badges-button {
    white-space: nowrap;
}


/* ===== SCENARIOS SECTION ===== */
.scenarios-section h2 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: var(--font-weight-bold);
}

.scenarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
    min-height: 280px;
    align-content: start;
}

/* ===== SCENARIO CARDS ===== */
.scenario-card {
    background: var(--gradient-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    user-select: none;
    cursor: pointer;
    border: 1px solid var(--color-border-light);
    transition: var(--transition-bounce);
    display: flex;
    flex-direction: column;
    min-height: 280px;
}


.scenario-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.scenario-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    background: var(--color-border-medium);
}

.scenario-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scenario-stars-overlay {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 180px;
    height: 45px;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.85);
    padding: 12px 24px;
    border-radius: 30px;
    backdrop-filter: blur(1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark-70);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.scenario-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(180deg, transparent 0%, var(--color-bg-cream) 100%);
}

.scenario-title {
    font-size: 22px;
    margin: 0 0 15px 0;
    min-height: 3.3em; /* Reserve space for 2 lines */
    line-height: 1.3;
}

.scenario-bottom {
    margin-top: auto;
}

.scenario-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

/* ===== LAYERED STARS DISPLAY ===== */
.scenario-stars-layered {
    position: relative;
    height: 42px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.star-layer {
    position: absolute;
    display: flex;
    gap: 4px;
    font-size: 30px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.star-layer .star {
    display: inline-block;
}

/* Bronze layer (Beginner) - back */
.star-layer-bronze {
    left: 10px;
    top: 10px;
    color: #cd7f32;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
    z-index: 1;
}

/* Silver layer (Intermediate) - middle */
.star-layer-silver {
    left: 15px;
    top: 5px;
    color: #c0c0c0;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
    z-index: 2;
}

/* Gold layer (Advanced) - front */
.star-layer-gold {
    left: 20px;
    top: 0;
    color: #ffd700;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
    z-index: 3;
}

/* Star states */
.star-layer .star.filled {
    opacity: 1;
}

.star-layer .star.empty {
    opacity: 0.25;
}

.star-layer .star.partial {
    transition: opacity 0.3s ease;
}

.stars-mini {
    font-size: 18px;
    color: var(--color-gold);
}

.progress-text {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.scenario-button {
    width: 100%;
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    pointer-events: none;
}


.scenario-button.disabled {
    background: var(--color-text-light);
    cursor: not-allowed;
}

/* ========================================
   MOBILE LANDSCAPE MENU ADAPTATIONS
   For phone-sized screens in landscape
   ======================================== */

/* Medium screens and tablets */
@media (max-width: 900px) {
    .menu-content {
        padding: 0 16px;
        overflow-y: auto;
    }
    
    .menu-logo {
        width: 100px;
        height: 100px;
    }
    
    .menu-subtitle {
        font-size: 18px;
    }
    
    .menu-stats {
        padding: 20px;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .scenarios-section h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .scenarios-grid {
        gap: 20px;
        min-height: 660px;
    }

    .scenario-card {
        min-height: 320px;
    }
}

@media (max-width: 640px) {
    .scenarios-grid {
        min-height: 1000px;
    }
}

/* Phone landscape - height constrained */
@media (max-height: 500px) and (orientation: landscape) {
    .main-menu {
        overflow: hidden;
        justify-content: flex-start;
        padding-top: 0;
    }
    
    .menu-content {
        padding: 10px 20px 80px;
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .settings-btn {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        padding: 6px;
    }
    
    .settings-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .menu-header {
        margin-bottom: 8px;
        margin-top: 0;
    }
    
    .menu-logo {
        width: 60px;
        height: 60px;
    }
    
    .menu-subtitle {
        font-size: 14px;
    }
    
    .menu-language-bar {
        top: 8px;
        left: 8px;
        padding: 4px 8px;
        gap: 6px;
    }
    
    .menu-language-select .language-select-trigger {
        padding: 4px 28px 4px 10px;
        font-size: 11px;
        min-height: 28px;
    }
    
    .about-btn {
        bottom: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        padding: 6px;
    }
    
    .about-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .menu-stats {
        padding: 12px;
        gap: 12px;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .stat-item {
        flex: 1 1 45%;
        min-width: 120px;
    }
    
    .stat-label {
        font-size: 11px;
        margin-bottom: 4px;
    }
    
    .stat-value {
        font-size: 12px;
        margin-top: 4px;
    }
    
    .progress-bar {
        height: 8px;
    }
    
    .badges-button {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .scenarios-section h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .scenarios-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
        margin-bottom: 20px;
        min-height: 452px;
    }
    
    .scenario-card {
        border-radius: 10px;
        min-height: 220px;
    }
    
    .scenario-thumbnail {
        padding-top: 50%; /* Slightly less tall */
    }
    
    .scenario-stars-overlay {
        top: 8px;
        width: 120px;
        height: 32px;
        padding: 6px 12px;
    }
    
    .scenario-stars-layered {
        height: 28px;
        width: 120px;
    }
    
    .star-layer {
        font-size: 18px;
        gap: 2px;
    }
    
    .star-layer-bronze {
        left: 6px;
        top: 6px;
    }
    
    .star-layer-silver {
        left: 9px;
        top: 3px;
    }
    
    .star-layer-gold {
        left: 12px;
        top: 0;
    }
    
    .scenario-info {
        padding: 10px;
    }
    
    .scenario-title {
        font-size: 14px;
        min-height: 2.6em;
        margin-bottom: 8px;
    }
    
    .scenario-progress {
        margin-bottom: 8px;
    }
    
    .progress-text {
        font-size: 11px;
    }
    
    .scenario-button {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Very short phones (under 400px height) */
@media (max-height: 400px) and (orientation: landscape) {
    .settings-btn {
        top: 6px;
        right: 6px;
        width: 32px;
        height: 32px;
        padding: 4px;
    }
    
    .settings-btn svg {
        width: 16px;
        height: 16px;
    }
    
	.menu-header {
        height: 40px;
	}
    .menu-logo {
        width: 40px;
        height: 40px;
		position:absolute;
		top: 8px;
		right: 8px;
		z-index: 1000;
    }
    
    .menu-subtitle {
        display:none;
    }
    
    .menu-stats {
        padding: 8px;
        gap: 8px;
    }
    
    .stat-item {
        min-width: 100px;
    }
    
    .badges-button {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .scenarios-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 8px;
    }
    
    .scenario-title {
        font-size: 12px;
    }
    
    .scenario-button {
        padding: 6px 10px;
        font-size: 11px;
    }
	
	dialog#about-dialog footer button {
		padding: 4px 7px;
		font-size: 8pt;
	}
}

/* Source: src/assets/css/components/minigame.css */

/* ========================================
   MINIGAME - Ingredient Matching Game
   ======================================== */

#minigame-dialog {
	user-select: none;
}  

/* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
@media (hover: hover) and (pointer: fine) {
	.minigame-ingredient:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 20px rgba(0,0,0,0.15);
		border-color: var(--color-accent);
	}
	
	.minigame-result-card:hover {
		transform: translateY(-5px);
	}

	.minigame-continue-btn:hover,
	.minigame-retry-btn:hover {
		background: var(--color-primary-dark);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(106, 126, 15, 0.3);
	}

	.minigame-close-btn:hover {
		background: #4b5563;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.minigame-country:hover,
	.minigame-dish:hover {
		border-color: var(--color-accent);
		transform: translateY(-2px);
		box-shadow: var(--shadow-md);
	}

	.memory-card:hover {
		transform: scale(1.05);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
}

/* ===== MINIGAME HEADER ===== */
.minigame-progress {
    background: var(--overlay-white-20);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

/* ===== MINIGAME 2-COLUMN LAYOUT ===== */
.minigame-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    height: calc(100vh - 200px);
    max-height: calc(100% - 40px);
    overflow: hidden;
    background: var(--color-bg-cream);
}

/* Results screen uses full area */
.minigame-container:has(.minigame-results-wrapper) {
    display: flex;
    padding: 0;
}

.minigame-left-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}

/* ===== MINIGAME RIGHT COLUMN (INGREDIENTS) ===== */
/* Uses .scrollbar-thin utility (from utilities/scrollbar.css) */
.minigame-right-column {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
	height: 100%;
}

/* ===== INSTRUCTIONS ===== */
.minigame-instructions-wrapper {
    position: relative;
    flex-shrink: 0;
}

.minigame-instructions {
    font-size: 18px;
    margin: 0;
    padding: 14px 18px;
    background: var(--color-info-bg-alt);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-accent);
}

/* ===== DISH DISPLAY ===== */
.minigame-dish {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 10px;
    background: var(--color-bg-white);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 100px;
    justify-content: center;
}

.minigame-dish img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    object-fit: contain;
    background: linear-gradient(90deg, var(--color-border-medium) 25%, var(--color-border-medium) 50%, var(--color-border-medium) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ===== MINIGAME RIGHT COLUMN CONTENT ===== */
.minigame-right-column > .minigame-section {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    width: 100%;
}

/* ===== COUNTRY FLAGS IN CONTAINER ===== */

.minigame-ingredient {
    background: var(--color-bg-white);
    border: 3px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
    width: 180px;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Keyboard focus styles */
.minigame-ingredient:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3), 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.minigame-ingredient:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
    transform: none;
}

/* High contrast focus for accessibility */
@media (prefers-contrast: high) {
    .minigame-ingredient:focus {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

.minigame-ingredient img {
    display: none;
}

.ingredient-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.9);
    padding: 12px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ===== INGREDIENT FEEDBACK ===== */
.minigame-ingredient.correct {
    border-color: var(--color-success-alt);
    background: var(--color-success-bg-alt);
    animation: correctPulse 0.6s ease;
}

.minigame-ingredient.incorrect {
    border-color: var(--color-error-alt);
    background: var(--color-error-bg-alt);
    animation: shake 0.5s;
}

.minigame-feedback {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    font-size: 17px;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.minigame-feedback.correct {
    background: var(--color-success-alt);
    color: var(--color-text-white);
}

.minigame-feedback.incorrect {
    background: var(--color-error-alt);
    color: var(--color-text-white);
}

/* ===== LOADING STATES ===== */

.minigame-dish img[src] {
    background: none;
    animation: none;
}

/* Loading spinner for dish images */

.minigame-dish::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-bg-light);
    border-top: 4px solid var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.minigame-dish.loading::before {
    opacity: 1;
}

/* Disable interaction during loading */
.minigame-ingredient.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* ===== MINIGAME RESULTS SCREEN ===== */
.minigame-results-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: 100%;
    align-items: center;
    overflow: hidden;
    padding: 20px;
}

.minigame-results-wrapper .minigame-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-shrink: 0;
}

.minigame-results-header {
    text-align: center;
    margin-bottom: 10px;
    padding: 30px 30px 10px 30px;
    flex-shrink: 0;
}

.minigame-results-header h2 {
    font-size: 28px;
    margin: 0 0 10px 0;
}

.minigame-results-header p {
    font-size: 18px;
    color: var(--color-text-secondary);
    margin: 0;
}

.minigame-results-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow-y: auto;
    flex: 1;
}

.minigame-result-card {
    background: var(--color-bg-light);
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s;
    width: 200px;
    flex-shrink: 0;
}

.minigame-result-card.perfect {
    border: 4px solid #4CAF50; /* Green border for correct */
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.4); /* Green shadow */
    background: rgba(76, 175, 80, 0.05); /* Light green background */
}

.minigame-result-card.had-errors {
    border: 4px solid #F44336; /* Red border for incorrect */
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.4); /* Red shadow */
    background: rgba(244, 67, 54, 0.05); /* Light red background */
}

.result-image-container {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: var(--color-bg-dark);
    border-radius: 12px;
    overflow: hidden;
}

.result-dish-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.result-dish-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.result-status {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    display: inline-block;
	font-size: 20px;
	min-width: 24px;
	text-align: center;
}

.minigame-result-card.perfect .result-status {
    background: var(--color-success-bg-alt);
    color: var(--color-success-alt);
}

.minigame-result-card.had-errors .result-status {
    background: var(--color-warning-bg);
    color: var(--color-warning-alt);
}

/* ===== COUNTRY-DISH MATCHING RESULTS ===== */
.result-country-info {
    margin-bottom: 8px;
    font-size: 14px;
    text-align: center;
}

.selected-country.correct {
    color: var(--color-success);
    font-weight: 600;
}

.selected-country.incorrect {
    color: var(--color-error);
    font-weight: 600;
}

.correct-country {
    color: var(--color-success);
    font-weight: 600;
    margin-top: 4px;
    font-style: italic;
}

/* ===== MINIGAME FOOTER & BUTTONS ===== */
.minigame-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    width: 100%;
}

.minigame-continue-btn,

.minigame-retry-btn,
.minigame-close-btn {
    padding: 15px 50px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
    max-width: 300px;
}

.minigame-continue-btn,
.minigame-retry-btn {
    background: var(--color-primary);
}

.minigame-close-btn {
    background: #6b7280;
}

.minigame-continue-btn:active,
.minigame-retry-btn:active,
.minigame-close-btn:active {
    transform: translateY(0);
}

.minigame-close-btn:focus {
    outline: none;
}

.minigame-restart-btn {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-white);
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
    flex-shrink: 0;
}
.minigame-restart-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.7);
}
.minigame-restart-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* ===== RESPONSIVE MINIGAME LAYOUT ===== */
@media (max-width: 1024px) {
    .minigame-container {
        gap: 15px;
        padding: 15px;
        max-height: 550px;
    }
    
    .minigame-left-column {
        gap: 12px;
    }
    
    .minigame-instructions {
        font-size: 16px;
        padding: 12px 15px;
    }
    
    
    .minigame-ingredient {
        width: 140px;
        height: 140px;
    }
    
    .ingredient-label {
        font-size: 13px;
        padding: 10px 6px;
    }
    
    .minigame-results-header {
        padding: 20px 20px 0 20px;
    }
    
    .minigame-results-grid {
        padding: 0 20px 20px 20px;
    }
    
    .minigame-footer {
        padding: 15px 20px;
    }
    
    .minigame-retry-btn,
    .minigame-close-btn {
        padding: 12px 30px;
        font-size: 16px;
    }
}

/* ========================================
   COUNTRY-DISH MATCHING MINIGAME
   ======================================== */

/* ===== MINIGAME SECTIONS ===== */
.minigame-section {
    margin-bottom: 0px;
}

.minigame-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
	margin-top:0px;
}

.minigame-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    padding: 10px;
}

/* ===== COUNTRIES SECTION ===== */
.countries-section {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: 25px;
    border: 2px solid var(--color-accent-light);
	height:100%;
}

.countries-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.minigame-country {
    position: relative;
    align-items: center;
    padding: 10px;
    background: var(--color-bg-white);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    overflow: hidden;
}

.minigame-country.selected,
.minigame-dish.selected {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
    box-shadow: var(--shadow-md);
}

.minigame-country.correct,
.minigame-dish.correct {
    border-color: var(--color-success);
    background: var(--color-success-light);
}

.minigame-country.incorrect,
.minigame-dish.incorrect {
    border-color: var(--color-error);
    background: var(--color-error-light);
    animation: shake 0.5s ease-in-out;
}

.minigame-country.matched,
.minigame-dish.matched {
    border-color: var(--color-success);
    background: var(--color-success-light);
    opacity: 0.7;
    cursor: default;
}

.country-flag {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.country-name {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    line-height: 1.2;
    text-shadow: #fff 0px 0 2px, #fff 0px 0 2px, #fff 0px 0 2px, #fff 0px 0 2px, #fff 0px 0 2px;
    padding: 0px 8px;
    border-radius: var(--radius-sm);
    z-index: 2;
    max-width: calc(100% - 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== DISHES SECTION ===== */
.dishes-section {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 2px solid var(--color-accent-light);
}

.dish-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
}

.dish-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

/* ===== ANIMATIONS ===== */

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .minigame-items {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
    
    .minigame-country,
    .minigame-dish {
        padding: 10px 8px;
        min-height: 100px;
    }

    .dish-image {
        width: 50px;
        height: 50px;
    }
    
    .country-name,
    .dish-name {
        font-size: 12px;
    }
    
    .minigame-section h3 {
        font-size: 16px;
		margin:0px;
    }
    
    .countries-section,
    .dishes-section {
        padding: 15px;
    }

    .countries-container {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .minigame-country {
        padding: 10px 8px;
        min-height: 100px;
        font-size: 12px;
    }

    .country-flag {
        width: 60px;
        height: 48px;
    }

    .country-name {
        font-size: 10px;
        padding: 2px 4px;
        bottom: 4px;
    }

    .ingredients-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 8px;
    }
}

/* ===== MEMORY MATCH MINIGAME ===== */
.memory-section {
    padding: 15px;
}

.memory-section h3 {
    font-size: 16px;
    margin: 0 0 15px 0;
    text-align: center;
}

/* Memory match results styling */
.result-memory-match {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    text-align: center;
}

.memory-match-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    justify-items: center;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding: 10px;
}

/* Full-width memory match layout */
.minigame-right-column:has(.memory-grid) {
    width: 100% !important;
    max-width: 100% !important;
}

.minigame-right-column:has(.memory-grid) .memory-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    max-width: 800px;
    margin: 0 auto;
}

.memory-card {
    width: 120px;
    height: 120px;
    background: var(--overlay-white-90);
    border-radius: 12px;
    border: 2px solid var(--primary-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.memory-card.revealed {
    background: white;
    border-color: var(--success-green);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.memory-card.matched {
    background: var(--success-green-light);
    border-color: var(--success-green);
    cursor: default;
    animation: matchPulse 0.6s ease-out;
}

.memory-card.incorrect {
    background: var(--error-red-light);
    border-color: var(--error-red);
    animation: shake 0.5s ease-in-out;
}

.memory-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    text-align: center;
}

.memory-card.revealed .memory-card-content,
.memory-card.matched .memory-card-content {
    opacity: 1;
}

.memory-flag,
.memory-dish {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}

.memory-country-name,
.memory-dish-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
    max-width: 100px;
    word-wrap: break-word;
}

/* Memory match animations */
@keyframes matchPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Mobile responsive for memory match */
@media (max-width: 768px) {
    .memory-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    }

    .memory-card {
        width: 100px;
        height: 100px;
    }

    .memory-flag,
    .memory-dish {
        width: 40px;
        height: 40px;
    }

    .memory-country-name,
    .memory-dish-name {
        font-size: 10px;
        max-width: 80px;
    }
}

/* ========================================
   MOBILE LANDSCAPE MINIGAME ADAPTATIONS
   Phone screens in landscape orientation
   Uses dvh (dynamic viewport height) with vh fallback
   to properly account for mobile browser UI
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Minigame dialog: 2-column layout – game left, controls right */
    #minigame-dialog[open] {
        max-height: 95svh;
        margin: 2svh auto;
        grid-template-columns: 1fr 130px;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "body header"
            "body footer";
    }

    #minigame-dialog > header {
        flex-direction: column;
        align-items: stretch;
        padding: 8px;
        gap: 6px;
        border-radius: 0 var(--radius-xl) 0 0;
        border-left: 1px solid rgba(255, 255, 255, 0.15);
    }

    #minigame-dialog > header h2 {
        font-size: 10px;
        padding: 2px 0;
        text-align: center;
        line-height: 1.2;
    }

    #minigame-dialog > section {
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
        overflow: hidden;
    }

    #minigame-dialog > footer.minigame-footer {
        border-top: 1px solid var(--color-border-light);
        border-left: 1px solid var(--color-border-light);
        border-radius: 0 0 var(--radius-xl) 0;
        flex-direction: column;
        padding: 6px 8px;
        gap: 4px;
    }

    #minigame-dialog > footer.minigame-footer .btn {
        font-size: 10px;
        padding: 6px 8px;
        width: 100%;
        text-align: center;
    }

    .minigame-progress {
        padding: 2px 5px;
        font-size: 8px;
    }

    .minigame-restart-btn {
        font-size: 10px;
        padding: 4px 8px;
        width: 100%;
        text-align: center;
    }

    #minigame-dialog .btn-close {
        width: 28px;
        height: 28px;
        font-size: 32px;
        align-self: center;
        flex-shrink: 0;
    }

    /* Container layout - side by side, use svh for height */
    .minigame-container {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 6px; /* Fallback */
        height: calc(78svh - 80px);
        max-height: calc(78svh - 80px);
        flex: 1;
        min-height: 0;
    }
    
    .minigame-left-column {
        gap: 6px;
        min-height: 0;
        overflow-y: auto;
    }
    
    .minigame-instructions {
        font-size: 14px;
        padding: 8px 10px;
        flex-shrink: 0;
    }
    
    .minigame-feedback {
        font-size: 14px;
        padding: 6px 10px;
    }
    
    .minigame-dish {
        border-radius: 8px;
        flex: 1;
        padding: 6px 5px;
        min-height: 60px;
    }
    
    /* Right column ingredients */
    .minigame-right-column {
        padding-right: 4px;
        min-height: 0;
    }
    
    .ingredients-grid {
        grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
        gap: 6px;
    }
    
    .minigame-ingredient {
        width: 85px;
        height: 85px;
        border-width: 2px;
    }
    
    .ingredient-label {
        font-size: 9px;
        padding: 5px 3px;
    }
    
    /* Countries section */
    .countries-section {
        padding: 8px;
    }
    
    .countries-container {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        gap: 6px;
    }
    
    .minigame-country {
        padding: 5px;
        min-height: 60px;
    }
    
    .country-flag {
        width: 45px;
        height: 34px;
    }
    
    .country-name {
        font-size: 8px;
        bottom: 3px;
        padding: 1px 3px;
    }
    
    .minigame-section h3 {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    /* Dishes section */
    .dishes-section {
        padding: 8px;
    }
    
    .dish-image {
        width: 35px;
        height: 35px;
    }
    
    .dish-name {
        font-size: 10px;
    }
    
    /* Results screen - use svh */
    .minigame-results-wrapper {
        padding: 6px;
        gap: 6px;
        max-height: calc(78svh - 70px);
        overflow-y: auto;
    }
    
    .minigame-results-header {
        padding: 8px;
        flex-shrink: 0;
    }
    
    .minigame-results-header h2 {
        font-size: 16px;
        margin-bottom: 3px;
    }
    
    .minigame-results-header p {
        font-size: 12px;
    }
    
    .minigame-results-grid {
        gap: 10px;
    }
    
    .minigame-result-card {
        width: 120px;
        padding: 8px;
        border-radius: 8px;
    }
    
    .result-image-container {
        height: 65px;
        margin-bottom: 6px;
        border-radius: 6px;
    }
    
    .result-dish-name {
        font-size: 11px;
        margin-bottom: 3px;
    }
    
    .result-status {
        padding: 3px 6px;
		font-size: 14px;
		min-width: 18px;
    }
    
    .result-country-info {
        font-size: 12px;
    }
    
    /* Footer buttons - now in right sidebar */
    .minigame-buttons {
        gap: 4px;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
    }
    
    .minigame-continue-btn,
    .minigame-retry-btn,
    .minigame-close-btn {
        padding: 6px 8px;
        font-size: 10px;
        width: 100%;
        max-width: none;
    }
    
    /* Memory match - use svh for max-height */
    .memory-section {
        padding: 5px;
    }
    
    .memory-section h3 {
        font-size: 11px;
        margin-bottom: 5px;
    }
    
    .memory-grid {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 4px; /* Fallback */
        max-height: calc(78svh - 150px);
        padding: 4px;
    }
    
    .memory-card {
        width: 65px;
        height: 65px;
        border-radius: 6px;
    }
    
    .memory-flag,
    .memory-dish {
        width: 28px;
        height: 28px;
    }
    
    .memory-country-name,
    .memory-dish-name {
        font-size: 7px;
        max-width: 55px;
    }
}

/* Very short phones (under 400px height) */
@media (max-height: 400px) and (orientation: landscape) {
    #minigame-dialog[open] {
        max-height: 95svh;
        margin: 1svh auto;
        grid-template-columns: 1fr 110px;
    }
    
    #minigame-dialog > header {
        padding: 4px 6px;
        gap: 4px;
    }

    #minigame-dialog > header h2 {
        font-size: 9px;
    }
    
    .minigame-progress {
        padding: 1px 4px;
        font-size: 7px;
    }

    .minigame-restart-btn {
        font-size: 9px;
        padding: 3px 6px;
    }

    #minigame-dialog .btn-close {
        width: 24px;
        height: 24px;
        font-size: 28px;
    }
    
    .minigame-container {
        gap: 5px;
        padding: 5px;
        height: calc(72svh - 65px);
        max-height: calc(72svh - 65px);
    }
    
    .minigame-instructions {
        font-size: 13px;
        padding: 5px 8px;
    }
    
    .minigame-ingredient {
        width: 70px;
        height: 70px;
    }
    
    .ingredient-label {
        font-size: 8px;
        padding: 3px 2px;
    }
    
    .minigame-result-card {
        width: 100px;
        padding: 6px;
    }
    
    .result-image-container {
        height: 50px;
    }
    
    .result-dish-name {
        font-size: 10px;
    }
    
    .minigame-continue-btn,
    .minigame-retry-btn,
    .minigame-close-btn {
        padding: 4px 6px;
        font-size: 9px;
    }
    
    #minigame-dialog > footer.minigame-footer {
        padding: 4px 6px;
    }
    
    .memory-grid {
        max-height: calc(72svh - 110px);
    }
    
    .memory-card {
        width: 55px;
        height: 55px;
    }
    
    .memory-flag,
    .memory-dish {
        width: 22px;
        height: 22px;
    }
    
    .memory-country-name,
    .memory-dish-name {
        font-size: 6px;
        max-width: 48px;
    }
}

/* Source: src/assets/css/components/quiz.css */

/* ========================================
   QUIZ - Question & Answer Interface
   ======================================== */

/* Quiz dialog background (no display/layout here – closed state stays default) */
#quiz-dialog {
    background: var(--color-bg-cream) url('../images/BG_Quiz.webp') center / cover no-repeat;
}

/* When open: constrain height and make body scrollable on low-height screens */
#quiz-dialog[open] {
    max-height: 90svh;
    display: flex;
    flex-direction: column;
}

#quiz-dialog[open] > header {
    flex-shrink: 0;
}

#quiz-dialog[open] > section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-medium) var(--color-bg-light);
}

#quiz-dialog[open] > section::-webkit-scrollbar {
    width: 8px;
}

#quiz-dialog[open] > section::-webkit-scrollbar-track {
    background: var(--color-bg-light);
    border-radius: 4px;
}

#quiz-dialog[open] > section::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: 4px;
}

#quiz-dialog[open] > section::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-dark);
}

#quiz-dialog[open] > footer.quiz-footer {
    flex-shrink: 0;
}

/* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
@media (hover: hover) and (pointer: fine) {
	.quiz-answer-btn:hover {
		background: linear-gradient(135deg, var(--color-success-bg-alt) 0%, var(--color-bg-cream) 100%);
		border-color: var(--color-primary);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px var(--overlay-primary-20);
	}

	.quiz-btn-primary:hover {
		background: var(--color-primary-dark);
		box-shadow: var(--shadow-sm);
	}

	.quiz-btn-secondary:hover {
		background: var(--color-text-muted-dark);
		filter: brightness(1.1);
	}

	.quiz-btn-success:hover {
		background: var(--color-primary-dark);
	}

	#start-quiz-btn:hover {
		background: var(--color-primary-dark);
		border-color: var(--color-primary-dark);
		color: var(--color-text-white);
		transform: translateX(-50%) translateY(-2px);
		box-shadow: 0 6px 20px rgba(106, 126, 15, 0.4);
	}

	.quiz-result-item:hover {
		background: var(--color-bg-body);
		transform: translateX(4px);
	}
}

/* ===== QUIZ HEADER ===== */
.quiz-header {
	padding: 0px 30px;
	border-bottom: 2px solid var(--overlay-primary-10);
}

.quiz-dialog-title {
	color: var(--color-text-white);
	text-align: left;
	padding-right: 20px;
	line-height: 1.3;
}

.quiz-subtitle {
	margin: 8px 0 0 0;
    font-size: 16px;
	opacity: 0.7;
}

/* ===== QUIZ PROGRESS ===== */
.quiz-progress {
	background: var(--overlay-primary-10);
	height: 6px;
	margin-top: 15px;
	border-radius: 3px;
	overflow: hidden;
}

.quiz-progress-bar {
	height: 100%;
	background: var(--gradient-primary);
	width: 0%;
	transition: width 0.3s ease;
	box-shadow: 0 0 10px var(--overlay-primary-50);
}

/* ===== QUIZ QUESTION & ANSWERS ===== */
.quiz-question {
	font-size: 34px;
	padding: 15px 1em;
    text-align: center;
	font-weight: var(--font-weight-semibold);
}

#quiz-answers {
	display: grid;
	gap: 12px;
	margin-bottom: 25px;
	padding: 0 40px;
}

.quiz-answer-btn {
	background: var(--gradient-card);
	border: 2px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: 16px 24px;
	text-align: left;
	font-size: 25px;
	position: relative;
}

.quiz-answer-btn.correct {
	background: var(--color-success-bg);
	border-color: var(--color-success);
	color: var(--color-success-text);
}

.quiz-answer-btn.incorrect {
	background: var(--color-error-bg);
	border-color: var(--color-error);
	color: var(--color-error-text);
}

.quiz-answer-btn.selected {
	border-color: var(--color-accent-alt);
	background: var(--color-info-bg);
}

.quiz-explanation {
	background: var(--color-bg-cream);
	border-left: 4px solid var(--color-primary);
	padding: 20px 30px;
	margin: 20px 30px 0;
	border-radius: var(--radius-md);
}

/* ===== QUIZ FOOTER ===== */
.quiz-footer {
	justify-content: space-between;
	font-size: 25px;
}

.quiz-score {
	font-weight: 700;
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
    margin-left: 0.5em;
}

.quiz-controls {
	display: flex;
	gap: 12px;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

/* ===== QUIZ BUTTONS ===== */
.quiz-btn {
	padding: 10px 20px;
	border-radius: var(--radius-sm);
    font-size: 25px;
	font-weight: 600;
}

.quiz-btn-primary {
	background: var(--color-primary);
	color: var(--color-text-white);
}

.quiz-btn-secondary {
	background: var(--color-text-muted);
	color: var(--color-text-white);
}

.quiz-btn-success {
	background: var(--color-primary);
	color: var(--color-text-white);
}


/* ===== QUIZ START BUTTON (Gameplay Interface) ===== */
#start-quiz-btn {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary);
	border: 3px solid var(--color-primary);
	color: var(--color-text-white);
	padding: 16px 40px;
	border-radius: var(--radius-pill);
	font-size: 20px;
	font-weight: 700;
	z-index: 1000;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#start-quiz-btn.jiggle {
	animation: jiggleCentered 0.5s ease-in-out infinite;
}

/* ===== QUIZ RESULTS SCREEN ===== */
.quiz-results-wrapper {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow-y: auto;
}

.quiz-results-header {
	text-align: center;
	padding: 20px;
	background: var(--color-bg-light);
	border-radius: var(--radius-lg);
}

.results-title {
	margin: 0 0 10px 0;
	font-size: 28px;
	font-weight: 700;
	color: var(--color-primary);
}

.results-score {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.quiz-results-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.quiz-result-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--radius-md);
	background: var(--color-bg-light);
	transition: var(--transition-normal);
}

.quiz-result-item.correct {
	border-left: 4px solid var(--color-success);
}

.quiz-result-item.incorrect {
	border-left: 4px solid var(--color-error);
}

.result-number {
	font-weight: 700;
	font-size: 14px;
	color: var(--color-text-muted);
	min-width: 30px;
}

.quiz-result-item.correct .result-status {
	color: var(--color-success);
}

.quiz-result-item.incorrect .result-status {
	color: var(--color-error);
}

.result-text {
	flex: 1;
	font-size: 15px;
}

.result-answer {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-bg-white);
	padding: 4px 12px;
	border-radius: var(--radius-sm);
}

/* ========================================
   QUIZ MOBILE LANDSCAPE ADAPTATIONS
   Uses dvh (dynamic viewport height) with vh fallback
   to properly account for mobile browser UI
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
	#quiz-dialog > header {
		padding: 8px 14px;
		flex-shrink: 0;
	}
	
	.quiz-dialog-title {
		font-size: 14px;
	}
	
	.quiz-header {
		padding: 0 14px;
		flex-shrink: 0;
	}
	
	.quiz-subtitle {
		font-size: 11px;
		margin-top: 3px;
	}
	
	.quiz-progress {
		height: 3px;
		margin-top: 6px;
	}
	
	.quiz-question {
		font-size: 14px;
		padding: 8px 0;
		flex-shrink: 0;
	}
	
	#quiz-answers {
		gap: 6px;
		margin-bottom: 10px;
		padding: 0 14px;
		flex-shrink: 0;
	}
	
	.quiz-answer-btn {
		padding: 4px 12px;
		font-size: 12px;
		border-radius: 6px;
	}
	
	.quiz-explanation {
		padding: 10px 14px;
		margin: 8px 14px 0;
		font-size: 12px;
		line-height: 1.35;
		flex-shrink: 0;
	}
	
	.quiz-footer {
		padding: 8px 14px;
		flex-shrink: 0;
	}
	
	.quiz-score {
		font-size: 13px;
	}
	
	.quiz-btn {
		padding: 6px 12px;
		font-size: 11px;
	}
	
	/* Results screen - use svh */
	.quiz-results-wrapper {
		padding: 8px;
		gap: 8px;
		overflow-y: auto;
	}
	
	.quiz-results-header {
		padding: 10px;
		flex-shrink: 0;
	}
	
	.results-title {
		font-size: 18px;
		margin-bottom: 5px;
	}
	
	.results-score {
		font-size: 14px;
	}
	
	.quiz-results-list {
		gap: 5px;
	}
	
	.quiz-result-item {
		padding: 6px 10px;
		gap: 6px;
	}
	
	.result-number {
		font-size: 11px;
		min-width: 22px;
	}
	
	.result-text {
		font-size: 12px;
	}
	
	.result-answer {
		font-size: 10px;
		padding: 2px 6px;
	}
}

/* Very short phones (under 400px height) */
@media (max-height: 400px) and (orientation: landscape) {
	
	#quiz-dialog > header {
		padding: 4px 8px;
	}
	
	.quiz-dialog-title {
		font-size: 11px;
	}
	
	.quiz-question {
		font-size: 11px;
		padding: 4px 0;
	}
	
	.quiz-explanation {
		padding: 5px 8px;
		margin: 5px 8px 0;
		font-size: 9px;
	}
	
	.quiz-footer {
		padding: 4px 8px;
	}
	
	.quiz-btn {
		padding: 4px 8px;
		font-size: 9px;
	}
	
	.results-title {
		font-size: 14px;
	}
	
	.results-score {
		font-size: 11px;
	}
	
	.result-text {
		font-size: 10px;
	}
}

/* Source: src/assets/css/components/scene-selector.css */

/* ========================================
   SCENE SELECTOR - Circular Scene Selection
   ======================================== */

/* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
@media (hover: hover) and (pointer: fine) {
	/* Radial outward transforms for each slice on hover */

}

/* ===== SCENE SELECTOR DIALOG ===== */
.scene-selector {
    height: 90vh;
    background: var(--color-bg-cream) url('../images/BG_Scene-Selector.webp') center / cover no-repeat;
}

/* ===== SCENE SELECTOR HEADER ===== */
.scene-selector > header {
    /* Override default dialog header - custom layout for scene selector */
    background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-cream) 100%);
    padding: 0px;
    flex-direction: column;
    position: relative;
}

.scene-back-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20;
    font-size: 13.33px;
}

.scene-scenario-title {
    position: absolute;
    top: 10px;
    right: 20px;
    left: 220px;
    text-align: right;
    max-width: calc(100% - 240px);
    font-size: clamp(22px, 2.4vw, 48px);
    font-weight: 700;
    margin: 0 0 5px 0;
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scene-scenario-description {
    position: absolute;
    top: 60px;
    right: 20px;
    left: 220px;
    text-align: right;
    max-width: calc(100% - 240px);
    font-size: clamp(12px, 1.8vw, 20px);
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.3;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== SCENE CIRCLE SVG ===== */
.scene-circle-container {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-circle-svg {
    width: 100%;
    height: 100%;
    max-width: 90vmin;
    max-height: 90vmin;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

/* ===== SCENE SECTIONS ===== */
.scene-section {
  cursor: pointer;
  transition: var(--transition-normal);
}

.scene-section.scene-disabled {
  cursor: default;
  opacity: 0.7;
}

.scene-section.scene-missing-background {
  cursor: not-allowed;
  opacity: 0.65;
}

.scene-section.scene-disabled .scene-text {
  opacity: 0.6;
}

/* Default 5px offset from center to create spacing between slices */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .scene-selector {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }

    .scene-selector > header {
        padding: 20px 15px 15px;
    }

    .scene-scenario-title {
        top: 16px;
        left: 140px;
        right: 12px;
        max-width: calc(100% - 152px);
        font-size: clamp(18px, 4vw, 24px);
    }

    .scene-scenario-description {
        top: 50px;
        left: 140px;
        right: 12px;
        max-width: calc(100% - 152px);
        font-size: clamp(12px, 2.4vw, 14px);
    } 
    
    .scene-circle-svg {
        max-width: min(70vh, 500px);
    }
}

/* ===== MOBILE LANDSCAPE (Short height screens) ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .scene-selector {
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        margin: 8px auto;
    }
    
    .scene-selector > header {
        padding: 8px 12px;
    }
    
    .scene-back-btn {
        top: 8px;
        left: 8px;
        padding: 6px 6px;
        font-size: 10px;
    }
    
    .scene-scenario-title {
        top: 10px;
        left: 120px;
        right: 8px;
        max-width: calc(100% - 128px);
        font-size: clamp(14px, 3.2vw, 18px);
        margin-bottom: 2px;
    }
    
    .scene-scenario-description {
        top: 36px;
        left: 120px;
        right: 8px;
        max-width: calc(100% - 128px);
        font-size: clamp(10px, 2.2vw, 12px);
    }
    
    .scene-circle-container {
        padding: 8px;
    }
    /* HOVER-Behaviours - Media Queries disables hover behaviours for touch devices */
	@media (hover: hover) and (pointer: fine) {
		.scene-section:hover .scene-label {
			font-size: 13px !important;
		}
		
		/* Reduce hover expansion on mobile to prevent overflow */
		.scene-section[data-scene-index="0"]:hover {
			transform: translate(12px, -7px);
		}
		
		.scene-section[data-scene-index="1"]:hover {
			transform: translate(0, 14px);
		}
		
		.scene-section[data-scene-index="2"]:hover {
			transform: translate(-12px, -7px);
		}
	}
	
	.scene-circle-svg .scene-label {
		font-size: 22pt;
	}
}

/* Very short phones */
@media (max-height: 400px) and (orientation: landscape) {
    .scene-selector > header {
        padding: 6px 10px;
    }
    
    .scene-scenario-title {
        font-size: 14px;
    }
    
    .scene-scenario-description {
        font-size: 10px;
    }
}

/* Source: src/assets/css/components/settings.css */

/* ========================================
   SETTINGS - Difficulty & Language Controls
   ======================================== */

/* ===== DIFFICULTY SELECTOR ===== */
.difficulty-selector {
	position: absolute;
	top: 20px;
	left: 20px;
	background: var(--color-bg-white);
	padding: 12px 24px;
	border-radius: 30px;
	box-shadow: var(--shadow-md);
	z-index: 1000;
	display: flex;
	gap: 15px;
}

/* Difficulty buttons use: .btn.btn-sm.btn-outline-primary.btn-pill */

/* ===== LANGUAGE SELECTOR ===== */
.language-bar {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    display: none; /* Hidden in gameplay mode */
    background: var(--color-bg-white);
    padding: 12px 24px;
    border-radius: 30px;
    box-shadow: var(--shadow-md);
    gap: 15px;
}

/* Language select */
.language-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    min-width: 190px;
}

.language-select-trigger {
    appearance: none;
    background-color: var(--color-primary);
    background-image:
        linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%),
        linear-gradient(45deg, transparent 50%, var(--color-text-white) 50%),
        linear-gradient(135deg, var(--color-text-white) 50%, transparent 50%);
    background-position: 0 0, right 14px center, right 8px center;
    background-repeat: no-repeat;
    background-size: 100% 100%, 6px 6px, 6px 6px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    min-height: 32px;
    padding: 6px 34px 6px 12px;
    transition: var(--transition-fast);
    width: 100%;
}

.language-select-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    width: max-content;
    background: var(--color-bg-white);
    border: 2px solid var(--color-primary);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 6px;
    display: none;
    gap: 4px;
    z-index: 6000;
}

.language-select.open .language-select-options {
    display: grid;
}

.language-select-options[hidden] {
    display: none;
}

.language-select-option {
    width: 100%;
    background: var(--color-bg-white);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    padding: 6px 10px;
    text-align: left;
    transition: var(--transition-fast);
}

.language-flag {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: var(--shadow-xs);
    flex: 0 0 auto;
}

.language-select-option.is-selected {
    background: var(--overlay-primary-10);
    border-color: var(--color-border-accent);
}

.language-select.open .language-select-trigger {
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
    background-color: var(--color-bg-dark);
    background-image:
        linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark) 100%),
        linear-gradient(45deg, transparent 50%, var(--color-text-white) 50%),
        linear-gradient(135deg, var(--color-text-white) 50%, transparent 50%);
}

@media (hover: hover) and (pointer: fine) {
    .language-select-trigger:hover {
        background-color: var(--color-bg-dark);
        background-image:
            linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark) 100%),
            linear-gradient(45deg, transparent 50%, var(--color-text-white) 50%),
            linear-gradient(135deg, var(--color-text-white) 50%, transparent 50%);
        border-color: var(--color-bg-dark);
        box-shadow: var(--shadow-md);
    }

    .language-select-option:hover {
        background: var(--color-bg-light);
        border-color: var(--color-border-medium);
    }
}

.language-select-trigger:focus-visible {
    outline: 3px solid var(--overlay-primary-30);
    outline-offset: 2px;
}

@media (max-height: 500px) and (orientation: landscape) {
    .difficulty-selector, .language-bar {
        padding: 3px 6px;
        gap: 10px;
    }

    .language-select-trigger {
        padding: 3px 24px 3px 6px;
        font-size: 10px;
        min-height: 24px;
    }

    .language-select-option {
        font-size: 10px;
        padding: 4px 6px;
    }
}

/* ===== AUDIO SETTINGS DIALOG ===== */
.settings-dialog {
    width: min(520px, 92vw);
    height: min-content;
}

.settings-dialog > section {
    display: grid;
    gap: 20px;
    padding: 20px 30px 25px;
}

.settings-group label {
    display: block;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.settings-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-slider input[type="range"] {
    flex: 1;
    accent-color: var(--color-primary);
}

.settings-value {
    min-width: 48px;
    text-align: right;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.settings-group-recovery {
    text-align: center;
}

.recovery-key-input-wrap {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.recovery-key-input {
    font-family: ui-monospace, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    text-align: center;
    width: 100%;
    max-width: 14em;
    padding: 12px 16px;
    border: 2px solid var(--color-border-light, #ccc);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #f8f8f8);
}

.recovery-key-input::placeholder {
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.recovery-key-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-white, #fff);
}

.recovery-key-error {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 13px;
    color: var(--color-error, #c00);
}

.recovery-key-actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.recovery-key-action-btn {
    width: 100%;
    max-width: 20em;
}

.settings-hint {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 6px;
    margin-bottom: 0;
}

.settings-group-actions {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
}

.recovery-key-input:disabled {
    background: var(--color-bg-gray, #eee);
    cursor: default;
}

@media (max-width: 768px) {
    .settings-dialog > section {
        padding: 16px 20px 20px;
    }

    .settings-slider {
        gap: 10px;
    }
}

/* Small viewports (e.g. phone landscape): scrollable Settings dialog when OPEN only */
@media (max-height: 600px) {
    dialog.settings-dialog[open] {
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    dialog.settings-dialog[open] > section {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
        padding: 12px 20px 16px;
        gap: 12px;
    }

    dialog.settings-dialog[open] > header,
    dialog.settings-dialog[open] > footer {
        flex: 0 0 auto;
    }

    dialog.settings-dialog[open] .settings-group label {
        font-size: 13px;
        margin-bottom: 4px;
    }

    dialog.settings-dialog[open] .recovery-key-input {
        padding: 8px 12px;
        font-size: 1.1rem;
    }

    dialog.settings-dialog[open] .settings-group-actions {
        padding-top: 12px;
        margin-top: 4px;
    }
}